diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 665123852b77..46d693a507dd 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -71,6 +71,9 @@ const propTypes = {
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
+
+    /** Denotes whether it is a workspace avatar or not */
+    isWorkspaceAvatar: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -86,6 +89,7 @@ const defaultProps = {
     onModalShow: () => {},
     onModalHide: () => {},
     onCarouselAttachmentChange: () => {},
+    isWorkspaceAvatar: false,
 };
 
 function AttachmentModal(props) {
@@ -345,6 +349,7 @@ function AttachmentModal(props) {
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 file={file}
                                 onToggleKeyboard={updateConfirmButtonVisibility}
+                                isWorkspaceAvatar={props.isWorkspaceAvatar}
                             />
                         )
                     )}
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 3ad643d34bcd..47353d915060 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -15,7 +15,7 @@ import variables from '../../../styles/variables';
 import AttachmentViewImage from './AttachmentViewImage';
 import AttachmentViewPdf from './AttachmentViewPdf';
 import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';
-
+import * as StyleUtils from '../../../styles/StyleUtils';
 import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
 
 const propTypes = {
@@ -34,6 +34,9 @@ const propTypes = {
     /** Extra styles to pass to View wrapper */
     // eslint-disable-next-line react/forbid-prop-types
     containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Denotes whether it is a workspace avatar or not */
+    isWorkspaceAvatar: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -42,6 +45,7 @@ const defaultProps = {
     shouldShowLoadingSpinnerIcon: false,
     onToggleKeyboard: () => {},
     containerStyles: [],
+    isWorkspaceAvatar: false,
 };
 
 function AttachmentView({
@@ -57,16 +61,27 @@ function AttachmentView({
     onToggleKeyboard,
     translate,
     isFocused,
+    isWorkspaceAvatar,
 }) {
     const [loadComplete, setLoadComplete] = useState(false);
 
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(source)) {
+        let iconFillColor = '';
+        let additionalStyles = [];
+        if (isWorkspaceAvatar) {
+            const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
+            iconFillColor = defaultWorkspaceAvatarColor.fill;
+            additionalStyles = [defaultWorkspaceAvatarColor];
+        }
+
         return (
             <Icon
                 src={source}
                 height={variables.defaultAvatarPreviewSize}
                 width={variables.defaultAvatarPreviewSize}
+                fill={iconFillColor}
+                additionalStyles={additionalStyles}
             />
         );
     }
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 6f78e6ace66d..af594dc2415a 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -9,6 +9,9 @@ import Avatar from './Avatar';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import avatarPropTypes from './avatarPropTypes';
+import PressableWithoutFocus from './Pressable/PressableWithoutFocus';
+import * as UserUtils from '../libs/UserUtils';
+import AttachmentModal from './AttachmentModal';
 
 const propTypes = {
     icons: PropTypes.arrayOf(avatarPropTypes),
@@ -25,14 +28,31 @@ function RoomHeaderAvatars(props) {
 
     if (props.icons.length === 1) {
         return (
-            <Avatar
-                source={props.icons[0].source}
-                imageStyles={[styles.avatarLarge]}
-                fill={themeColors.iconSuccessFill}
-                size={CONST.AVATAR_SIZE.LARGE}
-                name={props.icons[0].name}
-                type={props.icons[0].type}
-            />
+            <AttachmentModal
+                headerTitle={props.icons[0].name}
+                source={UserUtils.getFullSizeAvatar(props.icons[0].source, props.icons[0].id)}
+                isAuthTokenRequired
+                isWorkspaceAvatar={props.icons[0].type === CONST.ICON_TYPE_WORKSPACE}
+                originalFileName={props.icons[0].name}
+            >
+                {({show}) => (
+                    <PressableWithoutFocus
+                        style={[styles.noOutline]}
+                        onPress={show}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                        accessibilityLabel={props.icons[0].name}
+                    >
+                        <Avatar
+                            source={props.icons[0].source}
+                            imageStyles={[styles.avatarLarge]}
+                            fill={themeColors.iconSuccessFill}
+                            size={CONST.AVATAR_SIZE.LARGE}
+                            name={props.icons[0].name}
+                            type={props.icons[0].type}
+                        />
+                    </PressableWithoutFocus>
+                )}
+            </AttachmentModal>
         );
     }
 
@@ -45,27 +65,45 @@ function RoomHeaderAvatars(props) {
         StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
     ];
     return (
-        <View pointerEvents="none">
+        <View pointerEvents="box-none">
             <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
                 {_.map(iconsToDisplay, (icon, index) => (
                     <View
                         key={`${icon.source}${index}`}
                         style={[styles.justifyContentCenter, styles.alignItemsCenter]}
                     >
-                        <Avatar
-                            source={icon.source}
-                            fill={themeColors.iconSuccessFill}
-                            size={CONST.AVATAR_SIZE.LARGE}
-                            containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
-                            name={icon.name}
-                            type={icon.type}
-                        />
+                        <AttachmentModal
+                            headerTitle={icon.name}
+                            source={UserUtils.getFullSizeAvatar(icon.source, icon.id)}
+                            isAuthTokenRequired
+                            originalFileName={icon.name}
+                            isWorkspaceAvatar={icon.type === CONST.ICON_TYPE_WORKSPACE}
+                        >
+                            {({show}) => (
+                                <PressableWithoutFocus
+                                    style={[styles.mln4, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
+                                    onPress={show}
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                                    accessibilityLabel={icon.name}
+                                >
+                                    <Avatar
+                                        source={icon.source}
+                                        fill={themeColors.iconSuccessFill}
+                                        size={CONST.AVATAR_SIZE.LARGE}
+                                        containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
+                                        name={icon.name}
+                                        type={icon.type}
+                                    />
+                                </PressableWithoutFocus>
+                            )}
+                        </AttachmentModal>
                         {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
                             <>
                                 <View
                                     style={[
                                         styles.roomHeaderAvatarSize,
                                         styles.roomHeaderAvatar,
+                                        styles.mln4,
                                         ...iconStyle,
                                         StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type),
                                         styles.roomHeaderAvatarOverlay,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 581410e0e5a5..174662ed1d29 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2358,7 +2358,6 @@ const styles = {
 
     roomHeaderAvatar: {
         backgroundColor: themeColors.appBG,
-        marginLeft: -16,
         borderRadius: 100,
         borderColor: themeColors.componentBG,
         borderWidth: 4,
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index a77ede807794..4adb7e79a9ff 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -133,6 +133,10 @@ export default {
         marginLeft: 16,
     },
 
+    mln4: {
+        marginLeft: -16,
+    },
+
     ml5: {
         marginLeft: 20,
     },