diff --git a/config.json b/config.json
index 256bae08239f87fa2fbfa29dc817795bd9d376fc..2984308a115be5b06c643a6b4cb842772fc4cfcd 100644
--- a/config.json
+++ b/config.json
@@ -10,7 +10,7 @@
         "type": "ELECTRICITY",
         "oauth": true,
         "slug": "enedisgrandlyon",
-        "cron": "0 30 10 * * *"
+        "cron": "0 30 6 * * *"
       },
       "siteLink": "https://mon-compte-client.enedis.fr/"
     },
@@ -24,7 +24,7 @@
         "type": "WATER",
         "oauth": false,
         "slug": "eglgrandlyon",
-        "cron": "0 30 8 * * *"
+        "cron": "0 30 6 * * *"
       },
       "siteLink": "https://agence.eaudugrandlyon.com/inscription.aspx"
     },
@@ -38,7 +38,7 @@
         "type": "GAS",
         "oauth": false,
         "slug": "grdfgrandlyon",
-        "cron": "0 30 8 * * *"
+        "cron": "0 30 6 * * *"
       },
       "siteLink": "https://monespace.grdf.fr/monespace/connexion"
     }
diff --git a/manifest.webapp b/manifest.webapp
index 55d877fe577a25a3709b923ae387c556633b8262..d009c17c1a810d0577442bb82438906582e13076 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
   "slug": "ecolyo",
   "icon": "icon.svg",
   "categories": ["energy"],
-  "version": "0.1.6",
+  "version": "0.1.8",
   "licence": "AGPL-3.0",
   "editor": "Métropole de Lyon",
   "default_locale": "fr",
diff --git a/package.json b/package.json
index a7875687fa3301a91b601da8c92b3fabf0bba464..d9b581940639717207c1cf8f94cae54438c458d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ecolyo",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "scripts": {
     "tx": "tx pull --all || true",
     "lint": "yarn lint:js && yarn lint:styles",
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index eb900a5fe7d363a888afa9bd96e9457bce2ecdc1..845934e866f31189f663ba6bbdfe080c7654bff4 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -18,19 +18,19 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 
diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx
index acd82276b717ef77237fae00250e906da40b2152..db62f1cf289b8dd44496ef9225d6952b432edc40 100644
--- a/src/components/CommonKit/Card/StyledIconCard.tsx
+++ b/src/components/CommonKit/Card/StyledIconCard.tsx
@@ -23,19 +23,19 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index b3af9f5f0dcb9deab54c8b62228685a8fbb7d12a..89e631ef88795db63bd9bda7a5b238f02c87b9fb 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -23,6 +23,9 @@ const Modal: React.FC<ModalProps> = ({
 
   useEffect(() => {
     open ? disableBackgroundScroll(true) : disableBackgroundScroll(false)
+    return () => {
+      disableBackgroundScroll(false)
+    }
   }, [open])
 
   const closeClick = () => {
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index eaada07f5ff1a0df35d196d103c217f140dea7d8..185aab9cf09af9509c7f2228afb6ee189d177460 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -39,6 +39,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
   const [lackOfDataForChallenge, setLackOfDataForChallenge] = useState<boolean>(
     false
   )
+  const [isLoaded, setIsLoaded] = useState<boolean>(false)
 
   const defineHeaderHeight = (height: number) => {
     setHeaderHeight(height)
@@ -77,34 +78,36 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
 
   useEffect(() => {
     let subscribed = true
-    const lag = challengeManager.getLagDays(fluidTypes)
-
-    const timePeriod = {
-      startDate: DateTime.local()
-        .plus({ days: -6 })
-        .startOf('day'),
-      endDate: DateTime.local()
-        .plus({ days: -lag })
-        .endOf('day'),
-    }
+    if (props.location.state) {
+      const lag = challengeManager.getLagDays(fluidTypes)
+      const firstDayOfPreviousPeriod =
+        props && props.location.state.challenge.duration.days
+      const timePeriod = {
+        startDate: DateTime.local()
+          .plus({ days: -firstDayOfPreviousPeriod })
+          .startOf('day'),
+        endDate: DateTime.local()
+          .plus({ days: -lag })
+          .endOf('day'),
+      }
 
-    async function checkPreviousData() {
-      const cdm = new ConsumptionDataManager(client)
-      const fetchedPerformanceIndicators = await cdm.getPerformanceIndicators(
-        timePeriod,
-        20,
-        fluidTypes
-      )
-      if (fetchedPerformanceIndicators && subscribed) {
-        fetchedPerformanceIndicators.forEach(element => {
-          !element.value ? setLackOfDataForChallenge(true) : null
-        })
-      } else {
-        setLackOfDataForChallenge(true)
+      async function checkPreviousData() {
+        const cdm = new ConsumptionDataManager(client)
+        const fetchedPerformanceIndicators = await cdm.getPerformanceIndicators(
+          timePeriod,
+          20,
+          fluidTypes
+        )
+        if (fetchedPerformanceIndicators && subscribed) {
+          fetchedPerformanceIndicators.forEach(element => {
+            !element.value ? setLackOfDataForChallenge(true) : null
+          })
+        } else {
+          setLackOfDataForChallenge(true)
+        }
+        setIsLoaded(true)
       }
-    }
-    checkPreviousData()
-    if (props.location.state) {
+      checkPreviousData()
       setChallenge(props && props.location.state.challenge)
     }
     return () => {
@@ -152,7 +155,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
                     </div>
                     <div className="cp-right-button">
                       <StyledButtonValid
-                        disabled={lackOfDataForChallenge}
+                        disabled={lackOfDataForChallenge || !isLoaded}
                         color="primary"
                         onClick={handleStartClick}
                       >
@@ -162,7 +165,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
                     </div>
                   </div>
                   <div className="lack-of-data-challenge">
-                    {lackOfDataForChallenge
+                    {lackOfDataForChallenge && isLoaded
                       ? t('CHALLENGE.LACK_OF_DATA')
                       : null}
                   </div>
diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
index 0a5fbeed1cb1d917696fba1f69841037f9b9cf20..89d8e1ace26eb274b00bddfdfe212e1cbb819bf7 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
@@ -19,9 +19,12 @@ interface ChallengesListProps {
 const ChallengesList: React.FC<ChallengesListProps> = ({
   client,
 }: ChallengesListProps) => {
-  const { fluidTypes, refreshCurrentChallenge, screenType } = useContext(
-    AppContext
-  )
+  const {
+    fluidTypes,
+    refreshCurrentChallenge,
+    screenType,
+    challengeNotification,
+  } = useContext(AppContext)
   const challengeManager = new ChallengeManager(client)
   const [
     ongoingChallenge,
@@ -104,12 +107,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
         setOngoingChallenge(ongoingChallengeTmp)
         setOngoingChallengeModal(ongoingChallengeTmp)
         setUserLevel(levelOfUser)
-        if (
-          await challengeManager.isChallengeOver(
-            ongoingChallengeTmp,
-            fluidTypes
-          )
-        ) {
+        if (challengeNotification) {
           setOpenChallengeModal(true)
           await challengeManager.endChallenge(ongoingChallengeTmp, fluidTypes)
           await refreshCurrentChallenge()
@@ -205,12 +203,14 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
           </div>
         </div>
       )}
-      <ChallengeModal
-        opened={openChallengeModal}
-        challenge={ongoingChallengeModal}
-        handleCloseClick={handleCloseClick}
-        badgeStatus={ongoingChallengeModal && ongoingChallengeModal.badge}
-      />
+      {openChallengeModal && (
+        <ChallengeModal
+          opened={openChallengeModal}
+          challenge={ongoingChallengeModal}
+          handleCloseClick={handleCloseClick}
+          badgeStatus={ongoingChallengeModal && ongoingChallengeModal.badge}
+        />
+      )}
     </>
   )
 }
diff --git a/src/components/ContentComponents/Charts/AxisRight.tsx b/src/components/ContentComponents/Charts/AxisRight.tsx
index 54519c76c225cacb3eb23ff19c4825943459ee06..c41678d74cd746f352ff9763db9f2affbb866396 100644
--- a/src/components/ContentComponents/Charts/AxisRight.tsx
+++ b/src/components/ContentComponents/Charts/AxisRight.tsx
@@ -16,8 +16,14 @@ interface AxisRightProps {
 
 const AxisRight = (props: AxisRightProps) => {
   const { yScale, fluidTypes, width, marginRight, marginTop, t } = props
+  let isHome
+  if (!window.location.hash.split('/')[2]) {
+    isHome = true
+  } else {
+    isHome = false
+  }
   const fluidStyle =
-    fluidTypes.length > 1 ? 'MULTIFLUID' : FluidType[fluidTypes[0]]
+    fluidTypes.length > 1 || isHome ? 'MULTIFLUID' : FluidType[fluidTypes[0]]
   const yAxisRef = useRef<SVGGElement>(null)
 
   const drawYAxis = () => {
diff --git a/src/components/ContentComponents/Charts/Bar.tsx b/src/components/ContentComponents/Charts/Bar.tsx
index 7a65d3b65ece7b2c11886dfb66b84b29732710af..f9fd12557402de2fda01ff780fd55b08842cb03c 100644
--- a/src/components/ContentComponents/Charts/Bar.tsx
+++ b/src/components/ContentComponents/Charts/Bar.tsx
@@ -22,6 +22,7 @@ interface BarProps {
   xScale: ScaleBand<string>
   yScale: ScaleLinear<number, number>
   height: number
+  isSwitching: boolean
 }
 
 const Bar = (props: BarProps) => {
@@ -38,6 +39,7 @@ const Bar = (props: BarProps) => {
     xScale,
     yScale,
     height,
+    isSwitching,
   } = props
 
   const [clicked, setClicked] = useState(false)
@@ -53,8 +55,10 @@ const Bar = (props: BarProps) => {
     ? 'MULTIFLUID'
     : FluidType[fluidTypes[0]]
   const handleClick = () => {
-    setClicked(true)
-    handleClickData(dataload, compareDataload)
+    if (!isSwitching) {
+      setClicked(true)
+      handleClickData(dataload, compareDataload)
+    }
   }
 
   const onAnimationEnd = () => {
diff --git a/src/components/ContentComponents/Charts/BarChart.tsx b/src/components/ContentComponents/Charts/BarChart.tsx
index 1e2fd9ab7a39fb104abbe77498f6765f65eec53d..8fa45f2fb68be6e2cfbf6776b9ca827e1c20cfe3 100644
--- a/src/components/ContentComponents/Charts/BarChart.tsx
+++ b/src/components/ContentComponents/Charts/BarChart.tsx
@@ -31,6 +31,7 @@ export interface BarChartProps {
   marginRight?: number
   marginTop?: number
   marginBottom?: number
+  isSwitching: boolean
 }
 
 interface DefaultProps {
@@ -60,6 +61,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
     marginRight,
     marginTop,
     marginBottom,
+    isSwitching,
   } = props as PropsWithDefaults
   const getContentWidth = () => {
     return width - marginLeft - marginRight
@@ -103,16 +105,21 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
 
   return (
     <svg width={width} height={height}>
-      <g transform={`translate(${marginLeft},${marginTop})`}>
-        <Hash
-          challengePeriod={challengePeriod}
-          multiFluid={multiFluid}
-          xScale={xScale}
-          padding={(xScaleWithoutPadding.bandwidth() - xScale.bandwidth()) / 2}
-          width={getContentWidth()}
-          height={getContentHeight()}
-        />
-      </g>
+      {timeStep === TimeStep.DAY && (
+        <g transform={`translate(${marginLeft},${marginTop})`}>
+          <Hash
+            challengePeriod={challengePeriod}
+            multiFluid={multiFluid}
+            xScale={xScale}
+            padding={
+              (xScaleWithoutPadding.bandwidth() - xScale.bandwidth()) / 2
+            }
+            width={getContentWidth()}
+            height={getContentHeight()}
+            chartData={chartData}
+          />
+        </g>
+      )}
       <AxisRight
         fluidTypes={fluidTypes}
         yScale={yScale}
@@ -138,6 +145,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
             xScale={xScale}
             yScale={yScale}
             height={getContentHeight()}
+            isSwitching={isSwitching}
           />
         ))}
       </g>
diff --git a/src/components/ContentComponents/Charts/Hash.tsx b/src/components/ContentComponents/Charts/Hash.tsx
index cdca1034f736a293496e271cce130b159f52e3ec..457eba1bfed58cc9f64fb49f8e0100e8fd27d846 100644
--- a/src/components/ContentComponents/Charts/Hash.tsx
+++ b/src/components/ContentComponents/Charts/Hash.tsx
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import { ScaleBand } from 'd3-scale'
-import { ITimePeriod } from 'services/dataConsumptionContracts'
+import {
+  ITimePeriod,
+  IChartData,
+  TimeStep,
+} from 'services/dataConsumptionContracts'
 import { DateTime } from 'luxon'
+import { compareStepDate } from 'services/dateChartService'
 
 interface HashProps {
   challengePeriod: ITimePeriod | null
@@ -10,10 +15,19 @@ interface HashProps {
   padding: number
   width: number
   height: number
+  chartData: IChartData
 }
 
 const Hash = (props: HashProps) => {
-  const { challengePeriod, multiFluid, xScale, padding, width, height } = props
+  const {
+    challengePeriod,
+    multiFluid,
+    xScale,
+    padding,
+    width,
+    height,
+    chartData,
+  } = props
 
   /*
     number array with
@@ -35,12 +49,40 @@ const Hash = (props: HashProps) => {
             .startOf('day')
             .toLocaleString(DateTime.DATETIME_SHORT)
         )
+
         if (!startScale && !endScale) {
-          setScale([])
+          const lastGraphDate =
+            chartData &&
+            chartData.actualData &&
+            chartData.actualData[chartData.actualData.length - 1] &&
+            chartData.actualData[chartData.actualData.length - 1].date
+          const firstGraphDate =
+            chartData &&
+            chartData.actualData &&
+            chartData.actualData[0] &&
+            chartData.actualData[0].date
+          if (
+            challengePeriod.endDate > lastGraphDate &&
+            challengePeriod.startDate < firstGraphDate
+          ) {
+            setScale([0, width - padding])
+          } else {
+            setScale([])
+          }
         } else if (startScale && !endScale) {
           setScale([startScale - padding, width - startScale])
         } else if (!startScale && endScale) {
-          setScale([0, endScale - padding])
+          if (
+            compareStepDate(
+              TimeStep.DAY,
+              challengePeriod.endDate,
+              chartData.actualData[0].date
+            )
+          ) {
+            setScale([])
+          } else {
+            setScale([0, endScale - padding])
+          }
         } else if (startScale && endScale) {
           setScale([startScale - padding, endScale - startScale])
         }
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 6ee23e47723b8a7a26ad9f523851c9b4775c4378..227806bcf14349e287ad99cf155095dcff98a946 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -98,14 +98,10 @@ const DataloadConsumptionVisualizer = ({
             <div
               className={`cv-load-value ${fluidStyle.toLowerCase()} chart-result`}
             >
-              {multiFluid && fluidTypes.length === 1
-                ? formatNumberValues(
-                    ltcc.Convert(dataload.value, fluidTypes[0])
-                  )
-                : formatNumberValues(dataload.value)}
-              <span className="text-18-normal">{`${t(
-                'FLUID.' + fluidStyle + '.UNIT'
-              )}`}</span>
+              {formatNumberValues(dataload.value)}
+              <span className="text-18-normal">
+                {`${t('FLUID.' + fluidStyle + '.UNIT')}`}
+              </span>
             </div>
             {!multiFluid ? (
               <div
diff --git a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
index 4b1fe0caf38b6c5af315d4b42c8df8ec16051673..fa2726ba53ba9db67234584cac10717248f06dee 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
+++ b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
@@ -30,6 +30,7 @@ interface FluidChartSlideProps {
     compareDataload: IDataload | null
   ) => void
   consumptionDataManager: IConsumptionDataManager
+  isSwitching: boolean
 }
 
 const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
@@ -45,6 +46,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
   challengePeriod,
   handleClickData,
   consumptionDataManager,
+  isSwitching,
 }: FluidChartSlideProps) => {
   const [chartData, setChartData] = useState<IChartData>(new ChartData([]))
   const [isLoaded, setIsLoaded] = useState<boolean>(false)
@@ -58,12 +60,21 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
         defineTimePeriod(referenceDate, timeStep, index),
         defineTimePeriod(referenceDate, timeStep, index + 1),
       ])
+      let isHome
+      if (!window.location.hash.split('/')[2]) {
+        isHome = true
+      } else {
+        isHome = false
+      }
+
       const graphData = await consumptionDataManager.getGraphData(
         timePeriod,
         timeStep,
         fluidTypes,
-        compareTimePeriod
+        compareTimePeriod,
+        isHome
       )
+
       if (subscribed && graphData && graphData.actualData.length > 0) {
         setChartData(graphData)
         setIsLoaded(true)
@@ -92,6 +103,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
           height={height}
           width={width}
           challengePeriod={challengePeriod}
+          isSwitching={isSwitching}
         />
       )}
     </div>
diff --git a/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx b/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx
index 1f365907149f6d272b270097e2ee1a2e5d262444..907446e0080ba4190b4108ec8017f6030b295c16 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx
@@ -46,6 +46,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
   const swipe = useRef<HTMLDivElement>(null)
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
+  const [isSwitching, setIsSwitching] = useState(false)
 
   useEffect(() => {
     function handleResize() {
@@ -91,9 +92,14 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
             challengePeriod={challengePeriod}
             handleClickData={handleClickData}
             consumptionDataManager={consumptionDataManager}
+            isSwitching={isSwitching}
           />
         )}
         enableMouseEvents
+        onSwitching={!isSwitching ? () => setIsSwitching(true) : null}
+        onTransitionEnd={() => {
+          setIsSwitching(false)
+        }}
         axis="x-reverse"
       />
     </div>
diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx
index eb8c4828d5f1dcd90ca8297cce730d0cdc1e623a..1cf2982fb3bee221305107e38e6fde79cfa62e40 100644
--- a/src/components/Contexts/AppContextProvider.tsx
+++ b/src/components/Contexts/AppContextProvider.tsx
@@ -79,7 +79,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
   const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState<
     boolean | null
   >(null)
-
   const [isDataLoading, setDataLoading] = useState<boolean>(false)
   const [isDataLoadingSuccess, setDataLoadingSuccess] = useState<
     boolean | null
@@ -107,7 +106,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
   const [challengeNotification, setChallengeNotification] = useState<boolean>(
     false
   )
-
   const [isContextLoaded, setContextLoaded] = useState<boolean>(false)
   const [isError, setError] = useState<boolean>(false)
   const [screenType, setScreenType] = useState<ScreenType>(ScreenType.MOBILE)
diff --git a/src/locales/fr.json b/src/locales/fr.json
index fd92eec19b308e9c2415e2ffaf56d64dbb231005..032de073e7987a91ed95d4f25c4d88075b846707 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -270,7 +270,7 @@
     "type_idea": "Idée",
     "type_other": "Autre",
     "success_sending": "Nous vous remercions pour votre retour.",
-    "warning": "Attention!",
+    "warning": "Attention !",
     "error_empty_description": "Le champ de description est vide.",
     "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement."
   }
diff --git a/src/services/consumptionDataManagerService.ts b/src/services/consumptionDataManagerService.ts
index b203ecb491b6e8db3d992536e511e790cf11a23d..072de5291e9b0caab88e75d41bd66d6fc61a1b37 100644
--- a/src/services/consumptionDataManagerService.ts
+++ b/src/services/consumptionDataManagerService.ts
@@ -37,7 +37,8 @@ export default class ConsumptionDataManager implements IConsumptionDataManager {
     timePeriod: ITimePeriod,
     timeStep: TimeStep,
     fluidTypes: FluidType[],
-    compareTimePeriod?: ITimePeriod
+    compareTimePeriod?: ITimePeriod,
+    isHome?: boolean
   ): Promise<IChartData | null> {
     const InputisValid: boolean = this._consumptionDataValidator.ValidateGetGraphData(
       timePeriod,
@@ -50,7 +51,7 @@ export default class ConsumptionDataManager implements IConsumptionDataManager {
 
     let mappedData = null
 
-    if (fluidTypes.length === 1) {
+    if (fluidTypes.length === 1 && !isHome) {
       //TODO validating input data
 
       //TODO applying buisness logic to the query arguments
@@ -75,7 +76,7 @@ export default class ConsumptionDataManager implements IConsumptionDataManager {
 
       // mapping result to contract
       mappedData = formattedData
-    } else if (fluidTypes.length > 1) {
+    } else if (fluidTypes.length > 1 || isHome) {
       const toBeAgreggatedData: ISingleFluidChartData[] = []
       for (const fluidType of fluidTypes) {
         const fetchedData = await this.fetchSingleFLuidGraphData(
diff --git a/src/services/dataConsumptionContracts.ts b/src/services/dataConsumptionContracts.ts
index 44eb6da9dd64bed4f7aa1012928b3f34efd19b6f..260d284c3c4a788eb271a256840e9a9173325fb1 100644
--- a/src/services/dataConsumptionContracts.ts
+++ b/src/services/dataConsumptionContracts.ts
@@ -73,7 +73,8 @@ export interface IConsumptionDataManager {
     timePeriod: ITimePeriod,
     timeStep: TimeStep,
     fluidTypes: FluidType[],
-    compareTimePeriod?: ITimePeriod
+    compareTimePeriod?: ITimePeriod,
+    isHome?: boolean
   ): Promise<IChartData | null>
 
   fetchLastDateData(fluidType: FluidType[]): Promise<DateTime | null>
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index 3fd5c7ad2066febce2af07814c9633e94a268fc9..fc0a0c3ebe9edad67afe2a272ff2b174276c1937 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -71,16 +71,19 @@ $accordion-active-background: #34353a;
 $text-color: white;
 
 $elec-color: #d87b39;
+$elec-color-40: rgba(216, 123, 57, 0.4);
 $elec-off-color: #5d3d2a;
 $elec-compare-color: #e2bca1;
 $elec-compare-off-color: #795c47;
 
 $gas-color: #45d1b8;
+$gas-color-40: rgba(69, 209, 184, 0.4);
 $gas-off-color: #184940;
 $gas-compare-color: #a8f7e9;
 $gas-compare-off-color: #597773;
 
 $water-color: #3a98ec;
+$water-color-40: rgba(58, 152, 236, 0.4);
 $water-off-color: #20415e;
 $water-compare-color: #abd4fa;
 $water-compare-off-color: #4d5c6e;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 82021a3cd090809385ee1496276f845b01b5ad17..de482173597c003adbeffa5ee9a58d2858891970 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -34,10 +34,13 @@
   --blueRadialGradient: #{$blue-radial-gradient};
   --blueRadialGradientTrans: #{$blue-radial-gradient-transparent};
   --elecColor: #{$elec-color};
+  --elecColor40: #{$elec-color-40};
   --elecCompareColor: #{$elec-compare-color};
   --gasColor: #{$gas-color};
+  --gasColor40: #{$gas-color-40};
   --gasCompareColor: #{$gas-compare-color};
   --waterColor: #{$water-color};
+  --waterColor40: #{$water-color-40};
   --waterCompareColor: #{$water-compare-color};
   --multiColor: #{$multi-color};
   --multiCompareColor: #{$multi-compare-color};