diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
index 5afbfafcb..61fdcbf3b 100644
--- a/app/resources/locales/en_US/field.po
+++ b/app/resources/locales/en_US/field.po
@@ -197,6 +197,9 @@ msgstr "Full Name"
 msgid "hostname"
 msgstr "Hostname"
 
+msgid "key"
+msgstr "Key"
+
 msgid "language"
 msgstr "Language"
 
diff --git a/app/src/Controller/PeopleController.php b/app/src/Controller/PeopleController.php
index 42cb3eb77..c37e1ca81 100644
--- a/app/src/Controller/PeopleController.php
+++ b/app/src/Controller/PeopleController.php
@@ -90,6 +90,30 @@ public function beforeRender(\Cake\Event\EventInterface $event) {
       $this->set('vv_default_name_type', $settings->default_name_type_id);
     }
     
+    if(!$this->request->is('restful') && $this->request->getParam('action') == 'edit') {
+      // Create a lookup table for badging External Identity Source descriptions on Person Canvas MVEAS.
+      // This will be passed to the view and made available to the JavaScript components.
+      $extIdentities = TableRegistry::getTableLocator()->get('ExternalIdentities');
+      $personId = $this->request->getParam('pass.0');
+      $eisLookupTable = $extIdentities
+        ->find('list', [
+          'keyField' => 'id',
+          'valueField' => 'description',
+        ])
+        ->select([
+          'id' => 'ExternalIdentities.id',
+          'description' => 'ExternalIdentitySources.description',
+        ])
+        ->innerJoinWith('ExtIdentitySourceRecords.ExternalIdentitySources')
+        ->where([
+          'ExternalIdentities.person_id' => $personId,
+        ])
+        ->enableHydration(false)
+        ->toArray();
+
+      $this->set('vv_external_identity_sources', $eisLookupTable);
+    }
+    
     return parent::beforeRender($event);
   }
 }
\ No newline at end of file
diff --git a/app/src/View/Helper/VueHelper.php b/app/src/View/Helper/VueHelper.php
index 3e5043d3f..d8ea9b672 100644
--- a/app/src/View/Helper/VueHelper.php
+++ b/app/src/View/Helper/VueHelper.php
@@ -53,13 +53,17 @@ class VueHelper extends Helper {
     ],
     'field' => [
       'email',
+      'key',
       'login',
       'primary',
       'datepicker.chooseTime',
       'datepicker.hour',
       'datepicker.minute',
+      'source',
       'status',
+      'type',
       'unverified',
+      'value'
     ],
     'information' => [
       'global.attributes.none',
@@ -98,7 +102,7 @@ class VueHelper extends Helper {
   ];
 
   /**
-   * Helper which will produce an array of configured locales
+   * Helper which will produce an array of configured locales from the locales_list above.
    *
    * @param   string  $lang  The language of the locale
    *
diff --git a/app/templates/element/mveaCanvas.php b/app/templates/element/mveaCanvas.php
index 48c6474cd..9da27119e 100644
--- a/app/templates/element/mveaCanvas.php
+++ b/app/templates/element/mveaCanvas.php
@@ -92,7 +92,7 @@
   }
 ?>
 <div id="mvea-canvas" class="co-cards">
-  <div id="mvea-canvas-attributes-js" class="row row-cols-1 g-4<?= ($widgetCount > 1) ? ' row-cols-md-2' : ''?>">
+  <div id="mvea-canvas-attributes-js" class="row row-cols-1 g-4<?= ($widgetCount > 1) ? ' row-cols-lg-2' : ''?>">
     <?php if($widgetCount == 0): ?>
         <div class="no-attributes"><?= __d('information','noattrs') ?></div>
     <?php else: ?>
diff --git a/app/templates/element/mveaJs.php b/app/templates/element/mveaJs.php
index ec33c7be2..7baa5f9d9 100644
--- a/app/templates/element/mveaJs.php
+++ b/app/templates/element/mveaJs.php
@@ -64,7 +64,8 @@
           mveaController: '<?= Cake\Utility\Inflector::dasherize($mveaController) ?>',
           mveaTitle: '<?= $title ?>',
           webroot: '<?= $this->request->getAttribute('webroot') ?>',
-          action:  '<?= $vv_action ?>'
+          action:  '<?= $vv_action ?>',
+          externalIdentitySources: <?= json_encode($vv_external_identity_sources ?? null) ?>
         },
         txt: JSON.parse('<?= json_encode($vueHelper->locales()) ?>'),
         isLoading: true,
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index c07b7a294..fdfcfd962 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1374,6 +1374,18 @@ h2.card-title a {
 #main h2.card-title a:hover {
   text-decoration: none;
 }
+table.cm-mvea td {
+  width: 30%;
+}
+table.cm-mvea td:first-child {
+  width: 70%;
+}
+table.cm-mvea.cm-mvea-with-eis td {
+  width: 25%;
+}
+table.cm-mvea.cm-mvea-with-eis td:first-child {
+  width: 50%;
+}
 .field-data-container .id-col {
   text-align: right;
   padding-right: 1em;
@@ -2411,7 +2423,7 @@ code.source-record {
   align-items: center;
 }
 button.cm-copy-value-button {
-  display: flex;
+  display: none; /* turn on at 576px */
   align-items: center;
   gap: 0.1em;
   padding: 0 0.5em 0.2em;
@@ -2703,6 +2715,7 @@ html.dark-mode .btn-default:active {
   margin-top: auto;
   margin-bottom: auto;
   line-height: 1.2em;
+  border: 1px solid var(--cmg-color-bg-006);
 }
 .bg-light {
   color: var(--cmg-color-highlight-005);
@@ -2724,6 +2737,9 @@ html.dark-mode .btn-default:active {
 .bg-secondary {
   background-color: var(--cmg-color-btn-bg-003);
 }
+.badge-eis {
+  box-shadow: var(--cmg-color-shadow-01);
+}
 /* Bootstrap bg-outline */
 .bg-outline-primary {
   color: var(--cmg-color-link);
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index cd6ab939e..09e5131ce 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -89,6 +89,8 @@
   
   --cmg-color-highlight-017: #cee6f8; /* alert: info border color (blue) */
   --cmg-color-highlight-018: yellow;  /* autocomplete highlight for query text */
+
+  --cmg-color-shadow-01: 0px 0px 2px 0px rgba(13,69,115,0.6); /* RGBA box-shadow color based on --cmg-color-btn-bg-001 */
   
   /* Fonts */
   --cmg-font-regular: 'open_sansregular','Trebuchet MS',Arial,Helvetica,sans-serif;
@@ -172,6 +174,8 @@ html.dark-mode {
   --cmg-color-highlight-017: #333; /* alert: info border color (blue) */
   --cmg-color-highlight-018: #cc0;    /* autocomplete highlight for query text */
   
+  --cmg-color-shadow-01: 0px 0px 2px 0px rgba(13,69,115,0.8); /* RGBA box-shadow color based on --cmg-color-btn-bg-001 */
+  
   /* Bootstrap Overrides for Dark Mode */
   --bs-light-rgb: #151515;
 }
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index cc5aa9ad2..5564640e5 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -112,13 +112,17 @@
   }
   /* PERSON CANVAS / CARDS */
   .co-cards .field-data-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    min-height: 2.5em;
+    vertical-align: center;
   }
-  #mvea-canvas-roles .field-data-container {
-    grid-template-columns: 1fr 1fr 2fr auto;
+  .co-cards th {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.75rem;
+  }
+  .co-cards .field-data.data-eis .badge {
+    margin: 0;
+  }
+  button.cm-copy-value-button {
+    display: flex;
   }
   /* PAGINATION */
   #pagination {
diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index 91098c540..d60aa44a7 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -47,6 +47,9 @@ export default {
     },
     mveaAddress: function() {
       return this.mvea.room + ' ' + this.mvea.street + ' ' + this.mvea.locality + ' ' + this.mvea.state + ' ' + this.mvea.postal_code + ' ' + this.mvea.country;
+    }, 
+    hasEis: function() {
+      return this.core?.externalIdentitySources && Object.keys(this.core.externalIdentitySources).length > 0;
     }
   },
   methods: {
@@ -59,6 +62,9 @@ export default {
         var componentReference = 'mvea' + this.core.mveaType;
         this.$parent.$parent.launchModal(this.core.mveaTitle, this.mveaLink, componentReference);
       });
+    },
+    getEisDescription(externalIdentityId) {
+      return externalIdentityId ? this.core?.externalIdentitySources[externalIdentityId] : null;
     }
   },
   mounted() {
@@ -66,166 +72,228 @@ export default {
   },
   template: `
     <!-- Names -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'names'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>
-          <!-- If there is a display name use it. Otherwise, check language and produce right-to-left 
-            order or left-to-right order. This approach is similar to Model/Entity/Name.php::_getFullName(). 
-            XXX We expect to get the full_name out of the API, so remove this logic when we have the full name. 
-            We don't need to have the classes that distinguish what "kind" of name it is (e.g. "mvea-name-rtl"): 
-            the name alone should be enough. -->
-          <span v-if="this.mvea.display_name" class="mvea-name-displayname">
-            {{ this.mvea.display_name }}
-          </span>
-          <span v-else-if="['hu', 'ja', 'ko', 'za-Hans', 'za-Hant'].indexOf(this.mvea.language) != -1" class="mvea-name-rtl">
-            {{ this.mvea.family }} {{ this.mvea.given }}
-          </span>
-          <span v-else class="mvea-name-ltr">
-            {{ this.mvea.honorific }} {{ this.mvea.given }} {{ this.mvea.middle }} {{ this.mvea.family }} {{ this.mvea.suffix }}
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'names'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>
+            <!-- If there is a display name use it. Otherwise, check language and produce right-to-left 
+              order or left-to-right order. This approach is similar to Model/Entity/Name.php::_getFullName(). 
+              XXX We expect to get the full_name out of the API, so remove this logic when we have the full name. 
+              We don't need to have the classes that distinguish what "kind" of name it is (e.g. "mvea-name-rtl"): 
+              the name alone should be enough. -->
+            <span v-if="this.mvea.display_name" class="mvea-name-displayname">
+              {{ this.mvea.display_name }}
+            </span>
+            <span v-else-if="['hu', 'ja', 'ko', 'za-Hans', 'za-Hant'].indexOf(this.mvea.language) != -1" class="mvea-name-rtl">
+              {{ this.mvea.family }} {{ this.mvea.given }}
+            </span>
+            <span v-else class="mvea-name-ltr">
+              {{ this.mvea.honorific }} {{ this.mvea.given }} {{ this.mvea.middle }} {{ this.mvea.family }} {{ this.mvea.suffix }}
+            </span>
+          </a>
+          <div v-if="this.mvea.primary_name || this.mvea.language" class="mvea-badges">
+            <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt['field.primary'] }}</span>
+            <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
+          </div>
+          <!-- XXX As noted above, replace the following logic when full_name is available. -->
+          <copy-value-button 
+            v-if="this.mvea.display_name"
+            :txt="this.txt" 
+            :valueToCopy="this.mvea.display_name">
+          </copy-value-button>
+          <copy-value-button 
+            v-else-if="['hu', 'ja', 'ko', 'za-Hans', 'za-Hant'].indexOf(this.mvea.language) != -1"
+            :txt="this.txt" 
+            :valueToCopy="this.mvea.family + ' ' + this.mvea.given">
+          </copy-value-button>
+          <copy-value-button 
+            v-else
+            :txt="this.txt" 
+            :valueToCopy="this.mvea.honorific + ' ' + this.mvea.given + ' ' + this.mvea.middle + ' ' + this.mvea.family + ' ' + this.mvea.suffix">
+          </copy-value-button> 
+        </div>                                       
+      </td>
+      <td class="field-data data-label">
+        <div :class="{ 'with-row-actions' : !hasEis }">
+          <span class="mvea-type">{{ this.mvea.type.display_name }}</span>  
+          <!-- row actions -->
+          <!--   TODO: Should this action be open to the unpriviledged CoMember?     -->
+          <actions
+            v-if="!this.mvea.primary_name && !hasEis"
+            :actions="[
+              {
+                'url':   this.core.webroot + 'names/primary/' + this.mvea.id,
+                'icon':  'check',
+                'label': this.txt['operation.primary']
+              }
+            ]">
+          </actions>
+        </div>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <div class="with-row-actions">
+          <span v-if="getEisDescription(this.mvea?.source_name?.external_identity_id)" 
+            class="mvea-eis">
+            {{ getEisDescription(this.mvea?.source_name?.external_identity_id) }}
           </span>
-        </a>
-        <!-- XXX As noted above, replace the following logic when full_name is available. -->
-        <copy-value-button 
-          v-if="this.mvea.display_name"
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.display_name">
-        </copy-value-button>
-        <copy-value-button 
-          v-else-if="['hu', 'ja', 'ko', 'za-Hans', 'za-Hant'].indexOf(this.mvea.language) != -1"
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.family + ' ' + this.mvea.given">
-        </copy-value-button>
-        <copy-value-button 
-          v-else
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.honorific + ' ' + this.mvea.given + ' ' + this.mvea.middle + ' ' + this.mvea.family + ' ' + this.mvea.suffix">
-        </copy-value-button>                                        
-      </div>
-      <div class="field-data data-label with-row-actions">
-        <div class="mvea-badges">
-          <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt['field.primary'] }}</span>
-          <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-          <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
+          <actions
+            v-if="!this.mvea.primary_name"
+            :actions="[
+              {
+                'url':   this.core.webroot + 'names/primary/' + this.mvea.id,
+                'icon':  'check',
+                'label': this.txt['operation.primary']
+              }
+            ]">
+          </actions>
         </div>
-        <!-- row actions -->
-        <!--   TODO: Should this action be open to the unpriviledged CoMember?     -->
-        <actions
-          v-if="!this.mvea.primary_name"
-          :actions="[
-            {
-              'url':   this.core.webroot + 'names/primary/' + this.mvea.id,
-              'icon':  'check',
-              'label': this.txt['operation.primary']
-            }
-          ]">
-        </actions>
-      </div>
-    </li>
+      </td>
+    </tr>
     <!-- Email Addresses -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'email_addresses'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.mail }}</a> 
-        <copy-value-button 
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.mail">
-        </copy-value-button>
-      </div>
-      <div class="field-data data-label">
-        <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt['field.unverified'] }}</span>
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-      </div>
-    </li>
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'email_addresses'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.mail }}</a> 
+          <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt['field.unverified'] }}</span>
+          <copy-value-button 
+            :txt="this.txt" 
+            :valueToCopy="this.mvea.mail">
+          </copy-value-button>
+        </div>
+      </td>
+      <td class="field-data data-label">      
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(this.mvea?.source_email_address?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(this.mvea?.source_email_address?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
     <!-- Identifiers -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'identifiers'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.identifier }}</a>   
-        <copy-value-button 
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.identifier">
-        </copy-value-button>                                           
-      </div>
-      <div class="field-data data-label">
-        <span v-if="this.mvea.status == 'S'" class="mr-1 badge bg-danger">{{ this.txt['enumeration.SuspendableStatusEnum.S'] }}</span>
-        <span v-if="this.mvea.login" class="mr-1 badge bg-outline-secondary login">{{ this.txt['field.login'] }}</span>
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-      </div>
-    </li>
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'identifiers'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.identifier }}</a> <span
+          v-if="this.mvea.status == 'S'" class="mr-1 badge bg-danger">{{ this.txt['enumeration.SuspendableStatusEnum.S'] }}</span>
+          <span v-if="this.mvea.login"
+            class="mr-1 badge bg-outline-secondary login">{{ this.txt['field.login'] }}</span>
+          <copy-value-button :txt="this.txt" :valueToCopy="this.mvea.identifier"></copy-value-button>
+        </div>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(mvea?.source_identifier?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(mvea?.source_identifier?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
     <!-- Ad Hoc Attributes -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'ad_hoc_attributes'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.value != '' ? this.mvea.value : this.txt['information.global.value.none'] }}</a>
-        <copy-value-button 
-          v-if="this.mvea.value != ''"
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.value">
-        </copy-value-button>   
-      </div>
-      <div v-if="this.mvea.tag != ''" class="field-data data-label">
-        <span class="mr-1 badge bg-light ad-hoc">{{ this.mvea.tag }}</span>
-      </div>
-    </li>
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'ad_hoc_attributes'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.value != '' ? this.mvea.value :
+            this.txt['information.global.value.none'] }}</a>
+          <copy-value-button v-if="this.mvea.value != ''" :txt="this.txt"
+            :valueToCopy="this.mvea.value"></copy-value-button>
+        </div>
+      </td>
+      <td v-if="this.mvea.tag != ''" class="field-data data-label">
+        <span class="mvea-tag">{{ this.mvea.tag }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(this.mvea?.source_ad_hoc_attribute?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(this.mvea?.source_ad_hoc_attribute?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
     <!-- Addresses -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'addresses'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <address>
-          <a :href="mveaLink" class="row-link" @click.prevent>
-            {{ this.mvea.room }} {{ this.mvea.street }}
-            <span v-if="this.mvea.locality != '' || this.mvea.state != ''" class="addr-locality-state">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'addresses'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <address>
+            <a :href="mveaLink" class="row-link" @click.prevent> {{ this.mvea.room }} {{ this.mvea.street }} <span
+              v-if="this.mvea.locality != '' || this.mvea.state != ''" class="addr-locality-state">
               <br>{{ this.mvea.locality }}{{ this.mvea.locality != '' && this.mvea.state != '' ? ', ' : ''}}{{ this.mvea.state }}
-            </span>
-            <span v-if="this.mvea.postal_code != '' || this.mvea.country != ''" class="addr-postalcode-country">
+            </span> <span v-if="this.mvea.postal_code != '' || this.mvea.country != ''" class="addr-postalcode-country">
               <br>{{ this.mvea.postal_code }} {{ this.mvea.country }}
-            </span>
-          </a>
-        </address>         
-        <copy-value-button 
-          :txt="this.txt" 
-          :valueToCopy="this.mveaAddress">
-        </copy-value-button>                                   
-      </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-      </div>
-    </li>
+            </span> </a>
+          </address>
+          <copy-value-button :txt="this.txt" :valueToCopy="this.mveaAddress"></copy-value-button>
+        </div>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(mvea?.source_address?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(mvea?.source_address?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
     <!-- Telephone Numbers -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'telephone_numbers'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ this.mvea.number }}</a> 
-        <copy-value-button 
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.country_code+this.mvea.area_code+this.mvea.number">
-        </copy-value-button>                                              
-      </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-      </div>
-    </li>
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'telephone_numbers'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.country_code }} {{ this.mvea.area_code }} {{
+            this.mvea.number }}</a>
+          <copy-value-button :txt="this.txt"
+            :valueToCopy="this.mvea.country_code+this.mvea.area_code+this.mvea.number"></copy-value-button>
+        </div>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(mvea?.source_telephone_number?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(mvea?.source_telephone_number?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
     <!-- Urls -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'urls'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.description != '' && this.mvea.description != null ? this.mvea.description : this.mvea.url }}</a>   
-        <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt['information.global.visit.link']"><span class="material-symbols">open_in_new</span></a>
-        <copy-value-button 
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.url">
-        </copy-value-button>  
-      </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-      </div>
-    </li>
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'urls'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.description != '' && this.mvea.description !=
+            null ? this.mvea.description : this.mvea.url }}</a> <a :href="this.mvea.url" class="canvas-url-link"
+          :title="this.txt['information.global.visit.link']"><span class="material-symbols">open_in_new</span></a>
+          <copy-value-button :txt="this.txt" :valueToCopy="this.mvea.url"></copy-value-button>
+        </div>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(mvea?.source_url?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(mvea?.source_url?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
     <!-- Pronouns -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'pronouns'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.pronouns }}</a>     
-        <copy-value-button 
-          :txt="this.txt" 
-          :valueToCopy="this.mvea.pronouns">
-        </copy-value-button>                                           
-      </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
-      </div>
-    </li>
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'pronouns'" @click="followRowLink">
+      <td class="field-data">
+        <div class="force-wrap with-hover-button">
+          <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.pronouns }}</a>
+          <copy-value-button :txt="this.txt" :valueToCopy="this.mvea.pronouns"></copy-value-button>
+        </div>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+      <td class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(mvea?.source_pronoun?.external_identity_id)" 
+          class="mvea-eis">
+          {{ getEisDescription(mvea?.source_pronoun?.external_identity_id) }}
+        </span>
+      </td>
+    </tr>
   `
 }
diff --git a/app/webroot/js/comanage/components/mvea/mveas.js b/app/webroot/js/comanage/components/mvea/mveas.js
index 0f50bac7c..6f3b1f997 100644
--- a/app/webroot/js/comanage/components/mvea/mveas.js
+++ b/app/webroot/js/comanage/components/mvea/mveas.js
@@ -46,6 +46,10 @@ export default {
   computed: {
     mveaModel: function() {
       return this.mveas?.[camelize(this.core.mveaType)]
+    },
+    hasEis() {
+      return this.core?.externalIdentitySources &&
+        Object.keys(this.core.externalIdentitySources).length > 0;
     }
   },
   methods: {
@@ -54,16 +58,26 @@ export default {
     }
   },
   template: `
-    <ul class="cm-mvea fields data-list">
+    <table class="cm-mvea fields data-list"
+        :class="{ 'cm-mvea-with-eis': hasEis }">
       <mvea-item 
         :txt="this.txt"
         :core="this.core"
         v-for='mvea in mveaModel'
         :mvea="mvea">
       </mvea-item>
-      <li v-show="this.mveaModel?.length < 1" class="field-data-container cm-mvea-no-attributes-msg">
-        <div class="field-data">{{ this.txt['information.global.attributes.none'] }}</div>
-      </li>
-    </ul>
+      <thead>
+        <tr>
+          <th>{{ this.txt['field.value'] }}</th>
+          <th>{{ this.core.mveaType == 'ad_hoc_attributes' ? this.txt['field.key'] : this.txt['field.type'] }}</th>
+          <th v-if="hasEis">{{ this.txt['field.source'] }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-show="this.mveaModel?.length < 1" class="field-data-container cm-mvea-no-attributes-msg">
+          <td class="field-data">{{ this.txt['information.global.attributes.none'] }}</td>
+        </tr>
+      </tbody>
+    </table>
   `
 }
\ No newline at end of file