diff --git a/js/map.js b/js/map.js
index 6042261..f33422f 100644
--- a/js/map.js
+++ b/js/map.js
@@ -1,84 +1,117 @@
 // /Volumes/Data/Code/FHGR/Frontend/js/map.js
 // Add the createMarker function to the window object
 window.createMarker = function(lngLat, content = {}) {
-  const marker = new maplibregl.Marker({
-    color: '#3887be',
-    draggable: true
-  })
-  .setLngLat(lngLat)
-  .addTo(map);
+    const marker = new maplibregl.Marker({
+        color: '#3887be',
+        draggable: true
+    })
+    .setLngLat(lngLat)
+    .addTo(map);
 
-  // Create popup with marker content
-  const popup = new maplibregl.Popup({ offset: 25 })
-    .setHTML(`<strong>${content.title || 'Untitled'}</strong>`);
-  
-  marker.setPopup(popup);
+    // Create popup with marker content
+    const popup = new maplibregl.Popup({ offset: 25 })
+        .setHTML(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
+    
+    marker.setPopup(popup);
 
-  // When the marker is clicked, open the editor
-  marker.getElement().addEventListener('click', () => {
-    openMarkerEditor(marker);
-  });
+    // When the marker is clicked, open the editor
+    marker.on('click', () => {
+        openMarkerEditor(marker);
+    });
 
-  // Add marker to current journey
-  const markerData = {
-    id: Date.now(),
-    lngLat: lngLat.toArray(),
-    content: content
-  };
+    // Add marker to current journey
+    const markerData = {
+        id: Date.now(),
+        lngLat: lngLat.toArray(),
+        content: content,
+        coordinates: [lngLat.lat, lngLat.lng]
+    };
 
-  // Add marker to current journey
-  currentJourney.markers.push(marker);
-  updateJourneyPath();
-  
-  // Add marker to the markers list
-  const markersContainer = document.getElementById('markers-container');
-  const markerElement = document.createElement('div');
-  markerElement.className = 'marker-item';
-  markerElement.innerHTML = `
-    <div class="marker-title">${content.title || 'Untitled'}</div>
-    <div class="marker-coords">${lngLat.lng.toFixed(4)}, ${lngLat.lat.toFixed(4)}</div>
-  `;
-  
-  // Add click event to marker item
-  markerElement.addEventListener('click', function() {
-    // Center map on marker
-    map.flyTo({
-      center: lngLat,
-      zoom: 10
+    if (!currentJourney.markers) currentJourney.markers = [];
+    currentJourney.markers.push(marker);
+    
+    updateJourneyPath();
+    
+    // Add marker to the markers list
+    const markersContainer = document.getElementById('markers-container');
+    const markerElement = document.createElement('div');
+    markerElement.className = 'marker-item';
+    markerElement.innerHTML = `
+        <div class="marker-title">${content.title || 'Untitled'}</div>
+        <div class="marker-coords">${lngLat.lng.toFixed(4)}, ${lngLat.lat.toFixed(4)}</div>
+    `;
+    
+    // Add click event to marker item
+    markerElement.addEventListener('click', function() {
+        map.flyTo({
+            center: [lngLat.lng, lngLat.lat],
+            zoom: 10
+        });
+        openMarkerEditor(marker);
     });
     
-    // Open marker editor
-    openMarkerEditor(marker);
-  });
-  
-  markersContainer.appendChild(markerElement);
-  
-  return marker;
+    if (markersContainer.children.length === 1 && 
+        markersContainer.firstElementChild.id === 'empty-markers') {
+        markersContainer.removeChild(markersContainer.firstElementChild);
+    }
+    markersContainer.appendChild(markerElement);
+    
+    return marker;
 };
 
 // Update the updateJourneyPath function to handle cases where markers array is empty
 function updateJourneyPath() {
-  if (!currentJourney.markers || currentJourney.markers.length === 0) {
-    // If no markers, clear the path
-    map.getSource('journey-path').setData({
-      type: 'Feature',
-      properties: {},
-      geometry: {
-        type: 'LineString',
-        coordinates: []
-      }
-    });
-    return;
-  }
-  
-  const coordinates = currentJourney.markers.map(marker => marker.getLngLat().toArray());
-  
-  map.getSource('journey-path').setData({
-    type: 'Feature',
-    properties: {},
-    geometry: {
-      type: 'LineString',
-      coordinates: coordinates
+    if (!map.getSource('journey-path')) {
+        map.addSource('journey-path', {
+            type: 'geojson',
+            data: {
+                type: 'Feature',
+                properties: {},
+                geometry: {
+                    type: 'LineString',
+                    coordinates: []
+                }
+            }
+        });
+        
+        map.addLayer({
+            id: 'journey-path',
+            type: 'line',
+            source: 'journey-path',
+            layout: {
+                'line-join': 'round',
+                'line-cap': 'round'
+            },
+            paint: {
+                'line-color': '#3887be',
+                'line-width': 4
+            }
+        });
     }
-  });
+
+    if (currentJourney.markers.length === 0) {
+        map.getSource('journey-path').setData({
+            type: 'Feature',
+            properties: {},
+            geometry: {
+                type: 'LineString',
+                coordinates: []
+            }
+        });
+        return;
+    }
+    
+    const coordinates = currentJourney.markers.map(marker => [
+        marker.getLngLat().lng,
+        marker.getLngLat().lat
+    ]);
+    
+    map.getSource('journey-path').setData({
+        type: 'Feature',
+        properties: {},
+        geometry: {
+            type: 'LineString',
+            coordinates: coordinates
+        }
+    });
 }