diff --git a/src/components/timelines/Conversations.tsx b/src/components/timelines/Conversations.tsx
index 84e002a8..4a5da0e0 100644
--- a/src/components/timelines/Conversations.tsx
+++ b/src/components/timelines/Conversations.tsx
@@ -138,13 +138,20 @@ const Conversations: React.FC<Props> = props => {
     return false
   }, [firstItemIndex, conversations, setConversations, unreadConversations])
 
+  const backToTop = () => {
+    scrollerRef.current.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <div style={{ width: columnWidth(props.timeline.column_width), minWidth: columnWidth(props.timeline.column_width), margin: '0 4px' }}>
       <Container style={{ height: 'calc(100% - 8px)' }}>
         <Header style={{ backgroundColor: 'var(--rs-bg-card)' }}>
           <FlexboxGrid align="middle" justify="space-between">
             <FlexboxGrid.Item style={{ width: 'calc(100% - 80px)' }}>
-              <FlexboxGrid align="middle">
+              <FlexboxGrid align="middle" onClick={backToTop} style={{ cursor: 'pointer' }}>
                 {/** icon **/}
                 <FlexboxGrid.Item
                   style={{
diff --git a/src/components/timelines/Notifications.tsx b/src/components/timelines/Notifications.tsx
index 77c06a61..38baf67f 100644
--- a/src/components/timelines/Notifications.tsx
+++ b/src/components/timelines/Notifications.tsx
@@ -227,6 +227,13 @@ const Notifications: React.FC<Props> = props => {
     return false
   }, [firstItemIndex, notifications, setNotifications, unreadNotifications])
 
+  const backToTop = () => {
+    scrollerRef.current.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <div
       style={{ width: columnWidth(props.timeline.column_width), minWidth: columnWidth(props.timeline.column_width), margin: '0 4px' }}
@@ -237,7 +244,7 @@ const Notifications: React.FC<Props> = props => {
         <Header style={{ backgroundColor: 'var(--rs-bg-card)' }}>
           <FlexboxGrid align="middle" justify="space-between">
             <FlexboxGrid.Item style={{ width: 'calc(100% - 108px)' }}>
-              <FlexboxGrid align="middle">
+              <FlexboxGrid align="middle" onClick={backToTop} style={{ cursor: 'pointer' }}>
                 {/** icon **/}
                 <FlexboxGrid.Item
                   style={{
diff --git a/src/components/timelines/Timeline.tsx b/src/components/timelines/Timeline.tsx
index 3446c972..9120b386 100644
--- a/src/components/timelines/Timeline.tsx
+++ b/src/components/timelines/Timeline.tsx
@@ -347,13 +347,20 @@ const Timeline: React.FC<Props> = props => {
     return false
   }, [firstItemIndex, statuses, setStatuses, unreadStatuses])
 
+  const backToTop = () => {
+    scrollerRef.current.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <div style={{ width: columnWidth(props.timeline.column_width), minWidth: columnWidth(props.timeline.column_width), margin: '0 4px' }}>
       <Container style={{ height: '100%' }}>
         <Header style={{ backgroundColor: 'var(--rs-bg-card)' }}>
           <FlexboxGrid align="middle" justify="space-between">
             <FlexboxGrid.Item style={{ width: 'calc(100% - 80px)' }}>
-              <FlexboxGrid align="middle">
+              <FlexboxGrid align="middle" onClick={backToTop} style={{ cursor: 'pointer' }}>
                 {/** icon **/}
                 <FlexboxGrid.Item
                   style={{