diff --git a/src/CONST.js b/src/CONST.js
index f006b8f2f49f..9c09ce446770 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -28,6 +28,7 @@ const CONST = {
     ANIMATED_TRANSITION: 300,
     ANIMATED_TRANSITION_FROM_VALUE: 100,
     ANIMATION_IN_TIMING: 100,
+    ARROW_HIDE_DELAY: 3000,
 
     API_ATTACHMENT_VALIDATIONS: {
         // Same as the PHP layer allows
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index c1c8fd85145f..11f48b12d9ae 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -19,6 +19,7 @@ import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
 import Tooltip from '../Tooltip';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
+import withWindowDimensions from '../withWindowDimensions';
 
 const propTypes = {
     /** source is used to determine the starting index in the array of attachments */
@@ -52,6 +53,8 @@ class AttachmentCarousel extends React.Component {
         };
 
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
+        this.autoHideArrow = this.autoHideArrow.bind(this);
+        this.cancelAutoHideArrow = this.cancelAutoHideArrow.bind(this);
         this.getItemLayout = this.getItemLayout.bind(this);
         this.renderItem = this.renderItem.bind(this);
         this.renderCell = this.renderCell.bind(this);
@@ -70,6 +73,7 @@ class AttachmentCarousel extends React.Component {
 
     componentDidMount() {
         this.makeStateWithReports();
+        this.autoHideArrow();
     }
 
     componentDidUpdate(prevProps) {
@@ -111,6 +115,27 @@ class AttachmentCarousel extends React.Component {
         });
     }
 
+    /**
+     * On a touch screen device, automatically hide the arrows
+     * if there is no interaction for 3 seconds.
+     */
+    autoHideArrow() {
+        if (!this.canUseTouchScreen) {
+            return;
+        }
+        this.cancelAutoHideArrow();
+        this.autoHideArrowTimeout = setTimeout(() => {
+            this.toggleArrowsVisibility(false);
+        }, CONST.ARROW_HIDE_DELAY);
+    }
+
+    /**
+     * Cancels the automatic hiding of the arrows.
+     */
+    cancelAutoHideArrow() {
+        clearTimeout(this.autoHideArrowTimeout);
+    }
+
     /**
      * Toggles the visibility of the arrows
      * @param {Boolean} shouldShowArrow
@@ -120,11 +145,16 @@ class AttachmentCarousel extends React.Component {
         if (this.state.isZoomed) {
             return;
         }
-        if (_.isBoolean(shouldShowArrow)) {
-            this.setState({shouldShowArrow});
-            return;
-        }
-        this.setState(current => ({shouldShowArrow: !current.shouldShowArrow}));
+        this.setState((current) => {
+            const newShouldShowArrow = _.isBoolean(shouldShowArrow) ? shouldShowArrow : !current.shouldShowArrow;
+            return {shouldShowArrow: newShouldShowArrow};
+        }, () => {
+            if (this.state.shouldShowArrow) {
+                this.autoHideArrow();
+            } else {
+                this.cancelAutoHideArrow();
+            }
+        });
     }
 
     /**
@@ -257,35 +287,55 @@ class AttachmentCarousel extends React.Component {
             <View
                 style={[styles.attachmentModalArrowsContainer, styles.flex1]}
                 onLayout={({nativeEvent}) => this.setState({containerWidth: nativeEvent.layout.width + 1})}
-                onMouseEnter={() => this.toggleArrowsVisibility(true)}
-                onMouseLeave={() => this.toggleArrowsVisibility(false)}
+                onMouseEnter={() => !this.canUseTouchScreen && this.toggleArrowsVisibility(true)}
+                onMouseLeave={() => !this.canUseTouchScreen && this.toggleArrowsVisibility(false)}
             >
                 {this.state.shouldShowArrow && (
                     <>
                         {!isBackDisabled && (
-                            <View style={styles.leftAttachmentArrow}>
+                            <View
+                                style={[
+                                    styles.attachmentArrow,
+                                    this.props.isSmallScreenWidth ? styles.l2 : styles.l8,
+                                ]}
+                            >
                                 <Tooltip text={this.props.translate('common.previous')}>
                                     <Button
-                                        medium
+                                        small
                                         innerStyles={[styles.arrowIcon]}
                                         icon={Expensicons.BackArrow}
                                         iconFill={themeColors.text}
                                         iconStyles={[styles.mr0]}
-                                        onPress={() => this.cycleThroughAttachments(-1)}
+                                        onPress={() => {
+                                            this.cycleThroughAttachments(-1);
+                                            this.autoHideArrow();
+                                        }}
+                                        onPressIn={this.cancelAutoHideArrow}
+                                        onPressOut={this.autoHideArrow}
                                     />
                                 </Tooltip>
                             </View>
                         )}
                         {!isForwardDisabled && (
-                            <View style={styles.rightAttachmentArrow}>
+                            <View
+                                style={[
+                                    styles.attachmentArrow,
+                                    this.props.isSmallScreenWidth ? styles.r2 : styles.r8,
+                                ]}
+                            >
                                 <Tooltip text={this.props.translate('common.next')}>
                                     <Button
-                                        medium
+                                        small
                                         innerStyles={[styles.arrowIcon]}
                                         icon={Expensicons.ArrowRight}
                                         iconFill={themeColors.text}
                                         iconStyles={[styles.mr0]}
-                                        onPress={() => this.cycleThroughAttachments(1)}
+                                        onPress={() => {
+                                            this.cycleThroughAttachments(1);
+                                            this.autoHideArrow();
+                                        }}
+                                        onPressIn={this.cancelAutoHideArrow}
+                                        onPressOut={this.autoHideArrow}
                                     />
                                 </Tooltip>
                             </View>
@@ -350,4 +400,5 @@ export default compose(
         },
     }),
     withLocalize,
+    withWindowDimensions,
 )(AttachmentCarousel);
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 3a5914375393..fd525ee2dd1f 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -201,7 +201,7 @@ const MenuItem = (props) => {
                             </View>
                         )}
                         {Boolean(props.brickRoadIndicator) && (
-                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.l4]}>
+                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.l1]}>
                                 <Icon
                                     src={Expensicons.DotIndicator}
                                     fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index f6c0dca5a726..d024892e5196 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2238,21 +2238,18 @@ const styles = {
         width: '100%',
     },
 
-    leftAttachmentArrow: {
+    attachmentArrow: {
         zIndex: 23,
         position: 'absolute',
-        left: 32,
-    },
-
-    rightAttachmentArrow: {
-        zIndex: 23,
-        position: 'absolute',
-        right: 32,
     },
 
     arrowIcon: {
-        height: 52,
-        width: 52,
+        height: 40,
+        width: 40,
+        alignItems: 'center',
+        paddingHorizontal: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
     },
 
     detailsPageSectionVersion: {
diff --git a/src/styles/utilities/positioning.js b/src/styles/utilities/positioning.js
index c893f3c697b7..7fca910835f8 100644
--- a/src/styles/utilities/positioning.js
+++ b/src/styles/utilities/positioning.js
@@ -21,15 +21,27 @@ export default {
     l0: {
         left: 0,
     },
-    l4: {
+    l1: {
         left: 4,
     },
+    l2: {
+        left: 8,
+    },
+    l8: {
+        left: 32,
+    },
     r0: {
         right: 0,
     },
+    r2: {
+        right: 8,
+    },
     r4: {
         right: 16,
     },
+    r8: {
+        right: 32,
+    },
     b0: {
         bottom: 0,
     },