diff --git a/static/datro/css/release-controls.css b/static/datro/css/release-controls.css
new file mode 100644
index 000000000..37f77ab36
--- /dev/null
+++ b/static/datro/css/release-controls.css
@@ -0,0 +1,188 @@
+.release-topbar {
+  margin: 5.5rem auto 1.5rem;
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, rgba(30, 30, 80, 0.92), rgba(40, 40, 110, 0.92));
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
+  color: #ffffff;
+  max-width: 100%;
+}
+
+@media (max-width: 768px) {
+  .release-topbar {
+    margin-top: 4.75rem;
+    padding: 0.85rem 1rem;
+  }
+}
+
+.release-dropdown-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+.release-back-button {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.release-back-button:hover,
+.release-back-button:focus {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.55);
+  outline: none;
+}
+
+.release-back-button.is-visible {
+  display: inline-flex;
+}
+
+.release-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  min-width: 160px;
+  position: relative;
+}
+
+.release-select option {
+  color: #222222;
+}
+
+.release-select:focus {
+  outline: none;
+  border-color: rgba(255, 255, 255, 0.55);
+  box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.25);
+}
+
+.release-slider {
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding: 0.35rem 0.25rem 0.2rem;
+  scroll-behavior: smooth;
+}
+
+.release-slider::-webkit-scrollbar {
+  height: 6px;
+}
+
+.release-slider::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+}
+
+.release-slider::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 999px;
+}
+
+.release-slider {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.08);
+}
+
+.release-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.55rem 0.85rem 0.55rem 1rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+  text-align: left;
+  flex: 0 0 auto;
+  min-width: max-content;
+  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.release-item.is-active {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(102, 204, 255, 0.5);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.release-toggle {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 0;
+}
+
+.release-toggle:focus {
+  outline: none;
+  text-decoration: underline;
+}
+
+.release-padlock {
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  width: 2.35rem;
+  height: 2.35rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.15rem;
+  color: #ffffff;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.release-padlock:hover,
+.release-padlock:focus {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.55);
+  outline: none;
+}
+
+.release-padlock.is-unlocked {
+  border-color: rgba(102, 204, 255, 0.8);
+  color: #66ccff;
+  background: rgba(102, 204, 255, 0.15);
+}
+
+@media (max-width: 600px) {
+  .release-item {
+    padding: 0.5rem 0.75rem;
+  }
+  .release-toggle {
+    font-size: 0.85rem;
+  }
+  .release-padlock {
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+  }
+}
+
diff --git a/static/datro/index.html b/static/datro/index.html
index d7b9d3ca5..ddd04b22a 100644
--- a/static/datro/index.html
+++ b/static/datro/index.html
@@ -34,7 +34,8 @@
 	<link href="css/featherlight.css" rel="stylesheet" type="text/css">
 	<link href="css/style.css" rel="stylesheet">
 	<link href="css/carousel.css" rel="stylesheet">
-	<link href="css/dropdownboxes.css" rel="stylesheet">
+        <link href="css/dropdownboxes.css" rel="stylesheet">
+        <link href="css/release-controls.css" rel="stylesheet">
 	<link href="css/footer.css" rel="stylesheet" type="text/css">
 	<link href="css/download-buttons.css" rel="stylesheet" type="text/css">
 	<link href="css/glyphicon.css" rel="stylesheet" type="text/css">
@@ -83,6 +84,7 @@
        <script defer src="js/jquery-3.3.1.min.js"></script>
 	<link href="html/search-box/app.css" rel="stylesheet">
         <script defer src="js/menu.js"></script>
+        <script defer src="js/release-controls.js"></script>
 
         <style>
 	html {
@@ -105,9 +107,9 @@ <h1 class="v-h">Site Navigation</h1>
 				      <span class="navbar-toggler-icon"></span>
 					 </button>
 			<div class="collapse navbar-collapse" id="navbarCollapse">
-				<ul class="navbar-nav mr-auto">
-					<li class="nav-item">
-						<a class="nav-link" href="technology.html">Portfolio</a>
+                                <ul class="navbar-nav mr-auto">
+                                        <li class="nav-item">
+                                                <a class="nav-link" href="technology.html">Technology</a>
 					</li>
 					<li class="nav-item"></li>
 					<li class="nav-item">
@@ -118,7 +120,62 @@ <h1 class="v-h">Site Navigation</h1>
 			</div>
 		</nav>
 	</header>
-	<main style="background-color: #333366;">
+        <main style="background-color: #333366;">
+                <div class="release-topbar" role="region" aria-label="Release roadmap">
+                        <div class="release-dropdown-wrapper">
+                                <button type="button" class="release-back-button" aria-hidden="true" aria-label="Return to main options">&#8592; Back</button>
+                                <span class="v-h" id="release-primary-label">Select a starting option</span>
+                                <select class="release-select release-select-initial" id="release-select-initial" aria-labelledby="release-primary-label">
+                                        <option value="">Choose an option</option>
+                                        <option value="1">1</option>
+                                        <option value="2">2</option>
+                                        <option value="3">3</option>
+                                </select>
+                                <select class="release-select release-select-secondary" id="release-select-secondary" aria-label="Select a secondary option" hidden></select>
+                        </div>
+                        <div class="release-slider" role="tablist" aria-label="Release checkpoints">
+                                <div class="release-item is-active">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="true">Free</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Free details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q1-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q1-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q2-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q2-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q3-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q3-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q4-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q4-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q1-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q1-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q2-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q2-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q3-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q3-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q4-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q4-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Restricted Access Preview</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Restricted Access Preview details" data-library-href="/library/">🔒</button>
+                                </div>
+                        </div>
+                </div>
 		<div class="carousel" data-ride="carousel" id="myCarousel">
 			<div class="carousel-inner" style="overflow:visible!important;">
 				<div class="carousel-item active">
@@ -263,7 +320,7 @@ <h2 class="carousel-title">Upgradable Now. For FREE.</h2>
 									</div>
 								</div>
 								<div class="Grid-col Grid-col--tablet-3 Grid-col--desktopSmall-2 FooterNew-link-section">
-									<h3 class="FooterNew-link-title" data-footerlink="footer-link">Portfolio <span class="Icon Icon--small Icon--light FooterNew-link-icon FooterNew-link-icon--disable"><svg class="Icon-image" height="24" viewbox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
+                                                                        <h3 class="FooterNew-link-title" data-footerlink="footer-link">Technology <span class="Icon Icon--small Icon--light FooterNew-link-icon FooterNew-link-icon--disable"><svg class="Icon-image" height="24" viewbox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
 									<path d="M12 16c-.3 0-.5-.1-.7-.3l-6-6 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6 6c-.2.2-.4.3-.7.3z"></path></svg></span> <span class="Icon Icon--small Icon--light FooterNew-link-icon FooterNew-link-icon--active"><svg class="Icon-image" viewbox="0 0 24 24" xmlns="https://www.w3.org/2000/svg">
 									<path d="M12 8.3a.91.91 0 0 1 .7.3l6 6-1.4 1.4-5.3-5.3L6.7 16l-1.4-1.4 6-6a.91.91 0 0 1 .7-.3z"></path></svg></span></h3>
 									<div class="FooterNew-link-content">
@@ -419,21 +476,5 @@ <h3 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
         <script defer src="js/smoothloader2.js"></script>
 
 <script defer src="js/footer-accordion.js"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
-
-    for (var i = 0; i < libraryLinks.length; i++) {
-      var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
-      }
-    }
-  });
-</script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/static/datro/js/release-controls.js b/static/datro/js/release-controls.js
new file mode 100644
index 000000000..05b3e4ba2
--- /dev/null
+++ b/static/datro/js/release-controls.js
@@ -0,0 +1,163 @@
+(function() {
+  var ONLINE_LIBRARY_URL = 'https://library.datro.xyz/';
+
+  function isOnlineLibrary() {
+    var host = window.location && window.location.hostname ? window.location.hostname.toLowerCase() : '';
+    return host && host.indexOf('datro.') !== -1;
+  }
+
+  function resolveLibraryHref(preferredHref) {
+    if (isOnlineLibrary()) {
+      return ONLINE_LIBRARY_URL;
+    }
+    if (preferredHref) {
+      return preferredHref;
+    }
+    return '/library/';
+  }
+
+  function rememberOriginalHref(link) {
+    if (!link.getAttribute('data-original-library-href')) {
+      link.setAttribute('data-original-library-href', link.getAttribute('href'));
+    }
+    return link.getAttribute('data-original-library-href');
+  }
+
+  function refreshLibraryLinks(context) {
+    var scope = context || document;
+    var links = scope.querySelectorAll('a[data-featherlight][href*="library"], a[data-featherlight][data-library-href]');
+    links.forEach(function(link) {
+      var originalHref = rememberOriginalHref(link);
+      link.setAttribute('href', resolveLibraryHref(originalHref));
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    refreshLibraryLinks(document);
+  });
+
+  function initWithjQuery($) {
+    var $dropdownWrapper = $('.release-dropdown-wrapper');
+    if ($dropdownWrapper.length) {
+      var $initialSelect = $dropdownWrapper.find('.release-select-initial');
+      var $secondarySelect = $dropdownWrapper.find('.release-select-secondary');
+      var $backButton = $dropdownWrapper.find('.release-back-button');
+
+      $secondarySelect.prop('hidden', true).prop('disabled', true);
+      $backButton.addClass('is-hidden').attr('aria-hidden', 'true');
+
+      $initialSelect.on('change', function() {
+        var chosenValue = $(this).val();
+        if (!chosenValue) {
+          return;
+        }
+        $secondarySelect.empty();
+        $secondarySelect.append($('<option>', { value: '', text: 'Select an option' }));
+        for (var i = 1; i <= 3; i += 1) {
+          var label = chosenValue + '.' + i;
+          $secondarySelect.append($('<option>', { value: label, text: label }));
+        }
+        $initialSelect.prop('hidden', true);
+        $backButton.removeClass('is-hidden').addClass('is-visible').attr('aria-hidden', 'false');
+        $secondarySelect.prop('hidden', false).prop('disabled', false).focus();
+      });
+
+      $backButton.on('click', function() {
+        $initialSelect.prop('hidden', false).val('');
+        $secondarySelect.prop('hidden', true).prop('disabled', true).val('');
+        $backButton.removeClass('is-visible').addClass('is-hidden').attr('aria-hidden', 'true');
+        $initialSelect.focus();
+      });
+    }
+
+    $('.release-slider').each(function() {
+      var $slider = $(this);
+      var $items = $slider.find('.release-item');
+
+      $items.each(function(index) {
+        var $item = $(this);
+        var $toggle = $item.find('.release-toggle');
+        $toggle.on('click', function() {
+          $items.removeClass('is-active');
+          $items.find('.release-toggle').attr('aria-selected', 'false');
+          $item.addClass('is-active');
+          $toggle.attr('aria-selected', 'true');
+        });
+      });
+
+      $slider.on('keydown', function(event) {
+        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+          return;
+        }
+        event.preventDefault();
+        var $current = $items.filter('.is-active');
+        var index = $items.index($current);
+        if (index < 0) {
+          index = 0;
+        }
+        if (event.key === 'ArrowRight' && index < $items.length - 1) {
+          index += 1;
+        } else if (event.key === 'ArrowLeft' && index > 0) {
+          index -= 1;
+        }
+        $items.removeClass('is-active');
+        $items.find('.release-toggle').attr('aria-selected', 'false');
+        var $target = $items.eq(index);
+        $target.addClass('is-active');
+        $target.find('.release-toggle').attr('aria-selected', 'true').focus();
+      });
+    });
+
+    $(document).on('click', '.release-padlock', function(event) {
+      event.preventDefault();
+      var $padlock = $(this);
+      var $item = $padlock.closest('.release-item');
+      var $toggle = $item.find('.release-toggle');
+      var originalIcon = $padlock.attr('data-original-icon');
+      if (!originalIcon) {
+        originalIcon = ($padlock.text() || '🔒').trim();
+        $padlock.attr('data-original-icon', originalIcon);
+      }
+      var unlockedIcon = $padlock.attr('data-unlocked-icon') || '🔓';
+      var preferredHref = $padlock.attr('data-library-href') || '/library/';
+      var popupHref = resolveLibraryHref(preferredHref);
+
+      $padlock.text(unlockedIcon).addClass('is-unlocked');
+      if ($item.length) {
+        $item.addClass('is-active');
+        $toggle.attr('aria-selected', 'true');
+      }
+
+      var featherlightOptions = {
+        iframe: popupHref,
+        iframeMaxWidth: '95%',
+        iframeWidth: 1024,
+        iframeHeight: 640,
+        afterClose: function() {
+          $padlock.text(originalIcon).removeClass('is-unlocked');
+        }
+      };
+
+      if (window.jQuery && jQuery.featherlight) {
+        jQuery.featherlight(featherlightOptions);
+      }
+    });
+
+    refreshLibraryLinks(document);
+  }
+
+  function attemptInit(attempts) {
+    if (window.jQuery) {
+      window.jQuery(initWithjQuery);
+      return;
+    }
+    if (attempts > 20) {
+      return;
+    }
+    window.setTimeout(function() {
+      attemptInit((attempts || 0) + 1);
+    }, 100);
+  }
+
+  attemptInit(0);
+})();
diff --git a/static/datro/technology.html b/static/datro/technology.html
index 0878cda74..e0b0c9831 100755
--- a/static/datro/technology.html
+++ b/static/datro/technology.html
@@ -12,7 +12,7 @@
 	</script>
 	<meta content="DATRO Technology" name="description">
 	<meta content="DATRO Consortium" name="author">
-	<title>DATRO Technology Portfolio</title>
+        <title>DATRO Technology</title>
 	<link href="img/favicons/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
 	<link href="img/favicons/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
 	<link href="img/favicons/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
@@ -38,8 +38,9 @@
 	<link href="css/store.css" media="screen" rel="stylesheet" type="text/css">
 	<link href="css/footer.css" rel="stylesheet" type="text/css">
 	<link href="css/download-buttons.css" rel="stylesheet" type="text/css">
-	<link href="css/dropdownboxes.css" rel="stylesheet">
-	<link href="css/glyphicon.css" rel="stylesheet" type="text/css">
+        <link href="css/dropdownboxes.css" rel="stylesheet">
+        <link href="css/glyphicon.css" rel="stylesheet" type="text/css">
+        <link href="css/release-controls.css" rel="stylesheet">
 	<style>
 
 html {
@@ -121,14 +122,15 @@
 
 	</style>
 
-	<script src="js/lazy.min.js">
-	</script>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
-	</script>
-	<script>
-	                        function pageLoad(){
-	                         document.getElementById('mainWrapper').style.visibility="visible";
-	                        }
+        <script src="js/lazy.min.js">
+        </script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
+        </script>
+        <script defer src="js/release-controls.js"></script>
+        <script>
+                                function pageLoad(){
+                                 document.getElementById('mainWrapper').style.visibility="visible";
+                                }
 	</script><!-- search box -->
 	<link href="html/search-box/app.css" rel="stylesheet">
 	<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
@@ -145,7 +147,7 @@
 	</script>
 	<style>
 	      body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
-	</style><noscript>
+        </style><noscript>
         <style>
            body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
         </style></noscript>
@@ -160,22 +162,6 @@
   gtag('config', 'G-6BTNPTMXBF');
 </script>
 <!-- google tracking code end -->
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    var libraryLinks = document.querySelectorAll('a[href*="library"]');
-    var hostname = window.location.hostname;
-
-    for (var i = 0; i < libraryLinks.length; i++) {
-      var link = libraryLinks[i];
-      if (hostname === 'datro.xyz') {
-        var oldHref = link.getAttribute('href');
-        var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
-        newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
-        link.setAttribute('href', newHref);
-      }
-    }
-  });
-</script>
 </head>
 <body bgcolor="#333366" onload="pageLoad()" style="font-size: 125%;">
 	<header id="mainWrapper" style="visibility: visible;">
@@ -184,8 +170,8 @@
 			<div class="collapse navbar-collapse" id="navbarCollapse">
 				<ul class="navbar-nav mr-auto">
 					<li class="nav-item"></li>
-					<li class="nav-item">
-						<a class="nav-link" href="#">Portfolio</a>
+                                        <li class="nav-item">
+                                                <a class="nav-link" href="technology.html">Technology</a>
 					</li>
 					<li class="nav-item"></li>
 					<li class="nav-item">
@@ -195,9 +181,64 @@
 			</div>
 		</nav>
 	</header>
-	<main class="main" role="main">
-		<div class="segment-top"></div>
-		<h1 class="segment-title">Portfolio</h1>
+        <main class="main" role="main">
+                <div class="release-topbar" role="region" aria-label="Release roadmap">
+                        <div class="release-dropdown-wrapper">
+                                <button type="button" class="release-back-button" aria-hidden="true" aria-label="Return to main options">&#8592; Back</button>
+                                <span class="v-h" id="release-primary-label-tech">Select a starting option</span>
+                                <select class="release-select release-select-initial" id="release-select-initial-tech" aria-labelledby="release-primary-label-tech">
+                                        <option value="">Choose an option</option>
+                                        <option value="1">1</option>
+                                        <option value="2">2</option>
+                                        <option value="3">3</option>
+                                </select>
+                                <select class="release-select release-select-secondary" id="release-select-secondary-tech" aria-label="Select a secondary option" hidden></select>
+                        </div>
+                        <div class="release-slider" role="tablist" aria-label="Release checkpoints">
+                                <div class="release-item is-active">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="true">Free</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Free details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q1-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q1-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q2-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q2-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q3-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q3-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q4-2024 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q4-2024 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q1-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q1-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q2-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q2-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q3-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q3-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Q4-2025 Release</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Q4-2025 Release details" data-library-href="/library/">🔒</button>
+                                </div>
+                                <div class="release-item">
+                                        <button type="button" class="release-toggle" role="tab" aria-selected="false">Restricted Access Preview</button>
+                                        <button type="button" class="release-padlock" aria-label="Open Restricted Access Preview details" data-library-href="/library/">🔒</button>
+                                </div>
+                        </div>
+                </div>
+                <div class="segment-top"></div>
+                <h1 class="segment-title">Technology</h1>
 		<div class="container marketing" style="margin-top:-2em;margin-bottom:3em;">
 			<div class="container">
 				<p class="product-paragraph" style="margin-top:11px!important;margin-bottom: 7em!important;font-weight:300;">See below DATR<span class="copy-left">&#xa9;</span>'s growing portfolio of technologies, including their product introduction videos and links to their respective homepages and source-code (vital statistics and compiled, downloadable software and technical documents - all contained within our single MonoREAPo</p>
@@ -674,4 +715,4 @@ <h5 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
 
 <script defer src="js/footer-accordion.js"></script>
 	</body>
-	</html>
\ No newline at end of file
+	</html>