diff --git a/client/src/views/email/fields/compose-from-address.js b/client/src/views/email/fields/compose-from-address.js
index f43dbe9b21..84bf029447 100644
--- a/client/src/views/email/fields/compose-from-address.js
+++ b/client/src/views/email/fields/compose-from-address.js
@@ -30,6 +30,8 @@ define('views/email/fields/compose-from-address', ['views/fields/base'], functio
 
     return Dep.extend({
 
+        detailTemplate: 'email/fields/email-address-varchar/detail',
+
         editTemplate: 'email/fields/compose-from-address/edit',
 
         data: function () {
@@ -52,7 +54,74 @@ define('views/email/fields/compose-from-address', ['views/fields/base'], functio
         setup: function () {
             Dep.prototype.setup.call(this);
 
+            this.nameHash = {...(this.model.get('nameHash') || {})};
+            this.typeHash = this.model.get('typeHash') || {};
+            this.idHash = this.model.get('idHash') || {};
+
             this.list = this.getUser().get('emailAddressList') || [];
         },
+
+        getValueForDisplay: function () {
+            if (this.isDetailMode()) {
+                let address = this.model.get(this.name);
+
+                return this.getDetailAddressHtml(address);
+            }
+
+            return Dep.prototype.getValueForDisplay.call(this);
+        },
+
+        getDetailAddressHtml: function (address) {
+            if (!address) {
+                return '';
+            }
+
+            let name = this.nameHash[address] || null;
+
+            let entityType = this.typeHash[address] || null;
+            let id = this.idHash[address] || null;
+
+            if (id && name) {
+                return $('<div>')
+                    .append(
+                        $('<a>')
+                            .attr('href', `#${entityType}/view/${id}`)
+                            .attr('data-scope', entityType)
+                            .attr('data-id', id)
+                            .text(name),
+                        ' ',
+                        $('<span>').addClass('text-muted chevron-right'),
+                        ' ',
+                        $('<span>').text(address)
+                    )
+                    .get(0).outerHTML;
+            }
+
+            let $div = $('<div>');
+
+            if (name) {
+                $div.append(
+                    $('<span>')
+                        .addClass('email-address-line')
+                        .text(name)
+                        .append(
+                            ' ',
+                            $('<span>').addClass('text-muted chevron-right'),
+                            ' ',
+                            $('<span>').text(address)
+                        )
+                );
+
+                return $div.get(0).outerHTML;
+            }
+
+            $div.append(
+                $('<span>')
+                    .addClass('email-address-line')
+                    .text(address)
+            )
+
+            return $div.get(0).outerHTML;
+        },
     });
 });