diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 6965b16a9..a64178b78 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -19,8 +20,13 @@ interface IChatList {
 const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
   const dispatch = useDispatch();
 
+  const chatListRef = useRef(null);
+
   const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats();
 
+  const [isNearBottom, setNearBottom] = useState<boolean>(false);
+  const [isNearTop, setNearTop] = useState<boolean>(true);
+
   const isEmpty = chats?.length === 0;
 
   const handleLoadMore = () => {
@@ -48,23 +54,41 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
   };
 
   return (
-    <PullToRefresh onRefresh={handleRefresh}>
-      {isEmpty ? renderEmpty() : (
-        <Virtuoso
-          useWindowScroll={useWindowScroll}
-          data={chats}
-          endReached={handleLoadMore}
-          itemContent={(_index, chat) => (
-            <Chat chat={chat} onClick={onClickChat} />
-          )}
-          components={{
-            ScrollSeekPlaceholder: () => <PlaceholderChat />,
-            // Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
-            EmptyPlaceholder: renderEmpty,
-          }}
-        />
-      )}
-    </PullToRefresh>
+    <div className='relative h-full'>
+      <PullToRefresh onRefresh={handleRefresh}>
+        {isEmpty ? renderEmpty() : (
+          <Virtuoso
+            ref={chatListRef}
+            atTopStateChange={(atTop) => setNearTop(atTop)}
+            atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
+            useWindowScroll={useWindowScroll}
+            data={chats}
+            endReached={handleLoadMore}
+            itemContent={(_index, chat) => (
+              <Chat chat={chat} onClick={onClickChat} />
+            )}
+            components={{
+              ScrollSeekPlaceholder: () => <PlaceholderChat />,
+              // Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
+              EmptyPlaceholder: renderEmpty,
+            }}
+          />
+        )}
+      </PullToRefresh>
+
+      <div
+        className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+          'opacity-0': isNearTop,
+          'opacity-100': !isNearTop,
+        })}
+      />
+      <div
+        className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+          'opacity-0': isNearBottom,
+          'opacity-100': !isNearBottom,
+        })}
+      />
+    </div>
   );
 };