diff --git a/app/views/console/comps/permissions-matrix.phtml b/app/views/console/comps/permissions-matrix.phtml
index 6a688d0629..7dd80c19cd 100644
--- a/app/views/console/comps/permissions-matrix.phtml
+++ b/app/views/console/comps/permissions-matrix.phtml
@@ -46,8 +46,20 @@ $escapedPermissions = \array_map(function ($perm) {
         <?php endif; ?>
         :value="rawPermissions"/>
 
-    <table class="u-table-layout-normal" data-ls-attrs="x-init=load({{<?php if (!empty($data)) echo $data . '.$permissions' ?>}})">
-        <thead>
+    <datalist id="types">
+        <option value="user:">
+        <option value="team:">
+        <option value="member:">
+        <option value="users">
+        <option value="guests">
+        <option value="any">
+    </datalist>
+
+    <table
+        class="u-table-layout-normal"
+        data-ls-attrs="x-init=load({{<?php if (!empty($data)) echo $data . '.$permissions' ?>}})">
+
+        <thead x-show="permissions.length > 0">
         <tr>
             <th>Role</th>
             <?php foreach ($permissions as $permission): ?>
@@ -60,7 +72,16 @@ $escapedPermissions = \array_map(function ($perm) {
         <template x-for="(permission, index) in permissions">
             <tr>
                 <td>
-                    <p x-text="permission.role"></p>
+                    <input
+                        required
+                        autocomplete="off"
+                        :id="'<?php echo $form; ?>Input' + index"
+                        name="<?php echo $form; ?>"
+                        form="<?php echo $form ?>"
+                        list="types"
+                        type="text"
+                        x-model="permission.role"
+                        @keyup="updatePermission(index)"/>
                 </td>
                 <?php foreach ($escapedPermissions as $permission): ?>
                     <td>
@@ -78,38 +99,11 @@ $escapedPermissions = \array_map(function ($perm) {
                 </td>
             </tr>
         </template>
-        <tr x-data="permissionsRow"
-            @addrow<?php echo \strtolower($form); ?>.window="addPermission('<?php echo $form; ?>', role, { <?php echo \implode(',', $escapedPermissions) ?> })">
-            <td>
-                <datalist id="types">
-                    <option value="user:">
-                    <option value="team:">
-                    <option value="users">
-                    <option value="guests">
-                    <option value="any">
-                </datalist>
-
-                <input
-                    required
-                    id="<?php echo $form; ?>Input"
-                    name="<?php echo $form; ?>"
-                    form="<?php echo $form ?>"
-                    list="types"
-                    type="text"
-                    x-model="role" />
-            </td>
-            <?php foreach ($escapedPermissions as $permission): ?>
-                <td>
-                    <input type="checkbox" name="<?php echo $permission ?>" x-model="<?php echo $permission; ?>"/>
-                </td>
-            <?php endforeach; ?>
-            <td></td>
-        </tr>
         </tbody>
         <tfoot>
         <tr>
             <td colspan="<?php \count($permissions) + 2 ?>">
-                <button type="button" class="margin-top-small reverse" @click="$dispatch('addrow<?php echo \strtolower($form); ?>')">Add</button>
+                <button type="button" class="margin-top-small reverse" @click="addPermission('<?php echo $form  ?>')">Add Role</button>
             </td>
         </tr>
         </tfoot>
diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index 52f329f1e7..19a8d73470 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -4015,14 +4015,13 @@ if(this.action){event+=`.${this.action}`;}
 if(this.attribute){event+=`.${this.attribute}`;}
 this.events.add(event);this.reset();},removeEvent(value){this.events.delete(value);}}));});})(window);(function(window){document.addEventListener('alpine:init',()=>{Alpine.data('permissionsMatrix',()=>({permissions:[],rawPermissions:[],load(permissions){if(permissions===undefined){return;}
 this.rawPermissions=permissions;permissions.map(p=>{let{type,role}=this.parsePermission(p);type=this.parseInputPermission(type);let index=-1;let existing=this.permissions.find((p,idx)=>{if(p.role===role){index=idx;return true;}})
-if(existing===undefined){this.permissions.push({role,[type]:true,});}
-if(index!==-1){existing[type]=true;this.permissions[index]=existing;}});},addPermission(formId,role,permissions){if(!this.validate(formId,role,permissions)){return;}
-Object.entries(permissions).forEach(entry=>{let[type,enabled]=entry;type=this.parseOutputPermission(type);if(enabled){this.rawPermissions.push(this.buildPermission(type,role));}});this.permissions.push({role,...permissions,});this.reset();},updatePermission(index){setTimeout(()=>{const permission=this.permissions[index];Object.keys(permission).forEach(key=>{if(key==='role'){return;}
+if(existing===undefined){let newPermission={role,create:false,read:false,update:false,xdelete:false,};newPermission[type]=true;this.permissions.push(newPermission);}
+if(index!==-1){existing[type]=true;this.permissions[index]=existing;}});},addPermission(formId){if(this.permissions.length>0&&!this.validate(formId,this.permissions.length-1)){return;}
+this.permissions.push({role:'',create:false,read:false,update:false,xdelete:false,});},updatePermission(index){setTimeout(()=>{const permission=this.permissions[index];Object.keys(permission).forEach(key=>{if(key==='role'){return;}
 const parsedKey=this.parseOutputPermission(key);const permissionString=this.buildPermission(parsedKey,permission.role);if(permission[key]){if(!this.rawPermissions.includes(permissionString)){this.rawPermissions.push(permissionString);}}else{this.rawPermissions=this.rawPermissions.filter(p=>{return!p.includes(permissionString);});}});});},removePermission(index){let row=this.permissions.splice(index,1);if(row.length===1){this.rawPermissions=this.rawPermissions.filter(p=>!p.includes(row[0].role));}},parsePermission(permission){let parts=permission.split('(');let type=parts[0];let role=parts[1].replace(')','').replace(' ','').replaceAll('"','');return{type,role};},buildPermission(type,role){return`${type}("${role}")`},parseInputPermission(key){if(key==='delete'){return'xdelete';}
 return key;},parseOutputPermission(key){if(key==='xdelete'){return'delete';}
-return key;},validate(formId,role,permissions){const form=document.getElementById(formId);const input=document.getElementById(`${formId}Input`);input.setCustomValidity('');if(!Object.values(permissions).some(p=>p)){input.setCustomValidity('No permissions selected');}
-if(this.permissions.some(p=>p.role===role)){input.setCustomValidity('Role entry already exists');}
-return form.reportValidity();}}));Alpine.data('permissionsRow',()=>({role:'',read:false,create:false,update:false,xdelete:false,reset(){this.role='';this.read=this.create=this.update=this.xdelete=false;}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
+return key;},validate(formId,index){const form=document.getElementById(formId);const input=document.getElementById(`${formId}Input${index}`);const permission=this.permissions[index];input.setCustomValidity('');if(permission.role===''){input.setCustomValidity('Role is required');}else if(!Object.entries(permission).some(([k,v])=>!k.includes('role')&&v)){input.setCustomValidity('No permissions selected');}else if(this.permissions.some(p=>p.role===permission.role&&p!==permission)){input.setCustomValidity('Role entry already exists');}
+return form.reportValidity();},prevent(event){event.preventDefault();event.stopPropagation();}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
 throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},6000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
 router.change(url||"/");};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
 return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index ed3fc41d53..1ce692ef9f 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -603,14 +603,13 @@ if(this.action){event+=`.${this.action}`;}
 if(this.attribute){event+=`.${this.attribute}`;}
 this.events.add(event);this.reset();},removeEvent(value){this.events.delete(value);}}));});})(window);(function(window){document.addEventListener('alpine:init',()=>{Alpine.data('permissionsMatrix',()=>({permissions:[],rawPermissions:[],load(permissions){if(permissions===undefined){return;}
 this.rawPermissions=permissions;permissions.map(p=>{let{type,role}=this.parsePermission(p);type=this.parseInputPermission(type);let index=-1;let existing=this.permissions.find((p,idx)=>{if(p.role===role){index=idx;return true;}})
-if(existing===undefined){this.permissions.push({role,[type]:true,});}
-if(index!==-1){existing[type]=true;this.permissions[index]=existing;}});},addPermission(formId,role,permissions){if(!this.validate(formId,role,permissions)){return;}
-Object.entries(permissions).forEach(entry=>{let[type,enabled]=entry;type=this.parseOutputPermission(type);if(enabled){this.rawPermissions.push(this.buildPermission(type,role));}});this.permissions.push({role,...permissions,});this.reset();},updatePermission(index){setTimeout(()=>{const permission=this.permissions[index];Object.keys(permission).forEach(key=>{if(key==='role'){return;}
+if(existing===undefined){let newPermission={role,create:false,read:false,update:false,xdelete:false,};newPermission[type]=true;this.permissions.push(newPermission);}
+if(index!==-1){existing[type]=true;this.permissions[index]=existing;}});},addPermission(formId){if(this.permissions.length>0&&!this.validate(formId,this.permissions.length-1)){return;}
+this.permissions.push({role:'',create:false,read:false,update:false,xdelete:false,});},updatePermission(index){setTimeout(()=>{const permission=this.permissions[index];Object.keys(permission).forEach(key=>{if(key==='role'){return;}
 const parsedKey=this.parseOutputPermission(key);const permissionString=this.buildPermission(parsedKey,permission.role);if(permission[key]){if(!this.rawPermissions.includes(permissionString)){this.rawPermissions.push(permissionString);}}else{this.rawPermissions=this.rawPermissions.filter(p=>{return!p.includes(permissionString);});}});});},removePermission(index){let row=this.permissions.splice(index,1);if(row.length===1){this.rawPermissions=this.rawPermissions.filter(p=>!p.includes(row[0].role));}},parsePermission(permission){let parts=permission.split('(');let type=parts[0];let role=parts[1].replace(')','').replace(' ','').replaceAll('"','');return{type,role};},buildPermission(type,role){return`${type}("${role}")`},parseInputPermission(key){if(key==='delete'){return'xdelete';}
 return key;},parseOutputPermission(key){if(key==='xdelete'){return'delete';}
-return key;},validate(formId,role,permissions){const form=document.getElementById(formId);const input=document.getElementById(`${formId}Input`);input.setCustomValidity('');if(!Object.values(permissions).some(p=>p)){input.setCustomValidity('No permissions selected');}
-if(this.permissions.some(p=>p.role===role)){input.setCustomValidity('Role entry already exists');}
-return form.reportValidity();}}));Alpine.data('permissionsRow',()=>({role:'',read:false,create:false,update:false,xdelete:false,reset(){this.role='';this.read=this.create=this.update=this.xdelete=false;}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
+return key;},validate(formId,index){const form=document.getElementById(formId);const input=document.getElementById(`${formId}Input${index}`);const permission=this.permissions[index];input.setCustomValidity('');if(permission.role===''){input.setCustomValidity('Role is required');}else if(!Object.entries(permission).some(([k,v])=>!k.includes('role')&&v)){input.setCustomValidity('No permissions selected');}else if(this.permissions.some(p=>p.role===permission.role&&p!==permission)){input.setCustomValidity('Role entry already exists');}
+return form.reportValidity();},prevent(event){event.preventDefault();event.stopPropagation();}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
 throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},6000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
 router.change(url||"/");};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
 return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
diff --git a/public/scripts/permissions-matrix.js b/public/scripts/permissions-matrix.js
index a4d8cc53e9..81a869a8f4 100644
--- a/public/scripts/permissions-matrix.js
+++ b/public/scripts/permissions-matrix.js
@@ -22,10 +22,15 @@
                         }
                     })
                     if (existing === undefined) {
-                        this.permissions.push({
+                        let newPermission = {
                             role,
-                            [type]: true,
-                        });
+                            create: false,
+                            read: false,
+                            update: false,
+                            xdelete: false,
+                        };
+                        newPermission[type] = true;
+                        this.permissions.push(newPermission);
                     }
                     if (index !== -1) {
                         existing[type] = true;
@@ -33,22 +38,18 @@
                     }
                 });
             },
-            addPermission(formId, role, permissions) {
-                if (!this.validate(formId, role, permissions)) {
+            addPermission(formId) {
+                if (this.permissions.length > 0
+                    && !this.validate(formId, this.permissions.length - 1)) {
                     return;
                 }
-                Object.entries(permissions).forEach(entry => {
-                    let [type, enabled] = entry;
-                    type = this.parseOutputPermission(type);
-                    if (enabled) {
-                        this.rawPermissions.push(this.buildPermission(type, role));
-                    }
-                });
                 this.permissions.push({
-                    role,
-                    ...permissions,
+                    role: '',
+                    create: false,
+                    read: false,
+                    update: false,
+                    xdelete: false,
                 });
-                this.reset();
             },
             updatePermission(index) {
                 // Because the x-model does not update before the click event,
@@ -106,31 +107,26 @@
                 }
                 return key;
             },
-            validate(formId, role, permissions) {
+            validate(formId, index) {
                 const form = document.getElementById(formId);
-                const input = document.getElementById(`${formId}Input`);
+                const input = document.getElementById(`${formId}Input${index}`);
+                const permission = this.permissions[index];
 
                 input.setCustomValidity('');
 
-                if (!Object.values(permissions).some(p => p)) {
+                if (permission.role === '') {
+                    input.setCustomValidity('Role is required');
+                } else if (!Object.entries(permission).some(([k, v]) => !k.includes('role') && v)) {
                     input.setCustomValidity('No permissions selected');
-                }
-                if (this.permissions.some(p => p.role === role)) {
+                } else if (this.permissions.some(p => p.role === permission.role && p !== permission)) {
                     input.setCustomValidity('Role entry already exists');
                 }
-                
+
                 return form.reportValidity();
-            }
-        }));
-        Alpine.data('permissionsRow', () => ({
-            role: '',
-            read: false,
-            create: false,
-            update: false,
-            xdelete: false,
-            reset() {
-                this.role = '';
-                this.read = this.create = this.update = this.xdelete = false;
+            },
+            prevent(event) {
+                event.preventDefault();
+                event.stopPropagation();
             }
         }));
     });