diff --git a/map-page.html b/map-page.html
index dbcb1bb..ead6d43 100644
--- a/map-page.html
+++ b/map-page.html
@@ -9,9 +9,466 @@
     <script src='https://unpkg.com/maplibre-gl@5.19.0/dist/maplibre-gl.js'></script>
     
     <style>
-         body { margin: 0; padding: 0; }
-         html, body, #map { height: 100%; }
-     </style>
+        body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
+        html, body, #map { height: 100%; }
+        
+        /* Sidebar Styles */
+        .app-container {
+            display: flex;
+            height: 100vh;
+        }
+        
+        .sidebar {
+            width: 300px;
+            background: #f8f9fa;
+            border-right: 1px solid #dee2e6;
+            padding: 20px;
+            transition: transform 0.3s ease;
+            overflow-y: auto;
+        }
+        
+        .sidebar.collapsed {
+            transform: translateX(-100%);
+        }
+        
+        .sidebar-header {
+            margin-bottom: 30px;
+            text-align: center;
+        }
+        
+        .sidebar-header h1 {
+            color: #3887be;
+            margin: 0;
+            font-size: 1.8rem;
+            font-weight: 600;
+        }
+        
+        .tagline {
+            color: #6c757d;
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+        
+        .mode-selector {
+            margin-bottom: 20px;
+        }
+        
+        .mode-btn {
+            width: 100%;
+            padding: 12px;
+            margin-bottom: 8px;
+            border: none;
+            border-radius: 8px;
+            background: #e9ecef;
+            color: #495057;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        
+        .mode-btn.active {
+            background: #3887be;
+            color: white;
+            box-shadow: 0 4px 6px rgba(56, 135, 190, 0.2);
+        }
+        
+        .mode-btn:hover {
+            background: #dee2e6;
+        }
+        
+        .panel {
+            display: none;
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        
+        .panel.active-panel {
+            display: block;
+        }
+        
+        .form-group {
+            margin-bottom: 15px;
+        }
+        
+        label {
+            display: block;
+            margin-bottom: 6px;
+            font-weight: 500;
+            color: #495057;
+            font-size: 0.9rem;
+        }
+        
+        input[type="text"], 
+        input[type="date"], 
+        textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ced4da;
+            border-radius: 6px;
+            font-size: 1rem;
+            transition: border-color 0.2s ease;
+        }
+        
+        input:focus, 
+        textarea:focus {
+            outline: none;
+            border-color: #3887be;
+            box-shadow: 0 0 0 2px rgba(56, 135, 190, 0.25);
+        }
+        
+        textarea {
+            height: 80px;
+            resize: vertical;
+        }
+        
+        .instructions {
+            background: #e9ecef;
+            padding: 15px;
+            border-radius: 6px;
+            margin-bottom: 20px;
+            font-size: 0.9rem;
+        }
+        
+        .instructions h4 {
+            margin-top: 0;
+            margin-bottom: 8px;
+            color: #3887be;
+        }
+        
+        .instructions ol {
+            margin: 0;
+            padding-left: 20px;
+        }
+        
+        .button-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        
+        .btn {
+            padding: 10px 15px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 1rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+        
+        .btn-primary {
+            background: #3887be;
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: #2c6d96;
+        }
+        
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+        
+        .btn-secondary:hover {
+            background: #5a6268;
+        }
+        
+        .btn-danger {
+            background: #dc3545;
+            color: white;
+        }
+        
+        .btn-danger:hover {
+            background: #c82333;
+        }
+        
+        .markers-list {
+            margin-top: 30px;
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        
+        .markers-list h3 {
+            margin-top: 0;
+            color: #3887be;
+            font-size: 1.2rem;
+            border-bottom: 1px solid #dee2e6;
+            padding-bottom: 8px;
+            margin-bottom: 15px;
+        }
+        
+        .marker-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: 6px;
+            margin-bottom: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+        
+        .marker-item:hover {
+            background: #e9ecef;
+        }
+        
+        .marker-title {
+            font-weight: 500;
+            color: #3887be;
+            flex: 1;
+        }
+        
+        .marker-coords {
+            font-size: 0.8rem;
+            color: #6c757d;
+            text-align: right;
+        }
+        
+        .empty-message {
+            text-align: center;
+            color: #6c757d;
+            font-style: italic;
+            padding: 20px;
+        }
+        
+        /* Map Controls */
+        .map-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 10;
+        }
+        
+        .control-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 5px;
+            background-color: white;
+            border: none;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            color: #2c3e50;
+            transition: all 0.2s ease;
+        }
+        
+        .control-btn:hover {
+            background-color: #f8f9fa;
+            transform: translateY(-2px);
+        }
+        
+        /* Mode Indicator */
+        .mode-indicator {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: rgba(255, 255, 255, 0.9);
+            padding: 10px 15px;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            z-index: 1;
+        }
+        
+        .indicator-text {
+            font-weight: 500;
+            color: #2c3e50;
+        }
+        
+        .indicator-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+        
+        .indicator-dot.creating {
+            background-color: #3498db;
+        }
+        
+        .indicator-dot.viewing {
+            background-color: #2ecc71;
+        }
+        
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 100;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .modal.active {
+            display: flex;
+        }
+        
+        .modal-content {
+            background-color: white;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+        }
+        
+        .modal-header {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .modal-header h3 {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #7f8c8d;
+        }
+        
+        .close-btn:hover {
+            color: #2c3e50;
+        }
+        
+        .modal-body {
+            padding: 20px;
+        }
+        
+        .image-upload-area {
+            border: 2px dashed #ddd;
+            border-radius: 5px;
+            padding: 15px;
+            margin-top: 5px;
+        }
+        
+        .image-preview {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 15px;
+            min-height: 60px;
+        }
+        
+        .upload-actions {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .help-text {
+            display: block;
+            margin-top: 5px;
+            color: #7f8c8d;
+            font-size: 0.85rem;
+        }
+        
+        .coordinates {
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            margin-top: 15px;
+        }
+        
+        .modal-footer {
+            padding: 15px 20px;
+            border-top: 1px solid #eee;
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+        }
+        
+        /* Toast */
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: #2ecc71;
+            color: white;
+            padding: 15px 20px;
+            border-radius: 5px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+            display: none;
+            z-index: 100;
+            animation: slideIn 0.3s ease;
+        }
+        
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: 0;
+                height: 100%;
+                transform: translateX(-100%);
+            }
+            
+            .sidebar.active {
+                transform: translateX(0);
+            }
+            
+            .app-container {
+                flex-direction: column;
+            }
+            
+            .map-controls {
+                top: auto;
+                bottom: 20px;
+                right: 20px;
+                flex-direction: row;
+            }
+            
+            .mode-indicator {
+                top: 10px;
+                left: 10px;
+                font-size: 0.9rem;
+            }
+        }
+    </style>
     
     <!-- Font Awesome Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -20,15 +477,10 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     
     <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/map.css">
-    
-    <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
 </head>
 <body>
     <!-- Main Container -->
     <div class="app-container">
-        
         <!-- Sidebar -->
         <aside class="sidebar">
             <!-- Header Section -->
@@ -91,25 +543,9 @@
                     <select id="journey-select">
                         <option value="">-- Choose a journey --</option>
                         <option value="all">Show All Journeys</option>
-                        <!-- Journeys will be populated by JavaScript -->
                     </select>
                 </div>
                 
-                <!-- Filter Options -->
-                <div class="filter-options">
-                    <h4><i class="fas fa-filter"></i> Filter Options</h4>
-                    <div class="checkbox-group">
-                        <label>
-                            <input type="checkbox" id="filter-markers" checked>
-                            Show Markers
-                        </label>
-                        <label>
-                            <input type="checkbox" id="filter-paths" checked>
-                            Show Paths
-                        </label>
-                    </div>
-                </div>
-                
                 <!-- Selected Journey Info -->
                 <div id="journey-info" class="journey-info">
                     <h4><i class="fas fa-info-circle"></i> Journey Details</h4>