diff --git a/src/backend/src/controllers/calendar.controllers.ts b/src/backend/src/controllers/calendar.controllers.ts
index f87285309f..22fd4dc0b2 100644
--- a/src/backend/src/controllers/calendar.controllers.ts
+++ b/src/backend/src/controllers/calendar.controllers.ts
@@ -498,6 +498,17 @@ export default class CalendarController {
     }
   }
 
+  static async getSingleEventWithMembers(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { eventId } = req.params;
+
+      const event = await CalendarService.getSingleEventWithMembers(req.currentUser, eventId, req.organization);
+      res.status(200).json(event);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
+
   static async getConflictingEvent(req: Request, res: Response, next: NextFunction) {
     try {
       const { eventId } = req.params;
diff --git a/src/backend/src/prisma-query-args/event.query-args.ts b/src/backend/src/prisma-query-args/event.query-args.ts
index bfaeac073a..f90cbc6d1f 100644
--- a/src/backend/src/prisma-query-args/event.query-args.ts
+++ b/src/backend/src/prisma-query-args/event.query-args.ts
@@ -3,6 +3,8 @@ import { getUserQueryArgs, getUserWithSettingsQueryArgs } from './user.query-arg
 
 export type EventQueryArgs = ReturnType<typeof getEventQueryArgs>;
 
+export type EventWithMembersQueryArgs = ReturnType<typeof getEventWithMembersQueryArgs>;
+
 export const getEventQueryArgs = (organizationId: string) =>
   Prisma.validator<Prisma.EventDefaultArgs>()({
     include: {
@@ -60,3 +62,67 @@ export const getEventQueryArgs = (organizationId: string) =>
       documents: true
     }
   });
+
+export const getEventWithMembersQueryArgs = (organizationId: string) =>
+  Prisma.validator<Prisma.EventDefaultArgs>()({
+    include: {
+      userCreated: getUserWithSettingsQueryArgs(organizationId),
+      requiredMembers: getUserQueryArgs(organizationId),
+      optionalMembers: getUserQueryArgs(organizationId),
+      confirmedMembers: getUserWithSettingsQueryArgs(organizationId),
+      deniedMembers: getUserQueryArgs(organizationId),
+      teams: {
+        include: {
+          members: getUserQueryArgs(organizationId),
+          leads: getUserQueryArgs(organizationId),
+          head: getUserQueryArgs(organizationId)
+        }
+      },
+      teamType: {
+        include: {
+          teams: {
+            include: {
+              members: getUserQueryArgs(organizationId),
+              leads: getUserQueryArgs(organizationId),
+              head: getUserQueryArgs(organizationId)
+            }
+          }
+        }
+      },
+      shops: {
+        select: {
+          name: true,
+          shopId: true
+        }
+      },
+      machinery: {
+        select: {
+          name: true,
+          machineryId: true
+        }
+      },
+      workPackages: {
+        select: {
+          wbsElement: {
+            select: {
+              name: true,
+              carNumber: true,
+              projectNumber: true,
+              workPackageNumber: true
+            }
+          },
+          project: {
+            include: {
+              wbsElement: true,
+              teams: true
+            }
+          },
+          workPackageId: true
+        }
+      },
+      approvalRequiredBy: getUserQueryArgs(organizationId),
+      scheduledTimes: true,
+      notificationSlackThreads: true,
+      documents: true
+    }
+  });
diff --git a/src/backend/src/routes/calendar.routes.ts b/src/backend/src/routes/calendar.routes.ts
index 73d46cf744..1e52e3f3a0 100644
--- a/src/backend/src/routes/calendar.routes.ts
+++ b/src/backend/src/routes/calendar.routes.ts
@@ -199,6 +199,8 @@ calendarRouter.get('/event/:eventId/conflict', CalendarController.getConflicting
 
 calendarRouter.get('/event/:eventId', CalendarController.getSingleEvent);
 
+calendarRouter.get('/event-members/:eventId', CalendarController.getSingleEventWithMembers);
+
 calendarRouter.get('/events', CalendarController.getAllEvents);
 
 calendarRouter.get('/event-types', CalendarController.getAllEventTypes);
diff --git a/src/backend/src/services/calendar.services.ts b/src/backend/src/services/calendar.services.ts
index 90b85fd873..a2cf4731a7 100644
--- a/src/backend/src/services/calendar.services.ts
+++ b/src/backend/src/services/calendar.services.ts
@@ -1,4 +1,9 @@
-import { calendarTransformer, eventTransformer, machineryTransformer } from '../transformers/calendar.transformer';
+import {
+  calendarTransformer,
+  eventTransformer,
+  eventWithMembersTransformer,
+  machineryTransformer
+} from '../transformers/calendar.transformer';
 import { getMachineryQueryArgs } from '../prisma-query-args/machinery.query-args';
 import { Conflict_Status, Event_Status, Organization } from '@prisma/client';
 import {
@@ -39,7 +44,7 @@ import { getEventTypeQueryArgs } from '../prisma-query-args/event-type.query-arg
 import { shopTransformer } from '../transformers/calendar.transformer';
 import { getShopQueryArgs } from '../prisma-query-args/shop.query-args';
 import { getCalendarQueryArgs } from '../prisma-query-args/calendar.query-args';
-import { getEventQueryArgs } from '../prisma-query-args/event.query-args';
+import { getEventQueryArgs, getEventWithMembersQueryArgs } from '../prisma-query-args/event.query-args';
 import {
   buildScheduledTimesOverlap,
   checkEventConflicts,
@@ -1144,13 +1149,13 @@ export default class CalendarService {
   ): Promise<Event> {
     const event = await prisma.event.findUnique({
       where: { eventId },
-      ...getEventQueryArgs(organization.organizationId)
+      ...getEventWithMembersQueryArgs(organization.organizationId)
     });
 
     if (!event) throw new NotFoundException('Event', eventId);
     if (event.dateDeleted) throw new DeletedException('Event', eventId);
 
-    if (!isUserOnEvent(submitter, eventTransformer(event)))
+    if (!isUserOnEvent(submitter, eventWithMembersTransformer(event)))
       throw new HttpException(400, 'Current user is not in the list of this events members');
 
     let userSettings = await prisma.schedule_Settings.findUnique({
@@ -2374,6 +2379,27 @@ export default class CalendarService {
     return eventTransformer(event);
   }
 
+  /**
+   * Retrieves a single event
+   *
+   * @param submitter the user who is trying to retrieve the event
+   * @param eventId the id of the event to retrieve
+   * @param organizationId the organization that the user is currently in
+   * @returns the event
+   */
+  static async getSingleEventWithMembers(_submitter: User, eventId: string, organization: Organization): Promise<Event> {
+    const event = await prisma.event.findUnique({
+      where: { eventId },
+      ...getEventWithMembersQueryArgs(organization.organizationId)
+    });
+
+    if (!event) throw new NotFoundException('Event', eventId);
+
+    if (event.dateDeleted) throw new DeletedException('Event', eventId);
+
+    return eventTransformer(event);
+  }
+
   /**
    * Retrieves a potential conflicting event
    * If no conflict exists, returns the original event
diff --git a/src/backend/src/transformers/calendar.transformer.ts b/src/backend/src/transformers/calendar.transformer.ts
index 06b5f5633d..681bc5d593 100644
--- a/src/backend/src/transformers/calendar.transformer.ts
+++ b/src/backend/src/transformers/calendar.transformer.ts
@@ -16,13 +16,14 @@ import {
   EventPreview,
   DayOfWeek,
   ConflictStatus,
-  Document
+  Document,
+  EventWithMembers
 } from 'shared';
 import { MachineryQueryArgs, ShopMachineryQueryArgs } from '../prisma-query-args/machinery.query-args';
 import { userTransformer, userWithScheduleSettingsTransformer } from './user.transformer';
 import { EventTypeQueryArgs } from '../prisma-query-args/event-type.query-args';
 import { CalendarQueryArgs } from '../prisma-query-args/calendar.query-args';
-import { EventQueryArgs } from '../prisma-query-args/event.query-args';
+import { EventQueryArgs, EventWithMembersQueryArgs } from '../prisma-query-args/event.query-args';
 import { ShopQueryArgs } from '../prisma-query-args/shop.query-args';
 
 export const documentTransformer = (document: Prisma.DocumentGetPayload<null>): Document => {
@@ -140,6 +141,49 @@ export const eventTransformer = (event: Prisma.EventGetPayload<EventQueryArgs>):
   };
 };
 
+export const eventWithMembersTransformer = (event: Prisma.EventGetPayload<EventWithMembersQueryArgs>): EventWithMembers => {
+  return {
+    eventId: event.eventId,
+    title: event.title,
+    userCreated: userWithScheduleSettingsTransformer(event.userCreated),
+    dateCreated: event.dateCreated,
+    eventTypeId: event.eventTypeId,
+    requiredMembers: event.requiredMembers.map(userTransformer),
+    optionalMembers: event.optionalMembers.map(userTransformer),
+    confirmedMembers: event.confirmedMembers.map(userWithScheduleSettingsTransformer),
+    deniedMembers: event.deniedMembers.map(userTransformer),
+    teams: event.teams.map((team) => ({
+      ...team,
+      members: team.members.map(userTransformer),
+      leads: team.leads.map(userTransformer),
+      head: userTransformer(team.head)
+    })),
+    teamType: event.teamType
+      ? {
+          teamTypeId: event.teamType.teamTypeId,
+          name: event.teamType.name,
+          teams: event.teamType.teams.map((team) => ({
+            members: team.members.map(userTransformer),
+            leads: team.leads.map(userTransformer),
+            head: userTransformer(team.head)
+          }))
+        }
+      : undefined,
+    shops: event.shops,
+    machinery: event.machinery,
+    workPackages: event.workPackages,
+    documents: event.documents.filter((document) => !document.dateDeleted).map(documentTransformer),
+    scheduledTimes: event.scheduledTimes.map(scheduleTimesTransformer),
+    approved: conflictStatusTransformer(event.approved),
+    approvalRequiredFrom: event.approvalRequiredBy ?? undefined,
+    location: event.location ?? undefined,
+    zoomLink: event.zoomLink ?? undefined,
+    questionDocumentLink: event.questionDocumentLink ?? undefined,
+    description: event.description ?? undefined,
+    status: eventStatusTransformer(event.status)
+  };
+};
+
 export const eventPreviewTransformer = (event: Prisma.EventGetPayload<EventQueryArgs>, wbsName: string): EventPreview => {
   // Get the earliest scheduled date from scheduledTimes
   const dateScheduled = event.scheduledTimes.length > 0 ? event.scheduledTimes[0].initialDateScheduled : new Date();
diff --git a/src/backend/src/utils/calendar.utils.ts b/src/backend/src/utils/calendar.utils.ts
index 322b250ec2..fa07f5c4f1 100644
--- a/src/backend/src/utils/calendar.utils.ts
+++ b/src/backend/src/utils/calendar.utils.ts
@@ -1,5 +1,13 @@
 import { Prisma, Event_Type, Organization } from '@prisma/client';
-import { User, ScheduleSlotCreateArgs, Event, EventDocumentCreateArgs, Document, ConflictStatus } from 'shared';
+import {
+  User,
+  ScheduleSlotCreateArgs,
+  EventDocumentCreateArgs,
+  Document,
+  ConflictStatus,
+  Event,
+  EventWithMembers
+} from 'shared';
 import { InvalidEventTypeConfigurationException } from './errors.utils';
 import prisma from '../prisma/prisma';
 import { getEventQueryArgs } from '../prisma-query-args/event.query-args';
@@ -15,10 +23,47 @@ export function buildScheduledTimesOverlap(start?: Date, end?: Date): Prisma.Sch
   return { some: { AND } };
 }
 
-export const isUserOnEvent = (user: User, event: Event): boolean => {
-  const requiredMembers = event.requiredMembers.map((user) => user.userId);
-  const optionalMembers = event.optionalMembers.map((user) => user.userId);
-  return requiredMembers.includes(user.userId) || optionalMembers.includes(user.userId);
+export const isUserOnEvent = (user: User, event: EventWithMembers): boolean => {
+  // Check if user is directly a required or optional member
+  const isDirectMember =
+    event.requiredMembers.some((member) => member.userId === user.userId) ||
+    event.optionalMembers.some((member) => member.userId === user.userId);
+
+  if (isDirectMember) {
+    return true;
+  }
+
+  // Check if user is on any of the event's teams (as member, lead, or head)
+  const isOnEventTeam = event.teams.some(
+    (team) =>
+      team.members.some((member) => member.userId === user.userId) ||
+      team.leads.some((lead) => lead.userId === user.userId) ||
+      team.head.userId === user.userId
+  );
+
+  if (isOnEventTeam) {
+    return true;
+  }
+
+  // Check if user is on any team that belongs to the event's team type
+  if (event.teamType) {
+    const isOnTeamType = event.teamType.teams.some(
+      (team) =>
+        team.members.some((member) => member.userId === user.userId) ||
+        team.leads.some((lead) => lead.userId === user.userId) ||
+        team.head.userId === user.userId
+    );
+
+    if (isOnTeamType) {
+      return true;
+    }
+  }
+
+  if (event.userCreated.userId === user.userId) {
+    return true;
+  }
+
+  return false;
 };
 
 /**
diff --git a/src/frontend/src/apis/calendar.api.ts b/src/frontend/src/apis/calendar.api.ts
index da94f0767b..202a2fbeac 100644
--- a/src/frontend/src/apis/calendar.api.ts
+++ b/src/frontend/src/apis/calendar.api.ts
@@ -126,6 +126,12 @@ export const getSingleEvent = async (id: string) => {
   });
 };
 
+export const getSingleEventWithMembers = async (id: string) => {
+  return axios.get(apiUrls.calendarGetSingleEventWithMembers(id), {
+    transformResponse: (data) => eventTransformer(JSON.parse(data))
+  });
+};
+
 export const getConflictingEvent = async (id: string) => {
   return axios.get(apiUrls.calendarGetConflictingEvent(id), {
     transformResponse: (data) => eventTransformer(JSON.parse(data))
diff --git a/src/frontend/src/apis/transformers/calendar.transformer.ts b/src/frontend/src/apis/transformers/calendar.transformer.ts
index 6f75053806..978c5ad74c 100644
--- a/src/frontend/src/apis/transformers/calendar.transformer.ts
+++ b/src/frontend/src/apis/transformers/calendar.transformer.ts
@@ -1,4 +1,4 @@
-import { Shop, Event, EventPreview } from 'shared';
+import { Shop, Event, EventPreview, EventWithMembers } from 'shared';
 import { userTransformer } from './users.transformers';
 
 export const shopTransformer = (shop: Shop): Shop => {
@@ -27,6 +27,20 @@ export const eventTransformer = (event: Event): Event => {
   };
 };
 
+export const eventWithMembersTransformer = (event: EventWithMembers): EventWithMembers => {
+  return {
+    ...event,
+    dateCreated: new Date(event.dateCreated),
+    scheduledTimes: event.scheduledTimes.map((slot: any) => ({
+      ...slot,
+      startTime: slot.startTime ? new Date(slot.startTime) : undefined,
+      endTime: slot.endTime ? new Date(slot.endTime) : undefined,
+      initialDateScheduled: new Date(slot.initialDateScheduled),
+      endDate: new Date(slot.endDate)
+    }))
+  };
+};
+
 export const eventPreviewTransformer = (event: EventPreview): EventPreview => {
   return {
     eventId: event.eventId,
diff --git a/src/frontend/src/app/AppAuthenticated.tsx b/src/frontend/src/app/AppAuthenticated.tsx
index 300e198b02..d0489867a8 100644
--- a/src/frontend/src/app/AppAuthenticated.tsx
+++ b/src/frontend/src/app/AppAuthenticated.tsx
@@ -33,7 +33,7 @@ import { useHomePageContext } from './HomePageContext';
 import { useCurrentOrganization } from '../hooks/organizations.hooks';
 import Statistics from '../pages/StatisticsPage/Statistics';
 import RetrospectiveGanttChartPage from '../pages/RetrospectivePage/Retrospective';
-import NewCalendar from '../pages/NewCalendarPage/NewCalendar';
+import NewCalendar from '../pages/CalendarPage/NewCalendar';
 
 interface AppAuthenticatedProps {
   userId: string;
diff --git a/src/frontend/src/hooks/calendar.hooks.ts b/src/frontend/src/hooks/calendar.hooks.ts
index 6b1ae1ed9f..605e7bda87 100644
--- a/src/frontend/src/hooks/calendar.hooks.ts
+++ b/src/frontend/src/hooks/calendar.hooks.ts
@@ -9,7 +9,8 @@ import {
   EventStatus,
   EventType,
   FilterArgs,
-  ScheduleSlotCreateArgs
+  ScheduleSlotCreateArgs,
+  EventWithMembers
 } from 'shared';
 import {
   getAllShops,
@@ -41,7 +42,8 @@ import {
   postCreateEvent,
   uploadSingleDocument,
   downloadDocumentPdf,
-  postEditEvent
+  postEditEvent,
+  getSingleEventWithMembers
 } from '../apis/calendar.api';
 import { useCurrentUser } from './users.hooks';
 import { PDFDocument } from 'pdf-lib';
@@ -311,6 +313,9 @@ export const useMarkUserConfirmed = (id: string) => {
       onSuccess: () => {
         queryClient.invalidateQueries(EVENT_KEY);
         queryClient.invalidateQueries(['users', user.userId, 'schedule-settings']);
+        queryClient.invalidateQueries(['users', user.userId, 'schedule-settings']);
+        queryClient.invalidateQueries(['users', 'many-with-schedule-settings']);
+        queryClient.invalidateQueries(['users']);
       }
     }
   );
@@ -342,6 +347,17 @@ export const useSingleEvent = (id?: string) => {
   );
 };
 
+export const useSingleEventWithMembers = (id?: string) => {
+  return useQuery<EventWithMembers, Error>(
+    ['events', id, 'with-members'],
+    async () => {
+      const { data } = await getSingleEventWithMembers(id!);
+      return data;
+    },
+    { enabled: !!id }
+  );
+};
+
 export const useConflictingEvents = (ids: string[]) => {
   return useQuery<Event[], Error>(['events', 'conflicting', ids], async () => {
     const results = await Promise.all(
diff --git a/src/frontend/src/pages/CalendarPage/AvailabilityScheduleView.tsx b/src/frontend/src/pages/CalendarPage/AvailabilityScheduleView.tsx
new file mode 100644
index 0000000000..5829cb9ab6
--- /dev/null
+++ b/src/frontend/src/pages/CalendarPage/AvailabilityScheduleView.tsx
@@ -0,0 +1,134 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+import { Availability, Event, getDayOfWeek, getNextSevenDays, User } from 'shared';
+import React, { useState } from 'react';
+import { enumToArray, getBackgroundColor, NUMBER_OF_TIME_SLOTS, REVIEW_TIMES } from '../../utils/design-review.utils';
+import { datePipe } from '../../utils/pipes';
+import EventTimeSlot from './Components/EventTimeSlot';
+
+interface AvailabilityScheduleViewProps {
+  availableUsers: Map<number, User[]>;
+  unavailableUsers: Map<number, User[]>;
+  usersToAvailabilities: Map<User, Availability[]>;
+  setCurrentAvailableUsers: (val: User[]) => void;
+  setCurrentUnavailableUsers: (val: User[]) => void;
+  event: Event;
+  displayDate?: Date;
+}
+
+const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
+  availableUsers,
+  unavailableUsers,
+  usersToAvailabilities,
+  setCurrentAvailableUsers,
+  setCurrentUnavailableUsers,
+  event,
+  displayDate
+}) => {
+  const totalUsers = usersToAvailabilities.size;
+  const [selectedTimeslot, setSelectedTimeslot] = useState<number | null>(null);
+  // Use displayDate if provided, otherwise fall back to event's initial date
+  const initialDate = displayDate || event.scheduledTimes[0]?.initialDateScheduled || new Date();
+  const potentialDays = getNextSevenDays(initialDate);
+
+  const handleTimeslotClick = (index: number, _day: Date) => {
+    if (selectedTimeslot === index) {
+      setSelectedTimeslot(null);
+      setCurrentAvailableUsers([]);
+      setCurrentUnavailableUsers([]);
+    } else {
+      setSelectedTimeslot(index);
+      setCurrentAvailableUsers(availableUsers.get(index) || []);
+      setCurrentUnavailableUsers(unavailableUsers.get(index) || []);
+    }
+  };
+
+  // Populates the availableUsers map
+  for (let time = 0; time < NUMBER_OF_TIME_SLOTS; time++) {
+    availableUsers.set(time, []);
+  }
+  usersToAvailabilities.forEach((availabilities, user) => {
+    let i = 0;
+    availabilities.forEach((availability) => {
+      availability.availability.forEach((time) => {
+        const usersAtTime = availableUsers.get(enumToArray(REVIEW_TIMES).length * i + time) || [];
+        usersAtTime.push(user);
+        availableUsers.set(enumToArray(REVIEW_TIMES).length * i + time, usersAtTime);
+      });
+      i++;
+    });
+  });
+
+  // Populates the unavailableUsers map
+  const allUsers = [...usersToAvailabilities.keys()];
+  for (let time = 0; time < NUMBER_OF_TIME_SLOTS; time++) {
+    const currentUsers = availableUsers.get(time) || [];
+    const currentUnavailableUsers = allUsers.filter((user) => !currentUsers.includes(user));
+    unavailableUsers.set(time, currentUnavailableUsers);
+  }
+
+  const stickyLeft = {
+    position: 'sticky',
+    left: 0,
+    zIndex: 2,
+    bgcolor: 'background.paper'
+  };
+
+  return (
+    <TableContainer
+      sx={{
+        overflowX: 'auto',
+        overflowY: 'auto',
+        maxWidth: '100%'
+      }}
+    >
+      <Table
+        stickyHeader
+        sx={{
+          '& .MuiTableCell-head': {
+            bgcolor: 'background.paper'
+          },
+          minWidth: 650
+        }}
+      >
+        <TableHead>
+          <TableRow>
+            <TableCell></TableCell>
+            {potentialDays.map((day) => (
+              <TableCell>
+                <Typography flexGrow={1} variant="h6" align="center" sx={{ fontSize: { xs: 12, md: 16 } }}>
+                  {getDayOfWeek(day) + ' ' + datePipe(day)}
+                </Typography>
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
+            <TableRow>
+              <TableCell sx={{ ...stickyLeft, zIndex: 1 }}>
+                <Typography flexGrow={1} variant="h6" align="center" sx={{ fontSize: { xs: 12, md: 16 } }}>
+                  {time}
+                </Typography>
+              </TableCell>
+              {potentialDays.map((day, dayIndex) => {
+                const index = dayIndex * enumToArray(REVIEW_TIMES).length + timeIndex;
+                return (
+                  <TableCell sx={{ p: 0 }}>
+                    <EventTimeSlot
+                      key={index}
+                      backgroundColor={getBackgroundColor(availableUsers.get(index)?.length, totalUsers)}
+                      selected={selectedTimeslot === index}
+                      onClick={() => handleTimeslotClick(index, day)}
+                    />
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default AvailabilityScheduleView;
diff --git a/src/frontend/src/pages/NewCalendarPage/CalendarDayCard.tsx b/src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx
similarity index 97%
rename from src/frontend/src/pages/NewCalendarPage/CalendarDayCard.tsx
rename to src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx
index d8320a5938..171defcb9c 100644
--- a/src/frontend/src/pages/NewCalendarPage/CalendarDayCard.tsx
+++ b/src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx
@@ -21,6 +21,8 @@ import GroupsIcon from '@mui/icons-material/Groups';
 import { EventClickPopup } from './EventClickPopup';
 import EventPartialInfoView from './EventPartialInfoView';
 import { getConvertedEnd, getConvertedStart } from '../../utils/datetime.utils';
+import { EventRoutePayload } from './Components/EventModal';
+import { EditEventArgs } from '../../hooks/calendar.hooks';
 
 export const getTeamTypeIcon = (teamTypeName: string, isLarge?: boolean) => {
   const teamIcons: Map<string, JSX.Element> = new Map([
@@ -50,6 +52,12 @@ interface CalendarDayCardProps {
   eventTypes?: EventType[];
   calendars?: Calendar[];
   dayOfWeek?: DayOfWeek;
+  handleEditSubmit: (
+    data: EventRoutePayload,
+    event: Event,
+    editEvent: (editArgs: EditEventArgs) => Promise<Event>,
+    onClose: () => void
+  ) => Promise<void>;
 }
 
 const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
@@ -57,7 +65,8 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
   events,
   eventTypes = [],
   calendars = [],
-  dayOfWeek = DayOfWeek.MONDAY
+  dayOfWeek = DayOfWeek.MONDAY,
+  handleEditSubmit
 }) => {
   const [, setIsCreateModalOpen] = useState(false);
   const theme = useTheme();
@@ -475,6 +484,8 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
         eventTypes={eventTypes}
         calendars={calendars}
         dayOfWeek={dayOfWeek}
+        clickedDate={cardDate}
+        handleEditSubmit={handleEditSubmit}
       />
     </>
   );
diff --git a/src/frontend/src/pages/NewCalendarPage/CalendarTab.tsx b/src/frontend/src/pages/CalendarPage/CalendarTab.tsx
similarity index 99%
rename from src/frontend/src/pages/NewCalendarPage/CalendarTab.tsx
rename to src/frontend/src/pages/CalendarPage/CalendarTab.tsx
index 7e93d3e958..ffda67ec92 100644
--- a/src/frontend/src/pages/NewCalendarPage/CalendarTab.tsx
+++ b/src/frontend/src/pages/CalendarPage/CalendarTab.tsx
@@ -169,6 +169,7 @@ const CalendarTab: React.FC = () => {
           reviewEvents={reviewEvents ?? []}
           yourEvents={yourEvents ?? []}
           allCalendars={allCalendars}
+          handleEditSubmit={handleEditSubmit}
         />
       ) : (
         <EventsTable
diff --git a/src/frontend/src/pages/NewCalendarPage/Components/CreateEventModal.tsx b/src/frontend/src/pages/CalendarPage/Components/CreateEventModal.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/Components/CreateEventModal.tsx
rename to src/frontend/src/pages/CalendarPage/Components/CreateEventModal.tsx
diff --git a/src/frontend/src/pages/NewCalendarPage/Components/EditEventModal.tsx b/src/frontend/src/pages/CalendarPage/Components/EditEventModal.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/Components/EditEventModal.tsx
rename to src/frontend/src/pages/CalendarPage/Components/EditEventModal.tsx
diff --git a/src/frontend/src/pages/CalendarPage/Components/EventAvailabilityPage.tsx b/src/frontend/src/pages/CalendarPage/Components/EventAvailabilityPage.tsx
new file mode 100644
index 0000000000..2f1ce8e1b7
--- /dev/null
+++ b/src/frontend/src/pages/CalendarPage/Components/EventAvailabilityPage.tsx
@@ -0,0 +1,341 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useQuery as useQueryParam } from '../../../hooks/utils.hooks';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
+import { Availability, getMostRecentAvailabilities, User, UserWithScheduleSettings, EventWithMembers } from 'shared';
+import PageLayout from '../../../components/PageLayout';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import ErrorPage from '../../ErrorPage';
+import { useCurrentUser, useUserScheduleSettings, useManyUsersWithScheduleSettings } from '../../../hooks/users.hooks';
+import { useMarkUserConfirmed, useSingleEventWithMembers } from '../../../hooks/calendar.hooks';
+import { useParams, useHistory } from 'react-router-dom';
+import { eventNamePipe, fullNamePipe } from '../../../utils/pipes';
+import NERSuccessButton from '../../../components/NERSuccessButton';
+import NERFailButton from '../../../components/NERFailButton';
+import { routes } from '../../../utils/routes';
+import { useToast } from '../../../hooks/toasts.hooks';
+import { deeplyCopy } from 'shared/src/utils';
+import { availabilityTransformer } from '../../../apis/transformers/users.transformers';
+import SingleAvailabilityModal from '../../SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityModal';
+import AvailabilityEditModal from '../../SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal';
+import AvailabilityScheduleView from '../AvailabilityScheduleView';
+
+const isUserOnEvent = (user: User, event: EventWithMembers): boolean => {
+  const isDirectMember =
+    event.requiredMembers?.some((member: User) => member.userId === user.userId) ||
+    event.optionalMembers?.some((member: User) => member.userId === user.userId);
+
+  if (isDirectMember) return true;
+
+  const isOnEventTeam = event.teams?.some(
+    (team) =>
+      team.members?.some((member: User) => member.userId === user.userId) ||
+      team.leads?.some((lead: User) => lead.userId === user.userId) ||
+      team.head?.userId === user.userId
+  );
+
+  if (isOnEventTeam) return true;
+
+  if (event.teamType?.teams) {
+    const isOnTeamType = event.teamType.teams.some(
+      (team) =>
+        team.members?.some((member: User) => member.userId === user.userId) ||
+        team.leads?.some((lead: User) => lead.userId === user.userId) ||
+        team.head?.userId === user.userId
+    );
+    if (isOnTeamType) return true;
+  }
+
+  if (event.userCreated?.userId === user.userId) return true;
+
+  return false;
+};
+
+export const EventAvailabilityPage: React.FC = () => {
+  const { eventId } = useParams<{ eventId: string }>();
+  const queryParams = useQueryParam();
+  const dateParam = queryParams.get('date');
+  const theme = useTheme();
+  const history = useHistory();
+  const toast = useToast();
+  const currentUser = useCurrentUser();
+
+  const [editAvailabilityOpen, setEditAvailabilityOpen] = useState(false);
+  const [viewAvailabilityOpen, setViewAvailabilityOpen] = useState(false);
+  const [confirmedAvailabilities, setConfirmedAvailabilities] = useState<Map<number, Availability>>(new Map());
+  const [currentAvailableUsers, setCurrentAvailableUsers] = useState<User[]>([]);
+  const [currentUnavailableUsers, setCurrentUnavailableUsers] = useState<User[]>([]);
+
+  const {
+    data: event,
+    isError: eventError,
+    error: eventErrorMsg,
+    isLoading: eventLoading
+  } = useSingleEventWithMembers(eventId);
+
+  const {
+    data: userScheduleSettings,
+    isLoading: settingsLoading,
+    isError: settingsIsError,
+    error: settingsError
+  } = useUserScheduleSettings(currentUser.userId);
+
+  const allRelevantUserIds = useMemo(() => {
+    if (!event) return [];
+
+    const userIds = new Set<string>();
+
+    // Add required and optional members
+    event.requiredMembers.forEach((m) => userIds.add(m.userId));
+    event.optionalMembers.forEach((m) => userIds.add(m.userId));
+
+    // Add creator
+    userIds.add(event.userCreated.userId);
+
+    // Add team members
+    event.teams.forEach((team) => {
+      team.members.forEach((m) => userIds.add(m.userId));
+      team.leads.forEach((l) => userIds.add(l.userId));
+      userIds.add(team.head.userId);
+    });
+
+    // Add team type members
+    if (event.teamType) {
+      event.teamType.teams.forEach((team) => {
+        team.members.forEach((m) => userIds.add(m.userId));
+        team.leads.forEach((l) => userIds.add(l.userId));
+        userIds.add(team.head.userId);
+      });
+    }
+
+    return Array.from(userIds);
+  }, [event]);
+
+  const {
+    data: relevantUsers,
+    isLoading: usersLoading,
+    isError: usersError,
+    error: usersErrorMsg
+  } = useManyUsersWithScheduleSettings(allRelevantUserIds);
+
+  const { mutateAsync: markUserConfirmed } = useMarkUserConfirmed(eventId);
+
+  const displayDate = useMemo(() => {
+    if (dateParam) {
+      return new Date(dateParam);
+    }
+    const raw = event?.scheduledTimes?.[0]?.initialDateScheduled;
+    return raw ? new Date(raw as any) : new Date();
+  }, [dateParam, event?.scheduledTimes]);
+
+  const isUserMember = useMemo(() => {
+    if (!event) return false;
+    return isUserOnEvent(currentUser, event);
+  }, [currentUser, event]);
+
+  useEffect(() => {
+    if (userScheduleSettings && userScheduleSettings.availabilities.length > 0) {
+      const confirmed = getMostRecentAvailabilities(userScheduleSettings.availabilities, displayDate);
+      setConfirmedAvailabilities(new Map(confirmed.map((availability) => [availability.dateSet.getTime(), availability])));
+    } else {
+      setConfirmedAvailabilities(new Map());
+    }
+  }, [userScheduleSettings, displayDate]);
+
+  if (eventLoading || !event) return <LoadingIndicator />;
+  if (eventError) return <ErrorPage error={eventErrorMsg} message={eventErrorMsg?.message} />;
+
+  if (settingsLoading) return <LoadingIndicator />;
+  if (settingsIsError || !userScheduleSettings) return <ErrorPage message={settingsError?.message} />;
+
+  if (usersLoading || !relevantUsers) return <LoadingIndicator />;
+  if (usersError) return <ErrorPage error={usersErrorMsg} />;
+
+  const workPackageNames = event.workPackages.map((wp) => wp.wbsElement.name).join(', ') || event.title;
+  const editModalTitle = `Update your availability for ${workPackageNames} on the week of ${displayDate.toLocaleDateString()}`;
+
+  const handleConfirm = async () => {
+    try {
+      await markUserConfirmed({ availability: Array.from(confirmedAvailabilities.values()) });
+      toast.success('Availability Confirmed!');
+      setEditAvailabilityOpen(false);
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+  };
+
+  const handleClose = () => {
+    history.push(routes.NEW_CALENDAR);
+  };
+
+  const availableUsers = new Map<number, User[]>();
+  const unavailableUsers = new Map<number, User[]>();
+  const usersToAvailabilities = new Map<User, Availability[]>();
+
+  relevantUsers.forEach((user: UserWithScheduleSettings) => {
+    const availability = getMostRecentAvailabilities(user.scheduleSettings?.availabilities ?? [], displayDate);
+    usersToAvailabilities.set(user, availability ?? []);
+  });
+
+  const getAvailabilitySummary = () => {
+    if (confirmedAvailabilities.size === 0) {
+      return 'No availability set yet. Click "Edit My Availability" to get started.';
+    }
+    const totalSlots = Array.from(confirmedAvailabilities.values()).reduce(
+      (sum, avail) => sum + avail.availability.length,
+      0
+    );
+    return `${totalSlots} time slot${totalSlots !== 1 ? 's' : ''} marked as available`;
+  };
+
+  // RENDER
+  return (
+    <PageLayout title={`Availability for ${eventNamePipe(event)}`}>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          {/* My Availability Section */}
+          <Box
+            sx={{
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 2,
+              p: 3,
+              height: '100%',
+              minHeight: 350,
+              maxHeight: 350
+            }}
+          >
+            <Typography variant="h5" fontWeight="bold" mb={2}>
+              My Availability
+            </Typography>
+            <Typography variant="body2" color="text.secondary" mb={2}>
+              {getAvailabilitySummary()}
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 2 }}>
+              <NERSuccessButton
+                variant="contained"
+                onClick={() => setViewAvailabilityOpen(true)}
+                disabled={userScheduleSettings.availabilities.length === 0}
+              >
+                View My Availability
+              </NERSuccessButton>
+              <NERSuccessButton variant="contained" onClick={() => setEditAvailabilityOpen(true)} disabled={!isUserMember}>
+                Edit My Availability
+              </NERSuccessButton>
+            </Box>
+            {!isUserMember && (
+              <Typography variant="body2" color="error" sx={{ mt: 2 }}>
+                You must be a member of this event to edit availability.
+              </Typography>
+            )}
+          </Box>
+        </Grid>
+
+        <Grid item xs={12} md={6}>
+          <Box
+            sx={{
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 2,
+              p: 3,
+              height: '100%',
+              minHeight: 350,
+              maxHeight: 350
+            }}
+          >
+            <Typography variant="h5" fontWeight="bold" mb={2}>
+              {eventNamePipe(event)} Availability
+            </Typography>
+            <Typography variant="body2" color="text.secondary" mb={3}>
+              {currentAvailableUsers.length > 0
+                ? `${currentAvailableUsers.length}/${relevantUsers.length} available`
+                : 'Click a time slot to see availability'}
+            </Typography>
+
+            <Grid container spacing={2}>
+              <Grid item xs={6}>
+                <Typography variant="subtitle2" fontWeight="bold" sx={{ textDecoration: 'underline', mb: 1 }}>
+                  Available
+                </Typography>
+                <Box sx={{ height: 100, overflowY: 'auto' }}>
+                  {currentAvailableUsers.length > 0 ? (
+                    currentAvailableUsers.map((user) => (
+                      <Typography key={user.userId} variant="body2">
+                        {fullNamePipe(user)}
+                      </Typography>
+                    ))
+                  ) : (
+                    <Typography variant="body2" color="text.secondary" fontSize="0.875rem">
+                      Click a time slot to see availability
+                    </Typography>
+                  )}
+                </Box>
+              </Grid>
+
+              <Grid item xs={6}>
+                <Typography variant="subtitle2" fontWeight="bold" sx={{ textDecoration: 'underline', mb: 1 }}>
+                  Unavailable
+                </Typography>
+                <Box sx={{ height: 100, overflowY: 'auto' }}>
+                  {currentUnavailableUsers.length > 0 ? (
+                    currentUnavailableUsers.map((user) => (
+                      <Typography key={user.userId} variant="body2">
+                        {fullNamePipe(user)}
+                      </Typography>
+                    ))
+                  ) : (
+                    <Typography variant="body2" color="text.secondary" fontSize="0.875rem">
+                      Click a time slot to see availability
+                    </Typography>
+                  )}
+                </Box>
+              </Grid>
+            </Grid>
+          </Box>
+        </Grid>
+
+        <Grid item xs={12}>
+          <Box sx={{ backgroundColor: theme.palette.background.paper, borderRadius: 2, p: 3 }}>
+            <AvailabilityScheduleView
+              availableUsers={availableUsers}
+              unavailableUsers={unavailableUsers}
+              usersToAvailabilities={usersToAvailabilities}
+              setCurrentAvailableUsers={setCurrentAvailableUsers}
+              setCurrentUnavailableUsers={setCurrentUnavailableUsers}
+              event={event}
+              displayDate={displayDate}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3 }}>
+        <NERFailButton onClick={handleClose}>Close</NERFailButton>
+      </Box>
+
+      <SingleAvailabilityModal
+        open={viewAvailabilityOpen}
+        onHide={() => setViewAvailabilityOpen(false)}
+        header="My Availability"
+        availabilites={userScheduleSettings.availabilities}
+        initialDate={displayDate}
+      />
+
+      <AvailabilityEditModal
+        open={editAvailabilityOpen}
+        onHide={() => setEditAvailabilityOpen(false)}
+        header={editModalTitle}
+        confirmedAvailabilities={confirmedAvailabilities}
+        setConfirmedAvailabilities={setConfirmedAvailabilities}
+        totalAvailabilities={deeplyCopy(userScheduleSettings.availabilities, availabilityTransformer) as Availability[]}
+        initialDate={displayDate}
+        onSubmit={handleConfirm}
+        canChangeDateRange={false}
+      />
+    </PageLayout>
+  );
+};
diff --git a/src/frontend/src/pages/NewCalendarPage/Components/EventModal.tsx b/src/frontend/src/pages/CalendarPage/Components/EventModal.tsx
similarity index 99%
rename from src/frontend/src/pages/NewCalendarPage/Components/EventModal.tsx
rename to src/frontend/src/pages/CalendarPage/Components/EventModal.tsx
index 1a1f2fd4b0..0c7fc3f15d 100644
--- a/src/frontend/src/pages/NewCalendarPage/Components/EventModal.tsx
+++ b/src/frontend/src/pages/CalendarPage/Components/EventModal.tsx
@@ -271,8 +271,18 @@ const EventModal: React.FC<BaseEventModalProps> = ({
           .map((t) => ({ id: t.teamId, label: t.teamName }));
         setSelectedTeams(teamOptions);
       }
+
+      if (initialValues?.days && initialValues.days.length > 0) {
+        setShowRecurringOptions(true);
+      }
+    }
+  }, [open, defaultFormData, initialValues, users, teams, reset]);
+
+  useEffect(() => {
+    if (open && initialValues?.days && initialValues.days.length > 0) {
+      setShowRecurringOptions(true);
     }
-  }, [open, defaultFormData, reset, initialValues, users, teams]);
+  }, [open, initialValues?.days]);
 
   const selectedEventType = useMemo(
     () => allowedEventTypes.find((et) => et.eventTypeId === selectedEventTypeId),
diff --git a/src/frontend/src/pages/CalendarPage/Components/EventTimeSlot.tsx b/src/frontend/src/pages/CalendarPage/Components/EventTimeSlot.tsx
new file mode 100644
index 0000000000..386e447eae
--- /dev/null
+++ b/src/frontend/src/pages/CalendarPage/Components/EventTimeSlot.tsx
@@ -0,0 +1,41 @@
+import { Box } from '@mui/system';
+
+interface EventTimeSlotProps {
+  backgroundColor?: string;
+  onClick?: () => void;
+  selected?: boolean;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  onMouseUp?: () => void;
+}
+
+const EventTimeSlot: React.FC<EventTimeSlotProps> = ({
+  backgroundColor,
+  onClick,
+  selected = false,
+  onMouseDown,
+  onMouseEnter,
+  onMouseUp
+}) => {
+  return (
+    <Box onClick={onClick} onMouseDown={onMouseDown} onMouseEnter={onMouseEnter} onMouseUp={onMouseUp} p={0.5}>
+      <Box
+        sx={{
+          borderRadius: 1,
+          bgcolor: backgroundColor,
+          width: '100%',
+          height: '100%',
+          minHeight: 54,
+          display: 'flex',
+          borderStyle: 'solid',
+          borderColor: selected ? '#ffff8c' : 'gray',
+          borderWidth: selected ? '2px' : '0.1px',
+          userSelect: 'none', // Prevent text selection while dragging
+          cursor: 'pointer'
+        }}
+      />
+    </Box>
+  );
+};
+
+export default EventTimeSlot;
diff --git a/src/frontend/src/pages/CalendarPage/EventAvailabilityInfo.tsx b/src/frontend/src/pages/CalendarPage/EventAvailabilityInfo.tsx
deleted file mode 100644
index 3ed2a75a4b..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventAvailabilityInfo.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Event } from 'shared';
-import { Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
-import ColumnHeader from '../FinancePage/FinanceComponents/ColumnHeader';
-import { fullNamePipe } from '../../utils/pipes';
-
-interface EventAvailabilityInfoProps {
-  event: Event;
-}
-
-export const EventAvailabilityInfo: React.FC<EventAvailabilityInfoProps> = ({ event }) => {
-  return (
-    <Grid container columnSpacing={4} rowSpacing={2} marginTop="10px">
-      <Grid item>
-        <TableContainer>
-          <Table>
-            <TableHead>
-              <Typography fontWeight={'bold'} fontSize="20px" marginLeft={'10px'}>
-                Required
-              </Typography>
-              <TableRow>
-                <ColumnHeader leftAlign title="Name" />
-                <ColumnHeader leftAlign title="Confirmed?" />
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {event.requiredMembers.map((member) => (
-                <TableRow key={member.userId}>
-                  <TableCell align="left">
-                    <Typography>{fullNamePipe(member)}</Typography>
-                  </TableCell>
-                  <TableCell align="left">
-                    <Typography>
-                      {event.confirmedMembers.some((confirmedMember) => confirmedMember.userId === member.userId)
-                        ? 'Yes'
-                        : 'No'}
-                    </Typography>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-      <Grid item>
-        <TableContainer>
-          <Table>
-            <TableHead>
-              <Typography fontWeight={'bold'} fontSize="20px" marginLeft={'10px'}>
-                Optional
-              </Typography>
-              <TableRow>
-                <ColumnHeader leftAlign title="Name" />
-                <ColumnHeader leftAlign title="Confirmed?" />
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {event.optionalMembers.map((member) => (
-                <TableRow key={member.userId}>
-                  <TableCell>
-                    <Typography>{fullNamePipe(member)}</Typography>
-                  </TableCell>
-                  <TableCell>
-                    <Typography>
-                      {event.confirmedMembers.some((confirmedMember) => confirmedMember.userId === member.userId)
-                        ? 'Yes'
-                        : 'No'}
-                    </Typography>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-    </Grid>
-  );
-};
diff --git a/src/frontend/src/pages/NewCalendarPage/EventClickPopup.tsx b/src/frontend/src/pages/CalendarPage/EventClickPopup.tsx
similarity index 77%
rename from src/frontend/src/pages/NewCalendarPage/EventClickPopup.tsx
rename to src/frontend/src/pages/CalendarPage/EventClickPopup.tsx
index d7b7b561ed..49bf95cd79 100644
--- a/src/frontend/src/pages/NewCalendarPage/EventClickPopup.tsx
+++ b/src/frontend/src/pages/CalendarPage/EventClickPopup.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Button, IconButton, Link, Popover, Stack, Typography, useTheme } from '@mui/material';
 import { Calendar, DayOfWeek, Event, EventType } from 'shared';
 
@@ -22,12 +22,17 @@ import DescriptionIcon from '@mui/icons-material/Description';
 import HelpIcon from '@mui/icons-material/Help';
 import EditIcon from '@mui/icons-material/Edit';
 import PeopleIcon from '@mui/icons-material/People';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 import { getConvertedEnd, getConvertedStart } from '../../utils/datetime.utils';
 import NERSuccessButton from '../../components/NERSuccessButton';
 import NERFailButton from '../../components/NERFailButton';
-import { useApproveEvent, useDenyEvent } from '../../hooks/calendar.hooks';
-import { convertDayToDayShorthand } from '../../utils/calendar.utils';
+import { EditEventArgs, useApproveEvent, useDeleteEvent, useDenyEvent, useEditEvent } from '../../hooks/calendar.hooks';
+import { convertDayToDayShorthand, convertEventToFormValues } from '../../utils/calendar.utils';
+import EditEventModal from './Components/EditEventModal';
+import { useToast } from '../../hooks/toasts.hooks';
+import NERDeleteModal from '../../components/NERDeleteModal';
+import { EventRoutePayload } from './Components/EventModal';
 
 export const getStatusIcon = (status: string, isLarge?: boolean) => {
   const statusIcons: Map<string, JSX.Element> = new Map([
@@ -51,6 +56,9 @@ interface EventClickContentProps {
   disable: boolean;
   addApprovalButtons: boolean;
   onClose: () => void;
+  onEdit: (event: Event) => void;
+  onDelete: (event: Event) => void;
+  clickedDate?: Date;
 }
 
 const joinPeople = (members: { firstName: string; lastName: string }[]) =>
@@ -68,7 +76,10 @@ const EventClickContent: React.FC<EventClickContentProps> = ({
   dayOfWeek,
   disable,
   addApprovalButtons,
-  onClose
+  onClose,
+  onEdit,
+  onDelete,
+  clickedDate
 }) => {
   const { mutateAsync: approveEvent } = useApproveEvent(event.eventId);
   const { mutateAsync: denyEvent } = useDenyEvent(event.eventId);
@@ -87,8 +98,11 @@ const EventClickContent: React.FC<EventClickContentProps> = ({
 
   const showAvailabilityButton = true;
 
-  const editUrl = `${routes.SETTINGS_PREFERENCES}?eventId=${event.eventId}`;
-  const availabilityUrl = `${routes.CALENDAR}/${event.eventId}`;
+  const eventDate =
+    clickedDate ||
+    (event.scheduledTimes[0]?.initialDateScheduled ? new Date(event.scheduledTimes[0].initialDateScheduled) : new Date());
+
+  const availabilityUrl = `${routes.NEW_CALENDAR}/event/${event.eventId}?date=${eventDate.toISOString()}`;
 
   const requiredText = event.requiredMembers.length > 0 ? joinPeople(event.requiredMembers) : '';
   const optionalText = event.optionalMembers.length > 0 ? joinPeople(event.optionalMembers) : '';
@@ -116,26 +130,41 @@ const EventClickContent: React.FC<EventClickContentProps> = ({
       }}
     >
       <Box sx={{ position: 'relative', mb: 2 }}>
-        {/* Edit -> availability page */}
         {!disable && (
-          <IconButton
-            size="small"
-            component={RouterLink}
-            to={editUrl}
-            onClick={stopClick}
-            sx={{
-              position: 'absolute',
-              top: 0,
-              right: 0,
-              color: theme.palette.grey[500],
-              '&:hover': {
-                color: theme.palette.common.white,
-                bgcolor: 'transparent'
-              }
-            }}
-          >
-            <EditIcon fontSize="small" />
-          </IconButton>
+          <Box sx={{ position: 'absolute', top: 0, right: 0, display: 'flex', gap: 0.5 }}>
+            <IconButton
+              size="small"
+              onClick={(e) => {
+                stopClick(e);
+                onEdit(event);
+              }}
+              sx={{
+                color: theme.palette.grey[500],
+                '&:hover': {
+                  color: theme.palette.common.white,
+                  bgcolor: 'transparent'
+                }
+              }}
+            >
+              <EditIcon fontSize="small" />
+            </IconButton>
+            <IconButton
+              size="small"
+              onClick={(e) => {
+                stopClick(e);
+                onDelete(event);
+              }}
+              sx={{
+                color: theme.palette.grey[500],
+                '&:hover': {
+                  color: '#ef5350',
+                  bgcolor: 'transparent'
+                }
+              }}
+            >
+              <DeleteIcon fontSize="small" />
+            </IconButton>
+          </Box>
         )}
         <Stack direction="row" spacing={1} alignItems="center" sx={{ pr: 4 }}>
           {getTeamTypeIcon(event.teamType?.name ?? '', true)}
@@ -401,6 +430,13 @@ export interface EventClickPopupProps {
   dayOfWeek?: DayOfWeek;
   disable?: boolean;
   addApprovalButtons?: boolean;
+  clickedDate?: Date;
+  handleEditSubmit: (
+    data: EventRoutePayload,
+    event: Event,
+    editEvent: (editArgs: EditEventArgs) => Promise<Event>,
+    onClose: () => void
+  ) => Promise<void>;
 }
 
 export const EventClickPopup: React.FC<EventClickPopupProps> = ({
@@ -411,8 +447,38 @@ export const EventClickPopup: React.FC<EventClickPopupProps> = ({
   calendars,
   dayOfWeek,
   disable = false,
-  addApprovalButtons = false
+  addApprovalButtons = false,
+  clickedDate,
+  handleEditSubmit
 }) => {
+  const toast = useToast();
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const { mutateAsync: deleteEvent } = useDeleteEvent(clickedEvent?.eventId ?? '');
+  const { mutateAsync: editEvent } = useEditEvent(clickedEvent?.eventId ?? '');
+
+  const handleEdit = () => {
+    setShowEditModal(true);
+  };
+
+  const handleDelete = () => {
+    setShowDeleteModal(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    try {
+      setShowDeleteModal(false);
+      onClose();
+      await deleteEvent();
+      toast.success('Event deleted successfully!');
+    } catch (err) {
+      if (err instanceof Error) {
+        toast.error(err.message);
+      }
+    }
+  };
+
   return (
     <Popover
       open={Boolean(clickedEvent && anchorPosition)}
@@ -437,6 +503,44 @@ export const EventClickPopup: React.FC<EventClickPopupProps> = ({
           disable={disable}
           addApprovalButtons={addApprovalButtons}
           onClose={onClose}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          clickedDate={clickedDate}
+        />
+      )}
+      {clickedEvent && showEditModal && (
+        <EditEventModal
+          open={showEditModal}
+          onClose={() => {
+            setShowEditModal(false);
+            onClose();
+          }}
+          onSubmit={(data) =>
+            handleEditSubmit(data, clickedEvent, editEvent, () => {
+              setShowEditModal(false);
+              onClose();
+            })
+          }
+          initialValues={convertEventToFormValues(clickedEvent)}
+          eventTypes={eventTypes}
+          defaultDate={
+            clickedEvent.scheduledTimes[0]?.initialDateScheduled
+              ? new Date(clickedEvent.scheduledTimes[0].initialDateScheduled)
+              : new Date()
+          }
+        />
+      )}
+
+      {clickedEvent && showDeleteModal && (
+        <NERDeleteModal
+          open={showDeleteModal}
+          onHide={() => {
+            setShowDeleteModal(false);
+            onClose();
+          }}
+          formId="delete-event-form"
+          dataType={clickedEvent.title}
+          onFormSubmit={handleDeleteConfirm}
         />
       )}
     </Popover>
diff --git a/src/frontend/src/pages/CalendarPage/EventDetailPage/AvailabilityScheduleView.tsx b/src/frontend/src/pages/CalendarPage/EventDetailPage/AvailabilityScheduleView.tsx
deleted file mode 100644
index 606aa9aca2..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventDetailPage/AvailabilityScheduleView.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Grid } from '@mui/material';
-import { Availability, Event, getDayOfWeek, getNextSevenDays, User } from 'shared';
-import {
-  enumToArray,
-  REVIEW_TIMES,
-  HeatmapColors,
-  getBackgroundColor,
-  NUMBER_OF_TIME_SLOTS
-} from '../../../utils/design-review.utils';
-import TimeSlot from '../../../components/TimeSlot';
-import React, { useState } from 'react';
-import { datePipe } from '../../../utils/pipes';
-
-interface AvailabilityScheduleViewProps {
-  availableUsers: Map<number, User[]>;
-  unavailableUsers: Map<number, User[]>;
-  usersToAvailabilities: Map<User, Availability[]>;
-  existingMeetingData: Map<number, string>;
-  setCurrentAvailableUsers: (val: User[]) => void;
-  setCurrentUnavailableUsers: (val: User[]) => void;
-  onSelectedTimeslotChanged: (val: number | null, day: Date | null) => void;
-  dateRangeTitle: string;
-  event: Event;
-}
-
-const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
-  availableUsers,
-  unavailableUsers,
-  usersToAvailabilities,
-  existingMeetingData,
-  setCurrentAvailableUsers,
-  setCurrentUnavailableUsers,
-  dateRangeTitle,
-  onSelectedTimeslotChanged,
-  event
-}) => {
-  const totalUsers = usersToAvailabilities.size;
-  const [selectedTimeslot, setSelectedTimeslot] = useState<number | null>(null);
-  const initialDate = event.scheduledTimes[0]?.initialDateScheduled || new Date();
-  const potentialDays = getNextSevenDays(initialDate);
-
-  const handleTimeslotClick = (index: number, day: Date) => {
-    if (selectedTimeslot === index) {
-      setSelectedTimeslot(null); // unselect
-      setCurrentAvailableUsers([]);
-      setCurrentUnavailableUsers([]);
-    } else {
-      setSelectedTimeslot(index); // select
-      setCurrentAvailableUsers(availableUsers.get(index) || []);
-      setCurrentUnavailableUsers(unavailableUsers.get(index) || []);
-    }
-
-    onSelectedTimeslotChanged(index, day);
-  };
-
-  const handleOnMouseOver = (index: number) => {
-    setCurrentAvailableUsers(availableUsers.get(index) || []);
-    setCurrentUnavailableUsers(unavailableUsers.get(index) || []);
-  };
-
-  const handleOnMouseLeave = (): void => {
-    if (selectedTimeslot === null) {
-      setCurrentAvailableUsers([]);
-      setCurrentUnavailableUsers([]);
-    }
-  };
-
-  // Populates the availableUsers map
-  for (let time = 0; time < NUMBER_OF_TIME_SLOTS; time++) {
-    availableUsers.set(time, []);
-  }
-  usersToAvailabilities.forEach((availabilities, user) => {
-    let i = 0;
-    availabilities.forEach((availability) => {
-      availability.availability.forEach((time) => {
-        const usersAtTime = availableUsers.get(enumToArray(REVIEW_TIMES).length * i + time) || [];
-        usersAtTime.push(user);
-        availableUsers.set(enumToArray(REVIEW_TIMES).length * i + time, usersAtTime);
-      });
-      i++;
-    });
-  });
-
-  // Populates the unavailableUsers map
-  const allUsers = [...usersToAvailabilities.keys()];
-  for (let time = 0; time < NUMBER_OF_TIME_SLOTS; time++) {
-    const currentUsers = availableUsers.get(time) || [];
-    const currentUnavailableUsers = allUsers.filter((user) => !currentUsers.includes(user));
-    unavailableUsers.set(time, currentUnavailableUsers);
-  }
-
-  return (
-    <Grid container>
-      <TimeSlot backgroundColor={HeatmapColors[0]} text={dateRangeTitle} />
-      {potentialDays.map((day) => (
-        <TimeSlot backgroundColor={HeatmapColors[0]} text={getDayOfWeek(day) + ' ' + datePipe(day)} fontSize={'1em'} />
-      ))}
-      {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
-        <Grid container onMouseLeave={handleOnMouseLeave}>
-          <TimeSlot backgroundColor={HeatmapColors[0]} text={time} fontSize={'1em'} />
-          {potentialDays.map((day, dayIndex) => {
-            const index = dayIndex * enumToArray(REVIEW_TIMES).length + timeIndex;
-            return (
-              <TimeSlot
-                key={index}
-                backgroundColor={getBackgroundColor(availableUsers.get(index)?.length, totalUsers)}
-                selected={selectedTimeslot === index}
-                onClick={() => handleTimeslotClick(index, day)}
-                onMouseOver={() => handleOnMouseOver(index)}
-                icon={existingMeetingData.get(index)}
-              />
-            );
-          })}
-        </Grid>
-      ))}
-    </Grid>
-  );
-};
-
-export default AvailabilityScheduleView;
diff --git a/src/frontend/src/pages/CalendarPage/EventDetailPage/AvailabilityView.tsx b/src/frontend/src/pages/CalendarPage/EventDetailPage/AvailabilityView.tsx
deleted file mode 100644
index b04d835b2e..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventDetailPage/AvailabilityView.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { Grid } from '@mui/material';
-import { Availability, Event, EventStatus, getMostRecentAvailabilities, User, UserWithScheduleSettings } from 'shared';
-import { useState } from 'react';
-import AvailabilityScheduleView from './AvailabilityScheduleView';
-import UserAvailabilites from './UserAvailabilitesView';
-import { getWeekDateRange } from '../../../utils/design-review.utils';
-import { dateRangePipe } from '../../../utils/pipes';
-import { FinalizeEventInformation } from './EventDetailPage';
-import { useManyUsersWithScheduleSettings } from '../../../hooks/users.hooks';
-import LoadingIndicator from '../../../components/LoadingIndicator';
-import ErrorPage from '../../ErrorPage';
-
-interface AvailabilityViewProps {
-  event: Event;
-  allEvents: Event[];
-  handleEdit: (data?: FinalizeEventInformation) => void;
-  selectedDate: Date;
-  setSelectDate: (date: Date) => void;
-  startTime: number;
-  endTime: number;
-  setStartTime: (time: number) => void;
-  setEndTime: (time: number) => void;
-  requiredUserIds: string[];
-  optionalUserIds: string[];
-}
-
-const AvailabilityView: React.FC<AvailabilityViewProps> = ({
-  event,
-  allEvents,
-  handleEdit,
-  selectedDate,
-  setSelectDate,
-  startTime,
-  endTime,
-  setStartTime,
-  setEndTime,
-  requiredUserIds,
-  optionalUserIds
-}) => {
-  const {
-    data: relevantUsers,
-    isLoading,
-    isError,
-    error
-  } = useManyUsersWithScheduleSettings([...requiredUserIds, ...optionalUserIds]);
-
-  const availableUsers = new Map<number, User[]>();
-  const unavailableUsers = new Map<number, User[]>();
-  const existingMeetingData = new Map<number, string>();
-  const usersToAvailabilities = new Map<User, Availability[]>();
-
-  const [currentAvailableUsers, setCurrentAvailableUsers] = useState<User[]>([]);
-  const [currentUnavailableUsers, setCurrentUnavailableUsers] = useState<User[]>([]);
-  const [startDateRange, endDateRange] = getWeekDateRange(selectedDate);
-
-  if (isLoading || !relevantUsers) return <LoadingIndicator />;
-  if (isError) return <ErrorPage message={error?.message} />;
-
-  // Get events within the current week
-  const currentWeekEvents = allEvents.filter((currEvent) => {
-    const eventDate = currEvent.scheduledTimes[0]?.initialDateScheduled;
-    if (!eventDate) return false;
-
-    const drDate = new Date(eventDate).getTime();
-    const startRange = startDateRange.getTime();
-    const endRange = endDateRange.getTime();
-
-    return drDate >= startRange && drDate <= endRange;
-  });
-
-  const onSelectedTimeslotChanged = (index: number | null, day: Date | null) => {
-    if (index === null || day === null) return;
-    setStartTime(index);
-    setEndTime(index + 1);
-    setSelectDate(day);
-  };
-
-  // Find conflicting events for the selected time
-  const conflictingEvents = allEvents.filter((currEvent) => {
-    if (currEvent.eventId === event.eventId) return false;
-    if (currEvent.status !== EventStatus.SCHEDULED) return false;
-
-    const eventDate = currEvent.scheduledTimes[0]?.initialDateScheduled;
-    if (!eventDate) return false;
-
-    const cleanDate = new Date(eventDate.getTime() - eventDate.getTimezoneOffset() * -60000);
-
-    // Check if event is on the selected date
-    if (cleanDate.toLocaleDateString() !== selectedDate.toLocaleDateString()) return false;
-
-    // Check if any scheduled times overlap with selected time range
-    return currEvent.scheduledTimes.some((slot) => {
-      if (!slot.startTime) return false;
-      const slotHour = new Date(slot.startTime).getHours();
-      return slotHour >= startTime + 10 && slotHour < endTime + 10;
-    });
-  });
-
-  // Map existing scheduled events to time slots for visualization
-  currentWeekEvents.forEach((ev) => {
-    if (ev.status === EventStatus.SCHEDULED && ev.eventId !== event.eventId) {
-      ev.scheduledTimes.forEach((slot) => {
-        if (slot.startTime) {
-          const hour = new Date(slot.startTime).getHours();
-          const timeIndex = hour - 10; // Convert back to 0-11 index
-          if (timeIndex >= 0 && timeIndex < 12) {
-            existingMeetingData.set(timeIndex, ev.teamType?.name || 'default');
-          }
-        }
-      });
-    }
-  });
-
-  // Get the initial date for availability lookup
-  const initialDate = event.scheduledTimes[0]?.initialDateScheduled || new Date();
-
-  relevantUsers.forEach((user: UserWithScheduleSettings) => {
-    const availability = getMostRecentAvailabilities(user.scheduleSettings?.availabilities ?? [], initialDate);
-
-    usersToAvailabilities.set(user, availability ?? []);
-  });
-
-  return (
-    <Grid container>
-      <Grid item xs={9}>
-        <AvailabilityScheduleView
-          availableUsers={availableUsers}
-          unavailableUsers={unavailableUsers}
-          usersToAvailabilities={usersToAvailabilities}
-          existingMeetingData={existingMeetingData}
-          setCurrentAvailableUsers={setCurrentAvailableUsers}
-          setCurrentUnavailableUsers={setCurrentUnavailableUsers}
-          dateRangeTitle={dateRangePipe(startDateRange, endDateRange)}
-          onSelectedTimeslotChanged={onSelectedTimeslotChanged}
-          event={event}
-        />
-      </Grid>
-      <Grid item xs={3}>
-        <UserAvailabilites
-          currentAvailableUsers={currentAvailableUsers}
-          currentUnavailableUsers={currentUnavailableUsers}
-          usersToAvailabilities={usersToAvailabilities}
-          event={event}
-          conflictingEvents={conflictingEvents}
-          handleEdit={handleEdit}
-          selectedDate={selectedDate}
-          startTime={startTime}
-        />
-      </Grid>
-    </Grid>
-  );
-};
-
-export default AvailabilityView;
diff --git a/src/frontend/src/pages/CalendarPage/EventDetailPage/EventDetailPage.tsx b/src/frontend/src/pages/CalendarPage/EventDetailPage/EventDetailPage.tsx
deleted file mode 100644
index 76ed2f963a..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventDetailPage/EventDetailPage.tsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import {
-  Autocomplete,
-  Box,
-  Checkbox,
-  Grid,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  TextField,
-  Typography,
-  useTheme
-} from '@mui/material';
-import PageLayout from '../../../components/PageLayout';
-import AvailabilityView from './AvailabilityView';
-import { useAllMembers } from '../../../hooks/users.hooks';
-import LoadingIndicator from '../../../components/LoadingIndicator';
-import ErrorPage from '../../ErrorPage';
-import { userToAutocompleteOption } from '../../../utils/teams.utils';
-import { useState } from 'react';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Event, meetingStartTimePipeNumbers } from 'shared';
-import { useAllEvents } from '../../../hooks/calendar.hooks';
-import { eventNamePipe } from '../../../utils/pipes';
-import { HOURS } from '../../../utils/design-review.utils';
-
-export interface EventEditData {
-  requiredUserIds: string[];
-  optionalUserIds: string[];
-  selectedDate: Date;
-  startTime: number;
-  endTime: number;
-}
-interface EventDetailPageProps {
-  event: Event;
-}
-
-export interface FinalizeEventInformation {
-  docTemplateLink: string;
-  zoomLink?: string;
-  location?: string;
-  meetingType: string[];
-}
-
-const EventDetailPage: React.FC<EventDetailPageProps> = ({ event }) => {
-  const theme = useTheme();
-  const [requiredUsers, setRequiredUsers] = useState(event.requiredMembers.map(userToAutocompleteOption));
-  const [optionalUsers, setOptionalUsers] = useState(event.optionalMembers.map(userToAutocompleteOption));
-
-  const [firstScheduledSlot] = event.scheduledTimes;
-  const lastScheduledSlot = event.scheduledTimes.at(-1);
-
-  // Convert string dates → real Date objects (defensive)
-  const parseDate = (dateInput: Date | string | undefined): Date => {
-    if (!dateInput) return new Date();
-    return typeof dateInput === 'string' ? new Date(dateInput) : dateInput;
-  };
-
-  const [date, setDate] = useState<Date>(
-    firstScheduledSlot?.initialDateScheduled ? parseDate(firstScheduledSlot.initialDateScheduled) : new Date()
-  );
-
-  const [startTime, setStartTime] = useState<number>(
-    firstScheduledSlot?.startTime ? new Date(firstScheduledSlot.startTime).getHours() - 10 : 0
-  );
-
-  const [endTime, setEndTime] = useState<number>(
-    lastScheduledSlot?.endTime
-      ? new Date(lastScheduledSlot.endTime).getHours() - 9 // +1 hour from start
-      : 1
-  );
-
-  const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: allMembers } = useAllMembers();
-  const {
-    data: allEvents,
-    isError: allEventsIsError,
-    error: allEventsError,
-    isLoading: allEventsIsLoading
-  } = useAllEvents();
-
-  if (allUsersIsError) return <ErrorPage message={allUsersError?.message} />;
-  if (allEventsIsError) return <ErrorPage message={allEventsError?.message} />;
-  if (allUsersIsLoading || !allMembers || allEventsIsLoading || !allEvents) return <LoadingIndicator />;
-
-  const users = allMembers.map(userToAutocompleteOption);
-
-  const handleDateChange = (newDate: Date | null) => {
-    if (newDate) {
-      const updatedDateTime = new Date();
-      updatedDateTime.setFullYear(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
-      setDate(updatedDateTime);
-    }
-  };
-
-  const handleSelectingRequiredUser = (newValue: { label: string; id: string }[]) => {
-    const newRequiredUserIds = new Set(newValue.map((user) => user.id));
-    const filteredOptionalUsers = optionalUsers.filter((user) => !newRequiredUserIds.has(user.id));
-    setOptionalUsers(filteredOptionalUsers);
-    setRequiredUsers(newValue);
-  };
-
-  const handleEdit = async () => {
-    const times = [];
-    for (let i = startTime; i < endTime; i++) {
-      times.push(i % 12);
-    }
-    date.setHours(12);
-    /*
-    try {
-      const payload: EditDesignReviewPayload = {
-        dateScheduled: date,
-        teamTypeId: designReview.teamType.teamTypeId,
-        requiredMembersIds: requiredUsers.map((user) => user.id),
-        optionalMembersIds: optionalUsers.map((user) => user.id),
-        isOnline: data?.meetingType.includes('virtual') ?? false,
-        isInPerson: data?.meetingType.includes('inPerson') ?? false,
-        status: data ? DesignReviewStatus.SCHEDULED : designReview.status,
-        attendees: [],
-        meetingTimes: times,
-        docTemplateLink: data?.docTemplateLink ?? designReview.docTemplateLink,
-        zoomLink: data?.zoomLink ?? designReview.zoomLink,
-        location: data?.location ?? designReview.location
-      };
-      await editDesignReview(payload);
-      history.push(routes.CALENDAR);
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        toast.error(error.message);
-      }
-    }
-      */
-  };
-
-  const DateField = () => {
-    return <DatePicker value={date} onChange={handleDateChange} sx={EditableFieldStyle} />;
-  };
-
-  // styling for the editable fields at the top of the page with light grey backgrounds
-  const EditableFieldStyle = {
-    fontSize: '16px',
-    backgroundColor: 'grey',
-    borderRadius: 3,
-    textAlign: 'left',
-    border: '2px solid',
-    width: '100%'
-  };
-
-  // styling for the non-editable fields at the top of the page with dark backgrounds
-  const NonEditableFieldStyle = {
-    padding: 1.5,
-    paddingTop: 1.5,
-    paddingBottom: 1.5,
-    fontSize: '1.2em',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: 3,
-    textAlign: 'center',
-    width: '100%',
-    border: 'none'
-  };
-
-  return (
-    <PageLayout title="Scheduling">
-      <Grid container spacing={3} display={'flex'} paddingBottom={2}>
-        <Grid item xs={1}>
-          <Box sx={NonEditableFieldStyle}>Name</Box>
-        </Grid>
-        <Grid item xs={6}>
-          <Box sx={{ ...NonEditableFieldStyle, textDecoration: 'none' }}>{eventNamePipe(event)}</Box>
-        </Grid>
-        <Grid item xs={2}>
-          <DateField />
-        </Grid>
-        <Grid item xs={3} display="flex" gap={3}>
-          <Select
-            id="start-time-autocomplete"
-            displayEmpty
-            renderValue={(value) => meetingStartTimePipeNumbers([value])}
-            value={startTime}
-            onChange={(event: SelectChangeEvent<number>) => setStartTime(Number(event.target.value))}
-            size={'small'}
-            label={'Start Time'}
-            sx={EditableFieldStyle}
-          >
-            {HOURS.map((hour) => {
-              return (
-                <MenuItem key={hour} value={hour}>
-                  {meetingStartTimePipeNumbers([hour])}
-                </MenuItem>
-              );
-            })}
-          </Select>
-          <Typography minWidth={'20px'} display={'flex'} flexDirection="column" justifyContent="center">
-            to
-          </Typography>
-          <Select
-            id="end-time-autocomplete"
-            displayEmpty
-            renderValue={(value) => meetingStartTimePipeNumbers([value])}
-            value={endTime}
-            disabled={true}
-            onChange={(event: SelectChangeEvent<number>) => setEndTime(Number(event.target.value))}
-            size={'small'}
-            label={'End Time'}
-            sx={EditableFieldStyle}
-          >
-            {HOURS.map((hour) => {
-              return (
-                <MenuItem key={hour} value={hour}>
-                  {meetingStartTimePipeNumbers([hour])}
-                </MenuItem>
-              );
-            })}
-          </Select>
-        </Grid>
-        <Grid item xs={12}>
-          <Grid container spacing={2}>
-            <Grid item xs={2}>
-              <Box sx={NonEditableFieldStyle}>Required</Box>
-            </Grid>
-            <Grid item xs={4}>
-              <Box sx={{ ...EditableFieldStyle, padding: 1 }}>
-                <Autocomplete
-                  isOptionEqualToValue={(option, value) => option.id === value.id}
-                  multiple
-                  disableCloseOnSelect
-                  limitTags={1}
-                  renderTags={() => null}
-                  id="required-users"
-                  options={users}
-                  value={requiredUsers}
-                  onChange={(_event, newValue) => handleSelectingRequiredUser(newValue)}
-                  getOptionLabel={(option) => option.label}
-                  renderOption={(props, option, { selected }) => (
-                    <li {...props}>
-                      <Checkbox
-                        icon={<CheckBoxOutlineBlankIcon />}
-                        checkedIcon={<CheckBoxIcon />}
-                        style={{ marginRight: 8 }}
-                        checked={selected}
-                      />
-                      {option.label}
-                    </li>
-                  )}
-                  renderInput={(params) => (
-                    <TextField
-                      {...params}
-                      InputProps={{ ...params.InputProps, disableUnderline: true }}
-                      variant="standard"
-                      placeholder={`${requiredUsers.length} users selected`}
-                    />
-                  )}
-                />
-              </Box>
-            </Grid>
-            <Grid item xs={2}>
-              <Box sx={NonEditableFieldStyle}>Optional</Box>
-            </Grid>
-            <Grid item xs={4}>
-              <Box sx={{ ...EditableFieldStyle, padding: 1 }}>
-                <Autocomplete
-                  isOptionEqualToValue={(option, value) => option.id === value.id}
-                  multiple
-                  disableCloseOnSelect
-                  limitTags={1}
-                  renderTags={() => null}
-                  id="optional-users"
-                  options={users.filter((user) => !requiredUsers.some((reqUser) => reqUser.id === user.id))}
-                  value={optionalUsers}
-                  onChange={(_event, newValue) => setOptionalUsers(newValue)}
-                  getOptionLabel={(option) => option.label}
-                  renderOption={(props, option, { selected }) => (
-                    <li {...props}>
-                      <Checkbox
-                        icon={<CheckBoxOutlineBlankIcon />}
-                        checkedIcon={<CheckBoxIcon />}
-                        style={{ marginRight: 8 }}
-                        checked={selected}
-                      />
-                      {option.label}
-                    </li>
-                  )}
-                  renderInput={(params) => (
-                    <TextField
-                      {...params}
-                      InputProps={{ ...params.InputProps, disableUnderline: true }}
-                      variant="standard"
-                      placeholder={`${optionalUsers.length} users selected`}
-                    />
-                  )}
-                />
-              </Box>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-      <AvailabilityView
-        handleEdit={handleEdit}
-        event={event}
-        allEvents={allEvents}
-        selectedDate={date}
-        setSelectDate={setDate}
-        requiredUserIds={requiredUsers.map((user) => user.id)}
-        optionalUserIds={optionalUsers.map((user) => user.id)}
-        startTime={startTime}
-        endTime={endTime}
-        setStartTime={setStartTime}
-        setEndTime={setEndTime}
-      />
-    </PageLayout>
-  );
-};
-
-export default EventDetailPage;
diff --git a/src/frontend/src/pages/CalendarPage/EventDetailPage/EventDetails.tsx b/src/frontend/src/pages/CalendarPage/EventDetailPage/EventDetails.tsx
deleted file mode 100644
index 05b3adaa27..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventDetailPage/EventDetails.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
- * See the LICENSE file in the repository root folder for details.
- */
-import LoadingIndicator from '../../../components/LoadingIndicator';
-import { useParams } from 'react-router-dom';
-import ErrorPage from '../../ErrorPage';
-import { useSingleEvent } from '../../../hooks/calendar.hooks';
-import EventDetailPage from './EventDetailPage';
-
-const EventDetails: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const { data: event, isError, error, isLoading } = useSingleEvent(id);
-
-  if (isError) return <ErrorPage error={error} />;
-  if (!event || isLoading) return <LoadingIndicator />;
-
-  return <EventDetailPage event={event} />;
-};
-
-export default EventDetails;
diff --git a/src/frontend/src/pages/CalendarPage/EventDetailPage/FinalizeEventDetailsModal.tsx b/src/frontend/src/pages/CalendarPage/EventDetailPage/FinalizeEventDetailsModal.tsx
deleted file mode 100644
index 454f067898..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventDetailPage/FinalizeEventDetailsModal.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { Box, Grid, Link, ToggleButton, ToggleButtonGroup, Typography, Tooltip } from '@mui/material';
-import HelpIcon from '@mui/icons-material/Help';
-import React, { useState, useEffect } from 'react';
-import { Event, meetingStartTimePipeNumbers, wbsPipe } from 'shared';
-import NERFormModal from '../../../components/NERFormModal';
-import ReactHookTextField from '../../../components/ReactHookTextField';
-import { useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { FinalizeEventInformation } from './EventDetailPage';
-import { useCurrentUser, useUserScheduleSettings } from '../../../hooks/users.hooks';
-
-interface FinalizeEventProps {
-  open: boolean;
-  setOpen: (val: boolean) => void;
-  event: Event;
-  conflictingEvents: Event[];
-  startTime: number;
-  selectedDate: Date;
-  finalizeEvent: (data: FinalizeEventInformation) => void;
-}
-
-const FinalizeEventDetailsModal = ({
-  open,
-  setOpen,
-  event,
-  conflictingEvents,
-  finalizeEvent,
-  startTime,
-  selectedDate
-}: FinalizeEventProps) => {
-  const [meetingType, setMeetingType] = useState<string[]>([]);
-  const currentUser = useCurrentUser();
-  const { data: userScheduleSettings } = useUserScheduleSettings(currentUser.userId);
-
-  const createValidationSchema = () =>
-    yup.object().shape({
-      zoomLink: meetingType.includes('virtual')
-        ? yup.string().required('Meeting link is required for virtual meetings').url('Please enter a valid URL')
-        : yup.string().optional(),
-      location: yup.string().optional(),
-      docTemplateLink: yup.string().required('Question Doc is Required')
-    });
-
-  const [firstWorkPackage] = event.workPackages;
-
-  const wbsNum = firstWorkPackage
-    ? {
-        carNumber: firstWorkPackage.wbsElement.carNumber,
-        projectNumber: firstWorkPackage.wbsElement.projectNumber,
-        workPackageNumber: firstWorkPackage.wbsElement.workPackageNumber
-      }
-    : { carNumber: 0, projectNumber: 0, workPackageNumber: 0 };
-
-  const eventName = firstWorkPackage?.wbsElement?.name
-    ? `${firstWorkPackage.wbsElement.carNumber}.${firstWorkPackage.wbsElement.projectNumber}.${firstWorkPackage.wbsElement.workPackageNumber} - ${firstWorkPackage.wbsElement.name}`
-    : event.title;
-
-  const title = `Finalize Event for ${eventName}`;
-
-  const eventConflicts = conflictingEvents.map(
-    (_event) => `${wbsPipe(wbsNum)} - ${eventName} at ${meetingStartTimePipeNumbers([startTime])}`
-  );
-
-  const defaultValues = {
-    docTemplateLink: event.questionDocumentLink ?? '',
-    zoomLink: event.zoomLink ?? userScheduleSettings?.personalZoomLink ?? '',
-    location: event.location ?? undefined
-  };
-
-  const {
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors }
-  } = useForm({
-    resolver: yupResolver(createValidationSchema()),
-    defaultValues,
-    mode: 'onChange'
-  });
-
-  const handleMeetingTypeChange = (_event: any, newMeetingType: string[]) => {
-    setMeetingType(newMeetingType);
-    reset(defaultValues);
-  };
-
-  const onSubmit = async (data: { docTemplateLink: string; zoomLink?: string; location?: string }) => {
-    finalizeEvent({ ...data, zoomLink: data.zoomLink ? data.zoomLink : undefined, meetingType });
-    setOpen(false);
-  };
-
-  useEffect(() => {
-    if (userScheduleSettings && !event.zoomLink) {
-      reset({
-        docTemplateLink: event.questionDocumentLink ?? '',
-        zoomLink: userScheduleSettings.personalZoomLink ?? '',
-        location: event.location ?? undefined
-      });
-    }
-    if (event.zoomLink === '') {
-      reset({
-        zoomLink: undefined
-      });
-    }
-  }, [userScheduleSettings, event, reset]);
-
-  return (
-    <NERFormModal
-      open={open}
-      onHide={() => setOpen(false)}
-      title={title}
-      reset={() => reset(defaultValues)}
-      handleUseFormSubmit={handleSubmit}
-      onFormSubmit={onSubmit}
-      submitText="Schedule"
-      formId="finalize-event-form"
-    >
-      <Box style={{ display: 'flex', marginBottom: 20 }}>
-        <Typography style={{ fontSize: '1.2em', marginRight: 90 }}>Meeting Time:</Typography>
-        <Typography style={{ fontSize: '1.2em' }}>{`${meetingStartTimePipeNumbers([
-          startTime
-        ])} - ${selectedDate.toDateString()}`}</Typography>
-      </Box>
-      <Box style={{ display: 'flex', marginBottom: 20 }}>
-        <Typography style={{ fontSize: '1.2em', marginRight: 97 }}>Meeting Type:</Typography>
-        <ToggleButtonGroup color="primary" value={meetingType} onChange={handleMeetingTypeChange}>
-          <ToggleButton value="virtual">Virtual</ToggleButton>
-          <ToggleButton value="inPerson">In-person</ToggleButton>
-        </ToggleButtonGroup>
-      </Box>
-      <Box style={{ display: 'flex', marginBottom: 20 }}>
-        <Box>
-          <Typography style={{ fontSize: '1.2em', marginRight: 90 }}>Question Doc:</Typography>
-          <Link
-            href="https://docs.google.com/document/d/1DtbMNPUs0PMUI3D3UC-1ZpUXu3CvNoFzFvrypapg3os/edit?usp=sharing"
-            target="_blank"
-            underline="hover"
-            fontSize={16}
-          >
-            Doc Template
-          </Link>
-        </Box>
-        <ReactHookTextField
-          name="docTemplateLink"
-          control={control}
-          sx={{ width: 0.48 }}
-          errorMessage={errors.docTemplateLink}
-        />
-      </Box>
-      {meetingType.includes('virtual') && (
-        <Box style={{ display: 'flex', marginBottom: 20, alignItems: 'center' }}>
-          <Box style={{ marginRight: 90 }}>
-            <Typography style={{ fontSize: '1.2em', marginLeft: -10, display: 'inline' }}>Meeting Link:</Typography>
-            <Tooltip
-              title="Ensure your Meeting Link is Publicly Accessible and Does Not Require a Password."
-              placement="right"
-            >
-              <HelpIcon style={{ fontSize: 'medium', verticalAlign: 'middle' }} />
-            </Tooltip>
-          </Box>
-          <ReactHookTextField name="zoomLink" control={control} sx={{ width: 0.48 }} errorMessage={errors.zoomLink} />
-        </Box>
-      )}
-      {meetingType.includes('inPerson') && (
-        <Box style={{ display: 'flex', alignItems: 'center', marginBottom: 50 }}>
-          <Typography style={{ fontSize: '1.2em', marginRight: 132 }}>Location:</Typography>
-          <ReactHookTextField name="location" control={control} sx={{ width: 0.48 }} errorMessage={errors.location} />
-        </Box>
-      )}
-      <Grid container justifyContent="center" style={{ alignItems: 'center' }}>
-        {eventConflicts && eventConflicts.length > 0 && (
-          <Grid item container justifyContent="center" style={{ alignItems: 'center' }}>
-            <Box sx={{ backgroundColor: '#ef4345', width: '70%', padding: 0.5 }}>
-              <Typography>Design Review Conflicts</Typography>
-            </Box>
-            <Grid item container justifyContent="center" style={{ marginBottom: 20 }}>
-              <Box
-                sx={{
-                  width: '70%',
-                  height: '90px',
-                  overflowY: 'auto',
-                  backgroundColor: 'grey',
-                  padding: 1
-                }}
-              >
-                {eventConflicts.map((conflictDesign, index) => (
-                  <Typography key={index} style={{ color: 'black', borderTop: '1px solid black' }}>
-                    {conflictDesign}
-                  </Typography>
-                ))}
-              </Box>
-            </Grid>
-          </Grid>
-        )}
-      </Grid>
-    </NERFormModal>
-  );
-};
-export default FinalizeEventDetailsModal;
diff --git a/src/frontend/src/pages/CalendarPage/EventDetailPage/UserAvailabilitesView.tsx b/src/frontend/src/pages/CalendarPage/EventDetailPage/UserAvailabilitesView.tsx
deleted file mode 100644
index f9d86b4fcc..0000000000
--- a/src/frontend/src/pages/CalendarPage/EventDetailPage/UserAvailabilitesView.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { Typography } from '@mui/material';
-import { Box, useTheme } from '@mui/system';
-import { Availability, Event, EventStatus, User } from 'shared';
-import { HeatmapColors } from '../../../utils/design-review.utils';
-import { fullNamePipe } from '../../../utils/pipes';
-import NERFailButton from '../../../components/NERFailButton';
-import NERSuccessButton from '../../../components/NERSuccessButton';
-import { useState } from 'react';
-import { FinalizeEventInformation } from './EventDetailPage';
-import { useHistory } from 'react-router-dom';
-import { routes } from '../../../utils/routes';
-import FinalizeEventDetailsModal from './FinalizeEventDetailsModal';
-
-interface UserAvailabilitiesProps {
-  currentAvailableUsers: User[];
-  currentUnavailableUsers: User[];
-  usersToAvailabilities: Map<User, Availability[]>;
-  event: Event;
-  conflictingEvents: Event[];
-  selectedDate: Date;
-  startTime: number;
-  handleEdit: (data?: FinalizeEventInformation) => void;
-}
-
-const UserAvailabilites: React.FC<UserAvailabilitiesProps> = ({
-  currentAvailableUsers,
-  currentUnavailableUsers,
-  usersToAvailabilities,
-  event,
-  conflictingEvents,
-  handleEdit,
-  selectedDate,
-  startTime
-}) => {
-  const theme = useTheme();
-  const history = useHistory();
-  const [showFinalizeEventDetailsModal, setShowFinalizeEventDetailsModal] = useState(false);
-  const totalUsers = usersToAvailabilities.size;
-
-  const handleCancel = () => {
-    history.push(routes.CALENDAR);
-  };
-
-  return (
-    <Box
-      style={{
-        display: 'flex',
-        backgroundColor: theme.palette.background.paper,
-        padding: '20px',
-        borderRadius: '10px',
-        height: '100%'
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          marginBottom: '10px'
-        }}
-      >
-        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-          <Typography style={{ marginRight: '10px' }}>0/{totalUsers}</Typography>
-          {Array.from({ length: 6 }, (_, i) => (
-            <Box
-              sx={{
-                width: '1.5vw',
-                height: '1.5vw',
-                backgroundColor: HeatmapColors[i]
-              }}
-            />
-          ))}
-          <Typography style={{ marginLeft: '10px' }}>
-            {totalUsers}/{totalUsers}
-          </Typography>
-        </Box>
-        <Box style={{ display: 'flex', gap: '2', marginTop: '10px' }}>
-          <Box>
-            <Typography
-              style={{
-                textDecoration: 'underline',
-                fontSize: '1.5em',
-                textAlign: 'center',
-                marginBottom: '10px',
-                width: '10vw'
-              }}
-            >
-              Available
-            </Typography>
-            <Box sx={{ maxHeight: '350px', overflowY: 'auto' }}>
-              {currentAvailableUsers.map((user) => (
-                <Typography style={{ textAlign: 'center', fontSize: '16px' }}>{fullNamePipe(user)}</Typography>
-              ))}
-            </Box>
-          </Box>
-          <Box>
-            <Typography
-              style={{
-                textDecoration: 'underline',
-                fontSize: '1.5em',
-                textAlign: 'center',
-                marginBottom: '10px',
-                width: '10vw'
-              }}
-            >
-              Unavailable
-            </Typography>
-            <Box sx={{ maxHeight: '350px', overflowY: 'auto' }}>
-              {currentUnavailableUsers.map((user) => (
-                <Typography style={{ textAlign: 'center', fontSize: '1em' }}>{fullNamePipe(user)}</Typography>
-              ))}
-            </Box>
-          </Box>
-        </Box>
-        <Box
-          style={{
-            marginTop: 'auto',
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '10px',
-            overflow: 'auto'
-          }}
-        >
-          <NERFailButton onClick={handleCancel}>Cancel</NERFailButton>
-          <NERSuccessButton variant="contained" type="submit" sx={{ mx: 1 }} onClick={() => handleEdit()}>
-            Save
-          </NERSuccessButton>
-          <NERSuccessButton
-            disabled={event.status === EventStatus.DONE}
-            variant="contained"
-            type="submit"
-            sx={{ mr: 1 }}
-            onClick={() => setShowFinalizeEventDetailsModal(true)}
-          >
-            Finalize
-          </NERSuccessButton>
-          <FinalizeEventDetailsModal
-            open={showFinalizeEventDetailsModal}
-            setOpen={setShowFinalizeEventDetailsModal}
-            conflictingEvents={conflictingEvents}
-            event={event}
-            finalizeEvent={handleEdit}
-            selectedDate={selectedDate}
-            startTime={startTime}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default UserAvailabilites;
diff --git a/src/frontend/src/pages/NewCalendarPage/EventPartialInfoView.tsx b/src/frontend/src/pages/CalendarPage/EventPartialInfoView.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/EventPartialInfoView.tsx
rename to src/frontend/src/pages/CalendarPage/EventPartialInfoView.tsx
diff --git a/src/frontend/src/pages/NewCalendarPage/EventsTable.tsx b/src/frontend/src/pages/CalendarPage/EventsTable.tsx
similarity index 99%
rename from src/frontend/src/pages/NewCalendarPage/EventsTable.tsx
rename to src/frontend/src/pages/CalendarPage/EventsTable.tsx
index 70af7215c3..8405ece2dd 100644
--- a/src/frontend/src/pages/NewCalendarPage/EventsTable.tsx
+++ b/src/frontend/src/pages/CalendarPage/EventsTable.tsx
@@ -402,6 +402,7 @@ const EventsTable: React.FC<EventTableArgs> = ({
         calendars={allCalendars}
         disable={true}
         addApprovalButtons={true}
+        handleEditSubmit={handleEditSubmit}
       />
       {clickedEditEvent && showEditModal && (
         <EditEventModal
diff --git a/src/frontend/src/pages/NewCalendarPage/FilterModal.tsx b/src/frontend/src/pages/CalendarPage/FilterModal.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/FilterModal.tsx
rename to src/frontend/src/pages/CalendarPage/FilterModal.tsx
diff --git a/src/frontend/src/pages/CalendarPage/NewCalendar.tsx b/src/frontend/src/pages/CalendarPage/NewCalendar.tsx
new file mode 100644
index 0000000000..4b36809ab6
--- /dev/null
+++ b/src/frontend/src/pages/CalendarPage/NewCalendar.tsx
@@ -0,0 +1,22 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+import { Route, Switch } from 'react-router-dom';
+import { routes } from '../../utils/routes';
+import CalendarTab from './CalendarTab';
+import { EventAvailabilityPage } from './Components/EventAvailabilityPage';
+
+const NewCalendar: React.FC = () => {
+  return (
+    <Switch>
+      <Route exact path={`${routes.NEW_CALENDAR}/yourEvents`} component={CalendarTab} />
+      <Route exact path={`${routes.NEW_CALENDAR}/reviews`} component={CalendarTab} />
+      <Route exact path={`${routes.NEW_CALENDAR}/mainCalendar`} component={CalendarTab} />
+      <Route path={`${routes.NEW_CALENDAR}/event/:eventId`} component={EventAvailabilityPage} />
+      <Route exact path={routes.NEW_CALENDAR} component={CalendarTab} />
+    </Switch>
+  );
+};
+
+export default NewCalendar;
diff --git a/src/frontend/src/pages/NewCalendarPage/NewCalendarPage.tsx b/src/frontend/src/pages/CalendarPage/NewCalendarPage.tsx
similarity index 97%
rename from src/frontend/src/pages/NewCalendarPage/NewCalendarPage.tsx
rename to src/frontend/src/pages/CalendarPage/NewCalendarPage.tsx
index efa352290a..f7f54b9af0 100644
--- a/src/frontend/src/pages/NewCalendarPage/NewCalendarPage.tsx
+++ b/src/frontend/src/pages/CalendarPage/NewCalendarPage.tsx
@@ -20,7 +20,13 @@ import PageLayout from '../../components/PageLayout';
 import { Calendar, ConflictStatus, DayOfWeek, Event, EventType } from 'shared';
 import CalendarDayCard from './CalendarDayCard';
 import { DAY_NAMES, enumToArray, calendarPaddingDays, daysInMonth } from '../../utils/design-review.utils';
-import { useConflictingEvents, useFilterEvents, useCreateEvent, useUploadManyDocuments } from '../../hooks/calendar.hooks';
+import {
+  useConflictingEvents,
+  useFilterEvents,
+  useCreateEvent,
+  useUploadManyDocuments,
+  EditEventArgs
+} from '../../hooks/calendar.hooks';
 import ErrorPage from '../ErrorPage';
 import { datePipe } from '../../utils/pipes';
 import LoadingIndicator from '../../components/LoadingIndicator';
@@ -47,9 +53,21 @@ interface NewCalendarPageProps {
   yourEvents: Event[];
   reviewEvents: Event[];
   allCalendars: Calendar[];
+  handleEditSubmit: (
+    data: EventRoutePayload,
+    event: Event,
+    editEvent: (editArgs: EditEventArgs) => Promise<Event>,
+    onClose: () => void
+  ) => Promise<void>;
 }
 
-const NewCalendarPage: React.FC<NewCalendarPageProps> = ({ allEventTypes, yourEvents, reviewEvents, allCalendars }) => {
+const NewCalendarPage: React.FC<NewCalendarPageProps> = ({
+  allEventTypes,
+  yourEvents,
+  reviewEvents,
+  allCalendars,
+  handleEditSubmit
+}) => {
   const toast = useToast();
   const theme = useTheme();
   const {
@@ -348,7 +366,7 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({ allEventTypes, yourEv
           maxWidth: 600
         }}
       >
-        {deniedEvent && (
+        {deniedEvent && yourConflictsDenied.length > 0 && (
           <Alert
             icon={<WarningIcon fontSize="inherit" sx={{ marginTop: 1 }} />}
             variant="filled"
@@ -390,7 +408,7 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({ allEventTypes, yourEv
             </Stack>
           </Alert>
         )}
-        {pendingEvent && (
+        {pendingEvent && yourConflicts.length > 0 && (
           <Alert
             icon={<WarningIcon fontSize="inherit" />}
             variant="filled"
@@ -408,7 +426,7 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({ allEventTypes, yourEv
             has been notified of this and must allow your event to take place in order to continue.
           </Alert>
         )}
-        {reviewEvent && (
+        {reviewEvent && yourReviewEvents.length > 0 && (
           <Alert
             icon={<WarningIcon fontSize="inherit" sx={{ marginTop: 1 }} />}
             variant="filled"
@@ -465,7 +483,6 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({ allEventTypes, yourEv
         <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between" sx={{ mt: 2, mb: 2 }}>
           <Typography variant="h4"></Typography>
           <Stack direction="row" spacing={1} alignItems="center" sx={{ flexWrap: 'wrap', columnGap: 1, rowGap: 1 }}>
-            {/* New Event Button (does not do anything yet) */}
             <Button
               variant="contained"
               disableElevation
@@ -536,6 +553,7 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({ allEventTypes, yourEv
                                 dayDict.get(datePipe(new Date(cardDate.getTime() + cardDate.getTimezoneOffset() * 60000))) ??
                                 DayOfWeek.SUNDAY
                               }
+                              handleEditSubmit={handleEditSubmit}
                             />
                           </Box>
                         </Grid>
diff --git a/src/frontend/src/pages/NewCalendarPage/SchedulingConflictsWarning.tsx b/src/frontend/src/pages/CalendarPage/SchedulingConflictsWarning.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/SchedulingConflictsWarning.tsx
rename to src/frontend/src/pages/CalendarPage/SchedulingConflictsWarning.tsx
diff --git a/src/frontend/src/pages/NewCalendarPage/UpcomingMeetingsCard.tsx b/src/frontend/src/pages/CalendarPage/UpcomingMeetingsCard.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/UpcomingMeetingsCard.tsx
rename to src/frontend/src/pages/CalendarPage/UpcomingMeetingsCard.tsx
diff --git a/src/frontend/src/pages/NewCalendarPage/YourEventsComponents/TableCellHuge.tsx b/src/frontend/src/pages/CalendarPage/YourEventsComponents/TableCellHuge.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/YourEventsComponents/TableCellHuge.tsx
rename to src/frontend/src/pages/CalendarPage/YourEventsComponents/TableCellHuge.tsx
diff --git a/src/frontend/src/pages/NewCalendarPage/YourEventsComponents/WarningTooltip.tsx b/src/frontend/src/pages/CalendarPage/YourEventsComponents/WarningTooltip.tsx
similarity index 100%
rename from src/frontend/src/pages/NewCalendarPage/YourEventsComponents/WarningTooltip.tsx
rename to src/frontend/src/pages/CalendarPage/YourEventsComponents/WarningTooltip.tsx
diff --git a/src/frontend/src/pages/NewCalendarPage/NewCalendar.tsx b/src/frontend/src/pages/NewCalendarPage/NewCalendar.tsx
deleted file mode 100644
index 1157349e31..0000000000
--- a/src/frontend/src/pages/NewCalendarPage/NewCalendar.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
- * See the LICENSE file in the repository root folder for details.
- */
-import { Route, Switch } from 'react-router-dom';
-import { routes } from '../../utils/routes';
-import CalendarTab from './CalendarTab';
-
-const NewCalendar: React.FC = () => {
-  return (
-    <Switch>
-      <Route path={routes.NEW_CALENDAR} component={CalendarTab} />
-    </Switch>
-  );
-};
-
-export default NewCalendar;
diff --git a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx
index bd0f39c29e..e4c270eb97 100644
--- a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx
+++ b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx
@@ -25,7 +25,6 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
   initialDate,
   canChangeDateRange = true
 }) => {
-  const existingMeetingData = new Map<number, { iconMap: Map<number, string> }>();
   const onCancel = () => {
     setConfirmedAvailabilities(new Map());
     onHide();
@@ -38,12 +37,11 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
       title={header}
       onSubmit={onSubmit}
       submitText="Save"
-      paperProps={{ maxWidth: '900px', maxHeight: '680px' }}
+      paperProps={{ maxWidth: '1200px', maxHeight: '680px' }}
     >
       <EditAvailability
         editedAvailabilities={confirmedAvailabilities}
         setEditedAvailabilities={setConfirmedAvailabilities}
-        existingMeetingData={existingMeetingData}
         totalAvailabilities={totalAvailabilities}
         canChangeDateRange={canChangeDateRange}
         initialDate={initialDate}
diff --git a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx
index b0619ba085..fcc4c8431c 100644
--- a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx
+++ b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx
@@ -1,16 +1,15 @@
-import { Grid, Typography } from '@mui/material';
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { HeatmapColors, enumToArray, REVIEW_TIMES, ExistingMeetingData } from '../../../../utils/design-review.utils';
-import TimeSlot from '../../../../components/TimeSlot';
+import { HeatmapColors, enumToArray, REVIEW_TIMES } from '../../../../utils/design-review.utils';
 import { addDaysToDate, Availability, getDayOfWeek, getMostRecentAvailabilities } from 'shared';
 import { datePipe } from '../../../../utils/pipes';
 import NERArrows from '../../../../components/NERArrows';
 import { NERButton } from '../../../../components/NERButton';
+import EventTimeSlot from '../../../CalendarPage/Components/EventTimeSlot';
 
 interface EditAvailabilityProps {
   editedAvailabilities: Map<number, Availability>;
   setEditedAvailabilities: (val: Map<number, Availability>) => void;
-  existingMeetingData: ExistingMeetingData;
   totalAvailabilities: Availability[];
   initialDate: Date;
   canChangeDateRange?: boolean;
@@ -20,28 +19,21 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
   editedAvailabilities,
   totalAvailabilities,
   setEditedAvailabilities,
-  existingMeetingData,
   initialDate,
   canChangeDateRange = true
 }) => {
   const [currentlyDisplayedAvailabilities, setCurrentlyDisplayedAvailabilities] = useState(() => {
     const availabilities = Array.from(editedAvailabilities.values());
     if (availabilities.length === 0) {
-      const defaultAvailabilities: Availability[] = [];
-      for (let i = 0; i < 7; i++) {
-        const date = addDaysToDate(initialDate, i);
-        defaultAvailabilities.push({
-          dateSet: date,
-          availability: []
-        });
-      }
+      // Load existing availabilities instead of creating empty ones
+      const existingForWeek = getMostRecentAvailabilities(totalAvailabilities, initialDate);
 
-      defaultAvailabilities.forEach((availability) => {
+      existingForWeek.forEach((availability) => {
         editedAvailabilities.set(availability.dateSet.getTime(), availability);
       });
       setEditedAvailabilities(editedAvailabilities);
 
-      return defaultAvailabilities;
+      return existingForWeek;
     }
     return availabilities;
   });
@@ -50,9 +42,7 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
 
   const handleMouseDown = (event: any, availability: Availability, selectedTime: number) => {
     event.preventDefault();
-
     toggleTimeSlot(availability, selectedTime);
-
     setIsDragging(true);
   };
 
@@ -119,62 +109,91 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
     setCurrentlyDisplayedAvailabilities(getMostRecentAvailabilities(Array.from(editedAvailabilities.values()), initialDate));
   };
 
+  const stickyLeft = {
+    position: 'sticky',
+    left: 0,
+    zIndex: 2,
+    bgcolor: 'background.paper'
+  };
+
   return (
-    <Grid container>
-      <Grid container justifyContent="space-between" mb={1}>
-        <Typography display={'flex'} justifyContent={'flex-start'} mt={1} variant="subtitle1">
-          Available times in green
-        </Typography>
-        <NERButton variant="outlined" sx={{ display: 'flex', justifyContent: 'flex-end' }} onClick={invertAvailabilities}>
+    <Box>
+      <Box display="flex" justifyContent="space-between" mb={2}>
+        <Typography variant="subtitle1">Available times in green</Typography>
+        <NERButton variant="outlined" onClick={invertAvailabilities}>
           Invert Availability
         </NERButton>
-      </Grid>
-      <TimeSlot backgroundColor={HeatmapColors[0]} widthOverride="106px" heightOverride="50px" />
-      {currentlyDisplayedAvailabilities.map((availability) => (
-        <TimeSlot
-          key={availability.dateSet.getTime()}
-          backgroundColor={HeatmapColors[0]}
-          widthOverride="106px"
-          heightOverride="50px"
-          text={
-            <Typography fontSize="15px" fontWeight="bold">
-              {getDayOfWeek(availability.dateSet)} <br /> {datePipe(availability.dateSet)}
-            </Typography>
-          }
-        />
-      ))}
-      {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
-        <Grid container item>
-          <TimeSlot
-            backgroundColor={HeatmapColors[0]}
-            widthOverride="106px"
-            heightOverride="32px"
-            text={time}
-            fontSize={'15px'}
-          />
-          {currentlyDisplayedAvailabilities.map((availability, dayIndex) => {
-            const backgroundColor = availability.availability.includes(timeIndex) ? HeatmapColors[3] : HeatmapColors[0];
-            return (
-              <TimeSlot
-                key={timeIndex * enumToArray(REVIEW_TIMES).length + dayIndex}
-                backgroundColor={backgroundColor}
-                widthOverride="106px"
-                heightOverride="32px"
-                onMouseDown={(e) => handleMouseDown(e, availability, timeIndex)}
-                onMouseEnter={(e) => handleMouseEnter(e, availability, timeIndex)}
-                onMouseUp={handleMouseUp}
-                icon={existingMeetingData.get(dayIndex)?.iconMap.get(timeIndex)}
-              />
-            );
-          })}
-        </Grid>
-      ))}
+      </Box>
+
+      <TableContainer
+        sx={{
+          overflowX: 'auto',
+          overflowY: 'auto',
+          maxWidth: '100%',
+          maxHeight: 500
+        }}
+      >
+        <Table
+          stickyHeader
+          sx={{
+            '& .MuiTableCell-head': {
+              bgcolor: 'background.paper'
+            },
+            '& .MuiTableCell-root': {
+              borderRight: '1px solid',
+              borderColor: 'divider'
+            },
+            minWidth: 800
+          }}
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell sx={stickyLeft}></TableCell>
+              {currentlyDisplayedAvailabilities.map((availability, idx) => (
+                <TableCell key={idx}>
+                  <Typography variant="body1" align="center" fontWeight="bold" sx={{ fontSize: 15 }}>
+                    {getDayOfWeek(availability.dateSet)}
+                    <br />
+                    {datePipe(availability.dateSet)}
+                  </Typography>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
+              <TableRow key={time}>
+                <TableCell sx={{ ...stickyLeft, zIndex: 1 }}>
+                  <Typography variant="body1" align="center" sx={{ fontSize: 15 }}>
+                    {time}
+                  </Typography>
+                </TableCell>
+                {currentlyDisplayedAvailabilities.map((availability, dayIndex) => {
+                  const isAvailable = availability.availability.includes(timeIndex);
+                  return (
+                    <TableCell key={dayIndex} sx={{ p: 0 }}>
+                      <EventTimeSlot
+                        backgroundColor={isAvailable ? HeatmapColors[3] : HeatmapColors[0]}
+                        selected={false}
+                        onMouseDown={(e) => handleMouseDown(e, availability, timeIndex)}
+                        onMouseEnter={(e) => handleMouseEnter(e, availability, timeIndex)}
+                        onMouseUp={handleMouseUp}
+                      />
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
       {canChangeDateRange && (
-        <Grid item xs={12}>
+        <Box display="flex" justifyContent="center" width="100%" mt={2}>
           <NERArrows onLeftArrowPressed={decreaseDateRange} onRightArrowPressed={increaseDateRange} />
-        </Grid>
+        </Box>
       )}
-    </Grid>
+    </Box>
   );
 };
 
diff --git a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityModal.tsx b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityModal.tsx
index 8ae9b966c9..3426338706 100644
--- a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityModal.tsx
+++ b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityModal.tsx
@@ -7,14 +7,27 @@ interface SingleAvailabilityModalProps {
   header: string;
   availabilites: Availability[];
   onHide: () => void;
+  initialDate?: Date;
 }
 
-const SingleAvailabilityModal: React.FC<SingleAvailabilityModalProps> = ({ open, onHide, header, availabilites }) => {
-  const existingMeetingData = new Map<number, { iconMap: Map<number, string> }>();
-
+const SingleAvailabilityModal: React.FC<SingleAvailabilityModalProps> = ({
+  open,
+  onHide,
+  header,
+  availabilites,
+  initialDate
+}) => {
   return (
-    <NERModal open={open} onHide={onHide} title={header} onSubmit={onHide} hideFormButtons showCloseButton>
-      <SingleAvailabilityView totalAvailability={availabilites} existingMeetingData={existingMeetingData} />
+    <NERModal
+      open={open}
+      onHide={onHide}
+      title={header}
+      onSubmit={onHide}
+      hideFormButtons
+      showCloseButton
+      paperProps={{ maxWidth: '1200px', maxHeight: '680px' }}
+    >
+      <SingleAvailabilityView totalAvailability={availabilites} initialDate={initialDate} />
     </NERModal>
   );
 };
diff --git a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityView.tsx b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityView.tsx
index 6ef266f6e5..638a1820a5 100644
--- a/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityView.tsx
+++ b/src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/SingleAvailabilityView.tsx
@@ -1,60 +1,107 @@
-import { Box, Grid } from '@mui/material';
-import { HeatmapColors, enumToArray, REVIEW_TIMES, ExistingMeetingData } from '../../../../utils/design-review.utils';
-import TimeSlot from '../../../../components/TimeSlot';
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
 import { Availability, getDayOfWeek, getMostRecentAvailabilities } from 'shared';
 import { datePipe } from '../../../../utils/pipes';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import NERArrows from '../../../../components/NERArrows';
+import { enumToArray, REVIEW_TIMES, getBackgroundColor } from '../../../../utils/design-review.utils';
+import EventTimeSlot from '../../../CalendarPage/Components/EventTimeSlot';
 
 interface SingleAvailabilityViewProps {
   totalAvailability: Availability[];
-  existingMeetingData: ExistingMeetingData;
+  initialDate?: Date;
 }
 
-const SingleAvailabilityView: React.FC<SingleAvailabilityViewProps> = ({ totalAvailability, existingMeetingData }) => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
+const SingleAvailabilityView: React.FC<SingleAvailabilityViewProps> = ({ totalAvailability, initialDate }) => {
+  const [startDate, setStartDate] = useState<Date>(initialDate || new Date());
+
+  useEffect(() => {
+    if (initialDate) {
+      setStartDate(initialDate);
+    }
+  }, [initialDate]);
+
   const selectedTimes = getMostRecentAvailabilities(totalAvailability, startDate);
 
   const onArrowIncrease = () => {
-    setStartDate(new Date(startDate.setDate(startDate.getDate() + 7)));
+    const newDate = new Date(startDate);
+    newDate.setDate(newDate.getDate() + 7);
+    setStartDate(newDate);
   };
 
   const onArrowDecrease = () => {
-    setStartDate(new Date(startDate.setDate(startDate.getDate() - 7)));
+    const newDate = new Date(startDate);
+    newDate.setDate(newDate.getDate() - 7);
+    setStartDate(newDate);
   };
+
+  const stickyLeft = {
+    position: 'sticky',
+    left: 0,
+    zIndex: 2,
+    bgcolor: 'background.paper'
+  };
+
   return (
-    <Grid container>
-      <TimeSlot backgroundColor={HeatmapColors[0]} small={true} heightOverride="40px" />
-      {selectedTimes.map((availability) => (
-        <TimeSlot
-          key={availability.dateSet.getTime()}
-          backgroundColor={HeatmapColors[0]}
-          small={true}
-          heightOverride="40px"
-          text={getDayOfWeek(availability.dateSet) + ' ' + datePipe(availability.dateSet)}
-          fontSize={'12px'}
-        />
-      ))}
-      {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
-        <Grid container item>
-          <TimeSlot backgroundColor={HeatmapColors[0]} small={true} text={time} fontSize={'13px'} />
-          {selectedTimes.map((availability, dayIndex) => {
-            const backgroundColor = availability.availability.includes(timeIndex) ? HeatmapColors[3] : HeatmapColors[0];
-            return (
-              <TimeSlot
-                key={timeIndex * enumToArray(REVIEW_TIMES).length + dayIndex}
-                backgroundColor={backgroundColor}
-                small={true}
-                icon={existingMeetingData.get(dayIndex)?.iconMap.get(timeIndex)}
-              />
-            );
-          })}
-        </Grid>
-      ))}
-      <Box display={'flex'} justifyContent={'space-around'} width={'100%'}>
+    <Box>
+      <TableContainer
+        sx={{
+          overflowX: 'auto',
+          overflowY: 'auto',
+          maxWidth: '100%',
+          maxHeight: 500
+        }}
+      >
+        <Table
+          stickyHeader
+          size="small"
+          sx={{
+            '& .MuiTableCell-head': {
+              bgcolor: 'background.paper'
+            },
+            minWidth: 800
+          }}
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell sx={stickyLeft}></TableCell>
+              {selectedTimes.map((availability, idx) => (
+                <TableCell key={idx}>
+                  <Typography variant="body2" align="center" sx={{ fontSize: 12 }}>
+                    {getDayOfWeek(availability.dateSet) + ' ' + datePipe(availability.dateSet)}
+                  </Typography>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
+              <TableRow key={time}>
+                <TableCell sx={{ ...stickyLeft, zIndex: 1 }}>
+                  <Typography variant="body2" align="center" sx={{ fontSize: 13 }}>
+                    {time}
+                  </Typography>
+                </TableCell>
+                {selectedTimes.map((availability, dayIndex) => {
+                  const isAvailable = availability.availability.includes(timeIndex);
+                  return (
+                    <TableCell key={dayIndex} sx={{ p: 0 }}>
+                      <EventTimeSlot
+                        backgroundColor={isAvailable ? getBackgroundColor(1, 1) : getBackgroundColor(0, 1)}
+                        selected={false}
+                        onClick={() => {}}
+                      />
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Box display="flex" justifyContent="center" width="100%" mt={2}>
         <NERArrows onRightArrowPressed={onArrowIncrease} onLeftArrowPressed={onArrowDecrease} />
       </Box>
-    </Grid>
+    </Box>
   );
 };
 
diff --git a/src/frontend/src/utils/calendar.utils.ts b/src/frontend/src/utils/calendar.utils.ts
index 42234691a6..debb7fe222 100644
--- a/src/frontend/src/utils/calendar.utils.ts
+++ b/src/frontend/src/utils/calendar.utils.ts
@@ -1,6 +1,6 @@
 import { DayOfWeek, Event } from 'shared';
 import { filterEventTransformer } from '../apis/transformers/calendar.transformer';
-import { EventFormValues } from '../pages/NewCalendarPage/Components/EventModal';
+import { EventFormValues } from '../pages/CalendarPage/Components/EventModal';
 
 export const convertDayToInt = (day: DayOfWeek) => {
   switch (day) {
diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts
index 636a86dd88..508ff4fed1 100644
--- a/src/frontend/src/utils/urls.ts
+++ b/src/frontend/src/utils/urls.ts
@@ -462,6 +462,7 @@ const calendarEditEventType = (eventTypeId: string) => `${calendar()}/event-type
 const calendarDeleteEventType = (eventTypeId: string) => `${calendar()}/event-type/${eventTypeId}/delete`;
 const calendarEventMarkUserConfirmed = (id: string) => `${calendar()}/event/${id}/confirm-schedule`;
 const calendarGetSingleEvent = (id: string) => `${calendar()}/event/${id}`;
+const calendarGetSingleEventWithMembers = (id: string) => `${calendar()}/event-members/${id}`;
 const calendarGetConflictingEvent = (id: string) => `${calendar()}/event/${id}/conflict`;
 const calendarDeleteEvent = (id: string) => `${calendar()}/event/${id}/delete`;
 const calendarEventSetStatus = (id: string) => `${calendar()}/event/${id}/set-status`;
@@ -786,6 +787,7 @@ export const apiUrls = {
   calendarEditShop,
   calendarEventMarkUserConfirmed,
   calendarGetSingleEvent,
+  calendarGetSingleEventWithMembers,
   calendarGetConflictingEvent,
   calendarEvents,
   calendarEventTypes,
diff --git a/src/shared/src/types/calendar-types.ts b/src/shared/src/types/calendar-types.ts
index fc8aefc452..a573ec5718 100644
--- a/src/shared/src/types/calendar-types.ts
+++ b/src/shared/src/types/calendar-types.ts
@@ -30,11 +30,29 @@ export interface TeamCalendarPreview {
   teamName: string;
 }
 
+export interface TeamWithMembers {
+  teamId: string;
+  teamName: string;
+  members: User[];
+  leads: User[];
+  head: User;
+}
+
 export interface TeamTypeCalendarPreview {
   teamTypeId: string;
   name: string;
 }
 
+export interface TeamTypeWithMembersCalendarPreview {
+  teamTypeId: string;
+  name: string;
+  teams: {
+    members: User[];
+    leads: User[];
+    head: User;
+  }[];
+}
+
 export interface WorkPackageCalendarPreview {
   workPackageId: string;
   wbsElement: {
@@ -211,3 +229,29 @@ export type EventPreview = {
   userCreated: User;
   wbsName: string;
 };
+
+export interface EventWithMembers {
+  eventId: string;
+  title: string;
+  approved: ConflictStatus;
+  userCreated: UserWithScheduleSettings;
+  dateCreated: Date;
+  eventTypeId: string;
+  approvalRequiredFrom?: User;
+  scheduledTimes: ScheduleSlot[];
+  requiredMembers: User[];
+  optionalMembers: User[];
+  confirmedMembers: UserWithScheduleSettings[];
+  deniedMembers: User[];
+  teams: TeamWithMembers[];
+  teamType?: TeamTypeWithMembersCalendarPreview;
+  location?: string;
+  zoomLink?: string;
+  shops: ShopPreview[];
+  machinery: MachineryPreview[];
+  workPackages: WorkPackageCalendarPreview[];
+  documents: Document[];
+  questionDocumentLink?: string;
+  description?: string;
+  status: EventStatus;
+}