diff --git a/apps/mail-bridge/routes/postal/mail/inbound/[...mailServer].post.ts b/apps/mail-bridge/routes/postal/mail/inbound/[...mailServer].post.ts
index 5cef66aa..dfc328c1 100644
--- a/apps/mail-bridge/routes/postal/mail/inbound/[...mailServer].post.ts
+++ b/apps/mail-bridge/routes/postal/mail/inbound/[...mailServer].post.ts
@@ -1,6 +1,6 @@
 import { db } from '@u22n/database';
 import { simpleParser } from 'mailparser';
-// @ts-expect-error, No types yet
+// @ts-expect-error, not typed yet
 import { authenticate } from 'mailauth';
 import { and, eq, inArray } from '@u22n/database/orm';
 import type { InferInsertModel } from '@u22n/database/orm';
@@ -55,24 +55,26 @@ export default eventHandler(async (event) => {
     return;
   }
 
-  let orgId: number | null = null;
+  let orgId: number = 0;
   let orgPublicId: string | null = null;
-
-  if (!event.context.params?.mailServer) {
-    console.error('⛔ no mailserver found in the event context', {
+  const [orgIdStr, mailserverId] = event.context.params!.mailServer!.split('/');
+  if (!orgIdStr || !mailserverId) {
+    console.error('⛔ no orgId or mailserverId found', {
       payloadPostalEmailId
     });
     return;
   }
 
-  const [orgIdStr = '', mailserverId = ''] =
-    event.context.params.mailServer.split('/');
-
   if (orgIdStr === '0' || mailserverId === 'root') {
     // handle for root emails
     // get the email identity for the root email
-    const [rootEmailUsername = '', rootEmailDomain = ''] =
-      payloadEmailTo.split('@');
+    const [rootEmailUsername, rootEmailDomain] = payloadEmailTo.split('@');
+    if (!rootEmailUsername || !rootEmailDomain) {
+      console.error('⛔ invalid root email username or domain', {
+        payloadPostalEmailId
+      });
+      return;
+    }
     const rootEmailIdentity = await db.query.emailIdentities.findFirst({
       where: and(
         eq(emailIdentities.username, rootEmailUsername),
@@ -100,6 +102,8 @@ export default eventHandler(async (event) => {
     orgId = rootEmailIdentity.orgId;
     orgPublicId = rootEmailIdentity.org.publicId;
   } else {
+    orgId = Number(orgIdStr);
+
     // handle for org emails
     if (!validateTypeId('postalServers', mailserverId)) {
       console.error('⛔ invalid mailserver id', {
@@ -123,7 +127,6 @@ export default eventHandler(async (event) => {
         }
       }
     });
-
     // prelimary checks
     if (!mailServer || +mailServer.orgId !== orgId) {
       console.error('⛔ mailserver not found or does not belong to this org', {
@@ -138,6 +141,13 @@ export default eventHandler(async (event) => {
     orgPublicId = mailServer.org.publicId;
   }
 
+  if (orgId === 0 || !orgPublicId) {
+    console.error('⛔ orgId or orgPublicId not found', {
+      payloadPostalEmailId
+    });
+    return;
+  }
+
   //* parse the email payload
   const payloadEmail = Buffer.from(payloadEmailB64, 'base64').toString('utf-8');
   const parsedEmail = await simpleParser(payloadEmail);
@@ -162,6 +172,17 @@ export default eventHandler(async (event) => {
   }
 
   // Extract key email properties
+  if (
+    !parsedEmail.from ||
+    !parsedEmail.to ||
+    !parsedEmail.subject ||
+    !parsedEmail.messageId
+  ) {
+    console.error('⛔ missing email attributes', {
+      payloadPostalEmailId
+    });
+    return;
+  }
   if (parsedEmail.from.value.length > 1) {
     console.error(
       '⛔ multiple from addresses detected in a message, only using first email address',
@@ -238,6 +259,20 @@ export default eventHandler(async (event) => {
       : Promise.resolve([])
   ]);
 
+  if (
+    !messageToPlatformObject ||
+    !messageToPlatformObject[0] ||
+    !messageFromPlatformObject ||
+    !messageFromPlatformObject[0]
+  ) {
+    console.error(
+      '⛔ no messageToPlatformObject or messageFromPlatformObject found',
+      {
+        payloadPostalEmailId
+      }
+    );
+    return;
+  }
   // check the from contact and update their signature if it is null
   if (messageFromPlatformObject[0]?.type === 'contact') {
     const contact = await db.query.contacts.findFirst({
@@ -250,7 +285,13 @@ export default eventHandler(async (event) => {
         signaturePlainText: true
       }
     });
-    if (!contact?.signaturePlainText) {
+    if (!contact) {
+      console.error('⛔ no contact found for from address', {
+        payloadPostalEmailId
+      });
+      return;
+    }
+    if (!contact.signaturePlainText) {
       await db
         .update(contacts)
         .set({
@@ -279,7 +320,7 @@ export default eventHandler(async (event) => {
 
   // if theres no email identity ids, then we assume that this email has no destination, so we need to send the bounce message
   if (!emailIdentityIds.length) {
-    //! SEND BOUNCE MESSAGE
+    // !FIX SEND BOUNCE MESSAGE
     console.error('⛔ no email identity ids found', { messageAddressIds });
 
     return;
@@ -325,7 +366,7 @@ export default eventHandler(async (event) => {
 
   //* start to process the conversation
   let hasReplyToButIsNewConvo: boolean | null = null;
-  let convoId: number | null = null;
+  let convoId: number = 0;
   let replyToId: number | null = null;
   let subjectId: number | null = null;
 
@@ -336,6 +377,12 @@ export default eventHandler(async (event) => {
   const fromAddressPlatformObject = messageFromPlatformObject.find(
     (a) => a.ref === 'from'
   );
+  if (!fromAddressPlatformObject) {
+    console.error('⛔ no from address platform object found', {
+      payloadPostalEmailId
+    });
+    return;
+  }
   const convoParticipantsToAdd: ConvoParticipantInsertDbType[] = [];
 
   // if the email has a reply to header, then we need to check if a message exists in the system with that reply to id
@@ -382,6 +429,15 @@ export default eventHandler(async (event) => {
       convoId = existingMessage.convoId;
       replyToId = existingMessage.id;
 
+      if (!existingMessage.convoId || convoId === 0) {
+        console.error('⛔ no convoId found for existing message', {
+          payloadPostalEmailId
+        });
+        return;
+      }
+      if (!existingMessage.subject) {
+        existingMessage.subject = { id: 0, subject: 'No Subject' };
+      }
       // check if the subject is the same as existing, if not, add a new subject to the convo
       if (subject !== existingMessage.subject?.subject) {
         const newSubject = await db.insert(convos).values({
@@ -535,8 +591,9 @@ export default eventHandler(async (event) => {
           id: true
         }
       });
-      fromAddressParticipantId = contactParticipant?.id || null;
-    } else if (fromAddressPlatformObject?.type === 'emailIdentity') {
+      // @ts-expect-error we check and define earlier up
+      fromAddressParticipantId = contactParticipant.id;
+    } else if (fromAddressPlatformObject.type === 'emailIdentity') {
       // we need to get the first person/group in the routing rule and add them to the convo
       const emailIdentityParticipant = await db.query.emailIdentities.findFirst(
         {
@@ -565,26 +622,31 @@ export default eventHandler(async (event) => {
         }
       );
       const firstDestination =
-        emailIdentityParticipant?.routingRules.destinations[0];
+        // @ts-expect-error we check and define earlier up
+        emailIdentityParticipant.routingRules.destinations[0];
       let convoParticipantFromAddressIdentity;
-      if (firstDestination?.orgMemberId) {
+      // @ts-expect-error we check and define earlier up
+      if (firstDestination.orgMemberId) {
         convoParticipantFromAddressIdentity =
           await db.query.convoParticipants.findFirst({
             where: and(
               eq(convoParticipants.orgId, orgId),
-              eq(convoParticipants.convoId, convoId || 0),
+              eq(convoParticipants.convoId, convoId),
+              // @ts-expect-error we check and define earlier up
               eq(convoParticipants.orgMemberId, firstDestination.orgMemberId)
             ),
             columns: {
               id: true
             }
           });
-      } else if (firstDestination?.groupId) {
+        // @ts-expect-error we check and define earlier up
+      } else if (firstDestination.groupId) {
         convoParticipantFromAddressIdentity =
           await db.query.convoParticipants.findFirst({
             where: and(
               eq(convoParticipants.orgId, orgId),
-              eq(convoParticipants.convoId, convoId || 0),
+              eq(convoParticipants.convoId, convoId),
+              // @ts-expect-error we check and define earlier up
               eq(convoParticipants.userGroupId, firstDestination.groupId)
             ),
             columns: {
@@ -592,8 +654,8 @@ export default eventHandler(async (event) => {
             }
           });
       }
-      fromAddressParticipantId =
-        convoParticipantFromAddressIdentity?.id || null;
+      // @ts-expect-error we check and define earlier up
+      fromAddressParticipantId = convoParticipantFromAddressIdentity.id;
     }
   }
 
@@ -604,20 +666,26 @@ export default eventHandler(async (event) => {
       to: messageToPlatformObject.map((a) => {
         return {
           id: a.id,
-          type: a.type
+          type: a.type,
+          publicId: a.publicId,
+          email: a.email
         };
       }),
       from: messageFromPlatformObject.map((a) => {
         return {
           id: a.id,
-          type: a.type
+          type: a.type,
+          publicId: a.publicId,
+          email: a.email
         };
       }),
       cc:
         messageCcPlatformObject.map((a) => {
           return {
             id: a.id,
-            type: a.type
+            type: a.type,
+            publicId: a.publicId,
+            email: a.email
           };
         }) || [],
       postalMessages: [
@@ -625,8 +693,7 @@ export default eventHandler(async (event) => {
           id: payloadPostalEmailId,
           postalMessageId: messageId,
           recipient: payloadEmailTo,
-          // @ts-expect-error, not sure about this yet
-          token: null
+          token: ''
         }
       ],
       emailHeaders: JSON.stringify(parsedEmail.headers)
@@ -641,7 +708,7 @@ export default eventHandler(async (event) => {
     convoEntryBody,
     tipTapExtensions
   );
-
+  // @ts-expect-error we check and define earlier up
   const insertNewConvoEntry = await db.insert(convoEntries).values({
     orgId: orgId,
     publicId: typeIdGenerator('convoEntries'),
@@ -682,7 +749,7 @@ export default eventHandler(async (event) => {
       publicId: string;
       signedUrl: string;
     };
-    const preUpload = (await fetch(
+    const preUpload: PreSignedData = await fetch(
       `${useRuntimeConfig().storage.url}/api/attachments/internalPresign`,
       {
         method: 'post',
@@ -696,7 +763,7 @@ export default eventHandler(async (event) => {
           filename: input.fileName
         })
       }
-    ).then((res) => res.json())) as PreSignedData;
+    ).then((res: Response) => res.json() as Promise<PreSignedData>);
     if (!preUpload || !preUpload.publicId || !preUpload.signedUrl) {
       throw new Error('Missing attachmentPublicId or presignedUrl');
     }
@@ -736,8 +803,8 @@ export default eventHandler(async (event) => {
     await Promise.all(
       attachments.map((attachment) => {
         return uploadAndAttachAttachment({
-          orgId: orgId || 0,
-          fileName: attachment.filename || '',
+          orgId: orgId,
+          fileName: attachment.filename || 'No Filename',
           fileType: attachment.contentType,
           fileContent: attachment.content,
           convoId: convoId || 0,
diff --git a/apps/mail-bridge/trpc/routers/sendMailRouter.ts b/apps/mail-bridge/trpc/routers/sendMailRouter.ts
index 31347448..4987dc65 100644
--- a/apps/mail-bridge/trpc/routers/sendMailRouter.ts
+++ b/apps/mail-bridge/trpc/routers/sendMailRouter.ts
@@ -56,7 +56,7 @@ export const sendMailRouter = router({
                 }
               ]
             }
-          } as ConvoEntryMetadata
+          }
         };
       }
 
@@ -77,6 +77,7 @@ export const sendMailRouter = router({
         where: eq(emailIdentities.publicId, sendAsEmailIdentityPublicId),
         columns: {
           id: true,
+          publicId: true,
           username: true,
           domainName: true,
           sendName: true,
@@ -256,7 +257,17 @@ export const sendMailRouter = router({
         const entryMetadata: ConvoEntryMetadata = {
           email: {
             to: [],
-            from: [{ id: +sendAsEmailIdentity.id, type: 'emailIdentity' }],
+            from: [
+              {
+                id: +sendAsEmailIdentity.id,
+                type: 'emailIdentity',
+                publicId: sendAsEmailIdentity.publicId,
+                email:
+                  sendAsEmailIdentity.username +
+                  '@' +
+                  sendAsEmailIdentity.domainName
+              }
+            ],
             cc: [],
             messageId: sendMailPostalResponse.data.message_id,
             postalMessages: transformedMessages.map((message) => ({
@@ -267,7 +278,7 @@ export const sendMailRouter = router({
         };
         return {
           success: true,
-          metadata: entryMetadata
+          metadata: entryMetadata as ConvoEntryMetadata
         };
       } else {
         console.error(
diff --git a/apps/mail-bridge/types.ts b/apps/mail-bridge/types.ts
index d56c6e0c..5c71a176 100644
--- a/apps/mail-bridge/types.ts
+++ b/apps/mail-bridge/types.ts
@@ -14,6 +14,8 @@ export interface postalEmailPayload {
 export interface MessageParseAddressPlatformObject {
   id: number;
   type: 'contact' | 'emailIdentity';
+  publicId: string;
+  email: string;
   contactType:
     | 'person'
     | 'product'
diff --git a/apps/mail-bridge/utils/contactParsing.ts b/apps/mail-bridge/utils/contactParsing.ts
index ca9f1249..6c410eb7 100644
--- a/apps/mail-bridge/utils/contactParsing.ts
+++ b/apps/mail-bridge/utils/contactParsing.ts
@@ -17,11 +17,12 @@ export async function parseAddressIds(input: {
   const parsedAddressIds: MessageParseAddressPlatformObject[] = [];
   for (const addressObject of input.addresses) {
     if (!addressObject.address) {
-      continue;
+      return [];
+    }
+    const [emailUsername, emailDomain] = addressObject.address.split('@');
+    if (!emailDomain || !emailUsername) {
+      return [];
     }
-    const [emailUsername = '', emailDomain = ''] =
-      addressObject.address.split('@');
-
     // check if email is existing contact
     const contactQuery = await db.query.contacts.findFirst({
       where: and(
@@ -31,6 +32,9 @@ export async function parseAddressIds(input: {
       ),
       columns: {
         id: true,
+        publicId: true,
+        emailUsername: true,
+        emailDomain: true,
         name: true,
         type: true
       }
@@ -39,6 +43,8 @@ export async function parseAddressIds(input: {
       parsedAddressIds.push({
         id: contactQuery.id,
         type: 'contact',
+        publicId: contactQuery.publicId,
+        email: contactQuery.emailUsername + '@' + contactQuery.emailDomain,
         contactType: contactQuery.type,
         ref: input.addressType
       });
@@ -61,7 +67,10 @@ export async function parseAddressIds(input: {
         eq(emailIdentities.username, emailUsername)
       ),
       columns: {
-        id: true
+        id: true,
+        publicId: true,
+        username: true,
+        domainName: true
       }
     });
 
@@ -69,6 +78,9 @@ export async function parseAddressIds(input: {
       parsedAddressIds.push({
         id: emailIdentityQuery.id,
         type: 'emailIdentity',
+        publicId: emailIdentityQuery.publicId,
+        email:
+          emailIdentityQuery.username + '@' + emailIdentityQuery.domainName,
         contactType: null,
         ref: input.addressType
       });
@@ -85,7 +97,10 @@ export async function parseAddressIds(input: {
               eq(emailIdentities.isCatchAll, true)
             ),
             columns: {
-              id: true
+              id: true,
+              publicId: true,
+              username: true,
+              domainName: true
             }
           });
 
@@ -93,6 +108,11 @@ export async function parseAddressIds(input: {
       parsedAddressIds.push({
         id: emailIdentityCatchAllQuery.id,
         type: 'emailIdentity',
+        publicId: emailIdentityCatchAllQuery.publicId,
+        email:
+          emailIdentityCatchAllQuery.username +
+          '@' +
+          emailIdentityCatchAllQuery.domainName,
         contactType: null,
         ref: input.addressType
       });
@@ -108,6 +128,7 @@ export async function parseAddressIds(input: {
           id: true
         }
       });
+
     let contactGlobalReputationId: number | null = null;
     if (contactGlobalReputation) {
       contactGlobalReputationId = contactGlobalReputation.id;
@@ -127,16 +148,19 @@ export async function parseAddressIds(input: {
     const contactInsert = await db.insert(contacts).values({
       publicId: typeIdGenerator('contacts'),
       orgId: input.orgId,
-      reputationId: contactGlobalReputationId || 0,
+      reputationId: +contactGlobalReputationId!,
       type: 'unknown',
       emailUsername: emailUsername,
       emailDomain: emailDomain,
       name: addressObject.name || emailUsername + '@' + emailDomain,
       screenerStatus: 'pending'
     });
+
     parsedAddressIds.push({
       id: Number(contactInsert.insertId),
       type: 'contact',
+      publicId: contactInsert.insertId,
+      email: emailUsername + '@' + emailDomain,
       contactType: 'unknown',
       ref: input.addressType
     });
diff --git a/apps/platform/trpc/routers/convoRouter/convoRouter.ts b/apps/platform/trpc/routers/convoRouter/convoRouter.ts
index 3e1c181d..34ec9ec9 100644
--- a/apps/platform/trpc/routers/convoRouter/convoRouter.ts
+++ b/apps/platform/trpc/routers/convoRouter/convoRouter.ts
@@ -24,7 +24,8 @@ import {
   userGroupMembers,
   type ConvoEntryMetadataEmailAddress,
   convoAttachments,
-  pendingAttachments
+  pendingAttachments,
+  type ConvoEntryMetadata
 } from '@u22n/database/schema';
 import {
   typeIdValidator,
@@ -126,6 +127,7 @@ export const convoRouter = router({
             where: eq(contacts.publicId, convoMessageTo.publicId),
             columns: {
               id: true,
+              publicId: true,
               emailUsername: true,
               emailDomain: true
             }
@@ -136,7 +138,12 @@ export const convoRouter = router({
               message: 'TO address contact not found'
             });
           }
-          convoMetadataToAddress = { id: +contactResponse.id, type: 'contact' };
+          convoMetadataToAddress = {
+            id: Number(contactResponse.id),
+            type: 'contact',
+            publicId: contactResponse.publicId,
+            email: `${contactResponse.emailUsername}@${contactResponse.emailDomain}`
+          };
           return `${contactResponse.emailUsername}@${contactResponse.emailDomain}`;
         } else if (convoMessageToType === 'group') {
           if (!validateTypeId('userGroups', convoMessageTo.publicId)) {
@@ -175,6 +182,8 @@ export const convoRouter = router({
               with: {
                 identity: {
                   columns: {
+                    id: true,
+                    publicId: true,
                     username: true,
                     domainName: true
                   }
@@ -188,8 +197,10 @@ export const convoRouter = router({
             });
           }
           convoMetadataToAddress = {
-            id: +emailIdentitiesResponse.id,
-            type: 'emailIdentity'
+            id: Number(emailIdentitiesResponse.identity.id),
+            type: 'emailIdentity',
+            publicId: emailIdentitiesResponse.identity.publicId,
+            email: `${emailIdentitiesResponse.identity.username}@${emailIdentitiesResponse.identity.domainName}`
           };
           return `${emailIdentitiesResponse.identity.username}@${emailIdentitiesResponse.identity.domainName}`;
         } else if (convoMessageToType === 'user') {
@@ -235,6 +246,8 @@ export const convoRouter = router({
               with: {
                 identity: {
                   columns: {
+                    id: true,
+                    publicId: true,
                     username: true,
                     domainName: true
                   }
@@ -248,8 +261,10 @@ export const convoRouter = router({
             });
           }
           convoMetadataToAddress = {
-            id: +emailIdentitiesResponse.id,
-            type: 'emailIdentity'
+            id: Number(emailIdentitiesResponse.identity.id),
+            type: 'emailIdentity',
+            publicId: emailIdentitiesResponse.identity.publicId,
+            email: `${emailIdentitiesResponse.identity.username}@${emailIdentitiesResponse.identity.domainName}`
           };
           return `${emailIdentitiesResponse.identity.username}@${emailIdentitiesResponse.identity.domainName}`;
         } else {
@@ -346,7 +361,10 @@ export const convoRouter = router({
             ),
             columns: {
               id: true,
-              reputationId: true
+              reputationId: true,
+              publicId: true,
+              emailUsername: true,
+              emailDomain: true
             }
           });
 
@@ -354,12 +372,16 @@ export const convoRouter = router({
             if (newConvoToEmailAddress === email && !convoMetadataToAddress) {
               convoMetadataToAddress = {
                 id: +existingContact.id,
-                type: 'contact'
+                type: 'contact',
+                publicId: existingContact.publicId,
+                email: `${existingContact.emailUsername}@${existingContact.emailDomain}`
               };
             } else {
               convoMetadataCcAddresses.push({
-                id: +existingContact.id,
-                type: 'contact'
+                id: Number(existingContact.id),
+                type: 'contact',
+                publicId: existingContact.publicId,
+                email: `${existingContact.emailUsername}@${existingContact.emailDomain}`
               });
             }
             orgContactIds.push(existingContact.id);
@@ -389,12 +411,16 @@ export const convoRouter = router({
               if (newConvoToEmailAddress === email && !convoMetadataToAddress) {
                 convoMetadataToAddress = {
                   id: +newContactInsertResponse.insertId,
-                  type: 'contact'
+                  type: 'contact',
+                  publicId: newContactPublicId,
+                  email: `${emailUsername}@${emailDomain}`
                 };
               } else {
                 convoMetadataCcAddresses.push({
                   id: +newContactInsertResponse.insertId,
-                  type: 'contact'
+                  type: 'contact',
+                  publicId: newContactPublicId,
+                  email: `${emailUsername}@${emailDomain}`
                 });
               }
               orgContactIds.push(+newContactInsertResponse.insertId);
@@ -422,12 +448,16 @@ export const convoRouter = router({
               if (newConvoToEmailAddress === email && !convoMetadataToAddress) {
                 convoMetadataToAddress = {
                   id: +newContactInsertResponse.insertId,
-                  type: 'contact'
+                  type: 'contact',
+                  publicId: newContactPublicId,
+                  email: `${emailUsername}@${emailDomain}`
                 };
               } else {
                 convoMetadataCcAddresses.push({
                   id: +newContactInsertResponse.insertId,
-                  type: 'contact'
+                  type: 'contact',
+                  publicId: newContactPublicId,
+                  email: `${emailUsername}@${emailDomain}`
                 });
               }
               orgContactIds.push(+newContactInsertResponse.insertId);
@@ -632,6 +662,8 @@ export const convoRouter = router({
                   with: {
                     identity: {
                       columns: {
+                        id: true,
+                        publicId: true,
                         username: true,
                         domainName: true
                       }
@@ -664,8 +696,10 @@ export const convoRouter = router({
               }
               if (emailIdentityResponse) {
                 convoMetadataCcAddresses.push({
-                  id: +emailIdentityResponse.id,
-                  type: 'emailIdentity'
+                  id: +emailIdentityResponse.identity.id,
+                  type: 'emailIdentity',
+                  publicId: emailIdentityResponse.identity.publicId,
+                  email: `${emailIdentityResponse.identity.username}@${emailIdentityResponse.identity.domainName}`
                 });
                 ccEmailAddresses.push(
                   `${emailIdentityResponse.identity.username}@${emailIdentityResponse.identity.domainName}`
@@ -691,6 +725,8 @@ export const convoRouter = router({
                   with: {
                     identity: {
                       columns: {
+                        id: true,
+                        publicId: true,
                         username: true,
                         domainName: true
                       }
@@ -718,7 +754,9 @@ export const convoRouter = router({
               if (emailIdentityResponse) {
                 convoMetadataCcAddresses.push({
                   id: +emailIdentityResponse.id,
-                  type: 'emailIdentity'
+                  type: 'emailIdentity',
+                  publicId: emailIdentityResponse.identity.publicId,
+                  email: `${emailIdentityResponse.identity.username}@${emailIdentityResponse.identity.domainName}`
                 });
                 ccEmailAddresses.push(
                   `${emailIdentityResponse.identity.username}@${emailIdentityResponse.identity.domainName}`
@@ -764,12 +802,13 @@ export const convoRouter = router({
         mailBridgeSendMailResponse.metadata.email.to = [
           convoMetadataToAddress!
         ];
-        mailBridgeSendMailResponse.metadata.email.cc = convoMetadataCcAddresses;
+        mailBridgeSendMailResponse.metadata.email.cc =
+          convoMetadataCcAddresses!;
 
         await db
           .update(convoEntries)
           .set({
-            metadata: mailBridgeSendMailResponse.metadata
+            metadata: mailBridgeSendMailResponse.metadata as ConvoEntryMetadata
           })
           .where(eq(convoEntries.id, +insertConvoEntryResponse.insertId));
 
@@ -941,7 +980,8 @@ export const convoRouter = router({
                   emailDomain: true,
                   setName: true,
                   signaturePlainText: true,
-                  signatureHtml: true
+                  signatureHtml: true,
+                  type: true
                 }
               }
             }
diff --git a/apps/web-app/app.config.ts b/apps/web-app/app.config.ts
index 35f98d78..7c28da42 100644
--- a/apps/web-app/app.config.ts
+++ b/apps/web-app/app.config.ts
@@ -1,11 +1,12 @@
 import { defineAppConfig } from '#imports';
 export default defineAppConfig({
   ui: {
-    primary: 'bronze',
-    gray: 'zinc',
-    accent: 'bronze',
+    primary: 'sand',
+    gray: 'sand',
+    accent: 'sand',
     base: 'sand',
-    safelistColors: ['bronze'],
+    colors: ['sand', 'base', 'bronze', 'green', 'red', 'amber', 'blue'],
+    safelistColors: ['sand'],
     notification: {
       rounded: 'rounded-lg rounded-br-2xl'
     },
@@ -45,7 +46,7 @@ export default defineAppConfig({
       default: {
         size: 'sm',
         variant: 'solid',
-        color: 'bronze',
+        color: 'sand',
         loadingIcon: 'i-heroicons-arrow-path-20-solid'
       }
     },
@@ -85,7 +86,7 @@ export default defineAppConfig({
       default: {
         size: 'sm',
         variant: 'solid',
-        color: 'bronze'
+        color: 'sand'
       }
     },
 
@@ -392,13 +393,13 @@ export default defineAppConfig({
     //tooltip
     tooltip: {
       wrapper: 'relative inline-flex',
-      container: 'z-500 group',
+      container: 'z-50 group',
       width: 'max-w-xs',
       background: 'bg-base-3 dark:bg-base-3',
       color: 'text-base-12 dark:text-base-12',
       shadow: 'shadow',
       rounded: 'rounded',
-      ring: 'ring-1 ring-base-7 dark:ring-base-7',
+      ring: 'ring-0 ring-base-7 dark:ring-base-7',
       base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
       shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
       middot: 'mx-1 text-base-11 dark:text-base-11',
@@ -419,17 +420,111 @@ export default defineAppConfig({
       },
       arrow: {
         base: '[@media(pointer:coarse)]:hidden invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
-        ring: 'before:ring-1 before:ring-base-7 dark:before:ring-base-7',
+        ring: 'before:ring-0 before:ring-base-7 dark:before:ring-base-7',
         rounded: 'before:rounded-sm',
         background: 'before:bg-base-3 dark:before:bg-base-3',
         shadow: 'before:shadow',
         placement:
           "group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1"
       }
+    },
+
+    // avatar
+    avatar: {
+      wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
+      background: 'bg-base-7 dark:bg-base-7',
+      rounded: 'rounded-full',
+      text: 'font-medium leading-none text-gray-900 dark:text-white truncate',
+      placeholder:
+        'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
+      size: {
+        '3xs': 'h-4 w-4 text-[8px]',
+        '2xs': 'h-5 w-5 text-[10px]',
+        xs: 'h-6 w-6 text-xs',
+        sm: 'h-8 w-8 text-sm',
+        md: 'h-10 w-10 text-base',
+        lg: 'h-12 w-12 text-lg',
+        xl: 'h-14 w-14 text-xl',
+        '2xl': 'h-16 w-16 text-2xl',
+        '3xl': 'h-20 w-20 text-3xl'
+      },
+      chip: {
+        base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
+        background: 'bg-{color}-500 dark:bg-{color}-400',
+        position: {
+          'top-right': 'top-0 right-0',
+          'bottom-right': 'bottom-0 right-0',
+          'top-left': 'top-0 left-0',
+          'bottom-left': 'bottom-0 left-0'
+        },
+        size: {
+          '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+          '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+          xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+          sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+          md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+          lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+          xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+          '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+          '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
+        }
+      },
+      icon: {
+        base: 'text-gray-500 dark:text-gray-400 flex-shrink-0',
+        size: {
+          '3xs': 'h-2 w-2',
+          '2xs': 'h-2.5 w-2.5',
+          xs: 'h-3 w-3',
+          sm: 'h-4 w-4',
+          md: 'h-5 w-5',
+          lg: 'h-6 w-6',
+          xl: 'h-7 w-7',
+          '2xl': 'h-8 w-8',
+          '3xl': 'h-10 w-10'
+        }
+      },
+      default: {
+        size: 'sm',
+        icon: null,
+        chipColor: null,
+        chipPosition: 'top-right'
+      }
+    },
+    //avatar group
+    avatarGroup: {
+      wrapper: 'inline-flex flex-row-reverse justify-end',
+      ring: 'ring-0 ring-base-5 dark:ring-base-5',
+      margin: '-me-1.5 first:me-0'
     }
   }
 });
 
+const sand = [
+  'bg-sand-1',
+  'bg-sand-2',
+  'bg-sand-3',
+  'hover:bg-sand-3',
+  'bg-sand-4',
+  'hover:bg-sand-4',
+  'active:bg-sand-4',
+  'bg-sand-5',
+  'hover:bg-sand-5',
+  'active:bg-sand-5',
+  'bg-sand-9',
+  'bg-sand-10',
+  'hover:bg-sand-10',
+  'bg-sand-11',
+  'bg-sand-12',
+  'text-sand-5',
+  'text-sand-9',
+  'text-sand-10',
+  'text-sand-11',
+  'hover:text-sand-12',
+  'ring-sand-5',
+  'ring-sand-8',
+  'ring-sand-9',
+  'active:ring-sand-9'
+];
 const bronze = [
   'bg-bronze-1',
   'bg-bronze-2',
diff --git a/apps/web-app/app.vue b/apps/web-app/app.vue
index 55dc2b61..49ad7fb9 100644
--- a/apps/web-app/app.vue
+++ b/apps/web-app/app.vue
@@ -5,7 +5,8 @@
 </script>
 
 <template>
-  <div class="bg-base-1 dark:bg-base-1 h-screen max-h-screen">
+  <div
+    class="bg-base-1 dark:bg-base-1 selection:bg-base-11 selection:text-base-1 h-screen max-h-screen">
     <NuxtLayout class="h-screen max-h-screen">
       <NuxtPage />
     </NuxtLayout>
diff --git a/apps/web-app/assets/css/main.css b/apps/web-app/assets/css/main.css
index 27740757..822f1e13 100644
--- a/apps/web-app/assets/css/main.css
+++ b/apps/web-app/assets/css/main.css
@@ -30,6 +30,3 @@
   src: url('/fonts/Inter-italic.var.woff2?v=3.19') format('woff2');
   font-named-instance: 'Italic';
 }
-[data-radix-popper-content-wrapper] {
-  z-index: 10000;
-}
diff --git a/apps/web-app/components/convos/convoAvatar.vue b/apps/web-app/components/convos/convoAvatar.vue
index bbb7620d..390b0ce8 100644
--- a/apps/web-app/components/convos/convoAvatar.vue
+++ b/apps/web-app/components/convos/convoAvatar.vue
@@ -3,6 +3,7 @@
   type Props = {
     participant: ConvoParticipantEntry;
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    ring?: boolean;
   };
 
   const props = defineProps<Props>();
@@ -16,5 +17,6 @@
     :type="props.participant.type"
     :color="props.participant.color"
     :show-icon="true"
+    :ring="props.ring"
     :size="props.size ? props.size : 'sm'" />
 </template>
diff --git a/apps/web-app/components/convos/convoMessageItem.vue b/apps/web-app/components/convos/convoMessageItem.vue
index 33d96601..70a26b7b 100644
--- a/apps/web-app/components/convos/convoMessageItem.vue
+++ b/apps/web-app/components/convos/convoMessageItem.vue
@@ -13,9 +13,12 @@
   type ConvoEntryItem = NonNullable<ConvoEntryDataType>[number];
   type Props = {
     entry: ConvoEntryItem;
+    isReplyTo: boolean;
   };
 
   const props = defineProps<Props>();
+  const emits = defineEmits(['set-as-reply-to']);
+
   const participantPublicId = inject('participantPublicId');
   const convoParticipants = inject('convoParticipants');
 
@@ -45,7 +48,7 @@
   const typeClasses = computed(() => {
     switch (tempColor) {
       case 'message':
-        return 'bg-white dark:bg-black';
+        return 'bg-base-2 dark:bg-base-2';
       default:
         return 'bg-gray-100 dark:bg-gray-900';
     }
@@ -57,12 +60,16 @@
   const convoBubbleClasses = computed(() => {
     return `${typeClasses.value}`;
   });
+
+  function setAsReplyTo() {
+    emits('set-as-reply-to');
+  }
 </script>
 <template>
   <div
     class="flex w-full flex-col gap-2"
     :class="containerClasses">
-    <div class="flex w-full flex-row items-start gap-2">
+    <div class="flex w-full flex-row items-start justify-start gap-2">
       <div
         v-if="author"
         class="flex flex-row items-center gap-1">
@@ -73,23 +80,58 @@
           :type="author.type"
           :color="author.color"
           size="lg"
-          class="rounded-full" />
+          class="rounded-full shadow-md" />
       </div>
       <div class="flex w-full flex-col gap-2 p-0">
-        <div class="flex w-full flex-row items-end gap-2 pl-2">
-          <span
-            v-if="author"
-            class="text-sm leading-none">
-            {{ author.name }}
-          </span>
-          <UnUiTooltip :text="props.entry.createdAt.toLocaleString()">
-            <span class="text-xs leading-none text-gray-500">
-              {{ timeAgo }}
+        <div
+          class="flex max-h-4 w-full flex-row items-center justify-between gap-2 overflow-visible pl-2">
+          <div class="flex w-full flex-row items-end gap-2">
+            <span
+              v-if="author"
+              class="text-sm leading-none">
+              {{ author.name }}
             </span>
-          </UnUiTooltip>
+            <UnUiTooltip :text="props.entry.createdAt.toLocaleString()">
+              <span class="text-xs leading-none text-gray-500">
+                {{ timeAgo }}
+              </span>
+            </UnUiTooltip>
+          </div>
+          <div class="flex flex-row gap-0">
+            <UnUiTooltip text="Report a bug">
+              <UnUiButton
+                size="xs"
+                square
+                variant="soft"
+                icon="i-ph-bug" />
+            </UnUiTooltip>
+            <UnUiTooltip text="View original message">
+              <UnUiButton
+                size="xs"
+                square
+                variant="soft"
+                icon="i-ph-code" />
+            </UnUiTooltip>
+            <UnUiCopy
+              icon="i-ph-hash"
+              size="xs"
+              variant="soft"
+              color="base"
+              helper="Copy message ID"
+              :text="props.entry.publicId" />
+            <UnUiTooltip text="Reply">
+              <UnUiButton
+                size="xs"
+                square
+                variant="soft"
+                icon="i-ph-arrow-bend-double-up-left"
+                :color="props.isReplyTo ? 'green' : 'base'"
+                @click="setAsReplyTo()" />
+            </UnUiTooltip>
+          </div>
         </div>
         <div
-          class="w-full overflow-hidden rounded-bl-xl rounded-br-xl bg-gray-100 p-2 dark:bg-gray-900"
+          class="rounded-br-x w-full overflow-hidden rounded-bl-xl p-2 shadow-md"
           :class="convoBubbleClasses"
           v-html="convoEntryBody"></div>
       </div>
diff --git a/apps/web-app/components/convos/convoMessages.vue b/apps/web-app/components/convos/convoMessages.vue
index e2f2485e..05d42552 100644
--- a/apps/web-app/components/convos/convoMessages.vue
+++ b/apps/web-app/components/convos/convoMessages.vue
@@ -15,6 +15,11 @@
 
   const props = defineProps<Props>();
 
+  const replyToMessagePublicId = defineModel('replyToMessagePublicId', {
+    type: String,
+    default: ''
+  });
+
   const {
     data: convoEntries,
     refresh: convoEntriesRefresh,
@@ -27,8 +32,10 @@
   );
 
   watch(convoEntries, () => {
-    if (convoEntries.value?.entries) {
+    if (convoEntries.value && convoEntries.value.entries) {
       entriesArray.value.push(...convoEntries.value.entries);
+      replyToMessagePublicId.value =
+        convoEntries.value.entries[0]?.publicId ?? '';
     }
   });
 
@@ -39,13 +46,17 @@
     },
     { distance: 300 }
   );
+
+  function setReplyToMessagePublicId(publicId: string) {
+    replyToMessagePublicId.value = publicId;
+  }
 </script>
 <template>
-  <UnUiButton
+  <!-- <UnUiButton
     label="Refresh"
     icon="i-ph-arrow-clockwise"
     :loading="convoEntriesStatus === 'pending'"
-    @click="convoEntriesRefresh()" />
+    @click="convoEntriesRefresh()" /> -->
   <div
     class="flex h-full max-h-full w-full max-w-full flex-col-reverse overflow-y-auto">
     <div
@@ -54,7 +65,10 @@
         v-for="entry of entriesArray"
         :key="entry.publicId"
         class="w-full max-w-full">
-        <convos-convo-message-item :entry="entry" />
+        <convos-convo-message-item
+          :entry="entry"
+          :is-reply-to="entry.publicId === replyToMessagePublicId"
+          @set-as-reply-to="setReplyToMessagePublicId(entry.publicId)" />
       </div>
     </div>
   </div>
diff --git a/apps/web-app/components/layout/navbar.vue b/apps/web-app/components/layout/navbar.vue
index 61a08189..6b596d7c 100644
--- a/apps/web-app/components/layout/navbar.vue
+++ b/apps/web-app/components/layout/navbar.vue
@@ -252,7 +252,7 @@
 </script>
 <template>
   <div
-    class="bg-base-2 border-base-7 flex h-full max-h-full flex-col justify-between rounded-r-xl border-r-2 p-8 shadow-xl transition-all duration-300">
+    class="bg-base-1 border-base-7 flex h-full max-h-full flex-col justify-between rounded-r-xl border-r-2 p-8 shadow-xl transition-all duration-300">
     <UnUiModal v-model="showLogoutModal">
       <template #header>
         <span class="">Logout</span>
diff --git a/apps/web-app/components/settings/sidebar.vue b/apps/web-app/components/settings/sidebar.vue
index d29d9bfb..3caf06f9 100644
--- a/apps/web-app/components/settings/sidebar.vue
+++ b/apps/web-app/components/settings/sidebar.vue
@@ -68,7 +68,7 @@
 </script>
 <template>
   <div
-    class="bg-base-1 border-base-6 flex h-full max-h-full flex-col gap-2 overflow-y-auto rounded-r-xl border-r-2 p-8 pl-12 shadow-md">
+    class="bg-base-2 border-base-6 flex h-full max-h-full flex-col gap-2 overflow-y-auto rounded-r-xl border-r-2 p-8 pl-12 shadow-md">
     <div
       class="flex h-full max-h-full grow flex-col gap-4 overflow-hidden overflow-y-auto">
       <div class="flex w-full flex-col gap-2">
@@ -106,8 +106,6 @@
           </div>
         </div>
       </div>
-
-      <div class="from-base-1 mt-[-48px] h-[48px] bg-gradient-to-t" />
     </div>
   </div>
 </template>
diff --git a/apps/web-app/components/un/ui-avatar-plus.vue b/apps/web-app/components/un/ui-avatar-plus.vue
index 8b472a5c..94f529f0 100644
--- a/apps/web-app/components/un/ui-avatar-plus.vue
+++ b/apps/web-app/components/un/ui-avatar-plus.vue
@@ -26,7 +26,7 @@
   });
 </script>
 <template>
-  <div class="flex h-fit flex-row items-end">
+  <div class="z-20 flex h-fit flex-row items-end">
     <UnUiAvatar
       v-if="primaryAvatar"
       :avatar-id="primaryAvatar.avatarPublicId"
@@ -46,7 +46,7 @@
       </div>
 
       <template #panel>
-        <div class="flex flex-row gap-2 p-4">
+        <div class="z-50 flex flex-row gap-2 p-4">
           <div
             v-for="avatar in avatarArray"
             :key="avatar.participantPublicId">
diff --git a/apps/web-app/components/un/ui-avatar.vue b/apps/web-app/components/un/ui-avatar.vue
index 2b87edf6..c4b987c5 100644
--- a/apps/web-app/components/un/ui-avatar.vue
+++ b/apps/web-app/components/un/ui-avatar.vue
@@ -20,6 +20,7 @@
     showIcon?: boolean;
     tooltipIcon?: string;
     size?: AvatarSize;
+    ring?: boolean;
   };
 
   const props = defineProps<Props>();
@@ -31,44 +32,49 @@
   const colorClass = computed(() => {
     switch (props.color) {
       case 'red':
-        return 'bg-red-400 dark:bg-red-400';
+        return 'bg-red-9 dark:bg-red-9';
       case 'orange':
-        return 'bg-orange-400 dark:bg-orange-400';
+        return 'bg-orange-9 dark:bg-orange-9';
       case 'amber':
-        return 'bg-amber-400 dark:bg-amber-400';
+        return 'bg-amber-9 dark:bg-amber-9';
       case 'yellow':
-        return 'bg-yellow-400 dark:bg-yellow-400';
+        return 'bg-yellow-9 dark:bg-yellow-9';
       case 'lime':
-        return 'bg-lime-400 dark:bg-lime-400';
+        return 'bg-lime-9 dark:bg-lime-9';
       case 'green':
-        return 'bg-green-400 dark:bg-green-400';
+        return 'bg-green-9 dark:bg-green-9';
       case 'emerald':
-        return 'bg-emerald-400 dark:bg-emerald-400';
+        return 'bg-emerald-9 dark:bg-emerald-9';
       case 'teal':
-        return 'bg-teal-400 dark:bg-teal-400';
+        return 'bg-teal-9 dark:bg-teal-9';
       case 'cyan':
-        return 'bg-cyan-400 dark:bg-cyan-400';
+        return 'bg-cyan-9 dark:bg-cyan-9';
       case 'sky':
-        return 'bg-sky-400 dark:bg-sky-400';
+        return 'bg-sky-9 dark:bg-sky-9';
       case 'blue':
-        return 'bg-blue-400 dark:bg-blue-400';
+        return 'bg-blue-9 dark:bg-blue-9';
       case 'indigo':
-        return 'bg-indigo-400 dark:bg-indigo-400';
+        return 'bg-indigo-9 dark:bg-indigo-9';
       case 'violet':
-        return 'bg-violet-400 dark:bg-violet-400';
+        return 'bg-violet-9 dark:bg-violet-9';
       case 'purple':
-        return 'bg-purple-400 dark:bg-purple-400';
+        return 'bg-purple-9 dark:bg-purple-9';
       case 'fuchsia':
-        return 'bg-fuchsia-400 dark:bg-fuchsia-400';
+        return 'bg-fuchsia-9 dark:bg-fuchsia-9';
       case 'pink':
-        return 'bg-pink-400 dark:bg-pink-400';
+        return 'bg-pink-9 dark:bg-pink-9';
       case 'rose':
-        return 'bg-rose-400 dark:bg-rose-400';
+        return 'bg-rose-9 dark:bg-rose-9';
       default:
-        return 'bg-gray-400 dark:bg-gray-400';
+        return 'bg-base-9 dark:bg-base-9';
     }
   });
 
+  const classes = computed(() => {
+    const ringClasses = props.ring ? 'ring-base-3 dark:ring-base-3 ring-2' : '';
+    return `${ringClasses} ${colorClass.value}`;
+  });
+
   const altText = computed(() => {
     return props.name || props.alt || '';
   });
@@ -120,6 +126,6 @@
         text: 'font-display text-white dark:text-white',
         placeholder: 'font-display text-white dark:text-white'
       }"
-      :class="colorClass" />
+      :class="classes" />
   </UnUiTooltip>
 </template>
diff --git a/apps/web-app/components/un/ui-button.vue b/apps/web-app/components/un/ui-button.vue
index 4e66f966..2ddcd6da 100644
--- a/apps/web-app/components/un/ui-button.vue
+++ b/apps/web-app/components/un/ui-button.vue
@@ -4,8 +4,9 @@
 
   export default defineComponent<
     typeof NuxtUiButton extends DefineComponent<infer Props, any, any>
-      ? Props & { otherProp?: string }
-      : never
+      ? Props
+      : //  & { otherProp?: string }
+        never
   >({
     props: {
       ...NuxtUiButton.props
diff --git a/apps/web-app/components/un/ui-copy.vue b/apps/web-app/components/un/ui-copy.vue
index d416d4c4..a667f573 100644
--- a/apps/web-app/components/un/ui-copy.vue
+++ b/apps/web-app/components/un/ui-copy.vue
@@ -2,9 +2,23 @@
   import { ref } from 'vue';
   import { useClipboard } from '@vueuse/core';
   const { copy } = useClipboard();
-  const props = defineProps({
-    text: { type: String, required: true }
+
+  type Props = {
+    text: string;
+    helper?: string;
+    icon?: string;
+    color?: string;
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    size?: string;
+  };
+  const props = withDefaults(defineProps<Props>(), {
+    helper: 'Copy to clipboard',
+    icon: 'i-ph-clipboard',
+    color: 'accent',
+    variant: 'soft',
+    size: 'md'
   });
+
   const copiedString = ref('');
 
   async function copyString(value: string) {
@@ -16,13 +30,13 @@
   }
 </script>
 <template>
-  <UnUiTooltip
-    :text="copiedString === props.text ? 'Copied' : 'Copy to clipboard'">
+  <UnUiTooltip :text="copiedString === props.text ? 'Copied' : props.helper">
     <UnUiButton
       square
-      :icon="copiedString === props.text ? 'i-ph-check' : 'i-ph-clipboard'"
-      variant="soft"
-      :color="copiedString === props.text ? 'green' : 'gray'"
+      :icon="copiedString === props.text ? 'i-ph-check' : props.icon"
+      :variant="props.variant"
+      :size="props.size"
+      :color="copiedString === props.text ? 'green' : props.color"
       @click="copyString(props.text)" />
   </UnUiTooltip>
 </template>
diff --git a/apps/web-app/composables/types.ts b/apps/web-app/composables/types.ts
index 77f61192..920eac2a 100644
--- a/apps/web-app/composables/types.ts
+++ b/apps/web-app/composables/types.ts
@@ -2,10 +2,13 @@ import { useNuxtApp } from '#imports';
 import { uiColors } from '@u22n/types/ui';
 
 const { $trpc } = useNuxtApp();
-type PromiseType<T> = T extends Promise<infer U> ? U : never;
-export type UserConvosDataType = PromiseType<
+
+export type UserConvosDataType = Awaited<
   ReturnType<typeof $trpc.convos.getUserConvos.query>
 >['data'];
+export type UserConvoDataType = Awaited<
+  ReturnType<typeof $trpc.convos.getConvo.useLazyQuery>
+>['data'];
 
 export type ConvoAttachmentUpload = {
   fileName: string;
@@ -22,4 +25,6 @@ export type ConvoParticipantEntry = {
   type: 'user' | 'group' | 'contact';
   role: 'assigned' | 'contributor' | 'commenter' | 'watcher' | 'guest';
   color: (typeof uiColors)[number] | null;
+  signaturePlainText?: string | null;
+  signatureHtml?: string | null;
 };
diff --git a/apps/web-app/composables/utils.ts b/apps/web-app/composables/utils.ts
index 062d772c..c0f261ae 100644
--- a/apps/web-app/composables/utils.ts
+++ b/apps/web-app/composables/utils.ts
@@ -52,7 +52,9 @@ function useParticipantData(
     participantTypePublicId,
     avatarPublicId,
     participantName,
-    participantColor;
+    participantColor,
+    participantSignaturePlainText,
+    participantSignatureHtml;
 
   switch (true) {
     case !!contact?.publicId:
@@ -62,6 +64,8 @@ function useParticipantData(
       participantName =
         contact.name || `${contact.emailUsername}@${contact.emailDomain}`;
       participantColor = null;
+      participantSignaturePlainText = contact.signaturePlainText;
+      participantSignatureHtml = contact.signatureHtml;
       break;
     case !!userGroup?.name:
       participantType = 'group';
@@ -92,7 +96,9 @@ function useParticipantData(
     avatarPublicId,
     participantName,
     participantColor,
-    participantRole
+    participantRole,
+    participantSignaturePlainText,
+    participantSignatureHtml
   };
 }
 
diff --git a/apps/web-app/layouts/home.vue b/apps/web-app/layouts/home.vue
index ae047936..c655f9ad 100644
--- a/apps/web-app/layouts/home.vue
+++ b/apps/web-app/layouts/home.vue
@@ -2,7 +2,7 @@
 <template>
   <div
     class="overflow-none flex h-full max-h-full w-full flex-row items-center">
-    <layout-navbar class="z-50" />
+    <layout-navbar class="z-40" />
     <div
       class="bg-base-1 dark:bg-base-1 -ml-4 h-full max-h-full w-full overflow-hidden">
       <slot />
diff --git a/apps/web-app/pages/[orgSlug]/convo/[id].vue b/apps/web-app/pages/[orgSlug]/convo/[id].vue
index e1190abf..7879ea68 100644
--- a/apps/web-app/pages/[orgSlug]/convo/[id].vue
+++ b/apps/web-app/pages/[orgSlug]/convo/[id].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import {
+    computed,
     navigateTo,
     provide,
     ref,
@@ -29,11 +30,21 @@
   const participantCommentersArray = ref<ConvoParticipantEntry[]>([]);
   const participantWatchersArray = ref<ConvoParticipantEntry[]>([]);
   const participantGuestsArray = ref<ConvoParticipantEntry[]>([]);
+  const participantsAll = computed(() => {
+    return [
+      ...participantsAssignedArray.value,
+      ...participantContributorsArray.value,
+      ...participantCommentersArray.value,
+      ...participantWatchersArray.value,
+      ...participantGuestsArray.value
+    ];
+  });
   const attachments = ref<AttachmentEntry[]>([]);
   const createDate = ref<Date | null>(null);
   const updateDate = ref<Date | null>(null);
   const createdAgo = ref('');
   const updatedAgo = ref('');
+  const replyToMessagePublicId = ref('');
 
   const orgSlug = useRoute().params.orgSlug as string;
   const convoPublicId = useRoute().params.id as string;
@@ -77,8 +88,10 @@
         avatarPublicId,
         participantName,
         participantType,
-        participantColor
-        // @ts-expect-error - fixed in separate PR
+        participantColor,
+        participantRole,
+        participantSignaturePlainText,
+        participantSignatureHtml
       } = useUtils().convos.useParticipantData(participant);
       const participantData: ConvoParticipantEntry = {
         participantPublicId: participantPublicId,
@@ -87,7 +100,9 @@
         name: participantName,
         type: participantType,
         role: participant.role,
-        color: participantColor
+        color: participantColor,
+        signaturePlainText: participantSignaturePlainText,
+        signatureHtml: participantSignatureHtml
       };
 
       participantArray.value.push(participantData);
@@ -127,6 +142,17 @@
   provide('convoParticipants', participantArray);
   provide('participantPublicId', participantPublicId);
 
+  const findParticipant = (participantPublicId: string) => {
+    return participantArray.value.find(
+      (participant) => participant.participantPublicId === participantPublicId
+    );
+  };
+
+  function setReplyToMessagePublicId(data: string) {
+    replyToMessagePublicId.value = data;
+  }
+
+  // // New Data
   const editorData = ref({});
 </script>
 <template>
@@ -173,15 +199,16 @@
       <div class="col-span-2 flex h-full max-h-full flex-col gap-2 pr-8">
         <div class="flex h-full max-h-full grow flex-col gap-0 overflow-hidden">
           <div
-            class="z-20000 from-base-1 mb-[-12px] h-[12px] bg-gradient-to-b" />
+            class="from-base-1 z-[20000] mb-[-12px] h-[12px] bg-gradient-to-b" />
           <ConvosConvoMessages
+            v-model:reply-to-message-public-id="replyToMessagePublicId"
             :convo-public-id="convoPublicId"
             :participant-public-id="convoDetails?.participantPublicId || ''" />
           <div
-            class="z-20000 from-base-1 mt-[-12px] h-[12px] bg-gradient-to-t" />
+            class="from-base-1 z-[20000] mt-[-12px] h-[12px] bg-gradient-to-t" />
         </div>
         <div class="flex w-full flex-col justify-items-end gap-2">
-          <!-- replyingToBanner -->
+          <span class="text-base-11 text-xs font-medium">REPLY</span>
           <UnEditor v-model:modelValue="editorData" />
           <div class="flex min-w-fit flex-row justify-end gap-2">
             <UnUiButton
@@ -221,39 +248,18 @@
               @click="convoParticipantsCollapsed = !convoParticipantsCollapsed">
               <NuxtUiAvatarGroup>
                 <template
-                  v-for="participant of participantsAssignedArray"
-                  :key="participant.participantPublicId">
-                  <ConvosConvoAvatar
-                    :participant="participant"
-                    size="sm" />
-                </template>
-                <template
-                  v-for="participant of participantContributorsArray"
+                  v-for="participant of participantsAll"
                   :key="participant.participantPublicId">
                   <ConvosConvoAvatar
                     :participant="participant"
-                    size="sm" />
-                </template>
-                <template
-                  v-for="participant of participantCommentersArray"
-                  :key="participant.participantPublicId">
-                  <ConvosConvoAvatar
-                    :participant="participant"
-                    size="sm" />
-                </template>
-                <template
-                  v-for="participant of participantGuestsArray"
-                  :key="participant.participantPublicId">
-                  <ConvosConvoAvatar
-                    :participant="participant"
-                    size="sm" />
+                    size="sm"
+                    :ring="true" />
                 </template>
               </NuxtUiAvatarGroup>
             </div>
             <div
               v-if="!convoParticipantsCollapsed"
-              class="flex h-fit w-full max-w-full flex-col gap-4 overflow-hidden"
-              @click="convoParticipantsCollapsed = !convoParticipantsCollapsed">
+              class="flex h-fit w-full max-w-full flex-col gap-4 overflow-hidden">
               <div
                 v-if="participantsAssignedArray.length"
                 class="flex w-full max-w-full flex-col gap-2 overflow-hidden">
@@ -285,7 +291,35 @@
                   <template
                     v-for="participant of participantContributorsArray"
                     :key="participant.participantPublicId">
-                    <div class="flex flex-row items-center gap-2">
+                    <NuxtUiPopover
+                      v-if="participant.signaturePlainText"
+                      mode="hover">
+                      <div class="flex flex-row items-center gap-2">
+                        <ConvosConvoAvatar
+                          :participant="participant"
+                          size="md" />
+                        <span class="truncate">{{ participant.name }}</span>
+                      </div>
+                      <template #panel>
+                        <div class="flex flex-col gap-2 p-4">
+                          <span class="text-base-11 text-sm"> SIGNATURE </span>
+                          <!-- <span class="text-base-11 text-xs"> PLAIN </span>
+                          <span class="whitespace-pre text-xs">
+                            {{
+                              participant.signaturePlainText.replace(
+                                /\\n/g,
+                                '\n'
+                              )
+                            }}
+                          </span> -->
+                          <!-- <span class="text-base-11 text-xs"> HTML </span> -->
+                          <div v-html="participant.signatureHtml" />
+                        </div>
+                      </template>
+                    </NuxtUiPopover>
+                    <div
+                      v-else
+                      class="flex flex-row items-center gap-2">
                       <ConvosConvoAvatar
                         :participant="participant"
                         size="md" />
diff --git a/apps/web-app/pages/[orgSlug]/convo/new.vue b/apps/web-app/pages/[orgSlug]/convo/new.vue
index f0ece806..8672b275 100644
--- a/apps/web-app/pages/[orgSlug]/convo/new.vue
+++ b/apps/web-app/pages/[orgSlug]/convo/new.vue
@@ -454,7 +454,7 @@
 </script>
 <template>
   <div class="flex h-full max-h-full w-full max-w-full flex-col gap-4">
-    <div class="z-20000 from-base-1 mb-[-24px] h-[24px] bg-gradient-to-b" />
+    <div class="from-base-1 z-[20000] mb-[-24px] h-[24px] bg-gradient-to-b" />
     <UnUiAlert
       v-if="
         orgEmailIdentities.length === 0 &&
diff --git a/apps/web-app/pages/join/2fa.vue b/apps/web-app/pages/join/2fa.vue
index f58d658a..3e833911 100644
--- a/apps/web-app/pages/join/2fa.vue
+++ b/apps/web-app/pages/join/2fa.vue
@@ -17,25 +17,25 @@
           text="Choose your username"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Secure your account"
           class="w-full">
           <div
-            class="bg-primary-600 h-2 w-full rounded"
+            class="bg-accent-5 h-2 w-full rounded"
             @click="navigateTo('/join/secure')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Set up your organization"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Create your profile"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
       </div>
       <div class="flex flex-col gap-2">
diff --git a/apps/web-app/pages/join/index.vue b/apps/web-app/pages/join/index.vue
index e5cc06b2..4d6c61b8 100644
--- a/apps/web-app/pages/join/index.vue
+++ b/apps/web-app/pages/join/index.vue
@@ -79,22 +79,22 @@
         <UnUiTooltip
           text="Choose your username"
           class="w-full">
-          <div class="bg-primary-600 h-2 w-full rounded" />
+          <div class="bg-accent-5 h-2 w-full rounded" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Secure your account"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Set up your organization"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Create your profile"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
       </div>
       <div class="flex flex-col gap-2">
diff --git a/apps/web-app/pages/join/org.vue b/apps/web-app/pages/join/org.vue
index 5fb8b876..cd05c5e6 100644
--- a/apps/web-app/pages/join/org.vue
+++ b/apps/web-app/pages/join/org.vue
@@ -193,28 +193,28 @@
           text="Choose your username"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Secure your account"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join/secure')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Set up your organization"
           class="w-full">
           <div
-            class="bg-primary-600 h-2 w-full rounded"
+            class="bg-accent-5 h-2 w-full rounded"
             @click="navigateTo('/join/org')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Create your profile"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join/profile')" />
         </UnUiTooltip>
       </div>
diff --git a/apps/web-app/pages/join/profile.vue b/apps/web-app/pages/join/profile.vue
index 3b9e4e38..03c260b4 100644
--- a/apps/web-app/pages/join/profile.vue
+++ b/apps/web-app/pages/join/profile.vue
@@ -181,25 +181,25 @@
           text="Choose your username"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Secure your account"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join/secure')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Set up your organization"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Create your profile"
           class="w-full">
-          <div class="bg-primary-600 h-2 w-full rounded" />
+          <div class="bg-accent-5 h-2 w-full rounded" />
         </UnUiTooltip>
       </div>
       <p
diff --git a/apps/web-app/pages/join/secure.vue b/apps/web-app/pages/join/secure.vue
index c9b23767..7db1776b 100644
--- a/apps/web-app/pages/join/secure.vue
+++ b/apps/web-app/pages/join/secure.vue
@@ -261,25 +261,25 @@
           text="Choose your username"
           class="w-full">
           <div
-            class="bg-primary-400 h-2 w-full rounded"
+            class="bg-accent-3 h-2 w-full rounded"
             @click="navigateTo('/join')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Secure your account"
           class="w-full">
           <div
-            class="bg-primary-600 h-2 w-full rounded"
+            class="bg-accent-5 h-2 w-full rounded"
             @click="navigateTo('/join/secure')" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Set up your organization"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
         <UnUiTooltip
           text="Create your profile"
           class="w-full">
-          <div class="bg-primary-400 h-2 w-full rounded" />
+          <div class="bg-accent-3 h-2 w-full rounded" />
         </UnUiTooltip>
       </div>
 
diff --git a/apps/web-app/tailwind.config.ts b/apps/web-app/tailwind.config.ts
index b6ff3784..aa476731 100644
--- a/apps/web-app/tailwind.config.ts
+++ b/apps/web-app/tailwind.config.ts
@@ -18,7 +18,8 @@ export default <Partial<Config>>{
       },
       colors: {
         accent: colors.alias('bronze'),
-        base: colors.alias('sand')
+        base: colors.alias('sand'),
+        sand: colors.alias('sand')
       },
       keyframes: {
         'caret-blink': {
diff --git a/packages/database/schema.ts b/packages/database/schema.ts
index 79502623..4488c586 100644
--- a/packages/database/schema.ts
+++ b/packages/database/schema.ts
@@ -1106,7 +1106,9 @@ export const pendingAttachmentsRelations = relations(
 
 export type ConvoEntryMetadataEmailAddress = {
   id: number;
+  publicId: string;
   type: 'contact' | 'emailIdentity';
+  email: string;
 };
 
 export type ConvoEntryMetadataEmail = {