diff --git a/backend/data/users.json b/backend/data/users.json
new file mode 100644
index 0000000..537b8d6
--- /dev/null
+++ b/backend/data/users.json
@@ -0,0 +1,8 @@
+[
+  {
+    "id": 1,
+    "username": "josh",
+    "password_hash": "scrypt:32768:8:1$HA70PiOwbBrIwlDq$2ab80bdc08bb3bb4214258566aded836062323380491a7f4c7f2e67bdccb8686367789f57b3c6c5eb3e2f08c8c07186f47f9c89d1e72179ddd3758b509f23fbe",
+    "created_at": "2026-03-27T20:32:43.107028"
+  }
+]
\ No newline at end of file
diff --git a/backend/data/users/1/journeys.json b/backend/data/users/1/journeys.json
new file mode 100644
index 0000000..0637a08
--- /dev/null
+++ b/backend/data/users/1/journeys.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/backend/data/users/1/posts.json b/backend/data/users/1/posts.json
new file mode 100644
index 0000000..0637a08
--- /dev/null
+++ b/backend/data/users/1/posts.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/blog-list.html b/blog-list.html
index 6727027..556e42b 100644
--- a/blog-list.html
+++ b/blog-list.html
@@ -12,7 +12,7 @@
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
-    <!-- Google Fonts: Poppins -->
+    <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
     <style>
@@ -28,7 +28,7 @@
             min-height: 100vh;
         }
 
-        /* Header (same as map page) */
+        /* Header */
         .site-header {
             background: var(--gray-9);
             padding: var(--size-4) var(--size-6);
@@ -70,6 +70,31 @@
             background: var(--surface-2);
         }
 
+        /* User menu */
+        .user-menu {
+            display: flex;
+            align-items: center;
+            gap: var(--size-2);
+        }
+        .user-menu .username {
+            color: var(--gray-2);
+            font-weight: var(--font-weight-5);
+        }
+        .logout-btn {
+            background: var(--indigo-7);
+            color: white;
+            border: none;
+            border-radius: var(--radius-2);
+            padding: var(--size-1) var(--size-3);
+            cursor: pointer;
+            font-size: var(--font-size-1);
+            font-weight: var(--font-weight-5);
+            transition: background 0.2s;
+        }
+        .logout-btn:hover {
+            background: var(--indigo-8);
+        }
+
         /* Main content */
         .blog-container {
             max-width: 1200px;
@@ -157,35 +182,104 @@
             padding: var(--size-8);
             font-style: italic;
         }
+        .toast {
+            position: fixed;
+            bottom: var(--size-4);
+            right: var(--size-4);
+            background: var(--green-7);
+            color: white;
+            padding: var(--size-2) var(--size-4);
+            border-radius: var(--radius-2);
+            display: none;
+            z-index: 1100;
+        }
     </style>
 </head>
 <body>
     <header class="site-header">
         <div class="container">
             <h1 class="site-title"><a href="map-page.html">Journey Mapper</a></h1>
-            <nav class="site-nav">
-                <a href="map-page.html">Map</a>
-                <a href="blog-list.html" class="active">Blog</a>
-            </nav>
+            <div style="display: flex; align-items: center; gap: var(--size-4);">
+                <nav class="site-nav">
+                    <a href="map-page.html">Map</a>
+                    <a href="blog-list.html" class="active">Blog</a>
+                </nav>
+                <div class="user-menu" id="user-menu"></div>
+            </div>
         </div>
     </header>
 
     <main class="blog-container">
         <div class="blog-header">
             <h1><i class="fas fa-newspaper"></i> Blog Posts</h1>
-            <a href="blog-post.html?new" class="btn"><i class="fas fa-plus"></i> New Post</a>
+            <a href="blog-post-edit.html?new" class="btn"><i class="fas fa-plus"></i> New Post</a>
         </div>
         <div id="posts-grid" class="posts-grid">
             <!-- Posts loaded dynamically -->
         </div>
     </main>
 
-    <script>
-        const API_BASE = 'http://127.0.0.1:5000/api';
+    <div id="toast" class="toast"></div>
 
+    <script>
+        // ==================== AUTH ====================
+        const API_BASE = 'http://127.0.0.1:5000/api';
+        let currentUser = null;
+
+        async function checkAuthAndRedirect() {
+            try {
+                const res = await fetch(`${API_BASE}/me`, { credentials: 'include' });
+                if (res.ok) {
+                    currentUser = await res.json();
+                    return true;
+                } else {
+                    window.location.href = 'login.html';
+                    return false;
+                }
+            } catch (err) {
+                window.location.href = 'login.html';
+                return false;
+            }
+        }
+
+        function updateUserMenu() {
+            const container = document.getElementById('user-menu');
+            if (currentUser) {
+                container.innerHTML = `
+                    <span class="username"><i class="fas fa-user"></i> ${escapeHtml(currentUser.username)}</span>
+                    <button id="logout-btn" class="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</button>
+                `;
+                document.getElementById('logout-btn')?.addEventListener('click', logout);
+            }
+        }
+
+        async function logout() {
+            await fetch(`${API_BASE}/logout`, { method: 'POST', credentials: 'include' });
+            window.location.href = 'login.html';
+        }
+
+        function escapeHtml(str) {
+            if (!str) return '';
+            return str.replace(/[&<>]/g, function(m) {
+                if (m === '&') return '&amp;';
+                if (m === '<') return '&lt;';
+                if (m === '>') return '&gt;';
+                return m;
+            });
+        }
+
+        function showToast(msg, isError = false) {
+            const toast = document.getElementById('toast');
+            toast.textContent = msg;
+            toast.style.backgroundColor = isError ? 'var(--red-7)' : 'var(--green-7)';
+            toast.style.display = 'block';
+            setTimeout(() => { toast.style.display = 'none'; }, 3000);
+        }
+
+        // ==================== BLOG POSTS ====================
         async function loadPosts() {
             try {
-                const res = await fetch(`${API_BASE}/blog-posts`);
+                const res = await fetch(`${API_BASE}/blog-posts`, { credentials: 'include' });
                 if (!res.ok) throw new Error('Failed to fetch posts');
                 const posts = await res.json();
                 renderPosts(posts);
@@ -206,7 +300,7 @@
                 <article class="post-card">
                     ${post.image ? `<img class="post-card-image" src="${post.image}" alt="${post.title}">` : '<div class="post-card-image" style="background: var(--surface-3); display: flex; align-items: center; justify-content: center;"><i class="fas fa-image" style="font-size: 3rem; color: var(--gray-5);"></i></div>'}
                     <div class="post-card-content">
-                        <h2 class="post-card-title"><a href="blog-post.html?id=${post.id}">${escapeHtml(post.title)}</a></h2>
+                        <h2 class="post-card-title"><a href="blog-post-edit.html?id=${post.id}">${escapeHtml(post.title)}</a></h2>
                         <div class="post-card-meta">
                             <i class="fas fa-calendar-alt"></i> ${new Date(post.created_at).toLocaleDateString()}
                             ${post.journeyId ? `<span style="margin-left: 12px;"><i class="fas fa-route"></i> Journey #${post.journeyId}</span>` : ''}
@@ -217,17 +311,13 @@
             `).join('');
         }
 
-        function escapeHtml(str) {
-            if (!str) return '';
-            return str.replace(/[&<>]/g, function(m) {
-                if (m === '&') return '&amp;';
-                if (m === '<') return '&lt;';
-                if (m === '>') return '&gt;';
-                return m;
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', loadPosts);
+        // ==================== INITIALIZATION ====================
+        document.addEventListener('DOMContentLoaded', async () => {
+            const authenticated = await checkAuthAndRedirect();
+            if (!authenticated) return;
+            updateUserMenu();
+            loadPosts();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/blog-page.html b/blog-page.html
deleted file mode 100644
index 3bdf1d3..0000000
--- a/blog-page.html
+++ /dev/null
@@ -1,370 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blog Post – Journey Mapper</title>
-
-    <!-- Open Props CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/open-props"/>
-    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
-
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
-    <!-- Google Fonts: Poppins (matching map page) -->
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
-    <style>
-        /* ===== GLOBAL RESET USING OPEN PROPS ===== */
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: var(--font-sans);
-            background: var(--gray-0);
-            color: var(--gray-9);
-            line-height: var(--font-lineheight-3);
-        }
-
-        /* ===== HEADER ===== */
-        .site-header {
-            background: var(--gray-9);
-            padding: var(--size-4) var(--size-6);
-            border-bottom: 1px solid var(--surface-4);
-        }
-        .site-header .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: var(--size-2);
-        }
-        .site-title {
-            margin: 0;
-            font-size: var(--font-size-4);
-            font-weight: var(--font-weight-6);
-        }
-        .site-title a {
-            color: var(--indigo-4);
-            text-decoration: none;
-        }
-        .site-nav {
-            display: flex;
-            gap: var(--size-4);
-        }
-        .site-nav a {
-            color: var(--gray-2);
-            text-decoration: none;
-            font-weight: var(--font-weight-5);
-            transition: color 0.2s;
-        }
-        .site-nav a:hover {
-            color: var(--indigo-4);
-        }
-
-        /* ===== MAIN LAYOUT (two‑column) ===== */
-        .post-page {
-            display: flex;
-            flex-direction: column;
-            gap: var(--size-6);
-            padding: var(--size-6) var(--size-4);
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        .post {
-            background: var(--surface-1);
-            border-radius: var(--radius-3);
-            padding: var(--size-6);
-            box-shadow: var(--shadow-2);
-        }
-
-        .post-title {
-            font-size: var(--font-size-6);
-            font-weight: var(--font-weight-7);
-            margin: 0 0 var(--size-2) 0;
-            color: var(--gray-9);
-        }
-
-        .post-meta {
-            color: var(--gray-6);
-            font-size: var(--font-size-1);
-            margin-bottom: var(--size-4);
-            border-bottom: 1px solid var(--surface-4);
-            padding-bottom: var(--size-2);
-        }
-
-        .post-hero {
-            margin: var(--size-4) 0;
-        }
-        .post-hero img {
-            width: 100%;
-            height: auto;
-            border-radius: var(--radius-2);
-            object-fit: cover;
-        }
-
-        .post-content {
-            line-height: var(--font-lineheight-4);
-            color: var(--gray-7);
-        }
-        .post-content p {
-            margin-bottom: var(--size-4);
-        }
-
-        /* Sidebar */
-        .sidebar {
-            background: var(--surface-1);
-            border-radius: var(--radius-3);
-            padding: var(--size-4);
-            box-shadow: var(--shadow-2);
-        }
-        .sidebar section {
-            margin-bottom: var(--size-6);
-        }
-        .sidebar h3 {
-            font-size: var(--font-size-3);
-            margin-top: 0;
-            margin-bottom: var(--size-3);
-            color: var(--indigo-7);
-            border-left: 3px solid var(--indigo-6);
-            padding-left: var(--size-2);
-        }
-
-        /* Posts list */
-        #posts-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--size-3);
-        }
-        .post-preview {
-            background: var(--surface-2);
-            border-radius: var(--radius-2);
-            padding: var(--size-3);
-            transition: background 0.2s;
-            cursor: pointer;
-        }
-        .post-preview:hover {
-            background: var(--surface-3);
-        }
-        .post-preview-title {
-            font-weight: var(--font-weight-6);
-            color: var(--gray-9);
-            margin: 0 0 var(--size-1) 0;
-        }
-        .post-preview-meta {
-            font-size: var(--font-size-0);
-            color: var(--gray-6);
-        }
-
-        /* Form for creating/editing posts */
-        .form-group {
-            margin-bottom: var(--size-3);
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: var(--size-1);
-            font-weight: var(--font-weight-5);
-            color: var(--gray-7);
-        }
-        .form-group input,
-        .form-group textarea {
-            width: 100%;
-            padding: var(--size-2) var(--size-3);
-            border: 1px solid var(--surface-4);
-            border-radius: var(--radius-2);
-            background: var(--surface-2);
-            color: var(--text-1);
-            font-family: inherit;
-            font-size: var(--font-size-2);
-        }
-        .form-group input:focus,
-        .form-group textarea:focus {
-            outline: none;
-            border-color: var(--indigo-6);
-            box-shadow: 0 0 0 3px var(--indigo-2);
-        }
-
-        /* Buttons (reuse map page classes) */
-        .btn {
-            padding: var(--size-2) var(--size-4);
-            border: none;
-            border-radius: var(--radius-2);
-            cursor: pointer;
-            font-size: var(--font-size-2);
-            font-weight: var(--font-weight-5);
-            display: inline-flex;
-            align-items: center;
-            gap: var(--size-2);
-            transition: all 0.2s var(--ease-2);
-            box-shadow: var(--shadow-2);
-        }
-        .btn-primary {
-            background: var(--indigo-7);
-            color: white;
-        }
-        .btn-primary:hover {
-            background: var(--indigo-8);
-            box-shadow: var(--shadow-3);
-        }
-        .btn-secondary {
-            background: var(--gray-7);
-            color: white;
-        }
-        .btn-secondary:hover {
-            background: var(--gray-8);
-        }
-        .btn-danger {
-            background: var(--red-7);
-            color: white;
-        }
-        .btn-danger:hover {
-            background: var(--red-8);
-        }
-
-        /* Comments section */
-        .comments {
-            max-width: 1200px;
-            margin: var(--size-6) auto 0;
-            padding: 0 var(--size-4);
-        }
-        .comments h3 {
-            font-size: var(--font-size-4);
-            margin-bottom: var(--size-4);
-            color: var(--indigo-7);
-        }
-        .comments-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--size-4);
-        }
-        .comment-item {
-            background: var(--surface-1);
-            border-radius: var(--radius-2);
-            padding: var(--size-4);
-            box-shadow: var(--shadow-1);
-        }
-        .comment-item .meta {
-            color: var(--gray-6);
-            font-size: var(--font-size-0);
-            margin-bottom: var(--size-2);
-        }
-        .comment-item p {
-            margin: 0;
-        }
-
-        /* Footer */
-        .site-footer {
-            background: var(--surface-2);
-            padding: var(--size-4);
-            margin-top: var(--size-6);
-            text-align: center;
-            color: var(--gray-6);
-            font-size: var(--font-size-1);
-            border-top: 1px solid var(--surface-4);
-        }
-
-        /* Responsive two‑column layout */
-        @media (min-width: 768px) {
-            .post-page {
-                flex-direction: row;
-                align-items: flex-start;
-                gap: var(--size-6);
-                padding: var(--size-6);
-            }
-            .post {
-                flex: 1;
-                margin: 0;
-            }
-            .sidebar {
-                width: 320px;
-                flex-shrink: 0;
-                position: sticky;
-                top: var(--size-4);
-            }
-        }
-    </style>
-</head>
-<body>
-    <header class="site-header">
-        <div class="container">
-            <h1 class="site-title"><a href="map-page.html">Journey Mapper</a></h1>
-            <nav class="site-nav">
-                <a href="map-page.html">Map</a>
-                <a href="blog-page.html" class="active">Blog</a>
-            </nav>
-        </div>
-    </header>
-
-    <main class="post-page">
-        <article class="post">
-            <h2 class="post-title">Post Title</h2>
-            <div class="post-meta">By <span class="author">Author</span> — <time datetime="2026-01-01">Jan 1, 2026</time></div>
-            <figure class="post-hero">
-                <img src="https://via.placeholder.com/800x350?text=Hero+Image" alt="Post image">
-            </figure>
-            <div class="post-content">
-                <p>This is a placeholder paragraph for the blog post content. Replace with real content.</p>
-            </div>
-        </article>
-
-        <aside class="sidebar">
-            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
-                <h3 style="margin:0">Posts</h3>
-                <button id="create-post-btn" class="btn btn-primary">New</button>
-            </div>
-
-            <div id="posts-list">
-                <!-- JS will render list of posts here -->
-            </div>
-
-            <section class="about" id="post-form" style="display:none;margin-top:16px;">
-                <h3 id="form-title">New Post</h3>
-                <form id="blog-form">
-                    <div class="form-group">
-                        <label for="post-title-input">Title</label>
-                        <input id="post-title-input" name="title" required />
-                    </div>
-                    <div class="form-group">
-                        <label for="post-journey-input">Journey ID</label>
-                        <input id="post-journey-input" name="journeyId" placeholder="optional" />
-                    </div>
-                    <div class="form-group">
-                        <label for="post-image-input">Image URL</label>
-                        <input id="post-image-input" name="image" placeholder="https://..." />
-                    </div>
-                    <div class="form-group">
-                        <label for="post-content-input">Content</label>
-                        <textarea id="post-content-input" name="content" rows="6" required></textarea>
-                    </div>
-                    <div style="display:flex;gap:8px">
-                        <button type="submit" class="btn btn-primary">Save</button>
-                        <button type="button" id="cancel-post-btn" class="btn btn-secondary">Cancel</button>
-                    </div>
-                </form>
-            </section>
-
-            <section class="about" style="margin-top:18px;">
-                <h3>About</h3>
-                <p>Short author bio or related links.</p>
-            </section>
-        </aside>
-    </main>
-
-    <section class="comments">
-        <h3>Comments</h3>
-        <div class="comments-list"></div>
-    </section>
-
-    <footer class="site-footer">
-        <div class="container">&copy; 2026 My Blog</div>
-    </footer>
-
-    <!-- JavaScript (keep your existing logic) -->
-    <script src="js/main.js"></script>
-    <script src="js/blog-posts.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/blog-post-edit.html b/blog-post-edit.html
index cc95d24..52d85a6 100644
--- a/blog-post-edit.html
+++ b/blog-post-edit.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Blog Post – Journey Mapper</title>
 
     <!-- Open Props CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/open-props"/>
-    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/open-props" />
+    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css" />
 
     <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
 
-    <!-- Google Fonts: Poppins -->
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
     <style>
         * { box-sizing: border-box; }
@@ -69,6 +69,31 @@
             background: var(--surface-2);
         }
 
+        /* User menu */
+        .user-menu {
+            display: flex;
+            align-items: center;
+            gap: var(--size-2);
+        }
+        .user-menu .username {
+            color: var(--gray-2);
+            font-weight: var(--font-weight-5);
+        }
+        .logout-btn {
+            background: var(--indigo-7);
+            color: white;
+            border: none;
+            border-radius: var(--radius-2);
+            padding: var(--size-1) var(--size-3);
+            cursor: pointer;
+            font-size: var(--font-size-1);
+            font-weight: var(--font-weight-5);
+            transition: background 0.2s;
+        }
+        .logout-btn:hover {
+            background: var(--indigo-8);
+        }
+
         /* Main content */
         .post-container {
             max-width: 800px;
@@ -170,10 +195,13 @@
     <header class="site-header">
         <div class="container">
             <h1 class="site-title"><a href="map-page.html">Journey Mapper</a></h1>
-            <nav class="site-nav">
-                <a href="map-page.html">Map</a>
-                <a href="blog-list.html">Blog</a>
-            </nav>
+            <div style="display: flex; align-items: center; gap: var(--size-4);">
+                <nav class="site-nav">
+                    <a href="map-page.html">Map</a>
+                    <a href="blog-list.html" class="active">Blog</a>
+                </nav>
+                <div class="user-menu" id="user-menu"></div>
+            </div>
         </div>
     </header>
 
@@ -183,7 +211,7 @@
             <form id="post-form">
                 <div class="form-group">
                     <label for="post-title">Title</label>
-                    <input type="text" id="post-title" required>
+                    <input type="text" id="post-title" required />
                 </div>
                 <div class="form-group">
                     <label for="post-content">Content</label>
@@ -191,13 +219,13 @@
                 </div>
                 <div class="form-group">
                     <label for="post-journey">Associated Journey ID (optional)</label>
-                    <input type="text" id="post-journey" placeholder="e.g., 3">
+                    <input type="text" id="post-journey" placeholder="e.g., 3" />
                 </div>
                 <div class="form-group">
                     <label for="post-image">Image URL or Upload</label>
-                    <input type="text" id="post-image-url" placeholder="https://...">
-                    <div style="margin: 8px 0; text-align: center;">or</div>
-                    <input type="file" id="image-upload" accept="image/*">
+                    <input type="text" id="post-image-url" placeholder="https://..." />
+                    <div style="margin: 8px 0; text-align: center">or</div>
+                    <input type="file" id="image-upload" accept="image/*" />
                     <div class="image-preview" id="image-preview"></div>
                 </div>
                 <div class="button-group">
@@ -212,17 +240,69 @@
     <div id="toast" class="toast"></div>
 
     <script>
+        // ==================== AUTH ====================
         const API_BASE = 'http://127.0.0.1:5000/api';
+        let currentUser = null;
         let currentPostId = null;
 
-        // Get post id from URL
+        async function checkAuthAndRedirect() {
+            try {
+                const res = await fetch(`${API_BASE}/me`, { credentials: 'include' });
+                if (res.ok) {
+                    currentUser = await res.json();
+                    return true;
+                } else {
+                    window.location.href = 'login.html';
+                    return false;
+                }
+            } catch (err) {
+                window.location.href = 'login.html';
+                return false;
+            }
+        }
+
+        function updateUserMenu() {
+            const container = document.getElementById('user-menu');
+            if (currentUser) {
+                container.innerHTML = `
+                    <span class="username"><i class="fas fa-user"></i> ${escapeHtml(currentUser.username)}</span>
+                    <button id="logout-btn" class="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</button>
+                `;
+                document.getElementById('logout-btn')?.addEventListener('click', logout);
+            }
+        }
+
+        async function logout() {
+            await fetch(`${API_BASE}/logout`, { method: 'POST', credentials: 'include' });
+            window.location.href = 'login.html';
+        }
+
+        function escapeHtml(str) {
+            if (!str) return '';
+            return str.replace(/[&<>]/g, function(m) {
+                if (m === '&') return '&amp;';
+                if (m === '<') return '&lt;';
+                if (m === '>') return '&gt;';
+                return m;
+            });
+        }
+
+        function showToast(message, isError = false) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.style.backgroundColor = isError ? 'var(--red-7)' : 'var(--green-7)';
+            toast.style.display = 'block';
+            setTimeout(() => { toast.style.display = 'none'; }, 3000);
+        }
+
+        // ==================== POST CRUD ====================
         const urlParams = new URLSearchParams(window.location.search);
         const postId = urlParams.get('id');
         const isNew = urlParams.has('new');
 
         async function loadPost(id) {
             try {
-                const res = await fetch(`${API_BASE}/blog-posts/${id}`);
+                const res = await fetch(`${API_BASE}/blog-posts/${id}`, { credentials: 'include' });
                 if (!res.ok) throw new Error('Post not found');
                 const post = await res.json();
                 currentPostId = post.id;
@@ -258,12 +338,7 @@
                 return;
             }
 
-            const payload = {
-                title,
-                content,
-                journeyId: journeyId || null,
-                image: image || null
-            };
+            const payload = { title, content, journeyId: journeyId || null, image: image || null };
 
             try {
                 let url, method;
@@ -278,17 +353,14 @@
                 const res = await fetch(url, {
                     method,
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
+                    body: JSON.stringify(payload),
+                    credentials: 'include'
                 });
-
                 if (!res.ok) throw new Error('Save failed');
                 const data = await res.json();
                 showToast('Post saved successfully');
-                // Redirect to the new post if it was created
                 if (isNew) {
-                    window.location.href = `blog-post.html?id=${data.id}`;
-                } else {
-                    // reload if needed
+                    window.location.href = `blog-post-edit.html?id=${data.id}`;
                 }
             } catch (err) {
                 showToast('Error saving post', true);
@@ -299,7 +371,10 @@
             if (!currentPostId) return;
             if (!confirm('Delete this post?')) return;
             try {
-                const res = await fetch(`${API_BASE}/blog-posts/${currentPostId}`, { method: 'DELETE' });
+                const res = await fetch(`${API_BASE}/blog-posts/${currentPostId}`, {
+                    method: 'DELETE',
+                    credentials: 'include'
+                });
                 if (!res.ok) throw new Error('Delete failed');
                 showToast('Post deleted');
                 setTimeout(() => { window.location.href = 'blog-list.html'; }, 1000);
@@ -308,15 +383,7 @@
             }
         }
 
-        function showToast(message, isError = false) {
-            const toast = document.getElementById('toast');
-            toast.textContent = message;
-            toast.style.backgroundColor = isError ? 'var(--red-7)' : 'var(--green-7)';
-            toast.style.display = 'block';
-            setTimeout(() => { toast.style.display = 'none'; }, 3000);
-        }
-
-        // Image upload (convert to base64 and set as image URL)
+        // Image upload (convert to base64)
         document.getElementById('image-upload').addEventListener('change', function(e) {
             const file = e.target.files[0];
             if (!file) return;
@@ -332,16 +399,23 @@
         document.getElementById('post-form').addEventListener('submit', savePost);
         document.getElementById('delete-post').addEventListener('click', deletePost);
 
-        if (!isNew && postId) {
-            loadPost(postId);
-        } else if (isNew) {
-            currentPostId = null;
-            document.getElementById('form-title').textContent = 'New Post';
-            document.getElementById('delete-post').style.display = 'none';
-        } else {
-            // No id and not new – maybe go to list
-            window.location.href = 'blog-list.html';
-        }
+        // ==================== INITIALIZATION ====================
+        document.addEventListener('DOMContentLoaded', async () => {
+            const authenticated = await checkAuthAndRedirect();
+            if (!authenticated) return;
+            updateUserMenu();
+
+            if (!isNew && postId) {
+                loadPost(postId);
+            } else if (isNew) {
+                currentPostId = null;
+                document.getElementById('form-title').textContent = 'New Post';
+                document.getElementById('delete-post').style.display = 'none';
+            } else {
+                // No id and not new – redirect to list
+                window.location.href = 'blog-list.html';
+            }
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..1dda1a3
--- /dev/null
+++ b/login.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login – Journey Mapper</title>
+
+    <!-- Open Props CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/open-props"/>
+    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+    <style>
+        * { box-sizing: border-box; }
+        body {
+            font-family: var(--font-sans);
+            background: var(--gray-0);
+            color: var(--gray-9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: var(--size-4);
+        }
+
+        .login-container {
+            max-width: 400px;
+            width: 100%;
+            background: var(--surface-1);
+            border-radius: var(--radius-3);
+            padding: var(--size-6);
+            box-shadow: var(--shadow-4);
+        }
+
+        .login-header {
+            text-align: center;
+            margin-bottom: var(--size-6);
+        }
+
+        .login-header h1 {
+            color: var(--indigo-8);
+            margin: 0;
+            font-size: var(--font-size-5);
+        }
+
+        .auth-tabs {
+            display: flex;
+            gap: var(--size-2);
+            border-bottom: 1px solid var(--surface-4);
+            margin-bottom: var(--size-4);
+        }
+        .auth-tab {
+            padding: var(--size-2) var(--size-4);
+            cursor: pointer;
+            background: none;
+            border: none;
+            font-size: var(--font-size-2);
+            font-weight: var(--font-weight-5);
+            color: var(--gray-6);
+            transition: all 0.2s;
+        }
+        .auth-tab.active {
+            color: var(--indigo-7);
+            border-bottom: 2px solid var(--indigo-7);
+        }
+        .auth-form {
+            display: none;
+        }
+        .auth-form.active {
+            display: block;
+        }
+        .form-group {
+            margin-bottom: var(--size-4);
+        }
+        label {
+            display: block;
+            margin-bottom: var(--size-1);
+            font-weight: var(--font-weight-5);
+        }
+        input {
+            width: 100%;
+            padding: var(--size-2) var(--size-3);
+            border: 1px solid var(--surface-4);
+            border-radius: var(--radius-2);
+            background: var(--surface-2);
+            font-size: var(--font-size-2);
+        }
+        .btn {
+            width: 100%;
+            padding: var(--size-2);
+            border: none;
+            border-radius: var(--radius-2);
+            background: var(--indigo-7);
+            color: white;
+            font-size: var(--font-size-2);
+            font-weight: var(--font-weight-5);
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .btn:hover {
+            background: var(--indigo-8);
+        }
+        .toast {
+            position: fixed;
+            bottom: var(--size-4);
+            right: var(--size-4);
+            background: var(--green-7);
+            color: white;
+            padding: var(--size-2) var(--size-4);
+            border-radius: var(--radius-2);
+            display: none;
+            z-index: 1100;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-header">
+            <h1><i class="fas fa-map-marked-alt"></i> Journey Mapper</h1>
+            <p>Sign in to continue</p>
+        </div>
+        <div class="auth-tabs">
+            <button class="auth-tab active" data-tab="login">Login</button>
+            <button class="auth-tab" data-tab="register">Register</button>
+        </div>
+        <div id="login-form" class="auth-form active">
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" id="login-username" required>
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" id="login-password" required>
+            </div>
+            <button id="login-submit" class="btn">Login</button>
+        </div>
+        <div id="register-form" class="auth-form">
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" id="register-username" required>
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" id="register-password" required>
+            </div>
+            <button id="register-submit" class="btn">Register</button>
+        </div>
+    </div>
+    <div id="toast" class="toast"></div>
+
+    <script>
+        const API_BASE = 'http://127.0.0.1:5000/api';
+
+        function showToast(msg, isError = false) {
+            const toast = document.getElementById('toast');
+            toast.textContent = msg;
+            toast.style.backgroundColor = isError ? 'var(--red-7)' : 'var(--green-7)';
+            toast.style.display = 'block';
+            setTimeout(() => { toast.style.display = 'none'; }, 3000);
+        }
+
+        async function login(username, password) {
+            try {
+                const res = await fetch(`${API_BASE}/login`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password }),
+                    credentials: 'include'
+                });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Login failed');
+                showToast(`Welcome, ${data.username}!`);
+                window.location.href = 'map-page.html';
+            } catch (err) {
+                showToast(err.message, true);
+            }
+        }
+
+        async function register(username, password) {
+            try {
+                const res = await fetch(`${API_BASE}/register`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password }),
+                    credentials: 'include'
+                });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Registration failed');
+                showToast(`Registered as ${data.username}. Logging in...`);
+                window.location.href = 'map-page.html';
+            } catch (err) {
+                showToast(err.message, true);
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // Tab switching
+            document.querySelectorAll('.auth-tab').forEach(tab => {
+                tab.addEventListener('click', () => {
+                    const target = tab.dataset.tab;
+                    document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    document.querySelectorAll('.auth-form').forEach(f => f.classList.remove('active'));
+                    document.getElementById(`${target}-form`).classList.add('active');
+                });
+            });
+            // Login button
+            document.getElementById('login-submit').addEventListener('click', () => {
+                const username = document.getElementById('login-username').value.trim();
+                const password = document.getElementById('login-password').value;
+                if (!username || !password) {
+                    showToast('Please enter username and password', true);
+                    return;
+                }
+                login(username, password);
+            });
+            // Register button
+            document.getElementById('register-submit').addEventListener('click', () => {
+                const username = document.getElementById('register-username').value.trim();
+                const password = document.getElementById('register-password').value;
+                if (!username || !password) {
+                    showToast('Please enter username and password', true);
+                    return;
+                }
+                if (password.length < 4) {
+                    showToast('Password must be at least 4 characters', true);
+                    return;
+                }
+                register(username, password);
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/map-page.html b/map-page.html
index 5fd2e73..cc1532c 100644
--- a/map-page.html
+++ b/map-page.html
@@ -1,1152 +1,1473 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Journey Mapper - Interactive Map</title>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Journey Mapper - Interactive Map</title>
 
-    <!-- Open Props CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/open-props"/>
-    <!-- optional: normalize / additional props -->
-    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
+        <!-- Open Props CSS -->
+        <link rel="stylesheet" href="https://unpkg.com/open-props" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/open-props/normalize.min.css"
+        />
 
-    <!-- Leaflet -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+        <!-- Leaflet -->
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        />
+        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+        <!-- Font Awesome -->
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        />
 
-    <!-- Google Fonts (optional, Open Props uses system fonts by default) -->
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+        <!-- Google Fonts -->
+        <link
+            href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
 
-    <style>
-        /* Use Open Props design tokens */
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: var(--font-sans);
-            background: var(--gray-0);
-            color: var(--gray-9);
-        }
-        html, body {
-            height: 100%;
-        }
-
-        .app-container {
-            display: flex;
-            height: 100vh;
-            overflow: hidden;
-        }
-
-        .sidebar {
-            width: 320px;
-            background: var(--surface-2);
-            border-right: 1px solid var(--surface-4);
-            padding: var(--size-4);
-            transition: transform 0.3s var(--ease-3);
-            overflow-y: auto;
-            box-shadow: var(--shadow-4);
-        }
-        .sidebar.collapsed {
-            transform: translateX(-100%);
-        }
-
-        .map-area {
-            flex: 1;
-            min-width: 0;
-            position: relative;
-        }
-
-        #map {
-            width: 100%;
-            height: 100%;
-            background: var(--surface-1);
-        }
-
-        /* Header */
-        .sidebar-header {
-            margin-bottom: var(--size-6);
-            text-align: center;
-        }
-        .sidebar-header h1 {
-            color: var(--indigo-8);
-            margin: 0;
-            font-size: var(--font-size-5);
-            font-weight: var(--font-weight-6);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: var(--size-2);
-        }
-        .tagline {
-            color: var(--gray-6);
-            font-size: var(--font-size-0);
-            margin-top: var(--size-2);
-        }
-
-        /* Mode buttons */
-        .mode-selector {
-            margin-bottom: var(--size-4);
-        }
-        .mode-btn {
-            width: 100%;
-            padding: var(--size-3);
-            margin-bottom: var(--size-2);
-            border: none;
-            border-radius: var(--radius-3);
-            background: var(--surface-3);
-            color: var(--text-2);
-            font-size: var(--font-size-2);
-            cursor: pointer;
-            transition: all 0.2s var(--ease-2);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: var(--size-2);
-            box-shadow: var(--shadow-2);
-        }
-        .mode-btn.active {
-            background: var(--indigo-7);
-            color: white;
-            box-shadow: var(--shadow-3);
-        }
-        .mode-btn:hover {
-            background: var(--surface-4);
-        }
-
-        /* Panels */
-        .panel {
-            display: none;
-            background: var(--surface-1);
-            border-radius: var(--radius-3);
-            padding: var(--size-4);
-            box-shadow: var(--shadow-3);
-            margin-bottom: var(--size-4);
-        }
-        .panel.active-panel {
-            display: block;
-        }
-
-        /* Forms */
-        .form-group {
-            margin-bottom: var(--size-3);
-        }
-        label {
-            display: block;
-            margin-bottom: var(--size-1);
-            font-weight: var(--font-weight-5);
-            color: var(--text-2);
-            font-size: var(--font-size-1);
-        }
-        input[type="text"],
-        input[type="date"],
-        textarea,
-        select {
-            width: 100%;
-            padding: var(--size-2) var(--size-3);
-            border: 1px solid var(--surface-4);
-            border-radius: var(--radius-2);
-            font-size: var(--font-size-2);
-            background: var(--surface-2);
-            color: var(--text-1);
-            transition: border-color 0.2s, box-shadow 0.2s;
-        }
-        input:focus,
-        textarea:focus,
-        select:focus {
-            outline: none;
-            border-color: var(--indigo-6);
-            box-shadow: 0 0 0 3px var(--indigo-2);
-        }
-        textarea {
-            min-height: 80px;
-            resize: vertical;
-        }
-
-        /* Instructions */
-        .instructions {
-            background: var(--surface-3);
-            padding: var(--size-3);
-            border-radius: var(--radius-2);
-            margin-bottom: var(--size-4);
-            font-size: var(--font-size-1);
-            border-left: 4px solid var(--indigo-6);
-        }
-        .instructions h4 {
-            margin-top: 0;
-            margin-bottom: var(--size-2);
-            color: var(--indigo-8);
-        }
-        .instructions ol {
-            margin: 0;
-            padding-left: var(--size-5);
-        }
-
-        /* Buttons */
-        .button-group {
-            display: flex;
-            gap: var(--size-2);
-            margin-top: var(--size-4);
-            flex-wrap: wrap;
-        }
-        .btn {
-            padding: var(--size-2) var(--size-4);
-            border: none;
-            border-radius: var(--radius-2);
-            cursor: pointer;
-            font-size: var(--font-size-2);
-            font-weight: var(--font-weight-5);
-            display: inline-flex;
-            align-items: center;
-            gap: var(--size-2);
-            transition: all 0.2s var(--ease-2);
-            box-shadow: var(--shadow-2);
-        }
-        .btn-primary {
-            background: var(--indigo-7);
-            color: white;
-        }
-        .btn-primary:hover {
-            background: var(--indigo-8);
-            box-shadow: var(--shadow-3);
-        }
-        .btn-success {
-            background: var(--green-7);
-            color: white;
-        }
-        .btn-success:hover {
-            background: var(--green-8);
-        }
-        .btn-secondary {
-            background: var(--gray-7);
-            color: white;
-        }
-        .btn-secondary:hover {
-            background: var(--gray-8);
-        }
-        .btn-danger {
-            background: var(--red-7);
-            color: white;
-        }
-        .btn-danger:hover {
-            background: var(--red-8);
-        }
-
-        /* Markers list */
-        .markers-list {
-            background: var(--surface-1);
-            border-radius: var(--radius-3);
-            padding: var(--size-4);
-            box-shadow: var(--shadow-3);
-            margin-top: var(--size-4);
-        }
-        .markers-list h3 {
-            margin-top: 0;
-            color: var(--indigo-8);
-            font-size: var(--font-size-3);
-            border-bottom: 1px solid var(--surface-4);
-            padding-bottom: var(--size-2);
-            margin-bottom: var(--size-3);
-        }
-        .marker-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: var(--size-2);
-            background: var(--surface-2);
-            border-radius: var(--radius-2);
-            margin-bottom: var(--size-2);
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .marker-item:hover {
-            background: var(--surface-3);
-        }
-        .marker-title {
-            font-weight: var(--font-weight-5);
-            color: var(--indigo-8);
-            flex: 1;
-        }
-        .marker-coords {
-            font-size: var(--font-size-0);
-            color: var(--gray-6);
-        }
-        .empty-message {
-            text-align: center;
-            color: var(--gray-6);
-            font-style: italic;
-            padding: var(--size-4);
-        }
-
-        /* Map controls */
-        .map-controls {
-            position: absolute;
-            top: var(--size-4);
-            right: var(--size-4);
-            display: flex;
-            flex-direction: column;
-            gap: var(--size-2);
-            z-index: 10;
-        }
-        .control-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: var(--radius-round);
-            background-color: var(--surface-1);
-            border: none;
-            box-shadow: var(--shadow-3);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: var(--font-size-3);
-            color: var(--text-2);
-            transition: all 0.2s;
-        }
-        .control-btn:hover {
-            background-color: var(--surface-3);
-            transform: translateY(-2px);
-        }
-
-        /* Mode indicator */
-        .mode-indicator {
-            position: absolute;
-            top: var(--size-4);
-            left: var(--size-4);
-            background-color: var(--surface-1);
-            padding: var(--size-2) var(--size-4);
-            border-radius: var(--radius-5);
-            box-shadow: var(--shadow-3);
-            display: flex;
-            align-items: center;
-            gap: var(--size-2);
-            z-index: 10;
-        }
-        .indicator-text {
-            font-weight: var(--font-weight-5);
-            color: var(--text-2);
-        }
-        .indicator-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: var(--radius-round);
-        }
-        .indicator-dot.creating {
-            background-color: var(--indigo-6);
-        }
-        .indicator-dot.viewing {
-            background-color: var(--green-6);
-        }
-
-        /* Journey info */
-        .journey-info {
-            background-color: var(--surface-2);
-            border-radius: var(--radius-2);
-            padding: var(--size-3);
-            margin-top: var(--size-3);
-            border: 1px solid var(--surface-4);
-        }
-        .info-content p {
-            margin: var(--size-2) 0;
-        }
-
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            background-color: rgba(0,0,0,0.5);
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-        }
-        .modal.active {
-            display: flex;
-        }
-        .modal-content {
-            background-color: var(--surface-1);
-            border-radius: var(--radius-4);
-            width: 90%;
-            max-width: 500px;
-            max-height: 90vh;
-            overflow-y: auto;
-            box-shadow: var(--shadow-5);
-        }
-        .modal-header {
-            padding: var(--size-4);
-            border-bottom: 1px solid var(--surface-4);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .modal-header h3 {
-            margin: 0;
-            display: flex;
-            align-items: center;
-            gap: var(--size-2);
-        }
-        .close-btn {
-            background: none;
-            border: none;
-            font-size: var(--font-size-4);
-            cursor: pointer;
-            color: var(--gray-6);
-        }
-        .close-btn:hover {
-            color: var(--gray-9);
-        }
-        .modal-body {
-            padding: var(--size-4);
-        }
-        .modal-footer {
-            padding: var(--size-4);
-            border-top: 1px solid var(--surface-4);
-            display: flex;
-            gap: var(--size-2);
-            justify-content: flex-end;
-        }
-
-        /* Toast */
-        .toast {
-            position: fixed;
-            bottom: var(--size-4);
-            right: var(--size-4);
-            background-color: var(--green-7);
-            color: white;
-            padding: var(--size-3) var(--size-4);
-            border-radius: var(--radius-3);
-            box-shadow: var(--shadow-4);
-            display: none;
-            z-index: 1100;
-            animation: slideIn 0.3s var(--ease-3);
-        }
-        @keyframes slideIn {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-
-        /* Footer */
-        .sidebar-footer {
-            margin-top: var(--size-4);
-            border-top: 1px solid var(--surface-4);
-            padding-top: var(--size-3);
-        }
-        .navigation {
-            display: flex;
-            justify-content: space-around;
-            margin-bottom: var(--size-2);
-        }
-        .nav-link {
-            color: var(--indigo-7);
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: var(--size-1);
-            font-size: var(--font-size-1);
-        }
-        .nav-link:hover {
-            text-decoration: underline;
-        }
-        .footer-text {
-            text-align: center;
-            font-size: var(--font-size-0);
-            color: var(--gray-6);
-            margin: 0;
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .sidebar {
-                position: fixed;
-                top: 0; left: 0;
+        <style>
+            /* Use Open Props design tokens */
+            * {
+                box-sizing: border-box;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+                font-family: var(--font-sans);
+                background: var(--gray-0);
+                color: var(--gray-9);
+            }
+            html,
+            body {
                 height: 100%;
+            }
+
+            .app-container {
+                display: flex;
+                height: 100vh;
+                overflow: hidden;
+            }
+
+            .sidebar {
+                width: 320px;
+                background: var(--surface-2);
+                border-right: 1px solid var(--surface-4);
+                padding: var(--size-4);
+                transition: transform 0.3s var(--ease-3);
+                overflow-y: auto;
+                box-shadow: var(--shadow-4);
+            }
+            .sidebar.collapsed {
                 transform: translateX(-100%);
             }
-            .sidebar.active {
-                transform: translateX(0);
+
+            .map-area {
+                flex: 1;
+                min-width: 0;
+                position: relative;
+            }
+
+            #map {
+                width: 100%;
+                height: 100%;
+                background: var(--surface-1);
+            }
+
+            /* Header */
+            .sidebar-header {
+                margin-bottom: var(--size-6);
+                text-align: center;
+            }
+            .sidebar-header h1 {
+                color: var(--indigo-8);
+                margin: 0;
+                font-size: var(--font-size-5);
+                font-weight: var(--font-weight-6);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: var(--size-2);
+            }
+            .tagline {
+                color: var(--gray-6);
+                font-size: var(--font-size-0);
+                margin-top: var(--size-2);
+            }
+
+            /* Mode buttons */
+            .mode-selector {
+                margin-bottom: var(--size-4);
+            }
+            .mode-btn {
+                width: 100%;
+                padding: var(--size-3);
+                margin-bottom: var(--size-2);
+                border: none;
+                border-radius: var(--radius-3);
+                background: var(--surface-3);
+                color: var(--text-2);
+                font-size: var(--font-size-2);
+                cursor: pointer;
+                transition: all 0.2s var(--ease-2);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: var(--size-2);
+                box-shadow: var(--shadow-2);
+            }
+            .mode-btn.active {
+                background: var(--indigo-7);
+                color: white;
+                box-shadow: var(--shadow-3);
+            }
+            .mode-btn:hover {
+                background: var(--surface-4);
+            }
+
+            /* Panels */
+            .panel {
+                display: none;
+                background: var(--surface-1);
+                border-radius: var(--radius-3);
+                padding: var(--size-4);
+                box-shadow: var(--shadow-3);
+                margin-bottom: var(--size-4);
+            }
+            .panel.active-panel {
+                display: block;
+            }
+
+            /* Forms */
+            .form-group {
+                margin-bottom: var(--size-3);
+            }
+            label {
+                display: block;
+                margin-bottom: var(--size-1);
+                font-weight: var(--font-weight-5);
+                color: var(--text-2);
+                font-size: var(--font-size-1);
+            }
+            input[type="text"],
+            input[type="date"],
+            textarea,
+            select {
+                width: 100%;
+                padding: var(--size-2) var(--size-3);
+                border: 1px solid var(--surface-4);
+                border-radius: var(--radius-2);
+                font-size: var(--font-size-2);
+                background: var(--surface-2);
+                color: var(--text-1);
+                transition:
+                    border-color 0.2s,
+                    box-shadow 0.2s;
+            }
+            input:focus,
+            textarea:focus,
+            select:focus {
+                outline: none;
+                border-color: var(--indigo-6);
+                box-shadow: 0 0 0 3px var(--indigo-2);
+            }
+            textarea {
+                min-height: 80px;
+                resize: vertical;
+            }
+
+            /* Instructions */
+            .instructions {
+                background: var(--surface-3);
+                padding: var(--size-3);
+                border-radius: var(--radius-2);
+                margin-bottom: var(--size-4);
+                font-size: var(--font-size-1);
+                border-left: 4px solid var(--indigo-6);
+            }
+            .instructions h4 {
+                margin-top: 0;
+                margin-bottom: var(--size-2);
+                color: var(--indigo-8);
+            }
+            .instructions ol {
+                margin: 0;
+                padding-left: var(--size-5);
+            }
+
+            /* Buttons */
+            .button-group {
+                display: flex;
+                gap: var(--size-2);
+                margin-top: var(--size-4);
+                flex-wrap: wrap;
+            }
+            .btn {
+                padding: var(--size-2) var(--size-4);
+                border: none;
+                border-radius: var(--radius-2);
+                cursor: pointer;
+                font-size: var(--font-size-2);
+                font-weight: var(--font-weight-5);
+                display: inline-flex;
+                align-items: center;
+                gap: var(--size-2);
+                transition: all 0.2s var(--ease-2);
+                box-shadow: var(--shadow-2);
+            }
+            .btn-primary {
+                background: var(--indigo-7);
+                color: white;
+            }
+            .btn-primary:hover {
+                background: var(--indigo-8);
+                box-shadow: var(--shadow-3);
+            }
+            .btn-success {
+                background: var(--green-7);
+                color: white;
+            }
+            .btn-success:hover {
+                background: var(--green-8);
+            }
+            .btn-secondary {
+                background: var(--gray-7);
+                color: white;
+            }
+            .btn-secondary:hover {
+                background: var(--gray-8);
+            }
+            .btn-danger {
+                background: var(--red-7);
+                color: white;
+            }
+            .btn-danger:hover {
+                background: var(--red-8);
+            }
+
+            /* Markers list */
+            .markers-list {
+                background: var(--surface-1);
+                border-radius: var(--radius-3);
+                padding: var(--size-4);
+                box-shadow: var(--shadow-3);
+                margin-top: var(--size-4);
+            }
+            .markers-list h3 {
+                margin-top: 0;
+                color: var(--indigo-8);
+                font-size: var(--font-size-3);
+                border-bottom: 1px solid var(--surface-4);
+                padding-bottom: var(--size-2);
+                margin-bottom: var(--size-3);
+            }
+            .marker-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: var(--size-2);
+                background: var(--surface-2);
+                border-radius: var(--radius-2);
+                margin-bottom: var(--size-2);
+                cursor: pointer;
+                transition: background 0.2s;
+            }
+            .marker-item:hover {
+                background: var(--surface-3);
+            }
+            .marker-title {
+                font-weight: var(--font-weight-5);
+                color: var(--indigo-8);
+                flex: 1;
+            }
+            .marker-coords {
+                font-size: var(--font-size-0);
+                color: var(--gray-6);
+            }
+            .empty-message {
+                text-align: center;
+                color: var(--gray-6);
+                font-style: italic;
+                padding: var(--size-4);
+            }
+
+            /* Map controls */
+            .map-controls {
+                position: absolute;
+                top: var(--size-4);
+                right: var(--size-4);
+                display: flex;
+                flex-direction: column;
+                gap: var(--size-2);
+                z-index: 10;
+            }
+            .control-btn {
+                width: 40px;
+                height: 40px;
+                border-radius: var(--radius-round);
+                background-color: var(--surface-1);
+                border: none;
+                box-shadow: var(--shadow-3);
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: var(--font-size-3);
+                color: var(--text-2);
+                transition: all 0.2s;
+            }
+            .control-btn:hover {
+                background-color: var(--surface-3);
+                transform: translateY(-2px);
+            }
+
+            /* Mode indicator */
+            .mode-indicator {
+                position: absolute;
+                top: var(--size-4);
+                left: var(--size-4);
+                background-color: var(--surface-1);
+                padding: var(--size-2) var(--size-4);
+                border-radius: var(--radius-5);
+                box-shadow: var(--shadow-3);
+                display: flex;
+                align-items: center;
+                gap: var(--size-2);
+                z-index: 10;
+            }
+            .indicator-text {
+                font-weight: var(--font-weight-5);
+                color: var(--text-2);
+            }
+            .indicator-dot {
+                width: 12px;
+                height: 12px;
+                border-radius: var(--radius-round);
+            }
+            .indicator-dot.creating {
+                background-color: var(--indigo-6);
+            }
+            .indicator-dot.viewing {
+                background-color: var(--green-6);
+            }
+
+            /* Journey info */
+            .journey-info {
+                background-color: var(--surface-2);
+                border-radius: var(--radius-2);
+                padding: var(--size-3);
+                margin-top: var(--size-3);
+                border: 1px solid var(--surface-4);
+            }
+            .info-content p {
+                margin: var(--size-2) 0;
+            }
+
+            /* Modal */
+            .modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+                z-index: 1000;
+                align-items: center;
+                justify-content: center;
+            }
+            .modal.active {
+                display: flex;
+            }
+            .modal-content {
+                background-color: var(--surface-1);
+                border-radius: var(--radius-4);
+                width: 90%;
+                max-width: 500px;
+                max-height: 90vh;
+                overflow-y: auto;
+                box-shadow: var(--shadow-5);
+            }
+            .modal-header {
+                padding: var(--size-4);
+                border-bottom: 1px solid var(--surface-4);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .modal-header h3 {
+                margin: 0;
+                display: flex;
+                align-items: center;
+                gap: var(--size-2);
+            }
+            .close-btn {
+                background: none;
+                border: none;
+                font-size: var(--font-size-4);
+                cursor: pointer;
+                color: var(--gray-6);
+            }
+            .close-btn:hover {
+                color: var(--gray-9);
+            }
+            .modal-body {
+                padding: var(--size-4);
+            }
+            .modal-footer {
+                padding: var(--size-4);
+                border-top: 1px solid var(--surface-4);
+                display: flex;
+                gap: var(--size-2);
+                justify-content: flex-end;
+            }
+
+            /* Toast */
+            .toast {
+                position: fixed;
+                bottom: var(--size-4);
+                right: var(--size-4);
+                background-color: var(--green-7);
+                color: white;
+                padding: var(--size-3) var(--size-4);
+                border-radius: var(--radius-3);
+                box-shadow: var(--shadow-4);
+                display: none;
+                z-index: 1100;
+                animation: slideIn 0.3s var(--ease-3);
+            }
+            @keyframes slideIn {
+                from {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+                to {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+            }
+
+            /* Footer */
+            .sidebar-footer {
+                margin-top: var(--size-4);
+                border-top: 1px solid var(--surface-4);
+                padding-top: var(--size-3);
+            }
+            .navigation {
+                display: flex;
+                justify-content: space-around;
+                margin-bottom: var(--size-2);
+            }
+            .nav-link {
+                color: var(--indigo-7);
+                text-decoration: none;
+                display: flex;
+                align-items: center;
+                gap: var(--size-1);
+                font-size: var(--font-size-1);
+            }
+            .nav-link:hover {
+                text-decoration: underline;
+            }
+            .footer-text {
+                text-align: center;
+                font-size: var(--font-size-0);
+                color: var(--gray-6);
+                margin: 0;
+            }
+
+            /* 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: var(--size-4);
+                    flex-direction: row;
+                }
+            }
+            .site-header {
+                background: var(--gray-9);
+                padding: var(--size-4) var(--size-6);
+                border-bottom: 1px solid var(--surface-4);
+            }
+            .site-header .container {
+                max-width: 1400px;
+                margin: 0 auto;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                flex-wrap: wrap;
+                gap: var(--size-2);
+            }
+            .site-title {
+                margin: 0;
+                font-size: var(--font-size-4);
+                font-weight: var(--font-weight-6);
+            }
+            .site-title a {
+                color: var(--indigo-4);
+                text-decoration: none;
+            }
+            .site-nav {
+                display: flex;
+                gap: var(--size-4);
+            }
+            .site-nav a {
+                color: var(--gray-2);
+                text-decoration: none;
+                font-weight: var(--font-weight-5);
+                transition: color 0.2s;
+                padding: var(--size-1) var(--size-2);
+                border-radius: var(--radius-2);
+            }
+            .site-nav a:hover,
+            .site-nav a.active {
+                color: var(--indigo-4);
+                background: var(--surface-2);
             }
             .app-container {
-                flex-direction: column;
+                flex: 1;
+                display: flex;
+                overflow: hidden;
             }
-            .map-controls {
-                top: auto;
-                bottom: var(--size-4);
-                flex-direction: row;
+            .user-menu {
+                display: flex;
+                align-items: center;
+                gap: var(--size-2);
+                margin-left: var(--size-4);
             }
-        }
-        .site-header {
-            background: var(--gray-9);
-            padding: var(--size-4) var(--size-6);
-            border-bottom: 1px solid var(--surface-4);
-        }
-        .site-header .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: var(--size-2);
-        }
-        .site-title {
-            margin: 0;
-            font-size: var(--font-size-4);
-            font-weight: var(--font-weight-6);
-        }
-        .site-title a {
-            color: var(--indigo-4);
-            text-decoration: none;
-        }
-        .site-nav {
-            display: flex;
-            gap: var(--size-4);
-        }
-        .site-nav a {
-            color: var(--gray-2);
-            text-decoration: none;
-            font-weight: var(--font-weight-5);
-            transition: color 0.2s;
-            padding: var(--size-1) var(--size-2);
-            border-radius: var(--radius-2);
-        }
-        .site-nav a:hover,
-        .site-nav a.active {
-            color: var(--indigo-4);
-            background: var(--surface-2);
-        }
-        .app-container {
-            flex: 1;
-            display: flex;
-            overflow: hidden;
-        }
-    </style>
-</head>
-<body style="display: flex; flex-direction: column; min-height: 100vh;">
-    <header class="site-header">
-        <div class="container">
-            <h1 class="site-title"><a href="/">Journey Mapper</a></h1>
-            <nav class="site-nav">
-                <a href="map-page.html" class="active">Map</a>
-                <a href="blog-list.html">Blog</a>
-            </nav>
-        </div>
-    </header>
-
-    <div class="app-container">
-        <!-- SIDEBAR -->
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <h1><i class="fas fa-map-marked-alt"></i> Journey Mapper</h1>
-                <p class="tagline">Create and explore interactive journey maps</p>
-            </div>
-
-            <div class="mode-selector">
-                <button id="mode-create" class="mode-btn active">
-                    <i class="fas fa-plus-circle"></i> Create Journey
-                </button>
-                <button id="mode-view" class="mode-btn">
-                    <i class="fas fa-eye"></i> View Journeys
-                </button>
-            </div>
-
-            <!-- Create Panel -->
-            <div id="create-panel" class="panel active-panel">
-                <h3><i class="fas fa-route"></i> Create New Journey</h3>
-                <div class="form-group">
-                    <label for="journey-title"><i class="fas fa-heading"></i> Journey Title</label>
-                    <input type="text" id="journey-title" placeholder="My European Adventure" required>
-                </div>
-                <div class="form-group">
-                    <label for="journey-description"><i class="fas fa-align-left"></i> Description</label>
-                    <textarea id="journey-description" placeholder="Describe your journey..."></textarea>
-                </div>
-
-                <div class="instructions">
-                    <h4><i class="fas fa-info-circle"></i> How to create:</h4>
-                    <ol>
-                        <li>Click on the map to place markers</li>
-                        <li>Click on a marker to edit its content</li>
-                        <li>Markers are automatically connected</li>
-                        <li>Click "Save Journey" when done</li>
-                    </ol>
-                </div>
-
-                <h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
-                <div id="create-markers-container">
-                    <!-- markers appear here dynamically -->
-                </div>
-
-                <div class="button-group">
-                    <button id="add-marker-btn" class="btn btn-primary">
-                        <i class="fas fa-plus"></i> Add Marker
-                    </button>
-                    <button id="save-journey-btn" class="btn btn-success">
-                        <i class="fas fa-save"></i> Save Journey
-                    </button>
-                    <button id="clear-markers-btn" class="btn btn-secondary">
-                        <i class="fas fa-trash-alt"></i> Clear Markers
-                    </button>
-                </div>
-            </div>
-
-            <!-- View Panel -->
-            <div id="view-panel" class="panel">
-                <h3><i class="fas fa-map"></i> Explore Journeys</h3>
-                <div class="form-group">
-                    <label for="journey-select"><i class="fas fa-list"></i> Select Journey</label>
-                    <select id="journey-select">
-                        <option value="">-- Choose a journey --</option>
-                        <!-- populated from API -->
-                    </select>
-                </div>
-
-                <div id="journey-info" class="journey-info">
-                    <h4><i class="fas fa-info-circle"></i> Journey Details</h4>
-                    <div class="info-content">
-                        <p><strong>Title:</strong> <span id="info-title">-</span></p>
-                        <p><strong>Description:</strong> <span id="info-description">-</span></p>
-                        <p><strong>Markers:</strong> <span id="info-marker-count">0</span></p>
-                        <p><strong>Created:</strong> <span id="info-date">-</span></p>
+            .user-menu .username {
+                color: var(--gray-2);
+                font-weight: var(--font-weight-5);
+            }
+            .logout-btn {
+                background: var(--indigo-7);
+                color: white;
+                border: none;
+                border-radius: var(--radius-2);
+                padding: var(--size-1) var(--size-3);
+                cursor: pointer;
+                font-size: var(--font-size-1);
+                font-weight: var(--font-weight-5);
+                transition: background 0.2s;
+            }
+            .logout-btn:hover {
+                background: var(--indigo-8);
+            }
+        </style>
+    </head>
+    <body style="display: flex; flex-direction: column; min-height: 100vh">
+        <header class="site-header">
+            <div class="container">
+                <h1 class="site-title"><a href="/">Journey Mapper</a></h1>
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        gap: var(--size-4);
+                    "
+                >
+                    <nav class="site-nav">
+                        <a href="map-page.html" class="active">Map</a>
+                        <a href="blog-list.html">Blog</a>
+                    </nav>
+                    <div class="user-menu" id="user-menu">
+                        <!-- Will be filled by JS -->
                     </div>
+                </div>
+            </div>
+        </header>
+
+        <div class="app-container">
+            <!-- SIDEBAR -->
+            <aside class="sidebar">
+                <div class="sidebar-header">
+                    <h1>
+                        <i class="fas fa-map-marked-alt"></i> Journey Mapper
+                    </h1>
+                    <p class="tagline">
+                        Create and explore interactive journey maps
+                    </p>
+                </div>
+
+                <div class="mode-selector">
+                    <button id="mode-create" class="mode-btn active">
+                        <i class="fas fa-plus-circle"></i> Create Journey
+                    </button>
+                    <button id="mode-view" class="mode-btn">
+                        <i class="fas fa-eye"></i> View Journeys
+                    </button>
+                </div>
+
+                <!-- Create Panel -->
+                <div id="create-panel" class="panel active-panel">
+                    <h3><i class="fas fa-route"></i> Create New Journey</h3>
+                    <div class="form-group">
+                        <label for="journey-title"
+                            ><i class="fas fa-heading"></i> Journey Title</label
+                        >
+                        <input
+                            type="text"
+                            id="journey-title"
+                            placeholder="My European Adventure"
+                            required
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="journey-description"
+                            ><i class="fas fa-align-left"></i>
+                            Description</label
+                        >
+                        <textarea
+                            id="journey-description"
+                            placeholder="Describe your journey..."
+                        ></textarea>
+                    </div>
+
+                    <div class="instructions">
+                        <h4>
+                            <i class="fas fa-info-circle"></i> How to create:
+                        </h4>
+                        <ol>
+                            <li>Click on the map to place markers</li>
+                            <li>Click on a marker to edit its content</li>
+                            <li>Markers are automatically connected</li>
+                            <li>Click "Save Journey" when done</li>
+                        </ol>
+                    </div>
+
+                    <h4>
+                        <i class="fas fa-map-marker-alt"></i> Journey Markers
+                    </h4>
+                    <div id="create-markers-container">
+                        <!-- markers appear here dynamically -->
+                    </div>
+
                     <div class="button-group">
-                        <button id="load-journey-btn" class="btn btn-primary">
-                            <i class="fas fa-eye"></i> Load on Map
+                        <button id="add-marker-btn" class="btn btn-primary">
+                            <i class="fas fa-plus"></i> Add Marker
                         </button>
-                        <button id="edit-journey-btn" class="btn btn-secondary">
-                            <i class="fas fa-edit"></i> Edit
+                        <button id="save-journey-btn" class="btn btn-success">
+                            <i class="fas fa-save"></i> Save Journey
                         </button>
-                        <button id="delete-journey-btn" class="btn btn-danger">
-                            <i class="fas fa-trash"></i> Delete
+                        <button
+                            id="clear-markers-btn"
+                            class="btn btn-secondary"
+                        >
+                            <i class="fas fa-trash-alt"></i> Clear Markers
                         </button>
                     </div>
                 </div>
-            </div>
 
-            <!-- Current Markers List (while creating) -->
-            <div class="markers-list">
-                <h3><i class="fas fa-map-marker-alt"></i> Current Markers</h3>
-                <div id="current-markers-container">
-                    <p class="empty-message">No markers yet. Click on the map to add markers.</p>
-                </div>
-            </div>
-
-            <!-- Footer -->
-            <div class="sidebar-footer">
-                <div class="navigation">
-                    <a href="#" class="nav-link"><i class="fas fa-list"></i> All Journeys</a>
-                    <a href="blog-page.html" class="nav-link"><i class="fas fa-blog"></i> Blog</a>
-                </div>
-                <p class="footer-text">Journey Mapper v1.0</p>
-            </div>
-        </aside>
-
-        <!-- MAP AREA -->
-        <main class="map-area">
-            <div id="map"></div>
-
-            <!-- Map Controls -->
-            <div class="map-controls">
-                <button id="toggle-sidebar" class="control-btn" title="Toggle Sidebar">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <button id="zoom-in" class="control-btn" title="Zoom In">
-                    <i class="fas fa-plus"></i>
-                </button>
-                <button id="zoom-out" class="control-btn" title="Zoom Out">
-                    <i class="fas fa-minus"></i>
-                </button>
-                <button id="locate-me" class="control-btn" title="My Location">
-                    <i class="fas fa-location-arrow"></i>
-                </button>
-                <button id="fit-all" class="control-btn" title="Fit All Markers">
-                    <i class="fas fa-expand-alt"></i>
-                </button>
-            </div>
-
-            <!-- Mode Indicator -->
-            <div id="mode-indicator" class="mode-indicator">
-                <span class="indicator-text">Creating: New Journey</span>
-                <div class="indicator-dot creating"></div>
-            </div>
-
-            <!-- Marker Modal -->
-            <div id="marker-modal" class="modal">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h3><i class="fas fa-map-marker-alt"></i> Edit Marker</h3>
-                        <button class="close-btn" id="close-modal">&times;</button>
+                <!-- View Panel -->
+                <div id="view-panel" class="panel">
+                    <h3><i class="fas fa-map"></i> Explore Journeys</h3>
+                    <div class="form-group">
+                        <label for="journey-select"
+                            ><i class="fas fa-list"></i> Select Journey</label
+                        >
+                        <select id="journey-select">
+                            <option value="">-- Choose a journey --</option>
+                            <!-- populated from API -->
+                        </select>
                     </div>
-                    <div class="modal-body">
-                        <div class="form-group">
-                            <label for="marker-title">Title</label>
-                            <input type="text" id="marker-title" placeholder="Eiffel Tower">
+
+                    <div id="journey-info" class="journey-info">
+                        <h4>
+                            <i class="fas fa-info-circle"></i> Journey Details
+                        </h4>
+                        <div class="info-content">
+                            <p>
+                                <strong>Title:</strong>
+                                <span id="info-title">-</span>
+                            </p>
+                            <p>
+                                <strong>Description:</strong>
+                                <span id="info-description">-</span>
+                            </p>
+                            <p>
+                                <strong>Markers:</strong>
+                                <span id="info-marker-count">0</span>
+                            </p>
+                            <p>
+                                <strong>Created:</strong>
+                                <span id="info-date">-</span>
+                            </p>
                         </div>
-                        <div class="form-group">
-                            <label for="marker-date">Date</label>
-                            <input type="date" id="marker-date">
-                        </div>
-                        <div class="form-group">
-                            <label for="marker-text">Description</label>
-                            <textarea id="marker-text" placeholder="What happened here?"></textarea>
-                        </div>
-                        <div class="form-group">
-                            <label for="video-url">Video URL (optional)</label>
-                            <input type="text" id="video-url" placeholder="https://youtu.be/...">
-                        </div>
-                        <div class="form-group">
-                            <label for="marker-coords">Coordinates</label>
-                            <input type="text" id="marker-coords" readonly>
+                        <div class="button-group">
+                            <button
+                                id="load-journey-btn"
+                                class="btn btn-primary"
+                            >
+                                <i class="fas fa-eye"></i> Load on Map
+                            </button>
+                            <button
+                                id="edit-journey-btn"
+                                class="btn btn-secondary"
+                            >
+                                <i class="fas fa-edit"></i> Edit
+                            </button>
+                            <button
+                                id="delete-journey-btn"
+                                class="btn btn-danger"
+                            >
+                                <i class="fas fa-trash"></i> Delete
+                            </button>
                         </div>
                     </div>
-                    <div class="modal-footer">
-                        <button id="save-marker" class="btn btn-primary">Save</button>
-                        <button id="delete-marker" class="btn btn-danger">Delete</button>
-                        <button id="close-modal-footer" class="btn btn-secondary">Cancel</button>
+                </div>
+
+                <!-- Current Markers List (while creating) -->
+                <div class="markers-list">
+                    <h3>
+                        <i class="fas fa-map-marker-alt"></i> Current Markers
+                    </h3>
+                    <div id="current-markers-container">
+                        <p class="empty-message">
+                            No markers yet. Click on the map to add markers.
+                        </p>
                     </div>
                 </div>
-            </div>
 
-            <!-- Toast -->
-            <div id="toast" class="toast">
-                <p id="toast-message"></p>
-            </div>
-        </main>
-    </div>
+                <!-- Footer -->
+                <div class="sidebar-footer">
+                    <div class="navigation">
+                        <a href="#" class="nav-link"
+                            ><i class="fas fa-list"></i> All Journeys</a
+                        >
+                        <a href="blog-page.html" class="nav-link"
+                            ><i class="fas fa-blog"></i> Blog</a
+                        >
+                    </div>
+                    <p class="footer-text">Journey Mapper v1.0</p>
+                </div>
+            </aside>
 
-    <script>
-        (function() {
-            // ==================== CONFIG ====================
-            const API_BASE = 'http://127.0.0.1:5000/api';
+            <!-- MAP AREA -->
+            <main class="map-area">
+                <div id="map"></div>
 
-            // ==================== STATE =====================
-            let map;
-            let currentJourney = {
-                id: null,
-                title: '',
-                description: '',
-                markers: []          // Leaflet marker objects
-            };
-            let journeyPath;
-            let activeMarker = null;  // for modal editing
+                <!-- Map Controls -->
+                <div class="map-controls">
+                    <button
+                        id="toggle-sidebar"
+                        class="control-btn"
+                        title="Toggle Sidebar"
+                    >
+                        <i class="fas fa-bars"></i>
+                    </button>
+                    <button id="zoom-in" class="control-btn" title="Zoom In">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                    <button id="zoom-out" class="control-btn" title="Zoom Out">
+                        <i class="fas fa-minus"></i>
+                    </button>
+                    <button
+                        id="locate-me"
+                        class="control-btn"
+                        title="My Location"
+                    >
+                        <i class="fas fa-location-arrow"></i>
+                    </button>
+                    <button
+                        id="fit-all"
+                        class="control-btn"
+                        title="Fit All Markers"
+                    >
+                        <i class="fas fa-expand-alt"></i>
+                    </button>
+                </div>
 
-            // ==================== MAP INIT ==================
-            function initMap() {
-                map = L.map('map').setView([46.8182, 8.2275], 8);
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-                }).addTo(map);
+                <!-- Mode Indicator -->
+                <div id="mode-indicator" class="mode-indicator">
+                    <span class="indicator-text">Creating: New Journey</span>
+                    <div class="indicator-dot creating"></div>
+                </div>
 
-                journeyPath = L.polyline([], { color: '#4263eb', weight: 4 }).addTo(map);
+                <!-- Marker Modal -->
+                <div id="marker-modal" class="modal">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h3>
+                                <i class="fas fa-map-marker-alt"></i> Edit
+                                Marker
+                            </h3>
+                            <button class="close-btn" id="close-modal">
+                                &times;
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="form-group">
+                                <label for="marker-title">Title</label>
+                                <input
+                                    type="text"
+                                    id="marker-title"
+                                    placeholder="Eiffel Tower"
+                                />
+                            </div>
+                            <div class="form-group">
+                                <label for="marker-date">Date</label>
+                                <input type="date" id="marker-date" />
+                            </div>
+                            <div class="form-group">
+                                <label for="marker-text">Description</label>
+                                <textarea
+                                    id="marker-text"
+                                    placeholder="What happened here?"
+                                ></textarea>
+                            </div>
+                            <div class="form-group">
+                                <label for="video-url"
+                                    >Video URL (optional)</label
+                                >
+                                <input
+                                    type="text"
+                                    id="video-url"
+                                    placeholder="https://youtu.be/..."
+                                />
+                            </div>
+                            <div class="form-group">
+                                <label for="marker-coords">Coordinates</label>
+                                <input
+                                    type="text"
+                                    id="marker-coords"
+                                    readonly
+                                />
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button id="save-marker" class="btn btn-primary">
+                                Save
+                            </button>
+                            <button id="delete-marker" class="btn btn-danger">
+                                Delete
+                            </button>
+                            <button
+                                id="close-modal-footer"
+                                class="btn btn-secondary"
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
 
-                map.on('click', function(e) {
-                    if (document.getElementById('mode-create').classList.contains('active')) {
-                        createMarker(e.latlng, { title: 'New Marker' });
-                    }
-                });
+                <!-- Toast -->
+                <div id="toast" class="toast">
+                    <p id="toast-message"></p>
+                </div>
+            </main>
+        </div>
+        <div id="toast" class="toast"><p id="toast-message"></p></div>
+        <script>
+            // ==================== AUTH & REDIRECT ====================
+            const API_BASE = "http://127.0.0.1:5000/api";
+            let currentUser = null;
 
-                // Force resize after a short delay
-                setTimeout(() => map.invalidateSize(), 300);
-            }
-
-            // ==================== MARKER FUNCTIONS ==========
-            function createMarker(latlng, content = {}) {
-                const marker = L.marker(latlng, {
-                    draggable: true,
-                    title: content.title || 'Untitled'
-                }).addTo(map);
-
-                marker.bindPopup(`<strong>${content.title || 'Untitled'}</strong>`);
-
-                marker.on('click', () => openMarkerEditor(marker));
-
-                // Store marker data (we'll keep it in a parallel array for saving)
-                marker._content = { ...content, lat: latlng.lat, lng: latlng.lng };
-
-                currentJourney.markers.push(marker);
-                updateJourneyPath();
-                addMarkerToList(marker, latlng, content);
-                return marker;
-            }
-
-            function addMarkerToList(marker, latlng, content) {
-                const container = document.getElementById('current-markers-container');
-                const empty = container.querySelector('.empty-message');
-                if (empty) empty.remove();
-
-                const div = document.createElement('div');
-                div.className = 'marker-item';
-                div.dataset.lat = latlng.lat;
-                div.dataset.lng = latlng.lng;
-                div.innerHTML = `
-                    <div class="marker-title">${content.title || 'Untitled'}</div>
-                    <div class="marker-coords">${latlng.lat.toFixed(4)}, ${latlng.lng.toFixed(4)}</div>
-                `;
-                div.addEventListener('click', () => {
-                    map.flyTo(latlng, 12);
-                    openMarkerEditor(marker);
-                });
-                container.appendChild(div);
-            }
-
-            function updateJourneyPath() {
-                const coords = currentJourney.markers.map(m => [m.getLatLng().lat, m.getLatLng().lng]);
-                journeyPath.setLatLngs(coords);
-            }
-
-            // ==================== MODAL =====================
-            function openMarkerEditor(marker) {
-                activeMarker = marker;
-                const latlng = marker.getLatLng();
-                const content = marker._content || {};
-
-                document.getElementById('marker-title').value = content.title || '';
-                document.getElementById('marker-date').value = content.date || '';
-                document.getElementById('marker-text').value = content.description || '';
-                document.getElementById('video-url').value = content.videoUrl || '';
-                document.getElementById('marker-coords').value = `${latlng.lat.toFixed(6)}, ${latlng.lng.toFixed(6)}`;
-
-                document.getElementById('marker-modal').classList.add('active');
-            }
-
-            function closeModal() {
-                document.getElementById('marker-modal').classList.remove('active');
-                activeMarker = null;
-            }
-
-            function saveMarker() {
-                if (!activeMarker) return;
-                const title = document.getElementById('marker-title').value || 'Untitled';
-                const date = document.getElementById('marker-date').value;
-                const description = document.getElementById('marker-text').value;
-                const videoUrl = document.getElementById('video-url').value;
-
-                activeMarker.setTitle(title);
-                activeMarker.setPopupContent(`<strong>${title}</strong>`);
-                activeMarker._content = { title, date, description, videoUrl };
-
-                // Update list item
-                const latlng = activeMarker.getLatLng();
-                const items = document.querySelectorAll('#current-markers-container .marker-item');
-                for (let item of items) {
-                    if (item.dataset.lat == latlng.lat && item.dataset.lng == latlng.lng) {
-                        item.querySelector('.marker-title').textContent = title;
-                        break;
-                    }
-                }
-
-                closeModal();
-                showToast('Marker updated');
-            }
-
-            function deleteMarkerFromMap() {
-                if (!activeMarker) return;
-                const latlng = activeMarker.getLatLng();
-
-                map.removeLayer(activeMarker);
-                const idx = currentJourney.markers.indexOf(activeMarker);
-                if (idx > -1) currentJourney.markers.splice(idx, 1);
-
-                // Remove from list
-                const items = document.querySelectorAll('#current-markers-container .marker-item');
-                for (let item of items) {
-                    if (item.dataset.lat == latlng.lat && item.dataset.lng == latlng.lng) {
-                        item.remove();
-                        break;
-                    }
-                }
-
-                if (currentJourney.markers.length === 0) {
-                    document.getElementById('current-markers-container').innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
-                }
-
-                updateJourneyPath();
-                closeModal();
-                showToast('Marker deleted');
-            }
-
-            // ==================== API INTERACTION ============
-            async function fetchJourneys() {
+            async function checkAuth() {
                 try {
-                    const res = await fetch(`${API_BASE}/journeys`);
-                    if (!res.ok) throw new Error('Failed to fetch');
-                    const journeys = await res.json();
-                    populateJourneySelect(journeys);
+                    const res = await fetch(`${API_BASE}/me`, {
+                        credentials: "include",
+                    });
+                    if (res.ok) {
+                        currentUser = await res.json();
+                        return true;
+                    } else {
+                        window.location.href = "login.html";
+                        return false;
+                    }
                 } catch (err) {
-                    showToast('Error loading journeys', 'error');
+                    window.location.href = "login.html";
+                    return false;
                 }
             }
 
-            function populateJourneySelect(journeys) {
-                const select = document.getElementById('journey-select');
-                select.innerHTML = '<option value="">-- Choose a journey --</option><option value="all">Show All Journeys</option>';
-                journeys.forEach(j => {
-                    const opt = document.createElement('option');
-                    opt.value = j.id;
-                    opt.textContent = j.title;
-                    select.appendChild(opt);
+            function updateUserMenu() {
+                const container = document.getElementById("user-menu");
+                if (currentUser) {
+                    container.innerHTML = `
+                        <span class="username"><i class="fas fa-user"></i> ${escapeHtml(currentUser.username)}</span>
+                        <button id="logout-btn" class="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</button>
+                    `;
+                    document
+                        .getElementById("logout-btn")
+                        ?.addEventListener("click", logout);
+                }
+            }
+
+            async function logout() {
+                await fetch(`${API_BASE}/logout`, {
+                    method: "POST",
+                    credentials: "include",
+                });
+                window.location.href = "login.html";
+            }
+
+            function escapeHtml(str) {
+                if (!str) return "";
+                return str.replace(/[&<>]/g, function (m) {
+                    if (m === "&") return "&amp;";
+                    if (m === "<") return "&lt;";
+                    if (m === ">") return "&gt;";
+                    return m;
                 });
             }
 
-            async function loadJourney(journeyId) {
-                try {
-                    const res = await fetch(`${API_BASE}/journeys/${journeyId}`);
-                    if (!res.ok) throw new Error('Failed to load');
-                    const journey = await res.json();
-                    displayJourneyInfo(journey);
-                    // Also load markers onto map?
-                    // For now just show info; we'll have a "Load on Map" button
-                } catch (err) {
-                    showToast('Error loading journey', 'error');
+            // ==================== MAP CODE (from your file, but with credentials added) ====================
+            (function () {
+                // ==================== CONFIG ====================
+                // API_BASE is already defined outside
+
+                // ==================== STATE =====================
+                let map;
+                let currentJourney = {
+                    id: null,
+                    title: "",
+                    description: "",
+                    markers: [],
+                };
+                let journeyPath;
+                let activeMarker = null;
+
+                // ==================== MAP INIT ==================
+                function initMap() {
+                    map = L.map("map").setView([46.8182, 8.2275], 8);
+                    L.tileLayer(
+                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                        {
+                            attribution:
+                                '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                        },
+                    ).addTo(map);
+
+                    journeyPath = L.polyline([], {
+                        color: "#4263eb",
+                        weight: 4,
+                    }).addTo(map);
+
+                    map.on("click", function (e) {
+                        if (
+                            document
+                                .getElementById("mode-create")
+                                .classList.contains("active")
+                        ) {
+                            createMarker(e.latlng, { title: "New Marker" });
+                        }
+                    });
+
+                    setTimeout(() => map.invalidateSize(), 300);
                 }
-            }
 
-            function displayJourneyInfo(journey) {
-                document.getElementById('info-title').textContent = journey.title;
-                document.getElementById('info-description').textContent = journey.description || '-';
-                document.getElementById('info-marker-count').textContent = journey.markers ? journey.markers.length : 0;
-                document.getElementById('info-date').textContent = new Date(journey.created_at).toLocaleDateString() || '-';
+                // ==================== MARKER FUNCTIONS ==========
+                function createMarker(latlng, content = {}) {
+                    const marker = L.marker(latlng, {
+                        draggable: true,
+                        title: content.title || "Untitled",
+                    }).addTo(map);
 
-                // Store selected journey data for later use
-                document.getElementById('load-journey-btn').dataset.journey = JSON.stringify(journey);
-            }
+                    marker.bindPopup(
+                        `<strong>${content.title || "Untitled"}</strong>`,
+                    );
+                    marker.on("click", () => openMarkerEditor(marker));
 
-            async function saveJourneyToAPI() {
-                const title = document.getElementById('journey-title').value.trim();
-                if (!title) {
-                    showToast('Please enter a title', 'error');
-                    return;
-                }
-                const description = document.getElementById('journey-description').value;
-
-                // Build markers array from current markers
-                const markers = currentJourney.markers.map(m => {
-                    const latlng = m.getLatLng();
-                    const content = m._content || {};
-                    return {
+                    marker._content = {
+                        ...content,
                         lat: latlng.lat,
                         lng: latlng.lng,
-                        title: content.title || '',
-                        date: content.date || '',
-                        description: content.description || '',
-                        videoUrl: content.videoUrl || ''
                     };
-                });
+                    currentJourney.markers.push(marker);
+                    updateJourneyPath();
+                    addMarkerToList(marker, latlng, content);
+                    return marker;
+                }
 
-                const payload = {
-                    title,
-                    description,
-                    markers
-                };
+                function addMarkerToList(marker, latlng, content) {
+                    const container = document.getElementById(
+                        "current-markers-container",
+                    );
+                    const empty = container.querySelector(".empty-message");
+                    if (empty) empty.remove();
 
-                try {
-                    let res;
-                    if (currentJourney.id) {
-                        // update existing
-                        res = await fetch(`${API_BASE}/journeys/${currentJourney.id}`, {
-                            method: 'PUT',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify(payload)
-                        });
-                    } else {
-                        // create new
-                        res = await fetch(`${API_BASE}/journeys`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify(payload)
-                        });
+                    const div = document.createElement("div");
+                    div.className = "marker-item";
+                    div.dataset.lat = latlng.lat;
+                    div.dataset.lng = latlng.lng;
+                    div.innerHTML = `
+                        <div class="marker-title">${content.title || "Untitled"}</div>
+                        <div class="marker-coords">${latlng.lat.toFixed(4)}, ${latlng.lng.toFixed(4)}</div>
+                    `;
+                    div.addEventListener("click", () => {
+                        map.flyTo(latlng, 12);
+                        openMarkerEditor(marker);
+                    });
+                    container.appendChild(div);
+                }
+
+                function updateJourneyPath() {
+                    const coords = currentJourney.markers.map((m) => [
+                        m.getLatLng().lat,
+                        m.getLatLng().lng,
+                    ]);
+                    journeyPath.setLatLngs(coords);
+                }
+
+                // ==================== MODAL =====================
+                function openMarkerEditor(marker) {
+                    activeMarker = marker;
+                    const latlng = marker.getLatLng();
+                    const content = marker._content || {};
+
+                    document.getElementById("marker-title").value =
+                        content.title || "";
+                    document.getElementById("marker-date").value =
+                        content.date || "";
+                    document.getElementById("marker-text").value =
+                        content.description || "";
+                    document.getElementById("video-url").value =
+                        content.videoUrl || "";
+                    document.getElementById("marker-coords").value =
+                        `${latlng.lat.toFixed(6)}, ${latlng.lng.toFixed(6)}`;
+                    document
+                        .getElementById("marker-modal")
+                        .classList.add("active");
+                }
+
+                function closeModal() {
+                    document
+                        .getElementById("marker-modal")
+                        .classList.remove("active");
+                    activeMarker = null;
+                }
+
+                function saveMarker() {
+                    if (!activeMarker) return;
+                    const title =
+                        document.getElementById("marker-title").value ||
+                        "Untitled";
+                    const date = document.getElementById("marker-date").value;
+                    const description =
+                        document.getElementById("marker-text").value;
+                    const videoUrl = document.getElementById("video-url").value;
+
+                    activeMarker.setTitle(title);
+                    activeMarker.setPopupContent(`<strong>${title}</strong>`);
+                    activeMarker._content = {
+                        title,
+                        date,
+                        description,
+                        videoUrl,
+                    };
+
+                    const latlng = activeMarker.getLatLng();
+                    const items = document.querySelectorAll(
+                        "#current-markers-container .marker-item",
+                    );
+                    for (let item of items) {
+                        if (
+                            item.dataset.lat == latlng.lat &&
+                            item.dataset.lng == latlng.lng
+                        ) {
+                            item.querySelector(".marker-title").textContent =
+                                title;
+                            break;
+                        }
+                    }
+                    closeModal();
+                    showToast("Marker updated");
+                }
+
+                function deleteMarkerFromMap() {
+                    if (!activeMarker) return;
+                    const latlng = activeMarker.getLatLng();
+
+                    map.removeLayer(activeMarker);
+                    const idx = currentJourney.markers.indexOf(activeMarker);
+                    if (idx > -1) currentJourney.markers.splice(idx, 1);
+
+                    const items = document.querySelectorAll(
+                        "#current-markers-container .marker-item",
+                    );
+                    for (let item of items) {
+                        if (
+                            item.dataset.lat == latlng.lat &&
+                            item.dataset.lng == latlng.lng
+                        ) {
+                            item.remove();
+                            break;
+                        }
                     }
 
-                    if (!res.ok) throw new Error('Save failed');
-                    const data = await res.json();
-                    currentJourney.id = data.id;  // store id for future updates
-                    showToast('Journey saved!');
-                    fetchJourneys();  // refresh list
-                } catch (err) {
-                    showToast('Error saving journey', 'error');
+                    if (currentJourney.markers.length === 0) {
+                        document.getElementById(
+                            "current-markers-container",
+                        ).innerHTML =
+                            '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
+                    }
+                    updateJourneyPath();
+                    closeModal();
+                    showToast("Marker deleted");
                 }
-            }
 
-            async function deleteJourneyFromAPI(journeyId) {
-                if (!confirm('Delete this journey?')) return;
-                try {
-                    const res = await fetch(`${API_BASE}/journeys/${journeyId}`, { method: 'DELETE' });
-                    if (!res.ok) throw new Error('Delete failed');
-                    showToast('Journey deleted');
-                    fetchJourneys();
-                    // Clear info panel
-                    document.getElementById('info-title').textContent = '-';
-                    document.getElementById('info-description').textContent = '-';
-                    document.getElementById('info-marker-count').textContent = '0';
-                    document.getElementById('info-date').textContent = '-';
-                } catch (err) {
-                    showToast('Error deleting journey', 'error');
-                }
-            }
-
-            function loadJourneyMarkers(journey) {
-                // Clear existing markers
-                currentJourney.markers.forEach(m => map.removeLayer(m));
-                currentJourney.markers = [];
-                document.getElementById('current-markers-container').innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
-
-                // Add markers from journey
-                if (journey.markers) {
-                    journey.markers.forEach(m => {
-                        const latlng = L.latLng(m.lat, m.lng);
-                        const marker = createMarker(latlng, {
-                            title: m.title,
-                            date: m.date,
-                            description: m.description,
-                            videoUrl: m.videoUrl
+                // ==================== API INTERACTION (with credentials) ====================
+                async function fetchJourneys() {
+                    try {
+                        const res = await fetch(`${API_BASE}/journeys`, {
+                            credentials: "include",
                         });
-                        marker._content = { ...m }; // ensure content stored
+                        if (!res.ok) throw new Error("Failed to fetch");
+                        const journeys = await res.json();
+                        populateJourneySelect(journeys);
+                    } catch (err) {
+                        showToast("Error loading journeys", "error");
+                    }
+                }
+
+                function populateJourneySelect(journeys) {
+                    const select = document.getElementById("journey-select");
+                    select.innerHTML =
+                        '<option value="">-- Choose a journey --</option><option value="all">Show All Journeys</option>';
+                    journeys.forEach((j) => {
+                        const opt = document.createElement("option");
+                        opt.value = j.id;
+                        opt.textContent = j.title;
+                        select.appendChild(opt);
                     });
                 }
 
-                // Set current journey id and title
-                currentJourney.id = journey.id;
-                document.getElementById('journey-title').value = journey.title;
-                document.getElementById('journey-description').value = journey.description || '';
-
-                // Switch to create mode to allow editing
-                setMode('create');
-                showToast('Journey loaded on map');
-            }
-
-            // ==================== UI HELPERS ================
-            function showToast(msg, type = 'success') {
-                const toast = document.getElementById('toast');
-                document.getElementById('toast-message').textContent = msg;
-                toast.style.display = 'block';
-                setTimeout(() => { toast.style.display = 'none'; }, 3000);
-            }
-
-            function setMode(mode) {
-                const createBtn = document.getElementById('mode-create');
-                const viewBtn = document.getElementById('mode-view');
-                const createPanel = document.getElementById('create-panel');
-                const viewPanel = document.getElementById('view-panel');
-                const indicator = document.getElementById('mode-indicator');
-
-                if (mode === 'create') {
-                    createBtn.classList.add('active');
-                    viewBtn.classList.remove('active');
-                    createPanel.classList.add('active-panel');
-                    viewPanel.classList.remove('active-panel');
-                    indicator.querySelector('.indicator-text').textContent = 'Creating: New Journey';
-                    indicator.querySelector('.indicator-dot').className = 'indicator-dot creating';
-                } else {
-                    viewBtn.classList.add('active');
-                    createBtn.classList.remove('active');
-                    viewPanel.classList.add('active-panel');
-                    createPanel.classList.remove('active-panel');
-                    indicator.querySelector('.indicator-text').textContent = 'Viewing Journeys';
-                    indicator.querySelector('.indicator-dot').className = 'indicator-dot viewing';
+                async function loadJourney(journeyId) {
+                    try {
+                        const res = await fetch(
+                            `${API_BASE}/journeys/${journeyId}`,
+                            { credentials: "include" },
+                        );
+                        if (!res.ok) throw new Error("Failed to load");
+                        const journey = await res.json();
+                        displayJourneyInfo(journey);
+                    } catch (err) {
+                        showToast("Error loading journey", "error");
+                    }
                 }
-            }
 
-            function clearAllMarkers() {
-                currentJourney.markers.forEach(m => map.removeLayer(m));
-                currentJourney.markers = [];
-                document.getElementById('current-markers-container').innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
-                updateJourneyPath();
-                showToast('All markers cleared');
-            }
+                function displayJourneyInfo(journey) {
+                    document.getElementById("info-title").textContent =
+                        journey.title;
+                    document.getElementById("info-description").textContent =
+                        journey.description || "-";
+                    document.getElementById("info-marker-count").textContent =
+                        journey.markers ? journey.markers.length : 0;
+                    document.getElementById("info-date").textContent =
+                        new Date(journey.created_at).toLocaleDateString() ||
+                        "-";
+                    document.getElementById(
+                        "load-journey-btn",
+                    ).dataset.journey = JSON.stringify(journey);
+                }
 
-            // ==================== EVENT LISTENERS ============
-            document.addEventListener('DOMContentLoaded', function() {
-                initMap();
+                async function saveJourneyToAPI() {
+                    const title = document
+                        .getElementById("journey-title")
+                        .value.trim();
+                    if (!title) {
+                        showToast("Please enter a title", "error");
+                        return;
+                    }
+                    const description = document.getElementById(
+                        "journey-description",
+                    ).value;
 
-                // Mode toggles
-                document.getElementById('mode-create').addEventListener('click', () => setMode('create'));
-                document.getElementById('mode-view').addEventListener('click', () => {
-                    setMode('view');
-                    fetchJourneys();  // load list when entering view mode
-                });
+                    const markers = currentJourney.markers.map((m) => {
+                        const latlng = m.getLatLng();
+                        const content = m._content || {};
+                        return {
+                            lat: latlng.lat,
+                            lng: latlng.lng,
+                            title: content.title || "",
+                            date: content.date || "",
+                            description: content.description || "",
+                            videoUrl: content.videoUrl || "",
+                        };
+                    });
 
-                // Clear markers
-                document.getElementById('clear-markers-btn').addEventListener('click', clearAllMarkers);
+                    const payload = { title, description, markers };
 
-                // Save journey
-                document.getElementById('save-journey-btn').addEventListener('click', saveJourneyToAPI);
+                    try {
+                        let res;
+                        if (currentJourney.id) {
+                            res = await fetch(
+                                `${API_BASE}/journeys/${currentJourney.id}`,
+                                {
+                                    method: "PUT",
+                                    headers: {
+                                        "Content-Type": "application/json",
+                                    },
+                                    body: JSON.stringify(payload),
+                                    credentials: "include",
+                                },
+                            );
+                        } else {
+                            res = await fetch(`${API_BASE}/journeys`, {
+                                method: "POST",
+                                headers: { "Content-Type": "application/json" },
+                                body: JSON.stringify(payload),
+                                credentials: "include",
+                            });
+                        }
+                        if (!res.ok) throw new Error("Save failed");
+                        const data = await res.json();
+                        currentJourney.id = data.id;
+                        showToast("Journey saved!");
+                        fetchJourneys();
+                    } catch (err) {
+                        showToast("Error saving journey", "error");
+                    }
+                }
 
-                // Modal close
-                document.getElementById('close-modal').addEventListener('click', closeModal);
-                document.getElementById('close-modal-footer').addEventListener('click', closeModal);
-                document.getElementById('save-marker').addEventListener('click', saveMarker);
-                document.getElementById('delete-marker').addEventListener('click', deleteMarkerFromMap);
+                async function deleteJourneyFromAPI(journeyId) {
+                    if (!confirm("Delete this journey?")) return;
+                    try {
+                        const res = await fetch(
+                            `${API_BASE}/journeys/${journeyId}`,
+                            {
+                                method: "DELETE",
+                                credentials: "include",
+                            },
+                        );
+                        if (!res.ok) throw new Error("Delete failed");
+                        showToast("Journey deleted");
+                        fetchJourneys();
+                        document.getElementById("info-title").textContent = "-";
+                        document.getElementById(
+                            "info-description",
+                        ).textContent = "-";
+                        document.getElementById(
+                            "info-marker-count",
+                        ).textContent = "0";
+                        document.getElementById("info-date").textContent = "-";
+                    } catch (err) {
+                        showToast("Error deleting journey", "error");
+                    }
+                }
 
-                // Sidebar toggle
-                document.getElementById('toggle-sidebar').addEventListener('click', () => {
-                    document.querySelector('.sidebar').classList.toggle('collapsed');
-                });
+                function loadJourneyMarkers(journey) {
+                    currentJourney.markers.forEach((m) => map.removeLayer(m));
+                    currentJourney.markers = [];
+                    document.getElementById(
+                        "current-markers-container",
+                    ).innerHTML =
+                        '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
 
-                // Zoom controls
-                document.getElementById('zoom-in').addEventListener('click', () => map.zoomIn());
-                document.getElementById('zoom-out').addEventListener('click', () => map.zoomOut());
+                    if (journey.markers) {
+                        journey.markers.forEach((m) => {
+                            const latlng = L.latLng(m.lat, m.lng);
+                            const marker = createMarker(latlng, {
+                                title: m.title,
+                                date: m.date,
+                                description: m.description,
+                                videoUrl: m.videoUrl,
+                            });
+                            marker._content = { ...m };
+                        });
+                    }
+                    currentJourney.id = journey.id;
+                    document.getElementById("journey-title").value =
+                        journey.title;
+                    document.getElementById("journey-description").value =
+                        journey.description || "";
+                    setMode("create");
+                    showToast("Journey loaded on map");
+                }
 
-                // Fit all markers
-                document.getElementById('fit-all').addEventListener('click', () => {
-                    if (currentJourney.markers.length > 0) {
-                        const group = L.featureGroup(currentJourney.markers);
-                        map.fitBounds(group.getBounds());
+                // ==================== UI HELPERS ================
+                function showToast(msg, type = "success") {
+                    const toast = document.getElementById("toast");
+                    document.getElementById("toast-message").textContent = msg;
+                    toast.style.display = "block";
+                    setTimeout(() => {
+                        toast.style.display = "none";
+                    }, 3000);
+                }
+
+                function setMode(mode) {
+                    const createBtn = document.getElementById("mode-create");
+                    const viewBtn = document.getElementById("mode-view");
+                    const createPanel = document.getElementById("create-panel");
+                    const viewPanel = document.getElementById("view-panel");
+                    const indicator = document.getElementById("mode-indicator");
+
+                    if (mode === "create") {
+                        createBtn.classList.add("active");
+                        viewBtn.classList.remove("active");
+                        createPanel.classList.add("active-panel");
+                        viewPanel.classList.remove("active-panel");
+                        indicator.querySelector(".indicator-text").textContent =
+                            "Creating: New Journey";
+                        indicator.querySelector(".indicator-dot").className =
+                            "indicator-dot creating";
                     } else {
-                        showToast('No markers to fit', 'warning');
+                        viewBtn.classList.add("active");
+                        createBtn.classList.remove("active");
+                        viewPanel.classList.add("active-panel");
+                        createPanel.classList.remove("active-panel");
+                        indicator.querySelector(".indicator-text").textContent =
+                            "Viewing Journeys";
+                        indicator.querySelector(".indicator-dot").className =
+                            "indicator-dot viewing";
                     }
-                });
+                }
 
-                // Locate me
-                document.getElementById('locate-me').addEventListener('click', () => {
-                    map.locate({ setView: true, maxZoom: 16 });
-                });
+                function clearAllMarkers() {
+                    currentJourney.markers.forEach((m) => map.removeLayer(m));
+                    currentJourney.markers = [];
+                    document.getElementById(
+                        "current-markers-container",
+                    ).innerHTML =
+                        '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
+                    updateJourneyPath();
+                    showToast("All markers cleared");
+                }
 
-                // Journey select change
-                document.getElementById('journey-select').addEventListener('change', (e) => {
-                    const val = e.target.value;
-                    if (val && val !== 'all') {
-                        loadJourney(val);
-                    } else if (val === 'all') {
-                        // could show all journeys on map (optional)
-                    }
-                });
+                // ==================== EVENT LISTENERS (run after auth) ====================
+                function bindEventListeners() {
+                    document
+                        .getElementById("mode-create")
+                        .addEventListener("click", () => setMode("create"));
+                    document
+                        .getElementById("mode-view")
+                        .addEventListener("click", () => {
+                            setMode("view");
+                            fetchJourneys();
+                        });
+                    document
+                        .getElementById("clear-markers-btn")
+                        .addEventListener("click", clearAllMarkers);
+                    document
+                        .getElementById("save-journey-btn")
+                        .addEventListener("click", saveJourneyToAPI);
+                    document
+                        .getElementById("close-modal")
+                        .addEventListener("click", closeModal);
+                    document
+                        .getElementById("close-modal-footer")
+                        .addEventListener("click", closeModal);
+                    document
+                        .getElementById("save-marker")
+                        .addEventListener("click", saveMarker);
+                    document
+                        .getElementById("delete-marker")
+                        .addEventListener("click", deleteMarkerFromMap);
+                    document
+                        .getElementById("toggle-sidebar")
+                        .addEventListener("click", () => {
+                            document
+                                .querySelector(".sidebar")
+                                .classList.toggle("collapsed");
+                        });
+                    document
+                        .getElementById("zoom-in")
+                        .addEventListener("click", () => map.zoomIn());
+                    document
+                        .getElementById("zoom-out")
+                        .addEventListener("click", () => map.zoomOut());
+                    document
+                        .getElementById("fit-all")
+                        .addEventListener("click", () => {
+                            if (currentJourney.markers.length > 0) {
+                                const group = L.featureGroup(
+                                    currentJourney.markers,
+                                );
+                                map.fitBounds(group.getBounds());
+                            } else {
+                                showToast("No markers to fit", "warning");
+                            }
+                        });
+                    document
+                        .getElementById("locate-me")
+                        .addEventListener("click", () => {
+                            map.locate({ setView: true, maxZoom: 16 });
+                        });
+                    document
+                        .getElementById("journey-select")
+                        .addEventListener("change", (e) => {
+                            const val = e.target.value;
+                            if (val && val !== "all") loadJourney(val);
+                        });
+                    document
+                        .getElementById("load-journey-btn")
+                        .addEventListener("click", () => {
+                            const journeyData =
+                                document.getElementById("load-journey-btn")
+                                    .dataset.journey;
+                            if (journeyData)
+                                loadJourneyMarkers(JSON.parse(journeyData));
+                        });
+                    document
+                        .getElementById("edit-journey-btn")
+                        .addEventListener("click", () => {
+                            const journeyData =
+                                document.getElementById("load-journey-btn")
+                                    .dataset.journey;
+                            if (journeyData)
+                                loadJourneyMarkers(JSON.parse(journeyData));
+                        });
+                    document
+                        .getElementById("delete-journey-btn")
+                        .addEventListener("click", () => {
+                            const journeyData =
+                                document.getElementById("load-journey-btn")
+                                    .dataset.journey;
+                            if (journeyData)
+                                deleteJourneyFromAPI(
+                                    JSON.parse(journeyData).id,
+                                );
+                        });
+                    document
+                        .getElementById("add-marker-btn")
+                        .addEventListener("click", () => {
+                            setMode("create");
+                            showToast("Click on the map to add a marker");
+                        });
+                }
 
-                // Load journey on map button
-                document.getElementById('load-journey-btn').addEventListener('click', () => {
-                    const journeyData = document.getElementById('load-journey-btn').dataset.journey;
-                    if (journeyData) {
-                        loadJourneyMarkers(JSON.parse(journeyData));
-                    }
-                });
+                // Expose functions globally (optional)
+                window.createMarker = createMarker;
+                window.updateJourneyPath = updateJourneyPath;
+                window.clearAllMarkers = clearAllMarkers;
+                window.setMode = setMode;
 
-                // Edit journey (placeholder: just switch to create mode with data)
-                document.getElementById('edit-journey-btn').addEventListener('click', () => {
-                    const journeyData = document.getElementById('load-journey-btn').dataset.journey;
-                    if (journeyData) {
-                        loadJourneyMarkers(JSON.parse(journeyData));
-                    }
-                });
+                // ==================== START ====================
+                // This function is called after auth check
+                function startMap() {
+                    initMap();
+                    bindEventListeners();
+                }
+                window.startMap = startMap;
+            })();
 
-                // Delete journey
-                document.getElementById('delete-journey-btn').addEventListener('click', () => {
-                    const journeyData = document.getElementById('load-journey-btn').dataset.journey;
-                    if (journeyData) {
-                        const journey = JSON.parse(journeyData);
-                        deleteJourneyFromAPI(journey.id);
-                    }
-                });
-
-                // "Add Marker" button (just switches to create mode and hints)
-                document.getElementById('add-marker-btn').addEventListener('click', () => {
-                    setMode('create');
-                    showToast('Click on the map to add a marker');
-                });
+            // ==================== AUTHENTICATION CHECK ====================
+            document.addEventListener("DOMContentLoaded", async () => {
+                const authenticated = await checkAuth();
+                if (authenticated) {
+                    updateUserMenu();
+                    window.startMap(); // call the map initializer from the IIFE
+                }
             });
-        })();
-    </script>
-</body>
-</html>
\ No newline at end of file
+        </script>
+    </body>
+</html>
