diff --git a/radar/2016-02-02/languages-and-frameworks/react123.md b/radar/2016-02-02/languages-and-frameworks/react123.md
index 1a2b1d4..8df9211 100644
--- a/radar/2016-02-02/languages-and-frameworks/react123.md
+++ b/radar/2016-02-02/languages-and-frameworks/react123.md
@@ -1,6 +1,6 @@
 ---
-title:      "React 123"
-ring:       trial
+title:      "This is a long title that may break design"
+ring:       assess
 ---
 
 React blablab *React* - super "cool"
diff --git a/radar/2016-02-02/languages-and-frameworks/vue123.md b/radar/2016-02-02/languages-and-frameworks/vue123.md
index 3bcff00..f44bb16 100644
--- a/radar/2016-02-02/languages-and-frameworks/vue123.md
+++ b/radar/2016-02-02/languages-and-frameworks/vue123.md
@@ -1,6 +1,6 @@
 ---
 title:      "Vue 123"
-ring:       adopt
+ring:       assess
 ---
 
 Hier steht eine Einleitung über *React* - super "cool"
diff --git a/radar/2016-02-02/languages-and-frameworks/vue1230.md b/radar/2016-02-02/languages-and-frameworks/vue1230.md
new file mode 100644
index 0000000..f8b02cf
--- /dev/null
+++ b/radar/2016-02-02/languages-and-frameworks/vue1230.md
@@ -0,0 +1,15 @@
+---
+title:      "Something else"
+ring:       hold
+---
+
+Hier steht eine Einleitung über *React* - super "cool"
+
+Hier noch ein [link](http://www.google.de) zu google
+
+<!--except-->
+
+Hier steht der Rest!
+
+History
+-------
diff --git a/static-pages/index.pug b/static-pages/index.pug
index 9dfbaaa..83c5db2 100644
--- a/static-pages/index.pug
+++ b/static-pages/index.pug
@@ -9,21 +9,24 @@ block content
     span.hero-headline__alt
       = ' '
       | March 2017
-  div
+  div.quadrant-grid
     //-
       pre
         = JSON.stringify(radar, 0, 2)
+
     each quadrant, quadrantName in radar
-      .quadrant-section
-        .quadrant-section__header
-          h4= translate(quadrantName)
-        .quadrant-section__lists
-          each items, ringName in quadrant
-            .quadrant-section__list
-              .ring-list
-                .ring-list__header
-                  span(class=`badge badge--${ringName}`)
-                    = ringName
-                each item in items
-                  a.ring-list__item(href='/' + quadrantName + '/' + item.name + '.html')
-                    = item.attributes.title
+      .quadrant-grid__quadrant
+        .quadrant-section
+          .quadrant-section__header
+            h4.headline= translate(quadrantName)
+          .quadrant-section__rings
+            each items, ringName in quadrant
+              .quadrant-section__ring
+                .ring-list
+                  .ring-list__header
+                    span(class=`badge badge--${ringName}`)
+                      = ringName
+                  each item in items
+                    span.ring-list__item
+                      a.link(href='/' + quadrantName + '/' + item.name + '.html')
+                        = item.attributes.title
diff --git a/styles/base.css b/styles/base.css
index a9516fa..08f9374 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -1,5 +1,6 @@
 :root {
   --color-gray-dark: #475157;
+  --color-gray-normal: #979797;
   --color-gray-light: #7D878D;
   --color-white: #fff;
   --color-green: #5CB449;
@@ -27,7 +28,8 @@ body {
   padding: 0;
   font-family: 'DIN';
   font-weight: normal;
-  font-size: 16px;
+  font-size: 14px;
+  line-height: 1.5;
 
   & h1 {
     color: blue;
diff --git a/styles/components/header.css b/styles/components/branding.css
similarity index 54%
rename from styles/components/header.css
rename to styles/components/branding.css
index 0c8d497..7628db8 100644
--- a/styles/components/header.css
+++ b/styles/components/branding.css
@@ -1,10 +1,11 @@
-.header {
-  margin: 40px 0 60px;
+.branding {
+  margin: 40px 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   &__logo {
-    flex: 1 0 auto;
+    flex: 0 0 200px;
     & img {
       display: block;
       width: 150px;
@@ -12,8 +13,7 @@
     }
   }
 
-  &__nav {
-    flex: 0 0 auto;
-    height: 20px;
+  &__content {
+    flex: 0 1 auto;
   }
 }
diff --git a/styles/components/footnote.css b/styles/components/footnote.css
new file mode 100644
index 0000000..434163b
--- /dev/null
+++ b/styles/components/footnote.css
@@ -0,0 +1,4 @@
+.footnote {
+  font-size: 12px;
+  color: var(--color-gray-normal);
+}
diff --git a/styles/components/headline.css b/styles/components/headline.css
new file mode 100644
index 0000000..3e95175
--- /dev/null
+++ b/styles/components/headline.css
@@ -0,0 +1,5 @@
+.headline {
+  color: var(--color-white);
+  font-size: 20px;
+  font-weight: normal;
+}
diff --git a/styles/components/hero-headline.css b/styles/components/hero-headline.css
index 26b65f4..44c2a42 100644
--- a/styles/components/hero-headline.css
+++ b/styles/components/hero-headline.css
@@ -1,7 +1,8 @@
 .hero-headline {
-  font-size: 30px;
+  font-size: 40px;
   font-weight: 300;
   color: var(--color-white);
+  margin-bottom: 70px;
 
   &__alt {
     color: var(--color-gray-light);
diff --git a/styles/components/link.css b/styles/components/link.css
new file mode 100644
index 0000000..c27b4b6
--- /dev/null
+++ b/styles/components/link.css
@@ -0,0 +1,8 @@
+.link {
+  color: var(--color-white);
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/styles/components/page.css b/styles/components/page.css
index d767a6f..188d92d 100644
--- a/styles/components/page.css
+++ b/styles/components/page.css
@@ -1,5 +1,22 @@
 .page {
   width: 1200px;
+  min-height: 100%;
   margin: 0 auto;
   padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    flex: 0 0 auto;
+    margin-bottom: 20px;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+  }
+
+  &__footer {
+    border-top: 1px solid var(--color-gray-normal);
+    flex: 0 0 auto;
+  }
 }
diff --git a/styles/components/quadrant-grid.css b/styles/components/quadrant-grid.css
new file mode 100644
index 0000000..6a0e00c
--- /dev/null
+++ b/styles/components/quadrant-grid.css
@@ -0,0 +1,9 @@
+.quadrant-grid {
+  display: flex;
+  flex-wrap: wrap;
+
+  &__quadrant {
+    flex: 0 0 50%;
+    margin-bottom: 40px;
+  }
+}
diff --git a/styles/components/quadrant-section.css b/styles/components/quadrant-section.css
index 4a7a5b4..845731a 100644
--- a/styles/components/quadrant-section.css
+++ b/styles/components/quadrant-section.css
@@ -1,13 +1,14 @@
 .quadrant-section {
   &__header {
-
+    margin-bottom: 20px;
   }
 
-  &__lists {
+  &__rings {
     display: flex;
   }
-  
-  &__list {
-    flex: 0 0 20%;
+
+  &__ring {
+    padding: 0 8px;
+    flex: 0 0 25%;
   }
 }
diff --git a/styles/components/ring-list.css b/styles/components/ring-list.css
index 1f76cb5..9c07461 100644
--- a/styles/components/ring-list.css
+++ b/styles/components/ring-list.css
@@ -1,10 +1,10 @@
 .ring-list {
   &__header {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
   }
   &__item {
+    font-size: 13px;
     display: block;
-    color: var(--color-white);
     margin-bottom: 10px;
   }
 }
diff --git a/templates/layout.pug b/templates/layout.pug
index 3f9b496..0c5547f 100644
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -5,12 +5,23 @@ html
     link(rel='stylesheet', href='/styles.css')
   body
     .page
-      .header
-        a.header__logo(href='/')
-          img(src='/assets/logo.svg')
-        .header__nav
-          | How to Use Technology Radar?
-
-      block content
-      block scripts
-        script(src='/bundle.js')
+      .page__header
+        .branding
+          a.branding__logo(href='/')
+            img(src='/assets/logo.svg')
+          .branding__content
+            | How to Use Technology Radar?
+      .page__content
+        block content
+        block scripts
+          script(src='/bundle.js')
+      .page__footer
+        .branding
+          span.branding__logo
+            img(src='/assets/logo.svg')
+          .branding__content
+            span.footnote
+              | AOE is a leading provider of Enterprise Open Source web solutions.
+              | Using current agile development methods, more than 250+ developers
+              | and consultants in 8 global locations develop customized Open Source
+              | solutions for global companies and corporations.