diff --git a/nirvana-ios/Views/Convos/ConvoFooterView.swift b/nirvana-ios/Views/Convos/ConvoFooterView.swift
index 98b645b..03fa1b7 100644
--- a/nirvana-ios/Views/Convos/ConvoFooterView.swift
+++ b/nirvana-ios/Views/Convos/ConvoFooterView.swift
@@ -9,89 +9,95 @@ import SwiftUI
 
 struct ConvoFooterView: View {
     @EnvironmentObject var convoVM: ConvoViewModel
+    @EnvironmentObject var authSessionStore: AuthSessionStore
     
     @State private var convoRelativeTime = "started 20 minutes ago"
+    @State private var selectedConvo: Convo? = nil
     
     var body: some View {
+        
         ZStack(alignment:.bottomTrailing) {
             VStack(alignment:.center) {
                 Spacer()
                 
                 HStack {
-                    ProfilePicturesOverlappedView(indvAvatarWidth: CGFloat(35))
-                        .padding(.leading, 20)
-                        .padding(.trailing, 10)
-                    
-                                        
-                    // meta data of convo
-                    VStack (alignment: .leading) {
-                        Text("kev, sarth, and 5 others")
-                            .font(.footnote)
-                            .foregroundColor(NirvanaColor.light)
+                    if self.selectedConvo != nil {
+                        let filteredUsers = self.authSessionStore.relevantUsersDict.filter {
+                            return self.selectedConvo!.users.contains($0.key)
+                        }
+                        let convoUsers: [User] = Array(filteredUsers.values)
                         
-                        switch self.convoVM.connectionState {
-                        case .connecting:
-                            Label("connecting", systemImage: "chart.bar")
-                                .foregroundColor(Color.orange)
-                                .font(.caption)
-                        case .connected:
-                            Label("connected", systemImage: "chart.bar.fill")
-                                .foregroundColor(Color.green)
-                                .font(.caption)
-                        case .reconnecting:
-                            Label("reconnecting", systemImage: "chart.bar")
-                                .foregroundColor(Color.orange)
-                                .font(.caption)
-                        case .failed:
-                            Label("failed", systemImage: "chart.bar")
-                                .foregroundColor(Color.red)
-                                .font(.caption)
-                        case .disconnected:
-                            Label("disconnected", systemImage: "chart.bar")
-                                .foregroundColor(Color.red)
-                                .font(.caption)
-                        default:
-                            Label("disconnected", systemImage: "chart.bar")
-                                .foregroundColor(Color.red)
-                                .font(.caption)
+                        ProfilePicturesOverlappedView(indvAvatarWidth: CGFloat(35), users: convoUsers)
+                            .padding(.leading, 20)
+                            .padding(.trailing, 10)
+                                                                    
+                        // meta data of convo
+                        VStack (alignment: .leading) {
+                            ConvoUsernames(users: convoUsers)
+                            
+                            switch self.convoVM.connectionState {
+                            case .connecting:
+                                Label("connecting", systemImage: "chart.bar")
+                                    .foregroundColor(Color.orange)
+                                    .font(.caption)
+                            case .connected:
+                                Label("connected", systemImage: "chart.bar.fill")
+                                    .foregroundColor(Color.green)
+                                    .font(.caption)
+                            case .reconnecting:
+                                Label("reconnecting", systemImage: "chart.bar")
+                                    .foregroundColor(Color.orange)
+                                    .font(.caption)
+                            case .failed:
+                                Label("failed", systemImage: "chart.bar")
+                                    .foregroundColor(Color.red)
+                                    .font(.caption)
+                            case .disconnected:
+                                Label("disconnected", systemImage: "chart.bar")
+                                    .foregroundColor(Color.red)
+                                    .font(.caption)
+                            default:
+                                Label("disconnected", systemImage: "chart.bar")
+                                    .foregroundColor(Color.red)
+                                    .font(.caption)
+                            }
+                            
+                            Text(self.convoRelativeTime)
+                                .font(.caption2)
+                                .foregroundColor(.gray)
                         }
                         
-                        Text(self.convoRelativeTime)
-                            .font(.caption2)
-                            .foregroundColor(.gray)
-                    }
-                    
-                    Spacer()
-                    
-                    // disconnect button
-                    Button {
-                        print("showing more info about the chat")
+                        Spacer()
                         
-                        // show a sheet of the members in the call and add them if I want
+                        // disconnect button
+                        Button {
+                            print("showing more info about the chat")
+                            
+                            // show a sheet of the members in the call and add them if I want
+                            
+                        } label: {
+                            Label("attendees", systemImage: "person.2.circle.fill")
+                                .labelStyle(.iconOnly)
+                                .foregroundColor(NirvanaColor.teal)
+                                .font(.title2)
+                                .padding(.trailing, 5)
+                        }
                         
-                    } label: {
-                        Label("attendees", systemImage: "person.2.circle.fill")
-                            .labelStyle(.iconOnly)
-                            .foregroundColor(NirvanaColor.teal)
-                            .font(.title2)
-                            .padding(.trailing, 5)
+                        // disconnect button
+                        Button {
+                            print("disconnecting user now ")
+                            
+                            self.convoVM.leaveConvo()
+                                                    
+                            // show success or failure toast
+                        } label: {
+                            Label("Call", systemImage: "powerplug.fill")
+                                .labelStyle(.iconOnly)
+                                .foregroundColor(Color.orange)
+                                .font(.title2)
+                                .padding(.trailing, 5)
+                        }
                     }
-                    
-                    // disconnect button
-                    Button {
-                        print("disconnecting user now ")
-                        
-                        self.convoVM.leaveConvo()
-                                                
-                        // show success or failure toast
-                    } label: {
-                        Label("Call", systemImage: "powerplug.fill")
-                            .labelStyle(.iconOnly)
-                            .foregroundColor(Color.orange)
-                            .font(.title2)
-                            .padding(.trailing, 5)
-                    }
-                    
                 }
                 .frame(maxWidth: .infinity, maxHeight: 60) // 60 is the height of the footer control big circle
                 .background(Color.white.opacity(0.5))
@@ -105,17 +111,20 @@ struct ConvoFooterView: View {
             x:0,
             y:self.convoVM.selectedConvoId == nil ? 150 : 0
         )
-        .onChange(of: self.convoVM.selectedConvoId) {newConvo in
+        .onReceive(self.convoVM.$selectedConvoId) {newConvoId in
             // update meta data based on which convo was selected
             
             // reset the selected options to start fresh
-//            self.convoRelativeTime = ""
+            self.convoRelativeTime = ""
+            
+            self.selectedConvo = self.convoVM.relevantConvos.first {convo in
+                convo.id == newConvoId
+            }
             
             // get relative start time of convo
-//            let formatter = RelativeDateTimeFormatter()
-//            formatter.unitsStyle = .full
-//
-//            let relativeDate = formatter.localizedString(for: ?.sentTimestamp ?? Date(), relativeTo: Date())
+            let formatter = RelativeDateTimeFormatter()
+            formatter.unitsStyle = .full
+            self.convoRelativeTime = formatter.localizedString(for: self.selectedConvo?.startedTimestamp ?? Date(), relativeTo: Date())
         }
     }
 }
@@ -125,3 +134,14 @@ struct ConvoFooterView_Previews: PreviewProvider {
         ConvoFooterView()
     }
 }
+
+struct ConvoUsernames: View {
+    var users: [User]
+    
+    var body: some View {
+        let userNames = self.users.map{$0.nickname ?? ""}.joined(separator: ",")
+        Text(userNames)
+            .font(.footnote)
+            .foregroundColor(NirvanaColor.light)
+    }
+}
diff --git a/nirvana-ios/Views/Convos/ConvosView.swift b/nirvana-ios/Views/Convos/ConvosView.swift
index 2edb1b8..67ddb11 100644
--- a/nirvana-ios/Views/Convos/ConvosView.swift
+++ b/nirvana-ios/Views/Convos/ConvosView.swift
@@ -7,67 +7,70 @@
 
 import SwiftUI
 
-struct ConvosView: View {
-    @EnvironmentObject var vm: ConvoViewModel
-    @State var animate = false
-    
-    var body: some View {
-        ScrollView([.horizontal]) {
-            HStack {
-                ForEach(0..<self.vm.relevantConvos.count, id: \.self) {index in
-                    let currConvo = self.vm.relevantConvos[index]
-                    ZStack(alignment: .topTrailing) {
-                        Circle()
-                            .foregroundColor(self.vm.selectedConvoId == currConvo.id ? Color.green : NirvanaColor.dimTeal.opacity(0.2))
-                                                        
-                        ZStack {
-                            Color.clear
-                            ProfilePicturesOverlappedView()
-                                .shadow(radius: 10)
-                        }
-                        
-                        Text("+2")
-                            .padding(5)
-                            .font(.caption)
-                            .foregroundColor(Color.white)
-                            .background(NirvanaColor.dimTeal)
-                            .cornerRadius(100)
-                        
-//                        ZStack(alignment: .bottom) {
-//                            Color.clear
+/**
+ deprecated...used to insert into circlegridview but can isolate later
+ */
+//struct ConvosView: View {
+//    @EnvironmentObject var vm: ConvoViewModel
+//    @State var animate = false
 //
-//                            Text("kev, sarth...")
-//                                .foregroundColor(NirvanaColor.teal)
-//                                .font(.caption)
+//    var body: some View {
+//        ScrollView([.horizontal]) {
+//            HStack {
+//                ForEach(0..<self.vm.relevantConvos.count, id: \.self) {index in
+//                    let currConvo = self.vm.relevantConvos[index]
+//                    ZStack(alignment: .topTrailing) {
+//                        Circle()
+//                            .foregroundColor(self.vm.selectedConvoId == currConvo.id ? Color.green : NirvanaColor.dimTeal.opacity(0.2))
+//
+//                        ZStack {
+//                            Color.clear
+//                            ProfilePicturesOverlappedView()
+//                                .shadow(radius: 10)
 //                        }
-                    }
-                    .frame(width: 100, height: 100)
-                    .scaleEffect(self.animate ? 1 : 0.85)
-                    .animation(
-                        Animation.easeInOut(duration: self.vm.selectedConvoId == currConvo.id ? 2 : 4
-                                           ).repeatForever(autoreverses: true),
-                       value: self.animate
-                    )
-                    .onTapGesture {
-                        // if not in a call already
-                        if !self.vm.isInCall() {
-                            self.vm.selectedConvoId = self.vm.relevantConvos[index].id!
-                            self.vm.joinConvo(convoId: currConvo.id!)
-                            
-                            return
-                        }
-                        
-                        self.vm.leaveConvo()
-                    }
-                }
-            }
-            .onAppear {
-                self.animate = true
-            }
-        }
-        .padding()
-    }
-}
+//
+//                        Text("+2")
+//                            .padding(5)
+//                            .font(.caption)
+//                            .foregroundColor(Color.white)
+//                            .background(NirvanaColor.dimTeal)
+//                            .cornerRadius(100)
+//
+////                        ZStack(alignment: .bottom) {
+////                            Color.clear
+////
+////                            Text("kev, sarth...")
+////                                .foregroundColor(NirvanaColor.teal)
+////                                .font(.caption)
+////                        }
+//                    }
+//                    .frame(width: 100, height: 100)
+//                    .scaleEffect(self.animate ? 1 : 0.85)
+//                    .animation(
+//                        Animation.easeInOut(duration: self.vm.selectedConvoId == currConvo.id ? 2 : 4
+//                                           ).repeatForever(autoreverses: true),
+//                       value: self.animate
+//                    )
+//                    .onTapGesture {
+//                        // if not in a call already
+//                        if !self.vm.isInCall() {
+//                            self.vm.selectedConvoId = self.vm.relevantConvos[index].id!
+//                            self.vm.joinConvo(convoId: currConvo.id!)
+//
+//                            return
+//                        }
+//
+//                        self.vm.leaveConvo()
+//                    }
+//                }
+//            }
+//            .onAppear {
+//                self.animate = true
+//            }
+//        }
+//        .padding()
+//    }
+//}
 
 //struct ConvosView_Previews: PreviewProvider {
 //    static var previews: some View {
diff --git a/nirvana-ios/Views/Convos/ProfilePicturesOverlappedView.swift b/nirvana-ios/Views/Convos/ProfilePicturesOverlappedView.swift
index 3764116..f7e1097 100644
--- a/nirvana-ios/Views/Convos/ProfilePicturesOverlappedView.swift
+++ b/nirvana-ios/Views/Convos/ProfilePicturesOverlappedView.swift
@@ -7,31 +7,33 @@
 
 import SwiftUI
 
+/**
+ @return a view that overlaps the user avatars
+ */
 struct ProfilePicturesOverlappedView: View {
-    let numberAttendees:Int = 5
     let offset:Int = 15
     
     var indvAvatarWidth: CGFloat = 50
     
+    var users: [User]
+    
     var body: some View {
         ZStack {
-            ForEach(0..<numberAttendees, id: \.self) {attendeeIndex in
-                if attendeeIndex < 3 {
-                    Image(Avatars.avatarSystemNames[attendeeIndex+1])
-                        .resizable()
-                        .scaledToFit()
-                        .background(NirvanaColor.dimTeal)
-                        .clipShape(Circle())
-                        .offset(x: CGFloat((-15 * attendeeIndex)) + 15)
-                        .frame(width: indvAvatarWidth)
-                }
+            ForEach(0..<users.count, id: \.self) {userIndex in
+                Image(users[userIndex].avatar ?? Avatars.avatarSystemNames[1])
+                    .resizable()
+                    .scaledToFit()
+                    .background(NirvanaColor.dimTeal)
+                    .clipShape(Circle())
+                    .offset(x: CGFloat((-15 * userIndex)) + 15)
+                    .frame(width: indvAvatarWidth)
             }
         }
     }
 }
 
-struct ProfilePicturesOverlappedView_Previews: PreviewProvider {
-    static var previews: some View {
-        ProfilePicturesOverlappedView()
-    }
-}
+//struct ProfilePicturesOverlappedView_Previews: PreviewProvider {
+//    static var previews: some View {
+//        ProfilePicturesOverlappedView()
+//    }
+//}
diff --git a/nirvana-ios/Views/InnerCircle/CircleGridView.swift b/nirvana-ios/Views/InnerCircle/CircleGridView.swift
index f1b0901..2cfdeb5 100644
--- a/nirvana-ios/Views/InnerCircle/CircleGridView.swift
+++ b/nirvana-ios/Views/InnerCircle/CircleGridView.swift
@@ -54,6 +54,8 @@ struct CircleGridView: View {
     
     @State var animateLiveConvos = false
     
+    let maxNumAvatarsToShowInConvo = 3
+    
     var body: some View {
         // main communication hub
         // TODO: client side, sort the honeycomb from top left to bottom right
@@ -74,6 +76,10 @@ struct CircleGridView: View {
                     // live convos
                     ForEach(0..<convos.count, id: \.self) {value in
                         let currConvo = self.convoVM.relevantConvos[value]
+                        let filteredUsers = self.authSessionStore.relevantUsersDict.filter {
+                            return currConvo.users.contains($0.key)
+                        }
+                        let convoUsers: [User] = Array(filteredUsers.values)
                         
                         GeometryReader {gridProxy in
                             let scale = getScale(proxy: gridProxy, itemNumber: value, userId: nil, convoId: currConvo.id)
@@ -81,20 +87,21 @@ struct CircleGridView: View {
                             ZStack(alignment: .topTrailing) {
                                 Circle()
                                     .foregroundColor(self.getBubbleTint(convoId: currConvo.id))
-                                                                
+                                
                                 ZStack {
                                     Color.clear
-                                    ProfilePicturesOverlappedView()
+                                    ProfilePicturesOverlappedView(users: Array(convoUsers.prefix(maxNumAvatarsToShowInConvo)))
                                         .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 20)
                                 }
                                 
-                                Text("+2")
+                                Text("\(convoUsers.count)")
                                     .padding(5)
                                     .font(.caption)
                                     .foregroundColor(Color.white)
                                     .background(NirvanaColor.dimTeal)
                                     .cornerRadius(100)
                                 
+                                
         //                        ZStack(alignment: .bottom) {
         //                            Color.clear
         //