diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx
index 236e390..8659f42 100644
--- a/components/pages/calendar/ManuallyAddEventModal.tsx
+++ b/components/pages/calendar/ManuallyAddEventModal.tsx
@@ -1,323 +1,331 @@
 import {
-  Avatar,
-  Colors,
-  DateTimePicker,
-  LoaderScreen,
-  Modal,
-  Picker,
-  Switch,
-  Text,
-  TextField,
-  View,
+    Avatar,
+    Colors,
+    DateTimePicker,
+    LoaderScreen,
+    Modal,
+    Picker,
+    Switch,
+    Text,
+    TextField,
+    View,
 } from "react-native-ui-lib";
-import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {useEffect, useState} from "react";
-import { MaterialIcons } from "@expo/vector-icons";
-import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
-import { useAuthContext } from "@/contexts/AuthContext";
-import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
-import { EventData } from "@/hooks/firebase/types/eventData";
+import {ScrollView, TouchableOpacity} from "react-native-gesture-handler";
+import {useSafeAreaInsets} from "react-native-safe-area-context";
+import {useState} from "react";
+import {MaterialIcons} from "@expo/vector-icons";
+import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
+import {useAuthContext} from "@/contexts/AuthContext";
+import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
+import {EventData} from "@/hooks/firebase/types/eventData";
 import {addHours} from "date-fns";
 
 const daysOfWeek = [
-  { label: "Monday", value: "monday" },
-  { label: "Tuesday", value: "tuesday" },
-  { label: "Wednesday", value: "wednesday" },
-  { label: "Thursday", value: "thursday" },
-  { label: "Friday", value: "friday" },
-  { label: "Saturday", value: "saturday" },
-  { label: "Sunday", value: "sunday" },
+    {label: "Monday", value: "monday"},
+    {label: "Tuesday", value: "tuesday"},
+    {label: "Wednesday", value: "wednesday"},
+    {label: "Thursday", value: "thursday"},
+    {label: "Friday", value: "friday"},
+    {label: "Saturday", value: "saturday"},
+    {label: "Sunday", value: "sunday"},
 ];
 
 export const ManuallyAddEventModal = ({
-  show,
-  close,
-  initialDate
-}: {
-  show: boolean;
-  close: () => void;
-  initialDate?: Date
+                                          show,
+                                          close,
+                                          initialDate
+                                      }: {
+    show: boolean;
+    close: () => void;
+    initialDate?: Date
 }) => {
-  const { user } = useAuthContext();
-  const insets = useSafeAreaInsets();
+    const {user} = useAuthContext();
+    const insets = useSafeAreaInsets();
 
-  const [title, setTitle] = useState<string>("");
+    const [title, setTitle] = useState<string>("");
 
-  const [isAllDay, setIsAllDay] = useState(false);
-  const [startTime, setStartTime] = useState(initialDate ?? new Date());
-  const [endTime, setEndTime] = useState(initialDate ? addHours(initialDate, 1) : new Date());
-
-  const [startDate, setStartDate] = useState(initialDate ?? new Date());
-  const [endDate, setEndDate] = useState(initialDate ?? new Date());
-
-  const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
-
-  const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
-
-  const formatDateTime = (date: Date) => {
-    return date.toLocaleDateString("en-US", {
-      weekday: "long",
-      month: "short",
-      day: "numeric",
+    const [isAllDay, setIsAllDay] = useState(false);
+    const [startTime, setStartTime] = useState(() => {
+        const date = initialDate ?? new Date();
+        date.setSeconds(0, 0);
+        return date;
+    });
+    const [endTime, setEndTime] = useState(() => {
+        const date = initialDate ? addHours(initialDate, 1) : new Date();
+        date.setSeconds(0, 0);
+        return date;
     });
-  };
 
-  const combineDateAndTime = (date: Date, time: Date): Date => {
-    const combined = new Date(date);
-    combined.setHours(time.getHours());
-    combined.setMinutes(time.getMinutes());
-    combined.setSeconds(0);
-    combined.setMilliseconds(0);
-    return combined;
-  };
+    const [startDate, setStartDate] = useState(initialDate ?? new Date());
+    const [endDate, setEndDate] = useState(initialDate ?? new Date());
 
-  const handleSave = async () => {
-    let finalStartDate: Date;
-    let finalEndDate: Date;
+    const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
 
-    if (isAllDay) {
-      finalStartDate = new Date(startDate);
-      finalStartDate.setHours(0, 0, 0, 0);
+    const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent();
 
-      finalEndDate = new Date(startDate);
-      finalEndDate.setHours(23, 59, 59, 999);
-    } else {
-      finalStartDate = combineDateAndTime(startDate, startTime);
-      finalEndDate = combineDateAndTime(endDate, endTime);
-    }
-
-    const eventData: Partial<EventData> = {
-      title,
-      startDate: finalStartDate,
-      endDate: finalEndDate,
-      repeatDays: repeatInterval.map((x) => x.toString()),
-      allDay: isAllDay,
+    const formatDateTime = (date: Date) => {
+        return date.toLocaleDateString("en-US", {
+            weekday: "long",
+            month: "short",
+            day: "numeric",
+        });
     };
 
-    await createEvent(eventData);
+    const combineDateAndTime = (date: Date, time: Date): Date => {
+        const combined = new Date(date);
+        combined.setHours(time.getHours());
+        combined.setMinutes(time.getMinutes());
+        combined.setSeconds(0);
+        combined.setMilliseconds(0);
+        return combined;
+    };
 
-    close();
-  };
+    const handleSave = async () => {
+        let finalStartDate: Date;
+        let finalEndDate: Date;
 
-  const getRepeatLabel = () => {
-    const selectedDays = repeatInterval;
-    const allDays = [
-      "sunday",
-      "monday",
-      "tuesday",
-      "wednesday",
-      "thursday",
-      "friday",
-      "saturday",
-    ];
-    const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"];
+        if (isAllDay) {
+            finalStartDate = new Date(startDate);
+            finalStartDate.setHours(0, 0, 0, 0);
 
-    const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day));
+            finalEndDate = new Date(startDate);
+            finalEndDate.setHours(23, 59, 59, 999);
+        } else {
+            finalStartDate = combineDateAndTime(startDate, startTime);
+            finalEndDate = combineDateAndTime(endDate, endTime);
+        }
 
-    const isEveryDay = allDays.every((day) => selectedDays.includes(day));
+        const eventData: Partial<EventData> = {
+            title,
+            startDate: finalStartDate,
+            endDate: finalEndDate,
+            repeatDays: repeatInterval.map((x) => x.toString()),
+            allDay: isAllDay,
+        };
 
-    if (isEveryDay) {
-      return "Every day";
-    } else if (
-      isEveryWorkDay &&
-      !selectedDays.includes("saturday") &&
-      !selectedDays.includes("sunday")
-    ) {
-      return "Every work day";
-    } else {
-      return selectedDays
-        .map((item) => daysOfWeek.find((day) => day.value === item)?.label)
-        .join(", ");
+        await createEvent(eventData);
+
+        close();
+    };
+
+    const getRepeatLabel = () => {
+        const selectedDays = repeatInterval;
+        const allDays = [
+            "sunday",
+            "monday",
+            "tuesday",
+            "wednesday",
+            "thursday",
+            "friday",
+            "saturday",
+        ];
+        const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"];
+
+        const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day));
+
+        const isEveryDay = allDays.every((day) => selectedDays.includes(day));
+
+        if (isEveryDay) {
+            return "Every day";
+        } else if (
+            isEveryWorkDay &&
+            !selectedDays.includes("saturday") &&
+            !selectedDays.includes("sunday")
+        ) {
+            return "Every work day";
+        } else {
+            return selectedDays
+                .map((item) => daysOfWeek.find((day) => day.value === item)?.label)
+                .join(", ");
+        }
+    };
+
+    if (isLoading && !isError) {
+        return (
+            <Modal
+                visible={show}
+                animationType="slide"
+                onRequestClose={close}
+                transparent={false}
+            >
+                <LoaderScreen message={"Saving event..."} color={Colors.grey40}/>
+            </Modal>
+        );
     }
-  };
 
-  if (isLoading && !isError) {
     return (
-      <Modal
-        visible={show}
-        animationType="slide"
-        onRequestClose={close}
-        transparent={false}
-      >
-        <LoaderScreen message={"Saving event..."} color={Colors.grey40} />
-      </Modal>
-    );
-  }
-
-  return (
-    <Modal
-      visible={show}
-      animationType="slide"
-      onRequestClose={close}
-      transparent={false}
-    >
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: "#fff",
-          paddingTop: insets.top, // Safe area inset for top
-          paddingBottom: insets.bottom, // Safe area inset for bottom
-          paddingLeft: insets.left, // Safe area inset for left
-          paddingRight: insets.right, // Safe area inset for right
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            padding: 16,
-          }}
+        <Modal
+            visible={show}
+            animationType="slide"
+            onRequestClose={close}
+            transparent={false}
         >
-          <TouchableOpacity onPress={close}>
-            <Text style={{ color: "#007bff" }}>Cancel</Text>
-          </TouchableOpacity>
-          <Text style={{ fontWeight: "bold", fontSize: 16 }}>Add event</Text>
-          <TouchableOpacity onPress={handleSave}>
-            <Text style={{ color: "#007bff" }}>Save</Text>
-          </TouchableOpacity>
-        </View>
-
-        <ScrollView
-          contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 10 }}
-        >
-          <View style={{ marginVertical: 10 }}>
-            <TextField
-              placeholder={"Title"}
-              floatingPlaceholder
-              value={title}
-              onChangeText={setTitle}
-              showCharCounter
-              maxLength={200}
-              fieldStyle={{
-                borderBottomWidth: 1,
-                borderBottomColor: "black",
-                borderStyle: "solid",
-              }}
-            />
-          </View>
-
-          <View
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginBottom: 20,
-            }}
-          >
-            <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <MaterialIcons name="schedule" size={24} color="gray" />
-              <Text style={{ marginLeft: 10 }}>All-day</Text>
-            </View>
-            <Switch
-              value={isAllDay}
-              onValueChange={(value) => setIsAllDay(value)}
-            />
-          </View>
-
-          <View
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginBottom: 20,
-            }}
-          >
-            <DateTimePicker
-              mode="date"
-              dateFormatter={formatDateTime}
-              value={startDate}
-              onChange={setStartDate}
-              display="default"
-            />
-            {!isAllDay && (
-              <DateTimePicker
-                mode="time"
-                value={startTime}
-                onChange={setStartTime}
-                display="spinner"
-              />
-            )}
-          </View>
-
-          {!isAllDay && (
             <View
-              style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: 20,
-              }}
+                style={{
+                    flex: 1,
+                    backgroundColor: "#fff",
+                    paddingTop: insets.top, // Safe area inset for top
+                    paddingBottom: insets.bottom, // Safe area inset for bottom
+                    paddingLeft: insets.left, // Safe area inset for left
+                    paddingRight: insets.right, // Safe area inset for right
+                }}
             >
-              <DateTimePicker
-                mode="date"
-                dateFormatter={formatDateTime}
-                value={endDate}
-                onChange={setEndDate}
-                display="default"
-              />
-              <DateTimePicker
-                mode="time"
-                value={endTime}
-                onChange={setEndTime}
-                minuteInterval={1}
-                display="spinner"
-              />
+                <View
+                    style={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        padding: 16,
+                    }}
+                >
+                    <TouchableOpacity onPress={close}>
+                        <Text style={{color: "#007bff"}}>Cancel</Text>
+                    </TouchableOpacity>
+                    <Text style={{fontWeight: "bold", fontSize: 16}}>Add event</Text>
+                    <TouchableOpacity onPress={handleSave}>
+                        <Text style={{color: "#007bff"}}>Save</Text>
+                    </TouchableOpacity>
+                </View>
+
+                <ScrollView
+                    contentContainerStyle={{paddingHorizontal: 16, paddingTop: 10}}
+                >
+                    <View style={{marginVertical: 10}}>
+                        <TextField
+                            placeholder={"Title"}
+                            floatingPlaceholder
+                            value={title}
+                            onChangeText={setTitle}
+                            showCharCounter
+                            maxLength={200}
+                            fieldStyle={{
+                                borderBottomWidth: 1,
+                                borderBottomColor: "black",
+                                borderStyle: "solid",
+                            }}
+                        />
+                    </View>
+
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            marginBottom: 20,
+                        }}
+                    >
+                        <View style={{flexDirection: "row", alignItems: "center"}}>
+                            <MaterialIcons name="schedule" size={24} color="gray"/>
+                            <Text style={{marginLeft: 10}}>All-day</Text>
+                        </View>
+                        <Switch
+                            value={isAllDay}
+                            onValueChange={(value) => setIsAllDay(value)}
+                        />
+                    </View>
+
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            marginBottom: 20,
+                        }}
+                    >
+                        <DateTimePicker
+                            mode="date"
+                            dateFormatter={formatDateTime}
+                            value={startDate}
+                            onChange={setStartDate}
+                            display="default"
+                        />
+                        {!isAllDay && (
+                            <DateTimePicker
+                                mode="time"
+                                value={startTime}
+                                onChange={setStartTime}
+                                display="spinner"
+                            />
+                        )}
+                    </View>
+
+                    {!isAllDay && (
+                        <View
+                            style={{
+                                flexDirection: "row",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                marginBottom: 20,
+                            }}
+                        >
+                            <DateTimePicker
+                                mode="date"
+                                dateFormatter={formatDateTime}
+                                value={endDate}
+                                onChange={setEndDate}
+                                display="default"
+                            />
+                            <DateTimePicker
+                                mode="time"
+                                value={endTime}
+                                onChange={setEndTime}
+                                minuteInterval={1}
+                                display="spinner"
+                            />
+                        </View>
+                    )}
+
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            alignItems: "center",
+                            marginBottom: 20,
+                        }}
+                    >
+                        <MaterialIcons name="repeat" size={24} color="gray"/>
+                        <Picker
+                            value={repeatInterval}
+                            //@ts-ignore
+                            onChange={(items: PickerMultiValue) => setRepeatInterval(items)}
+                            placeholder="Doest not repeat"
+                            style={{marginLeft: 10, flex: 1}}
+                            mode={Picker.modes.MULTI}
+                            getLabel={getRepeatLabel}
+                        >
+                            {daysOfWeek.map((option) => (
+                                <Picker.Item
+                                    key={option.value}
+                                    label={option.label}
+                                    value={option.value}
+                                />
+                            ))}
+                        </Picker>
+                    </View>
+
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            alignItems: "center",
+                            marginBottom: 20,
+                        }}
+                    >
+                        <MaterialIcons name="person-add" size={24} color="gray"/>
+                        <TouchableOpacity
+                            style={{
+                                marginLeft: 10,
+                                flexDirection: "row",
+                                alignItems: "center",
+                                flex: 1,
+                            }}
+                        >
+                            <Avatar size={40} backgroundColor={Colors.yellow10}/>
+                            <View style={{marginLeft: 10}}>
+                                <Text>Other</Text>
+                                <Text style={{color: "gray"}}>{user?.email}</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </ScrollView>
             </View>
-          )}
-
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              marginBottom: 20,
-            }}
-          >
-            <MaterialIcons name="repeat" size={24} color="gray" />
-            <Picker
-              value={repeatInterval}
-              //@ts-ignore
-              onChange={(items: PickerMultiValue) => setRepeatInterval(items)}
-              placeholder="Doest not repeat"
-              style={{ marginLeft: 10, flex: 1 }}
-              mode={Picker.modes.MULTI}
-              getLabel={getRepeatLabel}
-            >
-              {daysOfWeek.map((option) => (
-                <Picker.Item
-                  key={option.value}
-                  label={option.label}
-                  value={option.value}
-                />
-              ))}
-            </Picker>
-          </View>
-
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              marginBottom: 20,
-            }}
-          >
-            <MaterialIcons name="person-add" size={24} color="gray" />
-            <TouchableOpacity
-              style={{
-                marginLeft: 10,
-                flexDirection: "row",
-                alignItems: "center",
-                flex: 1,
-              }}
-            >
-              <Avatar size={40} backgroundColor={Colors.yellow10} />
-              <View style={{ marginLeft: 10 }}>
-                <Text>Other</Text>
-                <Text style={{ color: "gray" }}>{user?.email}</Text>
-              </View>
-            </TouchableOpacity>
-          </View>
-        </ScrollView>
-      </View>
-    </Modal>
-  );
+        </Modal>
+    );
 };