diff --git a/web/modals/threads/thread-picker-modal.css b/web/modals/threads/thread-picker-modal.css
--- a/web/modals/threads/thread-picker-modal.css
+++ b/web/modals/threads/thread-picker-modal.css
@@ -26,12 +26,6 @@
   border-radius: 8px;
 }
 
-div.threadSplotch {
-  min-width: 40px;
-  height: 40px;
-  border-radius: 10px;
-}
-
 div.threadNameText {
   color: var(--shades-white-100);
   margin-left: 16px;
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -12,6 +12,7 @@
 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';
 
@@ -29,21 +30,15 @@
     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>