diff --git a/src/components/Analysis/Comparison/Comparison.spec.tsx b/src/components/Analysis/Comparison/Comparison.spec.tsx
index 26c73803a96649d2ff8afd85bf3fcf730d52a17b..f1ebd36e99f37dbeecae2b3d3efb3c15eedeede6 100644
--- a/src/components/Analysis/Comparison/Comparison.spec.tsx
+++ b/src/components/Analysis/Comparison/Comparison.spec.tsx
@@ -72,10 +72,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`,
     })
 
@@ -107,7 +107,7 @@ describe('Comparison component', () => {
       </Provider>
     )
 
-    const indicators = await screen.findAllByRole('button', { name: /fluid/i })
+    const indicators = await screen.findAllByRole('listitem')
     expect(indicators.length).toBe(mockFluidsWithData.length)
     expect(
       await screen.findByText('analysis.temperature_comparison.unit')
diff --git a/src/components/Analysis/Comparison/Comparison.tsx b/src/components/Analysis/Comparison/Comparison.tsx
index a81af240b39546a0fab32e02dce90b7a3f4a4a00..5e67322a75925f24894fbd64adc2cefa320f2965 100644
--- a/src/components/Analysis/Comparison/Comparison.tsx
+++ b/src/components/Analysis/Comparison/Comparison.tsx
@@ -100,14 +100,16 @@ const Comparison = ({
   return (
     <div className="comparison">
       {!isLoading && (
-        <div className="tabs">
+        <div role="tablist" className="tabs">
           <Button
+            role="tab"
             className={period === 'year' ? 'active' : ''}
             onClick={() => dispatch(setPeriod('year'))}
           >
             {t(`analysis.compare.year_tab`)}
           </Button>
           <Button
+            role="tab"
             className={period === 'month' ? 'active' : ''}
             onClick={() => dispatch(setPeriod('month'))}
           >
@@ -116,7 +118,7 @@ const Comparison = ({
         </div>
       )}
 
-      <div className="performanceIndicators">
+      <div role="list" className="performanceIndicators">
         {isLoading && (
           <div
             style={{
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx
index 13b53d72ddeac40710793db4b06b7952594fe3b4..d25d9aa706c2ff7c0876a75aa75e0abf2e6eeca7 100644
--- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx
@@ -63,7 +63,7 @@ describe('FluidPerformanceIndicator component', () => {
     ).toHaveTextContent('+10,00 % / avril 2024')
 
     await act(async () => {
-      await userEvent.click(screen.getByRole('button'))
+      await userEvent.click(screen.getByRole('listitem'))
     })
 
     expect(mockedNavigate).toHaveBeenCalledWith('/consumption/electricity')
@@ -102,7 +102,7 @@ describe('FluidPerformanceIndicator component', () => {
     )
 
     await act(async () => {
-      await userEvent.click(screen.getByRole('button'))
+      await userEvent.click(screen.getByRole('listitem'))
     })
 
     expect(mockedNavigate).toHaveBeenCalledWith('/consumption/water')
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
index b516ca00c0ba40d21370ab88accea485c39aa5a8..1e247c25e0349077c72fc023bedaf734a94d4805 100644
--- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import { PerformanceIndicator } from 'models'
+import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
@@ -55,7 +56,11 @@ const FluidPerformanceIndicator = ({
   }
 
   return (
-    <button className="fpi" onClick={() => handleFluidClick(fluidType)}>
+    <StyledCard
+      role="listitem"
+      className="fpi"
+      onClick={() => handleFluidClick(fluidType)}
+    >
       <StyledIcon icon={iconType} size={50} />
       <div
         data-testid={`fluid-type-${FluidType[fluidType]}`}
@@ -100,7 +105,7 @@ const FluidPerformanceIndicator = ({
           </>
         )}
       </div>
-    </button>
+    </StyledCard>
   )
 }
 
diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx b/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
index 8af212cf8247cdd7e075f114971c999eae0d6659..9b090a5f5dddb74c3b26328cfea1af87599d2f89 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
@@ -1,7 +1,6 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import { useAppSelector } from 'store/hooks'
@@ -30,13 +29,13 @@ const TemperatureComparisonModal = ({
       }}
     >
       <div className="modal-start-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('analysis.temperature_comparison.modal.close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <StyledIcon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
         <div className="content">
           <div className="text-20-bold subtitle">
             {t('analysis.temperature_comparison.modal.title')}
diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
index ae38608769b3585d68ab1cbec8cc1f5769fcbafb..28e9510e66f420f7dab59e1f579e1fce3a1f8e79 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
@@ -37,7 +37,7 @@ exports[`TemperatureComparisonModal component should be rendered correctly 1`] =
         >
           <button
             aria-label="analysis.temperature_comparison.modal.close"
-            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
             tabindex="0"
             type="button"
           >
diff --git a/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
index e7da0ab898af602000d623d71b059b138b503916..cd33f838a0aa60ee4ba4f9e03d8b45f8fd023f28 100644
--- a/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
@@ -3,30 +3,43 @@
 exports[`FluidPerformanceIndicator component should render "no data" message when value is not available 1`] = `
 <div>
   <button
-    class="fpi"
+    class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-5 fpi"
+    role="listitem"
+    tabindex="0"
+    type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="styles__icon___23x3R"
-      height="50"
-      width="50"
-    >
-      <use
-        xlink:href="#test-file-stub"
-      />
-    </svg>
     <div
-      class="fpi-content"
-      data-testid="fluid-type-WATER"
+      class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-6"
     >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="50"
+        width="50"
+      >
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        class="fpi-content-no-data"
+        class="fpi-content"
+        data-testid="fluid-type-WATER"
       >
-        <span>
-          performance_indicator.fpi.no_data
-        </span>
+        <div
+          class="fpi-content-no-data"
+        >
+          <span>
+            performance_indicator.fpi.no_data
+          </span>
+        </div>
       </div>
     </div>
+    <span
+      class="MuiCardActionArea-focusHighlight"
+    />
+    <span
+      class="MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
@@ -34,53 +47,66 @@ exports[`FluidPerformanceIndicator component should render "no data" message whe
 exports[`FluidPerformanceIndicator component should render elec indicators correctly and navigate on click 1`] = `
 <div>
   <button
-    class="fpi"
+    class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 fpi"
+    role="listitem"
+    tabindex="0"
+    type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="styles__icon___23x3R"
-      height="50"
-      width="50"
-    >
-      <use
-        xlink:href="#test-file-stub"
-      />
-    </svg>
     <div
-      class="fpi-content"
-      data-testid="fluid-type-ELECTRICITY"
+      class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
     >
-      <div
-        class="fpi-value"
-        data-testid="fluid-value-ELECTRICITY"
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="50"
+        width="50"
       >
-        <span
-          class="fpi-load"
-        >
-          100,00
-        </span>
-        <span
-          class="fpi-unit"
-        >
-          FLUID.ELECTRICITY.UNIT
-        </span>
-      </div>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        class="fpi-comparison"
-        data-testid="fluid-comparison-ELECTRICITY"
+        class="fpi-content"
+        data-testid="fluid-type-ELECTRICITY"
       >
-        <span
-          class="percent positive"
+        <div
+          class="fpi-value"
+          data-testid="fluid-value-ELECTRICITY"
         >
-          +10,00 %
-        </span>
-        <span
-          class="fpi-comparison-date"
+          <span
+            class="fpi-load"
+          >
+            100,00
+          </span>
+          <span
+            class="fpi-unit"
+          >
+            FLUID.ELECTRICITY.UNIT
+          </span>
+        </div>
+        <div
+          class="fpi-comparison"
+          data-testid="fluid-comparison-ELECTRICITY"
         >
-           / avril 2024
-        </span>
+          <span
+            class="percent positive"
+          >
+            +10,00 %
+          </span>
+          <span
+            class="fpi-comparison-date"
+          >
+             / avril 2024
+          </span>
+        </div>
       </div>
     </div>
+    <span
+      class="MuiCardActionArea-focusHighlight"
+    />
+    <span
+      class="MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
diff --git a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
index bd93542a3ce2d389c0d16db289dfe974815548a7..c896338527caab8408b9342b185757b113ebe61a 100644
--- a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
+++ b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
@@ -26,36 +26,18 @@
 }
 
 //FluidPerformanceIndicator
-.fpi {
-  display: flex;
-  flex-direction: row;
+button.fpi {
   border: 1px solid $grey-dark;
-  border-radius: 4px;
-  padding: 16px 22px;
-  gap: 1rem;
-  align-items: center;
   box-shadow: 0px 4px 16px 0px $black-shadow;
   transition: background-color 0.3s;
-  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
-  cursor: pointer;
-
-  &:hover {
-    background: linear-gradient(
-      180deg,
-      rgba(70, 71, 77, 0.7) 0%,
-      rgba(57, 58, 63, 0.7) 100%
-    );
-  }
 
   .fpi-content {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    text-align: left;
     .fpi-value {
       display: flex;
       flex-direction: row;
-      gap: 4px;
       align-items: flex-end;
       .fpi-load {
         font-size: 1.75rem;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index df794055777db3ac100a5c6b6a4b95419a20f492..e0c7c02d7bc93a9d8d0bb79f6286f62879a5b475 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -1,11 +1,11 @@
 import { Button } from '@material-ui/core'
-import IconButton from '@material-ui/core/IconButton'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
 import MinIcon from 'assets/icons/ico/minimum.svg'
 import OffPeakHourIcon from 'assets/icons/ico/offPeakHour.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -166,13 +166,13 @@ const ElecHalfHourMonthlyAnalysis = ({
       {isHalfHourActivated && (
         <>
           <div className="navigator">
-            <IconButton
-              aria-label={t('consumption.accessibility.button_previous_value')}
+            <StyledIconButton
+              icon={LeftArrowIcon}
+              sized={24}
               onClick={() => setIsWeekend(prev => !prev)}
+              aria-label={t('consumption.accessibility.button_previous_value')}
               className="arrow-prev"
-            >
-              <StyledIcon icon={LeftArrowIcon} size={24} />
-            </IconButton>
+            />
             <div className="average text-18-normal">
               <div className="text-1">{t('special_elec.average')}</div>
               <div className="text-2 text-18-bold">
@@ -184,13 +184,13 @@ const ElecHalfHourMonthlyAnalysis = ({
                 </span>
               </div>
             </div>
-            <IconButton
-              aria-label={t('consumption.accessibility.button_next_value')}
+            <StyledIconButton
+              icon={RightArrowIcon}
+              sized={24}
               onClick={() => setIsWeekend(prev => !prev)}
+              aria-label={t('consumption.accessibility.button_next_value')}
               className="arrow-next"
-            >
-              <StyledIcon icon={RightArrowIcon} size={24} />
-            </IconButton>
+            />
           </div>
           {isLoading && <Loader color="elec" />}
           {!isLoading && (
@@ -246,30 +246,40 @@ const ElecHalfHourMonthlyAnalysis = ({
                   <div className="container consomin">
                     <StyledIcon icon={MinIcon} size={40} className="minIcon" />
                     <div className="text text-18-normal">
-                      <div>{t('special_elec.min')}</div>
-                      <div>{t('special_elec.percentage')}</div>
-                      <div>{t('special_elec.price')}</div>
-                    </div>
-                    <div className="value">
                       {enedisAnalysisValues.minimumLoad !== 0 &&
                       enedisAnalysisValues.minimumLoad !== null ? (
                         <>
-                          <div className="text-18-bold">
-                            {enedisAnalysisValues.minimumLoad.toFixed(1)}
-                            <span className="text-18-normal"> kWh</span>
+                          <div className="row">
+                            <div>{t('special_elec.min')}</div>
+                            <div>
+                              <span className="text-18-bold">
+                                {enedisAnalysisValues.minimumLoad.toFixed(1)}
+                              </span>
+                              <span> kWh</span>
+                            </div>
                           </div>
-                          <div className="text-18-bold">
-                            {facturePercentage?.toFixed(0) || '---'}
-                            <span className="text-18-normal"> %</span>
+                          <div className="row">
+                            <div>{t('special_elec.percentage')}</div>
+                            <div>
+                              <span className="text-18-bold">
+                                {facturePercentage?.toFixed(0) || '---'}
+                              </span>
+                              <span> %</span>
+                            </div>
                           </div>
-                          <div className="text-18-bold">
-                            {elecPrice?.price
-                              ? (
-                                  enedisAnalysisValues.minimumLoad *
-                                  elecPrice.price
-                                ).toFixed(1)
-                              : '---'}
-                            <span className="text-18-normal"> €</span>
+                          <div className="row">
+                            <div>{t('special_elec.price')}</div>
+                            <div>
+                              <span className="text-18-bold">
+                                {elecPrice?.price
+                                  ? (
+                                      enedisAnalysisValues.minimumLoad *
+                                      elecPrice.price
+                                    ).toFixed(1)
+                                  : '---'}
+                              </span>
+                              <span> €</span>
+                            </div>
                           </div>
                         </>
                       ) : (
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
index aacab412de73445d79691f9a7537753249bedeba..a1ce173d65c560a1a7f372fe0eeb081be893f9cc 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
@@ -1,7 +1,6 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import {
@@ -41,13 +40,12 @@ const ElecInfoModal = ({
       <div id="accessibility-title">
         {t('elec_info_modal.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('elec_info_modal.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="elecInfoModal">
         <div className="title text-18-bold">
           {t('elec_info_modal.maxPowerTitle')}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index fdd25bb41103a0e031ea62934c9f3501a7623401..3f664b18461dbb87fd1ec8913499d57ed754fa3f 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -54,7 +54,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
     >
       <button
         aria-label="consumption.accessibility.button_previous_value"
-        class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+        class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-prev"
         tabindex="0"
         type="button"
       >
@@ -95,7 +95,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
       </div>
       <button
         aria-label="consumption.accessibility.button_next_value"
-        class="MuiButtonBase-root MuiIconButton-root arrow-next"
+        class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-next"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index 8de384b77ddb9029ac0b808979db62710bbf9887..6d81eae0ff120a7df104fe1503f24d5b7a4759ef 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ElecInfoModal component should be rendered correctly with off-peak hour
         </div>
         <button
           aria-label="elec_info_modal.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
@@ -143,7 +143,7 @@ exports[`ElecInfoModal component should be rendered correctly without off-peak h
         </div>
         <button
           aria-label="elec_info_modal.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 3e0e4b36eeb61c61c7bc4a09ffe3ff483f5410c4..2eb6eab658f91cabdb7560f83b1debfc62a9f673 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -57,6 +57,10 @@
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+      width: 100%;
+      .row {
+        justify-content: space-between;
+      }
     }
     .value {
       margin-left: auto;
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
index 7f6c5ac988272b1a8b89dae18f8824efe27e3bd8..bfbc200d33af29a5f0a7b1f3e568cc8fc78bd342 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
@@ -1,9 +1,9 @@
-import IconButton from '@material-ui/core/IconButton'
 import GraphIcon from 'assets/icons/ico/graph-icon.svg'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import BarChart from 'components/Charts/BarChart'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import DataloadSection from 'components/ConsumptionVisualizer/DataloadSection'
 import { useChartResize } from 'components/Hooks/useChartResize'
 import Loader from 'components/Loader/Loader'
@@ -101,25 +101,25 @@ const MaxConsumptionCard = ({
   }
 
   const buttonPrev = () => (
-    <IconButton
-      aria-label={t('consumption.accessibility.button_previous_value')}
+    <StyledIconButton
+      icon={LeftArrowIcon}
+      sized={24}
       onClick={() => handleFluidChange(-1)}
-      className="arrow-prev"
       disabled={fluidsWithData.length <= 1}
-    >
-      <StyledIcon icon={LeftArrowIcon} size={24} />
-    </IconButton>
+      aria-label={t('consumption.accessibility.button_previous_value')}
+      className="arrow-prev"
+    />
   )
 
   const buttonNext = () => (
-    <IconButton
-      aria-label={t('consumption.accessibility.button_next_value')}
+    <StyledIconButton
+      icon={RightArrowIcon}
+      sized={24}
       onClick={() => handleFluidChange(1)}
-      className="arrow-next"
       disabled={fluidsWithData.length <= 1}
-    >
-      <StyledIcon icon={RightArrowIcon} size={24} />
-    </IconButton>
+      aria-label={t('consumption.accessibility.button_next_value')}
+      className="arrow-next"
+    />
   )
 
   return (
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 149368eae983d04f78500600f02677a6077d6968..766c2a08ea0363ce89dd3ec9eb1365cb27cbbf11 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
     >
       <button
         aria-label="consumption.accessibility.button_previous_value"
-        class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+        class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-prev"
         tabindex="0"
         type="button"
       >
@@ -54,7 +54,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
       </div>
       <button
         aria-label="consumption.accessibility.button_next_value"
-        class="MuiButtonBase-root MuiIconButton-root arrow-next"
+        class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-next"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index 12c6d90802fd83efadc79c22a3f0bac97b68fb6d..0ca7f23ce6769cb77b98a8925d3425a51c85d149 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -100,7 +100,12 @@ const ProfileComparatorRow = ({
     : t(`analysis.no_data`)
 
   return (
-    <div className={`analysisRow consumption-${FLUIDNAME.toLowerCase()}`}>
+    <div
+      aria-label={t(
+        `analysis.accessibility.comparison_${FLUIDNAME.toLowerCase()}`
+      )}
+      className={`analysisRow consumption-${FLUIDNAME.toLowerCase()}`}
+    >
       <div className="user-graph">
         <div
           className={classNames('price text-15-bold', {
diff --git a/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
index 24c1d3ea9f7fcd3f5dcaa02fbcf10c61be2baffb..bd4ee0a34f5b2e825bae92d4b9548b39063d24bf 100644
--- a/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
@@ -1,6 +1,6 @@
-import { Button, Dialog, IconButton } from '@material-ui/core'
+import { Button, Dialog } from '@material-ui/core'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enums'
 import React, { useState } from 'react'
@@ -104,13 +104,12 @@ const EpglConnectModal = ({
         paper: 'modal-paper',
       }}
     >
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseModal}
         aria-label={t('auth.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseModal}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="partners-connection-step-content">
         {steps[currentStep].content}
       </div>
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
index 9752a993660269c93b1bf0507f6bae1ff42b5fc3..45b2e4e74dd5244466ec3f372c3c94d1bc31e042 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
@@ -1,9 +1,10 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
 import GrdfIcon from 'assets/icons/ico/consent-outdated-grdf.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enums'
 import { AccountSgeData } from 'models'
@@ -76,13 +77,12 @@ const ExpiredConsentModal = ({
       <div id="accessibility-title">
         {t('consent_outdated.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={toggleModal}
         aria-label={t('consent_outdated.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={toggleModal}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="expired-consent-modal">
         <div className="icon-main">
           <StyledIcon
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index 83702bba20fe80bfae05ce21739775e02cce36fc..100fa6d1ff70691c87544524e2d7cfd3b34d43eb 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="consent_outdated.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
index 1c92e3150532261ae0598777ec5bc5bb32046ec1..9ec57a393f3cf38e665a24e3c4ff6fab129e2d03 100644
--- a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
@@ -1,9 +1,9 @@
-import { IconButton } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import GasBill from 'assets/icons/visu/onboarding/gas_bill.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 
@@ -30,13 +30,12 @@ const GrdfModalHint = ({
       <div id="accessibility-title">
         {t('challenge_no_fluid_modal.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="hintModal">
         <h1 className="text-20-bold">
           {t('auth.grdfgrandlyon.pceModal.title')}
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 9ccb96aa5d3d55b45d4ea76538702b2d926b2f33..01026bbfa14ba0ae63e43f2b49f3daee94fc16e2 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -1,10 +1,10 @@
-import { IconButton } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import Bill from 'assets/icons/ico/bill.svg'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import Prm from 'assets/icons/ico/prm.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 
@@ -30,13 +30,12 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
       <div id="accessibility-title">
         {t('auth.enedissgegrandlyon.pdlModal.title_accessibility')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('auth.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="hintModal">
         <h1 className="text-20-bold">
           {t('auth.enedissgegrandlyon.pdlModal.title')}
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index b21dc1e1f42942e57305eb2fab89e2e348c72bf3..9f0d7974e575da0f03b17f4c17a34f7f2153abdd 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
           </div>
           <button
             aria-label="header.accessibility.button_open_feedbacks"
-            class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 header-feedbacks-button"
             tabindex="0"
             type="button"
           >
@@ -125,10 +125,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
               />
               <fieldset
                 aria-hidden="true"
-                class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+                class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="PrivateNotchedOutline-legendLabelled-3"
+                  class="PrivateNotchedOutline-legendLabelled-4"
                 >
                   <span>
                     auth.enedissgegrandlyon.firstName
@@ -170,10 +170,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
               />
               <fieldset
                 aria-hidden="true"
-                class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+                class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="PrivateNotchedOutline-legendLabelled-3"
+                  class="PrivateNotchedOutline-legendLabelled-4"
                 >
                   <span>
                     auth.enedissgegrandlyon.lastName
@@ -221,10 +221,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
               />
               <fieldset
                 aria-hidden="true"
-                class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+                class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="PrivateNotchedOutline-legendLabelled-3"
+                  class="PrivateNotchedOutline-legendLabelled-4"
                 >
                   <span>
                     auth.enedissgegrandlyon.pdlLabel
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index 45adc444c765eeb371a0d11a51c3f8dbcf0be75d..335b1622261b4ed3244ca4e9ca1dfd685eeb26d7 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="auth.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 5b09024b1f76464f68645f25f8df2de51fb0e07c..8be010a5eb32f08673bc34775b83fd3611eba057 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -64,7 +64,11 @@ const DataloadSectionDetail = ({
           return (
             <NavLink
               key={FluidType[index]}
-              aria-label={t(`consumption_visualizer.cost_per_fluid.${index}`)}
+              aria-label={t(
+                `consumption_visualizer.cost_per_fluid.${FluidType[
+                  index
+                ].toLowerCase()}`
+              )}
               to={`/consumption/${FluidType[index].toLowerCase()}`}
               className="dataloadvisualizer-euro-link"
             >
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index 2069ea38cf66a53bbfb7bb9d6fa51fe797001a67..faed95db0f0ed476fd96e458ebc1a77cb0eca9aa 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -1,7 +1,6 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enums'
@@ -53,13 +52,12 @@ const EstimatedConsumptionModal = ({
       <div id="accessibility-title">
         {t('consumption_visualizer.modal.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('consumption_visualizer.modal.close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="estimation-modal">
         <div className="text-20-normal modal-title">
           {t('consumption_visualizer.modal.title')}
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index ecc4ef5c71aae8c5795c9e273f93c39f11255ba5..18f23c2ccea90ceeaae98c971ac673b5c86d3173 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -1,8 +1,9 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import QuestionIcon from 'assets/icons/ico/questionMark.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './noDataModal.scss'
@@ -28,13 +29,12 @@ const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
       <div id="accessibility-title">
         {t('consumption_visualizer.modal.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('consumption_visualizer.modal.close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="nodata-modal">
         <div className="question-mark">
           <StyledIcon icon={QuestionIcon} size={36} />
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index 6f79fffa991e5ea667f6ee2a4e58f20c728a0f76..9d4da4b3efa239861ac034fa8779a2cfa045a443 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = `
         </div>
         <button
           aria-label="consumption_visualizer.modal.close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index 753eef53ce87b13759e63d2707cbd7ac01240b67..0e55d2ee5612b347dd565a0e4c80c535cd4e86f2 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`NoDataModal component should render correctly 1`] = `
         </div>
         <button
           aria-label="consumption_visualizer.modal.close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index ff68a7c126400c2d4828a13a3b61dae8270f2378..7d59a8cf67ac763fe1cc44b2c45a8393be3b5dfe 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -1,9 +1,9 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import DefaultIcon from 'assets/icons/visu/ecogesture/bullhorn.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { DateTime } from 'luxon'
 import { CustomPopup } from 'models'
@@ -47,13 +47,12 @@ const CustomPopupModal = ({
       }}
     >
       <div id="accessibility-title">{customPopup.title}</div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="customPopupModal">
         <StyledIcon icon={icon} size={100} role="img" ariaHidden={false} />
 
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index 8acb6fa60c9f0515e2a047484a4f323125a61f8a..e83cba2c0c8b5053a5f90dc9c92f06888fc09f5d 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index f64619d3771321f5f4440e9fc54bd6bb6d88fc9d..1132e0b8fd4b44650b40ea2f0eecae30fdab28ef 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -1,8 +1,7 @@
-import IconButton from '@material-ui/core/IconButton'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import classNames from 'classnames'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { TimeStep } from 'enums'
@@ -37,31 +36,29 @@ const DateNavigator = ({
       aria-label={t('consumption.accessibility.navigation_group')}
       className="date-navigator"
     >
-      <IconButton
-        disabled={disablePrev}
+      <StyledIconButton
+        icon={LeftArrowIcon}
         onClick={handlePrevDate}
+        disabled={disablePrev}
+        aria-label={t('consumption.accessibility.button_previous_value')}
         className={classNames('date-navigator-button', {
           ['disable']: disablePrev,
         })}
-        aria-label={t('consumption.accessibility.button_previous_value')}
-      >
-        <StyledIcon icon={LeftArrowIcon} />
-      </IconButton>
+      />
       <DateNavigatorFormat
         timeStep={timeStep}
         date={navigatorDate}
         inline={inlineDateDisplay}
       />
-      <IconButton
-        disabled={disableNext}
+      <StyledIconButton
+        icon={RightArrowIcon}
         onClick={handleNextDate}
+        disabled={disableNext}
+        aria-label={t('consumption.accessibility.button_next_value')}
         className={classNames('date-navigator-button', {
           ['disable']: disableNext,
         })}
-        aria-label={t('consumption.accessibility.button_next_value')}
-      >
-        <StyledIcon icon={RightArrowIcon} />
-      </IconButton>
+      />
     </div>
   )
 }
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index c23b70fc7cbef65c5a66bb67a96501e7df84b8a4..9d6cbb26b697f0a8d3dbb5e058171de91aadaf59 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
   >
     <button
       aria-label="consumption.accessibility.button_previous_value"
-      class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
+      class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
       tabindex="0"
       type="button"
     >
@@ -38,7 +38,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
     />
     <button
       aria-label="consumption.accessibility.button_next_value"
-      class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
+      class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
       tabindex="0"
       type="button"
     >
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 5afe8274478c290b103db35dcbc42a60aa1a349f..4897a8101470c6cedd6e04b29a676e724e02f01e 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -41,7 +41,8 @@ exports[`lastDuelModal component should render correctly 1`] = `
           class="duel-last-modal-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            aria-label="last_duel_modal.close"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
             tabindex="0"
             type="button"
           >
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
index 6c1f64e304d51206949b51b48d18277c5b914856..7ff4c79bab0c78102d66804d9b70353bb24f2a6f 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
@@ -1,8 +1,8 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import star from 'assets/icons/visu/duel/star.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './lastDuelModal.scss'
@@ -27,12 +27,12 @@ const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
     >
       <div id="accessibility-title">{t('last_duel_modal.title')}</div>
       <div className="duel-last-modal-root">
-        <IconButton
-          className="modal-paper-close-button"
+        <StyledIconButton
+          icon={CloseIcon}
           onClick={handleCloseClick}
-        >
-          <StyledIcon icon={CloseIcon} />
-        </IconButton>
+          aria-label={t('last_duel_modal.close')}
+          className="modal-paper-close-button"
+        />
         <StyledIcon className="icon" icon={star} size={48} />
         <h1 className="text-28-bold">{t('last_duel_modal.title')}</h1>
         <div>
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
index 2ae4fb300120eff93e1a2ed31a8c902fe3146868..b2dfc8f5bfc99d28c72406aa2acce2c92447c18f 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
@@ -24,6 +24,7 @@ const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
 
   return (
     <StyledEcogestureCard
+      role="listitem"
       onClick={() => navigate(`/ecogesture/${ecogesture.id}`)}
       className="ecogesture-list-item"
     >
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 3096c7c182a2bb6559e467571b1def474a743d07..3ab49975997b8803b086ad42e0cb921f4536d9a9 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
 <div>
   <button
     class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+    role="listitem"
     tabindex="0"
     type="button"
   >
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
index aa01d3e85f7e5679d33a09a2e72f082cbadc7286..509ef939a89da413c0d16eee13d76b4aa4237677 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
@@ -1,7 +1,7 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -40,13 +40,12 @@ const EcogestureInitModal = () => {
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseEcogestureInitModal}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseEcogestureInitModal}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="eg-init-modal">
         <div className="title text-20-bold">
           {t('ecogesture.initModal.title')}
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index fe8934ae72f83779f722b352306d6d3dbee39f09..0a28b093dfd311d00544d2675c20dec3e87e933c 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
index f46cc200bf12ef74854a11159f96e73e8fe3f608..f5490982843ebc5519c1587b44ad7a44c4005493 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
@@ -153,7 +153,7 @@ const EcogestureList = ({
         {displaySelection && continueSelection()}
       </div>
 
-      <div className="ecogesture-content">
+      <div role="list" className="ecogesture-content">
         {renderEcogestureContent()}
         {!displaySelection && openResetEcogestureModal && (
           <Button onClick={openResetEcogestureModal} className="btnSecondary">
diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
index 3a8441cc4fa2d6a2870de568ed168facf4296c51..46e1c2cfb82a05bd3f88feb60eda3cca79fc1388 100644
--- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
@@ -42,6 +42,7 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
     </div>
     <div
       class="ecogesture-content"
+      role="list"
     >
       <mock-ecogesturecard
         ecogesture="[object Object]"
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index 00b2f61e79e9bb193c6b404a47b7b2a8269f3b46..047f7d1c8092f1f27547cea715f0daeb0a980b36 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -1,10 +1,10 @@
 import { Collapse } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useExploration from 'components/Hooks/useExploration'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { Ecogesture } from 'models'
@@ -65,13 +65,12 @@ const EcogestureModal = ({
           ? t('ecogesture_modal.accessibility.window_title_action')
           : t('ecogesture_modal.accessibility.window_title_ecogesture')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('ecogesture_modal.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="em-header text-14-normal-uppercase">
         {isAction
           ? t('ecogesture_modal.title_action')
diff --git a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
index 2ff0e0c33571289d8da4fdebad49984168ea59cf..b12843e7146f744b7e1c80364cf4dfa2196a66c6 100644
--- a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
+++ b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
@@ -1,8 +1,9 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import warningIcon from 'assets/icons/ico/warn-orange.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './ecogestureResetModal.scss'
@@ -32,13 +33,12 @@ const EcogestureResetModal = ({
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={closeEcogestureResetModal}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={closeEcogestureResetModal}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="eg-reset-modal">
         <StyledIcon icon={warningIcon} size={63} />
         <div className="title text-20-bold">
diff --git a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
index c8abe7ced9189873608f453a0f43e5606ce52035..ccaf95b8f6b19289da3a04c5bc41f1e36d7b7e95 100644
--- a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
index cc4ae8a4b13ad8b38bdb591874f5bb0560d07b7a..c71271c7e754ba7624f17c893e3ba5fb3641d343 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
@@ -1,7 +1,7 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './ecogestureLaunchFormModal.scss'
@@ -28,13 +28,12 @@ const EcogestureLaunchFormModal = ({
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="eg-init-modal">
         <div className="title text-20-bold">
           {t('ecogesture.initModal.title')}
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
index 909100f52910a7e0d4c787e5e0dbe44333e35fb8..5cf6f6feaae713e9d00a8b5e13610886b138f1e6 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
index 85820ef3e436ed5346d01a3e3fd2df35e8faec9f..e1b6ca29b7741cb3d08cd9c85ed37c897f9d6132 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
@@ -1,10 +1,10 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './ecogestureSelectionModal.scss'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 
 interface EcogestureSelectionModalProps {
   open: boolean
@@ -30,13 +30,12 @@ const EcogestureSelectionModal = ({
       <div id="accessibility-title">
         {t('ecogesture_selection.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('ecogesture_selection.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="eg-selection-modal">
         <div className="title text-20-bold">
           {t('ecogesture_selection.selectionModal.title')}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index 685a14d59760ca9ce72259c98ea4be0c9d4c6604..ae72635379c48ac6555a3475f1cb13e08bb71b27 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="ecogesture_selection.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index efc91bcba324500f6f48aa5772a60112bd5f9705..0889e061391d5783fdfa3f82f141e3d23a3a68d1 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,9 +1,9 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import ecolyoIcon from 'assets/icons/ico/ecolyo.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useExploration from 'components/Hooks/useExploration'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -44,13 +44,12 @@ const FeedbackModal = () => {
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={closeModal}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={closeModal}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="fb-root">
         <StyledIcon icon={ecolyoIcon} size={80} />
         <p className="title">{t('feedback.title')}</p>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index a567f2b4120332fdf43d845e0edc6482a90cc29c..465fa6a2f6d37fef027d805c21ce71b7770c7a37 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`FeedbackModal component should render the component 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index f13a42912049bab5dbfb59213a6cdca56555cf2e..78943998da591661443169f602075d97339b0e0f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,7 +1,6 @@
-import IconButton from '@material-ui/core/IconButton'
 import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
 import FeedbackIcon from 'assets/icons/ico/feedback.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { ScreenType } from 'enums'
 import React, { useCallback, useEffect, useRef } from 'react'
@@ -55,13 +54,12 @@ const Header = ({
         <div className="header-content">
           <div className="header-content-top">
             {screenType !== ScreenType.MOBILE && displayBackArrow && (
-              <IconButton
+              <StyledIconButton
+                icon={BackArrowIcon}
+                onClick={handleClickBack}
                 aria-label={t('header.accessibility.button_back')}
                 className="header-back-button"
-                onClick={handleClickBack}
-              >
-                <StyledIcon icon={BackArrowIcon} />
-              </IconButton>
+              />
             )}
             {desktopTitleKey && (
               <div
@@ -78,13 +76,13 @@ const Header = ({
                 <span>{t(desktopTitleKey)}</span>
               </div>
             )}
-            <IconButton
+            <StyledIconButton
+              icon={FeedbackIcon}
+              sized={40}
+              onClick={handleClickFeedbacks}
               aria-label={t('header.accessibility.button_open_feedbacks')}
               className="header-feedbacks-button"
-              onClick={handleClickFeedbacks}
-            >
-              <StyledIcon icon={FeedbackIcon} size={40} />
-            </IconButton>
+            />
           </div>
           {children}
         </div>
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 2b060bac40e27596a9dae81d405bc37b8b3cf350..10fd9d80a25771d01d880008ed4e5aae2ad053d8 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`Header component should be rendered correctly on desktop 1`] = `
           </div>
           <button
             aria-label="header.accessibility.button_open_feedbacks"
-            class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 header-feedbacks-button"
             tabindex="0"
             type="button"
           >
@@ -74,7 +74,7 @@ exports[`Header component should be rendered correctly on mobile 1`] = `
           </div>
           <button
             aria-label="header.accessibility.button_open_feedbacks"
-            class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 header-feedbacks-button"
             tabindex="0"
             type="button"
           >
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index ca43a508d76ed4891b6d6c352ab498f5b0cab14c..2b184b5b72941603ff72b2519c41c30e6cfaa0a9 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -20,9 +20,10 @@ const KonnectorViewerList = () => {
 
   return (
     <div className="konnector-section-root">
-      <div className="konnectorsList">
+      <div role="list" className="konnectorsList">
         {fluidStatus.map(fluidStatusItem => (
           <StyledCard
+            role="listitem"
             key={fluidStatusItem.fluidType}
             className="connection-card"
             onClick={() => goToFluid(fluidStatusItem.fluidType)}
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 55983671a4f8b302b7d61f5222229fb5cbf744f0..f8732ace78b8109259f46a185eaaed3394d62730 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -7,9 +7,11 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
   >
     <div
       class="konnectorsList"
+      role="list"
     >
       <button
         class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+        role="listitem"
         tabindex="0"
         type="button"
       >
@@ -41,6 +43,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+        role="listitem"
         tabindex="0"
         type="button"
       >
@@ -72,6 +75,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+        role="listitem"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
index a057c53700ae6c9688e271366dff865bc41a1c19..afc4719f720a12ec32b27355edc7b3d0089fb352 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
         >
           <button
             aria-label="export.button_close"
-            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
             tabindex="0"
             type="button"
           >
@@ -158,7 +158,7 @@ exports[`exportDoneModal component should display error message 1`] = `
         >
           <button
             aria-label="export.button_close"
-            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 modal-paper-close-button"
             tabindex="0"
             type="button"
           >
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index bde82ab420fc03cd8fb898ea247dc39da808e07d..a3632b692c622240252ef0fa38c1fa03883d25dd 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
         >
           <button
             aria-label="export.button_close"
-            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
             tabindex="0"
             type="button"
           >
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
index 4641758ad102b717f979122b4cb96454d94cc39e..d0917f71a040af447805ce972709de3148e6736d 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
         >
           <button
             aria-label="export.button_close"
-            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
             tabindex="0"
             type="button"
           >
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
index 742fcc7775a537f342cc0ceef79d2fa2f4311ec3..1d7fa8dd2c2ea95261d2bf72ef6de33289da69e1 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
@@ -1,9 +1,10 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import exportDone from 'assets/icons/ico/exportDone.svg'
 import warnCross from 'assets/icons/ico/warn-cross.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './exportDoneModal.scss'
@@ -36,13 +37,13 @@ const ExportDoneModal = ({
       </div>
 
       <div className="modal-done-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('export.button_close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <StyledIcon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
 
         <div className="content">
           <div className="icon-main">
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
index 4dda61aae2e9a2810bc5f41eef19dc5c0d1e066b..e8caa16c8cf0632deb8e639c4ce53d461777a5bb 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
@@ -1,8 +1,8 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import * as Sentry from '@sentry/react'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -189,13 +189,13 @@ const ExportLoadingModal = ({
       </div>
 
       <div className="modal-loading-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('export.button_close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <StyledIcon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
         <div className="content">
           <div className="icon-main">
             <Loader color="gold" />
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.tsx b/src/components/Options/ExportData/Modals/exportStartModal.tsx
index 2210a5c7feae285e1708c4dddbc0b050cfbe701d..6412e8c7bd1108d2ec7d460af856f17461ac1bcd 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.tsx
@@ -1,8 +1,9 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import download from 'assets/icons/ico/download.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './exportStartModal.scss'
@@ -34,13 +35,13 @@ const ExportStartModal = ({
         {t('export.modal_start.accessibility_title')}
       </div>
       <div className="modal-start-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('export.button_close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <StyledIcon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
         <div className="content">
           <div className="icon-main">
             <StyledIcon icon={download} size={48} />
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index 6d26bd5e935a8870c47c194c355057bf9a0617d6..0bb7f96de84149085f6277678ab15000f1d32a2f 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -1,9 +1,9 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
@@ -50,13 +50,12 @@ const PartnerIssueModal = ({
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={() => handleCloseClick(issuedFluid)}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={() => handleCloseClick(issuedFluid)}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
 
       <div className="partnerIssueModal">
         <StyledIcon icon={OrangeWarn} size={40} className="warn-icon" />
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index 2da3a371021ada8c3ae39dce5ca2d9d014b5daf3..3f2d19fd53ce78fdb02d220530eae54f47bb6c49 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
index eb59925814374d01f1b630783c21b082cbb32db6..fd9b2c8f40d9e793bbd58a3192760c361f29b1e3 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
@@ -86,9 +86,10 @@ const QuizQuestionContent = ({
     <div className="quiz-container">
       <div className="question-container">
         <StyledIconButton
-          className="btn-back"
           icon={CloseIcon}
           onClick={goBack}
+          aria-label={t('quiz.accessibility.window_quit')}
+          className="btn-back"
         />
         <p className="index-question">{questionIndex + 1}/5</p>
         <p className="question text-18-bold">
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index 2b481a416af6537499fa9eb3a95ce1d11348f5d6..5398cea0575f7766a839ca806a58be7d40aca499 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -1,11 +1,11 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import GCUContent from 'components/Options/GCU/GCUContent'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './termsView.scss'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 
 interface CGUModalProps {
   open: boolean
@@ -26,13 +26,12 @@ const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <GCUContent />
       <Button
         aria-label={t('gcu_modal.accessibility.button_accept')}
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 5b2796b86ebc176369511fdb9001e6d0435cf11f..10120ae93813d0a0cd4e0ca8faf4be69d43ac0e9 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -1,7 +1,7 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import LegalNoticeContent from 'components/Options/LegalNotice/LegalNoticeContent'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
@@ -28,13 +28,12 @@ const LegalNoticeModal = ({
       }}
     >
       <div id="accessibility-title">{t('legal.title_legal')}</div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <LegalNoticeContent />
       <Button
         aria-label={t('gcu_modal.accessibility.button_accept')}
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index f69973105e2cbc74de85d13dc090441c4242e447..3c7e8fbc6245a8eca3416e27019ec67ac1effb5b 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index 12f39a089ab591baf0fda9b7c671d1807d647f13..ba890dd86ad74c9ff36d78898bfebb2378c5c2c9 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/components/WelcomeModal/WelcomeModal.tsx b/src/components/WelcomeModal/WelcomeModal.tsx
index c9ebab7cbd4da252b6410c158c469cefb3a75e72..0b0a47a348c4965e7b4243eb48148911ac459ff2 100644
--- a/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.tsx
@@ -1,7 +1,8 @@
-import { Button, Dialog, IconButton } from '@material-ui/core'
+import { Button, Dialog } from '@material-ui/core'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -79,13 +80,12 @@ const WelcomeModal = ({ open }: { open: boolean }) => {
       <div id="accessibility-title">
         {t('onboarding.welcomeModal.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={setWelcomeModalViewed}
         aria-label={t('onboarding.welcomeModal.accessibility.button_valid')}
         className="modal-paper-close-button"
-        onClick={setWelcomeModalViewed}
-      >
-        <StyledIcon icon={CloseIcon} />
-      </IconButton>
+      />
       <div className="info">
         <h1 className="info-header text-24-bold">
           {t('onboarding.welcomeModal.title')}
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index 7f96a2ea50d0f1b608eef4e5d093391c97902a71..ecd108864ca1ddd60fb139c48994f465aa4cffc4 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
         </div>
         <button
           aria-label="onboarding.welcomeModal.accessibility.button_valid"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
           tabindex="0"
           type="button"
         >
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 49c4b41994d89a7f909d7d770ec532da989138de..205ca19d0d8d6894e14396d3092bfb6c172e4b56 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -99,7 +99,11 @@
     "approximative_description": "Pour comparer votre consommation avec un foyer similaire ou avec une conso idéale, veuillez détailler votre profil",
     "no_data": "Pas de données",
     "accessibility": {
-      "button_go_to_profil": "Détailler mon profil"
+      "button_go_to_profil": "Détailler mon profil",
+      "comparison_multifluid": "Vos dépenses (tous fluides confondus) vs Dépenses moyennes",
+      "comparison_electricity": "Votre consommation d'électricité vs Consommation moyenne",
+      "comparison_water": "Votre consommation d'eau vs Consommation moyenne",
+      "comparison_gas": "Votre consommation de gaz vs Consommation moyenne"
     },
     "max_day": "Jour où vous avez le plus consommé",
     "compare": {
@@ -152,8 +156,8 @@
   },
   "elec_info_modal": {
     "accessibility": {
-      "window_title": "electricity-info-modal",
-      "button_close": "close-modal"
+      "window_title": "Information sur les statistiques Enedis",
+      "button_close": "Fermer la fenêtre d'information"
     },
     "maxPowerTitle": "Qu’est-ce que la puissance maximum\u00a0?",
     "maxPowerDetails-1": "C’est la puissance maximum délivrée par tous les appareils fonctionnant au même moment dans votre logement.",
@@ -369,12 +373,9 @@
     "data_empty": "Vide",
     "estimated": "estimés",
     "cost_per_fluid": {
-      "elec": "Part de l'électricité",
+      "electricity": "Part de l'électricité",
       "water": "Part de l'eau",
-      "gas": "Part du gaz",
-      "0": "Part de l'électricité",
-      "1": "Part de l'eau",
-      "2": "Part du gaz"
+      "gas": "Part du gaz"
     },
     "dataModal": {
       "list_title": "3 raisons possibles :",
@@ -447,7 +448,8 @@
     "title": "Félicitations !",
     "subtitle": "Vous avez terminé tous les défis !",
     "message1": "Nous travaillons actuellement à vous proposer de nouveaux défis.",
-    "message2": "Vous pouvez donner votre avis sur ce que vous aimeriez en cliquant sur la bulle d'aide."
+    "message2": "Vous pouvez donner votre avis sur ce que vous aimeriez en cliquant sur la bulle d'aide.",
+    "close": "Fermer la fenêtre"
   },
   "duel_empty_value_modal": {
     "title": "Oups !",
@@ -1240,6 +1242,7 @@
     "next": "Suivant",
     "consumption_question": "Question sur votre consommation",
     "accessibility": {
+      "window_quit": "Quitter la fenêtre",
       "window_title": "Fenêtre de résultat",
       "button_end_quiz": "Terminer le quiz",
       "button_go_back": "Retour",