diff --git a/application/views/appointments/book.php b/application/views/appointments/book.php
index 3adc8d3d..be5d887d 100755
--- a/application/views/appointments/book.php
+++ b/application/views/appointments/book.php
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#35A768">
 
-    <title><?= lang('page_title') . ' ' .  $company_name ?></title>
+    <title><?= lang('page_title') . ' ' . $company_name ?></title>
 
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">
@@ -21,138 +21,153 @@
 </head>
 
 <body>
-    <div id="main" class="container">
-        <div class="wrapper row d-md-flex align-items-center justify-content-center">
-            <div id="book-appointment-wizard" class="col-xs-12 col-md-10 col-lg-8">
+<div id="main" class="container">
+    <div class="row wrapper">
+        <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8">
 
-                <!-- FRAME TOP BAR -->
+            <!-- FRAME TOP BAR -->
 
-                <div id="header">
-                    <span id="company-name"><?= $company_name ?></span>
+            <div id="header">
+                <span id="company-name"><?= $company_name ?></span>
 
-                    <div id="steps">
-                        <div id="step-1" class="book-step active-step" title="<?= lang('step_one_title') ?>">
-                            <strong>1</strong>
-                        </div>
+                <div id="steps">
+                    <div id="step-1" class="book-step active-step" title="<?= lang('step_one_title') ?>">
+                        <strong>1</strong>
+                    </div>
 
-                        <div id="step-2" class="book-step" title="<?= lang('step_two_title') ?>">
-                            <strong>2</strong>
-                        </div>
-                        <div id="step-3" class="book-step" title="<?= lang('step_three_title') ?>">
-                            <strong>3</strong>
-                        </div>
-                        <div id="step-4" class="book-step" title="<?= lang('step_four_title') ?>">
-                            <strong>4</strong>
-                        </div>
+                    <div id="step-2" class="book-step" title="<?= lang('step_two_title') ?>">
+                        <strong>2</strong>
+                    </div>
+                    <div id="step-3" class="book-step" title="<?= lang('step_three_title') ?>">
+                        <strong>3</strong>
+                    </div>
+                    <div id="step-4" class="book-step" title="<?= lang('step_four_title') ?>">
+                        <strong>4</strong>
                     </div>
                 </div>
+            </div>
 
-                <?php if ($manage_mode): ?>
+            <?php if ($manage_mode): ?>
                 <div id="cancel-appointment-frame" class="booking-header-bar row">
-                    <div class="col-xs-12 col-md-10">
+                    <div class="col-12 col-md-10">
                         <p><?= lang('cancel_appointment_hint') ?></p>
                     </div>
-                    <div class="col-xs-12 col-md-2">
+                    <div class="col-12 col-md-2">
                         <form id="cancel-appointment-form" method="post"
                               action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
-                            <input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>" />
+                            <input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>"/>
                             <textarea name="cancel_reason" style="display:none"></textarea>
                             <button id="cancel-appointment" class="btn btn-light btn-sm"><?= lang('cancel') ?></button>
                         </form>
                     </div>
                 </div>
                 <div class="booking-header-bar row">
-                    <div class="col-xs-12 col-md-10">
+                    <div class="col-12 col-md-10">
                         <p><?= lang('delete_personal_information_hint') ?></p>
                     </div>
-                    <div class="col-xs-12 col-md-2">
-                        <button id="delete-personal-information" class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
+                    <div class="col-12 col-md-2">
+                        <button id="delete-personal-information"
+                                class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
                     </div>
                 </div>
-                <?php endif; ?>
+            <?php endif; ?>
 
-                <?php if (isset($exceptions)): ?>
+            <?php if (isset($exceptions)): ?>
                 <div style="margin: 10px">
                     <h4><?= lang('unexpected_issues') ?></h4>
 
-                    <?php foreach($exceptions as $exception): ?>
+                    <?php foreach ($exceptions as $exception): ?>
                         <?= exceptionToHtml($exception) ?>
                     <?php endforeach ?>
                 </div>
-                <?php endif ?>
+            <?php endif ?>
 
 
+            <!-- SELECT SERVICE AND PROVIDER -->
 
-                <!-- SELECT SERVICE AND PROVIDER -->
+            <div id="wizard-frame-1" class="wizard-frame">
+                <div class="frame-container">
+                    <h4 class="frame-title"><?= lang('step_one_title') ?></h4>
 
-                <div id="wizard-frame-1" class="wizard-frame">
-                    <div class="frame-container">
-                        <h3 class="frame-title"><?= lang('step_one_title') ?></h3>
-
-                        <div class="frame-content">
+                    <div class="row frame-content">
+                        <div class="col">
                             <div class="form-group">
                                 <label for="select-service">
-                                    <strong><?= lang('select_service') ?></strong>
+                                    <strong><?= lang('service') ?></strong>
                                 </label>
 
                                 <select id="select-service" class="form-control">
                                     <?php
-                                        // Group services by category, only if there is at least one service with a parent category.
-                                        $has_category = FALSE;
-                                        foreach($available_services as $service) {
-                                            if ($service['category_id'] != NULL) {
-                                                $has_category = TRUE;
-                                                break;
+                                    // Group services by category, only if there is at least one service with a parent category.
+                                    $has_category = FALSE;
+                                    foreach ($available_services as $service)
+                                    {
+                                        if ($service['category_id'] != NULL)
+                                        {
+                                            $has_category = TRUE;
+                                            break;
+                                        }
+                                    }
+
+                                    if ($has_category)
+                                    {
+                                        $grouped_services = [];
+
+                                        foreach ($available_services as $service)
+                                        {
+                                            if ($service['category_id'] != NULL)
+                                            {
+                                                if ( ! isset($grouped_services[$service['category_name']]))
+                                                {
+                                                    $grouped_services[$service['category_name']] = [];
+                                                }
+
+                                                $grouped_services[$service['category_name']][] = $service;
                                             }
                                         }
 
-                                        if ($has_category) {
-                                            $grouped_services = array();
-
-                                            foreach($available_services as $service) {
-                                                if ($service['category_id'] != NULL) {
-                                                    if (!isset($grouped_services[$service['category_name']])) {
-                                                        $grouped_services[$service['category_name']] = array();
-                                                    }
-
-                                                    $grouped_services[$service['category_name']][] = $service;
-                                                }
-                                            }
-
-                                            // We need the uncategorized services at the end of the list so we will use
-                                            // another iteration only for the uncategorized services.
-                                            $grouped_services['uncategorized'] = array();
-                                            foreach($available_services as $service) {
-                                                if ($service['category_id'] == NULL) {
-                                                    $grouped_services['uncategorized'][] = $service;
-                                                }
-                                            }
-
-                                            foreach($grouped_services as $key => $group) {
-                                                $group_label = ($key != 'uncategorized')
-                                                        ? $group[0]['category_name'] : 'Uncategorized';
-
-                                                if (count($group) > 0) {
-                                                    echo '<optgroup label="' . $group_label . '">';
-                                                    foreach($group as $service) {
-                                                        echo '<option value="' . $service['id'] . '">'
-                                                            . $service['name'] . '</option>';
-                                                    }
-                                                    echo '</optgroup>';
-                                                }
-                                            }
-                                        }  else {
-                                            foreach($available_services as $service) {
-                                                echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>';
+                                        // We need the uncategorized services at the end of the list so we will use
+                                        // another iteration only for the uncategorized services.
+                                        $grouped_services['uncategorized'] = [];
+                                        foreach ($available_services as $service)
+                                        {
+                                            if ($service['category_id'] == NULL)
+                                            {
+                                                $grouped_services['uncategorized'][] = $service;
                                             }
                                         }
+
+                                        foreach ($grouped_services as $key => $group)
+                                        {
+                                            $group_label = ($key != 'uncategorized')
+                                                ? $group[0]['category_name'] : 'Uncategorized';
+
+                                            if (count($group) > 0)
+                                            {
+                                                echo '<optgroup label="' . $group_label . '">';
+                                                foreach ($group as $service)
+                                                {
+                                                    echo '<option value="' . $service['id'] . '">'
+                                                        . $service['name'] . '</option>';
+                                                }
+                                                echo '</optgroup>';
+                                            }
+                                        }
+                                    }
+                                    else
+                                    {
+                                        foreach ($available_services as $service)
+                                        {
+                                            echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>';
+                                        }
+                                    }
                                     ?>
                                 </select>
                             </div>
 
                             <div class="form-group">
                                 <label for="select-provider">
-                                    <strong><?= lang('select_provider') ?></strong>
+                                    <strong><?= lang('provider') ?></strong>
                                 </label>
 
                                 <select id="select-provider" class="form-control"></select>
@@ -161,258 +176,268 @@
                             <div id="service-description"></div>
                         </div>
                     </div>
-
-                    <div class="command-buttons">
-                        <button type="button" id="button-next-1" class="btn button-next btn-primary"
-                                data-step_index="1">
-                            <?= lang('next') ?>
-                            <i class="fas fa-long-arrow-alt-right"></i>
-                        </button>
-                    </div>
                 </div>
 
-                <!-- SELECT APPOINTMENT DATE -->
+                <div class="command-buttons">
+                    <button type="button" id="button-next-1" class="btn button-next btn-primary"
+                            data-step_index="1">
+                        <?= lang('next') ?>
+                        <i class="fas fa-long-arrow-alt-right"></i>
+                    </button>
+                </div>
+            </div>
 
-                <div id="wizard-frame-2" class="wizard-frame" style="display:none;">
-                    <div class="frame-container">
+            <!-- SELECT APPOINTMENT DATE -->
 
-                        <h3 class="frame-title"><?= lang('step_two_title') ?></h3>
+            <div id="wizard-frame-2" class="wizard-frame" style="display:none;">
+                <div class="frame-container">
 
-                        <div class="frame-content row">
-                            <div class="col-xs-12 col-md-7 pl-0 pr-0 pr-md-3 mb-4 mb-md-0 d-flex">
-                                <div id="select-date"></div>
-                            </div>
+                    <h4 class="frame-title"><?= lang('step_two_title') ?></h4>
 
-                            <div class="col-xs-12 col-sm-5 px-0">
-                                <label for="select-timezone"><?= lang('timezone') ?></label>
-                                <?= render_timezone_dropdown('id="select-timezone" class="form-control" value="UTC"'); ?>
+                    <div class="row frame-content">
+                        <div class="col-12 col-md-7">
+                            <div id="select-date"></div>
+                        </div>
+
+                        <div class="col-12 col-sm-5">
+                            <div id="select-time">
+                                <div class="form-group">
+                                    <label for="select-timezone"><?= lang('timezone') ?></label>
+                                    <?= render_timezone_dropdown('id="select-timezone" class="form-control" value="UTC"'); ?>
+                                </div>
 
                                 <div id="available-hours"></div>
                             </div>
                         </div>
                     </div>
-
-                    <div class="command-buttons">
-                        <button type="button" id="button-back-2" class="btn button-back btn-light"
-                                data-step_index="2">
-                                <i class="fas fa-long-arrow-alt-left"></i>
-                            <?= lang('back') ?>
-                        </button>
-                        <button type="button" id="button-next-2" class="btn button-next btn-primary"
-                                data-step_index="2">
-                            <?= lang('next') ?>
-                            <i class="fas fa-long-arrow-alt-right"></i>
-                        </button>
-                    </div>
                 </div>
 
-                <!-- ENTER CUSTOMER DATA -->
+                <div class="command-buttons">
+                    <button type="button" id="button-back-2" class="btn button-back btn-light"
+                            data-step_index="2">
+                        <i class="fas fa-long-arrow-alt-left"></i>
+                        <?= lang('back') ?>
+                    </button>
+                    <button type="button" id="button-next-2" class="btn button-next btn-primary"
+                            data-step_index="2">
+                        <?= lang('next') ?>
+                        <i class="fas fa-long-arrow-alt-right"></i>
+                    </button>
+                </div>
+            </div>
 
-                <div id="wizard-frame-3" class="wizard-frame" style="display:none;">
-                    <div class="frame-container">
+            <!-- ENTER CUSTOMER DATA -->
 
-                        <h3 class="frame-title"><?= lang('step_three_title') ?></h3>
+            <div id="wizard-frame-3" class="wizard-frame" style="display:none;">
+                <div class="frame-container">
 
-                        <div class="frame-content row">
-                            <div class="col-xs-12 col-md-6">
-                                <div class="form-group">
-                                    <label for="first-name" class="control-label"><?= lang('first_name') ?> *</label>
-                                    <input type="text" id="first-name" class="required form-control" maxlength="100" />
-                                </div>
-                                <div class="form-group">
-                                    <label for="last-name" class="control-label"><?= lang('last_name') ?> *</label>
-                                    <input type="text" id="last-name" class="required form-control" maxlength="120" />
-                                </div>
-                                <div class="form-group">
-                                    <label for="email" class="control-label"><?= lang('email') ?> *</label>
-                                    <input type="text" id="email" class="required form-control" maxlength="120" />
-                                </div>
-                                <div class="form-group">
-                                    <label for="phone-number" class="control-label">
-                                        <?= lang('phone_number') ?>
-                                        <?= $require_phone_number === '1' ? '*'  : '' ?>
-                                    </label>
-                                    <input type="text" id="phone-number" maxlength="60"
-                                           class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control" />
-                                </div>
+                    <h4 class="frame-title"><?= lang('step_three_title') ?></h4>
+
+                    <div class="row frame-content">
+                        <div class="col-12 col-md-6">
+                            <div class="form-group">
+                                <label for="first-name" class="control-label"><?= lang('first_name') ?> *</label>
+                                <input type="text" id="first-name" class="required form-control" maxlength="100"/>
                             </div>
+                            <div class="form-group">
+                                <label for="last-name" class="control-label"><?= lang('last_name') ?> *</label>
+                                <input type="text" id="last-name" class="required form-control" maxlength="120"/>
+                            </div>
+                            <div class="form-group">
+                                <label for="email" class="control-label"><?= lang('email') ?> *</label>
+                                <input type="text" id="email" class="required form-control" maxlength="120"/>
+                            </div>
+                            <div class="form-group">
+                                <label for="phone-number" class="control-label">
+                                    <?= lang('phone_number') ?>
+                                    <?= $require_phone_number === '1' ? '*' : '' ?>
+                                </label>
+                                <input type="text" id="phone-number" maxlength="60"
+                                       class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/>
+                            </div>
+                        </div>
 
-                            <div class="col-xs-12 col-md-6">
-                                <div class="form-group">
-                                    <label for="address" class="control-label"><?= lang('address') ?></label>
-                                    <input type="text" id="address" class="form-control" maxlength="120" />
-                                </div>
-                                <div class="form-group">
-                                    <label for="city" class="control-label"><?= lang('city') ?></label>
-                                    <input type="text" id="city" class="form-control" maxlength="120" />
-                                </div>
-                                <div class="form-group">
-                                    <label for="zip-code" class="control-label"><?= lang('zip_code') ?></label>
-                                    <input type="text" id="zip-code" class="form-control" maxlength="120" />
-                                </div>
-                                <div class="form-group">
-                                    <label for="notes" class="control-label"><?= lang('notes') ?></label>
-                                    <textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
-                                </div>
+                        <div class="col-12 col-md-6">
+                            <div class="form-group">
+                                <label for="address" class="control-label"><?= lang('address') ?></label>
+                                <input type="text" id="address" class="form-control" maxlength="120"/>
+                            </div>
+                            <div class="form-group">
+                                <label for="city" class="control-label"><?= lang('city') ?></label>
+                                <input type="text" id="city" class="form-control" maxlength="120"/>
+                            </div>
+                            <div class="form-group">
+                                <label for="zip-code" class="control-label"><?= lang('zip_code') ?></label>
+                                <input type="text" id="zip-code" class="form-control" maxlength="120"/>
+                            </div>
+                            <div class="form-group">
+                                <label for="notes" class="control-label"><?= lang('notes') ?></label>
+                                <textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
                             </div>
                         </div>
                     </div>
-
-                    <?php if ($display_terms_and_conditions): ?>
-                        <div class="form-check mb-3">
-                            <input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
-                            <label class="form-check-label" for="accept-to-terms-and-conditions">
-                                <?= strtr(lang('read_and_agree_to_terms_and_conditions'),
-                                    [
-                                        '{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">',
-                                        '{/$link}' => '</a>'
-                                    ])
-                                ?>
-                            </label>
-                        </div>
-                    <?php endif ?>
-
-                    <?php if ($display_privacy_policy): ?>
-                        <div class="form-check mb-3">
-                            <input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
-                            <label class="form-check-label" for="accept-to-privacy-policy">
-                                <?= strtr(lang('read_and_agree_to_privacy_policy'),
-                                    [
-                                        '{$link}' => '<a href="#" data-toggle="modal" data-target="#privacy-policy-modal">',
-                                        '{/$link}' => '</a>'
-                                    ])
-                                ?>
-                            </label>
-                        </div>
-                    <?php endif ?>
-
-                    <span id="form-message" class="text-danger d-block"><?= lang('fields_are_required') ?></span>
-
-                    <div class="command-buttons">
-                        <button type="button" id="button-back-3" class="btn button-back btn-light"
-                                data-step_index="3"><i class="fas fa-long-arrow-alt-left"></i>
-                            <?= lang('back') ?>
-                        </button>
-                        <button type="button" id="button-next-3" class="btn button-next btn-primary"
-                                data-step_index="3">
-                            <?= lang('next') ?>
-                            <i class="fas fa-long-arrow-alt-right"></i>
-                        </button>
-                    </div>
                 </div>
 
-                <!-- APPOINTMENT DATA CONFIRMATION -->
+                <?php if ($display_terms_and_conditions): ?>
+                    <div class="form-check mb-3">
+                        <input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
+                        <label class="form-check-label" for="accept-to-terms-and-conditions">
+                            <?= strtr(lang('read_and_agree_to_terms_and_conditions'),
+                                [
+                                    '{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">',
+                                    '{/$link}' => '</a>'
+                                ])
+                            ?>
+                        </label>
+                    </div>
+                <?php endif ?>
 
-                <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
-                    <div class="frame-container">
-                        <h3 class="frame-title"><?= lang('step_four_title') ?></h3>
-                        <div class="frame-content row">
-                            <div id="appointment-details" class="col-xs-12 col-md-6"></div>
-                            <div id="customer-details" class="col-xs-12 col-md-6"></div>
-                        </div>
-                        <?php if ($this->settings_model->get_setting('require_captcha') === '1'): ?>
-                        <div class="frame-content row">
-                            <div class="col-xs-12 col-md-6">
+                <?php if ($display_privacy_policy): ?>
+                    <div class="form-check mb-3">
+                        <input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
+                        <label class="form-check-label" for="accept-to-privacy-policy">
+                            <?= strtr(lang('read_and_agree_to_privacy_policy'),
+                                [
+                                    '{$link}' => '<a href="#" data-toggle="modal" data-target="#privacy-policy-modal">',
+                                    '{/$link}' => '</a>'
+                                ])
+                            ?>
+                        </label>
+                    </div>
+                <?php endif ?>
+
+                <div id="form-message" class="text-danger">
+                    <?= lang('fields_are_required') ?>
+                </div>
+
+                <div class="command-buttons">
+                    <button type="button" id="button-back-3" class="btn button-back btn-light"
+                            data-step_index="3"><i class="fas fa-long-arrow-alt-left"></i>
+                        <?= lang('back') ?>
+                    </button>
+                    <button type="button" id="button-next-3" class="btn button-next btn-primary"
+                            data-step_index="3">
+                        <?= lang('next') ?>
+                        <i class="fas fa-long-arrow-alt-right"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- APPOINTMENT DATA CONFIRMATION -->
+
+            <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
+                <div class="frame-container">
+                    <h4 class="frame-title"><?= lang('step_four_title') ?></h4>
+                    <div class="row frame-content">
+                        <div id="appointment-details" class="col-12 col-md-6"></div>
+                        <div id="customer-details" class="col-12 col-md-6"></div>
+                    </div>
+                    <?php if ($this->settings_model->get_setting('require_captcha') === '1'): ?>
+                        <div class="row frame-content">
+                            <div class="col-12 col-md-6">
                                 <h4 class="captcha-title">
                                     CAPTCHA
                                     <small class="fas fa-sync-alt"></small>
                                 </h4>
                                 <img class="captcha-image" src="<?= site_url('captcha') ?>">
-                                <input class="captcha-text" type="text" value="" />
+                                <input class="captcha-text" type="text" value=""/>
                                 <span id="captcha-hint" class="help-block" style="opacity:0">&nbsp;</span>
                             </div>
                         </div>
-                        <?php endif; ?>
-                    </div>
-
-                    <div class="command-buttons">
-                        <button type="button" id="button-back-4" class="btn button-back btn-light"
-                                data-step_index="4">
-                                <i class="fas fa-long-arrow-alt-left"></i>
-                            <?= lang('back') ?>
-                        </button>
-                        <form id="book-appointment-form" style="display:inline-block" method="post">
-                            <button id="book-appointment-submit" type="button" class="btn btn-success">
-                                <i class="far fa-check-circle"></i>
-                                <?= !$manage_mode ? lang('confirm') : lang('update') ?>
-                            </button>
-                            <input type="hidden" name="csrfToken" />
-                            <input type="hidden" name="post_data" />
-                        </form>
-                    </div>
+                    <?php endif; ?>
                 </div>
 
-                <!-- FRAME FOOTER -->
+                <div class="command-buttons">
+                    <button type="button" id="button-back-4" class="btn button-back btn-light"
+                            data-step_index="4">
+                        <i class="fas fa-long-arrow-alt-left"></i>
+                        <?= lang('back') ?>
+                    </button>
+                    <form id="book-appointment-form" style="display:inline-block" method="post">
+                        <button id="book-appointment-submit" type="button" class="btn btn-success">
+                            <i class="far fa-check-circle"></i>
+                            <?= ! $manage_mode ? lang('confirm') : lang('update') ?>
+                        </button>
+                        <input type="hidden" name="csrfToken"/>
+                        <input type="hidden" name="post_data"/>
+                    </form>
+                </div>
+            </div>
 
-                <div id="frame-footer">
+            <!-- FRAME FOOTER -->
+
+            <div id="frame-footer">
+                <small>
                     Powered By
+
                     <a href="https://easyappointments.org" target="_blank">Easy!Appointments</a>
-                    |
+
                     <span id="select-language" class="badge badge-success">
     		        	<?= ucfirst(config('language')) ?>
     		        </span>
-                    |
+
                     <a href="<?= site_url('backend'); ?>">
                         <?= $this->session->user_id ? lang('backend_section') : lang('login') ?>
                     </a>
-                </div>
+                </small>
             </div>
         </div>
     </div>
+</div>
 
-    <?php if ($display_cookie_notice === '1'): ?>
-        <?php require 'cookie_notice_modal.php' ?>
-    <?php endif ?>
+<?php if ($display_cookie_notice === '1'): ?>
+    <?php require 'cookie_notice_modal.php' ?>
+<?php endif ?>
 
-    <?php if ($display_terms_and_conditions === '1'): ?>
-        <?php require 'terms_and_conditions_modal.php' ?>
-    <?php endif ?>
+<?php if ($display_terms_and_conditions === '1'): ?>
+    <?php require 'terms_and_conditions_modal.php' ?>
+<?php endif ?>
 
-    <?php if ($display_privacy_policy === '1'): ?>
-        <?php require 'privacy_policy_modal.php' ?>
-    <?php endif ?>
+<?php if ($display_privacy_policy === '1'): ?>
+    <?php require 'privacy_policy_modal.php' ?>
+<?php endif ?>
 
-    <script>
-        var GlobalVariables = {
-            availableServices   : <?= json_encode($available_services) ?>,
-            availableProviders  : <?= json_encode($available_providers) ?>,
-            baseUrl             : <?= json_encode(config('base_url')) ?>,
-            manageMode          : <?= $manage_mode ? 'true' : 'false' ?>,
-            customerToken       : <?= json_encode($customer_token) ?>,
-            dateFormat          : <?= json_encode($date_format) ?>,
-            timeFormat          : <?= json_encode($time_format) ?>,
-            firstWeekday        : <?= json_encode($first_weekday) ?>,
-            displayCookieNotice : <?= json_encode($display_cookie_notice === '1') ?>,
-            appointmentData     : <?= json_encode($appointment_data) ?>,
-            providerData        : <?= json_encode($provider_data) ?>,
-            customerData        : <?= json_encode($customer_data) ?>,
-            displayAnyProvider  : <?= json_encode($display_any_provider) ?>,
-            csrfToken           : <?= json_encode($this->security->get_csrf_hash()) ?>
-        };
+<script>
+    var GlobalVariables = {
+        availableServices: <?= json_encode($available_services) ?>,
+        availableProviders: <?= json_encode($available_providers) ?>,
+        baseUrl: <?= json_encode(config('base_url')) ?>,
+        manageMode: <?= $manage_mode ? 'true' : 'false' ?>,
+        customerToken: <?= json_encode($customer_token) ?>,
+        dateFormat: <?= json_encode($date_format) ?>,
+        timeFormat: <?= json_encode($time_format) ?>,
+        firstWeekday: <?= json_encode($first_weekday) ?>,
+        displayCookieNotice: <?= json_encode($display_cookie_notice === '1') ?>,
+        appointmentData: <?= json_encode($appointment_data) ?>,
+        providerData: <?= json_encode($provider_data) ?>,
+        customerData: <?= json_encode($customer_data) ?>,
+        displayAnyProvider: <?= json_encode($display_any_provider) ?>,
+        csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>
+    };
 
-        var EALang = <?= json_encode($this->lang->language) ?>;
-        var availableLanguages = <?= json_encode(config('available_languages')) ?>;
-    </script>
+    var EALang = <?= json_encode($this->lang->language) ?>;
+    var availableLanguages = <?= json_encode(config('available_languages')) ?>;
+</script>
 
-    <script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
-    <script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
-    <script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>
+<script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
+<script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
+<script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
+<script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>
 
-    <script>
-        $(document).ready(function() {
-            FrontendBook.initialize(true, GlobalVariables.manageMode);
-            GeneralFunctions.enableLanguageSelection($('#select-language'));
-        });
-    </script>
+<script>
+    $(document).ready(function () {
+        FrontendBook.initialize(true, GlobalVariables.manageMode);
+        GeneralFunctions.enableLanguageSelection($('#select-language'));
+    });
+</script>
 
-    <?php google_analytics_script(); ?>
+<?php google_analytics_script(); ?>
 </body>
 </html>
diff --git a/application/views/appointments/book_success.php b/application/views/appointments/book_success.php
index be4a3b16..ff9f2ac1 100755
--- a/application/views/appointments/book_success.php
+++ b/application/views/appointments/book_success.php
@@ -17,11 +17,11 @@
 <body>
     <div id="main" class="container">
         <div class="wrapper row d-md-flex align-items-center justify-content-center">
-            <div id="success-frame" class="frame-container col-xs-12 d-md-flex">
-                <div class="col-xs-12">
+            <div id="success-frame" class="frame-container col-12 d-md-flex">
+                <div class="col-12">
                     <img id="success-icon" class="mt-0 mb-2" src="<?= base_url('assets/img/success.png') ?>" />
                 </div>
-                <div class="col-xs-12">
+                <div class="col-12">
                     <h3><?= lang('appointment_registered') ?></h3>
 
                     <p>
@@ -47,7 +47,7 @@
                     <?php endif ?>
 
                     <?php if (isset($exceptions)): ?>
-                        <div class="col-xs-12" style="margin:10px">
+                        <div class="col-12" style="margin:10px">
                             <h4><?= lang('unexpected_issues') ?></h4>
 
                             <?php foreach($exceptions as $exception): ?>
diff --git a/application/views/appointments/message.php b/application/views/appointments/message.php
index b72a8f03..e208a93c 100644
--- a/application/views/appointments/message.php
+++ b/application/views/appointments/message.php
@@ -27,12 +27,12 @@
 <body>
     <div id="main" class="container">
         <div class="wrapper row d-md-flex align-items-center justify-content-center">
-            <div id="message-frame" class="frame-container col-xs-12 d-md-flex">
-                <div class="col-xs-12">
+            <div id="message-frame" class="frame-container col-12 d-md-flex">
+                <div class="col-12">
                     <img id="message-icon" src="<?= $message_icon ?>" alt="warning">
                 </div>
 
-                <div class="col-xs-12">
+                <div class="col-12">
                     <h3><?= $message_title ?></h3>
                     <p><?= $message_text ?></p>
 
diff --git a/application/views/backend/customers.php b/application/views/backend/customers.php
index 0f4c9414..d45a4e5b 100755
--- a/application/views/backend/customers.php
+++ b/application/views/backend/customers.php
@@ -28,7 +28,7 @@
 
 <div id="customers-page" class="container-fluid backend-page">
     <div class="row">
-        <div id="filter-customers" class="filter-records col col-xs-12 col-md-5">
+        <div id="filter-customers" class="filter-records col col-12 col-md-5">
             <form class="mb-4">
                 <div class="input-group">
                     <input type="text" class="key form-control">
@@ -50,7 +50,7 @@
             <div class="results"></div>
     	</div>
 
-    	<div class="record-details col-xs-12 col-md-7">
+    	<div class="record-details col-12 col-md-7">
             <div class="btn-toolbar mb-4">
                 <div id="add-edit-delete-group" class="btn-group">
                     <?php if ($privileges[PRIV_CUSTOMERS]['add'] === TRUE): ?>
@@ -90,7 +90,7 @@
             <input id="customer-id" type="hidden">
 
             <div class="row">
-                <div class="col-xs-12 col-md-6" style="margin-left: 0;">
+                <div class="col-12 col-md-6" style="margin-left: 0;">
                     <h3><?= lang('details') ?></h3>
 
                     <div id="form-message" class="alert" style="display:none;"></div>
@@ -147,7 +147,7 @@
                     </p>
                 </div>
 
-                <div class="col-xs-12 col-md-6">
+                <div class="col-12 col-md-6">
                     <h3><?= lang('appointments') ?></h3>
                     <div id="customer-appointments" class="card card-body bg-light border-light"></div>
                     <div id="appointment-details" class="card card-body bg-light border-light d-none"></div>
diff --git a/application/views/backend/footer.php b/application/views/backend/footer.php
index 72a88ec2..af24080a 100644
--- a/application/views/backend/footer.php
+++ b/application/views/backend/footer.php
@@ -1,5 +1,5 @@
 <div id="footer">
-    <div id="footer-content" class="col-xs-12 col-sm-8">
+    <div id="footer-content" class="col-12 col-sm-8">
         Powered by
         <a href="https://easyappointments.org">
             Easy!Appointments
@@ -26,7 +26,7 @@
         </a>
     </div>
 
-    <div id="footer-user-display-name" class="col-xs-12 col-sm-4">
+    <div id="footer-user-display-name" class="col-12 col-sm-4">
         <?= lang('hello') . ', ' . $user_display_name ?>!
     </div>
 </div>
diff --git a/application/views/backend/services.php b/application/views/backend/services.php
index 748c2e96..98e930a9 100755
--- a/application/views/backend/services.php
+++ b/application/views/backend/services.php
@@ -36,7 +36,7 @@
 
         <div role="tabpanel" class="tab-pane active" id="services">
             <div class="row">
-                <div id="filter-services" class="filter-records col col-xs-12 col-md-5">
+                <div id="filter-services" class="filter-records col col-12 col-md-5">
                     <form class="mb-4">
                         <div class="input-group">
                             <input type="text" class="key form-control">
@@ -58,7 +58,7 @@
                     <div class="results"></div>
                 </div>
 
-                <div class="record-details column col-xs-12 col-md-5">
+                <div class="record-details column col-12 col-md-5">
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-service" class="btn btn-primary">
@@ -156,7 +156,7 @@
 
         <div role="tabpanel" class="tab-pane" id="categories">
             <div class="row">
-                <div id="filter-categories" class="filter-records column col-xs-12 col-md-5">
+                <div id="filter-categories" class="filter-records column col-12 col-md-5">
                     <form class="input-append mb-4">
                         <div class="input-group">
                             <input type="text" class="key form-control">
@@ -178,7 +178,7 @@
                     <div class="results"></div>
                 </div>
 
-                <div class="record-details col-xs-12 col-md-5">
+                <div class="record-details col-12 col-md-5">
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-category" class="btn btn-primary">
diff --git a/application/views/backend/settings.php b/application/views/backend/settings.php
index 122a749c..c824796c 100755
--- a/application/views/backend/settings.php
+++ b/application/views/backend/settings.php
@@ -78,7 +78,7 @@
                     </legend>
 
                     <div class="wrapper row">
-                        <div class="col-xs-12 col-sm-6">
+                        <div class="col-12 col-sm-6">
                             <div class="form-group">
                                 <label for="company-name"><?= lang('company_name') ?> *</label>
                                 <input id="company-name" data-field="company_name" class="required form-control">
@@ -145,7 +145,7 @@
                                 </span>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-sm-6">
+                        <div class="col-12 col-sm-6">
                             <div class="form-group">
                                 <label for="google-analytics-code">
                                     Google Analytics ID</label>
@@ -237,7 +237,7 @@
                     </legend>
 
                     <div class="row">
-                        <div class="col-xs-12 col-sm-7 working-plan-wrapper">
+                        <div class="col-12 col-sm-7 working-plan-wrapper">
                             <h4><?= lang('working_plan') ?></h4>
                             <span class="form-text text-muted mb-4">
                                 <?= lang('edit_working_plan_hint') ?>
@@ -272,7 +272,7 @@
                                 </p>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-sm-5 breaks-wrapper">
+                        <div class="col-12 col-sm-5 breaks-wrapper">
                             <h4><?= lang('breaks') ?></h4>
 
                             <span class="form-text text-muted">
@@ -323,7 +323,7 @@
                     </legend>
 
                     <div class="row">
-                        <div class="col-xs-12 col-sm-11 col-md-10 col-lg-9">
+                        <div class="col-12 col-sm-11 col-md-10 col-lg-9">
                             <h4><?= lang('cookie_notice') ?></h4>
 
                             <div class="form-group">
@@ -389,7 +389,7 @@
         <div role="tabpanel" class="tab-pane <?= $hidden ?>" id="current-user">
             <form>
                 <div class="row">
-                    <fieldset class="col-xs-12 col-sm-6 personal-info-wrapper">
+                    <fieldset class="col-12 col-sm-6 personal-info-wrapper">
                         <legend  class="border-bottom mb-4">
                             <?= lang('personal_information') ?>
                             <?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
@@ -454,7 +454,7 @@
                         </div>
                     </fieldset>
 
-                    <fieldset class="col-xs-12 col-sm-6 miscellaneous-wrapper">
+                    <fieldset class="col-12 col-sm-6 miscellaneous-wrapper">
                     <legend class="border-bottom mb-4"><?= lang('system_login') ?></legend>
 
                     <div class="form-group">
diff --git a/application/views/backend/users.php b/application/views/backend/users.php
index adf41fd3..9b28b807 100755
--- a/application/views/backend/users.php
+++ b/application/views/backend/users.php
@@ -48,7 +48,7 @@
 
         <div role="tabpanel" class="tab-pane active" id="providers">
             <div class="row">
-                <div id="filter-providers" class="filter-records column col-xs-12 col-md-5">
+                <div id="filter-providers" class="filter-records column col-12 col-md-5">
                     <form class="mb-4">
                         <div class="input-group">
                             <input type="text" class="key form-control">
@@ -70,7 +70,7 @@
                     <div class="results"></div>
                 </div>
 
-                <div class="record-details column col-xs-12 col-md-7">
+                <div class="record-details column col-12 col-md-7">
                     <div class="float-md-left mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-provider" class="btn btn-primary">
@@ -115,7 +115,7 @@
                         <input type="hidden" id="provider-id" class="record-id">
 
                         <div class="row">
-                            <div class="provider-details col-xs-12 col-md-6">
+                            <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">
@@ -166,7 +166,7 @@
                                     <textarea id="provider-notes" class="form-control" rows="3"></textarea>
                                 </div>
                             </div>
-                            <div class="provider-settings col-xs-12 col-md-6">
+                            <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">
@@ -293,7 +293,7 @@
 
         <div role="tabpanel" class="tab-pane" id="secretaries">
             <div class="row">
-                <div id="filter-secretaries" class="filter-records column col-xs-12 col-md-5">
+                <div id="filter-secretaries" class="filter-records column col-12 col-md-5">
                     <form class="mb-4">
                         <div class="input-group">
                             <input type="text" class="key form-control">
@@ -316,7 +316,7 @@
                     <div class="results"></div>
                 </div>
 
-                <div class="record-details column col-xs-12 col-md-7">
+                <div class="record-details column col-12 col-md-7">
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-secretary" class="btn btn-primary">
@@ -352,7 +352,7 @@
                     <input type="hidden" id="secretary-id" class="record-id">
 
                     <div class="row">
-                        <div class="secretary-details col-xs-12 col-md-6">
+                        <div class="secretary-details col-12 col-md-6">
                             <div class="form-group">
                                 <label for="secretary-first-name"><?= lang('first_name') ?> *</label>
                                 <input id="secretary-first-name" class="form-control required" maxlength="256">
@@ -403,7 +403,7 @@
                                 <textarea id="secretary-notes" class="form-control" rows="3"></textarea>
                             </div>
                         </div>
-                        <div class="secretary-settings col-xs-12 col-md-6">
+                        <div class="secretary-settings col-12 col-md-6">
                             <div class="form-group">
                                 <label for="secretary-username"><?= lang('username') ?> *</label>
                                 <input id="secretary-username" class="form-control required" maxlength="256">
@@ -453,7 +453,7 @@
 
         <div role="tabpanel" class="tab-pane" id="admins">
             <div class="row">
-                <div id="filter-admins" class="filter-records column col-xs-12 col-md-5">
+                <div id="filter-admins" class="filter-records column col-12 col-md-5">
                     <form class="mb-4">
                         <div class="input-group">
                             <input type="text" class="key form-control">
@@ -476,7 +476,7 @@
                     <div class="results"></div>
                 </div>
 
-                <div class="record-details column col-xs-12 col-md-7">
+                <div class="record-details column col-12 col-md-7">
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-admin" class="btn btn-primary">
@@ -512,7 +512,7 @@
                     <input type="hidden" id="admin-id" class="record-id">
 
                     <div class="row">
-                        <div class="admin-details col-xs-12 col-md-6">
+                        <div class="admin-details col-12 col-md-6">
                             <div class="form-group">
                                 <label for="first-name"><?= lang('first_name') ?> *</label>
                                 <input id="admin-first-name" class="form-control required" maxlength="256">
@@ -563,7 +563,7 @@
                                 <textarea id="admin-notes" class="form-control" rows="3"></textarea>
                             </div>
                         </div>
-                        <div class="admin-settings col-xs-12 col-md-6">
+                        <div class="admin-settings col-12 col-md-6">
                             <div class="form-group">
                                 <label for="admin-username"><?= lang('username') ?> *</label>
                                 <input id="admin-username" class="form-control required" maxlength="256">
diff --git a/application/views/general/installation.php b/application/views/general/installation.php
index bdfe1abc..6f80f1bd 100755
--- a/application/views/general/installation.php
+++ b/application/views/general/installation.php
@@ -80,7 +80,7 @@
         <div class="alert d-none"></div>
 
         <div class="row">
-            <div class="admin-settings col-xs-12 col-sm-5">
+            <div class="admin-settings col-12 col-sm-5">
                 <h3>Administrator</h3>
 
                 <div class="form-group">
@@ -119,7 +119,7 @@
                 </div>
             </div>
 
-            <div class="company-settings col-xs-12 col-sm-5">
+            <div class="company-settings col-12 col-sm-5">
                 <h3>Company</h3>
 
                 <div class="form-group">
diff --git a/assets/css/backend.css b/assets/css/backend.css
index 8a1b9bdd..95aaa72a 100644
--- a/assets/css/backend.css
+++ b/assets/css/backend.css
@@ -19,6 +19,7 @@ root {
 
 /* BACKEND GENERAL ELEMENTS
    -------------------------------------------------------------------- */
+
 #header {
     background-color: #429a82;
     box-shadow: none;
@@ -269,6 +270,7 @@ body legend {
 
 /* BACKEND CALENDAR PAGE
    -------------------------------------------------------------------- */
+
 #calendar-page #calendar-toolbar {
     border-bottom: 1px solid #D6D6D6;
     border-radius: 3px;
@@ -292,7 +294,6 @@ body legend {
     display: inline-block;
     margin: 0 10px 0 0;
     margin-right: 7px;
-    margin-bottom: 0;
     font-size: 18px;
     font-weight: lighter;
 }
@@ -590,6 +591,7 @@ body .form-horizontal .controls {
 
 /* BACKEND SERVICES PAGE
    -------------------------------------------------------------------- */
+
 #services-page h2 {
     color: #525252;
 }
@@ -618,6 +620,7 @@ body .form-horizontal .controls {
 
 /* BACKEND USERS PAGE
    -------------------------------------------------------------------- */
+
 #users-page h2 {
     color: #525252;
 }
@@ -746,6 +749,7 @@ body .form-horizontal .controls {
 
 /* BACKEND SETTINGS PAGE
    -------------------------------------------------------------------- */
+
 #settings-page h2 {
     color: #525252;
 }
diff --git a/assets/css/frontend.css b/assets/css/frontend.css
index 2b463406..0b62db56 100644
--- a/assets/css/frontend.css
+++ b/assets/css/frontend.css
@@ -19,87 +19,116 @@ body {
 }
 
 body {
-    background-color: #f1f3f3;
+    background-color: #FAFAFA; /* #f1f3f3 */
 }
 
 #main {
-    display: flex;
-    flex-direction: column;
-}
-
-#main .wrapper {
-    height: 100vh;
-    display: table-cell;
-    vertical-align: middle;
+    min-height: 100%;
 }
 
 /* BOOK APPOINTMENT WIZARD
  ------------------------------------------------------------------------------ */
+
 #book-appointment-wizard {
     background: #FFF;
-    box-shadow: 0 1px 1px #e6e6e6;
     min-height: 480px;
     padding: 0;
+    margin: auto;
 }
 
 #book-appointment-wizard #header {
-    align-items: center;
-    display: flex;
-    padding: 5px;
-    height: 90px;
+    overflow: auto;
+    height: auto;
+    padding: 15px;
     background: #429a82;
-    justify-content: space-between;
-    margin-bottom: 1rem;
 }
 
 #book-appointment-wizard #company-name {
-    display: inline-block;
+    float: none;
+    display: block;
+    text-align: center;
     font-size: 24px;
     font-weight: lighter;
     color: #FFF;
-    margin: 0 10px 0 15px;
-    float: left;
+    margin: 20px 0;
 }
 
 #book-appointment-wizard #steps {
-    width: 200px;
-    display: inline-block;
-    float: right;
+    float: none;
+    display: block;
+    overflow: auto;
+    margin: 15px auto;
+    width: 186px;
+}
+
+#book-appointment-wizard #book-appointment-form #book-appointment-submit {
+    width: 100%;
+    margin-right: 0;
+}
+
+#book-appointment-wizard #form-message {
+    text-align: center;
+    margin: 15px 0;
 }
 
 #book-appointment-wizard .wizard-frame {
-    padding: 10px 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    height: auto;
+    padding: 15px;
 }
 
 #book-appointment-wizard .wizard-frame .frame-container {
-    height: 440px;
-    margin-bottom: 10px;
+    height: auto;
+    padding: 15px 0;
 }
 
 #book-appointment-wizard .frame-container .frame-title {
+    font-weight: lighter;
     text-align: center;
-    margin-bottom: 28px;
+    margin-bottom: 15px;
     color: #666;
 }
 
 #book-appointment-wizard .frame-container .frame-content {
-    margin: auto;
     float: none;
 }
 
 #book-appointment-wizard .wizard-frame .command-buttons {
-    display: flex;
-    justify-content: flex-end;
+    float: none;
+    margin: 15px auto;
+    text-align: center;
 }
 
 #book-appointment-wizard .wizard-frame .command-buttons .btn {
-    min-width: 80px;
+    min-width: 120px;
     margin-right: 10px;
 }
 
+#book-appointment-wizard .wizard-frame .command-buttons .btn:last-child {
+    margin-right: 0;
+}
+
+#book-appointment-wizard .wizard-frame #select-date {
+    max-width: 288px;
+    margin: auto;
+    padding: 15px 0;
+}
+
+#book-appointment-wizard .wizard-frame #select-date > .ui-datepicker {
+    margin: auto;
+}
+
+#book-appointment-wizard .wizard-frame #select-time {
+    max-width: 288px;
+    margin: auto;
+    padding: 15px 0;
+}
+
+#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
+    width: 100%;
+    max-width: 300px;
+    margin: auto;
+}
+
 #book-appointment-wizard .book-step {
     display: inline-block;
     height: 35px;
@@ -112,6 +141,10 @@ body {
     border-radius: 8px;
 }
 
+#book-appointment-wizard .book-step:last-child {
+    margin-right: 0;
+}
+
 #book-appointment-wizard .book-step strong {
     font-size: 12px;
     display: block;
@@ -125,7 +158,7 @@ body {
     width: 45px;
     float: left;
     background: #FFF;
-    padding: 6px;
+    padding: 7px;
     margin-right: 12px;
     margin-top: 0;
 }
@@ -136,7 +169,7 @@ body {
 }
 
 #book-appointment-wizard #frame-footer {
-    padding: 10px;
+    padding: 15px;
     text-align: center;
     border-top: 1px solid #EEE;
     background: #FAFAFA;
@@ -146,21 +179,32 @@ body {
     border-width: 2px;
 }
 
+#book-appointment-wizard #available-hours {
+    overflow: auto;
+    margin: 15px 0;
+    width: auto;
+}
+
+#book-appointment-wizard #available-hours div {
+    margin-right: 30px;
+}
+
 #book-appointment-wizard #available-hours .available-hour {
-    font-size: 15px;
-    padding: 1px;
     display: inline-block;
+    font-size: 15px;
+    padding: 5px;
+    margin-bottom: 5px;
+    border-radius: 4px;
 }
 
 #book-appointment-wizard #available-hours .available-hour:hover {
-    font-weight: bold;
-    background-color: #f1f3f3;
+    background-color: #d6eaf5;
     cursor: pointer;
 }
 
 #book-appointment-wizard #available-hours .selected-hour {
+    background-color: #d6eaf5;
     color: #0088cc;
-    font-weight: bold;
 }
 
 #book-appointment-wizard .span3 {
@@ -188,8 +232,7 @@ body {
 
 #book-appointment-wizard .captcha-title {
     float: left;
-    margin-right: 20px;
-    margin-top: 7px;
+    margin: 7px 0 10px 0;
 }
 
 #book-appointment-wizard .captcha-title .fa-sync-alt {
@@ -202,7 +245,7 @@ body {
 }
 
 #book-appointment-wizard .captcha-image {
-    float: right;
+    float: left;
     margin-bottom: 20px;
     border-radius: 3px;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
@@ -217,10 +260,64 @@ body {
     overflow-y: auto;
     clear: both;
     max-height: 153px;
+    box-shadow: none;
+}
+
+#book-appointment-wizard #select-language {
+    display: block;
+    width: 150px;
+    margin: 15px auto;
+}
+
+.popover .popover-title {
+    text-align: center;
+}
+
+.popover .popover-content #language-list .language {
+    margin: 15px 0;
+}
+
+@media (min-width: 768px) {
+    .wrapper {
+        min-height: 100vh;
+    }
+
+    #book-appointment-wizard #company-name {
+        display: inline-block;
+        float: left;
+    }
+
+    #book-appointment-wizard #steps {
+        display: inline-block;
+        float: right;
+    }
+
+    #book-appointment-wizard .wizard-frame {
+        padding: 10px 20px;
+    }
+
+    #book-appointment-wizard .wizard-frame .frame-container {
+        height: 440px;
+    }
+
+    #book-appointment-wizard .wizard-frame .command-buttons {
+        display: flex;
+        justify-content: center;
+    }
+
+    #book-appointment-wizard .captcha-title {
+        margin-right: 20px;
+        margin-top: 7px;
+    }
+
+    #book-appointment-wizard .captcha-image {
+        float: right;
+    }
 }
 
 /* BOOK SUCCESS & MESSAGE
    ------------------------------------------------------------------------- */
+
 #message-frame,
 #success-frame {
     background: #FFF;
@@ -239,6 +336,35 @@ body {
     margin-top: 20px;
 }
 
+#message-frame,
+#success-frame {
+    text-align: center;
+    height: auto;
+    border: none;
+    padding: 35px;
+}
+
+#message-frame #message-icon,
+#success-frame #success-icon {
+    width: 64px;
+    display: block;
+    margin: auto;
+    float: none !important;
+}
+
+#success-frame .btn {
+    margin-bottom: 10px;
+    width: 80%;
+    max-width: 250px;
+}
+
+@media (min-width: 768px) {
+    #message-frame,
+    #success-frame {
+        height: 100%;
+    }
+}
+
 /* CANCEL APPOINTMENT
    ------------------------------------------------------------------------- */
 
@@ -254,182 +380,12 @@ body {
     margin-bottom: 0;
 }
 
-/* MOBILE DEVICES
-   ------------------------------------------------------------------------- */
-@media (max-width: 768px) {
-    /**
-     * BOOKING WIZARD
-     */
-    html,
-    body {
-        min-height: 100%;
-    }
-
-    #main {
-        min-height: 100%;
-        padding: 0 5vw;
-    }
-
-    #main .wrapper {
-        width: 100vw;
-    }
-
-    #book-appointment-wizard #header {
-        overflow: auto;
-        height: auto;
-    }
-
-    #book-appointment-wizard #company-name {
-        float: none;
-        display: block;
-        text-align: center;
-    }
-
-    #book-appointment-wizard #steps {
-        float: none;
-        display: block;
-        overflow: auto;
-        margin: 20px auto;
-    }
-
-    #book-appointment-wizard .wizard-frame {
-        padding: 0 10px;
-        height: auto;
-    }
-
-    #book-appointment-wizard .wizard-frame .frame-container {
-        height: auto;
-    }
-
-    #book-appointment-wizard .wizard-frame .command-buttons {
-        float: none;
-        width: 80%;
-        margin: 20px auto;
-    }
-
-    #book-appointment-wizard .wizard-frame .command-buttons .btn {
-        width: 45%;
-    }
-
-    #book-appointment-wizard .wizard-frame .command-buttons #button-next-2,
-    #book-appointment-wizard .wizard-frame .command-buttons #button-next-3 {
-        float: right;
-    }
-
-    #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
-        width: 100%;
-        max-width: 300px;
-        margin: auto;
-        display: block;
-    }
-
-    #book-appointment-wizard .wizard-frame #select-date {
-        margin: auto; /* center */
-    }
-
-    #book-appointment-wizard #available-hours {
-        overflow: auto;
-        margin: 20px auto;
-        width: 260px;
-        padding-left: 20px; /* center at the bottom of datepicker */
-    }
-
-    #book-appointment-wizard #available-hours div {
-        margin-right: 30px;
-    }
-
-    #book-appointment-wizard #available-hours .available-hour {
-        padding: 8px 3px;
-    }
-
-    #book-appointment-wizard #form-message {
-        display: block;
-        text-align: center;
-    }
-
-    #book-appointment-wizard #book-appointment-form {
-        width: 45%;
-        float: right;
-    }
-
-    #book-appointment-wizard #book-appointment-form #book-appointment-submit {
-        width: 100%;
-    }
-
-    .popover .popover-title {
-        text-align: center;
-    }
-
-    .popover .popover-content #language-list .language {
-        margin: 10px 0;
-    }
-
-    /**
-     * BOOK SUCCESS
-     */
-    #message-frame,
-    #success-frame {
-        text-align: center;
-        height: auto;
-        border: none;
-        padding: 35px;
-    }
-
-    #message-frame #message-icon,
-    #success-frame #success-icon {
-        width: 64px;
-        display: block;
-        margin: auto;
-        float: none !important;
-    }
-
-    #success-frame .btn {
-        margin-bottom: 10px;
-        width: 80%;
-        max-width: 250px;
-    }
-
-    /**
-     * CANCEL APPOINTMENT
-     */
-    #cancel-appointment-frame {
-        text-align: center;
-    }
-
-    .ui-dialog .ui-dialog-title {
-        font-size: 1.2em;
-    }
+#cancel-appointment-frame {
+    text-align: center;
 }
 
-@media (max-width: 480px) {
-    body {
-        background-color: #FAFAFA;
-    }
-
-    #main {
-        padding: 0;
-    }
-
-    #main .wrapper {
-        width: 100vw;
-        margin: 0;
-        display: block;
-    }
-
-    #book-appointment-wizard {
-        box-shadow: none;
-    }
-
-    #book-appointment-wizard .captcha-title {
-        margin: 7px 0 10px 0
-    }
-
-    #book-appointment-wizard .captcha-image {
-        float: left;
-    }
-
-    #message-frame,
-    #success-frame {
-        height: 100%;
-    }
+.ui-dialog .ui-dialog-title {
+    font-size: 1.2em;
 }
+
+
diff --git a/assets/css/general.css b/assets/css/general.css
index a54ff446..1efd4668 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -82,6 +82,11 @@ body #ui-datepicker-div {
     margin-top: 4px;
 }
 
+body .ui-datepicker {
+    width: auto;
+    max-width: 288px;
+}
+
 body .ui-datepicker .ui-widget-header {
     border: none;
     background: #429a82;
@@ -203,7 +208,7 @@ li.language:hover {
 #select-language {
     cursor: pointer;
     display: inline-block;
-    padding: 4px 5px;
+    padding: 10px 5px;
 }
 
 #select-language.active {
