diff --git a/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json b/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json
index 52fb0e3ecc..658afdf56b 100644
--- a/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json
+++ b/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json
@@ -2,30 +2,45 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Sophia Nguyen",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Elma",
+      "lastName": "Odsey",
+      "position": "Head of Recruitment",
+      "department": "app",
+      "primaryEmail": "elma@gmail.com",
+      "secondaryEmail": "elmaodsey@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 6,
+        "area": 10,
+        "number": 3810923
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "office",
+        "country": 615,
+        "area": 724,
+        "number": 3789
       },
       "status": {
-        "index": null,
-        "label": null
+        "index": 0,
+        "label": "Customer"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/1624229/pexels-photo-1624229.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
         "links": {
-          "self": null
+          "self": "../Company/9203c173-3420-44b3-863d-90defd7c57c8"
         }
       }
     },
@@ -36,4 +51,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json b/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json
index e3b02fefb0..3dfbfafb60 100644
--- a/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json
+++ b/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json
@@ -2,25 +2,40 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Olivia Chen",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Sophia",
+      "lastName": "Nguyen",
+      "position": "Sale Manager",
+      "department": "app",
+      "primaryEmail": "sophia@gmail.com",
+      "secondaryEmail": "sophiaNguyen@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 1,
+        "area": 510,
+        "number": 5550145
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "office",
+        "country": 1,
+        "area": 510,
+        "number": 5552345
       },
       "status": {
-        "index": 1,
-        "label": "Lead"
+        "index": 0,
+        "label": "Customer"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/4974417/pexels-photo-4974417.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
@@ -36,4 +51,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json b/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
index bdd7f51e95..a265f3e625 100644
--- a/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
+++ b/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
@@ -2,30 +2,45 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Ethan Rodriguez",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Ethan",
+      "lastName": "Smith",
+      "position": "Software Engineer",
+      "department": "app",
+      "primaryEmail": "ethan@gmail.com",
+      "secondaryEmail": "ethanSmith@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 1,
+        "area": 510,
+        "number": 123456
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "office",
+        "country": 1,
+        "area": 510,
+        "number": 2442322
       },
       "status": {
-        "index": null,
-        "label": null
+        "index": 1,
+        "label": "Lead"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
         "links": {
-          "self": null
+          "self": "../Company/e1856419-27b0-4ce3-98fe-759d21c7144f"
         }
       }
     },
@@ -36,4 +51,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json b/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
index e04fe8d0bc..e33b764cb3 100644
--- a/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
+++ b/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
@@ -2,30 +2,45 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Liam O'Connor",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Liam",
+      "lastName": "O'Connor",
+      "position": "Data Analystic",
+      "department": "app",
+      "primaryEmail": "liam@gmail.com",
+      "secondaryEmail": "liamOConnor@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 1,
+        "area": 510,
+        "number": 2323423
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "office",
+        "country": 1,
+        "area": 510,
+        "number": 1231232
       },
       "status": {
-        "index": null,
-        "label": null
+        "index": 1,
+        "label": "Lead"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/3785079/pexels-photo-3785079.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
         "links": {
-          "self": null
+          "self": "../Company/e1856419-27b0-4ce3-98fe-759d21c7144f"
         }
       }
     },
diff --git a/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json b/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
index b6ac85c13f..10ca6b584c 100644
--- a/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
+++ b/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
@@ -2,7 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Application",
+      "name": "App",
       "color": "",
       "description": null,
       "thumbnailURL": null
diff --git a/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json b/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json
index e38c820292..740b24eb9e 100644
--- a/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json
+++ b/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json
@@ -2,29 +2,25 @@
   "data": {
     "type": "card",
     "attributes": {
-      "taskName": "Pill Picker Example",
-      "taskDetail": "Use multi-select but for pills",
-      "status": {
-        "index": 1,
-        "label": "Next Sprint"
-      },
       "priority": {
         "index": 1,
         "label": "Medium"
       },
+      "status": {
+        "completed": false,
+        "index": 1,
+        "label": "Next Sprint"
+      },
+      "taskName": "Pill Picker Example",
       "dateRange": {
-        "start": "2024-11-14",
-        "end": "2024-12-15"
+        "start": "2024-12-08",
+        "end": "2024-12-10"
       },
+      "taskDetail": "Use multi-select but for pills",
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
-      "assignee": {
-        "links": {
-          "self": null
-        }
-      },
       "project": {
         "links": {
           "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
@@ -40,6 +36,11 @@
           "self": null
         }
       },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
       "tags.0": {
         "links": {
           "self": "../Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228"
@@ -63,4 +64,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json b/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
index 451dbdf4b1..b4749f3aca 100644
--- a/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
+++ b/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
@@ -2,29 +2,25 @@
   "data": {
     "type": "card",
     "attributes": {
-      "taskName": "Create RHS Sheet",
-      "taskDetail": null,
-      "status": {
-        "index": 0,
-        "label": "Backlog"
-      },
       "priority": {
         "index": null,
         "label": null
       },
+      "status": {
+        "completed": false,
+        "index": 0,
+        "label": "Backlog"
+      },
+      "taskName": "Create RHS Sheet",
       "dateRange": {
-        "start": "2024-11-13",
-        "end": "2024-11-14"
+        "start": "2024-12-01",
+        "end": "2024-12-08"
       },
+      "taskDetail": null,
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
-      "assignee": {
-        "links": {
-          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
-        }
-      },
       "project": {
         "links": {
           "self": null
@@ -40,6 +36,11 @@
           "self": null
         }
       },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
+        }
+      },
       "tags": {
         "links": {
           "self": null
diff --git a/packages/experiments-realm/components/avatar-group.gts b/packages/experiments-realm/components/avatar-group.gts
index db88da37ef..fdd3deee5e 100644
--- a/packages/experiments-realm/components/avatar-group.gts
+++ b/packages/experiments-realm/components/avatar-group.gts
@@ -40,7 +40,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
       .avatar-group {
         display: flex;
         align-items: center;
-        gap: var(--boxel-sp);
+        gap: var(--boxel-sp-sm);
         min-width: 0;
       }
       .avatar-thumbnail {
diff --git a/packages/experiments-realm/crm/company.gts b/packages/experiments-realm/crm/company.gts
index 68f51f12f0..cb080af0b2 100644
--- a/packages/experiments-realm/crm/company.gts
+++ b/packages/experiments-realm/crm/company.gts
@@ -13,7 +13,7 @@ import BuildingIcon from '@cardstack/boxel-icons/building';
 
 class ViewCompanyTemplate extends Component<typeof Company> {
   <template>
-    <div class='row'>
+    <div class='row company-group'>
       <BuildingIcon class='icon' />
 
       {{#if @model.name}}
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index 0033869716..17dc98823a 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -139,6 +139,12 @@ export class StatusField extends LooseGooseyField {
 }
 
 class EmbeddedTemplate extends Component<typeof Contact> {
+  get hasSocialLinks() {
+    return (
+      this.args.model.socialLinks && this.args.model.socialLinks.length > 0
+    );
+  }
+
   <template>
     <article class='embedded-contact-card'>
       <AvatarGroup
@@ -147,11 +153,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
         @thumbnailURL={{@model.thumbnailURL}}
       >
         <:content>
-          <@fields.company
-            @format='atom'
-            @displayContainer={{false}}
-            class='company-container'
-          />
+          <@fields.company @format='atom' @displayContainer={{false}} />
         </:content>
       </AvatarGroup>
 
@@ -162,6 +164,12 @@ class EmbeddedTemplate extends Component<typeof Contact> {
         <@fields.phoneOffice @format='atom' />
       </div>
 
+      {{#if this.hasSocialLinks}}
+        <div class='links'>
+          <@fields.socialLinks @format='atom' />
+        </div>
+      {{/if}}
+
       {{#if @model.status.label}}
         {{#let (getStatusData @model.status.label) as |statusData|}}
           <StatusPill
@@ -169,6 +177,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
             @icon={{statusData.icon}}
             @iconDarkColor={{statusData.darkColor}}
             @iconLightColor={{statusData.lightColor}}
+            class='status-pill'
           />
         {{/let}}
       {{/if}}
@@ -178,19 +187,31 @@ class EmbeddedTemplate extends Component<typeof Contact> {
       .embedded-contact-card {
         width: 100%;
         height: 100%;
-        padding: var(--boxel-sp-lg);
-        display: flex;
-        flex-direction: column;
-        background: var(--boxel-light);
+        padding: var(--boxel-sp);
+        overflow: hidden;
+        display: grid;
+        gap: var(--boxel-sp-sm);
+        grid-template-areas:
+          'avatar-group-container'
+          'contact-info'
+          'links'
+          'status';
+        grid-template-rows: max-content max-content max-content auto;
       }
-      .contact-info,
-      .links {
+      .contact-info {
         display: flex;
         flex-direction: column;
-        gap: var(--boxel-sp-xs);
+        gap: var(--boxel-sp-xxs);
         font-size: var(--boxel-font-sm);
         color: var(--boxel-dark);
-        margin-top: var(--boxel-sp);
+      }
+      .links :deep(div) {
+        display: flex;
+        gap: var(--boxel-sp-xxxs);
+        flex-wrap: wrap;
+      }
+      .status-pill {
+        width: fit-content;
       }
     </style>
   </template>
@@ -202,27 +223,33 @@ class FittedTemplate extends Component<typeof Contact> {
       this.args.model.socialLinks && this.args.model.socialLinks.length > 0
     );
   }
+
   <template>
     <article class='fitted-contact-card'>
       <AvatarGroup
         @userId={{@model.id}}
         @name={{@model.name}}
         @thumbnailURL={{@model.thumbnailURL}}
+        class='avatar-group-container'
       >
         <:content>
-          <@fields.company
-            @format='atom'
-            @displayContainer={{false}}
-            class='company-container'
-          />
+          <@fields.company @format='atom' @displayContainer={{false}} />
         </:content>
       </AvatarGroup>
 
       <div class='contact-info'>
-        <@fields.primaryEmail @format='atom' />
-        <@fields.secondaryEmail @format='atom' />
-        <@fields.phoneMobile @format='atom' />
-        <@fields.phoneOffice @format='atom' />
+        <div class='primary-email'>
+          <@fields.primaryEmail @format='atom' />
+        </div>
+        <div class='secondary-email'>
+          <@fields.secondaryEmail @format='atom' />
+        </div>
+        <div class='phone-mobile'>
+          <@fields.phoneMobile @format='atom' />
+        </div>
+        <div class='phone-office'>
+          <@fields.phoneOffice @format='atom' />
+        </div>
       </div>
 
       {{#if this.hasSocialLinks}}
@@ -245,146 +272,512 @@ class FittedTemplate extends Component<typeof Contact> {
 
     <style scoped>
       .fitted-contact-card {
+        --icon-size: 16px;
         width: 100%;
         height: 100%;
         min-width: 100px;
         min-height: 29px;
         overflow: hidden;
-        display: flex;
-        gap: var(--boxel-sp-sm);
+        display: grid;
+        gap: var(--boxel-sp-xs);
         padding: var(--boxel-sp-xs);
+        grid-template-areas:
+          'avatar-group-container'
+          'contact-info'
+          'links'
+          'status';
+        grid-template-rows: max-content max-content max-content auto;
+      }
+      .avatar-group-container {
+        grid-area: avatar-group-container;
+      }
+      .contact-info {
+        grid-area: contact-info;
+        display: grid;
+        gap: var(--boxel-sp-xxxs);
+      }
+      .links {
+        grid-area: links;
+      }
+      .status-pill {
+        grid-area: status;
+        width: fit-content;
       }
       .contact-info,
       .links {
         font-size: var(--boxel-font-xs);
         align-self: normal;
       }
-      .contact-info,
-      .links > * + * {
-        margin-top: var(--boxel-sp-xxs);
-      }
       .links :deep(div) {
         display: flex;
         gap: var(--boxel-sp-xxxs);
         flex-wrap: wrap;
       }
+      .contact-info :where(.entity-display .row .name) {
+        word-break: break-all;
+      }
 
-      .fitted-contact-card > .status-pill {
-        display: none;
+      @container fitted-card ((aspect-ratio <= 1.0) and (224px <= height <= 226px)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'links'
+            'status';
+          grid-template-rows: max-content max-content max-content auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .secondary-email,
+        .phone-mobile {
+          display: none;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 45px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: var(--icon-size);
+          height: var(--icon-size);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      /* Square layout (aspect-ratio = 1.0) or portrait layout with height < 226px */
-      @container fitted-card ((aspect-ratio = 1.0) or ((aspect-ratio < 1.0) and (height < 226px))) {
+      @container fitted-card (aspect-ratio <= 1.0) and (180px <= height < 224px) {
         .fitted-contact-card {
-          flex-direction: column;
-          padding: var(--boxel-sp-xs);
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'status';
+          grid-template-rows: auto auto auto;
+          gap: var(--boxel-sp-xs);
         }
-        .contact-info,
+        .secondary-email,
+        .phone-mobile,
+        .phone-office,
         .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 45px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: var(--icon-size);
+          height: var(--icon-size);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      @container fitted-card (aspect-ratio <= 1.0) and (226px < height) {
+      @container fitted-card ((aspect-ratio <= 1.0) and (height < 180px) ) {
         .fitted-contact-card {
-          flex-direction: column;
-          padding: var(--boxel-sp-xs);
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'status';
+          grid-template-rows: auto auto auto;
+          gap: var(--boxel-sp-xs);
         }
-
-        .contact-info,
+        .secondary-email,
+        .phone-mobile,
+        .phone-office,
         .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: calc(var(--icon-size) - 2px);
+          height: calc(var(--icon-size) - 2px);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-xs);
+        }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (58px <= height < 180px)) {
+      @container fitted-card (aspect-ratio <= 1.0) and (148px <= height < 180px) {
         .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'status';
+          grid-template-rows: auto auto auto;
           gap: var(--boxel-sp-xs);
-          padding: var(--boxel-sp-xxs);
         }
+        .secondary-email,
+        .phone-mobile,
+        .phone-office,
+        .links {
+          display: none;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: calc(var(--icon-size) - 2px);
+          height: calc(var(--icon-size) - 2px);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-xs);
+        }
+      }
 
+      @container fitted-card (aspect-ratio <= 1.0) and (128px <= height < 148px) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: auto auto;
+          gap: var(--boxel-sp-xs);
+        }
         .contact-info,
         .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (58px <= height <= 77px)) {
+      @container fitted-card (aspect-ratio <= 1.0) and (118px <= height < 128px) {
         .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: auto auto;
           gap: var(--boxel-sp-xs);
-          padding: var(--boxel-sp-xxs);
         }
-
         .contact-info,
+        .contact-info:where(.entity-display .pill-gray),
         .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      /* Horizontal layouts (aspect-ratio > 1.0) */
-      @container fitted-card ((1.0 < aspect-ratio) and (115px <= height)) {
+      @container fitted-card ((aspect-ratio <= 1.0) and (400px <= height) and (226px < width)) {
         .fitted-contact-card {
-          flex-direction: column;
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'links'
+            'status';
+          grid-template-rows: auto auto auto;
           gap: var(--boxel-sp-xs);
-          padding: var(--boxel-sp-sm);
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 40px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: calc(var(--icon-size) - 2px);
+          height: calc(var(--icon-size) - 2px);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size);
+        }
+      }
 
-        .contact-info,
+      @container fitted-card ((aspect-ratio <= 1.0) and (400px <= height)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'links'
+            'status';
+          grid-template-rows: auto auto auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 40px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: calc(var(--icon-size) - 2px);
+          height: calc(var(--icon-size) - 2px);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+      }
+
+      /* 1.0 < Aspect ratio (Horizontal card) */
+      @container fitted-card ((1.0 < aspect-ratio) and (180px <= height)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'status';
+          grid-template-rows: auto auto auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .secondary-email,
+        .phone-mobile,
+        .phone-office,
         .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 50px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: var(--icon-size);
+          height: var(--icon-size);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (115px <= height < 180px)) {
-        .contact-info,
+      @container fitted-card ((1.0 < aspect-ratio) and (151px <= height < 180px)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'status';
+          grid-template-rows: auto auto auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .secondary-email,
+        .phone-mobile,
+        .phone-office,
         .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 40px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info :where(.entity-display .row) {
+          gap: var(--boxel-sp-xxs);
+        }
+        .contact-info :where(.entity-display .row .icon) {
+          width: var(--icon-size);
+          height: var(--icon-size);
+        }
+        .contact-info :where(.entity-display .row .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (180px <= height)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (115px <= height <= 150px)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: auto auto auto;
+          gap: var(--boxel-sp-xs);
+          align-content: center;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
         .contact-info,
         .links {
           display: none;
         }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (58px <= height < 115px)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (78px <= height <= 114px)) {
         .fitted-contact-card {
-          display: flex;
-          padding: var(--boxel-sp-sm);
+          grid-template: 'avatar-group-container';
+          grid-template-rows: auto;
+          gap: var(--boxel-sp-xs);
+          align-content: center;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
         }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+        .contact-info,
+        .links,
+        .status-pill {
+          display: none;
+        }
+      }
 
+      @container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (58px <= height <= 77px)) {
+        .fitted-contact-card {
+          grid-template: 'avatar-group-container status';
+          grid-template-rows: auto;
+          grid-template-columns: auto max-content;
+          gap: var(--boxel-sp-xs);
+          align-content: center;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
         .contact-info,
         .links {
           display: none;
         }
+        .status-pill {
+          margin-left: auto;
+        }
       }
 
-      /* Smallest horizontal layout */
-      @container fitted-card ((1.0 < aspect-ratio) and (50px <= height < 58px)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (226px <= width <= 499px) and (58px <= height <= 77px)) {
         .fitted-contact-card {
-          display: flex;
-          padding: var(--boxel-sp-xxxs);
+          grid-template: 'avatar-group-container';
+          grid-template-rows: auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
         }
-
         .contact-info,
-        .links {
+        .links,
+        .status-pill {
           display: none;
         }
       }
 
-      /* Fallback for extremely small sizes */
-      @container fitted-card ((1.0 < aspect-ratio) and (height < 50px)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (width <= 225px) and (58px <= height <= 77px)) {
         .fitted-contact-card {
-          display: flex;
-          padding: var(--boxel-sp-xxxs);
+          grid-template: 'avatar-group-container';
+          grid-template-rows: auto;
+          gap: var(--boxel-sp-xs);
+          align-content: center;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+        .contact-info,
+        .links,
+        .status-pill {
+          display: none;
+        }
+      }
 
+      @container fitted-card ((1.0 < aspect-ratio) and (height <= 57px)) {
+        .fitted-contact-card {
+          grid-template: 'avatar-group-container';
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail),
+        .avatar-group-container :where(.company-group),
         .contact-info,
-        .links {
+        .links,
+        .status-pill {
           display: none;
         }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
     </style>
   </template>
@@ -408,17 +801,6 @@ class AtomTemplate extends Component<typeof Contact> {
         />
       {{/if}}
       <span class='name'>{{@model.name}}</span>
-      {{#if @model.status.label}}
-        {{#let (getStatusData @model.status.label) as |statusData|}}
-          <StatusPill
-            class='status-pill'
-            @label={{@model.status.label}}
-            @icon={{statusData.icon}}
-            @iconDarkColor={{statusData.darkColor}}
-            @iconLightColor={{statusData.lightColor}}
-          />
-        {{/let}}
-      {{/if}}
     </div>
     <style scoped>
       .contact {
diff --git a/packages/experiments-realm/productivity/task.gts b/packages/experiments-realm/productivity/task.gts
index fd079489a8..327500d295 100644
--- a/packages/experiments-realm/productivity/task.gts
+++ b/packages/experiments-realm/productivity/task.gts
@@ -18,9 +18,13 @@ import CheckboxIcon from '@cardstack/boxel-icons/checkbox';
 import UsersIcon from '@cardstack/boxel-icons/users';
 import UserIcon from '@cardstack/boxel-icons/user';
 import Calendar from '@cardstack/boxel-icons/calendar';
-import { isToday, isThisWeek, addWeeks } from 'date-fns';
 import { User } from '../user';
-import { TaskBase, BaseTaskStatusField, BaseTaskPriority } from '../task';
+import {
+  TaskBase,
+  BaseTaskStatusField,
+  BaseTaskPriority,
+  getDueDateStatus,
+} from '../task';
 
 export class Team extends CardDef {
   static displayName = 'Team';
@@ -141,33 +145,6 @@ function shortenId(id: string): string {
   return decimal.toString(36).padStart(6, '0');
 }
 
-function getDueDateStatus(dueDateString: string | null) {
-  if (!dueDateString) return null;
-
-  const dueDate = new Date(dueDateString);
-  const today = new Date();
-  const nextWeek = addWeeks(today, 1);
-
-  if (isToday(dueDate)) {
-    return {
-      label: 'Due Today',
-      color: '#01de67',
-    };
-  } else if (isThisWeek(dueDate)) {
-    return {
-      label: 'This Week',
-      color: '#ffbc00',
-    };
-  } else if (dueDate > today && dueDate < nextWeek) {
-    return {
-      label: 'Next Week',
-      color: '#4fc8fd',
-    };
-  }
-
-  return null;
-}
-
 class TaskIsolated extends Component<typeof Task> {
   get dueDate() {
     return this.args.model.dateRange?.end;
diff --git a/packages/experiments-realm/task.gts b/packages/experiments-realm/task.gts
index 610e46177d..8f709ee398 100644
--- a/packages/experiments-realm/task.gts
+++ b/packages/experiments-realm/task.gts
@@ -129,7 +129,7 @@ export class FittedTask extends Component<typeof TaskBase> {
   <template>
     <div class='task-card'>
       <header>
-        <div>
+        <div class='task-status-and-tags-container'>
           <TaskCompletionStatus
             class='task-completion-status'
             @completed={{this.isCompleted}}
@@ -146,8 +146,8 @@ export class FittedTask extends Component<typeof TaskBase> {
             </div>
           {{/if}}
         </div>
-        <div class='short-id-container'>
-          <@fields.priority @format='atom' />
+        <div class='priority-and-id-container'>
+          <@fields.priority class='priority' @format='atom' />
           <span class='short-id'>{{@model.shortId}}</span>
         </div>
       </header>
@@ -190,10 +190,18 @@ export class FittedTask extends Component<typeof TaskBase> {
     </div>
 
     <style scoped>
+      .task-status-and-tags-container {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        flex-shrink: 0;
+      }
+
       .task-completion-status {
         --boxel-circle-size: 14px;
         --boxel-border-radius: var(--boxel-border-radius-lg);
       }
+
       .task-card {
         --task-font-weight-500: 500;
         --task-font-weight-600: 600;
@@ -219,6 +227,7 @@ export class FittedTask extends Component<typeof TaskBase> {
         align-items: center;
         gap: var(--boxel-sp-xxxs);
         overflow: hidden;
+        line-height: 1;
       }
       .card-tag {
         width: auto;
@@ -230,7 +239,7 @@ export class FittedTask extends Component<typeof TaskBase> {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .short-id-container {
+      .priority-and-id-container {
         display: flex;
         align-items: center;
         gap: var(--boxel-sp-xxxs);
@@ -320,101 +329,81 @@ export class FittedTask extends Component<typeof TaskBase> {
         overflow: unset;
         margin-left: auto;
       }
-
-      /* Square/Portrait Container (aspect-ratio <= 1.0) */
-      @container (aspect-ratio <= 1.0) {
-        .task-card {
-          padding: var(--boxel-sp-xs);
-        }
-
-        .date-status-pill {
+      /*catch all for dismissing tags*/
+      @container fitted-card (width <= 226px) {
+        .card-tags {
           display: none;
         }
-
-        footer {
-          margin-top: auto;
-        }
       }
 
-      /* Compact Portrait (height <= 230px) */
-      @container (aspect-ratio <= 1.0) and (height <=230px) {
-        .task-card {
-          gap: var(--boxel-sp-5xs);
-        }
-
-        .task-title {
-          -webkit-line-clamp: 1;
-        }
-
-        .card-tags {
+      /*Aspect Ratio 0.95, 140px × 148px*/
+      /*Aspect Ratio 0.94, 120px × 128px*/
+      @container fitted-card (aspect-ratio <1.0) and (118px <= height < 129px) {
+        .priority,
+        .date-info-container {
           display: none;
         }
-      }
-
-      /* Landscape Container (1.0 < aspect-ratio <= 2.0) */
-      @container (1.0 < aspect-ratio <= 2.0) {
-        .task-card {
-          padding: var(--boxel-sp-sm);
+        header {
+          flex-wrap: nowrap;
         }
       }
 
-      /* Extra styles for very narrow height but medium*/
-      @container (aspect-ratio < 2.0) and (height <= 78px) {
-        .task-title {
-          -webkit-line-clamp: 1;
+      /*Aspect Ratio 3.4, 100px × 29px*/
+      /*Aspect Ratio 2.6, 150px × 58px*/
+      @container (aspect-ratio > 2.0) and (100px <= width <151px) and (29px <= height < 59px) {
+        .task-card {
+          padding: var(--boxel-sp-xxxs);
+          flex-direction: row;
+          align-items: center;
+          gap: var(--boxel-sp-sm);
         }
-
-        .card-tags,
+        .task-title,
+        .priority,
         .date-info-container {
           display: none;
         }
-      }
-
-      /* Extra styles for width <= 150px and height <= 100px */
-      @container (width <= 150px) and (height <= 100px) {
-        .card-tags,
-        .card-info,
-        footer {
+        header {
+          flex-wrap: nowrap;
+        }
+        .card-assignee {
           display: none;
         }
       }
 
-      /* Extra styles for width > 280px and height 78px */
-      @container (width > 280px) and (height <= 78px) {
-        .task-completion-status {
-          display: inline-flex;
+      /*Aspect Ratio 3.9, 226px × 58px*/
+      /*Aspect Ratio 2.6, 300px × 115px*/
+      @container (aspect-ratio > 2.0) and (151px <= width < 301px) and (29px <= height < 116px) {
+        .task-title {
+          font-size: var(--boxel-font-size-sm);
+          -webkit-line-clamp: 1;
         }
-      }
-
-      @container (aspect-ratio > 2.0) and (height <= 78px) {
         .task-card {
-          padding: var(--boxel-sp-xs);
+          padding: var(--boxel-sp-xxxs);
           flex-direction: row;
           align-items: center;
           gap: var(--boxel-sp-sm);
         }
-
-        .card-tags,
-        .date-info-container {
+        .priority {
           display: none;
         }
-        .task-title {
-          font-size: var(--boxel-font-size-sm);
-          -webkit-line-clamp: 1;
+        header {
+          flex-wrap: nowrap;
         }
-      }
-
-      /* Extra styles for small size */
-      @container (width <= 400px) and (height <= 58px) {
-        footer {
+        .date-info-container .date-status-pill {
+          display: none;
+        }
+        .card-assignee {
           display: none;
         }
       }
 
-      /* Extra styles for super narrow height */
-      @container (aspect-ratio > 6.0) and (height <= 78px) {
+      /*Aspect Ratio 8.6, 500px × 58px*/
+      @container fitted-card (aspect-ratio > 6.0) {
         .task-card {
           padding: var(--boxel-sp-xs);
+          flex-direction: row;
+          align-items: center;
+          gap: var(--boxel-sp-sm);
         }
 
         .card-tags,
@@ -430,16 +419,9 @@ export class FittedTask extends Component<typeof TaskBase> {
           margin-top: 0;
           margin-left: auto;
         }
-      }
-
-      /* Wide Container (aspect-ratio > 2.0) */
-      @container (aspect-ratio > 2.0) {
-        .task-card {
-          gap: var(--boxel-sp-xxxs);
-        }
-
-        .task-title {
-          -webkit-line-clamp: 1;
+        .task-completion-status {
+          --boxel-circle-size: 18px;
+          --boxel-border-radius: var(--boxel-border-radius-xs);
         }
       }
     </style>
@@ -524,7 +506,18 @@ export class BaseTaskPriority extends LooseGooseyField {
       return this.selectedPriority?.icon;
     }
     <template>
-      <this.selectedIcon width='14px' height='14px' />
+      <div class='icon-container'>
+        <this.selectedIcon width='14px' height='14px' />
+      </div>
+      <style scoped>
+        .icon-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
     </template>
   };
 }
@@ -572,7 +565,7 @@ function shortenId(id: string): string {
   return decimal.toString(36).padStart(6, '0');
 }
 
-function getDueDateStatus(dueDateString: string | null) {
+export function getDueDateStatus(dueDateString: string | null) {
   if (!dueDateString) return null;
 
   const dueDate = new Date(dueDateString);