diff --git a/app/containers/Avatar/AvatarWithEdit.tsx b/app/containers/Avatar/AvatarWithEdit.tsx
index 690311804..5e0a335ba 100644
--- a/app/containers/Avatar/AvatarWithEdit.tsx
+++ b/app/containers/Avatar/AvatarWithEdit.tsx
@@ -9,6 +9,7 @@ import { useTheme } from '../../theme';
 import { BUTTON_HIT_SLOP } from '../message/utils';
 import { useAppSelector } from '../../lib/hooks';
 import { compareServerVersion } from '../../lib/methods/helpers';
+import sharedStyles from '../../views/Styles';
 
 const styles = StyleSheet.create({
 	editAvatarButton: {
@@ -20,7 +21,7 @@ const styles = StyleSheet.create({
 	},
 	textButton: {
 		fontSize: 12,
-		fontWeight: '600'
+		...sharedStyles.textSemibold
 	}
 });
 
@@ -72,7 +73,7 @@ const AvatarWithEdit = ({
 					onPress={handleEdit}
 					testID='avatar-edit-button'
 					style={styles.editAvatarButton}
-					styleText={[styles.textButton]}
+					styleText={styles.textButton}
 					color={colors.titleText}
 					hitSlop={BUTTON_HIT_SLOP}
 				/>
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index eb3c06c02..91f379c3f 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -14,7 +14,7 @@ interface IButtonProps extends PlatformTouchableProps {
 	loading?: boolean;
 	color?: string;
 	fontSize?: number;
-	styleText?: StyleProp<TextStyle>[];
+	styleText?: StyleProp<TextStyle> | StyleProp<TextStyle>[];
 }
 
 const styles = StyleSheet.create({
diff --git a/app/lib/methods/helpers/image.ts b/app/lib/methods/helpers/image.ts
index 63ce69c99..d5f874902 100644
--- a/app/lib/methods/helpers/image.ts
+++ b/app/lib/methods/helpers/image.ts
@@ -1,6 +1,6 @@
 import { Image } from 'react-native';
 
-export const isImageURL = async (url: string) => {
+export const isImageURL = async (url: string): Promise<boolean> => {
 	try {
 		const result = await Image.prefetch(url);
 		return result;
diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx
index ff486fc6f..35fe9a475 100644
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/app/views/ChangeAvatarView/index.tsx
@@ -17,6 +17,7 @@ import styles from './styles';
 import { useAppSelector } from '../../lib/hooks';
 import { getUserSelector } from '../../selectors/login';
 import Avatar from '../../containers/Avatar';
+import AvatarPresentational from '../../containers/Avatar/Avatar';
 import AvatarUrl from './AvatarUrl';
 import Button from '../../containers/Button';
 import I18n from '../../i18n';
@@ -24,7 +25,7 @@ import { ChatsStackParamList } from '../../stacks/types';
 import { IAvatar } from '../../definitions';
 import AvatarSuggestion from './AvatarSuggestion';
 import log from '../../lib/methods/helpers/log';
-import { changeRoomsAvatar, changeUserAvatar, resetUserAvatar } from './submitHelpers';
+import { changeRoomsAvatar, changeUserAvatar, resetUserAvatar } from './submitServices';
 
 enum AvatarStateActions {
 	CHANGE_AVATAR = 'CHANGE_AVATAR',
@@ -64,10 +65,11 @@ const ChangeAvatarView = () => {
 	const [state, dispatch] = useReducer(reducer, initialState);
 	const [saving, setSaving] = useState(false);
 	const { colors } = useTheme();
-	const { userId, username } = useAppSelector(
+	const { userId, username, server } = useAppSelector(
 		state => ({
 			userId: getUserSelector(state).id,
-			username: getUserSelector(state).username
+			username: getUserSelector(state).username,
+			server: state.server.server
 		}),
 		shallowEqual
 	);
@@ -149,7 +151,7 @@ const ChangeAvatarView = () => {
 		}
 	};
 
-	const deletingRoomAvatar = context === 'room' && state.data === null ? {} : { rid: room?.rid };
+	const deletingRoomAvatar = context === 'room' && state.data === null;
 
 	return (
 		<KeyboardView
@@ -165,14 +167,25 @@ const ChangeAvatarView = () => {
 					{...scrollPersistTaps}
 				>
 					<View style={styles.avatarContainer} testID='change-avatar-view-avatar'>
-						<Avatar
-							text={room?.name || state.resetUserAvatar || username}
-							avatar={state?.url}
-							isStatic={state?.url}
-							size={120}
-							type={t}
-							{...deletingRoomAvatar}
-						/>
+						{deletingRoomAvatar ? (
+							<AvatarPresentational
+								text={room?.name || state.resetUserAvatar || username}
+								avatar={state?.url}
+								isStatic={state?.url}
+								size={120}
+								type={t}
+								server={server}
+							/>
+						) : (
+							<Avatar
+								text={room?.name || state.resetUserAvatar || username}
+								avatar={state?.url}
+								isStatic={state?.url}
+								size={120}
+								type={t}
+								rid={room?.rid}
+							/>
+						)}
 					</View>
 					{context === 'profile' ? (
 						<AvatarUrl
diff --git a/app/views/ChangeAvatarView/submitHelpers.ts b/app/views/ChangeAvatarView/submitHelpers.ts
index f85ed71bf..1bc139198 100644
--- a/app/views/ChangeAvatarView/submitHelpers.ts
+++ b/app/views/ChangeAvatarView/submitHelpers.ts
@@ -1,34 +1,6 @@
-import { Services } from '../../lib/services';
-import log from '../../lib/methods/helpers/log';
-import { IAvatar } from '../../definitions';
 import I18n from '../../i18n';
 
-export const changeRoomsAvatar = async (rid: string, roomAvatar: string | null) => {
-	try {
-		await Services.saveRoomSettings(rid, { roomAvatar });
-	} catch (e) {
-		log(e);
-		return handleError(e, 'changing_avatar');
-	}
-};
-
-export const changeUserAvatar = async (avatarUpload: IAvatar) => {
-	try {
-		await Services.setAvatarFromService(avatarUpload);
-	} catch (e) {
-		return handleError(e, 'changing_avatar');
-	}
-};
-
-export const resetUserAvatar = async (userId: string) => {
-	try {
-		await Services.resetAvatar(userId);
-	} catch (e) {
-		return handleError(e, 'changing_avatar');
-	}
-};
-
-const handleError = (e: any, action: string) => {
+export const handleError = (e: any, action: string) => {
 	if (e.data && e.data.error.includes('[error-too-many-requests]')) {
 		throw new Error(e.data.error);
 	}
diff --git a/app/views/ChangeAvatarView/submitServices.ts b/app/views/ChangeAvatarView/submitServices.ts
new file mode 100644
index 000000000..f0b3a565b
--- /dev/null
+++ b/app/views/ChangeAvatarView/submitServices.ts
@@ -0,0 +1,29 @@
+import { Services } from '../../lib/services';
+import log from '../../lib/methods/helpers/log';
+import { IAvatar } from '../../definitions';
+import { handleError } from './submitHelpers';
+
+export const changeRoomsAvatar = async (rid: string, roomAvatar: string | null) => {
+	try {
+		await Services.saveRoomSettings(rid, { roomAvatar });
+	} catch (e) {
+		log(e);
+		return handleError(e, 'changing_avatar');
+	}
+};
+
+export const changeUserAvatar = async (avatarUpload: IAvatar) => {
+	try {
+		await Services.setAvatarFromService(avatarUpload);
+	} catch (e) {
+		return handleError(e, 'changing_avatar');
+	}
+};
+
+export const resetUserAvatar = async (userId: string) => {
+	try {
+		await Services.resetAvatar(userId);
+	} catch (e) {
+		return handleError(e, 'changing_avatar');
+	}
+};
diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx
index e831ec38f..8e6bd32dd 100644
--- a/app/views/ProfileView/index.tsx
+++ b/app/views/ProfileView/index.tsx
@@ -254,7 +254,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 			}
 			logEvent(events.PROFILE_SAVE_CHANGES_F);
 			this.setState({ saving: false, currentPassword: null, twoFactorCode: null });
-			this.handleError(e, 'saveUserProfile', 'saving_profile');
+			this.handleError(e, 'saving_profile');
 		}
 	};
 
@@ -271,11 +271,11 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 			EventEmitter.emit(LISTENER, { message: I18n.t('Avatar_changed_successfully') });
 			this.init();
 		} catch (e) {
-			this.handleError(e, 'resetAvatar', 'changing_avatar');
+			this.handleError(e, 'changing_avatar');
 		}
 	};
 
-	handleError = (e: any, _func: string, action: string) => {
+	handleError = (e: any, action: string) => {
 		if (e.data && e.data.error.includes('[error-too-many-requests]')) {
 			return showErrorAlert(e.data.error);
 		}