diff --git a/packages/drafts-realm/Company/9ad68df6-b27e-4164-8736-e9347ece4d1e.json b/packages/drafts-realm/Company/9ad68df6-b27e-4164-8736-e9347ece4d1e.json
new file mode 100644
index 0000000000..ed27746b82
--- /dev/null
+++ b/packages/drafts-realm/Company/9ad68df6-b27e-4164-8736-e9347ece4d1e.json
@@ -0,0 +1,49 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "law bom bom",
+      "regstrationNumber": null,
+      "address": {
+        "streetAddress": null,
+        "city": null,
+        "region": null,
+        "postalCode": null,
+        "poBoxNumber": null,
+        "country": null
+      },
+      "contactPerson": {
+        "salutation": null,
+        "firstName": null,
+        "lastName": null,
+        "address": {
+          "streetAddress": null,
+          "city": null,
+          "region": null,
+          "postalCode": null,
+          "poBoxNumber": null,
+          "country": null
+        },
+        "phoneNumber": {
+          "country": null,
+          "area": null,
+          "number": null
+        },
+        "email": {
+          "value": null
+        },
+        "website": {
+          "value": null
+        }
+      },
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../crm/account",
+        "name": "Company"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/Company/b57e5ffd-b64f-4531-a7e4-5a1d0420e2bc.json b/packages/drafts-realm/Company/b57e5ffd-b64f-4531-a7e4-5a1d0420e2bc.json
new file mode 100644
index 0000000000..4c3a90b69a
--- /dev/null
+++ b/packages/drafts-realm/Company/b57e5ffd-b64f-4531-a7e4-5a1d0420e2bc.json
@@ -0,0 +1,49 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Law Grocery",
+      "regstrationNumber": null,
+      "address": {
+        "streetAddress": null,
+        "city": null,
+        "region": null,
+        "postalCode": null,
+        "poBoxNumber": null,
+        "country": null
+      },
+      "contactPerson": {
+        "salutation": null,
+        "firstName": null,
+        "lastName": null,
+        "address": {
+          "streetAddress": null,
+          "city": null,
+          "region": null,
+          "postalCode": null,
+          "poBoxNumber": null,
+          "country": null
+        },
+        "phoneNumber": {
+          "country": null,
+          "area": null,
+          "number": null
+        },
+        "email": {
+          "value": null
+        },
+        "website": {
+          "value": null
+        }
+      },
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../crm/account",
+        "name": "Company"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/ContactForm/24fad614-e49b-44cf-9bf4-f9ead589ffa5.json b/packages/drafts-realm/ContactForm/24fad614-e49b-44cf-9bf4-f9ead589ffa5.json
new file mode 100644
index 0000000000..aa735bf04e
--- /dev/null
+++ b/packages/drafts-realm/ContactForm/24fad614-e49b-44cf-9bf4-f9ead589ffa5.json
@@ -0,0 +1,41 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "user": {
+        "salutation": null,
+        "firstName": null,
+        "lastName": null
+      },
+      "accountName": null,
+      "email": null,
+      "phone": null,
+      "fax": null,
+      "department": null,
+      "addressInfo": {
+        "address": null,
+        "zip": null,
+        "city": null,
+        "state": null,
+        "country": null,
+        "countryCode": null,
+        "stateCode": null
+      },
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "owner": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../contact-form",
+        "name": "ContactForm"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/ContactForm/4530dcff-062d-4a69-911a-db32da501eab.json b/packages/drafts-realm/ContactForm/4530dcff-062d-4a69-911a-db32da501eab.json
deleted file mode 100644
index 6a664ca1b4..0000000000
--- a/packages/drafts-realm/ContactForm/4530dcff-062d-4a69-911a-db32da501eab.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "data": {
-    "type": "card",
-    "attributes": {
-      "title": "Application of Job",
-      "name": {
-        "salutation": "Mr.",
-        "firstName": "Law",
-        "lastName": "Yung xxx"
-      },
-      "email": "lorem@gmail.com",
-      "phone": "0103819999",
-      "fax": "+609092312",
-      "department": "IT",
-      "addressInfo": {
-        "address": "1 Chome-3-8 Hashiba Higashinocho",
-        "zip": "570-0031",
-        "city": "Moriguchi",
-        "state": "Ōsaka Prefecture",
-        "country": "Japan",
-        "countryCode": "JP",
-        "stateCode": "27"
-      },
-      "description": null,
-      "thumbnailURL": null
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "../contact-form",
-        "name": "ContactForm"
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/drafts-realm/CrmAccount/4802eeed-bec6-4d7a-8f05-6370866edd40.json b/packages/drafts-realm/CrmAccount/4802eeed-bec6-4d7a-8f05-6370866edd40.json
index 40fadb7027..7d68816bda 100644
--- a/packages/drafts-realm/CrmAccount/4802eeed-bec6-4d7a-8f05-6370866edd40.json
+++ b/packages/drafts-realm/CrmAccount/4802eeed-bec6-4d7a-8f05-6370866edd40.json
@@ -53,7 +53,7 @@
       },
       "company": {
         "links": {
-          "self": null
+          "self": "../Company/9ad68df6-b27e-4164-8736-e9347ece4d1e"
         }
       }
     },
diff --git a/packages/drafts-realm/CrmAccount/a9289420-798a-49cf-b746-9aece2295d70.json b/packages/drafts-realm/CrmAccount/a9289420-798a-49cf-b746-9aece2295d70.json
new file mode 100644
index 0000000000..7b7dbf337a
--- /dev/null
+++ b/packages/drafts-realm/CrmAccount/a9289420-798a-49cf-b746-9aece2295d70.json
@@ -0,0 +1,67 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "accountName": null,
+      "accountAlias": null,
+      "description": null,
+      "contactInformation": {
+        "salutation": null,
+        "firstName": null,
+        "lastName": null,
+        "address": {
+          "streetAddress": null,
+          "city": null,
+          "region": null,
+          "postalCode": null,
+          "poBoxNumber": null,
+          "country": null
+        },
+        "phoneNumber": {
+          "country": null,
+          "area": null,
+          "number": null
+        },
+        "email": {
+          "value": null
+        },
+        "website": {
+          "value": null
+        }
+      },
+      "billingAddress": {
+        "streetAddress": null,
+        "city": null,
+        "region": null,
+        "postalCode": null,
+        "poBoxNumber": null,
+        "country": null
+      },
+      "numberOfEmployees": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "owner": {
+        "links": {
+          "self": null
+        }
+      },
+      "parentAccount": {
+        "links": {
+          "self": null
+        }
+      },
+      "company": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../crm/account",
+        "name": "CrmAccount"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/LeadForm/ad388806-9aa7-485b-90ed-66331a6da6bb.json b/packages/drafts-realm/LeadForm/ad388806-9aa7-485b-90ed-66331a6da6bb.json
new file mode 100644
index 0000000000..7b0b0cb350
--- /dev/null
+++ b/packages/drafts-realm/LeadForm/ad388806-9aa7-485b-90ed-66331a6da6bb.json
@@ -0,0 +1,52 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "user": {
+        "salutation": "Mr.",
+        "firstName": "Law",
+        "lastName": "Yung Lum"
+      },
+      "website": "law.com",
+      "description": null,
+      "leadStatus": "New",
+      "phone": "019999999999",
+      "email": "lawgrocery@g.com",
+      "addressInfo": {
+        "address": null,
+        "zip": null,
+        "city": null,
+        "state": null,
+        "country": null,
+        "countryCode": null,
+        "stateCode": null
+      },
+      "noOfEmployees": 200,
+      "annualRevenue": {
+        "currency": "RM",
+        "totalAmount": 1200000
+      },
+      "leadSource": "Advertisement",
+      "industry": "Biotechnology",
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "company": {
+        "links": {
+          "self": "../Company/b57e5ffd-b64f-4531-a7e4-5a1d0420e2bc"
+        }
+      },
+      "owner": {
+        "links": {
+          "self": "../MatrixUser/485ca453-b328-4e85-a761-b2fe7d145430"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../lead-form",
+        "name": "LeadForm"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/MatrixUser/485ca453-b328-4e85-a761-b2fe7d145430.json b/packages/drafts-realm/MatrixUser/485ca453-b328-4e85-a761-b2fe7d145430.json
new file mode 100644
index 0000000000..564a12e286
--- /dev/null
+++ b/packages/drafts-realm/MatrixUser/485ca453-b328-4e85-a761-b2fe7d145430.json
@@ -0,0 +1,19 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "username": "Law Yung Lom",
+      "email": {
+        "value": "lawyunglom@gmail.com"
+      },
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../matrix-user",
+        "name": "MatrixUser"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/OpportunityForm/187ec912-522a-44dc-b17c-4fe19ac3066d.json b/packages/drafts-realm/OpportunityForm/187ec912-522a-44dc-b17c-4fe19ac3066d.json
new file mode 100644
index 0000000000..925f6c3ba8
--- /dev/null
+++ b/packages/drafts-realm/OpportunityForm/187ec912-522a-44dc-b17c-4fe19ac3066d.json
@@ -0,0 +1,37 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "opportunityName": null,
+      "accountName": null,
+      "closeDate": null,
+      "amount": {
+        "currency": null,
+        "totalAmount": null
+      },
+      "description": null,
+      "stage": null,
+      "percentage": null,
+      "forecastCategory": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "company": {
+        "links": {
+          "self": null
+        }
+      },
+      "owner": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../opportunity-form",
+        "name": "OpportunityForm"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/OpportunityForm/37f6334a-02be-48db-a675-20409f8d5507.json b/packages/drafts-realm/OpportunityForm/37f6334a-02be-48db-a675-20409f8d5507.json
deleted file mode 100644
index c8d7e1f929..0000000000
--- a/packages/drafts-realm/OpportunityForm/37f6334a-02be-48db-a675-20409f8d5507.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "data": {
-    "type": "card",
-    "attributes": {
-      "opportunityName": "Opportunity Name",
-      "closeDate": "2024-06-13",
-      "amount": {
-        "currency": "RM",
-        "totalAmount": 123131
-      },
-      "description": "This opportunity involves a partnership with Cardstack Malaysia to provide our Cloud Storage solution, which addresses their need for scalable, secure, and cost-effective data storage. This deal has the potential to significantly enhance their data management and accessibility.",
-      "stage": "Negotiation",
-      "percentage": 75,
-      "forecastCategory": "Best Case",
-      "title": null,
-      "thumbnailURL": null
-    },
-    "relationships": {
-      "accountName": {
-        "links": {
-          "self": "../CrmAccount/4802eeed-bec6-4d7a-8f05-6370866edd40"
-        }
-      }
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "../opportunity-form",
-        "name": "OpportunityForm"
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/drafts-realm/OpportunityForm/5ab75971-9227-4a3e-84cc-537d84587994.json b/packages/drafts-realm/OpportunityForm/5ab75971-9227-4a3e-84cc-537d84587994.json
new file mode 100644
index 0000000000..475ec95994
--- /dev/null
+++ b/packages/drafts-realm/OpportunityForm/5ab75971-9227-4a3e-84cc-537d84587994.json
@@ -0,0 +1,36 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "opportunityName": null,
+      "closeDate": null,
+      "amount": {
+        "currency": null,
+        "totalAmount": null
+      },
+      "description": null,
+      "stage": null,
+      "percentage": null,
+      "forecastCategory": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "accountName": {
+        "links": {
+          "self": null
+        }
+      },
+      "company": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../opportunity-form",
+        "name": "OpportunityForm"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/OpportunityForm/bb174fbc-c07a-4e41-8851-0d624902bbd4.json b/packages/drafts-realm/OpportunityForm/bb174fbc-c07a-4e41-8851-0d624902bbd4.json
new file mode 100644
index 0000000000..f4790b4a14
--- /dev/null
+++ b/packages/drafts-realm/OpportunityForm/bb174fbc-c07a-4e41-8851-0d624902bbd4.json
@@ -0,0 +1,36 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "opportunityName": "Law Grocery",
+      "closeDate": null,
+      "amount": {
+        "currency": null,
+        "totalAmount": null
+      },
+      "description": null,
+      "stage": null,
+      "percentage": null,
+      "forecastCategory": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "accountName": {
+        "links": {
+          "self": null
+        }
+      },
+      "company": {
+        "links": {
+          "self": "../Company/b57e5ffd-b64f-4531-a7e4-5a1d0420e2bc"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../opportunity-form",
+        "name": "OpportunityForm"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/OpportunityForm/d4f9ef0b-d19a-461d-a6ed-5a6886e2004b.json b/packages/drafts-realm/OpportunityForm/d4f9ef0b-d19a-461d-a6ed-5a6886e2004b.json
new file mode 100644
index 0000000000..2f823e2000
--- /dev/null
+++ b/packages/drafts-realm/OpportunityForm/d4f9ef0b-d19a-461d-a6ed-5a6886e2004b.json
@@ -0,0 +1,32 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "opportunityName": "L",
+      "accountName": null,
+      "closeDate": null,
+      "amount": {
+        "currency": null,
+        "totalAmount": null
+      },
+      "description": null,
+      "stage": null,
+      "percentage": null,
+      "forecastCategory": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "company": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../opportunity-form",
+        "name": "OpportunityForm"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/SaleHub/236608d5-d07a-4006-bb3a-bad875503f4f.json b/packages/drafts-realm/SaleHub/236608d5-d07a-4006-bb3a-bad875503f4f.json
new file mode 100644
index 0000000000..c6d659f3d0
--- /dev/null
+++ b/packages/drafts-realm/SaleHub/236608d5-d07a-4006-bb3a-bad875503f4f.json
@@ -0,0 +1,90 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "targetPage": "Lead Form",
+      "scheduledTask": [
+        {
+          "taskForm": {
+            "taskId": "0",
+            "subject": "task a",
+            "dueDate": "2024-07-06",
+            "comments": null,
+            "isCompleted": false
+          }
+        },
+        {
+          "taskForm": {
+            "taskId": "1",
+            "subject": "task b",
+            "dueDate": "2024-07-05",
+            "comments": null,
+            "isCompleted": false
+          }
+        },
+        {
+          "taskForm": {
+            "taskId": "2",
+            "subject": "task c",
+            "dueDate": "2024-06-06",
+            "comments": "testing",
+            "isCompleted": false
+          }
+        }
+      ],
+      "convertedStatus": "",
+      "isLeadFormConverted": false,
+      "title": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "leadForm": {
+        "links": {
+          "self": "../LeadForm/ad388806-9aa7-485b-90ed-66331a6da6bb"
+        }
+      },
+      "accountForm": {
+        "links": {
+          "self": "../CrmAccount/a9289420-798a-49cf-b746-9aece2295d70"
+        }
+      },
+      "contactForm": {
+        "links": {
+          "self": "../ContactForm/24fad614-e49b-44cf-9bf4-f9ead589ffa5"
+        }
+      },
+      "opportunityForm": {
+        "links": {
+          "self": "../OpportunityForm/187ec912-522a-44dc-b17c-4fe19ac3066d"
+        }
+      },
+      "scheduledTask.0.taskForm.relatedTo": {
+        "links": {
+          "self": "http://localhost:4201/drafts/CardDef/7298c9c6-2964-41a0-87f7-42127a16e12b"
+        }
+      },
+      "scheduledTask.1.taskForm.relatedTo": {
+        "links": {
+          "self": "http://localhost:4201/drafts/CrmAccount/4802eeed-bec6-4d7a-8f05-6370866edd40"
+        }
+      },
+      "scheduledTask.2.taskForm.relatedTo": {
+        "links": {
+          "self": null
+        }
+      },
+      "recordOwner": {
+        "links": {
+          "self": "../MatrixUser/485ca453-b328-4e85-a761-b2fe7d145430"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sale-hub",
+        "name": "SaleHub"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/drafts-realm/contact-form.gts b/packages/drafts-realm/contact-form.gts
index e7352b63f1..41f19d5cb8 100644
--- a/packages/drafts-realm/contact-form.gts
+++ b/packages/drafts-realm/contact-form.gts
@@ -1,30 +1,33 @@
 import { UserName } from './user-name';
 import { UserEmail } from './user-email';
 import { AddressInfo } from './address-info';
-import { CardDef, field, contains } from 'https://cardstack.com/base/card-api';
+import {
+  CardDef,
+  field,
+  contains,
+  linksTo,
+} from 'https://cardstack.com/base/card-api';
 import { Component } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import { FieldContainer, CardContainer } from '@cardstack/boxel-ui/components';
+import { MatrixUser } from './matrix-user';
 
 class Isolated extends Component<typeof ContactForm> {
-  get hasTitleField() {
-    return this.args.model.title && this.args.model.title.length > 0;
-  }
-
   <template>
     <div class='decorative-header'></div>
 
     <CardContainer @displayBoundaries={{false}} class='container'>
-      {{#if this.hasTitleField}}
-        <h2><@fields.title /></h2>
-      {{/if}}
-
       <div class='card-form-display'>
         <div class='contact-form-details'>
 
           <div class='field-input'>
-            <label>Full Name: </label>
-            <@fields.name />
+            <label>User: </label>
+            <@fields.user />
+          </div>
+
+          <div class='field-input'>
+            <label>Account Name: </label>
+            <@fields.accountName />
           </div>
 
           <div class='field-input'>
@@ -52,6 +55,11 @@ class Isolated extends Component<typeof ContactForm> {
             <@fields.addressInfo />
           </div>
 
+          <div class='field-input'>
+            <label>Contact Owner: </label>
+            <@fields.owner />
+          </div>
+
         </div>
 
       </div>
@@ -134,19 +142,47 @@ class Isolated extends Component<typeof ContactForm> {
 
 class View extends Component<typeof ContactForm> {
   <template>
-    <CardContainer @displayBoundaries={{true}} class='container'>
-      <div class='content'>
-        <label>User</label>
-        <h2><@fields.name /></h2>
+    <div class='container'>
+      <div class='field-input-group'>
+        <FieldContainer @tag='label' @label='User' @vertical={{true}}>
+          <@fields.user />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Account Name' @vertical={{true}}>
+          <@fields.accountName />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
+          <@fields.email />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Phone' @vertical={{true}}>
+          <@fields.phone />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Fax' @vertical={{true}}>
+          <@fields.fax />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Department' @vertical={{true}}>
+          <@fields.department />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Address Info' @vertical={{true}}>
+          <@fields.addressInfo />
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @label='Contact Owner' @vertical={{true}}>
+          <@fields.owner />
+        </FieldContainer>
       </div>
-    </CardContainer>
+    </div>
 
     <style>
       .container {
-        padding: var(--boxel-sp-lg);
         display: grid;
-        gap: var(--boxel-sp);
-        background-color: #eeeeee50;
+        gap: var(--boxel-sp-lg);
+        overflow: hidden;
       }
       .content {
         color: var(--boxel-700);
@@ -154,12 +190,12 @@ class View extends Component<typeof ContactForm> {
       h2 {
         margin: 0px;
       }
-      .icon-profile {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        width: 50px;
-        height: 50px;
+      .field-input-group {
+        overflow: overlay;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        gap: var(--boxel-sp);
       }
     </style>
   </template>
@@ -175,7 +211,11 @@ class Edit extends Component<typeof ContactForm> {
       ><@fields.title /></FieldContainer>
 
       <FieldContainer @tag='label' @label='User' @vertical={{true}}>
-        <@fields.name />
+        <@fields.user />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Account Name' @vertical={{true}}>
+        <@fields.accountName />
       </FieldContainer>
 
       <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
@@ -186,8 +226,9 @@ class Edit extends Component<typeof ContactForm> {
         <@fields.phone />
       </FieldContainer>
 
-      <FieldContainer @tag='label' @label='Fax' @vertical={{true}}><@fields.fax
-        /></FieldContainer>
+      <FieldContainer @tag='label' @label='Fax' @vertical={{true}}>
+        <@fields.fax />
+      </FieldContainer>
 
       <FieldContainer
         @tag='label'
@@ -212,11 +253,19 @@ class Edit extends Component<typeof ContactForm> {
 
 export class ContactForm extends CardDef {
   @field title = contains(StringField, {
-    description: `Contact Form Title`,
+    computeVia: function (this: ContactForm) {
+      const { salutation, firstName, lastName } = this.user;
+
+      if (!salutation || !firstName || !lastName) return 'User Not Found';
+      return `${salutation} ${firstName} ${lastName}`;
+    },
   });
-  @field name = contains(UserName, {
+  @field user = contains(UserName, {
     description: `User's Full Name`,
   });
+  @field accountName = contains(StringField, {
+    description: `User's Account Name`,
+  });
   @field email = contains(UserEmail, {
     description: `User's Email`,
   });
@@ -232,6 +281,9 @@ export class ContactForm extends CardDef {
   @field addressInfo = contains(AddressInfo, {
     description: `User's AddressInfo`,
   });
+  @field owner = linksTo(MatrixUser, {
+    description: `Owner`,
+  });
 
   static displayName = 'Contact Form';
   static isolated = Isolated;
diff --git a/packages/drafts-realm/currency-amount.gts b/packages/drafts-realm/currency-amount.gts
new file mode 100644
index 0000000000..4e566a078e
--- /dev/null
+++ b/packages/drafts-realm/currency-amount.gts
@@ -0,0 +1,132 @@
+import {
+  Component,
+  FieldDef,
+  contains,
+  field,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import NumberField from 'https://cardstack.com/base/number';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import {
+  BoxelInput,
+  BoxelSelect,
+  FieldContainer,
+} from '@cardstack/boxel-ui/components';
+
+const formatNumber = (val: number) => {
+  let formatter = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+  return formatter.format(val);
+};
+
+class EmbeddedSecForAmount extends Component<typeof CurrencyAmount> {
+  get getFormattedAmount() {
+    if (!this.args.model.totalAmount) return null;
+    const formattedNumber = formatNumber(this.args.model.totalAmount);
+    return formattedNumber;
+  }
+
+  <template>
+    {{this.getFormattedAmount}}
+  </template>
+}
+
+class EditSecForAmount extends Component<typeof CurrencyAmount> {
+  @tracked currencyOptions = ['Select', 'RM', 'USD'];
+  get selectedCurrency() {
+    return this.args.model.currency || this.currencyOptions[0] || 'Select';
+  }
+
+  @action
+  updateCurrency(item: string) {
+    this.args.model.currency = item;
+  }
+
+  @action
+  updateAmount(val: number) {
+    this.args.model.totalAmount = val;
+  }
+
+  get getFormattedAmount() {
+    if (!this.args.model.totalAmount) return null;
+    const formattedNumber = formatNumber(this.args.model.totalAmount);
+    return formattedNumber;
+  }
+
+  <template>
+    <div class='container'>
+      <div class='form-row-full'>
+        <FieldContainer @tag='label' @vertical={{true}} class='left-input'>
+          <BoxelSelect
+            @selected={{this.selectedCurrency}}
+            @onChange={{this.updateCurrency}}
+            @options={{this.currencyOptions}}
+            class='select'
+            aria-label='Select Currency'
+            as |item|
+          >
+            <div>{{item}}</div>
+          </BoxelSelect>
+        </FieldContainer>
+
+        <FieldContainer @tag='label' @vertical={{true}} class='right-input'>
+          <BoxelInput
+            @value={{this.args.model.totalAmount}}
+            @onInput={{this.updateAmount}}
+            @helperText={{this.getFormattedAmount}}
+          />
+        </FieldContainer>
+      </div>
+
+    </div>
+
+    <style>
+      .container {
+        container-type: inline-size;
+      }
+      .form-row-full {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xs);
+      }
+      .left-input {
+        display: inline-block;
+        min-width: 100px;
+        flex: auto;
+      }
+      .right-input {
+        display: inline-block;
+        flex-grow: 1;
+        width: 100%;
+      }
+      .select {
+        padding: var(--boxel-sp-xxs);
+        background-color: white;
+      }
+
+      @container (min-width: 640px) {
+        .form-row-full {
+          flex-wrap: nowrap;
+        }
+      }
+    </style>
+  </template>
+}
+
+export class CurrencyAmount extends FieldDef {
+  static displayName = 'Currency Amount';
+  @field currency = contains(StringField, {
+    description: `Currency`,
+  });
+
+  @field totalAmount = contains(NumberField, {
+    description: `Total Amount`,
+  });
+
+  static embedded = EmbeddedSecForAmount;
+  static edit = EditSecForAmount;
+}
diff --git a/packages/drafts-realm/lead-form.gts b/packages/drafts-realm/lead-form.gts
new file mode 100644
index 0000000000..b69118affe
--- /dev/null
+++ b/packages/drafts-realm/lead-form.gts
@@ -0,0 +1,513 @@
+import MarkdownField from 'https://cardstack.com/base/markdown';
+import {
+  CardDef,
+  contains,
+  field,
+  linksTo,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import NumberField from 'https://cardstack.com/base/number';
+import { UserName } from './user-name';
+import { UserEmail } from './user-email';
+import { AddressInfo } from './address-info';
+import { Component } from 'https://cardstack.com/base/card-api';
+import { CardContainer, FieldContainer } from '@cardstack/boxel-ui/components';
+import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { BoxelInput } from '@cardstack/boxel-ui/components';
+import { CurrencyAmount } from './currency-amount';
+import { MatrixUser } from './matrix-user';
+import { Company } from './crm/account';
+
+interface CategorySignature {
+  name: string;
+}
+
+class IsolatedSecForLeadForm extends Component<typeof LeadForm> {
+  get getFormattedNoOfEmployees() {
+    if (!this.args.model.noOfEmployees) return null;
+    return Math.round(this.args.model.noOfEmployees);
+  }
+
+  <template>
+    <CardContainer @displayBoundaries={{false}} class='container'>
+      <section>
+        <div class='field-group-title'>About</div>
+        <div class='field-input-group'>
+          <div class='field-input'>
+            <label>User: </label>
+            <@fields.user />
+          </div>
+          <div class='field-input'>
+            <label>Company: </label>
+            <@fields.company />
+          </div>
+          <div class='field-input'>
+            <label>Website: </label>
+            <@fields.website />
+          </div>
+          <div class='field-input'>
+            <label>Lead Status: </label>
+            <@fields.leadStatus />
+          </div>
+          <div class='field-input'>
+            <label>Lead Owner: </label>
+            <@fields.owner />
+          </div>
+          <div class='field-input-column description'>
+            <label>Description: </label>
+            <@fields.description />
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class='field-group-title'>Get In Touch</div>
+        <div class='field-input-group'>
+          <div class='field-input'>
+            <label>Phone Number: </label>
+            <@fields.phone />
+          </div>
+          <div class='field-input'>
+            <label>Email: </label>
+            <@fields.email />
+          </div>
+          <div class='field-input'>
+            <label>Address Info: </label>
+            <div class='address-info'>
+              <@fields.addressInfo />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class='field-group-title'>Segment</div>
+        <div class='field-input-group'>
+          <div class='field-input'>
+            <label>No. of Employees: </label>
+            {{this.getFormattedNoOfEmployees}}
+          </div>
+          <div class='field-input'>
+            <label>Annual Revenue: </label>
+            <@fields.annualRevenue />
+          </div>
+          <div class='field-input'>
+            <label>Lead Source: </label>
+            <@fields.leadSource />
+          </div>
+          <div class='field-input'>
+            <label>Industry: </label>
+            <@fields.industry />
+          </div>
+        </div>
+      </section>
+    </CardContainer>
+
+    <style>
+      .container {
+        padding: var(--boxel-sp-xl);
+        display: grid;
+        gap: var(--boxel-sp-lg);
+        overflow: hidden;
+      }
+      section {
+        overflow: overlay;
+      }
+      .description {
+        text-align: justify;
+      }
+      .field-group-title {
+        font-size: var(--boxel-font-size);
+        font-weight: 800;
+        margin-bottom: var(--boxel-sp-xs);
+      }
+      .field-input {
+        display: flex;
+        gap: var(--boxel-sp-sm);
+        font-size: var(--boxel-font-size-sm);
+        flex-wrap: wrap;
+      }
+      .field-input-group {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        gap: var(--boxel-sp);
+        background-color: #fbfbfb;
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp);
+      }
+      .field-input-column {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+        font-size: var(--boxel-font-size-sm);
+        flex-wrap: wrap;
+      }
+      label {
+        font-weight: 700;
+      }
+      .address-info {
+        overflow: overlay;
+      }
+    </style>
+  </template>
+}
+
+class ViewSecForLeadForm extends Component<typeof LeadForm> {
+  <template>
+    <CardContainer @displayBoundaries={{false}} class='container'>
+      <section>
+        <div class='field-group-title'>About</div>
+        <div class='field-input-group'>
+          <FieldContainer @tag='label' @label='User' @vertical={{true}}>
+            <@fields.user />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Company' @vertical={{true}}>
+            <@fields.company />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Website' @vertical={{true}}>
+            <@fields.website />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Description' @vertical={{true}}>
+            <@fields.description />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Lead Status' @vertical={{true}}>
+            <@fields.leadStatus />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Lead Owner' @vertical={{true}}>
+            <@fields.owner />
+          </FieldContainer>
+        </div>
+      </section>
+
+      <section>
+        <div class='field-group-title'>Get In Touch</div>
+        <div class='field-input-group'>
+          <FieldContainer @tag='label' @label='Phone' @vertical={{true}}>
+            <@fields.phone />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
+            <@fields.email />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Address' @vertical={{true}}>
+            <@fields.addressInfo />
+          </FieldContainer>
+        </div>
+      </section>
+
+      <section>
+        <div class='field-group-title'>Segment</div>
+        <div class='field-input-group'>
+          <FieldContainer
+            @tag='label'
+            @label='No. of Employees'
+            @vertical={{true}}
+          >
+            <@fields.noOfEmployees />
+          </FieldContainer>
+          <FieldContainer
+            @tag='label'
+            @label='Annual Revenue'
+            @vertical={{true}}
+          >
+            <@fields.annualRevenue />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Lead Source' @vertical={{true}}>
+            <@fields.leadSource />
+          </FieldContainer>
+          <FieldContainer @tag='label' @label='Industry' @vertical={{true}}>
+            <@fields.industry />
+          </FieldContainer>
+        </div>
+      </section>
+    </CardContainer>
+
+    <style>
+      .container {
+        display: grid;
+        gap: var(--boxel-sp-xl);
+        overflow: hidden;
+      }
+      section {
+        overflow: hidden;
+      }
+      .field-group-title {
+        font-size: 1rem;
+        font-weight: bold;
+        margin-bottom: 0.75rem;
+        text-decoration: underline;
+        text-decoration-thickness: 3px;
+        text-underline-offset: 3px;
+        color: var(--boxel-dark-teal);
+      }
+      .field-input-group {
+        overflow: overlay;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        gap: var(--boxel-sp);
+      }
+    </style>
+  </template>
+}
+
+class EditSecFoLeadForm extends Component<typeof LeadForm> {
+  /* Lead Status Options */
+  get selectedLeadStatus() {
+    return { name: this.args.model.leadStatus };
+  }
+
+  @tracked leadStatusOptions = [
+    { name: 'New' },
+    { name: 'Working' },
+    { name: 'Nurturing' },
+    { name: 'Unqualified' },
+    { name: 'Qualified' },
+  ] as Array<CategorySignature>;
+
+  @action updateLeadStatus(type: { name: string }) {
+    this.args.model.leadStatus = type.name;
+  }
+
+  /* No Of Employees */
+  @action updateNoOfEmployees(val: number) {
+    this.args.model.noOfEmployees = val;
+  }
+
+  get getFormattedNoOfEmployees() {
+    if (!this.args.model.noOfEmployees) return null;
+    return Math.round(this.args.model.noOfEmployees);
+  }
+
+  /* Lead Source Options */
+  get selectedLeadSource() {
+    return { name: this.args.model.leadSource };
+  }
+
+  @tracked leadSourceOptions = [
+    { name: 'Advertisement' },
+    { name: 'Employee Referral' },
+    { name: 'External Referral' },
+    { name: 'Partner' },
+    { name: 'Public Relations' },
+    { name: 'Seminar - Internal' },
+    { name: 'Seminar - Partner' },
+    { name: 'Trade Show' },
+    { name: 'Web' },
+    { name: 'Word of mouth' },
+    { name: 'Other' },
+  ] as Array<CategorySignature>;
+
+  @action updateLeadSource(type: { name: string }) {
+    this.args.model.leadSource = type.name;
+  }
+
+  /* Industry Options */
+  get selectedIndustry() {
+    return { name: this.args.model.industry };
+  }
+
+  @tracked industryOptions = [
+    { name: 'Agriculture' },
+    { name: 'Apparel' },
+    { name: 'Banking' },
+    { name: 'Biotechnology' },
+    { name: 'Chemicals' },
+    { name: 'Communications' },
+    { name: 'Construction' },
+    { name: 'Consulting' },
+    { name: 'Education' },
+    { name: 'Electronics' },
+    { name: 'Energy' },
+    { name: 'Engineering' },
+    { name: 'Entertainment' },
+    { name: 'Environmental' },
+    { name: 'Finance' },
+    { name: 'Food & Beverage' },
+    { name: 'Government' },
+    { name: 'Healthcare' },
+    { name: 'Hospitality' },
+    { name: 'Insurance' },
+    { name: 'Machinery' },
+    { name: 'Manufacturing' },
+    { name: 'Media' },
+    { name: 'Not For Profit' },
+    { name: 'Recreation' },
+    { name: 'Retail' },
+    { name: 'Shipping' },
+    { name: 'Technology' },
+    { name: 'Telecommunications' },
+    { name: 'Transportation' },
+    { name: 'Utilities' },
+    { name: 'Others' },
+  ] as Array<CategorySignature>;
+
+  @action updateIndustry(type: { name: string }) {
+    this.args.model.industry = type.name;
+  }
+
+  <template>
+    <CardContainer @displayBoundaries={{false}} class='container'>
+      <FieldContainer @tag='label' @label='Title' @vertical={{true}}>
+        <@fields.title />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='User' @vertical={{true}}>
+        <@fields.user />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Company Name' @vertical={{true}}>
+        <@fields.company />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Website' @vertical={{true}}>
+        <@fields.website />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Description' @vertical={{true}}>
+        <@fields.description />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Lead Status' @vertical={{true}}>
+        <BoxelSelect
+          @searchEnabled={{true}}
+          @searchField='name'
+          @selected={{this.selectedLeadStatus}}
+          @onChange={{this.updateLeadStatus}}
+          @options={{this.leadStatusOptions}}
+          class='select'
+          as |item|
+        >
+          <div>{{item.name}}</div>
+        </BoxelSelect>
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Lead Owner' @vertical={{true}}>
+        <@fields.owner />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Phone' @vertical={{true}}>
+        <@fields.phone />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
+        <@fields.email />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Address Info' @vertical={{true}}>
+        <@fields.addressInfo />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='No. of Employees' @vertical={{true}}>
+        <BoxelInput
+          @value={{this.args.model.noOfEmployees}}
+          @onInput={{this.updateNoOfEmployees}}
+        />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Annual Revenue' @vertical={{true}}>
+        <@fields.annualRevenue />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Lead Source' @vertical={{true}}>
+        <BoxelSelect
+          @searchEnabled={{true}}
+          @searchField='name'
+          @selected={{this.selectedLeadSource}}
+          @onChange={{this.updateLeadSource}}
+          @options={{this.leadSourceOptions}}
+          class='select'
+          as |item|
+        >
+          <div>{{item.name}}</div>
+        </BoxelSelect>
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Industry' @vertical={{true}}>
+        <BoxelSelect
+          @searchEnabled={{true}}
+          @searchField='name'
+          @selected={{this.selectedIndustry}}
+          @onChange={{this.updateIndustry}}
+          @options={{this.industryOptions}}
+          class='select'
+          as |item|
+        >
+          <div>{{item.name}}</div>
+        </BoxelSelect>
+      </FieldContainer>
+
+    </CardContainer>
+
+    <style>
+      .container {
+        padding: var(--boxel-sp-lg);
+        display: grid;
+        gap: var(--boxel-sp);
+      }
+      .select {
+        padding: var(--boxel-sp-xs);
+        background-color: white;
+      }
+    </style>
+  </template>
+}
+
+export class LeadForm extends CardDef {
+  static displayName = 'Lead Form';
+  @field title = contains(StringField, {
+    computeVia: function (this: LeadForm) {
+      const { salutation, firstName, lastName } = this.user;
+
+      if (!salutation || !firstName || !lastName) return 'User Not Found';
+      return `${salutation} ${firstName} ${lastName}`;
+    },
+  });
+  @field user = contains(UserName, {
+    description: `User's Full Name`,
+  });
+  @field company = linksTo(Company, {
+    description: `User's Company Name`,
+  });
+  @field website = contains(StringField, {
+    description: `User's Website`,
+  });
+  @field description = contains(MarkdownField, {
+    description: `User's Description`,
+  });
+  @field leadStatus = contains(StringField, {
+    description: `Lead Status`,
+  });
+  @field owner = linksTo(MatrixUser, {
+    description: `Owner`,
+  });
+  @field phone = contains(StringField, {
+    description: `User's phone number`,
+  });
+  @field email = contains(UserEmail, {
+    description: `User's Email`,
+  });
+  @field addressInfo = contains(AddressInfo, {
+    description: `User's AddressInfo`,
+  });
+  @field noOfEmployees = contains(NumberField, {
+    description: `No Of Employees`,
+  });
+  @field annualRevenue = contains(CurrencyAmount, {
+    description: `Annual Revenue`,
+  });
+  @field leadSource = contains(StringField, {
+    description: `Lead Source`,
+  });
+  @field industry = contains(StringField, {
+    description: `Industry`,
+  });
+
+  static isolated = IsolatedSecForLeadForm;
+  static atom = ViewSecForLeadForm;
+  static embedded = ViewSecForLeadForm;
+  static edit = EditSecFoLeadForm;
+}
diff --git a/packages/drafts-realm/opportunity-form.gts b/packages/drafts-realm/opportunity-form.gts
index ea73271b29..300f20f3ec 100644
--- a/packages/drafts-realm/opportunity-form.gts
+++ b/packages/drafts-realm/opportunity-form.gts
@@ -17,8 +17,9 @@ import {
 } from '@cardstack/boxel-ui/components';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { CrmAccount } from './crm/account';
+import { Company } from './crm/account';
 import NumberField from '../base/number';
+import { MatrixUser } from './matrix-user';
 
 interface CategorySignature {
   name: string;
@@ -34,6 +35,18 @@ const formatNumber = (val: number) => {
 };
 
 /* Amount */
+class EmbeddedSecForAmount extends Component<typeof AmountField> {
+  <template>
+    <CardContainer @displayBoundaries={{false}} class='container'>
+      <FieldContainer @tag='label' @vertical={{true}}><@fields.currency
+        /></FieldContainer>
+
+      <FieldContainer @tag='label' @vertical={{true}}><@fields.totalAmount
+        /></FieldContainer>
+    </CardContainer>
+  </template>
+}
+
 class EditSecForAmount extends Component<typeof AmountField> {
   @tracked currencyOptions = ['Select', 'RM'];
   get selectedCurrency() {
@@ -114,11 +127,17 @@ class AmountField extends FieldDef {
     description: `Total Amount`,
   });
 
+  static embedded = EmbeddedSecForAmount;
   static edit = EditSecForAmount;
 }
 
 /* Opportunity Form */
 class IsolatedSecForOpportunityForm extends Component<typeof OpportunityForm> {
+  get getCompanyName() {
+    if (!this.args.model.company) return '-';
+    return this.args.model.company;
+  }
+
   get getFormattedAmount() {
     const amount = this.args.model.amount;
     const hasAmount = amount && amount.totalAmount;
@@ -169,13 +188,17 @@ class IsolatedSecForOpportunityForm extends Component<typeof OpportunityForm> {
       </div>
 
       <div class='right-box'>
-
         <div class='field-input-column'>
           <label>Account Name: </label>
           <@fields.accountName />
         </div>
 
         <div class='field-input-group'>
+          <div class='field-input'>
+            <label>Company Name: </label>
+
+            <@fields.company />
+          </div>
           <div class='field-input'>
             <label>Close Date: </label>
             <@fields.closeDate />
@@ -191,12 +214,15 @@ class IsolatedSecForOpportunityForm extends Component<typeof OpportunityForm> {
           <div class='field-input'>
             <label>Percentage: </label>
             {{this.getFormattedPercentage}}
-
           </div>
           <div class='field-input'>
             <label>Forecast Category: </label>
             {{this.getForestCategory}}
           </div>
+          <div class='field-input'>
+            <label>Opportunity Owner: </label>
+            <@fields.owner />
+          </div>
         </div>
       </div>
 
@@ -329,7 +355,7 @@ class EditSecForOpportunityForm extends Component<typeof OpportunityForm> {
   }
 
   <template>
-    <CardContainer @displayBoundaries={{false}} class='container'>
+    <CardContainer @displayBoundaries={{true}} class='container'>
       <FieldContainer @tag='label' @label='Opportunity Name' @vertical={{true}}>
         <@fields.opportunityName />
       </FieldContainer>
@@ -338,6 +364,10 @@ class EditSecForOpportunityForm extends Component<typeof OpportunityForm> {
         <@fields.accountName />
       </FieldContainer>
 
+      <FieldContainer @tag='label' @label='Company' @vertical={{true}}>
+        <@fields.company />
+      </FieldContainer>
+
       <FieldContainer @tag='label' @label='Close Date' @vertical={{true}}>
         <@fields.closeDate />
       </FieldContainer>
@@ -389,6 +419,14 @@ class EditSecForOpportunityForm extends Component<typeof OpportunityForm> {
           <div>{{item.name}}</div>
         </BoxelSelect>
       </FieldContainer>
+
+      <FieldContainer
+        @tag='label'
+        @label='Opportunity Owner'
+        @vertical={{true}}
+      >
+        <@fields.owner />
+      </FieldContainer>
     </CardContainer>
 
     <style>
@@ -407,18 +445,76 @@ class EditSecForOpportunityForm extends Component<typeof OpportunityForm> {
 
 class ViewSecForOpportunityForm extends Component<typeof OpportunityForm> {
   <template>
-    {{#if this.args.model.opportunityName}}
-      <CardContainer @displayBoundaries={{true}} class='container'>
+    <div class='field-input-group'>
+      <FieldContainer @tag='label' @label='Opportunity Name' @vertical={{true}}>
         <@fields.opportunityName />
-      </CardContainer>
-    {{/if}}
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Account Name' @vertical={{true}}>
+        <@fields.accountName />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Company' @vertical={{true}}>
+        <@fields.company />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Close Date' @vertical={{true}}>
+        <@fields.closeDate />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Amount' @vertical={{true}}>
+        <@fields.amount />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Description' @vertical={{true}}>
+        <@fields.description />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Stage' @vertical={{true}}>
+        <@fields.stage />
+      </FieldContainer>
+
+      <FieldContainer @tag='label' @label='Percentage' @vertical={{true}}>
+        <@fields.percentage />
+      </FieldContainer>
+
+      <FieldContainer
+        @tag='label'
+        @label='Forecast Category'
+        @vertical={{true}}
+      >
+        <@fields.forecastCategory />
+      </FieldContainer>
+      <FieldContainer
+        @tag='label'
+        @label='Opportunity Owner'
+        @vertical={{true}}
+      >
+        <@fields.owner />
+      </FieldContainer>
+    </div>
 
     <style>
       .container {
-        padding: var(--boxel-sp-lg);
         display: grid;
+        gap: var(--boxel-sp-lg);
+        overflow: hidden;
+      }
+      .field-group-title {
+        font-size: 1rem;
+        font-weight: bold;
+        margin-bottom: 0.75rem;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 4px;
+        color: var(--boxel-dark-teal);
+      }
+      .field-input-group {
+        overflow: overlay;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
         gap: var(--boxel-sp);
-        background-color: #fbfbfb;
       }
     </style>
   </template>
@@ -426,12 +522,20 @@ class ViewSecForOpportunityForm extends Component<typeof OpportunityForm> {
 
 export class OpportunityForm extends CardDef {
   static displayName = 'Opportunity Form';
+  @field title = contains(StringField, {
+    computeVia: function (this: OpportunityForm) {
+      return this.opportunityName;
+    },
+  });
   @field opportunityName = contains(StringField, {
     description: `Opportunity Name`,
   });
-  @field accountName = linksTo(CrmAccount, {
+  @field accountName = contains(StringField, {
     description: `Account Name`,
   });
+  @field company = linksTo(Company, {
+    description: `User's Company Name`,
+  });
   @field closeDate = contains(DateCard, {
     description: `Close Date`,
   });
@@ -450,6 +554,9 @@ export class OpportunityForm extends CardDef {
   @field forecastCategory = contains(StringField, {
     description: `Forecast Category`,
   });
+  @field owner = linksTo(MatrixUser, {
+    description: `Owner`,
+  });
 
   static isolated = IsolatedSecForOpportunityForm;
   static edit = EditSecForOpportunityForm;
diff --git a/packages/drafts-realm/sale-hub.gts b/packages/drafts-realm/sale-hub.gts
new file mode 100644
index 0000000000..8b1d63e0be
--- /dev/null
+++ b/packages/drafts-realm/sale-hub.gts
@@ -0,0 +1,1256 @@
+import {
+  CardDef,
+  FieldDef,
+  contains,
+  containsMany,
+  field,
+  linksTo,
+} from 'https://cardstack.com/base/card-api';
+import DateCard from 'https://cardstack.com/base/date';
+import { Component } from 'https://cardstack.com/base/card-api';
+
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { concat, fn } from '@ember/helper';
+import { IconX } from '@cardstack/boxel-ui/icons';
+import GlimmerComponent from '@glimmer/component';
+import {
+  BoxelSelect,
+  Button,
+  CardContainer,
+  FieldContainer,
+  GridContainer,
+  IconButton,
+  Modal,
+} from '@cardstack/boxel-ui/components';
+import MarkdownField from '../base/markdown';
+import { CrmAccount } from './crm/account';
+import StringField from 'https://cardstack.com/base/string';
+import BooleanField from 'https://cardstack.com/base/boolean';
+import {
+  format as formatDate,
+  isToday,
+  isTomorrow,
+  isThisMonth,
+} from 'date-fns';
+import { OpportunityForm } from './opportunity-form';
+import { LeadForm } from './lead-form';
+import { ContactForm } from './contact-form';
+import { MatrixUser } from './matrix-user';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+interface TargetPageLinkSingnature {
+  name: string;
+  isActive: boolean;
+  shouldShowFormData: boolean;
+}
+
+interface TargetPageLinksSignature {
+  Element: HTMLElement;
+  Args: {
+    targetPageLinks: TargetPageLinkSingnature[];
+    targetPage: string | undefined;
+    onSelectPage: (val: string) => void;
+  };
+}
+
+interface StepSignature {
+  step: number;
+  name: string;
+  isActive: boolean;
+  isCompleted: boolean;
+  isProceedToNextStep: boolean;
+}
+
+interface StepsSignature {
+  Element: HTMLElement;
+  Args: {
+    steps: StepSignature[];
+    updateLeadStatus: (arg0: string) => void;
+    isLeadFormConverted: boolean | undefined;
+    handleConvert: () => void;
+  };
+}
+
+interface CategorySignature {
+  name: string;
+}
+
+interface GroupedTasksSignature {
+  month: string | null;
+  taskId: string | null;
+  subject: string | null;
+  dueDate: Date | any;
+  comments: string | null;
+  isCompleted: boolean;
+  relatedTo: any;
+}
+
+//*task-form
+class TaskForm extends FieldDef {
+  static displayName = 'Task Form';
+
+  @field taskId = contains(StringField, {
+    description: `Task Id`,
+  });
+  @field subject = contains(StringField, {
+    description: `Subject`,
+  });
+  @field dueDate = contains(DateCard, {
+    description: `Due Date`,
+  });
+  @field comments = contains(MarkdownField, {
+    description: `Comments`,
+  });
+  @field relatedTo = linksTo(CrmAccount, {
+    description: `Related to Crm Account`,
+  });
+  @field isCompleted = contains(BooleanField, {
+    description: `Is Task Completed`,
+  });
+}
+
+//*Target Page Links
+class TargetPageLinks extends GlimmerComponent<TargetPageLinksSignature> {
+  <template>
+    <div class='targetPageLinks'>
+      {{#each this.args.targetPageLinks as |pageLink|}}
+        <div
+          class={{concat (if pageLink.isActive 'active ') 'pageLink'}}
+          {{on 'click' (fn this.args.onSelectPage pageLink.name)}}
+        >
+          {{pageLink.name}}</div>
+      {{/each}}
+    </div>
+    <style>
+      .targetPageLinks {
+        display: flex;
+        gap: var(--boxel-sp);
+        overflow-x: auto;
+      }
+      .pageLink {
+        color: var(--boxel-200);
+        cursor: pointer;
+        margin-bottom: 0.5rem;
+        white-space: nowrap;
+      }
+      .pageLink.active {
+        color: white;
+        font-weight: bold;
+        text-decoration: underline;
+      }
+    </style>
+  </template>
+}
+
+//*steps
+class Steps extends GlimmerComponent<StepsSignature> {
+  @tracked steps = this.args.steps.map((step) => {
+    return { ...step };
+  });
+  @tracked currentStepName = this.steps[0].name || '';
+  @tracked currentStepIndex = this.steps[0].step || 0;
+
+  get isStepCompleted() {
+    return this.currentStepStatus === 'Step Completed';
+  }
+
+  get currentStepStatus() {
+    if (this.currentStepIndex >= this.steps.length - 1) {
+      if (this.args.isLeadFormConverted) return 'Converted';
+      return 'Select Converted Status';
+    }
+    if (this.steps[this.currentStepIndex].isCompleted) return 'Step Completed';
+    return 'Mark Status as Complete';
+  }
+
+  get shouldDisableClick() {
+    return this.isStepCompleted || this.args.isLeadFormConverted;
+  }
+
+  @action
+  handleOnStepClick(clickedStep: number) {
+    this.currentStepIndex = clickedStep;
+    this.currentStepName = this.steps[this.currentStepIndex].name;
+
+    this.steps = this.steps.map((step, index) => {
+      return { ...step, isActive: index === clickedStep };
+    });
+  }
+
+  @action handleCompleteStep() {
+    if (this.currentStepIndex < this.steps.length - 1) {
+      this.steps = this.steps.map((step, index) => {
+        return {
+          ...step,
+          isCompleted: index <= this.currentStepIndex,
+          isProceedToNextStep: index === this.currentStepIndex + 1,
+        };
+      });
+    }
+
+    this.args.updateLeadStatus(this.currentStepName);
+  }
+
+  @action
+  handleButtonClick() {
+    if (this.currentStepStatus === 'Select Converted Status') {
+      this.args.handleConvert();
+    } else {
+      this.handleCompleteStep();
+    }
+  }
+
+  <template>
+    <div class='steps'>
+      {{#each this.steps as |step|}}
+        <div
+          class={{concat
+            (if step.isCompleted 'completed ')
+            (if step.isActive 'active ')
+            (if step.isProceedToNextStep 'proceedToNextStep ')
+            'step'
+          }}
+          {{on 'click' (fn this.handleOnStepClick step.step)}}
+        >
+          {{step.name}}</div>
+      {{/each}}
+    </div>
+    <div class='step-panel'>
+      <div class='step-status'>
+        Status:
+        {{this.currentStepName}}
+      </div>
+
+      <button
+        {{on 'click' this.handleButtonClick}}
+        disabled={{this.shouldDisableClick}}
+        class='{{if this.shouldDisableClick "button-disabled" "button"}}'
+      >
+        {{this.currentStepStatus}}
+      </button>
+
+    </div>
+    <style>
+      .steps {
+        display: flex;
+        overflow-x: auto;
+        gap: var(--boxel-sp-xxs);
+        text-align: center;
+      }
+      .steps > .step {
+        display: flex;
+        flex: 0 0 auto;
+        width: auto;
+        min-width: 120px;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--boxel-sp-xs);
+        padding: var(--boxel-sp-xxs);
+        font-size: var(--boxel-font-size-sm);
+        cursor: pointer;
+        font-weight: 600;
+        position: relative;
+        background-color: var(--boxel-100);
+        border: 2px solid var(--boxel-200);
+      }
+      .steps > .step:hover {
+        background-color: var(--boxel-dark-teal);
+      }
+      .steps > .step > .label-index {
+        border-radius: 100%;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--boxel-200);
+      }
+      .steps > .step.active {
+        background-color: var(--boxel-dark-teal);
+        color: var(--boxel-light);
+      }
+
+      .steps > .step.completed {
+        background-color: var(--boxel-dark-teal);
+        color: var(--boxel-light);
+      }
+      .steps > .step.proceedToNextStep {
+        border-color: #0a7a77;
+      }
+
+      .steps > .step.active > .label-index {
+        background-color: var(--boxel-light);
+        color: var(--boxel-dark);
+      }
+      .step-panel {
+        background-color: var(--boxel-light);
+        margin-top: var(--boxel-sp-sm);
+      }
+      .step-panel > * + * {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .step-status {
+        background-color: var(--boxel-100);
+        border: 1px solid #eeeeee;
+        text-align: center;
+        padding: var(--boxel-sp-lg) var(--boxel-sp-sm);
+      }
+      .button {
+        display: table;
+        font-size: var(--boxel-font-size-xs);
+        line-height: 1.25rem;
+        font-weight: 500;
+        padding: var(--boxel-sp-xxs) var(--boxel-sp);
+        border-radius: var(--boxel-border-radius);
+        border: 1px solid white;
+        box-shadow: none;
+        background-color: var(--boxel-blue);
+        color: white;
+        margin-inline: auto;
+      }
+      .button-disabled {
+        display: table;
+        font-size: var(--boxel-font-size-xs);
+        line-height: 1.25rem;
+        font-weight: 500;
+        padding: var(--boxel-sp-xxs) var(--boxel-sp);
+        border-radius: var(--boxel-border-radius);
+        border: 1px solid white;
+        box-shadow: none;
+        background-color: var(--boxel-400);
+        color: white;
+        margin-inline: auto;
+      }
+    </style>
+  </template>
+}
+
+//*scheduled task
+class ScheduledTask extends FieldDef {
+  static displayName = 'Scheduled Task';
+  @field taskForm = contains(TaskForm);
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <@fields.taskForm @format='edit' />
+    </template>
+  };
+}
+
+class IsolatedSecForSaleHub extends Component<typeof SaleHub> {
+  //convert lead-form Modal
+  @tracked isModalVisible = false;
+
+  @action
+  toggleModal() {
+    this.isModalVisible = !this.isModalVisible;
+  }
+
+  @action
+  openModal() {
+    this.isModalVisible = true;
+  }
+
+  @action
+  closeModal() {
+    this.isModalVisible = false;
+  }
+
+  @action
+  handleConvert() {
+    this.openModal();
+    this.updateAccountForm();
+    this.updateContactForm();
+    this.updateOpportunityAccount();
+  }
+
+  //task-form modal
+  @tracked isTaskFormModalVisible = false;
+
+  @action
+  openTaskFormModal() {
+    this.isTaskFormModalVisible = true;
+  }
+
+  @action
+  closeTaskFormModal() {
+    this.isTaskFormModalVisible = false;
+  }
+
+  //task-form modal by Id
+  @tracked selectedTask: GroupedTasksSignature | null = null;
+  @tracked isTaskFormModalByIdVisible = false;
+
+  @action
+  openTaskFormModaById(id: string) {
+    this.isTaskFormModalByIdVisible = true;
+    const filteredTask = this.tasks.find((task) => task.taskId == id);
+    if (!filteredTask) return;
+    this.selectedTask = filteredTask;
+  }
+
+  @action
+  closeTaskFormModalById() {
+    this.isTaskFormModalByIdVisible = false;
+  }
+
+  //auto bind form
+  @action
+  updateAccountForm() {
+    if (
+      this.args.model &&
+      this.args.model.accountForm &&
+      this.args.model.leadForm
+    ) {
+      const { name } = this.args.model.leadForm.company;
+      this.args.model.accountForm.accountName = name;
+    }
+  }
+
+  @action
+  updateContactForm() {
+    if (
+      this.args.model &&
+      this.args.model.contactForm &&
+      this.args.model.leadForm
+    ) {
+      const { company, user } = this.args.model.leadForm;
+      const { salutation, firstName, lastName } = user;
+
+      this.args.model.contactForm.user.salutation = salutation;
+      this.args.model.contactForm.user.firstName = firstName;
+      this.args.model.contactForm.user.lastName = lastName;
+
+      this.args.model.contactForm.accountName = company.name;
+    }
+  }
+
+  @action
+  updateOpportunityAccount() {
+    if (
+      this.args.model &&
+      this.args.model.opportunityForm &&
+      this.args.model.leadForm
+    ) {
+      const { company } = this.args.model.leadForm;
+
+      this.args.model.opportunityForm.opportunityName = company.name;
+      this.args.model.opportunityForm.accountName = company.name;
+      this.args.model.opportunityForm.company = company;
+    }
+  }
+
+  get accountName() {
+    if (!this.args.model.leadForm) return '-';
+    const { company } = this.args.model.leadForm;
+
+    if (!company) return '-';
+    return company.name;
+  }
+
+  get user() {
+    if (!this.args.model.leadForm || !this.args.model.leadForm.user) return '-';
+    const { salutation, firstName, lastName } = this.args.model.leadForm.user;
+
+    if (!salutation || !firstName || !lastName) return 'User Not Found';
+    return `${salutation} ${firstName} ${lastName}`;
+  }
+
+  //targetPageLinks
+  @tracked initTargetPageLinks = [
+    {
+      name: 'Lead Form',
+      isActive: true,
+      shouldShowFormData: true,
+    },
+    {
+      name: 'Account Form',
+      isActive: false,
+      shouldShowFormData: false,
+    },
+    {
+      name: 'Contact Form',
+      isActive: false,
+      shouldShowFormData: false,
+    },
+    {
+      name: 'Opportunity Form',
+      isActive: false,
+      shouldShowFormData: false,
+    },
+  ] as Array<TargetPageLinkSingnature>;
+
+  get targetPageLinks() {
+    return this.initTargetPageLinks.map((page) => {
+      return { ...page, isActive: page.name === this.targetPage };
+    });
+  }
+
+  get targetPage() {
+    return this.args.model.targetPage;
+  }
+
+  @action onSelectPage(name: string) {
+    this.args.model.targetPage = name;
+
+    this.initTargetPageLinks = this.initTargetPageLinks.map((page) => {
+      return {
+        ...page,
+        isActive: page.name === name,
+      };
+    });
+  }
+
+  //steps
+  @tracked initStepOptions = [
+    {
+      step: 0,
+      name: 'New',
+      isActive: true,
+      isCompleted: false,
+      isProceedToNextStep: false,
+    },
+    {
+      step: 1,
+      name: 'Working',
+      isActive: false,
+      isCompleted: false,
+      isProceedToNextStep: false,
+    },
+    {
+      step: 2,
+      name: 'Nurturing',
+      isActive: false,
+      isCompleted: false,
+      isProceedToNextStep: false,
+    },
+    {
+      step: 3,
+      name: 'Unqualified',
+      isActive: false,
+      isCompleted: false,
+      isProceedToNextStep: false,
+    },
+    {
+      step: 4,
+      name: 'Converted',
+      isActive: false,
+      isCompleted: false,
+      isProceedToNextStep: false,
+    },
+  ] as Array<StepSignature>;
+
+  get stepOptions() {
+    let currentCompletedStep = this.initStepOptions.findIndex(
+      (option) => option.name === this.args.model.leadForm?.leadStatus,
+    );
+
+    this.initStepOptions.map((option, index) => {
+      option.isCompleted =
+        index <= currentCompletedStep ||
+        this.args.model.leadForm?.leadStatus === 'Qualified' ||
+        !!this.args.model.isLeadFormConverted;
+      option.isProceedToNextStep = index === currentCompletedStep + 1;
+    });
+
+    return this.initStepOptions;
+  }
+  @action rerenderState() {
+    this.stepOptions.map((option) => {
+      option.isCompleted = !!this.args.model.isLeadFormConverted;
+    });
+
+    return this.stepOptions;
+  }
+
+  @action updateLeadStatus(status: string) {
+    if (!(this.args.model.leadForm && this.args.model.leadForm.leadStatus))
+      return;
+
+    //bug for sync
+    this.args.model.leadForm.leadStatus = status;
+  }
+
+  //upcoming task list
+  get tasks() {
+    const { scheduledTask } = this.args.model;
+
+    if (!scheduledTask) return [];
+
+    return scheduledTask.map((task) => {
+      const { taskForm } = task;
+      return {
+        month: taskForm.dueDate ? this.formatDueDate(taskForm.dueDate) : null,
+        taskId: taskForm.taskId,
+        subject: taskForm.subject,
+        dueDate: taskForm.dueDate,
+        comments: taskForm.comments,
+        isCompleted: taskForm.isCompleted,
+        relatedTo: taskForm.relatedTo,
+      };
+    });
+  }
+
+  get groupedTasks() {
+    if (!this.tasks) return;
+
+    const groupedTasks: { [key: string]: GroupedTasksSignature[] } =
+      this.tasks.reduce(
+        (
+          acc: { [key: string]: GroupedTasksSignature[] },
+          task: GroupedTasksSignature,
+        ) => {
+          if (!!task.month) {
+            if (!acc[task.month]) {
+              acc[task.month] = [];
+            }
+            acc[task.month].push(task);
+          }
+          return acc;
+        },
+        {},
+      );
+
+    const sortedMonths = Object.keys(groupedTasks).sort((a, b) => {
+      if (a === 'Upcoming') return -1;
+      if (b === 'Overdue') return 1;
+      return new Date(a).getTime() - new Date(b).getTime();
+    });
+
+    const sortedGroupedTasks: any = sortedMonths.reduce(
+      (acc: any, month: string) => {
+        acc[month] = groupedTasks[month].sort(
+          (a, b) =>
+            new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime(),
+        );
+        return acc;
+      },
+      {},
+    );
+
+    return sortedGroupedTasks;
+  }
+
+  @action formatDueDate(date: Date) {
+    const todayDate = new Date();
+
+    if (isToday(date)) return formatDate(new Date(date), 'MMMM yyyy');
+    if (date > todayDate) return 'Upcoming';
+    return 'Overdue';
+  }
+
+  @action formatDay(date: Date) {
+    const todayDate = new Date();
+    if (isToday(date)) return 'Today';
+    if (isTomorrow(date)) return 'Tomorrow';
+    if (date > todayDate || isTomorrow(date))
+      return formatDate(new Date(date), 'dd/MM/yyyy');
+    if (date < todayDate) return null;
+    if (isThisMonth(date)) return 'This Month';
+    return null;
+  }
+
+  @action toggleOnCheckTask(taskIdChecked: string) {
+    this.args.model.scheduledTask = this.args.model.scheduledTask?.map(
+      (task) => {
+        task.taskForm.taskId === taskIdChecked
+          ? (task.taskForm.isCompleted = !task.taskForm.isCompleted)
+          : task.taskForm.isCompleted;
+
+        return task;
+      },
+    );
+
+    return this.args.model.scheduledTask;
+  }
+
+  /* Converted Status Options */
+  get selectedConvertedStatus() {
+    return {
+      name:
+        this.args.model.convertedStatus ||
+        this.convertedStatusOptions[0].name ||
+        null,
+    };
+  }
+
+  @tracked convertedStatusOptions = [
+    { name: 'Unqualified' },
+    { name: 'Qualified' },
+  ] as Array<CategorySignature>;
+
+  @action updateConvertedStatus(type: { name: string }) {
+    this.args.model.convertedStatus = type.name;
+
+    if (this.args.model.leadForm) {
+      this.args.model.leadForm.leadStatus = type.name;
+    }
+  }
+
+  @action cancel() {
+    this.args.model.isLeadFormConverted =
+      this.args.model.isLeadFormConverted || false;
+
+    this.closeModal();
+  }
+
+  @action convert() {
+    this.args.model.isLeadFormConverted = true;
+    this.rerenderState();
+    this.closeModal();
+  }
+
+  //if else condition
+  get shouldShowLeadForm() {
+    return !!this.args.model.leadForm ? true : false;
+  }
+
+  get shouldShowAccountForm() {
+    return !!this.args.model.accountForm ? true : false;
+  }
+
+  get shouldShowContactForm() {
+    return !!this.args.model.contactForm ? true : false;
+  }
+
+  get shouldShowOpportunityForm() {
+    return !!this.args.model.opportunityForm ? true : false;
+  }
+
+  <template>
+    <Modal
+      @size={{'large'}}
+      @isOpen={{this.isModalVisible}}
+      @onClose={{this.closeModal}}
+      class='dialog-box'
+    >
+      <CardContainer class='container'>
+        <IconButton
+          @icon={{IconX}}
+          @width='12'
+          @height='12'
+          {{on 'click' this.closeModal}}
+          class='dialog-box__close'
+          aria-label='close modal'
+        />
+        <h1>Convert Lead Form</h1>
+
+        <div class='formInputGroup'>
+          <FieldContainer
+            @tag='label'
+            @label='Account Form'
+            @vertical={{true}}
+            class='input-container'
+          >
+            Account Name:
+            {{this.accountName}}
+          </FieldContainer>
+
+          <FieldContainer
+            @tag='label'
+            @label='Contact Form'
+            @vertical={{true}}
+            class='input-container'
+          >
+            User:
+            {{this.user}}
+          </FieldContainer>
+
+          <FieldContainer
+            @tag='label'
+            @label='Opportunity Form'
+            @vertical={{true}}
+            class='input-container'
+          >
+            Account Name:
+            {{this.accountName}}
+          </FieldContainer>
+
+          <FieldContainer
+            @tag='label'
+            @label='*Record Owner'
+            @vertical={{true}}
+          >
+            <@fields.recordOwner @format='edit' />
+          </FieldContainer>
+
+          <FieldContainer @tag='label' @label='Lead Status' @vertical={{true}}>
+            <BoxelSelect
+              @searchEnabled={{true}}
+              @searchField='name'
+              @selected={{this.selectedConvertedStatus}}
+              @onChange={{this.updateConvertedStatus}}
+              @options={{this.convertedStatusOptions}}
+              class='select'
+              as |item|
+            >
+              <div>{{item.name}}</div>
+            </BoxelSelect>
+          </FieldContainer>
+
+          <GridContainer class='footer'>
+            <Button
+              data-test-cancel
+              {{on 'click' this.cancel}}
+              @kind='secondary'
+              @size='tall'
+            >cancel</Button>
+
+            <Button
+              data-test-convert
+              {{on 'click' this.convert}}
+              @kind='primary'
+              @size='tall'
+            >convert</Button>
+          </GridContainer>
+        </div>
+
+      </CardContainer>
+    </Modal>
+    <Modal
+      @size={{'large'}}
+      @isOpen={{this.isTaskFormModalVisible}}
+      @onClose={{this.closeTaskFormModal}}
+      class='dialog'
+    >
+      <CardContainer class='container'>
+        <IconButton
+          @icon={{IconX}}
+          @width='12'
+          @height='12'
+          {{on 'click' this.closeTaskFormModal}}
+          class='dialog-box__close'
+          aria-label='close modal'
+        />
+        <div class='dialog-box'>
+          <@fields.scheduledTask @format='edit' />
+        </div>
+      </CardContainer>
+    </Modal>
+    <Modal
+      @size={{'large'}}
+      @isOpen={{this.isTaskFormModalByIdVisible}}
+      @onClose={{this.closeTaskFormModalById}}
+      class='dialog'
+    >
+      <CardContainer class='container'>
+        <IconButton
+          @icon={{IconX}}
+          @width='12'
+          @height='12'
+          {{on 'click' this.closeTaskFormModalById}}
+          class='dialog-box__close'
+          aria-label='close modal'
+        />
+        <div class='dialog-box'>
+          <CardContainer @displayBoundaries={{false}}>
+            <FieldContainer @tag='label' @label='Task Id' @vertical={{false}}>
+              {{this.selectedTask.taskId}}
+            </FieldContainer>
+
+            <FieldContainer @tag='label' @label='Subject' @vertical={{false}}>
+              {{this.selectedTask.subject}}
+            </FieldContainer>
+
+            <FieldContainer @tag='label' @label='Comments' @vertical={{false}}>
+              {{this.selectedTask.comments}}
+            </FieldContainer>
+
+            <FieldContainer @tag='label' @label='Due Date' @vertical={{false}}>
+              {{this.selectedTask.dueDate}}
+            </FieldContainer>
+
+            <FieldContainer
+              @tag='label'
+              @label='Related To'
+              @vertical={{false}}
+            >
+              {{this.selectedTask.relatedTo.accountName}}
+            </FieldContainer>
+          </CardContainer>
+        </div>
+      </CardContainer>
+    </Modal>
+
+    <div class='sale-hub'>
+      <section>
+        <TargetPageLinks
+          @targetPageLinks={{this.targetPageLinks}}
+          @targetPage={{this.args.model.targetPage}}
+          @onSelectPage={{this.onSelectPage}}
+        />
+      </section>
+
+      <section class='sale-hub-container'>
+        <aside class='left-panel'>
+
+          {{#if (eq this.args.model.targetPage 'Lead Form')}}
+            {{#if this.shouldShowLeadForm}}
+              <section>
+                {{! *this have bug, if linkTo in isolated mode is empty, the page will cause error }}
+                <@fields.leadForm />
+              </section>
+            {{else}}
+              <section>
+                <p>Lead form data is missing or invalid.</p>
+              </section>
+            {{/if}}
+          {{/if}}
+
+          {{#if (eq this.args.model.targetPage 'Account Form')}}
+            {{#if this.shouldShowAccountForm}}
+              <section>
+                <@fields.accountForm />
+              </section>
+            {{else}}
+              <section>
+                <p>Account form data is missing or invalid.</p>
+              </section>
+            {{/if}}
+          {{/if}}
+
+          {{#if (eq this.args.model.targetPage 'Contact Form')}}
+            {{#if this.shouldShowContactForm}}
+              <section>
+                <@fields.contactForm />
+              </section>
+            {{else}}
+              <section>
+                <p>Contact form data is missing or invalid.</p>
+              </section>
+            {{/if}}
+          {{/if}}
+
+          {{#if (eq this.args.model.targetPage 'Opportunity Form')}}
+            {{#if this.shouldShowOpportunityForm}}
+              <section>
+                <@fields.opportunityForm />
+              </section>
+            {{else}}
+              <section>
+                <p>Opportunity form data is missing or invalid.</p>
+              </section>
+            {{/if}}
+          {{/if}}
+
+        </aside>
+
+        <main class='center-panel'>
+
+          {{#if (eq this.args.model.targetPage 'Lead Form')}}
+            {{#if this.shouldShowLeadForm}}
+              <section class='progress-tab-panel'>
+                <Steps
+                  @steps={{this.stepOptions}}
+                  @isLeadFormConverted={{this.args.model.isLeadFormConverted}}
+                  @updateLeadStatus={{this.updateLeadStatus}}
+                  @handleConvert={{this.handleConvert}}
+                />
+              </section>
+            {{/if}}
+          {{/if}}
+
+          <section class='activity-panel'>
+            <div class='activity-button-group'>
+              <button class='button' {{on 'click' this.openTaskFormModal}}>
+                New Task
+              </button>
+            </div>
+
+            <hr style='border: 1px dashed #eeeeee; margin: 1rem 0px;' />
+            <div class='activity-lists'>
+
+              {{#if this.args.model.scheduledTask}}
+                {{#each-in this.groupedTasks as |month tasks|}}
+                  <div class='sub-heading'>
+                    <span>{{month}}</span>
+                  </div>
+
+                  <div>
+                    {{#each tasks as |task|}}
+                      <div class='checkbox-card'>
+                        <div>
+                          <label>
+                            <input
+                              type='checkbox'
+                              checked={{task.isCompleted}}
+                              {{on
+                                'change'
+                                (fn this.toggleOnCheckTask task.taskId)
+                              }}
+                            />
+                            <span
+                              class={{if task.isCompleted 'line-through'}}
+                            >You had an event/a task -
+                            </span>
+                          </label>
+                          <span
+                            class='highlight-link'
+                            {{on
+                              'click'
+                              (fn this.openTaskFormModaById task.taskId)
+                            }}
+                          >{{task.subject}}</span>
+                        </div>
+
+                        <span class='dueDate'>{{this.formatDay
+                            task.dueDate
+                          }}</span>
+                      </div>
+                    {{/each}}
+                  </div>
+                {{/each-in}}
+
+              {{else}}
+                <div class='sub-heading'>
+                  Upcoming & Overdue
+                </div>
+                <div style='text-align:center;'>
+                  No activites to show.<br />
+                  Get started by sending an email, scheduling a task, and more.
+                </div>
+              {{/if}}
+
+            </div>
+
+          </section>
+        </main>
+
+        <aside class='right-panel'>
+          <section>
+            {{#if (eq this.args.model.targetPage 'Account Form')}}
+              {{#if this.shouldShowAccountForm}}
+                {{#if this.shouldShowContactForm}}
+                  <section>
+                    {{! only show required field on contactform embedded mode}}
+                    <h3>Contact Form</h3>
+                    <@fields.contactForm />
+                  </section>
+                {{/if}}
+
+                {{#if this.shouldShowOpportunityForm}}
+                  <section>
+                    {{! only show required field on opportunityForm embedded mode}}
+                    <h3>Opportunity Form</h3>
+                    <@fields.opportunityForm />
+                  </section>
+                {{/if}}
+              {{/if}}
+            {{/if}}
+
+            {{#if (eq this.args.model.targetPage 'Contact Form')}}
+              {{#if this.shouldShowContactForm}}
+                {{#if this.shouldShowOpportunityForm}}
+                  <section>
+                    {{! only show required field on opportunityForm embedded mode}}
+                    <h3>Opportunity Form</h3>
+                    <@fields.opportunityForm />
+                  </section>
+                {{/if}}
+              {{/if}}
+            {{/if}}
+
+            {{#if (eq this.args.model.targetPage 'Opportunity Form')}}
+              {{#if this.shouldShowContactForm}}
+                <section>
+                  {{! only show required field on contactform embedded mode}}
+                  <h3>Contact Form</h3>
+                  <@fields.contactForm />
+                </section>
+              {{/if}}
+            {{/if}}
+          </section>
+        </aside>
+      </section>
+    </div>
+
+    <style>
+      .container {
+        padding: var(--boxel-sp);
+      }
+      .input-container {
+        padding: var(--boxel-sp);
+        background-color: var(--boxel-100);
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+      }
+      .sale-hub {
+        padding: var(--boxel-sp-xs);
+        background-color: #007272;
+        height: 100vh;
+        overflow: scroll;
+      }
+      .target-pages-tab {
+        display: flex;
+        gap: var(--boxel-sp-xxs);
+        overflow-x: auto;
+      }
+      .sale-hub-container {
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: 2fr 4fr 2fr;
+        gap: var(--boxel-sp);
+        background-color: #007272;
+      }
+      .left-panel {
+        overflow: auto;
+        padding: var(--boxel-sp-xs);
+        background-color: var(--boxel-100);
+        border-radius: var(--boxel-border-radius);
+      }
+      .center-panel {
+        overflow: hidden;
+        padding: var(--boxel-sp-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
+        background-color: var(--boxel-100);
+        border-radius: var(--boxel-border-radius);
+      }
+      .right-panel {
+        overflow: auto;
+        padding: var(--boxel-sp-xs);
+        background-color: var(--boxel-100);
+        border-radius: var(--boxel-border-radius);
+      }
+      .progress-tab-panel {
+        padding: var(--boxel-sp-xs);
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        background-color: var(--boxel-light);
+      }
+      .activity-panel {
+        padding: var(--boxel-sp-xs);
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        background-color: var(--boxel-light);
+        overflow-x: hidden;
+      }
+      .activity-button-group {
+        display: flex;
+        gap: var(--boxel-sp-xxs);
+        overflow-x: auto;
+      }
+      .activity-lists {
+        margin-top: 1rem;
+      }
+      .activity-lists > * + * {
+        margin-top: 1rem;
+      }
+      .activity-list {
+        padding: var(--boxel-sp-xs);
+      }
+      .sub-heading {
+        display: flex;
+        align-items: start;
+        justify-content: space-between;
+
+        font-weight: bold;
+        padding: var(--boxel-sp-xxs);
+        background-color: var(--boxel-200);
+      }
+
+      .button {
+        display: flex;
+        flex: 0 0 auto;
+        width: auto;
+        min-width: 120px;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--boxel-sp-xs);
+        padding: var(--boxel-sp-xxs);
+        font-size: var(--boxel-font-size-sm);
+        cursor: pointer;
+        font-weight: 600;
+        position: relative;
+        background-color: var(--boxel-100);
+        border: 2px solid var(--boxel-200);
+      }
+      .button:hover {
+        background-color: var(--boxel-200);
+      }
+      .button-save {
+        width: 100%;
+        background-color: var(--boxel-dark-teal);
+        border: 2px solid var(--boxel-200);
+        color: white;
+        padding: var(--boxel-sp-xxs);
+        font-size: var(--boxel-font-size-sm);
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .dialog-box {
+        max-height: 80vh;
+        overflow: overlay;
+      }
+      .line-through {
+        text-decoration: line-through;
+      }
+      .checkbox-card {
+        display: flex;
+        align-items: start;
+        justify-content: space-between;
+        gap: var(--boxel-sp-xs);
+      }
+      .dueDate {
+        color: var(--boxel-red);
+      }
+      .formInputGroup > * + * {
+        margin-top: 1.5rem;
+      }
+      .select {
+        padding: var(--boxel-sp-xs);
+        background-color: white;
+      }
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        gap: var(--boxel-sp-xs);
+      }
+      .highlight-link {
+        text-decoration: underline;
+        font-weight: bold;
+        cursor: pointer;
+      }
+    </style>
+  </template>
+}
+
+export class SaleHub extends CardDef {
+  static displayName = 'sale hub';
+
+  @field targetPage = contains(StringField, {
+    description: `Show which page is clicked`,
+  });
+  @field leadForm = linksTo(LeadForm, {
+    description: `Lead form`,
+  });
+  @field accountForm = linksTo(CrmAccount, {
+    description: `Account Form`,
+  });
+  @field contactForm = linksTo(ContactForm, {
+    description: `Contact Form`,
+  });
+  @field opportunityForm = linksTo(OpportunityForm, {
+    description: `Opportunity Form`,
+  });
+  @field scheduledTask = containsMany(ScheduledTask, {
+    description: `Upcoming & overdue tasks`,
+  });
+  @field recordOwner = linksTo(MatrixUser, {
+    description: `Record owner`,
+  });
+  @field convertedStatus = contains(StringField, {
+    description: `Converted Status`,
+  });
+  @field isLeadFormConverted = contains(BooleanField, {
+    description: `Check if leadForm is converted`,
+  });
+
+  static isolated = IsolatedSecForSaleHub;
+}
diff --git a/packages/drafts-realm/task-form.gts b/packages/drafts-realm/task-form.gts
index f386da77a9..b0b05b8dad 100644
--- a/packages/drafts-realm/task-form.gts
+++ b/packages/drafts-realm/task-form.gts
@@ -25,7 +25,6 @@ interface CategorySignature {
 class IsolatedSecForTaskForm extends Component<typeof TaskForm> {
   <template>
     <CardContainer @displayBoundaries={{false}} class='container'>
-
       <div class='field-input'>
         <label>Subject: </label>
         <div><@fields.subject /></div>
@@ -154,6 +153,10 @@ class EditSecForTaskForm extends Component<typeof TaskForm> {
 
   <template>
     <CardContainer @displayBoundaries={{false}} class='container'>
+      <FieldContainer @tag='label' @label='Task Id' @vertical={{true}}>
+        <@fields.taskId />
+      </FieldContainer>
+
       <FieldContainer @tag='label' @label='Subject' @vertical={{true}}>
         <BoxelSelect
           @searchEnabled={{true}}
@@ -197,6 +200,9 @@ class EditSecForTaskForm extends Component<typeof TaskForm> {
 
 export class TaskForm extends CardDef {
   static displayName = 'Task Form';
+  @field taskId = contains(StringField, {
+    description: `Task Id`,
+  });
   @field subject = contains(StringField, {
     description: `Subject`,
   });