diff --git a/messages/renderer/en.json b/messages/renderer/en.json
index 8c1a1307..cdc8c8d6 100644
--- a/messages/renderer/en.json
+++ b/messages/renderer/en.json
@@ -774,6 +774,10 @@
     "description": "Message stored in text file in export if originals are missing. The message is followed by a list of filenames with missing originals",
     "message": "The original size of these files could not be found, only preview size (1,200 pixel) images are included. This can happen because the phone that took the photos has only synced to other phones, and not directly to Mapeo Desktop. To try fixing this, find the phone that took the photos and sync it with Mapeo Desktop before exporting again."
   },
+  "renderer.hooks.store.defaultBackgroundMapName": {
+    "description": "The name of the default background map",
+    "message": "Default"
+  },
   "renderer.hooks.useMapStylesQuery.defaultBackgroundMapName": {
     "description": "The name of the default background map",
     "message": "Default"
diff --git a/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js b/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
index 0f3e8b5d..cf272e6e 100644
--- a/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
+++ b/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
@@ -42,7 +42,7 @@ const m = defineMessages({
 })
 
 /**
- * @typedef {import('../../hooks/useMapServerQuery').MapServerStyleInfo & { isDefault?: boolean }} BackgroundMapInfo
+ * @typedef {import('../../hooks/store').MapStyle} BackgroundMapInfo
  * @typedef BackgroundMapInfoProps
  * @prop {BackgroundMapInfo} map
  * @prop {()=>void} unsetMapValue
@@ -52,10 +52,7 @@ const m = defineMessages({
 export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
   const { formatMessage: t } = useIntl()
 
-  const [mapStyle, setMapStyle] = useBackgroundMapStore(store => [
-    store.mapStyle,
-    store.setMapStyle
-  ])
+  const [mapStyle, setMapStyle] = useBackgroundMapStore()
 
   const classes = useStyles()
 
@@ -76,7 +73,7 @@ export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
         ) : (
           <>
             <MapInfo
-              name={map.name}
+              name={typeof map.name === 'string' ? map.name : t(map.name)}
               id={map.id}
               unsetMapValue={unsetMapValue}
               url={map.url}
@@ -85,7 +82,7 @@ export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
             {/* Text */}
             <div className={classes.paddedContainer}>
               <Typography variant='subtitle2' style={{ fontSize: 18 }}>
-                {map.name}
+                {typeof map.name === 'string' ? map.name : t(map.name)}
               </Typography>
               {!map.isDefault ? (
                 <Typography variant='body1'>{`${Math.round(
diff --git a/src/renderer/components/BackgroundMaps/MapCard.js b/src/renderer/components/BackgroundMaps/MapCard.js
index ea36c6be..91c1000e 100644
--- a/src/renderer/components/BackgroundMaps/MapCard.js
+++ b/src/renderer/components/BackgroundMaps/MapCard.js
@@ -26,16 +26,17 @@ export const MapboxPrevOnly = ReactMapboxGl({
 })
 
 /**
+ * @typedef {import('../../hooks/store').MapStyle} MapStyle
  * @typedef MapCardProps
- * @prop {import('../SettingsView/BackgroundMaps').MapServerStyleInfo & { isDefault?: boolean }} mapStyle
- * @prop {React.Dispatch<React.SetStateAction<import('../SettingsView/BackgroundMaps').MapServerStyleInfo['id'] | null>>} setMap
+ * @prop {MapStyle} mapStyle
+ * @prop {React.Dispatch<React.SetStateAction<MapStyle['id'] | null>>} setMap
  * @prop {boolean } isBeingViewed
  */
 
 /** @param {MapCardProps} param */
 export const MapCard = ({ mapStyle, setMap, isBeingViewed }) => {
   const theme = useTheme()
-  const selectedMapStyle = useBackgroundMapStore(store => store.mapStyle)
+  const [selectedMapStyle] = useBackgroundMapStore()
   const classes = useStyles()
   const { formatMessage: t } = useIntl()
 
@@ -65,7 +66,11 @@ export const MapCard = ({ mapStyle, setMap, isBeingViewed }) => {
           />
         </div>
         <div className={classes.text}>
-          <Typography>{mapStyle.name}</Typography>
+          <Typography>
+            {typeof mapStyle.name === 'string'
+              ? mapStyle.name
+              : t(mapStyle.name)}
+          </Typography>
           {!mapStyle.isDefault && (
             <Typography variant='subtitle1'>
               {`${Math.round(convertKbToMb(mapStyle.bytesStored))} ${t(m.mb)}`}
diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index ab68fac5..8edde5e8 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -52,14 +52,13 @@ export const SidePanel = ({ openSettings, mapValue, setMapValue }) => {
             <Loader />
           ) : data ? (
             data.map(mapStyle => (
-              <>
+              <React.Fragment key={mapStyle.id}>
                 <MapCard
                   setMap={setMapValue}
-                  key={mapStyle.id}
                   mapStyle={mapStyle}
                   isBeingViewed={mapStyle.id === mapValue}
                 />
-              </>
+              </React.Fragment>
             ))
           ) : null}
         </div>
diff --git a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
index e83e5649..d03872ab 100644
--- a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
+++ b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
@@ -1,3 +1,4 @@
+// @ts-check
 import * as React from 'react'
 import {
   Box,
@@ -33,10 +34,7 @@ const m = defineMessages({
 export const BackgroundMapSelector = ({ active, dismiss }) => {
   const classes = useStyles()
   const { formatMessage: t } = useIntl()
-  const [mapStyle, setMapStyle] = useBackgroundMapStore(store => [
-    store.mapStyle,
-    store.setMapStyle
-  ])
+  const [mapStyle, setMapStyle] = useBackgroundMapStore()
 
   const setTabIndex = usePersistedUiStore(store => store.setTabIndex)
 
@@ -62,7 +60,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
           </Typography>
           <Link
             className={classes.link}
-            a='#'
+            href='#'
             onClick={navigateToBackgroundMaps}
           >
             {t(m.manageMapsLink)}
@@ -91,7 +89,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
                   }}
                   selected={isSelected}
                   styleUrl={map.url}
-                  title={map.name}
+                  title={typeof map.name === 'string' ? map.name : t(map.name)}
                   key={map.id}
                 />
               )
diff --git a/src/renderer/components/MapFilter/MapView/MapView.js b/src/renderer/components/MapFilter/MapView/MapView.js
index ed5afb27..7b42de21 100644
--- a/src/renderer/components/MapFilter/MapView/MapView.js
+++ b/src/renderer/components/MapFilter/MapView/MapView.js
@@ -11,7 +11,6 @@ import {
   useBackgroundMapStore,
   useExperimentsFlagsStore
 } from '../../../hooks/store'
-import { useMapStylesQuery } from '../../../hooks/useMapStylesQuery'
 
 const MapView = (
   {
@@ -31,13 +30,7 @@ const MapView = (
   const backgroundMapsFlag = useExperimentsFlagsStore(
     store => store.backgroundMaps
   )
-  const selectedMapStyle = useBackgroundMapStore(store => store.mapStyle)
-  const { data: mapStyles } = useMapStylesQuery()
-
-  const mapStyleUrl =
-    backgroundMapsFlag && selectedMapStyle
-      ? selectedMapStyle?.url
-      : mapStyles && mapStyles[0] && mapStyles[0].url
+  const [mapStyle] = useBackgroundMapStore()
 
   return (
     <>
@@ -70,7 +63,7 @@ const MapView = (
             getMedia={getMedia}
             presets={presets}
             {...otherProps}
-            mapStyle={mapStyleUrl}
+            mapStyle={mapStyle.url}
           />
         )}
       </ViewWrapper>
diff --git a/src/renderer/hooks/store.js b/src/renderer/hooks/store.js
index 43acaa1a..fa412065 100644
--- a/src/renderer/hooks/store.js
+++ b/src/renderer/hooks/store.js
@@ -2,9 +2,17 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 import store from '../../persist-store'
+import { DEFAULT_MAP } from './useMapStylesQuery'
 
 /**
- * @typedef {import('./useMapServerQuery').MapServerStyleInfo} MapStyle
+ * @typedef { {
+ * id: string,
+ * url: string,
+ * bytesStored: number,
+ * name: import('react-intl').MessageDescriptor | string,
+ * isDefault?: boolean,
+ * isImporting?: boolean
+ * }} MapStyle
  */
 
 /**
@@ -56,17 +64,23 @@ const experimentsFlagsStoreSlice = (set, get) => ({
 
 /**
  * @typedef {{
- *  mapStyle: MapStyle | null,
- *  setMapStyle: (mapStyle: MapStyle) => void
+ *  mapStyleLegacy: MapStyle,
+ *  mapStyleMapServer: MapStyle,
+ *  setMapStyleLegacy: (mapStyle:MapStyle) => void,
+ *  setMapStyleServer: (mapStyle:MapStyle) => void
  * }} BackgroundMapStoreSlice
  */
 /**
  * @type {import('zustand').StateCreator<BackgroundMapStoreSlice>}
  */
-const backgroundMapStoreSlice = (set, get) => ({
-  mapStyle: null,
-  setMapStyle: mapStyle => set({ mapStyle })
-})
+const backgroundMapStoreSlice = (set, get) => {
+  return {
+    mapStyleLegacy: DEFAULT_MAP,
+    mapStyleMapServer: DEFAULT_MAP,
+    setMapStyleLegacy: mapStyle => set({ mapStyleLegacy: mapStyle }),
+    setMapStyleServer: mapStyle => set({ mapStyleMapServer: mapStyle })
+  }
+}
 
 /**
  * @typedef {{
@@ -86,7 +100,8 @@ export const useExperimentsFlagsStore = createPersistedStore(
   experimentsFlagsStoreSlice,
   'experiments-flags'
 )
-export const useBackgroundMapStore = createPersistedStore(
+
+const useBackgroundMapState = createPersistedStore(
   backgroundMapStoreSlice,
   'background-maps'
 )
@@ -94,3 +109,21 @@ export const usePersistedUiStore = createPersistedStore(
   persistedUiStoreSlice,
   'ui'
 )
+
+/**
+ *
+ * @returns {[MapStyle, (mapStyle: MapStyle) => void]}
+ */
+export const useBackgroundMapStore = () => {
+  const backgroundMapsEnabled = useExperimentsFlagsStore(
+    store => store.backgroundMaps
+  )
+
+  const [mapStyle, setMapStyle] = useBackgroundMapState(store =>
+    backgroundMapsEnabled
+      ? [store.mapStyleMapServer, store.setMapStyleServer]
+      : [store.mapStyleLegacy, store.setMapStyleLegacy]
+  )
+
+  return [mapStyle, setMapStyle]
+}
diff --git a/src/renderer/hooks/useMapStylesQuery.js b/src/renderer/hooks/useMapStylesQuery.js
index c7f8a7e4..9d1d47f5 100644
--- a/src/renderer/hooks/useMapStylesQuery.js
+++ b/src/renderer/hooks/useMapStylesQuery.js
@@ -18,6 +18,15 @@ const m = defineMessages({
   offlineBackgroundMapName: 'Offline Map'
 })
 
+export const DEFAULT_MAP = {
+  id: DEFAULT_MAP_ID,
+  url: ONLINE_STYLE_URL,
+  bytesStored: 0,
+  name: m.defaultBackgroundMapName,
+  isImporting: false,
+  isDefault: true
+}
+
 export const useMapStylesQuery = (enabled = true) => {
   const backgroundMapsEnabled = useExperimentsFlagsStore(
     store => store.backgroundMaps
@@ -30,19 +39,20 @@ export const useMapStylesQuery = (enabled = true) => {
     '/styles',
     backgroundMapsEnabled && enabled
   )
-  const defaultMapStyle = useDefaultMapStyle()
 
   const queryResult = backgroundMapsEnabled
     ? {
         data: [
-          defaultMapStyle,
+          DEFAULT_MAP,
           ...(mapStylesQueryResult?.data ? mapStylesQueryResult?.data : [])
         ],
         isLoading: mapStylesQueryResult.isLoading,
         refetch: mapStylesQueryResult.refetch
       }
     : {
-        data: legacyStyleQueryResult.data,
+        data: !legacyStyleQueryResult.data
+          ? [DEFAULT_MAP]
+          : legacyStyleQueryResult.data,
         isLoading: legacyStyleQueryResult.isLoading,
         refetch: legacyStyleQueryResult.refetch
       }
@@ -52,7 +62,6 @@ export const useMapStylesQuery = (enabled = true) => {
 
 const useLegacyMapStyleQuery = enabled => {
   const { formatMessage: t } = useIntl()
-  const defaultMapStyle = useDefaultMapStyle()
 
   const queryResult = useQuery({
     queryKey: ['getLegacyMapStyle'],
@@ -71,7 +80,7 @@ const useLegacyMapStyleQuery = enabled => {
           }
         ]
       } catch {
-        return [defaultMapStyle]
+        return [DEFAULT_MAP]
       }
     },
     enabled
@@ -79,16 +88,3 @@ const useLegacyMapStyleQuery = enabled => {
 
   return queryResult
 }
-
-const useDefaultMapStyle = () => {
-  const { formatMessage: t } = useIntl()
-
-  return {
-    id: DEFAULT_MAP_ID,
-    url: ONLINE_STYLE_URL,
-    bytesStored: 0,
-    name: t(m.defaultBackgroundMapName),
-    isImporting: false,
-    isDefault: true
-  }
-}