diff --git a/frontend/src/components/Map/MapEvents.tsx b/frontend/src/components/Map/MapEvents.tsx
index c7e0aba..b401116 100644
--- a/frontend/src/components/Map/MapEvents.tsx
+++ b/frontend/src/components/Map/MapEvents.tsx
@@ -29,7 +29,8 @@ export function MapEvents() {
     document
       .querySelectorAll('.marker-svg')
       .forEach((el) => {
-        el.setAttribute('style', `opacity: ${markerOpacity}`);
+        el.className = el.className.replace(/opacity-\d+/, '');
+        el.classList.add(`opacity-${markerOpacity * 100}`);
       });
   }, [markerOpacity]);
 
diff --git a/frontend/src/components/Map/MapWrapper.scss b/frontend/src/components/Map/MapWrapper.scss
index f47cf2e..b40108c 100644
--- a/frontend/src/components/Map/MapWrapper.scss
+++ b/frontend/src/components/Map/MapWrapper.scss
@@ -70,3 +70,9 @@
 img.selected {
   filter: drop-shadow(0 6px 6px #000);
 }
+
+@for $i from 0 through 20 {
+  .opacity-#{$i * 5} {
+    opacity: #{$i * 0.05};
+  }
+}
\ No newline at end of file