diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
index 58cb5352..4c8afd54 100644
--- a/app/resources/locales/en_US/field.po
+++ b/app/resources/locales/en_US/field.po
@@ -29,8 +29,8 @@
 # When adding entries to this file, group non-model specific translations at the top,
 # then model specific translations alphabetically by model.
 
-msgid "action"
-msgstr "Action"
+msgid "actions"
+msgstr "{0,plural,=1{Action} other{Actions}}"
 
 msgid "actor"
 msgstr "Actor"
@@ -159,6 +159,9 @@ msgstr "Plugin"
 msgid "postal_code"
 msgstr "Postal Code"
 
+msgid "primary"
+msgstr "Primary"
+
 msgid "primary_name"
 msgstr "Primary Name"
 
@@ -243,6 +246,9 @@ msgstr "Value"
 msgid "verified"
 msgstr "Verified"
 
+msgid "unverified"
+msgstr "Unverified"
+
 msgid "ApiUsers.privileged.desc"
 msgstr "A privileged API user has full access to the CO. Unprivileged API users may be granted specific permissions where supported."
 
diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
index 7e6551f1..4cd7ed3a 100644
--- a/app/resources/locales/en_US/information.po
+++ b/app/resources/locales/en_US/information.po
@@ -56,3 +56,9 @@ msgstr "There are no records to display."
 
 msgid "global.title.none"
 msgstr "No title"
+
+msgid "global.value.none"
+msgstr "No value"
+
+msgid "global.visit.link"
+msgstr "Visit link"
diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po
index e337e64f..fc01b4b6 100644
--- a/app/resources/locales/en_US/operation.po
+++ b/app/resources/locales/en_US/operation.po
@@ -27,6 +27,9 @@
 msgid "activate"
 msgstr "Activate"
 
+msgid "add"
+msgstr "Add"
+
 msgid "add.a"
 msgstr "Add a New {0}"
 
diff --git a/app/src/Controller/PeopleController.php b/app/src/Controller/PeopleController.php
index 4577075c..c1d2e5e1 100644
--- a/app/src/Controller/PeopleController.php
+++ b/app/src/Controller/PeopleController.php
@@ -76,4 +76,66 @@ public function beforeRender(\Cake\Event\EventInterface $event) {
     
     return parent::beforeRender($event);
   }
+  
+  /**
+   * Person overview / canvas
+   *
+   * @since  COmanage Registry v5.0.0
+   */
+  
+  public function canvas(string $id) {
+    /* XXX Simply including parent::edit() is nearly all that's required - but we need
+       to delve a little deeper to get data from underlying relationships. We might send a contains() 
+       override to parent::edit() which would allow this to be more DRY 
+    // Keep the following as an example for now.
+    parent::edit($id, false);
+    
+    // We've just set the vv_supertitle in the parent controller. 
+    // Pass it to the title for use in the breadcrumbs. 
+    $this->set('vv_title', $this->viewBuilder()->getVar('vv_supertitle'));
+    */
+  
+    /* The following is nearly identical to parent::edit/view */
+    $modelsName = $this->name;
+    $table = $this->$modelsName;
+    $tableName = $table->getTable();
+    $query = $table->findById($id);
+    
+    // This contain() directive is the primary deviation from standard edit()/view().
+    // We need to drill down to deeper related models for display.
+    $query = $query->contain([
+        'PrimaryName',
+        'Names' => ['Types'],
+        'Addresses' => ['Types'],
+        'AdHocAttributes',
+        'EmailAddresses' => ['Types'],
+        'GroupMembers',
+        'GroupOwners',
+        'Identifiers' => ['Types'],
+        'PersonRoles' => ['Cous','Types'],
+        'Pronouns',
+        'TelephoneNumbers' => ['Types'],
+        'Urls' => ['Types']
+      ]);
+  
+    try {
+      // Pull the current record
+      $obj = $query->firstOrFail();
+    } catch(\Exception $e) {
+      // findById throws Cake\Datasource\Exception\RecordNotFoundException
+      $this->Flash->error($e->getMessage());
+      // XXX This redirects to an Exception page because $id is not found.
+      // XXX A 404 with error would be better.
+      return $this->generateRedirect((int)$id);
+    }
+  
+    $this->set('vv_obj', $obj);
+    $this->getPrimaryLink();
+    $this->populateAutoViewVars($obj);
+  
+    $this->set('vv_title', $table->generateDisplayField($obj));
+    $this->set('vv_supertitle', $table->generateDisplayField($obj));
+    // Pass the display field also into subtitle for dealing with External IDs
+    $this->set('vv_subtitle', $table->generateDisplayField($obj));
+  }
 }
\ No newline at end of file
diff --git a/app/src/Controller/StandardController.php b/app/src/Controller/StandardController.php
index a62131ff..e3490a4a 100644
--- a/app/src/Controller/StandardController.php
+++ b/app/src/Controller/StandardController.php
@@ -331,8 +331,9 @@ public function edit(string $id) {
     }
     catch(\Exception $e) {
       // findById throws Cake\Datasource\Exception\RecordNotFoundException
-      
       $this->Flash->error($e->getMessage());
+      // XXX This redirects to an Exception page because $id is not found.
+      // XXX A 404 with error would be better.
       return $this->generateRedirect((int)$id);
     }
     
@@ -724,8 +725,9 @@ public function view($id = null) {
     }
     catch(\Exception $e) {
       // findById throws Cake\Datasource\Exception\RecordNotFoundException
-      
       $this->Flash->error($e->getMessage());
+      // XXX This redirects to an Exception page because $id is not found.
+      // XXX A 404 with error would be better.
       return $this->generateRedirect((int)$id);
     }
     
@@ -742,6 +744,9 @@ public function view($id = null) {
       // We don't use a trait for this since each table will implement different logic
       
       $this->set('vv_title', __d('operation', 'view.ai', $table->generateDisplayField($obj)));
+      $this->set('vv_supertitle', $table->generateDisplayField($obj));
+      // Pass the display field also into subtitle for dealing with External IDs
+      $this->set('vv_subtitle', $table->generateDisplayField($obj));
     } else {
       // Default view title is the object display field
       $field = $table->getDisplayField();
diff --git a/app/src/Lib/Traits/PrimaryLinkTrait.php b/app/src/Lib/Traits/PrimaryLinkTrait.php
index ec52aa6c..bd02b2b6 100644
--- a/app/src/Lib/Traits/PrimaryLinkTrait.php
+++ b/app/src/Lib/Traits/PrimaryLinkTrait.php
@@ -46,7 +46,7 @@ trait PrimaryLinkTrait {
   private $unkeyedActions = ['add', 'index'];
   
   // Actions where the primary link can be obtained by looking up the record ID
-  private $lookupActions = ['delete', 'edit', 'view'];
+  private $lookupActions = ['delete', 'edit', 'canvas', 'view'];
   
   // Where to redirect on add or edit, can be 'self', 'index', or 'primaryLink'
   private $redirectGoal = 'index';
diff --git a/app/src/Lib/Util/StringUtilities.php b/app/src/Lib/Util/StringUtilities.php
index 51a8e9c9..c7056b82 100644
--- a/app/src/Lib/Util/StringUtilities.php
+++ b/app/src/Lib/Util/StringUtilities.php
@@ -46,7 +46,7 @@ class StringUtilities {
   public static function columnKey($modelsName, $c, $tz=null, $useCustomClMdlLabel=false): string {
     if(strpos($c, "_id", strlen($c)-3)) {
       // Key is of the form field_id, use .ct label instead
-      $k = $this->foreignKeyToClassName($c);
+      $k = self::foreignKeyToClassName($c);
 
       return __d('controller', $k, [1]);
     }
diff --git a/app/src/Model/Table/PeopleTable.php b/app/src/Model/Table/PeopleTable.php
index f495b9ce..4e46ac8c 100644
--- a/app/src/Model/Table/PeopleTable.php
+++ b/app/src/Model/Table/PeopleTable.php
@@ -150,6 +150,7 @@ public function initialize(array $config): void {
       'entity' => [
         'delete' =>   ['platformAdmin', 'coAdmin'],
         'edit' =>     ['platformAdmin', 'coAdmin'],
+        'canvas' =>   ['platformAdmin', 'coAdmin'],
         'view' =>     ['platformAdmin', 'coAdmin']
       ],
       // Actions that operate over a table (ie: do not require an $id)
diff --git a/app/templates/AdHocAttributes/columns.inc b/app/templates/AdHocAttributes/columns.inc
index dd2f93b6..4d5aecbe 100644
--- a/app/templates/AdHocAttributes/columns.inc
+++ b/app/templates/AdHocAttributes/columns.inc
@@ -41,6 +41,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'ad_hoc_attributes'
 ];
\ No newline at end of file
diff --git a/app/templates/AdHocAttributes/fields-nav.inc b/app/templates/AdHocAttributes/fields-nav.inc
index 8cddfe10..9b42482f 100644
--- a/app/templates/AdHocAttributes/fields-nav.inc
+++ b/app/templates/AdHocAttributes/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'ad_hoc_attributes'
 ];
\ No newline at end of file
diff --git a/app/templates/Addresses/columns.inc b/app/templates/Addresses/columns.inc
index 257f4b09..e5c58c12 100644
--- a/app/templates/Addresses/columns.inc
+++ b/app/templates/Addresses/columns.inc
@@ -45,6 +45,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'addresses'
 ];
diff --git a/app/templates/Addresses/fields-nav.inc b/app/templates/Addresses/fields-nav.inc
index 08574e5a..86686fdf 100644
--- a/app/templates/Addresses/fields-nav.inc
+++ b/app/templates/Addresses/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'addresses'
 ];
\ No newline at end of file
diff --git a/app/templates/EmailAddresses/columns.inc b/app/templates/EmailAddresses/columns.inc
index da915ca1..4c40977c 100644
--- a/app/templates/EmailAddresses/columns.inc
+++ b/app/templates/EmailAddresses/columns.inc
@@ -41,6 +41,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'email_addresses'
 ];
\ No newline at end of file
diff --git a/app/templates/EmailAddresses/fields-nav.inc b/app/templates/EmailAddresses/fields-nav.inc
index 14b67797..797d856b 100644
--- a/app/templates/EmailAddresses/fields-nav.inc
+++ b/app/templates/EmailAddresses/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes', // default for person. 'external identities' are special cased
+  'active' => 'person', // default for person. 'external identities' are special cased
   'subActive' => 'email_addresses'
 ];
\ No newline at end of file
diff --git a/app/templates/Identifiers/columns.inc b/app/templates/Identifiers/columns.inc
index 48c82927..8a27be5d 100644
--- a/app/templates/Identifiers/columns.inc
+++ b/app/templates/Identifiers/columns.inc
@@ -56,6 +56,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'identifiers'
 ];
\ No newline at end of file
diff --git a/app/templates/Identifiers/fields-nav.inc b/app/templates/Identifiers/fields-nav.inc
index bcacd714..17db0dc9 100644
--- a/app/templates/Identifiers/fields-nav.inc
+++ b/app/templates/Identifiers/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'identifiers'
 ];
\ No newline at end of file
diff --git a/app/templates/Names/columns.inc b/app/templates/Names/columns.inc
index feeda0cd..e142b78a 100644
--- a/app/templates/Names/columns.inc
+++ b/app/templates/Names/columns.inc
@@ -58,6 +58,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'names'
 ];
\ No newline at end of file
diff --git a/app/templates/Names/fields-nav.inc b/app/templates/Names/fields-nav.inc
index d333f883..955afd92 100644
--- a/app/templates/Names/fields-nav.inc
+++ b/app/templates/Names/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'names'
 ];
\ No newline at end of file
diff --git a/app/templates/People/canvas.php b/app/templates/People/canvas.php
new file mode 100644
index 00000000..2d7397b0
--- /dev/null
+++ b/app/templates/People/canvas.php
@@ -0,0 +1,172 @@
+<?php
+  /**
+   * COmanage Registry Person Canvas
+   *
+   * Portions licensed to the University Corporation for Advanced Internet
+   * Development, Inc. ("UCAID") under one or more contributor license agreements.
+   * See the NOTICE file distributed with this work for additional information
+   * regarding copyright ownership.
+   *
+   * UCAID licenses this file to you under the Apache License, Version 2.0
+   * (the "License"); you may not use this file except in compliance with the
+   * License. You may obtain a copy of the License at:
+   *
+   * http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * @link          https://www.internet2.edu/comanage COmanage Project
+   * @package       registry
+   * @since         COmanage Registry v5.0.0
+   * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+   */
+  
+  declare(strict_types = 1);
+  
+  $subnav = [
+    'name' => 'person',
+    'active' => 'canvas'
+  ];
+  
+  $linkFilter = [];
+  if(!empty($vv_primary_link) && !empty($this->request->getQuery($vv_primary_link))) {
+    $linkFilter = [$vv_primary_link => $this->request->getQuery($vv_primary_link)];
+  }
+  
+  $objId = null;
+  if(!empty($vv_obj)) {
+    $objId = $vv_obj->id;
+  }
+  
+  // Person Attributes to display.
+  $attributes = [
+    'names',
+    'email_addresses',
+    'identifiers',
+    'ad_hoc_attributes',
+    'addresses',
+    'telephone_numbers',
+    'urls',
+    'pronouns'
+  ];
+  
+  // Count the number of widgets that will be displayed 
+  $widgetCount = 0;
+  foreach($attributes as $attr) {
+    if(!empty($vv_obj[$attr])) {
+      $widgetCount++;
+    }
+  }
+  
+?>
+
+<div id="subnavigation">
+  <?= $this->element('subnavigation', $subnav); ?>
+</div>
+
+<div id="person-canvas" class="co-cards">
+
+  <!-- Person Attributes -->
+  <div id="person-canvas-attributes-js" class="row row-cols-1 g-4 <?= ($widgetCount > 1) ? 'row-cols-md-2' : ''?>">
+    <?php
+      foreach($attributes as $attr) {
+        if(!empty(($vv_obj[$attr]))) {
+          print $this->element(
+            'mveaJs',
+            [
+              'htmlId' => 'person-canvas-' . $attr . '-js',
+              'parentId' => $objId,
+              'mveaType' => $attr,
+              'entityType' => 'person'
+            ]
+          );
+        }
+      }
+    ?>
+  </div>
+
+  <!-- XXX Non-AJAX Approach: Keep the output below as a reference until the component approach above is complete. -->
+  <hr>
+  <!-- Person Attributes -->
+  <div id="person-canvas-attributes" class="row row-cols-1 g-4 <?= ($widgetCount > 1) ? 'row-cols-md-2' : ''?>">
+    <?php
+      // Output each attribute card if attributes exist
+      foreach($attributes as $attr) {
+        if(!empty(($vv_obj[$attr]))) {
+          print $this->element(
+            'mvea',
+            [
+              'vv_obj' => $vv_obj,
+              'mveaType' => $attr,
+              'entityType' => 'person'
+            ]
+          );
+        }
+      }
+    ?>
+  </div>
+  <!-- XXX End of Non-AJAX Approach: Keep the output below as a reference until the component approach above is complete. -->
+  
+  <!-- Person Roles -->
+  <div id="person-canvas-roles" class="card">
+    <div class="card-body">
+      <h2 class="card-title">
+        <?= $this->Html->link(
+          __d('controller', 'PersonRoles', [99]),
+          [ 'controller' => 'person_roles',
+            'action' => 'index',
+            '?' => ['person_id' => $objId]
+          ]
+        ); ?>
+      </h2>
+      <div class="card-text">
+        <ul id="person-canvas-person_roles" class="fields data-list">
+          <?php foreach($vv_obj['person_roles'] as $role): ?>
+            <li class="field-data-container centered linked-row">
+              <div class="field-data flex-column">
+                <?= $this->Html->link(
+                  !(empty($role['title'])) ? $role['title'] : __d('information','global.title.none'),
+                  [ 'controller' => 'person_roles',
+                    'action' => 'edit',
+                    $role['id']
+                  ],
+                  ['class' => 'row-link']
+                ); ?>
+              </div>
+              <div class="field-data flex-column">
+                <?php if(!empty($role['cou'])): ?> 
+                  <span class="cou">
+                    <?= $role['cou']['name'] ?>
+                  </span>
+                <?php endif; ?>
+              </div>
+              <div class="field-data data-label">
+                <?php if($role['status'] != 'A'): ?>
+                  <?php if(in_array($role['status'], ['D','N','S','X','XP'])): ?>
+                    <span class="mr-1 badge bg-danger">
+                      <?= __d('enumeration', 'StatusEnum.' . $role['status']); ?>
+                    </span>
+                  <?php else: ?>
+                    <span class="mr-1 badge bg-warning">
+                      <?= __d('enumeration', 'StatusEnum.' . $role['status']); ?>
+                    </span>
+                  <?php endif; ?>    
+                <?php endif; ?>
+                <?php if(!empty($role['affiliation_type'])): ?>
+                  <span class="mr-1 badge bg-light">
+                    <?= !empty($role['affiliation_type']['display_name']) ? $role['affiliation_type']['display_name'] : $role['affiliation_type']['value'] ?>
+                  </span>
+                <?php endif; ?>
+              </div>
+              <div class="id-col"><?= __d('information', 'entity.id', [$role["id"]]); ?></div>
+            </li>
+          <?php endforeach; ?>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/templates/People/columns.inc b/app/templates/People/columns.inc
index d29f8d6a..4e001764 100644
--- a/app/templates/People/columns.inc
+++ b/app/templates/People/columns.inc
@@ -30,6 +30,7 @@ $indexColumns = [
     'type' => 'link',
     'model' => 'primary_name',
     'field' => 'full_name',
+    'action' => 'canvas',
 // XXX see comments in the controller about sorting on given vs family
     'sortable' => 'PrimaryName.family'
   ],
@@ -49,67 +50,57 @@ $rowActions = [
     'controller' => 'names',
     'action' => 'index',
     'icon' => 'account_box',
-    'iconClass' => 'material-icons-outlined',
-    'type' => 'tab'
+    'iconClass' => 'material-icons-outlined'
   ],
   [
     'controller' => 'email_addresses',
     'action' => 'index',
     'icon' => 'email',
-    'iconClass' => 'material-icons-outlined',
-    'type' => 'tab'
+    'iconClass' => 'material-icons-outlined'
   ],
   [
     'controller' => 'identifiers',
     'action' => 'index',
     'icon' => 'fingerprint',
-    'type' => 'tab',
     'class' => 'bottom-border'
   ],
   [
     'controller' => 'person_roles',
     'action' => 'index',
-    'icon' => 'emoji_people',
-    'type' => 'tab'
+    'icon' => 'emoji_people'
   ],
   [
     'controller' => 'external_identities',
     'action' => 'index',
     'icon' => 'system_update_alt',
-    'type' => 'tab',
     'class' => 'bottom-border'
   ],
   [
     'controller' => 'ad_hoc_attributes',
     'action' => 'index',
     'icon' => 'check_box',
-    'iconClass' => 'material-icons-outlined',
-    'type' => 'tab'
+    'iconClass' => 'material-icons-outlined'
   ],
   [
     'controller' => 'addresses',
     'action' => 'index',
     'icon' => 'contact_mail',
-    'iconClass' => 'material-icons-outlined',
-    'type' => 'tab'
+    'iconClass' => 'material-icons-outlined'
   ],
   [
     'controller' => 'history_records',
     'action' => 'index',
-    'icon' => 'history',
-    'type' => 'tab'
+    'icon' => 'history'
   ],
   [
     'controller' => 'telephone_numbers',
     'action' => 'index',
-    'icon' => 'phone',
-    'type' => 'tab'
+    'icon' => 'phone'
   ],
   [
     'controller' => 'urls',
     'action' => 'index',
-    'icon' => 'link',
-    'type' => 'tab'
+    'icon' => 'link'
   ]
 ];
 
diff --git a/app/templates/People/fields-nav.inc b/app/templates/People/fields-nav.inc
index e54aef21..cf904e33 100644
--- a/app/templates/People/fields-nav.inc
+++ b/app/templates/People/fields-nav.inc
@@ -44,5 +44,6 @@ $topLinks = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'properties'
+  'active' => 'person',
+  'subActive' => 'properties'
 ];
\ No newline at end of file
diff --git a/app/templates/Pronouns/columns.inc b/app/templates/Pronouns/columns.inc
index 3963c2db..58767da5 100644
--- a/app/templates/Pronouns/columns.inc
+++ b/app/templates/Pronouns/columns.inc
@@ -45,6 +45,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'pronouns'
 ];
\ No newline at end of file
diff --git a/app/templates/Pronouns/fields-nav.inc b/app/templates/Pronouns/fields-nav.inc
index ff7b40d0..2ea80858 100644
--- a/app/templates/Pronouns/fields-nav.inc
+++ b/app/templates/Pronouns/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'pronouns'
 ];
\ No newline at end of file
diff --git a/app/templates/Standard/add-edit-view.php b/app/templates/Standard/add-edit-view.php
index 16800f0c..8925cddf 100644
--- a/app/templates/Standard/add-edit-view.php
+++ b/app/templates/Standard/add-edit-view.php
@@ -61,34 +61,24 @@
   //     the fields (which would be more consistent with how Views render...)
   $flashArgs['vv_banners'] = $banners;
 }
-?>
 
-<?php if(!empty($subnav)): ?>
-  <div id="subnavigation">
-    <div class="supertitle">
-      <h1>
-        <?php if(!empty($vv_supertitle)): ?>
-          <?= $vv_supertitle; ?>
-        <?php elseif(!empty($vv_obj)): ?>
-          <?= $vv_obj->$vv_display_field; ?>
-        <?php endif; ?>
-      </h1>
-    </div>
-    
-    <?php /* Flash Messages are placed below supertitle when subnavigation exists. */ ?>
-    <?= $this->element('flash', $flashArgs); ?>
-    
-    <?= $this->element('subnavigation', $subnav); ?>
-  </div>
-<?php endif; ?>
+// If subnavigation is present a supertitle and the subnavigation will be placed above
+// the normal page title. The flash messages will be shown up there as well.
+if(!empty($subnav)) {
+  // Include the $flashArgs for the subnavigation element
+  $subnav['flashArgs'] = $flashArgs;
+  // Generate the subnavigation title and tabs
+  print $this->element('subnavigation', $subnav);
+}
+?>
 
 <div class="pageTitleContainer">
   <div class="pageTitle">
     <?php if(empty($subnav)): ?>
-    <h1><?= $vv_title; ?></h1>
+      <h1><?= $vv_title; ?></h1>
     <?php else: ?>
       <?php if(
-        // Subnavigation contains an h2 for these entities
+        // Subnavigation contains an h2 for these entities, so we need an h3
         $vv_primary_link == 'person_role_id'
         || $vv_primary_link == 'external_identity_id'
         || $vv_primary_link == 'external_identity_role_id'
@@ -107,7 +97,8 @@
     $action_args['vv_attr_id'] =  $vv_obj->id;
     
     foreach(($topLinks ?? []) as $t) {
-      if($vv_permissions[ $t['link']['action'] ]) {
+      // TODO: fix the following test so that cross-model links can exist in top-links (e.g. History Records index)
+      //if($vv_permissions[ $t['link']['action'] ]) {
         // We need to inject $linkFilter, but not overwrite any existing query params
         if(!empty($t['link']['?'])) {
           $t['link']['?'] = array_merge($t['link']['?'], $linkFilter);
@@ -121,7 +112,7 @@
           'url' => $this->Url->build($t['link']),
           'label' => $t['label'],
         ];
-      }
+      //}
     }
   
     // Delete
diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
index f13cac03..7b7071c0 100644
--- a/app/templates/Standard/index.php
+++ b/app/templates/Standard/index.php
@@ -67,26 +67,16 @@
 if(!empty($banners)) {
   $flashArgs['vv_banners'] = $banners;
 }
-?>
 
-<?php if(!empty($subnav)): ?>
-  <div id="subnavigation">
-    <div class="supertitle">
-      <h1>
-        <?php if(!empty($vv_person_name)): ?>
-          <?= $vv_person_name->full_name; ?>
-        <?php elseif(!empty($vv_bc_parent_obj)): ?>
-          <?= $vv_bc_parent_obj->$vv_bc_parent_displayfield; ?>
-        <?php endif; ?>
-      </h1>
-    </div>
-
-    <?php /* Flash Messages are placed below supertitle when subnavigation exists. */ ?>
-    <?= $this->element('flash', $flashArgs); ?>
-    
-    <?= $this->element('subnavigation', $subnav); ?>
-  </div>
-<?php endif; ?>
+// If subnavigation is present a supertitle and the subnavigation will be placed above
+// the normal page title. The flash messages will be shown up there as well.
+if(!empty($subnav)) {
+  // Include the $flashArgs for the subnavigation element
+  $subnav['flashArgs'] = $flashArgs;
+  // Generate the subnavigation title and tabs
+  print $this->element('subnavigation', $subnav);
+}
+?>
 
 <div class="pageTitleContainer">
   <div class="pageTitle">
@@ -94,7 +84,7 @@
       <h1><?= $vv_title; ?></h1>
     <?php else: ?>
       <?php if(
-        // Subnavigation contains an h2 for these entities
+        // Subnavigation contains an h2 for these entities, so we need an h3
         $vv_primary_link == 'person_role_id'
         || $vv_primary_link == 'external_identity_id'
         || $vv_primary_link == 'external_identity_role_id'): ?>
@@ -521,6 +511,8 @@
                         } elseif ($a == 'view') {
                           $linkClass .= ' row-link-view';
                           $readOnlyIcon = ' <em class="material-icons-outlined read-only-icon">edit_off</em>';
+                        } else {
+                          $linkClass .= ' row-link-' . $a;
                         }
                         $args = ['class' => $linkClass];
                         $isFirstLink = false;
diff --git a/app/templates/TelephoneNumbers/columns.inc b/app/templates/TelephoneNumbers/columns.inc
index 55289a09..1c4f56b1 100644
--- a/app/templates/TelephoneNumbers/columns.inc
+++ b/app/templates/TelephoneNumbers/columns.inc
@@ -41,6 +41,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'telephone_numbers'
 ];
\ No newline at end of file
diff --git a/app/templates/TelephoneNumbers/fields-nav.inc b/app/templates/TelephoneNumbers/fields-nav.inc
index 267ae028..e6f2507e 100644
--- a/app/templates/TelephoneNumbers/fields-nav.inc
+++ b/app/templates/TelephoneNumbers/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'telephone_numbers'
 ];
\ No newline at end of file
diff --git a/app/templates/Urls/columns.inc b/app/templates/Urls/columns.inc
index 5790bff7..08f46183 100644
--- a/app/templates/Urls/columns.inc
+++ b/app/templates/Urls/columns.inc
@@ -41,6 +41,6 @@ $bulkActions = [
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'urls'
 ];
\ No newline at end of file
diff --git a/app/templates/Urls/fields-nav.inc b/app/templates/Urls/fields-nav.inc
index 8e2ef8f4..8e0c5364 100644
--- a/app/templates/Urls/fields-nav.inc
+++ b/app/templates/Urls/fields-nav.inc
@@ -30,6 +30,6 @@ $topLinks = [];
 
 $subnav = [
   'name' => 'person',
-  'active' => 'attributes',
+  'active' => 'person',
   'subActive' => 'names'
 ];
\ No newline at end of file
diff --git a/app/templates/element/breadcrumbs.php b/app/templates/element/breadcrumbs.php
index 83bcdac4..3492f4fd 100644
--- a/app/templates/element/breadcrumbs.php
+++ b/app/templates/element/breadcrumbs.php
@@ -221,7 +221,7 @@
 // XXX This is initially for api_users:generate, not clear how much this does
 // or does not generalize. If we start adding more exceptions here, we should
 // flip the logic and let api_users:generate declare that it wants a link back.
-  if(!in_array($vv_action, ['add', 'edit', 'index', 'view'])
+  if(!in_array($vv_action, ['add', 'edit', 'index', 'canvas', 'view'])
      && !empty($vv_obj->id)
      && !empty($vv_obj->$vv_display_field)) {
     $oaction = ($vv_permissions['edit'] 
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
index 2a5b6eac..acfdf8f7 100644
--- a/app/templates/element/javascript.php
+++ b/app/templates/element/javascript.php
@@ -161,18 +161,23 @@
       placeholder: "-- Select --"
     });
 
-    // Generic row click handling for div-based rows
-    $('div.linked-row').click(function(e) {
-      location.href = $(this).find('a.row-link').attr('href');
-    });
-
-    // Generic row click handling for index-table rows
+    // Generic row click handling
     // First capture mouse location to test if we're clicking or drag-selecting (for copy)
     var mouseDownEvent = null;
-    $('table.index-table tr').mousedown(function(e) {
+    $('table.index-table tr, .linked-row').mousedown(function(e) {
       mouseDownEvent = e;
     });
-    
+
+    // Generic row click handling for div-and li based rows
+    $('.linked-row').click(function(e) {
+      url = $(this).find('a.row-link').attr('href');
+      if(Math.abs(e.clientX-mouseDownEvent.clientX) < 5 &&
+        Math.abs(e.clientY-mouseDownEvent.clientY < 5)) {
+        location.href = url;
+      }
+    });
+
+    // Generic row click handling for index-table rows
     $('table.index-table tr').each(function(e) {
       url = $(this).find('a.row-link').attr('href');
       if(url != undefined && url != '') {
diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
index 18fa989e..ee4549b6 100644
--- a/app/templates/element/menuAction.php
+++ b/app/templates/element/menuAction.php
@@ -27,9 +27,11 @@
 
 $actionsCount = count($vv_actions);
 $actionsCountClass = $actionsCount > 0 ? ' actions-count-' . $actionsCount : '';
-$actionsMenuClass = 'field-actions-menu dropdown dropleft' . $actionsCountClass;
+$actionsMenuClass = (!empty($vv_actions_class) ? $vv_actions_class : 'field-actions-menu') . ' dropdown dropleft' . $actionsCountClass;
 $actionsMenuUid = md5($vv_attr_id);
-$actionsType = isset($vv_actions_type) ? $vv_actions_type : 'row-actions';
+$actionsType = !empty($vv_actions_type) ? $vv_actions_type : 'row-actions';
+$actionsTitle = !empty($vv_actions_title) ? $vv_actions_title : '';
+$actionsIcon = !empty($vv_actions_icon) ? $vv_actions_icon : 'settings';
 ?>
 
 <div id="action-menu_<?= $actionsMenuUid; ?>"
@@ -45,7 +47,7 @@ class="<?= $actionsMenuClass; ?>">
     'title' => __d('field', 'action')
   );
   print $this->Html->link(
-    '<span class="material-icons">settings</span>',
+    '<span class="material-icons">' . $actionsIcon . '</span> ' . $actionsTitle,
     'javascript:void(0);',
     $linkparams
   );
diff --git a/app/templates/element/mvea.php b/app/templates/element/mvea.php
new file mode 100644
index 00000000..c2e2ac78
--- /dev/null
+++ b/app/templates/element/mvea.php
@@ -0,0 +1,196 @@
+<?php
+/**
+ * COmanage Registry MVEA Card
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+// Get parameters
+$vv_obj = $vv_obj;          // the object with the MVEAs in it  
+$mveaType = $mveaType;      // the type of MVEA we will fetch
+$entityType = $entityType;  // the type of entity continaing the MVEA (person, person_role, external_identity)
+  
+// Get the camel-case controller name and generate the title  
+$mveaController = Cake\Utility\Inflector::camelize($mveaType);
+$title = __d('controller', $mveaController, [99]);
+
+// Create an MVEA card for a canvas page
+?>
+
+<div class="col cm-mvea-col">
+  <div class="card cm-card h-100">
+    <div class="card-body">
+      <h2 class="card-title">
+        <?= $this->Html->link(
+          __d('controller', $mveaController, [99]),
+          [ 'controller' => $mveaType,
+            'action' => 'index',
+            '?' => ['person_id' => $vv_obj['id']]
+          ]
+        ); ?>
+      </h2>
+      <div class="card-text">
+        <ul id="person-canvas-<?= $mveaType ?>>" class="fields data-list">
+          <?php foreach($vv_obj[$mveaType] as $mvea): ?>
+            <li class="field-data-container linked-row">
+              <div class="field-data force-wrap ">
+                <?php 
+                  // Get the link label based on MVEA type
+                  $linkTitle = __d('information','global.title.none');
+                  switch($mveaType) {
+                    case 'names': 
+                      /* XXX THIS IS TEMPORARY. This approach for generating the name label
+                         is stolen directly from Model/Entity/Name.php::_getFullName(). Better is to have
+                         this pre-populated in the data when it arrives or pass to a function. */
+                      $cn = "";
+                      if (!empty($mvea['display_name'])) {
+                        $cn = $mvea['display_name'];
+                      } else {
+                        if (empty($mvea['language'])
+                          || !in_array($mvea['language'], ['hu', 'ja', 'ko', 'za-Hans', 'za-Hant'])) {
+                          // Western order. (Including honorific in this view if set.)
+                          if (!empty($mvea['honorific'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['honorific'];
+                          }
+  
+                          if (!empty($mvea['given'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['given'];
+                          }
+  
+                          if (!empty($mvea['middle'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['middle'];
+                          }
+  
+                          if (!empty($mvea['family'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['family'];
+                          }
+  
+                          if (!empty($mvea['suffix'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['suffix'];
+                          }
+                        } else {
+                          // Switch to Eastern order.
+                          if (!empty($mvea['family'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['family'];
+                          }
+  
+                          if (!empty($mvea['given'])) {
+                            $cn .= ($cn != "" ? ' ' : '') . $mvea['given'];
+                          }
+                        }
+                      }
+                      // This should never happen with names, but have a fallback anyway:
+                      if (empty($cn)) {
+                        $cn = __d('information', 'global.title.none');
+                      }
+                      $linkTitle = $cn;
+                      break;
+                    case 'email_addresses':
+                      $linkTitle = $mvea['mail'];
+                      break;
+                    case 'identifiers':
+                      $linkTitle = $mvea['identifier'];
+                      break;
+                    case 'ad_hoc_attributes':
+                      $linkTitle = !empty($mvea['value']) ? $mvea['value'] : __d('information','global.value.none');
+                      break;
+                    case 'addresses':
+                      $linkTitle = trim($mvea['room'] . ' ' . $mvea['street']);
+                      break;
+                    case 'telephone_numbers':
+                      $linkTitle = $mvea['country_code'] . ' ' . $mvea['area_code'] . ' ' . $mvea['number'];
+                      break;
+                    case 'urls':
+                      $linkTitle = !empty($mvea['description']) ? $mvea['description'] : $mvea['url'];
+                      break;
+                    case 'pronouns':
+                      break;
+                  }
+                ?>
+                <?php if($mveaType == 'addresses'): ?>
+                  <address>
+                <?php endif; ?>
+                <?= $this->Html->link(
+                  $linkTitle,
+                  [ 
+                    'controller' => $mveaType,
+                    'action' => 'edit',
+                    $mvea['id']
+                  ],
+                  [
+                    'class' => 'row-link'
+                  ]
+                ); ?>
+                <?php if($mveaType == 'addresses'): ?>
+                    <?php // XXX if we have other places to output an address just for display, make a function. ?>
+                    <?php if(!empty($mvea['locality']) || !empty($mvea['state'])): ?>
+                      <br><?= $mvea['locality'] ?>
+                      <?= (!empty($mvea['locality']) && !empty($mvea['state'])) ? ', ' : '' ?> 
+                      <?= $mvea['state']; ?>
+                    <?php endif; ?>
+                    <?php if(!empty($mvea['postal_code']) || !empty($mvea['country'])): ?>
+                      <br><?= $mvea['postal_code'] . ' ' . $mvea['country']; ?>
+                    <?php endif; ?>
+                  </address>
+                <?php endif; ?>
+              </div>
+              <?php if(!empty(
+                $mvea['type_id']) 
+                || $mveaType == 'names' && $mvea['primary_name']
+                || $mveaType == 'identifiers' && $mvea['login']
+                || !empty($mvea['language']) 
+                || !($mvea['verified']) 
+                || !(empty($mvea['tag']))
+              ): ?>
+                <div class="field-data data-label">
+                  <?php if($mveaType == 'names' && $mvea['primary_name']): ?>
+                    <span class="mr-1 badge bg-outline-secondary primary"><?= __d('field','primary') ?></span>
+                  <?php endif; ?>
+                  <?php if($mveaType == 'identifiers' && $mvea['login']): ?>
+                    <span class="mr-1 badge bg-outline-secondary login"><?= __d('field','login') ?></span>
+                  <?php endif; ?>
+                  <?php if($mveaType == 'email_addresses' && !($mvea['verified'])): ?>
+                    <span class="mr-1 badge bg-warning unverified"><?= __d('field','unverified') ?></span>
+                  <?php endif; ?>
+                  <?php if(!empty($mvea['type'])): ?>
+                    <span class="mr-1 badge bg-light type">
+                      <?= !empty($mvea['type']['display_name']) ? $mvea['type']['display_name'] : $mvea['type']['value'] ?>
+                    </span>
+                  <?php endif; ?>
+                  <?php if(!empty($mvea['language'])): ?>
+                    <span class="mr-1 badge bg-light lang">
+                      <?= __d('enumeration','LanguageEnum.' . $mvea['language']) ?>
+                    </span>
+                  <?php endif; ?>
+                  <?php if($mveaType == 'ad_hoc_attributes' && !empty($mvea['tag'])): ?>
+                    <span class="mr-1 badge bg-light ad-hoc"><?= $mvea['tag'] ?></span>
+                  <?php endif; ?>
+                </div>
+              <?php endif; ?>
+            </li>
+          <?php endforeach; ?>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/templates/element/mveaJs.php b/app/templates/element/mveaJs.php
new file mode 100644
index 00000000..5214ed12
--- /dev/null
+++ b/app/templates/element/mveaJs.php
@@ -0,0 +1,132 @@
+<?php
+/**
+ * COmanage Registry MVEA Vue.js Component / Card
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+// Get parameters
+$htmlId = $htmlId;
+$parentId = $parentId;
+$mveaType = $mveaType;      // the type of MVEA we will fetch
+$entityType = $entityType;  // the type of entity continaing the MVEA (person, person_role, external_identity)
+
+// Get the camel-case controller name and generate the title  
+$mveaController = Cake\Utility\Inflector::camelize($mveaType);
+$title = __d('controller', $mveaController, [99]);
+
+// Get the CSRF Token in JavaScript  
+$token = $this->request->getAttribute('csrfToken');
+
+// Create an MVEA component - typically this is represented as a card on a canvas page
+?>
+
+<script type="module">
+  <?php if(Cake\Core\Configure::read('debug')): ?>
+    import Mveas from "<?= $this->Url->script('comanage/components/mvea/mveas.js') ?>?time=<?= time() ?>";
+  <?php else: ?>
+    import Mveas from "<?= $this->Url->script('comanage/components/mvea/mveas.js') ?>";
+  <?php endif; ?>
+  
+  const app = Vue.createApp({
+    data() {
+      return {
+        error: '',
+        mveas: '',
+        core: {
+          parentId: '<?= $parentId ?>',
+          mveaType: '<?= $mveaType ?>',
+          mveaController: '<?= $mveaController ?>',
+          webroot: '<?= $this->request->getAttribute('webroot') ?>'
+        },
+        txt: {
+          login: '<?= __d('field','login') ?>',
+          none: '<?= __d('information','global.value.none') ?>',
+          primary: '<?= __d('field', 'primary') ?>',
+          status: '<?= __d('field', 'datepicker.hour') ?>',
+          unverified: '<?= __d('field', 'unverified') ?>',
+          visit: '<?= __d('information', 'global.visit.link') ?>'
+        }
+      }
+    },
+    components: {
+      Mveas
+    },
+    methods: {
+      getMveas(mveaType,entityType) {
+        var entityTypeIdRef = 'person_id';
+        if(entityType == 'person_role') {
+          entityTypeIdRef = 'person_role_id';
+        }
+        if(entityType == 'external_identity') {
+          entityTypeIdRef = 'external_identity_id';
+        }
+        let url = '<?= $this->Url->build(['controller' => 'api', 'action' => 'v2']) ?>/' + mveaType + '?' + entityTypeIdRef + '=<?php print $parentId ?>';
+        let xhr = callRegistryAPI(
+          url, 
+          'GET', 
+          'json',
+          this.setMveas,
+          this.generalXhrFailCallback
+        );
+      },
+      setMveas(xhr) {
+        this.mveas = xhr.responseJSON;
+      },
+      setError(txt) {
+        this.error = txt;
+      },
+      generalXhrFailCallback(xhr) {
+        stopSpinner();
+        this.successTxt = '';
+        if(xhr.statusText != undefined && xhr.statusText != '') {
+          this.setError(xhr.statusText)
+          console.log('Status Code:', xhr.status)
+        } else {
+          console.error(xhr);
+          this.setError(this.txt.error500);
+        }
+      }
+    },
+    created() {
+      this.getMveas('<?= $mveaType ?>', '<?= $entityType ?>');
+    }
+  });
+
+  app.mount("#<?= $htmlId ?>");
+</script>
+
+<div id="<?= $htmlId ?>" class="col cm-mvea-col">
+  <div class="card h-100">
+    <div class="card-body">
+      <h2 class="card-title"><?= $title ?></h2>
+      <div class="card-text">
+        <mveas
+          :mveas="this.mveas"
+          :core="this.core"
+          :txt="this.txt">
+        </mveas>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/templates/element/subnavigation.php b/app/templates/element/subnavigation.php
index 93fb928d..8d23e426 100644
--- a/app/templates/element/subnavigation.php
+++ b/app/templates/element/subnavigation.php
@@ -31,6 +31,7 @@
 use Cake\View\Helper;
 
 $linkFilter = [];
+$flashArgs = [];
 $curId = NULL;
 $curController = $this->request->getParam('controller');
 $curAction = $this->request->getParam('action');
@@ -60,304 +61,271 @@
     $linkFilter = ['group_id' => $curId];
   }
 }
-?>
-  
-<!-- Top-Level Subnavigation Tabs -->  
-<nav id="cm-<?= $name ?>-subnav-tabs" class="cm-subnav-tabs">
-  <ul class="nav nav-tabs">
 
-    <?php if ($name == 'person'): ?>      
-    <!-- Person Subnavigation -->
-      <?php
-        // Simplify our tests for roles and external identifiers
-        $isPersonRole = (
-          $vv_primary_link == 'person_role_id'
-          || $vv_primary_link == 'person_role_id'
-          || ($curController == 'PersonRoles' && ($curAction == 'edit' || $curAction == 'view'))
-        ) ? true : false;
+if(!empty($vv_obj)) {
+  // Set the badge style for Person Status
+  $statusBadgeClass = 'bg-warning';
+  if($vv_obj['status'] == 'A') {
+    $statusBadgeClass = 'bg-outline-secondary primary';
+  } elseif (in_array($vv_obj['status'], ['D','N','S','X','XP'])) {
+    $statusBadgeClass = 'bg-danger';
+  }  
+}
 
-        $isExternalIdRole = (
-          $vv_primary_link == 'external_identity_role_id'
-          || ($curController == 'ExternalIdentityRoles' && ($curAction == 'edit' || $curAction == 'view'))
-        ) ? true : false;
+$supertitle = __d('information','global.title.none');
+if(!empty($vv_supertitle)) {
+  $supertitle = $vv_supertitle;
+} elseif(!empty($vv_obj)) {
+  $supertitle = $vv_obj->$vv_display_field;
+} elseif(!empty($vv_person_name)) {
+  $supertitle = $vv_person_name->full_name;
+} elseif(!empty($vv_bc_parent_obj)) {
+  $supertitle = $vv_bc_parent_obj->$vv_bc_parent_displayfield;
+}
+?>
 
-        $isExternalId = (
-          $vv_primary_link == 'external_identity_id'
-          || $vv_primary_link == 'external_identity_role_id'
-          || ($curController == 'ExternalIdentities' && ($curAction == 'edit' || $curAction == 'view'))
-          || ($curController == 'ExternalIdentityRoles' && ($curAction == 'edit' || $curAction == 'view'))
-        ) ? true : false;
-        
-        // Determine active tab. This logic is necessitated by MVEAs (that are displayed in multiple contexts).
-        $isPropertiesTab = ($active == 'properties') ? true : false;
-        
-        $isAttributesTab = (
-          $active == 'attributes' 
-          && !$isPersonRole
-          && !$isExternalId
-        ) ? true : false;
-        
-        $isRolesTab = (
-          $active == 'person_roles'
-          || $isPersonRole
-          && !$isExternalId
-        ) ? true : false;
-        
-        $isExternalIdentitiesTab = (
-          $active == 'external_identities' 
-          || $isExternalId
-        ) ? true : false;
-      ?>
-      
-      <li class="nav-item">
+<div id="subnavigation">
+  <div class="supertitle-container">
+    <div class="supertitle">
+      <h1><?= $supertitle ?></h1>
+      <?php if(!empty($vv_obj['status'])): ?>
+        <span class="person-status-badge mr-1 badge <?= $statusBadgeClass ?>">
+          <?= __d('enumeration', 'StatusEnum.' . $vv_obj['status']); ?>
+        </span>
+      <?php endif; ?>
+    </div>
+    
+    <?php if($name == 'person'): ?>
+      <!-- Specialty person dropdown menus - ADD and global actions -->
+      <nav id="person-actions">
         <?php
-          $linkClass = $isPropertiesTab ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'Properties', [99]),
-            [ 'controller' => 'people',
-              'action' => 'edit',
-              $curId
+          // Build the Add menu
+          $action_args = array();
+          $action_args['vv_attr_id'] =  $curId;
+          $action_args['vv_actions_type'] = 'person-actions-add-menu';
+          $action_args['vv_actions_title'] = __d('operation','add');
+          $action_args['vv_actions_icon'] = 'add_circle';
+          $action_args['vv_actions_class'] = 'person-actions-add-menu';
+          $actionOrderDefault = $this->Menu->getMenuOrder('Default');
+          $personAddMenuActions = [
+            [
+              'controller' => 'names',
+              'action' => 'add',
+              'icon' => 'account_box',
+              'iconClass' => 'material-icons-outlined'
             ],
-            ['class' => $linkClass]
-          );
-        ?>
-      </li>
-      <li class="nav-item">
-        <?php
-          $linkClass = $isAttributesTab ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('menu', 'Attributes', [99]),
-            [ 'controller' => 'names',
-              'action' => 'index',
-              '?' => $linkFilter
+            [
+              'controller' => 'email_addresses',
+              'action' => 'add',
+              'icon' => 'email',
+              'iconClass' => 'material-icons-outlined'
             ],
-            ['class' => $linkClass]
-          );
-        ?>
-      </li>
-      <li class="nav-item">
-        <?php
-          $linkClass = $isRolesTab ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'PersonRoles', [99]),
-            [ 'controller' => 'person_roles',
-              'action' => 'index',
-              '?' => $linkFilter
+            [
+              'controller' => 'identifiers',
+              'action' => 'add',
+              'icon' => 'fingerprint'
             ],
-            ['class' => $linkClass]
-          );
-        ?>
-      </li>
-      <li class="nav-item">
-        <?php
-          $linkClass = $isExternalIdentitiesTab ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'ExternalIdentities', [99]),
-            [ 'controller' => 'external-identities',
-              'action' => 'index',
-              '?' => $linkFilter
+            [
+              'controller' => 'person_roles',
+              'action' => 'add',
+              'icon' => 'emoji_people'
             ],
-            ['class' => $linkClass]
-          );
-        ?>
-      </li>
-    <?php endif; ?>
-    
-    <?php if ($name == 'group'): ?>
-    <!-- Group Subnavigation -->
-      <li class="nav-item">
-        <?php
-          $linkClass = ($active == 'properties') ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'Properties', [99]),
-            [ 'controller' => 'groups',
-              'action' => 'edit',
-              $curId
+            [
+              'controller' => 'ad_hoc_attributes',
+              'action' => 'add',
+              'icon' => 'check_box',
+              'iconClass' => 'material-icons-outlined'
             ],
-            ['class' => $linkClass]
-          );
-        ?>
-      </li>
-      <li class="nav-item">
-        <?php
-          $linkClass = ($active == 'members') ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'Members', [99]),
-            [ 'controller' => 'group_members',
-              'action' => 'index',
-              '?' => $linkFilter
+            [
+              'controller' => 'addresses',
+              'action' => 'add',
+              'icon' => 'contact_mail',
+              'iconClass' => 'material-icons-outlined'
             ],
-            ['class' => $linkClass]
-          ); 
-        ?>
-      </li>
-      <li class="nav-item">
-        <?php
-          $linkClass = ($active == 'owners') ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'Owners', [99]),
-            [ 'controller' => 'group_owners',
-              'action' => 'index',
-              '?' => $linkFilter
+            [
+              'controller' => 'history_records',
+              'action' => 'add',
+              'icon' => 'history'
             ],
-            ['class' => $linkClass]
-          );
+            [
+              'controller' => 'telephone_numbers',
+              'action' => 'add',
+              'icon' => 'phone'
+            ],
+            [
+              'controller' => 'urls',
+              'action' => 'add',
+              'icon' => 'link'
+            ]
+          ];
+          foreach(($personAddMenuActions ?? []) as $a) {
+            $actionOrder = !empty($a['order']) ? $a['order'] : $actionOrderDefault++;
+            $actionIcon = !empty($a['icon']) ? $a['icon'] : $this->Menu->getMenuIcon('Default');
+            $actionIconClass = !empty($a['iconClass']) ? $a['iconClass'] : '';
+            $actionClass = !empty($a['class']) ? $a['class'] : '';
+            $actionUrl = $this->Url->build(
+              [
+                'controller' => $a['controller'],
+                'action' => $a['action'],
+                '?' => [
+                  'person_id' => $curId
+                ]
+              ]
+            );
+            $actionLabel = __d('controller', Cake\Utility\Inflector::camelize($a['controller']), [1]);
+            $action_args['vv_actions'][] = [
+              'order' => $actionOrder,
+              'icon' => $actionIcon,
+              'iconClass' => $actionIconClass,
+              'url' => $actionUrl,
+              'class' => $actionClass,
+              'label' => $actionLabel
+            ];
+          }
         ?>
-      </li>
-      <li class="nav-item">
+        <div class="field-actions person-actions-add-menu-container">
+          <?= $this->element('menuAction', $action_args) ?>
+        </div>
+            
         <?php
-          $linkClass = ($active == 'nestings') ? 'nav-link active' : 'nav-link';
-          print $this->Html->link(
-            __d('controller', 'Nestings', [99]),
-            [ 'controller' => 'group_nestings',
+          // Build the global Person Actions menu
+          $action_args = array();
+          $action_args['vv_attr_id'] =  $curId;
+          $action_args['vv_actions_type'] = 'person-actions-menu';
+          $action_args['vv_actions_title'] = __d('field','actions',[99]);
+          $action_args['vv_actions_icon'] = 'settings';
+          $action_args['vv_actions_class'] = 'person-actions-menu';
+          // history records
+          $actionUrl = $this->Url->build(
+            [
+              'controller' => 'history_records',
               'action' => 'index',
-              '?' => $linkFilter
-            ],
-            ['class' => $linkClass]
+              '?' => [
+                'person_id' => $curId
+              ]
+            ]
+          );
+          $action_args['vv_actions'][] = array(
+            'order' => $this->Menu->getMenuOrder('Default'),
+            'icon' => 'history',
+            'url' => $actionUrl,
+            'label' => __d('operation', 'HistoryRecords')
+          );
+          // delete
+          $actionPostBtnArray = ['action' => 'delete', $curId];
+          $actionUrl = $this->Url->build(['action' => 'delete', $curId]);
+          $action_args['vv_actions'][] = array(
+            'order' => $this->Menu->getMenuOrder('Delete'),
+            'icon' =>  $this->Menu->getMenuIcon('Delete'),
+            'url' => 'javascript:void(0);',
+            'label' => __d('operation', 'delete'),
+            'class' => 'deletebutton nospin',
+            'onclick' => array(
+              'dg_bd_txt' => __d(
+                'operation', 
+                'delete.confirm', 
+                [$supertitle . ', ' . __d('information','entity.id',[$curId])]
+              ),
+              'dg_post_btn_array' => $actionPostBtnArray,
+              'dg_url' => $actionUrl,
+              'dg_conf_btn' => __d('operation', 'remove'),
+              'dg_cancel_btn' => __d('operation', 'cancel'),
+              'dg_title' => __d('operation', 'remove'),
+              'dg_bd_txt_repl_str' => ''
+            )
           );
         ?>
-      </li>
-    <?php endif; ?>
-  </ul>
-</nav>
+        <div class="field-actions person-actions-menu-container">
+          <?= $this->element('menuAction', $action_args) ?>
+        </div>
+      </nav>
+    <?php endif; // person-actions ?>
+  </div>
+
+  <?php /* Flash Messages are placed below supertitle when subnavigation exists. */ ?>
+  <?= $this->element('flash', $flashArgs); ?>
   
-<?php if(!empty($subActive)): ?>
-<!-- Second Level Subnavigation Links -->
-  <?php
-    $curId = $this->request->getQuery($vv_primary_link);
-    if($isPersonRole || $isExternalId) {
-      if($isExternalId && !empty($vv_ei_id)) {
-        $curId = $vv_ei_id;
-      }
-      // We display the role or external identity name above the subnav to show the hierarchy.
-      // We also use this structure to set the second-level $linkFilter
-      print '<h2>';
-      if(!empty($vv_ei_name)) {
-        // We have an external identity name
-        print $vv_ei_name->full_name;
-        $linkFilter = ['external_identity_id' => $curId];
-      } elseif(!empty($vv_person_role)) {
-        // We have a person role
-        print $vv_person_role;
-        $linkFilter = ['person_role_id' => $curId];
-      } elseif(!empty($vv_obj)) {
-        // We are editing/viewing an object
-        if(!empty($vv_obj->title)) {
-          print $vv_obj->title;
-        } elseif (!empty($vv_subtitle)) {
-          print $vv_subtitle;
-        } else {
-          print print __d('information','global.title.none');
-        }
-        // Set up $linkFilter for edit/view on Roles and External Identities
-        $curId = $vv_obj->id;
-        if($curController == 'PersonRoles') {
-          $linkFilter = ['person_role_id' => $curId];
-        }
-        if($curController == 'ExternalIdentities') {
-          $linkFilter = ['external_identity_id' => $curId];
-        }
-      } else {
-        // We shouldn't get here, but have a deafult in case.
-        print __d('information','global.title.none');
-      }
-      print '</h2>'; 
-    }
-  ?>
-  <nav id="cm-<?= $name ?>-subnav-links" class="cm-subnav-links">
-    <ul class="list-inline">
-      <?php if($name == 'person'): ?>
-        <?php if($isPersonRole || $isExternalId): ?>
-          <li class="list-inline-item">
-            <?php
-              // Properties
-              $cc = 'person-roles';
-              $cid = !empty($vv_person_role_id) ? $vv_person_role_id : $curId;
-              if($isExternalId) {
-                $cc = 'external-identities';
-                if(!empty($vv_ei_id)) {
-                  $cid = $vv_ei_id;  
-                }
-              }
-              $linkClass = ($subActive == 'properties') ? 'nav-link active' : 'nav-link';
-              print $this->Html->link(
-                __d('controller', 'Properties', [99]),
-                [ 'controller' => $cc,
-                  'action' => 'edit',
-                  $cid
-                ],
-                ['class' => $linkClass]
-              );
-            ?>
-          </li>
-        <?php endif; ?>
-        <?php if(!$isPersonRole): ?>
-          <li class="list-inline-item">
-            <?php
-              // Names
-              $linkClass = ($subActive == 'names') ? 'nav-link active' : 'nav-link';
-              print $this->Html->link(
-                __d('controller', 'Names', [99]),
-                [ 'controller' => 'names',
-                  'action' => 'index',
-                  '?' => $linkFilter
-                ],
-                ['class' => $linkClass]
-             );
-            ?>
-          </li>
-          <li class="list-inline-item">
-            <?php
-              // Email Addresses
-              $linkClass = ($subActive == 'email_addresses') ? 'nav-link active' : 'nav-link';
-              print $this->Html->link(
-                __d('controller', 'EmailAddresses', [99]),
-                [ 'controller' => 'email_addresses',
-                  'action' => 'index',
-                  '?' => $linkFilter
-                ],
-                ['class' => $linkClass]
-              );
-            ?>  
-          </li>
-          <li class="list-inline-item">
-            <?php
-              // Identifiers
-              $linkClass = ($subActive == 'identifiers') ? 'nav-link active' : 'nav-link';
-              print $this->Html->link(
-                __d('controller', 'Identifiers', [99]),
-                [ 'controller' => 'identifiers',
-                  'action' => 'index',
-                  '?' => $linkFilter
-                ],
-                ['class' => $linkClass]
-              );
-            ?>
-          </li>
-          <?php if($isExternalId): ?>
-            <li class="list-inline-item">
-              <?php
-                // External Identity Roles
-                $linkClass = ($subActive == 'external_identity_roles' ||  $isExternalIdRole) ? 'nav-link active' : 'nav-link';
-                print $this->Html->link(
-                  __d('controller', 'ExternalIdentityRoles', [99]),
-                  [ 'controller' => 'external_identity_roles',
-                    'action' => 'index',
-                    '?' => $linkFilter
-                  ],
-                  ['class' => $linkClass]
-                );
-              ?>
-            </li>
-          <?php endif; ?>
-        <?php endif; ?>
-        <li class="list-inline-item">
+  <!-- Top-Level Subnavigation Tabs -->  
+  <nav id="cm-<?= $name ?>-subnav-tabs" class="cm-subnav-tabs">
+    <ul class="nav nav-tabs">
+  
+      <?php if($name == 'person'): ?>      
+        <!-- Person Subnavigation -->
+        <?php
+          // Simplify our tests for roles and external identifiers
+          $isPersonRole = (
+            $vv_primary_link == 'person_role_id'
+            || $vv_primary_link == 'person_role_id'
+            || ($curController == 'PersonRoles' && ($curAction == 'edit' || $curAction == 'view'))
+          ) ? true : false;
+  
+          $isExternalIdRole = (
+            $vv_primary_link == 'external_identity_role_id'
+            || ($curController == 'ExternalIdentityRoles' && ($curAction == 'edit' || $curAction == 'view'))
+          ) ? true : false;
+  
+          $isExternalId = (
+            $vv_primary_link == 'external_identity_id'
+            || $vv_primary_link == 'external_identity_role_id'
+            || ($curController == 'ExternalIdentities' && ($curAction == 'edit' || $curAction == 'view'))
+            || ($curController == 'ExternalIdentityRoles' && ($curAction == 'edit' || $curAction == 'view'))
+          ) ? true : false;
+          
+          // Determine active tab. This logic is necessitated by MVEAs (that are displayed in multiple contexts).
+          $isCanvasTab = ($active == 'canvas') ? true : false;
+          
+          $isPersonTab = (
+            $active == 'person' 
+            && !$isPersonRole
+            && !$isExternalId
+          ) ? true : false;
+          
+          $isRolesTab = (
+            $active == 'person_roles'
+            || $isPersonRole
+            && !$isExternalId
+          ) ? true : false;
+          
+          $isExternalIdentitiesTab = (
+            $active == 'external_identities' 
+            || $isExternalId
+          ) ? true : false;
+  
+          $isGroupsTab = ($active == 'groups') ? true : false;
+        ?>
+        
+        <li class="nav-item">
+          <?php
+            $linkClass = $isCanvasTab ? 'nav-link active' : 'nav-link';
+            print $this->Html->link(
+              __d('menu', 'overview'),
+              [ 'controller' => 'people',
+                'action' => 'canvas',
+                $curId
+              ],
+              ['class' => $linkClass]
+            );
+          ?>
+        </li>
+        <li class="nav-item">
+          <?php
+            $linkClass = $isPersonTab ? 'nav-link active' : 'nav-link';
+            print $this->Html->link(
+              __d('controller', 'People', [1]),
+              [ 'controller' => 'people',
+                'action' => 'edit',
+                $curId
+              ],
+              ['class' => $linkClass]
+            );
+          ?>
+        </li>
+        <li class="nav-item">
           <?php
-            // Ad-Hoc Attributes
-            $linkClass = ($subActive == 'ad_hoc_attributes' && !($isExternalIdRole)) ? 'nav-link active' : 'nav-link';
+            $linkClass = $isRolesTab ? 'nav-link active' : 'nav-link';
             print $this->Html->link(
-              __d('controller', 'AdHocAttributes', [99]),
-              [ 'controller' => 'ad_hoc_attributes',
+              __d('controller', 'PersonRoles', [99]),
+              [ 'controller' => 'person_roles',
                 'action' => 'index',
                 '?' => $linkFilter
               ],
@@ -365,13 +333,12 @@
             );
           ?>
         </li>
-        <li class="list-inline-item">
+        <li class="nav-item">
           <?php
-            // Addresses
-            $linkClass = ($subActive == 'addresses' && !($isExternalIdRole)) ? 'nav-link active' : 'nav-link';
+            $linkClass = $isExternalIdentitiesTab ? 'nav-link active' : 'nav-link';
             print $this->Html->link(
-              __d('controller', 'Addresses', [99]),
-              [ 'controller' => 'addresses',
+              __d('controller', 'ExternalIdentities', [99]),
+              [ 'controller' => 'external-identities',
                 'action' => 'index',
                 '?' => $linkFilter
               ],
@@ -379,13 +346,15 @@
             );
           ?>
         </li>
-        <li class="list-inline-item">
+        <?php 
+        /* XXX Groups tab placeholder - Keep for now. A group listing may only need to 
+           exist on the Overview tab.
+        <li class="nav-item">
           <?php
-            // Telephone Numbers
-            $linkClass = ($subActive == 'telephone_numbers' && !($isExternalIdRole)) ? 'nav-link active' : 'nav-link';
+            $linkClass = $isGroupsTab ? 'nav-link active' : 'nav-link';
             print $this->Html->link(
-              __d('controller', 'TelephoneNumbers', [99]),
-              [ 'controller' => 'telephone_numbers',
+              __d('controller', 'Groups', [99]),
+              [ 'controller' => 'groups',
                 'action' => 'index',
                 '?' => $linkFilter
               ],
@@ -393,85 +362,203 @@
             );
           ?>
         </li>
-        <?php if(!$isPersonRole): ?>
-          <li class="list-inline-item">
-            <?php
-              // URLs
-              $linkClass = ($subActive == 'urls') ? 'nav-link active' : 'nav-link';
-              print $this->Html->link(
-                __d('controller', 'Urls', [99]),
-                [ 'controller' => 'urls',
-                  'action' => 'index',
-                  '?' => $linkFilter
-                ],
-                ['class' => $linkClass]
-              );
-            ?>
-          </li>
-          <li class="list-inline-item">
-            <?php
-              // Pronouns
-              $linkClass = ($subActive == 'pronouns') ? 'nav-link active' : 'nav-link';
-              print $this->Html->link(
-                __d('controller', 'Pronouns', [99]),
-                [ 'controller' => 'pronouns',
-                  'action' => 'index',
-                  '?' => $linkFilter
-                ],
-                ['class' => $linkClass]
-              );
-            ?>
-          </li>
-        <?php endif; ?>
-      <?php endif; ?>
+        */ ?>
+      <?php endif; // person ?>
+      
+      <?php if ($name == 'group'): ?>
+      <!-- Group Subnavigation -->
+        <li class="nav-item">
+          <?php
+            $linkClass = ($active == 'properties') ? 'nav-link active' : 'nav-link';
+            print $this->Html->link(
+              __d('controller', 'Properties', [99]),
+              [ 'controller' => 'groups',
+                'action' => 'edit',
+                $curId
+              ],
+              ['class' => $linkClass]
+            );
+          ?>
+        </li>
+        <li class="nav-item">
+          <?php
+            $linkClass = ($active == 'members') ? 'nav-link active' : 'nav-link';
+            print $this->Html->link(
+              __d('controller', 'Members', [99]),
+              [ 'controller' => 'group_members',
+                'action' => 'index',
+                '?' => $linkFilter
+              ],
+              ['class' => $linkClass]
+            ); 
+          ?>
+        </li>
+        <li class="nav-item">
+          <?php
+            $linkClass = ($active == 'owners') ? 'nav-link active' : 'nav-link';
+            print $this->Html->link(
+              __d('controller', 'Owners', [99]),
+              [ 'controller' => 'group_owners',
+                'action' => 'index',
+                '?' => $linkFilter
+              ],
+              ['class' => $linkClass]
+            );
+          ?>
+        </li>
+        <li class="nav-item">
+          <?php
+            $linkClass = ($active == 'nestings') ? 'nav-link active' : 'nav-link';
+            print $this->Html->link(
+              __d('controller', 'Nestings', [99]),
+              [ 'controller' => 'group_nestings',
+                'action' => 'index',
+                '?' => $linkFilter
+              ],
+              ['class' => $linkClass]
+            );
+          ?>
+        </li>
+      <?php endif; // group ?>
     </ul>
   </nav>
-  
-  <?php if($isExternalIdRole): ?>
-  <!-- Third-level subnavigation links - only for External Identity Roles  -->
-    <div id="external-id-role">
-      <h3>
-        <?php 
-          // Set the link filter for External Identity Roles
-          $curId = $vv_primary_link_obj->id;
-          if(!empty($vv_obj) && ($curController == 'ExternalIdentityRoles' && ($curAction == 'edit' || $curAction == 'view'))) {
-            $curId = $vv_obj->id;  
-          }
-          $linkFilter = ['external_identity_role_id' => $curId];
-          
-          if(!empty($vv_ei_role)) {
-            print $vv_ei_role;
-          } elseif(!empty($vv_obj->title)) {
+    
+  <?php if(!empty($subActive) && !($curController == 'PersonRoles' && $curAction == 'add')): ?>
+  <!-- Second Level Subnavigation Links -->
+    <?php
+      $curId = $this->request->getQuery($vv_primary_link);
+      if($isPersonRole || $isExternalId) {
+        if($isExternalId && !empty($vv_ei_id)) {
+          $curId = $vv_ei_id;
+        }
+        // We display the role or external identity name above the subnav to show the hierarchy.
+        // We also use this structure to set the second-level $linkFilter
+        print '<h2>';
+        if(!empty($vv_ei_name)) {
+          // We have an external identity name
+          print $vv_ei_name->full_name;
+          $linkFilter = ['external_identity_id' => $curId];
+        } elseif(!empty($vv_person_role)) {
+          // We have a person role
+          print $vv_person_role;
+          $linkFilter = ['person_role_id' => $curId];
+        } elseif(!empty($vv_obj)) {
+          // We are editing/viewing an object
+          if(!empty($vv_obj->title)) {
             print $vv_obj->title;
+          } elseif (!empty($vv_subtitle)) {
+            print $vv_subtitle;
           } else {
-            // As above, we shouldn't get here, but have a deafult in case.
-            print __d('information','global.title.none');
+            print print __d('information','global.title.none');
+          }
+          // Set up $linkFilter for edit/view on Roles and External Identities
+          $curId = $vv_obj->id;
+          if($curController == 'PersonRoles') {
+            $linkFilter = ['person_role_id' => $curId];
+          }
+          if($curController == 'ExternalIdentities') {
+            $linkFilter = ['external_identity_id' => $curId];
           }
-        ?>  
-      </h3>
-      <nav id="external-id-role-nav" class="cm-subnav-links">
-        <ul class="list-inline">
+        } else {
+          // We shouldn't get here, but have a deafult in case.
+          print __d('information','global.title.none');
+        }
+        print '</h2>'; 
+      }
+    ?>
+    <nav id="cm-<?= $name ?>-subnav-links" class="cm-subnav-links">
+      <ul class="list-inline">
+        <?php if($name == 'person'): ?>
           <li class="list-inline-item">
             <?php
               // Properties
-              $linkClass = (
-                $curController == 'ExternalIdentityRoles' 
-                && ($curAction == 'edit' || $curAction == 'view')
-              ) ? 'nav-link active' : 'nav-link';
+              $cc = 'people';
+              $cid = $curId;
+              if($isPersonRole) {
+                $cc = 'person-roles';
+                $cid = !empty($vv_person_role_id) ? $vv_person_role_id : $curId;
+              }
+              if($isExternalId) {
+                $cc = 'external-identities';
+                if(!empty($vv_ei_id)) {
+                  $cid = $vv_ei_id;  
+                }
+              }
+              $linkClass = ($subActive == 'properties') ? 'nav-link active' : 'nav-link';
               print $this->Html->link(
                 __d('controller', 'Properties', [99]),
-                [ 'controller' => 'external-identity-roles',
+                [ 'controller' => $cc,
                   'action' => 'edit',
-                  $curId
+                  $cid
                 ],
                 ['class' => $linkClass]
               );
             ?>
           </li>
+          <?php if(!$isPersonRole): ?>
+            <li class="list-inline-item">
+              <?php
+                // Names
+                $linkClass = ($subActive == 'names') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'Names', [99]),
+                  [ 'controller' => 'names',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+            <li class="list-inline-item">
+              <?php
+                // Email Addresses
+                $linkClass = ($subActive == 'email_addresses') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'EmailAddresses', [99]),
+                  [ 'controller' => 'email_addresses',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>  
+            </li>
+            <li class="list-inline-item">
+              <?php
+                // Identifiers
+                $linkClass = ($subActive == 'identifiers') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'Identifiers', [99]),
+                  [ 'controller' => 'identifiers',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+            <?php if($isExternalId): ?>
+              <li class="list-inline-item">
+                <?php
+                  // External Identity Roles
+                  $linkClass = ($subActive == 'external_identity_roles' ||  $isExternalIdRole) ? 'nav-link active' : 'nav-link';
+                  print $this->Html->link(
+                    __d('controller', 'ExternalIdentityRoles', [99]),
+                    [ 'controller' => 'external_identity_roles',
+                      'action' => 'index',
+                      '?' => $linkFilter
+                    ],
+                    ['class' => $linkClass]
+                  );
+                ?>
+              </li>
+            <?php endif; ?>
+          <?php endif; ?>
           <li class="list-inline-item">
             <?php
               // Ad-Hoc Attributes
-              $linkClass = ($subActive == 'ad_hoc_attributes') ? 'nav-link active' : 'nav-link';
+              $linkClass = ($subActive == 'ad_hoc_attributes' && !($isExternalIdRole)) ? 'nav-link active' : 'nav-link';
               print $this->Html->link(
                 __d('controller', 'AdHocAttributes', [99]),
                 [ 'controller' => 'ad_hoc_attributes',
@@ -485,7 +572,7 @@
           <li class="list-inline-item">
             <?php
               // Addresses
-              $linkClass = ($subActive == 'addresses') ? 'nav-link active' : 'nav-link';
+              $linkClass = ($subActive == 'addresses' && !($isExternalIdRole)) ? 'nav-link active' : 'nav-link';
               print $this->Html->link(
                 __d('controller', 'Addresses', [99]),
                 [ 'controller' => 'addresses',
@@ -499,7 +586,7 @@
           <li class="list-inline-item">
             <?php
               // Telephone Numbers
-              $linkClass = ($subActive == 'telephone_numbers') ? 'nav-link active' : 'nav-link';
+              $linkClass = ($subActive == 'telephone_numbers' && !($isExternalIdRole)) ? 'nav-link active' : 'nav-link';
               print $this->Html->link(
                 __d('controller', 'TelephoneNumbers', [99]),
                 [ 'controller' => 'telephone_numbers',
@@ -510,8 +597,127 @@
               );
             ?>
           </li>
-        </ul>  
-      </nav>
-    </div>
-  <?php endif; ?>
-<?php endif; ?>
\ No newline at end of file
+          <?php if(!$isPersonRole): ?>
+            <li class="list-inline-item">
+              <?php
+                // URLs
+                $linkClass = ($subActive == 'urls') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'Urls', [99]),
+                  [ 'controller' => 'urls',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+            <li class="list-inline-item">
+              <?php
+                // Pronouns
+                $linkClass = ($subActive == 'pronouns') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'Pronouns', [99]),
+                  [ 'controller' => 'pronouns',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+          <?php endif; ?>
+        <?php endif; // person subnav ?>
+      </ul>
+    </nav>
+    
+    <?php if($isExternalIdRole): ?>
+    <!-- Third-level subnavigation links - only for External Identity Roles  -->
+      <div id="external-id-role">
+        <h3>
+          <?php 
+            // Set the link filter for External Identity Roles
+            $curId = $vv_primary_link_obj->id;
+            if(!empty($vv_obj) && ($curController == 'ExternalIdentityRoles' && ($curAction == 'edit' || $curAction == 'view'))) {
+              $curId = $vv_obj->id;  
+            }
+            $linkFilter = ['external_identity_role_id' => $curId];
+            
+            if(!empty($vv_ei_role)) {
+              print $vv_ei_role;
+            } elseif(!empty($vv_obj->title)) {
+              print $vv_obj->title;
+            } else {
+              // As above, we shouldn't get here, but have a deafult in case.
+              print __d('information','global.title.none');
+            }
+          ?>  
+        </h3>
+        <nav id="external-id-role-nav" class="cm-subnav-links">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <?php
+                // Properties
+                $linkClass = (
+                  $curController == 'ExternalIdentityRoles' 
+                  && ($curAction == 'edit' || $curAction == 'view')
+                ) ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'Properties', [99]),
+                  [ 'controller' => 'external-identity-roles',
+                    'action' => 'edit',
+                    $curId
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+            <li class="list-inline-item">
+              <?php
+                // Ad-Hoc Attributes
+                $linkClass = ($subActive == 'ad_hoc_attributes') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'AdHocAttributes', [99]),
+                  [ 'controller' => 'ad_hoc_attributes',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+            <li class="list-inline-item">
+              <?php
+                // Addresses
+                $linkClass = ($subActive == 'addresses') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'Addresses', [99]),
+                  [ 'controller' => 'addresses',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+            <li class="list-inline-item">
+              <?php
+                // Telephone Numbers
+                $linkClass = ($subActive == 'telephone_numbers') ? 'nav-link active' : 'nav-link';
+                print $this->Html->link(
+                  __d('controller', 'TelephoneNumbers', [99]),
+                  [ 'controller' => 'telephone_numbers',
+                    'action' => 'index',
+                    '?' => $linkFilter
+                  ],
+                  ['class' => $linkClass]
+                );
+              ?>
+            </li>
+          </ul>  
+        </nav>
+      </div>
+    <?php endif; // external identity 2nd level subnav ?>
+  <?php endif; // 2nd level subnav ?>
+</div>
+  
\ No newline at end of file
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 02adf08b..4e38b78d 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -617,6 +617,13 @@ ul.form-list li.alert-banner .co-alert {
 /* SUBNAVIGATION & TABS */
 .supertitle {
   padding: 1em 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1em;
+}
+.supertitle .person-status-badge {
+  margin: 0;
 }
 #subnavigation nav {
   padding: 0.5em 0;
@@ -1008,15 +1015,51 @@ table.index-table .form-check {
 :-moz-placeholder {
   opacity: 0.2;
 }
+/* PERSON CANVAS / CARDS */
+#person-actions {
+  display: flex;
+}
+#person-actions .action-menu-toggle {
+  white-space: nowrap;
+}
+#person-canvas-attributes,
+#person-canvas-attributes-js {
+  margin-top: 0;
+  margin-bottom: 2em;
+}
+#person-canvas-attributes-js .badge {
+  margin-right: 0.5em;
+}
+#person-canvas-attributes-js .canvas-url-link {
+  margin-left: 1em;
+}
+#person-canvas-roles {
+  margin-bottom: 2em;
+}
+h2.card-title {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  line-height: 2rem;
+}
+h2.card-title a {
+  display: block;
+  color: var(--cmg-color-gray-002);
+}
+#main h2.card-title a:hover {
+  text-decoration: none;
+}
+.field-data-container .id-col {
+  text-align: right;
+  padding-right: 1em;
+  color: var(--cmg-color-gray-003);
+  font-size: 0.8em;
+}
 /* DATA LISTS */
-/*** ul.data-list is the main structure for representing data
-in which the field value is to the left, and actions on that
-value are to the right; this is used for canvases and explorers
-where the fields require no (or few) labels.
-see also ul.form-list below. ***/
+ul.data-list {
+  padding-left: 0;
+}
 ul.data-list li {
-  margin: 0 0 2px !important;
-  overflow: hidden;
+  margin: 0 0 2px;
   padding: 2px 0 3px 0;
   background-color: var(--cmg-color-lightgray-003);
 }
@@ -1027,11 +1070,7 @@ ul.data-table li {
   background-color: unset;
 }
 .field-data {
-  float: left;
-  padding: 4px 0 0 10px;
-}
-.field-data-alone {
-  padding: 2px 0 2px 10px;
+  padding: 0.25em 0.75em;
 }
 /* FORMS */
 label {
@@ -1128,6 +1167,8 @@ ul.form-list li.field-stack .field-info {
 }
 ul.form-list textarea {
   font-size: 0.9em;
+  width: 100%;
+  height: 4em;
 }
 ul.form-list li.field-stack textarea {
   margin: 0;
@@ -1308,6 +1349,9 @@ ul.form-list .cm-time-picker-vals li {
 p {
   margin: 0 0 1em;
 }
+address {
+  margin-bottom: 0;
+}
 .fieldTitle {
   font-weight: bold;
 }
@@ -1327,6 +1371,22 @@ p {
 .vtop {
   vertical-align: top !important;
 }
+.force-wrap {
+  overflow-wrap: anywhere;
+}
+.text-muted-cmg {
+  color: var(--cmg-color-gray-003) !important;
+}
+.cm-id-display {
+  margin-left: 1em;
+  font-size: 0.9em;
+}
+.smaller {
+  font-size: smaller;
+}
+.invalid-feedback {
+  font-size: 1em;
+}
 .warn-level-a,
 .warn-level-a td {
   background-color: var(--cmg-color-red-001);
@@ -1576,28 +1636,29 @@ table.list-mode .read-only-link-container {
 }
 /*Bootstrap badge*/
 .badge {
-  font-size: 0.95em;
   font-weight: normal;
   height: min-content;
   margin-top: auto;
   margin-bottom: auto;
+  line-height: 1.2em;
 }
-.bg-secondary,
-.bg-success,
-.bg-danger,
-.bg-warning,
-.bg-info,
-.bg-light,
-.bg-dark,
-.bg-primary {
-  border: 1px solid transparent;
+.bg-light {
+  color: var(--cmg-color-gray-004);
+}
+.bg-danger {
+  color: var(--cmg-color-white);
+  background-color: var(--cmg-color-red-005);
 }
 .bg-warning {
-  background-color: var(--cmg-color-yellow-001);
+  background-color: var(--cmg-color-yellow-001) !important;
+  color: var(--cmg-color-yellow-002);
 }
 .bg-primary {
   background-color: var(--cmg-color-blue-002);
 }
+.badge.bg-primary {
+  background-color: var(--cmg-color-blue-002) !important;
+}
 .bg-secondary {
   background-color: var(--cmg-color-gray-002);
 }
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 29232fe2..b957c7f8 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -36,6 +36,11 @@
     right: unset;
     transform: translate(-95%,0);
   }
+  .supertitle-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
 /* SMALL */
@@ -94,6 +99,15 @@
   ul.form-list li.field-stack textarea {
     margin: 0.5em 0 0.5em 0.5em;
   }
+  /* PERSON CANVAS / CARDS */
+  .co-cards .field-data-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+  #person-canvas-roles .field-data-container {
+    grid-template-columns: 1fr 1fr 2fr auto;
+  }
   /* PAGINATION */
   #pagination {
     text-align: left;
diff --git a/app/webroot/js/comanage/comanage.js b/app/webroot/js/comanage/comanage.js
index a928fa43..3bfa27fa 100644
--- a/app/webroot/js/comanage/comanage.js
+++ b/app/webroot/js/comanage/comanage.js
@@ -211,3 +211,74 @@ function clearTopSearch(formObj) {
   }
   formObj.submit();
 }
+
+/**
+ * COmanage Registry API AJAX Calls: general function for making an ajax call to Registry API v.2
+ * @param url              {string} API Url
+ * @param method           {string} HTTP Method (GET, POST, PUT, DELETE)
+ * @param dataType         {string} Data type (json, html)
+ * @param data             {Object} [POST or PUT data in JSON]
+ * @param successCallback  {string} [Name of the callback function for success]
+ * @param entityId         {string} [ID used to identify an entity in the DOM]
+ * @param failureCallback  {string} [Name of the callback function for failure]
+ * @param alwaysCallback   {string} [Name of the callback function for always]
+ */
+function callRegistryAPI(
+  url, 
+  method, 
+  dataType,  
+  successCallback= undefined, 
+  failureCallback= undefined,
+  data = undefined,
+  alwaysCallback = undefined,
+  entityId= undefined
+) {
+  var apiUrl = url;
+  var httpMethod = method;
+  var dataType = dataType;
+  var successCallback = successCallback;
+  var failureCallback = failureCallback;
+  var data = data;
+  var alwaysCallback = alwaysCallback;
+  var entityId = entityId;
+  
+  if(data === undefined) {
+    data = '';
+  }
+
+  if(entityId === undefined) {
+    entityId = '';
+  }
+
+  var xhr = $.ajax({
+    url: apiUrl,
+    method: httpMethod,
+    dataType: dataType,
+    headers: {
+      "Authorization": "Basic " + btoa("co_1.xhruser:vkam-9163-jwjp-4732")
+    },
+    data: data,
+    encode: true
+  })
+    .done(function() {
+      if(successCallback != undefined) {
+        successCallback(xhr, entityId);
+      } else {
+        return xhr;
+      }
+    })
+    .fail(function() {
+      if(failureCallback != undefined) {
+        failureCallback(xhr, entityId);
+      } else {
+        return xhr;
+      }
+    })
+    .always(function() {
+      if(alwaysCallback != undefined) {
+        alwaysCallback(xhr, entityId);
+      } else {
+        return xhr;
+      }
+    });
+}
diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
new file mode 100644
index 00000000..053c920e
--- /dev/null
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -0,0 +1,122 @@
+/**
+ * COmanage Registry MVEA Component JavaScript
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+export default {
+  props: {
+    mvea: Object,
+    core: Object,
+    txt: Object
+  },
+  template: `
+    <!-- Names -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'names'">
+      <div class="field-data force-wrap">
+        <!-- XXX The following must be fixed after discussion of what we will return from the API. The output 
+             can either be properly assembled here (all name components, proper order) or the API can return 
+             a display name. The latter would be best. -->
+        <a href="#" class="nospin">{{ this.mvea.given }} {{ this.mvea.family }}</a>                                              
+      </div>
+      <div class="field-data data-label">
+        <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt.primary }}</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+    <!-- Email Addresses -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'email_addresses'">
+      <div class="field-data force-wrap">
+        <a href="#" class="nospin">{{ this.mvea.mail }}</a>                                              
+      </div>
+      <div class="field-data data-label">
+        <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt.unverified }}</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+    <!-- Identifiers -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'identifiers'">
+      <div class="field-data force-wrap">
+        <a href="#" class="nospin">{{ this.mvea.identifier }}</a>                                              
+      </div>
+      <div class="field-data data-label">
+        <span v-if="this.mvea.login" class="mr-1 badge bg-outline-secondary login">{{ this.txt.login }}</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+    <!-- Ad Hoc Attributes -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'ad_hoc_attributes'">
+      <div class="field-data force-wrap">
+        <a href="#" class="nospin">{{ this.mvea.value != '' ? this.mvea.value : this.txt.none }}</a>                                              
+      </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>
+    <!-- Addresses -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'addresses'">
+      <div class="field-data force-wrap">
+        <address>
+          <a href="#" class="nospin">{{ this.mvea.room }} {{ this.mvea.street }}</a>
+          <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">
+            <br>{{ this.mvea.postal_code }} {{ this.mvea.country }}
+          </span>
+        </address>                                                
+      </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+    <!-- Telephone Numbers -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'telephone_numbers'">
+      <div class="field-data force-wrap">
+        <a href="#" class="nospin">{{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ this.mvea.number }}</a>                                              
+      </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+    <!-- Urls -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'urls'">
+      <div class="field-data force-wrap">
+        <a href="#">{{ this.mvea.description != '' ? this.mvea.description : this.mvea.url }}</a>   
+        <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt.visit"><span class="material-icons">north_east</span></a>                                      
+      </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+    <!-- Pronouns -->
+    <li class="field-data-container" v-if="this.core.mveaType == 'pronouns'">
+      <div class="field-data force-wrap">
+        <a href="#" class="nospin">{{ this.mvea.type_id }}</a>                                              
+      </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
+      </div>
+    </li>
+  `
+}
\ No newline at end of file
diff --git a/app/webroot/js/comanage/components/mvea/mveas.js b/app/webroot/js/comanage/components/mvea/mveas.js
new file mode 100644
index 00000000..6e60fc27
--- /dev/null
+++ b/app/webroot/js/comanage/components/mvea/mveas.js
@@ -0,0 +1,83 @@
+/**
+ * COmanage Registry MVEA Component JavaScript
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+import MveaItem from './mvea-item.js';
+
+export default {
+  props: {
+    mveas: Object,
+    core: Object,
+    txt: Object
+  },
+  components: {
+    MveaItem
+  },
+  data() {
+    return {
+      mveaTypeLookup: ''
+    }
+  },
+  computed: {
+    mveaModel: function() {
+      switch(this.core.mveaType) {
+        case 'names':
+          return this.mveas.Names;
+          break;
+        case 'email_addresses':
+          return this.mveas.EmailAddresses;
+          break;  
+        case 'identifiers':
+          return this.mveas.Identifiers;
+          break;
+        case 'ad_hoc_attributes':
+          return this.mveas.AdHocAttributes;
+          break;
+        case 'addresses':
+          return this.mveas.Addresses;
+          break;
+        case 'telephone_numbers':
+          return this.mveas.TelephoneNumbers;
+          break;
+        case 'urls':
+          return this.mveas.Urls;
+          break;
+        case 'pronouns':
+          return this.mveas.Pronouns;
+          break;
+      }
+    }
+  },
+  template: `
+    <ul class="cm-mvea fields data-list">
+      <mvea-item 
+        :txt="this.txt"
+        :core="this.core"
+        v-for='mvea in mveaModel'
+        :mvea="mvea">
+      </mvea-item>
+    </ul>
+  `
+}
\ No newline at end of file