diff --git a/native/chat/settings/thread-settings-child-thread.react.js b/native/chat/settings/thread-settings-child-thread.react.js
index 9e961bf86..58762e28a 100644
--- a/native/chat/settings/thread-settings-child-thread.react.js
+++ b/native/chat/settings/thread-settings-child-thread.react.js
@@ -1,76 +1,97 @@
 // @flow
 
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
+import Avatar from '../../components/avatar.react.js';
 import Button from '../../components/button.react.js';
 import ThreadIcon from '../../components/thread-icon.react.js';
 import ThreadPill from '../../components/thread-pill.react.js';
 import { useColors, useStyles } from '../../themes/colors.js';
+import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
 import { useNavigateToThread } from '../message-list-types.js';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +firstListItem: boolean,
   +lastListItem: boolean,
 };
 function ThreadSettingsChildThread(props: Props): React.Node {
   const { threadInfo } = props;
 
   const navigateToThread = useNavigateToThread();
   const onPress = React.useCallback(() => {
     navigateToThread({ threadInfo });
   }, [threadInfo, navigateToThread]);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
+  const avatarInfo = useGetAvatarForThread(threadInfo);
+  const shouldRenderAvatars = useShouldRenderAvatars();
+
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return null;
+    }
+    return (
+      <View style={styles.avatarContainer}>
+        <Avatar size="small" avatarInfo={avatarInfo} />
+      </View>
+    );
+  }, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);
+
   const firstItem = props.firstListItem ? null : styles.topBorder;
   const lastItem = props.lastListItem ? styles.lastButton : null;
   return (
     <View style={styles.container}>
       <Button onPress={onPress} style={[styles.button, firstItem, lastItem]}>
         <View style={styles.leftSide}>
+          {avatar}
           <ThreadPill threadInfo={threadInfo} />
         </View>
         <ThreadIcon
           threadType={threadInfo.type}
           color={colors.panelForegroundSecondaryLabel}
         />
       </Button>
     </View>
   );
 }
 
 const unboundStyles = {
+  avatarContainer: {
+    marginRight: 8,
+  },
   button: {
     flex: 1,
     flexDirection: 'row',
     paddingVertical: 8,
     paddingLeft: 12,
     paddingRight: 10,
     alignItems: 'center',
   },
   topBorder: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   container: {
     backgroundColor: 'panelForeground',
     flex: 1,
     paddingHorizontal: 12,
   },
   lastButton: {
     paddingBottom: Platform.OS === 'ios' ? 12 : 10,
     paddingTop: 8,
   },
   leftSide: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },
 };
 
 export default ThreadSettingsChildThread;
diff --git a/native/chat/settings/thread-settings-parent.react.js b/native/chat/settings/thread-settings-parent.react.js
index d90835daa..f99af82f4 100644
--- a/native/chat/settings/thread-settings-parent.react.js
+++ b/native/chat/settings/thread-settings-parent.react.js
@@ -1,97 +1,130 @@
 // @flow
 
-import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
+import Avatar from '../../components/avatar.react.js';
 import Button from '../../components/button.react.js';
 import ThreadPill from '../../components/thread-pill.react.js';
 import { useStyles } from '../../themes/colors.js';
+import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
 import { useNavigateToThread } from '../message-list-types.js';
 
-type Props = {
-  +threadInfo: ThreadInfo,
-  +parentThreadInfo: ?ThreadInfo,
+type ParentButtonProps = {
+  +parentThreadInfo: ThreadInfo,
 };
-function ThreadSettingsParent(props: Props): React.Node {
-  const { threadInfo, parentThreadInfo } = props;
+function ParentButton(props: ParentButtonProps): React.Node {
   const styles = useStyles(unboundStyles);
 
   const navigateToThread = useNavigateToThread();
+
   const onPressParentThread = React.useCallback(() => {
-    invariant(parentThreadInfo, 'should be set');
-    navigateToThread({ threadInfo: parentThreadInfo });
-  }, [parentThreadInfo, navigateToThread]);
+    navigateToThread({ threadInfo: props.parentThreadInfo });
+  }, [props.parentThreadInfo, navigateToThread]);
+
+  const avatarInfo = useGetAvatarForThread(props.parentThreadInfo);
+  const shouldRenderAvatars = useShouldRenderAvatars();
+
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return null;
+    }
+
+    return (
+      <View style={styles.avatarContainer}>
+        <Avatar size="small" avatarInfo={avatarInfo} />
+      </View>
+    );
+  }, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);
+
+  return (
+    <Button onPress={onPressParentThread} style={styles.parentContainer}>
+      {avatar}
+      <ThreadPill threadInfo={props.parentThreadInfo} />
+    </Button>
+  );
+}
+
+type ThreadSettingsParentProps = {
+  +threadInfo: ThreadInfo,
+  +parentThreadInfo: ?ThreadInfo,
+};
+function ThreadSettingsParent(props: ThreadSettingsParentProps): React.Node {
+  const { threadInfo, parentThreadInfo } = props;
+  const styles = useStyles(unboundStyles);
 
   let parent;
   if (parentThreadInfo) {
-    parent = (
-      <Button onPress={onPressParentThread}>
-        <ThreadPill threadInfo={parentThreadInfo} />
-      </Button>
-    );
+    parent = <ParentButton parentThreadInfo={parentThreadInfo} />;
   } else if (threadInfo.parentThreadID) {
     parent = (
       <Text
         style={[styles.currentValue, styles.currentValueText, styles.noParent]}
         numberOfLines={1}
       >
         Secret parent
       </Text>
     );
   } else {
     parent = (
       <Text
         style={[styles.currentValue, styles.currentValueText, styles.noParent]}
         numberOfLines={1}
       >
         No parent
       </Text>
     );
   }
 
   return (
     <View style={styles.row}>
       <Text style={styles.label} numberOfLines={1}>
         Parent
       </Text>
       {parent}
     </View>
   );
 }
 
 const unboundStyles = {
+  avatarContainer: {
+    marginRight: 8,
+  },
   currentValue: {
     flex: 1,
   },
   currentValueText: {
     color: 'panelForegroundSecondaryLabel',
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     paddingRight: 0,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
   noParent: {
     fontStyle: 'italic',
     paddingLeft: 2,
   },
+  parentContainer: {
+    flexDirection: 'row',
+  },
   row: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 4,
     alignItems: 'center',
   },
 };
 
-const ConnectedThreadSettingsParent: React.ComponentType<Props> =
-  React.memo<Props>(ThreadSettingsParent);
+const ConnectedThreadSettingsParent: React.ComponentType<ThreadSettingsParentProps> =
+  React.memo<ThreadSettingsParentProps>(ThreadSettingsParent);
 
 export default ConnectedThreadSettingsParent;