diff --git a/admin/tool/monitor/tests/behat/subscription.feature b/admin/tool/monitor/tests/behat/subscription.feature
index 9b74a68cdbb..c91d45a6951 100644
--- a/admin/tool/monitor/tests/behat/subscription.feature
+++ b/admin/tool/monitor/tests/behat/subscription.feature
@@ -102,7 +102,7 @@ Feature: tool_monitor_subscriptions
     Given I log in as "admin"
     And I follow "Preferences" in the user menu
     And I click on "Notification preferences" "link" in the "#page-content" "css_element"
-    And I click on "//td[@data-processor-name='popup']//label[@class='preference-state']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
+    And I click on "//td[@data-processor-name='popup']//label[@data-state='loggedin']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
     And I wait until the page is ready
     And I follow "Preferences" in the user menu
     And I follow "Event monitoring"
@@ -123,7 +123,7 @@ Feature: tool_monitor_subscriptions
     Given I log in as "teacher1"
     And I follow "Preferences" in the user menu
     And I click on "Notification preferences" "link" in the "#page-content" "css_element"
-    And I click on "//td[@data-processor-name='popup']//label[@class='preference-state']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
+    And I click on "//td[@data-processor-name='popup']//label[@data-state='loggedin']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
     And I wait until the page is ready
     And I follow "Preferences" in the user menu
     And I follow "Event monitoring"
diff --git a/message/templates/notification_preferences.mustache b/message/templates/notification_preferences.mustache
index ac4b959f773..9bc7cdd715e 100644
--- a/message/templates/notification_preferences.mustache
+++ b/message/templates/notification_preferences.mustache
@@ -84,7 +84,7 @@
         {{> core/loading }}
     </div>
     <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
-        <table class="table table-hover preference-table">
+        <table class="table preference-table">
             <thead>
                 <tr>
                     <th>{{displayname}}</th>
diff --git a/message/templates/notification_preferences_component_notification.mustache b/message/templates/notification_preferences_component_notification.mustache
index 3318f0865a5..d709c69556b 100644
--- a/message/templates/notification_preferences_component_notification.mustache
+++ b/message/templates/notification_preferences_component_notification.mustache
@@ -71,21 +71,15 @@
                                 {{#loggedin}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
-                                            <label class="preference-state"
+                                            <label class="custom-control custom-switch"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
-
                                                 <span class="accesshide">{{displayname}}</span>
                                                 <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
+                                                    class="custom-control-input"
                                                     {{#checked}}checked{{/checked}}
                                                     {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-status-container" tabindex="0">
-                                                    <span class="on-text">{{#str}} on, message {{/str}}</span>
-                                                    <span class="off-text">{{#str}} off, message {{/str}}</span>
-                                                    {{> core/loading }}
-                                                </div>
+                                                <span class="custom-control-label d-block"></span>
                                             </label>
                                         {{/anchor}}
                                         {{$tooltip}}{{displayname}}{{/tooltip}}
@@ -96,21 +90,15 @@
                                 {{#loggedoff}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
-                                            <label class="preference-state"
+                                            <label class="custom-control custom-switch"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
-
                                                 <span class="accesshide">{{displayname}}</span>
                                                 <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
+                                                    class="custom-control-input"
                                                     {{#checked}}checked{{/checked}}
                                                     {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-status-container" tabindex="0">
-                                                    <span class="on-text">{{#str}} on, message {{/str}}</span>
-                                                    <span class="off-text">{{#str}} off, message {{/str}}</span>
-                                                    {{> core/loading }}
-                                                </div>
+                                                <span class="custom-control-label d-block"></span>
                                             </label>
                                         {{/anchor}}
                                         {{$tooltip}}{{displayname}}{{/tooltip}}
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index 593673ac091..6c95150857a 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -48,18 +48,18 @@
             }
         }
         tr {
+            th {
+                border-left: 1px solid $border-color;
+            }
             td {
                 &:not(:first-child) {
                     width: 150px;
                     text-align: center;
                 }
                 &:nth-child(even) {
-                    background-color: #f7f7f7;
+                    border: 1px solid $border-color;
                 }
             }
-            th:nth-child(even) {
-                background-color: #f7f7f7;
-            }
         }
         .preference-row {
             .hover-tooltip-container {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index c5e5a302c6c..cd012d4002b 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15095,13 +15095,13 @@ a.ygtvspacer:hover {
       display: none; }
     .preferences-container .preference-table thead th.unconfigured .config-warning {
       display: inline-block; }
+  .preferences-container .preference-table tr th {
+    border-left: 1px solid #dee2e6; }
   .preferences-container .preference-table tr td:not(:first-child) {
     width: 150px;
     text-align: center; }
   .preferences-container .preference-table tr td:nth-child(even) {
-    background-color: #f7f7f7; }
-  .preferences-container .preference-table tr th:nth-child(even) {
-    background-color: #f7f7f7; }
+    border: 1px solid #dee2e6; }
   .preferences-container .preference-table .preference-row .hover-tooltip-container {
     display: inline-block; }
   .preferences-container .preference-table .preference-row .preference-name {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 047068c9c2f..ebf37d3ef78 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15319,13 +15319,13 @@ a.ygtvspacer:hover {
       display: none; }
     .preferences-container .preference-table thead th.unconfigured .config-warning {
       display: inline-block; }
+  .preferences-container .preference-table tr th {
+    border-left: 1px solid #dee2e6; }
   .preferences-container .preference-table tr td:not(:first-child) {
     width: 150px;
     text-align: center; }
   .preferences-container .preference-table tr td:nth-child(even) {
-    background-color: #f7f7f7; }
-  .preferences-container .preference-table tr th:nth-child(even) {
-    background-color: #f7f7f7; }
+    border: 1px solid #dee2e6; }
   .preferences-container .preference-table .preference-row .hover-tooltip-container {
     display: inline-block; }
   .preferences-container .preference-table .preference-row .preference-name {