diff --git a/Cargo.lock b/Cargo.lock
index efe076a..cdd5221 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3399,6 +3399,7 @@ dependencies = [
  "htmlize",
  "imbl",
  "imghdr",
+ "indexmap",
  "linkify",
  "makepad-widgets",
  "matrix-sdk",
diff --git a/Cargo.toml b/Cargo.toml
index de46ba3..c2cdabb 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -49,7 +49,7 @@ unicode-segmentation = "1.11.0"
 url = "2.5.0"
 emojis = "0.6.1"
 bytesize = "1.3.0"
-
+indexmap = "2.6.0"
 
 ###################################################################################################
 #### Note: we now enable the usage of `rustls-tls` and the `bundled-sqlite` features in the 2  ####
diff --git a/src/avatar_cache.rs b/src/avatar_cache.rs
index 9610ae9..d527254 100644
--- a/src/avatar_cache.rs
+++ b/src/avatar_cache.rs
@@ -75,7 +75,6 @@ pub fn get_or_fetch_avatar(
             },
             Entry::Occupied(occupied) => return occupied.get().clone(),
         }
-        
         submit_async_request(MatrixRequest::FetchAvatar {
             mxc_uri,
             on_fetched: enqueue_avatar_update,
diff --git a/src/home/mod.rs b/src/home/mod.rs
index 3652e8e..e4207b8 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -7,6 +7,7 @@ pub mod main_desktop_ui;
 pub mod main_mobile_ui;
 pub mod room_preview;
 pub mod room_screen;
+pub mod room_read_receipt;
 pub mod rooms_list;
 pub mod rooms_sidebar;
 pub mod spaces_dock;
@@ -18,6 +19,7 @@ pub fn live_design(cx: &mut Cx) {
     rooms_list::live_design(cx);
     room_preview::live_design(cx);
     room_screen::live_design(cx);
+    room_read_receipt::live_design(cx);
     rooms_sidebar::live_design(cx);
     main_mobile_ui::live_design(cx);
     main_desktop_ui::live_design(cx);
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
new file mode 100644
index 0000000..5d3e411
--- /dev/null
+++ b/src/home/room_read_receipt.rs
@@ -0,0 +1,181 @@
+use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
+use crate::home::room_screen::RoomScreenTooltipActions;
+use crate::utils::human_readable_list;
+use indexmap::IndexMap;
+use makepad_widgets::*;
+use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
+use std::cmp;
+const MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW : usize = 5;
+live_design! {
+    import makepad_draw::shader::std::*;
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import crate::shared::avatar::*;
+    import crate::shared::styles::*;
+
+    AvatarRow = {{AvatarRow}} {
+        button: <Avatar> {
+            width: 15.0,
+            height: 15.0,
+            text_view = { text = { draw_text: {
+                text_style: { font_size: 6.0 }
+            }}}
+        }
+        margin: {top: 3, right: 10, bottom: 3, left: 10}
+        width: 100,
+        height: 50,
+        plus: <Label> {
+            draw_text: {
+                color: #x0,
+                text_style: <TITLE_TEXT>{ font_size: 11}
+            }
+            text: ""
+        }
+    }
+}
+
+#[derive(Live, Widget, LiveHook)]
+pub struct AvatarRow {
+    #[redraw]
+    #[live]
+    draw_text: DrawText,
+    #[deref]
+    pub deref: View,
+    #[walk]
+    walk: Walk,
+    #[live]
+    button: Option<LivePtr>,
+    #[layout]
+    layout: Layout,
+    #[live]
+    plus: Option<LivePtr>,
+    // A vector containing its avatarRef and its drawn status
+    // Storing the drawn status helps prevent unnessary user profile request in the draw_walk function
+    #[rust]
+    buttons: Vec<(AvatarRef, bool)>,
+    #[rust]
+    label: Option<LabelRef>,
+    #[rust]
+    total_num_seen: usize,
+    #[redraw] #[rust] area: Area,
+    #[rust]
+    human_readable_usernames: String, 
+}
+
+impl Widget for AvatarRow {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let uid = self.widget_uid();
+        if self.total_num_seen == 0 { return; }
+        match event.hits(cx, self.area) {
+            Hit::FingerHoverIn(finger_event) => {
+                // Temporary hack to improve the issue that the tooltip is cut off by the right side of the screen
+                // As the width of the tooltip not currently calculated, it is difficult to prevent the tooltip from being cut off
+                // If the mouse position is too close to right side of the screen, the tooltip will be left-aligned to the reaction button 
+                let tooltip_pos = if finger_event.abs.x > cx.default_window_size().x - 80.0 {
+                    Rect {
+                        pos: DVec2 {
+                            x: self.area.rect(cx).pos.x,
+                            y: finger_event.abs.y
+                        },
+                        size: DVec2::new(),
+                    }
+                } else {
+                    Rect {
+                        pos: finger_event.abs,
+                        size: DVec2::new(),
+                    }
+                };
+                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverIn(tooltip_pos, format!("Seen by {:?}\n{}", self.total_num_seen, self.human_readable_usernames)));
+            }
+            Hit::FingerHoverOut(_) => {
+                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
+            }
+            _ => {}
+        }
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, Layout::default());
+        for (avatar_ref, _) in self.buttons.iter_mut() {
+            let _ = avatar_ref.draw(cx, scope);
+        }
+        if self.total_num_seen > MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW {
+            if let Some(label) = &mut self.label {
+                label.set_text(&format!(" + {:?}", self.total_num_seen - MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW));
+                let _ = label.draw(cx, scope);
+            }
+        }
+        cx.end_turtle_with_area(&mut self.area);
+        DrawStep::done()
+    }
+}
+impl AvatarRow {
+    
+    /// Set a row of Avatars based on receipt index map
+    ///
+    /// Given a sequence of receipts, this will set each of the first MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW
+    /// Avatars in this row to the corresponding user's avatar, and
+    /// display the given number of total receipts as a label. The
+    /// index map is expected to yield tuples of (user_id, receipt),
+    /// where the receipt is ignored.
+    fn set_avatar_row(
+        &mut self,
+        cx: &mut Cx,
+        room_id: &RoomId,
+        event_id: Option<&EventId>,
+        receipts_map: &IndexMap<OwnedUserId, Receipt>) {
+        if receipts_map.len() != self.buttons.len() {
+            self.buttons.clear();
+            for _ in 0..cmp::min(MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW, receipts_map.len()) {
+                self.buttons.push((WidgetRef::new_from_ptr(cx, self.button).as_avatar(), false));
+            }
+        }
+        self.total_num_seen = receipts_map.len();
+        self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
+        let mut usernames_arr = vec![];
+        for ((avatar_ref, drawn), (user_id, _)) in self.buttons.iter_mut().zip(receipts_map) {
+            // Set avatar_profile_opt to be None so that the function may fetch the user profile from profile cache
+            if !*drawn {
+                let (username, drawn_status) = avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id); 
+                *drawn = drawn_status;
+                usernames_arr.push(username);
+            }
+        }
+        self.human_readable_usernames = human_readable_list(usernames_arr);
+    }
+}
+impl AvatarRowRef {
+    /// Handles hover in action
+    pub fn hover_in(&self, actions: &Actions) -> Option<(Rect, String)> {
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            match item.cast() {
+                RoomScreenTooltipActions::HoverIn(tooltip_pos, tooltip_text) => Some((tooltip_pos, tooltip_text)),
+                _ => None,
+            }
+        } else {
+            None
+        }
+    }
+    /// Handles hover out action
+    pub fn hover_out(&self, actions: &Actions) -> bool {
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            matches!(item.cast(), RoomScreenTooltipActions::HoverOut)
+        } else {
+            false
+        }
+    }
+    /// Get the total number of people seen 
+    pub fn total_num_seen(&self) -> usize {
+        if let Some(ref mut inner) = self.borrow() {
+            inner.total_num_seen
+        } else {
+            0
+        }
+    }
+    /// Set a row of Avatars based on receipt's index map
+    pub fn set_avatar_row(&mut self, cx: &mut Cx, room_id: &RoomId, event_id: Option<&EventId>, receipts_map: &IndexMap<OwnedUserId, Receipt>) {
+        if let Some(ref mut inner) = self.borrow_mut() {
+            inner.set_avatar_row(cx, room_id, event_id, receipts_map);
+        }
+    }
+}
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 12f11e2..9dbe0af 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -12,23 +12,23 @@ use matrix_sdk::{
             message::{
                 AudioMessageEventContent, CustomEventContent, EmoteMessageEventContent, FileMessageEventContent, FormattedBody, ImageMessageEventContent, KeyVerificationRequestEventContent, LocationMessageEventContent, MessageFormat, MessageType, NoticeMessageEventContent, RoomMessageEventContent, ServerNoticeMessageEventContent, TextMessageEventContent, VideoMessageEventContent
             }, ImageInfo, MediaSource
-        }, sticker::StickerEventContent}, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, UserId
+        }, sticker::StickerEventContent}, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId
     },
     OwnedServerName,
 };
 use matrix_sdk_ui::timeline::{
-    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
+    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
 };
 use robius_location::Coordinates;
 
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::loading_modal::LoadingModalWidgetExt, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
-        user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
-        user_profile_cache,
-    }, shared::{
-        avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::JumpToBottomButtonWidgetExt, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
+    event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::loading_modal::LoadingModalWidgetExt, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::
+        user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt}
+    , shared::{
+        avatar::AvatarWidgetRefExt, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::JumpToBottomButtonWidgetExt, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineRequestSender}, utils::{self, unix_time_millis_to_datetime, ImageFormat, MediaFormatConst}
 };
+use crate::home::room_read_receipt::AvatarRowWidgetRefExt;
 use rangemap::RangeSet;
 
 use super::loading_modal::{LoadingModalAction, LoadingModalState};
@@ -50,6 +50,7 @@ live_design! {
     import crate::shared::avatar::Avatar;
     import crate::shared::text_or_image::TextOrImage;
     import crate::shared::html_or_plaintext::*;
+    import crate::home::room_read_receipt::*;
     import crate::profile::user_profile::UserProfileSlidingPane;
     import crate::shared::typing_animation::TypingAnimation;
     import crate::shared::icon_button::*;
@@ -389,7 +390,11 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.
@@ -429,6 +434,11 @@ live_design! {
                 message = <HtmlOrPlaintext> { }
                 message_annotations = <MessageAnnotations> {}
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -441,6 +451,11 @@ live_design! {
                 message = <TextOrImage> { }
                 message_annotations = <MessageAnnotations> {}
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -453,6 +468,11 @@ live_design! {
                 message = <TextOrImage> { }
                 message_annotations = <MessageAnnotations> {}
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -509,6 +529,11 @@ live_design! {
                 }
                 text: ""
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -710,7 +735,6 @@ live_design! {
             color: (COLOR_SECONDARY)
         }
         flow: Down, spacing: 0.0
-
         room_screen_wrapper = <View> {
             width: Fill, height: Fill,
             flow: Overlay,
@@ -938,7 +962,37 @@ live_design! {
                 }
             }
         }
-
+        
+        room_screen_tooltip = <Tooltip> {
+            content: <View> {
+                flow: Overlay
+                width: Fit
+                height: Fit
+    
+                <RoundedView> {
+                    width: Fit,
+                    height: Fit,
+    
+                    padding: {left:10, top: 19, right: 10, bottom: 10},
+    
+                    draw_bg: {
+                        color: #fff,
+                        border_width: 1.0,
+                        border_color: #D0D5DD,
+                        radius: 2.
+                    }
+    
+                    tooltip_label = <Label> {
+                        width: Fit,
+                        draw_text: {
+                            text_style: <THEME_FONT_REGULAR>{font_size: 9},
+                            text_wrap: Word,
+                            color: #000
+                        }
+                    }
+                }
+            }
+        }
         animator: {
             typing_notice_animator = {
                 default: show,
@@ -997,6 +1051,16 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
+            let mut tooltip = self.tooltip(id!(room_screen_tooltip));
+            portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
+                let seq = wr.avatar_row(id!(avatar_row));
+                if let Some((rect, tooltip_text)) = seq.hover_in(actions) {
+                    tooltip.show_with_options(cx, rect.pos, &tooltip_text);
+                }
+                if seq.hover_out(actions) {
+                    tooltip.hide(cx);
+                }
+            });     
             for action in actions {
                 // Handle actions on a message, e.g., clicking the reply button or clicking the reply preview.
                 match action.as_widget_action().widget_uid_eq(widget_uid).cast() {
@@ -1374,7 +1438,6 @@ impl Widget for RoomScreen {
                         content_drawn: tl_state.content_drawn_since_last_update.contains(&tl_idx),
                         profile_drawn: tl_state.profile_drawn_since_last_update.contains(&tl_idx),
                     };
-
                     let (item, item_new_draw_status) = match timeline_item.kind() {
                         TimelineItemKind::Event(event_tl_item) => match event_tl_item.content() {
                             TimelineItemContent::Message(message) => {
@@ -1784,12 +1847,11 @@ impl RoomScreen {
         replying_to: (EventTimelineItem, RepliedToInfo),
     ) {
         let replying_preview_view = self.view(id!(replying_preview));
-        let (replying_preview_username, _) = set_avatar_and_get_username(
+        let (replying_preview_username, _) = replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar)).set_avatar_and_get_username(
             cx,
-            replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar)),
             self.room_id.as_ref().unwrap(),
             replying_to.0.sender(),
-            replying_to.0.sender_profile(),
+            Some(replying_to.0.sender_profile()),
             replying_to.0.event_id(),
         );
 
@@ -2113,6 +2175,18 @@ impl RoomScreenRef {
     }
 }
 
+/// Actions for the room screen's tooltip 
+#[derive(Clone, Debug, DefaultNone)]
+pub enum RoomScreenTooltipActions {
+    // Mouse over event when the mouse is over the reaction button
+    // First parameter is rect containing tooltip position and its size
+    // Todo! implement tooltip resizing
+    // The second parameter is tooltip text
+    HoverIn(Rect, String),
+    HoverOut,
+    None,
+}
+
 /// A message that is sent from a background async task to a room's timeline view
 /// for the purpose of update the Timeline UI contents or metadata.
 pub enum TimelineUpdate {
@@ -2497,7 +2571,6 @@ fn populate_message_view(
     room_screen_widget_uid: WidgetUid
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-
     let ts_millis = event_tl_item.timestamp();
 
     let mut is_notice = false; // whether this message is a Notice
@@ -2522,7 +2595,6 @@ fn populate_message_view(
     // Sometimes we need to call this up-front, so we save the result in this variable
     // to avoid having to call it twice.
     let mut set_username_and_get_avatar_retval = None;
-
     let (item, used_cached_item) = match message.get_type() {
         MessageOrStickerType::Text(TextMessageEventContent { body, formatted, .. }) => {
             let template = if use_compact_view {
@@ -2531,6 +2603,8 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
+
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2553,6 +2627,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2580,6 +2655,8 @@ fn populate_message_view(
         MessageOrStickerType::ServerNotice(sn) => {
             is_server_notice = true;
             let (item, existed) = list.item_with_existed(cx, item_id, live_id!(Message));
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
+
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2627,16 +2704,16 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
                 // Draw the profile up front here because we need the username for the emote body.
-                let (username, profile_drawn) = set_avatar_and_get_username(
+                let (username, profile_drawn) = item.avatar(id!(profile.avatar)).set_avatar_and_get_username(
                     cx,
-                    item.avatar(id!(profile.avatar)),
                     room_id,
                     event_tl_item.sender(),
-                    event_tl_item.sender_profile(),
+                    Some(event_tl_item.sender_profile()),
                     event_tl_item.event_id(),
                 );
 
@@ -2670,6 +2747,8 @@ fn populate_message_view(
                 live_id!(ImageMessage)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
+
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2692,6 +2771,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2710,6 +2790,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2727,6 +2808,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2744,6 +2826,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2757,6 +2840,7 @@ fn populate_message_view(
         MessageOrStickerType::VerificationRequest(verification) => {
             let template = live_id!(Message);
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2785,6 +2869,7 @@ fn populate_message_view(
         }
         other => {
             let (item, existed) = list.item_with_existed(cx, item_id, live_id!(Message));
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2827,12 +2912,11 @@ fn populate_message_view(
 
         if !is_server_notice { // the normal case
             let (username, profile_drawn) = set_username_and_get_avatar_retval.unwrap_or_else(||
-                set_avatar_and_get_username(
+                item.avatar(id!(profile.avatar)).set_avatar_and_get_username(
                     cx,
-                    item.avatar(id!(profile.avatar)),
                     room_id,
                     event_tl_item.sender(),
-                    event_tl_item.sender_profile(),
+                    Some(event_tl_item.sender_profile()),
                     event_tl_item.event_id(),
                 )
             );
@@ -3186,15 +3270,16 @@ fn draw_replied_to_message(
 
         match &in_reply_to_details.event {
             TimelineDetails::Ready(replied_to_event) => {
-                let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
-                    cx,
+                let (in_reply_to_username, is_avatar_fully_drawn) = 
                     replied_to_message_view
-                        .avatar(id!(replied_to_message_content.reply_preview_avatar)),
-                    room_id,
-                    replied_to_event.sender(),
-                    replied_to_event.sender_profile(),
-                    Some(in_reply_to_details.event_id.as_ref()),
-                );
+                        .avatar(id!(replied_to_message_content.reply_preview_avatar))
+                        .set_avatar_and_get_username(
+                            cx,
+                            room_id,
+                            replied_to_event.sender(),
+                            Some(replied_to_event.sender_profile()),
+                            Some(in_reply_to_details.event_id.as_ref()),
+                        );
 
                 fully_drawn = is_avatar_fully_drawn;
 
@@ -3456,7 +3541,6 @@ fn populate_small_state_event(
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
-
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -3474,12 +3558,12 @@ fn populate_small_state_event(
 
     let username = username_opt.unwrap_or_else(|| {
         // As a fallback, call `set_avatar_and_get_username` to get the user's display name.
-        let (username, profile_drawn) = set_avatar_and_get_username(
+        let avatar_ref = item.avatar(id!(avatar));
+        let (username, profile_drawn) = avatar_ref.set_avatar_and_get_username(
             cx,
-            item.avatar(id!(avatar)),
             room_id,
             event_tl_item.sender(),
-            event_tl_item.sender_profile(),
+            Some(event_tl_item.sender_profile()),
             event_tl_item.event_id(),
         );
         // Draw the timestamp as part of the profile.
@@ -3492,6 +3576,7 @@ fn populate_small_state_event(
         username
     });
 
+    item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
     // Proceed to draw the actual event content.
     event_content.populate_item_content(
         cx,
@@ -3518,102 +3603,6 @@ fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSeco
     }
 }
 
-/// Sets the given avatar and returns a displayable username based on the
-/// given profile and user ID of the sender of the event with the given event ID.
-///
-/// If the sender profile is not ready, this function will submit an async request
-/// to fetch the sender profile from the server, but only if the event ID is `Some`.
-///
-/// This function will always choose a nice, displayable username and avatar.
-///
-/// The specific behavior is as follows:
-/// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
-///   will be the user's display name and avatar image, if available.
-///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
-/// * If no avatar image is available, then the `avatar` will be set to the first character
-///   of the user's display name, if available.
-/// * If the user's display name is not available or has not been set, the user ID
-///   will be used for the `username`, and the first character of the user ID for the `avatar`.
-/// * If the timeline event's sender profile isn't ready and the user ID isn't found in
-///   our user profile cache , then the `username` and `avatar`  will be the user ID
-///   and the first character of that user ID, respectively.
-///
-/// ## Return
-/// Returns a tuple of:
-/// 1. The displayable username that should be used to populate the username field.
-/// 2. A boolean indicating whether the user's profile info has been completely drawn
-///    (for purposes of caching it to avoid future redraws).
-fn set_avatar_and_get_username(
-    cx: &mut Cx,
-    avatar: AvatarRef,
-    room_id: &OwnedRoomId,
-    sender_user_id: &UserId,
-    sender_profile: &TimelineDetails<Profile>,
-    event_id: Option<&EventId>,
-) -> (String, bool) {
-    // Get the display name and avatar URL from the sender's profile, if available,
-    // or if the profile isn't ready, fall back to qeurying our user profile cache.
-    let (username_opt, avatar_state) = match sender_profile {
-        TimelineDetails::Ready(profile) => (
-            profile.display_name.clone(),
-            AvatarState::Known(profile.avatar_url.clone()),
-        ),
-        not_ready => {
-            if matches!(not_ready, TimelineDetails::Unavailable) {
-                if let Some(event_id) = event_id {
-                    submit_async_request(MatrixRequest::FetchDetailsForEvent {
-                        room_id: room_id.to_owned(),
-                        event_id: event_id.to_owned(),
-                    });
-                }
-            }
-            // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
-            user_profile_cache::with_user_profile(cx, sender_user_id, |profile, room_members| {
-                room_members
-                    .get(room_id)
-                    .map(|rm| {
-                        (
-                            rm.display_name().map(|n| n.to_owned()),
-                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                        )
-                    })
-                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-            })
-            .unwrap_or((None, AvatarState::Unknown))
-        }
-    };
-
-    let (avatar_img_data_opt, profile_drawn) = match avatar_state {
-        AvatarState::Loaded(data) => (Some(data), true),
-        AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
-            AvatarCacheEntry::Loaded(data) => (Some(data), true),
-            AvatarCacheEntry::Failed => (None, true),
-            AvatarCacheEntry::Requested => (None, false),
-        },
-        AvatarState::Known(None) | AvatarState::Failed => (None, true),
-        AvatarState::Unknown => (None, false),
-    };
-
-    // Set sender to the display name if available, otherwise the user id.
-    let username = username_opt
-        .clone()
-        .unwrap_or_else(|| sender_user_id.to_string());
-
-    // Set the sender's avatar image, or use the username if no image is available.
-    avatar_img_data_opt.and_then(|data|
-        avatar.show_image(
-            Some((sender_user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone()).into()),
-            |img| utils::load_png_or_jpg(&img, cx, &data)
-        )
-        .ok()
-    )
-    .unwrap_or_else(|| avatar.show_text(
-        Some((sender_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
-        &username,
-    ));
-    (username, profile_drawn)
-}
-
 /// Returns the display name of the sender of the given `event_tl_item`, if available.
 fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String> {
     if let TimelineDetails::Ready(profile) = event_tl_item.sender_profile() {
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 0e69c1c..163fad8 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -9,11 +9,11 @@
 use std::sync::Arc;
 
 use makepad_widgets::*;
-use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
+use matrix_sdk::ruma::{EventId, OwnedRoomId, OwnedUserId, RoomId, UserId};
+use matrix_sdk_ui::timeline::{Profile, TimelineDetails};
 
 use crate::{
-    profile::user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId},
-    utils,
+    avatar_cache::{self, AvatarCacheEntry}, profile::{user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId}, user_profile_cache}, sliding_sync::{submit_async_request, MatrixRequest}, utils
 };
 
 live_design! {
@@ -209,6 +209,125 @@ impl Avatar {
             AvatarDisplayStatus::Text
         }
     }
+    /// Returns a hit event based on user interaction with the avatar
+    /// 
+    /// # Parameters
+    /// - `cx`: The draw context
+    /// - `event`: The input event
+    /// - `sweep_area`: The area to check for hits
+    /// 
+    /// # Returns
+    /// A `Hit` representing the type of interaction (hover, click, etc.)
+    fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Hit {
+        event.hits_with_options(
+            cx,
+            self.area(),
+            HitOptions::new().with_sweep_area(sweep_area))
+    }
+    /// Sets the given avatar and returns a displayable username based on the
+    /// given profile and user ID of the sender of the event with the given event ID.
+    fn set_avatar_and_get_username(
+        &mut self,
+        cx: &mut Cx,
+        room_id: &RoomId,
+        avatar_user_id: &UserId,
+        avatar_profile_opt: Option<&TimelineDetails<Profile>>,
+        event_id: Option<&EventId>,
+    ) -> (String, bool) {
+        // Get the display name and avatar URL from the user's profile, if available,
+        // or if the profile isn't ready, fall back to qeurying our user profile cache.
+        let (username_opt, avatar_state) = match avatar_profile_opt {
+            Some(TimelineDetails::Ready(profile)) => (
+                profile.display_name.clone(),
+                AvatarState::Known(profile.avatar_url.clone()),
+            ),
+            Some(not_ready) => {
+                if matches!(not_ready, TimelineDetails::Unavailable) {
+                    if let Some(event_id) = event_id {
+                        submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                            room_id: room_id.to_owned(),
+                            event_id: event_id.to_owned(),
+                        });
+                    }
+                }
+                // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
+                user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
+                    room_members
+                        .get(room_id)
+                        .map(|rm| {
+                            (
+                                rm.display_name().map(|n| n.to_owned()),
+                                AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                            )
+                        })
+                        .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+                })
+                .unwrap_or((None, AvatarState::Unknown))
+            }
+            None => {
+                match user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
+                    room_members
+                        .get(room_id)
+                        .map(|rm| {
+                            (
+                                rm.display_name().map(|n| n.to_owned()),
+                                AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                            )
+                        })
+                        .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+                }) {
+                    Some((profile_name, avatar_state)) => {
+                        (profile_name, avatar_state)
+                    }
+                    None => {
+                        submit_async_request(MatrixRequest::GetUserProfile { 
+                            user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
+                        });
+                        (None, AvatarState::Unknown)
+                    }
+                }
+            }
+        };
+
+        let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
+            AvatarState::Loaded(data) => (Some(data), true),
+            AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
+                AvatarCacheEntry::Loaded(data) => (Some(data), true),
+                AvatarCacheEntry::Failed => (None, true),
+                AvatarCacheEntry::Requested => (None, false),
+            },
+            AvatarState::Known(None) | AvatarState::Failed => (None, true),
+            AvatarState::Unknown => (None, false),
+        };
+
+        // Set sender to the display name if available, otherwise the user id.
+        let username = username_opt
+            .clone()
+            .unwrap_or_else(|| avatar_user_id.to_string());
+
+        // Set the sender's avatar image, or use the username if no image is available.
+        avatar_img_data_opt
+            .and_then(|data| {
+                self
+                    .show_image(
+                        Some((
+                            avatar_user_id.to_owned(),
+                            username_opt.clone(),
+                            room_id.to_owned(),
+                            data.clone()).into(),
+                        ),
+                        |img| utils::load_png_or_jpg(&img, cx, &data),
+                    )
+                    .ok()
+            })
+            .unwrap_or_else(|| {
+                self.show_text(
+                    Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
+                    &username,
+                )
+            });
+        (username, profile_drawn)
+    }
 }
 
 impl AvatarRef {
@@ -245,7 +364,59 @@ impl AvatarRef {
         } else {
             AvatarDisplayStatus::Text
         }
-    }    
+    }
+    /// Returns a hit event based on user interaction with the avatar
+    /// 
+    /// # Parameters
+    /// - `cx`: The draw context
+    /// - `event`: The input event
+    /// - `sweep_area`: The area to check for hits
+    /// 
+    /// # Returns
+    /// A `Hit` representing the type of interaction (hover, click, etc.)
+    pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Option<Hit> {
+        self.borrow_mut().map(|mut inner| inner.hit(cx, event, sweep_area))
+    }
+    /// Sets the given avatar and returns a displayable username based on the
+    /// given profile and user ID of the sender of the event with the given event ID.
+    ///
+    /// If the user profile is not ready, this function will submit an async request
+    /// to fetch the user profile from the server, but only if the event ID is `Some`.
+    /// For Read Receipt cases, there is no user's profile. The Avatar cache is taken from the sender's profile 
+    ///
+    /// This function will always choose a nice, displayable username and avatar.
+    ///
+    /// The specific behavior is as follows:
+    /// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
+    ///   will be the user's display name and avatar image, if available.
+    ///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
+    /// * If no avatar image is available, then the `avatar` will be set to the first character
+    ///   of the user's display name, if available.
+    /// * If the user's display name is not available or has not been set, the user ID
+    ///   will be used for the `username`, and the first character of the user ID for the `avatar`.
+    /// * If the timeline event's sender profile isn't ready and the user ID isn't found in
+    ///   our user profile cache , then the `username` and `avatar`  will be the user ID
+    ///   and the first character of that user ID, respectively.
+    ///
+    /// ## Return
+    /// Returns a tuple of:
+    /// 1. The displayable username that should be used to populate the username field.
+    /// 2. A boolean indicating whether the user's profile info has been completely drawn
+    ///    (for purposes of caching it to avoid future redraws).
+    pub fn set_avatar_and_get_username(
+        &self,
+        cx: &mut Cx,
+        room_id: &RoomId,
+        avatar_user_id: &UserId,
+        avatar_profile_opt: Option<&TimelineDetails<Profile>>,
+        event_id: Option<&EventId>,
+    ) -> (String, bool) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_avatar_and_get_username(cx, room_id, avatar_user_id, avatar_profile_opt, event_id)
+        } else {
+            (avatar_user_id.to_string(), false)
+        }
+    }
 }
 
 /// What an Avatar instance is currently displaying.
diff --git a/src/utils.rs b/src/utils.rs
index a893d57..e782b2e 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -278,7 +278,36 @@ pub fn ends_with_href(text: &str) -> bool {
     substr.trim_end().ends_with("href")
 }
 
+/// Converts a list of names into a human-readable string with a chunk of 2 names in a line
+///
+/// # Examples
+/// ```
+/// assert_eq!(human_readable_list(vec!["Alice"]), "Alice");
+/// assert_eq!(human_readable_list(vec!["Alice", "Bob"]), "Alice and Bob");
+/// assert_eq!(human_readable_list(vec!["Alice", "Bob", "Charlie"]), "Alice, Bob\n and Charlie");
+/// ```
+pub fn human_readable_list(names: Vec<String>) -> String {
+    match names.len() {
+        0 => String::new(),
+        1 => names[0].clone(),
+        2 => format!("{} and {}", names[0], names[1]),
+        _ => {
+            let mut result = String::new();
+            let chunked_names = names.chunks(2);
+
+            for chunk in chunked_names {
+                if result.is_empty() {
+                    result.push_str(&chunk.join(", "));
+                } else {
+                    result.push_str(&format!("\n{}", chunk.join(", ")));
+                }
+            }
 
+            let last = result.split("\n").last().unwrap();
+            format!("{}, and {}", result.trim_end(), last)
+        }
+    }
+}
 
 #[cfg(test)]
 mod tests_linkify {