diff --git a/frontend/src/components/EmployeeModal/EmployeeInfo.tsx b/frontend/src/components/EmployeeModal/EmployeeInfo.tsx
index 57a0825be..78c8ff9d2 100644
--- a/frontend/src/components/EmployeeModal/EmployeeInfo.tsx
+++ b/frontend/src/components/EmployeeModal/EmployeeInfo.tsx
@@ -27,7 +27,7 @@ const EmployeeInfo = ({
   return (
     <div className={styles.inputContainer}>
       <div className={styles.col1}>
-        <Label htmlFor="firstName">First Name</Label>
+        <Label htmlFor="firstName" required>First Name</Label>
         <Input
           id="firstName"
           type="text"
@@ -41,7 +41,7 @@ const EmployeeInfo = ({
         )}
       </div>
       <div className={styles.col2}>
-        <Label htmlFor="lastName">Last Name</Label>
+        <Label htmlFor="lastName" required>Last Name</Label>
         <Input
           id="lastName"
           type="text"
@@ -55,7 +55,7 @@ const EmployeeInfo = ({
         )}
       </div>
       <div className={styles.col1}>
-        <Label htmlFor="netid">NetID</Label>
+        <Label htmlFor="netid" required>NetID</Label>
         <Input
           id="netid"
           type="text"
@@ -69,7 +69,7 @@ const EmployeeInfo = ({
         )}
       </div>
       <div className={styles.col2}>
-        <Label htmlFor="phoneNumber">Phone Number</Label>
+        <Label htmlFor="phoneNumber" required>Phone Number</Label>
         <Input
           id="phoneNumber"
           type="tel"
@@ -87,23 +87,24 @@ const EmployeeInfo = ({
             },
           })}
         />
-        {errors.phoneNumber && (
+        {errors.phoneNumber ? (
           <p className={styles.error}>
             {errors.phoneNumber.message?.toString() ||
               'Please enter a valid phone number (10 digits)'}
           </p>
+        ) : (
+          <p
+            className={styles.helperText}
+            style={{
+              fontSize: '0.75rem',
+              color: '#666',
+              marginTop: '0.25rem',
+              marginBottom: 0,
+            }}
+          >
+            Format: 10 digits only (e.g., 1234567890)
+          </p>
         )}
-        <p
-          className={styles.helperText}
-          style={{
-            fontSize: '0.75rem',
-            color: '#666',
-            marginTop: '0.25rem',
-            marginBottom: 0,
-          }}
-        >
-          Format: 10 digits only (e.g., 1234567890)
-        </p>
       </div>
     </div>
   );
diff --git a/frontend/src/components/EmployeeModal/EmployeeModal.tsx b/frontend/src/components/EmployeeModal/EmployeeModal.tsx
index d640e0b3c..981e44ddb 100644
--- a/frontend/src/components/EmployeeModal/EmployeeModal.tsx
+++ b/frontend/src/components/EmployeeModal/EmployeeModal.tsx
@@ -319,6 +319,12 @@ const EmployeeModal = ({
    * @param photo - The optional photo file uploaded by the user.
    */
   async function onSubmit(formData: any) {
+    // Validate that at least one role is selected
+    if (selectedRoles.length === 0) {
+      showToast('Please select at least one role', ToastStatus.ERROR);
+      return;
+    }
+
     // Data entered from the form/modal.
     const hasAdmin =
       selectedRoles.includes('sds-admin') ||
@@ -360,7 +366,7 @@ const EmployeeModal = ({
         // Decide which table to update based on role selection (to be changed at a later date.)
         const targetTable =
           selectedRoles.includes('sds-admin') ||
-          selectedRoles.includes('redrunner-admin')
+            selectedRoles.includes('redrunner-admin')
             ? 'Admins'
             : 'Drivers';
         try {
@@ -438,14 +444,14 @@ const EmployeeModal = ({
 
             {(selectedRoles.includes('driver') ||
               existingEmployee?.driver?.availability) && (
-              <>
-                <StartDate existingDate={existingEmployee?.driver?.startDate} />
-                <WorkingHours
-                  existingAvailability={existingEmployee?.driver?.availability}
-                  hide={false}
-                />
-              </>
-            )}
+                <>
+                  <StartDate existingDate={existingEmployee?.driver?.startDate} />
+                  <WorkingHours
+                    existingAvailability={existingEmployee?.driver?.availability}
+                    hide={false}
+                  />
+                </>
+              )}
 
             <RoleSelector
               selectedRoles={selectedRoles}
diff --git a/frontend/src/components/EmployeeModal/RoleSelector.tsx b/frontend/src/components/EmployeeModal/RoleSelector.tsx
index 2d605cd8d..57edd605b 100644
--- a/frontend/src/components/EmployeeModal/RoleSelector.tsx
+++ b/frontend/src/components/EmployeeModal/RoleSelector.tsx
@@ -18,7 +18,9 @@ const RoleSelector = ({ selectedRoles, setSelectedRoles }: Props) => {
 
   return (
     <div className={styles.roleSelector}>
-      <p className={styles.roleSelectorTitle}>Role</p>
+      <Label className={styles.roleSelectorTitle} required>
+        Role
+      </Label>
       <div className={styles.radioGroup}>
         <div className={styles.radioOption}>
           <Input
diff --git a/frontend/src/components/EmployeeModal/StartDate.tsx b/frontend/src/components/EmployeeModal/StartDate.tsx
index 829dff2dc..1debec9c1 100644
--- a/frontend/src/components/EmployeeModal/StartDate.tsx
+++ b/frontend/src/components/EmployeeModal/StartDate.tsx
@@ -14,7 +14,7 @@ const StartDate = ({ existingDate }: StartDateProps) => {
 
   return (
     <div className={cn(styles.col1, styles.workingHours)}>
-      <Label htmlFor="startDate">Start Date:</Label>
+      <Label htmlFor="startDate" required>Start Date:</Label>
       <Input
         id="startDate"
         type="date"
diff --git a/frontend/src/components/FormElements/FormElements.tsx b/frontend/src/components/FormElements/FormElements.tsx
index b01ccd008..7d8ae23cd 100644
--- a/frontend/src/components/FormElements/FormElements.tsx
+++ b/frontend/src/components/FormElements/FormElements.tsx
@@ -13,13 +13,19 @@ import {
 type LabelType = React.DetailedHTMLProps<
   React.LabelHTMLAttributes<HTMLLabelElement>,
   HTMLLabelElement
->;
+> & {
+  required?: boolean;
+};
 
-export const Label = ({ className, children, ...props }: LabelType) => (
-  <label {...props} className={cn(styles.label, className)}>
-    {children}
-  </label>
-);
+export const Label = ({ className, children, required, ...props }: LabelType) => {
+  console.log('Label required:', required); // Debug line
+  return (
+    <label {...props} className={cn(styles.label, className)}>
+      {children}
+      {required && <span className={styles.requiredIndicator}> *</span>}
+    </label>
+  );
+};
 
 // This should only be used when you don't want a label to visually appear on screen
 // Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
@@ -78,7 +84,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         onClick={disabled ? undefined : onClick} // Disable click handler if disabled
         disabled={disabled}
-        // onClick={onClick}
+      // onClick={onClick}
       >
         {children}
       </button>
diff --git a/frontend/src/components/FormElements/formelements.module.css b/frontend/src/components/FormElements/formelements.module.css
index 1a7ff4215..d228b664b 100644
--- a/frontend/src/components/FormElements/formelements.module.css
+++ b/frontend/src/components/FormElements/formelements.module.css
@@ -53,21 +53,25 @@
   border: 0.063rem solid #000000;
   box-sizing: border-box;
 }
+
 .primaryBtn:focus {
   box-shadow: 0 0 0 3px #0075db;
 }
+
 .secondaryBtn {
   background-color: white;
   border: 0.063rem solid #000000;
   box-sizing: border-box;
 }
+
 .secondaryBtn:focus {
   box-shadow: 0 0 0 3px #0075db;
 }
 
 .srlabel {
   border: 0;
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   margin: -1px;
@@ -76,6 +80,7 @@
   position: absolute;
   width: 1px;
 }
+
 ::-webkit-input-placeholder {
   color: #767676;
   opacity: 1;
@@ -97,3 +102,12 @@
   color: #767676;
   opacity: 1;
 }
+
+.requiredIndicator {
+  color: #eb0023 !important;
+  /* Force red color */
+  font-weight: bold;
+  font-size: 1.1em;
+  margin-left: 3px;
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/frontend/src/components/LocationModal/LocationModal.tsx b/frontend/src/components/LocationModal/LocationModal.tsx
index 607af4c7f..7aef2505f 100644
--- a/frontend/src/components/LocationModal/LocationModal.tsx
+++ b/frontend/src/components/LocationModal/LocationModal.tsx
@@ -115,7 +115,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
           aria-labelledby="location-modal"
         >
           <div className={styles.inputContainer}>
-            <Label htmlFor="name">Name</Label>
+            <Label htmlFor="name" required>Name</Label>
             <Input
               {...register('name', { required: true })}
               type="text"
@@ -128,7 +128,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
               <p className={styles.errorMsg}>Please enter a name</p>
             )}
 
-            <Label htmlFor="address">Address</Label>
+            <Label htmlFor="address" required>Address</Label>
             <Input
               {...register('address', { required: true, validate: isAddress })}
               type="text"
@@ -141,7 +141,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
               <p className={styles.errorMsg}>{errors.address.message}</p>
             )}
 
-            <Label htmlFor="info">Pickup/Dropoff Info</Label>
+            <Label htmlFor="info" required>Pickup/Dropoff Info</Label>
             <Input
               {...register('info', { required: true })}
               type="text"
@@ -156,7 +156,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
               </p>
             )}
 
-            <Label htmlFor="tag">Tag</Label>
+            <Label htmlFor="tag" required>Tag</Label>
             <select
               {...register('tag', { required: true })}
               id="tag"
diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx
index e038800e8..1f34108ce 100644
--- a/frontend/src/components/Modal/RiderModalInfo.tsx
+++ b/frontend/src/components/Modal/RiderModalInfo.tsx
@@ -40,18 +40,18 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
 
   const makeNameValidator =
     (fieldLabel: 'First name' | 'Last name') => (value: string) => {
-    const trimmed = value.trim();
+      const trimmed = value.trim();
 
-    if (!trimmed) {
-      return `${fieldLabel} cannot be empty`;
-    }
+      if (!trimmed) {
+        return `${fieldLabel} cannot be empty`;
+      }
 
-    if (trimmed === trimmed.toLowerCase()) {
-      return `Please capitalize the ${fieldLabel.toLowerCase()}`;
-    }
+      if (trimmed === trimmed.toLowerCase()) {
+        return `Please capitalize the ${fieldLabel.toLowerCase()}`;
+      }
 
-    return true;
-  };
+      return true;
+    };
 
   const normalizePhoneNumber = (value: string) =>
     value.replace(/\D/g, '');
@@ -84,7 +84,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
       netid: rider?.email.split('@')[0] ?? '',
       phoneNumber: rider?.phoneNumber ?? '',
       needs:
-        rider?.accessibility?.map((need) => ({
+        rider?.accessibility?.map((need: Accessibility | string) => ({
           value: need as Accessibility,
           label: need,
         })) ?? [],
@@ -94,7 +94,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
   });
 
   const customStyles: StylesConfig<NeedOption, true> = {
-    option: (baseStyles, { data }) => ({
+    option: (baseStyles: any, { data }: { data: NeedOption }) => ({
       ...baseStyles,
       ...(data.value === 'OTHER' && {
         color: '#0066cc',
@@ -118,7 +118,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         },
       }),
     }),
-    menu: (baseStyles) => ({
+    menu: (baseStyles: any) => ({
       ...baseStyles,
       padding: '4px 0',
     }),
@@ -170,7 +170,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
     endDate,
   }) => {
     const email = netid ? `${(netid).toLowerCase()}@cornell.edu` : undefined;
-    const accessibility = needs.map((option) => option.value.toString());
+    const accessibility = needs.map((option: NeedOption) => option.value.toString());
     const normalizedPhoneNumber = normalizePhoneNumber(phoneNumber);
 
     const today = new Date().toISOString().slice(0, 10);
@@ -212,7 +212,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
     <form onSubmit={handleSubmit(beforeSubmit)} className={styles.form}>
       <div className={cn(styles.inputContainer, styles.rideTime)}>
         <div className={cn(styles.gridR1, styles.gridCSmall1)}>
-          <Label className={styles.label} htmlFor="firstName">
+          <Label className={styles.label} htmlFor="firstName" required>
             First Name:{' '}
           </Label>
           <Input
@@ -232,7 +232,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR1, styles.gridCSmall2)}>
-        <Label className={styles.label} htmlFor="lastName">
+          <Label className={styles.label} htmlFor="lastName" required>
             Last Name:{' '}
           </Label>
           <Input
@@ -252,7 +252,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR1, styles.gridCSmall3)}>
-        <Label className={styles.label} htmlFor="netid">
+          <Label className={styles.label} htmlFor="netid" required>
             NetID:{' '}
           </Label>
           <Input
@@ -272,27 +272,27 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR2, styles.gridCBig1)}>
-          <Label className={styles.label} htmlFor="phoneNumber">
-              Phone Number:{' '}
-            </Label>
-            <Input
-              id="phoneNumber"
-              {...register('phoneNumber', {
-                validate: validatePhoneNumber,
-              })}
-              type="tel"
-              className={styles.firstRow}
-              aria-required="true"
-              style={{ height: '60px' }}
-            />
-            {errors.phoneNumber && (
-              <p className={styles.error}>
-                {errors.phoneNumber.message ?? 'Phone number is not valid'}
-              </p>
-            )}
+          <Label className={styles.label} htmlFor="phoneNumber" required>
+            Phone Number:{' '}
+          </Label>
+          <Input
+            id="phoneNumber"
+            {...register('phoneNumber', {
+              validate: validatePhoneNumber,
+            })}
+            type="tel"
+            className={styles.firstRow}
+            aria-required="true"
+            style={{ height: '60px' }}
+          />
+          {errors.phoneNumber && (
+            <p className={styles.error}>
+              {errors.phoneNumber.message ?? 'Phone number is not valid'}
+            </p>
+          )}
         </div>
         <div className={cn(styles.gridR2, styles.gridCBig2)}>
-        <Label className={styles.label} htmlFor="needs">
+          <Label className={styles.label} htmlFor="needs" required>
             Needs:{' '}
           </Label>
           <div className={styles.needsContainer}>
@@ -300,7 +300,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
               name="needs"
               control={control}
               rules={{ required: true }}
-              render={({ field: { onChange, value, ...field } }) => (
+              render={({ field: { onChange, value, ...field } }: any) => (
                 <Select<NeedOption, true>
                   {...field}
                   value={value}
@@ -310,7 +310,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
                   classNamePrefix="customSelectValueContainer"
                   placeholder="Select needs..."
                   styles={customStyles}
-                  onChange={(newValue, actionMeta) =>
+                  onChange={(newValue: readonly NeedOption[] | null, actionMeta: any) =>
                     handleNeedsChange(newValue, actionMeta)
                   }
                 />
@@ -321,8 +321,8 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
                 <input
                   type="text"
                   value={customNeed}
-                  onChange={(e) => setCustomNeed(e.target.value)}
-                  onKeyDown={(e) => {
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCustomNeed(e.target.value)}
+                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                     if (e.key === 'Enter') {
                       e.preventDefault();
                       handleAddCustomNeed();
@@ -360,7 +360,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
           <p>Duration</p>
           <div className={styles.lastRow}>
             <div>
-              <Label className={styles.label} htmlFor="joinDate">
+              <Label className={styles.label} htmlFor="joinDate" required>
                 Join Date:{' '}
               </Label>
               <Input
@@ -379,14 +379,14 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
               <p>→</p>
             </div>
             <div>
-              <Label className={styles.label} htmlFor="endDate">
+              <Label className={styles.label} htmlFor="endDate" required>
                 End Date:{' '}
               </Label>
               <Input
                 id="endDate"
                 {...register('endDate', {
                   required: true,
-                  validate: (endDate) => {
+                  validate: (endDate: string) => {
                     const joinDate = getValues('joinDate');
                     return joinDate < endDate;
                   },
diff --git a/frontend/src/components/RequestRideModal/RequestRideInfo.tsx b/frontend/src/components/RequestRideModal/RequestRideInfo.tsx
index adb127942..7dc7a6835 100644
--- a/frontend/src/components/RequestRideModal/RequestRideInfo.tsx
+++ b/frontend/src/components/RequestRideModal/RequestRideInfo.tsx
@@ -136,13 +136,13 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       {((modalType === 'CREATE' && watchRepeating) ||
         modalType === 'EDIT_REGULAR' ||
         modalType === 'EDIT_SINGLE_RECURRING') && (
-        <Label htmlFor={'startDate'} className={styles.largeLabel}>
-          Date
-        </Label>
-      )}
+          <Label htmlFor={'startDate'} className={styles.largeLabel} required>
+            Date
+          </Label>
+        )}
       <div className={styles.box}>
         {modalType === 'EDIT_ALL_RECURRING' && (
-          <Label className={styles.boldLabel} htmlFor="startDate">
+          <Label className={styles.boldLabel} htmlFor="startDate" required>
             Starts
           </Label>
         )}
@@ -194,7 +194,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       {showRepeatingInfo && watchRepeating ? (
         <div>
           <div className={styles.box}>
-            <Label className={styles.boldLabel} id="repeats">
+            <Label className={styles.boldLabel} id="repeats" required>
               Repeats
             </Label>
             <div className={styles.radioBox}>
@@ -278,7 +278,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       </Label>
       <div className={styles.box}>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="pickupLocation">
+          <Label className={styles.label} id="pickupLocation" required>
             Location
           </Label>
           <select
@@ -307,7 +307,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
           )}
         </div>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="pickupTime">
+          <Label className={styles.label} id="pickupTime" required>
             Time
           </Label>
           <Input
@@ -383,7 +383,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       </Label>
       <div className={styles.box}>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="dropoffLocation">
+          <Label className={styles.label} id="dropoffLocation" required>
             Location
           </Label>
           <select
@@ -413,7 +413,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
           )}
         </div>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="dropoffTime">
+          <Label className={styles.label} id="dropoffTime" required>
             Time
           </Label>
           <Input
diff --git a/frontend/src/components/RiderComponents/RequestRideDialog.tsx b/frontend/src/components/RiderComponents/RequestRideDialog.tsx
index 941450a41..f4e10e10b 100644
--- a/frontend/src/components/RiderComponents/RequestRideDialog.tsx
+++ b/frontend/src/components/RiderComponents/RequestRideDialog.tsx
@@ -191,10 +191,10 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
     if (!pendingLocation) return;
 
     if (selectionState === 'pickup') {
-      setFormData((prev) => ({ ...prev, pickupLocation: pendingLocation }));
+      setFormData((prev: FormData) => ({ ...prev, pickupLocation: pendingLocation }));
       setSelectionState('dropoff');
     } else if (selectionState === 'dropoff') {
-      setFormData((prev) => ({ ...prev, dropoffLocation: pendingLocation }));
+      setFormData((prev: FormData) => ({ ...prev, dropoffLocation: pendingLocation }));
       setSelectionState('complete');
     }
 
@@ -213,7 +213,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
    * Clears both selected locations and returns to the "pickup" phase.
    */
   const resetSelection = () => {
-    setFormData((prev) => ({
+    setFormData((prev: FormData) => ({
       ...prev,
       pickupLocation: null,
       dropoffLocation: null,
@@ -266,18 +266,18 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
   // Reset selected days when changing repeat type
   const handleDateChange =
     (field: keyof Pick<FormData, 'date' | 'time' | 'repeatEndDate'>) =>
-    (newDate: Date | null) => {
-      setFormData({
-        ...formData,
-        [field]: newDate,
-      });
-    };
+      (newDate: Date | null) => {
+        setFormData({
+          ...formData,
+          [field]: newDate,
+        });
+      };
 
   const handleRepeatTypeChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = event.target.value as RepeatOption;
-    setFormData((prev) => ({
+    setFormData((prev: FormData) => ({
       ...prev,
       repeatType: value,
       selectedDays: value !== 'custom' ? [] : prev.selectedDays,
@@ -288,7 +288,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
     event: React.MouseEvent<HTMLElement>,
     newDays: string[]
   ) => {
-    setFormData((prev) => ({
+    setFormData((prev: FormData) => ({
       ...prev,
       selectedDays: newDays.map(
         (shortDay) => fullDayNames[shortDay as keyof typeof fullDayNames]
@@ -388,15 +388,15 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
   // Only show map if not using custom locations
   const safePickup =
     !customPickup &&
-    formData.pickupLocation?.lat &&
-    formData.pickupLocation?.lng
+      formData.pickupLocation?.lat &&
+      formData.pickupLocation?.lng
       ? formData.pickupLocation
       : null;
 
   const safeDropoff =
     !customDropoff &&
-    formData.dropoffLocation?.lat &&
-    formData.dropoffLocation?.lng
+      formData.dropoffLocation?.lat &&
+      formData.dropoffLocation?.lng
       ? formData.dropoffLocation
       : null;
 
@@ -438,8 +438,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                           formData.pickupLocation || customPickupName
                             ? '#4caf50'
                             : selectionState === 'pickup'
-                            ? '#2196f3'
-                            : '#e0e0e0',
+                              ? '#2196f3'
+                              : '#e0e0e0',
                         color: 'white',
                         fontSize: '12px',
                       }}
@@ -455,8 +455,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                           formData.dropoffLocation || customDropoffName
                             ? '#4caf50'
                             : selectionState === 'dropoff'
-                            ? '#2196f3'
-                            : '#e0e0e0',
+                              ? '#2196f3'
+                              : '#e0e0e0',
                         color: 'white',
                         fontSize: '12px',
                       }}
@@ -518,15 +518,15 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                     formData.dropoffLocation ||
                     customPickupName ||
                     customDropoffName) && (
-                    <Button
-                      variant="outlined"
-                      size="small"
-                      onClick={resetSelection}
-                      style={{ marginTop: '8px' }}
-                    >
-                      Change Locations
-                    </Button>
-                  )}
+                      <Button
+                        variant="outlined"
+                        size="small"
+                        onClick={resetSelection}
+                        style={{ marginTop: '8px' }}
+                      >
+                        Change Locations
+                      </Button>
+                    )}
                 </div>
 
                 {/* Show selected locations */}
@@ -587,17 +587,17 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                       : 'Or select from dropdown:'}
                   </h4>
 
-                  <FormControl fullWidth style={{ marginBottom: '16px' }}>
-                    <InputLabel>Pickup Location</InputLabel>
+                  <FormControl fullWidth required style={{ marginBottom: '16px' }}>
+                    <InputLabel required>Pickup Location</InputLabel>
                     <Select<string>
                       value={formData.pickupLocation?.id || ''}
-                      onChange={(event) => {
+                      onChange={(event: SelectChangeEvent<string>) => {
                         const locationId = event.target.value as string;
                         const selectedLocation =
                           supportLocsWithOther.find(
                             (loc) => loc.id === locationId
                           ) || null;
-                        setFormData((prev) => ({
+                        setFormData((prev: FormData) => ({
                           ...prev,
                           pickupLocation: selectedLocation,
                         }));
@@ -636,10 +636,11 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                   {customPickup && (
                     <TextField
                       fullWidth
+                      required
                       label="Custom Pickup Name"
                       placeholder="e.g., Uri's Hall Loading Dock"
                       value={customPickupName}
-                      onChange={(e) => {
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setCustomPickupName(e.target.value);
                         setInputPickUpError(false);
                       }}
@@ -653,18 +654,18 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                     />
                   )}
 
-                  <FormControl fullWidth>
-                    <InputLabel>Drop-off Location</InputLabel>
+                  <FormControl fullWidth required>
+                    <InputLabel required>Drop-off Location</InputLabel>
                     <Select<string>
                       value={formData.dropoffLocation?.id || ''}
                       disabled={!formData.pickupLocation && !customPickup}
-                      onChange={(event) => {
+                      onChange={(event: SelectChangeEvent<string>) => {
                         const locationId = event.target.value as string;
                         const selectedLocation =
                           supportLocsWithOther.find(
                             (loc) => loc.id === locationId
                           ) || null;
-                        setFormData((prev) => ({
+                        setFormData((prev: FormData) => ({
                           ...prev,
                           dropoffLocation: selectedLocation,
                         }));
@@ -709,10 +710,11 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                   {customDropoff && (
                     <TextField
                       fullWidth
+                      required
                       label="Custom Dropoff Name"
                       placeholder="e.g., Main Entrance Side Door"
                       value={customDropoffName}
-                      onChange={(e) => {
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setCustomDropoffName(e.target.value);
                         setInputDropOffError(false);
                       }}
@@ -730,7 +732,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                 <LocalizationProvider dateAdapter={AdapterDateFns}>
                   <Stack direction="row" spacing={2}>
                     <DatePicker
-                      label="Date"
+                      label="Date *"
                       value={formData.date}
                       onChange={handleDateChange('date')}
                       slotProps={{
@@ -740,7 +742,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                       }}
                     />
                     <TimePicker
-                      label="Time"
+                      label="Time *"
                       value={formData.time}
                       onChange={handleDateChange('time')}
                       slotProps={{
@@ -772,7 +774,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                 {formData.repeatType !== 'none' && (
                   <LocalizationProvider dateAdapter={AdapterDateFns}>
                     <DatePicker
-                      label="Repeat End Date"
+                      label="Repeat End Date *"
                       value={formData.repeatEndDate}
                       onChange={handleDateChange('repeatEndDate')}
                       slotProps={{