diff --git a/public/static/DeleteIcon.svg b/public/static/DeleteIcon.svg
index 177d7450..90342cb2 100644
--- a/public/static/DeleteIcon.svg
+++ b/public/static/DeleteIcon.svg
@@ -8,28 +8,28 @@
           d="M1 5H3H19"
           stroke="#DB3B25"
           stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M6 5V3C6 2.46957 6.21071 1.96086 6.58579 1.58579C6.96086 1.21071 7.46957 1 8 1H12C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V5M17 5V19C17 19.5304 16.7893 20.0391 16.4142 20.4142C16.0391 20.7893 15.5304 21 15 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5H17Z"
           stroke="#DB3B25"
           stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M8 10V16"
           stroke="#DB3B25"
           stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M12 10V16"
           stroke="#DB3B25"
           stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </svg>
\ No newline at end of file
diff --git a/src/components/Authentication/AuthenticationModal.tsx b/src/components/Authentication/AuthenticationModal.tsx
index 4bf2479a..07c94452 100644
--- a/src/components/Authentication/AuthenticationModal.tsx
+++ b/src/components/Authentication/AuthenticationModal.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Text, Modal } from "../atomic";
 import Login from "./Login";
 import Signup from "./Signup";
@@ -18,16 +18,17 @@ const AuthenticationModal = ({
   const [isLogin, setIsLogin] = useState(false);
   const router = useRouter();
 
-  const reset = () => {
-    setIsLogin(false);
-    onClose();
-  }
+  useEffect(() => {
+    if (isOpen) {
+      setIsLogin(false);
+    }
+  }, [isOpen]);
 
   return (
-    <Modal isOpen={isOpen} onClose={reset}>
+    <Modal isOpen={isOpen} onClose={onClose}>
       <div className="flex flex-col w-144">
         <button
-          onClick={reset}
+          onClick={onClose}
           className="cursor-pointer focus:outline-none self-end"
         >
           <img src="/static/Close.svg" className="h-4 w-4" />
@@ -36,8 +37,8 @@ const AuthenticationModal = ({
           <div>
             <div className="flex flex-col space-y-1">
               {programName ? (
-                <Text h3 b>
-                  Login to join <Text i>{programName}</Text>
+                <Text h3>
+                  Login to join <Text b>{programName}</Text>
                 </Text>
               ) : (
                 <Text h3 b>
@@ -58,8 +59,8 @@ const AuthenticationModal = ({
           <div>
             <div className="flex flex-col">
               {programName ? (
-                <Text h3 b>
-                  Create an account to join <Text i>{programName}</Text>
+                <Text h3>
+                  Create an account to join <Text b>{programName}</Text>
                 </Text>
               ) : (
                 <Text h3 b>
@@ -75,9 +76,7 @@ const AuthenticationModal = ({
             </div>
             <div className="h-6" />
             <Signup
-              onSuccessfulGoogleSignup={() => {
-                location.reload();
-              }}
+              onSuccessfulGoogleSignup={onClose}
               onSuccessfulEmailSignup={() => {
                 router.push({
                   pathname: "/verify",
diff --git a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx
index 55e927a0..2887181f 100644
--- a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx
+++ b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx
@@ -4,19 +4,14 @@ import {
   format,
   getDay,
   isEqual,
-  setDate,
-  setMonth,
-  setYear,
   startOfDay,
 } from "date-fns";
 import React, { Fragment, useState } from "react";
 import {
   DateInterval,
-  refetchGetAvailOverrideDatesQuery,
   useCreateAvailOverrideDateMutation,
   useDeleteAvailOverrideDateMutation,
   useGetAvailOverrideDatesQuery,
-  useGetAvailWeeklysQuery,
   useUpdateAvailOverrideDateMutation,
 } from "../../generated/graphql";
 import useTimezoneConverters from "../../hooks/useTimezoneConverters";
@@ -25,90 +20,144 @@ import Calendar from "../Calendar";
 import { DeleteIcon } from "../FormSchemaEditor/icons";
 import { SetDateInterval } from "./SetDateInterval";
 
+const DEFAULT_AVAIL_ID = "__I_AM_A_NEW_OVERRIDE_DATE__";
+
+type Timeslots = {
+  startTime: Date;
+  endTime: Date;
+}[];
+
 type AvailOverrideDate = {
   profileId: string;
   startTime: Date;
   endTime: Date;
   availOverrideDateId: string;
-  availOverrideTimeslots: {
-    startTime: Date;
-    endTime: Date;
-  }[];
+  availOverrideTimeslots: Timeslots;
 };
 
-type EditAvailOverrideDayModalContentsProps = {
-  initOverrideDate?: any | null;
+const EditAvailabilityOverridesModal = ({
+  profileId,
+  initOverrideDate = null,
+  availOverrideDates,
+  isOpen = false,
+  onClose,
+}: {
   profileId: string;
-  availWeeklys: DateInterval[];
+  initOverrideDate?: NewAvailOverrideDate | null;
+  availOverrideDates: { [key: string]: NewAvailOverrideDate };
+  isOpen: boolean;
   onClose: () => void;
-};
-const EditAvailOverrideDayModalContents = ({
-  initOverrideDate = null,
-  profileId,
-  availWeeklys,
-  onClose = () => {},
-}: EditAvailOverrideDayModalContentsProps) => {
+}) => {
   const { toUTC } = useTimezoneConverters();
-  const [overrideDate, setOverrideDay] = useState<AvailOverrideDate | null>(
-    initOverrideDate
-  );
-  const [timeslots, setTimeslots] = useState(
-    overrideDate?.availOverrideTimeslots || []
+
+  const [currentDate, setCurrentDate] = useState<NewAvailOverrideDate | null>(
+    initOverrideDate || null
   );
+  const [modified, setModified] = useState(false);
+  const [dayToTimeslots, setDayToTimeSlots] = useState<{
+    [key: string]: NewAvailOverrideDate;
+  }>({});
 
-  const [updateAvailOverrideDateMutation] = useUpdateAvailOverrideDateMutation({
-    refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })],
-  });
-  const [createAvailOverrideDateMutation] = useCreateAvailOverrideDateMutation({
-    refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })],
-  });
+  const [updateAvailOverrideDateMutation] =
+    useUpdateAvailOverrideDateMutation();
+  const [createAvailOverrideDateMutation] =
+    useCreateAvailOverrideDateMutation();
+  const [deleteAvailOverrideDateMutation] =
+    useDeleteAvailOverrideDateMutation();
 
-  const createOrUpdateOverrideDay = async () => {
-    if (!overrideDate) {
-      throw new Error("Error: overrideDate is null.");
+  const updateCurrentDay = ({
+    edited = true,
+    unavailable = false,
+    newTimeslots = [],
+  }: {
+    edited?: boolean;
+    unavailable?: boolean;
+    newTimeslots?: Timeslots;
+  }) => {
+    if (!currentDate) {
+      console.error("Must select timeslot first");
+      return;
     }
+    const newOverride = {
+      ...currentDate,
+      edited,
+      unavailable,
+      availOverrideTimeslots: newTimeslots,
+    };
+    setModified(true);
+    setCurrentDate(newOverride);
+    setDayToTimeSlots({
+      ...dayToTimeslots,
+      [currentDate.startTime.toLocaleString()]: newOverride,
+    });
+  };
+
+  const saveNewOverrides = async () => {
     if (!toUTC) {
       throw new Error("Error: toUTC is undefined.");
     }
-
-    const newTimeslots = timeslots.map((timeslot) => ({
-      startTime: toUTC(timeslot.startTime),
-      endTime: toUTC(timeslot.endTime),
-    }));
-    if (overrideDate.availOverrideDateId === "__I_AM_A_NEW_OVERRIDE_DATE__") {
-      // Create
-      return createAvailOverrideDateMutation({
-        variables: {
-          data: {
-            startTime: toUTC(overrideDate.startTime).getTime(),
-            endTime: toUTC(overrideDate.endTime).getTime(),
-            availOverrideTimeslots: newTimeslots,
-            profileId: profileId,
-          },
-        },
-      });
-    } else {
-      // Update
-      return updateAvailOverrideDateMutation({
-        variables: {
-          availOverrideDateId: overrideDate.availOverrideDateId,
-          data: {
-            startTime: toUTC(overrideDate.startTime).getTime(),
-            endTime: toUTC(overrideDate.endTime).getTime(),
-            availOverrideTimeslots: newTimeslots,
-          },
-        },
-      });
+    let allEdits: Promise<any>[] = [];
+    //Save the override if it's new or needs to be updated
+    for (const availOverrideDate of Object.values(dayToTimeslots)) {
+      if (availOverrideDate.availOverrideDateId === DEFAULT_AVAIL_ID) {
+        if (
+          availOverrideDate.availOverrideTimeslots.length ||
+          availOverrideDate.unavailable
+        ) {
+          allEdits.push(
+            createAvailOverrideDateMutation({
+              variables: {
+                data: {
+                  startTime: toUTC(availOverrideDate.startTime).getTime(),
+                  endTime: toUTC(availOverrideDate.endTime).getTime(),
+                  availOverrideTimeslots:
+                    availOverrideDate.availOverrideTimeslots,
+                  profileId: profileId,
+                },
+              },
+            })
+          );
+        }
+      } else if (availOverrideDate.edited) {
+        if (
+          availOverrideDate.availOverrideTimeslots.length ||
+          availOverrideDate.unavailable
+        ) {
+          allEdits.push(
+            updateAvailOverrideDateMutation({
+              variables: {
+                availOverrideDateId: availOverrideDate.availOverrideDateId,
+                data: {
+                  startTime: toUTC(availOverrideDate.startTime).getTime(),
+                  endTime: toUTC(availOverrideDate.endTime).getTime(),
+                  availOverrideTimeslots:
+                    availOverrideDate.availOverrideTimeslots,
+                },
+              },
+            })
+          );
+        } else if (!availOverrideDate.unavailable) {
+          allEdits.push(
+            deleteAvailOverrideDateMutation({
+              variables: {
+                availOverrideDateId: availOverrideDate.availOverrideDateId,
+              },
+            }).catch((err) => console.log(err.message))
+          );
+        }
+      }
+      Promise.all(allEdits).then(onClose);
     }
   };
 
   const addTimeslot = () => {
-    if (!overrideDate) {
+    if (!currentDate) {
       console.error("Must select timeslot first");
       return;
     }
+    const timeslots = currentDate.availOverrideTimeslots;
     // If there are no availabilities for the day, add one starting at 12:00 AM
-    const dateStart = startOfDay(new Date(overrideDate.startTime));
+    const dateStart = startOfDay(new Date(currentDate.startTime));
     let newAvailability: DateInterval | null = {
       startTime: addMinutes(dateStart, 8 * 60),
       endTime: addMinutes(dateStart, 8 * 60 + 30),
@@ -158,209 +207,232 @@ const EditAvailOverrideDayModalContents = ({
         endTime: toUTC(newAvailability.endTime),
       })
       .sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
-    setTimeslots(newTimeslots);
+
+    updateCurrentDay({
+      newTimeslots,
+    });
   };
 
   const editTimeslot = (timeslotIndex: number, newTimeslot: DateInterval) => {
-    setTimeslots((prev) => {
-      return [
-        ...prev.slice(0, timeslotIndex),
-        ...prev.slice(timeslotIndex + 1),
-        {
-          startTime: toUTC!(newTimeslot.startTime),
-          endTime: toUTC!(newTimeslot.endTime),
-        },
-      ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
-    });
+    if (!currentDate) {
+      console.error("Must select timeslot first");
+      return;
+    }
+    const timeslots = currentDate.availOverrideTimeslots;
+    const newTimeslots = [
+      ...timeslots.slice(0, timeslotIndex),
+      ...timeslots.slice(timeslotIndex + 1),
+      {
+        startTime: toUTC!(newTimeslot.startTime),
+        endTime: toUTC!(newTimeslot.endTime),
+      },
+    ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
+
+    updateCurrentDay({ newTimeslots });
   };
 
   const deleteTimeslot = (timeslotIndex: number) => {
-    setTimeslots((prev) => {
-      return [
-        ...prev.slice(0, timeslotIndex),
-        ...prev.slice(timeslotIndex + 1),
-      ];
+    if (!currentDate) {
+      console.error("Must select timeslot first");
+      return;
+    }
+    const timeslots = currentDate.availOverrideTimeslots;
+    const newTimeslots = [
+      ...timeslots.slice(0, timeslotIndex),
+      ...timeslots.slice(timeslotIndex + 1),
+    ];
+
+    updateCurrentDay({
+      newTimeslots,
     });
   };
 
   return (
-    <div className="p-8">
-      <div>
-        <Text h3 b>
-          Set the date to override
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="flex flex-col w-144 mx-auto items-center space-y-4">
+        <Text h3 b className="self-start">
+          Edit Overrides
         </Text>
-      </div>
-      <div className="h-8"></div>
-      <Calendar
-        selectAnyDate
-        onSelect={(newSelectedDate) => {
-          if (newSelectedDate) {
-            const weekday = newSelectedDate.getDay();
-
-            setOverrideDay((prev) => {
-              const newDay = {
-                startTime: newSelectedDate,
-                endTime: addDays(newSelectedDate, 1),
-              };
-              if (prev) {
-                prev = { ...prev, ...newDay };
+        <Calendar
+          selectAnyDate
+          onSelect={(newSelectedDate) => {
+            if (newSelectedDate) {
+              let newAvailOverrideDate: NewAvailOverrideDate;
+
+              //If there are already timeslots on this day set those as current timeslots
+              const existingOverride =
+                dayToTimeslots[newSelectedDate.toLocaleString()] ||
+                availOverrideDates[newSelectedDate.toLocaleString()];
+              if (existingOverride) {
+                newAvailOverrideDate = existingOverride;
+
+                //otherwise create new availOverrideDate object
               } else {
-                // Create new date
-                prev = {
-                  availOverrideDateId: "__I_AM_A_NEW_OVERRIDE_DATE__", // TemporaryID, will be overwritten by backend
+                const newDay = {
+                  startTime: newSelectedDate,
+                  endTime: addDays(newSelectedDate, 1),
+                };
+                newAvailOverrideDate = {
+                  availOverrideDateId: DEFAULT_AVAIL_ID,
                   ...newDay,
-                  profileId: profileId,
+                  profileId,
                   availOverrideTimeslots: [],
+                  edited: false,
+                  unavailable: false,
                 };
               }
-              return prev;
-            });
-
-            setTimeslots(
-              availWeeklys
-                .filter((avail) => avail.startTime.getDay() === weekday)
-                .map((slot) => {
-                  const year = newSelectedDate.getFullYear();
-                  const month = newSelectedDate.getMonth();
-                  const date = newSelectedDate.getDate();
-                  return {
-                    startTime: setDate(
-                      setMonth(setYear(slot.startTime, year), month),
-                      date
-                    ),
-                    endTime: setDate(
-                      setMonth(setYear(slot.endTime, year), month),
-                      date
-                    ),
-                  };
-                })
-            );
-          }
-        }}
-        selectedDate={overrideDate ? new Date(overrideDate.startTime) : null}
-      />
-      <div className="h-8"></div>
-      {overrideDate ? (
-        <div>
-          <div>
-            <Text>
-              Selected date:{" "}
-              <Text b>
-                {format(overrideDate.startTime, "EEEE, MMMM d, yyyy")}
-              </Text>
-              <br />
-              <br />
-              <Text b i>
-                What times are you free on this day?
-              </Text>
-            </Text>
-            <br />
-
-            <div className="h-2"></div>
-            {timeslots.map((timeslot, timeslotIndex) => {
-              const date = startOfDay(overrideDate?.startTime);
-              if (getDay(timeslot.startTime) !== getDay(date)) {
-                return <React.Fragment key={timeslotIndex}></React.Fragment>;
-              }
-              return (
-                <div className="py-2">
-                  <SetDateInterval
-                    key={timeslotIndex}
-                    date={startOfDay(timeslot.startTime)}
-                    intervalsForDate={timeslots}
-                    selectedInterval={timeslot}
-                    onEditInterval={(newInterval) => {
-                      editTimeslot(timeslotIndex, newInterval);
-                    }}
-                    onDeleteInterval={() => {
-                      deleteTimeslot(timeslotIndex);
-                    }}
-                  />
-                </div>
-              );
-            })}
-
-            {timeslots.length === 0 && (
-              <Fragment>
-                <div className="p-2 bg-tertiary rounded-sm">
-                  <Text i className="text-secondary">
-                    Leave empty to mark yourself unavailable.
+              setDayToTimeSlots({
+                ...dayToTimeslots,
+                [newSelectedDate.toLocaleString()]: newAvailOverrideDate,
+              });
+              setCurrentDate(newAvailOverrideDate);
+            }
+          }}
+          selectedDate={currentDate?.startTime || null}
+        />
+        {currentDate && (
+          <div className="w-5/6 p-8">
+            <div>
+              <div>
+                <Text>
+                  Selected date:{" "}
+                  <Text b>
+                    {format(currentDate.startTime, "EEEE, MMMM d, yyyy")}
                   </Text>
-                </div>
+                  <br />
+                  <br />
+                  <Text b i>
+                    What times are you free on this day?
+                  </Text>
+                </Text>
+                <br />
 
-                <div className="h-2"></div>
-              </Fragment>
-            )}
+                <div className="h-2" />
+                {currentDate &&
+                  currentDate.availOverrideTimeslots.map(
+                    (timeslot, timeslotIndex) => {
+                      const date = startOfDay(currentDate.startTime);
+                      if (getDay(timeslot.startTime) !== getDay(date)) {
+                        return (
+                          <React.Fragment key={timeslotIndex}></React.Fragment>
+                        );
+                      }
+                      return (
+                        <div className="py-2" key={timeslotIndex}>
+                          <SetDateInterval
+                            key={timeslotIndex}
+                            date={startOfDay(timeslot.startTime)}
+                            intervalsForDate={
+                              currentDate.availOverrideTimeslots
+                            }
+                            selectedInterval={timeslot}
+                            onEditInterval={(newInterval) => {
+                              editTimeslot(timeslotIndex, newInterval);
+                            }}
+                            onDeleteInterval={() => {
+                              deleteTimeslot(timeslotIndex);
+                            }}
+                          />
+                        </div>
+                      );
+                    }
+                  )}
 
-            <div className="h-2"></div>
-            <div>
-              <Button
-                size="small"
-                variant="inverted"
-                onClick={() => {
-                  addTimeslot();
-                }}
-              >
-                add time
-              </Button>
+                {currentDate &&
+                  currentDate.availOverrideTimeslots.length === 0 &&
+                  (currentDate.unavailable ? (
+                    <Fragment>
+                      <div className="p-2 bg-tertiary rounded-sm">
+                        <Text i className="text-secondary">
+                          You have set today as unavailable.
+                        </Text>
+                      </div>
+
+                      <div className="h-2"></div>
+                    </Fragment>
+                  ) : (
+                    <Fragment>
+                      <div className="p-2 bg-tertiary rounded-sm">
+                        <Text i className="text-secondary">
+                          Your availabilities will be the same as weekly
+                          availability today.
+                        </Text>
+                      </div>
+
+                      <div className="h-2"></div>
+                    </Fragment>
+                  ))}
+
+                <div className="h-2" />
+                <div className="flex justify-between">
+                  <Button
+                    size="small"
+                    variant="inverted"
+                    onClick={() => {
+                      if (currentDate.unavailable) {
+                        updateCurrentDay({
+                          unavailable: false,
+                        });
+                      } else {
+                        updateCurrentDay({
+                          unavailable: true,
+                          newTimeslots: [],
+                        });
+                      }
+                    }}
+                  >
+                    {currentDate && currentDate.unavailable
+                      ? "Reset to Weekly"
+                      : "Set Unavailable"}
+                  </Button>
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      addTimeslot();
+                    }}
+                  >
+                    Add time
+                  </Button>
+                </div>
+              </div>
             </div>
           </div>
+        )}
+        <div className="flex w-full justify-between">
+          <Button size="small" variant="inverted" onClick={onClose}>
+            Close
+          </Button>
+          <div className="w-2"></div>
+          <Button
+            disabled={!modified}
+            size="small"
+            onClick={() => {
+              setModified(false);
+              saveNewOverrides();
+            }}
+          >
+            Save
+          </Button>
         </div>
-      ) : (
-        <div className="w-96">
-          <Text>
-            Select a date to override. <br />
-            Weekly availabilities on that day will be overridden.
-          </Text>
-        </div>
-      )}
-      <div className="h-8"></div>
-
-      <div className="flex">
-        <Button
-          size="small"
-          variant="inverted"
-          onClick={() => {
-            onClose();
-          }}
-        >
-          Cancel
-        </Button>
-        <div className="w-2"></div>
-        <Button
-          size="small"
-          onClick={() => {
-            createOrUpdateOverrideDay()
-              .then(() => {
-                onClose();
-              })
-              .catch((err) => {
-                console.error(err);
-                alert(err);
-              });
-          }}
-        >
-          Save
-        </Button>
       </div>
-    </div>
+    </Modal>
   );
 };
 
 type AvailOverrideDateSectionProps = {
   overrideDate: AvailOverrideDate;
-  availWeeklys: DateInterval[];
+  availOverrideDates: { [key: string]: NewAvailOverrideDate };
+  onSuccessfulDelete: () => void;
 };
 const AvailOverrideDateSection = ({
   overrideDate,
-  availWeeklys,
-}: AvailOverrideDateSectionProps) => {
+  availOverrideDates,
+  onSuccessfulDelete,
+}: // availWeeklys,
+AvailOverrideDateSectionProps) => {
   const [modalOpen, setModalOpen] = useState(false);
-  const [deleteAvailOverrideDateMutation] = useDeleteAvailOverrideDateMutation({
-    refetchQueries: [
-      refetchGetAvailOverrideDatesQuery({ profileId: overrideDate.profileId }),
-    ],
-  });
+  const [deleteAvailOverrideDateMutation] =
+    useDeleteAvailOverrideDateMutation();
 
   return (
     <Fragment>
@@ -377,7 +449,7 @@ const AvailOverrideDateSection = ({
           >
             <Text u>edit</Text>
           </button>
-          <div className="w-2"></div>
+          <div className="w-2" />
           <button
             className="h-6 w-6 rounded p-1 hover:bg-tertiary cursor-pointer"
             onClick={() => {
@@ -385,7 +457,13 @@ const AvailOverrideDateSection = ({
                 variables: {
                   availOverrideDateId: overrideDate.availOverrideDateId,
                 },
-              });
+              })
+                .catch((e) => {
+                  console.log(e.message);
+                })
+                .then(() => {
+                  onSuccessfulDelete();
+                });
             }}
           >
             <DeleteIcon />
@@ -397,29 +475,23 @@ const AvailOverrideDateSection = ({
           <Text className="text-secondary">Unavailable</Text>
         </div>
       )}
-      {overrideDate.availOverrideTimeslots.map((timeslot) => {
+      {overrideDate.availOverrideTimeslots.map((timeslot, idx) => {
         return (
-          <div className="px-12 py-1">
+          <div className="px-12 py-1" key={idx}>
             {format(new Date(timeslot.startTime), "h:mm aaa")} -{" "}
             {format(new Date(timeslot.endTime), "h:mm aaa")}
           </div>
         );
       })}
-      <Modal
+      <EditAvailabilityOverridesModal
+        profileId={overrideDate.profileId}
+        availOverrideDates={availOverrideDates}
         isOpen={modalOpen}
-        onClose={() => {
+        onClose={async () => {
+          await onSuccessfulDelete();
           setModalOpen(false);
         }}
-      >
-        <EditAvailOverrideDayModalContents
-          initOverrideDate={overrideDate}
-          profileId={overrideDate.profileId}
-          availWeeklys={availWeeklys}
-          onClose={() => {
-            setModalOpen(false);
-          }}
-        />
-      </Modal>
+      />
       <div className="h-4"></div>
     </Fragment>
   );
@@ -428,6 +500,12 @@ const AvailOverrideDateSection = ({
 type SetAvailabilityOverridesCardProps = {
   profileId: string;
 };
+
+type NewAvailOverrideDate = AvailOverrideDate & {
+  edited: boolean;
+  unavailable: boolean;
+};
+
 export const SetAvailabilityOverridesCard = ({
   profileId,
 }: SetAvailabilityOverridesCardProps) => {
@@ -435,116 +513,92 @@ export const SetAvailabilityOverridesCard = ({
     data: availOverrideDatesData,
     loading: availOverrideDatesLoading,
     error: availOverrideDatesError,
+    refetch: refetchAvailOverrideDates,
   } = useGetAvailOverrideDatesQuery({
     variables: { profileId },
   });
+  const [modalOpen, setModalOpen] = useState(false);
 
-  const {
-    data: availWeeklysData,
-    loading: availWeeklysLoading,
-    error: availWeeklysError,
-  } = useGetAvailWeeklysQuery({
-    variables: {
-      profileId,
-    },
-  });
-
-  const [editAvailOverrideDayModalOpen, setEditAvailOverrideDayModalOpen] =
-    useState(false);
   const { fromUTC } = useTimezoneConverters();
+
   if (!fromUTC) return <Fragment />;
 
-  let availOverrideDates: AvailOverrideDate[] = [];
-  let availWeeklys: DateInterval[] = [];
+  let availOverrideDates: { [key: string]: NewAvailOverrideDate } = {};
+
   if (
     !availOverrideDatesLoading &&
     !availOverrideDatesError &&
     availOverrideDatesData
   ) {
-    availOverrideDates = availOverrideDatesData.getAvailOverrideDates.map(
-      (date) => {
-        return {
-          ...date,
-          startTime: fromUTC(new Date(date.startTime)),
-          endTime: fromUTC(new Date(date.endTime)),
-          availOverrideTimeslots: date.availOverrideTimeslots.map(
-            (timeslot) => ({
-              startTime: fromUTC(new Date(timeslot.startTime)),
-              endTime: fromUTC(new Date(timeslot.endTime)),
-            })
-          ),
-        };
-      }
+    const sorted = [...availOverrideDatesData.getAvailOverrideDates].sort(
+      (a, b) => a.startTime - b.startTime
     );
-  }
-
-  if (!availWeeklysLoading && !availWeeklysError && availWeeklysData) {
-    availWeeklys = availWeeklysData.getAvailWeeklys.map((avail) => {
-      return {
-        startTime: fromUTC(new Date(avail.startTime)),
-        endTime: fromUTC(new Date(avail.endTime)),
+    for (const overrideDate of sorted) {
+      const startTime = fromUTC(new Date(overrideDate.startTime));
+      let temp = {
+        ...overrideDate,
+        startTime: startTime,
+        endTime: fromUTC(new Date(overrideDate.endTime)),
+        availOverrideTimeslots: overrideDate.availOverrideTimeslots.map(
+          (timeslot) => ({
+            startTime: fromUTC(new Date(timeslot.startTime)),
+            endTime: fromUTC(new Date(timeslot.endTime)),
+          })
+        ),
+        edited: false,
+        unavailable: overrideDate.availOverrideTimeslots.length === 0,
       };
-    });
+      availOverrideDates[startTime.toLocaleString()] = temp;
+    }
   }
 
-  console.log(
-    Intl.DateTimeFormat.supportedLocalesOf(["ban", "id-u-co-pinyin", "de-ID"])
-  );
-
   return (
     <div className="flex flex-col">
       <div className="w-5/6 mx-auto">
         <Text h3 b>
           Add date overrides
         </Text>
-      </div>
-      <div className="h-2"></div>
-      <div className="w-5/6 mx-auto">
+        <div className="h-2" />
         <Text className="text-secondary">
           Add dates when your availability changes from your weekly hours.
         </Text>
       </div>
       <div className="h-4" />
+      <div className="w-full h-px bg-inactive" />
+      <div className="h-4" />
       <div className="flex flex-col">
-        {availOverrideDates.map((overrideDate, idx) => {
+        {Object.values(availOverrideDates).map((overrideDate, idx) => {
           return (
             <React.Fragment key={idx}>
-              <div className="w-full h-px bg-inactive" />
               <AvailOverrideDateSection
                 overrideDate={overrideDate}
-                availWeeklys={availWeeklys}
+                availOverrideDates={availOverrideDates}
+                onSuccessfulDelete={() => {
+                  refetchAvailOverrideDates();
+                }}
               />
+              <div className="w-full h-px bg-inactive" />
             </React.Fragment>
           );
-        })}
-        <div className="w-full h-px bg-inactive" />
-      </div>
-      <div className="h-4"></div>
-      <div className="flex px-12">
-        <Button
-          variant="inverted"
-          size="small"
-          onClick={() => {
-            setEditAvailOverrideDayModalOpen(true);
-          }}
-        >
-          Add date override
-        </Button>
+        }) || (
+          <Text i b className="text-secondary mx-auto">
+            No overrides added.
+          </Text>
+        )}
       </div>
-      <Modal
-        isOpen={editAvailOverrideDayModalOpen}
-        onClose={() => {
-          setEditAvailOverrideDayModalOpen(false);
+      <div className="h-4" />
+      <Button className="mx-auto" onClick={() => setModalOpen(true)}>
+        Add Availability
+      </Button>
+      <EditAvailabilityOverridesModal
+        profileId={profileId}
+        availOverrideDates={availOverrideDates}
+        isOpen={modalOpen}
+        onClose={async () => {
+          await refetchAvailOverrideDates();
+          setModalOpen(false);
         }}
-      >
-        <EditAvailOverrideDayModalContents
-          profileId={profileId}
-          availWeeklys={availWeeklys}
-          onClose={() => {
-            setEditAvailOverrideDayModalOpen(false);
-          }}
-        />
-      </Modal>
+      />
     </div>
   );
 };
diff --git a/src/components/Availabilities/SetDateInterval.tsx b/src/components/Availabilities/SetDateInterval.tsx
index 6ba86045..e567df2b 100644
--- a/src/components/Availabilities/SetDateInterval.tsx
+++ b/src/components/Availabilities/SetDateInterval.tsx
@@ -13,6 +13,7 @@ import React from "react";
 import { DateInterval } from "../../generated/graphql";
 import { Text } from "../atomic";
 import Select from "../atomic/Select";
+import { DeleteIcon } from "../FormSchemaEditor/icons";
 
 type SetDateIntervalProps = {
   date: Date;
@@ -89,7 +90,7 @@ export const SetDateInterval = ({
   };
 
   return (
-    <div className="flex space-x-2 items-center">
+    <div className="flex items-center space-x-2 w-full">
       <Text>From</Text>
       <div className="w-28">
         <Select
@@ -130,11 +131,11 @@ export const SetDateInterval = ({
           }}
         />
       </div>
-      <div className="flex-1" />
       <button
+        className="h-6 w-6 rounded p-1 hover:bg-tertiary cursor-pointer justify-self-end"
         onClick={() => onDeleteInterval(getDay(selectedInterval.startTime))}
       >
-        delete
+        <DeleteIcon className="h-4 m-auto" />
       </button>
     </div>
   );
diff --git a/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx b/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx
index 8e96ac41..83640d12 100644
--- a/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx
+++ b/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx
@@ -9,7 +9,7 @@ import {
   startOfDay,
   startOfWeek,
 } from "date-fns";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   DateInterval,
   refetchGetAvailWeeklysQuery,
@@ -35,19 +35,26 @@ export const SetWeeklyAvailabilitiesCard = ({
   });
   const { toUTC, fromUTC } = useTimezoneConverters();
 
+  const [weeklyAvailabilities, setWeeklyAvailabilities] = useState<
+    DateInterval[]
+  >([]);
+  const [modified, setModified] = useState(false);
+
   const [setWeeklyAvailabilitiesMutation] = useSetAvailWeeklysMutation({
     refetchQueries: [refetchGetAvailWeeklysQuery({ profileId })],
   });
   const [allDayAvailableError, setAllDayAvailableError] = useState(-1); // Index of error
 
-  let weeklyAvailabilities: DateInterval[] = [];
-
-  if (!loading && !error && data && fromUTC) {
-    weeklyAvailabilities = data.getAvailWeeklys.map((x) => ({
-      startTime: fromUTC(new Date(x.startTime)),
-      endTime: fromUTC(new Date(x.endTime)),
-    }));
-  }
+  useEffect(() => {
+    if (!loading && !error && data && fromUTC) {
+      setWeeklyAvailabilities(
+        data.getAvailWeeklys.map((x) => ({
+          startTime: fromUTC(new Date(x.startTime)),
+          endTime: fromUTC(new Date(x.endTime)),
+        }))
+      );
+    }
+  }, [loading]);
 
   const addWeeklyAvailability = (date: Date) => {
     const availabilitiesForDate = weeklyAvailabilities.filter((interval) =>
@@ -108,12 +115,8 @@ export const SetWeeklyAvailabilitiesCard = ({
         endTime: toUTC(newAvailability.endTime),
       })
       .sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
-    setWeeklyAvailabilitiesMutation({
-      variables: {
-        profileId: profileId,
-        availabilities: newWeeklyAvailabilities,
-      },
-    });
+    setWeeklyAvailabilities(newWeeklyAvailabilities);
+    setModified(true);
   };
 
   const editWeeklyAvailability =
@@ -130,12 +133,8 @@ export const SetWeeklyAvailabilitiesCard = ({
           endTime: toUTC(newDateInterval.endTime),
         },
       ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
-      setWeeklyAvailabilitiesMutation({
-        variables: {
-          profileId: profileId,
-          availabilities: newWeeklyAvailabilities,
-        },
-      });
+      setWeeklyAvailabilities(newWeeklyAvailabilities);
+      setModified(true);
       setAllDayAvailableError(-1);
     };
 
@@ -144,21 +143,36 @@ export const SetWeeklyAvailabilitiesCard = ({
       ...weeklyAvailabilities.slice(0, dateIntervalIndex),
       ...weeklyAvailabilities.slice(dateIntervalIndex + 1),
     ];
+    setWeeklyAvailabilities(newWeeklyAvailabilities);
+    setModified(true);
+    setAllDayAvailableError(-1);
+  };
+
+  const saveWeeklyAvailabilities = () => {
     setWeeklyAvailabilitiesMutation({
       variables: {
         profileId: profileId,
-        availabilities: newWeeklyAvailabilities,
+        availabilities: weeklyAvailabilities,
       },
     });
-    setAllDayAvailableError(-1);
   };
 
   return (
     <div className="flex flex-col">
-      <div className="w-5/6 mx-auto">
+      <div className="w-5/6 mx-auto flex justify-between">
         <Text h3 b>
           Set Weekly Availabilities
         </Text>
+        <Button
+          disabled={!modified}
+          size="small"
+          onClick={() => {
+            saveWeeklyAvailabilities();
+            setModified(false);
+          }}
+        >
+          Save
+        </Button>
       </div>
       <div className="h-4" />
       <div className="flex flex-col">
@@ -177,9 +191,7 @@ export const SetWeeklyAvailabilitiesCard = ({
                 <Text b>{weekdayNames[getDay(date)].toUpperCase() + "S"}</Text>
                 {weeklyAvailabilities.map((interval, intervalIndex) => {
                   if (getDay(interval.startTime) !== getDay(date)) {
-                    return (
-                      <React.Fragment key={intervalIndex}></React.Fragment>
-                    );
+                    return <React.Fragment key={intervalIndex} />;
                   }
                   return (
                     <SetDateInterval
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index ced13b60..efb79924 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -6,8 +6,10 @@ import { Arrow } from "./icons";
 import { getDatesInThisMonth, padDatesInMonth } from "./utils";
 
 const today = new Date();
-const initMonth = today.getMonth();
-const initYear = today.getFullYear();
+const tomorrow = new Date();
+tomorrow.setDate(today.getDate() + 1);
+const initMonth = tomorrow.getMonth();
+const initYear = tomorrow.getFullYear();
 
 interface CalendarProps {
   onSelect: (date: Date | null) => void;
@@ -43,50 +45,47 @@ const Calendar = ({
   }, [monthyear, getSelectableDates]);
 
   return (
-    <div className="w-96">
-      <div className="flex justify-between w-full">
-        <Text b className="text-secondary pl-1.5">
+    <div className="w-96 border border-6 rounded-md border-black">
+      <div className="bg-black p-2 flex items-center justify-center space-x-2">
+        <Arrow
+          direction="left"
+          color="white"
+          className="h-6 w-6 p-1 cursor-pointer hover:bg-secondary"
+          onClick={() => {
+            setMonthyear(([prevMonth, prevYear]) => {
+              let newMonthYear: [number, number];
+              if (prevMonth === 0) {
+                newMonthYear = [11, prevYear - 1];
+              } else {
+                newMonthYear = [prevMonth - 1, prevYear];
+              }
+              setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear)));
+              return newMonthYear;
+            });
+          }}
+        />
+        <Text b className="text-white">
           {monthNames[monthyear[0]]} {monthyear[1]}
         </Text>
-        <div className="flex">
-          <Arrow
-            direction="left"
-            className="h-6 w-6 p-1 cursor-pointer"
-            onClick={() => {
-              setMonthyear(([prevMonth, prevYear]) => {
-                let newMonthYear: [number, number];
-                if (prevMonth === 0) {
-                  newMonthYear = [11, prevYear - 1];
-                } else {
-                  newMonthYear = [prevMonth - 1, prevYear];
-                }
-                setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear)));
-                return newMonthYear;
-              });
-            }}
-          />
-          <div className="w-2" />
-          <Arrow
-            direction="right"
-            className="h-6 w-6 p-1 cursor-pointer"
-            onClick={() => {
-              setMonthyear(([prevMonth, prevYear]) => {
-                let newMonthYear: [number, number];
-                if (prevMonth === 11) {
-                  newMonthYear = [0, prevYear + 1];
-                } else {
-                  newMonthYear = [prevMonth + 1, prevYear];
-                }
-                setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear)));
-                return newMonthYear;
-              });
-            }}
-          />
-          <div className="w-1" />
-        </div>
+        <Arrow
+          direction="right"
+          color="white"
+          className="h-6 w-6 p-1 cursor-pointer hover:bg-secondary"
+          onClick={() => {
+            setMonthyear(([prevMonth, prevYear]) => {
+              let newMonthYear: [number, number];
+              if (prevMonth === 11) {
+                newMonthYear = [0, prevYear + 1];
+              } else {
+                newMonthYear = [prevMonth + 1, prevYear];
+              }
+              setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear)));
+              return newMonthYear;
+            });
+          }}
+        />
       </div>
-      <div className="h-4"></div>
-      <div className="grid grid-cols-7 gap-y-3 w-full">
+      <div className="grid grid-cols-7 gap-y-3 w-full p-2">
         <React.Fragment>
           {weekdayNamesAbbreviated.map((dayOfWeek, i) => (
             <div className="text-center select-none font-bold" key={i}>
@@ -100,7 +99,7 @@ const Calendar = ({
           const selected =
             selectedDate && selectedDate.getTime() === day.getTime();
           const selectable =
-            day > new Date() &&
+            day > today &&
             inMonth &&
             (selectAnyDate || selectableDatesSet.has(day.getDate()));
 
@@ -120,9 +119,7 @@ const Calendar = ({
               disabled={!selectable}
               key={i}
               className={backgroundStyles}
-              onClick={() => {
-                onSelect(day);
-              }}
+              onClick={() => onSelect(day)}
             >
               <Text b2>{day.getDate()}</Text>
             </button>
diff --git a/src/components/FormSchemaEditor/icons.tsx b/src/components/FormSchemaEditor/icons.tsx
index 58abae7b..49440d94 100644
--- a/src/components/FormSchemaEditor/icons.tsx
+++ b/src/components/FormSchemaEditor/icons.tsx
@@ -12,9 +12,9 @@ export const EditIcon = (props: HTMLAttributes<HTMLDivElement>) => {
         <path
           d="M15.5833 2.75011C15.8241 2.50936 16.1099 2.31838 16.4245 2.18808C16.7391 2.05779 17.0762 1.99072 17.4167 1.99072C17.7572 1.99072 18.0943 2.05779 18.4089 2.18808C18.7234 2.31838 19.0093 2.50936 19.25 2.75011C19.4908 2.99087 19.6818 3.27669 19.812 3.59125C19.9423 3.90582 20.0094 4.24297 20.0094 4.58345C20.0094 4.92393 19.9423 5.26108 19.812 5.57564C19.6818 5.8902 19.4908 6.17602 19.25 6.41678L6.87501 18.7918L1.83334 20.1668L3.20834 15.1251L15.5833 2.75011Z"
           stroke="black"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </svg>
     </div>
@@ -33,30 +33,30 @@ export const DeleteIcon = (props: HTMLAttributes<HTMLDivElement>) => {
         <path
           d="M1 5H3H19"
           stroke="#DB3B25"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M6 5V3C6 2.46957 6.21071 1.96086 6.58579 1.58579C6.96086 1.21071 7.46957 1 8 1H12C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V5M17 5V19C17 19.5304 16.7893 20.0391 16.4142 20.4142C16.0391 20.7893 15.5304 21 15 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5H17Z"
           stroke="#DB3B25"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M8 10V16"
           stroke="#DB3B25"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M12 10V16"
           stroke="#DB3B25"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </svg>
     </div>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 49f15e39..4970de75 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -47,7 +47,17 @@ export const getApolloClient = (
 ) => {
   // TODO: Do we need to initialize a new ApolloClient?
   //       Or can we just use [client] as defined above?
-  const cache = new InMemoryCache().restore(initialState || {});
+  const cache = new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          getAvailOverrideDates: {
+            merge: true,
+          },
+        },
+      },
+    },
+  }).restore(initialState || {});
   return new ApolloClient({
     link: from([authLink, uploadLink]),
     cache,
diff --git a/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx b/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx
index 1aaf38d0..e13afee6 100644
--- a/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx
+++ b/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx
@@ -56,7 +56,6 @@ const ViewMenteesPage: Page = () => {
       <div className="h-8"></div>
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         {mentees?.map((mentee, index: number) => {
-          console.log(mentee);
           return <ProfileCard profile={mentee} key={index} />;
         })}
       </div>
diff --git a/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx b/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx
index 15a62903..c1edee7f 100644
--- a/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx
+++ b/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx
@@ -40,7 +40,6 @@ const ViewMentorsPage: Page = () => {
     let newMentors = searchText
       ? fuse.search(searchText).map((x) => x.item)
       : unfilteredProfiles;
-    console.log(searchText, newMentors);
     if (!filteredTags.length) {
       return newMentors;
     }
diff --git a/src/pages/program/[slug]/apply.tsx b/src/pages/program/[slug]/apply.tsx
index c6c5ac99..69ef8529 100644
--- a/src/pages/program/[slug]/apply.tsx
+++ b/src/pages/program/[slug]/apply.tsx
@@ -89,29 +89,12 @@ const ProgramApplyPage: Page = (_) => {
   }
 
   return (
-    <>
-      {/* For Testing */}
-      {/* <Button
-        variant={formSubmitted ? "inverted" : "solid"}
-        onClick={() => {
-          setFormSubmitted(!formSubmitted);
-          console.log(applicant);
-        }}
-      >
-        Submitted: <pre>{formSubmitted ? "true" : "false"}</pre>
-      </Button> */}
-      <div className="min-w-screen h-screen bg-tertiary">
-        {/* Nav bar goes here */}
-        <div
-          className={
-            "max-w-4xl mx-auto p-10" +
-            (formSubmitted
-              ? " h-screen w-screen flex flex-col justify-center items-center"
-              : "")
-          }
-        >
-          <SignedInAsIndicator />
-          <div className={formSubmitted ? "hidden" : ""}>
+    <div className="min-w-screen h-screen bg-tertiary">
+      {/* Nav bar goes here */}
+      <div className={"max-w-4xl mx-auto p-10"}>
+        <SignedInAsIndicator />
+        {!formSubmitted ? (
+          <div className="w-full">
             <div className="mt-9">
               <Text h1 b>
                 {currentProgram?.name}
@@ -161,12 +144,11 @@ const ProgramApplyPage: Page = (_) => {
               </div>
             </div>
           </div>
-          <div className={"mx-10" + (formSubmitted ? "" : " hidden")}>
-            <div>
-              <Text h1 b>
-                Thank You
-              </Text>
-            </div>
+        ) : (
+          <div>
+            <Text h1 b>
+              Thank You
+            </Text>
             <div className="mt-6">
               <Card className="p-9 border-inactive rounded-xl">
                 <Text b>
@@ -196,16 +178,18 @@ const ProgramApplyPage: Page = (_) => {
               </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
       <AuthenticationModal
         isOpen={
           user == null || authorizationLevel === AuthorizationLevel.Unverified
         }
-        onClose={() => {}}
+        onClose={() => {
+          setFormSubmitted(false);
+        }}
         programName={currentProgram.name}
       />
-    </>
+    </div>
   );
 };