diff --git a/application/views/components/manage_appointment_modal.php b/application/views/components/appointments_modal.php
similarity index 98%
rename from application/views/components/manage_appointment_modal.php
rename to application/views/components/appointments_modal.php
index 70b9c416..950c2421 100644
--- a/application/views/components/manage_appointment_modal.php
+++ b/application/views/components/appointments_modal.php
@@ -11,7 +11,7 @@
  * @var array $require_zip_code
  */
 ?>
-<div id="manage-appointment" class="modal fade">
+<div id="appointments-modal" class="modal fade">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -304,3 +304,9 @@
         </div>
     </div>
 </div>
+
+<?php section('scripts') ?>
+
+<script src="<?= asset_url('assets/js/components/appointments_modal.js') ?>"></script>
+
+<?php section('scripts') ?>
diff --git a/application/views/pages/calendar.php b/application/views/pages/calendar.php
index ea1d05e4..e831d0f5 100755
--- a/application/views/pages/calendar.php
+++ b/application/views/pages/calendar.php
@@ -42,7 +42,6 @@
 <script src="<?= asset_url('assets/vendor/jquery-jeditable/jquery.jeditable.min.js') ?>"></script>
 <script src="<?= asset_url('assets/vendor/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') ?>"></script>
 <script src="<?= asset_url('assets/js/components/working_plan_exceptions_modal.js') ?>"></script>
-<script src="<?= asset_url('assets/js/components/manage_appointments_modal.js') ?>"></script>
 <script src="<?= asset_url('assets/js/components/manage_unavailabilities_modal.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
@@ -142,7 +141,7 @@
 
 <?php 
     component(
-        'manage_appointment_modal', 
+        'appointments_modal', 
         '',
         [
             'available_services' => $available_services,
diff --git a/assets/js/components/manage_appointments_modal.js b/assets/js/components/appointments_modal.js
similarity index 98%
rename from assets/js/components/manage_appointments_modal.js
rename to assets/js/components/appointments_modal.js
index dd3cd689..81a22978 100755
--- a/assets/js/components/manage_appointments_modal.js
+++ b/assets/js/components/appointments_modal.js
@@ -14,9 +14,9 @@
  *
  * This module implements the appointments modal functionality.
  *
- * Old Module Name: BackendCalendarAppointmentsModal
+ * Old Name: BackendCalendarAppointmentsModal
  */
-App.Components.ManageAppointmentsModal = (function () {
+App.Components.AppointmentsModal = (function () {
     function updateTimezone() {
         const providerId = $('#select-provider').val();
 
@@ -35,14 +35,14 @@ App.Components.ManageAppointmentsModal = (function () {
          *
          * Stores the appointment changes or inserts a new appointment depending on the dialog mode.
          */
-        $('#manage-appointment #save-appointment').on('click', () => {
+        $('#appointments-modal #save-appointment').on('click', () => {
             // Before doing anything the appointment data need to be validated.
             if (!validateAppointmentForm()) {
                 return;
             }
 
             // Prepare appointment data for AJAX request.
-            const $dialog = $('#manage-appointment');
+            const $dialog = $('#appointments-modal');
 
             // ID must exist on the object in order for the model to update the record and not to perform
             // an insert operation.
@@ -119,7 +119,7 @@ App.Components.ManageAppointmentsModal = (function () {
 
             resetAppointmentDialog();
 
-            const $dialog = $('#manage-appointment');
+            const $dialog = $('#appointments-modal');
 
             // Set the selected filter item and find the next appointment time as the default modal values.
             if ($('#select-filter-item option:selected').attr('type') === 'provider') {
@@ -214,7 +214,7 @@ App.Components.ManageAppointmentsModal = (function () {
         /**
          * Event: Select Existing Customer From List "Click"
          */
-        $('#manage-appointment').on('click', '#existing-customers-list div', (event) => {
+        $('#appointments-modal').on('click', '#existing-customers-list div', (event) => {
             const customerId = $(event.target).attr('data-id');
 
             const customer = App.Vars.customers.find(function (customer) {
@@ -359,7 +359,7 @@ App.Components.ManageAppointmentsModal = (function () {
          * Event: Enter New Customer Button "Click"
          */
         $('#new-customer').on('click', () => {
-            $('#manage-appointment')
+            $('#appointments-modal')
                 .find(
                     '#customer-id, #first-name, #last-name, #email, ' +
                         '#phone-number, #address, #city, #zip-code, #customer-notes'
@@ -375,7 +375,7 @@ App.Components.ManageAppointmentsModal = (function () {
      * any modification might be necessary in order to bring the dialog to the desired state.
      */
     function resetAppointmentDialog() {
-        const $dialog = $('#manage-appointment');
+        const $dialog = $('#appointments-modal');
 
         // Empty form fields.
         $dialog.find('input, textarea').val('');
@@ -574,7 +574,7 @@ App.Components.ManageAppointmentsModal = (function () {
      * @return {Boolean} Returns the validation result.
      */
     function validateAppointmentForm() {
-        const $dialog = $('#manage-appointment');
+        const $dialog = $('#appointments-modal');
 
         // Reset previous validation css formatting.
         $dialog.find('.is-invalid').removeClass('is-invalid');
diff --git a/assets/js/pages/calendar.js b/assets/js/pages/calendar.js
index 36e7de42..7e0d4318 100755
--- a/assets/js/pages/calendar.js
+++ b/assets/js/pages/calendar.js
@@ -108,7 +108,7 @@ App.Pages.Calendar = (function () {
     function initialize(view) {
         App.Utils.CalendarGoogleSync.initialize();
 
-        App.Components.ManageAppointmentsModal.initialize();
+        App.Components.AppointmentsModal.initialize();
 
         App.Components.ManageUnavailabilitiesModal.initialize();
 
diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js
index 656060cc..30937a43 100755
--- a/assets/js/utils/calendar_default_view.js
+++ b/assets/js/utils/calendar_default_view.js
@@ -104,9 +104,9 @@ App.Utils.CalendarDefaultView = (function () {
                 });
             } else if (!lastFocusedEventData.data.is_unavailable) {
                 const appointment = lastFocusedEventData.data;
-                $dialog = $('#manage-appointment');
+                $dialog = $('#appointments-modal');
 
-                App.Components.ManageAppointmentsModal.resetAppointmentDialog();
+                App.Components.AppointmentsModal.resetAppointmentDialog();
 
                 // Apply appointment data and show modal dialog.
                 $dialog.find('.modal-header h3').text(App.Lang.edit_appointment_title);
@@ -1681,7 +1681,7 @@ App.Utils.CalendarDefaultView = (function () {
 
         // Display the edit dialog if an appointment hash is provided.
         if (App.Vars.edit_appointment) {
-            const $dialog = $('#manage-appointment');
+            const $dialog = $('#appointments-modal');
             const appointment = App.Vars.edit_appointment;
             App.Components.resetAppointmentDialog();
 
diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js
index ef011ef6..335d8d9a 100755
--- a/assets/js/utils/calendar_table_view.js
+++ b/assets/js/utils/calendar_table_view.js
@@ -183,7 +183,7 @@ App.Utils.CalendarTableView = (function () {
                 );
             } else if (lastFocusedEventData.data.is_unavailable === '0') {
                 const appointment = lastFocusedEventData.data;
-                $dialog = $('#manage-appointment');
+                $dialog = $('#appointments-modal');
 
                 BackendCalendarAppointmentsModal.resetAppointmentDialog();