diff --git a/packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx b/packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx
index fa101d27..65f584c2 100644
--- a/packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx
+++ b/packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { Tile, StructuredListSkeleton, ContentSwitcher, Switch } from '@carbon/react';
 import styles from './care-panel.scss';
 import { useEnrollmentHistory } from '../hooks/useEnrollmentHistory';
-import isNull from 'lodash-es/isNull';
 import ProgramSummary from '../program-summary/program-summary.component';
 import ProgramEnrollment from '../program-enrollment/program-enrollment.component';
 import PatientSummary from '../patient-summary/patient-summary.component';
@@ -33,7 +32,7 @@ const CarePanel: React.FC<CarePanelProps> = ({ patientUuid, formEntrySub, launch
     return <span>{t('errorProgramEnrollment', 'Error loading program enrollments')}</span>;
   }
 
-  if (isNull(data)) {
+  if (data?.length === 0) {
     return;
   }
 
diff --git a/packages/esm-care-panel-app/src/patient-summary/patient-summary.component.tsx b/packages/esm-care-panel-app/src/patient-summary/patient-summary.component.tsx
index dcba7be4..0e3b857e 100644
--- a/packages/esm-care-panel-app/src/patient-summary/patient-summary.component.tsx
+++ b/packages/esm-care-panel-app/src/patient-summary/patient-summary.component.tsx
@@ -72,13 +72,13 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('reportDate', 'Report date')}</p>
               <p>
-                <span className={styles.value}>{data?.reportDate}</span>
+                <span className={styles.value}>{data?.reportDate ? data?.reportDate : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('clinicName', 'Clinic name')}</p>
               <p>
-                <span className={styles.value}>{data?.clinicName}</span>
+                <span className={styles.value}>{data?.clinicName ? data?.clinicName : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
@@ -93,7 +93,9 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('uniquePatientIdentifier', 'Unique patient identifier')}</p>
               <p>
-                <span className={styles.value}>{data?.uniquePatientIdentifier}</span>
+                <span className={styles.value}>
+                  {data?.uniquePatientIdentifier ? data?.uniquePatientIdentifier : '--'}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
@@ -101,13 +103,15 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
                 {t('nationalUniquePatientIdentifier', 'National unique patient identifier')}
               </p>
               <p>
-                <span className={styles.value}>{data?.nationalUniquePatientIdentifier}</span>
+                <span className={styles.value}>
+                  {data?.nationalUniquePatientIdentifier ? data?.nationalUniquePatientIdentifier : '--'}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('patientName', 'Patient name')}</p>
               <p>
-                <span className={styles.value}>{data?.patientName}</span>
+                <span className={styles.value}>{data?.patientName ? data?.patientName : '--'}</span>
               </p>
             </div>
           </div>
@@ -116,13 +120,13 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('birthDate', 'Birth date')}</p>
               <p>
-                <span className={styles.value}>{data?.birthDate}</span>
+                <span className={styles.value}>{data?.birthDate ? data?.birthDate : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('age', 'Age')}</p>
               <p>
-                <span className={styles.value}>{data?.age}</span>
+                <span className={styles.value}>{data?.age ? data?.age : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
@@ -139,7 +143,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('maritalStatus', 'Marital status')}</p>
               <p>
-                <span className={styles.value}>{data?.maritalStatus}</span>
+                <span className={styles.value}>{data?.maritalStatus ? data?.maritalStatus : '--'}</span>
               </p>
             </div>
           </div>
@@ -150,7 +154,9 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('dateConfirmedPositive', 'Date confirmed HIV positive')}</p>
               <p>
-                <span className={styles.value}>{data?.dateConfirmedHIVPositive}</span>
+                <span className={styles.value}>
+                  {data?.dateConfirmedHIVPositive ? data?.dateConfirmedHIVPositive : '--'}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
@@ -162,7 +168,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('dateFirstCD4', 'Date first CD4')}</p>
               <p>
-                <span className={styles.value}>{data?.firstCd4Date}</span>
+                <span className={styles.value}>{data?.firstCd4Date ? data?.firstCd4Date : '--'}</span>
               </p>
             </div>
           </div>
@@ -171,13 +177,15 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('dateEnrolledToCare', 'Date enrolled into care')}</p>
               <p>
-                <span className={styles.value}>{data?.dateEnrolledIntoCare}</span>
+                <span className={styles.value}>{data?.dateEnrolledIntoCare ? data?.dateEnrolledIntoCare : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('whoAtEnrollment', 'WHO stage at enrollment')}</p>
               <p>
-                <span className={styles.value}>{data?.whoStagingAtEnrollment}</span>
+                <span className={styles.value}>
+                  {data?.whoStagingAtEnrollment ? data?.whoStagingAtEnrollment : '--'}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
@@ -192,19 +200,19 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('entryPoint', 'Entry point')}</p>
               <p>
-                <span className={styles.value}>{data?.patientEntryPoint}</span>
+                <span className={styles.value}>{data?.patientEntryPoint ? data?.patientEntryPoint : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('dateOfEntryPoint', 'Date of entry point')}</p>
               <p>
-                <span className={styles.value}>{data?.patientEntryPointDate}</span>
+                <span className={styles.value}>{data?.patientEntryPointDate ? data?.patientEntryPointDate : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('facilityTransferredFrom', 'Facility transferred from')}</p>
               <p>
-                <span className={styles.value}>{data?.transferInFacility}</span>
+                <span className={styles.value}>{data?.transferInFacility ? data?.transferInFacility : '--'}</span>
               </p>
             </div>
           </div>
@@ -215,19 +223,19 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('weight', 'Weight')}</p>
               <p>
-                <span className={styles.value}>{data?.weight}</span>
+                <span className={styles.value}>{data?.weight ? data?.weight : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('height', 'Height')}</p>
               <p>
-                <span className={styles.value}>{data?.height}</span>
+                <span className={styles.value}>{data?.height ? data?.height : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('bmi', 'BMI')}</p>
               <p>
-                <span className={styles.value}>{data?.bmi}</span>
+                <span className={styles.value}>{data?.bmi ? data?.bmi : '--'}</span>
               </p>
             </div>
           </div>
@@ -236,19 +244,19 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('bloodPressure', 'Blood pressure')}</p>
               <p>
-                <span className={styles.value}>{data?.bloodPressure}</span>
+                <span className={styles.value}>{data?.bloodPressure ? data?.bloodPressure : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('oxygenSaturation', 'Oxygen saturation')}</p>
               <p>
-                <span className={styles.value}>{data?.oxygenSaturation}</span>
+                <span className={styles.value}>{data?.oxygenSaturation ? data?.oxygenSaturation : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('respiratoryRate', 'Respiratory rate')}</p>
               <p>
-                <span className={styles.value}>{data?.respiratoryRate}</span>
+                <span className={styles.value}>{data?.respiratoryRate ? data?.respiratoryRate : '--'}</span>
               </p>
             </div>
           </div>
@@ -257,7 +265,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('pulseRate', 'Pulse rate')}</p>
               <p>
-                <span className={styles.value}>{data?.pulseRate}</span>
+                <span className={styles.value}>{data?.pulseRate ? data?.pulseRate : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
@@ -269,7 +277,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('tbScreeningOutcome', 'TB screening outcome')}</p>
               <p>
-                <span className={styles.value}>{data?.tbScreeningOutcome}</span>
+                <span className={styles.value}>{data?.tbScreeningOutcome ? data?.tbScreeningOutcome : '--'}</span>
               </p>
             </div>
           </div>
@@ -278,11 +286,11 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('chronicDisease', 'Chronic disease')}</p>
               <p>
-                <span className={styles.value}>{data?.chronicDisease}</span>
+                <span className={styles.value}>{data?.chronicDisease ? data?.chronicDisease : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
-              <p className={styles.label}>{t('ioHistory', '	OI history')}</p>
+              <p className={styles.label}>{t('ioHistory', ' OI history')}</p>
               <p>
                 <span className={styles.value}>{data?.iosResults ? data?.iosResults : '--'}</span>
               </p>
@@ -300,7 +308,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
               <div className={styles.content}>
                 <p className={styles.label}>{t('caxcScreeningOutcome', 'Caxc screening')}</p>
                 <p>
-                  <span className={styles.value}>{data?.caxcScreeningOutcome}</span>
+                  <span className={styles.value}>{data?.caxcScreeningOutcome ? data?.caxcScreeningOutcome : '--'}</span>
                 </p>
               </div>
             )}
@@ -308,20 +316,20 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('dateEnrolledInTb', 'TPT start date')}</p>
               <p>
-                <span className={styles.value}>{data?.dateEnrolledInTb}</span>
+                <span className={styles.value}>{data?.dateEnrolledInTb ? data?.dateEnrolledInTb : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('dateCompletedInTb', 'TPT completion date')}</p>
               <p>
-                <span className={styles.value}>{data?.dateCompletedInTb}</span>
+                <span className={styles.value}>{data?.dateCompletedInTb ? data?.dateCompletedInTb : '--'}</span>
               </p>
             </div>
             {data?.gender === 'F' && (
               <div className={styles.content}>
                 <p className={styles.label}>{t('lmp', 'LMP')}</p>
                 <p>
-                  <span className={styles.value}>{data?.lmp}</span>
+                  <span className={styles.value}>{data?.lmp ? data?.lmp : '--'}</span>
                 </p>
               </div>
             )}
@@ -333,19 +341,25 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('treatmentSupporterName', 'Treatment supporter name')}</p>
               <p>
-                <span className={styles.value}>{data?.nameOfTreatmentSupporter}</span>
+                <span className={styles.value}>
+                  {data?.nameOfTreatmentSupporter ? data?.nameOfTreatmentSupporter : '--'}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
-              <p className={styles.label}>{t('treatmentSupporterRelationship', 'Treatment supporter	relationship')}</p>
+              <p className={styles.label}>{t('treatmentSupporterRelationship', 'Treatment supporter relationship')}</p>
               <p>
-                <span className={styles.value}>{data?.relationshipToTreatmentSupporter}</span>
+                <span className={styles.value}>
+                  {data?.relationshipToTreatmentSupporter ? data?.relationshipToTreatmentSupporter : '--'}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('treatmentSupporterContact', 'Treatment Supporter contact')}</p>
               <p>
-                <span className={styles.value}>{data?.contactOfTreatmentSupporter}</span>
+                <span className={styles.value}>
+                  {data?.contactOfTreatmentSupporter ? data?.contactOfTreatmentSupporter : '--'}
+                </span>
               </p>
             </div>
           </div>
@@ -356,7 +370,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('drugAllergies', 'Drug allergies')}</p>
               <p>
-                <span className={styles.value}>{data?.allergies}</span>
+                <span className={styles.value}>{data?.allergies ? data?.allergies : '--'}</span>
               </p>
             </div>
           </div>
@@ -367,13 +381,13 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('previousART', 'Previous ART')}</p>
               <p>
-                <span className={styles.value}>{data?.previousArtStatus}</span>
+                <span className={styles.value}>{data?.previousArtStatus ? data?.previousArtStatus : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('dateStartedART', 'Date started ART')}</p>
               <p>
-                <span className={styles.value}>{data?.dateStartedArt}</span>
+                <span className={styles.value}>{data?.dateStartedArt ? data?.dateStartedArt : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
@@ -409,13 +423,13 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('firstRegimen', 'First regimen')}</p>
               <p>
-                <span className={styles.value}>{data?.firstRegimen}</span>
+                <span className={styles.value}>{data?.firstRegimen ? data?.firstRegimen : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('currentArtRegimen', 'Current Art regimen')}</p>
               <p>
-                <span className={styles.value}>{data?.currentArtRegimen}</span>
+                <span className={styles.value}>{data?.currentArtRegimen ? data?.currentArtRegimen : '--'}</span>
               </p>
             </div>
           </div>
@@ -452,19 +466,19 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('Dapsone', 'Dapsone')}</p>
               <p>
-                <span className={styles.value}>{data?.dapsone}</span>
+                <span className={styles.value}>{data?.dapsone ? data?.dapsone : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('tpt', 'TPT')}</p>
               <p>
-                <span className={styles.value}>{data?.onIpt}</span>
+                <span className={styles.value}>{data?.onIpt ? data?.onIpt : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('clinicsEnrolled', 'Clinics enrolled')}</p>
               <p>
-                <span className={styles.value}>{data?.clinicsEnrolled}</span>
+                <span className={styles.value}>{data?.clinicsEnrolled ? data?.clinicsEnrolled : '--'}</span>
               </p>
             </div>
           </div>
@@ -473,19 +487,19 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('transferOutDate', 'Transfer out date')}</p>
               <p>
-                <span className={styles.value}>{data?.transferOutDate}</span>
+                <span className={styles.value}>{data?.transferOutDate ? data?.transferOutDate : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('transferOutFacility', 'Transfer out facility')}</p>
               <p>
-                <span className={styles.value}>{data?.transferOutFacility}</span>
+                <span className={styles.value}>{data?.transferOutFacility ? data?.transferOutFacility : '--'}</span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('deathDate', 'Death date')}</p>
               <p>
-                <span className={styles.value}>{data?.deathDate}</span>
+                <span className={styles.value}>{data?.deathDate ? data?.deathDate : '--'}</span>
               </p>
             </div>
           </div>
@@ -501,14 +515,14 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('mostRecentVL', 'Most recent VL')}</p>
               <p>
-                <span className={styles.value}>{data?.viralLoadValue}</span>{' '}
-                <span className={styles.label}> ({data?.viralLoadDate})</span> <br />
+                <span className={styles.value}>{data?.viralLoadValue ? data?.viralLoadValue : '--'}</span>
+                <span className={styles.label}> {data?.viralLoadDate}</span> <br />
               </p>
             </div>
             <div className={styles.content}>
-              <p className={styles.label}>{t('nextAppointmentDate', '	Next appointment')}</p>
+              <p className={styles.label}>{t('nextAppointmentDate', ' Next appointment')}</p>
               <p>
-                <span className={styles.value}>{data?.nextAppointmentDate}</span>
+                <span className={styles.value}>{data?.nextAppointmentDate ? data?.nextAppointmentDate : '--'}</span>
               </p>
             </div>
           </div>
@@ -556,13 +570,21 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
             <div className={styles.content}>
               <p className={styles.label}>{t('clinicianName', 'Clinician name')}</p>
               <p>
-                <span className={styles.value}>{currentUserSession?.user?.person?.display}</span>
+                <span className={styles.value}>
+                  {currentUserSession?.user?.person?.display
+                    ? currentUserSession?.user?.person?.display
+                    : t('none', 'None')}
+                </span>
               </p>
             </div>
             <div className={styles.content}>
               <p className={styles.label}>{t('clinicianSignature', 'Clinician signature')}</p>
               <p>
-                <span className={styles.value}>{currentUserSession?.user?.person?.display}</span>
+                <span className={styles.value}>
+                  {currentUserSession?.user?.person?.display
+                    ? currentUserSession?.user?.person?.display
+                    : t('none', 'None')}
+                </span>
               </p>
             </div>
           </div>
diff --git a/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx
index 4d682f92..c867a63b 100644
--- a/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx
+++ b/packages/esm-care-panel-app/src/program-enrollment/program-enrollment.component.tsx
@@ -6,7 +6,6 @@ import { Edit } from '@carbon/react/icons';
 import { useLayoutType, useVisit } from '@openmrs/esm-framework';
 import isNull from 'lodash-es/isNull';
 import { ProgramType } from '../types';
-
 interface ProgramEnrollmentProps {
   patientUuid: string;
   programName: string;
@@ -14,7 +13,6 @@ interface ProgramEnrollmentProps {
   formEntrySub: any;
   launchPatientWorkspace: Function;
 }
-
 const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({
   patientUuid,
   programName,
@@ -36,11 +34,9 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({
       visit: currentVisit,
     });
   };
-
   if (isNull(data)) {
     return;
   }
-
   return (
     <div>
       <section>
@@ -88,13 +84,13 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({
                         <div className={styles.content}>
                           <p>{t('whoStage', 'WHO Stage')}</p>
                           <p>
-                            <span className={styles.value}>{program?.whoStage}</span>
+                            <span className={styles.value}>{program?.whoStage ? program?.whoStage : '--'}</span>
                           </p>
                         </div>
                         <div className={styles.content}>
                           <p>{t('entryPoint', 'Entry point')}</p>
                           <p>
-                            <span className={styles.value}>{program?.entryPoint}</span>
+                            <span className={styles.value}>{program?.entryPoint ? program?.entryPoint : '--'}</span>
                           </p>
                         </div>
                       </>
@@ -177,7 +173,7 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({
                   <div className={styles.labelContainer}>
                     <div className={styles.content}>
                       <p className={styles.label}>{t('completed', 'Completed')}</p>
-                      <span className={styles.value}>{program?.dateCompleted}</span>
+                      <span className={styles.value}>{program?.dateCompleted ? program?.dateCompleted : '--'}</span>
                     </div>
                     {program.programName === ProgramType.HIV ? (
                       <>
@@ -239,5 +235,4 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({
     </div>
   );
 };
-
 export default ProgramEnrollment;
diff --git a/packages/esm-care-panel-app/src/program-summary/program-summary.component.tsx b/packages/esm-care-panel-app/src/program-summary/program-summary.component.tsx
index d3953218..c96c8d74 100644
--- a/packages/esm-care-panel-app/src/program-summary/program-summary.component.tsx
+++ b/packages/esm-care-panel-app/src/program-summary/program-summary.component.tsx
@@ -5,29 +5,23 @@ import { useTranslation } from 'react-i18next';
 import { useLayoutType } from '@openmrs/esm-framework';
 import { StructuredListSkeleton } from '@carbon/react';
 import { ProgramType } from '../types';
-
 interface ProgramSummaryProps {
   patientUuid: string;
   programName: string;
 }
-
 const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programName }) => {
   const { data, isError, isLoading } = useProgramSummary(patientUuid);
   const { t } = useTranslation();
   const isTablet = useLayoutType() == 'tablet';
-
   if (isLoading) {
     return <StructuredListSkeleton role="progressbar" />;
   }
-
   if (isError) {
     return <span>{t('errorProgramSummary', 'Error loading HIV summary')}</span>;
   }
-
   if (Object.keys(data)?.length === 0) {
     return;
   }
-
   if (Object.keys(data).length > 0) {
     return (
       <>
@@ -42,49 +36,46 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                   <p>{t('lastViralLoad', 'Last viral load')}</p>
                   <p>
                     {' '}
-                    <span className={styles.value}>{data?.HIV?.ldlValue}</span>
-                    {data?.HIV?.ldlDate ? <span>({data?.HIV?.ldlDate})</span> : ''}{' '}
+                    <span className={styles.value}>{data?.HIV?.ldlValue ? data?.HIV?.ldlValue : '--'}</span>
+                    {data?.HIV?.ldlDate ? <span>({data?.HIV?.ldlDate})</span> : ''}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('lastCd4Count', 'Last CD4 count')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.HIV?.cd4}</span>{' '}
+                    <span className={styles.value}>{data?.HIV?.cd4 ? data?.HIV?.cd4 : '--'}</span>
                     {data?.HIV?.cd4Date ? <span> ({data?.HIV?.cd4Date}) </span> : ''}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('CD4Percentage', 'CD4 percentage')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.HIV?.cd4Percent}</span>{' '}
+                    <span className={styles.value}>{data?.HIV?.cd4Percent ? data?.HIV?.cd4Percent : '--'}</span>
                     {data?.HIV?.cd4PercentDate ? <span>({data?.HIV?.cd4PercentDate}) </span> : ''}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('lastWhoStage', 'Last WHO stage')}</p>
                   <p>
-                    {' '}
                     <span className={styles.value}>
-                      {' '}
-                      {t('whoStage', 'WHO STAGE')} {data?.HIV?.whoStage}
-                    </span>{' '}
+                      {t('whoStage', 'WHO STAGE')} {data?.HIV?.whoStage ? data?.HIV?.whoStage : '--'}
+                    </span>
                     {data?.HIV?.whoStageDate ? <span> ({data?.HIV?.whoStageDate}) </span> : ''}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('regimen', 'Regimen')}</p>
-                  <p className={styles.value}>{data?.HIV?.lastEncDetails?.regimenShortDisplay} </p>
+                  <p className={styles.value}>
+                    {data?.HIV?.lastEncDetails?.regimenShortDisplay
+                      ? data?.HIV?.lastEncDetails?.regimenShortDisplay
+                      : '--'}{' '}
+                  </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('regimenStartDate', ' Date started regimen')}</p>
-                  <p className={styles.value}>{data?.HIV?.lastEncDetails?.startDate}</p>
+                  <p className={styles.value}>
+                    {data?.HIV?.lastEncDetails?.startDate ? data?.HIV?.lastEncDetails?.startDate : '--'}
+                  </p>
                 </div>
               </div>
             </div>
@@ -97,16 +88,17 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                 <div className={styles.content}>
                   <p>{t('treatmentNumber:', 'Treatment number')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.TB?.tbTreatmentNumber}</span>{' '}
+                    <span className={styles.value}>
+                      {data?.TB?.tbTreatmentNumber ? data?.TB?.tbTreatmentNumber : '--'}
+                    </span>
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('diseaseClassification', 'Disease classification')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.TB?.tbDiseaseClassification}</span>{' '}
+                    <span className={styles.value}>
+                      {data?.TB?.tbDiseaseClassification ? data?.TB?.tbDiseaseClassification : '--'}
+                    </span>
                     {data?.TB?.tbDiseaseClassificationDate ? (
                       <span> ({data?.TB?.tbDiseaseClassificationDate}) </span>
                     ) : (
@@ -114,22 +106,20 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                     )}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('patientClassification', 'Patient classification')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.TB?.tbPatientClassification}</span>
+                    <span className={styles.value}>
+                      {data?.TB?.tbPatientClassification ? data?.TB?.tbPatientClassification : '--'}
+                    </span>
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('regimen', 'Regimen')}</p>
                   <p className={styles.value}>
-                    {' '}
                     {data?.TB?.lastTbEncounter
                       ? data?.TB?.lastTbEncounter?.regimenShortDisplay
-                      : t('neverOnTbRegimen', 'Never on TB regimen')}{' '}
+                      : t('neverOnTbRegimen', 'Never on TB regimen')}
                   </p>
                 </div>
               </div>
@@ -143,17 +133,16 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                 <div className={styles.content}>
                   <p>{t('hivStatus:', 'HIV status')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchMother?.hivStatus}</span>{' '}
-                    {data?.mchMother?.hivStatusDate ? <span>({data?.mchMother?.hivStatusDate})</span> : ''}{' '}
+                    <span className={styles.value}>
+                      {data?.mchMother?.hivStatus ? data?.mchMother?.hivStatus : '--'}
+                    </span>
+                    {data?.mchMother?.hivStatusDate ? <span>({data?.mchMother?.hivStatusDate})</span> : ''}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('onART', 'On ART')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchMother?.onHaart}</span>{' '}
+                    <span className={styles.value}>{data?.mchMother?.onHaart ? data?.mchMother?.onHaart : '--'}</span>
                     {data?.mchMother?.onHaartDate ? <span> ({data?.mchMother?.onHaartDate}) </span> : ''}
                   </p>
                 </div>
@@ -168,56 +157,55 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                 <div className={styles.content}>
                   <p>{t('currentProphylaxisUsed:', 'Current prophylaxis used')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchChild?.currentProphylaxisUsed}</span>{' '}
+                    <span className={styles.value}>
+                      {data?.mchChild?.currentProphylaxisUsed ? data?.mchChild?.currentProphylaxisUsed : '--'}
+                    </span>
                     {data?.mchChild?.currentProphylaxisUsedDate ? (
-                      <span>({data?.mchChild?.currentProphylaxisUsedDate})</span>
+                      <span>{data?.mchChild?.currentProphylaxisUsedDate}</span>
                     ) : (
                       ''
-                    )}{' '}
+                    )}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('currentFeedingOption', 'Current feeding option')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchChild?.currentFeedingOption}</span>{' '}
+                    <span className={styles.value}>
+                      {data?.mchChild?.currentFeedingOption ? data?.mchChild?.currentFeedingOption : '--'}
+                    </span>
                     {data?.mchChild?.currentFeedingOptionDate ? (
-                      <span> ({data?.mchChild?.currentFeedingOptionDate}) </span>
+                      <span> {data?.mchChild?.currentFeedingOptionDate} </span>
                     ) : (
                       ''
                     )}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('milestonesAttained', 'Milestones Attained')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchChild?.milestonesAttained}</span>{' '}
+                    <span className={styles.value}>
+                      {data?.mchChild?.milestonesAttained ? data?.mchChild?.milestonesAttained : '--'}
+                    </span>
                     {data?.mchChild?.milestonesAttainedDate ? (
-                      <span> ({data?.mchChild?.milestonesAttainedDate}) </span>
+                      <span>{data?.mchChild?.milestonesAttainedDate} </span>
                     ) : (
                       ''
                     )}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('heiOutcome', 'HEI Outcome')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchChild?.heiOutcome}</span>{' '}
+                    <span className={styles.value}>
+                      {data?.mchChild?.heiOutcome ? data?.mchChild?.heiOutcome : '--'}
+                    </span>
                     {data?.mchChild?.heiOutcomeDate ? <span> ({data?.mchChild?.heiOutcomeDate}) </span> : ''}
                   </p>
                 </div>
-
                 <div className={styles.content}>
                   <p>{t('hivStatus', 'HIV Status')}</p>
                   <p>
-                    {' '}
-                    <span className={styles.value}>{data?.mchChild?.hivStatus}</span>{' '}
+                    <span className={styles.value}>{data?.mchChild?.hivStatus ? data?.mchChild?.hivStatus : '--'}</span>
                     {data?.mchChild?.hivStatusDate ? <span> ({data?.mchChild?.hivStatusDate}) </span> : ''}
                   </p>
                 </div>
@@ -229,5 +217,4 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
     );
   }
 };
-
 export default ProgramSummary;