diff --git a/templates/blog.html b/templates/blog.html
index cb79934..21f2aeb 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -3,9 +3,18 @@
 {% from "macros/pagination.html" import render_pagination %}
 {% block title %}{{ this.title }}{% endblock %}
 {% block body %}
-  {% for child in this.pagination.items %}
-    {{ render_blog_post(child, from_index=true) }}
-  {% endfor %}
-
-  {{ render_pagination(this.pagination) }}
+<div class="container">
+  <div class="row">
+    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+      <div class="app app-blog span8">
+        <section class="blog-list">
+        {% for child in this.pagination.items %}
+          {{ render_blog_post(child, from_index=true) }}
+        {% endfor %}
+        {{ render_pagination(this.pagination) }}
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
index 01abb36..5ed4aee 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -1,7 +1,21 @@
 <!doctype html>
 <head>
-    <!-- Google analytics -->
+    <meta charset="utf-8">
+    <!-- link rel="stylesheet" href="{{ '/u/static/style.css'|url }}" -->
+    <title>{% block title %}Welcome to {% endblock %} | ungleich.ch</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Affordable VM hosting in Glarus, Switzerland, operated by 100% hydropower. Devuan, debian, freebsd, ubuntu, centos. Our tech stack is fully open source.">
+    <meta name="author" content="ungleich glarus ag">
+    <link href="/u/static/css/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="/u/static/css/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+    <link href="/u/static/css/clean-blog.css" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
+    <link rel="shortcut icon" href="/u/static/favicon.ico"/>
+    <script type="text/javascript" src="/u/static/js/jquery.js"></script>
+    <script type="text/javascript" src="/u/static/js/bootstrap.min.js"></script>
 
+    <!-- Google analytics -->
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -11,16 +25,57 @@
         ga('create', 'UA-62285904-1', 'auto');
         ga('send', 'pageview');
     </script>
-
     <!-- End Google Analytics -->
 
-
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="{{ '/u/static/style.css'|url }}">
-    <title>{% block title %}Welcome to {% endblock %} | ungleich.ch</title>
 </head>
 
 <body>
+<!-- Navigation -->
+<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header page-scroll">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+    	<span class="sr-only">Toggle navigation</span>
+      	<span class="icon-bar"></span>
+      	<span class="icon-bar"></span>
+      	<span class="icon-bar"></span>
+      </button>
+        <a href="https://ungleich.ch/u/blog/" id="logoBlack" class="navbar-brand custom-black-logo"><img src="/u/static/images/logo_black.svg"></a>
+        <a href="https://ungleich.ch/u/blog/" id="logoWhite" class="navbar-brand"><img src="/u/static/images/logo_white.svg"></a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav navbar-right">
+        <li>
+          <a href="https://ungleich.ch/u/blog/">ungleich Blog</a>
+        </li>
+        
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- Navigation END -->
+<header class="intro-header" style="background-image: url('/u/static/images/home-bg.jpg');">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+		<div class="site-heading">
+		  <h1>ungleich blog</h1>
+		  <hr class="small">
+		  <span class="subheading"></span>
+		</div>
+      </div>
+    </div>
+  </div>
+</header>
+
+
+
+
+
+
   <header>
     <h1>{{ self.title() }}</h1>
     <nav>
diff --git a/templates/macros/blog.html b/templates/macros/blog.html
index 34bb6b7..d84c0f1 100644
--- a/templates/macros/blog.html
+++ b/templates/macros/blog.html
@@ -1,24 +1,30 @@
 {% macro render_blog_post(post, from_index=false) %}
-  <div class="blog-post">
-  {% if from_index %}
-    <h2><a href="{{ post|url }}">{{ post.title }}</a></h2>
+
+          <div class="post-preview">
+            <div class="row">
+              <div class="col-md-4">
+                  {% if from_index %}<h2><a href="{{ post|url }}"><img style="margin-top:11%" src="{{post.thumbnail}}"/></a></h2>{% else %}<h2><img style="margin-top:11%" src="{{post.thumbnail}}"/></h2>{% endif %}
+              </div>    
+              <div class="col-md-8">
+  {% if from_index %}<a href="{{ post|url }}"><h2 class="post-title">{{ post.title }}</h2></a>
   {% else %}
-    <h2>{{ post.title }}</h2>
+    <h2 class="post-title">{{ post.title }}</h2>
   {% endif %}
-  <p class="meta">
-    written by
-    {% if post.twitter_handle %}
-      <a href="https://twitter.com/{{ post.twitter_handle
-        }}">{{ post.author or post.twitter_handle }}</a>
-    {% else %}
-      {{ post.author }}
-    {% endif %}
-    on {{ post.pub_date }}
-  </p>
-  {% if from_index %}
-  {{ post.abstract }}
-  {% else %}
-  {{ post.body }}
-  {% endif %}
-  </div>
+                
+                <p class="post-meta" style="font-size:0.9em;">
+               Posted on {{ post.pub_date }} by {% if post.twitter_handle %}<a href="https://twitter.com/{{ post.twitter_handle }}">{{ post.author or post.twitter_handle }}</a>{% else %}{{ post.author }} {% endif %}
+                </p>
+                <p class="post-subtitle">
+                  <p>
+                    {% if from_index %}
+                    {{ post.abstract }}
+                    {% else %}
+                    {{ post.body }}
+                    {% endif %}
+                  </p>
+                </p>
+              </div>
+            </div>
+          </div>
+          <hr>
 {% endmacro %}
