diff --git a/blog-page.html b/blog-page.html
index 2fc5401..3bdf1d3 100644
--- a/blog-page.html
+++ b/blog-page.html
@@ -3,33 +3,303 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blog Post</title>
+    <title>Blog Post – Journey Mapper</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"/>
 
     <!-- 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: Poppins (matching map page) -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/blog.css">
+    <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="/">My Blog</a></h1>
+            <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">Blog</a>
+                <a href="blog-page.html" class="active">Blog</a>
             </nav>
         </div>
     </header>
 
-    <main class="container post-page">
+    <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>
@@ -40,6 +310,7 @@
                 <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>
@@ -83,7 +354,7 @@
         </aside>
     </main>
 
-    <section class="comments container">
+    <section class="comments">
         <h3>Comments</h3>
         <div class="comments-list"></div>
     </section>
@@ -92,6 +363,7 @@
         <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>
diff --git a/map-page.html b/map-page.html
index 549c12b..4af8e23 100644
--- a/map-page.html
+++ b/map-page.html
@@ -479,9 +479,64 @@
                 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: 1;
+            display: flex;
+            overflow: hidden;
+        }
     </style>
 </head>
-<body>
+<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-page.html">Blog</a>
+            </nav>
+        </div>
+    </header>
+
     <div class="app-container">
         <!-- SIDEBAR -->
         <aside class="sidebar">
@@ -584,7 +639,7 @@
             <div class="sidebar-footer">
                 <div class="navigation">
                     <a href="#" class="nav-link"><i class="fas fa-list"></i> All Journeys</a>
-                    <a href="#" class="nav-link"><i class="fas fa-question-circle"></i> Help</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>
