diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index 5576f0c..a1e7802 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -1 +1,9 @@
-*{box-sizing:border-box;margin:0;padding:0;}
+: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";
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
diff --git a/public/index.html b/public/index.html
index 1442dc8..07f2866 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="">
+<!doctype html>
+<html lang="pl">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/App.vue b/src/App.vue
index 93dec8d..194fc21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,45 @@
 <template>
   <div id="app">
-    <navigation/>
+    <site-header />
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
+  display: flex;
+  font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
 }
+a {
+  text-decoration: none;
+}
+h2 {
+  font-size: 1.8em;
+  margin-bottom: 5px;
+}
+p {
+  font-size: 1.1em;
+  line-height: 1.4em;
+  padding-bottom: 10px;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 15px;
+}
 </style>
+
 <script>
-import Navigation from '@/components/Navigation.vue'
+import SiteHeader from '@/components/SiteHeader.vue'
+
 export default {
-  components: { Navigation }
+  name: 'App',
+  components: {
+    SiteHeader
+  }
 }
 </script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
deleted file mode 100644
index e63539e..0000000
--- a/src/components/Navigation.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div id="nav">
-    <router-link to="/">
-      <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
-    </router-link>
-    <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>
-  </div>
-</template>
-
-<style lang="scss">
-a {
-  text-decoration: none;
-}
-#nav {
-  display: flex;
-  max-width: 1000px;
-  margin: 0 auto;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 30px;
-
-  #nav-logo {
-    display: block;
-    object-fit: cover;
-    height: 50px;
-  }
-
-  #menu {
-    display: flex;
-    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: #2c3e50;
-
-      &.router-link-exact-active {
-        color: #42b983;
-      }
-    }
-
-  }
-}
-@media (max-width: 600px) {
-  #nav {
-    justify-content: center;
-
-    #menu {
-      display: none;
-    }
-  }
-}
-</style>
-<script>
-export default {
-  data () {
-    return {
-      publicPath: process.env.BASE_URL
-    }
-  }
-}
-</script>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
new file mode 100644
index 0000000..ae8d790
--- /dev/null
+++ b/src/components/SiteHeader.vue
@@ -0,0 +1,66 @@
+<template>
+  <header id="header">
+    <router-link to="/">
+      <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
+    </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>
+</template>
+
+<style lang="scss">
+#header {
+  width: 250px;
+  height: 100vh;
+  background-color: #4f4f4f !important;
+  #nav-logo {
+    display: block;
+    width: 250px;
+    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>
+export default {
+  name: 'SiteHeader',
+  data () {
+    return {
+      publicPath: process.env.BASE_URL
+    }
+  }
+}
+</script>
diff --git a/src/components/sections/About.vue b/src/components/sections/About.vue
index 416cb87..66defe7 100644
--- a/src/components/sections/About.vue
+++ b/src/components/sections/About.vue
@@ -1,62 +1,63 @@
 <template>
   <section id="about">
-    <h1>O mnie:</h1>
-    <div id="grid">
-      <div id="grid-text">
-        <p>Nazywam się <strong>Kamil Niemczycki</strong>, jestem studentem kierunku <strong>Informatyka</strong> o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p>
-        <p>Swoją przygodę w internecie rozpocząłem od nagrywania poradników, które umieszczałem na moim starym kanale youtube Moje Poradniki (wcześniej Niemczycki12). Z czasem zacząłem odczuwać potrzebę wypowiedzenia się, co spowodowało, że utworzyłem drugi kanał NiKCamii (wcześniej KamilNiemczycki), który był miejscem gdzie dodawałem Vlogi.</p>
-      </div>
-      <div id="grid-photo">
-        <figure id="about-photo">
-          <img :src="`${publicPath}assets/me.png`" />
-        </figure>
+    <div class="container">
+      <div id="grid">
+        <div id="grid-text">
+          <h2 class="name">Kamil Niemczycki</h2>
+          <div class="tagline">Web Developer</div>
+          <p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p>
+        </div>
+        <div id="grid-photo">
+          <figure id="about-photo">
+            <img :src="`${publicPath}assets/me.png`" />
+          </figure>
+        </div>
       </div>
     </div>
   </section>
 </template>
+
 <style lang="scss">
-h1 {
-  font-size: 1.6em;
-  margin: 30px 0 20px;
-}
-#about {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-#grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr .8fr;
-  grid-template-areas:
-    'text text photo';
-  align-items: center;
-  #grid-text {
-    grid-area: text;
-    text-align: left;
-
-    p {
-      font-size: 1.1em;
-      line-height: 1.4em;
-      padding-bottom: 10px;
-    }
+section#about {
+  padding: 20px 0;
+  background-color: #fafafa !important;
+  h2.name {
+    font-size: 2.1em;
+    margin-bottom: 5px;
   }
-  #grid-photo {
-    grid-area: photo;
+  div.tagline {
+    font-size: 1.6em;
+    margin-bottom: .7em;
   }
-  figure {
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-@media (max-width: 900px) {
   #grid {
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
+     display: grid;
+     grid-template-columns: 1fr 1fr .8fr;
+     grid-template-areas:
+       'text text photo';
+     align-items: center;
+     #grid-text {
+       grid-area: text;
+       text-align: left;
+     }
+     #grid-photo {
+       grid-area: photo;
+     }
+     figure {
+       text-align: center;
+       img {
+         object-fit: cover;
+         width: 200px;
+         height: 200px;
+       }
+     }
+  }
+  @media (max-width: 900px) {
+    #grid {
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas:
     'text text'
     'photo photo';
+    }
   }
 }
 </style>
diff --git a/src/components/sections/Experiences.vue b/src/components/sections/Experiences.vue
new file mode 100644
index 0000000..c818f62
--- /dev/null
+++ b/src/components/sections/Experiences.vue
@@ -0,0 +1,20 @@
+<template>
+  <section id="experiences">
+    <div class="container">
+      <h2>Moje doświadczenie</h2>
+      <p>I have more than 10 years' experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies I use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'Experiences'
+}
+</script>
+
+<style lang="scss">
+  section#experiences {
+
+  }
+</style>
diff --git a/src/main.js b/src/main.js
index ff81a35..f7f1037 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import 'bootstrap'
-import 'bootstrap/scss/bootstrap.scss'
+/* import 'bootstrap' */
+/* import 'bootstrap/scss/bootstrap.scss' */
 
 Vue.config.productionTip = false
 
diff --git a/src/views/About.vue b/src/views/About.vue
index 3a66ce5..b582948 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,9 +1,18 @@
 <template>
-  <div class="about">
-    <h1>{{ $route.meta.title }}</h1>
-    <p>Nazywam się Kamil Niemczycki, jestem studentem kierunku Informatyka o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p>
-    <p>Swoją przygodę w internecie rozpocząłem od nagrywania poradników, które umieszczałem na moim starym kanale youtube Moje Poradniki (wcześniej Niemczycki12). Z czasem zacząłem odczuwać potrzebę wypowiedzenia się, co spowodowało, że utworzyłem drugi kanał NiKCamii (wcześniej KamilNiemczycki), który był miejscem gdzie dodawałem Vlogi.</p>
-    <p>Aktualnie zajmuję się projektowaniem i programowaniem aplikacji web w postaci stron www, wykorzystując od strony backend'u język skryptowy PHP. Znam także język znaczników - HTML 5, jego kompana - CSS, jak i podstawy JavaScript(), które są wykorzystwyane w frontend'dzie.</p>
-    <p>Backend, frontend ❤</p>
-  </div>
+  <section id="about">
+    <div class="container">
+      <h2>{{ $route.meta.title }}</h2>
+      <p>Nazywam się Kamil Niemczycki, jestem studentem kierunku Informatyka o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p>
+      <p>Swoją przygodę w internecie rozpocząłem od nagrywania poradników, które umieszczałem na moim starym kanale youtube Moje Poradniki (wcześniej Niemczycki12). Z czasem zacząłem odczuwać potrzebę wypowiedzenia się, co spowodowało, że utworzyłem drugi kanał NiKCamii (wcześniej KamilNiemczycki), który był miejscem gdzie dodawałem Vlogi.</p>
+      <p>Aktualnie zajmuję się projektowaniem i programowaniem aplikacji web w postaci stron www, wykorzystując od strony backend'u język skryptowy PHP. Znam także język znaczników - HTML 5, jego kompana - CSS, jak i podstawy JavaScript(), które są wykorzystwyane w frontend'dzie.</p>
+      <p>Backend, frontend ❤</p>
+    </div>
+  </section>
 </template>
+
+<style lang="scss">
+section#about {
+  padding: 20px 0;
+  background-color: #fafafa !important;
+}
+</style>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index 90a8af9..f7eb057 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -11,6 +11,6 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
 
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9442052..5af318e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="home">
-    <About/>
+    <About />
+    <Experiences />
   </div>
 </template>
 
 <script>
 import About from '@/components/sections/About.vue'
+import Experiences from '@/components/sections/Experiences.vue'
 
 export default {
   name: 'Home',
   components: {
-    About
+    About,
+    Experiences
   }
 }
 </script>
