diff --git a/app/containers/Avatar/index.tsx b/app/containers/Avatar/index.tsx
index 965639185..4215fbd13 100644
--- a/app/containers/Avatar/index.tsx
+++ b/app/containers/Avatar/index.tsx
@@ -13,6 +13,8 @@ import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import styles from './styles';
 
+type IAvatarContainer = IAvatar & { isUserProfile?: boolean; handleEdit?: () => void };
+
 const AvatarContainer = ({
 	style,
 	text = '',
@@ -28,7 +30,7 @@ const AvatarContainer = ({
 	rid,
 	handleEdit,
 	isUserProfile
-}: IAvatar & { isUserProfile?: boolean; handleEdit?: () => void }): React.ReactElement => {
+}: IAvatarContainer): React.ReactElement => {
 	const subscription = useRef<Subscription>();
 	const [avatarETag, setAvatarETag] = useState<string | undefined>('');
 	const previousAvatarEtag = useRef<string | undefined>('');
@@ -128,6 +130,7 @@ const AvatarContainer = ({
 					onPress={handleEdit}
 					testID='avatar-edit-button'
 					style={styles.editAvatarButton}
+					color={colors.titleText}
 				/>
 			) : null}
 		</>
diff --git a/app/containers/Avatar/styles.ts b/app/containers/Avatar/styles.ts
index 81e1cf415..5a43fd029 100644
--- a/app/containers/Avatar/styles.ts
+++ b/app/containers/Avatar/styles.ts
@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
 	editAvatarButton: {
-		marginTop: 8,
+		marginTop: 16,
 		paddingVertical: 8,
 		paddingHorizontal: 12,
 		marginBottom: 0
diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index ba1f5b3fe..9cfb4be82 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -97,7 +97,7 @@ const ChatsStackNavigator = () => {
 			<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
-			<ProfileStack.Screen name='ChangeAvatarView' component={ChangeAvatarView} />
+			<ChatsStack.Screen name='ChangeAvatarView' component={ChangeAvatarView} />
 			<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
 			<ChatsStack.Screen name='DiscussionsView' component={DiscussionsView} />
 			<ChatsStack.Screen
diff --git a/app/views/ChangeAvatarView/AvatarSuggestion.tsx b/app/views/ChangeAvatarView/AvatarSuggestion.tsx
index 6e4fd70fd..26dd5579c 100644
--- a/app/views/ChangeAvatarView/AvatarSuggestion.tsx
+++ b/app/views/ChangeAvatarView/AvatarSuggestion.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, TouchableOpacity } from 'react-native';
+import { Text, View } from 'react-native';
 
 import { IAvatar, IUser } from '../../definitions';
 import { Services } from '../../lib/services';
@@ -7,29 +7,20 @@ import I18n from '../../i18n';
 import Avatar from '../../containers/Avatar';
 import styles from './styles';
 import { useTheme } from '../../theme';
+import Touch from '../../containers/Touch';
 
-const Item = ({
-	item,
-	onPress,
-	text,
-	testID
-}: {
-	item?: IAvatar;
-	testID?: string;
-	onPress: (value?: IAvatar) => void;
-	text?: string;
-}) => {
+const Item = ({ item, onPress, text, testID }: { item?: IAvatar; testID?: string; onPress: Function; text?: string }) => {
 	const { colors } = useTheme();
 
 	return (
-		<TouchableOpacity
+		<Touch
 			key={item?.service}
 			testID={testID}
 			onPress={() => onPress(item)}
 			style={[styles.avatarButton, { backgroundColor: colors.borderColor }]}
 		>
 			<Avatar avatar={item?.url} text={text} size={64} />
-		</TouchableOpacity>
+		</Touch>
 	);
 };
 const AvatarSuggestion = ({
@@ -37,14 +28,14 @@ const AvatarSuggestion = ({
 	user,
 	resetAvatar
 }: {
-	onPress: (value?: IAvatar) => void;
+	onPress: (value: IAvatar | null) => void;
 	user?: IUser;
 	resetAvatar?: () => void;
 }) => {
 	const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
-	
+
 	const { colors } = useTheme();
-	
+
 	const getAvatarSuggestion = async () => {
 		const result = await Services.getAvatarSuggestion();
 		const suggestions = Object.keys(result).map(service => {
diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx
index 62312cb79..892e97172 100644
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/app/views/ChangeAvatarView/index.tsx
@@ -27,7 +27,7 @@ import AvatarSuggestion from './AvatarSuggestion';
 import log from '../../lib/methods/helpers/log';
 
 const ChangeAvatarView = () => {
-	const [avatar, setAvatarState] = useState<IAvatar>();
+	const [avatar, setAvatarState] = useState<IAvatar | null>(null);
 
 	const [textAvatar, setTextAvatar] = useState('');
 	const [saving, setSaving] = useState(false);
@@ -68,7 +68,7 @@ const ChangeAvatarView = () => {
 		});
 	}, [navigation]);
 
-	const setAvatar = (value?: IAvatar) => {
+	const setAvatar = (value: IAvatar | null) => {
 		avatarUrl.current = value?.url;
 		setAvatarState(value);
 	};
@@ -103,7 +103,7 @@ const ChangeAvatarView = () => {
 	};
 
 	const resetAvatar = () => {
-		setAvatar(undefined);
+		setAvatar(null);
 		setTextAvatar(`@${user.username}`);
 		avatarUrl.current = `@${user.username}`;
 	};
diff --git a/app/views/NewMessageView/index.tsx b/app/views/NewMessageView/index.tsx
index c4dc74afc..6033ad58b 100644
--- a/app/views/NewMessageView/index.tsx
+++ b/app/views/NewMessageView/index.tsx
@@ -93,7 +93,7 @@ const NewMessageView = () => {
 
 					return (
 						<UserItem
-							id={item._id}
+							id={itemModel.id || itemSearch._id}
 							name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
 							username={itemSearch.search ? itemSearch.username : itemModel.name}
 							onPress={() => goRoom(itemModel)}