diff --git a/src/components/MapPage.vue b/src/components/MapPage.vue
index 2476f2a..e86fd54 100644
--- a/src/components/MapPage.vue
+++ b/src/components/MapPage.vue
@@ -6,8 +6,10 @@
         <i class="fas fa-sliders-h"></i> Filters
       </button>
       <div id="map" class="h-100"></div>
-      <Loader v-if="loadingObservations" />
-      <div class="map-legend" v-if="map">
+      <div class="loading-screen" v-if="loadingObservations">
+        Observaties laden...
+      </div>
+      <div class="map-legend" v-if="map && !loadingObservations">
         <div>
           <span class="legend-icon bg-reported"></span> Gerapporteerd
         </div>
@@ -43,14 +45,12 @@ import { useRouter } from 'vue-router';
 import FilterComponent from './FilterComponent.vue';
 import NavbarComponent from './NavbarComponent.vue';
 import ObservationDetailsComponent from './ObservationDetailsComponent.vue';
-import Loader from './Loader.vue';
 
 export default {
   components: {
     NavbarComponent,
     FilterComponent,
     ObservationDetailsComponent,
-    Loader,
   },
   setup() {
     const vespaStore = useVespaStore();
@@ -142,6 +142,7 @@ export default {
       },
       { deep: true }
     );
+
     onMounted(async () => {
       vespaStore.markerClusterGroup = L.markerClusterGroup({
         spiderfyOnMaxZoom: false,
@@ -225,3 +226,19 @@ export default {
   },
 };
 </script>
+
+<style>
+.loading-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  z-index: 1000;
+}
+</style>
diff --git a/src/components/ObservationDetailsComponent.vue b/src/components/ObservationDetailsComponent.vue
index b6689d7..1b6318a 100644
--- a/src/components/ObservationDetailsComponent.vue
+++ b/src/components/ObservationDetailsComponent.vue
@@ -486,23 +486,6 @@ export default {
             }).format(date);
         };
 
-        const formatDateTime = (isoString, defaultValue = "") => {
-            if (!isoString) {
-                return defaultValue;
-            }
-            const date = new Date(isoString);
-            if (isNaN(date.getTime())) {
-                return defaultValue;
-            }
-            return new Intl.DateTimeFormat('nl-NL', {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit'
-            }).format(date);
-        };
-
         const formatToDatetimeLocal = (isoString) => {
             if (!isoString) return '';
             const date = new Date(isoString);
@@ -601,8 +584,6 @@ export default {
             if (!vespaStore.user.personal_data_access) {
                 return false;
             }
-            console.log('user municipalities:', vespaStore.user.municipalities);
-            console.log('observation municipality:', selectedObservation.value?.municipality_name);
             const userMunicipalities = vespaStore.user.municipalities;
             const observationMunicipality = selectedObservation.value?.municipality_name;
             return userMunicipalities.includes(observationMunicipality);
diff --git a/src/stores/vespaStore.js b/src/stores/vespaStore.js
index c288eff..4ffaf45 100644
--- a/src/stores/vespaStore.js
+++ b/src/stores/vespaStore.js
@@ -74,7 +74,7 @@ export const useVespaStore = defineStore('vespaStore', {
             }
         },
         async getObservationsGeoJson() {
-            this.loading = true;
+            this.loadingObservations = true;
             let filterQuery = this.createFilterQuery();
             if (!this.filters.min_observation_date && !this.isLoggedIn) {
                 const defaultMinDate = new Date('April 1, 2021').toISOString();
@@ -92,7 +92,7 @@ export const useVespaStore = defineStore('vespaStore', {
                 console.error('Error fetching observations:', error.message);
                 this.error = error.message || 'Failed to fetch observations';
             } finally {
-                this.loading = false;
+                this.loadingObservations = false;
             }
         },
         createFilterQuery() {
@@ -173,22 +173,22 @@ export const useVespaStore = defineStore('vespaStore', {
         createCircleMarker(feature, latlng) {
             let fillColor = "rgba(var(--bs-dark-rgb))"; // Default for reported
             if (feature.properties.status === "eradicated") {
-              fillColor = "rgba(var(--bs-success-rgb))"; // Green for eradicated
+                fillColor = "rgba(var(--bs-success-rgb))"; // Green for eradicated
             } else if (feature.properties.status === "reserved") {
-              fillColor = "rgba(var(--bs-warning-rgb))"; // Yellow for reserved
+                fillColor = "rgba(var(--bs-warning-rgb))"; // Yellow for reserved
             }
             let markerOptions = {
-              radius: 10 + (feature.properties.observations_count || 0) * 0.5,
-              fillColor: fillColor,
-              color: "#3c3c3c",
-              weight: 1,
-              opacity: 1,
-              fillOpacity: 0.8,
-              className: feature.properties.id === this.selectedObservation?.id ? 'active-marker' : ''
+                radius: 10 + (feature.properties.observations_count || 0) * 0.5,
+                fillColor: fillColor,
+                color: "#3c3c3c",
+                weight: 1,
+                opacity: 1,
+                fillOpacity: 0.8,
+                className: feature.properties.id === this.selectedObservation?.id ? 'active-marker' : ''
             };
             const marker = L.circleMarker(latlng, markerOptions);
             return marker;
-          },
+        },
         async reserveObservation(observation) {
             if (this.user.reservation_count < 50) {
                 const response = await ApiService.patch(`/observations/${observation.id}/`, {