diff --git a/src/patients/visits/FilterPatientModal.tsx b/src/patients/visits/FilterPatientModal.tsx
index e483305b1e..9ab199cbe6 100644
--- a/src/patients/visits/FilterPatientModal.tsx
+++ b/src/patients/visits/FilterPatientModal.tsx
@@ -2,7 +2,11 @@ import React, { useState } from 'react'
 import { Label, Modal, Select } from '@hospitalrun/components'
 import useTranslator from '../../shared/hooks/useTranslator'
 import { Button } from 'react-bootstrap'
-import { appointmentTypes } from '../../scheduling/appointments/constants/Appointment'
+import {
+  appointmentStatus,
+  appointmentTypes,
+} from '../../scheduling/appointments/constants/Appointment'
+// import { getAllPatients } from '../../scheduling/appointments/service/Patients'
 
 interface Props {
   show: boolean
@@ -11,13 +15,21 @@ interface Props {
 }
 
 const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props) => {
+  // const func = () => {
+  //   console.log('ALL PATIENTS DATA', getAllPatients())
+  // }
+
+  // useEffect(() => {
+  //   func()
+  // }, [])
+
   const { t } = useTranslator()
 
-  const [patientId, setpatientId] = useState('')
+  const [patientStatus, setPatientStatus] = useState('')
   const [appointmentType, setappointmentType] = useState('')
 
   const clearValues = () => {
-    setpatientId('')
+    setPatientStatus('')
     setappointmentType('')
   }
 
@@ -32,9 +44,17 @@ const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props)
             onChange={(values) => setappointmentType(values[0])}
           />
         </div>
+        <div className="form-group">
+          <Label text="Status" title="Status" />
+          <Select
+            id="status"
+            options={appointmentStatus}
+            onChange={(values) => setPatientStatus(values[0])}
+          />
+        </div>
         <Button
           onClick={() => {
-            onFieldChange && onFieldChange(patientId, appointmentType)
+            onFieldChange && onFieldChange(patientStatus, appointmentType)
             clearValues()
             onCloseButtonClick()
           }}
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index f24e9ea87c..129e9d1a6e 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -1,14 +1,32 @@
-import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
+// import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
+import { Select, Label, Alert } from '@hospitalrun/components'
 import React from 'react'
 
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
-import { SelectOption } from '../../shared/components/input/SelectOption'
-import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
+// import { SelectOption } from '../../shared/components/input/SelectOption'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
-import PatientRepository from '../../shared/db/PatientRepository'
+// import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
+// import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+// import PatientRepository from '../../shared/db/PatientRepository'
 import useTranslator from '../../shared/hooks/useTranslator'
-import Appointment from '../../shared/model/Appointment'
 import Patient from '../../shared/model/Patient'
+// import { Appointment } from './ViewAppointments'
+import { appointmentTypes, appointmentStatus } from '../appointments/constants/Appointment'
+
+export interface Appointment {
+  appointmentType: {
+    text: string
+  }
+  participant: {
+    actor: {
+      reference: string
+    }
+  }[]
+  id: string
+  start: Date
+  minutesDuration: number
+  status: string
+}
 
 interface Props {
   appointment: Appointment
@@ -22,19 +40,24 @@ const AppointmentDetailForm = (props: Props) => {
   const { onFieldChange, appointment, patient, isEditable, error } = props
   const { t } = useTranslator()
 
+  const patientName: string = String(patient)
+
   const onDateChange = (date: Date, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, date.toISOString())
 
-  const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
-    onFieldChange && onFieldChange(fieldName, event.target.value)
+  // const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
+  //   onFieldChange && onFieldChange(fieldName, event.target.value)
+
+  // const typeOptions: SelectOption[] = [
+  //   { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
+  //   { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
+  //   { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
+  //   { label: t('scheduling.appointment.types.routine'), value: 'routine' },
+  //   { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
+  // ]
 
-  const typeOptions: SelectOption[] = [
-    { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
-    { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
-    { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
-    { label: t('scheduling.appointment.types.routine'), value: 'routine' },
-    { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
-  ]
+  var end = new Date(appointment.start)
+  end.setMinutes(end.getMinutes() + appointment.minutesDuration)
 
   return (
     <>
@@ -47,10 +70,10 @@ const AppointmentDetailForm = (props: Props) => {
               isRequired
               text={t('scheduling.appointment.patient')}
             />
-            <Typeahead
+            {/* <Typeahead
               id="patientTypeahead"
               disabled={!isEditable || patient !== undefined}
-              value={patient?.fullName}
+              value={patient}
               placeholder={t('scheduling.appointment.patient')}
               onChange={(p: Patient[]) =>
                 onFieldChange && p[0] && onFieldChange('patient', p[0].id)
@@ -60,6 +83,11 @@ const AppointmentDetailForm = (props: Props) => {
               renderMenuItemChildren={(p: Patient) => <div>{`${p.fullName} (${p.code})`}</div>}
               isInvalid={!!error?.patient}
               feedback={t(error?.patient)}
+            /> */}
+            <TextInputWithLabelFormGroup
+              name="patientName"
+              value={patientName}
+              isEditable={isEditable}
             />
           </div>
         </div>
@@ -69,11 +97,7 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="startDate"
             label={t('scheduling.appointment.startDate')}
-            value={
-              appointment.startDateTime && appointment.startDateTime.length > 0
-                ? new Date(appointment.startDateTime)
-                : undefined
-            }
+            value={appointment.start ? new Date(appointment.start) : undefined}
             isEditable={isEditable}
             isInvalid={error?.startDateTime}
             feedback={t(error?.startDateTime)}
@@ -86,11 +110,7 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="endDate"
             label={t('scheduling.appointment.endDate')}
-            value={
-              appointment.endDateTime && appointment.endDateTime.length > 0
-                ? new Date(appointment.endDateTime)
-                : undefined
-            }
+            value={appointment.start ? end : undefined}
             isEditable={isEditable}
             onChange={(date: Date) => {
               onDateChange(date, 'endDateTime')
@@ -98,7 +118,7 @@ const AppointmentDetailForm = (props: Props) => {
           />
         </div>
       </div>
-      <div className="row">
+      {/* <div className="row">
         <div className="col">
           <TextInputWithLabelFormGroup
             name="location"
@@ -110,22 +130,40 @@ const AppointmentDetailForm = (props: Props) => {
             }}
           />
         </div>
-      </div>
+      </div> */}
       <div className="row">
         <div className="col">
           <div className="form-group" data-testid="typeSelect">
             <Label text={t('scheduling.appointment.type')} title="type" />
             <Select
               id="type"
-              options={typeOptions}
-              defaultSelected={typeOptions.filter(({ value }) => value === appointment.type)}
-              onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              options={appointmentTypes}
+              defaultSelected={appointmentTypes.filter(
+                ({ value }) => value === appointment.appointmentType.text,
+              )}
+              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
               disabled={!isEditable}
             />
           </div>
         </div>
       </div>
       <div className="row">
+        <div className="col">
+          <div className="form-group" data-testid="typeSelect">
+            <Label text="Status" title="Status" />
+            <Select
+              id="status"
+              options={appointmentStatus}
+              defaultSelected={appointmentStatus.filter(
+                ({ value }) => value === appointment.status,
+              )}
+              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              disabled={!isEditable}
+            />
+          </div>
+        </div>
+      </div>
+      {/* <div className="row">
         <div className="col">
           <div className="form-group">
             <TextFieldWithLabelFormGroup
@@ -139,7 +177,7 @@ const AppointmentDetailForm = (props: Props) => {
             />
           </div>
         </div>
-      </div>
+      </div> */}
     </>
   )
 }
diff --git a/src/scheduling/appointments/ViewAppointments.tsx b/src/scheduling/appointments/ViewAppointments.tsx
index 1fa52c5a5b..64f53fe935 100644
--- a/src/scheduling/appointments/ViewAppointments.tsx
+++ b/src/scheduling/appointments/ViewAppointments.tsx
@@ -8,7 +8,8 @@ import { useUpdateTitle } from '../../page-header/title/TitleContext'
 import FilterPatientModal from '../../patients/visits/FilterPatientModal'
 import Loading from '../../shared/components/Loading'
 import useTranslator from '../../shared/hooks/useTranslator'
-import { getAppointment, getPatientNameById } from './service/Appointments'
+import { getAppointment } from './service/Appointments'
+import { getPatientNameById } from './service/Patients'
 
 interface Event {
   id: string
@@ -18,9 +19,10 @@ interface Event {
   title: string
   allDay: boolean
   type: string
+  status: string
 }
 
-interface Appointment {
+export interface Appointment {
   resource: {
     appointmentType: {
       text: string
@@ -54,14 +56,13 @@ const ViewAppointments = () => {
   useAddBreadcrumbs(breadcrumbs, true)
   const [showFilter, setshowFilter] = useState(false)
 
-  const [patientId, setpatientId] = useState('')
+  const [patientStatus, setpatientStatus] = useState('')
   const [appointmentType, setappointmentType] = useState('')
 
   const func = async () => {
     setAppointment(await getAppointment())
     setIsLoading(false)
     console.log('appointment data', await getAppointment())
-    console.log('patient data', await getPatientNameById(140998131777537))
   }
 
   useEffect(() => {
@@ -92,7 +93,7 @@ const ViewAppointments = () => {
         outlined
         color="success"
         onClick={() => {
-          setpatientId('')
+          setpatientStatus('')
           setappointmentType('')
         }}
       >
@@ -108,7 +109,9 @@ const ViewAppointments = () => {
   useEffect(() => {
     if (appointments) {
       appointments.map(async (appointment: Appointment) => {
-        const patientName = await getPatientNameById(140998131777537)
+        const patientName = await getPatientNameById(
+          parseInt(String(appointment.resource.participant[0].actor.reference.substr(8))),
+        )
         console.log('minutes duration: ', appointment.resource.minutesDuration)
         var end = new Date(appointment.resource.start)
         end.setMinutes(end.getMinutes() + appointment.resource.minutesDuration)
@@ -135,15 +138,15 @@ const ViewAppointments = () => {
   }
 
   return (
-    <div>
+    <div style={{ cursor: 'pointer' }}>
       <Calendar
         events={
-          appointmentType.length !== 0 && patientId.length !== 0
+          appointmentType.length !== 0 && patientStatus.length !== 0
             ? events.filter(
-                (event) => event.patient === patientId && event.type === appointmentType,
+                (event) => event.status === patientStatus && event.type === appointmentType,
               )
-            : patientId.length !== 0
-            ? events.filter((event) => event.patient === patientId)
+            : patientStatus.length !== 0
+            ? events.filter((event) => event.status === patientStatus)
             : appointmentType.length !== 0
             ? events.filter((event) => event.type === appointmentType)
             : events
@@ -158,7 +161,7 @@ const ViewAppointments = () => {
         show={showFilter}
         onCloseButtonClick={() => setshowFilter(false)}
         onFieldChange={(patientId: any, type: any) => {
-          setpatientId(patientId)
+          setpatientStatus(patientId)
           setappointmentType(type)
         }}
       />
diff --git a/src/scheduling/appointments/constants/Appointment.tsx b/src/scheduling/appointments/constants/Appointment.tsx
index 28a8f06a77..60bf695c0c 100644
--- a/src/scheduling/appointments/constants/Appointment.tsx
+++ b/src/scheduling/appointments/constants/Appointment.tsx
@@ -10,3 +10,8 @@ export const appointmentTypes: SelectOption[] = [
   { label: 'Physical Exam', value: 'Physical Exam' },
   { label: 'Office Flu Only', value: 'Office Flu Only' },
 ]
+
+export const appointmentStatus: SelectOption[] = [
+  { label: 'Scheduled', value: 'Scheduled' },
+  { label: 'Confirmed', value: 'Confirmed' },
+]
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index 0b2ba094b9..6ffed2b90a 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -1,5 +1,6 @@
-import { Spinner, Button, Toast } from '@hospitalrun/components'
-import isEmpty from 'lodash/isEmpty'
+// import { Spinner, Button, Toast } from '@hospitalrun/components'
+import { Spinner, Button } from '@hospitalrun/components'
+// import isEmpty from 'lodash/isEmpty'
 import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 
@@ -7,11 +8,12 @@ import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumb
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
 import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
-import Appointment from '../../../shared/model/Appointment'
+// import Appointment from '../../../shared/model/Appointment'
 import useAppointment from '../../hooks/useAppointment'
-import useUpdateAppointment from '../../hooks/useUpdateAppointment'
+// import useUpdateAppointment from '../../hooks/useUpdateAppointment'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+// import { Appointment } from '../ViewAppointments'
 
 const EditAppointment = () => {
   const { t } = useTranslator()
@@ -23,15 +25,15 @@ const EditAppointment = () => {
   }, [updateTitle, t])
   const history = useHistory()
 
-  const [newAppointment, setAppointment] = useState({} as Appointment)
+  const [newAppointment, setAppointment] = useState<any>()
   const { data: currentAppointment, isLoading: isLoadingAppointment } = useAppointment(id)
 
-  const {
-    mutate: updateMutate,
-    isLoading: isLoadingUpdate,
-    isError: isErrorUpdate,
-    error: updateMutateError,
-  } = useUpdateAppointment(newAppointment)
+  // const {
+  //   mutate: updateMutate,
+  //   isLoading: isLoadingUpdate,
+  //   isError: isErrorUpdate,
+  //   error: updateMutateError,
+  // } = useUpdateAppointment(newAppointment)
   const { data: patient } = usePatient(currentAppointment ? currentAppointment.patient : id)
 
   const breadcrumbs = [
@@ -57,14 +59,14 @@ const EditAppointment = () => {
     history.push(`/appointments/${newAppointment.id}`)
   }
 
-  const onSave = () => {
-    if (isEmpty(updateMutateError) && !isErrorUpdate) {
-      updateMutate(newAppointment).then(() => {
-        Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
-        history.push(`/appointments/${newAppointment.id}`)
-      })
-    }
-  }
+  // const onSave = () => {
+  //   if (isEmpty(updateMutateError) && !isErrorUpdate) {
+  //     updateMutate(newAppointment).then(() => {
+  //       Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
+  //       history.push(`/appointments/${newAppointment.id}`)
+  //     })
+  //   }
+  // }
 
   const onFieldChange = (key: string, value: string | boolean) => {
     setAppointment({
@@ -73,22 +75,45 @@ const EditAppointment = () => {
     })
   }
 
-  if (isLoadingAppointment || isLoadingUpdate) {
+  // if (isLoadingAppointment || isLoadingUpdate) {
+  //   return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
+  // }
+
+  if (isLoadingAppointment) {
     return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   }
 
   return (
+    // <div>
+    //   <AppointmentDetailForm
+    //     isEditable
+    //     appointment={newAppointment}
+    //     patient={patient}
+    //     onFieldChange={onFieldChange}
+    //     error={updateMutateError}
+    //   />
+    //   <div className="row float-right">
+    //     <div className="btn-group btn-group-lg mr-3">
+    //       <Button className="mr-2" color="success" onClick={onSave}>
+    //         {t('scheduling.appointments.updateAppointment')}
+    //       </Button>
+    //       <Button color="danger" onClick={onCancel}>
+    //         {t('actions.cancel')}
+    //       </Button>
+    //     </div>
+    //   </div>
+    // </div>
+
     <div>
       <AppointmentDetailForm
         isEditable
         appointment={newAppointment}
         patient={patient}
         onFieldChange={onFieldChange}
-        error={updateMutateError}
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg mr-3">
-          <Button className="mr-2" color="success" onClick={onSave}>
+          <Button className="mr-2" color="success">
             {t('scheduling.appointments.updateAppointment')}
           </Button>
           <Button color="danger" onClick={onCancel}>
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index ddd5e056c4..32689db8b0 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -1,18 +1,20 @@
-import { Button, Spinner, Toast } from '@hospitalrun/components'
-import addMinutes from 'date-fns/addMinutes'
-import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
-import isEmpty from 'lodash/isEmpty'
+// import { Button, Spinner, Toast } from '@hospitalrun/components'
+import { Button, Spinner } from '@hospitalrun/components'
+// import addMinutes from 'date-fns/addMinutes'
+// import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
+// import isEmpty from 'lodash/isEmpty'
 import React, { useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
 import useTranslator from '../../../shared/hooks/useTranslator'
-import Appointment from '../../../shared/model/Appointment'
+// import Appointment from '../../../shared/model/Appointment'
 import Patient from '../../../shared/model/Patient'
 import useScheduleAppointment from '../../hooks/useScheduleAppointment'
-import AppointmentDetailForm from '../AppointmentDetailForm'
+import AppointmentDetailForm, { Appointment } from '../AppointmentDetailForm'
 import { AppointmentError } from '../util/validate-appointment'
+// import { Appointment } from '../ViewAppointments'
 
 const breadcrumbs = [
   { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
@@ -37,47 +39,49 @@ const NewAppointment = () => {
   })
   useAddBreadcrumbs(breadcrumbs, true)
 
-  const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
-  const endDateTime = addMinutes(startDateTime, 60)
+  // const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
+  // const endDateTime = addMinutes(startDateTime, 60)
   const [saved, setSaved] = useState(false)
-  const [newAppointmentMutateError, setError] = useState<AppointmentError>({} as AppointmentError)
-  const [newAppointment, setAppointment] = useState({
-    patient: patient || '',
-    startDateTime: startDateTime.toISOString(),
-    endDateTime: endDateTime.toISOString(),
-    location: '',
-    reason: '',
-    type: '',
-  } as Appointment)
+  const [newAppointmentMutateError, _setError] = useState<AppointmentError>({} as AppointmentError)
+  // const [newAppointment, setAppointment] = useState({
+  //   patient: patient || '',
+  //   startDateTime: startDateTime.toISOString(),
+  //   endDateTime: endDateTime.toISOString(),
+  //   location: '',
+  //   reason: '',
+  //   type: '',
+  // } as Appointment)
+
+  const [newAppointment, setAppointment] = useState({} as Appointment)
 
   const {
     mutate: newAppointmentMutate,
     isLoading: isLoadingNewAppointment,
     isError: isErrorNewAppointment,
-    validator: validateNewAppointment,
+    validator: _validateNewAppointment,
   } = useScheduleAppointment()
 
   const onCancelClick = () => {
     history.push('/appointments')
   }
 
-  const onSave = () => {
-    setSaved(true)
-    setError(validateNewAppointment(newAppointment))
-  }
+  // const onSave = () => {
+  //   setSaved(true)
+  //   setError(validateNewAppointment(newAppointment))
+  // }
 
   useEffect(() => {
     // if save click and no error proceed, else give error message.
-    if (saved) {
-      if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
-        newAppointmentMutate(newAppointment).then((result) => {
-          Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
-          history.push(`/appointments/${result?.id}`)
-        })
-      } else if (!isEmpty(newAppointmentMutateError)) {
-        newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
-      }
-    }
+    // if (saved) {
+    //   if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
+    //     newAppointmentMutate(newAppointment).then((result) => {
+    //       Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
+    //       history.push(`/appointments/${result?.id}`)
+    //     })
+    //   } else if (!isEmpty(newAppointmentMutateError)) {
+    //     newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
+    //   }
+    // }
     setSaved(false)
   }, [
     saved,
@@ -101,6 +105,27 @@ const NewAppointment = () => {
   }
 
   return (
+    // <div>
+    //   <form aria-label="new appointment form">
+    //     <AppointmentDetailForm
+    //       appointment={newAppointment as Appointment}
+    //       patient={patient as Patient}
+    //       error={newAppointmentMutateError}
+    //       onFieldChange={onFieldChange}
+    //     />
+    //     <div className="row float-right">
+    //       <div className="btn-group btn-group-lg mr-3">
+    //         <Button className="mr-2" color="success" onClick={onSave}>
+    //           {t('scheduling.appointments.createAppointment')}
+    //         </Button>
+    //         <Button color="danger" onClick={onCancelClick}>
+    //           {t('actions.cancel')}
+    //         </Button>
+    //       </div>
+    //     </div>
+    //   </form>
+    // </div>
+
     <div>
       <form aria-label="new appointment form">
         <AppointmentDetailForm
@@ -111,7 +136,7 @@ const NewAppointment = () => {
         />
         <div className="row float-right">
           <div className="btn-group btn-group-lg mr-3">
-            <Button className="mr-2" color="success" onClick={onSave}>
+            <Button className="mr-2" color="success">
               {t('scheduling.appointments.createAppointment')}
             </Button>
             <Button color="danger" onClick={onCancelClick}>
diff --git a/src/scheduling/appointments/service/Appointments.tsx b/src/scheduling/appointments/service/Appointments.tsx
index 451c2a1df7..7bd4d2e24c 100644
--- a/src/scheduling/appointments/service/Appointments.tsx
+++ b/src/scheduling/appointments/service/Appointments.tsx
@@ -11,26 +11,9 @@ const config = {
   },
 }
 
-export const getAllPatients = () => {
-  return axios
-    .get(`${endpoint}/Patient?_count=10&_offset=1`, config)
-    .then(async (response) => {
-      console.log(response)
-      const data = await response.data
-      console.log(data)
-      return data
-    })
-    .catch((error) => {
-      console.log(error)
-    })
-}
-
 export const getAppointment = () => {
   return axios
-    .get(
-      `${endpoint}/Appointment?departmentId=150&practiceId=195903&practitioner=140857915539458&patient=140919926030337`,
-      config,
-    )
+    .get(`${endpoint}/Appointment?practitioner=140857915539458`, config)
     .then(async (response) => {
       console.log(response)
       const data = await response.data
@@ -43,16 +26,15 @@ export const getAppointment = () => {
     })
 }
 
-export const getPatientNameById = (id: number) => {
+export const getAppointmentId = (id: number) => {
   return axios
-    .get(`${endpoint}/Patient/${id}`, config)
+    .get(`${endpoint}/Appointment/${id}`, config)
     .then(async (response) => {
       console.log(response)
       const data = await response.data
       console.log(data)
-      console.log(data.data.name[0].given.join(' '))
-      const name = data.data.name[0].given.join(' ')
-      return name
+      console.log(data.data)
+      return data.data
     })
     .catch((error) => {
       console.log(error)
diff --git a/src/scheduling/appointments/service/Patients.tsx b/src/scheduling/appointments/service/Patients.tsx
new file mode 100644
index 0000000000..4e41cf9748
--- /dev/null
+++ b/src/scheduling/appointments/service/Patients.tsx
@@ -0,0 +1,42 @@
+import axios from 'axios'
+import dotenv from 'dotenv'
+dotenv.config()
+
+const endpoint = `${process.env.REACT_APP_ENDPOINT}`
+
+const config = {
+  headers: {
+    Authorization: `${process.env.REACT_APP_AUTHORIZATION}`,
+    'x-source-id': `${process.env.REACT_APP_XSOURCEID}`,
+  },
+}
+
+export const getAllPatients = () => {
+  return axios
+    .get(`${endpoint}/Patient`, config)
+    .then(async (response) => {
+      console.log(response)
+      const data = await response.data
+      console.log(data)
+      return data
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+export const getPatientNameById = (id: number) => {
+  return axios
+    .get(`${endpoint}/Patient/${id}`, config)
+    .then(async (response) => {
+      console.log(response)
+      const data = await response.data
+      console.log(data)
+      console.log(data.data.name[0].given.join(' '))
+      const name = data.data.name[0].given.join(' ')
+      return name
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index 23b5518ecb..953a1a39a5 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -3,17 +3,21 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 
-import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
+// import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../../page-header/button-toolbar/ButtonBarProvider'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
-import usePatient from '../../../patients/hooks/usePatient'
+// import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
+import Patient from '../../../shared/model/Patient'
 import Permissions from '../../../shared/model/Permissions'
 import { RootState } from '../../../shared/store'
-import useAppointment from '../../hooks/useAppointment'
+// import useAppointment from '../../hooks/useAppointment'
 import useDeleteAppointment from '../../hooks/useDeleteAppointment'
-import AppointmentDetailForm from '../AppointmentDetailForm'
-import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+import AppointmentDetailForm, { Appointment } from '../AppointmentDetailForm'
+import { getAppointmentId } from '../service/Appointments'
+import { getPatientNameById } from '../service/Patients'
+// import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+// import { Appointment } from '../ViewAppointments'
 
 const ViewAppointment = () => {
   const { t } = useTranslator()
@@ -32,13 +36,41 @@ const ViewAppointment = () => {
   const setButtonToolBar = useButtonToolbarSetter()
   const { permissions } = useSelector((state: RootState) => state.user)
 
-  const { data: appointment } = useAppointment(id)
-  const { data: patient } = usePatient(appointment ? appointment.patient : id)
-  const breadcrumbs = [
-    { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
-    { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
-  ]
-  useAddBreadcrumbs(breadcrumbs, true)
+  // const { data: appointment } = useAppointment(id)
+
+  const [appointment, setAppointment] = useState<Appointment>()
+  const [patientName, setPatientName] = useState<Patient>()
+
+  const appointmentFunc = async () => {
+    setAppointment(await getAppointmentId(id))
+  }
+
+  const patientFunc = async () => {
+    setPatientName(
+      await getPatientNameById(
+        parseInt(String(appointment?.participant[0].actor.reference.substr(8))),
+      ),
+    )
+  }
+
+  useEffect(() => {
+    console.log(id)
+    appointmentFunc()
+  }, [])
+
+  useEffect(() => {
+    if (appointment) {
+      console.log('view appointment', appointment)
+      patientFunc()
+    }
+  }, [appointment])
+
+  // const { data: patient } = usePatient(appointment ? appointment.patient : id)
+  // const breadcrumbs = [
+  //   { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+  //   { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
+  // ]
+  // useAddBreadcrumbs(breadcrumbs, true)
 
   const onAppointmentDeleteButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
@@ -101,9 +133,13 @@ const ViewAppointment = () => {
 
   return (
     <>
-      {patient && appointment ? (
+      {patientName && appointment ? (
         <div>
-          <AppointmentDetailForm appointment={appointment} isEditable={false} patient={patient} />
+          <AppointmentDetailForm
+            appointment={appointment}
+            isEditable={false}
+            patient={patientName}
+          />
           <Modal
             body={t('scheduling.appointment.deleteConfirmationMessage')}
             buttonsAlignment="right"
diff --git a/src/shared/model/Appointment.ts b/src/shared/model/Appointment.ts
index bdd6791c77..fbf938d3f2 100644
--- a/src/shared/model/Appointment.ts
+++ b/src/shared/model/Appointment.ts
@@ -8,3 +8,5 @@ export default interface Appointment extends AbstractDBModel {
   reason: string
   type: string
 }
+
+