diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index aa50d6db574b..85a55a16d595 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -21,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 AttachmentModal from './AttachmentModal';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import * as Browser from '../libs/Browser';
 
@@ -79,6 +80,15 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     errors: PropTypes.object,
 
+    /** Title for avatar preview modal */
+    headerTitle: PropTypes.string,
+
+    /** Avatar source for avatar preview modal */
+    previewSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+    /** File name of the avatar */
+    originalFileName: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
@@ -98,6 +108,9 @@ const defaultProps = {
     onErrorClose: () => {},
     pendingAction: null,
     errors: null,
+    headerTitle: '',
+    previewSource: '',
+    originalFileName: '',
 };
 
 class AvatarWithImagePicker extends React.Component {
@@ -273,58 +286,72 @@ class AvatarWithImagePicker extends React.Component {
                             </PressableWithoutFeedback>
                         </Tooltip>
                     </OfflineWithFeedback>
-                    <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>
-                        {({openPicker}) => {
-                            const menuItems = [
-                                {
-                                    icon: Expensicons.Upload,
-                                    text: this.props.translate('avatarWithImagePicker.uploadPhoto'),
-                                    onSelected: () => {
-                                        if (Browser.isSafari()) {
-                                            return;
-                                        }
-                                        openPicker({
-                                            onPicked: this.showAvatarCropModal,
+                    <AttachmentModal
+                        headerTitle={this.props.headerTitle}
+                        source={this.props.previewSource}
+                        originalFileName={this.props.originalFileName}
+                    >
+                        {({show}) => (
+                            <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>
+                                {({openPicker}) => {
+                                    const menuItems = [
+                                        {
+                                            icon: Expensicons.Upload,
+                                            text: this.props.translate('avatarWithImagePicker.uploadPhoto'),
+                                            onSelected: () => {
+                                                if (Browser.isSafari()) {
+                                                    return;
+                                                }
+                                                openPicker({
+                                                    onPicked: this.showAvatarCropModal,
+                                                });
+                                            },
+                                        },
+                                    ];
+
+                                    // If current avatar isn't a default avatar, allow Remove Photo option
+                                    if (!this.props.isUsingDefaultAvatar) {
+                                        menuItems.push({
+                                            icon: Expensicons.Trashcan,
+                                            text: this.props.translate('avatarWithImagePicker.removePhoto'),
+                                            onSelected: () => {
+                                                this.setError(null, {});
+                                                this.props.onImageRemoved();
+                                            },
                                         });
-                                    },
-                                },
-                            ];
-
-                            // If current avatar isn't a default avatar, allow Remove Photo option
-                            if (!this.props.isUsingDefaultAvatar) {
-                                menuItems.push({
-                                    icon: Expensicons.Trashcan,
-                                    text: this.props.translate('avatarWithImagePicker.removePhoto'),
-                                    onSelected: () => {
-                                        this.setError(null, {});
-                                        this.props.onImageRemoved();
-                                    },
-                                });
-                            }
-                            return (
-                                <PopoverMenu
-                                    isVisible={this.state.isMenuVisible}
-                                    onClose={() => this.setState({isMenuVisible: false})}
-                                    onItemSelected={(item, index) => {
-                                        this.setState({isMenuVisible: false});
-                                        // In order for the file picker to open dynamically, the click
-                                        // function must be called from within a event handler that was initiated
-                                        // by the user on Safari.
-                                        if (index === 0 && Browser.isSafari()) {
-                                            openPicker({
-                                                onPicked: this.showAvatarCropModal,
-                                            });
-                                        }
-                                    }}
-                                    menuItems={menuItems}
-                                    anchorPosition={this.props.anchorPosition}
-                                    withoutOverlay
-                                    anchorRef={this.anchorRef}
-                                    anchorAlignment={this.props.anchorAlignment}
-                                />
-                            );
-                        }}
-                    </AttachmentPicker>
+
+                                        menuItems.push({
+                                            icon: Expensicons.Eye,
+                                            text: this.props.translate('avatarWithImagePicker.viewPhoto'),
+                                            onSelected: () => show(),
+                                        });
+                                    }
+                                    return (
+                                        <PopoverMenu
+                                            isVisible={this.state.isMenuVisible}
+                                            onClose={() => this.setState({isMenuVisible: false})}
+                                            onItemSelected={(item, index) => {
+                                                this.setState({isMenuVisible: false});
+                                                // In order for the file picker to open dynamically, the click
+                                                // function must be called from within a event handler that was initiated
+                                                // by the user on Safari.
+                                                if (index === 0 && Browser.isSafari()) {
+                                                    openPicker({
+                                                        onPicked: this.showAvatarCropModal,
+                                                    });
+                                                }
+                                            }}
+                                            menuItems={menuItems}
+                                            anchorPosition={this.props.anchorPosition}
+                                            withoutOverlay
+                                            anchorRef={this.anchorRef}
+                                            anchorAlignment={this.props.anchorAlignment}
+                                        />
+                                    );
+                                }}
+                            </AttachmentPicker>
+                        )}
+                    </AttachmentModal>
                 </View>
                 {this.state.validationError && (
                     <DotIndicatorMessage
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 03adaa1e66b1..8e8e0163e717 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -573,6 +573,8 @@ export default {
         uploadPhoto: 'Upload photo',
         removePhoto: 'Remove photo',
         editImage: 'Edit photo',
+        viewPhoto: 'View photo',
+        imageUploadFailed: 'Image upload failed',
         deleteWorkspaceError: 'Sorry, there was an unexpected problem deleting your workspace avatar.',
         sizeExceeded: ({maxUploadSizeInMB}: SizeExceededParams) => `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`,
         resolutionConstraints: ({minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx}: ResolutionConstraintsParams) =>
@@ -592,6 +594,7 @@ export default {
         online: 'Online',
         offline: 'Offline',
         syncing: 'Syncing',
+        profileAvatar: 'Profile avatar',
     },
     loungeAccessPage: {
         loungeAccess: 'Lounge access',
@@ -1312,6 +1315,7 @@ export default {
             memberNotFound: 'Member not found. To invite a new member to the workspace, please use the Invite button above.',
             notAuthorized: `You do not have access to this page. Are you trying to join the workspace? Please reach out to the owner of this workspace so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}: GoToRoomParams) => `Go to ${roomName} room`,
+            workspaceAvatar: 'Workspace avatar',
         },
         emptyWorkspace: {
             title: 'Create a new workspace',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 7315c42cebab..4e6743ce03c0 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -566,6 +566,8 @@ export default {
         uploadPhoto: 'Subir foto',
         removePhoto: 'Eliminar foto',
         editImage: 'Editar foto',
+        viewPhoto: 'Ver foto',
+        imageUploadFailed: 'Error al cargar la imagen',
         deleteWorkspaceError: 'Lo sentimos, hubo un problema eliminando el avatar de su espacio de trabajo.',
         sizeExceeded: ({maxUploadSizeInMB}: SizeExceededParams) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB}MB.`,
         resolutionConstraints: ({minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx}: ResolutionConstraintsParams) =>
@@ -585,6 +587,7 @@ export default {
         online: 'En línea',
         offline: 'Desconectado',
         syncing: 'Sincronizando',
+        profileAvatar: 'Perfil avatar',
     },
     loungeAccessPage: {
         loungeAccess: 'Acceso a la sala vip',
@@ -1331,6 +1334,7 @@ export default {
             memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro al espacio de trabajo, por favor, utiliza el botón Invitar que está arriba.',
             notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda añadirte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}: GoToRoomParams) => `Ir a la sala ${roomName}`,
+            workspaceAvatar: 'Espacio de trabajo avatar',
         },
         emptyWorkspace: {
             title: 'Crear un nuevo espacio de trabajo',
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index 87c77e722a5c..93b46f2e53da 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -421,6 +421,7 @@ function updateWorkspaceAvatar(policyID, file) {
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
             value: {
                 avatar: file.uri,
+                originalFileName: file.name,
                 errorFields: {
                     avatar: null,
                 },
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index b0cbe7c9cc32..1864ba60524c 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -65,6 +65,8 @@ function ProfilePage(props) {
     };
     const currentUserDetails = props.currentUserPersonalDetails || {};
     const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList);
+    const avatarURL = lodashGet(currentUserDetails, 'avatar', '');
+    const accountID = lodashGet(currentUserDetails, 'accountID', '');
     const emojiCode = lodashGet(props, 'currentUserPersonalDetails.status.emojiCode', '');
 
     const profileSettingsOptions = [
@@ -113,7 +115,7 @@ function ProfilePage(props) {
             <ScrollView>
                 <AvatarWithImagePicker
                     isUsingDefaultAvatar={UserUtils.isDefaultAvatar(lodashGet(currentUserDetails, 'avatar', ''))}
-                    source={UserUtils.getAvatar(lodashGet(currentUserDetails, 'avatar', ''), lodashGet(currentUserDetails, 'accountID', ''))}
+                    source={UserUtils.getAvatar(avatarURL, accountID)}
                     onImageSelected={PersonalDetails.updateAvatar}
                     onImageRemoved={PersonalDetails.deleteAvatar}
                     anchorPosition={styles.createMenuPositionProfile(props.windowWidth)}
@@ -123,6 +125,9 @@ function ProfilePage(props) {
                     errors={lodashGet(props.currentUserPersonalDetails, 'errorFields.avatar', null)}
                     errorRowStyles={[styles.mt6]}
                     onErrorClose={PersonalDetails.clearAvatarErrors}
+                    previewSource={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
+                    originalFileName={currentUserDetails.originalFileName}
+                    headerTitle={props.translate('profilePage.profileAvatar')}
                     style={[styles.mh5]}
                 />
                 <View style={[styles.mt4]}>
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 7aff9093c4dd..2a9576d5d8d3 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -20,6 +20,7 @@ import {withNetwork} from '../../components/OnyxProvider';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import Form from '../../components/Form';
 import * as ReportUtils from '../../libs/ReportUtils';
+import * as UserUtils from '../../libs/UserUtils';
 import Avatar from '../../components/Avatar';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
@@ -125,6 +126,9 @@ function WorkspaceSettingsPage(props) {
                         pendingAction={lodashGet(props.policy, 'pendingFields.avatar', null)}
                         errors={lodashGet(props.policy, 'errorFields.avatar', null)}
                         onErrorClose={() => Policy.clearAvatarErrors(props.policy.id)}
+                        previewSource={UserUtils.getFullSizeAvatar(props.policy.avatar, '')}
+                        headerTitle={props.translate('workspace.common.workspaceAvatar')}
+                        originalFileName={props.policy.originalFileName}
                     />
                     <OfflineWithFeedback pendingAction={lodashGet(props.policy, 'pendingFields.generalSettings')}>
                         <TextInput
