diff --git a/media_commons_booking_app/src/client/routes/admin/components/Admin.tsx b/media_commons_booking_app/src/client/routes/admin/components/Admin.tsx
index cea5f0f5..6be3937e 100644
--- a/media_commons_booking_app/src/client/routes/admin/components/Admin.tsx
+++ b/media_commons_booking_app/src/client/routes/admin/components/Admin.tsx
@@ -114,7 +114,7 @@ export default function Admin() {
           {tab === 'adminUsers' && <AdminUsers />}
           {tab === 'paUsers' && <PAUsers />}
           {tab === 'liaesons' && <Liaisons />}
-          {tab === 'bookings' && <Bookings showNnumber={true} />}
+          {tab === 'bookings' && <Bookings isAdminView={true} />}
         </div>
       )}
     </div>
diff --git a/media_commons_booking_app/src/client/routes/admin/components/BookingActions.tsx b/media_commons_booking_app/src/client/routes/admin/components/BookingActions.tsx
index b1e682f0..9266ab71 100644
--- a/media_commons_booking_app/src/client/routes/admin/components/BookingActions.tsx
+++ b/media_commons_booking_app/src/client/routes/admin/components/BookingActions.tsx
@@ -1,40 +1,63 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useState } from 'react';
 
 import { BookingStatusLabel } from '../../../../types';
 import { DatabaseContext } from '../../components/Provider';
 import Loading from '../../../utils/Loading';
 import { serverFunctions } from '../../../utils/serverFunctions';
-import { useLocation } from 'react-router';
 
 interface Props {
   calendarEventId: string;
+  isAdminView: boolean;
+  isUserView: boolean;
+  setOptimisticStatus: (x: BookingStatusLabel) => void;
   status: BookingStatusLabel;
 }
 
-export default function BookingActions({ status, calendarEventId }: Props) {
-  const [loading, setLoading] = useState(false);
+export default function BookingActions({
+  status,
+  calendarEventId,
+  isAdminView,
+  isUserView,
+  setOptimisticStatus,
+}: Props) {
+  const [uiLoading, setUiLoading] = useState(false);
   const { reloadBookings, reloadBookingStatuses } = useContext(DatabaseContext);
 
-  const location = useLocation();
-  const isAdminPage = useMemo(() => location.pathname === '/admin', [location]);
-
   const reload = async () => {
     await Promise.all([reloadBookings(), reloadBookingStatuses()]);
   };
 
-  const ActionButton = (text: string, action: () => Promise<void>) => (
+  const onError = () => alert('Failed to perform action on booking');
+
+  const ActionButton = (
+    text: string,
+    action: () => Promise<void>,
+    optimisticNextStatus: BookingStatusLabel,
+    confirmation?: boolean
+  ) => (
     <button
       className="font-medium text-blue-600 dark:text-blue-500 hover:underline mr-2"
       onClick={async () => {
-        setLoading(true);
+        if (confirmation) {
+          const result = confirm(`Are you sure? This action can't be undone.`);
+          if (!result) {
+            return;
+          }
+        }
+        setUiLoading(true);
+        setOptimisticStatus(optimisticNextStatus);
         try {
-          await action();
-          await reload();
+          action()
+            .catch(() => {
+              onError();
+              setOptimisticStatus(undefined);
+            })
+            .finally(() => reload().then(() => setOptimisticStatus(undefined)));
         } catch (ex) {
           console.error(ex);
-          alert('Failed to perform action on booking');
+          onError();
         } finally {
-          setLoading(false);
+          setUiLoading(false);
         }
       }}
     >
@@ -42,7 +65,7 @@ export default function BookingActions({ status, calendarEventId }: Props) {
     </button>
   );
 
-  if (loading) {
+  if (uiLoading) {
     return (
       <td className="px-2 py-4 w-28">
         <Loading />
@@ -50,39 +73,87 @@ export default function BookingActions({ status, calendarEventId }: Props) {
     );
   }
 
-  const paBtns = (
-    <>
-      {status !== BookingStatusLabel.CHECKED_IN &&
-        ActionButton('Check In', () =>
-          serverFunctions.checkin(calendarEventId)
-        )}
-      {status !== BookingStatusLabel.NO_SHOW &&
-        ActionButton('No Show', () => serverFunctions.noShow(calendarEventId))}
-    </>
-  );
+  if (isUserView) {
+    if (status === BookingStatusLabel.CANCELED) {
+      return <td />;
+    }
+    return (
+      <td className="px-2 py-4 w-28">
+        <div className="flex flex-col items-start">
+          {ActionButton(
+            'Cancel',
+            () => serverFunctions.cancel(calendarEventId),
+            BookingStatusLabel.CANCELED,
+            true
+          )}
+        </div>
+      </td>
+    );
+  }
 
-  if (!isAdminPage) {
+  const paBtns = () => {
+    const checkInBtn = ActionButton(
+      'Check In',
+      () => serverFunctions.checkin(calendarEventId),
+      BookingStatusLabel.CHECKED_IN
+    );
+    const noShowBtn = ActionButton(
+      'No Show',
+      () => serverFunctions.noShow(calendarEventId),
+      BookingStatusLabel.NO_SHOW
+    );
+
+    if (status === BookingStatusLabel.APPROVED) {
+      return (
+        <>
+          {checkInBtn}
+          {noShowBtn}
+        </>
+      );
+    } else if (status === BookingStatusLabel.CHECKED_IN) {
+      return noShowBtn;
+    } else if (status === BookingStatusLabel.NO_SHOW) {
+      return checkInBtn;
+    }
+  };
+
+  if (!isAdminView) {
     return (
       <td className="px-2 py-4 w-28">
-        <div className="flex flex-col items-start">{paBtns}</div>
+        <div className="flex flex-col items-start">{paBtns()}</div>
       </td>
     );
   }
 
+  if (
+    status === BookingStatusLabel.CANCELED ||
+    status === BookingStatusLabel.REJECTED
+  ) {
+    return <td />;
+  }
+
   return (
-    <td className="px-2 py-4 w-36">
+    <td className="px-2 py-4 w-40">
       <div className="flex flex-col items-start">
         {status === BookingStatusLabel.PRE_APPROVED &&
-          ActionButton('2nd Approve', () =>
-            serverFunctions.approveBooking(calendarEventId)
+          ActionButton(
+            '2nd Approve',
+            () => serverFunctions.approveBooking(calendarEventId),
+            BookingStatusLabel.APPROVED
           )}
         {status === BookingStatusLabel.REQUESTED &&
-          ActionButton('1st Approve', () =>
-            serverFunctions.approveBooking(calendarEventId)
+          ActionButton(
+            '1st Approve',
+            () => serverFunctions.approveBooking(calendarEventId),
+            BookingStatusLabel.PRE_APPROVED
           )}
-        {ActionButton('Reject', () => serverFunctions.reject(calendarEventId))}
-        {ActionButton('Cancel', () => serverFunctions.cancel(calendarEventId))}
-        {paBtns}
+        {ActionButton(
+          'Reject',
+          () => serverFunctions.reject(calendarEventId),
+          BookingStatusLabel.REJECTED,
+          true
+        )}
+        {paBtns()}
       </div>
     </td>
   );
diff --git a/media_commons_booking_app/src/client/routes/admin/components/BookingTableRow.tsx b/media_commons_booking_app/src/client/routes/admin/components/BookingTableRow.tsx
new file mode 100644
index 00000000..31611e0d
--- /dev/null
+++ b/media_commons_booking_app/src/client/routes/admin/components/BookingTableRow.tsx
@@ -0,0 +1,101 @@
+import { Booking, BookingStatusLabel } from '../../../../types';
+import React, { useContext, useState } from 'react';
+
+import BookingActions from './BookingActions';
+import { DatabaseContext } from '../../components/Provider';
+import { formatDate } from '../../../utils/date';
+import getBookingStatus from '../hooks/getBookingStatus';
+
+interface Props {
+  booking: Booking;
+  isAdminView: boolean;
+  isUserView: boolean;
+}
+
+export default function BookingTableRow({
+  booking,
+  isAdminView,
+  isUserView,
+}: Props) {
+  const { bookingStatuses } = useContext(DatabaseContext);
+  const status = getBookingStatus(booking, bookingStatuses);
+
+  const [optimisticStatus, setOptimisticStatus] =
+    useState<BookingStatusLabel>();
+
+  return (
+    <tr className="">
+      <BookingActions
+        status={optimisticStatus ?? status}
+        calendarEventId={booking.calendarEventId}
+        {...{ setOptimisticStatus, isAdminView, isUserView }}
+      />
+      <td className="px-2 py-4 w-28">{optimisticStatus ?? status}</td>
+      <td className="px-2 py-4 w-36">{booking.roomId}</td>
+      <td scope="row" className="px-2 py-4 w-40 text-gray-900 dark:text-white">
+        <div className="pl-3 w-full">
+          <div className="flex flex-col">
+            <div className="text-base font-semibold">
+              {booking.firstName} {booking.lastName}
+            </div>
+            <div className="font-normal text-gray-500">{booking.email}</div>
+            <div className="font-normal text-gray-500">
+              {booking.phoneNumber}
+            </div>
+          </div>
+        </div>
+      </td>
+      <td className="px-2 py-4 w-40">
+        <div className=" flex items-center flex-col">
+          <div>{formatDate(booking.startDate)}</div>
+        </div>
+      </td>
+      <td className="px-2 py-4 w-40">
+        <div className=" flex items-center flex-col">
+          <div>{formatDate(booking.endDate)}</div>
+        </div>
+      </td>
+      <td className="px-2 py-4 w-36">{booking.secondaryName}</td>
+      {isAdminView && <td className="px-2 py-4 w-20">{booking.nNumber}</td>}
+      <td className="px-2 py-4 w-20">{booking.netId}</td>
+      <td className="px-2 py-4 w-36">{booking.department}</td>
+      <td className="px-2 py-4 w-20">{booking.role}</td>
+      <td className="px-2 py-4 w-24">
+        {booking.sponsorFirstName} {booking.sponsorLastName}
+      </td>
+      <td className="px-2 py-4 w-20">{booking.sponsorEmail}</td>
+      <td className="px-2 py-4 w-52 break-all">{booking.title}</td>
+      <td className="px-2 py-4 w-60 break-all">{booking.description}</td>
+      <td className="px-2 py-4 w-20">{booking.expectedAttendance}</td>
+      <td className="px-2 py-4 w-20">{booking.attendeeAffiliation}</td>
+      <td className="px-2 py-4 w-40">
+        {booking.roomSetup}
+        {booking.setupDetails && (
+          <>
+            <br />
+            <b>Details</b>
+            <br />
+            {booking.setupDetails}
+          </>
+        )}
+      </td>
+      <td className="px-2 py-4 w-24">{booking.chartFieldForRoomSetup}</td>
+      <td className="px-2 py-4 w-40">
+        {booking.mediaServices}
+        {booking.mediaServicesDetails && (
+          <>
+            <br />
+            <b>Details</b>
+            <br />
+            {booking.mediaServicesDetails}
+          </>
+        )}
+      </td>
+      <td className="px-2 py-4 w-18">{booking.catering}</td>
+      <td className="px-2 py-4 w-18">{booking.cateringService}</td>
+      <td className="px-2 py-4 w-24">{booking.chartFieldForCatering}</td>
+      <td className="px-2 py-4 w-18">{booking.hireSecurity}</td>
+      <td className="px-2 py-4 w-24">{booking.chartFieldForSecurity}</td>
+    </tr>
+  );
+}
diff --git a/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx b/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx
index c3c90347..f5806c05 100644
--- a/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx
+++ b/media_commons_booking_app/src/client/routes/admin/components/Bookings.tsx
@@ -1,12 +1,13 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
-import BookingActions from './BookingActions';
+import { BookingStatusLabel } from '../../../../types';
+import BookingTableRow from './BookingTableRow';
 import { DatabaseContext } from '../../components/Provider';
-import { formatDate } from '../../../utils/date';
 import getBookingStatus from '../hooks/getBookingStatus';
 
 interface BookingsProps {
-  showNnumber: boolean;
+  isAdminView?: boolean;
+  isPaView?: boolean;
   isUserView?: boolean;
 }
 
@@ -17,14 +18,35 @@ const TableHeader = (text: string) => (
 );
 
 export const Bookings: React.FC<BookingsProps> = ({
-  showNnumber = false,
+  isAdminView = false,
+  isPaView = false,
   isUserView = false,
 }) => {
-  const { bookings, bookingStatuses, userEmail } = useContext(DatabaseContext);
+  const {
+    bookings,
+    bookingStatuses,
+    userEmail,
+    reloadBookings,
+    reloadBookingStatuses,
+  } = useContext(DatabaseContext);
+
+  useEffect(() => {
+    reloadBookingStatuses();
+    reloadBookings();
+  }, []);
 
   const filteredBookings = useMemo(() => {
+    const paViewStatuses = [
+      BookingStatusLabel.APPROVED,
+      BookingStatusLabel.CHECKED_IN,
+      BookingStatusLabel.NO_SHOW,
+    ];
     if (isUserView)
       return bookings.filter((booking) => booking.email === userEmail);
+    if (isPaView)
+      return bookings.filter((booking) =>
+        paViewStatuses.includes(getBookingStatus(booking, bookingStatuses))
+      );
     return bookings;
   }, [isUserView, bookings]);
 
@@ -34,16 +56,15 @@ export const Bookings: React.FC<BookingsProps> = ({
         <table className="w-[2500px] text-sm text-left text-gray-500 dark:text-gray-400">
           <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr>
-              {!isUserView && TableHeader('Action')}
+              {TableHeader('Action')}
               {TableHeader('Status')}
               {TableHeader('Room ID')}
               {TableHeader('Contact')}
               {TableHeader('Booking Start')}
               {TableHeader('Booking End')}
               {TableHeader('Secondary Name')}
-              {showNnumber && TableHeader('N Number')}
+              {isAdminView && TableHeader('N Number')}
               {TableHeader('Net ID')}
-              {/* {TableHeader('Phone Number')} */}
               {TableHeader('Department')}
               {TableHeader('Role')}
               {TableHeader('Sponsor Name')}
@@ -63,105 +84,12 @@ export const Bookings: React.FC<BookingsProps> = ({
             </tr>
           </thead>
           <tbody>
-            {filteredBookings.map((booking, index) => {
-              const status = getBookingStatus(booking, bookingStatuses);
-              return (
-                <tr key={index} className="">
-                  {!isUserView && (
-                    <BookingActions
-                      status={status}
-                      calendarEventId={booking.calendarEventId}
-                    />
-                  )}
-                  <td className="px-2 py-4 w-24">{status}</td>
-                  <td className="px-2 py-4 w-36">{booking.roomId}</td>
-                  <td
-                    scope="row"
-                    className="px-2 py-4 w-40 text-gray-900 dark:text-white"
-                  >
-                    <div className="pl-3 w-full">
-                      <div className="flex flex-col">
-                        <div className="text-base font-semibold">
-                          {booking.firstName} {booking.lastName}
-                        </div>
-                        <div className="font-normal text-gray-500">
-                          {booking.email}
-                        </div>
-                        <div className="font-normal text-gray-500">
-                          {booking.phoneNumber}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-2 py-4 w-40">
-                    <div className=" flex items-center flex-col">
-                      <div>{formatDate(booking.startDate)}</div>
-                    </div>
-                  </td>
-                  <td className="px-2 py-4 w-40">
-                    <div className=" flex items-center flex-col">
-                      <div>{formatDate(booking.endDate)}</div>
-                    </div>
-                  </td>
-                  <td className="px-2 py-4 w-36">{booking.secondaryName}</td>
-                  {showNnumber && (
-                    <td className="px-2 py-4 w-20">{booking.nNumber}</td>
-                  )}
-                  <td className="px-2 py-4 w-20">{booking.netId}</td>
-                  {/* <td className="px-2 py-4 w-20">{booking.phoneNumber}</td> */}
-                  <td className="px-2 py-4 w-36">{booking.department}</td>
-                  <td className="px-2 py-4 w-20">{booking.role}</td>
-                  <td className="px-2 py-4 w-24">
-                    {booking.sponsorFirstName} {booking.sponsorLastName}
-                  </td>
-                  <td className="px-2 py-4 w-20">{booking.sponsorEmail}</td>
-                  <td className="px-2 py-4 w-52 break-all">{booking.title}</td>
-                  <td className="px-2 py-4 w-60 break-all">
-                    {booking.description}
-                  </td>
-                  <td className="px-2 py-4 w-20">
-                    {booking.expectedAttendance}
-                  </td>
-                  <td className="px-2 py-4 w-20">
-                    {booking.attendeeAffiliation}
-                  </td>
-                  <td className="px-2 py-4 w-40">
-                    {booking.roomSetup}
-                    {booking.setupDetails && (
-                      <>
-                        <br />
-                        <b>Details</b>
-                        <br />
-                        {booking.setupDetails}
-                      </>
-                    )}
-                  </td>
-                  <td className="px-2 py-4 w-24">
-                    {booking.chartFieldForRoomSetup}
-                  </td>
-                  <td className="px-2 py-4 w-40">
-                    {booking.mediaServices}
-                    {booking.mediaServicesDetails && (
-                      <>
-                        <br />
-                        <b>Details</b>
-                        <br />
-                        {booking.mediaServicesDetails}
-                      </>
-                    )}
-                  </td>
-                  <td className="px-2 py-4 w-18">{booking.catering}</td>
-                  <td className="px-2 py-4 w-18">{booking.cateringService}</td>
-                  <td className="px-2 py-4 w-24">
-                    {booking.chartFieldForCatering}
-                  </td>
-                  <td className="px-2 py-4 w-18">{booking.hireSecurity}</td>
-                  <td className="px-2 py-4 w-24">
-                    {booking.chartFieldForSecurity}
-                  </td>
-                </tr>
-              );
-            })}
+            {filteredBookings.map((booking, index) => (
+              <BookingTableRow
+                key={index}
+                {...{ booking, isAdminView, isUserView }}
+              />
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts b/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts
index fe7fb9e6..a004686b 100644
--- a/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts
+++ b/media_commons_booking_app/src/client/routes/admin/hooks/getBookingStatus.ts
@@ -8,14 +8,38 @@ export default function getBookingStatus(
     const bookingStatusMatch = bookingStatuses.filter(
       (row) => row.calendarEventId === booking.calendarEventId
     )[0];
+
     if (bookingStatusMatch === undefined) return BookingStatusLabel.UNKNOWN;
-    if (bookingStatusMatch.checkedInAt !== '') {
-      return BookingStatusLabel.CHECKED_IN;
-    } else if (bookingStatusMatch.noShowedAt !== '') {
-      return BookingStatusLabel.NO_SHOW;
-    } else if (bookingStatusMatch.canceledAt !== '') {
-      return BookingStatusLabel.CANCELED;
-    } else if (bookingStatusMatch.rejectedAt !== '') {
+
+    const timeStringtoDate = (time: string) =>
+      time.length > 0 ? new Date(time) : new Date(0);
+
+    const checkedInTimestamp = timeStringtoDate(bookingStatusMatch.checkedInAt);
+    const noShowTimestamp = timeStringtoDate(bookingStatusMatch.noShowedAt);
+    const canceledTimestamp = timeStringtoDate(bookingStatusMatch.canceledAt);
+
+    // if any of checkedInAt, noShowedAt, canceledAt have a date, return the most recent
+    if (
+      checkedInTimestamp.getTime() !== 0 ||
+      noShowTimestamp.getTime() !== 0 ||
+      canceledTimestamp.getTime() !== 0
+    ) {
+      let mostRecentTimestamp: Date = checkedInTimestamp;
+      let label = BookingStatusLabel.CHECKED_IN;
+
+      if (noShowTimestamp > mostRecentTimestamp) {
+        mostRecentTimestamp = noShowTimestamp;
+        label = BookingStatusLabel.NO_SHOW;
+      }
+
+      if (canceledTimestamp > mostRecentTimestamp) {
+        mostRecentTimestamp = canceledTimestamp;
+        label = BookingStatusLabel.CANCELED;
+      }
+      return label;
+    }
+
+    if (bookingStatusMatch.rejectedAt !== '') {
       return BookingStatusLabel.REJECTED;
     } else if (bookingStatusMatch.secondApprovedAt !== '') {
       return BookingStatusLabel.APPROVED;
diff --git a/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx b/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx
index db872a36..e2029ea1 100644
--- a/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx
+++ b/media_commons_booking_app/src/client/routes/booking/components/Calendars.tsx
@@ -5,6 +5,7 @@ import { DateSelectArg } from '@fullcalendar/core';
 import { RoomCalendar } from './RoomCalendar';
 import { RoomSetting } from '../../../../types';
 import { formatDate } from '../../../utils/date';
+import { HIDING_STATUS } from '../../../../policy';
 
 type CalendarProps = {
   allRooms: RoomSetting[];
@@ -29,6 +30,9 @@ export const Calendars = ({
       const allEvents = calendarApi.getEvents();
       return allEvents.some((event) => {
         if (event.title.includes(TITLE_TAG)) return false;
+        if (HIDING_STATUS.some((status) => event.title.includes(status)))
+          return false;
+
         return (
           (event.start >= info.start && event.start < info.end) ||
           (event.end > info.start && event.end <= info.end) ||
diff --git a/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx b/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx
index 47febc80..a6aa8892 100644
--- a/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx
+++ b/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx
@@ -518,14 +518,18 @@ const FormInput = ({ handleParentSubmit }) => {
           <ErrorMessage errors={errors.mediaServices.message} />
         )}
         <div className="flex flex-col mb-4">
-          <label key={'checkoutEquipment'}>
-            <input
-              type="checkbox"
-              value="Checkout equipment"
-              {...register('mediaServices')}
-            />
-            Checkout equipment
-          </label>
+          {roomNumber.some((room) =>
+            [103, 220, 221, 222, 223, 224, 230, 233, 260].includes(Number(room))
+          ) && (
+            <label key={'checkoutEquipment'}>
+              <input
+                type="checkbox"
+                value="Checkout equipment"
+                {...register('mediaServices')}
+              />
+              Checkout equipment
+            </label>
+          )}
           {roomNumber.includes('103') && (
             <label key={'103audioTechnician'}>
               <input
@@ -568,18 +572,17 @@ const FormInput = ({ handleParentSubmit }) => {
               (For 220-224) Using DMX lights in ceiling grid
             </label>
           )}
-          {roomNumber.includes('202') ||
-            (roomNumber.includes('1201') && (
-              <label key={'support'}>
-                <input
-                  type="checkbox"
-                  value="(For 202 and 1201) Contact Campus Media for technical and event support"
-                  {...register('mediaServices')}
-                />
-                (For 202 and 1201) Contact Campus Media for technical and event
-                support
-              </label>
-            ))}
+          {roomNumber.some((room) => [202, 1201].includes(Number(room))) && (
+            <label key={'support'}>
+              <input
+                type="checkbox"
+                value="(For 202 and 1201) Contact Campus Media for technical and event support"
+                {...register('mediaServices')}
+              />
+              (For 202 and 1201) Contact Campus Media if you need to check out
+              equipment or need technical and/or event support.
+            </label>
+          )}
         </div>
       </div>
       {watch('mediaServices') !== undefined &&
diff --git a/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx b/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx
index 35a57f6f..f8d69851 100644
--- a/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx
+++ b/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx
@@ -12,6 +12,7 @@ import googleCalendarPlugin from '@fullcalendar/google-calendar';
 import interactionPlugin from '@fullcalendar/interaction'; // for selectable
 import { serverFunctions } from '../../../utils/serverFunctions';
 import timeGridPlugin from '@fullcalendar/timegrid'; // a plugin!
+import { HIDING_STATUS } from '../../../../policy';
 
 const TITLE_TAG = '[Click to Delete]';
 
@@ -47,9 +48,49 @@ export const RoomCalendar = ({
     );
   }, []);
 
+  function renderEventContent(eventInfo) {
+    const match = eventInfo.event.title.match(/\[(.*?)\]/);
+    const title = match ? match[1] : eventInfo.event.title;
+
+    const startTime = new Intl.DateTimeFormat('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(eventInfo.event.start);
+    const endTime = new Intl.DateTimeFormat('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(eventInfo.event.end);
+
+    let backgroundColor = '';
+    // Change the background color of the event depending on its title
+    if (eventInfo.event.title.includes(BookingStatusLabel.REQUESTED)) {
+      backgroundColor = '#d60000';
+    } else if (
+      eventInfo.event.title.includes(BookingStatusLabel.PRE_APPROVED)
+    ) {
+      backgroundColor = '#f6c026';
+    } else if (eventInfo.event.title.includes(BookingStatusLabel.APPROVED)) {
+      backgroundColor = '#33b679';
+    }
+    return (
+      <div
+        style={{
+          backgroundColor: backgroundColor,
+          height: '100%',
+          width: '100%',
+        }}
+      >
+        <b>{title}</b>
+      </div>
+    );
+  }
+
   const fetchCalendarEvents = async (calendarId) => {
     serverFunctions.getCalendarEvents(calendarId).then((rows) => {
-      setEvents(rows);
+      const filteredEvents = rows.filter((row) => {
+        return !HIDING_STATUS.some((status) => row.title.includes(status));
+      });
+      setEvents(filteredEvents);
     });
   };
 
@@ -142,32 +183,7 @@ export const RoomCalendar = ({
           right: '',
         }}
         themeSystem="bootstrap5"
-        eventDidMount={function (info) {
-          // Change the title status only
-          const match = info.event.title.match(/\[(.*?)\]/);
-          if (match) {
-            let el = info.el.querySelector('.fc-event-title');
-            if (el != null) {
-              el.textContent = match[1];
-            }
-          }
-          // Change the background color of the event depending on its title
-          if (info.event.title.includes(BookingStatusLabel.REQUESTED)) {
-            info.el.style.backgroundColor = '#d60000';
-          } else if (
-            info.event.title.includes(BookingStatusLabel.PRE_APPROVED)
-          ) {
-            info.el.style.backgroundColor = '#f6c026';
-          } else if (info.event.title.includes(BookingStatusLabel.APPROVED)) {
-            info.el.style.backgroundColor = '#33b679';
-          } else if (info.event.title.includes(BookingStatusLabel.REJECTED)) {
-            info.el.style.display = 'none';
-          } else if (info.event.title.includes(BookingStatusLabel.CANCELED)) {
-            info.el.style.display = 'none';
-          } else if (info.event.title.includes(BookingStatusLabel.NO_SHOW)) {
-            info.el.style.display = 'none';
-          }
-        }}
+        eventContent={renderEventContent}
         editable={true}
         initialView={selectedRooms.length > 1 ? 'timeGridDay' : 'timeGridDay'}
         navLinks={true}
diff --git a/media_commons_booking_app/src/client/routes/components/AddEmail.tsx b/media_commons_booking_app/src/client/routes/components/AddEmail.tsx
index c8e8697e..03e08f99 100644
--- a/media_commons_booking_app/src/client/routes/components/AddEmail.tsx
+++ b/media_commons_booking_app/src/client/routes/components/AddEmail.tsx
@@ -19,7 +19,7 @@ export default function AddEmail<T extends EmailField>({
   userList,
   userListRefresh,
 }: Props<T>) {
-  const [emailToAdd, setEmailToAdd] = useState<string | undefined>();
+  const [emailToAdd, setEmailToAdd] = useState<string>('');
   const [loading, setLoading] = useState(false);
 
   const userEmails = useMemo<string[]>(
@@ -28,7 +28,7 @@ export default function AddEmail<T extends EmailField>({
   );
 
   const addUser = async () => {
-    if (!emailToAdd) return;
+    if (!emailToAdd || emailToAdd.length === 0) return;
 
     if (userEmails.includes(emailToAdd)) {
       alert('This user is already registered');
diff --git a/media_commons_booking_app/src/client/routes/components/EmailListTable.tsx b/media_commons_booking_app/src/client/routes/components/EmailListTable.tsx
index 12e5d5a2..8d8fa440 100644
--- a/media_commons_booking_app/src/client/routes/components/EmailListTable.tsx
+++ b/media_commons_booking_app/src/client/routes/components/EmailListTable.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
-import Loading from '../../utils/Loading';
+import EmailListTableRow from './EmailListTableRow';
 import { TableNames } from '../../../policy';
 // This is a wrapper for google.script.run that lets us use promises.
 import { serverFunctions } from '../../utils/serverFunctions';
@@ -20,8 +20,6 @@ export default function EmailListTable<T extends EmailField>(props: Props<T>) {
   const refresh = props.userListRefresh;
   const columnFormatters = props.columnFormatters || {};
 
-  const [loading, setLoading] = useState(false);
-
   const columnNames = useMemo<string[]>(() => {
     if (props.userList.length === 0) {
       return [];
@@ -29,23 +27,6 @@ export default function EmailListTable<T extends EmailField>(props: Props<T>) {
     return Object.keys(props.userList[0]) as Array<keyof T> as string[];
   }, [props.userList]);
 
-  const onRemove = async (user: T) => {
-    setLoading(true);
-    try {
-      await serverFunctions.removeFromListByEmail(props.tableName, user.email);
-      await refresh();
-    } catch (ex) {
-      console.error(ex);
-      alert('Failed to remove user');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (loading) {
-    return <Loading />;
-  }
-
   if (props.userList.length === 0) {
     return <p className="p-4">No results</p>;
   }
@@ -68,31 +49,18 @@ export default function EmailListTable<T extends EmailField>(props: Props<T>) {
             </tr>
           </thead>
           <tbody>
-            {props.userList.map((user, index: number) => {
-              return (
-                <tr
-                  key={index}
-                  className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
-                >
-                  {/* all column values */}
-                  {columnNames.map((columnName, idx) => (
-                    <td className="px-2 py-4 w-36" key={idx}>
-                      {columnFormatters[columnName]
-                        ? columnFormatters[columnName](user[columnName])
-                        : user[columnName]}
-                    </td>
-                  ))}
-                  <td className="px-2 py-4 w-36">
-                    <button
-                      className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-                      onClick={() => onRemove(user)}
-                    >
-                      Remove
-                    </button>
-                  </td>
-                </tr>
-              );
-            })}
+            {props.userList.map((user, index: number) => (
+              <EmailListTableRow
+                key={index}
+                removeUser={() =>
+                  serverFunctions.removeFromListByEmail(
+                    props.tableName,
+                    user.email
+                  )
+                }
+                {...{ columnNames, columnFormatters, index, user, refresh }}
+              />
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/media_commons_booking_app/src/client/routes/components/EmailListTableRow.tsx b/media_commons_booking_app/src/client/routes/components/EmailListTableRow.tsx
new file mode 100644
index 00000000..f2368ec1
--- /dev/null
+++ b/media_commons_booking_app/src/client/routes/components/EmailListTableRow.tsx
@@ -0,0 +1,88 @@
+import React, { useMemo, useState } from 'react';
+
+import Loading from '../../utils/Loading';
+import { TableNames } from '../../../policy';
+// This is a wrapper for google.script.run that lets us use promises.
+import { serverFunctions } from '../../utils/serverFunctions';
+
+interface EmailField {
+  email: string;
+}
+
+interface Props<T extends EmailField> {
+  columnFormatters?: { [key: string]: (value: string) => string };
+  columnNames: string[];
+  index: number;
+  refresh: () => Promise<void>;
+  removeUser: () => Promise<void>;
+  user: T;
+}
+
+export default function EmailListTableRow<T extends EmailField>(
+  props: Props<T>
+) {
+  const { columnFormatters, columnNames, index, refresh, removeUser, user } =
+    props;
+  const [uiLoading, setUiLoading] = useState(false);
+  const [isRemoved, setIsRemoved] = useState(false);
+
+  const onError = () => {
+    alert('Failed to remove user: ' + user.email);
+  };
+
+  /**
+   * Google Sheets API writes are slow.
+   * To avoid UI lag, assume write will succeed and optimistically remove UI element before response completes.
+   * If write fails, alert the user and restore UI.
+   * Only devs should see this error behavior unless something is very broken
+   */
+  const onRemove = async () => {
+    setUiLoading(true);
+    setIsRemoved(true); // optimistically hide component
+    try {
+      removeUser()
+        .catch(() => {
+          onError();
+          setIsRemoved(false);
+        })
+        .finally(refresh);
+    } catch (ex) {
+      console.error(ex);
+      onError();
+    } finally {
+      setUiLoading(false);
+    }
+  };
+
+  if (uiLoading) {
+    return <Loading />;
+  }
+
+  if (isRemoved) {
+    return null;
+  }
+
+  return (
+    <tr
+      key={index}
+      className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+    >
+      {/* all column values */}
+      {columnNames.map((columnName, idx) => (
+        <td className="px-2 py-4 w-36" key={idx}>
+          {columnFormatters[columnName]
+            ? columnFormatters[columnName](user[columnName])
+            : user[columnName]}
+        </td>
+      ))}
+      <td className="px-2 py-4 w-36">
+        <button
+          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+          onClick={onRemove}
+        >
+          Remove
+        </button>
+      </td>
+    </tr>
+  );
+}
diff --git a/media_commons_booking_app/src/client/routes/components/Provider.tsx b/media_commons_booking_app/src/client/routes/components/Provider.tsx
index 62e011d4..363d8346 100644
--- a/media_commons_booking_app/src/client/routes/components/Provider.tsx
+++ b/media_commons_booking_app/src/client/routes/components/Provider.tsx
@@ -94,6 +94,13 @@ export const DatabaseProvider = ({ children }) => {
       fetchLiaisonUsers();
       fetchRoomSettings();
     });
+
+    // refresh booking data every 10s;
+    setInterval(() => {
+      console.log('UPDATING');
+      fetchBookings();
+      fetchBookingStatuses();
+    }, 10000);
   }, []);
 
   const fetchActiveUserEmail = () => {
diff --git a/media_commons_booking_app/src/client/routes/myBookings/myBookingsPage.tsx b/media_commons_booking_app/src/client/routes/myBookings/myBookingsPage.tsx
index 5c2d7962..d1e1346d 100644
--- a/media_commons_booking_app/src/client/routes/myBookings/myBookingsPage.tsx
+++ b/media_commons_booking_app/src/client/routes/myBookings/myBookingsPage.tsx
@@ -2,5 +2,5 @@ import { Bookings } from '../admin/components/Bookings';
 import React from 'react';
 
 export default function MyBookingsPage() {
-  return <Bookings isUserView={true} showNnumber={false} />;
+  return <Bookings isUserView={true} />;
 }
diff --git a/media_commons_booking_app/src/client/routes/pa/PAPage.tsx b/media_commons_booking_app/src/client/routes/pa/PAPage.tsx
index 32c83d07..d47eb072 100644
--- a/media_commons_booking_app/src/client/routes/pa/PAPage.tsx
+++ b/media_commons_booking_app/src/client/routes/pa/PAPage.tsx
@@ -59,7 +59,7 @@ const PAPage = () => {
             </li>
           </ul>
           {tab === 'safety_training' && <SafetyTrainedUsers />}
-          {tab === 'bookings' && <Bookings showNnumber={false} />}
+          {tab === 'bookings' && <Bookings isPaView={true} />}
         </div>
       )}
     </div>
diff --git a/media_commons_booking_app/src/policy.ts b/media_commons_booking_app/src/policy.ts
index e00c26e3..044575f1 100644
--- a/media_commons_booking_app/src/policy.ts
+++ b/media_commons_booking_app/src/policy.ts
@@ -1,6 +1,6 @@
 /********** GOOGLE SHEETS ************/
 
-import { DevBranch } from './types';
+import { BookingStatusLabel, DevBranch } from './types';
 
 /** ACTIVE master Google Sheet  */
 export const ACTIVE_SHEET_ID = '1MnWbn6bvNyMiawddtYYx0tRW4NMgvugl0I8zBO3sy68';
@@ -79,3 +79,9 @@ export const SAFETY_TRAINING_REQUIRED_ROOM = [
 ];
 
 export const INSTANT_APPROVAL_ROOMS = ['221', '222', '223', '224', '233'];
+
+export const HIDING_STATUS = [
+  BookingStatusLabel.NO_SHOW,
+  BookingStatusLabel.CANCELED,
+  BookingStatusLabel.REJECTED,
+];
diff --git a/media_commons_booking_app/src/server/emails.ts b/media_commons_booking_app/src/server/emails.ts
index af8169b5..31d37d4f 100644
--- a/media_commons_booking_app/src/server/emails.ts
+++ b/media_commons_booking_app/src/server/emails.ts
@@ -7,7 +7,10 @@ export const sendTextEmail = (
   body: string
 ) => {
   const subj = `${status}: Media Commons request for \"${eventTitle}\"`;
-  GmailApp.sendEmail(targetEmail, subj, body);
+  const options = {
+    replyTo: 'mediacommons.reservations@nyu.edu',
+  };
+  GmailApp.sendEmail(targetEmail, subj, body, options);
 };
 
 const getEmailBranchTag = () => {
@@ -29,7 +32,6 @@ export const sendHTMLEmail = (
   eventTitle: string,
   body
 ) => {
-  console.log('contents', contents);
   const subj = `${getEmailBranchTag()}${status}: Media Commons request for \"${eventTitle}\"`;
   const htmlTemplate = HtmlService.createTemplateFromFile(templateName);
   for (const key in contents) {
@@ -38,6 +40,7 @@ export const sendHTMLEmail = (
   const htmlBody = htmlTemplate.evaluate().getContent();
   const options = {
     htmlBody,
+    replyTo: 'mediacommons.reservations@nyu.edu',
   };
   GmailApp.sendEmail(targetEmail, subj, body, options);
 };