diff --git a/site/client/app/app.js b/site/client/app/app.js
index 0298c43..fba70ea 100644
--- a/site/client/app/app.js
+++ b/site/client/app/app.js
@@ -1,26 +1,23 @@
 var Vue = require('vue');
-var router = require('./routes');
-
-require('../../../public/Config.js');
+var VueRouter = require('vue-router');
 
+Vue.use(VueRouter)
 Vue.use(require('vue-resource'));
 Vue.http.headers.common['X-CSRF-TOKEN'] = $('.token').attr('content');
 
-var app = new Vue({
-
-  el: 'body',
-
-  data: {
-    name: '',
-    view: '',
-    section: ''
-  },
-
+var app = Vue.extend({
   components: {
     inner: require('./components/inner'),
     landing: require('./components/landing')
   }
-
 });
 
-//router.init(app);
\ No newline at end of file
+var routes = require('./routes');
+var router = new VueRouter(routes.options);
+
+router.map(routes.maps);
+router.start(app, 'body');
+
+new Vue({
+  el: 'body'
+});
\ No newline at end of file
diff --git a/site/client/app/components/deckBuilder.js b/site/client/app/components/deckBuilder.js
new file mode 100644
index 0000000..48912bc
--- /dev/null
+++ b/site/client/app/components/deckBuilder.js
@@ -0,0 +1,5 @@
+module.exports = {
+
+  template: "<h2>deckbuilder hier</h2>"
+
+};
\ No newline at end of file
diff --git a/site/client/app/components/inner.js b/site/client/app/components/inner.js
index deea695..381f2f7 100644
--- a/site/client/app/components/inner.js
+++ b/site/client/app/components/inner.js
@@ -13,7 +13,8 @@ module.exports = {
     navigation: require('./navigation'),
     chat: require('./chat'),
 
-    lobby: require('./lobby')
+    lobby: require('./lobby'),
+    deckBuilder: require('./deckBuilder')
   }
 
 };
\ No newline at end of file
diff --git a/site/client/app/components/lobby.js b/site/client/app/components/lobby.js
index 1e87a1d..dce420d 100644
--- a/site/client/app/components/lobby.js
+++ b/site/client/app/components/lobby.js
@@ -1,5 +1,5 @@
 module.exports = {
 
-  template: require('../views/lobby.html'),
+  template: "<h2>lobby hier</h2>"
 
 };
\ No newline at end of file
diff --git a/site/client/app/components/navigation.js b/site/client/app/components/navigation.js
index 9a0a48d..9d9f695 100644
--- a/site/client/app/components/navigation.js
+++ b/site/client/app/components/navigation.js
@@ -7,10 +7,6 @@ module.exports = {
   inherit: true,
 
   methods: {
-    changeView: function(view) {
-      router.changeRoute(view);
-    },
-
     searchMatch: function() {
       this.modal = true;
       // trigger match functions
diff --git a/site/client/app/routes.js b/site/client/app/routes.js
index 6d6646e..4661adc 100644
--- a/site/client/app/routes.js
+++ b/site/client/app/routes.js
@@ -1,26 +1,19 @@
-var routes = {
-  '/lobby': function() {
-    alert('lobby');
-  },
-
-  '/deck-builder': function() {
-    alert('deck-builder');
-  },
-
-  '/highscore': function() {
-    alert('highscore');
-  }
-};
-
-var options = {
-  html5history: true
-}
-
-var Router = require('director').Router;
-var router = new Router(routes).configure(options).init();
+require('../../../public/Config.js');
 
 module.exports = {
-  changeRoute: function(route) {
-    router.setRoute(route);
+
+  maps: {
+    '/lobby': {
+      component: 'lobby'
+    },
+
+    '/deck-builder': {
+      component: 'deckBuilder'
+    }
+  },
+
+  options: {
+    history: true,
+    root: window.Config.Site.base
   }
 }
\ No newline at end of file
diff --git a/site/client/app/views/inner.html b/site/client/app/views/inner.html
index fcf4779..397f9bc 100644
--- a/site/client/app/views/inner.html
+++ b/site/client/app/views/inner.html
@@ -4,10 +4,21 @@
 
 <main>
 
+  <style>
+    .test {
+      transition: all .5s ease;
+    }
+    .test-enter, .test-leave {
+      opacity: 0;
+    }
+  </style>
+
   <navigation></navigation>
 
   <section class="container-content">
-    <component is="lobby"></component>
+
+    <router-view class="test" v-transition="test" transition-mode="out-in"></router-view>
+
   </section>
 
 </main>
diff --git a/site/client/app/views/navigation.html b/site/client/app/views/navigation.html
index e0346d1..209ff88 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 v-on="click: changeView('deck-builder')">Deck Builder</a></li>
+    <li><a class="active" v-link="/lobby">Lobby</a></li>
+    <li><a v-link="/deck-builder">Deck Builder</a></li>
     <li><a v-on="click: changeView('highscore')">Highscore</a></li>
 
     <li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li>
diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss
index 01a30fa..c945a22 100644
--- a/site/client/assets/sass/_modal.scss
+++ b/site/client/assets/sass/_modal.scss
@@ -21,11 +21,11 @@
   opacity: 0;
   visibility: hidden;
 
+  @include transition();
+
   &.active {
     visibility: visible;
     opacity: 1;
-
-    @include transition();
   }
 }
 
@@ -38,9 +38,9 @@
   margin: 24vh 0 0 0;
   float: left;
 
-  .active & {
-    @include transition();
+  @include transition();
 
+  .active & {
     margin: 25vh 0 0 0;
   }
 }
@@ -65,7 +65,6 @@
   clear: both;
   width: 100%;
   text-align: center;
-  //margin: 3px 0 0 20px;
 }
 
 .btn-cancel {
@@ -77,7 +76,9 @@
   color: darken(#8798ac, 10%);
   cursor: pointer;
 
+  @include transition();
+
   &:hover {
-    color: #8798ac;
+    color: #fff;
   }
 }
\ No newline at end of file