diff --git a/src/CONST.ts b/src/CONST.ts
index 416a523141bc..f59241b94974 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1103,6 +1103,7 @@ const CONST = {
         MODAL_TYPE: {
             CONFIRM: 'confirm',
             CENTERED: 'centered',
+            CENTERED_SWIPABLE_TO_RIGHT: 'centered_swipable_to_right',
             CENTERED_UNSWIPEABLE: 'centered_unswipeable',
             CENTERED_SMALL: 'centered_small',
             BOTTOM_DOCKED: 'bottom_docked',
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 12da8a894282..3a78cf66eb58 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -35,7 +35,11 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     const showModal = () => {
         const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
-        const isFullScreenModal = type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
+        const isFullScreenModal =
+            type === CONST.MODAL.MODAL_TYPE.CENTERED ||
+            type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE ||
+            type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED ||
+            CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT;
 
         if (statusBarColor) {
             setPreviousStatusBarColor(statusBarColor);
diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx
index 2626b8565e2a..356dcb70f199 100644
--- a/src/components/Search/SearchRouter/SearchRouterModal.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -11,7 +11,7 @@ function SearchRouterModal() {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
 
-    const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
+    const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT : CONST.MODAL.MODAL_TYPE.POPOVER;
 
     return (
         <Modal
@@ -19,6 +19,7 @@ function SearchRouterModal() {
             isVisible={isSearchRouterDisplayed}
             popoverAnchorPosition={{right: 6, top: 6}}
             fullscreen
+            propagateSwipe
             shouldHandleNavigationBack={Browser.isMobileChrome()}
             onClose={closeSearchRouter}
         >
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
index 7f51b7727d6a..4b5ce5b28988 100644
--- a/src/styles/utils/generators/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -116,6 +116,36 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 shouldAddTopSafeAreaPadding = isSmallScreenWidth;
                 shouldAddBottomSafeAreaPadding = false;
                 break;
+            case CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT:
+                // A centered modal is one that has a visible backdrop
+                // and can be dismissed by clicking outside of the modal.
+                // This modal should take up the entire visible area when
+                // viewed on a smaller device (e.g. mobile or mobile web).
+                modalStyle = {
+                    ...modalStyle,
+                    ...{
+                        alignItems: 'center',
+                    },
+                };
+                modalContainerStyle = {
+                    boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
+                    flex: 1,
+                    marginTop: isSmallScreenWidth ? 0 : 20,
+                    marginBottom: isSmallScreenWidth ? 0 : 20,
+                    borderRadius: isSmallScreenWidth ? 0 : variables.componentBorderRadiusLarge,
+                    overflow: 'hidden',
+                    ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth),
+                };
+
+                // Allow this modal to be dismissed with a swipe to the right, required when we want to have a list in centered modal
+                swipeDirection = ['right'];
+                animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
+                animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
+                shouldAddTopSafeAreaMargin = !isSmallScreenWidth;
+                shouldAddBottomSafeAreaMargin = !isSmallScreenWidth;
+                shouldAddTopSafeAreaPadding = isSmallScreenWidth;
+                shouldAddBottomSafeAreaPadding = false;
+                break;
             case CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE:
                 // A centered modal that cannot be dismissed with a swipe.
                 modalStyle = {