diff --git a/resources/js/components/entity-permissions-editor.js b/resources/js/components/entity-permissions-editor.js
deleted file mode 100644
index a821792a0..000000000
--- a/resources/js/components/entity-permissions-editor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-class EntityPermissionsEditor {
-
-  constructor(elem) {
-    this.permissionsTable = elem.querySelector('[permissions-table]');
-
-    // Handle toggle all event
-    this.restrictedCheckbox = elem.querySelector('[name=restricted]');
-    this.restrictedCheckbox.addEventListener('change', this.updateTableVisibility.bind(this));
-  }
-
-  updateTableVisibility() {
-    this.permissionsTable.style.display =
-      this.restrictedCheckbox.checked
-        ? null
-        : 'none';
-  }
-}
-
-export default EntityPermissionsEditor;
\ No newline at end of file
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index f360e2b0c..4b17dc403 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -18,7 +18,6 @@ import dropdown from "./dropdown.js"
 import dropdownSearch from "./dropdown-search.js"
 import dropzone from "./dropzone.js"
 import editorToolbox from "./editor-toolbox.js"
-import entityPermissionsEditor from "./entity-permissions-editor.js"
 import entitySearch from "./entity-search.js"
 import entitySelector from "./entity-selector.js"
 import entitySelectorPopup from "./entity-selector-popup.js"
@@ -75,7 +74,6 @@ const componentMapping = {
     "dropdown-search": dropdownSearch,
     "dropzone": dropzone,
     "editor-toolbox": editorToolbox,
-    "entity-permissions-editor": entityPermissionsEditor,
     "entity-search": entitySearch,
     "entity-selector": entitySelector,
     "entity-selector-popup": entitySelectorPopup,
diff --git a/resources/js/components/permissions-table.js b/resources/js/components/permissions-table.js
index baad75258..df3c055ca 100644
--- a/resources/js/components/permissions-table.js
+++ b/resources/js/components/permissions-table.js
@@ -1,22 +1,21 @@
 
 class PermissionsTable {
 
-    constructor(elem) {
-        this.container = elem;
+    setup() {
+        this.container = this.$el;
 
         // Handle toggle all event
-        const toggleAll = elem.querySelector('[permissions-table-toggle-all]');
-        toggleAll.addEventListener('click', this.toggleAllClick.bind(this));
+        for (const toggleAllElem of (this.$manyRefs.toggleAll || [])) {
+            toggleAllElem.addEventListener('click', this.toggleAllClick.bind(this));
+        }
 
         // Handle toggle row event
-        const toggleRowElems = elem.querySelectorAll('[permissions-table-toggle-all-in-row]');
-        for (let toggleRowElem of toggleRowElems) {
+        for (const toggleRowElem of (this.$manyRefs.toggleRow || [])) {
             toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
         }
 
         // Handle toggle column event
-        const toggleColumnElems = elem.querySelectorAll('[permissions-table-toggle-all-in-column]');
-        for (let toggleColElem of toggleColumnElems) {
+        for (const toggleColElem of (this.$manyRefs.toggleColumn || [])) {
             toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
         }
     }
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 1720801d2..28ec591d7 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -43,7 +43,6 @@ return [
     // Permissions and restrictions
     'permissions' => 'Permissions',
     'permissions_intro' => 'Once enabled, These permissions will take priority over any set role permissions.',
-    'permissions_enable' => 'Enable Custom Permissions',
     'permissions_save' => 'Save Permissions',
     'permissions_owner' => 'Owner',
 
diff --git a/resources/views/form/entity-permissions-row.blade.php b/resources/views/form/entity-permissions-row.blade.php
index 023aa36d2..bff7315a0 100644
--- a/resources/views/form/entity-permissions-row.blade.php
+++ b/resources/views/form/entity-permissions-row.blade.php
@@ -1,4 +1,4 @@
-<div class="content-permissions-row flex-container-row justify-space-between wrap">
+<div component="permissions-table" class="content-permissions-row flex-container-row justify-space-between wrap">
     <div class="content-permissions-row-label gap-x-m flex-container-row items-center px-l py-m flex">
         <div class="text-large" title="{{ trans('common.role') }}">
             @icon('role')
@@ -6,7 +6,7 @@
         <span>{{ $role->display_name }}</span>
         <button type="button"
                 class="ml-auto flex-none text-small text-primary text-button hover-underline content-permissions-row-toggle-all hide-under-s"
-                permissions-table-toggle-all-in-row
+                refs="permissions-table@toggle-all"
                 >{{ trans('common.toggle_all') }}</button>
     </div>
     <div class="flex-container-row justify-space-between gap-x-xl wrap items-center">
@@ -14,7 +14,7 @@
             @include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])
         </div>
         <div class="px-l">
-            @if(!$model->isA('page'))
+            @if(!$model instanceof \BookStack\Entities\Models\Page)
                 @include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])
             @endif
         </div>
diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php
index 18df0bb69..321e2f06c 100644
--- a/resources/views/form/entity-permissions.blade.php
+++ b/resources/views/form/entity-permissions.blade.php
@@ -1,16 +1,10 @@
-<form action="{{ $model->getUrl('/permissions') }}" method="POST" entity-permissions-editor>
+<form action="{{ $model->getUrl('/permissions') }}" method="POST">
     {!! csrf_field() !!}
     <input type="hidden" name="_method" value="PUT">
 
     <div class="grid half left-focus v-center">
         <div>
             <p class="mb-none mt-m">{{ trans('entities.permissions_intro') }}</p>
-            <div>
-                @include('form.checkbox', [
-                    'name' => 'restricted',
-                    'label' => trans('entities.permissions_enable'),
-                ])
-            </div>
         </div>
         <div>
             <div class="form-group">
@@ -24,7 +18,6 @@
         <p class="text-warn">{{ trans('entities.shelves_permissions_cascade_warning') }}</p>
     @endif
 
-
     <div class="content-permissions mt-m mb-xl">
         @foreach(\BookStack\Auth\Role::restrictable() as $role)
             @include('form.entity-permissions-row', ['role' => $role, 'model' => $model])
diff --git a/resources/views/settings/roles/parts/form.blade.php b/resources/views/settings/roles/parts/form.blade.php
index 593791997..044b4ceb4 100644
--- a/resources/views/settings/roles/parts/form.blade.php
+++ b/resources/views/settings/roles/parts/form.blade.php
@@ -26,9 +26,9 @@
         </div>
     </div>
 
-    <div permissions-table>
+    <div component="permissions-table">
         <label class="setting-list-label">{{ trans('settings.role_system') }}</label>
-        <a href="#" permissions-table-toggle-all class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+        <a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
 
         <div class="toggle-switch-list grid half mt-m">
             <div>
@@ -56,20 +56,20 @@
             <p class="text-warn">{{ trans('settings.role_asset_admins') }}</p>
         @endif
 
-        <table permissions-table class="table toggle-switch-list compact permissions-table">
+        <table component="permissions-table" class="table toggle-switch-list compact permissions-table">
             <tr>
                 <th width="20%">
-                    <a href="#" permissions-table-toggle-all class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </th>
-                <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.create') }}</th>
-                <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.view') }}</th>
-                <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.edit') }}</th>
-                <th width="20%" permissions-table-toggle-all-in-column>{{ trans('common.delete') }}</th>
+                <th width="20%" refs="permissions-table@toggle-column">{{ trans('common.create') }}</th>
+                <th width="20%" refs="permissions-table@toggle-column">{{ trans('common.view') }}</th>
+                <th width="20%" refs="permissions-table@toggle-column">{{ trans('common.edit') }}</th>
+                <th width="20%" refs="permissions-table@toggle-column">{{ trans('common.delete') }}</th>
             </tr>
             <tr>
                 <td>
                     <div>{{ trans('entities.shelves') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>
                     @include('settings.roles.parts.checkbox', ['permission' => 'bookshelf-create-all', 'label' => trans('settings.role_all')])
@@ -93,7 +93,7 @@
             <tr>
                 <td>
                     <div>{{ trans('entities.books') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>
                     @include('settings.roles.parts.checkbox', ['permission' => 'book-create-all', 'label' => trans('settings.role_all')])
@@ -117,7 +117,7 @@
             <tr>
                 <td>
                     <div>{{ trans('entities.chapters') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>
                     @include('settings.roles.parts.checkbox', ['permission' => 'chapter-create-own', 'label' => trans('settings.role_own')])
@@ -143,7 +143,7 @@
             <tr>
                 <td>
                     <div>{{ trans('entities.pages') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>
                     @include('settings.roles.parts.checkbox', ['permission' => 'page-create-own', 'label' => trans('settings.role_own')])
@@ -169,7 +169,7 @@
             <tr>
                 <td>
                     <div>{{ trans('entities.images') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>@include('settings.roles.parts.checkbox', ['permission' => 'image-create-all', 'label' => ''])</td>
                 <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}<sup>1</sup></small></td>
@@ -187,7 +187,7 @@
             <tr>
                 <td>
                     <div>{{ trans('entities.attachments') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>@include('settings.roles.parts.checkbox', ['permission' => 'attachment-create-all', 'label' => ''])</td>
                 <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>
@@ -205,7 +205,7 @@
             <tr>
                 <td>
                     <div>{{ trans('entities.comments') }}</div>
-                    <a href="#" permissions-table-toggle-all-in-row class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+                    <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
                 </td>
                 <td>@include('settings.roles.parts.checkbox', ['permission' => 'comment-create-all', 'label' => ''])</td>
                 <td style="line-height:1.2;"><small class="faded">{{ trans('settings.role_controlled_by_asset') }}</small></td>