diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..348237ca
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+    "editor.tabSize": 2,
+    "files.associations": {
+        "*.css": "postcss"
+    },
+    "emmet.includeLanguages":{
+        "postcss": "css"
+    },
+    "emmet.syntaxProfiles": {
+        "postcss": "css"
+    },
+}
\ No newline at end of file
diff --git a/src/css/doc.css b/src/css/doc.css
index 4cd07788..73203a2c 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -20,6 +20,13 @@
   }
 }
 
+@media screen and (max-width: 1023.5px) {
+  .doc {
+    padding-left: var(--site-padding);
+    padding-right: var(--site-padding);
+  }
+}
+
 .doc h1,
 .doc h2,
 .doc h3,
@@ -33,38 +40,27 @@
 }
 
 .doc > h1.page:first-child {
-  /* font-size: calc(36 / var(--rem-base) * 1rem); */
   margin: calc(24 / var(--rem-base) * 1rem) 0;
 }
 
 .doc h1 {
-  /* .ds-text-h1 */
-  font-size: calc(24 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h1;
 }
 
 .doc h2 {
-  /* .ds-text-h2 */
-  font-size: calc(20 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h2;
 }
 
 .doc h3 {
-  /* .ds-text-h3  */
-  font-size: calc(20 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h3;
 }
 
 .doc h4 {
-  /* .ds-text-h4 */
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h4;
 }
 
 .doc h5 {
-  /* .ds-text-h5 */
-  font-size: calc(15 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h5;
 }
 
 .doc a.link,
@@ -119,9 +115,7 @@
   width: 2.75ex;
   margin-left: -2ex;
   visibility: hidden;
-  /* font-size: 0.8em; */
   font-weight: normal;
-  /* padding-top: 0.05em; */
   color: var(--ds-primary-soft-hover-bg);
 }
 
@@ -946,16 +940,17 @@
 }
 
 .doc .conum[data-value] {
-  border: 1px solid currentColor;
+  @include text-overline;
+
+  color: var(--ds-text-inverse);
+  background: var(--ds-text-primary);
   border-radius: 100%;
   display: inline-block;
-  font-family: var(--body-font-family);
-  font-size: calc(12 / var(--rem-base) * 1rem);
   font-style: normal;
-  line-height: 1.5;
+  line-height: 2;
   text-align: center;
-  width: 1.25em;
-  height: 1.25em;
+  width: 2em;
+  height: 2em;
   letter-spacing: -0.25ex;
   text-indent: -0.25ex;
 }
diff --git a/src/css/ds-button.css b/src/css/ds-button.css
index 6273e1e0..06758a78 100644
--- a/src/css/ds-button.css
+++ b/src/css/ds-button.css
@@ -1,9 +1,9 @@
 .ds-button {
+  @include text-button;
+
   border-radius: 6px;
-  padding: 0 12px;
-  height: 40px;
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  padding: 0 1.5rem;
+  height: var(--ds-space-5);
   transition: var(--ds-transition);
   border: 1px solid transparent;
   display: flex;
@@ -17,17 +17,17 @@
 
 /* icon button */
 .ds-button--is-icon {
-  height: 40px;
-  width: 40px;
+  height: var(--ds-space-5);
+  width: var(--ds-space-5);
   padding: 0;
 }
 
 .ds-button--leading-icon {
-  margin-right: 8px;
+  margin-right: var(--ds-space-1);
 }
 
 .ds-button--trailing-icon {
-  margin-left: 8px;
+  margin-left: var(--ds-space-1);
 }
 
 .ds-button--variant-outlined {
diff --git a/src/css/ds-input.css b/src/css/ds-input.css
index cd0ad550..2f0880a8 100644
--- a/src/css/ds-input.css
+++ b/src/css/ds-input.css
@@ -1,7 +1,7 @@
 .ds-input-container {
-  height: 40px;
-  font-size: var(--ds-space-2);
-  font-weight: 400;
+  @include text-body;
+
+  height: var(--ds-space-5);
   color: var(--ds-text-primary);
   transition: var(--ds-transition);
   border-radius: 6px;
@@ -32,7 +32,7 @@
   display: block;
   min-width: 0;
   width: 100%;
-  padding: 5.5px 10px;
+  padding: 1.4545rem 1.25rem;
 
   &::placeholder {
     color: var(--ds-text-placeholder);
@@ -44,8 +44,8 @@
 }
 
 .ds-input--leading-icon {
-  margin-left: 10px;
-  font-size: 20px;
+  margin-left: 1.25rem;
+  font-size: 2.5rem;
 }
 
 .ds-input--leading-icon + .ds-input {
@@ -53,8 +53,8 @@
 }
 
 .ds-input--trailing-icon {
-  margin-right: 10px;
-  font-size: 20px;
+  margin-right: 1.25rem;
+  font-size: 2.5rem;
 }
 
 .ds-input--trailing-icon + .ds-input {
diff --git a/src/css/ds-logo.css b/src/css/ds-logo.css
index 9243212c..7a1b7f9f 100644
--- a/src/css/ds-logo.css
+++ b/src/css/ds-logo.css
@@ -7,8 +7,8 @@ html[data-theme="light"] #datastax-docs-logo-main {
 }
 
 #datastax-docs-logo-main {
-  width: 287px;
-  height: 40px;
+  width: calc(287 / var(--rem-base) * 1rem);
+  height: calc(40 / var(--rem-base) * 1rem);
 }
 
 @media (prefers-color-scheme: light) {
@@ -25,8 +25,8 @@ html[data-theme="light"] #datastax-docs-logo-main {
 
 @media screen and (max-width: 768.5px) {
   #datastax-docs-logo-main {
-    width: 162px;
-    height: 40px;
+    width: calc(162 / var(--rem-base) * 1rem);
+    height: calc(40 / var(--rem-base) * 1rem);
   }
 
   html[data-theme="dark"] #datastax-docs-logo-main {
diff --git a/src/css/ds-typography.css b/src/css/ds-typography.css
index ea578aa3..2dbd8a9c 100644
--- a/src/css/ds-typography.css
+++ b/src/css/ds-typography.css
@@ -1,73 +1,78 @@
-.ds-text-display {
-  font-size: 2.125rem;
+@mixin text-display {
+  font-size: calc(34 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h1 {
-  font-size: 1.5rem;
+@mixin text-h1 {
+  font-size: calc(24 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h2 {
-  font-size: 1.25rem;
+@mixin text-h2 {
+  font-size: calc(20 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h3 {
-  font-size: 1rem;
+@mixin text-h3 {
+  font-size: calc(20 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h4 {
-  font-size: 0.938rem;
+@mixin text-h4 {
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-weight: 600;
+}
+
+@mixin text-h5 {
+  font-size: calc(15 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-body {
-  font-size: var(--ds-space-2);
+@mixin text-body {
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 400;
 }
 
-.ds-text-body-small {
-  font-size: 0.906rem;
+@mixin text-body-small {
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   font-weight: 400;
 }
 
-.ds-text-caption {
-  font-size: 0.906rem;
+@mixin text-caption {
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   font-weight: 500;
 }
 
-.ds-text-label {
-  font-size: 0.8125rem;
+@mixin text-label {
+  font-size: calc(13 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-overline {
-  font-size: 0.75rem;
+@mixin text-overline {
+  font-size: calc(12 / var(--rem-base) * 1rem);
   font-weight: 650;
-  letter-spacing: 0.075rem;
+  letter-spacing: calc(1.2 / var(--rem-base) * 1rem);
   text-transform: uppercase;
 }
 
-.ds-text-button {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+@mixin text-button {
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-tab {
-  font-size: 1rem;
+@mixin text-tab {
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 400;
 }
 
-.ds-text-mono {
-  font-family: "Roboto Mono", monospace;
-  font-size: 0.96875rem;
+@mixin text-mono {
+  font-size: calc(15.5 / var(--rem-base) * 1rem);
   font-weight: 400;
+  font-family: "Roboto Mono", monospace;
 }
 
-.ds-text-mono-small {
-  font-family: "Roboto Mono", monospace;
-  font-size: 0.875rem;
+@mixin text-mono-small {
+  font-size: calc(14 / var(--rem-base) * 1rem);
   font-weight: 400;
+  font-family: "Roboto Mono", monospace;
 }
diff --git a/src/css/header.css b/src/css/header.css
index 4e81a321..04cb737d 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -29,13 +29,13 @@ body {
 
 .search {
   display: flex;
-  gap: 8px;
+  gap: var(--ds-space-1);
   margin-right: auto;
 }
 
 .navbar-end {
   display: flex;
-  gap: 8px;
+  gap: var(--ds-space-1);
   align-items: center;
   flex: auto;
 }
@@ -49,7 +49,7 @@ body {
 .navbar-burger::before {
   font-family: "Material Icons Outlined", sans-serif;
   font-weight: 400;
-  font-size: 20px;
+  font-size: calc(20 / var(--rem-base) * 1rem);
   content: "\e5d2";
 }
 
@@ -60,7 +60,7 @@ body {
 #theme-toggle::before {
   font-family: "Material Icons Outlined", sans-serif;
   font-weight: 400;
-  font-size: 20px;
+  font-size: calc(20 / var(--rem-base) * 1rem);
   content: "\e51c";
   color: var(--ds-primary-400);
 }
@@ -72,7 +72,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
 @media screen and (min-width: 769px) {
   #search-input {
-    width: 200px;
+    width: calc(200 / var(--rem-base) * 1rem);
   }
 }
 
@@ -84,7 +84,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
 @media screen and (max-width: 1023.5px) {
   #get-support {
-    width: 40px;
+    width: var(--ds-space-5);
     padding: 0;
     font-size: 0;
   }
@@ -95,7 +95,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
   .navbar-brand {
     height: inherit;
-    padding: 0 var(--site-padding--mobile);
+    padding: 0 var(--site-padding);
   }
 
   .navbar-brand .navbar-item {
@@ -109,7 +109,7 @@ html[data-theme="dark"] #theme-toggle::before {
     max-height: var(--body-min-height);
     overflow-y: auto;
     overscroll-behavior: none;
-    padding: var(--site-padding--mobile);
+    padding: var(--site-padding);
     border-top: 1px solid var(--ds-divider);
     border-bottom: 1px solid var(--ds-divider);
   }
diff --git a/src/css/nav.css b/src/css/nav.css
index d231ae1a..896ced39 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -16,7 +16,7 @@
 
 @media screen and (min-width: 1024px) {
   .nav-container {
-    font-size: calc(14.5 / var(--rem-base) * 1rem);
+    /* font-size: calc(14.5 / var(--rem-base) * 1rem); */
     flex: none;
     position: static;
     top: 0;
@@ -37,14 +37,14 @@
 
 @media screen and (min-width: 769px) {
   .nav {
-    box-shadow: 0.5px 0 3px var(--nav-border-color);
+    border-right: 1px solid var(--ds-divider);
   }
 }
 
 @media screen and (min-width: 1024px) {
   .nav {
     top: var(--navbar-height);
-    box-shadow: none;
+    border: none;
     position: sticky;
     height: var(--nav-height--desktop);
   }
@@ -52,6 +52,7 @@
 
 .nav a {
   color: inherit;
+  text-decoration: none;
 }
 
 .nav .panels {
@@ -65,7 +66,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-menu {
-  overflow-y: scroll;
+  overflow-y: auto;
   overscroll-behavior: none;
   height: var(--nav-panel-menu-height);
 }
@@ -74,7 +75,7 @@ html.is-clipped--nav {
   opacity: 0.75;
 }
 
-.nav-panel-menu:not(.is-active)::after {
+/* .nav-panel-menu:not(.is-active)::after {
   content: "";
   background: rgba(0, 0, 0, 0.5);
   display: block;
@@ -83,47 +84,52 @@ html.is-clipped--nav {
   right: 0;
   bottom: 0;
   left: 0;
-}
+} */
 
 .nav-menu {
   min-height: 100%;
-  padding: 0.5rem 0.5rem 0.75rem var(--site-padding);
+  /* padding: 0.5rem 0.5rem 0.75rem var(--site-padding); */
   line-height: var(--nav-line-height);
   position: relative;
 }
 
-.nav-menu h3.title {
+/* .nav-menu h3.title {
   color: var(--nav-heading-font-color);
   font-size: inherit;
   font-weight: var(--body-font-weight-bold);
   margin: 0;
   padding: 0.25em 0 0.125em;
-}
+} */
 
 .nav-list {
+  display: flex;
+  flex-direction: column;
   list-style: none;
-  margin: 0 0 0 0.75rem;
   padding: 0;
+  margin: 0
+  /* margin: 0 0 0 0.75rem;
+  padding: 0; */
 }
 
-.nav-menu > .nav-list + .nav-list {
+/* .nav-menu > .nav-list + .nav-list {
   margin-top: 0.5rem;
-}
+} */
 
 .nav-item {
-  margin-top: 0.5em;
+  display: flex;
+  flex-direction: column;
 }
 
 /* adds some breathing room below a nested list */
-.nav-item-toggle ~ .nav-list {
+/* .nav-item-toggle ~ .nav-list {
   padding-bottom: 0.125rem;
-}
+} */
 
 /* matches list without a title */
-.nav-item[data-depth="0"] > .nav-list:first-child {
+/* .nav-item[data-depth="0"] > .nav-list:first-child {
   display: block;
   margin: 0;
-}
+} */
 
 .nav-item:not(.is-active) > .nav-list {
   display: none;
@@ -142,16 +148,69 @@ html.is-clipped--nav {
   margin-left: calc(var(--nav-line-height) * -1em);
 }
 
-.nav-item.is-active > .nav-item-toggle {
+/* .nav-item.is-active > .nav-item-toggle {
   transform: rotate(90deg);
+} */
+
+.nav-link,
+.nav-text {
+  @include text-caption;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--ds-space-1) var(--ds-space-1) var(--ds-space-1) var(--site-padding);
+  transition: var(--ds-transition);
+
+  &:hover {
+    background: var(--ds-neutral-soft-bg);
+  }
+
+  &:active {
+    background: var(--ds-neutral-soft-active-bg);
+  }
+}
+
+.nav-link > .material-icons,
+.nav-text > .material-icons {
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  margin-right: calc(8 / var(--rem-base) * 1rem);
+}
+
+li[data-depth="1"] > .nav-link,
+li[data-depth="1"] > .nav-text {
+  @include text-overline;
+
+  color: var(--ds-text-tertiary);
+  margin-top: var(--ds-space-1);
 }
 
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
-  font-weight: var(--body-font-weight-bold);
+  font-weight: 600;
+  background: var(--ds-neutral-soft-bg);
+
+  &::before {
+    border-left: 4px solid var(--ds-primary-main);
+    height: 100%;
+    content: "";
+    left: 0;
+    top: 0;
+    position: absolute;
+  }
 }
 
-.nav-panel-explore {
+.secondary-nav-list {
+  padding: 0;
+  margin: 0;
+  padding-bottom: var(--ds-space-2);
+}
+
+.secondary-nav-list .nav-item {
+  color: var(--ds-text-secondary);
+}
+
+/* .nav-panel-explore {
   background: var(--nav-background);
   display: flex;
   flex-direction: column;
@@ -160,14 +219,14 @@ html.is-clipped--nav {
   right: 0;
   bottom: 0;
   left: 0;
-}
+} */
 
-.nav-panel-explore:not(:first-child) {
+/* .nav-panel-explore:not(:first-child) {
   top: auto;
   max-height: var(--nav-panel-explore-height);
-}
+} */
 
-.nav-panel-explore .context {
+/* .nav-panel-explore .context {
   font-size: calc(14.5 / var(--rem-base) * 1rem);
   flex-shrink: 0;
   color: var(--nav-muted-color);
@@ -178,25 +237,25 @@ html.is-clipped--nav {
   justify-content: space-between;
   line-height: 1;
   height: var(--drawer-height);
-}
+} */
 
-.nav-panel-explore:not(:first-child) .context {
+/* .nav-panel-explore:not(:first-child) .context {
   cursor: pointer;
-}
+} */
 
-.nav-panel-explore .context .version {
+/* .nav-panel-explore .context .version {
   display: flex;
   align-items: inherit;
-}
+} */
 
-.nav-panel-explore .context .version::after {
+/* .nav-panel-explore .context .version::after {
   content: "";
   background: url(../img/chevron.svg) no-repeat center right / auto 100%;
   width: 1.25em;
   height: 0.75em;
-}
+} */
 
-.nav-panel-explore .components {
+/* .nav-panel-explore .components {
   line-height: var(--doc-line-height);
   flex-grow: 1;
   box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
@@ -207,52 +266,56 @@ html.is-clipped--nav {
   overscroll-behavior: none;
   max-height: 100%;
   display: block;
-}
+} */
 
-.nav-panel-explore:not(.is-active) .components {
+/* .nav-panel-explore:not(.is-active) .components {
   display: none;
-}
+} */
 
-.nav-panel-explore .component {
+/* .nav-panel-explore .component {
   display: block;
-}
+} */
 
-.nav-panel-explore .component + .component {
+/* .nav-panel-explore .component + .component {
   margin-top: 0.5rem;
-}
+} */
 
-.nav-panel-explore .component:last-child {
+/* .nav-panel-explore .component:last-child {
   margin-bottom: 0.75rem;
-}
+} */
 
-.nav-panel-explore .component .title {
+/* .nav-panel-explore .component .title {
   font-weight: var(--body-font-weight-bold);
-}
+} */
 
-.nav-panel-explore .versions {
+/* .nav-panel-explore .versions {
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
   margin-top: -0.25rem;
   line-height: 1;
   list-style: none;
-}
+} */
 
-.nav-panel-explore .component .version {
+/* .nav-panel-explore .component .version {
   margin: 0.375rem 0.375rem 0 0;
-}
+} */
 
-.nav-panel-explore .component .version a {
+/* .nav-panel-explore .component .version a {
   border: 1px solid var(--nav-border-color);
   border-radius: 0.25rem;
   opacity: 0.75;
   white-space: nowrap;
   padding: 0.125em 0.25em;
   display: inherit;
-}
+} */
 
-.nav-panel-explore .component .is-current a {
+/* .nav-panel-explore .component .is-current a {
   border-color: currentColor;
   opacity: 0.9;
   font-weight: var(--body-font-weight-bold);
-}
+} */
+
+/* .nav-link {
+  padding: 1rem 0;
+} */
diff --git a/src/css/page-versions.css b/src/css/page-versions.css
index 59dc7785..03346541 100644
--- a/src/css/page-versions.css
+++ b/src/css/page-versions.css
@@ -13,12 +13,12 @@
 .page-versions .version-menu-toggle {
   color: inherit;
   background: url(../img/chevron.svg) no-repeat;
-  background-position: right 0.5rem top 50%;
+  background-position: right 1rem top 50%;
   background-size: auto 0.75em;
   border: none;
   outline: none;
   line-height: inherit;
-  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+  padding: 1rem 3rem 1rem 1rem;
   position: relative;
   z-index: var(--z-index-page-version-menu);
   border-radius: 6px;
@@ -30,7 +30,7 @@
   flex-direction: column;
   align-items: flex-end;
   background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat;
-  padding: 1.375rem 1.5rem 0.5rem 0.5rem;
+  padding: 2.75rem 3rem 1rem 1rem;
   position: absolute;
   top: 0;
   right: 0;
@@ -45,7 +45,7 @@
 
 .page-versions .version {
   display: block;
-  padding-top: 0.5rem;
+  padding-top: 1rem;
 }
 
 .page-versions .version.is-current {
diff --git a/src/css/site.css b/src/css/site.css
index f76016ae..8cd0fb8a 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -5,11 +5,11 @@
 @import "ds-light.css";
 @import "ds-dark.css";
 @import "vars.css";
+@import "ds-typography.css";
 @import "base.css";
 @import "body.css";
 @import "nav.css";
 @import "main.css";
-@import "ds-typography.css";
 @import "ds-button.css";
 @import "ds-input.css";
 @import "ds-logo.css";
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 89c7a97e..4d9b893b 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -54,6 +54,6 @@
 
 @media screen and (max-width: 1023.5px) {
   .toolbar {
-    padding-right: var(--site-padding--mobile);
+    padding-right: var(--site-padding);
   }
 }
diff --git a/src/css/vars.css b/src/css/vars.css
index 6f96dc7e..3e6d03f2 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -104,8 +104,7 @@
   --footer-font-color: var(--ds-text-primary);
   --footer-link-font-color: var(--link-font-color);
   /* dimensions and positioning */
-  --site-padding: calc(32 / var(--rem-base) * 1rem);
-  --site-padding--mobile: calc(24 / var(--rem-base) * 1rem);
+  --site-padding: var(--ds-space-4);
   --navbar-height: calc(100 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs
index 46adf923..d9c61283 100644
--- a/src/partials/nav-menu.hbs
+++ b/src/partials/nav-menu.hbs
@@ -1,10 +1,7 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
-    {{#with @root.page.componentVersion}}
-    <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
-    {{/with}}
-{{> nav-tree navigation=this}}
+    {{> nav-tree navigation=this}}
   </nav>
 </div>
 {{/with}}
diff --git a/src/partials/nav-secondary.hbs b/src/partials/nav-secondary.hbs
new file mode 100644
index 00000000..effb0aca
--- /dev/null
+++ b/src/partials/nav-secondary.hbs
@@ -0,0 +1,26 @@
+<ul class="secondary-nav-list">
+  <li class="nav-item">
+    <a class="nav-link" href="https://www.datastax.com/" target="_self">
+      <span class="material-icons">home</span>
+      DataStax Home
+    </a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="/en/glossary/doc" target="_blank">
+      <span class="material-icons">menu_book</span>
+      Glossary
+    </a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="https://support.datastax.com/" target="_blank">
+      <span class="material-icons">support</span>
+      Support
+    </a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="https://downloads.datastax.com/" target="_blank">
+      <span class="material-icons">downloading</span>
+      Downloads
+    </a>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs
index 79e3c1e1..2e370678 100644
--- a/src/partials/nav-tree.hbs
+++ b/src/partials/nav-tree.hbs
@@ -14,8 +14,8 @@
     <span class="nav-text">{{{./content}}}</span>
     {{/if}}
     {{/if}}
-{{> nav-tree navigation=./items level=(increment ../level)}}
+    {{> nav-tree navigation=./items level=(increment ../level)}}
   </li>
   {{/each}}
 </ul>
-{{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs
index 7e0f0912..68490035 100644
--- a/src/partials/nav.hbs
+++ b/src/partials/nav.hbs
@@ -1,8 +1,10 @@
-<div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+<div class="nav-container" {{#if page.component}} data-component="{{page.component.name}}"
+  data-version="{{page.version}}" {{/if}}>
   <aside class="nav">
     <div class="panels">
-{{> nav-menu}}
-{{> nav-explore}}
+      {{> nav-menu}}
+      {{> nav-secondary}}
+      {{!-- {{> nav-explore}} --}}
     </div>
   </aside>
-</div>
+</div>
\ No newline at end of file