diff --git a/packages/experiments-realm/address.gts b/packages/experiments-realm/address.gts
index 0cee00fa53..d640b9c18b 100644
--- a/packages/experiments-realm/address.gts
+++ b/packages/experiments-realm/address.gts
@@ -7,7 +7,7 @@ import {
 import StringField from 'https://cardstack.com/base/string';
 import { CountryField } from './country';
 import MapPinIcon from '@cardstack/boxel-icons/map-pin';
-import { EntityDisplay } from './components/entity-display';
+import EntityDisplayWithIcon from './components/entity-icon-display';
 
 function getAddressRows(
   addressLine1: string | undefined,
@@ -39,14 +39,11 @@ class Atom extends Component<typeof Address> {
     );
   }
   <template>
-    <EntityDisplay>
-      <:title>
-        {{this.label}}
-      </:title>
-      <:thumbnail>
+    <EntityDisplayWithIcon @title={{this.label}}>
+      <:icon>
         <MapPinIcon />
-      </:thumbnail>
-    </EntityDisplay>
+      </:icon>
+    </EntityDisplayWithIcon>
   </template>
 }
 
diff --git a/packages/experiments-realm/components/activity-card.gts b/packages/experiments-realm/components/activity-card.gts
index 76222830ea..b5277ff520 100644
--- a/packages/experiments-realm/components/activity-card.gts
+++ b/packages/experiments-realm/components/activity-card.gts
@@ -1,5 +1,5 @@
 import GlimmerComponent from '@glimmer/component';
-import { EntityDisplay } from './entity-display';
+import EntityDisplayWithThumbnail from './entity-thumbnail-display';
 
 interface ActivityCardArgs {
   Blocks: {
@@ -17,7 +17,7 @@ export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
     <article class='activity-card' ...attributes>
       <header class='activity-card-header'>
         <div class='activity-card-title-desc-group'>
-          <EntityDisplay>
+          <EntityDisplayWithThumbnail>
             <:title>
               <span class='activity-card-title'>
                 {{yield to='title'}}
@@ -28,7 +28,7 @@ export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
                 {{yield to='thumbnail'}}
               </span>
             </:thumbnail>
-          </EntityDisplay>
+          </EntityDisplayWithThumbnail>
 
           {{#if (has-block 'description')}}
             <p class='activity-card-description'>
diff --git a/packages/experiments-realm/components/contact-row.gts b/packages/experiments-realm/components/contact-row.gts
index 92b8f3e4c2..db8545180b 100644
--- a/packages/experiments-realm/components/contact-row.gts
+++ b/packages/experiments-realm/components/contact-row.gts
@@ -1,5 +1,5 @@
 import { Avatar, Pill } from '@cardstack/boxel-ui/components';
-import { EntityDisplay } from './entity-display';
+import EntityDisplayWithThumbnail from './entity-thumbnail-display';
 import GlimmerComponent from '@glimmer/component';
 
 interface ContactRowArgs {
@@ -15,10 +15,7 @@ interface ContactRowArgs {
 
 export class ContactRow extends GlimmerComponent<ContactRowArgs> {
   <template>
-    <EntityDisplay>
-      <:title>
-        {{@name}}
-      </:title>
+    <EntityDisplayWithThumbnail @title={{@name}}>
       <:thumbnail>
         <Avatar
           @userID={{@userID}}
@@ -35,7 +32,7 @@ export class ContactRow extends GlimmerComponent<ContactRowArgs> {
           </Pill>
         {{/if}}
       </:tag>
-    </EntityDisplay>
+    </EntityDisplayWithThumbnail>
     <style scoped>
       .avatar {
         --profile-avatar-icon-size: 20px;
diff --git a/packages/experiments-realm/components/entity-display.gts b/packages/experiments-realm/components/entity-display.gts
deleted file mode 100644
index 24aea981d9..0000000000
--- a/packages/experiments-realm/components/entity-display.gts
+++ /dev/null
@@ -1,93 +0,0 @@
-import GlimmerComponent from '@glimmer/component';
-interface EntityDisplayArgs {
-  Args: {
-    center?: boolean;
-    underline?: boolean;
-  };
-  Blocks: {
-    title: [];
-    thumbnail: [];
-    tag: [];
-    content: [];
-  };
-  Element: HTMLElement;
-}
-
-export class EntityDisplay extends GlimmerComponent<EntityDisplayArgs> {
-  get shouldAlignCenter() {
-    return this.args.center;
-  }
-
-  get shouldUnderlineText() {
-    return this.args.underline;
-  }
-
-  <template>
-    <div
-      class='entity-display {{if this.shouldAlignCenter "center"}}'
-      ...attributes
-    >
-      <div class='entity-thumbnail'>{{yield to='thumbnail'}}</div>
-
-      <div class='entity-info'>
-        <div class='entity-name-tag'>
-          <span class='entity-name {{if this.shouldUnderlineText "underline"}}'>
-            {{yield to='title'}}
-          </span>
-
-          {{yield to='tag'}}
-        </div>
-
-        <div class='entity-content'>
-          {{yield to='content'}}
-        </div>
-      </div>
-    </div>
-    <style scoped>
-      .entity-display {
-        display: inline-flex;
-        align-items: start;
-        gap: var(--entity-display-gap, var(--boxel-sp-xs));
-      }
-      .entity-display.center {
-        align-items: center;
-      }
-      .entity-thumbnail {
-        width: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
-        height: calc(
-          var(--entity-display-thumbnail-size, var(--boxel-icon-sm)) - 2px
-        );
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        color: var(--entity-display-thumbnail-color, var(--boxel-600));
-      }
-      .entity-info {
-        display: flex;
-        flex-direction: column;
-        gap: var(--entity-display-info-gap, var(--boxel-sp-xxxs));
-      }
-      .entity-name-tag {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--entity-display-name-tag-gap, var(--boxel-sp-xxxs));
-      }
-      .entity-name {
-        word-break: break-word;
-      }
-      .entity-name.underline {
-        text-decoration: underline;
-      }
-      .entity-content {
-        margin: 0;
-        font-size: var(
-          --entity-display-content-font-size,
-          var(--boxel-font-size-sm)
-        );
-        color: var(--entity-display-content-color, var(--boxel-400));
-      }
-    </style>
-  </template>
-}
diff --git a/packages/experiments-realm/components/entity-icon-display.gts b/packages/experiments-realm/components/entity-icon-display.gts
new file mode 100644
index 0000000000..73cc4142d1
--- /dev/null
+++ b/packages/experiments-realm/components/entity-icon-display.gts
@@ -0,0 +1,126 @@
+import GlimmerComponent from '@glimmer/component';
+import { concat } from '@ember/helper';
+
+interface EntityDisplayWithIconArgs {
+  Args: {
+    title?: string; //prefer using args.title if the title is just a string
+    center?: boolean;
+    underline?: boolean;
+  };
+  Blocks: {
+    title?: []; //we can choose use this to pass instead of using args.title if the title block HTML is complex
+    icon?: [];
+    tag?: [];
+    content?: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class EntityDisplayWithIcon extends GlimmerComponent<EntityDisplayWithIconArgs> {
+  get shouldAlignCenter() {
+    return this.args.center;
+  }
+
+  get shouldUnderlineText() {
+    return this.args.underline;
+  }
+
+  <template>
+    <div
+      class={{concat
+        'entity-icon-display'
+        (if this.shouldAlignCenter ' center')
+      }}
+      ...attributes
+    >
+      {{#if (has-block 'icon')}}
+        <aside class='entity-icon'>
+          {{yield to='icon'}}
+        </aside>
+      {{/if}}
+
+      <div class='entity-info'>
+        {{! Title and tag }}
+        <div class='entity-title-tag-container'>
+          {{! this guard clause is already priotize yield to 'title' instead of using args.title if both are provided}}
+          {{#if (has-block 'title')}}
+            {{yield to='title'}}
+          {{else if @title}}
+            <span
+              class={{concat
+                'entity-title'
+                (if this.shouldUnderlineText ' underline')
+              }}
+            >
+              {{@title}}
+            </span>
+          {{/if}}
+
+          {{#if (has-block 'tag')}}
+            {{yield to='tag'}}
+          {{/if}}
+        </div>
+
+        {{! Extra Content }}
+        {{#if (has-block 'content')}}
+          <div class='entity-content'>
+            {{yield to='content'}}
+          </div>
+        {{/if}}
+      </div>
+
+    </div>
+    <style scoped>
+      .entity-icon-display {
+        --icon-size: var(--entity-display-icon-size, var(--boxel-icon-sm));
+        --title-font-size: var(
+          --entity-display-title-font-size,
+          var(--boxel-font-size-sm)
+        );
+        --content-font-size: var(
+          --entity-display-content-font-size,
+          var(--boxel-font-size-xs)
+        );
+        --content-color: var(--entity-display-content-color, var(--boxel-400));
+        --content-gap: var(--entity-display-content-gap, var(--boxel-sp-xxxs));
+        display: flex;
+        align-items: flex-start;
+        gap: var(--content-gap);
+      }
+      .entity-icon-display.center {
+        align-items: center;
+      }
+      .entity-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: var(--icon-size);
+        height: var(--icon-size);
+      }
+      .entity-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--content-gap);
+      }
+      .entity-title-tag-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--content-gap);
+      }
+      .entity-title {
+        word-break: break-word;
+        font-size: var(--title-font-size);
+      }
+      .entity-title.underline {
+        text-decoration: underline;
+      }
+      .entity-content {
+        margin: 0;
+        font-size: var(--content-font-size);
+        color: var(--content-color);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/experiments-realm/components/entity-thumbnail-display.gts b/packages/experiments-realm/components/entity-thumbnail-display.gts
new file mode 100644
index 0000000000..26aac840e9
--- /dev/null
+++ b/packages/experiments-realm/components/entity-thumbnail-display.gts
@@ -0,0 +1,130 @@
+import GlimmerComponent from '@glimmer/component';
+import { concat } from '@ember/helper';
+
+interface EntityDisplayWithThumbnailArgs {
+  Args: {
+    title?: string; //prefer using args.title if the title is just a string
+    center?: boolean;
+    underline?: boolean;
+  };
+  Blocks: {
+    title?: []; //we can choose use this to pass instead of using args.title if the title block HTML is complex
+    thumbnail?: [];
+    tag?: [];
+    content?: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class EntityDisplayWithThumbnail extends GlimmerComponent<EntityDisplayWithThumbnailArgs> {
+  get shouldAlignCenter() {
+    return this.args.center;
+  }
+
+  get shouldUnderlineText() {
+    return this.args.underline;
+  }
+
+  <template>
+    <div
+      class={{concat
+        'entity-thumbnail-display'
+        (if this.shouldAlignCenter ' center')
+      }}
+      ...attributes
+    >
+      {{#if (has-block 'thumbnail')}}
+        <aside class='entity-thumbnail'>
+          {{yield to='thumbnail'}}
+        </aside>
+      {{/if}}
+
+      <div class='entity-info'>
+        {{! Title and tag }}
+        <div class='entity-title-tag-container'>
+          {{! this guard clause is already priotize yield to 'title' instead of using args.title if both are provided}}
+          {{#if (has-block 'title')}}
+            {{yield to='title'}}
+          {{else if @title}}
+            <span
+              class={{concat
+                'entity-title'
+                (if this.shouldUnderlineText ' underline')
+              }}
+            >
+              {{@title}}
+            </span>
+          {{/if}}
+
+          {{#if (has-block 'tag')}}
+            {{yield to='tag'}}
+          {{/if}}
+        </div>
+
+        {{! Extra Content }}
+        {{#if (has-block 'content')}}
+          <div class='entity-content'>
+            {{yield to='content'}}
+          </div>
+        {{/if}}
+      </div>
+
+    </div>
+    <style scoped>
+      .entity-thumbnail-display {
+        --thumbnail-size: var(
+          --entity-display-thumbnail-size,
+          var(--boxel-icon-sm)
+        );
+        --title-font-size: var(
+          --entity-display-title-font-size,
+          var(--boxel-font-size-sm)
+        );
+        --content-font-size: var(
+          --entity-display-content-font-size,
+          var(--boxel-font-size-xs)
+        );
+        --content-color: var(--entity-display-content-color, var(--boxel-400));
+        --content-gap: var(--entity-display-content-gap, var(--boxel-sp-xxxs));
+        display: flex;
+        align-items: flex-start;
+        gap: var(--content-gap);
+      }
+      .entity-thumbnail-display.center {
+        align-items: center;
+      }
+      .entity-thumbnail {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: var(--thumbnail-size);
+        height: var(--thumbnail-size);
+        overflow: hidden;
+      }
+      .entity-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--content-gap);
+      }
+      .entity-title-tag-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--content-gap);
+      }
+      .entity-title {
+        word-break: break-word;
+        font-size: var(--title-font-size);
+      }
+      .entity-title.underline {
+        text-decoration: underline;
+      }
+      .entity-content {
+        margin: 0;
+        font-size: var(--content-font-size);
+        color: var(--content-color);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index 446426fc90..c51f4489fe 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -26,7 +26,8 @@ import CalendarExclamation from '@cardstack/boxel-icons/calendar-exclamation';
 import { LooseGooseyField } from '../loosey-goosey';
 import { StatusPill } from '../components/status-pill';
 import { Avatar, Pill, BoxelButton } from '@cardstack/boxel-ui/components';
-import { EntityDisplay } from '../components/entity-display';
+import EntityDisplayWithIcon from '../components/entity-icon-display';
+import EntityDisplayWithThumbnail from '../components/entity-thumbnail-display';
 import ActivityCard from '../components/activity-card';
 import PlusIcon from '@cardstack/boxel-icons/plus';
 import PhoneIcon from '@cardstack/boxel-icons/phone';
@@ -204,41 +205,36 @@ class IsolatedTemplate extends Component<typeof Account> {
               </:description>
               <:content>
                 <div class='activity-card-group'>
-                  <EntityDisplay>
-                    <:thumbnail>
+                  <EntityDisplayWithIcon @title='Technova'>
+                    <:icon>
                       <SquareUser />
-                    </:thumbnail>
-                    <:title>
-                      Dmitri Petrov
-                    </:title>
+                    </:icon>
                     <:content>
                       Technova
                     </:content>
-                  </EntityDisplay>
-                  <EntityDisplay>
+                  </EntityDisplayWithIcon>
+                  <EntityDisplayWithThumbnail @title='Rep: Janus Dios'>
                     <:thumbnail>
                       <Avatar
                         @thumbnailURL='https://images.pexels.com/photos/1624229/pexels-photo-1624229.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2'
+                        class='avatar'
                       />
                     </:thumbnail>
-                    <:title>
-                      Rep: Janus Dios
-                    </:title>
                     <:content>
                       Sales Associate
                     </:content>
-                  </EntityDisplay>
-                  <EntityDisplay class='activity-time'>
-                    <:thumbnail>
+                  </EntityDisplayWithThumbnail>
+                  <EntityDisplayWithIcon
+                    class='activity-time'
+                    @title='May 15, 2024'
+                  >
+                    <:icon>
                       <CalendarTime />
-                    </:thumbnail>
-                    <:title>
-                      May 15, 2024
-                    </:title>
+                    </:icon>
                     <:content>
                       3:15pm
                     </:content>
-                  </EntityDisplay>
+                  </EntityDisplayWithIcon>
                 </div>
               </:content>
             </ActivityCard>
@@ -328,6 +324,11 @@ class IsolatedTemplate extends Component<typeof Account> {
         color: var(--boxel-color-gray);
         margin-left: auto;
       }
+      .avatar {
+        --profile-avatar-icon-size: 20px;
+        --profile-avatar-icon-border: 0px;
+        flex-shrink: 0;
+      }
 
       @container activities-summary-card (max-width: 447px) {
         .activity-button-mobile {
diff --git a/packages/experiments-realm/crm/company.gts b/packages/experiments-realm/crm/company.gts
index fe64a3a1c5..70af9f19ff 100644
--- a/packages/experiments-realm/crm/company.gts
+++ b/packages/experiments-realm/crm/company.gts
@@ -2,7 +2,7 @@ import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
 import { WebsiteField } from '../website';
 import { Address } from '../address';
-import { EntityDisplay } from '../components/entity-display';
+import EntityDisplayWithIcon from '../components/entity-icon-display';
 
 import {
   Component,
@@ -15,14 +15,11 @@ import BuildingIcon from '@cardstack/boxel-icons/building';
 class ViewCompanyTemplate extends Component<typeof Company> {
   <template>
     <div class='company-group'>
-      <EntityDisplay @underline={{true}}>
-        <:title>
-          {{@model.name}}
-        </:title>
-        <:thumbnail>
+      <EntityDisplayWithIcon @title={{@model.name}} @underline={{true}}>
+        <:icon>
           <BuildingIcon />
-        </:thumbnail>
-      </EntityDisplay>
+        </:icon>
+      </EntityDisplayWithIcon>
     </div>
   </template>
 }
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index e043c105f0..8d29b1c062 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -19,7 +19,7 @@ import Email from '@cardstack/boxel-icons/mail';
 import Linkedin from '@cardstack/boxel-icons/linkedin';
 import XIcon from '@cardstack/boxel-icons/brand-x';
 import { LooseGooseyField } from '../loosey-goosey';
-import { EntityDisplay } from '../components/entity-display';
+import EntityDisplayWithThumbnail from '../components/entity-thumbnail-display';
 
 export class SocialLinkField extends ContactLinkField {
   static displayName = 'social-link';
@@ -186,7 +186,7 @@ class FittedTemplate extends Component<typeof Contact> {
         grid-area: avatar-group-container;
       }
       .avatar-group-container
-        :where(.avatar-info .company-group .entity-name-tag) {
+        :where(.avatar-info .company-group .entity-title-tag-container) {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -610,10 +610,7 @@ class AtomTemplate extends Component<typeof Contact> {
   }
   <template>
     <div class='contact'>
-      <EntityDisplay @underline={{true}}>
-        <:title>
-          {{this.label}}
-        </:title>
+      <EntityDisplayWithThumbnail @title={{this.label}} @underline={{true}}>
         <:thumbnail>
           <Avatar
             @userID={{@model.id}}
@@ -623,7 +620,7 @@ class AtomTemplate extends Component<typeof Contact> {
             class='avatar'
           />
         </:thumbnail>
-      </EntityDisplay>
+      </EntityDisplayWithThumbnail>
     </div>
     <style scoped>
       .contact {
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
index 908e1e469b..cc14183498 100644
--- a/packages/experiments-realm/crm/deal.gts
+++ b/packages/experiments-realm/crm/deal.gts
@@ -18,7 +18,7 @@ import { BoxelButton, Pill } from '@cardstack/boxel-ui/components';
 import Info from '@cardstack/boxel-icons/info';
 import AccountHeader from '../components/account-header';
 import CrmProgressBar from '../components/crm-progress-bar';
-import { EntityDisplay } from '../components/entity-display';
+import EntityDisplayWithIcon from '../components/entity-icon-display';
 import { htmlSafe } from '@ember/template';
 import { concat } from '@ember/helper';
 import { LooseGooseyField } from '../loosey-goosey';
@@ -286,14 +286,11 @@ class IsolatedTemplate extends Component<typeof Deal> {
 
             <footer class='next-steps'>
               <div class='next-steps-row'>
-                <EntityDisplay @center={{true}}>
-                  <:title>
-                    Notes
-                  </:title>
-                  <:thumbnail>
+                <EntityDisplayWithIcon @title='Notes' @center={{true}}>
+                  <:icon>
                     <Info class='info-icon' />
-                  </:thumbnail>
-                </EntityDisplay>
+                  </:icon>
+                </EntityDisplayWithIcon>
 
                 {{#if @model.document}}
                   <BoxelButton
@@ -516,7 +513,7 @@ class IsolatedTemplate extends Component<typeof Deal> {
       }
       .info-atom {
         width: fit-content;
-        display: inline-block;
+        display: inline-flex;
       }
       .header-icon {
         width: var(--boxel-icon-sm);
@@ -704,7 +701,7 @@ class FittedTemplate extends Component<typeof Deal> {
       }
       .info-atom {
         width: fit-content;
-        display: inline-block;
+        display: inline-flex;
       }
       /* deal details */
       .deal-details {
diff --git a/packages/experiments-realm/email.gts b/packages/experiments-realm/email.gts
index b4991a0671..3d01fb25a3 100644
--- a/packages/experiments-realm/email.gts
+++ b/packages/experiments-realm/email.gts
@@ -15,7 +15,7 @@ import MailIcon from '@cardstack/boxel-icons/mail';
 import { debounce } from 'lodash';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { EntityDisplay } from './components/entity-display';
+import EntityDisplayWithIcon from './components/entity-icon-display';
 
 // We use simple regex here to validate common email formats
 // This is definitely NOT a full email validation
@@ -68,14 +68,11 @@ export class EmailField extends StringField {
   static atom = class Atom extends Component<typeof EmailField> {
     <template>
       {{#if @model}}
-        <EntityDisplay @underline={{false}}>
-          <:title>
-            {{@model}}
-          </:title>
-          <:thumbnail>
+        <EntityDisplayWithIcon @title={{@model}} @underline={{false}}>
+          <:icon>
             <MailIcon class='icon' />
-          </:thumbnail>
-        </EntityDisplay>
+          </:icon>
+        </EntityDisplayWithIcon>
       {{/if}}
       <style scoped>
         .icon {
diff --git a/packages/experiments-realm/phone-number.gts b/packages/experiments-realm/phone-number.gts
index 099cb099b2..e186326d94 100644
--- a/packages/experiments-realm/phone-number.gts
+++ b/packages/experiments-realm/phone-number.gts
@@ -8,7 +8,7 @@ import {
 import { LooseGooseyField, LooseyGooseyData } from './loosey-goosey';
 import { PhoneInput, Pill } from '@cardstack/boxel-ui/components';
 import { RadioInput } from '@cardstack/boxel-ui/components';
-import { EntityDisplay } from './components/entity-display';
+import EntityDisplayWithIcon from './components/entity-icon-display';
 import { tracked } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
 import { action } from '@ember/object';
@@ -94,7 +94,7 @@ export class PhoneField extends FieldDef {
 
   static atom = class Atom extends Component<typeof PhoneField> {
     <template>
-      <EntityDisplay @underline={{false}}>
+      <EntityDisplayWithIcon @underline={{false}}>
         <:title>
           {{#if @model.countryCode}}
             +{{@model.countryCode}}{{@model.number}}
@@ -102,10 +102,10 @@ export class PhoneField extends FieldDef {
             {{@model.number}}
           {{/if}}
         </:title>
-        <:thumbnail>
+        <:icon>
           <PhoneIcon class='icon' />
-        </:thumbnail>
-      </EntityDisplay>
+        </:icon>
+      </EntityDisplayWithIcon>
       <style scoped>
         .icon {
           color: var(--boxel-400);
@@ -131,7 +131,7 @@ export class ContactPhoneNumber extends FieldDef {
 
   static atom = class Atom extends Component<typeof ContactPhoneNumber> {
     <template>
-      <EntityDisplay @underline={{false}}>
+      <EntityDisplayWithIcon @underline={{false}}>
         <:title>
           {{#if @model.phoneNumber.countryCode}}
             +{{@model.phoneNumber.countryCode}}{{@model.phoneNumber.number}}
@@ -139,9 +139,9 @@ export class ContactPhoneNumber extends FieldDef {
             {{@model.phoneNumber.number}}
           {{/if}}
         </:title>
-        <:thumbnail>
+        <:icon>
           <PhoneIcon class='icon' />
-        </:thumbnail>
+        </:icon>
         <:tag>
           {{#if @model.type.label}}
             <Pill class='pill-gray'>
@@ -149,7 +149,7 @@ export class ContactPhoneNumber extends FieldDef {
             </Pill>
           {{/if}}
         </:tag>
-      </EntityDisplay>
+      </EntityDisplayWithIcon>
       <style scoped>
         .icon {
           color: var(--boxel-400);
diff --git a/packages/experiments-realm/website.gts b/packages/experiments-realm/website.gts
index 2f79e4af5e..06ad9a5ee6 100644
--- a/packages/experiments-realm/website.gts
+++ b/packages/experiments-realm/website.gts
@@ -1,7 +1,7 @@
 import WorldWwwIcon from '@cardstack/boxel-icons/world-www';
 import { UrlField } from './url';
 import { Component } from 'https://cardstack.com/base/card-api';
-import { EntityDisplay } from './components/entity-display';
+import EntityDisplayWithIcon from './components/entity-icon-display';
 
 const domainWithPath = (urlString: string | null) => {
   if (!urlString) {
@@ -18,14 +18,11 @@ export class WebsiteField extends UrlField {
 
   static atom = class Atom extends Component<typeof WebsiteField> {
     <template>
-      <EntityDisplay>
-        <:title>
-          {{domainWithPath @model}}
-        </:title>
-        <:thumbnail>
+      <EntityDisplayWithIcon @title={{domainWithPath @model}}>
+        <:icon>
           <WorldWwwIcon />
-        </:thumbnail>
-      </EntityDisplay>
+        </:icon>
+      </EntityDisplayWithIcon>
     </template>
   };