diff --git a/assets/icons/House.svg b/assets/icons/House.svg
new file mode 100644
index 00000000..340b347a
--- /dev/null
+++ b/assets/icons/House.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>House</title>
+    <g id="House" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M34.7181,23.9375 L37.7181,27.2695 L37.7181,42.5965 C37.7181,43.4235 37.0481,44.0945 36.2211,44.0965 L36.2211,44.0965 L11.2181,44.0965 C10.3891,44.0965 9.7181,43.4255 9.7181,42.5965 L9.7181,42.5965 L9.7181,27.2705 L12.7181,23.9385 L12.7181,41.0965 L34.7181,41.0965 L34.7181,23.9375 Z M23.7346,4.9994 C23.8166,5.0014 23.8976,5.0194 23.9786,5.0344 C24.0786,5.0524 24.1786,5.0704 24.2746,5.1084 C24.3736,5.1484 24.4646,5.2114 24.5546,5.2744 C24.6236,5.3214 24.6946,5.3634 24.7556,5.4234 C24.7806,5.4474 24.8146,5.4574 24.8386,5.4844 L24.8386,5.4844 L42.0506,24.6004 C42.6046,25.2164 42.5546,26.1644 41.9396,26.7194 C41.3236,27.2734 40.3756,27.2234 39.8216,26.6084 L39.8216,26.6084 L37.7156,24.2694 L34.7156,20.9374 L23.7166,8.7214 L12.7156,20.9384 L9.7156,24.2704 L7.6146,26.6034 C7.0606,27.2194 6.1126,27.2684 5.4966,26.7144 C4.8806,26.1604 4.8306,25.2114 5.3846,24.5964 L5.3846,24.5964 L22.5976,5.4804 C22.6256,5.4484 22.6656,5.4354 22.6956,5.4074 C22.7346,5.3714 22.7786,5.3464 22.8206,5.3144 C22.9366,5.2254 23.0576,5.1474 23.1886,5.0974 C23.2486,5.0744 23.3106,5.0654 23.3726,5.0514 C23.4926,5.0224 23.6126,4.9994 23.7346,4.9994 Z" id="house" fill="#0071B3"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/icons/Menu.svg b/assets/icons/Menu.svg
new file mode 100644
index 00000000..7048c37e
--- /dev/null
+++ b/assets/icons/Menu.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="Menu">
+	<path id="menu" class="st0" d="M29.5,32.5c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-22C6.7,35.5,6,34.8,6,34s0.7-1.5,1.5-1.5H29.5z
+		 M40.5,22.5c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-33C6.7,25.5,6,24.8,6,24s0.7-1.5,1.5-1.5H40.5z M37.5,12.5
+		c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-30C6.7,15.5,6,14.8,6,14s0.7-1.5,1.5-1.5H37.5z"/>
+</g>
+</svg>
diff --git a/assets/icons/User.svg b/assets/icons/User.svg
new file mode 100644
index 00000000..ce12a613
--- /dev/null
+++ b/assets/icons/User.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Avatar / User</title>
+    <g id="Avatar-/-User" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24,3 C12.4020203,3 3,12.4020203 3,24 C3,35.5979797 12.4020203,45 24,45 C35.5979797,45 45,35.5979797 45,24 C45,18.4304537 42.7875064,13.0890215 38.8492424,9.1507576 C34.9109785,5.21249365 29.5695463,3 24,3 Z M15,39.56 L15,35 C15,32.55 17.12,30.52 19.91,30.09 C20.2705073,30.0322532 20.6349034,30.0021655 21,30 L27,30 C27.3650966,30.0021655 27.7294927,30.0322532 28.09,30.09 C30.88,30.52 33,32.55 33,35 L33,39.56 C27.4391986,42.8066548 20.5608014,42.8066548 15,39.56 Z M36,37.37 L36,34.5 C35.9983997,34.3645491 35.9782112,34.2299592 35.94,34.1 C35.44,30.1 31.63,27 27,27 L26.65,27 L26.5,27 L21.5,27 L21.35,27 L21,27 C16.37,27 12.56,30.11 12.06,34.1 C12.0217888,34.2299592 12.0016003,34.3645491 12,34.5 L12,37.38 C6.43734192,32.4046074 4.52190254,24.5126059 7.18489754,17.5407945 C9.84789254,10.5689831 16.536911,5.96359214 24,5.96359214 C31.463089,5.96359214 38.1521075,10.5689831 40.8151025,17.5407945 C43.4780975,24.5126059 41.5626581,32.4046074 36,37.38 L36,37.37 Z M24,9 C19.581722,9 16,12.581722 16,17 C16,21.418278 19.581722,25 24,25 C28.418278,25 32,21.418278 32,17 C32,14.8782681 31.1571453,12.8434368 29.6568542,11.3431458 C28.1565632,9.84285472 26.1217319,9 24,9 Z M24,22 C21.2385763,22 19,19.7614237 19,17 C19,14.2385763 21.2385763,12 24,12 C26.7614237,12 29,14.2385763 29,17 C29,19.7614237 26.7614237,22 24,22 L24,22 Z" id="avatar" fill="#0071B3"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/logo/02-funda-Blue.svg b/assets/logo/02-funda-Blue.svg
new file mode 100644
index 00000000..3edea9aa
--- /dev/null
+++ b/assets/logo/02-funda-Blue.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 425.1 150.4" style="enable-background:new 0 0 425.1 150.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#60C5F8;}
+	.st1{fill:#53241B;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M425.1,150.3l-26-92.4l0,0C388.5,21.4,353.8,0,321.7,0H0l25.6,92.6v0.1c10.7,36.8,45.4,57.4,75.6,57.7
+		L425.1,150.3z M47.8,86.4C47.7,86.2,35.6,42.3,30.3,23c27.4,0,291.4,0,291.4,0c21.7,0,47.5,14.6,55.2,41.2
+		c0.1,0.3,15.5,56,17.5,63.2c-27.4,0-292.4,0-292.4,0C80,127.4,55.3,112.1,47.8,86.4z"/>
+	<path class="st1" d="M47.8,86.4C47.7,86.2,35.6,42.3,30.3,23c27.4,0,291.4,0,291.4,0c21.7,0,47.5,14.6,55.2,41.2
+		c0.1,0.3,15.5,56,17.5,63.2c-27.4,0-292.4,0-292.4,0C80,127.4,55.3,112.1,47.8,86.4z"/>
+	<g>
+		<path class="st2" d="M94.5,107.1h10.2v-43h11.9v-7.8h-11.9v-6.7c0-3.1,1.1-4.2,4.4-4.2h7.5v-9.6h-8.3c-7.9,0-13.8,4.3-13.8,13.8
+			v6.7H82.8l2.2,7.8h9.5L94.5,107.1L94.5,107.1z"/>
+		<path class="st2" d="M129.5,90.1c0,11.5,9,17.6,17,17.6c5.3,0,9.9-2,13.1-6h0.2v5.4h10.2V56.4h-10.2v30.2c0,6.9-4.3,10.9-10,10.9
+			c-5.8,0-10.1-4-10.1-10.9V56.4h-10.2L129.5,90.1L129.5,90.1z"/>
+		<path class="st2" d="M188.1,107.1h10.2V76.9c0-6.9,4.3-10.9,10.1-10.9c5.7,0,10,4,10,10.9v30.2h10.2V73.4c0-11.5-9-17.6-16.9-17.6
+			c-5.4,0-10,2-13.2,6h-0.2v-5.4h-10.2V107.1z"/>
+		<path class="st2" d="M274,107.1h10.2V35.8H274v25.9c-3.8-3.6-7.9-6-13.1-6c-6.2,0-10.7,2.8-13.6,6.6c-2.8,3.6-3.6,6.9-3.6,19.3
+			c0,12.5,0.8,15.8,3.6,19.4c2.9,3.8,7.4,6.6,13.6,6.6c5.2,0,9.9-2.4,13.1-5.9V107.1z M264,66c9.5,0,10,8.4,10,15.7
+			c0,7.4-0.5,15.8-10,15.8c-9.6,0-10.1-7.9-10.1-15.8C253.9,73.9,254.4,66,264,66z"/>
+		<path class="st2" d="M328.7,107.1h10.2V72.5c0-12.5-8.6-16.7-21.1-16.7c-7.6,0-13.2,2-17.1,7.4l8,6.1c1.8-2.9,4.3-3.9,9.6-3.9
+			c7.3,0,10.4,1.7,10.4,6.5v5.3h-14.1c-10.9,0-16.5,6.9-16.5,15c0,8.8,6.6,15.5,17.9,15.5c6.9,0,10.4-1.6,12.5-5.1h0.2L328.7,107.1
+			L328.7,107.1z M328.7,89.3c0,7.9-2.9,8.8-11.4,8.8c-6.9,0-9.6-3-9.6-6.4c0-3.7,2.8-6.1,8.8-6.1h12.2V89.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/index.html b/index.html
index d5923463..adfdc39b 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,31 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Saved Houses</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles/styles.css">
+    <link rel="stylesheet" href="assets\icons">
 </head>
 <body>
-    
+    <header class="header">
+        <button class="hamburger">Menu<img src="assets/icons/Menu.svg" alt="Menu">
+            <div class=".bar"></div>
+        </button>
+        <a href="https://www.funda.nl/"><img src="assets\logo\02-funda-Blue.svg" alt="logo funda" class="logo-funda"/></a>
+        <nav>
+
+            <ul class="nav-list-left">
+                <a href="https://www.funda.nl/zoeken/koop/?">Kopen</a>
+                <a href="https://www.funda.nl/zoeken/huur">Huren</a>
+                <a>Verkopen</a>
+            </ul>
+
+            <ul class="nav-list-right">
+                <a><img src="assets\icons\House.svg">Mijn huis</a>
+                <a><img src="assets\icons\User.svg"></i>Profiel</a>
+                <!-- Nog een "alt" nodig? -->
+            </ul>
+        </nav>         
+
+        
+      </header>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/scripts.js b/scripts/scripts.js
new file mode 100644
index 00000000..e69de29b
diff --git a/styles/styles.css b/styles/styles.css
index 3c3b566b..bd76b43b 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -15,15 +15,105 @@
     --secundairy-color-3:#F8C463;
     --secundairy-color-4:#66BA96;
 
-    --grayscale-color-1:#EDEDED;
-    --grayscale-color-2:#CCCCCC;
-    --grayscale-color-3:#666666;
-    --grayscale-color-4:#333333;
-
     --background-color-1:#EDEDED;
     --background-color-2:#333333;
 
     --content-radius: 3px;
-    --regular-text: 16px;
+    --regular-text: 1em;
     --fonts:"ProximaNova", sans-serif;   
+
+}
+
+* {
+    font-family: var(--fonts);
+}
+
+body {
+    background-color: var(--background-color-1);
+    color: var(--primairy-color-2);
+    margin: 0;
+    padding: 0;
+
+    font-size: var(--regular-text);
+    
+}
+
+/* Heading door @samarafelladina */
+/* organismen */
+header {
+    padding: .8em;
+    font-size: .8em;
+    display: flex;
+}
+
+button {
+    appearance: auto;
+    border-style: none;
+}
+
+ul {
+    list-style: none;
+}
+
+.header {
+    display: flex;
+    background-color: var(--secundairy-color-1);
+    align-items: center;
+    gap: .8em;
+}
+
+.logo-funda {
+    width: auto;
+    height: 2em;
+    cursor: pointer;
+}
+
+.hamburger{
+    flex-direction: column-reverse;
+}
+
+.nav-list-right, .nav-list-left {
+    display: flex;
+    gap: 1em;
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+.nav-list-right a {
+    flex-direction: column;
+}
+
+.hamburger, .nav-list-right a, .nav-list-left {
+    height: auto;
+    width: auto;
+    background: none;
+    color: var(--primairy-color-2);  
+
+    text-align: center;
+    cursor: pointer;
+    font-size: .8em;
+    display: flex;
+    justify-content: center;  
+}
+
+.hamburger img, .nav-list-right img {
+    height: 2em;
+    width: auto;
+    align-self: center;
+    border-spacing: 1em;
+}
+
+.header a:link, .header a:visited, .header a:active{
+    color: var(--primairy-color-2);
+    text-decoration: none;
 }
+
+
+/* Wat is een Pseudo (::) element? Dit is een element wat een
+deel van een element gebruikt, bijvoorbeeld de eerste letter, 
+of kan je dingen voor en na invoegen aan het element. */
+
+
+/* Heading door @samarafelladina */
+
+