diff --git a/components/calendar.tsx b/components/calendar.tsx
index 182739c5..939fc13b 100644
--- a/components/calendar.tsx
+++ b/components/calendar.tsx
@@ -13,6 +13,7 @@ interface Event {
   end: string;
   allDay: boolean;
   calendar: string;
+  calendarColor: string;
 }
 
 export function Calendar() {
@@ -24,10 +25,39 @@ export function Calendar() {
   const fetchEvents = async () => {
     setLoading(true);
     try {
-      // Placeholder for actual API call
-      // const response = await fetch('/api/calendar/events');
-      // const data = await response.json();
-      // setEvents(data.events);
+      const response = await fetch('/api/calendars');
+      if (!response.ok) {
+        throw new Error('Failed to fetch events');
+      }
+      
+      const calendarsData = await response.json();
+      console.log('Calendar Widget - Fetched calendars:', calendarsData);
+
+      // Get current date at the start of the day
+      const now = new Date();
+      now.setHours(0, 0, 0, 0);
+
+      // Extract and process events from all calendars
+      const allEvents = calendarsData.flatMap((calendar: any) => 
+        (calendar.events || []).map((event: any) => ({
+          id: event.id,
+          title: event.title,
+          start: event.start,
+          end: event.end,
+          allDay: event.isAllDay,
+          calendar: calendar.name,
+          calendarColor: calendar.color
+        }))
+      );
+
+      // Filter for upcoming events
+      const upcomingEvents = allEvents
+        .filter((event: any) => new Date(event.start) >= now)
+        .sort((a: any, b: any) => new Date(a.start).getTime() - new Date(b.start).getTime())
+        .slice(0, 5);
+
+      console.log('Calendar Widget - Processed events:', upcomingEvents);
+      setEvents(upcomingEvents);
       setError(null);
     } catch (err) {
       console.error('Error fetching events:', err);
@@ -79,9 +109,18 @@ export function Calendar() {
                 className="p-2 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100"
               >
                 <div className="flex gap-2">
-                  <div className="flex-shrink-0 w-12 h-12 rounded-lg bg-blue-50 flex flex-col items-center justify-center border border-blue-100">
-                    <CalendarIcon className="h-4 w-4 text-blue-600" />
-                    <span className="text-[10px] font-medium text-blue-600 mt-0.5">
+                  <div 
+                    className="flex-shrink-0 w-12 h-12 rounded-lg flex flex-col items-center justify-center border"
+                    style={{
+                      backgroundColor: `${event.calendarColor}10`,
+                      borderColor: event.calendarColor
+                    }}
+                  >
+                    <CalendarIcon className="h-4 w-4" style={{ color: event.calendarColor }} />
+                    <span 
+                      className="text-[10px] font-medium mt-0.5"
+                      style={{ color: event.calendarColor }}
+                    >
                       {formatDate(event.start)}
                     </span>
                   </div>
@@ -89,7 +128,13 @@ export function Calendar() {
                     <p className="text-sm font-medium text-gray-800 line-clamp-2">
                       {event.title}
                     </p>
-                    <div className="flex items-center text-gray-500 text-[10px] bg-gray-50 px-1.5 py-0.5 rounded-md">
+                    <div 
+                      className="flex items-center text-[10px] px-1.5 py-0.5 rounded-md"
+                      style={{
+                        backgroundColor: `${event.calendarColor}10`,
+                        color: event.calendarColor
+                      }}
+                    >
                       <span className="truncate">{event.calendar}</span>
                     </div>
                   </div>