diff --git a/zero.Web.UI/App/components/buttons/select-button.vue b/zero.Web.UI/App/components/buttons/select-button.vue
index e095ee5d..5d3113e8 100644
--- a/zero.Web.UI/App/components/buttons/select-button.vue
+++ b/zero.Web.UI/App/components/buttons/select-button.vue
@@ -16,7 +16,7 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js';
+  import MediaApi from 'zero/api/media.js';
 
   export default {
     name: 'uiSelectButton',
diff --git a/zero.Web.UI/App/components/forms/alias.vue b/zero.Web.UI/App/components/forms/alias.vue
index f270b7d8..f4a24f01 100644
--- a/zero.Web.UI/App/components/forms/alias.vue
+++ b/zero.Web.UI/App/components/forms/alias.vue
@@ -10,7 +10,7 @@
 
 <script>
   import { map as _map } from 'underscore';
-  import UtilsApi from 'zero/resources/utils.js';
+  import UtilsApi from 'zero/api/utils.js';
 
   export default {
     name: 'uiAlias',
diff --git a/zero.Web.UI/App/components/forms/form.vue b/zero.Web.UI/App/components/forms/form.vue
index 5d65e2ca..1134d97d 100644
--- a/zero.Web.UI/App/components/forms/form.vue
+++ b/zero.Web.UI/App/components/forms/form.vue
@@ -86,7 +86,11 @@
             closeLabel: '@unsavedchanges.close'
           }).then(
             () => next(false),
-            () => next()
+            () =>
+            {
+              this.dirty = false;
+              next();
+            }
           );
         }
         else
diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index bae17e44..52516e5e 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-property" :class="{'is-vertical': vertical, 'is-text': isText, 'hide-label': hideLabel, 'is-locked': locked }">
+  <div class="ui-property" :class="{'is-vertical': vertical, 'is-text': isText, 'hide-label': hideLabel, 'is-disabled': disabled }">
     <label v-if="label && !hideLabel" class="ui-property-label" :for="field">
       <span v-localize="label"></span>
       <strong class="ui-property-required" v-if="required">*</strong>
@@ -11,8 +11,6 @@
       <slot></slot>
       <ui-error v-if="field" :field="field" />
     </div>
-
-    <button type="button" class="ui-property-lock" v-if="locked"></button>
   </div>
 </template>
 
@@ -28,17 +26,10 @@
       description: String,
       required: Boolean,
       vertical: Boolean,
-      isText: Boolean
-    },
-
-    data: () => ({
-      locked: false
-    }),
-
-    methods: {
-      setLocked(isLocked)
-      {
-        this.locked = isLocked;
+      isText: Boolean,
+      disabled: {
+        type: Boolean,
+        default: false
       }
     }
   }
@@ -54,7 +45,7 @@
     margin: 0 -32px 0;
     padding: 0 32px 0;
 
-    &.is-disabled
+    &.is-disabled .ui-property-content
     {
       pointer-events: none;
     }
@@ -196,28 +187,4 @@
       margin-left: 50px;
     }
   }
-
-  /*.ui-property.is-locked
-  {
-
-  }*/
-
-  /*.ui-property-lock
-  {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 3;
-    background: transparent;
-    width: 100%;
-    cursor: default;
-    border-right: 3px solid var(--color-primary);
-
-    &:after
-    {
-      content: ''
-    }
-  }*/
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/modules/edit-module.vue b/zero.Web.UI/App/components/modules/edit-module.vue
index dc97ebb2..6d8fbcf1 100644
--- a/zero.Web.UI/App/components/modules/edit-module.vue
+++ b/zero.Web.UI/App/components/modules/edit-module.vue
@@ -23,7 +23,7 @@
 
 
 <script>
-  import ModulesApi from 'zero/resources/modules.js';
+  import ModulesApi from 'zero/api/modules.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
index edf08c9a..db82d6bc 100644
--- a/zero.Web.UI/App/components/modules/modules.vue
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -9,7 +9,7 @@
 
 
 <script>
-  import ModulesApi from 'zero/resources/modules.js';
+  import ModulesApi from 'zero/api/modules.js';
   import EditModuleOverlay from './edit-module.vue';
   import ModulePreview from './module-preview.vue';
   import ModuleSelect from './module-select.vue';
diff --git a/zero.Web.UI/App/components/modules/predefined/module-preview-figure.vue b/zero.Web.UI/App/components/modules/predefined/module-preview-figure.vue
index cb966e05..82f5aebe 100644
--- a/zero.Web.UI/App/components/modules/predefined/module-preview-figure.vue
+++ b/zero.Web.UI/App/components/modules/predefined/module-preview-figure.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-  import MediaApi from 'zero/resources/media.js'
+  import MediaApi from 'zero/api/media.js'
 
 
   export default {
diff --git a/zero.Web.UI/App/components/overlays/dropdown-button.vue b/zero.Web.UI/App/components/overlays/dropdown-button.vue
index 43059c88..17e1a638 100644
--- a/zero.Web.UI/App/components/overlays/dropdown-button.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown-button.vue
@@ -2,13 +2,13 @@
   <!-- // TODO remove surrounding div as soon as we can have multiple roots (vue 3) -->
   <div @click="onClickShim">
     <button v-if="!confirming" :disabled="disabled" type="button" @click="onClick" class="ui-dropdown-button" :class="{ 'has-icon': icon, 'is-active': selected, 'is-multiline': multiline }">
-      <i v-if="icon" class="ui-dropdown-button-icon" :class="icon"></i>
+      <ui-icon v-if="icon" :icon="icon" class="ui-dropdown-button-icon" />
       {{label | localize}}
-      <i v-if="selected" class="ui-dropdown-button-selected fth-check"></i>
+      <ui-icon v-if="selected" icon="check" class="ui-dropdown-button-selected" />
       <i v-if="loading" class="ui-dropdown-button-progress"></i>
     </button>
     <div v-if="confirming" class="ui-dropdown-button-confirmation">
-      <i v-if="icon" class="ui-dropdown-button-icon" :class="icon"></i>
+      <ui-icon v-if="icon" :icon="icon" class="ui-dropdown-button-icon" />
       {{label | localize}}
       <ui-button type="small primary" label="OK" @click="onClick($event, true)" />
       <ui-button type="small light" label="Cancel" @click="confirming=false" />
diff --git a/zero.Web.UI/App/components/permissions.vue b/zero.Web.UI/App/components/permissions.vue
index 278d0046..dffe5585 100644
--- a/zero.Web.UI/App/components/permissions.vue
+++ b/zero.Web.UI/App/components/permissions.vue
@@ -18,7 +18,7 @@
 
 
 <script>
-  import UserRolesApi from 'zero/resources/userRoles.js';
+  import UserRolesApi from 'zero/api/userRoles.js';
   import { filter as _filter } from 'underscore';
 
   export default {
diff --git a/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue b/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue
index 5ce4068f..7d2a5fa1 100644
--- a/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue
+++ b/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue
@@ -6,7 +6,7 @@
 
 
 <script>
-  import CountriesApi from 'zero/resources/countries.js'
+  import CountriesApi from 'zero/api/countries.js'
   import { extend as _extend } from 'underscore'
 
   export default {
diff --git a/zero.Web.UI/App/components/pickers/mailPicker/mailpicker.vue b/zero.Web.UI/App/components/pickers/mailPicker/mailpicker.vue
index 33a9f9f6..06b219d4 100644
--- a/zero.Web.UI/App/components/pickers/mailPicker/mailpicker.vue
+++ b/zero.Web.UI/App/components/pickers/mailPicker/mailpicker.vue
@@ -6,7 +6,7 @@
 
 
 <script>
-  import MailTemplatesApi from 'zero/resources/mailTemplates.js'
+  import MailTemplatesApi from 'zero/api/mailTemplates.js'
   import { extend as _extend } from 'underscore'
 
   export default {
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
index bdf6334d..63a207b7 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
@@ -25,7 +25,7 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js'
+  import MediaApi from 'zero/api/media.js'
   import PickMediaOverlay from './overlay.vue';
   import Overlay from 'zero/helpers/overlay.js';
   import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
index 1a1985ca..2d84e20a 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
@@ -38,8 +38,8 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js'
-  import MediaFolderApi from 'zero/resources/media-folder.js';
+  import MediaApi from 'zero/api/media.js'
+  import MediaFolderApi from 'zero/api/media-folder.js';
   import Overlay from 'zero/helpers/overlay.js'
   import AddFolderOverlay from 'zero/pages/media/overlays/folder.vue'
   import UploadStatusOverlay from 'zero/pages/media/overlays/upload-status.vue'
diff --git a/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue b/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue
index 0ca01789..ac44584e 100644
--- a/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue
@@ -15,7 +15,7 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
+  import PageTreeApi from 'zero/api/page-tree.js'
 
   export default {
 
diff --git a/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue b/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue
index d087dc49..29c31a23 100644
--- a/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue
+++ b/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue
@@ -13,8 +13,8 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
-  import PagesApi from 'zero/resources/pages.js'
+  import PageTreeApi from 'zero/api/page-tree.js'
+  import PagesApi from 'zero/api/pages.js'
   import PageOverlay from './overlay.vue';
   import Overlay from 'zero/helpers/overlay.js';
   import { extend as _extend, isArray as _isArray, isEmpty as _isEmpty, clone as _clone } from 'underscore';
diff --git a/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue b/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue
index 10614947..c3f1c45d 100644
--- a/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue
+++ b/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue
@@ -6,7 +6,7 @@
 
 
 <script>
-  import UsersApi from 'zero/resources/users.js'
+  import UsersApi from 'zero/api/users.js'
   import { extend as _extend } from 'underscore'
 
   export default {
diff --git a/zero.Web.UI/App/components/revisions.vue b/zero.Web.UI/App/components/revisions.vue
index 51a58488..0234828e 100644
--- a/zero.Web.UI/App/components/revisions.vue
+++ b/zero.Web.UI/App/components/revisions.vue
@@ -18,7 +18,7 @@
 <script>
   import dayjs from 'dayjs';
   import Strings from 'zero/helpers/strings.js';
-  import MediaApi from 'zero/resources/media.js';
+  import MediaApi from 'zero/api/media.js';
 
   export default {
     name: 'uiRevisions',
diff --git a/zero.Web.UI/App/components/tables/table-value.js b/zero.Web.UI/App/components/tables/table-value.js
index 6e1abf57..9f82ba22 100644
--- a/zero.Web.UI/App/components/tables/table-value.js
+++ b/zero.Web.UI/App/components/tables/table-value.js
@@ -1,5 +1,5 @@
 import { warn } from 'zero/helpers/debug.js';
-import MediaApi from 'zero/resources/media.js';
+import MediaApi from 'zero/api/media.js';
 
 export default function (el, binding)
 {
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index 9d271591..c5944169 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-property v-if="!isHidden" :field="config.path" :label="label" :hide-label="config.options.hideLabel" :description="description" :required="isRequired" :class="{'is-disabled': isDisabled }">
+  <ui-property v-if="!isHidden" :field="config.path" :label="label" :hide-label="config.options.hideLabel" :description="description" :required="isRequired" :disabled="isDisabled" :class="{'is-disabled': isDisabled }">
     <component :is="config.component" v-bind="config.componentOptions" :value="model" :entity="value" @input="onChange" :disabled="isDisabled" />
     <p v-if="config.options.helpText" class="ui-property-help" v-localize="config.options.helpText"></p>
   </ui-property>
diff --git a/zero.Web.UI/App/editor/fields/culturepicker.vue b/zero.Web.UI/App/editor/fields/culturepicker.vue
index dbf05d59..c2c01075 100644
--- a/zero.Web.UI/App/editor/fields/culturepicker.vue
+++ b/zero.Web.UI/App/editor/fields/culturepicker.vue
@@ -8,7 +8,7 @@
 
 
 <script>
-  import LanguagesApi from 'zero/resources/languages.js';
+  import LanguagesApi from 'zero/api/languages.js';
 
   export default {
     props: {
diff --git a/zero.Web.UI/App/editor/fields/language.vue b/zero.Web.UI/App/editor/fields/language.vue
index 0fef4a95..f6d85432 100644
--- a/zero.Web.UI/App/editor/fields/language.vue
+++ b/zero.Web.UI/App/editor/fields/language.vue
@@ -9,7 +9,7 @@
 
 
 <script>
-  import LanguagesApi from 'zero/resources/languages.js';
+  import LanguagesApi from 'zero/api/languages.js';
 
   export default {
     props: {
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index c44e6e19..6a1fb4de 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -18,9 +18,9 @@
     <nav class="app-nav-inner">
       <template v-for="section in sections">
         <router-link :to="section.url" class="app-nav-item" :alias="section.alias" :class="{ 'has-children': hasChildren(section) }">
-          <i class="app-nav-item-icon" :class="section.icon"></i>
+          <ui-icon :icon="section.icon" class="app-nav-item-icon" />
           {{section.name | localize}}
-          <i v-if="hasChildren(section)" class="app-nav-item-arrow fth-chevron-down"></i>
+          <ui-icon v-if="hasChildren(section)" icon="chevron-down" class="app-nav-item-arrow" />
         </router-link>
         <transition name="app-nav-children">
           <div class="app-nav-children" v-if="hasChildren(section) && $route.path.indexOf('/' + section.alias) === 0">
@@ -44,12 +44,12 @@
             <img class="-image" v-if="userAvatar" :src="userAvatar" :alt="user.name" />
             <span class="-image" v-if="!userAvatar"><i class="fth-user"></i></span>
             <p class="-text"><strong>{{user.name}}</strong></p>
-            <i class="-arrow fth-chevron-down"></i>
+            <ui-icon icon="chevron-down" class="-arrow" />
           </button>
         </template>
-        <ui-dropdown-button label="Edit" icon="fth-edit-2" @click="editUser" />
-        <ui-dropdown-button label="Change password" icon="fth-lock" @click="changePassword" />
-        <ui-dropdown-button label="Logout" icon="fth-log-out" @click="logout" />
+        <ui-dropdown-button label="Edit" icon="edit-2" @click="editUser" />
+        <ui-dropdown-button label="Change password" icon="lock" @click="changePassword" />
+        <ui-dropdown-button label="Logout" icon="log-out" @click="logout" />
       </ui-dropdown>
     </footer>
 
@@ -60,7 +60,7 @@
 <script>
   import { map as _map, find as _find } from 'underscore';
   import AuthApi from 'zero/helpers/auth.js'
-  import MediaApi from 'zero/resources/media.js'
+  import MediaApi from 'zero/api/media.js'
   import IconPicker from 'zero/components/pickers/iconPicker/iconpicker.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/media/detail.vue b/zero.Web.UI/App/pages/media/detail.vue
index 739507c5..48fbfc39 100644
--- a/zero.Web.UI/App/pages/media/detail.vue
+++ b/zero.Web.UI/App/pages/media/detail.vue
@@ -32,7 +32,7 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js';
+  import MediaApi from 'zero/api/media.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/media/overlays/folder.vue b/zero.Web.UI/App/pages/media/overlays/folder.vue
index 841e27d4..4f88b3f6 100644
--- a/zero.Web.UI/App/pages/media/overlays/folder.vue
+++ b/zero.Web.UI/App/pages/media/overlays/folder.vue
@@ -17,7 +17,7 @@
 
 
 <script>
-  import MediaFolderApi from 'zero/resources/media-folder.js';
+  import MediaFolderApi from 'zero/api/media-folder.js';
   import Overlay from 'zero/helpers/overlay.js';
 
   export default {
diff --git a/zero.Web.UI/App/pages/media/overlays/move.vue b/zero.Web.UI/App/pages/media/overlays/move.vue
index 88fad883..644a58e4 100644
--- a/zero.Web.UI/App/pages/media/overlays/move.vue
+++ b/zero.Web.UI/App/pages/media/overlays/move.vue
@@ -17,8 +17,8 @@
 
 
 <script>
-  import MediaFolderApi from 'zero/resources/media-folder.js';
-  import MediaApi from 'zero/resources/media.js';
+  import MediaFolderApi from 'zero/api/media-folder.js';
+  import MediaApi from 'zero/api/media.js';
   import Notification from 'zero/helpers/notification.js'
 
   export default {
diff --git a/zero.Web.UI/App/pages/media/overlays/upload-status.vue b/zero.Web.UI/App/pages/media/overlays/upload-status.vue
index cfa0f81e..22dae42e 100644
--- a/zero.Web.UI/App/pages/media/overlays/upload-status.vue
+++ b/zero.Web.UI/App/pages/media/overlays/upload-status.vue
@@ -28,7 +28,7 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js'
+  import MediaApi from 'zero/api/media.js'
   import Strings from 'zero/helpers/strings.js';
 
   export default {
diff --git a/zero.Web.UI/App/pages/media/overview.vue b/zero.Web.UI/App/pages/media/overview.vue
index 8e1f952c..417e97cd 100644
--- a/zero.Web.UI/App/pages/media/overview.vue
+++ b/zero.Web.UI/App/pages/media/overview.vue
@@ -51,8 +51,8 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js';
-  import MediaFolderApi from 'zero/resources/media-folder.js';
+  import MediaApi from 'zero/api/media.js';
+  import MediaFolderApi from 'zero/api/media-folder.js';
   import Overlay from 'zero/helpers/overlay.js';
   import FolderOverlay from './overlays/folder.vue';
   import MoveOverlay from './overlays/move.vue';
diff --git a/zero.Web.UI/App/pages/media/upload.vue b/zero.Web.UI/App/pages/media/upload.vue
index 3fbbb228..3c493ff7 100644
--- a/zero.Web.UI/App/pages/media/upload.vue
+++ b/zero.Web.UI/App/pages/media/upload.vue
@@ -33,7 +33,7 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js';
+  import MediaApi from 'zero/api/media.js';
 
   export default {
 
diff --git a/zero.Web.UI/App/pages/pages/overlays/copy.vue b/zero.Web.UI/App/pages/pages/overlays/copy.vue
index b329aea5..762ea243 100644
--- a/zero.Web.UI/App/pages/pages/overlays/copy.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/copy.vue
@@ -22,8 +22,8 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
-  import PagesApi from 'zero/resources/pages.js';
+  import PageTreeApi from 'zero/api/page-tree.js'
+  import PagesApi from 'zero/api/pages.js';
   import Notification from 'zero/helpers/notification.js'
 
   export default {
diff --git a/zero.Web.UI/App/pages/pages/overlays/create.vue b/zero.Web.UI/App/pages/pages/overlays/create.vue
index 92fa7868..5c8a5dd5 100644
--- a/zero.Web.UI/App/pages/pages/overlays/create.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/create.vue
@@ -22,7 +22,7 @@
 
 
 <script>
-  import PagesApi from 'zero/resources/pages.js';
+  import PagesApi from 'zero/api/pages.js';
   import Overlay from 'zero/helpers/overlay.js';
 
   export default {
diff --git a/zero.Web.UI/App/pages/pages/overlays/move.vue b/zero.Web.UI/App/pages/pages/overlays/move.vue
index 12e5911b..8578d803 100644
--- a/zero.Web.UI/App/pages/pages/overlays/move.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/move.vue
@@ -17,8 +17,8 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
-  import PagesApi from 'zero/resources/pages.js';
+  import PageTreeApi from 'zero/api/page-tree.js'
+  import PagesApi from 'zero/api/pages.js';
   import Notification from 'zero/helpers/notification.js'
 
   export default {
diff --git a/zero.Web.UI/App/pages/pages/overlays/sort.vue b/zero.Web.UI/App/pages/pages/overlays/sort.vue
index a5bd2195..2c70ebac 100644
--- a/zero.Web.UI/App/pages/pages/overlays/sort.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/sort.vue
@@ -22,8 +22,8 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
-  import PagesApi from 'zero/resources/pages.js';
+  import PageTreeApi from 'zero/api/page-tree.js'
+  import PagesApi from 'zero/api/pages.js';
   import Arrays from 'zero/helpers/arrays.js'
   import Notification from 'zero/helpers/notification.js'
 
diff --git a/zero.Web.UI/App/pages/pages/page-info.vue b/zero.Web.UI/App/pages/pages/page-info.vue
index 4b567783..520150fe 100644
--- a/zero.Web.UI/App/pages/pages/page-info.vue
+++ b/zero.Web.UI/App/pages/pages/page-info.vue
@@ -38,7 +38,7 @@
 
 
 <script>
-  import PagesApi from 'zero/resources/pages.js';
+  import PagesApi from 'zero/api/pages.js';
 
   export default {
     props: {
diff --git a/zero.Web.UI/App/pages/pages/page.vue b/zero.Web.UI/App/pages/pages/page.vue
index a88a61ba..82d2f0bf 100644
--- a/zero.Web.UI/App/pages/pages/page.vue
+++ b/zero.Web.UI/App/pages/pages/page.vue
@@ -28,7 +28,7 @@
 
 <script>
   import UiEditor from 'zero/editor/editor.vue';
-  import PagesApi from 'zero/resources/pages.js';
+  import PagesApi from 'zero/api/pages.js';
   import EventHub from 'zero/helpers/eventhub.js';
   import InfoTab from './page-info.vue';
   import Overlay from 'zero/helpers/overlay.js'
diff --git a/zero.Web.UI/App/pages/pages/pages.vue b/zero.Web.UI/App/pages/pages/pages.vue
index e6d37429..6371b699 100644
--- a/zero.Web.UI/App/pages/pages/pages.vue
+++ b/zero.Web.UI/App/pages/pages/pages.vue
@@ -33,8 +33,8 @@
 
 
 <script>
-  import PageTreeApi from 'zero/resources/page-tree.js'
-  import PagesApi from 'zero/resources/pages.js'
+  import PageTreeApi from 'zero/api/page-tree.js'
+  import PagesApi from 'zero/api/pages.js'
   import Overlay from 'zero/helpers/overlay.js'
   import CreateOverlay from './overlays/create.vue'
   import SortOverlay from './overlays/sort.vue'
diff --git a/zero.Web.UI/App/pages/pages/recyclebin/recyclebin-actions.vue b/zero.Web.UI/App/pages/pages/recyclebin/recyclebin-actions.vue
index c40b8a83..0c7cc0d6 100644
--- a/zero.Web.UI/App/pages/pages/recyclebin/recyclebin-actions.vue
+++ b/zero.Web.UI/App/pages/pages/recyclebin/recyclebin-actions.vue
@@ -35,8 +35,8 @@
 
 
 <script>
-  import RecycleBinApi from 'zero/resources/recycle-bin.js'
-  import PagesApi from 'zero/resources/pages.js';
+  import RecycleBinApi from 'zero/api/recycle-bin.js'
+  import PagesApi from 'zero/api/pages.js';
 
   export default {
 
diff --git a/zero.Web.UI/App/pages/pages/recyclebin/recyclebin.vue b/zero.Web.UI/App/pages/pages/recyclebin/recyclebin.vue
index 8bd942b4..d3f2203d 100644
--- a/zero.Web.UI/App/pages/pages/recyclebin/recyclebin.vue
+++ b/zero.Web.UI/App/pages/pages/recyclebin/recyclebin.vue
@@ -14,7 +14,7 @@
 <script>
   const GROUP = "pages";
 
-  import RecycleBinApi from 'zero/resources/recycle-bin.js'
+  import RecycleBinApi from 'zero/api/recycle-bin.js'
   import Overlay from 'zero/helpers/overlay.js'
   import RecycleBinActionsOverlay from './recyclebin-actions.vue'
   import EventHub from 'zero/helpers/eventhub.js'
diff --git a/zero.Web.UI/App/pages/password-change.vue b/zero.Web.UI/App/pages/password-change.vue
index b4bb5ee3..c1da0b0c 100644
--- a/zero.Web.UI/App/pages/password-change.vue
+++ b/zero.Web.UI/App/pages/password-change.vue
@@ -25,7 +25,7 @@
 
 <script>
   import AuthApi from 'zero/helpers/auth.js'
-  import UsersApi from 'zero/resources/users.js'
+  import UsersApi from 'zero/api/users.js'
 
   export default {
 
diff --git a/zero.Web.UI/App/pages/settings/application-features.vue b/zero.Web.UI/App/pages/settings/application-features.vue
index ebf036b9..fb4c3535 100644
--- a/zero.Web.UI/App/pages/settings/application-features.vue
+++ b/zero.Web.UI/App/pages/settings/application-features.vue
@@ -8,7 +8,7 @@
 
 
 <script>
-  import ApplicationsApi from 'zero/resources/applications.js';
+  import ApplicationsApi from 'zero/api/applications.js';
 
   export default {
     props: {
diff --git a/zero.Web.UI/App/pages/settings/application.vue b/zero.Web.UI/App/pages/settings/application.vue
index fa39e038..26aebcad 100644
--- a/zero.Web.UI/App/pages/settings/application.vue
+++ b/zero.Web.UI/App/pages/settings/application.vue
@@ -7,7 +7,7 @@
 
 
 <script>
-  import ApplicationsApi from 'zero/resources/applications.js';
+  import ApplicationsApi from 'zero/api/applications.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/settings/applications.vue b/zero.Web.UI/App/pages/settings/applications.vue
index 8ecb9845..09cb185f 100644
--- a/zero.Web.UI/App/pages/settings/applications.vue
+++ b/zero.Web.UI/App/pages/settings/applications.vue
@@ -10,7 +10,7 @@
 
 <script>
   import ApplicationsItems from 'zero/pages/settings/applications-items.vue'
-  import ApplicationsApi from 'zero/resources/applications.js'
+  import ApplicationsApi from 'zero/api/applications.js'
 
   export default {
     data: () => ({
diff --git a/zero.Web.UI/App/pages/settings/country.vue b/zero.Web.UI/App/pages/settings/country.vue
index ea721c34..7d7deca0 100644
--- a/zero.Web.UI/App/pages/settings/country.vue
+++ b/zero.Web.UI/App/pages/settings/country.vue
@@ -7,7 +7,7 @@
 
 
 <script>
-  import CountriesApi from 'zero/resources/countries.js';
+  import CountriesApi from 'zero/api/countries.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/settings/language.vue b/zero.Web.UI/App/pages/settings/language.vue
index 37baf7df..24323e19 100644
--- a/zero.Web.UI/App/pages/settings/language.vue
+++ b/zero.Web.UI/App/pages/settings/language.vue
@@ -7,7 +7,7 @@
 
 
 <script>
-  import LanguagesApi from 'zero/resources/languages.js';
+  import LanguagesApi from 'zero/api/languages.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/settings/mail.vue b/zero.Web.UI/App/pages/settings/mail.vue
index eae933ba..afdd9a9d 100644
--- a/zero.Web.UI/App/pages/settings/mail.vue
+++ b/zero.Web.UI/App/pages/settings/mail.vue
@@ -7,7 +7,7 @@
 
 
 <script>
-  import MailTemplatesApi from 'zero/resources/mailTemplates.js';
+  import MailTemplatesApi from 'zero/api/mailTemplates.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/settings/role.vue b/zero.Web.UI/App/pages/settings/role.vue
index e6c7f259..299d8ff5 100644
--- a/zero.Web.UI/App/pages/settings/role.vue
+++ b/zero.Web.UI/App/pages/settings/role.vue
@@ -8,7 +8,7 @@
 
 <script>
   import { filter as _filter } from 'underscore';
-  import UserRolesApi from 'zero/resources/userRoles.js';
+  import UserRolesApi from 'zero/api/userRoles.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/settings/settings.vue b/zero.Web.UI/App/pages/settings/settings.vue
index 56213e33..6300c283 100644
--- a/zero.Web.UI/App/pages/settings/settings.vue
+++ b/zero.Web.UI/App/pages/settings/settings.vue
@@ -26,7 +26,7 @@
 
 <script>
   import ApplicationsItems from 'zero/pages/settings/applications-items.vue'
-  import SettingsApi from 'zero/resources/settings.js';
+  import SettingsApi from 'zero/api/settings.js';
 
   export default {
     name: 'app-settings',
@@ -60,13 +60,12 @@
   {
     min-height: 100%;
     position: relative;
-    padding: 45px var(--padding);
+    padding: 40px var(--padding);
     width: 100%;
     max-width: 2000px;
     display: grid;
     gap: 80px 40px;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-    padding-left: 80px;
   }
 
   .settings-group-items
diff --git a/zero.Web.UI/App/pages/settings/translation.vue b/zero.Web.UI/App/pages/settings/translation.vue
index 8170e291..b0a638c0 100644
--- a/zero.Web.UI/App/pages/settings/translation.vue
+++ b/zero.Web.UI/App/pages/settings/translation.vue
@@ -26,7 +26,7 @@
 
 
 <script>
-  import TranslationsApi from 'zero/resources/translations.js';
+  import TranslationsApi from 'zero/api/translations.js';
   import Overlay from 'zero/helpers/overlay.js';
   import Editor from 'zero/editor/editor.vue';
 
diff --git a/zero.Web.UI/App/pages/settings/user.vue b/zero.Web.UI/App/pages/settings/user.vue
index 7a4982f3..f07c8ae1 100644
--- a/zero.Web.UI/App/pages/settings/user.vue
+++ b/zero.Web.UI/App/pages/settings/user.vue
@@ -27,7 +27,7 @@
 
 <script>
   import { filter as _filter } from 'underscore';
-  import UsersApi from 'zero/resources/users.js';
+  import UsersApi from 'zero/api/users.js';
   import UiEditor from 'zero/editor/editor.vue';
 
   export default {
diff --git a/zero.Web.UI/App/pages/settings/users.vue b/zero.Web.UI/App/pages/settings/users.vue
index 3bd90038..2b8d3e5c 100644
--- a/zero.Web.UI/App/pages/settings/users.vue
+++ b/zero.Web.UI/App/pages/settings/users.vue
@@ -26,7 +26,7 @@
 
 
 <script>
-  import UserRolesApi from 'zero/resources/userRoles.js';
+  import UserRolesApi from 'zero/api/userRoles.js';
   import { filter as _filter, map as _map } from 'underscore';
 
   export default {
diff --git a/zero.Web.UI/App/pages/spaces/spaces.vue b/zero.Web.UI/App/pages/spaces/spaces.vue
index 4d2a2d8e..9449f3a7 100644
--- a/zero.Web.UI/App/pages/spaces/spaces.vue
+++ b/zero.Web.UI/App/pages/spaces/spaces.vue
@@ -23,7 +23,7 @@
   import SpaceEditor from 'zero/pages/spaces/views/editor.vue';
   import SpaceList from 'zero/pages/spaces/views/list.vue';
   import SpaceCustom from 'zero/pages/spaces/views/custom.vue';
-  import SpacesApi from 'zero/resources/spaces.js';
+  import SpacesApi from 'zero/api/spaces.js';
 
   export default {
     data: () => ({
diff --git a/zero.Web.UI/App/pages/spaces/views/custom.vue b/zero.Web.UI/App/pages/spaces/views/custom.vue
index 4cc253d4..aad12720 100644
--- a/zero.Web.UI/App/pages/spaces/views/custom.vue
+++ b/zero.Web.UI/App/pages/spaces/views/custom.vue
@@ -11,7 +11,7 @@
 
 
 <script>
-  import SpacesApi from 'zero/resources/spaces.js';
+  import SpacesApi from 'zero/api/spaces.js';
 
   export default {
     props: [ 'alias' ],
diff --git a/zero.Web.UI/App/pages/spaces/views/editor.vue b/zero.Web.UI/App/pages/spaces/views/editor.vue
index 5fe95c95..f272f44c 100644
--- a/zero.Web.UI/App/pages/spaces/views/editor.vue
+++ b/zero.Web.UI/App/pages/spaces/views/editor.vue
@@ -7,7 +7,7 @@
 
 
 <script>
-  import SpacesApi from 'zero/resources/spaces.js';
+  import SpacesApi from 'zero/api/spaces.js';
   import UiEditor from 'zero/editor/editor.vue';
   import Overlay from 'zero/helpers/overlay.js';
 
diff --git a/zero.Web.UI/App/pages/spaces/views/list.vue b/zero.Web.UI/App/pages/spaces/views/list.vue
index f42fdd01..958e8dc5 100644
--- a/zero.Web.UI/App/pages/spaces/views/list.vue
+++ b/zero.Web.UI/App/pages/spaces/views/list.vue
@@ -12,7 +12,7 @@
 
 
 <script>
-  import SpacesApi from 'zero/resources/spaces.js';
+  import SpacesApi from 'zero/api/spaces.js';
   import SpacesDefaultList from 'zero/renderers/lists/spaces.default.js';
 
   export default {
diff --git a/zero.Web.UI/App/renderers/lists/countries.js b/zero.Web.UI/App/renderers/lists/countries.js
index 778eb9dd..a6e795af 100644
--- a/zero.Web.UI/App/renderers/lists/countries.js
+++ b/zero.Web.UI/App/renderers/lists/countries.js
@@ -1,6 +1,6 @@
 
 import List from 'zero/core/list.ts';
-import CountriesApi from 'zero/resources/countries.js';
+import CountriesApi from 'zero/api/countries.js';
 
 const list = new List('countries');
 const prefix = '@country.fields.';
diff --git a/zero.Web.UI/App/renderers/lists/languages.js b/zero.Web.UI/App/renderers/lists/languages.js
index b69a62db..03f469c1 100644
--- a/zero.Web.UI/App/renderers/lists/languages.js
+++ b/zero.Web.UI/App/renderers/lists/languages.js
@@ -1,6 +1,6 @@
 
 import List from 'zero/core/list.ts';
-import LanguagesApi from 'zero/resources/languages.js';
+import LanguagesApi from 'zero/api/languages.js';
 
 const list = new List('languages');
 const prefix = '@language.fields.';
diff --git a/zero.Web.UI/App/renderers/lists/mails.js b/zero.Web.UI/App/renderers/lists/mails.js
index 0b6ce4d3..a9e2919b 100644
--- a/zero.Web.UI/App/renderers/lists/mails.js
+++ b/zero.Web.UI/App/renderers/lists/mails.js
@@ -1,6 +1,6 @@
 
 import List from 'zero/core/list.ts';
-import MailTemplatesApi from 'zero/resources/mailTemplates.js';
+import MailTemplatesApi from 'zero/api/mailTemplates.js';
 
 const list = new List('mailTemplates');
 
diff --git a/zero.Web.UI/App/renderers/lists/translations.js b/zero.Web.UI/App/renderers/lists/translations.js
index 9ad54182..77a15382 100644
--- a/zero.Web.UI/App/renderers/lists/translations.js
+++ b/zero.Web.UI/App/renderers/lists/translations.js
@@ -1,6 +1,6 @@
 
 import List from 'zero/core/list.ts';
-import TranslationsApi from 'zero/resources/translations.js';
+import TranslationsApi from 'zero/api/translations.js';
 
 const list = new List('translations');
 const prefix = '@translation.fields.';
diff --git a/zero.Web.UI/App/renderers/lists/users.js b/zero.Web.UI/App/renderers/lists/users.js
index 9b83c0fd..d0a4db5a 100644
--- a/zero.Web.UI/App/renderers/lists/users.js
+++ b/zero.Web.UI/App/renderers/lists/users.js
@@ -1,6 +1,6 @@
 
 import List from 'zero/core/list.ts';
-import UsersApi from 'zero/resources/users.js';
+import UsersApi from 'zero/api/users.js';
 
 const list = new List('users');
 const prefix = '@user.fields.';
diff --git a/zero.Web.UI/App/resources/applications.js b/zero.Web.UI/app/api/applications.js
similarity index 100%
rename from zero.Web.UI/App/resources/applications.js
rename to zero.Web.UI/app/api/applications.js
diff --git a/zero.Web.UI/App/resources/countries.js b/zero.Web.UI/app/api/countries.js
similarity index 100%
rename from zero.Web.UI/App/resources/countries.js
rename to zero.Web.UI/app/api/countries.js
diff --git a/zero.Web.UI/App/resources/languages.js b/zero.Web.UI/app/api/languages.js
similarity index 100%
rename from zero.Web.UI/App/resources/languages.js
rename to zero.Web.UI/app/api/languages.js
diff --git a/zero.Web.UI/App/resources/mailTemplates.js b/zero.Web.UI/app/api/mailTemplates.js
similarity index 100%
rename from zero.Web.UI/App/resources/mailTemplates.js
rename to zero.Web.UI/app/api/mailTemplates.js
diff --git a/zero.Web.UI/App/resources/media-folder.js b/zero.Web.UI/app/api/media-folder.js
similarity index 100%
rename from zero.Web.UI/App/resources/media-folder.js
rename to zero.Web.UI/app/api/media-folder.js
diff --git a/zero.Web.UI/App/resources/media.js b/zero.Web.UI/app/api/media.js
similarity index 100%
rename from zero.Web.UI/App/resources/media.js
rename to zero.Web.UI/app/api/media.js
diff --git a/zero.Web.UI/App/resources/modules.js b/zero.Web.UI/app/api/modules.js
similarity index 100%
rename from zero.Web.UI/App/resources/modules.js
rename to zero.Web.UI/app/api/modules.js
diff --git a/zero.Web.UI/App/resources/page-tree.js b/zero.Web.UI/app/api/page-tree.js
similarity index 100%
rename from zero.Web.UI/App/resources/page-tree.js
rename to zero.Web.UI/app/api/page-tree.js
diff --git a/zero.Web.UI/App/resources/pages.js b/zero.Web.UI/app/api/pages.js
similarity index 95%
rename from zero.Web.UI/App/resources/pages.js
rename to zero.Web.UI/app/api/pages.js
index 2a9a952c..c57583f0 100644
--- a/zero.Web.UI/App/resources/pages.js
+++ b/zero.Web.UI/app/api/pages.js
@@ -21,5 +21,5 @@ export default {
 
   restore: async (id, includeDescendants) => await post(base + 'restore', { id, includeDescendants }),
 
-  delete: async (id, moveToRecycleBin) => await del(base + 'delete', { id, moveToRecycleBin }),
+  delete: async (id, moveToRecycleBin) => await del(base + 'delete', { params: { id, moveToRecycleBin } }),
 };
\ No newline at end of file
diff --git a/zero.Web.UI/App/resources/recycle-bin.js b/zero.Web.UI/app/api/recycle-bin.js
similarity index 100%
rename from zero.Web.UI/App/resources/recycle-bin.js
rename to zero.Web.UI/app/api/recycle-bin.js
diff --git a/zero.Web.UI/App/resources/sections.js b/zero.Web.UI/app/api/sections.js
similarity index 100%
rename from zero.Web.UI/App/resources/sections.js
rename to zero.Web.UI/app/api/sections.js
diff --git a/zero.Web.UI/App/resources/settings.js b/zero.Web.UI/app/api/settings.js
similarity index 100%
rename from zero.Web.UI/App/resources/settings.js
rename to zero.Web.UI/app/api/settings.js
diff --git a/zero.Web.UI/App/resources/spaces.js b/zero.Web.UI/app/api/spaces.js
similarity index 100%
rename from zero.Web.UI/App/resources/spaces.js
rename to zero.Web.UI/app/api/spaces.js
diff --git a/zero.Web.UI/App/resources/translations.js b/zero.Web.UI/app/api/translations.js
similarity index 100%
rename from zero.Web.UI/App/resources/translations.js
rename to zero.Web.UI/app/api/translations.js
diff --git a/zero.Web.UI/App/resources/userRoles.js b/zero.Web.UI/app/api/userRoles.js
similarity index 100%
rename from zero.Web.UI/App/resources/userRoles.js
rename to zero.Web.UI/app/api/userRoles.js
diff --git a/zero.Web.UI/App/resources/users.js b/zero.Web.UI/app/api/users.js
similarity index 100%
rename from zero.Web.UI/App/resources/users.js
rename to zero.Web.UI/app/api/users.js
diff --git a/zero.Web.UI/App/resources/utils.js b/zero.Web.UI/app/api/utils.js
similarity index 100%
rename from zero.Web.UI/App/resources/utils.js
rename to zero.Web.UI/app/api/utils.js
diff --git a/zero.Web.UI/app/components/all.js b/zero.Web.UI/app/components/all.js
index 1c43e549..10470e6e 100644
--- a/zero.Web.UI/app/components/all.js
+++ b/zero.Web.UI/app/components/all.js
@@ -57,6 +57,7 @@ import uiLoading from './loading.vue';
 import uiPagination from './pagination.vue';
 import uiPermissions from './permissions.vue';
 import uiRevisions from './revisions.vue';
+import uiIcon from './icon.vue';
 
 export default {
   uiAddButton,
@@ -117,5 +118,6 @@ export default {
   uiLoading,
   uiPagination,
   uiPermissions,
-  uiRevisions
+  uiRevisions,
+  uiIcon
 };
\ No newline at end of file
diff --git a/zero.Web.UI/app/components/icon.vue b/zero.Web.UI/app/components/icon.vue
new file mode 100644
index 00000000..f77de86a
--- /dev/null
+++ b/zero.Web.UI/app/components/icon.vue
@@ -0,0 +1,25 @@
+<template>
+  <i class="ui-icon" :class="iconClass"></i>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiIcon',
+
+    props: {
+      icon: {
+        type: String,
+        default: null,
+        required: true
+      }
+    },
+
+    computed: {
+      iconClass()
+      {
+        return this.icon.indexOf('fth-') === 0 ? this.icon : ('fth-' + this.icon);
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/app/core/list-action.ts b/zero.Web.UI/app/core/list-action.ts
index 45ad08d4..7fec01ff 100644
--- a/zero.Web.UI/app/core/list-action.ts
+++ b/zero.Web.UI/app/core/list-action.ts
@@ -1,5 +1,5 @@
 
-import MediaApi from 'zero/resources/media.js';
+import MediaApi from 'zero/api/media.js';
 import Strings from 'zero/helpers/strings.js';
 import Localization from 'zero/helpers/localization.js';
 
diff --git a/zero.Web.UI/app/core/list-column.ts b/zero.Web.UI/app/core/list-column.ts
index c3d57d21..f372c5d7 100644
--- a/zero.Web.UI/app/core/list-column.ts
+++ b/zero.Web.UI/app/core/list-column.ts
@@ -1,5 +1,5 @@
 
-import MediaApi from 'zero/resources/media.js';
+import MediaApi from 'zero/api/media.js';
 import Strings from 'zero/helpers/strings.js';
 import Localization from 'zero/helpers/localization.js';