diff --git a/web/modals/threads/sidebars/sidebar-list.react.js b/web/modals/threads/sidebars/sidebar-list.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/sidebars/sidebar-list.react.js
@@ -0,0 +1,39 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
+
+import Sidebar from './sidebar.react';
+import css from './sidebars-modal.css';
+
+type Props = {
+  +sidebars: $ReadOnlyArray<ChatThreadItem>,
+};
+
+function SidebarList(props: Props): React.Node {
+  const { sidebars } = props;
+
+  const sidebarItems = React.useMemo(
+    () =>
+      sidebars.map((sidebarChatItem, idx, sidebarArray) => (
+        <Sidebar
+          sidebar={sidebarChatItem}
+          key={sidebarChatItem.threadInfo.id}
+          isLastItem={idx === sidebarArray.length - 1}
+        />
+      )),
+    [sidebars],
+  );
+
+  if (!sidebars.length) {
+    return (
+      <div className={css.noSidebars}>
+        No matching threads were found in the chat!
+      </div>
+    );
+  }
+  return <div className={css.sidebarList}>{sidebarItems}</div>;
+}
+
+export default SidebarList;
diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
--- a/web/modals/threads/sidebars/sidebars-modal.css
+++ b/web/modals/threads/sidebars/sidebars-modal.css
@@ -1,3 +1,14 @@
+div.sidebarList {
+  overflow: auto;
+  color: var(--sidebars-modal-color);
+}
+
+div.noSidebars {
+  padding: 16px;
+  text-align: center;
+  color: var(--sidebars-modal-color);
+}
+
 div.sidebarContainer {
   cursor: pointer;
   display: flex;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -169,5 +169,6 @@
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
+  --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
 }