diff --git a/app/views/console/databases/collection.phtml b/app/views/console/databases/collection.phtml
index 1ecc699e7b..5e5d916916 100644
--- a/app/views/console/databases/collection.phtml
+++ b/app/views/console/databases/collection.phtml
@@ -510,6 +510,7 @@ $logs = $this->getParam('logs', null);
 
                 <div class="row responsive margin-top-negative">
                     <div class="col span-8 margin-bottom">
+
                         <form
                             data-analytics
                             data-analytics-activity
@@ -545,7 +546,8 @@ $logs = $this->getParam('logs', null);
                                 <hr class="margin-top-small" />
 
                                 <div class="permissions-matrix margin-bottom-large" x-data="permissionsMatrix">
-                                    <input type="hidden" name="permissions" required data-cast-from="csv" data-cast-to="array" data-ls-bind="{{project-collection.$permissions}}" :value="rawPermissions"/>
+
+                                    <input type="hidden" name="permissions" data-cast-from="csv" data-cast-to="array" data-ls-bind="{{project-collection.$permissions}}" :value="rawPermissions"/>
 
                                     <table data-ls-attrs="x-init=load({{project-collection.$permissions}})">
                                         <thead>
@@ -565,16 +567,16 @@ $logs = $this->getParam('logs', null);
                                                         <p x-text="permission.role"></p>
                                                     </td>
                                                     <td>
-                                                        <input type="checkbox" name="read" x-model="permission.read"/>
+                                                        <input type="checkbox" name="read" x-model="permission.read" @click="updatePermission(index)"/>
                                                     </td>
                                                     <td>
-                                                        <input type="checkbox" name="create" x-model="permission.create"/>
+                                                        <input type="checkbox" name="create" x-model="permission.create" @click="updatePermission(index)"/>
                                                     </td>
                                                     <td>
-                                                        <input type="checkbox" name="update" x-model="permission.update"/>
+                                                        <input type="checkbox" name="update" x-model="permission.update" @click="updatePermission(index)"/>
                                                     </td>
                                                     <td>
-                                                        <input type="checkbox" name="delete" x-model="permission.xdelete"/>
+                                                        <input type="checkbox" name="delete" x-model="permission.xdelete" @click="updatePermission(index)"/>
                                                     </td>
                                                     <td>
                                                         <span class="action" @click="removePermission(index)">
@@ -628,7 +630,7 @@ $logs = $this->getParam('logs', null);
                                     <div class="col span-1"><input name="documentSecurity" value="false" type="checkbox" class="margin-top-no" data-ls-bind="{{project-collection.documentSecurity}}" /></div>
                                     <div class="col span-11">
                                         <b>Enabled</b>
-                                        <p class="text-fade margin-top-tiny">With Document Security enabled, users will be able to access documents for which they have <i>either</i> Document or Collection permissions.</p>
+                                        <p class="text-fade margin-top-tiny">With Document Security enabled, users will be able to access documents for which they have been granted <b>either</b> Document or Collection permissions.</p>
                                     </div>
                                 </div>
 
diff --git a/public/scripts/permissions-matrix.js b/public/scripts/permissions-matrix.js
index a24983ae42..987f8eb666 100644
--- a/public/scripts/permissions-matrix.js
+++ b/public/scripts/permissions-matrix.js
@@ -7,33 +7,31 @@
                 this.rawPermissions = permissions;
 
                 permissions.map(p => {
-                    let parts = p.split('(')
-                    let type = parts[0];
-                    let roles = parts[1]
-                        .replace(')', '')
-                        .replace(' ', '')
-                        .split(',');
-
-                    roles.map(role => {
-                        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,
-                            })
+                    let { type, role } = this.parsePermission(p);
+                    let index = -1;
+                    let existing = this.permissions.find((p, idx) => {
+                        if (p.role === role) {
+                            index = idx;
+                            return true;
                         }
-                        if (index !== -1) {
-                            existing[type] = true;
-                            this.permissions[index] = existing;
-                        }
-                    });
-                })
+                    })
+                    if (existing === undefined) {
+                        this.permissions.push({
+                            role,
+                            [type]: true,
+                        });
+                    }
+                    if (index !== -1) {
+                        existing[type] = true;
+                        this.permissions[index] = existing;
+                    }
+                });
+            },
+            parsePermission(permission) {
+                let parts = permission.split('(');
+                let type = parts[0];
+                let role = parts[1].replace(')', '').replace(' ', '');
+                return { type, role };
             },
             addPermission(role, read, create, update, xdelete) {
                 if (read) this.rawPermissions.push(`read(${role})`);
@@ -49,13 +47,41 @@
                     xdelete
                 });
 
-                this.reset()
+                this.reset();
+            },
+            updatePermission(index) {
+                // Because the x-model does not update before the click event,
+                // we setTimeout to give Alpine enough time to update the model.
+                setTimeout(() => {
+                    const permission = this.permissions[index];
+                    for (const key of Object.keys(permission)) {
+                        if (key === 'role') {
+                            continue;
+                        }
+                        const parsedKey = this.parseKey(key);
+                        if (permission[key]) {
+                            if (!this.rawPermissions.includes(`${parsedKey}(${permission.role})`)) {
+                                this.rawPermissions.push(`${parsedKey}(${permission.role})`);
+                            }
+                        } else {
+                            this.rawPermissions = this.rawPermissions.filter(p => {
+                                return !p.includes(`${parsedKey}(${permission.role})`);
+                            });
+                        }
+                    }
+                });
             },
             removePermission(index) {
                 let row = this.permissions.splice(index, 1);
                 if (row.length === 1) {
                     this.rawPermissions = this.rawPermissions.filter(p => !p.includes(row[0].role));
                 }
+            },
+            parseKey(key) {
+                if (key === 'xdelete') {
+                    return 'delete';
+                }
+                return key;
             }
         }));
         Alpine.data('permissionsRow', () => ({
@@ -64,7 +90,6 @@
             create: false,
             update: false,
             xdelete: false,
-
             reset() {
                 this.role = '';
                 this.read = this.create = this.update = this.xdelete = false;