diff --git a/packages/esm-patient-chart-app/src/visit/visit-dialog.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-dialog.component.tsx
index 5541482500..9acfd50d89 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-dialog.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-dialog.component.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
-import StartVisit from './visit-prompt/start-visit.component';
-import EndVisit from './visit-prompt/end-visit.component';
-import CancelVisit from './visit-prompt/cancel-visit.component';
+import StartVisitDialog from './visit-prompt/start-visit-dialog.component';
+import EndVisitDialog from './visit-prompt/end-visit-dialog.component';
+import CancelVisitDialog from './visit-prompt/cancel-visit-dialog.component';
+import { useVisitDialog } from './useVisitDialog';
 
 interface VisitDialogProps {
   patientUuid: string;
 }
 
-const VisitDialog: React.FC<VisitDialogProps> = ({ patientUuid }) => (
-  <>
-    <StartVisit patientUuid={patientUuid} />
-    <EndVisit patientUuid={patientUuid} />
-    <CancelVisit patientUuid={patientUuid} />
-  </>
-);
+const VisitDialog: React.FC<VisitDialogProps> = ({ patientUuid }) => {
+  const { type } = useVisitDialog(patientUuid);
+
+  if (type === 'cancel') return <CancelVisitDialog patientUuid={patientUuid} />;
+  if (type === 'end') return <EndVisitDialog patientUuid={patientUuid} />;
+  if (type === 'prompt') return <StartVisitDialog patientUuid={patientUuid} />;
+  return null;
+};
 
 export default VisitDialog;
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.component.tsx
similarity index 88%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.component.tsx
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.component.tsx
index 9946949565..e399b2563f 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.component.tsx
@@ -1,17 +1,16 @@
 import React, { useCallback, useState } from 'react';
 import { useVisit, openmrsFetch, showToast, showNotification } from '@openmrs/esm-framework';
-import styles from './cancel-visit.scss';
+import styles from './cancel-visit-dialog.scss';
 import { Button, ComposedModal, InlineLoading, ModalBody, ModalFooter, ModalHeader } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 import { useVisitDialog } from '../useVisitDialog';
 
-interface CancelVisitProps {
+interface CancelVisitDialogProps {
   patientUuid: string;
 }
 
-const CancelVisit: React.FC<CancelVisitProps> = ({ patientUuid }) => {
+const CancelVisitDialog: React.FC<CancelVisitDialogProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { type } = useVisitDialog(patientUuid);
   const { currentVisit, mutate } = useVisit(patientUuid);
   const [submitting, setSubmitting] = useState(false);
 
@@ -50,10 +49,10 @@ const CancelVisit: React.FC<CancelVisitProps> = ({ patientUuid }) => {
         setSubmitting(false);
       },
     );
-  }, [currentVisit]);
+  }, []);
 
   return (
-    <ComposedModal open={type === 'cancel'} onClose={closeModal}>
+    <ComposedModal open={true} onClose={closeModal}>
       <ModalHeader label={t('visit', 'Visit')} title={t('cancelActiveVisit', 'Cancel active visit')} />
       <ModalBody>
         <p className={styles.bodyShort02}>
@@ -72,4 +71,4 @@ const CancelVisit: React.FC<CancelVisitProps> = ({ patientUuid }) => {
   );
 };
 
-export default CancelVisit;
+export default CancelVisitDialog;
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.scss b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.scss
similarity index 100%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.scss
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.scss
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.test.tsx b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.test.tsx
similarity index 94%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.test.tsx
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.test.tsx
index f3bfd56983..6c19c243f1 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit.test.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { screen, render, waitFor } from '@testing-library/react';
-import CancelVisit from './cancel-visit.component';
 import userEvent from '@testing-library/user-event';
 import { useVisit, openmrsFetch, showNotification, showToast } from '@openmrs/esm-framework';
 import { mockCurrentVisit } from '../../../../../__mocks__/visits.mock';
 import * as mockuseVisitDialog from '../useVisitDialog';
+import CancelVisitDialog from './cancel-visit-dialog.component';
 
 const mockUseVisit = useVisit as jest.Mock;
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
@@ -30,7 +30,7 @@ describe('Cancel Visit', () => {
     mockUseVisit.mockReturnValue({ currentVisit: mockCurrentVisit, mutate: jest.fn() });
     mockOpenmrsFetch.mockReturnValueOnce(Promise.resolve({ status: 200 }));
     spyOn(mockuseVisitDialog, 'useVisitDialog').and.returnValue({ type: 'cancel' });
-    render(<CancelVisit patientUuid="some-uuid" />);
+    render(<CancelVisitDialog patientUuid="some-uuid" />);
 
     expect(screen.getByRole('heading', { name: /Cancel active visit/ })).toBeInTheDocument();
     expect(screen.getByText('Canceling this visit will delete all associated encounter(s)')).toBeInTheDocument();
@@ -57,7 +57,7 @@ describe('Cancel Visit', () => {
     mockUseVisit.mockReturnValue({ currentVisit: mockCurrentVisit, mutate: jest.fn() });
     mockOpenmrsFetch.mockReturnValueOnce(Promise.reject({ status: 500, message: 'Internal server error' }));
     spyOn(mockuseVisitDialog, 'useVisitDialog').and.returnValue({ type: 'cancel' });
-    render(<CancelVisit patientUuid="some-uuid" />);
+    render(<CancelVisitDialog patientUuid="some-uuid" />);
 
     expect(screen.getByRole('heading', { name: /Cancel active visit/ })).toBeInTheDocument();
     expect(screen.getByText('Canceling this visit will delete all associated encounter(s)')).toBeInTheDocument();
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.component.tsx
similarity index 89%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.component.tsx
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.component.tsx
index 6133cdb24a..27dfde970b 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.component.tsx
@@ -1,19 +1,18 @@
 import React, { useCallback } from 'react';
-import styles from './end-visit.scss';
+import styles from './end-visit-dialog.scss';
 import { ComposedModal, Button, ModalBody, ModalFooter, ModalHeader } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 import { parseDate, showNotification, showToast, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { first } from 'rxjs/operators';
 import { useVisitDialog } from '../useVisitDialog';
 
-interface EndVisitProps {
+interface EndVisitDialogProps {
   patientUuid: string;
 }
 
-const EndVisit: React.FC<EndVisitProps> = ({ patientUuid }) => {
+const EndVisitDialog: React.FC<EndVisitDialogProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const { currentVisit, mutate } = useVisit(patientUuid);
-  const { type } = useVisitDialog(patientUuid);
 
   const closeModal = useCallback(
     () => window.dispatchEvent(new CustomEvent('visit-dialog', { detail: { type: 'close' } })),
@@ -54,7 +53,7 @@ const EndVisit: React.FC<EndVisitProps> = ({ patientUuid }) => {
   };
 
   return (
-    <ComposedModal open={type === 'end'} onClose={closeModal}>
+    <ComposedModal open={true} onClose={closeModal}>
       <ModalHeader label={t('visit', 'Visit')} title={t('endActiveVisit', 'End active visit')} />
       <ModalBody>
         <p className={styles.bodyShort02}>
@@ -76,4 +75,4 @@ const EndVisit: React.FC<EndVisitProps> = ({ patientUuid }) => {
   );
 };
 
-export default EndVisit;
+export default EndVisitDialog;
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.scss b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.scss
similarity index 100%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.scss
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.scss
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.test.tsx b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.test.tsx
similarity index 94%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.test.tsx
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.test.tsx
index 8df08d751c..cafe0a8d82 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit.test.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import EndVisit from './end-visit.component';
+import EndVisitDialog from './end-visit-dialog.component';
 import { screen, render, waitFor } from '@testing-library/react';
 import { showNotification, showToast, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { mockCurrentVisit } from '../../../../../__mocks__/visits.mock';
@@ -39,7 +39,7 @@ describe('EndVisit', () => {
     spyOn(mockUseVisitDialog, 'useVisitDialog').and.returnValue({ type: 'end' });
     mockUseVisit.mockReturnValue({ currentVisit: mockCurrentVisit, mutate: mockMutate });
     mockUpdateVisit.mockReturnValueOnce(of({ status: 200 }));
-    render(<EndVisit patientUuid="some-patient-uuid" />);
+    render(<EndVisitDialog patientUuid="some-patient-uuid" />);
 
     expect(screen.getByRole('heading', { name: /End active visit/ })).toBeInTheDocument();
     expect(
@@ -64,7 +64,7 @@ describe('EndVisit', () => {
     spyOn(mockUseVisitDialog, 'useVisitDialog').and.returnValue({ type: 'end' });
     mockUseVisit.mockReturnValue({ currentVisit: mockCurrentVisit, mutate: mockMutate });
     mockUpdateVisit.mockReturnValueOnce(throwError(new Error('Internal error message')));
-    render(<EndVisit patientUuid="some-patient-uuid" />);
+    render(<EndVisitDialog patientUuid="some-patient-uuid" />);
 
     expect(screen.getByRole('heading', { name: /End active visit/ })).toBeInTheDocument();
     expect(
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.component.tsx
similarity index 87%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.component.tsx
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.component.tsx
index 1b5c59c190..e9c1043c01 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.component.tsx
@@ -2,16 +2,16 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ComposedModal, Button, ModalBody, ModalHeader, ModalFooter } from 'carbon-components-react';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import styles from './start-visit.scss';
+import styles from './start-visit-dialog.scss';
 import { useVisitDialog } from '../useVisitDialog';
 
-interface StartVisitProps {
+interface StartVisitDialogProps {
   patientUuid: string;
 }
 
-const StartVisit: React.FC<StartVisitProps> = ({ patientUuid }) => {
+const StartVisitDialog: React.FC<StartVisitDialogProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { type, state } = useVisitDialog(patientUuid);
+  const { state } = useVisitDialog(patientUuid);
   const closeModal = useCallback(
     () => window.dispatchEvent(new CustomEvent('visit-dialog', { detail: { type: 'close' } })),
     [],
@@ -42,7 +42,7 @@ const StartVisit: React.FC<StartVisitProps> = ({ patientUuid }) => {
         );
 
   return (
-    <ComposedModal open={type === 'prompt'} onClose={closeModal}>
+    <ComposedModal open onClose={closeModal}>
       <ModalHeader>
         <span className={styles.header}>{modalHeaderText}</span>
       </ModalHeader>
@@ -64,4 +64,4 @@ const StartVisit: React.FC<StartVisitProps> = ({ patientUuid }) => {
   );
 };
 
-export default StartVisit;
+export default StartVisitDialog;
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.scss b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.scss
similarity index 100%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.scss
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.scss
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.test.tsx b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.test.tsx
similarity index 90%
rename from packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.test.tsx
rename to packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.test.tsx
index 121c9394f8..2083b0fe06 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit.test.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import StartVisit from './start-visit.component';
+import StartVisitDialog from './start-visit-dialog.component';
 import { render, screen } from '@testing-library/react';
 import * as mockUseVisitDialog from '../useVisitDialog';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
@@ -21,7 +21,7 @@ describe('StartVisit', () => {
 
   test('should launch start visit form', () => {
     spyOn(mockUseVisitDialog, 'useVisitDialog').and.returnValue({ type: 'prompt' });
-    render(<StartVisit patientUuid="some-uuid" />);
+    render(<StartVisitDialog patientUuid="some-uuid" />);
 
     expect(
       screen.getByText(
@@ -37,7 +37,7 @@ describe('StartVisit', () => {
 
   test('should launch edit past visit form', () => {
     spyOn(mockUseVisitDialog, 'useVisitDialog').and.returnValue({ type: 'prompt', state: { type: 'past' } });
-    render(<StartVisit patientUuid="some-uuid" />);
+    render(<StartVisitDialog patientUuid="some-uuid" />);
 
     expect(
       screen.getByText(