diff --git a/docker/cozy-app-dev-with-app.sh b/docker/cozy-app-dev-with-app.sh
index e55e182b6b550ac494e8afc0f34a853ee43610e9..48d4233a86b7d5ff13449b5b8e277ef45c4ae5cf 100644
--- a/docker/cozy-app-dev-with-app.sh
+++ b/docker/cozy-app-dev-with-app.sh
@@ -189,41 +189,36 @@ do_create_instances() {
 }
 
 do_install_app() {
-  echo "Installing apps (home, collect..)"
-  if cozy-stack apps ls | grep 'home'; then
-          echo "Removing home..."
-          cozy-stack apps uninstall home
-  fi
-  if cozy-stack apps ls | grep 'collect'; then
-          echo "Removing collect..."
-          cozy-stack apps uninstall collect
-  fi
-  echo "Installing home, collect, store..."
-  cozy-stack apps install home
-  cozy-stack apps install collect
-  echo "App succesfully installed"
-
-  echo "Installing konnectors"
-  if cozy-stack konnectors ls | grep 'enedis-scraping-connector'; then
-          echo "Removing enedis-scraping-connector..."
-          cozy-stack konnectors uninstall enedis-scraping-connector
-  fi
-  if cozy-stack konnectors ls | grep 'grdf-scraping-connector'; then
-          echo "Removing grdf-scraping-connector..."
-          cozy-stack konnectors uninstall grdf-scraping-connector
-  fi
-  if cozy-stack konnectors ls | grep 'egl-api-connector'; then
-          echo "Removing egl-api-connector..."
-          cozy-stack konnectors uninstall egl-api-connector
-  fi
-  if cozy-stack konnectors ls | grep 'enedis-konnector'; then
-          echo "Removing enedis-konnector..."
-          cozy-stack konnectors uninstall enedis-konnector
-  fi
-  cozy-stack konnectors install enedis-scraping-connector file:///data/cozy_konnectors/enedis-scraping-connector-build
-  cozy-stack konnectors install grdf-scraping-connector file:///data/cozy_konnectors/grdf-scraping-connector-build
-  cozy-stack konnectors install egl-api-connector file:///data/cozy_konnectors/egl-api-connector-build
-  cozy-stack konnectors install enedis-konnector file:///data/cozy_konnectors/enedis-konnector-build
+        echo "Installing apps (home, collect..)"
+        if cozy-stack apps ls | grep 'home'; then
+                echo "Removing home..."
+                cozy-stack apps uninstall home
+        fi
+        if cozy-stack apps ls | grep 'collect'; then
+                echo "Removing collect..."
+                cozy-stack apps uninstall collect
+        fi
+        echo "Installing home, collect, store..."
+        cozy-stack apps install home
+        cozy-stack apps install collect
+        echo "App succesfully installed"
+
+        echo "Installing konnectors"
+        if cozy-stack konnectors ls | grep 'enedis'; then
+                echo "Removing konnector enedis..."
+                cozy-stack konnectors uninstall enedis
+        fi
+        if cozy-stack konnectors ls | grep 'grdf'; then
+                echo "Removing konnector grdf..."
+                cozy-stack konnectors uninstall grdf
+        fi
+        if cozy-stack konnectors ls | grep 'egl'; then
+                echo "Removing konnector egl..."
+                cozy-stack konnectors uninstall egl
+        fi
+        cozy-stack konnectors install enedis git://forge.grandlyon.com/web-et-numerique/llle_project/enedis-konnector.git#build
+        cozy-stack konnectors install grdf git://forge.grandlyon.com/web-et-numerique/llle_project/grdf-konnector.git#build
+        cozy-stack konnectors install egl git://forge.grandlyon.com/web-et-numerique/llle_project/egl-konnector.git#build
 }
 
 wait_for() {
diff --git a/package.json b/package.json
index 0b3980672627d95873ea4d94702aafbfa72e1545..4484c8f6ccec779e13fb4e00d22afeaa15d38af1 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
     "d3": "^5.15.0",
     "eslint-config-cozy-app": "1.1.12",
     "global": "^4.4.0",
-    "html-to-react": "^1.4.2",
     "lodash": "^4.17.15",
     "luxon": "^1.21.3",
     "moment": "^2.24.0",
diff --git a/src/assets/icons/tabbar/parametre/off.svg b/src/assets/icons/tabbar/parametre/off.svg
index 7d541abe20060a23e480dc441d20217f2c61ca82..d6f3627a79145b6d3607e2e70238046adf371a25 100644
--- a/src/assets/icons/tabbar/parametre/off.svg
+++ b/src/assets/icons/tabbar/parametre/off.svg
@@ -1,5 +1,8 @@
 <svg width="50" height="36" viewBox="0 0 50 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.2446 17.844V24H24.7566V17.844H26.2446Z" fill="#A0A0A0"/>
-<circle cx="25.5" cy="19.5" r="9.5" stroke="#A0A0A0"/>
-<path d="M26.3706 15.808C26.4226 15.696 26.4486 15.576 26.4486 15.448C26.4486 15.316 26.4226 15.192 26.3706 15.076C26.3186 14.96 26.2486 14.86 26.1606 14.776C26.0766 14.692 25.9766 14.626 25.8606 14.578C25.7446 14.526 25.6206 14.5 25.4886 14.5C25.3606 14.5 25.2386 14.526 25.1226 14.578C25.0106 14.626 24.9126 14.692 24.8286 14.776C24.7446 14.86 24.6766 14.96 24.6246 15.076C24.5766 15.192 24.5526 15.316 24.5526 15.448C24.5526 15.576 24.5766 15.696 24.6246 15.808C24.6766 15.92 24.7446 16.018 24.8286 16.102C24.9126 16.186 25.0106 16.254 25.1226 16.306C25.2386 16.354 25.3606 16.378 25.4886 16.378C25.6206 16.378 25.7446 16.354 25.8606 16.306C25.9766 16.254 26.0766 16.186 26.1606 16.102C26.2486 16.018 26.3186 15.92 26.3706 15.808Z" fill="#A0A0A0"/>
+<line x1="14.5" y1="11.5" x2="35.5" y2="11.5" stroke="#A0A0A0" stroke-linecap="round"/>
+<line x1="14.5" y1="18.5" x2="35.5" y2="18.5" stroke="#A0A0A0" stroke-linecap="round"/>
+<line x1="14.5" y1="25.5" x2="35.5" y2="25.5" stroke="#A0A0A0" stroke-linecap="round"/>
+<circle cx="28.5" cy="11.5" r="2.5" fill="#A0A0A0"/>
+<circle cx="20.5" cy="18.5" r="2.5" fill="#A0A0A0"/>
+<circle cx="29.5" cy="25.5" r="2.5" fill="#A0A0A0"/>
 </svg>
diff --git a/src/assets/icons/tabbar/parametre/on.svg b/src/assets/icons/tabbar/parametre/on.svg
index 6107997d018426dafb65c6fc528434848018580b..0361aa95a4efc3056fb66d40d27558bb5a2a2b88 100644
--- a/src/assets/icons/tabbar/parametre/on.svg
+++ b/src/assets/icons/tabbar/parametre/on.svg
@@ -1,3 +1,8 @@
 <svg width="50" height="36" viewBox="0 0 50 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 19.5C15.5 13.9772 19.9772 9.5 25.5 9.5C31.0228 9.5 35.5 13.9772 35.5 19.5C35.5 25.0228 31.0228 29.5 25.5 29.5C19.9772 29.5 15.5 25.0228 15.5 19.5ZM26.3706 15.808C26.4226 15.696 26.4486 15.576 26.4486 15.448C26.4486 15.316 26.4226 15.192 26.3706 15.076C26.3186 14.96 26.2486 14.86 26.1606 14.776C26.0766 14.692 25.9766 14.626 25.8606 14.578C25.7446 14.526 25.6206 14.5 25.4886 14.5C25.3606 14.5 25.2386 14.526 25.1226 14.578C25.0106 14.626 24.9126 14.692 24.8286 14.776C24.7446 14.86 24.6766 14.96 24.6246 15.076C24.5766 15.192 24.5526 15.316 24.5526 15.448C24.5526 15.576 24.5766 15.696 24.6246 15.808C24.6766 15.92 24.7446 16.018 24.8286 16.102C24.9126 16.186 25.0106 16.254 25.1226 16.306C25.2386 16.354 25.3606 16.378 25.4886 16.378C25.6206 16.378 25.7446 16.354 25.8606 16.306C25.9766 16.254 26.0766 16.186 26.1606 16.102C26.2486 16.018 26.3186 15.92 26.3706 15.808ZM26.2446 17.844V24H24.7566V17.844H26.2446Z" fill="#E3B82A"/>
+<line x1="14.5" y1="11.5" x2="35.5" y2="11.5" stroke="#E3B82A" stroke-linecap="round"/>
+<line x1="14.5" y1="18.5" x2="35.5" y2="18.5" stroke="#E3B82A" stroke-linecap="round"/>
+<line x1="14.5" y1="25.5" x2="35.5" y2="25.5" stroke="#E3B82A" stroke-linecap="round"/>
+<circle cx="28.5" cy="11.5" r="2.5" fill="#E3B82A"/>
+<circle cx="20.5" cy="18.5" r="2.5" fill="#E3B82A"/>
+<circle cx="29.5" cy="25.5" r="2.5" fill="#E3B82A"/>
 </svg>
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index b13e06a2f97ab742d2f4a2f98f9aa557967c032b..6197d6774d9d17c93736019c1ac1cc7250ad79a1 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -5,7 +5,7 @@ import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
 import Header from 'components/ContainerComponents/Header/Header'
 import Content from 'components/ContainerComponents/Content/Content'
 import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
-import { ChallengeType } from 'services/dataChallengeContracts'
+import { ChallengeType, UserChallenge } from 'services/dataChallengeContracts'
 import { Redirect } from 'react-router-dom'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -30,12 +30,10 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
   const t = props.t
   const client = props.client
   const challengeManager = new ChallengeManager(client)
-
   const { refreshCurrentChallenge, screenType } = useContext(AppContext)
-  const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
-  const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
   const [redirect, setRedirect] = useState(false)
   const [challenge, setChallenge] = useState<ChallengeType | null>(null)
+  const [userChallenge, setUserChallenge] = useState<UserChallenge | null>(null)
   const [headerHeight, setHeaderHeight] = useState<number>(0)
 
   const defineHeaderHeight = (height: number) => {
@@ -49,30 +47,30 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
         [0, 1, 2],
         challenge.availableEcogestures
       )
+      const chal = await challengeManager.getCurrentChallenge()
+      await setUserChallenge(chal)
       await refreshCurrentChallenge()
     }
   }
 
-  const handleStartClick = () => {
-    startChallenge()
+  async function handleStartClick() {
+    await startChallenge()
     setRedirect(true)
   }
 
   const renderRedirect = () => {
     if (redirect) {
-      return <Redirect to="/comsumption" />
+      return (
+        <Redirect
+          to={{
+            pathname: '/challenges/ongoing',
+            state: { challenge: userChallenge },
+          }}
+        />
+      )
     }
   }
 
-  const handleClick = (index: number) => {
-    setChallengeEcogesture(index)
-    setOpenEcogestureModal(true)
-  }
-
-  const handleCloseClick = () => {
-    setOpenEcogestureModal(false)
-  }
-
   useEffect(() => {
     if (props.location.state) {
       setChallenge(props && props.location.state.challenge)
@@ -98,7 +96,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
           <>
             <div className="cp-root --available">
               <div className="cp-content">
-                <div className="cp-info">
+                <div className="cp-info --available">
                   <div className="cp-title text-22-bold">{challenge.title}</div>
                   <StyledIconButton
                     className="cp-icon"
@@ -128,30 +126,8 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
                     </div>
                   </div>
                 </div>
-
-                <div className="cp-bottom">
-                  <div className="cp-eg-content">
-                    {t('CHALLENGE.LINKED_ECOGESTURES')}
-                    <div className="cp-ecogestures">
-                      {challenge.availableEcogestures.map((eg, index) => (
-                        <EcogestureCard
-                          key={index}
-                          ecogesture={eg}
-                          handleClick={() => handleClick(index)}
-                          challengeEcogesture={index + 1}
-                        />
-                      ))}
-                    </div>
-                  </div>{' '}
-                </div>
               </div>
             </div>
-            <EcogestureModal
-              opened={openEcogestureModal}
-              ecogesture={challenge.availableEcogestures[challengeEcogesture]}
-              handleCloseClick={handleCloseClick}
-              border={true}
-            />
           </>
         )}
       </Content>
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 86a27cf2b1d95d3c68efb65f16872ff134a788ea..d2950a971658fefee61bb962b04552e54ddc310c 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -3,10 +3,15 @@ import { translate } from 'cozy-ui/react/I18n'
 import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
 import Header from 'components/ContainerComponents/Header/Header'
 import Content from 'components/ContainerComponents/Content/Content'
-import { UserChallenge, TypeChallenge } from 'services/dataChallengeContracts'
+import {
+  UserChallenge,
+  TypeChallenge,
+  BadgeState,
+} from 'services/dataChallengeContracts'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import DefaultChallengeIcon from 'assets/icons/badges/default.svg'
+import StarIcon from 'assets/icons/visu/challenge/star.svg'
 import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
 import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
 import { Client, withClient } from 'cozy-client'
@@ -14,6 +19,7 @@ import { Redirect } from 'react-router-dom'
 import { formatNumberValues } from 'utils/utils'
 import { AppContext } from 'components/Contexts/AppContextProvider'
 import { ScreenType } from 'enum/screen.enum'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 
 interface FinishedChallengeDetailsViewProps {
   location: any
@@ -66,7 +72,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
 
   const result =
     challenge &&
-    formatNumberValues(challenge.maxEnergy - challenge.currentEnergy)
+    formatNumberValues(Math.abs(challenge.maxEnergy - challenge.currentEnergy))
 
   return (
     <React.Fragment>
@@ -96,7 +102,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
                   </div>
                   {challenge.challengeType &&
                   challenge.challengeType.type === TypeChallenge.CHALLENGE ? (
-                    challenge.maxEnergy - challenge.currentEnergy > 0 ? (
+                    challenge.badge === BadgeState.SUCCESS ? (
                       <div className="cp-result text-18-bold">
                         <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
                         <div className="cp-result-positif text-18-normal">{`${result} €`}</div>
@@ -108,11 +114,20 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
                       </div>
                     )
                   ) : null}
-                  <StyledIconButton
-                    className="cp-icon"
-                    icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
-                    size={screenType === ScreenType.MOBILE ? 200 : 350}
-                  />
+                  <div className="cp-win-badge-star">
+                    <StyledIcon
+                      className="cp-win-badge"
+                      icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
+                      size={screenType === ScreenType.MOBILE ? 150 : 200}
+                    />
+                    {challenge.badge === BadgeState.SUCCESS ? (
+                      <StyledIcon
+                        className="cp-win-star"
+                        icon={StarIcon}
+                        size={screenType === ScreenType.MOBILE ? 220 : 300}
+                      />
+                    ) : null}
+                  </div>
                   <div className="cp-description text-16-bold">
                     {challenge.challengeType &&
                       challenge.challengeType.description}
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index 6ff2e9785573ebbefefd3a71b72275e198c60775..67cd375c8283d8a80bf6682181949f3de134d710 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -135,6 +135,16 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
                       {t('CHALLENGE.LINKED_ECOGESTURES')}
                     </span>
                     <div className="cp-ecogestures">
+                      {challenge.selectedEcogestures.map((eg, index) => (
+                        <EcogestureCard
+                          key={index}
+                          ecogesture={eg}
+                          handleClick={() => handleClick(index)}
+                          challengeEcogesture={index + 1}
+                        />
+                      ))}
+                    </div>
+                    {/* <div className="cp-ecogestures">
                       <EcogestureCard
                         ecogesture={challenge.selectedEcogestures[0]}
                         handleClick={() => handleClick(0)}
@@ -145,7 +155,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
                         handleClick={() => handleClick(1)}
                         challengeEcogesture={2}
                       />
-                    </div>
+                    </div> */}
                   </div>
                 </div>
               </div>
diff --git a/src/components/ContentComponents/FAQ/FAQ.tsx b/src/components/ContentComponents/FAQ/FAQ.tsx
index db62e0b3a27c63e5823b495a329b797aefc07119..465a52c07edaf06fa2438bdb498f494c1b0cc924 100644
--- a/src/components/ContentComponents/FAQ/FAQ.tsx
+++ b/src/components/ContentComponents/FAQ/FAQ.tsx
@@ -1,16 +1,62 @@
 import React, { useState } from 'react'
 import GenericExpansionPanel from 'components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel'
-import FAQJSon from '../../../db/FAQ.json'
+import FAQJSon from 'db/FAQ.json'
+
+const decoreText = (line: string) => {
+  if (line === ' ') {
+    return <span className="spaceline">{line}</span>
+  } else if (line.includes('<b>')) {
+    const indexStart = line.indexOf('<b>')
+    const indexEnd = line.indexOf('</b>')
+    return (
+      <>
+        {line.substring(0, indexStart)}
+        <span className="text-bold">
+          {line.substring(indexStart + 3, indexEnd)}
+        </span>
+        {line.substring(indexEnd + 4, line.length)}
+      </>
+    )
+  } else if (line.includes('<u>')) {
+    const indexStart = line.indexOf('<u>')
+    const indexEnd = line.indexOf('</u>')
+    return (
+      <>
+        {line.substring(0, indexStart)}
+        <span className="text-underline">
+          {line.substring(indexStart + 3, indexEnd)}
+        </span>
+        {line.substring(indexEnd + 4, line.length)}
+      </>
+    )
+  } else if (line.includes('<a>')) {
+    const indexStart = line.indexOf('<a>')
+    const indexEnd = line.indexOf('</a>')
+    return (
+      <>
+        {line.substring(0, indexStart)}
+        <a
+          href={line.substring(indexStart + 3, indexEnd)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {line.substring(indexStart + 3, indexEnd)}
+        </a>
+
+        {line.substring(indexEnd + 4, line.length)}
+      </>
+    )
+  } else {
+    return line
+  }
+}
 
 const formatDetails = (details: Array<string>) => {
-  const HtmlToReactParser = require('html-to-react').Parser
-  const htmlParser = new HtmlToReactParser()
   const formatedDetails: React.ReactNode[] = []
   details.forEach((detail, index) => {
-    const detailParsed = htmlParser.parse(detail)
     formatedDetails.push(
       <div key={index} className="faq-content-detail">
-        {detailParsed}
+        {decoreText(detail)}
       </div>
     )
   })
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
index 42645fb1d5825e5b28702dab7be75a4ced82681b..7b657dc3ddebb3086bde3a9d22a6d0c6f8ca5d34 100644
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
+++ b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
@@ -218,10 +218,10 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     switch (jobState) {
       case JobState.Errored:
         return failurePicto
-      case JobState.Running:
-        return pendingPicto
-      case JobState.Done:
-        return successPicto
+      // case JobState.Running:
+      //   return pendingPicto
+      // case JobState.Done:
+      //   return successPicto
       default:
         return ''
     }
diff --git a/src/components/ContentComponents/KonnectorViewer/picto-failure.png b/src/components/ContentComponents/KonnectorViewer/picto-failure.png
index ce92455bd6edffc8d2c57a33c8165542f71b6da4..26fd495cc5648367aadddb76efd05a2702132d26 100644
Binary files a/src/components/ContentComponents/KonnectorViewer/picto-failure.png and b/src/components/ContentComponents/KonnectorViewer/picto-failure.png differ
diff --git a/src/db/FAQ.json b/src/db/FAQ.json
index f8e05c7db89126bb35e60af916d3fc1af54c8f32..a196167db47d327d8934a551064cb083f14bf7e4 100644
--- a/src/db/FAQ.json
+++ b/src/db/FAQ.json
@@ -2,65 +2,83 @@
   {
     "summary": "C’est quoi Ecolyo ?",
     "details": [
-      "Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer afin de vous accompagner dans la gestion de votre consommation quotidienne de façon ludique en vous lançant des défis personnalisés.<br/><br/>",
+      "Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer afin de vous accompagner dans la gestion de votre consommation quotidienne de façon ludique en vous lançant des défis personnalisés.",
+      " ",
       "Ce service permet de visualiser la consommation dans le temps des 3 fluides associés à un compteur communicant :",
-      "- l’électricité si vous avez un compteur Linky (ce compteur est désormais déployé dans près de 90 % des ménages grands lyonnais),",
-      "- le gaz si vous êtes abonné et avez un compteur Gazpar (le déploiement est en cours jusqu’en 2022 ; voir la question \" Comment obtenir Gazpar ? \" si vous ne l’avez pas),",
-      "- l’eau si vous êtes abonné à titre individuel, c’est-à-dire si l’eau n’est pas incluse dans vos charges si vous êtes locataire, et si vous disposez d’un équipement communicant Téléo (déployé chez la plupart des abonnés).<br/><br/>",
-      "Ecolyo est un projet en expérimentation ce qui veut dire : <br/>- Le périmètre d'utilisateurs est aujourd'hui limité<br/>- Nous travaillons constamment à faire évoluer le service et ces fonctionnalités afin de vous proposer un outil qui vous accompagne à maitriser votre consommation énergétique.<br/><br/>",
-      "Nous vous invitons aussi à nous faire vos retours, commentaires et conseils pour améliorer le service. <u>Vous pouvez nous contacter par ici.</u><br/><br/>",
+      " - l’électricité si vous avez un compteur Linky (ce compteur est désormais déployé dans près de 90 % des ménages grands lyonnais),",
+      " - le gaz si vous êtes abonné et avez un compteur Gazpar (le déploiement est en cours jusqu’en 2022 ; voir la question \" Comment obtenir Gazpar ? \" si vous ne l’avez pas)",
+      " - l’eau si vous êtes abonné à titre individuel, c’est-à-dire si l’eau n’est pas incluse dans vos charges si vous êtes locataire, et si vous disposez d’un équipement communicant Téléo (déployé chez la plupart des abonnés)",
+      " ",
+      "Ecolyo est un projet en expérimentation ce qui veut dire :",
+      " - Le périmètre d'utilisateurs est aujourd'hui limité",
+      " - Nous travaillons constamment à faire évoluer le service et ces fonctionnalités afin de vous proposer un outil qui vous accompagne à maitriser votre consommation énergétique",
+      " ",
+      "Nous vous invitons aussi à nous faire vos retours, commentaires et conseils pour améliorer le service. <u>Vous pouvez nous contacter par ici.</u>",
+      " ",
       "Le service sera industrialisé et ouvert grand public fin 2021."
     ]
   },
   {
     "summary": "Les défis sur Ecolyo : a quoi servent-ils ?",
     "details": [
-      "Ecolyo propose aussi de réaliser des défis individuels et collectifs pour réduire efficacement ses consommations d’énergie à votre domicile.<br/><br/>",
+      "Ecolyo propose aussi de réaliser des défis individuels et collectifs pour réduire efficacement ses consommations d’énergie à votre domicile.",
+      " ",
       "À chaque défi réussi, sur une période d’une semaine à un mois, vous obtenez des récompenses.",
-      "Pour vous aider à réaliser ces défis, des conseils et des informations vous sont donnés sous la forme d’écogestes, du plus simple (par exemple, éteindre les lumières des pièces inoccupées) aux plus compliqués (par exemple, vidanger et détartrer son cumulus).<br/><br/>",
+      "Pour vous aider à réaliser ces défis, des conseils et des informations vous sont donnés sous la forme d’écogestes, du plus simple (par exemple, éteindre les lumières des pièces inoccupées) aux plus compliqués (par exemple, vidanger et détartrer son cumulus).",
+      " ",
       "À chaque écogeste est associé un gain de consommation, c’est-à-dire un degré d’importance de économies réalisées.",
       "Ce gain est quantifié en négaWatt heure (nWh), c’est-à-dire une quantité d’énergie économisée.",
-      "Ce gain n’a pas de valeur scientifique précise mais il permet de comparer simplement les écogestes entre eux par leur niveau d’importance. Ces données sont issues du guide des 100 écogestes, guide édité pour le défi \" Déclic énergie \".<br/><br/>",
-      "Vous pouvez trouver plus d’infos sur le site de l’Alec ici : <a href='https://www.alec-lyon.org/actualites-et-agenda/sobriete-energetique-ayez-le-declic/' target='_blank'>https://www.alec-lyon.org/actualites-et-agenda/sobriete-energetique-ayez-le-declic/</a>"
+      "Ce gain n’a pas de valeur scientifique précise mais il permet de comparer simplement les écogestes entre eux par leur niveau d’importance. Ces données sont issues du guide des 100 écogestes, guide édité pour le défi \" Déclic énergie \".",
+      " ",
+      "Vous pouvez trouver plus d’infos sur le site de l’Alec ici : <a>https://www.alec-lyon.org/actualites-et-agenda/sobriete-energetique-ayez-le-declic/</a>"
     ]
   },
   {
     "summary": "Pourquoi une différence entre vos factures et les coûts affichés par Ecolyo",
     "details": [
-      "Votre facture prend en compte deux composantes : l’abonnement et la consommation facturés sur la base du tarif de votre fournisseur, tarif que l’application n’intègrera que lors d’une prochaine version grand public.<br/><br/>",
-      "À ce jour, elle ne donne que le coût associé à votre consommation (abonnement non pris en compte sauf pour l’eau) et hors évolution des prix, sur la base :<br/><br/>",
-      "<b>- pour l'électricité</b>, du tarif réglementé d’EDF au 1/02/2020 : 1 kWh d’électricité = 0,1546 €TTC pour une puissance souscrite de 3 ou 6 kVA, et hors offre temporalisée (heure pleine / heure creuse)<br/><br/>",
-      "<b>- pour le gaz</b>, du tarif réglementé de vente au 1/12/2019: 1 kWh = 0,0793 €TTC pour un consommateur soutirant moins de 6 MWh par an (usages cuisson ou mixte) ou 1 kWh = 0,0556 €TTC pour un consommateur soutirant entre 6 et 30 MWh par an (usage chauffage)<br/><br/>",
+      "Votre facture prend en compte deux composantes : l’abonnement et la consommation facturés sur la base du tarif de votre fournisseur, tarif que l’application n’intègrera que lors d’une prochaine version grand public.",
+      " ",
+      "À ce jour, elle ne donne que le coût associé à votre consommation (abonnement non pris en compte sauf pour l’eau) et hors évolution des prix, sur la base :",
+      "<b>- pour l'électricité</b>, du tarif réglementé d’EDF au 1/02/2020 : 1 kWh d’électricité = 0,1546 €TTC pour une puissance souscrite de 3 ou 6 kVA, et hors offre temporalisée (heure pleine / heure creuse)",
+      "<b>- pour le gaz</b>, du tarif réglementé de vente au 1/12/2019: 1 kWh = 0,0793 €TTC pour un consommateur soutirant moins de 6 MWh par an (usages cuisson ou mixte) ou 1 kWh = 0,0556 €TTC pour un consommateur soutirant entre 6 et 30 MWh par an (usage chauffage)",
       "<b>- pour l'eau</b>, du prix de l’eau par l'\"Eau du Grand Lyon \", soit 1 litre d’eau = 0,0031 € TTC, ce coût intégrant l’abonnement, la distribution de l’eau potable, la collecte et le traitement des eaux usées, les redevances pollution et la taxe pour l’entretien des cours d’eau"
     ]
   },
   {
     "summary": "Pourquoi les informations de consommations affichées ont 3 jours de décalage par rapport à aujourd’hui ?",
     "details": [
-      "À chaque connexion au service ou à chaque « mise à jour » que vous pouvez activer vous-même, vos informations de consommation sont bien récupérées. Malheureusement aujourd’hui les distributeurs d’énergie et d’eau potable ne peuvent pas mettre à votre disposition vos données en temps réel.<br/><br/>",
-      "Enedis met à votre disposition les données de consommation électrique jusqu’à la veille (J-1), pour le gaz les données le sont à J-2, pour l’eau elles le sont à J-3.<br/><br/>",
-      "C’est pour cette raison que vous ne pouvez avoir accès à l’ensemble des données de la veille et aussi pour cette raison que vous pouvez voir dans votre accueil le montant final de votre consommation énergétique seulement à J-3.<br/><br/>",
+      "À chaque connexion au service ou à chaque « mise à jour » que vous pouvez activer vous-même, vos informations de consommation sont bien récupérées. Malheureusement aujourd’hui les distributeurs d’énergie et d’eau potable ne peuvent pas mettre à votre disposition vos données en temps réel.",
+      " ",
+      "Enedis met à votre disposition les données de consommation électrique jusqu’à la veille (J-1), pour le gaz les données le sont à J-2, pour l’eau elles le sont à J-3.",
+      " ",
+      "C’est pour cette raison que vous ne pouvez avoir accès à l’ensemble des données de la veille et aussi pour cette raison que vous pouvez voir dans votre accueil le montant final de votre consommation énergétique seulement à J-3.",
+      " ",
       "Voir aussi \" Pourquoi mes données n’apparaissent-elles pas ? \""
     ]
   },
   {
     "summary": "Comment récupérer les données des distributeurs d'électricité, de gaz et d’eau ?",
     "details": [
-      "Pour récupérer les données de votre consommation énergétique et votre consommation d’eau, il vous suffit de :<br/><br/>",
-      "- vous créer un identifiant chez Enedis, GRDF et Eau du GrandLyon (attention, cela marche seulement si vous disposez bien de compteurs communicants individuels !). Si vous passez par FranceConnect c’est encore plus simple !<br/><br/>",
-      "- dès que votre compte est créé, vous renseignez votre identifiant et mot de passe sur le formulaire proposé pour chaque fluide<br/><br/>",
-      "Le tour est joué ! Vous pouvez visualiser vos données et commencer à lancer des défis en lien avec votre consommation.<br/><br/>",
+      "Pour récupérer les données de votre consommation énergétique et votre consommation d’eau, il vous suffit de :",
+      "- vous créer un identifiant chez Enedis, GRDF et Eau du GrandLyon (attention, cela marche seulement si vous disposez bien de compteurs communicants individuels !). Si vous passez par FranceConnect c’est encore plus simple !",
+      "- dès que votre compte est créé, vous renseignez votre identifiant et mot de passe sur le formulaire proposé pour chaque fluide",
+      " ",
+      "Le tour est joué ! Vous pouvez visualiser vos données et commencer à lancer des défis en lien avec votre consommation.",
+      " ",
       "La création d’un compte chez chaque distributeur peut malheureusement prendre du temps. Avec les informations de votre contrat en main, un peu de temps et surtout de la patience vous allez y arriver !"
     ]
   },
   {
     "summary": "Pourquoi mes données n’apparaissent-elles pas ?",
     "details": [
-      "Lors de votre première utilisation de l’application, vos données ne sont pas encore récupérées depuis les sites des distributeurs. Pour permettre l’affichage de vos données, vous devez autoriser l’application à leurs accès. Il vous faudra pour cela remplir les champs prévus à cet effet sur la page d’accueil.<br/><br/>",
-      "Lors de cette connexion, plusieurs scénarios peuvent survenir et empêcher l’application de récupérer vos données :<br/><br/>",
-      "- vos informations de connexion ne sont pas correctes : vous devez donc vérifier les informations que vous avez fournies pour la connexion<br/><br/> ",
-      "- les services des distributeurs ne sont plus accessibles : vous devez réessayer ultérieurement<br/><br/>",
-      "L’application récupère vos informations via les services des distributeurs, c’est pourquoi nous sommes dépendants de leur bon fonctionnement.<br/><br/>",
+      "Lors de votre première utilisation de l’application, vos données ne sont pas encore récupérées depuis les sites des distributeurs. Pour permettre l’affichage de vos données, vous devez autoriser l’application à leurs accès. Il vous faudra pour cela remplir les champs prévus à cet effet sur la page d’accueil.",
+      " ",
+      "Lors de cette connexion, plusieurs scénarios peuvent survenir et empêcher l’application de récupérer vos données :",
+      "- vos informations de connexion ne sont pas correctes : vous devez donc vérifier les informations que vous avez fournies pour la connexion",
+      "- les services des distributeurs ne sont plus accessibles : vous devez réessayer ultérieurement",
+      " ",
+      "L’application récupère vos informations via les services des distributeurs, c’est pourquoi nous sommes dépendants de leur bon fonctionnement.",
+      " ",
       "Dans la durée, des difficultés de connexions à vos comptes peuvent à nouveau survenir, vous ne pourrez alors pas visualiser les dernières données et serez averti par un message d’erreur. Pour autant les données précédemment chargées resteront accessibles."
     ]
   },
@@ -69,35 +87,45 @@
     "details": [
       "Vos informations de consommations énergétiques sont transmises :",
       "- par les 2 distributeurs d'énergies à qui vous donnez un consentement en vous connectant pour la première fois : Enedis pour l'électricité, GRFG pour le gaz",
-      "- par le distributeur d'eau potable (Eau du Grand Lyon si vous êtes abonné).<br/><br/>",
+      "- par le distributeur d'eau potable (Eau du Grand Lyon si vous êtes abonné).",
+      " ",
       "Ces données sont stockées dans un cloud personnel, votre « domicile numérique » auquel vous seul avez accès.",
       "Vos informations ne peuvent donc ni être récupérées ni réutilisées, même pas par la Métropole de Lyon.",
-      "Vous seul pouvez visualiser vos données sur l’application Ecolyo et vous avez la maîtrise totale des informations stockées dans votre cloud personnel.<br/><br/>",
-      "La Métropole de Lyon et ses partenaires se soucient de la confidentialité de vos données. C’est pour cela que nous avons décidé de mettre à votre disposition cet espace personnel totalement gratuit pour accéder à Ecolyo et à d’autres services qui respectent votre vie privée.<br/><br/>",
+      "Vous seul pouvez visualiser vos données sur l’application Ecolyo et vous avez la maîtrise totale des informations stockées dans votre cloud personnel.",
+      " ",
+      "La Métropole de Lyon et ses partenaires se soucient de la confidentialité de vos données. C’est pour cela que nous avons décidé de mettre à votre disposition cet espace personnel totalement gratuit pour accéder à Ecolyo et à d’autres services qui respectent votre vie privée.",
+      " ",
       "<u>En savoir + sur mon cloud personnel</u>"
     ]
   },
   {
     "summary": "Comment obtenir Gazpar si je suis abonné au gaz ?",
     "details": [
-      "Si vous n'êtes pas encore équipé du compteur communicant Gazpar, 2 raisons possibles :<br/><br/>",
-      "- soit vous devez attendre son déploiement dans votre commune selon un calendrier préétabli jusqu'en 2022, consultable sur le site de GRDF : <a href='https://monespace.grdf.fr/compteur-gazpar-et-ma-commune' target='_blank'>https://monespace.grdf.fr/compteur-gazpar-et-ma-commune</a> <br/> Vous serez alors prévenu par courrier 45 à 30 jours avant son installation, puis par un second courriel 15 jours avant, enfin par courrier électronique 48h avant le jour J.<br/><br/>",
+      "Si vous n'êtes pas encore équipé du compteur communicant Gazpar, 2 raisons possibles :",
+      " ",
+      "- soit vous devez attendre son déploiement dans votre commune selon un calendrier préétabli jusqu'en 2022, consultable sur le site de GRDF : <a>https://monespace.grdf.fr/compteur-gazpar-et-ma-commune</a>",
+      "Vous serez alors prévenu par courrier 45 à 30 jours avant son installation, puis par un second courriel 15 jours avant, enfin par courrier électronique 48h avant le jour J.",
+      " ",
       "- soit vous, ou le précédent occupant de votre logement, n'avez pu être présent le jour de l'intervention : vous pouvez contacter l'accueil client compteur communicants gaz de GRDF au 09 70 73 65 98 du lundi au vendredi de 8h à 21h et le samedi de 8h à 20h (hors jours fériés, appel non surtaxé)."
     ]
   },
   {
     "summary": "Comment faire installer Téléo si je suis abonné à l'eau ?",
     "details": [
-      "En principe, toutes les communes du Grand Lyon sont désormais équipées du télérelevé (Téléo) pour l'eau.<br/><br/>",
-      "Si vous êtes abonné et que vous n'êtes pas encore équipé, la relève spécifique, et donc manuelle, vous est facturée 10€ HT / relève.<br/><br/>",
+      "En principe, toutes les communes du Grand Lyon sont désormais équipées du télérelevé (Téléo) pour l'eau.",
+      " ",
+      "Si vous êtes abonné et que vous n'êtes pas encore équipé, la relève spécifique, et donc manuelle, vous est facturée 10€ HT / relève.",
+      " ",
       "Alors, contactez vite le service client d'eau du Grand Lyon par téléphone au 09 69 39 69 99 (numéro cristal non surtaxé) du lundi au vendredi de 8h à 19h et le samedi de 8h à 12H30 pour obtenir l'installation d'un compteur communicant Téléo."
     ]
   },
   {
     "summary": "La météo est-elle prise en compte dans les comparaison ?",
     "details": [
-      "Dans cette version \"prototype\", la météo n'est pas prise en compte : l'équipe d'Ecolyo est pleinement consciente du biais qu'implique une comparaison des consommations sans correction climatique.<br/><br/>",
-      "Ce choix a été fait pour que le prototype soit testé dans un délai raisonnable et pour que son développement n'intègre pas immédiatement des données suppélmentaires qui viendraient alourdir un modèle de calcul déjà complexe en raison de la collecte des données personnelles de chaque utilisateur.<br/><br/>",
+      "Dans cette version \"prototype\", la météo n'est pas prise en compte : l'équipe d'Ecolyo est pleinement consciente du biais qu'implique une comparaison des consommations sans correction climatique.",
+      " ",
+      "Ce choix a été fait pour que le prototype soit testé dans un délai raisonnable et pour que son développement n'intègre pas immédiatement des données suppélmentaires qui viendraient alourdir un modèle de calcul déjà complexe en raison de la collecte des données personnelles de chaque utilisateur.",
+      " ",
       "La correction climatique sera donc intégrée dans la V1 qui devrait sortir au cours de l'automne 2020."
     ]
   }
diff --git a/src/services/challengeDataMapperService.ts b/src/services/challengeDataMapperService.ts
index 5f096db44806f211d1f2790927b5d6ccc86e02b2..198957092047d279716b35bd75c3cc5b7ecea59b 100644
--- a/src/services/challengeDataMapperService.ts
+++ b/src/services/challengeDataMapperService.ts
@@ -103,7 +103,6 @@ export default class ChallengeDataMapper {
         },
       },
     }
-
     return mappedUserChallenge
   }
 
@@ -144,7 +143,6 @@ export default class ChallengeDataMapper {
       userChallengeEntity.badge,
       userChallengeEntity._id
     )
-
     return mappedUserChallenge
   }
 
@@ -168,14 +166,17 @@ export default class ChallengeDataMapper {
           completeAvailableEcogestures.push(unfilteredEcogestures[0])
       }
     }
+    // --> fluid dependancy for challenge
 
-    let filteredAvailableEcogestures = completeAvailableEcogestures.filter(
-      eg =>
-        fluidTypes &&
-        (fluidTypes.includes(eg.fluidTypes[0]) ||
-          fluidTypes.includes(eg.fluidTypes[1]) ||
-          fluidTypes.includes(eg.fluidTypes[2]))
-    )
+    // let filteredAvailableEcogestures = completeAvailableEcogestures.filter(
+    //   eg =>
+    //     fluidTypes &&
+    //     (fluidTypes.includes(eg.fluidTypes[0]) ||
+    //       fluidTypes.includes(eg.fluidTypes[1]) ||
+    //       fluidTypes.includes(eg.fluidTypes[2]))
+    // )
+
+    let filteredAvailableEcogestures = completeAvailableEcogestures
 
     const fluidFilteredEcogestures = [...new Set(filteredAvailableEcogestures)]
 
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 2534c69565cfc8827ffa40603d2c6404724ac5ac..c7cc19fdf95b2df2683a60b4ef3612ea6d744663 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -28,9 +28,9 @@ body {
 }
 
 [role='banner'] .coz-bar-container {
-  padding: 0 3.25em 0 0;
   background-color: white;
   @media #{$large-phone} {
+    padding: 0 3.25em 0 0;
     background-color: unset;
   }
 }
@@ -122,7 +122,7 @@ body {
   }
 }
 
-[role='main']{
+[role='main'] {
   /* width */
   &::-webkit-scrollbar {
     width: 10px;
@@ -135,4 +135,4 @@ body {
   &::-webkit-scrollbar-thumb {
     background: #6f7074;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index 6386fdc5ce07874b61497168aae552054c9f7feb..0a28156379a343695d3e11c4c6d0d52496a1c112 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -368,13 +368,14 @@
     align-items: center;
     flex-direction: column;
     color: $text-bright;
-    height: 84vh;
+    min-height: 84vh;
     justify-content: space-between;
 
     &.--locked {
       @extend .cp-content;
       justify-content: center;
     }
+
     .cp-info {
       display: flex;
       flex-direction: column;
@@ -382,15 +383,32 @@
       justify-content: space-between;
       background-color: $dark-light-2;
       width: 100%;
-      height: 60%;
-      padding-top: 2rem;
+      padding-top: 1rem;
       padding-bottom: 0.5rem;
+      &.--available {
+        @extend .cp-info;
+        height: 74vh;
+      }
       .cp-icon {
         margin-bottom: 1rem;
       }
       .cp-icon-available {
         margin: 2rem;
       }
+      .cp-win-badge-star {
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        .cp-win-badge {
+          grid-column: 1;
+          grid-row: 1;
+          z-index: 1;
+        }
+        .cp-win-star {
+          grid-column: 1;
+          grid-row: 1;
+        }
+      }
       .cp-date {
         color: $text-dark;
         text-align: center;
diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss
index 514e51619b99aa8073e16abfed7c270c776aa43c..ad7d87741a5148bebc287611e3d5b0fc047ad75a 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/styles/components/_ecogesture.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.5rem;
+  padding: 1rem 1.5rem 2.5rem 1.5rem;
   .negawatt-button-content{
     width: calc(53rem - 2%);
     margin: 0 1%;
@@ -85,7 +85,6 @@
 .em-header {
   color: $text-bright;
   border-bottom: 1px solid rgba(163, 163, 163, 0.4);
-  margin-bottom: 1rem;
   padding-bottom: 1em;
   width: 100%;
   display: flex;
@@ -141,10 +140,13 @@
   .em-content-box-text {
     display: flex;
     flex-direction: column;
-    padding: 0.5rem 1.5rem;
+    padding: 1.5rem 1.5rem;
     width: 22.125rem;
     @media #{$large-phone} {
         width: 100%;
     }
+    .em-description {
+      padding-bottom: 2.5rem;
+    }
   }
 }
diff --git a/src/styles/components/_faq.scss b/src/styles/components/_faq.scss
index c7bc83045f9b5fc649b60b686c8960b18ac31bf9..29f2e1c3dc44eeececd675484caab87d1ad6797e 100644
--- a/src/styles/components/_faq.scss
+++ b/src/styles/components/_faq.scss
@@ -19,9 +19,6 @@
       margin-bottom: 1.25rem;
       color: $text-bright;
     }
-    .faq-content-detail {
-      padding-bottom: 1rem;
-    }
   }
 }
 
@@ -62,5 +59,18 @@
     @media #{$large-phone} {
       width: 100%;
     }
+    .faq-content-detail {
+      padding-bottom: 0.6rem;
+      .text-bold {
+        font-weight: bold;
+      }
+      .text-underline {
+        text-decoration: underline;
+      }
+      .spaceline {
+        height: 0.6rem;
+        display: block;
+      }
+    }
   }
 }
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index c8efaa03950de79aca956ea024a8d7bf04ff68ff..efd3c1e77da3e75aa4bd79929dc2968433cce686 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -103,6 +103,8 @@
 }
 
 .state-icon {
-  height: 20px;
-  width: 20px;
+  height: 22px;
+  width: 22px;
+  margin-left: 32px;
+  margin-bottom: 40px;
 }
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
index 2d8cfd5af762661ff2653ba7bfe2c00e1cc76505..49cae038dd39a9ad0f76c4fed1563dc9d0bf0d7e 100644
--- a/src/styles/components/_modal.scss
+++ b/src/styles/components/_modal.scss
@@ -31,7 +31,7 @@
       max-height: unset;
     }
     transform: translate(-50%, -50%);
-    padding: 1rem 0;
+    padding: 1rem 0 0 0;
     box-sizing: border-box;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
     border-radius: 4px;
diff --git a/src/styles/index.css b/src/styles/index.css
index 3aff13885abc083392dad521784ad891412a1777..2a9a12baeb23acd28be0eab338ccdd2841fed2e7 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -15,92 +15,141 @@
 /** App colors **/
 /** TABS GRADIENT **/
 /* line 4, src/styles/base/_layout.scss */
+html {
+  background: #1b1c22; }
+
+/* line 8, src/styles/base/_layout.scss */
 body {
   background: #1b1c22;
   overflow: unset !important; }
 
-/* line 9, src/styles/base/_layout.scss */
+/* line 13, src/styles/base/_layout.scss */
 .column {
   display: flex;
   flex-direction: column; }
 
-/* line 14, src/styles/base/_layout.scss */
+/* line 18, src/styles/base/_layout.scss */
 .row {
   display: flex;
   flex-direction: row; }
 
-/* line 19, src/styles/base/_layout.scss */
+/* line 23, src/styles/base/_layout.scss */
 .cozy-bar {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center; }
 
-/* line 26, src/styles/base/_layout.scss */
+/* line 30, src/styles/base/_layout.scss */
+[role='banner'] .coz-bar-container {
+  padding: 0 3.25em 0 0;
+  background-color: white; }
+  @media only screen and (max-width: 768px) {
+    /* line 30, src/styles/base/_layout.scss */
+    [role='banner'] .coz-bar-container {
+      background-color: unset; } }
+
+/* line 38, src/styles/base/_layout.scss */
 .coz-bar-wrapper {
-  box-shadow: unset !important; }
+  box-shadow: unset !important;
+  background: unset !important; }
 
-/* line 30, src/styles/base/_layout.scss */
+/* line 43, src/styles/base/_layout.scss */
 .header {
   display: flex;
   align-items: center;
   flex-direction: column;
   overflow: hidden;
   width: 100%;
-  z-index: 20;
+  z-index: 18;
   position: fixed;
-  top: 0;
+  top: 48px;
   left: 0; }
-  /* line 40, src/styles/base/_layout.scss */
+  @media only screen and (max-width: 768px) {
+    /* line 43, src/styles/base/_layout.scss */
+    .header {
+      top: 0; } }
+  /* line 56, src/styles/base/_layout.scss */
   .header .header-bar {
     background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
     height: 8px;
-    width: 100vw; }
-  /* line 45, src/styles/base/_layout.scss */
+    width: 100%; }
+  /* line 61, src/styles/base/_layout.scss */
   .header .header-top {
     background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
     width: 100%; }
-    /* line 52, src/styles/base/_layout.scss */
+    /* line 68, src/styles/base/_layout.scss */
     .header .header-top .header-text {
       padding: 0 1rem 1rem 1rem;
       color: #e0e0e0; }
-  /* line 57, src/styles/base/_layout.scss */
+  /* line 73, src/styles/base/_layout.scss */
   .header .header-content {
-    margin: 60px 0 0 0; }
+    margin: 0 0 0 220px; }
+    /* line 75, src/styles/base/_layout.scss */
+    .header .header-content .header-text {
+      padding: 2rem 1rem; }
+    /* line 78, src/styles/base/_layout.scss */
+    .header .header-content .header-text-desktop {
+      display: block;
+      padding: 2rem 1.25rem;
+      color: #e0e0e0; }
+    @media only screen and (max-width: 1023px) {
+      /* line 73, src/styles/base/_layout.scss */
+      .header .header-content {
+        margin: 0; } }
+    @media only screen and (max-width: 768px) {
+      /* line 73, src/styles/base/_layout.scss */
+      .header .header-content {
+        margin: 60px 0 0 0; }
+        /* line 88, src/styles/base/_layout.scss */
+        .header .header-content .header-text {
+          padding: 0 1rem 1rem 1rem;
+          color: #e0e0e0; }
+        /* line 92, src/styles/base/_layout.scss */
+        .header .header-content .header-text-desktop {
+          display: none; } }
 
-/* line 70, src/styles/base/_layout.scss */
+/* line 99, src/styles/base/_layout.scss */
+.content-view {
+  margin-top: 116px; }
+  @media only screen and (max-width: 768px) {
+    /* line 99, src/styles/base/_layout.scss */
+    .content-view {
+      margin-top: 0; } }
+
+/* line 106, src/styles/base/_layout.scss */
 .content-view-loading {
   height: 80vh;
-  width: 100vw;
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #e0e0e0; }
-  /* line 78, src/styles/base/_layout.scss */
+  /* line 114, src/styles/base/_layout.scss */
   .content-view-loading .content-view-loading-text {
     padding-top: 1rem;
     margin: 0 2rem;
     text-align: center; }
-  /* line 83, src/styles/base/_layout.scss */
+  /* line 119, src/styles/base/_layout.scss */
   .content-view-loading .content-view-loading-button {
     max-width: 50vw;
     margin-top: 1rem; }
 
-/* width */
-/* line 90, src/styles/base/_layout.scss */
-::-webkit-scrollbar {
-  width: 10px; }
-
-/* Track */
-/* line 94, src/styles/base/_layout.scss */
-::-webkit-scrollbar-track {
-  background: #3E4045; }
-
-/* Handle */
-/* line 98, src/styles/base/_layout.scss */
-::-webkit-scrollbar-thumb {
-  background: #6F7074; }
+/* line 125, src/styles/base/_layout.scss */
+[role='main'] {
+  /* width */
+  /* Track */
+  /* Handle */ }
+  /* line 127, src/styles/base/_layout.scss */
+  [role='main']::-webkit-scrollbar {
+    width: 10px; }
+  /* line 131, src/styles/base/_layout.scss */
+  [role='main']::-webkit-scrollbar-track {
+    background: #3e4045; }
+  /* line 135, src/styles/base/_layout.scss */
+  [role='main']::-webkit-scrollbar-thumb {
+    background: #6f7074; }
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -470,7 +519,15 @@ p {
 /** GREY **/
 /** App colors **/
 /** TABS GRADIENT **/
-/* line 4, src/styles/components/_card.scss */
+/* line 5, src/styles/components/_card.scss */
+.redirect-card-link {
+  color: transparent; }
+
+/* line 8, src/styles/components/_card.scss */
+.redirect-card-content {
+  margin: 0.25rem 0; }
+
+/* line 14, src/styles/components/_card.scss */
 .card {
   /* linear card */
   background: linear-gradient(180deg, #323339 0%, #25262b 100%);
@@ -482,48 +539,48 @@ p {
   margin: 2vh 2vw 2vh 0vw;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75); }
   @media only screen and (max-width: 768px) {
-    /* line 4, src/styles/components/_card.scss */
+    /* line 14, src/styles/components/_card.scss */
     .card {
       margin: 2vh 0; } }
-  /* line 17, src/styles/components/_card.scss */
+  /* line 27, src/styles/components/_card.scss */
   .card.orange {
     border: 1px solid rgba(216, 123, 57, 0.4); }
-  /* line 20, src/styles/components/_card.scss */
+  /* line 30, src/styles/components/_card.scss */
   .card.blue {
     border: 1px solid rgba(58, 152, 236, 0.4); }
-  /* line 23, src/styles/components/_card.scss */
+  /* line 33, src/styles/components/_card.scss */
   .card.green {
     border: 1px solid rgba(69, 209, 184, 0.4); }
-  /* line 26, src/styles/components/_card.scss */
+  /* line 36, src/styles/components/_card.scss */
   .card .title {
     font-size: 1.5rem;
     font-style: normal;
     font-weight: normal;
     color: #e0e0e0;
     line-height: 120%; }
-  /* line 33, src/styles/components/_card.scss */
+  /* line 43, src/styles/components/_card.scss */
   .card h1 {
     font-size: 1rem;
     font-style: normal;
     font-weight: normal;
     line-height: 120%;
     color: white; }
-  /* line 40, src/styles/components/_card.scss */
+  /* line 50, src/styles/components/_card.scss */
   .card p {
     font-style: normal;
     font-weight: normal;
     font-size: 1rem;
     line-height: 120%; }
-  /* line 46, src/styles/components/_card.scss */
+  /* line 56, src/styles/components/_card.scss */
   .card .card-header {
     flex-direction: row;
     display: flex;
     justify-content: left;
     padding: 0.75rem 0rem; }
-    /* line 51, src/styles/components/_card.scss */
+    /* line 61, src/styles/components/_card.scss */
     .card .card-header div:first-of-type {
       margin-left: 3.5vw; }
-    /* line 54, src/styles/components/_card.scss */
+    /* line 64, src/styles/components/_card.scss */
     .card .card-header h2 {
       margin: 0;
       color: #e0e0e0;
@@ -531,12 +588,12 @@ p {
       font-weight: normal;
       font-size: 2rem;
       line-height: 120%; }
-      /* line 61, src/styles/components/_card.scss */
+      /* line 71, src/styles/components/_card.scss */
       .card .card-header h2 span {
         color: #e0e0e0;
         font-weight: 600;
         font-size: 2.3rem; }
-    /* line 67, src/styles/components/_card.scss */
+    /* line 77, src/styles/components/_card.scss */
     .card .card-header h3 {
       margin: 0;
       font-style: normal;
@@ -579,26 +636,25 @@ p {
   /* line 23, src/styles/components/_form.scss */
   .form .form-group {
     display: flex;
-    flex-direction: column;
-    margin: 0.5vw 0 0.5vw 0; }
-    /* line 27, src/styles/components/_form.scss */
+    flex-direction: column; }
+    /* line 26, src/styles/components/_form.scss */
     .form .form-group .form-trailing-icon {
       float: right;
       position: relative;
       margin-top: -48px;
       margin-right: 15px; }
-  /* line 34, src/styles/components/_form.scss */
+  /* line 33, src/styles/components/_form.scss */
   .form .form-control {
     height: 3rem; }
     @media only screen and (max-width: 768px) {
-      /* line 34, src/styles/components/_form.scss */
+      /* line 33, src/styles/components/_form.scss */
       .form .form-control {
         max-width: 100vw; } }
-  /* line 40, src/styles/components/_form.scss */
+  /* line 39, src/styles/components/_form.scss */
   .form .form-message {
     color: #ce3535;
     min-height: 1.25rem; }
-  /* line 44, src/styles/components/_form.scss */
+  /* line 43, src/styles/components/_form.scss */
   .form ::placeholder {
     color: #e0e0e0; }
 
@@ -761,93 +817,93 @@ p {
   /* line 14, src/styles/components/_konnector.scss */
   .accordion.active {
     background-color: #34353a; }
-  /* line 17, src/styles/components/_konnector.scss */
+  /* line 18, src/styles/components/_konnector.scss */
   .accordion .accordion-header {
     display: flex;
     align-items: center;
     border: none;
     outline: none; }
-    /* line 22, src/styles/components/_konnector.scss */
+    /* line 23, src/styles/components/_konnector.scss */
+    .accordion .accordion-header:hover {
+      cursor: pointer; }
+    /* line 26, src/styles/components/_konnector.scss */
     .accordion .accordion-header .accordion-icon {
       margin-right: 1rem; }
       @media only screen and (max-width: 768px) {
-        /* line 22, src/styles/components/_konnector.scss */
+        /* line 26, src/styles/components/_konnector.scss */
         .accordion .accordion-header .accordion-icon {
           max-width: 16vw; } }
-    /* line 28, src/styles/components/_konnector.scss */
+    /* line 32, src/styles/components/_konnector.scss */
     .accordion .accordion-header .accordion-info {
       flex: 3;
       color: #e0e0e0; }
       @media only screen and (max-width: 768px) {
-        /* line 28, src/styles/components/_konnector.scss */
+        /* line 32, src/styles/components/_konnector.scss */
         .accordion .accordion-header .accordion-info {
           display: block; } }
-      /* line 34, src/styles/components/_konnector.scss */
+      /* line 38, src/styles/components/_konnector.scss */
       .accordion .accordion-header .accordion-info .accordion-title {
         flex: 1; }
-    /* line 41, src/styles/components/_konnector.scss */
+    /* line 45, src/styles/components/_konnector.scss */
     .accordion .accordion-header .state-picto {
       position: absolute; }
-  /* line 45, src/styles/components/_konnector.scss */
+  /* line 49, src/styles/components/_konnector.scss */
   .accordion .accordion-update {
     flex: 2;
     padding: 0.5rem 1rem; }
-  /* line 49, src/styles/components/_konnector.scss */
+  /* line 53, src/styles/components/_konnector.scss */
   .accordion .accordion-state {
     flex: 2;
     margin-right: 1rem; }
-  /* line 53, src/styles/components/_konnector.scss */
+  /* line 57, src/styles/components/_konnector.scss */
   .accordion .accordion-frequency {
     flex: 1;
     padding: 0 1rem; }
-  /* line 57, src/styles/components/_konnector.scss */
+  /* line 61, src/styles/components/_konnector.scss */
   .accordion .accordion-caption {
     font-size: 0.8rem;
     color: #a0a0a0;
     text-transform: lowercase; }
-    /* line 61, src/styles/components/_konnector.scss */
+    /* line 65, src/styles/components/_konnector.scss */
     .accordion .accordion-caption::first-letter {
       text-transform: uppercase; }
-  /* line 65, src/styles/components/_konnector.scss */
+  /* line 69, src/styles/components/_konnector.scss */
   .accordion .accordion-caption-red {
     color: #ce3535; }
-  /* line 68, src/styles/components/_konnector.scss */
+  /* line 72, src/styles/components/_konnector.scss */
   .accordion .accordion-content {
     overflow: hidden;
     transition: max-height 0.6s ease; }
-  /* line 72, src/styles/components/_konnector.scss */
+  /* line 76, src/styles/components/_konnector.scss */
   .accordion .inline-buttons {
     display: flex;
     flex-flow: row nowrap; }
-  /* line 76, src/styles/components/_konnector.scss */
+  /* line 80, src/styles/components/_konnector.scss */
   .accordion .btn-position {
     width: 100%;
     margin: 0.5rem 1rem; }
 
-/* line 82, src/styles/components/_konnector.scss */
+/* line 86, src/styles/components/_konnector.scss */
 .kv-root {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.5rem; }
-  /* line 88, src/styles/components/_konnector.scss */
+  padding: 0 1.5rem; }
+  /* line 92, src/styles/components/_konnector.scss */
   .kv-root .kv-content {
-    width: 53.125rem; }
-    @media only screen and (max-width: 992px) {
-      /* line 88, src/styles/components/_konnector.scss */
-      .kv-root .kv-content {
-        width: 47.5rem; } }
+    width: 45.75rem; }
     @media only screen and (max-width: 768px) {
-      /* line 88, src/styles/components/_konnector.scss */
+      /* line 92, src/styles/components/_konnector.scss */
       .kv-root .kv-content {
         width: 100%; } }
-    /* line 96, src/styles/components/_konnector.scss */
+    /* line 97, src/styles/components/_konnector.scss */
     .kv-root .kv-content .kv-header {
-      color: #e0e0e0;
-      padding-bottom: 1rem; }
+      margin-top: 2.5rem;
+      margin-bottom: 1.25rem;
+      color: #e0e0e0; }
 
-/* line 103, src/styles/components/_konnector.scss */
+/* line 105, src/styles/components/_konnector.scss */
 .state-icon {
   height: 20px;
   width: 20px; }
@@ -932,38 +988,50 @@ p {
   /* line 71, src/styles/components/_fluid.scss */
   .fv-root .fv-footer {
     display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center; }
-    /* line 76, src/styles/components/_fluid.scss */
-    .fv-root .fv-footer :hover {
-      cursor: pointer; }
-    /* line 79, src/styles/components/_fluid.scss */
-    .fv-root .fv-footer .fv-footer-label {
-      flex: 1;
+    justify-content: center; }
+    /* line 74, src/styles/components/_fluid.scss */
+    .fv-root .fv-footer .fv-footer-compare {
+      width: 100%;
+      max-width: 58.75rem;
       display: flex;
-      justify-content: flex-start;
-      color: #a0a0a0; }
-      /* line 84, src/styles/components/_fluid.scss */
-      .fv-root .fv-footer .fv-footer-label.selected {
-        color: #ffffff; }
-    /* line 88, src/styles/components/_fluid.scss */
-    .fv-root .fv-footer .fv-footer-label-padding {
-      flex: 1;
+      flex-direction: row;
+      align-items: center; }
+      /* line 80, src/styles/components/_fluid.scss */
+      .fv-root .fv-footer .fv-footer-compare :hover {
+        cursor: pointer; }
+      /* line 83, src/styles/components/_fluid.scss */
+      .fv-root .fv-footer .fv-footer-compare .fv-footer-label {
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        color: #a0a0a0; }
+        /* line 88, src/styles/components/_fluid.scss */
+        .fv-root .fv-footer .fv-footer-compare .fv-footer-label.selected {
+          color: #ffffff; }
+    /* line 94, src/styles/components/_fluid.scss */
+    .fv-root .fv-footer .fv-footer-challenge {
+      width: 100%;
+      max-width: 58.75rem;
       display: flex;
-      justify-content: flex-start;
-      padding-left: 0.75rem;
-      color: #a0a0a0; }
+      flex-direction: row;
+      align-items: center; }
+      /* line 100, src/styles/components/_fluid.scss */
+      .fv-root .fv-footer .fv-footer-challenge .fv-footer-label-padding {
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        padding-left: 0.75rem;
+        color: #a0a0a0; }
 
-/* line 99, src/styles/components/_fluid.scss */
+/* line 112, src/styles/components/_fluid.scss */
 .fs-root {
   flex: 1;
   height: 22rem; }
   @media only screen and (max-width: 768px) {
-    /* line 99, src/styles/components/_fluid.scss */
+    /* line 112, src/styles/components/_fluid.scss */
     .fs-root {
       height: 14rem; } }
-  /* line 105, src/styles/components/_fluid.scss */
+  /* line 118, src/styles/components/_fluid.scss */
   .fs-root .fs-slide {
     min-height: 22rem;
     overflow-x: hidden;
@@ -971,7 +1039,7 @@ p {
     justify-content: center;
     align-items: center; }
     @media only screen and (max-width: 768px) {
-      /* line 105, src/styles/components/_fluid.scss */
+      /* line 118, src/styles/components/_fluid.scss */
       .fs-root .fs-slide {
         min-height: 14rem; } }
 
@@ -986,28 +1054,21 @@ p {
 /** GREY **/
 /** App colors **/
 /** TABS GRADIENT **/
-/* line 6, src/styles/components/_consumptionnavigator.scss */
-.cn .cn-tabs .cn-tab {
-  outline: none !important; }
-
-/** BLACK **/
-/** TEXT COLOR **/
-/** RED **/
-/** YELLOW **/
-/** ORANGE **/
-/** BLUE **/
-/** GREEN **/
-/** WHITE **/
-/** GREY **/
-/** App colors **/
-/** TABS GRADIENT **/
-/* line 4, src/styles/components/_challengesnavigator.scss */
-.challenge-nav {
-  width: 80%;
-  margin: auto; }
-  /* line 8, src/styles/components/_challengesnavigator.scss */
-  .challenge-nav .cn-tabs .cn-tab {
-    outline: none !important; }
+/* line 4, src/styles/components/_navigator.scss */
+.cn {
+  display: flex;
+  justify-content: center; }
+  /* line 7, src/styles/components/_navigator.scss */
+  .cn .cn-tabs {
+    width: 50.625rem; }
+    @media only screen and (max-width: 768px) {
+      /* line 7, src/styles/components/_navigator.scss */
+      .cn .cn-tabs {
+        width: 100%;
+        margin: 0 1.25rem; } }
+    /* line 13, src/styles/components/_navigator.scss */
+    .cn .cn-tabs .cn-tab {
+      outline: none !important; }
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1024,122 +1085,127 @@ p {
 .cv {
   display: flex;
   flex-direction: column;
-  align-items: center; }
-  /* line 8, src/styles/components/_consumptionvisualizer.scss */
+  align-items: center;
+  width: 27.5rem; }
+  @media only screen and (max-width: 768px) {
+    /* line 4, src/styles/components/_consumptionvisualizer.scss */
+    .cv {
+      width: 100%; } }
+  /* line 12, src/styles/components/_consumptionvisualizer.scss */
   .cv .cv-content-date {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    width: 100vw; }
-    /* line 14, src/styles/components/_consumptionvisualizer.scss */
+    width: 100%; }
+    /* line 18, src/styles/components/_consumptionvisualizer.scss */
     .cv .cv-content-date .cv-date-group {
       display: flex;
       flex-direction: column;
       width: 38vw;
       align-items: center;
       align-self: center; }
-      /* line 20, src/styles/components/_consumptionvisualizer.scss */
+      /* line 24, src/styles/components/_consumptionvisualizer.scss */
       .cv .cv-content-date .cv-date-group .cv-date {
         color: #e0e0e0; }
-        /* line 22, src/styles/components/_consumptionvisualizer.scss */
+        /* line 26, src/styles/components/_consumptionvisualizer.scss */
         .cv .cv-content-date .cv-date-group .cv-date::first-letter {
           text-transform: uppercase; }
-  /* line 28, src/styles/components/_consumptionvisualizer.scss */
+  /* line 32, src/styles/components/_consumptionvisualizer.scss */
   .cv .cv-load {
     min-height: 5.25rem;
     display: flex;
     align-items: center; }
-    /* line 32, src/styles/components/_consumptionvisualizer.scss */
+    /* line 36, src/styles/components/_consumptionvisualizer.scss */
     .cv .cv-load .cv-load-content {
       display: flex;
       flex-direction: row;
       align-items: center; }
-      /* line 36, src/styles/components/_consumptionvisualizer.scss */
+      /* line 40, src/styles/components/_consumptionvisualizer.scss */
       .cv .cv-load .cv-load-content .cv-load-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 0.5rem 0.5rem; }
-        /* line 41, src/styles/components/_consumptionvisualizer.scss */
+        /* line 45, src/styles/components/_consumptionvisualizer.scss */
         .cv .cv-load .cv-load-content .cv-load-section.cv-load-section-left {
           align-items: flex-end; }
-        /* line 44, src/styles/components/_consumptionvisualizer.scss */
+        /* line 48, src/styles/components/_consumptionvisualizer.scss */
         .cv .cv-load .cv-load-content .cv-load-section.cv-load-section-right {
           align-items: flex-start; }
-        /* line 47, src/styles/components/_consumptionvisualizer.scss */
+        /* line 51, src/styles/components/_consumptionvisualizer.scss */
         .cv .cv-load .cv-load-content .cv-load-section .cv-load-value {
           flex-direction: row; }
-          /* line 49, src/styles/components/_consumptionvisualizer.scss */
+          /* line 53, src/styles/components/_consumptionvisualizer.scss */
           .cv .cv-load .cv-load-content .cv-load-section .cv-load-value span {
             align-self: flex-end;
             margin-left: 0.5em; }
-  /* line 57, src/styles/components/_consumptionvisualizer.scss */
+  /* line 61, src/styles/components/_consumptionvisualizer.scss */
   .cv .cv-euro {
     display: flex;
     flex-direction: row; }
-    /* line 60, src/styles/components/_consumptionvisualizer.scss */
+    /* line 64, src/styles/components/_consumptionvisualizer.scss */
     .cv .cv-euro .cv-euro-link {
       text-decoration: none;
       color: transparent; }
-    /* line 64, src/styles/components/_consumptionvisualizer.scss */
+    /* line 68, src/styles/components/_consumptionvisualizer.scss */
     .cv .cv-euro .cv-euro-fluid {
       padding: 0 0.5rem;
       display: flex;
       align-items: center; }
-      /* line 68, src/styles/components/_consumptionvisualizer.scss */
+      /* line 72, src/styles/components/_consumptionvisualizer.scss */
       .cv .cv-euro .cv-euro-fluid .cv-euro-fluid-icon {
         margin-right: 0.5rem; }
-      /* line 71, src/styles/components/_consumptionvisualizer.scss */
+      /* line 75, src/styles/components/_consumptionvisualizer.scss */
       .cv .cv-euro .cv-euro-fluid div {
         padding-top: 0.2rem; }
-  /* line 76, src/styles/components/_consumptionvisualizer.scss */
+  /* line 80, src/styles/components/_consumptionvisualizer.scss */
   .cv .cv-info {
     min-height: 1.5rem;
     display: flex;
     align-items: center; }
-  /* line 81, src/styles/components/_consumptionvisualizer.scss */
+  /* line 85, src/styles/components/_consumptionvisualizer.scss */
   .cv .electricity {
     color: #d87b39; }
-  /* line 84, src/styles/components/_consumptionvisualizer.scss */
+  /* line 88, src/styles/components/_consumptionvisualizer.scss */
   .cv .electricity-compare {
     color: #e2bca1; }
-  /* line 87, src/styles/components/_consumptionvisualizer.scss */
+  /* line 91, src/styles/components/_consumptionvisualizer.scss */
   .cv .water {
     color: #3a98ec; }
-  /* line 90, src/styles/components/_consumptionvisualizer.scss */
+  /* line 94, src/styles/components/_consumptionvisualizer.scss */
   .cv .water-compare {
     color: #abd4fa; }
-  /* line 93, src/styles/components/_consumptionvisualizer.scss */
+  /* line 97, src/styles/components/_consumptionvisualizer.scss */
   .cv .gas {
     color: #45d1b8; }
-  /* line 96, src/styles/components/_consumptionvisualizer.scss */
+  /* line 100, src/styles/components/_consumptionvisualizer.scss */
   .cv .gas-compare {
     color: #a8f7e9; }
-  /* line 99, src/styles/components/_consumptionvisualizer.scss */
+  /* line 103, src/styles/components/_consumptionvisualizer.scss */
   .cv .multifluid {
     color: #ffffff; }
-  /* line 102, src/styles/components/_consumptionvisualizer.scss */
+  /* line 106, src/styles/components/_consumptionvisualizer.scss */
   .cv .multifluid-compare {
     color: #ffd597; }
-  /* line 105, src/styles/components/_consumptionvisualizer.scss */
+  /* line 109, src/styles/components/_consumptionvisualizer.scss */
   .cv .error {
     color: #d24444; }
-  /* line 108, src/styles/components/_consumptionvisualizer.scss */
+  /* line 112, src/styles/components/_consumptionvisualizer.scss */
   .cv .error-line {
     color: #d24444;
     cursor: pointer;
     display: flex;
     align-items: center; }
-  /* line 114, src/styles/components/_consumptionvisualizer.scss */
+  /* line 118, src/styles/components/_consumptionvisualizer.scss */
   .cv .underlined-error {
     border-bottom: solid 1px #d24444; }
-  /* line 117, src/styles/components/_consumptionvisualizer.scss */
+  /* line 121, src/styles/components/_consumptionvisualizer.scss */
   .cv .warning-icon {
     margin-right: 4px; }
-  /* line 120, src/styles/components/_consumptionvisualizer.scss */
+  /* line 124, src/styles/components/_consumptionvisualizer.scss */
   .cv .multifluid-compare {
     color: #ffd597; }
-  /* line 123, src/styles/components/_consumptionvisualizer.scss */
+  /* line 127, src/styles/components/_consumptionvisualizer.scss */
   .cv .cv-button {
     border: none;
     background: none;
@@ -1358,69 +1424,60 @@ p {
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14);
   border-top: unset;
   border-right: unset;
-  justify-content: flex-end;
-  z-index: 1;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  display: block;
-  width: 100%; }
+  z-index: 19; }
+  @media only screen and (max-width: 1023px) {
+    /* line 4, src/styles/components/_nav.scss */
+    .o-sidebar {
+      background-color: #25262b; } }
 
-/* line 18, src/styles/components/_nav.scss */
+/* line 21, src/styles/components/_nav.scss */
 .c-nav-link {
   padding: 0 1rem; }
-  /* line 20, src/styles/components/_nav.scss */
+  /* line 23, src/styles/components/_nav.scss */
   .c-nav-link .on {
     display: none; }
-  /* line 23, src/styles/components/_nav.scss */
+  /* line 26, src/styles/components/_nav.scss */
   .c-nav-link .off {
     display: block; }
 
-/* line 28, src/styles/components/_nav.scss */
-.c-nav {
-  display: flex;
-  list-style: none;
-  justify-content: space-around; }
-
-/* line 33, src/styles/components/_nav.scss */
+/* line 36, src/styles/components/_nav.scss */
 .c-nav-link .c-nav-icon {
   padding-right: 0.5rem;
   width: 50px;
   height: 36px;
   fill: none; }
 
-/* line 40, src/styles/components/_nav.scss */
+/* line 43, src/styles/components/_nav.scss */
 .c-nav-link.is-active {
   box-shadow: inset 0.25rem 0 0 0 #b2901b; }
 
-/* line 44, src/styles/components/_nav.scss */
+/* line 47, src/styles/components/_nav.scss */
 .c-nav-link.is-active .c-nav-icon {
   fill: #b2901b !important; }
 
-/* line 48, src/styles/components/_nav.scss */
+/* line 51, src/styles/components/_nav.scss */
 .c-nav-link.is-active {
   color: white;
   text-decoration: none; }
-  /* line 51, src/styles/components/_nav.scss */
+  /* line 54, src/styles/components/_nav.scss */
   .c-nav-link.is-active .on {
     display: block; }
-  /* line 54, src/styles/components/_nav.scss */
+  /* line 57, src/styles/components/_nav.scss */
   .c-nav-link.is-active .off {
     display: none; }
 
-@media only screen and (max-width: 768px) {
-  /* line 60, src/styles/components/_nav.scss */
+@media only screen and (max-width: 1023px) {
+  /* line 63, src/styles/components/_nav.scss */
   .o-sidebar {
     height: 56px; }
-  /* line 63, src/styles/components/_nav.scss */
+  /* line 66, src/styles/components/_nav.scss */
   .c-nav-link {
     padding: 0; }
-  /* line 67, src/styles/components/_nav.scss */
+  /* line 70, src/styles/components/_nav.scss */
   .c-nav-link .c-nav-icon {
     padding: 0;
-    margin: auto;
-    margin-bottom: 0.25rem; }
-  /* line 73, src/styles/components/_nav.scss */
+    margin: auto; }
+  /* line 75, src/styles/components/_nav.scss */
   .c-nav-link.is-active {
     box-shadow: unset; } }
 
@@ -1441,8 +1498,7 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem 1.5rem;
-  margin-bottom: 1rem; }
+  padding: 0.5rem 1.5rem; }
   @media only screen and (max-width: 768px) {
     /* line 5, src/styles/components/_indicators.scss */
     .fi-root {
@@ -1450,79 +1506,95 @@ p {
   /* line 15, src/styles/components/_indicators.scss */
   .fi-root .fi-content {
     min-height: 23.875rem;
-    width: 53.125rem; }
-    @media only screen and (max-width: 992px) {
-      /* line 15, src/styles/components/_indicators.scss */
-      .fi-root .fi-content {
-        width: 47.5rem; } }
+    width: 45.75rem; }
     @media only screen and (max-width: 768px) {
       /* line 15, src/styles/components/_indicators.scss */
       .fi-root .fi-content {
         width: 100%; } }
-    /* line 24, src/styles/components/_indicators.scss */
+    /* line 21, src/styles/components/_indicators.scss */
     .fi-root .fi-content .fi-header {
+      margin-top: 2.5rem;
+      margin-bottom: 1.25rem;
+      color: #e0e0e0; }
+  /* line 28, src/styles/components/_indicators.scss */
+  .fi-root .sfi-content {
+    min-height: 16rem;
+    width: 45.75rem; }
+    @media only screen and (max-width: 768px) {
+      /* line 28, src/styles/components/_indicators.scss */
+      .fi-root .sfi-content {
+        width: 100%; } }
+    /* line 34, src/styles/components/_indicators.scss */
+    .fi-root .sfi-content .sfi-header {
+      margin-top: 2.5rem;
+      margin-bottom: 1.25rem;
       color: #e0e0e0; }
-    /* line 27, src/styles/components/_indicators.scss */
-    .fi-root .fi-content .fi-loader {
-      min-height: 23.875rem;
+    /* line 39, src/styles/components/_indicators.scss */
+    .fi-root .sfi-content .sfi-redirect {
+      margin-bottom: 1.25rem;
       display: flex;
-      justify-content: center;
-      align-items: center; }
+      flex-wrap: wrap; }
+      /* line 43, src/styles/components/_indicators.scss */
+      .fi-root .sfi-content .sfi-redirect .redirect-card-link:nth-child(2) {
+        margin-left: 0.625rem; }
+      /* line 46, src/styles/components/_indicators.scss */
+      .fi-root .sfi-content .sfi-redirect .redirect-card-link {
+        flex: 1; }
 
-/* line 37, src/styles/components/_indicators.scss */
+/* line 54, src/styles/components/_indicators.scss */
 .fpi-link {
   color: transparent; }
 
-/* line 40, src/styles/components/_indicators.scss */
+/* line 57, src/styles/components/_indicators.scss */
 .fpi {
   display: flex;
   flex-direction: row;
   margin: 0.25rem 0.25rem;
   width: 100%; }
-  /* line 45, src/styles/components/_indicators.scss */
+  /* line 62, src/styles/components/_indicators.scss */
   .fpi .fpi-left {
     flex: 1;
     display: flex;
     flex-direction: column; }
-    /* line 49, src/styles/components/_indicators.scss */
+    /* line 66, src/styles/components/_indicators.scss */
     .fpi .fpi-left .fpi-title {
       align-content: flex-start;
       margin-bottom: 0.5rem; }
-    /* line 53, src/styles/components/_indicators.scss */
+    /* line 70, src/styles/components/_indicators.scss */
     .fpi .fpi-left .fpi-content {
       display: flex;
       flex-direction: row; }
-      /* line 56, src/styles/components/_indicators.scss */
+      /* line 73, src/styles/components/_indicators.scss */
       .fpi .fpi-left .fpi-content .fpi-content-icon {
         margin: 0.5rem 0; }
-      /* line 59, src/styles/components/_indicators.scss */
+      /* line 76, src/styles/components/_indicators.scss */
       .fpi .fpi-left .fpi-content .fpi-content-perf {
         margin: 0 1rem;
         align-self: center; }
-        /* line 62, src/styles/components/_indicators.scss */
+        /* line 79, src/styles/components/_indicators.scss */
         .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-result {
           color: #e0e0e0; }
-          /* line 64, src/styles/components/_indicators.scss */
+          /* line 81, src/styles/components/_indicators.scss */
           .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-result span {
             display: inline-block;
             padding-right: 0.25rem; }
-        /* line 69, src/styles/components/_indicators.scss */
+        /* line 86, src/styles/components/_indicators.scss */
         .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator {
           color: #a0a0a0; }
-          /* line 72, src/styles/components/_indicators.scss */
+          /* line 89, src/styles/components/_indicators.scss */
           .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator .fpi-content-perf-indicator-kpi.positive {
             color: #ffffff; }
-          /* line 75, src/styles/components/_indicators.scss */
+          /* line 92, src/styles/components/_indicators.scss */
           .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator .fpi-content-perf-indicator-kpi.positive {
             color: #cf6666; }
-          /* line 78, src/styles/components/_indicators.scss */
+          /* line 95, src/styles/components/_indicators.scss */
           .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator .fpi-content-perf-indicator-kpi.negative {
             color: #7fd771; }
-    /* line 85, src/styles/components/_indicators.scss */
+    /* line 102, src/styles/components/_indicators.scss */
     .fpi .fpi-left .fpi-footer {
       margin-top: 0.5rem;
       color: #a0a0a0; }
-  /* line 90, src/styles/components/_indicators.scss */
+  /* line 107, src/styles/components/_indicators.scss */
   .fpi .fpi-right {
     align-self: center; }
 
@@ -1547,147 +1619,180 @@ p {
   /* line 11, src/styles/components/_challenges.scss */
   .ccc-root .ccc-content {
     min-height: 9rem;
-    width: 53.125rem; }
-    @media only screen and (max-width: 992px) {
-      /* line 11, src/styles/components/_challenges.scss */
-      .ccc-root .ccc-content {
-        width: 47.5rem; } }
+    width: 45.75rem; }
     @media only screen and (max-width: 768px) {
       /* line 11, src/styles/components/_challenges.scss */
       .ccc-root .ccc-content {
         width: 100%; } }
-    /* line 20, src/styles/components/_challenges.scss */
+    /* line 17, src/styles/components/_challenges.scss */
     .ccc-root .ccc-content .ccc-header {
+      margin-top: 0.375rem;
+      margin-bottom: 1.25rem;
       color: #e0e0e0; }
 
-/* line 26, src/styles/components/_challenges.scss */
-.loc-content .timeline-line {
-  background-color: #e0e0e0;
-  width: 1px;
-  height: 100vh;
-  position: fixed;
-  left: 3.5rem; }
-
-/* line 33, src/styles/components/_challenges.scss */
-.loc-content .list-of-challenge-cards {
-  padding: 3rem 0; }
+/* line 24, src/styles/components/_challenges.scss */
+.loc-root {
+  display: flex;
+  justify-content: center; }
+  /* line 27, src/styles/components/_challenges.scss */
+  .loc-root .loc-content {
+    width: 100%;
+    max-width: 53rem;
+    display: grid; }
+    @media only screen and (max-width: 768px) {
+      /* line 27, src/styles/components/_challenges.scss */
+      .loc-root .loc-content {
+        display: block; } }
+    /* line 34, src/styles/components/_challenges.scss */
+    .loc-root .loc-content .timeline-line {
+      background-color: #e0e0e0;
+      width: 1px;
+      height: calc(100vh);
+      grid-column: 1;
+      grid-row: 1;
+      position: unset;
+      margin-left: 3.8rem; }
+      @media only screen and (max-width: 1023px) {
+        /* line 34, src/styles/components/_challenges.scss */
+        .loc-root .loc-content .timeline-line {
+          height: calc(100vh - 229px); } }
+      @media only screen and (max-width: 768px) {
+        /* line 34, src/styles/components/_challenges.scss */
+        .loc-root .loc-content .timeline-line {
+          height: 100vh;
+          display: block;
+          position: fixed; } }
+    /* line 51, src/styles/components/_challenges.scss */
+    .loc-root .loc-content .list-of-challenge-cards {
+      padding-top: 1rem;
+      width: 100%;
+      grid-column: 1;
+      grid-row: 1; }
+      @media only screen and (max-width: 768px) {
+        /* line 51, src/styles/components/_challenges.scss */
+        .loc-root .loc-content .list-of-challenge-cards {
+          display: block; } }
 
-/* line 39, src/styles/components/_challenges.scss */
+/* line 65, src/styles/components/_challenges.scss */
 .cli-link {
   color: black;
   text-decoration: none; }
 
-/* line 43, src/styles/components/_challenges.scss */
+/* line 69, src/styles/components/_challenges.scss */
 .cli {
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  margin: 1rem 0.5rem;
+  margin: 2rem 0.5rem;
   border-radius: 2px; }
-  /* line 49, src/styles/components/_challenges.scss */
+  @media only screen and (max-width: 768px) {
+    /* line 69, src/styles/components/_challenges.scss */
+    .cli {
+      margin: 1rem 0.5rem; } }
+  /* line 78, src/styles/components/_challenges.scss */
   .cli.cli-available {
     background: linear-gradient(180deg, #61F0F2 0%, #48C2C4 100%);
     -webkit-transform: translateZ(0);
     transform: translateZ(0); }
-  /* line 54, src/styles/components/_challenges.scss */
+  /* line 83, src/styles/components/_challenges.scss */
   .cli.cli-ongoing {
     border: 1px solid #58FFFF;
     background: #121212;
     -webkit-transform: translateZ(0);
     transform: translateZ(0); }
-  /* line 60, src/styles/components/_challenges.scss */
+  /* line 89, src/styles/components/_challenges.scss */
   .cli .cli-left {
     flex: 1;
     display: flex;
     flex-direction: column;
     padding-left: 1.415rem; }
-    /* line 65, src/styles/components/_challenges.scss */
+    /* line 94, src/styles/components/_challenges.scss */
     .cli .cli-left .cli-content {
       display: flex;
       flex-direction: row; }
-      /* line 68, src/styles/components/_challenges.scss */
+      /* line 97, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .cli-content-icon {
         margin: 0.5rem 0; }
-      /* line 71, src/styles/components/_challenges.scss */
+      /* line 100, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .cli-content-title {
         color: #ffffff;
         margin: 0 1rem;
         align-self: center; }
-      /* line 76, src/styles/components/_challenges.scss */
+      /* line 105, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .subtitle-finished {
         color: #a0a0a0; }
-      /* line 79, src/styles/components/_challenges.scss */
+      /* line 108, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .title-finished {
         color: #e0e0e0; }
-      /* line 82, src/styles/components/_challenges.scss */
+      /* line 111, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .subtitle-ongoing {
         color: #58FFFF; }
-      /* line 85, src/styles/components/_challenges.scss */
+      /* line 114, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .title-ongoing {
         color: #ffffff; }
-      /* line 88, src/styles/components/_challenges.scss */
+      /* line 117, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .subtitle-available {
         color: #121212; }
-      /* line 91, src/styles/components/_challenges.scss */
+      /* line 120, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .title-available {
         color: #121212; }
-      /* line 94, src/styles/components/_challenges.scss */
+      /* line 123, src/styles/components/_challenges.scss */
       .cli .cli-left .cli-content .title-locked {
         color: #a0a0a0;
         opacity: 0.35; }
-  /* line 100, src/styles/components/_challenges.scss */
+  /* line 129, src/styles/components/_challenges.scss */
   .cli .cli-right {
     align-self: center;
     padding-right: 1.2rem; }
-    /* line 103, src/styles/components/_challenges.scss */
+    /* line 132, src/styles/components/_challenges.scss */
     .cli .cli-right.cli-right-ongoing {
       padding-right: calc(1.2rem + 2px); }
-    /* line 106, src/styles/components/_challenges.scss */
+    /* line 135, src/styles/components/_challenges.scss */
     .cli .cli-right.cli-right-available {
       padding-right: calc(1.2rem + 2px); }
 
-/* line 113, src/styles/components/_challenges.scss */
+/* line 142, src/styles/components/_challenges.scss */
 .cc-link {
   color: black;
   text-decoration: none; }
 
-/* line 117, src/styles/components/_challenges.scss */
+/* line 146, src/styles/components/_challenges.scss */
 .cc {
   cursor: pointer;
   display: flex;
   flex-direction: row;
   margin: 0.25rem 0.25rem;
   width: 100%; }
-  /* line 123, src/styles/components/_challenges.scss */
+  /* line 152, src/styles/components/_challenges.scss */
   .cc .cc-content-left {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: inherit; }
-    /* line 129, src/styles/components/_challenges.scss */
+    /* line 158, src/styles/components/_challenges.scss */
     .cc .cc-content-left .cc-content-title {
       color: #ffffff; }
-      /* line 131, src/styles/components/_challenges.scss */
+      /* line 160, src/styles/components/_challenges.scss */
       .cc .cc-content-left .cc-content-title.cc-content-title-padding {
         padding-top: 1rem; }
-    /* line 135, src/styles/components/_challenges.scss */
+    /* line 164, src/styles/components/_challenges.scss */
     .cc .cc-content-left .cc-content-progress {
       margin-top: 1rem; }
-    /* line 138, src/styles/components/_challenges.scss */
+    /* line 167, src/styles/components/_challenges.scss */
     .cc .cc-content-left .cc-content-timeline {
       padding: 0 0.5rem; }
-    /* line 141, src/styles/components/_challenges.scss */
+    /* line 170, src/styles/components/_challenges.scss */
     .cc .cc-content-left .cc-content-visu {
       padding: 1rem 0; }
-  /* line 145, src/styles/components/_challenges.scss */
+  /* line 174, src/styles/components/_challenges.scss */
   .cc .cc-content-right {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     align-self: center; }
-    /* line 151, src/styles/components/_challenges.scss */
+    /* line 180, src/styles/components/_challenges.scss */
     .cc .cc-content-right .cc-notification {
       display: flex;
       align-items: center;
@@ -1699,110 +1804,133 @@ p {
       color: black;
       margin-right: 1rem; }
 
-/* line 166, src/styles/components/_challenges.scss */
+/* line 195, src/styles/components/_challenges.scss */
 .cm-content {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   padding: 1.5rem 1rem 0.5rem;
-  width: 90%; }
-  /* line 173, src/styles/components/_challenges.scss */
+  width: 22.125rem; }
+  @media only screen and (max-width: 768px) {
+    /* line 195, src/styles/components/_challenges.scss */
+    .cm-content {
+      width: 90%; } }
+  /* line 205, src/styles/components/_challenges.scss */
+  .cm-content .win {
+    background: #eed582;
+    background: Linear-gradient(90deg, #bf723b 0%, #dd9a2b 26.04%, #f6d74c 45.31%, #d1880d 75%, #a05b11 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; }
+  /* line 218, src/styles/components/_challenges.scss */
+  .cm-content .defeat {
+    background: #eed582;
+    background: Linear-gradient(90deg, #a66340 0%, #ae5f38 33.33%, #9e4e24 51.56%, #a4573a 66.67%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; }
+  /* line 230, src/styles/components/_challenges.scss */
   .cm-content .cm-title {
-    text-align: center; }
-  /* line 176, src/styles/components/_challenges.scss */
+    text-align: center;
+    margin-bottom: 210px; }
+  /* line 234, src/styles/components/_challenges.scss */
   .cm-content .cm-win-badge-star {
     display: grid;
     align-items: center;
-    justify-items: center; }
-    /* line 180, src/styles/components/_challenges.scss */
+    justify-items: center;
+    position: absolute;
+    top: 22px; }
+    /* line 240, src/styles/components/_challenges.scss */
     .cm-content .cm-win-badge-star .cm-win-badge {
       grid-column: 1;
       grid-row: 1;
       z-index: 1; }
-    /* line 185, src/styles/components/_challenges.scss */
+    /* line 245, src/styles/components/_challenges.scss */
     .cm-content .cm-win-badge-star .cm-win-star {
       grid-column: 1;
       grid-row: 1; }
-  /* line 190, src/styles/components/_challenges.scss */
+  /* line 250, src/styles/components/_challenges.scss */
   .cm-content .cm-badge {
     margin: 2rem; }
-  /* line 193, src/styles/components/_challenges.scss */
+  /* line 253, src/styles/components/_challenges.scss */
   .cm-content .cm-button-valid {
     margin-top: 1rem;
     width: 100%; }
-  /* line 197, src/styles/components/_challenges.scss */
+  /* line 257, src/styles/components/_challenges.scss */
   .cm-content .cm-txt {
     text-align: center;
-    margin-bottom: 1rem; }
+    margin-bottom: 1rem;
+    width: 100%; }
+  /* line 262, src/styles/components/_challenges.scss */
+  .cm-content .cm-text-new-available {
+    margin-top: 1.25rem; }
 
-/* line 202, src/styles/components/_challenges.scss */
+/* line 266, src/styles/components/_challenges.scss */
 .cm-overspent-value {
   color: #D25959; }
 
-/* line 207, src/styles/components/_challenges.scss */
+/* line 271, src/styles/components/_challenges.scss */
 .list-of-days-duration {
   display: flex;
   flex-direction: row;
   justify-content: center;
   margin-top: 1rem;
   width: 100%; }
-  /* line 213, src/styles/components/_challenges.scss */
+  /* line 277, src/styles/components/_challenges.scss */
   .list-of-days-duration .day-solo {
     display: flex;
     flex-direction: column;
     width: 100%; }
-    /* line 217, src/styles/components/_challenges.scss */
+    /* line 281, src/styles/components/_challenges.scss */
     .list-of-days-duration .day-solo .day-line-label {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       width: 100%; }
-      /* line 223, src/styles/components/_challenges.scss */
+      /* line 287, src/styles/components/_challenges.scss */
       .list-of-days-duration .day-solo .day-line-label .date-dash {
         width: 50%;
         height: 2px;
         background-color: #7b7b7b; }
-      /* line 228, src/styles/components/_challenges.scss */
+      /* line 292, src/styles/components/_challenges.scss */
       .list-of-days-duration .day-solo .day-line-label .past {
         background-color: #58FFFF; }
-      /* line 231, src/styles/components/_challenges.scss */
+      /* line 295, src/styles/components/_challenges.scss */
       .list-of-days-duration .day-solo .day-line-label .futur {
         background-color: #7b7b7b; }
-      /* line 234, src/styles/components/_challenges.scss */
+      /* line 298, src/styles/components/_challenges.scss */
       .list-of-days-duration .day-solo .day-line-label .date-label {
         width: 0.625rem;
         height: 0.625rem;
         border-radius: 50%;
         position: absolute; }
-    /* line 241, src/styles/components/_challenges.scss */
+    /* line 305, src/styles/components/_challenges.scss */
     .list-of-days-duration .day-solo .day-letter {
       margin-top: 0.8rem;
       text-align: center;
       color: #a0a0a0; }
-    /* line 246, src/styles/components/_challenges.scss */
+    /* line 310, src/styles/components/_challenges.scss */
     .list-of-days-duration .day-solo .day-date {
       margin-top: 0.2rem;
       text-align: center;
       color: #a0a0a0; }
 
-/* line 255, src/styles/components/_challenges.scss */
+/* line 319, src/styles/components/_challenges.scss */
 .view-start-date {
   padding: 0.25rem 0;
   color: #58FFFF; }
 
-/* line 261, src/styles/components/_challenges.scss */
+/* line 325, src/styles/components/_challenges.scss */
 .pile-energy-follow {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%; }
-  /* line 267, src/styles/components/_challenges.scss */
+  /* line 331, src/styles/components/_challenges.scss */
   .pile-energy-follow .pile-section {
     display: grid; }
-    /* line 269, src/styles/components/_challenges.scss */
+    /* line 333, src/styles/components/_challenges.scss */
     .pile-energy-follow .pile-section .filter-pile {
       grid-column: 1;
       grid-row: 1;
@@ -1814,36 +1942,38 @@ p {
       opacity: 0.8;
       background-color: #121212;
       z-index: 1; }
-    /* line 281, src/styles/components/_challenges.scss */
+    /* line 345, src/styles/components/_challenges.scss */
     .pile-energy-follow .pile-section .pile-icon {
       grid-column: 1;
       grid-row: 1;
       margin: -25px 0; }
-  /* line 287, src/styles/components/_challenges.scss */
+  /* line 351, src/styles/components/_challenges.scss */
   .pile-energy-follow .max-energy {
     color: #7b7b7b; }
-  /* line 290, src/styles/components/_challenges.scss */
+  /* line 354, src/styles/components/_challenges.scss */
   .pile-energy-follow .no-values-section {
     color: #ffffff;
     padding-right: 1rem; }
 
-/* line 297, src/styles/components/_challenges.scss */
+/* line 361, src/styles/components/_challenges.scss */
+.ongoing-challenge {
+  min-height: 620px; }
+
+/* line 364, src/styles/components/_challenges.scss */
 .cp-root {
-  height: 100vh;
-  width: 100vw;
-  position: fixed; }
-  /* line 301, src/styles/components/_challenges.scss */
+  width: 100%; }
+  /* line 366, src/styles/components/_challenges.scss */
   .cp-root .cp-content, .cp-root .cp-content.--locked {
     display: flex;
     align-items: center;
     flex-direction: column;
     color: #e0e0e0;
-    height: 85vh;
+    height: 84vh;
     justify-content: space-between; }
-    /* line 310, src/styles/components/_challenges.scss */
+    /* line 374, src/styles/components/_challenges.scss */
     .cp-root .--locked.cp-content {
       justify-content: center; }
-    /* line 314, src/styles/components/_challenges.scss */
+    /* line 378, src/styles/components/_challenges.scss */
     .cp-root .cp-content .cp-info {
       display: flex;
       flex-direction: column;
@@ -1851,85 +1981,96 @@ p {
       justify-content: space-between;
       background-color: #121212;
       width: 100%;
+      height: 60%;
       padding-top: 2rem;
       padding-bottom: 0.5rem; }
-      /* line 323, src/styles/components/_challenges.scss */
+      /* line 388, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-icon {
         margin-bottom: 1rem; }
-      /* line 326, src/styles/components/_challenges.scss */
+      /* line 391, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-icon-available {
         margin: 2rem; }
-      /* line 329, src/styles/components/_challenges.scss */
+      /* line 394, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-date {
         color: #a0a0a0;
         text-align: center;
         margin-top: 1rem; }
-      /* line 334, src/styles/components/_challenges.scss */
+      /* line 399, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-title {
         color: #e0e0e0;
         text-align: center;
         margin-top: 0.5rem; }
-      /* line 339, src/styles/components/_challenges.scss */
+      /* line 404, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-result {
         color: #e0e0e0;
         text-align: center;
         margin-top: 1.5rem;
         margin-bottom: 0.5rem; }
-        /* line 344, src/styles/components/_challenges.scss */
+        /* line 409, src/styles/components/_challenges.scss */
         .cp-root .cp-content .cp-info .cp-result .cp-result-positif {
           color: #7fd771; }
-        /* line 347, src/styles/components/_challenges.scss */
+        /* line 412, src/styles/components/_challenges.scss */
         .cp-root .cp-content .cp-info .cp-result .cp-result-negatif {
           color: #d24444; }
-      /* line 351, src/styles/components/_challenges.scss */
+      /* line 416, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-description {
         text-align: center;
         margin-top: 1rem;
         margin-bottom: 0.5rem;
         margin-left: 1.25rem;
-        margin-right: 1.25rem; }
-      /* line 358, src/styles/components/_challenges.scss */
+        margin-right: 1.25rem;
+        max-width: 53rem; }
+      /* line 424, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-info .cp-valid {
         justify-content: center;
         display: flex;
         flex-direction: row;
-        width: 100%;
-        margin-top: 0.75rem; }
-        /* line 364, src/styles/components/_challenges.scss */
+        width: 90%;
+        margin-top: 0.75rem;
+        max-width: 53rem; }
+        /* line 431, src/styles/components/_challenges.scss */
         .cp-root .cp-content .cp-info .cp-valid .cp-left-button {
           margin-right: 0.25rem;
-          margin-left: 1.25rem;
+          margin-left: 0;
           width: 100%; }
-        /* line 369, src/styles/components/_challenges.scss */
+        /* line 436, src/styles/components/_challenges.scss */
         .cp-root .cp-content .cp-info .cp-valid .cp-right-button {
           margin-left: 0.25rem;
-          margin-right: 1.25rem;
+          margin-right: 0;
           width: 100%; }
-    /* line 376, src/styles/components/_challenges.scss */
+    /* line 443, src/styles/components/_challenges.scss */
     .cp-root .cp-content .cp-follow {
       width: 90%;
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-bottom: 1rem; }
-    /* line 383, src/styles/components/_challenges.scss */
+      margin-bottom: 1rem;
+      max-width: 53rem; }
+    /* line 451, src/styles/components/_challenges.scss */
     .cp-root .cp-content .cp-valid-locked {
       margin-top: 2rem;
-      width: 80%; }
-    /* line 387, src/styles/components/_challenges.scss */
+      width: 80%;
+      max-width: 53rem; }
+    /* line 456, src/styles/components/_challenges.scss */
     .cp-root .cp-content .cp-bottom {
-      padding: 1rem 1.25rem;
+      padding: 1.25rem 1.25rem;
       width: 90%;
       display: flex;
       flex-direction: column;
-      justify-content: space-between; }
-      /* line 393, src/styles/components/_challenges.scss */
+      justify-content: space-between;
+      max-width: 53rem;
+      margin-bottom: 2rem; }
+      @media only screen and (max-width: 768px) {
+        /* line 456, src/styles/components/_challenges.scss */
+        .cp-root .cp-content .cp-bottom {
+          margin-bottom: 0; } }
+      /* line 467, src/styles/components/_challenges.scss */
       .cp-root .cp-content .cp-bottom .cp-eg-content {
         width: 100%; }
-        /* line 395, src/styles/components/_challenges.scss */
+        /* line 469, src/styles/components/_challenges.scss */
         .cp-root .cp-content .cp-bottom .cp-eg-content .linked-ecogestures {
           text-transform: uppercase; }
-        /* line 398, src/styles/components/_challenges.scss */
+        /* line 472, src/styles/components/_challenges.scss */
         .cp-root .cp-content .cp-bottom .cp-eg-content .cp-ecogestures {
           width: 100%;
           display: flex;
@@ -1955,70 +2096,83 @@ p {
   justify-content: center;
   padding: 1rem 1.5rem; }
   /* line 11, src/styles/components/_ecogesture.scss */
+  .ecogesture-root .negawatt-button-content {
+    width: calc(53rem - 2%);
+    margin: 0 1%; }
+    @media only screen and (max-width: 768px) {
+      /* line 11, src/styles/components/_ecogesture.scss */
+      .ecogesture-root .negawatt-button-content {
+        width: 97%; } }
+    @media only screen and (max-width: 1023px) {
+      /* line 11, src/styles/components/_ecogesture.scss */
+      .ecogesture-root .negawatt-button-content {
+        width: 97%; } }
+  /* line 21, src/styles/components/_ecogesture.scss */
   .ecogesture-root .ecogesture-content {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around; }
-    /* line 15, src/styles/components/_ecogesture.scss */
+    justify-content: space-around;
+    width: 53rem; }
+    @media only screen and (max-width: 768px) {
+      /* line 21, src/styles/components/_ecogesture.scss */
+      .ecogesture-root .ecogesture-content {
+        width: 100%; } }
+    @media only screen and (max-width: 1023px) {
+      /* line 21, src/styles/components/_ecogesture.scss */
+      .ecogesture-root .ecogesture-content {
+        width: 100%; } }
+    /* line 32, src/styles/components/_ecogesture.scss */
     .ecogesture-root .ecogesture-content .ecogesture-list-item {
       width: 48%;
       height: 7rem;
       margin: 1% 1%; }
-    /* line 20, src/styles/components/_ecogesture.scss */
+    /* line 37, src/styles/components/_ecogesture.scss */
     .ecogesture-root .ecogesture-content .ecogesture-list-item > button {
       height: 100%;
       overflow: hidden; }
 
-/* line 27, src/styles/components/_ecogesture.scss */
-.ccc-content {
-  margin: 0 20rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 27, src/styles/components/_ecogesture.scss */
-    .ccc-content {
-      margin: 0; } }
-
-/* line 35, src/styles/components/_ecogesture.scss */
+/* line 45, src/styles/components/_ecogesture.scss */
 .ec-link {
   color: black; }
 
-/* line 38, src/styles/components/_ecogesture.scss */
+/* line 48, src/styles/components/_ecogesture.scss */
 .ec {
   display: flex;
   width: 100%;
   height: 100%; }
-  /* line 42, src/styles/components/_ecogesture.scss */
+  /* line 52, src/styles/components/_ecogesture.scss */
   .ec .ec-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-end; }
-    /* line 47, src/styles/components/_ecogesture.scss */
+    /* line 57, src/styles/components/_ecogesture.scss */
     .ec .ec-content .ec-content-short-name {
       display: flex;
       flex: 1;
       align-items: center; }
-    /* line 53, src/styles/components/_ecogesture.scss */
+    /* line 63, src/styles/components/_ecogesture.scss */
     .ec .ec-content .ec-content-nwh-true {
       margin-top: 0.25rem;
       color: #121212; }
-    /* line 57, src/styles/components/_ecogesture.scss */
+    /* line 67, src/styles/components/_ecogesture.scss */
     .ec .ec-content .ec-content-nwh-undefined {
       margin-top: 0.25rem;
       color: #a0a0a0; }
 
-/* line 63, src/styles/components/_ecogesture.scss */
+/* line 73, src/styles/components/_ecogesture.scss */
 .cp-eg-1 {
   width: 100%;
   margin-right: 0.25rem;
   text-align: center; }
 
-/* line 68, src/styles/components/_ecogesture.scss */
+/* line 78, src/styles/components/_ecogesture.scss */
 .cp-eg-2 {
   width: 100%;
   margin-left: 0.25rem;
   text-align: center; }
 
-/* line 75, src/styles/components/_ecogesture.scss */
+/* line 85, src/styles/components/_ecogesture.scss */
 .em-header {
   color: #e0e0e0;
   border-bottom: 1px solid rgba(163, 163, 163, 0.4);
@@ -2028,48 +2182,66 @@ p {
   display: flex;
   justify-content: center; }
 
-/* line 84, src/styles/components/_ecogesture.scss */
+/* line 94, src/styles/components/_ecogesture.scss */
 .em-icon {
   margin-bottom: 1rem; }
 
-/* line 87, src/styles/components/_ecogesture.scss */
-.em-description {
-  text-align: justify; }
-
-/* line 90, src/styles/components/_ecogesture.scss */
+/* line 97, src/styles/components/_ecogesture.scss */
 .em-title {
   margin-bottom: 0; }
 
-/* line 93, src/styles/components/_ecogesture.scss */
+/* line 100, src/styles/components/_ecogesture.scss */
 .em-detail {
   display: flex;
   flex-direction: row;
   margin: 0.5em 0; }
-  /* line 97, src/styles/components/_ecogesture.scss */
+  /* line 104, src/styles/components/_ecogesture.scss */
   .em-detail .em-detail-nwh {
     display: flex;
     flex: 1;
     align-self: flex-start;
     margin-top: 0.65rem;
     color: var(--textDark); }
-    /* line 103, src/styles/components/_ecogesture.scss */
+    /* line 110, src/styles/components/_ecogesture.scss */
     .em-detail .em-detail-nwh .em-detail-nwh-unit {
       margin-left: 0.2rem; }
-  /* line 107, src/styles/components/_ecogesture.scss */
+  /* line 114, src/styles/components/_ecogesture.scss */
   .em-detail .em-picto-flow {
     display: flex;
     align-self: flex-end; }
-    /* line 110, src/styles/components/_ecogesture.scss */
+    /* line 117, src/styles/components/_ecogesture.scss */
     .em-detail .em-picto-flow .em-pic-content {
       margin: 0.3em; }
 
-/* line 116, src/styles/components/_ecogesture.scss */
+/* line 123, src/styles/components/_ecogesture.scss */
 .em-content-box {
+  max-height: 25rem;
+  overflow: auto;
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  max-height: 70vh;
-  padding: 0.5rem 1.5rem;
-  overflow: auto; }
+  justify-content: center;
+  /* width */
+  /* Track */
+  /* Handle */ }
+  /* line 130, src/styles/components/_ecogesture.scss */
+  .em-content-box::-webkit-scrollbar {
+    width: 10px; }
+  /* line 134, src/styles/components/_ecogesture.scss */
+  .em-content-box::-webkit-scrollbar-track {
+    background: #3e4045; }
+  /* line 138, src/styles/components/_ecogesture.scss */
+  .em-content-box::-webkit-scrollbar-thumb {
+    background: #6f7074; }
+  /* line 141, src/styles/components/_ecogesture.scss */
+  .em-content-box .em-content-box-text {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 1.5rem;
+    width: 22.125rem; }
+    @media only screen and (max-width: 768px) {
+      /* line 141, src/styles/components/_ecogesture.scss */
+      .em-content-box .em-content-box-text {
+        width: 100%; } }
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -2104,24 +2276,32 @@ p {
     position: fixed;
     top: 50%;
     left: 50%;
-    width: 320px;
+    width: 36rem;
     max-width: 100%;
-    max-height: 90%;
+    max-height: 30rem;
     transform: translate(-50%, -50%);
     padding: 1rem 0;
     box-sizing: border-box;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
     border-radius: 4px; }
-    /* line 32, src/styles/components/_modal.scss */
+    @media only screen and (max-width: 768px) {
+      /* line 19, src/styles/components/_modal.scss */
+      .modal-overlay .modal-box {
+        width: 20rem; } }
+    @media only screen and (max-width: 768px) {
+      /* line 19, src/styles/components/_modal.scss */
+      .modal-overlay .modal-box {
+        max-height: unset; } }
+    /* line 38, src/styles/components/_modal.scss */
     .modal-overlay .modal-box.modal-box-bordered {
       border: 1px solid #58FFFF40; }
-    /* line 35, src/styles/components/_modal.scss */
+    /* line 41, src/styles/components/_modal.scss */
     .modal-overlay .modal-box .modal-close-button {
       position: absolute;
       top: 0.5rem;
       right: 0.5rem;
       padding: 5px 5px; }
-    /* line 41, src/styles/components/_modal.scss */
+    /* line 47, src/styles/components/_modal.scss */
     .modal-overlay .modal-box .modal-content {
       display: flex;
       flex-direction: column;
@@ -2145,53 +2325,51 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.5rem;
-  margin-top: 1.5rem; }
-  /* line 12, src/styles/components/_faq.scss */
+  padding: 0 1.5rem; }
+  /* line 11, src/styles/components/_faq.scss */
   .faq-root .faq-content {
-    width: 53.125rem; }
-    @media only screen and (max-width: 992px) {
-      /* line 12, src/styles/components/_faq.scss */
-      .faq-root .faq-content {
-        width: 47.5rem; } }
+    margin-bottom: -1rem;
+    width: 45.75rem; }
     @media only screen and (max-width: 768px) {
-      /* line 12, src/styles/components/_faq.scss */
+      /* line 11, src/styles/components/_faq.scss */
       .faq-root .faq-content {
         width: 100%; } }
-    /* line 20, src/styles/components/_faq.scss */
+    /* line 17, src/styles/components/_faq.scss */
     .faq-root .faq-content .faq-header {
+      margin-top: 2.5rem;
+      margin-bottom: 1.25rem;
       color: #e0e0e0; }
-    /* line 23, src/styles/components/_faq.scss */
+    /* line 22, src/styles/components/_faq.scss */
     .faq-root .faq-content .faq-content-detail {
       padding-bottom: 1rem; }
 
-/* line 29, src/styles/components/_faq.scss */
+/* line 28, src/styles/components/_faq.scss */
 .faq-card-link {
   color: black; }
 
-/* line 32, src/styles/components/_faq.scss */
+/* line 31, src/styles/components/_faq.scss */
 .faq-card {
   display: flex;
   flex-direction: row;
   margin: -0.75rem 0;
   width: 100%; }
   @media only screen and (max-width: 768px) {
-    /* line 32, src/styles/components/_faq.scss */
+    /* line 31, src/styles/components/_faq.scss */
     .faq-card {
       width: 100%; } }
-  /* line 40, src/styles/components/_faq.scss */
+  /* line 39, src/styles/components/_faq.scss */
   .faq-card .faq-card-content {
     display: flex;
     flex-direction: row; }
-    /* line 43, src/styles/components/_faq.scss */
+    /* line 42, src/styles/components/_faq.scss */
     .faq-card .faq-card-content .faq-card-content-icon {
       margin: 0.5rem 0; }
-    /* line 46, src/styles/components/_faq.scss */
+    /* line 45, src/styles/components/_faq.scss */
     .faq-card .faq-card-content .faq-card-content-title {
       margin: 0 1rem;
       align-self: center; }
 
-/* line 54, src/styles/components/_faq.scss */
+/* line 53, src/styles/components/_faq.scss */
 .faq-view-root {
   display: flex;
   flex-direction: column;
@@ -2199,15 +2377,11 @@ p {
   justify-content: center;
   padding: 1rem 0;
   margin-top: 1.5rem; }
-  /* line 61, src/styles/components/_faq.scss */
+  /* line 60, src/styles/components/_faq.scss */
   .faq-view-root .faq-view-content {
-    width: 53.125rem; }
-    @media only screen and (max-width: 992px) {
-      /* line 61, src/styles/components/_faq.scss */
-      .faq-view-root .faq-view-content {
-        width: 47.5rem; } }
+    width: 45.75rem; }
     @media only screen and (max-width: 768px) {
-      /* line 61, src/styles/components/_faq.scss */
+      /* line 60, src/styles/components/_faq.scss */
       .faq-view-root .faq-view-content {
         width: 100%; } }
 
@@ -2260,7 +2434,7 @@ p {
       flex-direction: row;
       width: 60%;
       height: 90px; }
-      @media only screen and (max-width: 992px) {
+      @media only screen and (max-width: 1023px) {
         /* line 33, src/styles/components/_splash.scss */
         .splash-root .splash-content .splash-step {
           width: 80%; } }
@@ -2299,7 +2473,7 @@ p {
     .splash-root .splash-footer .splash-footer-button {
       max-width: 50vw; }
 
-/* line 27, src/styles/index.scss */
+/* line 26, src/styles/index.scss */
 :root {
   --blue: #58FFFF;
   --blue40: #58FFFF40;
@@ -2333,10 +2507,10 @@ p {
   --gasColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(4, 106, 88, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #45d1b8;
   --waterColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(2, 93, 174, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #3a98ec; }
 
-/* line 61, src/styles/index.scss */
+/* line 60, src/styles/index.scss */
 .application {
   overflow-x: hidden; }
   @media only screen and (max-width: 768px) {
-    /* line 61, src/styles/index.scss */
+    /* line 60, src/styles/index.scss */
     .application {
       min-height: 100vh; } }