diff --git a/frontend/src/app/pages/medical-history/medical-history.component.html b/frontend/src/app/pages/medical-history/medical-history.component.html
index 3e70171c..8e18d794 100644
--- a/frontend/src/app/pages/medical-history/medical-history.component.html
+++ b/frontend/src/app/pages/medical-history/medical-history.component.html
@@ -8,6 +8,7 @@
       <ng-container [ngTemplateOutlet]="loading ? isLoadingTemplate : (encounters.length == 0) ? emptyReport : report"></ng-container>
 
       <ng-template #report>
+
         <!-- Editor Button -->
         <div class="row mt-5 mb-3">
           <div class="col-12">
@@ -43,7 +44,7 @@
         <div class="row">
           <div class="col-12 d-flex justify-content-center flex-nowrap">
             <ngb-pagination
-              [collectionSize]="allEncounterGroups.length"
+              [collectionSize]="allEncountersIds.length"
               [(page)]="currentPage"
               [pageSize]="pageSize"
               (pageChange)="pageChange()"
diff --git a/frontend/src/app/pages/medical-history/medical-history.component.ts b/frontend/src/app/pages/medical-history/medical-history.component.ts
index 6ef6fa96..8f46696a 100644
--- a/frontend/src/app/pages/medical-history/medical-history.component.ts
+++ b/frontend/src/app/pages/medical-history/medical-history.component.ts
@@ -17,7 +17,7 @@ export class MedicalHistoryComponent implements OnInit {
 
   currentPage: number = 1 //1-based index due to the way the pagination component works
   pageSize: number = 10
-  allEncounterGroups: string[] = []
+  allEncountersIds: any[] = []
 
   closeResult = '';
   // conditions: ResourceFhir[] = []
@@ -39,16 +39,11 @@ export class MedicalHistoryComponent implements OnInit {
     //load the first page
     this.loading = true
 
-    this.pageChange(1)
-  }
-
-  pageChange(page: number){
-    this.loading = true
 
     this.fastenApi.getResources('Encounter').subscribe(
       (response: ResourceFhir[]) => {
 
-        let selectedResourceIds = response.map((resource: ResourceFhir): Partial<ResourceFhir> => {
+        this.allEncountersIds = response.map((resource: ResourceFhir): Partial<ResourceFhir> => {
           return {
             source_id: resource.source_id,
             source_resource_type: resource.source_resource_type,
@@ -56,23 +51,29 @@ export class MedicalHistoryComponent implements OnInit {
           }
         })
 
-        this.fastenApi.getResourceGraph(null, selectedResourceIds).subscribe((graphResponse: ResourceGraphResponse) => {
-          this.loading = false
+        this.pageChange()
 
-          console.log("FLATTENED RESOURCES RESPONSE", graphResponse)
-          this.encounters = graphResponse.results["Encounter"] || []
 
-        },
-          error => {
-          this.loading = false
-        })
 
+      })
+
+  }
+
+  pageChange(){
+    this.loading = true
+
+    let encounterIds = this.allEncountersIds.slice((this.currentPage-1) * this.pageSize, this.currentPage * this.pageSize)
+
+    this.fastenApi.getResourceGraph(null, encounterIds).subscribe((graphResponse: ResourceGraphResponse) => {
+        this.loading = false
+
+        console.log("FLATTENED RESOURCES RESPONSE", graphResponse)
+        this.encounters = graphResponse.results["Encounter"] || []
 
       },
       error => {
         this.loading = false
-      }
-    )
+      })
 
     // this.fastenApi.getResourceGraph(null, page).subscribe((response: ResourceGraphResponse) => {
     //   this.loading = false