diff --git a/assets/img/page-specific/spn/layers.gif b/assets/img/page-specific/spn/layers.gif
new file mode 100644
index 0000000..96d5e6e
Binary files /dev/null and b/assets/img/page-specific/spn/layers.gif differ
diff --git a/assets/img/page-specific/spn/metadata.gif b/assets/img/page-specific/spn/metadata.gif
new file mode 100644
index 0000000..eb20b6b
Binary files /dev/null and b/assets/img/page-specific/spn/metadata.gif differ
diff --git a/assets/img/page-specific/spn/switch.gif b/assets/img/page-specific/spn/switch.gif
new file mode 100644
index 0000000..1a95672
Binary files /dev/null and b/assets/img/page-specific/spn/switch.gif differ
diff --git a/spn/index.html b/spn/index.html
index 4c1d011..d2edf24 100644
--- a/spn/index.html
+++ b/spn/index.html
@@ -1,4 +1,291 @@
 ---
 title: Safing Privacy Network
-layout: page_column
+layout: page
 ---
+
+<header class="h-screen">
+  <img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="{{ site.img_url }}shapes/corner-tl.png" alt="">
+  <div class="flex items-center h-full">
+    <div class="container mx-auto sm:px-8 sm:px-0">
+      <div class="container mx-auto px-8 sm:px-0 flex">
+        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
+          <div class="lg:pb-0 m0-0 lg:mr-40 self-center">
+            <span style="font-size: 12rem; font-weight: 800; margin-top: -5rem; margin-left: 6rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
+              <img src="{{ site.img_url }}shapes/circle-md.png" alt="">
+            </span>
+            <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md max-w-full max-h-auto transform scale-70" height="1220" width="1220" playsinline="" preload="auto" src="./videos/spn/interim.mp4"
+              controls autoplay muted loop></video>
+            <span style="font-size: 12rem; font-weight: 800; margin-top: -4.5rem; margin-left: -3rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
+              <img src="{{ site.img_url }}shapes/circle-sm.png" alt="">
+            </span>
+
+          </div>
+          <div class="inline-block text-center md:text-left">
+            <h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
+              Privacy Network
+            </h2>
+            <p class="text-md opacity-50 max-w-4xl">
+              it's the foundation we build our products on. We make sacrifices on
+              all other fronts to protect your privacy and push the limits of
+              technology to do so.
+            </p>
+            <div class="py-10 sm:py-10 md:flex text-center">
+              <button type="button" style="background-color: #6188ff;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 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">
+                <span class="pr-3 text-2xl wiggle">🎉</span>Pre-order SPN
+              </button>
+              <br>
+              <a class="transition duration-150 ease-in-out hover:opacity-100 self-center md:pl-8 uppercase opacity-50 text-xs font-bold" href="#">Built on the Portmaster</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+<section style="margin-top: 3rem;">
+  <div class="text-center pb-48">
+    <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
+      SPN Features
+    </h2>
+    <p class="text-md opacity-50 w-auto mx-auto max-w-lg">
+      Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
+    </p>
+  </div>
+  <div class="items-center h-full">
+    <div class="container mx-auto px-8 sm:px-0 flex">
+      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
+        <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
+          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
+        </div>
+        <div class="inline-block max-w-lg">
+          <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold py-10 lg:w-auto">
+            End-to-End Metadata Encryption
+          </h2>
+          <p class="text-md opacity-50 max-w-lg">
+            Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
+            and VPNs from collecting all your personal [meta] data. Secure
+            your whole computer, not only your web-browser.
+          </p>
+          <!-- <div class="py-10 flex">
+                        <button type="button" style="background-color: #000;" 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">
+                            Discover the spn
+                        </button>
+                        <a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
+                    </div> -->
+        </div>
+        <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
+          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="items-center h-full mt-64">
+      <div class="container mx-auto px-8 sm:px-0 flex">
+        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex  items-center">
+          <div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
+            <img src="{{ site.img_url }}page-specific/spn/layers.gif" alt="">
+          </div>
+          <div class="inline-block max-w-lg">
+            <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
+              Onion Layer Encryption
+            </h2>
+            <p class="text-md opacity-50 max-w-lg">
+              The Portmaster enables you to protect your data on your device.
+              You are back in charge of your outgoing connections: you choose
+              what data you share and what data stays private.
+            </p>
+            <!-- <div class="py-10 flex">
+                            <button type="button" style="background-color: #000;" 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">
+                                Discover the Portmaster
+                            </button>
+                            <a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
+                        </div> -->
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <div class="items-center h-full mt-64">
+      <div class="container mx-auto px-8 sm:px-0 flex">
+        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto  items-center">
+          <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
+            <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
+          </div>
+          <div class="inline-block max-w-lg">
+            <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl  tracking-tight font-extrabold leading-none py-10">
+              Distributed Multi Identity Network
+            </h2>
+            <p class="text-md opacity-50 max-w-lg">
+              Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
+              and VPNs from collecting all your personal [meta] data. Secure
+              your whole computer, not only your web-browser.
+            </p>
+            <!-- <div class="py-10 flex">
+                            <button type="button" style="background-color: #000;" 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">
+                                Discover the spn
+                            </button>
+                            <a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
+                        </div> -->
+          </div>
+          <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
+            <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="items-center h-full mt-64">
+      <div class="container mx-auto px-8 sm:px-0 flex">
+        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex  items-center">
+          <div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
+            <img src="{{ site.img_url }}page-specific/spn/switch.gif" alt="">
+          </div>
+          <div class="inline-block max-w-lg">
+            <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
+              No Kill Switch Needed
+            </h2>
+            <p class="text-md opacity-50 max-w-lg">
+              The Portmaster enables you to protect your data on your device.
+              You are back in charge of your outgoing connections: you choose
+              what data you share and what data stays private.
+            </p>
+            <div class="py-10 flex">
+              <button type="button" style="background-color: #000;" 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">
+                <a href="/portmaster.html">Discover the Portmaster</a>
+              </button>
+              <!-- <a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</a> -->
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section style="margin-top: 13rem;">
+  <div class="items-center h-full">
+    <div id="Pricing">
+      <div class="max-w-full mx-auto px-4 sm:px-6">
+        <div class="py-12 bg-white">
+          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+              <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
+                Pre-order the SPN
+              </h2>
+              <p class="text-md opacity-50">
+                Get your hands on thes pe-orders while you can.
+              </p>
+            </div>
+            <div class="mt-32">
+              <ul class="md:grid md:grid-cols-2 lg:grid-cols-2 md:col-gap-8 md:row-gap-10 max-w-4xl mr-auto ml-auto">
+                <li class="text-center md:text-left">
+                  <div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
+                    <span class="text-2xl">Early Adopter</span>
+                    <div class="block pb-6">
+                      <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 ">€9.90</h1>
+                      <span class="text-xl pl-1 opacity-50 line-through">€11.90</span>
+                    </div>
+                    <span class="font-extrabold pt-10 text-md">Includes:</span>
+                    <ul class="">
+                      <li class="pt-4 opacity-50">Behind the scenes</li>
+                      <li class="pt-4 opacity-50">1 month subscription</li>
+                    </ul>
+                    <div class="pt-32">
+                      <button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
+                        <a href="/blogpod.html">Buy</a>
+                      </button>
+                    </div>
+                  </div>
+                </li>
+                <li class="mt-10 md:mt-0 text-center md:text-left">
+                  <div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
+                    <span class="text-2xl">Early Adopter</span>
+                    <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 pb-6">€2,000</h1>
+                    <span class="font-extrabold pt-10 text-md">Includes:</span>
+                    <ul>
+                      <li class="pt-4 opacity-50">Behind the scenes</li>
+                      <li class="pt-4 opacity-50"> Lifetime subscription</li>
+                    </ul>
+                    <div class="pt-40">
+                      <button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
+                        <a href="/blogpod.html">Buy</a>
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section style="margin-top: 6rem;" class="pb-48 ">
+  <div class="bg-white">
+    <div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
+      <div class="text-center pb-12">
+        <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
+          FAQ
+        </h2>
+        <p class="text-md opacity-50">
+          Got a qustion? well, it might be in here already.
+        </p>
+      </div>
+      <div class="mt-6 pt-10 text-center md:text-left">
+        <dl class="md:grid md:grid-cols-2 md:gap-8">
+          <div>
+            <div>
+              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
+              <dd class="mt-2">
+                <p class="text-md opacity-50">
+                  I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+                </p>
+              </dd>
+            </div>
+            <div class="mt-12">
+              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
+              <dd class="mt-2">
+                <p class="text-md opacity-50">
+                  You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+                </p>
+              </dd>
+            </div>
+            <div class="mt-12">
+              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
+              <dd class="mt-2">
+                <p class="text-md opacity-50">
+                  Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+                </p>
+              </dd>
+            </div>
+          </div>
+          <div class="mt-12 md:mt-0">
+            <div>
+              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
+              <dd class="mt-2">
+                <p class="text-md opacity-50">
+                  Sign language. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+                </p>
+              </dd>
+            </div>
+            <div class="mt-12">
+              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
+              <dd class="mt-2">
+                <p class="text-md opacity-50">
+                  Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+                </p>
+              </dd>
+            </div>
+            <div class="mt-12">
+              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
+              <dd class="mt-2">
+                <p class="text-md opacity-50">
+                  He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+                </p>
+              </dd>
+            </div>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+</section>