diff --git a/application/language/arabic/translations_lang.php b/application/language/arabic/translations_lang.php
index fa919fc1..5934f0fb 100755
--- a/application/language/arabic/translations_lang.php
+++ b/application/language/arabic/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/bulgarian/translations_lang.php b/application/language/bulgarian/translations_lang.php
index 2cd079f6..6b0a2479 100755
--- a/application/language/bulgarian/translations_lang.php
+++ b/application/language/bulgarian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/catalan/translations_lang.php b/application/language/catalan/translations_lang.php
index ff2315ea..a89f6f2e 100644
--- a/application/language/catalan/translations_lang.php
+++ b/application/language/catalan/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/chinese/translations_lang.php b/application/language/chinese/translations_lang.php
index ab76491c..839141f5 100755
--- a/application/language/chinese/translations_lang.php
+++ b/application/language/chinese/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/croatian/translations_lang.php b/application/language/croatian/translations_lang.php
index b2fc177f..31516e31 100644
--- a/application/language/croatian/translations_lang.php
+++ b/application/language/croatian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/czech/translations_lang.php b/application/language/czech/translations_lang.php
index 67bee642..bd10ad87 100644
--- a/application/language/czech/translations_lang.php
+++ b/application/language/czech/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/danish/translations_lang.php b/application/language/danish/translations_lang.php
index 4588eee1..2746ec2f 100755
--- a/application/language/danish/translations_lang.php
+++ b/application/language/danish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/dutch/translations_lang.php b/application/language/dutch/translations_lang.php
index c39a12fe..ebbf7899 100755
--- a/application/language/dutch/translations_lang.php
+++ b/application/language/dutch/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/english/translations_lang.php b/application/language/english/translations_lang.php
index 22f9cec8..a4a00080 100755
--- a/application/language/english/translations_lang.php
+++ b/application/language/english/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/estonian/translations_lang.php b/application/language/estonian/translations_lang.php
index 5a91c4b0..84663eed 100644
--- a/application/language/estonian/translations_lang.php
+++ b/application/language/estonian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/finnish/translations_lang.php b/application/language/finnish/translations_lang.php
index eed35ec0..b6709287 100755
--- a/application/language/finnish/translations_lang.php
+++ b/application/language/finnish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/french/translations_lang.php b/application/language/french/translations_lang.php
index b71b3575..0c6ca117 100755
--- a/application/language/french/translations_lang.php
+++ b/application/language/french/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/german/translations_lang.php b/application/language/german/translations_lang.php
index 102aaf2c..50c658c0 100755
--- a/application/language/german/translations_lang.php
+++ b/application/language/german/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/greek/translations_lang.php b/application/language/greek/translations_lang.php
index fc3b14f6..bd62092b 100755
--- a/application/language/greek/translations_lang.php
+++ b/application/language/greek/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/hebrew/translations_lang.php b/application/language/hebrew/translations_lang.php
index 6176e465..9b9d5d83 100644
--- a/application/language/hebrew/translations_lang.php
+++ b/application/language/hebrew/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/hindi/translations_lang.php b/application/language/hindi/translations_lang.php
index f6f6ea79..5149418d 100755
--- a/application/language/hindi/translations_lang.php
+++ b/application/language/hindi/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/hungarian/translations_lang.php b/application/language/hungarian/translations_lang.php
index 8a24068c..7360603b 100755
--- a/application/language/hungarian/translations_lang.php
+++ b/application/language/hungarian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/italian/translations_lang.php b/application/language/italian/translations_lang.php
index 8a60a06d..ef994d10 100755
--- a/application/language/italian/translations_lang.php
+++ b/application/language/italian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/japanese/translations_lang.php b/application/language/japanese/translations_lang.php
index 71fa41f9..6dc3ba35 100755
--- a/application/language/japanese/translations_lang.php
+++ b/application/language/japanese/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/luxembourgish/translations_lang.php b/application/language/luxembourgish/translations_lang.php
index a5008281..297358c8 100755
--- a/application/language/luxembourgish/translations_lang.php
+++ b/application/language/luxembourgish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/marathi/translations_lang.php b/application/language/marathi/translations_lang.php
index 9ae094be..97667b30 100644
--- a/application/language/marathi/translations_lang.php
+++ b/application/language/marathi/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/persian/translations_lang.php b/application/language/persian/translations_lang.php
index e09e27da..3fa289c2 100644
--- a/application/language/persian/translations_lang.php
+++ b/application/language/persian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/polish/translations_lang.php b/application/language/polish/translations_lang.php
index 4114b9b0..6496071f 100755
--- a/application/language/polish/translations_lang.php
+++ b/application/language/polish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/portuguese-br/translations_lang.php b/application/language/portuguese-br/translations_lang.php
index 9f40686b..6b898d68 100755
--- a/application/language/portuguese-br/translations_lang.php
+++ b/application/language/portuguese-br/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/portuguese/translations_lang.php b/application/language/portuguese/translations_lang.php
index 01564c11..a47a537a 100755
--- a/application/language/portuguese/translations_lang.php
+++ b/application/language/portuguese/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/romanian/translations_lang.php b/application/language/romanian/translations_lang.php
index ea4ffaad..c624e92f 100755
--- a/application/language/romanian/translations_lang.php
+++ b/application/language/romanian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/russian/translations_lang.php b/application/language/russian/translations_lang.php
index f97095ae..0a86abb4 100644
--- a/application/language/russian/translations_lang.php
+++ b/application/language/russian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/serbian/translations_lang.php b/application/language/serbian/translations_lang.php
index 8cbfb136..0e44470f 100644
--- a/application/language/serbian/translations_lang.php
+++ b/application/language/serbian/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/slovak/translations_lang.php b/application/language/slovak/translations_lang.php
index 96f66230..6dc43fd9 100755
--- a/application/language/slovak/translations_lang.php
+++ b/application/language/slovak/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/spanish/translations_lang.php b/application/language/spanish/translations_lang.php
index 6ee70279..33dcb0a0 100755
--- a/application/language/spanish/translations_lang.php
+++ b/application/language/spanish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/swedish/translations_lang.php b/application/language/swedish/translations_lang.php
index c9af9406..aade4545 100644
--- a/application/language/swedish/translations_lang.php
+++ b/application/language/swedish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/language/turkish/translations_lang.php b/application/language/turkish/translations_lang.php
index e84e61e6..940cce9f 100755
--- a/application/language/turkish/translations_lang.php
+++ b/application/language/turkish/translations_lang.php
@@ -452,4 +452,5 @@ $lang['label'] = 'Label';
 $lang['webhook_saved'] = 'Webhook saved successfully.';
 $lang['webhook_deleted'] = 'Webhook deleted successfully.';
 $lang['delete_webhook'] = 'Delete Webhook';
+$lang['contact_info'] = 'Contact Info';
 // End
diff --git a/application/views/components/booking_final_step.php b/application/views/components/booking_final_step.php
index bd0abae1..4f696c61 100644
--- a/application/views/components/booking_final_step.php
+++ b/application/views/components/booking_final_step.php
@@ -11,13 +11,19 @@
 <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
     <div class="frame-container">
         <h2 class="frame-title"><?= lang('appointment_confirmation') ?></h2>
-        <div class="row frame-content">
-            <div id="appointment-details" class="col-12 col-md-6 text-center text-md-start"></div>
-            <div id="customer-details" class="col-12 col-md-6 text-center text-md-end"></div>
+        
+        <div class="row frame-content m-auto pt-md-4 mb-4">
+            <div id="appointment-details" class="col-12 col-md-6 text-center text-md-start mb-2 mb-md-0">
+                <!-- JS -->
+            </div>
+            <div id="customer-details" class="col-12 col-md-6 text-center text-md-end">
+                <!-- JS -->
+            </div>
         </div>
+        
         <?php if (setting('require_captcha')): ?>
-            <div class="row frame-content">
-                <div class="col-12 col-md-6">
+            <div class="row frame-content m-auto">
+                <div class="col">
                     <label class="captcha-title" for="captcha-text">
                         CAPTCHA
                         <button class="btn btn-link text-dark text-decoration-none py-0">
diff --git a/application/views/components/booking_type_step.php b/application/views/components/booking_type_step.php
index 833150a8..bc2eef8d 100644
--- a/application/views/components/booking_type_step.php
+++ b/application/views/components/booking_type_step.php
@@ -11,7 +11,7 @@
         <h2 class="frame-title"><?= lang('service_and_provider') ?></h2>
 
         <div class="row frame-content">
-            <div class="col col-sm-8 offset-sm-2 mt-sm-5">
+            <div class="col col-md-8 offset-md-2 mt-md-5">
                 <div class="mb-3">
                     <label for="select-service">
                         <strong><?= lang('service') ?></strong>
diff --git a/assets/css/layouts/booking_layout.scss b/assets/css/layouts/booking_layout.scss
index bc322054..f60c1c88 100644
--- a/assets/css/layouts/booking_layout.scss
+++ b/assets/css/layouts/booking_layout.scss
@@ -185,7 +185,7 @@ body {
     margin: 15px 0;
     padding-right: 10px;
     width: auto;
-    max-height: 255px;
+    max-height: 250px;
 }
 
 #book-appointment-wizard #available-hours div {
@@ -273,6 +273,10 @@ body {
     margin: 15px 0;
 }
 
+#book-appointment-wizard #wizard-frame-4 .frame-container .frame-content {
+    max-width: 630px;
+}
+
 @media (min-width: 768px) {
     .wrapper {
         min-height: 100vh;
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index e0c7eb83..2f68fcbf 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -586,141 +586,120 @@ App.Pages.Booking = (function () {
      * customer settings and input for the appointment booking.
      */
     function updateConfirmFrame() {
-        if ($availableHours.find('.selected-hour').text() === '') {
-            return;
+        const serviceOptionText = $selectService.find('option:selected').text();
+        $('.display-selected-service').text(serviceOptionText).removeClass('invisible');
+
+        const providerOptionText = $selectProvider.find('option:selected').text();
+        $('.display-selected-provider').text(providerOptionText).removeClass('invisible');
+
+        if (!$availableHours.find('.selected-hour').text()) {
+            return; // No time is selected, skip the rest of this function...
         }
 
-        // Appointment Details
-        let selectedDate = App.Utils.UI.getDateTimePickerValue($selectDate);
-
-        if (selectedDate !== null) {
-            selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format'));
-        }
+        // Render the appointment details
 
         const serviceId = $selectService.val();
-        let servicePrice = '';
-        let serviceCurrency = '';
 
-        vars('available_services').forEach((service) => {
-            if (Number(service.id) === Number(serviceId) && Number(service.price) > 0) {
-                servicePrice = service.price;
-                serviceCurrency = service.currency;
-                return false; // Break loop
-            }
-        });
+        const service = vars('available_services').find(
+            (availableService) => Number(availableService.id) === Number(serviceId),
+        );
 
-        $(document)
-            .find('.display-selected-service')
-            .text($selectService.find('option:selected').text())
-            .removeClass('invisible');
+        if (!service) {
+            return; // Service was not found
+        }
 
-        $(document)
-            .find('.display-selected-provider')
-            .text($selectProvider.find('option:selected').text())
-            .removeClass('invisible');
+        const selectedDateObject = App.Utils.UI.getDateTimePickerValue($selectDate);
+        const selectedDateMoment = moment(selectedDateObject);
+        const selectedDate = selectedDateMoment.format('YYYY-MM-DD');
+        const selectedTime = $availableHours.find('.selected-hour').text();
+        const selectedDateTime = `${selectedDate} ${selectedTime}`;
 
-        $('#appointment-details').empty();
+        let formattedSelectedDate;
 
-        $('<div/>', {
-            'html': [
-                $('<h4/>', {
-                    'text': lang('appointment'),
-                }),
-                $('<p/>', {
-                    'html': [
-                        $('<span/>', {
-                            'text': lang('service') + ': ' + $selectService.find('option:selected').text(),
-                        }),
-                        $('<br/>'),
-                        $('<span/>', {
-                            'text': lang('provider') + ': ' + $selectProvider.find('option:selected').text(),
-                        }),
-                        $('<br/>'),
-                        $('<span/>', {
-                            'text':
-                                lang('start') +
-                                ': ' +
-                                selectedDate +
-                                ' ' +
-                                $availableHours.find('.selected-hour').text(),
-                        }),
-                        $('<br/>'),
-                        $('<span/>', {
-                            'text': lang('timezone') + ': ' + $selectTimezone.find('option:selected').text(),
-                        }),
-                        $('<br/>'),
-                        $('<span/>', {
-                            'text': lang('price') + ': ' + servicePrice + ' ' + serviceCurrency,
-                            'prop': {
-                                'hidden': !servicePrice,
-                            },
-                        }),
-                    ],
-                }),
-            ],
-        }).appendTo('#appointment-details');
+        if (selectedDateObject) {
+            formattedSelectedDate = App.Utils.Date.format(
+                selectedDateTime,
+                vars('date_format'),
+                vars('time_format'),
+                true,
+            );
+        }
+
+        const timezoneOptionText = $selectTimezone.find('option:selected').text();
+
+        $('#appointment-details').html(`
+            <div>
+                <div class="mb-2 fw-bold fs-3">
+                    ${serviceOptionText}
+                </div> 
+                <div class="mb-2 fw-bold text-muted">
+                    ${providerOptionText}
+                </div>
+                <div class="mb-2">
+                    <i class="fas fa-clock me-2"></i>
+                    ${service.duration} ${lang('minutes')}
+                </div>
+                <div class="mb-2">
+                    <i class="fas fa-calendar-day me-2"></i>
+                    ${formattedSelectedDate}
+                </div> 
+                <div class="mb-2">
+                    <i class="fas fa-globe me-2"></i>
+                    ${timezoneOptionText}
+                </div> 
+                <div class="mb-2" ${!Number(service.price) ? 'hidden' : ''}>
+                    <i class="fas fa-cash-register me-2"></i>
+                    ${Number(service.price).toFixed(2)} ${service.currency}
+                </div>
+            </div>     
+        `);
+
+        // Render the customer information
 
-        // Customer Details
         const firstName = App.Utils.String.escapeHtml($firstName.val());
         const lastName = App.Utils.String.escapeHtml($lastName.val());
-        const fullName = firstName + ' ' + lastName;
-        const phoneNumber = App.Utils.String.escapeHtml($phoneNumber.val());
+        const fullName = `${firstName} ${lastName}`.trim();
         const email = App.Utils.String.escapeHtml($email.val());
+        const phoneNumber = App.Utils.String.escapeHtml($phoneNumber.val());
         const address = App.Utils.String.escapeHtml($address.val());
         const city = App.Utils.String.escapeHtml($city.val());
         const zipCode = App.Utils.String.escapeHtml($zipCode.val());
 
-        $('#customer-details').empty();
+        const addressParts = [];
 
-        $('<div/>', {
-            'html': [
-                $('<h4/>)', {
-                    'text': lang('customer'),
-                }),
-                $('<p/>', {
-                    'html': [
-                        fullName
-                            ? $('<span/>', {
-                                  'text': lang('customer') + ': ' + fullName,
-                              })
-                            : null,
-                        fullName ? $('<br/>') : null,
-                        phoneNumber
-                            ? $('<span/>', {
-                                  'text': lang('phone_number') + ': ' + phoneNumber,
-                              })
-                            : null,
-                        phoneNumber ? $('<br/>') : null,
-                        email
-                            ? $('<span/>', {
-                                  'text': lang('email') + ': ' + email,
-                              })
-                            : null,
-                        email ? $('<br/>') : null,
-                        address
-                            ? $('<span/>', {
-                                  'text': lang('address') + ': ' + address,
-                              })
-                            : null,
-                        address ? $('<br/>') : null,
-                        city
-                            ? $('<span/>', {
-                                  'text': lang('city') + ': ' + city,
-                              })
-                            : null,
-                        city ? $('<br/>') : null,
-                        zipCode
-                            ? $('<span/>', {
-                                  'text': lang('zip_code') + ': ' + zipCode,
-                              })
-                            : null,
-                        zipCode ? $('<br/>') : null,
-                    ],
-                }),
-            ],
-        }).appendTo('#customer-details');
+        if (city) {
+            addressParts.push(city);
+        }
+
+        if (zipCode) {
+            addressParts.push(zipCode);
+        }
+
+        $('#customer-details').html(`
+            <div>
+                <div class="mb-2 fw-bold fs-3">
+                    ${lang('contact_info')}
+                </div>
+                <div class="mb-2 fw-bold text-muted" ${!fullName ? 'hidden' : ''}>
+                    ${fullName}
+                </div>
+                <div class="mb-2" ${!email ? 'hidden' : ''}>
+                    ${email}
+                </div>
+                <div class="mb-2" ${!email ? 'hidden' : ''}>
+                    ${phoneNumber}
+                </div>
+                <div class="mb-2" ${!address ? 'hidden' : ''}>
+                    ${address}
+                </div>
+                <div class="mb-2" ${!addressParts.length ? 'hidden' : ''}>
+                    ${addressParts.join(', ')}
+                </div>
+            </div>
+        `);
 
         // Update appointment form data for submission to server when the user confirms the appointment.
+
         const data = {};
 
         data.customer = {
@@ -753,6 +732,7 @@ App.Pages.Booking = (function () {
             data.appointment.id = vars('appointment_data').id;
             data.customer.id = vars('customer_data').id;
         }
+
         $('input[name="post_data"]').val(JSON.stringify(data));
     }