diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/lib/components/header/Header.svelte b/src/lib/components/header/Header.svelte
index f3489d2..22ce4c4 100644
--- a/src/lib/components/header/Header.svelte
+++ b/src/lib/components/header/Header.svelte
@@ -1,48 +1,224 @@
-<script>
-    import { onMount } from 'svelte';
+<header class="blur">
+	<nav>
+		<a href="/" class="logo__link d-flex" on:click={closeNav}>
+			<div class="personal__logo">Matthijs Blauw</div>
+		</a>
+
+		<div class="nav__menu nav__list">
+			<ul class="nav__link--list nav__item">
+				<li>
+					<a href="#techstack" class="nav__link nav__link--anchor link__hover-effect link__hover-effect--black">Technologie</a>
+				</li>
+				<li>
+					<a href="#projects" class="nav__link nav__link--anchor link__hover-effect link__hover-effect--black">Projecten</a>
+				</li>
+				<li>
+					<a href="mailto:matthijs.blauw@gmail.com" class="nav__link nav__link--anchor nav__link--anchor-primary">Contact</a>
+				</li>
+			</ul>
+		</div>
+	</nav>
+</header>
+
+<style>
+    /* NAVIGATION BAR */
+    nav {
+        height: 100px;
+        width: 100%;
+        max-width: 1000px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+    }
+
+    .nav__link--anchor {
+        margin: 0 12px;
+        color: #242424;
+        text-decoration: none;
+        font-weight: 700;
+    }
+
+    .nav__link--list {
+        display: flex;
+    }
+
+    .nav__link--anchor-primary {
+        background-color: var(--color-blue);
+        padding: 8px 20px;
+        border-radius: 50px;
+        color: white;
+        transition: all 300ms ease;
+    }
+
+    .nav__link--anchor-primary:hover {
+        background-color: #14539a;
+    }
+
+    .personal__logo {
+        font-size: 24px;
+        color: var(--color-blue);
+        margin: 0 12px;
+        font-weight: bold;
+    }
+
+    .color__scroll {
+        fill: #192321;
+    }
+
+    /*global*/
+    a {
+        text-decoration: none;
+    }
+
+    header {
+        position: fixed;
+        width: 100%;
+        z-index: 999;
+        padding: 0.75rem 1rem;
+        top: 0;
+        transition: all 0.3s ease;
+    }
+
+    /*Nav*/
+    nav {
+        position: relative;
+        height: 45px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 120rem;
+        margin: auto;
+    }
+
+    .nav__menu {
+        /*display: flex;*/
+        /*justify-content: center;*/
+    }
+
+    .nav__list {
+        margin-bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .nav__item {
+        margin-right: 2em;
+    }
+
+    .logo__link {
+        z-index: 999999;
+    }
+
+    .nav__link {
+        transition: 0.3s;
+    }
+
+    .nav__link:hover {
+        text-decoration: underline;
+        color: red;
+    }
+
+    .menu__trigger {
+        display: none;
+        z-index: 99999;
+    }
+
+    .blur {
+        backdrop-filter: blur(24px);
+    }
+
+    @media screen and (max-width: 1024px) {
+        .menu__trigger {
+            display: block;
+        }
+
+        header {
+            padding: 0.75rem 1rem;
+        }
 
-    let isNavOpen = false;
+        nav {
+            height: 32px;
+        }
+
+        .nav__menu {
+            transition: 0.4s;
+            margin-top: 2em;
+        }
+
+        .nav__list {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 100vh;
+            padding: 4rem 1rem;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: flex-start;
+            transition: transform 0.3s ease-out;
+            transform: translateY(-100%);
+        }
 
-    const toggleNav = () => {
-        isNavOpen = !isNavOpen;
-        if (isNavOpen) {
-            document.body.classList.add('no-scroll');
-        } else {
-            document.body.classList.remove('no-scroll');
+        .nav__list--open {
+            transform: translateY(0);
+            padding-top: 5em;
+        }
+
+        .nav__item {
+            font-size: 48px;
+            font-weight: bold;
+            font-family: Inter, sans-serif;
         }
     }
 
-    const closeNav = () => {
-        isNavOpen = false;
-        document.body.classList.remove('no-scroll');
+    .text-color__scroll {
+        color: #192321;
     }
-</script>
 
-<header class="blur">
-    <nav>
-        <router-link to="/" class="logo__link d-flex" on:click={closeNav}>
-            <div class="personal__logo">Amir Amerian</div>
-        </router-link>
-
-        <div class="nav__menu nav__list">
-            <ul class="nav__link--list nav__item">
-                <li>
-                    <a href="#techstack" class="nav__link nav__link--anchor link__hover-effect link__hover-effect--black">Technologie</a>
-                </li>
-                <li>
-                    <a href="#projects" class="nav__link nav__link--anchor link__hover-effect link__hover-effect--black">Projecten</a>
-                </li>
-                <li>
-                    <a href="mailto:matthijs.blauw@gmail.com" class="nav__link nav__link--anchor nav__link--anchor-primary">Contact</a>
-                </li>
-            </ul>
-        </div>
-
-<!--        <HamburgerMenu on:click={toggleNav} {isNavOpen} class="menu__trigger"></HamburgerMenu>-->
-    </nav>
-</header>
+    .text-color__nav-open {
+        color: #ffffff;
+    }
 
-<style>
-    /* Your existing CSS styles */
-</style>
+    .nav__list--open {
+        visibility: visible;
+    }
+
+    .logo-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    .mobile-logo {
+        display: block;
+    }
+
+    .desktop-logo {
+        display: none;
+    }
 
+    /* SM (for tablets - screens ≥ than 768px wide) */
+    @media (min-width: 768px) {
+        /* CSS rules for tablets go here */
+        .mobile-logo {
+            display: none;
+        }
+
+        .desktop-logo {
+            display: block;
+        }
+    }
+
+    /* MD (for small laptops - screens ≥ than 992px wide) */
+    @media (min-width: 992px) {
+        /* CSS rules for small laptops go here */
+    }
+
+    /* LG (for laptops and desktops - screens ≥ than 1200px wide) */
+    @media (min-width: 1200px) {
+        /* CSS rules for laptops and desktops go here */
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0c6973d..9631a53 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,8 +3,8 @@
 	// Import Components
 	import Header from "$lib/components/header/Header.svelte";
 	import Footer from "$lib/components/footer/Footer.svelte";
-	// Import Style
-	// import './styles.css';
+	import "./global.css";
+	// import 'styles/global.css';
 
 </script>
 
diff --git a/src/routes/global.css b/src/routes/global.css
new file mode 100644
index 0000000..93bd804
--- /dev/null
+++ b/src/routes/global.css
@@ -0,0 +1,142 @@
+
+
+:root {
+    --color-blue: #14539A;
+
+}
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Lato", sans-serif;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+h1,
+h2,
+h5,
+h6,
+span {
+    color: #242424;
+    text-align: center;
+    line-height: 1.25;
+}
+
+h1 {
+    font-size: 36px;
+}
+
+h3{
+    text-align: left;
+    color: #fff;
+
+}
+
+p {
+    line-height: 1.5;
+    font-size: 16px;
+}
+
+button{
+    border: none;
+}
+a {
+    text-decoration: none;
+    position: relative;
+    transition: opacity 300ms ease;
+}
+
+i:hover {
+    opacity: 0.7;
+}
+
+li {
+    list-style-type: none;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.container-class {
+    padding: 50px 0;
+}
+
+.row-class {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 12px;
+}
+
+.text--blue {
+    color: var(--color-blue);
+}
+
+.section:nth-child(uneven) {
+    background-color: #f8f8f8;
+}
+
+.section__title {
+    margin-bottom: 20px;
+    font-size: 36px;
+
+}
+
+.about-section{
+
+}
+
+/* Breakpoints */
+
+/* Small phones, tablets, large smartphones */
+@media (max-width: 768px) {
+    .nav {
+        height: 68px;
+    }
+
+    h1 {
+        font-size: 28px;
+    }
+    .about-me__info--para {
+        font-size: 18px;
+    }
+    .language {
+        width: calc(100% / 3);
+    }
+    .project__description--para p{
+        font-size: 14px;
+    }
+
+    .project__description {
+        left: 30px;
+        padding-right: 30px;
+    }
+}
+
+/* Small phones */
+@media (max-width: 576px) {
+    h1 {
+        font-size: 24px;
+    }
+    .about-me__info--para {
+        font-size: 16px;
+    }
+    .language {
+        width: calc(100% / 2);
+    }
+    .project__description--para p{
+        font-size: 12px;
+    }
+    .project__description {
+        left: 20px;
+        padding-right: 20px;
+    }
+}
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
deleted file mode 100644
index e69de29..0000000