diff --git a/e2e/core/test.ts b/e2e/core/test.ts
index dd3e40bb4..f14d02b75 100644
--- a/e2e/core/test.ts
+++ b/e2e/core/test.ts
@@ -1,4 +1,4 @@
-import { APIRequestContext, Page, test as base } from '@playwright/test';
+import { type APIRequestContext, type Page, test as base } from '@playwright/test';
 import { api } from '../fixtures';
 
 // This file sets up our custom test harness using the custom fixtures.
diff --git a/e2e/specs/appointments.spec.ts b/e2e/specs/appointments.spec.ts
index 982dd9caa..87d387989 100644
--- a/e2e/specs/appointments.spec.ts
+++ b/e2e/specs/appointments.spec.ts
@@ -86,6 +86,9 @@ test('Add, edit and cancel an appointment', async ({ page, api }) => {
     await page.getByLabel('Duration (minutes)').fill('80');
   });
 
+  await test.step('I set the Date appointment issued', async () => {
+    await page.getByLabel('Date appointment issued').fill('20/08/2024');
+  });
   await test.step('And I change the note', async () => {
     await page
       .getByPlaceholder('Write any additional points here')
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 6150cf988..879227ddb 100644
--- a/packages/esm-appointments-app/src/form/appointments-form.component.tsx
+++ b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -176,10 +176,25 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       },
       {
         path: ['appointmentDateTime.recurringPatternEndDate'],
-        message: 'A recurring appointment should have an end date',
+        message: t('recurringAppointmentShouldHaveEndDate', 'A recurring appointment should have an end date'),
       },
-    );
+    )
+    .refine(
+      (formValues) => {
+        const appointmentDate = formValues.appointmentDateTime?.startDate;
+        const dateAppointmentScheduled = formValues.dateAppointmentScheduled;
 
+        if (!appointmentDate || !dateAppointmentScheduled) return true;
+        return dateAppointmentScheduled < appointmentDate;
+      },
+      {
+        path: ['dateAppointmentScheduled'],
+        message: t(
+          'dateAppointmentIssuedCannotBeAfterAppointmentDate',
+          'Date appointment issued cannot be after the appointment date',
+        ),
+      },
+    );
   type AppointmentFormData = z.infer<typeof appointmentsFormSchema>;
 
   const defaultDateAppointmentScheduled = appointment?.dateAppointmentScheduled
@@ -468,33 +483,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
-        <section className={styles.formGroup}>
-          <span className={styles.heading}>{t('dateScheduled', 'Date appointment issued')}</span>
-          <ResponsiveWrapper>
-            <Controller
-              name="dateAppointmentScheduled"
-              control={control}
-              render={({ field: { onChange, value, ref }, fieldState }) => (
-                <DatePicker
-                  datePickerType="single"
-                  dateFormat={datePickerFormat}
-                  value={value}
-                  maxDate={new Date()}
-                  onChange={([date]) => onChange(date)}
-                  invalid={!!fieldState?.error?.message}
-                  invalidText={fieldState?.error?.message}>
-                  <DatePickerInput
-                    id="dateAppointmentScheduledPickerInput"
-                    labelText={t('dateScheduledDetail', 'Date appointment issued')}
-                    style={{ width: '100%' }}
-                    placeholder={datePickerPlaceHolder}
-                    ref={ref}
-                  />
-                </DatePicker>
-              )}
-            />
-          </ResponsiveWrapper>
-        </section>
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('service', 'Service')}</span>
           <ResponsiveWrapper>
@@ -540,7 +528,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
-
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('appointmentType_title', 'Appointment Type')}</span>
           <ResponsiveWrapper>
@@ -730,7 +717,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                       <DatePicker
                         datePickerType="single"
                         dateFormat={datePickerFormat}
-                        value={value.startDate}
+                        value={value?.startDate}
                         onChange={([date]) => {
                           if (date) {
                             onChange({ ...value, startDate: date });
@@ -826,6 +813,36 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
+        <section className={styles.formGroup}>
+          <span className={styles.heading}>{t('dateScheduled', 'Date appointment issued')}</span>
+          <ResponsiveWrapper>
+            <Controller
+              name="dateAppointmentScheduled"
+              control={control}
+              render={({ field: { onChange, value, ref }, fieldState }) => (
+                <div style={{ width: '100%' }}>
+                  <DatePicker
+                    datePickerType="single"
+                    dateFormat={datePickerFormat}
+                    value={value}
+                    maxDate={new Date()}
+                    onChange={([date]) => onChange(date)}
+                    invalid={!!fieldState?.error?.message}
+                    invalidText={fieldState?.error?.message}>
+                    <DatePickerInput
+                      id="dateAppointmentScheduledPickerInput"
+                      labelText={t('dateScheduledDetail', 'Date appointment issued')}
+                      style={{ width: '100%' }}
+                      placeholder={datePickerPlaceHolder}
+                      ref={ref}
+                    />
+                  </DatePicker>
+                  {fieldState?.error?.message && <div className={styles.errorMessage}>{fieldState.error.message}</div>}
+                </div>
+              )}
+            />
+          </ResponsiveWrapper>
+        </section>
 
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('note', 'Note')}</span>
diff --git a/packages/esm-appointments-app/src/form/appointments-form.scss b/packages/esm-appointments-app/src/form/appointments-form.scss
index 2a2f6831f..f105d1afb 100644
--- a/packages/esm-appointments-app/src/form/appointments-form.scss
+++ b/packages/esm-appointments-app/src/form/appointments-form.scss
@@ -76,3 +76,12 @@ $openmrs-background-grey: #ededed;
   max-inline-size: fit-content;
   padding-top: layout.$spacing-03;
 }
+
+.errorMessage {
+  color: red;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  text-align: left;
+}