diff --git a/public/index.html b/public/index.html
index 0068631..5efb38e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
     <title>KamilCraft.com</title>
   </head>
   <body>
diff --git a/scss/_root.scss b/scss/_root.scss
index 85b0ff9..1f2eba1 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,7 +1,7 @@
 @import "colors";
 
 :root {
-  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family: 'Roboto', sans-serif;;
   --dark-gray-color: #{$dark-gray};
   --gray-color: #{$gray};
   --text-color: #{$text-color};
diff --git a/scss/default.scss b/scss/default.scss
index c03e42e..9b030c8 100644
--- a/scss/default.scss
+++ b/scss/default.scss
@@ -16,5 +16,4 @@ p {
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 15px;
 }
diff --git a/src/App.vue b/src/App.vue
index c46d0ed..fb0c28f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,12 @@
 <template>
   <div id="app">
-    <site-header />
+    <SiteHeader />
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
 #app {
-  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
-  display: flex;
   font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -17,7 +15,7 @@
 </style>
 
 <script>
-import SiteHeader from './components/SiteHeader'
+import SiteHeader from '@/components/SiteHeader'
 
 export default {
   name: 'App',
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
new file mode 100644
index 0000000..1b28479
--- /dev/null
+++ b/src/components/Navigation.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="container">
+    <router-link to="/">
+      <div class="logo">Kamil<span class="logo-element">Craft</span></div>
+    </router-link>
+    <nav class="nav">
+      <ul class="site-menu">
+        <li class="menu-element">
+          <router-link to="/">Start</router-link>
+        </li>
+        <li class="menu-element">
+          <router-link to="/projects">Projekty</router-link>
+        </li>
+        <li class="menu-element">
+          <router-link to="/about">O mnie</router-link>
+        </li>
+        <li class="menu-element">
+          <router-link to="/contact">Kontakt</router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+
+  div.logo {
+    padding: 14px 20px 14px 40px;
+    font-family: 'Thasadith', sans-serif;
+    font-size: 2.5em;
+    color: #5C5C5C;
+    background-color: white;
+
+    .logo-element {
+      color: #A2CF00;
+    }
+  }
+}
+.nav {
+  margin-left: 20px;
+  .site-menu {
+    display: flex;
+    list-style: none;
+
+    .menu-element {
+      margin-right: 30px;
+
+      a {
+        color: #EBEBEB;
+
+        &.router-link-exact-active, &:hover {
+          color: #A2CF00;
+        }
+      }
+
+      &:last-child {
+        margin-right: unset;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'SiteHeader',
+  data () {
+    return {
+      publicPath: process.env.BASE_URL
+    }
+  }
+}
+</script>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index ce0bd46..8bd0752 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,72 +1,22 @@
 <template>
-  <header id="header">
-    <router-link to="/">
-      <!-- <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`"> -->
-      <h1 id="nav-text">KamilCraft</h1>
-    </router-link>
-    <nav id="navigation">
-      <ul id="menu">
-        <li class="menu-element"><router-link to="/">Strona główna</router-link></li>
-        <li class="menu-element"><router-link to="/projects">Projekty</router-link></li>
-        <li class="menu-element"><router-link to="/about">O mnie</router-link></li>
-        <li class="menu-element"><router-link to="/contact">Kontakt</router-link></li>
-      </ul>
-    </nav>
+  <header class="page-header">
+    <navigation/>
   </header>
 </template>
 
-<style lang="scss">
-#header {
-  width: 250px;
-  height: 100vh;
-  background-color: #1893D7!important;
-  background-image: linear-gradient(to top,#005C93 25%,#2C395C);
-  #nav-text {
-    color: white;
-  }
-  #nav-logo {
-    display: block;
-    width: 250px;
-    height: 67px;
-    padding: 8px 0;
-    background-color: #fafafa !important;
-  }
-  #navigation {
-    #menu {
-      list-style: none;
-      margin: 0;
-      .menu-element {
-        display: block;
-        padding: 0 10px;
-
-        &:hover {
-          background: rgba(0, 0 , 0, .1);
-        }
-      }
-
-      a {
-        display: block;
-        line-height: 50px;
-        font-weight: bold;
-        color: #dcdcdc;
-
-        &.router-link-exact-active {
-          color: white;
-        }
-      }
-
-    }
-  }
-}
-</style>
-
 <script>
+import Navigation from '@/components/Navigation'
+
 export default {
   name: 'SiteHeader',
-  data () {
-    return {
-      publicPath: process.env.BASE_URL
-    }
+  components: {
+    navigation: Navigation
   }
 }
 </script>
+
+<style lang="scss">
+.page-header {
+  background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
+}
+</style>
