diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7c7dcd4..814350b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -26,8 +26,28 @@
 </div>
 <div>
 <div class="wrapper" id="klantworden">
-  <h2>Klant worden?</h2>
-  <h2>Hoe gaan we te werk?</h2>
+  <div class="content">
+    <h2>Klant worden?</h2>
+    <p>
+      <span class="bold">Iedereen welkom</span>
+      Onze klanten zijn zowel kleine als middelgrote ondernemingen. In ons kantoor is ook een starter als bijberoep welkom. Iedere zelfstandige is ooit wel eens klein begonnen. Contacteer ons gerust voor vrijblijvende informatie.
+    </p>
+    <p>
+      <span class="bold">Ik heb al een boekhouder?</span>
+      Wij zullen u bij de overstap begeleiden, zodat de overgang vlot kan verlopen.
+      Wij contacteren uw vorige raadgever om ons uw dossier te bezorgen.
+    </p>
+    <h2>Hoe gaan we te werk?</h2>
+    <div class="timeline">
+      <div><p>Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.</p></div>
+      <div><p>We leggen je de werking uit van ons kantoor en kijken samen wat de beste ondernemingsvorm is voor jouw bedrijf.</p></div>
+      <div><p>We overlopen de voor- en nadelen van een éénmanszaak ten opzichte van een vennootschap, en wat de fiscale en boekhoudkundige gevolgen zijn van deze keuze.</p></div>
+      <div><p>Ons kantoor en onze werkmethodes worden voorgesteld en uw vragen over de verdere samenwerking zullen worden beantwoord.</p></div>
+      <div><p>Kleine dossiers met een beperkt aantal te boeken documenten krijgen de mogelijkheid om zelf de aan- en verkopen te registreren via eenvoudige Excel bestanden.</p></div>
+      <div><p>Interesse? Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens./p></div>
+    </div>
+  </div>
+  <img src="assets/b-images/customer.png" alt="klant">
 </div>
 </div>
 <div class="hero-container2">
@@ -98,7 +118,7 @@
     <p>Homepage</p>
   </div>
   <div class="google-maps">
-    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26011.531706816328!2d3.7327019887977553!3d51.06778304400319!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c376cf113b3e6f%3A0x3f11537833278a46!2sSinia%20Accountants%20En%20Belastingconsulenten!5e0!3m2!1sen!2sbe!4v1690233562850!5m2!1sen!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26011.531706816328!2d3.7327019887977553!3d51.06778304400319!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c376cf113b3e6f%3A0x3f11537833278a46!2sSinia%20Accountants%20En%20Belastingconsulenten!5e0!3m2!1sen!2sbe!4v1690233562850!5m2!1sen!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="google maps"></iframe>
   </div>
 </div>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b032a32..deaa3c8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,28 +1,28 @@
 @import '../styles.scss';
 
 app-header {
-  box-shadow: 0px 15px 10px rgba(0,0,0,0.21);
+  box-shadow: 0 1.5rem 1rem rgba(0,0,0,0.21);
   position: relative;
   z-index: 5;
 }
 
 .hero-container {
   width: 100%;
-  height: 500px;
+  height: 50rem;
   overflow: hidden;
 
   .hero {
     transform: scale(0.9);
     transform-origin: top left;
     margin: 0 auto;
-    margin-top: -550px;
+    margin-top: -55rem;
   }
 
   .overlay {
     background-color: rgba(255, 255, 255, 0.35);
-    height: 600px;
+    height: 60rem;
     width: 100%;
-    top: -1050px;
+    top: -105rem;
     display: inline-block;
     position: relative;
   }
@@ -30,20 +30,20 @@ app-header {
 
 .hero-container2 {
   width: 100%;
-  height: 350px;
+  height: 35rem;
   overflow: hidden;
 
   .hero {
     transform: scale(0.4);
     transform-origin: top left;
-    margin-top: -730px;
+    margin-top: -73rem;
   }
 
   .overlay {
     background-color: rgba(255, 255, 255, 0.35);
-    height: 600px;
+    height: 60rem;
     width: 100%;
-    top: -3100px;
+    top: -310rem;
     display: inline-block;
     position: relative;
   }
@@ -51,18 +51,19 @@ app-header {
 
 .bold {
   font-weight: bold;
+  display: block;
 }
 
 h2 {
   color: $primary-color;
-  font-size: 30px;
+  font-size: 3rem;
   font-weight: bold;
 }
 
 .wrapper {
-  max-width: 1200px;
+  max-width: 120rem;
   margin: 0 auto;
-  padding: 20px 20px;
+  padding: 2rem 2rem;
 }
 
 .alternate {
@@ -78,17 +79,38 @@ h2 {
   }
 
   img {
-    width: 45%;
+    max-width: 45%;
     margin-right: -2%;
-    margin-bottom: -50px;
-  }
-
-  span {
-    display: block;
+    margin-bottom: -5rem;
   }
 }
 
-#vacatures {
+#klantworden {
+  margin-bottom: 4rem;
+  .timeline {
+    border-left: 0.2rem solid $primary-color;
+    padding: 1rem 3rem 2rem 3rem;
+    margin-left: 2rem;
+
+    div + div {
+      margin-top: 5rem;
+    }
+
+    div:before {
+      content: '';
+      display: inline-block;
+      width: 3rem;
+      height: 3rem;
+      border-radius: 2rem;
+      border: 0.5rem solid $white;
+      background-color: $secondary-color;
+      position: absolute;
+      margin-left: -5rem;
+    }
+  }
+}
+
+#vacatures, #klantworden {
   display: flex;
   justify-content: space-between;
 
@@ -97,19 +119,15 @@ h2 {
   }
 
   img {
-    width: 45%;
+    max-width: 45%;
     margin-left: -2%;
-    margin-bottom: -50px;
-  }
-
-  span {
-    display: block;
+    margin-bottom: -5rem;
   }
 }
 
 .wrapper-contact {
   display: flex;
-  padding: 20px 0;
+  padding: 2rem 0;
 
   div {
     width: 50%;
@@ -118,11 +136,11 @@ h2 {
 
 .footer {
   width: 100%;
-  padding-top: 50px;
-  padding-bottom: 70px;
+  padding-top: 5rem;
+  padding-bottom: 7rem;
   text-align: center;
 
   span {
-    font-size: 20px;
+    font-size: 2rem;
   }
 }
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 3a46cf7..cac6d69 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -2,13 +2,13 @@
 
 :host {
   display: flex;
-  padding: 20px;
+  padding: 2rem;
 }
 
 .logo {
   text-decoration: none;
   display: flex;
-  gap: 10px;
+  gap: 1rem;
 
   .subtext {
     display: flex;
@@ -17,7 +17,7 @@
   }
 
   h1 {
-    font-size: 13px;
+    font-size: 1.3rem;
     color: $primary-color;
     font-weight: 800;
     margin: 0;
@@ -25,8 +25,8 @@
 
   p {
     color: $primary-color;
-    font-size: 13px;
-    width: 175px;
+    font-size: 1.3rem;
+    width: 17.5rem;
     margin: 0;
   }
 }
@@ -42,7 +42,7 @@
     color: $primary-color;
     text-decoration: none;
     margin: auto;
-    padding: 15px 30px;
+    padding: 1.5rem 3rem;
     font-weight: normal;
     transition: all .2s;
   }
diff --git a/src/assets/b-images/customer.png b/src/assets/b-images/customer.png
new file mode 100644
index 0000000..cd0331b
Binary files /dev/null and b/src/assets/b-images/customer.png differ
diff --git a/src/index.html b/src/index.html
index 0259896..58a26c6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,13 +11,18 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
 
   <style>
-    * {
+    html {
+      font-size: 10px;
+    }
+
+    body *{
       font-family: 'Inter';
+      font-size: 1.6rem;
     }
 
     body {
       margin: 0 auto;
-      max-width: 1920px;
+      max-width: 192rem;
       margin: 0 auto;
     }
   </style>