diff --git a/application/views/components/appointments_modal.php b/application/views/components/appointments_modal.php
index 42aa8ffe..5173630f 100644
--- a/application/views/components/appointments_modal.php
+++ b/application/views/components/appointments_modal.php
@@ -119,6 +119,10 @@
                                     <select id="select-provider" class="required form-control"></select>
                                 </div>
 
+                                <div class="mb-3">
+                                    <?php component('color_selection', ['attributes' => 'id="appointment-color"']) ?>
+                                </div>
+
                                 <div class="mb-3">
                                     <label for="appointment-location" class="form-label">
                                         <?= lang('location') ?>
diff --git a/assets/js/components/appointments_modal.js b/assets/js/components/appointments_modal.js
index e555bc83..61694b5d 100755
--- a/assets/js/components/appointments_modal.js
+++ b/assets/js/components/appointments_modal.js
@@ -34,6 +34,7 @@ App.Components.AppointmentsModal = (function () {
     const $saveAppointment = $('#save-appointment');
     const $appointmentId = $('#appointment-id');
     const $appointmentLocation = $('#appointment-location');
+    const $appointmentColor = $('#appointment-color');
     const $appointmentNotes = $('#appointment-notes');
     const $reloadAppointments = $('#reload-appointments');
     const $selectFilterItem = $('#select-filter-item');
@@ -85,6 +86,7 @@ App.Components.AppointmentsModal = (function () {
                 start_datetime: startDatetime,
                 end_datetime: endDatetime,
                 location: $appointmentLocation.val(),
+                color: App.Components.ColorSelection.getColor($appointmentColor),
                 notes: $appointmentNotes.val(),
                 is_unavailability: Number(false)
             };
@@ -396,6 +398,9 @@ App.Components.AppointmentsModal = (function () {
         $appointmentsModal.find('input, textarea').val('');
         $appointmentsModal.find('.modal-message').fadeOut();
 
+        // Reset color.
+        $appointmentColor.find('.color-selection-option:first').trigger('click');
+
         // Prepare service and provider select boxes.
         $selectService.val($selectService.eq(0).attr('value'));
 
diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js
index 9ed6142c..208e3fad 100755
--- a/assets/js/utils/calendar_default_view.js
+++ b/assets/js/utils/calendar_default_view.js
@@ -143,6 +143,12 @@ App.Utils.CalendarDefaultView = (function () {
                 $appointmentsModal.find('#appointment-location').val(appointment.location);
                 $appointmentsModal.find('#appointment-notes').val(appointment.notes);
                 $appointmentsModal.find('#customer-notes').val(customer.notes);
+
+                App.Components.ColorSelection.setColor(
+                    $appointmentsModal.find('#appointment-color'),
+                    appointment.color
+                );
+
                 $appointmentsModal.modal('show');
             } else {
                 const unavailability = lastFocusedEventData.extendedProps.data;
@@ -1631,6 +1637,8 @@ App.Utils.CalendarDefaultView = (function () {
             $appointmentsModal.find('#appointment-notes').val(appointment.notes);
             $appointmentsModal.find('#customer-notes').val(customer.notes);
 
+            App.Components.ColorSelection.setColor($appointmentsModal.find('#appointment-color'), appointment.color);
+
             $appointmentsModal.modal('show');
 
             fullCalendar.gotoDate(moment(appointment.start_datetime).toDate());
diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js
index ba670cd3..b23f8f4e 100755
--- a/assets/js/utils/calendar_table_view.js
+++ b/assets/js/utils/calendar_table_view.js
@@ -221,6 +221,11 @@ App.Utils.CalendarTableView = (function () {
                 $appointmentsModal.find('#appointment-notes').val(appointment.notes);
                 $appointmentsModal.find('#customer-notes').val(customer.notes);
 
+                App.Components.ColorSelection.setColor(
+                    $appointmentsModal.find('#appointment-color'),
+                    appointment.color
+                );
+
                 $appointmentsModal.modal('show');
             } else {
                 const unavailability = lastFocusedEventData.extendedProps.data;