diff --git a/src/app/app.component.html b/src/app/app.component.html
index cc54c78..0279c20 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,12 @@
 <app-header></app-header>
 <div class="hero-container">
 <img class="hero hero1" src="assets/hero1.webp" alt="hero-image">
-<div class="overlay"></div>
+<div class="overlay">
+  <div class="wrapper-slogan">
+    <p>Sinia,</p>
+    <p>Uw betrouwbare partner</p>
+  </div>
+</div>
 </div>
 <div class="alternate">
 <div class="wrapper">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 6a4f173..1766a90 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -23,8 +23,26 @@ app-header {
     height: 60rem;
     width: 100%;
     top: -160rem;
-    display: inline-block;
     position: relative;
+
+    .wrapper-slogan {
+      padding: 2rem;
+      max-width: 120rem;
+      margin: 0 auto;
+    }
+
+    p {
+      font-weight: bold;
+      text-transform: uppercase;
+      background-color: rgba(30, 45, 91, 0.8);
+      font-size: 4rem;
+      padding: 1.5rem;
+      color: $white;
+      position: relative;
+      top: 8rem;
+      width: fit-content;
+      z-index: 80;
+    }
   }
 }
 
@@ -219,8 +237,15 @@ h2 {
     height: 20rem;
 
     .hero {
-      transform: translateY(-50%) translateX(-50%) scale(0.35);
-      top: 25%;
+      transform: translateY(-50%) translateX(-50%) scale(0.55);
+      top: 0%;
+    }
+
+    .overlay {
+      p {
+        font-size: 2rem;
+        top: 5rem;
+      }
     }
   }