diff --git a/portmaster/index.html b/portmaster/index.html
index cd93919..182b9d6 100644
--- a/portmaster/index.html
+++ b/portmaster/index.html
@@ -43,135 +43,138 @@ redirect_from:
   </div>
 </header>
 <section class="space-y-80 mt-60">
-  <div class="showcase-container">
-      <div class="showcase-left">
-          <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container-reverse">
+      <div class="showcase-left" style="max-width: 1050px;">
+        <img src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
+      </div>
+      <div class="showcase-right">
+          <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
             <i class="icon-info text-md"></i>
             <span>Alpha Software: Portmaster is in active development</span>
           </div>
-          <h2 class="showcase-left-title" style="max-width: 350px;">
+          <h2 class="showcase-right-title" style="max-width: 350px;">
             Monitor All Network Activity
           </h2>
-          <p class="showcase-left-desc">
+          <p class="showcase-right-desc">
             Discover everything that is happening on your computer. Expose every 
             connection your applications make and detect evil ones. Finally get 
             the power to act accordingly. 
           </p>
           <a class="btn-secondary" href="#">Discover the portmaster</a>
       </div>
-      <div class="showcase-right" style="max-width: 1050px;">
-          <img src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
-      </div>
   </div>
-  <div class="showcase-container-reverse">
-    <div class="showcase-left">
-        <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container">
+    <div class="showcase-left" style="max-width: 850px;">
+      <img src="{{ site.img_url }}page-specific/portmaster/manually-allow-ord-block-connections.png" alt="">
+    </div>
+    <div class="showcase-right">
+        <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
           <i class="icon-info text-md"></i>
           <span>Alpha Software: Portmaster is in active development</span>
         </div>
-        <h2 class="showcase-left-title" style="max-width: 350px;">
+        <h2 class="showcase-right-title" style="max-width: 350px;">
           Block Unwanted Connections 
         </h2>
-        <p class="showcase-left-desc">
+        <p class="showcase-right-desc">
           Many programs connect to the Internet without your knowledge. When you 
           find unwanted connections, you can now simply block them. 
         </p>
         <a class="btn-secondary" href="#">Discover the portmaster</a>
     </div>
-    <div class="showcase-right" style="max-width: 850px;">
-        <img src="{{ site.img_url }}page-specific/portmaster/manually-allow-ord-block-connections.png" alt="">
-    </div>
   </div>
-  <div class="showcase-container">
-      <div class="showcase-left">
-          <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container-reverse">
+      <div class="showcase-left" style="max-width: 850px;">
+        <img src="{{ site.img_url }}/page-specific/portmaster/block-trackers-system-wide.png" alt="">
+      </div>
+      <div class="showcase-right">
+          <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
             <i class="icon-info text-md"></i>
             <span>Alpha Software: Portmaster is in active development</span>
           </div>
-          <h2 class="showcase-left-title" style="max-width: 450px;">
+          <h2 class="showcase-right-title" style="max-width: 450px;">
             Auto-Block via Selected Filter Lists 
           </h2>
-          <p class="showcase-left-desc">
+          <p class="showcase-right-desc">
             Automatically block ads, trackers and malware hosts via trusted domain-lists, 
             which are also used by Ad-Blockers, etc. Easily change the defaults to fit 
             your needs. 
           </p>
           <a class="btn-secondary" href="#">Discover the portmaster</a>
       </div>
-      <div class="showcase-right" style="max-width: 850px;">
-          <img src="{{ site.img_url }}/page-specific/portmaster/block-trackers-system-wide.png" alt="">
-      </div>
   </div>
-  <div class="showcase-container-reverse">
-    <div class="showcase-left">
-        <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container">
+    <div class="showcase-left" style="max-width: 850px;">
+      <img src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.png" alt="">
+    </div>
+    <div class="showcase-right">
+        <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
           <i class="icon-info text-md"></i>
           <span>Alpha Software: Portmaster is in active development</span>
         </div>
-        <h2 class="showcase-left-title" style="max-width: 350px;">
+        <h2 class="showcase-right-title" style="max-width: 350px;">
           Enforce Secure DNS 
         </h2>
-        <p class="showcase-left-desc">
+        <p class="showcase-right-desc">
           Even with invasive connections gone, you do not want to share your dns requests 
           out in the open. With the Portmaster, you can easily re-route all your dns 
           queries to a DNS-over-TLS provider of your choice. 
         </p>
         <a class="btn-secondary" href="#">Discover the portmaster</a>
     </div>
-    <div class="showcase-right" style="max-width: 850px;">
-        <img src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.png" alt="">
-    </div>
   </div>
-  <div class="showcase-container">
-    <div class="showcase-left">
-        <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container-reverse">
+    <div class="showcase-left" style="max-width: 850px;">
+      <img src="{{ site.img_url }}page-specific/portmaster/explore-the-docs-and-source-code.png" alt="">
+    </div>
+    <div class="showcase-right">
+        <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
           <i class="icon-info text-md"></i>
           <span>Alpha Software: Portmaster is in active development</span>
         </div>
-        <h2 class="showcase-left-title" style="max-width: 350px;">
+        <h2 class="showcase-right-title" style="max-width: 350px;">
           Explore the Docs and Source Code 
         </h2>
-        <p class="showcase-left-desc">
+        <p class="showcase-right-desc">
           In the age of Mass Surveillance, what good is a service when you cannot see what 
           it is really doing? We believe in open source. We also document everything 
           as good as we can. 
         </p>
         <a class="btn-secondary" href="#">Discover the portmaster</a>
     </div>
-    <div class="showcase-right" style="max-width: 850px;">
-        <img src="{{ site.img_url }}page-specific/portmaster/explore-the-docs-and-source-code.png" alt="">
-    </div>
   </div>
-  <div class="showcase-container-reverse">
-    <div class="showcase-left">
-        <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container">
+    <div class="showcase-left" style="max-width: 850px;">
+      <img src="{{ site.img_url }}page-specific/portmaster/configure-settings-for-different-networks.png" alt="">
+    </div>
+    <div class="showcase-right">
+        <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
           <i class="icon-info text-md"></i>
           <span>Alpha Software: Portmaster is in active development</span>
         </div>
-        <h2 class="showcase-left-title" style="max-width: 550px;">
+        <h2 class="showcase-right-title" style="max-width: 550px;">
           Configure Settings for Different Networks 
         </h2>
-        <p class="showcase-left-desc">
+        <p class="showcase-right-desc">
           The Wi-Fi in your local coffee shop is riskier than yours at home. Set up your 
           settings for different networks and then simply press a button when changing 
           location. All settings will adjust immediately
         </p>
         <a class="btn-secondary" href="#">Discover the portmaster</a>
     </div>
-    <div class="showcase-right" style="max-width: 850px;">
-        <img src="{{ site.img_url }}page-specific/portmaster/configure-settings-for-different-networks.png" alt="">
-    </div>
   </div>
-  <div class="showcase-container ">
-      <div class="showcase-left">
-          <div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
+  <div class="showcase-container-reverse">
+      <div class="showcase-left" style="max-width: 850px;">
+        <img src="{{ site.img_url }}/page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
+      </div>
+      <div class="showcase-right">
+          <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
             <i class="icon-info text-md"></i>
             <span>Alpha Software: Portmaster is in active development</span>
           </div>
-          <h2 class="showcase-left-title" style="max-width: 350px;">
+          <h2 class="showcase-right-title" style="max-width: 350px;">
               Set Global & per‑App Settings
           </h2>
-          <p class="showcase-left-desc">
+          <p class="showcase-right-desc">
             Make your own rules. Completely cut off applications from the 
             Internet. Or block all p2p connections except for certain apps. 
             Or never connect to specific countries. The Portmaster has you 
@@ -179,9 +182,6 @@ redirect_from:
           </p>
           <a class="btn-secondary" href="#">Discover the portmaster</a>
       </div>
-      <div class="showcase-right" style="max-width: 850px;">
-          <img src="{{ site.img_url }}/page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
-      </div>
   </div>
   <div class="download-container">
     <h2 class="download-container-title">