diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index ad850cc657..17ec8283fb 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -1,4 +1,3 @@
-
 // Disable sidenav animations while starting the app
 // See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
 .starting.mat-sidenav-transition {
@@ -9,6 +8,7 @@
   }
 }
 
+// SMALL SCREEN -> TOP NAV SLIDES INTO SIDENAV
 aio-nav-menu.top-menu .vertical-menu-item  {
   background-color: $lightgray;
   text-transform: uppercase;
@@ -22,10 +22,10 @@ md-sidenav.mat-sidenav.sidenav {
   min-width: 260px;
   background-color: $offwhite;
   box-shadow: 6px 0 6px rgba(0,0,0,0.10);
-}
 
-md-sidenav.mat-sidenav.sidenav.collapsed {
+  &.collapsed {
     padding-top: 32px;
+  }
 }
 
 md-sidenav-container.sidenav-container {
@@ -53,9 +53,9 @@ md-sidenav-container div.mat-sidenav-content {
   display: block;
   max-width: 260px;
   overflow-wrap: break-word;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 16px;
   text-decoration: none;
   text-align: left;
   transition-duration: 180ms;
@@ -66,7 +66,6 @@ md-sidenav-container div.mat-sidenav-content {
   outline: none;
 
   &:hover {
-    text-shadow: 0 0 5px #ffffff;
     background-color: $lightgray;
 
   }
@@ -74,15 +73,10 @@ md-sidenav-container div.mat-sidenav-content {
   //icons _within_ nav
   .mat-icon {
     position: absolute;
-    top: 6px;
-    margin-left: 10px;
+    top: 0;
+    right: 8px;
+    margin: 4px;
   }
-
-  @include bp(tiny) {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
 }
 
 .vertical-menu-item.selected {
@@ -125,7 +119,7 @@ a.selected.level-1,
   font-family: $main-font;
   font-size: 14px;
   font-weight: 400;
-  padding-left: 10px;
+  padding-left: 16px;
   transition: background-color 0.2s;
 }
 
@@ -142,12 +136,10 @@ a.selected.level-1,
   font-family: $main-font;
   font-size: 14px;
   color: $mediumgray;
-  padding-left: 30px;
 }
 
 .level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
   @include rotate(90deg);
-  top: 10px;
 }
 
 .level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
@@ -173,12 +165,22 @@ aio-nav-menu.top-menu {
 
 }
 
-// Angular version selector
+// Angular Version Selector
 md-sidenav .doc-version {
   padding: 10px;
+  border-top: 1px solid $lightgray;
 
-  &:hover {
-    text-shadow: 0 0 5px #ffffff;
-    background-color: $lightgray;
+  select {
+    outline: none;
+    width: 100%;
+    background: rgba($lightgray, 0.5);
+    height: 32px;
+    border: 1px solid $lightgray;
+    color: $darkgray;
+
+    option {
+      font-family: $main-font;
+      font-size: 14px;
+    }
   }
 }