diff --git a/src/assets/icons/visu/notif_error.svg b/src/assets/icons/ico/notif_error.svg
similarity index 100%
rename from src/assets/icons/visu/notif_error.svg
rename to src/assets/icons/ico/notif_error.svg
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index d597d11730337827aaea332f8f55ca26a30199ae..136ca57876dc54df18a9a179e74985fec5825cae 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -15,10 +15,12 @@ import ErrorDataConsumptionVisualizer from 'components/ConsumptionVisualizer/Err
 interface ConsumptionVisualizerProps {
   fluidType: FluidType
   showCompare: boolean
+  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
   fluidType,
   showCompare,
+  setActive,
 }: ConsumptionVisualizerProps) => {
   const { fluidStatus, fluidTypes } = useSelector(
     (state: AppStore) => state.ecolyo.global
@@ -61,6 +63,7 @@ const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
         compareDataload={compareDataload}
         showCompare={showCompare}
         lastDataDate={lastDataDate}
+        setActive={setActive}
       />
       <div className="consumptionvisualizer-info">
         {dataload &&
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index 45157fff4f2026e7a3b5e2e1ec6ffc0db711570c..ddb94ea25ca318253fb7a30a206dfc9f7a6e5469 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -52,6 +52,7 @@ describe('Dataload consumption visualizer component', () => {
           lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
             zone: 'utc',
           })}
+          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -73,6 +74,7 @@ describe('Dataload consumption visualizer component', () => {
           lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
             zone: 'utc',
           })}
+          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -94,6 +96,7 @@ describe('Dataload consumption visualizer component', () => {
           lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
             zone: 'utc',
           })}
+          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -115,6 +118,7 @@ describe('Dataload consumption visualizer component', () => {
           lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
             zone: 'utc',
           })}
+          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -137,6 +141,7 @@ describe('Dataload consumption visualizer component', () => {
           lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
             zone: 'utc',
           })}
+          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -173,6 +178,7 @@ describe('Dataload consumption visualizer component', () => {
             lastDataDate={DateTime.fromISO('2021-09-23T00:00:00.000Z', {
               zone: 'utc',
             })}
+            setActive={jest.fn()}
           />
         </Router>
       </Provider>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 79439d735bede102363c3aa0418aa68c7d60600e..0753bc7759deb400c3d29bc16aa61594cca33f1b 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -25,6 +25,7 @@ interface DataloadConsumptionVisualizerProps {
   compareDataload: Dataload | null
   showCompare: boolean
   lastDataDate: DateTime | null
+  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 const DataloadConsumptionVisualizer = ({
   fluidType,
@@ -32,6 +33,7 @@ const DataloadConsumptionVisualizer = ({
   compareDataload,
   showCompare,
   lastDataDate,
+  setActive,
 }: DataloadConsumptionVisualizerProps) => {
   const { t } = useI18n()
   const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
@@ -49,6 +51,27 @@ const DataloadConsumptionVisualizer = ({
     },
     [client]
   )
+  const handleToggleKonnectionCard = useCallback(() => {
+    setActive(true)
+    const app = document.querySelector('.app-content')
+
+    const content = document.querySelector('.content-view')
+    if (content && app) {
+      setTimeout(() => {
+        //Desktop devices
+        app.scrollTo({
+          top: content.scrollHeight + 300,
+          behavior: 'smooth',
+        })
+        //Mobiles devices
+        app.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+          inline: 'end',
+        })
+      }, 300)
+    }
+  }, [setActive])
   const toggleEstimationModal = useCallback(() => {
     setOpenEstimationModal(prev => !prev)
   }, [])
@@ -224,9 +247,8 @@ const DataloadConsumptionVisualizer = ({
             </div>
           ) : (
             <div
-              className={`dataloadvisualizer-content${FluidType[
-                fluidType
-              ].toLowerCase()} text-22-normal`}
+              onClick={handleToggleKonnectionCard}
+              className={`dataloadvisualizer-content text-22-normal error`}
             >
               {`${t('consumption_visualizer.no_data')}`}
             </div>
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index 5a902402aef0a616080aa3b0c7e9e3513a7ff9e4..c5659df8e8f9870bfa62b5b1a2a108c3db436f66 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -11,6 +11,13 @@
   flex-direction: row;
   align-items: center;
   color: $grey-bright;
+
+  &.error {
+    cursor: pointer;
+    color: $red-primary;
+    font-weight: bold;
+    text-decoration: underline;
+  }
   .dataloadvisualizer-section {
     display: flex;
     flex-direction: column;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index d22433afecc8bdaba6b34fc94d36e0a8529dbc00..e4b91392967676d57c6948474e85e86835b9660a 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -26,10 +26,12 @@ import UsageEventService from 'services/usageEvent.service'
 
 interface FluidChartProps {
   fluidType: FluidType
+  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const FluidChart: React.FC<FluidChartProps> = ({
   fluidType,
+  setActive,
 }: FluidChartProps) => {
   const { t } = useI18n()
   const client = useClient()
@@ -129,6 +131,7 @@ const FluidChart: React.FC<FluidChartProps> = ({
                   showCompare={
                     currentTimeStep === TimeStep.YEAR ? false : showCompare
                   }
+                  setActive={setActive}
                 />
                 <FluidChartSwipe
                   fluidType={fluidType}
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index 16c93051a84825c854d3d2507d26111095a529b1..c50430cc9d8a1053d6563ecf06e023d0780acece 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -35,6 +35,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
   const [isMulti] = useState<boolean>(
     fluidType === FluidType.MULTIFLUID ? true : false
   )
+  const [active, setActive] = useState<boolean>(false)
 
   const defineHeaderHeight = useCallback((height: number) => {
     setHeaderHeight(height)
@@ -73,7 +74,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
                 ['--hidden']: loading,
               })}
             >
-              <FluidChart fluidType={fluidType} />
+              <FluidChart fluidType={fluidType} setActive={setActive} />
               <ConsumptionDetails fluidType={fluidType} />
             </div>
             {!isMulti && (
@@ -82,6 +83,8 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
                   fluidStatus={fluidStatus[fluidType]}
                   isParam={true}
                   isDisconnected={false}
+                  setActive={setActive}
+                  active={active}
                 />
               </div>
             )}
@@ -92,6 +95,8 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
               fluidStatus={fluidStatus[fluidType]}
               isParam={false}
               isDisconnected={true}
+              setActive={setActive}
+              active={active}
             />
           </div>
         ) : (
diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx
index c29a109e4b71f9bddcb2ac9849e18e7e9a585f7d..d177061f4473f53fe48d5f293c16fff30fd2d280 100644
--- a/src/components/Home/FluidButton.spec.tsx
+++ b/src/components/Home/FluidButton.spec.tsx
@@ -4,11 +4,14 @@ import { Provider } from 'react-redux'
 import {
   createMockStore,
   mockInitialEcolyoState,
+  mockInitialGlobalState,
 } from '../../../tests/__mocks__/store'
 
-import { FluidType } from 'enum/fluid.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
 import FluidButton from './FluidButton'
 import UsageEventService from 'services/usageEvent.service'
+import configureStore from 'redux-mock-store'
+import { GlobalState } from 'models'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
@@ -52,6 +55,7 @@ describe('FluidButton component', () => {
     )
     expect(wrapper.find('.active')).toBeTruthy()
   })
+
   it('should trigger nav event', () => {
     jest.mock('services/usageEvent.service')
     const mockAddEvent = jest.fn()
@@ -64,4 +68,24 @@ describe('FluidButton component', () => {
     wrapper.find('.fluid-button').simulate('click')
     expect(mockAddEvent).toHaveBeenCalled()
   })
+
+  it('should render errored button', () => {
+    const mockStore = configureStore([])
+
+    const updatedInitalState: GlobalState = {
+      ...mockInitialGlobalState,
+    }
+    updatedInitalState.fluidStatus[FluidType.GAS].status = FluidState.ERROR
+    const store2 = mockStore({
+      ecolyo: {
+        global: updatedInitalState,
+      },
+    })
+    const wrapper = mount(
+      <Provider store={store2}>
+        <FluidButton fluidType={FluidType.GAS} isActive={false} />
+      </Provider>
+    )
+    expect(wrapper.find('.notif-error')).toBeTruthy()
+  })
 })
diff --git a/src/components/Home/FluidButton.tsx b/src/components/Home/FluidButton.tsx
index d8302292d174856e5b586d6d2d116ef7923913e7..a3b380e49bb14466ecb7623b2047abf19f0ebf11 100644
--- a/src/components/Home/FluidButton.tsx
+++ b/src/components/Home/FluidButton.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
-import { FluidType } from 'enum/fluid.enum'
+import { FluidState, FluidType } from 'enum/fluid.enum'
 import { getNavPicto } from 'utils/picto'
 import { useHistory } from 'react-router'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -11,6 +11,7 @@ import { useClient } from 'cozy-client'
 import { useSelector } from 'react-redux'
 import { AppStore } from 'store'
 import { isKonnectorActive } from 'utils/utils'
+import ErrorNotif from 'assets/icons/ico/notif_error.svg'
 
 interface FluidButtonProps {
   fluidType: FluidType
@@ -32,6 +33,16 @@ const FluidButton: React.FC<FluidButtonProps> = ({
     } else return isKonnectorActive(fluidStatus, fluidType)
   }, [fluidStatus, fluidType])
 
+  const isErrored = useCallback(() => {
+    if (
+      fluidType !== FluidType.MULTIFLUID &&
+      fluidStatus[fluidType].status === FluidState.ERROR
+    ) {
+      return true
+    }
+    return false
+  }, [fluidStatus, fluidType])
+
   const iconType = getNavPicto(fluidType, isActive, isConnected())
 
   const goToFluid = useCallback(async () => {
@@ -57,7 +68,9 @@ const FluidButton: React.FC<FluidButtonProps> = ({
         icon={iconType}
         size={fluidType === FluidType.MULTIFLUID ? 36 : 32}
       />
-
+      {isErrored() && (
+        <StyledIcon icon={ErrorNotif} size={22} className="notif-error" />
+      )}
       <div
         className={`fluid-title ${FluidType[
           fluidType
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
index a00c6ae2aefcc30d5b615cf4d27eb9d2ccc461ba..7264e410d0e4a26afcef23a3df43cf968d7ad060 100644
--- a/src/components/Home/consumptionView.scss
+++ b/src/components/Home/consumptionView.scss
@@ -19,6 +19,6 @@
   margin-top: 1rem;
   @media #{$large-phone} {
     width: 100%;
-    padding: 1rem;
+    padding: 1rem 1rem 4rem 1rem;
   }
 }
diff --git a/src/components/Home/fluidButtons.scss b/src/components/Home/fluidButtons.scss
index 5bc8da7d9b086ad7867e0a9766e55b804f545c95..4a6a4581ea11a4b4d4e1f1591f5dd8a950d73537 100644
--- a/src/components/Home/fluidButtons.scss
+++ b/src/components/Home/fluidButtons.scss
@@ -25,6 +25,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    position: relative;
     .fluid-title {
       text-align: center;
       color: $grey-dark;
@@ -34,5 +35,10 @@
         color: white;
       }
     }
+    .notif-error {
+      position: absolute;
+      top: -2px;
+      right: 11px;
+    }
   }
 }
diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f0308da6a915afe3fb03041c4796d18691791f0
--- /dev/null
+++ b/src/components/Konnector/KonnectorModal.spec.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import {
+  createMockStore,
+  mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+
+import KonnectorModal from './KonnectorModal'
+import { FluidType } from 'enum/fluid.enum'
+import { Button } from '@material-ui/core'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('KonnectroModal component', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let store: any
+  beforeEach(() => {
+    store = createMockStore(mockInitialEcolyoState)
+  })
+  const mockHandleCloseClick = jest.fn()
+  it('should be rendered correctly', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorModal
+          open={true}
+          isUpdating={false}
+          state={null}
+          error={null}
+          fluidType={FluidType.ELECTRICITY}
+          handleCloseClick={mockHandleCloseClick}
+        />
+      </Provider>
+    ).getElement()
+    expect(wrapper).toMatchSnapshot()
+  })
+  it('should be with updating text', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorModal
+          open={true}
+          isUpdating={true}
+          state={null}
+          error={null}
+          fluidType={FluidType.ELECTRICITY}
+          handleCloseClick={mockHandleCloseClick}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.kmodal-waiting-text')).toBeTruthy()
+  })
+  it('should be correctly closed', async () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorModal
+          open={true}
+          isUpdating={false}
+          state={'errored'}
+          error={null}
+          fluidType={FluidType.ELECTRICITY}
+          handleCloseClick={mockHandleCloseClick}
+        />
+      </Provider>
+    )
+    wrapper.find(Button).simulate('click')
+    expect(mockHandleCloseClick).toHaveBeenCalled()
+  })
+  it('should render login error', async () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorModal
+          open={true}
+          isUpdating={false}
+          state={'error'}
+          error={'LOGIN_FAILED'}
+          fluidType={FluidType.ELECTRICITY}
+          handleCloseClick={mockHandleCloseClick}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.kce-picto-txt')).toBeTruthy()
+  })
+  it('should render unknown error', async () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorModal
+          open={true}
+          isUpdating={false}
+          state={'error'}
+          error={''}
+          fluidType={FluidType.ELECTRICITY}
+          handleCloseClick={mockHandleCloseClick}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('.err-data-2')).toBeTruthy()
+  })
+})
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 95e8f1b9b674dc54b86fcad21dd69a1c00d36127..8c3294ef3e868dbb448fa4ad1b81aa32a72d8d7e 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -119,7 +119,6 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
                     })}
                   >
                     <p>{text.first}</p>
-                    <p>{text.second}</p>
                   </div>
                 ))}
               </div>
@@ -157,7 +156,9 @@ const KonnectorModal: React.FC<KonnectorModalProps> = ({
                           }${fluidName.toLowerCase()}`
                         )}
                       </div>
-                      <div>{t('konnector_modal.error_data_2')}</div>
+                      <div className="err-data-2">
+                        {t('konnector_modal.error_data_2')}
+                      </div>
                     </div>
                   )}
                 </>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 3d14877b96271860d1c61f0c29d651f37785668a..04b429bb1e3892e2b21be206efbec88e467455e4 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -46,7 +46,6 @@ import {
   SUCCESS_EVENT,
   LOGIN_SUCCESS_EVENT,
 } from 'cozy-harvest-lib/dist/models/flowEvents'
-import { useParams } from 'react-router-dom'
 import { DateTime } from 'luxon'
 import { setSelectedDate } from 'store/chart/chart.actions'
 
@@ -54,27 +53,27 @@ interface KonnectorViewerCardProps {
   fluidStatus: FluidStatus
   isParam: boolean
   isDisconnected: boolean
-}
-interface ConnectParam {
-  connectParam: string | undefined
+  active: boolean
+  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
   fluidStatus,
   isParam,
   isDisconnected,
+  active,
+  setActive,
 }: KonnectorViewerCardProps) => {
   const { t } = useI18n()
   const client = useClient()
   const dispatch = useDispatch()
-  const { connectParam }: ConnectParam = useParams()
+
   const fluidSlug = fluidStatus.connection.konnectorConfig.slug
   const fluidState = fluidStatus.status
   const konnector: Konnector | null = fluidStatus.connection.konnector
   const account: Account | null = fluidStatus.connection.account
   const trigger: Trigger | null = fluidStatus.connection.trigger
 
-  const [active, setActive] = useState<boolean>(false)
   const [openModal, setOpenModal] = useState(false)
   const [isUpdating, setIsUpdating] = useState(false)
   const [konnectorErrorDescription, setKonnectorErrorDescription] = useState<
@@ -150,7 +149,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     if (updatedFluidStatus.length > 0) {
       dispatch(setFluidStatus(updatedFluidStatus))
     }
-  }, [dispatch, updatedFluidStatus])
+  }, [dispatch, setActive, updatedFluidStatus])
 
   const handleAccountDeletion = useCallback(async () => {
     updateProfileHaveSeenOldFluidModal()
@@ -161,9 +160,10 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     }
     setActive(false)
   }, [
-    updateGlobalFluidStatus,
     updateProfileHaveSeenOldFluidModal,
     refreshChallengeState,
+    updateGlobalFluidStatus,
+    setActive,
     dispatch,
   ])
 
@@ -232,11 +232,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
       }
     }
     getData()
-    if (connectParam && connectParam === fluidStatus.fluidType.toString()) {
-      setActive(true)
-    } else {
-      setActive(false)
-    }
     return () => {
       subscribed = false
     }
@@ -248,7 +243,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     fluidStatus.connection.isUpdating,
     fluidStatus.fluidType,
     callbackResponse,
-    connectParam,
+    setActive,
   ])
 
   return (
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c830ad75ddc00145c4e353c7cb01fa9cb1fa78b6
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import {
+  createMockStore,
+  mockInitialEcolyoState,
+  mockInitialGlobalState,
+} from '../../../tests/__mocks__/store'
+import * as reactRedux from 'react-redux'
+import KonnectorViewerList from './KonnectorViewerList'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}))
+
+describe('KonnectorViewerList component', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let store: any
+  beforeEach(() => {
+    store = createMockStore(mockInitialEcolyoState)
+  })
+
+  it('should be rendered correctly', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorViewerList />
+      </Provider>
+    ).getElement()
+    expect(wrapper).toMatchSnapshot()
+  })
+  it('should click on card and nav to fluid', async () => {
+    const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
+
+    mockUseSelector.mockReturnValue({
+      fluidStatus: mockInitialGlobalState.fluidStatus,
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <KonnectorViewerList />
+      </Provider>
+    )
+    wrapper
+      .find('.connection-card')
+      .first()
+      .simulate('click')
+    expect(mockHistoryPush).toHaveBeenCalled()
+  })
+})
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 9bf09ae83a2924742d2c0bf7d59765720bd3e3e4..b8504aa706cdcb90ccfa870411daf19639d298c1 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -9,7 +9,7 @@ import { FluidStatus } from 'models'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
 import { FluidType } from 'enum/fluid.enum'
 import { getAddPicto } from 'utils/picto'
-import { useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
 
 const KonnectorViewerList: React.FC = () => {
   const { t } = useI18n()
diff --git a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..c011bada0e60d4f97ca05b955a146ce9c49bb4d2
--- /dev/null
+++ b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KonnectroModal component should be rendered correctly 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <KonnectorModal
+    error={null}
+    fluidType={0}
+    handleCloseClick={[MockFunction]}
+    isUpdating={false}
+    open={true}
+    state={null}
+  />
+</Provider>
+`;
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..e4db320e76a8acd30aefd8c2704087d13d69b6ed
--- /dev/null
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KonnectorViewerList component should be rendered correctly 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <KonnectorViewerList />
+</Provider>
+`;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3a03c46542a3e98bb17198693b3582857d418e7e..dea81baf71e9e9c4de192b8a9921ec5553556a6a 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -237,7 +237,7 @@
     "mini_cards_label": "AUTRES ENERGIES"
   },
   "consumption_visualizer": {
-    "no_data": "Pas de données",
+    "no_data": "Données manquantes",
     "last_data": "Dernières données",
     "last_valid_data": "Dernières données valides",
     "data_to_come": "à venir",