diff --git a/vigilcare-dashboard/src/__tests__/handoffReport.test.js b/vigilcare-dashboard/src/__tests__/handoffReport.test.js
index cb6060d..08f3a6e 100644
--- a/vigilcare-dashboard/src/__tests__/handoffReport.test.js
+++ b/vigilcare-dashboard/src/__tests__/handoffReport.test.js
@@ -1,93 +1,67 @@
-import { describe, it, expect } from 'vitest'
-import {
-  buildPatientReport,
-  buildSbar,
-  buildWardSummary,
-  extractLatestVitals,
-  formatAlertsSummary,
-  formatVitalsSummary,
-} from '@/composables/handoffReport'
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HandoffReport from '@/components/ward/HandoffReport.vue'
 
-const wardPatient = {
-  encounterId: 'enc-1',
-  firstName: 'Jane',
-  lastName: 'Doe',
-  mrn: 'MRN001',
-  roomBed: 'ICU-3',
-  department: 'ICU',
-  attendingPhysician: 'Dr Smith',
-  news2Score: 8,
-  sofaScore: 6,
-  sofaDelta: 2,
-  gcsScore: 14,
-  qsofaScore: 2,
-  openAlertCount: 1,
-}
-
-const enrichment = {
-  encounter: {
-    admissionReason: 'Sepsis workup',
-    patient: { allergies: 'Penicillin' },
+const mockReport = {
+  generatedAt: '2026-06-23T08:00:00Z',
+  generatedBy: 'Test Nurse',
+  summary: {
+    department: 'ICU',
+    patientCount: 1,
+    criticalCount: 1,
+    alertCount: 2,
+    activeBundles: 1,
   },
-  openAlerts: [{ alertType: 'NEWS2_EMERGENCY' }],
-  pendingOrders: [{ description: 'Blood cultures', status: 'Pending' }],
-  vitals: extractLatestVitals([
-    { observationCode: 'HEART_RATE', value: 110, unit: 'bpm', recordedAt: '2026-06-23T10:00:00Z' },
-    { observationCode: 'SPO2', value: 94, unit: '%', recordedAt: '2026-06-23T10:00:00Z' },
-  ]),
-  bundle: null,
+  patients: [
+    {
+      encounterId: 'enc-1',
+      name: 'Jane Doe',
+      mrn: 'MRN001',
+      room: 'ICU-3',
+      department: 'ICU',
+      attending: 'Dr Smith',
+      news2: 8,
+      sofa: 6,
+      sofaDelta: 2,
+      gcs: 14,
+      qsofa: 2,
+      vitalsSummary: 'HR 110 bpm',
+      alertsSummary: 'NEWS2 Emergency',
+      pendingOrders: 'Blood cultures',
+      sbar: {
+        situation: 'Sepsis workup',
+        background: 'Allergies: Penicillin',
+        assessment: 'NEWS2 8',
+        recommendation: 'Blood cultures',
+      },
+    },
+  ],
 }
 
-describe('handoffReport', () => {
-  it('buildsWardSummary', () => {
-    const summary = buildWardSummary(
-      [
-        wardPatient,
-        { news2Score: 3, openAlertCount: 0, sepsisActive: true },
-      ],
-      'ICU',
-    )
-    expect(summary).toMatchObject({
-      department: 'ICU',
-      patientCount: 2,
-      criticalCount: 1,
-      alertCount: 1,
-      activeBundles: 1,
-    })
-  })
+vi.mock('@/composables/handoffReport', async importOriginal => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    buildHandoffReport: vi.fn(() => Promise.resolve(mockReport)),
+  }
+})
 
-  it('formatsLatestVitals', () => {
-    expect(formatVitalsSummary(enrichment.vitals)).toContain('HR 110 bpm')
-    expect(formatVitalsSummary(enrichment.vitals)).toContain('SpO₂ 94%')
-  })
-
-  it('formatsAlertSummary', () => {
-    expect(formatAlertsSummary(enrichment.openAlerts)).toContain('NEWS2 Emergency')
-  })
-
-  it('buildsPatientReportWithSbar', () => {
-    const report = buildPatientReport(wardPatient, enrichment)
-    expect(report.name).toBe('Jane Doe')
-    expect(report.pendingOrders).toContain('Blood cultures')
-    expect(report.sbar.situation).toBe('Sepsis workup')
-    expect(report.sbar.background).toContain('Penicillin')
-    expect(report.sbar.assessment).toContain('NEWS2 8')
-    expect(report.sbar.recommendation).toContain('Blood cultures')
-  })
-
-  it('includesBundleInRecommendation', () => {
-    const sbar = buildSbar(wardPatient, enrichment.encounter, {
-      ...enrichment,
-      pendingOrders: [],
-      bundle: {
-        complianceStatus: 'IN_PROGRESS',
-        elements: [
-          { elementType: 'BloodCultures', status: 'Pending' },
-          { elementType: 'SerumLactate', status: 'Completed' },
-        ],
+describe('HandoffReport', () => {
+  it('rendersWardSummaryAndPatientRows', async () => {
+    const wrapper = mount(HandoffReport, {
+      props: {
+        encounters: [{ encounterId: 'enc-1' }],
+        department: 'ICU',
+        generatedBy: 'Test Nurse',
       },
+      attachTo: document.body,
     })
-    expect(sbar.recommendation).toContain('Sepsis bundle')
-    expect(sbar.recommendation).toContain('Blood cultures')
+
+    await vi.waitFor(() => expect(document.body.textContent).toContain('Ward Summary'))
+    expect(document.body.textContent).toContain('Jane Doe')
+    expect(document.body.textContent).toContain('SBAR')
+    expect(document.body.textContent).toContain('Sepsis workup')
+    wrapper.unmount()
+    document.body.innerHTML = ''
   })
 })