diff --git a/conf/init.json b/conf/init.json
new file mode 100644
index 0000000..6aeb2ca
--- /dev/null
+++ b/conf/init.json
@@ -0,0 +1,18 @@
+{
+    "baseURL": "https://cx20.basispanel.de/api/v1/",
+    "APItargets": {
+        "login": "login"
+    },
+    "navigation": [
+        {
+            "name": "Dashboard",
+            "to": "/",
+            "icon": "fa-home"
+        },
+        {
+            "name": "Userlist",
+            "to": "/userlist",
+            "icon": "fa-news"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/conf/navigation.json b/conf/navigation.json
deleted file mode 100644
index a61e5de..0000000
--- a/conf/navigation.json
+++ /dev/null
@@ -1,12 +0,0 @@
-[
-    {
-        "name": "Dashboard",
-        "to": "/",
-        "icon": "fa-home"
-    },
-    {
-        "name": "Userlist",
-        "to": "/userlist",
-        "icon": "fa-news"
-    }
-]
\ No newline at end of file
diff --git a/index.html b/index.html
index 86868ff..ee1d3db 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,7 @@
   </head>
   <body>
 	  <div id="vue-app">
-      <navigation src="conf/navigation.json"></navigation>
-      <transition name="component-fade" mode="out-in">
-        <router-view></router-view>
-      </transition>
+      <app :navigation-items="navItems"></app>
 	  </div>
     <script src="build/app.js"></script>
   </body>
diff --git a/src/app.vue b/src/app.vue
new file mode 100644
index 0000000..4c0d972
--- /dev/null
+++ b/src/app.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="App">
+        <h1>MyApp</h1>
+        <navigation :items="navigationItems"></navigation>
+        <transition name="component-fade" mode="out-in">
+            <router-view></router-view>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+import Navigation from './components/navigation.vue';
+
+export default {
+    name: "App",
+    components: {
+        Navigation
+    },
+    props: {
+        navigationItems: {
+            type: Array,
+            default() {
+                return [ ];
+            }
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    created() {
+    }
+}
+</script>
diff --git a/src/components/my-table.vue b/src/components/my-table.vue
index 78c32aa..463e8b7 100644
--- a/src/components/my-table.vue
+++ b/src/components/my-table.vue
@@ -21,11 +21,15 @@ export default {
     props: {
        columns: {
            type: Array,
-           default: [ ]
+           default() {
+                return [ ];
+           }
        },
        rows: {
            type: Array,
-           default: [ ]
+           default() {
+                return [ ];
+           }
        }
     },
     data() {
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
index b9e4766..87bf0ca 100644
--- a/src/components/navigation.vue
+++ b/src/components/navigation.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="Navigation">
         <ul>
-            <li v-for="(e, i) in navItems" :key="i">
+            <li v-for="(e, i) in items" :key="i">
                 <router-link :to="e.to">{{ e.name }}</router-link>
             </li>
         </ul>
@@ -9,42 +9,15 @@
 </template>
 
 <script>
-import Axios from 'axios';
-
 export default {
     name: "Navigation",
-    props: [
-        'src',
-        'items'
-    ],
-    data() {
-        return {
-            navItems: []
+    props: {
+        items: {
+            type: Array,
+            default() {
+                return [ ];
+            }
         }
-    },
-    mounted() {
-        if (this.items) {
-            this.navItems = this.items;
-            return;
-        }
-        // only load if no items are given
-        Axios.get(this.src)
-            .then(results => {
-                if ( !Array.isArray(results.data) ) {
-                    alert('invalid data in: ' + this.src);
-                    return;
-                }
-                this.navItems = results.data;
-            })
-            .catch(error => {
-                alert('error loading ' + this.src + ': ' + error.message);
-            });
     }
 }
-</script>
-
-<style scoped>
-    .Navigation li a {
-        color: orange;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/userlist.vue b/src/components/userlist.vue
index c1fb75a..e1e7393 100644
--- a/src/components/userlist.vue
+++ b/src/components/userlist.vue
@@ -41,7 +41,6 @@ export default {
     methods: {
         add() {
             this.rows.push({'prop1': 'test'});
-            this.$store.commit('increment');
         }
     }
 }
diff --git a/src/main.js b/src/main.js
index 623db24..475a200 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,23 +1,19 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueRouter from 'vue-router';
-import Navigation from './components/navigation.vue';
+import Axios from 'axios';
+
+import App from './app.vue';
 import Dashboard from './components/dashboard.vue';
 import Userlist from './components/userlist.vue';
 
-
-Vue.use(Vuex);
 Vue.use(VueRouter);
-
+Vue.use(Vuex);
 
 const store = new Vuex.Store({
   state: {
-    count: 0
   },
   mutations: {
-    increment (state) {
-      state.count++
-    }
   }
 })
 
@@ -39,10 +35,28 @@ const router = new VueRouter({
 new Vue({
   el: '#vue-app',
   components: {
-    Navigation
+    App
   },
-  store,
-  router,
   data: {
+    navItems: [ ]
+  },
+  router,
+  store,
+  created() {
+    // load init
+    Axios.get('conf/init.json')
+        .then(results => {
+            if ( !Array.isArray(results.data.navigation) ) {
+                alert('invalid data in: ' + this.src);
+                return;
+            }
+            // add routes
+
+            this.navItems = results.data.navigation;
+        })
+        .catch(error => {
+            alert('error loading ' + this.src + ': ' + error.message);
+        });
+    
   }
 });
\ No newline at end of file
