diff --git a/src/__tests__/patients/care-plans/CarePlanForm.test.tsx b/src/__tests__/patients/care-plans/CarePlanForm.test.tsx
index 8a92683677..1d8a6623ca 100644
--- a/src/__tests__/patients/care-plans/CarePlanForm.test.tsx
+++ b/src/__tests__/patients/care-plans/CarePlanForm.test.tsx
@@ -6,7 +6,7 @@ import { act } from 'react-dom/test-utils'
 
 import CarePlanForm from '../../../patients/care-plans/CarePlanForm'
 import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../../shared/model/CarePlan'
-import Diagnosis from '../../../shared/model/Diagnosis'
+import Diagnosis, { DiagnosisStatus } from '../../../shared/model/Diagnosis'
 import Patient from '../../../shared/model/Patient'
 
 describe('Care Plan Form', () => {
@@ -15,6 +15,10 @@ describe('Care Plan Form', () => {
     id: '123',
     name: 'some diagnosis name',
     diagnosisDate: new Date().toISOString(),
+    onsetDate: new Date().toISOString(),
+    abatementDate: new Date().toISOString(),
+    status: DiagnosisStatus.Active,
+    note: 'some note',
   }
   const carePlan: CarePlan = {
     id: 'id',
diff --git a/src/__tests__/patients/diagnoses/AddDiagnosisModal.test.tsx b/src/__tests__/patients/diagnoses/AddDiagnosisModal.test.tsx
index 19707ce111..5349e5b095 100644
--- a/src/__tests__/patients/diagnoses/AddDiagnosisModal.test.tsx
+++ b/src/__tests__/patients/diagnoses/AddDiagnosisModal.test.tsx
@@ -1,161 +1,125 @@
-import { Modal, Alert } from '@hospitalrun/components'
-import { act } from '@testing-library/react'
+import { Modal } from '@hospitalrun/components'
 import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
 import React from 'react'
+import { act } from 'react-dom/test-utils'
 import { Provider } from 'react-redux'
+import { Router } from 'react-router-dom'
 import createMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 
 import AddDiagnosisModal from '../../../patients/diagnoses/AddDiagnosisModal'
+import DiagnosisForm from '../../../patients/diagnoses/DiagnosisForm'
 import * as patientSlice from '../../../patients/patient-slice'
-import DatePickerWithLabelFormGroup from '../../../shared/components/input/DatePickerWithLabelFormGroup'
-import TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup'
 import PatientRepository from '../../../shared/db/PatientRepository'
-import Diagnosis from '../../../shared/model/Diagnosis'
+import { CarePlanIntent, CarePlanStatus } from '../../../shared/model/CarePlan'
 import Patient from '../../../shared/model/Patient'
 import { RootState } from '../../../shared/store'
 
 const mockStore = createMockStore<RootState, any>([thunk])
 
 describe('Add Diagnosis Modal', () => {
-  beforeEach(() => {
-    jest.spyOn(PatientRepository, 'find')
-    jest.spyOn(PatientRepository, 'saveOrUpdate')
-  })
-
-  it('should render a modal with the correct labels', () => {
-    const store = mockStore({
-      patient: {
-        patient: {
-          id: '1234',
-        },
+  const patient = {
+    id: 'patientId',
+    diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
+    carePlans: [
+      {
+        id: '123',
+        title: 'some title',
+        description: 'some description',
+        diagnosisId: '123',
+        startDate: new Date().toISOString(),
+        endDate: new Date().toISOString(),
+        status: CarePlanStatus.Active,
+        intent: CarePlanIntent.Proposal,
       },
-    } as any)
+    ],
+  } as Patient
+
+  const diagnosisError = {
+    title: 'some diagnosisError error',
+  }
+
+  const onCloseSpy = jest.fn()
+  const setup = () => {
+    jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
+    jest.spyOn(PatientRepository, 'saveOrUpdate')
+    const store = mockStore({ patient: { patient, diagnosisError } } as any)
+    const history = createMemoryHistory()
     const wrapper = mount(
       <Provider store={store}>
-        <AddDiagnosisModal show onCloseButtonClick={jest.fn()} />
+        <Router history={history}>
+          <AddDiagnosisModal show onCloseButtonClick={onCloseSpy} />
+        </Router>
       </Provider>,
     )
+
     wrapper.update()
+    return { wrapper }
+  }
+
+  it('should render a modal', () => {
+    const { wrapper } = setup()
+
     const modal = wrapper.find(Modal)
+
     expect(modal).toHaveLength(1)
+
+    const successButton = modal.prop('successButton')
+    const cancelButton = modal.prop('closeButton')
     expect(modal.prop('title')).toEqual('patient.diagnoses.new')
-    expect(modal.prop('closeButton')?.children).toEqual('actions.cancel')
-    expect(modal.prop('closeButton')?.color).toEqual('danger')
-    expect(modal.prop('successButton')?.children).toEqual('patient.diagnoses.new')
-    expect(modal.prop('successButton')?.color).toEqual('success')
-    expect(modal.prop('successButton')?.icon).toEqual('add')
+    expect(successButton?.children).toEqual('patient.diagnoses.new')
+    expect(successButton?.icon).toEqual('add')
+    expect(cancelButton?.children).toEqual('actions.cancel')
   })
 
-  it('should display an errors', () => {
-    const expectedDiagnosisError = {
-      message: 'some message',
-      date: 'some date message',
-      name: 'some date message',
-    }
-    const store = mockStore({
-      patient: {
-        diagnosisError: expectedDiagnosisError,
-      },
-    } as any)
-    const wrapper = mount(
-      <Provider store={store}>
-        <AddDiagnosisModal show onCloseButtonClick={jest.fn()} />
-      </Provider>,
-    )
-    wrapper.update()
-
-    expect(wrapper.find(Alert)).toHaveLength(1)
+  it('should render the diagnosis form', () => {
+    const { wrapper } = setup()
 
-    expect(wrapper.find(Alert).prop('title')).toEqual('states.error')
-    expect(wrapper.find(Alert).prop('message')).toContain(expectedDiagnosisError.message)
-    expect(wrapper.find(TextInputWithLabelFormGroup).prop('feedback')).toContain(
-      expectedDiagnosisError.name,
-    )
-    expect(wrapper.find(TextInputWithLabelFormGroup).prop('isInvalid')).toBeTruthy()
-    expect(wrapper.find(DatePickerWithLabelFormGroup).prop('feedback')).toContain(
-      expectedDiagnosisError.date,
-    )
-    expect(wrapper.find(DatePickerWithLabelFormGroup).prop('isInvalid')).toBeTruthy()
+    const diagnosisForm = wrapper.find(DiagnosisForm)
+    expect(diagnosisForm).toHaveLength(1)
+    expect(diagnosisForm.prop('diagnosisError')).toEqual(diagnosisError)
   })
 
-  describe('cancel', () => {
-    it('should call the onCloseButtonClick function when the close button is clicked', () => {
-      const onCloseButtonClickSpy = jest.fn()
-      const store = mockStore({
-        patient: {
-          patient: {
-            id: '1234',
-          },
-        },
-      } as any)
-      const wrapper = mount(
-        <Provider store={store}>
-          <AddDiagnosisModal show onCloseButtonClick={onCloseButtonClickSpy} />
-        </Provider>,
-      )
-      wrapper.update()
-
-      act(() => {
-        const modal = wrapper.find(Modal)
-        const { onClick } = modal.prop('closeButton') as any
-        onClick()
-      })
-
-      expect(onCloseButtonClickSpy).toHaveBeenCalledTimes(1)
+  it('should dispatch add diagnosis when the save button is clicked', async () => {
+    const { wrapper } = setup()
+    jest.spyOn(patientSlice, 'addDiagnosis')
+
+    act(() => {
+      const diagnosisForm = wrapper.find(DiagnosisForm)
+      const onChange = diagnosisForm.prop('onChange') as any
+      if (patient.diagnoses != null) {
+        onChange(patient.diagnoses[0])
+      }
+    })
+    wrapper.update()
+
+    await act(async () => {
+      const modal = wrapper.find(Modal)
+      const successButton = modal.prop('successButton')
+      const onClick = successButton?.onClick as any
+      await onClick()
     })
+
+    expect(patientSlice.addDiagnosis).toHaveBeenCalledTimes(1)
+    if (patient.diagnoses != null) {
+      expect(patientSlice.addDiagnosis).toHaveBeenCalledWith(patient.id, patient.diagnoses[0])
+    }
   })
 
-  describe('save', () => {
-    it('should dispatch add diagnosis', () => {
-      const expectedName = 'expected name'
-      const expectedDate = new Date()
-      jest.spyOn(patientSlice, 'addDiagnosis')
-      const patient = {
-        id: '1234',
-        givenName: 'some name',
-      }
+  it('should call the on close function when the cancel button is clicked', () => {
+    const { wrapper } = setup()
+
+    const modal = wrapper.find(Modal)
+
+    expect(modal).toHaveLength(1)
 
-      jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient as Patient)
-      jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(patient as Patient)
-
-      const diagnosis = {
-        name: expectedName,
-        diagnosisDate: expectedDate.toISOString(),
-      } as Diagnosis
-
-      const store = mockStore({
-        patient: {
-          patient,
-        },
-      } as any)
-      const wrapper = mount(
-        <Provider store={store}>
-          <AddDiagnosisModal show onCloseButtonClick={jest.fn()} />
-        </Provider>,
-      )
-
-      act(() => {
-        const input = wrapper.findWhere((c: any) => c.prop('name') === 'name')
-        const onChange = input.prop('onChange')
-        onChange({ target: { value: expectedName } })
-      })
-      wrapper.update()
-
-      act(() => {
-        const input = wrapper.findWhere((c: any) => c.prop('name') === 'diagnosisDate')
-        const onChange = input.prop('onChange')
-        onChange(expectedDate)
-      })
-      wrapper.update()
-
-      act(() => {
-        const modal = wrapper.find(Modal)
-        const { onClick } = modal.prop('successButton') as any
-        onClick()
-      })
-
-      expect(patientSlice.addDiagnosis).toHaveBeenCalledWith(patient.id, { ...diagnosis })
+    act(() => {
+      const cancelButton = modal.prop('closeButton')
+      const onClick = cancelButton?.onClick as any
+      onClick()
     })
+
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 })
diff --git a/src/__tests__/patients/diagnoses/DiagnosisForm.test.tsx b/src/__tests__/patients/diagnoses/DiagnosisForm.test.tsx
new file mode 100644
index 0000000000..3fffc222a8
--- /dev/null
+++ b/src/__tests__/patients/diagnoses/DiagnosisForm.test.tsx
@@ -0,0 +1,243 @@
+import { Alert } from '@hospitalrun/components'
+import { addDays } from 'date-fns'
+import { mount } from 'enzyme'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+
+import DiagnosisForm from '../../../patients/diagnoses/DiagnosisForm'
+import Diagnosis, { DiagnosisStatus } from '../../../shared/model/Diagnosis'
+
+describe('Diagnosis Form', () => {
+  let onDiagnosisChangeSpy: any
+  const diagnosis: Diagnosis = {
+    id: '123',
+    name: 'some diagnosis name',
+    diagnosisDate: new Date().toISOString(),
+    onsetDate: new Date().toISOString(),
+    abatementDate: new Date().toISOString(),
+    status: DiagnosisStatus.Active,
+    note: 'some note',
+  }
+
+  const setup = (disabled = false, initializeDiagnosis = true, error?: any) => {
+    onDiagnosisChangeSpy = jest.fn()
+    const wrapper = mount(
+      <DiagnosisForm
+        onChange={onDiagnosisChangeSpy}
+        diagnosis={initializeDiagnosis ? diagnosis : {}}
+        diagnosisError={error}
+        disabled={disabled}
+      />,
+    )
+    return { wrapper }
+  }
+
+  it('should render a name input', () => {
+    const { wrapper } = setup()
+
+    const nameInput = wrapper.findWhere((w) => w.prop('name') === 'name')
+
+    expect(nameInput).toHaveLength(1)
+    expect(nameInput.prop('patient.diagnoses.name'))
+    expect(nameInput.prop('isRequired')).toBeTruthy()
+    expect(nameInput.prop('value')).toEqual(diagnosis.name)
+  })
+
+  it('should call the on change handler when name changes', () => {
+    const expectedNewname = 'some new name'
+    const { wrapper } = setup(false, false)
+    act(() => {
+      const nameInput = wrapper.findWhere((w) => w.prop('name') === 'name')
+      const onChange = nameInput.prop('onChange') as any
+      onChange({ currentTarget: { value: expectedNewname } })
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({ name: expectedNewname })
+  })
+
+  it('should render a status selector', () => {
+    const { wrapper } = setup()
+
+    const statusSelector = wrapper.findWhere((w) => w.prop('name') === 'status')
+
+    expect(statusSelector).toHaveLength(1)
+    expect(statusSelector.prop('patient.diagnoses.status'))
+    expect(statusSelector.prop('isRequired')).toBeTruthy()
+    expect(statusSelector.prop('defaultSelected')[0].value).toEqual(diagnosis.status)
+    expect(statusSelector.prop('options')).toEqual(
+      Object.values(DiagnosisStatus).map((v) => ({ label: v, value: v })),
+    )
+  })
+
+  it('should call the on change handler when status changes', () => {
+    const expectedNewStatus = DiagnosisStatus.Active
+    const { wrapper } = setup(false, false)
+    act(() => {
+      const statusSelector = wrapper.findWhere((w) => w.prop('name') === 'status')
+      const onChange = statusSelector.prop('onChange') as any
+      onChange([expectedNewStatus])
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({ status: expectedNewStatus })
+  })
+
+  it('should render a diagnosis date picker', () => {
+    const { wrapper } = setup()
+
+    const diagnosisDatePicker = wrapper.findWhere((w) => w.prop('name') === 'diagnosisDate')
+
+    expect(diagnosisDatePicker).toHaveLength(1)
+    expect(diagnosisDatePicker.prop('patient.diagnoses.diagnosisDate'))
+    expect(diagnosisDatePicker.prop('isRequired')).toBeTruthy()
+    expect(diagnosisDatePicker.prop('value')).toEqual(new Date(diagnosis.diagnosisDate))
+  })
+
+  it('should call the on change handler when diagnosis date changes', () => {
+    const expectedNewDiagnosisDate = addDays(1, new Date().getDate())
+    const { wrapper } = setup(false, false)
+
+    const diagnosisDatePicker = wrapper.findWhere((w) => w.prop('name') === 'diagnosisDate')
+    act(() => {
+      const onChange = diagnosisDatePicker.prop('onChange') as any
+      onChange(expectedNewDiagnosisDate)
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({
+      diagnosisDate: expectedNewDiagnosisDate.toISOString(),
+    })
+  })
+
+  it('should render a onset date picker', () => {
+    const { wrapper } = setup()
+
+    const onsetDatePicker = wrapper.findWhere((w) => w.prop('name') === 'onsetDate')
+
+    expect(onsetDatePicker).toHaveLength(1)
+    expect(onsetDatePicker.prop('patient.diagnoses.onsetDate'))
+    expect(onsetDatePicker.prop('isRequired')).toBeTruthy()
+    expect(onsetDatePicker.prop('value')).toEqual(new Date(diagnosis.onsetDate))
+  })
+
+  it('should call the on change handler when onset date changes', () => {
+    const expectedNewOnsetDate = addDays(1, new Date().getDate())
+    const { wrapper } = setup(false, false)
+
+    const onsetDatePicker = wrapper.findWhere((w) => w.prop('name') === 'onsetDate')
+    act(() => {
+      const onChange = onsetDatePicker.prop('onChange') as any
+      onChange(expectedNewOnsetDate)
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({
+      onsetDate: expectedNewOnsetDate.toISOString(),
+    })
+  })
+
+  it('should render a abatement date picker', () => {
+    const { wrapper } = setup()
+
+    const abatementDatePicker = wrapper.findWhere((w) => w.prop('name') === 'abatementDate')
+
+    expect(abatementDatePicker).toHaveLength(1)
+    expect(abatementDatePicker.prop('patient.diagnoses.abatementDate'))
+    expect(abatementDatePicker.prop('isRequired')).toBeTruthy()
+    expect(abatementDatePicker.prop('value')).toEqual(new Date(diagnosis.abatementDate))
+  })
+
+  it('should call the on change handler when abatementDate date changes', () => {
+    const expectedNewAbatementDate = addDays(1, new Date().getDate())
+    const { wrapper } = setup(false, false)
+
+    const abatementDatePicker = wrapper.findWhere((w) => w.prop('name') === 'abatementDate')
+    act(() => {
+      const onChange = abatementDatePicker.prop('onChange') as any
+      onChange(expectedNewAbatementDate)
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({
+      abatementDate: expectedNewAbatementDate.toISOString(),
+    })
+  })
+
+  it('should render a note input', () => {
+    const { wrapper } = setup()
+
+    const noteInput = wrapper.findWhere((w) => w.prop('name') === 'note')
+    expect(noteInput).toHaveLength(1)
+    expect(noteInput.prop('patient.diagnoses.note'))
+    expect(noteInput.prop('value')).toEqual(diagnosis.note)
+  })
+
+  it('should call the on change handler when note changes', () => {
+    const expectedNewNote = 'some new note'
+    const { wrapper } = setup(false, false)
+
+    const noteInput = wrapper.findWhere((w) => w.prop('name') === 'note')
+    act(() => {
+      const onChange = noteInput.prop('onChange') as any
+      onChange({ currentTarget: { value: expectedNewNote } })
+    })
+
+    expect(onDiagnosisChangeSpy).toHaveBeenCalledWith({ note: expectedNewNote })
+  })
+
+  it('should render all of the fields as disabled if the form is disabled', () => {
+    const { wrapper } = setup(true)
+    const nameInput = wrapper.findWhere((w) => w.prop('name') === 'name')
+    const statusSelector = wrapper.findWhere((w) => w.prop('name') === 'status')
+    const diagnosisDatePicker = wrapper.findWhere((w) => w.prop('name') === 'diagnosisDate')
+    const onsetDatePicker = wrapper.findWhere((w) => w.prop('name') === 'onsetDate')
+    const abatementeDatePicker = wrapper.findWhere((w) => w.prop('name') === 'abatementDate')
+    const noteInput = wrapper.findWhere((w) => w.prop('name') === 'note')
+
+    expect(nameInput.prop('isEditable')).toBeFalsy()
+    expect(statusSelector.prop('isEditable')).toBeFalsy()
+    expect(diagnosisDatePicker.prop('isEditable')).toBeFalsy()
+    expect(abatementeDatePicker.prop('isEditable')).toBeFalsy()
+    expect(onsetDatePicker.prop('isEditable')).toBeFalsy()
+    expect(noteInput.prop('isEditable')).toBeFalsy()
+  })
+
+  it('should render the form fields in an error state', () => {
+    const expectedError = {
+      message: 'some message error',
+      name: 'some name error',
+      diagnosisDate: 'some date error',
+      onsetDate: 'some date error',
+      abatementDate: 'some date error',
+      status: 'some status error',
+      note: 'some note error',
+    }
+
+    const { wrapper } = setup(false, false, expectedError)
+
+    const alert = wrapper.find(Alert)
+    const nameInput = wrapper.findWhere((w) => w.prop('name') === 'name')
+    const statusSelector = wrapper.findWhere((w) => w.prop('name') === 'status')
+    const diagnosisDatePicker = wrapper.findWhere((w) => w.prop('name') === 'diagnosisDate')
+    const onsetDatePicker = wrapper.findWhere((w) => w.prop('name') === 'onsetDate')
+    const abatementDatePicker = wrapper.findWhere((w) => w.prop('name') === 'abatementDate')
+
+    const noteInput = wrapper.findWhere((w) => w.prop('name') === 'note')
+
+    expect(alert).toHaveLength(1)
+    expect(alert.prop('message')).toEqual(expectedError.message)
+
+    expect(nameInput.prop('isInvalid')).toBeTruthy()
+    expect(nameInput.prop('feedback')).toEqual(expectedError.name)
+
+    expect(statusSelector.prop('isInvalid')).toBeTruthy()
+
+    expect(diagnosisDatePicker.prop('isInvalid')).toBeTruthy()
+    expect(diagnosisDatePicker.prop('feedback')).toEqual(expectedError.diagnosisDate)
+
+    expect(onsetDatePicker.prop('isInvalid')).toBeTruthy()
+    expect(onsetDatePicker.prop('feedback')).toEqual(expectedError.onsetDate)
+
+    expect(abatementDatePicker.prop('isInvalid')).toBeTruthy()
+    expect(abatementDatePicker.prop('feedback')).toEqual(expectedError.abatementDate)
+
+    expect(noteInput.prop('isInvalid')).toBeTruthy()
+    expect(noteInput.prop('feedback')).toEqual(expectedError.note)
+  })
+})
diff --git a/src/__tests__/patients/patient-slice.test.ts b/src/__tests__/patients/patient-slice.test.ts
index 4ce21fd54a..4be7ac9a18 100644
--- a/src/__tests__/patients/patient-slice.test.ts
+++ b/src/__tests__/patients/patient-slice.test.ts
@@ -28,7 +28,7 @@ import patient, {
 import PatientRepository from '../../shared/db/PatientRepository'
 import Allergy from '../../shared/model/Allergy'
 import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../shared/model/CarePlan'
-import Diagnosis from '../../shared/model/Diagnosis'
+import Diagnosis, { DiagnosisStatus } from '../../shared/model/Diagnosis'
 import Patient from '../../shared/model/Patient'
 import RelatedPerson from '../../shared/model/RelatedPerson'
 import { RootState } from '../../shared/store'
@@ -556,6 +556,9 @@ describe('patients slice', () => {
       const expectedDiagnosis = {
         diagnosisDate: new Date().toISOString(),
         name: 'diagnosis name',
+        onsetDate: new Date().toISOString(),
+        abatementDate: new Date().toISOString(),
+        status: DiagnosisStatus.Active,
       } as Diagnosis
 
       const expectedUpdatedPatient = {
@@ -582,6 +585,7 @@ describe('patients slice', () => {
         message: 'patient.diagnoses.error.unableToAdd',
         name: 'patient.diagnoses.error.nameRequired',
         date: 'patient.diagnoses.error.dateRequired',
+        status: 'patient.diagnoses.error.statusRequired',
       }
       const store = mockStore()
       const expectedDiagnosis = {} as Diagnosis
diff --git a/src/patients/diagnoses/AddDiagnosisModal.tsx b/src/patients/diagnoses/AddDiagnosisModal.tsx
index 449c9b00f3..687f16768a 100644
--- a/src/patients/diagnoses/AddDiagnosisModal.tsx
+++ b/src/patients/diagnoses/AddDiagnosisModal.tsx
@@ -1,92 +1,51 @@
-import { Modal, Alert } from '@hospitalrun/components'
+import { Modal } from '@hospitalrun/components'
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-import DatePickerWithLabelFormGroup from '../../shared/components/input/DatePickerWithLabelFormGroup'
-import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
 import useTranslator from '../../shared/hooks/useTranslator'
 import Diagnosis from '../../shared/model/Diagnosis'
 import { RootState } from '../../shared/store'
 import { addDiagnosis } from '../patient-slice'
+import DiagnosisForm from './DiagnosisForm'
 
 interface Props {
   show: boolean
   onCloseButtonClick: () => void
 }
 
+const initialDiagnosisState = {
+  name: '',
+  diagnosisDate: new Date().toISOString(),
+  onsetDate: new Date().toISOString(),
+  abatementDate: new Date().toISOString(),
+  note: '',
+}
+
 const AddDiagnosisModal = (props: Props) => {
   const { show, onCloseButtonClick } = props
   const dispatch = useDispatch()
   const { diagnosisError, patient } = useSelector((state: RootState) => state.patient)
   const { t } = useTranslator()
 
-  const [diagnosis, setDiagnosis] = useState({ name: '', diagnosisDate: new Date().toISOString() })
+  const [diagnosis, setDiagnosis] = useState(initialDiagnosisState)
 
   useEffect(() => {
-    setDiagnosis({ name: '', diagnosisDate: new Date().toISOString() })
+    setDiagnosis(initialDiagnosisState)
   }, [show])
 
+  const onDiagnosisChange = (newDiagnosis: Partial<Diagnosis>) => {
+    setDiagnosis(newDiagnosis as Diagnosis)
+  }
   const onSaveButtonClick = () => {
     dispatch(addDiagnosis(patient.id, diagnosis as Diagnosis))
   }
 
-  const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const name = event.target.value
-    setDiagnosis((prevDiagnosis) => ({ ...prevDiagnosis, name }))
-  }
-
-  const onDiagnosisDateChange = (diagnosisDate: Date) => {
-    if (diagnosisDate) {
-      setDiagnosis((prevDiagnosis) => ({
-        ...prevDiagnosis,
-        diagnosisDate: diagnosisDate.toISOString(),
-      }))
-    }
-  }
-
   const body = (
-    <>
-      <form>
-        {diagnosisError && (
-          <Alert
-            color="danger"
-            title={t('states.error')}
-            message={t(diagnosisError?.message || '')}
-          />
-        )}
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <TextInputWithLabelFormGroup
-                name="name"
-                label={t('patient.diagnoses.diagnosisName')}
-                isEditable
-                placeholder={t('patient.diagnoses.diagnosisName')}
-                value={diagnosis.name}
-                onChange={onNameChange}
-                isRequired
-                feedback={t(diagnosisError?.name || '')}
-                isInvalid={!!diagnosisError?.name}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="row">
-          <div className="col-md-12">
-            <DatePickerWithLabelFormGroup
-              name="diagnosisDate"
-              label={t('patient.diagnoses.diagnosisDate')}
-              value={new Date(diagnosis.diagnosisDate)}
-              isEditable
-              onChange={onDiagnosisDateChange}
-              isRequired
-              feedback={t(diagnosisError?.date || '')}
-              isInvalid={!!diagnosisError?.date}
-            />
-          </div>
-        </div>
-      </form>
-    </>
+    <DiagnosisForm
+      diagnosis={diagnosis}
+      diagnosisError={diagnosisError}
+      onChange={onDiagnosisChange}
+    />
   )
   return (
     <Modal
diff --git a/src/patients/diagnoses/DiagnosisForm.tsx b/src/patients/diagnoses/DiagnosisForm.tsx
new file mode 100644
index 0000000000..beb6508bb9
--- /dev/null
+++ b/src/patients/diagnoses/DiagnosisForm.tsx
@@ -0,0 +1,157 @@
+import { Alert, Row, Column } from '@hospitalrun/components'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import DatePickerWithLabelFormGroup from '../../shared/components/input/DatePickerWithLabelFormGroup'
+import SelectWithLabelFormGroup, {
+  Option,
+} from '../../shared/components/input/SelectWithLableFormGroup'
+import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
+import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import Diagnosis, { DiagnosisStatus } from '../../shared/model/Diagnosis'
+
+interface Error {
+  message?: string
+  name?: string
+  diagnosisDate?: string
+  onsetDate?: string
+  abatementDate?: string
+  status?: string
+  note?: string
+}
+interface Props {
+  diagnosis: Partial<Diagnosis>
+  diagnosisError?: Error
+  onChange?: (newDiagnosis: Partial<Diagnosis>) => void
+  disabled: boolean
+}
+
+const DiagnosisForm = (props: Props) => {
+  const { t } = useTranslation()
+  const { diagnosis, diagnosisError, disabled, onChange } = props
+  const [status, setStatus] = useState(diagnosis.status)
+
+  const onFieldChange = (name: string, value: string | DiagnosisStatus) => {
+    if (onChange) {
+      const newDiagnosis = {
+        ...diagnosis,
+        [name]: value,
+      }
+      onChange(newDiagnosis)
+    }
+  }
+
+  const statusOptions: Option[] = Object.values(DiagnosisStatus).map((v) => ({
+    label: v,
+    value: v,
+  }))
+
+  return (
+    <form>
+      {diagnosisError && (
+        <Alert
+          color="danger"
+          title={t('states.error')}
+          message={t(diagnosisError?.message || '')}
+        />
+      )}
+
+      <Row>
+        <Column md={12}>
+          <TextInputWithLabelFormGroup
+            isRequired
+            value={diagnosis.name}
+            label={t('patient.diagnoses.diagnosisName')}
+            name="name"
+            feedback={t(diagnosisError?.name || '')}
+            isInvalid={!!diagnosisError?.name}
+            isEditable={!disabled}
+            onChange={(event) => onFieldChange('name', event.currentTarget.value)}
+          />
+        </Column>
+      </Row>
+
+      <Row>
+        <Column md={12}>
+          <DatePickerWithLabelFormGroup
+            name="diagnosisDate"
+            label={t('patient.diagnoses.diagnosisDate')}
+            value={diagnosis.diagnosisDate ? new Date(diagnosis.diagnosisDate) : new Date()}
+            isEditable={!disabled}
+            onChange={(date) => onFieldChange('diagnosisDate', date.toISOString())}
+            isRequired
+            feedback={t(diagnosisError?.diagnosisDate || '')}
+            isInvalid={!!diagnosisError?.diagnosisDate}
+          />
+        </Column>
+      </Row>
+
+      <Row>
+        <Column md={12}>
+          <DatePickerWithLabelFormGroup
+            name="onsetDate"
+            label={t('patient.diagnoses.onsetDate')}
+            value={diagnosis.onsetDate ? new Date(diagnosis.onsetDate) : new Date()}
+            isEditable={!disabled}
+            onChange={(date) => onFieldChange('onsetDate', date.toISOString())}
+            isRequired
+            feedback={t(diagnosisError?.onsetDate || '')}
+            isInvalid={!!diagnosisError?.onsetDate}
+          />
+        </Column>
+      </Row>
+
+      <Row>
+        <Column md={12}>
+          <DatePickerWithLabelFormGroup
+            name="abatementDate"
+            label={t('patient.diagnoses.abatementDate')}
+            value={diagnosis.abatementDate ? new Date(diagnosis.abatementDate) : new Date()}
+            isEditable={!disabled}
+            isRequired
+            onChange={(date) => onFieldChange('abatementDate', date.toISOString())}
+            feedback={t(diagnosisError?.abatementDate || '')}
+            isInvalid={!!diagnosisError?.abatementDate}
+          />
+        </Column>
+      </Row>
+
+      <Row>
+        <Column md={12}>
+          <SelectWithLabelFormGroup
+            name="status"
+            label={t('patient.diagnoses.status')}
+            isRequired
+            options={statusOptions}
+            defaultSelected={statusOptions.filter(({ value }) => value === status)}
+            onChange={(values) => {
+              onFieldChange('status', values[0])
+              setStatus(values[0] as DiagnosisStatus)
+            }}
+            isEditable={!disabled}
+            isInvalid={!!diagnosisError?.status}
+          />
+        </Column>
+      </Row>
+
+      <Row>
+        <Column md={12}>
+          <TextFieldWithLabelFormGroup
+            value={diagnosis.note}
+            label={t('patient.diagnoses.note')}
+            name="note"
+            feedback={t(diagnosisError?.note || '')}
+            isInvalid={!!diagnosisError?.note}
+            isEditable={!disabled}
+            onChange={(event) => onFieldChange('note', event.currentTarget.value)}
+          />
+        </Column>
+      </Row>
+    </form>
+  )
+}
+
+DiagnosisForm.defaultProps = {
+  disabled: false,
+}
+export default DiagnosisForm
diff --git a/src/patients/patient-slice.ts b/src/patients/patient-slice.ts
index 83f8695913..00f96f4e34 100644
--- a/src/patients/patient-slice.ts
+++ b/src/patients/patient-slice.ts
@@ -57,6 +57,7 @@ interface AddDiagnosisError {
   message?: string
   name?: string
   date?: string
+  status?: string
 }
 
 interface AddNoteError {
@@ -354,6 +355,13 @@ function validateDiagnosis(diagnosis: Diagnosis) {
     error.date = 'patient.diagnoses.error.dateRequired'
   }
 
+  if (!diagnosis.onsetDate) {
+    error.date = 'patient.diagnoses.error.dateRequired'
+  }
+
+  if (!diagnosis.status) {
+    error.status = 'patient.diagnoses.error.statusRequired'
+  }
   return error
 }
 
diff --git a/src/shared/locales/enUs/translations/patient/index.ts b/src/shared/locales/enUs/translations/patient/index.ts
index ed7066cdce..88764c44f3 100644
--- a/src/shared/locales/enUs/translations/patient/index.ts
+++ b/src/shared/locales/enUs/translations/patient/index.ts
@@ -76,6 +76,16 @@ export default {
       new: 'Add Diagnosis',
       diagnosisName: 'Diagnosis Name',
       diagnosisDate: 'Diagnosis Date',
+      onsetDate: 'Onset Date',
+      abatementDate: 'Abatement Date',
+      status: 'Status',
+      active: 'Active',
+      recurrence: 'Recurrence',
+      relapse: 'Relapse',
+      inactive: 'Inactive',
+      remission: 'Remission',
+      resolved: 'Resolved',
+      note: 'Note',
       warning: {
         noDiagnoses: 'No Diagnoses',
       },
diff --git a/src/shared/model/Diagnosis.ts b/src/shared/model/Diagnosis.ts
index ad259ef50c..6d3f3efe56 100644
--- a/src/shared/model/Diagnosis.ts
+++ b/src/shared/model/Diagnosis.ts
@@ -1,5 +1,18 @@
+export enum DiagnosisStatus {
+  Active = 'active',
+  Recurrence = 'recurrence',
+  Relapse = 'relapse',
+  Inactive = 'inactive',
+  Remission = 'remisison',
+  Resolved = 'resolved',
+}
+
 export default interface Diagnosis {
   id: string
   name: string
   diagnosisDate: string
+  onsetDate: string
+  abatementDate: string
+  status: DiagnosisStatus
+  note: string
 }