diff --git a/index.html b/index.html
index e40877b..3957bf8 100644
--- a/index.html
+++ b/index.html
@@ -427,6 +427,8 @@
                     <li><a href="#game">Games</a></li>
                     <li><a href="#about">About</a></li>
                     <li><a href="#contact">Contact</a></li>
+                    <a href="https://www.oblistudios.com/roadmap.html">Roadmap</a>
+
                 </ul>
             </nav>
             <a class="cta" href="#game">Playtest Signup</a>
@@ -440,7 +442,7 @@
             <div>
                 <div class="eyebrow">Home of Shardwalker</div>
                 <h1>Shardwalker: <br /> <span style="color:var(--accent)">The Mirror’s Edge</span></h1>
-                <p class="lead">Step through the fracture and master the art of shard‑switching. Fight across mirrored realms, bend environments to your will, and uncover the truth behind the Edge.</p>
+                <p class="lead">Step through the wolrd of Laim and master the art of shard‑switching. Fight across mirrored realms and uncover the truth behind the Edge.</p>
                 <div class="actions">
                     <a class="btn primary" href="#game">Learn More</a>
                     <a class="btn" href="#trailer">Watch Trailer</a>
diff --git a/roadmap.html b/roadmap.html
index 8c45f00..bb07c84 100644
--- a/roadmap.html
+++ b/roadmap.html
@@ -1,148 +1,534 @@
-﻿
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Obli.Studios Roadmap</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ObliStudios · Roadmap — Shardwalker</title>
+    <meta name="description" content="ObliStudios roadmap for Shardwalker: milestones, phases, and status." />
+    <meta name="theme-color" content="#10e39a" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Inter for UI, Cinzel for headings (optional aesthetic) -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            /* Brandable palette */
+            --bg: #0a0b10;
+            --panel: #111421;
+            --panel-2: #0e1220;
+            --text: #e8eef6;
+            --muted: #9aa6b2;
+            --line: #21283a;
+            --accent: #10e39a;
+            --accent-2: #0dc07f;
+            --planned: #3b82f6;
+            --progress: #f59e0b;
+            --done: #10b981;
+            --radius: 14px;
+            --shadow: 0 12px 28px rgba(0,0,0,.35);
+            --ring: 0 0 0 3px rgba(16, 227, 154, .25);
+        }
+
+        * {
+            box-sizing: border-box
+        }
+
+        html, body {
+            height: 100%
+        }
+
         body {
-            font-family: sans-serif;
-            background-color: #f0f0f0;
-            color: #333;
-            padding: 0;
             margin: 0;
+            font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+            color: var(--text);
+            background: radial-gradient(1000px 500px at 80% -10%, rgba(16,227,154,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(16,227,154,.06), transparent 60%), var(--bg);
         }
 
-        header {
-            background-color: #111;
-            color: white;
-            padding: 20px;
-            text-align: center;
-        }
-
+        /* Layout helpers */
         .container {
-            padding: 40px;
-            max-width: 1200px;
-            margin: auto;
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 0 20px
         }
 
-        h2 {
-            color: #00bfff;
-            margin-top: 60px;
+        .stack {
+            display: grid;
+            gap: 22px
         }
 
-        .roadmap-section {
-            margin-bottom: 60px;
+        a {
+            color: inherit;
+            text-decoration: none
         }
 
+            a:focus-visible {
+                outline: none;
+                box-shadow: var(--ring)
+            }
+
+        /* Header / Nav */
+        header {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            backdrop-filter: saturate(180%) blur(8px);
+            background: rgba(10,11,16,.6);
+            border-bottom: 1px solid rgba(255,255,255,.06);
+        }
+
+        .nav {
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .brand {
+            display: flex;
+            gap: .65rem;
+            align-items: center
+        }
+
+            .brand svg {
+                width: 30px;
+                height: 30px;
+                filter: drop-shadow(0 0 10px rgba(16,227,154,.4));
+            }
+
+        .wordmark {
+            font-weight: 800;
+            letter-spacing: .2px
+        }
+
+            .wordmark em {
+                color: var(--accent);
+                font-style: normal
+            }
+
+        .links {
+            display: flex;
+            gap: 18px;
+            color: var(--muted);
+            font-weight: 600
+        }
+
+            .links a:hover {
+                color: var(--text)
+            }
+
+        .cta {
+            display: inline-flex;
+            align-items: center;
+            gap: .5rem;
+            padding: .6rem .9rem;
+            border-radius: 999px;
+            font-weight: 700;
+            background: linear-gradient(135deg,var(--accent),var(--accent-2));
+            color: #02140d;
+            box-shadow: 0 8px 22px rgba(16,227,154,.25);
+        }
+
+        /* Hero */
+        .hero {
+            padding: 56px 0 24px;
+            border-bottom: 1px solid rgba(255,255,255,.06);
+            background: linear-gradient(180deg, rgba(16,227,154,.05), rgba(16,227,154,0) 60%);
+        }
+
+        .eyebrow {
+            color: var(--accent);
+            text-transform: uppercase;
+            letter-spacing: .22em;
+            font-weight: 800;
+        }
+
+        h1 {
+            margin: .35rem 0 .6rem;
+            font-family: Cinzel, Inter, serif;
+            font-weight: 700;
+            line-height: 1.1;
+            font-size: clamp(2rem, 1rem + 3.2vw, 3.2rem);
+        }
+
+        .lead {
+            color: var(--muted);
+            max-width: 70ch
+        }
+
+        .legend {
+            margin-top: 16px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            color: var(--muted);
+            font-size: .95rem;
+        }
+
+        .dot {
+            display: inline-flex;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 8px
+        }
+
+            .dot.planned {
+                background: var(--planned)
+            }
+
+            .dot.progress {
+                background: var(--progress)
+            }
+
+            .dot.done {
+                background: var(--done)
+            }
+
+        /* Timeline */
+        .timeline {
+            position: relative;
+            display: grid;
+            gap: 28px;
+            padding: 42px 0 64px
+        }
+
+            .timeline:before {
+                content: "";
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 22px;
+                width: 2px;
+                background: var(--line);
+            }
+
         .phase {
-            margin-bottom: 30px;
+            position: relative;
+            display: grid;
+            grid-template-columns: 46px 1fr;
+            gap: 16px;
         }
 
-            .phase h3 {
-                background-color: #00bfff;
-                color: white;
-                padding: 10px;
-                border-radius: 5px;
+        .node {
+            width: 46px;
+            height: 46px;
+            border-radius: 999px;
+            display: grid;
+            place-items: center;
+            background: var(--panel-2);
+            border: 1px solid rgba(255,255,255,.08);
+            box-shadow: 0 6px 16px rgba(0,0,0,.35);
+        }
+
+            .node svg {
+                width: 22px;
+                height: 22px
             }
 
-        ul.features {
+        .card {
+            background: var(--panel);
+            border: 1px solid rgba(255,255,255,.08);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 18px 18px 12px;
+        }
+
+            .card h3 {
+                margin: .1rem 0 .5rem;
+                font-family: Cinzel, Inter, serif;
+                letter-spacing: .2px;
+            }
+
+        .meta {
+            color: var(--muted);
+            font-size: .95rem;
+            margin: -2px 0 10px
+        }
+
+        .chips {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            margin-top: 8px
+        }
+
+        .chip {
+            display: inline-flex;
+            align-items: center;
+            gap: .4rem;
+            padding: .35rem .55rem;
+            border-radius: 10px;
+            font-weight: 700;
+            font-size: .82rem;
+            border: 1px solid rgba(255,255,255,.08);
+            background: #0c1220;
+        }
+
+            .chip.planned {
+                background: rgba(59,130,246,.1);
+                border-color: rgba(59,130,246,.35);
+                color: #c9dafd
+            }
+
+            .chip.progress {
+                background: rgba(245,158,11,.1);
+                border-color: rgba(245,158,11,.35);
+                color: #ffe2b2
+            }
+
+            .chip.done {
+                background: rgba(16,185,129,.12);
+                border-color: rgba(16,185,129,.35);
+                color: #c6f3e3
+            }
+
+        ul.feature-list {
             list-style: none;
-            padding-left: 20px;
+            padding-left: 0;
+            margin: 0
         }
 
-            ul.features li::before {
-                content: "\2714\0020";
-                color: green;
+            ul.feature-list li {
+                position: relative;
+                padding-left: 26px;
+                margin: .28rem 0;
+                color: var(--text);
             }
 
-        ul.inprogress li::before {
-            content: "\26A0\0020";
-            color: orange;
+                ul.feature-list li:before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: .45rem;
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    background: var(--accent);
+                    box-shadow: 0 0 0 3px rgba(16,227,154,.18);
+                }
+
+                ul.feature-list li.planned:before {
+                    background: var(--planned);
+                    box-shadow: none
+                }
+
+                ul.feature-list li.progress:before {
+                    background: var(--progress);
+                    box-shadow: none
+                }
+
+                ul.feature-list li.done:before {
+                    background: var(--done);
+                    box-shadow: none
+                }
+
+        /* Footer */
+        footer {
+            padding: 40px 0 64px;
+            color: var(--muted);
+            border-top: 1px solid rgba(255,255,255,.06);
         }
 
-        ul.planned li::before {
-            content: "\1F4C5\0020";
-            color: blue;
+        .foot {
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+        }
+
+        .social a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            background: #0a0c12;
+            border: 1px solid rgba(255,255,255,.06);
+            margin-left: 8px;
+        }
+
+        /* Responsive */
+        @media (max-width:720px) {
+            .timeline:before {
+                left: 18px
+            }
+
+            .phase {
+                grid-template-columns: 40px 1fr
+            }
+
+            .node {
+                width: 40px;
+                height: 40px
+            }
         }
     </style>
 </head>
 <body>
+
+    <!-- Header -->
     <header>
-        <h1>Obli.Studios Roadmap</h1>
-        <p>Track our development progress for Shardwalker</p>
+        <div class="container nav" aria-label="Main">
+            <a class="brand" href="#" aria-label="ObliStudios Home">
+                <!-- Minimal alien mark -->
+                <svg viewBox="0 0 64 64" aria-hidden="true" role="img">
+                    <defs>
+                        <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%" stop-color="#10e39a" />
+                            <stop offset="100%" stop-color="#0dc07f" />
+                        </linearGradient>
+                    </defs>
+                    <path fill="url(#g)" d="M32 6c11 0 20 8 20 20s-9 22-20 22S12 38 12 26 21 6 32 6Z" />
+                    <ellipse cx="24" cy="28" rx="7" ry="5" fill="#06090f" />
+                    <ellipse cx="40" cy="28" rx="7" ry="5" fill="#06090f" />
+                </svg>
+                <div class="wordmark">Obli<strong><em>Studios</em></strong></div>
+            </a>
+            <nav class="links" aria-label="Primary">
+                <a href="https://www.oblistudios.com">Home</a>
+                <a href="#">Roadmap</a>
+            </nav>
+            <a class="cta" href="#subscribe">Follow updates</a>
+        </div>
     </header>
-    <nav class="navbar">
-        <a href="https://www.oblistudios.com">🏠 Home</a> |
-        <a href="https://www.oblistudios.com/shardwalker.html">⚔️ Shardwalker</a> |
-        <a href="https://www.oblistudios.com/roadmap.html">🔄️ Roadmap</a>
-    </nav>
-    <div class="container">
 
-        <div class="roadmap-section">
-            <h2>⚔️ Shardwalker</h2>
+    <!-- Hero -->
+    <section class="hero">
+        <div class="container stack">
+            <span class="eyebrow">Roadmap</span>
+            <h1>Shardwalker: The Mirror’s Edge</h1>
+            <p class="lead">
+                Track our progress across phases—from core systems to launch preparation. Status chips indicate what’s
+                planned, in progress, or completed.
+            </p>
+            <div class="legend" role="list" aria-label="Status Legend">
+                <span role="listitem"><span class="dot planned"></span>Planned</span>
+                <span role="listitem"><span class="dot progress"></span>In&nbsp;Progress</span>
+                <span role="listitem"><span class="dot done"></span>Done</span>
+            </div>
+        </div>
+    </section>
 
-            <div class="phase">
-                <h3>Phase 1: Core Systems (Now–Q3 2026)</h3>
-                <ul class="inprogress">
-                    <li>Shard Core Mechanic (Shard-Switching & Attunement)</li>
-                    <li>Basic Combat Loop (PvE AI + Abilities)</li>
-                </ul>
-                <ul class="inprogress">
-                    <li>Prototype PvP Mode</li>
-                    <li>Environmental Interaction / Puzzle Drafts</li>
-                    <li>UI/UX Exploration (HUD, Menus, Codex)</li>
-                </ul>
-                <ul class="planned">
-                    <li>Open Alpha Signups</li>
+    <!-- Timeline -->
+    <main class="container timeline" aria-labelledby="roadmap">
+        <h2 id="roadmap" class="sr-only" style="position:absolute;left:-9999px;">Roadmap timeline</h2>
+
+        <!-- Phase 1 -->
+        <article class="phase">
+            <div class="node" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
+                    <circle cx="12" cy="12" r="8" />
+                </svg>
+            </div>
+            <div class="card">
+                <h3>Phase 1: Core Systems <span class="meta">(Now–Q3 2026)</span></h3>
+                <div class="chips">
+                    <span class="chip progress">In&nbsp;Progress</span>
+                </div>
+                <ul class="feature-list">
+                    <li class="progress">Shard Core Mechanic (Shard-Switching &amp; Attunement)</li>
+                    <li class="progress">Basic Combat Loop (PvE AI + Abilities)</li>
+                    <li class="progress">Prototype PvP Mode</li>
+                    <li class="progress">Environmental Interaction / Puzzle Drafts</li>
+                    <li class="progress">UI/UX Exploration (HUD, Menus, Codex)</li>
+                    <li class="planned">Open Alpha Signups</li>
                 </ul>
             </div>
+        </article>
 
-            <div class="phase">
-                <h3>Phase 2: Campaign & PvP Integration (Q4 2026)</h3>
-                <ul class="inprogress">
-                    <li>Solo Campaign Chapter 1</li>
-                    <li>First Arena PvP Mode</li>
-                </ul>
-                <ul class="inprogress">
-                    <li>Multiplayer Backend Integration (Steam / EOS)</li>
-                </ul>
-                <ul class="planned">
-                    <li>Boss Encounter Design</li>
-                    <li>Invite-Only Alpha PvP Test</li>
+        <!-- Phase 2 -->
+        <article class="phase">
+            <div class="node" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
+                    <rect x="6" y="6" width="12" height="12" rx="2" />
+                </svg>
+            </div>
+            <div class="card">
+                <h3>Phase 2: Campaign &amp; PvP Integration <span class="meta">(Q4 2026)</span></h3>
+                <div class="chips">
+                    <span class="chip progress">In&nbsp;Progress</span>
+                    <span class="chip planned">Planned</span>
+                </div>
+                <ul class="feature-list">
+                    <li class="progress">Solo Campaign Chapter 1</li>
+                    <li class="progress">First Arena PvP Mode</li>
+                    <li class="progress">Multiplayer Backend Integration (Steam / EOS)</li>
+                    <li class="planned">Boss Encounter Design</li>
+                    <li class="planned">Invite-Only Alpha PvP Test</li>
                 </ul>
             </div>
+        </article>
 
-            <div class="phase">
-                <h3>Phase 3: Polish & Scale (Q1 2027)</h3>
-                <ul class="inprogress">
-                    <li>Visual Effects, Animations, and Polish</li>
-                </ul>
-                <ul class="inprogress">
-                    <li>Inventory / Gear / Character Progression</li>
-                    <li>Cross-Shard Synergy System</li>
-                </ul>
-                <ul class="planned">
-                    <li>Leaderboards + Matchmaking Systems</li>
-                    <li>Public PvP Alpha</li>
+        <!-- Phase 3 -->
+        <article class="phase">
+            <div class="node" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
+                    <polygon points="12 5 19 19 5 19" />
+                </svg>
+            </div>
+            <div class="card">
+                <h3>Phase 3: Polish &amp; Scale <span class="meta">(Q1 2027)</span></h3>
+                <div class="chips">
+                    <span class="chip progress">In&nbsp;Progress</span>
+                    <span class="chip planned">Planned</span>
+                </div>
+                <ul class="feature-list">
+                    <li class="progress">Visual Effects, Animations, and Polish</li>
+                    <li class="progress">Inventory / Gear / Character Progression</li>
+                    <li class="progress">Cross-Shard Synergy System</li>
+                    <li class="planned">Leaderboards + Matchmaking Systems</li>
+                    <li class="planned">Public PvP Alpha</li>
                 </ul>
             </div>
+        </article>
 
-            <div class="phase">
-                <h3>Phase 4: Marketing & Launch Prep (Q2 2027)</h3>
-                <ul class="inprogress">
-                    <li>Steam Page Live</li>
-                </ul>
-                <ul class="inprogress">
-                    <li>Demo Build / Free Prologue</li>
-                    <li>Content Creator Outreach</li>
-                </ul>
-                <ul class="planned">
-                    <li>Closed Beta Signups</li>
-                    <li>Feedback-driven balance iteration</li>
+        <!-- Phase 4 -->
+        <article class="phase">
+            <div class="node" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
+                    <path d="M3 12h18M12 3v18" />
+                </svg>
+            </div>
+            <div class="card">
+                <h3>Phase 4: Marketing &amp; Launch Prep <span class="meta">(Q2 2027)</span></h3>
+                <div class="chips">
+                    <span class="chip progress">In&nbsp;Progress</span>
+                    <span class="chip planned">Planned</span>
+                </div>
+                <ul class="feature-list">
+                    <li class="progress">Steam Page Live</li>
+                    <li class="progress">Demo Build / Free Prologue</li>
+                    <li class="progress">Content Creator Outreach</li>
+                    <li class="planned">Closed Beta Signups</li>
+                    <li class="planned">Feedback-driven balance iteration</li>
                 </ul>
             </div>
-        </div>    
+        </article>
+    </main>
+
+    <!-- Footer -->
+    <footer>
+        <div class="container foot">
+            <small>© <span id="y"></span> ObliStudios. All rights reserved.</small>
+            <div class="social" id="subscribe" aria-label="Social links">
+                <a href="https://twitter.com/obli_studios" title="Follow on X (Twitter)">
+                    <!-- simple X mark -->
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><path d="M3 3l18 18M21 3L3 21" /></svg>
+                </a>
+                <a href="#" title="Discord (coming soon)">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><circle cx="12" cy="12" r="9" /></svg>
+                </a>
+                <a href="#" title="YouTube (coming soon)">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><polygon points="10,8 16,12 10,16" /></svg>
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+    document.getElementById('y').textContent = new Date().getFullYear();
+    </script>
 </body>
 </html>
