diff --git a/src/component/1d/jCouplingGraph/JGraph.tsx b/src/component/1d/jCouplingGraph/JGraph.tsx
index 7efdda1f7..33924ce46 100644
--- a/src/component/1d/jCouplingGraph/JGraph.tsx
+++ b/src/component/1d/jCouplingGraph/JGraph.tsx
@@ -7,9 +7,9 @@ import generateJGraphData, {
 import { Signal1D } from '../../../data/types/data1d';
 import { Datum1D } from '../../../data/types/data1d/Datum1D';
 import { useChartData } from '../../context/ChartContext';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
-import { rangeStateInit } from '../../reducer/Reducer';
 
 import { JGraphContextProvider } from './JGraphContext';
 import { JGraphVerticalAxis } from './JGraphVerticalAxis';
@@ -40,14 +40,11 @@ export default function JGraph() {
   const {
     height,
     view: {
-      ranges: rangeState,
       spectra: { activeTab },
     },
   } = useChartData();
   const spectrum = useSpectrum() as Datum1D;
-
-  const { showJGraph } =
-    rangeState.find((r) => r.spectrumID === spectrum?.id) || rangeStateInit;
+  const { ranges: rangesView } = useActiveSpectrum1DViewState();
 
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
@@ -79,7 +76,7 @@ export default function JGraph() {
     return { scaleY, height: graphHeight, maxValue };
   }, [graphHeight, scaleY, maxValue]);
 
-  if (!showJGraph || !spectrum?.display?.isVisible) return null;
+  if (!rangesView?.showJGraph || !spectrum?.display?.isVisible) return null;
 
   return (
     <JGraphContextProvider value={JGraphState}>
diff --git a/src/component/1d/peaks/PeakAnnotations.tsx b/src/component/1d/peaks/PeakAnnotations.tsx
index 96e643222..a67b6094b 100644
--- a/src/component/1d/peaks/PeakAnnotations.tsx
+++ b/src/component/1d/peaks/PeakAnnotations.tsx
@@ -4,7 +4,7 @@ import { Datum1D } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
 import { useScaleChecked } from '../../context/ScaleContext';
 import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
 
 import PeakAnnotation from './PeakAnnotation';
@@ -16,13 +16,13 @@ function PeakAnnotations() {
   const activeSpectrum = useActiveSpectrum();
   const { scaleX, scaleY, shiftY } = useScaleChecked();
   const spectrum = useSpectrum(emptyData) as Datum1D;
-  const peaksViewState = useActiveSpectrumPeaksViewState();
+  const { peaks: PeaksViewState } = useActiveSpectrum1DViewState();
 
   const Peaks = useMemo(() => {
     if (
       !spectrum?.peaks?.values ||
       !spectrum.display.isVisible ||
-      !peaksViewState.isPeaksVisible
+      !PeaksViewState.isPeaksVisible
     ) {
       return null;
     }
@@ -48,7 +48,7 @@ function PeakAnnotations() {
     spectrum.display.isVisible,
     spectrum.id,
     spectrum.info.nucleus,
-    peaksViewState.isPeaksVisible,
+    PeaksViewState.isPeaksVisible,
     activeSpectrum?.index,
     shiftY,
     scaleX,
diff --git a/src/component/1d/peaks/PeaksShapes.tsx b/src/component/1d/peaks/PeaksShapes.tsx
index 46789c711..7f61e7082 100644
--- a/src/component/1d/peaks/PeaksShapes.tsx
+++ b/src/component/1d/peaks/PeaksShapes.tsx
@@ -2,7 +2,7 @@ import { Datum1D } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
 import { useScale } from '../../context/ScaleContext';
 import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
 
 import { usePeakShapesPath } from './usePeakShapesPath';
@@ -12,7 +12,9 @@ const emptyData = { peaks: {}, display: {} };
 function PeaksShapes() {
   const { displayerKey } = useChartData();
   const { shiftY } = useScale();
-  const { showPeaksShapes, showPeaksSum } = useActiveSpectrumPeaksViewState();
+  const {
+    peaks: { showPeaksShapes, showPeaksSum },
+  } = useActiveSpectrum1DViewState();
   const activeSpectrum = useActiveSpectrum();
   const spectrum = useSpectrum(emptyData) as Datum1D;
 
diff --git a/src/component/1d/ranges/Ranges.tsx b/src/component/1d/ranges/Ranges.tsx
index 54bf98b14..abc6edac0 100644
--- a/src/component/1d/ranges/Ranges.tsx
+++ b/src/component/1d/ranges/Ranges.tsx
@@ -1,11 +1,10 @@
-import { Fragment, memo, useMemo } from 'react';
+import { Fragment, memo } from 'react';
 
 import { Datum1D, Ranges as RangesProps } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
-import { rangeStateInit } from '../../reducer/Reducer';
 
 import Range from './Range';
 import RangeIntegral from './RangeIntegral';
@@ -50,20 +49,13 @@ export default function Ranges() {
   const {
     displayerKey,
     view: {
-      ranges: rangeState,
       spectra: { activeTab },
     },
     toolOptions: { selectedTool },
   } = useChartData();
-  const activeSpectrum = useActiveSpectrum();
-  const { showMultiplicityTrees, showRangesIntegrals } = useMemo(
-    () =>
-      activeSpectrum
-        ? rangeState.find((r) => r.spectrumID === activeSpectrum.id) ||
-          rangeStateInit
-        : rangeStateInit,
-    [activeSpectrum, rangeState],
-  );
+  const {
+    ranges: { showMultiplicityTrees, showRangesIntegrals },
+  } = useActiveSpectrum1DViewState();
   const spectrum = useSpectrum() as Datum1D;
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
diff --git a/src/component/2d/ft/Contours.tsx b/src/component/2d/ft/Contours.tsx
index 0f35cba09..d3a4a4d9f 100644
--- a/src/component/2d/ft/Contours.tsx
+++ b/src/component/2d/ft/Contours.tsx
@@ -74,16 +74,14 @@ function usePath(datum: Datum2D, contours) {
 
 const useContoursLevel = (datum: Datum2D, sign: LevelSign) => {
   const {
-    view: {
-      zoom: { levels },
-    },
+    view: { spectra2D },
   } = useChartData();
   const {
     id,
     display: { contourOptions },
   } = datum;
   const defaultLevel = getDefaultContoursLevel(contourOptions);
-  const level = levels?.[id]?.[sign];
+  const level = spectra2D[id]?.contoursLevel?.[sign];
   return typeof level !== 'number' ? defaultLevel[sign] : level;
 };
 
diff --git a/src/component/2d/zones/Signal.tsx b/src/component/2d/zones/Signal.tsx
index a2e8fedaf..8b2590827 100644
--- a/src/component/2d/zones/Signal.tsx
+++ b/src/component/2d/zones/Signal.tsx
@@ -7,20 +7,17 @@ import { buildID } from '../../../data/utilities/Concatenation';
 import { useAssignment } from '../../assignment/AssignmentsContext';
 import { useChartData } from '../../context/ChartContext';
 import { useHighlightData, useHighlight } from '../../highlight';
+import { ZonesViewState } from '../../reducer/Reducer';
 import { get2DXScale, get2DYScale } from '../utilities/scale';
 
 import SignalCrosshair from './SignalCrosshair';
 
 interface SignalProps {
   signal: Signal2D;
-  isVisible: {
-    signals?: boolean;
-    peaks?: boolean;
-    zones?: boolean;
-  };
+  zonesViewState: ZonesViewState;
 }
 
-function Signal({ signal, isVisible }: SignalProps) {
+function Signal({ signal, zonesViewState }: SignalProps) {
   const { margin, width, height, xDomain, yDomain } = useChartData();
   const scaleX = get2DXScale({ margin, width, xDomain });
   const scaleY = get2DYScale({ margin, height, yDomain });
@@ -57,7 +54,7 @@ function Signal({ signal, isVisible }: SignalProps) {
 
   return (
     <g className="zone-signal">
-      {isVisible.signals && (
+      {zonesViewState.showSignals && (
         <g>
           <SignalCrosshair signal={signal} />
           <circle
@@ -78,7 +75,7 @@ function Signal({ signal, isVisible }: SignalProps) {
         </g>
       )}
       <g className="zone-signal-peak" style={{ pointerEvents: 'none' }}>
-        {isVisible.peaks &&
+        {zonesViewState.showPeaks &&
           signal.peaks &&
           signal.peaks.map((peak, i) => (
             <circle
diff --git a/src/component/2d/zones/Zone.tsx b/src/component/2d/zones/Zone.tsx
index 517345fe6..7bfbc6c8c 100644
--- a/src/component/2d/zones/Zone.tsx
+++ b/src/component/2d/zones/Zone.tsx
@@ -7,6 +7,7 @@ import { checkZoneKind } from '../../../data/utilities/ZoneUtilities';
 import { useAssignment } from '../../assignment/AssignmentsContext';
 import { useChartData } from '../../context/ChartContext';
 import { HighlightEventSource, useHighlight } from '../../highlight';
+import { ZonesViewState } from '../../reducer/Reducer';
 import { get2DXScale, get2DYScale } from '../utilities/scale';
 
 import Signal from './Signal';
@@ -44,12 +45,10 @@ const stylesHighlighted = css`
 
 interface ZoneProps {
   zoneData: ZoneDataProps;
-  isVisible: {
-    zones: boolean;
-  };
+  zonesViewState: ZonesViewState;
 }
 
-function Zone({ zoneData, isVisible }: ZoneProps) {
+function Zone({ zoneData, zonesViewState }: ZoneProps) {
   const { x, y, id, signals } = zoneData;
   const assignmentZone = useAssignment(id);
   const highlightZone = useHighlight([assignmentZone.id], {
@@ -86,7 +85,7 @@ function Zone({ zoneData, isVisible }: ZoneProps) {
         highlightZone.hide();
       }}
     >
-      {isVisible.zones && (
+      {zonesViewState.showZones && (
         <g transform={`translate(${scaleX(x2)},${scaleY(y1)})`}>
           <rect
             x="0"
@@ -100,7 +99,11 @@ function Zone({ zoneData, isVisible }: ZoneProps) {
         </g>
       )}
       {signals.map((_signal, i) => (
-        <Signal key={`${id + i}`} signal={_signal} isVisible={isVisible} />
+        <Signal
+          key={`${id + i}`}
+          signal={_signal}
+          zonesViewState={zonesViewState}
+        />
       ))}
     </g>
   );
diff --git a/src/component/2d/zones/Zones.tsx b/src/component/2d/zones/Zones.tsx
index 84d79176c..40563a5ac 100644
--- a/src/component/2d/zones/Zones.tsx
+++ b/src/component/2d/zones/Zones.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 import {
   Datum2D,
@@ -6,34 +6,30 @@ import {
   Zones as ZonesProps,
 } from '../../../data/types/data2d';
 import { useChartData } from '../../context/ChartContext';
+import { useActiveSpectrum2DViewState } from '../../hooks/useActiveSpectrum2DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
-import { zoneStateInit } from '../../reducer/Reducer';
-
+import { ZonesViewState } from '../../reducer/Reducer';
 import Zone from './Zone';
 
 interface ZonesInnerProps {
   zones: ZonesProps;
   display: Display2D;
   displayerKey: string;
-  isVisible: {
-    zones: boolean;
-    signals: boolean;
-    peaks: boolean;
-  };
+  zonesViewState: ZonesViewState;
 }
 
 function ZonesInner({
   zones,
   display,
   displayerKey,
-  isVisible,
+  zonesViewState,
 }: ZonesInnerProps) {
   return (
     <g clipPath={`url(#${displayerKey}clip-chart-2d)`} className="2D-Zones">
       {display.isVisible &&
         zones.values.map((zone) => (
           <g className="zone" key={zone.id}>
-            <Zone zoneData={zone} isVisible={isVisible} />
+            <Zone zoneData={zone} zonesViewState={zonesViewState} />
           </g>
         ))}
     </g>
@@ -45,22 +41,12 @@ const MemoizedZones = memo(ZonesInner);
 const emptyData = { zones: {}, display: {} };
 
 export default function Zones() {
-  const {
-    displayerKey,
-    view: { zones: zoneState },
-  } = useChartData();
-
-  const { zones, display, id } = useSpectrum(emptyData) as Datum2D;
+  const { displayerKey } = useChartData();
 
-  const isVisible = useMemo(() => {
-    const { showPeaks, showSignals, showZones } =
-      zoneState.find((r) => r.spectrumID === id) || zoneStateInit;
-    return {
-      zones: showZones,
-      signals: showSignals,
-      peaks: showPeaks,
-    };
-  }, [id, zoneState]);
+  const { zones, display } = useSpectrum(emptyData) as Datum2D;
+  const { zones: zonesViewState } = useActiveSpectrum2DViewState();
 
-  return <MemoizedZones {...{ zones, display, displayerKey, isVisible }} />;
+  return (
+    <MemoizedZones {...{ zones, display, displayerKey, zonesViewState }} />
+  );
 }
diff --git a/src/component/hooks/useActiveSpectrum1DViewState.ts b/src/component/hooks/useActiveSpectrum1DViewState.ts
new file mode 100644
index 000000000..3d1552a91
--- /dev/null
+++ b/src/component/hooks/useActiveSpectrum1DViewState.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { useChartData } from '../context/ChartContext';
+import {
+  ViewSpectra1D,
+  getDefaultSpectra1DViewState,
+} from '../reducer/Reducer';
+
+import { useActiveSpectrum } from './useActiveSpectrum';
+
+export function useActiveSpectrum1DViewState(): ViewSpectra1D {
+  const activeSpectrum = useActiveSpectrum();
+  const {
+    view: { spectra1D },
+  } = useChartData();
+  return useMemo(() => {
+    if (activeSpectrum?.id && spectra1D?.[activeSpectrum.id]) {
+      return spectra1D[activeSpectrum.id];
+    } else {
+      return getDefaultSpectra1DViewState();
+    }
+  }, [activeSpectrum?.id, spectra1D]);
+}
diff --git a/src/component/hooks/useActiveSpectrum2DViewState.ts b/src/component/hooks/useActiveSpectrum2DViewState.ts
new file mode 100644
index 000000000..94af083cd
--- /dev/null
+++ b/src/component/hooks/useActiveSpectrum2DViewState.ts
@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import { useChartData } from '../context/ChartContext';
+import {
+  getDefaultSpectra2DViewState,
+  ViewSpectra2D,
+} from '../reducer/Reducer';
+
+import { useActiveSpectrum } from './useActiveSpectrum';
+
+export function useActiveSpectrum2DViewState(): ViewSpectra2D {
+  const activeSpectrum = useActiveSpectrum();
+  const {
+    view: { spectra2D },
+  } = useChartData();
+
+  return useMemo(() => {
+    if (activeSpectrum?.id && spectra2D?.[activeSpectrum.id]) {
+      return spectra2D[activeSpectrum.id];
+    } else {
+      return getDefaultSpectra2DViewState();
+    }
+  }, [activeSpectrum?.id, spectra2D]);
+}
diff --git a/src/component/hooks/useActiveSpectrumPeaksViewState.ts b/src/component/hooks/useActiveSpectrumPeaksViewState.ts
deleted file mode 100644
index 31a35509a..000000000
--- a/src/component/hooks/useActiveSpectrumPeaksViewState.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { PeaksViewState } from '../../data/types/view-state/PeaksViewState';
-import { useChartData } from '../context/ChartContext';
-
-import { useActiveSpectrum } from './useActiveSpectrum';
-
-export const defaultPeaksViewState: PeaksViewState = {
-  isPeaksVisible: true,
-  showPeaksShapes: false,
-  showPeaksSum: false,
-};
-
-export function useActiveSpectrumPeaksViewState() {
-  const activeSpectrum = useActiveSpectrum();
-  const {
-    view: { peaks },
-  } = useChartData();
-
-  if (activeSpectrum?.id && peaks[activeSpectrum?.id]) {
-    return peaks[activeSpectrum?.id];
-  } else {
-    return defaultPeaksViewState;
-  }
-}
diff --git a/src/component/panels/PeaksPanel/PeaksPanel.tsx b/src/component/panels/PeaksPanel/PeaksPanel.tsx
index 0fb04e002..d67804f9a 100644
--- a/src/component/panels/PeaksPanel/PeaksPanel.tsx
+++ b/src/component/panels/PeaksPanel/PeaksPanel.tsx
@@ -15,10 +15,7 @@ import ActiveButton from '../../elements/ActiveButton';
 import Button from '../../elements/Button';
 import { useAlert } from '../../elements/popup/Alert';
 import { useModal } from '../../elements/popup/Modal';
-import {
-  defaultPeaksViewState,
-  useActiveSpectrumPeaksViewState,
-} from '../../hooks/useActiveSpectrumPeaksViewState';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import useCheckExperimentalFeature from '../../hooks/useCheckExperimentalFeature';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
 import useSpectrum from '../../hooks/useSpectrum';
@@ -127,7 +124,7 @@ function PeaksPanelInner({
     }
   };
 
-  function toggleViewProperty(key: keyof typeof defaultPeaksViewState) {
+  function toggleViewProperty(key: keyof PeaksViewState) {
     dispatch({ type: TOGGLE_PEAKS_VIEW_PROPERTY, payload: { key } });
   }
 
@@ -244,7 +241,7 @@ export default function PeaksPanel() {
   } = useChartData();
   const { peaks, info } = useSpectrum(emptyData) as Datum1D;
   const preferences = usePreferences();
-  const peaksViewState = useActiveSpectrumPeaksViewState();
+  const { peaks: peaksViewState } = useActiveSpectrum1DViewState();
 
   return (
     <MemoizedPeaksPanel
diff --git a/src/component/panels/RangesPanel/RangesHeader.tsx b/src/component/panels/RangesPanel/RangesHeader.tsx
index 46a050056..d957c6720 100644
--- a/src/component/panels/RangesPanel/RangesHeader.tsx
+++ b/src/component/panels/RangesPanel/RangesHeader.tsx
@@ -23,14 +23,13 @@ import { useModal } from '../../elements/popup/Modal';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import CopyClipboardModal from '../../modal/CopyClipboardModal';
 import ChangeSumModal from '../../modal/changeSum/ChangeSumModal';
+import { RangesViewState } from '../../reducer/Reducer';
 import {
   ADD_RANGE,
   CHANGE_RANGES_SUM_FLAG,
   CHANGE_RANGE_SUM,
   DELETE_RANGE,
-  SHOW_J_GRAPH,
-  SHOW_MULTIPLICITY_TREES,
-  SHOW_RANGES_INTEGRALS,
+  TOGGLE_RANGES_VIEW_PROPERTY,
 } from '../../reducer/types/Types';
 import { copyHTMLToClipboard } from '../../utility/export';
 import { getNumberOfDecimals } from '../../utility/formatNumber';
@@ -58,7 +57,6 @@ const style = css`
 `;
 
 function RangesHeader({
-  id,
   ranges,
   info,
   onUnlink,
@@ -131,17 +129,19 @@ function RangesHeader({
     });
   }, [assignmentData, dispatch, modal]);
 
-  const handleSetShowMultiplicityTrees = useCallback(() => {
-    dispatch({ type: SHOW_MULTIPLICITY_TREES, payload: { id } });
-  }, [dispatch, id]);
-
-  const handleShowIntegrals = useCallback(() => {
-    dispatch({ type: SHOW_RANGES_INTEGRALS, payload: { id } });
-  }, [dispatch, id]);
+  function toggleViewProperty(key: keyof RangesViewState) {
+    dispatch({ type: TOGGLE_RANGES_VIEW_PROPERTY, payload: { key } });
+  }
 
-  const handleShowJGraph = useCallback(() => {
-    dispatch({ type: SHOW_J_GRAPH, payload: { id } });
-  }, [dispatch, id]);
+  function handleSetShowMultiplicityTrees() {
+    toggleViewProperty('showMultiplicityTrees');
+  }
+  function handleShowIntegrals() {
+    toggleViewProperty('showRangesIntegrals');
+  }
+  function handleShowJGraph() {
+    toggleViewProperty('showJGraph');
+  }
 
   const saveToClipboardHandler = useCallback(
     (value) => {
diff --git a/src/component/panels/RangesPanel/RangesPanel.tsx b/src/component/panels/RangesPanel/RangesPanel.tsx
index ac828f0cf..b54d4f951 100644
--- a/src/component/panels/RangesPanel/RangesPanel.tsx
+++ b/src/component/panels/RangesPanel/RangesPanel.tsx
@@ -9,9 +9,9 @@ import { useAssignmentData } from '../../assignment/AssignmentsContext';
 import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
 import { useAlert } from '../../elements/popup/Alert';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
-import { rangeStateInit } from '../../reducer/Reducer';
 import { UNLINK_RANGE } from '../../reducer/types/Types';
 import { copyTextToClipboard } from '../../utility/export';
 import { WorkSpacePanelPreferences } from '../../workspaces/Workspace';
@@ -24,7 +24,6 @@ import RangesPreferences from './RangesPreferences';
 import RangesTable from './RangesTable';
 
 interface RangesTablePanelInnerProps {
-  id: string;
   ranges: Ranges;
   data: Data1D;
   info: Info1D;
@@ -38,7 +37,6 @@ interface RangesTablePanelInnerProps {
 }
 
 function RangesTablePanelInner({
-  id,
   ranges,
   data,
   info,
@@ -172,7 +170,6 @@ function RangesTablePanelInner({
       {!isFlipped && (
         <RangesHeader
           {...{
-            id,
             ranges,
             info,
             activeTab,
@@ -223,7 +220,7 @@ const MemoizedRangesTablePanel = memo(RangesTablePanelInner);
 const emptyData = { ranges: {}, data: {}, info: {} };
 
 export default function RangesTablePanel() {
-  const { ranges, data, info, id } = useSpectrum(emptyData) as Datum1D;
+  const { ranges, data, info } = useSpectrum(emptyData) as Datum1D;
   const {
     displayerKey,
     xDomain,
@@ -232,19 +229,16 @@ export default function RangesTablePanel() {
     },
     molecules,
     toolOptions: { selectedTool },
-    view: { ranges: rangeState },
   } = useChartData();
-  const { showMultiplicityTrees, showRangesIntegrals, showJGraph } = useMemo(
-    () => rangeState.find((r) => r.spectrumID === id) || rangeStateInit,
-    [id, rangeState],
-  );
 
+  const {
+    ranges: { showMultiplicityTrees, showRangesIntegrals, showJGraph },
+  } = useActiveSpectrum1DViewState();
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
   return (
     <MemoizedRangesTablePanel
       {...{
-        id,
         ranges,
         data,
         info,
diff --git a/src/component/panels/ZonesPanel/ZonesPanel.tsx b/src/component/panels/ZonesPanel/ZonesPanel.tsx
index 7929b599b..cb8ae1e14 100644
--- a/src/component/panels/ZonesPanel/ZonesPanel.tsx
+++ b/src/component/panels/ZonesPanel/ZonesPanel.tsx
@@ -10,13 +10,12 @@ import { useDispatch } from '../../context/DispatchContext';
 import ActiveButton from '../../elements/ActiveButton';
 import ToolTip from '../../elements/ToolTip/ToolTip';
 import { useModal } from '../../elements/popup/Modal';
+import { useActiveSpectrum2DViewState } from '../../hooks/useActiveSpectrum2DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
-import { zoneStateInit } from '../../reducer/Reducer';
+import { ZonesViewState } from '../../reducer/Reducer';
 import {
   DELETE_2D_ZONE,
-  SHOW_ZONES,
-  SHOW_ZONES_PEAKS,
-  SHOW_ZONES_SIGNALS,
+  TOGGLE_ZONES_VIEW_PROPERTY,
   UNLINK_ZONE,
 } from '../../reducer/types/Types';
 import { tablePanelStyle } from '../extra/BasicPanelStyle';
@@ -59,7 +58,6 @@ function ZonesPanelInner({
   showZones,
   showSignals,
   showPeaks,
-  id,
 }) {
   const [filterIsActive, setFilterIsActive] = useState(false);
 
@@ -171,14 +169,18 @@ function ZonesPanelInner({
     setFlipStatus(false);
   }, []);
 
+  function toggleViewProperty(key: keyof ZonesViewState) {
+    dispatch({ type: TOGGLE_ZONES_VIEW_PROPERTY, payload: { key } });
+  }
+
   const handleSetShowZones = () => {
-    dispatch({ type: SHOW_ZONES, payload: { id } });
+    toggleViewProperty('showZones');
   };
   const handleSetShowSignals = () => {
-    dispatch({ type: SHOW_ZONES_SIGNALS, payload: { id } });
+    toggleViewProperty('showSignals');
   };
   const handleSetShowPeaks = () => {
-    dispatch({ type: SHOW_ZONES_PEAKS, payload: { id } });
+    toggleViewProperty('showPeaks');
   };
 
   return (
@@ -286,23 +288,21 @@ export default function ZonesPanel() {
     xDomain,
     yDomain,
     view: {
-      zones: zoneState,
       spectra: { activeTab },
     },
   } = useChartData();
-  const { zones, info, id } = useSpectrum(emptyData) as Datum2D;
-  const zoneProps = zoneState.find((r) => r.spectrumID === id) || zoneStateInit;
+  const { zones, info } = useSpectrum(emptyData) as Datum2D;
+  const { zones: zonesViewState } = useActiveSpectrum2DViewState();
   return (
     <MemoizedZonesPanel
       {...{
-        id,
         xDomain,
         yDomain,
         activeTab,
         displayerKey,
         zones,
         experiment: info.experiment,
-        ...zoneProps,
+        ...zonesViewState,
       }}
     />
   );
diff --git a/src/component/reducer/IgnoreActions.ts b/src/component/reducer/IgnoreActions.ts
index 36a86ddd5..22dbbd28d 100644
--- a/src/component/reducer/IgnoreActions.ts
+++ b/src/component/reducer/IgnoreActions.ts
@@ -28,9 +28,6 @@ const ignoreActions = new Set([
   types.CHANGE_ACTIVE_SPECTRUM,
   types.CHANGE_SPECTRUM_COLOR,
   types.SET_MOUSE_OVER_DISPLAYER,
-  types.SHOW_J_GRAPH,
-  types.SHOW_MULTIPLICITY_TREES,
-  types.SHOW_RANGES_INTEGRALS,
   types.CHANGE_FLOAT_MOLECULE_POSITION,
 ]);
 
diff --git a/src/component/reducer/Reducer.ts b/src/component/reducer/Reducer.ts
index 5099409fb..2b6e8e539 100644
--- a/src/component/reducer/Reducer.ts
+++ b/src/component/reducer/Reducer.ts
@@ -5,7 +5,7 @@ import { Source } from 'nmr-load-save';
 
 import { predictSpectra } from '../../data/PredictionManager';
 import { ApodizationOptions } from '../../data/data1d/filter1d/apodization';
-import { ContoursLevels } from '../../data/data2d/Spectrum2D/contours';
+import { ContoursLevel } from '../../data/data2d/Spectrum2D/contours';
 import {
   MoleculesView,
   StateMoleculeExtended,
@@ -51,10 +51,7 @@ export interface ActiveSpectrum {
   id: string;
   index: number;
 }
-interface ToolStateBase {
-  spectrumID: string;
-}
-interface RangeToolState extends ToolStateBase {
+export interface RangesViewState {
   /**
    * boolean indicator to hide/show multiplicity tree
    * @default false
@@ -71,15 +68,15 @@ interface RangeToolState extends ToolStateBase {
    */
   showRangesIntegrals: boolean;
 }
-interface ZoneToolState extends ToolStateBase {
+export interface ZonesViewState {
   /**
    * boolean indicator to hide/show zones
-   * @default false
+   * @default true
    */
   showZones: boolean;
   /**
    * boolean indicator to hide/show signals for spectrum zones
-   * @default false
+   * @default true
    */
   showSignals: boolean;
   /**
@@ -89,19 +86,66 @@ interface ZoneToolState extends ToolStateBase {
   showPeaks: boolean;
 }
 
+export const defaultPeaksViewState: PeaksViewState = {
+  isPeaksVisible: true,
+  showPeaksShapes: false,
+  showPeaksSum: false,
+};
+export const defaultRangesViewState: RangesViewState = {
+  showMultiplicityTrees: false,
+  showJGraph: false,
+  showRangesIntegrals: true,
+};
+
+export const getDefaultSpectra1DViewState = (): ViewSpectra1D => ({
+  peaks: {
+    isPeaksVisible: true,
+    showPeaksShapes: false,
+    showPeaksSum: false,
+  },
+  ranges: {
+    showMultiplicityTrees: false,
+    showJGraph: false,
+    showRangesIntegrals: true,
+  },
+});
+export const getDefaultSpectra2DViewState = (): ViewSpectra2D => ({
+  zones: {
+    showZones: true,
+    showSignals: true,
+    showPeaks: true,
+  },
+  contoursLevel: { negative: 10, positive: 10 },
+});
+
+export interface ViewNuclei {
+  activeSpectra: ActiveSpectrum[] | null;
+  selectReferences: string;
+}
+
+export interface ViewNuclei1D extends ViewNuclei {
+  verticalAlign: VerticalAlignment;
+}
+export interface ViewNuclei2D extends ViewNuclei {}
+export interface ViewSpectra1D {
+  ranges: RangesViewState;
+  peaks: PeaksViewState;
+}
+export interface ViewSpectra2D {
+  zones: ZonesViewState;
+  contoursLevel: ContoursLevel;
+}
 export interface ViewState {
+  nuclei1D: Partial<Record<Nuclei, ViewNuclei1D>>;
+  nuclei2D: Partial<Record<`${Nuclei},${Nuclei}`, ViewNuclei2D>>;
+  spectra1D: Record<string, ViewSpectra1D>;
+  spectra2D: Record<string, ViewSpectra2D>;
+
   /**
    *  Molecules view properties
    * @default []
    */
   molecules: MoleculesView;
-  ranges: Array<RangeToolState>;
-  zones: Array<ZoneToolState>;
-  /**
-   * peaks view property
-   * where the key is the id of the spectrum
-   */
-  peaks: Record<string, PeaksViewState>;
   spectra: {
     /**
      * active spectrum id per nucleus
@@ -121,20 +165,13 @@ export interface ViewState {
      */
     showLegend: boolean;
   };
-  zoom: {
-    levels: ContoursLevels;
-  };
   /**
    * options to control spectra vertical alignment
    * @default  'bottom'
    */
   verticalAlign: Partial<Record<Nuclei, VerticalAlignment>>;
 }
-export const rangeStateInit = {
-  showMultiplicityTrees: false,
-  showRangesIntegrals: true,
-  showJGraph: false,
-};
+
 export const zoneStateInit = {
   showZones: true,
   showSignals: true,
@@ -149,19 +186,17 @@ export interface Margin {
 
 export function getDefaultViewState(): ViewState {
   return {
+    nuclei1D: {},
+    nuclei2D: {},
+    spectra1D: {},
+    spectra2D: {},
     molecules: {},
-    ranges: [],
-    zones: [],
-    peaks: {},
     spectra: {
       activeSpectra: {},
       activeTab: '',
       showLegend: false,
       selectReferences: {},
     },
-    zoom: {
-      levels: {},
-    },
     verticalAlign: {},
   };
 }
@@ -715,15 +750,10 @@ function innerSpectrumReducer(draft: Draft<State>, action) {
       return RangesActions.handleSetDiaIDRange(draft, action);
     case types.UPDATE_RANGE:
       return RangesActions.handleUpdateRange(draft, action);
-    case types.SHOW_MULTIPLICITY_TREES:
-      return RangesActions.handleShowMultiplicityTrees(draft, action);
-    case types.SHOW_RANGES_INTEGRALS:
-      return RangesActions.handleShowRangesIntegrals(draft, action);
+    case types.TOGGLE_RANGES_VIEW_PROPERTY:
+      return RangesActions.handleToggleRangesViewProperty(draft, action);
     case types.AUTO_RANGES_SPECTRA_PICKING:
       return RangesActions.handleAutoSpectraRangesDetection(draft);
-    case types.SHOW_J_GRAPH:
-      return RangesActions.handleShowJGraph(draft, action);
-
     case types.SET_ACTIVE_TAB:
       return ToolsActions.handelSetActiveTab(draft, action.tab);
     case types.ADD_BASE_LINE_ZONE:
@@ -757,12 +787,8 @@ function innerSpectrumReducer(draft: Draft<State>, action) {
       return ZonesActions.handleSetDiaIDZone(draft, action);
     case types.AUTO_ZONES_SPECTRA_PICKING:
       return ZonesActions.handleAutoSpectraZonesDetection(draft);
-    case types.SHOW_ZONES:
-      return ZonesActions.handleShowZones(draft, action);
-    case types.SHOW_ZONES_SIGNALS:
-      return ZonesActions.handleShowSignals(draft, action);
-    case types.SHOW_ZONES_PEAKS:
-      return ZonesActions.handleShowPeaks(draft, action);
+    case types.TOGGLE_ZONES_VIEW_PROPERTY:
+      return ZonesActions.handleToggleZonesViewProperty(draft, action);
     case types.SAVE_EDITED_ZONE:
       return ZonesActions.handleSaveEditedZone(draft, action);
 
diff --git a/src/component/reducer/actions/PeaksActions.ts b/src/component/reducer/actions/PeaksActions.ts
index 73c6c2492..e45f035d6 100644
--- a/src/component/reducer/actions/PeaksActions.ts
+++ b/src/component/reducer/actions/PeaksActions.ts
@@ -1,5 +1,6 @@
 import { v4 } from '@lukeed/uuid';
 import { Draft, original } from 'immer';
+import lodashMerge from 'lodash/merge';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 
 import {
@@ -11,9 +12,9 @@ import {
 import { Datum1D } from '../../../data/types/data1d';
 import { Data1D } from '../../../data/types/data1d/Data1D';
 import { Peak } from '../../../data/types/data1d/Peak';
-import { defaultPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
+import { PeaksViewState } from '../../../data/types/view-state/PeaksViewState';
 import { options } from '../../toolbar/ToolTypes';
-import { State } from '../Reducer';
+import { getDefaultSpectra1DViewState, State } from '../Reducer';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 import getRange from '../helper/getRange';
 
@@ -162,18 +163,22 @@ function handleTogglePeaksViewProperty(draft: Draft<State>, action) {
 
 function togglePeaksViewProperty(
   draft: Draft<State>,
-  key: keyof typeof defaultPeaksViewState,
+  key: keyof PeaksViewState,
 ) {
   const activeSpectrum = getActiveSpectrum(draft);
 
   if (activeSpectrum?.id) {
-    const peaksView = draft.view.peaks;
-    if (peaksView[activeSpectrum.id]) {
-      peaksView[activeSpectrum.id][key] = !peaksView[activeSpectrum.id][key];
+    const peaksView = draft.view.spectra1D?.[activeSpectrum.id]?.peaks;
+    if (peaksView) {
+      peaksView[key] = !peaksView[key];
     } else {
-      const defaultPeaksView = { ...defaultPeaksViewState };
-      defaultPeaksView[key] = !defaultPeaksView[key];
-      peaksView[activeSpectrum.id] = defaultPeaksView;
+      const defaultViewState = getDefaultSpectra1DViewState();
+      draft.view.spectra1D[activeSpectrum.id] = lodashMerge(
+        defaultViewState,
+        draft.view.spectra1D[activeSpectrum.id],
+      );
+      draft.view.spectra1D[activeSpectrum.id].peaks[key] =
+        !draft.view.spectra1D[activeSpectrum.id].peaks[key];
     }
   }
 }
diff --git a/src/component/reducer/actions/RangesActions.ts b/src/component/reducer/actions/RangesActions.ts
index c5661aaa6..96cae400c 100644
--- a/src/component/reducer/actions/RangesActions.ts
+++ b/src/component/reducer/actions/RangesActions.ts
@@ -1,6 +1,7 @@
 import { v4 } from '@lukeed/uuid';
 import { Draft, original } from 'immer';
 import cloneDeep from 'lodash/cloneDeep';
+import lodashMerge from 'lodash/merge';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 
 import * as Filters from '../../../data/Filters';
@@ -23,7 +24,11 @@ import {
   unlink,
   unlinkInAssignmentData,
 } from '../../../data/utilities/RangeUtilities';
-import { rangeStateInit, State } from '../Reducer';
+import {
+  RangesViewState,
+  State,
+  getDefaultSpectra1DViewState,
+} from '../Reducer';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 import getRange from '../helper/getRange';
 
@@ -38,25 +43,15 @@ function handleAutoRangesDetection(draft: Draft<State>, options) {
     molecules,
     view: {
       spectra: { activeTab: nucleus },
-      ranges,
     },
   } = draft;
 
   const activeSpectrum = getActiveSpectrum(draft);
 
   if (activeSpectrum?.id) {
-    const { index, id } = activeSpectrum;
+    const { index } = activeSpectrum;
     const datum = data[index] as Datum1D;
 
-    // add range intial state
-    const range = ranges.find((r) => r.spectrumID === id);
-    if (!range) {
-      ranges.push({
-        spectrumID: id,
-        ...rangeStateInit,
-      });
-    }
-
     const [from, to] = xDomain;
     const windowFromIndex = xFindClosestIndex(datum.data.x, from);
     const windowToIndex = xFindClosestIndex(datum.data.x, to);
@@ -332,7 +327,6 @@ function addNewRange(
     data,
     view: {
       spectra: { activeTab: nucleus },
-      ranges,
     },
     molecules,
   } = draft;
@@ -340,14 +334,7 @@ function addNewRange(
   if (activeSpectrum?.id) {
     const { index } = activeSpectrum;
     const [from, to] = range;
-    // add range intial state
-    const rangeState = ranges.find((r) => r.spectrumID === activeSpectrum.id);
-    if (!rangeState) {
-      ranges.push({
-        spectrumID: activeSpectrum.id,
-        ...rangeStateInit,
-      });
-    }
+
     addRange(data[index] as Datum1D, {
       from,
       to,
@@ -432,45 +419,33 @@ function handleUpdateRange(draft: Draft<State>, action) {
   }
 }
 
-function handleShowMultiplicityTrees(draft: Draft<State>, action) {
-  const { id } = action.payload;
-  const range = draft.view.ranges.find((r) => r.spectrumID === id);
-  if (range) {
-    range.showMultiplicityTrees = !range.showMultiplicityTrees;
-  } else {
-    draft.view.ranges.push({
-      spectrumID: id,
-      ...rangeStateInit,
-      showMultiplicityTrees: !rangeStateInit.showMultiplicityTrees,
-    });
-  }
+function handleToggleRangesViewProperty(draft: Draft<State>, action) {
+  const { key } = action.payload;
+  toggleRangesViewProperty(draft, key);
 }
 
-function handleShowRangesIntegrals(draft: Draft<State>, action) {
-  const { id } = action.payload;
-  const range = draft.view.ranges.find((r) => r.spectrumID === id);
-  if (range) {
-    range.showRangesIntegrals = !range.showRangesIntegrals;
-  } else {
-    draft.view.ranges.push({
-      spectrumID: id,
-      ...rangeStateInit,
-      showRangesIntegrals: !rangeStateInit.showRangesIntegrals,
-    });
-  }
-}
+function toggleRangesViewProperty(
+  draft: Draft<State>,
+  key: keyof RangesViewState,
+  value?: boolean,
+) {
+  const activeSpectrum = getActiveSpectrum(draft);
 
-function handleShowJGraph(draft: Draft<State>, action) {
-  const { id } = action.payload;
-  const range = draft.view.ranges.find((r) => r.spectrumID === id);
-  if (range) {
-    range.showJGraph = !range.showJGraph;
-  } else {
-    draft.view.ranges.push({
-      spectrumID: id,
-      ...rangeStateInit,
-      showJGraph: !rangeStateInit.showJGraph,
-    });
+  if (activeSpectrum?.id) {
+    const rangesView = draft.view.spectra1D?.[activeSpectrum.id]?.ranges;
+    if (rangesView) {
+      rangesView[key] = value !== undefined ? value : !rangesView[key];
+    } else {
+      const defaultViewState = getDefaultSpectra1DViewState();
+      draft.view.spectra1D[activeSpectrum.id] = lodashMerge(
+        defaultViewState,
+        draft.view.spectra1D[activeSpectrum.id],
+      );
+      draft.view.spectra1D[activeSpectrum.id].ranges[key] =
+        value !== undefined
+          ? value
+          : !draft.view.spectra1D[activeSpectrum.id].ranges[key];
+    }
   }
 }
 
@@ -489,8 +464,7 @@ export {
   handleSetDiaIDRange,
   handleChangeRangesSumFlag,
   handleUpdateRange,
-  handleShowMultiplicityTrees,
-  handleShowRangesIntegrals,
+  handleToggleRangesViewProperty,
   handleAutoSpectraRangesDetection,
-  handleShowJGraph,
+  toggleRangesViewProperty,
 };
diff --git a/src/component/reducer/actions/SpectrumsActions.ts b/src/component/reducer/actions/SpectrumsActions.ts
index b61118e8e..708b31681 100644
--- a/src/component/reducer/actions/SpectrumsActions.ts
+++ b/src/component/reducer/actions/SpectrumsActions.ts
@@ -1,7 +1,5 @@
 import { Draft, original } from 'immer';
 import lodashGet from 'lodash/get';
-import omitBy from 'lodash/omitBy';
-import lodashSet from 'lodash/set';
 
 import * as Filters from '../../../data/Filters';
 import { applyFilter } from '../../../data/FiltersManager';
@@ -26,10 +24,7 @@ import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
 import { State } from '../Reducer';
 import { setZoom } from '../helper/Zoom1DManager';
 import { getActiveSpectra } from '../helper/getActiveSpectra';
-import {
-  getActiveSpectraAsObject,
-  isActiveSpectrum,
-} from '../helper/getActiveSpectraAsObject';
+import { getActiveSpectraAsObject } from '../helper/getActiveSpectraAsObject';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 
 import { setDomain, setMode } from './DomainActions';
@@ -252,13 +247,13 @@ function changeSpectrumSetting(draft: Draft<State>, { id, display }) {
     const spectrum = draft.data[index];
     spectrum.display = display;
     if (isSpectrum2D(spectrum)) {
-      const contoursLevels = draft.view.zoom.levels;
+      const spectra2D = draft.view.spectra2D;
       const { checkLevel } = contoursManager(
         spectrum.id,
-        contoursLevels,
+        spectra2D,
         spectrum.display.contourOptions,
       );
-      contoursLevels[spectrum.id] = checkLevel();
+      spectra2D[spectrum.id].contoursLevel = checkLevel();
     }
   }
 }
@@ -271,28 +266,17 @@ function handleChangeSpectrumColor(draft: Draft<State>, { id, color, key }) {
   }
 }
 
-function removeActiveSpectra(
-  draft: Draft<State>,
-  relatedTargets: ({ jpath: string; key: string } | { jpath: string })[],
-) {
-  const activeSpectra = getActiveSpectraAsObject(draft);
+function removeViewLinkWithSpectra(draft: Draft<State>, spectraIds: string[]) {
+  const { spectra1D, spectra2D } = draft.view;
 
-  // remove the active spectra
-  relatedTargets.unshift({ jpath: 'data', key: 'id' });
-
-  for (const target of relatedTargets) {
-    const { jpath } = target;
-    const targetObj = lodashGet(draft, jpath);
-    if (Array.isArray(targetObj)) {
-      const data = targetObj.filter(
-        (datum) => !isActiveSpectrum(activeSpectra, datum[(target as any).key]),
-      );
-      lodashSet(draft, jpath, data);
-    } else {
-      const data = omitBy(draft.view.peaks, (_, id) =>
-        isActiveSpectrum(activeSpectra, id),
-      );
-      lodashSet(draft, jpath, data);
+  for (const spectrumId of spectraIds) {
+    if (spectrumId in spectra1D) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, unicorn/consistent-destructuring
+      delete draft.view.spectra1D[spectrumId];
+    }
+    if (spectrumId in spectra2D) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, unicorn/consistent-destructuring
+      delete draft.view.spectra2D[spectrumId];
     }
   }
 }
@@ -302,17 +286,13 @@ function handleDeleteSpectra(draft: Draft<State>, action) {
   if (action.id) {
     const index = state.data.findIndex((d) => d.id === action.id);
     draft.data.splice(index, 1);
-    // remove peaks State
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-    delete draft.view.peaks[action.id];
+    removeViewLinkWithSpectra(draft, [action.id]);
   } else {
     // remove spectra and it related data in the view object
-    removeActiveSpectra(draft, [
-      { jpath: 'view.ranges', key: 'spectrumID' },
-      { jpath: 'view.zones', key: 'spectrumID' },
-      { jpath: 'view.peaks' },
-      { jpath: 'view.zoom.levels' },
-    ]);
+    const activeSpectra = getActiveSpectraAsObject(draft);
+    draft.data = draft.data.filter((spectrum) => !activeSpectra?.[spectrum.id]);
+
+    removeViewLinkWithSpectra(draft, Object.keys(activeSpectra || {}));
   }
   setActiveTab(draft, {
     tab: draft.view.spectra.activeTab,
diff --git a/src/component/reducer/actions/ToolsActions.ts b/src/component/reducer/actions/ToolsActions.ts
index 61235a67d..3ea30aac6 100644
--- a/src/component/reducer/actions/ToolsActions.ts
+++ b/src/component/reducer/actions/ToolsActions.ts
@@ -11,7 +11,7 @@ import { get2DYScale } from '../../2d/utilities/scale';
 import { options } from '../../toolbar/ToolTypes';
 import groupByInfoKey from '../../utility/GroupByInfoKey';
 import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import { rangeStateInit, State } from '../Reducer';
+import { State } from '../Reducer';
 import { DISPLAYER_MODE, MARGIN } from '../core/Constants';
 import { setZoom, wheelZoom, ZoomType } from '../helper/Zoom1DManager';
 import zoomHistoryManager from '../helper/ZoomHistoryManager';
@@ -31,6 +31,7 @@ import {
   setFilterChanges,
 } from './FiltersActions';
 import { changeSpectrumVerticalAlignment } from './PreferencesActions';
+import { toggleRangesViewProperty } from './RangesActions';
 
 function resetTool(draft: Draft<State>, setDefaultTool = true) {
   // reset temp range
@@ -66,21 +67,7 @@ function setSelectedTool(draft: Draft<State>, action) {
     if (selectedTool) {
       // start Range edit mode
       if (selectedTool === options.editRange.id) {
-        const activeSpectrum = getActiveSpectrum(draft);
-        if (activeSpectrum) {
-          const range = draft.view.ranges.find(
-            (r) => r.spectrumID === activeSpectrum?.id,
-          );
-          if (range) {
-            range.showMultiplicityTrees = true;
-          } else {
-            draft.view.ranges.push({
-              spectrumID: activeSpectrum.id,
-              ...rangeStateInit,
-              showMultiplicityTrees: true,
-            });
-          }
-        }
+        toggleRangesViewProperty(draft, 'showMultiplicityTrees', true);
       }
 
       if (selectedTool !== draft.toolOptions.selectedTool) {
@@ -250,7 +237,7 @@ function getSpectrumID(draft: Draft<State>, index): string | null {
 function handleZoom(draft: Draft<State>, action) {
   const { event, trackID, selectedTool } = action;
   const {
-    view: { ranges: rangeState },
+    view: { spectra1D },
     displayerMode,
     yDomains,
     integralsYDomains,
@@ -273,9 +260,8 @@ function handleZoom(draft: Draft<State>, action) {
     if (selectedTool === options.integral.id && event.shiftKey) {
       for (const activeSpectrum of activeSpectra) {
         //check if the integrals is visible
-        const { showRangesIntegrals } =
-          rangeState.find((r) => r.spectrumID === activeSpectrum?.id) ||
-          rangeStateInit;
+        const { showRangesIntegrals = false } =
+          spectra1D?.[activeSpectrum.id].ranges || {};
         const domain = integralsYDomains?.[activeSpectrum?.id];
         if (showRangesIntegrals && domain) {
           integralsYDomains[activeSpectrum?.id] = wheelZoom(event, domain);
@@ -509,7 +495,7 @@ function levelChangeHandler(draft: Draft<State>, { deltaY, shiftKey }) {
     data,
     view: {
       spectra: { activeTab },
-      zoom: { levels },
+      spectra2D,
     },
   } = draft;
   const activeSpectra = getActiveSpectra(draft) || [];
@@ -528,8 +514,8 @@ function levelChangeHandler(draft: Draft<State>, { deltaY, shiftKey }) {
   try {
     for (const spectrum of spectra as Datum2D[]) {
       const contourOptions = spectrum.display.contourOptions;
-      const zoom = contoursManager(spectrum.id, levels, contourOptions);
-      levels[spectrum.id] = zoom.wheel(deltaY, shiftKey);
+      const zoom = contoursManager(spectrum.id, spectra2D, contourOptions);
+      spectra2D[spectrum.id].contoursLevel = zoom.wheel(deltaY, shiftKey);
     }
   } catch (error) {
     // TODO: handle error.
diff --git a/src/component/reducer/actions/ZonesActions.ts b/src/component/reducer/actions/ZonesActions.ts
index 45b96dcbf..601bad4c2 100644
--- a/src/component/reducer/actions/ZonesActions.ts
+++ b/src/component/reducer/actions/ZonesActions.ts
@@ -1,6 +1,7 @@
 import { FromTo } from 'cheminfo-types';
 import { Draft, original } from 'immer';
 import lodashCloneDeep from 'lodash/cloneDeep';
+import lodashMerge from 'lodash/merge';
 import { setPathLength } from 'nmr-correlation';
 
 import * as Filters from '../../../data/Filters';
@@ -20,7 +21,11 @@ import {
   unlink,
   unlinkInAssignmentData,
 } from '../../../data/utilities/ZoneUtilities';
-import { State, zoneStateInit } from '../Reducer';
+import {
+  getDefaultSpectra2DViewState,
+  State,
+  ZonesViewState,
+} from '../Reducer';
 import get2DRange from '../helper/get2DRange';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 
@@ -320,48 +325,40 @@ function handleSaveEditedZone(draft: Draft<State>, action) {
     handleOnChangeZonesData(draft);
   }
 }
-function handleShowZones(draft: Draft<State>, action) {
-  const { id } = action.payload;
-  const zone = draft.view.zones.find((r) => r.spectrumID === id);
-  if (zone) {
-    zone.showZones = !zone.showZones;
-  } else {
-    draft.view.zones.push({
-      spectrumID: id,
-      ...zoneStateInit,
-      showZones: !zoneStateInit.showZones,
-    });
-  }
+
+function handleOnChangeZonesData(draft) {
+  handleUpdateCorrelations(draft);
 }
-function handleShowSignals(draft: Draft<State>, action) {
-  const { id } = action.payload;
-  const zone = draft.view.zones.find((r) => r.spectrumID === id);
-  if (zone) {
-    zone.showSignals = !zone.showSignals;
-  } else {
-    draft.view.zones.push({
-      spectrumID: id,
-      ...zoneStateInit,
-      showSignals: !zoneStateInit.showSignals,
-    });
-  }
+
+function handleToggleZonesViewProperty(draft: Draft<State>, action) {
+  const { key } = action.payload;
+  toggleZonesViewProperty(draft, key);
 }
-function handleShowPeaks(draft: Draft<State>, action) {
-  const { id } = action.payload;
-  const zone = draft.view.zones.find((r) => r.spectrumID === id);
-  if (zone) {
-    zone.showPeaks = !zone.showPeaks;
-  } else {
-    draft.view.zones.push({
-      spectrumID: id,
-      ...zoneStateInit,
-      showPeaks: !zoneStateInit.showPeaks,
-    });
+
+function toggleZonesViewProperty(
+  draft: Draft<State>,
+  key: keyof ZonesViewState,
+  value?: boolean,
+) {
+  const activeSpectrum = getActiveSpectrum(draft);
+
+  if (activeSpectrum?.id) {
+    const zonesView = draft.view.spectra2D?.[activeSpectrum.id]?.zones;
+    if (zonesView) {
+      zonesView[key] = value !== undefined ? value : !zonesView[key];
+    } else {
+      const defaultViewState = getDefaultSpectra2DViewState();
+      draft.view.spectra2D[activeSpectrum.id] = lodashMerge(
+        defaultViewState,
+        draft.view.spectra2D[activeSpectrum.id],
+      );
+      draft.view.spectra2D[activeSpectrum.id].zones[key] =
+        value !== undefined
+          ? value
+          : !draft.view.spectra2D[activeSpectrum.id].zones[key];
+    }
   }
 }
-function handleOnChangeZonesData(draft) {
-  handleUpdateCorrelations(draft);
-}
 
 export {
   add2dZoneHandler,
@@ -376,7 +373,5 @@ export {
   handleSetSignalPathLength,
   changeZonesFactorHandler,
   handleAutoSpectraZonesDetection,
-  handleShowZones,
-  handleShowSignals,
-  handleShowPeaks,
+  handleToggleZonesViewProperty,
 };
diff --git a/src/component/reducer/types/Types.ts b/src/component/reducer/types/Types.ts
index 332199668..4bae128e9 100644
--- a/src/component/reducer/types/Types.ts
+++ b/src/component/reducer/types/Types.ts
@@ -119,22 +119,18 @@ export const CHANGE_RANGES_SUM_FLAG = 'CHANGE_RANGES_SUM_FLAG';
 export const CHANGE_INTEGRALS_SUM_FLAG = 'CHANGE_INTEGRALS_SUM_FLAG';
 export const CHANGE_ZONES_NOISE_FACTOR = 'CHANGE_ZONES_NOISE_FACTOR';
 export const UPDATE_RANGE = 'UPDATE_RANGE';
-export const SHOW_MULTIPLICITY_TREES = 'SHOW_MULTIPLICITY_TREES';
-export const SHOW_RANGES_INTEGRALS = 'SHOW_RANGES_INTEGRALS';
 export const AUTO_RANGES_SPECTRA_PICKING = 'AUTO_RANGES_SPECTRA_PICKING';
 export const AUTO_ZONES_SPECTRA_PICKING = 'AUTO_ZONES_SPECTRA_PICKING';
-export const SHOW_ZONES = 'SHOW_ZONES';
-export const SHOW_ZONES_SIGNALS = 'SHOW_ZONES_SIGNALS';
-export const SHOW_ZONES_PEAKS = 'SHOW_ZONES_PEAKS';
 export const GENERATE_SPECTRUM_FROM_PUBLICATION_STRING =
   'GENERATE_SPECTRUM_FROM_PUBLICATION_STRING';
 export const RESURRECTING_SPECTRUM_FROM_RANGES =
   'RESURRECTING_SPECTRUM_FROM_RANGES';
 export const RESURRECTING_SPECTRUM_FROM_JCAMP =
   'RESURRECTING_SPECTRUM_FROM_JCAMP';
-export const SHOW_J_GRAPH = 'SHOW_J_GRAPH';
 export const SET_AUTOMATIC_ASSIGNMENTS = 'SET_AUTOMATIC_ASSIGNMENTS';
 export const TOGGLE_PEAKS_VIEW_PROPERTY = 'TOGGLE_PEAKS_VIEW_PROPERTY';
+export const TOGGLE_RANGES_VIEW_PROPERTY = 'TOGGLE_RANGES_VIEW_PROPERTY';
+export const TOGGLE_ZONES_VIEW_PROPERTY = 'TOGGLE_ZONES_VIEW_PROPERTY';
 export const ORDER_MULTIPLE_SPECTRA_ANALYSIS =
   'ORDER_MULTIPLE_SPECTRA_ANALYSIS';
 export const APPLY_SIGNAL_PROCESSING_FILTER = 'APPLY_SIGNAL_PROCESSING_FILTER';
diff --git a/src/data/data2d/Spectrum2D/contours.ts b/src/data/data2d/Spectrum2D/contours.ts
index 65d5df9e0..e4c758d03 100644
--- a/src/data/data2d/Spectrum2D/contours.ts
+++ b/src/data/data2d/Spectrum2D/contours.ts
@@ -1,10 +1,12 @@
+import lodashMerge from 'lodash/merge';
 import { Conrec } from 'ml-conrec';
 
+import { ViewState } from '../../../component/reducer/Reducer';
 import { Datum2D } from '../../types/data2d';
 import { MinMaxContent } from '../../types/data2d/Data2D';
 import { calculateSanPlot } from '../../utilities/calculateSanPlot';
 
-interface Level {
+interface ContoursLevel {
   positive: number;
   negative: number;
 }
@@ -20,12 +22,9 @@ interface ContourOptions {
 interface WheelOptions {
   shiftKey: boolean;
   contourOptions: ContourOptions;
-  currentLevel: Level;
+  currentLevel: ContoursLevel;
 }
 
-interface ContoursLevels {
-  [key: string]: Level;
-}
 const DEFAULT_CONTOURS_OPTIONS = {
   positive: {
     contourLevels: [0, 21],
@@ -36,17 +35,17 @@ const DEFAULT_CONTOURS_OPTIONS = {
     numberOfLayers: 10,
   },
 };
-type LevelSign = keyof Level;
+type LevelSign = keyof ContoursLevel;
 
 const LEVEL_SIGNS: Readonly<[LevelSign, LevelSign]> = ['positive', 'negative'];
 interface ReturnContoursManager {
-  wheel: (value: number, shift: boolean) => Level;
-  getLevel: () => Level;
-  checkLevel: () => Level;
+  wheel: (value: number, shift: boolean) => ContoursLevel;
+  getLevel: () => ContoursLevel;
+  checkLevel: () => ContoursLevel;
 }
 
 function getDefaultContoursLevel(options: ContourOptions) {
-  const defaultLevel: Level = { negative: 10, positive: 10 };
+  const defaultLevel: ContoursLevel = { negative: 10, positive: 10 };
   for (const sign of LEVEL_SIGNS) {
     const [min, max] = options[sign].contourLevels;
     defaultLevel[sign] = min + max / 2;
@@ -56,18 +55,22 @@ function getDefaultContoursLevel(options: ContourOptions) {
 
 function contoursManager(
   spectrumID: string,
-  state: ContoursLevels,
+  state: ViewState['spectra2D'],
   options: ContourOptions,
 ): ReturnContoursManager {
-  const spectraLevels = { ...state };
   const contourOptions = { ...options };
 
-  if (!state?.[spectrumID]) {
+  if (!state?.[spectrumID]?.contoursLevel) {
     const defaultLevel = getDefaultContoursLevel(contourOptions);
-    spectraLevels[spectrumID] = defaultLevel;
+    state[spectrumID] = lodashMerge(
+      { contoursLevel: defaultLevel },
+      state[spectrumID],
+    );
   }
 
-  const currentLevel = spectraLevels[spectrumID];
+  const spectraLevels = { ...state };
+
+  const currentLevel = spectraLevels[spectrumID].contoursLevel;
 
   const wheel = (value, shiftKey) =>
     prepareWheel(value, { shiftKey, contourOptions, currentLevel });
@@ -108,7 +111,10 @@ function prepareWheel(value: number, options: WheelOptions) {
   return currentLevel;
 }
 
-function prepareCheckLevel(currentLevel: Level, options: ContourOptions) {
+function prepareCheckLevel(
+  currentLevel: ContoursLevel,
+  options: ContourOptions,
+) {
   const level = { ...currentLevel };
   for (const sign of LEVEL_SIGNS) {
     const [min, max] = options[sign].contourLevels;
@@ -224,4 +230,4 @@ export {
   getDefaultContoursLevel,
   DEFAULT_CONTOURS_OPTIONS,
 };
-export type { ContoursLevels, ReturnContoursManager, Level, LevelSign };
+export type { ReturnContoursManager, ContoursLevel, LevelSign };