diff --git a/src/app.html b/src/app.html
index eff8d754..cd3ddf84 100644
--- a/src/app.html
+++ b/src/app.html
@@ -9,9 +9,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
     <link rel="preload" as="font" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" as="image" href="/img/doh_logo_doh-black.png" />
-    <link rel="preload" as="image" href="/img/waverifypluslogo.png" />
-    <link rel="preload" as="image" href="/img/qr-banner-top.png" />
-    <link rel="preload" as="image" href="/img/qr-banner-bottom.png" />
+    <link rel="preload" as="image" href="/img/waverifypluslogo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 
     %sveltekit.head%
diff --git a/src/lib/components/app/FetchAD.svelte b/src/lib/components/app/FetchAD.svelte
index d1ab3d35..1bd152c6 100644
--- a/src/lib/components/app/FetchAD.svelte
+++ b/src/lib/components/app/FetchAD.svelte
@@ -79,10 +79,13 @@
       phone = '';
       gender = '';
       if (selectedSource === 'AD Vault') {
-        last = "Smith-Johnson";
-        first = "Betsy";
+        last = "Mosley";
+        //last = "Smith-Johnson";
+        first = "Jenny";
+        //first = "Betsy";
         gender = "Female";
-        dob = "1950-11-15";
+        dob = "1955-10-03";
+        //dob = "1950-11-15";
       } else if (selectedSource === 'WA Verify+ Demo Server') {
         last = "Gravitate";
         first = "Maria SEATTLE";
diff --git a/src/lib/components/app/ResourceSelector.svelte b/src/lib/components/app/ResourceSelector.svelte
index 26537fa2..34803e77 100644
--- a/src/lib/components/app/ResourceSelector.svelte
+++ b/src/lib/components/app/ResourceSelector.svelte
@@ -40,6 +40,7 @@
     import Practitioner from '$lib/components/resource-templates/Practitioner.svelte';
     import Procedure from '$lib/components/resource-templates/Procedure.svelte';
     import OccupationalData from '$lib/components/resource-templates/OccupationalData.svelte';
+    import QuestionnaireResponse from '$lib/components/resource-templates/QuestionnaireResponse.svelte';
 
     export let submitting: boolean;
     export let resourceCollection: IPSResourceCollection;
@@ -62,7 +63,8 @@
         "Practitioner": Practitioner,
         "Procedure": Procedure,
         "Occupational Data": OccupationalData,
-        "Advance Directives": AdvanceDirective
+        "Advance Directives": AdvanceDirective,
+        "QuestionnaireResponse": QuestionnaireResponse
     };
 
     const ipsDispatch = createEventDispatcher<{ 'ips-retrieved': IPSRetrieveEvent }>();
@@ -281,9 +283,10 @@
                                                     <Button
                                                         size="sm"
                                                         color="secondary"
+                                                        outline
                                                         on:click={() => setJson($resourcesByTypeStore[resourceType][key])}
                                                     >
-                                                        JSON
+                                                        View
                                                     </Button>
                                                 </Col>
                                             {/if}
@@ -292,16 +295,20 @@
                                     <Label style="width: 100%">
                                         <CardBody>
                                             <Row style="overflow:hidden">
-                                                <Col xs=auto class="d-flex align-items-center pe-0">
+                                                <Col xs=auto class="d-flex align-items-top pt-4 pe-0">
                                                     {#if resourceType === "Patient"}
                                                         <Input id={key} type="radio" bind:group={selectedPatient} value={key} />
                                                     {:else}
                                                         <Input id={key} type="checkbox" bind:checked={$resourcesByTypeStore[resourceType][key].include} value={key} />
                                                     {/if}
                                                 </Col>
-                                                <Col>
+                                                <Col class="justify-content-center align-items-center">
                                                     {#if resourceType in components}
-                                                        <svelte:component this={components[resourceType]} resource={$resourcesByTypeStore[resourceType][key].resource} />
+                                                        <svelte:component
+                                                            this={components[resourceType]}
+                                                            content={{
+                                                                resource: $resourcesByTypeStore[resourceType][key].resource,
+                                                                entries: resourceCollection.flattenResources($resourcesByTypeStore)}} />
                                                         <!-- ResourceType: {resourceType}
                                                         Resource: {JSON.stringify($resourcesByTypeStore[resourceType][key].resource)} -->
                                                     {:else if $resourcesByTypeStore[resourceType][key].resource.text?.div}
@@ -325,6 +332,49 @@
 </AccordionItem>
 
 <style>
+    /* Table styling */
+  :global(table) {
+    border-collapse: collapse !important;
+    width: 100% !important;
+  }
+
+  :global(th) {
+    border: 1px solid lightgray !important;
+    padding: 0 7px !important;
+    text-align: center !important;
+  }
+
+  :global(td) {
+    margin-left: 2em !important;
+  }
+
+  :global(thead) {
+    background-color: #0c63e4;
+    color: white;
+  }
+
+  /* Alternating table row coloring */
+  :global(tbody tr:nth-child(odd)) {
+    background-color: #fff;
+    border: 1px solid lightgray;
+  }
+  :global(tbody tr:nth-child(even)) {
+    background-color: #e7f1ff;
+    border: 1px solid lightgray;
+  }
+  
+  /* Sticky table header */
+  :global(th) {
+    background: #0c63e4;
+    position: sticky;
+    top: -17px;
+  }
+
+  /* First column of generated table is usually most important */
+  :global(td:first-child) {
+    font-weight: bold;
+  }
+
     .code {
         overflow:auto;
         margin: 0;
@@ -339,4 +389,4 @@
     :global(div.offcanvas-body) {
         overflow-y: hidden !important;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/resource-templates/AdvanceDirective.svelte b/src/lib/components/resource-templates/AdvanceDirective.svelte
index ee9854b3..c1dda00a 100644
--- a/src/lib/components/resource-templates/AdvanceDirective.svelte
+++ b/src/lib/components/resource-templates/AdvanceDirective.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { base64toBlob } from '$lib/utils/util';
-  import type { DocumentReferencePOLST } from '$lib/utils/types';
+  import type { DocumentReferencePOLST, ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<DocumentReferencePOLST>; // Define a prop to pass the data to the component
 
-  export let resource: DocumentReferencePOLST; // Define a prop to pass the data to the component
+  let resource: DocumentReferencePOLST = content.resource;
 
   /** Determine if any extension has the revoked status
   let isRevoked = false;
diff --git a/src/lib/components/resource-templates/AllergyIntolerance.svelte b/src/lib/components/resource-templates/AllergyIntolerance.svelte
index c7cb313f..9b918e13 100644
--- a/src/lib/components/resource-templates/AllergyIntolerance.svelte
+++ b/src/lib/components/resource-templates/AllergyIntolerance.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { AllergyIntolerance } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<AllergyIntolerance>; // Define a prop to pass the data to the component
 
-  export let resource: AllergyIntolerance; // Define a prop to pass the data to the component
+  let resource: AllergyIntolerance = content.resource;
 
   function badgeColor(criticality: string) {
     if (criticality) {
diff --git a/src/lib/components/resource-templates/Condition.svelte b/src/lib/components/resource-templates/Condition.svelte
index ba0f2623..99f98b2c 100644
--- a/src/lib/components/resource-templates/Condition.svelte
+++ b/src/lib/components/resource-templates/Condition.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Condition } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
 
-  export let resource : Condition; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Condition>; // Define a prop to pass the data to the component
+
+  let resource: Condition = content.resource;
 
   function badgeColor(severity: string) {
     if (severity) {
@@ -57,9 +60,12 @@
     <strong>{resource.code.text}</strong><br>
   {/if}
 {/if}
-{#if resource.bodySite}
-  Site: {resource.bodySite}<br>
+{#if resource.bodySite?.[0]?.coding?.[0]?.display}
+  Site: {resource.bodySite[0]?.coding?.[0]?.display}<br>
 {/if}
 {#if resource.onsetDateTime}
-  Since {resource.onsetDateTime.split("T")[0]}<br>
+  Since: {resource.onsetDateTime.split("T")[0]}<br>
+{/if}
+{#if resource.recordedDate}
+  Recorded: {resource.recordedDate.split("T")[0]}<br>
 {/if}
diff --git a/src/lib/components/resource-templates/Consent.svelte b/src/lib/components/resource-templates/Consent.svelte
new file mode 100644
index 00000000..2b6d3838
--- /dev/null
+++ b/src/lib/components/resource-templates/Consent.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Badge } from 'sveltestrap';
+  import type { Consent } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+
+  export let content: ResourceTemplateParams<Consent>; // Define a prop to pass the data to the component
+
+  let resource: Consent = content.resource;
+</script>
+{#if resource.text?.div}
+  {@html resource.text.div}
+  <br>
+{/if}
+{#if resource.category?.[0]}
+  {#if resource.category[0].coding}
+    <Badge color="primary">{resource.category[0].coding[0].system} : {resource.category[0].coding[0].code}</Badge>
+    <br />
+    {#if resource.category[0].coding[0].display}
+      <strong>{resource.category[0].coding[0].display}</strong>
+    {:else if resource.category[0].text}
+      <strong>{resource.category[0].text}</strong>
+    {/if}
+    <br>
+  {:else if resource.category[0].text}
+    <strong>{resource.category[0].text}</strong>
+    <br>
+  {/if}
+{/if}
+{#if resource.provision?.code?.[0].coding}
+  Intent: {resource.provision?.code?.[0].coding[0].display}
+{/if}
diff --git a/src/lib/components/resource-templates/DiagnosticReport.svelte b/src/lib/components/resource-templates/DiagnosticReport.svelte
index 10d4544e..8e17cc35 100644
--- a/src/lib/components/resource-templates/DiagnosticReport.svelte
+++ b/src/lib/components/resource-templates/DiagnosticReport.svelte
@@ -1,42 +1,91 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
-  import type { DiagnosticReport } from 'fhir/r4';
+  import type { BundleEntry, DiagnosticReport, Observation } from 'fhir/r4';
+  import ObservationTemplate from './Observation.svelte';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  import { getEntry } from '$lib/utils/util';
 
-  export let resource: DiagnosticReport; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<DiagnosticReport>; // Define a prop to pass the data to the component
+
+  let resource: DiagnosticReport = content.resource;
+
+  let results: Observation[] | undefined = [];
+
+  $: {
+    if (resource) {
+      if (resource.result) {
+        for (let result of resource.result) {
+          if (result.reference) {
+            let resultResource;
+            if (resource.contained?.[0]?.resourceType === 'Observation') {
+              // If the result observation is contained in the resource
+              resultResource = resource.contained[0];
+            } else {
+              // If the result observation is referenced
+              resultResource = getEntry(
+                content.entries as BundleEntry[],
+                result.reference
+              ) as Observation;
+            }
+            if (resultResource) {
+              results.push(resultResource);
+            }
+          }
+        }
+      }
+    }
+  }
 </script>
 
+{#if resource.category?.[0].coding}
+  <Badge color="primary">{resource.category[0].coding[0].display ?? resource.category[0].coding[0].code}</Badge>
+{/if}
 {#if resource.code}
   {#if resource.code.coding}
     <Badge color="primary">{resource.code.coding[0].system} : {resource.code.coding[0].code}</Badge>
     <br />
     {#if resource.code.coding[0].display}
-      <strong>{resource.code.coding[0].display}</strong><br>
+      <strong>{resource.code.coding[0].display}</strong>
     {:else if resource.code.text}
-      <strong>{resource.code.text}</strong><br>
+      <strong>{resource.code.text}</strong>
     {/if}
   {:else if resource.code.text}
-    <strong>{resource.code.text}</strong><br>
+    <br><strong>{resource.code.text}</strong>
   {/if}
 {/if}
-{#if resource.effectivePeriod?.start}
-  Effective {resource.effectivePeriod.start}{resource.effectivePeriod.end
+<br>
+{#if resource.effectivePeriod}
+  Effective: {resource.effectivePeriod.start ? resource.effectivePeriod.start : ''}{resource
+    .effectivePeriod.end
     ? ` - ${resource.effectivePeriod.end}`
     : ''}
 {:else if resource.effectiveDateTime}
-    Date: {resource.effectiveDateTime.split("T")[0]}
+  Date: {resource.effectiveDateTime.split('T')[0]}
 {/if}
 <br>
 {#if resource.result}
-    <table class="table table-bordered table-sm">
-        <thead>
-        <tr><th colspan="5">Result(s)</th></tr>
-        </thead>
-        {#each resource.result as result}
-            {#if result.display}
-            <tr>
-                <td>{result.display}</td>
-            </tr>
-            {/if}
-        {/each}
-    </table>
+  <table class="table table-bordered table-sm">
+    <thead>
+      <tr><th>Result(s)</th></tr>
+    </thead>
+    <tbody>
+    {#each results as result}
+      <tr>
+        <div class="ml-4">
+          <ObservationTemplate
+            content={{ resource: result, entries: content.entries }}
+            contained={resource.effectiveDateTime !== undefined || resource.effectivePeriod !== undefined}
+          />
+        </div>
+      </tr>
+    {/each}
+    {#each resource.result as result}
+      {#if result.display}
+        <tr>
+          <td>{result.display}</td>
+        </tr>
+      {/if}
+    {/each}
+    </tbody>
+  </table>
 {/if}
diff --git a/src/lib/components/resource-templates/Dosage.svelte b/src/lib/components/resource-templates/Dosage.svelte
index f64ad236..4e97b3f4 100644
--- a/src/lib/components/resource-templates/Dosage.svelte
+++ b/src/lib/components/resource-templates/Dosage.svelte
@@ -5,6 +5,13 @@
 </script>
 
 {#if dosage}
+  {#if dosage.text}
+    Dosage: {dosage.text}
+  {:else if dosage.asNeededBoolean}
+    Dosage: as needed
+  {:else}
+    <span class="text-muted">No dosage information</span>
+  {/if}
   {#if dosage.route?.coding || dosage.doseAndRate || dosage.timing?.repeat}
     <table class="table table-bordered table-sm">
       <thead>
@@ -17,24 +24,20 @@
           <th scope="col">Freq. Period</th>
         </tr>
       </thead>
-      <tr>
-        <td>{dosage.route?.coding?.[0].display ?? ''}</td>
-        <td>{dosage.doseAndRate?.[0].doseQuantity?.value ?? ''}</td>
-        <td>{dosage.doseAndRate?.[0].doseQuantity?.unit ?? ''}</td>
-        <td>{dosage.timing?.repeat?.count ?? ''}</td>
-        <td>
-          {#if dosage.timing?.repeat?.period && dosage.timing?.repeat?.periodUnit}
-            {dosage.timing?.repeat?.period}{dosage.timing?.repeat?.periodUnit}
-          {/if}
-        </td>
-      </tr>
+      <tbody>
+        <tr>
+          <td>{dosage.route?.coding?.[0].display ?? ''}</td>
+          <td>{dosage.doseAndRate?.[0].doseQuantity?.value ?? ''}</td>
+          <td>{dosage.doseAndRate?.[0].doseQuantity?.unit ?? ''}</td>
+          <td>{dosage.timing?.repeat?.count ?? ''}</td>
+          <td>
+            {#if dosage.timing?.repeat?.period && dosage.timing?.repeat?.periodUnit}
+              {dosage.timing?.repeat?.period}{dosage.timing?.repeat?.periodUnit}
+            {/if}
+          </td>
+        </tr>
+    </tbody>
     </table>
-  {:else if dosage.text}
-    Dosage: {dosage.text}
-  {:else if dosage.asNeededBoolean}
-    Dosage: as needed
-  {:else}
-    <span class="text-muted">No dosage information</span>
   {/if}
 {:else}
   <span class="text-muted">No dosage information</span>
diff --git a/src/lib/components/resource-templates/Encounter.svelte b/src/lib/components/resource-templates/Encounter.svelte
index b06cb35a..ae488e61 100644
--- a/src/lib/components/resource-templates/Encounter.svelte
+++ b/src/lib/components/resource-templates/Encounter.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Encounter } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<Encounter>; // Define a prop to pass the data to the component
 
-  export let resource: Encounter; // Define a prop to pass the data to the component
+  let resource: Encounter = content.resource;
 </script>
 
 {#if resource.period?.start}
diff --git a/src/lib/components/resource-templates/Immunization.svelte b/src/lib/components/resource-templates/Immunization.svelte
index f5eae9a6..de4bb6c9 100644
--- a/src/lib/components/resource-templates/Immunization.svelte
+++ b/src/lib/components/resource-templates/Immunization.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Immunization } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<Immunization>; // Define a prop to pass the data to the component
 
-  export let resource: Immunization; // Define a prop to pass the data to the component
+  let resource: Immunization = content.resource;
 </script>
 {#if resource.vaccineCode}
   {#if resource.vaccineCode.coding}
diff --git a/src/lib/components/resource-templates/Location.svelte b/src/lib/components/resource-templates/Location.svelte
index 0160e693..0d17eaad 100644
--- a/src/lib/components/resource-templates/Location.svelte
+++ b/src/lib/components/resource-templates/Location.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { Location } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
   
-  export let resource: Location; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Location>; // Define a prop to pass the data to the component
+
+  let resource: Location = content.resource;
 </script>
   
 <strong>{resource.name ?? ""}</strong>
diff --git a/src/lib/components/resource-templates/Medication.svelte b/src/lib/components/resource-templates/Medication.svelte
index 15636363..5459e046 100644
--- a/src/lib/components/resource-templates/Medication.svelte
+++ b/src/lib/components/resource-templates/Medication.svelte
@@ -1,23 +1,41 @@
 <script lang="ts">
   import { Badge} from 'sveltestrap';
   import type { Medication } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
 
-  export let resource: Medication; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Medication>; // Define a prop to pass the data to the component
+
+  let resource: Medication = content.resource;
+  let codingMap = new Map();
 </script>
 
 {#if resource.code}
   {#if resource.code.coding}
     <Badge color="primary">{resource.code.coding[0].system} : {resource.code.coding[0].code}</Badge>
     <br />
-    {#if resource.code.coding[0].display}
-      <strong>{resource.code.coding[0].display}</strong><br>
-    {:else if resource.code.text}
-      <strong>{resource.code.text}</strong><br>
-    {/if}
-  {:else if resource.code.text}
-    <strong>{resource.code.text}</strong><br>
   {/if}
 {/if}
+{#if resource.code?.text}
+  {(codingMap.set(resource.code.text, 1) && undefined) ?? ""}
+  <strong>{resource.code.text}</strong><br>
+{/if}
+{#if resource.code?.coding}
+  {#each resource.code.coding as coding, index}
+    {#if !resource.code?.text && index == 0}
+      <strong>
+        {#if coding.display && !codingMap.get(coding.display)}
+          {(codingMap.set(coding.display, 1) && undefined) ?? ""}
+          {coding.display}<br>
+        {/if}
+      </strong>
+    {:else}
+      {#if coding.display && !codingMap.get(coding.display)}
+        {(codingMap.set(coding.display, 1) && undefined) ?? ""}
+        {coding.display}<br>
+      {/if}
+    {/if}
+  {/each}
+{/if}
 {#if resource.ingredient}
   <table class="table table-bordered table-sm">
     <thead>
@@ -30,8 +48,9 @@
         <th scope="col">Strength Denominator Unit</th>
       </tr>
     </thead>
+    <tbody>
     {#each resource.ingredient as ingredient}
-      <tr>
+      <tr style="text-align: center !important">
         <td>{ingredient.itemCodeableConcept?.coding?.[0].display}</td>
         <td>{ingredient.strength?.numerator?.value}</td>
         <td>{ingredient.strength?.numerator?.unit}</td>
@@ -39,5 +58,6 @@
         <td>{ingredient.strength?.denominator?.unit}</td>
       </tr>
     {/each}
+    </tbody>
   </table>
 {/if}
diff --git a/src/lib/components/resource-templates/MedicationRequest.svelte b/src/lib/components/resource-templates/MedicationRequest.svelte
index 1c9b4d63..d5c7c6e7 100644
--- a/src/lib/components/resource-templates/MedicationRequest.svelte
+++ b/src/lib/components/resource-templates/MedicationRequest.svelte
@@ -1,34 +1,72 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
-  import type { MedicationRequest } from "fhir/r4";
+  import type { BundleEntry, Medication, MedicationRequest, Resource } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
   import Dosage from '$lib/components/resource-templates/Dosage.svelte';
-  
-  export let resource: MedicationRequest; // Define a prop to pass the data to the component
+  import MedicationTemplate from '$lib/components/resource-templates/Medication.svelte';
+  import { getEntry } from '$lib/utils/util';
+
+  export let content: ResourceTemplateParams<MedicationRequest>; // Define a prop to pass the data to the component
+
+  let resource: MedicationRequest = content.resource;
+
+  let medication: Medication | undefined;
+
+  $: {
+    if (resource) {
+      if (resource.medicationReference) {
+        if (resource.contained?.[0]?.resourceType === 'Medication') {
+          // If the medication is contained in the resource
+          medication = resource.contained[0];
+        } else if (resource.medicationReference?.reference) {
+          // If the medication is referenced
+          medication = getEntry(content.entries as BundleEntry[], resource.medicationReference.reference) as Medication;
+        }
+      }
+    }
+  }
 </script>
 
 <Badge color="secondary">{resource.intent ? resource.intent : ''}</Badge>
-<Badge color={resource.status === "stopped" ? "secondary" : "primary"}>{resource.status ? `${resource.status}` : ''}</Badge>
-<br>
+<Badge color={resource.status === 'stopped' ? 'secondary' : 'primary'}
+  >{resource.status ? `${resource.status}` : ''}</Badge
+>
+<br />
 {#if resource.medicationCodeableConcept}
-    {#if resource.medicationCodeableConcept.coding}
-        {#if resource.medicationCodeableConcept.coding[0].system && resource.medicationCodeableConcept.coding[0].code}
-            <Badge color="primary">{resource.medicationCodeableConcept.coding[0].system} : {resource.medicationCodeableConcept.coding[0].code}</Badge>
-            <br>
-        {/if}
-        {#if resource.medicationCodeableConcept.coding[0].display}
-            <strong>{resource.medicationCodeableConcept.coding[0].display}</strong><br>
-        {:else if resource.medicationCodeableConcept.text}
-            <strong>{resource.medicationCodeableConcept.text}</strong><br>
-        {/if}
+  {#if resource.medicationCodeableConcept.coding}
+    {#if resource.medicationCodeableConcept.coding[0].system && resource.medicationCodeableConcept.coding[0].code}
+      <Badge color="primary"
+        >{resource.medicationCodeableConcept.coding[0].system} : {resource.medicationCodeableConcept
+          .coding[0].code}</Badge
+      >
+      <br />
+    {/if}
+    {#if resource.medicationCodeableConcept.coding[0].display}
+      <strong>{resource.medicationCodeableConcept.coding[0].display}</strong><br />
     {:else if resource.medicationCodeableConcept.text}
-        <strong>{resource.medicationCodeableConcept.text}</strong><br>
+      <strong>{resource.medicationCodeableConcept.text}</strong><br />
     {/if}
+  {:else if resource.medicationCodeableConcept.text}
+    <strong>{resource.medicationCodeableConcept.text}</strong><br />
+  {/if}
+{/if}
+
+{#if medication}
+  <MedicationTemplate content={{ resource: medication, entries: content.entries }} />
+{:else if resource.medicationReference?.display}
+  <strong>{resource.medicationReference?.display}</strong>
+  <br>
+{/if}
+
+{#if resource.authoredOn}
+  Authored: {resource.authoredOn.split('T')[0]}<br>
 {/if}
 {#if resource.dispenseRequest?.validityPeriod}
-    Valid from {resource.dispenseRequest?.validityPeriod.start}{resource.dispenseRequest?.validityPeriod.end
+  Valid: {resource.dispenseRequest?.validityPeriod.start}{resource.dispenseRequest
+    ?.validityPeriod.end
     ? ` - ${resource.dispenseRequest?.validityPeriod.end}`
     : ''}
-    <br>
+  <br />
 {/if}
 
-<Dosage dosage={resource.dosageInstruction?.[0]} />
\ No newline at end of file
+<Dosage dosage={resource.dosageInstruction?.[0]} />
diff --git a/src/lib/components/resource-templates/MedicationStatement.svelte b/src/lib/components/resource-templates/MedicationStatement.svelte
index b95c7da6..ece966b9 100644
--- a/src/lib/components/resource-templates/MedicationStatement.svelte
+++ b/src/lib/components/resource-templates/MedicationStatement.svelte
@@ -1,13 +1,33 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
-  import type { MedicationStatement } from "fhir/r4";
+  import type { BundleEntry, Medication, MedicationStatement } from "fhir/r4";
   import Dosage from '$lib/components/resource-templates/Dosage.svelte';
-  
-  export let resource: MedicationStatement; // Define a prop to pass the data to the component
+  import MedicationTemplate from '$lib/components/resource-templates/Medication.svelte';
+  import { getEntry } from '$lib/utils/util';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+
+  export let content: ResourceTemplateParams<MedicationStatement>; // Define a prop to pass the data to the component
+
+  let resource: MedicationStatement = content.resource;
+
+  let medication: Medication | undefined;
+
+  $: {
+    if (resource) {
+      if (resource.medicationReference) {
+        if (resource.contained?.[0]?.resourceType === 'Medication') {
+          // If the medication is contained in the resource
+          medication = resource.contained[0];
+        } else if (resource.medicationReference?.reference) {
+          // If the medication is referenced
+          medication = getEntry(content.entries as BundleEntry[], resource.medicationReference.reference) as Medication;
+        }
+      }
+    }
+  }
 </script>
 {#if resource.status}
-<Badge color={resource.status === "unknown" ? "secondary" : "primary"}>{resource.status}</Badge>
-<br>
+<Badge color={resource.status === "unknown" || resource.status === "stopped" ? "secondary" : "primary"}>{resource.status}</Badge>
 {/if}
 
 {#if resource.medicationCodeableConcept}
@@ -20,22 +40,16 @@
       <strong>{resource.medicationCodeableConcept.text}</strong><br>
     {/if}
   {:else if resource.medicationCodeableConcept.text}
-    <strong>{resource.medicationCodeableConcept.text}</strong><br>
-  {/if}
-  {#if resource.medicationCodeableConcept.coding}  
-    <Badge color="primary">{resource.medicationCodeableConcept.coding[0].system} : {resource.medicationCodeableConcept?.coding[0].code}</Badge>
-    <br>
-    {#if resource.medicationCodeableConcept.coding[0].display}
-      <strong>{resource.medicationCodeableConcept.coding[0].display}</strong><br>
-    {:else if resource.medicationCodeableConcept.text}
-      <strong>{resource.medicationCodeableConcept.text}</strong><br>
+    {#if resource.status}
+      <br>
     {/if}
-  {:else if resource.medicationCodeableConcept.text}
     <strong>{resource.medicationCodeableConcept.text}</strong><br>
   {/if}
 {/if}
 
-{#if resource.medicationReference?.display}
+{#if medication}
+  <MedicationTemplate content={{ resource: medication, entries: content.entries }} />
+{:else if resource.medicationReference?.display}
   <strong>{resource.medicationReference?.display}</strong>
   <br>
 {/if}
@@ -44,12 +58,12 @@
   {resource.reasonReference?.[0].display}<br>
 {/if}
 
-{#if resource.effectivePeriod?.start}
-  Effective {resource.effectivePeriod.start}{resource.effectivePeriod.end
+<Dosage dosage={resource.dosage?.[0]} />
+
+{#if resource.effectivePeriod}
+  Effective: {resource.effectivePeriod.start ? resource.effectivePeriod.start : ''}{resource.effectivePeriod.end
     ? ` - ${resource.effectivePeriod.end}`
     : ''}
 {:else if resource.effectiveDateTime}
-  {resource.effectiveDateTime ? `Effective date: ${resource.effectiveDateTime.split("T")[0]}` : ''}
-{/if}
-
-<Dosage dosage={resource.dosage?.[0]} />
\ No newline at end of file
+  Date: {resource.effectiveDateTime.split("T")[0]}
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/resource-templates/Observation.svelte b/src/lib/components/resource-templates/Observation.svelte
index 51c3f72a..0ff0dc99 100644
--- a/src/lib/components/resource-templates/Observation.svelte
+++ b/src/lib/components/resource-templates/Observation.svelte
@@ -1,12 +1,53 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
-  import type { Observation } from "fhir/r4";
+  import type { BundleEntry, Observation } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  import { getEntry } from '$lib/utils/util';
   
-  export let resource: Observation; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Observation>; // Define a prop to pass the data to the component
+  export let contained: Boolean = false;
+
+  let resource: Observation = content.resource;
+
+
+  interface ResolvedMember {
+    resource?: Observation;
+    display?: string;
+  }
+  let members: ResolvedMember[] | undefined = [];
+
+$: {
+  if (resource) {
+    if (resource.hasMember) {
+      for (let member of resource.hasMember) {
+        let memberFields: ResolvedMember = {};
+        if (member.reference) {
+          let memberResource;
+          if (resource.contained?.[0]?.resourceType === 'Observation') {
+            // If the member observation is contained in the resource
+            memberResource = resource.contained[0];
+          } else {
+            // If the member observation is referenced
+            memberResource = getEntry(content.entries as BundleEntry[], member.reference) as Observation;
+          }
+          if (memberResource) {
+            memberFields.resource = memberResource;
+          }
+        }
+        if (member.display) {
+          memberFields.display = member.display;
+        }
+        if (Object.keys(memberFields).length > 0) {
+          members.push(memberFields);
+        }
+      }
+    }
+  }
+}
 </script>
 
-{#if resource.category?.[0].coding}
-  <Badge color="primary">{resource.category[0].coding[0].code}</Badge><br>
+{#if !contained && resource.category?.[0].coding}
+  <Badge color="primary">{resource.category[0].coding[0].code}</Badge>
 {/if}
 {#if resource.code}
   {#if resource.code.coding}
@@ -18,19 +59,51 @@
       <strong>{resource.code.text}: </strong>
     {/if}
   {:else if resource.code.text}
-    <strong>{resource.code.text}: </strong>
+    <br><strong>{resource.code.text}: </strong>
   {/if}
 {/if}
 {#if resource.valueCodeableConcept?.coding?.[0].display}
-  <strong>{resource.valueCodeableConcept.coding[0].display}</strong><br>
+  {resource.valueCodeableConcept.coding[0].display}<br>
 {/if}
 {#if resource.valueQuantity}
-  <strong>{resource.valueQuantity.value ?? ""} {resource.valueQuantity.unit ?? ""}</strong><br>
+  {resource.valueQuantity.value ?? ""} {resource.valueQuantity.unit ?? ""}<br>
 {/if}
 {#if resource.valueString}
-  <strong>{resource.valueString ?? ""}</strong><br>
+  {resource.valueString ?? ""}<br>
+{/if}
+{#if resource.note}
+ {#each resource.note as note}
+  {#if note.text}
+    Note: {note.text}<br>
+  {/if}
+ {/each}
 {/if}
 {#if !(resource.valueCodeableConcept || resource.valueQuantity || resource.valueString)}
-<br>
+  <br>
+{/if}
+{#if members.length > 0}
+<table class="table table-bordered table-sm">
+  <thead>
+    <tr><th>Result(s)</th></tr>
+  </thead>
+  <tbody>
+  {#each members as member}
+    <tr>
+      <div class="mx-4">
+        {#if member.resource}
+          <svelte:self
+            content={{ resource: member.resource, entries: content.entries }}
+            contained={resource.effectiveDateTime !== undefined || resource.effectivePeriod !== undefined}
+          />
+        {:else if member.display}
+          <strong>{member.display}</strong>
+        {/if}
+      </div>
+    </tr>
+  {/each}
+  </tbody>
+</table>
+{/if}
+{#if resource.effectiveDateTime}
+  Date: {resource.effectiveDateTime.split("T")[0]}
 {/if}
-Date: {resource.effectiveDateTime ? `${resource.effectiveDateTime.split("T")[0]}` : ''}
diff --git a/src/lib/components/resource-templates/OccupationalData.svelte b/src/lib/components/resource-templates/OccupationalData.svelte
index 21ec1e1b..9a8edf8d 100644
--- a/src/lib/components/resource-templates/OccupationalData.svelte
+++ b/src/lib/components/resource-templates/OccupationalData.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import { Badge } from 'sveltestrap';
     import type { Observation } from "fhir/r4";
+    import type { ResourceTemplateParams } from '$lib/utils/types';
     
-    export let resource: Observation; // Define a prop to pass the data to the component
+    export let content: ResourceTemplateParams<Observation>; // Define a prop to pass the data to the component
+    let resource: Observation = content.resource;
   </script>
 
   {#if resource.code.coding?.[0].code}
diff --git a/src/lib/components/resource-templates/Organization.svelte b/src/lib/components/resource-templates/Organization.svelte
index 7c0950c4..c1063c1d 100644
--- a/src/lib/components/resource-templates/Organization.svelte
+++ b/src/lib/components/resource-templates/Organization.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { Organization } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
   
-  export let resource: Organization; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Organization>; // Define a prop to pass the data to the component
+  let resource: Organization = content.resource;
 </script>
 
 <strong>{resource.name}</strong>
diff --git a/src/lib/components/resource-templates/Patient.svelte b/src/lib/components/resource-templates/Patient.svelte
index 90c4a57c..cfcc6e60 100644
--- a/src/lib/components/resource-templates/Patient.svelte
+++ b/src/lib/components/resource-templates/Patient.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-  import { Badge } from 'sveltestrap';
-  import type { Patient } from "fhir/r4";
-  
-  export let resource: Patient; // Define a prop to pass the data to the component
+    import { Badge, Button, Icon } from 'sveltestrap';
+    import type { Patient } from "fhir/r4";
+    import type { ResourceTemplateParams } from '$lib/utils/types';
+
+    export let content: ResourceTemplateParams<Patient>; // Define a prop to pass the data to the component
+    let resource: Patient = content.resource;
+
+    let showContact = false;
 </script>
 
 {#if resource.name}
@@ -21,121 +25,134 @@
     </strong>
     <br>
 {/if}
+
 {#if resource.birthDate}
     Birth Date: {resource.birthDate}<br>
 {/if}
 {#if resource.gender}
     Gender: {resource.gender ?? ""}<br>
 {/if}
-{#if resource.telecom}
-  <table class="table table-bordered table-sm">
-      <thead>
-          <tr><th colspan="3">Contact Information</th></tr>
-      </thead>
-      {#each resource.telecom as telecom}
-          <tr>
-              <td>{telecom.system ?? ""}</td>
-              <td>{telecom.use ?? ""}</td>
-              <td>{telecom.value ?? ""}</td>
-          </tr>
-      {/each}
-  </table>
-{/if}
-{#if resource.address}
-  <table class="table table-bordered table-sm">
-      <thead>
-          <tr>
-          <th scope="col">Use</th>
-          <th scope="col">Address</th>
-          </tr>
-          <tr></tr>
-      </thead>
-      {#each resource.address as address}
-          <tr>
-          <td>{address.use ?? ""}</td>
-          <td>
-              {#if address.line}
-                {#each address.line as line}
-                    {line}<br />
+{#if resource.telecom || resource.address || resource.contact}
+    <Button
+        class="my-1"
+        size="sm"
+        color={!showContact ? "secondary" : "primary"}
+        outline
+        on:click={() => showContact = !showContact}>
+        {showContact ? 'Hide' : 'Show'} contact information <Icon style="font-size: x-small;"name={!showContact ? "caret-down" : "caret-up"} />
+    </Button>
+    {#if showContact}
+        {#if resource.telecom}
+            <table class="table table-bordered table-sm">
+                <thead>
+                    <tr><th colspan="3">Contact Information</th></tr>
+                </thead>
+                {#each resource.telecom as telecom}
+                    <tr>
+                        <td>{telecom.system ?? ""}</td>
+                        <td>{telecom.use ?? ""}</td>
+                        <td>{telecom.value ?? ""}</td>
+                    </tr>
                 {/each}
-              {/if}
-              {address.city ?? "[Unknown City]"}{
-                  address.state
-                      ? `, ${address.state}`
-                      : ''
-              }{address.country
-                  ? `, ${address.country}`
-                  : ''}
-              {address.postalCode ?? ""}
-          </td>
-          </tr>
-      {/each}
-  </table>
-{/if}
-{#if resource.contact}
-  {#each resource.contact as contact}
-    <strong>Emergency Contact:</strong><br>
-    {#if contact.relationship}
-        {#each contact.relationship as relationship}
-            {#if relationship.coding && relationship.coding[0].display}
-                <Badge color="secondary">{relationship.coding[0].display}</Badge>
-            {/if}
-        {/each}
-        <br>
-    {/if}
-    {#if contact.name}
-        <strong>
-            {contact.name.prefix ?? ""}
-            {contact.name.given ? contact.name.given.join(' ') : ""}
-            {contact.name.family ?? ""}
-        </strong>
-        <br>
-    {/if}
-    {#if contact.gender}
-      Gender: {contact.gender ?? ""}<br>
-    {/if}
-    {#if contact.telecom}
-          <table class="table table-bordered table-sm">
-              <thead>
-                  <tr><th colspan="3">Contact Information</th></tr>
-              </thead>
-              {#each contact.telecom as telecom}
-                  <tr>
-                      <td>{telecom.system ?? ""}</td>
-                      <td>{telecom.use ?? ""}</td>
-                      <td>{telecom.value ?? ""}</td>
-                  </tr>
-              {/each}
-          </table>
-    {/if}
-    {#if contact.address}
-        <table class="table table-bordered table-sm">
-            <thead>
-                <tr>
-                <th scope="col">Use</th>
-                <th scope="col">Address</th>
-                </tr>
-                <tr></tr>
-            </thead>
-            <tr>
-                <td>{contact.address.use ?? ""}</td>
-                <td>
-                    {#if contact.address.line}
-                        {#each contact.address.line as line}
-                            {line}<br />
+            </table>
+        {/if}
+        {#if resource.address}
+            <table class="table table-bordered table-sm">
+                <thead>
+                    <tr>
+                    <th scope="col">Use</th>
+                    <th scope="col">Address</th>
+                    </tr>
+                    <tr></tr>
+                </thead>
+                {#each resource.address as address}
+                    <tr>
+                    <td>{address.use ?? ""}</td>
+                    <td>
+                        {#if address.line}
+                            {#each address.line as line}
+                                {line}<br />
+                            {/each}
+                        {/if}
+                        {address.city ?? "[Unknown City]"}{
+                            address.state
+                                ? `, ${address.state}`
+                                : ''
+                        }{address.country
+                            ? `, ${address.country}`
+                            : ''}
+                        {address.postalCode ?? ""}
+                    </td>
+                    </tr>
+                {/each}
+            </table>
+        {/if}
+        {#if resource.contact}
+            {#each resource.contact as contact}
+                <strong>Emergency Contact:</strong><br>
+                {#if contact.relationship}
+                    {#each contact.relationship as relationship}
+                        {#if relationship.coding && relationship.coding[0].display}
+                            <Badge color="secondary">{relationship.coding[0].display}</Badge>
+                        {/if}
+                    {/each}
+                    <br>
+                {/if}
+                {#if contact.name}
+                    <strong>
+                        {contact.name.prefix ?? ""}
+                        {contact.name.given ? contact.name.given.join(' ') : ""}
+                        {contact.name.family ?? ""}
+                    </strong>
+                    <br>
+                {/if}
+                {#if contact.gender}
+                Gender: {contact.gender ?? ""}<br>
+                {/if}
+                {#if contact.telecom}
+                    <table class="table table-bordered table-sm">
+                        <thead>
+                            <tr><th colspan="3">Contact Information</th></tr>
+                        </thead>
+                        {#each contact.telecom as telecom}
+                            <tr>
+                                <td>{telecom.system ?? ""}</td>
+                                <td>{telecom.use ?? ""}</td>
+                                <td>{telecom.value ?? ""}</td>
+                            </tr>
                         {/each}
-                    {/if}
-                    {contact.address.city ?? "[Unknown City]"}{
-                        contact.address.state
-                            ? `, ${contact.address.state}`
-                            : ''
-                    }{contact.address.country
-                        ? `, ${contact.address.country}`
-                        : ''}
-                    {contact.address.postalCode ?? ""}
-                </td>
-                </tr>
-        </table>
+                    </table>
+                {/if}
+                {#if contact.address}
+                    <table class="table table-bordered table-sm">
+                        <thead>
+                            <tr>
+                            <th scope="col">Use</th>
+                            <th scope="col">Address</th>
+                            </tr>
+                            <tr></tr>
+                        </thead>
+                        <tr>
+                            <td>{contact.address.use ?? ""}</td>
+                            <td>
+                                {#if contact.address.line}
+                                    {#each contact.address.line as line}
+                                        {line}<br />
+                                    {/each}
+                                {/if}
+                                {contact.address.city ?? "[Unknown City]"}{
+                                    contact.address.state
+                                        ? `, ${contact.address.state}`
+                                        : ''
+                                }{contact.address.country
+                                    ? `, ${contact.address.country}`
+                                    : ''}
+                                {contact.address.postalCode ?? ""}
+                            </td>
+                            </tr>
+                    </table>
+                {/if}
+            {/each}
+        {/if}
     {/if}
-  {/each}
 {/if}
diff --git a/src/lib/components/resource-templates/Practitioner.svelte b/src/lib/components/resource-templates/Practitioner.svelte
index 4711a926..b0fe8f3f 100644
--- a/src/lib/components/resource-templates/Practitioner.svelte
+++ b/src/lib/components/resource-templates/Practitioner.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
     import type { Practitioner } from "fhir/r4";
+    import type { ResourceTemplateParams } from '$lib/utils/types';
+    
+    export let content: ResourceTemplateParams<Practitioner>; // Define a prop to pass the data to the component
+
+    let resource: Practitioner = content.resource;
 
-    export let resource: Practitioner; // Define a prop to pass the data to the component
 </script>
   
 {#if resource.name}
diff --git a/src/lib/components/resource-templates/Procedure.svelte b/src/lib/components/resource-templates/Procedure.svelte
index 317b3ed5..519a507e 100644
--- a/src/lib/components/resource-templates/Procedure.svelte
+++ b/src/lib/components/resource-templates/Procedure.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Procedure } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
   
-  export let resource: Procedure; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Procedure>; // Define a prop to pass the data to the component
+  let resource: Procedure = content.resource;
 </script>
 
 {#if resource.code}
@@ -19,13 +21,17 @@
   {/if}
 {/if}
 {#if resource.performedDateTime}
-  Performed {resource.performedDateTime.split("T")[0]}
+  Performed: {resource.performedDateTime.split("T")[0]}
 {:else if resource.performedPeriod}
-  Performed {resource.performedPeriod}
+  Performed: {resource.performedPeriod.start ? resource.performedPeriod.start : ''}{resource.performedPeriod.end
+    ? ` - ${resource.performedPeriod.end}`
+    : ''}
 {:else if resource.performedString}
-  Performed {resource.performedString}
+  Performed: {resource.performedString}
 {:else if resource.performedAge}
-  Performed age {resource.performedAge}
+  Performed age: {resource.performedAge.value}{resource.performedAge.code}
 {:else if resource.performedRange}
-  Performed age {resource.performedRange}
+  Performed age: {resource.performedRange.low ? resource.performedRange.low : ''}{resource.performedRange.high
+    ? ` - ${resource.performedRange.high}`
+    : ''}
 {/if}
diff --git a/src/lib/components/resource-templates/QuestionnaireResponse.svelte b/src/lib/components/resource-templates/QuestionnaireResponse.svelte
new file mode 100644
index 00000000..7184a1a6
--- /dev/null
+++ b/src/lib/components/resource-templates/QuestionnaireResponse.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Badge } from 'sveltestrap';
+  import type { QuestionnaireResponse } from 'fhir/r4';
+
+  export let resource: QuestionnaireResponse; // Define a prop to pass the data to the component
+
+</script>
+
+<style>
+  .small-text-table {
+    font-size: 12px; /* Adjust this value as needed */
+  }
+</style>
+
+<Badge color="primary">{resource.identifier.value}</Badge><br/>
+Questionnaire reference: <a href='{resource.questionnaire}' rel="noreferrer noopener" target='_blank'>{resource.questionnaire}</a><br />
+Authored: {resource.authored.split("T")[0]}
+{#if resource.source}
+  {#if resource.source.display}
+    <br />
+    Source: {resource.source.display}
+  {:else}
+    <br />
+    Source: (unknown)
+  {/if}
+{/if}
+
+<table class="table table-bordered table-responsive table-sm small-text-table">
+    <thead>
+        <tr><th colspan="3">Responses</th></tr>
+    </thead>
+    <tbody>
+        {#each resource.item as item}
+            <tr>
+                <td>{item.text ?? "No text provided"}</td>
+                <td>
+                    <!-- Render answers if present -->
+                    {#if item.answer}
+                        {#each item.answer as ans}
+                            {ans.valueString ?? ans.valueCoding?.display ?? "No answer text"}<br/>
+                        {/each}
+                    {/if}
+                </td>
+                <td>
+                    <!-- Nested subitems -->
+                    {#if item.item}
+                        <table class="table table-bordered table-sm">
+                            <tbody>
+                                {#each item.item as subitem}
+                                    <tr>
+                                        <td>{subitem.text ?? "No subitem text provided"}</td>
+                                        <td>
+                                            {#if subitem.answer}
+                                                {#each subitem.answer as subAns}
+                                                    {subAns.valueString ?? subAns.valueCoding?.display ?? "No sub-answer text"}<br/>
+                                                {/each}
+                                            {/if}
+                                        </td>
+                                    </tr>
+                                {/each}
+                            </tbody>
+                        </table>
+                    {/if}
+                </td>
+            </tr>
+        {/each}
+    </tbody>
+</table>
diff --git a/src/lib/components/viewer/Demo.svelte b/src/lib/components/viewer/Demo.svelte
index 8134a47f..ed845ec7 100644
--- a/src/lib/components/viewer/Demo.svelte
+++ b/src/lib/components/viewer/Demo.svelte
@@ -4,6 +4,9 @@
 <script lang="ts">
   import {
     Button,
+    Card,
+    CardBody,
+    CardHeader,
     Col,
     FormGroup,
     Icon,
@@ -15,37 +18,36 @@
   import type { Bundle } from "fhir/r4";
   import IpsContent from "$lib/components/viewer/IPSContent.svelte";
 
-  export let content: Bundle | undefined;
+  export let bundle: Bundle | undefined;
   export let mode: string;
 
   let demoContent: string;
 
   onMount (() => {
-    if (!content) {
-      loadSample().then(submit);
-    }
+
   });
 
   $: {
-    if (!content) {
+    if (!bundle) {
       demoContent = "";
     } else {
-      demoContent = JSON.stringify(content, null, 2);
+      demoContent = JSON.stringify(bundle, null, 2);
     }
   }
 
   let textInput: string;
   $: textInput = demoContent;
 
+  let checksResult: CheckResult | undefined;
   let error: string[] = [];
   let valid: boolean = true;
   let invalid: boolean = false;
   $: {
     if (textInput) {
       try {
-        let result = checks(JSON.parse(textInput));
-        if (result.errors) {
-          result.errors.forEach(element => {
+        checksResult = checks(JSON.parse(textInput));
+        if (checksResult.errors && checksResult.errors.length) {
+          checksResult.errors.forEach(element => {
             setInputError(element);
           });
         } else {
@@ -91,6 +93,7 @@
       });
     if (sample) {
       textInput = sample;
+      submit();
     }
   }
 
@@ -101,7 +104,7 @@
   let submitted = false;
   function submit() {
     try {
-      content = JSON.parse(textInput);
+      bundle = JSON.parse(textInput);
       clearInputErrors();
       submitted = true;
       setTimeout(() => submitted = false, 2000);
@@ -110,12 +113,16 @@
     }
   }
 
+  interface CheckResult {
+    data: ValidationResult[];
+    errors: string[];
+  }
   interface ValidationResult {
-    display?: string,
-    entries?: number,
-    entriesColor?: string,
-    narrative?: string,
-    narrativeColor?: string
+    display?: string;
+    entries?: number;
+    entriesColor?: string;
+    narrative?: string;
+    narrativeColor?: string;
   };
   function checks(ips: Bundle) {
     let composition = ips.entry?.[0];
@@ -160,34 +167,72 @@
   }
 
 </script>
-<Row class="mx-1">
-  <h3>Submit Data</h3>
-  <p>This is for test data only. <span class="text-danger"><strong>Please do not submit PHI.</strong></span></p>
-  <FormGroup>
-    <Label>Paste your IPS JSON here:</Label>
-    <Input rows={8} type="textarea" bind:value={textInput} {valid} {invalid} feedback={error} class="pr-10"/>
-  </FormGroup>
-</Row>
-<Row class="mx-3" cols={{ sm: 2, xs: 1 }}>
-  <Col class="d-flex justify-content-start align-items-center">
-    <Button class="m-1" color="danger" on:click={clear}>Clear</Button>
-    <Button class="m-1" color="primary" on:click={submit}>Submit</Button>
-    {#if submitted}
-      <Icon name="check" class="text-success fs-5"/>
-    {/if}
+<Row class="px-3">
+  <Col style="min-width: min-content">
+    <Row>
+      <h3>Submit Data</h3>
+      <p>This is for test data only. <span class="text-danger"><strong>Please do not submit PHI.</strong></span></p>
+      <FormGroup>
+        <Label>Paste your IPS JSON here:</Label>
+        <Input rows={8} type="textarea" bind:value={textInput} {valid} {invalid} feedback={error} class="pr-10"/>
+      </FormGroup>
+    </Row>
+    <Row>
+      <Col class="d-flex justify-content-start align-items-center">
+        <Button class="m-1" color="danger" on:click={clear}>Clear</Button>
+        <Button class="m-1" color="primary" on:click={submit}>Submit</Button>
+        {#if submitted}
+          <Icon name="check" class="text-success fs-5"/>
+        {/if}
+      </Col>
+      <Col class="d-flex justify-content-end align-items-center">
+        <Button color="success" on:click={loadSample} style="min-width:max-content; margin-right: 10px">Try a Sample</Button>
+        <a href="https://github.com/jddamore/IPSviewer/tree/main/samples" class="m-1" target="_blank" rel="noreferrer">Repository of IPS Samples</a>
+      </Col>
+    </Row>
   </Col>
-  <Col class="d-flex justify-content-end align-items-center">
-    <Col class="m-1 justify-content-end align-items-center">
-      <Button color="success" on:click={loadSample} style="width:max-content">Try a Sample</Button>
-    </Col>
-    <Col class="d-flex flex-fill justify-content-start align-items-center">
-      <a href="https://github.com/jddamore/IPSviewer/tree/main/samples" class="m-1" target="_blank" rel="noreferrer">Repository of IPS Samples</a>
-    </Col>
+  <Col class="col-4 d-flex align-items-center" style="width: fit-content; min-width:min-content max-width:fit-content">
+    {#if checksResult}
+      <Card class="mt-4">
+        <CardHeader>
+          <span class="title"><b>Simple Data Checks</b> (not complete FHIR validation)</span>
+        </CardHeader>
+        <CardBody id="checks-body">
+            <table class="checksTable">
+              <colgroup>
+                <col span="1" style="width: 50%;">
+                <col span="1" style="width: 25%;">
+                <col span="1" style="width: 25%;">
+            </colgroup>
+              <thead>
+                <th>Section</th>
+                <th class="tdCenter">Entries</th>
+                <th class="tdCenter">Narrative</th>
+              </thead>
+              {#each checksResult.data as result}
+              <tr>
+                <td>{result.display}</td>
+                <td class="tdCenter" style="color:{result.entriesColor}">{result.entries}</td>
+                <td class="tdCenter" style="color:{result.narrativeColor}">{result.narrative}</td>
+              </tr>
+              {/each}
+            </table>
+            <ul class="list-group">
+              {#each checksResult.errors as error}
+              <li style="color:red">
+                  {error}
+              </li>
+              {/each}
+          </ul>  
+        </CardBody>
+      </Card>
+    {/if}
   </Col>
 </Row>
-{#if content}
+
+{#if bundle}
 <Row>
-  <IpsContent content={content} mode={mode} />
+  <IpsContent {bundle} {mode} />
 </Row>
 {/if}
 
diff --git a/src/lib/components/viewer/IPSContent.svelte b/src/lib/components/viewer/IPSContent.svelte
index c41d13f2..cc6de39f 100644
--- a/src/lib/components/viewer/IPSContent.svelte
+++ b/src/lib/components/viewer/IPSContent.svelte
@@ -2,9 +2,13 @@
   import {
     Accordion,
     AccordionItem,
+    Button,
+    ButtonGroup,
     Card,
     CardBody,
     Col,
+    Icon,
+    Offcanvas,
     Row,
   } from 'sveltestrap';
   import type {
@@ -13,13 +17,15 @@
     CompositionSection,
     Resource
   } from "fhir/r4";
+  import { download } from '$lib/utils/util.js';
 
-  export let content: Bundle;
+  export let bundle: Bundle;
   export let mode: string;
 
   import AdvanceDirective from '$lib/components/resource-templates/AdvanceDirective.svelte';
   import AllergyIntolerance from '$lib/components/resource-templates/AllergyIntolerance.svelte';
   import Condition from '$lib/components/resource-templates/Condition.svelte';
+  import Consent from '$lib/components/resource-templates/Consent.svelte';
   import DiagnosticReport from '$lib/components/resource-templates/DiagnosticReport.svelte';
   import Encounter from '$lib/components/resource-templates/Encounter.svelte';
   import Immunization from '$lib/components/resource-templates/Immunization.svelte';
@@ -37,7 +43,7 @@
   const components: Record<string, any> = {
     "AllergyIntolerance": AllergyIntolerance,
     "Condition": Condition,
-    "Consent": AdvanceDirective,
+    "Consent": Consent,
     "DiagnosticReport": DiagnosticReport,
     "DocumentReference": AdvanceDirective,
     "Encounter": Encounter,
@@ -63,8 +69,8 @@
 
   let ipsContent: Record<string, IpsContent> = {};
   $: {
-    if (content) {
-      ipsContent = getIpsContent(content);
+    if (bundle) {
+      ipsContent = getIpsContent(bundle);
     }
   }
 
@@ -75,6 +81,14 @@
     if (!compositions || !compositions[0]) {
       return content;
     }
+    let patient = ips.entry?.filter((entry) => entry.resource?.resourceType === 'Patient').map((entry) => entry.resource);
+    if (patient?.[0]) {
+      content ["Patient"] = {
+        section: {},
+        entries: patient as Resource[],
+        useText: false
+      }
+    }
     let composition = compositions[0].resource as Composition;
     composition.section?.forEach((section) => {
       let title = (section.title ?? section.code?.coding?.[0].display) ?? "[Untitled section]";
@@ -138,33 +152,95 @@
     showInfo = false;
     infoMessage = "";
   }
+
+  let json = "";
+  let resourceType = "";
+  let isOpen = false;
+  function setJson(resource:any) {
+      json = JSON.stringify(resource, null, 2);
+      resourceType = resource.resourceType;
+      isOpen = true;
+  }
+  function toggle() {
+      isOpen = !isOpen;
+  }
 </script>
 
+<Offcanvas
+    {isOpen}
+    {toggle}
+    scroll={false}
+    header={resourceType + " JSON"}
+    placement="end"
+    title={resourceType + " JSON"}
+    style="display: flex;  overflow-y:hidden; height: 100dvh;"
+>
+    <Row class="d-flex" style="height: 100%">
+            <Row class="d-flex pe-0" style="height:calc(100% - 50px)">
+                <Col class="d-flex pe-0" style="height:100%">
+                    <div class="d-flex pe-0 pb-0 code-container">
+                        <pre class="code"><code>{json}</code></pre>
+                    </div>
+                </Col>
+            </Row>
+            <Row class="d-flex pe-0" style="height:50px">
+                <Col class="d-flex justify-content-start align-items-end" style="padding-top: 1rem">
+                    <ButtonGroup>
+                        <Button
+                            size="sm"
+                            color="primary"
+                            on:click={() => navigator.clipboard.writeText(json)}
+                        ><Icon name="clipboard" /> Copy</Button>
+                        <Button
+                            size="sm"
+                            outline
+                            color="secondary"
+                            on:click={() => download(resourceType + ".json", json)}
+                        ><Icon name="download" /> Download</Button>
+                      </ButtonGroup>
+                </Col>
+            </Row>
+    </Row>
+</Offcanvas>
+
 {#if showInfo}
   <Row class="text-info">{infoMessage}</Row>
 {/if}
-{#each Object.entries(ipsContent) as [title, content]}
+{#each Object.entries(ipsContent) as [title, sectionContent]}
 <Row class="mx-0">
   <!--wrap in accordion with title-->
   <Accordion class="mt-3">
     <AccordionItem active class="ips-section">
       <h6 slot="header" class="my-2">{title}</h6>
-      {#if content.useText || mode === "text"}
-        {@html content.section.text?.div}
+      {#if sectionContent.useText || mode === "text"}
+        {@html sectionContent.section.text?.div}
       {:else}
         <Card style="width: 100%; max-width: 100%" class="mb-2">
-            {#each content.entries as resource, index}
+            {#each sectionContent.entries as resource, index}
               <CardBody class={index > 0 ? "border-top" : ""}>
-                <Row style="overflow:hidden">
-                  <Col>
+                <Row style="overflow:hidden" class="d-flex justify-content-end align-content-center">
+                  <Col class="flex-grow-1" style="overflow:hidden">
                     {#if mode === "app" && resource.resourceType in components}
-                      <svelte:component this={components[resource.resourceType]} resource={resource} />
+                      <svelte:component
+                        this={components[resource.resourceType]}
+                        content={{resource: resource, entries: bundle.entry}}
+                      />
                     {:else}
                       {#if mode === "app"}
                         {showInfoMessage(`Unsupported sections displayed using composition narratives`)};
                       {/if}
                     {/if}
                   </Col>
+                  <Col class="d-flex flex-row-reverse justify-content-end align-items-start" style="max-width: max-content">
+                    <Button
+                        size="sm"
+                        color="secondary"
+                        outline
+                        on:click={() => setJson(resource)}
+                    >
+                      View
+                    </Button>
+                  </Col>
                 </Row>
               </CardBody>
             {/each}
@@ -182,12 +258,16 @@
     width: 100% !important;
   }
 
-  :global(.ips-section th, td) {
+  :global(.ips-section th) {
     border: 1px solid lightgray !important;
     padding: 0 7px !important;
     text-align: center !important;
   }
 
+  :global(.ips-section td) {
+    margin-left: 2em !important;
+  }
+
   :global(.ips-section thead) {
     background-color: #0c63e4;
     color: white;
@@ -196,9 +276,11 @@
   /* Alternating table row coloring */
   :global(.ips-section tbody tr:nth-child(odd)) {
     background-color: #fff;
+    border: 1px solid lightgray;
   }
   :global(.ips-section tbody tr:nth-child(even)) {
     background-color: #e7f1ff;
+    border: 1px solid lightgray;
   }
   
   /* Sticky table header */
@@ -216,7 +298,21 @@
   /* Limit height for section content window */
   :global(.ips-section > .accordion-collapse > .accordion-body) {
     overflow: auto !important;
-    max-height: 40rem !important;
+    max-height: 50rem !important;
   }
 
+  .code {
+        overflow:auto;
+        margin: 0;
+        padding: 10px;
+    }
+    .code-container {
+        background-color: #f5f5f5;
+        border-radius: 10px;
+        border: 1px solid rgb(200, 200, 200);
+        overflow: hidden;
+    }
+    :global(div.offcanvas-body) {
+        overflow-y: hidden !important;
+    }
 </style>
\ No newline at end of file
diff --git a/src/lib/config.ts b/src/lib/config.ts
index ed1998ae..a703cce2 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -68,6 +68,7 @@ export const SOF_RESOURCES = [
   'PractitionerRole',  // can't search by patient; "An identifier, practitioner, organization, location, or specialty parameter is required."
   'Procedure', // TODO change to subject
   // 'Specimen', // Not in EPIC USCDI R4
+  'QuestionnaireResponse',
 ];
 
 export const SOF_PATIENT_RESOURCES = [
@@ -90,6 +91,7 @@ export const SOF_PATIENT_RESOURCES = [
   // 'PractitionerRole',  // can't search by patient; "An identifier, practitioner, organization, location, or specialty parameter is required."
   'Procedure', // TODO change to subject
   // 'Specimen', // Not in EPIC USCDI R4
+  'QuestionnaireResponse',
 ];
 
 export const VIEWER_BASE = new URL(
@@ -104,12 +106,16 @@ export const PATIENT_IPS = {
 }
 export const EXAMPLE_IPS = {
   'Maria SEATTLE Gravitate': 'https://fhir.ips-demo.dev.cirg.uw.edu/fhir/Patient/14599/$summary',
+  'Peter Kieth Jordan': 'https://raw.githubusercontent.com/jddamore/IPSviewer/4eedba9df34afbf3eb20d98c49d36afc7f9ce104/samples/connectathon_Jan2025/new_IPS_Example.json',
+  'Johanna Petronella Maria (Jo) van Putten-van der Giessen': "https://raw.githubusercontent.com/jddamore/IPSviewer/4eedba9df34afbf3eb20d98c49d36afc7f9ce104/samples/connectathon_archive/NL_core_patient_01.json",
   'Martha Mum': 'https://hl7-ips-server.hl7.org/fhir/Patient/15/$summary',
   'Meditech 1': 'https://dev-mtx-interop.meditech.com:443/v2/ips/STU1/Patient/f3b430be-1f8a-53d3-8261-4ffbafa05a61/$summary',
   // 'Meditech 2': 'https://dev-mtx-interop.meditech.com:443/v2/ips/STU1/Patient/9bad7dc5-47ad-5022-82e7-0cb0aab13ee9/$summary', // Error returned
   'Angela Roster': 'https://fhir.ips-demo.dev.cirg.uw.edu/fhir/Patient/10965/$summary',
   'Horace Skelly': 'https://fhir.ips-demo.dev.cirg.uw.edu/fhir/Patient/11142/$summary',
   'Anonymous': 'https://fhir.ips-demo.dev.cirg.uw.edu/fhir/Patient/10999/$summary',
-  'Desiree': 'https://fhir.ips-demo.dev.cirg.uw.edu/fhir/Patient/Pat1-System2/$summary'
+  'Desiree': 'https://fhir.ips-demo.dev.cirg.uw.edu/fhir/Patient/Pat1-System2/$summary',
+  // 2025-01 Connectathon PACIO track:
+  'Jenny Mosley': 'https://hapi.fhir.org/baseR4/Patient/patientJM1/$summary'
 };
 export const IPS_DEFAULT = 'Maria SEATTLE Gravitate';
diff --git a/src/lib/utils/IPSResourceCollection.ts b/src/lib/utils/IPSResourceCollection.ts
index a0d602ab..fdf77237 100644
--- a/src/lib/utils/IPSResourceCollection.ts
+++ b/src/lib/utils/IPSResourceCollection.ts
@@ -34,6 +34,7 @@ const allowableResourceTypes = [
     'Practitioner',
     // 'PractitionerRole', Not relevant to IPS
     'Procedure',
+    'QuestionnaireResponse', // FIXME this is not part of IPS, should get a carve-out elsewhere...
     'Specimen'
 ];
 
@@ -259,12 +260,15 @@ export class IPSResourceCollection {
                 delete rBT[sectionKey];
             }
         });
-        let selectedIPSResources = Object.values(rBT)
-            .flatMap(types => Object.values(types))
+        let selectedIPSResources = this.flattenResources(rBT)
             .filter(resource => (resource as ResourceHelper).include ) as ResourceHelper[];
         return selectedIPSResources;
     }
 
+    flattenResources(resourcesByType: Record<string, Record<string, ResourceHelper>>) {
+        return Object.values(resourcesByType).flatMap(types => Object.values(types))
+    }
+
     toJson(): string {
         let resourcesByType = get(this.resourcesByType);
         let extensionSections = get(this.extensionSections);
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
index 7053f49a..09bdaedc 100644
--- a/src/lib/utils/types.ts
+++ b/src/lib/utils/types.ts
@@ -1,4 +1,4 @@
-import type { Bundle, CompositionSection, DocumentReference } from 'fhir/r4';
+import type { Bundle, BundleEntry, CompositionSection, DocumentReference } from 'fhir/r4';
 
 export interface SHLSubmitEvent {
   shcs: SHCFile[];
@@ -10,6 +10,12 @@ export interface SHLSubmitEvent {
   source?: string;
 }
 
+
+export interface ResourceTemplateParams<T> {
+  resource: T;
+  entries?: BundleEntry[];
+}
+
 export interface ResourceRetrieveEvent {
   resources: Array<any> | undefined;
   sectionKey?: string;
diff --git a/src/lib/utils/util.ts b/src/lib/utils/util.ts
index c5f40623..222f93d8 100644
--- a/src/lib/utils/util.ts
+++ b/src/lib/utils/util.ts
@@ -17,6 +17,35 @@ export async function base64toBlob(base64:string, type="application/octet-stream
   return window.URL.createObjectURL(await result.blob());
 }
 
+// For machine-readable content, use the reference in the Composition.section.entry to retrieve resource from Bundle
+export function getEntry(entries: Array<BundleEntry>, reference: string) {
+  let result;
+  if (!entries) {
+    return result;
+  }
+  for (let entry of entries) {
+    if (entry.fullUrl?.includes(reference)) {
+      return entry.resource;
+    } else {
+      // Attempt to match based on resource and uuid
+      let splitReference = reference.split('/');
+      let referenceId = splitReference?.pop();
+      if (entry.resource?.resourceType && splitReference.includes(entry.resource?.resourceType) && referenceId) {
+        if (entry.fullUrl?.includes(referenceId)) {
+          return entry.resource;
+        } else if (entry.resource?.id?.includes(referenceId)) {
+          return entry.resource;
+        }
+      }
+    }
+  }
+
+  if (!result) {
+    console.log(`missing reference ${reference}`);
+  }
+  return result;
+};
+
 export function download(filename:string, text:string) {
   var element = document.createElement('a');
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
diff --git a/src/routes/(viewer)/ips/+page.svelte b/src/routes/(viewer)/ips/+page.svelte
index dcfed60e..e02b8498 100644
--- a/src/routes/(viewer)/ips/+page.svelte
+++ b/src/routes/(viewer)/ips/+page.svelte
@@ -230,19 +230,19 @@
     {#each shlContents as contents, index}
       <TabPane class={`ips${index}`} tabId={`ips${index}`} active={index === 0} style="padding-top:10px">
         <span class="smart-tab" slot="tab">{getTabLabel(contents)}</span>
-        <IPSContent content={contents} mode={$displayMode} />
+        <IPSContent bundle={contents} mode={$displayMode} />
       </TabPane>
     {/each}
     {#if SHOW_VIEWER_DEMO}
       <TabPane tabId="demo" active={shlContents.length === 0} style="padding-top:10px">
         <span class="demo-tab" slot="tab">IPS Demo</span>
-        <Demo content={shlContents[0]} mode={$displayMode} />
+        <Demo bundle={shlContents[0]} mode={$displayMode} />
       </TabPane>
     {/if}
   </TabContent>
 {:else}
   <!-- Single tab view -->
-  <IPSContent content={shlContents[0]} mode={$displayMode} />
+  <IPSContent bundle={shlContents[0]} mode={$displayMode} />
 {/if}
 
 <style lang="css">