diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 6916df5..eaff3f6 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -20,7 +20,7 @@ import MapGl from "react-map-gl/maplibre";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
-  const { rasterSources } = useAppStore();
+  const { rasterSources, darkMode } = useAppStore();
   const { default: map } = useMap();
 
   const [zoom, setZoom] = useState(0);
@@ -128,6 +128,7 @@ export const MapPage = (): JSX.Element => {
           attributionControl={false}
           renderWorldCopies={false}
           maxPitch={0}
+          style = {{filter: darkMode ? 'brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7)' : ''}}
           dragRotate={false}
           touchZoomRotate={false}
           initialViewState={{
@@ -160,6 +161,7 @@ export const MapPage = (): JSX.Element => {
                   key={node.num}
                   longitude={node.position.longitudeI / 1e7}
                   latitude={node.position.latitudeI / 1e7}
+                  style = {{filter: darkMode ? 'invert(1)' : ''}}
                   anchor="bottom"
                 >
                   <div