diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html
index d796d8f1..b4a5d939 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html
@@ -3,10 +3,10 @@
     <div class="row" >
       <!-- Condition Header -->
       <div class="col-6">
-        <span routerLink="/source/{{observations[0]?.source_id}}/resource/{{observations[0]?.source_resource_id}}">{{observationTitle}}</span>
+        <span routerLink="/source/{{firstObservation?.source_id}}/resource/{{firstObservation?.source_resource_id}}">{{observationTitle}}</span>
       </div>
       <div class="col-6">
-        {{observations[0] | fhirPath: "Observation.effectiveDateTime": "Observation.issued" |  date}}
+        {{firstObservation | fhirPath: "Observation.effectiveDateTime": "Observation.issued" |  date}}
       </div>
     </div>
   </div><!-- card-header -->
@@ -20,13 +20,13 @@
         <div class="row  pl-3">
           <div class="col-12 mt-3 mb-2">
             <p>
-              <strong>Short Name:</strong> {{observations[0] | fhirPath: "Observation.code.text"}} <br/>
-              <strong>Result:</strong> {{observations[0] | fhirPath: "Observation.valueQuantity.value"}} {{observations[0] | fhirPath: "Observation.valueQuantity.unit"}} <br/>
+              <strong>Short Name:</strong> {{firstObservation | fhirPath: "Observation.code.text"}} <br/>
+              <strong>Result:</strong> {{firstObservation | fhirPath: "Observation.valueQuantity.value"}} {{firstObservation | fhirPath: "Observation.valueQuantity.unit"}} <br/>
               <br/>
-              <strong>Latest Test Date:</strong> {{observations[0] | fhirPath: "Observation.effectiveDateTime": "Observation.issued" |  date}} <br/>
-              <strong>Ordered By:</strong> {{observations[0] | fhirPath: "Observation.encounter.display"}} <br/>
+              <strong>Latest Test Date:</strong> {{firstObservation | fhirPath: "Observation.effectiveDateTime": "Observation.issued" |  date}} <br/>
+              <strong>Ordered By:</strong> {{firstObservation | fhirPath: "Observation.encounter.display"}} <br/>
               <strong>LOINC Code:</strong> {{observationCode}} <br/>
-              <strong>Notes:</strong> {{observations[0] | fhirPath: "Observation.note.text"}}
+              <strong>Notes:</strong> {{firstObservation | fhirPath: "Observation.note.text"}}
 
               <br/>
               <br/>
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts
index 4268852a..b92fd29d 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts
@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReportLabsObservationComponent } from './report-labs-observation.component';
+import {PipesModule} from '../../pipes/pipes.module';
+import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
 
 describe('ReportLabsObservationComponent', () => {
   let component: ReportLabsObservationComponent;
@@ -8,6 +10,7 @@ describe('ReportLabsObservationComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [PipesModule, NgbCollapseModule],
       declarations: [ ReportLabsObservationComponent ]
     })
     .compileComponents();
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts
index c5ce945c..673fb881 100644
--- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts
+++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.ts
@@ -14,10 +14,11 @@ import {formatDate} from '@angular/common';
 })
 export class ReportLabsObservationComponent implements OnInit {
 
-  @Input() observations: ResourceFhir[]
+  @Input() observations: ResourceFhir[] = []
   @Input() observationCode: string
   @Input() observationTitle: string
 
+  firstObservation: ResourceFhir = null
   // based on https://stackoverflow.com/questions/38889716/chartjs-2-stacked-bar-with-marker-on-top
   // https://stackoverflow.com/questions/62711919/chart-js-horizontal-lines-per-bar
 
@@ -161,9 +162,11 @@ export class ReportLabsObservationComponent implements OnInit {
     let referenceRanges = []
 
     //sort observations
-    this.observations = this.observations.sort((a, b) => a.sort_date > b.sort_date ? -1 : a.sort_date < b.sort_date ? 1 : 0)
-
+    this.observations = this.observations?.sort((a, b) => a.sort_date > b.sort_date ? -1 : a.sort_date < b.sort_date ? 1 : 0)
 
+    if(this.observations.length > 0){
+      this.firstObservation = this.observations[0]
+    }
     for(let observation of this.observations){
       //get label
       this.barChartLabels.push(
@@ -188,6 +191,8 @@ export class ReportLabsObservationComponent implements OnInit {
       ])
     }
 
+
+
     // @ts-ignore
     this.barChartData[0].data = referenceRanges
     this.barChartData[1].data = currentValues.map(v => [v, v])
diff --git a/frontend/src/app/pipes/fhir-path.pipe.ts b/frontend/src/app/pipes/fhir-path.pipe.ts
index 54e914cd..eb7f30f6 100644
--- a/frontend/src/app/pipes/fhir-path.pipe.ts
+++ b/frontend/src/app/pipes/fhir-path.pipe.ts
@@ -8,6 +8,9 @@ import { evaluate } from 'fhirpath'
 export class FhirPathPipe implements PipeTransform {
 
   transform(resourceFhir: ResourceFhir, ...pathQueryWithFallback: string[]): string {
+    if(!resourceFhir){
+      return null
+    }
 
     for(let pathQuery of pathQueryWithFallback){
       let result = evaluate(resourceFhir.resource_raw, pathQuery).join(", ")