diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c0601736734dd9ec4f1d6d848f66cc7197cefa5..c43298bb327d7fd551b95ce900bbc864bd7a7123 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,74 +2,107 @@
 
 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.
 
-## [1.6.0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.5.0...v1.6.0) (2021-12-21)
+### [1.6.4](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.5.0...v1.6.4) (2022-01-11)
 
+### Bug Fixes
 
-### Features
+- increase nb of data to handle for enedis and grdf ([42b1779](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/42b17793d2255048be62270579fbb7e9db176912))
 
-* add __IS_ALPHA__ env in webpack config ([8f60b37](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/8f60b376c672e4fea41e70569c198ea90edbec57))
-* **analysis:** Add electricity consumption profile in analysis ([e6b7435](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/e6b743553b45b5b4348bbe74e4239afcd28c904a))
-* **ci:** use dependency check ([25024bc](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/25024bc0f19ae018147e77f9e912d2a83ec10a7e))
-* **conso:** add price history. A new service running at night is processing fluid data to index the right price on it. ([6fbddff](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/6fbddffd65299e26a6d639f5d475df78a3a3dfc0))
-* create partners connection modals ([1dfd4cf](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/1dfd4cf70ee2e8e5fd4c11965681205b0404715b))
-* **konnectors:** Fix display when konnector is not installed and prevent water consumption alert to be sent in this case ([0e8538b](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0e8538b28352bf529871d00f3f5b98a321534a13))
-* **onboarding:** onboarding popup ([9decadc](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/9decadcbf461692f2b10c392fb71e6e475ab313e))
-* **Partners:** Add partners check modal ([5e1279f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/5e1279f4989ed0664dbc96cf0c71f1e5a70dfca3))
-* **Terms:** Add Minor version upgrade support ([c8048e4](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c8048e47bfe5e5f5a140eefaa35af07bc6ed6679))
+### [1.6.3](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.5.0...v1.6.3) (2022-01-11)
+
+### Bug Fixes
 
+- handle correctly the migration schema version ([f89d57e](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f89d57e17a540ef907b11a79ba6c8681874d465c))
+
+### [1.6.2](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.5.0...v1.6.2) (2022-01-11)
 
 ### Bug Fixes
 
-* **alpha:** Fix alpha issue with oauth konnectors ([c5ffee2](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c5ffee2c1e554a4fc76d0906517314f1d7fa91ff))
-* **analysis:** fix previous month display ([b6c82a3](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b6c82a3470090d30a56af7d895616754ace58de5))
-* **analysis:** fix setview loop bug ([0ec71a6](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0ec71a66e4fd0e2b6d48eff79126b4d8ec385c31))
-* **analysis:** Show no data if no enedis analysis ([2467583](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/24675834e854c480e41fd6b2faa3ddb17bbf81a6))
-* **ci:** delete unused variables ([53c7562](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/53c7562bf8720c4a6e917e65cead62048db2f02a))
-* **ci:** update DOCKER_HOST ([3855c1d](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/3855c1dc7754bc52f94843f5668b5eb0a0f357e8))
-* **conso:** Fix data offset delay issue and edit number of day displayed when outdated ([fa415ad](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/fa415ad6f20f6db16c00d7b1f9c18cfc4a717f45))
-* **design:** Design fixs 1.5.1 konnector modal message + css after completing profile ([3790817](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/379081718f8a302ceb18ea37dca517bd4aa6345b))
-* **newsletter:** Fix month display + symbol revert ([b625561](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b625561b8dd0ad275e2476d72f95e17403e396c1))
-* **newsletter:** Fix month display + symbol revert ([c6e5ad0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c6e5ad0b7b90205fd7e506b817e047be5aec00b3))
-* **PartnersIssue:** Now refresh konnector state when connect konnector and partner issue active ([c3b7412](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c3b74122717c7c8a8674c24b5eca9e8c26db612c))
-* **Quiz:** Jean-Jacques Ruisseau's quiz is no longer stuck in loading ([c1412a3](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c1412a3a535adcc150175f794d45ab6c222580b9))
-* review texts for partners connection modals ([0d1b31a](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0d1b31ab4e2619f638bd79270d132451ba83f9ec))
-* update date processing for fluidPrice service ([0a7bbf1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0a7bbf1d8348f40f0baa14a1157ae3d7e8a29cc6))
+- remove wrong price from enedis and grdf month and year doctype ([b961103](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b961103bff0a6840ae7f7f254e91b079f8b8850e))
 
-### [1.5.1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.4.4...v1.5.1) (2021-11-29)
+### [1.6.1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.5.0...v1.6.1) (2022-01-11)
+
+### Features
 
+- **analysis:** Add info modal for special elec card ([931a7e7](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/931a7e7ab1ac0b9e42f453cd8c18298f8d2eb173))
+- **Feedback:** user can more easily consult the FAQ before sending its feedback ([994651a](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/994651aaf80a7b17fabff3421da3f5566fa87540))
+- **FAQ:** Update FAQ content ([263b7bdf](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/-/commit/263b7bdfc509b3233d9fcd3bdea5a04b237a683e))
+
+### Bug Fixes
+
+- add space in FAQ content ([ddcb262](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/ddcb2620384dfc153694823d85f0cd640c90d8b8))
+- adjust height of content on desktop view ([684fbc1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/684fbc175dc3af5cf1f19c643e8b091cd1642623))
+- **analysis:** Now displays the correct elec analysis for the first month of a year ([fc6d30c](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/fc6d30c07d46a577a2d365b9b40e5daf6a5484d1))
+- change invisible char by space and add a translation ([49ce0b8](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/49ce0b847e8c07b1d1ec19b290d0b19d4bfaf4f1))
+- **consumption** correct ismulti indicator on the home ([51b2884](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/51b2884323bba258085ff69f46089d3397b0f16e))
+- prevent duplicate konnector jobs ([21615d2](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/21615d241334faaa02f5b6b17e336a89e80cb070))
+- **routes:** Refacto route to avoid forcing ([f747cb0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f747cb0e154fdb6b6cd48d68c8c0fb6d05525a7b))
+- **routes:** Refacto route to avoid forcing ([de5e1de](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/de5e1def2ebc2f00a0315c14f298a1ddd35b692f))
+
+## [1.6.0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.5.0...v1.6.0) (2021-12-21)
 
 ### Features
 
-* **Analysis:** Add max day consumption card by fluid ([e0f15b0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/e0f15b000b25cf974ffdbef8f523659259dfb36d))
-* **Analysis:** add scroll position save for analysis view ([e1b9a9f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/e1b9a9f7364a9bac57df09c6eadf0ce34f114643))
-* **challenge:** Add isBuilding banner to main challenge view ([5371740](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/537174086871abdcc302d7a3028441ab2c58b03e))
-* **conso:** add cursor pointer on areas ([0202811](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0202811189011af0e394f130f100e364d20eaeb7))
-* **ProfileType:** Handling profileTypes modifications over time ([f6e9bec](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f6e9bec60486632d798b2fbd8d2e145a0b066cfc))
-* **water-alert:** new design for water threshold notification ([107455c](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/107455cead293b19031ea07a3a406b1fdac3475e))
+- add **IS_ALPHA** env in webpack config ([8f60b37](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/8f60b376c672e4fea41e70569c198ea90edbec57))
+- **analysis:** Add electricity consumption profile in analysis ([e6b7435](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/e6b743553b45b5b4348bbe74e4239afcd28c904a))
+- **ci:** use dependency check ([25024bc](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/25024bc0f19ae018147e77f9e912d2a83ec10a7e))
+- **conso:** add price history. A new service running at night is processing fluid data to index the right price on it. ([6fbddff](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/6fbddffd65299e26a6d639f5d475df78a3a3dfc0))
+- create partners connection modals ([1dfd4cf](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/1dfd4cf70ee2e8e5fd4c11965681205b0404715b))
+- **konnectors:** Fix display when konnector is not installed and prevent water consumption alert to be sent in this case ([0e8538b](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0e8538b28352bf529871d00f3f5b98a321534a13))
+- **onboarding:** onboarding popup ([9decadc](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/9decadcbf461692f2b10c392fb71e6e475ab313e))
+- **Partners:** Add partners check modal ([5e1279f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/5e1279f4989ed0664dbc96cf0c71f1e5a70dfca3))
+- **Terms:** Add Minor version upgrade support ([c8048e4](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c8048e47bfe5e5f5a140eefaa35af07bc6ed6679))
+
+### Bug Fixes
+
+- **alpha:** Fix alpha issue with oauth konnectors ([c5ffee2](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c5ffee2c1e554a4fc76d0906517314f1d7fa91ff))
+- **analysis:** fix previous month display ([b6c82a3](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b6c82a3470090d30a56af7d895616754ace58de5))
+- **analysis:** fix setview loop bug ([0ec71a6](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0ec71a66e4fd0e2b6d48eff79126b4d8ec385c31))
+- **analysis:** Show no data if no enedis analysis ([2467583](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/24675834e854c480e41fd6b2faa3ddb17bbf81a6))
+- **ci:** delete unused variables ([53c7562](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/53c7562bf8720c4a6e917e65cead62048db2f02a))
+- **ci:** update DOCKER_HOST ([3855c1d](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/3855c1dc7754bc52f94843f5668b5eb0a0f357e8))
+- **conso:** Fix data offset delay issue and edit number of day displayed when outdated ([fa415ad](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/fa415ad6f20f6db16c00d7b1f9c18cfc4a717f45))
+- **design:** Design fixs 1.5.1 konnector modal message + css after completing profile ([3790817](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/379081718f8a302ceb18ea37dca517bd4aa6345b))
+- **newsletter:** Fix month display + symbol revert ([b625561](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b625561b8dd0ad275e2476d72f95e17403e396c1))
+- **newsletter:** Fix month display + symbol revert ([c6e5ad0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c6e5ad0b7b90205fd7e506b817e047be5aec00b3))
+- **PartnersIssue:** Now refresh konnector state when connect konnector and partner issue active ([c3b7412](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c3b74122717c7c8a8674c24b5eca9e8c26db612c))
+- **Quiz:** Jean-Jacques Ruisseau's quiz is no longer stuck in loading ([c1412a3](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c1412a3a535adcc150175f794d45ab6c222580b9))
+- review texts for partners connection modals ([0d1b31a](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0d1b31ab4e2619f638bd79270d132451ba83f9ec))
+- update date processing for fluidPrice service ([0a7bbf1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0a7bbf1d8348f40f0baa14a1157ae3d7e8a29cc6))
 
+### [1.5.1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.4.4...v1.5.1) (2021-11-29)
+
+### Features
+
+- **Analysis:** Add max day consumption card by fluid ([e0f15b0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/e0f15b000b25cf974ffdbef8f523659259dfb36d))
+- **Analysis:** add scroll position save for analysis view ([e1b9a9f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/e1b9a9f7364a9bac57df09c6eadf0ce34f114643))
+- **challenge:** Add isBuilding banner to main challenge view ([5371740](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/537174086871abdcc302d7a3028441ab2c58b03e))
+- **conso:** add cursor pointer on areas ([0202811](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/0202811189011af0e394f130f100e364d20eaeb7))
+- **ProfileType:** Handling profileTypes modifications over time ([f6e9bec](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f6e9bec60486632d798b2fbd8d2e145a0b066cfc))
+- **water-alert:** new design for water threshold notification ([107455c](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/107455cead293b19031ea07a3a406b1fdac3475e))
 
 ### Bug Fixes
 
-* **analysis:** alignment fluid name maxcons card when no fluid ([a538eaf](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/a538eaf5e7fe8d78952a7c9a717bf5c211fd74ef))
-* **Analysis:** fix css overflow issue and prevent display of total analysis when only one fluid ([5900e3b](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/5900e3b566cef4e27cc4405a7f517a16e48718ca))
-* **analysis:** fix no data display on maxcons card + price alignment ([6916544](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/6916544cdfaf4d33865d5f2edc5ba94aa70e0aa5))
-* **Analysis:** fix total consumption card display ([3f9923b](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/3f9923bd1f8b4759c75c1d51673cdc7b71eca9bb))
-* **Analysis:** z-index to allow click on link ([a2e449d](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/a2e449d30ef5559317653278cf985a5ba090616f))
-* **Challenge:** fix challenge title and banner display, it was overflowing on header.  ([2ad925a](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/2ad925af32694214b64a8dde10512c32bf547744))
-* **conso:** Disable half hour check if fluid different from elec ([743e29f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/743e29f235d0c856e2983a84cd6906271599d907))
-* **conso:** Display full price for multifluid if > 1000€ ([6f9cc7e](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/6f9cc7eefc6f27ee13fa47b5456d1473b63d4846))
-* **conso:** Fix message shuffling in konnector modal ([2680d10](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/2680d10978ab6e74a741f1c1b567d7c29eb0b0a2))
-* **design:** Design fixs 1.5.1 konnector modal message + css after completing profile ([3790817](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/379081718f8a302ceb18ea37dca517bd4aa6345b))
-* **design:** fix global design issue + design improvements on analysis and consumption ([2218079](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/2218079da0635432426c355378b7e863e2731b4a))
-* **Design:** text color and alignement on profil analysis card ([f5fd8f9](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f5fd8f9803ca162ff71d4a6a2c1b0197d111f068))
-* **design:** various design return ([1532b2f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/1532b2f2590fa69d40226feeaf6c2ea63e0a7f32))
-* **Desing:** background color ([8d2d975](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/8d2d975d7a8b56284a11dfdd6c94674e66072ee3))
-* **Ecogesture:** add equipment type for ecogesture 52 ([d9b8249](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/d9b82494549b9cd5e95dccb5c43663973e5a596f))
-* **form:** Add autofocus ([5a09943](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/5a09943ac2119f1ae09b415a0d92bcba85318696))
-* **Mail:** fix month query for newsletter, we had one month offset that is no longer required ([c837ad7](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c837ad75f4b9449b28f8616b95da1a7066744fe9))
-* price estimation pop-up fluid order ([f516e89](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f516e89ca58309ca72a826d9eff061923beee16a))
-* Scroll to top on every page navigation ([b718bc7](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b718bc7d2538f252c744cbeb435aad0f050be9de))
-* tu ([7faa1c1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/7faa1c13f226a92ff5f79fd9269f669010fe4a50))
+- **analysis:** alignment fluid name maxcons card when no fluid ([a538eaf](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/a538eaf5e7fe8d78952a7c9a717bf5c211fd74ef))
+- **Analysis:** fix css overflow issue and prevent display of total analysis when only one fluid ([5900e3b](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/5900e3b566cef4e27cc4405a7f517a16e48718ca))
+- **analysis:** fix no data display on maxcons card + price alignment ([6916544](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/6916544cdfaf4d33865d5f2edc5ba94aa70e0aa5))
+- **Analysis:** fix total consumption card display ([3f9923b](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/3f9923bd1f8b4759c75c1d51673cdc7b71eca9bb))
+- **Analysis:** z-index to allow click on link ([a2e449d](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/a2e449d30ef5559317653278cf985a5ba090616f))
+- **Challenge:** fix challenge title and banner display, it was overflowing on header. ([2ad925a](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/2ad925af32694214b64a8dde10512c32bf547744))
+- **conso:** Disable half hour check if fluid different from elec ([743e29f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/743e29f235d0c856e2983a84cd6906271599d907))
+- **conso:** Display full price for multifluid if > 1000€ ([6f9cc7e](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/6f9cc7eefc6f27ee13fa47b5456d1473b63d4846))
+- **conso:** Fix message shuffling in konnector modal ([2680d10](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/2680d10978ab6e74a741f1c1b567d7c29eb0b0a2))
+- **design:** Design fixs 1.5.1 konnector modal message + css after completing profile ([3790817](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/379081718f8a302ceb18ea37dca517bd4aa6345b))
+- **design:** fix global design issue + design improvements on analysis and consumption ([2218079](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/2218079da0635432426c355378b7e863e2731b4a))
+- **Design:** text color and alignement on profil analysis card ([f5fd8f9](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f5fd8f9803ca162ff71d4a6a2c1b0197d111f068))
+- **design:** various design return ([1532b2f](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/1532b2f2590fa69d40226feeaf6c2ea63e0a7f32))
+- **Desing:** background color ([8d2d975](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/8d2d975d7a8b56284a11dfdd6c94674e66072ee3))
+- **Ecogesture:** add equipment type for ecogesture 52 ([d9b8249](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/d9b82494549b9cd5e95dccb5c43663973e5a596f))
+- **form:** Add autofocus ([5a09943](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/5a09943ac2119f1ae09b415a0d92bcba85318696))
+- **Mail:** fix month query for newsletter, we had one month offset that is no longer required ([c837ad7](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/c837ad75f4b9449b28f8616b95da1a7066744fe9))
+- price estimation pop-up fluid order ([f516e89](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/f516e89ca58309ca72a826d9eff061923beee16a))
+- Scroll to top on every page navigation ([b718bc7](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/b718bc7d2538f252c744cbeb435aad0f050be9de))
+- tu ([7faa1c1](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/commit/7faa1c13f226a92ff5f79fd9269f669010fe4a50))
 
 ## [1.5.0](https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/compare/v1.4.4...v1.5.0) (2021-11-29)
 
diff --git a/manifest.webapp b/manifest.webapp
index 70fde87685ae55c486f512f0b44253c97984a5bd..8ffb4cbaec74ef71ac1a11a30a0d88ae0dd612a7 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
   "slug": "ecolyo",
   "icon": "icon.svg",
   "categories": ["energy"],
-  "version": "1.6.0",
+  "version": "1.6.4",
   "licence": "AGPL-3.0",
   "editor": "Métropole de Lyon",
   "default_locale": "fr",
diff --git a/package.json b/package.json
index 7e36f9230067ccdbd4e9c2d4bedab6fcabe52674..bca8aababbd5aa3605e470ded71f018ac5e7379f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ecolyo",
-  "version": "1.6.0",
+  "version": "1.6.4",
   "scripts": {
     "tx": "tx pull --all || true",
     "lint": "yarn lint:js && yarn lint:styles",
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index acc8cd7c3a1f662dded519795197469327f2c884..e7426b2cd0dd6155a9272a59164b2d9ab8545f44 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -10,6 +10,7 @@ import { MonthlyForecast, ProfileType } from 'models/profileType.model'
 import './analysisConsumption.scss'
 import Button from '@material-ui/core/Button'
 import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
 import ProfileTypeService from 'services/profileType.service'
 import { Client, useClient } from 'cozy-client'
@@ -39,6 +40,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
   const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0)
   const [forecast, setForecast] = useState<MonthlyForecast | null>(null)
   const [toggleHome, setToggleHome] = useState<string>('average')
+  const [isLoading, setisLoading] = useState<boolean>(true)
 
   const disconnectedFluidTypes: FluidType[] = [
     FluidType.ELECTRICITY,
@@ -92,6 +94,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
           if (monthlyForecast) {
             getTotalValueWithConnectedFluids(monthlyForecast)
           }
+          setisLoading(false)
         }
       }
     }
@@ -131,7 +134,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
             alt="pas de profil remplis"
           />
         </div>
-      ) : (
+      ) : !isLoading ? (
         <>
           <div className="consumption-title text-20-bold">
             <div className="user-title">{t('analysis.user_consumption')}</div>
@@ -212,6 +215,10 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
             </span>
           </StyledCard>
         </>
+      ) : (
+        <div className="loader-container">
+          <StyledSpinner size="5em" fluidType={FluidType.ELECTRICITY} />
+        </div>
       )}
     </div>
   )
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 297bb171c94f45953fd283ba8b0632b97f34b622..9ca28b01cd1cfcda03f8c091b997801b7a216dde 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -43,41 +43,14 @@ const AnalysisView: React.FC = () => {
   // Scroll handling
   const app = document.querySelector('.app-content')
   const [scrollPosition, setScrollPosition] = useState(0)
-  /**
-   * Handle Desktop scroll
-   */
-  const handleWindowScroll = () => {
-    const position = window.pageYOffset
-    setScrollPosition(position)
-  }
-  /**
-   * Handle Mobile scroll
-   */
-  const handleScroll = () => {
+
+  const saveLastScrollPosition = useCallback(() => {
     if (app) {
-      const position = app.scrollTop
+      const position =
+        app.scrollTop > window.pageYOffset ? app.scrollTop : window.pageYOffset
       setScrollPosition(position)
     }
-  }
-
-  /**
-   * Set view according to saved positon
-   */
-  const setView = () => {
-    app && app.scrollTo(0, scrollPosition)
-    window.scrollTo(0, scrollPosition)
-  }
-
-  // Set listners for scroll
-  useEffect(() => {
-    window.addEventListener('scroll', handleWindowScroll, { passive: true })
-    app && app.addEventListener('scroll', handleScroll, { passive: true })
-
-    return () => {
-      window.removeEventListener('scroll', handleWindowScroll)
-      app && app.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
+  }, [app])
 
   useEffect(() => {
     const updateAnalysisNotification = () => {
@@ -145,7 +118,11 @@ const AnalysisView: React.FC = () => {
         />
       </Header>
       <Content height={headerHeight}>
-        <MonthlyAnalysis analysisDate={currentAnalysisDate} setView={setView} />
+        <MonthlyAnalysis
+          analysisDate={currentAnalysisDate}
+          saveLastScrollPosition={saveLastScrollPosition}
+          scrollPosition={scrollPosition}
+        />
       </Content>
     </>
   )
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index ebff1dd6d6698306c1a0b582e328a71c76e00809..ef633974e471f917d59c3c818d6e5e833928ed00 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import { mount } from 'enzyme'
-import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-import * as reactRedux from 'react-redux'
+import toJson from 'enzyme-to-json'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
 import { DateTime } from 'luxon'
 import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
 import { IconButton } from '@material-ui/core'
+import {
+  mockDataLoadEnedisAnalysis,
+  mockEnedisMonthlyAnalysisArray,
+} from '../../../tests/__mocks__/enedisMonthlyAnalysisData.mock'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
@@ -17,64 +19,124 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
     }),
   }
 })
-const mockcompareStepDate = jest.fn()
-jest.mock('services/dateChart.service', () => {
+jest.mock('components/Hooks/useExploration', () => {
+  return () => ['', jest.fn()]
+})
+
+jest.mock(
+  'components/Analysis/ElecHalfHourChart',
+  () => 'mock-elechalfhourchart'
+)
+jest.mock('components/Analysis/ElecInfoModal', () => 'mock-elecinfomodal')
+
+const mockCheckDoctypeEntries = jest.fn()
+jest.mock('services/consumption.service', () => {
+  return jest.fn(() => {
+    return {
+      checkDoctypeEntries: mockCheckDoctypeEntries,
+    }
+  })
+})
+const mockGetEnedisMonthlyAnalysisByDate = jest.fn()
+const mockAggregateValuesToDataLoad = jest.fn()
+jest.mock('services/enedisMonthlyAnalysisData.service', () => {
   return jest.fn(() => {
     return {
-      compareStepDate: mockcompareStepDate,
+      getEnedisMonthlyAnalysisByDate: mockGetEnedisMonthlyAnalysisByDate,
+      aggregateValuesToDataLoad: mockAggregateValuesToDataLoad,
     }
   })
 })
-const mockStore = configureStore([])
-const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
 
 describe('ElecHalfHourMonthlyAnalysis component', () => {
-  it('should be rendered correctly', () => {
-    const store = mockStore({
-      ecolyo: {
-        global: globalStateData,
-      },
-    })
-    mockUseSelector.mockReturnValue(
-      DateTime.fromISO('2021-07-01T00:00:00.000Z', {
-        zone: 'utc',
-      })
+  beforeEach(() => {
+    mockCheckDoctypeEntries.mockClear()
+    mockGetEnedisMonthlyAnalysisByDate.mockClear()
+    mockAggregateValuesToDataLoad.mockClear()
+  })
+
+  it('should be rendered correctly when isHalfHourActivated is false', async () => {
+    mockCheckDoctypeEntries.mockResolvedValueOnce(false)
+    const wrapper = mount(
+      <ElecHalfHourMonthlyAnalysis
+        analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+          zone: 'utc',
+        })}
+      />
+    )
+    await waitForComponentToPaint(wrapper)
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+
+  it('should be rendered correctly when isHalfHourActivated is true', async () => {
+    mockCheckDoctypeEntries.mockResolvedValue(true)
+    mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
+      mockEnedisMonthlyAnalysisArray
+    )
+    mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+      mockDataLoadEnedisAnalysis
     )
     const wrapper = mount(
-      <Provider store={store}>
-        <ElecHalfHourMonthlyAnalysis
-          analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
-            zone: 'utc',
-          })}
-        />
-      </Provider>
-    ).getElement()
-    expect(wrapper).toMatchSnapshot()
+      <ElecHalfHourMonthlyAnalysis
+        analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+          zone: 'utc',
+        })}
+      />
+    )
+    await waitForComponentToPaint(wrapper)
+    expect(toJson(wrapper)).toMatchSnapshot()
   })
+
   it('should change from weekend to week', async () => {
-    const store = mockStore({
-      ecolyo: {
-        global: globalStateData,
-      },
-    })
-    mockUseSelector.mockReturnValue(
-      DateTime.fromISO('2021-07-01T00:00:00.000Z', {
-        zone: 'utc',
-      })
+    mockCheckDoctypeEntries.mockResolvedValue(true)
+    mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
+      mockEnedisMonthlyAnalysisArray
+    )
+    mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+      mockDataLoadEnedisAnalysis
     )
     const wrapper = mount(
-      <Provider store={store}>
-        <ElecHalfHourMonthlyAnalysis
-          analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
-            zone: 'utc',
-          })}
-        />
-      </Provider>
+      <ElecHalfHourMonthlyAnalysis
+        analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+          zone: 'utc',
+        })}
+      />
     )
+    await waitForComponentToPaint(wrapper)
     wrapper
       .find(IconButton)
       .first()
       .simulate('click')
-    expect(wrapper.find('.weekend')).toBeTruthy()
+    await waitForComponentToPaint(wrapper)
+    expect(wrapper.find('.week').exists()).toBeTruthy()
+  })
+
+  it('should call the ElecInfoModal with open = true when click on the button', async () => {
+    mockCheckDoctypeEntries.mockResolvedValue(true)
+    mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
+      mockEnedisMonthlyAnalysisArray
+    )
+    mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+      mockDataLoadEnedisAnalysis
+    )
+    const wrapper = mount(
+      <ElecHalfHourMonthlyAnalysis
+        analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
+          zone: 'utc',
+        })}
+      />
+    )
+    await waitForComponentToPaint(wrapper)
+    wrapper
+      .find('.showmodal')
+      .first()
+      .simulate('click')
+    await waitForComponentToPaint(wrapper)
+    expect(
+      wrapper
+        .find('mock-elecinfomodal')
+        .prop('open')
+        ?.valueOf()
+    ).toBe(true)
   })
 })
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index 1320e16c076c3a4699696cb5fab473e3b8ed6984..68cf39659a63832172bbdf017190bc30ecbb1db2 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
@@ -18,7 +18,7 @@ import {
   AggregatedEnedisMonthlyDataloads,
   EnedisMonthlyAnalysisData,
 } from 'models/enedisMonthlyAnalysis'
-import ElecHalfHourChart from './ElecHalfHourChart'
+import ElecHalfHourChart from 'components/Analysis/ElecHalfHourChart'
 import './elecHalfHourMonthlyAnalysis.scss'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import { TimeStep } from 'enum/timeStep.enum'
@@ -27,6 +27,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import useExploration from 'components/Hooks/useExploration'
 import { FluidConfig } from 'models'
 import ConfigService from 'services/fluidConfig.service'
+import ElecInfoModal from './ElecInfoModal'
 
 interface ElecHalfHourMonthlyAnalysisProps {
   analysisDate: DateTime
@@ -39,18 +40,24 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
   const client = useClient()
   const fluidConfig: Array<FluidConfig> = new ConfigService().getFluidConfig()
   const [, setValidExploration] = useExploration()
-  const [isWeekend, setisWeekend] = useState(true)
-  const [isHalfHourActivated, setisHalfHourActivated] = useState(true)
-  const [isLoading, setisLoading] = useState(true)
+  const [isWeekend, setisWeekend] = useState<boolean>(true)
+  const [isHalfHourActivated, setisHalfHourActivated] = useState<boolean>(true)
+  const [isLoading, setisLoading] = useState<boolean>(true)
   const [monthDataloads, setMonthDataloads] = useState<
     AggregatedEnedisMonthlyDataloads
   >()
   const [enedisAnalysisValues, setenedisAnalysisValues] = useState<
     EnedisMonthlyAnalysisData
   >()
-  const handleChangeWeek = () => {
+  const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)
+
+  const handleChangeWeek = useCallback(() => {
     setisWeekend(prev => !prev)
-  }
+  }, [])
+
+  const toggleOpenModal = useCallback(() => {
+    setOpenInfoModal(prev => !prev)
+  }, [])
 
   useEffect(() => {
     let subscribed = true
@@ -60,25 +67,28 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
         FluidType.ELECTRICITY,
         TimeStep.HALF_AN_HOUR
       )
-      if (activateHalfHourLoad) {
-        const emas = new EnedisMonthlyAnalysisDataService(client)
-        const data = await emas.getEnedisMonthlyAnalysisByDate(
-          analysisDate.year,
-          analysisDate.month - 1
-        )
-        if (data && data.length) {
-          const aggregatedData = emas.aggregateValuesToDataLoad(data[0])
-          setenedisAnalysisValues(data[0])
-          setMonthDataloads(aggregatedData)
+      if (subscribed) {
+        if (activateHalfHourLoad) {
+          const emas = new EnedisMonthlyAnalysisDataService(client)
+          const aggegatedDate = analysisDate.minus({ month: 1 })
+          const data: EnedisMonthlyAnalysisData[] = await emas.getEnedisMonthlyAnalysisByDate(
+            aggegatedDate.year,
+            aggegatedDate.month
+          )
+          if (subscribed && data && data.length) {
+            const aggregatedData = emas.aggregateValuesToDataLoad(data[0])
+            setenedisAnalysisValues(data[0])
+            setMonthDataloads(aggregatedData)
+          }
+        } else {
+          setisHalfHourActivated(false)
         }
-      } else {
-        setisHalfHourActivated(false)
+        setisLoading(false)
       }
-      setisLoading(false)
-    }
-    if (subscribed) {
-      getEnedisAnalysisData()
     }
+
+    getEnedisAnalysisData()
+
     return () => {
       subscribed = false
     }
@@ -174,6 +184,9 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
                       </div>
                     </div>
                   </div>
+                  <div onClick={toggleOpenModal} className="showmodal">
+                    {t('special_elec.showModal')}
+                  </div>
                 </div>
               )}
             </>
@@ -216,6 +229,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> =
           </Button>
         </>
       )}
+      <ElecInfoModal open={openInfoModal} handleCloseClick={toggleOpenModal} />
     </div>
   )
 }
diff --git a/src/components/Analysis/ElecInfoModal.spec.tsx b/src/components/Analysis/ElecInfoModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbd20d0dcb97f58925e18cc1a4e35c7ca092ee9d
--- /dev/null
+++ b/src/components/Analysis/ElecInfoModal.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import ElecInfoModal from './ElecInfoModal'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('ElecInfoModal component', () => {
+  it('should be rendered correctly', () => {
+    const component = mount(
+      <ElecInfoModal open={true} handleCloseClick={jest.fn()} />
+    )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})
diff --git a/src/components/Analysis/ElecInfoModal.tsx b/src/components/Analysis/ElecInfoModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1b2b0ba284ca5327dba7a542c1b9f12073215f67
--- /dev/null
+++ b/src/components/Analysis/ElecInfoModal.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Dialog from '@material-ui/core/Dialog'
+import { IconButton } from '@material-ui/core'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import './elecInfoModal.scss'
+
+interface ElecInfoModalProps {
+  open: boolean
+  handleCloseClick: () => void
+}
+
+const ElecInfoModal: React.FC<ElecInfoModalProps> = ({
+  open,
+  handleCloseClick,
+}: ElecInfoModalProps) => {
+  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('elec_info_modal.accessibility.window_title')}
+      </div>
+      <IconButton
+        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.title1')}</div>
+        <div className="text">
+          {t('elec_info_modal.text1')}
+          <br />
+          {t('elec_info_modal.text2')}
+        </div>
+        <div className="title text-18-bold">{t('elec_info_modal.title2')}</div>
+        <div className="text">
+          {t('elec_info_modal.text3')}
+          <br />
+          {t('elec_info_modal.text4')}
+          <br />
+          {t('elec_info_modal.text5')}
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+export default ElecInfoModal
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 3576b5bbb81c480b517ab92619374935716535b9..6a8f1167395ca1e08d846c5b50b7d50f7520222d 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -27,12 +27,14 @@ import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
 
 interface MonthlyAnalysisProps {
   analysisDate: DateTime
-  setView?: Function
+  saveLastScrollPosition: () => void
+  scrollPosition: number
 }
 
 const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
   analysisDate,
-  setView,
+  saveLastScrollPosition,
+  scrollPosition,
 }: MonthlyAnalysisProps) => {
   const { t } = useI18n()
   const client = useClient()
@@ -53,8 +55,6 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
     percentageVariation: 0,
   })
   const [isLoaded, setIsLoaded] = useState<boolean>(false)
-  const [fluidLackOfData, setFluidLackOfData] = useState<Array<FluidType>>([])
-
   const configService = new ConfigService()
   const fluidConfig = configService.getFluidConfig()
   const timeStep = TimeStep.MONTH
@@ -63,55 +63,57 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
   }
 
   useEffect(() => {
-    setIsLoaded(false)
     let subscribed = true
-    async function populateData() {
-      const consumptionService = new ConsumptionService(client)
-      const performanceIndicatorService = new PerformanceIndicatorService()
-      const periods = {
-        timePeriod: {
-          startDate: analysisDate.minus({ month: 1 }).startOf('month'),
-          endDate: analysisDate.minus({ month: 1 }).endOf('month'),
-        },
-        comparisonTimePeriod: {
-          startDate: analysisDate.minus({ month: 2 }).startOf('month'),
-          endDate: analysisDate.minus({ month: 2 }).endOf('month'),
-        },
-      }
-      const fetchedPerformanceIndicators = await consumptionService.getPerformanceIndicators(
-        periods.timePeriod,
-        timeStep,
-        fluidTypes,
-        periods.comparisonTimePeriod
-      )
 
+    async function populateData() {
       if (subscribed) {
-        if (fetchedPerformanceIndicators) {
-          const fluidLackOfDataIndicators: Array<FluidType> = []
-          fetchedPerformanceIndicators.forEach((fluidIndicator, index) => {
-            if (fluidIndicator.compareValue === null) {
-              fluidLackOfDataIndicators.push(index)
-            }
-          })
-          setFluidLackOfData(fluidLackOfDataIndicators)
-          setPerformanceIndicators(fetchedPerformanceIndicators)
-          setAggregatedPerformanceIndicators(
-            performanceIndicatorService.aggregatePerformanceIndicators(
-              fetchedPerformanceIndicators
+        setIsLoaded(false)
+        const consumptionService = new ConsumptionService(client)
+        const performanceIndicatorService = new PerformanceIndicatorService()
+        const periods = {
+          timePeriod: {
+            startDate: analysisDate.minus({ month: 1 }).startOf('month'),
+            endDate: analysisDate.minus({ month: 1 }).endOf('month'),
+          },
+          comparisonTimePeriod: {
+            startDate: analysisDate.minus({ month: 2 }).startOf('month'),
+            endDate: analysisDate.minus({ month: 2 }).endOf('month'),
+          },
+        }
+        const fetchedPerformanceIndicators = await consumptionService.getPerformanceIndicators(
+          periods.timePeriod,
+          timeStep,
+          fluidTypes,
+          periods.comparisonTimePeriod
+        )
+        if (subscribed) {
+          if (fetchedPerformanceIndicators) {
+            setPerformanceIndicators(fetchedPerformanceIndicators)
+            setAggregatedPerformanceIndicators(
+              performanceIndicatorService.aggregatePerformanceIndicators(
+                fetchedPerformanceIndicators
+              )
             )
-          )
+          }
+          setIsLoaded(true)
         }
-        setIsLoaded(true)
-        // Set view to saved scroll position
-        setView && setView()
       }
     }
     populateData()
 
     return () => {
+      saveLastScrollPosition()
       subscribed = false
     }
-  }, [client, timeStep, fluidTypes, analysisDate])
+  }, [client, timeStep, fluidTypes, analysisDate, saveLastScrollPosition])
+
+  useEffect(() => {
+    if (isLoaded) {
+      const app = document.querySelector('.app-content')
+      window.scrollTo(0, scrollPosition)
+      app && app.scrollTo(0, scrollPosition)
+    }
+  }, [isLoaded, scrollPosition])
 
   return (
     <>
diff --git a/src/components/Analysis/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart.spec.tsx
index 2e3fa93a967c1d8569ced08542f1b58444d0f20d..26f22d13f87761cc73e5c6ccb91d029b5d90fcf0 100644
--- a/src/components/Analysis/TotalAnalysisChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart.spec.tsx
@@ -27,6 +27,7 @@ jest.mock('services/consumption.service', () => {
     }
   })
 })
+jest.mock('components/Analysis/PieChart', () => 'PieChart')
 const mockStore = configureStore([])
 
 describe('TotalAnalysisChart component', () => {
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index c0386f0588d4bbef2abd8fa46b36c34b73601700..5300385498177f89b076b8797d9403dd944fde18 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -1,20 +1,654 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is false 1`] = `
+<ElecHalfHourMonthlyAnalysis
+  analysisDate={"2021-07-01T00:00:00.000Z"}
 >
-  <ElecHalfHourMonthlyAnalysis
-    analysisDate={"2021-07-01T00:00:00.000Z"}
-  />
-</Provider>
+  <div
+    className="special-elec-container"
+  >
+    <Icon
+      className="elec-icon"
+      icon="test-file-stub"
+      size={42}
+      spin={false}
+    >
+      <Component
+        className="elec-icon styles__icon___23x3R"
+        height={42}
+        style={Object {}}
+        width={42}
+      >
+        <svg
+          className="elec-icon styles__icon___23x3R"
+          height={42}
+          style={Object {}}
+          width={42}
+        >
+          <use
+            xlinkHref="#test-file-stub"
+          />
+        </svg>
+      </Component>
+    </Icon>
+    <div
+      className="text-18-normal title"
+    >
+      special_elec.title
+    </div>
+    <div
+      className="activation-text text-18-normal"
+    >
+      timestep.activate.enedis.no_consent_active.text_analysis
+    </div>
+    <WithStyles(ForwardRef(Button))
+      aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+      classes={
+        Object {
+          "label": "text-16-bold",
+          "root": "btn-highlight",
+        }
+      }
+      onClick={[Function]}
+    >
+      <ForwardRef(Button)
+        aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+        classes={
+          Object {
+            "colorInherit": "MuiButton-colorInherit",
+            "contained": "MuiButton-contained",
+            "containedPrimary": "MuiButton-containedPrimary",
+            "containedSecondary": "MuiButton-containedSecondary",
+            "containedSizeLarge": "MuiButton-containedSizeLarge",
+            "containedSizeSmall": "MuiButton-containedSizeSmall",
+            "disableElevation": "MuiButton-disableElevation",
+            "disabled": "Mui-disabled",
+            "endIcon": "MuiButton-endIcon",
+            "focusVisible": "Mui-focusVisible",
+            "fullWidth": "MuiButton-fullWidth",
+            "iconSizeLarge": "MuiButton-iconSizeLarge",
+            "iconSizeMedium": "MuiButton-iconSizeMedium",
+            "iconSizeSmall": "MuiButton-iconSizeSmall",
+            "label": "MuiButton-label text-16-bold",
+            "outlined": "MuiButton-outlined",
+            "outlinedPrimary": "MuiButton-outlinedPrimary",
+            "outlinedSecondary": "MuiButton-outlinedSecondary",
+            "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+            "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+            "root": "MuiButton-root btn-highlight",
+            "sizeLarge": "MuiButton-sizeLarge",
+            "sizeSmall": "MuiButton-sizeSmall",
+            "startIcon": "MuiButton-startIcon",
+            "text": "MuiButton-text",
+            "textPrimary": "MuiButton-textPrimary",
+            "textSecondary": "MuiButton-textSecondary",
+            "textSizeLarge": "MuiButton-textSizeLarge",
+            "textSizeSmall": "MuiButton-textSizeSmall",
+          }
+        }
+        onClick={[Function]}
+      >
+        <WithStyles(ForwardRef(ButtonBase))
+          aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+          className="MuiButton-root btn-highlight MuiButton-text"
+          component="button"
+          disabled={false}
+          focusRipple={true}
+          focusVisibleClassName="Mui-focusVisible"
+          onClick={[Function]}
+          type="button"
+        >
+          <ForwardRef(ButtonBase)
+            aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+            className="MuiButton-root btn-highlight MuiButton-text"
+            classes={
+              Object {
+                "disabled": "Mui-disabled",
+                "focusVisible": "Mui-focusVisible",
+                "root": "MuiButtonBase-root",
+              }
+            }
+            component="button"
+            disabled={false}
+            focusRipple={true}
+            focusVisibleClassName="Mui-focusVisible"
+            onClick={[Function]}
+            type="button"
+          >
+            <button
+              aria-label="timestep.activate.enedis.no_consent_active.accessibility.button_activate"
+              className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onDragLeave={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              tabIndex={0}
+              type="button"
+            >
+              <span
+                className="MuiButton-label text-16-bold"
+              >
+                <div
+                  className="oauthform-button-content"
+                >
+                  <div
+                    className="oauthform-button-content-icon"
+                  >
+                    <StyledIcon
+                      icon="test-file-stub"
+                      size={48}
+                    >
+                      <Icon
+                        aria-hidden={true}
+                        icon="test-file-stub"
+                        size={48}
+                        spin={false}
+                      >
+                        <Component
+                          aria-hidden={true}
+                          className="styles__icon___23x3R"
+                          height={48}
+                          style={Object {}}
+                          width={48}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="styles__icon___23x3R"
+                            height={48}
+                            style={Object {}}
+                            width={48}
+                          >
+                            <use
+                              xlinkHref="#test-file-stub"
+                            />
+                          </svg>
+                        </Component>
+                      </Icon>
+                    </StyledIcon>
+                  </div>
+                  <div
+                    className="oauthform-button-text text-18-bold"
+                  >
+                    <div>
+                      timestep.activate.enedis.no_consent_active.accessibility.button_activate
+                    </div>
+                  </div>
+                </div>
+              </span>
+              <NoSsr>
+                <WithStyles(memo)
+                  center={false}
+                >
+                  <ForwardRef(TouchRipple)
+                    center={false}
+                    classes={
+                      Object {
+                        "child": "MuiTouchRipple-child",
+                        "childLeaving": "MuiTouchRipple-childLeaving",
+                        "childPulsate": "MuiTouchRipple-childPulsate",
+                        "ripple": "MuiTouchRipple-ripple",
+                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                        "rippleVisible": "MuiTouchRipple-rippleVisible",
+                        "root": "MuiTouchRipple-root",
+                      }
+                    }
+                  >
+                    <span
+                      className="MuiTouchRipple-root"
+                    >
+                      <TransitionGroup
+                        childFactory={[Function]}
+                        component={null}
+                        exit={true}
+                      />
+                    </span>
+                  </ForwardRef(TouchRipple)>
+                </WithStyles(memo)>
+              </NoSsr>
+            </button>
+          </ForwardRef(ButtonBase)>
+        </WithStyles(ForwardRef(ButtonBase))>
+      </ForwardRef(Button)>
+    </WithStyles(ForwardRef(Button))>
+    <mock-elecinfomodal
+      handleCloseClick={[Function]}
+      open={false}
+    />
+  </div>
+</ElecHalfHourMonthlyAnalysis>
+`;
+
+exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true 1`] = `
+<ElecHalfHourMonthlyAnalysis
+  analysisDate={"2021-07-01T00:00:00.000Z"}
+>
+  <div
+    className="special-elec-container"
+  >
+    <Icon
+      className="elec-icon"
+      icon="test-file-stub"
+      size={42}
+      spin={false}
+    >
+      <Component
+        className="elec-icon styles__icon___23x3R"
+        height={42}
+        style={Object {}}
+        width={42}
+      >
+        <svg
+          className="elec-icon styles__icon___23x3R"
+          height={42}
+          style={Object {}}
+          width={42}
+        >
+          <use
+            xlinkHref="#test-file-stub"
+          />
+        </svg>
+      </Component>
+    </Icon>
+    <div
+      className="text-18-normal title"
+    >
+      special_elec.title
+    </div>
+    <div
+      className="navigator"
+    >
+      <WithStyles(ForwardRef(IconButton))
+        aria-label="consumption.accessibility.button_previous_value"
+        className="arrow-prev"
+        onClick={[Function]}
+      >
+        <ForwardRef(IconButton)
+          aria-label="consumption.accessibility.button_previous_value"
+          className="arrow-prev"
+          classes={
+            Object {
+              "colorInherit": "MuiIconButton-colorInherit",
+              "colorPrimary": "MuiIconButton-colorPrimary",
+              "colorSecondary": "MuiIconButton-colorSecondary",
+              "disabled": "Mui-disabled",
+              "edgeEnd": "MuiIconButton-edgeEnd",
+              "edgeStart": "MuiIconButton-edgeStart",
+              "label": "MuiIconButton-label",
+              "root": "MuiIconButton-root",
+              "sizeSmall": "MuiIconButton-sizeSmall",
+            }
+          }
+          onClick={[Function]}
+        >
+          <WithStyles(ForwardRef(ButtonBase))
+            aria-label="consumption.accessibility.button_previous_value"
+            centerRipple={true}
+            className="MuiIconButton-root arrow-prev"
+            disabled={false}
+            focusRipple={true}
+            onClick={[Function]}
+          >
+            <ForwardRef(ButtonBase)
+              aria-label="consumption.accessibility.button_previous_value"
+              centerRipple={true}
+              className="MuiIconButton-root arrow-prev"
+              classes={
+                Object {
+                  "disabled": "Mui-disabled",
+                  "focusVisible": "Mui-focusVisible",
+                  "root": "MuiButtonBase-root",
+                }
+              }
+              disabled={false}
+              focusRipple={true}
+              onClick={[Function]}
+            >
+              <button
+                aria-label="consumption.accessibility.button_previous_value"
+                className="MuiButtonBase-root MuiIconButton-root arrow-prev"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
+              >
+                <span
+                  className="MuiIconButton-label"
+                >
+                  <Icon
+                    icon="test-file-stub"
+                    size={24}
+                    spin={false}
+                  >
+                    <Component
+                      className="styles__icon___23x3R"
+                      height={24}
+                      style={Object {}}
+                      width={24}
+                    >
+                      <svg
+                        className="styles__icon___23x3R"
+                        height={24}
+                        style={Object {}}
+                        width={24}
+                      >
+                        <use
+                          xlinkHref="#test-file-stub"
+                        />
+                      </svg>
+                    </Component>
+                  </Icon>
+                </span>
+                <NoSsr>
+                  <WithStyles(memo)
+                    center={true}
+                  >
+                    <ForwardRef(TouchRipple)
+                      center={true}
+                      classes={
+                        Object {
+                          "child": "MuiTouchRipple-child",
+                          "childLeaving": "MuiTouchRipple-childLeaving",
+                          "childPulsate": "MuiTouchRipple-childPulsate",
+                          "ripple": "MuiTouchRipple-ripple",
+                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                          "rippleVisible": "MuiTouchRipple-rippleVisible",
+                          "root": "MuiTouchRipple-root",
+                        }
+                      }
+                    >
+                      <span
+                        className="MuiTouchRipple-root"
+                      >
+                        <TransitionGroup
+                          childFactory={[Function]}
+                          component={null}
+                          exit={true}
+                        />
+                      </span>
+                    </ForwardRef(TouchRipple)>
+                  </WithStyles(memo)>
+                </NoSsr>
+              </button>
+            </ForwardRef(ButtonBase)>
+          </WithStyles(ForwardRef(ButtonBase))>
+        </ForwardRef(IconButton)>
+      </WithStyles(ForwardRef(IconButton))>
+      <div
+        className="average text-18-normal"
+      >
+        <div
+          className="text-1"
+        >
+          special_elec.average
+        </div>
+        <div
+          className="text-2 text-18-bold"
+        >
+          special_elec.weektype
+           
+          <span
+            className="weekend"
+          >
+            special_elec.weekend
+          </span>
+        </div>
+      </div>
+      <WithStyles(ForwardRef(IconButton))
+        aria-label="consumption.accessibility.button_previous_value"
+        className="arrow-next"
+        onClick={[Function]}
+      >
+        <ForwardRef(IconButton)
+          aria-label="consumption.accessibility.button_previous_value"
+          className="arrow-next"
+          classes={
+            Object {
+              "colorInherit": "MuiIconButton-colorInherit",
+              "colorPrimary": "MuiIconButton-colorPrimary",
+              "colorSecondary": "MuiIconButton-colorSecondary",
+              "disabled": "Mui-disabled",
+              "edgeEnd": "MuiIconButton-edgeEnd",
+              "edgeStart": "MuiIconButton-edgeStart",
+              "label": "MuiIconButton-label",
+              "root": "MuiIconButton-root",
+              "sizeSmall": "MuiIconButton-sizeSmall",
+            }
+          }
+          onClick={[Function]}
+        >
+          <WithStyles(ForwardRef(ButtonBase))
+            aria-label="consumption.accessibility.button_previous_value"
+            centerRipple={true}
+            className="MuiIconButton-root arrow-next"
+            disabled={false}
+            focusRipple={true}
+            onClick={[Function]}
+          >
+            <ForwardRef(ButtonBase)
+              aria-label="consumption.accessibility.button_previous_value"
+              centerRipple={true}
+              className="MuiIconButton-root arrow-next"
+              classes={
+                Object {
+                  "disabled": "Mui-disabled",
+                  "focusVisible": "Mui-focusVisible",
+                  "root": "MuiButtonBase-root",
+                }
+              }
+              disabled={false}
+              focusRipple={true}
+              onClick={[Function]}
+            >
+              <button
+                aria-label="consumption.accessibility.button_previous_value"
+                className="MuiButtonBase-root MuiIconButton-root arrow-next"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
+              >
+                <span
+                  className="MuiIconButton-label"
+                >
+                  <Icon
+                    icon="test-file-stub"
+                    size={24}
+                    spin={false}
+                  >
+                    <Component
+                      className="styles__icon___23x3R"
+                      height={24}
+                      style={Object {}}
+                      width={24}
+                    >
+                      <svg
+                        className="styles__icon___23x3R"
+                        height={24}
+                        style={Object {}}
+                        width={24}
+                      >
+                        <use
+                          xlinkHref="#test-file-stub"
+                        />
+                      </svg>
+                    </Component>
+                  </Icon>
+                </span>
+                <NoSsr>
+                  <WithStyles(memo)
+                    center={true}
+                  >
+                    <ForwardRef(TouchRipple)
+                      center={true}
+                      classes={
+                        Object {
+                          "child": "MuiTouchRipple-child",
+                          "childLeaving": "MuiTouchRipple-childLeaving",
+                          "childPulsate": "MuiTouchRipple-childPulsate",
+                          "ripple": "MuiTouchRipple-ripple",
+                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                          "rippleVisible": "MuiTouchRipple-rippleVisible",
+                          "root": "MuiTouchRipple-root",
+                        }
+                      }
+                    >
+                      <span
+                        className="MuiTouchRipple-root"
+                      >
+                        <TransitionGroup
+                          childFactory={[Function]}
+                          component={null}
+                          exit={true}
+                        />
+                      </span>
+                    </ForwardRef(TouchRipple)>
+                  </WithStyles(memo)>
+                </NoSsr>
+              </button>
+            </ForwardRef(ButtonBase)>
+          </WithStyles(ForwardRef(ButtonBase))>
+        </ForwardRef(IconButton)>
+      </WithStyles(ForwardRef(IconButton))>
+    </div>
+    <mock-elechalfhourchart
+      isWeekend={true}
+    />
+    <div
+      className="min-max"
+    >
+      <div
+        className="container"
+      >
+        <Icon
+          className="minIcon"
+          icon="test-file-stub"
+          size={40}
+          spin={false}
+        >
+          <Component
+            className="minIcon styles__icon___23x3R"
+            height={40}
+            style={Object {}}
+            width={40}
+          >
+            <svg
+              className="minIcon styles__icon___23x3R"
+              height={40}
+              style={Object {}}
+              width={40}
+            >
+              <use
+                xlinkHref="#test-file-stub"
+              />
+            </svg>
+          </Component>
+        </Icon>
+        <div
+          className="text"
+        >
+          <div
+            className="min text-18-normal"
+          >
+            special_elec.min
+          </div>
+          <div
+            className="value text-18-bold"
+          >
+            3
+             
+            <span>
+               kWh
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        className="container"
+      >
+        <Icon
+          className="minIcon"
+          icon="test-file-stub"
+          size={40}
+          spin={false}
+        >
+          <Component
+            className="minIcon styles__icon___23x3R"
+            height={40}
+            style={Object {}}
+            width={40}
+          >
+            <svg
+              className="minIcon styles__icon___23x3R"
+              height={40}
+              style={Object {}}
+              width={40}
+            >
+              <use
+                xlinkHref="#test-file-stub"
+              />
+            </svg>
+          </Component>
+        </Icon>
+        <div
+          className="text"
+        >
+          <div
+            className="min text-18-normal"
+          >
+            special_elec.maxPower
+          </div>
+          <div
+            className="value text-18-bold"
+          >
+            2.00
+            <span>
+               kVA
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        className="showmodal"
+        onClick={[Function]}
+      >
+        special_elec.showModal
+      </div>
+    </div>
+    <mock-elecinfomodal
+      handleCloseClick={[Function]}
+      open={false}
+    />
+  </div>
+</ElecHalfHourMonthlyAnalysis>
 `;
diff --git a/src/components/Analysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecInfoModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..de76327d5dce258bb938a4feb475ed28aae917d7
--- /dev/null
+++ b/src/components/Analysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -0,0 +1,847 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ElecInfoModal component should be rendered correctly 1`] = `
+<ElecInfoModal
+  handleCloseClick={[MockFunction]}
+  open={true}
+>
+  <WithStyles(ForwardRef(Dialog))
+    aria-labelledby="accessibility-title"
+    classes={
+      Object {
+        "paper": "modal-paper",
+        "root": "modal-root",
+      }
+    }
+    onClose={[MockFunction]}
+    open={true}
+  >
+    <ForwardRef(Dialog)
+      aria-labelledby="accessibility-title"
+      classes={
+        Object {
+          "container": "MuiDialog-container",
+          "paper": "MuiDialog-paper modal-paper",
+          "paperFullScreen": "MuiDialog-paperFullScreen",
+          "paperFullWidth": "MuiDialog-paperFullWidth",
+          "paperScrollBody": "MuiDialog-paperScrollBody",
+          "paperScrollPaper": "MuiDialog-paperScrollPaper",
+          "paperWidthFalse": "MuiDialog-paperWidthFalse",
+          "paperWidthLg": "MuiDialog-paperWidthLg",
+          "paperWidthMd": "MuiDialog-paperWidthMd",
+          "paperWidthSm": "MuiDialog-paperWidthSm",
+          "paperWidthXl": "MuiDialog-paperWidthXl",
+          "paperWidthXs": "MuiDialog-paperWidthXs",
+          "root": "MuiDialog-root modal-root",
+          "scrollBody": "MuiDialog-scrollBody",
+          "scrollPaper": "MuiDialog-scrollPaper",
+        }
+      }
+      onClose={[MockFunction]}
+      open={true}
+    >
+      <ForwardRef(Modal)
+        BackdropComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "Naked": Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "propTypes": Object {
+                "children": [Function],
+                "className": [Function],
+                "classes": [Function],
+                "invisible": [Function],
+                "open": [Function],
+                "transitionDuration": [Function],
+              },
+              "render": [Function],
+            },
+            "displayName": "WithStyles(ForwardRef(Backdrop))",
+            "options": Object {
+              "defaultTheme": Object {
+                "breakpoints": Object {
+                  "between": [Function],
+                  "down": [Function],
+                  "keys": Array [
+                    "xs",
+                    "sm",
+                    "md",
+                    "lg",
+                    "xl",
+                  ],
+                  "only": [Function],
+                  "up": [Function],
+                  "values": Object {
+                    "lg": 1280,
+                    "md": 960,
+                    "sm": 600,
+                    "xl": 1920,
+                    "xs": 0,
+                  },
+                  "width": [Function],
+                },
+                "direction": "ltr",
+                "mixins": Object {
+                  "gutters": [Function],
+                  "toolbar": Object {
+                    "@media (min-width:0px) and (orientation: landscape)": Object {
+                      "minHeight": 48,
+                    },
+                    "@media (min-width:600px)": Object {
+                      "minHeight": 64,
+                    },
+                    "minHeight": 56,
+                  },
+                },
+                "overrides": Object {},
+                "palette": Object {
+                  "action": Object {
+                    "active": "rgba(0, 0, 0, 0.54)",
+                    "disabled": "rgba(0, 0, 0, 0.26)",
+                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
+                    "hover": "rgba(0, 0, 0, 0.08)",
+                    "hoverOpacity": 0.08,
+                    "selected": "rgba(0, 0, 0, 0.14)",
+                  },
+                  "augmentColor": [Function],
+                  "background": Object {
+                    "default": "#fafafa",
+                    "paper": "#fff",
+                  },
+                  "common": Object {
+                    "black": "#000",
+                    "white": "#fff",
+                  },
+                  "contrastThreshold": 3,
+                  "divider": "rgba(0, 0, 0, 0.12)",
+                  "error": Object {
+                    "contrastText": "#fff",
+                    "dark": "#d32f2f",
+                    "light": "#e57373",
+                    "main": "#f44336",
+                  },
+                  "getContrastText": [Function],
+                  "grey": Object {
+                    "100": "#f5f5f5",
+                    "200": "#eeeeee",
+                    "300": "#e0e0e0",
+                    "400": "#bdbdbd",
+                    "50": "#fafafa",
+                    "500": "#9e9e9e",
+                    "600": "#757575",
+                    "700": "#616161",
+                    "800": "#424242",
+                    "900": "#212121",
+                    "A100": "#d5d5d5",
+                    "A200": "#aaaaaa",
+                    "A400": "#303030",
+                    "A700": "#616161",
+                  },
+                  "info": Object {
+                    "contrastText": "#fff",
+                    "dark": "#1976d2",
+                    "light": "#64b5f6",
+                    "main": "#2196f3",
+                  },
+                  "primary": Object {
+                    "contrastText": "#fff",
+                    "dark": "#303f9f",
+                    "light": "#7986cb",
+                    "main": "#3f51b5",
+                  },
+                  "secondary": Object {
+                    "contrastText": "#fff",
+                    "dark": "#c51162",
+                    "light": "#ff4081",
+                    "main": "#f50057",
+                  },
+                  "success": Object {
+                    "contrastText": "rgba(0, 0, 0, 0.87)",
+                    "dark": "#388e3c",
+                    "light": "#81c784",
+                    "main": "#4caf50",
+                  },
+                  "text": Object {
+                    "disabled": "rgba(0, 0, 0, 0.38)",
+                    "hint": "rgba(0, 0, 0, 0.38)",
+                    "primary": "rgba(0, 0, 0, 0.87)",
+                    "secondary": "rgba(0, 0, 0, 0.54)",
+                  },
+                  "tonalOffset": 0.2,
+                  "type": "light",
+                  "warning": Object {
+                    "contrastText": "rgba(0, 0, 0, 0.87)",
+                    "dark": "#f57c00",
+                    "light": "#ffb74d",
+                    "main": "#ff9800",
+                  },
+                },
+                "props": Object {},
+                "shadows": Array [
+                  "none",
+                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+                ],
+                "shape": Object {
+                  "borderRadius": 4,
+                },
+                "spacing": [Function],
+                "transitions": Object {
+                  "create": [Function],
+                  "duration": Object {
+                    "complex": 375,
+                    "enteringScreen": 225,
+                    "leavingScreen": 195,
+                    "short": 250,
+                    "shorter": 200,
+                    "shortest": 150,
+                    "standard": 300,
+                  },
+                  "easing": Object {
+                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+                  },
+                  "getAutoHeightDuration": [Function],
+                },
+                "typography": Object {
+                  "body1": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.00938em",
+                    "lineHeight": 1.5,
+                  },
+                  "body2": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.875rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.01071em",
+                    "lineHeight": 1.43,
+                  },
+                  "button": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.875rem",
+                    "fontWeight": 500,
+                    "letterSpacing": "0.02857em",
+                    "lineHeight": 1.75,
+                    "textTransform": "uppercase",
+                  },
+                  "caption": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.75rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.03333em",
+                    "lineHeight": 1.66,
+                  },
+                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                  "fontSize": 14,
+                  "fontWeightBold": 700,
+                  "fontWeightLight": 300,
+                  "fontWeightMedium": 500,
+                  "fontWeightRegular": 400,
+                  "h1": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "6rem",
+                    "fontWeight": 300,
+                    "letterSpacing": "-0.01562em",
+                    "lineHeight": 1.167,
+                  },
+                  "h2": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "3.75rem",
+                    "fontWeight": 300,
+                    "letterSpacing": "-0.00833em",
+                    "lineHeight": 1.2,
+                  },
+                  "h3": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "3rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0em",
+                    "lineHeight": 1.167,
+                  },
+                  "h4": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "2.125rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.00735em",
+                    "lineHeight": 1.235,
+                  },
+                  "h5": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1.5rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0em",
+                    "lineHeight": 1.334,
+                  },
+                  "h6": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1.25rem",
+                    "fontWeight": 500,
+                    "letterSpacing": "0.0075em",
+                    "lineHeight": 1.6,
+                  },
+                  "htmlFontSize": 16,
+                  "overline": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.75rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.08333em",
+                    "lineHeight": 2.66,
+                    "textTransform": "uppercase",
+                  },
+                  "pxToRem": [Function],
+                  "round": [Function],
+                  "subtitle1": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.00938em",
+                    "lineHeight": 1.75,
+                  },
+                  "subtitle2": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.875rem",
+                    "fontWeight": 500,
+                    "letterSpacing": "0.00714em",
+                    "lineHeight": 1.57,
+                  },
+                },
+                "zIndex": Object {
+                  "appBar": 1100,
+                  "drawer": 1200,
+                  "mobileStepper": 1000,
+                  "modal": 1300,
+                  "snackbar": 1400,
+                  "speedDial": 1050,
+                  "tooltip": 1500,
+                },
+              },
+              "name": "MuiBackdrop",
+            },
+            "propTypes": Object {
+              "classes": [Function],
+              "innerRef": [Function],
+            },
+            "render": [Function],
+            "useStyles": [Function],
+          }
+        }
+        BackdropProps={
+          Object {
+            "transitionDuration": Object {
+              "enter": 225,
+              "exit": 195,
+            },
+          }
+        }
+        className="MuiDialog-root modal-root"
+        closeAfterTransition={true}
+        disableBackdropClick={false}
+        disableEscapeKeyDown={false}
+        onClose={[MockFunction]}
+        open={true}
+      >
+        <ForwardRef(Portal)
+          disablePortal={false}
+        >
+          <Portal
+            containerInfo={
+              <body
+                style="padding-right: 0px; overflow: hidden;"
+              >
+                <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"
+                      >
+                        elec_info_modal.accessibility.window_title
+                      </div>
+                      <button
+                        aria-label="elec_info_modal.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="elecInfoModal"
+                      >
+                        <div
+                          class="title text-18-bold"
+                        >
+                          elec_info_modal.title1
+                        </div>
+                        <div
+                          class="text"
+                        >
+                          elec_info_modal.text1
+                          <br />
+                          elec_info_modal.text2
+                        </div>
+                        <div
+                          class="title text-18-bold"
+                        >
+                          elec_info_modal.title2
+                        </div>
+                        <div
+                          class="text"
+                        >
+                          elec_info_modal.text3
+                          <br />
+                          elec_info_modal.text4
+                          <br />
+                          elec_info_modal.text5
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    data-test="sentinelEnd"
+                    tabindex="0"
+                  />
+                </div>
+              </body>
+            }
+          >
+            <div
+              className="MuiDialog-root modal-root"
+              onKeyDown={[Function]}
+              role="presentation"
+              style={
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "fixed",
+                  "right": 0,
+                  "top": 0,
+                  "zIndex": 1300,
+                }
+              }
+            >
+              <WithStyles(ForwardRef(Backdrop))
+                onClick={[Function]}
+                open={true}
+                transitionDuration={
+                  Object {
+                    "enter": 225,
+                    "exit": 195,
+                  }
+                }
+              >
+                <ForwardRef(Backdrop)
+                  classes={
+                    Object {
+                      "invisible": "MuiBackdrop-invisible",
+                      "root": "MuiBackdrop-root",
+                    }
+                  }
+                  onClick={[Function]}
+                  open={true}
+                  transitionDuration={
+                    Object {
+                      "enter": 225,
+                      "exit": 195,
+                    }
+                  }
+                >
+                  <ForwardRef(Fade)
+                    in={true}
+                    onClick={[Function]}
+                    timeout={
+                      Object {
+                        "enter": 225,
+                        "exit": 195,
+                      }
+                    }
+                  >
+                    <Transition
+                      appear={true}
+                      enter={true}
+                      exit={true}
+                      in={true}
+                      mountOnEnter={false}
+                      onClick={[Function]}
+                      onEnter={[Function]}
+                      onEntered={[Function]}
+                      onEntering={[Function]}
+                      onExit={[Function]}
+                      onExited={[Function]}
+                      onExiting={[Function]}
+                      timeout={
+                        Object {
+                          "enter": 225,
+                          "exit": 195,
+                        }
+                      }
+                      unmountOnExit={false}
+                    >
+                      <div
+                        aria-hidden={true}
+                        className="MuiBackdrop-root"
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "opacity": 1,
+                            "visibility": undefined,
+                          }
+                        }
+                      />
+                    </Transition>
+                  </ForwardRef(Fade)>
+                </ForwardRef(Backdrop)>
+              </WithStyles(ForwardRef(Backdrop))>
+              <TrapFocus
+                disableAutoFocus={false}
+                disableEnforceFocus={false}
+                disableRestoreFocus={false}
+                getDoc={[Function]}
+                isEnabled={[Function]}
+                open={true}
+              >
+                <div
+                  data-test="sentinelStart"
+                  tabIndex={0}
+                />
+                <ForwardRef(Fade)
+                  appear={true}
+                  in={true}
+                  onEnter={[Function]}
+                  onExited={[Function]}
+                  role="none presentation"
+                  tabIndex="-1"
+                  timeout={
+                    Object {
+                      "enter": 225,
+                      "exit": 195,
+                    }
+                  }
+                >
+                  <Transition
+                    appear={true}
+                    enter={true}
+                    exit={true}
+                    in={true}
+                    mountOnEnter={false}
+                    onEnter={[Function]}
+                    onEntered={[Function]}
+                    onEntering={[Function]}
+                    onExit={[Function]}
+                    onExited={[Function]}
+                    onExiting={[Function]}
+                    role="none presentation"
+                    tabIndex="-1"
+                    timeout={
+                      Object {
+                        "enter": 225,
+                        "exit": 195,
+                      }
+                    }
+                    unmountOnExit={false}
+                  >
+                    <div
+                      className="MuiDialog-container MuiDialog-scrollPaper"
+                      onClick={[Function]}
+                      onMouseDown={[Function]}
+                      role="none presentation"
+                      style={
+                        Object {
+                          "opacity": 1,
+                          "visibility": undefined,
+                        }
+                      }
+                      tabIndex="-1"
+                    >
+                      <WithStyles(ForwardRef(Paper))
+                        aria-labelledby="accessibility-title"
+                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+                        elevation={24}
+                        role="dialog"
+                      >
+                        <ForwardRef(Paper)
+                          aria-labelledby="accessibility-title"
+                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+                          classes={
+                            Object {
+                              "elevation0": "MuiPaper-elevation0",
+                              "elevation1": "MuiPaper-elevation1",
+                              "elevation10": "MuiPaper-elevation10",
+                              "elevation11": "MuiPaper-elevation11",
+                              "elevation12": "MuiPaper-elevation12",
+                              "elevation13": "MuiPaper-elevation13",
+                              "elevation14": "MuiPaper-elevation14",
+                              "elevation15": "MuiPaper-elevation15",
+                              "elevation16": "MuiPaper-elevation16",
+                              "elevation17": "MuiPaper-elevation17",
+                              "elevation18": "MuiPaper-elevation18",
+                              "elevation19": "MuiPaper-elevation19",
+                              "elevation2": "MuiPaper-elevation2",
+                              "elevation20": "MuiPaper-elevation20",
+                              "elevation21": "MuiPaper-elevation21",
+                              "elevation22": "MuiPaper-elevation22",
+                              "elevation23": "MuiPaper-elevation23",
+                              "elevation24": "MuiPaper-elevation24",
+                              "elevation3": "MuiPaper-elevation3",
+                              "elevation4": "MuiPaper-elevation4",
+                              "elevation5": "MuiPaper-elevation5",
+                              "elevation6": "MuiPaper-elevation6",
+                              "elevation7": "MuiPaper-elevation7",
+                              "elevation8": "MuiPaper-elevation8",
+                              "elevation9": "MuiPaper-elevation9",
+                              "outlined": "MuiPaper-outlined",
+                              "root": "MuiPaper-root",
+                              "rounded": "MuiPaper-rounded",
+                            }
+                          }
+                          elevation={24}
+                          role="dialog"
+                        >
+                          <div
+                            aria-labelledby="accessibility-title"
+                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+                            role="dialog"
+                          >
+                            <div
+                              id="accessibility-title"
+                            >
+                              elec_info_modal.accessibility.window_title
+                            </div>
+                            <WithStyles(ForwardRef(IconButton))
+                              aria-label="elec_info_modal.accessibility.button_close"
+                              className="modal-paper-close-button"
+                              onClick={[MockFunction]}
+                            >
+                              <ForwardRef(IconButton)
+                                aria-label="elec_info_modal.accessibility.button_close"
+                                className="modal-paper-close-button"
+                                classes={
+                                  Object {
+                                    "colorInherit": "MuiIconButton-colorInherit",
+                                    "colorPrimary": "MuiIconButton-colorPrimary",
+                                    "colorSecondary": "MuiIconButton-colorSecondary",
+                                    "disabled": "Mui-disabled",
+                                    "edgeEnd": "MuiIconButton-edgeEnd",
+                                    "edgeStart": "MuiIconButton-edgeStart",
+                                    "label": "MuiIconButton-label",
+                                    "root": "MuiIconButton-root",
+                                    "sizeSmall": "MuiIconButton-sizeSmall",
+                                  }
+                                }
+                                onClick={[MockFunction]}
+                              >
+                                <WithStyles(ForwardRef(ButtonBase))
+                                  aria-label="elec_info_modal.accessibility.button_close"
+                                  centerRipple={true}
+                                  className="MuiIconButton-root modal-paper-close-button"
+                                  disabled={false}
+                                  focusRipple={true}
+                                  onClick={[MockFunction]}
+                                >
+                                  <ForwardRef(ButtonBase)
+                                    aria-label="elec_info_modal.accessibility.button_close"
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    classes={
+                                      Object {
+                                        "disabled": "Mui-disabled",
+                                        "focusVisible": "Mui-focusVisible",
+                                        "root": "MuiButtonBase-root",
+                                      }
+                                    }
+                                    disabled={false}
+                                    focusRipple={true}
+                                    onClick={[MockFunction]}
+                                  >
+                                    <button
+                                      aria-label="elec_info_modal.accessibility.button_close"
+                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                                      disabled={false}
+                                      onBlur={[Function]}
+                                      onClick={[MockFunction]}
+                                      onDragLeave={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onKeyUp={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseUp={[Function]}
+                                      onTouchEnd={[Function]}
+                                      onTouchMove={[Function]}
+                                      onTouchStart={[Function]}
+                                      tabIndex={0}
+                                      type="button"
+                                    >
+                                      <span
+                                        className="MuiIconButton-label"
+                                      >
+                                        <Icon
+                                          icon="test-file-stub"
+                                          size={16}
+                                          spin={false}
+                                        >
+                                          <Component
+                                            className="styles__icon___23x3R"
+                                            height={16}
+                                            style={Object {}}
+                                            width={16}
+                                          >
+                                            <svg
+                                              className="styles__icon___23x3R"
+                                              height={16}
+                                              style={Object {}}
+                                              width={16}
+                                            >
+                                              <use
+                                                xlinkHref="#test-file-stub"
+                                              />
+                                            </svg>
+                                          </Component>
+                                        </Icon>
+                                      </span>
+                                      <NoSsr>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
+                                            center={true}
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
+                                            >
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </NoSsr>
+                                    </button>
+                                  </ForwardRef(ButtonBase)>
+                                </WithStyles(ForwardRef(ButtonBase))>
+                              </ForwardRef(IconButton)>
+                            </WithStyles(ForwardRef(IconButton))>
+                            <div
+                              className="elecInfoModal"
+                            >
+                              <div
+                                className="title text-18-bold"
+                              >
+                                elec_info_modal.title1
+                              </div>
+                              <div
+                                className="text"
+                              >
+                                elec_info_modal.text1
+                                <br />
+                                elec_info_modal.text2
+                              </div>
+                              <div
+                                className="title text-18-bold"
+                              >
+                                elec_info_modal.title2
+                              </div>
+                              <div
+                                className="text"
+                              >
+                                elec_info_modal.text3
+                                <br />
+                                elec_info_modal.text4
+                                <br />
+                                elec_info_modal.text5
+                              </div>
+                            </div>
+                          </div>
+                        </ForwardRef(Paper)>
+                      </WithStyles(ForwardRef(Paper))>
+                    </div>
+                  </Transition>
+                </ForwardRef(Fade)>
+                <div
+                  data-test="sentinelEnd"
+                  tabIndex={0}
+                />
+              </TrapFocus>
+            </div>
+          </Portal>
+        </ForwardRef(Portal)>
+      </ForwardRef(Modal)>
+    </ForwardRef(Dialog)>
+  </WithStyles(ForwardRef(Dialog))>
+</ElecInfoModal>
+`;
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index b24bd5118ec2adde3c562cd80731c1d80135cdfc..f1465899023a2716a54d40fc243024e660bc0b9d 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -105,6 +105,13 @@
       }
     }
   }
+  .loader-container {
+    min-height: 350px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+  }
 }
 .no-profile {
   display: flex;
diff --git a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
index ec2f6105757bb921a4e1dfb19cd65642bc61be5b..4f79df64482152cad1eafab89160fe74e4cd6908 100644
--- a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
@@ -52,6 +52,13 @@
     text-align: center;
     color: white;
   }
+  .showmodal {
+    cursor: pointer;
+    margin: 1.5rem 0 1rem 0;
+    text-align: center;
+    color: $grey-bright;
+    text-decoration: underline;
+  }
 }
 .graph-elec-half-hour {
   height: 13rem;
diff --git a/src/components/Analysis/elecInfoModal.scss b/src/components/Analysis/elecInfoModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8589b2fe63c817d78f18aee5ffa502e1d4a83ae
--- /dev/null
+++ b/src/components/Analysis/elecInfoModal.scss
@@ -0,0 +1,12 @@
+@import 'src/styles/base/color';
+
+.elecInfoModal {
+  padding: 0.5rem;
+  color: $grey-bright;
+  .title {
+    margin: 1.5rem 0;
+    color: $gold-shadow;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+}
diff --git a/src/components/Analysis/maxConsumptionCard.scss b/src/components/Analysis/maxConsumptionCard.scss
index 1455ad27ba0a3722e80a9474b4dfe6b01e371663..1d4e4641ba0b1251fd54ad833c06cb465ca80f5d 100644
--- a/src/components/Analysis/maxConsumptionCard.scss
+++ b/src/components/Analysis/maxConsumptionCard.scss
@@ -45,6 +45,7 @@
     .maxDay-date {
       text-transform: capitalize;
       margin: 0.8rem;
+      text-align: center;
     }
   }
 }
diff --git a/src/components/Connection/ConnectionOAuth.tsx b/src/components/Connection/ConnectionOAuth.tsx
index 28ae7b3557d8654bfc0f7c5a9512c9e36b9bde76..1bd69c164cb941b594abd1c27f3b3a15833904af 100644
--- a/src/components/Connection/ConnectionOAuth.tsx
+++ b/src/components/Connection/ConnectionOAuth.tsx
@@ -86,7 +86,7 @@ const ConnectionOAuth: React.FC<ConnectionOAuthProps> = ({
   )
 
   const togglePartnerConnectionModal = useCallback(() => {
-    setOpenPartenerConnectionModal(prev => !prev)
+    setOpenPartenerConnectionModal((prev: boolean) => !prev)
   }, [])
 
   const handleEndSteps = useCallback(() => {
diff --git a/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx b/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx
index d58a27ef47410fa1276dfdc823513473678e17ce..807e20753cba4ee1412dc81bde39d8d9310f3501 100644
--- a/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx
+++ b/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import './connectionOAuth.scss'
 import { Konnector } from 'models'
-import OAuthForm from 'components/Connection/FormOAuth'
+import FormOAuth from 'components/Connection/FormOAuth'
 import Button from '@material-ui/core/Button'
 
 interface ConnectionOAuthNoPartnerAccountProps {
@@ -49,7 +49,7 @@ const ConnectionOAuthNoPartnerAccount = ({
         {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2_info')}
       </div>
       <div className="koauthform-connect-button">
-        <OAuthForm
+        <FormOAuth
           konnector={konnector}
           onSuccess={handleSuccess}
           highlightedStyle={false}
diff --git a/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx b/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx
index 659b3c27b2e3fa4e4b499b0f17cde1b32f7ff067..c0d9bbb26e0101afbc6b82ef23b917fcc4a54185 100644
--- a/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx
+++ b/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import './connectionOAuth.scss'
 import { Konnector } from 'models'
-import OAuthForm from 'components/Connection/FormOAuth'
+import FormOAuth from 'components/Connection/FormOAuth'
 import Button from '@material-ui/core/Button'
 
 interface ConnectionOAuthWithPartnerAccountProps {
@@ -37,7 +37,7 @@ const ConnectionOAuthWithPartnerAccount = ({
         {t('auth.' + konnectorSlug + '.with_account.subtitle1')}
       </div>
       <div className="koauthform-connect-button">
-        <OAuthForm
+        <FormOAuth
           konnector={konnector}
           onSuccess={handleSuccess}
           highlightedStyle={true}
diff --git a/src/components/Connection/FormOAuth.tsx b/src/components/Connection/FormOAuth.tsx
index 85843b5a6fe4395b25ebe13baa62aab09ef14c1e..f781844b7c25fc9f3fc2b2f3451b99382c423bca 100644
--- a/src/components/Connection/FormOAuth.tsx
+++ b/src/components/Connection/FormOAuth.tsx
@@ -27,25 +27,25 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
   const client = useClient()
   const [status, setStatus] = useState<string>(IDLE)
 
-  const endOAuth = () => {
+  const endOAuth = useCallback(() => {
     setStatus(IDLE)
-  }
-  const startOAuth = () => {
+  }, [])
+
+  const startOAuth = useCallback(() => {
     setStatus(WAITING)
-  }
+  }, [])
+
   const handleAccountId = useCallback(
     (accountId: string) => {
       endOAuth()
       onSuccess(accountId)
     },
-    [onSuccess]
+    [endOAuth, onSuccess]
   )
-  const handleSubmit = () => {
-    startOAuth()
-  }
+
   const handleOAuthCancel = useCallback(() => {
     endOAuth()
-  }, [])
+  }, [endOAuth])
 
   const icon = getPartnerPicto(
     konnector ? konnector.slug : '',
@@ -60,7 +60,7 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
     <>
       <Button
         aria-label={t('auth.accessibility.button_connect')}
-        onClick={handleSubmit}
+        onClick={startOAuth}
         disabled={isWaiting}
         classes={{
           root: `${
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index 2f2ac32cb6ddce95229b597a2ce19b61f64f4522..3fbdf2f78c6f09e538eedfd3d39fe3a842428e26 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Dialog from '@material-ui/core/Dialog'
 import { FluidType } from 'enum/fluid.enum'
@@ -6,6 +6,10 @@ import CloseIcon from 'assets/icons/ico/close.svg'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { IconButton } from '@material-ui/core'
 import './estimatedConsumptionModal.scss'
+import FluidPricesService from 'services/fluidsPrices.service'
+import { useClient } from 'cozy-client'
+import { DateTime } from 'luxon'
+import { FluidPrice } from 'models'
 
 interface EstimatedConsumptionModalProps {
   open: boolean
@@ -17,6 +21,24 @@ const EstimatedConsumptionModal: React.FC<EstimatedConsumptionModalProps> = ({
   handleCloseClick,
 }: EstimatedConsumptionModalProps) => {
   const { t } = useI18n()
+  const client = useClient()
+  const fluidsPricesService = new FluidPricesService(client)
+
+  const [prices, setPrices] = useState<FluidPrice[]>([])
+
+  useEffect(() => {
+    let subscribed = true
+    async function getAllLastPrices() {
+      const prices = await fluidsPricesService.getAllLastPrices()
+      if (subscribed && prices) {
+        setPrices(prices)
+      }
+    }
+    getAllLastPrices()
+    return () => {
+      subscribed = false
+    }
+  }, [])
 
   return (
     <Dialog
@@ -56,19 +78,49 @@ const EstimatedConsumptionModal: React.FC<EstimatedConsumptionModalProps> = ({
             >
               {t(`FLUID.${FluidType[FluidType.ELECTRICITY]}.LABEL`)}
             </span>
-            {t('consumption_visualizer.modal.list1')}
+            {t('consumption_visualizer.modal.list1', {
+              elecPrice:
+                prices[FluidType.ELECTRICITY] &&
+                prices[FluidType.ELECTRICITY].price,
+              elecPriceStartDate:
+                prices[FluidType.ELECTRICITY] &&
+                DateTime.fromISO(prices[FluidType.ELECTRICITY].startDate)
+                  .setZone('utc', {
+                    keepLocalTime: true,
+                  })
+                  .toLocaleString(),
+            })}
           </li>
           <li>
             <span className={`${FluidType[FluidType.WATER].toLowerCase()}`}>
               {t(`FLUID.${FluidType[FluidType.WATER]}.LABEL`)}
             </span>
-            {t('consumption_visualizer.modal.list3')}
+            {t('consumption_visualizer.modal.list3', {
+              waterPrice:
+                prices[FluidType.WATER] && prices[FluidType.WATER].price,
+              waterPriceStartDate:
+                prices[FluidType.WATER] &&
+                DateTime.fromISO(prices[FluidType.WATER].startDate)
+                  .setZone('utc', {
+                    keepLocalTime: true,
+                  })
+                  .toLocaleString(),
+            })}
           </li>
           <li>
             <span className={`${FluidType[FluidType.GAS].toLowerCase()}`}>
               {t(`FLUID.${FluidType[FluidType.GAS]}.LABEL`)}
             </span>
-            {t('consumption_visualizer.modal.list2')}
+            {t('consumption_visualizer.modal.list2', {
+              gasPrice: prices[FluidType.GAS] && prices[FluidType.GAS].price,
+              gasPriceStartDate:
+                prices[FluidType.GAS] &&
+                DateTime.fromISO(prices[FluidType.GAS].startDate)
+                  .setZone('utc', {
+                    keepLocalTime: true,
+                  })
+                  .toLocaleString(),
+            })}
           </li>
         </ul>
         <div className="text-16-normal">
diff --git a/src/components/Content/content.scss b/src/components/Content/content.scss
index 7857cee4e1020981c3087c8830f3880d0c21b639..5d6b401d1ff8e6d82702c0ee5c0e0b0477e5b565 100644
--- a/src/components/Content/content.scss
+++ b/src/components/Content/content.scss
@@ -2,9 +2,12 @@
 @import 'src/styles/base/color';
 
 .content-view {
+  position: relative;
+  height: inherit;
   margin-top: 116px;
   background-color: $default-background;
   @media #{$large-phone} {
     margin-top: 0;
+    height: 100%;
   }
 }
diff --git a/src/components/FAQ/FAQContent.spec.tsx b/src/components/FAQ/FAQContent.spec.tsx
index b00bdce8c3a12a3556ff3461324f32c2d2cf2621..56c711d0d23b12f9339b243f4639e0137010eb3f 100644
--- a/src/components/FAQ/FAQContent.spec.tsx
+++ b/src/components/FAQ/FAQContent.spec.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
 import FAQContent from 'components/FAQ/FAQContent'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import { faqData } from '../../../tests/__mocks__/faq.mock'
+import mockClient from '../../../tests/__mocks__/client'
+import { act } from 'react-dom/test-utils'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
@@ -13,9 +17,34 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
   }
 })
 
+jest.mock('cozy-client', () => ({
+  ...jest.requireActual('cozy-client'),
+  useClient: () => mockClient,
+}))
+
+const mockFAQData = jest.fn()
+jest.mock('components/FAQ/FAQData', () => {
+  return () => mockFAQData()
+})
+
 describe('FAQContent', () => {
-  it('should render all the FAQContent component', () => {
+  beforeEach(() => {
+    mockFAQData.mockClear()
+  })
+
+  it('should render a loader', () => {
+    mockFAQData.mockResolvedValue([])
+    const wrapper = mount(<FAQContent />)
+    expect(wrapper.find(StyledSpinner).exists()).toBeTruthy()
+  })
+
+  it('should render the full FAQ', async () => {
+    mockFAQData.mockResolvedValue(faqData)
     const wrapper = mount(<FAQContent />)
-    expect(wrapper.find(ExpansionPanel)).toHaveLength(16)
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0))
+      wrapper.update()
+    })
+    expect(toJson(wrapper)).toMatchSnapshot()
   })
 })
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
index e06733848f469bb8a6e0ae4b1dba594ddde19735..996c0ac54c5dd46e83a7641bd8bf5b56dba1b7d2 100644
--- a/src/components/FAQ/FAQContent.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -1,41 +1,57 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import './faqContent.scss'
+import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import FAQJSon from 'constants/faq.json'
+import FaqData from 'components/FAQ/FAQData'
 import ExpansionPanel from '@material-ui/core/ExpansionPanel'
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
 import ChevronOffIcon from 'assets/icons/ico/chevron-off.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { decoreText } from 'utils/decoreText'
-
-const formatDetails = (details: Array<string>) => {
-  const formatedDetails: React.ReactNode[] = []
-  details.forEach((detail, index) => {
-    formatedDetails.push(
-      <div key={index} className="faq-content-detail">
-        {decoreText(detail)}
-      </div>
-    )
-  })
-  return formatedDetails
-}
+import { FAQSection } from 'models'
+import { FluidType } from 'enum/fluid.enum'
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 
 const FAQContent: React.FC = () => {
   const { t } = useI18n()
+  const client = useClient()
   const [expanded, setExpanded] = useState<string | false>(false)
+  const [faqData, setFaqData] = useState<FAQSection[]>([])
 
   const handleChange = (panel: string) => (
     event: React.ChangeEvent<{}>,
     isExpanded: boolean
   ) => {
+    event.preventDefault()
     setExpanded(isExpanded ? panel : false)
   }
 
+  useEffect(() => {
+    let subscribed = true
+    async function loadFaqData() {
+      const data: FAQSection[] = await FaqData(client)
+      if (subscribed && data.length > 0) {
+        setFaqData(data)
+      }
+    }
+    loadFaqData()
+    return () => {
+      subscribed = false
+    }
+  }, [client])
+
+  if (faqData.length <= 0) {
+    return (
+      <div className="faq-spinner">
+        <StyledSpinner size="5rem" fluidType={FluidType.MULTIFLUID} />
+      </div>
+    )
+  }
+
   return (
     <div className="faq-view-root">
       <div className="faq-view-content">
-        {FAQJSon.map((faq, index) => {
+        {faqData.map((faq, index) => {
           return (
             <div key={index} className="faq-section">
               <div className="text-16-normal-uppercase">{faq.section}</div>
@@ -64,7 +80,7 @@ const FAQContent: React.FC = () => {
                         root: 'expansion-panel-details',
                       }}
                     >
-                      <div>{formatDetails(question.details)}</div>
+                      {question.details}
                     </ExpansionPanelDetails>
                   </ExpansionPanel>
                 )
diff --git a/src/components/FAQ/FAQData.spec.tsx b/src/components/FAQ/FAQData.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce8cdd348db6715c4c49c5a975763265178cdcf1
--- /dev/null
+++ b/src/components/FAQ/FAQData.spec.tsx
@@ -0,0 +1,35 @@
+import mockClient from '../../../tests/__mocks__/client'
+import FaqData from 'components/FAQ/FAQData'
+import { allFluidPrices } from '../../../tests/__mocks__/fluidPrice.mock'
+import { FAQSection } from 'models'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockGetAllLastPrices = jest.fn()
+jest.mock('services/fluidsPrices.service', () => {
+  return jest.fn(() => {
+    return {
+      getAllLastPrices: mockGetAllLastPrices,
+    }
+  })
+})
+
+describe('FAQData', () => {
+  beforeEach(() => {
+    mockGetAllLastPrices.mockClear()
+  })
+
+  it('should return', async () => {
+    mockGetAllLastPrices.mockResolvedValue(allFluidPrices)
+    const result: FAQSection[] = await FaqData(mockClient)
+    expect(result.length).toBe(3)
+  })
+})
diff --git a/src/components/FAQ/FAQData.tsx b/src/components/FAQ/FAQData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb1851863819349f3adf64d355cc5d018d0bc352
--- /dev/null
+++ b/src/components/FAQ/FAQData.tsx
@@ -0,0 +1,369 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react'
+import { Client } from 'cozy-client'
+import { FluidType } from 'enum/fluid.enum'
+import { DateTime } from 'luxon'
+import { FAQSection, FluidPrice } from 'models'
+import FluidPricesService from 'services/fluidsPrices.service'
+
+const FaqData = async (client: Client): Promise<FAQSection[]> => {
+  const fluidsPricesService = new FluidPricesService(client)
+  const fluidPrices: FluidPrice[] = await fluidsPricesService.getAllLastPrices()
+  return [
+    {
+      section: 'Mes données',
+      questions: [
+        {
+          summary: 'Comment accéder à mes données électricité ?',
+          details: (
+            <div>
+              Rendez-vous dans la partie Options du service et cliquer sur le
+              bouton "Se connecter à l'électricité". Suivez la procédure (en
+              vous créant un compte Enedis si nécessaire). Une fois votre
+              consentement donné, vos données de consommation seront récupérées.
+            </div>
+          ),
+        },
+        {
+          summary: 'Comment accéder à mes données gaz ?',
+          details: (
+            <div>
+              Rendez-vous dans la partie Options du service et cliquez sur le
+              bouton "Se connecter au gaz". Suivez la procédure (en vous créant
+              un compte GRDF si nécessaire). Une fois votre consentement donné,
+              vos données de consommation seront récupérées.
+            </div>
+          ),
+        },
+        {
+          summary: 'Comment accéder à mes données eau ?',
+          details: (
+            <div>
+              Rendez-vous dans la partie Options du service et cliquez sur "Se
+              connecter à l'eau". Entrez vos identifiants Eau du Grand Lyon. Vos
+              données seront ainsi récupérées.
+            </div>
+          ),
+        },
+        {
+          summary: "Mes données ne s'affichent pas. Que se passe-t-il ?",
+          details: (
+            <div>
+              <p>
+                En fonctionnement normal, vos données électricité arrivent à J+1
+                (le lendemain), vos données eau et gaz arrivent quant à elles 3
+                jours après (à J+3).
+              </p>
+              <p>Plusieurs raisons peuvent expliquer l'absence de données :</p>
+              <p>
+                - Le lien entre Ecolyo et le fournisseur de données est rompu.
+                Une mise à jour de ce lien (en bas de la page) peut parfois
+                résoudre ce problème.
+              </p>
+              <p>
+                - Si la mise à jour a été effectuée mais que la donnée
+                n'apparaît toujours pas, le souci vient du fournisseur de
+                données (Enedis pour l'électricité, GRDF pour le gaz, Eau du
+                Grand Lyon pour l'eau). Cela peut être un problème de
+                transmission de données entre le compte et le système de données
+                du partenaire, ou un problème sur votre compteur. Dans ce cas,
+                le mieux est de contacter directement Enedis, GRDF ou Eau du
+                Grand Lyon pour tenter de régler le problème avec eux.
+              </p>
+            </div>
+          ),
+        },
+        {
+          summary:
+            'Pourquoi dois-je avoir un compte Enedis, GRDF ou Eau du Grand Lyon ?',
+          details: (
+            <div>
+              Nous avons fait le choix de passer par les gestionnaires de
+              réseaux (Enedis pour l'électricité, GRDF pour le gaz et Eau du
+              Grand Lyon pour l'eau). Ils sont en effet responsables de votre
+              compteur, de la collecte des données et du partage de celles-ci.
+              Ils ont les données brutes, ces mêmes données qui sont consolidées
+              pour votre fournisseur d'énergie ou d'eau, celui-là même qui vous
+              facture. Pour récupérer vos données, et afin que vous et vous seul
+              y ait accès, il vous faut créer un compte chez ces gestionnaires
+              de réseaux. Ce process n'est à réaliser que lors de première
+              connexion.
+            </div>
+          ),
+        },
+        {
+          summary:
+            "Si je n'en ai pas, est-ce possible d'avoir des compteurs communicants (Linky, Gazpar, Téléo ?)",
+          details: (
+            <div>
+              <p>
+                - Linky, le compteur électricité est déployé sur 95% de notre
+                territoire métropolitain. Si vous n'êtes pas encore équipé, vous
+                pouvez contacter Enedis au 0 970 831 970 (prix d'un appel local)
+                entre 8h et 17h pour convenir d'un rendez-vous.
+              </p>
+              <p>
+                - Concernant Gazpar le compteur gaz, s'il n'est pas encore
+                installé chez vous, vous pouvez vous renseigner sur le planning
+                de déploiement du compteur à cette adresse :{' '}
+                <a href="https://monespace.grdf.fr/compteur-gazpar-et-ma-commune">
+                  https://monespace.grdf.fr/compteur-gazpar-et-ma-commune.
+                </a>
+              </p>
+              <p>
+                - Concernant Téléo, le compteur eau, si vous êtes en eau
+                individualisé. En principe, vous devriez déjà avoir Téléo chez
+                vous. Si vous êtes abonné et que vous n'êtes pas encore équipé,
+                contactez le service client d'eau du Grand Lyon par téléphone au
+                09 69 39 69 99 (numéro cristal non surtaxé) pour obtenir
+                l'installation d'un compteur communicant Téléo.
+              </p>
+            </div>
+          ),
+        },
+        {
+          summary: 'Qui a accès à mes données de consommation?',
+          details: (
+            <div>
+              <p>
+                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. 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.
+              </p>
+              <p>
+                Dans le cadre de l’évaluation et de l’amélioration du service,
+                des données d’utilisation anonymisées sont cependant 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 (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>
+                ).
+              </p>
+            </div>
+          ),
+        },
+        {
+          summary:
+            'Comment supprimer mon consentement au partage de mes données (électricité ou gaz) ?',
+          details: (
+            <div>
+              <p>
+                Dans un premier temps, vous pouvez supprimer le connecteur
+                électricité, gaz ou eau dans la page Options du service afin de
+                stopper le transfert de vos données vers notre service. Pour
+                supprimer totalement votre consentement vous devez ensuite :
+              </p>
+              <p>
+                - pour l'électricité : contacter directement
+                dataconnect@enedis.fr pour leur indiquer votre souhait de
+                supprimer le consentement de partage des données avec notre
+                service.
+              </p>
+              <p>
+                - pour le gaz, rendez-vous dans votre espace GRDF (
+                <a href="https://monespace.grdf.fr/">
+                  https://monespace.grdf.fr/
+                </a>
+                ) dans partie "Suivi des consommations" puis "Données
+                consultées". Vous pouvez alors supprimer le consentement donné à
+                notre service.
+              </p>
+            </div>
+          ),
+        },
+      ],
+    },
+    {
+      section: 'Contenu du service',
+      questions: [
+        {
+          summary:
+            'Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?',
+          details: (
+            <div>
+              <p>
+                Le prix de votre électricité ou de votre gaz dépend de l'offre
+                choisie auprès de votre fournisseur. N’ayant pas accès à cette
+                information, Ecolyo affiche un prix moyen par fluide.
+              </p>
+              <p>Tarifs moyens retenus :</p>
+              <p>
+                - pour l'électricité, 1 kWh ={' '}
+                {fluidPrices[FluidType.ELECTRICITY].price}€ TTC (il correspond
+                au tarif réglementé d’EDF au{' '}
+                {DateTime.fromISO(fluidPrices[FluidType.ELECTRICITY].startDate)
+                  .setZone('utc', {
+                    keepLocalTime: true,
+                  })
+                  .toLocaleString()}{' '}
+                pour une puissance souscrite de 3 ou 6 kVA et hors offre heure
+                pleine/heure creuse)
+              </p>
+              <p>
+                - pour le gaz, 1 kWh = {fluidPrices[FluidType.GAS].price}€ TTC
+                (tarif réglementé de vente au{' '}
+                {DateTime.fromISO(fluidPrices[FluidType.GAS].startDate)
+                  .setZone('utc', {
+                    keepLocalTime: true,
+                  })
+                  .toLocaleString()}{' '}
+                pour un consommateur soutirant moins de 6 MWh par an)
+              </p>
+              <p>
+                - pour l'eau, 1 litre d’eau ={' '}
+                {fluidPrices[FluidType.WATER].price}€ TTC (prix constaté au{' '}
+                {DateTime.fromISO(fluidPrices[FluidType.WATER].startDate)
+                  .setZone('utc', {
+                    keepLocalTime: true,
+                  })
+                  .toLocaleString()}{' '}
+                pour un abonnement et une consommation de 120 m3/an sur la
+                Métropole de Lyon)
+              </p>
+              <p>
+                Le coût de votre abonnement n'est pas pris en compte dans
+                Ecolyo.
+              </p>
+            </div>
+          ),
+        },
+        {
+          summary:
+            'Est-ce la météo est prise en compte dans les données affichées ?',
+          details: (
+            <div>
+              La météo n'est pour l'instant pas prise en compte dans les données
+              présentées. Nous réfléchissons à termes à une intégration des
+              données de température extérieure. En effet, celles-ci influent
+              fortement sur les comportements et donc les consommations aussi
+              bien d'énergie en hiver que d'eau en été. Affaire à suivre pour
+              notre service !
+            </div>
+          ),
+        },
+        {
+          summary: 'Quelle est la source des écogestes ?',
+          details: (
+            <div>
+              Les écogestes présentés dans le service sont issus de guides
+              préparé par le CLER - Réseau pour la transition énergétique ainsi
+              que par l'ADEME (l'Agence de l'environnement et de la maîtrise de
+              l'énergie). La source principale est le guide des 100 écogestes
+              (version 2020-2021) produit par le CLER dans le cadre du programme
+              DECLIC.
+            </div>
+          ),
+        },
+        {
+          summary: "Qu'est-ce qu'un kWh ?",
+          details: (
+            <div>
+              Le kWh est l'unité de mesure correspondant à l'énergie consommée
+              pendant une heure par un appareil d'une puissance de 1000 watts (1
+              kW). Avec 1 kWh, il est possible de … regarder la télévision
+              pendant 3 à 5h (selon le modèle de télé), cuire un poulet au four
+              thermostat 6 pendant 1h, vous servir d'un ordinateur au bureau
+              pendant une demi-journée...
+            </div>
+          ),
+        },
+        {
+          summary:
+            'Pourquoi dois-je renseigner mon profil dans la service ? Comment le modifier ? ',
+          details: (
+            <div>
+              Renseigner votre profil c'est profiter à la fois d'une comparaison
+              de vos consommations avec les consommation d'un foyer vous
+              ressemblant (allez jetez un œil dans la partie Analyse) mais aussi
+              avoir accès à un tri personnalisé des écogestes dans la partie
+              Ecogestes du service.
+            </div>
+          ),
+        },
+        {
+          summary: 'Comment sont choisis les écogestes personnalisés ?',
+          details: (
+            <div>
+              Les écogestes personnalisés sont aujourd'hui choisis en fonction
+              des compteurs individuels que vous possédez (communicants ou non).
+              Ils vous permettent d'agir sur ces consommations. D'autres modes
+              de tri, davantage personnalisables seront proposés à l'avenir.
+            </div>
+          ),
+        },
+      ],
+    },
+    {
+      section: 'Autres infos',
+      questions: [
+        {
+          summary: "Comment accéder plus facilement au service à l'avenir ?",
+          details: (
+            <div>
+              <p>
+                Pour retrouver facilement l'accès à Ecolyo à l'avenir, il suffit
+                de vous créer un raccourci :
+              </p>
+              <p>
+                - Sur mobile APPLE : Pour créer un raccourci sur votre écran
+                d'accueil, ouvrez Ecolyo dans Safari et cliquez sur Partager
+                (carré avec une flèche pointant vers le haut), en descendant
+                dans le menu cliquez sur "Sur l'écran d'accueil" puis ajouter.
+                Un raccourci d'Ecolyo sera alors présent (il ressemblera à une
+                application comme une autre).
+              </p>
+              <p>
+                - Sur mobile ANDROID : Une fois sur la page web du service,
+                appuyez sur les trois petits points du menu en haut à droite.
+                Sélectionnez "Ajouter à l'écran d'accueil". Nommez la page et
+                appuyez sur "Ajouter". Un raccourci vers la page web est apparu
+                sur l'écran d'accueil de votre smartphone.
+              </p>
+              <p>
+                - Sur ordinateur : ajoutez classiquement Ecolyo dans les Favoris
+                de votre navigateur préféré. Cela sera plus facile par la suite
+                de retrouver notre service.
+              </p>
+              <p>
+                Si un jour vous avez totalement perdu l'adresse d'accès à votre
+                service, vous pouvez le retrouver en cliquant tout en bas sur le
+                bouton "Accéder à mon cloud personnel" du site web Ecolyo.com
+              </p>
+            </div>
+          ),
+        },
+        {
+          summary:
+            "Pour accéder à Ecolyo, j'ai dû me créer un cloud personnel Grand Lyon. Qu'est-ce ?",
+          details: (
+            <div>
+              Souvent le cloud personnel est réduit à un simple espace de
+              stockage de documents mais il est bien plus que ça. C'est un
+              espace individuel et sécurisé. Vous seul pouvez y accéder,
+              personne d'autre. Dans le cloud vous avez deux types de services:
+              les premiers sont des services qui vous permettent de récupérer
+              vos données et les stocker dans cet espace. Vous avez aussi des
+              services qui vous permettent de valoriser vos données pour
+              qu'elles aient plus de sens pour vous (c'est le cas d'Ecolyo!). Si
+              vous souhaitez en savoir plus sur votre cloud personnel cliquez{' '}
+              <a href="https://support.grandlyon.com/clouds-personnels-grand-lyon/">
+                ici
+              </a>
+              .
+            </div>
+          ),
+        },
+      ],
+    },
+  ]
+}
+
+export default FaqData
diff --git a/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..dde06eb7baaa31fbfde109a57e24cb40bec7ede7
--- /dev/null
+++ b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
@@ -0,0 +1,1203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAQContent should render the full FAQ 1`] = `
+<FAQContent>
+  <div
+    className="faq-view-root"
+  >
+    <div
+      className="faq-view-content"
+    >
+      <div
+        className="faq-section"
+        key="0"
+      >
+        <div
+          className="text-16-normal-uppercase"
+        >
+          Mes données
+        </div>
+        <WithStyles(ForwardRef(ExpansionPanel))
+          classes={
+            Object {
+              "root": "expansion-panel-root",
+            }
+          }
+          expanded={false}
+          key="0"
+          onChange={[Function]}
+        >
+          <ForwardRef(ExpansionPanel)
+            classes={
+              Object {
+                "disabled": "Mui-disabled",
+                "expanded": "Mui-expanded",
+                "root": "MuiExpansionPanel-root expansion-panel-root",
+                "rounded": "MuiExpansionPanel-rounded",
+              }
+            }
+            expanded={false}
+            onChange={[Function]}
+          >
+            <WithStyles(ForwardRef(Paper))
+              className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+              square={false}
+            >
+              <ForwardRef(Paper)
+                className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+                classes={
+                  Object {
+                    "elevation0": "MuiPaper-elevation0",
+                    "elevation1": "MuiPaper-elevation1",
+                    "elevation10": "MuiPaper-elevation10",
+                    "elevation11": "MuiPaper-elevation11",
+                    "elevation12": "MuiPaper-elevation12",
+                    "elevation13": "MuiPaper-elevation13",
+                    "elevation14": "MuiPaper-elevation14",
+                    "elevation15": "MuiPaper-elevation15",
+                    "elevation16": "MuiPaper-elevation16",
+                    "elevation17": "MuiPaper-elevation17",
+                    "elevation18": "MuiPaper-elevation18",
+                    "elevation19": "MuiPaper-elevation19",
+                    "elevation2": "MuiPaper-elevation2",
+                    "elevation20": "MuiPaper-elevation20",
+                    "elevation21": "MuiPaper-elevation21",
+                    "elevation22": "MuiPaper-elevation22",
+                    "elevation23": "MuiPaper-elevation23",
+                    "elevation24": "MuiPaper-elevation24",
+                    "elevation3": "MuiPaper-elevation3",
+                    "elevation4": "MuiPaper-elevation4",
+                    "elevation5": "MuiPaper-elevation5",
+                    "elevation6": "MuiPaper-elevation6",
+                    "elevation7": "MuiPaper-elevation7",
+                    "elevation8": "MuiPaper-elevation8",
+                    "elevation9": "MuiPaper-elevation9",
+                    "outlined": "MuiPaper-outlined",
+                    "root": "MuiPaper-root",
+                    "rounded": "MuiPaper-rounded",
+                  }
+                }
+                square={false}
+              >
+                <div
+                  className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                >
+                  <WithStyles(ForwardRef(ExpansionPanelSummary))
+                    aria-label="faq.accessibility.button_toggle_detail"
+                    classes={
+                      Object {
+                        "content": "expansion-panel-content",
+                        "root": "expansion-panel-summary small bold-text",
+                      }
+                    }
+                    expandIcon={
+                      <StyledIcon
+                        icon="test-file-stub"
+                      />
+                    }
+                    key=".0"
+                  >
+                    <ForwardRef(ExpansionPanelSummary)
+                      aria-label="faq.accessibility.button_toggle_detail"
+                      classes={
+                        Object {
+                          "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+                          "disabled": "Mui-disabled",
+                          "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+                          "expanded": "Mui-expanded",
+                          "focused": "Mui-focused",
+                          "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+                        }
+                      }
+                      expandIcon={
+                        <StyledIcon
+                          icon="test-file-stub"
+                        />
+                      }
+                    >
+                      <WithStyles(ForwardRef(ButtonBase))
+                        aria-expanded={false}
+                        aria-label="faq.accessibility.button_toggle_detail"
+                        className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                        component="div"
+                        disableRipple={true}
+                        disabled={false}
+                        focusRipple={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocusVisible={[Function]}
+                      >
+                        <ForwardRef(ButtonBase)
+                          aria-expanded={false}
+                          aria-label="faq.accessibility.button_toggle_detail"
+                          className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                          classes={
+                            Object {
+                              "disabled": "Mui-disabled",
+                              "focusVisible": "Mui-focusVisible",
+                              "root": "MuiButtonBase-root",
+                            }
+                          }
+                          component="div"
+                          disableRipple={true}
+                          disabled={false}
+                          focusRipple={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocusVisible={[Function]}
+                        >
+                          <div
+                            aria-disabled={false}
+                            aria-expanded={false}
+                            aria-label="faq.accessibility.button_toggle_detail"
+                            className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onDragLeave={[Function]}
+                            onFocus={[Function]}
+                            onKeyDown={[Function]}
+                            onKeyUp={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseLeave={[Function]}
+                            onMouseUp={[Function]}
+                            onTouchEnd={[Function]}
+                            onTouchMove={[Function]}
+                            onTouchStart={[Function]}
+                            role="button"
+                            tabIndex={0}
+                          >
+                            <div
+                              className="MuiExpansionPanelSummary-content expansion-panel-content"
+                            >
+                              Comment accéder à mes données électricité ?
+                            </div>
+                            <WithStyles(ForwardRef(IconButton))
+                              aria-hidden={true}
+                              className="MuiExpansionPanelSummary-expandIcon"
+                              component="div"
+                              edge="end"
+                              role={null}
+                              tabIndex={null}
+                            >
+                              <ForwardRef(IconButton)
+                                aria-hidden={true}
+                                className="MuiExpansionPanelSummary-expandIcon"
+                                classes={
+                                  Object {
+                                    "colorInherit": "MuiIconButton-colorInherit",
+                                    "colorPrimary": "MuiIconButton-colorPrimary",
+                                    "colorSecondary": "MuiIconButton-colorSecondary",
+                                    "disabled": "Mui-disabled",
+                                    "edgeEnd": "MuiIconButton-edgeEnd",
+                                    "edgeStart": "MuiIconButton-edgeStart",
+                                    "label": "MuiIconButton-label",
+                                    "root": "MuiIconButton-root",
+                                    "sizeSmall": "MuiIconButton-sizeSmall",
+                                  }
+                                }
+                                component="div"
+                                edge="end"
+                                role={null}
+                                tabIndex={null}
+                              >
+                                <WithStyles(ForwardRef(ButtonBase))
+                                  aria-hidden={true}
+                                  centerRipple={true}
+                                  className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                  component="div"
+                                  disabled={false}
+                                  focusRipple={true}
+                                  role={null}
+                                  tabIndex={null}
+                                >
+                                  <ForwardRef(ButtonBase)
+                                    aria-hidden={true}
+                                    centerRipple={true}
+                                    className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                    classes={
+                                      Object {
+                                        "disabled": "Mui-disabled",
+                                        "focusVisible": "Mui-focusVisible",
+                                        "root": "MuiButtonBase-root",
+                                      }
+                                    }
+                                    component="div"
+                                    disabled={false}
+                                    focusRipple={true}
+                                    role={null}
+                                    tabIndex={null}
+                                  >
+                                    <div
+                                      aria-disabled={false}
+                                      aria-hidden={true}
+                                      className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                      onBlur={[Function]}
+                                      onDragLeave={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onKeyUp={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseUp={[Function]}
+                                      onTouchEnd={[Function]}
+                                      onTouchMove={[Function]}
+                                      onTouchStart={[Function]}
+                                      role={null}
+                                      tabIndex={null}
+                                    >
+                                      <span
+                                        className="MuiIconButton-label"
+                                      >
+                                        <StyledIcon
+                                          icon="test-file-stub"
+                                        >
+                                          <Icon
+                                            aria-hidden={true}
+                                            icon="test-file-stub"
+                                            size={16}
+                                            spin={false}
+                                          >
+                                            <Component
+                                              aria-hidden={true}
+                                              className="styles__icon___23x3R"
+                                              height={16}
+                                              style={Object {}}
+                                              width={16}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="styles__icon___23x3R"
+                                                height={16}
+                                                style={Object {}}
+                                                width={16}
+                                              >
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </StyledIcon>
+                                      </span>
+                                      <NoSsr>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
+                                            center={true}
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
+                                            >
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </NoSsr>
+                                    </div>
+                                  </ForwardRef(ButtonBase)>
+                                </WithStyles(ForwardRef(ButtonBase))>
+                              </ForwardRef(IconButton)>
+                            </WithStyles(ForwardRef(IconButton))>
+                          </div>
+                        </ForwardRef(ButtonBase)>
+                      </WithStyles(ForwardRef(ButtonBase))>
+                    </ForwardRef(ExpansionPanelSummary)>
+                  </WithStyles(ForwardRef(ExpansionPanelSummary))>
+                  <WithStyles(ForwardRef(Collapse))
+                    in={false}
+                    timeout="auto"
+                  >
+                    <ForwardRef(Collapse)
+                      classes={
+                        Object {
+                          "container": "MuiCollapse-container",
+                          "entered": "MuiCollapse-entered",
+                          "hidden": "MuiCollapse-hidden",
+                          "wrapper": "MuiCollapse-wrapper",
+                          "wrapperInner": "MuiCollapse-wrapperInner",
+                        }
+                      }
+                      in={false}
+                      timeout="auto"
+                    >
+                      <Transition
+                        addEndListener={[Function]}
+                        appear={false}
+                        enter={true}
+                        exit={true}
+                        in={false}
+                        mountOnEnter={false}
+                        onEnter={[Function]}
+                        onEntered={[Function]}
+                        onEntering={[Function]}
+                        onExit={[Function]}
+                        onExited={[Function]}
+                        onExiting={[Function]}
+                        timeout={null}
+                        unmountOnExit={false}
+                      >
+                        <div
+                          className="MuiCollapse-container MuiCollapse-hidden"
+                          style={
+                            Object {
+                              "minHeight": "0px",
+                            }
+                          }
+                        >
+                          <div
+                            className="MuiCollapse-wrapper"
+                          >
+                            <div
+                              className="MuiCollapse-wrapperInner"
+                            >
+                              <div
+                                role="region"
+                              >
+                                <WithStyles(ForwardRef(ExpansionPanelDetails))
+                                  classes={
+                                    Object {
+                                      "root": "expansion-panel-details",
+                                    }
+                                  }
+                                  key=".1"
+                                >
+                                  <ForwardRef(ExpansionPanelDetails)
+                                    classes={
+                                      Object {
+                                        "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="MuiExpansionPanelDetails-root expansion-panel-details"
+                                    >
+                                      <div>
+                                        Rendez-vous dans la partie Options du service et cliquer sur le bouton "Se connecter à l\\'électricité". Suivez la procédure (en vous créant un compte Enedis si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.
+                                      </div>
+                                    </div>
+                                  </ForwardRef(ExpansionPanelDetails)>
+                                </WithStyles(ForwardRef(ExpansionPanelDetails))>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </Transition>
+                    </ForwardRef(Collapse)>
+                  </WithStyles(ForwardRef(Collapse))>
+                </div>
+              </ForwardRef(Paper)>
+            </WithStyles(ForwardRef(Paper))>
+          </ForwardRef(ExpansionPanel)>
+        </WithStyles(ForwardRef(ExpansionPanel))>
+        <WithStyles(ForwardRef(ExpansionPanel))
+          classes={
+            Object {
+              "root": "expansion-panel-root",
+            }
+          }
+          expanded={false}
+          key="1"
+          onChange={[Function]}
+        >
+          <ForwardRef(ExpansionPanel)
+            classes={
+              Object {
+                "disabled": "Mui-disabled",
+                "expanded": "Mui-expanded",
+                "root": "MuiExpansionPanel-root expansion-panel-root",
+                "rounded": "MuiExpansionPanel-rounded",
+              }
+            }
+            expanded={false}
+            onChange={[Function]}
+          >
+            <WithStyles(ForwardRef(Paper))
+              className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+              square={false}
+            >
+              <ForwardRef(Paper)
+                className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+                classes={
+                  Object {
+                    "elevation0": "MuiPaper-elevation0",
+                    "elevation1": "MuiPaper-elevation1",
+                    "elevation10": "MuiPaper-elevation10",
+                    "elevation11": "MuiPaper-elevation11",
+                    "elevation12": "MuiPaper-elevation12",
+                    "elevation13": "MuiPaper-elevation13",
+                    "elevation14": "MuiPaper-elevation14",
+                    "elevation15": "MuiPaper-elevation15",
+                    "elevation16": "MuiPaper-elevation16",
+                    "elevation17": "MuiPaper-elevation17",
+                    "elevation18": "MuiPaper-elevation18",
+                    "elevation19": "MuiPaper-elevation19",
+                    "elevation2": "MuiPaper-elevation2",
+                    "elevation20": "MuiPaper-elevation20",
+                    "elevation21": "MuiPaper-elevation21",
+                    "elevation22": "MuiPaper-elevation22",
+                    "elevation23": "MuiPaper-elevation23",
+                    "elevation24": "MuiPaper-elevation24",
+                    "elevation3": "MuiPaper-elevation3",
+                    "elevation4": "MuiPaper-elevation4",
+                    "elevation5": "MuiPaper-elevation5",
+                    "elevation6": "MuiPaper-elevation6",
+                    "elevation7": "MuiPaper-elevation7",
+                    "elevation8": "MuiPaper-elevation8",
+                    "elevation9": "MuiPaper-elevation9",
+                    "outlined": "MuiPaper-outlined",
+                    "root": "MuiPaper-root",
+                    "rounded": "MuiPaper-rounded",
+                  }
+                }
+                square={false}
+              >
+                <div
+                  className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                >
+                  <WithStyles(ForwardRef(ExpansionPanelSummary))
+                    aria-label="faq.accessibility.button_toggle_detail"
+                    classes={
+                      Object {
+                        "content": "expansion-panel-content",
+                        "root": "expansion-panel-summary small bold-text",
+                      }
+                    }
+                    expandIcon={
+                      <StyledIcon
+                        icon="test-file-stub"
+                      />
+                    }
+                    key=".0"
+                  >
+                    <ForwardRef(ExpansionPanelSummary)
+                      aria-label="faq.accessibility.button_toggle_detail"
+                      classes={
+                        Object {
+                          "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+                          "disabled": "Mui-disabled",
+                          "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+                          "expanded": "Mui-expanded",
+                          "focused": "Mui-focused",
+                          "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+                        }
+                      }
+                      expandIcon={
+                        <StyledIcon
+                          icon="test-file-stub"
+                        />
+                      }
+                    >
+                      <WithStyles(ForwardRef(ButtonBase))
+                        aria-expanded={false}
+                        aria-label="faq.accessibility.button_toggle_detail"
+                        className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                        component="div"
+                        disableRipple={true}
+                        disabled={false}
+                        focusRipple={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocusVisible={[Function]}
+                      >
+                        <ForwardRef(ButtonBase)
+                          aria-expanded={false}
+                          aria-label="faq.accessibility.button_toggle_detail"
+                          className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                          classes={
+                            Object {
+                              "disabled": "Mui-disabled",
+                              "focusVisible": "Mui-focusVisible",
+                              "root": "MuiButtonBase-root",
+                            }
+                          }
+                          component="div"
+                          disableRipple={true}
+                          disabled={false}
+                          focusRipple={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocusVisible={[Function]}
+                        >
+                          <div
+                            aria-disabled={false}
+                            aria-expanded={false}
+                            aria-label="faq.accessibility.button_toggle_detail"
+                            className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onDragLeave={[Function]}
+                            onFocus={[Function]}
+                            onKeyDown={[Function]}
+                            onKeyUp={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseLeave={[Function]}
+                            onMouseUp={[Function]}
+                            onTouchEnd={[Function]}
+                            onTouchMove={[Function]}
+                            onTouchStart={[Function]}
+                            role="button"
+                            tabIndex={0}
+                          >
+                            <div
+                              className="MuiExpansionPanelSummary-content expansion-panel-content"
+                            >
+                              Comment accéder à mes données gaz ?
+                            </div>
+                            <WithStyles(ForwardRef(IconButton))
+                              aria-hidden={true}
+                              className="MuiExpansionPanelSummary-expandIcon"
+                              component="div"
+                              edge="end"
+                              role={null}
+                              tabIndex={null}
+                            >
+                              <ForwardRef(IconButton)
+                                aria-hidden={true}
+                                className="MuiExpansionPanelSummary-expandIcon"
+                                classes={
+                                  Object {
+                                    "colorInherit": "MuiIconButton-colorInherit",
+                                    "colorPrimary": "MuiIconButton-colorPrimary",
+                                    "colorSecondary": "MuiIconButton-colorSecondary",
+                                    "disabled": "Mui-disabled",
+                                    "edgeEnd": "MuiIconButton-edgeEnd",
+                                    "edgeStart": "MuiIconButton-edgeStart",
+                                    "label": "MuiIconButton-label",
+                                    "root": "MuiIconButton-root",
+                                    "sizeSmall": "MuiIconButton-sizeSmall",
+                                  }
+                                }
+                                component="div"
+                                edge="end"
+                                role={null}
+                                tabIndex={null}
+                              >
+                                <WithStyles(ForwardRef(ButtonBase))
+                                  aria-hidden={true}
+                                  centerRipple={true}
+                                  className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                  component="div"
+                                  disabled={false}
+                                  focusRipple={true}
+                                  role={null}
+                                  tabIndex={null}
+                                >
+                                  <ForwardRef(ButtonBase)
+                                    aria-hidden={true}
+                                    centerRipple={true}
+                                    className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                    classes={
+                                      Object {
+                                        "disabled": "Mui-disabled",
+                                        "focusVisible": "Mui-focusVisible",
+                                        "root": "MuiButtonBase-root",
+                                      }
+                                    }
+                                    component="div"
+                                    disabled={false}
+                                    focusRipple={true}
+                                    role={null}
+                                    tabIndex={null}
+                                  >
+                                    <div
+                                      aria-disabled={false}
+                                      aria-hidden={true}
+                                      className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                      onBlur={[Function]}
+                                      onDragLeave={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onKeyUp={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseUp={[Function]}
+                                      onTouchEnd={[Function]}
+                                      onTouchMove={[Function]}
+                                      onTouchStart={[Function]}
+                                      role={null}
+                                      tabIndex={null}
+                                    >
+                                      <span
+                                        className="MuiIconButton-label"
+                                      >
+                                        <StyledIcon
+                                          icon="test-file-stub"
+                                        >
+                                          <Icon
+                                            aria-hidden={true}
+                                            icon="test-file-stub"
+                                            size={16}
+                                            spin={false}
+                                          >
+                                            <Component
+                                              aria-hidden={true}
+                                              className="styles__icon___23x3R"
+                                              height={16}
+                                              style={Object {}}
+                                              width={16}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="styles__icon___23x3R"
+                                                height={16}
+                                                style={Object {}}
+                                                width={16}
+                                              >
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </StyledIcon>
+                                      </span>
+                                      <NoSsr>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
+                                            center={true}
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
+                                            >
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </NoSsr>
+                                    </div>
+                                  </ForwardRef(ButtonBase)>
+                                </WithStyles(ForwardRef(ButtonBase))>
+                              </ForwardRef(IconButton)>
+                            </WithStyles(ForwardRef(IconButton))>
+                          </div>
+                        </ForwardRef(ButtonBase)>
+                      </WithStyles(ForwardRef(ButtonBase))>
+                    </ForwardRef(ExpansionPanelSummary)>
+                  </WithStyles(ForwardRef(ExpansionPanelSummary))>
+                  <WithStyles(ForwardRef(Collapse))
+                    in={false}
+                    timeout="auto"
+                  >
+                    <ForwardRef(Collapse)
+                      classes={
+                        Object {
+                          "container": "MuiCollapse-container",
+                          "entered": "MuiCollapse-entered",
+                          "hidden": "MuiCollapse-hidden",
+                          "wrapper": "MuiCollapse-wrapper",
+                          "wrapperInner": "MuiCollapse-wrapperInner",
+                        }
+                      }
+                      in={false}
+                      timeout="auto"
+                    >
+                      <Transition
+                        addEndListener={[Function]}
+                        appear={false}
+                        enter={true}
+                        exit={true}
+                        in={false}
+                        mountOnEnter={false}
+                        onEnter={[Function]}
+                        onEntered={[Function]}
+                        onEntering={[Function]}
+                        onExit={[Function]}
+                        onExited={[Function]}
+                        onExiting={[Function]}
+                        timeout={null}
+                        unmountOnExit={false}
+                      >
+                        <div
+                          className="MuiCollapse-container MuiCollapse-hidden"
+                          style={
+                            Object {
+                              "minHeight": "0px",
+                            }
+                          }
+                        >
+                          <div
+                            className="MuiCollapse-wrapper"
+                          >
+                            <div
+                              className="MuiCollapse-wrapperInner"
+                            >
+                              <div
+                                role="region"
+                              >
+                                <WithStyles(ForwardRef(ExpansionPanelDetails))
+                                  classes={
+                                    Object {
+                                      "root": "expansion-panel-details",
+                                    }
+                                  }
+                                  key=".1"
+                                >
+                                  <ForwardRef(ExpansionPanelDetails)
+                                    classes={
+                                      Object {
+                                        "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="MuiExpansionPanelDetails-root expansion-panel-details"
+                                    >
+                                      <div>
+                                        Rendez-vous dans la partie Options du service et cliquez sur le bouton "Se connecter au gaz". Suivez la procédure (en vous créant un compte GRDF si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.',
+                                      </div>
+                                    </div>
+                                  </ForwardRef(ExpansionPanelDetails)>
+                                </WithStyles(ForwardRef(ExpansionPanelDetails))>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </Transition>
+                    </ForwardRef(Collapse)>
+                  </WithStyles(ForwardRef(Collapse))>
+                </div>
+              </ForwardRef(Paper)>
+            </WithStyles(ForwardRef(Paper))>
+          </ForwardRef(ExpansionPanel)>
+        </WithStyles(ForwardRef(ExpansionPanel))>
+      </div>
+      <div
+        className="faq-section"
+        key="1"
+      >
+        <div
+          className="text-16-normal-uppercase"
+        >
+          Contenu du service
+        </div>
+        <WithStyles(ForwardRef(ExpansionPanel))
+          classes={
+            Object {
+              "root": "expansion-panel-root",
+            }
+          }
+          expanded={false}
+          key="0"
+          onChange={[Function]}
+        >
+          <ForwardRef(ExpansionPanel)
+            classes={
+              Object {
+                "disabled": "Mui-disabled",
+                "expanded": "Mui-expanded",
+                "root": "MuiExpansionPanel-root expansion-panel-root",
+                "rounded": "MuiExpansionPanel-rounded",
+              }
+            }
+            expanded={false}
+            onChange={[Function]}
+          >
+            <WithStyles(ForwardRef(Paper))
+              className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+              square={false}
+            >
+              <ForwardRef(Paper)
+                className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+                classes={
+                  Object {
+                    "elevation0": "MuiPaper-elevation0",
+                    "elevation1": "MuiPaper-elevation1",
+                    "elevation10": "MuiPaper-elevation10",
+                    "elevation11": "MuiPaper-elevation11",
+                    "elevation12": "MuiPaper-elevation12",
+                    "elevation13": "MuiPaper-elevation13",
+                    "elevation14": "MuiPaper-elevation14",
+                    "elevation15": "MuiPaper-elevation15",
+                    "elevation16": "MuiPaper-elevation16",
+                    "elevation17": "MuiPaper-elevation17",
+                    "elevation18": "MuiPaper-elevation18",
+                    "elevation19": "MuiPaper-elevation19",
+                    "elevation2": "MuiPaper-elevation2",
+                    "elevation20": "MuiPaper-elevation20",
+                    "elevation21": "MuiPaper-elevation21",
+                    "elevation22": "MuiPaper-elevation22",
+                    "elevation23": "MuiPaper-elevation23",
+                    "elevation24": "MuiPaper-elevation24",
+                    "elevation3": "MuiPaper-elevation3",
+                    "elevation4": "MuiPaper-elevation4",
+                    "elevation5": "MuiPaper-elevation5",
+                    "elevation6": "MuiPaper-elevation6",
+                    "elevation7": "MuiPaper-elevation7",
+                    "elevation8": "MuiPaper-elevation8",
+                    "elevation9": "MuiPaper-elevation9",
+                    "outlined": "MuiPaper-outlined",
+                    "root": "MuiPaper-root",
+                    "rounded": "MuiPaper-rounded",
+                  }
+                }
+                square={false}
+              >
+                <div
+                  className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                >
+                  <WithStyles(ForwardRef(ExpansionPanelSummary))
+                    aria-label="faq.accessibility.button_toggle_detail"
+                    classes={
+                      Object {
+                        "content": "expansion-panel-content",
+                        "root": "expansion-panel-summary small bold-text",
+                      }
+                    }
+                    expandIcon={
+                      <StyledIcon
+                        icon="test-file-stub"
+                      />
+                    }
+                    key=".0"
+                  >
+                    <ForwardRef(ExpansionPanelSummary)
+                      aria-label="faq.accessibility.button_toggle_detail"
+                      classes={
+                        Object {
+                          "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+                          "disabled": "Mui-disabled",
+                          "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+                          "expanded": "Mui-expanded",
+                          "focused": "Mui-focused",
+                          "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+                        }
+                      }
+                      expandIcon={
+                        <StyledIcon
+                          icon="test-file-stub"
+                        />
+                      }
+                    >
+                      <WithStyles(ForwardRef(ButtonBase))
+                        aria-expanded={false}
+                        aria-label="faq.accessibility.button_toggle_detail"
+                        className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                        component="div"
+                        disableRipple={true}
+                        disabled={false}
+                        focusRipple={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocusVisible={[Function]}
+                      >
+                        <ForwardRef(ButtonBase)
+                          aria-expanded={false}
+                          aria-label="faq.accessibility.button_toggle_detail"
+                          className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                          classes={
+                            Object {
+                              "disabled": "Mui-disabled",
+                              "focusVisible": "Mui-focusVisible",
+                              "root": "MuiButtonBase-root",
+                            }
+                          }
+                          component="div"
+                          disableRipple={true}
+                          disabled={false}
+                          focusRipple={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocusVisible={[Function]}
+                        >
+                          <div
+                            aria-disabled={false}
+                            aria-expanded={false}
+                            aria-label="faq.accessibility.button_toggle_detail"
+                            className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onDragLeave={[Function]}
+                            onFocus={[Function]}
+                            onKeyDown={[Function]}
+                            onKeyUp={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseLeave={[Function]}
+                            onMouseUp={[Function]}
+                            onTouchEnd={[Function]}
+                            onTouchMove={[Function]}
+                            onTouchStart={[Function]}
+                            role="button"
+                            tabIndex={0}
+                          >
+                            <div
+                              className="MuiExpansionPanelSummary-content expansion-panel-content"
+                            >
+                              Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?
+                            </div>
+                            <WithStyles(ForwardRef(IconButton))
+                              aria-hidden={true}
+                              className="MuiExpansionPanelSummary-expandIcon"
+                              component="div"
+                              edge="end"
+                              role={null}
+                              tabIndex={null}
+                            >
+                              <ForwardRef(IconButton)
+                                aria-hidden={true}
+                                className="MuiExpansionPanelSummary-expandIcon"
+                                classes={
+                                  Object {
+                                    "colorInherit": "MuiIconButton-colorInherit",
+                                    "colorPrimary": "MuiIconButton-colorPrimary",
+                                    "colorSecondary": "MuiIconButton-colorSecondary",
+                                    "disabled": "Mui-disabled",
+                                    "edgeEnd": "MuiIconButton-edgeEnd",
+                                    "edgeStart": "MuiIconButton-edgeStart",
+                                    "label": "MuiIconButton-label",
+                                    "root": "MuiIconButton-root",
+                                    "sizeSmall": "MuiIconButton-sizeSmall",
+                                  }
+                                }
+                                component="div"
+                                edge="end"
+                                role={null}
+                                tabIndex={null}
+                              >
+                                <WithStyles(ForwardRef(ButtonBase))
+                                  aria-hidden={true}
+                                  centerRipple={true}
+                                  className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                  component="div"
+                                  disabled={false}
+                                  focusRipple={true}
+                                  role={null}
+                                  tabIndex={null}
+                                >
+                                  <ForwardRef(ButtonBase)
+                                    aria-hidden={true}
+                                    centerRipple={true}
+                                    className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                    classes={
+                                      Object {
+                                        "disabled": "Mui-disabled",
+                                        "focusVisible": "Mui-focusVisible",
+                                        "root": "MuiButtonBase-root",
+                                      }
+                                    }
+                                    component="div"
+                                    disabled={false}
+                                    focusRipple={true}
+                                    role={null}
+                                    tabIndex={null}
+                                  >
+                                    <div
+                                      aria-disabled={false}
+                                      aria-hidden={true}
+                                      className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                      onBlur={[Function]}
+                                      onDragLeave={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onKeyUp={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseUp={[Function]}
+                                      onTouchEnd={[Function]}
+                                      onTouchMove={[Function]}
+                                      onTouchStart={[Function]}
+                                      role={null}
+                                      tabIndex={null}
+                                    >
+                                      <span
+                                        className="MuiIconButton-label"
+                                      >
+                                        <StyledIcon
+                                          icon="test-file-stub"
+                                        >
+                                          <Icon
+                                            aria-hidden={true}
+                                            icon="test-file-stub"
+                                            size={16}
+                                            spin={false}
+                                          >
+                                            <Component
+                                              aria-hidden={true}
+                                              className="styles__icon___23x3R"
+                                              height={16}
+                                              style={Object {}}
+                                              width={16}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="styles__icon___23x3R"
+                                                height={16}
+                                                style={Object {}}
+                                                width={16}
+                                              >
+                                                <use
+                                                  xlinkHref="#test-file-stub"
+                                                />
+                                              </svg>
+                                            </Component>
+                                          </Icon>
+                                        </StyledIcon>
+                                      </span>
+                                      <NoSsr>
+                                        <WithStyles(memo)
+                                          center={true}
+                                        >
+                                          <ForwardRef(TouchRipple)
+                                            center={true}
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
+                                            >
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </NoSsr>
+                                    </div>
+                                  </ForwardRef(ButtonBase)>
+                                </WithStyles(ForwardRef(ButtonBase))>
+                              </ForwardRef(IconButton)>
+                            </WithStyles(ForwardRef(IconButton))>
+                          </div>
+                        </ForwardRef(ButtonBase)>
+                      </WithStyles(ForwardRef(ButtonBase))>
+                    </ForwardRef(ExpansionPanelSummary)>
+                  </WithStyles(ForwardRef(ExpansionPanelSummary))>
+                  <WithStyles(ForwardRef(Collapse))
+                    in={false}
+                    timeout="auto"
+                  >
+                    <ForwardRef(Collapse)
+                      classes={
+                        Object {
+                          "container": "MuiCollapse-container",
+                          "entered": "MuiCollapse-entered",
+                          "hidden": "MuiCollapse-hidden",
+                          "wrapper": "MuiCollapse-wrapper",
+                          "wrapperInner": "MuiCollapse-wrapperInner",
+                        }
+                      }
+                      in={false}
+                      timeout="auto"
+                    >
+                      <Transition
+                        addEndListener={[Function]}
+                        appear={false}
+                        enter={true}
+                        exit={true}
+                        in={false}
+                        mountOnEnter={false}
+                        onEnter={[Function]}
+                        onEntered={[Function]}
+                        onEntering={[Function]}
+                        onExit={[Function]}
+                        onExited={[Function]}
+                        onExiting={[Function]}
+                        timeout={null}
+                        unmountOnExit={false}
+                      >
+                        <div
+                          className="MuiCollapse-container MuiCollapse-hidden"
+                          style={
+                            Object {
+                              "minHeight": "0px",
+                            }
+                          }
+                        >
+                          <div
+                            className="MuiCollapse-wrapper"
+                          >
+                            <div
+                              className="MuiCollapse-wrapperInner"
+                            >
+                              <div
+                                role="region"
+                              >
+                                <WithStyles(ForwardRef(ExpansionPanelDetails))
+                                  classes={
+                                    Object {
+                                      "root": "expansion-panel-details",
+                                    }
+                                  }
+                                  key=".1"
+                                >
+                                  <ForwardRef(ExpansionPanelDetails)
+                                    classes={
+                                      Object {
+                                        "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="MuiExpansionPanelDetails-root expansion-panel-details"
+                                    >
+                                      <div>
+                                        <p>
+                                          Le prix de votre électricité ou de votre gaz dépend de l'offre choisie auprès de votre fournisseur. N’ayant pas accès à cette information, Ecolyo affiche un prix moyen par fluide.
+                                        </p>
+                                        <p>
+                                          Tarifs moyens retenus :
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </ForwardRef(ExpansionPanelDetails)>
+                                </WithStyles(ForwardRef(ExpansionPanelDetails))>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </Transition>
+                    </ForwardRef(Collapse)>
+                  </WithStyles(ForwardRef(Collapse))>
+                </div>
+              </ForwardRef(Paper)>
+            </WithStyles(ForwardRef(Paper))>
+          </ForwardRef(ExpansionPanel)>
+        </WithStyles(ForwardRef(ExpansionPanel))>
+      </div>
+    </div>
+  </div>
+</FAQContent>
+`;
diff --git a/src/components/FAQ/faqContent.scss b/src/components/FAQ/faqContent.scss
index cfb365464a29936aa0b26b6e15a68954d5127b29..c8cae55585fd727a36578775cf5514c5d21ec5b4 100644
--- a/src/components/FAQ/faqContent.scss
+++ b/src/components/FAQ/faqContent.scss
@@ -16,20 +16,30 @@
   }
 }
 
+.faq-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  @media #{$large-phone} {
+    min-height: inherit;
+  }
+}
+
 .faq-section {
   color: $grey-bright;
   padding-top: 1rem;
-  .faq-content-detail {
-    padding-bottom: 0.6rem;
-    .text-bold {
-      font-weight: bold;
-    }
-    .text-underline {
-      text-decoration: underline;
-    }
-    .spaceline {
-      height: 0.6rem;
-      display: block;
+  .expansion-panel-details {
+    div {
+      padding-bottom: 0.6rem;
+      p {
+        color: $grey-bright;
+        margin-block-start: 0;
+        margin-block-end: 0.6rem;
+      }
+      p:last-child {
+        margin-block-end: 0rem;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index f57ee8d6214778b932ae38266ffc3fe415697865..31650c119d1e0ea221dbed1d74ceccd2a8a0b089 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -11,6 +11,7 @@ import {
   mockInitialEcolyoState,
 } from '../../../tests/__mocks__/store'
 import { act } from 'react-dom/test-utils'
+import { BrowserRouter } from 'react-router-dom'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
@@ -55,10 +56,12 @@ describe('FeedbackModal component', () => {
     mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
     const component = mount(
       <Provider store={store}>
-        <FeedbackModal
-          open={true}
-          handleCloseClick={handleFeedbackModalClose}
-        />
+        <BrowserRouter>
+          <FeedbackModal
+            open={true}
+            handleCloseClick={handleFeedbackModalClose}
+          />
+        </BrowserRouter>
       </Provider>
     ).getElement()
     expect(component).toMatchSnapshot()
@@ -76,10 +79,12 @@ describe('FeedbackModal functionnalities', () => {
 
     const wrapper = mount(
       <Provider store={store}>
-        <FeedbackModal
-          open={true}
-          handleCloseClick={handleFeedbackModalClose}
-        />
+        <BrowserRouter>
+          <FeedbackModal
+            open={true}
+            handleCloseClick={handleFeedbackModalClose}
+          />
+        </BrowserRouter>
       </Provider>
     )
 
@@ -147,10 +152,12 @@ describe('FeedbackModal functionnalities', () => {
     mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
     const wrapper = mount(
       <Provider store={store}>
-        <FeedbackModal
-          open={true}
-          handleCloseClick={handleFeedbackModalClose}
-        />
+        <BrowserRouter>
+          <FeedbackModal
+            open={true}
+            handleCloseClick={handleFeedbackModalClose}
+          />
+        </BrowserRouter>
       </Provider>
     )
     await act(async () => {
@@ -174,10 +181,12 @@ describe('FeedbackModal functionnalities', () => {
   it('should upload the image', async () => {
     const wrapper = mount(
       <Provider store={store}>
-        <FeedbackModal
-          open={true}
-          handleCloseClick={handleFeedbackModalClose}
-        />
+        <BrowserRouter>
+          <FeedbackModal
+            open={true}
+            handleCloseClick={handleFeedbackModalClose}
+          />
+        </BrowserRouter>
       </Provider>
     )
     await act(async () => {
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index d2db8f2d0b2f8bf3d762f33c4e9e1852872c41ac..d387c86b8177ef109f2ce5662021c6edbcad4c07 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -23,6 +23,8 @@ import './feedbackModal.scss'
 import useExploration from 'components/Hooks/useExploration'
 import { UserExplorationID } from 'enum/userExploration.enum'
 import EnvironmentService from 'services/environment.service'
+import Link from '@material-ui/core/Link'
+import { Link as RouterLink } from 'react-router-dom'
 
 const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
 const browser = detect()
@@ -266,36 +268,17 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
                 {selectorItem('other')}
               </fieldset>
 
-              {!uploadedFile ? (
-                <>
-                  <input
-                    type="file"
-                    id="folder"
-                    accept="image/*"
-                    onChange={(e): Promise<void> => getDocument(e)}
-                    className="input-file"
-                    hidden
-                  />
-                  <label htmlFor="folder" className="upload-label">
-                    {t('feedback.upload')}
-                  </label>
-                </>
-              ) : (
-                <>
-                  <span className="fb-label text-16-bold">
-                    {t('feedback.imageLabel')}
-                  </span>
-                  <div className="fileName">
-                    <span>{uploadedFile.name}</span>
-                    <IconButton
-                      onClick={() => setuploadedFile(null)}
-                      className="removeUploaded"
-                    >
-                      <Icon icon={CloseIcon} size={12} />
-                    </IconButton>
-                  </div>
-                </>
-              )}
+              <span id="suggestFaq" className="fb-label text-16-bold">
+                {t('feedback.suggest_faq')}
+                <Link
+                  component={RouterLink}
+                  to="options/FAQ"
+                  onClick={closeModal}
+                >
+                  <span className="styledLink">FAQ</span>
+                </Link>
+                &nbsp;?
+              </span>
               <label
                 htmlFor="idFeedbackDescription"
                 className="fb-label text-16-bold"
@@ -312,18 +295,50 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
                 }
                 value={description}
               ></textarea>
-              <Button
-                aria-label={t('feedback.accessibility.button_send')}
-                onClick={sendEmail}
-                disabled={sending}
-                classes={{
-                  root: 'btn-highlight',
-                  label: 'text-16-bold',
-                }}
-                type="submit"
-              >
-                {t('feedback.send')}
-              </Button>
+              <div className="validate_row">
+                {!uploadedFile ? (
+                  <>
+                    <input
+                      type="file"
+                      id="folder"
+                      accept="image/*"
+                      onChange={(e): Promise<void> => getDocument(e)}
+                      className="input-file"
+                      hidden
+                    />
+                    <label htmlFor="folder" className="upload-label">
+                      {t('feedback.upload')}
+                    </label>
+                  </>
+                ) : (
+                  <>
+                    <span className="fb-label text-16-bold">
+                      {t('feedback.imageLabel')}
+                    </span>
+                    <div className="fileName">
+                      <span>{uploadedFile.name.substring(0, 3)}..</span>
+                      <IconButton
+                        onClick={() => setuploadedFile(null)}
+                        className="removeUploaded"
+                      >
+                        <Icon icon={CloseIcon} size={12} />
+                      </IconButton>
+                    </div>
+                  </>
+                )}
+                <Button
+                  aria-label={t('feedback.accessibility.button_send')}
+                  onClick={sendEmail}
+                  disabled={sending}
+                  classes={{
+                    root: 'btn-highlight',
+                    label: 'text-16-bold',
+                  }}
+                  type="submit"
+                >
+                  {t('feedback.send')}
+                </Button>
+              </div>
             </form>
           </>
         )}
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index 2fd286dd67fe400f211e0d6e01b0fe4bd275a457..bbf516e897809c47d29676f2b8e2c70d1526908c 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -13,9 +13,11 @@ exports[`FeedbackModal component should render the component 1`] = `
     }
   }
 >
-  <FeedbackModal
-    handleCloseClick={[MockFunction]}
-    open={true}
-  />
+  <BrowserRouter>
+    <FeedbackModal
+      handleCloseClick={[MockFunction]}
+      open={true}
+    />
+  </BrowserRouter>
 </Provider>
 `;
diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss
index 3a373cb59f55ef3626252cbcda8b886404100ca3..e8af88519790520306425b2dfbfebd09bd09e174 100644
--- a/src/components/Feedback/feedbackModal.scss
+++ b/src/components/Feedback/feedbackModal.scss
@@ -80,7 +80,10 @@
     button.btn-highlight {
       max-width: 9.375rem;
       align-self: center;
-      margin-top: 1rem;
+      width: 38%;
+      padding-top: 0.5rem;
+      padding-bottom: 0.6rem;
+      margin: 0 !important;
     }
   }
 }
@@ -89,6 +92,7 @@
   padding: 0.5rem;
   text-align: center;
   max-width: 180px;
+  width: 50% !important;
   @include button(
     transparent,
     rgba($grey-bright, 0.7),
@@ -102,6 +106,11 @@
     opacity: 0.7;
   }
 }
+
+.styledLink {
+  color: $gold-light;
+  text-decoration: underline;
+}
 .fileName {
   display: flex;
   justify-content: space-between;
@@ -112,6 +121,13 @@
   margin: 0.5rem 0;
   align-items: center;
 }
+.validate_row {
+  display: flex;
+  justify-content: space-evenly;
+}
 #accessibility-title {
   display: none;
 }
+#suggestFaq {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index f207ac8b6f4d643b28d15f041a9925bcaf379d63..d6eeda1ce63c5eb362dbc372df81036b3d4e779d 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -33,6 +33,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
 }: ConsumptionViewProps) => {
   const client = useClient()
   const dispatch = useDispatch()
+  const isMulti = fluidType !== FluidType.MULTIFLUID
   const { currentTimeStep, loading } = useSelector(
     (state: AppStore) => state.ecolyo.chart
   )
@@ -46,9 +47,6 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
   )
 
   const [headerHeight, setHeaderHeight] = useState<number>(0)
-  const [isMulti] = useState<boolean>(
-    fluidType === FluidType.MULTIFLUID ? true : false
-  )
   const [active, setActive] = useState<boolean>(false)
 
   /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -95,7 +93,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
     ) {
       dispatch(setCurrentTimeStep(TimeStep.WEEK))
     }
-  }, [dispatch, fluidType, currentTimeStep, fluidStatus, isMulti])
+  }, [dispatch, fluidType, currentTimeStep, fluidStatus])
 
   useEffect(() => {
     dispatch(setLoading(true))
@@ -135,7 +133,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
               />
               <ConsumptionDetails fluidType={fluidType} />
             </div>
-            {!isMulti && (
+            {isMulti && (
               <div className="konnector-section">
                 <KonnectorViewerCard
                   fluidStatus={fluidStatus[fluidType]}
@@ -150,7 +148,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
           </>
         ) : (
           <div className="konnector-section">
-            {!isMulti ? (
+            {isMulti ? (
               <KonnectorViewerCard
                 fluidStatus={fluidStatus[fluidType]}
                 fluidType={fluidType}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 0aaa25927531e8977a95c34af849879ecad376d9..f837bd05c5bcf0022dedbf3ababc13ac3781f238 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -222,31 +222,37 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     updatedFluidStatus.length,
   ])
 
-  const sendUsageEventSuccess = async (
-    konnectorSlug: string,
-    isConnexion: boolean
-  ): Promise<UsageEvent> => {
-    return UsageEventService.addEvent(client, {
-      type: isConnexion
-        ? UsageEventType.KONNECTOR_CONNECT_EVENT
-        : UsageEventType.KONNECTOR_REFRESH_EVENT,
-      target: konnectorSlug,
-      result: 'success',
-    })
-  }
+  const sendUsageEventSuccess = useCallback(
+    async (
+      konnectorSlug: string,
+      isConnexion: boolean
+    ): Promise<UsageEvent> => {
+      return UsageEventService.addEvent(client, {
+        type: isConnexion
+          ? UsageEventType.KONNECTOR_CONNECT_EVENT
+          : UsageEventType.KONNECTOR_REFRESH_EVENT,
+        target: konnectorSlug,
+        result: 'success',
+      })
+    },
+    [client]
+  )
 
-  const sendUsageEventError = async (
-    konnectorSlug: string,
-    isConnexion: boolean
-  ): Promise<UsageEvent> => {
-    return UsageEventService.addEvent(client, {
-      type: isConnexion
-        ? UsageEventType.KONNECTOR_CONNECT_EVENT
-        : UsageEventType.KONNECTOR_REFRESH_EVENT,
-      target: konnectorSlug,
-      result: 'error',
-    })
-  }
+  const sendUsageEventError = useCallback(
+    async (
+      konnectorSlug: string,
+      isConnexion: boolean
+    ): Promise<UsageEvent> => {
+      return UsageEventService.addEvent(client, {
+        type: isConnexion
+          ? UsageEventType.KONNECTOR_CONNECT_EVENT
+          : UsageEventType.KONNECTOR_REFRESH_EVENT,
+        target: konnectorSlug,
+        result: 'error',
+      })
+    },
+    [client]
+  )
 
   const getConnectionCard = useCallback(() => {
     if (fluidState === FluidState.KONNECTOR_NOT_FOUND && !isUpdating) {
@@ -353,6 +359,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     setActive,
     fluidStatus.lastDataDate,
     fluidType,
+    sendUsageEventError,
+    fluidSlug,
+    sendUsageEventSuccess,
   ])
   return (
     <>
diff --git a/src/components/ProfileType/profileTypeNavigation.scss b/src/components/ProfileType/profileTypeNavigation.scss
index c30ad0f86caf91227c6c801ddce01e2d43f6fcae..bbf073147f8758ba9757a64bcd4775e067123709 100644
--- a/src/components/ProfileType/profileTypeNavigation.scss
+++ b/src/components/ProfileType/profileTypeNavigation.scss
@@ -5,15 +5,17 @@
   border-top: 1px solid $grey-dark;
   background: $dark-2;
   position: fixed;
-  bottom: 3.5rem;
+  bottom: 0;
+  height: 6.5rem;
   width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
+  padding: 0 0 env(safe-area-inset-bottom) 0;
   @media (min-width: $width-tablet) {
     background: none;
     position: absolute;
-    bottom: 0;
+    height: 3rem;
   }
   .rounded {
     border-radius: 22px;
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index f49d6d996e6a7b833b3558ab8561bfe6021866f2..2723a89e3945cc5f2635e16e5a98ec3422ca0d39 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -1,4 +1,5 @@
 .profile-type-container {
+  position: relative;
   height: 100%;
   min-height: inherit;
   display: flex;
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index ccfaa9b9ab5bae642c5d5b03431685fbcae54fde..223eeaaa71a8b89dd406dfca26af6043aff8183c 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -41,39 +41,25 @@ const Routes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
             <Redirect from="/" to="/terms" />
           </>
         )}
+        <Route path={`/consumption/electricity`} exact>
+          <ConsumptionView fluidType={FluidType.ELECTRICITY} />
+        </Route>
+        <Route path={`/consumption/water`} exact>
+          <ConsumptionView fluidType={FluidType.WATER} />
+        </Route>
+        <Route path={`/consumption/gas`} exact>
+          <ConsumptionView fluidType={FluidType.GAS} />
+        </Route>
+        <Route path={`/consumption`} exact>
+          <ConsumptionView fluidType={FluidType.MULTIFLUID} />
+        </Route>
 
-        <Route
-          path="/consumption"
-          render={({ match: { url } }) => (
-            <>
-              <Route path={`${url}/electricity`} exact>
-                <ConsumptionView fluidType={FluidType.ELECTRICITY} />
-              </Route>
-              <Route path={`${url}/water`} exact>
-                <ConsumptionView fluidType={FluidType.WATER} />
-              </Route>
-              <Route path={`${url}/gas`} exact>
-                <ConsumptionView fluidType={FluidType.GAS} />
-              </Route>
-              <Route path={`${url}/`} exact>
-                <ConsumptionView fluidType={FluidType.MULTIFLUID} />
-              </Route>
-            </>
-          )}
-        />
+        <Route path={`/challenges/duel`} component={DuelView} />
+        <Route path={`/challenges/quiz`} component={QuizView} />
+        <Route path={`/challenges/exploration`} component={ExplorationView} />
+        <Route path={`/challenges/action`} exact component={ActionView} />
+        <Route path={`/challenges/`} component={ChallengeView} exact />
 
-        <Route
-          path="/challenges"
-          render={({ match: { url } }) => (
-            <>
-              <Route path={`${url}/duel`} component={DuelView} />
-              <Route path={`${url}/quiz`} component={QuizView} />
-              <Route path={`${url}/exploration`} component={ExplorationView} />
-              <Route path={`${url}/action`} exact component={ActionView} />
-              <Route path={`${url}/`} component={ChallengeView} exact />
-            </>
-          )}
-        />
         <Route path="/ecogestures" component={EcogestureView} />
         <Route path={'/options/FAQ'} component={FAQView} />
         <Route path={`/options/legalnotice`} component={LegalNoticeView} />
diff --git a/src/constants/config.json b/src/constants/config.json
index aca5acc83db86f7119f0a62604b3e050975ee3b7..d72bba6bcf30260ac6dcf84c9896b97eccd9f43e 100644
--- a/src/constants/config.json
+++ b/src/constants/config.json
@@ -4,6 +4,8 @@
       "fluidTypeId": 0,
       "name": "enedis",
       "coefficient": 0.1558,
+
+      "startDate": "2021-08-01T00:00:00.000",
       "dataDelayOffset": 3,
       "konnectorConfig": {
         "name": "Enedis",
@@ -17,6 +19,7 @@
       "fluidTypeId": 1,
       "name": "egl",
       "coefficient": 0.00319,
+      "startDate": "2021-01-01T00:00:00.000",
       "dataDelayOffset": 5,
       "konnectorConfig": {
         "name": "Eau du Grand Lyon",
@@ -30,6 +33,7 @@
       "fluidTypeId": 2,
       "name": "grdf",
       "coefficient": 0.1121,
+      "startDate": "2021-10-01T00:00:00.000",
       "dataDelayOffset": 5,
       "konnectorConfig": {
         "name": "GRDF",
diff --git a/src/constants/faq.json b/src/constants/faq.json
deleted file mode 100644
index 0bcd00b4ceefc731128bd11cd59d565d45ecbb2d..0000000000000000000000000000000000000000
--- a/src/constants/faq.json
+++ /dev/null
@@ -1,129 +0,0 @@
-[
-  {
-    "section": "Mes données",
-    "questions": [
-      {
-        "summary": "Comment accéder à mes données électricité ?",
-        "details": [
-          "Rendez-vous dans la partie Options du service et cliquer sur le bouton \"Se connecter à l'électricité\". Suivez la procédure (en vous créant un compte Enedis si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées."
-        ]
-      },
-      {
-        "summary": "Comment accéder à mes données gaz ?",
-        "details": [
-          "Rendez-vous dans la partie Options du service et cliquez sur le bouton \"Se connecter au gaz\". Suivez la procédure (en vous créant un compte GRDF si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées."
-        ]
-      },
-      {
-        "summary": "Comment accéder à mes données eau ?",
-        "details": [
-          "Rendez-vous dans la partie Options du service et cliquez sur \"Se connecter à l'eau\". Entrez vos identifiants Eau du Grand Lyon. Vos données seront ainsi récupérées."
-        ]
-      },
-      {
-        "summary": "Mes données ne s'affichent pas. Que se passe-t-il ?",
-        "details": [
-          "En fonctionnement normal, vos données électricité arrivent à J+1 (le lendemain), vos données eau et gaz arrivent quant à elles 3 jours après (à J+3).",
-          "Plusieurs raisons peuvent expliquer l'absence de données :",
-          "- Le lien entre Ecolyo et le fournisseur de données est rompu. Une mise à jour de ce lien (en bas de la page) peut parfois résoudre ce problème.",
-          "- Si la mise à jour a été effectuée mais que la donnée n'apparaît toujours pas, le souci vient du fournisseur de données (Enedis pour l'électricité, GRDF pour le gaz, Eau du Grand Lyon pour l'eau). Cela peut être un problème de transmission de données entre le compte et le système de données du partenaire, ou un problème sur votre compteur. Dans ce cas, le mieux est de contacter directement Enedis, GRDF ou Eau du Grand Lyon pour tenter de régler le problème avec eux. "
-        ]
-      },
-      {
-        "summary": "Pourquoi dois-je avoir un compte Enedis, GRDF ou Eau du Grand Lyon ?",
-        "details": [
-          "Nous avons fait le choix de passer par les gestionnaires de réseaux (Enedis pour l'électricité, GRDF pour le gaz et Eau du Grand Lyon pour l'eau).  Ils sont en effet responsables de votre compteur, de la collecte des données et du partage de celles-ci.  Ils ont les données brutes, ces mêmes données qui sont consolidées pour votre fournisseur d'énergie ou d'eau, celui-là même qui vous facture. Pour récupérer vos données, et afin que vous et vous seul y ait accès, il vous faut créer un compte chez ces gestionnaires de réseaux. Ce process n'est à réaliser que lors de première connexion."
-        ]
-      },
-      {
-        "summary": "Si je n'en ai pas, est-ce possible d'avoir des compteurs communicants (Linky, Gazpar, Téléo ?)",
-        "details": [
-          " - Linky, le compteur électricité est déployé sur 95% de notre territoire métropolitain. Si vous n'êtes pas encore équipé, vous pouvez contacter Enedis au 0 970 831 970 (prix d'un appel local) entre 8h et 17h pour convenir d'un rendez-vous.",
-          " - Concernant Gazpar le compteur gaz, s'il n'est pas encore installé chez vous, vous pouvez vous renseigner sur le planning de déploiement du compteur à cette adresse : <a href=\"https://monespace.grdf.fr/compteur-gazpar-et-ma-commune\">https://monespace.grdf.fr/compteur-gazpar-et-ma-commune.</a>",
-          " - Concernant Téléo, le compteur eau, si vous êtes en eau individualisé. En principe, vous devriez déjà avoir Téléo chez vous.  Si vous êtes abonné et que vous n'êtes pas encore équipé, contactez le service client d'eau du Grand Lyon par téléphone au 09 69 39 69 99 (numéro cristal non surtaxé) pour obtenir l'installation d'un compteur communicant Téléo."
-        ]
-      },
-      {
-        "summary": "Qui a accès à mes données de consommation?",
-        "details": [
-          "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. 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.",
-          "Dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées sont cependant 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 (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>)."
-        ]
-      },
-      {
-        "summary": "Comment supprimer mon consentement au partage de mes données (électricité, gaz ou eau) ?",
-        "details": [
-          "Dans un premier temps, vous pouvez supprimer le connecteur électricité, gaz ou eau dans la page Options du service afin de stopper le transfert de vos données vers notre service. Pour supprimer totalement votre consentement vous devez ensuite : ",
-          " - pour l'électricité : contacter directement dataconnect@enedis.fr pour leur indiquer votre souhait de supprimer le consentement de partage des données avec notre service.",
-          " - pour le gaz, rendez-vous dans votre espace GRDF (<a href=\"https://monespace.grdf.fr/\">https://monespace.grdf.fr/</a>) dans partie \"Suivi des consommations\" puis \"Données consultées\". Vous pouvez alors supprimer le consentement donné à notre service."
-        ]
-      }
-    ]
-  },
-  {
-    "section": "Contenu du service",
-    "questions": [
-      {
-        "summary": "Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?",
-        "details": [
-          "Les données qui sont transmises au service par Enedis, GRDF ou Eau du Grand Lyon ne comprennent pas les données de prix de l'électricité, du gaz ou de l'eau. En effet ce prix est différent selon le fournisseur d'énergie auquel vous avez souscrit. Dans l'absence de cette donnée et pour cette version, un prix moyen pour chacun des fluides (électricité, gaz et eau) a été choisi. Le coût de l'abonnement et les taxes (qui correspondent par ailleurs à 66% de votre facture) ne sont pas inclus dans les prix présentés dans notre service.",
-          "Tarifs moyens retenus dans le service : ",
-          " - pour l'électricité 1 kWh d’électricité = 0,1558 €TTC (il correspond au tarif réglementé d’EDF au 1/08/2021 pour une puissance souscrite de 3 ou 6 kVA et hors offre heure pleine/heure creuse)",
-          " - pour le gaz 1 kWh = 0,1121 €TTC (tarif réglementé de vente au 1/10/2021 pour un consommateur soutirant moins de 6 MWh par an)",
-          " - pour l'eau, 1 litre d’eau = 0,00319 € TTC (prix constaté au 1/01/2021 pour un abonnement et une consommation de 120 m3/an sur la Métropole de Lyon)"
-        ]
-      },
-      {
-        "summary": "Est-ce la météo est prise en compte dans les données affichées ?",
-        "details": [
-          "La météo n'est pour l'instant pas prise en compte dans les données présentées. Nous réfléchissons à termes à une intégration des données de température extérieure. En effet, celles-ci influent fortement sur les comportements et donc les consommations aussi bien d'énergie en hiver que d'eau en été. Affaire à suivre pour notre service !"
-        ]
-      },
-      {
-        "summary": "Quelle est la source des écogestes ?",
-        "details": [
-          "Les écogestes présentés dans le service sont issus de guides préparé par le CLER - Réseau pour la transition énergétique ainsi que par l'ADEME (l'Agence de l'environnement et de la maîtrise de l'énergie). La source principale est le guide des 100 écogestes (version 2020-2021) produit par le CLER dans le cadre du programme DECLIC."
-        ]
-      },
-      {
-        "summary": "Qu'est-ce qu'un kWh ?",
-        "details": [
-          "Le kWh est l'unité de mesure correspondant à l'énergie consommée pendant une heure par un appareil d'une puissance de 1000 watts (1 kW). Avec 1 kWh, il est possible de … regarder la télévision pendant 3 à 5h (selon le modèle de télé), cuire un poulet au four thermostat 6 pendant 1h, vous servir d'un ordinateur au bureau pendant une demi-journée..."
-        ]
-      },
-      {
-        "summary": "Pourquoi dois-je renseigner mon profil dans la service ? Comment le modifier ? ",
-        "details": [
-          "Renseigner votre profil c'est profiter à la fois d'une comparaison de vos consommations avec les consommation d'un foyer vous ressemblant (allez jetez un œil dans la partie Analyse) mais aussi avoir accès à un tri personnalisé des écogestes dans la partie Ecogestes du service."
-        ]
-      },
-      {
-        "summary": "Comment sont choisis les écogestes personnalisés ?",
-        "details": [
-          "Les écogestes personnalisés sont aujourd'hui choisis en fonction des compteurs individuels que vous possédez (communicants ou non). Ils vous permettent d'agir sur ces consommations. D'autres modes de tri, davantage personnalisables seront proposés à l'avenir."
-        ]
-      }
-    ]
-  },
-  {
-    "section": "Autres infos",
-    "questions": [
-      {
-        "summary": "Comment accéder plus facilement au service à l'avenir ?",
-        "details": [
-          "Pour retrouver facilement l'accès à Ecolyo à l'avenir, il suffit de vous créer un raccourci :",
-          " - Sur mobile APPLE : Pour créer un raccourci sur votre écran d'accueil, ouvrez Ecolyo dans Safari et cliquez sur Partager (carré avec une flèche pointant vers le haut), en descendant dans le menu cliquez sur \"Sur l'écran d'accueil\" puis ajouter. Un raccourci d'Ecolyo sera alors présent (il ressemblera à une application comme une autre).",
-          " - Sur mobile ANDROID : Une fois sur la page web du service, appuyez sur les trois petits points du menu en haut à droite. Sélectionnez \"Ajouter à l'écran d'accueil\". Nommez la page et appuyez sur \"Ajouter\". Un raccourci vers la page web est apparu sur l'écran d'accueil de votre smartphone.",
-          " - Sur ordinateur  : ajoutez classiquement Ecolyo dans les Favoris de votre navigateur préféré. Cela sera plus facile par la suite de retrouver notre service.",
-          "Si un jour vous avez totalement perdu l'adresse d'accès à votre service, vous pouvez le retrouver en cliquant tout en bas sur le bouton \"Accéder à mon cloud personnel\" du site web Ecolyo.com"
-        ]
-      },
-      {
-        "summary": "Pour accéder à Ecolyo, j'ai dû me créer un cloud personnel Grand Lyon. Qu'est-ce ?",
-        "details": [
-          "Souvent le cloud personnel est réduit à un simple espace de stockage de documents mais il est bien plus que ça. C'est un espace individuel et sécurisé. Vous seul pouvez y accéder, personne d'autre. Dans le cloud vous avez deux types de services: les premiers sont des services qui vous permettent de récupérer vos données et les stocker dans cet espace. Vous avez aussi des services qui vous permettent de valoriser vos données pour qu'elles aient plus de sens pour vous (c'est le cas d'Ecolyo!).  Si vous souhaitez en savoir plus sur votre cloud personnel cliquez ici (lien vers <a href=\"https://support.grandlyon.com/clouds-personnels-grand-lyon/\">https://support.grandlyon.com/clouds-personnels-grand-lyon/</a>)."
-        ]
-      }
-    ]
-  }
-]
diff --git a/src/locales/fr.json b/src/locales/fr.json
index de44887c7e18891afc2d9c6d1330b72b881b10b3..9c1b62804a3bf55c9c44f19de5ba0967c75516c1 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -113,7 +113,21 @@
     "week": "semaine",
     "weekend": "week-end",
     "min": "Consommation minimum",
-    "maxPower": "Puissance maximum atteinte"
+    "maxPower": "Puissance maximum atteinte",
+    "showModal": "Plus d'infos"
+  },
+  "elec_info_modal": {
+    "accessibility": {
+      "window_title": "electricity-info-modal",
+      "button_close": "close-modal"
+    },
+    "title1": "Qu’est-ce que la consommation minimum ?",
+    "title2": "Qu’est-ce que la puissance maximum ?",
+    "text1": "La consommation minimum correspond à votre plus petite consommation du mois, sur un créneau d'une demi-heure.",
+    "text2": "Elle peut comprendre la consommation de vos appareils électriques en veille (box, télé, ...) ou encore celle de vos frigo et congélateur.",
+    "text3": "C’est la puissance maximum délivrée par tous les appareils fonctionnant au même moment dans votre logement.",
+    "text4": "Vous avez choisi une puissance maximum dans votre offre d’éléctricité (3, 6 ou 9 kVA...) que vous ne devez pas dépasser pour ne pas faire sauter votre compteur. ",
+    "text5": "Cette puissance varie d'un mois à l'autre, regardez cette valeur sur l'ensemble de l'année pour vérifier si votre puissance souscrite correspond bien à votre usage."
   },
   "auth": {
     "enedisgrandlyon": {
@@ -282,10 +296,10 @@
       "close": "Fermer la fenêtre",
       "part1": "Le prix de votre électricité ou de votre gaz dépend de l'offre choisie auprès de votre fournisseur. N’ayant pas accès à cette information, Ecolyo affiche un prix moyen par fluide. ",
       "part2": "Tarifs moyens retenus :",
-      "list1": " : 1 kWh = 0,1558 €TTC (il correspond au tarif réglementé d’EDF au 1/08/2021 pour une puissance souscrite de 3 ou 6 kVA et hors offre heure pleine/heure creuse)",
-      "list2": " : 1 kWh = 0,1121 €TTC (tarif réglementé de vente au 1/10/2021 pour un consommateur soutirant moins de 6 MWh par an)",
-      "list3": " : 1 litre d’eau = 0,00319 € TTC (prix constaté au 1/01/2021 pour un abonnement et une consommation de 120 m3/an sur la Métropole de Lyon)",
-      "part3": "À cela s'ajoute le coût de votre abonnement, le coût d'acheminement et les taxes qui représentent plus de 66% de votre facture."
+      "list1": " : 1 kWh = %{elecPrice} €TTC (il correspond au tarif réglementé d’EDF au %{elecPriceStartDate} pour une puissance souscrite de 3 ou 6 kVA et hors offre heure pleine/heure creuse)",
+      "list2": " : 1 kWh = %{gasPrice} €TTC (tarif réglementé de vente au %{gasPriceStartDate} pour un consommateur soutirant moins de 6 MWh par an)",
+      "list3": " : 1 litre d’eau = %{waterPrice} € TTC (prix constaté au %{waterPriceStartDate} pour un abonnement et une consommation de 120 m3/an sur la Métropole de Lyon)",
+      "part3": "Le coût de votre abonnement n'est pas pris en compte dans Ecolyo."
     },
     "release_notes_modal": {
       "title": "Du nouveau sur Ecolyo !",
@@ -419,6 +433,7 @@
   "feedback": {
     "title": "Partagez-nous vos retours",
     "type": "Motif du retour :",
+    "suggest_faq": "Avez-vous pensé à consulter la ",
     "description": "Description :",
     "description_placeholder": "Vos remarques",
     "send": "Envoyer",
@@ -443,12 +458,12 @@
     }
   },
   "dataShare": {
-    "title1": "Bienvenue !",
-    "title1Update": "Ecolyo évolue !",
+    "title1": "Bienvenue !",
+    "title1Update": "Ecolyo évolue !",
     "title2Update": "Pour continuer à utiliser Ecolyo, merci d’accepter les modalités de traitement des données ci-dessous.",
     "part1": "Pour le bon fonctionnement du service, nous avons besoin de l’adresse email utilisée lors la création de votre cloud personnel Grand 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 :",
+    "part3": "La Métropole de Lyon utilisera cet email afin de vous tenir informé·e :",
     "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.",
@@ -469,7 +484,7 @@
     }
   },
   "minorUpdate": {
-    "title": "Ecolyo évolue !",
+    "title": "Ecolyo évolue !",
     "button": "J'ai compris"
   },
   "gcu": {
@@ -477,22 +492,22 @@
     "subtitle": "Envie de prendre le temps de relire ces CGU ces Conditions Générales d’Utilisation plus tard ? Vous pourrez les retrouver dans la page Options du service.",
     "version": "V2.0 du 20.08.2021",
     "content": {
-      "title1": "Ecolyo, késako ?",
+      "title1": "Ecolyo, késako ?",
       "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 éco-gestes vous sont aussi proposés 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_3": "Tous les termes « techniques » sont définis en bas de page.",
+      "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_3": "Tous les termes « techniques » sont définis en bas de page.",
       "title2": "Quelles fonctionnalités le service propose-t-il ?",
       "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 : ",
-      "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": "Écogestes : Une liste d’écogestes à 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 nous souhaitons vous aider à diminuer ces consommations vous retrouverez plusieurs autres pages : ",
+      "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": "Écogestes : Une liste d’écogestes à 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_3": "Pour la page Analyse ainsi que pour la partie personnalisation des éco-gestes, 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 retrouver les connecteurs -  services vous permettant d’aller récupérer vos données d’électricité, de gaz et d’eau - , une foire aux questions, et de quoi ajuster votre profil.",
+      "part2_4": "Dernière page : la page Options dans laquelle vous pourrez retrouver les connecteurs -  services vous permettant d’aller récupérer vos données d’électricité, de gaz et d’eau - , une foire aux questions, et de quoi ajuster votre profil.",
       "title3": "Comment ai-je accès à mes données d’électricité, de gaz et d’eau ?",
-      "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_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 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_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 Enedis, GRDF et Eau 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.",
       "title4": "Ecolyo se trouve dans un cloud personnel Grand Lyon, qu’est-ce que cela signifie ?",
       "part4_1": "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un compte Cloud Personnel Grand Lyon. Ce cloud personnel est un espace sécurisé porté par l’ambition de vous apporter visibilité, transparence et maitrise 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.",
@@ -500,16 +515,16 @@
       "title5": "Et donc concrètement pour Ecolyo, quelles données sont collectées et qui y a accès ?",
       "part5_1": "Pour qu’Ecolyo ait accès à vos données de consommations, vous devrez activer vos connecteurs dans la page Options. À ce moment-là, et à 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 les données électriques (chez Enedis), elle est par défaut de 6 mois. Pour les données gaz, cela sera à vous de la définir (nous vous recommandons 1 an pour une expérience optimale).",
       "part5_2": "Vos connecteurs, une fois configurés, permettent le transfert de vos données de consommations au service Ecolyo. Le transfert de cette donnée 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": "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 Options.",
-      "part5_3_list2": "Attention : lors de la désinstallation du connecteur qui collecte vos données au sein du cloud, celui-ci ne va plus aller chercher vos données. Par contre, votre consentement chez le partenaire fournisseur est toujours actif jusqu’à votre révocation de consentement auprès de ce dernier. Pour révoquer votre consentement, il vous faudra contacter ou agir directement chez le partenaire en question : Enedis pour l’électricité ou GRDF pour le gaz. Pour l’électricité, vous pouvez peut supprimer votre consentement à partager vos données en écrivant directement à dataconnect(at)enedis.fr. Pour le gaz, il vous faudra vous connecter à <a href=\"https://monespace.grdf.fr/monespace/connexion\">votre espace GRDF</a> et supprimer le consentement donné à la Métropole de Lyon dans la partie « Suivi de Consommations » puis « Données Consultées ». Au terme de la durée initiale de validité du consentement de 6 mois ou de la durée que vous aurez définie librement, votre consentement sera considéré comme révolu. Tout nouveau transfert de données sera donc soumis à nouveau au recueil préalable de votre consentement.",
-      "part5_3_list3": "Pour supprimer l’ensemble de vos données ainsi que votre espace personnel Grand 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_3_list2": "Attention : lors de la désinstallation du connecteur qui collecte vos données au sein du cloud, celui-ci ne va plus aller chercher vos données. Par contre, votre consentement chez le partenaire fournisseur est toujours actif jusqu’à votre révocation de consentement auprès de ce dernier. Pour révoquer votre consentement, il vous faudra contacter ou agir directement chez le partenaire en question : Enedis pour l’électricité ou GRDF pour le gaz. Pour l’électricité, vous pouvez peut supprimer votre consentement à partager vos données en écrivant directement à dataconnect(at)enedis.fr. Pour le gaz, il vous faudra vous connecter à <a href=\"https://monespace.grdf.fr/monespace/connexion\">votre espace GRDF</a> et supprimer le consentement donné à la Métropole de Lyon dans la partie « Suivi de Consommations » puis « Données Consultées ». Au terme de la durée initiale de validité du consentement de 6 mois ou de la durée que vous aurez définie librement, votre consentement sera considéré comme révolu. Tout nouveau transfert de données sera donc soumis à nouveau au recueil préalable de votre consentement.",
+      "part5_3_list3": "Pour supprimer l’ensemble de vos données ainsi que votre espace personnel Grand 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 du Grand Lyon, un jeton d’identification Enedis et/ou GRDF ainsi que vos numéros de compteurs sont stockés dans votre cloud personnel – sans droit de regard de la Métropole de Lyon.",
       "title6": "Personne n’a donc accès à mes données, pas même la Métropole de Lyon, vraiment ?",
       "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 Grand 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 accès qu’à l’adresse email utilisée lors la création de votre cloud personnel Grand Lyon. Elle utilise cet email afin de vous tenir informé·e :",
+      "part6_3": "La Métropole de Lyon n’a accès qu’à l’adresse email utilisée lors la création de votre cloud personnel Grand 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_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.",
@@ -594,6 +609,7 @@
     "error_data_electricity": "Un problème est survenu. Vos données de consommation d’électricité ne seront pas chargées.",
     "error_data_water": "Un problème est survenu. Vos données de consommation d’eau ne seront pas chargées.",
     "error_credentials_water": "Une erreur s'est glissée dans vos identifiants de connexion. Veuillez vérifier ces éléments et tenter de vous reconnecter. L'identifiant est un numéro à 7 chiffres (différent de votre numéro de contrat).",
+    "error_credentials_update_water": "Une erreur s'est glissée dans vos identifiants de connexion. Veuillez vérifier ces éléments et tenter de vous reconnecter.",
     "error_data_gas": "Un problème est survenu. Vos données de consommmation de gaz ne seront pas chargées.",
     "error_data_update_electricity": "Un problème est survenu. Vos données de consommation d’électricité n’ont pas été mises à jour.",
     "error_data_update_water": "Un problème est survenu. Vos données de consommation d’eau n’ont pas été mises à jour.",
@@ -609,34 +625,34 @@
     "read_legal": "Lire les mentions légales",
     "title_legal": "Mentions légales",
     "version": "V2.0 du 20.08.2021",
-    "site": "Site du service Ecolyo : <a href=\"https://ecolyo.com/\"> https://ecolyo.com/</a>",
+    "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",
-    "mail": "<a href=\"mailto:ecolyo@grandlyon.com\"> ecolyo(at)grandlyon.com</a>",
-    "p1b": "Directeur de publication : ",
+    "mail": "<a href=\"mailto:ecolyo@grandlyon.com\"> ecolyo(at)grandlyon.com</a>",
+    "p1b": "Directeur de publication : ",
     "p1": "Blandine MELAY",
-    "p2b": "Animation éditoriale, gestion et mise à jour : ",
+    "p2b": "Animation éditoriale, gestion et mise à jour : ",
     "p2": "Marion BERTHOLON, Maria Inés LEAL",
-    "p3b": "Photographies : ",
+    "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 -  <a href=\"https://florentdufier.myportfolio.com/\">https://florentdufier.myportfolio.com/</a>",
-    "p5b": "Réalisation technique : ",
+    "p4b": "Conception et Charte graphique : ",
+    "p4": "Florent Dufier -  <a href=\"https://florentdufier.myportfolio.com/\">https://florentdufier.myportfolio.com/</a>",
+    "p5b": "Réalisation technique : ",
     "p5": "Métropole de Lyon, Sopra Steria, Cozy Cloud, Clever Age",
-    "p6b": "Maintenance technique : ",
+    "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, eslint-config-cozy-app, global, lodash, luxon, moment, moment-timezone, node-sass, object-hash, react, react-dom, react-lottie, react-redux, react-router-dom, react-swipeable-views, redux-devtools-extension, sass-loader. Les tests de l’application s’appuient sur les biliothèques et frameworks libres suivants: enzyme, enzyme-adapter-react-16, 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.",
     "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": "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 Ecolyo – Enedis, GRDF et Eau du Grand Lyon sont responsables exclusivement des seuls traitements de Données Personnelles relatifs à la collecte des données de consommation de l’usager et à leur transmission sur la plateforme de cloud personnel, après consentement de l’usager ;",
-    "part2-2": "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-2-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-2": "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-2-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-2-2": "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-2-3": "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-2-4": "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",
     "part2-3": "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 du Grand Lyon seulement qu’à sa demande expresse après la saisie de ses identifiants.",
-    "part2-4": "L’utilisateur est donc le seul à accéder :",
+    "part2-4": "L’utilisateur est donc le seul à accéder :",
     "part2-4-1": "À ses données de consommation d’électricité horaires, journalières, hebdomadaires, mensuelles et annuelles.",
     "part2-4-2": "À ses données de consommation de gaz journalières, hebdomadaires, mensuelles et annuelles.",
     "part2-4-3": "À ses données de consommation eau journalières, hebdomadaires, mensuelles et annuelles.",
@@ -644,7 +660,7 @@
     "part2-6": "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 auprès d’Enedis et de GRDF.",
     "part2-7": "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 :",
     "part2-8": "Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 ou en ligne, au moyen du formulaire disponible à l'adresse suivante : <a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/.</a>",
-    "part2-9": "L’exercice de ces droits sur vos données personnelles auprès de la Métropole de Lyon concerne exclusivement les données traitées dans le cadre du service  « Ecolyo ».",
+    "part2-9": "L’exercice de ces droits sur vos données personnelles auprès de la Métropole de Lyon concerne exclusivement les données traitées dans le cadre du service  « Ecolyo ».",
     "title3": "Dispositions légales",
     "part3-1": "Les divers éléments du site web (la forme, la mise en page, le fonds, la structure …) sont protégés par le droit des dessins et modèles, le droit d’auteur, le droit des marques ainsi que le droit à l’image et ils ne peuvent être copiés ou imités en tout ou partie sauf autorisation expresse de la Métropole de Lyon.",
     "part3-2": "Toute personne ne respectant pas les dispositions légales applicables se rend coupable du délit de contrefaçon et est passible des sanctions pénales prévues par la loi.",
diff --git a/src/migrations/migration.data.ts b/src/migrations/migration.data.ts
index ec04ee6863c226d716272df3c9bda547ec7ce7a5..094b30109bb5af6a33d3ce27d2da91add7225fd8 100644
--- a/src/migrations/migration.data.ts
+++ b/src/migrations/migration.data.ts
@@ -7,8 +7,14 @@ import {
   EGL_MONTH_DOCTYPE,
   EGL_YEAR_DOCTYPE,
   FLUIDPRICES_DOCTYPE,
+  ENEDIS_DAY_DOCTYPE,
+  GRDF_DAY_DOCTYPE,
+  ENEDIS_MONTH_DOCTYPE,
+  ENEDIS_YEAR_DOCTYPE,
+  GRDF_MONTH_DOCTYPE,
+  GRDF_YEAR_DOCTYPE,
 } from 'doctypes'
-import { Profile, ProfileType, UserChallenge } from 'models'
+import { DataloadEntity, Profile, ProfileType, UserChallenge } from 'models'
 import { Client } from 'cozy-client'
 import { DateTime } from 'luxon'
 import { UserQuizState } from 'enum/userQuiz.enum'
@@ -319,4 +325,164 @@ export const migrations: Migration[] = [
       })
     },
   },
+  {
+    baseSchemaVersion: 11,
+    targetSchemaVersion: 12,
+    appVersion: '1.6.1',
+    description: 'Corrects daily Enedis data.',
+    releaseNotes: null,
+    docTypes: ENEDIS_DAY_DOCTYPE,
+    queryOptions: {
+      scope: 'conso',
+      tag: 'day',
+      limit: 1000,
+    },
+    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+      let prevData: DataloadEntity = {
+        id: '',
+        day: 0,
+        hour: 0,
+        load: 0,
+        minute: 0,
+        month: 0,
+        year: 0,
+      }
+      return docs.map(doc => {
+        if (
+          prevData.day === doc.day &&
+          prevData.month === doc.month &&
+          prevData.year === doc.year
+        ) {
+          doc.deleteAction = true
+        }
+        if (doc.price) {
+          delete doc.price
+        }
+        prevData = doc
+        return doc
+      })
+    },
+  },
+  {
+    baseSchemaVersion: 12,
+    targetSchemaVersion: 13,
+    appVersion: '1.6.1',
+    description: 'Corrects daily GRDF data.',
+    releaseNotes: null,
+    docTypes: GRDF_DAY_DOCTYPE,
+    queryOptions: {
+      scope: 'conso',
+      tag: 'day',
+      limit: 1000,
+    },
+    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+      let prevData: DataloadEntity = {
+        id: '',
+        day: 0,
+        hour: 0,
+        load: 0,
+        minute: 0,
+        month: 0,
+        year: 0,
+      }
+      return docs.map(doc => {
+        if (
+          prevData.day === doc.day &&
+          prevData.month === doc.month &&
+          prevData.year === doc.year
+        ) {
+          doc.deleteAction = true
+        }
+        if (doc.price) {
+          delete doc.price
+        }
+        prevData = doc
+        return doc
+      })
+    },
+  },
+  {
+    baseSchemaVersion: 13,
+    targetSchemaVersion: 14,
+    appVersion: '1.6.1',
+    description: 'Remove wrong price for Enedis month',
+    releaseNotes: null,
+    docTypes: ENEDIS_MONTH_DOCTYPE,
+    queryOptions: {
+      scope: 'conso',
+      tag: 'month',
+      limit: 17,
+    },
+    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+      return docs.map(doc => {
+        if (doc.price) {
+          delete doc.price
+        }
+        return doc
+      })
+    },
+  },
+  {
+    baseSchemaVersion: 14,
+    targetSchemaVersion: 15,
+    appVersion: '1.6.1',
+    description: 'Remove wrong price for Enedis year',
+    releaseNotes: null,
+    docTypes: ENEDIS_YEAR_DOCTYPE,
+    queryOptions: {
+      scope: 'conso',
+      tag: 'year',
+      limit: 3,
+    },
+    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+      return docs.map(doc => {
+        if (doc.price) {
+          delete doc.price
+        }
+        return doc
+      })
+    },
+  },
+  {
+    baseSchemaVersion: 15,
+    targetSchemaVersion: 16,
+    appVersion: '1.6.1',
+    description: 'Remove wrong price for GRDF month',
+    releaseNotes: null,
+    docTypes: GRDF_MONTH_DOCTYPE,
+    queryOptions: {
+      scope: 'conso',
+      tag: 'month',
+      limit: 17,
+    },
+    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+      return docs.map(doc => {
+        if (doc.price) {
+          delete doc.price
+        }
+        return doc
+      })
+    },
+  },
+  {
+    baseSchemaVersion: 16,
+    targetSchemaVersion: 17,
+    appVersion: '1.6.1',
+    description: 'Remove wrong price for GRDF year',
+    releaseNotes: null,
+    docTypes: GRDF_YEAR_DOCTYPE,
+    queryOptions: {
+      scope: 'conso',
+      tag: 'year',
+      limit: 3,
+    },
+    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+      return docs.map(doc => {
+        if (doc.price) {
+          delete doc.price
+        }
+        return doc
+      })
+    },
+  },
 ]
diff --git a/src/models/config.model.ts b/src/models/config.model.ts
index ac223c0e093442ccce2be18a3d0194b2ee792bbd..1a20aca95a1aead43e3caa664458385198b2089a 100644
--- a/src/models/config.model.ts
+++ b/src/models/config.model.ts
@@ -12,6 +12,7 @@ export interface FluidConfig {
   fluidTypeId: number
   name: string
   coefficient: number
+  startDate: string
   dataDelayOffset: number
   konnectorConfig: KonnectorConfig
 }
diff --git a/src/models/faq.model.ts b/src/models/faq.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f44da78b3fc8e8f5941080ba65dea384f26a5627
--- /dev/null
+++ b/src/models/faq.model.ts
@@ -0,0 +1,9 @@
+export interface FAQQuestion {
+  summary: string
+  details: JSX.Element
+}
+
+export interface FAQSection {
+  section: string
+  questions: FAQQuestion[]
+}
diff --git a/src/models/index.ts b/src/models/index.ts
index caed855c2f7773265b6d7a9c465a91d84c6834bb..8afa1090ea31fc75f9ae9e356e01b6e3457f1fe4 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -8,7 +8,10 @@ export * from './datachart.model'
 export * from './dataload.model'
 export * from './duel.model'
 export * from './ecogesture.model'
+export * from './exploration.model'
+export * from './faq.model'
 export * from './fluid.model'
+export * from './fluidPrice.model'
 export * from './global.model'
 export * from './indicator.model'
 export * from './konnector.model'
@@ -16,7 +19,6 @@ export * from './modal.model'
 export * from './profile.model'
 export * from './profileType.model'
 export * from './quiz.model'
-export * from './exploration.model'
 export * from './relation.model'
 export * from './analysis.model'
 export * from './timePeriod.model'
diff --git a/src/services/fluidsPrices.service.ts b/src/services/fluidsPrices.service.ts
index 30a8e354f0c7e1f540aaf1f6bb26ae49990ab15c..8e131cdfa17e3894591772d6e128701ddb294ee9 100644
--- a/src/services/fluidsPrices.service.ts
+++ b/src/services/fluidsPrices.service.ts
@@ -3,6 +3,7 @@ import { FLUIDPRICES_DOCTYPE } from 'doctypes'
 import { FluidType } from 'enum/fluid.enum'
 import { DateTime } from 'luxon'
 import { FluidPrice } from 'models'
+import ConfigService from './fluidConfig.service'
 
 export default class FluidPricesService {
   private readonly _client: Client
@@ -43,4 +44,45 @@ export default class FluidPricesService {
     }: QueryResult<FluidPrice[]> = await this._client.query(query)
     return fluidsPrices[0]
   }
+
+  /**
+   * Get current prices for all fluidTypes.
+   * @returns {FluidPrice[]}
+   */
+  public async getAllLastPrices(): Promise<FluidPrice[]> {
+    const query: QueryDefinition = Q(FLUIDPRICES_DOCTYPE)
+      .where({ endDate: { $eq: null } })
+      .limitBy(3)
+
+    const {
+      data: fluidsPrices,
+    }: QueryResult<FluidPrice[]> = await this._client.query(query)
+
+    // If some data is missing, recover it using default config
+    if (fluidsPrices.length !== 3) {
+      const configService = new ConfigService()
+      const fluidConfig = configService.getFluidConfig()
+      const recoveredFluidsPrices: FluidPrice[] = []
+
+      // Getting default fluid price
+      fluidConfig.forEach(config => {
+        recoveredFluidsPrices.push({
+          _id: '0',
+          fluidType: config.fluidTypeId,
+          price: config.coefficient,
+          startDate: config.startDate,
+          endDate: '',
+        })
+      })
+
+      // Replacing default prices if available
+      fluidsPrices.forEach(fluidPrice => {
+        recoveredFluidsPrices[fluidPrice.fluidType] = fluidPrice
+      })
+
+      return recoveredFluidsPrices
+    }
+
+    return fluidsPrices
+  }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b7006ea1542a43d3c0ffe25b5cbd37100b0ddfb7..012d283140428fd1ad391c5f2e709ee1597cb7fa 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -52,6 +52,12 @@
   --waterColorRadialGradient: #{$water-color-radial-gradient};
 }
 
+html {
+  // min-height: calc(100% + env(safe-area-inset-top));
+  // padding: env(safe-area-inset-top) env(safe-area-inset-right)
+  //   env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
 .application {
   @media #{$large-phone} {
     min-height: 100vh;
diff --git a/src/targets/browser/index.ejs b/src/targets/browser/index.ejs
index a7ca033c5a3c099b2218ede57a214a47fc2772d5..41ed7c3d069e0d45ec567d624d886ecdb79c1b90 100644
--- a/src/targets/browser/index.ejs
+++ b/src/targets/browser/index.ejs
@@ -8,7 +8,7 @@
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2">
-    <meta name="theme-color" content="#ffffff">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, viewport-fit=cover">
     <!-- PWA Chrome -->
     <link rel="icon" sizes="192x192" href="/android-chrome-192x192.png">
     <link rel="icon" sizes="512x512" href="/android-chrome-512x512.png">
@@ -17,8 +17,8 @@
     <link rel="apple-touch-startup-image" href="/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-title" content="Ecolyo">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, viewport-fit=cover">
     <% _.forEach(htmlWebpackPlugin.files.css, function(file) { %>
         <link rel="stylesheet" href="<%- file %>">
     <% }); %>
diff --git a/tests/__mocks__/faq.mock.tsx b/tests/__mocks__/faq.mock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..145c90a29efd7d12b2524d96a051d9f6552572dc
--- /dev/null
+++ b/tests/__mocks__/faq.mock.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/no-unescaped-entities */
+import { FAQSection } from 'models'
+import React from 'react'
+
+export const faqData: FAQSection[] = [
+  {
+    section: 'Mes données',
+    questions: [
+      {
+        summary: 'Comment accéder à mes données électricité ?',
+        details: (
+          <div>
+            Rendez-vous dans la partie Options du service et cliquer sur le
+            bouton "Se connecter à l\'électricité". Suivez la procédure (en vous
+            créant un compte Enedis si nécessaire). Une fois votre consentement
+            donné, vos données de consommation seront récupérées.
+          </div>
+        ),
+      },
+      {
+        summary: 'Comment accéder à mes données gaz ?',
+        details: (
+          <div>
+            Rendez-vous dans la partie Options du service et cliquez sur le
+            bouton "Se connecter au gaz". Suivez la procédure (en vous créant un
+            compte GRDF si nécessaire). Une fois votre consentement donné, vos
+            données de consommation seront récupérées.',
+          </div>
+        ),
+      },
+    ],
+  },
+  {
+    section: 'Contenu du service',
+    questions: [
+      {
+        summary:
+          'Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?',
+        details: (
+          <div>
+            <p>
+              Le prix de votre électricité ou de votre gaz dépend de l'offre
+              choisie auprès de votre fournisseur. N’ayant pas accès à cette
+              information, Ecolyo affiche un prix moyen par fluide.
+            </p>
+            <p>Tarifs moyens retenus :</p>
+          </div>
+        ),
+      },
+    ],
+  },
+]
diff --git a/tests/__mocks__/fluidPrice.mock.ts b/tests/__mocks__/fluidPrice.mock.ts
index c1212860ca4d083f8652bd1d560e6abefbd6f200..ad5ebb80648710f7f0ac02739c4533260ed63734 100644
--- a/tests/__mocks__/fluidPrice.mock.ts
+++ b/tests/__mocks__/fluidPrice.mock.ts
@@ -30,3 +30,27 @@ export const fluidPrices: FluidPrice[] = [
     startDate: '2013-08-01T00:00:00.000Z',
   },
 ]
+
+export const allFluidPrices: FluidPrice[] = [
+  {
+    _id: '03045ea1afecc7a86e5443a52e00b07d',
+    endDate: '',
+    fluidType: 0,
+    price: 0.1429,
+    startDate: '2020-08-01T00:00:00.000Z',
+  },
+  {
+    _id: '03045ea1afecc7a86e5443a52e00b07d',
+    endDate: '',
+    fluidType: 1,
+    price: 0.1529,
+    startDate: '2021-01-01T00:00:00.000Z',
+  },
+  {
+    _id: '03045ea1afecc7a86e5443a52e00b07d',
+    endDate: '',
+    fluidType: 2,
+    price: 0.1329,
+    startDate: '2021-10-10T00:00:00.000Z',
+  },
+]
diff --git a/tests/__mocks__/testUtils.ts b/tests/__mocks__/testUtils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fe27298a9e9e930caf3ac30bf4e2f52489aaaa7
--- /dev/null
+++ b/tests/__mocks__/testUtils.ts
@@ -0,0 +1,12 @@
+import { ReactWrapper } from 'enzyme'
+import { act } from 'react-dom/test-utils'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const waitForComponentToPaint = async <TP extends any = {}>(
+  wrapper: ReactWrapper<TP>
+): Promise<void> => {
+  await act(async () => {
+    await new Promise(resolve => setTimeout(resolve, 0))
+    wrapper.update()
+  })
+}