diff --git a/app/src/frontend/config/map-config.ts b/app/src/frontend/config/map-config.ts
index fc818656..3f1b5683 100644
--- a/app/src/frontend/config/map-config.ts
+++ b/app/src/frontend/config/map-config.ts
@@ -4,4 +4,9 @@ export const defaultMapPosition = {
     zoom: 16
 };
 
-export type MapTheme = 'light' | 'night';
\ No newline at end of file
+export type MapTheme = 'light' | 'night';
+
+export const mapBackgroundColor: Record<MapTheme, string> = {
+    light: '#F0EEEB',
+    night: '#162639'
+};
diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index 32ed24d5..4216cf35 100644
--- a/app/src/frontend/map/map.tsx
+++ b/app/src/frontend/map/map.tsx
@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { AttributionControl, MapContainer, ZoomControl, useMapEvent, Pane } from 'react-leaflet';
+import React, { Component, Fragment, useEffect } from 'react';
+import { AttributionControl, MapContainer, ZoomControl, useMapEvent, Pane, useMap } from 'react-leaflet';
 
 import 'leaflet/dist/leaflet.css';
 import './map.css';
@@ -8,7 +8,7 @@ import { apiGet } from '../apiHelpers';
 import { HelpIcon } from '../components/icons';
 import { categoryMapsConfig } from '../config/category-maps-config';
 import { Category } from '../config/categories-config';
-import { defaultMapPosition, MapTheme } from '../config/map-config';
+import { defaultMapPosition, mapBackgroundColor, MapTheme } from '../config/map-config';
 import { Building } from '../models/building';
 
 import { CityBaseMapLayer } from './layers/city-base-map-layer';
@@ -97,13 +97,14 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
                     attributionControl={false}
                 >
                     <ClickHandler onClick={this.handleClick} />
+                    <MapBackgroundColor theme={this.state.theme} />
 
                     <Pane
                         key={this.state.theme}
                         name={'cc-base-pane'}
                         style={{zIndex: 50}}
                     >
-                        <CityBaseMapLayer theme={this.state.theme} />
+                        {/* <CityBaseMapLayer theme={this.state.theme} /> */} {/* temporarily disable the base map due to OS account issues */}
                         <BuildingBaseLayer theme={this.state.theme} />
                     </Pane>
 
@@ -158,4 +159,13 @@ function ClickHandler({ onClick }: {onClick: (e) => void}) {
     return null;
 }
 
+function MapBackgroundColor({ theme}: {theme: MapTheme}) {
+    const map = useMap();
+    useEffect(() => {
+        map.getContainer().style.backgroundColor = mapBackgroundColor[theme];
+    });
+
+    return null;
+}
+
 export default ColouringMap;