frontend/src/app/(dashboard)/appointments/page.tsx

@@ -273,6 +273,7 @@ export default function AppointmentsPage() {
               if (!canEditPatients) {
                 return;
               }
+              setPatientForm(EMPTY_PATIENT_FORM);
               setIsCreateOpen(true);
             }}
           />
@@ -322,18 +323,18 @@ export default function AppointmentsPage() {
         deleting={deletingAppointment}
       />
 
-      {isCreateOpen && (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/55">
-          <CreatePatientModal
-            isOpen={isCreateOpen}
-            formData={patientForm}
-            onChange={(patch) => setPatientForm((prev) => ({ ...prev, ...patch }))}
-            onSubmit={() => void handleCreatePatient()}
-            onClose={() => setIsCreateOpen(false)}
-            loading={savingPatient}
-          />
-        </div>
-      )}
+      <CreatePatientModal
+        variant="dialog"
+        isOpen={isCreateOpen}
+        formData={patientForm}
+        onChange={(patch) => setPatientForm((prev) => ({ ...prev, ...patch }))}
+        onSubmit={() => void handleCreatePatient()}
+        onClose={() => {
+          setIsCreateOpen(false);
+          setPatientForm(EMPTY_PATIENT_FORM);
+        }}
+        loading={savingPatient}
+      />
 
     </div>
   );

frontend/src/app/(dashboard)/patients/page.tsx

@@ -147,6 +147,7 @@ export default function PatientsPage() {
           onClick={() => {
             if (!canEditPatients) return;
             toast.clear();
+            setPatientForm(EMPTY_PATIENT_FORM);
             setIsCreateOpen(true);
           }}
           title={!canEditPatients ? 'Read-only access for this organization.' : undefined}
@@ -163,7 +164,10 @@ export default function PatientsPage() {
           formData={patientForm}
           onChange={(patch) => setPatientForm((prev) => ({ ...prev, ...patch }))}
           onSubmit={() => void handleCreatePatient()}
-          onClose={() => setIsCreateOpen(false)}
+          onClose={() => {
+            setIsCreateOpen(false);
+            setPatientForm(EMPTY_PATIENT_FORM);
+          }}
           loading={savingPatient}
         />
       )}

frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx

@@ -49,7 +49,7 @@ export function AppointmentsPatientSearch({
             onClick={onAddPatient}
             title={!canAddPatient ? 'You do not have permission to add patients.' : undefined}
           >
-            + Add New Patient
+            New Patient
           </Button>
         )}
       </div>

frontend/src/components/ui/patient/CreatePatientModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/shared/Button';
+import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { Input } from '@/components/ui/shared/Input';
 import { CreatePatientInput } from '@/types/patient';
 
@@ -11,22 +12,27 @@ interface CreatePatientModalProps {
   onSubmit: () => void;
   onClose: () => void;
   loading?: boolean;
+  /** Inline panel on Patients page; centered dialog on Appointments. */
+  variant?: 'inline' | 'dialog';
 }
 
-export function CreatePatientModal({
-  isOpen,
+function CreatePatientFormFields({
   formData,
   onChange,
   onSubmit,
   onClose,
-  loading = false,
-}: CreatePatientModalProps) {
-  if (!isOpen) {
-    return null;
-  }
-
+  loading,
+  showCancel,
+}: {
+  formData: CreatePatientInput;
+  onChange: (patch: Partial<CreatePatientInput>) => void;
+  onSubmit: () => void;
+  onClose: () => void;
+  loading: boolean;
+  showCancel: boolean;
+}) {
   return (
-    <div className="surface-card p-4 space-y-3">
+    <>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         <Input
           label="First name"
@@ -60,10 +66,80 @@ export function CreatePatientModal({
         >
           Save Patient
         </Button>
-        <Button variant="ghost" onClick={onClose}>
-          Cancel
-        </Button>
+        {showCancel && (
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+        )}
       </div>
+    </>
+  );
+}
+
+export function CreatePatientModal({
+  isOpen,
+  formData,
+  onChange,
+  onSubmit,
+  onClose,
+  loading = false,
+  variant = 'inline',
+}: CreatePatientModalProps) {
+  if (!isOpen) {
+    return null;
+  }
+
+  if (variant === 'dialog') {
+    return (
+      <div
+        className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/55"
+        role="presentation"
+        onMouseDown={(e) => {
+          if (e.target === e.currentTarget) {
+            onClose();
+          }
+        }}
+      >
+        <div
+          className="surface-card w-full max-w-[min(56rem,calc(100vw-17rem))] p-5 space-y-4 shadow-xl"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="create-patient-dialog-title"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <h2
+              id="create-patient-dialog-title"
+              className="text-lg font-semibold text-text-primary pr-2"
+            >
+              New patient
+            </h2>
+            <DialogCloseButton onClick={onClose} />
+          </div>
+
+          <CreatePatientFormFields
+            formData={formData}
+            onChange={onChange}
+            onSubmit={onSubmit}
+            onClose={onClose}
+            loading={loading}
+            showCancel={false}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="surface-card p-4 space-y-3">
+      <CreatePatientFormFields
+        formData={formData}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        onClose={onClose}
+        loading={loading}
+        showCancel
+      />
     </div>
   );
 }