diff --git a/website/theme/static/images/gfx-index.svg b/website/theme/static/images/gfx-index.svg
index 91719b2..a9a07eb 100644
--- a/website/theme/static/images/gfx-index.svg
+++ b/website/theme/static/images/gfx-index.svg
@@ -1,13 +1,45 @@
-<svg width="768" height="432" viewBox="0 0 768 432" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="768" height="432" fill="#E9500A"/>
-<ellipse cx="70" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="70" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="698" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="698" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="384" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="384" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="227" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="227" cy="319" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="541" cy="97" rx="70" ry="69" fill="#4B1202"/>
-<ellipse cx="541" cy="319" rx="70" ry="69" fill="#4B1202"/>
+<svg width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_79_77)">
+<rect width="64" height="64" fill="#4B1202"/>
+<rect x="64" y="64" width="64" height="64" fill="#4B1202"/>
+<rect x="192" y="192" width="64" height="64" fill="#4B1202"/>
+<rect x="384" y="192" width="64" height="64" fill="#4B1202"/>
+<rect x="256" y="256" width="64" height="64" fill="#4B1202"/>
+<rect x="320" y="320" width="64" height="64" fill="#4B1202"/>
+<rect x="384" y="384" width="64" height="64" fill="#4B1202"/>
+<rect x="320" width="64" height="64" fill="#4B1202"/>
+<rect x="192" y="64" width="64" height="64" fill="#4B1202"/>
+<rect x="448" y="128" width="64" height="64" fill="#4B1202"/>
+<rect x="512" y="192" width="64" height="64" fill="#4B1202"/>
+<rect x="576" y="256" width="64" height="64" fill="#4B1202"/>
+<rect x="704" y="384" width="64" height="64" fill="#4B1202"/>
+<circle cx="96" cy="32" r="32" fill="#4B1202"/>
+<circle cx="32" cy="96" r="32" fill="#4B1202"/>
+<circle cx="96" cy="160" r="32" fill="#4B1202"/>
+<circle cx="160" cy="416" r="32" fill="#4B1202"/>
+<circle cx="480" cy="416" r="32" fill="#4B1202"/>
+<circle cx="672" cy="416" r="32" fill="#4B1202"/>
+<circle cx="224" cy="352" r="32" fill="#4B1202"/>
+<circle cx="416" cy="352" r="32" fill="#4B1202"/>
+<circle cx="608" cy="352" r="32" fill="#4B1202"/>
+<circle cx="96" cy="288" r="32" fill="#4B1202"/>
+<circle cx="160" cy="288" r="32" fill="#4B1202"/>
+<circle cx="416" cy="288" r="32" fill="#4B1202"/>
+<circle cx="352" cy="224" r="32" fill="#4B1202"/>
+<circle cx="672" cy="224" r="32" fill="#4B1202"/>
+<circle cx="224" cy="160" r="32" fill="#4B1202"/>
+<circle cx="416" cy="160" r="32" fill="#4B1202"/>
+<circle cx="672" cy="160" r="32" fill="#4B1202"/>
+<circle cx="160" cy="96" r="32" fill="#4B1202"/>
+<circle cx="288" cy="96" r="32" fill="#4B1202"/>
+<circle cx="544" cy="96" r="32" fill="#4B1202"/>
+<circle cx="672" cy="96" r="32" fill="#4B1202"/>
+<circle cx="224" cy="32" r="32" fill="#4B1202"/>
+<circle cx="416" cy="32" r="32" fill="#4B1202"/>
+</g>
+<defs>
+<clipPath id="clip0_79_77">
+<rect width="768" height="448" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index ef0c47d..d689206 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -15,7 +15,7 @@
 
     <div class="w-100 bgColorOrange mb3 mb4-ns">
       <div class="mw7 center">
-        <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="432" class="db imageCrop">
+        <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448" class="db imageCrop">
       </div>
     </div>
 
@@ -39,20 +39,20 @@
 
   <div class="mw7 center paddingExtra">
 
-    <p class="ma0 mb3">
-      The world is in flux, and it’s a unique opportunity to <span class="fw7">facilitate change for the better.</span>
+    <p class="ma0 mb3 ml4 ml6-ns">
+      The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span>
     </p>
-    <p class="ma0 mb3">
-      We want to enable the makers that are driving this change by providing them with <span class="fw7">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
+    <p class="ma0 mb3 mr4 mr6-ns">
+      We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-ns">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
     </p>
-    <p class="ma0 mb3">
-      <span class="fw7">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
+    <p class="ma0 mb3 ml4 ml6-ns">
+      <span class="fw7 f4 f2-ns">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
     </p>
-    <p class="ma0 mb3">
-      <span class="fw7">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
+    <p class="ma0 mb3 mr4 mr6-ns">
+      <span class="fw7 f4 f2-ns">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
     </p>
-    <p class="ma0">
-      Our clients value <span class="fw7">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
+    <p class="ma0 ml4 ml6-ns">
+      Our clients value <span class="fw7 f4 f2-ns">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
     </p>
     <div class="flex justify-center pt6 pb4">
       <a class="link dim br1 f5 fw7 ttu tc trackedExtraWide buttonPadding colorWhite bgColorWine" href="###" rel="noopener">Work with us</a>
@@ -69,7 +69,7 @@
   <div class="flex flex-wrap justify-center gapExtra">
 
     <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 ma0 mb3">
+      <p class="fw7 f4 f2-ns ma0 mb3">
         We offer
       </p>
       <p class="ma0 mb2">
@@ -83,8 +83,11 @@
       </p>
     </div>
 
+    <div class="h3 h-auto-ns w-100 w4-ns bgColorOrange">
+    </div>
+
     <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 ma0 mb3">
+      <p class="fw7 f4 f2-ns ma0 mb3">
         We created
       </p>
       <p class="ma0 mb2">
@@ -98,8 +101,11 @@
       </p>
     </div>
 
+    <div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
+    </div>
+
     <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 ma0 mb3">
+      <p class="fw7 f4 f2-ns ma0 mb3">
         We worked with
       </p>
       <p class="ma0 mb2">
@@ -116,8 +122,14 @@
       </p>
     </div>
 
+    <div class="h3 h-auto-ns w-100 w4-ns bgColorOrange">
+    </div>
+
+    <div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
+    </div>
+
     <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 ma0 mb3">
+      <p class="fw7 f4 f2-ns ma0 mb3">
         We are
       </p>
       <p class="ma0 mb2">
@@ -134,8 +146,11 @@
       </p>
     </div>
 
+    <div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
+    </div>
+
     <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 ma0 mb3">
+      <p class="fw7 f4 f2-ns ma0 mb3">
         We are
       </p>
       <p class="ma0 mb2">
@@ -163,7 +178,7 @@
   <div class="flex flex-row-l flex-column justify-between">
 
     <div class="w-100 w-50-ns">
-      <p class="ma0 mb2">
+      <p class="fw7 ma0 mb2">
         hi@offen.software
       </p>
       <p class="ma0 mb2">
@@ -178,7 +193,7 @@
       <p class="ma0 mb2 tl tr-l">
         Source code for this website
       </p>
-      <p class="ma0 tl tr-l">
+      <p class="fw7 ma0 tl tr-l">
         Work with us
       </p>
     </div>