diff --git a/src/components/IntegrationCard.vue b/src/components/IntegrationCard.vue
new file mode 100644
index 0000000..ef8306e
--- /dev/null
+++ b/src/components/IntegrationCard.vue
@@ -0,0 +1,30 @@
+
+<script>
+export default {
+  props: {
+    title: { type: String, default: "Integration Card" },
+    doc: { type: String, default: "<html><body><p>HTML document</p></body></html>" },
+  },
+
+};
+</script>
+<template>
+  <h3>{{ title }}</h3>
+  <iframe class='integrationCard' :srcdoc=doc scrolling="no" onload="resizeIframe(this)"></iframe>
+</template>
+<style>
+span.customer {
+  color: #ff0000;
+  font-weight: bold;
+}
+
+span.iva {
+  color: #0000a0;
+  font-weight: bold;
+}
+
+iframe.integrationCard {
+  border: 0;
+  width: 100%; height: 100%; 
+}
+</style>
diff --git a/src/components/TransferSummary.vue b/src/components/TransferSummary.vue
index 43d7cf6..14bbe4c 100644
--- a/src/components/TransferSummary.vue
+++ b/src/components/TransferSummary.vue
@@ -1,18 +1,15 @@
 <script>
-// This template uses https://vuejs.org/guide/extras/render-function.html to
-// create DOM elements from properties
-import { h } from "vue";
-
 export default {
   props: {
-    summary: { type: String, default: "<h2>Summary Should go here</h2>" },
-  },
-  setup(props) {
-    // return the render function
-    return () => h("div", { class: "bar", innerHTML: props.summary });
+    summary: { type: String, default: "<p>Summary Should go here</p>" },
   },
+
 };
 </script>
+<template>
+  <h3>Da Vinci Transfer Summary</h3>
+  <iframe class='transferSummary' :srcdoc=summary scrolling="no" onload="resizeIframe(this)"></iframe>
+</template>
 <style>
 span.customer {
   color: #ff0000;
@@ -23,4 +20,9 @@ span.iva {
   color: #0000a0;
   font-weight: bold;
 }
+
+iframe.transferSummary {
+  border: 0;
+  width: 100%; height: 100%; 
+}
 </style>
