diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index a9921ff24..34ceaf97a 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Suspense, useEffect, useRef } from "react";
+import { useState, Suspense, useEffect, useRef } from "react";
 import { Box, Flex } from "@theme-ui/components";
 import { ScopedThemeProvider } from "./components/theme-provider";
 import useMobile from "./hooks/use-mobile";
@@ -50,8 +50,6 @@ import { STATUS_BAR_HEIGHT } from "./common/constants";
 
 new WebExtensionRelay();
 
-const LIST_PANE_SNAP_SIZE = 200;
-
 function App() {
   const isMobile = useMobile();
   const isFocusMode = useStore((store) => store.isFocusMode);
@@ -133,31 +131,15 @@ export default App;
 function DesktopAppContents() {
   const isFocusMode = useStore((store) => store.isFocusMode);
   const isListPaneVisible = useStore((store) => store.isListPaneVisible);
-  const toggleListPane = useStore((store) => store.toggleListPane);
   const isTablet = useTablet();
   // const [isNarrow, setIsNarrow] = useState(isTablet || false);
   const navPane = useRef<SplitPaneImperativeHandle>(null);
-  const listPaneSize = useRef<null | number>(null);
 
   useEffect(() => {
     if (isTablet) navPane.current?.collapse(0);
     else if (navPane.current?.isCollapsed(0)) navPane.current?.expand(0);
   }, [isTablet]);
 
-  useEffect(() => {
-    if (isListPaneVisible) {
-      navPane.current?.expand(1);
-      return;
-    }
-    if (
-      listPaneSize.current !== null &&
-      listPaneSize.current < LIST_PANE_SNAP_SIZE
-    ) {
-      toggleListPane();
-      navPane.current?.reset(1);
-    }
-  }, [isListPaneVisible]);
-
   return (
     <>
       <Flex
@@ -173,8 +155,6 @@ function DesktopAppContents() {
           direction="vertical"
           onChange={(sizes) => {
             useStore.setState({ isNavPaneCollapsed: sizes[0] <= 70 });
-
-            listPaneSize.current = sizes[1];
           }}
         >
           {isFocusMode ? null : (
@@ -193,12 +173,12 @@ function DesktopAppContents() {
               <NavigationMenu onExpand={() => navPane.current?.reset(0)} />
             </Pane>
           )}
-          {!isFocusMode ? (
+          {!isFocusMode && isListPaneVisible ? (
             <Pane
               id="list-pane"
               initialSize={380}
               style={{ flex: 1, display: "flex" }}
-              snapSize={LIST_PANE_SNAP_SIZE}
+              snapSize={200}
               maxSize={500}
               className="list-pane"
             >
diff --git a/apps/web/src/components/list-container/index.tsx b/apps/web/src/components/list-container/index.tsx
index fd55cf68b..3969fc00d 100644
--- a/apps/web/src/components/list-container/index.tsx
+++ b/apps/web/src/components/list-container/index.tsx
@@ -25,7 +25,6 @@ import {
   useStore as useSelectionStore,
   store as selectionStore
 } from "../../stores/selection-store";
-import { useStore as useAppStore } from "../../stores/app-store";
 import GroupHeader from "../group-header";
 import {
   ListItemWrapper,
@@ -104,7 +103,6 @@ function ListContainer(props: ListContainerProps) {
   const toggleSelection = useSelectionStore(
     (store) => store.toggleSelectionMode
   );
-  const toggleListPane = useAppStore((store) => store.toggleListPane);
 
   const listRef = useRef<VirtuosoHandle>(null);
   const listContainerRef = useRef(null);
@@ -117,7 +115,6 @@ function ListContainer(props: ListContainerProps) {
     AppEventManager.subscribe(
       AppEvents.revealItemInList,
       async (id?: string) => {
-        toggleListPane();
         if (!id || !listRef.current) return;
 
         const ids = await items.ids();
diff --git a/apps/web/src/components/navigation-menu/index.tsx b/apps/web/src/components/navigation-menu/index.tsx
index ad4ff7e37..d43e7cc15 100644
--- a/apps/web/src/components/navigation-menu/index.tsx
+++ b/apps/web/src/components/navigation-menu/index.tsx
@@ -197,17 +197,12 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
   const isFocusMode = useAppStore((store) => store.isFocusMode);
   const [currentTab, setCurrentTab] = useState<(typeof tabs)[number]>(tabs[0]);
   const isNavPaneCollapsed = useAppStore((store) => store.isNavPaneCollapsed);
-  const isCollapsedNavPaneHovered = useAppStore(
-    (store) => store.isCollapsedNavPaneHovered
-  );
-  const setCollapsedNavPaneHovered = useAppStore(
-    (store) => store.setCollapsedNavPaneHovered
-  );
-  const isCollapsed = isNavPaneCollapsed && !isCollapsedNavPaneHovered;
+  const [expanded, setExpanded] = useState(false);
+  const isCollapsed = isNavPaneCollapsed && !expanded;
   const mouseHoverTimeout = useRef(0);
 
   useEffect(() => {
-    if (isNavPaneCollapsed) setCollapsedNavPaneHovered(false);
+    if (isNavPaneCollapsed) setExpanded(false);
   }, [isNavPaneCollapsed]);
 
   return (
@@ -226,11 +221,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
         borderRight: "1px solid var(--separator)",
         pt: 1,
         transition: "width 0.1s ease-in",
-        width: isNavPaneCollapsed
-          ? isCollapsedNavPaneHovered
-            ? 250
-            : 50
-          : "100%"
+        width: isNavPaneCollapsed ? (expanded ? 250 : 50) : "100%"
       }}
       onMouseEnter={() => {
         clearTimeout(mouseHoverTimeout.current);
@@ -240,7 +231,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
         if (!isNavPaneCollapsed) return;
         mouseHoverTimeout.current = setTimeout(() => {
           if (!isNavPaneCollapsed) return;
-          setCollapsedNavPaneHovered(false);
+          setExpanded(false);
         }, 500) as unknown as number;
       }}
     >
@@ -248,7 +239,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
         <Button
           variant="secondary"
           sx={{ p: 1, px: "small", bg: "transparent", mx: 1 }}
-          onClick={() => setCollapsedNavPaneHovered(true)}
+          onClick={() => setExpanded(true)}
         >
           <HamburgerMenu size={16} color="icon" />
         </Button>
@@ -331,7 +322,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
               icon={tab.icon}
               selected={currentTab.id === tab.id}
               onClick={() => {
-                if (isNavPaneCollapsed) setCollapsedNavPaneHovered(true);
+                if (isNavPaneCollapsed) setExpanded(true);
                 setCurrentTab(tab);
               }}
             />
@@ -390,11 +381,11 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
             <Flex sx={{ flexDirection: "column", px: 1, gap: [1, 1, "small"] }}>
               <Routes
                 isCollapsed={isCollapsed}
-                collapse={() => collapseNavPaneHoveredIfNavPaneCollapsed()}
+                collapse={() => isNavPaneCollapsed && setExpanded(false)}
               />
               <Colors
                 isCollapsed={isCollapsed}
-                collapse={() => collapseNavPaneHoveredIfNavPaneCollapsed()}
+                collapse={() => isNavPaneCollapsed && setExpanded(false)}
               />
               <Box
                 bg="separator"
@@ -403,7 +394,7 @@ function NavigationMenu({ onExpand }: { onExpand?: () => void }) {
               />
               <Shortcuts
                 isCollapsed={isCollapsed}
-                collapse={() => collapseNavPaneHoveredIfNavPaneCollapsed()}
+                collapse={() => isNavPaneCollapsed && setExpanded(false)}
               />
             </Flex>
           </FlexScrollContainer>
@@ -967,12 +958,5 @@ function navigateToRoute(path: string) {
       return useSearchStore.getState().resetSearch();
     return useAppStore.getState().toggleListPane();
   }
-  useAppStore.getState().toggleListPane();
   navigate(path);
 }
-
-export function collapseNavPaneHoveredIfNavPaneCollapsed() {
-  if (useAppStore.getState().isNavPaneCollapsed) {
-    useAppStore.getState().setCollapsedNavPaneHovered(false);
-  }
-}
diff --git a/apps/web/src/components/notebook/index.tsx b/apps/web/src/components/notebook/index.tsx
index e88623993..e1f07044b 100644
--- a/apps/web/src/components/notebook/index.tsx
+++ b/apps/web/src/components/notebook/index.tsx
@@ -43,7 +43,6 @@ import { store as appStore } from "../../stores/app-store";
 import { Multiselect } from "../../common/multi-select";
 import { strings } from "@notesnook/intl";
 import { db } from "../../common/db";
-import { collapseNavPaneHoveredIfNavPaneCollapsed } from "../navigation-menu";
 
 type NotebookProps = {
   item: NotebookType;
@@ -79,10 +78,7 @@ export function Notebook(props: NotebookProps) {
       isFocused={isOpened}
       isCompact
       item={item}
-      onClick={() => {
-        navigate(`/notebooks/${item.id}`);
-        collapseNavPaneHoveredIfNavPaneCollapsed();
-      }}
+      onClick={() => navigate(`/notebooks/${item.id}`)}
       onDragEnter={(e) => {
         if (!isDragEntering(e)) return;
         e.currentTarget.focus();
diff --git a/apps/web/src/components/tag/index.tsx b/apps/web/src/components/tag/index.tsx
index 735add731..2e8612981 100644
--- a/apps/web/src/components/tag/index.tsx
+++ b/apps/web/src/components/tag/index.tsx
@@ -31,7 +31,6 @@ import { useStore as useSelectionStore } from "../../stores/selection-store";
 import { useStore as useNoteStore } from "../../stores/note-store";
 import { Multiselect } from "../../common/multi-select";
 import { strings } from "@notesnook/intl";
-import { collapseNavPaneHoveredIfNavPaneCollapsed } from "../navigation-menu";
 
 type TagProps = { item: TagType; totalNotes: number };
 function Tag(props: TagProps) {
@@ -88,7 +87,6 @@ function Tag(props: TagProps) {
       menuItems={tagMenuItems}
       onClick={() => {
         navigate(`/tags/${id}`);
-        collapseNavPaneHoveredIfNavPaneCollapsed();
       }}
       onDragEnter={(e) => {
         e?.currentTarget.focus();
diff --git a/apps/web/src/stores/app-store.ts b/apps/web/src/stores/app-store.ts
index a84a0c2f8..063bf4308 100644
--- a/apps/web/src/stores/app-store.ts
+++ b/apps/web/src/stores/app-store.ts
@@ -67,7 +67,6 @@ class AppStore extends BaseStore<AppStore> {
   isFocusMode = false;
   isListPaneVisible = true;
   isNavPaneCollapsed = false;
-  isCollapsedNavPaneHovered = false;
   isVaultCreated = false;
   isAutoSyncEnabled = Config.get("autoSyncEnabled", true);
   isSyncEnabled = Config.get("syncEnabled", true);
@@ -172,10 +171,6 @@ class AppStore extends BaseStore<AppStore> {
     );
   };
 
-  setCollapsedNavPaneHovered = (state: boolean) => {
-    this.set({ isCollapsedNavPaneHovered: state });
-  };
-
   refresh = async () => {
     logger.measure("refreshing app");