diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d8315dec6e..02e05be2fc 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -86,9 +86,6 @@ function showKeyboardShortcuts() {
 
 const route = useRoute()
 
-// hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
-
 // FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
 watch(() => route.name as string, (routeName) => {
diff --git a/src/composables/useMenuActive.ts b/src/composables/useMenuActive.ts
new file mode 100644
index 0000000000..cfeed2ca15
--- /dev/null
+++ b/src/composables/useMenuActive.ts
@@ -0,0 +1,47 @@
+import {ref, watch, readonly} from 'vue'
+import {useLocalStorage, useMediaQuery} from '@vueuse/core'
+
+const BULMA_MOBILE_BREAKPOINT = 768
+
+export function useMenuActive() {
+	const isMobile = useMediaQuery(`(max-width: ${BULMA_MOBILE_BREAKPOINT}px)`)
+
+	const desktopPreference = useLocalStorage(
+		'menuActiveDesktopPreference',
+		true,
+		// If we have two tabs open we want to be able to have the menu open in one window
+		// and closed in the other. The last changed value will be the new preference
+		{listenToStorageChanges: false},
+	)
+
+	const menuActive = ref(false)
+	
+	// set to prefered value
+	watch(isMobile, (current) => {
+		menuActive.value = current
+			// On mobile we don't show the menu in an expanded state
+			// because that would hide the main content
+			? false
+			: desktopPreference.value
+	}, {immediate: true})
+
+	watch(menuActive, (current) => {
+		if (!isMobile.value) {
+			desktopPreference.value = current
+		}
+	})
+
+	function setMenuActive(newMenuActive: boolean) {
+		menuActive.value = newMenuActive
+	}
+
+	function toggleMenu() {
+		menuActive.value = menuActive.value = !menuActive.value
+	}
+
+	return {
+		menuActive: readonly(menuActive),
+		setMenuActive,
+		toggleMenu,
+	}
+}
\ No newline at end of file
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 11283656e1..e59ad45e7d 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -7,9 +7,10 @@ import ListModel from '@/models/list'
 import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
+import {useMenuActive} from '@/composables/useMenuActive'
+
 import {useAuthStore} from '@/stores/auth'
 import type {IList} from '@/modelTypes/IList'
-import { useStorage, useWindowSize, whenever } from '@vueuse/core'
 
 export const useBaseStore = defineStore('base', () => {
 	const loading = ref(false)
@@ -24,22 +25,10 @@ export const useBaseStore = defineStore('base', () => {
 	const blurHash = ref('')
 
 	const hasTasks = ref(false)
-	const windowSize = useWindowSize()
-	const menuActivePreference = useStorage('menuActive', true)
-	const menuActive = ref(windowSize.width.value >= 770 && menuActivePreference.value)
 	const keyboardShortcutsActive = ref(false)
 	const quickActionsActive = ref(false)
 	const logoVisible = ref(true)
 
-	whenever(windowSize.width, (value, previous) => {
-		if (value < 770 && previous >= 770) {
-			setMenuActive(false)
-		}
-		if (value >= 770 && previous < 770 && menuActivePreference.value) {
-			setMenuActive(menuActivePreference.value)
-		}
-	})
-
 	function setLoading(newLoading: boolean) {
 		loading.value = newLoading
 	}
@@ -65,19 +54,6 @@ export const useBaseStore = defineStore('base', () => {
 		hasTasks.value = newHasTasks
 	}
 
-	function setMenuActive(newMenuActive: boolean) {
-		menuActive.value = newMenuActive
-	}
-
-	function setMenuActivePreference(newMenuActivePreference: boolean) {
-		menuActivePreference.value = newMenuActivePreference
-	}
-
-	function toggleMenu() {
-		menuActive.value = !menuActive.value
-		windowSize.width.value >= 770 && setMenuActivePreference(menuActive.value)
-	}
-
 	function setKeyboardShortcutsActive(value: boolean) {
 		keyboardShortcutsActive.value = value
 	}
@@ -156,18 +132,14 @@ export const useBaseStore = defineStore('base', () => {
 		background: readonly(background),
 		blurHash: readonly(blurHash),
 		hasTasks: readonly(hasTasks),
-		menuActive: readonly(menuActive),
 		keyboardShortcutsActive: readonly(keyboardShortcutsActive),
 		quickActionsActive: readonly(quickActionsActive),
 		logoVisible: readonly(logoVisible),
-		windowSize: readonly(windowSize),
 
 		setLoading,
 		setReady,
 		setCurrentList,
 		setHasTasks,
-		setMenuActive,
-		toggleMenu,
 		setKeyboardShortcutsActive,
 		setQuickActionsActive,
 		setBackground,
@@ -176,6 +148,8 @@ export const useBaseStore = defineStore('base', () => {
 
 		handleSetCurrentList,
 		loadApp,
+
+		...useMenuActive(),
 	}
 })