diff --git a/src/pages/appointments/[id].tsx b/src/pages/appointments/[id].tsx
index f0da0d0..9543beb 100644
--- a/src/pages/appointments/[id].tsx
+++ b/src/pages/appointments/[id].tsx
@@ -51,7 +51,6 @@ const Patient: React.FC = () => {
     if (!extensions) return 'No details available';
     for (let i = 0; i < extensions.length; i++) {
       const extension = extensions?.[i];
-      // console.log(extension);
       if (extension.valueCodeableConcept?.coding) {
         for (let j = 0; j < extension.valueCodeableConcept.coding.length; j++) {
           const coding = extension.valueCodeableConcept?.coding?.[j];
@@ -81,6 +80,7 @@ if (!patient) {
   );
 }
 
+
 if(patient && appointments && encounters){
 
     return (
@@ -112,7 +112,7 @@ if(patient && appointments && encounters){
               <AppointmentsEncountersInfo title= "Appointments" onClose={handleCloseList}>
                 <ul className={styles.appointmentList}>
                   <div> 
-                    <ul className={styles.appointmentWrapper}>
+                    {appointments?.total && <ul className={styles.appointmentWrapper}>
                       {appointments?.entry?.map((entry) => {
                         const resource = entry.resource as R4.IAppointment;
                         const display = getDisplayFromExtensions(resource.extension); 
@@ -125,7 +125,8 @@ if(patient && appointments && encounters){
                         </li>
                       );
                     })}
-                    </ul>
+                    </ul>}
+                    {!appointments?.total && <p className="conditions-error">The patient has no appointments.</p>}
                   </div>
                 </ul>
               </AppointmentsEncountersInfo>
@@ -137,7 +138,7 @@ if(patient && appointments && encounters){
               <AppointmentsEncountersInfo title="Encounters" onClose={handleCloseList}>
                 <ul className={styles.encounterList}>
                 <div>
-                  <ul className={styles.appointmentWrapper}>
+                  {encounters?.total && <ul className={styles.appointmentWrapper}>
                     {encounters?.entry?.map((entry) => {
                       const resource = entry.resource as R4.IEncounter; 
                       return (
@@ -150,7 +151,8 @@ if(patient && appointments && encounters){
                         </li>
                       )
                     })}
-                  </ul>
+                  </ul>}
+                  {!encounters?.total && <p className="conditions-error">The patient has no encounters.</p>}
                 </div>
                 </ul>
               </AppointmentsEncountersInfo>
diff --git a/src/pages/documents/[id].tsx b/src/pages/documents/[id].tsx
index 941aa86..d9cc74d 100644
--- a/src/pages/documents/[id].tsx
+++ b/src/pages/documents/[id].tsx
@@ -104,8 +104,10 @@ const Documents: React.FC = () => {
     
     if(documents){
         if(documents.entry){
-            return (
-                <div className={styles.total}>
+            if(documents.total){
+
+                return (
+                    <div className={styles.total}>
                     <div className={styles.goBack}>
                     <PatientOverview patientId={patientId as string}/></div>
                     <div className={styles.metaDataBox}>
@@ -125,7 +127,7 @@ const Documents: React.FC = () => {
                             </p>
                         </div>
                     </div>
-                    {loading && 
+                    {(loading || !document) && currentDocumentID && !documentLoadError &&
                     <span className={loadingstyles.loader}>
                         <Spinner />
                     </span>}
@@ -133,12 +135,18 @@ const Documents: React.FC = () => {
                     <div className={styles.documentViewer}>
                         <iframe src={`data:application/pdf;base64,${document}`}/>
                     </div>}
-                    {!currentDocumentID && !loading && !documentLoadError &&
+                    {!currentDocumentID && !loading && !documentLoadError && documents.total > 0 &&
                     <div className={styles.documentInfo}>
                     <p>
                         Please select a document 
                     </p>
                     </div>}
+                    {!currentDocumentID && !loading && !documentLoadError && documents.total == 0 &&
+                    <div className={styles.documentInfo}>
+                    <p>
+                        There is no documents here
+                    </p>
+                    </div>}
                     {loading == false && currentDocumentID && documentLoadError &&
                     <div className={styles.documentError}>
                         <p>
@@ -155,16 +163,51 @@ const Documents: React.FC = () => {
                         
                     </div>
                     }
+                    
                 </div>
             )
+            }
+            else{
+                return (
+                <div className={styles.total}>
+                    <div className={styles.goBack}>
+                        <PatientOverview patientId={patientId as string}/>
+                    </div>
+                    <div className={styles.documentInfo}>
+                        <p>
+                            There is no documents here
+                        </p>
+                    </div>
+                </div>)
+            }
         }
         else{
-            return <></>
+            return (
+            <div className={styles.total}> 
+                <div className={styles.goBack}>
+                        <PatientOverview patientId={patientId as string}/>
+                </div>
+                <div className={styles.documentInfo}>
+                    <p>
+                        Could not get any documents assosiated with the patient
+                    </p>
+                </div>
+            </div>)
         }
-
+        
     }
     else if (!loading){
-        return <h1> Could not find documents related to {patientId}</h1>
+        return(
+            <div className={styles.total}> 
+                <div className={styles.goBack}>
+                        <PatientOverview patientId={patientId as string}/>
+                </div>
+                <div className={styles.documentInfo}>
+                    <p>
+                        Could not find documents related to {patientId}
+                    </p>
+                </div>
+            </div>) 
     }
     else if (loading){
         return (
diff --git a/src/styles/appointment.module.scss b/src/styles/appointment.module.scss
index 830dbe4..7478497 100644
--- a/src/styles/appointment.module.scss
+++ b/src/styles/appointment.module.scss
@@ -8,7 +8,7 @@
 .appointmentList, .encounterList {
     list-style-type: none;
     padding: 0; 
-    height: calc(90vh - 100pt);
+    height: calc(80vh - 100pt);
     overflow-y: auto; 
 }