diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index f3b4494d432dc54abb4fd801342ef2e06272b811..29e629a1b0a49e831c28d3ee2f72da2fba473400 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react'
+import classNames from 'classnames'
 import { NavLink } from 'react-router-dom'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -11,7 +12,6 @@ import { UsageEventType } from 'enum/usageEvent.enum'
 import ConverterService from 'services/converter.service'
 import { formatNumberValues } from 'utils/utils'
 import UsageEventService from 'services/usageEvent.service'
-import classNames from 'classnames'
 
 interface DataloadSectionDetailProps {
   dataload: Dataload
@@ -41,9 +41,12 @@ const DataloadSectionDetail = ({
   if (fluidType !== FluidType.MULTIFLUID) {
     return (
       <div
-        className={`dataloadvisualizer-euro ${FluidType[
-          fluidType
-        ].toLowerCase()}-compare text-16-normal`}
+        className={classNames('dataloadvisualizer-euro text-16-normal', {
+          [`${FluidType[fluidType].toLowerCase()}`]:
+            dataloadSectionType !== DataloadSectionType.LEFT,
+          [`${FluidType[fluidType].toLowerCase()}-compare`]:
+            dataloadSectionType === DataloadSectionType.LEFT,
+        })}
       >
         {`${formatNumberValues(
           converterService.LoadToEuro(
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
index 24afd34dce7ab6f32fff60aa615b8ccbfd83333e..0297049b01392e1e2713f8f5d6f504349070b92e 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
@@ -112,7 +112,7 @@ describe('DataloadSectionValue component', () => {
           .first()
           .contains('12,00')
       ).toBeTruthy()
-      expect(wrapper.find('.euroUnit').exists()).toBeFalsy()
+      expect(wrapper.find('.euroUnit').exists()).toBeTruthy()
       expect(wrapper.find('.estimated').exists()).toBeTruthy()
       expect(wrapper.find('.estimated').text()).toBe(
         'consumption_visualizer.estimated'
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
index f1ffda1ed6da377c9acd564ff13ddee56d8179a9..14f2db2dfc45fee0017b739e9b100517b3c5e9ef 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import classNames from 'classnames'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { Dataload } from 'models'
 import { FluidType } from 'enum/fluid.enum'
@@ -25,12 +24,7 @@ const DataloadSectionValue = ({
     return (
       <>
         {formatNumberValues(dataload.value)}
-        <span
-          className={classNames('text-18-normal', {
-            ['euroUnit']:
-              dataloadSectionType !== DataloadSectionType.NO_COMPARE,
-          })}
-        >
+        <span className={'text-18-normal euroUnit'}>
           {`${t('FLUID.' + FluidType[fluidType] + '.UNIT')}`}
         </span>
         {dataloadSectionType === DataloadSectionType.NO_COMPARE && (
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
index f0b4a992be4fb8c7739d9ea366b33ff34e4a3342..8a77ee10d05efd830cedb86e08a933b02803b93d 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
@@ -180,7 +180,7 @@ exports[`DataloadSectionDetail component should render correctly 1`] = `
   fluidType={0}
 >
   <div
-    className="dataloadvisualizer-euro electricity-compare text-16-normal"
+    className="dataloadvisualizer-euro text-16-normal electricity"
   >
     2,09 €
   </div>