diff --git a/resources/icon_jump_to_top.svg b/resources/icon_jump_to_top.svg
new file mode 100644
index 00000000..c14e3a1a
--- /dev/null
+++ b/resources/icon_jump_to_top.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon_jump_to_bottom.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="3.1679688"
+     inkscape:cx="127.84217"
+     inkscape:cy="128"
+     inkscape:window-width="1920"
+     inkscape:window-height="1046"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m 129.4,105.7 c 1.7,0 3.4,0.7 4.7,2.1 l 72,72 c 2.8,2.8 2.8,7.3 0,10.1 -2.8,2.8 -7.3,2.8 -10.1,0 l -67.3,-67.3 -67.3,67.3 c -2.8,2.8 -7.3,2.8 -10.1,0 -2.8,-2.8 -2.8,-7.3 0,-10.1 l 72,-72 c 1.3,-1.4 3,-2.1 4.7,-2.1 z"
+     fill="#000000"
+     id="path1" />
+</svg>
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 360b528c..b1ee0688 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -50,6 +50,7 @@ live_design! {
     import crate::shared::avatar::Avatar;
     import crate::shared::text_or_image::TextOrImage;
     import crate::shared::html_or_plaintext::*;
+    import crate::shared::icon_button::*;
     import crate::profile::user_profile::UserProfileSlidingPane;
     import crate::shared::typing_animation::TypingAnimation;
     import crate::shared::icon_button::RobrixIconButton;
@@ -649,15 +650,16 @@ live_design! {
         jump_to_bottom_view = <View> {
             width: Fill,
             height: Fill,
-            flow: Down,
+            flow: Overlay,
             align: {x: 1.0, y: 1.0},
-            margin: {right: 15.0, bottom: 15.0},
+            margin: {right: 15.0, bottom: 0},
             visible: false,
-
-            jump_to_bottom_button = <IconButton> {
+            jump_button = <RobrixIconButton> {
                 width: 50, height: 50,
                 draw_icon: {svg_file: (ICO_JUMP_TO_BOTTOM)},
-                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
+                padding: 15,
+                margin: {bottom : 20}
+                icon_walk: {width: 20, height: 10, margin: {top: 0, right: 100} }
                 // draw a circular background for the button
                 draw_bg: {
                     instance background_color: #edededee,
@@ -668,6 +670,79 @@ live_design! {
                         sdf.fill_keep(self.background_color);
                         return sdf.result
                     }
+    
+                }
+                draw_icon: {
+                    instance color: #000
+                    instance color_hover: #000
+                    // 180.0: point upwards
+                    uniform rotation_angle: 180.0,
+                }
+                animator: {
+                    jump_button = {
+                        default: down
+                        down = {
+                            redraw: true,
+                            from: { all: Forward {duration: 2.0} }
+                            ease: ExpDecay {d1: 0.80, d2: 0.97}
+                            apply: { draw_icon: {rotation_angle: 0.0} }
+                        }
+                        up = {
+                            redraw: true,
+                            from: { all: Forward {duration: 0.5} }
+                            ease: ExpDecay {d1: 0.80, d2: 0.97}
+                            apply: { draw_icon: {rotation_angle: 180.0} }
+                        }
+                    }
+                }
+            }
+            // Badge overlay for unread messages
+            unread_notification_badge = <View> {
+                width: 12, height: 12,
+                abs_pos: vec2(-20.0, 15.0)
+                visible: true,
+                show_bg: true,
+                draw_bg: {
+                    instance background_color: (#58DC6C)
+        
+                    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.x, c.x);
+                        sdf.fill_keep(self.background_color);
+                        return sdf.result;
+                    }
+                }
+            }
+            // Badge overlay for unread messages
+            unread_message_badge = <View> {
+                width: 20, height: 20,
+                abs_pos: vec2(-15.0, 72.0)
+                visible: true,
+                show_bg: true,
+                draw_bg: {
+                    instance background_color: (#5D5E5E)
+        
+                    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.x, c.x);
+                        sdf.fill_keep(self.background_color);
+                        return sdf.result;
+                    }
+                }
+
+                // Text to display the unread message count
+                label = <Label> {
+                    width: Fill,
+                    height: Fill,
+                    text: "0",
+                    margin: {top: 4.0, left: 5.0},
+                    draw_text:{
+                        color: #ffffff,
+                        wrap: Ellipsis,
+                        text_style: <USERNAME_TEXT_STYLE>{ font_size: 8. }
+                    }
                 }
             }
         }
@@ -1275,14 +1350,16 @@ impl Widget for RoomScreen {
 
                 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(
+  
+                if let Some(ref mut but) = self.button(id!(jump_button)).borrow_mut() {
+                    if but.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);
+                        );
+                        jump_to_bottom_view.set_visible(false);
+                    }
                 }
             }
 
@@ -1454,6 +1531,7 @@ impl RoomScreen {
     /// Redraws this RoomScreen view if any updates were applied.
     fn process_timeline_updates(&mut self, cx: &mut Cx, portal_list: &PortalListRef) {
         let top_space = self.view(id!(top_space));
+        let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
         let curr_first_id = portal_list.first_id();
         let Some(tl) = self.tl_state.as_mut() else { return };
 
@@ -1539,6 +1617,26 @@ impl RoomScreen {
                     }
                     tl.items = new_items;
                     done_loading = true;
+                    // Set number of unread messages to unread_notification_badge
+                    if let Some(room_id) = &self.room_id {
+                        if let Some(num_unread)= get_client()
+                        .and_then(|c| c.get_room(room_id)).map(|room| room.num_unread_messages()) {
+                            println!("num_unread {:?}", num_unread);
+                            let unread_notifications_badge = jump_to_bottom_view.view(id!(unread_notifications_badge));
+                            let unread_message_badge = jump_to_bottom_view.view(id!(unread_message_badge));
+                            if num_unread > 0 {
+                                unread_message_badge.label(id!(label)).set_text(&format!("{}",num_unread));
+                                unread_message_badge.set_visible(true);
+                                unread_notifications_badge.set_visible(false);
+                                if let Some(ref mut but) = jump_to_bottom_view.button(id!(jump_button)).borrow_mut() {
+                                    but.animator_play(cx, id!(jump_button.down));
+                                }
+                            } else {
+                                unread_message_badge.set_visible(false);
+                            }
+                        }
+                    }
+                    
                 }
                 TimelineUpdate::PaginationRunning(direction) => {
                     if direction == PaginationDirection::Backwards {