diff --git a/application/views/backend/settings.php b/application/views/backend/settings.php
index d2caa2be..bd3ad8ea 100755
--- a/application/views/backend/settings.php
+++ b/application/views/backend/settings.php
@@ -492,10 +492,12 @@
                             <?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
                         </div>
 
-                        <button type="button" id="user-notifications" class="btn btn-light" data-toggle="button">
-                            <i class="far fa-envelope"></i>
-                            <?= lang('receive_notifications') ?>
-                        </button>
+                        <div class="custom-control custom-switch">
+                            <input type="checkbox" class="custom-control-input" id="user-notifications">
+                            <label class="custom-control-label" for="user-notifications">
+                                <?= lang('receive_notifications') ?>
+                            </label>
+                        </div>
                     </fieldset>
                 </div>
             </form>
diff --git a/assets/js/backend_settings.js b/assets/js/backend_settings.js
index 154658aa..6a3c4ff4 100644
--- a/assets/js/backend_settings.js
+++ b/assets/js/backend_settings.js
@@ -123,12 +123,7 @@ window.BackendSettings = window.BackendSettings || {};
         $('#username').val(GlobalVariables.settings.user.settings.username);
         $('#password, #retype-password').val('');
         $('#calendar-view').val(GlobalVariables.settings.user.settings.calendar_view);
-
-        if (GlobalVariables.settings.user.settings.notifications === true) {
-            $('#user-notifications').addClass('active');
-        } else {
-            $('#user-notifications').removeClass('active');
-        }
+        $('#user-notifications').prop('checked', Boolean(Number(GlobalVariables.settings.user.settings.notifications)));
 
         // Set default settings helper.
         settings = new SystemSettings();
@@ -166,11 +161,7 @@ window.BackendSettings = window.BackendSettings || {};
          *
          * Change the visible tab contents.
          */
-        $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
-            // Bootstrap has a bug with toggle buttons. Their toggle state is lost when the button is hidden or shown.
-            // Show before anything else we need to store the toggle and apply it whenever the user tab is clicked.
-            var areNotificationsActive = $('#user-notifications').hasClass('active');
-
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
             var href = $(this).attr('href');
 
             if (href === '#general') {
@@ -181,13 +172,6 @@ window.BackendSettings = window.BackendSettings || {};
                 settings = new SystemSettings();
             } else if (href === '#current-user') {
                 settings = new UserSettings();
-
-                // Apply toggle state to user notifications button.
-                if (areNotificationsActive) {
-                    $('#user-notifications').addClass('active');
-                } else {
-                    $('#user-notifications').removeClass('active');
-                }
             }
 
             Backend.placeFooterToBottom();
diff --git a/assets/js/backend_settings_user.js b/assets/js/backend_settings_user.js
index b66d7f09..7903bb05 100644
--- a/assets/js/backend_settings_user.js
+++ b/assets/js/backend_settings_user.js
@@ -42,7 +42,7 @@
             timezone: $('#timezone').val(),
             settings: {
                 username: $('#username').val(),
-                notifications: $('#user-notifications').hasClass('active'),
+                notifications: $('#user-notifications').prop('checked'),
                 calendar_view: $('#calendar-view').val()
             }
         };