diff --git a/index.html b/index.html
index b90a4ab..c8b3af7 100644
--- a/index.html
+++ b/index.html
@@ -311,6 +311,26 @@
             background: #e1f5fe;
         }
 
+        .calendar-day.selected {
+            background: #e8f5e8;
+            border: 2px solid #4caf50;
+            box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
+        }
+
+        .calendar-day.selected.has-events {
+            background: #f1f8e9;
+        }
+
+        .calendar-day.selected.today {
+            background: #e0f2f1;
+            border: 2px solid #4caf50;
+        }
+
+        .calendar-day.selected .day-number {
+            color: #2e7d32;
+            font-weight: 700;
+        }
+
         .day-number {
             font-weight: 600;
             font-size: 1.1rem;
diff --git a/src/components/calendar.rs b/src/components/calendar.rs
index fba0092..2f63da9 100644
--- a/src/components/calendar.rs
+++ b/src/components/calendar.rs
@@ -12,6 +12,7 @@ pub struct CalendarProps {
 pub fn Calendar(props: &CalendarProps) -> Html {
     let today = Local::now().date_naive();
     let current_month = use_state(|| today);
+    let selected_day = use_state(|| today);
     
     let first_day_of_month = current_month.with_day(1).unwrap();
     let days_in_month = get_days_in_month(*current_month);
@@ -71,18 +72,27 @@ pub fn Calendar(props: &CalendarProps) -> Html {
                     (1..=days_in_month).map(|day| {
                         let date = current_month.with_day(day).unwrap();
                         let is_today = date == today;
+                        let is_selected = date == *selected_day;
                         let events = props.events.get(&date).cloned().unwrap_or_default();
                         
                         let mut classes = vec!["calendar-day", "current-month"];
                         if is_today {
                             classes.push("today");
                         }
+                        if is_selected {
+                            classes.push("selected");
+                        }
                         if !events.is_empty() {
                             classes.push("has-events");
                         }
+
+                        let selected_day_clone = selected_day.clone();
+                        let on_click = Callback::from(move |_| {
+                            selected_day_clone.set(date);
+                        });
                         
                         html! {
-                            <div class={classes!(classes)}>
+                            <div class={classes!(classes)} onclick={on_click}>
                                 <div class="day-number">{day}</div>
                                 {
                                     if !events.is_empty() {