diff --git a/conf/init.json b/conf/init.json
index 3c7c558..f372de8 100644
--- a/conf/init.json
+++ b/conf/init.json
@@ -6,22 +6,26 @@
         {
             "name": "Login",
             "to": "/login",
-            "icon": "fa-home"
+            "icon": "fa-home",
+            "content": "<login-form></login-form>"
         },
         {
             "name": "Dashboard",
             "to": "/",
-            "icon": "fa-home"
+            "icon": "fa-home",
+            "content": "<dashboard></dashboard>"
         },
         {
             "name": "Userlist",
             "to": "/userlist",
-            "icon": "fa-news"
+            "icon": "fa-news",
+            "content": "<userlist></userlist>"
         },
         {
             "name": "Logout",
             "to": "/logout",
-            "icon": "fa-lock"
+            "icon": "fa-lock",
+            "content": "<logout></logout>"
         }
     ]
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ee1d3db..e23cb8f 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Vue Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
         .component-fade-enter-active, .component-fade-leave-active {
           transition: opacity .3s ease;
@@ -14,7 +15,7 @@
   </head>
   <body>
 	  <div id="vue-app">
-      <app :navigation-items="navItems"></app>
+      <app></app>
 	  </div>
     <script src="build/app.js"></script>
   </body>
diff --git a/src/app.vue b/src/app.vue
index 4c0d972..8cfcce3 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -17,16 +17,9 @@ export default {
     components: {
         Navigation
     },
-    props: {
-        navigationItems: {
-            type: Array,
-            default() {
-                return [ ];
-            }
-        }
-    },
     data() {
         return {
+            navigationItems: this.$store.state.navigation
         }
     },
     created() {
diff --git a/src/main.js b/src/main.js
index b77a688..6270808 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,37 +5,12 @@ import Axios from 'axios';
 import JwtDecode from 'jwt-decode';
 
 import App from './app.vue';
-import Dashboard from './components/dashboard.vue';
-import LoginForm from './components/forms/login.vue';
-import Logout from './components/logout.vue';
-import Userlist from './components/userlist.vue';
+import Views from './views/views.js';
 
 Vue.use(VueRouter);
 Vue.use(Vuex);
 
-
-const routes = [
-  {
-    path: '/login',
-    component: LoginForm
-  },
-  {
-    path: '/',
-    component: Dashboard
-  },
-  {
-    path: '/userlist',
-    component: Userlist
-  },
-  {
-    path: '/logout',
-    component: Logout
-  }
-];
-
-const router = new VueRouter({
-  routes
-});
+const router = new VueRouter();
 
 const store = new Vuex.Store({
   state: {
@@ -202,20 +177,36 @@ Axios.get('conf/init.json')
       alert('invalid data in init.json');
       return;
     }
-    store.commit("setNavigation", results.data.navigation);
+    let navigation = [];
+    results.data.navigation.forEach(({name, to}) => navigation.push({name, to}));
+      
+    store.commit("setNavigation", navigation);
 
     // set api config in store
     store.commit("setAPI", results.data.api);
 
+    // add routes
+    let routes = [];
+    let rIdx = 0;
+    results.data.navigation.forEach(({to, content, data}) => routes.push({
+      path: to,
+      component: Vue.component('main' + rIdx++, {
+        template: '<div id="main'+ rIdx + '">' + content + '</div>',
+        components: Views,
+        data() {
+          if (typeof data != 'object') {
+            return {};
+          }
+          return data;
+        }
+      })
+    }));
+    router.addRoutes(routes);
+
     // load app, when init finishs
     new Vue({
       el: '#vue-app',
-      components: {
-        App
-      },
-      data: {
-        navItems: store.state.navigation
-      },
+      render: h => h(App),
       router,
       store
     });
diff --git a/src/components/dashboard.vue b/src/views/dashboard.vue
similarity index 100%
rename from src/components/dashboard.vue
rename to src/views/dashboard.vue
diff --git a/src/components/forms/login.vue b/src/views/forms/login.vue
similarity index 96%
rename from src/components/forms/login.vue
rename to src/views/forms/login.vue
index c615835..08c7930 100644
--- a/src/components/forms/login.vue
+++ b/src/views/forms/login.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import MyForm from '../my-form.vue';
+import MyForm from '../../components/my-form.vue';
 
 export default {
   name: 'LoginForm',
diff --git a/src/components/logout.vue b/src/views/forms/logout.vue
similarity index 100%
rename from src/components/logout.vue
rename to src/views/forms/logout.vue
diff --git a/src/components/userlist.vue b/src/views/lists/userlist.vue
similarity index 96%
rename from src/components/userlist.vue
rename to src/views/lists/userlist.vue
index f2586a5..7fc7647 100644
--- a/src/components/userlist.vue
+++ b/src/views/lists/userlist.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import ScrollTable from './scroll-table.vue';
+import ScrollTable from '../../components/scroll-table.vue';
 
 export default {
     name: "Userlist",
diff --git a/src/views/views.js b/src/views/views.js
new file mode 100644
index 0000000..ea891c4
--- /dev/null
+++ b/src/views/views.js
@@ -0,0 +1,11 @@
+import Dashboard from './dashboard.vue';
+import LoginForm from './forms/login.vue';
+import Logout from './forms/logout.vue';
+import Userlist from './lists/userlist.vue';
+
+export default {
+    Dashboard,
+    LoginForm,
+    Logout,
+    Userlist
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 0b04713..c868519 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,7 @@ var env = process.env.WEBPACK_ENV;
 if (env === 'production') {
   var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 
-  plugins.push(new UglifyJsPlugin({ 
+  plugins.push(new UglifyJsPlugin({
       minimize: true,
       sourceMap: true
     }
@@ -36,7 +36,7 @@ if (env === 'production') {
 module.exports = {
   entry: [
     'intersection-observer',
-    'babel-polyfill', 
+    'babel-polyfill',
     entryPoint
   ],
   devtool: 'source-map',
