diff --git a/packages/esm-appointments-app/src/appointments.component.tsx b/packages/esm-appointments-app/src/appointments.component.tsx
index f79462222..964efd942 100644
--- a/packages/esm-appointments-app/src/appointments.component.tsx
+++ b/packages/esm-appointments-app/src/appointments.component.tsx
@@ -37,7 +37,6 @@ const Appointments: React.FC = () => {
       />
       <AppointmentMetrics appointmentServiceType={appointmentServiceType} />
       <AppointmentTabs appointmentServiceType={appointmentServiceType} />
-      <WorkspaceOverlay contextKey="appointments" />
     </SelectedDateContext.Provider>
   );
 };
diff --git a/packages/esm-appointments-app/src/form/appointments-form.component.tsx b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
index 83c167ff4..6b2b885c6 100644
--- a/packages/esm-appointments-app/src/form/appointments-form.component.tsx
+++ b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -136,7 +136,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
   const [isRecurringAppointment, setIsRecurringAppointment] = useState(false);
   const [isAllDayAppointment, setIsAllDayAppointment] = useState(false);
-
   const defaultRecurringPatternType = recurringPattern?.type || 'DAY';
   const defaultRecurringPatternPeriod = recurringPattern?.period || 1;
   const defaultRecurringPatternDaysOfWeek = recurringPattern?.daysOfWeek || [];
@@ -491,7 +490,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('dateTime', 'Date & Time')}</span>
-          <div>
+          <div className={styles.dateTimeFields}>
             {isRecurringAppointment && (
               <div className={styles.inputContainer}>
                 {allowAllDayAppointments && (
diff --git a/packages/esm-appointments-app/src/form/appointments-form.scss b/packages/esm-appointments-app/src/form/appointments-form.scss
index 20cd217ab..682486c3b 100644
--- a/packages/esm-appointments-app/src/form/appointments-form.scss
+++ b/packages/esm-appointments-app/src/form/appointments-form.scss
@@ -60,6 +60,14 @@ $openmrs-background-grey: #ededed;
   align-items: center;
 }
 
+.dateTimeFields {
+  max-width: 100%;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .dateTimeFields {
+  max-width: 32.25rem;
+}
+
 .button {
   height: 4rem;
   display: flex;