diff --git a/zero.Api/Endpoints/PageModules/PageModuleModule.cs b/zero.Api/Endpoints/PageModules/PageModuleModule.cs
new file mode 100644
index 00000000..7f819fe0
--- /dev/null
+++ b/zero.Api/Endpoints/PageModules/PageModuleModule.cs
@@ -0,0 +1,12 @@
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace zero.Api.Endpoints.PageModules;
+
+public class PageModuleModule : ZeroModule
+{
+  public override void ConfigureServices(IServiceCollection services, IConfiguration configuration)
+  {
+    services.AddSingleton<IPermissionProvider, PageModulePermissions>();
+  }
+}
\ No newline at end of file
diff --git a/zero.Api/Endpoints/PageModules/PageModulePermissions.cs b/zero.Api/Endpoints/PageModules/PageModulePermissions.cs
new file mode 100644
index 00000000..82269abc
--- /dev/null
+++ b/zero.Api/Endpoints/PageModules/PageModulePermissions.cs
@@ -0,0 +1,31 @@
+namespace zero.Api.Endpoints.PageModules;
+
+public class PageModulePermissions : PermissionProvider
+{
+  public const string Group = "zero.pagemodules";
+
+  public const string Create = "zero.pagemodules.create";
+  public const string Read = "zero.pagemodules.read";
+  public const string Update = "zero.pagemodules.update";
+  public const string Delete = "zero.pagemodules.delete";
+
+
+  public override Task Configure(IPermissionContext context)
+  {
+    PermissionGroup group = new(Group, "@module.list");
+    group.Permissions.Add(new Permission("zero.pagemodules.defaults", "Default permissions")
+    {
+      Children = new()
+      {
+        new(Create, "@permission.states.create"),
+        new(Read, "@permission.states.read"),
+        new(Update, "@permission.states.update"),
+        new(Delete, "@permission.states.delete")
+      }
+    });
+
+    context.AddGroup(group);
+
+    return Task.CompletedTask;
+  }
+}
\ No newline at end of file
diff --git a/zero.Api/Endpoints/PageModules/PageModulesController.cs b/zero.Api/Endpoints/PageModules/PageModulesController.cs
new file mode 100644
index 00000000..13ba6624
--- /dev/null
+++ b/zero.Api/Endpoints/PageModules/PageModulesController.cs
@@ -0,0 +1,38 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace zero.Api.Endpoints.PageModules;
+
+public class PageModulesController : ZeroApiController
+{
+  readonly IPageModuleTypeService ModuleTypeService;
+
+  public PageModulesController(IPageModuleTypeService moduleTypeService)
+  {
+    ModuleTypeService = moduleTypeService;
+  }
+
+
+  [HttpGet("")]
+  [ZeroAuthorize(PageModulePermissions.Read)]
+  public async Task<ActionResult<IList<PageModuleType>>> GetModuleTypes([FromQuery] string[] tags = default, [FromQuery] string pageId = default) => Ok(await ModuleTypeService.GetModuleTypes(tags, pageId));
+
+
+  [HttpGet("{alias}")]
+  [ZeroAuthorize(PageModulePermissions.Read)]
+  public ActionResult<PageModuleType> GetModuleType(string alias) => Ok(ModuleTypeService.GetModuleType(alias));
+
+
+  [HttpGet("{alias}/empty")]
+  [ZeroAuthorize(PageModulePermissions.Read)]
+  public ActionResult<PageModule> GetEmpty(string alias)
+  {
+    PageModule module = ModuleTypeService.GetEmpty(alias);
+
+    if (module == null)
+    {
+      return NotFound();
+    }
+
+    return module;
+  }
+}
\ No newline at end of file
diff --git a/zero.Api/Plugin.cs b/zero.Api/Plugin.cs
index fa11d257..23584ccd 100644
--- a/zero.Api/Plugin.cs
+++ b/zero.Api/Plugin.cs
@@ -41,6 +41,7 @@ public class ZeroApiPlugin : ZeroPlugin
     modules.Add<Endpoints.Spaces.SpaceModule>();
     modules.Add<Endpoints.Integrations.IntegrationModule>();
     modules.Add<Endpoints.Users.UserModule>();
+    modules.Add<Endpoints.PageModules.PageModuleModule>();
 
     modules.ConfigureServices(services, configuration);
       
diff --git a/zero.Backoffice.UI/app/core/zeroRuntime.ts b/zero.Backoffice.UI/app/core/zeroRuntime.ts
index e058f8bf..97f68400 100644
--- a/zero.Backoffice.UI/app/core/zeroRuntime.ts
+++ b/zero.Backoffice.UI/app/core/zeroRuntime.ts
@@ -21,7 +21,8 @@ import
   translationPlugin,
   integrationPlugin,
   userPlugin,
-  linksPlugin
+  linksPlugin,
+  pageModulePlugin
 } from '../modules';
 import editorPlugin from '../editor/plugin';
 import { ZeroSchema } from 'zero/schemas';
@@ -34,7 +35,7 @@ import { Emitter, EventType } from 'mitt';
 plugins.push(
   editorPlugin, countryPlugin, applicationPlugin, settingsPlugin, languagePlugin,
   mediaPlugin, spacePlugin, pagePlugin, mailTemplatePlugin,
-  translationPlugin, integrationPlugin, userPlugin, linksPlugin
+  translationPlugin, integrationPlugin, userPlugin, linksPlugin, pageModulePlugin
 );
 
 
diff --git a/zero.Backoffice.UI/app/editor/_fields/linkpicker.vue b/zero.Backoffice.UI/app/editor/_fields/linkpicker.vue
deleted file mode 100644
index aef0d4ce..00000000
--- a/zero.Backoffice.UI/app/editor/_fields/linkpicker.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <ui-linkpicker :config="config" :value="value" @input="$emit('input', $event)" :disabled="disabled" v-bind="{ disabled, limit, title, label, target, suffix, areas }" />
-</template>
-
-
-<script>
-  export default {
-    props: {
-      value: {
-        type: [Object, Array],
-        default: null
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      limit: {
-        type: Number,
-        default: 1
-      },
-      title: {
-        type: Boolean,
-        default: true
-      },
-      label: {
-        type: Boolean,
-        default: false
-      },
-      target: {
-        type: Boolean,
-        default: true
-      },
-      suffix: {
-        type: Boolean,
-        default: false
-      },
-      areas: {
-        type: Array,
-        default: () => []
-      },
-      config: Object
-    },
-  }
-</script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/editor/_fields/modules.vue b/zero.Backoffice.UI/app/editor/fields/modules.vue
similarity index 100%
rename from zero.Backoffice.UI/app/editor/_fields/modules.vue
rename to zero.Backoffice.UI/app/editor/fields/modules.vue
diff --git a/zero.Backoffice.UI/app/modules/index.ts b/zero.Backoffice.UI/app/modules/index.ts
index 79a62143..8e4daf9d 100644
--- a/zero.Backoffice.UI/app/modules/index.ts
+++ b/zero.Backoffice.UI/app/modules/index.ts
@@ -10,4 +10,5 @@ export * from './mails';
 export * from './translations';
 export * from './integrations';
 export * from './users';
-export * from './links';
\ No newline at end of file
+export * from './links';
+export * from './pageModules';
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/actions.ts b/zero.Backoffice.UI/app/modules/pageModules/actions.ts
new file mode 100644
index 00000000..d2f82cfd
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/actions.ts
@@ -0,0 +1,103 @@
+
+import api from './api';
+import * as overlays from '../../services/overlay';
+import * as notifications from '../../services/notification';
+import { localize } from '../../services/localization';
+import { Router } from 'vue-router';
+
+
+export default {
+
+  async create(router: Router, parent: object)
+  {
+    const result = await overlays.open({
+      component: () => import('./overlays/create.vue'),
+      width: 480,
+      model: {
+        parent
+      }
+    });
+
+    if (result.value)
+    {
+      router.push({
+        name: 'pages-create',
+        params: {
+          flavor: result.value.alias,
+          parent: parent ? parent.id : undefined
+        }
+      })
+    }
+  },
+
+
+  async move(model: object)
+  {
+    const result = await overlays.open({
+      component: () => import('./overlays/move.vue'),
+      display: 'editor',
+      width: 480,
+      model: model
+    });
+
+    if (result.eventType == 'confirm')
+    {
+      console.info('okay');
+    }
+  },
+
+
+  async copy(model: object)
+  {
+    const result = await overlays.open({
+      component: () => import('./overlays/copy.vue'),
+      display: 'editor',
+      width: 480,
+      model: model
+    });
+
+    if (result.eventType == 'confirm')
+    {
+      console.info('okay');
+    }
+  },
+
+
+  async sort(model: object)
+  {
+    const result = await overlays.open({
+      component: () => import('./overlays/sort.vue'),
+      display: 'editor',
+      width: 480,
+      model: model
+    });
+
+    if (result.eventType == 'confirm')
+    {
+      console.info('okay');
+    }
+  },
+
+
+  async remove(model: object)
+  {
+    const response = await api.getDependencies(model.id);
+
+    const result = await overlays.confirmDelete("@page.deleteoverlay.title", '@page.deleteoverlay.text', localize('@page.deleteoverlay.warning', {
+      tokens: {
+        pages: response.data.pages
+      }
+    }));
+
+    if (result.eventType == 'confirm')
+    {
+      result.value.state('loading');
+
+      await api.delete(model.id);
+
+      result.value.state('success');
+      result.value.close();
+    }
+  }
+
+};
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/api.ts b/zero.Backoffice.UI/app/modules/pageModules/api.ts
new file mode 100644
index 00000000..115569f5
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/api.ts
@@ -0,0 +1,10 @@
+import { get, ApiRequestConfig } from '../../services/request';
+
+export default {
+
+  getEmpty: (alias: string, config?: ApiRequestConfig) => get(`pagemodules/${alias}/empty`, { ...config }),
+
+  getTypes: (pageId?: string, tags?: string[], config?: ApiRequestConfig) => get('pagemodules', { ...config, params: { pageId, tags } }),
+
+  getType: (alias: string, config?: ApiRequestConfig) => get('pagemodules/' + alias, { ...config })
+};
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/editor-modules.vue b/zero.Backoffice.UI/app/modules/pageModules/editor-modules.vue
new file mode 100644
index 00000000..d8b51f2d
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/editor-modules.vue
@@ -0,0 +1,17 @@
+<template>
+  <ui-modules :value="[]" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: Object,
+      config: Object,
+      limit: {
+        type: Number,
+        default: 1
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/index.ts b/zero.Backoffice.UI/app/modules/pageModules/index.ts
new file mode 100644
index 00000000..8db59b14
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/index.ts
@@ -0,0 +1,7 @@
+import api from './api';
+import plugin from './plugin';
+
+export {
+  api as pageModuleApi,
+  plugin as pageModulePlugin
+};
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/overlays/edit.vue b/zero.Backoffice.UI/app/modules/pageModules/overlays/edit.vue
new file mode 100644
index 00000000..7e2c270f
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/overlays/edit.vue
@@ -0,0 +1,113 @@
+<template>
+  <ui-form ref="form" v-slot="form" @submit="onSubmit" @load="onLoad">
+    <ui-overlay-editor class="ui-module-overlay">
+
+      <template v-slot:header>
+        <ui-header-bar :title="config.module.name" :back-button="false" :close-button="true" />
+      </template>
+
+      <template v-slot:footer>
+        <ui-button type="light onbg" label="@ui.close" @click="config.hide"></ui-button>
+        <ui-button v-if="!disabled" type="primary" :submit="true" label="Confirm" :state="form.state" :disabled="loading"></ui-button>
+      </template>
+
+      <ui-loading v-if="loading" :is-big="true" />
+
+      <div v-if="!loading" class="ui-module-overlay-editor">
+        <ui-editor :config="editor" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
+      </div>
+
+    </ui-overlay-editor>
+  </ui-form>
+</template>
+
+
+<script>
+  import ModulesApi from 'zero/api/modules.js';
+  import UiEditor from 'zero/editor/editor.vue';
+  export default {
+    props: {
+      config: Object
+    },
+    components: { UiEditor },
+    data: () => ({
+      isAdd: true,
+      disabled: false,
+      id: null,
+      loading: true,
+      state: 'default',
+      meta: {},
+      editor: null,
+      model: {}
+    }),
+    created()
+    {
+      this.editor = this.config.editor;
+    },
+    methods: {
+      onLoad(form)
+      {
+        if (this.config.model)
+        {
+          this.isAdd = false;
+          this.model = JSON.parse(JSON.stringify(this.config.model));
+        }
+        form.load(ModulesApi.getEmpty(this.config.module.alias)).then(response =>
+        {
+          this.disabled = !response.meta.canEdit || this.config.disabled;
+          this.meta = response.meta;
+          if (this.isAdd)
+          {
+            this.model = response.entity;
+          }
+          this.loading = false;
+        });
+      },
+      onSubmit(form)
+      {
+        this.config.confirm(this.model);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-module-overlay
+  {
+    > content
+    {
+      position: relative;
+      padding-top: 0 !important;
+    }
+
+    .ui-box
+    {
+      margin: 0;
+    }
+
+    .ui-tabs-list
+    {
+      padding: 0;
+      padding-bottom: 32px;
+    }
+
+    .ui-property.ui-modules
+    {
+      margin: 0;
+      padding: 0;
+    }
+
+    .editor-outer.-infos-aside:not(.is-page)
+    {
+      display: block;
+    }
+
+    .ui-loading
+    {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -14px 0 0 -14px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/overlays/select.vue b/zero.Backoffice.UI/app/modules/pageModules/overlays/select.vue
new file mode 100644
index 00000000..bf7c4ada
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/overlays/select.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="ui-modules-select">
+    <h2 class="ui-headline">Add module</h2>
+    <div v-if="!loading">
+      <div class="ui-modules-select-items">
+        <button type="button" v-for="item in types" class="ui-modules-select-item" @click="onSelect(item)">
+          <div class="ui-modules-select-item-top">
+            <ui-icon class="ui-modules-select-item-icon" :symbol="item.icon" :size="22" />
+          </div>
+          <span class="ui-modules-select-item-text">
+            <ui-localize :value="item.name" class="-headline" />
+            <span v-if="item.description" class="-desc" v-localize="item.description"></span>
+          </span>
+        </button>
+      </div>
+      <ui-message type="error" v-if="!types.length" text="@page.create.nonavailable" />
+      <div class="app-confirm-buttons">
+        <ui-button type="light" :label="config.closeLabel" @click="config.close"></ui-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  import ModulesApi from 'zero/api/modules.js';
+  import Overlay from 'zero/helpers/overlay.js';
+  export default {
+    props: {
+      config: Object
+    },
+    data: () => ({
+      model: {
+        name: null,
+        parentId: null,
+        pageTypeAlias: null
+      },
+      loading: false,
+      item: {},
+      disabled: false,
+      types: []
+    }),
+    created()
+    {
+      this.types = this.config.types;
+      this.model.parentId = this.config.parent ? this.config.parent.id : null;
+    },
+    methods: {
+      onSelect(item)
+      {
+        //this.config.close();
+        this.config.confirm(item);
+        //this.$router.push({
+        //  name: 'ui-modules-select',
+        //  params: { type: item.alias, parent: this.model.parentId }
+        //});
+      },
+    }
+  }
+</script>
+
+<style lang="scss">
+  .app-overlay[data-alias="modules-select"]
+  {
+    width: calc(100vw - 40px);
+    max-width: 1080px;
+    height: calc(100vh - 40px);
+    max-height: 750px;
+  }
+
+  .ui-modules-select
+  {
+    text-align: left;
+
+    .ui-message
+    {
+      margin: 0;
+    }
+  }
+
+  .ui-modules-select-parent
+  {
+    margin: 30px 0 -10px 0;
+    border-radius: var(--radius);
+    /*border: 1px solid var(--color-line-light);*/
+    background: var(--color-box-nested);
+    line-height: 1.4;
+    color: var(--color-text-dim);
+    padding: 14px 16px;
+    font-size: var(--font-size);
+
+    strong
+    {
+      color: var(--color-text);
+    }
+  }
+
+  .ui-modules-select-items
+  {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    grid-gap: var(--padding-m);
+    margin: 0 -16px;
+    padding: 0 16px;
+    margin-top: var(--padding);
+    max-height: 550px;
+    overflow-y: auto;
+  }
+
+  .ui-modules-select-item
+  {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    grid-template-columns: 40px 1fr auto;
+    gap: 12px;
+    align-items: stretch;
+    position: relative;
+    color: var(--color-text);
+    /*&:hover, &:focus
+    {
+      background: var(--color-tree-selected);
+    }*/
+    &:hover .ui-modules-select-item-top
+    {
+      border: 1px solid var(--color-bg-shade-5);
+      background: var(--color-bg-shade-1);
+      outline: none;
+    }
+  }
+
+  .ui-modules-select-item-top
+  {
+    background: var(--color-bg-shade-2);
+    height: 100px;
+    border-radius: var(--radius);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--color-line);
+  }
+
+  .ui-modules-select-item-text
+  {
+    display: flex;
+    flex-direction: column;
+
+    .-desc
+    {
+      color: var(--color-text-dim);
+      margin-top: 3px;
+      font-size: var(--font-size-s);
+      line-height: 1.4;
+    }
+
+    .-headline
+    {
+      color: var(--color-text);
+      font-weight: 700;
+    }
+  }
+
+  .ui-modules-select-item-icon
+  {
+    position: relative;
+    font-size: var(--size-xl);
+    color: var(--color-text);
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/partials/preview-inner.vue b/zero.Backoffice.UI/app/modules/pageModules/partials/preview-inner.vue
new file mode 100644
index 00000000..6ec5d002
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/partials/preview-inner.vue
@@ -0,0 +1,44 @@
+<script>
+  export default {
+    name: 'uiModulePreviewInner',
+    props: {
+      value: {
+        type: Object,
+        default: () => { }
+      },
+      options: {
+        type: Object
+      },
+      template: {
+        type: String,
+        default: null
+      }
+    },
+    render: function (h)
+    {
+      if (!this.template)
+      {
+        return;
+      }
+      return h(
+        {
+          template: '<div class="ui-module-preview-inner">' + this.template + '</div>',
+          props: {
+            model: {
+              type: Object,
+              default: () => { }
+            },
+            options: {
+              type: Object
+            },
+          }
+        },
+        {
+          props: {
+            model: this.value,
+            options: this.options
+          }
+        });
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/partials/preview.vue b/zero.Backoffice.UI/app/modules/pageModules/partials/preview.vue
new file mode 100644
index 00000000..cc231341
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/partials/preview.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="ui-module-item" v-if="!loading" :data-module="alias" :class="{'can-edit': canEdit }">
+    <div class="ui-module-item-content" v-if="module" @click="emit('edit')">
+      <span v-if="!preview || !preview.hideLabel" class="ui-module-item-header" v-localize="module.name"></span>
+      <module-preview-inner v-if="tryRender && typeof preview.template === 'string'" :template="preview.template" :value="value" :options="preview" />
+      <div v-if="tryRender && typeof preview.template !== 'string'" class="ui-module-preview-inner">
+        <component :is="preview.template" :model="value" :options="preview" />
+      </div>
+    </div>
+    <div class="ui-module-item-content" v-else>
+      <span class="ui-module-item-header is-error"><i class="fth-alert-circle"></i> {{alias}}</span>
+      <p class="ui-module-item-error" v-localize:html="{ key: '@modules.notfound', tokens: { alias: alias } }"></p>
+    </div>
+
+    <div v-if="!value.isActive" class="ui-module-item-disabled"></div>
+
+    <div class="ui-module-item-actions" v-if="!disabled">
+      <ui-dropdown align="right">
+        <template v-slot:button>
+          <ui-icon-button v-if="!value.isActive" class="ui-module-item-disabled-icon ui-module-item-action" icon="fth-lock" title="Disabled" />
+          <ui-icon-button v-else icon="fth-more-vertical" class="ui-module-item-action" title="Actions" />
+        </template>
+        <ui-dropdown-button v-if="canEdit" label="Edit" icon="fth-edit-2" @click="emit('edit')" />
+        <ui-dropdown-button v-if="value.isActive" label="Disable" icon="fth-lock" @click="toggleStatus(false)" />
+        <ui-dropdown-button v-else label="Enable" icon="fth-unlock" @click="toggleStatus(true)" />
+        <ui-dropdown-button label="Remove" icon="fth-trash" @click="emit('remove')" />
+      </ui-dropdown>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  import ModulePreviewInner from './preview-inner.vue';
+
+
+  export default {
+    name: 'uiModulePreview',
+
+    components: { ModulePreviewInner },
+
+    props: {
+      value: {
+        type: Object,
+        default: () => { }
+      },
+      types: {
+        type: Array,
+        default: () => []
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      config: Object
+    },
+
+    data: () => ({
+      loading: true,
+      module: {},
+      renderer: {},
+      preview: null
+    }),
+
+    watch: {
+      value: {
+        deep: true,
+        handler(val, oldVal)
+        {
+          // TODO this sucks
+          // but we do always get changes for ALL modules when anything changes
+          // this triggers reload of all modules which can be super expensive
+          if (JSON.stringify(val) !== JSON.stringify(oldVal))
+          {
+            this.render(val);
+          }
+        }
+      }
+    },
+
+    computed: {
+      alias()
+      {
+        return this.value.moduleTypeAlias;
+      },
+      tryRender()
+      {
+        return this.preview && this.preview.template;
+      },
+      canEdit()
+      {
+        return this.module && this.renderer && this.renderer.fields && this.renderer.fields.length > 0;
+      }
+    },
+
+    mounted()
+    {
+      this.render(this.value);
+    },
+
+
+    methods: {
+
+      render(value)
+      {
+        this.loading = true;
+        this.module = this.types.find(x => x.alias == this.alias);
+        //this.renderer = this.zero.getEditor('module.' + this.alias);
+        //if (this.renderer)
+        //{
+        //  this.preview = this.renderer.previewOptions;
+        //}
+        this.$nextTick(() => this.loading = false);
+      },
+
+      emit(ev)
+      {
+        if (!this.canEdit && ev === 'edit')
+        {
+          return;
+        }
+        this.$emit(ev, this.module, this.value);
+      },
+
+      toggleStatus(isActive)
+      {
+        this.value.isActive = isActive;
+        this.emit('isActive');
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-module-item
+  {
+    display: grid !important;
+    grid-template-columns: 1fr auto 0;
+    grid-column-gap: var(--padding);
+    position: relative;
+    margin: 0 -32px;
+    margin-right: -96px;
+    border-right: 3px solid transparent;
+    padding: 0; //var(--padding);
+    /*margin-top: var(--padding);
+    padding-top: var(--padding);*/
+    //border-bottom: 1px dashed var(--color-line-dashed);
+    &.can-edit .ui-module-item-content
+    {
+      cursor: pointer;
+    }
+
+    &:not(.can-edit) .ui-module-item-header
+    {
+      cursor: default;
+    }
+    /*&:hover
+    {
+      border-right: 3px solid var(--color-line-onbg);
+    }*/
+    /*&:first-child
+    {
+      border-top: none;
+    }*/
+  }
+
+  .ui-module-item-content
+  {
+    padding: var(--padding-m) var(--padding);
+    //padding-left: calc(var(--padding) * 3);
+    padding-right: 0;
+  }
+
+  .ui-module-item-header
+  {
+    display: flex; //TODO flex;
+    align-items: center;
+    color: var(--color-text-dim-one);
+    font-size: var(--font-size-xs);
+    line-height: 1.5;
+    width: 100%;
+
+    i
+    {
+      font-size: var(--font-size-l);
+      margin-right: 10px;
+      position: relative;
+      top: -1px;
+    }
+
+    &.is-error
+    {
+      color: var(--color-accent-error);
+    }
+  }
+
+  .ui-module-item-disabled
+  {
+    background: var(--color-box);
+    border-radius: var(--radius);
+    opacity: .5;
+    position: absolute;
+    left: 0;
+    right: 65px;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  .ui-module-item-disabled-icon
+  {
+    position: relative;
+    z-index: 1;
+
+    .ui-button-icon
+    {
+      color: var(--color-accent-error);
+    }
+  }
+
+  .ui-module-preview-inner
+  {
+    max-width: 1060px;
+
+    .ui-module-item-header + &
+    {
+      padding-top: 4px;
+    }
+
+    p
+    {
+      margin: 0;
+    }
+
+    p + p
+    {
+      margin-top: 10px;
+    }
+
+    a
+    {
+      color: var(--color-text);
+      text-decoration: underline dotted var(--color-text-dim);
+      text-underline-offset: 3px;
+    }
+  }
+
+  .ui-module-item-actions
+  {
+    display: flex;
+    grid-column: 2;
+    align-self: center;
+    margin: -10px 0;
+    position: relative;
+    right: 0;
+    //opacity: 0;
+    transition: opacity .2s ease;
+
+    > * + *
+    {
+      margin-left: 10px;
+    }
+
+    .ui-module-item:hover &
+    {
+      opacity: 1;
+    }
+  }
+
+  .ui-icon-button.ui-module-item-action
+  {
+    background: var(--color-box);
+    height: 50px;
+    width: 24px;
+    border-radius: var(--radius-inner);
+
+    &.ui-module-item-disabled-icon .ui-icon
+    {
+      margin-left: -6px;
+    }
+  }
+
+  .ui-module-item-error
+  {
+    margin: 0;
+    grid-column: 1;
+    margin-top: 12px;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/plugin.ts b/zero.Backoffice.UI/app/modules/pageModules/plugin.ts
new file mode 100644
index 00000000..3c16b24e
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/plugin.ts
@@ -0,0 +1,30 @@
+import { ZeroPlugin, ZeroPluginOptions } from '../../core';
+import { defineAsyncComponent } from 'vue';
+
+export default {
+  name: "zero.pagemodules",
+
+  install(app: ZeroPluginOptions)
+  {
+    app.vue.component('ui-modules', defineAsyncComponent(() => import('./ui-modules.vue')));
+    app.fieldType('modules', defineAsyncComponent(() => import('./editor-modules.vue')));
+  }
+} as ZeroPlugin;
+
+
+declare module 'zero/schemas'
+{
+  export interface ZeroEditorField
+  {
+    /**
+     * Renders modules
+     * @param {ModulesFieldOptions} [options] - Custom options
+     */
+    modules(options?: ModulesFieldOptions): ZeroEditorField;
+  }
+
+  export interface ModulesFieldOptions extends PickerFieldOptions
+  {
+    
+  }
+}
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pageModules/ui-modules.vue b/zero.Backoffice.UI/app/modules/pageModules/ui-modules.vue
new file mode 100644
index 00000000..ebaeb5d6
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/pageModules/ui-modules.vue
@@ -0,0 +1,229 @@
+<template>
+  <div v-if="loaded" class="ui-modules-inner">
+    <div v-if="items.length" class="ui-modules-inner-sortable" v-sortable="{ onUpdate: onSortingUpdated }">
+      <module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" @isActive="onChange" :disabled="disabled" />
+    </div>
+    <button v-if="canAdd" type="button" class="ui-modules-start-button" @click="selectModule">
+      <span class="ui-modules-start-button-icon"><ui-icon symbol="fth-plus" :size="19" /></span>
+      <p class="ui-modules-start-button-text"><strong>Add content</strong></p>
+    </button>
+  </div>
+</template>
+
+
+<script lang="ts">
+  import api from './api';
+  import { arrayMove, arrayRemove, arrayReplace } from '../../utils';
+  import * as overlays from '../../services/overlay';
+  import ModulePreview from './partials/preview.vue';
+
+  export default {
+    name: 'uiModules',
+
+    props: {
+      value: {
+        type: Array,
+        default: () => []
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      tags: {
+        type: Array,
+        default: () => []
+      },
+      config: Object
+    },
+
+
+    components: { ModulePreview },
+
+
+    data: () => ({
+      loaded: false,
+      items: [],
+      moduleTypes: []
+    }),
+
+
+    watch: {
+      value(val)
+      {
+        this.setup(val);
+      }
+    },
+
+
+    computed: {
+      canAdd()
+      {
+        return !this.disabled;
+      }
+    },
+
+
+    created()
+    {
+      api.getTypes(undefined, this.tags).then(res =>
+      {
+        this.moduleTypes = res.data;
+        this.setup(this.value);
+        this.loaded = true;
+      });
+    },
+
+
+    methods: {
+
+      setup(value)
+      {
+        this.items = JSON.parse(JSON.stringify(value || []));
+      },
+
+
+      selectModule()
+      {
+        overlays.open({
+          alias: 'modules-select',
+          component: ModuleSelectOverlay,
+          types: this.moduleTypes,
+          width: null
+        }).then(module => this.onAdd(module), () => { });
+      },
+
+
+      onAdd(module)
+      {
+        this.edit(module, null, true);
+      },
+
+
+      onSortingUpdated(ev)
+      {
+        this.items = arrayMove(this.items, ev.oldIndex, ev.newIndex);
+        let sort = 0;
+        this.items.forEach(x => x.sort = sort++);
+        this.onChange();
+      },
+
+
+      edit(module, model, isAdd)
+      {
+        const alias = 'module.' + module.alias;
+        const editor = this.zero.getEditor(alias);
+
+        if (!editor)
+        {
+          // TODO throw error
+        }
+
+        // some modules can have no fields for editing, so we add them directly
+        if (!editor.fields || editor.fields.length < 1)
+        {
+          return api.getEmpty(module.alias).then(res =>
+          {
+            this.items.push(res.entity);
+            this.onChange();
+          });
+        }
+
+        // open editing overlay
+        return overlays.open({
+          component: EditModuleOverlay,
+          display: 'editor',
+          module: module,
+          editor: editor,
+          model: model,
+          width: 820
+        }).then(value =>
+        {
+          if (isAdd)
+          {
+            this.items.push(value);
+          }
+          else
+          {
+            arrayReplace(this.items, model, value);
+          }
+
+          this.onChange();
+        });
+      },
+
+
+      remove(module, model)
+      {
+        arrayRemove(this.items, model);
+        this.onChange();
+      },
+
+
+      onChange()
+      {
+        this.$emit('input', this.items);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+
+  .ui-modules-inner
+  {
+    margin: var(--padding-m);
+    margin-top: -16px;
+  }
+
+  .ui-modules-inner-sortable
+  {
+    padding: var(--padding-s) 0;
+  }
+
+  .ui-modules-start-button
+  {
+    color: var(--color-primary);
+    font-size: var(--font-size);
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    gap: 25px;
+    align-items: center;
+    margin-top: var(--padding);
+    margin-bottom: -10px;
+  }
+
+  .ui-modules-inner-sortable + .ui-modules-start-button
+  {
+    width: 100%;
+    padding-top: var(--padding);
+    margin-top: var(--padding-xs);
+    border-top: 1px dashed var(--color-line-dashed-onbg);
+  }
+
+  .ui-modules-start-button-icon
+  {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 52px;
+    height: 52px;
+    background: var(--color-button-light);
+    border-radius: var(--radius);
+  }
+
+  .ui-modules-start-button-text
+  {
+    line-height: 1.3;
+    color: var(--color-text-dim);
+    margin: 0;
+    font-size: var(--font-size-s);
+
+    strong
+    {
+      display: inline-block;
+      margin-bottom: 2px;
+      color: var(--color-text);
+      font-size: var(--font-size);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/pages/page.vue b/zero.Backoffice.UI/app/modules/pages/page.vue
index 36debd5e..7cbf8b5a 100644
--- a/zero.Backoffice.UI/app/modules/pages/page.vue
+++ b/zero.Backoffice.UI/app/modules/pages/page.vue
@@ -147,8 +147,6 @@
 
       onEditorConfigure(editor)
       {
-        console.info('configure', editor);
-
         //if (this.isFolder)
         //{
         //  return;
diff --git a/zero.Core/Pages/Modules/PageModuleOptions.cs b/zero.Core/Pages/Modules/PageModuleOptions.cs
index 2b39de7a..3128b72b 100644
--- a/zero.Core/Pages/Modules/PageModuleOptions.cs
+++ b/zero.Core/Pages/Modules/PageModuleOptions.cs
@@ -2,12 +2,6 @@
 
 public class PageModuleOptions : List<PageModuleType>
 {
-  public void Add<T>(PageModuleType<T> moduleType) where T : PageModule, new()
-  {
-    Add(PageModuleType.Convert(moduleType));
-  }
-
-
   public void Add<T>(string alias, string name, string description, string icon, string group = null, List<string> tags = null, List<string> disallowedPageTypes = null) where T : PageModule, new()
   {
     Add(new PageModuleType(typeof(T))
@@ -17,23 +11,9 @@ public class PageModuleOptions : List<PageModuleType>
       Description = description,
       Icon = icon,
       Group = group,
-      Tags = tags ?? new List<string>(),
-      DisallowedPageTypes = disallowedPageTypes ?? new List<string>()
-    });
-  }
-
-
-  public void Add(Type type, string alias, string name, string description, string icon, string group = null, List<string> tags = null, List<string> disallowedPageTypes = null)
-  {
-    Add(new PageModuleType(type)
-    {
-      Alias = alias,
-      Name = name,
-      Description = description,
-      Icon = icon,
-      Group = group,
-      Tags = tags ?? new List<string>(),
-      DisallowedPageTypes = disallowedPageTypes ?? new List<string>()
+      Tags = tags ?? new(),
+      DisallowedPageTypes = disallowedPageTypes ?? new(),
+      Construct = _ => new T()
     });
   }
 }
\ No newline at end of file
diff --git a/zero.Core/Pages/Modules/PageModuleType.cs b/zero.Core/Pages/Modules/PageModuleType.cs
index 7dd2f68f..2fc73ccf 100644
--- a/zero.Core/Pages/Modules/PageModuleType.cs
+++ b/zero.Core/Pages/Modules/PageModuleType.cs
@@ -3,42 +3,8 @@
 /// <summary>
 /// A module type holds information about a Module implementation
 /// </summary>
-public class PageModuleType<T> : PageModuleType where T : PageModule, new()
+public class PageModuleType : FlavorConfig
 {
-  public PageModuleType() : base(typeof(T)) { }
-}
-
-
-/// <summary>
-/// A module type holds information about a Module implementation
-/// </summary>
-public class PageModuleType
-{
-  /// <summary>
-  /// Type of the associated module class
-  /// </summary>
-  public Type ContentType { get; private set; }
-
-  /// <summary>
-  /// Alias for querying
-  /// </summary>
-  public string Alias { get; set; }
-
-  /// <summary>
-  /// Name of the module type
-  /// </summary>
-  public string Name { get; set; }
-
-  /// <summary>
-  /// Optional description
-  /// </summary>
-  public string Description { get; set; }
-
-  /// <summary>
-  /// Icon of the module type
-  /// </summary>
-  public string Icon { get; set; }
-
   /// <summary>
   /// Optionally group modules together
   /// </summary>
@@ -56,22 +22,5 @@ public class PageModuleType
   public List<string> DisallowedPageTypes { get; set; } = new();
 
 
-  public PageModuleType(Type type)
-  {
-    ContentType = type;
-  }
-
-  public static PageModuleType Convert<T>(PageModuleType<T> model) where T : PageModule, new()
-  {
-    return new PageModuleType(model.ContentType)
-    {
-      Alias = model.Alias,
-      Name = model.Name,
-      Description = model.Description,
-      Icon = model.Icon,
-      Group = model.Group,
-      Tags = model.Tags,
-      DisallowedPageTypes = model.DisallowedPageTypes
-    };
-  }
+  public PageModuleType(Type type) : base(type) {}
 }
\ No newline at end of file
diff --git a/zero.Core/Pages/Modules/PageModuleTypeService.cs b/zero.Core/Pages/Modules/PageModuleTypeService.cs
index a4aaf4c3..50b3aef7 100644
--- a/zero.Core/Pages/Modules/PageModuleTypeService.cs
+++ b/zero.Core/Pages/Modules/PageModuleTypeService.cs
@@ -23,6 +23,29 @@ public class PageModuleTypeService : IPageModuleTypeService
   }
 
 
+  /// <inheritdoc />
+  public T GetEmpty<T>(string alias) where T : PageModule
+  {
+    PageModuleType type = GetModuleType(alias);
+    T module = type?.Construct(type) as T;
+
+    if (module == null)
+    {
+      return default;
+    }
+
+    module.ModuleTypeAlias = type.Alias;
+    module.Id = IdGenerator.Create(8);
+    module.IsActive = true;
+
+    return module;
+  }
+
+
+  /// <inheritdoc />
+  public PageModule GetEmpty(string alias) => GetEmpty<PageModule>(alias);
+
+
   /// <inheritdoc />
   public async Task<IList<PageModuleType>> GetModuleTypes(string[] tags = default, string pageId = default)
   {
@@ -61,6 +84,16 @@ public class PageModuleTypeService : IPageModuleTypeService
 
 public interface IPageModuleTypeService
 {
+  /// <summary>
+  /// Get a new instance of a page module of the specified type
+  /// </summary>
+  T GetEmpty<T>(string alias) where T : PageModule;
+
+  /// <summary>
+  /// Get a new instance of a page module of the specified type
+  /// </summary>
+  PageModule GetEmpty(string alias);
+
   /// <summary>
   /// Get all available module types (can be limited to the passed tags)
   /// </summary>