diff --git a/application/views/appointments/book.php b/application/views/appointments/book.php
index b3664254..d473339b 100755
--- a/application/views/appointments/book.php
+++ b/application/views/appointments/book.php
@@ -48,9 +48,9 @@
             </div>
 
             <?php if ($manage_mode): ?>
-                <div id="cancel-appointment-frame" class="booking-header-bar row">
+                <div id="cancel-appointment-frame" class="row booking-header-bar">
                     <div class="col-12 col-md-10">
-                        <p><?= lang('cancel_appointment_hint') ?></p>
+                        <small><?= lang('cancel_appointment_hint') ?></small>
                     </div>
                     <div class="col-12 col-md-2">
                         <form id="cancel-appointment-form" method="post"
@@ -60,7 +60,7 @@
 
                             <textarea name="cancel_reason" style="display:none"></textarea>
 
-                            <button id="cancel-appointment" class="btn btn-warning">
+                            <button id="cancel-appointment" class="btn btn-warning btn-sm">
                                 <?= lang('cancel') ?>
                             </button>
                         </form>
@@ -68,11 +68,11 @@
                 </div>
                 <div class="booking-header-bar row">
                     <div class="col-12 col-md-10">
-                        <p><?= lang('delete_personal_information_hint') ?></p>
+                        <small><?= lang('delete_personal_information_hint') ?></small>
                     </div>
                     <div class="col-12 col-md-2">
                         <button id="delete-personal-information"
-                                class="btn btn-danger"><?= lang('delete') ?></button>
+                                class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
                     </div>
                 </div>
             <?php endif; ?>
@@ -92,7 +92,7 @@
 
             <div id="wizard-frame-1" class="wizard-frame">
                 <div class="frame-container">
-                    <h4 class="frame-title"><?= lang('step_one_title') ?></h4>
+                    <h2 class="frame-title"><?= lang('step_one_title') ?></h2>
 
                     <div class="row frame-content">
                         <div class="col">
@@ -197,7 +197,7 @@
             <div id="wizard-frame-2" class="wizard-frame" style="display:none;">
                 <div class="frame-container">
 
-                    <h4 class="frame-title"><?= lang('step_two_title') ?></h4>
+                    <h2 class="frame-title"><?= lang('step_two_title') ?></h2>
 
                     <div class="row frame-content">
                         <div class="col-12 col-md-7">
@@ -236,7 +236,7 @@
             <div id="wizard-frame-3" class="wizard-frame" style="display:none;">
                 <div class="frame-container">
 
-                    <h4 class="frame-title"><?= lang('step_three_title') ?></h4>
+                    <h2 class="frame-title"><?= lang('step_three_title') ?></h2>
 
                     <div class="row frame-content">
                         <div class="col-12 col-md-6">
@@ -332,7 +332,7 @@
 
             <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
                 <div class="frame-container">
-                    <h4 class="frame-title"><?= lang('step_four_title') ?></h4>
+                    <h2 class="frame-title"><?= lang('step_four_title') ?></h2>
                     <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>
diff --git a/assets/css/frontend.css b/assets/css/frontend.css
index c9ab7466..eda291d6 100644
--- a/assets/css/frontend.css
+++ b/assets/css/frontend.css
@@ -19,7 +19,7 @@ body {
 }
 
 body {
-    background-color: #FAFAFA; /* #f1f3f3 */
+    background-color: #FAFAFA;
 }
 
 #main {
@@ -84,7 +84,7 @@ body {
 #book-appointment-wizard .frame-container .frame-title {
     font-weight: lighter;
     text-align: center;
-    margin-bottom: 15px;
+    margin-bottom: 30px;
     color: #666;
 }
 
@@ -285,11 +285,13 @@ body {
     #book-appointment-wizard #company-name {
         display: inline-block;
         float: left;
+        margin: 10px auto;
     }
 
     #book-appointment-wizard #steps {
         display: inline-block;
         float: right;
+        margin: 5px auto;
     }
 
     #book-appointment-wizard .wizard-frame {
@@ -371,17 +373,23 @@ body {
 .booking-header-bar {
     padding: 15px 0;
     margin: 0;
-    background: #f6f5ee;
-    border-bottom: 1px solid #E2E2E2;
-}
-
-.booking-header-bar p {
-    margin-top: 2px;
-    margin-bottom: 0;
+    background: #f3f2e7;
+    border-bottom: 1px solid #e4e1c9;
+    text-align: center;
 }
 
 .ui-dialog .ui-dialog-title {
     font-size: 1.2em;
 }
 
+@media (min-width: 768px) {
+    .booking-header-bar {
+        padding: 15px 0;
+        margin: 0;
+        background: #f3f2e7;
+        border-bottom: 1px solid #e4e1c9;
+        text-align: left;
+    }
+}
+
 
diff --git a/assets/css/general.css b/assets/css/general.css
index 1a7f4bed..2597a367 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -400,8 +400,10 @@ li.language:hover {
     margin-bottom: -30px;
 }
 
-#message_box pre {
+#message_box pre,
+#message_box .card {
     max-height: 250px;
+    max-width: 500px;
 }
 
 body .popover-content strong {