diff --git a/.vuepress/theme/styles/nav.css b/.vuepress/theme/styles/nav.css
index b7e163bc..e5233ef1 100644
--- a/.vuepress/theme/styles/nav.css
+++ b/.vuepress/theme/styles/nav.css
@@ -1,7 +1,7 @@
 .nav {
-    @apply fixed w-full flex bg-blue .font-sans;
-    height: $nav-height;
-    line-height: $nav-height;
+    @apply .fixed .w-full .flex .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-6 .text-sm;
+    height: 56px;
+    line-height: 54px;
     z-index: 100;
 
     .sidebar-button {
@@ -11,16 +11,16 @@
             @apply text-white block h-6;
         }
     }
-    
+
     .home-link {
-        @apply  px-6 text-white font-light;
+        @apply .text-white .font-light;
 
         .logo {
-            @apply h-full float-left;
+            @apply .h-full .float-left;
         }
 
         .site-name {
-            @apply float-left pl-2 text-2xl;
+            @apply .float-left .pl-2 .text-2xl;
         }
     }
 
@@ -38,17 +38,21 @@
 
     .nav-links {
         .nav-link {
-            @apply block text-white px-2;
+            @apply .text-grey-lighter .ml-6 .font-normal;
 
             &:hover {
-                @apply bg-blue-dark;
+                @apply .no-underline .border-b-2 .border-grey-lighter .pb-1 .leading-normal;
             }
         }
 
         @screen md {
             .nav-item > a:not(.external).router-link-active {
-                box-shadow: inset 0 -4px 0 0 white;
+                @apply .border-b-2 .border-grey-lighter .pb-1 .leading-normal;
+
+                &:hover {
+                    @apply .no-underline;
+                }
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/.vuepress/theme/styles/text.css b/.vuepress/theme/styles/text.css
index 34df90a2..aea297dd 100644
--- a/.vuepress/theme/styles/text.css
+++ b/.vuepress/theme/styles/text.css
@@ -8,6 +8,10 @@ a {
     &:hover {
         @apply .underline;
     }
+
+    &.external:hover {
+        @apply .no-underline;
+    }
 }
 
 kbd {