diff --git a/resources/icon_reply.svg b/resources/icon_reply.svg
deleted file mode 100644
index d1f3c121..00000000
--- a/resources/icon_reply.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 19 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(-1,0,0,1,18.9721,0)">
-        <path d="M18.666,6.426C19.074,6.797 19.074,7.428 18.666,7.799L12.135,13.44C11.578,13.922 10.688,13.514 10.688,12.734L10.688,9.506C4.898,9.58 2.449,10.99 4.119,16.371C4.305,16.965 3.563,17.447 3.08,17.076C1.447,15.889 0,13.625 0,11.361C0,5.721 4.713,4.496 10.688,4.459L10.688,1.49C10.688,0.711 11.578,0.303 12.135,0.785L18.666,6.426Z" style="fill-rule:nonzero;"/>
-    </g>
-</svg>
diff --git a/resources/icons/reply.svg b/resources/icons/reply.svg
new file mode 100644
index 00000000..382b73af
--- /dev/null
+++ b/resources/icons/reply.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path d="M185.2,128.6V19.7L0,204.9l185.2,185.2V281.1c152.5,0,250.5,0,326.8,217.9C512,390.1,522.9,128.6,185.2,128.6z"/>
+</svg>
\ No newline at end of file
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 26883cc9..d52cf79d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -11,16 +11,18 @@ use matrix_sdk::{ruma::{
             guest_access::GuestAccess, history_visibility::HistoryVisibility, join_rules::JoinRule, message::{MessageFormat, MessageType, RoomMessageEventContent}, MediaSource
         },
         AnySyncMessageLikeEvent, AnySyncTimelineEvent, FullStateEventContent, SyncMessageLikeEvent,
-    }, matrix_uri::MatrixId, uint, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId
+    }, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId, UserId
 }, OwnedServerName};
 use matrix_sdk_ui::timeline::{
-    self, AnyOtherFullStateEventContent, EventTimelineItem, MemberProfileChange, MembershipChange, ReactionsByKeyBySender, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
+    self, AnyOtherFullStateEventContent, EventTimelineItem, MemberProfileChange, MembershipChange,
+    Profile, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange,
+    TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem,
 };
 
-use rangemap::RangeSet;
 use crate::{
     avatar_cache::{self, AvatarCacheEntry}, media_cache::{MediaCache, MediaCacheEntry}, profile::{user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt}, user_profile_cache}, shared::{avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, text_or_image::TextOrImageWidgetRefExt}, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
 };
+use rangemap::RangeSet;
 
 live_design! {
     import makepad_draw::shader::std::*;
@@ -38,24 +40,25 @@ live_design! {
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
     ICO_COMMENT = dep("crate://self/resources/icon_comment.svg")
-    ICO_REPLY = dep("crate://self/resources/icon_reply.svg")
+    ICO_REPLY = dep("crate://self/resources/icons/reply.svg")
     ICO_SEND = dep("crate://self/resources/icon_send.svg")
     ICO_LIKES = dep("crate://self/resources/icon_likes.svg")
     ICO_USER = dep("crate://self/resources/icon_user.svg")
     ICO_ADD = dep("crate://self/resources/icon_add.svg")
+    ICO_CLOSE = dep("crate://self/resources/icons/close.svg")
     ICO_JUMP_TO_BOTTOM = dep("crate://self/resources/icon_jump_to_bottom.svg")
 
     TEXT_SUB = {
         font_size: (10),
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
-    
+
     TEXT_P = {
         font_size: (12),
         height_factor: 1.65,
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
-    
+
     COLOR_BG = #xfff8ee
     COLOR_BRAND = #xf88
     COLOR_BRAND_HOVER = #xf66
@@ -65,12 +68,12 @@ live_design! {
     COLOR_OVERLAY_BG = #x000000d8
     COLOR_READ_MARKER = #xeb2733
     COLOR_PROFILE_CIRCLE = #xfff8ee
-    
+
     FillerY = <View> {width: Fill}
-    
+
     FillerX = <View> {height: Fill}
-    
-    
+
+
     IconButton = <Button> {
         draw_text: {
             instance hover: 0.0
@@ -123,16 +126,161 @@ live_design! {
         }
         text: " "
     }
-    
+
     REACTION_TEXT_COLOR = #4c00b0
 
-    MessageMenu = <View> {
+    // A preview of a message that is being replied to.
+    ReplyPreview = <View> {
+        visible: false
+        width: Fill
+        height: Fit
+        flow: Down
+        padding: {top: 0.0, right: 12.0, bottom: 0.0, left: 12.0}
+
+        // A subview that is only shown when a `ReplyPreview` is re-used
+        // at the bottom of the RoomScreen (above the message input box)
+        // to show which message a user is currently drafting a reply to.
+        reply_preview_header = <View> {
+            width: Fill
+            height: Fit
+            flow: Right
+            align: {y: 0.5}
+
+            <Label> {
+                draw_text: {
+                    text_style: <TEXT_SUB> {},
+                    color: (COLOR_META)
+                }
+                text: "Replying to:"
+            }
+
+            filler = <View> {width: Fill, height: Fill}
+
+            // TODO: Fix style
+            cancel_reply_button = <IconButton> {
+                width: Fit,
+                height: Fit,
+
+                draw_icon: {
+                    svg_file: (ICO_CLOSE),
+                    fn get_color(self) -> vec4 {
+                       return (COLOR_META)
+                    }
+                }
+                icon_walk: {width: 12, height: 12}
+            }
+        }
+
+        reply_preview_content = <View> {
+            width: Fill
+            height: Fit
+            flow: Down
+            padding: {left: 5.0, bottom: 5.0, top: 5.0}
+
+            show_bg: true
+            draw_bg: {
+                instance vertical_bar_color: (USERNAME_TEXT_COLOR)
+                instance vertical_bar_width: 2.0
+                instance radius: 0.0
+
+                fn get_color(self) -> vec4 {
+                    return self.color;
+                }
+
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+
+                    sdf.box(
+                        0.0,
+                        0.0,
+                        self.rect_size.x,
+                        self.rect_size.y,
+                        max(1.0, self.radius)
+                    );
+                    sdf.fill(self.get_color());
+
+                    sdf.rect(
+                        0.0,
+                        0.0,
+                        self.vertical_bar_width,
+                        self.rect_size.y
+                    );
+                    sdf.fill(self.vertical_bar_color);
+
+                    return sdf.result;
+                }
+            }
+
+            <View> {
+                width: Fill
+                height: Fit
+                flow: Right
+                margin: { bottom: 10.0, top: 0.0, right: 5.0 }
+                align: {y: 0.5}
+
+                reply_preview_avatar = <Avatar> {
+                    width: 19.,
+                    height: 19.,
+                    text_view = { text = { draw_text: {
+                        text_style: { font_size: 7.0 }
+                    }}}
+                }
+
+                reply_preview_username = <Label> {
+                    width: Fill,
+                    margin: { left: 5.0 }
+                    draw_text: {
+                        text_style: <USERNAME_TEXT_STYLE> { font_size: 10 },
+                        color: (USERNAME_TEXT_COLOR)
+                        wrap: Ellipsis,
+                    }
+                    text: "<Username not available>"
+                }
+            }
+
+            reply_preview_body = <HtmlOrPlaintext> {
+                html_view = {
+                    html = {
+                        font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE)
+                    }
+                }
+            }
+        }
+    }
+
+    // A view that shows action buttons for a message,
+    // with buttons for sending a reply (and in the future, reactions).
+    MessageMenu = <RoundedView> {
+        visible: true,
+        width: Fit,
+        height: Fit,
+        align: {x: 1, y: 0}
+
+        draw_bg: {
+            border_width: 0.0,
+            border_color: #000,
+            radius: 2
+        }
+
+        reply_button = <IconButton> {
+            visible: false
+            width: Fit,
+            height: Fit,
+
+            draw_icon: {
+                svg_file: (ICO_REPLY),
+            }
+            icon_walk: {width: 15, height: 15, margin: {top: 4.0}}
+        }
+    }
+
+    // An optional view used to show reactions beneath a message.
+    MessageAnnotations = <View> {
         visible: false,
         width: Fill,
         height: Fit,
 
-        // TODO: use a set of Buttons later, so a user can click to add their own reaction.
-        annotations = <RobrixHtml> {
+        html_content = <RobrixHtml> {
             width: Fill,
             height: Fit,
             padding: {top: 7.5, bottom: 5.0 },
@@ -145,31 +293,44 @@ live_design! {
             body: ""
         }
     }
-    
+
     // An empty view that takes up no space in the portal list.
     Empty = <View> { }
 
     // The view used for each text-based message event in a room's timeline.
-    Message = <View> {
+    Message = {{Message}} {
         width: Fill,
         height: Fit,
         margin: 0.0
         flow: Down,
         padding: 0.0,
         spacing: 0.0
-        
+
+        // Only shown when this Message was in reply to another message.
+        reply_preview = <ReplyPreview> {
+            flow: Right
+            cursor: Hand
+            margin: { bottom: 10 }
+            reply_preview_header = {
+                // TODO: use `visible: false,` instead of `width: 0`
+                width: 0
+            }
+            reply_preview_content = {
+                margin: { left: 10 }
+            }
+        }
+
         body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
             padding: 10.0,
-            spacing: 10.0
-            
+
             profile = <View> {
                 align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 65.0,
                 height: Fit,
-                margin: {top: 7.5}
+                margin: {top: 7.5, right: 10}
                 flow: Down,
                 avatar = <Avatar> {
                     width: 50.,
@@ -195,7 +356,7 @@ live_design! {
                 height: Fit
                 flow: Down,
                 padding: 0.0
-                
+
                 username = <Label> {
                     width: Fill,
                     margin: {bottom: 10.0, top: 10.0, right: 10.0,}
@@ -207,12 +368,20 @@ live_design! {
                     text: "<Username not available>"
                 }
                 message = <HtmlOrPlaintext> { }
-                
+
                 // <LineH> {
                 //     margin: {top: 13.0, bottom: 5.0}
                 // }
-                
-                message_menu = <MessageMenu> {}
+
+                message_annotations = <MessageAnnotations> {}
+            }
+
+            message_menu = <MessageMenu> {}
+            // leave space for reply button (simulate a min width).
+            // once the message menu is done with overlays this wont be necessary.
+            <View> {
+                width: 1,
+                height: 30
             }
         }
     }
@@ -234,9 +403,9 @@ live_design! {
                 width: Fill,
                 height: Fit,
                 flow: Down,
-                
+
                 message = <HtmlOrPlaintext> { }
-                message_menu = <MessageMenu> {}
+                message_annotations = <MessageAnnotations> {}
             }
         }
     }
@@ -250,7 +419,7 @@ live_design! {
                     width: Fill, height: 300,
                     image_view = { image = { fit: Horizontal } }
                 }
-                message_menu = <MessageMenu> {}
+                message_annotations = <MessageAnnotations> {}
             }
         }
     }
@@ -265,7 +434,7 @@ live_design! {
                     width: Fill, height: 300,
                     image_view = { image = { fit: Horizontal } }
                 }
-                message_menu = <MessageMenu> {}
+                message_annotations = <MessageAnnotations> {}
             }
         }
     }
@@ -280,14 +449,14 @@ live_design! {
         flow: Right,
         padding: { top: 1.0, bottom: 1.0 }
         spacing: 0.0
-        
+
         body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
             padding: { top: 2.0, bottom: 2.0 }
             spacing: 5.0
-            
+
             left_container = <View> {
                 align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 70.0,
@@ -308,7 +477,7 @@ live_design! {
                 height: 19.,
 
                 text_view = { text = { draw_text: {
-                    text_style: <TITLE_TEXT>{ font_size: 7. }
+                    text_style: <TITLE_TEXT>{ font_size: 7.0 }
                 }}}
             }
 
@@ -399,7 +568,7 @@ live_design! {
             height: Fill,
             width: Fill
             flow: Down
-    
+
             // Below, we must place all of the possible templates (views) that can be used in the portal list.
             TopSpace = <TopSpace> {}
             Message = <Message> {}
@@ -455,7 +624,7 @@ live_design! {
         <View> {
             width: Fill, height: Fill,
             flow: Overlay,
-            
+
             <KeyboardView> {
                 width: Fill, height: Fill,
                 flow: Down,
@@ -463,7 +632,17 @@ live_design! {
                 // First, display the timeline of all messages/events.
                 timeline = <Timeline> {}
 
-                // Below that, display a view that holds the message input bar.
+                // Below that, display the optional view that shows which message is being replied to.
+                replying_preview = <ReplyPreview> {
+                    flow: Down
+                    reply_preview_content = {
+                        draw_bg: {
+                            vertical_bar_width: 0.0
+                        }
+                    }
+                }
+
+                // Below that, display a view that holds the message input bar and send button.
                 <View> {
                     width: Fill, height: Fit
                     flow: Right, align: {y: 1.0}, padding: 10.
@@ -570,82 +749,82 @@ live_design! {
 /// A simple deref wrapper around the `RoomScreen` widget that enables us to handle its events.
 #[derive(Live, LiveHook, Widget)]
 struct RoomScreen {
-    #[deref] view: View,
-    #[rust] room_id: Option<OwnedRoomId>,
-    #[rust] room_name: String,
+    #[deref]
+    view: View,
+    #[rust]
+    room_id: Option<OwnedRoomId>,
+    #[rust]
+    room_name: String,
+    #[rust(None)]
+    replying_to: Option<RepliedToInfo>,
 }
+
 impl Widget for RoomScreen {
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         self.view.draw_walk(cx, scope, walk)
     }
 
     // Handle events and actions at the RoomScreen level.
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope){
-        // A UI Signal indicates that something was updated in the background,
-        // so we first check to see if it was a user profile update.
-        if let Event::Signal = event {
-            user_profile_cache::process_user_profile_updates(cx);
-            avatar_cache::process_avatar_updates(cx);
-        }
-
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let pane = self.user_profile_sliding_pane(id!(user_profile_sliding_pane));
         let timeline = self.timeline(id!(timeline));
 
         if let Event::Actions(actions) = event {
-            // Handle the send message button being clicked.
-            if self.button(id!(send_message_button)).clicked(&actions) {
-                let msg_input_widget = self.text_input(id!(message_input));
-                let entered_text = msg_input_widget.text();
-                msg_input_widget.set_text_and_redraw(cx, "");
-                if !entered_text.is_empty() {
-                    let room_id = self.room_id.clone().unwrap();
-                    log!("Sending message to room {}: {:?}", room_id, entered_text);
-                    let message = if let Some(html_text) = entered_text.strip_prefix("/html") {
-                        RoomMessageEventContent::text_html(html_text, html_text)
-                    } else if let Some(plain_text) = entered_text.strip_prefix("/plain") {
-                        RoomMessageEventContent::text_plain(plain_text)
-                    } else {
-                        RoomMessageEventContent::text_markdown(entered_text)
-                    };
-                    submit_async_request(MatrixRequest::SendMessage {
-                        room_id,
-                        message,
-                        // TODO: support replies to specific messages, attaching mentions, rich text (html), etc.
-                    });
-                }
-            }
+            for action in actions {
+                // Handle message reply action
+                if let TimelineAction::MessageReply(message_to_reply) =
+                    action.as_widget_action().cast()
+                {
+                    let replying_preview_view = self.view(id!(replying_preview));
 
-            // Handle the jump to bottom button: update its visibility, and handle clicks.
-            let mut portal_list = self.portal_list(id!(timeline.list));
-            let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
-            if portal_list.scrolled(&actions) {
-                // TODO: is_at_end() isn't perfect, see: <https://github.com/makepad/makepad/issues/517>
-                jump_to_bottom_view.set_visible(!portal_list.is_at_end());
-            }
+                    if let Some(message) = message_to_reply.content().as_message() {
+                        if let Some(room_id) = &self.room_id {
+                            let (replying_preview_username, _) = set_avatar_and_get_username(
+                                cx,
+                                replying_preview_view.avatar(id!(reply_preview_avatar)),
+                                room_id.as_ref(),
+                                message_to_reply.sender(),
+                                message_to_reply.sender_profile(),
+                                message_to_reply.event_id(),
+                            );
 
-            const SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS: usize = 30;
-            const SCROLL_TO_BOTTOM_SPEED: f64 = 90.0;
-            if self.button(id!(jump_to_bottom_button)).clicked(&actions) {
-                portal_list.smooth_scroll_to_end(
-                    cx,
-                    SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS,
-                    SCROLL_TO_BOTTOM_SPEED,
-                );
-                jump_to_bottom_view.set_visible(false);
-                self.redraw(cx);
-            }
+                            replying_preview_view
+                                .label(id!(reply_preview_username))
+                                .set_text(replying_preview_username.as_str());
+                        }
 
-            // Handle a typing action on the message input box.
-            if let Some(new_text) = self.text_input(id!(message_input)).changed(actions) {
-                submit_async_request(MatrixRequest::SendTypingNotice {
-                    room_id: self.room_id.clone().unwrap(),
-                    typing: !new_text.is_empty(),
-                });
-            }
+                        const MAX_REPLYING_PREVIEW_BODY_LENGTH: usize = 100;
+                        let body_of_reply_preview =
+                            if message.body().chars().count() > MAX_REPLYING_PREVIEW_BODY_LENGTH {
+                                let truncated: String = message
+                                    .body()
+                                    .chars()
+                                    .take(MAX_REPLYING_PREVIEW_BODY_LENGTH - 1)
+                                    .collect();
+                                &(truncated + "...")
+                            } else {
+                                message.body()
+                            };
+
+                        replying_preview_view
+                            .html_or_plaintext(id!(reply_preview_body))
+                            .show_html(body_of_reply_preview);
+                    }
+
+                    match message_to_reply.replied_to_info() {
+                        Ok(replied_to_info) => {
+                            self.set_replying_to(Some(replied_to_info));
+                        }
+                        Err(e) => error!("{e}"),
+                    }
+
+                    self.redraw(cx);
+                }
 
-            for action in actions {
                 // Handle the action that requests to show the user profile sliding pane.
-                if let ShowUserProfileAction::ShowUserProfile(profile_and_room_id) = action.as_widget_action().cast() {
+                if let ShowUserProfileAction::ShowUserProfile(profile_and_room_id) =
+                    action.as_widget_action().cast()
+                {
                     timeline.show_user_profile(
                         cx,
                         &pane,
@@ -736,6 +915,46 @@ impl Widget for RoomScreen {
                     }
                 }
             }
+
+            // Handle the reply cancelation button being clicked.
+            if self.button(id!(cancel_reply_button)).clicked(&actions) {
+                self.set_replying_to(None);
+                self.redraw(cx);
+            }
+
+            // Handle the send message button being clicked.
+            if self.button(id!(send_message_button)).clicked(&actions) {
+                let msg_input_widget = self.text_input(id!(message_input));
+                let entered_text = msg_input_widget.text();
+                msg_input_widget.set_text_and_redraw(cx, "");
+                if !entered_text.is_empty() {
+                    let room_id = self.room_id.clone().unwrap();
+                    log!("Sending message to room {}: {:?}", room_id, entered_text);
+                    let message = if let Some(html_text) = entered_text.strip_prefix("/html") {
+                        RoomMessageEventContent::text_html(html_text, html_text)
+                    } else if let Some(plain_text) = entered_text.strip_prefix("/plain") {
+                        RoomMessageEventContent::text_plain(plain_text)
+                    } else {
+                        RoomMessageEventContent::text_markdown(entered_text)
+                    };
+                    submit_async_request(MatrixRequest::SendMessage {
+                        room_id,
+                        message,
+                        replied_to: self.replying_to.clone(),
+                        // TODO: support attaching mentions, rich text (html), etc.
+                    });
+
+                    self.set_replying_to(None)
+                }
+            }
+
+            // Handle a typing action on the message input box.
+            if let Some(new_text) = self.text_input(id!(message_input)).changed(actions) {
+                submit_async_request(MatrixRequest::SendTypingNotice {
+                    room_id: self.room_id.clone().unwrap(),
+                    typing: !new_text.is_empty(),
+                });
+            }
         }
 
         // Only forward visibility-related events (touch/tap/scroll) to the inner timeline view
@@ -752,6 +971,17 @@ impl Widget for RoomScreen {
     }
 }
 
+impl RoomScreen {
+    fn set_replying_to(&mut self, replying_to: Option<RepliedToInfo>) {
+        self.view(id!(replying_preview))
+            .set_visible(replying_to.is_some());
+        self.replying_to = replying_to;
+    }
+    pub fn reset_state(&mut self) {
+        self.set_replying_to(None);
+    }
+}
+
 impl RoomScreenRef {
     /// Sets this `RoomScreen` widget to display the timeline for the given room.
     pub fn set_displayed_room(&self, room_name: String, room_id: OwnedRoomId) {
@@ -759,9 +989,15 @@ impl RoomScreenRef {
         room_screen.room_name = room_name;
         room_screen.room_id = Some(room_id.clone());
         room_screen.timeline(id!(timeline)).set_room(room_id);
+        room_screen.reset_state();
     }
 }
 
+#[derive(Clone, DefaultNone, Debug)]
+pub enum TimelineAction {
+    MessageReply(EventTimelineItem),
+    None,
+}
 
 /// A message that is sent from a background async task to a room's timeline view
 /// for the purpose of update the Timeline UI contents or metadata.
@@ -785,6 +1021,12 @@ pub enum TimelineUpdate {
     /// meaning that it has completed its recent pagination request(s) and is now waiting
     /// for more requests, but that the start of the timeline has not yet been reached.
     PaginationIdle,
+    /// A notice that event details have been fetched from the server,
+    /// including a `result` that indicates whether the request was successful.
+    EventDetailsFetched {
+        event_id: OwnedEventId,
+        result: Result<(), matrix_sdk_ui::timeline::Error>,
+    },
     /// A notice that the room's members have been fetched from the server,
     /// though the success or failure of the request is not yet known until the client
     /// requests the member info via a timeline event's `sender_profile()` method.
@@ -794,12 +1036,11 @@ pub enum TimelineUpdate {
     MediaFetched,
 }
 
-
 /// A Timeline widget displays the list of events (timeline "items") for a room.
 #[derive(Live, LiveHook, Widget)]
 pub struct Timeline {
     #[deref] view: View,
-    
+
     /// The room ID that this timeline is currently displaying.
     #[rust] room_id: Option<OwnedRoomId>,
     /// The UI-relevant states for the room that this widget is currently displaying.
@@ -836,7 +1077,7 @@ struct TimelineUiState {
     /// meaning that the range of already-drawn items doesn't need to be cleared.
     ///
     /// Upon a background update, only item indices greater than or equal to the
-    /// `index_of_first_change` are removed from this set. 
+    /// `index_of_first_change` are removed from this set.
     content_drawn_since_last_update: RangeSet<usize>,
 
     /// Same as `content_drawn_since_last_update`, but for the event **profiles** (avatar, username).
@@ -984,7 +1225,6 @@ impl Timeline {
         self.tl_state = Some(tl_state);
     }
 
-
     /// Invoke this when this timeline is being hidden or no longer being shown,
     /// e.g., when the user navigates away from this timeline.
     fn hide_timeline(&mut self) {
@@ -1060,6 +1300,8 @@ impl TimelineRef {
 
 impl Widget for Timeline {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+
         if let Event::Actions(actions) = event {
             for action in actions {
                 // Handle the timeline being hidden or shown.
@@ -1075,9 +1317,58 @@ impl Widget for Timeline {
                     }
                     StackNavigationTransitionAction::HideEnd
                     | StackNavigationTransitionAction::ShowDone
-                    | StackNavigationTransitionAction::None => { }
+                    | StackNavigationTransitionAction::None => {}
                 }
 
+                match action.as_widget_action().cast() {
+                    MessageAction::MessageReply(item_id) => {
+                        let Some(tl) = self.tl_state.as_mut() else {
+                            return;
+                        };
+                        let tl_idx = (item_id - 1) as usize;
+                        if let Some(tl_item) = tl.items.get(tl_idx) {
+                            if let Some(tl_event_item) = tl_item.as_event() {
+                                // TODO: this is ugly, but i couldnt find a clean way of making the Message
+                                // dispatch the action itself, it would need access to the timeline state or data
+                                cx.widget_action(
+                                    widget_uid,
+                                    &scope.path,
+                                    TimelineAction::MessageReply(tl_event_item.clone()),
+                                );
+                            }
+                        }
+                    }
+                    MessageAction::ReplyPreviewClicked(item_id) => {
+                        let portal_list = self.portal_list(id!(list));
+                        let Some(tl) = self.tl_state.as_mut() else {
+                            return;
+                        };
+                        let tl_idx = (item_id - 1) as usize;
+
+                        if let Some(tl_item) = tl.items.get(tl_idx) {
+                            if let Some(tl_event_item) = tl_item.as_event() {
+                                if let Some(message) = tl_event_item.content().as_message() {
+                                    if let Some(details) = message.in_reply_to() {
+                                        // Find the replyed message on timeline so we use the id for scrolling portal list
+                                        let message_replied_to_tl_index =
+                                            tl.items.iter().position(|i| {
+                                                i.as_event()
+                                                    .and_then(|e| e.event_id())
+                                                    .map_or(false, |event_id| {
+                                                        details.event_id == event_id
+                                                    })
+                                            });
+                                        if let Some(index) = message_replied_to_tl_index {
+                                            portal_list.set_first_id(index);
+                                            self.redraw(cx);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    MessageAction::None => {}
+                }
                 // Handle other actions here
                 // TODO: handle actions upon an item being clicked.
                 // for (item_id, item) in self.list.items_with_actions(&actions) {
@@ -1184,6 +1475,13 @@ impl Widget for Timeline {
                     TimelineUpdate::PaginationIdle => {
                         done_loading = true;
                     }
+                    TimelineUpdate::EventDetailsFetched { event_id: _event_id, result: _result } => {
+                        if let Err(_e) = _result {
+                            error!("Failed to fetch details fetched for event {_event_id} in room {}. Error: {_e:?}", tl.room_id);
+                        }
+                        // Here, to be most efficient, we could redraw only the updated event,
+                        // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
+                    }
                     TimelineUpdate::RoomMembersFetched => {
                         log!("Timeline::handle_event(): room members fetched for room {}", tl.room_id);
                         // Here, to be most efficient, we could redraw only the user avatars and names in the timeline,
@@ -1201,7 +1499,7 @@ impl Widget for Timeline {
                 log!("TODO: hide topspace loading animation for room {}", tl.room_id);
                 // TODO FIXME: hide TopSpace loading animation, set it to invisible.
             }
-            
+
             self.redraw(cx);
         }
 
@@ -1209,10 +1507,9 @@ impl Widget for Timeline {
         self.view.handle_event(cx, event, scope);
     }
 
-
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         let Some(tl_state) = self.tl_state.as_mut() else {
-            return DrawStep::done()
+            return DrawStep::done();
         };
         let room_id = &tl_state.room_id;
         let tl_items = &tl_state.items;
@@ -1227,7 +1524,7 @@ impl Widget for Timeline {
             let portal_list_ref = subview.as_portal_list();
             let Some(mut list_ref) = portal_list_ref.borrow_mut() else { continue };
             let list = list_ref.deref_mut();
-        
+
             list.set_item_range(cx, 0, last_item_id);
 
             let mut item_index_and_scroll_iter = tl_state.first_three_events.index_and_scroll.iter_mut();
@@ -1424,7 +1721,7 @@ fn populate_message_view(
                         .map_or(false, |d| d < uint!(600000)) // 10 mins in millis
             }
             _ => false,
-        }
+        },
         _ => false,
     };
 
@@ -1451,10 +1748,11 @@ fn populate_message_view(
                         Cow::Borrowed(plaintext)   => msg_body_field.show_plaintext(plaintext),
                     }
                 }
-                // Draw any reactions to the message.
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message, event_tl_item.event_id());
                 draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
-                // We're done drawing the message content, so mark it as fully drawn.
-                new_drawn_status.content_drawn = true;
+                // We're done drawing the message content, so mark it as fully drawn
+                // *if and only if* the reply preview was also fully drawn.
+                new_drawn_status.content_drawn = is_reply_fully_drawn;
                 (item, false)
             }
         }
@@ -1480,6 +1778,11 @@ fn populate_message_view(
                     (None, None, None)
                 };
                 let text_or_image_ref = item.text_or_image(id!(content.message));
+
+                // Draw the ReplyPreview and reactions, if any are present.
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message, event_tl_item.event_id());
+                draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
+
                 match &image.source {
                     MediaSource::Plain(mxc_uri) => {
                         // now that we've obtained the image URI and its metadata, try to fetch the image.
@@ -1494,25 +1797,28 @@ fn populate_message_view(
                                     error!("{err_str}");
                                     text_or_image_ref.set_text(&err_str);
                                 }
-                                // Draw any reactions to the message.
-                                draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
-                                // The image content is completely drawn here, ready to be marked as cached/drawn.
-                                new_drawn_status.content_drawn = true;
+
+                                // We're done drawing the image message content, so mark it as fully drawn
+                                // *if and only if* the reply preview was also fully drawn.
+                                new_drawn_status.content_drawn = is_reply_fully_drawn;
                             }
                             MediaCacheEntry::Requested => {
                                 text_or_image_ref.set_text(&format!("Fetching image from {:?}", mxc_uri));
+                                // Do not consider this image as being fully drawn, as we're still fetching it.
                             }
                             MediaCacheEntry::Failed => {
                                 text_or_image_ref.set_text(&format!("Failed to fetch image from {:?}", mxc_uri));
                                 // For now, we consider this as being "complete". In the future, we could support
                                 // retrying to fetch the image on a user click/tap.
-                                new_drawn_status.content_drawn = true;
+                                new_drawn_status.content_drawn = is_reply_fully_drawn;
                             }
                         }
                     }
                     MediaSource::Encrypted(encrypted) => {
                         text_or_image_ref.set_text(&format!("[TODO] fetch encrypted image at {:?}", encrypted.url));
-                        new_drawn_status.content_drawn = true; // considered complete, since we don't yet support this.
+                        // We consider this as "fully drawn" since we don't yet support encryption,
+                        // but *only if* the reply preview was also fully drawn.
+                        new_drawn_status.content_drawn = is_reply_fully_drawn;
                     }
                 };
                 (item, false)
@@ -1525,7 +1831,10 @@ fn populate_message_view(
             } else {
                 let kind = other.msgtype();
                 item.label(id!(content.message)).set_text(&format!("[TODO {kind:?}] {}", other.body()));
-                new_drawn_status.content_drawn = true;
+                // Draw the ReplyPreview and reactions, if any are present.
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message, event_tl_item.event_id());
+                draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
+                new_drawn_status.content_drawn = is_reply_fully_drawn;
                 (item, false)
             }
         }
@@ -1542,12 +1851,19 @@ fn populate_message_view(
             cx,
             item.avatar(id!(profile.avatar)),
             room_id,
-            event_tl_item,
+            event_tl_item.sender(),
+            event_tl_item.sender_profile(),
+            event_tl_item.event_id(),
         );
         item.label(id!(content.username)).set_text(&username);
         new_drawn_status.profile_drawn = profile_drawn;
     }
 
+    // TODO: This feels weird to do here, but the message widget needs to keep the
+    // id for sending events. and whether it can be replied to or not. Maybe handle this better.
+    item.as_message()
+        .set_data(event_tl_item.can_be_replied_to(), item_id);
+
     // If we've previously drawn the item content, skip redrawing the timestamp and annotations.
     if used_cached_item && item_drawn_status.content_drawn && item_drawn_status.profile_drawn {
         return (item, new_drawn_status);
@@ -1556,39 +1872,141 @@ fn populate_message_view(
     // Set the timestamp.
     if let Some(dt) = unix_time_millis_to_datetime(&ts_millis) {
         // format as AM/PM 12-hour time
-        item.label(id!(profile.timestamp)).set_text(
-            &format!("{}", dt.time().format("%l:%M %P"))
-        );
-        item.label(id!(profile.datestamp)).set_text(
-            &format!("{}", dt.date_naive())
-        );
+        item.label(id!(profile.timestamp))
+            .set_text(&format!("{}", dt.time().format("%l:%M %P")));
+        item.label(id!(profile.datestamp))
+            .set_text(&format!("{}", dt.date_naive()));
     } else {
-        item.label(id!(profile.timestamp)).set_text(
-            &format!("{}", ts_millis.get())
-        );
+        item.label(id!(profile.timestamp))
+            .set_text(&format!("{}", ts_millis.get()));
     }
 
     (item, new_drawn_status)
-} 
+}
+
+
+/// Draws a ReplyPreview above the given `message` if it was in-reply to another message.
+///
+/// If the given `message` was *not* in-reply to another message,
+/// this function will mark the ReplyPreview as non-visible and consider it fully drawn.
+///
+/// Returns whether the in-reply-to information was available and fully drawn,
+/// i.e., whether it can be considered as cached and not needing to be redrawn later.
+fn draw_replied_to_message(
+    cx: &mut Cx2d,
+    item: &WidgetRef,
+    room_id: &RoomId,
+    message: &timeline::Message,
+    message_event_id: Option<&EventId>,
+) -> bool {
+    let fully_drawn: bool;
+    let show_reply_preview: bool;
+    let reply_preview_view = item.view(id!(reply_preview));
+
+    if let Some(in_reply_to_details) = message.in_reply_to() {
+        show_reply_preview = true;
+        match &in_reply_to_details.event {
+            TimelineDetails::Ready(replied_to_event) => {
+                let in_reply_to_body: Cow<str> = match replied_to_event.as_ref().content() {
+                    // TODO: use existing message display logic for this reply preview
+                    TimelineItemContent::Message(m) => m.body().into(),
+                    TimelineItemContent::RedactedMessage => "[Message Redacted]".into(),
+                    TimelineItemContent::Sticker(sticker) => sticker.content().body.clone().into(),
+                    _other => format!("TODO: support reply previews for {:?}", _other).into(),
+                };
+
+                let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
+                    cx,
+                    reply_preview_view.avatar(id!(reply_preview_avatar)),
+                    room_id,
+                    replied_to_event.sender(),
+                    replied_to_event.sender_profile(),
+                    Some(in_reply_to_details.event_id.as_ref()),
+                );
+
+                fully_drawn = is_avatar_fully_drawn;
+
+                reply_preview_view
+                    .label(id!(reply_preview_username))
+                    .set_text(in_reply_to_username.as_str());
+                reply_preview_view
+                    .html_or_plaintext(id!(reply_preview_body))
+                    .show_plaintext(in_reply_to_body);
+            }
+            TimelineDetails::Error(_e) => {
+                fully_drawn = true;
+                reply_preview_view
+                    .label(id!(reply_preview_username))
+                    .set_text("[Error fetching username]");
+                reply_preview_view
+                    .avatar(id!(reply_preview_avatar))
+                    .show_text(None, "?");
+                reply_preview_view
+                    .html_or_plaintext(id!(reply_preview_body))
+                    .show_plaintext("[Error fetching replied-to event]");
+            }
+            status @ TimelineDetails::Pending | status @ TimelineDetails::Unavailable => {
+                // We don't have the replied-to message yet, so we can't fully draw the preview.
+                fully_drawn = false;
+                reply_preview_view
+                    .label(id!(reply_preview_username))
+                    .set_text("[Loading username...]");
+                reply_preview_view
+                    .avatar(id!(reply_preview_avatar))
+                    .show_text(None, "?");
+                reply_preview_view
+                    .html_or_plaintext(id!(reply_preview_body))
+                    .show_plaintext("[Loading replied-to message...]");
+
+                // Confusingly, we need to fetch the details of the `message` (the event that is the reply),
+                // not the details of the original event that this `message` is replying to.
+                if matches!(status, TimelineDetails::Unavailable) {
+                    if let Some(event_id) = message_event_id {
+                        submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                            room_id: room_id.to_owned(),
+                            event_id: event_id.to_owned(),
+                        });
+                    }
+                }
+            }
+        }
+    } else {
+        // This message was not in reply to another message, so we don't need to show a reply preview.
+        show_reply_preview = false;
+        fully_drawn = true;
+    }
 
+    reply_preview_view.set_visible(show_reply_preview);
+    fully_drawn
+}
 
 
-fn draw_reactions(_cx: &mut Cx2d, message_item: &WidgetRef, reactions: &ReactionsByKeyBySender, id: usize) {
+/// Draws the reactions beneath the given `message_item`.
+fn draw_reactions(
+    _cx: &mut Cx2d,
+    message_item: &WidgetRef,
+    reactions: &ReactionsByKeyBySender,
+    id: usize,
+) {
     const DRAW_ITEM_ID_REACTION: bool = false;
     if reactions.is_empty() && !DRAW_ITEM_ID_REACTION {
         return;
     }
-    // The message menu is invisible by default, so we must set it to visible
+
+    // The message annotaions view is invisible by default, so we must set it to visible
     // now that we know there are reactions to show.
-    message_item.view(id!(content.message_menu)).set_visible(true);
+    message_item
+        .view(id!(content.message_annotations))
+        .set_visible(true);
+
     let mut label_text = String::new();
     for (reaction_raw, reaction_senders) in reactions.iter() {
         // Just take the first char of the emoji, which ignores any variant selectors.
         let reaction_first_char = reaction_raw.chars().next().map(|c| c.to_string());
         let reaction_str = reaction_first_char.as_deref().unwrap_or(reaction_raw);
-        let text_to_display = emojis::get(&reaction_str)
+        let text_to_display = emojis::get(reaction_str)
             .and_then(|e| e.shortcode())
-            .unwrap_or(&reaction_raw);
+            .unwrap_or(reaction_raw);
         let count = reaction_senders.len();
         // log!("Found reaction {:?} with count {}", text_to_display, count);
         label_text = format!("{label_text}<i>:{}:</i> <b>{}</b> ", text_to_display, count);
@@ -1599,12 +2017,11 @@ fn draw_reactions(_cx: &mut Cx2d, message_item: &WidgetRef, reactions: &Reaction
         label_text = format!("{label_text}<i>ID: {}</i>", id);
     }
 
-    let html_reaction_view = message_item.html(id!(annotations));
+    let html_reaction_view = message_item.html(id!(message_annotations.html_content));
     html_reaction_view.set_text(&label_text);
 }
 
 
-
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
 trait SmallStateEventContent {
@@ -1902,7 +2319,7 @@ fn populate_small_state_event(
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent)).unwrap();
-    
+
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -1917,17 +2334,23 @@ fn populate_small_state_event(
     let username_opt = skip_redrawing_profile
         .then(|| get_profile_display_name(event_tl_item))
         .flatten();
-    
+
     let username = username_opt.unwrap_or_else(|| {
         // As a fallback, call `set_avatar_and_get_username` to get the user's display name.
         let (username, profile_drawn) = set_avatar_and_get_username(
             cx,
             item.avatar(id!(avatar)),
             room_id,
-            event_tl_item,
+            event_tl_item.sender(),
+            event_tl_item.sender_profile(),
+            event_tl_item.event_id(),
         );
         // Draw the timestamp as part of the profile.
-        set_timestamp(&item, id!(left_container.timestamp), event_tl_item.timestamp());
+        set_timestamp(
+            &item,
+            id!(left_container.timestamp),
+            event_tl_item.timestamp(),
+        );
         new_drawn_status.profile_drawn = profile_drawn;
         username
     });
@@ -1966,8 +2389,11 @@ fn set_timestamp(
 }
 
 
-/// Sets the given avatar and returns a displayable username based on the given timeline event.
+/// Sets the given avatar and returns a displayable username based on the
+/// given profile and user ID of the sender of the event with the given event ID.
 ///
+/// If the sender profile is not ready, this function will submit an async request
+/// to fetch the sender profile from the server, but only if the event ID is `Some`.
 /// This function will always choose a nice, displayable username and avatar.
 ///
 /// The specific behavior is as follows:
@@ -1991,19 +2417,27 @@ fn set_avatar_and_get_username(
     cx: &mut Cx,
     avatar: AvatarRef,
     room_id: &RoomId,
-    event_tl_item: &EventTimelineItem,
+    sender_user_id: &UserId, 
+    sender_profile: &TimelineDetails<Profile>,
+    event_id: Option<&EventId>,
 ) -> (String, bool) {
-    let user_id = event_tl_item.sender();
-
     // Get the display name and avatar URL from the sender's profile, if available,
     // or if the profile isn't ready, fall back to qeurying our user profile cache.
-    let (username_opt, avatar_state) = match event_tl_item.sender_profile() {
+    let (username_opt, avatar_state) = match sender_profile {
         TimelineDetails::Ready(profile) => {
             (profile.display_name.clone(), AvatarState::Known(profile.avatar_url.clone()))
         }
         _not_ready => {
+            if matches!(_not_ready, TimelineDetails::Unavailable) {
+                if let Some(event_id) = event_id {
+                    submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                        room_id: room_id.to_owned(),
+                        event_id: event_id.to_owned(),
+                    });
+                }
+            }
             // log!("populate_message_view(): sender profile not ready yet for event {_not_ready:?}");
-            user_profile_cache::with_user_profile(cx, user_id, |profile, room_members| {
+            user_profile_cache::with_user_profile(cx, sender_user_id, |profile, room_members| {
                 room_members.get(room_id)
                     .map(|rm| (
                         rm.display_name().map(|n| n.to_owned()),
@@ -2030,15 +2464,15 @@ fn set_avatar_and_get_username(
     };
 
     // Set sender to the display name if available, otherwise the user id.
-    let username = username_opt.clone().unwrap_or_else(|| user_id.to_string());
+    let username = username_opt.clone().unwrap_or_else(|| sender_user_id.to_string());
 
     // Set the sender's avatar image, or use the username if no image is available.
     avatar_img_data_opt.and_then(|data| avatar.show_image(
-        Some((user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone())),
+        Some((sender_user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone())),
         |img| utils::load_png_or_jpg(&img, cx, &data)
     ).ok())
     .unwrap_or_else(|| avatar.show_text(
-        Some((user_id.to_owned(), username_opt, room_id.to_owned())),
+        Some((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
         &username,
     ));
 
@@ -2053,3 +2487,105 @@ fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String>
         None
     }
 }
+
+#[derive(Clone, DefaultNone, Debug)]
+pub enum MessageAction {
+    MessageReply(usize),
+    ReplyPreviewClicked(usize),
+    None,
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct Message {
+    #[deref]
+    view: View,
+    #[rust(false)]
+    hovered: bool,
+    #[rust]
+    can_be_replied_to: bool,
+    #[rust]
+    item_id: usize,
+}
+
+impl Widget for Message {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+
+        if let Event::Actions(actions) = event {
+            if self.view.button(id!(reply_button)).clicked(actions) {
+                cx.widget_action(
+                    widget_uid,
+                    &scope.path,
+                    MessageAction::MessageReply(self.item_id),
+                );
+            }
+        }
+
+        if let Hit::FingerUp(fe) = event.hits(cx, self.view(id!(reply_preview)).area()) {
+            if fe.was_tap() {
+                cx.widget_action(
+                    widget_uid,
+                    &scope.path,
+                    MessageAction::ReplyPreviewClicked(self.item_id),
+                );
+            }
+        }
+
+        if let Event::MouseMove(e) = event {
+            let hovered = self.view.area().rect(cx).contains(e.abs);
+            if self.hovered != hovered {
+                self.hovered = hovered;
+
+                // TODO: Once we have a context menu, the messageMenu can be displayed on hover or push only
+                // self.view.view(id!(message_menu)).set_visible(hovered);
+
+                self.redraw(cx);
+            }
+        }
+
+        self.view.handle_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        // TODO: need vecs for apply_over(), maybe use an animator so we just set the state here
+        // and the animator handles the color changes from inside the dsl.
+        let default_color = vec3(1.0, 1.0, 1.0); // #ffffff
+        let hover_color = vec3(0.95, 0.95, 0.95); // #f3f3f3  (very light gray)
+
+        let bg_color = if self.hovered {
+            hover_color
+        } else {
+            default_color
+        };
+
+        self.view.apply_over(
+            cx,
+            live! {
+                show_bg: true,
+                draw_bg: {color: (bg_color)}
+            },
+        );
+
+        self.view
+            .button(id!(reply_button))
+            .set_visible(self.can_be_replied_to);
+
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl Message {
+    fn set_data(&mut self, can_be_replied_to: bool, item_id: usize) {
+        self.can_be_replied_to = can_be_replied_to;
+        self.item_id = item_id;
+    }
+}
+
+impl MessageRef {
+    fn set_data(&mut self, can_be_replied_to: bool, item_id: usize) {
+        let Some(mut inner) = self.borrow_mut() else {
+            return;
+        };
+        inner.set_data(can_be_replied_to, item_id);
+    }
+}
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 2a69c928..ed50a005 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -39,6 +39,8 @@ live_design! {
         line_spacing: (MESSAGE_TEXT_LINE_SPACING),
     }
 
+    MESSAGE_REPLY_PREVIEW_FONT_SIZE = 9.5
+
     SMALL_STATE_FONT_SIZE = 9.5
     SMALL_STATE_TEXT_COLOR = #x999
     SMALL_STATE_TEXT_STYLE = {
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 6a80aa38..8c0f7712 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -6,10 +6,10 @@ use imbl::Vector;
 use makepad_widgets::{error, log, SignalToUI};
 use matrix_sdk::{
     config::RequestConfig, media::MediaRequest, room::RoomMember, ruma::{
-        api::client::session::get_login_types::v3::LoginType, assign, events::{room::{message::RoomMessageEventContent, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
+        api::client::session::get_login_types::v3::LoginType, assign, events::{room::{message::{ForwardThread, RoomMessageEventContent}, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
     }, sliding_sync::http::request::{AccountData, ListFilters, ToDevice, E2EE}, Client, Room, SlidingSyncList, SlidingSyncMode
 };
-use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, TimelineItem, TimelineItemContent}, Timeline};
+use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, RepliedToInfo, TimelineItem, TimelineItemContent}, Timeline};
 use tokio::{
     runtime::Handle,
     sync::mpsc::{UnboundedSender, UnboundedReceiver}, task::JoinHandle,
@@ -122,6 +122,11 @@ pub enum MatrixRequest {
         ///    which works if the timeline is in either live mode and focused mode.
         forwards: bool,
     },
+    /// Request to fetch the full details of the given event in the given room's timeline.
+    FetchDetailsForEvent {
+        room_id: OwnedRoomId,
+        event_id: OwnedEventId,
+    },
     /// Request to fetch profile information for all members of a room.
     /// This can be *very* slow depending on the number of members in the room.
     FetchRoomMembers {
@@ -172,6 +177,7 @@ pub enum MatrixRequest {
     SendMessage {
         room_id: OwnedRoomId,
         message: RoomMessageEventContent,
+        replied_to: Option<RepliedToInfo>,
     },
     /// Sends a notice to the given room that the current user is or is not typing.
     ///
@@ -269,6 +275,35 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 });
             }
 
+            MatrixRequest::FetchDetailsForEvent { room_id, event_id } => {
+                let (timeline, sender) = {
+                    let mut all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                    let Some(room_info) = all_room_info.get_mut(&room_id) else {
+                        log!("BUG: room info not found for fetch details for event request {room_id}");
+                        continue;
+                    };
+
+                    (room_info.timeline.clone(), room_info.timeline_update_sender.clone())
+                };
+
+                // Spawn a new async task that will make the actual fetch request.
+                let _fetch_task = Handle::current().spawn(async move {
+                    // log!("Sending request to fetch details for event {event_id} in room {room_id}...");
+                    let result = timeline.fetch_details_for_event(&event_id).await;
+                    match result {
+                        Ok(_) => {
+                            // log!("Successfully fetched details for event {event_id} in room {room_id}.");
+                        }
+                        Err(ref e) => error!("Error fetching details for event {event_id} in room {room_id}: {e:?}"),
+                    }
+                    sender.send(TimelineUpdate::EventDetailsFetched {
+                        event_id,
+                        result,
+                    }).unwrap();
+                    SignalToUI::set_ui_signal();
+                });
+            }
+
             MatrixRequest::FetchRoomMembers { room_id } => {
                 let (timeline, sender) = {
                     let mut all_room_info = ALL_ROOM_INFO.lock().unwrap();
@@ -425,13 +460,13 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
             MatrixRequest::FetchAvatar { mxc_uri, on_fetched } => {
                 let Some(client) = CLIENT.get() else { continue };
                 let _fetch_task = Handle::current().spawn(async move {
-                    log!("Sending fetch avatar request for {mxc_uri:?}...");
+                    // log!("Sending fetch avatar request for {mxc_uri:?}...");
                     let media_request = MediaRequest {
                         source: MediaSource::Plain(mxc_uri.clone()),
                         format: MEDIA_THUMBNAIL_FORMAT.into(),
                     };
                     let res = client.media().get_media_content(&media_request, true).await;
-                    log!("Fetched avatar for {mxc_uri:?}, succeeded? {}", res.is_ok());
+                    // log!("Fetched avatar for {mxc_uri:?}, succeeded? {}", res.is_ok());
                     on_fetched(AvatarUpdate { mxc_uri, avatar_data: res.map(|v| v.into()) });
                 });
             }
@@ -447,7 +482,7 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 });
             }
 
-            MatrixRequest::SendMessage { room_id, message } => {
+            MatrixRequest::SendMessage { room_id, message, replied_to } => {
                 let timeline = {
                     let all_room_info = ALL_ROOM_INFO.lock().unwrap();
                     let Some(room_info) = all_room_info.get(&room_id) else {
@@ -460,9 +495,16 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 // Spawn a new async task that will send the actual message.
                 let _send_message_task = Handle::current().spawn(async move {
                     log!("Sending message to room {room_id}: {message:?}...");
-                    match timeline.send(message.into()).await {
-                        Ok(_send_handle) => log!("Sent message to room {room_id}."),
-                        Err(_e) => error!("Failed to send message to room {room_id}: {_e:?}"),
+                    if let Some(replied_to_info) = replied_to {
+                        match timeline.send_reply(message.into(), replied_to_info, ForwardThread::Yes).await {
+                            Ok(_send_handle) => log!("Sent reply message to room {room_id}."),
+                            Err(_e) => error!("Failed to send reply message to room {room_id}: {_e:?}"),
+                        }
+                    } else {
+                        match timeline.send(message.into()).await {
+                            Ok(_send_handle) => log!("Sent message to room {room_id}."),
+                            Err(_e) => error!("Failed to send message to room {room_id}: {_e:?}"),
+                        }
                     }
                     SignalToUI::set_ui_signal();
                 });