3 files changed, 21 insertions, 16 deletions
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index 24f28f645..30145e7b5 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -13,9 +13,9 @@ import {
   FollowerItem,
 } from '../../../state/models/user-followers-view'
 import {Link} from '../util/Link'
+import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
-import {DEF_AVATER} from '../../lib/assets'
 
 export const ProfileFollowers = observer(function ProfileFollowers({
   name,
@@ -81,7 +81,11 @@ const User = ({item}: {item: FollowerItem}) => {
     <Link style={styles.outer} href={`/profile/${item.name}`} title={item.name}>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
-          <Image style={styles.avi} source={DEF_AVATER} />
+          <UserAvatar
+            size={40}
+            displayName={item.displayName}
+            name={item.name}
+          />
         </View>
         <View style={styles.layoutContent}>
           <Text style={[s.f15, s.bold]}>{item.displayName}</Text>
@@ -106,12 +110,6 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
-  avi: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    resizeMode: 'cover',
-  },
   layoutContent: {
     flex: 1,
     paddingRight: 10,
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index 719765edf..56a5371ba 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -14,8 +14,8 @@ import {
 } from '../../../state/models/user-follows-view'
 import {useStores} from '../../../state'
 import {Link} from '../util/Link'
+import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
-import {DEF_AVATER} from '../../lib/assets'
 
 export const ProfileFollows = observer(function ProfileFollows({
   name,
@@ -81,7 +81,11 @@ const User = ({item}: {item: FollowItem}) => {
     <Link style={styles.outer} href={`/profile/${item.name}`} title={item.name}>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
-          <Image style={styles.avi} source={DEF_AVATER} />
+          <UserAvatar
+            size={40}
+            displayName={item.displayName}
+            name={item.name}
+          />
         </View>
         <View style={styles.layoutContent}>
           <Text style={[s.f15, s.bold]}>{item.displayName}</Text>
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 9565ae4a8..6778663a3 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -15,8 +15,9 @@ import {useStores} from '../../../state'
 import {EditProfileModel} from '../../../state/models/shell'
 import {pluralize} from '../../lib/strings'
 import {s, gradients, colors} from '../../lib/styles'
-import {DEF_AVATER, BANNER} from '../../lib/assets'
+import {BANNER} from '../../lib/assets'
 import Toast from '../util/Toast'
+import {UserAvatar} from '../util/UserAvatar'
 import {Link} from '../util/Link'
 
 export const ProfileHeader = observer(function ProfileHeader({
@@ -81,7 +82,9 @@ export const ProfileHeader = observer(function ProfileHeader({
   return (
     <View style={styles.outer}>
       <Image style={styles.banner} source={BANNER} />
-      <Image style={styles.avi} source={DEF_AVATER} />
+      <View style={styles.avi}>
+        <UserAvatar size={80} displayName={view.displayName} name={view.name} />
+      </View>
       <View style={styles.content}>
         <View style={[styles.displayNameLine]}>
           <Text style={styles.displayName}>{view.displayName}</Text>
@@ -178,12 +181,12 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 80,
     left: 10,
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    resizeMode: 'cover',
+    width: 84,
+    height: 84,
+    borderRadius: 42,
     borderWidth: 2,
     borderColor: colors.white,
+    backgroundColor: colors.white,
   },
   content: {
     paddingTop: 8,