diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2ea7bdb1c..180183ca2 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -83,3 +83,11 @@ jobs:
       - uses: actions/checkout@v4
       - name: Check for typos
         uses: crate-ci/typos@master
+  setup-deepseek-review:
+    runs-on: ubuntu-latest
+    name: Code Review
+    steps:
+      - name: DeepSeek Code Review
+        uses: hustcer/deepseek-review@v1
+        with:
+          chat-token: ${{ secrets.CHAT_TOKEN }}
diff --git a/Cargo.lock b/Cargo.lock
index 564f7f0fc..706763b38 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3459,6 +3459,7 @@ dependencies = [
  "robius-location",
  "robius-open",
  "robius-use-makepad",
+ "ruma",
  "serde",
  "serde_json",
  "tokio",
diff --git a/Cargo.toml b/Cargo.toml
index aab6616fd..6cebb7955 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -54,6 +54,7 @@ bytesize = "1.3.0"
 bitflags = "2.6.0"
 indexmap = "2.6.0"
 blurhash = { version = "0.2.3", default-features = false }
+ruma = { git = "https://github.com/ruma/ruma", rev = "7755c7cbc580f8d8aea30d78cc1a6850b1a6fd39", default-features = false, features = ["api", "client-api-c"] }
 
 [package.metadata.docs.rs]
 all-features = true
diff --git a/src/app.rs b/src/app.rs
index 2f8949ee5..b48739a0e 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -4,7 +4,7 @@ use makepad_widgets::*;
 use matrix_sdk::ruma::OwnedRoomId;
 
 use crate::{
-    home::{main_desktop_ui::RoomsPanelAction, new_message_context_menu::NewMessageContextMenuWidgetRefExt, room_screen::MessageAction, rooms_list::RoomsListAction}, login::login_screen::LoginAction, shared::{callout_tooltip::{CalloutTooltipOptions, CalloutTooltipWidgetRefExt, TooltipAction}, popup_list::PopupNotificationAction}, verification::VerificationAction, verification_modal::{VerificationModalAction, VerificationModalWidgetRefExt}
+    home::{main_desktop_ui::RoomsPanelAction, new_message_context_menu::NewMessageContextMenuWidgetRefExt, room_screen::MessageAction, rooms_list::RoomsListAction}, login::login_screen::LoginAction, shared::{callout_tooltip::{CalloutTooltipOptions, CalloutTooltipWidgetRefExt, TooltipAction}, popup_list::PopupNotificationAction, search_bar::SearchBarWidgetRefExt}, verification::VerificationAction, verification_modal::{VerificationModalAction, VerificationModalWidgetRefExt}
 };
 
 live_design! {
@@ -193,6 +193,7 @@ impl MatchEvent for App {
         self.update_login_visibility(cx);
 
         log!("App::handle_startup(): starting matrix sdk loop");
+        self.app_state.search_widget = Some(self.ui.search_bar(id!(home_screen_search_bar)).widget_uid());
         crate::sliding_sync::start_matrix_tokio().unwrap();
     }
 
@@ -304,7 +305,6 @@ impl MatchEvent for App {
             if let VerificationModalAction::Close = action.as_widget_action().cast() {
                 self.ui.modal(id!(verification_modal)).close(cx);
             }
-
             // // message source modal handling.
             // match action.as_widget_action().cast() {
             //     MessageAction::MessageSourceModalOpen { room_id: _, event_id: _, original_json: _ } => {
@@ -407,6 +407,10 @@ pub struct AppState {
     pub logged_in: bool,
     /// The current window geometry.
     pub window_geom: Option<event::WindowGeom>,
+    /// Main Desktop Ui's search widget uid.
+    /// Room screens will get this widget uid to differentiate search action 
+    /// from search bar widget.
+    pub search_widget: Option<WidgetUid>,
 }
 
 #[derive(Default, Debug)]
diff --git a/src/event_preview.rs b/src/event_preview.rs
index ae857b717..1b59d9b7e 100644
--- a/src/event_preview.rs
+++ b/src/event_preview.rs
@@ -75,7 +75,7 @@ pub fn text_preview_of_timeline_item(
             text_preview_of_member_profile_change(profile_change, sender_username)
         }
         TimelineItemContent::OtherState(other_state) => {
-            text_preview_of_other_state(other_state)
+            text_preview_of_other_state(other_state.content(),other_state.state_key())
                 .unwrap_or_else(|| TextPreview::from((
                     String::from("<i>initiated another state change</i>"),
                     BeforeText::UsernameWithoutColon,
@@ -132,7 +132,7 @@ pub fn body_of_timeline_item(
             ).text
         }
         TimelineItemContent::OtherState(other_state) => {
-            text_preview_of_other_state(other_state)
+            text_preview_of_other_state(other_state.content(), other_state.state_key())
                 .unwrap_or_else(|| TextPreview::from((
                     String::from("initiated another state change."),
                     BeforeText::UsernameWithoutColon,
@@ -290,12 +290,12 @@ pub fn text_preview_of_redacted_message(
     TextPreview::from((text, BeforeText::Nothing))
 }
 
-
 /// Returns a text preview of the given other state event as an Html-formatted string.
 pub fn text_preview_of_other_state(
-    other_state: &timeline::OtherState,
+    other_state: &AnyOtherFullStateEventContent,
+    state_key: &str
 ) -> Option<TextPreview> {
-    let text = match other_state.content() {
+    let text = match other_state {
         AnyOtherFullStateEventContent::RoomAliases(FullStateEventContent::Original { content, .. }) => {
             let mut s = String::from("set this room's aliases to ");
             let last_alias = content.aliases.len() - 1;
@@ -370,10 +370,10 @@ pub fn text_preview_of_other_state(
             Some(format!("changed this room's topic to {:?}.", content.topic))
         }
         AnyOtherFullStateEventContent::SpaceParent(_) => {
-            Some(format!("set this room's parent space to {}.", other_state.state_key()))
+            Some(format!("set this room's parent space to {}.", state_key))
         }
         AnyOtherFullStateEventContent::SpaceChild(_) => {
-            Some(format!("added a new child to this space: {}.", other_state.state_key()))
+            Some(format!("added a new child to this space: {}.", state_key))
         }
         _other => {
             // log!("*** Unhandled: {:?}.", _other);
@@ -382,8 +382,6 @@ pub fn text_preview_of_other_state(
     };
     text.map(|t| TextPreview::from((t, BeforeText::UsernameWithoutColon)))
 }
-
-
 /// Returns a text preview of the given member profile change as a plaintext string.
 pub fn text_preview_of_member_profile_change(
     change: &MemberProfileChange,
diff --git a/src/home/home_screen.rs b/src/home/home_screen.rs
index 483931049..09ce6957a 100644
--- a/src/home/home_screen.rs
+++ b/src/home/home_screen.rs
@@ -31,7 +31,7 @@ live_design! {
             <View> {
                 flow: Down
                 width: Fill, height: Fill
-                <SearchBar> {}
+                home_screen_search_bar = <SearchBar> {}
                 <MainDesktopUI> {}
             }
         }
diff --git a/src/home/main_desktop_ui.rs b/src/home/main_desktop_ui.rs
index ff195bf61..0898a39f8 100644
--- a/src/home/main_desktop_ui.rs
+++ b/src/home/main_desktop_ui.rs
@@ -169,7 +169,7 @@ impl MainDesktopUI {
 
         // create a new tab for the room
         let (tab_bar, _pos) = dock.find_tab_bar_of_tab(live_id!(home_tab)).unwrap();
-        let kind = live_id!(room_screen);
+        let kind: LiveId = live_id!(room_screen);
 
         let result = dock.create_and_select_tab(
             cx,
@@ -234,10 +234,10 @@ impl MainDesktopUI {
                 self.most_recently_selected_room = None;
             }
         }
-
         dock.close_tab(cx, tab_id);
         self.tab_to_close = None;
         self.open_rooms.remove(&tab_id);
+        dock.item(tab_id).as_room_screen().close_search(cx);
     }
 }
 
diff --git a/src/home/mod.rs b/src/home/mod.rs
index 8c1fdf799..771b6b9ba 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -9,6 +9,7 @@ pub mod main_mobile_ui;
 pub mod room_preview;
 pub mod room_screen;
 pub mod room_read_receipt;
+pub mod room_search_result;
 pub mod rooms_list;
 pub mod rooms_sidebar;
 pub mod spaces_dock;
@@ -24,6 +25,7 @@ pub fn live_design(cx: &mut Cx) {
     editing_pane::live_design(cx);
     new_message_context_menu::live_design(cx);
     room_screen::live_design(cx);
+    room_search_result::live_design(cx);
     room_read_receipt::live_design(cx);
     rooms_sidebar::live_design(cx);
     main_mobile_ui::live_design(cx);
diff --git a/src/home/new_message_context_menu.rs b/src/home/new_message_context_menu.rs
index c5afe4819..cb1749406 100644
--- a/src/home/new_message_context_menu.rs
+++ b/src/home/new_message_context_menu.rs
@@ -4,11 +4,12 @@
 use bitflags::bitflags;
 use makepad_widgets::*;
 use matrix_sdk::ruma::OwnedEventId;
-use matrix_sdk_ui::timeline::EventTimelineItem;
+use matrix_sdk_ui::timeline::InReplyToDetails;
+use ruma::events::room::message::MessageType;
 
 use crate::sliding_sync::UserPowerLevels;
 
-use super::room_screen::{MessageAction, MessageOrSticker};
+use super::room_screen::{MessageViewFromEvent, MessageAction, MessageOrSticker};
 
 const BUTTON_HEIGHT: f64 = 30.0; // KEEP IN SYNC WITH BUTTON_HEIGHT BELOW
 const MENU_WIDTH: f64 = 215.0;   // KEEP IN SYNC WITH MENU_WIDTH BELOW
@@ -283,10 +284,10 @@ bitflags! {
     }
 }
 impl MessageAbilities {
-    pub fn from_user_power_and_event(
+    pub fn from_user_power_and_event<T: MessageViewFromEvent, M: ContextMenuFromEvent>(
         user_power_levels: &UserPowerLevels,
-        event_tl_item: &EventTimelineItem,
-        _message: &MessageOrSticker,
+        event_tl_item: &T,
+        _message: &MessageOrSticker<M>,
         has_html: bool,
     ) -> Self {
         let mut abilities = Self::empty();
@@ -305,7 +306,6 @@ impl MessageAbilities {
         abilities.set(Self::HasHtml, has_html);
         abilities
     }
-
 }
 
 /// Details about the message that define its context menu content.
@@ -657,3 +657,10 @@ impl NewMessageContextMenuRef {
         inner.show(cx, details)
     }
 }
+/// A trait for event that can be used to show context menus.
+pub trait ContextMenuFromEvent {
+    fn msgtype(&self) -> &MessageType;
+    fn body(&self) -> &str;
+    fn in_reply_to(&self) -> Option<&InReplyToDetails>;
+    fn is_searched_result(&self) -> bool;
+}
\ No newline at end of file
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 12a8311b6..3d51f29a0 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -5,9 +5,10 @@ use crate::utils::human_readable_list;
 use indexmap::IndexMap;
 use makepad_widgets::*;
 use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
-use matrix_sdk_ui::timeline::EventTimelineItem;
 use std::cmp;
 
+use super::room_screen::MessageViewFromEvent;
+
 
 /// The maximum number of items to display in the read receipts AvatarRow
 /// and its accompanying tooltip.
@@ -220,18 +221,20 @@ impl AvatarRowRef {
 /// room ID, and an EventTimelineItem, this will populate the avatar
 /// row of the item with the read receipts of the event.
 ///
-pub fn populate_read_receipts(
+pub fn populate_read_receipts<T: MessageViewFromEvent>(
     item: &WidgetRef,
     cx: &mut Cx,
     room_id: &RoomId,
-    event_tl_item: &EventTimelineItem,
+    event_tl_item: &T,
 ) {
-    item.avatar_row(id!(avatar_row)).set_avatar_row(
-        cx,
-        room_id,
-        event_tl_item.event_id(),
-        event_tl_item.read_receipts(),
-    );
+    if let Some(read_receipts) = event_tl_item.read_receipts() {
+        item.avatar_row(id!(avatar_row)).set_avatar_row(
+            cx,
+            room_id,
+            event_tl_item.event_id(),
+            read_receipts,
+        );
+    }
 }
 
 /// Populate the tooltip text for a read receipts avatar row.
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 3e663532b..48ac4003f 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,10 +1,11 @@
 //! A room screen is the UI page that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{borrow::Cow, collections::BTreeMap, ops::{DerefMut, Range}, sync::{Arc, Mutex}, time::SystemTime};
+use std::{borrow::Cow, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::{Arc, Mutex}, time::SystemTime};
 
 use bytesize::ByteSize;
 use imbl::Vector;
+use indexmap::IndexMap;
 use makepad_widgets::{image_cache::ImageBuffer, *};
 use matrix_sdk::{room::RoomMember, ruma::{
     events::{receipt::Receipt, room::{
@@ -15,16 +16,17 @@ use matrix_sdk::{room::RoomMember, ruma::{
     sticker::StickerEventContent, Mentions}, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomId
 }, OwnedServerName};
 use matrix_sdk_ui::timeline::{
-    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineEventItemId, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
+    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineEventItemId, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
 };
 use robius_location::Coordinates;
+use ruma::{events::AnySyncTimelineEvent, serde::Raw, OwnedUserId, UserId};
 
 use crate::{
-    avatar_cache, event_preview::{body_of_timeline_item, 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_pane::{LoadingPaneState, LoadingPaneWidgetExt}, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    app::AppState, avatar_cache, event_preview::{body_of_timeline_item, 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_pane::{LoadingPaneState, LoadingPaneWidgetExt}, room_search_result::{append_to_tl_state, SearchTimeline}}, 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::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::enqueue_popup_notification, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::enqueue_popup_notification, search_bar::SearchBarAction, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineRequestSender, UserPowerLevels}, utils::{self, unix_time_millis_to_datetime, ImageFormat, MEDIA_THUMBNAIL_FORMAT}
 };
 use crate::home::event_reaction_list::ReactionListWidgetRefExt;
@@ -34,13 +36,13 @@ use crate::shared::mentionable_text_input::MentionableTextInputWidgetRefExt;
 
 use rangemap::RangeSet;
 
-use super::{editing_pane::{EditingPaneAction, EditingPaneWidgetExt}, event_reaction_list::ReactionData, loading_pane::LoadingPaneRef, new_message_context_menu::{MessageAbilities, MessageDetails}, room_read_receipt::{self, populate_read_receipts, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT}};
-
+use super::{editing_pane::{EditingPaneAction, EditingPaneWidgetExt}, event_reaction_list::ReactionData, loading_pane::LoadingPaneRef, new_message_context_menu::{ContextMenuFromEvent, MessageAbilities, MessageDetails}, room_read_receipt::{self, populate_read_receipts, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT}, room_search_result::{send_pagination_request_based_on_scroll_pos_for_search_result, CondensedSearchResult, SearchResultWidgetExt, SearchResultWidgetRefExt}, rooms_list::RoomsListWidgetExt};
 const GEO_URI_SCHEME: &str = "geo:";
 
 const MESSAGE_NOTICE_TEXT_COLOR: Vec3 = Vec3 { x: 0.5, y: 0.5, z: 0.5 };
 const COLOR_DANGER_RED: Vec3 = Vec3 { x: 0.862, y: 0.0, z: 0.02 };
-
+//LightGreen
+const SEARCH_HIGHLIGHT: Vec3 = Vec3 { x: 0.89, y: 0.967, z: 0.929 };
 
 live_design! {
     use link::theme::*;
@@ -63,6 +65,8 @@ live_design! {
     use crate::home::event_reaction_list::*;
     use crate::home::editing_pane::*;
     use crate::room::room_input_bar::*;
+    use crate::home::room_search_result::*;
+    use crate::room::room_input_bar::*;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
 
@@ -312,70 +316,83 @@ live_design! {
 
         body = <View> {
             width: Fill,
-            height: Fit
-            flow: Right,
-            padding: 10.0,
+            height: Fit,
+            flow: Overlay
+            body_inner = <View> {
 
-            profile = <View> {
-                align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
-                width: 65.0,
-                height: Fit,
-                margin: {top: 4.5, right: 10}
-                flow: Down,
-                avatar = <Avatar> {
-                    width: 50.,
-                    height: 50.
-                    // draw_bg: {
-                    //     fn pixel(self) -> vec4 {
-                    //         let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                    //         let c = self.rect_size * 0.5;
-                    //         sdf.circle(c.x, c.y, c.x - 2.)
-                    //         sdf.fill_keep(self.get_color());
-                    //         sdf.stroke((COLOR_PROFILE_CIRCLE), 1);
-                    //         return sdf.result
-                    //     }
-                    // }
-                }
-                timestamp = <Timestamp> {
-                    padding: { top: 3.0 }
-                }
-                datestamp = <Timestamp> {
-                    padding: { top: 3.0 }
-                }
-            }
-            content = <View> {
                 width: Fill,
                 height: Fit
-                flow: Down,
-                padding: 0.0
-                <View> {
-                    flow: Right,
-                    width: Fill,
+                flow: Right,
+                padding: 10.0,
+
+                profile = <View> {
+                    align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
+                    width: 65.0,
                     height: Fit,
-                    username = <Label> {
+                    margin: {top: 4.5, right: 10}
+                    flow: Down,
+                    avatar = <Avatar> {
+                        width: 50.,
+                        height: 50.
+                        // draw_bg: {
+                        //     fn pixel(self) -> vec4 {
+                        //         let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        //         let c = self.rect_size * 0.5;
+                        //         sdf.circle(c.x, c.y, c.x - 2.)
+                        //         sdf.fill_keep(self.get_color());
+                        //         sdf.stroke((COLOR_PROFILE_CIRCLE), 1);
+                        //         return sdf.result
+                        //     }
+                        // }
+                    }
+                    timestamp = <Timestamp> {
+                        padding: { top: 3.0 }
+                    }
+                    datestamp = <Timestamp> {
+                        padding: { top: 3.0 }
+                    }
+                }
+                content = <View> {
+                    width: Fill,
+                    height: Fit
+                    flow: Down,
+                    padding: 0.0
+                    <View> {
+                        flow: Right,
                         width: Fill,
-                        margin: {bottom: 9.0, top: 11.0, right: 10.0,}
-                        draw_text: {
-                            text_style: <USERNAME_TEXT_STYLE> {},
-                            color: (USERNAME_TEXT_COLOR)
-                            wrap: Ellipsis,
+                        height: Fit,
+                        username = <Label> {
+                            width: Fill,
+                            margin: {bottom: 9.0, top: 11.0, right: 10.0,}
+                            draw_text: {
+                                text_style: <USERNAME_TEXT_STYLE> {},
+                                color: (USERNAME_TEXT_COLOR)
+                                wrap: Ellipsis,
+                            }
+                            text: "<Username not available>"
                         }
-                        text: "<Username not available>"
                     }
-                }
 
-                message = <HtmlOrPlaintext> { }
+                    message = <HtmlOrPlaintext> { }
 
-                // <LineH> {
-                //     margin: {top: 13.0, bottom: 5.0}
-                // }
-                <View> {
-                    width: Fill,
-                    height: Fit
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
-                }
+                    // <LineH> {
+                    //     margin: {top: 13.0, bottom: 5.0}
+                    // }
+                    <View> {
+                        width: Fill,
+                        height: Fit
+                        reaction_list = <ReactionList> { }
+                        avatar_row = <AvatarRow> {}
+                    }
 
+                }
+            }
+            // Apply a whitish overlay over the searched result's contextual messages 
+            overlay_message = <View> {
+                width: Fill, height: Fill,
+                show_bg: true,
+                visible: false,
+                draw_bg: {color: (#FFFFFF80),}
             }
         }
     }
@@ -390,30 +407,33 @@ live_design! {
             }
         }
         body = {
-            padding: { top: 0, bottom: 2.5, left: 10.0, right: 10.0 },
-            profile = <View> {
-                align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
-                width: 65.0,
-                height: Fit,
-                flow: Down,
-                timestamp = <Timestamp> {
-                    margin: {top: 1.5}
+            body_inner = {
+                padding: { top: 0, bottom: 2.5, left: 10.0, right: 10.0 },
+                profile = <View> {
+                    align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
+                    width: 65.0,
+                    height: Fit,
+                    flow: Down,
+                    timestamp = <Timestamp> {
+                        margin: {top: 1.5}
+                    }
                 }
-            }
-            content = <View> {
-                width: Fill,
-                height: Fit,
-                flow: Down,
-                padding: { left: 10.0 }
-
-                message = <HtmlOrPlaintext> { }
-                <View> {
+                content = <View> {
                     width: Fill,
-                    height: Fit
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+                    height: Fit,
+                    flow: Down,
+                    padding: { left: 10.0 }
+    
+                    message = <HtmlOrPlaintext> { }
+                    <View> {
+                        width: Fill,
+                        height: Fit
+                        reaction_list = <ReactionList> { }
+                        avatar_row = <AvatarRow> {}
+                    }
                 }
             }
+            
         }
     }
 
@@ -421,20 +441,21 @@ live_design! {
     // This excludes stickers and other animated GIFs, video clips, audio clips, etc.
     ImageMessage = <Message> {
         body = {
-            content = {
-                width: Fill,
-                height: Fit
-                padding: { left: 10.0 }
-                message = <TextOrImage> { }
-                v = <View> {
+            body_inner = {
+                content = {
                     width: Fill,
-                    height: Fit,
-                    flow: Right,
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+                    height: Fit
+                    padding: { left: 10.0 }
+                    message = <TextOrImage> { }
+                    v = <View> {
+                        width: Fill,
+                        height: Fit,
+                        flow: Right,
+                        reaction_list = <ReactionList> { }
+                        avatar_row = <AvatarRow> {}
+                    }
                 }
             }
-
         }
     }
 
@@ -443,16 +464,17 @@ live_design! {
     // This excludes stickers and other animated GIFs, video clips, audio clips, etc.
     CondensedImageMessage = <CondensedMessage> {
         body = {
-            content = {
-                message = <TextOrImage> { }
-                <View> {
-                    width: Fill,
-                    height: Fit
-                    reaction_list = <ReactionList> { }
-                    avatar_row = <AvatarRow> {}
+            body_inner = {
+                content = {
+                    message = <TextOrImage> { }
+                    <View> {
+                        width: Fill,
+                        height: Fit
+                        reaction_list = <ReactionList> { }
+                        avatar_row = <AvatarRow> {}
+                    }
                 }
             }
-
         }
     }
 
@@ -517,7 +539,7 @@ live_design! {
 
     // The view used for each day divider in a room's timeline.
     // The date text is centered between two horizontal lines.
-    DateDivider = <View> {
+    pub DateDivider = <View> {
         width: Fill,
         height: Fit,
         margin: {top: 7.0, bottom: 7.0}
@@ -546,7 +568,7 @@ live_design! {
 
     // The view used for the divider indicating where the user's last-viewed message is.
     // This is implemented as a DateDivider with a different color and a fixed text label.
-    ReadMarker = <DateDivider> {
+    pub ReadMarker = <DateDivider> {
         left_line = {
             draw_bg: {color: (COLOR_READ_MARKER)}
         }
@@ -593,7 +615,6 @@ live_design! {
         height: Fill,
         align: {x: 0.5, y: 0.0} // center horizontally, align to top vertically
         flow: Overlay,
-
         list = <PortalList> {
             height: Fill,
             width: Fill
@@ -611,6 +632,16 @@ live_design! {
             Empty = <Empty> {}
             DateDivider = <DateDivider> {}
             ReadMarker = <ReadMarker> {}
+            RoomHeader = <Label> {
+                margin: {left: 10},
+                draw_text: {
+                    text_style: <REGULAR_TEXT> {
+                        font_size: 12.5,
+                    },
+                    color: #000,
+                }
+                text: "??"
+            }
         }
 
         // A jump to bottom button (with an unread message badge) that is shown
@@ -714,22 +745,27 @@ live_design! {
         draw_bg: {
             color: (COLOR_SECONDARY)
         }
-
         room_screen_wrapper = <View> {
             width: Fill, height: Fill,
             flow: Overlay,
-            show_bg: true
+            show_bg: true,
             draw_bg: {
                 color: (COLOR_PRIMARY_DARKER)
             }
-
+            // Provide access to the cached rooms_list widget.
+            <CachedWidget> {
+                width:0, height:0,
+                rooms_list = <RoomsList> {}
+            }
             keyboard_view = <KeyboardView> {
                 width: Fill, height: Fill,
                 flow: Down,
 
                 // First, display the timeline of all messages/events.
                 timeline = <Timeline> {}
-
+                search_timeline = <Timeline> {
+                    visible: false
+                }
                 // Below that, display a typing notice when other users in the room are typing.
                 typing_notice = <View> {
                     visible: false
@@ -868,8 +904,16 @@ live_design! {
             // The loading pane appears while the user is waiting for something in the room screen
             // to finish loading, e.g., when loading an older replied-to message.
             loading_pane = <LoadingPane> { }
-
-
+            search_result_plane = <SearchResult> {
+                visible: false
+            }
+            // search_result_overlay = <View> {
+            //     visible: false,
+            //     search_result_plane = <SearchResult> {
+                    
+            //     }
+                
+            // }
             /*
              * This is broken currently, so I'm disabling it.
              *
@@ -889,7 +933,17 @@ live_design! {
             }
             */
         }
-
+        no_more_template: <Label> {
+            margin: {left: 10, top: 30},
+            draw_text: {
+                text_style: <REGULAR_TEXT> {
+                    font_size: 16.5,
+                },
+                color: #000,
+            }
+            text: "No More"
+        }
+        date_divider_template: <DateDivider> {}
         animator: {
             typing_notice_animator = {
                 default: show,
@@ -905,23 +959,31 @@ live_design! {
                 }
             }
         }
+        
     }
 }
 
 /// The main widget that displays a single Matrix room.
 #[derive(Live, LiveHook, Widget)]
 pub struct RoomScreen {
-    #[deref] view: View,
+    #[deref] pub view: View,
     #[animator] animator: Animator,
-
     /// The room ID of the currently-shown room.
-    #[rust] room_id: Option<OwnedRoomId>,
+    #[rust] pub room_id: Option<OwnedRoomId>,
     /// The display name of the currently-shown room.
     #[rust] room_name: String,
     /// The persistent UI-relevant states for the room that this widget is currently displaying.
-    #[rust] tl_state: Option<TimelineUiState>,
+    #[rust] pub tl_state: Option<TimelineUiState>,
+    /// The timer for sending a search request after a delay when user stops typing.
+    #[rust] search_delay_timer: Timer,
+    #[live] pub no_more_template: Option<LivePtr>,
+    #[live] pub date_divider_template: Option<LivePtr>,
+    #[rust] pub search_result_timeline_view: Option<ViewRef>,
+    #[rust] pub search_bar_widget_uid: Option<WidgetUid>
 }
+
 impl Drop for RoomScreen {
+
     fn drop(&mut self) {
         // This ensures that the `TimelineUiState` instance owned by this room is *always* returned
         // back to to `TIMELINE_STATES`, which ensures that its UI state(s) are not lost
@@ -937,6 +999,7 @@ impl Widget for RoomScreen {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let room_screen_widget_uid = self.widget_uid();
         let portal_list = self.portal_list(id!(timeline.list));
+        let search_portal_list = self.portal_list(id!(search_timeline.list));
         let user_profile_sliding_pane = self.user_profile_sliding_pane(id!(user_profile_sliding_pane));
         let loading_pane = self.loading_pane(id!(loading_pane));
 
@@ -952,7 +1015,24 @@ impl Widget for RoomScreen {
             user_profile_cache::process_user_profile_updates(cx);
             avatar_cache::process_avatar_updates(cx);
         }
-
+        if let Event::Timer(te) = event {
+            if self.search_delay_timer.is_timer(te).is_some() {
+                if let Some(room_id) = &self.room_id {
+                    let Some(tl_state) = self.tl_state.as_mut() else { return };
+                    if tl_state.search_result_state.search_term.is_empty() {
+                        self.view(id!(search_timeline)).set_visible(cx, false);
+                        return; 
+                    }
+                    tl_state.search_result_state.include_all_rooms = false;
+                    submit_async_request(MatrixRequest::SearchMessages { 
+                        room_id: room_id.clone(), 
+                        include_all_rooms: tl_state.search_result_state.include_all_rooms,
+                        search_term: tl_state.search_result_state.search_term.clone(),
+                        backward_pagination_batch: None,
+                    });
+                }
+            }
+        }
         if let Event::Actions(actions) = event {
             for (_, wr) in portal_list.items_with_actions(actions) {
                 let reaction_list = wr.reaction_list(id!(reaction_list));
@@ -1019,6 +1099,7 @@ impl Widget for RoomScreen {
             let message_input = self.room_input_bar(id!(input_bar)).text_input(id!(text_input));
 
             for action in actions {
+                self.handle_search(cx, action, scope);
                 // Handle the highlight animation.
                 let Some(tl) = self.tl_state.as_mut() else { return };
                 if let MessageHighlightAnimationState::Pending { item_id } = tl.message_highlight_animation_state {
@@ -1058,12 +1139,16 @@ impl Widget for RoomScreen {
                 message_action_bar_popup.close(cx);
             }
             */
+            if !self.view(id!(search_timeline)).visible() {
+                // Set visibility of loading message banner based of pagination logic
+                self.send_pagination_request_based_on_scroll_pos(cx, actions, &portal_list);
+                // Handle sending any read receipts for the current logged-in user.
+                self.send_user_read_receipts_based_on_scroll_pos(cx, actions, &portal_list);
+            } else {
+                send_pagination_request_based_on_scroll_pos_for_search_result( self, cx, actions, &search_portal_list);
+            }
 
-            // Set visibility of loading message banner based of pagination logic
-            self.send_pagination_request_based_on_scroll_pos(cx, actions, &portal_list);
-            // Handle sending any read receipts for the current logged-in user.
-            self.send_user_read_receipts_based_on_scroll_pos(cx, actions, &portal_list);
-
+            
             // Clear the replying-to preview pane if the "cancel reply" button was clicked
             // or if the `Escape` key was pressed within the message input box.
             if self.button(id!(cancel_reply_button)).clicked(actions)
@@ -1151,7 +1236,21 @@ impl Widget for RoomScreen {
                     message_input.set_text(cx, "");
                 }
             }
-
+            if self.view.button(id!(search_all_rooms_button)).clicked(actions) {
+                if let Some(room_id) = self.room_id.clone() {
+                    self.search_result(id!(search_result_plane)).set_visible(cx, true);
+                    self.search_result(id!(search_result_plane)).reset(cx);
+                    let Some(tl) = self.tl_state.as_mut() else { return };
+                    tl.items.clear();
+                    tl.search_result_state.include_all_rooms = true;
+                    submit_async_request(MatrixRequest::SearchMessages { 
+                        room_id, 
+                        include_all_rooms: tl.search_result_state.include_all_rooms, 
+                        search_term: tl.search_result_state.search_term.clone(), 
+                        backward_pagination_batch: None,
+                    });
+                }
+            }
             // Handle the jump to bottom button: update its visibility, and handle clicks.
             self.jump_to_bottom_button(id!(jump_to_bottom)).update_from_actions(
                 cx,
@@ -1266,13 +1365,18 @@ impl Widget for RoomScreen {
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         let room_screen_widget_uid = self.widget_uid();
+        let search_timeline_widget = self.view(id!(search_timeline));
+        let _rooms_list_widget = self.rooms_list(id!(rooms_list));
         if self.tl_state.is_none() {
             // Tl_state may not be ready after dock loading.
             // If return DrawStep::done() inside self.view.draw_walk, turtle will misalign and panic.
             return DrawStep::done();
         }
-        while let Some(subview) = self.view.draw_walk(cx, scope, walk).step() {
+        let search_timeline_widget_visible = search_timeline_widget.visible();
+        
+        while let Some(subview) = self.view.draw_walk(cx, scope, walk).step() { 
             // We only care about drawing the portal list.
+            //let portal_list_ref = self.view.portal_list(id!(timeline.list));
             let portal_list_ref = subview.as_portal_list();
             let Some(mut list_ref) = portal_list_ref.borrow_mut() else {
                 error!("!!! RoomScreen::draw_walk(): BUG: expected a PortalList widget, but got something else");
@@ -1281,25 +1385,45 @@ impl Widget for RoomScreen {
             let Some(tl_state) = self.tl_state.as_mut() else {
                 return DrawStep::done();
             };
-            let room_id = &tl_state.room_id;
-            let tl_items = &tl_state.items;
-
+            
             // Set the portal list's range based on the number of timeline items.
-            let last_item_id = tl_items.len();
+            let last_item_id = if !search_timeline_widget_visible {
+                tl_state.items.len() 
+            } else {
+                tl_state.search_result_state.items.len()
+            };
 
             let list = list_ref.deref_mut();
             list.set_item_range(cx, 0, last_item_id);
-
             while let Some(item_id) = list.next_visible_item(cx) {
+                
+                // let item = if search_timeline_widget.visible() {
+                //     let Some(item) = populate_search_result_item(cx, list, item_id, tl_state, &mut draw_state,&rooms_list_widget, room_screen_widget_uid, self.no_more_template) else {
+                //         continue
+                //     };
+                //     item
+                // } else {
+                if item_id == 0 && search_timeline_widget_visible {
+                    WidgetRef::new_from_ptr(cx, self.no_more_template).as_label().draw_all(cx, &mut Scope::empty());
+                    //WidgetRef::new_from_ptr(cx, self.no_more_template).as_label().draw_walk(cx, scope, walk);
+                }
                 let item = {
                     let tl_idx = item_id;
+                    let room_id = &tl_state.room_id;
+                    let (tl_items, target_event_indexes, context_before_event_indexes) = if search_timeline_widget_visible { (&tl_state.search_result_state.items, tl_state.search_result_state.target_event_indexes.clone(), tl_state.search_result_state.context_before_event_indexes.clone()) } else {
+                        (&tl_state.items, Vec::with_capacity(0), Vec::with_capacity(0))
+                    };
                     let Some(timeline_item) = tl_items.get(tl_idx) else {
                         // This shouldn't happen (unless the timeline gets corrupted or some other weird error),
                         // but we can always safely fill the item with an empty widget that takes up no space.
                         list.item(cx, item_id, live_id!(Empty));
                         continue;
                     };
-
+                    let highlighted = if search_timeline_widget_visible {
+                        tl_state.search_result_state.highlighted_strings.clone()
+                    } else {
+                        vec![]
+                    };
                     // Determine whether this item's content and profile have been drawn since the last update.
                     // Pass this state to each of the `populate_*` functions so they can attempt to re-use
                     // an item in the timeline's portallist that was previously populated, if one exists.
@@ -1308,79 +1432,90 @@ impl Widget for RoomScreen {
                         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) => {
-                                let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
-                                populate_message_view(
+                        TimelineItemKind::Event(event_tl_item) => {
+                            let event_tl_item_wrapper = &MessageViewFromEventWrapperETI(event_tl_item);
+                            populate_search_date_divider(cx, event_tl_item_wrapper, context_before_event_indexes, tl_idx, self.date_divider_template);
+                            match event_tl_item.content() {
+                                TimelineItemContent::Message(message) => {
+                                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
+                                    let prev_event = prev_event.map(PreviousWrapperTI);
+                                    let message = &MessageWrapperTM(message);
+                                    populate_message_view(
+                                        cx,
+                                        list,
+                                        item_id,
+                                        room_id,
+                                        event_tl_item_wrapper,
+                                        MessageOrSticker::Message(message),
+                                        prev_event.as_ref(),
+                                        &mut tl_state.media_cache,
+                                        &tl_state.user_power,
+                                        !target_event_indexes.is_empty() && !target_event_indexes.contains(&tl_idx),
+                                        highlighted,
+                                        item_drawn_status,
+                                        room_screen_widget_uid,
+                                    )
+                                }
+                                TimelineItemContent::Sticker(sticker) => {
+                                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
+                                    let prev_event = prev_event.map(PreviousWrapperTI);
+                                    populate_message_view(
+                                        cx,
+                                        list,
+                                        item_id,
+                                        room_id,
+                                        event_tl_item_wrapper,
+                                        MessageOrSticker::Sticker::<MessageWrapperTM>(sticker.content()),
+                                        prev_event.as_ref(),
+                                        &mut tl_state.media_cache,
+                                        &tl_state.user_power,
+                                        !target_event_indexes.is_empty() && !target_event_indexes.contains(&tl_idx),
+                                        highlighted,
+                                        item_drawn_status,
+                                        room_screen_widget_uid,
+                                    )
+                                }
+                                TimelineItemContent::RedactedMessage => populate_small_state_event(
                                     cx,
                                     list,
                                     item_id,
                                     room_id,
-                                    event_tl_item,
-                                    MessageOrSticker::Message(message),
-                                    prev_event,
-                                    &mut tl_state.media_cache,
-                                    &tl_state.user_power,
+                                    event_tl_item_wrapper,
+                                    &RedactedMessageEventMarker,
                                     item_drawn_status,
-                                    room_screen_widget_uid,
-                                )
-                            }
-                            TimelineItemContent::Sticker(sticker) => {
-                                let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
-                                populate_message_view(
+                                ),
+                                TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
                                     cx,
                                     list,
                                     item_id,
                                     room_id,
-                                    event_tl_item,
-                                    MessageOrSticker::Sticker(sticker.content()),
-                                    prev_event,
-                                    &mut tl_state.media_cache,
-                                    &tl_state.user_power,
+                                    event_tl_item_wrapper,
+                                    membership_change,
                                     item_drawn_status,
-                                    room_screen_widget_uid,
-                                )
-                            }
-                            TimelineItemContent::RedactedMessage => populate_small_state_event(
-                                cx,
-                                list,
-                                item_id,
-                                room_id,
-                                event_tl_item,
-                                &RedactedMessageEventMarker,
-                                item_drawn_status,
-                            ),
-                            TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
-                                cx,
-                                list,
-                                item_id,
-                                room_id,
-                                event_tl_item,
-                                membership_change,
-                                item_drawn_status,
-                            ),
-                            TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
-                                cx,
-                                list,
-                                item_id,
-                                room_id,
-                                event_tl_item,
-                                profile_change,
-                                item_drawn_status,
-                            ),
-                            TimelineItemContent::OtherState(other) => populate_small_state_event(
-                                cx,
-                                list,
-                                item_id,
-                                room_id,
-                                event_tl_item,
-                                other,
-                                item_drawn_status,
-                            ),
-                            unhandled => {
-                                let item = list.item(cx, item_id, live_id!(SmallStateEvent));
-                                item.label(id!(content)).set_text(cx, &format!("[Unsupported] {:?}", unhandled));
-                                (item, ItemDrawnStatus::both_drawn())
+                                ),
+                                TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
+                                    cx,
+                                    list,
+                                    item_id,
+                                    room_id,
+                                    event_tl_item_wrapper,
+                                    profile_change,
+                                    item_drawn_status,
+                                ),
+                                TimelineItemContent::OtherState(other) => populate_small_state_event(
+                                    cx,
+                                    list,
+                                    item_id,
+                                    room_id,
+                                    event_tl_item_wrapper,
+                                    other,
+                                    item_drawn_status,
+                                ),
+                                unhandled => {
+                                    let item = list.item(cx, item_id, live_id!(SmallStateEvent));
+                                    item.label(id!(content)).set_text(cx, &format!("[Unsupported] {:?}", unhandled));
+                                    (item, ItemDrawnStatus::both_drawn())
+                                }
                             }
                         }
                         TimelineItemKind::Virtual(VirtualTimelineItem::DateDivider(millis)) => {
@@ -1421,6 +1556,7 @@ impl RoomScreen {
     fn process_timeline_updates(&mut self, cx: &mut Cx, portal_list: &PortalListRef) {
         let top_space = self.view(id!(top_space));
         let jump_to_bottom = self.jump_to_bottom_button(id!(jump_to_bottom));
+        let search_result_widget = self.search_result(id!(search_result_plane));
         let curr_first_id = portal_list.first_id();
         let ui = self.widget_uid();
         let Some(tl) = self.tl_state.as_mut() else { return };
@@ -1440,11 +1576,11 @@ impl RoomScreen {
                     portal_list.set_first_id_and_scroll(initial_items.len().saturating_sub(1), 0.0);
                     portal_list.set_tail_range(true);
                     jump_to_bottom.update_visibility(cx, true);
-
                     tl.items = initial_items;
                     done_loading = true;
                 }
                 TimelineUpdate::NewItems { new_items, changed_indices, is_append, clear_cache } => {
+                    println!("changed_indices {:?} is_append {:?} clear_cache {:?}", changed_indices, is_append, clear_cache);
                     if new_items.is_empty() {
                         if !tl.items.is_empty() {
                             log!("Timeline::handle_event(): timeline (had {} items) was cleared for room {}", tl.items.len(), tl.room_id);
@@ -1480,7 +1616,6 @@ impl RoomScreen {
                     // Maybe todo?: we can often avoid the following loops that iterate over the `items` list
                     //       by only doing that if `clear_cache` is true, or if `changed_indices` range includes
                     //       any index that comes before (is less than) the above `curr_first_id`.
-
                     if new_items.len() == tl.items.len() {
                         // log!("Timeline::handle_event(): no jump necessary for updated timeline of same length: {}", items.len());
                     }
@@ -1609,8 +1744,10 @@ impl RoomScreen {
                     self.view.redraw(cx);
                 }
                 TimelineUpdate::PaginationRunning(direction) => {
+                    println!("TimelineUpdate::PaginationRunning({direction}) in room {}", tl.room_id);
                     if direction == PaginationDirection::Backwards {
                         top_space.set_visible(cx, true);
+                        search_result_widget.display_top_space(cx);
                         done_loading = false;
                     } else {
                         error!("Unexpected PaginationRunning update in the Forwards direction");
@@ -1681,6 +1818,75 @@ impl RoomScreen {
                 TimelineUpdate::OwnUserReadReceipt(receipt) => {
                     tl.latest_own_user_receipt = Some(receipt);
                 }
+                TimelineUpdate::SearchNewItems { new_items, forward_pagination_batch_token, backward_pagination_batch_token, highlights, count } => {
+                    self.view.search_result(id!(search_result_plane)).set_result_count(cx, count);
+                    self.view.view(id!(search_timeline)).set_visible(cx, true);
+                    done_loading = true;
+                    tl.search_result_state.highlighted_strings = highlights;
+                    if let Some(forward_pagination_batch) = forward_pagination_batch_token.clone() {
+                        tl.search_result_state.batch_list.push(forward_pagination_batch);
+                    }
+                    tl.search_result_state.backward_pagination_batch = backward_pagination_batch_token;
+                    for item in new_items.iter().rev() {
+                        tl.search_result_state.items.push_front(item.clone());
+                    }
+                }
+                TimelineUpdate::SearchThroughStreamedTimelines { events, next_batch_token: _, count, highlights, search_term } => {
+                    let mut not_found: Vec<(usize, OwnedEventId)> = Vec::with_capacity(events.len());
+                    if tl.search_result_state.search_term != search_term {
+                        tl.search_result_state = SearchResultState::default();
+                        tl.search_result_state.search_term = search_term;
+                        tl.search_result_state.highlighted_strings = highlights.clone();
+                    }
+                    fn look_for_items(event_id: &EventId, items: &Vector<Arc<TimelineItem>>) -> Option<Arc<TimelineItem>> {
+                        for item in items.iter() {
+                            if let Some(ev) = item.as_event() {
+                                if ev.event_id() == Some(event_id) {
+                                    return Some(item.clone());
+                                }
+                            }
+                        }
+                        None
+                    }
+                    let pre_processed_items_initial_length = tl.search_result_state.pre_processed_items.len();
+                    for (index, item) in events.iter().enumerate() {
+                        let mut small_timelines = Vector::new();
+                        let mut has_context_before = false;
+                        let index = pre_processed_items_initial_length + index;
+                        if let Some(timeline) =  item.context_before.as_ref().and_then(|event_id| look_for_items(event_id, &tl.items)) {
+                            has_context_before = true;
+                            small_timelines.push_back(SearchTimeline::Context(timeline));
+                        } else if item.context_before.is_some() {
+                            not_found.push((index, item.event.clone()));
+                            continue;
+                        }
+                        if let Some(timeline ) = look_for_items(&item.event, &tl.items) {
+                            small_timelines.push_back(SearchTimeline::Target(timeline));
+                        } else {
+                            not_found.push((index, item.event.clone()));
+                            continue;
+                        }
+                        if let Some(timeline ) =  item.context_after.as_ref().and_then(|event_id|look_for_items(event_id, &tl.items)) {
+                            small_timelines.push_back(SearchTimeline::Context(timeline));
+                        } else {
+                            not_found.push((index, item.event.clone()));
+                            continue;
+                        }
+                        tl.search_result_state.pre_processed_items.insert(index, (small_timelines, has_context_before));
+                    }
+                    if not_found.is_empty() {
+                        append_to_tl_state(&self.view, cx, tl, events.len(), &mut done_loading, count, highlights);
+                    } else {
+                        submit_async_request(MatrixRequest::SearchFindMoreTimelines { not_found, room_id: tl.room_id.clone(), count, highlights });
+                    }
+                }
+                TimelineUpdate::SearchThroughTimelineFocus{timelines_to_be_merged, count, highlights} => {
+                    let timelines_to_be_merged_len = timelines_to_be_merged.len();
+                    for (index, timelines, has_context_before) in timelines_to_be_merged {
+                        tl.search_result_state.pre_processed_items.insert(index, (timelines, has_context_before));
+                    }
+                    append_to_tl_state(&self.view, cx, tl, timelines_to_be_merged_len, &mut done_loading, count, highlights);
+                }   
             }
         }
 
@@ -1694,6 +1900,7 @@ impl RoomScreen {
 
         if done_loading {
             top_space.set_visible(cx, false);
+            search_result_widget.hide_top_space(cx);
         }
 
         if !typing_users.is_empty() {
@@ -1920,7 +2127,9 @@ impl RoomScreen {
                 }
                 MessageAction::CopyText(details) => {
                     let Some(tl) = self.tl_state.as_mut() else { return };
-                    if let Some(text) = tl.items
+
+                    if let Some(text) = 
+                        tl.items
                         .get(details.item_id)
                         .and_then(|tl_item| tl_item.as_event().map(body_of_timeline_item))
                     {
@@ -2278,6 +2487,7 @@ impl RoomScreen {
                 prev_first_index: None,
                 scrolled_past_read_marker: false,
                 latest_own_user_receipt: None,
+                search_result_state: SearchResultState::default(),
             };
             (new_tl_state, true)
         };
@@ -2320,7 +2530,7 @@ impl RoomScreen {
         // we can proceed to processing pending background updates, and if any were processed,
         // the timeline will also be redrawn.
         if first_time_showing_room {
-            let portal_list = self.portal_list(id!(list));
+            let portal_list = self.portal_list(id!(timeline.list));
             self.process_timeline_updates(cx, &portal_list);
         }
 
@@ -2540,6 +2750,84 @@ impl RoomScreen {
         }
         tl.last_scrolled_index = first_index;
     }
+    
+    
+    /// Handles any search-related actions received by this RoomScreen.
+    ///
+    /// See `SearchBarAction` for the possible actions.
+    fn handle_search(
+        &mut self,
+        cx: &mut Cx,
+        action: &Action,
+        scope: &mut Scope,
+    ) {
+        let search_plane_widget_uid = self.search_result(id!(search_result_plane)).widget_uid();
+        let widget_action = action.as_widget_action();
+        match widget_action.cast() {
+            SearchBarAction::Search(search_term) => {
+                if let (Some(selected_room), Some(search_widget_id)) = {
+                    let app_state = scope.data.get::<AppState>().unwrap();
+                    (app_state.rooms_panel.selected_room.clone(), app_state.search_widget)
+                } {
+                    self.search_bar_widget_uid = Some(search_widget_id);
+                    if let Some(widget_action) = widget_action {
+                        if widget_action.widget_uid == search_widget_id && Some(selected_room.room_id) == self.room_id {
+                            self.search_delay_timer = cx.start_timeout(1.0);
+                            if let Some(ref mut tl_state) = self.tl_state {
+                                tl_state.search_result_state.items.clear();
+                                tl_state.search_result_state.search_term = search_term.clone();
+                            }
+                            self.search_result(id!(search_result_plane)).set_search_criteria(cx, search_term.clone());
+                            self.view(id!(timeline)).set_visible(cx, false);
+                        }
+                    }
+                }
+            }
+            SearchBarAction::ResetSearch => {
+                if let (Some(selected_room), Some(search_widget_id)) = {
+                    let app_state = scope.data.get::<AppState>().unwrap();
+                    (app_state.rooms_panel.selected_room.clone(), app_state.search_widget)
+                } {
+                    if let Some(widget_action) = widget_action {
+                        if widget_action.widget_uid == search_widget_id && Some(selected_room.room_id) == self.room_id {
+                            cx.stop_timer(self.search_delay_timer);
+                            let Some(tl) = self.tl_state.as_mut() else { return };
+                            tl.search_result_state = SearchResultState::default();
+                            self.view(id!(search_timeline)).set_visible(cx, false);
+                            self.view(id!(search_result_overlay)).set_visible(cx, false);
+                        }
+                    }
+                }
+            }
+            SearchBarAction::ClickSearch => {
+                if let (Some(selected_room), Some(search_widget_id)) = {
+                    let app_state = scope.data.get::<AppState>().unwrap();
+                    (app_state.rooms_panel.selected_room.clone(), app_state.search_widget)
+                } {
+                    if let Some(widget_action) = widget_action {
+                        if widget_action.widget_uid == search_widget_id && Some(selected_room.room_id) == self.room_id {
+                            let search_term = if let Some(ref mut tl_state) = self.tl_state { tl_state.search_result_state.search_term.clone() } else { return };
+                            self.search_result(id!(search_result_plane)).set_search_criteria(cx, search_term);
+                            self.view(id!(timeline)).set_visible(cx, false);
+                        }
+                    }
+                }
+            }
+            _ => {
+
+            }
+        }
+        if let SearchBarAction::ResetSearch = widget_action.widget_uid_eq(search_plane_widget_uid).cast() {
+            self.search_result(id!(search_result_plane)).reset(cx);
+            self.search_result(id!(search_result_plane)).set_visible(cx, false);
+            if let Some(tl_state) = &mut self.tl_state {
+                tl_state.search_result_state = SearchResultState::default();
+            }
+            self.view(id!(timeline)).set_visible(cx, true);
+            self.view(id!(search_timeline)).set_visible(cx, false);
+        }
+    }
+
 }
 
 impl RoomScreenRef {
@@ -2553,6 +2841,12 @@ impl RoomScreenRef {
         let Some(mut inner) = self.borrow_mut() else { return };
         inner.set_displayed_room(cx, room_id, room_name);
     }
+    pub fn close_search(&self, cx: &mut Cx) {
+        self.search_result(id!(search_result_plane)).reset(cx);
+        self.search_result(id!(search_result_plane)).set_visible(cx, false);
+        let Some(search_bar_widget_uid) = self.borrow().and_then(|inner| inner.search_bar_widget_uid) else { return };
+        cx.widget_action(search_bar_widget_uid, &Scope::empty().path, SearchBarAction::Clear);
+    }
 }
 
 /// Actions for the room screen's tooltip.
@@ -2664,6 +2958,36 @@ pub enum TimelineUpdate {
     UserPowerLevels(UserPowerLevels),
     /// An update to the currently logged-in user's own read receipt for this room.
     OwnUserReadReceipt(Receipt),
+    // /// Save search result in the TimelineUiState.
+    // /// Save previous batch token in the TimelineUiState.
+    // SearchResult{
+    //     result: ResultCategories,
+    //     previous_batch_token: Option<String>,
+    // },
+    /// The content of a room's timeline was updated in the background.
+    SearchNewItems {
+        /// The entire list of timeline items (events) for a room.
+        //new_items: Vector<SearchTimelineItem>,
+        new_items: Vector<Arc<TimelineItem>>,
+        forward_pagination_batch_token: Option<String>,
+        backward_pagination_batch_token: Option<String>,
+        highlights: Vec<String>,
+        count: u32
+    },
+    SearchThroughStreamedTimelines {
+        /// The list of search results containing only the event_ids.
+        events: Vec<CondensedSearchResult>,
+        next_batch_token: Option<String>,
+        count: u32,
+        highlights: Vec<String>,
+        search_term: String,
+    },
+    SearchThroughTimelineFocus{
+        // Index to insert to hashmap, and the vector of items and whether there was a context before
+        timelines_to_be_merged: Vec<(usize, Vector<SearchTimeline>, bool)>,
+        count: u32,
+        highlights: Vec<String>,
+    }
 }
 
 /// The global set of all timeline states, one entry per room.
@@ -2675,12 +2999,12 @@ static TIMELINE_STATES: Mutex<BTreeMap<OwnedRoomId, TimelineUiState>> = Mutex::n
 /// across multiple `Hide`/`Show` cycles of that room's timeline within a RoomScreen.
 /// If a state is more temporary and shouldn't be persisted when the timeline is hidden,
 /// then it should be stored in the RoomScreen widget itself, not in this struct.
-struct TimelineUiState {
+pub struct TimelineUiState {
     /// The ID of the room that this timeline is for.
-    room_id: OwnedRoomId,
+    pub room_id: OwnedRoomId,
 
     /// The power levels of the currently logged-in user in this room.
-    user_power: UserPowerLevels,
+    pub user_power: UserPowerLevels,
 
     /// Whether this room's timeline has been fully paginated, which means
     /// that the oldest (first) event in the timeline is locally synced and available.
@@ -2691,7 +3015,6 @@ struct TimelineUiState {
 
     /// The list of items (events) in this room's timeline that our client currently knows about.
     items: Vector<Arc<TimelineItem>>,
-
     /// The range of items (indices in the above `items` list) whose event **contents** have been drawn
     /// since the last update and thus do not need to be re-populated on future draw events.
     ///
@@ -2705,10 +3028,10 @@ struct TimelineUiState {
     ///
     /// Upon a background update, only item indices greater than or equal to the
     /// `index_of_first_change` are removed from this set.
-    content_drawn_since_last_update: RangeSet<usize>,
+    pub content_drawn_since_last_update: RangeSet<usize>,
 
     /// Same as `content_drawn_since_last_update`, but for the event **profiles** (avatar, username).
-    profile_drawn_since_last_update: RangeSet<usize>,
+    pub profile_drawn_since_last_update: RangeSet<usize>,
 
     /// The channel receiver for timeline updates for this room.
     ///
@@ -2724,7 +3047,7 @@ struct TimelineUiState {
     /// The cache of media items (images, videos, etc.) that appear in this timeline.
     ///
     /// Currently this excludes avatars, as those are shared across multiple rooms.
-    media_cache: MediaCache,
+    pub media_cache: MediaCache,
 
     /// Info about the event currently being replied to, if any.
     replying_to: Option<(EventTimelineItem, RepliedToInfo)>,
@@ -2766,8 +3089,42 @@ struct TimelineUiState {
     /// When new message come in, this value is reset to `false`.
     scrolled_past_read_marker: bool,
     latest_own_user_receipt: Option<Receipt>,
+    pub search_result_state: SearchResultState
+}
+
+#[derive(Default)]
+pub struct SearchResultState {
+    /// The search query to be sent after the search delay timer ends.
+    /// This field is reset when the user continues typing before the search delay timer ends.
+    pub search_term: String,
+    /// The list of searched results in this room.
+    pub items: Vector<Arc<TimelineItem>>,
+    /// The list of searched results in this room, split into batches and a boolean true if there is context event before target event.
+    pub pre_processed_items: HashMap<usize, (Vector<SearchTimeline>, bool)>,
+    pub target_event_indexes: Vec<usize>,
+    pub context_before_event_indexes: Vec<usize>,
+    /// The list of batch tokens for the search results.
+    /// 
+    /// This field is used to prevent duplicate search requests when scrolling
+    pub batch_list: Vec<String>,
+    /// The list of strings that should be highlighted in the search results.
+    pub highlighted_strings: Vec<String>,
+    /// The next batch token used for pagination of the search results.
+    pub backward_pagination_batch: Option<String>,
+    pub forward_pagination_batch: Option<String>,
+    pub fully_paginated: bool,
+    pub last_scrolled_index: usize,
+    /// Whether the button "Search All Rooms" is pressed.
+    pub include_all_rooms: bool,
+    pub content_drawn_since_last_update: RangeSet<usize>,
+    pub profile_drawn_since_last_update: RangeSet<usize>,
 }
 
+impl SearchResultState {
+    pub fn new() -> Self {
+        SearchResultState::default()
+    }
+}
 #[derive(Default, Debug)]
 enum MessageHighlightAnimationState {
     Pending { item_id: usize },
@@ -2852,22 +3209,22 @@ fn find_new_item_matching_current_item(
 }
 
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
-struct ItemDrawnStatus {
+pub struct ItemDrawnStatus {
     /// Whether the profile info (avatar and displayable username) were drawn for this item.
-    profile_drawn: bool,
+    pub profile_drawn: bool,
     /// Whether the content of the item was drawn (e.g., the message text, image, video, sticker, etc).
-    content_drawn: bool,
+    pub content_drawn: bool,
 }
 impl ItemDrawnStatus {
     /// Returns a new `ItemDrawnStatus` with both `profile_drawn` and `content_drawn` set to `false`.
-    const fn new() -> Self {
+    pub const fn new() -> Self {
         Self {
             profile_drawn: false,
             content_drawn: false,
         }
     }
     /// Returns a new `ItemDrawnStatus` with both `profile_drawn` and `content_drawn` set to `true`.
-    const fn both_drawn() -> Self {
+    pub const fn both_drawn() -> Self {
         Self {
             profile_drawn: true,
             content_drawn: true,
@@ -2876,11 +3233,15 @@ impl ItemDrawnStatus {
 }
 
 /// Abstracts over a message or sticker that can be displayed in a timeline.
-pub enum MessageOrSticker<'e> {
-    Message(&'e timeline::Message),
+// pub enum MessageOrSticker<'e> {
+//     Message(&'e timeline::Message),
+//     Sticker(&'e StickerEventContent),
+// }
+pub enum MessageOrSticker<'e, T:ContextMenuFromEvent> {
+    Message(&'e T),
     Sticker(&'e StickerEventContent),
 }
-impl MessageOrSticker<'_> {
+impl <T> MessageOrSticker<'_, T> where T:ContextMenuFromEvent{
     /// Returns the type of this message or sticker.
     pub fn get_type(&self) -> MessageOrStickerType {
         match self {
@@ -2918,6 +3279,32 @@ impl MessageOrSticker<'_> {
             _ => None,
         }
     }
+    pub fn is_searched_result(&self) -> bool {
+        match self {
+            Self::Message(msg) => {
+                msg.is_searched_result()
+            },
+            Self::Sticker(_) => false,
+        }
+    }
+}
+
+/// A wrapper around a [`timeline::Message`] that implements [`ContextMenuFromEvent`].
+pub struct MessageWrapperTM<'a>(pub &'a timeline::Message);
+
+impl ContextMenuFromEvent for MessageWrapperTM<'_> {
+    fn msgtype(&self) -> &MessageType {
+        self.0.msgtype()
+    }
+    fn body(&self) -> &str {
+        self.0.body()
+    }
+    fn in_reply_to(&self) -> Option<&InReplyToDetails> {
+        self.0.in_reply_to()
+    }
+    fn is_searched_result(&self) -> bool {
+        false
+    }
 }
 
 /// Abstracts over the different types of messages or stickers that can be displayed in a timeline.
@@ -2982,26 +3369,114 @@ impl MessageOrStickerType<'_> {
         }
     }
 }
+/// Abstracts over a message or sticker that can be displayed in a timeline.
+pub trait MessageViewFromEvent {
+    fn timestamp(&self) -> MilliSecondsSinceUnixEpoch;
+    fn event_id(&self) -> Option<&EventId>;
+    fn sender(&self) -> &UserId;
+    fn sender_profile(&self) -> Option<&TimelineDetails<matrix_sdk_ui::timeline::Profile>>;
+    fn reactions(&self) -> Option<ReactionsByKeyBySender>;
+    fn identifier(&self) -> TimelineEventItemId;
+    fn is_highlighted(&self) -> bool;
+    fn is_editable(&self) -> bool;
+    fn is_own(&self) -> bool;
+    fn can_be_replied_to(&self) -> bool;
+    fn read_receipts(&self) -> Option<&IndexMap<OwnedUserId, Receipt>>;
+    fn latest_json(&self) -> Option<&Raw<AnySyncTimelineEvent>>;
+    fn room_id(&self) -> Option<&ruma::RoomId>;
+}
+
+/// A wrapper around a [`EventTimelineItem`] that implements [`MessageViewFromEvent`].
+pub struct MessageViewFromEventWrapperETI<'a>(pub &'a EventTimelineItem);
+impl MessageViewFromEvent for MessageViewFromEventWrapperETI<'_> {
+    fn timestamp(&self) -> MilliSecondsSinceUnixEpoch {
+        self.0.timestamp()
+    }
+    fn event_id(&self) -> Option<&EventId> {
+        self.0.event_id()
+    }
+    fn sender(&self) -> &UserId {
+        self.0.sender()
+    }
+    fn sender_profile(&self) -> Option<&TimelineDetails<matrix_sdk_ui::timeline::Profile>> {
+        Some(self.0.sender_profile())
+    }
+    fn reactions(&self) -> Option<ReactionsByKeyBySender> {
+        Some(self.0.content().reactions())
+    }
+    fn identifier(&self) -> TimelineEventItemId {
+        self.0.identifier()
+    }
+    fn is_highlighted(&self) -> bool {
+        self.0.is_highlighted()
+    }
+    fn is_editable(&self) -> bool {
+        self.0.is_editable()
+    }
+    fn is_own(&self) -> bool {
+        self.0.is_own()
+    }
+    fn can_be_replied_to(&self) -> bool {
+        self.0.can_be_replied_to()
+    }
+    fn read_receipts(&self) -> Option<&IndexMap<OwnedUserId, Receipt>> {
+        Some(self.0.read_receipts())
+    }
+    fn latest_json(&self) -> Option<&Raw<AnySyncTimelineEvent>> {
+        self.0.latest_json()
+    }
+    fn room_id(&self) -> Option<&ruma::RoomId> {
+        None
+    }
+}
 
+/// A trait over a function to decide whether to use a compact view for a message.
+pub trait PreviousMessageViewFromEvent<T:MessageViewFromEvent> {
+    fn use_compact(&self, current: &T) -> bool;
+}
 
+/// A wrapper around a [`TimelineItem`] that implements [`PreviousMessageViewFromEvent`].
+pub struct PreviousWrapperTI<'a>(pub &'a Arc<TimelineItem>);
+impl <'a> PreviousMessageViewFromEvent<MessageViewFromEventWrapperETI<'a>> for PreviousWrapperTI<'a> {
+    fn use_compact(&self, current: &MessageViewFromEventWrapperETI<'a>) -> bool {
+        let prev_event = Some(self.0);
+        let use_compact_view = match prev_event.map(|p| p.kind()) {
+            Some(TimelineItemKind::Event(prev_event_tl_item)) => match prev_event_tl_item.content() {
+                TimelineItemContent::Message(_) | TimelineItemContent::Sticker(_) => {
+                    let prev_msg_sender = prev_event_tl_item.sender();
+                    prev_msg_sender == current.sender()
+                        && current.timestamp().0
+                            .checked_sub(prev_event_tl_item.timestamp().0)
+                            .is_some_and(|d| d < uint!(600000)) // 10 mins in millis
+                }
+                _ => false,
+            },
+            _ => false,
+        };
+        use_compact_view
+    }
+    
+}
 /// Creates, populates, and adds a Message liveview widget to the given `PortalList`
 /// with the given `item_id`.
 ///
 /// The content of the returned `Message` widget is populated with data from a message
 /// or sticker and its containing `EventTimelineItem`.
-fn populate_message_view(
+pub fn populate_message_view<T,P,M>(
     cx: &mut Cx2d,
     list: &mut PortalList,
     item_id: usize,
     room_id: &OwnedRoomId,
-    event_tl_item: &EventTimelineItem,
-    message: MessageOrSticker,
-    prev_event: Option<&Arc<TimelineItem>>,
+    event_tl_item: &T,
+    message: MessageOrSticker<M>,
+    prev_event: Option<&P>,
     media_cache: &mut MediaCache,
     user_power_levels: &UserPowerLevels,
+    is_contextual: bool,
+    highlighted: Vec<String>,
     item_drawn_status: ItemDrawnStatus,
     room_screen_widget_uid: WidgetUid,
-) -> (WidgetRef, ItemDrawnStatus) {
+) -> (WidgetRef, ItemDrawnStatus) where T: MessageViewFromEvent, P: PreviousMessageViewFromEvent<T>, M: ContextMenuFromEvent {
     let mut new_drawn_status = item_drawn_status;
     let ts_millis = event_tl_item.timestamp();
 
@@ -3010,20 +3485,7 @@ fn populate_message_view(
 
     // Determine whether we can use a more compact UI view that hides the user's profile info
     // if the previous message (including stickers) was sent by the same user within 10 minutes.
-    let use_compact_view = match prev_event.map(|p| p.kind()) {
-        Some(TimelineItemKind::Event(prev_event_tl_item)) => match prev_event_tl_item.content() {
-            TimelineItemContent::Message(_) | TimelineItemContent::Sticker(_) => {
-                let prev_msg_sender = prev_event_tl_item.sender();
-                prev_msg_sender == event_tl_item.sender()
-                    && ts_millis.0
-                        .checked_sub(prev_event_tl_item.timestamp().0)
-                        .is_some_and(|d| d < uint!(600000)) // 10 mins in millis
-            }
-            _ => false,
-        },
-        _ => false,
-    };
-
+    let use_compact_view = prev_event.is_some_and(|p| p.use_compact(event_tl_item));
     let has_html_body: bool;
 
     // Sometimes we need to call this up-front, so we save the result in this variable
@@ -3037,13 +3499,43 @@ fn populate_message_view(
             } else {
                 live_id!(Message)
             };
+            let mut formatted = formatted.clone();
             let (item, existed) = list.item_with_existed(cx, item_id, template);
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
+                if !highlighted.is_empty() {
+                    if let Some(ref mut formatted) = formatted {
+                        for highlight in highlighted.iter() {
+                            formatted.body = formatted.body.replace(highlight, &format!("<code>{}</code>", highlight));
+                        }
+                    } else {
+                        let mut formated_string = body.clone();
+                        for highlight in highlighted.iter() {
+                            formated_string = formated_string.replace(highlight, &format!("<code>{}</code>", highlight));
+                        }
+                        formatted = Some(FormattedBody::html(formated_string));
+                    }
+                }
+                
+                
+                let html_or_plaintext_ref = item.html_or_plaintext(id!(content.message));
+                if !highlighted.is_empty() {
+                    html_or_plaintext_ref.apply_over(cx, live!(
+                        html_view = {
+                            html = {
+                                font_color: (vec3(0.0,0.0,0.0)),
+                                draw_block: {
+                                    code_color: (SEARCH_HIGHLIGHT)
+                                }
+                                font_size: (15.0),
+                            }
+                        }
+                    ));
+                }
                 populate_text_message_content(
                     cx,
-                    &item.html_or_plaintext(id!(content.message)),
+                    &html_or_plaintext_ref,
                     body,
                     formatted.as_ref(),
                 );
@@ -3145,11 +3637,12 @@ fn populate_message_view(
                 (item, true)
             } else {
                 // Draw the profile up front here because we need the username for the emote body.
+                // Prioritize using the room_id encapsulated in the event timeline item.
                 let (username, profile_drawn) = item.avatar(id!(profile.avatar)).set_avatar_and_get_username(
                     cx,
-                    room_id,
+                    event_tl_item.room_id().unwrap_or(room_id),
                     event_tl_item.sender(),
-                    Some(event_tl_item.sender_profile()),
+                    event_tl_item.sender_profile(),
                     event_tl_item.event_id(),
                 );
 
@@ -3334,13 +3827,16 @@ fn populate_message_view(
 
     // If we didn't use a cached item, we need to draw all other message content: the reply preview and reactions.
     if !used_cached_item {
-        item.reaction_list(id!(content.reaction_list)).set_list(
-            cx,
-            &event_tl_item.content().reactions(),
-            room_id.to_owned(),
-            event_tl_item.identifier(),
-            item_id,
-        );
+        if let Some(reactions) = event_tl_item.reactions() {
+            item.reaction_list(id!(content.reaction_list)).set_list(
+                cx,
+                &reactions,
+                room_id.to_owned(),
+                event_tl_item.identifier(),
+                item_id,
+            );
+        }
+        
         populate_read_receipts(&item, cx, room_id, event_tl_item);
         let (is_reply_fully_drawn, replied_to_ev_id) = draw_replied_to_message(
             cx,
@@ -3369,9 +3865,9 @@ fn populate_message_view(
             let (username, profile_drawn) = set_username_and_get_avatar_retval.unwrap_or_else(||
                 item.avatar(id!(profile.avatar)).set_avatar_and_get_username(
                     cx,
-                    room_id,
+                    event_tl_item.room_id().unwrap_or(room_id),
                     event_tl_item.sender(),
-                    Some(event_tl_item.sender_profile()),
+                    event_tl_item.sender_profile(),
                     event_tl_item.event_id(),
                 )
             );
@@ -3437,12 +3933,14 @@ fn populate_message_view(
         item.label(id!(profile.timestamp))
             .set_text(cx, &format!("{}", ts_millis.get()));
     }
-
+    if is_contextual {
+        item.view(id!(overlay_message)).set_visible(cx, true);
+    }
     (item, new_drawn_status)
 }
 
 /// Draws the Html or plaintext body of the given Text or Notice message into the `message_content_widget`.
-fn populate_text_message_content(
+pub fn populate_text_message_content(
     cx: &mut Cx,
     message_content_widget: &HtmlOrPlaintextRef,
     body: &str,
@@ -3472,7 +3970,7 @@ fn populate_text_message_content(
 /// Draws the given image message's content into the `message_content_widget`.
 ///
 /// Returns whether the image message content was fully drawn.
-fn populate_image_message_content(
+pub fn populate_image_message_content(
     cx: &mut Cx2d,
     text_or_image_ref: &TextOrImageRef,
     image_info_source: Option<(Option<ImageInfo>, MediaSource)>,
@@ -3589,7 +4087,7 @@ fn populate_image_message_content(
 /// Draws a file message's content into the given `message_content_widget`.
 ///
 /// Returns whether the file message content was fully drawn.
-fn populate_file_message_content(
+pub fn populate_file_message_content(
     cx: &mut Cx,
     message_content_widget: &HtmlOrPlaintextRef,
     file_content: &FileMessageEventContent,
@@ -3619,7 +4117,7 @@ fn populate_file_message_content(
 /// Draws an audio message's content into the given `message_content_widget`.
 ///
 /// Returns whether the audio message content was fully drawn.
-fn populate_audio_message_content(
+pub fn populate_audio_message_content(
     cx: &mut Cx,
     message_content_widget: &HtmlOrPlaintextRef,
     audio: &AudioMessageEventContent,
@@ -3660,7 +4158,7 @@ fn populate_audio_message_content(
 /// Draws a video message's content into the given `message_content_widget`.
 ///
 /// Returns whether the video message content was fully drawn.
-fn populate_video_message_content(
+pub fn populate_video_message_content(
     cx: &mut Cx,
     message_content_widget: &HtmlOrPlaintextRef,
     video: &VideoMessageEventContent,
@@ -3705,7 +4203,7 @@ fn populate_video_message_content(
 /// Draws the given location message's content into the `message_content_widget`.
 ///
 /// Returns whether the location message content was fully drawn.
-fn populate_location_message_content(
+pub fn populate_location_message_content(
     cx: &mut Cx,
     message_content_widget: &HtmlOrPlaintextRef,
     location: &LocationMessageEventContent,
@@ -3744,6 +4242,19 @@ fn populate_location_message_content(
     true
 }
 
+fn populate_search_date_divider<T>(cx: &mut Cx2d, event_tl_item: &T, context_before_event_indexes: Vec<usize>, index: usize, date_divider_template: Option<LivePtr>) where T: MessageViewFromEvent {
+    if context_before_event_indexes.contains(&index) {
+        let millis = event_tl_item.timestamp();
+        let text = unix_time_millis_to_datetime(&millis)
+        // format the time as a shortened date (Sat, Sept 5, 2021)
+        .map(|dt| format!("{}", dt.date_naive().format("%a %b %-d, %Y")))
+        .unwrap_or_else(|| format!("{:?}", millis));
+        let item = WidgetRef::new_from_ptr(cx, date_divider_template).as_label();
+        item.label(id!(date)).set_text(cx, &text);
+        item.draw_all(cx, &mut Scope::empty());
+    }
+   
+}
 /// Draws a ReplyPreview above a message if it was in-reply to another message.
 ///
 /// If the given `in_reply_to` details are `None`,
@@ -3862,7 +4373,7 @@ fn populate_preview_of_timeline_item(
 
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
-trait SmallStateEventContent {
+pub trait SmallStateEventContent<T:MessageViewFromEvent> {
     /// Populates the *content* (not the profile) of the given `item` with data from
     /// the given `event_tl_item` and `self` (the specific type of event content).
     ///
@@ -3883,7 +4394,7 @@ trait SmallStateEventContent {
         list: &mut PortalList,
         item_id: usize,
         item: WidgetRef,
-        event_tl_item: &EventTimelineItem,
+        event_tl_item: &T,
         username: &str,
         item_drawn_status: ItemDrawnStatus,
         new_drawn_status: ItemDrawnStatus,
@@ -3893,21 +4404,21 @@ trait SmallStateEventContent {
 /// An empty marker struct used for populating redacted messages.
 struct RedactedMessageEventMarker;
 
-impl SmallStateEventContent for RedactedMessageEventMarker {
+impl SmallStateEventContent<MessageViewFromEventWrapperETI<'_>> for RedactedMessageEventMarker {
     fn populate_item_content(
         &self,
         cx: &mut Cx,
         _list: &mut PortalList,
         _item_id: usize,
         item: WidgetRef,
-        event_tl_item: &EventTimelineItem,
+        event_tl_item: &MessageViewFromEventWrapperETI,
         original_sender: &str,
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
         item.label(id!(content)).set_text(
             cx,
-            &text_preview_of_redacted_message(event_tl_item, original_sender)
+            &text_preview_of_redacted_message(event_tl_item.0, original_sender)
                 .format_with(original_sender),
         );
         new_drawn_status.content_drawn = true;
@@ -3915,19 +4426,19 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
     }
 }
 
-impl SmallStateEventContent for timeline::OtherState {
+impl SmallStateEventContent<MessageViewFromEventWrapperETI<'_>> for timeline::OtherState {
     fn populate_item_content(
         &self,
         cx: &mut Cx,
         list: &mut PortalList,
         item_id: usize,
         item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
+        _event_tl_item: &MessageViewFromEventWrapperETI,
         username: &str,
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        let item = if let Some(text_preview) = text_preview_of_other_state(self) {
+        let item = if let Some(text_preview) = text_preview_of_other_state(self.content(), self.state_key()) {
             item.label(id!(content))
                 .set_text(cx, &text_preview.format_with(username));
             new_drawn_status.content_drawn = true;
@@ -3941,14 +4452,14 @@ impl SmallStateEventContent for timeline::OtherState {
     }
 }
 
-impl SmallStateEventContent for MemberProfileChange {
+impl SmallStateEventContent<MessageViewFromEventWrapperETI<'_>> for MemberProfileChange {
     fn populate_item_content(
         &self,
         cx: &mut Cx,
         _list: &mut PortalList,
         _item_id: usize,
         item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
+        _event_tl_item: &MessageViewFromEventWrapperETI,
         username: &str,
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
@@ -3962,14 +4473,14 @@ impl SmallStateEventContent for MemberProfileChange {
     }
 }
 
-impl SmallStateEventContent for RoomMembershipChange {
+impl SmallStateEventContent<MessageViewFromEventWrapperETI<'_>> for RoomMembershipChange {
     fn populate_item_content(
         &self,
         cx: &mut Cx,
         list: &mut PortalList,
         item_id: usize,
         item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
+        _event_tl_item: &MessageViewFromEventWrapperETI,
         username: &str,
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
@@ -3989,18 +4500,19 @@ impl SmallStateEventContent for RoomMembershipChange {
     }
 }
 
+
 /// Creates, populates, and adds a SmallStateEvent liveview widget to the given `PortalList`
 /// with the given `item_id`.
 ///
 /// The content of the returned widget is populated with data from the
 /// given room membership change and its parent `EventTimelineItem`.
-fn populate_small_state_event(
+pub fn populate_small_state_event<T: MessageViewFromEvent>(
     cx: &mut Cx,
     list: &mut PortalList,
     item_id: usize,
     room_id: &OwnedRoomId,
-    event_tl_item: &EventTimelineItem,
-    event_content: &impl SmallStateEventContent,
+    event_tl_item: &T,
+    event_content: &impl SmallStateEventContent<T>,
     item_drawn_status: ItemDrawnStatus,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
@@ -4027,7 +4539,7 @@ fn populate_small_state_event(
             cx,
             room_id,
             event_tl_item.sender(),
-            Some(event_tl_item.sender_profile()),
+            event_tl_item.sender_profile(),
             event_tl_item.event_id(),
         );
         // Draw the timestamp as part of the profile.
@@ -4056,7 +4568,7 @@ fn populate_small_state_event(
 
 /// Sets the text of the `Label` at the given `item`'s live ID path
 /// to a typical 12-hour AM/PM timestamp format.
-fn set_timestamp(
+pub fn set_timestamp(
     cx: &mut Cx,
     item: &WidgetRef,
     live_id_path: &[LiveId],
@@ -4073,8 +4585,8 @@ fn set_timestamp(
 }
 
 /// 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() {
+fn get_profile_display_name<T: MessageViewFromEvent>(event_tl_item: &T) -> Option<String> {
+    if let Some(TimelineDetails::Ready(profile)) = event_tl_item.sender_profile() {
         profile.display_name.clone()
     } else {
         None
@@ -4394,8 +4906,9 @@ impl Message {
 }
 
 impl MessageRef {
-    fn set_data(&self, details: MessageDetails) {
+    pub fn set_data(&self, details: MessageDetails) {
         let Some(mut inner) = self.borrow_mut() else { return };
         inner.set_data(details);
     }
 }
+
diff --git a/src/home/room_search_result.rs b/src/home/room_search_result.rs
new file mode 100644
index 000000000..54cf02bcb
--- /dev/null
+++ b/src/home/room_search_result.rs
@@ -0,0 +1,592 @@
+use std::{collections::HashMap, sync::Arc};
+
+use imbl::Vector;
+use indexmap::IndexMap;
+use makepad_widgets::*;
+use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, InReplyToDetails, ReactionsByKeyBySender, TimelineDetails, TimelineEventItemId, TimelineItem, VirtualTimelineItem};
+use ruma::{api::client::search::search_events::v3::ResultCategories, events::{receipt::Receipt, room::message::{MessageType, RoomMessageEventContent}, AnyMessageLikeEvent, AnyStateEventContent, AnyTimelineEvent, FullStateEventContent}, uint, EventId, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, OwnedUserId, UserId};
+
+use crate::{event_preview::text_preview_of_other_state, shared::search_bar::SearchBarAction, sliding_sync::{submit_async_request, MatrixRequest}};
+
+use super::{new_message_context_menu::ContextMenuFromEvent, room_screen::{ItemDrawnStatus, MessageViewFromEvent, PreviousMessageViewFromEvent, RoomScreen, SearchResultState, SmallStateEventContent, TimelineUiState}};
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+    use crate::shared::styles::*;
+    use crate::shared::helpers::*;
+    use crate::shared::icon_button::*;
+    use crate::home::rooms_list::RoomsList;
+    use crate::home::room_screen::*;
+    COLOR_BUTTON_GREY = #B6BABF
+    ICON_SEARCH = dep("crate://self/resources/icons/search.svg")
+    SearchIcon = <Icon> {
+        align: {x: 0.0} // Align to top-right
+        spacing: 10,
+        margin: {top: 0, left: 10},
+        padding: {top: 10, bottom: 10, left: 8, right: 15}
+        width: Fit,
+        height: Fit,
+        draw_bg: {
+            instance color: (COLOR_BUTTON_GREY)
+            instance color_hover: #fef65b
+            instance border_width: 1.5
+            instance radius: 3.0
+            instance hover: 0.0
+            fn get_color(self) -> vec4 {
+                return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
+            }
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                sdf.box(
+                    self.border_width,
+                    self.border_width,
+                    self.rect_size.x - self.border_width * 2.0,
+                    self.rect_size.y - self.border_width * 2.0,
+                    max(1.0, self.radius)
+                )
+                sdf.fill(self.get_color());
+                return sdf.result;
+            }
+        }
+        draw_icon: {
+            svg_file: (ICON_SEARCH),
+            fn get_color(self) -> vec4 {
+                return (COLOR_TEXT_INPUT_IDLE);
+            }
+        }
+        icon_walk: {width: 16, height: 16}
+    }
+    TopSpace = <View> {
+        visible: false,
+        width: Fill,
+        height: Fit,
+        align: {x: 0.5, y: 0}
+        show_bg: true,
+        draw_bg: {
+            color: #xDAF5E5F0, // mostly opaque light green
+        }
+
+        label = <Label> {
+            width: Fill,
+            height: Fit,
+            align: {x: 0.5, y: 0.5},
+            padding: { top: 10.0, bottom: 7.0, left: 15.0, right: 15.0 }
+            draw_text: {
+                text_style: <MESSAGE_TEXT_STYLE> { font_size: 10 },
+                color: (TIMESTAMP_TEXT_COLOR)
+            }
+            text: "Loading more search results..."
+        }
+    }
+    pub SearchResult = {{SearchResult}} {
+        width: Fill,
+        height: Fill,
+        show_bg: false,
+        // draw_bg: {
+        //     color: (COLOR_SECONDARY)
+        // }
+        flow: Overlay,
+        loading_view = <View> {
+            width: Fill,
+            height: Fill,
+            show_bg: true,
+            visible: true,
+            draw_bg: {
+                color: (COLOR_SECONDARY)
+            }
+            align: {x: 0.5, y: 0.5}
+            <SearchIcon> {}
+        }
+        <View> {
+            width: Fill,
+            height: Fit,
+            flow: Down,
+            <View> {
+                width: Fill,
+                height: 60,
+                show_bg: true,
+                align: {y: 0.5}
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
+                }
+                <SearchIcon> {}
+                summary_label = <Html> {
+                    margin: {left: 10},
+                    align: {x: 0.3}  // Align to top-right
+                    width: Fill,
+                    height: Fit,
+                    padding: 0,
+                    font_color: (MESSAGE_TEXT_COLOR),
+                    font_size: (MESSAGE_FONT_SIZE),
+                    body: ""
+                }
+                search_all_rooms_button = <Button> {
+                    align: {x: 0.8},
+                    margin: {right:10, top: -2}
+                    draw_text:{color:#000}
+                    text: "Search All Rooms"
+                }
+                cancel_button = <RobrixIconButton> {
+                    align: {x: 1.0}
+                    margin: {right: 10, top:0},
+                    width: Fit,
+                    height: Fit,
+                    padding: {left: 15, right: 15}
+                    draw_bg: {
+                        border_color: (COLOR_DANGER_RED),
+                        color: #fff0f0 // light red
+                    }
+                    draw_icon: {
+                        svg_file: (ICON_CLOSE),
+                        color: (COLOR_DANGER_RED)
+                    }
+                    icon_walk: {width: 16, height: 16, margin: 0}
+                }
+            }
+            top_space = <TopSpace> {
+                visible: true
+            }
+        }
+        
+        
+        
+    }
+}
+
+// The main widget that displays a single Matrix room.
+#[derive(Live, LiveHook, Widget)]
+pub struct SearchResult {
+    #[deref] pub view: View,
+    #[rust] pub search_criteria: String,
+    #[rust] pub result_count: u32,
+    #[live(true)] visible: bool,
+}
+
+impl Widget for SearchResult {
+    // Handle events and actions for the SearchResult widget and its inner Timeline view.
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if !self.visible {
+            return;
+        }
+        self.match_event(cx, event);
+        self.view.handle_event(cx, event, scope);
+    }
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        if !self.visible {
+            return DrawStep::done();
+        }
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+impl MatchEvent for SearchResult {
+    fn handle_actions(&mut self, cx: &mut Cx, actions:&Actions) {
+        let cancel_button_clicked = self.view.button(id!(cancel_button)).clicked(actions);
+        if cancel_button_clicked {
+            cx.widget_action(self.widget_uid(), &Scope::empty().path, SearchBarAction::ResetSearch);
+        }
+    }
+}
+impl SearchResult {
+    /// Display search summary.
+    ///
+    /// This is used to display the number of search results and the search criteria
+    /// in the top-right of the room screen.
+    fn set_result_count(&mut self, cx: &mut Cx, search_result_count: u32) {
+        self.result_count = search_result_count;
+        self.view.html(id!(summary_label)).set_text(cx, &format!("{} results for <b>'{}'</b>", self.result_count, self.search_criteria));
+        self.view.view(id!(loading_view)).set_visible(cx, false);
+    }
+    /// Set Search criteria.
+    ///
+    /// This is used to display the number of search results and the search criteria
+    /// in the top-right of the room screen.
+    fn set_search_criteria(&mut self, cx: &mut Cx, search_criteria: String) {
+        self.view.html(id!(summary_label)).set_text(cx, &format!("Searching for <b>'{}'</b>", search_criteria));
+        self.search_criteria = search_criteria;
+        self.visible = true;
+    }
+    /// Resets the search result summary and set the loading view back to visible.
+    ///
+    /// This function clears the summary text and makes the loading indicator visible.
+    /// It is typically used when a new search is initiated or search results are being cleared.
+    fn reset(&mut self, cx: &mut Cx) {
+        self.view.html(id!(summary_label)).set_text(cx, "");
+        self.view.view(id!(loading_view)).set_visible(cx, true);
+        self.search_criteria = String::from("");
+        self.visible = false;
+        self.result_count = 0;
+    }
+    /// Displays the loading view for backwards pagination for search result.
+    fn display_top_space(&mut self, cx: &mut Cx) {
+        self.view.view(id!(top_space)).set_visible(cx, true);
+    }
+    /// Hides the loading view for backwards pagination for search result.
+    fn hide_top_space(&mut self, cx: &mut Cx) {
+        self.view.view(id!(top_space)).set_visible(cx, false);
+    }
+
+}
+impl SearchResultRef {
+    /// See [`SearchResult::set_visible()`].
+    pub fn set_visible(&self, cx: &mut Cx, visible: bool) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.visible = visible;
+            inner.redraw(cx);
+        }
+    }
+    /// See [`SearchResult::set_result_count()`].
+    pub fn set_result_count(&mut self, cx: &mut Cx, search_result_count: u32) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.set_result_count(cx, search_result_count);
+    }
+    /// See [`SearchResult::set_search_criteria()`].
+    pub fn set_search_criteria(&self, cx: &mut Cx, search_criteria: String) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.set_search_criteria(cx, search_criteria);
+    }
+    /// See [`SearchResult::reset()`].
+    pub fn reset(&self, cx: &mut Cx) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.reset(cx);
+    }
+    /// See [`SearchResult::display_top_space()`].
+    pub fn display_top_space(&self, cx: &mut Cx) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.display_top_space(cx);
+    }
+    /// See [`SearchResult::hide_top_space()`].
+    pub fn hide_top_space(&self, cx: &mut Cx) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.hide_top_space(cx);
+    }
+}
+pub fn send_pagination_request_based_on_scroll_pos_for_search_result(
+    room_screen: &mut RoomScreen,
+    _cx: &mut Cx,
+    actions: &ActionsBuf,
+    portal_list: &PortalListRef,
+) {
+    let Some(tl) = room_screen.tl_state.as_mut() else { return };
+    let search_result_state = &mut tl.search_result_state;
+    if search_result_state.fully_paginated { return };
+    
+    if !portal_list.scrolled(actions) { return };
+
+    let first_index = portal_list.first_id();
+    if first_index == 0 && search_result_state.last_scrolled_index > 0 {
+        if let Some(backward_pagination_batch) = &search_result_state.backward_pagination_batch {
+            if !search_result_state.batch_list.contains(backward_pagination_batch) {
+                log!("Scrolled up from item {} --> 0, sending back search_result request for room {} &search_result_state.backward_pagination_batch {:?}",
+                    search_result_state.last_scrolled_index, tl.room_id, search_result_state.backward_pagination_batch
+                );
+                submit_async_request(MatrixRequest::SearchMessages {
+                    room_id: tl.room_id.clone(),
+                    include_all_rooms: search_result_state.include_all_rooms,
+                    search_term: search_result_state.search_term.clone(),
+                    backward_pagination_batch: search_result_state.backward_pagination_batch.clone(),
+                });
+            }
+        }
+    }
+    tl.search_result_state.last_scrolled_index = first_index;
+}
+
+#[derive(Clone)]
+pub struct SearchTimelineItem{
+    pub kind: SearchTimelineItemKind
+}
+impl SearchTimelineItem{
+    pub fn with_context_event(event: AnyTimelineEvent) -> Self {
+        SearchTimelineItem {
+            kind: SearchTimelineItemKind::ContextEvent(event)
+        }
+    }
+    pub fn with_event(event: AnyTimelineEvent) -> Self {
+        SearchTimelineItem {
+            kind: SearchTimelineItemKind::Event(event)
+        }
+    }
+    pub fn with_virtual(virtual_item: VirtualTimelineItem) -> Self {
+        SearchTimelineItem {
+            kind: SearchTimelineItemKind::Virtual(virtual_item)
+        }
+    }
+    pub fn with_room_header(room_id: OwnedRoomId) -> Self {
+        SearchTimelineItem {
+            kind: SearchTimelineItemKind::RoomHeader(room_id)
+        }
+    }
+    pub fn body_of_timeline_item(&self) -> Option<String> {
+        if let SearchTimelineItemKind::Event(AnyTimelineEvent::MessageLike(AnyMessageLikeEvent::RoomMessage(room_msg))) = &self.kind {
+            if let Some(room_msg) = room_msg.as_original() {
+                return Some(room_msg.content.body().to_string())
+            }
+        }
+        None
+    }
+}
+#[derive(Clone)]
+pub enum SearchTimelineItemKind {
+    /// The event that matches the search criteria 
+    Event(AnyTimelineEvent),
+    /// The events before or after the event that matches the search criteria
+    ContextEvent(AnyTimelineEvent),
+    /// An item that doesn't correspond to an event, for example the user's
+    /// own read marker, or a date divider.
+    Virtual(VirtualTimelineItem),
+    /// The room header displaying room name for all found messages in a room.
+    RoomHeader(OwnedRoomId),
+}
+
+/// Wrapper for `AnyStateEventContent` that provides the state key for the event.
+pub struct AnyStateEventContentWrapper<'a>(pub &'a AnyStateEventContent, pub &'a str);
+
+impl From<&AnyStateEventContentWrapper<'_>> for Option<AnyOtherFullStateEventContent> {
+    fn from(val: &AnyStateEventContentWrapper<'_>) -> Self {
+        match val.0.clone() {
+            AnyStateEventContent::RoomAliases(p) => Some(AnyOtherFullStateEventContent::RoomAliases(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomAvatar(p) => Some(AnyOtherFullStateEventContent::RoomAvatar(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomCanonicalAlias(p) => Some(AnyOtherFullStateEventContent::RoomCanonicalAlias(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomCreate(p) => Some(AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomEncryption(p) => Some(AnyOtherFullStateEventContent::RoomEncryption(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomGuestAccess(p) => Some(AnyOtherFullStateEventContent::RoomGuestAccess(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomHistoryVisibility(p) => Some(AnyOtherFullStateEventContent::RoomHistoryVisibility(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomJoinRules(p) => Some(AnyOtherFullStateEventContent::RoomJoinRules(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomPinnedEvents(p) => Some(AnyOtherFullStateEventContent::RoomPinnedEvents(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomName(p) => Some(AnyOtherFullStateEventContent::RoomName(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomPowerLevels(p) => Some(AnyOtherFullStateEventContent::RoomPowerLevels(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomServerAcl(p) => Some(AnyOtherFullStateEventContent::RoomServerAcl(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomTombstone(p) => Some(AnyOtherFullStateEventContent::RoomTombstone(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomTopic(p) => Some(AnyOtherFullStateEventContent::RoomTopic(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::SpaceParent(p) => Some(AnyOtherFullStateEventContent::SpaceParent(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::SpaceChild(p) => Some(AnyOtherFullStateEventContent::SpaceChild(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::PolicyRuleRoom(p) => Some(AnyOtherFullStateEventContent::PolicyRuleRoom(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::PolicyRuleServer(p) => Some(AnyOtherFullStateEventContent::PolicyRuleServer(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::PolicyRuleUser(p) => Some(AnyOtherFullStateEventContent::PolicyRuleUser(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::RoomThirdPartyInvite(p) => Some(AnyOtherFullStateEventContent::RoomThirdPartyInvite(FullStateEventContent::Original { content: p, prev_content: None})),
+            AnyStateEventContent::BeaconInfo(_) => None,
+            AnyStateEventContent::CallMember(_) => None,
+            AnyStateEventContent::MemberHints(_) => None,
+            AnyStateEventContent::RoomMember(_) => None,
+            _ => None,
+        }
+
+    }
+}
+/// A wrapper for `AnyTimelineEvent` that implements `MessageViewFromEvent`.
+pub struct MessageViewFromEventWrapperAEI<'a>(pub &'a AnyTimelineEvent);
+
+/// A trait for abstracting over the different types of timeline events for populating messages.
+/// 
+/// This is used for populating messages in the timeline and the search result.
+impl MessageViewFromEvent for MessageViewFromEventWrapperAEI<'_> {
+    fn timestamp(&self) -> MilliSecondsSinceUnixEpoch {
+        self.0.origin_server_ts()
+    }
+    fn event_id(&self) -> Option<&EventId> {
+        Some(self.0.event_id())
+    }
+    fn sender(&self) -> &UserId {
+        self.0.sender()
+    }
+    fn sender_profile(&self) -> Option<&TimelineDetails<matrix_sdk_ui::timeline::Profile>> {
+        None
+    }
+    fn reactions(&self) -> Option<ReactionsByKeyBySender> {
+        None
+    }
+    fn identifier(&self) -> TimelineEventItemId {
+        TimelineEventItemId::EventId(self.0.event_id().to_owned())
+    }
+    fn is_highlighted(&self) -> bool {
+        false
+    }
+    fn is_editable(&self) -> bool {
+        false
+    }
+    fn is_own(&self) -> bool {
+        false
+    }
+    fn can_be_replied_to(&self) -> bool {
+        false
+    }
+    fn read_receipts(&self) -> Option<&IndexMap<OwnedUserId, Receipt>> {
+        None
+    }
+    fn latest_json(&self) -> Option<&ruma::serde::Raw<ruma::events::AnySyncTimelineEvent>> {
+        None
+    }
+    fn room_id(&self) -> Option<&ruma::RoomId> {
+        Some(self.0.room_id())
+    }
+}
+
+
+impl SmallStateEventContent<MessageViewFromEventWrapperAEI<'_>> for AnyStateEventContentWrapper<'_> {
+    fn populate_item_content(
+        &self,
+        cx: &mut Cx,
+        list: &mut PortalList,
+        item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &MessageViewFromEventWrapperAEI,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        let Some(other_state) = self.into() else { return (list.item(cx, item_id, live_id!(Empty)), ItemDrawnStatus::new()) };
+        let item = if let Some(text_preview) = text_preview_of_other_state(&other_state, self.1) {
+            item.label(id!(content))
+                .set_text(cx, &text_preview.format_with(username));
+            new_drawn_status.content_drawn = true;
+            item
+        } else {
+            let item = list.item(cx, item_id, live_id!(Empty));
+            new_drawn_status = ItemDrawnStatus::new();
+            item
+        };
+        (item, new_drawn_status)
+    }
+}
+
+/// A wrapper for `AnyTimelineEvent` that implements `PreviousMessageViewFromEvent`.
+pub struct PreviousWrapperAEI<'a>(pub &'a AnyTimelineEvent);
+impl <'a> PreviousMessageViewFromEvent<MessageViewFromEventWrapperAEI<'a>> for PreviousWrapperAEI<'a> {
+    fn use_compact(&self, current: &MessageViewFromEventWrapperAEI<'a>) -> bool {
+        let prev_msg_sender = self.0.sender();
+        let current_sender = current.0.sender();
+        prev_msg_sender == current_sender && current.0.origin_server_ts().0.checked_sub(self.0.origin_server_ts().0)
+            // Use compact_view within a day
+            .is_some_and(|d| d < uint!(86400000))
+    }
+}
+/// A wrapper for `RoomMessageEventContent` that implements `ContextMenuFromEvent`.
+pub struct RoomMessageWrapper<'a>(pub &'a RoomMessageEventContent);
+impl ContextMenuFromEvent for RoomMessageWrapper<'_> {
+    fn msgtype(&self) -> &MessageType {
+        &self.0.msgtype
+    }
+    fn body(&self) -> &str {
+        self.0.body()
+    }
+    fn in_reply_to(&self) -> Option<&InReplyToDetails> {
+        None
+    }
+    fn is_searched_result(&self) -> bool {
+        true
+    }
+}
+
+pub fn handle_search_new_items(
+    tl: &mut SearchResultState, 
+    new_items: Vector<Arc<TimelineItem>>, 
+    forward_pagination_batch: Option<String>, 
+    backward_pagination_batch: Option<String>,
+) {
+    if let Some(forward_pagination_batch) = forward_pagination_batch.clone() {
+        tl.batch_list.push(forward_pagination_batch);
+    }
+    tl.backward_pagination_batch = backward_pagination_batch;
+    for item in new_items.iter().rev() {
+        tl.items.push_front(item.clone());
+    }
+}
+
+pub fn convert_result_categories_to_search_item(results: ResultCategories) -> Vector<SearchTimelineItem> {
+    let mut timeline_events= Vector::new();
+    let mut last_room_id: Option<OwnedRoomId> = None;
+    for item in results.room_events.results.iter().rev() {
+        let Some(event) = item.result.clone().and_then(|f|f.deserialize().ok()) else { continue };
+        if let Some(ref mut last_room_id) = last_room_id {
+            if last_room_id != event.room_id() {
+                *last_room_id = event.room_id().to_owned();
+                timeline_events.push_back(SearchTimelineItem::with_room_header(last_room_id.clone()));
+            }
+        } else {
+            last_room_id = Some(event.room_id().to_owned());
+            timeline_events.push_back(SearchTimelineItem::with_room_header(event.room_id().to_owned()));
+
+        }
+        timeline_events.push_back(SearchTimelineItem::with_virtual(VirtualTimelineItem::DateDivider(event.origin_server_ts())));
+        item.context.events_after.iter().for_each(|f| {
+            // if let Ok(timeline_event) = f.deserialize() {
+            //     timeline_events.push_back(SearchTimelineItem::with_context_event(timeline_event));
+            // }
+            match f.deserialize() {
+                Ok(timeline_event) => timeline_events.push_back(SearchTimelineItem::with_context_event(timeline_event)),
+                Err(e) => println!("Error deserializing after event: {e:?}")
+            }
+        });
+        timeline_events.push_back(SearchTimelineItem::with_event(event.clone()));
+        item.context.events_before.iter().for_each(|f| {
+            // if let Ok(timeline_event) = f.deserialize() {
+            //     timeline_events.push_back(SearchTimelineItem::with_context_event(timeline_event));
+            // } else if Err(e) {
+
+            // }
+            match f.deserialize() {
+                Ok(timeline_event) => timeline_events.push_back(SearchTimelineItem::with_context_event(timeline_event)),
+                Err(e) => println!("Error deserializing before event: {e:?}")
+            }
+        });
+        
+        
+        
+        
+    }
+    timeline_events
+}
+
+#[derive(Default)]
+pub struct SearchResultDrawState {
+    pub last_room_id: Option<OwnedRoomId>,
+    pub done_loading: bool,
+    pub last_date_divider_string: String,
+}
+/// The search result item with context events before and after the target event.
+#[derive(Clone, Debug)]
+pub enum SearchTimeline {
+    Context(Arc<TimelineItem>),
+    Target(Arc<TimelineItem>),
+}
+pub struct CondensedSearchResult {
+    pub event: OwnedEventId,
+    pub context_before: Option<OwnedEventId>,
+    pub context_after: Option<OwnedEventId>
+}
+
+pub fn append_to_tl_state(room_screen_view: &View,cx: &mut Cx, tl: &mut TimelineUiState, search_structure_len: usize, done_loading: &mut bool, count: u32, highlights: Vec<String>){
+    room_screen_view.search_result(id!(search_result_plane)).set_result_count(cx, count);
+    room_screen_view.view(id!(search_timeline)).set_visible(cx, true);
+    *done_loading = true;
+    tl.search_result_state.highlighted_strings = highlights;
+    let mut target_event_indexes: Vec<usize> = Vec::with_capacity(search_structure_len);
+    let mut context_before_event_indexes: Vec<usize> = Vec::with_capacity(search_structure_len);
+    for i in (0..tl.search_result_state.pre_processed_items.len()).rev() {
+        println!("i {:?}", i);
+        if let Some((items, has_context_before)) = tl.search_result_state.pre_processed_items.get(&i) {
+            for item in items.iter() {
+                match item {
+                    SearchTimeline::Target(timeline) => {
+                        if *has_context_before {
+                            context_before_event_indexes.push(tl.search_result_state.items.len().saturating_sub(1));
+                        } else {
+                            context_before_event_indexes.push(tl.search_result_state.items.len());
+                        }
+                        target_event_indexes.push(tl.search_result_state.items.len());
+                        tl.search_result_state.items.push_back(timeline.clone());
+                    },
+                    SearchTimeline::Context(timeline) => {
+                        tl.search_result_state.items.push_back(timeline.clone());
+                    },
+                }
+            }
+        }
+    }
+    println!("target_event_indexes {:?}", target_event_indexes);
+    tl.search_result_state.context_before_event_indexes = context_before_event_indexes;
+    tl.search_result_state.target_event_indexes = target_event_indexes;
+    tl.search_result_state.pre_processed_items = HashMap::new();
+}
\ No newline at end of file
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index c023a9c84..de8663e2a 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -451,8 +451,21 @@ impl RoomsList {
             n => format!("Found {} matching rooms.", n),
         }
     }
+    /// Returns the name of the room associated with the given room_id if it exists.
+    pub fn get_room_name(&self, room_id: &OwnedRoomId) -> Option<String> {
+        self.all_rooms.get(room_id).and_then(|room| room.room_name.clone())
+    }
+}
+impl RoomsListRef {
+    // See [`RoomsList::get_room_name`].
+    pub fn get_room_name(&self, room_id: &OwnedRoomId) -> Option<String> {
+        if let Some(inner) = self.borrow() {
+            inner.get_room_name(room_id)
+        } else {
+            None
+        }
+    }
 }
-
 impl Widget for RoomsList {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         // Process all pending updates to the list of all rooms, and then redraw it.
diff --git a/src/home/rooms_sidebar.rs b/src/home/rooms_sidebar.rs
index 215e89428..6235d64b3 100644
--- a/src/home/rooms_sidebar.rs
+++ b/src/home/rooms_sidebar.rs
@@ -1,6 +1,6 @@
 use makepad_widgets::*;
 
-use crate::shared::search_bar::SearchBarAction;
+use crate::shared::search_bar::{SearchBarAction, SearchBarWidgetExt};
 
 live_design! {
     use link::theme::*;
@@ -87,8 +87,9 @@ impl Widget for RoomsView {
 impl WidgetMatchEvent for RoomsView {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
         let widget_uid = self.widget_uid();
-        for action in actions {
-            match action.as_widget_action().cast() {
+        let search_bar_widget_uid = self.view.search_bar(id!(search_bar)).widget_uid();
+        if let Some(search_widget_action) = actions.find_widget_action(search_bar_widget_uid) {
+            match search_widget_action.cast() {
                 SearchBarAction::Search(keywords) => {
                     cx.widget_action(widget_uid, &scope.path, RoomsViewAction::Search(keywords.clone()));
                 }
diff --git a/src/lib.rs b/src/lib.rs
index 1c45c38aa..4befc2075 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -20,7 +20,6 @@ pub mod shared;
 mod event_preview;
 mod room;
 
-
 // Matrix stuff
 pub mod sliding_sync;
 pub mod avatar_cache;
diff --git a/src/shared/search_bar.rs b/src/shared/search_bar.rs
index 2112fc6b7..ca1ce7cdf 100644
--- a/src/shared/search_bar.rs
+++ b/src/shared/search_bar.rs
@@ -1,5 +1,4 @@
 use makepad_widgets::*;
-
 live_design! {
     use link::theme::*;
     use link::shaders::*;
@@ -76,6 +75,10 @@ pub enum SearchBarAction {
     Search(String),
     /// The user has cleared the search query.
     ResetSearch,
+    /// The user has clicked the search bar.
+    ClickSearch,
+    /// The user has clear the text in the search bar.
+    Clear,
     None
 }
 
@@ -83,6 +86,15 @@ impl Widget for SearchBar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
         self.widget_match_event(cx, event, scope);
+        let area = self.text_input(id!(input)).area();
+        if let Hit::FingerDown(..) = event.hits(cx, area) {
+                let widget_uid = self.widget_uid(); 
+                cx.widget_action(
+                    widget_uid,
+                    &scope.path,
+                    SearchBarAction::ClickSearch
+                );
+            }
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
@@ -94,7 +106,6 @@ impl WidgetMatchEvent for SearchBar {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
         let input = self.text_input(id!(input));
         let clear_button = self.button(id!(clear_button));
-
         // Handle user changing the input text
         if let Some(keywords) = input.changed(actions) {
             clear_button.set_visible(cx, !keywords.is_empty());
@@ -126,5 +137,11 @@ impl WidgetMatchEvent for SearchBar {
                 SearchBarAction::ResetSearch,
             );
         }
+        for action in actions {
+            if let SearchBarAction::Clear = action.as_widget_action().widget_uid_eq(self.widget_uid()).cast() {
+                println!("clear search bar");
+                self.text_input(id!(input)).set_text(cx, "");
+            }
+        }
     }
 }
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index edef582ef..517c2b89d 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -8,7 +8,7 @@ use imbl::Vector;
 use makepad_widgets::{error, log, warning, Cx, SignalToUI};
 use matrix_sdk::{
     config::RequestConfig, event_handler::EventHandlerDropGuard, media::MediaRequestParameters, room::{edit::EditedContent, RoomMember}, ruma::{
-        api::client::receipt::create_receipt::v3::ReceiptType, events::{
+        api::client::{receipt::create_receipt::v3::ReceiptType, search::search_events::v3::Categories}, events::{
             receipt::ReceiptThread, room::{
                 message::{ForwardThread, RoomMessageEventContent}, power_levels::RoomPowerLevels, MediaSource
             }, FullStateEventContent, MessageLikeEventType, StateEventType
@@ -16,20 +16,21 @@ use matrix_sdk::{
     }, sliding_sync::VersionBuilder, Client, ClientBuildError, Error, OwnedServerName, Room, RoomMemberships
 };
 use matrix_sdk_ui::{
-    room_list_service::{self, RoomListLoadingState}, sync_service::{self, SyncService}, timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, RepliedToInfo, TimelineEventItemId, TimelineItem, TimelineItemContent}, RoomListService, Timeline
+    room_list_service::{self, RoomListLoadingState}, sync_service::{self, SyncService}, timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, RepliedToInfo, RoomExt, TimelineEventItemId, TimelineFocus, TimelineItem, TimelineItemContent}, RoomListService, Timeline
 };
 use robius_open::Uri;
 use tokio::{
     runtime::Handle,
-    sync::{mpsc::{Receiver, Sender, UnboundedReceiver, UnboundedSender}, watch, Notify}, task::JoinHandle,
+    sync::{mpsc::{Receiver, Sender, UnboundedReceiver, UnboundedSender}, watch, Notify}, task::{AbortHandle, JoinHandle},
 };
 use unicode_segmentation::UnicodeSegmentation;
 use url::Url;
-use std::{cmp::{max, min}, collections::{BTreeMap, BTreeSet}, ops::Not, path:: Path, sync::{Arc, LazyLock, Mutex, OnceLock}};
+use std::{cmp::{max, min}, collections::{BTreeMap, BTreeSet, HashMap}, ops::Not, path:: Path, sync::{Arc, LazyLock, Mutex, OnceLock}};
 use std::io;
+use ruma::{api::client::{filter::RoomEventFilter, search::search_events::v3::{Criteria, EventContext, OrderBy, Request}}, uint};
 use crate::{
     app_data_dir, avatar_cache::AvatarUpdate, event_preview::text_preview_of_timeline_item, home::{
-        room_screen::TimelineUpdate, rooms_list::{self, enqueue_rooms_list_update, RoomPreviewAvatar, RoomsListEntry, RoomsListUpdate}
+        room_screen::TimelineUpdate, room_search_result::{SearchTimeline, CondensedSearchResult}, rooms_list::{self, enqueue_rooms_list_update, RoomPreviewAvatar, RoomsListEntry, RoomsListUpdate}
     }, login::login_screen::LoginAction, media_cache::{MediaCacheEntry, MediaCacheEntryRef}, persistent_state::{self, ClientSessionPersisted}, profile::{
         user_profile::{AvatarState, UserProfile},
         user_profile_cache::{enqueue_user_profile_update, UserProfileUpdate},
@@ -373,6 +374,23 @@ pub enum MatrixRequest {
         matrix_id: MatrixId,
         via: Vec<OwnedServerName>
     },
+    /// General Matrix Search API with given categorie
+    SearchMessages {
+        /// The room to search for message.
+        room_id: OwnedRoomId,
+        /// Filter criteria for searching message.
+        include_all_rooms: bool,
+        /// Text in the search bar.
+        search_term: String,
+        backward_pagination_batch: Option<String>,
+    },
+    SearchFindMoreTimelines {
+        /// The room to search for message.
+        room_id: OwnedRoomId,
+        not_found: Vec<(usize, OwnedEventId)>,
+        count: u32,
+        highlights: Vec<String>,
+    }
 }
 
 /// Submits a request to the worker thread to be executed asynchronously.
@@ -431,7 +449,6 @@ async fn async_worker(
                     let sender = room_info.timeline_update_sender.clone();
                     (timeline_ref, sender)
                 };
-
                 // Spawn a new async task that will make the actual pagination request.
                 let _paginate_task = Handle::current().spawn(async move {
                     log!("Starting {direction} pagination request for room {room_id}...");
@@ -765,7 +782,7 @@ async fn async_worker(
 
                 let _typing_notices_task = Handle::current().spawn(async move {
                     while let Ok(user_ids) = typing_notice_receiver.recv().await {
-                        // log!("Received typing notifications for room {room_id}: {user_ids:?}");
+                        log!("Received typing notifications for room {room_id}: {user_ids:?}");
                         let mut users = Vec::with_capacity(user_ids.len());
                         for user_id in user_ids {
                             users.push(
@@ -1039,6 +1056,123 @@ async fn async_worker(
                     }
                 });
             }
+            MatrixRequest::SearchMessages { room_id,
+                search_term, 
+                include_all_rooms, 
+                backward_pagination_batch, 
+            } => {
+                abort_core_task(CoreTask::Search).await;
+                let client = CLIENT.get().unwrap();
+                let mut all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                let Some(room_info) = all_room_info.get_mut(&room_id) else {
+                    log!("Skipping Search request for not-yet-known room {room_id}");
+                    continue;
+                };
+                let sender = room_info.timeline_update_sender.clone();
+                let mut search_categories = Categories::new();
+                let mut room_filter = RoomEventFilter::empty();
+                room_filter.rooms = Some(vec![room_id.clone()]);
+                if include_all_rooms {
+                    room_filter.rooms = None;
+                }
+                let mut criteria = Criteria::new(search_term.clone());
+                criteria.filter = room_filter;
+                criteria.order_by = Some(OrderBy::Recent);
+                criteria.event_context = EventContext::new();
+                criteria.event_context.after_limit = uint!(1);
+                criteria.event_context.before_limit = uint!(1);
+                criteria.event_context.include_profile = true;
+                search_categories.room_events = Some(criteria);
+                let mut req = Request::new(search_categories);
+                req.next_batch = backward_pagination_batch.clone();
+                let handle = Handle::current().spawn(async move {
+                    match client.send(req).await {
+                        Ok(response) => {
+                            let backward_pagination_batch = response.search_categories.room_events.next_batch.clone();
+                            let count =  response.search_categories.room_events.count.and_then(|f| f.to_string().parse::<u32>().ok()).unwrap_or(0);
+                            let highlights = response.search_categories.room_events.highlights.clone();
+                            let mut processed_search_result_list = vec![];
+                            for result in response.search_categories.room_events.results {
+                                if let Some(event) = result.result {
+                                    if let Ok(e) = event.deserialize() {
+                                        let owned_event_id = e.event_id().to_owned();
+                                        let mut processed_search_result = CondensedSearchResult {
+                                            event: owned_event_id.clone(),
+                                            context_before: None,
+                                            context_after: None,
+                                        };
+                                        result.context.events_before.iter().for_each(|raw_timeline_event| {
+                                            processed_search_result.context_before = raw_timeline_event.deserialize().ok().map(|e| e.event_id().to_owned())
+                                        });
+                                        result.context.events_after.iter().for_each(|raw_timeline_event| {
+                                            processed_search_result.context_after = raw_timeline_event.deserialize().ok().map(|e| e.event_id().to_owned())
+                                        });
+                                        processed_search_result_list.push(processed_search_result);
+                                    }
+                                }
+                            }
+                            if let Err(e) = sender.send(
+                                TimelineUpdate::SearchThroughStreamedTimelines { search_term: search_term.clone(), events: processed_search_result_list, next_batch_token: backward_pagination_batch.clone(),
+                                count,
+                                highlights }) {
+                                error!("Failed to search message in {room_id}; error: {e:?}");
+                                enqueue_popup_notification(format!("Failed to search message. Error: {e}"));
+                            }
+                            if backward_pagination_batch.is_some() {
+                                submit_async_request(MatrixRequest::SearchMessages { room_id, include_all_rooms, search_term, backward_pagination_batch });
+                            }
+                            SignalToUI::set_ui_signal();
+                        }
+                        Err(e) => {
+                            error!("Failed to search message in {room_id}; error: {e:?}");
+                            enqueue_popup_notification(format!("Failed to search message. Error: {e}"));
+                        }
+                    }
+                });
+                register_core_task(CoreTask::Search, handle.abort_handle());
+            }
+            MatrixRequest::SearchFindMoreTimelines { not_found, room_id, count, highlights } => {
+                let all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                let Some(room_info) = all_room_info.get(&room_id) else {
+                    log!("BUG: room info not found for redact message {room_id}");
+                    continue;
+                };
+                let room = room_info.room.clone();
+                let sender = room_info.timeline_update_sender.clone();
+                let _handle = Handle::current().spawn(async move {
+                    let mut merged_timelines = vec![];
+                    for (index, item_event_id) in not_found {
+                        if let Ok(timeline) = room.timeline_builder().with_focus(TimelineFocus::Event { target: item_event_id.clone(), num_context_events: 2 }).build().await {
+                            let timelines = timeline.items().await;
+                            let mut timelines_with_types = Vector::new();
+                            let mut has_context_before = false;
+                            for (index, timeline_item) in timelines.iter().enumerate() {
+                                if let Some(event) = timeline_item.as_event() {
+                                    if event.event_id() == Some(&item_event_id) {
+                                        timelines_with_types.push_back(SearchTimeline::Target(timeline_item.clone()));
+                                        if index == 1 {
+                                            has_context_before = true;
+                                        }
+                                    } else {
+                                        timelines_with_types.push_back(SearchTimeline::Context(timeline_item.clone()));
+                                    }
+                                }
+                            }
+                            merged_timelines.push((index, timelines_with_types, has_context_before));
+                        }
+                    }
+                    if let Err(e) = sender.send(
+                        TimelineUpdate::SearchThroughTimelineFocus {
+                            timelines_to_be_merged: merged_timelines,
+                            count,
+                            highlights
+                        }) {
+                        error!("Failed to manage search result after processed in {room_id}; error: {e:?}");
+                        enqueue_popup_notification(format!("Failed to manage search result after processed. Error: {e}"));
+                    }
+                });
+                
+            }
         }
     }
 
@@ -1148,6 +1282,8 @@ pub type TimelineRequestSender = watch::Sender<Vec<BackwardsPaginateUntilEventRe
 struct RoomInfo {
     #[allow(unused)]
     room_id: OwnedRoomId,
+    /// A cheap clone of matrix ui room that can be used to build timeline.
+    room: room_list_service::Room,
     /// A reference to this room's timeline of events.
     timeline: Arc<Timeline>,
     /// An instance of the clone-able sender that can be used to send updates to this room's timeline.
@@ -1646,6 +1782,7 @@ async fn add_new_room(room: &room_list_service::Room, room_list_service: &RoomLi
         room.init_timeline_with_builder(builder).await?;
         room.timeline().ok_or_else(|| anyhow::anyhow!("BUG: room timeline not found for room {room_id}"))?
     };
+    
     let latest_event = timeline.latest_event().await;
     let (timeline_update_sender, timeline_update_receiver) = crossbeam_channel::unbounded();
 
@@ -1691,6 +1828,7 @@ async fn add_new_room(room: &room_list_service::Room, room_list_service: &RoomLi
         room_id.clone(),
         RoomInfo {
             room_id,
+            room: room.clone(),
             timeline,
             timeline_singleton_endpoints: Some((timeline_update_receiver, request_sender)),
             timeline_update_sender,
@@ -2544,3 +2682,25 @@ impl UserPowerLevels {
         self.contains(UserPowerLevels::RoomPinnedEvents)
     }
 }
+#[derive(Debug, Eq, PartialEq, Hash)]
+enum CoreTask {
+    Search,            
+}
+static CORE_TASKS: LazyLock<Mutex<HashMap<CoreTask, AbortHandle>>> = LazyLock::new(
+    || Mutex::new(HashMap::new())
+);
+
+fn register_core_task(
+    task_type: CoreTask, 
+    handle: AbortHandle,
+) {
+    if let Ok(mut tasks) = CORE_TASKS.lock() {
+        tasks.insert(task_type, handle);
+    }
+}
+
+async fn abort_core_task(core_task: CoreTask) {
+    if let Ok(mut tasks) = CORE_TASKS.lock() {
+        tasks.remove(&core_task);
+    }
+}
\ No newline at end of file