diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less
index e63db74ee2dd8e36a94a20b8e36b10fb455e919d..e49660bb289991663553f36a961f4d4c9af88e9b 100644
--- a/pass/public/styles/index.less
+++ b/pass/public/styles/index.less
@@ -152,13 +152,13 @@
   @advantages-breakpoint: 750px;
   max-width: 1500px;
   display: grid;
-  margin: 0 auto;
+  margin: 4rem auto;
   gap: 4rem;
-  margin-top: 4rem;
   > .advantage {
     display: grid;
     grid-template-columns: 1fr minmax(25em, 1fr);
     grid-template-areas: "image text";
+    align-items: center;
     &:nth-child(even) {
       grid-template-columns: minmax(25em, 1fr) 1fr;
       grid-template-areas: "text image";
@@ -176,7 +176,7 @@
     }
     > .text {
       grid-area: text;
-      color: #515151;
+      color: @font-color-on-white;
       max-width: 40em;
       padding-right: 1rem;
       > p {
@@ -221,6 +221,70 @@
   }
 }
 
+#how-it-works {
+  @breakpoint-how-it-works: 420px;
+  background-color: @color-main;
+  color: white;
+  line-height: 1.5;
+  padding: 4rem 1rem;
+
+  > h1 {
+    margin: 0;
+    padding: 0 0 4rem 0;
+    white-space: nowrap;
+    line-height: 1;
+    padding-top: 0;
+    text-align: center;
+    font-size: clamp(2rem, 10vw, 3rem);
+  }
+
+  > ol {
+    display: grid;
+    row-gap: 3rem;
+    max-width: 1024px;
+    margin: 0 auto;
+    list-style-type: none;
+    padding: 0;
+
+    > li {
+      counter-increment: step-counter;
+      display: grid;
+      grid-template-rows: auto auto;
+      grid-template-columns: auto auto;
+      column-gap: 2rem;
+
+      @media (max-width: @breakpoint-how-it-works) {
+        grid-template-rows: auto auto auto;
+        grid-template-columns: auto;
+        justify-items: center;
+      }
+
+      &::before {
+        content: counter(step-counter);
+        grid-row: span 2;
+        align-self: center;
+        font-size: 3rem;
+        padding: 1rem;
+        border: 1px solid white;
+        line-height: 1;
+        width: 1em;
+        text-align: center;
+        border-radius: 50%;
+        background-color: white;
+        color: @font-color-on-white;
+        @media (max-width: @breakpoint-how-it-works) {
+          grid-row: auto;
+          margin-bottom: 1rem;
+        }
+      }
+
+      > h2 {
+        margin: 0;
+      }
+    }
+  }
+}
+
 #offers,
 #continue,
 #info-container {
diff --git a/pass/public/styles/misc/vars.less b/pass/public/styles/misc/vars.less
index da222c5a4e687128ca9e4def54e16019d8ec09d6..da2686040f445af41e1d7ca714fe31c55417fde9 100644
--- a/pass/public/styles/misc/vars.less
+++ b/pass/public/styles/misc/vars.less
@@ -2,4 +2,6 @@
 @color-main-hover: lighten(@color-main, 5%);
 @color-main-font-color: white;
 
+@font-color-on-white: #515151;
+
 @body-scroll-break-point: 320px;
diff --git a/pass/views/index.ejs b/pass/views/index.ejs
index 93606f5ccee7df9ef1dd074ea947d9665ad52fe5..c9822ed68bd8d272e9af88004c2b9dbc38b137d6 100644
--- a/pass/views/index.ejs
+++ b/pass/views/index.ejs
@@ -40,12 +40,45 @@
       <img src="/images/robot.svg" alt="Image depicting a roboter">
       <div class="text">
         <h2>Ohne Logging</h2>
-        <p>Bei Ihren Internetsuchen fallen automatisch viele Daten an. Einige davon bestimmen Sie selbst (Suchanfrage, Einstellungen, ...). Andere schickt Ihr Browser automatisch (Browsername und -version, Spracheinstellungen, ...). Widerum andere (wie z.B. Ihre IP-Adresse) sind für die Kommunikation unabdingbar. Schon immer sind wir mit diesen Daten äußerst vorsichtig umgegangen und haben nur abgespeichert, was unbedingt notwendig war um unseren Dienst zu betreiben. MetaGer-Pass macht das Speichern dieser Nutzerdaten nun aber endlich komplett überflüssig, weshalb Ihre Anfrage unsererseits bereits dauerhaft vergessen ist, sobald wir sie beantwortet haben.</p>
+        <p>Bei Ihren Internetsuchen fallen automatisch viele Daten an. Mit MetaGer-Pass kümmern wir uns darum, dass diese Daten gar nicht erst abgespeichert werden.</p>
         <div class="relevant-items">
           <div>Logging</div>
         </div>
       </div>
     </div>
+    <div class="advantage" id="no-tradeoff">
+      <img src="/images/metager-schloss-orange.svg" alt="Image depicting a lock">
+      <div class="text">
+        <h2>Ohne Kompromisse</h2>
+        <p>Es gibt bei MetaGer keine Nutzeraccounts. Sie erhalten von uns einen zufällig generierten Schlüssel. Es sind keine Kontaktdaten notwendig. Außerdem bieten wir mit PaySafe Card und Bargeld auch mehrere anonyme Zahlungsmethoden an. Wer noch einen Schritt weiter gehen möchte, kann anstelle eines Schlüssels unsere <a href="#">MetaGer-Pass Tokens</a> verwenden.</p>
+        <div class="relevant-items">
+          <div>Logging</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="how-it-works">
+    <h1>So funktioniert es</h1>
+    <ol>
+      <li>
+        <h2>MetaGer-Pass Schlüssel erstellen</h2>
+        <div>
+          Ihr Schlüssel ist das einzige, was Sie sich für die Nutzung von MetaGer-Pass notieren müssen. Dieser wird automatisch für Sie erstellt. Wir benötigen keine Kontaktdaten.
+        </div>
+      </li>
+      <li>
+        <h2>Suchanfragen kaufen (ca. 5€ / Monat)</h2>
+        <div>
+          Einfach mal ausprobieren, oder dauerhafter Nutzer? Es liegt ganz bei Ihnen. Sie bezahlen nicht nach Zeit, sondern nach Nutzung. Sie haben die Wahl, wie viele Suchanfragen es sein dürfen.
+        </div>
+      </li>
+      <li>
+        <h2>Verwenden Sie Ihren Schlüssel auf beliebig vielen Geräten</h2>
+        <div>
+          Ihr Schlüssel kann auf beliebig vielen Geräten verwendet werden. Sie können Ihn auch mit Freunden/Verwandten teilen. Rufen Sie einfach mit Ihrem Gerät MetaGer auf und geben Sie dort Ihren Schlüssel ein, indem Sie auf das Schlüsselsymbol neben der Suchleiste klicken und schon kann es losgehen.
+        </div>
+      </li>
+    </ol>
   </div>
   <div id="offers">
     <form class="offer" action="/checkout">