diff --git a/assets/css/app.css b/assets/css/app.css
index 61b01f81..37c57b8a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -871,3 +871,10 @@ table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selecte
     width: 100%;
 }
 
+/***********************************************
+ * Permission checkboxes
+ ***********************************************/
+.permission-checkbox:checked {
+    background-color: var(--bs-success);
+    border-color: var(--bs-success);
+}
\ No newline at end of file
diff --git a/src/Form/Permissions/PermissionType.php b/src/Form/Permissions/PermissionType.php
index d733417e..288b7e24 100644
--- a/src/Form/Permissions/PermissionType.php
+++ b/src/Form/Permissions/PermissionType.php
@@ -97,6 +97,9 @@ class PermissionType extends AbstractType
                 'mapped' => false,
                 'label' => $operation['label'] ?? null,
                 'disabled' => $options['disabled'],
+                'attr' => [
+                    'class' => 'permission-checkbox tristate',
+                ],
                 'label_attr' => [
                     'class' => 'checkbox-inline opacity-100',
                 ],
diff --git a/templates/Form/permissionLayout.html.twig b/templates/Form/permissionLayout.html.twig
index 74211da2..a9c76e86 100644
--- a/templates/Form/permissionLayout.html.twig
+++ b/templates/Form/permissionLayout.html.twig
@@ -4,7 +4,7 @@
             {% if multi_checkbox %}
 
                 <div class="form-check">
-                    <input type="checkbox" class="form-check-input tristate permission_multicheckbox" id="mulit_check_{{ form.vars.label }}">
+                    <input type="checkbox" class="form-check-input tristate permission-checkbox permission_multicheckbox" id="mulit_check_{{ form.vars.label }}">
                     <label class="form-check-label" for="mulit_check_{{ form.vars.label }}">
                         <b>{{ form.vars.label | trans }}</b>
                     </label>
@@ -53,15 +53,15 @@
             <label><b>{% trans %}permission.legend.title{% endtrans %}:</b></label>
             <div>
                 <div class="form-check form-check-inline">
-                    <input type="checkbox" class="form-check-input" disabled>
+                    <input type="checkbox" class="form-check-input permission-checkbox" disabled>
                     <label class="form-check-label opacity-100">{% trans %}permission.legend.disallow{% endtrans %}</label>
                 </div>
                 <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" checked disabled>
+                    <input class="form-check-input permission-checkbox" type="checkbox" checked disabled>
                     <label class="form-check-label  opacity-100">{% trans %}permission.legend.allow{% endtrans %}</label>
                 </div>
                 <div class="form-check form-check-inline">
-                    <input type="checkbox" class="tristate form-check-input" indeterminate="indeterminate" value="indeterminate" disabled>
+                    <input type="checkbox" class="tristate form-check-input permission-checkbox" indeterminate="indeterminate" value="indeterminate" disabled>
                     <label class="form-check-label opacity-100">{% trans %}permission.legend.inherit{% endtrans %}</label>
                 </div>
             </div>