diff --git a/.angular-cli.json b/.angular-cli.json
index fa4d6bc..55ae1a2 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -19,8 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/bootstrap/scss/bootstrap.scss",
         "styles.scss",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6e71d0c..5d1ec6b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,30 +2,38 @@
 <div class="container-fluid">
 
   <div class="row">
-    <div class="col-md-12 centercontents" id="topname">
+    <div class="col-md-8 offset-md-2">
+      <div class="centercontents" id="topname">
         <span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
+      </div>
     </div>
   </div>
 
-  <div class="row below-name">
-
-  </div>
-
   <!--the top menu... should be always visible, everywhere-->
   <div class="row">
-    <div class="col-md-12 centercontents" id="topmenubuttons">
-      <div class="btn-group mx-auto" role="group" aria-label="Basic example">
-        <!-- <button type="button" class="btn btn-secondary">Left</button> -->
-        <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
-        <!-- <button type="button" class="btn btn-secondary">Right</button> -->
-        <a routerLink="/home"><i class="text-secondary fa fa-home fa-fw fa-2x" tooltip="Huis" placement="bottom" aria-hidden="true"></i></a>
-        <a routerLink="/posts"><i class="text-secondary fa fa-sticky-note fa-fw  fa-2x" tooltip="Posts" placement="bottom" aria-hidden="true"></i></a>
-        <a routerLink="/cv"><i class="text-secondary fa fa-id-badge fa-fw fa-2x" tooltip="Curriculum Vitae" placement="bottom" aria-hidden="true"></i></a>
+    <div class="col-md-8 offset-md-2 centercontents">
+      <div id="topmenubuttons">
+        <div class="btn-group mx-auto" role="group" aria-label="Basic example">
+          <!-- <button type="button" class="btn btn-secondary">Left</button> -->
+          <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
+          <!-- <button type="button" class="btn btn-secondary">Right</button> -->
+          <a routerLink="/home"><i class="text-secondary fa fa-home fa-fw fa-2x" tooltip="Huis" placement="bottom" aria-hidden="true"></i></a>
+          <a routerLink="/posts"><i class="text-secondary fa fa-sticky-note fa-fw  fa-2x" tooltip="Posts" placement="bottom" aria-hidden="true"></i></a>
+          <a routerLink="/cv"><i class="text-secondary fa fa-id-badge fa-fw fa-2x" tooltip="Curriculum Vitae" placement="bottom" aria-hidden="true"></i></a>
+        </div>
       </div>
     </div>
   <!--row-->
   </div>
 
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <div class="pagetype">
+        Posts
+      </div>
+    </div>
+  </div>
+
   <!--this shows the current route's content-->
   <div class="row">
     <div class="col-md-8 offset-md-2">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index fd7038b..6aa7aa8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,30 +1,43 @@
+@import "../globals";
+
 .centercontents {
     text-align: center;
     margin-left: auto;
     margin-right: auto
 }
 
-#topname span {
-    font-size: 23pt
+#topname {
+  //font-family: $mainFont;
+  margin-top: 25px;
+  padding-bottom: 9px;
+}
+
+#topname #first {
+    font-size: 250%
 }
 
 #topname #dot {
     line-height: 20pt;
-    font-size: 50pt;
+    font-size: 600%;
 }
 
 #topname #last {
     font-size: 20pt;
 }
 
-#topmenubuttons {
-    border-bottom: 1pt solid black;
-    padding-bottom: 5px;
-    margin-bottom: 11pt;
+#topmenubuttons, #topname {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
 }
 
 //this is the row below the name, will use this for styling
 .row.below-name {
-  border-bottom: 1px solid black;
-  margin-bottom: 8px;
+}
+
+.pagetype {
+  text-align: center;
+  font-size: 200%;
+  border-bottom: 1px solid black;
+  border-top: 1px solid black;
+  margin: 35px 0px 25px 30px;
 }
diff --git a/src/app/components/post/post.component.scss b/src/app/components/post/post.component.scss
index 788d284..7a38c7f 100644
--- a/src/app/components/post/post.component.scss
+++ b/src/app/components/post/post.component.scss
@@ -2,7 +2,7 @@
 @import '../../../globals';
 
 .post  {
-  font-family: $mainFont !important;
+  //font-family: $mainFont !important;
 }
 
 .post-header {
@@ -14,7 +14,8 @@
 .post-title {
   text-align: center;
   flex-grow: 1;
-  font-size: 150%;
+  font-size: 200%;
+  font-style: italic;
 }
 
 .post-date {
diff --git a/src/globals.scss b/src/globals.scss
index 1f0368d..491b408 100644
--- a/src/globals.scss
+++ b/src/globals.scss
@@ -1,6 +1,9 @@
 /* This file is meant to be imported into other scss files */
 @import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans');
 @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');
+@import url('https://fonts.googleapis.com/css?family=Lusitana|Playfair+Display');
 
 //$mainFont: 'Cormorant Garamond', serif;
-$mainFont: 'Quattrocento Sans', sans-serif;
+//$mainFont: 'Quattrocento Sans', sans-serif;
+//$mainFont: 'Playfair Display', serif;
+$mainFont: 'Lusitana', serif;
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..e0b7421 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import 'globals.scss';
+
+//$font-family-sans-serif: $mainFont;
+
+body {
+  font-family: $mainFont;
+}