diff --git a/app.config.environment.alpha.js b/app.config.environment.alpha.js
index e0c4b0b3eef2dc34174673b70fb38d0e48f04934..65e8495114766d3cfb68e796f0e39e09bee65a7d 100644
--- a/app.config.environment.alpha.js
+++ b/app.config.environment.alpha.js
@@ -17,8 +17,6 @@ module.exports = {
       __DEVELOPMENT__: false,
       __DEVTOOLS__: false,
       __STACK_ASSETS__: target !== 'mobile',
-      __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'),
-      __PIWIK_SITEID__: 117,
     }),
   ],
   optimization: {
diff --git a/app.config.environment.dev.js b/app.config.environment.dev.js
index 8fdfb95ec375a64914ab9c12b04aae0512ff4636..86282e3bca1a3c7ba9ed26ce2c08b0f1842ca3f3 100644
--- a/app.config.environment.dev.js
+++ b/app.config.environment.dev.js
@@ -20,8 +20,6 @@ const stackProvidedLibsConfig = {
       'process.env.NODE_ENV': JSON.stringify('development'),
       __IS_ALPHA__: true,
       __STACK_ASSETS__: true,
-      __PIWIK_TRACKER_URL__: JSON.stringify('http://localhost:9800/'),
-      __PIWIK_SITEID__: 1,
     }),
   ],
   module: {
diff --git a/app.config.environment.prod.js b/app.config.environment.prod.js
index 7dc15dbcfe681d98d64c73b52327f5c51f27a5f1..9e5401b8d3c62ff9b25fb0316b460c837d9a0452 100644
--- a/app.config.environment.prod.js
+++ b/app.config.environment.prod.js
@@ -17,8 +17,6 @@ module.exports = {
       __DEVELOPMENT__: false,
       __DEVTOOLS__: false,
       __STACK_ASSETS__: target !== 'mobile',
-      __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'),
-      __PIWIK_SITEID__: 118,
     }),
   ],
   optimization: {
diff --git a/docker/docker-compose.matomo.yml b/docker/docker-compose.matomo.yml
deleted file mode 100644
index a0a90254efbabe79f3c8bc443e950f93537fd7e4..0000000000000000000000000000000000000000
--- a/docker/docker-compose.matomo.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-version: '3.8'
-
-services:
-  db:
-    image: mariadb
-    command: --max-allowed-packet=64MB
-    restart: always
-    environment:
-      - MYSQL_ROOT_PASSWORD=root
-      - MYSQL_PASSWORD=password
-      - MYSQL_DATABASE=matomo
-      - MYSQL_USER=matomo
-    volumes:
-      - db:/var/lib/mysql
-
-  app:
-    image: matomo:latest
-    restart: always
-    depends_on:
-      - db
-    environment:
-      - MATOMO_DATABASE_HOST=db
-      - MATOMO_DATABASE_ADAPTER=mysql
-      - MATOMO_DATABASE_TABLES_PREFIX=matomo_
-      - MATOMO_DATABASE_USERNAME=matomo
-      - MATOMO_DATABASE_PASSWORD=password
-      - MATOMO_DATABASE_DBNAME=matomo
-      - PHP_MEMORY_LIMIT=2048M
-    volumes:
-      # - ./config:/var/www/html/config:rw
-      # - ./logs:/var/www/html/logs
-      - matomo:/var/www/html
-    ports:
-      - 9800:80
-
-volumes:
-  db:
-  matomo:
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index 736802cd2e43895ed6c08ca1cf59290f6ea3563c..8442277f410b7c0b37b595374f43322a2aa542e9 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -21,9 +21,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
     }),
   }
 })
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
 
 const mockStore = configureStore([])
 describe('ActionView component', () => {
@@ -37,7 +34,7 @@ describe('ActionView component', () => {
     }
     const store = mockStore({
       ecolyo: {
-        challenge: { currentChallenge: userChallenge },
+        challenge: userChallenge,
         global: { ...globalStateData, fluidTypes: [0, 1, 2] },
         profile: profileData,
         modal: modalStateData,
@@ -48,7 +45,7 @@ describe('ActionView component', () => {
         <ActionView />
       </Provider>
     )
-    expect(wrapper.find(ActionChoose).exists()).toBeTruthy()
+    expect(wrapper.find(ActionChoose).exists())
     expect(wrapper).toMatchSnapshot()
   })
   it('should render ActionDone component', () => {
@@ -61,7 +58,7 @@ describe('ActionView component', () => {
     }
     const store = mockStore({
       ecolyo: {
-        challenge: { currentChallenge: userChallenge },
+        challenge: userChallenge,
         global: { ...globalStateData, fluidTypes: [0, 1, 2] },
         profile: profileData,
         modal: modalStateData,
@@ -72,7 +69,7 @@ describe('ActionView component', () => {
         <ActionView />
       </Provider>
     )
-    expect(wrapper.find(ActionDone).exists()).toBeTruthy()
+    expect(wrapper.find(ActionDone).exists())
   })
   it('should render ActionOnGoing component', () => {
     const userChallenge = {
@@ -84,7 +81,7 @@ describe('ActionView component', () => {
     }
     const store = mockStore({
       ecolyo: {
-        challenge: { currentChallenge: userChallenge },
+        challenge: userChallenge,
         global: { ...globalStateData, fluidTypes: [0, 1, 2] },
         modal: modalStateData,
         profile: profileData,
@@ -95,6 +92,6 @@ describe('ActionView component', () => {
         <ActionView />
       </Provider>
     )
-    expect(wrapper.find(ActionOnGoing).exists()).toBeTruthy()
+    expect(wrapper.find(ActionOnGoing).exists())
   })
 })
diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index e3c5062d544c10835394610a6af00cb96ea3e24b..286f6cf6b1da754e00ebf01abd88085f258e5790 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react'
 import { mount } from 'enzyme'
 import * as reactRedux from 'react-redux'
diff --git a/src/components/App.tsx b/src/components/App.tsx
index d86299f0c29ce3228475fb39f2c26657fc442df2..86d54f5d42de5d53ecbbe39e9a760de279aea935 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect } from 'react'
+import React from 'react'
 import { HashRouter } from 'react-router-dom'
+import { createBrowserHistory } from 'history'
 import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
 import { useSelector } from 'react-redux'
 import { AppStore } from 'store'
@@ -11,30 +12,14 @@ import SplashRoot from 'components/Splash/SplashRoot'
 import SplashScreen from 'components/Splash/SplashScreen'
 import SplashScreenError from 'components/Splash/SplashScreenError'
 import WelcomeModal from 'components/Onboarding/WelcomeModal'
-import MatomoTracker from 'utils/matomoTracker'
-import EnvironmentService from 'services/environment.service'
 
-interface AppProps {
-  tracker: MatomoTracker
-}
+export const history = createBrowserHistory()
 
-export const App = ({ tracker }: AppProps) => {
+export const App = () => {
   const { onboarding, isProfileEcogestureCompleted } = useSelector(
     (state: AppStore) => state.ecolyo.profile
   )
   const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global)
-  const isDev = new EnvironmentService().isDev()
-
-  useEffect(() => {
-    if (tracker && !isDev) {
-      if (termsStatus.accepted) {
-        tracker.connectToHistory()
-      }
-      return () => {
-        tracker.disconnectFromHistory()
-      }
-    }
-  }, [termsStatus.accepted, tracker])
 
   return (
     <HashRouter {...history}>
diff --git a/src/components/Challenge/ChallengeView.spec.tsx b/src/components/Challenge/ChallengeView.spec.tsx
index 1e33a61329085affa7c19b006327cbb235a5dc19..aff70fdae981e3f9fbc59c88497c74ce3c47d6e7 100644
--- a/src/components/Challenge/ChallengeView.spec.tsx
+++ b/src/components/Challenge/ChallengeView.spec.tsx
@@ -1,13 +1,8 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { shallow } from 'enzyme'
 import ChallengeView from 'components/Challenge/ChallengeView'
 import * as reactRedux from 'react-redux'
 import { challengeStateDataFull } from '../../../tests/__mocks__/challengeStateData.mock'
-import {
-  createMockStore,
-  mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
 
 const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
 
@@ -21,28 +16,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
   }
 })
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
-jest.mock('components/Challenge/ChallengeCard', () => 'mock-challengecard')
-
-const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
-
 describe('ChallengeView component', () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let store: any
-  beforeEach(() => {
-    store = createMockStore(mockInitialEcolyoState)
-    useSelectorSpy.mockClear()
-  })
-
   it('should be rendered correctly', () => {
     mockUseSelector.mockReturnValue(challengeStateDataFull)
-    const wrapper = mount(
-      <reactRedux.Provider store={store}>
-        <ChallengeView />
-      </reactRedux.Provider>
-    )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    const component = shallow(<ChallengeView />).getElement()
+    expect(component).toMatchSnapshot()
   })
 })
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 3d17797f4a917add013390c953b6c91c01ebb75e..ee1c09130e36abbe633c586977028ea7a54e1e2f 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -1,1260 +1,953 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChallengeView component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <ChallengeView>
-    <mock-cozybar
-      titleKey="common.title_challenge"
-    />
-    <mock-header
-      desktopTitleKey="common.title_challenge"
-      setHeaderHeight={[Function]}
-    />
-    <mock-content
-      height={0}
+<React.Fragment>
+  <CozyBar
+    titleKey="common.title_challenge"
+  />
+  <Header
+    desktopTitleKey="common.title_challenge"
+    setHeaderHeight={[Function]}
+  />
+  <Content
+    height={0}
+  >
+    <div
+      className="challengeSlider"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseMove={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
     >
       <div
-        className="challengeSlider"
-        onClick={[Function]}
-        onMouseDown={[Function]}
-        onMouseMove={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        className="challenge-container"
+        style={
+          Object {
+            "transform": "translateX(16px)",
+          }
+        }
       >
-        <div
-          className="challenge-container"
-          style={
+        <ChallengeCard
+          cardHeight={384}
+          cardWidth={285}
+          index={0}
+          indexSlider={0}
+          moveToSlide={[Function]}
+          userChallenge={
             Object {
-              "transform": "translateX(-874.2px)",
-            }
-          }
-        >
-          <mock-challengecard
-            cardHeight={384}
-            cardWidth={285}
-            index={0}
-            indexSlider={3}
-            key="0"
-            moveToSlide={[Function]}
-            userChallenge={
-              Object {
-                "action": Object {
-                  "ecogesture": null,
-                  "startDate": null,
-                  "state": 0,
-                },
-                "description": "Description challenge 1",
-                "duel": Object {
-                  "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                  "duration": "P30D",
-                  "fluidTypes": Array [],
-                  "id": "DUEL001",
-                  "startDate": null,
-                  "state": 0,
-                  "threshold": 0,
-                  "title": "Title DUEL001",
-                  "userConsumption": 0,
-                },
-                "endingDate": null,
-                "exploration": Object {
-                  "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                  "date": null,
-                  "description": "Avoir complété son profil",
-                  "ecogesture_id": "",
-                  "fluid_condition": Array [],
-                  "id": "EXPLORATION001",
-                  "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                  "progress": 0,
-                  "state": 0,
-                  "target": 1,
-                  "type": 1,
-                },
-                "id": "CHALLENGE0001",
-                "progress": Object {
-                  "actionProgress": 0,
-                  "explorationProgress": 0,
-                  "quizProgress": 0,
+              "action": Object {
+                "ecogesture": null,
+                "startDate": null,
+                "state": 0,
+              },
+              "description": "Description challenge 1",
+              "duel": Object {
+                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+                "duration": "P30D",
+                "fluidTypes": Array [],
+                "id": "DUEL001",
+                "startDate": null,
+                "state": 0,
+                "threshold": 0,
+                "title": "Title DUEL001",
+                "userConsumption": 0,
+              },
+              "endingDate": null,
+              "exploration": Object {
+                "complementary_description": "Refaire un tour dans son profil si déjà fait",
+                "date": null,
+                "description": "Avoir complété son profil",
+                "ecogesture_id": "",
+                "fluid_condition": Array [],
+                "id": "EXPLORATION001",
+                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+                "progress": 0,
+                "state": 0,
+                "target": 1,
+                "type": 1,
+              },
+              "id": "CHALLENGE0001",
+              "progress": Object {
+                "actionProgress": 0,
+                "explorationProgress": 0,
+                "quizProgress": 0,
+              },
+              "quiz": Object {
+                "customQuestion": Object {
+                  "interval": 20,
+                  "period": Object {},
+                  "questionLabel": "Custom1",
+                  "result": 0,
+                  "singleFluid": false,
+                  "timeStep": 20,
+                  "type": 0,
                 },
-                "quiz": Object {
-                  "customQuestion": Object {
-                    "interval": 20,
-                    "period": Object {},
-                    "questionLabel": "Custom1",
+                "id": "QUIZ001",
+                "questions": Array [
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "86 km",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "78 km",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "56 km",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
                     "result": 0,
-                    "singleFluid": false,
-                    "timeStep": 20,
-                    "type": 0,
+                    "source": "string",
                   },
-                  "id": "QUIZ001",
-                  "questions": Array [
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "86 km",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "78 km",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "56 km",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                      "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 800 habitants.",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 400 habitants.",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 200 habitants.",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "François Mitterrand",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon Ier",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon III",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Aristide Dumont",
-                          "isTrue": true,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                  ],
-                  "result": 0,
-                  "startDate": null,
-                  "state": 0,
-                },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 800 habitants.",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 400 habitants.",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 200 habitants.",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "François Mitterrand",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon Ier",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon III",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Aristide Dumont",
+                        "isTrue": true,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                ],
+                "result": 0,
                 "startDate": null,
-                "state": 4,
-                "success": 2,
-                "target": 15,
-                "title": "Challenge 1",
-              }
+                "state": 0,
+              },
+              "startDate": null,
+              "state": 4,
+              "success": 2,
+              "target": 15,
+              "title": "Challenge 1",
             }
-          />
-          <mock-challengecard
-            cardHeight={384}
-            cardWidth={285}
-            index={1}
-            indexSlider={3}
-            key="1"
-            moveToSlide={[Function]}
-            userChallenge={
-              Object {
-                "action": Object {
-                  "ecogesture": null,
-                  "startDate": null,
-                  "state": 0,
-                },
-                "description": "Description challenge 2",
-                "duel": Object {
-                  "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                  "duration": "P30D",
-                  "fluidTypes": Array [],
-                  "id": "DUEL001",
-                  "startDate": null,
-                  "state": 0,
-                  "threshold": 0,
-                  "title": "Title DUEL001",
-                  "userConsumption": 0,
-                },
-                "endingDate": null,
-                "exploration": Object {
-                  "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                  "date": null,
-                  "description": "Avoir complété son profil",
-                  "ecogesture_id": "",
-                  "fluid_condition": Array [],
-                  "id": "EXPLORATION001",
-                  "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                  "progress": 0,
-                  "state": 0,
-                  "target": 1,
-                  "type": 1,
-                },
-                "id": "CHALLENGE0002",
-                "progress": Object {
-                  "actionProgress": 0,
-                  "explorationProgress": 0,
-                  "quizProgress": 0,
+          }
+        />
+        <ChallengeCard
+          cardHeight={384}
+          cardWidth={285}
+          index={1}
+          indexSlider={0}
+          moveToSlide={[Function]}
+          userChallenge={
+            Object {
+              "action": Object {
+                "ecogesture": null,
+                "startDate": null,
+                "state": 0,
+              },
+              "description": "Description challenge 2",
+              "duel": Object {
+                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+                "duration": "P30D",
+                "fluidTypes": Array [],
+                "id": "DUEL001",
+                "startDate": null,
+                "state": 0,
+                "threshold": 0,
+                "title": "Title DUEL001",
+                "userConsumption": 0,
+              },
+              "endingDate": null,
+              "exploration": Object {
+                "complementary_description": "Refaire un tour dans son profil si déjà fait",
+                "date": null,
+                "description": "Avoir complété son profil",
+                "ecogesture_id": "",
+                "fluid_condition": Array [],
+                "id": "EXPLORATION001",
+                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+                "progress": 0,
+                "state": 0,
+                "target": 1,
+                "type": 1,
+              },
+              "id": "CHALLENGE0002",
+              "progress": Object {
+                "actionProgress": 0,
+                "explorationProgress": 0,
+                "quizProgress": 0,
+              },
+              "quiz": Object {
+                "customQuestion": Object {
+                  "interval": 20,
+                  "period": Object {},
+                  "questionLabel": "Custom1",
+                  "result": 0,
+                  "singleFluid": false,
+                  "timeStep": 20,
+                  "type": 0,
                 },
-                "quiz": Object {
-                  "customQuestion": Object {
-                    "interval": 20,
-                    "period": Object {},
-                    "questionLabel": "Custom1",
+                "id": "QUIZ001",
+                "questions": Array [
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "86 km",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "78 km",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "56 km",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
                     "result": 0,
-                    "singleFluid": false,
-                    "timeStep": 20,
-                    "type": 0,
+                    "source": "string",
                   },
-                  "id": "QUIZ001",
-                  "questions": Array [
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "86 km",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "78 km",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "56 km",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                      "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 800 habitants.",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 400 habitants.",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 200 habitants.",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "François Mitterrand",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon Ier",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon III",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Aristide Dumont",
-                          "isTrue": true,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                  ],
-                  "result": 0,
-                  "startDate": null,
-                  "state": 0,
-                },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 800 habitants.",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 400 habitants.",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 200 habitants.",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "François Mitterrand",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon Ier",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon III",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Aristide Dumont",
+                        "isTrue": true,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                ],
+                "result": 0,
                 "startDate": null,
-                "state": 4,
-                "success": 1,
-                "target": 15,
-                "title": "Challenge 2",
-              }
+                "state": 0,
+              },
+              "startDate": null,
+              "state": 4,
+              "success": 1,
+              "target": 15,
+              "title": "Challenge 2",
             }
-          />
-          <mock-challengecard
-            cardHeight={384}
-            cardWidth={285}
-            index={2}
-            indexSlider={3}
-            key="2"
-            moveToSlide={[Function]}
-            userChallenge={
-              Object {
-                "action": Object {
-                  "ecogesture": null,
-                  "startDate": null,
-                  "state": 0,
-                },
-                "description": "Description challenge 3",
-                "duel": Object {
-                  "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                  "duration": "P30D",
-                  "fluidTypes": Array [],
-                  "id": "DUEL001",
-                  "startDate": null,
-                  "state": 0,
-                  "threshold": 0,
-                  "title": "Title DUEL001",
-                  "userConsumption": 0,
-                },
-                "endingDate": null,
-                "exploration": Object {
-                  "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                  "date": null,
-                  "description": "Avoir complété son profil",
-                  "ecogesture_id": "",
-                  "fluid_condition": Array [],
-                  "id": "EXPLORATION001",
-                  "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                  "progress": 0,
-                  "state": 0,
-                  "target": 1,
-                  "type": 1,
-                },
-                "id": "CHALLENGE0003",
-                "progress": Object {
-                  "actionProgress": 0,
-                  "explorationProgress": 0,
-                  "quizProgress": 0,
+          }
+        />
+        <ChallengeCard
+          cardHeight={384}
+          cardWidth={285}
+          index={2}
+          indexSlider={0}
+          moveToSlide={[Function]}
+          userChallenge={
+            Object {
+              "action": Object {
+                "ecogesture": null,
+                "startDate": null,
+                "state": 0,
+              },
+              "description": "Description challenge 3",
+              "duel": Object {
+                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+                "duration": "P30D",
+                "fluidTypes": Array [],
+                "id": "DUEL001",
+                "startDate": null,
+                "state": 0,
+                "threshold": 0,
+                "title": "Title DUEL001",
+                "userConsumption": 0,
+              },
+              "endingDate": null,
+              "exploration": Object {
+                "complementary_description": "Refaire un tour dans son profil si déjà fait",
+                "date": null,
+                "description": "Avoir complété son profil",
+                "ecogesture_id": "",
+                "fluid_condition": Array [],
+                "id": "EXPLORATION001",
+                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+                "progress": 0,
+                "state": 0,
+                "target": 1,
+                "type": 1,
+              },
+              "id": "CHALLENGE0003",
+              "progress": Object {
+                "actionProgress": 0,
+                "explorationProgress": 0,
+                "quizProgress": 0,
+              },
+              "quiz": Object {
+                "customQuestion": Object {
+                  "interval": 20,
+                  "period": Object {},
+                  "questionLabel": "Custom1",
+                  "result": 0,
+                  "singleFluid": false,
+                  "timeStep": 20,
+                  "type": 0,
                 },
-                "quiz": Object {
-                  "customQuestion": Object {
-                    "interval": 20,
-                    "period": Object {},
-                    "questionLabel": "Custom1",
+                "id": "QUIZ001",
+                "questions": Array [
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "86 km",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "78 km",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "56 km",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
                     "result": 0,
-                    "singleFluid": false,
-                    "timeStep": 20,
-                    "type": 0,
+                    "source": "string",
                   },
-                  "id": "QUIZ001",
-                  "questions": Array [
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "86 km",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "78 km",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "56 km",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                      "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 800 habitants.",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 400 habitants.",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 200 habitants.",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "François Mitterrand",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon Ier",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon III",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Aristide Dumont",
-                          "isTrue": true,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                  ],
-                  "result": 0,
-                  "startDate": null,
-                  "state": 0,
-                },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 800 habitants.",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 400 habitants.",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 200 habitants.",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "François Mitterrand",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon Ier",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon III",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Aristide Dumont",
+                        "isTrue": true,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                ],
+                "result": 0,
                 "startDate": null,
-                "state": 2,
-                "success": 0,
-                "target": 15,
-                "title": "Challenge 3",
-              }
+                "state": 0,
+              },
+              "startDate": null,
+              "state": 2,
+              "success": 0,
+              "target": 15,
+              "title": "Challenge 3",
             }
-          />
-          <mock-challengecard
-            cardHeight={384}
-            cardWidth={285}
-            index={3}
-            indexSlider={3}
-            key="3"
-            moveToSlide={[Function]}
-            userChallenge={
-              Object {
-                "action": Object {
-                  "ecogesture": null,
-                  "startDate": null,
-                  "state": 0,
-                },
-                "description": "Description challenge 4",
-                "duel": Object {
-                  "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                  "duration": "P30D",
-                  "fluidTypes": Array [],
-                  "id": "DUEL001",
-                  "startDate": null,
-                  "state": 0,
-                  "threshold": 0,
-                  "title": "Title DUEL001",
-                  "userConsumption": 0,
-                },
-                "endingDate": null,
-                "exploration": Object {
-                  "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                  "date": null,
-                  "description": "Avoir complété son profil",
-                  "ecogesture_id": "",
-                  "fluid_condition": Array [],
-                  "id": "EXPLORATION001",
-                  "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                  "progress": 0,
-                  "state": 0,
-                  "target": 1,
-                  "type": 1,
-                },
-                "id": "CHALLENGE0004",
-                "progress": Object {
-                  "actionProgress": 0,
-                  "explorationProgress": 0,
-                  "quizProgress": 0,
+          }
+        />
+        <ChallengeCard
+          cardHeight={384}
+          cardWidth={285}
+          index={3}
+          indexSlider={0}
+          moveToSlide={[Function]}
+          userChallenge={
+            Object {
+              "action": Object {
+                "ecogesture": null,
+                "startDate": null,
+                "state": 0,
+              },
+              "description": "Description challenge 4",
+              "duel": Object {
+                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+                "duration": "P30D",
+                "fluidTypes": Array [],
+                "id": "DUEL001",
+                "startDate": null,
+                "state": 0,
+                "threshold": 0,
+                "title": "Title DUEL001",
+                "userConsumption": 0,
+              },
+              "endingDate": null,
+              "exploration": Object {
+                "complementary_description": "Refaire un tour dans son profil si déjà fait",
+                "date": null,
+                "description": "Avoir complété son profil",
+                "ecogesture_id": "",
+                "fluid_condition": Array [],
+                "id": "EXPLORATION001",
+                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+                "progress": 0,
+                "state": 0,
+                "target": 1,
+                "type": 1,
+              },
+              "id": "CHALLENGE0004",
+              "progress": Object {
+                "actionProgress": 0,
+                "explorationProgress": 0,
+                "quizProgress": 0,
+              },
+              "quiz": Object {
+                "customQuestion": Object {
+                  "interval": 20,
+                  "period": Object {},
+                  "questionLabel": "Custom1",
+                  "result": 0,
+                  "singleFluid": false,
+                  "timeStep": 20,
+                  "type": 0,
                 },
-                "quiz": Object {
-                  "customQuestion": Object {
-                    "interval": 20,
-                    "period": Object {},
-                    "questionLabel": "Custom1",
+                "id": "QUIZ001",
+                "questions": Array [
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "86 km",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "78 km",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "56 km",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
                     "result": 0,
-                    "singleFluid": false,
-                    "timeStep": 20,
-                    "type": 0,
+                    "source": "string",
                   },
-                  "id": "QUIZ001",
-                  "questions": Array [
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "86 km",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "78 km",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "56 km",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                      "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 800 habitants.",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 400 habitants.",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 200 habitants.",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "François Mitterrand",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon Ier",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon III",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Aristide Dumont",
-                          "isTrue": true,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                  ],
-                  "result": 0,
-                  "startDate": null,
-                  "state": 0,
-                },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 800 habitants.",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 400 habitants.",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 200 habitants.",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "François Mitterrand",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon Ier",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon III",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Aristide Dumont",
+                        "isTrue": true,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                ],
+                "result": 0,
                 "startDate": null,
-                "state": 1,
-                "success": 0,
-                "target": 15,
-                "title": "Challenge 4",
-              }
+                "state": 0,
+              },
+              "startDate": null,
+              "state": 1,
+              "success": 0,
+              "target": 15,
+              "title": "Challenge 4",
             }
-          />
-          <mock-challengecard
-            cardHeight={384}
-            cardWidth={285}
-            index={4}
-            indexSlider={3}
-            key="4"
-            moveToSlide={[Function]}
-            userChallenge={
-              Object {
-                "action": Object {
-                  "ecogesture": null,
-                  "startDate": null,
-                  "state": 0,
-                },
-                "description": "Description challenge 5",
-                "duel": Object {
-                  "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                  "duration": "P30D",
-                  "fluidTypes": Array [],
-                  "id": "DUEL001",
-                  "startDate": null,
-                  "state": 0,
-                  "threshold": 0,
-                  "title": "Title DUEL001",
-                  "userConsumption": 0,
-                },
-                "endingDate": null,
-                "exploration": Object {
-                  "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                  "date": null,
-                  "description": "Avoir complété son profil",
-                  "ecogesture_id": "",
-                  "fluid_condition": Array [],
-                  "id": "EXPLORATION001",
-                  "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                  "progress": 0,
-                  "state": 0,
-                  "target": 1,
-                  "type": 1,
-                },
-                "id": "CHALLENGE0005",
-                "progress": Object {
-                  "actionProgress": 0,
-                  "explorationProgress": 0,
-                  "quizProgress": 0,
+          }
+        />
+        <ChallengeCard
+          cardHeight={384}
+          cardWidth={285}
+          index={4}
+          indexSlider={0}
+          moveToSlide={[Function]}
+          userChallenge={
+            Object {
+              "action": Object {
+                "ecogesture": null,
+                "startDate": null,
+                "state": 0,
+              },
+              "description": "Description challenge 5",
+              "duel": Object {
+                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+                "duration": "P30D",
+                "fluidTypes": Array [],
+                "id": "DUEL001",
+                "startDate": null,
+                "state": 0,
+                "threshold": 0,
+                "title": "Title DUEL001",
+                "userConsumption": 0,
+              },
+              "endingDate": null,
+              "exploration": Object {
+                "complementary_description": "Refaire un tour dans son profil si déjà fait",
+                "date": null,
+                "description": "Avoir complété son profil",
+                "ecogesture_id": "",
+                "fluid_condition": Array [],
+                "id": "EXPLORATION001",
+                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+                "progress": 0,
+                "state": 0,
+                "target": 1,
+                "type": 1,
+              },
+              "id": "CHALLENGE0005",
+              "progress": Object {
+                "actionProgress": 0,
+                "explorationProgress": 0,
+                "quizProgress": 0,
+              },
+              "quiz": Object {
+                "customQuestion": Object {
+                  "interval": 20,
+                  "period": Object {},
+                  "questionLabel": "Custom1",
+                  "result": 0,
+                  "singleFluid": false,
+                  "timeStep": 20,
+                  "type": 0,
                 },
-                "quiz": Object {
-                  "customQuestion": Object {
-                    "interval": 20,
-                    "period": Object {},
-                    "questionLabel": "Custom1",
+                "id": "QUIZ001",
+                "questions": Array [
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "86 km",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "78 km",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "56 km",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
                     "result": 0,
-                    "singleFluid": false,
-                    "timeStep": 20,
-                    "type": 0,
+                    "source": "string",
                   },
-                  "id": "QUIZ001",
-                  "questions": Array [
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "86 km",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "78 km",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "56 km",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                      "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 800 habitants.",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 400 habitants.",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 200 habitants.",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "François Mitterrand",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon Ier",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon III",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Aristide Dumont",
-                          "isTrue": true,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                  ],
-                  "result": 0,
-                  "startDate": null,
-                  "state": 0,
-                },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 800 habitants.",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 400 habitants.",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 200 habitants.",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "François Mitterrand",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon Ier",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon III",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Aristide Dumont",
+                        "isTrue": true,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                ],
+                "result": 0,
                 "startDate": null,
                 "state": 0,
-                "success": 0,
-                "target": 15,
-                "title": "Challenge 5",
-              }
+              },
+              "startDate": null,
+              "state": 0,
+              "success": 0,
+              "target": 15,
+              "title": "Challenge 5",
             }
-          />
-          <mock-challengecard
-            cardHeight={384}
-            cardWidth={285}
-            index={5}
-            indexSlider={3}
-            key="5"
-            moveToSlide={[Function]}
-            userChallenge={
-              Object {
-                "action": Object {
-                  "ecogesture": null,
-                  "startDate": null,
-                  "state": 0,
-                },
-                "description": "Description challenge 6",
-                "duel": Object {
-                  "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                  "duration": "P30D",
-                  "fluidTypes": Array [],
-                  "id": "DUEL001",
-                  "startDate": null,
-                  "state": 0,
-                  "threshold": 0,
-                  "title": "Title DUEL001",
-                  "userConsumption": 0,
-                },
-                "endingDate": null,
-                "exploration": Object {
-                  "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                  "date": null,
-                  "description": "Avoir complété son profil",
-                  "ecogesture_id": "",
-                  "fluid_condition": Array [],
-                  "id": "EXPLORATION001",
-                  "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                  "progress": 0,
-                  "state": 0,
-                  "target": 1,
-                  "type": 1,
-                },
-                "id": "CHALLENGE0006",
-                "progress": Object {
-                  "actionProgress": 0,
-                  "explorationProgress": 0,
-                  "quizProgress": 0,
+          }
+        />
+        <ChallengeCard
+          cardHeight={384}
+          cardWidth={285}
+          index={5}
+          indexSlider={0}
+          moveToSlide={[Function]}
+          userChallenge={
+            Object {
+              "action": Object {
+                "ecogesture": null,
+                "startDate": null,
+                "state": 0,
+              },
+              "description": "Description challenge 6",
+              "duel": Object {
+                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
+                "duration": "P30D",
+                "fluidTypes": Array [],
+                "id": "DUEL001",
+                "startDate": null,
+                "state": 0,
+                "threshold": 0,
+                "title": "Title DUEL001",
+                "userConsumption": 0,
+              },
+              "endingDate": null,
+              "exploration": Object {
+                "complementary_description": "Refaire un tour dans son profil si déjà fait",
+                "date": null,
+                "description": "Avoir complété son profil",
+                "ecogesture_id": "",
+                "fluid_condition": Array [],
+                "id": "EXPLORATION001",
+                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
+                "progress": 0,
+                "state": 0,
+                "target": 1,
+                "type": 1,
+              },
+              "id": "CHALLENGE0006",
+              "progress": Object {
+                "actionProgress": 0,
+                "explorationProgress": 0,
+                "quizProgress": 0,
+              },
+              "quiz": Object {
+                "customQuestion": Object {
+                  "interval": 20,
+                  "period": Object {},
+                  "questionLabel": "Custom1",
+                  "result": 0,
+                  "singleFluid": false,
+                  "timeStep": 20,
+                  "type": 0,
                 },
-                "quiz": Object {
-                  "customQuestion": Object {
-                    "interval": 20,
-                    "period": Object {},
-                    "questionLabel": "Custom1",
+                "id": "QUIZ001",
+                "questions": Array [
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "86 km",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "78 km",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "56 km",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
+                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
                     "result": 0,
-                    "singleFluid": false,
-                    "timeStep": 20,
-                    "type": 0,
+                    "source": "string",
                   },
-                  "id": "QUIZ001",
-                  "questions": Array [
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "86 km",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "78 km",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "56 km",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                      "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 800 habitants.",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 400 habitants.",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "1 point d’eau public pour 200 habitants.",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "François Mitterrand",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon Ier",
-                          "isTrue": true,
-                        },
-                        Object {
-                          "answerLabel": "Napoléon III",
-                          "isTrue": false,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                    Object {
-                      "answers": Array [
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "string",
-                          "isTrue": false,
-                        },
-                        Object {
-                          "answerLabel": "Aristide Dumont",
-                          "isTrue": true,
-                        },
-                      ],
-                      "explanation": "string",
-                      "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                      "result": 0,
-                      "source": "string",
-                    },
-                  ],
-                  "result": 0,
-                  "startDate": null,
-                  "state": 0,
-                },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 800 habitants.",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 400 habitants.",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "1 point d’eau public pour 200 habitants.",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "François Mitterrand",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon Ier",
+                        "isTrue": true,
+                      },
+                      Object {
+                        "answerLabel": "Napoléon III",
+                        "isTrue": false,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                  Object {
+                    "answers": Array [
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "string",
+                        "isTrue": false,
+                      },
+                      Object {
+                        "answerLabel": "Aristide Dumont",
+                        "isTrue": true,
+                      },
+                    ],
+                    "explanation": "string",
+                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+                    "result": 0,
+                    "source": "string",
+                  },
+                ],
+                "result": 0,
                 "startDate": null,
                 "state": 0,
-                "success": 0,
-                "target": 15,
-                "title": "Challenge 6",
-              }
+              },
+              "startDate": null,
+              "state": 0,
+              "success": 0,
+              "target": 15,
+              "title": "Challenge 6",
             }
-          />
-        </div>
-      </div>
-      <div
-        className="sliderButtons"
-      >
-        <StyledIconButton
-          aria-label="challenge.accessibility.button_slider_previous"
-          icon="test-file-stub"
-          onClick={[Function]}
-          size={16}
-        >
-          <WithStyles(WithStyles(ForwardRef(IconButton)))
-            aria-label="challenge.accessibility.button_slider_previous"
-            onClick={[Function]}
-          >
-            <WithStyles(ForwardRef(IconButton))
-              aria-label="challenge.accessibility.button_slider_previous"
-              classes={
-                Object {
-                  "root": "WithStyles(ForwardRef(IconButton))-root-1",
-                }
-              }
-              onClick={[Function]}
-            >
-              <ForwardRef(IconButton)
-                aria-label="challenge.accessibility.button_slider_previous"
-                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 WithStyles(ForwardRef(IconButton))-root-1",
-                    "sizeSmall": "MuiIconButton-sizeSmall",
-                  }
-                }
-                onClick={[Function]}
-              >
-                <WithStyles(ForwardRef(ButtonBase))
-                  aria-label="challenge.accessibility.button_slider_previous"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <ForwardRef(ButtonBase)
-                    aria-label="challenge.accessibility.button_slider_previous"
-                    centerRipple={true}
-                    className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "focusVisible": "Mui-focusVisible",
-                        "root": "MuiButtonBase-root",
-                      }
-                    }
-                    disabled={false}
-                    focusRipple={true}
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="challenge.accessibility.button_slider_previous"
-                      className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
-                      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"
-                      >
-                        <StyledIcon
-                          icon="test-file-stub"
-                          size={16}
-                        >
-                          <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>
-                    </button>
-                  </ForwardRef(ButtonBase)>
-                </WithStyles(ForwardRef(ButtonBase))>
-              </ForwardRef(IconButton)>
-            </WithStyles(ForwardRef(IconButton))>
-          </WithStyles(WithStyles(ForwardRef(IconButton)))>
-        </StyledIconButton>
-        <StyledIconButton
-          aria-label="challenge.accessibility.button_slider_next"
-          icon="test-file-stub"
-          onClick={[Function]}
-          size={16}
-        >
-          <WithStyles(WithStyles(ForwardRef(IconButton)))
-            aria-label="challenge.accessibility.button_slider_next"
-            onClick={[Function]}
-          >
-            <WithStyles(ForwardRef(IconButton))
-              aria-label="challenge.accessibility.button_slider_next"
-              classes={
-                Object {
-                  "root": "WithStyles(ForwardRef(IconButton))-root-1",
-                }
-              }
-              onClick={[Function]}
-            >
-              <ForwardRef(IconButton)
-                aria-label="challenge.accessibility.button_slider_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 WithStyles(ForwardRef(IconButton))-root-1",
-                    "sizeSmall": "MuiIconButton-sizeSmall",
-                  }
-                }
-                onClick={[Function]}
-              >
-                <WithStyles(ForwardRef(ButtonBase))
-                  aria-label="challenge.accessibility.button_slider_next"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <ForwardRef(ButtonBase)
-                    aria-label="challenge.accessibility.button_slider_next"
-                    centerRipple={true}
-                    className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "focusVisible": "Mui-focusVisible",
-                        "root": "MuiButtonBase-root",
-                      }
-                    }
-                    disabled={false}
-                    focusRipple={true}
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="challenge.accessibility.button_slider_next"
-                      className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
-                      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"
-                      >
-                        <StyledIcon
-                          icon="test-file-stub"
-                          size={16}
-                        >
-                          <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>
-                    </button>
-                  </ForwardRef(ButtonBase)>
-                </WithStyles(ForwardRef(ButtonBase))>
-              </ForwardRef(IconButton)>
-            </WithStyles(ForwardRef(IconButton))>
-          </WithStyles(WithStyles(ForwardRef(IconButton)))>
-        </StyledIconButton>
+          }
+        />
       </div>
-    </mock-content>
-  </ChallengeView>
-</Provider>
+    </div>
+    <div
+      className="sliderButtons"
+    >
+      <StyledIconButton
+        aria-label="challenge.accessibility.button_slider_previous"
+        icon="test-file-stub"
+        onClick={[Function]}
+        size={16}
+      />
+      <StyledIconButton
+        aria-label="challenge.accessibility.button_slider_next"
+        icon="test-file-stub"
+        onClick={[Function]}
+        size={16}
+      />
+    </div>
+  </Content>
+</React.Fragment>
 `;
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 0df5633eb4973f5c81f24fb70dbecdf68241ab84..6e141e27364bfbdc739d623e8d636136fe291fef 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect } from 'react'
 import './content.scss'
+import { history } from 'components/App'
 import { useSelector, useDispatch } from 'react-redux'
 import { AppStore } from 'store'
 import { changeScreenType } from 'store/global/global.actions'
 import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
 import { ScreenType } from 'enum/screen.enum'
 import FeedbackModal from 'components/Feedback/FeedbackModal'
-import { useHistory } from 'react-router-dom'
+
 interface ContentProps {
   children?: React.ReactNode
   height?: number
@@ -19,7 +20,6 @@ const Content: React.FC<ContentProps> = ({
   background = 'inherit',
 }: ContentProps) => {
   const dispatch = useDispatch()
-  const history = useHistory()
   const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
   const { isFeedbacksOpen } = useSelector(
     (state: AppStore) => state.ecolyo.modal
@@ -38,10 +38,10 @@ const Content: React.FC<ContentProps> = ({
   /**
    * Handle Desktop scroll
    */
-  const handleWindowScroll = useCallback(() => {
+  const handleWindowScroll = () => {
     app && app.scrollTo(0, 0)
     window.scrollTo(0, 0)
-  }, [app])
+  }
 
   // Set listners for scroll
   useEffect(() => {
@@ -50,7 +50,7 @@ const Content: React.FC<ContentProps> = ({
       // remove listner subscription
       listner()
     }
-  }, [handleWindowScroll, history])
+  }, [])
 
   useEffect(() => {
     function handleResize() {
diff --git a/src/components/Duel/DuelView.spec.tsx b/src/components/Duel/DuelView.spec.tsx
index f1fa4c7f1e9cb152f785a4f9ad7ed057a1b5fce6..5d6eece3cf01f26b9ecca538b2eec92301fc5c1f 100644
--- a/src/components/Duel/DuelView.spec.tsx
+++ b/src/components/Duel/DuelView.spec.tsx
@@ -10,10 +10,6 @@ import DuelUnlocked from './DuelUnlocked'
 import DuelOngoing from './DuelOngoing'
 import { UserDuelState } from 'enum/userDuel.enum'
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
-
 const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
 
 describe('DuelView component', () => {
diff --git a/src/components/Ecogesture/EcogestureView.spec.tsx b/src/components/Ecogesture/EcogestureView.spec.tsx
index cc3aa53c2f1d236f4b98e0b595046c4f2fa0c2e5..0c7ab368b83f4f492036b88c08246bc8fe91195f 100644
--- a/src/components/Ecogesture/EcogestureView.spec.tsx
+++ b/src/components/Ecogesture/EcogestureView.spec.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react'
 import { mount } from 'enzyme'
 import { Provider } from 'react-redux'
diff --git a/src/components/Exploration/ExplorationView.spec.tsx b/src/components/Exploration/ExplorationView.spec.tsx
index af8c18175b1be1c10018d36a4e447df74aaddaf1..afc90e3104495de4f9e48c1526640ed962d4b717 100644
--- a/src/components/Exploration/ExplorationView.spec.tsx
+++ b/src/components/Exploration/ExplorationView.spec.tsx
@@ -8,39 +8,19 @@ import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.
 import ExplorationFinished from './ExplorationFinished'
 import ExplorationError from './ExplorationError'
 import ExplorationOngoing from './ExplorationOngoing'
-import { UserExplorationState } from 'enum/userExploration.enum'
-
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
 
 const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
 
 describe('ExplorationView', () => {
-  it('should be rendered with ExplorationError component when unknown exploration state', () => {
-    const updatedUserChallenge = {
-      ...userChallengeData[0],
-      exploration: {
-        ...userChallengeData[0].exploration,
-        state: 99,
-      },
-    }
-    const updatedChallengeState = {
-      ...challengeStateData,
-      currentChallenge: updatedUserChallenge,
-    }
-    mockUseSelector.mockReturnValue(updatedChallengeState)
+  it('should be rendered with ExplorationView component when no exploration state', () => {
+    mockUseSelector.mockReturnValue(challengeStateData)
     const wrapper = shallow(<ExplorationView />)
-    expect(wrapper.find(ExplorationError).exists()).toBeTruthy()
+    expect(wrapper.find(ExplorationError).exists())
   })
-
-  it('should be rendered with ExplorationOngoing component when exploration state = unlocked', () => {
+  it('should be rendered with ExplorationView component when exploration state = unlocked', () => {
     const updatedUserChallenge = {
       ...userChallengeData[0],
-      exploration: {
-        ...userChallengeData[0].exploration,
-        state: UserExplorationState.UNLOCKED,
-      },
+      quiz: { ...userChallengeData[0].quiz, state: UserQuizState.UNLOCKED },
     }
     const updatedChallengeState = {
       ...challengeStateData,
@@ -48,16 +28,12 @@ describe('ExplorationView', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<ExplorationView />)
-    expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy()
+    expect(wrapper.find(ExplorationOngoing).exists())
   })
-
-  it('should be rendered with ExplorationOngoing component when exploration state = ongoing', () => {
+  it('should be rendered with ExplorationView component when exploration state = ongoing', () => {
     const updatedUserChallenge = {
       ...userChallengeData[0],
-      exploration: {
-        ...userChallengeData[0].exploration,
-        state: UserExplorationState.ONGOING,
-      },
+      quiz: { ...userChallengeData[0].quiz, state: UserQuizState.ONGOING },
     }
     const updatedChallengeState = {
       ...challengeStateData,
@@ -65,16 +41,12 @@ describe('ExplorationView', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<ExplorationView />)
-    expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy()
+    expect(wrapper.find(ExplorationOngoing).exists())
   })
-
-  it('should be rendered with ExplorationFinished component when exploration state = Done', () => {
+  it('should be rendered with ExplorationView component when exploration state = Done', () => {
     const updatedUserChallenge = {
       ...userChallengeData[0],
-      exploration: {
-        ...userChallengeData[0].exploration,
-        state: UserExplorationState.DONE,
-      },
+      quiz: { ...userChallengeData[0].quiz, state: UserQuizState.DONE },
     }
     const updatedChallengeState = {
       ...challengeStateData,
@@ -82,6 +54,6 @@ describe('ExplorationView', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<ExplorationView />)
-    expect(wrapper.find(ExplorationFinished).exists()).toBeTruthy()
+    expect(wrapper.find(ExplorationFinished).exists())
   })
 })
diff --git a/src/components/FAQ/FAQView.spec.tsx b/src/components/FAQ/FAQView.spec.tsx
index 74f74ef60abcb520e3ff5571e0c85389b725583b..0cf009bf050a365e30a9e57b179ffbe328304f2f 100644
--- a/src/components/FAQ/FAQView.spec.tsx
+++ b/src/components/FAQ/FAQView.spec.tsx
@@ -11,9 +11,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
     }),
   }
 })
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
 
 describe('FAQView component', () => {
   it('should render only the parent component', () => {
diff --git a/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap
index 285ef8a29c5ce9475e1167d5d092bfd17c0099e4..d39d3478bcca7a209cdf08cfc7eb3e8ee35366f1 100644
--- a/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap
+++ b/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap
@@ -1,20 +1,20 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FAQView component should render only the parent component 1`] = `
-<React.Fragment>
-  <mock-cozybar
-    displayBackArrow={true}
-    titleKey="common.title_faq"
-  />
-  <mock-header
-    desktopTitleKey="common.title_faq"
-    displayBackArrow={true}
-    setHeaderHeight={[Function]}
-  />
-  <mock-content
-    height={0}
-  >
-    <FAQContent />
-  </mock-content>
-</React.Fragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAQView component should render only the parent component 1`] = `
+<React.Fragment>
+  <CozyBar
+    displayBackArrow={true}
+    titleKey="common.title_faq"
+  />
+  <Header
+    desktopTitleKey="common.title_faq"
+    displayBackArrow={true}
+    setHeaderHeight={[Function]}
+  />
+  <Content
+    height={0}
+  >
+    <FAQContent />
+  </Content>
+</React.Fragment>
+`;
diff --git a/src/components/GCU/GCUView.spec.tsx b/src/components/GCU/GCUView.spec.tsx
index 6ede9dbdc54199016cf3717f459440d15105735f..809feee5f8f215e804951195b91b10e2448ca2a3 100644
--- a/src/components/GCU/GCUView.spec.tsx
+++ b/src/components/GCU/GCUView.spec.tsx
@@ -2,10 +2,6 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import GCUView from 'components/GCU/GCUView'
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
-
 describe('GCUView component', () => {
   it('should be rendered correctly', () => {
     const component = shallow(<GCUView />).getElement()
diff --git a/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap
index bcc93b8a7020797f0037ffa7d0db41ef8be7f3e6..33e490ab2cee7cf73924e66f7e9dfaed67e42d16 100644
--- a/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`GCUView component should be rendered correctly 1`] = `
 <React.Fragment>
-  <mock-cozybar
+  <CozyBar
     displayBackArrow={true}
     titleKey="common.title_gcu"
   />
-  <mock-header
+  <Header
     desktopTitleKey="common.title_gcu"
     displayBackArrow={true}
     setHeaderHeight={[Function]}
   />
-  <mock-content
+  <Content
     height={0}
   >
     <GCUContent />
-  </mock-content>
+  </Content>
 </React.Fragment>
 `;
diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx
index 1692736e7d99cba2e99ac6a3701b00b80cf215bf..a272d2bf25de666933374873ca1bbaec1ffd4698 100644
--- a/src/components/Home/ConsumptionView.spec.tsx
+++ b/src/components/Home/ConsumptionView.spec.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react'
 import { mount } from 'enzyme'
 import { Provider } from 'react-redux'
@@ -11,8 +12,6 @@ import * as chartActions from 'store/chart/chart.actions'
 import { FluidState, FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'enum/timeStep.enum'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import FluidButtons from 'components/Home/FluidButtons'
-import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
 import ConsumptionView from './ConsumptionView'
 import { FluidStatus } from 'models'
 import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock'
@@ -78,7 +77,6 @@ describe('ConsumptionView component', () => {
       loading: false,
       fluidStatus: mockFluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -102,7 +100,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: mockFluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -121,7 +118,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: mockInitialEcolyoState.global.fluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     mount(
       <Provider store={store}>
@@ -131,14 +127,12 @@ describe('ConsumptionView component', () => {
     expect(setCurrentTimeStepSpy).toBeCalledTimes(1)
     expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
   })
-
   it('should render konnector list when no fluid is connected', () => {
     useSelectorSpy.mockReturnValue({
       currentTimeStep: TimeStep.WEEK,
       loading: true,
       fluidStatus: mockInitialEcolyoState.global.fluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -147,7 +141,6 @@ describe('ConsumptionView component', () => {
     )
     expect(wrapper.find('mock-consumptiondetails').exists()).toBeTruthy()
   })
-
   it('should render mutlifluid consumption if at least one fluid is connected', () => {
     const updatedStatus: FluidStatus[] =
       mockInitialEcolyoState.global.fluidStatus
@@ -158,7 +151,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: updatedStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -167,7 +159,6 @@ describe('ConsumptionView component', () => {
     )
     expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
   })
-
   it('should render Electricity when elec is connected', () => {
     const updatedStatus: FluidStatus[] =
       mockInitialEcolyoState.global.fluidStatus
@@ -177,7 +168,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: updatedStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
diff --git a/src/components/LegalNotice/LegalNoticeView.spec.tsx b/src/components/LegalNotice/LegalNoticeView.spec.tsx
index 2c3c35247f8254d480c68843e29cc04757bb8d5e..d63efac8a14437c8c49ad0e10b4cd91f33940459 100644
--- a/src/components/LegalNotice/LegalNoticeView.spec.tsx
+++ b/src/components/LegalNotice/LegalNoticeView.spec.tsx
@@ -2,10 +2,6 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import LegalNoticeView from 'components/LegalNotice/LegalNoticeView'
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
-
 describe('LegalNoticeView component', () => {
   it('should be rendered correctly', () => {
     const component = shallow(<LegalNoticeView />).getElement()
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
index 52b42634ccd99ef5cc0458c03738dcb536858289..50fb84232368727f90e205ec6ade27e17ca50ca2 100644
--- a/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`LegalNoticeView component should be rendered correctly 1`] = `
 <React.Fragment>
-  <mock-cozybar
+  <CozyBar
     displayBackArrow={true}
     titleKey="common.title_legal_notice"
   />
-  <mock-header
+  <Header
     desktopTitleKey="common.title_legal_notice"
     displayBackArrow={true}
     setHeaderHeight={[Function]}
   />
-  <mock-content
+  <Content
     height={0}
   >
     <LegalNoticeContent />
-  </mock-content>
+  </Content>
 </React.Fragment>
 `;
diff --git a/src/components/Options/OptionsView.spec.tsx b/src/components/Options/OptionsView.spec.tsx
index 0f2f73c8d8ff3cec0c7882d4425683ba66266c7e..a1fc5688d7e559de5cd87cf117d7ac545217cb88 100644
--- a/src/components/Options/OptionsView.spec.tsx
+++ b/src/components/Options/OptionsView.spec.tsx
@@ -2,12 +2,9 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import OptionsView from 'components/Options/OptionsView'
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
 jest.mock(
   'components/Konnector/KonnectorViewerList',
-  () => 'mock-konnectorviewerlist'
+  () => 'KonnectorViewerList'
 )
 
 describe('OptionsView component', () => {
diff --git a/src/components/Options/UnSubscribe.spec.tsx b/src/components/Options/UnSubscribe.spec.tsx
index bd7b90d4697e2b2ef304a4aa301fd30d4544b1a1..e77f60d6a8a88b94a347005ed2aaf50a70ac364b 100644
--- a/src/components/Options/UnSubscribe.spec.tsx
+++ b/src/components/Options/UnSubscribe.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import { Provider } from 'react-redux'
 import {
   createMockStore,
@@ -19,9 +18,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
     }),
   }
 })
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
 
 const mockUpdateProfile = jest.fn()
 jest.mock('services/profile.service', () => {
@@ -31,6 +27,7 @@ jest.mock('services/profile.service', () => {
     }
   })
 })
+// const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
 const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
 
 describe('UnSubscribe component', () => {
@@ -46,8 +43,8 @@ describe('UnSubscribe component', () => {
       <Provider store={store}>
         <UnSubscribe />
       </Provider>
-    )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    ).getElement()
+    expect(wrapper).toMatchSnapshot()
   })
 
   it('should click on button and deactivate report', () => {
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 56c7180ee853f5ef268f8a29313d2267324967a9..a77207e38365d2469fe2a4384dff0645f4ad9872 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`OptionsView component should be rendered correctly 1`] = `
 <React.Fragment>
-  <mock-cozybar
+  <CozyBar
     titleKey="common.title_options"
   />
-  <mock-header
+  <Header
     desktopTitleKey="common.title_options"
     setHeaderHeight={[Function]}
   />
-  <mock-content
+  <Content
     height={0}
   >
     <ProfileTypeOptions />
@@ -26,6 +26,6 @@ exports[`OptionsView component should be rendered correctly 1`] = `
       />
     </div>
     <Version />
-  </mock-content>
+  </Content>
 </React.Fragment>
 `;
diff --git a/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap b/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap
index 850bd82974778a1d842aeabab509cb128275115f..fc7a7ac6793887011529c6731c5460c3afba29f7 100644
--- a/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap
@@ -13,202 +13,6 @@ exports[`UnSubscribe component should be rendered correctly 1`] = `
     }
   }
 >
-  <UnSubscribe>
-    <mock-cozybar
-      titleKey="common.title_analysis"
-    />
-    <mock-header
-      desktopTitleKey="common.title_analysis"
-      setHeaderHeight={[Function]}
-    />
-    <mock-content
-      height={0}
-    >
-      <div
-        className="unsubscribe-container"
-      >
-        <StyledIcon
-          className="profile-icon"
-          icon="test-file-stub"
-          size={250}
-        >
-          <Icon
-            aria-hidden={true}
-            className="profile-icon"
-            icon="test-file-stub"
-            size={250}
-            spin={false}
-          >
-            <Component
-              aria-hidden={true}
-              className="profile-icon styles__icon___23x3R"
-              height={250}
-              style={Object {}}
-              width={250}
-            >
-              <svg
-                aria-hidden={true}
-                className="profile-icon styles__icon___23x3R"
-                height={250}
-                style={Object {}}
-                width={250}
-              >
-                <use
-                  xlinkHref="#test-file-stub"
-                />
-              </svg>
-            </Component>
-          </Icon>
-        </StyledIcon>
-        <div
-          className="text-20-bold head"
-        >
-          unsubscribe.title
-        </div>
-        <div
-          className="text-16-normal question"
-        >
-          unsubscribe.content
-        </div>
-        <WithStyles(ForwardRef(Button))
-          aria-label="unsubscribe.button_accessibility"
-          classes={
-            Object {
-              "label": "text-18-bold",
-              "root": "btn-highlight",
-            }
-          }
-          onClick={[Function]}
-          type="submit"
-          variant="contained"
-        >
-          <ForwardRef(Button)
-            aria-label="unsubscribe.button_accessibility"
-            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-18-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]}
-            type="submit"
-            variant="contained"
-          >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="unsubscribe.button_accessibility"
-              className="MuiButton-root btn-highlight MuiButton-contained"
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="submit"
-            >
-              <ForwardRef(ButtonBase)
-                aria-label="unsubscribe.button_accessibility"
-                className="MuiButton-root btn-highlight MuiButton-contained"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={false}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="submit"
-              >
-                <button
-                  aria-label="unsubscribe.button_accessibility"
-                  className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained"
-                  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="submit"
-                >
-                  <span
-                    className="MuiButton-label text-18-bold"
-                  >
-                    unsubscribe.button_text
-                  </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))>
-      </div>
-    </mock-content>
-  </UnSubscribe>
+  <UnSubscribe />
 </Provider>
 `;
diff --git a/src/components/ProfileType/ProfileTypeView.spec.tsx b/src/components/ProfileType/ProfileTypeView.spec.tsx
index 8c3385e1fa77235043a1e3834d89ff02ee0c2d4e..8bc1460237445aa465f15481260e1b57c212fe8f 100644
--- a/src/components/ProfileType/ProfileTypeView.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeView.spec.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { mount } from 'enzyme'
 import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
 import {
   createMockStore,
   mockInitialEcolyoState,
@@ -17,10 +20,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
   }
 })
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
-
 describe('ProfileTypeView component', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let store: any
@@ -34,9 +33,8 @@ describe('ProfileTypeView component', () => {
         <ProfileTypeView />
       </Provider>
     )
-    expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
-    expect(wrapper.find('mock-header').exists()).toBeTruthy()
-    expect(wrapper.find('mock-content').exists()).toBeTruthy()
-    expect(wrapper.find('.profile-type-container').exists()).toBeTruthy()
+    expect(wrapper.find(CozyBar)).toBeTruthy()
+    expect(wrapper.find(Header)).toBeTruthy()
+    expect(wrapper.find(Content)).toBeTruthy()
   })
 })
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index bf8c1ec0d19831405aaf244349048b2f10fcf70f..40bfbdef84d4997c2daa6d9836fd305039685c3c 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -16,11 +16,11 @@ import {
   IndividualOrCollective,
   OutsideFacingWalls,
   ProfileTypeFormType,
-  ProfileTypeStepForm,
   ThreeChoicesAnswer,
   WarmingType,
 } from 'enum/profileType.enum'
 import { FluidType } from 'enum/fluid.enum'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
 import ProfileTypeFormMultiChoice from 'components/ProfileType/ProfileTypeFormMultiChoice'
 import ProfileTypeFormNumber from 'components/ProfileType/ProfileTypeFormNumber'
 import ProfileTypeFormNumberSelection from 'components/ProfileType/ProfileTypeFormNumberSelection'
diff --git a/src/components/Quiz/QuizView.spec.tsx b/src/components/Quiz/QuizView.spec.tsx
index fec5d9281ee4e4946d4f495562293e9b79611645..788a3fe499b68a9c211c1af83ea4a0db598ee6f2 100644
--- a/src/components/Quiz/QuizView.spec.tsx
+++ b/src/components/Quiz/QuizView.spec.tsx
@@ -9,9 +9,6 @@ import QuizBegin from './QuizBegin'
 import QuizQuestion from './QuizQuestion'
 import QuizFinish from './QuizFinish'
 
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
 const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
 
 describe('QuizView component', () => {
@@ -26,7 +23,7 @@ describe('QuizView component', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<QuizView />)
-    expect(wrapper.find(QuizBegin).exists()).toBeTruthy()
+    expect(wrapper.find(QuizBegin).exists())
   })
 
   it('should be rendered with QuizQuestion component when quiz state = ongoing', () => {
@@ -40,7 +37,7 @@ describe('QuizView component', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<QuizView />)
-    expect(wrapper.find(QuizQuestion).exists()).toBeTruthy()
+    expect(wrapper.find(QuizQuestion).exists())
   })
 
   it('should be rendered with QuizFinish component when quiz state = done', () => {
@@ -54,7 +51,7 @@ describe('QuizView component', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<QuizView />)
-    expect(wrapper.find(QuizFinish).exists()).toBeTruthy()
+    expect(wrapper.find(QuizFinish).exists())
   })
 
   it('should be rendered with QuizBegin component when quiz state = null', () => {
@@ -68,6 +65,6 @@ describe('QuizView component', () => {
     }
     mockUseSelector.mockReturnValue(updatedChallengeState)
     const wrapper = shallow(<QuizView />)
-    expect(wrapper.find(QuizBegin).exists()).toBeTruthy()
+    expect(wrapper.find(QuizBegin).exists())
   })
 })
diff --git a/src/services/environment.service.ts b/src/services/environment.service.ts
index 4537dc15976b1cf42f08d60968eac65aa9535d47..0fb89f8f4f67c7ba49f64e067885c293c33c708c 100644
--- a/src/services/environment.service.ts
+++ b/src/services/environment.service.ts
@@ -1,5 +1,4 @@
 declare const __IS_ALPHA__: boolean
-declare const __DEVELOPMENT__: boolean
 
 export default class EnvironmentService {
   private isAlpha() {
@@ -22,8 +21,4 @@ export default class EnvironmentService {
       return 'https://ecolyo-agent-rec.grandlyon.com'
     }
   }
-
-  public isDev() {
-    return __DEVELOPMENT__
-  }
 }
diff --git a/src/targets/browser/index.ejs b/src/targets/browser/index.ejs
index a30958e2e1852957cfaf60fe21636ceb27c1ee43..3f5bf59a4e99894939c462c357c162ffc64e53de 100644
--- a/src/targets/browser/index.ejs
+++ b/src/targets/browser/index.ejs
@@ -28,19 +28,25 @@
     {{.ThemeCSS}}
 
     <% if (__TARGET__ === 'mobile') { %>
+
     <meta name="format-detection" content="telephone=no">
     <script src="cordova.js" defer></script>
     <% } else if (__STACK_ASSETS__) { %>
     {{.CozyBar}}
     <% } %>
-    <script src="//{{.Domain}}/assets/js/piwik.js"></script>
-
   </head>
   <body>
   <div
     role="application"
     class="application"
-    data-cozy="{{.CozyData}}"
+    data-cozy-token="{{.Token}}"
+    data-cozy-domain="{{.Domain}}"
+    data-cozy-locale="{{.Locale}}"
+    data-cozy-app-name="{{.AppName}}"
+    data-cozy-app-slug="{{.AppSlug}}"
+    data-cozy-app-name-prefix="{{.AppNamePrefix}}"
+    data-cozy-app-editor="{{.AppEditor}}"
+    data-cozy-icon-path="{{.IconPath}}"
   >
   <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
       <script src="<%- file %>"></script>
diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx
index 93fcbc519c14ef21dabe8e3e9b6e99c24f0a4516..8337a39baad8bfb532f840e769e8d0dd119ebc8a 100644
--- a/src/targets/browser/index.tsx
+++ b/src/targets/browser/index.tsx
@@ -1,91 +1,50 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* global cozy */
-declare let cozy: any
-declare let __PIWIK_TRACKER_URL__: string
-declare let __PIWIK_SITEID__: number
-declare let Piwik: any
-
 import '../../styles/index.scss'
 
 import React from 'react'
 import { render } from 'react-dom'
-import CozyClient, { Client, CozyProvider } from 'cozy-client'
+import { Client, CozyProvider } from 'cozy-client'
 import { Provider } from 'react-redux'
 import configureStore from 'store'
 import { I18n, initTranslation } from 'cozy-ui/transpiled/react/I18n'
 import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
 import { memoize } from 'lodash'
-import manifest from '../../../manifest.webapp'
-import schema from 'doctypes'
-import { createBrowserHistory, History } from 'history'
-import { HashRouter } from 'react-router-dom'
-import MatomoTracker from 'utils/matomoTracker'
+import { getClient } from '../../utils/client'
+import { getValues, initBar } from '../../utils/bar'
 
 const setupApp = memoize(() => {
-  const history: History = createBrowserHistory()
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const root: any = document.querySelector('[role=application]')
-  const data = JSON.parse(root.dataset.cozy)
-  const protocol = window.location.protocol
-  const cozyUrl = `${protocol}//${data.domain}`
-
-  const locale = 'fr'
-  const polyglot: any = initTranslation(locale, lang =>
+  const { lang }: any = getValues(root.dataset)
+  const polyglot: any = initTranslation(lang, lang =>
     require(`locales/${lang}`)
   )
-
-  const client: Client = new CozyClient({
-    uri: cozyUrl,
-    token: data.token,
-    appMetadata: {
-      slug: manifest.name,
-      version: manifest.version,
-    },
-    schema,
-  })
-
+  const client: Client = getClient()
   const persistedState: any = {}
   const store: any = configureStore(client, persistedState)
 
-  cozy.bar.init({
-    appName: data.app.name,
-    appEditor: data.app.editor,
-    cozyClient: client,
-    iconPath: data.app.icon,
-    lang: data.locale,
-    replaceTitleOnMobile: false,
-    appSlug: data.app.slug,
-    appNamePrefix: data.app.prefix,
-  })
-
-  let tracker
-  if (window.Piwik) {
-    Piwik.getTracker()
-    tracker = new MatomoTracker({
-      cozyUrl: cozyUrl,
-      url: __PIWIK_TRACKER_URL__,
-      siteId: __PIWIK_SITEID__,
-      history: history,
-      phpFilename: 'matomo.php',
-    })
-  }
+  /** I don't know why I need to for this... But if I don't it seems that
+   * we have a race between configureStore and initBar resulting in
+   * an error from cozy-client "store is already defined"
+   */
+  setTimeout(() => {
+    initBar(client)
+  }, 0)
 
-  return { root, store, client, locale, polyglot, history, tracker }
+  return { root, store, client, lang, polyglot }
 })
 
 const init = () => {
-  const { root, store, client, locale, polyglot, history, tracker } = setupApp()
+  const { root, store, client, lang, polyglot } = setupApp()
 
   if (handleOAuthResponse()) return
   const App = require('components/App').default
   render(
     <Provider store={store}>
       <CozyProvider client={client}>
-        <I18n lang={locale} polyglot={polyglot}>
-          <HashRouter {...history}>
-            <App tracker={tracker} />
-          </HashRouter>
+        <I18n lang={lang} polyglot={polyglot}>
+          <App />
         </I18n>
       </CozyProvider>
     </Provider>,
diff --git a/src/types/cozy-ui.d.ts b/src/types/cozy-ui.d.ts
index a13bfbd3f043d8493ea441d5efba5c0b0cce5896..01a043d2956e291ddb1bc827f34429d86713bbb8 100644
--- a/src/types/cozy-ui.d.ts
+++ b/src/types/cozy-ui.d.ts
@@ -3,7 +3,6 @@
 declare module 'cozy-ui/transpiled/react/Icon'
 declare module 'cozy-ui/transpiled/react/Spinner'
 declare module 'cozy-ui/transpiled/react/Layout'
-declare module 'cozy-ui/transpiled/react/helpers/appDataset'
 
 declare module 'cozy-ui/transpiled/react/I18n' {
   interface IPropsIcon {
diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts
index 7112effa625990e5b6011188a0044ae5092e2bc6..0016563a7edbf81abbfd0a222b69e62df2fe09a1 100644
--- a/src/types/custom.d.ts
+++ b/src/types/custom.d.ts
@@ -6,5 +6,3 @@ declare module '*.svg' {
   const content: string
   export default content
 }
-
-declare module '*.webapp'
diff --git a/src/utils/bar.ts b/src/utils/bar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef818bc84febba6e66c2679cad8757dc5d03404e
--- /dev/null
+++ b/src/utils/bar.ts
@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* global cozy */
+
+import { Client } from 'cozy-client'
+import manifest from '../../manifest.webapp'
+
+interface GetValues {
+  cozyAppName: string
+  cozyAppNamePrefix: string
+  cozyIconPath: string
+  cozyLocale: string
+}
+
+const getDataOrDefault = (data: any, defaultData: any) =>
+  /^\{\{\..*\}\}$/.test(data) ? defaultData : data //NOSONAR
+
+/**
+ * default data will allow to display correctly the cozy-bar
+ * in the standalone (without cozy-stack connexion)
+ */
+export const getValues = ({
+  cozyAppName,
+  cozyAppNamePrefix,
+  cozyIconPath,
+}: GetValues) => {
+  const defaultValues = {
+    appIconDefault: require('../targets/vendor/assets/icon.svg'),
+    appNamePrefixDefault: manifest.name_prefix,
+    appNameDefault: manifest.name,
+    appLocaleDefault: 'fr',
+  }
+  return {
+    appName: getDataOrDefault(cozyAppName, defaultValues.appNameDefault),
+    appNamePrefix: getDataOrDefault(
+      cozyAppNamePrefix,
+      defaultValues.appNamePrefixDefault
+    ),
+    iconPath: getDataOrDefault(cozyIconPath, defaultValues.appIconDefault),
+    lang: defaultValues.appLocaleDefault,
+  }
+}
+
+/**
+ * Cozy bar initialization
+ * @param {object} client - cozy client
+ */
+export const initBar = (client: Client) => {
+  const root: any = document.querySelector('[role=application]')
+  const { appName, appNamePrefix, iconPath, lang } = getValues(root.dataset)
+
+  cozy.bar.init({
+    appName,
+    appNamePrefix,
+    cozyClient: client,
+    iconPath,
+    lang,
+    replaceTitleOnMobile: false,
+  })
+}
diff --git a/src/utils/client.ts b/src/utils/client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5826f38a39df570686911072fd7fc45220d73ff
--- /dev/null
+++ b/src/utils/client.ts
@@ -0,0 +1,25 @@
+import CozyClient from 'cozy-client'
+import manifest from '../../manifest.webapp'
+import schema from 'doctypes'
+
+/**
+ * Returns cozy client instance
+ * @returns {object} cozy client instance
+ */
+export const getClient = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const root: any = document.querySelector('[role=application]')
+  const data = root.dataset
+  const protocol = window.location.protocol
+  const cozyUrl = `${protocol}//${data.cozyDomain}`
+
+  return new CozyClient({
+    uri: cozyUrl,
+    token: data.cozyToken,
+    appMetadata: {
+      slug: manifest.name,
+      version: manifest.version,
+    },
+    schema,
+  })
+}
diff --git a/src/utils/matomoTracker.ts b/src/utils/matomoTracker.ts
deleted file mode 100644
index 2e43776d5a1a1f20373fc6f9f8b2bb19fabc9280..0000000000000000000000000000000000000000
--- a/src/utils/matomoTracker.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { History, Location, UnregisterCallback } from 'history'
-import { readCozyDataFromDOM } from 'cozy-ui/transpiled/react/helpers/appDataset'
-import hash from 'object-hash'
-
-interface InitSettings {
-  cozyUrl: string
-  url: string
-  siteId: number
-  history: History
-  phpFilename?: string
-}
-
-declare global {
-  interface Window {
-    _paq: any
-    Piwik: any
-  }
-}
-
-export default class MatomoTracker {
-  cozyUrl: string
-  url: string
-  siteId: number
-  phpFilename: string
-  history: History
-  unlistenFromHistory: UnregisterCallback
-
-  constructor({
-    cozyUrl,
-    url,
-    siteId,
-    history,
-    phpFilename = 'matomo.php',
-  }: InitSettings) {
-    if (url === undefined || siteId === undefined) {
-      throw new Error(
-        'MatomoTracker cannot be initialized! SiteId and url are mandatory.'
-      )
-    }
-    this.cozyUrl = cozyUrl
-    this.url = url
-    this.siteId = siteId
-    this.phpFilename = phpFilename
-    this.history = history
-    this.unlistenFromHistory = () => null
-    this.init()
-  }
-
-  init() {
-    if (typeof window !== 'undefined') {
-      window._paq = window._paq || []
-      MatomoTracker.push(['enableHeartBeatTimer', 30])
-      MatomoTracker.push(['setSiteId', this.siteId])
-      MatomoTracker.push(['setReferrerUrl', 'https://ecolyo.com'])
-      MatomoTracker.push(['setTrackerUrl', `${this.url + this.phpFilename}`])
-      MatomoTracker.push(['setUserId', hash(this.cozyUrl)])
-      MatomoTracker.push(['enableLinkTracking'])
-    }
-    return {
-      push: MatomoTracker.push,
-      track: this.track,
-      connectToHistory: this.connectToHistory,
-      disconnectFromHistory: this.disconnectFromHistory,
-    }
-  }
-
-  static push(args: (number[] | string[] | number | string)[]) {
-    window._paq.push(args)
-  }
-
-  configure() {
-    let cozyDomain
-    let userId
-    const root: any = document.querySelector('[role=application]')
-    if (root && root.dataset) {
-      cozyDomain = readCozyDataFromDOM('cozyDomain')
-    }
-    if (cozyDomain) {
-      userId = cozyDomain
-      const indexOfPort = cozyDomain.indexOf(':')
-      if (indexOfPort >= 0) {
-        userId = userId.substring(0, indexOfPort)
-      }
-    }
-
-    if (userId) {
-      MatomoTracker.push(['setUserId', userId])
-    }
-  }
-
-  connectToHistory() {
-    this.unlistenFromHistory = this.history.listen(loc => {
-      this.track(loc)
-    })
-  }
-
-  disconnectFromHistory() {
-    if (this.unlistenFromHistory) {
-      this.unlistenFromHistory()
-      return true
-    }
-    return false
-  }
-
-  track(loc: Location) {
-    if (typeof window === 'undefined') {
-      return
-    }
-    const currentPath = loc.hash.substring(1)
-
-    MatomoTracker.push(['setDocumentTitle', currentPath.substring(1)])
-    MatomoTracker.push(['setCustomUrl', 'https://ecolyo.com' + currentPath])
-    MatomoTracker.push(['setUserId', hash(this.cozyUrl)])
-    MatomoTracker.push(['trackPageView'])
-  }
-}