diff --git a/components/pages/calendar/DetailedCalendar.tsx b/components/pages/calendar/DetailedCalendar.tsx
index 2b05911..b25ad32 100644
--- a/components/pages/calendar/DetailedCalendar.tsx
+++ b/components/pages/calendar/DetailedCalendar.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useRef} from "react";
+import React, {useCallback, useMemo, useRef} from "react";
 import {useAuthContext} from "@/contexts/AuthContext";
 import {useAtomValue} from "jotai";
 import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms";
@@ -21,11 +21,14 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
     const selectedDate = useAtomValue(selectedDateAtom);
     const mode = useAtomValue(modeAtom);
     const {data: familyMembers} = useGetFamilyMembers();
-    const calendarRef = useRef<CalendarKitHandle>(null);
+    const personalCalendarRef = useRef<CalendarKitHandle>(null);
+    const familyCalendarRef = useRef<CalendarKitHandle>(null);
     const {data: events} = useGetEvents();
     const selectedUser = useAtomValue(selectedUserAtom);
 
-    const {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser);
+    const {data: personalEvents} = useFormattedEvents(events ?? [], selectedDate, profileData?.uid);
+    const {data: familyEvents} = useFormattedEvents(events ?? [], selectedDate, null);
+
     const {
         handlePressEvent,
         handlePressCell,
@@ -59,47 +62,82 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
     }), [selectedDate]);
 
     const renderEvent = useCallback((event: any) => {
-        const attendees = useMemo(() =>
-                familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [],
-            [familyMembers, event.attendees]
-        );
+        const eventAttendees = familyMembers?.filter(member =>
+            event?.attendees?.includes(member?.uid!)
+        ) || [];
 
         return (
             <EventCell
+                key={event.id}
                 event={event}
                 onPress={handlePressEvent}
-                attendees={attendees}
+                attendees={eventAttendees}
             />
         );
     }, [familyMembers, handlePressEvent]);
 
-    useEffect(() => {
-        if (selectedDate && isToday(selectedDate)) {
-            calendarRef?.current?.goToDate({date: selectedDate});
-        }
-    }, [selectedDate]);
-
     return (
-        <CalendarContainer
-            ref={calendarRef}
-            {...containerProps}
-            numberOfDays={numberOfDays}
-            calendarWidth={calendarWidth}
-            
-            onDateChanged={debouncedOnDateChanged}
-            firstDay={firstDay}
-            events={formattedEvents ?? []}
-            onPressEvent={handlePressEvent}
-            onPressBackground={handlePressCell}
-        >
-            <CalendarHeader {...headerProps} />
-            <CalendarBody
-                {...bodyProps}
-                renderEvent={renderEvent}
-            />
-            <View marginB-45/>
-        </CalendarContainer>
+        <View style={{ position: 'relative', width: calendarWidth, height: calendarHeight }}>
+            <View
+                style={{
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    opacity: selectedUser?.uid === profileData?.uid ? 1 : 0,
+                    pointerEvents: selectedUser?.uid === profileData?.uid ? 'auto' : 'none',
+                    // transition: 'opacity 0.2s ease-in-out'
+                }}
+            >
+                <CalendarContainer
+                    ref={personalCalendarRef}
+                    {...containerProps}
+                    numberOfDays={numberOfDays}
+                    calendarWidth={calendarWidth}
+                    onDateChanged={debouncedOnDateChanged}
+                    firstDay={firstDay}
+                    events={personalEvents ?? []}
+                    onPressEvent={handlePressEvent}
+                    onPressBackground={handlePressCell}
+                >
+                    <CalendarHeader {...headerProps} />
+                    <CalendarBody
+                        {...bodyProps}
+                        renderEvent={renderEvent}
+                    />
+                    <View marginB-45/>
+                </CalendarContainer>
+            </View>
+
+            <View
+                style={{
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    opacity: selectedUser?.uid === profileData?.uid ? 0 : 1,
+                    pointerEvents: selectedUser?.uid === profileData?.uid ? 'none' : 'auto',
+                    // transition: 'opacity 0.2s ease-in-out'
+                }}
+            >
+                <CalendarContainer
+                    ref={familyCalendarRef}
+                    {...containerProps}
+                    numberOfDays={numberOfDays}
+                    calendarWidth={calendarWidth}
+                    onDateChanged={debouncedOnDateChanged}
+                    firstDay={firstDay}
+                    events={familyEvents ?? []}
+                    onPressEvent={handlePressEvent}
+                    onPressBackground={handlePressCell}
+                >
+                    <CalendarHeader {...headerProps} />
+                    <CalendarBody
+                        {...bodyProps}
+                        renderEvent={renderEvent}
+                    />
+                    <View marginB-45/>
+                </CalendarContainer>
+            </View>
+        </View>
     );
 };
 
-export default DetailedCalendar;
\ No newline at end of file