diff --git a/media_commons_booking_app/src/client/routes/admin/components/Liaisons.tsx b/media_commons_booking_app/src/client/routes/admin/components/Liaisons.tsx
index f7687718..9e9f0d44 100644
--- a/media_commons_booking_app/src/client/routes/admin/components/Liaisons.tsx
+++ b/media_commons_booking_app/src/client/routes/admin/components/Liaisons.tsx
@@ -7,6 +7,7 @@ import { formatDate } from '../../../utils/date';
 import { getLiaisonTableName } from '../../../../policy';
 // This is a wrapper for google.script.run that lets us use promises.
 import { serverFunctions } from '../../../utils/serverFunctions';
+import { Department } from '../../../../types';
 
 const AddLiaisonForm = ({ liaisonEmails, reloadLiaisonEmails }) => {
   const [email, setEmail] = useState('');
@@ -64,25 +65,18 @@ const AddLiaisonForm = ({ liaisonEmails, reloadLiaisonEmails }) => {
           />
         </div>
         <div className="mr-6">
-          <select
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[200px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            onChange={(e) => {
-              setDepartment(e.target.value);
-            }}
-            value={department}
-          >
-            <option value="" disabled>
-              Select option
-            </option>
-            <option value="ALT">ALT</option>
-            <option value="GameCenter">Game Center</option>
-            <option value="IDM">IDM</option>
-            <option value="ITP / IMA / Low Res">ITP / IMA / Low Res</option>
-            <option value="MARL">MARL</option>
-            <option value="Music Tech">Music Tech</option>
-            <option value="Recorded Music">Recorded Music</option>
-            <option value="others">Other Group</option>
-          </select>
+        <select
+              value={department}
+              onChange={(e) => setDepartment(e.target.value as Department)}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            >
+              <option value="">Choose a Department</option>
+              {Object.values(Department).map((label, index) => (
+                <option key={index} value={label}>
+                  {label}
+                </option>
+              ))}
+            </select>
         </div>
         {loading ? (
           <Loading />
diff --git a/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx b/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
index deffa7ff..0b64e677 100644
--- a/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
+++ b/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
@@ -149,7 +149,7 @@ export default function useSubmitBooking(): [
     } else {
       const getApprovalUrl = serverFunctions.approvalUrl(calendarEventId);
       const getRejectedUrl = serverFunctions.rejectUrl(calendarEventId);
-      const getBookingToolUrl = serverFunctions.scriptURL();
+      const getBookingToolUrl = serverFunctions.getBookingToolDeployUrl();
       Promise.all([getApprovalUrl, getRejectedUrl, getBookingToolUrl]).then(
         (values) => {
           const userEventInputs: BookingFormDetails = {
diff --git a/media_commons_booking_app/src/server/admin.ts b/media_commons_booking_app/src/server/admin.ts
index 35b2f1f4..b59f91e8 100644
--- a/media_commons_booking_app/src/server/admin.ts
+++ b/media_commons_booking_app/src/server/admin.ts
@@ -4,7 +4,7 @@ import {
   getSecondApproverEmail,
 } from '../policy';
 import { BookingFormDetails, BookingStatusLabel } from '../types';
-import { approvalUrl, rejectUrl, scriptURL } from './ui';
+import { approvalUrl, getBookingToolDeployUrl, rejectUrl } from './ui';
 import {
   fetchById,
   fetchIndexByUniqueValue,
@@ -20,7 +20,7 @@ export const bookingContents = (id: string): BookingFormDetails => {
   const bookingObj = fetchById(TableNames.BOOKING, id);
   bookingObj.approvalUrl = approvalUrl(id);
   bookingObj.rejectedUrl = rejectUrl(id);
-  bookingObj.bookingToolUrl = scriptURL();
+  bookingObj.bookingToolUrl = getBookingToolDeployUrl();
   return bookingObj;
 };
 
diff --git a/media_commons_booking_app/src/server/index.ts b/media_commons_booking_app/src/server/index.ts
index 76d21ebe..8dee8a50 100644
--- a/media_commons_booking_app/src/server/index.ts
+++ b/media_commons_booking_app/src/server/index.ts
@@ -14,8 +14,9 @@ import {
   approvalUrl,
   doGet,
   getActiveUserEmail,
+  getBookingToolDeployUrl,
   rejectUrl,
-  scriptURL,
+  scriptUrl,
 } from './ui';
 import {
   approveBooking,
@@ -45,7 +46,8 @@ export {
   getOldSafetyTrainingEmails,
 
   // ui
-  scriptURL,
+  getBookingToolDeployUrl,
+  scriptUrl,
   approvalUrl,
   rejectUrl,
   doGet,
diff --git a/media_commons_booking_app/src/server/ui.ts b/media_commons_booking_app/src/server/ui.ts
index e5b2b0fd..9fb2c759 100644
--- a/media_commons_booking_app/src/server/ui.ts
+++ b/media_commons_booking_app/src/server/ui.ts
@@ -1,10 +1,23 @@
 import { approveBooking, reject } from './admin';
 
-export const scriptURL = () => {
+import { DevBranch } from '../types';
+
+export const scriptUrl = () => {
   const url = ScriptApp.getService().getUrl();
   return url;
 };
 
+export const getBookingToolDeployUrl = () => {
+  switch (process.env.BRANCH_NAME as DevBranch) {
+    case 'development':
+      return 'https://sites.google.com/nyu.edu/media-commons-dev/';
+    case 'staging':
+      return 'https://sites.google.com/nyu.edu/media-commons-staging/';
+    default:
+      return 'https://sites.google.com/nyu.edu/media-commons-prod/';
+  }
+};
+
 export const approvalUrl = (calendarEventId: string) => {
   const url = ScriptApp.getService().getUrl();
   return `${url}?action=approve&page=admin&calendarEventId=${calendarEventId}`;
diff --git a/media_commons_booking_app/src/types.ts b/media_commons_booking_app/src/types.ts
index 47cc3943..422a9494 100644
--- a/media_commons_booking_app/src/types.ts
+++ b/media_commons_booking_app/src/types.ts
@@ -55,12 +55,14 @@ export type CalendarEvent = {
 
 export enum Department {
   ALT = 'ALT',
+  CDI = 'CDI',
   GAMES = 'Game Center',
   IDM = 'IDM',
   ITP = 'ITP / IMA / Low Res',
   MARL = 'MARL',
+  MPAP = 'MPAP',
   MUSIC_TECH = 'Music Tech',
-  RECORDED_MUSIC = 'Recorded Music',
+  OTHER = 'Other',
 }
 
 export type DevBranch = 'development' | 'staging' | 'production' | '';
diff --git a/media_commons_booking_app/webpack.config.js b/media_commons_booking_app/webpack.config.js
index d84c866d..71daafac 100755
--- a/media_commons_booking_app/webpack.config.js
+++ b/media_commons_booking_app/webpack.config.js
@@ -301,7 +301,7 @@ const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
       }),
       new HtmlWebpackPlugin({
         template: clientEntrypoint.template,
-        filename: `${clientEntrypoint.filename}${isProd ? '' : '-impl'}.html`,
+        filename: `${clientEntrypoint.filename}${isProd ? '' : ''}.html`,
         inlineSource: '^/.*(js|css)$', // embed all js and css inline, exclude packages from dynamic cdn insertion
         scriptLoading: 'blocking',
         inject: 'body',