diff --git a/app/index.html b/app/index.html
index a233fe5..959dca9 100644
--- a/app/index.html
+++ b/app/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {{content-for 'head'}}
-
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="assets/vendor.css">
     <link rel="stylesheet" href="assets/sommer-ember.css">
 
diff --git a/app/routes/bio.js b/app/routes/bio.js
new file mode 100644
index 0000000..faa0cc3
--- /dev/null
+++ b/app/routes/bio.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+	model: function() {
+	    return this.store.find('page',26);
+	}
+});
diff --git a/app/styles/app.css b/app/styles/app.css
index 4c37746..3a0f34e 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,5 +1,6 @@
 body {
     color: #777;
+    font-family: 'Open Sans', sans-serif;
 }
 
 .pure-img-responsive {
@@ -47,11 +48,11 @@ The content `<div>` is where all your content goes.
 }
 
 .header {
-     margin: 0;
+     margin: 0 auto;
      color: #333;
-     text-align: center;
+     max-width: 800px;
+     text-align: left;
      padding: 2.5em 2em 0;
-     border-bottom: 1px solid #eee;
  }
     .header h1 {
         margin: 0.2em 0;
@@ -86,7 +87,7 @@ appears on the left side of the page.
     left: 0;
     bottom: 0;
     z-index: 1000; /* so the menu or its navicon stays above all content */
-    background: #ffffff;
+    background: #191818;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }
@@ -94,8 +95,7 @@ appears on the left side of the page.
     All anchors inside the menu should be styled like this.
     */
     #menu a {
-	 	color: white;
-     	border-radius: 0px;
+        color: #fff;
         border: none;
         padding: 0.6em 0 0.6em 0.6em;
     }
@@ -112,7 +112,7 @@ appears on the left side of the page.
     /*
     Add that light border to separate items into groups.
     */
-
+    #menu .pure-menu ul,
     #menu .pure-menu .menu-item-divided {
         border-top: 1px solid #333;
     }
@@ -128,8 +128,8 @@ appears on the left side of the page.
     This styles the selected menu item `<li>`.
     */
     #menu .pure-menu-selected,
- {
-        background: #1f8dd6;
+    #menu .pure-menu-heading {
+        background: #000;
     }
         /*
         This styles a link within a selected menu item `<li>`.
@@ -247,6 +247,8 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     }
 }
 
+
+
 /*custom css*/
 
 
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 39ae65a..9c113ce 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -7,12 +7,12 @@
 
     <div id="menu">
         <div class="pure-menu">
-            <a class="pure-menu-heading" href="#">Sommer</a>
+            <a class="pure-menu-heading" href="#">&nbsp;</a>
 
             <ul class="pure-menu-list">
                 <li class="pure-menu-item">{{#link-to 'pages' class="button-news pure-menu-link"}}News{{/link-to}}</li>
-                <li class="pure-menu-item">{{#link-to 'pages' class="button-works pure-menu-link"}}Works{{/link-to}}</li>
-                <li class="pure-menu-item">{{#link-to 'pages' class="button-bio pure-menu-link"}}Bio{{/link-to}}</li>
+                <li class="pure-menu-item">{{#link-to 'works' class="button-works pure-menu-link"}}Works{{/link-to}}</li>
+                <li class="pure-menu-item">{{#link-to 'bio' class="button-bio pure-menu-link"}}Bio{{/link-to}}</li>
                 <li class="pure-menu-item">{{#link-to 'pages' class="button-rss pure-menu-link"}}Rss{{/link-to}}</li>
             </ul>
         </div>
diff --git a/app/templates/bio.hbs b/app/templates/bio.hbs
new file mode 100644
index 0000000..5395d08
--- /dev/null
+++ b/app/templates/bio.hbs
@@ -0,0 +1,2 @@
+<div class="header"><h1>{{{model.title}}}</h1></div>
+<div class="content">{{{model.content}}}</div>
diff --git a/app/templates/pages.hbs b/app/templates/pages.hbs
deleted file mode 100644
index 8d4050c..0000000
--- a/app/templates/pages.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-<div class="header">{{{model.title}}}</div>
-<div class="content">{{{model.content}}}</div>
diff --git a/app/templates/works.hbs b/app/templates/works.hbs
index 8d4050c..5395d08 100644
--- a/app/templates/works.hbs
+++ b/app/templates/works.hbs
@@ -1,2 +1,2 @@
-<div class="header">{{{model.title}}}</div>
+<div class="header"><h1>{{{model.title}}}</h1></div>
 <div class="content">{{{model.content}}}</div>
diff --git a/tests/unit/routes/bio-test.js b/tests/unit/routes/bio-test.js
new file mode 100644
index 0000000..a37a9d6
--- /dev/null
+++ b/tests/unit/routes/bio-test.js
@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:bio', 'Unit | Route | bio', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  var route = this.subject();
+  assert.ok(route);
+});