diff --git a/frontend/src/app/components/fhir-card/datatypes/pdf/pdf.component.html b/frontend/src/app/components/fhir-card/datatypes/pdf/pdf.component.html
index b8f8afcb..113e7147 100644
--- a/frontend/src/app/components/fhir-card/datatypes/pdf/pdf.component.html
+++ b/frontend/src/app/components/fhir-card/datatypes/pdf/pdf.component.html
@@ -4,7 +4,7 @@
     type="{{displayModel?.content_type}}"
     [style]="{
       width: '100%',
-      height: height
+      height: height + 'px'
     }"
   />
 </div>
diff --git a/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.html b/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.html
index 4e2314d8..c1c7e3cf 100644
--- a/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.html
+++ b/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.html
@@ -16,7 +16,21 @@
     <fhir-ui-table [displayModel]="displayModel" [tableData]="tableData"></fhir-ui-table>
 
     <div *ngIf="!showDetails">
-      <fhir-binary *ngFor="let attachmentModel of displayModel.presented_form" [attachmentModel]="attachmentModel" [attachmentSourceId]="displayModel?.source_id" ></fhir-binary>
+
+      <ng-container *ngIf="displayModel?.presented_form?.length > 1; else showSingle">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
+          <li *ngFor="let attachmentModel of displayModel.presented_form; index as i" [ngbNavItem]="i">
+            <a ngbNavLink>{{attachmentModel.contentType}}</a>
+            <ng-template ngbNavContent>
+              <fhir-binary [attachmentModel]="attachmentModel" [attachmentSourceId]="displayModel?.source_id" ></fhir-binary>
+            </ng-template>
+          </li>
+        </ul>
+        <div [ngbNavOutlet]="nav" class="mt-2"></div>
+      </ng-container>
+      <ng-template #showSingle>
+        <fhir-binary *ngIf="displayModel?.presented_form?.length == 1"  [attachmentModel]="displayModel?.presented_form?.[0]" [attachmentSourceId]="displayModel?.source_id" ></fhir-binary>
+      </ng-template>
     </div>
   </div>
   <div *ngIf="showDetails" class="card-footer">
diff --git a/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.ts b/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.ts
index 1fbb454a..4c6f723f 100644
--- a/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.ts
+++ b/frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.ts
@@ -3,7 +3,7 @@ import {FhirCardComponentInterface} from '../../fhir-card/fhir-card-component-in
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
 import {Router, RouterModule} from '@angular/router';
 import {DiagnosticReportModel} from '../../../../../lib/models/resources/diagnostic-report-model';
-import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbCollapseModule, NgbNavModule} from '@ng-bootstrap/ng-bootstrap';
 import {CommonModule} from '@angular/common';
 import {BadgeComponent} from '../../common/badge/badge.component';
 import {TableComponent} from '../../common/table/table.component';
@@ -12,7 +12,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule, BinaryComponent, GlossaryLookupComponent],
+  imports: [NgbCollapseModule, NgbNavModule, CommonModule, BadgeComponent, TableComponent, RouterModule, BinaryComponent, GlossaryLookupComponent],
   selector: 'fhir-diagnostic-report',
   templateUrl: './diagnostic-report.component.html',
   styleUrls: ['./diagnostic-report.component.scss']
@@ -21,6 +21,7 @@ export class DiagnosticReportComponent implements OnInit, FhirCardComponentInter
   @Input() displayModel: DiagnosticReportModel
   @Input() showDetails: boolean = true
   @Input() isCollapsed: boolean = false
+  active: number = 0
 
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;
diff --git a/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.html b/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.html
index 21506863..b3f1d1bd 100644
--- a/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.html
+++ b/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.html
@@ -16,7 +16,21 @@
     <fhir-ui-table [displayModel]="displayModel" [tableData]="tableData"></fhir-ui-table>
 
     <div *ngIf="!showDetails">
-      <fhir-binary *ngFor="let attachmentModel of displayModel.content" [attachmentModel]="attachmentModel" [attachmentSourceId]="displayModel?.source_id" ></fhir-binary>
+
+      <ng-container *ngIf="displayModel?.content?.length > 1; else showSingle">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
+          <li *ngFor="let attachmentModel of displayModel.content; index as i" [ngbNavItem]="i">
+            <a ngbNavLink>{{attachmentModel.contentType}}</a>
+            <ng-template ngbNavContent>
+              <fhir-binary [attachmentModel]="attachmentModel" [attachmentSourceId]="displayModel?.source_id" ></fhir-binary>
+            </ng-template>
+          </li>
+        </ul>
+        <div [ngbNavOutlet]="nav" class="mt-2"></div>
+      </ng-container>
+      <ng-template #showSingle>
+        <fhir-binary *ngIf="displayModel?.content?.length == 1"  [attachmentModel]="displayModel?.content?.[0]" [attachmentSourceId]="displayModel?.source_id" ></fhir-binary>
+      </ng-template>
     </div>
   </div>
   <div *ngIf="showDetails" class="card-footer">
diff --git a/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.ts b/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.ts
index a1d1fc5b..13acbd36 100644
--- a/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.ts
+++ b/frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.ts
@@ -4,7 +4,7 @@ import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-i
 import {Router, RouterModule} from '@angular/router';
 import {DocumentReferenceModel} from '../../../../../lib/models/resources/document-reference-model';
 import {FhirCardComponentInterface} from '../../fhir-card/fhir-card-component-interface';
-import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbCollapseModule, NgbNavModule} from '@ng-bootstrap/ng-bootstrap';
 import {CommonModule} from '@angular/common';
 import {BadgeComponent} from '../../common/badge/badge.component';
 import {TableComponent} from '../../common/table/table.component';
@@ -13,7 +13,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule, BinaryComponent],
+  imports: [NgbCollapseModule, NgbNavModule, CommonModule, BadgeComponent, TableComponent, RouterModule, BinaryComponent],
   selector: 'fhir-document-reference',
   templateUrl: './document-reference.component.html',
   styleUrls: ['./document-reference.component.scss']
@@ -23,7 +23,8 @@ export class DocumentReferenceComponent implements OnInit, FhirCardComponentInte
   @Input() showDetails: boolean = true
   @Input() isCollapsed: boolean = false
   tableData: TableRowItem[] = []
-
+  active: number = 0
+  
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}