diff --git a/site/client/app/app.js b/site/client/app/app.js
index c69395b..b8618c9 100644
--- a/site/client/app/app.js
+++ b/site/client/app/app.js
@@ -16,7 +16,6 @@ var app = new Vue({
 
   components: {
     lobby: require('./components/lobby'),
-    navigation: require('./components/navigation'),
     chat: require('./components/chat')
   }
 
diff --git a/site/client/app/components/lobby.js b/site/client/app/components/lobby.js
index 49ea8d7..3a7edea 100644
--- a/site/client/app/components/lobby.js
+++ b/site/client/app/components/lobby.js
@@ -1,5 +1,16 @@
 module.exports = {
 
-  template: require('../views/lobby.html')
+  template: require('../views/lobby.html'),
+
+  data: function() {
+  	return {
+  		modal: false
+  	}
+  },
+
+  components: {
+  	searchmatch: require('./modals/searchMatch'),
+  	navigation: require('./navigation')
+  }
 
 };
\ No newline at end of file
diff --git a/site/client/app/components/modals/searchMatch.js b/site/client/app/components/modals/searchMatch.js
new file mode 100644
index 0000000..e2a7c0f
--- /dev/null
+++ b/site/client/app/components/modals/searchMatch.js
@@ -0,0 +1,7 @@
+module.exports = {
+
+  template: require('../../views/modals/searchMatch.html'),
+
+ 	inherit: true
+
+};
\ No newline at end of file
diff --git a/site/client/app/components/navigation.js b/site/client/app/components/navigation.js
index 70da0d3..ffcece6 100644
--- a/site/client/app/components/navigation.js
+++ b/site/client/app/components/navigation.js
@@ -4,9 +4,16 @@ module.exports = {
 
   template: require('../views/navigation.html'),
 
+  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 aaf7e98..6d6646e 100644
--- a/site/client/app/routes.js
+++ b/site/client/app/routes.js
@@ -13,9 +13,7 @@ var routes = {
 };
 
 var options = {
-  html5history: true,
-  run_handler_in_init: false,
-  convert_hash_in_init: false
+  html5history: true
 }
 
 var Router = require('director').Router;
diff --git a/site/client/app/views/lobby.html b/site/client/app/views/lobby.html
index cab0cae..d1047df 100644
--- a/site/client/app/views/lobby.html
+++ b/site/client/app/views/lobby.html
@@ -5,7 +5,7 @@
   <navigation></navigation>
 
   <section class="container-content">
-    blaa
+    <searchmatch></searchmatch>
   </section>
 
 </main>
\ No newline at end of file
diff --git a/site/client/app/views/modals/searchMatch.html b/site/client/app/views/modals/searchMatch.html
new file mode 100644
index 0000000..d58b258
--- /dev/null
+++ b/site/client/app/views/modals/searchMatch.html
@@ -0,0 +1,10 @@
+<div class="modal" v-class="active: modal">
+  <div class="modal-banner">
+    <div class="wrap-modal-search">
+
+      <i class="icon-content-load"></i>
+      <p class="modal-para">Search for Player</p>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/site/client/app/views/navigation.html b/site/client/app/views/navigation.html
index 0ab4b7a..e0346d1 100644
--- a/site/client/app/views/navigation.html
+++ b/site/client/app/views/navigation.html
@@ -4,6 +4,6 @@
     <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
     <li><a v-on="click: changeView('highscore')">Highscore</a></li>
 
-    <li class="sub-nav"><a>Quick Match</a></li>
+    <li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li>
   </ul>
 </nav>
diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss
index 4bcb1fd..c33ae6d 100644
--- a/site/client/assets/sass/_modal.scss
+++ b/site/client/assets/sass/_modal.scss
@@ -3,6 +3,11 @@
   margin: 0 auto;
 }
 
+.wrap-modal-search {
+  max-width: 250px;
+  margin: 0 auto;
+}
+
 .modal {
   position: fixed;
   width: 100%;
@@ -31,4 +36,22 @@
   padding: 50px 0;
   margin: 15% 0 0 0;
   float: left;
+}
+
+.icon-content-load {
+  background: url(../img/content-load.gif) no-repeat;
+  float: left;
+  width: 32px;
+  height: 32px;
+  opacity: .9;
+}
+
+.modal-para {
+  font-size: 17px;
+  text-transform: uppercase;
+  font-weight: 300;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+  color: #8798ac;
+  float: left;
+  margin: 3px 0 0 20px;
 }
\ No newline at end of file
diff --git a/site/public/assets/img/action-load.gif b/site/public/assets/img/action-load.gif
index 904ff0c..ab8baab 100644
Binary files a/site/public/assets/img/action-load.gif and b/site/public/assets/img/action-load.gif differ
diff --git a/site/public/assets/img/content-load.gif b/site/public/assets/img/content-load.gif
new file mode 100644
index 0000000..97a1117
Binary files /dev/null and b/site/public/assets/img/content-load.gif differ
diff --git a/site/public/assets/img/guest-load.gif b/site/public/assets/img/guest-load.gif
index 07052d5..c9cf234 100644
Binary files a/site/public/assets/img/guest-load.gif and b/site/public/assets/img/guest-load.gif differ