diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index acbf7bc5..1229a174 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,7 +1,7 @@
 //! A room screen is the UI view that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{borrow::Cow, cell::RefCell, collections::BTreeMap, ops::{DerefMut, Range}, sync::Arc};
+use std::{borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
 
 use bytesize::ByteSize;
 use imbl::Vector;
@@ -318,6 +318,7 @@ live_design! {
                 edited_indicator = <EditedIndicator> { }
                 tsp_sign_indicator = <TspSignIndicator> { }
             }
+
             content = <View> {
                 width: Fill,
                 height: Fit
@@ -379,6 +380,7 @@ live_design! {
                 edited_indicator = <EditedIndicator> { }
                 tsp_sign_indicator = <TspSignIndicator> { }
             }
+
             content = <View> {
                 width: Fill,
                 height: Fit,
@@ -441,12 +443,47 @@ live_design! {
     SmallStateEvent = <View> {
         width: Fill,
         height: Fit,
-        flow: Right,
+        flow: Down,
         margin: { top: 4.0, bottom: 4.0}
         padding: { top: 1.0, bottom: 1.0, right: 10.0 }
         spacing: 0.0
         cursor: Default
-
+        small_state_header = <View> {
+            width: Fill,
+            height: Fit
+            visible: false
+            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
+            summary_text = <Label> {
+                width: Fill,
+                flow: Right, // do not wrap
+                padding: 0,
+                draw_text: {
+                    wrap: Word,
+                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                    color: (SMALL_STATE_TEXT_COLOR)
+                }
+            }
+            // Collapsible button for small state event groups
+            // Shows on the first item of each group to toggle expansion
+            // Text is dynamically updated: ▼ (collapsed) or ▲ (expanded)
+            collapsible_button = <Button> {
+                width: Fit,
+                height: Fit,
+                margin: { left: 5, right: 5 }
+                padding: { left: 4, right: 4, top: 2, bottom: 2 }
+                text: "▼"  // Default to collapsed state
+                draw_text: {
+                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                    color: #666
+                }
+                draw_bg: {
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        return sdf.result
+                    }
+                }
+            }
+        }
         body = <View> {
             width: Fill,
             height: Fit
@@ -473,7 +510,7 @@ live_design! {
                     text_style: <TITLE_TEXT>{ font_size: 7.0 }
                 }}}
             }
-
+            
             content = <Label> {
                 width: Fill,
                 height: Fit
@@ -485,6 +522,9 @@ live_design! {
                 }
                 text: ""
             }
+            
+            
+            
             // Center the Avatar vertically with respect to the SmallStateEvent content.
             avatar_row = <AvatarRow> { margin: {top: -1.0} }
         }
@@ -875,7 +915,7 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
-            for (_, wr) in portal_list.items_with_actions(actions) {
+            for (item_id, wr) in portal_list.items_with_actions(actions) {
                 let reaction_list = wr.reaction_list(id!(reaction_list));
                 if let RoomScreenTooltipActions::HoverInReactionButton {
                     widget_rect,
@@ -934,6 +974,32 @@ impl Widget for RoomScreen {
                         TooltipAction::HoverOut
                     );
                 }
+
+                // Handle collapsible button click in SmallStateEvent
+                if wr.button(id!(collapsible_button)).clicked(actions) {
+                    if let Some(tl_state) = &mut self.tl_state {
+                        for (range, open, _state_type_group) in &mut tl_state.small_state_groups {
+                            if range.start == item_id {
+                                // Toggle the group's open/closed state
+                                *open = !*open;
+                                
+                                // Force redraw of all items in this group by clearing their cached drawn status
+                                tl_state.content_drawn_since_last_update.remove(range.clone());
+                                tl_state.profile_drawn_since_last_update.remove(range.clone());
+                                
+                                // Update button text to reflect new state:
+                                // ▲ (up arrow) = expanded/open - items are visible
+                                // ▼ (down arrow) = collapsed/closed - items are hidden
+                                let button_text = if *open { "▲" } else { "▼" };
+                                wr.button(id!(collapsible_button)).set_text(cx, button_text);
+                                // If the last item is a group of small state events, scroll to the end when it is expanded.
+                                if range.end == tl_state.items.len() && *open {
+                                    portal_list.smooth_scroll_to_end(cx, 90.0, None);
+                                }
+                            }
+                        }
+                    }
+                }
             }
 
             self.handle_message_actions(cx, actions, &portal_list, &loading_pane);
@@ -1053,7 +1119,6 @@ impl Widget for RoomScreen {
                 }
             }
 
-
             // Handle the send message button being clicked or Cmd/Ctrl + Return being pressed.
             if self.button(id!(send_message_button)).clicked(actions)
                 || text_input.returned(actions).is_some_and(|(_, m)| m.is_primary())
@@ -1328,11 +1393,12 @@ 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 prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
+                    let next_event = tl_idx.checked_add(1).and_then(|i| tl_items.get(i));
                     let (item, item_new_draw_status) = match timeline_item.kind() {
                         TimelineItemKind::Event(event_tl_item) => match event_tl_item.content() {
                             TimelineItemContent::MsgLike(msg_like_content) => match &msg_like_content.kind {
                                 MsgLikeKind::Message(_) | MsgLikeKind::Sticker(_) => {
-                                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
                                     populate_message_view(
                                         cx,
                                         list,
@@ -1354,8 +1420,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     poll_state,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1363,8 +1432,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1372,8 +1444,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     utd,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1381,8 +1456,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     other,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1391,8 +1469,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
+                                prev_event,
+                                next_event,
                                 membership_change,
                                 item_drawn_status,
+                                &mut tl_state.small_state_groups,
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1400,8 +1481,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
+                                prev_event,
+                                next_event,
                                 profile_change,
                                 item_drawn_status,
+                                &mut tl_state.small_state_groups,
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1409,8 +1493,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
+                                prev_event,
+                                next_event,
                                 other,
                                 item_drawn_status,
+                                &mut tl_state.small_state_groups,
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, live_id!(SmallStateEvent));
@@ -1596,7 +1683,27 @@ impl RoomScreen {
                     } else {
                         tl.content_drawn_since_last_update.remove(changed_indices.clone());
                         tl.profile_drawn_since_last_update.remove(changed_indices.clone());
-                        // log!("Timeline::handle_event(): changed_indices: {changed_indices:?}, items len: {}\ncontent drawn: {:#?}\nprofile drawn: {:#?}", items.len(), tl.content_drawn_since_last_update, tl.profile_drawn_since_last_update);
+                    }
+                    // Handles item_id changes whenever there is a backward pagination.  
+                    if !is_append {
+                        // Calculate the shift amount based on the difference between old and new lengths
+                        let old_len = tl.items.len();
+                        let new_len = new_items.len();
+                        let shift = new_len as i32 - old_len as i32;
+                        // Apply the shift to the small_state_groups.
+                        // for (range, _, state_type_group) in &mut tl.small_state_groups {
+                        //     let new_start = (range.start as i32 + shift).max(0) as usize;
+                        //     let new_end = (range.end as i32 + shift).max(0) as usize;
+                        //     *range = new_start..new_end;
+                        //     for (_state_type, group) in state_type_group.iter_mut() {
+                        //         for range in group.iter_mut() {
+                        //             let new_start = (range.start as i32 + shift).max(0) as usize;
+                        //             let new_end = (range.end as i32 + shift).max(0) as usize;
+                        //             *range = new_start..new_end;
+                        //         }
+                        //     }
+                        //     //state_type_group.clear();
+                        // }
                     }
                     tl.items = new_items;
                     done_loading = true;
@@ -2366,6 +2473,7 @@ impl RoomScreen {
                 scrolled_past_read_marker: false,
                 latest_own_user_receipt: None,
                 tombstone_info: successor_room,
+                small_state_groups: Vec::new(),
             };
             (tl_state, true)
         };
@@ -2943,6 +3051,10 @@ struct TimelineUiState {
     /// If the room is not tombstoned, then this is `None`.
     ///
     tombstone_info: Option<SuccessorRoom>,
+    /// A vector of ranges of small state items that are grouped together in the UI and summary text.
+    /// 
+    /// There is a collapsible to the right of the message of the first item in the group. 
+    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<Range<usize>>>)>
 }
 
 #[derive(Default, Debug)]
@@ -4027,6 +4139,140 @@ fn populate_preview_of_timeline_item(
     widget_out.show_html(cx, html);
 }
 
+/// Checks if a event timeline item is a small state event.
+/// Returns true if the item is a small state event that can be grouped.
+fn is_small_state_event_and_type(
+    event_tl_item: &EventTimelineItem,
+) -> (bool, String) {
+    match &event_tl_item.content() {
+        TimelineItemContent::MembershipChange(_) => {
+            return (true, String::from("Membership Change"))
+        }
+        TimelineItemContent::ProfileChange(_) => {
+            return (true, String::from("Profile Change"))
+        }
+        TimelineItemContent::OtherState(_) => {
+            return (true, String::from("Other State"))
+        }
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::Poll(_) ,
+            ..
+        }) => {
+            //| MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_)
+            return (true, String::from("Poll"))
+        }
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::Redacted,
+            ..
+        }) => {
+            //| MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_)
+            return (true, String::from("Redacted"))
+        }
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::UnableToDecrypt(_) ,
+            ..
+        }) => {
+            return (true, String::from("Unable to decrypt"))
+        }
+        _ => { return (false, String::from("")) }
+    }
+    
+}
+
+/// Dynamically updates small state groups as timeline items are processed.
+/// This function is called during populate_small_state_event to build groups on-demand.
+/// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
+/// Returns a tuple whether to display the message, and whether to display the collapsible button, whether collapsible list is expanded and summary text.
+fn update_small_state_groups_for_item(
+    item_id: usize,
+    current_item: &EventTimelineItem,
+    previous_item: Option<&Arc<TimelineItem>>,
+    next_item: Option<&Arc<TimelineItem>>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<std::ops::Range<usize>>>)>,
+) -> (bool, bool, bool, String) {
+    let (current_item_is_small_state, current_state_type) = is_small_state_event_and_type(current_item);
+
+    if !current_item_is_small_state {
+        return (true, false, false, String::from("")); // Not a small state event, draw as individual item, no debug button
+    }
+
+    // check if the next item (item_id + 1) is a small state event to continue grouping
+    let (next_item_is_small_state, _) = next_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event_and_type)
+        .unwrap_or((false, String::from("")));
+    let (previous_item_is_small_state, _) = previous_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event_and_type)
+        .unwrap_or((false, String::from("")));
+    if !previous_item_is_small_state && !next_item_is_small_state {
+        return (true, false, false, String::new()); // Isolated small state event, no debug button
+    }
+
+    // Check if this item is already part of an existing group or can extend one
+    for (range, is_open, state_type_group) in small_state_groups.iter_mut() {
+        if let Some(state_ranges) = state_type_group.get_mut(&current_state_type) {
+            let mut to_insert = true;
+            for state_range in state_ranges.iter_mut() {
+                if state_range.contains(&item_id) {
+                    to_insert = false;
+                    break
+                }
+                if state_range.start == item_id + 1 {
+                    state_range.start = item_id;
+                    to_insert = false;
+                    break
+                }
+                if state_range.end == item_id {
+                    state_range.end = item_id + 1;
+                    to_insert = false;
+                    break
+                }
+            }
+            if to_insert {
+                state_ranges.push(item_id..item_id+1);
+            }
+        } else {
+            state_type_group.insert(current_state_type.clone(), vec![item_id..item_id+1]);
+        }
+        if range.start == item_id {
+            let summary: Vec<String> = state_type_group.iter().map(
+                |(state_type, ranges)| {
+                    let total_length = ranges.iter().fold(0, |acc, range| acc + (range.end - range.start));
+                    format!("{}: {}", state_type, total_length)
+                }
+            ).collect();
+            return (true, true, *is_open, summary.join(", ")); // Start of group, show debug button
+        }
+        if range.contains(&item_id) {
+            let summary: Vec<String> = state_type_group.iter().map(
+                |(state_type, ranges)| {
+                    let total_length = ranges.iter().fold(0, |acc, range| acc + (range.end - range.start));
+                    format!("{}: {}", state_type, total_length)
+                }
+            ).collect();
+            return (*is_open, false, *is_open, summary.join(", ")); // Item is in group but not at start, no debug button
+        }
+        // Since we're iterating backwards (from highest to lowest item_id),
+        if range.start == item_id + 1 {
+            // Extend this group backwards to include current item
+            *range = item_id..range.end;
+            return (*is_open, false, false, String::from("")); // Extended group, no debug button for this item
+        }
+        
+    }
+    if next_item_is_small_state {
+        // Plus two to include the next item into the group.
+        small_state_groups.push((item_id..(item_id + 2), false, HashMap::new()));
+    }
+    (false, false, false, String::from("")) // Return collapsed state, no debug button
+}
 
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
@@ -4239,8 +4485,11 @@ fn populate_small_state_event(
     item_id: usize,
     room_id: &OwnedRoomId,
     event_tl_item: &EventTimelineItem,
+    prev_event: Option<&Arc<TimelineItem>>,
+    next_event: Option<&Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<Range<usize>>>)>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
@@ -4248,6 +4497,54 @@ fn populate_small_state_event(
     // 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;
     let skip_redrawing_content = skip_redrawing_profile && item_drawn_status.content_drawn;
+    
+    // Dynamically determine group membership and update groups
+    // Returns: (opened, show_collapsible_button, expanded)
+    // - opened: whether this individual item should be rendered (based on group state)
+    // - show_collapsible_button: true if this item is the first in a collapsible group
+    // - expanded: current expansion state of the group (for button text)
+    
+    let (opened, show_collapsible_button, expanded, summary_text) = update_small_state_groups_for_item(
+        item_id,
+        event_tl_item,
+        prev_event,
+        next_event,
+        small_state_groups,
+    );
+    // Only show the collapsible button on the first item of each group
+    item.button(id!(collapsible_button))
+        .set_visible(cx, show_collapsible_button);
+    // Render logic based on group state
+    if opened {
+        if skip_redrawing_content {
+            return (item, new_drawn_status);
+        }
+        // This item should be visible - set appropriate button text if this is a group leader
+        if show_collapsible_button {
+            let avatar_ref = item.avatar(id!(avatar));
+            let button_text = if expanded { "▲" } else { "▼" };
+            item.button(id!(collapsible_button))
+                .set_text(cx, button_text);
+            item.view(id!(small_state_header)).set_visible(cx, true);
+            item.label(id!(small_state_header.summary_text))
+                .set_text(cx, &summary_text);
+            new_drawn_status.content_drawn = true;
+            if !expanded {
+                avatar_ref.set_visible(cx, false);
+                item.label(id!(content)).set_text(cx, "");
+                item.view(id!(left_container)).set_visible(cx, false);
+                return (item, new_drawn_status)
+            }
+            avatar_ref.set_visible(cx, true);
+            item.view(id!(left_container)).set_visible(cx, true);
+        }
+    } else {
+        if skip_redrawing_content {
+            return (item, new_drawn_status);
+        }
+        let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
+        return (item, new_drawn_status)
+    }
     populate_read_receipts(&item, cx, room_id, event_tl_item);
     if skip_redrawing_content {
         return (item, new_drawn_status);
@@ -4278,7 +4575,6 @@ fn populate_small_state_event(
         username
     });
 
-    // Proceed to draw the actual event content.
     event_content.populate_item_content(
         cx,
         list,