diff --git a/public/scss/admin/manage/privileges.scss b/public/scss/admin/manage/privileges.scss
index 84e0571008..e411bd94e6 100644
--- a/public/scss/admin/manage/privileges.scss
+++ b/public/scss/admin/manage/privileges.scss
@@ -15,22 +15,5 @@
 		td:first-child {
 			white-space: nowrap;
 		}
-
-		td[data-delta="true"] > input {
-			&:after {
-				border-color: $success;
-				background-color: $success;
-			}
-		}
-
-		td[data-delta="false"] > input {
-			&:after {
-				border-color: $danger;
-			}
-
-			&:indeterminate:after {
-				background-color: $danger;
-			}
-		}
 	}
 }
\ No newline at end of file
diff --git a/public/src/admin/manage/privileges.js b/public/src/admin/manage/privileges.js
index f491525294..c3cd19d85e 100644
--- a/public/src/admin/manage/privileges.js
+++ b/public/src/admin/manage/privileges.js
@@ -45,8 +45,9 @@ define('admin/manage/privileges', [
 
 	Privileges.setupPrivilegeTable = function () {
 		$('.privilege-table-container').on('change', 'input[type="checkbox"]:not(.checkbox-helper)', function () {
+			const checkboxEl = this;
 			const $checkboxEl = $(this);
-			const $wrapperEl = $checkboxEl.parent();
+			const $wrapperEl = $checkboxEl.parents('[data-privilege]');
 			const columnNo = $wrapperEl.index() + 1;
 			const privilege = $wrapperEl.attr('data-privilege');
 			const state = $checkboxEl.prop('checked');
@@ -63,6 +64,7 @@ define('admin/manage/privileges', [
 					bootbox.confirm('[[admin/manage/privileges:alert.confirm-moderate]]', function (confirm) {
 						if (confirm) {
 							$wrapperEl.attr('data-delta', delta);
+							Privileges.applyDeltaState(checkboxEl, delta);
 							Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
 						} else {
 							$checkboxEl.prop('checked', !$checkboxEl.prop('checked'));
@@ -72,6 +74,7 @@ define('admin/manage/privileges', [
 					bootbox.confirm('[[admin/manage/privileges:alert.confirm-admins-mods]]', function (confirm) {
 						if (confirm) {
 							$wrapperEl.attr('data-delta', delta);
+							Privileges.applyDeltaState(checkboxEl, delta);
 							Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
 						} else {
 							$checkboxEl.prop('checked', !$checkboxEl.prop('checked'));
@@ -79,6 +82,7 @@ define('admin/manage/privileges', [
 					});
 				} else {
 					$wrapperEl.attr('data-delta', delta);
+					Privileges.applyDeltaState(checkboxEl, delta);
 					Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
 				}
 				checkboxRowSelector.updateState($checkboxEl);
@@ -92,6 +96,15 @@ define('admin/manage/privileges', [
 		Privileges.addEvents(); // events with confirmation modals
 	};
 
+	Privileges.applyDeltaState = (checkboxEl, delta) => {
+		['bg-success', 'bg-opacity-75', 'border-success'].forEach((className) => {
+			checkboxEl.classList.toggle(className, delta === true);
+		});
+		['bg-danger', 'bg-opacity-50', 'border-danger'].forEach((className) => {
+			checkboxEl.classList.toggle(className, delta === false);
+		});
+	};
+
 	Privileges.addEvents = function () {
 		document.getElementById('save').addEventListener('click', function () {
 			throwConfirmModal('save', Privileges.commit);
@@ -332,7 +345,7 @@ define('admin/manage/privileges', [
 	function getPrivilegesFromRow(sourceGroupName) {
 		const privs = [];
 		$(`.privilege-table tr[data-group-name="${sourceGroupName}"] td input[type="checkbox"]:not(.checkbox-helper)`)
-			.parent()
+			.parents('[data-privilege]')
 			.each(function (idx, el) {
 				if ($(el).find('input').prop('checked')) {
 					privs.push(el.getAttribute('data-privilege'));
diff --git a/public/src/modules/helpers.common.js b/public/src/modules/helpers.common.js
index 94d756576f..e3f10ba528 100644
--- a/public/src/modules/helpers.common.js
+++ b/public/src/modules/helpers.common.js
@@ -171,7 +171,13 @@ module.exports = function (utils, Benchpress, relative_path) {
 				(member === 'spiders' && !spidersEnabled.includes(priv.name)) ||
 				(member === 'Global Moderators' && globalModDisabled.includes(priv.name));
 
-			return '<td class="text-center" data-privilege="' + priv.name + '" data-value="' + priv.state + '"><input autocomplete="off" type="checkbox"' + (priv.state ? ' checked' : '') + (disabled ? ' disabled="disabled"' : '') + ' /></td>';
+			return `
+				<td data-privilege="${priv.name}" data-value="${priv.state}">
+					<div class="form-check text-center">
+						<input class="form-check-input float-none" autocomplete="off" type="checkbox"${(priv.state ? ' checked' : '')}${(disabled ? ' disabled="disabled"' : '')} />
+					</div>
+				</td>
+			`;
 		}).join('');
 	}
 
diff --git a/src/views/admin/partials/privileges/category.tpl b/src/views/admin/partials/privileges/category.tpl
index 7a00508f86..c6cad475a1 100644
--- a/src/views/admin/partials/privileges/category.tpl
+++ b/src/views/admin/partials/privileges/category.tpl
@@ -48,7 +48,11 @@
 										</ul>
 									</div>
 								</td>
-								<td class="text-center"><input autocomplete="off" type="checkbox" class="checkbox-helper"></td>
+								<td class="">
+									<div class="form-check text-center">
+										<input autocomplete="off" type="checkbox" class="form-check-input float-none checkbox-helper">
+									</div>
+								</td>
 								{function.spawnPrivilegeStates, privileges.groups.name, ../privileges}
 							</tr>
 							<!-- END privileges.groups -->