diff --git a/lib/hooks/search-sidebars.js b/lib/hooks/search-sidebars.js
--- a/lib/hooks/search-sidebars.js
+++ b/lib/hooks/search-sidebars.js
@@ -12,14 +12,13 @@
 function useSearchSidebars(
   threadInfo: ThreadInfo,
   text: string,
-  setTextSearchText: SetState<string>,
+  setSearchText?: SetState<string>,
 ): {
   listData: $ReadOnlyArray<SidebarInfo>,
   setSearchState: SetState<$ReadOnlySet<string>>,
   onChangeSearchText: (
     text: SyntheticEvent<HTMLInputElement> | string,
   ) => mixed,
-  clearQuery: (event: SyntheticEvent<HTMLAnchorElement>) => void,
 } {
   const [searchState, setSearchState] = React.useState(new Set<string>());
 
@@ -63,32 +62,23 @@
       }
 
       setSearchState(new Set(searchIndex.getSearchResults(onChangeText)));
-      setTextSearchText(onChangeText);
+      setSearchText?.(onChangeText);
     },
-    [searchIndex, setSearchState, setTextSearchText],
-  );
-
-  const clearQuery = React.useCallback(
-    (event: SyntheticEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      setSearchState(new Set());
-      setTextSearchText('');
-    },
-    [setSearchState, setTextSearchText],
+    [searchIndex, setSearchState, setSearchText],
   );
 
   React.useEffect(() => {
     setSearchState(new Set(searchIndex.getSearchResults(text)));
-  }, [searchIndex, setSearchState, text]);
+    setSearchText?.(text);
+  }, [searchIndex, setSearchState, setSearchText, text]);
 
   return React.useMemo(
     () => ({
       listData,
       setSearchState,
       onChangeSearchText,
-      clearQuery,
     }),
-    [listData, setSearchState, onChangeSearchText, clearQuery],
+    [listData, setSearchState, onChangeSearchText],
   );
 }
 
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -1,7 +1,5 @@
 // @flow
 
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
@@ -10,78 +8,62 @@
 
 import chatThreadListCSS from '../../chat/chat-thread-list.css';
 import SidebarItem from '../../chat/sidebar-item.react';
-import globalCSS from '../../style.css';
-import { MagnifyingGlass } from '../../vectors.react';
-import Input from '../input.react';
 import { useModalContext } from '../modal-provider.react';
-import Modal from '../modal.react';
+import SearchModal from '../search-modal.react';
 
 type Props = {
   +threadInfo: ThreadInfo,
 };
 
+type SidebarModalContentProps = {
+  +threadInfo: ThreadInfo,
+  +onClose: () => void,
+  +searchText: string,
+};
+
+function SidebarModalContent(props: SidebarModalContentProps): React.Node {
+  const { threadInfo, searchText } = props;
+  const { popModal } = useModalContext();
+  const { listData } = useSearchSidebars(threadInfo, searchText);
+
+  return listData.map(item => (
+    <div
+      className={classNames(
+        chatThreadListCSS.thread,
+        chatThreadListCSS.sidebar,
+      )}
+      key={item.threadInfo.id}
+      onClick={popModal}
+    >
+      <SidebarItem sidebarInfo={item} />
+    </div>
+  ));
+}
+
 function SidebarListModal(props: Props): React.Node {
-  const { threadInfo } = props;
-  const [searchText, setSearchText] = React.useState('');
-  const { listData, onChangeSearchText, clearQuery } = useSearchSidebars(
-    threadInfo,
-    searchText,
-    setSearchText,
-  );
   const { popModal } = useModalContext();
+  const { threadInfo } = props;
 
-  const sidebars = React.useMemo(
-    () =>
-      listData.map(item => (
-        <div
-          className={classNames(
-            chatThreadListCSS.thread,
-            chatThreadListCSS.sidebar,
-          )}
-          key={item.threadInfo.id}
-          onClick={popModal}
-        >
-          <SidebarItem sidebarInfo={item} />
-        </div>
-      )),
-    [popModal, listData],
+  const searchSidebarModalContent = React.useCallback(
+    (searchSidebarText: string) => (
+      <SidebarModalContent
+        onClose={popModal}
+        threadInfo={threadInfo}
+        searchText={searchSidebarText}
+      />
+    ),
+    [popModal, threadInfo],
   );
 
-  let clearQueryButton = null;
-  if (searchText) {
-    clearQueryButton = (
-      <a href="#" onClick={clearQuery}>
-        <FontAwesomeIcon
-          icon={faTimesCircle}
-          className={chatThreadListCSS.clearQuery}
-        />
-      </a>
-    );
-  }
-
   return (
-    <Modal name="Sidebars" onClose={popModal}>
-      <div
-        className={classNames(
-          globalCSS['modal-body'],
-          globalCSS['resized-modal-body'],
-        )}
-      >
-        <div>
-          <div className={chatThreadListCSS.search}>
-            <MagnifyingGlass className={chatThreadListCSS.searchVector} />
-            <Input
-              type="text"
-              placeholder="Search sidebars"
-              value={searchText}
-              onChange={onChangeSearchText}
-            />
-            {clearQueryButton}
-          </div>
-        </div>
-        <ul className={chatThreadListCSS.list}>{sidebars}</ul>
-      </div>
-    </Modal>
+    <SearchModal
+      name="Sidebars"
+      onClose={popModal}
+      size="fit-content"
+      searchPlaceholder="Search sidebars"
+    >
+      {searchSidebarModalContent}
+    </SearchModal>
   );
 }