+ Lots of work was done but specifically within the GlobalMap.jsx

+ Two new component files were also added
+ Some slight adjustments to Theme.jsx

client/src/components/Canvas/views/GlobalMap.jsx

@@ -1,19 +1,23 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import MapButtonControls from "../CanvasComponents/MapButtonControls";
+import MapSettingsButton from "../CanvasComponents/MapSettingsButton";
 
 export default function GlobalMap() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
+
   return (
-      <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
-        <TileLayer
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          attribution='&copy; OpenStreetMap contributors'
-        />
-        <Marker position={position}>
-          <Popup>
-            CVO — Home of the volcanoligists
-          </Popup>
-        </Marker>
-      </MapContainer>
+    <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; OpenStreetMap contributors'
+      />
+      <MapButtonControls settingsBtn = {<MapSettingsButton />} position="topright" />
+      <Marker position={position}>
+        <Popup>
+          CVO — Home of the volcanoligists
+        </Popup>
+      </Marker>
+    </MapContainer>
   );
 }