diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index 52c4bdf..cc93d56 100644
--- a/src/app/observatories/page.tsx
+++ b/src/app/observatories/page.tsx
@@ -50,6 +50,7 @@ export default function Observatories() {
           setSelectedEventId={setSelectedEventId}
           hoveredEventId={hoveredEventId}
           setHoveredEventId={setHoveredEventId}
+          mapType="observatories"
         ></Map>
       </div>
       <Sidebar
diff --git a/src/components/map.tsx b/src/components/map.tsx
index b9adf53..523a006 100644
--- a/src/components/map.tsx
+++ b/src/components/map.tsx
@@ -5,6 +5,9 @@ import "mapbox-gl/dist/mapbox-gl.css";
 import { GiObservatory } from "react-icons/gi";
 import Event from "@appTypes/Event";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
+import { userAgentFromString } from "next/server";
+import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 interface MapComponentProps {
   events: Event[];
@@ -12,10 +15,11 @@ interface MapComponentProps {
   setSelectedEventId: Dispatch<SetStateAction<string>>;
   hoveredEventId: Event["id"];
   setHoveredEventId: Dispatch<SetStateAction<string>>;
+  mapType: String;
 }
 
 // Map component with location-style pulsing dots, animations, and tooltips
-function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId }: MapComponentProps) {
+function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId, mapType }: MapComponentProps) {
   const map = useRef<mapboxgl.Map | null>(null);
   const markers = useRef<{ [key: string]: mapboxgl.Marker }>({});
   const [mapBounds, setMapBounds] = useState<LngLatBounds>();
@@ -79,13 +83,13 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
         //<GiObservatory />
 
         // Create marker container
-        const markerElement = document.createElement("div");
-        markerElement.style.width = "50px"; // Increased size to accommodate pulse
-        markerElement.style.height = "50px";
-        markerElement.style.position = "absolute";
-        markerElement.style.display = "flex";
-        markerElement.style.alignItems = "center";
-        markerElement.style.justifyContent = "center";
+        const quakeElement = document.createElement("div");
+        quakeElement.style.width = "50px"; // Increased size to accommodate pulse
+        quakeElement.style.height = "50px";
+        quakeElement.style.position = "absolute";
+        quakeElement.style.display = "flex";
+        quakeElement.style.alignItems = "center";
+        quakeElement.style.justifyContent = "center";
 
         // Central dot
         const dotElement = document.createElement("div");
@@ -106,10 +110,19 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
         pulseElement.style.position = "absolute";
         pulseElement.style.zIndex = "1";
 
-        markerElement.appendChild(pulseElement);
-        markerElement.appendChild(dotElement);
+        // Observatory marker
+        const observatoryElement = document.createElement("div");
+        observatoryElement.style.fontSize = "24px"; // Adjust icon size
+        observatoryElement.style.color = "#FF5722"; // Set color
+        const root = createRoot(observatoryElement); // `createRoot` is now the standard API
+        root.render(
+          <GiObservatory style={{ fontSize: "24px", color: "#FF5722" }} />
+        );
 
-        const marker = new mapboxgl.Marker({ element: markerElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
+        quakeElement.appendChild(pulseElement);
+        quakeElement.appendChild(dotElement);
+
+        const marker = new mapboxgl.Marker({ element: mapType === "observatories"? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
 
         const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
           <div>
@@ -203,4 +216,4 @@ export default function Map(props: MapComponentProps) {
       <MapComponent {...props} />
     </>
   );
-}
+}
\ No newline at end of file