diff --git a/components/article-preview.vue b/components/article-preview.vue
index 12f6811..1e4df1f 100644
--- a/components/article-preview.vue
+++ b/components/article-preview.vue
@@ -5,8 +5,8 @@
       :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=196&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=562&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=1125&fit=fill 2000w`"
       sizes="(min-width: 1024px) 400px, 100vw"
     >
-    <time>{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
-    <h4><nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}">{{ post.fields.title }}</nuxt-link></h4>
+    <time class="tiny date">{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
+    <h4><nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}" class="title">{{ post.fields.title }}</nuxt-link></h4>
     <p>{{ post.fields.description }}</p>
 
     <div class="tags">
@@ -24,3 +24,44 @@ export default {
   components: {}
 }
 </script>
+
+<style>
+
+.thumbnail {
+  margin-bottom: 1em;
+}
+
+.date {
+}
+
+.title {
+  text-decoration: none;
+  font-size: 22px;
+  color: #373F49;
+}
+
+.tags {
+  padding : 1em 0;
+  margin-bottom: 2em;
+}
+
+.tag:link,
+.tag:visited {
+  color: #A0A0A0;
+  text-decoration: none;
+  display: inline-block;
+  padding: .33333rem .5rem;
+  line-height: 1;
+  border-radius: 2px;
+  border: 1px solid #A0A0A0;
+  margin-right: .5em;
+}
+
+.tag:active,
+.tag:hover,
+.tag:focus {
+  color: #606060;
+  border-color: #606060;
+}
+
+</style>
diff --git a/components/greeting.vue b/components/greeting.vue
new file mode 100644
index 0000000..5239fe1
--- /dev/null
+++ b/components/greeting.vue
@@ -0,0 +1,69 @@
+<template>
+
+  <!-- Greeting section -->
+  <section class="greeting">
+    <div class="message wrapper">
+      <p>
+        There you go! You just set up a Contentful account and a custom app. Now go ahead and <a href="https://app.contentful.com/" target="_blank">try the Web App</a> or head over to the <a href="http://contentful.com/developers/docs" target="_blank">Documentation</a> to learn more about building with Contentful. If you want to remove this message, delete line <code>3</code> in <code>layouts/default.vue</code>.
+      </p>
+      <a href="https://app.contentful.com/" target="_blank" class="cta">Try the Web App</a>
+    </div>
+  </section>
+
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+
+  .greeting {
+    background: #fff;
+    border: 1px solid #489CF1;
+    margin: 2em 0;
+  }
+
+  .message {
+    overflow: hidden;
+    padding: 3em 0;
+  }
+
+  .message p {
+    margin-bottom: 2em;
+  }
+
+  code {
+    border-radius: 3px;
+    background: #E1E7EA;
+    padding: 3px 5px;
+  }
+
+  @media all and (min-width: 900px) {
+    .message p {
+      float: left;
+      max-width: 70%;
+      margin-bottom: 0;
+    }
+  }
+
+
+  .message .cta {
+    font-size: inherit;
+    background: #489CF1;
+    border: 0;
+    border-radius: 3px;
+    color: #fff;
+    padding: 1em 2em;
+    text-decoration: none;
+  }
+
+  @media all and (min-width: 900px) {
+    .message .cta {
+      float: right;
+      max-width: 20%;
+    }
+  }
+
+</style>
diff --git a/components/navigation.vue b/components/navigation.vue
index bc5d229..241bfd7 100644
--- a/components/navigation.vue
+++ b/components/navigation.vue
@@ -1,13 +1,10 @@
 <template>
-  <nav role="navigation" class="top-bar">
-    <div class="top-bar-left">
-      <ul class="menu">
-        <li class="menu-text">Contentful Blog in 5 min</li>
-        <li v-if="!/\/.*?\/.*/.test(route.path)" v-for="route in this.$router.options.routes">
-          <nuxt-link :to=" { name: route.name }">{{ route.name.charAt(0).toUpperCase() + route.name.slice(1) }}</nuxt-link>
-        </li>
-      </ul>
-    </div>
+  <nav role="navigation" class="top-nav">
+    <ul class="menu">
+      <li v-if="!/\/.*?\/.*/.test(route.path)" v-for="route in this.$router.options.routes">
+        <nuxt-link :to=" { name: route.name }">{{ route.name.charAt(0).toUpperCase() + route.name.slice(1) }}</nuxt-link>
+      </li>
+    </ul>
   </nav>
 </template>
 
@@ -16,3 +13,37 @@ export default {
   components: {}
 }
 </script>
+
+<style>
+
+  .person-name:link,
+  .person-name:visited {
+    width: 50%;
+    display: inline-block;
+    font-size: 2em;
+    text-decoration: none;
+    color: #373F49;
+  }
+
+  .top-nav {
+    width: 50%;
+    display: inline-block;
+    text-align: right;
+  }
+
+  .menu {
+    display: inline-block;
+  }
+
+  .menu li {
+    display: inline-block;
+    margin-left: 1em;
+  }
+
+  .menu a:link,
+  .menu a:visited {
+    color: #373F49;
+    text-decoration: none;
+  }
+
+</style>
diff --git a/docs/images/home.png b/docs/images/home.png
index 96595b4..2f16c81 100644
Binary files a/docs/images/home.png and b/docs/images/home.png differ
diff --git a/layouts/default.vue b/layouts/default.vue
index 75901f0..9121fcd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,11 +1,111 @@
 <template>
   <div class="container">
+    <Greeting></Greeting>
     <main role="main">
       <nuxt/>
     </main>
   </div>
 </template>
 
+<script>
+  import Greeting from '~components/greeting.vue'
+
+  export default {
+    components: {
+      Greeting
+    }
+  }
+</script>
+
 <style>
+  @font-face {
+    font-family: "Avenir";
+    font-weight: 400;
+    font-style: normal;
+    src: url("/avenir-400.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  body {
+    background: #E1E7EA;
+    max-width: 1280px;
+    margin: 0 auto;
+    font-family: "Avenir", Tahoma, Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.65;
+    color: #373F49;
+  }
+
+  .wrapper {
+    padding: 2em 0;
+    max-width: 80%;
+    margin: 0 auto;
+  }
+
+  .header {
+    background: #F7F9FA;
+  }
+
+  .page-bar {
+    max-width: 100%;
+    padding: 2em 10%;
+  }
+
+  .blog.header h2,
+  .tag-page.header h2 {
+    text-align: center;
+    padding: 2.5em 0;
+    color: #A0A0A0;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-size: 2em;
+  }
+
+  /* Copy section */
+  .body-container {
+    background: #ffffff;
+  }
+
+  .items-list {
+    overflow: hidden;
+  }
+
+  .item {
+    padding: 1em 3em 1em 0;
+  }
+
+  @media all and (min-width: 600px) {
+    .item {
+      float: left;
+      width: 50%;
+    }
+  }
+
+  @media all and (min-width: 900px) {
+    .item {
+      width: 33.333%;
+    }
+  }
+
+  /* Shared */
+
+  .tiny {
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 1px;
+    color: #A0A0A0;
+  }
+
+  *[class*="-bar"] {
+    border-bottom: 1px solid #EBEBEB;
+  }
 
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 36060c2..5f19dfe 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -7,15 +7,15 @@ const config = {
   ** Headers of the page
   */
   head: {
-    title: 'starter',
+    title: 'Custom app with Contentful',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Create a Contentful blog in 5 minutes' }
+      { hid: 'description', name: 'description', content: 'Custom app in under 5 minutes' }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
+      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css' }
     ]
   },
   /*
@@ -38,7 +38,13 @@ const config = {
           exclude: /(node_modules)/
         })
       }
-    }
+    },
+
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['> 5%']
+      })
+    ]
   },
 
   /*
diff --git a/package.json b/package.json
index a75c14b..4941ae6 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "babel-eslint": "^7.1.1",
     "contentful-import": "^4.4.3",
+    "cz-conventional-changelog": "^2.0.0",
     "eslint": "^3.15.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-loader": "^1.6.1",
@@ -32,5 +33,10 @@
     "gh-pages": "^1.0.0",
     "git-clone": "^0.1.0",
     "now": "^5.3.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
index 042a2aa..fec9592 100644
--- a/pages/blog/_slug.vue
+++ b/pages/blog/_slug.vue
@@ -1,24 +1,35 @@
 <template>
   <div>
-    <Navigation></Navigation>
-    <div class="callout large">
-      <div class="row column text-center">
-        <time>{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
-        <h1>{{ post.fields.title }}</h1>
+    <!-- Article header -->
+    <header class="article header">
+      <div class="foreground">
+        <div class="page-bar wrapper">
+          <a href="/" class="person-name">John Doe</a>
+          <Navigation></Navigation>
+        </div>
       </div>
-    </div>
-    <img class="hero"
-      :src="post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'"
-      :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=87&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=250&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=500&fit=fill 2000w`"
-      size="100vw"
-      :alt="post.fields.heroImage.fields.description"
-    >
-
-    <main class="row column">
       <div>
-        <vue-markdown>{{post.fields.body}}</vue-markdown>
+        <img
+          :src="post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'"
+          :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=87&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=250&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=500&fit=fill 2000w`"
+          size="100vw"
+          :alt="post.fields.heroImage.fields.description"
+        >
       </div>
-    </main>
+    </header>
+
+    <section class="body-container">
+      <main class="wrapper">
+        <div class="headline">
+          <time class="tiny">{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
+          <h1>{{ post.fields.title }}</h1>
+        </div>
+        <div class="copy">
+          <vue-markdown>{{post.fields.body}}</vue-markdown>
+        </div>
+      </main>
+    </section>
+
   </div>
 </template>
 
@@ -47,7 +58,26 @@ export default {
 </script>
 
 <style>
-.hero {
-  margin: -1em 0 3em;
+
+.foreground .page-bar {
+  border-bottom: 0;
+}
+
+.headline {
+  padding: 3em 0 0;
+}
+
+.headline h1 {
+  font-size: 3.5em;
+}
+
+.copy {
+  padding-top: 3em;
+  padding-bottom: 7em;
 }
+
+.copy * {
+  margin: 2em 0 1em;
+}
+
 </style>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 88fac17..de50d91 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,35 +1,36 @@
 <template>
   <div>
-    <Navigation></Navigation>
-    <div class="callout large">
-      <div class="row column text-center">
-        <h1>Blog</h1>
+    <!-- Blog header -->
+    <header class="blog header">
+      <div class="foreground">
+        <div class="page-bar wrapper">
+          <a href="/" class="person-name">John Doe</a>
+          <Navigation></Navigation>
+        </div>
+        <div class="page-info wrapper">
+          <h2>Blog</h2>
+        </div>
       </div>
-    </div>
+    </header>
 
-    <div class="row">
-      <div class="small-12 columns" v-for="post in posts">
-        <div class="post">
-          <img class="thumbnail"
-            :src="post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'"
-            :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=131&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=375&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=1000&fit=fill 2000w`"
-            size="(min-width: 1024px) 1200px, 100vw"
-            :alt="post.fields.heroImage.fields.description"
-          >
-          <time>{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
-          <h4><nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}">{{ post.fields.title }}</nuxt-link></h4>
-          <p>{{ post.fields.description }}</p>
-
-          <nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}" :aria-label="post.fields.title">Read more</nuxt-link>
-        </div>
+    <section class="body-container">
+      <div class="items-bar wrapper">
+        <h2>All articles ({{ posts.length }})</h2>
       </div>
-    </div>
+      <ul class="items-list wrapper">
+        <li class="item" v-for="post in posts">
+          <article-preview :post="post"></article-preview>
+        </li>
+      </ul>
+    </section>
+
   </div>
 </template>
 
 <script>
 import {cdaClient} from '../../plugins/contentful-client.js'
 import Navigation from '~components/navigation.vue'
+import ArticlePreview from '~components/article-preview.vue'
 
 export default {
   asyncData ({ params }) {
@@ -43,13 +44,12 @@ export default {
     })
   },
   components: {
+    ArticlePreview,
     Navigation
   }
 }
 </script>
 
 <style>
-.post {
-  padding: 2em 0;
-}
+
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 0c4940c..6529a12 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,52 +1,50 @@
 <template>
   <div>
-    <Navigation></Navigation>
-    <div class="callout large">
-      <div class="row column text-center">
-        <h1>{{ person.fields.name }}</h1>
-        <h2>{{ person.fields.title }}</h2>
+    <!-- Homepage header -->
+    <header class="home header">
+      <div class="picture">
+        <img :src="person.fields.image.fields.file.url + '?w=1200'">
       </div>
-    </div>
-
-    <div class="row">
-      <div class="medium-6 columns medium-push-6">
-        <img class="thumbnail" :src="person.fields.image.fields.file.url + '?w=1200'">
-      </div>
-      <div class="medium-6 columns medium-pull-6">
-        <h2>"{{ person.fields.slogan }}"</h2>
-        <p>{{ person.fields.shortBio }}</p>
-
-        <ul class="social-icons">
-          <li v-if='person.fields.facebook'>
-            <a :href="person.fields.facebook" :aria-label="`${ person.fields.name } on Facebook`">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"/></svg>
-            </a>
-          </li>
-          <li v-if='person.fields.twitter'>
-            <a :href="person.fields.twitter" :aria-label="`${ person.fields.name } on Twitter`">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M72.955 17.969l-22.41 22.41c5.637 11.592 3.65 25.958-5.978 35.585-9.45 9.451-23.469 11.543-34.946 6.285 17.658 17.15 45.87 17.003 63.333-.461 17.625-17.623 17.625-46.196.001-63.819z"></path><path d="M58.281 47.966c-12.855 3.768-26.293-3.047-31.006-15.339-7.596 6.311-11.149 16.751-8.194 26.831 3.966 13.531 18.151 21.284 31.682 17.317 13.53-3.967 21.284-18.15 17.317-31.682a25.574 25.574 0 0 0-.675-1.979 25.458 25.458 0 0 1-9.124 4.852z"></path><circle cx="59.292" cy="32.235" r="19.743"></circle><path d="M63.206 17.134L85.582 6.98 69.975 26.159"></path><path d="M67.625 21.553L90 11.399l-15.606 19.18"></path></svg>
-            </a>
-          </li>
-          <li v-if='person.fields.github'>
-            <a :href="person.fields.github" :aria-label="`${ person.fields.name } on Github`">
-              <svg x="0px" y="0px" viewBox="0 0 438.549 438.549"><g><path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"></path></g></svg>
-            </a>
-          </li>
-        </ul>
+      <div class="foreground">
+        <div class="page-bar wrapper">
+          <a href="/" class="person-name">{{ person.fields.name }}</a>
+          <Navigation></Navigation>
+        </div>
+        <div class="page-info wrapper">
+          <h2>{{ person.fields.title }}</h2>
+          <p>{{ person.fields.shortBio }}</p>
+          <ul class="social-icons">
+            <li v-if='person.fields.facebook'>
+              <a :href="person.fields.facebook" :aria-label="`${ person.fields.name } on Facebook`">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"/></svg>
+              </a>
+            </li>
+            <li v-if='person.fields.twitter'>
+              <a :href="person.fields.twitter" :aria-label="`${ person.fields.name } on Twitter`">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M72.955 17.969l-22.41 22.41c5.637 11.592 3.65 25.958-5.978 35.585-9.45 9.451-23.469 11.543-34.946 6.285 17.658 17.15 45.87 17.003 63.333-.461 17.625-17.623 17.625-46.196.001-63.819z"></path><path d="M58.281 47.966c-12.855 3.768-26.293-3.047-31.006-15.339-7.596 6.311-11.149 16.751-8.194 26.831 3.966 13.531 18.151 21.284 31.682 17.317 13.53-3.967 21.284-18.15 17.317-31.682a25.574 25.574 0 0 0-.675-1.979 25.458 25.458 0 0 1-9.124 4.852z"></path><circle cx="59.292" cy="32.235" r="19.743"></circle><path d="M63.206 17.134L85.582 6.98 69.975 26.159"></path><path d="M67.625 21.553L90 11.399l-15.606 19.18"></path></svg>
+              </a>
+            </li>
+            <li v-if='person.fields.github'>
+              <a :href="person.fields.github" :aria-label="`${ person.fields.name } on Github`">
+                <svg x="0px" y="0px" viewBox="0 0 438.549 438.549"><g><path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"></path></g></svg>
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-
-    <hr>
+    </header>
 
-    <div class="row column">
-      <h3>Recent Articles</h3>
-    </div>
-
-    <div class="row">
-      <div class="small-12 large-4 columns" v-for="post in posts">
-        <article-preview :post="post"></article-preview>
+    <section class="body-container">
+      <div class="items-bar wrapper">
+        <h2>Recent articles</h2>
       </div>
-    </div>
+      <ul class="items-list wrapper">
+        <li class="item" v-for="post in posts">
+          <article-preview :post="post"></article-preview>
+        </li>
+      </ul>
+    </section>
+
   </div>
 </template>
 
@@ -80,6 +78,72 @@ export default {
 </script>
 
 <style>
+
+.home.header {
+  overflow: hidden;
+  position: relative;
+  height: 70vw;
+  min-height: 400px;
+  max-height: 610px;
+  background: #000;
+  color: #fff;
+}
+
+.home .person-name:link,
+.home .person-name:visited {
+  color: #fff;
+}
+
+.home .menu a:link,
+.home .menu a:visited {
+  color: #fff;
+}
+
+.home .page-bar {
+  border-bottom: 1px solid #4e4b5f;
+}
+
+.home .page-info {
+  padding-top: 12%;
+}
+
+.home .page-info h2 {
+  font-size: 1.5em;
+}
+
+.picture {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0%;
+  right: 0;
+  width: 150%;
+}
+
+@media all and (min-width: 600px) {
+  .picture {
+    left: 20%;
+    width: 100%;
+  }
+}
+
+.foreground {
+  overflow: hidden;
+  position: relative;
+  z-index: 3;
+}
+
+.foreground p {
+  margin-bottom: 1em;
+}
+
+@media all and (min-width: 600px) {
+  .foreground p {
+    max-width: 250px;
+  }
+}
+
 .social-icons {
   margin: 0;
   padding: 0;
@@ -97,34 +161,13 @@ export default {
 .social-icons svg {
   display: block;
   max-width: 100%;
-  fill: #000;
-
-  width: 2em;
-  height: 2em;
+  fill: #fff;
+  width: 1.5em;
+  height: 1.5em;
 }
 
 .social-icons svg:hover {
   fill: #2199e8;
 }
 
-.tags {
-  padding : 1em 0;
-  margin-bottom: 2em;
-}
-
-.tag {
-  display: inline-block;
-  padding: .33333rem .5rem;
-  line-height: 1;
-  border-radius: 0;
-  background: #2199e8;
-  color: #fefefe;
-  margin-right: .5em;
-}
-
-.tag:hover {
-  color: #fff;
-  background: #51b9f8;
-}
-
 </style>
diff --git a/pages/tags/_tag.vue b/pages/tags/_tag.vue
index 5b79489..a087513 100644
--- a/pages/tags/_tag.vue
+++ b/pages/tags/_tag.vue
@@ -1,35 +1,35 @@
 <template>
   <div>
-    <Navigation></Navigation>
-    <div class="callout large">
-      <div class="row column text-center">
-        <h1>#{{ tag }}</h1>
+    <!-- Tag page header -->
+    <header class="tag-page header">
+      <div class="foreground">
+        <div class="page-bar wrapper">
+          <a href="/" class="person-name">John Doe</a>
+          <Navigation></Navigation>
+        </div>
+        <div class="page-info wrapper">
+          <h2>#{{ tag }}</h2>
+        </div>
       </div>
-    </div>
-
-    <div class="row">
-      <div class="small-12 columns" v-for="post in posts">
-        <div class="post">
-          <img class="thumbnail"
-            :src="post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'"
-            :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=131&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=375&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=1000&fit=fill 2000w`"
-            size="(min-width: 1024px) 1200px, 100vw"
-            :alt="post.fields.heroImage.fields.description"
-          >
-          <time>{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
-          <h4><nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}">{{ post.fields.title }}</nuxt-link></h4>
-          <p>{{ post.fields.description }}</p>
+    </header>
 
-          <nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}" :aria-label="post.fields.title">Read more</nuxt-link>
-        </div>
+    <section class="body-container">
+      <div class="items-bar wrapper">
+        <h2>All articles tagged #{{ tag }} ({{ posts.length }})</h2>
       </div>
-    </div>
+      <ul class="items-list wrapper">
+        <li class="item" v-for="post in posts">
+          <article-preview :post="post"></article-preview>
+        </li>
+      </ul>
+    </section>
   </div>
 </template>
 
 <script>
 import {cdaClient} from '../../plugins/contentful-client.js'
 import Navigation from '~components/navigation.vue'
+import ArticlePreview from '~components/article-preview.vue'
 
 export default {
   asyncData ({ params }) {
@@ -45,13 +45,11 @@ export default {
     })
   },
   components: {
+    ArticlePreview,
     Navigation
   }
 }
 </script>
 
 <style>
-.post {
-  padding: 2em 0;
-}
 </style>
diff --git a/static/avenir-400.woff b/static/avenir-400.woff
new file mode 100644
index 0000000..ee6bd30
Binary files /dev/null and b/static/avenir-400.woff differ
diff --git a/static/avenir-400.woff2 b/static/avenir-400.woff2
new file mode 100644
index 0000000..3273d7d
Binary files /dev/null and b/static/avenir-400.woff2 differ
diff --git a/static/favicon.ico b/static/favicon.ico
deleted file mode 100644
index 382fecb..0000000
Binary files a/static/favicon.ico and /dev/null differ
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..836f3de
Binary files /dev/null and b/static/favicon.png differ