diff --git a/src/application/models/customers_model.php b/src/application/models/customers_model.php
index 053b1ea1..e7c8d4f6 100644
--- a/src/application/models/customers_model.php
+++ b/src/application/models/customers_model.php
@@ -27,7 +27,15 @@ class Customers_Model extends CI_Model {
         if (!$this->validate_data($customer_data)) {
             throw new ValidationException('Customer data are not valid.');
         }
+        
+        // :: CHECK IF CUSTOMER ALREADY EXIST (FROM EMAIL).	
+        if ($this->exists($customer_data) && !isset($customer_data['id'])) {
+        	// Find the customer id from the database.
+        	$customer_data['id'] = $this->get_batch(
+        			array('email' => $customer_data['email']))[0]['id'];
+        }
 
+        // :: INSERT OR UPDATE CUSTOMER RECORD
         if (!isset($customer_data['id'])) {
             $customer_data['id'] = $this->insert($customer_data);
         } else {
diff --git a/src/application/views/appointments/book.php b/src/application/views/appointments/book.php
index 3fb72a04..efdcd078 100644
--- a/src/application/views/appointments/book.php
+++ b/src/application/views/appointments/book.php
@@ -212,11 +212,11 @@
                     
                     <div class="frame-content" style="width:600px">
                         <div class="span3">
-                            <label for="last-name">Last Name *</label>
-                            <input type="text" id="last-name" class="required" maxlength="250" />
-
                             <label for="first-name">First Name</label>
                             <input type="text" id="first-name" maxlength="100" />
+                            
+                            <label for="last-name">Last Name *</label>
+                            <input type="text" id="last-name" class="required" maxlength="250" />
 
                             <label for="email">Email *</label>
                             <input type="text" id="email" class="required" maxlength="250" />
@@ -260,8 +260,8 @@
                 <div class="frame-container">
                     <h2 class="frame-title">Confirm Appointment</h2>
                     <div class="frame-content" style="width:600px">
-                        <div id="appointment-info" class="span3"></div>
-                        <div id="customer-info" class="span3"></div>
+                        <div id="appointment-details" class="span3"></div>
+                        <div id="customer-details" class="span3"></div>
                     </div>
                 </div>
                 
diff --git a/src/assets/css/frontend.css b/src/assets/css/frontend.css
index 6ff2cb57..5321825d 100644
--- a/src/assets/css/frontend.css
+++ b/src/assets/css/frontend.css
@@ -141,6 +141,12 @@ body {
     min-width: 270px; /* This is especially needed for ie8 */
 }
 
+#book-appointment-wizard #appointment-details p,
+#book-appointment-wizard #customer-details p { font-size: 16px; line-height: 28px; }
+
+
+/* CANCEL APPOINTMENT 
+   ------------------------------------------------------------------------- */
 #cancel-appointment-frame {
     padding: 12px 17px;
     background: #F5F5F5;
diff --git a/src/assets/js/frontend_book.js b/src/assets/js/frontend_book.js
index 1311133b..3772d699 100644
--- a/src/assets/js/frontend_book.js
+++ b/src/assets/js/frontend_book.js
@@ -326,30 +326,40 @@ var FrontendBook = {
      * booking.
      */
     updateConfirmFrame : function() {
-        /*** SET APPOINTMENT INFO ***/
+        // :: UPDATE APPOINTMENT DETAILS DIV
         var selectedDate = $('#select-date').datepicker('getDate');
         if (selectedDate !== null) {
-            selectedDate = Date.parse(selectedDate).toString('dd-MM-yyyy');
+            selectedDate = Date.parse(selectedDate).toString('dd/MM/yyyy');
         }
 
-        $('#appointment-info').html(
-            '<h4>' + $('#select-service option:selected').text() + '</h4>' +
-            $('#select-provider option:selected').text() + '<br/>' + 
-            '<strong class="text-info">' + selectedDate + ' ' 
-                    + $('.selected-hour').text() + '</strong>'
+        $('#appointment-details').html(
+            '<h3>' + $('#select-service option:selected').text() + '</h3>' +  
+            '<p>' 
+        		+ $('#select-provider option:selected').text()
+        		+ '<br/>'
+        		+ '<strong class="text-info">' 
+        			+ selectedDate + ' ' +  $('.selected-hour').text() 
+    			+ '</strong>' + 
+            '</p>'
         );
 
-        /*** SET CUSTOMER'S INFO ***/
-        $('#customer-info').html(
-            '<h4>' + $('#last-name').val() + ' ' + $('#first-name').val() + '</h4>' + 
-            'Phone: ' + $('#phone-number').val() + '<br/>' + 
-            'Email: ' + $('#email').val() + '<br/>' + 
-            'Address: ' + $('#address').val() + '<br/>' + 
-            'City: ' + $('#city').val() + '<br/>' + 
-            'Zip Code: ' + $('#zip-code').val()
+        // :: UPDATE CUSTOMER'S DETAILS DIV
+        $('#customer-details').html(
+            '<h3>' + $('#first-name').val() + ' ' + $('#last-name').val() + '</h3>' + 
+            '<p>' + 
+            	'Phone: ' + $('#phone-number').val() + 
+            	'<br/>' + 
+            	'Email: ' + $('#email').val() + 
+            	'<br/>' + 
+            	'Address: ' + $('#address').val() + 
+            	'<br/>' + 
+            	'City: ' + $('#city').val() + 
+            	'<br/>' + 
+            	'Zip Code: ' + $('#zip-code').val() + 
+        	'</p>'
         );
             
-        /*** UPDATE FORM POST DATA ***/
+        // :: UPDATE APPOINTMENT DATA FORM 
         var postData = new Object();
         
         postData['customer'] = {