diff --git a/site/client/app/app.js b/site/client/app/app.js
index ee3091e..c69395b 100644
--- a/site/client/app/app.js
+++ b/site/client/app/app.js
@@ -16,9 +16,10 @@ var app = new Vue({
 
   components: {
     lobby: require('./components/lobby'),
-    navigation: require('./components/navigation')
+    navigation: require('./components/navigation'),
+    chat: require('./components/chat')
   }
 
 });
 
-router.init(app);
\ No newline at end of file
+//router.init(app);
\ No newline at end of file
diff --git a/site/client/app/components/chat.js b/site/client/app/components/chat.js
new file mode 100644
index 0000000..a091206
--- /dev/null
+++ b/site/client/app/components/chat.js
@@ -0,0 +1,5 @@
+module.exports = {
+
+  template: require('../views/chat.html')
+
+};
\ No newline at end of file
diff --git a/site/client/app/components/navigation.js b/site/client/app/components/navigation.js
index 6e0a04a..70da0d3 100644
--- a/site/client/app/components/navigation.js
+++ b/site/client/app/components/navigation.js
@@ -1,5 +1,4 @@
-var Router = require('director').Router;
-var router = new Router();
+var router = require('./../routes');
 
 module.exports = {
 
@@ -7,7 +6,7 @@ module.exports = {
 
   methods: {
     changeView: function(view) {
-      router.setRoute('test');
+      router.changeRoute(view);
     }
   }
 
diff --git a/site/client/app/routes.js b/site/client/app/routes.js
index e6a065e..aaf7e98 100644
--- a/site/client/app/routes.js
+++ b/site/client/app/routes.js
@@ -1,24 +1,28 @@
-var Router = require('director').Router;
-var router = new Router();
-
-module.exports = {
-
-  init: function(app) {
-    router.on('/lobby', function() {
-      app.view = 'lobby';
-      app.section = 'inner';
-    });
-
-    router.on('/test', function() {
-    })
-
-    this.configure();
-    router.init();
+var routes = {
+  '/lobby': function() {
+    alert('lobby');
   },
 
-  configure: function() {
-    router.configure({
-      html5history: true
-    })
+  '/deck-builder': function() {
+    alert('deck-builder');
+  },
+
+  '/highscore': function() {
+    alert('highscore');
+  }
+};
+
+var options = {
+  html5history: true,
+  run_handler_in_init: false,
+  convert_hash_in_init: false
+}
+
+var Router = require('director').Router;
+var router = new Router(routes).configure(options).init();
+
+module.exports = {
+  changeRoute: function(route) {
+    router.setRoute(route);
   }
 }
\ No newline at end of file
diff --git a/site/client/app/views/chat.html b/site/client/app/views/chat.html
new file mode 100644
index 0000000..9c16323
--- /dev/null
+++ b/site/client/app/views/chat.html
@@ -0,0 +1,13 @@
+<section class="container-chat">
+  <nav>
+    <ul>
+      <li><a class="active">Lobby Chat</a></li>
+      <li><a>Current Match</a></li>
+    </ul>
+  </nav>
+
+  <div class="chat">
+
+  </div>
+
+</section>
\ No newline at end of file
diff --git a/site/client/app/views/lobby.html b/site/client/app/views/lobby.html
index f2d69b4..40dc786 100644
--- a/site/client/app/views/lobby.html
+++ b/site/client/app/views/lobby.html
@@ -1,11 +1,11 @@
-<section class="container-inner">
+<a href="./lobby"><img src="assets/img/logo-medium.png" width="160" height="50" alt="Gwent" class="logo-medium"></a>
 
-  <a href="./lobby"><img src="assets/img/logo-medium.png" width="160" height="50" alt="Gwent" class="logo-medium"></a>
+<main>
 
   <navigation></navigation>
 
-  <main>
+  <section class="container-content">
     blaa
-  </main>
+  </section>
 
-</section>
+</main>
\ No newline at end of file
diff --git a/site/client/app/views/navigation.html b/site/client/app/views/navigation.html
index 2e85955..5d60f33 100644
--- a/site/client/app/views/navigation.html
+++ b/site/client/app/views/navigation.html
@@ -1,7 +1,7 @@
 <nav>
   <ul>
     <li><a class="active" v-on="click: changeView('lobby')">Lobby</a></li>
-    <li><a href="#" v-on="click: changeView('builder')">Deck Builder</a></li>
-    <li><a href="#" v-on="click: changeView('highscore')">Highscore</a></li>
+    <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
+    <li><a v-on="click: changeView('highscore')">Highscore</a></li>
   </ul>
 </nav>
diff --git a/site/client/assets/sass/_chat.scss b/site/client/assets/sass/_chat.scss
new file mode 100644
index 0000000..ac34279
--- /dev/null
+++ b/site/client/assets/sass/_chat.scss
@@ -0,0 +1,22 @@
+.container-chat {
+  float: right;
+  width: 29%;
+
+  a {
+    font-size: 14px;
+    padding: 15px 15px;
+  }
+}
+
+.chat {
+  float: left;
+  width: 100%;
+  padding: 20px;
+  height: calc(100vh - 300px);
+  min-height: 400px;
+  clear: both;
+
+  color: #fff;
+
+  @include contentGradient();
+}
\ No newline at end of file
diff --git a/site/client/assets/sass/_inner.scss b/site/client/assets/sass/_inner.scss
index 6bdef57..566a2d4 100644
--- a/site/client/assets/sass/_inner.scss
+++ b/site/client/assets/sass/_inner.scss
@@ -14,7 +14,13 @@ body.inner {
 
 main {
   float: left;
+  clear: both;
   width: 70%;
+}
+
+.container-content {
+  float: left;
+  width: 100%;
   padding: 20px;
   height: calc(100vh - 300px);
   min-height: 400px;
diff --git a/site/client/assets/sass/_nav.scss b/site/client/assets/sass/_nav.scss
index 5eeb284..9b8bae2 100644
--- a/site/client/assets/sass/_nav.scss
+++ b/site/client/assets/sass/_nav.scss
@@ -21,6 +21,7 @@ nav {
     padding: 12px 25px;
     float: left;
     cursor: pointer;
+    height: 55px;
 
     @include transition(color);
 
diff --git a/site/client/assets/sass/app.scss b/site/client/assets/sass/app.scss
index eefc324..b27e07e 100644
--- a/site/client/assets/sass/app.scss
+++ b/site/client/assets/sass/app.scss
@@ -10,4 +10,5 @@
 'form',
 'landing',
 'inner',
-'nav';
\ No newline at end of file
+'nav',
+'chat';
\ No newline at end of file
diff --git a/site/client/views/inner.blade.php b/site/client/views/inner.blade.php
index 2db5a65..5e37bf9 100644
--- a/site/client/views/inner.blade.php
+++ b/site/client/views/inner.blade.php
@@ -2,10 +2,16 @@
 
 @section('content')
 
-  @if($type == 'server')
-    <component is="lobby" v-transition transition-mode="out-in"></component>
-  @else
-    <component is="@{{ view }}" v-transition transition-mode="out-in"></component>
-  @endif
+  <section class="container-inner">
+
+    @if($type == 'server')
+      <component is="lobby" v-transition transition-mode="out-in"></component>
+    @else
+      <component is="@{{ view }}" v-transition transition-mode="out-in"></component>
+    @endif
+
+    <component is="chat"></component>
+
+  </section>
 
 @stop
\ No newline at end of file