diff --git a/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json b/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
index 78917998eb..30d6e08f7e 100644
--- a/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
+++ b/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
@@ -46,7 +46,7 @@
       },
       "primaryContact": {
         "links": {
-          "self": "../Customer/dddaeabf-1e95-480c-b158-0873e31fc66c"
+          "self": "../Lead/4e70a791-dd4e-4b39-99a1-bb8070392437"
         }
       },
       "contacts": {
diff --git a/packages/experiments-realm/CRMTask/0b1acd22-9ff8-4ea0-b6c3-1c00243057b2.json b/packages/experiments-realm/CRMTask/0b1acd22-9ff8-4ea0-b6c3-1c00243057b2.json
new file mode 100644
index 0000000000..805ade71a6
--- /dev/null
+++ b/packages/experiments-realm/CRMTask/0b1acd22-9ff8-4ea0-b6c3-1c00243057b2.json
@@ -0,0 +1,68 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 1,
+        "label": "In Progress",
+        "color": "#FFB74D",
+        "completed": false
+      },
+      "dateRange": {
+        "start": null,
+        "end": null
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Call on discussion about next step",
+      "details": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "crmApp": {
+        "links": {
+          "self": null
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
+      "contact": {
+        "links": {
+          "self": null
+        }
+      },
+      "account": {
+        "links": {
+          "self": "../Account/be0192c4-e566-40ee-8a57-f88f7ab37e53"
+        }
+      },
+      "deal": {
+        "links": {
+          "self": null
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../crm/task",
+        "name": "CRMTask"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/CRMTask/27c5519e-4b58-4e1f-a158-27074d46c782.json b/packages/experiments-realm/CRMTask/27c5519e-4b58-4e1f-a158-27074d46c782.json
index 8779cf92c6..2823d823b9 100644
--- a/packages/experiments-realm/CRMTask/27c5519e-4b58-4e1f-a158-27074d46c782.json
+++ b/packages/experiments-realm/CRMTask/27c5519e-4b58-4e1f-a158-27074d46c782.json
@@ -3,14 +3,14 @@
     "type": "card",
     "attributes": {
       "status": {
-        "index": 0,
-        "label": "Not Started",
-        "color": null,
-        "completed": false
+        "index": 2,
+        "label": "Done",
+        "color": "#66BB6A",
+        "completed": true
       },
       "dateRange": {
-        "start": null,
-        "end": null
+        "start": "2025-01-22",
+        "end": "2025-02-04"
       },
       "priority": {
         "index": 2,
@@ -44,7 +44,7 @@
       },
       "account": {
         "links": {
-          "self": null
+          "self": "../Account/be0192c4-e566-40ee-8a57-f88f7ab37e53"
         }
       },
       "deal": {
diff --git a/packages/experiments-realm/CRMTask/4139bf52-03bf-41a9-a424-f5598d4feb27.json b/packages/experiments-realm/CRMTask/4139bf52-03bf-41a9-a424-f5598d4feb27.json
index f1583c5fe6..a0c1824d26 100644
--- a/packages/experiments-realm/CRMTask/4139bf52-03bf-41a9-a424-f5598d4feb27.json
+++ b/packages/experiments-realm/CRMTask/4139bf52-03bf-41a9-a424-f5598d4feb27.json
@@ -44,7 +44,7 @@
       },
       "account": {
         "links": {
-          "self": null
+          "self": "../Account/be0192c4-e566-40ee-8a57-f88f7ab37e53"
         }
       },
       "deal": {
@@ -52,9 +52,9 @@
           "self": null
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/8a14f671-4daf-4195-aca5-85dc143d15b8"
         }
       }
     },
diff --git a/packages/experiments-realm/CRMTask/bfefcf0b-3b24-4bfc-818a-54317e6673e1.json b/packages/experiments-realm/CRMTask/bfefcf0b-3b24-4bfc-818a-54317e6673e1.json
index aa0d810e38..2d9c24201a 100644
--- a/packages/experiments-realm/CRMTask/bfefcf0b-3b24-4bfc-818a-54317e6673e1.json
+++ b/packages/experiments-realm/CRMTask/bfefcf0b-3b24-4bfc-818a-54317e6673e1.json
@@ -3,9 +3,9 @@
     "type": "card",
     "attributes": {
       "status": {
-        "index": 1,
-        "label": "In Progress",
-        "color": null,
+        "index": 0,
+        "label": "Not Started",
+        "color": "#B0BEC5",
         "completed": false
       },
       "dateRange": {
@@ -44,7 +44,7 @@
       },
       "account": {
         "links": {
-          "self": null
+          "self": "../Account/77976251-6bc8-4a8c-972f-f9d588e8434d"
         }
       },
       "deal": {
diff --git a/packages/experiments-realm/Contact/461ab2c9-6787-4719-b7bb-d6fdd40414a8.json b/packages/experiments-realm/Contact/461ab2c9-6787-4719-b7bb-d6fdd40414a8.json
deleted file mode 100644
index 4f14f19a35..0000000000
--- a/packages/experiments-realm/Contact/461ab2c9-6787-4719-b7bb-d6fdd40414a8.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "data": {
-    "type": "card",
-    "attributes": {
-      "firstName": "Andy",
-      "lastName": null,
-      "position": "Sales Manager",
-      "department": "Sales",
-      "primaryEmail": null,
-      "secondaryEmail": null,
-      "phoneMobile": {
-        "phoneNumber": {
-          "number": null,
-          "countryCode": null
-        },
-        "type": {
-          "index": null,
-          "label": null,
-          "color": null,
-          "colorScheme": {
-            "foregroundColor": null,
-            "backgroundColor": null
-          }
-        }
-      },
-      "phoneOffice": {
-        "phoneNumber": {
-          "number": null,
-          "countryCode": null
-        },
-        "type": {
-          "index": null,
-          "label": null,
-          "color": null,
-          "colorScheme": {
-            "foregroundColor": null,
-            "backgroundColor": null
-          }
-        }
-      },
-      "socialLinks": [],
-      "statusTag": {
-        "lightColor": null,
-        "darkColor": null,
-        "index": null,
-        "label": null,
-        "color": null,
-        "colorScheme": {
-          "foregroundColor": null,
-          "backgroundColor": null
-        }
-      },
-      "description": null,
-      "thumbnailURL": null
-    },
-    "relationships": {
-      "company": {
-        "links": {
-          "self": null
-        }
-      }
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "../crm/contact",
-        "name": "Contact"
-      }
-    }
-  }
-}
\ 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 e52ca290ce..f8ece2ce3c 100644
--- a/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
+++ b/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
@@ -9,16 +9,34 @@
       "primaryEmail": "ethan@gmail.com",
       "secondaryEmail": "ethanSmith@gmail.com",
       "phoneMobile": {
-        "type": "mobile",
-        "country": 1,
-        "area": 510,
-        "number": 123456
+        "phoneNumber": {
+          "number": "2065553411",
+          "countryCode": "1"
+        },
+        "type": {
+          "index": 0,
+          "label": "Mobile",
+          "color": null,
+          "colorScheme": {
+            "foregroundColor": null,
+            "backgroundColor": null
+          }
+        }
       },
       "phoneOffice": {
-        "type": "office",
-        "country": 1,
-        "area": 510,
-        "number": 2442322
+        "phoneNumber": {
+          "number": "2065551123",
+          "countryCode": null
+        },
+        "type": {
+          "index": 2,
+          "label": "Work",
+          "color": null,
+          "colorScheme": {
+            "foregroundColor": null,
+            "backgroundColor": null
+          }
+        }
       },
       "socialLinks": [
         {
@@ -47,4 +65,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Lead/4e70a791-dd4e-4b39-99a1-bb8070392437.json b/packages/experiments-realm/Lead/4e70a791-dd4e-4b39-99a1-bb8070392437.json
index e908433be9..d51f8bd864 100644
--- a/packages/experiments-realm/Lead/4e70a791-dd4e-4b39-99a1-bb8070392437.json
+++ b/packages/experiments-realm/Lead/4e70a791-dd4e-4b39-99a1-bb8070392437.json
@@ -10,22 +10,32 @@
       "secondaryEmail": null,
       "phoneMobile": {
         "phoneNumber": {
-          "number": "2065551111",
+          "number": "2065521411",
           "countryCode": "1"
         },
         "type": {
           "index": 0,
-          "label": "Mobile"
+          "label": "Mobile",
+          "color": null,
+          "colorScheme": {
+            "foregroundColor": null,
+            "backgroundColor": null
+          }
         }
       },
       "phoneOffice": {
         "phoneNumber": {
-          "number": null,
+          "number": "2062851123",
           "countryCode": null
         },
         "type": {
-          "index": null,
-          "label": null
+          "index": 2,
+          "label": "Work",
+          "color": null,
+          "colorScheme": {
+            "foregroundColor": null,
+            "backgroundColor": null
+          }
         }
       },
       "socialLinks": [
@@ -38,17 +48,6 @@
           "value": "@johnsmith"
         }
       ],
-      "statusTag": {
-        "lightColor": "#93C5FD",
-        "darkColor": "#3B82F6",
-        "index": null,
-        "label": "Lead",
-        "color": null,
-        "colorScheme": {
-          "foregroundColor": null,
-          "backgroundColor": null
-        }
-      },
       "description": "Showed interest through website contact form",
       "thumbnailURL": "https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg"
     },
@@ -66,4 +65,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 be6cc6b157..8c9ad9f916 100644
--- a/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
+++ b/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
@@ -9,16 +9,34 @@
       "primaryEmail": "liam@gmail.com",
       "secondaryEmail": "liamOConnor@gmail.com",
       "phoneMobile": {
-        "type": "mobile",
-        "country": 1,
-        "area": 510,
-        "number": 2323423
+        "phoneNumber": {
+          "number": "2165582411",
+          "countryCode": "1"
+        },
+        "type": {
+          "index": 0,
+          "label": "Mobile",
+          "color": null,
+          "colorScheme": {
+            "foregroundColor": null,
+            "backgroundColor": null
+          }
+        }
       },
       "phoneOffice": {
-        "type": "office",
-        "country": 1,
-        "area": 510,
-        "number": 1231232
+        "phoneNumber": {
+          "number": "2165551123",
+          "countryCode": null
+        },
+        "type": {
+          "index": 2,
+          "label": "Work",
+          "color": null,
+          "colorScheme": {
+            "foregroundColor": null,
+            "backgroundColor": null
+          }
+        }
       },
       "socialLinks": [
         {
diff --git a/packages/experiments-realm/components/avatar-group.gts b/packages/experiments-realm/components/avatar-group.gts
index fdd3deee5e..6fa7f9ff70 100644
--- a/packages/experiments-realm/components/avatar-group.gts
+++ b/packages/experiments-realm/components/avatar-group.gts
@@ -58,7 +58,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
         text-overflow: ellipsis;
         overflow: hidden;
         margin: 0;
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size);
         font-weight: 600;
         letter-spacing: var(--boxel-lsp-sm);
       }
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index b13dcdad7d..2feaf29641 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -4,7 +4,7 @@ import {
   contains,
   realmURL,
 } from 'https://cardstack.com/base/card-api';
-import { Component } from 'https://cardstack.com/base/card-api';
+import { Component, BaseDef } from 'https://cardstack.com/base/card-api';
 import GlimmerComponent from '@glimmer/component';
 import {
   field,
@@ -38,6 +38,15 @@ import { Pill } from '@cardstack/boxel-ui/components';
 import { Query } from '@cardstack/runtime-common/query';
 import { getCards } from '@cardstack/runtime-common';
 import { Deal } from './deal';
+import type { LooseSingleCardDocument } from '@cardstack/runtime-common';
+import { restartableTask } from 'ember-concurrency';
+import { on } from '@ember/modifier';
+import { not } from '@cardstack/boxel-ui/helpers';
+
+const taskSource = {
+  module: new URL('./task', import.meta.url).href,
+  name: 'CRMTask',
+};
 
 export const urgencyTagValues = [
   {
@@ -139,6 +148,10 @@ class IsolatedTemplate extends Component<typeof Account> {
     return [this.realmURL?.href];
   }
 
+  get accountId() {
+    return this.args.model.id;
+  }
+
   // Query All Active Deal that linked to current Account
   get dealQuery(): Query {
     return {
@@ -155,10 +168,93 @@ class IsolatedTemplate extends Component<typeof Account> {
     };
   }
 
+  get activeTasksQuery(): Query {
+    let everyArr = [];
+    if (this.accountId) {
+      everyArr.push({
+        eq: {
+          'account.id': this.accountId,
+        },
+      });
+    }
+    return {
+      filter: {
+        on: taskSource,
+        every: everyArr,
+      },
+    };
+  }
+
   deals = getCards(this.dealQuery, this.realmHrefs, {
     isLive: true,
   });
 
+  activeTasks = getCards(this.activeTasksQuery, this.realmHrefs, {
+    isLive: true,
+  });
+
+  private _createNewTask = restartableTask(async () => {
+    let doc: LooseSingleCardDocument = {
+      data: {
+        type: 'card',
+        attributes: {
+          name: null,
+          details: null,
+          status: {
+            index: 1,
+            label: 'In Progress',
+          },
+          priority: {
+            index: null,
+            label: null,
+          },
+          description: null,
+          thumbnailURL: null,
+        },
+        relationships: {
+          assignee: {
+            links: {
+              self: null,
+            },
+          },
+          account: {
+            links: {
+              self: this.accountId ?? null,
+            },
+          },
+        },
+        meta: {
+          adoptsFrom: taskSource,
+        },
+      },
+    };
+
+    await this.args.context?.actions?.createCard?.(
+      taskSource,
+      new URL(taskSource.module),
+      {
+        realmURL: this.realmURL,
+        doc,
+      },
+    );
+  });
+
+  createNewTask = () => {
+    this._createNewTask.perform();
+  };
+
+  get activeTasksCount() {
+    const tasks = this.activeTasks;
+    if (!tasks || tasks.isLoading) {
+      return 0;
+    }
+    return tasks.instances?.length ?? 0;
+  }
+
+  get hasActiveTasks() {
+    return this.activeTasksCount > 0;
+  }
+
   get activeDealsCount() {
     const deals = this.deals;
     if (!deals || deals.isLoading) {
@@ -445,6 +541,57 @@ class IsolatedTemplate extends Component<typeof Account> {
           </:content>
         </SummaryCard>
       </:activities>
+
+      <:tasks>
+        <SummaryCard class='tasks-summary-card'>
+          <:title>
+            <h2 class='activity-title'>Upcoming Tasks</h2>
+          </:title>
+          <:icon>
+            <BoxelButton
+              @kind='primary'
+              class='activity-button-mobile'
+              data-test-settings-button
+              @disabled={{this.activeTasks.isLoading}}
+              @loading={{this._createNewTask.isRunning}}
+              {{on 'click' this.createNewTask}}
+            >
+              {{#if (not this._createNewTask.isRunning)}}
+                <PlusIcon />
+              {{/if}}
+            </BoxelButton>
+            <BoxelButton
+              @kind='primary'
+              @size='base'
+              class='activity-button-desktop'
+              @disabled={{this.activeTasks.isLoading}}
+              @loading={{this._createNewTask.isRunning}}
+              data-test-settings-button
+              {{on 'click' this.createNewTask}}
+            >
+              {{#if (not this._createNewTask.isRunning)}}
+                <PlusIcon />
+              {{/if}}
+              New Task
+            </BoxelButton>
+          </:icon>
+          <:content>
+            {{#if this.activeTasks.isLoading}}
+              <div class='loading-skeleton'>Loading...</div>
+            {{else}}
+              {{#if this.hasActiveTasks}}
+                {{#each this.activeTasks.instances as |task|}}
+                  {{#let (getComponent task) as |Component|}}
+                    <Component @format='embedded' @displayContainer={{false}} />
+                  {{/let}}
+                {{/each}}
+              {{else}}
+                <p class='description'>No Upcoming Tasks</p>
+              {{/if}}
+            {{/if}}
+          </:content>
+        </SummaryCard>
+      </:tasks>
     </AccountPageLayout>
 
     <style scoped>
@@ -516,11 +663,17 @@ class IsolatedTemplate extends Component<typeof Account> {
       .activity-button-desktop {
         display: inline-flex;
       }
-      .activities-summary-card {
+      .activities-summary-card,
+      .tasks-summary-card {
         --summary-card-padding: var(--boxel-sp-xl) var(--boxel-sp);
+        --summary-card-gap: var(--boxel-sp-lg);
         container-type: inline-size;
         container-name: activities-summary-card;
       }
+      .tasks-summary-card :where(.task-card) {
+        --task-card-padding: var(--boxel-sp) 0;
+        border-top: 1px solid var(--boxel-200);
+      }
       .activity-title {
         font: 600 var(--boxel-font-med);
         letter-spacing: var(--boxel-lsp-xxs);
@@ -545,6 +698,15 @@ class IsolatedTemplate extends Component<typeof Account> {
         --profile-avatar-icon-border: 0px;
         flex-shrink: 0;
       }
+      .loading-skeleton {
+        height: 60px;
+        width: 100%;
+        background-color: var(--boxel-100);
+        border-radius: var(--boxel-border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
       @container activities-summary-card (max-width: 447px) {
         .activity-button-mobile {
@@ -772,6 +934,7 @@ interface AccountPageLayoutArgs {
     header: [];
     summary: [];
     activities: [];
+    tasks: [];
   };
   Element: HTMLElement;
 }
@@ -782,6 +945,7 @@ class AccountPageLayout extends GlimmerComponent<AccountPageLayoutArgs> {
       {{yield to='header'}}
       {{yield to='summary'}}
       {{yield to='activities'}}
+      {{yield to='tasks'}}
     </div>
 
     <style scoped>
@@ -796,3 +960,7 @@ class AccountPageLayout extends GlimmerComponent<AccountPageLayoutArgs> {
     </style>
   </template>
 }
+
+function getComponent(cardOrField: BaseDef) {
+  return cardOrField.constructor.getComponent(cardOrField);
+}
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index 2a009c4f06..b03022a39b 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -57,6 +57,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
         @userId={{@model.id}}
         @name={{@model.name}}
         @thumbnailURL={{@model.thumbnailURL}}
+        class='avatar-group-container'
       >
         <:content>
           <@fields.company @format='atom' @displayContainer={{false}} />
@@ -83,9 +84,14 @@ class EmbeddedTemplate extends Component<typeof Contact> {
 
     <style scoped>
       .embedded-contact-card {
+        --entity-display-icon-size: 17px;
+        --entity-display-title-font-weight: 300;
+        --entity-display-content-font-weight: 300;
+        --entity-display-content-gap: var(--boxel-sp-xs);
+        --fitted-contact-card-padding: calc(var(--boxel-sp-lg) - 2px);
         width: 100%;
         height: 100%;
-        padding: var(--boxel-sp);
+        padding: var(--boxel-sp-lg);
         overflow: hidden;
         display: grid;
         gap: var(--boxel-sp-sm);
@@ -94,23 +100,51 @@ class EmbeddedTemplate extends Component<typeof Contact> {
           'contact-info'
           'links'
           'status';
-        grid-template-rows: max-content max-content max-content auto;
+        grid-template-rows: max-content max-content auto max-content;
+      }
+      .avatar-group-container {
+        grid-area: avatar-group-container;
+      }
+      .avatar-group-container
+        :where(.avatar-info .company-group .entity-title-tag-container) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
       }
       .contact-info {
+        grid-area: contact-info;
         display: flex;
         flex-direction: column;
-        gap: var(--boxel-sp-xxs);
+        gap: var(--boxel-sp-sm);
         font-size: var(--boxel-font-sm);
         color: var(--boxel-dark);
+        word-break: break-word;
+      }
+      .links {
+        grid-area: links;
+        font-size: var(--boxel-font-xs);
+        align-self: normal;
+        margin-top: auto;
       }
       .links :deep(div) {
         display: flex;
         gap: var(--boxel-sp-xxxs);
         flex-wrap: wrap;
       }
+      .links :deep(.pill) {
+        --boxel-social-link-pill-size: calc(var(--boxel-font-size-xxl) - 2px);
+        width: var(--boxel-social-link-pill-size);
+        height: var(--boxel-social-link-pill-size);
+        --default-pill-border: 1px solid var(--boxel-300);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
       .crm-status-pill {
+        grid-area: status;
         width: fit-content;
-        margin-top: auto;
       }
     </style>
   </template>
@@ -135,18 +169,10 @@ class FittedTemplate extends Component<typeof Contact> {
       </AvatarGroup>
 
       <div class='contact-info'>
-        <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>
+        <@fields.primaryEmail @format='atom' />
+        <@fields.secondaryEmail @format='atom' />
+        <@fields.phoneMobile @format='atom' />
+        <@fields.phoneOffice @format='atom' />
       </div>
 
       {{#if this.hasSocialLinks}}
@@ -162,21 +188,25 @@ class FittedTemplate extends Component<typeof Contact> {
 
     <style scoped>
       .fitted-contact-card {
-        --icon-size: 16px;
+        --entity-display-icon-size: 17px;
+        --entity-display-title-font-weight: 300;
+        --entity-display-content-font-weight: 300;
+        --entity-display-content-gap: var(--boxel-sp-xs);
+        --fitted-contact-card-padding: calc(var(--boxel-sp-lg) - 2px);
         width: 100%;
         height: 100%;
         min-width: 100px;
         min-height: 29px;
         overflow: hidden;
         display: grid;
-        gap: var(--boxel-sp-xs);
-        padding: var(--boxel-sp-xs);
+        gap: var(--boxel-sp-lg);
+        padding: var(--fitted-contact-card-padding);
         grid-template-areas:
           'avatar-group-container'
           'contact-info'
           'links'
           'status';
-        grid-template-rows: max-content max-content max-content auto;
+        grid-template-rows: max-content max-content auto max-content;
       }
       .avatar-group-container {
         grid-area: avatar-group-container;
@@ -193,30 +223,37 @@ class FittedTemplate extends Component<typeof Contact> {
         grid-area: contact-info;
         display: flex;
         flex-direction: column;
-        gap: var(--boxel-sp-xxs);
+        gap: var(--boxel-sp-sm);
         font-size: var(--boxel-font-sm);
         color: var(--boxel-dark);
         word-break: break-word;
       }
-      .links {
-        grid-area: links;
-      }
       .crm-status-pill {
         grid-area: status;
         width: fit-content;
-        margin-top: auto;
       }
       .links {
+        grid-area: links;
         font-size: var(--boxel-font-xs);
         align-self: normal;
+        margin-top: auto;
       }
       .links :deep(div) {
         display: flex;
         gap: var(--boxel-sp-xxxs);
         flex-wrap: wrap;
       }
+      .links :deep(.pill) {
+        --boxel-social-link-pill-size: calc(var(--boxel-font-size-xxl) - 2px);
+        width: var(--boxel-social-link-pill-size);
+        height: var(--boxel-social-link-pill-size);
+        --default-pill-border: 1px solid var(--boxel-300);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
       .avatar-group-container :where(.avatar-thumbnail) {
-        --profile-avatar-icon-size: 55px;
+        --profile-avatar-icon-size: 60px;
       }
 
       /* Catch all because contact info is too dense*/
@@ -226,10 +263,10 @@ class FittedTemplate extends Component<typeof Contact> {
             'avatar-group-container'
             'links'
             'status';
-          grid-template-rows: max-content max-content auto;
+          grid-template-rows: max-content auto max-content;
         }
         .avatar-group-container :where(.avatar-thumbnail) {
-          --profile-avatar-icon-size: 55px;
+          --profile-avatar-icon-size: 60px;
         }
         .contact-info {
           display: none;
@@ -242,7 +279,7 @@ class FittedTemplate extends Component<typeof Contact> {
             'avatar-group-container'
             'links'
             'status';
-          grid-template-rows: max-content max-content auto;
+          grid-template-rows: max-content auto max-content;
           gap: var(--boxel-sp-xs);
         }
         .avatar-group-container {
@@ -265,7 +302,7 @@ class FittedTemplate extends Component<typeof Contact> {
             'avatar-group-container'
             'links'
             'status';
-          grid-template-rows: max-content max-content auto;
+          grid-template-rows: max-content auto max-content;
           gap: var(--boxel-sp-xs);
         }
         .contact-info {
@@ -376,10 +413,10 @@ class FittedTemplate extends Component<typeof Contact> {
             'avatar-group-container'
             'status'
             'links';
-          grid-template-rows: max-content max-content auto;
+          grid-template-rows: max-content auto max-content;
         }
         .avatar-group-container :where(.avatar-thumbnail) {
-          --profile-avatar-icon-size: 55px;
+          --profile-avatar-icon-size: 60px;
         }
         .contact-info {
           display: none;
@@ -393,10 +430,10 @@ class FittedTemplate extends Component<typeof Contact> {
             'contact-info'
             'links'
             'status';
-          grid-template-rows: max-content max-content max-content auto;
+          grid-template-rows: max-content max-content auto max-content;
         }
         .avatar-group-container :where(.avatar-thumbnail) {
-          --profile-avatar-icon-size: 55px;
+          --profile-avatar-icon-size: 60px;
         }
       }
 
@@ -407,10 +444,10 @@ class FittedTemplate extends Component<typeof Contact> {
             'contact-info'
             'links'
             'status';
-          grid-template-rows: max-content max-content max-content auto;
+          grid-template-rows: max-content max-content auto max-content;
         }
         .avatar-group-container :where(.avatar-thumbnail) {
-          --profile-avatar-icon-size: 55px;
+          --profile-avatar-icon-size: 60px;
         }
       }
 
@@ -421,7 +458,7 @@ class FittedTemplate extends Component<typeof Contact> {
             'avatar-group-container'
             'links'
             'status';
-          grid-template-rows: max-content max-content auto;
+          grid-template-rows: max-content auto max-content;
           gap: var(--boxel-sp-xs);
         }
         .contact-info {
@@ -487,8 +524,8 @@ class FittedTemplate extends Component<typeof Contact> {
       @container fitted-card ((1.0 < aspect-ratio) and (78px <= height <= 114px)) {
         .fitted-contact-card {
           grid-template: 'avatar-group-container';
-          grid-template-columns: 1fr;
-          grid-template-rows: max-content;
+          grid-template-columns: min-content;
+          padding: var(--boxel-sp-xs);
           gap: var(--boxel-sp-xs);
         }
         .avatar-group-container {
@@ -536,7 +573,8 @@ class FittedTemplate extends Component<typeof Contact> {
       @container fitted-card ((1.0 < aspect-ratio) and (226px <= width <= 499px) and (58px <= height <= 77px)) {
         .fitted-contact-card {
           grid-template: 'avatar-group-container';
-          grid-template-columns: 1fr;
+          grid-template-columns: min-content;
+          padding: var(--boxel-sp-xs);
           gap: var(--boxel-sp-xs);
         }
         .avatar-group-container {
@@ -557,7 +595,8 @@ class FittedTemplate extends Component<typeof Contact> {
       @container fitted-card ((1.0 < aspect-ratio) and (width <= 225px) and (58px <= height <= 77px)) {
         .fitted-contact-card {
           grid-template: 'avatar-group-container';
-          grid-template-columns: 1fr;
+          grid-template-columns: min-content;
+          padding: var(--boxel-sp-xs);
           gap: var(--boxel-sp-xs);
         }
         .avatar-group-container {
@@ -578,7 +617,8 @@ class FittedTemplate extends Component<typeof Contact> {
       @container fitted-card ((1.0 < aspect-ratio) and (height <= 57px)) {
         .fitted-contact-card {
           grid-template: 'avatar-group-container';
-          grid-template-columns: 1fr;
+          grid-template-columns: min-content;
+          padding: var(--boxel-sp-xs);
           gap: var(--boxel-sp-xs);
         }
         .avatar-group-container {
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
index d9450cec00..e280946bcf 100644
--- a/packages/experiments-realm/crm/deal.gts
+++ b/packages/experiments-realm/crm/deal.gts
@@ -14,7 +14,7 @@ import DateField from 'https://cardstack.com/base/date';
 import GlimmerComponent from '@glimmer/component';
 import SummaryCard from '../components/summary-card';
 import SummaryGridContainer from '../components/summary-grid-container';
-import { Pill } from '@cardstack/boxel-ui/components';
+import { Pill, BoxelButton } 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';
@@ -43,6 +43,9 @@ import BooleanField from 'https://cardstack.com/base/boolean';
 import { getCards } from '@cardstack/runtime-common';
 import { Query } from '@cardstack/runtime-common/query';
 import { Company } from './company';
+import type { LooseSingleCardDocument } from '@cardstack/runtime-common';
+import { restartableTask } from 'ember-concurrency';
+import { on } from '@ember/modifier';
 
 interface DealSizeSummary {
   summary: string;
@@ -50,6 +53,11 @@ interface DealSizeSummary {
   positive: boolean;
 }
 
+const taskSource = {
+  module: new URL('./task', import.meta.url).href,
+  name: 'CRMTask',
+};
+
 class IsolatedTemplate extends Component<typeof Deal> {
   get logoURL() {
     //We default to account thumbnail
@@ -90,6 +98,10 @@ class IsolatedTemplate extends Component<typeof Deal> {
     return [this.realmURL?.href];
   }
 
+  get dealId() {
+    return this.args.model.id;
+  }
+
   get dealQuery(): Query {
     return {
       filter: {
@@ -101,10 +113,81 @@ class IsolatedTemplate extends Component<typeof Deal> {
     };
   }
 
+  get activeTasksQuery(): Query {
+    let everyArr = [];
+    if (this.dealId) {
+      everyArr.push({
+        eq: {
+          'deal.id': this.dealId,
+        },
+      });
+    }
+    return {
+      filter: {
+        on: taskSource,
+        every: everyArr,
+      },
+    };
+  }
+
   query = getCards(this.dealQuery, this.realmHrefs, {
     isLive: true,
   });
 
+  activeTasks = getCards(this.activeTasksQuery, this.realmHrefs, {
+    isLive: true,
+  });
+
+  private _createNewTask = restartableTask(async () => {
+    let doc: LooseSingleCardDocument = {
+      data: {
+        type: 'card',
+        attributes: {
+          name: null,
+          details: null,
+          status: {
+            index: 1,
+            label: 'In Progress',
+          },
+          priority: {
+            index: null,
+            label: null,
+          },
+          description: null,
+          thumbnailURL: null,
+        },
+        relationships: {
+          assignee: {
+            links: {
+              self: null,
+            },
+          },
+          deal: {
+            links: {
+              self: this.dealId ?? null,
+            },
+          },
+        },
+        meta: {
+          adoptsFrom: taskSource,
+        },
+      },
+    };
+
+    await this.args.context?.actions?.createCard?.(
+      taskSource,
+      new URL(taskSource.module),
+      {
+        realmURL: this.realmURL,
+        doc,
+      },
+    );
+  });
+
+  createNewTask = () => {
+    this._createNewTask.perform();
+  };
+
   @action dealSizeSummary(deals: CardDef[]): DealSizeSummary | null {
     //currently only assumes everything works in USD
     let nonZeroDeals = (deals as Deal[]).filter(
@@ -360,6 +443,37 @@ class IsolatedTemplate extends Component<typeof Deal> {
             </:content>
           </SummaryCard>
 
+          <SummaryCard>
+            <:title>
+              <label>Active Tasks</label>
+            </:title>
+            <:icon>
+              <BoxelButton
+                class='sidebar-create-button content-header-row-1'
+                @kind='primary'
+                @size='extra-small'
+                @disabled={{this.activeTasks.isLoading}}
+                @loading={{this._createNewTask.isRunning}}
+                {{on 'click' this.createNewTask}}
+              >
+                New Task
+              </BoxelButton>
+            </:icon>
+            <:content>
+              <div>
+                {{#if this.activeTasks.isLoading}}
+                  Loading...
+                {{else if this.activeTasks.instances}}
+                  {{this.activeTasks.instances.length}}
+                {{else}}
+                  <div class='default-value'>
+                    No Active Tasks
+                  </div>
+                {{/if}}
+              </div>
+            </:content>
+          </SummaryCard>
+
         </SummaryGridContainer>
       </:summary>
     </DealPageLayout>
diff --git a/packages/experiments-realm/crm/task.gts b/packages/experiments-realm/crm/task.gts
index be0d77f374..a317ff4628 100644
--- a/packages/experiments-realm/crm/task.gts
+++ b/packages/experiments-realm/crm/task.gts
@@ -18,8 +18,14 @@ import { Contact } from './contact';
 import { Representative } from './representative';
 import { Account } from './account';
 import { Deal } from './deal';
-import { Task, TaskStatusField, getDueDateStatus } from '../task';
+import {
+  Task,
+  TaskStatusField,
+  getDueDateStatus,
+  TaskCompletionStatus,
+} from '../task';
 import { CrmApp } from '../crm-app';
+import EntityDisplayWithIcon from '../components/entity-icon-display';
 
 export class Issues extends CardDef {
   static displayName = 'Issues';
@@ -40,6 +46,10 @@ function shortenId(id: string): string {
 }
 
 class TaskIsolated extends Component<typeof CRMTask> {
+  get taskTitle() {
+    return this.args.model.name ?? 'No Task Title';
+  }
+
   get dueDate() {
     return this.args.model.dateRange?.end;
   }
@@ -60,7 +70,7 @@ class TaskIsolated extends Component<typeof CRMTask> {
     <div class='task-container'>
       <header>
         <div class='left-column'>
-          <h2 class='task-title'>{{@model.name}}</h2>
+          <h2 class='task-title'>{{this.taskTitle}}</h2>
           <div class='status-label'>
             <span class='text-gray'>in</span>
             {{@model.status.label}}
@@ -188,7 +198,7 @@ class TaskIsolated extends Component<typeof CRMTask> {
       .task-container {
         --task-font-weight-500: 500;
         --task-font-weight-600: 600;
-        --tasl-font-size-extra-small: calc(var(--boxel-font-size-xs) * 0.95);
+        --task-font-size-extra-small: calc(var(--boxel-font-size-xs) * 0.95);
         padding: var(--boxel-sp-lg);
         container-type: inline-size;
       }
@@ -270,7 +280,7 @@ class TaskIsolated extends Component<typeof CRMTask> {
         height: 24px;
         border: none;
         border-radius: 5px 0 0 5px;
-        font-size: var(--tasl-font-size-extra-small);
+        font-size: var(--task-font-size-extra-small);
         font-weight: var(--task-font-weight-500);
         position: relative;
         padding: var(--boxel-sp-5xs) var(--boxel-sp-sm) var(--boxel-sp-5xs)
@@ -284,7 +294,7 @@ class TaskIsolated extends Component<typeof CRMTask> {
         );
       }
       .calendar-icon-container {
-        font-size: var(--tasl-font-size-extra-small);
+        font-size: var(--task-font-size-extra-small);
         display: inline-flex;
         align-items: center;
         gap: var(--boxel-sp-xxxs);
@@ -356,6 +366,153 @@ class TaskIsolated extends Component<typeof CRMTask> {
   }
 }
 
+export class TaskEmbedded extends Component<typeof CRMTask> {
+  get taskTitle() {
+    return this.args.model.name ?? 'No Task Title';
+  }
+
+  get shortId() {
+    return this.args.model.shortId;
+  }
+
+  get hasShortId() {
+    return Boolean(this.shortId);
+  }
+
+  get visibleTags() {
+    return [this.args.fields.tags[0], this.args.fields.tags[1]].filter(Boolean);
+  }
+
+  get dueDate() {
+    return this.args.model.dateRange?.end;
+  }
+
+  get dueDateStatus() {
+    return this.dueDate ? getDueDateStatus(this.dueDate.toString()) : undefined;
+  }
+
+  get hasDueDate() {
+    return Boolean(this.dueDate);
+  }
+
+  get hasDueDateStatus() {
+    return Boolean(this.dueDateStatus);
+  }
+
+  get isCompleted() {
+    return this.args.model.status?.completed ?? false;
+  }
+
+  get hasStatus() {
+    return this.args.model.status?.label ?? false;
+  }
+
+  <template>
+    <div class='task-card'>
+      <EntityDisplayWithIcon
+        @title={{this.taskTitle}}
+        class='task-entity-display'
+      >
+        <:icon>
+          <TaskCompletionStatus
+            class='task-completion-status'
+            @completed={{this.isCompleted}}
+          />
+        </:icon>
+        <:content>
+          <div class='task-mobile-due-date-content'>
+            {{#if this.hasDueDate}}
+              <@fields.dateRange.end @format='atom' />
+            {{else}}
+              <span class='no-data-found-txt'>No Due Date Assigned</span>
+            {{/if}}
+          </div>
+        </:content>
+
+      </EntityDisplayWithIcon>
+
+      <aside class='task-desktop-side-info'>
+        {{#if this.hasShortId}}
+          <Pill
+            class='task-status-pill'
+            @pillBackgroundColor='var(--boxel-100)'
+          >
+            <:default>{{@model.shortId}}</:default>
+          </Pill>
+        {{/if}}
+
+        {{#if this.hasDueDate}}
+          <Pill
+            class='task-status-pill'
+            @pillBackgroundColor='var(--boxel-100)'
+          >
+            <:iconLeft>
+              <Calendar width='14px' height='14px' class='calendar-icon' />
+            </:iconLeft>
+            <:default>
+              <@fields.dateRange.end @format='atom' />
+            </:default>
+          </Pill>
+        {{/if}}
+
+        {{#if this.hasStatus}}
+          <Pill
+            class='task-status-pill'
+            @pillBackgroundColor={{@model.status.color}}
+          >
+            <:default>{{@model.status.label}}</:default>
+          </Pill>
+        {{/if}}
+      </aside>
+    </div>
+
+    <style scoped>
+      .task-card {
+        --entity-display-icon-size: 18px;
+        --entity-display-title-font-weight: 600;
+        width: 100%;
+        height: 100%;
+        padding: var(--task-card-padding, var(--boxel-sp));
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--task-card-gap, var(--boxel-sp-sm));
+        overflow: hidden;
+        container-type: inline-size;
+      }
+      .task-mobile-due-date-content {
+        display: none;
+      }
+      .task-entity-display :where(.entity-info) {
+        gap: 0;
+      }
+      .task-completion-status {
+        --boxel-circle-size: 14px;
+        --boxel-border-radius: var(--boxel-border-radius-xs);
+      }
+      .task-status-pill {
+        flex-shrink: 0;
+      }
+      aside.task-desktop-side-info {
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: end;
+        gap: var(--boxel-sp-xs);
+      }
+
+      @container (max-width: 600px) {
+        aside.task-desktop-side-info {
+          display: none;
+        }
+        .task-mobile-due-date-content {
+          display: block;
+        }
+      }
+    </style>
+  </template>
+}
+
 export class CRMTaskStatusField extends TaskStatusField {
   static values = [
     { index: 0, label: 'Not Started', color: '#B0BEC5', completed: false },
@@ -405,4 +562,5 @@ export class CRMTask extends Task {
   });
 
   static isolated = TaskIsolated;
+  static embedded = TaskEmbedded;
 }
diff --git a/packages/experiments-realm/phone-number.gts b/packages/experiments-realm/phone-number.gts
index e186326d94..9652b5be6e 100644
--- a/packages/experiments-realm/phone-number.gts
+++ b/packages/experiments-realm/phone-number.gts
@@ -130,32 +130,56 @@ export class ContactPhoneNumber extends FieldDef {
   @field type = contains(PhoneNumberType);
 
   static atom = class Atom extends Component<typeof ContactPhoneNumber> {
+    get hasPhoneNumber() {
+      return Boolean(this.args.model?.phoneNumber?.number);
+    }
+
+    get hasCountryCode() {
+      return Boolean(this.args.model?.phoneNumber?.countryCode);
+    }
+
+    get hasTypeLabel() {
+      return Boolean(this.args.model?.type?.label?.length);
+    }
+
+    get hasCountryCodeAndPhoneNumber() {
+      return (
+        this.args.model &&
+        this.hasCountryCode &&
+        this.hasPhoneNumber &&
+        this.hasTypeLabel
+      );
+    }
+
     <template>
-      <EntityDisplayWithIcon @underline={{false}}>
-        <:title>
-          {{#if @model.phoneNumber.countryCode}}
-            +{{@model.phoneNumber.countryCode}}{{@model.phoneNumber.number}}
-          {{else}}
-            {{@model.phoneNumber.number}}
-          {{/if}}
-        </:title>
-        <:icon>
-          <PhoneIcon class='icon' />
-        </:icon>
-        <:tag>
-          {{#if @model.type.label}}
-            <Pill class='pill-gray'>
-              {{@model.type.label}}
-            </Pill>
-          {{/if}}
-        </:tag>
-      </EntityDisplayWithIcon>
+      {{#if this.hasCountryCodeAndPhoneNumber}}
+        <EntityDisplayWithIcon @underline={{false}}>
+          <:title>
+            {{#if this.hasCountryCode}}
+              +{{@model.phoneNumber.countryCode}}{{@model.phoneNumber.number}}
+            {{else if this.hasPhoneNumber}}
+              {{@model.phoneNumber.number}}
+            {{/if}}
+          </:title>
+          <:icon>
+            <PhoneIcon class='icon' />
+          </:icon>
+          <:tag>
+            {{#if this.hasTypeLabel}}
+              <Pill class='pill-gray'>
+                {{@model.type.label}}
+              </Pill>
+            {{/if}}
+          </:tag>
+        </EntityDisplayWithIcon>
+      {{/if}}
       <style scoped>
         .icon {
           color: var(--boxel-400);
         }
         .pill-gray {
           --default-pill-padding: 0 var(--boxel-sp-xxxs);
+          --default-pill-font: 300 var(--boxel-font-xs);
           background-color: var(--boxel-200);
           border-color: transparent;
         }
diff --git a/packages/host/app/components/matrix/room-message.gts b/packages/host/app/components/matrix/room-message.gts
index 955b13e841..91b356a4f4 100644
--- a/packages/host/app/components/matrix/room-message.gts
+++ b/packages/host/app/components/matrix/room-message.gts
@@ -120,6 +120,7 @@ export default class RoomMessage extends Component<Signature> {
         @retryAction={{if @message.command (perform this.run) @retryAction}}
         @isPending={{@isPending}}
         data-test-boxel-message-from={{@message.author.name}}
+        data-test-boxel-message-instance-id={{@message.instanceId}}
         ...attributes
       >
         {{#if @message.command}}
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index f8e526b848..0c34cd8f9d 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -81,7 +81,7 @@ export default class Room extends Component<Signature> {
           @registerConversationScroller={{this.registerConversationScroller}}
           @setScrollPosition={{this.setScrollPosition}}
         >
-          {{#each this.messages as |message i|}}
+          {{#each this.messages key='eventId' as |message i|}}
             <RoomMessage
               @roomId={{@roomId}}
               @message={{message}}
diff --git a/packages/host/app/index.html b/packages/host/app/index.html
index 8bfad0e405..3b7dbdd566 100644
--- a/packages/host/app/index.html
+++ b/packages/host/app/index.html
@@ -14,6 +14,8 @@
       rel="stylesheet"
       href="{{rootURL}}assets/@cardstack/host.css"
     />
+    <link href="{{rootURL}}boxel-favicon.png" rel="shortcut icon" type="image/x-icon">
+    <link href="{{rootURL}}boxel-webclip.png" rel="apple-touch-icon">
 
     {{content-for "head-footer"}}
 
diff --git a/packages/host/app/lib/matrix-classes/message-builder.ts b/packages/host/app/lib/matrix-classes/message-builder.ts
index 9398f1ed6b..38844b167b 100644
--- a/packages/host/app/lib/matrix-classes/message-builder.ts
+++ b/packages/host/app/lib/matrix-classes/message-builder.ts
@@ -4,7 +4,10 @@ import { getOwner, setOwner } from '@ember/owner';
 
 import { inject as service } from '@ember/service';
 
-import { LooseSingleCardDocument } from '@cardstack/runtime-common';
+import {
+  LooseSingleCardDocument,
+  sanitizeHtml,
+} from '@cardstack/runtime-common';
 
 import {
   APP_BOXEL_COMMAND_MSGTYPE,
@@ -45,6 +48,7 @@ export default class MessageBuilder {
       index: number;
       serializedCardFromFragments: (eventId: string) => LooseSingleCardDocument;
       events: DiscreteMatrixEvent[];
+      commandResultEvent?: CommandResultEvent;
     },
   ) {
     setOwner(this, owner);
@@ -110,11 +114,13 @@ export default class MessageBuilder {
     return errorMessage;
   }
 
-  get formattedMessageForCommand() {
-    return `<p data-test-command-message class="command-message">${this.event.content.formatted_body}</p>`;
+  private get formattedMessageForCommand() {
+    return `<p data-test-command-message class="command-message">${sanitizeHtml(
+      this.event.content.formatted_body,
+    )}</p>`;
   }
 
-  async buildMessage(): Promise<Message> {
+  buildMessage(): Message {
     let { event } = this;
     let message = this.coreMessageArgs;
     message.errorMessage = this.errorMessage;
@@ -128,40 +134,88 @@ export default class MessageBuilder {
       event.content.data.toolCall
     ) {
       message.formattedMessage = this.formattedMessageForCommand;
-      message.command = await this.buildMessageCommand(message);
+      message.command = this.buildMessageCommand(message);
       message.isStreamingFinished = true;
     }
     return message;
   }
 
-  private async buildMessageCommand(message: Message) {
+  updateMessage(message: Message) {
+    if (this.event.content['m.relates_to']?.rel_type !== 'm.replace') {
+      return;
+    }
+
+    if (message.created.getTime() > this.event.origin_server_ts) {
+      message.created = new Date(this.event.origin_server_ts);
+      return;
+    }
+
+    message.message = this.event.content.body;
+    message.formattedMessage = this.event.content.formatted_body;
+    message.isStreamingFinished =
+      'isStreamingFinished' in this.event.content
+        ? this.event.content.isStreamingFinished
+        : undefined;
+    message.updated = new Date();
+
+    if (this.event.content.msgtype === APP_BOXEL_COMMAND_MSGTYPE) {
+      if (!message.command) {
+        message.command = this.buildMessageCommand(message);
+      }
+
+      message.isStreamingFinished = true;
+      message.formattedMessage = this.formattedMessageForCommand;
+
+      let command = this.event.content.data.toolCall;
+      message.command.name = command.name;
+      message.command.payload = command.arguments;
+    }
+  }
+
+  updateMessageCommandResult(message: Message) {
+    if (!message.command) {
+      message.command = this.buildMessageCommand(message);
+    }
+
+    if (this.builderContext.commandResultEvent) {
+      let event = this.builderContext.commandResultEvent;
+      message.command.commandStatus = event.content['m.relates_to']
+        .key as CommandStatus;
+      message.command.commandResultCardEventId =
+        event.content.msgtype === APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
+          ? event.content.data.cardEventId
+          : undefined;
+    }
+  }
+
+  private buildMessageCommand(message: Message) {
     let event = this.event as CommandEvent;
+    let commandResultEvent =
+      this.builderContext.commandResultEvent ??
+      (this.builderContext.events.find((e: any) => {
+        let r = e.content['m.relates_to'];
+        return (
+          e.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
+          r.rel_type === 'm.annotation' &&
+          (r.event_id === event!.content.data.eventId ||
+            r.event_id === event!.event_id ||
+            r.event_id === this.builderContext.effectiveEventId)
+        );
+      }) as CommandResultEvent | undefined);
+
     let command = event.content.data.toolCall;
-    let commandResultEvent = this.builderContext.events.find((e: any) => {
-      let r = e.content['m.relates_to'];
-      return (
-        e.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
-        r.rel_type === 'm.annotation' &&
-        (r.event_id === event.content.data.eventId ||
-          r.event_id === event.event_id ||
-          r.event_id === this.builderContext.effectiveEventId)
-      );
-    }) as CommandResultEvent | undefined;
-    let status = (commandResultEvent?.content?.['m.relates_to']?.key ||
-      'ready') as CommandStatus;
-    let commandResultCardEventId =
-      commandResultEvent?.content?.msgtype ===
-      APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
-        ? commandResultEvent.content.data.cardEventId
-        : undefined;
     let messageCommand = new MessageCommand(
       message,
       command.id,
       command.name,
       command.arguments,
       this.builderContext.effectiveEventId,
-      status,
-      commandResultCardEventId,
+      (commandResultEvent?.content['m.relates_to']?.key ||
+        'ready') as CommandStatus,
+      commandResultEvent?.content.msgtype ===
+      APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
+        ? commandResultEvent.content.data.cardEventId
+        : undefined,
       getOwner(this)!,
     );
     return messageCommand;
diff --git a/packages/host/app/lib/matrix-classes/message-command.ts b/packages/host/app/lib/matrix-classes/message-command.ts
index b0839b27ec..fd5b7d6bb4 100644
--- a/packages/host/app/lib/matrix-classes/message-command.ts
+++ b/packages/host/app/lib/matrix-classes/message-command.ts
@@ -2,6 +2,8 @@ import { setOwner } from '@ember/owner';
 import type Owner from '@ember/owner';
 import { inject as service } from '@ember/service';
 
+import { tracked } from '@glimmer/tracking';
+
 import type CardService from '@cardstack/host/services/card-service';
 import type CommandService from '@cardstack/host/services/command-service';
 import type MatrixService from '@cardstack/host/services/matrix-service';
@@ -13,17 +15,27 @@ import { Message } from './message';
 type CommandStatus = 'applied' | 'ready' | 'applying';
 
 export default class MessageCommand {
+  @tracked name: string;
+  @tracked payload: any;
+  @tracked commandStatus?: CommandStatus;
+  @tracked commandResultCardEventId?: string;
+
   constructor(
     public message: Message,
     public toolCallId: string,
-    public name: string,
-    public payload: any, //arguments of toolCall. Its not called arguments due to lint
+    name: string,
+    payload: any, //arguments of toolCall. Its not called arguments due to lint
     public eventId: string,
-    private commandStatus: CommandStatus,
-    public commandResultCardEventId: string | undefined,
+    commandStatus: CommandStatus,
+    commandResultCardEventId: string | undefined,
     owner: Owner,
   ) {
     setOwner(this, owner);
+
+    this.name = name;
+    this.payload = payload;
+    this.commandStatus = commandStatus;
+    this.commandResultCardEventId = commandResultCardEventId;
   }
 
   @service declare commandService: CommandService;
diff --git a/packages/host/app/lib/matrix-classes/message.ts b/packages/host/app/lib/matrix-classes/message.ts
index aab12ccaeb..93758af14d 100644
--- a/packages/host/app/lib/matrix-classes/message.ts
+++ b/packages/host/app/lib/matrix-classes/message.ts
@@ -1,3 +1,4 @@
+import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 
 import { EventStatus } from 'matrix-js-sdk';
@@ -45,23 +46,26 @@ interface RoomMessageOptional {
 export class Message implements RoomMessageInterface {
   @tracked formattedMessage: string;
   @tracked message: string;
+  @tracked command?: MessageCommand | null;
+  @tracked isStreamingFinished?: boolean;
 
   attachedCardIds?: string[] | null;
   attachedSkillCardIds?: string[] | null;
   index?: number;
   transactionId?: string | null;
-  isStreamingFinished?: boolean;
   errorMessage?: string;
   clientGeneratedId?: string;
-  command?: MessageCommand | null;
 
   author: RoomMember;
   status: EventStatus | null;
-  created: Date;
+  @tracked created: Date;
   updated: Date;
   eventId: string;
   roomId: string;
 
+  //This property is used for testing purpose
+  instanceId: string;
+
   constructor(init: RoomMessageInterface) {
     Object.assign(this, init);
     this.author = init.author;
@@ -72,6 +76,7 @@ export class Message implements RoomMessageInterface {
     this.updated = init.updated;
     this.status = init.status;
     this.roomId = init.roomId;
+    this.instanceId = guidFor(this);
   }
   get isRetryable() {
     return (
diff --git a/packages/host/app/resources/room.ts b/packages/host/app/resources/room.ts
index ed8c2dcd76..5eb859b4c0 100644
--- a/packages/host/app/resources/room.ts
+++ b/packages/host/app/resources/room.ts
@@ -11,6 +11,8 @@ import { type LooseSingleCardDocument } from '@cardstack/runtime-common';
 
 import {
   APP_BOXEL_CARDFRAGMENT_MSGTYPE,
+  APP_BOXEL_COMMAND_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
   DEFAULT_LLM,
 } from '@cardstack/runtime-common/matrix-constants';
 
@@ -25,6 +27,7 @@ import type {
   LeaveEvent,
   CardMessageEvent,
   MessageEvent,
+  CommandResultEvent,
 } from 'https://cardstack.com/base/matrix-event';
 
 import { SkillCard } from 'https://cardstack.com/base/skill-card';
@@ -59,7 +62,6 @@ interface Args {
 
 export class RoomResource extends Resource<Args> {
   private _previousRoomId: string | undefined;
-  private _messageCreateTimesCache: Map<string, number> = new Map();
   private _messageCache: TrackedMap<string, Message> = new TrackedMap();
   private _skillCardsCache: TrackedMap<string, SkillCard> = new TrackedMap();
   private _nameEventsCache: TrackedMap<string, RoomNameEvent> =
@@ -96,7 +98,6 @@ export class RoomResource extends Resource<Args> {
   }
 
   private resetCache() {
-    this._messageCreateTimesCache = new Map();
     this._messageCache = new TrackedMap();
     this._memberCache = new TrackedMap();
     this._fragmentCache = new TrackedMap();
@@ -244,13 +245,17 @@ export class RoomResource extends Resource<Args> {
 
   private async loadFromEvents(roomId: string) {
     let index = this._messageCache.size;
+
     for (let event of this.sortedEvents) {
       switch (event.type) {
         case 'm.room.member':
           await this.loadRoomMemberEvent(roomId, event);
           break;
         case 'm.room.message':
-          await this.loadRoomMessage(roomId, event, index);
+          this.loadRoomMessage({ roomId, event, index });
+          break;
+        case APP_BOXEL_COMMAND_RESULT_EVENT_TYPE:
+          this.updateMessageCommandResult({ roomId, event, index });
           break;
         case 'm.room.create':
           await this.loadRoomCreateEvent(event);
@@ -280,57 +285,35 @@ export class RoomResource extends Resource<Args> {
     });
   }
 
-  private async loadRoomMessage(
-    roomId: string,
-    event: MessageEvent | CommandEvent | CardMessageEvent,
-    index: number,
-  ) {
-    let effectiveEventId = event.event_id;
-    let update = false;
-    if (event.content['m.relates_to']?.rel_type == 'm.annotation') {
-      // ensure that we update a message when we see a reaction event for it, since we merge data from the reaction event
-      // into the message state (i.e. apply button, command result)
-      update = true;
-    } else if (event.content['m.relates_to']?.rel_type === 'm.replace') {
-      effectiveEventId = event.content['m.relates_to'].event_id;
-      if (
-        'isStreamingFinished' in event.content &&
-        !event.content.isStreamingFinished
-      ) {
-        // we don't need to process this event if it's not finished streaming,
-        // but we do need to capture the earliest create time and update the message
-        let earliestKnownCreateTime =
-          this._messageCreateTimesCache.get(effectiveEventId);
-        if (
-          !earliestKnownCreateTime ||
-          earliestKnownCreateTime > event.origin_server_ts
-        ) {
-          this._messageCreateTimesCache.set(
-            effectiveEventId,
-            event.origin_server_ts,
-          );
-          let alreadyProcessedMessage =
-            this._messageCache.get(effectiveEventId);
-          if (alreadyProcessedMessage) {
-            alreadyProcessedMessage.created = new Date(event.origin_server_ts);
-            alreadyProcessedMessage.message = event.content.body;
-            alreadyProcessedMessage.formattedMessage =
-              event.content.formatted_body;
-          }
-        }
-        return;
-      }
-      update = true;
-    }
-    if (this._messageCache.has(effectiveEventId) && !update) {
-      return;
-    }
+  private loadRoomMessage({
+    roomId,
+    event,
+    index,
+  }: {
+    roomId: string;
+    event: MessageEvent | CommandEvent | CardMessageEvent;
+    index: number;
+  }) {
     if (event.content.msgtype === APP_BOXEL_CARDFRAGMENT_MSGTYPE) {
-      if (!this._fragmentCache.has(effectiveEventId)) {
-        this._fragmentCache.set(effectiveEventId, event.content);
-      }
+      this._fragmentCache.set(event.event_id, event.content);
       return;
     }
+
+    this.upsertMessage({ roomId, event, index });
+  }
+
+  private upsertMessage({
+    roomId,
+    event,
+    index,
+  }: {
+    roomId: string;
+    event: MessageEvent | CommandEvent | CardMessageEvent;
+    index: number;
+  }) {
+    let effectiveEventId = this.getEffectiveEventId(event);
+
+    let message = this._messageCache.get(effectiveEventId);
     let author = this.upsertRoomMember({
       roomId,
       userId: event.sender,
@@ -344,26 +327,61 @@ export class RoomResource extends Resource<Args> {
       events: this.events,
     });
 
-    let messageObject = await messageBuilder.buildMessage();
-    if (messageObject) {
-      // if the message is a replacement for other messages,
-      // use `created` from the oldest one.
-      if (this._messageCache.has(effectiveEventId)) {
-        messageObject.created = new Date(
-          Math.min(
-            ...[
-              +this._messageCache.get(effectiveEventId)!.created!,
-              +messageObject.created!,
-              this._messageCreateTimesCache.get(effectiveEventId) ?? +Infinity,
-            ],
-          ),
-        );
-      }
+    if (!message) {
+      message = messageBuilder.buildMessage();
       this._messageCache.set(
-        messageObject.clientGeneratedId ?? effectiveEventId,
-        messageObject as any,
+        message.clientGeneratedId ?? effectiveEventId,
+        message as any,
       );
     }
+
+    messageBuilder.updateMessage(message);
+  }
+
+  private updateMessageCommandResult({
+    roomId,
+    event,
+    index,
+  }: {
+    roomId: string;
+    event: CommandResultEvent;
+    index: number;
+  }) {
+    let effectiveEventId = this.getEffectiveEventId(event);
+    let commandEvent = this.events.find(
+      (e: any) =>
+        e.type === 'm.room.message' &&
+        e.content.msgtype === APP_BOXEL_COMMAND_MSGTYPE &&
+        e.content['m.relates_to'].event_id === effectiveEventId,
+    )! as CommandEvent | undefined;
+    let message = this._messageCache.get(effectiveEventId);
+    if (!message || !commandEvent) {
+      return;
+    }
+
+    let author = this.upsertRoomMember({
+      roomId,
+      userId: event.sender,
+    });
+    let messageBuilder = new MessageBuilder(commandEvent, getOwner(this)!, {
+      roomId,
+      effectiveEventId,
+      author,
+      index,
+      serializedCardFromFragments: this.serializedCardFromFragments,
+      events: this.events,
+      commandResultEvent: event,
+    });
+    messageBuilder.updateMessageCommandResult(message);
+  }
+
+  private getEffectiveEventId(
+    event: MessageEvent | CommandEvent | CardMessageEvent | CommandResultEvent,
+  ) {
+    return event.content['m.relates_to']?.rel_type === 'm.replace' ||
+      event.content['m.relates_to']?.rel_type === 'm.annotation'
+      ? event.content['m.relates_to'].event_id
+      : event.event_id;
   }
 
   private async loadRoomNameEvent(event: RoomNameEvent) {
diff --git a/packages/host/app/services/matrix-service.ts b/packages/host/app/services/matrix-service.ts
index 44c83338d3..a7c5e8f706 100644
--- a/packages/host/app/services/matrix-service.ts
+++ b/packages/host/app/services/matrix-service.ts
@@ -1300,7 +1300,7 @@ export default class MatrixService extends Service {
         Array.isArray(data.attachedCardsEventIds)
       ) {
         for (let attachedCardEventId of data.attachedCardsEventIds) {
-          this.ensureCardFragmentsLoaded(attachedCardEventId, roomData);
+          await this.ensureCardFragmentsLoaded(attachedCardEventId, roomData);
         }
       }
     } else if (
@@ -1313,7 +1313,7 @@ export default class MatrixService extends Service {
           ? JSON.parse(event.content.data)
           : event.content.data
       ) as CommandResultWithOutputContent['data'];
-      this.ensureCardFragmentsLoaded(data.cardEventId, roomData);
+      await this.ensureCardFragmentsLoaded(data.cardEventId, roomData);
     } else if (
       event.type === 'm.room.message' &&
       event.content?.msgtype === APP_BOXEL_REALM_SERVER_EVENT_MSGTYPE
diff --git a/packages/host/public/boxel-favicon.png b/packages/host/public/boxel-favicon.png
new file mode 100644
index 0000000000..cf58c00e9e
Binary files /dev/null and b/packages/host/public/boxel-favicon.png differ
diff --git a/packages/host/public/boxel-webclip.png b/packages/host/public/boxel-webclip.png
new file mode 100644
index 0000000000..8140cae47a
Binary files /dev/null and b/packages/host/public/boxel-webclip.png differ
diff --git a/packages/host/tests/helpers/mock-matrix/_server-state.ts b/packages/host/tests/helpers/mock-matrix/_server-state.ts
index 061b446e0f..d79edde4d6 100644
--- a/packages/host/tests/helpers/mock-matrix/_server-state.ts
+++ b/packages/host/tests/helpers/mock-matrix/_server-state.ts
@@ -185,14 +185,18 @@ export class ServerState {
       IEvent,
       'event_id' | 'origin_server_ts' | 'unsigned' | 'status' | 'sender'
     >,
-    overrides?: { state_key?: string; origin_server_ts?: number },
+    overrides?: {
+      event_id?: string;
+      state_key?: string;
+      origin_server_ts?: number;
+    },
   ) {
     // duplicate the event fully
     let room = event.room_id && this.#rooms.get(event.room_id);
     if (!room) {
       throw new Error(`room ${event.room_id} does not exist`);
     }
-    let eventId = this.eventId();
+    let eventId = overrides?.event_id ?? this.eventId();
     let matrixEvent: IEvent = {
       ...event,
       // Don’t want to list out all the types from MatrixEvent union type
diff --git a/packages/host/tests/helpers/mock-matrix/_utils.ts b/packages/host/tests/helpers/mock-matrix/_utils.ts
index 646cc04807..24eddb578b 100644
--- a/packages/host/tests/helpers/mock-matrix/_utils.ts
+++ b/packages/host/tests/helpers/mock-matrix/_utils.ts
@@ -33,7 +33,11 @@ export class MockUtils {
     roomId: string,
     sender: string,
     content: MatrixSDK.IEvent['content'],
-    overrides?: { state_key?: string; origin_server_ts?: number },
+    overrides?: {
+      event_id?: string;
+      state_key?: string;
+      origin_server_ts?: number;
+    },
   ) => {
     return this.testState.sdk!.serverState.addRoomEvent(
       sender,
diff --git a/packages/host/tests/integration/components/ai-assistant-panel-test.gts b/packages/host/tests/integration/components/ai-assistant-panel-test.gts
index c62c105297..155be84cb7 100644
--- a/packages/host/tests/integration/components/ai-assistant-panel-test.gts
+++ b/packages/host/tests/integration/components/ai-assistant-panel-test.gts
@@ -976,6 +976,144 @@ module('Integration | ai-assistant-panel', function (hooks) {
     await percySnapshot(assert);
   });
 
+  test(`should handle events in order to prevent 'cardFragment not found' error`, async function (assert) {
+    let roomId = await renderAiAssistantPanel();
+    let cardFragmentsEventId = '!card_fragments_event_id';
+    let now = Date.now();
+    await simulateRemoteMessage(
+      roomId,
+      '@aibot:localhost',
+      {
+        body: 'Update mango card',
+        formatted_body: 'Update mango card',
+        msgtype: APP_BOXEL_MESSAGE_MSGTYPE,
+        data: JSON.stringify({
+          attachedCardsEventIds: [cardFragmentsEventId],
+        }),
+      },
+      { origin_server_ts: now + 60000 },
+    );
+    await simulateRemoteMessage(
+      roomId,
+      '@aibot:localhost',
+      {
+        body: '',
+        formatted_body: '',
+        msgtype: APP_BOXEL_CARDFRAGMENT_MSGTYPE,
+        data: JSON.stringify({
+          index: 0,
+          totalParts: 1,
+          cardFragment: JSON.stringify({
+            data: {
+              id: `${testRealmURL}Pet/mango`,
+              type: 'card',
+              attributes: {
+                firstName: 'Mango',
+              },
+              meta: {
+                adoptsFrom: {
+                  module: `${testRealmURL}Pet`,
+                  name: 'Mango',
+                },
+              },
+            },
+          }),
+        }),
+      },
+      { event_id: cardFragmentsEventId, origin_server_ts: now },
+    );
+
+    await waitFor('[data-test-message-idx="0"]');
+    assert.dom('[data-test-message-idx="0"]').exists({ count: 1 });
+    assert.dom('[data-test-message-idx="0"]').containsText('Update mango card');
+  });
+
+  test('it renders only new/updated messages', async function (assert) {
+    let roomId = await renderAiAssistantPanel();
+    simulateRemoteMessage(roomId, '@testuser:staging', {
+      body: `question #0`,
+      msgtype: APP_BOXEL_MESSAGE_MSGTYPE,
+      formatted_body: `question #1`,
+      format: 'org.matrix.custom.html',
+    });
+    let messageEventId = simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: `Thinking...`,
+      msgtype: 'm.text',
+      formatted_body: `Thinking...`,
+      format: 'org.matrix.custom.html',
+      isStreamingFinished: false,
+    });
+    let commandEventId = simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: `Thinking...`,
+      msgtype: APP_BOXEL_COMMAND_MSGTYPE,
+      formatted_body: `Thinking...`,
+      format: 'org.matrix.custom.html',
+      data: JSON.stringify({
+        toolCall: {},
+        eventId: '__EVENT_ID__',
+      }),
+    });
+    setReadReceipt(roomId, messageEventId, '@testuser:staging');
+    setReadReceipt(roomId, commandEventId, '@testuser:staging');
+
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template>
+          <OperatorMode @onClose={{noop}} />
+          <CardPrerender />
+        </template>
+      },
+    );
+
+    await waitFor('[data-test-message-idx="1"]');
+
+    let instanceIds = Array.from(
+      document.querySelectorAll('[data-test-boxel-message-instance-id]'),
+    ).map((el) => el.getAttribute('data-test-boxel-message-instance-id'));
+    assert.strictEqual(instanceIds.length, 3);
+
+    simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: `answer #0`,
+      msgtype: 'm.text',
+      formatted_body: `answer #0`,
+      format: 'org.matrix.custom.html',
+      isStreamingFinished: true,
+      'm.relates_to': {
+        event_id: messageEventId,
+        rel_type: 'm.replace',
+      },
+    });
+    simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: 'Changing first name to Evie',
+      formatted_body: 'Changing first name to Evie',
+      msgtype: APP_BOXEL_COMMAND_MSGTYPE,
+      format: 'org.matrix.custom.html',
+      'm.relates_to': {
+        event_id: commandEventId,
+        rel_type: 'm.replace',
+      },
+      data: JSON.stringify({
+        toolCall: {
+          name: 'patchCard',
+          arguments: {
+            attributes: {
+              cardId: `${testRealmURL}Person/fadhlan`,
+              patch: {
+                attributes: { firstName: 'Evie' },
+              },
+            },
+          },
+        },
+        eventId: '__EVENT_ID__',
+      }),
+    });
+    let newInstanceIds = Array.from(
+      document.querySelectorAll('[data-test-boxel-message-instance-id]'),
+    ).map((el) => el.getAttribute('data-test-boxel-message-instance-id'));
+
+    assert.deepEqual(newInstanceIds, instanceIds);
+  });
+
   module('suspending global error hook', (hooks) => {
     let tmp: any;
     let uncaughtException: any;