diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
index 4d4dc64f3..5d8995a1f 100644
--- a/app/resources/locales/en_US/menu.po
+++ b/app/resources/locales/en_US/menu.po
@@ -213,6 +213,9 @@ msgstr "Toggle menu collapse button"
 msgid "options"
 msgstr "Options"
 
+msgid "person.canvas"
+msgstr "Person Canvas"
+
 msgid "registries"
 msgstr "Available {0} Registries"
 
diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po
index 41d24fec4..17babc823 100644
--- a/app/resources/locales/en_US/operation.po
+++ b/app/resources/locales/en_US/operation.po
@@ -57,6 +57,9 @@ msgstr "show more"
 msgid "autocomplete.people.desc"
 msgstr "Begin typing to find a person (use at least {0} characters from a name, email address, or identifier)"
 
+msgid "autocomplete.people.field.desc"
+msgstr "Begin typing to find a person (use characters from a name, email address, or identifier)"
+
 msgid "autocomplete.people.label"
 msgstr "Search for a person"
 
diff --git a/app/src/View/Helper/VueHelper.php b/app/src/View/Helper/VueHelper.php
index c3b73f4c7..3e5043d3f 100644
--- a/app/src/View/Helper/VueHelper.php
+++ b/app/src/View/Helper/VueHelper.php
@@ -69,18 +69,25 @@ class VueHelper extends Helper {
       'report.for',
       'value.copied',
     ],
+    'menu' => [
+      'person.canvas'
+    ],
     'operation' => [
       'add',
       'add.member',
       'add.owner',
       'autocomplete.pager.show.more',
       'autocomplete.people.desc',
+      'autocomplete.people.field.desc',
       'autocomplete.people.label',
       'autocomplete.people.placeholder',
       'close',
       'copy',
       'copy.value',
+      'edit',
       'primary',
+      'remove',
+      'view',
       'visit.link',
     ],
     'result' => [
diff --git a/app/templates/element/peopleAutocomplete.php b/app/templates/element/peopleAutocomplete.php
index af361178d..8ef1971ed 100644
--- a/app/templates/element/peopleAutocomplete.php
+++ b/app/templates/element/peopleAutocomplete.php
@@ -90,7 +90,10 @@
           },
           formParams: <?= json_encode($formParams ?? []) ?>,
         },
-        error: ''
+        error: '',
+        core: {
+          webroot: '<?= $this->request->getAttribute('webroot') ?>'
+        }
       }
     },
     components: {
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 44a9d5782..4763a35f1 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1821,9 +1821,15 @@ ul.form-list .cm-time-picker-vals li {
   text-decoration: underline;
   background-color: var(--cmg-color-bg-002);
 }
-.cm-ac-change-btn {
-  padding: 0.25em 0.5em !important;
-  margin-left: 1em;
+.cm-ac-input-group > div {
+  flex-grow: 1;
+}
+.cm-ac-link-to-person {
+  gap: 0.25em;
+  color: var(--cmg-color-link);
+}
+#main .cm-ac-link-to-person:hover {
+  text-decoration: none;
 }
 .item-with-type {
   display: grid;
diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
index c1b7f0452..bdc5f90fd 100644
--- a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
+++ b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -44,6 +44,7 @@ export default {
       people: [],
       rawData: [],
       person: '',
+      personUrl: '',
       identifierType: {},
       emailType: {},
       loading: false,
@@ -193,7 +194,7 @@ export default {
     },
     setPerson() {
       if(['default', 'field'].includes(this.options.type)) {
-        this.options.inputProps.dataPersonid = this.person.value
+        this.options.inputProps.dataPersonid = this.person.value;
       } else {
         // The picker is stand-alone, and should render the configured page in a modal on @item-select
         const urlForModal = this.options.actionUrl + '&person_id=' + this.person.value;
@@ -248,7 +249,8 @@ export default {
     if(this.options.inputValue != undefined
       && this.options.inputValue != ''
       && this.options.inputProps.name.endsWith('person_id')) {
-      this.person = `${this.options.formParams?.fullName} (ID: ${this.options.inputValue})`
+      this.person = `${this.options.formParams?.fullName} (ID: ${this.options.inputValue})`;
+      this.personUrl = `${this.core.webroot}people/edit/${this.options.inputValue}`;
     }
   },
   computed: {
@@ -284,85 +286,85 @@ export default {
     }
   },
   template: `
-    <div class="cm-autocomplete-container" v-if="this.options.inputProps.dataPersonid">
-      <a href="#">{{ this.options.inputProps.name }}</a>
-      <button class="btn btn-primary btn-sm cm-ac-change-btn">change</button>
-    </div>
-    <div class="cm-autocomplete-container" v-else>
       <label v-if="hasAutoCompleteLabel" class="mr-2" :for="this.options.htmlId">{{ this.autoCompleteLabel }}</label>
       <MiniLoader :isLoading="loading" :classes="getMiniLoaderClasses"/>
-      
-      <AutoComplete 
-        v-model="person"
-        inputClass="cm-autocomplete"
-        :inputId="this.options.htmlId"
-        :inputProps="this.options.inputProps"
-        :placeholder="this.txt['operation.autocomplete.people.placeholder']"
-        panelClass="cm-autocomplete-panel"
-        optionLabel="label"
-        optionDisabled="isMember"
-        :minLength="this.options.minLength"
-        :delay="500"
-        loadingIcon=null
-        :suggestions="this.people" 
-        forceSelection
-        @complete="searchPeople"
-        @show="calculateDisabled"
-        @keyup.arrow-down="onListNavigate"
-        @keyup.arrow-up="onListNavigate"
-        @item-select="setPerson">
-        <template #option="slotProps">
-          <div class="cm-ac-item">
-            <div class="cm-ac-item-primary">
-              <div class="cm-ac-name">
-                <!-- XXX The input field will be updated with the option.label value. Here we only need the full name -->
-                <span class="cm-ac-name-value" v-if="slotProps.option.isMember" v-html="slotProps.option.fullName"></span>
-                <span class="cm-ac-name-value" v-else v-html="this.highlightedquery(slotProps.option.fullName, query)"></span>
-                <span class="mr-1 badge bg-success" v-if="slotProps.option.isMember">{{ this.txt['controller.GroupMembers'] }}</span>
+      <div class="cm-ac-input-group input-group">
+        <AutoComplete 
+          v-model="person"
+          inputClass="cm-autocomplete"
+          :inputId="this.options.htmlId"
+          :inputProps="this.options.inputProps"
+          :placeholder="this.txt['operation.autocomplete.people.placeholder']"
+          panelClass="cm-autocomplete-panel"
+          optionLabel="label"
+          optionDisabled="isMember"
+          :minLength="this.options.minLength"
+          :delay="500"
+          loadingIcon=null
+          :suggestions="this.people" 
+          forceSelection
+          @complete="searchPeople"
+          @show="calculateDisabled"
+          @keyup.arrow-down="onListNavigate"
+          @keyup.arrow-up="onListNavigate"
+          @item-select="setPerson">
+          <template #option="slotProps">
+            <div class="cm-ac-item">
+              <div class="cm-ac-item-primary">
+                <div class="cm-ac-name">
+                  <!-- XXX The input field will be updated with the option.label value. Here we only need the full name -->
+                  <span class="cm-ac-name-value" v-if="slotProps.option.isMember" v-html="slotProps.option.fullName"></span>
+                  <span class="cm-ac-name-value" v-else v-html="this.highlightedquery(slotProps.option.fullName, query)"></span>
+                  <span class="mr-1 badge bg-success" v-if="slotProps.option.isMember">{{ this.txt['controller.GroupMembers'] }}</span>
+                </div>
+                <div class="cm-ac-item-id">
+                  ID: {{ slotProps.option.itemId }}
+                </div>
               </div>
-              <div class="cm-ac-item-id">
-                ID: {{ slotProps.option.itemId }}
+              <div class="cm-ac-subitems">
+                <div class="cm-ac-subitem cm-ac-email" v-if="slotProps.option.email">
+                  <span class="cm-ac-label" v-if="slotProps.option.emailLabel">{{ slotProps.option.emailLabel }}</span>
+                  <span class="cm-ac-value">
+                    <ItemWithType
+                      v-for="item in slotProps.option.email" 
+                      :item="item"
+                      kind="email"  
+                      :query="query"
+                      :highlightedquery="highlightedquery"
+                      :isMember="slotProps.option.isMember"
+                    />
+                  </span>
+                </div>
+                <div class="cm-ac-subitem cm-ac-id" v-if="slotProps.option.identifier">
+                  <span class="cm-ac-label" v-if="slotProps.option.identifierLabel">{{ slotProps.option.identifierLabel }}</span>
+                  <span class="cm-ac-value">
+                    <ItemWithType 
+                      v-for="item in slotProps.option.identifier"
+                      :query="query"
+                      :item="item"
+                      kind="identifier"
+                      :highlightedquery="highlightedquery"
+                      :isMember="slotProps.option.isMember"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
-            <div class="cm-ac-subitems">
-              <div class="cm-ac-subitem cm-ac-email" v-if="slotProps.option.email">
-                <span class="cm-ac-label" v-if="slotProps.option.emailLabel">{{ slotProps.option.emailLabel }}</span>
-                <span class="cm-ac-value">
-                  <ItemWithType
-                    v-for="item in slotProps.option.email" 
-                    :item="item"
-                    kind="email"  
-                    :query="query"
-                    :highlightedquery="highlightedquery"
-                    :isMember="slotProps.option.isMember"
-                  />
-                </span>
-              </div>
-              <div class="cm-ac-subitem cm-ac-id" v-if="slotProps.option.identifier">
-                <span class="cm-ac-label" v-if="slotProps.option.identifierLabel">{{ slotProps.option.identifierLabel }}</span>
-                <span class="cm-ac-value">
-                  <ItemWithType 
-                    v-for="item in slotProps.option.identifier"
-                    :query="query"
-                    :item="item"
-                    kind="identifier"
-                    :highlightedquery="highlightedquery"
-                    :isMember="slotProps.option.isMember"
-                  />
-                </span>
-              </div>
+          </template>
+          <template #footer="slotProps" v-if="hasMorePages">
+            <div class="cm-ac-pager">
+              <a href="#" @click="this.fetchMorePeople()">{{ this.txt['operation.autocomplete.pager.show.more'] }}</a>
             </div>
-          </div>
-        </template>
-        <template #footer="slotProps" v-if="hasMorePages">
-          <div class="cm-ac-pager">
-            <a href="#" @click="this.fetchMorePeople()">{{ this.txt['operation.autocomplete.pager.show.more'] }}</a>
-          </div>
-        </template>
-      </AutoComplete>
+          </template>
+        </AutoComplete>
+        <a v-if="this.person" :href="this.personUrl" class="input-group-text cm-ac-link-to-person">
+          <span class="material-symbols">person_check</span>
+          <span class="cm-ac-link-to-person-text">{{ this.txt['menu.person.canvas'] }}</span>
+        </a>
+      </div>
       <div v-if="this.options.type == 'field'" class="field-desc field-autocomplete-desc">
         <span class="material-symbols-outlined">info</span>
-        <span>{{ this.txt['operation.autocomplete.people.desc'] }}</span>
+        <span>{{ this.txt['operation.autocomplete.people.field.desc'] }}</span>
       </div>
     </div>
   `