diff --git a/application/views/components/booking_type_step.php b/application/views/components/booking_type_step.php
index b71a2a73..95972657 100644
--- a/application/views/components/booking_type_step.php
+++ b/application/views/components/booking_type_step.php
@@ -6,7 +6,7 @@
  */
 ?>
 
-<div id="wizard-frame-1" class="wizard-frame">
+<div id="wizard-frame-1" class="wizard-frame" style="visibility: hidden;">
     <div class="frame-container">
         <h2 class="frame-title"><?= lang('service_and_provider') ?></h2>
 
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index 45977cb1..4b2d53f1 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -128,6 +128,10 @@ 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',
+                'display': 'none'
+            }).fadeIn();
         } else {
             // Check if a specific service was selected (via URL parameter).
             const selectedServiceId = App.Utils.Url.queryParam('service');
@@ -160,6 +164,11 @@ App.Pages.Booking = (function () {
                 (selectedServiceId && selectedProviderId) ||
                 (vars('available_services').length === 1 && vars('available_providers').length === 1)
             ) {
+                $('.active-step').removeClass('active-step');
+                $('#step-2').addClass('active-step');
+                $('#wizard-frame-1').hide();
+                $('#wizard-frame-2').fadeIn();
+
                 $selectService.closest('.wizard-frame').find('.button-next').trigger('click');
 
                 $(document).find('.book-step:first').hide();
@@ -173,6 +182,11 @@ App.Pages.Booking = (function () {
                             .find('strong')
                             .text(index + 1)
                     );
+            } else {
+                $('#wizard-frame-1').css({
+                    'visibility': 'visible',
+                    'display': 'none'
+                }).fadeIn();
             }
 
             prefillFromQueryParam('#first-name', 'first_name');