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,12 @@
+div.sidebarListContainer {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  line-height: var(--line-height-text);
+  width: 383px;
+  height: 458px;
+}
+
 div.sidebarList {
   overflow: auto;
   color: var(--sidebars-modal-color);
diff --git a/web/modals/threads/sidebars/sidebars-modal.react.js b/web/modals/threads/sidebars/sidebars-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/sidebars/sidebars-modal.react.js
@@ -0,0 +1,82 @@
+// @flow
+
+import * as React from 'react';
+
+import { useChildThreads } from 'lib/hooks/child-threads';
+import { threadInChatList } from 'lib/shared/thread-utils';
+import { threadTypes } from 'lib/types/thread-types';
+
+import Tabs from '../../../components/tabs.react';
+import SearchModal from '../../search-modal.react';
+import SidebarList from './sidebar-list.react';
+import css from './sidebars-modal.css';
+
+type SidebarTab = 'All Threads' | 'My Threads';
+
+type ContentProps = {
+  +searchText: string,
+  +threadID: string,
+  +defaultTab: SidebarTab,
+};
+
+function SidebarsModalContent(props: ContentProps): React.Node {
+  const { searchText, threadID, defaultTab } = props;
+  const [tab, setTab] = React.useState<SidebarTab>(defaultTab);
+
+  const isSidebarCallback = React.useCallback(
+    threadInfo => threadInfo.type === threadTypes.SIDEBAR,
+    [],
+  );
+
+  const sidebarList = useChildThreads(threadID, isSidebarCallback, searchText);
+
+  const sidebarsChatListVisibleInChat = sidebarList.filter(chatItem =>
+    threadInChatList(chatItem.threadInfo),
+  );
+
+  return (
+    <div className={css.sidebarListContainer}>
+      <Tabs.Container activeTab={tab} setTab={setTab}>
+        <Tabs.Item id="All Threads" header="All Threads">
+          <SidebarList sidebars={sidebarList} />
+        </Tabs.Item>
+        <Tabs.Item id="My Threads" header="My Threads">
+          <SidebarList sidebars={sidebarsChatListVisibleInChat} />
+        </Tabs.Item>
+      </Tabs.Container>
+    </div>
+  );
+}
+type Props = {
+  +threadID: string,
+  +onClose: () => void,
+  +defaultTab?: SidebarTab,
+};
+
+function SidebarsModal(props: Props): React.Node {
+  const { threadID, onClose, defaultTab = 'All Threads' } = props;
+
+  const sidebarsContent = React.useCallback(
+    (searchText: string) => (
+      <SidebarsModalContent
+        searchText={searchText}
+        defaultTab={defaultTab}
+        threadID={threadID}
+      />
+    ),
+    [defaultTab, threadID],
+  );
+
+  return (
+    <SearchModal
+      name="Threads"
+      searchPlaceholder="Search"
+      onClose={onClose}
+      size="fit-content"
+    >
+      {sidebarsContent}
+    </SearchModal>
+  );
+}
+
+export default SidebarsModal;