diff --git a/app/components/booking/form.tsx b/app/components/booking/form.tsx
index 34d78d532..79da989cc 100644
--- a/app/components/booking/form.tsx
+++ b/app/components/booking/form.tsx
@@ -118,7 +118,7 @@ type BookingFormData = {
   name?: string;
   startDate?: string;
   endDate?: string;
-  custodianUserId?: string; // This is a stringified value for custodianUser
+  custodianRef?: string; // This is a stringified value for custodianRef. It can be either a team member id or a user id
   bookingStatus?: ReturnType<typeof useBookingStatusHelpers>;
   bookingFlags?: BookingFlags;
   assetIds?: string[] | null;
@@ -130,7 +130,7 @@ export function BookingForm({
   name,
   startDate,
   endDate,
-  custodianUserId,
+  custodianRef,
   bookingStatus,
   bookingFlags,
   assetIds,
@@ -181,13 +181,12 @@ export function BookingForm({
     const now = DateTime.now();
     return end < now;
   }, [endDate]);
-    
+
   /** This is used when we have selfSErvice or Base as we are setting the default */
   const defaultTeamMember = rawTeamMembers?.find(
-    (m) => m.userId === custodianUserId
+    (m) => m.userId === custodianRef || m.id === custodianRef
   );
 
-
   return (
     <div>
       <Form ref={zo.ref} method="post">
diff --git a/app/components/booking/page-content.tsx b/app/components/booking/page-content.tsx
index e25bad0cc..c402da764 100644
--- a/app/components/booking/page-content.tsx
+++ b/app/components/booking/page-content.tsx
@@ -37,7 +37,7 @@ export function BookingPageContent() {
               ? dateForDateTimeInputValue(new Date(booking.to))
               : undefined
           }
-          custodianUserId={custodianUser?.id}
+          custodianRef={custodianUser?.id}
           bookingStatus={bookingStatus}
         />
       </div>
diff --git a/app/routes/_layout+/bookings.new.tsx b/app/routes/_layout+/bookings.new.tsx
index 12e05823f..597594790 100644
--- a/app/routes/_layout+/bookings.new.tsx
+++ b/app/routes/_layout+/bookings.new.tsx
@@ -188,7 +188,7 @@ export default function NewBooking() {
     useLoaderData<typeof loader>();
   const { startDate, endDate } = getBookingDefaultStartEndTimes();
   // The loader already takes care of returning only the current user so we just get the first and only element in the array
-  const custodianUserId = isSelfServiceOrBase ? teamMembers[0]?.id : undefined;
+  const custodianRef = isSelfServiceOrBase ? teamMembers[0]?.id : undefined;
 
   return (
     <div className="booking-inner-wrapper">
@@ -205,7 +205,7 @@ export default function NewBooking() {
           startDate={startDate}
           endDate={endDate}
           assetIds={assetIds}
-          custodianUserId={custodianUserId}
+          custodianRef={custodianRef}
         />
       </div>
     </div>