diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index cf14381..d6b5592 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -90,7 +90,7 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
 // @import "bulma/sass/components/breadcrumb"
 @import "bulma/sass/components/card"
 // @import "bulma/sass/components/dropdown"
-// @import "bulma/sass/components/level"
+@import "bulma/sass/components/level"
 // @import "bulma/sass/components/list"
 // @import "bulma/sass/components/media"
 @import "bulma/sass/components/menu"
@@ -174,7 +174,7 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
   max-width: 80ch
 
 =active
-  color: $black
+  color: $secondary-dark
   font-weight: 700
 
 .nav
@@ -184,10 +184,10 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
         +active        
 
     ul.nav-section-links
-      margin-top: 1rem
+      margin: 1rem 0 2rem 1.25rem
 
       li
-        font-size: 1rem
+        font-size: 1.25rem
 
         &.is-active
           +active
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
index 6364fcb..4f690db 100644
--- a/layouts/partials/javascript.html
+++ b/layouts/partials/javascript.html
@@ -1,2 +1 @@
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.2/dist/alpine.js" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
\ No newline at end of file
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 4b4f9a3..f8eba1b 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -2,22 +2,30 @@
 {{ $docsSections   := (index (where site.Sections "Section" "docs") 0).Sections }}
 {{ $currentSection := .CurrentSection }}
 
-<div class="nav is-hidden-mobile">
+<div class="nav is-hidden-mobile" >
   {{ range $docsSections }}
-  <div class="nav-section">
+  {{ $thisSection := eq .CurrentSection $currentSection }}
+  <div class="nav-section" x-data="{ open: {{ $thisSection }} }">
     {{ $isHere := eq $here .RelPermalink }}
-    <a class="title is-size-4 is-size-5-mobile{{ if $isHere }} is-active{{ end }}" href="{{ .RelPermalink }}">
-      {{ if $isHere }}
-      <span class="icon has-text-secondary">
-        <i class="fas fa-arrow-right"></i>
-      </span>
-      {{ end }}
-  
-      {{ .Title }}
-    </a>
+    <nav class="level">
+      <div class="level-left">
+        <a class="title is-size-4 is-sizee-5-mobile{{ if $isHere }} is-active{{ end }}" href="{{ .RelPermalink }}">
+          {{ .Title }}
+        </a>
+      </div>
 
-    <ul class="nav-section-links">
-      {{ range .RegularPages }}
+      {{ if .RegularPages }}
+      <div class="level-right">
+        <span class="level-item" @click="open = !open">
+          <i class="fas" :class="{ 'fa-chevron-down': !open, 'fa-chevron-up': open }"></i>
+        </span>
+      </div>
+      {{ end }}
+    </nav>
+
+    {{ with .RegularPages }}
+    <ul class="nav-section-links" x-show="open">
+      {{ range . }}
       {{ $isHere := eq $here .RelPermalink }}
       {{ $title := cond (isset .Params "short") .Params.short .Title }}
       <li{{ if $isHere }} class="is-active"{{ end }}>
@@ -33,6 +41,7 @@
       </li>
       {{ end }}
     </ul>
+    {{ end }}
   </div>
   {{ end }}
 </div>