diff --git a/_includes/nav.html b/_includes/nav.html
index e642226..5b06d8c 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,88 +1,41 @@
-<nav class="flex flex-wrap items-center bg-black px-10 py-6 w-full z-50">
-  <div class="flex-1 flex justify-between items-center">
-    <a href="{{ site.base_url }}" class="flex items-center hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-      <svg class="spin h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
-        <g data-name="Main" fill-rule="evenodd">
-          <path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" fill="url(#a)" opacity=".8" />
-          <path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" fill="url(#b)" opacity=".8" />
-          <path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6" fill="url(#c)" />
-          <path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)" fill="url(#d)" />
-        </g>
-      </svg>
-      <span class="text-white">Safing<span class="opacity-55 ">.io</span></span>
-    </a>
+<nav class="nav">
+  <div class="nav-left">
+      <a href="{{ site.base_url }}" class="nav-logo-wrapper">
+          <!-- turn this into a font icon -->
+          <svg class="h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+              <g data-name="Main" fill-rule="evenodd">
+                  <path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"></path>
+                  <path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"></path>
+                  <path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6"></path>
+                  <path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)"></path>
+              </g>
+          </svg>
+          <span>Safing<span>.io</span></span>
+      </a>
   </div>
-  <label for="menu-toggle" class="pointer-cursor lg:hidden block">
-    <svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-      <path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-      <path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-    </svg>
+  <label class="nav-right-burger" for="nav-toggle-visable">
+      <!-- turn this into a font icon -->
+      <svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+          <path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          <path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+      </svg>
   </label>
-  <input class="hidden" type="checkbox" id="menu-toggle" />
-  <div class="hidden w-full text-center lg:flex lg:items-center lg:w-auto" id="menu">
-    <nav>
-      <ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0 text-center ">
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
-          <a href="{{ site.portmaster_url }}" class="ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            Portmaster
-          </a>
-        </li>
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
-          <a href="{{ site.spn_url }}" class="ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            SPN
-          </a>
-        </li>
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
-          <a href="{{ site.docs_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            Docs
-          </a>
-        </li>
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
-          <a href="{{ site.github_url }}/portmaster/" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            Source Code
-          </a>
-        </li>
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
-          <a href="{{ site.about_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            About
-          </a>
-        </li>
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm relative">
-          <a href="{{ site.next_page_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            What's Next?
-          </a>
-        </li>
-        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
-          <a href="{{ site.help_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55  transition duration-150 ease-in-out opacity-100">
-            Get Help
-          </a>
-        </li>
-        <li>
-          <div class="block p-5 lg:flex lg:p-0 items-center">
-            <span class="hidden sm:block ml-3 mr-2 rounded-md">
-              <a href="{{ site.account_server_url }}account/sign_in">
-                <button type="button" class="hidden lg:block px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-55 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-in-out">
-                  Sign In
-                </button>
-              </a>
-            </span>
-            <span class="sl-3 rounded-md ml-auto mr-auto">
-              <a href="{{ site.account_server_url }}account/sign_up">
-                <button type="button" style="background-color: #6188ff;" class="w-full transform hover:scale-105 lg:inline-flex px-10 py-2 border border-transparent text-lg lg:text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
-                  Sign Up
-                </button>
-              </a>
-            </span>
-            <span class="ml-3 rounded-md">
-              <a href="{{ site.account_server_url }}account/sign_in">
-                <button type="button" class="mr-auto ml-auto block lg:hidden px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-55 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
-                  Sign In
-                </button>
-              </a>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </nav>
+  <input class="nav-toggle-burger" id="nav-toggle-visable" type="checkbox">
+  <div class="nav-right">
+      <div class="nav-right-links">
+          <a href="{{ site.portmaster_url }}" class="nav-link"> Portmaster </a>
+          <a href="{{ site.spn_url }}" class="nav-link"> SPN </a>
+          <a href="{{ site.docs_url }}" class="nav-link"> Docs </a>
+          <a href="{{ site.github_url }}/portmaster/" class="nav-link"> Source Code </a>
+          <a href="{{ site.about_url }}" class="nav-link"> About </a>
+          <a href="{{ site.next_page_url }}" class="nav-link"> What's Next </a>
+          <a href="{{ site.help_url }}" class="nav-link"> Get Help </a>
+      </div>
+      <div class="nav-right-actions">
+          <a href="{{ site.account_server_url }}account/sign_in" class="nav-link"> Sign In </a>
+          <a href="{{ site.account_server_url }}account/sign_up" class="btn-primary"> Sign Up </a>
+      </div>
   </div>
 </nav>
+
+