diff --git a/zero.Web.UI/App/components/pickers/linkPicker/areas/media.vue b/zero.Web.UI/App/components/pickers/linkPicker/areas/media.vue
new file mode 100644
index 00000000..04ba0d72
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/linkPicker/areas/media.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="ui-linkpicker-area-media">
+    media
+  </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiLinkpickerAreaMedia',
+
+    props: {
+      value: {
+        type: [Object, Array],
+        default: null
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/linkPicker/areas/pages.vue b/zero.Web.UI/App/components/pickers/linkPicker/areas/pages.vue
new file mode 100644
index 00000000..9687623b
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/linkPicker/areas/pages.vue
@@ -0,0 +1,95 @@
+<template>
+  <div v-if="area" class="ui-linkpicker-area-pages">
+    <ui-property :vertical="true">
+      <ui-search v-model="search" />
+    </ui-property>
+    <ui-property :vertical="true">
+      <ui-tree ref="tree" v-bind="treeConfig" :get="getTreeItems" @select="onSelect" class="ui-linkpicker-area-pages-tree" />
+    </ui-property>
+  </div>
+</template>
+
+
+<script>
+  import PageTreeApi from 'zero/api/page-tree.js';
+  import { debounce as _debounce } from 'underscore';
+
+  export default {
+    name: 'uiLinkpickerAreaPages',
+
+    props: {
+      value: {
+        type: Object,
+        required: true
+      },
+      area: {
+        type: Object,
+        required: true
+      }
+    },
+
+    data: () => ({
+      treeConfig: {
+        parent: null,
+        active: null
+      },
+      search: null,
+      debouncedSearch: null
+    }),
+
+    watch: {
+      search()
+      {
+        this.debouncedSearch();
+      }
+    },
+
+    mounted()
+    {
+      this.debouncedSearch = _debounce(() => this.$refs.tree.refresh(), 300);
+    },
+
+    methods: {
+
+      onSelect(item)
+      {
+        this.value.values = {
+          id: item.id
+        };
+        this.$emit('change', this.value);
+      },
+
+      getTreeItems(parent)
+      {
+        return PageTreeApi.getChildren(parent, null, this.search).then(res =>
+        {
+          res = res.filter(x => x.id !== 'recyclebin');
+
+          res.forEach(item =>
+          {
+            //if (item.id === this.model)
+            //{
+            //  item.isSelected = true;
+            //}
+            item.hasActions = false;
+          });
+
+          return res;
+        });
+      },
+    }
+  }
+</script>
+
+<style>
+  .ui-linkpicker-area-pages-tree
+  {
+    margin: 0 -32px 0;  
+  }
+
+  .ui-linkpicker-area-pages-tree .ui-tree-item.is-selected, 
+  .ui-linkpicker-area-pages-tree .ui-tree-item:hover:not(.is-disabled)
+  {
+    background: var(--color-tree-selected);
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/linkPicker/linkpicker.vue b/zero.Web.UI/App/components/pickers/linkPicker/linkpicker.vue
index 5ee340b2..4a1d83a3 100644
--- a/zero.Web.UI/App/components/pickers/linkPicker/linkpicker.vue
+++ b/zero.Web.UI/App/components/pickers/linkPicker/linkpicker.vue
@@ -7,7 +7,7 @@
         <ui-icon-button v-if="!disabled" @click="remove(preview.id)" icon="fth-x" title="@ui.close" />
       </div>
     </div>-->
-    <ui-select-button v-if="canAdd" icon="fth-plus" :label="limit > 1 ? '@ui.add' : '@ui.select'" @click="pick()" :disabled="disabled" />
+    <ui-select-button v-if="canAdd" icon="fth-plus" :label="limit > 1 ? '@ui.add' : '@ui.select'" @click="onPick()" :disabled="disabled" />
   </div>
 </template>
 
@@ -130,6 +130,23 @@
       },
 
 
+      onPick(id)
+      {
+        this.pick(id).then(res =>
+        {
+          if (this.limit > 1)
+          {
+            this.value.push(res);
+            this.onChange(this.value);
+          }
+          else
+          {
+            this.onChange(res);
+          }
+        });
+      },
+
+
       pick(id)
       {
         if (this.disabled)
@@ -169,7 +186,7 @@
     justify-content: space-between;
     align-items: center;
 
-    .ui-icon-button
+    .ui-icon-button 
     {
       height: 24px;
       width: 24px;
diff --git a/zero.Web.UI/App/components/pickers/linkPicker/overlay.vue b/zero.Web.UI/App/components/pickers/linkPicker/overlay.vue
index e0d1d589..deea2fa6 100644
--- a/zero.Web.UI/App/components/pickers/linkPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/linkPicker/overlay.vue
@@ -5,6 +5,7 @@
     </template>
     <template v-slot:footer>
       <ui-button type="light onbg" :label="config.closeLabel" :parent="config.rootId" @click="config.hide" />
+      <ui-button type="primary" label="@ui.confirm" @click="onSave" />
     </template>
 
     <div v-if="opened">
@@ -32,31 +33,18 @@
       </div>
 
       <div class="ui-box">
-        <ui-property :vertical="true">
-          <ui-search v-model="search" />
-        </ui-property>
-        <ui-property :vertical="true">
-          <div class="ui-linkpicker-overlay-items" v-if="area">
-            <ui-tree v-if="area.display === 'tree'" ref="tree" v-bind="treeConfig" :get="getTreeItems" @select="treeConfig.onSelect" />
-          </div>
-        </ui-property>
+        <component v-if="area && area.component" :is="area.component" :area="area" :value="link" />
       </div>
     </div>
-    <!--<div v-if="opened" class="ui-box ui-linkpicker-overlay-items">
-      <ui-tree ref="tree" :get="getItems" :parent="config.rootId" @select="onSelect" />
-    </div>-->
   </ui-overlay-editor>
 </template>
 
 
 <script>
-  import PageTreeApi from 'zero/api/page-tree.js'
-  import { debounce as _debounce } from 'underscore';
-
   export default {
 
     props: {
-      model: String,
+      model: Object,
       config: Object
     },
 
@@ -66,12 +54,6 @@
       area: null,
       areas: [],
       areaItems: [],
-      treeConfig: {
-        parent: null,
-        active: null,
-        onSelect: (ev) => { console.info(JSON.parse(JSON.stringify(ev))); }
-      },
-      search: null,
       link: null,
       template: {
         area: null,
@@ -88,18 +70,12 @@
       current()
       {
         this.reloadSelector();
-      },
-      search()
-      {
-        this.debouncedSearch();
       }
     },
 
 
     mounted()
     {
-      this.debouncedSearch = _debounce(() => this.$refs.tree.refresh(), 300);
-
       this.areas = this.zero.config.linkPicker.areas;
       this.areaItems = this.areas.map(x =>
       {
@@ -111,7 +87,7 @@
       this.area = this.areas[0];
       this.current = this.area.alias;
 
-      this.link = JSON.parse(JSON.stringify(this.template));
+      this.link = JSON.parse(JSON.stringify(this.model || this.template));
       this.link.area = this.current;
 
       setTimeout(() => this.opened = true, 300);
@@ -123,61 +99,13 @@
       reloadSelector()
       {
         this.area = this.areas.find(x => x.alias === this.current);
-
-        if (!this.opened)
-        {
-          return;
-        }
-        if (this.area.display === 'tree' && this.$refs.tree)
-        {
-          this.$refs.tree.refresh();
-        }
-        else if (this.area.display === 'list')
-        {
-
-        }
-        else if (this.area.display === 'media')
-        {
-
-        }
-        else
-        {
-          // custom
-        }
       },
 
-      onSelect(item)
+      onSave()
       {
-        this.config.confirm(item);
+        this.config.confirm(this.link);
       },
 
-      // get list items
-      getListItems(search)
-      {
-
-      },
-
-      // get tree items
-      getTreeItems(parent)
-      { 
-        return PageTreeApi.getChildren(parent, null, this.search).then(res =>
-        {
-          res = res.filter(x => x.id !== 'recyclebin');
-          
-          res.forEach(item =>
-          {
-            if (item.id === this.model)
-            {
-              item.isSelected = true;
-            }
-            item.hasActions = false;
-          });
-
-          return res;
-        });
-      },
-
-
       onTargetChange(ev)
       {
         this.link.target = ev ? 'blank' : 'default';
@@ -186,7 +114,7 @@
   }
 </script>
 
-<style lang="scss">
+<style>
   .ui-linkpicker-overlay-area
   {
     margin-bottom: var(--padding-s);
@@ -241,30 +169,4 @@
   {
     padding-top: 1px;
   }
-
-  .ui-linkpicker-overlay-items > .ui-tree
-  {
-    margin: 0 -32px 0;
-  }
-
-  .ui-linkpicker-overlay-items .ui-tree-item.is-selected, .ui-linkpicker-overlay-items .ui-tree-item:hover:not(.is-disabled)
-  {
-    background: var(--color-tree-selected);
-  }
-
-  /*.ui-linkpicker-overlay-items .ui-tree-item.is-selected
-  {
-    &:after
-    {
-      font-family: "Feather";
-      content: "\e83e";
-      font-size: 16px;
-      color: var(--color-primary);
-    }
-      
-    .ui-tree-item-text
-    {
-      font-weight: bold;
-    }
-  }*/
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/config/zero.config.js b/zero.Web.UI/App/config/zero.config.js
index f76c148f..13cd7ae2 100644
--- a/zero.Web.UI/App/config/zero.config.js
+++ b/zero.Web.UI/App/config/zero.config.js
@@ -15,17 +15,6 @@ export default {
   },
 
   linkPicker: {
-    areas: [
-      {
-        alias: 'zero.pages',
-        name: '@zero.config.linkareas.pages',
-        display: 'tree'
-      },
-      {
-        alias: 'zero.media',
-        name: '@zero.config.linkareas.media',
-        display: 'media'
-      }
-    ]
+    areas: []
   }
 }
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/link-area.js b/zero.Web.UI/App/core/link-area.js
new file mode 100644
index 00000000..7eb3f1be
--- /dev/null
+++ b/zero.Web.UI/App/core/link-area.js
@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var LinkArea = /** @class */ (function () {
+    function LinkArea(alias, label, component) {
+        this.alias = alias;
+        this.label = label;
+        this.component = component;
+    }
+    return LinkArea;
+}());
+exports.default = LinkArea;
+//# sourceMappingURL=link-area.js.map
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/link-area.js.map b/zero.Web.UI/App/core/link-area.js.map
new file mode 100644
index 00000000..f798868b
--- /dev/null
+++ b/zero.Web.UI/App/core/link-area.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"link-area.js","sourceRoot":"","sources":["link-area.ts"],"names":[],"mappings":";;AACA;IAME,kBAAY,KAAK,EAAE,KAAK,EAAE,SAAS;QAEjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IACH,eAAC;AAAD,CAAC,AAZD,IAYC;AAGD,kBAAe,QAAQ,CAAC"}
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/link-provider.js b/zero.Web.UI/App/core/link-provider.js
deleted file mode 100644
index 118407e4..00000000
--- a/zero.Web.UI/App/core/link-provider.js
+++ /dev/null
@@ -1,32 +0,0 @@
-//import MediaApi from 'zero/api/media.js';
-//import Strings from 'zero/helpers/strings.js';
-//import Localization from 'zero/helpers/localization.js';
-//class LinkProvider
-//{
-//  key;
-//  label;
-//  icon;
-//  autoclose = true;
-//  action = () =>
-//  {
-//    console.warn(`[zero] A list action needs a "action" callback`);
-//  };
-//  constructor(alias: string, name: string, type: string)
-//  {
-//    this.key = key;
-//    this.label = label;
-//    this.icon = icon;
-//    this.action = action;
-//  }
-//  /**
-//   * Calls the action
-//   * @returns {ListColumn}
-//   */
-//  call(options)
-//  {
-//    console.info(options);
-//    this.action(options);
-//  }
-//}
-//export default ListAction;
-//# sourceMappingURL=link-provider.js.map
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/link-provider.js.map b/zero.Web.UI/App/core/link-provider.js.map
deleted file mode 100644
index af4749f5..00000000
--- a/zero.Web.UI/App/core/link-provider.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"link-provider.js","sourceRoot":"","sources":["link-provider.ts"],"names":[],"mappings":"AACA,2CAA2C;AAC3C,gDAAgD;AAChD,0DAA0D;AAE1D,oBAAoB;AACpB,GAAG;AACH,QAAQ;AACR,UAAU;AACV,SAAS;AACT,qBAAqB;AACrB,kBAAkB;AAClB,KAAK;AACL,qEAAqE;AACrE,MAAM;AAEN,0DAA0D;AAC1D,KAAK;AACL,qBAAqB;AACrB,yBAAyB;AACzB,uBAAuB;AACvB,2BAA2B;AAC3B,KAAK;AAEL,OAAO;AACP,uBAAuB;AACvB,4BAA4B;AAC5B,OAAO;AACP,iBAAiB;AACjB,KAAK;AACL,4BAA4B;AAC5B,2BAA2B;AAC3B,KAAK;AACL,GAAG;AAGH,4BAA4B"}
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/link-provider.ts b/zero.Web.UI/App/core/link-provider.ts
deleted file mode 100644
index 0ddde1e9..00000000
--- a/zero.Web.UI/App/core/link-provider.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-
-//import MediaApi from 'zero/api/media.js';
-//import Strings from 'zero/helpers/strings.js';
-//import Localization from 'zero/helpers/localization.js';
-
-//class LinkProvider
-//{
-//  key;
-//  label;
-//  icon;
-//  autoclose = true;
-//  action = () =>
-//  {
-//    console.warn(`[zero] A list action needs a "action" callback`);
-//  };
-
-//  constructor(alias: string, name: string, type: string)
-//  {
-//    this.key = key;
-//    this.label = label;
-//    this.icon = icon;
-//    this.action = action;
-//  }
-
-//  /**
-//   * Calls the action
-//   * @returns {ListColumn}
-//   */
-//  call(options)
-//  {
-//    console.info(options);
-//    this.action(options);
-//  }
-//}
-
-
-//export default ListAction;
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/plugin.zero.js b/zero.Web.UI/App/core/plugin.zero.js
index af7d7d3e..aec28db5 100644
--- a/zero.Web.UI/App/core/plugin.zero.js
+++ b/zero.Web.UI/App/core/plugin.zero.js
@@ -3,6 +3,8 @@ import Plugin from './plugin.ts';
 import editors from '../renderers/editors/all.js';
 import lists from '../renderers/lists/all.js';
 import routes from './routes.js';
+import LinkAreaPages from '../components/pickers/linkPicker/areas/pages.vue';
+import LinkAreaMedia from '../components/pickers/linkPicker/areas/media.vue';
 
 const plugin = new Plugin('zero');
 
@@ -17,7 +19,17 @@ plugin.addRoutes(routes);
 
 plugin.install = (vue, zero) =>
 {
-  
+  zero.config.linkPicker.areas.push({
+    alias: 'zero.pages',
+    name: '@zero.config.linkareas.pages',
+    component: LinkAreaPages
+  });
+
+  zero.config.linkPicker.areas.push({
+    alias: 'zero.media',
+    name: '@zero.config.linkareas.media',
+    component: LinkAreaMedia
+  });
 };
 
 export default plugin;
\ No newline at end of file
diff --git a/zero.Web.UI/app/core/plugin.ts b/zero.Web.UI/app/core/plugin.ts
index bc642dd9..94313dc2 100644
--- a/zero.Web.UI/app/core/plugin.ts
+++ b/zero.Web.UI/app/core/plugin.ts
@@ -7,7 +7,6 @@ class Plugin
   routes = [];
   editors = [];
   lists = [];
-  linkAreas = [];
 
 
   constructor(name)
@@ -88,15 +87,6 @@ class Plugin
   {
     routes.forEach(route => this.addRoute(route));
   }
-
-
-  /*
-   * Add a new link area
-   */
-  addLinkArea(area)
-  {
-    this.linkAreas.push(area);
-  }
 };
 
 export default Plugin;
\ No newline at end of file
diff --git a/zero.Web.UI/app/core/zero.ts b/zero.Web.UI/app/core/zero.ts
index 553ceba4..63f77deb 100644
--- a/zero.Web.UI/app/core/zero.ts
+++ b/zero.Web.UI/app/core/zero.ts
@@ -2,14 +2,9 @@
 // ref: 
 // https://github.com/vuejs/vue-router/blob/dev/src/index.js
 
-import Axios from 'axios';
 import ZeroPlugin from './plugin.zero.js';
-import EventHub from '../services/eventhub.js';
 import VueRouter from 'vue-router';
-import Vue from 'vue';
 import plugins from './plugins.js';
-//import CommercePlugin from '../../../zero.Commerce/Plugins/zero.Commerce/plugin.js'; // TODO dynPath
-//import TestPlugin from '../../../../Laola/Laola.Backoffice/Plugin/plugin.js'; // TODO dynPath
 import zeroConfig from '../config/zero.config.js';
 import routerConfig from '../config/router.config.js'