diff --git a/zero.Debug/Startup.cs b/zero.Debug/Startup.cs
index c48fca8d..3ac17916 100644
--- a/zero.Debug/Startup.cs
+++ b/zero.Debug/Startup.cs
@@ -42,7 +42,7 @@ namespace zero.Debug
 
       ZeroBuilder zero = services
         .AddZero(Configuration)
-        .AddCommerce()
+        //.AddCommerce()
         .AddPlugin<TestPlugin>();
 
       services.Configure<IISOptions>(opts => opts.AutomaticAuthentication = false);
diff --git a/zero.Web.UI/app.js b/zero.Web.UI/app.js
index 592f1efe..06aa03f1 100644
--- a/zero.Web.UI/app.js
+++ b/zero.Web.UI/app.js
@@ -1,14 +1,12 @@
 import { createApp } from 'vue';
+
 import App from './app.vue';
-
-zero.apps = {
-  shared: true
-};
-
-import registerDirectives from './directives/register.js';
 import Router from './config/router.config.js';
+import registerDirectives from './directives/register.js';
 import registerComponents from './components/register.js';
-//import registerRenderers from './renderers/register.js';
+import registerRenderers from './renderers/register.js';
+
+zero.renderers = zero.renderers || {};
 
 //import '@zero/config/zero.plugins.js';
 //import ZeroPlugin from '@zero/plugin.js';
@@ -18,6 +16,8 @@ app.use(Router);
 
 registerDirectives(app);
 registerComponents(app);
+registerRenderers(zero.renderers);
+
 //registerRenderers(app);
 
 app.mount('#app');
\ No newline at end of file
diff --git a/zero.Web.UI/components/buttons/add-button.vue b/zero.Web.UI/components/buttons/add-button.vue
index 4ca76f3e..b3509990 100644
--- a/zero.Web.UI/components/buttons/add-button.vue
+++ b/zero.Web.UI/components/buttons/add-button.vue
@@ -62,7 +62,7 @@
       },
       hasDropdown()
       {
-        return this.decision && zero.apps.shared;
+        return this.decision && zero.config.shared;
       }
     },
 
diff --git a/zero.Web.UI/components/buttons/icon-button.vue b/zero.Web.UI/components/buttons/icon-button.vue
index 2ae9bb81..1c42be46 100644
--- a/zero.Web.UI/components/buttons/icon-button.vue
+++ b/zero.Web.UI/components/buttons/icon-button.vue
@@ -27,22 +27,19 @@
       },
       title: {
         type: String,
-        default: ''
+        default: '' 
       },
       disabled: Boolean
     },
 
-    mounted ()
+    setup(props, context)
     {
-      
-    },
-
-    methods: {
-
-      tryClick(ev)
-      {
-        this.$emit('click', ev);
-      }
+      return {
+        tryClick(ev)
+        {
+          context.emit('click', ev);
+        }
+      };
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/components/datagrid/datagrid.vue b/zero.Web.UI/components/datagrid/datagrid.vue
index 321935f7..76a3dc8d 100644
--- a/zero.Web.UI/components/datagrid/datagrid.vue
+++ b/zero.Web.UI/components/datagrid/datagrid.vue
@@ -61,7 +61,7 @@
     name: 'uiDatagrid',
 
     props: {
-      value: {
+      config: {
         type: Object,
         required: true,
         default: () =>
@@ -80,11 +80,11 @@
       {
         this.load(true);
       },
-      'value.search': function (val)
+      'config.search': function (val)
       {
         this.filter.search = val;
       },
-      'value.items': function (val)
+      'config.items': function (val)
       {
         this.initialize();
       },
@@ -135,7 +135,7 @@
       {
         this.debouncedUpdate = _debounce(this.update, 300);
 
-        this.configuration = _extend(defaultConfig, this.value);
+        this.configuration = _extend(defaultConfig, this.config);
 
         if (this.configuration.order.enabled)
         {
diff --git a/zero.Web.UI/components/forms/error.vue b/zero.Web.UI/components/forms/error.vue
index fb7aa10c..e7dfe5d5 100644
--- a/zero.Web.UI/components/forms/error.vue
+++ b/zero.Web.UI/components/forms/error.vue
@@ -1,5 +1,5 @@
 <template>
-  formData: {{formData}}
+  <!--formData: {{formData}}-->
   <div class="ui-error" v-if="visible">
     <ui-message v-for="error in errors" :key="error.id" type="error" :text="error.message" :title="error.field" />
   </div>
diff --git a/zero.Web.UI/components/forms/form-header.vue b/zero.Web.UI/components/forms/form-header.vue
index 7128ebe4..70846297 100644
--- a/zero.Web.UI/components/forms/form-header.vue
+++ b/zero.Web.UI/components/forms/form-header.vue
@@ -1,16 +1,16 @@
 <template>
   <ui-header-bar class="ui-form-header" :back-button="true">
     <template v-slot:title>
-      <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name}">
-        <input class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
-        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="value.alias" :name="value.name" :disabled="disabled" />-->
-        <!--<span v-localize="value.name || title"></span>-->
+      <h2 class="ui-header-bar-title" :class="{'is-empty': title && !modelValue.name}">
+        <input class="ui-form-header-title-input" type="text" v-model="modelValue.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
+        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="modelValue.alias" :name="modelValue.name" :disabled="disabled" />-->
+        <!--<span v-localize="modelValue.name || title"></span>-->
       </h2>
     </template>
     <div class="ui-form-header-aside">
       <slot></slot>
       <div v-if="activeToggle" class="ui-form-header-toggle">
-        <ui-toggle v-model="value.isActive" class="is-primary" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
+        <ui-toggle v-model="modelValue.isActive" class="is-primary" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
       </div>
       <ui-dropdown v-if="actionsDefined && !disabled" align="right">
         <template v-slot:button>
@@ -32,36 +32,17 @@
     emits: ['delete'],
 
     props: {
-      title: {
-        type: String,
-        default: null
-      },
-      value: {
-        type: Object
-      },
+      title: String,
+      modelValue: Object,
+      disabled: Boolean,
+      titleDisabled: Boolean,
+      state: String,
+      isCreate: Boolean,
+      activeToggle: Boolean,
       canDelete: {
         type: Boolean,
         default: true
       },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      titleDisabled: {
-        type: Boolean,
-        default: false
-      },
-      state: {
-        type: String
-      },
-      isCreate: {
-        type: Boolean,
-        default: false
-      },
-      activeToggle: {
-        type: Boolean,
-        default: false
-      },
       hasAlias: {
         type: Boolean,
         default: true
diff --git a/zero.Web.UI/components/forms/form.vue b/zero.Web.UI/components/forms/form.vue
index 91b45fae..6b5358b0 100644
--- a/zero.Web.UI/components/forms/form.vue
+++ b/zero.Web.UI/components/forms/form.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="ui-form" @keydown="onKeydown" @submit.prevent="onSubmit" @change="onChange">
-    <slot v-if="loadingState === 'default'" v-bind="slotProps" />
+    <slot v-if="loadingState === 'default'" :state="state" :is-shared="isShared" />
     <div v-if="loadingState == 'loading'" class="ui-form-loading">
       <i class="ui-form-loading-progress"></i>
     </div>
@@ -43,10 +43,6 @@
       errors: [],
       canEdit: true,
       isShared: false,
-      slotProps: {
-        state: null,
-        isShared: false
-      },
       submitBlocked: false
     }),
 
@@ -59,14 +55,6 @@
       {
         this.$emit('load', this);
       },
-      state(val)
-      {
-        this.slotProps.state = val;
-      },
-      isShared(val)
-      {
-        this.slotProps.isShared = val;
-      },
       canEdit(val)
       {
         this.$nextTick(() =>
@@ -79,7 +67,6 @@
 
     created()
     {
-      this.slotProps.state = this.state;
       this.$emit('load', this);
     },
 
@@ -351,6 +338,7 @@
       // find all error components in form
       getErrorComponents()
       {
+        return []; // TODO parent.$children does not exist anymore in vue3
         let errorComponents = [];
 
         // find components which can output errors
diff --git a/zero.Web.UI/components/forms/rte.pell.dependency.js b/zero.Web.UI/components/forms/rte.pell.dependency.js
index 28a0b8be..5283c307 100644
--- a/zero.Web.UI/components/forms/rte.pell.dependency.js
+++ b/zero.Web.UI/components/forms/rte.pell.dependency.js
@@ -1,262 +1,249 @@
-(function (global, factory)
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
+var formatBlock = 'formatBlock';
+var addEventListener = function addEventListener(parent, type, listener)
 {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-      (factory((global.pell = {})));
-}(this, (function (exports)
+  return parent.addEventListener(type, listener);
+};
+var appendChild = function appendChild(parent, child)
 {
-  'use strict';
+  return parent.appendChild(child);
+};
+var createElement = function createElement(tag)
+{
+  return document.createElement(tag);
+};
+var queryCommandState = function queryCommandState(command)
+{
+  return document.queryCommandState(command);
+};
+var queryCommandValue = function queryCommandValue(command)
+{
+  return document.queryCommandValue(command);
+};
 
-  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var exec = function exec(command)
+{
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return document.execCommand(command, false, value);
+};
 
-  var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
-  var formatBlock = 'formatBlock';
-  var addEventListener = function addEventListener(parent, type, listener)
-  {
-    return parent.addEventListener(type, listener);
-  };
-  var appendChild = function appendChild(parent, child)
-  {
-    return parent.appendChild(child);
-  };
-  var createElement = function createElement(tag)
-  {
-    return document.createElement(tag);
-  };
-  var queryCommandState = function queryCommandState(command)
-  {
-    return document.queryCommandState(command);
-  };
-  var queryCommandValue = function queryCommandValue(command)
-  {
-    return document.queryCommandValue(command);
-  };
+var defaultActions = {
+  bold: {
+    icon: '<b>B</b>',
+    title: 'Bold',
+    state: function state()
+    {
+      return queryCommandState('bold');
+    },
+    result: function result()
+    {
+      return exec('bold');
+    }
+  },
+  italic: {
+    icon: '<i>I</i>',
+    title: 'Italic',
+    state: function state()
+    {
+      return queryCommandState('italic');
+    },
+    result: function result()
+    {
+      return exec('italic');
+    }
+  },
+  underline: {
+    icon: '<u>U</u>',
+    title: 'Underline',
+    state: function state()
+    {
+      return queryCommandState('underline');
+    },
+    result: function result()
+    {
+      return exec('underline');
+    }
+  },
+  strikethrough: {
+    icon: '<strike>S</strike>',
+    title: 'Strike-through',
+    state: function state()
+    {
+      return queryCommandState('strikeThrough');
+    },
+    result: function result()
+    {
+      return exec('strikeThrough');
+    }
+  },
+  heading1: {
+    icon: '<b>H<sub>1</sub></b>',
+    title: 'Heading 1',
+    result: function result()
+    {
+      return exec(formatBlock, '<h1>');
+    }
+  },
+  heading2: {
+    icon: '<b>H<sub>2</sub></b>',
+    title: 'Heading 2',
+    result: function result()
+    {
+      return exec(formatBlock, '<h2>');
+    }
+  },
+  paragraph: {
+    icon: '&#182;',
+    title: 'Paragraph',
+    result: function result()
+    {
+      return exec(formatBlock, '<p>');
+    }
+  },
+  quote: {
+    icon: '&#8220; &#8221;',
+    title: 'Quote',
+    result: function result()
+    {
+      return exec(formatBlock, '<blockquote>');
+    }
+  },
+  olist: {
+    icon: '<i class="fth-list"></i>',
+    title: 'Ordered List',
+    result: function result()
+    {
+      return exec('insertOrderedList');
+    }
+  },
+  ulist: {
+    icon: '<i class="fth-menu"></i>',
+    title: 'Unordered List',
+    result: function result()
+    {
+      return exec('insertUnorderedList');
+    }
+  },
+  code: {
+    icon: '&lt;/&gt;',
+    title: 'Code',
+    result: function result()
+    {
+      return exec(formatBlock, '<pre>');
+    }
+  },
+  line: {
+    icon: '<i class="fth-minus"></i>',
+    title: 'Horizontal Line',
+    result: function result()
+    {
+      return exec('insertHorizontalRule');
+    }
+  },
+  link: {
+    icon: '<i class="fth-link"></i>',
+    title: 'Link',
+    result: function result()
+    {
+      var url = window.prompt('Enter the link URL');
+      if (url) exec('createLink', url);
+    }
+  },
+  image: {
+    icon: '&#128247;',
+    title: 'Image',
+    result: function result()
+    {
+      var url = window.prompt('Enter the image URL');
+      if (url) exec('insertImage', url);
+    }
+  }
+};
 
-  var exec = function exec(command)
-  {
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return document.execCommand(command, false, value);
-  };
+var defaultClasses = {
+  actionbar: 'pell-actionbar',
+  button: 'pell-button',
+  content: 'pell-content',
+  selected: 'pell-button-selected'
+};
 
-  var defaultActions = {
-    bold: {
-      icon: '<b>B</b>',
-      title: 'Bold',
-      state: function state()
+var init = function init(settings)
+{
+  var actions = settings.actions ? settings.actions.map(function (action)
+  {
+    if (typeof action === 'string') return defaultActions[action]; else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
+    return action;
+  }) : Object.keys(defaultActions).map(function (action)
+  {
+    return defaultActions[action];
+  });
+
+  var classes = _extends({}, defaultClasses, settings.classes);
+
+  var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
+
+  var actionbar = createElement('div');
+  actionbar.className = classes.actionbar;
+  appendChild(settings.element, actionbar);
+
+  var content = settings.element.content = createElement('div');
+  content.contentEditable = true;
+  content.className = classes.content;
+  content.oninput = function (_ref)
+  {
+    var firstChild = _ref.target.firstChild;
+
+    if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>'); else if (content.innerHTML === '<br>') content.innerHTML = '';
+    settings.onChange(content.innerHTML);
+  };
+  content.onkeydown = function (event)
+  {
+    if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote')
+    {
+      setTimeout(function ()
       {
-        return queryCommandState('bold');
-      },
-      result: function result()
-      {
-        return exec('bold');
-      }
-    },
-    italic: {
-      icon: '<i>I</i>',
-      title: 'Italic',
-      state: function state()
-      {
-        return queryCommandState('italic');
-      },
-      result: function result()
-      {
-        return exec('italic');
-      }
-    },
-    underline: {
-      icon: '<u>U</u>',
-      title: 'Underline',
-      state: function state()
-      {
-        return queryCommandState('underline');
-      },
-      result: function result()
-      {
-        return exec('underline');
-      }
-    },
-    strikethrough: {
-      icon: '<strike>S</strike>',
-      title: 'Strike-through',
-      state: function state()
-      {
-        return queryCommandState('strikeThrough');
-      },
-      result: function result()
-      {
-        return exec('strikeThrough');
-      }
-    },
-    heading1: {
-      icon: '<b>H<sub>1</sub></b>',
-      title: 'Heading 1',
-      result: function result()
-      {
-        return exec(formatBlock, '<h1>');
-      }
-    },
-    heading2: {
-      icon: '<b>H<sub>2</sub></b>',
-      title: 'Heading 2',
-      result: function result()
-      {
-        return exec(formatBlock, '<h2>');
-      }
-    },
-    paragraph: {
-      icon: '&#182;',
-      title: 'Paragraph',
-      result: function result()
-      {
-        return exec(formatBlock, '<p>');
-      }
-    },
-    quote: {
-      icon: '&#8220; &#8221;',
-      title: 'Quote',
-      result: function result()
-      {
-        return exec(formatBlock, '<blockquote>');
-      }
-    },
-    olist: {
-      icon: '<i class="fth-list"></i>',
-      title: 'Ordered List',
-      result: function result()
-      {
-        return exec('insertOrderedList');
-      }
-    },
-    ulist: {
-      icon: '<i class="fth-menu"></i>',
-      title: 'Unordered List',
-      result: function result()
-      {
-        return exec('insertUnorderedList');
-      }
-    },
-    code: {
-      icon: '&lt;/&gt;',
-      title: 'Code',
-      result: function result()
-      {
-        return exec(formatBlock, '<pre>');
-      }
-    },
-    line: {
-      icon: '<i class="fth-minus"></i>',
-      title: 'Horizontal Line',
-      result: function result()
-      {
-        return exec('insertHorizontalRule');
-      }
-    },
-    link: {
-      icon: '<i class="fth-link"></i>',
-      title: 'Link',
-      result: function result()
-      {
-        var url = window.prompt('Enter the link URL');
-        if (url) exec('createLink', url);
-      }
-    },
-    image: {
-      icon: '&#128247;',
-      title: 'Image',
-      result: function result()
-      {
-        var url = window.prompt('Enter the image URL');
-        if (url) exec('insertImage', url);
-      }
+        return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
+      }, 0);
     }
   };
+  appendChild(settings.element, content);
 
-  var defaultClasses = {
-    actionbar: 'pell-actionbar',
-    button: 'pell-button',
-    content: 'pell-content',
-    selected: 'pell-button-selected'
-  };
-
-  var init = function init(settings)
+  actions.forEach(function (action)
   {
-    var actions = settings.actions ? settings.actions.map(function (action)
+    var button = createElement('button');
+    button.className = classes.button;
+    button.innerHTML = action.icon;
+    button.title = action.title;
+    button.setAttribute('type', 'button');
+    button.onclick = function ()
     {
-      if (typeof action === 'string') return defaultActions[action]; else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
-      return action;
-    }) : Object.keys(defaultActions).map(function (action)
-    {
-      return defaultActions[action];
-    });
-
-    var classes = _extends({}, defaultClasses, settings.classes);
-
-    var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
-
-    var actionbar = createElement('div');
-    actionbar.className = classes.actionbar;
-    appendChild(settings.element, actionbar);
-
-    var content = settings.element.content = createElement('div');
-    content.contentEditable = true;
-    content.className = classes.content;
-    content.oninput = function (_ref)
-    {
-      var firstChild = _ref.target.firstChild;
-
-      if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>'); else if (content.innerHTML === '<br>') content.innerHTML = '';
-      settings.onChange(content.innerHTML);
+      return action.result() && content.focus();
     };
-    content.onkeydown = function (event)
-    {
-      if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote')
-      {
-        setTimeout(function ()
-        {
-          return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
-        }, 0);
-      }
-    };
-    appendChild(settings.element, content);
 
-    actions.forEach(function (action)
+    if (action.state)
     {
-      var button = createElement('button');
-      button.className = classes.button;
-      button.innerHTML = action.icon;
-      button.title = action.title;
-      button.setAttribute('type', 'button');
-      button.onclick = function ()
+      var handler = function handler()
       {
-        return action.result() && content.focus();
+        return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
       };
+      addEventListener(content, 'keyup', handler);
+      addEventListener(content, 'mouseup', handler);
+      addEventListener(button, 'click', handler);
+    }
 
-      if (action.state)
-      {
-        var handler = function handler()
-        {
-          return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
-        };
-        addEventListener(content, 'keyup', handler);
-        addEventListener(content, 'mouseup', handler);
-        addEventListener(button, 'click', handler);
-      }
+    appendChild(actionbar, button);
+  });
 
-      appendChild(actionbar, button);
-    });
+  if (settings.styleWithCSS) exec('styleWithCSS');
+  exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
 
-    if (settings.styleWithCSS) exec('styleWithCSS');
-    exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
+  return settings.element;
+};
 
-    return settings.element;
-  };
-
-  var pell = { exec: exec, init: init };
-
-  exports.exec = exec;
-  exports.init = init;
-  exports['default'] = pell;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+export default {
+  exec,
+  init
+};
\ No newline at end of file
diff --git a/zero.Web.UI/components/forms/toggle.vue b/zero.Web.UI/components/forms/toggle.vue
index 5f49fbc1..636f8594 100644
--- a/zero.Web.UI/components/forms/toggle.vue
+++ b/zero.Web.UI/components/forms/toggle.vue
@@ -1,10 +1,10 @@
  <template>
-  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': value, 'is-content-left': contentLeft }">
-    <input type="checkbox" :value="value" @input="onChange" :disabled="disabled" />
-    <span class="ui-toggle-switch" :class="{ 'is-active': value }"><i></i></span>
-    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !value && offWarning"></i>
-    <span class="ui-toggle-text" v-if="onContent && value" v-localize="onContent"></span>
-    <span class="ui-toggle-text" v-if="offContent && !value" v-localize="offContent"></span>
+  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': modelValue, 'is-content-left': contentLeft }">
+    <input type="checkbox" :modelValue="modelValue" @update:modelValue="onChange" :disabled="disabled" />
+    <span class="ui-toggle-switch" :class="{ 'is-active': modelValue }"><i></i></span>
+    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !modelValue && offWarning"></i>
+    <span class="ui-toggle-text" v-if="onContent && modelValue" v-localize="onContent"></span>
+    <span class="ui-toggle-text" v-if="offContent && !modelValue" v-localize="offContent"></span>
   </div>
 </template>
 
@@ -16,7 +16,7 @@
     emits: ['input'],
 
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
         default: false
       },
@@ -50,7 +50,7 @@
 
       onChange(ev)
       {
-        this.$emit('input', !this.value);
+        this.$emit('input', !this.modelValue);
       }
     }
   }
diff --git a/zero.Web.UI/components/header-bar.vue b/zero.Web.UI/components/header-bar.vue
index 1ae17890..67c67ddb 100644
--- a/zero.Web.UI/components/header-bar.vue
+++ b/zero.Web.UI/components/header-bar.vue
@@ -26,49 +26,36 @@
 
 <script>
   import Overlay from '@zero/services/overlay.js';
+  import { useRouter } from 'vue-router';
 
   export default {
     name: 'uiHeaderBar',
 
     props: {
-      title: {
-        type: String
-      },
-      titleEmpty: {
-        type: String
-      },
-      prefix: {
-        type: String
-      },
-      suffix: {
-        type: String
-      },
-      count: {
-        type: Number,
-        default: 0
-      },
-      description: {
-        type: String
-      },
-      backButton: {
-        type: Boolean,
-        default: false
-      },
-      closeButton: {
-        type: Boolean,
-        default: false
-      }
+      title: String,
+      titleEmpty: String,
+      prefix: String,
+      suffix: String,
+      count: Number,
+      description: String,
+      backButton: Boolean,
+      closeButton: Boolean
     },
 
-    methods: {
-      onBack()
-      {
-        this.$router.go(-1);
-      },
-      onClose()
-      {
-        Overlay.close();
-      }
+    setup()
+    {
+      const router = useRouter();
+
+      return {
+        onBack()
+        {
+          router.go(-1);
+        },
+        onClose()
+        {
+          Overlay.close();
+        }
+      };
     }
   }
 </script>
diff --git a/zero.Web.UI/components/tabs/tabs.vue b/zero.Web.UI/components/tabs/tabs.vue
index 6eed4132..5525fb86 100644
--- a/zero.Web.UI/components/tabs/tabs.vue
+++ b/zero.Web.UI/components/tabs/tabs.vue
@@ -37,11 +37,12 @@
     created()
     {
       this.cacheKey = this.cache ? `zero.ui-tabs.cache.${this.cache}` : null;
-      this.tabs = this.$children;
     },
 
     mounted()
     {
+      this.tabs = this.$slots.default()[0].children.filter(x => x.type.name === 'uiTab');
+
       if (this.cache)
       {
         const cachedActiveTab = localStorage.getItem(this.cacheKey);
diff --git a/zero.Web.UI/config/router.config.js b/zero.Web.UI/config/router.config.js
index 24ef8d53..624e7bcb 100644
--- a/zero.Web.UI/config/router.config.js
+++ b/zero.Web.UI/config/router.config.js
@@ -1,10 +1,12 @@
 
-import { createRouter, createWebHistory } from "vue-router";
 import Localization from '@zero/services/localization.js';
+import SettingsRoutes from '@zero/pages/settings/routes.js';
+import { createRouter, createWebHistory } from "vue-router";
 import { isArray as _isArray, find as _find, map as _map, filter as _filter } from 'underscore';
 import { warn } from '@zero/services/debug.js';
 
 const routes = [];
+const routePrefix = '/pages';
 
 
 // add defined backoffice sections (with their children) to the router
@@ -32,13 +34,13 @@ zero.sections.forEach(section =>
 {
   if (!section.isExternal)
   {
-    addSection(section, () => import('@zero/pages/' + section.alias + '/' + section.alias + '.vue'));
+    addSection(section, () => import(routePrefix + '/' + section.alias + '/' + section.alias + '.vue'));
 
     if (section.children.length > 0)
     {
       section.children.forEach(child =>
       {
-        addSection(child, () => import('@zero/pages/' + section.alias + '/' + section.alias + '/' + child.alias + '.vue'), section);
+        addSection(child, () => import(routePrefix + '/' + section.alias + '/' + section.alias + '/' + child.alias + '.vue'), section);
       });
     }
   }
@@ -49,7 +51,7 @@ zero.sections.forEach(section =>
 
 routes.push({
   path: '/preview',
-  component: () => import('@zero/pages/preview.vue'),
+  component: () => import(routePrefix + '/preview.vue'),
   name: 'preview',
   meta: {
     name: '@preview.name'
@@ -59,50 +61,44 @@ routes.push({
 
 // find internal route definitions per section
 
-let addRoutesPerContext = (context, isPlugin) =>
+let addRouteTable = (config, isPlugin) =>
 {
-  context.keys().forEach((path) =>
+  let _routes = _isArray(config) ? config : config.routes;
+
+  _routes.forEach(route =>
   {
-    const routesDefinition = context(path);
-    const definition = routesDefinition.default || routesDefinition;
-    let _routes = _isArray(definition) ? definition : definition.routes;
+    const parentAlias = route.section || config.section;
+    const isChild = typeof parentAlias === 'string';
+    const parentRoute = isChild ? _find(routes, r => r.meta.alias === parentAlias) : null;
 
-    _routes.forEach(route =>
+    // could not append routes to a section
+    if (isChild && !parentRoute)
     {
-      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)
       {
-        if (_routes.length > 0)
-        {
-          warn(`router: Could not find section "${definition.section}" in route definition file ${path}`);
-        }
+        warn(`router: Could not find section "${config.section}" in route definition file ${path}`);
       }
-      // append routes to a section
-      else if (isChild)
+    }
+    // append routes to a section
+    else if (isChild)
+    {
+      if (!parentRoute.children)
       {
-        if (!parentRoute.children)
-        {
-          parentRoute.children = [];
-        }
-        parentRoute.children.push(route);
+        parentRoute.children = [];
       }
-        // add routes to root
-      else
-      {
-        routes.push(route);
-      }
-    });
+      parentRoute.children.push(route);
+    }
+      // add routes to root
+    else
+    {
+      routes.push(route);
+    }
   });
 };
 
 
-
 // add internal route extensions
-//addRoutesPerContext(require.context('zero/pages', true, /routes\.js$/));
+addRouteTable(SettingsRoutes);
 
 // add plugin route extensions
 //try
@@ -120,7 +116,7 @@ let addRoutesPerContext = (context, isPlugin) =>
 
 // add fallback route (this should probably by 404 page)
 
-routes.push({ name: '404', path: '/:pathMatch(.*)*', component: () => import('@zero/pages/notfound.vue') });
+routes.push({ name: '404', path: '/:pathMatch(.*)*', component: () => import(routePrefix + '/notfound.vue') });
 
 
 
@@ -186,6 +182,7 @@ const beforeEach = (to, from, next) =>
   }
 };
 
+
 // create the router with history mode
 export default createRouter({
   history: createWebHistory(zero.path),
@@ -195,6 +192,6 @@ export default createRouter({
   beforeEach: beforeEach,
   scrollBehavior(to, from, savedPosition)
   {
-    return savedPosition ? savedPosition : { x: 0, y: 0 };
+    return savedPosition ? savedPosition : { top: 0, left: 0 };
   }
 });
\ No newline at end of file
diff --git a/zero.Web.UI/config/zero.config.js b/zero.Web.UI/config/zero.config.js
index d574a55b..2a3a3caf 100644
--- a/zero.Web.UI/config/zero.config.js
+++ b/zero.Web.UI/config/zero.config.js
@@ -2,6 +2,8 @@
 window.zero = window.zero || {};
 window.zero.config = window.zero.config || {};
 
+window.zero.config.shared = true;
+
 window.zero.config.media = {
   defaults: {
     images: ['.jpg', '.jpeg', '.png', '.webp', '.svg'],
diff --git a/zero.Web.UI/editor/editor-component.vue b/zero.Web.UI/editor/editor-component.vue
index 3e2f2ba1..66cd4e95 100644
--- a/zero.Web.UI/editor/editor-component.vue
+++ b/zero.Web.UI/editor/editor-component.vue
@@ -119,11 +119,11 @@
         {
           if (this.config.path.indexOf('@zero') === 0)
           {
-            return import(`zero/` + this.config.path.substring(6));
+            return import(`/` + this.config.path.substring(6));
           }
           else if (this.config.path.indexOf('@shop') === 0) // TODO common system for plugins
           {
-            return import(`shop/` + this.config.path.substring(6));
+            return import(`/` + this.config.path.substring(6));
           }
           else
           {
@@ -132,15 +132,15 @@
         }
         else if (this.view === 'renderer')
         {
-          return import(`zero/editor/editor`);
+          return import(`/editor/editor.vue`);
         }
         else if (this.isStatic)
         {
-          return import(`zero/editor/fields/static/${this.view.toLowerCase()}`);
+          return import(`/editor/fields/static/${this.view.toLowerCase()}.vue`);
         }
         else
         {
-          return import(`zero/editor/fields/${this.view.toLowerCase()}`);
+          return import(`/editor/fields/${this.view.toLowerCase()}.vue`);
         }
       }
 
diff --git a/zero.Web.UI/editor/editor.vue b/zero.Web.UI/editor/editor.vue
index 2381f5e7..571882ec 100644
--- a/zero.Web.UI/editor/editor.vue
+++ b/zero.Web.UI/editor/editor.vue
@@ -2,14 +2,16 @@
   <div>
     <div class="editor-outer" v-if="loaded && !rendererNotFound" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested, 'is-page': isPage }" :renderer="config">
       <ui-tabs class="editor" :active="activeTab">
-        <ui-tab v-if="!tabDisabled(tab)" class="ui-box" :class="tab.class" :label="tab.label" :count="tab.count(value)" v-for="(tab, index) in tabs" :key="index" :depth="depth" :name="tab.name">
-          <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" :renderer="configuration" v-model="value" @input="onChange" :meta="meta" :depth="depth" :disabled="disabled" />
-          <component v-if="tab.component" :is="tab.component" v-model="value" :disabled="disabled" />
+        <ui-tab class="ui-box" :class="tab.class" :label="tab.label" :count="tab.count(modelValue)" v-for="(tab, index) in tabs" :key="index" :depth="depth" :name="tab.name">
+          <div v-if="!tabDisabled(tab)">
+            <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" :renderer="configuration" v-model="modelValue" @input="onChange" :meta="meta" :depth="depth" :disabled="disabled" />
+            <component v-if="tab.component" :is="tab.component" v-model="modelValue" :disabled="disabled" />
+          </div>
         </ui-tab>
       </ui-tabs>
       <aside v-if="!nested && infos && infos != 'none'" class="editor-infos">
         <slot name="info-boxes"></slot>
-        <div class="ui-box" v-if="isShared" :class="{'is-active': value.isActive }">
+        <div class="ui-box" v-if="isShared" :class="{'is-active': modelValue.isActive }">
           <div class="editor-global-flag">
             <i class="fth-radio"></i>
             <p>
@@ -17,27 +19,27 @@
               <!--<a href="/">Edit parent</a>-->
             </p>
           </div>
-          <ui-button type="light small" label="Settings" @click="editBlueprint(value.blueprint)" />
-          <ui-button type="light small" label="Edit parent" @click="editBlueprint(value.blueprint)" />
+          <ui-button type="light small" label="Settings" @click="editBlueprint(modelValue.blueprint)" />
+          <ui-button type="light small" label="Edit parent" @click="editBlueprint(modelValue.blueprint)" />
         </div>
-        <div class="ui-box editor-active-toggle" v-if="activeToggle" :class="{'is-active': value.isActive }">
+        <div class="ui-box editor-active-toggle" v-if="activeToggle" :class="{'is-active': modelValue.isActive }">
           <slot name="settings">
             <ui-property v-if="activeToggle" label="@ui.active" :is-text="true" class="is-toggle">
-              <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
+              <ui-toggle v-model="modelValue.isActive" class="is-primary" :disabled="disabled" />
             </ui-property>
           </slot>
           <slot name="settings-properties"></slot>
         </div>
-        <div class="ui-box is-light" v-if="value.id">
+        <div class="ui-box is-light" v-if="modelValue.id">
           <slot name="infos">
-            <ui-property v-if="value.id" label="@ui.id" :is-text="true">
-              {{value.id}}
+            <ui-property v-if="modelValue.id" label="@ui.id" :is-text="true">
+              {{modelValue.id}}
             </ui-property>
-            <ui-property v-if="value.id && value.lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
-              <ui-date v-model="value.lastModifiedDate" />
+            <ui-property v-if="modelValue.id && modelValue.lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
+              <ui-date v-model="modelValue.lastModifiedDate" />
             </ui-property>
-            <ui-property v-if="value.id" label="@ui.createdDate" :is-text="true">
-              <ui-date v-model="value.createdDate" />
+            <ui-property v-if="modelValue.id" label="@ui.createdDate" :is-text="true">
+              <ui-date v-model="modelValue.createdDate" />
             </ui-property>
             <slot name="infos-more"></slot>
           </slot>
@@ -74,7 +76,7 @@
         type: Object,
         default: () => { }
       },
-      value: {
+      modelValue: {
         type: Object
       },
       infos: {
@@ -126,7 +128,7 @@
     computed: {
       isShared()
       {
-        return this.value && this.value.blueprint != null;
+        return this.modelValue && this.modelValue.blueprint != null;
       }
     },
 
@@ -209,7 +211,8 @@
 
       onChange()
       {
-        this.$emit('input', this.value);
+        this.$emit('input', this.modelValue);
+        this.$emit('update:modelValue', this.modelValue);
       },
 
 
@@ -220,7 +223,7 @@
           return false;
         }
 
-        return tab.disabled(this.value);
+        return tab.disabled(this.modelValue);
       },
 
 
diff --git a/zero.Web.UI/navigation.vue b/zero.Web.UI/navigation.vue
index 8bfc925e..1f5b5c86 100644
--- a/zero.Web.UI/navigation.vue
+++ b/zero.Web.UI/navigation.vue
@@ -32,7 +32,7 @@
       <button type="button" class="app-nav-item" @click="$refs.iconpicker.pick()">
         <i class="app-nav-item-icon fth-droplet"></i> Icons
       </button>
-      <icon-picker ref="iconpicker" :output="false" />
+      <ui-iconpicker ref="iconpicker" :output="false" />
     </nav>
 
     <footer class="app-nav-account" v-if="user">     
@@ -59,7 +59,6 @@
   import { map as _map, find as _find } from 'underscore';
   import AuthApi from '@zero/services/auth.js'
   import MediaApi from '@zero/resources/media.js'
-  import IconPicker from '@zero/components/pickers/iconPicker/iconpicker.vue';
   import EventHub from '@zero/services/eventhub.js';
 
   export default {
@@ -74,9 +73,6 @@
     }),
 
 
-    components: { IconPicker },
-
-
     computed: {
       currentApplication()
       {
diff --git a/zero.Web.UI/pages/login/login.vue b/zero.Web.UI/pages/login/login.vue
index 8530bf72..c1d87917 100644
--- a/zero.Web.UI/pages/login/login.vue
+++ b/zero.Web.UI/pages/login/login.vue
@@ -2,7 +2,7 @@
   <div class="app-auth">
     <i class="fth-home app-auth-font-trigger"></i>
     <span></span>
-    <ui-form class="app-auth-inner" v-slot="form" @submit="onSubmit">
+    <ui-form v-slot="{ state }" class="app-auth-inner" @submit="onSubmit">
       <div>
         <img class="app-auth-image" src="/Assets/zero-2-light.png" v-localize:alt="'@zero.name'" />
 
@@ -20,7 +20,7 @@
       </div>
 
       <div class="app-auth-bottom">
-        <ui-button type="primary" :submit="true" label="@login.button" :state="form.state" />
+        <ui-button type="primary" :submit="true" label="@login.button" :state="state" />
         <ui-button type="blank" label="@login.button_forgot" />
       </div>
     </ui-form>
diff --git a/zero.Web.UI/pages/media/media.vue b/zero.Web.UI/pages/media/media.vue
index fe5c4405..cf15e0f5 100644
--- a/zero.Web.UI/pages/media/media.vue
+++ b/zero.Web.UI/pages/media/media.vue
@@ -37,7 +37,7 @@
 
       <div class="ui-view-box">
         <div class="media-items">
-          <ui-datagrid ref="grid" v-model="gridConfig" @select="onSelected" @count="count = $event">
+          <ui-datagrid ref="grid" :config="gridConfig" @select="onSelected" @count="count = $event">
             <template v-slot:actions="props">
               <ui-dropdown-button v-if="props.item && props.item.isFolder" label="@ui.open.title" icon="fth-arrow-right" @click="goToFolder(props.item.id)" />
               <ui-dropdown-button label="@ui.edit.title" icon="fth-edit-2" @click="edit(props.item, props.item.isFolder)" />
diff --git a/zero.Web.UI/pages/pages/recyclebin/recyclebin.vue b/zero.Web.UI/pages/pages/recyclebin/recyclebin.vue
index 04c4bf0e..91503ce0 100644
--- a/zero.Web.UI/pages/pages/recyclebin/recyclebin.vue
+++ b/zero.Web.UI/pages/pages/recyclebin/recyclebin.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="pages-recyclebin">
     <ui-header-bar title="@recyclebin.name" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :config="tableConfig" />
       <ui-button type="light onbg" label="@recyclebin.purge" @click="purge" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table ref="table" v-model="tableConfig" @count="count = $event" />
+      <ui-table ref="table" :config="tableConfig" @count="count = $event" />
     </div>
   </div>
 </template>
diff --git a/zero.Web.UI/pages/settings/application.vue b/zero.Web.UI/pages/settings/application.vue
index f6e2b849..27289758 100644
--- a/zero.Web.UI/pages/settings/application.vue
+++ b/zero.Web.UI/pages/settings/application.vue
@@ -1,6 +1,6 @@
 <template>
   <ui-form ref="form" class="application" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model="model" title="@application.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
+    <ui-form-header v-model="model" title="@application.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" :active-toggle="true" />
     <ui-editor config="application" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
diff --git a/zero.Web.UI/pages/settings/applications-items.vue b/zero.Web.UI/pages/settings/applications-items.vue
index 7f503c31..fc7c4e7f 100644
--- a/zero.Web.UI/pages/settings/applications-items.vue
+++ b/zero.Web.UI/pages/settings/applications-items.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="apps-items">
-    <router-link v-for="app in items" :key="app.id" :to="getAppLink(app)" class="apps-item">
+    <router-link v-for="app in apps" :key="app.id" :to="app.link" class="apps-item">
       <strong class="apps-item-name">{{app.name}}</strong>
       <span class="apps-item-minor">{{app.domains[0]}}</span>
-      <span class="apps-item-status" :class="{ 'is-active': app.isActive }" v-localize="getStatus(app)"></span>
+      <span class="apps-item-status" :class="{ 'is-active': app.isActive }" v-localize="app.statusLocalization"></span>
     </router-link>
-    <router-link :to="getAddLink()" class="apps-items-add">
+    <router-link :to="{ name: addLink }" class="apps-items-add">
       <i class="fth-plus"></i>
     </router-link>
   </div>
@@ -13,36 +13,42 @@
 
 
 <script>
-  const baseRoute = zero.alias.sections.settings + '-' + zero.alias.settings.applications;
+  import { ref, computed, watch } from 'vue';
 
   export default {
+
     props: {
-      items: {
-        type: Array,
-        default: () => []
-      }
+      items: Array
     },
 
-    methods: {
+    setup(props)
+    {
+      const baseRoute = zero.alias.sections.settings + '-' + zero.alias.settings.applications;
+      const addLink = computed(() => baseRoute + '-create');
+      const apps = ref();
 
-      getAppLink(item)
+      const buildItems = items =>
       {
-        return {
-          name: baseRoute + '-edit',
-          params: { id: item.id }
-        };
-      },
+        apps.value = props.items.map(x =>
+        {
+          return {
+            ...x,
+            link: {
+              name: baseRoute + '-edit',
+              params: { id: x.id }
+            },
+            statusLocalization: x.isActive ? '@ui.active' : '@ui.inactive'
+          };
+        });
+      };
 
-      getStatus(item)
-      {
-        return item.isActive ? '@ui.active' : '@ui.inactive';
-      },
-
-      getAddLink()
-      {
-        return { name: baseRoute + '-create' };
-      }
+      buildItems(props.items);
+      watch(() => props.items, val => buildItems(val));
 
+      return {
+        apps,
+        addLink
+      };
     }
   }
 </script>
diff --git a/zero.Web.UI/pages/settings/applications.vue b/zero.Web.UI/pages/settings/applications.vue
index bb58d0ea..b738eea0 100644
--- a/zero.Web.UI/pages/settings/applications.vue
+++ b/zero.Web.UI/pages/settings/applications.vue
@@ -2,31 +2,36 @@
   <div class="apps">
     <ui-header-bar title="@application.list" :count="count" :back-button="true" />
     <div class="ui-blank-box">
-      <applications-items v-model:items="apps" />
+      <applications-items v-model:items="items" />
     </div>
   </div>
 </template> 
 
 
 <script>
-  import ApplicationsItems from '@zero/pages/settings/applications-items.vue'
-  import ApplicationsApi from '@zero/resources/applications.js'
+  import ApplicationsItems from '@zero/pages/settings/applications-items.vue';
+  import ApplicationsApi from '@zero/resources/applications.js';
+  import { ref, onBeforeMount } from 'vue';
 
   export default {
-    data: () => ({
-      count: 0,
-      apps: []
-    }),
-
     components: { ApplicationsItems },
 
-    mounted()
+    setup()
     {
-      ApplicationsApi.getAll().then(response =>
+      const count = ref(0);
+      const items = ref([]);
+
+      onBeforeMount(async () =>
       {
-        this.apps = response.items;
-        this.count = response.totalItems;
+        const res = await ApplicationsApi.getAll();
+        count.value = res.totalItems;
+        items.value = res.items;
       });
+
+      return {
+        count,
+        items
+      };
     }
   }
 </script>
diff --git a/zero.Web.UI/pages/settings/countries.vue b/zero.Web.UI/pages/settings/countries.vue
index a82a5d67..8a9cd0ac 100644
--- a/zero.Web.UI/pages/settings/countries.vue
+++ b/zero.Web.UI/pages/settings/countries.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="countries">
     <ui-header-bar title="@country.list" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :config="tableConfig" />
       <ui-add-button :route="createRoute" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table ref="table" v-model="tableConfig" @count="count = $event" />
+      <ui-table ref="table" :config="tableConfig" @count="count = $event" />
     </div>
   </div>
 </template>
diff --git a/zero.Web.UI/pages/settings/languages.vue b/zero.Web.UI/pages/settings/languages.vue
index 05f5839c..a81c824f 100644
--- a/zero.Web.UI/pages/settings/languages.vue
+++ b/zero.Web.UI/pages/settings/languages.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="languages">
     <ui-header-bar title="@language.list" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :config="tableConfig" />
       <ui-add-button :route="createRoute" :decision="false" :shared="true" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table v-model="tableConfig" @count="count = $event" />
+      <ui-table :config="tableConfig" @count="count = $event" />
     </div>
   </div>
 </template>
diff --git a/zero.Web.UI/pages/settings/routes.js b/zero.Web.UI/pages/settings/routes.js
index 5a3fd4e5..80e8dfbf 100644
--- a/zero.Web.UI/pages/settings/routes.js
+++ b/zero.Web.UI/pages/settings/routes.js
@@ -1,6 +1,8 @@
-import { map as _map, find as _find, isArray as _isArray } from 'underscore';
+
+import { map as _map, find as _find, isArray as _isArray } from 'underscore';
 
 const alias = zero.alias.sections.settings;
+const routePrefix = '/pages';
 const section = _find(zero.sections, section => section.alias === alias);
 let routes = [];
 
@@ -37,7 +39,7 @@ if (section)
       routes.push({
         path: area.url,
         name: alias + '-' + area.alias,
-        component: () => import(`zero/pages/${alias}/${area.alias}.vue`),
+        component: () => import(`/pages/${alias}/${area.alias}.vue`),
         meta: {
           name: [area.name, section.name]
         }
@@ -74,7 +76,7 @@ if (section)
         routes.push({
           path: area.url + '/' + path + (!isCreate ? '/:id' : '/:scope?'),
           name: alias + '-' + area.alias + '-' + path.replace('/', '-'),
-          component: () => import(`zero/pages/${alias}/${detail.view}.vue`),
+          component: () => import(`${routePrefix}/${alias}/${detail.view}.vue`),
           props: true,
           meta: {
             create: isCreate,
diff --git a/zero.Web.UI/pages/settings/settings.vue b/zero.Web.UI/pages/settings/settings.vue
index c25b5f4f..d46557a2 100644
--- a/zero.Web.UI/pages/settings/settings.vue
+++ b/zero.Web.UI/pages/settings/settings.vue
@@ -2,7 +2,7 @@
   <div class="settings">
     <div class="settings-group" v-if="false && apps.length > 0">
       <h2 class="ui-headline settings-group-headline" v-localize="'@application.list'"></h2>
-      <applications-items v-model="apps" />
+      <applications-items :items="apps" />
     </div>
     <div class="settings-group" v-for="group in groups">
       <h2 class="ui-headline settings-group-headline" v-localize="group.name"></h2>
@@ -25,31 +25,34 @@
 
 
 <script>
-  import ApplicationsItems from '@zero/pages/settings/applications-items.vue'
+  import ApplicationsItems from '@zero/pages/settings/applications-items.vue';
   import SettingsApi from '@zero/resources/settings.js';
+  import { ref, onBeforeMount } from 'vue';
 
   export default {
-    name: 'app-settings',
-
     components: { ApplicationsItems },
 
-    data: () => ({
-      page: true,
-      groups: [],
-      apps: [],
-      tokens: {
+    setup()
+    {
+      const groups = ref();
+      const apps = ref();
+      const tokens = ref({
         'zero_version': zero.version,
         'plugin_count': zero.pluginCount
-      }
-    }),
-
-    mounted()
-    {
-      SettingsApi.getAreas().then(response =>
-      {
-        this.groups = response.groups;
-        this.apps = response.applications;
       });
+
+      onBeforeMount(async () =>
+      {
+        const areas = await SettingsApi.getAreas();
+        groups.value = areas.groups;
+        apps.value = areas.applications;
+      });
+
+      return {
+        groups,
+        apps,
+        tokens
+      }
     }
   }
 </script>
diff --git a/zero.Web.UI/pages/settings/translations.vue b/zero.Web.UI/pages/settings/translations.vue
index 6a3c7cf7..75004c4c 100644
--- a/zero.Web.UI/pages/settings/translations.vue
+++ b/zero.Web.UI/pages/settings/translations.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="translations">
     <ui-header-bar title="@translation.list" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :config="tableConfig" />
       <ui-add-button :route="createRoute" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table v-model="tableConfig" @count="count = $event" />
+      <ui-table :config="tableConfig" @count="count = $event" />
     </div>
   </div>
 </template>
diff --git a/zero.Web.UI/pages/settings/users.vue b/zero.Web.UI/pages/settings/users.vue
index 07775f5d..52fc5768 100644
--- a/zero.Web.UI/pages/settings/users.vue
+++ b/zero.Web.UI/pages/settings/users.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="users">
     <ui-header-bar title="Users & Permissions" :back-button="true">
-      <ui-table-filter v-model="usersConfig" />
+      <ui-table-filter :config="usersConfig" />
       <ui-add-button type="light onbg" :route="createRoleRoute" label="Add role" />
       <ui-button type="primary" label="Add user" />
     </ui-header-bar>
@@ -19,7 +19,7 @@
 
     <div class="ui-blank-box">
       <h2 class="ui-headline users-group-headline" v-localize="'@user.users'"></h2>
-      <ui-table v-model="usersConfig" />
+      <ui-table :config="usersConfig" />
     </div>
   </div>
 </template>
diff --git a/zero.Web.UI/pages/spaces/views/list.vue b/zero.Web.UI/pages/spaces/views/list.vue
index 1755255d..eaca321e 100644
--- a/zero.Web.UI/pages/spaces/views/list.vue
+++ b/zero.Web.UI/pages/spaces/views/list.vue
@@ -1,11 +1,11 @@
 <template>
   <div v-if="!loading" class="space-list">
     <ui-header-bar :title="space.name" :count="count" title-empty="List">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :config="tableConfig" />
       <ui-add-button :route="createRoute" :decision="canCreateShared" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table v-model="tableConfig" @count="count = $event" />
+      <ui-table :config="tableConfig" @count="count = $event" />
     </div>
   </div>
 </template>
diff --git a/zero.Web.UI/renderers/application.js b/zero.Web.UI/renderers/application.js
index f4a61661..52bd2613 100644
--- a/zero.Web.UI/renderers/application.js
+++ b/zero.Web.UI/renderers/application.js
@@ -71,7 +71,7 @@
       tab: 'features',
       field: 'features',
       display: 'custom',
-      path: '@zero/pages/settings/application-features.vue'
+      path: '/pages/settings/application-features.vue'
     }
   ]
 };
\ No newline at end of file
diff --git a/zero.Web.UI/renderers/register.js b/zero.Web.UI/renderers/register.js
index 81f1ea17..914fe917 100644
--- a/zero.Web.UI/renderers/register.js
+++ b/zero.Web.UI/renderers/register.js
@@ -1,24 +1,23 @@
 
-zero.renderers = zero.renderers || {};
+let imports = [
+  () => import(`./application.js`),
+  () => import('./country.js'),
+  () => import('./language.js'),
+  () => import('./media.js'),
+  () => import('./translation.js'),
+  () => import('./user.js'),
+  () => import('./userRole.js')
+];
 
-export default function (app)
+export default function (renderers)
 {
-  const requireComponent = require.context('.', true, /[\w-]+\.js/);
-
-  requireComponent.keys().forEach(path =>
+  imports.forEach(path =>
   {
-    let pathParts = path.split('/');
-    let fileName = pathParts[pathParts.length - 1].split('.')[0];
-
-    if (fileName === 'register')
+    path().then(resolved =>
     {
-      return;
-    }
-
-    const componentConfig = requireComponent(path);
-    const config = componentConfig.default || componentConfig;
-    const alias = config.alias;
-
-    zero.renderers[alias] = config;
+      const config = resolved.default || resolved;
+      const alias = config.alias;
+      renderers[alias] = config;
+    });
   });
 };
\ No newline at end of file
diff --git a/zero.Web.UI/renderers/user.js b/zero.Web.UI/renderers/user.js
index 33c97f65..4efcf739 100644
--- a/zero.Web.UI/renderers/user.js
+++ b/zero.Web.UI/renderers/user.js
@@ -1,4 +1,5 @@
-import { filter as _filter } from 'underscore';
+
+import { filter as _filter } from 'underscore';
 
 export default {
   alias: 'user',
diff --git a/zero.Web.UI/renderers/userRole.js b/zero.Web.UI/renderers/userRole.js
index b5576e6a..89af3625 100644
--- a/zero.Web.UI/renderers/userRole.js
+++ b/zero.Web.UI/renderers/userRole.js
@@ -1,4 +1,5 @@
-import { filter as _filter } from 'underscore';
+
+import { filter as _filter } from 'underscore';
 
 export default {
   alias: 'userRole',