diff --git a/web/modals/threads/thread-picker-modal.css b/web/modals/threads/thread-picker-modal.css
index 073b8d5b4..dc5e9c714 100644
--- a/web/modals/threads/thread-picker-modal.css
+++ b/web/modals/threads/thread-picker-modal.css
@@ -1,45 +1,39 @@
 div.container {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   margin: 16px;
 }
 
 div.contentContainer {
   overflow: scroll;
   height: 448px;
 }
 
 div.threadPickerOptionContainer {
   display: flex;
 }
 
 .threadPickerOptionButton {
   flex: 1;
   justify-content: left;
   padding: 12px 16px;
   font-size: var(--m-font-16);
 }
 
 .threadPickerOptionButton:hover {
   background-color: var(--thread-hover-bg);
   border-radius: 8px;
 }
 
-div.threadSplotch {
-  min-width: 40px;
-  height: 40px;
-  border-radius: 10px;
-}
-
 div.threadNameText {
   color: var(--shades-white-100);
   margin-left: 16px;
 }
 
 div.noResultsText {
   text-align: center;
   color: var(--shades-white-100);
   margin-top: 24px;
   font-weight: 500;
 }
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
index 651ca36b7..4f658649e 100644
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -1,145 +1,140 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import { useGlobalThreadSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { onScreenEntryEditableThreadInfos } from 'lib/selectors/thread-selectors.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './thread-picker-modal.css';
 import Button from '../../components/button.react.js';
 import Search from '../../components/search.react.js';
+import ThreadAvatar from '../../components/thread-avatar.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal, { type ModalOverridableProps } from '../modal.react.js';
 
 type OptionProps = {
   +threadInfo: ThreadInfo,
   +createNewEntry: (threadID: string) => void,
   +onCloseModal: () => void,
 };
 
 function ThreadPickerOption(props: OptionProps) {
   const { threadInfo, createNewEntry, onCloseModal } = props;
 
   const onClickThreadOption = React.useCallback(() => {
     createNewEntry(threadInfo.id);
     onCloseModal();
   }, [threadInfo.id, createNewEntry, onCloseModal]);
 
-  const splotchColorStyle = React.useMemo(
-    () => ({
-      backgroundColor: `#${threadInfo.color}`,
-    }),
-    [threadInfo.color],
-  );
-
   const { uiName } = useResolvedThreadInfo(threadInfo);
+
   return (
     <div key={threadInfo.id} className={css.threadPickerOptionContainer}>
       <Button
         className={css.threadPickerOptionButton}
         onClick={onClickThreadOption}
       >
-        <div style={splotchColorStyle} className={css.threadSplotch} />
+        <ThreadAvatar size="large" threadInfo={threadInfo} />
         <div className={css.threadNameText}>{uiName}</div>
       </Button>
     </div>
   );
 }
 
 type Props = {
   ...ModalOverridableProps,
   +createNewEntry: (threadID: string) => void,
 };
 
 function ThreadPickerModal(props: Props): React.Node {
   const { createNewEntry, ...modalProps } = props;
 
   const onScreenThreadInfos = useSelector(onScreenEntryEditableThreadInfos);
   const searchIndex = useGlobalThreadSearchIndex();
 
   invariant(
     onScreenThreadInfos.length > 0,
     "ThreadPicker can't be open when onScreenThreadInfos is empty",
   );
 
   const [searchText, setSearchText] = React.useState<string>('');
   const [searchResults, setSearchResults] = React.useState<Set<string>>(
     new Set(),
   );
 
   const searchRef = React.useRef();
 
   React.useEffect(() => {
     searchRef.current?.focus();
   }, []);
 
   const onChangeSearchText = React.useCallback(
     (text: string) => {
       const results = searchIndex.getSearchResults(text);
       setSearchText(text);
       setSearchResults(new Set(results));
     },
     [searchIndex],
   );
 
   const listDataSelector = createSelector(
     state => state.onScreenThreadInfos,
     state => state.searchText,
     state => state.searchResults,
     (
       threadInfos: $ReadOnlyArray<ThreadInfo>,
       text: string,
       results: Set<string>,
     ) =>
       text
         ? threadInfos.filter(threadInfo => results.has(threadInfo.id))
         : [...threadInfos],
   );
 
   const threads = useSelector(() =>
     listDataSelector({
       onScreenThreadInfos,
       searchText,
       searchResults,
     }),
   );
 
   const threadPickerContent = React.useMemo(() => {
     const options = threads.map(threadInfo => (
       <ThreadPickerOption
         threadInfo={threadInfo}
         createNewEntry={createNewEntry}
         key={threadInfo.id}
         onCloseModal={modalProps.onClose}
       />
     ));
 
     if (options.length === 0 && searchText.length > 0) {
       return (
         <div className={css.noResultsText}>No results for {searchText}</div>
       );
     } else {
       return options;
     }
   }, [threads, createNewEntry, modalProps.onClose, searchText]);
 
   return (
     <Modal {...modalProps} size="large">
       <div className={css.container}>
         <Search
           onChangeText={onChangeSearchText}
           searchText={searchText}
           placeholder="Search chats"
           ref={searchRef}
         />
         <div className={css.contentContainer}>{threadPickerContent}</div>
       </div>
     </Modal>
   );
 }
 
 export default ThreadPickerModal;