diff --git a/booking-app/components/src/client/routes/booking/bookingProvider.tsx b/booking-app/components/src/client/routes/booking/bookingProvider.tsx
index 6cf1e509..b3224014 100644
--- a/booking-app/components/src/client/routes/booking/bookingProvider.tsx
+++ b/booking-app/components/src/client/routes/booking/bookingProvider.tsx
@@ -17,7 +17,6 @@ import { usePathname } from "next/navigation";
 export interface BookingContextType {
   bookingCalendarInfo: DateSelectArg | undefined;
   department: Department | undefined;
-  otherDepartment: string | undefined;
   existingCalendarEvents: CalendarEvent[];
   formData: Inputs | undefined;
   hasShownMocapModal: boolean;
@@ -29,7 +28,6 @@ export interface BookingContextType {
   selectedRooms: RoomSetting[];
   setBookingCalendarInfo: (x: DateSelectArg) => void;
   setDepartment: (x: Department) => void;
-  setOtherDepartment: (x: string) => void;
   setFormData: (x: Inputs) => void;
   setHasShownMocapModal: (x: boolean) => void;
   setRole: (x: Role) => void;
@@ -41,7 +39,6 @@ export interface BookingContextType {
 export const BookingContext = createContext<BookingContextType>({
   bookingCalendarInfo: undefined,
   department: undefined,
-  otherDepartment: undefined,
   existingCalendarEvents: [],
   formData: undefined,
   hasShownMocapModal: false,
@@ -53,7 +50,6 @@ export const BookingContext = createContext<BookingContextType>({
   selectedRooms: [],
   setBookingCalendarInfo: (x: DateSelectArg) => {},
   setDepartment: (x: Department) => {},
-  setOtherDepartment: (x: string) => {},
   setFormData: (x: Inputs) => {},
   setHasShownMocapModal: (x: boolean) => {},
   setRole: (x: Role) => {},
@@ -70,7 +66,6 @@ export function BookingProvider({ children }) {
   const [bookingCalendarInfo, setBookingCalendarInfo] =
     useState<DateSelectArg>();
   const [department, setDepartment] = useState<Department>();
-  const [otherDepartment, setOtherDepartment] = useState<string>();
   const [formData, setFormData] = useState<Inputs>(undefined);
   const [hasShownMocapModal, setHasShownMocapModal] = useState(false);
   const [role, setRole] = useState<Role>();
@@ -115,7 +110,6 @@ export function BookingProvider({ children }) {
       value={{
         bookingCalendarInfo,
         department,
-        otherDepartment,
         existingCalendarEvents,
         reloadExistingCalendarEvents,
         formData,
@@ -127,7 +121,6 @@ export function BookingProvider({ children }) {
         selectedRooms,
         setBookingCalendarInfo,
         setDepartment,
-        setOtherDepartment,
         setFormData,
         setHasShownMocapModal,
         setRole,
diff --git a/booking-app/components/src/client/routes/booking/components/BookingFormInputs.tsx b/booking-app/components/src/client/routes/booking/components/BookingFormInputs.tsx
index 9893eb80..2f79a41b 100644
--- a/booking-app/components/src/client/routes/booking/components/BookingFormInputs.tsx
+++ b/booking-app/components/src/client/routes/booking/components/BookingFormInputs.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Checkbox,
   FormControl,
   FormControlLabel,
@@ -107,6 +108,8 @@ interface TextFieldProps extends Props {
   description?: React.ReactNode;
   pattern?: ValidationRule<RegExp>;
   validate?: any;
+  containerSx?: any;
+  fieldSx?: any;
 }
 
 export function BookingFormTextField(props: TextFieldProps) {
@@ -120,6 +123,8 @@ export function BookingFormTextField(props: TextFieldProps) {
     control,
     errors,
     trigger,
+    containerSx,
+    fieldSx,
   } = props;
 
   return (
@@ -137,7 +142,7 @@ export function BookingFormTextField(props: TextFieldProps) {
         pattern,
       }}
       render={({ field }) => (
-        <div>
+        <Box sx={containerSx}>
           <Label htmlFor={id}>{`${label}${required ? "*" : ""}`}</Label>
           {description && <p style={{ fontSize: "0.75rem" }}>{description}</p>}
           <TextField
@@ -146,10 +151,10 @@ export function BookingFormTextField(props: TextFieldProps) {
             error={errors[id] != null}
             helperText={errors[id]?.message}
             onBlur={() => trigger(id)}
-            sx={{ marginBottom: 4 }}
+            sx={fieldSx ?? { marginBottom: 4 }}
             fullWidth
           />
-        </div>
+        </Box>
       )}
     ></Controller>
   );
diff --git a/booking-app/components/src/client/routes/booking/components/FormInput.tsx b/booking-app/components/src/client/routes/booking/components/FormInput.tsx
index 8ccc59b9..47e39559 100644
--- a/booking-app/components/src/client/routes/booking/components/FormInput.tsx
+++ b/booking-app/components/src/client/routes/booking/components/FormInput.tsx
@@ -101,10 +101,11 @@ export default function FormInput({ calendarEventId, formContext }: Props) {
       roomSetup: "no",
       bookingType: "",
       secondaryName: "",
+      otherDepartment: "",
+      ...formData, // restore answers if navigating between form pages
       // copy department + role from earlier in form
       department,
       role,
-      ...formData, // restore answers if navigating between form pages
     },
     mode: "onBlur",
   });
diff --git a/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx b/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx
index 39a0934e..3e114663 100644
--- a/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx
+++ b/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx
@@ -1,13 +1,15 @@
 "use client";
 
 import { Box, Button, TextField, Typography } from "@mui/material";
-import { Department, FormContextLevel, Role } from "../../../../types";
-import React, { useContext, useEffect, useState } from "react";
+import { Department, FormContextLevel, Inputs, Role } from "../../../../types";
+import React, { useContext, useEffect, useRef, useState } from "react";
 
 import { BookingContext } from "../bookingProvider";
+import { BookingFormTextField } from "../components/BookingFormInputs";
 import Dropdown from "../components/Dropdown";
 import { styled } from "@mui/material/styles";
 import { useAuth } from "../../components/AuthProvider";
+import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 
 const Center = styled(Box)`
@@ -35,18 +37,29 @@ export default function UserRolePage({
   calendarEventId,
   formContext = FormContextLevel.FULL_FORM,
 }: Props) {
-  const {
-    role,
-    department,
-    otherDepartment,
-    setDepartment,
-    setRole,
-    setOtherDepartment,
-  } = useContext(BookingContext);
+  const { formData, role, department, setDepartment, setRole, setFormData } =
+    useContext(BookingContext);
+
+  console.log(formData);
 
   const router = useRouter();
   const { user } = useAuth();
 
+  const {
+    control,
+    trigger,
+    watch,
+    formState: { errors },
+  } = useForm<Inputs>({
+    defaultValues: {
+      ...formData, // restore answers if navigating between form pages
+    },
+    mode: "onBlur",
+  });
+
+  const watchedFields = watch();
+  const prevWatchedFieldsRef = useRef<Inputs>();
+
   const showOther = department === Department.OTHER;
 
   useEffect(() => {
@@ -55,8 +68,19 @@ export default function UserRolePage({
     }
   }, []);
 
+  useEffect(() => {
+    if (
+      !prevWatchedFieldsRef.current ||
+      prevWatchedFieldsRef.current.otherDepartment !==
+        watchedFields.otherDepartment
+    ) {
+      setFormData({ ...watchedFields });
+      prevWatchedFieldsRef.current = watchedFields;
+    }
+  }, [watchedFields, setFormData]);
+
   const getDisabled = () => {
-    if (showOther && (!otherDepartment || otherDepartment.length === 0)) {
+    if (showOther && !watchedFields.otherDepartment) {
       return true;
     }
     return !role || !department;
@@ -91,17 +115,12 @@ export default function UserRolePage({
           sx={{ marginTop: 4 }}
         />
         {showOther && (
-          <TextField
-            variant="outlined"
-            placeholder="Enter your department"
-            value={otherDepartment}
-            error={
-              otherDepartment != null && otherDepartment.trim().length === 0
-            }
-            onError={() => setOtherDepartment("")}
-            onChange={(e) => setOtherDepartment(e.target.value)}
-            sx={{ marginBottom: 2, marginTop: 1 }}
-            fullWidth
+          <BookingFormTextField
+            id="otherDepartment"
+            label="Your Department"
+            containerSx={{ marginBottom: 2, marginTop: 1, width: "100%" }}
+            fieldSx={{}}
+            {...{ control, errors, trigger }}
           />
         )}
         <Dropdown
diff --git a/booking-app/components/src/client/routes/components/Provider.tsx b/booking-app/components/src/client/routes/components/Provider.tsx
index 9a679d78..5a5131c4 100644
--- a/booking-app/components/src/client/routes/components/Provider.tsx
+++ b/booking-app/components/src/client/routes/components/Provider.tsx
@@ -164,6 +164,7 @@ export const DatabaseProvider = ({
           netId: item.netId,
           phoneNumber: item.phoneNumber,
           department: item.department,
+          otherDepartment: item.otherDepartment,
           role: item.role,
           sponsorFirstName: item.sponsorFirstName,
           sponsorLastName: item.sponsorLastName,
diff --git a/booking-app/components/src/client/routes/components/bookingTable/BookingTableRow.tsx b/booking-app/components/src/client/routes/components/bookingTable/BookingTableRow.tsx
index 188c9adf..8bbbd2f2 100644
--- a/booking-app/components/src/client/routes/components/bookingTable/BookingTableRow.tsx
+++ b/booking-app/components/src/client/routes/components/bookingTable/BookingTableRow.tsx
@@ -61,7 +61,11 @@ export default function BookingTableRow({
       <TableCell sx={{ maxWidth: "150px" }}>{booking.roomId}</TableCell>
       {!isUserView && (
         <StackedTableCell
-          topText={booking.department}
+          topText={
+            booking.otherDepartment
+              ? `${booking.department} - ${booking.otherDepartment}`
+              : booking.department
+          }
           bottomText={booking.role}
         />
       )}
diff --git a/booking-app/components/src/types.ts b/booking-app/components/src/types.ts
index 77db896c..247f2cd0 100644
--- a/booking-app/components/src/types.ts
+++ b/booking-app/components/src/types.ts
@@ -111,6 +111,7 @@ export type Inputs = {
   netId: string;
   phoneNumber: string;
   department: string;
+  otherDepartment: string;
   role: string;
   sponsorFirstName: string;
   sponsorLastName: string;