diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index ddfecb47..8760c723 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -1,7 +1,7 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
   background: var(--color-brand-gray6);
-  padding: 12px 30px 12px 15px;
+  padding: 12px 15px 12px 15px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,35 +46,55 @@
 .frame-dropdown {
   position: absolute;
   display: none;
-  background: var(--color-brand-white);
-  padding: 5px 15px;
-  left: -15px;
-  top: 60px;
-  border-radius: 4px;
+  left: 0;
+  top: 45px;
   z-index: 1;
-  box-shadow: 0 3px 10px -4px var(--color-brand-gray8);
+  padding: 17px 0 0;
 }
 
-.frame-dropdown .frame-dropdown-list {
+.frame-dropdown .frame-dropdown-list,
+.frame-dropdown .related {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-ul.frame-dropdown-list li {
+.frame-dropdown ul {
+  background: var(--color-brand-white);
+  min-width: 125px;
+  border-radius: 0;
+  /* box-shadow: 0 3px 10px -4px var(--color-brand-gray8); */
+  margin: 0;
+}
+
+.frame-dropdown ul li a,
+.frame-dropdown .related li a {
+  padding: 8px 0.625rem;
+  display: inline-block;
+  width: 100%;
+}
+
+.frame-dropdown .related {
+  border-left: 3px solid var(--color-brand-gray8);
+}
+
+.frame-dropdown ul.frame-dropdown-list li,
+.frame-dropdown ul.related li {
   border-bottom: 1px solid var(--color-brand-gray8);
-  padding-bottom: 5px;
-  margin-bottom: 5px;
+  /* padding-bottom: 5px; */
+  /* margin-bottom: 5px; */
 }
 
-ul.frame-dropdown-list li:last-child {
+ul.frame-dropdown-list li:last-child,
+.frame-dropdown ul.related li:last-child {
   border-bottom: 0;
   margin-bottom: 0;
   padding-bottom: 0;
 }
 
 .frame-link,
-.frame-item {
+.frame-item,
+.navbar-item {
   font-size: var(--font-small);
   color: var(--color-brand-gray4);
   text-decoration: none;
@@ -85,20 +105,17 @@ ul.frame-dropdown-list li:last-child {
 .frame-link:active,
 .frame-item:active,
 .frame-link:visited,
-.frame-item:visited {
+.frame-item:visited,
+.navbar-item:hover {
   text-decoration: none;
 }
 
-.frame-dropdown li.current {
-  font-weight: var(--weight-semibold);
-}
-
-.frame-dropdown li.current a.frame-item::before {
-  content: "\2023";
-  position: absolute;
-  margin-left: -0.75em;
+.version-control-box {
+  position: relative;
+  z-index: 9;
 }
 
-.component-frame .version::before {
-  content: "Version ";
+.frame-dropdown .column {
+  display: flex;
+  box-shadow: 0 3px 10px 0 #e5e5e5;
 }
diff --git a/src/css/nav.css b/src/css/nav.css
index 8d144494..e32905a1 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -1,8 +1,7 @@
-.nav-menu {
+.left-sidebar-menu {
   background-color: var(--color-brand-gray7);
   position: fixed;
   width: inherit;
-  overflow-y: auto;
   font-size: 1rem;
   line-height: 24px;
   scrollbar-width: thin;
@@ -17,8 +16,14 @@
   background-color: var(--color-border);
 }
 
+.nav-menu {
+  overflow-y: auto;
+  background-color: var(--color-brand-gray7);
+  height: var(--height-nav);
+}
+
 @media screen and (max-width: 768px) {
-  .nav-menu {
+  .left-sidebar-menu {
     top: 0;
     bottom: 0;
     left: 0;
@@ -28,10 +33,11 @@
 }
 
 @media screen and (min-width: 769px) {
-  .nav-menu {
+  .left-sidebar-menu {
     top: var(--height-to-body);
     margin-bottom: 1.5rem;
-    height: var(--height-nav);
+    height: 100%;
+    /* height: var(--height-nav); */
     z-index: var(--z-index-nav);
     border-left: 2px solid #eee;
     border-right: 2px solid #eee;
@@ -376,6 +382,43 @@ html.is-clipped--nav {
   margin: auto;
 } */
 
+/* .nav-menu ul.version-related-list.nav-list {
+  margin: -1.5rem 0 1.5rem;
+}
+
+.nav-menu ul.version-related-list.nav-list ul {
+  padding: 5px 0 0;
+  list-style: none;
+}
+
+.nav-menu ul.version-related-list.nav-list li a {
+  color: var(--color-brand-gray1);
+  padding: 0;
+  text-transform: capitalize;
+}
+
+.nav-menu ul.version-related-list.nav-list li a:focus,
+.nav-menu ul.version-related-list.nav-list li a:hover {
+  color: var(--color-brand-blue-secondary);
+}
+
+.nav-menu ul.version-related-list.nav-list .nav-line .in-toggle {
+  display: block;
+  position: relative;
+  width: 0;
+  height: 0;
+  margin-right: 10px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 10px solid var(--color-brand-gray5);
+}
+
+.nav-menu ul.version-related-list.nav-list .nav-line[data-depth='1'] {
+  padding-left: 1.85rem;
+}
+
+ */
+
 @media screen and (min-width: 769px) {
   .nav-control {
     display: none;
diff --git a/src/css/vars.css b/src/css/vars.css
index 5aa0e40c..10e9beef 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -66,9 +66,11 @@
   /* --height-navbar: 4rem; */
   --height-spacer: 1rem;
   --height-navbar: 6rem;
+  --height-version-control: 4.5rem;
   --height-to-body: calc(var(--height-navbar) + var(--height-spacer));
   --height-min-body: calc(100vh - var(--height-to-body));
-  --height-nav: calc(var(--height-min-body) + var(--height-spacer));
+  --height-nav: calc(var(--height-min-body) + var(--height-spacer) + var(--height-version-control));
+  --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
   /* --width-main-gutter: 1.5rem; */
   --width-main-gutter: 2.5rem;
   --width-container: 90rem;
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 8a02156b..43273375 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -34,48 +34,6 @@
   // window.addEventListener('resize', fitNavMenuInit)
 
   if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav)
-
-  // function scrollItemToMiddle (el, parentEl) {
-  // var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop
-  //   if (adjustment > 0) parentEl.scrollTop = adjustment
-  // }
-
-  // function fitNavMenuInit (e) {
-  //   window.removeEventListener('scroll', fitNavMenuOnScroll)
-  //   navMenu.element.style.height = ''
-  //   if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) {
-  //     // QUESTION should we check if x value > 0 instead?
-  //     if (window.getComputedStyle(nav).visibility === 'visible') {
-  //       if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer')
-  //       fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement)
-  //       window.addEventListener('scroll', fitNavMenuOnScroll)
-  //     }
-  //     if (currentPageItem && e.type !== 'resize') {
-  //       scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element)
-  //     }
-  //   }
-  // }
-
-  // function fitNavMenuOnScroll () {
-  //   fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement)
-  // }
-
-  // function fitNavMenu (preferredHeight, availableHeight, encroachingElement) {
-  //   var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top
-  //   navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
-  // }
-  // var navMenuControl = document.querySelector('.main-nav-parent')
-  // // var navWrap = document.querySelector('.currentNav-wrap')
-
-  // navMenuControl.addEventListener('click', function () {
-  //   //   navWrap.style.display = 'none'
-  //   for (var i = 0; i < navItems.length; i++) {
-  //     navItems[i].classList.remove('is-active')
-  //     navItems[i].classList.remove('is-inactive')
-  //   }
-  //   this.style.display = 'none'
-  // })
-
   var navMenuControl
   if (document.querySelector('.main-nav-parent')) {
     navMenuControl = document.querySelector('.main-nav-parent')
@@ -84,6 +42,7 @@
       for (var i = 0; i < navItems.length; i++) {
         navItems[i].classList.remove('is-active')
         navItems[i].classList.remove('is-inactive')
+        navItems[i].classList.remove('open')
       }
       this.style.display = 'none'
     })
@@ -92,7 +51,6 @@
   function toggleActive (e) {
     if (this.getAttribute('data-depth') === '1') {
       var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)')
-      console.log(otherNavs)
       for (var i = 0; i < otherNavs.length; i++) {
         otherNavs[i].classList.add('is-inactive')
       }
diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs
index 69925d44..c8f438e6 100644
--- a/src/partials/nav-menu.hbs
+++ b/src/partials/nav-menu.hbs
@@ -1,4 +1,8 @@
-<div class="nav-menu">
-    {{> nav-version-control}}
-    {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
-</div>
+<div class="left-sidebar-menu">
+  <div class="version-control-box">
+      {{> nav-version-control}}
+  </div>
+  <div class="nav-menu">
+      {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs
index 094e6282..1353bb18 100644
--- a/src/partials/nav-version-control.hbs
+++ b/src/partials/nav-version-control.hbs
@@ -11,18 +11,24 @@
                         <div class="frame-link-dropdowns">
                           <a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span></a>
                           <div class="frame-dropdown versions">
-                              <ul class="frame-dropdown-list">
-                              {{#each page.versions}}
-                                  <li{{#if (eq ./version @root.page.version)}} class="current"{{/if}}><a class="frame-item" href="{{relativize ./url}}">Version {{./displayVersion}}</a></li>
-                              {{/each}}
-                              </ul>
-                              {{#if (ends-with page.component.name '-sdk')}}
-                                  <ul class="related">
-                                  {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
-                                      <li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
-                                  {{/each}}
-                                  </ul>
-                              {{/if}}
+                              <div class="column">
+                                    <ul class="frame-dropdown-list">
+                                    {{#each page.versions}}
+                                        {{#unless (eq ./version @root.page.version)}}
+                                            <li><a class="frame-item" href="{{relativize ./url}}">
+                                            {{!-- {{{@root.page.component.title}}} --}}
+                                            Version {{./displayVersion}}</a></li>
+                                        {{/unless}}
+                                    {{/each}}
+                                    </ul>
+                                    {{#if (ends-with page.component.name '-sdk')}}
+                                        <ul class="related">
+                                        {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}}
+                                            <li><a class="navbar-item" href="{{relativize ./url}}">{{{./title}}}</a></li>
+                                        {{/each}}
+                                        </ul>
+                                    {{/if}}
+                                </div>
                           </div>
                         </div>
                     </div>