diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..b719a68
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,98 @@
+<footer class="bg-black p-8 bg-local bg-no-repeat bg-cover bg-bottom" style="background-image: url(https://safing.io/assets/img/f-bg.png)">
+  <div class="p-12 mx-auto self-center max-w-3xl text-center lg:text-left">
+    <span class="text-white text-xl font-bold">Stay Connected</span>
+    <div class="block lg:flex items-center py-5">
+      <input style="background-color: #302e37;" class="appearance-none rounded-full w-full max-w-md px-6 py-2 text-white" placeholder="Mailing list">
+      <div class="pt-5 lg:pt-0 lg:pl-5 ">
+        <button type="button" style="background-color: #6188ff;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
+          Join us
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="text-center lg:text-left container mx-auto px-8">
+    <div class="w-full flex flex-col md:flex-row py-6 ">
+      <div class="flex-1">
+        <p class="text-white text-xl md:mb-6">Company</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="aboutus.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">About Us</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="team.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Team</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="finances.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Ownership</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="support.html" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Support</a>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-1">
+        <p class="text-white text-xl md:mb-6">Podcast</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Overview</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Itunes</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">RSS</a>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-1">
+        <p class="text-white text-xl md:mb-6">Resources</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Technology</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Whitepaper</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Blog</a>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-1">
+        <p class="text-white text-xl md:mb-6">Social</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Github</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Twitter</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Reddit</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Newsletter</a>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-1">
+        <p class="text-white text-xl md:mb-6">Legal</p>
+        <ul class="list-reset mb-6">
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Terms</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Privacy</a>
+          </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
+            <a href="#" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Contact & Legal</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="text-xs">
+    <p class="text-center leading-6 text-white opacity-50">
+      &copy; 2020 Safing, LLC. All rights reserved.
+    </p>
+  </div>
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
index b62b7e4..4cee9c8 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,7 +1,7 @@
 <!-- meta -->
 <meta charset={{ site.encoding }}>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 <meta name="description" content="{{ site.description }}">
 <meta name="author" content="{{ site.author }}">
 <title>{% if page.type == "podcast" %}The Safing Podcast {{ page.title }}{% elsif page.type == "post" %}Safing Blog: {{ page.title }}{% elsif page.title == "Safing" %}{{ page.title }}{% else %}Safing {{ page.title }}{% endif %}</title>
@@ -28,5 +28,3 @@
 
 <link rel="stylesheet" href="{{ site.vendor_url }}css/fonts-roboto.css" type="text/css">
 <link rel="stylesheet" href="{{ site.vendor_url }}css/tailwind.min.css" type="text/css">
-
-<link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">
diff --git a/_includes/nav.html b/_includes/nav.html
new file mode 100644
index 0000000..1acb95e
--- /dev/null
+++ b/_includes/nav.html
@@ -0,0 +1,72 @@
+<nav class="flex flex-wrap items-center bg-black px-10 py-6 fixed w-full z-50 lg:absolute">
+  <div class="flex-1 flex justify-between items-center">
+    <a href="index.html" class="flex items-center hover:opacity-50 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-50">.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>
+  <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">
+        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
+          <a href="/spn.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 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="/portmaster.html" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 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="/spn.html#Pricing" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
+            Pricing
+          </a>
+        </li>
+        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
+          <a href="/aboutus.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
+            About Us
+          </a>
+        </li>
+        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
+          <a href="/support.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
+            Support
+          </a>
+        </li>
+        <li>
+          <div class="block p-5 lg:flex lg:p-0 items-center">
+            <span class="hidden sm:block ml-3 rounded-md">
+              <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-50 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>
+            </span>
+            <span class="sm:ml-3 rounded-md">
+              <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>
+            </span>
+            <span class="hidden sm:block ml-3 rounded-md">
+              <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-50 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>
+            </span>
+          </div>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</nav>
diff --git a/_includes/new/features.html b/_includes/new/features.html
deleted file mode 100644
index 8b16688..0000000
--- a/_includes/new/features.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<content>
-  <div class="features">
-    <div>
-      <img src="{{ site.icons_url }}lock.svg" alt="">
-      <div>
-        <span>Privacy first</span>
-        <p>
-          We believe privacy is the foundation to a free & open society. We can only grow if we have a safe place to nourish our best selves.
-        </p>
-      </div>
-    </div>
-    <div>
-      <img src="{{ site.icons_url }}community.svg" alt="">
-      <div>
-        <span>Community</span>
-        <p>
-          Do we walk our talk? You be the judge! If you like what you see, consider <a href="{{ site.reddit_url }}">helping us</a> by contributing in our community.
-        </p>
-      </div>
-    </div>
-    <div>
-      <img src="{{ site.icons_url }}shield.svg" alt="">
-      <div>
-        <span>Open Source</span>
-        <p>
-          Transparency is a key value for us, therefore we release our code open source. If you're a techie, we challenge you to <a href="{{ site.github_url }}">have a look</a> ;)
-        </p>
-      </div>
-    </div>
-  </div>
-</content>
diff --git a/_includes/new/footer.html b/_includes/new/footer.html
deleted file mode 100644
index 10e239b..0000000
--- a/_includes/new/footer.html
+++ /dev/null
@@ -1,56 +0,0 @@
-
-{% unless page.exclude_kickstarter_plug == true %}
-  <content class="kickstarter-plug">
-    <a href="{{ site.kickstarter_url }}">
-      <div>
-        <h3>Raised 11.755€ on Kickstarter - Thank You!</h3>
-        <p>Have a look at all the details and watch video updates from the team 🎬</p>
-      </div>
-    </a>
-  </content>
-{% endunless %}
-
-<footer class="f-bg">
-  <div class="list">
-    <ul>
-      <span>Company</span>
-      <li><a href="{{ site.our_values_url }}">Team</a></li>
-      <li><a href="{{ site.our_values_url }}#ownership">Ownership</a></li>
-      <li><a href="{{ site.jobs_url }}">Jobs</a></li>
-      <li class="vhidden">.</li>
-    </ul>
-    <ul>
-      <span>Podcast</span>
-      <li><a href="{{ site.podcast_url }}">Overview</a></li>
-      <li><a href="{{ site.podcast_itunes_url }}">iTunes</a></li>
-      <li><a href="{{ site.podcast_feed_url }}">RSS</a></li>
-      <li class="vhidden">.</li>
-    </ul>
-    <ul>
-      <span>Resources</span>
-      <li><a href="{{ site.technology_url }}">Technology</a></li>
-      <li><a href="{{ site.whitepaper_url }}Gate17.pdf">Whitepaper</a></li>
-      <li><a href="{{ site.blog_url }}">Blog</a></li>
-      <li class="vhidden">.</li>
-    </ul>
-    <ul>
-      <span>Social</span>
-      <li><a href="{{ site.reddit_url }}">Reddit</a></li>
-      <li><a href="{{ site.newsletter_url }}">Newsletter</a></li>
-      <li><a href="{{ site.github_url }}">Github</a></li>
-      <li><a href="{{ site.twitter_url }}">Twitter</a></li>
-    </ul>
-    <ul>
-      <span>Legal</span>
-      <li><a href="{{ site.terms_url }}">Terms</a></li>
-      <li><a href="{{ site.privacy_url }}">Privacy</a></li>
-      <li><a href="{{ site.contact_url }}">Contact & Legal</a></li>
-      <li class="vhidden">.</li>
-    </ul>
-  </div>
-  <div class="legal">
-    <ul>
-      <li>Safing © {{ site.time | date: '%Y' }}</li>
-    </ul>
-  </div>
-</footer>
diff --git a/_includes/new/mission.html b/_includes/new/mission.html
deleted file mode 100644
index bc4a0ef..0000000
--- a/_includes/new/mission.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<content class="o-bg">
-  <div class="mission">
-    <h1>Enabling you to reclaim your privacy</h1>
-    <p>We're building tools to help everyone withstand today's mass surveillance</p>
-  </div>
-</content>
diff --git a/_includes/new/nav.html b/_includes/new/nav.html
deleted file mode 100644
index 52e36b5..0000000
--- a/_includes/new/nav.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<nav>
-  <a href="{{ site.base_url }}">
-    <div>
-      <img src="{{ site.img_url }}logo_v3_light.png" alt="">
-      <p>Safing<span>.io</span></p>
-    </div>
-  </a>
-  <ul>
-    <li><a href="{{ site.our_values_url }}">About</a></li>
-    <li><a href="{{ site.jobs_url }}">Jobs</a></li>
-    <li><a href="{{ site.community_hub_url }}">Community</a></li>
-  </ul>
-</nav>
diff --git a/_layouts/page.html b/_layouts/page.html
index f7aa86c..1bdc3f3 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,18 +1,11 @@
 <!DOCTYPE html>
 <html lang={{ site.lang }}>
   <head>
-    {% if layout.legacy_layout %}
-      <link rel="stylesheet" href="{{ site.vendor_url }}semantic/semantic.css" type="text/css">
-      <link rel="stylesheet" href="{{ site.assets_url }}css/legacy.css" type="text/css">
-    {% endif %}
     {% include head.html %}
   </head>
-  <body>
-    {% include new/nav.html %}
-    {% if page.include_mission %}
-      {% include new/mission.html %}
-    {% endif %}
+  <body class="antialiased font-semibold">
+    {% include nav.html %}
     {{ content }}
-    {% include new/footer.html %}
+    {% include footer.html %}
   </body>
 </html>