diff --git a/application/views/backend/users.php b/application/views/backend/users.php
index 2605f6bb..7eaa472d 100755
--- a/application/views/backend/users.php
+++ b/application/views/backend/users.php
@@ -28,7 +28,7 @@
         }
     };
 
-    $(function() {
+    $(function () {
         BackendUsers.initialize(true);
     });
 </script>
@@ -83,7 +83,7 @@
                 </div>
 
                 <div class="record-details column col-12 col-md-7">
-                    <div class="float-md-left mb-4">
+                    <div class="float-md-left mb-4 mr-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-provider" class="btn btn-primary">
                                 <i class="far fa-plus-square mr-2"></i>
@@ -111,193 +111,208 @@
                         </div>
                     </div>
 
-                    <div class="switch-view float-md-right d-md-flex align-items-center mb-4">
-                        <strong><?= lang('current_view') ?></strong>
-                        <div class="display-details current"><?= lang('details') ?></div>
-                        <div class="display-working-plan"><?= lang('working_plan') ?></div>
-                    </div>
+                    <ul class="nav nav-pills switch-view">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#details" data-toggle="tab">
+                                <?= lang('details') ?>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#working-plan" data-toggle="tab">
+                                <?= lang('working_plan') ?>
+                            </a>
+                        </li>
+                    </ul>
+
+                    <?php
+                    // This form message is outside the details view, so that it can be
+                    // visible when the user has working plan view active.
+                    ?>
 
-                    <?php // This form message is outside the details view, so that it can be
-                    // visible when the user has working plan view active. ?>
                     <div class="form-message alert" style="display:none;"></div>
 
-                    <div class="details-view provider-view">
-                        <h3><?= lang('details') ?></h3>
+                    <div class="tab-content">
+                        <div class="details-view tab-pane fade show active clearfix" id="details">
+                            <h3><?= lang('details') ?></h3>
 
-                        <input type="hidden" id="provider-id" class="record-id">
+                            <input type="hidden" id="provider-id" class="record-id">
 
-                        <div class="row">
-                            <div class="provider-details col-12 col-md-6">
-                                <div class="form-group">
-                                    <label for="provider-first-name"><?= lang('first_name') ?> *</label>
-                                    <input id="provider-first-name" class="form-control required" maxlength="256">
+                            <div class="row">
+                                <div class="provider-details col-12 col-md-6">
+                                    <div class="form-group">
+                                        <label for="provider-first-name"><?= lang('first_name') ?> *</label>
+                                        <input id="provider-first-name" class="form-control required" maxlength="256">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-last-name"><?= lang('last_name') ?> *</label>
+                                        <input id="provider-last-name" class="form-control required" maxlength="512">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-email"><?= lang('email') ?> *</label>
+                                        <input id="provider-email" class="form-control required" max="512">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-phone-number"><?= lang('phone_number') ?> *</label>
+                                        <input id="provider-phone-number" class="form-control required" max="128">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-mobile-number"><?= lang('mobile_number') ?></label>
+                                        <input id="provider-mobile-number" class="form-control" maxlength="128">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-address"><?= lang('address') ?></label>
+                                        <input id="provider-address" class="form-control" maxlength="256">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-city"><?= lang('city') ?></label>
+                                        <input id="provider-city" class="form-control" maxlength="256">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-state"><?= lang('state') ?></label>
+                                        <input id="provider-state" class="form-control" maxlength="256">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-zip-code"><?= lang('zip_code') ?></label>
+                                        <input id="provider-zip-code" class="form-control" maxlength="64">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-notes"><?= lang('notes') ?></label>
+                                        <textarea id="provider-notes" class="form-control" rows="3"></textarea>
+                                    </div>
                                 </div>
+                                <div class="provider-settings col-12 col-md-6">
+                                    <div class="form-group">
+                                        <label for="provider-username"><?= lang('username') ?> *</label>
+                                        <input id="provider-username" class="form-control required" maxlength="256">
+                                    </div>
 
-                                <div class="form-group">
-                                    <label for="provider-last-name"><?= lang('last_name') ?> *</label>
-                                    <input id="provider-last-name" class="form-control required" maxlength="512">
+                                    <div class="form-group">
+                                        <label for="provider-password"><?= lang('password') ?> *</label>
+                                        <input type="password" id="provider-password" class="form-control required"
+                                               maxlength="512" autocomplete="new-password">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-password-confirm"><?= lang('retype_password') ?> *</label>
+                                        <input type="password" id="provider-password-confirm"
+                                               class="form-control required" maxlength="512"
+                                               autocomplete="new-password">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-calendar-view"><?= lang('calendar') ?> *</label>
+                                        <select id="provider-calendar-view" class="form-control required">
+                                            <option value="default">Default</option>
+                                            <option value="table">Table</option>
+                                        </select>
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="provider-timezone"><?= lang('timezone') ?></label>
+                                        <?= render_timezone_dropdown('id="provider-timezone" class="form-control"') ?>
+                                    </div>
+
+                                    <br>
+
+                                    <div class="custom-control custom-switch">
+                                        <input type="checkbox" class="custom-control-input" id="provider-notifications">
+                                        <label class="custom-control-label" for="provider-notifications">
+                                            <?= lang('receive_notifications') ?>
+                                        </label>
+                                    </div>
+
+                                    <br>
+
+                                    <h4><?= lang('services') ?></h4>
+                                    <div id="provider-services" class="card card-body bg-light border-light"></div>
                                 </div>
-
-                                <div class="form-group">
-                                    <label for="provider-email"><?= lang('email') ?> *</label>
-                                    <input id="provider-email" class="form-control required" max="512">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-phone-number"><?= lang('phone_number') ?> *</label>
-                                    <input id="provider-phone-number" class="form-control required" max="128">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-mobile-number"><?= lang('mobile_number') ?></label>
-                                    <input id="provider-mobile-number" class="form-control" maxlength="128">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-address"><?= lang('address') ?></label>
-                                    <input id="provider-address" class="form-control" maxlength="256">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-city"><?= lang('city') ?></label>
-                                    <input id="provider-city" class="form-control" maxlength="256">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-state"><?= lang('state') ?></label>
-                                    <input id="provider-state" class="form-control" maxlength="256">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-zip-code"><?= lang('zip_code') ?></label>
-                                    <input id="provider-zip-code" class="form-control" maxlength="64">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-notes"><?= lang('notes') ?></label>
-                                    <textarea id="provider-notes" class="form-control" rows="3"></textarea>
-                                </div>
-                            </div>
-                            <div class="provider-settings col-12 col-md-6">
-                                <div class="form-group">
-                                    <label for="provider-username"><?= lang('username') ?> *</label>
-                                    <input id="provider-username" class="form-control required" maxlength="256">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-password"><?= lang('password') ?> *</label>
-                                    <input type="password" id="provider-password" class="form-control required" maxlength="512" autocomplete="new-password">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-password-confirm"><?= lang('retype_password') ?> *</label>
-                                    <input type="password" id="provider-password-confirm" class="form-control required" maxlength="512" autocomplete="new-password">
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-calendar-view"><?= lang('calendar') ?> *</label>
-                                    <select id="provider-calendar-view" class="form-control required">
-                                        <option value="default">Default</option>
-                                        <option value="table">Table</option>
-                                    </select>
-                                </div>
-
-                                <div class="form-group">
-                                    <label for="provider-timezone"><?= lang('timezone') ?></label>
-                                    <?= render_timezone_dropdown('id="provider-timezone" class="form-control"') ?>
-                                </div>
-
-                                <br>
-
-                                <div class="custom-control custom-switch">
-                                    <input type="checkbox" class="custom-control-input" id="provider-notifications">
-                                    <label class="custom-control-label" for="provider-notifications">
-                                        <?= lang('receive_notifications') ?>
-                                    </label>
-                                </div>
-
-                                <br>
-
-                                <h4><?= lang('services') ?></h4>
-                                <div id="provider-services" class="card card-body bg-light border-light"></div>
                             </div>
                         </div>
-                    </div>
 
-                    <div class="working-plan-view provider-view" style="display: none;">
-                        <h3><?= lang('working_plan') ?></h3>
-                        <button id="reset-working-plan" class="btn btn-primary"
-                                title="<?= lang('reset_working_plan') ?>">
-                            <i class="fas fa-redo-alt"></i>
-                            <?= lang('reset_plan') ?></button>
-                        <table class="working-plan table table-striped mt-2">
-                            <thead>
+                        <div class="working-plan-view tab-pane fade clearfix" id="working-plan">
+                            <h3><?= lang('working_plan') ?></h3>
+                            <button id="reset-working-plan" class="btn btn-primary"
+                                    title="<?= lang('reset_working_plan') ?>">
+                                <i class="fas fa-redo-alt"></i>
+                                <?= lang('reset_plan') ?></button>
+                            <table class="working-plan table table-striped mt-2">
+                                <thead>
                                 <tr>
                                     <th><?= lang('day') ?></th>
                                     <th><?= lang('start') ?></th>
                                     <th><?= lang('end') ?></th>
                                 </tr>
-                            </thead>
-                            <tbody><!-- Dynamic Content --></tbody>
-                        </table>
+                                </thead>
+                                <tbody><!-- Dynamic Content --></tbody>
+                            </table>
 
-                        <br>
+                            <br>
 
-                        <h3><?= lang('breaks') ?></h3>
+                            <h3><?= lang('breaks') ?></h3>
 
-                        <span class="help-block">
+                            <span class="help-block">
                             <?= lang('add_breaks_during_each_day') ?>
                         </span>
 
-                        <div>
-                            <button type="button" class="add-break btn btn-primary">
-                                <i class="far fa-plus-square"></i>
-                                <?= lang('add_break') ?>
-                            </button>
-                        </div>
+                            <div>
+                                <button type="button" class="add-break btn btn-primary">
+                                    <i class="far fa-plus-square"></i>
+                                    <?= lang('add_break') ?>
+                                </button>
+                            </div>
 
-                        <br>
+                            <br>
 
-                        <table class="breaks table table-striped">
-                            <thead>
+                            <table class="breaks table table-striped">
+                                <thead>
                                 <tr>
                                     <th><?= lang('day') ?></th>
                                     <th><?= lang('start') ?></th>
                                     <th><?= lang('end') ?></th>
                                     <th><?= lang('actions') ?></th>
                                 </tr>
-                            </thead>
-                            <tbody><!-- Dynamic Content --></tbody>
-                        </table>
+                                </thead>
+                                <tbody><!-- Dynamic Content --></tbody>
+                            </table>
 
-                        <br>
+                            <br>
 
-                        <h3><?= lang('extra_periods') ?></h3>
+                            <h3><?= lang('extra_periods') ?></h3>
 
-                        <span class="help-block">
+                            <span class="help-block">
                             <?= lang('add_extra_periods_during_each_day') ?>
                         </span>
 
-                        <div>
-                            <button type="button" class="add-extra-periods btn btn-primary">
-                                <i class="far fa-plus-square"></i>
-                                <?= lang('add_extra_period') ?>
-                            </button>
+                            <div>
+                                <button type="button" class="add-extra-periods btn btn-primary">
+                                    <i class="far fa-plus-square"></i>
+                                    <?= lang('add_extra_period') ?>
+                                </button>
+                            </div>
+
+                            <br>
+
+                            <table class="extra-periods table table-striped">
+                                <thead>
+                                <tr>
+                                    <th><?= lang('day') ?></th>
+                                    <th><?= lang('start') ?></th>
+                                    <th><?= lang('end') ?></th>
+                                    <th><?= lang('actions') ?></th>
+                                </tr>
+                                </thead>
+                                <tbody><!-- Dynamic Content --></tbody>
+                            </table>
                         </div>
-
-                        <br>
-
-                        <table class="extra-periods table table-striped">
-                            <thead>
-                            <tr>
-                                <th><?= lang('day') ?></th>
-                                <th><?= lang('start') ?></th>
-                                <th><?= lang('end') ?></th>
-                                <th><?= lang('actions') ?></th>
-                            </tr>
-                            </thead>
-                            <tbody><!-- Dynamic Content --></tbody>
-                        </table>
                     </div>
                 </div>
             </div>
@@ -425,12 +440,14 @@
 
                             <div class="form-group">
                                 <label for="secretary-password"><?= lang('password') ?> *</label>
-                                <input type="password" id="secretary-password" class="form-control required" maxlength="512" autocomplete="new-password">
+                                <input type="password" id="secretary-password" class="form-control required"
+                                       maxlength="512" autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
                                 <label for="secretary-password-confirm"><?= lang('retype_password') ?> *</label>
-                                <input type="password" id="secretary-password-confirm" class="form-control required" maxlength="512" autocomplete="new-password">
+                                <input type="password" id="secretary-password-confirm" class="form-control required"
+                                       maxlength="512" autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
@@ -587,12 +604,14 @@
 
                             <div class="form-group">
                                 <label for="admin-password"><?= lang('password') ?> *</label>
-                                <input type="password" id="admin-password" class="form-control required" maxlength="512" autocomplete="new-password">
+                                <input type="password" id="admin-password" class="form-control required" maxlength="512"
+                                       autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
                                 <label for="admin-password-confirm"><?= lang('retype_password') ?> *</label>
-                                <input type="password" id="admin-password-confirm" class="form-control required" maxlength="512" autocomplete="new-password">
+                                <input type="password" id="admin-password-confirm" class="form-control required"
+                                       maxlength="512" autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
diff --git a/assets/css/backend.css b/assets/css/backend.css
index f9c185cb..7d62ee7f 100644
--- a/assets/css/backend.css
+++ b/assets/css/backend.css
@@ -714,40 +714,13 @@ body .form-horizontal .controls {
 
 #users-page #providers .switch-view {
     overflow: auto;
-    margin-bottom: 5px;
+    background: none;
+    padding: 0;
+    margin: 0;
 }
 
-#users-page #providers .switch-view div {
-    display: inline-block;
-    padding: 6px 13px;
-    color: #333;
-    float: left;
-    margin-right: 3px;
-    cursor: pointer;
-    min-width: 100px;
-    text-align: center;
-}
-
-#users-page #providers .switch-view div:hover:not(.current) {
-    background: #F5F5F5;
-}
-
-#users-page #providers .switch-view strong {
-    display: inline-block;
-    float: left;
-    margin-right: 20px;
-    font-size: 17px;
-}
-
-#users-page #providers .switch-view .current {
-    color: #FFF;
-    background: #39c678;
-}
-
-#users-page #providers .details-view,
-#users-page #providers .working-plan-view {
-    clear: both;
-    overflow: auto;
+#users-page #providers .switch-view .nav-item {
+    margin: 0;
 }
 
 #users-page #providers .working-plan-view .work-start,
diff --git a/assets/css/general.css b/assets/css/general.css
index 45a9fee4..d1cb1f86 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -436,3 +436,7 @@ body .popover-body a {
 .has-error .form-control {
     border-color: #dc3545;
 }
+
+body .clearfix {
+    clear: both;
+}
diff --git a/assets/js/backend_users.js b/assets/js/backend_users.js
index 03c6d122..cc8f77a3 100644
--- a/assets/js/backend_users.js
+++ b/assets/js/backend_users.js
@@ -137,6 +137,10 @@ window.BackendUsers = window.BackendUsers || {};
          * Changes the displayed tab.
          */
         $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
+            if ($(this).parents('.switch-view').length) {
+                return; // Do not proceed if this was the sub navigation.
+            }
+
             if ($(this).attr('href') === '#admins') {
                 helper = new AdminsHelper();
             } else if ($(this).attr('href') === '#providers') {
diff --git a/assets/js/backend_users_providers.js b/assets/js/backend_users_providers.js
index f3548657..9e3a9ffa 100755
--- a/assets/js/backend_users_providers.js
+++ b/assets/js/backend_users_providers.js
@@ -205,23 +205,8 @@
         /**
          * Event: Display Provider Details "Click"
          */
-        $('#providers').on('click', '.display-details', function () {
-            $('#providers .switch-view .current').removeClass('current');
-            $(this).addClass('current');
-            $('.working-plan-view').hide('fade', function () {
-                $('.details-view').show('fade');
-            });
-        });
-
-        /**
-         * Event: Display Provider Working Plan "Click"
-         */
-        $('#providers').on('click', '.display-working-plan', function () {
-            $('#providers .switch-view .current').removeClass('current');
-            $(this).addClass('current');
-            $('.details-view').hide('fade', function () {
-                $('.working-plan-view').show('fade');
-            });
+        $('#providers').on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
+            Backend.placeFooterToBottom();
         });
 
         /**