diff --git a/cypress/e2e/view-100/synchronized-view-and-navtree.cy.js b/cypress/e2e/view-100/synchronized-view-and-navtree.cy.js
index 6e453af35..e745aec27 100644
--- a/cypress/e2e/view-100/synchronized-view-and-navtree.cy.js
+++ b/cypress/e2e/view-100/synchronized-view-and-navtree.cy.js
@@ -20,6 +20,7 @@ describe('View 100: Synchronized View and NavTree', () => {
     beforeEach(() => {
       visitHomepageWaitForModel()
       cy.get('[data-testid="control-button-navigation"]').click()
+      cy.get('[value="spatial-tree"]').click()
       cy.findByText('Bldrs').should('be.visible').click()
       cy.findByText('Build').should('be.visible').click()
       cy.findByText('Every').should('be.visible').click()
@@ -50,4 +51,17 @@ describe('View 100: Synchronized View and NavTree', () => {
       cy.percySnapshot()
     })
   })
+
+  context('Persist navigation mode when the navigation panel is closed and reopened', () => {
+    it('Item highlighted in tree and scene - Screen', () => {
+      visitHomepageWaitForModel()
+      cy.get('[data-testid="control-button-navigation"]').click()
+      cy.get('[value="spatial-tree"]').click()
+      cy.findByText('Bldrs').should('be.visible').click()
+      cy.get('[data-testid="ListIcon"]').click()
+      cy.get('[data-testid="control-button-navigation"]').click()
+      cy.get('[data-testid="control-button-navigation"]').click()
+      cy.findByText('Project').should('be.visible').click()
+    })
+  })
 })
diff --git a/src/Components/NavTree/NavTreePanel.jsx b/src/Components/NavTree/NavTreePanel.jsx
index a6509ce6d..16f06ffdd 100644
--- a/src/Components/NavTree/NavTreePanel.jsx
+++ b/src/Components/NavTree/NavTreePanel.jsx
@@ -1,4 +1,4 @@
-import React, {ReactElement, useEffect, useState} from 'react'
+import React, {ReactElement, useEffect} from 'react'
 import TreeView from '@mui/lab/TreeView'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
@@ -34,15 +34,16 @@ export default function NavTreePanel({
   const elementTypesMap = useStore((state) => state.elementTypesMap)
   const expandedElements = useStore((state) => state.expandedElements)
   const expandedTypes = useStore((state) => state.expandedTypes)
+  const navigationMode = useStore((state) => state.navigationMode)
 
   const setIsNavTreeVisible = useStore((state) => state.setIsNavTreeVisible)
 
   const rootElement = useStore((state) => state.rootElement)
   const selectedElements = useStore((state) => state.selectedElements)
+  const setNavigationMode = useStore((state) => state.setNavigationMode)
   const setExpandedElements = useStore((state) => state.setExpandedElements)
   const setExpandedTypes = useStore((state) => state.setExpandedTypes)
 
-  const [navigationMode, setNavigationMode] = useState('spatial-tree')
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const idToRef = {}
 
diff --git a/src/store/NavTreeSlice.js b/src/store/NavTreeSlice.js
index cc6b09018..90301869a 100644
--- a/src/store/NavTreeSlice.js
+++ b/src/store/NavTreeSlice.js
@@ -30,6 +30,9 @@ export default function createNavTreeSlice(set, get) {
     toggleIsNavTreeVisible: () =>
       set((state) => ({isNavTreeVisible: !state.isNavTreeVisible})),
 
+    navigationMode: 'element-types',
+    setNavigationMode: (navMode) => set(() => ({navigationMode: navMode})),
+
     selectedElement: null,
     setSelectedElement: (elt) => set(() => ({selectedElement: elt})),