diff --git a/src/components/CardOverlay.js b/src/components/CardOverlay.js
new file mode 100644
index 000000000000..2b41472a05dc
--- /dev/null
+++ b/src/components/CardOverlay.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../styles/styles';
+
+const CardOverlay = () => <View style={styles.cardOverlay} />;
+
+export default CardOverlay;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index f4f1379628d3..45f6077b922d 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -65,6 +65,8 @@ import Timers from '../../Timers';
 import ValidateLoginNewWorkspacePage from '../../../pages/ValidateLoginNewWorkspacePage';
 import ValidateLogin2FANewWorkspacePage from '../../../pages/ValidateLogin2FANewWorkspacePage';
 import WorkspaceSettingsDrawerNavigator from './WorkspaceSettingsDrawerNavigator';
+import spacing from '../../../styles/utilities/spacing';
+import CardOverlay from '../../../components/CardOverlay';
 import defaultScreenOptions from './defaultScreenOptions';
 
 Onyx.connect({
@@ -253,10 +255,14 @@ class AuthScreens extends React.Component {
         };
         const fullscreenModalScreenOptions = {
             ...commonModalScreenOptions,
-            cardStyle: {...styles.fullscreenCard},
+            cardStyle: {
+                ...styles.fullscreenCard,
+                padding: this.props.isSmallScreenWidth ? spacing.p0.padding : spacing.p5.padding,
+            },
             cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, true, props),
-            cardOverlayEnabled: false,
+            cardOverlayEnabled: !this.props.isSmallScreenWidth,
             isFullScreenModal: true,
+            cardOverlay: CardOverlay,
         };
 
         return (
@@ -279,6 +285,7 @@ class AuthScreens extends React.Component {
                         // prevent unnecessary scrolling
                         cardStyle: {
                             overflow: 'hidden',
+                            height: '100%',
                         },
                     }}
                     component={MainDrawerNavigator}
diff --git a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js
index e794db66960e..5a6d277b1953 100644
--- a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js
+++ b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js
@@ -2,6 +2,7 @@ import React from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {createDrawerNavigator} from '@react-navigation/drawer';
+import {View} from 'react-native';
 import styles, {getNavigationDrawerStyle, getNavigationDrawerType} from '../../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
@@ -22,38 +23,51 @@ const propTypes = {
     /** Drawer content Component */
     drawerContent: PropTypes.elementType.isRequired,
 
+    /** If it's the main screen, don't wrap the content even if it's a full screen modal. */
+    isMainScreen: PropTypes.bool,
+
     /** Window Dimensions props */
     ...windowDimensionsPropTypes,
 };
 const Drawer = createDrawerNavigator();
 
-const BaseDrawerNavigator = props => (
-    <Drawer.Navigator
-        defaultStatus={props.isSmallScreenWidth ? 'open' : 'closed'}
-        sceneContainerStyle={styles.navigationSceneContainer}
-        drawerContent={props.drawerContent}
-        screenOptions={{
-            cardStyle: styles.navigationScreenCardStyle,
-            headerShown: false,
-            drawerType: getNavigationDrawerType(props.isSmallScreenWidth),
-            drawerStyle: getNavigationDrawerStyle(
-                props.windowWidth,
-                props.windowHeight,
-                props.isSmallScreenWidth,
-            ),
-            swipeEdgeWidth: 500,
-        }}
-    >
-        {_.map(props.screens, screen => (
-            <Drawer.Screen
-                key={screen.name}
-                name={screen.name}
-                component={screen.component}
-                initialParams={screen.initialParams}
-            />
-        ))}
-    </Drawer.Navigator>
-);
+const BaseDrawerNavigator = (props) => {
+    const content = (
+        <Drawer.Navigator
+            defaultStatus={props.isSmallScreenWidth ? 'open' : 'closed'}
+            sceneContainerStyle={styles.navigationSceneContainer}
+            drawerContent={props.drawerContent}
+            screenOptions={{
+                cardStyle: styles.navigationScreenCardStyle,
+                headerShown: false,
+                drawerType: getNavigationDrawerType(props.isSmallScreenWidth),
+                drawerStyle: getNavigationDrawerStyle(
+                    props.isSmallScreenWidth,
+                ),
+                swipeEdgeWidth: 500,
+            }}
+        >
+            {_.map(props.screens, screen => (
+                <Drawer.Screen
+                    key={screen.name}
+                    name={screen.name}
+                    component={screen.component}
+                    initialParams={screen.initialParams}
+                />
+            ))}
+        </Drawer.Navigator>
+    );
+
+    if (!props.isMainScreen && !props.isSmallScreenWidth) {
+        return (
+            <View style={styles.navigationSceneFullScreenWrapper}>
+                {content}
+            </View>
+        );
+    }
+
+    return content;
+};
 
 BaseDrawerNavigator.propTypes = propTypes;
 BaseDrawerNavigator.displayName = 'BaseDrawerNavigator';
diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
index de10b3fc9364..382aad6fef84 100644
--- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
+++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
@@ -54,6 +54,7 @@ const MainDrawerNavigator = (props) => {
                     initialParams,
                 },
             ]}
+            isMainScreen
         />
     );
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 31d8103e433f..9c50974a4107 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1551,6 +1551,12 @@ const styles = {
         height: '100%',
     },
 
+    navigationSceneFullScreenWrapper: {
+        borderRadius: variables.componentBorderRadiusCard,
+        overflow: 'hidden',
+        height: '100%',
+    },
+
     invisible: {
         position: 'absolute',
         opacity: 0,
@@ -1855,6 +1861,22 @@ const styles = {
         ...whiteSpace.noWrap,
     },
 
+    cardOverlay: {
+        backgroundColor: themeColors.modalBackdrop,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        opacity: 0.5,
+    },
+
+    communicationsLinkIcon: {
+        right: -36,
+        top: 0,
+        bottom: 0,
+    },
+
     shortTermsRow: {
         flexDirection: 'row',
         padding: 12,
@@ -1999,20 +2021,18 @@ function getSafeAreaMargins(insets) {
 /**
  * Return navigation menu styles.
  *
- * @param {Number} windowWidth
- * @param {Number} windowHeight
  * @param {Boolean} isSmallScreenWidth
  * @returns {Object}
  */
-function getNavigationDrawerStyle(windowWidth, windowHeight, isSmallScreenWidth) {
+function getNavigationDrawerStyle(isSmallScreenWidth) {
     return isSmallScreenWidth
         ? {
-            width: windowWidth,
-            height: windowHeight,
+            width: '100%',
+            height: '100%',
             borderColor: themeColors.border,
         }
         : {
-            height: windowHeight,
+            height: '100%',
             width: variables.sideBarWidth,
             borderRightColor: themeColors.border,
         };