diff --git a/application/migrations/026_add_color_column_to_services_table.php b/application/migrations/026_add_color_column_to_services_table.php
index a3fc3518..a767b9f5 100644
--- a/application/migrations/026_add_color_column_to_services_table.php
+++ b/application/migrations/026_add_color_column_to_services_table.php
@@ -23,7 +23,7 @@ class Migration_Add_color_column_to_services_table extends EA_Migration {
                 'color' => [
                     'type' => 'VARCHAR',
                     'constraint' => '256',
-                    'default' => '#4c96cc',
+                    'default' => '#7cbae8',
                     'after' => 'description'
                 ]
             ];
diff --git a/application/migrations/027_add_color_column_to_appointments_table.php b/application/migrations/027_add_color_column_to_appointments_table.php
index 1610a28f..fb978f85 100644
--- a/application/migrations/027_add_color_column_to_appointments_table.php
+++ b/application/migrations/027_add_color_column_to_appointments_table.php
@@ -23,7 +23,7 @@ class Migration_Add_color_column_to_appointments_table extends EA_Migration {
                 'color' => [
                     'type' => 'VARCHAR',
                     'constraint' => '256',
-                    'default' => '#4c96cc',
+                    'default' => '#7cbae8',
                     'after' => 'hash'
                 ]
             ];
diff --git a/application/views/components/color_selection.php b/application/views/components/color_selection.php
index 3e076191..dbd0f405 100644
--- a/application/views/components/color_selection.php
+++ b/application/views/components/color_selection.php
@@ -13,7 +13,7 @@
 <label class="form-label"><?= lang('color') ?></label>
 
 <div <?= $attributes ?? '' ?> class="color-selection d-flex justify-content-between mb-4">
-    <button type="button" class="color-selection-option selected" data-value="#4c96cc">
+    <button type="button" class="color-selection-option selected" data-value="#7cbae8">
         <i class="fas fa-check"></i>
     </button>
 
@@ -21,7 +21,7 @@
         <i class="fas fa-check"></i>
     </button>
 
-    <button type="button" class="color-selection-option" data-value="#65d8e1">
+    <button type="button" class="color-selection-option" data-value="#82e4ec">
         <i class="fas fa-check"></i>
     </button>
 
@@ -29,11 +29,11 @@
         <i class="fas fa-check"></i>
     </button>
 
-    <button type="button" class="color-selection-option" data-value="#54be49">
+    <button type="button" class="color-selection-option" data-value="#abe9a4">
         <i class="fas fa-check"></i>
     </button>
 
-    <button type="button" class="color-selection-option" data-value="#eddf60">
+    <button type="button" class="color-selection-option" data-value="#ebe07c">
         <i class="fas fa-check"></i>
     </button>
 
@@ -41,11 +41,11 @@
         <i class="fas fa-check"></i>
     </button>
 
-    <button type="button" class="color-selection-option" data-value="#ef8c80">
+    <button type="button" class="color-selection-option" data-value="#f3aea6">
         <i class="fas fa-check"></i>
     </button>
 
-    <button type="button" class="color-selection-option" data-value="#e0292b">
+    <button type="button" class="color-selection-option" data-value="#eb8687">
         <i class="fas fa-check"></i>
     </button>
 
diff --git a/assets/css/layouts/backend_layout.scss b/assets/css/layouts/backend_layout.scss
index 0ea2c7b1..9cd4ab94 100644
--- a/assets/css/layouts/backend_layout.scss
+++ b/assets/css/layouts/backend_layout.scss
@@ -348,11 +348,18 @@ body legend {
 
 #calendar .fc-header-toolbar {
     display: block ;
-    /*text-align: center;*/
 }
 
 #calendar .fc-header-toolbar .fc-toolbar-chunk {
     margin-bottom: 10px;
+    text-align: center;
+}
+
+#calendar .fc-col-header-cell-cushion {
+    text-decoration: none;
+    text-transform: none;
+    cursor: default; 
+    color: var(--bs-body-color) !important; 
 }
 
 #calendar .calendar-header .select2-container {
@@ -367,7 +374,6 @@ body legend {
     width: 100% !important;
 }
 
-
 #calendar-page #calendar .fc-toolbar .fc-left,
 #calendar-page #calendar .fc-toolbar .fc-right {
     float: none;
@@ -377,6 +383,7 @@ body legend {
 
 #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
     font-size: 22px;
+    font-weight: lighter;
     display: block;
 }
 
@@ -394,13 +401,18 @@ body legend {
     opacity: 0.7;
 }
 
-#calendar-page #calendar .fc-event-title small {
-    font-weight: normal;
-    font-size: 12px;
+#calendar-page .fc-event-time {
+    font-weight: bold;
 }
 
-#calendar-page #calendar .fc-time {
-    font-size: 10px;
+#calendar-page .fc-event-title {
+    font-weight: normal;
+    font-size: 11px;
+}
+
+#calendar-page .fc-timegrid-axis-cushion,
+#calendar-page .fc-timegrid-slot-label-cushion {
+    font-size: 11px;
 }
 
 #calendar-page #calendar .fc-break {
@@ -649,8 +661,9 @@ body .form-horizontal .controls {
         text-align: left;
     }
 
-    .fc-header-toolbar .fc-toolbar-chunk {
+    #calendar .fc-header-toolbar .fc-toolbar-chunk {
         margin-bottom: 0;
+        text-align: center;
     }
 
     #calendar .calendar-header .select2-container {
diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js
index 577ff11f..8677010e 100755
--- a/assets/js/utils/calendar_default_view.js
+++ b/assets/js/utils/calendar_default_view.js
@@ -1551,8 +1551,8 @@ App.Utils.CalendarDefaultView = (function () {
 
         switch (vars('time_format')) {
             case 'military':
-                timeFormat = 'H:mm';
-                slotTimeFormat = 'H';
+                timeFormat = 'HH:mm';
+                slotTimeFormat = 'HH:mm';
                 break;
             case 'regular':
                 timeFormat = 'h:mm a';
@@ -1575,14 +1575,17 @@ App.Utils.CalendarDefaultView = (function () {
             firstDay: firstWeekdayNumber,
             slotDuration: '00:15:00',
             snapDuration: '00:15:00',
+            scrollTime: '07:00:00',
             slotLabelInterval: '01:00',
             eventTimeFormat: timeFormat,
             eventTextColor: '#333',
+            eventColor: '#7cbae8',
             slotLabelFormat: slotTimeFormat,
             allDayContent: lang('all_day'),
             dayHeaderFormat: columnFormat,
             selectable: true,
             selectMirror: true,
+            themeSystem: 'bootstrap5',
             headerToolbar: {
                 left: 'prev,next today',
                 center: 'title',
diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js
index 62bd573d..e9b025af 100755
--- a/assets/js/utils/calendar_table_view.js
+++ b/assets/js/utils/calendar_table_view.js
@@ -663,8 +663,8 @@ App.Utils.CalendarTableView = (function () {
 
         switch (vars('time_format')) {
             case 'military':
-                timeFormat = 'H:mm';
-                slotTimeFormat = 'H';
+                timeFormat = 'HH:mm';
+                slotTimeFormat = 'HH:mm';
                 break;
             case 'regular':
                 timeFormat = 'h:mm a';
@@ -684,14 +684,17 @@ App.Utils.CalendarTableView = (function () {
             firstDay: firstWeekdayNumber,
             slotDuration: '00:15:00',
             snapDuration: '00:15:00',
+            scrollTime: '07:00:00',
             slotLabelInterval: '01:00',
             eventTimeFormat: timeFormat,
             eventTextColor: '#333',
+            eventColor: '#7cbae8',
             slotLabelFormat: slotTimeFormat,
             allDayContent: lang('all_day'),
             dayHeaderFormat: columnFormat,
             selectable: true,
             selectHelper: true,
+            themeSystem: 'bootstrap5',
             headerToolbar: {
                 left: 'listDay,timeGridDay',
                 center: '',