diff --git a/leave_calendar/www/leave_calendar.css b/leave_calendar/www/leave_calendar.css
index 7516f74..2f156b1 100644
--- a/leave_calendar/www/leave_calendar.css
+++ b/leave_calendar/www/leave_calendar.css
@@ -99,6 +99,10 @@ body {
   border-radius: 5px;
 }
 
+.vacation-day-field.half-day {
+  background: linear-gradient(to bottom, var(--day-color) 50%, #e0e0e0 50%);
+}
+
 .default {
   background-color: #e0e0e0;
 }
@@ -362,6 +366,10 @@ body.dark-mode .legend-item {
   color: #ffffff;
 }
 
+body.dark-mode .vacation-day-field.half-day {
+  background: linear-gradient(to bottom, var(--day-color) 50%, #636363 50%);
+}
+
 body.dark-mode .filter-container,
 body.dark-mode .year-filter,
 body.dark-mode .current-year-display {
diff --git a/leave_calendar/www/leave_calendar.html b/leave_calendar/www/leave_calendar.html
index d1fa113..199b7c7 100644
--- a/leave_calendar/www/leave_calendar.html
+++ b/leave_calendar/www/leave_calendar.html
@@ -84,17 +84,13 @@
                                 <td class="text-center">{{ employee.new_leaves_allocated }}</td>
                                 <td class="text-center">{{ employee.unused_leaves }}</td>
                                 {% for day in employee.days %}
-                                    {% if day.type.half_day == 1 %}
-                                        {% set background_css = "background: linear-gradient(to bottom, " ~ day.type.color ~ " 50%, #ffffff 50%)" %}
-                                    {% else %}
-                                        {% set background_css = "background-color: " ~ day.type.color %}
-                                    {% endif %}
-
                                     <td>
                                         {% if day.type.name in ["DEFAULT", "SATURDAY", "SUNDAY"] %}
                                             <div class="vacation-day-field default">{{ day.type.abbreviation }}</div>
+                                        {% elif day.type.half_day == 1 %}
+                                            <div class="vacation-day-field half-day" style="--day-color: {{ day.type.color }}">{{ day.type.abbreviation }}</div>
                                         {% else %}
-                                            <div class="vacation-day-field" style="{{ background_css }}">{{ day.type.abbreviation }}</div>
+                                            <div class="vacation-day-field" style="background-color: {{ day.type.color }}">{{ day.type.abbreviation }}</div>
                                         {% endif %}
                                     </td>
                                 {% endfor %}