diff --git a/src/assets/icons/visu/analysis/pill-cold.svg b/src/assets/icons/visu/analysis/chip-cold.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-cold.svg
rename to src/assets/icons/visu/analysis/chip-cold.svg
diff --git a/src/assets/icons/visu/analysis/pill-hot.svg b/src/assets/icons/visu/analysis/chip-hot.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-hot.svg
rename to src/assets/icons/visu/analysis/chip-hot.svg
diff --git a/src/assets/icons/visu/analysis/pill-negative.svg b/src/assets/icons/visu/analysis/chip-negative.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-negative.svg
rename to src/assets/icons/visu/analysis/chip-negative.svg
diff --git a/src/assets/icons/visu/analysis/pill-positive.svg b/src/assets/icons/visu/analysis/chip-positive.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-positive.svg
rename to src/assets/icons/visu/analysis/chip-positive.svg
diff --git a/src/components/Analysis/Comparison/ChipVariation.tsx b/src/components/Analysis/Comparison/ChipVariation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a5c03843cda0fccd4cb7b7afb1c43759e175e746
--- /dev/null
+++ b/src/components/Analysis/Comparison/ChipVariation.tsx
@@ -0,0 +1,23 @@
+import ChipCold from 'assets/icons/visu/analysis/chip-cold.svg'
+import ChipHot from 'assets/icons/visu/analysis/chip-hot.svg'
+import ChipNegative from 'assets/icons/visu/analysis/chip-negative.svg'
+import ChipPositive from 'assets/icons/visu/analysis/chip-positive.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import React from 'react'
+
+export const ChipVariation = ({
+  color,
+}: {
+  color: 'positive' | 'negative' | 'hot' | 'cold'
+}) => {
+  switch (color) {
+    case 'positive':
+      return <StyledIcon size={20} icon={ChipPositive} />
+    case 'negative':
+      return <StyledIcon size={20} icon={ChipNegative} />
+    case 'hot':
+      return <StyledIcon size={20} icon={ChipHot} />
+    case 'cold':
+      return <StyledIcon size={20} icon={ChipCold} />
+  }
+}
diff --git a/src/components/Analysis/Comparison/Comparison.spec.tsx b/src/components/Analysis/Comparison/Comparison.spec.tsx
index ace9e1791a3bb52945ac9089e4f4c90359eabfd0..32510ecd6645f4c96dd0d16d0e1a36c1b6039d9a 100644
--- a/src/components/Analysis/Comparison/Comparison.spec.tsx
+++ b/src/components/Analysis/Comparison/Comparison.spec.tsx
@@ -82,10 +82,10 @@ describe('Comparison component', () => {
       </Provider>
     )
 
-    const yearlyButton = await screen.findByRole('button', {
+    const yearlyButton = await screen.findByRole('tab', {
       name: `analysis.compare.year_tab`,
     })
-    const monthlyButton = await screen.findByRole('button', {
+    const monthlyButton = await screen.findByRole('tab', {
       name: `analysis.compare.month_tab`,
     })
 
diff --git a/src/components/Analysis/Comparison/Comparison.tsx b/src/components/Analysis/Comparison/Comparison.tsx
index ab7dd379c9190cff35e3391dbb4e8b71b7269650..3115a66498ddc3d223af4761f7a3b6a2e8290a65 100644
--- a/src/components/Analysis/Comparison/Comparison.tsx
+++ b/src/components/Analysis/Comparison/Comparison.tsx
@@ -100,14 +100,19 @@ const Comparison = ({
     <div className="comparison card rich-card">
       <div className="text-20-normal title">{t('analysis.compare.title')}</div>
       {!isLoading && (
-        <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}>
+        <ButtonGroup
+          role="tablist"
+          style={{ backgroundColor: 'var(--grey-0)' }}
+        >
           <Button
+            role="tab"
             className={classNames('btnTab', { active: period === 'year' })}
             onClick={() => dispatch(setPeriod('year'))}
           >
             {t(`analysis.compare.year_tab`)}
           </Button>
           <Button
+            role="tab"
             className={classNames('btnTab', { active: period === 'month' })}
             onClick={() => dispatch(setPeriod('month'))}
           >
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
index 313e22a885b9124a40ac4bb104f57f77a9ac6139..6780e7882c63e514747ade97f3795b9b174cb541 100644
--- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
@@ -10,8 +10,8 @@ import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import { getFluidIcon } from 'utils/picto'
 import { formatNumberValues, getFluidName, getMonthName } from 'utils/utils'
+import { ChipVariation } from './ChipVariation'
 import './fluidPerformanceIndicator.scss'
-import { PillVariation } from './PillVariation'
 
 interface FluidPerformanceIndicatorProps {
   performanceIndicator: PerformanceIndicator
@@ -83,7 +83,7 @@ const FluidPerformanceIndicator = ({
                   {t(`FLUID.${FluidType[fluidType]}.UNIT`)}
                 </span>
                 {performanceIndicator?.percentageVariation !== null && (
-                  <PillVariation color={positive ? 'positive' : 'negative'} />
+                  <ChipVariation color={positive ? 'positive' : 'negative'} />
                 )}
               </div>
               {performanceIndicator?.percentageVariation === null && (
diff --git a/src/components/Analysis/Comparison/PillVariation.tsx b/src/components/Analysis/Comparison/PillVariation.tsx
deleted file mode 100644
index 4cddd2deb2ae85eaf9e7e19e163bc6f8512a00a0..0000000000000000000000000000000000000000
--- a/src/components/Analysis/Comparison/PillVariation.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import PillCold from 'assets/icons/visu/analysis/pill-cold.svg'
-import PillHot from 'assets/icons/visu/analysis/pill-hot.svg'
-import PillNegative from 'assets/icons/visu/analysis/pill-negative.svg'
-import PillPositive from 'assets/icons/visu/analysis/pill-positive.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import React from 'react'
-
-export const PillVariation = ({
-  color,
-}: {
-  color: 'positive' | 'negative' | 'hot' | 'cold'
-}) => {
-  switch (color) {
-    case 'positive':
-      return <StyledIcon size={20} icon={PillPositive} />
-    case 'negative':
-      return <StyledIcon size={20} icon={PillNegative} />
-    case 'hot':
-      return <StyledIcon size={20} icon={PillHot} />
-    case 'cold':
-      return <StyledIcon size={20} icon={PillCold} />
-  }
-}
diff --git a/src/components/Analysis/Comparison/TemperatureComparison.tsx b/src/components/Analysis/Comparison/TemperatureComparison.tsx
index 44fca9aebd0fa900be454436c5e2f4365fadba18..1594eea1f1561465ceacb57b2b3459431c976664 100644
--- a/src/components/Analysis/Comparison/TemperatureComparison.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparison.tsx
@@ -9,7 +9,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useEffect, useMemo, useState } from 'react'
 import ConsumptionService from 'services/consumption.service'
 import { useAppSelector } from 'store/hooks'
-import { PillVariation } from './PillVariation'
+import { ChipVariation } from './ChipVariation'
 import TemperatureComparisonModal from './TemperatureComparisonModal/TemperatureComparisonModal'
 import './temperatureComparison.scss'
 
@@ -92,7 +92,7 @@ const TemperatureComparison = () => {
               {t('analysis.temperature_comparison.unit')}
             </span>
           </div>
-          <PillVariation color={positive ? 'hot' : 'cold'} />
+          <ChipVariation color={positive ? 'hot' : 'cold'} />
         </div>
         <div>
           <span className="text-12">
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 8b1080a733dc2851a8fb7cc0a36d6b5f465c6114..1d8177aee406ae229c920ca38f7a121d434b175f 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -84,7 +84,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
     await waitFor(() => null, { container })
     expect(container).toMatchSnapshot()
     expect(screen.getByText('special_elec.weekend')).toBeInTheDocument()
-    expect(screen.getAllByRole('button')).toHaveLength(2)
+    expect(screen.getAllByRole('tab')).toHaveLength(2)
   })
 
   it('should call the ElecInfoModal with open = true when click on the button', async () => {
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index 20069e774f800b57cab77f3da7faec3497b37bcd..d190aa12b49fa4cdaa42b11f80c873f99965f347 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -163,7 +163,7 @@ const ElecHalfHourMonthlyAnalysis = ({
   if (!isHalfHourActivated) {
     return (
       <ElecHalfHourLayout>
-        <div className="activation-text text-18-normal">
+        <div className="activation-text text-16-normal">
           {t(`timestep.half_an_hour.analysis_waiting_data`)}
         </div>
       </ElecHalfHourLayout>
@@ -181,14 +181,16 @@ const ElecHalfHourMonthlyAnalysis = ({
   return (
     <ElecHalfHourLayout>
       <div className="text-20-normal title">{t('special_elec.average')}</div>
-      <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}>
+      <ButtonGroup role="tablist" style={{ backgroundColor: 'var(--grey-0)' }}>
         <Button
+          role="tab"
           className={classNames('btnTab', { active: !isWeekend })}
           onClick={() => setIsWeekend(false)}
         >
           {t('special_elec.week')}
         </Button>
         <Button
+          role="tab"
           className={classNames('btnTab', { active: isWeekend })}
           onClick={() => setIsWeekend(true)}
         >
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 54788cf0577b80d0d86d3842672057a3eda92b8b..857e392e5ce0fc153a2b3a83d18557ec5b73ad73 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
       special_elec.title
     </div>
     <div
-      class="activation-text text-18-normal"
+      class="activation-text text-16-normal"
     >
       timestep.half_an_hour.analysis_waiting_data
     </div>
@@ -56,10 +56,11 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
     </div>
     <div
       class="MuiButtonGroup-root"
-      role="group"
+      role="tablist"
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -71,6 +72,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
       </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+        role="tab"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 330b4ddb154d87afb0adcf61b2ca68db4b862712..754ed3cc1542ab7c51cd819e52e69f7db9a30b0f 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -14,9 +14,6 @@
   .minIcon {
     margin: auto 0.8rem auto 0;
   }
-  .activation-text {
-    margin: 1rem 0 0.7rem 0;
-  }
 
   .elec-infos {
     display: flex;
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index fb217aad497c9f3a014053667fbf57889ecb887b..82359a8da599a07bae7df1817ee731466048da90 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -108,7 +108,7 @@ const ProfileComparatorRow = ({
       <div className="user-graph">
         <div
           className={classNames('price text-15-bold', {
-            ['not-connected']: !connected || noData,
+            'not-connected': !connected || noData,
           })}
           data-testid="userPrice"
         >
@@ -145,7 +145,7 @@ const ProfileComparatorRow = ({
         </div>
         <div
           className={classNames('price', 'text-15-bold', {
-            ['not-connected']: !connected,
+            'not-connected': !connected,
           })}
           data-testid="averagePrice"
         >
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index 30bbaf99afbe74c1d5791bb4d9cd9fe816e41060..53f0ffd87313b05fef228f23dc50e7664c62f733 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -154,7 +154,7 @@ const ChallengeCardOnGoing = ({
       title={t('challenge.card.ongoing.quiz')}
       tabIndex={quizFinished ? -1 : 0}
       className={classNames('smallCard', {
-        ['finished']: quizFinished,
+        finished: quizFinished,
       })}
       onClick={goQuiz}
     >
@@ -175,7 +175,7 @@ const ChallengeCardOnGoing = ({
       title={t('challenge.card.ongoing.exploration')}
       tabIndex={explorationFinished ? -1 : 0}
       className={classNames('smallCard explorationCard', {
-        ['finished']: explorationFinished,
+        finished: explorationFinished,
       })}
       onClick={goExploration}
     >
@@ -200,7 +200,7 @@ const ChallengeCardOnGoing = ({
       title={t('challenge.card.ongoing.action')}
       tabIndex={actionFinished ? -1 : 0}
       className={classNames('smallCard actionCard', {
-        ['finished']: actionFinished,
+        finished: actionFinished,
       })}
       onClick={goAction}
     >
diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index 6dbfecd0f1b417470fc8b9a3aaf560976c75476a..416591d45349cac0da982c5d7e19ccdab86c1f71 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -206,7 +206,10 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
         />
       </Header>
       <Content>
-        <TimeStepSelector fluidType={fluidType} />
+        {showOfflineData && !isWaitingForConsent && (
+          <TimeStepSelector fluidType={fluidType} />
+        )}
+
         <FluidButtons activeFluid={fluidType} key={updateKey} />
 
         {showOfflineData && !isWaitingForConsent && (
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index afafe2578997c162d1b9dce5b0e730188cfeca81..9f0f3227af98a54bae4e992897239e353decf8b1 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -7,7 +7,8 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidState, FluidType } from 'enums'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useAppSelector } from 'store/hooks'
+import { setShowConnectionDetails } from 'store/chart/chart.slice'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
 import { getActiveFluidIcon } from 'utils/picto'
 import { getFluidName, isKonnectorActive } from 'utils/utils'
 
@@ -19,7 +20,11 @@ interface FluidButtonProps {
 const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
   const { t } = useI18n()
   const navigate = useNavigate()
-  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
+  const dispatch = useAppDispatch()
+  const {
+    global: { fluidStatus },
+    chart: { showConnectionDetails },
+  } = useAppSelector(state => state.ecolyo)
   const [showError, setShowError] = useState<boolean>(false)
   const isMulti = fluidType === FluidType.MULTIFLUID
   const fluidName = getFluidName(fluidType)
@@ -48,7 +53,9 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
 
   const goToFluid = useCallback(() => {
     navigate(isMulti ? '/consumption' : `/consumption/${fluidName}`)
-  }, [navigate, isMulti, fluidName])
+    // reset details when switching fluids
+    if (showConnectionDetails) dispatch(setShowConnectionDetails(false))
+  }, [navigate, isMulti, fluidName, showConnectionDetails, dispatch])
 
   const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance
 
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index 7a936ab06ef633f3474b43650153399f538c6456..465731e820d0c26a0712ddf5dcc79c1a56aa23b9 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -43,7 +43,7 @@ const DateNavigator = ({
         disabled={disablePrev}
         aria-label={t('consumption.accessibility.button_previous_value')}
         className={classNames('date-navigator-button', {
-          ['disable']: disablePrev,
+          disable: disablePrev,
         })}
       />
 
@@ -75,7 +75,7 @@ const DateNavigator = ({
         disabled={disableNext}
         aria-label={t('consumption.accessibility.button_next_value')}
         className={classNames('date-navigator-button', {
-          ['disable']: disableNext,
+          disable: disableNext,
         })}
       />
     </div>
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index 5fc42d6085f09e3851c0a5714b36b336bcdac2ec..2c8af7f597ba9ca7703550edf5c1538d32daa372 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -151,8 +151,9 @@ const EcogestureTabsView = () => {
         {!isLoading && (
           <>
             <div className="tabContainer">
-              <ButtonGroup>
+              <ButtonGroup role="tablist">
                 <Button
+                  role="tab"
                   className={classNames('btnTab', {
                     active: tabValue === EcogestureTab.OBJECTIVE,
                   })}
@@ -163,6 +164,7 @@ const EcogestureTabsView = () => {
                   {`(${objective.length})`}
                 </Button>
                 <Button
+                  role="tab"
                   className={classNames('btnTab', {
                     active: tabValue === EcogestureTab.DOING,
                   })}
@@ -173,6 +175,7 @@ const EcogestureTabsView = () => {
                   {`(${doing.length})`}
                 </Button>
                 <Button
+                  role="tab"
                   className={classNames('btnTab', {
                     active: tabValue === EcogestureTab.ALL,
                   })}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index 340b91862c004b545911971759c9396016a07c59..3ce5c7e1519f9badcaf38cf815a3c1cab01a52d1 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -16,10 +16,11 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
     >
       <div
         class="MuiButtonGroup-root"
-        role="group"
+        role="tablist"
       >
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+          role="tab"
           tabindex="0"
           type="button"
         >
@@ -33,6 +34,7 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
         </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+          role="tab"
           tabindex="0"
           type="button"
         >
@@ -46,6 +48,7 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
         </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+          role="tab"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss
index caf82a36b3fdb2b92974d96ef3a011019c6c8cb4..f1d6aa410ecfa849a78b1bb96aaa75a27e5f82d9 100644
--- a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss
+++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss
@@ -5,13 +5,11 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   text-align: center;
   gap: 12px;
   padding: 2rem 1rem;
   margin-top: 16px;
-  background-color: $grey-1;
-  border: 1px solid $grey-2;
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 
   // Same height as FluidChartSwipe to avoid layout shift
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index c5272e89359580cefb5b97f9ad78fdb6505784f9..89092e34d32e3035517e61a05d92f1a8fa365ef1 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -31,7 +31,7 @@ describe('TimeStepSelector component', () => {
         <TimeStepSelector fluidType={FluidType.WATER} />
       </Provider>
     )
-    expect(screen.getAllByRole('button').length).toBe(4)
+    expect(screen.getAllByRole('tab').length).toBe(4)
     expect(container).toMatchSnapshot()
   })
 
@@ -50,7 +50,7 @@ describe('TimeStepSelector component', () => {
         <TimeStepSelector fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
-    expect(screen.getAllByRole('button').length).toBe(5)
+    expect(screen.getAllByRole('tab').length).toBe(5)
   })
 
   it('should define next TimeStep and dispatch it', async () => {
@@ -68,7 +68,7 @@ describe('TimeStepSelector component', () => {
         <TimeStepSelector fluidType={FluidType.WATER} />
       </Provider>
     )
-    await userEvent.click(screen.getAllByRole('button')[2])
+    await userEvent.click(screen.getAllByRole('tab')[2])
     expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
     expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.MONTH)
     expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index 6d86b501806d23acb53f5eead9ace4201b0ee3c2..06ffc9ba2ea89829efb6f144ffed247cb099391a 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -35,10 +35,11 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
   }
   return (
     <div className="timestep-selector">
-      <ButtonGroup>
+      <ButtonGroup role="tablist">
         {timeStepArray.map(step => (
           <Button
             key={step}
+            role="tab"
             onClick={() => handleChangeTimeStep(step)}
             className={classNames('btnTab', {
               active: step === currentTimeStep,
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index 8c5142e7e29c110c8cd82b31b8b1a7227af82045..53c69474e0430165d22b87f3f5a0305b79cbb460 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -7,10 +7,11 @@ exports[`TimeStepSelector component should render component properly with 4 time
   >
     <div
       class="MuiButtonGroup-root"
-      role="group"
+      role="tablist"
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -25,6 +26,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
       </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -39,6 +41,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
       </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -53,6 +56,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
       </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+        role="tab"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index b11873d3d6f9eb5c94fe3574f3f39089f1c8b6ce..0397c87a69a3771136ad307b7e715895525fc167 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -70,7 +70,7 @@ const KonnectorModal = ({
           <div
             key={idx}
             className={classNames('waiting-text', {
-              ['show']: idx === index % shuffledWaitingTexts.length,
+              show: idx === index % shuffledWaitingTexts.length,
             })}
           >
             <p>{text.first}</p>
@@ -91,7 +91,7 @@ const KonnectorModal = ({
             <div
               key={idx}
               className={classNames('waiting-text', {
-                ['show']: idx === index % firstConnectionWaitingTexts.length,
+                show: idx === index % firstConnectionWaitingTexts.length,
               })}
             >
               <p>{text.first}</p>
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 71c968a5397076b534e49ce99ec839da29527e9a..d48cc8717d67dc20cee2133faa54f9e2b06b82c4 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -1,10 +1,5 @@
 @import 'src/styles/base/color';
 
-div.expansion-panel-root,
-div.expansion-panel-root.Mui-expanded:last-child {
-  margin: 0.2rem 0;
-}
-
 .export-option-root {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
index aa0bef5463cd8eee94d54b8fcaf05d2f1d6b2b27..550db4ab9939a911f490cd72310908c7a3acc5e1 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
@@ -1,5 +1,6 @@
 import Button from '@material-ui/core/Button'
 import CloseIcon from 'assets/icons/ico/close.svg'
+import classNames from 'classnames'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
 import { useClient } from 'cozy-client'
@@ -101,18 +102,16 @@ const QuizQuestionContent = ({
         </p>
         {userChallenge.quiz.questions[questionIndex].answers.map(
           (answer, index) => (
-            <div className="answer" key={index}>
-              <input
-                type="radio"
-                id={`answer${index}`}
-                value={answer.answerLabel}
-                onChange={handleChange}
-                checked={userChoice === answer.answerLabel}
-              />
-              <label htmlFor={`answer${index}`} className="text-16-bold">
-                {answer.answerLabel}
-              </label>
-            </div>
+            <Button
+              key={index}
+              role="radio"
+              className={classNames('btnSecondary btnAnswer', {
+                checked: userChoice === answer.answerLabel,
+              })}
+              onClick={() => setUserChoice(answer.answerLabel)}
+            >
+              {answer.answerLabel}
+            </Button>
           )
         )}
       </div>
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
index e690af2d35d2fa31acc81c7933ae67b8f45e2752..1810485a43d914b8eacc2f957351193556d5375e 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
@@ -1,5 +1,6 @@
 import Button from '@material-ui/core/Button'
 import CloseIcon from 'assets/icons/ico/close.svg'
+import classNames from 'classnames'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
 import { useClient } from 'cozy-client'
@@ -56,10 +57,6 @@ const QuizQuestionContentCustom = ({
     dispatch(updateUserChallengeList(userChallengeUpdated))
   }
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUserChoice(e.target.value)
-  }
-
   const finishQuiz = async () => {
     setOpenModal(false)
     const userChallengeUpdated = await challengeService.updateUserChallenge(
@@ -84,18 +81,16 @@ const QuizQuestionContentCustom = ({
 
         <p className="question text-18-bold">{customQuestion.questionLabel}</p>
         {customQuestion.answers.map((answer, index) => (
-          <div className="answer" key={index}>
-            <input
-              type="radio"
-              id={`answer${index}`}
-              value={answer.answerLabel}
-              onChange={handleChange}
-              checked={userChoice === answer.answerLabel}
-            />
-            <label htmlFor={`answer${index}`} className="text-16-bold">
-              {answer.answerLabel}
-            </label>
-          </div>
+          <Button
+            key={index}
+            role="radio"
+            className={classNames('btnSecondary btnAnswer', {
+              checked: userChoice === answer.answerLabel,
+            })}
+            onClick={() => setUserChoice(answer.answerLabel)}
+          >
+            {answer.answerLabel}
+          </Button>
         ))}
       </div>
       <Button
diff --git a/src/components/Quiz/QuizQuestion/quizQuestion.scss b/src/components/Quiz/QuizQuestion/quizQuestion.scss
index 6040bf3cd416f200c62493879e6092e1d8bd5b96..dc244fc0cc0bce262de13bb682854e587482932d 100644
--- a/src/components/Quiz/QuizQuestion/quizQuestion.scss
+++ b/src/components/Quiz/QuizQuestion/quizQuestion.scss
@@ -49,36 +49,25 @@
         right: 1rem;
       }
     }
-    .answer {
-      text-align: center;
+    .btnAnswer {
+      border-radius: 0px;
       width: 100%;
       @media (min-width: $width-large-phone) {
         max-width: 80%;
       }
-      input[type='radio'] {
-        position: fixed;
-        opacity: 0;
-        pointer-events: none;
-      }
-      input[type='radio']:focus + label {
-        background: $multi-color;
-        color: $dark-light-2;
-        border-color: $multi-color;
-      }
-      label {
-        display: block;
-        border: 1px solid $grey-bright;
-        padding: 0.5rem;
+      &:not(:last-child) {
         margin-bottom: 1rem;
-        cursor: pointer;
       }
-      input[type='radio']:checked + label,
-      label:hover {
-        background: $multi-color;
-        color: $dark-light-2;
+
+      &.checked {
+        background-color: $multi-color;
         border-color: $multi-color;
+        span {
+          color: $dark-light-2;
+        }
       }
     }
+
     button.validate {
       margin-top: 1rem;
       width: auto;
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index 095c7e8568d4e15da4cd4dd9b0081ff0c2566880..eef011d90b0d601ac8afe8c209974bd1f19592e8 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -1,7 +1,6 @@
 @import '../base/color';
 
 div.expansion-panel-root {
-  margin-bottom: 1rem;
   color: $grey-bright;
   background-color: $grey-1;
   border: 1px solid $grey-2;
@@ -9,12 +8,7 @@ div.expansion-panel-root {
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
   transition: background-color 0.6s ease;
   box-sizing: border-box;
-  &.Mui-expanded:first-child {
-    margin: 1.2rem 0;
-  }
-  &.Mui-expanded:last-child {
-    margin: 1.2rem 0;
-  }
+
   &.red-border {
     border: 1px solid $red-primary;
   }
@@ -33,6 +27,7 @@ div.expansion-panel-summary {
   }
   &.Mui-expanded {
     min-height: 4rem;
+    background-color: $grey-2;
     &.small {
       min-height: 3rem;
     }
@@ -53,5 +48,6 @@ div.expansion-panel-content {
   }
 }
 div.expansion-panel-details {
-  padding: 0 1.2rem 1.2rem;
+  padding: 0 1rem 1rem;
+  background-color: $grey-2;
 }
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index 5342054c9ba1a936d584480313336931ee5d67ba..a8772d739938b78301616f3f7e11ff8197e7c0cc 100644
--- a/src/styles/components/_input.scss
+++ b/src/styles/components/_input.scss
@@ -28,7 +28,7 @@ input.inputNumber {
   text-align: center;
 }
 
-input:focus-visible {
+.Mui-focusVisible {
   outline: 2px solid $blue-accessibility;
   outline-offset: 2px;
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7b337eebadce7292c6d81a1c8b8862473b5bd952..1fdf7d6f01ff9bf344bc39298ce08362138f57d6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -60,7 +60,7 @@
   --grey-2: #{$grey-2};
 
   // Override Cozy UI colors
-  --paperBackgroundColor: $dark-2;
+  --paperBackgroundColor: $grey-0;
   --primaryTextColor: $grey-bright;
 }
 
@@ -103,3 +103,11 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px $dark-2 inset !important;
 }
+
+html {
+  background-color: $grey-0;
+}
+
+.app-content {
+  min-height: auto !important;
+}