diff --git a/index.html b/index.html
index 2df539129..4b779c36f 100755
--- a/index.html
+++ b/index.html
@@ -64,11 +64,185 @@
 	                  }
 .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-top-bar {
+        margin-top: 82px;
+}
+.release-top-bar {
+        background: rgba(20, 20, 50, 0.85);
+        backdrop-filter: blur(4px);
+        color: #fff;
+        padding: 14px 16px 18px;
+        position: relative;
+        z-index: 9;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+}
+.release-top-bar-inner {
+        display: flex;
+        align-items: flex-start;
+        gap: 20px;
+        flex-wrap: nowrap;
+}
+.release-dropdown-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+        position: relative;
+}
+.release-back-button {
+        display: none;
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        border-radius: 4px;
+        color: #fff;
+        padding: 6px 12px;
+        font-size: 0.85rem;
+        transition: background 0.2s ease, color 0.2s ease;
+}
+.release-back-button:hover,
+.release-back-button:focus {
+        background: rgba(255, 255, 255, 0.18);
+        color: #fff;
+        outline: none;
+}
+.release-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;
+        appearance: none;
+        min-width: 120px;
+        cursor: pointer;
+}
+.release-select:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.45);
+}
+.release-select-secondary {
+        display: none;
+}
+.release-dropdown-wrapper.is-secondary .release-back-button {
+        display: inline-flex;
+}
+.release-dropdown-wrapper.is-secondary .release-select-primary {
+        display: none;
+}
+.release-dropdown-wrapper.is-secondary .release-select-secondary {
+        display: inline-block;
+}
+.release-slider-container {
+        flex: 1 1 auto;
+        min-width: 0;
+}
+.release-slider-scroll {
+        overflow-x: auto;
+        padding-bottom: 12px;
+        scrollbar-width: thin;
+}
+.release-slider-scroll::-webkit-scrollbar {
+        height: 6px;
+}
+.release-slider-scroll::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+}
+.release-slider-scroll::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.35);
+        border-radius: 10px;
+}
+.release-slider-track {
+        --release-stop-width: 120px;
+        --release-stop-count: 1;
+        min-width: calc(var(--release-stop-width) * var(--release-stop-count));
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 4px 8px 0;
+}
+.release-slider-input {
+        width: 100%;
+        height: 8px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.25);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        cursor: pointer;
+        -webkit-appearance: none;
+        appearance: none;
+        outline: none;
+        position: relative;
+}
+.release-slider-input::-webkit-slider-runnable-track {
+        background: transparent;
+        border: none;
+        height: 8px;
+}
+.release-slider-input::-moz-range-track {
+        background: transparent;
+        border: none;
+        height: 8px;
+}
+.release-slider-input::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: #66CCFF;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+        margin-top: -8px;
+        cursor: pointer;
+}
+.release-slider-input::-moz-range-thumb {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: #66CCFF;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+        cursor: pointer;
+}
+.release-slider-markers {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        width: calc(var(--release-stop-width) * var(--release-stop-count));
+}
+.release-slider-markers li {
+        flex: 0 0 var(--release-stop-width);
+        text-align: center;
+        font-size: 0.78rem;
+        color: rgba(255, 255, 255, 0.72);
+        white-space: nowrap;
+        cursor: pointer;
+        user-select: none;
+}
+.release-slider-markers li.active {
+        color: #66CCFF;
+        font-weight: 600;
+}
+.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 +307,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 +325,31 @@ <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-top-bar">
+                <div class="release-top-bar-inner">
+                        <div class="release-dropdown-wrapper" id="release-dropdown-wrapper">
+                                <button aria-label="Go back to main release options" class="release-back-button" id="release-back-button" type="button">Back</button>
+                                <select aria-label="Select a release tier" class="release-select release-select-primary" id="release-primary-select">
+                                        <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 detailed release option" class="release-select release-select-secondary" id="release-secondary-select"></select>
+                        </div>
+                        <div class="release-slider-container">
+                                <div class="release-slider-scroll" aria-label="Release timeline slider">
+                                        <div class="release-slider-track" id="release-slider-track">
+                                                <input aria-label="Release timeline position" class="release-slider-input" id="release-timeline-slider" min="0" step="1" type="range" value="0">
+                                                <ul class="release-slider-markers" id="release-slider-markers"></ul>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+        </section>
 <!-- preloader <div id="loader"></div> -->
 	<div id="loader-wrapper">
 		<div class="loader-section section-left"></div>
@@ -439,19 +635,255 @@ <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 wrapper = document.getElementById('release-dropdown-wrapper');
+                var primarySelect = document.getElementById('release-primary-select');
+                var secondarySelect = document.getElementById('release-secondary-select');
+                var backButton = document.getElementById('release-back-button');
+
+                if (wrapper && primarySelect && secondarySelect && backButton) {
+                        var secondaryOptionMap = {
+                                '1': [
+                                        { value: 'prototype-overview', label: 'Prototype Overview' },
+                                        { value: 'performance-metrics', label: 'Performance Metrics' },
+                                        { value: 'deployment-notes', label: 'Deployment Notes' }
+                                ],
+                                '2': [
+                                        { value: 'integration-checklist', label: 'Integration Checklist' },
+                                        { value: 'compliance-pack', label: 'Compliance Pack' },
+                                        { value: 'field-support', label: 'Field Support' }
+                                ],
+                                '3': [
+                                        { value: 'partner-access', label: 'Partner Access' },
+                                        { value: 'training-paths', label: 'Training Paths' },
+                                        { value: 'market-insights', label: 'Market Insights' }
+                                ]
+                        };
+
+                        function resetToPrimary() {
+                                wrapper.classList.remove('is-secondary');
+                                primarySelect.value = '';
+                                secondarySelect.innerHTML = '';
+                        }
+
+                        function populateSecondaryOptions(key) {
+                                var options = secondaryOptionMap[key];
+                                if (!options) {
+                                        resetToPrimary();
+                                        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);
+                                });
+
+                                wrapper.classList.add('is-secondary');
+                                secondarySelect.focus();
+                        }
+
+                        primarySelect.addEventListener('change', function (event) {
+                                var value = event.target.value;
+                                if (value) {
+                                        populateSecondaryOptions(value);
+                                } else {
+                                        resetToPrimary();
+                                }
+                        });
+
+                        backButton.addEventListener('click', function () {
+                                resetToPrimary();
+                                primarySelect.focus();
+                        });
+
+                        secondarySelect.addEventListener('change', function () {
+                                if (!secondarySelect.value) {
+                                        return;
+                                }
+
+                                wrapper.classList.add('selection-made');
+                        });
+                }
+
+                var slider = document.getElementById('release-timeline-slider');
+                var markersContainer = document.getElementById('release-slider-markers');
+                var track = document.getElementById('release-slider-track');
+
+                if (!slider || !markersContainer || !track) {
+                        return;
+                }
+
+                var sliderMilestones = [
+                        { target: '#release-popup-free', label: 'Free' },
+                        { target: '#release-popup-q1-2024', label: 'Q1-2024 Release' },
+                        { target: '#release-popup-q2-2024', label: 'Q2-2024 Release' },
+                        { target: '#release-popup-q3-2024', label: 'Q3-2024 Release' },
+                        { target: '#release-popup-q4-2024', label: 'Q4-2024 Release' },
+                        { target: '#release-popup-q1-2025', label: 'Q1-2025 Release' },
+                        { target: '#release-popup-q2-2025', label: 'Q2-2025 Release' },
+                        { target: '#release-popup-q3-2025', label: 'Q3-2025 Release' },
+                        { target: '#release-popup-q4-2025', label: 'Q4-2025 Release' },
+                        { target: '#release-popup-restricted', label: 'Restricted Access Preview' }
+                ];
+
+                track.style.setProperty('--release-stop-count', sliderMilestones.length);
+                slider.setAttribute('max', sliderMilestones.length - 1);
+                slider.setAttribute('aria-valuemin', '0');
+                slider.setAttribute('aria-valuemax', String(sliderMilestones.length - 1));
+                slider.value = 0;
+
+                markersContainer.innerHTML = '';
+                sliderMilestones.forEach(function (milestone, index) {
+                        var item = document.createElement('li');
+                        item.textContent = milestone.label;
+                        item.dataset.index = index;
+                        markersContainer.appendChild(item);
+                });
+
+                function setActiveMarker(index) {
+                        Array.prototype.forEach.call(markersContainer.children, function (element) {
+                                element.classList.toggle('active', Number(element.dataset.index) === index);
+                        });
+                }
+
+                function openMilestone(index) {
+                        var milestone = sliderMilestones[index];
+                        if (!milestone) {
+                                return;
+                        }
+
+                        if (window.jQuery && typeof $.featherlight === 'function') {
+                                $.featherlight($(milestone.target), { persist: true });
+                        }
+                }
+
+                function updateSlider(index, shouldOpen) {
+                        var milestone = sliderMilestones[index];
+                        if (!milestone) {
+                                return;
+                        }
+
+                        slider.setAttribute('aria-valuenow', String(index));
+                        slider.setAttribute('aria-valuetext', milestone.label);
+                        setActiveMarker(index);
+
+                        if (shouldOpen) {
+                                openMilestone(index);
+                        }
+                }
+
+                slider.addEventListener('input', function (event) {
+                        var index = parseInt(event.target.value, 10);
+                        if (Number.isNaN(index)) {
+                                index = 0;
+                        }
+
+                        updateSlider(index, false);
+                });
+
+                slider.addEventListener('change', function (event) {
+                        var index = parseInt(event.target.value, 10);
+                        if (Number.isNaN(index)) {
+                                index = 0;
+                        }
+
+                        updateSlider(index, true);
+                });
+
+                markersContainer.addEventListener('click', function (event) {
+                        var target = event.target.closest('li[data-index]');
+                        if (!target) {
+                                return;
+                        }
+
+                        var index = parseInt(target.dataset.index, 10);
+                        if (Number.isNaN(index)) {
+                                return;
+                        }
+
+                        slider.value = index;
+                        updateSlider(index, true);
+                });
+
+                updateSlider(0, false);
+        });
+</script>
 </body>
 </html>