diff --git a/zero.Web.UI/App/components/forms/check-list.vue b/zero.Web.UI/App/components/forms/check-list.vue
index 112a0fd6..c7c0758f 100644
--- a/zero.Web.UI/App/components/forms/check-list.vue
+++ b/zero.Web.UI/App/components/forms/check-list.vue
@@ -3,7 +3,7 @@
     <label v-for="item in list" class="ui-native-check ui-check-list-item">
       <input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" :disabled="disabled" />
       <span class="ui-native-check-toggle"></span>
-      <span v-localize="item.name"></span>
+      <span v-localize="item[labelKey]"></span>
     </label>
   </div>
 </template>
@@ -32,13 +32,18 @@
         type: Boolean,
         default: false
       },
-      maxItems: {
+      limit: {
         type: Number,
         default: 100
       },
-      reverse: {
-        type: Boolean,
-        default: false
+      reverse: Boolean,
+      labelKey: {
+        type: String,
+        default: 'value'
+      },
+      idKey: {
+        type: String,
+        default: 'key'
       }
     },
 
@@ -81,18 +86,18 @@
 
       isChecked(item)
       {
-        let index = this.value.indexOf(item.id);
+        let index = this.value.indexOf(item[this.idKey]);
         return (!this.reverse && index > -1) || (this.reverse && index < 0);
       },
 
       onChange(item)
       {
-        let index = this.value.indexOf(item.id);
+        let index = this.value.indexOf(item[this.idKey]);
         let value = JSON.parse(JSON.stringify(this.value));
 
         if (index < 0)
         {
-          value.push(item.id);
+          value.push(item[this.idKey]);
         }
         else
         {
diff --git a/zero.Web.UI/App/config/router.config.js b/zero.Web.UI/App/config/router.config.js
index b3697ca5..260a099a 100644
--- a/zero.Web.UI/App/config/router.config.js
+++ b/zero.Web.UI/App/config/router.config.js
@@ -67,7 +67,7 @@ export default {
   base: __zero.path,
   linkActiveClass: 'is-active',
   linkExactActiveClass: 'is-active-exact',
-  beforeEach: beforeEach,
+  //beforeEach: beforeEach,
   scrollBehavior(to, from, savedPosition)
   {
     return savedPosition ? savedPosition : { x: 0, y: 0 };
diff --git a/zero.Web.UI/App/core/editor-field.js b/zero.Web.UI/App/core/editor-field.js
index ec1dc1f8..dcaa06e1 100644
--- a/zero.Web.UI/App/core/editor-field.js
+++ b/zero.Web.UI/App/core/editor-field.js
@@ -98,6 +98,17 @@ class EditorField
   }
 
 
+  /**
+   * Conditionally render this field (this is an alternative method to the field options 'condition')
+   * @param {function} condition - function which returns a boolean and gets passed the current model
+   */
+  when(condition)
+  {
+    this.options.condition = condition;
+    return this;
+  }
+
+
   /**
    * Render a custom component
    * @param {object} component - The custom vue component
@@ -220,13 +231,16 @@ class EditorField
   /**
    * Renders an input which generates an alias for a given name or an alternative custom alias
    * @param {EditorSelectItem[]|function} items - Set items to choose from, either via an array or a promise which returns such array
-   * @param {number} [limit=100] - Maximum items to be checked
-   * @param {boolean} [reverse] - Reverse the checklist behaviour, so all items are checked by default and unchecking them adds them to the result list
+   * @param {object} [options] - Custom options
+   * @param {number} [options.limit=100] - Maximum items to be checked
+   * @param {boolean} [options.reverse=false] - Reverse the checklist behaviour, so all items are checked by default and unchecking them adds them to the result list
+   * @param {string} [options.labelKey=value] - Object key to get the label
+   * @param {string} [options.idKey=key] - Object key to get the id
    * @returns {EditorField}
    */
-  checkList(items, limit)
+  checkList(items, options)
   {
-    return this._setComponent(Checklist, { items, limit, reverse });
+    return this._setComponent(Checklist, { items, ...options });
   }
 
 
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index a2b3f981..10584376 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-property v-if="!isHidden" :field="config.path" :label="label" :hide-label="config.options.hideLabel" 
                :description="description" :required="isRequired">
-    <component :is="config.component" v-bind="config.componentOptions" :value="model" @input="onChange" />
+    <component :is="config.component" v-bind="config.componentOptions" :value="model" :entity="value" @input="onChange" />
     <p v-if="config.options.helpText" class="ui-property-help" v-localize="config.options.helpText"></p>
   </ui-property>
 </template>
diff --git a/zero.Web.UI/App/editor/editor-overlay.vue b/zero.Web.UI/App/editor/editor-overlay.vue
index f51f7314..450be617 100644
--- a/zero.Web.UI/App/editor/editor-overlay.vue
+++ b/zero.Web.UI/App/editor/editor-overlay.vue
@@ -14,7 +14,7 @@
       <ui-loading v-if="loading" :is-big="true" />
 
       <div v-if="!loading" class="ui-editor-overlay-editor">
-        <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
+        <ui-editor :config="editor" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
       </div>
 
     </ui-overlay-editor>
@@ -39,6 +39,7 @@
       id: null,
       loading: true,
       state: 'default',
+      editor: null,
       meta: {},
       model: {}
     }),
@@ -50,6 +51,7 @@
       {
         this.isAdd = this.config.create === true;
         this.model = JSON.parse(JSON.stringify(this.config.model));
+        this.editor = this.config.editor;
         this.loading = false;
       },
 
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index 4fa661de..20b5af8d 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -13,7 +13,6 @@
 
 <script>
   import EditorComponent from 'zero/editor/editor-component.vue';
-  import Editor from 'zero/core/editor.js';
 
   export default {
     name: 'uiEditor',
@@ -28,7 +27,7 @@
 
     props: {
       config: {
-        type: [String, Editor],
+        type: [String, Object],
         required: true
       },
       meta: {
diff --git a/zero.Web.UI/App/editor/fields/checklist.vue b/zero.Web.UI/App/editor/fields/checklist.vue
index ea53274c..2ec1e860 100644
--- a/zero.Web.UI/App/editor/fields/checklist.vue
+++ b/zero.Web.UI/App/editor/fields/checklist.vue
@@ -1,5 +1,11 @@
 <template>
-  <ui-check-list :value="value" @input="$emit('input', $event)" :reverse="config.reverse" :items="config.items" :disabled="disabled" />
+  <ui-check-list :value="value" @input="$emit('input', $event)" 
+                 :reverse="reverse" 
+                 :items="items" 
+                 :limit="limit"
+                 :label-key="labelKey"
+                 :id-key="idKey"
+                 :disabled="disabled" />
 </template>
 
 <script>
@@ -13,7 +19,23 @@
         type: Boolean,
         default: false
       },
-      config: Object
+      items: {
+        type: [Array, Function, Promise],
+        required: true
+      },
+      limit: {
+        type: Number,
+        default: 100
+      },
+      reverse: Boolean,
+      labelKey: {
+        type: String,
+        default: 'value'
+      },
+      idKey: {
+        type: String,
+        default: 'key'
+      }
     },
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/countrypicker.vue b/zero.Web.UI/App/editor/fields/countrypicker.vue
index 27a347e0..ce74b036 100644
--- a/zero.Web.UI/App/editor/fields/countrypicker.vue
+++ b/zero.Web.UI/App/editor/fields/countrypicker.vue
@@ -1,19 +1,17 @@
 <template>
-  <ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="config.limit || 1" :disabled="disabled" />
+  <ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="limit" :disabled="disabled" />
 </template>
 
 
 <script>
   export default {
     props: {
-      value: {
-        type: [String, Array]
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      config: Object
+      value: [String, Array],
+      disabled: Boolean,
+      limit: {
+        type: Number,
+        default: 1
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/currency.vue b/zero.Web.UI/App/editor/fields/currency.vue
index 4de742da..ff54fbd4 100644
--- a/zero.Web.UI/App/editor/fields/currency.vue
+++ b/zero.Web.UI/App/editor/fields/currency.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-box">
-    <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="config.placeholder" :maxlength="maxLength" :disabled="disabled" />
+    <input :value="value" @input="$emit('input', +$event.target.value)" type="text" class="ui-input" v-localize:placeholder="placeholder" :disabled="disabled" />
   </div>
 </template>
 
@@ -12,18 +12,11 @@
         type: Number,
         default: null
       },
-      config: Object,
       disabled: {
         type: Boolean,
         default: false
-      }
+      },
+      placeholder: String
     },
-
-    computed: {
-      maxLength()
-      {
-        return this.config.maxLength > 0 ? this.config.maxLength : null;
-      }
-    }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/nested.vue b/zero.Web.UI/App/editor/fields/nested.vue
index 02996348..693076fc 100644
--- a/zero.Web.UI/App/editor/fields/nested.vue
+++ b/zero.Web.UI/App/editor/fields/nested.vue
@@ -2,11 +2,11 @@
   <div class="editor-nested" :depth="depth">
     <div class="ui-pick-previews" v-if="items.length">
       <div v-for="(item, index) in items" class="ui-pick-preview">
-        <ui-select-button :icon="config.icon" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
+        <ui-select-button :icon="getIcon(item)" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
         <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" />
       </div>
     </div>
-    <ui-select-button v-if="limit > items.length" icon="fth-plus" :label="config.addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
+    <ui-select-button v-if="limit > items.length" icon="fth-plus" :label="addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
   </div>
 </template>
 
@@ -14,55 +14,74 @@
   import UiEditor from 'zero/editor/editor';
   import UiEditorOverlay from 'zero/editor/editor-overlay';
   import Overlay from 'zero/services/overlay';
+  import Editor from 'zero/core/editor.js';
 
   export default {
 
     components: { UiEditor },
 
     props: {
-      value: {
-        type: [Array, Object]
+      value: [Array, Object],
+      meta: Object,
+      depth: Number,
+      disabled: Boolean,
+      editor: {
+        type: Editor,
+        required: true
       },
-      meta: {
-        type: Object,
-        default: () => { }
-      },
-      depth: {
+      limit: {
         type: Number,
-        default: 0
+        default: 100
       },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      config: Object
+      title: String,
+      addLabel: String,
+      itemLabel: Function,
+      itemDescription: Function,
+      itemIcon: [String, Function],
+      template: {
+        type: Object,
+        required: true
+      }
+    },
+
+    watch: {
+      value: {
+        deep: true,
+        handler(val)
+        {
+          this.setup();
+        }
+      }
     },
 
 
     data: () => ({
       items: [],
-      limit: 100,
       multiple: false
     }),
 
 
     mounted()
     {
-      this.items = JSON.parse(JSON.stringify(this.value));
-      this.limit = this.config.limit || this.limit;
-      this.multiple = this.limit > 1;
-      if (!this.multiple)
-      {
-        this.items = this.items ? [this.items] : [];
-      }
+      this.setup();
     },
 
 
     methods: {
 
+      setup()
+      {
+        this.items = JSON.parse(JSON.stringify(this.value)) || [];
+        this.multiple = this.limit > 1;
+        if (!this.multiple)
+        {
+          this.items = this.items ? [this.items] : [];
+        }
+      },
+
       getNewItem()
       {
-        return JSON.parse(JSON.stringify(this.config.template || {}));
+        return JSON.parse(JSON.stringify(this.template || {}));
       },
 
       addItem()
@@ -82,8 +101,8 @@
         return Overlay.open({
           component: UiEditorOverlay,
           display: 'editor',
-          renderer: this.config.renderer,
-          title: this.config.title || '@ui.edit.title',
+          editor: this.editor,
+          title: this.title || '@ui.edit.title',
           model: item,
           width: 1100,
           create: isAdd
@@ -119,13 +138,19 @@
 
       getName(item)
       {
-        return this.config.item && typeof this.config.item.label === 'function' ? this.config.item.label(item) : 'Item';
+        return typeof this.itemLabel === 'function' ? this.itemLabel(item) : 'Item';
       },
 
 
       getDescription(item)
       {
-        return this.config.item && typeof this.config.item.description === 'function' ? this.config.item.description(item) : '';
+        return typeof this.itemDescription === 'function' ? this.itemDescription(item) : '';
+      },
+
+
+      getIcon(item)
+      {
+        return typeof this.itemIcon === 'function' ? this.itemIcon(item) : this.itemIcon;
       }
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/number.vue b/zero.Web.UI/App/editor/fields/number.vue
index 231dd9a6..d6da5659 100644
--- a/zero.Web.UI/App/editor/fields/number.vue
+++ b/zero.Web.UI/App/editor/fields/number.vue
@@ -1,27 +1,15 @@
 <template>
-  <input :value="value" @input="onChange($event.target.value)" type="text" class="ui-input" v-localize:placeholder="" :maxlength="maxLength" :disabled="disabled" />
+  <input :value="value" @input="onChange($event.target.value)" type="text" class="ui-input" v-localize:placeholder="placeholder" :maxlength="maxLength" :disabled="disabled" />
 </template>
 
 
 <script>
   export default {
     props: {
-      value: {
-        type: Number,
-        default: null
-      },
-      config: Object,
-      disabled: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    computed: {
-      maxLength()
-      {
-        return this.config.maxLength > 0 ? this.config.maxLength : null;
-      },
+      value: Number,
+      maxLength: Number,
+      placeholder: String,
+      disabled: Boolean
     },
 
     methods: {
diff --git a/zero.Web.UI/App/editor/fields/output.vue b/zero.Web.UI/App/editor/fields/output.vue
index d68440bf..788a2fbc 100644
--- a/zero.Web.UI/App/editor/fields/output.vue
+++ b/zero.Web.UI/App/editor/fields/output.vue
@@ -6,13 +6,14 @@
   export default {
     props: {
       value: [Object, String, Array, Number, Boolean],
-      config: Object
+      entity: Object,
+      render: Function
     },
 
     computed: {
       output()
       {
-        return typeof this.config.render === 'function' ? this.config.render(this.value, this.config) : this.value;
+        return typeof this.render === 'function' ? this.render(this.value, this.entity) : this.value;
       }
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/select.vue b/zero.Web.UI/App/editor/fields/select.vue
index ef1c0cb5..d8df285f 100644
--- a/zero.Web.UI/App/editor/fields/select.vue
+++ b/zero.Web.UI/App/editor/fields/select.vue
@@ -1,28 +1,18 @@
  <template>
   <div class="ui-native-select" :disabled="disabled">
     <select :value="value" @input="$emit('input', $event.target.value)" :disabled="disabled">
-      <option v-for="item in config.items" :value="item.value" v-localize="item.label"></option>
+      <option v-for="item in items" :value="item.key" v-localize="item.value"></option>
     </select>
   </div>
 </template>
 
 
 <script>
-  import { map as _map, filter as _filter } from 'underscore';
-
   export default {
-    name: 'uiSelect',
-
     props: {
-      value: {
-        type: [String, Number, Object],
-        default: null
-      },
-      config: Object,
-      disabled: {
-        type: Boolean,
-        default: false
-      }
+      value: [String, Number, Object],
+      items: Array,
+      disabled: Boolean
     },
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/tags.vue b/zero.Web.UI/App/editor/fields/tags.vue
index 33fc248e..0949a237 100644
--- a/zero.Web.UI/App/editor/fields/tags.vue
+++ b/zero.Web.UI/App/editor/fields/tags.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-tags :value="value" @input="$emit('input', $event)" :add-label="config.addLabel || '@ui.add'" :disabled="disabled" />
+  <ui-tags :value="value" @input="$emit('input', $event)" :max-items="limit" :max-length="maxItemLength" :disabled="disabled" />
 </template>
 
 <script>
@@ -9,11 +9,15 @@
         type: Array,
         default: () => []
       },
-      disabled: {
-        type: Boolean,
-        default: false
+      disabled: Boolean,
+      limit: {
+        type: Number,
+        default: 10
       },
-      config: Object
+      maxItemLength: {
+        type: Number,
+        default: 200
+      }
     },
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/toggle.vue b/zero.Web.UI/App/editor/fields/toggle.vue
index e01d4796..bee45576 100644
--- a/zero.Web.UI/App/editor/fields/toggle.vue
+++ b/zero.Web.UI/App/editor/fields/toggle.vue
@@ -6,18 +6,9 @@
 <script>
   export default {
     props: {
-      value: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      negative: {
-        type: Boolean,
-        default: false
-      }
+      value: Boolean,
+      disabled: Boolean,
+      negative: Boolean
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/notfound.vue b/zero.Web.UI/App/pages/notfound.vue
index 4f3c3472..318ec634 100644
--- a/zero.Web.UI/App/pages/notfound.vue
+++ b/zero.Web.UI/App/pages/notfound.vue
@@ -60,6 +60,8 @@
         this.path = this.$router.options.base + this.$route.path.substring(1);
         this.routes = [];
 
+        console.info(this.$router.options.routes);
+
         this.$router.options.routes.forEach(route =>
         {
           this.routes.push({