From 75041167084435330528c1887735ee60f3a24326 Mon Sep 17 00:00:00 2001
From: McPizza <gh@l1.io>
Date: Fri, 2 Feb 2024 17:09:26 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(web):=20Convo=20Viewer=20(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Tim Raderschad <tim.raderschad@gmail.com>
---
 .../web-app/components/convos/convoAvatar.vue |  20 +
 apps/web-app/components/convos/convoList.vue  | 186 +++--
 .../components/convos/convoListItem.vue       | 170 ++--
 .../components/convos/convoMessageItem.vue    | 161 ++--
 .../components/convos/convoMessages.vue       |  53 +-
 apps/web-app/components/convos/sidebar.vue    |   6 -
 apps/web-app/components/layout/navbar.vue     |  12 +-
 apps/web-app/components/un/ui-avatar-list.vue | 119 ---
 apps/web-app/components/un/ui-avatar-plus.vue | 158 +---
 apps/web-app/components/un/ui-avatar.vue      |  60 +-
 apps/web-app/components/un/ui-popover.vue     |  22 +
 apps/web-app/components/un/ui-tooltip.vue     |   3 +
 apps/web-app/composables/types.ts             |  12 +
 apps/web-app/composables/utils.ts             |  63 +-
 apps/web-app/emails/vercel-template.vue       | 117 ---
 apps/web-app/package.json                     |   1 +
 apps/web-app/pages/[orgSlug]/convo/[id].vue   | 524 ++++++++++---
 apps/web-app/pages/[orgSlug]/convo/new.vue    |  29 +-
 apps/web-app/plugins/ virtualScroller.ts      |  12 +
 apps/web-app/plugins/trpcClient.ts            |   2 +-
 apps/web-app/server/trpc/index.ts             |   4 -
 .../trpc/routers/convoRouter/convoRouter.ts   | 733 ++++++++++--------
 .../trpc/routers/convoRouter/entryRouter.ts   | 167 ++++
 .../trpc/routers/convoRouter/messageRouter.ts | 144 ----
 apps/web-app/tailwind.config.ts               |   1 +
 packages/database/schema.ts                   |   8 +-
 pnpm-lock.yaml                                |  38 +
 27 files changed, 1553 insertions(+), 1272 deletions(-)
 create mode 100644 apps/web-app/components/convos/convoAvatar.vue
 delete mode 100644 apps/web-app/components/un/ui-avatar-list.vue
 create mode 100644 apps/web-app/components/un/ui-popover.vue
 delete mode 100644 apps/web-app/emails/vercel-template.vue
 create mode 100644 apps/web-app/plugins/ virtualScroller.ts
 create mode 100644 apps/web-app/server/trpc/routers/convoRouter/entryRouter.ts
 delete mode 100644 apps/web-app/server/trpc/routers/convoRouter/messageRouter.ts

diff --git a/apps/web-app/components/convos/convoAvatar.vue b/apps/web-app/components/convos/convoAvatar.vue
new file mode 100644
index 00000000..bbb7620d
--- /dev/null
+++ b/apps/web-app/components/convos/convoAvatar.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import type { ConvoParticipantEntry } from '~/composables/types';
+  type Props = {
+    participant: ConvoParticipantEntry;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+  };
+
+  const props = defineProps<Props>();
+</script>
+<template>
+  <UnUiAvatar
+    v-if="props.participant"
+    :avatar-id="props.participant.avatarPublicId"
+    :public-id="props.participant.avatarPublicId"
+    :alt="props.participant.name"
+    :type="props.participant.type"
+    :color="props.participant.color"
+    :show-icon="true"
+    :size="props.size ? props.size : 'sm'" />
+</template>
diff --git a/apps/web-app/components/convos/convoList.vue b/apps/web-app/components/convos/convoList.vue
index 35c74e2f..bb6dae0d 100644
--- a/apps/web-app/components/convos/convoList.vue
+++ b/apps/web-app/components/convos/convoList.vue
@@ -1,88 +1,99 @@
 <script setup lang="ts">
-  import { useVirtualList, useInfiniteScroll } from '@vueuse/core';
-  import { useConvoStore } from '@/stores/convoStore';
+  import { useInfiniteScroll } from '@vueuse/core';
   const { $trpc } = useNuxtApp();
 
-  // const convoStore = useConvoStore();
-  // if (process.client && convoStore.convos.length === 0) {
-  //   await convoStore.getInitialConvos();
-  // }
-  // console.log(convoStore.convos.length);
+  const orgSlug = useRoute().params.orgSlug as string;
+  const infiniteContainer = ref<HTMLElement | null>(null);
 
-  const convosPending = ref(true);
-  const convos = ref<UserConvosDataType>([]);
-  const convoCursor = {
-    lastUpdatedAt: null as Date | null,
-    lastPublicId: null as string | null
-  };
-  const getInitialConvos = async () => {
-    convos.value = [];
-    if (convos.value.length !== 0) return;
-    const { data: userConvos } = await $trpc.convos.getUserConvos.useLazyQuery(
-      {}
-    );
-    if (!userConvos.value) {
-      convosPending.value = false;
-      return;
-    }
-    convos.value.push(...userConvos.value.data);
-    convoCursor.lastUpdatedAt = userConvos.value.cursor.lastUpdatedAt;
-    convoCursor.lastPublicId = userConvos.value.cursor.lastPublicId;
-    convosPending.value = false;
-    return;
-  };
-  const getNextConvos = async () => {
-    if (
-      convoCursor.lastUpdatedAt !== null &&
-      convoCursor.lastPublicId !== null
-    ) {
-      const { data: userConvos } =
-        await $trpc.convos.getUserConvos.useLazyQuery({
-          cursorLastUpdatedAt: convoCursor.lastUpdatedAt,
-          cursorLastPublicId: convoCursor.lastPublicId
-        });
-      if (!userConvos.value) return;
-      convos.value.push(...userConvos.value.data);
-      convoCursor.lastUpdatedAt = userConvos.value.cursor.lastUpdatedAt;
-      convoCursor.lastPublicId = userConvos.value.cursor.lastPublicId;
-    }
-  };
+  const convoCursor = ref<{
+    cursorLastUpdatedAt: Date | null;
+    cursorLastPublicId: string | null;
+  }>({
+    cursorLastUpdatedAt: null,
+    cursorLastPublicId: null
+  });
+  const userHasMoreConvos = ref(true);
+  const pauseLoading = ref(false);
+  const convos = ref<{}[]>([]);
+
+  type UserConvoQueryParams =
+    | {
+        cursorLastUpdatedAt: Date;
+        cursorLastPublicId: string;
+      }
+    | {};
+  const userConvoQueryParams = ref<UserConvoQueryParams>({});
+  const userConvoQueryPending = computed(() => {
+    return userConvosStatus.value === 'idle';
+  });
+  const userHasConvos = computed(() => {
+    return convos.value.length > 0;
+  });
 
-  const { list, containerProps, wrapperProps } = useVirtualList(convos.value, {
-    itemHeight: 127 + 16,
-    overscan: 3
+  const {
+    data: userConvosData,
+    status: userConvosStatus,
+    execute: getUserConvos
+  } = await $trpc.convos.getUserConvos.useLazyQuery(userConvoQueryParams, {
+    server: false,
+    queryKey: `userConvos-${orgSlug}`,
+    immediate: false,
+    watch: [userConvoQueryParams]
   });
+
+  watch(
+    userConvosData,
+    (newVal) => {
+      if (!newVal) return;
+      if (!newVal.data || !newVal.cursor || newVal.data.length === 0) {
+        userHasMoreConvos.value = false;
+        return;
+      }
+      convos.value.push(...newVal.data);
+      convoCursor.value.cursorLastUpdatedAt = newVal.cursor.lastUpdatedAt;
+      convoCursor.value.cursorLastPublicId = newVal.cursor.lastPublicId;
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+
   useInfiniteScroll(
-    containerProps.ref,
-    () => {
-      getNextConvos();
+    infiniteContainer,
+    async () => {
+      if (pauseLoading.value) return;
+      if (!userHasMoreConvos.value) return;
+      if (userConvosStatus.value === 'pending') return;
+      pauseLoading.value = true;
+      userConvoQueryParams.value = {
+        cursorLastUpdatedAt: convoCursor.value.cursorLastUpdatedAt,
+        cursorLastPublicId: convoCursor.value.cursorLastPublicId
+      };
+      pauseLoading.value = false;
     },
-    { distance: 300 }
+    { distance: 100, canLoadMore: () => userHasMoreConvos.value }
   );
-  onMounted(async () => {
-    if (process.client) {
-      await getInitialConvos();
-    }
+
+  onMounted(() => {
+    if (convos.value.length === 0) getUserConvos();
   });
 </script>
 <template>
-  <div
-    class="h-full max-h-full max-w-full w-full overflow-y-scroll"
-    v-bind="containerProps">
+  <div class="h-full max-h-full max-w-full w-full overflow-hidden">
     <div
-      v-if="!convosPending"
-      class="mb-[48px] flex flex-col items-start gap-4"
-      v-bind="wrapperProps">
-      <div
-        v-if="convosPending"
-        class="w-full flex flex-row justify-center gap-4 rounded-xl rounded-tl-2xl bg-base-3 p-8">
-        <UnUiIcon
-          name="i-svg-spinners:3-dots-fade"
-          size="24" />
-        <span>Loading conversations</span>
-      </div>
+      v-if="userConvoQueryPending"
+      class="w-full flex flex-row justify-center gap-4 rounded-xl rounded-tl-2xl bg-base-3 p-8">
+      <UnUiIcon
+        name="i-svg-spinners:3-dots-fade"
+        size="24" />
+      <span>Loading conversations</span>
+    </div>
+    <div
+      v-if="!userConvoQueryPending"
+      class="mb-[48px] max-h-full flex flex-col items-start gap-4 overflow-hidden">
       <div
-        v-if="!convosPending && convos.length === 0"
+        v-if="!userHasConvos"
         class="w-full flex flex-row justify-center gap-4 rounded-xl rounded-tl-2xl bg-base-3 p-8">
         <UnUiIcon
           name="i-ph-chat-circle"
@@ -90,15 +101,32 @@
         <span>No conversations found</span>
       </div>
       <div
-        v-if="!convosPending && convos.length !== 0"
-        class="max-w-full">
+        v-if="userHasConvos"
+        ref="infiniteContainer"
+        class="h-full max-h-full max-w-full w-full overflow-scroll">
+        <DynamicScroller
+          :items="convos"
+          key-field="publicId"
+          :min-item-size="48">
+          <template #default="{ item, index, active }">
+            <DynamicScrollerItem
+              :item="item"
+              :active="active"
+              :size-dependacies="[item.data]"
+              :data-index="index"
+              class="pb-4"
+              @click="navigateTo(`/${orgSlug}/convo/${item.publicId}`)">
+              <convos-convo-list-item :convo="item" />
+            </DynamicScrollerItem>
+          </template>
+        </DynamicScroller>
         <div
-          v-for="convo of list"
-          :id="convo.data.publicId"
-          :key="convo.index"
-          class="max-w-full"
-          @click="navigateTo(`/h/convo/${convo.data.publicId}`)">
-          <convos-convo-list-item :convo="convo.data" />
+          v-if="userHasMoreConvos && pauseLoading"
+          class="w-full flex flex-row justify-center gap-4 rounded-xl rounded-tl-2xl bg-base-3 p-8">
+          <UnUiIcon
+            name="i-svg-spinners:3-dots-fade"
+            size="24" />
+          <span>Loading more conversations</span>
         </div>
       </div>
     </div>
diff --git a/apps/web-app/components/convos/convoListItem.vue b/apps/web-app/components/convos/convoListItem.vue
index a101d87d..4ecdd802 100644
--- a/apps/web-app/components/convos/convoListItem.vue
+++ b/apps/web-app/components/convos/convoListItem.vue
@@ -1,138 +1,92 @@
 <script setup lang="ts">
   import { useTimeAgo } from '@vueuse/core';
-  import { string } from 'zod';
-  const { $trpc } = useNuxtApp();
-
-  type PromiseType<T> = T extends Promise<infer U> ? U : never;
-  type UserConvosDataType = PromiseType<
-    ReturnType<typeof $trpc.convos.getUserConvos.query>
-  >['data'];
+  import type {
+    ConvoParticipantEntry,
+    UserConvosDataType
+  } from '~/composables/types';
 
   type Props = {
     convo: UserConvosDataType[number];
   };
-
   const props = defineProps<Props>();
 
   const timeAgo = useTimeAgo(props.convo.lastUpdatedAt || new Date());
-  const authorName = computed(() => {
-    if (
-      props.convo.messages[0].author.userProfile?.firstName &&
-      props.convo.messages[0].author.userProfile?.lastName
-    ) {
-      return (
-        props.convo.messages[0].author.userProfile.firstName +
-        ' ' +
-        props.convo.messages[0].author.userProfile.lastName
-      );
-    }
-    if (props.convo.messages[0].author.userGroup?.name) {
-      return props.convo.messages[0].author.userGroup.name + ' Team';
-    }
 
-    if (props.convo.messages[0].author.foreignEmailIdentity?.senderName) {
-      return props.convo.messages[0].author.foreignEmailIdentity.senderName;
-    }
-    return '';
+  const participantArray = ref<ConvoParticipantEntry[]>([]);
+  const author = ref<ConvoParticipantEntry>();
+  const firstEntryAuthor =
+    props.convo.entries[0].author || props.convo.participants[0];
+  const authorEntryPublicId = computed(() => {
+    return (
+      firstEntryAuthor.orgMember?.publicId ||
+      firstEntryAuthor.userGroup?.publicId ||
+      firstEntryAuthor.contact?.publicId
+    );
   });
-
-  const authorAvatar = computed(() => {
-    if (props.convo.messages[0].author.userProfile?.avatarId) {
-      return props.convo.messages[0].author.userProfile.avatarId;
-    }
-    if (props.convo.messages[0].author.userGroup?.avatarId) {
-      return props.convo.messages[0].author.userGroup.avatarId;
-    }
-
-    if (props.convo.messages[0].author.foreignEmailIdentity?.avatarId) {
-      return props.convo.messages[0].author.foreignEmailIdentity.avatarId;
-    }
-    return '';
+  const authorEntryName = computed(() => {
+    return (
+      firstEntryAuthor.userGroup?.publicId ||
+      firstEntryAuthor.contact?.publicId ||
+      firstEntryAuthor.orgMember?.profile.firstName +
+        ' ' +
+        firstEntryAuthor.orgMember?.profile.lastName ||
+      'Participant'
+    );
   });
 
-  const authorColor = computed(() => {
-    if (props.convo.messages[0].author.userGroup?.color) {
-      return props.convo.messages[0].author.userGroup.color;
+  for (const participant of props.convo.participants) {
+    const {
+      participantPublicId,
+      participantTypePublicId,
+      avatarPublicId,
+      participantName,
+      participantType,
+      participantColor,
+      participantRole
+    } = useUtils().convos.useParticipantData(participant);
+    const participantData: ConvoParticipantEntry = {
+      participantPublicId: participantPublicId,
+      typePublicId: participantTypePublicId,
+      avatarPublicId: avatarPublicId,
+      name: participantName,
+      type: participantType,
+      role: participantRole,
+      color: participantColor
+    };
+    if (participantTypePublicId === authorEntryPublicId.value) {
+      author.value = participantData;
+    } else {
+      participantArray.value.push(participantData);
     }
-    return '';
-  });
-
-  type AuthorEntry = {
-    avatarId: string;
-    name: string;
-    type: string;
-    color: string;
-  };
-  const avatarArray = ref<AuthorEntry[]>([]);
-  for (const author of props.convo.members) {
-    avatarArray.value.push({
-      avatarId: author.foreignEmailIdentity?.avatarId
-        ? author.foreignEmailIdentity?.avatarId
-        : author.userGroup?.avatarId
-        ? author.userGroup?.avatarId
-        : author.userProfile?.avatarId
-        ? author.userProfile?.avatarId
-        : '',
-      name: author.foreignEmailIdentity?.senderName
-        ? author.foreignEmailIdentity?.senderName
-        : author.userGroup?.name
-        ? author.userGroup?.name
-        : author.userProfile?.firstName
-        ? author.userProfile?.firstName + ' ' + author.userProfile?.lastName
-        : '',
-      type: author.foreignEmailIdentity?.senderName
-        ? 'External'
-        : author.userGroup?.name
-        ? 'Group'
-        : 'User',
-      color: author.userGroup?.color ? author.userGroup?.color : 'base'
-    });
   }
 </script>
 <template>
   <button
-    class="p-4 rounded flex flex-col justify-between bg-base-3 hover:bg-base-4 gap-2 overflow-hidden max-w-full">
-    <div class="flex flex-row gap-6 items-center w-full">
+    class="bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 max-w-full flex flex-col justify-between gap-0 rounded-lg">
+    <div class="h-fit w-full flex flex-row items-center gap-6">
       <UnUiAvatarPlus
-        :avatars="avatarArray"
-        :primary="{
-          avatarId: authorAvatar,
-          name: authorName,
-          type: 'User',
-          color: authorColor
-        }"
+        :avatars="participantArray"
+        :primary="author"
         size="lg" />
-      <div class="w-full overflow-hidden flex flex-col gap-1">
+      <div class="w-full flex flex-col gap-1 overflow-hidden">
         <!-- <div class="text-base text-left w-full overflow-hidden text-sm">
           <span class="line-clamp-2 font-bold">{{ authorName }}</span>
         </div> -->
-        <div class="text-xs w-full text-left overflow-hidden">
-          <span class="truncate text-xs font-italic"
-            >Re: {{ props.convo.subjects[0].subject }}</span
-          >
+        <div class="w-full overflow-hidden text-left text-xs">
+          <span class="truncate text-xs font-italic">
+            Re: {{ props.convo.subjects[0].subject }}
+          </span>
         </div>
-        <div class="text-base text-left w-full overflow-hidden text-sm">
-          <span class="line-clamp-2"
-            ><span class="font-bold">{{ authorName }}</span
-            >: {{ props.convo.messages[0].body }}</span
-          >
+        <div class="w-full overflow-hidden text-left text-base text-sm">
+          <span class="line-clamp-2">
+            <span class="font-bold">{{ authorEntryName }} </span>
+            : {{ props.convo.entries[0].bodyPlainText }}
+          </span>
         </div>
       </div>
     </div>
-    <div class="flex flex-row w-full justify-end items-center gap-1">
-      <!-- <div class="flex flex-row w-full gap-2 justify-start">
-        <UnUiAvatarList
-          :avatars="avatarArray"
-          size="xs"
-          :limit="2" />
-      </div> -->
-      <span class="text-xs text-base-11">in</span>
-      <UnUiAvatar
-        :avatar-id="props.convo.org.avatarId ? props.convo.org.avatarId : ''"
-        :name="props.convo.org.name"
-        tooltip-pre-text="Organization"
-        size="tiny" />
-      <div class="text-xs text-right min-w-fit overflow-hidden text-base-11">
+    <div class="w-full flex flex-row items-center justify-end gap-1">
+      <div class="min-w-fit overflow-hidden text-right text-xs text-base-11">
         <span class="">{{ timeAgo }}</span>
       </div>
     </div>
diff --git a/apps/web-app/components/convos/convoMessageItem.vue b/apps/web-app/components/convos/convoMessageItem.vue
index cd0f3eb2..64e57faa 100644
--- a/apps/web-app/components/convos/convoMessageItem.vue
+++ b/apps/web-app/components/convos/convoMessageItem.vue
@@ -1,106 +1,95 @@
 <script setup lang="ts">
   import { useTimeAgo } from '@vueuse/core';
+  import { generateHTML } from '@tiptap/html';
+  import { tipTapExtensions } from '../../shared/editorConfig';
   const { $trpc } = useNuxtApp();
 
-  type PromiseType<T> = T extends Promise<infer U> ? U : never;
-  type ConvoMessageDataType = PromiseType<
-    ReturnType<typeof $trpc.convos.getConvoMessages.query>
-  >['messages'];
+  type ConvoEntryDataType = Awaited<
+    ReturnType<typeof $trpc.convos.entries.getConvoEntries.query>
+  >['entries'];
 
-  type ConvoMessageItem = NonNullable<ConvoMessageDataType>[number];
+  type ConvoEntryItem = NonNullable<ConvoEntryDataType>[number];
   type Props = {
-    message: ConvoMessageItem;
+    entry: ConvoEntryItem;
   };
 
   const props = defineProps<Props>();
+  const participantPublicId = inject('participantPublicId');
+  const convoParticipants = inject('convoParticipants');
 
-  const timeAgo = useTimeAgo(props.message.createdAt || new Date());
-  // const authorName = computed(() => {
-  //   if (
-  //     props.convo.messages[0].author.userProfile?.firstName &&
-  //     props.convo.messages[0].author.userProfile?.lastName
-  //   ) {
-  //     return (
-  //       props.convo.messages[0].author.userProfile.firstName +
-  //       ' ' +
-  //       props.convo.messages[0].author.userProfile.lastName
-  //     );
-  //   }
-  //   if (props.convo.messages[0].author.userGroup?.name) {
-  //     return props.convo.messages[0].author.userGroup.name + ' Team';
-  //   }
+  const timeAgo = useTimeAgo(props.entry.createdAt || new Date());
 
-  //   if (props.convo.messages[0].author.foreignEmailIdentity?.senderName) {
-  //     return props.convo.messages[0].author.foreignEmailIdentity.senderName;
-  //   }
-  //   return '';
-  // });
+  const convoEntryBody = computed(() => {
+    if (props.entry.body) {
+      return generateHTML(props.entry.body, tipTapExtensions);
+    }
+    return '';
+  });
 
-  // const authorAvatar = computed(() => {
-  //   if (props.convo.messages[0].author.userProfile?.avatarId) {
-  //     return props.convo.messages[0].author.userProfile.avatarId;
-  //   }
-  //   if (props.convo.messages[0].author.userGroup?.avatarId) {
-  //     return props.convo.messages[0].author.userGroup.avatarId;
-  //   }
+  const author = computed(() => {
+    //@ts-expect-error vue3 provide/inject types are whack to set up: https://vuejs.org/guide/typescript/composition-api#typing-provide-inject
+    return convoParticipants.value.find(
+      //@ts-expect-error ts dosnt know the type of this reactive string
+      (participant) =>
+        participant.participantPublicId == props.entry.author.publicId
+    );
+  });
+  const userIsAuthor = computed(() => {
+    //@ts-expect-error ts dosnt know the type of this reactive string
+    return props.entry.author.publicId == participantPublicId.value;
+  });
 
-  //   if (props.convo.messages[0].author.foreignEmailIdentity?.avatarId) {
-  //     return props.convo.messages[0].author.foreignEmailIdentity.avatarId;
-  //   }
-  //   return '';
-  // });
+  const tempColor = 'message';
+  const typeClasses = computed(() => {
+    switch (tempColor) {
+      case 'message':
+        return 'bg-white dark:bg-black';
+      default:
+        return 'bg-gray-100 dark:bg-gray-900';
+    }
+  });
+  const containerClasses = computed(() => {
+    return userIsAuthor.value ? 'items-end' : 'items-start';
+  });
 
-  // const authorColor = computed(() => {
-  //   if (props.convo.messages[0].author.userGroup?.color) {
-  //     return props.convo.messages[0].author.userGroup.color;
-  //   }
-  //   return '';
-  // });
-
-  // type AuthorEntry = {
-  //   avatarId: string;
-  //   name: string;
-  //   type: string;
-  //   color: string;
-  // };
-  // const avatarArray = ref<AuthorEntry[]>([]);
-  // for (const author of props.convo.members) {
-  //   avatarArray.value.push({
-  //     avatarId: author.foreignEmailIdentity?.avatarId
-  //       ? author.foreignEmailIdentity?.avatarId
-  //       : author.userGroup?.avatarId
-  //       ? author.userGroup?.avatarId
-  //       : author.userProfile?.avatarId
-  //       ? author.userProfile?.avatarId
-  //       : '',
-  //     name: author.foreignEmailIdentity?.senderName
-  //       ? author.foreignEmailIdentity?.senderName
-  //       : author.userGroup?.name
-  //       ? author.userGroup?.name
-  //       : author.userProfile?.firstName
-  //       ? author.userProfile?.firstName + ' ' + author.userProfile?.lastName
-  //       : '',
-  //     type: author.foreignEmailIdentity?.senderName
-  //       ? 'External'
-  //       : author.userGroup?.name
-  //       ? 'Group'
-  //       : 'User',
-  //     color: author.userGroup?.color ? author.userGroup?.color : 'base'
-  //   });
-  // }
+  const convoBubbleClasses = computed(() => {
+    return `${typeClasses.value}`;
+  });
 </script>
 <template>
-  <div class="flex flex-row gap-4">
-    <div
-      class="p-4 rounded flex flex-col justify-between bg-base-3 hover:bg-base-4 gap-2 overflow-hidden max-w-[80%] w-full">
-      <div class="flex flex-row gap-6 items-center w-full">
-        {{ props.message.body }}
-      </div>
-      <div class="flex flex-row w-full justify-end items-center gap-1">
-        {{ props.message.author }}
+  <div
+    class="w-full flex flex-col gap-2"
+    :class="containerClasses">
+    <div class="w-full flex flex-row items-start gap-2">
+      <div
+        v-if="author"
+        class="flex flex-row items-center gap-1">
+        <UnUiAvatar
+          :public-id="author.publicId"
+          :avatar-id="author.avatarPublicId"
+          :alt="author.name"
+          :type="author.type"
+          :color="author.color"
+          size="lg"
+          class="rounded-full" />
       </div>
-      <div class="flex flex-row w-full justify-end items-center gap-1">
-        {{ timeAgo }} {{ props.message.createdAt }}
+      <div class="w-full flex flex-col gap-2 p-0">
+        <div class="w-full flex 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-gray-500 text-xs leading-none">
+              {{ timeAgo }}
+            </span>
+          </UnUiTooltip>
+        </div>
+        <div
+          class="bg-gray-100 dark:bg-gray-900 w-full overflow-hidden rounded-bl-xl rounded-br-xl p-2"
+          :class="convoBubbleClasses"
+          v-html="convoEntryBody"></div>
       </div>
     </div>
   </div>
diff --git a/apps/web-app/components/convos/convoMessages.vue b/apps/web-app/components/convos/convoMessages.vue
index 977d20e7..4bc2b072 100644
--- a/apps/web-app/components/convos/convoMessages.vue
+++ b/apps/web-app/components/convos/convoMessages.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-  import { useVirtualList, useInfiniteScroll, useTimeAgo } from '@vueuse/core';
+  import { useInfiniteScroll } from '@vueuse/core';
   const { $trpc } = useNuxtApp();
-  type PromiseType<T> = T extends Promise<infer U> ? U : never;
-  type ConvoMessageDataType = PromiseType<
-    ReturnType<typeof $trpc.convos.getConvoMessages.query>
-  >['messages'];
-
-  const noMessagesError = ref(false);
-  //@ts-expect-error
-  const el = ref<HTMLElement>(null);
-  const messagesArray = ref<ConvoMessageDataType>([]);
+  type ConvoEntriesDataType = Awaited<
+    ReturnType<typeof $trpc.convos.entries.getConvoEntries.query>
+  >['entries'];
+  const el = ref<HTMLElement | null>(null);
+  const entriesArray = ref<ConvoEntriesDataType>([]);
 
   type Props = {
     convoPublicId: string;
@@ -17,26 +13,20 @@
 
   const props = defineProps<Props>();
 
-  const convoMessagesReturn = await $trpc.convos.getConvoMessages.query({
-    convoPublicId: props.convoPublicId
-  });
+  const { data: convoEntries } =
+    await $trpc.convos.entries.getConvoEntries.useLazyQuery(
+      {
+        convoPublicId: props.convoPublicId
+      },
+      { server: false, queryKey: `convoEntries-${props.convoPublicId}` }
+    );
 
-  if (convoMessagesReturn.error || !convoMessagesReturn.messages) {
-    noMessagesError.value = true;
-  } else {
-    if (messagesArray.value) {
-      for (const message of convoMessagesReturn.messages) {
-        messagesArray.value.push({
-          ...message
-        });
-      }
+  watch(convoEntries, () => {
+    if (convoEntries.value?.entries) {
+      entriesArray.value.push(...convoEntries.value.entries);
     }
-  }
+  });
 
-  // const { list, containerProps, wrapperProps } = useVirtualList(messages, {
-  //   itemHeight: 152,
-  //   overscan: 3
-  // });
   useInfiniteScroll(
     el,
     () => {
@@ -47,13 +37,14 @@
 </script>
 <template>
   <div
-    class="max-w-full w-full h-full max-h-full overflow-y-scroll flex flex-col-reverse">
+    class="h-full max-h-full max-w-full w-full flex flex-col-reverse overflow-y-scroll">
     <div
-      class="flex flex-col-reverse items-start gap-4 mb-[24px] mt-[24px] w-full">
+      class="mb-[24px] mt-[24px] w-full flex flex-col-reverse items-start gap-4">
       <div
-        v-for="message of messagesArray"
+        v-for="entry of entriesArray"
+        :key="entry.publicId"
         class="max-w-full w-full">
-        <convos-convo-message-item :message="message" />
+        <convos-convo-message-item :entry="entry" />
       </div>
     </div>
   </div>
diff --git a/apps/web-app/components/convos/sidebar.vue b/apps/web-app/components/convos/sidebar.vue
index c5e17417..7e298295 100644
--- a/apps/web-app/components/convos/sidebar.vue
+++ b/apps/web-app/components/convos/sidebar.vue
@@ -19,12 +19,6 @@
         icon="i-ph-plus"
         variant="outline"
         :to="`/${orgSlug}/convo/new`" />
-      <!-- <UnUiButton
-        class="flex-grow justify-center"
-        label="Filter"
-        icon="i-ph-list-checks"
-        variant="outline"
-        :to="`/${orgSlug}/convo/new`" /> -->
     </div>
   </div>
 </template>
diff --git a/apps/web-app/components/layout/navbar.vue b/apps/web-app/components/layout/navbar.vue
index d8da702c..9bac1110 100644
--- a/apps/web-app/components/layout/navbar.vue
+++ b/apps/web-app/components/layout/navbar.vue
@@ -70,10 +70,11 @@
 
   const { $trpc } = useNuxtApp();
 
-  const { data: userProfile } = $trpc.user.profile.getUserOrgProfile.useQuery(
-    { orgSlug: orgSlug },
-    { server: false, queryKey: 'getUserSingleProfileNav', lazy: true }
-  );
+  const { data: userProfile } =
+    $trpc.user.profile.getUserOrgProfile.useLazyQuery(
+      { orgSlug: orgSlug },
+      { server: false, queryKey: 'getUserSingleProfileNav' }
+    );
 
   const {
     data: userOrgs,
@@ -97,7 +98,7 @@
     }
 
     if (!userOrgSlugs?.includes(orgSlug)) {
-      navigateTo(`/login`);
+      navigateTo(`/redirect`);
     }
   });
 
@@ -330,7 +331,6 @@
             :avatar-id="item.avatarId"
             :type="'org'"
             :alt="item.label"
-            color="gray"
             size="sm" />
           <div class="text-left">
             <p class="truncate font-medium">
diff --git a/apps/web-app/components/un/ui-avatar-list.vue b/apps/web-app/components/un/ui-avatar-list.vue
deleted file mode 100644
index 4a6f9164..00000000
--- a/apps/web-app/components/un/ui-avatar-list.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script setup lang="ts">
-  import type { AvatarSize } from '@nuxt/ui/dist/runtime/types/avatar';
-  import type { VariantProps } from 'class-variance-authority';
-  import {
-    TooltipArrow,
-    TooltipContent,
-    TooltipProvider,
-    TooltipRoot,
-    TooltipTrigger
-  } from 'radix-vue';
-
-  type AuthorEntry = {
-    publicId: string;
-    avatarId: string;
-    name: string;
-    type: 'user' | 'org' | 'group' | 'contact';
-    color: string;
-  };
-  type Props = {
-    avatars: AuthorEntry[];
-    size: 'tiny' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    limit?: number;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    size: 'md',
-    limit: 1
-  });
-
-  const avatarClasses = useUtils().cva('', {
-    variants: {
-      image: {
-        tiny: '32x32',
-        xs: '32x32',
-        sm: '48x48',
-        md: '56x56',
-        lg: '64x64',
-        xl: '80x80',
-        '2xl': '128x128'
-      },
-      container: {
-        tiny: 'w-[16px] h-[16px] text-xs',
-        xs: 'w-[32px] h-[32px] text-sm',
-        sm: 'w-[48px] h-[48px] text-base',
-        md: 'w-[56px] h-[56px] text-lg',
-        lg: 'w-[64px] h-[64px] text-xl',
-        xl: 'w-[80px] h-[80px] text-2xl',
-        '2xl': 'w-[128px] h-[128px] text-3xl'
-      },
-      color: {
-        base: 'bg-base-3',
-        red: 'bg-red-9',
-        purple: 'bg-purple-9',
-        green: 'bg-green-9',
-        yellow: 'bg-yellow-9',
-        pink: 'bg-pink-9',
-        blue: 'bg-blue-9'
-      }
-    }
-  });
-
-  const expanded = ref(false);
-  const toggleState = ref(false);
-
-  const avatarArray = computed(() => {
-    if (props.avatars.length + 1 > props.limit) {
-      return props.avatars.slice(0, props.limit - 1);
-    }
-    return props.avatars;
-  });
-</script>
-<template>
-  <div class="flex flex-row gap-2">
-    <div
-      v-for="avatar in avatarArray"
-      :key="avatar.publicId">
-      <UnUiAvatar
-        :public-id="avatar.publicId"
-        :avatar-id="avatar.avatarId"
-        :name="avatar.name"
-        :type="avatar.type"
-        :size="props.size as AvatarSize"
-        :color="avatar.color" />
-    </div>
-
-    <TooltipProvider v-if="props.avatars.length + 1 > props.limit">
-      <TooltipRoot v-model:open="toggleState">
-        <TooltipTrigger @click="toggleState = !toggleState">
-          <div
-            class="flex items-center justify-center rounded-2 bg-base-5 bg-cover bg-center text-base-12 font-display"
-            :class="avatarClasses({ container: props.size })">
-            + {{ props.avatars.length - props.limit + 1 }}
-          </div>
-        </TooltipTrigger>
-        <Teleport to="body">
-          <TooltipContent
-            :side-offset="5"
-            :avoid-collisions="true"
-            class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade max-w-80 border border-base-6 rounded-lg bg-base-2 p-4 text-sm">
-            <div class="flex flex-row gap-2">
-              <div
-                v-for="avatar in props.avatars"
-                :key="avatar.publicId">
-                <UnUiAvatar
-                  :public-id="avatar.publicId"
-                  :avatar-id="avatar.avatarId"
-                  :name="avatar.name"
-                  :type="avatar.type"
-                  :color="avatar.color"
-                  size="sm" />
-              </div>
-              <TooltipArrow class="fill-base-11" />
-            </div>
-          </TooltipContent>
-        </Teleport>
-      </TooltipRoot>
-    </TooltipProvider>
-  </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 acd3c97e..8dd58b0b 100644
--- a/apps/web-app/components/un/ui-avatar-plus.vue
+++ b/apps/web-app/components/un/ui-avatar-plus.vue
@@ -1,22 +1,10 @@
 <script setup lang="ts">
-  import type { VariantProps } from 'class-variance-authority';
-  import {
-    TooltipArrow,
-    TooltipContent,
-    TooltipProvider,
-    TooltipRoot,
-    TooltipTrigger
-  } from 'radix-vue';
+  import type { UiColor } from '@uninbox/types/ui';
+  import type { ConvoParticipantEntry } from '~/composables/types';
 
-  type AuthorEntry = {
-    avatarId: string;
-    name: string;
-    type: string;
-    color: string;
-  };
   type Props = {
-    primary: AuthorEntry;
-    avatars: AuthorEntry[];
+    primary: ConvoParticipantEntry | undefined;
+    avatars: ConvoParticipantEntry[];
     size: 'tiny' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     limit?: number;
   };
@@ -26,119 +14,51 @@
     limit: 1
   });
 
-  const avatarClasses = useUtils().cva('', {
-    variants: {
-      primaryImage: {
-        tiny: '32x32',
-        xs: '32x32',
-        sm: '48x48',
-        md: '56x56',
-        lg: '64x64',
-        xl: '80x80',
-        '2xl': '128x128'
-      },
-      plusImage: {
-        tiny: '16x16',
-        xs: '16x16',
-        sm: '24x24',
-        md: '28x28',
-        lg: '32x32',
-        xl: '40x40',
-        '2xl': '64x64'
-      },
-      primaryContainer: {
-        tiny: 'w-[16px] h-[16px] text-xs rounded-md',
-        xs: 'w-[32px] h-[32px] text-sm rounded-md',
-        sm: 'w-[48px] h-[48px] text-base rounded-md',
-        md: 'w-[56px] h-[56px] text-lg rounded-lg',
-        lg: 'w-[64px] h-[64px] text-xl rounded-lg',
-        xl: 'w-[80px] h-[80px] text-2xl rounded-lg',
-        '2xl': 'w-[128px] h-[128px] text-3xl rounded-xl'
-      },
-      plusContainer: {
-        tiny: 'w-[16px] h-[16px] text-xs',
-        xs: 'w-[32px] h-[32px] text-sm',
-        sm: 'w-[48px] h-[48px] text-base',
-        md: 'w-[56px] h-[56px] text-lg',
-        lg: 'w-[64px] h-[64px] text-xl',
-        xl: 'w-[80px] h-[80px] text-2xl',
-        '2xl': 'w-[128px] h-[128px] text-3xl'
-      },
-      color: {
-        base: 'bg-base-3',
-        red: 'bg-red-9',
-        purple: 'bg-purple-9',
-        green: 'bg-green-9',
-        yellow: 'bg-yellow-9',
-        pink: 'bg-pink-9',
-        blue: 'bg-blue-9'
-      }
-    }
+  const avatarArray = computed(() => {
+    return props.avatars;
   });
 
-  const expanded = ref(false);
-  const toggleState = ref(false);
-  const imageUrlAccountHash = useRuntimeConfig().public.cfImagesAccountHash;
-
-  const avatarArray = computed(() => {
-    if (props.avatars.length + 1 > props.limit) {
-      return props.avatars.slice(0, props.limit - 1);
+  const primaryAvatar = computed(() => {
+    if (props.primary) {
+      return props.primary;
     }
-    return props.avatars;
+    return props.avatars[0];
   });
 </script>
 <template>
-  <div class="">
-    <UnUiTooltip :text="primary.name || ''">
+  <div class="h-fit flex flex-row items-end">
+    <UnUiAvatar
+      :avatar-id="primaryAvatar.avatarPublicId"
+      :public-id="primaryAvatar.participantPublicId"
+      :alt="primaryAvatar.name"
+      :type="primaryAvatar.type"
+      :color="primaryAvatar.color"
+      size="lg" />
+    <NuxtUiPopover
+      v-if="props.avatars.length + 1 > props.limit"
+      class="-mb-4 -ml-4"
+      :popper="{ placement: 'right' }"
+      mode="hover">
       <div
-        class="bg-cover bg-center font-display flex justify-center items-center"
-        :class="
-          avatarClasses({ primaryContainer: props.size, color: primary.color })
-        "
-        :style="
-          primary.avatarId
-            ? `background-image: url(https://imagedelivery.net/${imageUrlAccountHash}/${
-                primary.avatarId
-              }/${avatarClasses({ primaryImage: props.size })})`
-            : ''
-        ">
-        {{
-          primary.avatarId ? '' : primary.name ? primary.name?.charAt(0) : ''
-        }}
+        class="bg-gray-50 h-[32px] w-[32px] flex items-center justify-center rounded-2 text-sm font-display shadow backdrop-blur-2xl">
+        + {{ props.avatars.length - props.limit + 1 }}
       </div>
-    </UnUiTooltip>
 
-    <TooltipProvider v-if="props.avatars.length + 1 > props.limit">
-      <TooltipRoot v-model:open="toggleState">
-        <TooltipTrigger
-          @click="toggleState = !toggleState"
-          class="relative -top-[25px] w-fit -right-[35px] -mb[25px]">
+      <template #panel>
+        <div class="flex flex-row gap-2 p-4">
           <div
-            class="rounded-2 font-display text-base-12 flex justify-center items-center backdrop-blur-2xl w-[32px] h-[32px] text-sm shadow">
-            + {{ props.avatars.length - props.limit + 1 }}
+            v-for="avatar in avatarArray"
+            :key="avatar.participantPublicId">
+            <UnUiAvatar
+              :avatar-id="avatar.avatarPublicId"
+              :public-id="avatar.participantPublicId"
+              :alt="avatar.name"
+              :type="avatar.type"
+              :color="avatar.color"
+              size="lg" />
           </div>
-        </TooltipTrigger>
-        <Teleport to="body">
-          <TooltipContent
-            :side-offset="5"
-            :avoid-collisions="true"
-            class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade max-w-80 border border-base-6 rounded-lg bg-base-2 p-4 text-sm">
-            <div class="flex flex-row gap-2">
-              <div
-                v-for="avatar in props.avatars"
-                :key="avatar.avatarId">
-                <UnUiAvatar
-                  :avatar-id="avatar.avatarId"
-                  :name="avatar.name"
-                  :tooltip-pre-text="avatar.type"
-                  :color="avatar.color"
-                  size="sm" />
-              </div>
-              <TooltipArrow class="fill-base-11" />
-            </div>
-          </TooltipContent>
-        </Teleport>
-      </TooltipRoot>
-    </TooltipProvider>
+        </div>
+      </template>
+    </NuxtUiPopover>
   </div>
 </template>
diff --git a/apps/web-app/components/un/ui-avatar.vue b/apps/web-app/components/un/ui-avatar.vue
index 1bd62816..6f4156d6 100644
--- a/apps/web-app/components/un/ui-avatar.vue
+++ b/apps/web-app/components/un/ui-avatar.vue
@@ -1,24 +1,31 @@
 <script lang="ts">
   import type { DefineComponent } from 'vue';
   import { NuxtUiAvatar } from '#components';
+  import { uiColors } from '@uninbox/types/ui';
+
+  type UiColors = (typeof uiColors)[number] | null;
 
   export default defineComponent<
     typeof NuxtUiAvatar extends DefineComponent<infer Props, any, any>
       ? Props & {
-          color?: string;
+          color?: UiColors;
           publicId: string;
           avatarId: string;
           type: 'user' | 'org' | 'group' | 'contact';
+          tooltip?: string;
           avatarUrl?: string | undefined;
+          tooltipText?: string | undefined;
+          showIcon?: boolean | undefined;
+          tooltipIcon?: string | undefined;
         }
       : never
   >({
     props: {
       ...NuxtUiAvatar.props,
       color: {
-        type: String,
+        type: uiColors || null || undefined,
         required: false,
-        default: null
+        default: () => null
       },
       publicId: {
         type: String,
@@ -38,6 +45,16 @@
           // It must be one of these values
           return ['user', 'org', 'group', 'contact'].includes(value);
         }
+      },
+      tooltip: {
+        type: String,
+        required: false,
+        default: null
+      },
+      showIcon: {
+        type: Boolean,
+        required: false,
+        default: false
       }
     },
     setup(props: any) {
@@ -61,25 +78,50 @@
             ? useUtils().generateAvatarUrl(props.type, props.avatarId, size)
             : null;
       });
+      const tooltipText = computed(() => {
+        return props.tooltip ? props.tooltip : props.alt;
+      });
+      const tooltipIcon = computed(() => {
+        switch (props.type) {
+          case 'user':
+            return 'i-ph-user';
+          case 'org':
+            return 'i-ph-buildings';
+          case 'group':
+            return 'i-ph-users-three';
+          case 'contact':
+            return 'i-ph-at';
+          default:
+            return 'i-ph-user';
+        }
+      });
 
-      return { avatarUrl };
+      return { avatarUrl, tooltipText, tooltipIcon };
     }
   });
   //TODO: Ensure that the color prop is a pre-defined color so tailwindcss correctly generates it for the css
 </script>
 <template>
-  <UnUiTooltip :text="$props.alt">
+  <UnUiTooltip>
+    <template #text>
+      <div class="flex flex-row items-center gap-1">
+        <UnUiIcon
+          v-if="$props.showIcon && tooltipIcon"
+          :name="tooltipIcon" />
+        <span>{{ tooltipText }}</span>
+      </div>
+    </template>
     <NuxtUiAvatar
       v-bind="$props"
       :src="avatarUrl"
       :ui="{
-        text: 'font-display text-gray-950',
-        placeholder: 'font-display text-gray-950 dark:text-gray-800'
+        text: 'font-display text-gray-900 dark:text-white',
+        placeholder: 'font-display text-gray-600 dark:text-gray-400'
       }"
       :class="
         $props.color
-          ? `bg-${$props.color}-400 dark:bg-${$props.color}-300`
-          : `bg-gray-400 dark:bg-gray-300`
+          ? `bg-${$props.color}-200 dark:bg-${$props.color}-700`
+          : `bg-gray-100 dark:bg-gray-800`
       " />
   </UnUiTooltip>
 </template>
diff --git a/apps/web-app/components/un/ui-popover.vue b/apps/web-app/components/un/ui-popover.vue
new file mode 100644
index 00000000..e14e917c
--- /dev/null
+++ b/apps/web-app/components/un/ui-popover.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { DefineComponent } from 'vue';
+  import { NuxtUiPopover } from '#components';
+
+  export default defineComponent<
+    typeof NuxtUiPopover extends DefineComponent<infer Props, any, any>
+      ? Props
+      : never
+  >({
+    props: {
+      ...NuxtUiPopover.props
+    }
+  });
+</script>
+<template>
+  <NuxtUiPopover v-bind="$props">
+    <template #panel>
+      <slot name="panel"> </slot>
+    </template>
+    <slot />
+  </NuxtUiPopover>
+</template>
diff --git a/apps/web-app/components/un/ui-tooltip.vue b/apps/web-app/components/un/ui-tooltip.vue
index 14401a56..ca3e9f21 100644
--- a/apps/web-app/components/un/ui-tooltip.vue
+++ b/apps/web-app/components/un/ui-tooltip.vue
@@ -14,6 +14,9 @@
 </script>
 <template>
   <NuxtUiTooltip v-bind="$props">
+    <template #text>
+      <slot name="text"> </slot>
+    </template>
     <slot />
   </NuxtUiTooltip>
 </template>
diff --git a/apps/web-app/composables/types.ts b/apps/web-app/composables/types.ts
index 095a63be..eb343739 100644
--- a/apps/web-app/composables/types.ts
+++ b/apps/web-app/composables/types.ts
@@ -1,5 +1,17 @@
+import { uiColors } from '@uninbox/types/ui';
+
 const { $trpc } = useNuxtApp();
 type PromiseType<T> = T extends Promise<infer U> ? U : never;
 export type UserConvosDataType = PromiseType<
   ReturnType<typeof $trpc.convos.getUserConvos.query>
 >['data'];
+
+export type ConvoParticipantEntry = {
+  participantPublicId: string;
+  typePublicId: string;
+  avatarPublicId: string;
+  name: string;
+  type: 'user' | 'group' | 'contact';
+  role: 'assigned' | 'contributor' | 'commenter' | 'watcher' | 'guest';
+  color: (typeof uiColors)[number] | null;
+};
diff --git a/apps/web-app/composables/utils.ts b/apps/web-app/composables/utils.ts
index 498269d5..ca4297a0 100644
--- a/apps/web-app/composables/utils.ts
+++ b/apps/web-app/composables/utils.ts
@@ -1,4 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
+import type { UserConvosDataType } from '~/composables/types';
+
 function generateAvatarUrl(
   type: 'user' | 'org' | 'group' | 'contact',
   avatarId: string,
@@ -34,8 +36,67 @@ function generateAvatarUrl(
   }`;
 }
 
+function useParticipantData(
+  participant: UserConvosDataType[number]['participants'][0]
+) {
+  const {
+    publicId: participantPublicId,
+    contact,
+    userGroup,
+    orgMember,
+    role: participantRole
+  } = participant;
+
+  let participantType: 'user' | 'group' | 'contact',
+    participantTypePublicId,
+    avatarPublicId,
+    participantName,
+    participantColor;
+
+  switch (true) {
+    case !!contact?.publicId:
+      participantType = 'contact';
+      participantTypePublicId = contact.publicId;
+      avatarPublicId = contact.avatarId || '';
+      participantName =
+        contact.name || `${contact.emailUsername}@${contact.emailDomain}`;
+      participantColor = null;
+      break;
+    case !!userGroup?.name:
+      participantType = 'group';
+      participantTypePublicId = userGroup.publicId;
+      avatarPublicId = userGroup.avatarId || '';
+      participantName = userGroup.name;
+      participantColor = userGroup.color;
+      break;
+    case !!orgMember?.publicId:
+      participantType = 'user';
+      participantTypePublicId = orgMember.publicId;
+      avatarPublicId = orgMember.profile.avatarId || '';
+      participantName = `${orgMember.profile.firstName} ${orgMember.profile.lastName}`;
+      participantColor = null;
+      break;
+    default:
+      participantType = 'user';
+      participantTypePublicId = '';
+      avatarPublicId = '';
+      participantName = '';
+      participantColor = null;
+  }
+
+  return {
+    participantPublicId,
+    participantType,
+    participantTypePublicId,
+    avatarPublicId,
+    participantName,
+    participantColor,
+    participantRole
+  };
+}
+
 export const useUtils = () => {
-  return { cva, generateAvatarUrl };
+  return { cva, generateAvatarUrl, convos: { useParticipantData } };
 };
 
 // TODO: Fix exporting types under namespace UseUtilTypes
diff --git a/apps/web-app/emails/vercel-template.vue b/apps/web-app/emails/vercel-template.vue
deleted file mode 100644
index 1e55f567..00000000
--- a/apps/web-app/emails/vercel-template.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup lang="ts">
-  import { defineProps, withDefaults } from 'vue';
-
-  interface Props {
-    invitedByUsername?: string;
-    teamName?: string;
-    username?: string;
-    invitedByEmail?: string;
-    inviteLink?: string;
-    inviteFromIp?: string;
-    inviteFromLocation?: string;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    teamName: 'My project',
-    username: 'John Doe',
-    invitedByEmail: 'anpch@example.com',
-    inviteLink: 'https://vercel.com/teams/invite/foo',
-    inviteFromIp: '172.0.0.1',
-    inviteFromLocation: 'San Francisco, CA'
-  });
-
-  const previewText = `Join ${props.invitedByUsername} on Vercel`;
-</script>
-
-<template>
-  <ETailwind>
-    <EHtml>
-      <EHead />
-      <EPreview>{{ previewText }}</EPreview>
-      <EBody class="mx-auto my-auto bg-white font-sans">
-        <EContainer
-          class="mx-auto my-[40px] max-w-[465px] border border-[#eaeaea] rounded border-solid p-[20px] md:p-7">
-          <ESection class="mt-[32px]">
-            <EImg
-              src="/static/vercel-logo.png"
-              width="40"
-              height="37"
-              alt="Vercel"
-              class="mx-auto my-0" />
-          </ESection>
-          <Hello />
-          <EHeading
-            class="mx-0 my-[30px] p-0 text-center text-[24px] text-black font-normal">
-            Join <strong>{{ teamName }}</strong> on <strong>Vercel</strong>
-          </EHeading>
-          <EText class="text-[14px] text-black leading-[24px]">
-            Hello {{ username }},
-          </EText>
-          <EText class="text-[14px] text-black leading-[24px]">
-            <strong>bukinoshita</strong> (
-            <ELink
-              :href="`mailto:${invitedByEmail}`"
-              class="text-blue-600 no-underline">
-              {{ invitedByEmail }}
-            </ELink>
-            ) has invited you to the <strong>{{ teamName }}</strong> team on
-            <strong>Vercel</strong>.
-          </EText>
-          <ESection>
-            <ERow>
-              <EColumn align="right">
-                <EImg
-                  class="rounded-full"
-                  src="/static/vercel-user.png"
-                  width="64"
-                  height="64" />
-              </EColumn>
-              <EColumn align="center">
-                <EImg
-                  src="/static/vercel-arrow.png"
-                  width="12"
-                  height="9"
-                  alt="invited you to" />
-              </EColumn>
-              <EColumn align="left">
-                <EImg
-                  class="rounded-full"
-                  src="/static/vercel-team.png"
-                  width="64"
-                  height="64" />
-              </EColumn>
-            </ERow>
-          </ESection>
-          <ESection class="mb-[32px] mt-[32px] text-center">
-            <EButton
-              px="20"
-              py="12"
-              class="rounded bg-[#000000] text-center text-[12px] text-white font-semibold no-underline"
-              :href="inviteLink">
-              Join the team
-            </EButton>
-          </ESection>
-          <EText class="text-[14px] text-black leading-[24px]">
-            or copy and paste this URL into your browser:
-            <ELink
-              :href="inviteLink"
-              class="text-blue-600 no-underline">
-              {{ inviteLink }}
-            </ELink>
-          </EText>
-          <EHr
-            class="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />
-          <EText class="text-[12px] text-[#666666] leading-[24px]">
-            This invitation was intended for
-            <span class="text-black">{{ username }} </span>.This invite was sent
-            from <span class="text-black">{{ inviteFromIp }}</span> located in
-            <span class="text-black">{{ inviteFromLocation }}</span
-            >. If you were not expecting this invitation, you can ignore this
-            email. If you are concerned about your account's safety, please
-            reply to this email to get in touch with us.
-          </EText>
-        </EContainer>
-      </EBody>
-    </EHtml>
-  </ETailwind>
-</template>
diff --git a/apps/web-app/package.json b/apps/web-app/package.json
index 3db35e0b..0ff3dbf4 100644
--- a/apps/web-app/package.json
+++ b/apps/web-app/package.json
@@ -62,6 +62,7 @@
     "radix-vue": "^1.3.2",
     "superjson": "^2.2.1",
     "trpc-nuxt": "^0.10.17",
+    "vue-virtual-scroller": "2.0.0-beta.8",
     "zod": "^3.22.4"
   },
   "packageManager": "pnpm@8.5.1"
diff --git a/apps/web-app/pages/[orgSlug]/convo/[id].vue b/apps/web-app/pages/[orgSlug]/convo/[id].vue
index b5913978..a2a4a5e6 100644
--- a/apps/web-app/pages/[orgSlug]/convo/[id].vue
+++ b/apps/web-app/pages/[orgSlug]/convo/[id].vue
@@ -1,160 +1,434 @@
 <script setup lang="ts">
   import { useTimeAgo } from '@vueuse/core';
+  import type { ConvoParticipantEntry } from '~/composables/types';
+
   const { $trpc } = useNuxtApp();
   definePageMeta({
     layout: 'convos'
   });
 
-  const convoPublicId = useRoute().params.id as string;
-  const { data: convoDetails, pending } =
-    await $trpc.convos.getConvo.useLazyQuery({
-      convoPublicId: convoPublicId
-    });
-
-  if (!convoDetails.value?.data) navigateTo('/h/convo/404');
-  const createDate = useTimeAgo(
-    convoDetails.value?.data?.createdAt || new Date()
-  );
-  const updateDate = useTimeAgo(
-    convoDetails.value?.data?.lastUpdatedAt || new Date()
-  );
-
-  type memberEntry = {
-    avatarId: string;
-    name: string;
-    type: string;
-    color:
-      | 'red'
-      | 'pink'
-      | 'purple'
-      | 'blue'
-      | 'green'
-      | 'orange'
-      | 'yellow'
-      | 'base';
-  };
-
-  const memberArray = ref<memberEntry[]>([]);
-  if (!convoDetails.value?.data?.members) navigateTo('/h/convo/404');
-  const convoMembers = convoDetails.value?.data?.members || [];
-  for (const member of convoMembers) {
-    memberArray.value.push({
-      avatarId: member.foreignEmailIdentity?.avatarId
-        ? member.foreignEmailIdentity?.avatarId
-        : member.userGroup?.avatarId
-          ? member.userGroup?.avatarId
-          : member.userProfile?.avatarId
-            ? member.userProfile?.avatarId
-            : '',
-      name: member.foreignEmailIdentity?.senderName
-        ? member.foreignEmailIdentity?.senderName
-        : member.userGroup?.name
-          ? member.userGroup?.name
-          : member.userProfile?.firstName
-            ? member.userProfile?.firstName + ' ' + member.userProfile?.lastName
-            : '',
-      type: member.foreignEmailIdentity?.senderName
-        ? 'External'
-        : member.userGroup?.name
-          ? 'Group'
-          : 'User',
-      color: member.userGroup?.color ? member.userGroup?.color : 'base'
-    });
-  }
-
   type AttachmentEntry = {
     name: string;
     publicId: string;
     type: string;
     url: string;
   };
+
+  const convoParticiapntsCollapsed = ref(true);
+  const attachmentsCollapsed = ref(true);
+  const participantPublicId = ref('');
+  const participantArray = ref<ConvoParticipantEntry[]>([]);
+  const participantsAssignedArray = ref<ConvoParticipantEntry[]>([]);
+  const participantContributorsArray = ref<ConvoParticipantEntry[]>([]);
+  const participantCommentersArray = ref<ConvoParticipantEntry[]>([]);
+  const participantWatchersArray = ref<ConvoParticipantEntry[]>([]);
+  const participantGuestsArray = ref<ConvoParticipantEntry[]>([]);
   const attachments = ref<AttachmentEntry[]>([]);
-  if (convoDetails.value?.data?.attachments) {
-    for (const attachment of convoDetails.value?.data?.attachments) {
-      const splitFileName = attachment.fileName.split('.');
-      const newFileName =
-        splitFileName[0].substring(0, 10) +
-        '...' +
-        splitFileName[splitFileName.length - 1];
-      attachments.value.push({
-        name: newFileName,
-        publicId: attachment.publicId,
-        type: attachment.type,
-        url: attachment.storageId
-      });
+  const subjectsArray = ref<string[]>([]);
+  const createDate = ref<Date | null>(null);
+  const updateDate = ref<Date | null>(null);
+  const createdAgo = ref('');
+  const updatedAgo = ref('');
+
+  const orgSlug = useRoute().params.orgSlug as string;
+  const convoPublicId = useRoute().params.id as string;
+  const { data: convoDetails, status: convoDetailsStatus } =
+    await $trpc.convos.getConvo.useLazyQuery(
+      {
+        convoPublicId: convoPublicId
+      },
+      { server: false, queryKey: `convoDetails-${convoPublicId}` }
+    );
+
+  watch(convoDetails, () => {
+    if (convoDetailsStatus.value === 'idle') return;
+    if (convoDetailsStatus.value === 'success') {
+      if (!convoDetails.value?.data) {
+        navigateTo(`/${orgSlug}/convo/404`);
+      }
+      if (!convoDetails.value?.data?.participants) {
+        navigateTo(`/${orgSlug}/convo/404`);
+      }
+    }
+
+    createDate.value = convoDetails.value?.data?.createdAt || new Date();
+    updateDate.value =
+      convoDetails.value?.data?.lastUpdatedAt ||
+      convoDetails.value?.data?.createdAt ||
+      new Date();
+    // Ensure createDate and updateDate are always Date objects before passing to useTimeAgo
+    createdAgo.value = useTimeAgo(
+      createDate.value ? createDate.value : new Date()
+    ).value;
+    updatedAgo.value = useTimeAgo(
+      updateDate.value ? updateDate.value : new Date()
+    ).value;
+
+    const convoParticipants = convoDetails.value?.data?.participants || [];
+    for (const participant of convoParticipants) {
+      const {
+        participantPublicId,
+        participantTypePublicId,
+        avatarPublicId,
+        participantName,
+        participantType,
+        participantColor,
+        participantRole
+      } = useUtils().convos.useParticipantData(participant);
+      const participantData: ConvoParticipantEntry = {
+        participantPublicId: participantPublicId,
+        typePublicId: participantTypePublicId,
+        avatarPublicId: avatarPublicId,
+        name: participantName,
+        type: participantType,
+        role: participant.role,
+        color: participantColor
+      };
+
+      participantArray.value.push(participantData);
+      if (participant.role === 'assigned')
+        participantsAssignedArray.value.push(participantData);
+      if (participant.role === 'contributor')
+        participantContributorsArray.value.push(participantData);
+      if (participant.role === 'commenter')
+        participantCommentersArray.value.push(participantData);
+      if (participant.role === 'watcher')
+        participantWatchersArray.value.push(participantData);
+      if (participant.role === 'guest')
+        participantGuestsArray.value.push(participantData);
+    }
+
+    if (
+      convoDetails.value &&
+      convoDetails.value.data &&
+      convoDetails.value.data.attachments
+    ) {
+      for (const attachment of convoDetails.value.data.attachments) {
+        const splitFileName = attachment.fileName.split('.');
+        const newFileName =
+          splitFileName[0].substring(0, 10) +
+          '...' +
+          splitFileName[splitFileName.length - 1];
+        attachments.value.push({
+          name: newFileName,
+          publicId: attachment.publicId,
+          type: attachment.type,
+          url: attachment.storageId
+        });
+      }
     }
-  }
+    participantPublicId.value = convoDetails.value?.participantPublicId || '';
+  });
+  provide('convoParticipants', participantArray);
+  provide('participantPublicId', participantPublicId);
+
+  const findParticipant = (participantPublicId: string) => {
+    return participantArray.value.find(
+      (participant) => participant.participantPublicId === participantPublicId
+    );
+  };
 
-  // New Data
-  const editorData = ref('');
+  // // New Data
+  const editorData = ref({});
 </script>
 <template>
-  <div class="h-full max-h-full max-w-full w-full flex flex-col gap-2">
+  <div
+    class="h-full max-h-full max-w-full w-full flex flex-col gap-2 overflow-hidden">
     <div
-      class="max-w-full w-full flex flex-col justify-between gap-2 border-b-1 border-b-base-6 rounded rounded-tr-xl bg-base-3 p-4 pb-2">
-      <div class="w-full flex flex-row items-center gap-2 overflow-hidden">
-        <span class="text-sm">
-          {{
-            convoDetails?.data?.subjects.length !== 1 ? 'Subjects' : 'Subject'
-          }}:
-        </span>
-        <div class="w-full flex flex-col gap-0 overflow-hidden">
+      class="max-w-full w-full flex flex-row items-center justify-between gap-2">
+      <div class="flex flex-row gap-2">
+        <template
+          v-for="subject of convoDetails?.data?.subjects"
+          :key="subject.publicId">
           <span
-            v-for="subject of convoDetails?.data?.subjects"
-            class="truncate">
+            class="bg-gray-100 dark:bg-gray-800 truncate rounded-xl px-4 py-2 text-lg">
             {{ subject.subject }}
           </span>
-        </div>
+        </template>
+        <!-- <span>TAGS</span> -->
       </div>
+
+      <div class="h-fit flex flex-row gap-2 overflow-hidden">
+        <UnUiButton
+          icon="i-heroicons-pencil-square"
+          size="sm"
+          square
+          variant="outline" />
+        <UnUiButton
+          icon="i-ph-bell-simple-slash"
+          size="sm"
+          square
+          variant="outline" />
+        <UnUiButton
+          icon="i-ph-alarm"
+          size="sm"
+          square
+          variant="outline" />
+        <UnUiButton
+          icon="i-ph-trash"
+          size="sm"
+          square
+          variant="outline" />
+      </div>
+    </div>
+    <div
+      class="h-full max-h-full max-w-full w-full flex flex-row gap-2 overflow-hidden">
       <div
-        v-if="attachments.length > 0"
-        class="max-w-full flex flex-row flex-wrap gap-2 overflow-hidden">
-        <div v-for="attachment of attachments">
+        class="h-full max-h-full min-w-[600px] w-[600px] flex flex-col gap-2">
+        <div class="h-full max-h-full flex grow flex-col gap-0 overflow-hidden">
           <div
-            class="flex flex-row gap-1 border border-1 border-base-5 rounded bg-base-2 px-2 py-1">
-            <UnUiIcon
-              name="i-ph-paperclip"
-              size="16" />
-            <span class="truncate text-xs"> {{ attachment.name }}</span>
+            class="from-gray-100 z-20000 mb-[-12px] h-[12px] bg-gradient-to-b" />
+          <ConvosConvoMessages
+            :convo-public-id="convoPublicId"
+            :participant-public-id="convoDetails?.participantPublicId || ''" />
+          <div class="from-gray-100 mt-[-12px] h-[12px] bg-gradient-to-t" />
+        </div>
+        <div class="w-full flex flex-col justify-items-end gap-2">
+          replyingToBanner
+          <UnEditor v-model:modelValue="editorData" />
+          <div class="min-w-fit flex flex-row justify-end gap-2">
+            <UnUiButton
+              label="Send"
+              icon="ph-envelope"
+              variant="outline" />
+            <UnUiButton
+              label="Note"
+              color="orange"
+              icon="ph-note"
+              variant="outline" />
           </div>
         </div>
       </div>
-
-      <div class="w-full flex flex-row items-center justify-between gap-4">
-        <div class="min-w-fit flex flex-row items-center gap-2">
-          <div v-for="member of memberArray">
-            <UnUiAvatar
-              :avatar-id="member.avatarId"
-              :name="member.name"
-              :type="member.type"
-              :color="member.color"
-              size="sm" />
+      <div
+        class="border-gray-200 dark:border-gray-800 h-full max-w-full w-full flex flex-col justify-between gap-8 overflow-hidden border border-b-0 border-l-1 border-r-0 border-t-0 px-4 py-0">
+        <div class="max-w-full w-full flex flex-col gap-8 overflow-hidden">
+          <div class="max-w-full w-full flex flex-col gap-4 overflow-hidden">
+            <div
+              class="max-w-full w-full flex flex-row items-center justify-between overflow-hidden"
+              @click="convoParticiapntsCollapsed = !convoParticiapntsCollapsed">
+              <span
+                class="text-gray-600 dark:text-gray-400 cursor-pointer text-sm font-medium">
+                PARTICIPANTS
+              </span>
+              <UnUiButton
+                :icon="
+                  convoParticiapntsCollapsed
+                    ? 'i-heroicons-chevron-down'
+                    : 'i-heroicons-chevron-up'
+                "
+                size="2xs"
+                square
+                variant="ghost" />
+            </div>
+            <div
+              v-if="convoParticiapntsCollapsed"
+              class="max-w-full w-full flex flex-row gap-2 overflow-hidden"
+              @click="convoParticiapntsCollapsed = !convoParticiapntsCollapsed">
+              <NuxtUiAvatarGroup>
+                <template
+                  v-for="participant of participantsAssignedArray"
+                  :key="participant.participantPublicId">
+                  <ConvosConvoAvatar
+                    :participant="participant"
+                    size="sm" />
+                </template>
+                <template
+                  v-for="participant of participantContributorsArray"
+                  :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" />
+                </template>
+              </NuxtUiAvatarGroup>
+            </div>
+            <div
+              v-if="!convoParticiapntsCollapsed"
+              class="h-fit max-w-full w-full flex flex-col gap-4 overflow-hidden"
+              @click="convoParticiapntsCollapsed = !convoParticiapntsCollapsed">
+              <div
+                v-if="participantsAssignedArray.length"
+                class="max-w-full w-full flex flex-col gap-2 overflow-hidden">
+                <span class="text-gray-600 dark:text-gray-400 text-xs">
+                  ASSIGNED
+                </span>
+                <div
+                  class="max-w-full w-full flex flex-col gap-2 overflow-hidden">
+                  <template
+                    v-for="participant of participantsAssignedArray"
+                    :key="participant.participantPublicId">
+                    <div
+                      class="max-w-full w-full flex flex-row items-center gap-2 overflow-hidden">
+                      <ConvosConvoAvatar
+                        :participant="participant"
+                        size="md" />
+                      <span>{{ participant.name }}</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div
+                v-if="participantContributorsArray.length"
+                class="max-w-full w-full flex flex-col gap-2 overflow-hidden">
+                <span
+                  class="text-gray-600 dark:text-gray-400 max-w-full w-full overflow-hidden text-xs">
+                  CONTRIBUTORS
+                </span>
+                <div
+                  class="max-w-full w-full flex flex-col gap-2 overflow-hidden">
+                  <template
+                    v-for="participant of participantContributorsArray"
+                    :key="participant.participantPublicId">
+                    <div class="flex flex-row items-center gap-2">
+                      <ConvosConvoAvatar
+                        :participant="participant"
+                        size="md" />
+                      <span class="truncate">{{ participant.name }}</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div
+                v-if="participantCommentersArray.length"
+                class="flex flex-col gap-2">
+                <span class="text-gray-600 dark:text-gray-400 text-xs">
+                  COMMENTERS
+                </span>
+                <div class="flex flex-col gap-2">
+                  <template
+                    v-for="participant of participantCommentersArray"
+                    :key="participant.participantPublicId">
+                    <div class="flex flex-row items-center gap-2">
+                      <ConvosConvoAvatar
+                        :participant="participant"
+                        size="md" />
+                      <span>{{ participant.name }}</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div
+                v-if="participantWatchersArray.length"
+                class="flex flex-col gap-2">
+                <span class="text-gray-600 dark:text-gray-400 text-xs">
+                  WATCHERS
+                </span>
+                <div class="flex flex-col gap-2">
+                  <template
+                    v-for="participant of participantWatchersArray"
+                    :key="participant.participantPublicId">
+                    <div class="flex flex-row items-center gap-2">
+                      <ConvosConvoAvatar
+                        :participant="participant"
+                        size="md" />
+                      <span>{{ participant.name }}</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div
+                v-if="participantGuestsArray.length"
+                class="flex flex-col gap-2">
+                <span class="text-gray-600 dark:text-gray-400 text-xs">
+                  GUEST
+                </span>
+                <div class="flex flex-col gap-2">
+                  <template
+                    v-for="participant of participantGuestsArray"
+                    :key="participant.participantPublicId">
+                    <div class="flex flex-row items-center gap-2">
+                      <ConvosConvoAvatar
+                        :participant="participant"
+                        size="md" />
+                      <span>{{ participant.name }}</span>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="max-w-full w-full flex flex-col gap-4 overflow-hidden">
+            <div
+              class="max-w-full w-full flex flex-row items-center justify-between overflow-hidden"
+              @click="attachmentsCollapsed = !attachmentsCollapsed">
+              <span
+                class="text-gray-600 dark:text-gray-400 cursor-pointer text-sm font-medium">
+                ATTACHMENTS
+              </span>
+              <UnUiButton
+                :icon="
+                  attachmentsCollapsed
+                    ? 'i-heroicons-chevron-down'
+                    : 'i-heroicons-chevron-up'
+                "
+                size="2xs"
+                square
+                variant="ghost" />
+            </div>
+            <div
+              v-if="attachments.length && attachmentsCollapsed"
+              class="max-w-full flex flex-row flex-wrap gap-2 overflow-hidden">
+              <div
+                v-for="attachment of attachments"
+                :key="attachment.publicId">
+                <div
+                  class="flex flex-row gap-1 border border-1 border-base-5 rounded bg-base-2 px-2 py-1">
+                  <UnUiIcon
+                    name="i-ph-paperclip"
+                    size="16" />
+                  <span class="truncate text-xs"> {{ attachment.name }}</span>
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="attachments.length && !attachmentsCollapsed"
+              class="max-w-full flex flex-row flex-wrap gap-2 overflow-hidden">
+              <div
+                v-for="attachment of attachments"
+                :key="attachment.publicId">
+                <div
+                  class="flex flex-row gap-1 border border-1 border-base-5 rounded bg-base-2 px-2 py-1">
+                  <UnUiIcon
+                    name="i-ph-paperclip"
+                    size="16" />
+                  <span class="truncate text-xs"> {{ attachment.name }}</span>
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="!attachments.length"
+              class="max-w-full flex flex-row flex-wrap gap-2 overflow-hidden">
+              <span class="text-gray-500 text-xs">No attachments</span>
+            </div>
           </div>
         </div>
-        <div class="min-w-fit flex flex-col">
-          <span class="text-xs text-base-11">Started: {{ createDate }}</span>
-          <span class="text-xs text-base-11">Updated: {{ updateDate }}</span>
+
+        <div class="min-w-fit flex flex-col justify-self-end">
+          <UnUiTooltip :text="createDate?.toLocaleString()">
+            <span class="text-xs text-base-11">
+              Started: {{ createdAgo }}
+            </span>
+          </UnUiTooltip>
+          <UnUiTooltip :text="updateDate?.toLocaleString()">
+            <span class="text-xs text-base-11">
+              Updated: {{ updatedAgo }}
+            </span>
+          </UnUiTooltip>
         </div>
       </div>
     </div>
-    <div class="h-full max-h-full flex grow flex-col gap-0 overflow-hidden">
-      <div class="z-20000 mb-[-24px] h-[24px] from-base-1 bg-gradient-to-b" />
-      <convos-convo-messages :convo-public-id="convoPublicId" />
-      <div class="mt-[-24px] h-[24px] from-base-1 bg-gradient-to-t" />
-    </div>
-    <div class="max-h-[350px] w-full flex flex-row justify-items-end gap-2">
-      <UnEditor v-model:modelValue="editorData" />
-      <div class="min-w-fit flex flex-col justify-end gap-2">
-        <UnUiButton
-          label="Send"
-          icon="ph-envelope"
-          variant="outline" />
-        <UnUiButton
-          label="Note"
-          color="orange"
-          icon="ph-note"
-          variant="outline" />
-      </div>
-    </div>
   </div>
 </template>
diff --git a/apps/web-app/pages/[orgSlug]/convo/new.vue b/apps/web-app/pages/[orgSlug]/convo/new.vue
index 22cefe75..048245d0 100644
--- a/apps/web-app/pages/[orgSlug]/convo/new.vue
+++ b/apps/web-app/pages/[orgSlug]/convo/new.vue
@@ -419,7 +419,7 @@
             publicId: firstParticipantPublicId
           };
     const createNewConvoTrpc = $trpc.convos.createNewConvo.useMutation();
-    await createNewConvoTrpc.mutate({
+    const createNewConvo = await createNewConvoTrpc.mutate({
       firstMessageType: type,
       to: convoToValue,
       participantsOrgMembersPublicIds: convoParticipantsOrgMembersPublicIds,
@@ -431,20 +431,27 @@
       message: stringify(messageEditorData.value)
     });
 
-    if (createNewConvoTrpc.error) {
+    if (createNewConvoTrpc.status.value === 'error') {
       actionLoading.value = false;
-    } else {
       toast.add({
-        title: 'Conversation created',
-        icon: 'i-ph-thumbs-up',
+        id: 'create_new_convo_fail',
+        title: 'Conversation creation failed',
+        description: `Conversation could not be created.`,
+        color: 'red',
+        icon: 'i-ph-warning-circle',
         timeout: 5000
       });
-      setTimeout(() => {
-        navigateTo(
-          `/${orgSlug}/convo/${createNewConvoTrpc.data.value?.publicId}`
-        );
-      }, 1500);
+      return;
     }
+    toast.add({
+      title: 'Conversation created',
+      description: `Redirecting to new conversation...`,
+      icon: 'i-ph-thumbs-up',
+      timeout: 5000
+    });
+    setTimeout(() => {
+      navigateTo(`/${orgSlug}/convo/${createNewConvo?.publicId}`);
+    }, 1500);
   }
 </script>
 <template>
@@ -540,7 +547,7 @@
                         :avatar-id="participant.avatarId?.toString()"
                         :type="'group'"
                         :alt="participant.name.toString()"
-                        :color="participant.color?.toString()"
+                        :color="participant.color as UiColor"
                         size="xs" />
                       <span>
                         {{ participant.name }}
diff --git a/apps/web-app/plugins/ virtualScroller.ts b/apps/web-app/plugins/ virtualScroller.ts
new file mode 100644
index 00000000..e98ad5a4
--- /dev/null
+++ b/apps/web-app/plugins/ virtualScroller.ts	
@@ -0,0 +1,12 @@
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+import {
+  DynamicScroller,
+  DynamicScrollerItem,
+  RecycleScroller
+} from 'vue-virtual-scroller';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('RecycleScroller', RecycleScroller);
+  nuxtApp.vueApp.component('DynamicScroller', DynamicScroller);
+  nuxtApp.vueApp.component('DynamicScrollerItem', DynamicScrollerItem);
+});
diff --git a/apps/web-app/plugins/trpcClient.ts b/apps/web-app/plugins/trpcClient.ts
index 215f0c15..6906a6ca 100644
--- a/apps/web-app/plugins/trpcClient.ts
+++ b/apps/web-app/plugins/trpcClient.ts
@@ -18,7 +18,7 @@ export const errorHandler: TRPCLink<TrpcWebAppRouter> = () => {
             err.message ===
               'You are not a member of this organization, redirecting...'
           ) {
-            navigateTo('/login');
+            navigateTo('/redirect');
             return;
           }
 
diff --git a/apps/web-app/server/trpc/index.ts b/apps/web-app/server/trpc/index.ts
index 8cda4b36..e61147b7 100644
--- a/apps/web-app/server/trpc/index.ts
+++ b/apps/web-app/server/trpc/index.ts
@@ -46,10 +46,6 @@ const trpcWebAppOrgRouter = router({
   mail: trpcWebAppOrgMailRouter
 });
 
-const trpcWebAppConvoRouter = router({
-  convos: convoRouter
-});
-
 export const trpcWebAppRouter = router({
   signup: signupRouter,
   auth: authRouter,
diff --git a/apps/web-app/server/trpc/routers/convoRouter/convoRouter.ts b/apps/web-app/server/trpc/routers/convoRouter/convoRouter.ts
index 03149604..71af297d 100644
--- a/apps/web-app/server/trpc/routers/convoRouter/convoRouter.ts
+++ b/apps/web-app/server/trpc/routers/convoRouter/convoRouter.ts
@@ -1,7 +1,15 @@
 import { z } from 'zod';
 import { parse } from 'superjson';
 import { router, orgProcedure } from '../../trpc';
-import { type InferInsertModel, and, eq, inArray } from '@uninbox/database/orm';
+import {
+  type InferInsertModel,
+  and,
+  eq,
+  inArray,
+  desc,
+  or,
+  lt
+} from '@uninbox/database/orm';
 import {
   convos,
   convoParticipants,
@@ -12,29 +20,37 @@ import {
   contacts,
   contactGlobalReputations,
   convoEntries,
-  emailIdentitiesAuthorizedUsers
+  emailIdentitiesAuthorizedUsers,
+  userGroupMembers
 } from '@uninbox/database/schema';
-import { nanoId, nanoIdLength, nanoIdToken } from '@uninbox/utils';
+import {
+  nanoId,
+  nanoIdLength,
+  nanoIdSchema,
+  nanoIdToken
+} from '@uninbox/utils';
 import { TRPCError } from '@trpc/server';
 import type { JSONContent } from '@tiptap/vue-3';
 import { generateText } from '@tiptap/core';
 import { generateHTML } from '@tiptap/html';
 import { tipTapExtensions } from '~/shared/editorConfig';
+import { convoEntryRouter } from './entryRouter';
 
 export const convoRouter = router({
+  entries: convoEntryRouter,
   createNewConvo: orgProcedure
     .input(
       z.object({
         participantsOrgMembersPublicIds: z.array(
           z.string().min(3).max(nanoIdLength)
         ),
-        participantsGroupsPublicIds: z
-          .array(z.string().min(3).max(nanoIdLength))
-          .optional(),
-        participantsContactsPublicIds: z
-          .array(z.string().min(3).max(nanoIdLength))
-          .optional(),
-        participantsEmails: z.array(z.string()).optional(),
+        participantsGroupsPublicIds: z.array(
+          z.string().min(3).max(nanoIdLength)
+        ),
+        participantsContactsPublicIds: z.array(
+          z.string().min(3).max(nanoIdLength)
+        ),
+        participantsEmails: z.array(z.string()),
         sendAsEmailIdentityPublicId: z
           .string()
           .min(3)
@@ -217,7 +233,7 @@ export const convoRouter = router({
         }
       }
       let newConvoToEmailAddress: string;
-      if (participantsContactsPublicIds || participantsEmails) {
+      if (participantsContactsPublicIds.length || participantsEmails.length) {
         newConvoToEmailAddress = await getConvoToAddress();
       } else {
         newConvoToEmailAddress = '';
@@ -367,7 +383,8 @@ export const convoRouter = router({
       const newConvoPublicId = nanoId();
       const insertConvoResponse = await db.insert(convos).values({
         publicId: newConvoPublicId,
-        orgId: orgId
+        orgId: orgId,
+        lastUpdatedAt: new Date()
       });
 
       // create conversationSubject entry
@@ -381,12 +398,12 @@ export const convoRouter = router({
 
       // create conversationParticipants Entries
       if (orgMemberIds.length) {
-        const convoMembersDbInsertValuesArray: InferInsertModel<
+        const convoParticipantsDbInsertValuesArray: InferInsertModel<
           typeof convoParticipants
         >[] = [];
         orgMemberIds.forEach((orgMemberId) => {
           const convoMemberPublicId = nanoId();
-          convoMembersDbInsertValuesArray.push({
+          convoParticipantsDbInsertValuesArray.push({
             orgId: orgId,
             convoId: +insertConvoResponse.insertId,
             publicId: convoMemberPublicId,
@@ -395,16 +412,16 @@ export const convoRouter = router({
         });
         await db
           .insert(convoParticipants)
-          .values(convoMembersDbInsertValuesArray);
+          .values(convoParticipantsDbInsertValuesArray);
       }
 
       if (orgGroupIds.length) {
-        const convoMembersDbInsertValuesArray: InferInsertModel<
+        const convoParticipantsDbInsertValuesArray: InferInsertModel<
           typeof convoParticipants
         >[] = [];
         orgGroupIds.forEach((groupId) => {
           const convoMemberPublicId = nanoId();
-          convoMembersDbInsertValuesArray.push({
+          convoParticipantsDbInsertValuesArray.push({
             orgId: orgId,
             convoId: +insertConvoResponse.insertId,
             publicId: convoMemberPublicId,
@@ -413,16 +430,16 @@ export const convoRouter = router({
         });
         await db
           .insert(convoParticipants)
-          .values(convoMembersDbInsertValuesArray);
+          .values(convoParticipantsDbInsertValuesArray);
       }
 
       if (orgContactIds.length) {
-        const convoMembersDbInsertValuesArray: InferInsertModel<
+        const convoParticipantsDbInsertValuesArray: InferInsertModel<
           typeof convoParticipants
         >[] = [];
         orgContactIds.forEach((contactId) => {
           const convoMemberPublicId = nanoId();
-          convoMembersDbInsertValuesArray.push({
+          convoParticipantsDbInsertValuesArray.push({
             orgId: orgId,
             convoId: +insertConvoResponse.insertId,
             publicId: convoMemberPublicId,
@@ -431,7 +448,7 @@ export const convoRouter = router({
         });
         await db
           .insert(convoParticipants)
-          .values(convoMembersDbInsertValuesArray);
+          .values(convoParticipantsDbInsertValuesArray);
       }
       const authorConvoParticipantPublicId = nanoId();
       const insertAuthorConvoParticipantResponse = await db
@@ -620,286 +637,398 @@ export const convoRouter = router({
         publicId: newConvoPublicId,
         missingEmailIdentities: missingEmailIdentitiesWarnings
       };
+    }),
+
+  //* get a specific conversation
+  getConvo: orgProcedure
+    .input(
+      z.object({
+        convoPublicId: nanoIdSchema
+      })
+    )
+    .query(async ({ ctx, input }) => {
+      const { db, user, org } = ctx;
+
+      if (!ctx.user || !ctx.org) {
+        throw new TRPCError({
+          code: 'UNPROCESSABLE_CONTENT',
+          message: 'User or Organization is not defined'
+        });
+      }
+      if (!org?.memberId) {
+        throw new TRPCError({
+          code: 'UNPROCESSABLE_CONTENT',
+          message: 'User is not a member of the organization'
+        });
+      }
+
+      const userId = user.id;
+      const orgId = org.id;
+      const userOrgMemberId = org.memberId;
+
+      const { convoPublicId } = input;
+
+      // check if the conversation belongs to the same org, early return if not before multiple db selects
+      const convoResponse = await db.query.convos.findFirst({
+        where: eq(convos.publicId, convoPublicId),
+        columns: {
+          id: true,
+          orgId: true
+        }
+      });
+      if (!convoResponse) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Conversation not found'
+        });
+      }
+      if (Number(convoResponse.orgId) !== orgId) {
+        const convoOrgOwnerMembersIds = await db.query.orgMembers.findMany({
+          where: eq(orgMembers.orgId, convoResponse.orgId),
+          columns: {
+            userId: true
+          },
+          with: {
+            org: {
+              columns: {
+                name: true
+              }
+            }
+          }
+        });
+        const convoOrgOwnerUserIds = convoOrgOwnerMembersIds.map((member) =>
+          Number(member?.userId ?? 0)
+        );
+        if (!convoOrgOwnerUserIds.includes(userId)) {
+          throw new TRPCError({
+            code: 'NOT_FOUND',
+            message: 'Conversation not found'
+          });
+        }
+        throw new TRPCError({
+          code: 'UNAUTHORIZED',
+          message: `Conversation is owned by ${convoOrgOwnerMembersIds[0].org.name} organization.`
+        });
+      }
+
+      // TODO: Add filtering for org based on input.filterOrgPublicId
+      const convoDetails = await db.query.convos.findFirst({
+        columns: {
+          publicId: true,
+          lastUpdatedAt: true,
+          createdAt: true
+        },
+        where: eq(convos.id, convoResponse.id),
+        with: {
+          subjects: {
+            columns: {
+              publicId: true,
+              subject: true
+            }
+          },
+          participants: {
+            columns: {
+              publicId: true,
+              orgMemberId: true,
+              userGroupId: true,
+              contactId: true,
+              lastReadAt: true,
+              notifications: true,
+              active: true,
+              role: true
+            },
+            with: {
+              orgMember: {
+                columns: {
+                  id: true,
+                  publicId: true
+                },
+                with: {
+                  profile: {
+                    columns: {
+                      avatarId: true,
+                      firstName: true,
+                      lastName: true,
+                      publicId: true,
+                      handle: true,
+                      title: true
+                    }
+                  }
+                }
+              },
+              userGroup: {
+                columns: {
+                  avatarId: true,
+                  id: true,
+                  name: true,
+                  color: true,
+                  publicId: true,
+                  description: true
+                },
+                with: {
+                  members: {
+                    columns: {
+                      orgMemberId: true
+                    }
+                  }
+                }
+              },
+              contact: {
+                columns: {
+                  avatarId: true,
+                  publicId: true,
+                  name: true,
+                  emailUsername: true,
+                  emailDomain: true,
+                  setName: true,
+                  signature: true
+                }
+              }
+            }
+          },
+          attachments: {
+            columns: {
+              publicId: true,
+              fileName: true,
+              type: true,
+              storageId: true
+            }
+          }
+        }
+      });
+      if (!convoDetails) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Conversation not found'
+        });
+      }
+
+      // Find the participant.publicId for the userOrgMemberId
+      let participantPublicId: string | undefined;
+
+      // Check if the user's orgMemberId is in the conversation participants
+      convoDetails?.participants.forEach((participant) => {
+        if (participant.orgMember?.id === userOrgMemberId) {
+          participantPublicId = participant.publicId;
+        }
+      });
+
+      // If not found, check if the user's orgMemberId is in any participant's userGroup members
+      if (!participantPublicId) {
+        convoDetails?.participants.forEach((participant) => {
+          participant.userGroup?.members.forEach((groupMember) => {
+            if (groupMember.orgMemberId === userOrgMemberId) {
+              participantPublicId = participant.publicId;
+            }
+          });
+        });
+      }
+
+      // If participantPublicId is still not found, the user is not a participant of this conversation
+      if (!participantPublicId) {
+        throw new TRPCError({
+          code: 'UNAUTHORIZED',
+          message: 'You are not a participant of this conversation'
+        });
+      }
+
+      // strip the user IDs from the response
+      convoDetails.participants.forEach((participant) => {
+        if (participant.orgMember?.id) participant.orgMember.id = 0;
+        participant.userGroup?.members.forEach((groupMember) => {
+          if (groupMember.orgMemberId) groupMember.orgMemberId = 0;
+        });
+      });
+      return {
+        data: convoDetails,
+        participantPublicId: participantPublicId
+      };
+    }),
+
+  //* get convo entries
+  getConvoEntries: orgProcedure
+    .input(
+      z.object({
+        convoPublicId: nanoIdSchema,
+        cursorLastUpdatedAt: z.date().optional(),
+        cursorLastPublicId: z.string().min(3).max(nanoIdLength).optional()
+      })
+    )
+    .query(async ({ ctx, input }) => {}),
+
+  getUserConvos: orgProcedure
+    .input(
+      z.object({
+        cursorLastUpdatedAt: z.date().optional(),
+        cursorLastPublicId: z.string().min(3).max(nanoIdLength).optional()
+      })
+    )
+    .query(async ({ ctx, input }) => {
+      const { db, user, org } = ctx;
+      const { cursorLastUpdatedAt, cursorLastPublicId } = input;
+
+      const userId = user.id;
+      const orgId = org.id;
+      const orgMemberId = org.memberId;
+
+      const inputLastUpdatedAt = cursorLastUpdatedAt
+        ? new Date(cursorLastUpdatedAt)
+        : new Date();
+
+      console.log('🔥', { inputLastUpdatedAt });
+      const inputLastPublicId = cursorLastPublicId || '';
+
+      const convoQuery = await db.query.convos.findMany({
+        orderBy: [desc(convos.lastUpdatedAt), desc(convos.publicId)],
+        limit: 15,
+        columns: {
+          publicId: true,
+          lastUpdatedAt: true
+        },
+        where: and(
+          or(
+            and(
+              eq(convos.lastUpdatedAt, inputLastUpdatedAt),
+              lt(convos.publicId, inputLastPublicId)
+            ),
+            lt(convos.lastUpdatedAt, inputLastUpdatedAt)
+          ),
+          inArray(
+            convos.id,
+            db
+              .select({ id: convoParticipants.convoId })
+              .from(convoParticipants)
+              .where(
+                or(
+                  eq(convoParticipants.orgMemberId, orgMemberId),
+                  inArray(
+                    convoParticipants.userGroupId,
+                    db
+                      .select({ id: userGroupMembers.groupId })
+                      .from(userGroupMembers)
+                      .where(eq(userGroupMembers.orgMemberId, orgMemberId))
+                  )
+                )
+              )
+          )
+        ),
+        with: {
+          subjects: {
+            columns: {
+              subject: true
+            }
+          },
+          participants: {
+            columns: {
+              role: true,
+              publicId: true
+            },
+            with: {
+              orgMember: {
+                columns: { publicId: true },
+                with: {
+                  profile: {
+                    columns: {
+                      publicId: true,
+                      firstName: true,
+                      lastName: true,
+                      avatarId: true,
+                      handle: true
+                    }
+                  }
+                }
+              },
+              userGroup: {
+                columns: {
+                  publicId: true,
+                  name: true,
+                  color: true,
+                  avatarId: true
+                }
+              },
+              contact: {
+                columns: {
+                  publicId: true,
+                  name: true,
+                  avatarId: true,
+                  setName: true,
+                  emailUsername: true,
+                  emailDomain: true,
+                  type: true
+                }
+              }
+            }
+          },
+          entries: {
+            orderBy: [desc(convoEntries.createdAt)],
+            limit: 1,
+            columns: {
+              bodyPlainText: true,
+              type: true
+            },
+            with: {
+              author: {
+                columns: {},
+                with: {
+                  orgMember: {
+                    columns: {
+                      publicId: true
+                    },
+                    with: {
+                      profile: {
+                        columns: {
+                          publicId: true,
+                          firstName: true,
+                          lastName: true,
+                          avatarId: true,
+                          handle: true
+                        }
+                      }
+                    }
+                  },
+                  userGroup: {
+                    columns: {
+                      publicId: true,
+                      name: true,
+                      color: true,
+                      avatarId: true
+                    }
+                  },
+                  contact: {
+                    columns: {
+                      publicId: true,
+                      name: true,
+                      avatarId: true,
+                      setName: true,
+                      emailUsername: true,
+                      emailDomain: true,
+                      type: true
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      });
+
+      if (!convoQuery.length) {
+        return {
+          data: [],
+          cursor: null
+        };
+      }
+
+      const newCursorLastUpdatedAt =
+        convoQuery[convoQuery.length - 1].lastUpdatedAt;
+      const newCursorLastPublicId = convoQuery[convoQuery.length - 1].publicId;
+
+      return {
+        data: convoQuery,
+        cursor: {
+          lastUpdatedAt: newCursorLastUpdatedAt,
+          lastPublicId: newCursorLastPublicId
+        }
+      };
     })
-  // getUserConvos: orgProcedure
-  //   .input(
-  //     z.object({
-  //       cursorLastUpdatedAt: z.date().optional(),
-  //       cursorLastPublicId: z.string().min(3).max(nanoIdLength).optional()
-  //     })
-  //   )
-  //   .query(async ({ ctx, input }) => {
-  //     const { db, user, org } = ctx;
-  //     const { cursorLastUpdatedAt, cursorLastPublicId } = input;
-  //     const userId = user?.id || 0;
-  //     const orgId = org?.id || 0;
-  //     const inputLastUpdatedAt = cursorLastUpdatedAt
-  //       ? new Date(cursorLastUpdatedAt)
-  //       : new Date();
-  //     const inputLastPublicId = cursorLastPublicId || '';
-  //     // TODO: Add filtering for org based on input.filterOrgPublicId
-  //     const convoQuery = await db.query.convos.findMany({
-  //       orderBy: [desc(convos.lastUpdatedAt), desc(convos.publicId)],
-  //       limit: 15,
-  //       columns: {
-  //         publicId: true,
-  //         lastUpdatedAt: true
-  //       },
-  //       where: and(
-  //         or(
-  //           and(
-  //             eq(convos.lastUpdatedAt, inputLastUpdatedAt),
-  //             lt(convos.publicId, inputLastPublicId)
-  //           ),
-  //           lt(convos.lastUpdatedAt, inputLastUpdatedAt)
-  //         ),
-  //         inArray(
-  //           convos.id,
-  //           db
-  //             .select({ id: convoParticipants.convoId })
-  //             .from(convoParticipants)
-  //             .where(
-  //               or(
-  //                 eq(convoParticipants.userId, userId),
-  //                 inArray(
-  //                   convoParticipants.userGroupId,
-  //                   db
-  //                     .select({ id: userGroupMembers.groupId })
-  //                     .from(userGroupMembers)
-  //                     .where(eq(userGroupMembers.userId, userId))
-  //                 )
-  //               )
-  //             )
-  //         )
-  //       ),
-  //       with: {
-  //         org: {
-  //           columns: {
-  //             publicId: true,
-  //             name: true,
-  //             avatarId: true
-  //           }
-  //         },
-  //         subjects: {
-  //           columns: {
-  //             subject: true
-  //           }
-  //         },
-  //         members: {
-  //           with: {
-  //             orgMember: {
-  //               with: {
-  //                 profile: {
-  //                   columns: {
-  //                     firstName: true,
-  //                     lastName: true,
-  //                     avatarId: true,
-  //                     handle: true
-  //                   }
-  //                 }
-  //               }
-  //             },
-  //             userGroup: {
-  //               columns: {
-  //                 name: true,
-  //                 color: true,
-  //                 avatarId: true
-  //               }
-  //             },
-  //             foreignEmailIdentity: {
-  //               columns: {
-  //                 senderName: true,
-  //                 avatarId: true,
-  //                 username: true,
-  //                 rootDomain: true
-  //               }
-  //             }
-  //           },
-  //           columns: {
-  //             id: true,
-  //             orgMemberId: true,
-  //             userGroupId: true,
-  //             foreignEmailIdentityId: true,
-  //             role: true
-  //           }
-  //         },
-  //         messages: {
-  //           orderBy: [desc(convoMessages.createdAt)],
-  //           limit: 1,
-  //           columns: {
-  //             body: true
-  //           },
-  //           with: {
-  //             author: {
-  //               with: {
-  //                 orgMember: {
-  //                   with: {
-  //                     profile: {
-  //                       columns: {
-  //                         firstName: true,
-  //                         lastName: true,
-  //                         avatarId: true,
-  //                         handle: true
-  //                       }
-  //                     }
-  //                   }
-  //                 },
-  //                 userGroup: {
-  //                   columns: {
-  //                     name: true,
-  //                     color: true,
-  //                     avatarId: true
-  //                   }
-  //                 },
-  //                 foreignEmailIdentity: {
-  //                   columns: {
-  //                     senderName: true,
-  //                     avatarId: true
-  //                   }
-  //                 }
-  //               }
-  //             }
-  //           }
-  //         }
-  //       }
-  //     });
-  //     const newCursorLastUpdatedAt =
-  //       convoQuery[convoQuery.length - 1].lastUpdatedAt;
-  //     const newCursorLastPublicId = convoQuery[convoQuery.length - 1].publicId;
-  //     return {
-  //       data: convoQuery,
-  //       cursor: {
-  //         lastUpdatedAt: newCursorLastUpdatedAt,
-  //         lastPublicId: newCursorLastPublicId
-  //       }
-  //     };
-  //   }),
-  // getConvo: orgProcedure
-  //   .input(
-  //     z.object({
-  //       convoPublicId: z.string().min(3).max(nanoIdLength)
-  //     })
-  //   )
-  //   .query(async ({ ctx, input }) => {
-  //     const { db, user, org } = ctx;
-  //     const { convoPublicId } = input;
-  //     const userId = user?.id || 0;
-  //     const orgId = org?.id || 0;
-  //     // TODO: Add filtering for org based on input.filterOrgPublicId
-  //     const convoDetails = await db.query.convos.findFirst({
-  //       columns: {
-  //         publicId: true,
-  //         lastUpdatedAt: true,
-  //         createdAt: true
-  //       },
-  //       where: eq(convos.publicId, convoPublicId),
-  //       with: {
-  //         org: {
-  //           columns: {
-  //             publicId: true,
-  //             name: true,
-  //             avatarId: true
-  //           }
-  //         },
-  //         subjects: {
-  //           columns: {
-  //             subject: true
-  //           }
-  //         },
-  //         members: {
-  //           with: {
-  //             orgMember: {
-  //               with: {
-  //                 profile: {
-  //                   columns: {
-  //                     userId: true,
-  //                     firstName: true,
-  //                     lastName: true,
-  //                     avatarId: true,
-  //                     publicId: true,
-  //                     handle: true
-  //                   }
-  //                 }
-  //               }
-  //             },
-  //             userGroup: {
-  //               columns: {
-  //                 name: true,
-  //                 color: true,
-  //                 avatarId: true,
-  //                 publicId: true
-  //               },
-  //               with: {
-  //                 members: {
-  //                   columns: {
-  //                     userId: true
-  //                   }
-  //                 }
-  //               }
-  //             },
-  //             foreignEmailIdentity: {
-  //               columns: {
-  //                 senderName: true,
-  //                 avatarId: true,
-  //                 username: true,
-  //                 rootDomain: true,
-  //                 publicId: true
-  //               }
-  //             }
-  //           },
-  //           columns: {
-  //             orgMemberId: true,
-  //             userGroupId: true,
-  //             foreignEmailIdentityId: true,
-  //             role: true
-  //           }
-  //         },
-  //         attachments: {
-  //           columns: {
-  //             publicId: true,
-  //             fileName: true,
-  //             type: true,
-  //             storageId: true
-  //           }
-  //         }
-  //       }
-  //     });
-  //     if (!convoDetails) {
-  //       console.log('Convo not found');
-  //       return {
-  //         data: null
-  //       };
-  //     }
-  //     //Check if the user is in the conversation
-  //     const convoParticipantsUserIds: number[] = [];
-  //     convoDetails?.members.forEach((member) => {
-  //       member.orgMember?.userId &&
-  //         convoParticipantsUserIds.push(member.orgMember?.userId);
-  //       member.orgMember?.profile?.userId &&
-  //         convoParticipantsUserIds.push(member.orgMember?.profile.userId);
-  //       member.userGroup?.members.forEach((groupMember) => {
-  //         groupMember.userId &&
-  //           convoParticipantsUserIds.push(groupMember.userId);
-  //       });
-  //     });
-  //     if (!convoParticipantsUserIds.includes(+userId)) {
-  //       console.log('User not in convo');
-  //       console.log({ userId, convoParticipantsUserIds });
-  //       return {
-  //         data: null
-  //       };
-  //     }
-  //     // strip the user IDs from the response
-  //     convoDetails.members.forEach((member) => {
-  //       if (member.orgMember?.userId) member.orgMember.userId = 0;
-  //       if (member.orgMember?.profile?.userId)
-  //         member.orgMember.profile.userId = 0;
-  //       member.userGroup?.members.forEach((groupMember) => {
-  //         if (groupMember.userId) groupMember.userId = 0;
-  //       });
-  //     });
-  //     return {
-  //       data: convoDetails
-  //     };
-  //   }),
 });
diff --git a/apps/web-app/server/trpc/routers/convoRouter/entryRouter.ts b/apps/web-app/server/trpc/routers/convoRouter/entryRouter.ts
new file mode 100644
index 00000000..a9ed878e
--- /dev/null
+++ b/apps/web-app/server/trpc/routers/convoRouter/entryRouter.ts
@@ -0,0 +1,167 @@
+import { z } from 'zod';
+import { router, orgProcedure, limitedProcedure } from '../../trpc';
+import { and, desc, eq, inArray, lt, or } from '@uninbox/database/orm';
+import { convos, convoEntries } from '@uninbox/database/schema';
+import {
+  nanoId,
+  nanoIdLength,
+  nanoIdToken,
+  nanoIdSchema
+} from '@uninbox/utils';
+import { TRPCError } from '@trpc/server';
+
+export const convoEntryRouter = router({
+  getConvoEntries: orgProcedure
+    .input(
+      z.object({
+        convoPublicId: nanoIdSchema,
+        cursorLastCreatedAt: z.date().optional(),
+        cursorLastPublicId: nanoIdSchema.optional()
+      })
+    )
+    .query(async ({ ctx, input }) => {
+      const { db, user, org } = ctx;
+
+      if (!ctx.user || !ctx.org) {
+        throw new TRPCError({
+          code: 'UNPROCESSABLE_CONTENT',
+          message: 'User or Organization is not defined'
+        });
+      }
+      if (!org?.memberId) {
+        throw new TRPCError({
+          code: 'UNPROCESSABLE_CONTENT',
+          message: 'User is not a member of the organization'
+        });
+      }
+
+      const userId = user.id;
+      const orgId = org.id;
+      const userOrgMemberId = org.memberId;
+
+      const { convoPublicId, cursorLastCreatedAt, cursorLastPublicId } = input;
+      const inputLastCreatedAt = cursorLastCreatedAt
+        ? new Date(cursorLastCreatedAt)
+        : new Date();
+      const inputLastPublicId = cursorLastPublicId || '';
+
+      // check if the conversation belongs to the same org, early return if not before multiple db selects
+      const convoResponse = await db.query.convos.findFirst({
+        where: and(eq(convos.publicId, convoPublicId), eq(convos.orgId, orgId)),
+        columns: {
+          id: true
+        }
+      });
+      if (!convoResponse) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Conversation not found or not in this organization'
+        });
+      }
+
+      // TODO: Add filtering for org based on input.filterOrgPublicId
+      const convoDetails = await db.query.convos.findFirst({
+        columns: {
+          id: true
+        },
+        where: eq(convos.id, convoResponse.id),
+        with: {
+          participants: {
+            columns: {
+              id: true
+            },
+            with: {
+              orgMember: {
+                columns: {
+                  id: true
+                }
+              },
+              userGroup: {
+                columns: {
+                  id: true
+                },
+                with: {
+                  members: {
+                    columns: {
+                      orgMemberId: true
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      });
+      if (!convoDetails) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Conversation not found'
+        });
+      }
+
+      //Check if the user's orgMemberId is in the conversation
+      const convoParticipantsOrgMemberIds: number[] = [];
+      convoDetails?.participants.forEach((participant) => {
+        participant.orgMember?.id &&
+          convoParticipantsOrgMemberIds.push(participant.orgMember?.id);
+        participant.userGroup?.members.forEach((groupMember) => {
+          groupMember.orgMemberId &&
+            convoParticipantsOrgMemberIds.push(groupMember.orgMemberId);
+        });
+      });
+
+      if (!convoParticipantsOrgMemberIds.includes(userOrgMemberId)) {
+        throw new TRPCError({
+          code: 'UNAUTHORIZED',
+          message: 'You are not a participant of this conversation'
+        });
+      }
+
+      // get the entries
+      const convoEntriesQuery = await db.query.convoEntries.findMany({
+        where: and(
+          or(
+            and(
+              eq(convoEntries.createdAt, inputLastCreatedAt),
+              lt(convoEntries.publicId, inputLastPublicId)
+            ),
+            lt(convoEntries.createdAt, inputLastCreatedAt)
+          ),
+          eq(convoEntries.convoId, convoDetails.id)
+        ),
+        orderBy: [desc(convoEntries.createdAt), desc(convoEntries.publicId)],
+        limit: 15,
+        columns: {
+          publicId: true,
+          createdAt: true,
+          body: true,
+          type: true
+        },
+        with: {
+          subject: {
+            columns: {
+              publicId: true,
+              subject: true
+            }
+          },
+          attachments: {
+            columns: {
+              publicId: true,
+              fileName: true,
+              type: true,
+              storageId: true
+            }
+          },
+          author: {
+            columns: {
+              publicId: true
+            }
+          }
+        }
+      });
+
+      return {
+        entries: convoEntriesQuery
+      };
+    })
+});
diff --git a/apps/web-app/server/trpc/routers/convoRouter/messageRouter.ts b/apps/web-app/server/trpc/routers/convoRouter/messageRouter.ts
deleted file mode 100644
index 20f616da..00000000
--- a/apps/web-app/server/trpc/routers/convoRouter/messageRouter.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { z } from 'zod';
-import { router, orgProcedure, limitedProcedure } from '../../trpc';
-import { and, desc, eq, inArray, lt, or } from '@uninbox/database/orm';
-import {
-  convos,
-  convoMembers,
-  convoSubjects,
-  userProfiles,
-  foreignEmailIdentities,
-  userGroups,
-  userGroupMembers,
-  convoMessages
-} from '@uninbox/database/schema';
-import { nanoId, nanoIdLength, nanoIdToken, nanoIdSchema } from '@uninbox/utils';
-
-export const messageRouter = router({
-  getConvoMessages: orgProcedure
-    .input(
-      z.object({
-        convoPublicId: nanoIdSchema,
-        cursorLastCreatedAt: z.date().optional(),
-        cursorLastPublicId: nanoIdSchema.optional()
-      })
-    )
-    .query(async ({ ctx, input }) => {
-      if (!ctx.user || !ctx.org) {
-        throw new TRPCError({
-          code: 'UNPROCESSABLE_CONTENT',
-          message: 'User or Organization is not defined'
-        });
-      }
-      const { db, user, org } = ctx;
-      const userId = +user?.id;
-      const orgId = +org?.id;
-      const { convoPublicId, cursorLastCreatedAt, cursorLastPublicId } = input;
-
-      const inputLastCreatedAt = cursorLastCreatedAt
-        ? new Date(cursorLastCreatedAt)
-        : new Date();
-      const inputLastPublicId = cursorLastPublicId || '';
-
-      // TODO: Find a better way to do this
-      // Verify the user is in the convo
-      const convoDetails = await db.query.convos.findFirst({
-        where: eq(convos.publicId, convoPublicId),
-        columns: {
-          id: true
-        },
-        with: {
-          members: {
-            with: {
-              userProfile: {
-                columns: {
-                  userId: true,
-                  firstName: true,
-                  lastName: true,
-                  publicId: true,
-                  handle: true
-                }
-              },
-              userGroup: {
-                columns: {
-                  name: true,
-                  color: true,
-                  publicId: true
-                },
-                with: {
-                  members: {
-                    columns: {
-                      userId: true
-                    }
-                  }
-                }
-              },
-              foreignEmailIdentity: {
-                columns: {
-                  senderName: true,
-                  username: true,
-                  rootDomain: true,
-                  publicId: true
-                }
-              }
-            },
-            columns: {
-              userId: true,
-              userGroupId: true,
-              foreignEmailIdentityId: true,
-              role: true
-            }
-          }
-        }
-      });
-
-      if (!convoDetails) {
-        console.log('Convo not found');
-        return {
-          error: 'Convo not found'
-        };
-      }
-      //Check if the user is in the conversation
-      const convoMembersUserIds: number[] = [];
-      convoDetails?.members.forEach((member) => {
-        member.userId && convoMembersUserIds.push(member.userId);
-        member.userProfile?.userId &&
-          convoMembersUserIds.push(member.userProfile.userId);
-        member.userGroup?.members.forEach((groupMember) => {
-          groupMember.userId && convoMembersUserIds.push(groupMember.userId);
-        });
-      });
-
-      if (!convoMembersUserIds.includes(+userId)) {
-        console.log('User not in convo');
-        console.log({ userId, convoMembersUserIds });
-        return {
-          error: 'User not in convo'
-        };
-      }
-
-      const convoMessagesReturn = await db.query.convoMessages.findMany({
-        orderBy: [desc(convoMessages.createdAt), desc(convoMessages.publicId)],
-        limit: 15,
-        columns: {
-          publicId: true,
-          createdAt: true,
-          author: true,
-          body: true
-        },
-        where: and(
-          or(
-            and(
-              eq(convoMessages.createdAt, inputLastCreatedAt),
-              lt(convoMessages.publicId, inputLastPublicId)
-            ),
-            lt(convoMessages.createdAt, inputLastCreatedAt)
-          ),
-          eq(convoMessages.convoId, convoDetails.id)
-        )
-      });
-
-      return {
-        messages: convoMessagesReturn
-      };
-    })
-});
diff --git a/apps/web-app/tailwind.config.ts b/apps/web-app/tailwind.config.ts
index f96b517c..da49fd47 100644
--- a/apps/web-app/tailwind.config.ts
+++ b/apps/web-app/tailwind.config.ts
@@ -9,6 +9,7 @@ export default <Partial<Config>>{
   darkMode: 'class',
   plugins: [colors.plugin],
   content: ['docs/content/**/*.md'],
+  safeList: ['items-end', 'items-start', 'rounded-br-none', 'rounded-bl-none'],
   theme: {
     extend: {
       fontFamily: {
diff --git a/packages/database/schema.ts b/packages/database/schema.ts
index 5c547d97..2595d7d5 100644
--- a/packages/database/schema.ts
+++ b/packages/database/schema.ts
@@ -1074,7 +1074,7 @@ export const convos = mysqlTable(
     id: serial('id').primaryKey(),
     orgId: foreignKey('org_id').notNull(),
     publicId: nanoId('public_id').notNull(),
-    lastUpdatedAt: timestamp('last_updated_at'),
+    lastUpdatedAt: timestamp('last_updated_at').notNull(),
     createdAt: timestamp('created_at')
       .default(sql`CURRENT_TIMESTAMP`)
       .notNull()
@@ -1089,7 +1089,7 @@ export const convosRelations = relations(convos, ({ one, many }) => ({
     fields: [convos.orgId],
     references: [orgs.id]
   }),
-  members: many(convoParticipants),
+  participants: many(convoParticipants),
   attachments: many(convoAttachments),
   entries: many(convoEntries),
   subjects: many(convoSubjects)
@@ -1205,7 +1205,7 @@ export const convoAttachments = mysqlTable(
     fileName: varchar('fileName', { length: 256 }).notNull(),
     type: varchar('type', { length: 256 }).notNull(),
     storageId: varchar('storageId', { length: 256 }).notNull(),
-    convoMemberId: foreignKey('convo_members').notNull(),
+    convoParticipantId: foreignKey('convo_participant_id').notNull(),
     createdAt: timestamp('created_at')
       .default(sql`CURRENT_TIMESTAMP`)
       .notNull()
@@ -1233,7 +1233,7 @@ export const convoAttachmentsRelations = relations(
       references: [convoEntries.id]
     }),
     uploader: one(convoParticipants, {
-      fields: [convoAttachments.convoMemberId],
+      fields: [convoAttachments.convoParticipantId],
       references: [convoParticipants.id]
     })
   })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98f34164..24e7e777 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,6 +224,9 @@ importers:
       trpc-nuxt:
         specifier: ^0.10.17
         version: 0.10.17(@trpc/client@10.45.0)(@trpc/server@10.45.0)
+      vue-virtual-scroller:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8(vue@3.4.15)
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -3432,6 +3435,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
+      napi-wasm: 1.1.0
     bundledDependencies:
       - napi-wasm
 
@@ -10816,6 +10820,10 @@ packages:
       minipass: 3.3.6
       yallist: 4.0.0
 
+  /mitt@2.1.0:
+    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+    dev: false
+
   /mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
     dev: false
@@ -10944,6 +10952,9 @@ packages:
     hasBin: true
     dev: false
 
+  /napi-wasm@1.1.0:
+    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -14889,6 +14900,22 @@ packages:
       vue: 3.4.15(typescript@5.3.3)
     dev: false
 
+  /vue-observe-visibility@2.0.0-alpha.1(vue@3.4.15):
+    resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.15(typescript@5.3.3)
+    dev: false
+
+  /vue-resize@2.0.0-alpha.1(vue@3.4.15):
+    resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.15(typescript@5.3.3)
+    dev: false
+
   /vue-router@4.2.5(vue@3.4.15):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
@@ -14914,6 +14941,17 @@ packages:
       semver: 7.5.4
       typescript: 5.3.3
 
+  /vue-virtual-scroller@2.0.0-beta.8(vue@3.4.15):
+    resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      mitt: 2.1.0
+      vue: 3.4.15(typescript@5.3.3)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.15)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.15)
+    dev: false
+
   /vue-wrap-balancer@1.1.3(vue@3.4.15):
     resolution: {integrity: sha512-9kTRwYIveWxV1FdaCJfRjIIRZOtwgnxypGS5mlAiXnih5+Cfaby9YDh3APMW1jWp0oCvL+gep0XCbcjBb7/ZXQ==}
     peerDependencies: