diff --git a/frontend/App.vue b/frontend/App.vue
index 6053cab1..ab83167d 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
     <h1>hello world</h1>
+
+    <router-view />
   </div>
 </template>
\ No newline at end of file
diff --git a/frontend/components/Player.vue b/frontend/components/Player.vue
new file mode 100644
index 00000000..7d1c910a
--- /dev/null
+++ b/frontend/components/Player.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Player</h1>
+  </div>
+</template>
+
+
+<script>
+</script>
+
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/main.js b/frontend/main.js
index 728ae418..da93ebe2 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-// import router from './routes'
+import router from './routes'
 // import store from './store'
 
 import App from './App.vue'
@@ -9,9 +9,8 @@ Vue.use(VueRouter)
 
 new Vue({
   el: '#app',
-  // router,
+  router,
   // store,
   components: { App },
-  // template: '<App />',
   render: h => h(App)
 })
\ No newline at end of file
diff --git a/frontend/routes.js b/frontend/routes.js
new file mode 100644
index 00000000..f8f30b30
--- /dev/null
+++ b/frontend/routes.js
@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router';
+
+Vue.use(VueRouter)
+
+let routes = [
+  {
+    name: 'player',
+    path: '/player',
+    component: (resolve) => require(['./components/Player.vue'], resolve)
+  },
+  // {
+  //   name: '404',
+  //   path: '/404',
+  //   component: (resolve) => require(['./components/404.vue'], resolve)
+  // }
+];
+
+const router =  new VueRouter({
+  mode: 'hash',
+  base: '/',
+  routes,
+  linkActiveClass: 'is-active'
+});
+
+export default router;
\ No newline at end of file