diff --git a/application/views/components/booking_header.php b/application/views/components/booking_header.php
index e0501295..07ef5598 100644
--- a/application/views/components/booking_header.php
+++ b/application/views/components/booking_header.php
@@ -15,11 +15,8 @@
         </span>
 
         <div class="d-flex justify-content-center justify-content-md-start">
-            <span class="display-selected-service me-1 pe-1 border-end invisible">
-                <?= lang('service') ?>
-            </span>
-            <span class="display-selected-provider invisible">
-                <?= lang('provider') ?>
+            <span class="display-booking-selection">
+                <?= lang('service') ?> │ <?= lang('provider') ?>
             </span>
         </div>
     </div>
diff --git a/assets/css/layouts/booking_layout.scss b/assets/css/layouts/booking_layout.scss
index e99db01f..5f8efeb0 100644
--- a/assets/css/layouts/booking_layout.scss
+++ b/assets/css/layouts/booking_layout.scss
@@ -53,8 +53,7 @@ body {
         max-height: 56px;
     }
 
-    .display-selected-service,
-    .display-selected-provider {
+    .display-booking-selection {
         color: #225d4d;
         border-right-color: #225d4d !important;
         font-size: 60%;
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index 8b117858..483b75e9 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -38,6 +38,7 @@ App.Pages.Booking = (function () {
     const $customField3 = $('#custom-field-3');
     const $customField4 = $('#custom-field-4');
     const $customField5 = $('#custom-field-5');
+    const $displayBookingSelection = $('.display-booking-selection');
     const tippy = window.tippy;
     const moment = window.moment;
 
@@ -644,11 +645,20 @@ App.Pages.Booking = (function () {
      * customer settings and input for the appointment booking.
      */
     function updateConfirmFrame() {
-        const serviceOptionText = $selectService.find('option:selected').text();
-        $('.display-selected-service').text(serviceOptionText).removeClass('invisible');
+        const serviceId = $selectService.val();
+        const providerId = $selectProvider.val();
 
-        const providerOptionText = $selectProvider.find('option:selected').text();
-        $('.display-selected-provider').text(providerOptionText).removeClass('invisible');
+        $displayBookingSelection.text(`${lang('service')} │ ${lang('provider')}`); // Notice: "│" is a custom ASCII char
+
+        if (serviceId && providerId) {
+            const serviceOptionText = $selectService.find('option:selected').text();
+            const providerOptionText = $selectProvider.find('option:selected').text();
+            $displayBookingSelection.text(`${serviceOptionText} │ ${providerOptionText}`);
+        }
+
+        $('.display-selected-service')
+            .text(serviceId ? serviceOptionText : lang('service_and_provider'))
+            .removeClass('invisible');
 
         if (!$availableHours.find('.selected-hour').text()) {
             return; // No time is selected, skip the rest of this function...
@@ -656,8 +666,6 @@ App.Pages.Booking = (function () {
 
         // Render the appointment details
 
-        const serviceId = $selectService.val();
-
         const service = vars('available_services').find(
             (availableService) => Number(availableService.id) === Number(serviceId),
         );