diff --git a/css/map.css b/css/map.css
index 58e3783..ac92d19 100644
--- a/css/map.css
+++ b/css/map.css
@@ -8,20 +8,13 @@
     font-family: 'Poppins', sans-serif;
 }
 
-/* Sidebar Styles */
-.sidebar {
-    width: 350px;
-    background-color: #2c3e50;
-    color: #ecf0f1;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+#map {
+    width: 100%;
+    height: 100vh;
 }
 
-/* Map Area */
 .map-area {
     flex: 1;
-    position: relative;
 }
 
 .sidebar-header {
diff --git a/map.html b/map.html
index 39faa6d..56bba6b 100644
--- a/map.html
+++ b/map.html
@@ -8,55 +8,173 @@
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/map.css">
+    
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            height: 100vh;
-            display: flex;
-        }
-
-        #map {
-            flex: 1;
-            height: 100%;
-        }
-
-        .sidebar {
-            width: 300px;
-            background: #f8f9fa;
-            padding: 20px;
-            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-            overflow-y: auto;
-        }
-
-        .map-controls {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            display: flex;
-            gap: 10px;
-            z-index: 1000;
-        }
-
-        .btn {
-            padding: 8px 12px;
-            border: none;
-            border-radius: 4px;
-            background: #3887be;
-            color: white;
-            cursor: pointer;
-            font-family: Arial, sans-serif;
-        }
-
-        .btn:hover {
-            background: #2c6d95;
-        }
+        /* Your existing inline styles... */
     </style>
 </head>
+```
+
+map.html
+```html
+<<<<<<< SEARCH
+<body>
+    <div class="sidebar">
+        <div class="journey-panel">
+            <h3><i class="fas fa-route"></i> Journey Manager</h3>
+        
+            <!-- Journey Form -->
+            <div class="journey-form">
+                <div class="form-group">
+                    <label for="journey-name"><i class="fas fa-heading"></i> Journey Name:</label>
+                    <input type="text" id="journey-name" required>
+                </div>
+            
+                <div class="form-group">
+                    <label for="journey-desc"><i class="fas fa-align-left"></i> Description:</label>
+                    <textarea id="journey-desc"></textarea>
+                </div>
+            </div>
+
+            <!-- Markers List -->
+            <h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
+            <div id="markers-list" class="markers-container">
+                <!-- Markers will be added here -->
+            </div>
+
+            <!-- Buttons -->
+            <div class="button-group">
+                <button id="add-marker" class="btn btn-primary"><i class="fas fa-plus"></i> Add Marker</button>
+                <button id="save-journey" class="btn btn-success"><i class="fas fa-save"></i> Save Journey</button>
+                <button id="clear-markers" class="btn btn-danger"><i class="fas fa-trash"></i> Clear Markers</button>
+            </div>
+        </div>
+    </div>
+    
+    <div id="map"></div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    
+    <script>
+        // Initialize the map
+        const map = L.map('map').setView([8.5, 47.3], 10);
+        
+        // Add tile layer
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+
+        let currentJourney = {
+            markers: []
+        };
+
+        updateMarkersList(); // Call the new function to update the list
+
+        // Add controls
+        const controls = document.createElement('div');
+        controls.className = 'map-controls';
+        
+        // Zoom controls
+        const zoomInBtn = document.createElement('button');
+        zoomInBtn.className = 'btn';
+        zoomInBtn.innerHTML = '+';
+        zoomInBtn.addEventListener('click', () => map.zoomIn());
+        
+        const zoomOutBtn = document.createElement('button');
+        zoomOutBtn.className = 'btn';
+        zoomOutBtn.innerHTML = '-';
+        zoomOutBtn.addEventListener('click', () => map.zoomOut());
+        
+        controls.appendChild(zoomInBtn);
+        controls.appendChild(zoomOutBtn);
+        
+        document.body.appendChild(controls);
+
+        // Add geolocation control
+        const locateBtn = document.createElement('button');
+        locateBtn.className = 'btn';
+        locateBtn.innerHTML = '📍';
+        locateBtn.addEventListener('click', () => {
+            map.locate({setView: true});
+        });
+        
+        controls.appendChild(locateBtn);
+
+        // Marker functionality
+        let currentJourney = {
+            markers: []
+        };
+        
+        document.getElementById('add-marker').addEventListener('click', () => {
+            map.on('click', function(e) {
+                const marker = L.marker(e.latlng, {draggable: true}).addTo(map);
+        
+                marker.bindPopup('<input type="text" placeholder="Enter title">');
+        
+                currentJourney.markers.push(marker);
+        
+                updateMarkersList(); // Call the new function to update the list
+            });
+        });
+
+        document.getElementById('clear-markers').addEventListener('click', () => {
+            map.eachLayer(function(layer) {
+                if (layer instanceof L.Marker) {
+                    map.removeLayer(layer);
+                }
+            });
+            currentJourney.markers = [];
+            updateMarkersList(); // Call the new function to update the list
+        });
+
+        function updateMarkersList() {
+            const markersContainer = document.getElementById('markers-container');
+            markersContainer.innerHTML = '';
+    
+            if (currentJourney.markers.length === 0) {
+                markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
+                return;
+            }
+
+            currentJourney.markers.forEach((marker, index) => {
+                const markerElement = document.createElement('div');
+                markerElement.className = 'marker-item';
+                markerElement.innerHTML = `
+                    <strong>${index + 1}</strong>
+                    ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}
+                `;
+        
+                // Add click handler to zoom to marker
+                markerElement.addEventListener('click', () => {
+                    map.flyTo({
+                        center: [marker.getLatLng().lat, marker.getLatLng().lng],
+                        zoom: 10
+                    });
+                });
+        
+                markersContainer.appendChild(markerElement);
+            });
+        }
+
+        // Initialize with some basic markers
+        map.on('ready', () => {
+            const initialMarkers = [
+                [8.5, 47.3],
+                [48.8566, 2.3522]
+            ];
+
+            initialMarkers.forEach(lngLat => {
+                const marker = L.marker(lngLat).addTo(map);
+                markers.push(marker);
+            });
+
+            updateMarkerList();
+        });
+    </script>
+</body>
 <body>
     <div class="sidebar">
         <div class="journey-panel">
