diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index cb678eb9..d8a4bcce 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -175,6 +175,7 @@ App.Pages.Booking = (function () {
         // If the manage mode is true, the appointment data should be loaded by default.
         if (manageMode) {
             applyAppointmentData(vars('appointment_data'), vars('provider_data'), vars('customer_data'));
+
             $('#wizard-frame-1')
                 .css({
                     'visibility': 'visible',
@@ -213,6 +214,14 @@ App.Pages.Booking = (function () {
                 (selectedServiceId && selectedProviderId) ||
                 (vars('available_services').length === 1 && vars('available_providers').length === 1)
             ) {
+                if (!selectedServiceId) {
+                    $selectService.val(vars('available_services')[0].id).trigger('change');
+                }
+
+                if (!selectedProviderId) {
+                    $selectProvider.val(vars('available_providers')[0].id).trigger('change');
+                }
+
                 $('.active-step').removeClass('active-step');
                 $('#step-2').addClass('active-step');
                 $('#wizard-frame-1').hide();