diff --git a/resources/js/components/admin/hr/attendances/AttendanceCalendar.vue b/resources/js/components/admin/hr/attendances/AttendanceCalendar.vue
index 6ec85ad..2800ef4 100644
--- a/resources/js/components/admin/hr/attendances/AttendanceCalendar.vue
+++ b/resources/js/components/admin/hr/attendances/AttendanceCalendar.vue
@@ -71,11 +71,15 @@ function buildEventTitle(attendance: AttendanceListItem): string {
         ? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}`
         : `${attendance.check_in_at_formatted} (belum pulang)`;
 
+    const duration = attendance.work_duration_formatted
+        ? ` (${attendance.work_duration_formatted})`
+        : '';
+
     if (props.canManageAll && attendance.employee_name) {
-        return `${attendance.employee_name}: ${timeRange}`;
+        return `${attendance.employee_name}: ${timeRange}${duration}`;
     }
 
-    return timeRange;
+    return `${timeRange}${duration}`;
 }
 
 function renderEventContent(arg: EventContentArg) {
@@ -90,6 +94,10 @@ function renderEventContent(arg: EventContentArg) {
         ? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}`
         : `${attendance.check_in_at_formatted}`;
 
+    const durationMarkup = attendance.work_duration_formatted
+        ? `<span class="attendance-event__duration">${escapeHtml(attendance.work_duration_formatted)}</span>`
+        : '';
+
     const nameMarkup = props.canManageAll && attendance.employee_name
         ? `<span class="attendance-event__name">${escapeHtml(attendance.employee_name)}</span>`
         : '';
@@ -99,6 +107,7 @@ function renderEventContent(arg: EventContentArg) {
             <div class="attendance-event__inner">
                 ${nameMarkup}
                 <span class="attendance-event__time">${escapeHtml(timeLabel)}</span>
+                ${durationMarkup}
             </div>
         `,
     };
@@ -413,6 +422,12 @@ watch(
     opacity: 0.95;
 }
 
+.attendance-calendar .fc .attendance-event__duration {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    opacity: 0.85;
+}
+
 .attendance-calendar .fc .attendance-event__status {
     align-self: flex-start;
     background: color-mix(in oklch, currentColor 12%, transparent);
@@ -425,14 +440,16 @@ watch(
 }
 
 .attendance-calendar .fc .attendance-event--complete .attendance-event__time,
-.attendance-calendar .fc .attendance-event--complete .attendance-event__name {
+.attendance-calendar .fc .attendance-event--complete .attendance-event__name,
+.attendance-calendar .fc .attendance-event--complete .attendance-event__duration {
     color: oklch(0.99 0 0);
     opacity: 0.95;
 }
 
 .attendance-calendar .fc .attendance-event--active .attendance-event__time,
 .attendance-calendar .fc .attendance-event--active .attendance-event__name,
-.attendance-calendar .fc .attendance-event--active .attendance-event__status {
+.attendance-calendar .fc .attendance-event--active .attendance-event__status,
+.attendance-calendar .fc .attendance-event--active .attendance-event__duration {
     color: var(--primary-foreground);
     opacity: 0.95;
 }
@@ -452,7 +469,8 @@ watch(
 
 .dark .attendance-calendar .fc .attendance-event--active .attendance-event__time,
 .dark .attendance-calendar .fc .attendance-event--active .attendance-event__name,
-.dark .attendance-calendar .fc .attendance-event--active .attendance-event__status {
+.dark .attendance-calendar .fc .attendance-event--active .attendance-event__status,
+.dark .attendance-calendar .fc .attendance-event--active .attendance-event__duration {
     color: var(--primary-foreground);
 }
 
@@ -462,7 +480,8 @@ watch(
     }
 
     .attendance-calendar .fc .attendance-event__name,
-    .attendance-calendar .fc .attendance-event__time {
+    .attendance-calendar .fc .attendance-event__time,
+    .attendance-calendar .fc .attendance-event__duration {
         font-size: 0.625rem;
     }
 }