diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..811e81b
Binary files /dev/null and b/.DS_Store differ
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
index f0924ab..bb0b7ef 100644
Binary files a/build/ui-bundle.zip and b/build/ui-bundle.zip differ
diff --git a/src/css/header.css b/src/css/header.css
index 5bd4eee..74643fb 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -21,6 +21,68 @@ body {
 
 .navbar a {
   text-decoration: none;
+  /* text-transform: uppercase; */
+}
+
+.navbar-brand a,
+.navbar-end a {
+  /* text-transform: uppercase !important; */
+}
+
+.navbar .navbar-item {
+  font-weight: 600 !important;
+  font-size: 15px;
+  font-family: 'dashicons', sans-serif;
+}
+
+.subnav .subnavbar-item {
+  color: var(--navbar-menu-font-color);
+  display: block;
+  line-height: var(--doc-line-height);
+  padding: 0.5rem 1rem;
+  font-family: 'urbane', sans-serif;
+}
+
+.subnav .subnavbar-title {
+  margin: 0.2rem 0;
+  font-weight: 700;
+  padding-bottom: 0.2rem;
+  font-family: 'urbane', sans-serif;
+}
+
+.subnav .subnavbar-item a {
+  color: black;
+  text-indent: 2px;
+  line-height: var(--doc-line-height);
+  /* padding: 0.3rem 1.2rem; */
+  /* min-height: 2rem; */
+  width: 100%;
+  font-size: 0.6rem;
+  font-weight: 200;
+  display: inline !important;
+  margin-right: 0.2rem;
+}
+
+.subnav .subnavbar-item a::after {
+  color: #bec0c2;
+  content: " | ";
+}
+
+.subnav .subnavbar-item:last-child::after {
+  color: #bec0c2;
+  content: " ";
+}
+
+.subnav .subnavbar-item a:hover {
+  color: #fc6c04;
+}
+
+.navbar-end .navbar-dropdown .navbar-item {
+  font-family: 'urbane', sans-serif;
+  margin: 0.2rem 0;
+  font-weight: 700;
+  padding-bottom: 0.2rem;
+  line-height: var(--doc-line-height);
 }
 
 .navbar-brand {
@@ -239,7 +301,6 @@ body {
   .navbar-end .navbar-link {
     /* color: var(--navbar-font-color); */
     color: #222;
-    font-weight: 400;
   }
 
   .navbar-end > a.navbar-item:hover,
@@ -267,6 +328,10 @@ body {
     position: absolute;
   }
 
+  .navbar-dropdown:nth-of-type(1) {
+    min-width: 340px;
+  }
+
   .navbar-dropdown .navbar-item {
     padding: 0.5rem 3rem 0.5rem 1rem;
     white-space: nowrap;
@@ -281,7 +346,8 @@ body {
     right: 0;
   }
 
-  .navbar-dropdown a.navbar-item:hover {
+  .navbar-dropdown a.navbar-item:hover,
+  .navbar-dropdown a.subnavbar-versions:hover {
     background: var(--navbar-menu_hover-background);
   }
 }
@@ -321,6 +387,10 @@ body {
   outline: none;
 }
 
+#search .checkbox {
+  font-weight: 400;
+}
+
 .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
   max-height: calc(100vh - 6.25rem);
 }
diff --git a/src/css/nav.css b/src/css/nav.css
index c36eb5b..88b9883 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -62,7 +62,7 @@ html.is-clipped--nav {
 
 .nav-panel-menu {
   overflow-y: scroll;
-  height: var(--nav-panel-menu-height);
+  height: calc(100% - 0.6rem);
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 95f5163..9247a3a 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -32,12 +32,12 @@
     }
   })
 
-  nav.querySelector('[data-panel=explore] .context').addEventListener('click', function () {
-    // NOTE logic assumes there are only two panels
-    find(nav, '[data-panel]').forEach(function (panel) {
-      panel.classList.toggle('is-active')
-    })
-  })
+  // nav.querySelector('[data-panel=explore] .context').addEventListener('click', function () {
+  //   // NOTE logic assumes there are only two panels
+  //   find(nav, '[data-panel]').forEach(function (panel) {
+  //     panel.classList.toggle('is-active')
+  //   })
+  // })
 
   // NOTE prevent text from being selected by double click
   menuPanel.addEventListener('mousedown', function (e) {
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index eeff719..50494eb 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -26,14 +26,46 @@
 
         <a class="navbar-item" href="#">Home</a>
         <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Docs</a>
+          <a class="navbar-link" href="#">Products</a>
           <div class="navbar-dropdown">
-            <a class="navbar-item" href="{{relativize site.components.tigergraph-server.url}}">{{site.components.tigergraph-server.title}}</a>
-            <a class="navbar-item" href="{{relativize site.components.cloud.url}}">{{site.components.cloud.title}}</a>
-            <a class="navbar-item" href="{{relativize site.components.gsql-ref.url}}">{{site.components.gsql-ref.title}}</a>
-            <a class="navbar-item" href="{{relativize site.components.graph-ml.url}}">{{site.components.graph-ml.title}}</a>
-            <a class="navbar-item" href="{{relativize site.components.gui.url}}">{{site.components.gui.title}}</a>
-            <a class="navbar-item" href="https://docs-legacy.tigergraph.com">Legacy documentation</a>
+            <div class="subnav">
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title">TigerGraph Server</div>
+
+                  {{!-- <a href="{{relativize site.components.tigergraph-server.url}}">testone</a>
+                  <a href="{{relativize site.components.tigergraph-server.url}}">testtwo</a> --}}
+
+                  <a class="subnavbar-item abc" href="{{relativize site.components.tigergraph-server.url}}" >{{site.components.tigergraph-server.title}}</a>
+                </div>
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title">TigerGraph UI tools</div>
+                  <a class="subnavbar-item" href="{{relativize site.components.gui.url}}">{{site.components.gui.title}}</a>
+                </div>
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title"> GSQL</div>
+                 
+                  <a class="subnavbar-item" href="{{relativize site.components.gsql-ref.url}}">{{site.components.gsql-ref.title}}</a>
+                </div>
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title">TigerGraph Cloud</div>
+                  <a class="subnavbar-item" href="{{relativize site.components.cloud.url}}">{{site.components.cloud.title}}</a>
+                </div>
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title">Graph Data Science </div>
+                  <a class="subnavbar-item" href="{{relativize site.components.graph-ml.url}}">{{site.components.graph-ml.title}}</a>
+                  <a class="subnavbar-item" href="{{relativize site.components.ml-workbench.url}}">{{site.components.ml-workbench.title}}</a>
+                </div>
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title">Connectors and APIs </div>
+                  <a class="subnavbar-item" href="{{relativize site.components.pytigergraph.url}}">{{site.components.pytigergraph.title}}</a> 
+                  <a class="subnavbar-item" href="{{relativize site.components.graphql.url}}">{{site.components.graphql.title}}</a>
+                </div>
+                <div class="subnavbar-item">
+                  <div class="subnavbar-title">Legacy Documentation</div>
+                  <a class="subnavbar-item" href="https://docs-legacy.tigergraph.com"> Legacy Documentation </a>
+                </div>
+              
+            </div>
           </div>
         </div>
 
diff --git a/src/partials/nav-explore.hbs b/src/partials/nav-explore.hbs
index f40ee79..3d5482d 100644
--- a/src/partials/nav-explore.hbs
+++ b/src/partials/nav-explore.hbs
@@ -1,4 +1,5 @@
-<div class="nav-panel-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
+{{#unless page.navigation}}
+<div class="nav-panel-explore is-active data-panel="explore">
   {{#if page.component}}
   <div class="context">
     <span class="title">{{page.component.title}}</span>
@@ -23,3 +24,4 @@
     {{/each}}
   </ul>
 </div>
+{{/unless}}
\ No newline at end of file