diff --git a/zero.Debug/Controllers/HomeController.cs b/zero.Debug/Controllers/HomeController.cs
index 655948d6..307e27a6 100644
--- a/zero.Debug/Controllers/HomeController.cs
+++ b/zero.Debug/Controllers/HomeController.cs
@@ -17,6 +17,16 @@ namespace zero.Debug.Controllers
       return View();
     }
 
+    [HttpGet]
+    public async Task<IActionResult> Test()
+    {
+      await Task.Delay(3000);
+      return Json(new
+      {
+        result = "okay"
+      });
+    }
+
     [HttpGet]
     public async Task<IActionResult> SavePages([FromServices] IDocumentStore raven)
     {
diff --git a/zero.Web.UI/App/app.vue b/zero.Web.UI/App/app.vue
index 4cb0616f..7318f432 100644
--- a/zero.Web.UI/App/app.vue
+++ b/zero.Web.UI/App/app.vue
@@ -19,7 +19,7 @@
   import AppLogin from 'zero/pages/login/login.vue'
   import AppOverlays from 'zero/components/overlays/overlay-holder.vue'
   import AppNotifications from 'zero/components/notifications/notification-holder.vue'
-  //import Router from 'zero/router.config.js'
+  import EventHub from './services/eventhub.js';
   import AuthApi from 'zero/services/auth.js'
   import 'zero/config/vue.config.js'
   import 'zero/config/axios.config.js'
@@ -27,8 +27,6 @@
   export default {
     name: 'app',
 
-   // router: Router,
-
     components: { AppNavigation, AppOverlays, AppLogin, AppNotifications },
 
     data: () => ({
@@ -37,13 +35,12 @@
 
     created()
     {
-      console.info(this.zero);
+      AuthApi.setUser(__zero.user);
+
       AuthApi.$on('authenticated', isAuthenticated =>
       {
         this.isAuthenticated = isAuthenticated;
       });
-
-      AuthApi.setUser(zero.user);
     },
 
 
diff --git a/zero.Web.UI/App/config/axios.config.js b/zero.Web.UI/App/config/axios.config.js
index c721f021..f9d1272f 100644
--- a/zero.Web.UI/App/config/axios.config.js
+++ b/zero.Web.UI/App/config/axios.config.js
@@ -2,12 +2,12 @@
 import Auth from 'zero/services/auth';
 import Qs from 'qs';
 
-if (!zero || !zero.apiPath)
+if (!__zero || !__zero.apiPath)
 {
   throw Exception('window.zero and zero.apiPath (= base path to the backoffice API) have to be configured');
 }
 
-Axios.defaults.baseURL = zero.apiPath;
+Axios.defaults.baseURL = __zero.apiPath;
 Axios.defaults.withCredentials = true;
 
 Axios.defaults.paramsSerializer = (params) =>
diff --git a/zero.Web.UI/App/config/router.config.js b/zero.Web.UI/App/config/router.config.js
index f4c00c8d..b3697ca5 100644
--- a/zero.Web.UI/App/config/router.config.js
+++ b/zero.Web.UI/App/config/router.config.js
@@ -11,7 +11,7 @@ const beforeEach = () => (to, from, next) =>
   {
     let title = Localization.localize('@zero.name');
 
-    if (to.meta.name && to.meta.alias !== zero.alias.sections.dashboard)
+    if (to.meta.name && to.meta.alias !== __zero.alias.sections.dashboard)
     {
       let name = to.meta.name;
       let nameParts = _isArray(name) ? name : [name];
@@ -64,7 +64,7 @@ const beforeEach = () => (to, from, next) =>
 
 export default {
   mode: 'history',
-  base: zero.path,
+  base: __zero.path,
   linkActiveClass: 'is-active',
   linkExactActiveClass: 'is-active-exact',
   beforeEach: beforeEach,
diff --git a/zero.Web.UI/App/config/routes.js b/zero.Web.UI/App/config/routes.js
deleted file mode 100644
index 5c9a3e84..00000000
--- a/zero.Web.UI/App/config/routes.js
+++ /dev/null
@@ -1,123 +0,0 @@
-
-import { isArray as _isArray, find as _find, map as _map, filter as _filter } from 'underscore';
-import { warn } from 'zero/services/debug';
-
-let routes = [];
-
-
-// add defined backoffice sections (with their children) to the router
-
-const addSection = (section, component, parent) =>
-{
-  let route = {
-    path: section.url,
-    component: component,
-    name: (parent ? parent.alias + '-' : '') + section.alias,
-    meta: {
-      name: [section.name, (parent ? parent.name : null)],
-      alias: section.alias,
-      section: section,
-      parent: parent
-    }
-  };
-
-  routes.push(route);
-
-  return route;
-};
-
-zero.sections.forEach(section =>
-{
-  if (!section.isExternal)
-  {
-    addSection(section, () => import('zero/pages/' + section.alias + '/' + section.alias));
-
-    if (section.children.length > 0)
-    {
-      section.children.forEach(child =>
-      {
-        addSection(child, () => import('zero/pages/' + section.alias + '/' + section.alias + '/' + child.alias), section);
-      });
-    }
-  }
-});
-
-
-// add additional routes
-
-routes.push({
-  path: '/preview',
-  component: () => import('zero/pages/preview'),
-  name: 'preview',
-  meta: {
-    name: '@preview.name'
-  }
-});
-
-
-// find internal route definitions per section
-
-let addRoutesPerContext = (context, isPlugin) =>
-{
-  context.keys().forEach((path) =>
-  {
-    const routesDefinition = context(path);
-    const definition = routesDefinition.default || routesDefinition;
-    let _routes = _isArray(definition) ? definition : definition.routes;
-
-    _routes.forEach(route =>
-    {
-      const parentAlias = route.section || definition.section;
-      const isChild = typeof parentAlias === 'string';
-      const parentRoute = isChild ? _find(routes, r => r.meta.alias === parentAlias) : null;
-
-      // could not append routes to a section
-      if (isChild && !parentRoute)
-      {
-        if (_routes.length > 0)
-        {
-          warn(`router: Could not find section "${definition.section}" in route definition file ${path}`);
-        }
-      }
-      // append routes to a section
-      else if (isChild)
-      {
-        if (!parentRoute.children)
-        {
-          parentRoute.children = [];
-        }
-        parentRoute.children.push(route);
-      }
-      // add routes to root
-      else
-      {
-        routes.push(route);
-      }
-    });
-  });
-};
-
-
-
-// add internal route extensions
-addRoutesPerContext(require.context('zero/pages', true, /routes\.js$/));
-
-// add plugin route extensions
-try
-{
-  addRoutesPerContext(require.context('@/../zero.Commerce/Plugins/zero.Commerce', true, /routes\.js$/), true); // TODO dynPATH
-}
-catch (exc)
-{
-  // TODO error will throw when user is not logged in as "section" in routes.js is null
-}
-//addRoutesPerContext(require.context('@/plugins', true, /routes\.js$/), true); // TODO use zero.pluginPath, but this fails
-
-
-
-// add fallback route (this should probably by 404 page)
-
-routes.push({ name: '404', path: '*', component: () => import('zero/pages/notfound') });
-
-
-export default routes;
\ No newline at end of file
diff --git a/zero.Web.UI/App/config/zero.plugins.js b/zero.Web.UI/App/config/zero.plugins.js
deleted file mode 100644
index 4cdeccd0..00000000
--- a/zero.Web.UI/App/config/zero.plugins.js
+++ /dev/null
@@ -1,36 +0,0 @@
-
-//zero.plugins = zero.plugins || [];
-
-//// TODO correct path
-//let plugins = require.context('@/../zero.Commerce/Plugins/zero.Commerce', true, /plugin\.js$/); // TODO dynPATH
-
-//plugins.keys().forEach(path =>
-//{
-//  const routesDefinition = plugins(path);
-//  const definition = routesDefinition.default || routesDefinition;
-
-//  definition.name = 'commerce'; // TODO
-//  zero.plugins.push(definition);
-//});
-
-////plugins = require.context('@/../zero.Debug', true, /plugin\.js$/); // TODO dynPATH
-
-////plugins.keys().forEach(path =>
-////{
-////  const routesDefinition = plugins(path);
-////  const definition = routesDefinition.default || routesDefinition;
-
-////  definition.name = 'project'; // TODO
-////  zero.plugins.push(definition);
-////});
-
-
-//// run setup action directly
-
-//zero.plugins.forEach(plugin =>
-//{
-//  if (typeof plugin.setup === 'function')
-//  {
-//    plugin.setup();
-//  }
-//});
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/plugin.js b/zero.Web.UI/App/core/plugin.js
index 64b38e39..35c55247 100644
--- a/zero.Web.UI/App/core/plugin.js
+++ b/zero.Web.UI/App/core/plugin.js
@@ -61,7 +61,7 @@ class Plugin
    */
   addRoutes(routes)
   {
-    this.routes.forEach(route => this.addRoute(route));
+    routes.forEach(route => this.addRoute(route));
   }
 };
 
diff --git a/zero.Web.UI/App/core/plugin.zero.js b/zero.Web.UI/App/core/plugin.zero.js
index 77647fea..04793aab 100644
--- a/zero.Web.UI/App/core/plugin.zero.js
+++ b/zero.Web.UI/App/core/plugin.zero.js
@@ -1,7 +1,7 @@
 
 import Plugin from './plugin.js';
 import renderers from '../renderers/all.js';
-import routes from '../config/routes.js';
+import routes from './routes.js';
 
 const plugin = new Plugin('zero');
 
diff --git a/zero.Web.UI/App/core/routes.js b/zero.Web.UI/App/core/routes.js
new file mode 100644
index 00000000..a0c85d9a
--- /dev/null
+++ b/zero.Web.UI/App/core/routes.js
@@ -0,0 +1,29 @@
+
+import Preview from '../pages/preview.vue';
+import NotFound from '../pages/notfound.vue';
+import dashboardRoutes from '../pages/dashboard/routes.js';
+import pageRoutes from '../pages/pages/routes.js';
+import mediaRoutes from '../pages/media/routes.js';
+import settingsRoutes from '../pages/settings/routes.js';
+import spaceRoutes from '../pages/spaces/routes.js';
+
+export default [
+  {
+    name: 'preview',
+    path: '/preview',
+    component: Preview,
+    meta: {
+      name: '@preview.name'
+    }
+  },
+  ...dashboardRoutes,
+  ...pageRoutes,
+  ...mediaRoutes,
+  ...settingsRoutes,
+  ...spaceRoutes,
+  {
+    name: '404',
+    path: '*',
+    component: NotFound
+  }
+];
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/zero.js b/zero.Web.UI/App/core/zero.js
index 31e63d80..9b83d36e 100644
--- a/zero.Web.UI/App/core/zero.js
+++ b/zero.Web.UI/App/core/zero.js
@@ -2,9 +2,14 @@
 // ref: 
 // https://github.com/vuejs/vue-router/blob/dev/src/index.js
 
+import Axios from 'axios';
 import ZeroPlugin from './plugin.zero.js';
-import CommercePlugin from '../../../zero.Commerce/Plugins/zero.Commerce/plugin.js'; // TODO dynPath
+import EventHub from '../services/eventhub.js';
+import VueRouter from 'vue-router';
+import Vue from 'vue';
+//import CommercePlugin from '../../../zero.Commerce/Plugins/zero.Commerce/plugin.js'; // TODO dynPath
 import options from './options.js';
+import routerConfig from '../config/router.config.js'
 
 class Zero
 {
@@ -14,6 +19,8 @@ class Zero
 
   #vue = null;
   #plugins = [];
+  #routes = [];
+  #router = null;
 
 
   constructor(vue, opts)
@@ -22,7 +29,7 @@ class Zero
     this.#vue = vue;
 
     this.use(ZeroPlugin);
-    this.use(CommercePlugin);
+    //this.use(CommercePlugin);
   }
 
 
@@ -43,12 +50,33 @@ class Zero
   }
 
 
+  /*
+   * Get all installed zero plugins
+   */
+  get router()
+  {
+    return this.#router;
+  }
+
+
   /*
    * Locates zero plugins and install them
    */
   setup()
   {
-    
+    this.#router = new VueRouter({
+      ...routerConfig,
+      routes: this.#routes
+    });
+
+    console.info(this.#routes);
+
+    //const result = await Axios.get('zerovue/config');
+    //this.config = { ...this.config, ...result.data };
+
+    //console.info(this.#vue.router);
+
+    //EventHub.$emit('zero.setup');
   }
 
 
@@ -65,6 +93,12 @@ class Zero
 
     this.#plugins.push(plugin);
 
+    // append routes
+    plugin.routes.forEach(route =>
+    {
+      this.#routes.push(route);
+    });
+
     console.log(`[zero] Installed %c${plugin.name}%cplugin`, 'font-style:italic;');
   }
 };
@@ -80,6 +114,12 @@ Zero.install = (vue, opts) =>
   Object.defineProperty(vue.prototype, 'zero', {
     get: () => zero
   });
+
+  zero.setup();
+
+  Vue.mixin({
+    router: zero.router
+  });
 };
 
 
diff --git a/zero.Web.UI/App/pages/dashboard/routes.js b/zero.Web.UI/App/pages/dashboard/routes.js
new file mode 100644
index 00000000..d6dfc0fe
--- /dev/null
+++ b/zero.Web.UI/App/pages/dashboard/routes.js
@@ -0,0 +1,18 @@
+
+import Dashboard from './dashboard.vue';
+
+const alias = __zero.alias.sections.dashboard;
+const section = __zero.sections.find(x => x.alias === alias);
+
+export default section ? [
+  {
+    name: section.alias,
+    path: section.url,
+    component: Dashboard,
+    meta: {
+      name: section.name,
+      alias: section.alias,
+      section: section
+    }
+  }
+] : [];
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/media/routes.js b/zero.Web.UI/App/pages/media/routes.js
index 9a54e5ef..a4fdd90c 100644
--- a/zero.Web.UI/App/pages/media/routes.js
+++ b/zero.Web.UI/App/pages/media/routes.js
@@ -1,46 +1,36 @@
-import { find as _find } from 'underscore';
+
+import Media from './detail.vue';
+import Medias from './media.vue';
 
-const alias = zero.alias.sections.media;
-const section = _find(zero.sections, section => section.alias === alias);
-let routes = [];
+const alias = __zero.alias.sections.media;
+const section = __zero.sections.find(x => x.alias === alias);
 
-if (section)
-{
-  routes.push({
+export default section ? [
+  {
+    name: section.alias,
+    path: section.url,
+    component: Medias,
+    meta: {
+      name: section.name,
+      alias: section.alias,
+      section: section
+    },
+    children: [
+      {
+        name: 'mediaitem',
+        path: 'edit/:id',
+        props: true,
+        component: Media
+      }
+    ]
+  },
+  {
+    name: 'mediafolder',
     path: section.url + '/folder/:id',
     props: true,
-    name: 'mediafolder',
-    component: () => import('zero/pages/' + alias + '/media')
-  });
-
-  routes.push({
-    section: alias,
-    path: 'edit/:id',
-    props: true,
-    name: 'mediaitem',
-    component: () => import('zero/pages/' + alias + '/detail')
-  });
-
-  routes.push({
-    section: alias,
-    path: 'recyclebin',
-    name: 'mediarecyclebin',
-    component: () => import('zero/pages/' + alias + '/recyclebin'),
+    component: Medias,
     meta: {
-      name: '@recyclebin.name'
+      name: section.name
     }
-  });
-
-  //routes.push({
-  //  path: 'history',
-  //  name: 'history',
-  //  component: () => import('zero/pages/' + alias + '/history'),
-  //  meta: {
-  //    name: '@page.history.name'
-  //  }
-  //});
-}
-
-export default {
-  routes: routes
-};
\ No newline at end of file
+  }
+] : [];
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/pages/routes.js b/zero.Web.UI/App/pages/pages/routes.js
index af85b7e4..3224beb0 100644
--- a/zero.Web.UI/App/pages/pages/routes.js
+++ b/zero.Web.UI/App/pages/pages/routes.js
@@ -1,45 +1,45 @@
-import { find as _find } from 'underscore';
+
+import Page from './page.vue';
+import Pages from './pages.vue';
+import RecycleBin from './recyclebin/recyclebin.vue';
 
-const alias = zero.alias.sections.pages;
-const section = _find(zero.sections, section => section.alias === alias);
-let routes = [];
+const alias = __zero.alias.sections.pages;
+const section = __zero.sections.find(x => x.alias === alias);
 
-if (section)
-{
-  routes.push({
-    path: 'edit/:id',
-    props: true,
-    name: 'page',
-    component: () => import('zero/pages/' + alias + '/page')
-  });
-
-  routes.push({
-    path: 'create/:type/:parent?',
-    props: true,
-    name: 'page-create',
-    component: () => import('zero/pages/' + alias + '/page')
-  });
-
-  routes.push({
-    path: 'recyclebin',
-    name: 'recyclebin',
-    component: () => import('zero/pages/' + alias + '/recyclebin/recyclebin'),
+export default section ? [
+  {
+    name: section.alias,
+    path: section.url,
+    component: Pages,
     meta: {
-      name: '@recyclebin.name'
-    }
-  });
-
-  routes.push({
-    path: 'history',
-    name: 'history',
-    component: () => import('zero/pages/' + alias + '/history'),
-    meta: {
-      name: '@page.history.name'
-    }
-  });
-}
-
-export default {
-  section: alias,
-  routes: routes
-};
\ No newline at end of file
+      name: section.name,
+      alias: section.alias,
+      section: section
+    },
+    children: [
+      {
+        name: 'page',
+        path: 'edit/:id',
+        section: alias,
+        props: true,
+        component: Page
+      },
+      {
+        name: 'page-create',
+        path: 'create/:type/:parent?',
+        section: alias,
+        props: true,
+        component: Page
+      },
+      {
+        name: 'recyclebin',
+        path: 'recyclebin',
+        section: alias,
+        component: RecycleBin,
+        meta: {
+          name: '@recyclebin.name'
+        }
+      }
+    ]
+  } 
+] : [];
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/application.vue b/zero.Web.UI/App/pages/settings/application.vue
index 8ec48068..7f945064 100644
--- a/zero.Web.UI/App/pages/settings/application.vue
+++ b/zero.Web.UI/App/pages/settings/application.vue
@@ -18,7 +18,7 @@
     data: () => ({
       meta: {},
       model: { name: null, features: [], domains: [] },
-      route: zero.alias.sections.settings + '-' + zero.alias.settings.applications + '-edit',
+      route: zero.alias.settings.applications + '-edit',
       disabled: false
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/applications-items.vue b/zero.Web.UI/App/pages/settings/applications-items.vue
index c2f09f8d..f0e6a3c0 100644
--- a/zero.Web.UI/App/pages/settings/applications-items.vue
+++ b/zero.Web.UI/App/pages/settings/applications-items.vue
@@ -13,7 +13,7 @@
 
 
 <script>
-  const baseRoute = zero.alias.sections.settings + '-' + zero.alias.settings.applications;
+  const baseRoute = __zero.alias.settings.applications;
 
   export default {
     props: {
diff --git a/zero.Web.UI/App/pages/settings/countries.vue b/zero.Web.UI/App/pages/settings/countries.vue
index ce0be72c..47b3d170 100644
--- a/zero.Web.UI/App/pages/settings/countries.vue
+++ b/zero.Web.UI/App/pages/settings/countries.vue
@@ -17,7 +17,7 @@
   export default {
     data: () => ({
       count: 0,
-      createRoute: zero.alias.sections.settings + '-' + zero.alias.settings.countries + '-create',
+      createRoute: zero.alias.settings.countries + '-create',
       tableConfig: zero.renderers.country.list
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/country.vue b/zero.Web.UI/App/pages/settings/country.vue
index 47816f42..84549bab 100644
--- a/zero.Web.UI/App/pages/settings/country.vue
+++ b/zero.Web.UI/App/pages/settings/country.vue
@@ -18,7 +18,7 @@
     data: () => ({
       meta: {},
       model: { name: null, features: [], domains: [] },
-      route: zero.alias.sections.settings + '-' + zero.alias.settings.countries + '-edit',
+      route: zero.alias.settings.countries + '-edit',
       disabled: false
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/language.vue b/zero.Web.UI/App/pages/settings/language.vue
index 21f87b9b..9af5abef 100644
--- a/zero.Web.UI/App/pages/settings/language.vue
+++ b/zero.Web.UI/App/pages/settings/language.vue
@@ -18,7 +18,7 @@
     data: () => ({
       meta: {},
       model: { name: null, features: [], domains: [] },
-      route: zero.alias.sections.settings + '-' + zero.alias.settings.languages + '-edit',
+      route: zero.alias.settings.languages + '-edit',
       disabled: false
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/languages.vue b/zero.Web.UI/App/pages/settings/languages.vue
index 94939cbd..bf6ca3da 100644
--- a/zero.Web.UI/App/pages/settings/languages.vue
+++ b/zero.Web.UI/App/pages/settings/languages.vue
@@ -17,7 +17,7 @@
   export default {
     data: () => ({
       count: 0,
-      createRoute: zero.alias.sections.settings + '-' + zero.alias.settings.languages + '-create',
+      createRoute: zero.alias.settings.languages + '-create',
       tableConfig: zero.renderers.language.list
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/role.vue b/zero.Web.UI/App/pages/settings/role.vue
index 2e148849..84b47d1f 100644
--- a/zero.Web.UI/App/pages/settings/role.vue
+++ b/zero.Web.UI/App/pages/settings/role.vue
@@ -19,7 +19,7 @@
     data: () => ({
       meta: {},
       model: { name: null, features: [], domains: [], claims: [] },
-      route: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-role',
+      route: zero.alias.settings.users + '-role',
       disabled: false
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/routes.js b/zero.Web.UI/App/pages/settings/routes.js
index be46b9f2..6c8fb85c 100644
--- a/zero.Web.UI/App/pages/settings/routes.js
+++ b/zero.Web.UI/App/pages/settings/routes.js
@@ -1,89 +1,122 @@
-import { map as _map, find as _find, isArray as _isArray } from 'underscore';
+
+import Settings from './settings.vue';
+import Applications from './applications.vue';
+import Application from './application.vue';
+import Countries from './countries.vue';
+import Country from './country.vue';
+import Languages from './languages.vue';
+import Language from './language.vue';
+import Users from './users.vue';
+import User from './user.vue';
+import UserRole from './role.vue';
+import Translations from './translations.vue';
+import Translation from './translation.vue';
 
-const alias = zero.alias.sections.settings;
-const section = _find(zero.sections, section => section.alias === alias);
+const alias = __zero.alias.sections.settings;
+const section = __zero.sections.find(x => x.alias === alias);
+let settings = [];
 let routes = [];
 
-const detailPages = [];
-detailPages[zero.alias.settings.users] = [
-  { view: 'user' },
-  { view: 'role', path: 'role' },
-  { view: 'role', path: 'role/create', isCreate: true }
-];
-detailPages[zero.alias.settings.countries] = [
-  { view: 'country' },
-  { view: 'country', path: 'create', isCreate: true }
-];
-detailPages[zero.alias.settings.translations] = [
-  { view: 'translations' },
-  { view: 'translations', path: 'create', isCreate: true }
-];
-detailPages[zero.alias.settings.languages] = [
-  { view: 'language' },
-  { view: 'language', path: 'create', isCreate: true }
-];
-detailPages[zero.alias.settings.applications] = [
-  { view: 'application' },
-  { view: 'application', path: 'create', isCreate: true }
-];
+__zero.settingsAreas.forEach(group => group.items.forEach(area =>
+{
+  if (!area.isPlugin)
+  {
+    settings.push(area);
+  }
+}));
+
+const addArea = (areaAlias, component, detailComponent, hasCreate, postCreate) =>
+{
+  let area = typeof areaAlias === 'object' ? areaAlias : settings.find(x => x.alias === areaAlias);
+
+  routes.push({
+    name: area.alias,
+    path: area.url,
+    component: component,
+    meta: {
+      name: [area.name, section.name]
+    }
+  });
+
+  if (detailComponent && hasCreate)
+  {
+    routes.push({
+      name: area.alias + '-create',
+      path: area.url + '/create/:scope?',
+      component: detailComponent,
+      meta: {
+        create: true,
+        name: [area.name, section.name]
+      }
+    });
+  }
+
+  if (detailComponent)
+  {
+    routes.push({
+      name: area.alias + '-edit',
+      path: area.url + '/edit/:id',
+      component: detailComponent,
+      meta: {
+        name: [area.name, section.name]
+      }
+    });
+  }
+
+  if (typeof postCreate === 'function')
+  {
+    postCreate(area);
+  }
+};
+
 
 if (section)
 {
-  zero.settingsAreas.forEach(group => group.items.forEach(area => 
+  // add overview page
+  routes.push({
+    name: section.alias,
+    path: section.url,
+    component: Settings,
+    meta: {
+      name: section.name,
+      alias: section.alias,
+      section: section
+    }
+  });
+
+
+  // add details
+
+  addArea(__zero.alias.settings.applications, Applications, Application, true);
+
+  addArea(__zero.alias.settings.countries, Countries, Country, true);
+
+  addArea(__zero.alias.settings.languages, Languages, Language, true);
+
+  addArea(__zero.alias.settings.translations, Translations, Translation, true);
+
+  addArea(__zero.alias.settings.users, Users, User, true, area =>
   {
-    // add settings area page
-    if (!area.isPlugin)
-    {
-      routes.push({
-        path: area.url,
-        name: alias + '-' + area.alias,
-        component: () => import(`zero/pages/${alias}/${area.alias}`),
-        meta: {
-          name: [area.name, section.name]
-        }
-      });
-    }
-
-    // add details page
-    if (detailPages[area.alias])
-    {
-      var config = detailPages[area.alias];
-      var details = [];
-
-      if (typeof config === 'string')
-      {
-        details.push({
-          view: config,
-          path: 'edit'
-        });
-      }
-      else if (_isArray(config))
-      {
-        details = config;
-      }
-      else if (typeof config === 'object')
-      {
-        details.push(config);
+    routes.push({
+      name: 'roles-create',
+      path: '/' + section.alias + '/roles/create/:scope?',
+      component: UserRole,
+      meta: {
+        create: true,
+        name: [area.name, section.name]
       }
+    });
 
-      details.forEach(detail =>
-      {
-        const path = detail.path || 'edit';
-        const isCreate = typeof detail.isCreate === 'boolean' ? detail.isCreate : false;
-
-        routes.push({
-          path: area.url + '/' + path + (!isCreate ? '/:id' : '/:scope?'),
-          name: alias + '-' + area.alias + '-' + path.replace('/', '-'),
-          component: () => import(`zero/pages/${alias}/${detail.view}`),
-          props: true,
-          meta: {
-            create: isCreate,
-            name: [area.name, section.name]
-          }
-        });
-      });
-    }
-  }));
+    routes.push({
+      name: 'roles-edit',
+      path: '/' + section.alias + '/roles/edit/:id',
+      component: UserRole,
+      meta: {
+        name: [area.name, section.name]
+      }
+    });
+  });
 }
 
-export default { routes };
\ No newline at end of file
+
+export default routes;
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/translation.vue b/zero.Web.UI/App/pages/settings/translation.vue
index 2b155118..d7b57804 100644
--- a/zero.Web.UI/App/pages/settings/translation.vue
+++ b/zero.Web.UI/App/pages/settings/translation.vue
@@ -47,7 +47,7 @@
       meta: {},
       item: { key: null, value: null },
       disabled: false,
-      route: zero.alias.sections.settings + '-' + zero.alias.settings.translations + '-edit',
+      route: zero.alias.settings.translations + '-edit',
       displayItems: [
         { label: '@translation.display.text', value: 'text' },
         { label: '@translation.display.html', value: 'html' }
diff --git a/zero.Web.UI/App/pages/settings/translations.vue b/zero.Web.UI/App/pages/settings/translations.vue
index 8a529152..3e837896 100644
--- a/zero.Web.UI/App/pages/settings/translations.vue
+++ b/zero.Web.UI/App/pages/settings/translations.vue
@@ -19,7 +19,7 @@
   export default {
     data: () => ({
       count: 0,
-      createRoute: zero.alias.sections.settings + '-' + zero.alias.settings.translations + '-create',
+      createRoute: zero.alias.settings.translations + '-create',
       tableConfig: zero.renderers.translation.list
     }),
 
diff --git a/zero.Web.UI/App/pages/settings/user.vue b/zero.Web.UI/App/pages/settings/user.vue
index 48a00bbb..d9ce0f24 100644
--- a/zero.Web.UI/App/pages/settings/user.vue
+++ b/zero.Web.UI/App/pages/settings/user.vue
@@ -43,7 +43,7 @@
         email: null,
         lockoutEnd: null
       },
-      route: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-edit',
+      route: zero.alias.settings.users + '-edit',
       disabled: false,
       originalLockoutEnd: null
     }),
diff --git a/zero.Web.UI/App/pages/settings/users.vue b/zero.Web.UI/App/pages/settings/users.vue
index 6b552fbb..7ad101dd 100644
--- a/zero.Web.UI/App/pages/settings/users.vue
+++ b/zero.Web.UI/App/pages/settings/users.vue
@@ -32,7 +32,7 @@
 
   export default {
     data: () => ({
-      createRoleRoute: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-role-create',
+      createRoleRoute: 'roles-create',
       roles: [],
       usersConfig: zero.renderers.user.list
     }),
@@ -61,7 +61,7 @@
       getRoleLink(item)
       {
         return {
-          name: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-role',
+          name: 'roles-edit',
           params: { id: item.id }
         };
       }
diff --git a/zero.Web.UI/App/pages/spaces/routes.js b/zero.Web.UI/App/pages/spaces/routes.js
index 9847a9d6..9956bddf 100644
--- a/zero.Web.UI/App/pages/spaces/routes.js
+++ b/zero.Web.UI/App/pages/spaces/routes.js
@@ -1,60 +1,41 @@
-import { find as _find } from 'underscore';
+
+import Spaces from './spaces.vue';
 
-const alias = zero.alias.sections.spaces;
-const section = _find(zero.sections, section => section.alias === alias);
-let routes = [];
+const alias = __zero.alias.sections.spaces;
+const section = __zero.sections.find(x => x.alias === alias);
 
-if (section)
-{
-  routes.push({
-    path: ':alias/edit/:id',
-    props: true,
-    name: 'space-item',
-    component: () => import('zero/pages/' + alias + '/spaces')
-  });
-
-  routes.push({
-    path: ':alias',
-    props: true,
-    name: 'space',
-    component: () => import('zero/pages/' + alias + '/spaces')
-  });
-
-  routes.push({
-    path: ':alias/create/:scope?',
-    props: true,
-    name: 'space-create',
-    component: () => import('zero/pages/' + alias + '/spaces'),
+export default section ? [
+  {
+    name: section.alias,
+    path: section.url,
+    component: Spaces,
     meta: {
-      create: true
-    }
-  });
-
-  //routes.push({
-  //  path: 'list/:id',
-  //  props: true,
-  //  name: 'space_list',
-  //  component: () => import('zero/pages/' + alias + '/views/list')
-  //});
-
-  //routes.push({
-  //  path: ':alias',
-  //  props: true,
-  //  name: 'space',
-  //  component: () => import('zero/pages/' + alias + '/views/editor')
-  //});
-
-  //routes.push({
-  //  path: 'history',
-  //  name: 'history',
-  //  component: () => import('zero/pages/' + alias + '/history'),
-  //  meta: {
-  //    name: '@page.history.name'
-  //  }
-  //});
-}
-
-export default {
-  section: alias,
-  routes: routes
-};
\ No newline at end of file
+      name: section.name,
+      alias: section.alias,
+      section: section
+    },
+    children: [
+      {
+        name: 'space-item',
+        path: ':alias/edit/:id',
+        props: true,
+        component: Spaces
+      },
+      {
+        name: 'space',
+        path: ':alias',
+        props: true,
+        component: Spaces
+      },
+      {
+        name: 'space-create',
+        path: ':alias/create/:scope?',
+        props: true,
+        component: Spaces,
+        meta: {
+          create: true
+        }
+      }
+    ]
+  }
+] : [];
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/country.js b/zero.Web.UI/App/renderers/country.js
index 180ab20d..cd981948 100644
--- a/zero.Web.UI/App/renderers/country.js
+++ b/zero.Web.UI/App/renderers/country.js
@@ -56,7 +56,7 @@
         link: item =>
         {
           return {
-            name: zero.alias.sections.settings + '-' + zero.alias.settings.countries + '-edit',
+            name: zero.alias.settings.countries + '-edit',
             params: { id: item.id }
           };
         },
diff --git a/zero.Web.UI/App/renderers/globals.js b/zero.Web.UI/App/renderers/globals.js
deleted file mode 100644
index 691a21d1..00000000
--- a/zero.Web.UI/App/renderers/globals.js
+++ /dev/null
@@ -1,44 +0,0 @@
-
-zero.renderers = zero.renderers || {};
-
-// https://webpack.js.org/guides/dependency-management/#require-context
-const requireComponent = require.context(
-  // Look for files in the current directory
-  '.',
-  // Do look in subdirectories
-  true,
-  // .js files
-  /[\w-]+\.js/
-);
-
-// For each matching file name...
-requireComponent.keys().forEach((path) =>
-{
-  let pathParts = path.split('/');
-  let fileName = pathParts[pathParts.length - 1];
-
-  if (fileName === 'globals.js')
-  {
-    return;
-  }
-
-  const componentConfig = requireComponent(path);
-  const alias = componentConfig.default.alias;
-
-  zero.renderers[alias] = componentConfig.default;
-});
-
-// load renderers from plugins 
-// TODO use correct paths for sure
-//const pluginrenderers = require.context('@/../zero.commerce/plugin', true, /renderers\.js$/);
-
-//// for each matching file name...
-//pluginrenderers.keys().foreach((path) =>
-//{
-//  let pathparts = path.split('/');
-
-//  const componentconfig = pluginrenderers(path);
-//  const alias = componentconfig.default.alias;
-
-//  zero.renderers[alias] = componentconfig.default;
-//});
diff --git a/zero.Web.UI/App/renderers/language.js b/zero.Web.UI/App/renderers/language.js
index 24e6d60f..0a667e3e 100644
--- a/zero.Web.UI/App/renderers/language.js
+++ b/zero.Web.UI/App/renderers/language.js
@@ -51,7 +51,7 @@
         link: item =>
         {
           return {
-            name: zero.alias.sections.settings + '-' + zero.alias.settings.languages + '-edit',
+            name: zero.alias.settings.languages + '-edit',
             params: { id: item.id }
           };
         }
diff --git a/zero.Web.UI/App/renderers/translation.js b/zero.Web.UI/App/renderers/translation.js
index 5f9f4bdc..1e55cffc 100644
--- a/zero.Web.UI/App/renderers/translation.js
+++ b/zero.Web.UI/App/renderers/translation.js
@@ -1,7 +1,7 @@
 let link = item =>
 {
   return {
-    name: zero.alias.sections.settings + '-' + zero.alias.settings.translations + '-edit',
+    name: zero.alias.settings.translations + '-edit',
     params: { id: item.id }
   };
 };
diff --git a/zero.Web.UI/App/renderers/user.js b/zero.Web.UI/App/renderers/user.js
index 33c97f65..2e77bd8b 100644
--- a/zero.Web.UI/App/renderers/user.js
+++ b/zero.Web.UI/App/renderers/user.js
@@ -76,7 +76,7 @@ export default {
         link: item =>
         {
           return {
-            name: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-edit',
+            name: zero.alias.settings.users + '-edit',
             params: { id: item.id }
           };
         },
@@ -89,7 +89,7 @@ export default {
         link: item =>
         {
           return {
-            name: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-edit',
+            name: zero.alias.settings.users + '-edit',
             params: { id: item.id }
           };
         },
diff --git a/zero.Web.UI/App/services/localization.js b/zero.Web.UI/App/services/localization.js
index 83234b40..acaee223 100644
--- a/zero.Web.UI/App/services/localization.js
+++ b/zero.Web.UI/App/services/localization.js
@@ -23,7 +23,7 @@ export default {
     }
 
     key = hasAtSign ? key.slice(1) : key;
-    const value = zero.translations[key.toLowerCase()];
+    const value = __zero.translations[key.toLowerCase()];
 
     // TODO only return key if in debug mode
     if (!params.hideEmpty && (!value || typeof value !== 'string'))
diff --git a/zero.Web.UI/app.js b/zero.Web.UI/app.js
index 009f853a..6be5ac70 100644
--- a/zero.Web.UI/app.js
+++ b/zero.Web.UI/app.js
@@ -6,9 +6,9 @@ import 'zero/components/globals';
 import 'zero/directives/globals';
 import 'zero/filters/globals';
 
-zero.apps = {
-  shared: true
-};
+//zero.apps = {
+//  shared: true
+//};
 
 //import 'zero/pages/register';
 
@@ -17,6 +17,6 @@ zero.apps = {
 Vue.use(VueRouter);
 Vue.use(Zero);
 
-import 'zero/config/zero.plugins.js';
+var app = new Vue(App);
 
-new Vue(App).$mount('#app'); 
\ No newline at end of file
+app.$mount('#app');
\ No newline at end of file
diff --git a/zero.Web/Controllers/ZeroVueController.cs b/zero.Web/Controllers/ZeroVueController.cs
new file mode 100644
index 00000000..159179d2
--- /dev/null
+++ b/zero.Web/Controllers/ZeroVueController.cs
@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Mvc;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Converters;
+using Newtonsoft.Json.Serialization;
+using System.Threading.Tasks;
+using zero.Core.Identity;
+
+namespace zero.Web.Controllers
+{
+  [ZeroAuthorize(false)]
+  public class ZeroVueController : BackofficeController
+  {
+    private IZeroVue ZeroVue { get; set; }
+
+    public ZeroVueController(IZeroVue zeroVue)
+    {
+      ZeroVue = zeroVue;
+    }
+
+
+    [HttpGet]
+    public async Task<IActionResult> Config()
+    {
+      var settings = new JsonSerializerSettings();
+      settings.Converters.Add(new StringEnumConverter(new CamelCaseNamingStrategy()));
+
+      return Json(await ZeroVue.Config()); //, settings);
+    }
+  }
+}
diff --git a/zero.Web/Views/Shared/Index.cshtml b/zero.Web/Views/Shared/Index.cshtml
index c6cfd8bf..2dff76ef 100644
--- a/zero.Web/Views/Shared/Index.cshtml
+++ b/zero.Web/Views/Shared/Index.cshtml
@@ -19,8 +19,8 @@
 <body class="theme-light theme-rounded x-test">
   <div id="app"></div>
   <script>
-    window.zero = window.zero || {};
-    zero = @Html.Raw(await Model.Vue.ConfigAsJson());
+    window.__zero = @Html.Raw(await Model.Vue.ConfigAsJson());
+    window.zero = window.__zero;
   </script>
   <script src="~/zero/vue-cli/js/chunk-vendors.js" asp-append-version="true"></script>
   <script src="~/zero/vue-cli/js/app.js" asp-append-version="true"></script>
diff --git a/zero.Web/ZeroVue.cs b/zero.Web/ZeroVue.cs
index befd99ec..b03a5627 100644
--- a/zero.Web/ZeroVue.cs
+++ b/zero.Web/ZeroVue.cs
@@ -46,7 +46,7 @@ namespace zero.Web
 
 
     /// <inheritdoc/>
-    public async Task<string> ConfigAsJson()
+    public async Task<ZeroVueConfig> Config()
     {
       ZeroVueConfig config = new ZeroVueConfig();
 
@@ -79,7 +79,14 @@ namespace zero.Web
         };
       }
 
-      return JsonSerializer.Serialize(config, new JsonSerializerOptions()
+      return config;
+    }
+
+
+    /// <inheritdoc/>
+    public async Task<string> ConfigAsJson()
+    {
+      return JsonSerializer.Serialize(await Config(), new JsonSerializerOptions()
       {
         PropertyNamingPolicy = JsonNamingPolicy.CamelCase
       });
@@ -270,6 +277,11 @@ namespace zero.Web
 
   public interface IZeroVue
   {
+    /// <summary>
+    /// Creates the zero configuration for vue
+    /// </summary>
+    Task<ZeroVueConfig> Config();
+
     /// <summary>
     /// Creates the zero configuration for vue
     /// </summary>