diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index cea4ce944da9..ef2363308f72 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -10,7 +10,6 @@ import * as Expensicons from './Icon/Expensicons';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import AttachmentPicker from './AttachmentPicker';
-import ConfirmModal from './ConfirmModal';
 import AvatarCropModal from './AvatarCropModal/AvatarCropModal';
 import OfflineWithFeedback from './OfflineWithFeedback';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -22,6 +21,7 @@ import stylePropTypes from '../styles/stylePropTypes';
 import * as FileUtils from '../libs/fileDownload/FileUtils';
 import getImageResolution from '../libs/fileDownload/getImageResolution';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import DotIndicatorMessage from './DotIndicatorMessage';
 
 const propTypes = {
     /** Avatar source to display */
@@ -103,16 +103,13 @@ class AvatarWithImagePicker extends React.Component {
     constructor(props) {
         super(props);
         this.animation = new SpinningIndicatorAnimation();
-        this.hideErrorModal = this.hideErrorModal.bind(this);
-        this.showErrorModal = this.showErrorModal.bind(this);
+        this.setError = this.setError.bind(this);
         this.isValidSize = this.isValidSize.bind(this);
         this.showAvatarCropModal = this.showAvatarCropModal.bind(this);
         this.hideAvatarCropModal = this.hideAvatarCropModal.bind(this);
         this.state = {
             isMenuVisible: false,
-            isErrorModalVisible: false,
-            errorModalPrompt: '',
-            errorModalTitle: '',
+            validationError: null,
             isAvatarCropModalOpen: false,
             imageName: '',
             imageUri: '',
@@ -141,15 +138,10 @@ class AvatarWithImagePicker extends React.Component {
     }
 
     /**
-     * @param {String} title
-     * @param {String} prompt
+     * @param {String} error
      */
-    showErrorModal(title, prompt) {
-        this.setState({isErrorModalVisible: true, errorModalTitle: title, errorModalPrompt: prompt});
-    }
-
-    hideErrorModal() {
-        this.setState({isErrorModalVisible: false});
+    setError(error) {
+        this.setState({validationError: error});
     }
 
     /**
@@ -196,24 +188,17 @@ class AvatarWithImagePicker extends React.Component {
      */
     showAvatarCropModal(image) {
         if (!this.isValidExtension(image)) {
-            this.showErrorModal(
-                this.props.translate('avatarWithImagePicker.imageUploadFailed'),
-                this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS}),
-            );
+            this.setError(this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS}));
             return;
         }
         if (!this.isValidSize(image)) {
-            this.showErrorModal(
-                this.props.translate('avatarWithImagePicker.imageUploadFailed'),
-                this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)}),
-            );
+            this.setError(this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)}));
             return;
         }
 
         this.isValidResolution(image).then((isValidResolution) => {
             if (!isValidResolution) {
-                this.showErrorModal(
-                    this.props.translate('avatarWithImagePicker.imageUploadFailed'),
+                this.setError(
                     this.props.translate('avatarWithImagePicker.resolutionConstraints', {
                         minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
                         minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
@@ -226,6 +211,7 @@ class AvatarWithImagePicker extends React.Component {
 
             this.setState({
                 isAvatarCropModalOpen: true,
+                validationError: null,
                 isMenuVisible: false,
                 imageUri: image.uri,
                 imageName: image.name,
@@ -263,6 +249,7 @@ class AvatarWithImagePicker extends React.Component {
                 icon: Expensicons.Trashcan,
                 text: this.props.translate('avatarWithImagePicker.removePhoto'),
                 onSelected: () => {
+                    this.setError(null);
                     this.props.onImageRemoved();
                 },
             });
@@ -333,15 +320,13 @@ class AvatarWithImagePicker extends React.Component {
                         </AttachmentPicker>
                     </View>
                 </PressableWithoutFeedback>
-                <ConfirmModal
-                    title={this.state.errorModalTitle}
-                    onConfirm={this.hideErrorModal}
-                    onCancel={this.hideErrorModal}
-                    isVisible={this.state.isErrorModalVisible}
-                    prompt={this.state.errorModalPrompt}
-                    confirmText={this.props.translate('common.close')}
-                    shouldShowCancelButton={false}
-                />
+                {this.state.validationError && (
+                    <DotIndicatorMessage
+                        style={[styles.mt6]}
+                        messages={{0: this.state.validationError}}
+                        type="error"
+                    />
+                )}
                 <AvatarCropModal
                     onClose={this.hideAvatarCropModal}
                     isVisible={this.state.isAvatarCropModalOpen}
diff --git a/src/languages/en.js b/src/languages/en.js
index 0a93c9c62c61..4e3e938e5818 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -401,7 +401,6 @@ export default {
         uploadPhoto: 'Upload photo',
         removePhoto: 'Remove photo',
         editImage: 'Edit photo',
-        imageUploadFailed: 'Image upload failed',
         deleteWorkspaceError: 'Sorry, there was an unexpected problem deleting your workspace avatar.',
         sizeExceeded: ({maxUploadSizeInMB}) => `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`,
         resolutionConstraints: ({minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx}) =>
diff --git a/src/languages/es.js b/src/languages/es.js
index 1f36fdbebf0e..4810df39c3a4 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -400,7 +400,6 @@ export default {
         uploadPhoto: 'Subir foto',
         removePhoto: 'Eliminar foto',
         editImage: 'Editar foto',
-        imageUploadFailed: 'Error al cargar la imagen',
         deleteWorkspaceError: 'Lo sentimos, hubo un problema eliminando el avatar de su espacio de trabajo.',
         sizeExceeded: ({maxUploadSizeInMB}) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB}MB.`,
         resolutionConstraints: ({minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx}) =>
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 07db3d0cdffb..490d8629186f 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -108,6 +108,7 @@ function ProfilePage(props) {
                     errors={lodashGet(props.currentUserPersonalDetails, 'errorFields.avatar', null)}
                     errorRowStyles={[styles.mt6]}
                     onErrorClose={PersonalDetails.clearAvatarErrors}
+                    style={[styles.mh5]}
                 />
                 <View style={[styles.mt4]}>
                     {_.map(profileSettingsOptions, (detail, index) => (