diff --git a/public/js/calendar.js b/public/js/calendar.js
index 18cbae7..9348e71 100644
--- a/public/js/calendar.js
+++ b/public/js/calendar.js
@@ -123,6 +123,11 @@ export default class CalendarView {
       dayEl.classList.add('other-month');
     }
 
+    // Check if the day is in the future
+    if (this.isFutureDate(date)) {
+      dayEl.classList.add('future-day');
+    }
+
     if (this.isToday(date)) {
       dayEl.classList.add('today');
     }
@@ -235,6 +240,15 @@ export default class CalendarView {
       date.getDate() === today.getDate();
   }
 
+  // Check if a date is in the future
+  isFutureDate(date) {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const checkDate = new Date(date);
+    checkDate.setHours(0, 0, 0, 0);
+    return checkDate > today;
+  }
+
   formatDate(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
diff --git a/public/style.css b/public/style.css
index d4ee37f..526ff12 100644
--- a/public/style.css
+++ b/public/style.css
@@ -504,6 +504,16 @@ header h1 {
     background: #f9fafb;
 }
 
+.day.future-day {
+    opacity: 0.6;
+    background: #f3f4f6;
+    color: #9ca3af;
+}
+
+.day.future-day .day-number {
+    color: #9ca3af;
+}
+
 .day.today {
     border-color: #667eea;
     background: #f0f4ff;