diff --git a/lang/en/message.php b/lang/en/message.php
index 777d1347d54..0a34f337a07 100644
--- a/lang/en/message.php
+++ b/lang/en/message.php
@@ -119,8 +119,10 @@ $string['notificationwindow'] = 'Notification window';
 $string['notificationpreferences'] = 'Notification preferences';
 $string['notificationimage'] = 'Notification image';
 $string['notifications'] = 'Notifications';
+$string['off'] = 'Off';
 $string['offline'] = 'Offline';
 $string['offlinecontacts'] = 'Offline contacts ({$a})';
+$string['on'] = 'On';
 $string['online'] = 'Online';
 $string['onlinecontacts'] = 'Online contacts ({$a})';
 $string['onlyfromme'] = 'Only messages from me';
diff --git a/message/classes/output/preferences/notification_list_processor.php b/message/classes/output/preferences/notification_list_processor.php
index afca0875e09..de9ed853fa7 100644
--- a/message/classes/output/preferences/notification_list_processor.php
+++ b/message/classes/output/preferences/notification_list_processor.php
@@ -122,13 +122,11 @@ class notification_list_processor implements templatable, renderable {
                 'name' => 'loggedin',
                 'displayname' => get_string('loggedindescription', 'message'),
                 'checked' => $this->is_preference_enabled($preferencebase.'_loggedin', $processor, $preferences),
-                'iconurl' => $output->pix_url('i/marked')->out(),
             ],
             'loggedoff' => [
                 'name' => 'loggedoff',
                 'displayname' => get_string('loggedoffdescription', 'message'),
                 'checked' => $this->is_preference_enabled($preferencebase.'_loggedoff', $processor, $preferences),
-                'iconurl' => $output->pix_url('i/marker')->out(),
             ],
         ];
 
diff --git a/message/templates/preferences_notifications_list.mustache b/message/templates/preferences_notifications_list.mustache
index 64dc980a667..d0b2b34eaa5 100644
--- a/message/templates/preferences_notifications_list.mustache
+++ b/message/templates/preferences_notifications_list.mustache
@@ -102,8 +102,17 @@
         <tbody>
             {{#components}}
                 <tr>
-                    <th>{{displayname}}</th>
-                    {{#processors}}<td></td>{{/processors}}
+                    <th><h4>{{displayname}}</h4></th>
+                    {{#processors}}
+                        <td class="align-bottom">
+                            <div class="container-fluid">
+                                <div class="row-fluid">
+                                    <div class="span6">{{#str}} online, message {{/str}}</div>
+                                    <div class="span6">{{#str}} offline, message {{/str}}</div>
+                                </div>
+                            </div>
+                        </td>
+                    {{/processors}}
                 </tr>
                 {{#notifications}}
                     <tr class="preference-row" data-preference-key="{{preferencekey}}">
@@ -118,42 +127,52 @@
                                 {{^locked}}
                                     <div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
                                     <form>
-                                        {{#loggedin}}
-                                            <label class="preference-state"
-                                                data-toggle="tooltip"
-                                                title="{{displayname}}"
-                                                data-state="{{name}}">
+                                        <div class="container-fluid">
+                                            <div class="row-fluid">
+                                                <div class="span6">
+                                                    {{#loggedin}}
+                                                        <label class="preference-state"
+                                                            data-toggle="tooltip"
+                                                            title="{{displayname}}"
+                                                            data-state="{{name}}">
 
-                                                <span class="accesshide">{{displayname}}</span>
-                                                <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
-                                                    {{#checked}}checked{{/checked}}
-                                                    {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-image-container" tabindex="0">
-                                                    <img class="state-icon" src="{{iconurl}}" role="presentation" />
-                                                    {{> core/loading }}
+                                                            <span class="accesshide">{{displayname}}</span>
+                                                            <input type="checkbox"
+                                                                tabindex="-1"
+                                                                class="accesshide"
+                                                                {{#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>
+                                                        </label>
+                                                    {{/loggedin}}
                                                 </div>
-                                            </label>
-                                        {{/loggedin}}
-                                        {{#loggedoff}}
-                                            <label class="preference-state"
-                                                data-toggle="tooltip"
-                                                title="{{displayname}}"
-                                                data-state="{{name}}">
+                                                <div class="span6">
+                                                    {{#loggedoff}}
+                                                        <label class="preference-state"
+                                                            data-toggle="tooltip"
+                                                            title="{{displayname}}"
+                                                            data-state="{{name}}">
 
-                                                <span class="accesshide">{{displayname}}</span>
-                                                <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
-                                                    {{#checked}}checked{{/checked}}
-                                                    {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-image-container" tabindex="0">
-                                                    <img class="state-icon" src="{{iconurl}}" role="presentation" />
-                                                    {{> core/loading }}
+                                                            <span class="accesshide">{{displayname}}</span>
+                                                            <input type="checkbox"
+                                                                tabindex="-1"
+                                                                class="accesshide"
+                                                                {{#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>
+                                                        </label>
+                                                    {{/loggedoff}}
                                                 </div>
-                                            </label>
-                                        {{/loggedoff}}
+                                            </div>
+                                        </div>
                                     </form>
                                 {{/locked}}
                             </td>
diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
index 7a1886884ed..17ce189e278 100644
--- a/theme/bootstrapbase/less/moodle/message.less
+++ b/theme/bootstrapbase/less/moodle/message.less
@@ -278,9 +278,24 @@
 }
 
 .preferences-container {
+    .container-fluid {
+        padding: 0;
+
+        .span6 {
+            min-height: 20px;
+        }
+    }
+    .align-bottom {
+        vertical-align: bottom;
+    }
     .preference-table {
         border: 1px solid #ddd;
 
+        thead {
+            th {
+                text-align: center;
+            }
+        }
         tr {
             td {
                 &:not(:first-child) {
@@ -311,24 +326,46 @@
                 display: inline-block;
                 vertical-align: middle;
 
-                input[type="checkbox"]:checked + .preference-state-image-container {
-                    border: 2px solid #5cb85c;
+                input[type="checkbox"]:checked + .preference-state-status-container {
+                    background-color: #5cb85c;
+
+                    .on-text {
+                        display: inline-block;
+                    }
+                    .off-text {
+                        display: none;
+                    }
                 }
-                .preference-state-image-container {
+                .preference-state-status-container {
                     width: 30px;
                     height: 30px;
                     line-height: 30px;
                     text-align: center;
                     border-radius: 4px;
-                    border: 2px solid #d9534f;
+                    background-color: #d9534f;
+                    color: #fff;
 
                     .loading-icon {
                         display: none;
                     }
+                    .on-text {
+                        display: none;
+                    }
+                    .off-text {
+                        display: inline-block;
+                    }
                 }
                 &.loading {
-                    .preference-state-image-container {
-                        .state-icon {
+                    input[type="checkbox"]:checked + .preference-state-status-container {
+                        .on-text,
+                        .off-text {
+                            display: none;
+                        }
+                    }
+
+                    .preference-state-status-container {
+                        .on-text,
+                        .off-text {
                             display: none;
                         }
                         .loading-icon {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index e0da8ea9c32..deec7394354 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -5995,9 +5995,21 @@ a.ygtvspacer:hover {
 .dir-rtl .core_message-messenger-sendmessage .message-send {
   float: left;
 }
+.preferences-container .container-fluid {
+  padding: 0;
+}
+.preferences-container .container-fluid .span6 {
+  min-height: 20px;
+}
+.preferences-container .align-bottom {
+  vertical-align: bottom;
+}
 .preferences-container .preference-table {
   border: 1px solid #ddd;
 }
+.preferences-container .preference-table thead th {
+  text-align: center;
+}
 .preferences-container .preference-table tr td:not(:first-child) {
   width: 150px;
   text-align: center;
@@ -6023,24 +6035,42 @@ a.ygtvspacer:hover {
   display: inline-block;
   vertical-align: middle;
 }
-.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-image-container {
-  border: 2px solid #5cb85c;
+.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container {
+  background-color: #5cb85c;
 }
-.preferences-container .preference-table .preference-row .preference-state .preference-state-image-container {
+.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .on-text {
+  display: inline-block;
+}
+.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .off-text {
+  display: none;
+}
+.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   border-radius: 4px;
-  border: 2px solid #d9534f;
+  background-color: #d9534f;
+  color: #fff;
 }
-.preferences-container .preference-table .preference-row .preference-state .preference-state-image-container .loading-icon {
+.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .loading-icon {
   display: none;
 }
-.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-image-container .state-icon {
+.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
   display: none;
 }
-.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-image-container .loading-icon {
+.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .off-text {
+  display: inline-block;
+}
+.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .on-text,
+.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .off-text {
+  display: none;
+}
+.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .on-text,
+.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .off-text {
+  display: none;
+}
+.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .loading-icon {
   display: block;
 }
 .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {