diff --git a/zero.Api/Endpoints/Media/Maps/MediaBasic.cs b/zero.Api/Endpoints/Media/Maps/MediaBasic.cs
index 19e12b90..948804cd 100644
--- a/zero.Api/Endpoints/Media/Maps/MediaBasic.cs
+++ b/zero.Api/Endpoints/Media/Maps/MediaBasic.cs
@@ -8,7 +8,9 @@ public class MediaBasic : ZeroIdEntity
 
   public bool IsFolder { get; set; }
 
-  public string Image { get; set; }
+  public string Source { get; set; }
+
+  public string Preview { get; set; }
 
   public int Children { get; set; }
   
diff --git a/zero.Api/Endpoints/Media/Maps/MediaMapperProfile.cs b/zero.Api/Endpoints/Media/Maps/MediaMapperProfile.cs
index 9946192d..eb459283 100644
--- a/zero.Api/Endpoints/Media/Maps/MediaMapperProfile.cs
+++ b/zero.Api/Endpoints/Media/Maps/MediaMapperProfile.cs
@@ -30,10 +30,15 @@ public class MediaMapperProfile : ZeroMapperProfile
     target.Children = 0;
     target.Size = source.Size;
 
+    if (source.Path.HasValue())
+    {
+      target.Source = FileSystem.MapToPublicPath(source.Path);
+    }
+
     if (source.ImageMeta != null && source.ImageMeta.Thumbnails.Any())
     {
       string path = source.ImageMeta.Thumbnails.GetValueOrDefault("preview");
-      target.Image = path.IsNullOrEmpty() ? null : FileSystem.MapToPublicPath(path);
+      target.Preview = path.IsNullOrEmpty() ? null : FileSystem.MapToPublicPath(path);
     }
   }
 
diff --git a/zero.Backoffice.UI/app/components/ui-datagrid.vue b/zero.Backoffice.UI/app/components/ui-datagrid.vue
index bd00e730..67b08769 100644
--- a/zero.Backoffice.UI/app/components/ui-datagrid.vue
+++ b/zero.Backoffice.UI/app/components/ui-datagrid.vue
@@ -55,7 +55,11 @@
     // for block items
     block: false,
     // ability to select items
-    selectable: false
+    selectable: false,
+    // whether the query params should be set for page + search
+    setQuery: true,
+    // custom scroll container
+    scrollContainerSelector: null
   };
 
   export default {
@@ -167,7 +171,7 @@
 
         if (!initial && this.configuration.scrollToTop)
         {
-          let container = document.querySelector('.app-main');
+          let container = document.querySelector(this.configuration.scrollContainerSelector || '.app-main');
 
           if (container)
           {
@@ -227,21 +231,24 @@
       // a property has changed and therefore we update the URL and table content
       onChange()
       {
-        let params = {};
-
-        if (+this.filter.page > 1)
+        if (this.configuration.setQuery)
         {
-          params.page = +this.filter.page;
-        }
-        if (this.filter.search)
-        {
-          params.search = this.filter.search;
-        }
+          let params = {};
 
-        const query = Qs.stringify(params);
-        const path = this.$route.href.split('?')[0] + (query ? '?' + query : '');
+          if (+this.filter.page > 1)
+          {
+            params.page = +this.filter.page;
+          }
+          if (this.filter.search)
+          {
+            params.search = this.filter.search;
+          }
 
-        history.replaceState(null, null, path);
+          const query = Qs.stringify(params);
+          const path = this.$route.href.split('?')[0] + (query ? '?' + query : '');
+
+          history.replaceState(null, null, path);
+        }
         this.debouncedUpdate();
       },
 
diff --git a/zero.Backoffice.UI/app/modules/media/components/field-imagepicker.vue b/zero.Backoffice.UI/app/modules/media/components/field-imagepicker.vue
new file mode 100644
index 00000000..ac08b662
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/media/components/field-imagepicker.vue
@@ -0,0 +1,36 @@
+<template>
+  <ui-mediapicker :value="value" 
+                  @input="$emit('input', $event)" 
+                  :limit="limit" 
+                  for="images" 
+                  :disable-select="disableSelect" 
+                  :disable-upload="disableUpload" 
+                  :file-extensions="fileExtensions" 
+                  :disabled="config.disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: [String, Array],
+      config: Object,
+      limit: {
+        type: Number,
+        default: 1
+      },
+      disableSelect: {
+        type: Boolean,
+        default: false
+      },
+      disableUpload: {
+        type: Boolean,
+        default: false
+      },
+      fileExtensions: {
+        type: Array,
+        default: []
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/components/field-mediapicker.vue b/zero.Backoffice.UI/app/modules/media/components/field-mediapicker.vue
new file mode 100644
index 00000000..808dbded
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/media/components/field-mediapicker.vue
@@ -0,0 +1,40 @@
+<template>
+  <ui-mediapicker :value="value" 
+                  @input="$emit('input', $event)" 
+                  :limit="limit" 
+                  :for="for" 
+                  :disable-select="disableSelect" 
+                  :disable-upload="disableUpload" 
+                  :file-extensions="fileExtensions" 
+                  :disabled="config.disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: [String, Array],
+      config: Object,
+      limit: {
+        type: Number,
+        default: 1
+      },
+      for: {
+        type: String,
+        default: 'all'
+      },
+      disableSelect: {
+        type: Boolean,
+        default: false
+      },
+      disableUpload: {
+        type: Boolean,
+        default: false
+      },
+      fileExtensions: {
+        type: Array,
+        default: []
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/components/media-previews.vue b/zero.Backoffice.UI/app/modules/media/components/media-previews.vue
new file mode 100644
index 00000000..4d0d4d0f
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/media/components/media-previews.vue
@@ -0,0 +1,165 @@
+<template>
+  <div v-for="item in items" :key="item.id" class="ui-media-preview media-pattern" :title="item.name">
+    <img class="-image" v-if="item.preview" :src="item.preview" />
+    <span class="-icon" v-if="!item.preview"><ui-icon :symbol="(item.isFolder ? 'fth-folder' : 'fth-file')" :size="22" :stroke-width="2" /></span>
+    <ui-icon-button class="-remove" type="action" icon="fth-x" :stroke="2.5" @click="$emit('remove', item)" />
+  </div> 
+</template>
+
+
+<script>
+  import api from '../api';
+  import { extendObject } from '../../../utils';
+  import * as overlays from '../../../services/overlay';
+
+  export default {
+    name: 'uiMediaPreviews',
+
+    props: {
+      value: {
+        type: [String, Array],
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        default: 'big'
+      }
+    },
+
+    data: () => ({
+      items: [],
+      cache: {}
+    }),
+
+
+    watch: {
+      value: {
+        deep: true,
+        handler: async function ()
+        {
+          await this.reload();
+        }
+      }
+    },
+
+
+    mounted()
+    {
+      this.reload();
+    },
+
+
+    methods: {
+
+      async reload()
+      {
+        const ids = this.value ? (Array.isArray(this.value) ? this.value : [this.value]) : [];
+
+        if (!ids.length)
+        {
+          this.items = [];
+          return;
+        }
+
+        let remoteIds = ids.filter(x => !this.cache[x]);
+        let items = [];
+        let result = { data: [] };
+
+        if (remoteIds.length)
+        {
+          result = await api.getByQuery({ ids: remoteIds });
+        }
+
+        ids.forEach(id =>
+        {
+          let model = this.cache[id];
+
+          if (!model)
+          {
+            model = result.data.find(x => x.id == id);
+          }
+
+          if (!model)
+          {
+            model = {
+              error: 'notfound'
+            };
+          }
+          else
+          {
+            this.cache[id] = model;
+          }
+
+          items.push(model);
+        });
+
+
+        this.items = items;
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+
+  .ui-media-previews
+  {
+
+  }
+
+  .ui-media-preview
+  {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: var(--color-box);
+    border-radius: var(--radius);
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    color: var(--color-text);
+    position: relative;
+  }
+
+  .ui-media-preview .-image
+  {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    position: relative;
+    border-radius: var(--radius);
+    z-index: 1;
+  }
+
+  .ui-media-preview .-icon
+  {
+    z-index: 1;
+  }
+
+  .ui-media-preview .-remove
+  {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 24px;
+    height: 24px;
+    z-index: 1;
+    background: var(--color-box);
+    box-shadow: var(--shadow-short);
+    color: var(--color-negative);
+    display: none;
+  }
+
+  .ui-media-preview:hover .-remove
+  {
+    display: inline-flex;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue b/zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue
new file mode 100644
index 00000000..76ee0279
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="ui-mediapicker" :class="{'is-disabled': disabled }" v-sortable="{ draggable: '.ui-media-preview', onUpdate: onSortingUpdated, filter: '.ui-mediapicker-add' }">
+    <media-previews :value="value" :disabled="disabled" @remove="remove" />
+    <button type="button" class="ui-mediapicker-add" :class="{ 'is-full': !this.value || this.value.length < 1 }" v-if="canAdd" @click="pick">
+      <ui-icon symbol="fth-plus" :size="17" />
+    </button>
+  </div>
+</template>
+
+
+<script>
+  import api from '../api';
+  import { arrayMove } from '../../../utils';
+  import * as overlays from '../../../services/overlay';
+  import MediaPreviews from './media-previews.vue';
+
+  export default {
+    name: 'uiMediapicker',
+
+    props: {
+      value: {
+        type: [String, Array],
+        default: null
+      },
+      limit: {
+        type: Number,
+        default: 1
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      for: {
+        type: String,
+        default: 'all'
+      },
+      disableSelect: {
+        type: Boolean,
+        default: false
+      },
+      disableUpload: {
+        type: Boolean,
+        default: false
+      },
+      fileExtensions: {
+        type: Array,
+        default: []
+      },
+    },
+
+    components: { MediaPreviews },
+
+    data: () => ({
+      pickerConfig: {}
+    }),
+
+    computed: {
+      canAdd()
+      {
+        return this.limit > 1 ? (Array.isArray(this.value) ? this.limit > this.value.length : true) : (!this.value || this.value.length < 1);
+      }
+    },
+
+    methods: {
+      onChange(value)
+      {
+        if (this.limit < 2 && Array.isArray(value))
+        {
+          value = value.length > 0 ? value[0] : null;
+        }
+
+        this.$emit('input', value);
+      },
+
+      async onSortingUpdated(ev)
+      {
+        let value = this.value;
+
+        if (Array.isArray(value))
+        {
+          value = arrayMove(value, ev.oldIndex, ev.newIndex);
+        }
+
+        this.onChange(value);
+      },
+
+      async pick()
+      {
+        const result = await overlays.open({
+          component: () => import('../overlays/media.vue'),
+          display: 'editor',
+          width: 1240,
+          model: {
+            parentId: null
+          }
+        });
+
+        if (result.eventType == 'confirm')
+        {
+          this.add(result.value);
+        }
+      },
+
+
+      add(item)
+      {
+        let value = this.value;
+
+        if (Array.isArray(value))
+        {
+          value.push(item.id);
+        }
+        else if (this.limit > 1)
+        {
+          if (value)
+          {
+            value = [value];
+          }
+          value.push(item.id);
+        }
+        else
+        {
+          value = item.id;
+        }
+
+        this.onChange(value);
+      },
+
+
+      remove(item)
+      {
+        let value = this.value;
+
+        if (Array.isArray(value))
+        {
+          const index = value.indexOf(item.id);
+          value.splice(index, 1);
+        }
+        else
+        {
+          value = null;
+        }
+
+        this.onChange(value);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+
+  .ui-mediapicker
+  {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .ui-mediapicker-add
+  {
+    width: 40px;
+    height: 80px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--radius-inner);
+    background: var(--color-button-light);
+    border: 1px solid transparent;
+    color: var(--color-text);
+    text-align: center;
+    font-size: 16px;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    &.is-full
+    {
+      width: 80px;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/overlays/media.vue b/zero.Backoffice.UI/app/modules/media/overlays/media.vue
new file mode 100644
index 00000000..ac27f503
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/media/overlays/media.vue
@@ -0,0 +1,194 @@
+<template>
+  <ui-trinity class="media-overlay">
+    <template v-slot:header>
+      <ui-header-bar title="Select media" :close-button="true" @close="config.close">
+        <template v-slot:title>
+          <h2 class="ui-header-bar-title">
+            <span class="media-items-hierarchy-item">
+              <button type="button" v-localize="'@media.name'" @click="selectItem('root')"></button>
+              <ui-icon class="-chevron" v-if="hierarchy.length > 0" symbol="fth-chevron-right" />
+            </span>
+            <span v-for="(item, index) in hierarchy" :key="item.id" class="media-items-hierarchy-item">
+              <button type="button" v-localize="item.name" @click="selectItem(item.id)"></button>
+              <ui-icon class="-chevron" v-if="index < hierarchy.length - 1" symbol="fth-chevron-right" />
+            </span>
+          </h2>
+        </template>
+      </ui-header-bar>
+    </template>
+    <template v-slot:footer>
+      <ui-button type="light onbg" label="@ui.close" @click="config.close" />
+    </template>
+
+    <div v-if="loaded">
+      <div class="media-items" :class="{ 'is-selecting': selected.length > 0 }">
+        <ui-datagrid ref="grid" v-model="gridConfig" @select="onSelected" @count="count = $event">
+
+          <template v-slot:before>
+            <media-drop :folder-id="parentId" @completed="refresh" />
+          </template>
+
+          <template v-if="selected.length < 1" v-slot:actions="props">
+            <template v-if="props.item && props.item.isFolder">
+              <ui-dropdown-button label="@ui.rename.title" icon="fth-edit-2" @click="editFolder(props.item)" />
+              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
+              <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
+              <ui-dropdown-separator />
+              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
+            </template>
+            <template v-if="props.item && !props.item.isFolder">
+              <ui-dropdown-button label="@ui.open.title" icon="fth-arrow-right" @click="goToFolder(props.item.id)" />
+              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
+              <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
+              <ui-dropdown-separator />
+              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
+            </template>
+          </template>
+
+          <template v-slot:default="props">
+            <media-item :value="props.item" :selected="props.selected" @click="onItemClick" />
+          </template>
+        </ui-datagrid>
+      </div>
+    </div>
+    <ui-loading v-else />
+  </ui-trinity>
+</template>
+
+
+<script>
+  import api from '../api';
+  import MediaItem from '../pages/overview/overview-item.vue';
+  import MediaSelection from '../pages/overview/overview-selection.vue';
+  import MediaDrop from '../pages/overview/drop.vue';
+  //import MediaFolderApi from 'zero/api/media-folder.js';
+  //import MediaApi from 'zero/api/media.js';
+  //import Notification from 'zero/helpers/notification.js'
+
+  export default {
+
+    props: {
+      model: Object,
+      config: Object
+    },
+
+    components: { MediaItem, MediaSelection, MediaDrop },
+
+    data: () => ({
+      id: null,
+      hierarchy: {},
+      search: null,
+      selected: [],
+      gridConfig: {
+        search: null,
+        width: 180,
+        selectable: true,
+        items: null,
+        setQuery: false,
+        scrollContainer: null
+      },
+    }),
+
+
+    created()
+    {
+      this.gridConfig.items = this.getItems;
+      this.gridConfig.scrollContainerSelector = '.media-overlay content';
+      this.id = this.config.parentId || 'root';
+      this.loaded = true;
+    },
+
+
+    methods: {
+
+      async getItems(query)
+      {
+        if (!query)
+        {
+          query = {};
+        }
+
+        query.search = this.gridConfig.search;
+        query.pageSize = 50;
+
+        const hierarchy = await api.folders.getHierarchy(this.id);
+        this.hierarchy = hierarchy.data;
+
+        return await api.folders.getChildren(this.id, true, query);
+      },
+
+
+      async refresh()
+      {
+        await this.$refs.grid.update();
+      },
+
+
+      async onItemClick(item)
+      {
+        if (item.isFolder)
+        {
+          await this.selectItem(item.id);
+        }
+        else
+        {
+          this.config.confirm(item);
+        }
+      },
+
+
+      async selectItem(id)
+      {
+        this.id = id;
+        await this.refresh();
+      },
+
+
+      onSelected(selection)
+      {
+        this.selected = selection;
+      },
+
+
+      clearSelection()
+      {
+        if (this.$refs.grid)
+        {
+          this.$refs.grid.clearSelection();
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .media-items-hierarchy-item
+  {
+    font-family: var(--font);
+    margin: 0;
+    font-size: var(--font-size-l);
+    font-weight: 400;
+    color: var(--color-text-dim);
+    min-height: 22px;
+    display: flex;
+    align-items: center;
+
+    button
+    {
+      color: var(--color-text-dim);
+      font-size: var(--font-size-l);
+    }
+
+    &:last-child button
+    {
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    button:hover
+    {
+      color: var(--color-text);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue b/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue
index c5ec1242..e652df45 100644
--- a/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue
+++ b/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="media-item" :class="{ 'is-selected': selected}">
-    <ui-link :to="link" class="media-item-preview" :class="{'media-pattern': !value.isFolder, 'is-covered': covered }">
+    <component :is="component" :to="link" type="button" class="media-item-preview" :class="{'media-pattern': !value.isFolder, 'is-covered': covered }" @click="$emit('click', value)">
       <span class="media-item-check"><ui-icon symbol="fth-check" :size="14" /></span>
-      <img class="media-item-image" v-if="value.image" :src="value.image" />
-      <span class="media-item-icon" v-if="!value.image"><ui-icon :symbol="(value.isFolder ? 'fth-folder' : 'fth-file')" :size="26" :stroke-width="2" /></span>
-    </ui-link>
+      <img class="media-item-image" v-if="value.preview" :src="value.preview" />
+      <span class="media-item-icon" v-if="!value.preview"><ui-icon :symbol="(value.isFolder ? 'fth-folder' : 'fth-file')" :size="26" :stroke-width="2" /></span>
+    </component>
     <p v-if="value.isFolder" class="media-item-text" :title="value.name">
       <!--<input type="text" v-model="value.name" />-->
       {{value.name}} <!--<ui-icon symbol="fth-cloud" v-if="value.isShared" :size="15" class="media-item-shared" />-->
@@ -28,18 +28,17 @@
       selected: {
         type: Boolean,
         default: false
+      },
+      link: {
+        type: [Object, String],
+        default: null
       }
     },
 
     computed: {
-      link()
+      component()
       {
-        if (this.value.isFolder)
-        {
-          return { name: 'media', params: { parentId: this.value.id } };
-        }
-
-        return { name: 'media-edit', params: { id: this.value.id } };
+        return this.link ? 'ui-link' : 'button';
       },
       covered()
       {
diff --git a/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue b/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue
index a153e9b9..191435df 100644
--- a/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue
+++ b/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue
@@ -47,7 +47,7 @@
           </template>
 
           <template v-slot:default="props">
-            <media-item :value="props.item" :selected="props.selected" />
+            <media-item :value="props.item" :selected="props.selected" :link="getLink(props.item)" />
           </template>
         </ui-datagrid>
       </div>
@@ -106,6 +106,7 @@
 
 
     methods: {
+
       async getItems(query)
       {
         if (!query)
@@ -129,6 +130,17 @@
       },
 
 
+      getLink(item)
+      {
+        if (item.isFolder)
+        {
+          return { name: 'media', params: { parentId: item.id } };
+        }
+
+        return { name: 'media-edit', params: { id: item.id } };
+      },
+
+
       onSelected(selection)
       {
         this.selected = selection;
diff --git a/zero.Backoffice.UI/app/modules/media/plugin.ts b/zero.Backoffice.UI/app/modules/media/plugin.ts
index f092c3cb..b53aa60e 100644
--- a/zero.Backoffice.UI/app/modules/media/plugin.ts
+++ b/zero.Backoffice.UI/app/modules/media/plugin.ts
@@ -6,7 +6,10 @@ export default {
 
   install(app: ZeroPluginOptions)
   {
-    //app.vue.component('ui-countrypicker', defineAsyncComponent(() => import('./ui-countrypicker.vue')));
+    app.vue.component('ui-mediapicker', defineAsyncComponent(() => import('./components/ui-mediapicker.vue')));
+
+    app.fieldType('media', defineAsyncComponent(() => import('./components/field-mediapicker.vue')));
+    app.fieldType('image', defineAsyncComponent(() => import('./components/field-imagepicker.vue')));
 
     app.route({ name: 'media', path: '/media/:parentId?', component: () => import('./pages/overview/overview.vue'), props: true });
     app.route({ name: 'media-edit', path: '/media/edit/:id?', component: () => import('./pages/detail/detail.vue'), props: true });
@@ -14,4 +17,37 @@ export default {
     //app.schema('countries', () => import('./schemas/list'));
     app.schema('media:edit', () => import('./schemas/editor'));
   }
-} as ZeroPlugin;
\ No newline at end of file
+} as ZeroPlugin;
+
+
+declare module 'zero/schemas'
+{
+  export interface ZeroEditorField
+  {
+    /**
+     * Renders a media picker
+     * @param {MediaFieldOptions} [options] - Custom options
+     */
+    media(options?: MediaFieldOptions): ZeroEditorField;
+
+    /**
+     * Renders an image picker
+     * @param {MediaBaseFieldOptions} [options] - Custom options
+     */
+    image(options?: MediaBaseFieldOptions): ZeroEditorField;
+  }
+
+  export type MediaTypeFor = 'all' | 'images' | 'videos' | 'documents';
+
+  export interface MediaBaseFieldOptions extends PickerFieldOptions
+  {
+    disableSelect?: boolean;
+    disableUpload?: boolean;
+    fileExtensions?: Array<string>;
+  }
+
+  export interface MediaFieldOptions extends MediaBaseFieldOptions
+  {
+    for?: MediaTypeFor;
+  }
+}
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/ui-countrypicker.vue b/zero.Backoffice.UI/app/modules/media/ui-countrypicker.vue
deleted file mode 100644
index 34356f88..00000000
--- a/zero.Backoffice.UI/app/modules/media/ui-countrypicker.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="ui-countrypicker" :class="{'is-disabled': disabled }">
-    country picker
-    <!--<ui-pick :config="pickerConfig" :value="value" @input="onChange" :disabled="disabled" />-->
-  </div>
-</template>
-
-
-<script>
-  import api from './api';
-
-  export default {
-    name: 'uiCountrypicker',
-
-    props: {
-      modelValue: {
-        type: [String, Array],
-        default: null
-      },
-      limit: {
-        type: Number,
-        default: 1
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      options: {
-        type: Object,
-        default: () => {}
-      }
-    },
-
-    data: () => ({
-      previews: [],
-      pickerConfig: {}
-    }),
-
-    //created()
-    //{
-    //  this.pickerConfig = _extend({
-    //    scope: 'country',
-    //    items: CountriesApi.getForPicker,
-    //    previews: CountriesApi.getPreviews,
-    //    limit: this.limit,
-    //    multiple: this.limit > 1,
-    //    preview: {
-          
-    //    }
-    //  }, this.options);
-    //},
-
-
-    //methods: {
-    //  onChange(value)
-    //  {
-    //    this.$emit('input', value);
-    //  }
-    //}
-  }
-</script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/settings/demo.ts b/zero.Backoffice.UI/app/modules/settings/demo.ts
index e4364e10..de7df2a1 100644
--- a/zero.Backoffice.UI/app/modules/settings/demo.ts
+++ b/zero.Backoffice.UI/app/modules/settings/demo.ts
@@ -6,6 +6,8 @@ const editor = new ZeroEditor('demo');
 
 editor.field('name', { label: 'Text' }).text({ maxLength: 120 });
 editor.field('isActive', { label: 'Toggle', horizontal: true }).toggle();
+editor.field('images', { label: 'Images' }).image({ limit: 4 });
+editor.field('docs', { label: 'Documents' }).media({ limit: 1 });
 editor.field('number', { label: 'Number' }).number();
 editor.field('output', { label: 'Number' }).output();
 editor.field('rte', { label: 'Number' }).rte();
diff --git a/zero.Backoffice.UI/app/modules/settings/demo.vue b/zero.Backoffice.UI/app/modules/settings/demo.vue
index 4eada026..40dad0e9 100644
--- a/zero.Backoffice.UI/app/modules/settings/demo.vue
+++ b/zero.Backoffice.UI/app/modules/settings/demo.vue
@@ -19,7 +19,9 @@
         output: 'This is an output',
         rte: '',
         textarea: 'A textarea\nfor you',
-        state: 'red'
+        state: 'red',
+        images: ['media.zpkxfjkgciom', 'media.w2cntwlrcueb', 'media.1waxp46ho8hu'],
+        docs: null
       },
       route: 'demo',
       disabled: false
diff --git a/zero.Core/Media/MediaFileSystem.cs b/zero.Core/Media/MediaFileSystem.cs
index 05fdecb4..2d0e5294 100644
--- a/zero.Core/Media/MediaFileSystem.cs
+++ b/zero.Core/Media/MediaFileSystem.cs
@@ -14,6 +14,10 @@ public class MediaFileSystem : PhysicalFileSystem, IMediaFileSystem
   /// <inheritdoc />
   public override string MapToPublicPath(string path)
   {
+    if (path.IsNullOrEmpty())
+    {
+      return null;
+    }
     return PublicPathPrefix + path.TrimStart('/');
   }
 }