diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -15,9 +15,6 @@
   top: -7px;
   left: 30px;
 }
-.thread:first-child {
-  padding-top: 6px;
-}
 
 .activeThread,
 .threadListSidebar:hover {
@@ -265,6 +262,7 @@
   display: flex;
   flex-direction: column;
   overflow: auto;
+  flex: 1;
 }
 
 div.createNewThread {
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -1,7 +1,10 @@
 // @flow
 
 import invariant from 'invariant';
+import _sum from 'lodash/fp/sum.js';
 import * as React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList } from 'react-window';
 
 import { emptyItemText } from 'lib/shared/thread-utils.js';
 
@@ -14,6 +17,25 @@
 import { useSelector } from '../redux/redux-utils.js';
 import { useOnClickNewThread } from '../selectors/thread-selectors.js';
 
+const sizes = {
+  search: 68,
+  thread: 81,
+  sidebars: { sidebar: 32, seeMore: 22, spacer: 6 },
+};
+
+const getThreadItemSize = item => {
+  const sidebarHeight = _sum(item.sidebars.map(s => sizes.sidebars[s.type]));
+  return sizes.thread + sidebarHeight;
+};
+
+const renderItem = ({ index, data, style }) => {
+  return (
+    <div style={style}>
+      {index === 0 ? data[0] : <ChatThreadListItem item={data[index]} />}
+    </div>
+  );
+};
+
 function ChatThreadList(): React.Node {
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
@@ -33,31 +55,81 @@
 
   const communityID = useSelector(state => state.communityPickerStore.chat);
 
-  const threadComponents: React.Node[] = React.useMemo(() => {
-    const threads = threadList
-      .filter(
+  const search = React.useMemo(
+    () => (
+      <Search
+        onChangeText={setSearchText}
+        searchText={searchText}
+        placeholder="Search chats"
+      />
+    ),
+    [searchText, setSearchText],
+  );
+
+  const threadListContainerRef = React.useRef();
+
+  const threads = React.useMemo(
+    () =>
+      threadList.filter(
         item =>
           !communityID ||
           item.threadInfo.community === communityID ||
           item.threadInfo.id === communityID,
-      )
-      .map(item => <ChatThreadListItem item={item} key={item.threadInfo.id} />);
-    if (threads.length === 0 && isBackground) {
-      threads.push(<EmptyItem key="emptyItem" />);
+      ),
+    [communityID, threadList],
+  );
+
+  React.useEffect(() => {
+    if (threadListContainerRef.current) {
+      threadListContainerRef.current.resetAfterIndex(0, false);
+    }
+  }, [threads]);
+
+  const threadListContainer = React.useMemo(() => {
+    if (isBackground && threads.length === 0) {
+      return (
+        <>
+          {search}
+          <EmptyItem />
+        </>
+      );
     }
-    return threads;
-  }, [threadList, isBackground, communityID]);
+
+    const items = [search, ...threads];
+
+    const itemKey = index =>
+      index === 0 ? 'search' : items[index].threadInfo.id;
+
+    const itemSize = index => {
+      if (index === 0) {
+        return sizes.search;
+      }
+
+      return getThreadItemSize(items[index]);
+    };
+
+    return (
+      <AutoSizer disableWidth>
+        {({ height }) => (
+          <VariableSizeList
+            itemData={items}
+            itemCount={items.length}
+            itemSize={itemSize}
+            itemKey={itemKey}
+            height={height}
+            overscanCount={1}
+            ref={threadListContainerRef}
+          >
+            {renderItem}
+          </VariableSizeList>
+        )}
+      </AutoSizer>
+    );
+  }, [isBackground, search, threads]);
 
   return (
     <>
-      <div className={css.threadListContainer}>
-        <Search
-          onChangeText={setSearchText}
-          searchText={searchText}
-          placeholder="Search chats"
-        />
-        <div>{threadComponents}</div>
-      </div>
+      <div className={css.threadListContainer}>{threadListContainer}</div>
       <div className={css.createNewThread}>
         <Button
           variant="filled"
diff --git a/web/package.json b/web/package.json
--- a/web/package.json
+++ b/web/package.json
@@ -76,6 +76,8 @@
     "react-router-dom": "^5.2.0",
     "react-switch": "^7.0.0",
     "react-timeago": "^7.1.0",
+    "react-virtualized-auto-sizer": "^1.0.19",
+    "react-window": "^1.8.9",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.2",
     "redux-persist": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@@ -16438,7 +16438,7 @@
   dependencies:
     fs-monkey "^1.0.3"
 
-memoize-one@^5.0.0:
+"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -19807,6 +19807,19 @@
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized-auto-sizer@^1.0.19:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.19.tgz#1117147dbec3f23db94ded1f0ddd9f1fd0692aef"
+  integrity sha512-jAPNLjG1DBnLQUMZz1py/5z7/wC8Gn8G+WAXQplDdVr9zO/xdTWLtDM3aPHm8e2gLT2xQxMql507IMuLA6himw==
+
+react-window@^1.8.9:
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"
+  integrity sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"