diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index 5f4c6db..5395f3e 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -55,7 +55,7 @@ import L from 'leaflet';
 import { useMapStore } from '../stores/map';
 import { Feature } from 'geojson';
 import { AreaProperties } from '../models/area_properties';
-import { AmenityType } from '../models/amenity_type';
+import { AmenityType, amenityIconClasses } from '../models/amenity_type';
 import { useI18n } from 'vue-i18n';
 
 const areaStyle: L.PathOptions = {
@@ -73,7 +73,6 @@ const travelTimeToColour = {
     10: '#abedab', //Light green
     5: '#5aabac', //Teal
     0: '#0868ac', //Blue
-
 };
 
 export default defineComponent({
@@ -144,10 +143,18 @@ export default defineComponent({
                     const properties = feature.properties as AreaProperties;
                     const distances = properties.distances[type];
                     if(distances) {
-                        const marker = L.marker({
+                        const pos: L.LatLngLiteral = {
                             lng: distances.pt.coordinates[0],
                             lat: distances.pt.coordinates[1]
-                        }).bindPopup('<a href="https://docs.google.com/forms/d/e/1FAIpQLSdAW14AmmplUH8iNPzhTJZ4UY-DW9OY9TR78C6_OIPYy2L7_g/viewform?usp=pp_url&entry.919457431=' + distances.pt.coordinates[1] + ','  + distances.pt.coordinates[0] + '">' + i18n.t('correction') + '</a>');
+                        };
+                        const options: L.MarkerOptions = {
+                            icon: L.divIcon({
+                                html: `<i class="fa-solid fa-${amenityIconClasses[type]} mapicon"></i>`,
+                                iconSize: [36, 36],
+                            })
+                        };
+                        const marker = L.marker(pos, options);
+                        marker.bindPopup(`<a href="https://docs.google.com/forms/d/e/1FAIpQLSdAW14AmmplUH8iNPzhTJZ4UY-DW9OY9TR78C6_OIPYy2L7_g/viewform?usp=pp_url&entry.919457431=${distances.pt.coordinates[1]},${distances.pt.coordinates[0]}">${i18n.t('correction')}</a>`);
                         markers.value.leafletObject.addLayer(marker);
                     }
                 }
@@ -264,4 +271,19 @@ path.leaflet-interactive:focus {
     text-decoration: none;
 }
 
+.leaflet-marker-icon {
+    background-color: rgba(0, 0, 0, 0.4);
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 18px;
+}
+
+.mapicon {
+    color: white;
+    display: block;
+    font-size: 20px;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/TypeFilter.vue b/src/components/TypeFilter.vue
index 742d256..2c0287b 100644
--- a/src/components/TypeFilter.vue
+++ b/src/components/TypeFilter.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { AmenityType, defaultAmenityType } from '../models/amenity_type';
+import { AmenityType, defaultAmenityType, amenityIconClasses } from '../models/amenity_type';
 import vSelect from 'vue-select';
 import { useI18n } from 'vue-i18n';
 
@@ -70,19 +70,6 @@ export default defineComponent({
     }
 });
 
-const amenityIconClasses: { [type in AmenityType]: string } = {
-    [AmenityType.Clinic]: 'house-medical',
-    [AmenityType.Daycare]: 'child-reaching',
-    [AmenityType.FoodStore]: 'carrot',
-    [AmenityType.Library]: 'book',
-    [AmenityType.MetroStation]: 'train-subway',
-    [AmenityType.Park]: 'tree',
-    [AmenityType.Pharmacy]: 'pills',
-    [AmenityType.Restaurant]: 'mug-saucer',
-    [AmenityType.PrimarySchool]: 'school',
-    [AmenityType.SecondarySchool]: 'graduation-cap'
-};
-
 </script>
 
 <style scoped>
diff --git a/src/models/amenity_type.ts b/src/models/amenity_type.ts
index 97ea79f..ccabb41 100644
--- a/src/models/amenity_type.ts
+++ b/src/models/amenity_type.ts
@@ -11,4 +11,17 @@ export enum AmenityType {
     SecondarySchool= 'secondary_school'
 }
 
+export const amenityIconClasses: { [type in AmenityType]: string } = {
+    [AmenityType.Clinic]: 'house-medical',
+    [AmenityType.Daycare]: 'child-reaching',
+    [AmenityType.FoodStore]: 'carrot',
+    [AmenityType.Library]: 'book',
+    [AmenityType.MetroStation]: 'train-subway',
+    [AmenityType.Park]: 'tree',
+    [AmenityType.Pharmacy]: 'pills',
+    [AmenityType.Restaurant]: 'mug-saucer',
+    [AmenityType.PrimarySchool]: 'school',
+    [AmenityType.SecondarySchool]: 'graduation-cap'
+};
+
 export const defaultAmenityType = AmenityType.FoodStore;
\ No newline at end of file