diff --git a/zero.Core/Api/ModulesApi.cs b/zero.Core/Api/ModulesApi.cs
new file mode 100644
index 00000000..7d4ad71c
--- /dev/null
+++ b/zero.Core/Api/ModulesApi.cs
@@ -0,0 +1,45 @@
+using System.Collections.Generic;
+using System.Linq;
+using zero.Core.Entities;
+using zero.Core.Options;
+
+namespace zero.Core.Api
+{
+  public class ModulesApi : BackofficeApi, IModulesApi
+  {
+    protected IZeroOptions Options { get; private set; }
+
+    public ModulesApi(IZeroOptions options, IBackofficeStore store) : base(store)
+    {
+      Options = options;
+    }
+
+
+    /// <inheritdoc />
+    public IList<ModuleType> GetModuleTypes()
+    {
+      return Options.Modules.GetAllItems().ToList();
+    }
+
+
+    /// <inheritdoc />
+    public ModuleType GetModuleType(string alias)
+    {
+      return Options.Modules.GetAllItems().FirstOrDefault(x => x.Alias == alias);
+    }
+  }
+
+
+  public interface IModulesApi
+  {
+    /// <summary>
+    /// Get all available module types
+    /// </summary>
+    IList<ModuleType> GetModuleTypes();
+
+    /// <summary>
+    /// Get a specific module type by alias
+    /// </summary>
+    ModuleType GetModuleType(string alias);
+  }
+}
diff --git a/zero.Web.UI/App/components/modules/modules-select.vue b/zero.Web.UI/App/components/modules/modules-select.vue
new file mode 100644
index 00000000..01bf52d7
--- /dev/null
+++ b/zero.Web.UI/App/components/modules/modules-select.vue
@@ -0,0 +1,268 @@
+<template>
+    <div class="ui-modules-start">
+
+      <button v-if="!isSelecting" type="button" class="ui-modules-start-button" @click="isSelecting=true">
+        <i class="ui-modules-start-button-icon fth-plus"></i>
+        <p class="ui-modules-start-button-text"><strong>Add content</strong> <br>Compose the page by adding modules</p>
+      </button>
+
+      <div class="ui-modules-select" v-if="isSelecting">
+        <ui-icon-button class="ui-modules-select-close" @click="isSelecting=false" icon="fth-x" title="@ui.close" />
+        <nav class="ui-modules-select-groups">
+          <button v-for="group in moduleTypes" type="button" class="ui-modules-select-group" :class="{'is-active': activeGroup.index === group.index }" @click="selectGroup(group)">
+            {{group.name}}
+            <span class="ui-modules-select-group-count">{{group.count}}</span>
+          </button>
+        </nav>
+        <div class="ui-modules-select-items">
+          <button v-for="item in activeGroup.items" :key="item.alias" type="button" class="ui-modules-select-item" :disabled="item.isDisabled">
+            <div class="ui-modules-select-item-icon">
+              <i :class="item.icon"></i>
+            </div>
+            <div class="ui-modules-select-item-text">
+              <strong>{{item.name}}</strong>
+              <span class="is-minor">{{item.description}}</span>
+            </div>
+            <span v-if="item.isDisabled" class="ui-modules-select-item-disabled">Not allowed <i class="fth-slash"></i></span>
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+
+
+<script>
+  import ModulesApi from 'zero/resources/modules.js';
+  import { groupBy as _groupBy, keys as _keys, each as _each } from 'underscore';
+
+  export default {
+    name: 'uiModulesSelect',
+
+    props: {
+      value: [String, Object, Array],
+      config: Object
+    },
+
+
+    data: () => ({
+      canAdd: true,
+      isSelecting: false,
+      moduleTypes: [],
+      activeGroup: null
+    }),
+
+
+    created()
+    {
+      ModulesApi.getModuleTypes().then(res =>
+      {
+        let groups = _groupBy(res, val => val.group);
+        let index = 0;
+
+        _each(groups, (items, key) =>
+        {
+          this.moduleTypes.push({
+            name: key || '@modules.default_group',
+            index: index++,
+            count: items.length,
+            items: items,
+            isDisabled: false
+          });
+        });
+
+        this.activeGroup = this.moduleTypes[0];
+      });
+    },
+
+
+    methods: {
+
+      selectGroup(group)
+      {
+        this.activeGroup = group;
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-modules-start
+  {
+    margin: 0;
+    padding: var(--padding);
+    background: var(--color-bg-bright);
+    border-radius: var(--radius);
+    box-shadow: var(--color-shadow-short);
+    display: flex;
+    justify-content: center;
+  }
+
+  .ui-modules-start-button
+  {
+    color: var(--color-fg);
+    font-size: var(--font-size);
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 25px;
+    align-items: center;
+  }
+
+  .ui-modules-start-button-icon
+  {
+    width: 70px;
+    height: 70px;
+    line-height: 68px !important;
+    font-size: 20px;
+    text-align: center;
+    background: var(--color-bg-bright-two);
+    border-radius: var(--radius);
+  }
+
+  .ui-modules-start-button-text
+  {
+    line-height: 1.3;
+    color: var(--color-fg-dim);
+
+    strong
+    {
+      display: inline-block;
+      margin-bottom: 5px;
+      color: var(--color-fg);
+    }
+  }
+
+  .ui-modules-select
+  {
+    width: 100%;
+    position: relative;
+  }
+
+  .ui-modules-select-close
+  {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .ui-modules-select-groups
+  {
+    display: flex;
+    margin-bottom: var(--padding);
+    //margin-left: -12px;
+  }
+
+  .ui-modules-select-group
+  {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 6px 6px 16px;
+    background: transparent;
+    border-radius: 30px;
+    font-size: var(--font-size-s);
+
+    & + .ui-modules-select-group
+    {
+      margin-left: 20px;
+    }
+
+    .ui-modules-select-group-count
+    {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      background: var(--color-bg-dim);
+      margin-left: 12px;
+      font-size: 10px;
+      line-height: 1;
+      color: var(--color-fg-dim);
+    }
+
+    &.is-active
+    {
+      background: var(--color-bg-bright-two);
+
+      .ui-modules-select-group-count
+      {
+        background: var(--color-bg-bright);
+        color: var(--color-fg);
+      }
+    }
+  }
+
+  .ui-modules-select-items
+  {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    align-items: stretch;
+  }
+
+  .ui-modules-select-item
+  {
+    display: grid;
+    grid-template-columns: 76px 1fr;
+    align-items: center;
+    height: 100px;
+    border-radius: var(--radius);
+    background: var(--color-bg-bright-two);
+    padding: 10px var(--padding) 10px 0;
+    position: relative;
+
+    &[disabled]
+    {
+      opacity: .6;
+    }
+
+    &:hover
+    {
+      background: var(--color-bg-bright-three);
+    }
+  }
+
+  .ui-modules-select-item-icon
+  {
+    display: inline-flex;
+    justify-content: center;
+    color: var(--color-fg-dim);
+    font-size: 26px;
+  }
+
+  .ui-modules-select-item-text
+  {
+    strong
+    {
+      display: block;
+      margin-bottom: 3px;
+    }
+
+    .is-minor
+    {
+      color: var(--color-fg-dim);
+      font-size: var(--font-size-s);
+    }
+  }
+
+  .ui-modules-select-item-disabled
+  {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    display: inline-flex;
+    align-items: center;
+    font-size: 8px;
+    text-transform: uppercase;
+    color: var(--color-fg-dim-two);
+    line-height: 1;
+    font-weight: 600;
+
+    i
+    {
+      margin-left: 6px;
+      font-size: 13px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
new file mode 100644
index 00000000..e779cd0d
--- /dev/null
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="ui-modules-inner">
+    <ui-modules-select v-if="canAdd" />
+  </div>
+</template>
+
+
+<script>
+  import ModulesApi from 'zero/resources/modules.js';
+
+  export default {
+    name: 'uiModules',
+
+    props: {
+      value: [String, Object, Array],
+      config: Object
+    },
+
+
+    data: () => ({
+      canAdd: true,
+      isSelecting: false,
+      moduleTypes: []
+    }),
+
+
+    methods: {
+
+      start()
+      {
+        this.isSelecting = true;
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import './Sass/Modules/box';
+
+  .ui-property.ui-modules
+  {
+    width: 100%;
+    margin: 0;
+    margin-top: var(--padding);
+  }
+
+  .ui-modules-start
+  {
+    margin: 0;
+    padding: var(--padding);
+    background: var(--color-bg-bright);
+    border-radius: var(--radius);
+    box-shadow: var(--color-shadow-short);
+    display: flex;
+    justify-content: center;
+  }
+
+  .ui-modules-start-button
+  {
+    color: var(--color-fg);
+    font-size: var(--font-size);
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 25px;
+    align-items: center;
+  }
+
+  .ui-modules-start-button-icon
+  {
+    width: 70px;
+    height: 70px;
+    line-height: 68px !important;
+    font-size: 20px;
+    text-align: center;
+    background: var(--color-bg-bright-two);
+    border-radius: var(--radius);
+  }
+
+  .ui-modules-start-button-text
+  {
+    line-height: 1.3;
+    color: var(--color-fg-dim);
+
+    strong
+    {
+      display: inline-block;
+      margin-bottom: 5px;
+      color: var(--color-fg);
+    }
+
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/modules.vue b/zero.Web.UI/App/editor/fields/modules.vue
index 49753737..7fc6ab65 100644
--- a/zero.Web.UI/App/editor/fields/modules.vue
+++ b/zero.Web.UI/App/editor/fields/modules.vue
@@ -1,77 +1,15 @@
 <template>
-  <div class="ui-modules-inner">
-     <div class="ui-modules-start">
-       <button type="button" class="ui-modules-start-button">
-         <i class="ui-modules-start-button-icon fth-plus"></i>
-         <p class="ui-modules-start-button-text"><strong>Add content</strong> <br>Compose the page by adding modules</p>
-       </button>
-     </div>
-  </div>
+  <ui-modules :value="value" @input="$emit('input', $event)" :config="config" />
 </template>
 
 
 <script>
   export default {
     props: {
-      value: String,
+      value: {
+        type: [String, Object, Array]
+      },
       config: Object
     }
   }
-</script>
-
-<style lang="scss">
-  @import './Sass/Modules/box';
-
-  .ui-property.ui-modules
-  {
-    width: 100%;
-    margin: 0;
-    margin-top: var(--padding);
-  }
-
-  .ui-modules-start
-  {
-    margin: 0;
-    padding: var(--padding);
-    background: var(--color-bg-bright);
-    border-radius: var(--radius);
-    box-shadow: var(--color-shadow-short);
-    display: flex;
-    justify-content: center;
-  }
-
-  .ui-modules-start-button
-  {
-    color: var(--color-fg);
-    font-size: var(--font-size);
-    display: inline-grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 25px;
-    align-items: center;
-  }
-
-  .ui-modules-start-button-icon
-  {
-    width: 70px;
-    height: 70px;
-    line-height: 68px !important;
-    font-size: 20px;
-    text-align: center;
-    background: var(--color-bg-bright-two);
-    border-radius: var(--radius);
-  }
-
-  .ui-modules-start-button-text
-  {
-    line-height: 1.3;
-    color: var(--color-fg-dim);
-
-    strong
-    {
-      display: inline-block;
-      margin-bottom: 5px;
-      color: var(--color-fg);
-    }
-
-  }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/resources/modules.js b/zero.Web.UI/App/resources/modules.js
new file mode 100644
index 00000000..d234e222
--- /dev/null
+++ b/zero.Web.UI/App/resources/modules.js
@@ -0,0 +1,16 @@
+import Axios from 'axios';
+
+const base = 'modules/';
+
+export default {
+
+  getModuleTypes()
+  {
+    return Axios.get(base + 'getModuleTypes').then(res => Promise.resolve(res.data));
+  },
+
+  getModuleType(alias)
+  {
+    return Axios.get(base + 'getModuleType', { params: { alias } }).then(res => Promise.resolve(res.data));
+  }
+};
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Core/_settings.scss b/zero.Web.UI/Sass/Core/_settings.scss
index 4cbb786a..f2044bc9 100644
--- a/zero.Web.UI/Sass/Core/_settings.scss
+++ b/zero.Web.UI/Sass/Core/_settings.scss
@@ -122,7 +122,7 @@
   --color-bg: #191e25;
   --color-bg-bright: #{darken($color-shade-base, 2%)};
   --color-bg-bright-two: #{desaturate(lighten($color-shade-base, 2%), 3%)};
-  --color-bg-bright-three: #{desaturate(lighten($color-shade-base, 6%), 3%)};
+  --color-bg-bright-three: #{desaturate(lighten($color-shade-base, 6%), 5%)};
   --color-bg-dim: #{darken($color-shade-base, 4%)};
   /*$color-shade-base: #141617;
   --color-bg: #141617;
diff --git a/zero.Web/Controllers/ModulesController.cs b/zero.Web/Controllers/ModulesController.cs
new file mode 100644
index 00000000..c131e7e4
--- /dev/null
+++ b/zero.Web/Controllers/ModulesController.cs
@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Mvc;
+using zero.Core.Api;
+
+namespace zero.Web.Controllers
+{
+  public class ModulesController : BackofficeController
+  {
+    IModulesApi Api;
+
+    public ModulesController(IModulesApi api)
+    {
+      Api = api;
+    }
+
+
+    public IActionResult GetModuleTypes() => Json(Api.GetModuleTypes());
+ 
+    public IActionResult GetModuleType([FromQuery] string alias) => Json(Api.GetModuleType(alias));
+  }
+}
diff --git a/zero.Web/Defaults/ZeroBackofficePlugin.cs b/zero.Web/Defaults/ZeroBackofficePlugin.cs
index cbe875bb..49a6f4cc 100644
--- a/zero.Web/Defaults/ZeroBackofficePlugin.cs
+++ b/zero.Web/Defaults/ZeroBackofficePlugin.cs
@@ -48,6 +48,7 @@ namespace zero.Web.Defaults
       services.AddTransient<IMediaFolderApi, MediaFolderApi>();
       services.AddTransient<IMediaUploadApi, MediaUploadApi>();
       services.AddTransient<IMediaUpload, MediaUpload>();
+      services.AddTransient<IModulesApi, ModulesApi>();
     }
     
     public void Configure(IZeroPluginOptions plugin, IZeroOptions zero)
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 9eed6ff8..cbf9ad87 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -161,7 +161,6 @@
     "success": "Deleted",
     "success_text": "You have successfully deleted this entity",
     "page_text": "This will delete the page and all its descendants. Are you sure?",
-    "success": "Deleted",
     "page_success_text": "You have successfully deleted this page"
   },
 
@@ -325,6 +324,14 @@
     }
   },
 
+  "modules": {
+    "add": {
+      "title": "Add content",
+      "text": "Compose the page by adding modules"
+    },
+    "default_group": "Default"
+  },
+
   "page": {
     "name": "Page",