diff --git a/frontend/src/components/common/CalendarDay.tsx b/frontend/src/components/common/CalendarDay.tsx
index bc2571e..19a3968 100644
--- a/frontend/src/components/common/CalendarDay.tsx
+++ b/frontend/src/components/common/CalendarDay.tsx
@@ -2,9 +2,10 @@ import { ReactNode } from 'react'
 
 export interface CalendarDayProps {
   date: string
-  events?: { type: string; color: string; title?: string }[]
-  isCurrentMonth?: boolean
-  onClick?: () => void
+  events?: { type: string; color: string; title?: string }[] | undefined
+  isCurrentMonth?: boolean | undefined
+  onClick?: (() => void) | undefined
+  isToday?: boolean | undefined
 }
 
 export function CalendarDay({
@@ -12,6 +13,7 @@ export function CalendarDay({
   events = [],
   isCurrentMonth = true,
   onClick,
+  isToday = false,
 }: CalendarDayProps): ReactNode {
   const dayNum = new Date(date + 'T00:00:00Z').getUTCDate()
 
@@ -22,7 +24,7 @@ export function CalendarDay({
       role="button"
       tabIndex={0}
       aria-label={`${date}${events.length > 0 ? ` with ${events.length} event(s)` : ''}`}
-      className={`calendar-day ${!isCurrentMonth ? 'calendar-day--disabled' : ''} ${events.length > 0 ? 'calendar-day--has-events' : ''}`}
+      className={`calendar-day ${!isCurrentMonth ? 'calendar-day--disabled' : ''} ${events.length > 0 ? 'calendar-day--has-events' : ''} ${isToday ? 'calendar-day--today' : ''}`}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
           onClick?.()