diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index f668c69ed0..406654e4df 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, useState} from 'react'
 import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
 import Svg, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -24,6 +24,8 @@ export function UserAvatar({
   const initials = getInitials(displayName || handle)
   const gradient = getGradient(handle)
 
+  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
+
   const handleEditAvatar = useCallback(() => {
     Alert.alert('Select upload method', '', [
       {
@@ -36,8 +38,7 @@ export function UserAvatar({
             height: 80,
             cropperCircleOverlay: true,
           }).then(item => {
-            // setLocalAvatarPicture(item.path)
-            console.log(item)
+            setUploadedImage(item.path)
           })
         },
       },
@@ -54,7 +55,7 @@ export function UserAvatar({
               height: 80,
               cropperCircleOverlay: true,
             }).then(croppedItem => {
-              // setLocalAvatarPicture(croppedItem.path)
+              setUploadedImage(croppedItem.path)
               console.log(croppedItem)
             })
           })
@@ -86,12 +87,12 @@ export function UserAvatar({
 
   return isEditable ? (
     <TouchableOpacity onPress={handleEditAvatar}>
-      {/* {localAvatarPicture != null ? (
-        <Image style={styles.avatarImage} source={{uri: localAvatarPicture}} />
+      {/* Added a react state temporary photo white the protocol does not support imagery */}
+      {uploadedImage != null ? (
+        <Image style={styles.avatarImage} source={{uri: uploadedImage}} />
       ) : (
         renderSvg(size, initials)
-      )} */}
-      {renderSvg(size, initials)}
+      )}
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index dc27ef9685..0b83622f3c 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -1,5 +1,5 @@
-import React, {useCallback} from 'react'
-import {StyleSheet, View, TouchableOpacity, Alert, Image, Dimensions} from 'react-native'
+import React, {useCallback, useState} from 'react'
+import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {getGradient} from '../../lib/asset-gen'
@@ -19,6 +19,8 @@ export function UserBanner({
 }) {
   const gradient = getGradient(handle)
 
+  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
+
   const handleEditBanner = useCallback(() => {
     Alert.alert('Select upload method', '', [
       {
@@ -30,7 +32,7 @@ export function UserBanner({
             width: 1500,
             height: 500,
           }).then(item => {
-            // setLocalBannerPicture(item.path)
+            setUploadedImage(item.path)
             console.log(item)
           })
         },
@@ -47,7 +49,7 @@ export function UserBanner({
               width: 1500,
               height: 500,
             }).then(croppedItem => {
-              // setLocalBannerPicture(croppedItem.path)
+              setUploadedImage(croppedItem.path)
               console.log(croppedItem)
             })
           })
@@ -75,12 +77,16 @@ export function UserBanner({
 
   return isEditable ? (
     <TouchableOpacity onPress={handleEditBanner}>
-      {/* {localBannerPicture != null ? (
-        <Image style={styles.bannerImage} source={{uri: localBannerPicture}} />
+      {/* Added a react state temporary photo white the protocol does not support imagery */}
+      {uploadedImage != null ? (
+        <Image
+          style={styles.bannerImage}
+          resizeMode="stretch"
+          source={{uri: uploadedImage}}
+        />
       ) : (
         renderSvg()
-      )} */}
-      {renderSvg()}
+      )}
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
@@ -110,6 +116,5 @@ const styles = StyleSheet.create({
   bannerImage: {
     width: '100%',
     height: 120,
-    resizeMode: 'contain',
   },
 })