diff --git a/packages/web/components/Conversations/ConversationFullRow.tsx b/packages/web/components/Conversations/ConversationFullRow.tsx
new file mode 100644
index 0000000..af7052c
--- /dev/null
+++ b/packages/web/components/Conversations/ConversationFullRow.tsx
@@ -0,0 +1,63 @@
+import Conversation from "@nirvana/common/models/conversation";
+import { Avatar } from "antd";
+import {
+  FaCircle,
+  FaUser,
+  FaRocket,
+  FaRegClock,
+  FaCheck,
+  FaAngleRight,
+} from "react-icons/fa";
+import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
+
+export default function ConversationFullRow(props: {
+  conversation: Conversation;
+}) {
+  let quickUpdateText = "";
+
+  if (props.conversation.cachedAudioClips?.length > 0) {
+    quickUpdateText = `${props.conversation.cachedAudioClips[0].senderUserId} spoke just now...`;
+  }
+
+  return (
+    <span
+      className="py-5 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
+   items-center"
+    >
+      <FaCircle className="text-orange-500 mr-2 animate-pulse text-[0.75rem]" />
+
+      <span className="w-[15rem] flex flex-row items-center">
+        <MasterAvatarGroupWithUserFetch
+          listOfUserIds={props.conversation.activeMembers}
+          showCurrUser={false}
+        />
+
+        <span className="text-slate-500 ml-2">{props.conversation.name}</span>
+      </span>
+
+      <span className="text-slate-300 w-[20rem] truncate text-sm">
+        {quickUpdateText}
+      </span>
+
+      <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
+        9:00am
+      </span>
+
+      {/* actions */}
+      <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaRocket className="ml-auto text-lg" />
+        </span>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaRegClock className="ml-auto text-lg" />
+        </span>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaCheck className="ml-auto text-lg" />
+        </span>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+          <FaAngleRight className="ml-auto text-lg" />
+        </span>
+      </span>
+    </span>
+  );
+}
diff --git a/packages/web/components/MainTabsOrPages/Conversations.tsx b/packages/web/components/MainTabsOrPages/Conversations.tsx
index 3c03028..ec5c8ad 100644
--- a/packages/web/components/MainTabsOrPages/Conversations.tsx
+++ b/packages/web/components/MainTabsOrPages/Conversations.tsx
@@ -22,6 +22,7 @@ import {
   RelativeTimeConvosSections,
   RelativeTimeSeparatedConvosSelector,
 } from "../../recoil/main";
+import ConversationFullRow from "../Conversations/ConversationFullRow";
 
 export default function Conversations() {
   const router = useRouter();
@@ -52,6 +53,7 @@ export default function Conversations() {
 
   return (
     <>
+      {/*  live */}
       {liveRooms?.length > 0 && (
         <>
           <span className="flex flex-row items-center mb-5 px-5 w-full">
@@ -72,311 +74,91 @@ export default function Conversations() {
 
       {/* Today */}
       {todayConvos && todayConvos?.length > 0 && (
-        <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
-          <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
-            Today
-          </span>
+        <>
+          <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
+            <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
+              Today
+            </span>
 
-          <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
-        </span>
+            <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
+          </span>
+          <span
+            onClick={() => handleViewConversationDetails("woah")}
+            className="flex flex-col w-full items-stretch"
+          >
+            {todayConvos.map((tRoom) => (
+              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+            ))}
+          </span>
+        </>
       )}
 
-      <span
-        onClick={() => handleViewConversationDetails("woah")}
-        className="flex flex-col w-full items-stretch"
-      >
-        {/* engineering */}
-        <span
-          className="py-2 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
-           items-center"
-        >
-          <FaCircle className="text-orange-500 mr-2 animate-pulse" />
-
-          <span className="w-[15rem] flex flex-row items-center">
-            <Avatar.Group
-              maxCount={1}
-              size="large"
-              maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-              className="w-[5rem]"
-            >
-              <Avatar src="https://joeschmoe.io/api/v1/random" />
-              <Avatar style={{ backgroundColor: "#f56a00" }}>K</Avatar>
-              <Avatar
-                style={{ backgroundColor: "#87d068" }}
-                icon={<FaUser />}
-              />
-              <Avatar
-                style={{ backgroundColor: "#1890ff" }}
-                icon={<FaUser />}
-              />
-              <Avatar
-                style={{ backgroundColor: "#1890ff" }}
-                icon={<FaUser />}
-              />
-              <Avatar
-                style={{ backgroundColor: "#1890ff" }}
-                icon={<FaUser />}
-              />
-            </Avatar.Group>
-
-            <span className="text-slate-500 ml-2">Engineering</span>
-          </span>
-
-          <span className="text-slate-300 w-[20rem] truncate text-sm">
-            {`Josh: "let's just figure out how to finish the rest of the "`}
-          </span>
-
-          <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
-            9:00am
-          </span>
-
-          {/* actions */}
-          <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRocket className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRegClock className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaCheck className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaAngleRight className="ml-auto text-lg" />
+      {/*  last 7 days */}
+      {last7DaysConvos && last7DaysConvos?.length > 0 && (
+        <>
+          <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
+            <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
+              Today
             </span>
+
+            <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
           </span>
-        </span>
-
-        {/* general */}
-        <span
-          className="group relative border-t border-t-slate-200 hover:bg-slate-50 
-          transition-all py-2 px-4 flex flex-row items-center"
-        >
-          <FaCircle className="text-slate-100 mr-2 animate-pulse" />
-
-          <span className="w-[15rem] flex flex-row items-center">
-            <Avatar.Group
-              maxCount={1}
-              size="large"
-              maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-              className="w-[5rem]"
-            >
-              <Avatar shape="circle" src="https://picsum.photos/200/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-              <Avatar shape="circle" src="https://picsum.photos/240/300" />
-            </Avatar.Group>
-
-            <span className="text-slate-600 ml-2">General</span>
+          <span
+            onClick={() => handleViewConversationDetails("woah")}
+            className="flex flex-col w-full items-stretch"
+          >
+            {last7DaysConvos.map((tRoom) => (
+              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+            ))}
           </span>
+        </>
+      )}
 
-          <span className="text-slate-300 w-[10rem] truncate text-sm">
-            You spoke 2 hours ago
+      {/* earlier this month */}
+      {earlierMonthConvos && earlierMonthConvos?.length > 0 && (
+        <>
+          <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
+            <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
+              Today
+            </span>
+
+            <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
           </span>
-
-          <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
-            7:22am
+          <span
+            onClick={() => handleViewConversationDetails("woah")}
+            className="flex flex-col w-full items-stretch"
+          >
+            {earlierMonthConvos.map((tRoom) => (
+              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+            ))}
           </span>
+        </>
+      )}
 
-          {/* actions */}
-          <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRocket className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRegClock className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaCheck className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaAngleRight className="ml-auto text-lg" />
+      {/* old junk */}
+      {oldJunkConvos && oldJunkConvos?.length > 0 && (
+        <>
+          <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
+            <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
+              Today
             </span>
+
+            <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
           </span>
-        </span>
-
-        {/* one on one chat with sydney */}
-        <span
-          className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
-           relative px-4 flex flex-row items-center"
-        >
-          <FaCircle className="text-orange-500 mr-2 animate-pulse" />
-
-          <span className="w-[15rem] flex flex-row items-center">
-            <Avatar.Group
-              maxCount={2}
-              size="large"
-              maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-              className="w-[5rem]"
-            >
-              <Badge dot color={"green"}>
-                <Avatar shape="circle" src="https://picsum.photos/200/100" />
-              </Badge>
-            </Avatar.Group>
-
-            <span className="text-slate-600 ml-2">Sydney</span>
+          <span
+            onClick={() => handleViewConversationDetails("woah")}
+            className="flex flex-col w-full items-stretch"
+          >
+            {oldJunkConvos.map((tRoom) => (
+              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+            ))}
           </span>
+        </>
+      )}
 
-          <span className="text-slate-300 w-[20rem] truncate text-sm">
-            {`"Did you ever figure out that problem with the "`}
-          </span>
-
-          <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
-            6:50am
-          </span>
-
-          {/* actions */}
-          <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRocket className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRegClock className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaCheck className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaAngleRight className="ml-auto text-lg" />
-            </span>
-          </span>
-        </span>
+      <span className="mx-auto text-slate-300 flex-1 flex flex-col justify-end">
+        <span className="mt-auto">{"That's all"}</span>
       </span>
-
-      <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
-        <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
-          Last 7 Days
-        </span>
-
-        <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
-      </span>
-
-      <span className="flex flex-col w-full items-stretch">
-        <span
-          className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
-           relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
-        >
-          <FaCircle className="text-orange-500 mr-2 animate-pulse" />
-
-          <span className="w-[15rem] flex flex-row items-center">
-            <Avatar.Group
-              maxCount={2}
-              size="large"
-              maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-              className="w-[5rem]"
-            >
-              <Badge dot color={"green"}>
-                <Avatar shape="circle" src="https://picsum.photos/240/100" />
-              </Badge>
-            </Avatar.Group>
-
-            <span className="text-slate-600 ml-2">Justin</span>
-          </span>
-
-          <span className="text-slate-300 w-[20rem] truncate text-sm">
-            {`"Here's a quick github link for that library you were looking for"`}
-          </span>
-
-          <span className="flex flex-row items-center space-x-2 mx-auto">
-            <span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer">
-              <FaGithub className="text-slate-400 text-xl shrink-0" />
-            </span>
-
-            <span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer">
-              <FaAtlassian className="text-sky-400 text-xl shrink-0" />
-            </span>
-          </span>
-
-          <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
-            6:50am
-          </span>
-
-          {/* actions */}
-          <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRocket className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRegClock className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaCheck className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaAngleRight className="ml-auto text-lg" />
-            </span>
-          </span>
-        </span>
-
-        <span
-          className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
-           relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
-        >
-          <FaCircle className="text-orange-500 mr-2 animate-pulse" />
-
-          <span className="w-[15rem] flex flex-row items-center">
-            <Avatar.Group
-              maxCount={2}
-              size="large"
-              maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-              className="w-[5rem]"
-            >
-              <Avatar shape="circle" src="https://picsum.photos/190/100" />
-              <Avatar shape="circle" src="https://picsum.photos/192/100" />
-            </Avatar.Group>
-
-            <span className="text-slate-600 ml-2">Steph and Lee</span>
-          </span>
-
-          <span className="text-slate-300 w-[20rem] truncate text-sm">
-            {`"Let's hop into a room to discuss this sometime this afternoon..."`}
-          </span>
-
-          <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
-            6:50am
-          </span>
-
-          {/* actions */}
-          <span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRocket className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaRegClock className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaCheck className="ml-auto text-lg" />
-            </span>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaAngleRight className="ml-auto text-lg" />
-            </span>
-          </span>
-        </span>
-      </span>
-
-      <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
-        <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
-          Earlier This Month
-        </span>
-
-        <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
-      </span>
-
-      <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
-        <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
-          Old Junk
-        </span>
-
-        <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
-      </span>
-
-      <span className="mx-auto text-slate-300">{"That's all"}</span>
     </>
   );
 }
diff --git a/packages/web/recoil/main.tsx b/packages/web/recoil/main.tsx
index 46d924f..c949432 100644
--- a/packages/web/recoil/main.tsx
+++ b/packages/web/recoil/main.tsx
@@ -135,7 +135,8 @@ export const RelativeTimeSeparatedConvosSelector = selector<
     // inbox/default Convos: already sorted
     const defaultConvos = sortedConvos.filter((convo) => {
       return (
-        userMemberMap.get(convo.id)?.state == ConversationMemberState.default
+        userMemberMap.get(convo.id)?.state == ConversationMemberState.default &&
+        !convo.membersInLiveRoom?.length
       );
     });