diff --git a/app/src/frontend/app.css b/app/src/frontend/app.css
index 6a79f995..4c090de8 100755
--- a/app/src/frontend/app.css
+++ b/app/src/frontend/app.css
@@ -1,4 +1,5 @@
 @import url('https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css');
+@import url('https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js');
 @import 'styles/colours.css';
 @import 'styles/content.css';
 @import 'styles/forms.css';
diff --git a/app/src/frontend/map/layers/city-base-map-layer.tsx b/app/src/frontend/map/layers/city-base-map-layer.tsx
index e3300894..43124a29 100644
--- a/app/src/frontend/map/layers/city-base-map-layer.tsx
+++ b/app/src/frontend/map/layers/city-base-map-layer.tsx
@@ -10,7 +10,7 @@ mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5O
 export function CityMap() {
   useEffect(() => {
     const map = new mapboxgl.Map({
-      container: 'leaflet-container', // container ID
+      container: 'map', // container ID
       style: 'mapbox://styles/mapbox/streets-v12', // style URL
       center: [-73.5801403, 45.4962261], // starting position [lng, lat]
       zoom: 15, // starting zoom