diff --git a/message/amd/src/preferences_notifications_list_controller.js b/message/amd/src/preferences_notifications_list_controller.js
index 7de542f6fc2..21063b12207 100644
--- a/message/amd/src/preferences_notifications_list_controller.js
+++ b/message/amd/src/preferences_notifications_list_controller.js
@@ -26,8 +26,9 @@
  */
 define(['jquery', 'core_message/notification_preference'], function($, NotificationPreference) {
     var SELECTORS = {
+        PREFERENCE: '[data-state]',
         PREFERENCE_ROW: '.preference-row',
-        STATE_INPUTS: '[data-state] input',
+        PREFERENCE_INPUT: '[data-state] input',
     };
 
     /**
@@ -42,9 +43,14 @@ define(['jquery', 'core_message/notification_preference'], function($, Notificat
 
         this.root.on('change', function(e) {
             if (!this.isDisabled()) {
+                var preferenceElement = $(e.target).closest(SELECTORS.PREFERENCE);
                 var preferenceRow = $(e.target).closest(SELECTORS.PREFERENCE_ROW);
                 var preference = new NotificationPreference(preferenceRow, this.userId);
-                preference.save();
+
+                preferenceElement.addClass('loading');
+                preference.save().always(function() {
+                    preferenceElement.removeClass('loading');
+                });
             }
         }.bind(this));
 
@@ -74,7 +80,7 @@ define(['jquery', 'core_message/notification_preference'], function($, Notificat
      */
     PreferencesController.prototype.setDisabled = function() {
         this.root.addClass('disabled');
-        this.root.find(SELECTORS.STATE_INPUTS).prop('disabled', true);
+        this.root.find(SELECTORS.PREFERENCE_INPUT).prop('disabled', true);
     };
 
     /**
@@ -84,7 +90,7 @@ define(['jquery', 'core_message/notification_preference'], function($, Notificat
      */
     PreferencesController.prototype.setEnabled = function() {
         this.root.removeClass('disabled');
-        this.root.find(SELECTORS.STATE_INPUTS).prop('disabled', false);
+        this.root.find(SELECTORS.PREFERENCE_INPUT).prop('disabled', false);
     };
 
     return PreferencesController;
diff --git a/message/classes/output/preferences/notification_list_processor.php b/message/classes/output/preferences/notification_list_processor.php
index 6c4df64b4fb..afca0875e09 100644
--- a/message/classes/output/preferences/notification_list_processor.php
+++ b/message/classes/output/preferences/notification_list_processor.php
@@ -110,19 +110,29 @@ class notification_list_processor implements templatable, renderable {
         $processor = $this->processor;
         $provider = $this->provider;
         $preferences = $this->preferences;
-
-        $context = [
-            'displayname' => get_string('pluginname', 'message_'.$processor->name),
-            'name' => $processor->name,
-            'locked' => false,
-            'radioname' => strtolower(str_replace(" ", "-", $processor->name)),
-            'states' => []
-        ];
-        // determine the default setting
         $preferencebase = $this->get_preference_base($provider);
         $permitted = MESSAGE_DEFAULT_PERMITTED;
         $defaultpreferences = get_message_output_default_preferences();
         $defaultpreference = $processor->name.'_provider_'.$preferencebase.'_permitted';
+        $context = [
+            'displayname' => get_string('pluginname', 'message_'.$processor->name),
+            'name' => $processor->name,
+            'locked' => false,
+            'loggedin' => [
+                '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(),
+            ],
+        ];
+
+        // determine the default setting
         if (isset($defaultpreferences->{$defaultpreference})) {
             $permitted = $defaultpreferences->{$defaultpreference};
         }
@@ -134,43 +144,6 @@ class notification_list_processor implements templatable, renderable {
         } else if ($permitted == 'forced') {
             $context['locked'] = true;
             $context['lockedmessage'] = get_string('forced', 'message');
-        } else {
-            $statescontext = [
-                'loggedin' => [
-                    'name' => 'loggedin',
-                    'displayname' => get_string('loggedindescription', 'message'),
-                    'checked' => $this->is_preference_enabled($preferencebase.'_loggedin', $processor, $preferences),
-                    'iconurl' => $output->pix_url('i/completion-auto-y')->out(),
-                ],
-                'loggedoff' => [
-                    'name' => 'loggedoff',
-                    'displayname' => get_string('loggedoffdescription', 'message'),
-                    'checked' => $this->is_preference_enabled($preferencebase.'_loggedoff', $processor, $preferences),
-                    'iconurl' => $output->pix_url('i/completion-auto-n')->out(),
-                ],
-                'both' => [
-                    'name' => 'both',
-                    'displayname' => get_string('always'),
-                    'checked' => false,
-                    'iconurl' => $output->pix_url('i/completion-auto-pass')->out(),
-                ],
-                'none' => [
-                    'name' => 'none',
-                    'displayname' => get_string('never'),
-                    'checked' => false,
-                    'iconurl' => $output->pix_url('i/completion-auto-fail')->out(),
-                ],
-            ];
-
-            if ($statescontext['loggedin']['checked'] && $statescontext['loggedoff']['checked']) {
-                $statescontext['both']['checked'] = true;
-                $statescontext['loggedin']['checked'] = false;
-                $statescontext['loggedoff']['checked'] = false;
-            } else if (!$statescontext['loggedin']['checked'] && !$statescontext['loggedoff']['checked']) {
-                $statescontext['none']['checked'] = true;
-            }
-
-            $context['states'] = array_values($statescontext);
         }
 
         return $context;
diff --git a/message/templates/preferences_notifications_list.mustache b/message/templates/preferences_notifications_list.mustache
index 1e897134132..28399e5d0b1 100644
--- a/message/templates/preferences_notifications_list.mustache
+++ b/message/templates/preferences_notifications_list.mustache
@@ -47,33 +47,18 @@
                                 "displayname": "Popup notification",
                                 "name": "popup",
                                 "locked": 0,
-                                "radioname": "popup",
-                                "states": [
-                                    {
-                                        "name": "loggedin",
-                                        "displayname": "When I'm logged in",
-                                        "checked": 0,
-                                        "iconurl": "some url"
-                                    },
-                                    {
-                                        "name": "loggedoff",
-                                        "displayname": "When I'm offline",
-                                        "checked": 0,
-                                        "iconurl": "some url"
-                                    },
-                                    {
-                                        "name": "both",
-                                        "displayname": "Always",
-                                        "checked": 1,
-                                        "iconurl": "some url"
-                                    },
-                                    {
-                                        "name": "none",
-                                        "displayname": "Never",
-                                        "checked": 0,
-                                        "iconurl": "some url"
-                                    }
-                                ]
+                                "loggedin": {
+                                    "name": "loggedin",
+                                    "displayname": "When I'm logged in",
+                                    "checked": 0,
+                                    "iconurl": "some url"
+                                },
+                                "loggedoff": {
+                                    "name": "loggedoff",
+                                    "displayname": "When I'm offline",
+                                    "checked": 0,
+                                    "iconurl": "some url"
+                                },
                             }
                         ]
                     }
@@ -82,7 +67,7 @@
         ]
     }
 }}
-<h2 class="title-case">{{#str}} messagepreferences, message {{/str}}</h2>
+<h2 class="title-case">{{#str}} notificationpreferences, message {{/str}}</h2>
 <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
     {{#components}}
         <table class="table preference-table">
@@ -99,34 +84,51 @@
                     <tr class="preference-row" data-preference-key="{{preferencekey}}">
                         <td class="preference-name">
                             {{displayname}}
-                            {{> core/loading }}
                         </td>
                         {{#processors}}
-                        <td data-processor-name="{{name}}">
+                            <td data-processor-name="{{name}}">
                                 {{#locked}}
                                     <div class="dimmed_text">{{lockedmessage}}</div>
                                 {{/locked}}
                                 {{^locked}}
                                     <div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
                                     <form>
-                                        {{#states}}
+                                        {{#loggedin}}
                                             <label class="preference-state"
                                                 data-toggle="tooltip"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
 
                                                 <span class="accesshide">{{displayname}}</span>
-                                                <input type="radio"
+                                                <input type="checkbox"
+                                                    tabindex="-1"
                                                     class="accesshide"
-                                                    name="{{radioname}}"
-                                                    value="option1"
                                                     {{#checked}}checked{{/checked}}
                                                     {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-image-container">
-                                                    <img src="{{iconurl}}" role="presentation" />
+                                                <div class="preference-state-image-container" tabindex="0">
+                                                    <img class="state-icon" src="{{iconurl}}" role="presentation" />
+                                                    {{> core/loading }}
                                                 </div>
                                             </label>
-                                        {{/states}}
+                                        {{/loggedin}}
+                                        {{#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 }}
+                                                </div>
+                                            </label>
+                                        {{/loggedoff}}
                                     </form>
                                 {{/locked}}
                             </td>
diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
index a5a0db73368..d29dd597bc3 100644
--- a/theme/bootstrapbase/less/moodle/message.less
+++ b/theme/bootstrapbase/less/moodle/message.less
@@ -275,17 +275,6 @@
             float: left;
         }
     }
-    .preferences-container {
-        .preference-table {
-            .preference-row {
-                .preference-name {
-                    .loading-icon {
-                        float: left;
-                    }
-                }
-            }
-        }
-    }
 }
 
 .preferences-container {
@@ -309,15 +298,6 @@
         .preference-row {
             .preference-name {
                 vertical-align: middle;
-
-                .loading-icon {
-                    display: none;
-                    float: right;
-
-                    img {
-                        vertical-align: middle;
-                    }
-                }
             }
             .disabled-message {
                 display: none;
@@ -331,21 +311,30 @@
                 display: inline-block;
                 vertical-align: middle;
 
-                &:hover {
-                    .preference-state-image-container {
-                        background-color: #e5e5e5;
-                        border-radius: 4px;
-                    }
-                }
-                input[type="radio"]:checked + .preference-state-image-container {
-                    background-color: #424242;
-                    border-radius: 4px;
+                input[type="checkbox"]:checked + .preference-state-image-container {
+                    border: 1px solid #5cb85c;
                 }
                 .preference-state-image-container {
                     width: 30px;
                     height: 30px;
                     line-height: 30px;
                     text-align: center;
+                    border-radius: 4px;
+                    border: 1px solid #d9534f;
+
+                    .loading-icon {
+                        display: none;
+                    }
+                }
+                &.loading {
+                    .preference-state-image-container {
+                        .state-icon {
+                            display: none;
+                        }
+                        .loading-icon {
+                            display: block;
+                        }
+                    }
                 }
             }
             &.loading {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index b21bf65e4f2..536bbba5c21 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -5995,9 +5995,6 @@ a.ygtvspacer:hover {
 .dir-rtl .core_message-messenger-sendmessage .message-send {
   float: left;
 }
-.dir-rtl .preferences-container .preference-table .preference-row .preference-name .loading-icon {
-  float: left;
-}
 .preferences-container .preference-table {
   border: 1px solid #ddd;
 }
@@ -6014,13 +6011,6 @@ a.ygtvspacer:hover {
 .preferences-container .preference-table .preference-row .preference-name {
   vertical-align: middle;
 }
-.preferences-container .preference-table .preference-row .preference-name .loading-icon {
-  display: none;
-  float: right;
-}
-.preferences-container .preference-table .preference-row .preference-name .loading-icon img {
-  vertical-align: middle;
-}
 .preferences-container .preference-table .preference-row .disabled-message {
   display: none;
   text-align: center;
@@ -6033,19 +6023,25 @@ a.ygtvspacer:hover {
   display: inline-block;
   vertical-align: middle;
 }
-.preferences-container .preference-table .preference-row .preference-state:hover .preference-state-image-container {
-  background-color: #e5e5e5;
-  border-radius: 4px;
-}
-.preferences-container .preference-table .preference-row .preference-state input[type="radio"]:checked + .preference-state-image-container {
-  background-color: #424242;
-  border-radius: 4px;
+.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-image-container {
+  border: 1px solid #5cb85c;
 }
 .preferences-container .preference-table .preference-row .preference-state .preference-state-image-container {
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
+  border-radius: 4px;
+  border: 1px solid #d9534f;
+}
+.preferences-container .preference-table .preference-row .preference-state .preference-state-image-container .loading-icon {
+  display: none;
+}
+.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-image-container .state-icon {
+  display: none;
+}
+.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-image-container .loading-icon {
+  display: block;
 }
 .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {
   display: block;