diff --git a/src/components/DaVinciAuthentication.vue b/src/components/DaVinciAuthentication.vue
new file mode 100644
index 0000000..1ae48f3
--- /dev/null
+++ b/src/components/DaVinciAuthentication.vue
@@ -0,0 +1,54 @@
+<script>
+export default {
+  props: {
+    authenticated: { type: Boolean, default: false },
+  },
+};
+</script>
+<template>
+  <div class="transferSummary">
+    <div v-if="authenticated" class="authboxgreen">
+      <font-awesome-icon
+        id="auth"
+        :icon="['fas', 'user-shield']"
+        size="2l"
+        style="color: #45b408"
+      />
+      Customer Authenticated
+    </div>
+    <div v-else class="authboxred">
+      <font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2l" />
+      Customer Not Authenticated
+    </div>
+  </div>
+</template>
+<style>
+.authboxgreen,
+.authboxred {
+  margin: 8px;
+  border-radius: 5px;
+  padding: 11px 16px 11px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-family: OpenSans, Ariel, sans-serif;
+  font-size: 11px;
+}
+
+.authboxgreen {
+  border: 2px solid #45b408;
+}
+
+.authboxred {
+  border: 2px solid #e03800;
+}
+
+#auth {
+  color: #45b408;
+}
+
+#noauth {
+  color: #e03800;
+}
+</style>
diff --git a/src/components/IntegrationCard.vue b/src/components/IntegrationCard.vue
index ef8306e..0d3ea2e 100644
--- a/src/components/IntegrationCard.vue
+++ b/src/components/IntegrationCard.vue
@@ -1,16 +1,22 @@
-
 <script>
 export default {
   props: {
     title: { type: String, default: "Integration Card" },
-    doc: { type: String, default: "<html><body><p>HTML document</p></body></html>" },
+    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>
+  <iframe
+    class="integrationCard"
+    :srcdoc="doc"
+    scrolling="no"
+    onload="resizeIframe(this)"
+  ></iframe>
 </template>
 <style>
 span.customer {
@@ -25,6 +31,7 @@ span.iva {
 
 iframe.integrationCard {
   border: 0;
-  width: 100%; height: 100%; 
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/components/TransferSummary.vue b/src/components/TransferSummary.vue
index 14bbe4c..9fefd3b 100644
--- a/src/components/TransferSummary.vue
+++ b/src/components/TransferSummary.vue
@@ -3,26 +3,20 @@ export default {
   props: {
     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>
+  <iframe
+    class="transferSummary"
+    :srcdoc="summary"
+    scrolling="no"
+    onload="resizeIframe(this)"
+  ></iframe>
 </template>
 <style>
-span.customer {
-  color: #ff0000;
-  font-weight: bold;
-}
-
-span.iva {
-  color: #0000a0;
-  font-weight: bold;
-}
-
 iframe.transferSummary {
   border: 0;
-  width: 100%; height: 100%; 
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/views/DaVinciView.vue b/src/views/DaVinciView.vue
new file mode 100644
index 0000000..c24ce85
--- /dev/null
+++ b/src/views/DaVinciView.vue
@@ -0,0 +1,16 @@
+<script setup>
+import TransferSummary from "../components/TransferSummary.vue";
+import DaVinciAuthentication from "../components/DaVinciAuthentication.vue";
+
+const props = defineProps({
+  summary: { type: String, default: "", required: true },
+  authenticated: { type: String, default: "false" },
+});
+</script>
+<template>
+  <div class="davinci">
+    <h3>Da Vinci AI</h3>
+    <DaVinciAuthentication :authenticated="props.authenticated" />
+    <TransferSummary :summary="props.summary" />
+  </div>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6a8e4ed..1e1d4bb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,3 +1,19 @@
+<script setup>
+const transferSummaryHTML = `<div style="font-family: OpenSans, Ariel, sans-serif; font-size: 11px; color: white; display: flex;padding: 11px 16px 11px 12px;align-items: flex-start;gap: 8px;border-radius: 5px;background: var(--button-emphasized-regular, #0C874B);">
+  <table>
+      <tr>
+          <td><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffffff}</style><path d="M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z"/></svg></i></td>
+          <td style="font-weight: bold;">Da Vinci Summary</td>
+      </tr>
+      <tr>
+          <td></td>
+          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
+      </tr>
+  </table>
+  </div>`;
+
+const integrationCardDoc = `<html><body><h1>IntegrationCard</h1></body></html>`;
+</script>
 <template>
   <div class="home">
     <h1>Engagement Orchestration - Microservice Examples</h1>
@@ -11,5 +27,28 @@
       >
       Integration.
     </p>
+    <h2>Examples</h2>
+    <ul>
+      <li>
+        <router-link
+          :to="{
+            path: 'telephonyContext',
+            query: {
+              ani: '13125138223',
+              dnis: '8449311735',
+              direction: 'INBOUND',
+              channel: 'AmazonConnect',
+              queue: 'QueueName',
+              type: 'Voice',
+              username: 'apiclient',
+              transferSummary: transferSummaryHTML,
+              integrationCardDoc: integrationCardDoc,
+              integrationCardTitle: 'Integration Card',
+            },
+          }"
+          >Telephony Context</router-link
+        >
+      </li>
+    </ul>
   </div>
 </template>
diff --git a/src/views/TelephonyContextView.vue b/src/views/TelephonyContextView.vue
index 7cc5388..f4138aa 100644
--- a/src/views/TelephonyContextView.vue
+++ b/src/views/TelephonyContextView.vue
@@ -3,8 +3,8 @@ import { ref, onMounted } from "vue";
 import VerticalLabelValue from "../components/VerticalLabelValue.vue";
 import { getTenantProperty } from "../helpers/index";
 import ErrorMessage from "../components/ErrorMessage.vue";
-import TransferSummary from "../components/TransferSummary.vue";
 import IntegrationCard from "../components/IntegrationCard.vue";
+import DaVinciView from "./DaVinciView.vue";
 
 const props = defineProps({
   channel: { type: String, default: "" },
@@ -21,7 +21,7 @@ const props = defineProps({
   integrationCardDoc: {
     type: String,
     default: "",
-    required: true
+    required: true,
   },
   authenticated: { type: String, default: "false" },
 });
@@ -36,8 +36,7 @@ onMounted(() => {
 });
 
 function setValueFromTPS(reference, param, props) {
-
-  if (param.startsWith('tps:')) {
+  if (param.startsWith("tps:")) {
     const tpsProperty = param.substring(4, param.length);
     getTenantProperty(tpsProperty, props)
       .then((value) => {
@@ -58,7 +57,6 @@ function fetchData() {
   setValueFromTPS(transferSummaryValue, props.transferSummary, props);
   setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props);
   setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props);
-
 }
 </script>
 <template>
@@ -67,30 +65,55 @@ function fetchData() {
 
     <div class="customerAccount customer-detail-container" width="100%">
       <div class="customer-profile-fields vertical-layout">
-        <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
+        <div
+          class="column-layout"
+          style="width: 100%; max-width: 100%; height: 100%"
+        >
           <div class="row1 column-layout-row">
-            <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
+            <div
+              class="blockOuterSpacingRight col1 column-layout-cell"
+              style="width: 25%"
+            >
               <h3>Telephony Data</h3>
-              <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
-              <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
-              <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
-              <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
+              <VerticalLabelValue
+                label="Channel"
+                :value="channel"
+              ></VerticalLabelValue>
+              <VerticalLabelValue
+                label="Type"
+                :value="type"
+              ></VerticalLabelValue>
+              <VerticalLabelValue
+                label="Queue"
+                :value="queue"
+              ></VerticalLabelValue>
+              <VerticalLabelValue
+                label="Direction"
+                :value="direction"
+              ></VerticalLabelValue>
               <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
-              <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
-              <div v-if="authenticated == 'true'" id="authbox">
-                <font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408;" />
-                Customer Authenticated
-              </div>
-              <div v-else id="noauthbox">
-                <font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2xl" />
-                Customer Not Authenticated
-              </div>
+              <VerticalLabelValue
+                label="DNIS"
+                :value="dnis"
+              ></VerticalLabelValue>
             </div>
-            <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
-              <TransferSummary :summary="transferSummaryValue" />
+            <div
+              class="blockOuterSpacingRight col2 column-layout-cell"
+              style="width: 25%"
+            >
+              <DaVinciView
+                :summary="transferSummaryValue"
+                :authenticated="authenticated == 'true'"
+              />
             </div>
-            <div class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%">
-              <IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" />
+            <div
+              class="blockOuterSpacingRight col3 column-layout-cell"
+              style="width: 50%"
+            >
+              <IntegrationCard
+                :title="integrationCardTitleValue"
+                :doc="integrationCardDocValue"
+              />
             </div>
           </div>
         </div>
@@ -106,30 +129,4 @@ function fetchData() {
 p {
   size: 24pt;
 }
-
-#authbox {
-  border-radius: 25px;
-  padding: 20px;
-  width: 200px;
-  height: 30px;
-  border: 2px solid #45b408;
-  font-size: 14px;
-}
-
-#noauthbox {
-  border-radius: 25px;
-  padding: 20px;
-  width: 200px;
-  height: 30px;
-  border: 2px solid #e03800;
-  font-size: 14px;
-}
-
-#auth {
-  color: #45b408;
-}
-
-#noauth {
-  color: #e03800;
-}
 </style>
