diff --git a/eng/docgeneration/templates/matthews/styles/main.css b/eng/docgeneration/templates/matthews/styles/main.css
index 10df6c1a5d903..21eb0c3567f36 100644
--- a/eng/docgeneration/templates/matthews/styles/main.css
+++ b/eng/docgeneration/templates/matthews/styles/main.css
@@ -255,6 +255,35 @@ article h4 {
 .navbar-inverse .navbar-link:hover {
   color: #ecdbff;
 }
+.versionarrow {
+  margin-left: 0.8em;
+  margin-top: -1.5em;
+  margin-bottom: -1em;
+  padding: 1em;
+}
+
+.versionarrow::before {
+  position: absolute;
+  content: '';
+  width: 0;
+  height: 0;
+  border: .5em solid transparent;
+  border-left-color: gray;
+  transform-origin: 0 50%;
+  transition: transform .1s;
+  margin-top: 0.2em;
+}
+
+
+.versionarrow.disable {
+  text-decoration: line-through;
+}
+
+.versionarrow.down::before {
+  transform: rotate(90deg);
+  margin-top: 0em;
+  transition: transform .1s;
+}
 
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
diff --git a/eng/docgeneration/templates/matthews/styles/main.js b/eng/docgeneration/templates/matthews/styles/main.js
index fbf97f0702987..449afbecc96be 100644
--- a/eng/docgeneration/templates/matthews/styles/main.js
+++ b/eng/docgeneration/templates/matthews/styles/main.js
@@ -68,6 +68,7 @@ $(function () {
 })
 
 function httpGetAsync(targetUrl, callback) {
+    console.log(targetUrl);
     var xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
@@ -77,25 +78,56 @@ function httpGetAsync(targetUrl, callback) {
     xmlHttp.send(null);
 }
 
-function populateIndexList(selector, packageName) {
-    url = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/versions"
-
-    httpGetAsync(url, function (responseText) {
-
-        var publishedversions = document.createElement("ul")
+function httpGetLatestAsync(targetUrl, latestVersions, packageName) {
+    httpGetAsync(targetUrl, function (responseText) {
         if (responseText) {
-            options = responseText.match(/[^\r\n]+/g)
+            version = responseText.match(/[^\r\n]+/g)
+            $(latestVersions).append('<li><a href="' + getPackageUrl(SELECTED_LANGUAGE, packageName, version) + '" target="_blank">' + version + '</a></li>')
+        }             
+    })
+}
 
-            for (var i in options) {
-                $(publishedversions).append('<li><a href="' + getPackageUrl(SELECTED_LANGUAGE, packageName, options[i]) + '" target="_blank">' + options[i] + '</a></li>')
-            }
+function populateIndexList(selector, packageName) {
+    var url = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/versions"
+    var latestGAUrl = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/latest-ga"
+    var latestPreviewUrl = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/latest-preview"
+    var latestVersions = document.createElement("ul")
+    httpGetLatestAsync(latestGAUrl, latestVersions, packageName)
+    httpGetLatestAsync(latestPreviewUrl, latestVersions, packageName)
+    var publishedVersions = $('<ul style="display: none;"></ul>')
+    var collapsible = $('<div class="versionarrow">&nbsp;&nbsp;&nbsp;Other versions</div>')
+
+    $(selector).after(latestVersions)
+    $(latestVersions).after(collapsible)
+    $(collapsible).after(publishedVersions)
+
+    $(collapsible).on('click', function(event) {
+        event.preventDefault();
+        if (collapsible.hasClass('disable')) {
+            return
         }
-        else {
-            $(publishedversions).append('<li>No discovered versions present in blob storage.</li>')
+        $(this).toggleClass('down')
+        if ($(this).hasClass('down')) {
+            if (!$(selector).hasClass('loaded')){
+                httpGetAsync(url, function (responseText) {
+                    if (responseText) {
+                        options = responseText.match(/[^\r\n]+/g)
+                        for (var i in options) {
+                            $(publishedVersions).append('<li><a href="' + getPackageUrl(SELECTED_LANGUAGE, packageName, options[i]) + '" target="_blank">' + options[i] + '</a></li>')
+    
+                        }
+                    }
+                    else {
+                        $(publishedVersions).append('<li>No discovered versions present in blob storage.</li>')
+                    }                
+                    $(selector).addClass("loaded")
+                })
+            }
+            $(publishedVersions).show()
+        } else {
+            $(publishedVersions).hide()
         }
-
-        $(selector).after(publishedversions)
-    })
+    });
 }
 
 function getPackageUrl(language, package, version) {