diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index d7264d3..af5f6f9 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -5,5 +5,5 @@
   <span class="btw">BTW BE0673 769 126</span>
 </div>
 
-<img src="assets/roze_barcode_outlined_SVG.svg" class="only-on-dark" />
-<img src="assets/zwart_barcode_outlined_SVG.svg" class="only-on-light" />
+<img alt="lotte@ontvlambaar.be" src="assets/roze_barcode_outlined_SVG.svg" class="only-on-dark" />
+<img alt="lotte@ontvlambaar.be" src="assets/zwart_barcode_outlined_SVG.svg" class="only-on-light" />
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 8243406..753e18c 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -41,6 +41,7 @@ img {
   .contact {
     width: 100%;
     margin-bottom: 2rem;
+    font-size: 1.5rem;
   }
 
   img {
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index b242806..4d93dd8 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier" (click)="isCollapsed = !isCollapsed">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
   <path d="M5 6.5H14V8H10V6.5Z"></path>
   <path d="M5 11.5H16.5V13H7.5V11.5Z"></path>
   <path d="M5 16.5H19V18H5V16.5Z"></path>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index f5ef9f0..7158e22 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -40,18 +40,22 @@ svg {
     left: 50%;
     transform: translateX(-50%);
     padding: 0;
+    border-radius: 1rem;
+    background-color: var(--menu-color);
 
     &.collapsed {
-      max-height: 10rem;
+      max-height: 25rem;
       transition: max-height 0.5s ease;
       overflow: hidden;
     }
 
     li {
-      background-color: var(--background-color);
+      background-color: var(--menu-color);
       z-index: 200;
-      height: 3rem;
+      height: 4rem;
       width: 100%;
+      color: var(--menu-text-color);
+      padding: 0 1rem;
     }
 
     a {
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 375f401..a167a13 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -13,8 +13,10 @@ export class HeaderComponent {
 
   @HostListener('document:click', ['$event'])
   public reset(event: unknown) {
-    if ((event as any).srcElement.tagName !== 'path') {
+    if ((event as any).srcElement.closest("svg")?.tagName !== 'svg') {
       this.isCollapsed = false;
+    } else {
+      this.isCollapsed = !this.isCollapsed;
     }
   }
 }
diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss
index e0bcc5d..43381da 100644
--- a/src/app/hero/hero.component.scss
+++ b/src/app/hero/hero.component.scss
@@ -38,4 +38,8 @@ img {
   .slogan {
     font-size: 1.3rem;
   }
+
+  :host {
+    padding: 7rem 0;
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 4868171..c8431a3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,6 +4,8 @@ html {
   --background-color: rgb(255, 255, 255);
   --accent-color: rgb(211, 55, 38);
   --logo-color: var(--text-color);
+  --menu-color: #e0e0e0;
+  --menu-text-color: var(--text-color);
 
   font-family: Fredoka;
   font-weight: 300;
@@ -23,6 +25,8 @@ html {
   --background-color: rgb(41, 23, 44);
   --accent-color: #E94541;
   --logo-color: #E94541;
+  --menu-color: #A3203D;
+  --menu-text-color: #F4A5A7;
 
   .only-on-dark {
     display: inline-block;