diff --git a/packages/esm-patient-chart-app/package.json b/packages/esm-patient-chart-app/package.json
index d0e382ff45..76f2fad1c9 100644
--- a/packages/esm-patient-chart-app/package.json
+++ b/packages/esm-patient-chart-app/package.json
@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-patient-common-lib": "^3.0.3",
     "carbon-components-react": "^7.25.0",
     "lodash-es": "^4.17.15",
     "uuid": "^8.3.2"
@@ -52,6 +51,7 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@types/uuid": "^8.3.0"
+    "@types/uuid": "^8.3.0",
+    "@openmrs/esm-patient-common-lib": "^3.0.3"
   }
 }
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx
index 4410da8a8e..f41145b60f 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx
@@ -90,7 +90,7 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
                 {rows.map((row, ind) => (
                   <React.Fragment key={row.id}>
                     <TableExpandRow {...getRowProps({ row })}>
-                      {row.cells.map((cell, ind) => (
+                      {row.cells.map((cell) => (
                         <TableCell key={cell.id}>{cell.value}</TableCell>
                       ))}
                     </TableExpandRow>
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-detail.component.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-detail.component.tsx
index a8751b633c..aa713ad767 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-detail.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-detail.component.tsx
@@ -1,16 +1,12 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import dayjs from 'dayjs';
 import styles from '../visit-detail-overview.scss';
 import EncounterList from './encounter-list.component';
 import VisitSummary from './visit-summary.component';
 import { Button } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 import { Encounter } from '../visit.resource';
-import { Visit } from '@openmrs/esm-framework';
-
-function formatDateTime(date) {
-  return dayjs(date).format('MMM DD, YYYY - hh:mm');
-}
+import { formatDate, formatDatetime, formatTime, parseDate, Visit } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
 
 interface VisitDetailComponentProps {
   visit: Visit;
@@ -25,7 +21,7 @@ const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visit, pati
     () =>
       visit.encounters.map((encounter: Encounter) => ({
         id: encounter.uuid,
-        time: dayjs(encounter.encounterDateTime).format('hh:mm'),
+        time: formatTime(parseDate(encounter.encounterDatetime)),
         encounterType: encounter.encounterType.display,
         provider: encounter.encounterProviders.length > 0 ? encounter.encounterProviders[0].display : '',
         obs: encounter.obs,
@@ -44,7 +40,7 @@ const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visit, pati
         <h4 className={styles.productiveHeading02}>
           {visit.visitType.display}
           <br />
-          <p className={`${styles.bodyLong01} ${styles.text02}`}>{formatDateTime(visit.startDatetime)}</p>
+          <p className={`${styles.bodyLong01} ${styles.text02}`}>{formatDatetime(parseDate(visit.startDatetime))}</p>
         </h4>
         <div className={styles.toggleButtons}>
           <Button
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.test.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.test.tsx
index 647572871d..1afdc9cd2a 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.test.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.test.tsx
@@ -74,7 +74,7 @@ describe('VisitDetailOverview', () => {
     userEvent.click(encountersButton);
 
     expect(screen.getByRole('table')).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /ECH Aug 18, 2021/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /ECH 18-Aug-2021/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /encounters/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Visit summary/i })).toBeInTheDocument();
     expect(screen.getByRole('row', { name: /Vitals/i })).toBeInTheDocument();
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit.resource.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/visit.resource.tsx
index 126c1a6ac9..d964188ff5 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/visit.resource.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/visit.resource.tsx
@@ -48,7 +48,7 @@ export function usePastVisits(patientUuid: string) {
 
 export interface Encounter {
   uuid: string;
-  encounterDateTime: string;
+  encounterDatetime: string;
   encounterProviders: Array<{
     uuid: string;
     display: string;
diff --git a/yarn.lock b/yarn.lock
index 964c89484a..a4986de2cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8770,7 +8770,7 @@ file-loader@6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"file-saver@github:eligrey/FileSaver.js#1.3.8":
+file-saver@eligrey/FileSaver.js#1.3.8:
   version "1.3.8"
   resolved "https://codeload.github.com/eligrey/FileSaver.js/tar.gz/e865e37af9f9947ddcced76b549e27dc45c1cb2e"