diff --git a/assets/less/components/nav.less b/assets/less/components/nav.less
index d70fc42a..e69de29b 100644
--- a/assets/less/components/nav.less
+++ b/assets/less/components/nav.less
@@ -1,49 +0,0 @@
-.nav {
-    @apply .w-full;
-}
-
-.nav-item {
-    @apply .flex;
-    @apply .items-center;
-    @apply .-mx-4;
-    @apply .p-4;
-}
-
-.nav-item:first-child {
-    @apply .border-t .border-grey-lighter;
-}
-
-@screen sm {
-    .nav {
-        @apply .flex-wrap .justify-end;
-    }
-
-    .nav-item {
-        @apply .border-b-3;
-        @apply .border-transparent;
-        @apply .ml-4;
-        @apply .mr-0;
-        @apply .p-0;
-    }
-
-    .nav-item:first-child {
-        @apply .border-t-0 .border-transparent;
-    }
-
-    .nav-item--active,
-    .nav-item--active.nav-item:first-child {
-        @apply .bg-transparent .border-blue;
-    }
-}
-
-@screen md {
-    .nav {
-       @apply .w-2/3; 
-    }
-}
-
-@screen lg {
-    .nav {
-        @apply .w-3/4;
-    }
-}
diff --git a/assets/less/main.less b/assets/less/main.less
index 419a8eca..0473bd3b 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -59,7 +59,6 @@ svg {
 }
 
 @import 'components/listing.less';
-@import 'components/nav.less';
 @import 'components/post.less';
 @import 'components/post/about-author.less';
 @import 'components/post/code.less';
diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig
index f22d2c7e..77e9fda1 100644
--- a/source/_includes/nav.html.twig
+++ b/source/_includes/nav.html.twig
@@ -15,30 +15,52 @@
                 </div>
             </div>
 
-            <nav class="nav hidden sm:flex">
-                <a href="/" class="nav-item {{ page.url == '/.' ? 'nav-item--active' }}">
-                    About
-                </a>
+            {% set links = [
+                {
+                    title: 'About',
+                    href: '/',
+                    pattern: '^/.$'
+                },
+                {
+                    title: 'Experience',
+                    href: '/experience',
+                    pattern: '^/experience/?$'
+                },
+                {
+                    title: 'Talks',
+                    href: '/talks',
+                    pattern: '^/talks/?'
+                },
+                {
+                    title: 'Open Source',
+                    href: '/opensource',
+                    pattern: '^/opensource/?$'
+                },
+                {
+                    title: 'Blog',
+                    href: '/blog',
+                    pattern: '^/blog/?'
+                },
+                {
+                    title: 'Contact',
+                    href: '/contact',
+                    pattern: '^/contact/?'
+                }
+            ] %}
 
-                <a href="/experience" class="nav-item {{ page.url matches '#^/experience/?#' ? 'nav-item--active' }}">
-                    Experience
-                </a>
-
-                <a href="/talks" class="nav-item {{ page.url matches '#^/talks/?#' ? 'nav-item--active' }}">
-                    Talks
-                </a>
-
-                <a href="/opensource" class="nav-item {{ page.url matches '#^/opensource/?#' ? 'nav-item--active' }}">
-                    Open Source
-                </a>
-
-                <a href="/blog" class="nav-item {{ page.url matches '#^/blog/?#' ? 'nav-item--active' }}">
-                    Blog
-                </a>
-
-                <a href="/contact" class="nav-item {{ page.url matches '#^/contact/?#' ? 'nav-item--active' }}">
-                    Contact
-                </a>
+            <nav class="hidden w-full md:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end">
+                {% for link in links %}
+                    <a
+                        href="{{ link.href }}"
+                        class="
+                            flex items-center -mx-4 p-4 sm:border-b-3 sm:border-transparent sm:ml-4 sm:mr-0 sm:p-0
+                            {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}
+                            {{ page.url matches '#' ~ link.pattern ~ '#' ? 'sm:bg-transparent sm:border-blue' }}
+                        "
+                    >
+                        {{ link.title }}
+                    </a>
+                {% endfor %}
             </nav>
         </div>
     </header>
diff --git a/source/_includes/scripts.html.twig b/source/_includes/scripts.html.twig
index d27ebf56..12201b1b 100644
--- a/source/_includes/scripts.html.twig
+++ b/source/_includes/scripts.html.twig
@@ -1,6 +1,6 @@
 <script>
     document.querySelector('.nav-toggle').onclick = function() {
-        document.querySelector('.navbar .nav').classList.toggle('hidden').toggle('block');
+        document.querySelector('.navbar nav').classList.toggle('hidden').toggle('block');
         return false;
     };
 </script>