diff --git a/index.html b/index.html
index 2df539129..986f8bd4e 100755
--- a/index.html
+++ b/index.html
@@ -64,11 +64,132 @@
 	                  }
 .v-h {
     position: absolute !important;
-    height: 1px; width: 1px; 
+    height: 1px; width: 1px;
     overflow: hidden;
     clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
 }
+#mainWrapper + .release-timeline-bar {
+        margin-top: 82px;
+}
+.release-timeline-bar {
+        background: rgba(20, 20, 50, 0.88);
+        color: #fff;
+        padding: 16px;
+        position: relative;
+        z-index: 9;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+}
+.release-timeline-inner {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        flex-wrap: nowrap;
+}
+.release-tier-controls {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
+}
+.release-tier-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        border-radius: 4px;
+        color: #fff;
+        padding: 6px 14px;
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: background 0.2s ease, color 0.2s ease;
+}
+.release-tier-button:hover,
+.release-tier-button:focus {
+        background: rgba(255, 255, 255, 0.18);
+        color: #fff;
+        outline: none;
+}
+.release-tier-select {
+        background: rgba(14, 14, 35, 0.85);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        border-radius: 4px;
+        color: #fff;
+        padding: 6px 32px 6px 12px;
+        font-size: 0.85rem;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        min-width: 120px;
+        cursor: pointer;
+}
+.release-tier-select:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.45);
+}
+.release-stage-scroll {
+        overflow-x: auto;
+        scrollbar-width: thin;
+        padding-bottom: 4px;
+        flex: 1 1 auto;
+        min-width: 0;
+}
+.release-stage-scroll::-webkit-scrollbar {
+        height: 6px;
+}
+.release-stage-scroll::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+}
+.release-stage-scroll::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.35);
+        border-radius: 10px;
+}
+.release-stage-track {
+        display: inline-flex;
+        gap: 12px;
+        min-width: max-content;
+        padding: 4px 4px 0;
+        align-items: center;
+}
+.release-stage-button {
+        position: relative;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        color: #fff;
+        padding: 10px 18px;
+        border-radius: 999px;
+        font-size: 0.85rem;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+.release-stage-button:hover,
+.release-stage-button:focus {
+        background: rgba(102, 204, 255, 0.18);
+        border-color: rgba(102, 204, 255, 0.75);
+        outline: none;
+}
+.release-stage-button[aria-current="true"] {
+        background: #66CCFF;
+        color: #142032;
+        border-color: #fff;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+        transform: translateY(-2px);
+}
+.release-popup-content {
+        display: none;
+        max-width: 520px;
+}
+.release-popup-content h2 {
+        font-size: 1.4rem;
+        margin-bottom: 0.75rem;
+        color: #333366;
+}
+.release-popup-content p {
+        margin-bottom: 0.5rem;
+        line-height: 1.5;
+}
 #bg-video {
     position: fixed;
     top: 0;
@@ -133,11 +254,11 @@
 		<source src="https://wayback.datro.xyz/2025-10-19_timeline-background_video_v0.0.1.mp4" type="video/mp4">
 		Your browser does not support the video tag.
 	</video>
-	<header id="mainWrapper">
-		<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-			 <h1 class="v-h">Site Navigation</h1>
+        <header id="mainWrapper">
+                <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+                         <h1 class="v-h">Site Navigation</h1>
                          <a data-content="DATRO" href="index.html" title="DATRO">
-			  <img alt="DATRO Header Logo" class="navbar-brand" src="static/datro/img/datro_logo.webp"></a>
+                          <img alt="DATRO Header Logo" class="navbar-brand" src="static/datro/img/datro_logo.webp"></a>
 				   <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarCollapse" data-toggle="collapse" type="button">
 				      <span class="navbar-toggler-icon"></span>
 					 </button>
@@ -151,9 +272,37 @@ <h1 class="v-h">Site Navigation</h1>
 						<a data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" class="nav-link" href="static/library/">Library</a>
 					</li>
 				</ul>
-			</div>
-		</nav>
-	</header>
+                        </div>
+                </nav>
+        </header>
+        <section aria-label="Release timeline" class="release-timeline-bar">
+                <div class="release-timeline-inner">
+                        <div class="release-tier-controls" id="release-tier-controls">
+                                <button aria-label="Go back to primary options" class="release-tier-button" id="release-menu-back" type="button" hidden>Back</button>
+                                <select aria-label="Select an option" class="release-tier-select" id="release-tier-primary">
+                                        <option selected value="">Select option</option>
+                                        <option value="1">1</option>
+                                        <option value="2">2</option>
+                                        <option value="3">3</option>
+                                </select>
+                                <select aria-label="Select a follow-on option" class="release-tier-select" id="release-tier-secondary" hidden></select>
+                        </div>
+                        <div aria-label="Release stages" class="release-stage-scroll">
+                                <div class="release-stage-track" id="release-stage-track">
+                                        <button aria-controls="release-popup-free" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-free" type="button">Free</button>
+                                        <button aria-controls="release-popup-q1-2024" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q1-2024" type="button">Q1-2024 Release</button>
+                                        <button aria-controls="release-popup-q2-2024" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q2-2024" type="button">Q2-2024 Release</button>
+                                        <button aria-controls="release-popup-q3-2024" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q3-2024" type="button">Q3-2024 Release</button>
+                                        <button aria-controls="release-popup-q4-2024" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q4-2024" type="button">Q4-2024 Release</button>
+                                        <button aria-controls="release-popup-q1-2025" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q1-2025" type="button">Q1-2025 Release</button>
+                                        <button aria-controls="release-popup-q2-2025" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q2-2025" type="button">Q2-2025 Release</button>
+                                        <button aria-controls="release-popup-q3-2025" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q3-2025" type="button">Q3-2025 Release</button>
+                                        <button aria-controls="release-popup-q4-2025" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-q4-2025" type="button">Q4-2025 Release</button>
+                                        <button aria-controls="release-popup-restricted" aria-haspopup="dialog" class="release-stage-button" data-target="#release-popup-restricted" type="button">Restricted Access Preview</button>
+                                </div>
+                        </div>
+                </div>
+        </section>
 <!-- preloader <div id="loader"></div> -->
 	<div id="loader-wrapper">
 		<div class="loader-section section-left"></div>
@@ -439,19 +588,230 @@ <h3 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
 			</div>
 		</footer>
 	</div>
+        <div aria-hidden="true">
+                <div class="release-popup-content" id="release-popup-free">
+                        <h2>Free Tier Access</h2>
+                        <p>Explore the open DATRO experience with unrestricted community features and public knowledge base materials.</p>
+                        <p>Ideal for curious visitors who want to understand the vision and get started without commitment.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q1-2024">
+                        <h2>Q1-2024 Release</h2>
+                        <p>Foundational connectivity services, platform login, and initial collaboration toolset are scheduled for this window.</p>
+                        <p>Includes onboarding resources for early participants and technical partners.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q2-2024">
+                        <h2>Q2-2024 Release</h2>
+                        <p>Expands on the Q1 build with integrated analytics dashboards and enhanced governance controls.</p>
+                        <p>Designed for teams preparing pilot deployments and real-world field trials.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q3-2024">
+                        <h2>Q3-2024 Release</h2>
+                        <p>Introduces partner APIs, data-exchange improvements, and wider interoperability for municipal roll-outs.</p>
+                        <p>Engineering notes include upgrade strategies and migration helpers.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q4-2024">
+                        <h2>Q4-2024 Release</h2>
+                        <p>Focuses on resilience testing, internationalisation, and live support readiness.</p>
+                        <p>Recommended for operators scaling infrastructure beyond pilot programmes.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q1-2025">
+                        <h2>Q1-2025 Release</h2>
+                        <p>Launches automated deployment pipelines and telemetry bundling for enterprise partners.</p>
+                        <p>Highlights include extended documentation sets and curated training paths.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q2-2025">
+                        <h2>Q2-2025 Release</h2>
+                        <p>Delivers marketplace integrations, subscription tooling, and improved SLA reporting.</p>
+                        <p>Perfect for organisations aligning business operations with DATRO infrastructure.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q3-2025">
+                        <h2>Q3-2025 Release</h2>
+                        <p>Centres on automation, AI-assisted monitoring, and policy templates for distributed governance.</p>
+                        <p>Provides action plans for compliance and regulatory reviews.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-q4-2025">
+                        <h2>Q4-2025 Release</h2>
+                        <p>Marks the full ecosystem release with federation services and comprehensive support tiers.</p>
+                        <p>Includes launch readiness kits and expanded customer success programmes.</p>
+                </div>
+                <div class="release-popup-content" id="release-popup-restricted">
+                        <h2>Restricted Access Preview</h2>
+                        <p>Request invitation-only access to experimental features, sandbox datasets, and early product concepts.</p>
+                        <p>Ideal for strategic partners collaborating on the roadmap beyond 2025.</p>
+                </div>
+        </div>
         <script src="static/datro/js/bootstrap.min.js"></script>
-	<script src="static/datro/js/holder2.js">
-	</script>
-	<script src="static/datro/js/carousel-dropdown.js">
-	</script>
+        <script src="static/datro/js/holder2.js">
+        </script>
+        <script src="static/datro/js/carousel-dropdown.js">
+        </script>
 	<script src="static/datro/js/currencydrop.js">
 	</script>
 	<script src="static/datro/js/scale.fix.js">
 	</script>
-	<script src="static/datro/html/featherlight/release/featherlight.min.js">
-	</script>
-	<script src="static/datro/js/smoothloader.js"></script>
+        <script src="static/datro/html/featherlight/release/featherlight.min.js">
+        </script>
+        <script src="static/datro/js/smoothloader.js"></script>
 <script defer src="static/datro/js/footer-accordion.js"></script>
+<script>
+        document.addEventListener('DOMContentLoaded', function () {
+                var controls = document.getElementById('release-tier-controls');
+                var primarySelect = document.getElementById('release-tier-primary');
+                var secondarySelect = document.getElementById('release-tier-secondary');
+                var backButton = document.getElementById('release-menu-back');
+
+                if (controls && primarySelect && secondarySelect && backButton) {
+                        var secondaryOptionMap = {
+                                '1': [
+                                        { value: '1a', label: 'Community Overview' },
+                                        { value: '1b', label: 'Roadmap Highlights' },
+                                        { value: '1c', label: 'Support Channels' }
+                                ],
+                                '2': [
+                                        { value: '2a', label: 'Deployment Guides' },
+                                        { value: '2b', label: 'Pilot Programmes' },
+                                        { value: '2c', label: 'Integration Steps' }
+                                ],
+                                '3': [
+                                        { value: '3a', label: 'Partner Resources' },
+                                        { value: '3b', label: 'Training Tracks' },
+                                        { value: '3c', label: 'Market Access' }
+                                ]
+                        };
+
+                        function resetMenus() {
+                                controls.classList.remove('is-secondary', 'selection-made');
+                                backButton.hidden = true;
+                                primarySelect.hidden = false;
+                                primarySelect.value = '';
+                                secondarySelect.hidden = true;
+                                secondarySelect.innerHTML = '';
+                        }
+
+                        function buildSecondaryMenu(key) {
+                                var options = secondaryOptionMap[key];
+                                if (!options) {
+                                        resetMenus();
+                                        return;
+                                }
+
+                                secondarySelect.innerHTML = '';
+
+                                var placeholder = document.createElement('option');
+                                placeholder.value = '';
+                                placeholder.textContent = 'Select detail';
+                                placeholder.disabled = true;
+                                placeholder.selected = true;
+                                secondarySelect.appendChild(placeholder);
+
+                                options.forEach(function (entry) {
+                                        var option = document.createElement('option');
+                                        option.value = entry.value;
+                                        option.textContent = entry.label;
+                                        secondarySelect.appendChild(option);
+                                });
+
+                                controls.classList.add('is-secondary');
+                                primarySelect.hidden = true;
+                                secondarySelect.hidden = false;
+                                backButton.hidden = false;
+                                secondarySelect.focus();
+                        }
+
+                        primarySelect.addEventListener('change', function (event) {
+                                var value = event.target.value;
+                                if (value) {
+                                        buildSecondaryMenu(value);
+                                } else {
+                                        resetMenus();
+                                }
+                        });
+
+                        backButton.addEventListener('click', function () {
+                                resetMenus();
+                                primarySelect.focus();
+                        });
+
+                        secondarySelect.addEventListener('change', function () {
+                                if (secondarySelect.value) {
+                                        controls.classList.add('selection-made');
+                                }
+                        });
+                }
+
+                var stageTrack = document.getElementById('release-stage-track');
+
+                if (!stageTrack) {
+                        return;
+                }
+
+                var stageButtons = stageTrack.querySelectorAll('.release-stage-button');
+
+                if (!stageButtons.length) {
+                        return;
+                }
+
+                function setActive(button) {
+                        Array.prototype.forEach.call(stageButtons, function (item) {
+                                item.removeAttribute('aria-current');
+                        });
+
+                        if (button) {
+                                button.setAttribute('aria-current', 'true');
+                        }
+                }
+
+                function openPopup(button) {
+                        var target = button ? button.getAttribute('data-target') : null;
+                        if (!target) {
+                                return;
+                        }
+
+                        if (window.jQuery && typeof $.featherlight === 'function') {
+                                $.featherlight($(target), { persist: true });
+                        }
+                }
+
+                function focusButton(button) {
+                        if (!button) {
+                                return;
+                        }
+
+                        button.focus();
+                        if (typeof button.scrollIntoView === 'function') {
+                                button.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+                        }
+                }
+
+                Array.prototype.forEach.call(stageButtons, function (button, index) {
+                        button.setAttribute('data-index', index);
+
+                        button.addEventListener('click', function () {
+                                setActive(button);
+                                openPopup(button);
+                        });
+
+                        button.addEventListener('keydown', function (event) {
+                                var nextButton;
+
+                                if (event.key === 'ArrowRight') {
+                                        event.preventDefault();
+                                        nextButton = stageButtons[index + 1] || stageButtons[0];
+                                } else if (event.key === 'ArrowLeft') {
+                                        event.preventDefault();
+                                        nextButton = stageButtons[index - 1] || stageButtons[stageButtons.length - 1];
+                                } else {
+                                        return;
+                                }
+
+                                setActive(nextButton);
+                                focusButton(nextButton);
+                        });
+                });
+
+                setActive(stageButtons[0]);
+        });
+</script>
 </body>
 </html>