diff --git a/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx b/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
index 7f1916e0c..be25d784d 100644
--- a/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
+++ b/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { Typography, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { runningInBrowser } from 'utils/common';
 
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
-import { t } from 'i18next';
 runningInBrowser() && require('leaflet-defaulticon-compatibility');
 const L = runningInBrowser()
     ? (require('leaflet') as typeof import('leaflet'))
@@ -22,37 +21,25 @@ const MapBoxContainer = styled('div')`
 
 interface MapBoxProps {
     location: { latitude: number; longitude: number };
-    showMap: boolean;
 }
 
-const MapBox: React.FC<MapBoxProps> = ({ location, showMap }) => {
+const MapBox: React.FC<MapBoxProps> = ({ location }) => {
     const mapBoxContainerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        if (showMap) {
-            const mapContainer = mapBoxContainerRef.current;
-            const position: L.LatLngTuple = [
-                location.latitude,
-                location.longitude,
-            ];
+        const mapContainer = mapBoxContainerRef.current;
+        const position: L.LatLngTuple = [location.latitude, location.longitude];
 
-            if (mapContainer && !mapContainer.hasChildNodes()) {
-                const map = L.map(mapContainer).setView(position, ZOOM_LEVEL);
-                L.tileLayer(LAYER_TILE_URL, {
-                    attribution: LAYER_TILE_ATTRIBUTION,
-                }).addTo(map);
-                L.marker(position).addTo(map).openPopup();
-            }
+        if (mapContainer && !mapContainer.hasChildNodes()) {
+            const map = L.map(mapContainer).setView(position, ZOOM_LEVEL);
+            L.tileLayer(LAYER_TILE_URL, {
+                attribution: LAYER_TILE_ATTRIBUTION,
+            }).addTo(map);
+            L.marker(position).addTo(map).openPopup();
         }
     }, []);
 
-    return (
-        <>
-            <MapBoxContainer ref={showMap && mapBoxContainerRef}>
-                {showMap && <Typography> {t('ENABLE_MAP')}</Typography>}
-            </MapBoxContainer>
-        </>
-    );
+    return <MapBoxContainer ref={mapBoxContainerRef} />;
 };
 
 export default MapBox;
diff --git a/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
index 4f688897d..5e086629a 100644
--- a/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
+++ b/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
@@ -33,7 +33,6 @@ import { ObjectLabelList } from 'components/MachineLearning/ObjectList';
 import { AppContext } from 'pages/_app';
 import { t } from 'i18next';
 import { GalleryContext } from 'pages/gallery';
-import { getMapEnabled } from 'utils/storage';
 
 export const FileInfoSidebar = styled((props: DialogProps) => (
     <EnteDrawer {...props} anchor="right" />
@@ -99,7 +98,6 @@ export function FileInfo({
     const [showExif, setShowExif] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [updateMLDataIndex, setUpdateMLDataIndex] = useState(0);
-    const [showMap, setShowMap] = useState(false);
 
     const openExif = () => setShowExif(true);
     const closeExif = () => setShowExif(false);
@@ -168,11 +166,6 @@ export function FileInfo({
         setParsedExifData(parsedExifData);
     }, [exif]);
 
-    useEffect(() => {
-        const mapEnabled = getMapEnabled();
-        setShowMap(mapEnabled);
-    }, []);
-
     if (!file) {
         return <></>;
     }
@@ -224,7 +217,7 @@ export function FileInfo({
                             icon={<LocationOnOutlined />}
                             title={t('LOCATION')}
                             caption={
-                                !showMap ? (
+                                !appContext.mapEnabled ? (
                                     t('ENABLE_MAP_INSTRUCTION')
                                 ) : (
                                     <Link
@@ -244,7 +237,9 @@ export function FileInfo({
                             }
                         />
 
-                        <MapBox location={location} showMap={showMap} />
+                        {appContext.mapEnabled && (
+                            <MapBox location={location} />
+                        )}
                     </>
                 )}
                 <InfoItem
diff --git a/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx b/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx
index b321e6de3..a87abb132 100644
--- a/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx
+++ b/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx
@@ -5,25 +5,9 @@ import { useContext } from 'react';
 import { logError } from 'utils/sentry';
 import EnableMap from '../EnableMap';
 import DisableMap from '../DisableMap';
-import { updateMapEnabledStatus } from 'services/userService';
 
-const ModifyMapEnabled = ({
-    open,
-    onClose,
-    onRootClose,
-    mapEnabled,
-    setMapEnabled,
-}) => {
-    const { somethingWentWrong } = useContext(AppContext);
-
-    const updateMapEnabled = async (enabled: boolean) => {
-        try {
-            await updateMapEnabledStatus(enabled);
-            setMapEnabled(enabled);
-        } catch (e) {
-            logError(e, 'Error while updating mapEnabled');
-        }
-    };
+const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
+    const { somethingWentWrong, updateMapEnabled } = useContext(AppContext);
 
     const disableMap = async () => {
         try {
diff --git a/apps/photos/src/components/Sidebar/MapSetting/index.tsx b/apps/photos/src/components/Sidebar/MapSetting/index.tsx
index 39eea4162..2e2e815a3 100644
--- a/apps/photos/src/components/Sidebar/MapSetting/index.tsx
+++ b/apps/photos/src/components/Sidebar/MapSetting/index.tsx
@@ -1,21 +1,17 @@
 import { Box, DialogProps, Stack } from '@mui/material';
 import { EnteDrawer } from 'components/EnteDrawer';
 import Titlebar from 'components/Titlebar';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
 import ModifyMapEnabled from './ModifyMapEnabled';
-import { LS_KEYS } from 'utils/storage/localStorage';
-import { useLocalState } from 'hooks/useLocalState';
 import { getMapEnabledStatus } from 'services/userService';
+import { AppContext } from 'pages/_app';
 
 export default function MapSettings({ open, onClose, onRootClose }) {
+    const { mapEnabled, updateMapEnabled } = useContext(AppContext);
     const [modifyMapEnabledView, setModifyMapEnabledView] = useState(false);
-    const [mapEnabled, setMapEnabled] = useLocalState(
-        LS_KEYS.MAP_ENABLED,
-        false
-    );
 
     const openModifyMapEnabled = () => setModifyMapEnabledView(true);
     const closeModifyMapEnabled = () => setModifyMapEnabledView(false);
@@ -26,7 +22,7 @@ export default function MapSettings({ open, onClose, onRootClose }) {
         }
         const main = async () => {
             const remoteMapValue = await getMapEnabledStatus();
-            setMapEnabled(remoteMapValue);
+            updateMapEnabled(remoteMapValue);
         };
         main();
     }, [open]);
@@ -77,7 +73,6 @@ export default function MapSettings({ open, onClose, onRootClose }) {
             <ModifyMapEnabled
                 open={modifyMapEnabledView}
                 mapEnabled={mapEnabled}
-                setMapEnabled={setMapEnabled}
                 onClose={closeModifyMapEnabled}
                 onRootClose={handleRootClose}
             />
diff --git a/apps/photos/src/pages/_app.tsx b/apps/photos/src/pages/_app.tsx
index 584a9d015..fa4a000e0 100644
--- a/apps/photos/src/pages/_app.tsx
+++ b/apps/photos/src/pages/_app.tsx
@@ -36,6 +36,7 @@ import {
 import {
     getFamilyPortalRedirectURL,
     getRoadmapRedirectURL,
+    updateMapEnabledStatus,
 } from 'services/userService';
 import { CustomError } from 'utils/error';
 import {
@@ -76,6 +77,7 @@ import {
 import exportService from 'services/export';
 import { ExportStage } from 'constants/export';
 import { REDIRECTS } from 'constants/redirects';
+import { getLocalMapEnabled, setLocalMapEnabled } from 'utils/storage';
 
 const redirectMap = new Map([
     [REDIRECTS.ROADMAP, getRoadmapRedirectURL],
@@ -102,7 +104,9 @@ type AppContextType = {
     redirectURL: string;
     setRedirectURL: (url: string) => void;
     mlSearchEnabled: boolean;
+    mapEnabled: boolean;
     updateMlSearchEnabled: (enabled: boolean) => Promise<void>;
+    updateMapEnabled: (enabled: boolean) => Promise<void>;
     startLoading: () => void;
     finishLoading: () => void;
     closeMessageDialog: () => void;
@@ -147,6 +151,7 @@ export default function App(props) {
     const [redirectName, setRedirectName] = useState<string>(null);
     const [redirectURL, setRedirectURL] = useState(null);
     const [mlSearchEnabled, setMlSearchEnabled] = useState(false);
+    const [mapEnabled, setMapEnabled] = useState(false);
     const isLoadingBarRunning = useRef(false);
     const loadingBar = useRef(null);
     const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
@@ -249,6 +254,10 @@ export default function App(props) {
         }
     }, []);
 
+    useEffect(() => {
+        setMapEnabled(getLocalMapEnabled());
+    }, []);
+
     useEffect(() => {
         if (!isElectron()) {
             return;
@@ -394,6 +403,16 @@ export default function App(props) {
         }
     };
 
+    const updateMapEnabled = async (enabled: boolean) => {
+        try {
+            await updateMapEnabledStatus(enabled);
+            setLocalMapEnabled(enabled);
+            setMapEnabled(enabled);
+        } catch (e) {
+            logError(e, 'Error while updating mapEnabled');
+        }
+    };
+
     const startLoading = () => {
         !isLoadingBarRunning.current && loadingBar.current?.continuousStart();
         isLoadingBarRunning.current = true;
@@ -493,6 +512,8 @@ export default function App(props) {
                         setThemeColor,
                         somethingWentWrong,
                         setDialogBoxAttributesV2,
+                        mapEnabled,
+                        updateMapEnabled,
                     }}>
                     {(loading || !isI18nReady) && (
                         <Overlay
diff --git a/apps/photos/src/services/userService.ts b/apps/photos/src/services/userService.ts
index 6a72bda88..9ca2b3283 100644
--- a/apps/photos/src/services/userService.ts
+++ b/apps/photos/src/services/userService.ts
@@ -28,7 +28,7 @@ import { B64EncryptionResult } from 'types/crypto';
 import { getLocalFamilyData, isPartOfFamily } from 'utils/user/family';
 import { AxiosResponse } from 'axios';
 import { APPS, getAppName } from 'constants/apps';
-import { setMapEnabled } from 'utils/storage';
+import { setLocalMapEnabled } from 'utils/storage';
 
 const ENDPOINT = getEndpoint();
 
@@ -457,7 +457,7 @@ export const updateFaceSearchEnabledStatus = async (newStatus: boolean) => {
 export const syncMapEnabled = async () => {
     try {
         const status = await getMapEnabledStatus();
-        setMapEnabled(status);
+        setLocalMapEnabled(status);
     } catch (e) {
         logError(e, 'failed to sync map enabled status');
         throw e;
diff --git a/apps/photos/src/utils/storage/index.ts b/apps/photos/src/utils/storage/index.ts
index d7c3a3e88..eb894dea4 100644
--- a/apps/photos/src/utils/storage/index.ts
+++ b/apps/photos/src/utils/storage/index.ts
@@ -27,10 +27,10 @@ export function getUserLocale(): Language {
     return getData(LS_KEYS.LOCALE)?.value;
 }
 
-export function getMapEnabled(): boolean {
+export function getLocalMapEnabled(): boolean {
     return getData(LS_KEYS.MAP_ENABLED)?.value ?? false;
 }
 
-export function setMapEnabled(value: boolean) {
+export function setLocalMapEnabled(value: boolean) {
     setData(LS_KEYS.MAP_ENABLED, { value });
 }