diff --git a/css/map.css b/css/map.css
index ac92d19..2c516ff 100644
--- a/css/map.css
+++ b/css/map.css
@@ -4,8 +4,20 @@
 .app-container {
     display: flex;
     height: 100vh;
-    overflow: hidden; /* Add this to prevent scrollbars */
-    font-family: 'Poppins', sans-serif;
+    overflow: hidden;
+}
+
+.sidebar {
+    width: 300px;
+    min-width: 300px;
+    background-color: #253342;
+    color: white;
+    padding: 20px;
+}
+
+.map-area {
+    flex: 1;
+    width: calc(100% - 300px);
 }
 
 #map {
diff --git a/map.html b/map.html
index 56bba6b..1cf10b6 100644
--- a/map.html
+++ b/map.html
@@ -20,314 +20,61 @@
 map.html
 ```html
 <<<<<<< SEARCH
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Journey Mapper</title>
+    
+    <!-- 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">
+</head>
 <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>
+    <div class="app-container">
+        <div class="sidebar">
+            <div class="journey-panel">
+                <h3><i class="fas fa-route"></i> Journey Manager</h3>
+                
+                <!-- Journey Form -->
+                <form id="journey-form" 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>
+                </form>
 
-            <!-- 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>
+                <!-- Markers List -->
+                <h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
+                <div id="markers-container" class="markers-list">
+                    <!-- 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>
+                <!-- 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>
+
+        <!-- Map container -->
+        <div id="map" class="map-area"></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">
-            <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>
+    <!-- Custom JavaScript -->
+    <script src="js/main.js"></script>
 </body>
 </html>
