diff --git a/zero.Core/Api/PermissionsApi.cs b/zero.Core/Api/PermissionsApi.cs
index 960e4164..a75bad96 100644
--- a/zero.Core/Api/PermissionsApi.cs
+++ b/zero.Core/Api/PermissionsApi.cs
@@ -10,7 +10,6 @@ namespace zero.Core.Api
   {
     protected IZeroOptions Options { get; set; }
 
-
     public PermissionsApi(IZeroOptions options)
     {
       Options = options;
@@ -22,6 +21,7 @@ namespace zero.Core.Api
     {
       List<PermissionCollection> result = Options.Permissions.GetAllItems().ToList();
       PermissionCollection spaceCollection = result.FirstOrDefault(x => x.Alias == Constants.PermissionCollections.Spaces);
+      PermissionCollection moduleCollection = result.FirstOrDefault(x => x.Alias == Constants.PermissionCollections.Modules);
 
       if (spaceCollection != null)
       {
@@ -33,6 +33,16 @@ namespace zero.Core.Api
         }
       }
 
+      if (moduleCollection != null)
+      {
+        moduleCollection.Items.Clear();
+
+        foreach (ModuleType module in Options.Modules.GetAllItems())
+        {
+          moduleCollection.Items.Add(new Permission(Permissions.Modules.PREFIX + module.Alias, module.Name, module.Description, PermissionValueType.CRUD));
+        }
+      }
+
       return result;
     }
   }
diff --git a/zero.Core/Constants.cs b/zero.Core/Constants.cs
index 7edfab27..e0a55733 100644
--- a/zero.Core/Constants.cs
+++ b/zero.Core/Constants.cs
@@ -64,6 +64,8 @@
       public const string Spaces = "permissionCollectionSpaces";
 
       public const string Settings = "permisssionCollectionSettings";
+
+      public const string Modules = "permissionCollectionModules";
     }
   }
 }
diff --git a/zero.Core/Identity/Permissions.cs b/zero.Core/Identity/Permissions.cs
index 39190e9d..9dc9c61b 100644
--- a/zero.Core/Identity/Permissions.cs
+++ b/zero.Core/Identity/Permissions.cs
@@ -39,6 +39,12 @@
     {
       public const string PREFIX = "space.";
     }
+
+
+    public struct Modules
+    {
+      public const string PREFIX = "module.";
+    }
   }
 
 
diff --git a/zero.Web.UI/App/components/datagrid/datagrid.vue b/zero.Web.UI/App/components/datagrid/datagrid.vue
index 0859cca3..a11294a4 100644
--- a/zero.Web.UI/App/components/datagrid/datagrid.vue
+++ b/zero.Web.UI/App/components/datagrid/datagrid.vue
@@ -181,7 +181,7 @@
   .ui-datagrid-items
   {
     display: grid;
-    grid-gap: var(--padding);
+    gap: var(--padding);
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     align-items: stretch;
   }
diff --git a/zero.Web.UI/App/components/forms/media-old.vue b/zero.Web.UI/App/components/forms/media-old.vue
index 5265e0a8..22bb3a89 100644
--- a/zero.Web.UI/App/components/forms/media-old.vue
+++ b/zero.Web.UI/App/components/forms/media-old.vue
@@ -334,7 +334,7 @@
     .display-grid &
     {
       display: flex;
-      grid-gap: 10px;
+      gap: 10px;
 
       .ui-media-preview + .ui-media-preview
       {
diff --git a/zero.Web.UI/App/components/messages/message.vue b/zero.Web.UI/App/components/messages/message.vue
index 53bc20af..95f1fae0 100644
--- a/zero.Web.UI/App/components/messages/message.vue
+++ b/zero.Web.UI/App/components/messages/message.vue
@@ -71,7 +71,7 @@
     display: inline-grid;
     padding: 8px 12px 7px 12px;
     grid-template-columns: auto 1fr;
-    grid-gap: 12px;
+    gap: 12px;
     border-radius: var(--radius);
     position: relative;
     line-height: 20px;
diff --git a/zero.Web.UI/App/components/modules/modules-select.vue b/zero.Web.UI/App/components/modules/modules-select.vue
index 56f278cd..5eae7d8d 100644
--- a/zero.Web.UI/App/components/modules/modules-select.vue
+++ b/zero.Web.UI/App/components/modules/modules-select.vue
@@ -148,7 +148,7 @@
     font-size: var(--font-size);
     display: inline-grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 25px;
+    gap: 25px;
     align-items: center;
   }
 
@@ -241,7 +241,7 @@
   .ui-modules-select-items
   {
     display: grid;
-    grid-gap: 10px;
+    gap: 10px;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     align-items: stretch;
   }
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
index 87b23840..345e9e7e 100644
--- a/zero.Web.UI/App/components/modules/modules.vue
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -160,7 +160,7 @@
     font-size: var(--font-size);
     display: inline-grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 25px;
+    gap: 25px;
     align-items: center;
   }
 
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 4402c2a1..32fba50b 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
@@ -71,7 +71,7 @@
     {
       display: grid;
       grid-template-columns: auto 1fr;
-      grid-gap: 20px;
+      gap: 20px;
       align-items: center;
     }
 
diff --git a/zero.Web.UI/App/components/notifications/notification-holder.vue b/zero.Web.UI/App/components/notifications/notification-holder.vue
index 7a5a9160..d829a697 100644
--- a/zero.Web.UI/App/components/notifications/notification-holder.vue
+++ b/zero.Web.UI/App/components/notifications/notification-holder.vue
@@ -46,7 +46,7 @@
   {
     display: grid;
     grid-template-columns: 1fr auto;
-    grid-gap: 20px;
+    gap: 20px;
     align-items: center;
     background: var(--color-primary);
     color: var(--color-primary-fg);
diff --git a/zero.Web.UI/App/components/overlays/dropdown-button.vue b/zero.Web.UI/App/components/overlays/dropdown-button.vue
index 769c4983..6a7ca358 100644
--- a/zero.Web.UI/App/components/overlays/dropdown-button.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown-button.vue
@@ -115,7 +115,7 @@
     display: grid;
     width: 100%;
     grid-template-columns: 1fr auto;
-    grid-gap: 6px;
+    gap: 6px;
     align-items: center;
     font-size: var(--font-size);
     padding: 0 16px;
diff --git a/zero.Web.UI/App/components/permissions.vue b/zero.Web.UI/App/components/permissions.vue
index b19b8451..0f4b5b2d 100644
--- a/zero.Web.UI/App/components/permissions.vue
+++ b/zero.Web.UI/App/components/permissions.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="ui-permissions ui-box">
-    <ui-property v-for="(permissionCollection, index) in permissions" :key="index" :label="permissionCollection.label" :description="permissionCollection.description">
-      <ui-error field="Claims" />
-      <ui-property v-for="(permission, index) in permissionCollection.items" :key="index" class="role-permission-toggle" :label="permission.label" :description="permission.description">
-        <ui-toggle v-if="permission.valueType === 'boolean'" :disabled="disabled" v-model="permission.value" @input="onChange" />
-        <div class="ui-permissions-crud" v-if="permission.valueType === 'crud'">
-          <ui-toggle :value="permission.value != 'none'" :disabled="disabled" @input="onPermissionToggle($event, permission)" />
-          <ui-check-list :value="permission.value.split(',')" :items="stateItems" v-if="permission.value != 'none'" :inline="true" @input="onPermissionCRUDChecked($event, permission)" />
-        </div>
-        <!--<ui-state-button v-if="permission.valueType === 'crud'" :disabled="disabled" :items="stateItems" v-model="permission.value" @input="onChange" />-->
-        <input v-if="permission.valueType === 'string'" :disabled="disabled" v-model="permission.value" type="text" class="ui-input" @input="onChange" />
-      </ui-property>
-    </ui-property>
+  <div>
+    <ui-inline-tabs v-if="permissions.length" class="ui-permissions" :force-count="true">
+      <ui-tab v-for="(permissionCollection, index) in permissions" :key="index" :label="permissionCollection.label" :title="permissionCollection.description" :count="getCount(permissionCollection)">
+        <ui-error field="Claims" />
+        <ui-property v-for="(permission, index) in permissionCollection.items" :key="index" class="role-permission-toggle" :label="permission.label" :description="permission.description">
+          <ui-toggle v-if="permission.valueType === 'boolean'" :disabled="disabled" v-model="permission.value" @input="onChange" />
+          <div class="ui-permissions-crud" v-if="permission.valueType === 'crud'">
+            <ui-toggle :value="permission.value != 'none'" :disabled="disabled" @input="onPermissionToggle($event, permission)" />
+            <ui-check-list :value="permission.value.split(',')" :items="stateItems" v-if="permission.value != 'none'" :inline="true" @input="onPermissionCRUDChecked($event, permission)" />
+          </div>
+          <!--<input v-if="permission.valueType === 'string'" :disabled="disabled" v-model="permission.value" type="text" class="ui-input" @input="onChange" />-->
+        </ui-property>
+      </ui-tab>
+    </ui-inline-tabs>
   </div>
 </template>
 
 
 <script>
   import UserRolesApi from 'zero/resources/userRoles';
+  import { filter as _filter } from 'underscore';
 
   export default {
     name: 'uiPermissions',
@@ -86,6 +88,16 @@
         });
       },
 
+
+      getCount(permissionGroup)
+      {
+        return _filter(permissionGroup.items, claim =>
+        {
+          return claim.value !== 'none' && claim.value !== 'false' && !!claim.value;
+        }).length;
+      },
+
+
       onChange()
       {
         let claims = [];
@@ -169,6 +181,15 @@
     width: 300px;
   }
 
+  .ui-permissions .ui-tab
+  {
+    border-top: 2px solid var(--color-line);
+    padding-top: var(--padding);
+    //background: var(--color-bg-dim);
+    //border-radius: var(--radius);
+    //padding: var(--padding);
+  }
+
   .role-permission-toggle
   {
     border-top-width: 0 !important;
diff --git a/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue b/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue
index 14cbcdb3..a6b470cf 100644
--- a/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/iconPicker/overlay.vue
@@ -135,7 +135,7 @@
   .ui-iconpicker-overlay-items
   {
     display: grid;
-    grid-gap: 0;
+    gap: 0;
     grid-template-columns: repeat(auto-fill, 61px);
     align-items: stretch;
   }
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
index 81636172..cf24190e 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
@@ -268,7 +268,7 @@
     .display-grid &
     {
       display: flex;
-      grid-gap: 10px;
+      gap: 10px;
 
       .ui-mediapicker-preview + .ui-mediapicker-preview
       {
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
index 685dbacf..97d0360c 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
@@ -270,7 +270,7 @@
     height: 70px;
     display: grid;
     grid-template-columns: 70px 1fr;
-    grid-gap: 15px;
+    gap: 15px;
     align-items: center;
     line-height: 1.4;
 
diff --git a/zero.Web.UI/App/components/revisions.vue b/zero.Web.UI/App/components/revisions.vue
index e4ac6c13..ff250d0c 100644
--- a/zero.Web.UI/App/components/revisions.vue
+++ b/zero.Web.UI/App/components/revisions.vue
@@ -70,7 +70,7 @@
   {
     display: grid;
     grid-template-columns: auto 3fr 2fr auto;
-    grid-gap: 20px;
+    gap: 20px;
     align-items: center;
     min-height: 28px;
 
diff --git a/zero.Web.UI/App/components/tabs/inline-tabs.vue b/zero.Web.UI/App/components/tabs/inline-tabs.vue
new file mode 100644
index 00000000..820a7d3d
--- /dev/null
+++ b/zero.Web.UI/App/components/tabs/inline-tabs.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="ui-inline-tabs">
+    <nav role="tablist" class="ui-inline-tabs-list">
+      <button type="button" v-for="(tab, index) in tabs" class="ui-inline-tabs-list-item" :key="index" :class="{ 'is-active': tab.active, 'has-errors': tab.error }" :disabled="tab.disabled" 
+              :aria-selected="tab.active" role="tab" @click="select(index)">
+        <i v-if="tab.error" class="ui-inline-tabs-list-item-error fth-alert-circle"></i>
+        <span v-localize="tab.label"></span>
+        <i v-if="forceCount || tab.count > 0" class="ui-inline-tabs-list-item-count">{{tab.count}}</i>
+      </button>
+    </nav>
+    <div class="ui-inline-tabs-items">
+      <slot />
+    </div>
+  </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiTabs',
+
+    props: {
+      cache: {
+        type: String
+      },
+      active: {
+        type: Number,
+        default: 0
+      },
+      forceCount: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data: () => ({
+      storageKey: null,
+      tabs: []
+    }),
+
+    created()
+    {
+      this.cacheKey = this.cache ? `zero.ui-inline-tabs.cache.${this.cache}` : null;
+      this.tabs = this.$children;
+    },
+
+    mounted()
+    {
+      if (this.cache)
+      {
+        const cachedActiveTab = localStorage.getItem(this.cacheKey);
+        if (cachedActiveTab !== null)
+        {
+          this.select(+cachedActiveTab);
+          return;
+        }
+      }
+
+      this.select(this.active);
+    },
+
+    methods: {
+
+      select(index, ev)
+      {
+        if (ev)
+        {
+          ev.preventDefault();
+        }
+
+        const currentTab = this.tabs[index];
+
+        if (currentTab.disabled)
+        {
+          return;
+        }
+
+        this.tabs.forEach((tab, tabIndex) =>
+        {
+          tab.active = index === tabIndex;
+        });
+
+        if (this.cache)
+        {
+          localStorage.setItem(this.cacheKey, index);
+        }
+
+        //this.$emit('changed', { tab: selectedTab });
+        //this.activeTabHash = selectedTab.hash;
+        //this.activeTabIndex = this.getTabIndex(selectedTabHash);
+        //this.lastActiveTabHash = this.activeTabHash = selectedTab.hash;
+        //expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-inline-tabs-list
+  {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: var(--padding);
+    margin-left: -2px;
+  }
+
+  .ui-inline-tabs-list-item
+  {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 16px 6px 16px;
+    background: transparent;
+    border-radius: 30px;
+    font-size: var(--font-size-s);
+
+    .ui-inline-tabs-list-item-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: 11px;
+      line-height: 1;
+      color: var(--color-fg-dim);
+      font-style: normal;
+    }
+
+    &.is-active
+    {
+      background: var(--color-bg-bright-two);
+
+      .ui-inline-tabs-list-item-count
+      {
+        background: var(--color-bg-bright);
+        color: var(--color-fg);
+      }
+    }
+  }
+
+  .ui-inline-tabs-list-item-error
+  {
+    display: inline-block;
+    float: left;
+    font-size: 16px;
+    margin-right: 6px;
+    margin-left: -4px;
+    position: relative;
+    margin-top: -4px;
+    top: 1px;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
index eb6c1c7f..466e8578 100644
--- a/zero.Web.UI/App/components/tree/tree-item.vue
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -151,7 +151,7 @@
   {
     display: grid;
     grid-template-columns: 30px 1fr auto;
-    grid-gap: 6px;
+    gap: 6px;
     height: 100%;
     align-items: center;
     position: relative;    
diff --git a/zero.Web.UI/App/editor/fields/nested.vue b/zero.Web.UI/App/editor/fields/nested.vue
index 5fc4dd9b..30256f1b 100644
--- a/zero.Web.UI/App/editor/fields/nested.vue
+++ b/zero.Web.UI/App/editor/fields/nested.vue
@@ -141,7 +141,7 @@
   {
     display: grid;
     grid-template-columns: 30px 1fr auto;
-    grid-gap: 6px;
+    gap: 6px;
     height: 100%;
     align-items: center;
     position: relative;
diff --git a/zero.Web.UI/App/pages/dashboard/dashboard.vue b/zero.Web.UI/App/pages/dashboard/dashboard.vue
index f7abe1fa..7cf631d8 100644
--- a/zero.Web.UI/App/pages/dashboard/dashboard.vue
+++ b/zero.Web.UI/App/pages/dashboard/dashboard.vue
@@ -30,7 +30,7 @@
     display: grid;
     padding: 20px;
     padding-left: 0;
-    grid-gap: 16px;
+    gap: 16px;
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
     grid-auto-rows: minmax(240px, auto);
     grid-auto-flow: dense;
diff --git a/zero.Web.UI/App/pages/media/media.vue b/zero.Web.UI/App/pages/media/media.vue
index 9e4e7ebb..7275ca97 100644
--- a/zero.Web.UI/App/pages/media/media.vue
+++ b/zero.Web.UI/App/pages/media/media.vue
@@ -273,7 +273,7 @@
     overflow-y: auto;
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 2px;
+    gap: 2px;
     justify-content: stretch;
   }
 
@@ -287,7 +287,7 @@
   {
     /*display: grid;
     flex-wrap: wrap;*/
-    grid-gap: 15px;
+    gap: 15px;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
     align-items: stretch;
   }
diff --git a/zero.Web.UI/App/pages/media/upload-status.vue b/zero.Web.UI/App/pages/media/upload-status.vue
index 3f646980..3b374b95 100644
--- a/zero.Web.UI/App/pages/media/upload-status.vue
+++ b/zero.Web.UI/App/pages/media/upload-status.vue
@@ -136,7 +136,7 @@
     height: 70px;
     display: grid;
     grid-template-columns: 70px 1fr;
-    grid-gap: 15px;
+    gap: 15px;
     align-items: center;
     line-height: 1.4;
 
diff --git a/zero.Web.UI/App/pages/pages/overlays/create.vue b/zero.Web.UI/App/pages/pages/overlays/create.vue
index d4ab191e..67eb2255 100644
--- a/zero.Web.UI/App/pages/pages/overlays/create.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/create.vue
@@ -114,7 +114,7 @@
     display: grid;
     width: 100%;
     grid-template-columns: 30px 1fr auto;
-    grid-gap: 6px;
+    gap: 6px;
     align-items: center;
     position: relative;
     color: var(--color-fg);
diff --git a/zero.Web.UI/App/pages/pages/overlays/sort.vue b/zero.Web.UI/App/pages/pages/overlays/sort.vue
index 5354d490..fbe815a3 100644
--- a/zero.Web.UI/App/pages/pages/overlays/sort.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/sort.vue
@@ -103,7 +103,7 @@
     display: grid;
     width: 100%;
     grid-template-columns: 1fr auto;
-    grid-gap: 6px;
+    gap: 6px;
     align-items: center;
     font-size: var(--font-size);
     height: 46px;
diff --git a/zero.Web.UI/App/pages/pages/pages.vue b/zero.Web.UI/App/pages/pages/pages.vue
index 6a9ad26f..889b9c8c 100644
--- a/zero.Web.UI/App/pages/pages/pages.vue
+++ b/zero.Web.UI/App/pages/pages/pages.vue
@@ -240,7 +240,7 @@
   {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 2px;
+    gap: 2px;
     justify-content: stretch;
     height: 100vh;
   }
@@ -260,7 +260,7 @@
     font-size: var(--font-size);
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 35px;
+    gap: 35px;
     align-items: center;
 
     & + .page-overview-action
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 21777f00..43363e13 100644
--- a/zero.Web.UI/App/pages/pages/recyclebin/recyclebin-actions.vue
+++ b/zero.Web.UI/App/pages/pages/recyclebin/recyclebin-actions.vue
@@ -111,7 +111,7 @@
   {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: var(--padding);
+    gap: var(--padding);
     align-items: center;
     width: 100%;
     background: var(--color-bg-bright);
diff --git a/zero.Web.UI/App/pages/settings/applications-items.vue b/zero.Web.UI/App/pages/settings/applications-items.vue
index 2ddaed2a..235ec488 100644
--- a/zero.Web.UI/App/pages/settings/applications-items.vue
+++ b/zero.Web.UI/App/pages/settings/applications-items.vue
@@ -52,7 +52,7 @@
   .apps-items
   {
     display: grid;
-    grid-gap: var(--padding);
+    gap: var(--padding);
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     align-items: stretch;
     margin-top: 40px;
diff --git a/zero.Web.UI/App/pages/settings/role.vue b/zero.Web.UI/App/pages/settings/role.vue
index 80bb41c3..cebdd70a 100644
--- a/zero.Web.UI/App/pages/settings/role.vue
+++ b/zero.Web.UI/App/pages/settings/role.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="role" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@role.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="userRole" v-model="model" :meta="meta" :active-toggle="false" />
+    <ui-editor config="userRole" v-model="model" :meta="meta" :active-toggle="false" :active-tab="1" />
   </ui-form>
 </template>
 
diff --git a/zero.Web.UI/App/pages/settings/settings.vue b/zero.Web.UI/App/pages/settings/settings.vue
index 40d0e546..60e51c64 100644
--- a/zero.Web.UI/App/pages/settings/settings.vue
+++ b/zero.Web.UI/App/pages/settings/settings.vue
@@ -64,7 +64,7 @@
     width: 100%;
     max-width: 2000px;
     display: grid;
-    grid-gap: 80px 40px;
+    gap: 80px 40px;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     padding-left: 80px;
   }
@@ -72,7 +72,7 @@
   .settings-group-items
   {
     display: grid;
-    grid-gap: 30px 20px;
+    gap: 30px 20px;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     align-items: stretch;
     margin-top: 40px;
@@ -84,7 +84,7 @@
     font-size: var(--font-size);
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 20px;
+    gap: 20px;
     align-items: center;
   }
 
diff --git a/zero.Web.UI/App/pages/settings/users.vue b/zero.Web.UI/App/pages/settings/users.vue
index ca2c01a4..51eec534 100644
--- a/zero.Web.UI/App/pages/settings/users.vue
+++ b/zero.Web.UI/App/pages/settings/users.vue
@@ -129,7 +129,7 @@
   .users-roles
   {
     display: grid;
-    grid-gap: var(--padding);
+    gap: var(--padding);
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     align-items: stretch;
     margin-bottom: calc(var(--padding) * 2);
diff --git a/zero.Web.UI/App/pages/spaces/spaces.vue b/zero.Web.UI/App/pages/spaces/spaces.vue
index 91f77f0f..d52f6222 100644
--- a/zero.Web.UI/App/pages/spaces/spaces.vue
+++ b/zero.Web.UI/App/pages/spaces/spaces.vue
@@ -149,7 +149,7 @@
   {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 2px;
+    gap: 2px;
     justify-content: stretch;
     height: 100vh;
   }
@@ -207,7 +207,7 @@
   {
     display: grid;
     grid-template-columns: 30px 1fr auto;
-    grid-gap: 6px;
+    gap: 6px;
     height: 100%;
     align-items: center;
     position: relative;
diff --git a/zero.Web.UI/Sass/Canvas/_canvas.scss b/zero.Web.UI/Sass/Canvas/_canvas.scss
index 8f28065d..e020beda 100644
--- a/zero.Web.UI/Sass/Canvas/_canvas.scss
+++ b/zero.Web.UI/Sass/Canvas/_canvas.scss
@@ -61,7 +61,7 @@ body
 {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: var(--padding);
+  gap: var(--padding);
   align-items: stretch;
   justify-content: stretch;
 
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 9b2473c5..0cc973f9 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -56,7 +56,7 @@ a.app-nav-item
 {
   display: grid;
   grid-template-columns: 30px 1fr auto;
-  grid-gap: 6px;
+  gap: 6px;
   align-items: center;
   font-size: var(--font-size);
   padding: 0 var(--padding);
@@ -158,7 +158,7 @@ a.app-nav-child
   display: grid;
   width: 100%;
   grid-template-columns: auto 1fr auto;
-  grid-gap: 16px;
+  gap: 16px;
   color: var(--color-fg-dim-two);
   align-items: center;
 
diff --git a/zero.Web.UI/Sass/Modules/_box.scss b/zero.Web.UI/Sass/Modules/_box.scss
index f4d0b099..4036974b 100644
--- a/zero.Web.UI/Sass/Modules/_box.scss
+++ b/zero.Web.UI/Sass/Modules/_box.scss
@@ -62,7 +62,7 @@
   {
     display: grid;
     grid-template-columns: 1fr auto;
-    grid-gap: 16px;
+    gap: 16px;
   }
 
   .ui-box, .ui-blank-box
diff --git a/zero.Web/Defaults/ModulePermissions.cs b/zero.Web/Defaults/ModulePermissions.cs
new file mode 100644
index 00000000..3adccf27
--- /dev/null
+++ b/zero.Web/Defaults/ModulePermissions.cs
@@ -0,0 +1,17 @@
+using zero.Core;
+using zero.Core.Identity;
+
+namespace zero.Web.Defaults
+{
+  public class ModulePermissions : PermissionCollection
+  {
+    public ModulePermissions()
+    {
+      Alias = Constants.PermissionCollections.Modules;
+      Label = "@permission.collections.modules";
+      Description = "@permission.collections.modules_description";
+
+      // Items get added at runtime
+    }
+  }
+}
diff --git a/zero.Web/Defaults/ZeroBackofficePlugin.cs b/zero.Web/Defaults/ZeroBackofficePlugin.cs
index 1a44798a..8407b14a 100644
--- a/zero.Web/Defaults/ZeroBackofficePlugin.cs
+++ b/zero.Web/Defaults/ZeroBackofficePlugin.cs
@@ -73,6 +73,7 @@ namespace zero.Web.Defaults
       zero.Mapper.Add<SpaceMapperConfig>();
 
       zero.Permissions.AddCollection<SectionPermissions>();
+      zero.Permissions.AddCollection<ModulePermissions>();
       zero.Permissions.AddCollection<SettingsPermissions>();
       zero.Permissions.AddCollection<SpacePermissions>();
     }
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index bc556817..dbc29e29 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -286,12 +286,14 @@
       "none": "None"
     },
     "collections": {
-      "sections": "Access to sections",
+      "sections": "Sections",
       "sections_description": "Allow access to the following sections",
-      "settings": "Access to settings",
+      "settings": "Settings",
       "settings_description": "Define read and write access for settings areas",
-      "spaces": "Access to spaces",
-      "spaces_description": "Granular control of spaces"
+      "spaces": "Spaces",
+      "spaces_description": "Granular control of spaces",
+      "modules": "Modules",
+      "modules_description": "Availability of composing block modules"
     }
   },