diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index 6fcb134180032a5e690a9b255e8dbd0c481a7a62..ea5922bbaf2c27a1d95c8ee76c11a7fbc5cb8141 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -51,7 +51,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
     releaseNotes.show
   )
 
-  const [active, setActive] = useState<boolean>(false)
   const [openExpiredConsentModal, setOpenExpiredConsentModal] =
     useState<boolean>(true)
   const [consentExpiredFluids, setConsentExpiredFluids] = useState<FluidType[]>(
@@ -229,19 +228,12 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
         )}
         {showOfflineData && (
           <>
-            <FluidChart
-              fluidType={fluidType}
-              setActive={setActive}
-              key={lastDataDateKey}
-            />
+            <FluidChart fluidType={fluidType} key={lastDataDateKey} />
             <ConsumptionDetails fluidType={fluidType} />
             {!isMulti && (
               <KonnectorViewerCard
                 fluidType={fluidType}
-                isDisconnected={false}
                 showOfflineData={true}
-                setActive={setActive}
-                active={active}
                 key={fluidType}
               />
             )}
@@ -254,10 +246,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
             ) : (
               <KonnectorViewerCard
                 fluidType={fluidType}
-                isDisconnected={true}
                 showOfflineData={false}
-                setActive={setActive}
-                active={active}
               />
             )}
           </div>
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index 3abf83ce6491136f93ef9c8e1b8c661eff2907ba..ab0e5d35ef66101aebf52175ca76c3c1f1b2779c 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -7,14 +7,7 @@ import { useAppSelector } from 'store/hooks'
 import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
 import './consumptionVisualizer.scss'
 
-interface ConsumptionVisualizerProps {
-  fluidType: FluidType
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
-}
-const ConsumptionVisualizer = ({
-  fluidType,
-  setActive,
-}: ConsumptionVisualizerProps) => {
+const ConsumptionVisualizer = ({ fluidType }: { fluidType: FluidType }) => {
   const {
     chart: { currentDatachart, currentDatachartIndex },
     global: { fluidStatus, fluidTypes },
@@ -53,7 +46,6 @@ const ConsumptionVisualizer = ({
         fluidType={fluidType}
         dataload={dataload}
         compareDataload={compareDataload}
-        setActive={setActive}
       />
       <div className="consumptionvisualizer-info">
         <InfoDataConsumptionVisualizer
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index b3c3b46eaefb8309acf47d6d73350e92f672bf24..e0afcdfbd52fa876d4cb2a597f6d8055a1021657 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -51,7 +51,6 @@ describe('Dataload consumption visualizer component', () => {
           fluidType={FluidType.ELECTRICITY}
           dataload={baseDataLoad}
           compareDataload={baseDataLoad}
-          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -65,7 +64,6 @@ describe('Dataload consumption visualizer component', () => {
             fluidType={FluidType.ELECTRICITY}
             dataload={null as unknown as Dataload}
             compareDataload={baseDataLoad}
-            setActive={jest.fn()}
           />
         </Provider>
       )
@@ -81,7 +79,6 @@ describe('Dataload consumption visualizer component', () => {
             fluidType={FluidType.ELECTRICITY}
             dataload={{ ...baseDataLoad, date: DateTime.local(9999, 1, 1) }}
             compareDataload={baseDataLoad}
-            setActive={jest.fn()}
           />
         </Provider>
       )
@@ -99,7 +96,6 @@ describe('Dataload consumption visualizer component', () => {
           fluidType={FluidType.ELECTRICITY}
           dataload={{ ...baseDataLoad, state: DataloadState.MISSING }}
           compareDataload={baseDataLoad}
-          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -116,7 +112,6 @@ describe('Dataload consumption visualizer component', () => {
             fluidType={FluidType.MULTIFLUID}
             dataload={baseMultiFluidDataLoad}
             compareDataload={null}
-            setActive={jest.fn()}
           />
         </BrowserRouter>
       </Provider>
@@ -135,7 +130,6 @@ describe('Dataload consumption visualizer component', () => {
           fluidType={FluidType.WATER}
           dataload={baseDataLoad}
           compareDataload={emptyDataLoad}
-          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -154,7 +148,6 @@ describe('Dataload consumption visualizer component', () => {
           fluidType={FluidType.WATER}
           dataload={baseDataLoad}
           compareDataload={baseDataLoad}
-          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -168,7 +161,6 @@ describe('Dataload consumption visualizer component', () => {
           fluidType={FluidType.MULTIFLUID}
           dataload={dataLoadWithValueDetailEmpty}
           compareDataload={emptyDataLoad}
-          setActive={jest.fn()}
         />
       </Provider>
     )
@@ -191,7 +183,6 @@ describe('Dataload consumption visualizer component', () => {
             fluidType={FluidType.MULTIFLUID}
             dataload={dataLoadWithValueDetail}
             compareDataload={emptyDataLoad}
-            setActive={jest.fn()}
           />
         </BrowserRouter>
       </Provider>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index b7bc960a35d140af1f14870a7c04f70b0006a962..e28a077ee9150bb6862ee91bb293b8582f007ddd 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -12,13 +12,11 @@ interface DataloadConsumptionVisualizerProps {
   fluidType: FluidType
   dataload: Dataload
   compareDataload: Dataload | null
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 const DataloadConsumptionVisualizer = ({
   fluidType,
   dataload,
   compareDataload,
-  setActive,
 }: DataloadConsumptionVisualizerProps) => {
   const { showCompare } = useAppSelector(state => state.ecolyo.chart)
   const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
@@ -39,11 +37,7 @@ const DataloadConsumptionVisualizer = ({
   ) {
     return (
       <div className="dataloadvisualizer-root">
-        <DataloadNoValue
-          dataload={dataload}
-          setActive={setActive}
-          fluidType={fluidType}
-        />
+        <DataloadNoValue dataload={dataload} fluidType={fluidType} />
       </div>
     )
   }
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
index 4045300323387423250a533581a554488d9d6b0a..4545f197f9362f8244edeadfec59a4beb8ad823a 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
@@ -2,17 +2,30 @@ import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { DataloadState, FluidType } from 'enums'
 import React from 'react'
+import { Provider } from 'react-redux'
+import * as storeHooks from 'store/hooks'
 import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import DataloadNoValue from './DataloadNoValue'
 
+const mockDispatch = jest.fn()
+jest.spyOn(storeHooks, 'useAppDispatch').mockImplementation(() => mockDispatch)
+
 describe('DataloadNoValue component', () => {
+  const store = createMockEcolyoStore()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('should render correctly', () => {
     const { container } = render(
-      <DataloadNoValue
-        dataload={baseDataLoad}
-        fluidType={FluidType.ELECTRICITY}
-        setActive={jest.fn()}
-      />
+      <Provider store={store}>
+        <DataloadNoValue
+          dataload={baseDataLoad}
+          fluidType={FluidType.ELECTRICITY}
+        />
+      </Provider>
     )
     expect(container).toMatchSnapshot()
   })
@@ -21,11 +34,12 @@ describe('DataloadNoValue component', () => {
     it('case state EMPTY', () => {
       const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
       render(
-        <DataloadNoValue
-          dataload={mockDataLoad}
-          fluidType={FluidType.ELECTRICITY}
-          setActive={jest.fn()}
-        />
+        <Provider store={store}>
+          <DataloadNoValue
+            dataload={mockDataLoad}
+            fluidType={FluidType.ELECTRICITY}
+          />
+        </Provider>
       )
       expect(
         screen.getByText('consumption_visualizer.no_data')
@@ -34,11 +48,12 @@ describe('DataloadNoValue component', () => {
     it('case state HOLE', () => {
       const mockDataLoad = { ...baseDataLoad, state: DataloadState.HOLE }
       render(
-        <DataloadNoValue
-          dataload={mockDataLoad}
-          fluidType={FluidType.ELECTRICITY}
-          setActive={jest.fn()}
-        />
+        <Provider store={store}>
+          <DataloadNoValue
+            dataload={mockDataLoad}
+            fluidType={FluidType.ELECTRICITY}
+          />
+        </Provider>
       )
       expect(
         screen.getByText('consumption_visualizer.no_data')
@@ -50,11 +65,12 @@ describe('DataloadNoValue component', () => {
         state: DataloadState.AGGREGATED_EMPTY,
       }
       render(
-        <DataloadNoValue
-          dataload={mockDataLoad}
-          fluidType={FluidType.MULTIFLUID}
-          setActive={jest.fn()}
-        />
+        <Provider store={store}>
+          <DataloadNoValue
+            dataload={mockDataLoad}
+            fluidType={FluidType.MULTIFLUID}
+          />
+        </Provider>
       )
       expect(
         screen.getByText('consumption_visualizer.no_data')
@@ -66,11 +82,12 @@ describe('DataloadNoValue component', () => {
     it('case state MISSING', () => {
       const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
       render(
-        <DataloadNoValue
-          dataload={mockDataLoad}
-          fluidType={FluidType.ELECTRICITY}
-          setActive={jest.fn()}
-        />
+        <Provider store={store}>
+          <DataloadNoValue
+            dataload={mockDataLoad}
+            fluidType={FluidType.ELECTRICITY}
+          />
+        </Provider>
       )
       expect(
         screen.getByText('consumption_visualizer.missing_data')
@@ -82,11 +99,12 @@ describe('DataloadNoValue component', () => {
         state: DataloadState.AGGREGATED_HOLE_OR_MISSING,
       }
       render(
-        <DataloadNoValue
-          dataload={mockDataLoad}
-          fluidType={FluidType.MULTIFLUID}
-          setActive={jest.fn()}
-        />
+        <Provider store={store}>
+          <DataloadNoValue
+            dataload={mockDataLoad}
+            fluidType={FluidType.MULTIFLUID}
+          />
+        </Provider>
       )
       expect(
         screen.getByText('consumption_visualizer.missing_data')
@@ -94,17 +112,19 @@ describe('DataloadNoValue component', () => {
     })
   })
 
-  it('should call setActive when missing message is clicked', async () => {
-    const mockSetActive = jest.fn()
-    const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+  it('should call dispatch to show konnector details when missing message is clicked', async () => {
     render(
-      <DataloadNoValue
-        dataload={mockDataLoad}
-        fluidType={FluidType.ELECTRICITY}
-        setActive={mockSetActive}
-      />
+      <Provider store={store}>
+        <DataloadNoValue
+          dataload={{ ...baseDataLoad, state: DataloadState.MISSING }}
+          fluidType={FluidType.ELECTRICITY}
+        />
+      </Provider>
     )
     await userEvent.click(screen.getByRole('button'))
-    expect(mockSetActive).toHaveBeenCalledWith(true)
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'chart/setShowConnectionDetails',
+      payload: true,
+    })
   })
 })
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index 3c55e9ed03502b456ecf0c5de3a4923ac3c8cb5d..77b90b3d47af8f457f0e0166c17c9c1256fe0bc9 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -3,23 +3,21 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { DataloadState, FluidType } from 'enums'
 import { Dataload } from 'models'
 import React, { useCallback } from 'react'
+import { setShowConnectionDetails } from 'store/chart/chart.slice'
+import { useAppDispatch } from 'store/hooks'
 import './consumptionVisualizer.scss'
 
 interface DataloadNoValueProps {
   dataload: Dataload
   fluidType: FluidType
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const DataloadNoValue = ({
-  dataload,
-  fluidType,
-  setActive,
-}: DataloadNoValueProps) => {
+const DataloadNoValue = ({ dataload, fluidType }: DataloadNoValueProps) => {
   const { t } = useI18n()
+  const dispatch = useAppDispatch()
 
-  const handleToggleKonnectionCard = useCallback(() => {
-    setActive(true)
+  const handleToggleKonnectorCard = useCallback(() => {
+    dispatch(setShowConnectionDetails(true))
     const app = document.querySelector('.app-content')
     const content = document.querySelector('.content-view')
     if (content && app) {
@@ -37,7 +35,7 @@ const DataloadNoValue = ({
         })
       }, 300)
     }
-  }, [setActive])
+  }, [dispatch])
 
   if (
     dataload.state === DataloadState.EMPTY ||
@@ -65,7 +63,7 @@ const DataloadNoValue = ({
   ) {
     return (
       <Button
-        onClick={handleToggleKonnectionCard}
+        onClick={handleToggleKonnectorCard}
         classes={{ root: 'btnText', label: 'text-22-normal' }}
       >
         {t('consumption_visualizer.missing_data')}
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 2b5c2e45a73b9e64102dde5608476e04c17051e6..2e87f46b2f5fa66dcc83c481adddcf7666f82acd 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -25,12 +25,7 @@ import HalfHourUpcoming from './HalfHourUpcoming/HalfHourUpcoming'
 import TimeStepSelector from './TimeStepSelector/TimeStepSelector'
 import './fluidChart.scss'
 
-interface FluidChartProps {
-  fluidType: FluidType
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
+const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
   const { t } = useI18n()
   const client = useClient()
   const {
@@ -166,7 +161,7 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
     return (
       <>
         <div className="fluidchart-content">
-          <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
+          <FluidChartSwipe fluidType={fluidType} />
         </div>
         {showCompare && currentTimeStep !== TimeStep.YEAR && (
           <Slide direction="right" in={showCompare}>
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 2bae0adb83144a081ccbb6a4798947d5eec69bd2..f63e06da3887d8f4d91be24460c304c3f3d22c76 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -18,7 +18,6 @@ interface FluidChartSlideProps {
   width: number
   height: number
   isSwitching: boolean
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const FluidChartSlide = ({
@@ -27,7 +26,6 @@ const FluidChartSlide = ({
   width,
   height,
   isSwitching,
-  setActive,
 }: FluidChartSlideProps) => {
   const client = useClient()
   const dispatch = useAppDispatch()
@@ -119,7 +117,7 @@ const FluidChartSlide = ({
         </div>
       ) : (
         <>
-          <ConsumptionVisualizer fluidType={fluidType} setActive={setActive} />
+          <ConsumptionVisualizer fluidType={fluidType} />
           <BarChart
             chartData={chartData}
             fluidType={fluidType}
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index 0e5b1693b3eaaf02439d787f9a3e59617b7ae64c..934e86468f5da625b27ff521a5ef50921edffb37 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -12,12 +12,7 @@ import './fluidChartSwipe.scss'
 
 const VirtualizeSwipeableViews = virtualize(SwipeableViews)
 
-interface FluidChartSwipeProps {
-  fluidType: FluidType
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
+const FluidChartSwipe = ({ fluidType }: { fluidType: FluidType }) => {
   const dispatch = useAppDispatch()
   const { currentIndex, currentTimeStep, selectedDate } = useAppSelector(
     state => state.ecolyo.chart
@@ -76,7 +71,6 @@ const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
       width={width}
       height={height}
       isSwitching={isSwitching}
-      setActive={setActive}
     />
   )
 
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 9c0de9fd00b07b86b85b8a48c2132b84b93c7937..14f9c4f71f02258c51e47f560758149718b05bf7 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -42,7 +42,11 @@ import DateChartService from 'services/dateChart.service'
 import FluidService from 'services/fluid.service'
 import PartnersInfoService from 'services/partnersInfo.service'
 import { setChallengeConsumption } from 'store/challenge/challenge.slice'
-import { setSelectedDate, setShowOfflineData } from 'store/chart/chart.slice'
+import {
+  setSelectedDate,
+  setShowConnectionDetails,
+  setShowOfflineData,
+} from 'store/chart/chart.slice'
 import {
   setFluidStatus,
   setLastEpglLogin,
@@ -57,25 +61,20 @@ import ConnectionResult from './ConnectionResult/ConnectionResult'
 import './konnectorViewerCard.scss'
 
 interface KonnectorViewerCardProps {
-  isDisconnected: boolean
   showOfflineData: boolean
-  active: boolean
   fluidType: FluidType
-  setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const KonnectorViewerCard = ({
-  isDisconnected,
   showOfflineData,
-  active,
   fluidType,
-  setActive,
 }: KonnectorViewerCardProps) => {
   const { t } = useI18n()
   const client = useClient()
-  const dispatch = useAppDispatch()
   const navigate = useNavigate()
+  const dispatch = useAppDispatch()
   const {
+    chart: { showConnectionDetails },
     challenge: { currentChallenge },
     global: { fluidStatus, shouldRefreshConsent, partnersInfo },
   } = useAppSelector(state => state.ecolyo)
@@ -107,7 +106,7 @@ const KonnectorViewerCard = ({
   const iconType = getParamPicto(currentFluidStatus.fluidType)
 
   const toggleAccordion = () => {
-    setActive(prev => !prev)
+    dispatch(setShowConnectionDetails(!showConnectionDetails))
   }
 
   const updateGlobalFluidStatus = useCallback(async (): Promise<
@@ -159,11 +158,10 @@ const KonnectorViewerCard = ({
       const updatedFluidStatus = await fluidService.getFluidStatus(partnersInfo)
       dispatch(setFluidStatus(updatedFluidStatus))
     }
-    setActive(false)
+    dispatch(setShowConnectionDetails(false))
   }, [
     refreshChallengeState,
     updateGlobalFluidStatus,
-    setActive,
     partnersInfoService,
     fluidService,
     dispatch,
@@ -215,8 +213,7 @@ const KonnectorViewerCard = ({
           await fluidService.getFluidStatus(partnersInfo)
         dispatch(setFluidStatus(updatedFluidStatus))
       }
-
-      setActive(false)
+      dispatch(setShowConnectionDetails(false))
       setOpenModal(false)
       // TODO null state seems to be read before modal closing and display a success icon in modal
       setKonnectorState(null)
@@ -228,7 +225,6 @@ const KonnectorViewerCard = ({
       currentFluidStatus,
       isUpdating,
       fluidType,
-      setActive,
       fluidSlug,
       client,
       handleAccountDeletion,
@@ -490,12 +486,12 @@ const KonnectorViewerCard = ({
 
   return (
     <div className="konnector-section-root">
-      {isDisconnected && (
+      {!showOfflineData && (
         <AccordionDetails>{getConnectionCard()}</AccordionDetails>
       )}
-      {!isDisconnected && (
+      {showOfflineData && (
         <Accordion
-          expanded={active}
+          expanded={showConnectionDetails}
           onChange={toggleAccordion}
           classes={{
             root: `expansion-panel-root ${
diff --git a/src/models/chart.model.ts b/src/models/chart.model.ts
index b9cfb1b972fd0ad896f397eff1a9c5cd738072ec..b0e24c8de78daa13a4f5c917ecb356f52fd8f64e 100644
--- a/src/models/chart.model.ts
+++ b/src/models/chart.model.ts
@@ -10,4 +10,6 @@ export interface ChartState {
   selectedDate: DateTime
   showCompare: boolean
   showOfflineData: boolean
+  /** For KonnectorViewerCard Accordion */
+  showConnectionDetails: boolean
 }
diff --git a/src/store/chart/chart.slice.spec.ts b/src/store/chart/chart.slice.spec.ts
index 0ab8ecdd791f95139561c2bf02102ed9e935b951..02f68b6399afa66dbb82ff070c10dc8d082dbdb1 100644
--- a/src/store/chart/chart.slice.spec.ts
+++ b/src/store/chart/chart.slice.spec.ts
@@ -10,6 +10,7 @@ import {
   setCurrentTimeStep,
   setSelectedDate,
   setShowCompare,
+  setShowConnectionDetails,
 } from './chart.slice'
 
 describe('chart reducer', () => {
@@ -108,4 +109,17 @@ describe('chart reducer', () => {
       })
     })
   })
+
+  describe('setShowConnectionDetails', () => {
+    it('should handle setShowConnectionDetails', () => {
+      const state = chartSlice.reducer(
+        mockChartState,
+        setShowConnectionDetails(true)
+      )
+      expect(state).toEqual({
+        ...mockChartState,
+        showConnectionDetails: true,
+      })
+    })
+  })
 })
diff --git a/src/store/chart/chart.slice.ts b/src/store/chart/chart.slice.ts
index 92bec2bdd71d70128f1633f417f700ed28d2234f..558e752a338575e15d2b4fa6896f8845330f975f 100644
--- a/src/store/chart/chart.slice.ts
+++ b/src/store/chart/chart.slice.ts
@@ -13,6 +13,7 @@ const initialState: ChartState = {
   currentDatachartIndex: 0,
   showCompare: false,
   showOfflineData: false,
+  showConnectionDetails: false,
 }
 
 export const chartSlice = createSlice({
@@ -43,6 +44,9 @@ export const chartSlice = createSlice({
     setShowOfflineData: (state, action: PayloadAction<boolean>) => {
       state.showOfflineData = action.payload
     },
+    setShowConnectionDetails: (state, action: PayloadAction<boolean>) => {
+      state.showConnectionDetails = action.payload
+    },
   },
 })
 
@@ -54,4 +58,5 @@ export const {
   setSelectedDate,
   setShowCompare,
   setShowOfflineData,
+  setShowConnectionDetails,
 } = chartSlice.actions
diff --git a/tests/__mocks__/store/chart.state.mock.ts b/tests/__mocks__/store/chart.state.mock.ts
index 337d9d464df5daea182406cef6a19bb5354a4614..76b75c5991de8c41b1cd7d7fe1070b8260f617aa 100644
--- a/tests/__mocks__/store/chart.state.mock.ts
+++ b/tests/__mocks__/store/chart.state.mock.ts
@@ -12,4 +12,5 @@ export const mockChartState: ChartState = {
   currentDatachartIndex: 0,
   showCompare: false,
   showOfflineData: false,
+  showConnectionDetails: false,
 }