diff --git a/src/App.tsx b/src/App.tsx
index 3513cb23953b..2c47aacbf187 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,7 +38,7 @@ import {CurrentReportIDContextProvider} from './hooks/useCurrentReportID';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import {ReportIDsContextProvider} from './hooks/useReportIDs';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
-import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
+import {AttachmentModalProvider} from './pages/media/AttachmentModalScreen/AttachmentModalContext';
 import type {Route} from './ROUTES';
 import './setup/backgroundTask';
 import {SplashScreenStateContextProvider} from './SplashScreenStateContext';
@@ -85,7 +85,7 @@ function App({url}: AppProps) {
                                 PopoverContextProvider,
                                 CurrentReportIDContextProvider,
                                 ScrollOffsetContextProvider,
-                                ReportAttachmentsProvider,
+                                AttachmentModalProvider,
                                 PickerStateProvider,
                                 EnvironmentProvider,
                                 CustomStatusBarAndBackgroundContextProvider,
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index b01ecf9058b7..0072cfe8383d 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -353,22 +353,42 @@ const ROUTES = {
     },
     ATTACHMENTS: {
         route: 'attachment',
-        getRoute: (
-            reportID: string | undefined,
-            type: ValueOf<typeof CONST.ATTACHMENT_TYPE>,
-            url: string,
-            accountID?: number,
-            isAuthTokenRequired?: boolean,
-            fileName?: string,
-            attachmentLink?: string,
-        ) => {
-            const reportParam = reportID ? `&reportID=${reportID}` : '';
-            const accountParam = accountID ? `&accountID=${accountID}` : '';
+        getRoute: ({
+            fileName,
+            reportID,
+            type,
+            accountID,
+            isAuthTokenRequired,
+            attachmentLink,
+            ...restParams
+        }: {
+            type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
+            reportID?: string | number;
+            accountID?: number;
+            isAuthTokenRequired?: boolean;
+            fileName?: string;
+            attachmentLink?: string;
+        } & (
+            | {
+                  attachmentId: string;
+              }
+            | {
+                  source: string;
+              }
+        )) => {
+            if ('attachmentId' in restParams) {
+                return `attachment?attachmentId=${encodeURIComponent(restParams.attachmentId)}` as const;
+            }
+
+            const sourceParam = `?source=${encodeURIComponent(restParams.source)}`;
+            const typeParam = type ? `&type=${type as string}` : '';
+            const reportIDParam = reportID ? `&reportID=${reportID}` : '';
+            const accountIDParam = accountID ? `&accountID=${accountID}` : '';
             const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
             const fileNameParam = fileName ? `&fileName=${fileName}` : '';
             const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
 
-            return `attachment?source=${encodeURIComponent(url)}&type=${type as string}${reportParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
+            return `attachment${sourceParam}${typeParam}${reportIDParam}${accountIDParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
         },
     },
     REPORT_PARTICIPANTS: {
@@ -389,7 +409,7 @@ const ROUTES = {
     },
     REPORT_WITH_ID_DETAILS: {
         route: 'r/:reportID/details',
-        getRoute: (reportID: string | undefined, backTo?: string) => {
+        getRoute: (reportID: string | number | undefined, backTo?: string) => {
             if (!reportID) {
                 Log.warn('Invalid reportID is used to build the REPORT_WITH_ID_DETAILS route');
             }
diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
deleted file mode 100644
index 4286c6c834eb..000000000000
--- a/src/components/AttachmentModal.tsx
+++ /dev/null
@@ -1,659 +0,0 @@
-import {Str} from 'expensify-common';
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Keyboard, View} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {useOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
-import Animated, {FadeIn, useSharedValue} from 'react-native-reanimated';
-import type {ValueOf} from 'type-fest';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
-import attachmentModalHandler from '@libs/AttachmentModalHandler';
-import fileDownload from '@libs/fileDownload';
-import {cleanFileName, getFileName, validateImageForCorruption} from '@libs/fileDownload/FileUtils';
-import Navigation from '@libs/Navigation/Navigation';
-import {getOriginalMessage, getReportAction, isMoneyRequestAction} from '@libs/ReportActionsUtils';
-import {hasEReceipt, hasMissingSmartscanFields, hasReceipt, hasReceiptSource, isReceiptBeingScanned} from '@libs/TransactionUtils';
-import type {AvatarSource} from '@libs/UserUtils';
-import variables from '@styles/variables';
-import {detachReceipt} from '@userActions/IOU';
-import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type ModalType from '@src/types/utils/ModalType';
-import viewRef from '@src/types/utils/viewRef';
-import AttachmentCarousel from './Attachments/AttachmentCarousel';
-import AttachmentCarouselPagerContext from './Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
-import AttachmentView from './Attachments/AttachmentView';
-import type {Attachment} from './Attachments/types';
-import BlockingView from './BlockingViews/BlockingView';
-import Button from './Button';
-import ConfirmModal from './ConfirmModal';
-import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
-import HeaderGap from './HeaderGap';
-import HeaderWithBackButton from './HeaderWithBackButton';
-import * as Expensicons from './Icon/Expensicons';
-import * as Illustrations from './Icon/Illustrations';
-import Modal from './Modal';
-import SafeAreaConsumer from './SafeAreaConsumer';
-
-/**
- * Modal render prop component that exposes modal launching triggers that can be used
- * to display a full size image or PDF modally with optional confirmation button.
- */
-
-type ImagePickerResponse = {
-    height?: number;
-    name: string;
-    size?: number | null;
-    type: string;
-    uri: string;
-    width?: number;
-};
-
-type FileObject = Partial<File | ImagePickerResponse>;
-
-type ChildrenProps = {
-    displayFileInModal: (data: FileObject) => void;
-    show: () => void;
-};
-
-type AttachmentModalProps = {
-    /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */
-    source?: AvatarSource;
-
-    /** Optional callback to fire when we want to preview an image and approve it for use. */
-    onConfirm?: ((file: FileObject) => void) | null;
-
-    /** Whether the modal should be open by default */
-    defaultOpen?: boolean;
-
-    /** Trigger when we explicity click close button in ProfileAttachment modal */
-    onModalClose?: () => void;
-
-    /** Optional original filename when uploading */
-    originalFileName?: string;
-
-    /** Whether source url requires authentication */
-    isAuthTokenRequired?: boolean;
-
-    /** Determines if download Button should be shown or not */
-    allowDownload?: boolean;
-
-    /** Determines if the receipt comes from track expense action */
-    isTrackExpenseAction?: boolean;
-
-    /** Title shown in the header of the modal */
-    headerTitle?: string;
-
-    /** The report that has this attachment */
-    report?: OnyxEntry<OnyxTypes.Report>;
-
-    /** The type of the attachment */
-    type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
-
-    /** If the attachment originates from a note, the accountID will represent the author of that note. */
-    accountID?: number;
-
-    /** Optional callback to fire when we want to do something after modal show. */
-    onModalShow?: () => void;
-
-    /** Optional callback to fire when we want to do something after modal hide. */
-    onModalHide?: () => void;
-
-    /** The data is loading or not */
-    isLoading?: boolean;
-
-    /** Should display not found page or not */
-    shouldShowNotFoundPage?: boolean;
-
-    /** Optional callback to fire when we want to do something after attachment carousel changes. */
-    onCarouselAttachmentChange?: (attachment: Attachment) => void;
-
-    /** Denotes whether it is a workspace avatar or not */
-    isWorkspaceAvatar?: boolean;
-
-    /** Denotes whether it can be an icon (ex: SVG) */
-    maybeIcon?: boolean;
-
-    /** Whether it is a receipt attachment or not */
-    isReceiptAttachment?: boolean;
-
-    /** A function as a child to pass modal launching methods to */
-    children?: React.FC<ChildrenProps>;
-
-    fallbackSource?: AvatarSource;
-
-    canEditReceipt?: boolean;
-
-    canDeleteReceipt?: boolean;
-
-    shouldDisableSendButton?: boolean;
-
-    attachmentLink?: string;
-};
-
-function AttachmentModal({
-    source = '',
-    onConfirm,
-    defaultOpen = false,
-    originalFileName = '',
-    isAuthTokenRequired = false,
-    allowDownload = false,
-    isTrackExpenseAction = false,
-    report,
-    onModalShow = () => {},
-    onModalHide = () => {},
-    onCarouselAttachmentChange = () => {},
-    isReceiptAttachment = false,
-    isWorkspaceAvatar = false,
-    maybeIcon = false,
-    headerTitle,
-    children,
-    fallbackSource,
-    canEditReceipt = false,
-    canDeleteReceipt = false,
-    onModalClose = () => {},
-    isLoading = false,
-    shouldShowNotFoundPage = false,
-    type = undefined,
-    accountID = undefined,
-    shouldDisableSendButton = false,
-    attachmentLink = '',
-}: AttachmentModalProps) {
-    const styles = useThemeStyles();
-    const [isModalOpen, setIsModalOpen] = useState(defaultOpen);
-    const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
-    const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
-    const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
-    const [isAuthTokenRequiredState, setIsAuthTokenRequiredState] = useState(isAuthTokenRequired);
-    const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState<TranslationPaths | null>(null);
-    const [attachmentInvalidReason, setAttachmentInvalidReason] = useState<TranslationPaths | null>(null);
-    const [sourceState, setSourceState] = useState<AvatarSource>(() => source);
-    const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
-    const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
-    const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
-    const isPDFLoadError = useRef(false);
-    const {windowWidth} = useWindowDimensions();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const nope = useSharedValue(false);
-    const isOverlayModalVisible = (isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!isReceiptAttachment && isAttachmentInvalid);
-    const iouType = useMemo(() => (isTrackExpenseAction ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT), [isTrackExpenseAction]);
-    const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const transactionID = (isMoneyRequestAction(parentReportAction) && getOriginalMessage(parentReportAction)?.IOUTransactionID) || CONST.DEFAULT_NUMBER_ID;
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
-    const [currentAttachmentLink, setCurrentAttachmentLink] = useState(attachmentLink);
-
-    const [file, setFile] = useState<FileObject | undefined>(
-        originalFileName
-            ? {
-                  name: originalFileName,
-              }
-            : undefined,
-    );
-    const {translate} = useLocalize();
-    const {isOffline} = useNetwork();
-
-    const isLocalSource = typeof sourceState === 'string' && /^file:|^blob:/.test(sourceState);
-
-    useEffect(() => {
-        setFile(originalFileName ? {name: originalFileName} : undefined);
-    }, [originalFileName]);
-
-    /**
-     * Keeps the attachment source in sync with the attachment displayed currently in the carousel.
-     */
-    const onNavigate = useCallback(
-        (attachment: Attachment) => {
-            setSourceState(attachment.source);
-            setFile(attachment.file);
-            setIsAuthTokenRequiredState(attachment.isAuthTokenRequired ?? false);
-            onCarouselAttachmentChange(attachment);
-            setCurrentAttachmentLink(attachment?.attachmentLink ?? '');
-        },
-        [onCarouselAttachmentChange],
-    );
-
-    /**
-     * If our attachment is a PDF, return the unswipeablge Modal type.
-     */
-    const getModalType = useCallback(
-        (sourceURL: string, fileObject: FileObject) =>
-            sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name ?? translate('attachmentView.unknownFilename'))))
-                ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
-                : CONST.MODAL.MODAL_TYPE.CENTERED,
-        [translate],
-    );
-
-    const setDownloadButtonVisibility = useCallback(
-        (isButtonVisible: boolean) => {
-            if (isDownloadButtonReadyToBeShown === isButtonVisible) {
-                return;
-            }
-            setIsDownloadButtonReadyToBeShown(isButtonVisible);
-        },
-        [isDownloadButtonReadyToBeShown],
-    );
-
-    /**
-     * Download the currently viewed attachment.
-     */
-    const downloadAttachment = useCallback(() => {
-        let sourceURL = sourceState;
-        if (isAuthTokenRequiredState && typeof sourceURL === 'string') {
-            sourceURL = addEncryptedAuthTokenToURL(sourceURL);
-        }
-
-        if (typeof sourceURL === 'string') {
-            const fileName = type === CONST.ATTACHMENT_TYPE.SEARCH ? getFileName(`${sourceURL}`) : file?.name;
-            fileDownload(sourceURL, fileName ?? '');
-        }
-
-        // At ios, if the keyboard is open while opening the attachment, then after downloading
-        // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
-        Keyboard.dismiss();
-    }, [isAuthTokenRequiredState, sourceState, file, type]);
-
-    /**
-     * Execute the onConfirm callback and close the modal.
-     */
-    const submitAndClose = useCallback(() => {
-        // If the modal has already been closed or the confirm button is disabled
-        // do not submit.
-        if (!isModalOpen || isConfirmButtonDisabled) {
-            return;
-        }
-
-        if (onConfirm) {
-            onConfirm(Object.assign(file ?? {}, {source: sourceState} as FileObject));
-        }
-
-        setIsModalOpen(false);
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isModalOpen, isConfirmButtonDisabled, onConfirm, file, sourceState]);
-
-    /**
-     * Close the confirm modals.
-     */
-    const closeConfirmModal = useCallback(() => {
-        setIsAttachmentInvalid(false);
-        setIsDeleteReceiptConfirmModalVisible(false);
-    }, []);
-
-    /**
-     * Detach the receipt and close the modal.
-     */
-    const deleteAndCloseModal = useCallback(() => {
-        detachReceipt(transaction?.transactionID);
-        setIsDeleteReceiptConfirmModalVisible(false);
-        Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID));
-    }, [transaction, report]);
-
-    const isValidFile = useCallback(
-        (fileObject: FileObject) =>
-            validateImageForCorruption(fileObject)
-                .then(() => {
-                    if (fileObject.size && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
-                        setIsAttachmentInvalid(true);
-                        setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge');
-                        setAttachmentInvalidReason('attachmentPicker.sizeExceeded');
-                        return false;
-                    }
-
-                    if (fileObject.size && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
-                        setIsAttachmentInvalid(true);
-                        setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall');
-                        setAttachmentInvalidReason('attachmentPicker.sizeNotMet');
-                        return false;
-                    }
-
-                    return true;
-                })
-                .catch(() => {
-                    setIsAttachmentInvalid(true);
-                    setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
-                    setAttachmentInvalidReason('attachmentPicker.errorWhileSelectingCorruptedAttachment');
-                    return false;
-                }),
-        [],
-    );
-
-    const isDirectoryCheck = useCallback((data: FileObject) => {
-        if ('webkitGetAsEntry' in data && (data as DataTransferItem).webkitGetAsEntry()?.isDirectory) {
-            setIsAttachmentInvalid(true);
-            setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
-            setAttachmentInvalidReason('attachmentPicker.folderNotAllowedMessage');
-            return false;
-        }
-        return true;
-    }, []);
-
-    const validateAndDisplayFileToUpload = useCallback(
-        (data: FileObject) => {
-            if (!data || !isDirectoryCheck(data)) {
-                return;
-            }
-            let fileObject = data;
-            if ('getAsFile' in data && typeof data.getAsFile === 'function') {
-                fileObject = data.getAsFile() as FileObject;
-            }
-            if (!fileObject) {
-                return;
-            }
-
-            isValidFile(fileObject).then((isValid) => {
-                if (!isValid) {
-                    return;
-                }
-                if (fileObject instanceof File) {
-                    /**
-                     * Cleaning file name, done here so that it covers all cases:
-                     * upload, drag and drop, copy-paste
-                     */
-                    let updatedFile = fileObject;
-                    const cleanName = cleanFileName(updatedFile.name);
-                    if (updatedFile.name !== cleanName) {
-                        updatedFile = new File([updatedFile], cleanName, {type: updatedFile.type});
-                    }
-                    const inputSource = URL.createObjectURL(updatedFile);
-                    updatedFile.uri = inputSource;
-                    const inputModalType = getModalType(inputSource, updatedFile);
-                    setIsModalOpen(true);
-                    setSourceState(inputSource);
-                    setFile(updatedFile);
-                    setModalType(inputModalType);
-                } else if (fileObject.uri) {
-                    const inputModalType = getModalType(fileObject.uri, fileObject);
-                    setIsModalOpen(true);
-                    setSourceState(fileObject.uri);
-                    setFile(fileObject);
-                    setModalType(inputModalType);
-                }
-            });
-        },
-        [isValidFile, getModalType, isDirectoryCheck],
-    );
-
-    /**
-     * Closes the modal.
-     * @param {boolean} [shouldCallDirectly] If true, directly calls `onModalClose`.
-     * This is useful when you plan to continue navigating to another page after closing the modal, to avoid freezing the app due to navigating to another page first and dismissing the modal later.
-     * If `shouldCallDirectly` is false or undefined, it calls `attachmentModalHandler.handleModalClose` to close the modal.
-     * This ensures smooth modal closing behavior without causing delays in closing.
-     */
-    const closeModal = useCallback(
-        (shouldCallDirectly?: boolean) => {
-            setIsModalOpen(false);
-
-            if (typeof onModalClose === 'function') {
-                if (shouldCallDirectly) {
-                    onModalClose();
-                    return;
-                }
-                attachmentModalHandler.handleModalClose(onModalClose);
-            }
-
-            // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-        },
-        [onModalClose],
-    );
-
-    /**
-     *  open the modal
-     */
-    const openModal = useCallback(() => {
-        setIsModalOpen(true);
-    }, []);
-
-    useEffect(() => {
-        setSourceState(() => source);
-    }, [source]);
-
-    useEffect(() => {
-        setIsAuthTokenRequiredState(isAuthTokenRequired);
-    }, [isAuthTokenRequired]);
-
-    const sourceForAttachmentView = sourceState || source;
-
-    const threeDotsMenuItems = useMemo(() => {
-        if (!isReceiptAttachment) {
-            return [];
-        }
-
-        const menuItems = [];
-        if (canEditReceipt) {
-            menuItems.push({
-                icon: Expensicons.Camera,
-                text: translate('common.replace'),
-                onSelected: () => {
-                    closeModal(true);
-                    Navigation.navigate(
-                        ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID, report?.reportID, Navigation.getActiveRouteWithoutParams()),
-                    );
-                },
-            });
-        }
-        if (!isOffline && allowDownload && !isLocalSource) {
-            menuItems.push({
-                icon: Expensicons.Download,
-                text: translate('common.download'),
-                onSelected: () => downloadAttachment(),
-            });
-        }
-
-        const hasOnlyEReceipt = hasEReceipt(transaction) && !hasReceiptSource(transaction);
-        if (!hasOnlyEReceipt && hasReceipt(transaction) && !isReceiptBeingScanned(transaction) && canDeleteReceipt && !hasMissingSmartscanFields(transaction)) {
-            menuItems.push({
-                icon: Expensicons.Trashcan,
-                text: translate('receipt.deleteReceipt'),
-                onSelected: () => {
-                    setIsDeleteReceiptConfirmModalVisible(true);
-                },
-                shouldCallAfterModalHide: true,
-            });
-        }
-        return menuItems;
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isReceiptAttachment, transaction, file, sourceState, iouType]);
-
-    // There are a few things that shouldn't be set until we absolutely know if the file is a receipt or an attachment.
-    // props.isReceiptAttachment will be null until its certain what the file is, in which case it will then be true|false.
-    let headerTitleNew = headerTitle;
-    let shouldShowDownloadButton = false;
-    let shouldShowThreeDotsButton = false;
-    if (!isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH) {
-        headerTitleNew = translate(isReceiptAttachment ? 'common.receipt' : 'common.attachment');
-        shouldShowDownloadButton = allowDownload && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isReceiptAttachment && !isOffline && !isLocalSource;
-        shouldShowThreeDotsButton = isReceiptAttachment && isModalOpen && threeDotsMenuItems.length !== 0;
-    }
-    const context = useMemo(
-        () => ({
-            pagerItems: [{source: sourceForAttachmentView, index: 0, isActive: true}],
-            activePage: 0,
-            pagerRef: undefined,
-            isPagerScrolling: nope,
-            isScrollEnabled: nope,
-            onTap: () => {},
-            onScaleChanged: () => {},
-            onSwipeDown: closeModal,
-        }),
-        [closeModal, nope, sourceForAttachmentView],
-    );
-
-    const submitRef = useRef<View | HTMLElement>(null);
-
-    return (
-        <>
-            <Modal
-                type={modalType}
-                onClose={isOverlayModalVisible ? closeConfirmModal : closeModal}
-                isVisible={isModalOpen}
-                onModalShow={() => {
-                    onModalShow();
-                    setShouldLoadAttachment(true);
-                }}
-                onModalHide={() => {
-                    if (!isPDFLoadError.current) {
-                        onModalHide();
-                    }
-                    setShouldLoadAttachment(false);
-                    if (isPDFLoadError.current) {
-                        setIsAttachmentInvalid(true);
-                        setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
-                        setAttachmentInvalidReason('attachmentPicker.errorWhileSelectingCorruptedAttachment');
-                    }
-                }}
-                propagateSwipe
-                initialFocus={() => {
-                    if (!submitRef.current) {
-                        return false;
-                    }
-                    return submitRef.current;
-                }}
-            >
-                <GestureHandlerRootView style={styles.flex1}>
-                    {shouldUseNarrowLayout && <HeaderGap />}
-                    <HeaderWithBackButton
-                        title={headerTitleNew}
-                        shouldShowBorderBottom
-                        shouldShowDownloadButton={shouldShowDownloadButton}
-                        onDownloadButtonPress={() => downloadAttachment()}
-                        shouldShowCloseButton={!shouldUseNarrowLayout}
-                        shouldShowBackButton={shouldUseNarrowLayout}
-                        onBackButtonPress={closeModal}
-                        onCloseButtonPress={closeModal}
-                        shouldShowThreeDotsButton={shouldShowThreeDotsButton}
-                        threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
-                        threeDotsMenuItems={threeDotsMenuItems}
-                        shouldOverlayDots
-                        subTitleLink={currentAttachmentLink ?? ''}
-                    />
-                    <View style={styles.imageModalImageCenterContainer}>
-                        {isLoading && <FullScreenLoadingIndicator />}
-                        {shouldShowNotFoundPage && !isLoading && (
-                            <BlockingView
-                                icon={Illustrations.ToddBehindCloud}
-                                iconWidth={variables.modalTopIconWidth}
-                                iconHeight={variables.modalTopIconHeight}
-                                title={translate('notFound.notHere')}
-                                subtitle={translate('notFound.pageNotFound')}
-                                linkKey="notFound.goBackHome"
-                                shouldShowLink
-                                onLinkPress={() => Navigation.dismissModal()}
-                            />
-                        )}
-                        {!shouldShowNotFoundPage &&
-                            (!isEmptyObject(report) && !isReceiptAttachment ? (
-                                <AttachmentCarousel
-                                    accountID={accountID}
-                                    type={type}
-                                    report={report}
-                                    onNavigate={onNavigate}
-                                    onClose={closeModal}
-                                    source={source}
-                                    setDownloadButtonVisibility={setDownloadButtonVisibility}
-                                    attachmentLink={currentAttachmentLink}
-                                />
-                            ) : (
-                                !!sourceForAttachmentView &&
-                                shouldLoadAttachment &&
-                                !isLoading && (
-                                    <AttachmentCarouselPagerContext.Provider value={context}>
-                                        <AttachmentView
-                                            containerStyles={[styles.mh5]}
-                                            source={sourceForAttachmentView}
-                                            isAuthTokenRequired={isAuthTokenRequiredState}
-                                            file={file}
-                                            onToggleKeyboard={setIsConfirmButtonDisabled}
-                                            onPDFLoadError={() => {
-                                                isPDFLoadError.current = true;
-                                                setIsModalOpen(false);
-                                            }}
-                                            isWorkspaceAvatar={isWorkspaceAvatar}
-                                            maybeIcon={maybeIcon}
-                                            fallbackSource={fallbackSource}
-                                            isUsedInAttachmentModal
-                                            transactionID={transaction?.transactionID}
-                                            isUploaded={!isEmptyObject(report)}
-                                        />
-                                    </AttachmentCarouselPagerContext.Provider>
-                                )
-                            ))}
-                    </View>
-                    {/* If we have an onConfirm method show a confirmation button */}
-                    {!!onConfirm && !isConfirmButtonDisabled && (
-                        <SafeAreaConsumer>
-                            {({safeAreaPaddingBottomStyle}) => (
-                                <Animated.View
-                                    style={safeAreaPaddingBottomStyle}
-                                    entering={FadeIn}
-                                >
-                                    <Button
-                                        ref={viewRef(submitRef)}
-                                        success
-                                        large
-                                        style={[styles.buttonConfirm, shouldUseNarrowLayout ? {} : styles.attachmentButtonBigScreen]}
-                                        textStyles={[styles.buttonConfirmText]}
-                                        text={translate('common.send')}
-                                        onPress={submitAndClose}
-                                        isDisabled={isConfirmButtonDisabled || shouldDisableSendButton}
-                                        pressOnEnter
-                                    />
-                                </Animated.View>
-                            )}
-                        </SafeAreaConsumer>
-                    )}
-                    {isReceiptAttachment && (
-                        <ConfirmModal
-                            title={translate('receipt.deleteReceipt')}
-                            isVisible={isDeleteReceiptConfirmModalVisible}
-                            onConfirm={deleteAndCloseModal}
-                            onCancel={closeConfirmModal}
-                            prompt={translate('receipt.deleteConfirmation')}
-                            confirmText={translate('common.delete')}
-                            cancelText={translate('common.cancel')}
-                            danger
-                        />
-                    )}
-                </GestureHandlerRootView>
-            </Modal>
-            {!isReceiptAttachment && (
-                <ConfirmModal
-                    title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
-                    onConfirm={closeConfirmModal}
-                    onCancel={closeConfirmModal}
-                    isVisible={isAttachmentInvalid}
-                    prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
-                    confirmText={translate('common.close')}
-                    shouldShowCancelButton={false}
-                    onModalHide={() => {
-                        if (!isPDFLoadError.current) {
-                            return;
-                        }
-                        isPDFLoadError.current = false;
-                        onModalHide?.();
-                    }}
-                />
-            )}
-
-            {children?.({
-                displayFileInModal: validateAndDisplayFileToUpload,
-                show: openModal,
-            })}
-        </>
-    );
-}
-
-AttachmentModal.displayName = 'AttachmentModal';
-
-export default memo(AttachmentModal);
-
-export type {Attachment, FileObject, ImagePickerResponse};
diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
index 70966a05b918..d1c6d387724a 100644
--- a/src/components/AttachmentPicker/index.native.tsx
+++ b/src/components/AttachmentPicker/index.native.tsx
@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import {manipulateAsync, SaveFormat} from 'expo-image-manipulator';
+import {ImageManipulator, SaveFormat} from 'expo-image-manipulator';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {Alert, View} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
@@ -8,7 +8,6 @@ import type {DocumentPickerOptions, DocumentPickerResponse} from 'react-native-d
 import {launchImageLibrary} from 'react-native-image-picker';
 import type {Asset, Callback, CameraOptions, ImageLibraryOptions, ImagePickerResponse} from 'react-native-image-picker';
 import ImageSize from 'react-native-image-size';
-import type {FileObject, ImagePickerResponse as FileResponse} from '@components/AttachmentModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Popover from '@components/Popover';
@@ -19,7 +18,8 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {cleanFileName, showCameraPermissionsAlert, verifyFileFormat} from '@libs/fileDownload/FileUtils';
+import type {FileObject, ImagePickerResponse as FileResponse} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -85,7 +85,7 @@ const getDocumentPickerOptions = (type: string, fileLimit: number): DocumentPick
 const getDataForUpload = (fileData: FileResponse): Promise<FileObject> => {
     const fileName = fileData.name || 'chat_attachment';
     const fileResult: FileObject = {
-        name: FileUtils.cleanFileName(fileName),
+        name: cleanFileName(fileName),
         type: fileData.type,
         width: fileData.width,
         height: fileData.height,
@@ -156,7 +156,7 @@ function AttachmentPicker({
                     if (response.errorCode) {
                         switch (response.errorCode) {
                             case 'permission':
-                                FileUtils.showCameraPermissionsAlert();
+                                showCameraPermissionsAlert();
                                 return resolve();
                             default:
                                 showGeneralAlert();
@@ -174,27 +174,32 @@ function AttachmentPicker({
                     }
 
                     if (targetAsset?.type?.startsWith('image')) {
-                        FileUtils.verifyFileFormat({fileUri: targetAssetUri, formatSignatures: CONST.HEIC_SIGNATURES})
+                        verifyFileFormat({fileUri: targetAssetUri, formatSignatures: CONST.HEIC_SIGNATURES})
                             .then((isHEIC) => {
                                 // react-native-image-picker incorrectly changes file extension without transcoding the HEIC file, so we are doing it manually if we detect HEIC signature
                                 if (isHEIC && targetAssetUri) {
-                                    manipulateAsync(targetAssetUri, [], {format: SaveFormat.JPEG})
-                                        .then((manipResult) => {
-                                            const uri = manipResult.uri;
-                                            const convertedAsset = {
-                                                uri,
-                                                name: uri
-                                                    .substring(uri.lastIndexOf('/') + 1)
-                                                    .split('?')
-                                                    .at(0),
-                                                type: 'image/jpeg',
-                                                width: manipResult.width,
-                                                height: manipResult.height,
-                                            };
-
-                                            return resolve([convertedAsset]);
-                                        })
-                                        .catch((err) => reject(err));
+                                    ImageManipulator.manipulate(targetAssetUri)
+                                        .renderAsync()
+                                        .then((image) =>
+                                            image
+                                                .saveAsync({format: SaveFormat.JPEG})
+                                                .then((manipResult) => {
+                                                    const uri = manipResult.uri;
+                                                    const convertedAsset = {
+                                                        uri,
+                                                        name: uri
+                                                            .substring(uri.lastIndexOf('/') + 1)
+                                                            .split('?')
+                                                            .at(0),
+                                                        type: 'image/jpeg',
+                                                        width: manipResult.width,
+                                                        height: manipResult.height,
+                                                    };
+
+                                                    return resolve([convertedAsset]);
+                                                })
+                                                .catch((err) => reject(err)),
+                                        );
                                 } else {
                                     return resolve(response.assets);
                                 }
diff --git a/src/components/AttachmentPicker/index.tsx b/src/components/AttachmentPicker/index.tsx
index 2484198d3916..8f9abe10308b 100644
--- a/src/components/AttachmentPicker/index.tsx
+++ b/src/components/AttachmentPicker/index.tsx
@@ -1,8 +1,8 @@
 import React, {useRef} from 'react';
 import type {ValueOf} from 'type-fest';
-import type {FileObject} from '@components/AttachmentModal';
-import * as Browser from '@libs/Browser';
+import {isMobileChrome} from '@libs/Browser';
 import Visibility from '@libs/Visibility';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import type AttachmentPickerProps from './types';
 
@@ -10,7 +10,7 @@ import type AttachmentPickerProps from './types';
  * Returns acceptable FileTypes based on ATTACHMENT_PICKER_TYPE
  */
 function getAcceptableFileTypes(type: string): string | undefined {
-    if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE || Browser.isMobileChrome()) {
+    if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE || isMobileChrome()) {
         return;
     }
 
diff --git a/src/components/AttachmentPicker/types.ts b/src/components/AttachmentPicker/types.ts
index 1e2e65761527..38dd3a3db91e 100644
--- a/src/components/AttachmentPicker/types.ts
+++ b/src/components/AttachmentPicker/types.ts
@@ -1,6 +1,6 @@
 import type {ReactNode} from 'react';
 import type {ValueOf} from 'type-fest';
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type CONST from '@src/CONST';
 
 type PickerOptions = {
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
index 5800e92cc4f4..b59f1a73cbe7 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
@@ -10,7 +10,7 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
 import CONST from '@src/CONST';
 
 type CarouselItemProps = {
@@ -30,7 +30,7 @@ type CarouselItemProps = {
 function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
+    const {isAttachmentHidden} = useContext(AttachmentModalContext);
     const [isHidden, setIsHidden] = useState(() => (item.reportActionID ? isAttachmentHidden(item.reportActionID) : item.hasBeenFlagged));
 
     const renderButton = (style: StyleProp<ViewStyle>) => (
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
index af7953eab5be..85e3fe583526 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
@@ -37,13 +37,13 @@ type AttachmentCarouselPagerContextValue = {
     isScrollEnabled: SharedValue<boolean>;
 
     /** Function to call after a tap event */
-    onTap: () => void;
+    onTap?: () => void;
 
     /** Function to call when the scale changes */
-    onScaleChanged: (scale: number) => void;
+    onScaleChanged?: (scale: number) => void;
 
     /** Function to call after a swipe down event */
-    onSwipeDown: () => void;
+    onSwipeDown?: () => void;
 };
 
 const AttachmentCarouselPagerContext = createContext<AttachmentCarouselPagerContextValue | null>(null);
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index f02867376c7e..2264879dbe60 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -39,7 +39,7 @@ type AttachmentCarouselPagerProps = {
     initialPage: number;
 
     /** A callback to be called when the page is changed. */
-    onPageSelected: (
+    onPageSelected?: (
         event: NativeSyntheticEvent<
             Readonly<{
                 position: number;
@@ -48,10 +48,10 @@ type AttachmentCarouselPagerProps = {
     ) => void;
 
     /** A callback that is called when swipe-down-to-close gesture happens */
-    onClose: () => void;
+    onClose?: () => void;
 
     /** Sets the visibility of the arrows. */
-    setShouldShowArrows: (show?: SetStateAction<boolean>) => void;
+    setShouldShowArrows?: (show?: SetStateAction<boolean>) => void;
 };
 
 function AttachmentCarouselPager(
diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
index 317878b3ff60..6c0405d8b2d2 100644
--- a/src/components/Attachments/AttachmentCarousel/types.ts
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -28,7 +28,7 @@ type AttachmentCarouselProps = {
     accountID?: number;
 
     /** A callback that is called when swipe-down-to-close gesture happens */
-    onClose: () => void;
+    onClose?: () => void;
 
     attachmentLink?: string;
 };
diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts
index 3311f6476194..da38a2080aab 100644
--- a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts
+++ b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts
@@ -2,7 +2,7 @@ import {useCallback, useRef} from 'react';
 import type {SetStateAction} from 'react';
 import {useSharedValue} from 'react-native-reanimated';
 
-function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction<boolean>) => void) {
+function useCarouselContextEvents(setShouldShowArrows?: (show?: SetStateAction<boolean>) => void) {
     const scale = useRef(1);
     const isScrollEnabled = useSharedValue(true);
 
@@ -12,11 +12,11 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction<bo
     const onRequestToggleArrows = useCallback(
         (showArrows?: boolean) => {
             if (showArrows === undefined) {
-                setShouldShowArrows((prevShouldShowArrows) => !prevShouldShowArrows);
+                setShouldShowArrows?.((prevShouldShowArrows) => !prevShouldShowArrows);
                 return;
             }
 
-            setShouldShowArrows(showArrows);
+            setShouldShowArrows?.(showArrows);
         },
         [setShouldShowArrows],
     );
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
index 4da481809b46..39c82f5f6b23 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
@@ -23,7 +23,7 @@ function BaseAttachmentViewPdf({
         if (!attachmentCarouselPagerContext) {
             return;
         }
-        attachmentCarouselPagerContext.onScaleChanged(1);
+        attachmentCarouselPagerContext.onScaleChanged?.(1);
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we just want to call this function when component is mounted
     }, []);
 
@@ -40,7 +40,7 @@ function BaseAttachmentViewPdf({
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
             if (attachmentCarouselPagerContext?.pagerRef) {
-                attachmentCarouselPagerContext.onScaleChanged(newScale);
+                attachmentCarouselPagerContext.onScaleChanged?.(newScale);
             }
         },
         [attachmentCarouselPagerContext, onScaleChangedProp],
@@ -59,7 +59,7 @@ function BaseAttachmentViewPdf({
             }
 
             if (attachmentCarouselPagerContext !== null && isScrollEnabled?.get()) {
-                attachmentCarouselPagerContext.onTap();
+                attachmentCarouselPagerContext.onTap?.();
             }
         },
         [attachmentCarouselPagerContext, isScrollEnabled, onPressProp],
diff --git a/src/components/Attachments/types.ts b/src/components/Attachments/types.ts
index 88b8420745eb..36b1a30159a4 100644
--- a/src/components/Attachments/types.ts
+++ b/src/components/Attachments/types.ts
@@ -1,4 +1,4 @@
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type IconAsset from '@src/types/utils/IconAsset';
 
 type AttachmentSource = string | IconAsset | number;
diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
index ee88c7c403dc..1478ff41fe90 100644
--- a/src/components/AvatarWithImagePicker.tsx
+++ b/src/components/AvatarWithImagePicker.tsx
@@ -1,5 +1,5 @@
 import {useIsFocused} from '@react-navigation/native';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import type {ImageStyle, StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
@@ -10,14 +10,16 @@ import {isSafari} from '@libs/Browser';
 import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types';
 import {splitExtensionFromFileName, validateImageForCorruption} from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
+import Navigation from '@libs/Navigation/Navigation';
 import type {AvatarSource} from '@libs/UserUtils';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import ROUTES from '@src/ROUTES';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type IconAsset from '@src/types/utils/IconAsset';
-import AttachmentModal from './AttachmentModal';
-import type {FileObject} from './AttachmentModal';
 import AttachmentPicker from './AttachmentPicker';
 import Avatar from './Avatar';
 import AvatarCropModal from './AvatarCropModal/AvatarCropModal';
@@ -330,115 +332,117 @@ function AvatarWithImagePicker({
         [disabled, enablePreview, isUsingDefaultAvatar, onViewPhotoPress, showAvatarCropModal],
     );
 
+    const reportAttachmentsContext = useContext(AttachmentModalContext);
+    const showAttachmentModalScreen = useCallback(() => {
+        const attachmentId = reportAttachmentsContext.addAttachment({
+            source: previewSource,
+            fallbackSource: fallbackIcon,
+            headerTitle,
+            originalFileName,
+            maybeIcon: isUsingDefaultAvatar,
+        });
+        Navigation.navigate(ROUTES.ATTACHMENTS.getRoute({attachmentId}));
+    }, [fallbackIcon, headerTitle, isUsingDefaultAvatar, originalFileName, previewSource, reportAttachmentsContext]);
+
     return (
         <View style={[styles.w100, style]}>
             <View style={styles.w100}>
-                <AttachmentModal
-                    headerTitle={headerTitle}
-                    source={previewSource}
-                    originalFileName={originalFileName}
-                    fallbackSource={fallbackIcon}
-                    maybeIcon={isUsingDefaultAvatar}
+                <AttachmentPicker
+                    type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}
+                    // We need to skip the validation in AttachmentPicker because it is handled in this component itself
+                    shouldValidateImage={false}
                 >
-                    {({show}) => (
-                        <AttachmentPicker
-                            type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}
-                            // We need to skip the validation in AttachmentPicker because it is handled in this component itself
-                            shouldValidateImage={false}
-                        >
-                            {({openPicker}) => {
-                                const menuItems = createMenuItems(openPicker);
-
-                                // If the current avatar isn't a default avatar and we are not overriding this behavior allow the "View Photo" option
-                                if (!shouldDisableViewPhoto && !isUsingDefaultAvatar) {
-                                    menuItems.push({
-                                        icon: Expensicons.Eye,
-                                        text: translate('avatarWithImagePicker.viewPhoto'),
-                                        onSelected: () => {
-                                            if (typeof onViewPhotoPress !== 'function') {
-                                                show();
-                                                return;
-                                            }
-                                            onViewPhotoPress();
-                                        },
-                                        shouldCallAfterModalHide: true,
-                                    });
-                                }
-
-                                return (
-                                    <>
-                                        <OfflineWithFeedback
-                                            errors={errors}
-                                            errorRowStyles={errorRowStyles}
-                                            onClose={onErrorClose}
+                    {({openPicker}) => {
+                        const menuItems = createMenuItems(openPicker);
+
+                        // If the current avatar isn't a default avatar and we are not overriding this behavior allow the "View Photo" option
+                        if (!shouldDisableViewPhoto && !isUsingDefaultAvatar) {
+                            menuItems.push({
+                                icon: Expensicons.Eye,
+                                text: translate('avatarWithImagePicker.viewPhoto'),
+                                onSelected: () => {
+                                    if (typeof onViewPhotoPress !== 'function') {
+                                        showAttachmentModalScreen();
+                                        return;
+                                    }
+                                    onViewPhotoPress();
+                                },
+                                shouldCallAfterModalHide: true,
+                            });
+                        }
+
+                        return (
+                            <>
+                                <OfflineWithFeedback
+                                    errors={errors}
+                                    errorRowStyles={errorRowStyles}
+                                    onClose={onErrorClose}
+                                >
+                                    <Tooltip
+                                        shouldRender={!disabled}
+                                        text={translate('avatarWithImagePicker.editImage')}
+                                    >
+                                        <PressableWithoutFeedback
+                                            onPress={() => onPressAvatar(openPicker)}
+                                            accessibilityRole={CONST.ROLE.BUTTON}
+                                            accessibilityLabel={translate('avatarWithImagePicker.editImage')}
+                                            disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
+                                            disabledStyle={disabledStyle}
+                                            style={[styles.pRelative, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter, avatarStyle]}
+                                            ref={anchorRef}
                                         >
-                                            <Tooltip
-                                                shouldRender={!disabled}
-                                                text={translate('avatarWithImagePicker.editImage')}
-                                            >
-                                                <PressableWithoutFeedback
-                                                    onPress={() => onPressAvatar(openPicker)}
-                                                    accessibilityRole={CONST.ROLE.BUTTON}
-                                                    accessibilityLabel={translate('avatarWithImagePicker.editImage')}
-                                                    disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
-                                                    disabledStyle={disabledStyle}
-                                                    style={[styles.pRelative, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter, avatarStyle]}
-                                                    ref={anchorRef}
-                                                >
-                                                    <OfflineWithFeedback pendingAction={pendingAction}>
-                                                        {source ? (
-                                                            <Avatar
-                                                                containerStyles={avatarStyle}
-                                                                imageStyles={[styles.alignSelfCenter, avatarStyle]}
-                                                                source={source}
-                                                                avatarID={avatarID}
-                                                                fallbackIcon={fallbackIcon}
-                                                                size={size}
-                                                                type={type}
-                                                            />
-                                                        ) : (
-                                                            <DefaultAvatar />
-                                                        )}
-                                                    </OfflineWithFeedback>
-                                                    {!disabled && (
-                                                        <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
-                                                            <Icon
-                                                                src={editIcon}
-                                                                width={variables.iconSizeSmall}
-                                                                height={variables.iconSizeSmall}
-                                                                fill={theme.icon}
-                                                            />
-                                                        </View>
-                                                    )}
-                                                </PressableWithoutFeedback>
-                                            </Tooltip>
-                                        </OfflineWithFeedback>
-                                        <PopoverMenu
-                                            isVisible={isMenuVisible}
-                                            onClose={() => setIsMenuVisible(false)}
-                                            onItemSelected={(item, index) => {
-                                                setIsMenuVisible(false);
-                                                // In order for the file picker to open dynamically, the click
-                                                // function must be called from within an event handler that was initiated
-                                                // by the user on Safari.
-                                                if (index === 0 && isSafari()) {
-                                                    openPicker({
-                                                        onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
-                                                    });
-                                                }
-                                            }}
-                                            menuItems={menuItems}
-                                            anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition}
-                                            anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                                            withoutOverlay
-                                            anchorRef={anchorRef}
-                                        />
-                                    </>
-                                );
-                            }}
-                        </AttachmentPicker>
-                    )}
-                </AttachmentModal>
+                                            <OfflineWithFeedback pendingAction={pendingAction}>
+                                                {source ? (
+                                                    <Avatar
+                                                        containerStyles={avatarStyle}
+                                                        imageStyles={[styles.alignSelfCenter, avatarStyle]}
+                                                        source={source}
+                                                        avatarID={avatarID}
+                                                        fallbackIcon={fallbackIcon}
+                                                        size={size}
+                                                        type={type}
+                                                    />
+                                                ) : (
+                                                    <DefaultAvatar />
+                                                )}
+                                            </OfflineWithFeedback>
+                                            {!disabled && (
+                                                <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
+                                                    <Icon
+                                                        src={editIcon}
+                                                        width={variables.iconSizeSmall}
+                                                        height={variables.iconSizeSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                </View>
+                                            )}
+                                        </PressableWithoutFeedback>
+                                    </Tooltip>
+                                </OfflineWithFeedback>
+                                <PopoverMenu
+                                    isVisible={isMenuVisible}
+                                    onClose={() => setIsMenuVisible(false)}
+                                    onItemSelected={(item, index) => {
+                                        setIsMenuVisible(false);
+                                        // In order for the file picker to open dynamically, the click
+                                        // function must be called from within an event handler that was initiated
+                                        // by the user on Safari.
+                                        if (index === 0 && isSafari()) {
+                                            openPicker({
+                                                onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
+                                            });
+                                        }
+                                    }}
+                                    menuItems={menuItems}
+                                    anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition}
+                                    anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                                    withoutOverlay
+                                    anchorRef={anchorRef}
+                                />
+                            </>
+                        );
+                    }}
+                </AttachmentPicker>
             </View>
             {!!errorData.validationError && (
                 <DotIndicatorMessage
diff --git a/src/components/Composer/implementation/index.native.tsx b/src/components/Composer/implementation/index.native.tsx
index a02767d24c87..8bb04e26a45a 100644
--- a/src/components/Composer/implementation/index.native.tsx
+++ b/src/components/Composer/implementation/index.native.tsx
@@ -4,7 +4,6 @@ import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData, TextInputPasteEventData} from 'react-native';
 import {StyleSheet} from 'react-native';
-import type {FileObject} from '@components/AttachmentModal';
 import type {ComposerProps} from '@components/Composer/types';
 import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
 import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
@@ -15,9 +14,10 @@ import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as EmojiUtils from '@libs/EmojiUtils';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {containsOnlyEmojis} from '@libs/EmojiUtils';
+import {splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import getPlatform from '@libs/getPlatform';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 
 const excludeNoStyles: Array<keyof MarkdownStyle> = [];
@@ -45,7 +45,7 @@ function Composer(
 ) {
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const {isFocused, shouldResetFocusRef} = useResetComposerFocus(textInput);
-    const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
+    const textContainsOnlyEmojis = useMemo(() => containsOnlyEmojis(value ?? ''), [value]);
     const theme = useTheme();
     const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
     const styles = useThemeStyles();
@@ -129,7 +129,7 @@ function Composer(
             const mimeType = clipboardContent?.type ?? '';
             const fileURI = clipboardContent?.data;
             const baseFileName = fileURI?.split('/').pop() ?? 'file';
-            const {fileName: stem, fileExtension: originalFileExtension} = FileUtils.splitExtensionFromFileName(baseFileName);
+            const {fileName: stem, fileExtension: originalFileExtension} = splitExtensionFromFileName(baseFileName);
             const fileExtension = originalFileExtension || (mimeDb[mimeType].extensions?.[0] ?? 'bin');
             const fileName = `${stem}.${fileExtension}`;
             const file: FileObject = {uri: fileURI, name: fileName, type: mimeType};
diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts
index 6ea3bdb2f824..e80885e32fbd 100644
--- a/src/components/Composer/types.ts
+++ b/src/components/Composer/types.ts
@@ -1,5 +1,5 @@
 import type {NativeSyntheticEvent, StyleProp, TextInputProps, TextInputSelectionChangeEventData, TextStyle} from 'react-native';
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 type TextSelection = {
     start: number;
diff --git a/src/components/FilePicker/index.native.tsx b/src/components/FilePicker/index.native.tsx
index 4b381713e44b..248497401f75 100644
--- a/src/components/FilePicker/index.native.tsx
+++ b/src/components/FilePicker/index.native.tsx
@@ -3,9 +3,9 @@ import {Alert} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
 import RNDocumentPicker from 'react-native-document-picker';
 import type {DocumentPickerResponse} from 'react-native-document-picker';
-import type {FileObject} from '@components/AttachmentModal';
 import useLocalize from '@hooks/useLocalize';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {cleanFileName} from '@libs/fileDownload/FileUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type FilePickerProps from './types';
 
 /**
@@ -28,7 +28,7 @@ const getFileDataName = (fileData: DocumentPickerResponse): string => {
 const getDataForUpload = (fileData: DocumentPickerResponse): Promise<FileObject> => {
     const fileName = fileData.name ?? 'spreadsheet';
     const fileResult: FileObject = {
-        name: FileUtils.cleanFileName(fileName),
+        name: cleanFileName(fileName),
         type: fileData.type ?? undefined,
         uri: fileData.uri,
         size: fileData.size,
diff --git a/src/components/FilePicker/types.ts b/src/components/FilePicker/types.ts
index f2887ea4425b..f7b5a8b94e0a 100644
--- a/src/components/FilePicker/types.ts
+++ b/src/components/FilePicker/types.ts
@@ -1,5 +1,5 @@
 import type {ReactNode} from 'react';
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 type PickerOptions = {
     /** A callback that will be called with the selected file. */
diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
index 02cc4e899b32..a0e570d842e5 100644
--- a/src/components/Form/types.ts
+++ b/src/components/Form/types.ts
@@ -6,7 +6,6 @@ import type AddressSearch from '@components/AddressSearch';
 import type AmountForm from '@components/AmountForm';
 import type AmountPicker from '@components/AmountPicker';
 import type AmountTextInput from '@components/AmountTextInput';
-import type {FileObject} from '@components/AttachmentModal';
 import type CheckboxWithLabel from '@components/CheckboxWithLabel';
 import type CountryPicker from '@components/CountryPicker';
 import type CountrySelector from '@components/CountrySelector';
@@ -27,6 +26,7 @@ import type TimeModalPicker from '@components/TimeModalPicker';
 import type UploadFile from '@components/UploadFile';
 import type ValuePicker from '@components/ValuePicker';
 import type ConstantSelector from '@pages/Debug/ConstantSelector';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
 import type DimensionTypeSelector from '@pages/workspace/accounting/intacct/import/DimensionTypeSelector';
 import type NetSuiteCustomFieldMappingPicker from '@pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomFieldMappingPicker';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index 4c8e941acb87..0805eb78d6aa 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -11,9 +11,9 @@ import ThumbnailImage from '@components/ThumbnailImage';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {getFileName, getFileType, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as ReportUtils from '@libs/ReportUtils';
+import {isArchivedNonExpenseReport} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -70,12 +70,12 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const imageHeight = (htmlAttribs['data-expensify-height'] && parseInt(htmlAttribs['data-expensify-height'], 10)) || undefined;
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
 
-    const fileType = FileUtils.getFileType(attachmentSourceAttribute);
+    const fileType = getFileType(attachmentSourceAttribute);
     const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.GalleryNotFound;
     const theme = useTheme();
 
-    let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
-    const fileInfo = FileUtils.splitExtensionFromFileName(fileName);
+    let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
+    const fileInfo = splitExtensionFromFileName(fileName);
     if (!fileInfo.fileExtension) {
         fileName = `${fileInfo?.fileName || CONST.DEFAULT_IMAGE_FILE_NAME}.jpg`;
     }
@@ -110,21 +110,14 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 }
 
                                 const attachmentLink = tnode.parent?.attributes?.href;
-                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID, type, source, accountID, isAttachmentOrReceipt, fileName, attachmentLink);
+                                const route = ROUTES.ATTACHMENTS?.getRoute({reportID, type, source, accountID, isAuthTokenRequired: isAttachmentOrReceipt, fileName, attachmentLink});
                                 Navigation.navigate(route);
                             }}
                             onLongPress={(event) => {
                                 if (isDisabled) {
                                     return;
                                 }
-                                showContextMenuForReport(
-                                    event,
-                                    anchor,
-                                    report?.reportID,
-                                    action,
-                                    checkIfContextMenuActive,
-                                    ReportUtils.isArchivedNonExpenseReport(report, reportNameValuePairs),
-                                );
+                                showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, reportNameValuePairs));
                             }}
                             shouldUseHapticsOnLongPress
                             accessibilityRole={CONST.ROLE.BUTTON}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index ad7ea87f4c9b..ff7659cde473 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -5,7 +5,7 @@ import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import VideoPlayerPreview from '@components/VideoPlayerPreview';
 import useCurrentReportID from '@hooks/useCurrentReportID';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {getFileName} from '@libs/fileDownload/FileUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import Navigation from '@navigation/Navigation';
 import CONST from '@src/CONST';
@@ -20,7 +20,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const htmlAttribs = tnode.attributes;
     const attrHref = htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || htmlAttribs.src || htmlAttribs.href || '';
     const sourceURL = tryResolveUrlFromApiRoot(attrHref);
-    const fileName = FileUtils.getFileName(`${sourceURL}`);
+    const fileName = getFileName(`${sourceURL}`);
     const thumbnailUrl = tryResolveUrlFromApiRoot(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_URL_ATTRIBUTE]);
     const width = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_WIDTH_ATTRIBUTE]);
     const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
@@ -36,7 +36,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                         <VideoPlayerPreview
                             key={key}
                             videoUrl={sourceURL}
-                            reportID={currentReportIDValue?.currentReportID ?? '-1'}
+                            reportID={currentReportIDValue?.currentReportID}
                             fileName={fileName}
                             thumbnailUrl={thumbnailUrl}
                             videoDimensions={{width, height}}
@@ -46,7 +46,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                                 if (!sourceURL || !type) {
                                     return;
                                 }
-                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID ?? '-1', type, sourceURL, accountID);
+                                const route = ROUTES.ATTACHMENTS.getRoute({reportID: report?.reportID, type, source: sourceURL, accountID});
                                 Navigation.navigate(route);
                             }}
                         />
diff --git a/src/components/ImportOnyxState/BaseImportOnyxState.tsx b/src/components/ImportOnyxState/BaseImportOnyxState.tsx
index 3362bc764446..a93b5dfa643e 100644
--- a/src/components/ImportOnyxState/BaseImportOnyxState.tsx
+++ b/src/components/ImportOnyxState/BaseImportOnyxState.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import DecisionModal from '@components/DecisionModal';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -7,6 +6,7 @@ import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 function BaseImportOnyxState({
     onFileRead,
diff --git a/src/components/ImportOnyxState/index.native.tsx b/src/components/ImportOnyxState/index.native.tsx
index bdd805241c55..27cc4fc9b2ab 100644
--- a/src/components/ImportOnyxState/index.native.tsx
+++ b/src/components/ImportOnyxState/index.native.tsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import Onyx, {useOnyx} from 'react-native-onyx';
-import type {FileObject} from '@components/AttachmentModal';
 import {KEYS_TO_PRESERVE, setIsUsingImportedState, setPreservedUserSession} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/ImportOnyxState/index.tsx b/src/components/ImportOnyxState/index.tsx
index 2f9a2b70b65b..37259dbb7f78 100644
--- a/src/components/ImportOnyxState/index.tsx
+++ b/src/components/ImportOnyxState/index.tsx
@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
 import Onyx, {useOnyx} from 'react-native-onyx';
-import type {FileObject} from '@components/AttachmentModal';
 import {KEYS_TO_PRESERVE, setIsUsingImportedState, setPreservedUserSession} from '@libs/actions/App';
 import {setShouldForceOffline} from '@libs/actions/Network';
 import Navigation from '@libs/Navigation/Navigation';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/ImportSpreadsheet.tsx b/src/components/ImportSpreadsheet.tsx
index a6a27e2d5bcb..c97d4896eabf 100644
--- a/src/components/ImportSpreadsheet.tsx
+++ b/src/components/ImportSpreadsheet.tsx
@@ -7,13 +7,13 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {setSpreadsheetData} from '@libs/actions/ImportSpreadsheet';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {Route as Routes} from '@src/ROUTES';
-import type {FileObject} from './AttachmentModal';
 import Button from './Button';
 import ConfirmModal from './ConfirmModal';
 import DragAndDropConsumer from './DragAndDrop/Consumer';
@@ -36,7 +36,7 @@ type ImportSpreedsheetProps = {
 function ImportSpreadsheet({backTo, goTo}: ImportSpreedsheetProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [isReadingFile, setIsReadingFIle] = useState(false);
+    const [isReadingFile, setIsReadingFile] = useState(false);
     const [fileTopPosition, setFileTopPosition] = useState(0);
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState<TranslationPaths>();
@@ -60,7 +60,7 @@ function ImportSpreadsheet({backTo, goTo}: ImportSpreedsheetProps) {
     };
 
     const validateFile = (file: FileObject) => {
-        const {fileExtension} = FileUtils.splitExtensionFromFileName(file?.name ?? '');
+        const {fileExtension} = splitExtensionFromFileName(file?.name ?? '');
         if (!CONST.ALLOWED_SPREADSHEET_EXTENSIONS.includes(fileExtension.toLowerCase() as TupleToUnion<typeof CONST.ALLOWED_SPREADSHEET_EXTENSIONS>)) {
             setUploadFileError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
             return false;
@@ -87,7 +87,7 @@ function ImportSpreadsheet({backTo, goTo}: ImportSpreedsheetProps) {
 
         fetch(fileURI)
             .then((data) => {
-                setIsReadingFIle(true);
+                setIsReadingFile(true);
                 return data.arrayBuffer();
             })
             .then((arrayBuffer) => {
@@ -105,7 +105,7 @@ function ImportSpreadsheet({backTo, goTo}: ImportSpreedsheetProps) {
                     });
             })
             .finally(() => {
-                setIsReadingFIle(false);
+                setIsReadingFile(false);
                 if (fileURI && !file.uri) {
                     URL.revokeObjectURL(fileURI);
                 }
@@ -163,7 +163,7 @@ function ImportSpreadsheet({backTo, goTo}: ImportSpreedsheetProps) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             testID={ImportSpreadsheet.displayName}
-            shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
+            shouldEnableMaxHeight={canUseTouchScreen()}
             headerGapStyles={isDraggingOver ? [styles.isDraggingOver] : []}
         >
             {({safeAreaPaddingBottomStyle}) => (
diff --git a/src/components/UploadFile.tsx b/src/components/UploadFile.tsx
index f434b08d3800..bc7a7296ce22 100644
--- a/src/components/UploadFile.tsx
+++ b/src/components/UploadFile.tsx
@@ -5,9 +5,9 @@ import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
-import type {FileObject} from './AttachmentModal';
 import AttachmentPicker from './AttachmentPicker';
 import Button from './Button';
 import DotIndicatorMessage from './DotIndicatorMessage';
@@ -86,7 +86,7 @@ function UploadFile({
         }
 
         if (acceptedFileTypes.length > 0) {
-            const filesExtensions = files.map((file) => FileUtils.splitExtensionFromFileName(file?.name ?? '').fileExtension.toLowerCase());
+            const filesExtensions = files.map((file) => splitExtensionFromFileName(file?.name ?? '').fileExtension.toLowerCase());
 
             if (acceptedFileTypes.every((element) => !filesExtensions.includes(element as string))) {
                 setError(translate('attachmentPicker.notAllowedExtension'));
diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index fb188e593949..484c79638d4f 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -22,7 +22,7 @@ type VideoPlayerPreviewProps = {
     videoUrl: string;
 
     /** reportID of the video */
-    reportID: string;
+    reportID: string | undefined;
 
     /** Dimension of a video. */
     videoDimensions: VideoDimensions;
diff --git a/src/libs/API/parameters/AddCommentOrAttachementParams.ts b/src/libs/API/parameters/AddCommentOrAttachementParams.ts
index d1b653f26de1..b8049d4fcd1e 100644
--- a/src/libs/API/parameters/AddCommentOrAttachementParams.ts
+++ b/src/libs/API/parameters/AddCommentOrAttachementParams.ts
@@ -1,4 +1,4 @@
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 type AddCommentOrAttachementParams = {
     reportID: string;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 9968251e226a..93a982fc61d8 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -20,13 +20,13 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import setFullscreenVisibility from '@libs/actions/setFullscreenVisibility';
 import {READ_COMMANDS} from '@libs/API/types';
+import getPlatform from '@libs/getPlatform';
 import HttpUtils from '@libs/HttpUtils';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import NavBarManager from '@libs/NavBarManager';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
-import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
 import Presentation from '@libs/Navigation/PlatformStackNavigation/navigationOptions/presentation';
 import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
 import shouldOpenOnAdminRoom from '@libs/Navigation/shouldOpenOnAdminRoom';
@@ -89,16 +89,19 @@ type AuthScreensProps = {
     initialLastUpdateIDAppliedToClient: OnyxEntry<number>;
 };
 
-const loadReportAttachments = () => require<ReactComponentModule>('../../../pages/home/report/ReportAttachments').default;
+const platform = getPlatform();
+const isWeb = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.MOBILEWEB;
+const attachmentModalScreenOptions = {
+    headerShown: false,
+    presentation: isWeb ? Presentation.TRANSPARENT_MODAL : undefined,
+};
+
+const loadAttachmentModalScreen = () => require<ReactComponentModule>('../../../pages/media/AttachmentModalScreen').default;
 const loadValidateLoginPage = () => require<ReactComponentModule>('../../../pages/ValidateLoginPage').default;
 const loadLogOutPreviousUserPage = () => require<ReactComponentModule>('../../../pages/LogOutPreviousUserPage').default;
 const loadConciergePage = () => require<ReactComponentModule>('../../../pages/ConciergePage').default;
 const loadTrackExpensePage = () => require<ReactComponentModule>('../../../pages/TrackExpensePage').default;
 const loadSubmitExpensePage = () => require<ReactComponentModule>('../../../pages/SubmitExpensePage').default;
-const loadProfileAvatar = () => require<ReactComponentModule>('../../../pages/settings/Profile/ProfileAvatar').default;
-const loadWorkspaceAvatar = () => require<ReactComponentModule>('../../../pages/workspace/WorkspaceAvatar').default;
-const loadReportAvatar = () => require<ReactComponentModule>('../../../pages/ReportAvatar').default;
-const loadReceiptView = () => require<ReactComponentModule>('../../../pages/TransactionReceiptPage').default;
 const loadWorkspaceJoinUser = () => require<ReactComponentModule>('@pages/workspace/WorkspaceJoinUserPage').default;
 
 function getCentralPaneScreenInitialParams(screenName: CentralPaneName, initialReportID?: string): Partial<ValueOf<CentralPaneScreensParamList>> {
@@ -504,40 +507,23 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     />
                     <RootStack.Screen
                         name={SCREENS.ATTACHMENTS}
-                        options={{
-                            headerShown: false,
-                            presentation: Presentation.TRANSPARENT_MODAL,
-                        }}
-                        getComponent={loadReportAttachments}
-                        listeners={modalScreenListeners}
+                        options={attachmentModalScreenOptions}
+                        getComponent={loadAttachmentModalScreen}
                     />
                     <RootStack.Screen
                         name={SCREENS.PROFILE_AVATAR}
-                        options={{
-                            headerShown: false,
-                            presentation: Presentation.TRANSPARENT_MODAL,
-                            animation: Animations.NONE,
-                        }}
-                        getComponent={loadProfileAvatar}
-                        listeners={modalScreenListeners}
+                        options={attachmentModalScreenOptions}
+                        getComponent={loadAttachmentModalScreen}
                     />
                     <RootStack.Screen
                         name={SCREENS.WORKSPACE_AVATAR}
-                        options={{
-                            headerShown: false,
-                            presentation: Presentation.TRANSPARENT_MODAL,
-                        }}
-                        getComponent={loadWorkspaceAvatar}
-                        listeners={modalScreenListeners}
+                        options={attachmentModalScreenOptions}
+                        getComponent={loadAttachmentModalScreen}
                     />
                     <RootStack.Screen
                         name={SCREENS.REPORT_AVATAR}
-                        options={{
-                            headerShown: false,
-                            presentation: Presentation.TRANSPARENT_MODAL,
-                        }}
-                        getComponent={loadReportAvatar}
-                        listeners={modalScreenListeners}
+                        options={attachmentModalScreenOptions}
+                        getComponent={loadAttachmentModalScreen}
                     />
                     <RootStack.Screen
                         name={SCREENS.NOT_FOUND}
@@ -611,11 +597,8 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     />
                     <RootStack.Screen
                         name={SCREENS.TRANSACTION_RECEIPT}
-                        options={{
-                            headerShown: false,
-                            presentation: Presentation.TRANSPARENT_MODAL,
-                        }}
-                        getComponent={loadReceiptView}
+                        options={attachmentModalScreenOptions}
+                        getComponent={loadAttachmentModalScreen}
                         listeners={modalScreenListeners}
                     />
                     <RootStack.Screen
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index f57c4c3f5715..269046448e8c 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -15,6 +15,7 @@ import type {SearchQueryString} from '@components/Search/types';
 import type {IOURequestType} from '@libs/actions/IOU';
 import type {SaveSearchParams} from '@libs/API/parameters';
 import type {ReimbursementAccountStepToOpen} from '@libs/ReimbursementAccountUtils';
+import type {AttachmentModalScreenParams} from '@pages/media/AttachmentModalScreen/types';
 import type CONST from '@src/CONST';
 import type {Country, IOUAction, IOUType} from '@src/CONST';
 import type NAVIGATORS from '@src/NAVIGATORS';
@@ -1707,6 +1708,7 @@ type SharedScreensParamList = {
         shortLivedAuthToken?: string;
         shortLivedToken?: string;
         authTokenType?: ValueOf<typeof CONST.AUTH_TOKEN_TYPES>;
+        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
         exitTo?: Routes | HybridAppRoute;
         shouldForceLogin: string;
         domain?: Routes;
@@ -1714,6 +1716,7 @@ type SharedScreensParamList = {
     [SCREENS.VALIDATE_LOGIN]: {
         accountID: string;
         validateCode: string;
+        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
         exitTo?: Routes | HybridAppRoute;
     };
 };
@@ -1735,15 +1738,7 @@ type AuthScreensParamList = CentralPaneScreensParamList &
         [SCREENS.CONCIERGE]: undefined;
         [SCREENS.TRACK_EXPENSE]: undefined;
         [SCREENS.SUBMIT_EXPENSE]: undefined;
-        [SCREENS.ATTACHMENTS]: {
-            reportID: string;
-            source: string;
-            type: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
-            accountID: string;
-            isAuthTokenRequired?: string;
-            fileName?: string;
-            attachmentLink?: string;
-        };
+        [SCREENS.ATTACHMENTS]: AttachmentModalScreenParams;
         [SCREENS.PROFILE_AVATAR]: {
             accountID: string;
         };
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index c7c92ac79469..19a9a7912d93 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11,11 +11,11 @@ import Onyx from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import type {OriginalMessageIOU, OriginalMessageModifiedExpense} from 'src/types/onyx/OriginalMessage';
 import type {SetRequired, TupleToUnion, ValueOf} from 'type-fest';
-import type {FileObject} from '@components/AttachmentModal';
 import {FallbackAvatar, IntacctSquare, NetSuiteSquare, NSQSSquare, QBOSquare, XeroSquare} from '@components/Icon/Expensicons';
 import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
 import type {MoneyRequestAmountInputProps} from '@components/MoneyRequestAmountInput';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type {IOUAction, IOUType, OnboardingPurpose} from '@src/CONST';
 import CONST from '@src/CONST';
 import type {ParentNavigationSummaryParams} from '@src/languages/params';
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index bc051f1472bb..9cbe853b9bb8 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -7,7 +7,6 @@ import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-nat
 import Onyx from 'react-native-onyx';
 import type {PartialDeep, ValueOf} from 'type-fest';
 import type {Emoji} from '@assets/emojis/types';
-import type {FileObject} from '@components/AttachmentModal';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as API from '@libs/API';
 import type {
@@ -129,6 +128,7 @@ import shouldSkipDeepLinkNavigation from '@libs/shouldSkipDeepLinkNavigation';
 import {getNavatticURL} from '@libs/TourUtils';
 import {generateAccountID} from '@libs/UserUtils';
 import Visibility from '@libs/Visibility';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONFIG from '@src/CONFIG';
 import type {OnboardingAccounting, OnboardingCompanySize} from '@src/CONST';
 import CONST from '@src/CONST';
diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts
index 59deb4645ddb..4247e4bc2acb 100644
--- a/src/libs/fileDownload/FileUtils.ts
+++ b/src/libs/fileDownload/FileUtils.ts
@@ -1,12 +1,12 @@
 import {Str} from 'expensify-common';
 import {Alert, Linking, Platform} from 'react-native';
 import ImageSize from 'react-native-image-size';
-import type {FileObject} from '@components/AttachmentModal';
 import DateUtils from '@libs/DateUtils';
 import getPlatform from '@libs/getPlatform';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
 import saveLastRoute from '@libs/saveLastRoute';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import getImageManipulator from './getImageManipulator';
 import getImageResolution from './getImageResolution';
diff --git a/src/libs/fileDownload/getImageManipulator/index.native.ts b/src/libs/fileDownload/getImageManipulator/index.native.ts
index 07b97d2e375b..f78fb1006032 100644
--- a/src/libs/fileDownload/getImageManipulator/index.native.ts
+++ b/src/libs/fileDownload/getImageManipulator/index.native.ts
@@ -1,13 +1,17 @@
-import {manipulateAsync} from 'expo-image-manipulator';
-import type {FileObject} from '@components/AttachmentModal';
+import {ImageManipulator} from 'expo-image-manipulator';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type ImageManipulatorConfig from './type';
 
 export default function getImageManipulator({fileUri, width, height, type, fileName}: ImageManipulatorConfig): Promise<FileObject> {
-    return manipulateAsync(fileUri ?? '', [{resize: {width, height}}]).then((result) => ({
-        uri: result.uri,
-        width: result.width,
-        height: result.height,
-        type,
-        name: fileName,
-    }));
+    return ImageManipulator.manipulate(fileUri ?? '')
+        .resize({width, height})
+        .renderAsync()
+        .then((image) => image.saveAsync())
+        .then((result) => ({
+            uri: result.uri,
+            width: result.width,
+            height: result.height,
+            type,
+            name: fileName,
+        }));
 }
diff --git a/src/libs/fileDownload/getImageManipulator/index.ts b/src/libs/fileDownload/getImageManipulator/index.ts
index 87319978caa8..d9743c23d9cc 100644
--- a/src/libs/fileDownload/getImageManipulator/index.ts
+++ b/src/libs/fileDownload/getImageManipulator/index.ts
@@ -1,14 +1,18 @@
-import {manipulateAsync} from 'expo-image-manipulator';
+import {ImageManipulator} from 'expo-image-manipulator';
 import type ImageManipulatorConfig from './type';
 
 export default function getImageManipulator({fileUri, width, height, fileName}: ImageManipulatorConfig): Promise<File> {
-    return manipulateAsync(fileUri ?? '', [{resize: {width, height}}]).then((result) =>
-        fetch(result.uri)
-            .then((res) => res.blob())
-            .then((blob) => {
-                const resizedFile = new File([blob], `${fileName}.jpeg`, {type: 'image/jpeg'});
-                resizedFile.uri = URL.createObjectURL(resizedFile);
-                return resizedFile;
-            }),
-    );
+    return ImageManipulator.manipulate(fileUri ?? '')
+        .resize({width, height})
+        .renderAsync()
+        .then((image) => image.saveAsync())
+        .then((result) =>
+            fetch(result.uri)
+                .then((res) => res.blob())
+                .then((blob) => {
+                    const resizedFile = new File([blob], `${fileName}.jpeg`, {type: 'image/jpeg'});
+                    resizedFile.uri = URL.createObjectURL(resizedFile);
+                    return resizedFile;
+                }),
+        );
 }
diff --git a/src/libs/isFileUploadable/index.native.ts b/src/libs/isFileUploadable/index.native.ts
index 602d2c319a74..c6226d86d652 100644
--- a/src/libs/isFileUploadable/index.native.ts
+++ b/src/libs/isFileUploadable/index.native.ts
@@ -1,4 +1,4 @@
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 function isFileUploadable(file: FileObject | undefined): boolean {
     // Native platforms only require the object to include the `uri` property.
diff --git a/src/libs/isFileUploadable/index.ts b/src/libs/isFileUploadable/index.ts
index a2f985ed109d..1b0b63a87331 100644
--- a/src/libs/isFileUploadable/index.ts
+++ b/src/libs/isFileUploadable/index.ts
@@ -1,4 +1,4 @@
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 function isFileUploadable(file: FileObject | undefined): boolean {
     return file instanceof Blob;
diff --git a/src/libs/isPdfFilePasswordProtected/index.tsx b/src/libs/isPdfFilePasswordProtected/index.tsx
index f62e080a2a8d..95273aebaf8a 100644
--- a/src/libs/isPdfFilePasswordProtected/index.tsx
+++ b/src/libs/isPdfFilePasswordProtected/index.tsx
@@ -1,5 +1,5 @@
 import * as pdfjsLib from 'pdfjs-dist';
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 
 const isPdfFilePasswordProtected = (file: FileObject): Promise<boolean> =>
     new Promise((resolve) => {
diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/UploadStatement.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/UploadStatement.tsx
index 2815f9b85413..f24a9ec38511 100644
--- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/UploadStatement.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/UploadStatement.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {FileObject} from '@components/AttachmentModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
@@ -13,6 +12,7 @@ import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getLastFourDigits} from '@libs/BankAccountUtils';
 import {getFieldRequiredErrors} from '@libs/ValidationUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import WhyLink from '@pages/ReimbursementAccount/NonUSD/WhyLink';
 import {clearErrorFields, setDraftValues, setErrorFields} from '@userActions/FormActions';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/UploadOwnershipChart.tsx b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/UploadOwnershipChart.tsx
index b1225078eea8..ff42c1d1fc5d 100644
--- a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/UploadOwnershipChart.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/UploadOwnershipChart.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {FileObject} from '@components/AttachmentModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
@@ -10,8 +9,9 @@ import UploadFile from '@components/UploadFile';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import * as FormActions from '@userActions/FormActions';
+import {clearErrorFields, setDraftValues, setErrorFields} from '@libs/actions/FormActions';
+import {getFieldRequiredErrors} from '@libs/ValidationUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -31,7 +31,7 @@ function UploadOwnershipChart({onSubmit}: UploadOwnershipChartProps) {
     const defaultValue = reimbursementAccount?.achData?.additionalData?.corpay?.[ENTITY_CHART] ?? reimbursementAccountDraft?.[ENTITY_CHART] ?? [];
 
     const validate = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-        return ValidationUtils.getFieldRequiredErrors(values, [ENTITY_CHART]);
+        return getFieldRequiredErrors(values, [ENTITY_CHART]);
     }, []);
 
     const handleSubmit = useReimbursementAccountStepFormSubmit({
@@ -43,23 +43,23 @@ function UploadOwnershipChart({onSubmit}: UploadOwnershipChartProps) {
     const [uploadedOwnershipChartStatements, setUploadedOwnershipChartStatements] = useState<FileObject[]>(defaultValue);
 
     const handleSelectFile = (files: FileObject[]) => {
-        FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[ENTITY_CHART]: [...uploadedOwnershipChartStatements, ...files]});
+        setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[ENTITY_CHART]: [...uploadedOwnershipChartStatements, ...files]});
         setUploadedOwnershipChartStatements((prev) => [...prev, ...files]);
     };
 
     const handleRemoveFile = (fileUri: string) => {
         const newUploadedOwnershipChartStatements = uploadedOwnershipChartStatements.filter((file) => file.uri !== fileUri);
-        FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[ENTITY_CHART]: newUploadedOwnershipChartStatements});
+        setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[ENTITY_CHART]: newUploadedOwnershipChartStatements});
         setUploadedOwnershipChartStatements(newUploadedOwnershipChartStatements);
     };
 
     const setUploadError = (error: string) => {
         if (!error) {
-            FormActions.clearErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM);
+            clearErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM);
             return;
         }
 
-        FormActions.setErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[ENTITY_CHART]: {onUpload: error}});
+        setErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[ENTITY_CHART]: {onUpload: error}});
     };
     return (
         <FormProvider
diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx
index ed47b4bf235e..131e08217d19 100644
--- a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/UploadDocuments.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {FileObject} from '@components/AttachmentModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
@@ -11,9 +10,10 @@ import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
+import {setDraftValues} from '@libs/actions/FormActions';
+import {getFieldRequiredErrors} from '@libs/ValidationUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import WhyLink from '@pages/ReimbursementAccount/NonUSD/WhyLink';
-import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -39,7 +39,7 @@ function UploadDocuments({onNext, isEditing}: UploadDocumentsProps) {
     const [uploadedProofsOfAddress, setUploadedProofOfAddress] = useState<FileObject[]>(defaultValues[SIGNER_ADDRESS_PROOF]);
 
     const validate = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-        return ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+        return getFieldRequiredErrors(values, STEP_FIELDS);
     }, []);
 
     const handleSubmit = useReimbursementAccountStepFormSubmit({
@@ -49,24 +49,24 @@ function UploadDocuments({onNext, isEditing}: UploadDocumentsProps) {
     });
 
     const handleSelectIDFile = (files: FileObject[]) => {
-        FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: [...uploadedIDs, ...files]});
+        setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: [...uploadedIDs, ...files]});
         setUploadedID((prev) => [...prev, ...files]);
     };
 
     const handleRemoveIDFile = (fileUri: string) => {
         const newUploadedIDs = uploadedIDs.filter((file) => file.uri !== fileUri);
-        FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: newUploadedIDs});
+        setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_COPY_OF_ID]: newUploadedIDs});
         setUploadedID(newUploadedIDs);
     };
 
     const handleSelectProofOfAddressFile = (files: FileObject[]) => {
-        FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: [...uploadedProofsOfAddress, ...files]});
+        setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: [...uploadedProofsOfAddress, ...files]});
         setUploadedProofOfAddress((prev) => [...prev, ...files]);
     };
 
     const handleRemoveProofOfAddressFile = (fileUri: string) => {
         const newUploadedProofsOfAddress = uploadedProofsOfAddress.filter((file) => file.uri !== fileUri);
-        FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: newUploadedProofsOfAddress});
+        setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[SIGNER_ADDRESS_PROOF]: newUploadedProofsOfAddress});
         setUploadedProofOfAddress(newUploadedProofsOfAddress);
     };
 
diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx
deleted file mode 100644
index e3637601c8b3..000000000000
--- a/src/pages/ReportAvatar.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, {useMemo} from 'react';
-import {useOnyx} from 'react-native-onyx';
-import AttachmentModal from '@components/AttachmentModal';
-import Navigation from '@libs/Navigation/Navigation';
-import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {AuthScreensParamList} from '@libs/Navigation/types';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as UserUtils from '@libs/UserUtils';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type SCREENS from '@src/SCREENS';
-
-type ReportAvatarProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT_AVATAR>;
-
-function ReportAvatar({route}: ReportAvatarProps) {
-    const {reportID, policyID} = route.params;
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
-    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
-
-    const attachment = useMemo(() => {
-        if (ReportUtils.isGroupChat(report) && !ReportUtils.isThread(report)) {
-            return {
-                source: report?.avatarUrl ? UserUtils.getFullSizeAvatar(report.avatarUrl, 0) : ReportUtils.getDefaultGroupAvatar(report?.reportID),
-                headerTitle: ReportUtils.getReportName(report),
-                isWorkspaceAvatar: false,
-            };
-        }
-
-        return {
-            source: UserUtils.getFullSizeAvatar(ReportUtils.getWorkspaceIcon(report).source, 0),
-            headerTitle: ReportUtils.getPolicyName({report, policy}),
-            // In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar
-            originalFileName: policy?.originalFileName ?? policy?.id ?? report?.policyID,
-            isWorkspaceAvatar: true,
-        };
-    }, [report, policy]);
-
-    return (
-        <AttachmentModal
-            headerTitle={attachment.headerTitle}
-            defaultOpen
-            source={attachment.source}
-            onModalClose={() => {
-                Navigation.goBack(report?.reportID ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID) : undefined);
-            }}
-            isWorkspaceAvatar={attachment.isWorkspaceAvatar}
-            maybeIcon
-            originalFileName={attachment.originalFileName}
-            shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
-            isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
-        />
-    );
-}
-
-ReportAvatar.displayName = 'ReportAvatar';
-export default ReportAvatar;
diff --git a/src/pages/TransactionReceiptPage.tsx b/src/pages/TransactionReceiptPage.tsx
deleted file mode 100644
index 52ce46105e5d..000000000000
--- a/src/pages/TransactionReceiptPage.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, {useEffect} from 'react';
-import {useOnyx} from 'react-native-onyx';
-import AttachmentModal from '@components/AttachmentModal';
-import {openReport} from '@libs/actions/Report';
-import Navigation from '@libs/Navigation/Navigation';
-import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {AuthScreensParamList, RootStackParamList, State} from '@libs/Navigation/types';
-import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
-import {getReportAction, isTrackExpenseAction as isTrackExpenseReportReportActionsUtils} from '@libs/ReportActionsUtils';
-import {
-    canEditFieldOfMoneyRequest,
-    isMoneyRequestReport,
-    isOneTransactionThread as isOneTransactionThreadReportUtils,
-    isTrackExpenseReport as isTrackExpenseReportReportUtils,
-} from '@libs/ReportUtils';
-import {hasEReceipt, hasReceiptSource} from '@libs/TransactionUtils';
-import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import navigationRef from '@navigation/navigationRef';
-import CONST from '@src/CONST';
-import NAVIGATORS from '@src/NAVIGATORS';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type SCREENS from '@src/SCREENS';
-
-type TransactionReceiptProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.TRANSACTION_RECEIPT>;
-
-function TransactionReceipt({route}: TransactionReceiptProps) {
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? CONST.DEFAULT_NUMBER_ID}`);
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${route.params.transactionID ?? CONST.DEFAULT_NUMBER_ID}`);
-    const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID ?? CONST.DEFAULT_NUMBER_ID}`);
-    const receiptURIs = getThumbnailAndImageURIs(transaction);
-
-    const imageSource = tryResolveUrlFromApiRoot(receiptURIs.image ?? '');
-
-    const isLocalFile = receiptURIs.isLocalFile;
-    const readonly = route.params.readonly === 'true';
-    const isFromReviewDuplicates = route.params.isFromReviewDuplicates === 'true';
-
-    const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
-    const canEditReceipt = canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT);
-    const canDeleteReceipt = canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT, true);
-    const isEReceipt = transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction);
-    const isTrackExpenseAction = isTrackExpenseReportReportActionsUtils(parentReportAction);
-
-    useEffect(() => {
-        if (report && transaction) {
-            return;
-        }
-        openReport(route.params.reportID);
-        // I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render.
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, []);
-
-    const onModalClose = () => {
-        // Receipt Page can be opened either from Reports or from Search RHP view
-        // We have to handle going back to correct screens, if it was opened from RHP just close the modal, otherwise go to Report Page
-        const rootState = navigationRef.getRootState() as State<RootStackParamList>;
-        const secondToLastRoute = rootState.routes.at(-2);
-        if (secondToLastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
-            Navigation.dismissModal();
-        } else {
-            const isOneTransactionThread = isOneTransactionThreadReportUtils(report?.reportID, report?.parentReportID, parentReportAction);
-            Navigation.dismissModal(isOneTransactionThread ? report?.parentReportID : report?.reportID);
-        }
-    };
-
-    const moneyRequestReportID = isMoneyRequestReport(report) ? report?.reportID : report?.parentReportID;
-    const isTrackExpenseReport = isTrackExpenseReportReportUtils(report);
-
-    // eslint-disable-next-line rulesdir/no-negated-variables
-    const shouldShowNotFoundPage =
-        isTrackExpenseReport || transaction?.reportID === CONST.REPORT.SPLIT_REPORTID || isFromReviewDuplicates ? !transaction : moneyRequestReportID !== transaction?.reportID;
-
-    return (
-        <AttachmentModal
-            source={imageSource}
-            isAuthTokenRequired={!isLocalFile}
-            report={report}
-            isReceiptAttachment
-            canEditReceipt={canEditReceipt && !readonly}
-            canDeleteReceipt={canDeleteReceipt && !readonly}
-            allowDownload={!isEReceipt}
-            isTrackExpenseAction={isTrackExpenseAction}
-            originalFileName={receiptURIs?.filename}
-            defaultOpen
-            onModalClose={onModalClose}
-            isLoading={!transaction && reportMetadata?.isLoadingInitialReportActions}
-            shouldShowNotFoundPage={shouldShowNotFoundPage}
-        />
-    );
-}
-
-TransactionReceipt.displayName = 'TransactionReceipt';
-
-export default TransactionReceipt;
diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx
index c36391ecec70..2466bb92cbd0 100644
--- a/src/pages/home/report/PureReportActionItem.tsx
+++ b/src/pages/home/report/PureReportActionItem.tsx
@@ -110,6 +110,7 @@ import type {MissingPaymentMethod} from '@libs/ReportUtils';
 import SelectionScraper from '@libs/SelectionScraper';
 import shouldRenderAddPaymentCard from '@libs/shouldRenderAppPaymentCard';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
 import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
 import {hideEmojiPicker, isActive} from '@userActions/EmojiPickerAction';
 import {acceptJoinRequest, declineJoinRequest} from '@userActions/Policy/Member';
@@ -138,7 +139,6 @@ import ReportActionItemMessage from './ReportActionItemMessage';
 import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
 import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemThread from './ReportActionItemThread';
-import ReportAttachmentsContext from './ReportAttachmentsContext';
 
 type PureReportActionItemProps = {
     /** Report for this action */
@@ -365,7 +365,7 @@ function PureReportActionItem({
     const [isHidden, setIsHidden] = useState(false);
     const [moderationDecision, setModerationDecision] = useState<OnyxTypes.DecisionName>(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
     const reactionListRef = useContext(ReactionListContext);
-    const {updateHiddenAttachments} = useContext(ReportAttachmentsContext);
+    const {updateHiddenAttachments} = useContext(AttachmentModalContext);
     const textInputRef = useRef<TextInput | HTMLTextAreaElement>(null);
     const popoverAnchorRef = useRef<Exclude<ContextMenuAnchor, TextInput>>(null);
     const downloadedPreviews = useRef<string[]>([]);
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
index 463ea3683c8d..225e3801c61a 100644
--- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
+++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
@@ -3,7 +3,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
-import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -22,6 +21,7 @@ import getIconForAction from '@libs/getIconForAction';
 import Navigation from '@libs/Navigation/Navigation';
 import {canCreateTaskInReport, getPayeeName, temporary_getMoneyRequestOptions} from '@libs/ReportUtils';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import {startMoneyRequest} from '@userActions/IOU';
 import {close} from '@userActions/Modal';
 import {setIsComposerFullSize} from '@userActions/Report';
@@ -41,7 +41,7 @@ type AttachmentPickerWithMenuItemsProps = {
     report: OnyxEntry<OnyxTypes.Report>;
 
     /** Callback to open the file in the modal */
-    displayFileInModal: (url: FileObject) => void;
+    onAttachmentPicked: (url: FileObject) => void;
 
     /** Whether or not the composer is full size */
     isComposerFullSize: boolean;
@@ -95,7 +95,7 @@ type AttachmentPickerWithMenuItemsProps = {
 function AttachmentPickerWithMenuItems({
     report,
     reportParticipantIDs,
-    displayFileInModal,
+    onAttachmentPicked,
     isComposerFullSize,
     reportID,
     isBlockedFromConcierge,
@@ -246,7 +246,7 @@ function AttachmentPickerWithMenuItems({
                 const triggerAttachmentPicker = () => {
                     onTriggerAttachmentPicker();
                     openPicker({
-                        onPicked: (data) => displayFileInModal(data.at(0) ?? {}),
+                        onPicked: (data) => onAttachmentPicked(data.at(0) ?? {}),
                         onCanceled: onCanceledAttachmentPicker,
                     });
                 };
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
index f88c39fa9457..c6b832c64a10 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
@@ -17,7 +17,6 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import {useAnimatedRef, useSharedValue} from 'react-native-reanimated';
 import type {Emoji} from '@assets/emojis/types';
-import type {FileObject} from '@components/AttachmentModal';
 import type {MeasureParentContainerAndCursorCallback} from '@components/AutoCompleteSuggestions/types';
 import Composer from '@components/Composer';
 import type {CustomSelectionChangeEvent, TextSelection} from '@components/Composer/types';
@@ -28,19 +27,24 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Browser from '@libs/Browser';
+import {isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction';
+import type {OnEmojiSelected} from '@libs/actions/EmojiPickerAction';
+import {inputFocusChange} from '@libs/actions/InputFocus';
+import {areAllModalsHidden} from '@libs/actions/Modal';
+import {broadcastUserIsTyping, saveReportActionDraft, saveReportDraftComment} from '@libs/actions/Report';
+import {isMobileSafari} from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import {forceClearInput} from '@libs/ComponentUtils';
-import * as ComposerUtils from '@libs/ComposerUtils';
+import {canSkipTriggerHotkeys, findCommonSuffixLength, insertText, insertWhiteSpaceAtIndex} from '@libs/ComposerUtils';
 import convertToLTRForComposer from '@libs/convertToLTRForComposer';
 import {getDraftComment} from '@libs/DraftCommentUtils';
-import * as EmojiUtils from '@libs/EmojiUtils';
+import {containsOnlyEmojis, extractEmojis, getAddedEmojis, getPreferredSkinToneIndex, replaceAndExtractEmojis} from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import getPlatform from '@libs/getPlatform';
-import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener';
+import {addKeyDownPressListener, removeKeyDownPressListener} from '@libs/KeyboardShortcut/KeyDownPressListener';
 import Parser from '@libs/Parser';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import * as ReportUtils from '@libs/ReportUtils';
+import {isValidReportIDFromPath, shouldAutoFocusOnKeyPress} from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
 import getCursorPosition from '@pages/home/report/ReportActionCompose/getCursorPosition';
@@ -48,13 +52,10 @@ import getScrollPosition from '@pages/home/report/ReportActionCompose/getScrollP
 import type {SuggestionsRef} from '@pages/home/report/ReportActionCompose/ReportActionCompose';
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
-import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
-import * as InputFocus from '@userActions/InputFocus';
-import * as Modal from '@userActions/Modal';
-import * as Report from '@userActions/Report';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type * as OnyxTypes from '@src/types/onyx';
+import type {ReportAction} from '@src/types/onyx';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type SyncSelection = {
@@ -93,7 +94,7 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> & {
     inputPlaceholder: string;
 
     /** Function to display a file in a modal */
-    displayFileInModal: (file: FileObject) => void;
+    onFilePasted: (file: FileObject) => void;
 
     /** Whether the user is blocked from concierge */
     isBlockedFromConcierge: boolean;
@@ -126,7 +127,7 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> & {
     isNextModalWillOpenRef: MutableRefObject<boolean | null>;
 
     /** The last report action */
-    lastReportAction?: OnyxEntry<OnyxTypes.ReportAction>;
+    lastReportAction?: OnyxEntry<ReportAction>;
 
     /** Whether to include chronos */
     includeChronos?: boolean;
@@ -155,7 +156,7 @@ type SwitchToCurrentReportProps = {
 type ComposerRef = {
     blur: () => void;
     focus: (shouldDelay?: boolean) => void;
-    replaceSelectionWithText: EmojiPickerActions.OnEmojiSelected;
+    replaceSelectionWithText: OnEmojiSelected;
     getCurrentText: () => string;
     isFocused: () => boolean;
     /**
@@ -174,7 +175,7 @@ const isIOSNative = getPlatform() === CONST.PLATFORM.IOS;
  */
 const debouncedBroadcastUserIsTyping = lodashDebounce(
     (reportID: string) => {
-        Report.broadcastUserIsTyping(reportID);
+        broadcastUserIsTyping(reportID);
     },
     1000,
     {
@@ -209,7 +210,7 @@ function ComposerWithSuggestions(
         isComposerFullSize,
         isMenuVisible,
         inputPlaceholder,
-        displayFileInModal,
+        onFilePasted,
         isBlockedFromConcierge,
         disabled,
         setIsCommentEmpty,
@@ -247,7 +248,7 @@ function ComposerWithSuggestions(
     const draftComment = getDraftComment(reportID) ?? '';
     const [value, setValue] = useState(() => {
         if (draftComment) {
-            emojisPresentBefore.current = EmojiUtils.extractEmojis(draftComment);
+            emojisPresentBefore.current = extractEmojis(draftComment);
         }
         return draftComment;
     });
@@ -255,7 +256,7 @@ function ComposerWithSuggestions(
     const commentRef = useRef(value);
 
     const [modal] = useOnyx(ONYXKEYS.MODAL);
-    const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {selector: EmojiUtils.getPreferredSkinToneIndex});
+    const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {selector: getPreferredSkinToneIndex});
     const [editFocused] = useOnyx(ONYXKEYS.INPUT_FOCUSED);
 
     const lastTextRef = useRef(value);
@@ -266,7 +267,7 @@ function ComposerWithSuggestions(
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const maxComposerLines = shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
 
-    const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;
+    const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && areAllModalsHidden() && isFocused && !didHideComposerInput;
 
     const valueRef = useRef(value);
     valueRef.current = value;
@@ -307,7 +308,7 @@ function ComposerWithSuggestions(
     const debouncedSaveReportComment = useMemo(
         () =>
             lodashDebounce((selectedReportID: string, newComment: string | null) => {
-                Report.saveReportDraftComment(selectedReportID, newComment);
+                saveReportDraftComment(selectedReportID, newComment);
                 isCommentPendingSaved.current = false;
             }, 1000),
         [],
@@ -319,7 +320,7 @@ function ComposerWithSuggestions(
                 callback();
                 return;
             }
-            Report.saveReportDraftComment(preexistingReportID, commentRef.current, callback);
+            saveReportDraftComment(preexistingReportID, commentRef.current, callback);
         });
 
         return () => {
@@ -350,7 +351,7 @@ function ComposerWithSuggestions(
 
             if (currentIndex < newText.length) {
                 startIndex = currentIndex;
-                const commonSuffixLength = ComposerUtils.findCommonSuffixLength(prevText, newText, selection?.end ?? 0);
+                const commonSuffixLength = findCommonSuffixLength(prevText, newText, selection?.end ?? 0);
                 // if text is getting pasted over find length of common suffix and subtract it from new text length
                 if (commonSuffixLength > 0 || (selection?.end ?? 0) - selection.start > 0) {
                     endIndex = newText.length - commonSuffixLength;
@@ -374,11 +375,11 @@ function ComposerWithSuggestions(
         (commentValue: string, shouldDebounceSaveComment?: boolean) => {
             raiseIsScrollLikelyLayoutTriggered();
             const {startIndex, endIndex, diff} = findNewlyAddedChars(lastTextRef.current, commentValue);
-            const isEmojiInserted = diff.length && endIndex > startIndex && diff.trim() === diff && EmojiUtils.containsOnlyEmojis(diff);
-            const commentWithSpaceInserted = isEmojiInserted ? ComposerUtils.insertWhiteSpaceAtIndex(commentValue, endIndex) : commentValue;
-            const {text: newComment, emojis, cursorPosition} = EmojiUtils.replaceAndExtractEmojis(commentWithSpaceInserted, preferredSkinTone, preferredLocale);
+            const isEmojiInserted = diff.length && endIndex > startIndex && diff.trim() === diff && containsOnlyEmojis(diff);
+            const commentWithSpaceInserted = isEmojiInserted ? insertWhiteSpaceAtIndex(commentValue, endIndex) : commentValue;
+            const {text: newComment, emojis, cursorPosition} = replaceAndExtractEmojis(commentWithSpaceInserted, preferredSkinTone, preferredLocale);
             if (emojis.length) {
-                const newEmojis = EmojiUtils.getAddedEmojis(emojis, emojisPresentBefore.current);
+                const newEmojis = getAddedEmojis(emojis, emojisPresentBefore.current);
                 if (newEmojis.length) {
                     // Ensure emoji suggestions are hidden after inserting emoji even when the selection is not changed
                     if (suggestionsRef.current) {
@@ -417,7 +418,7 @@ function ComposerWithSuggestions(
                 isCommentPendingSaved.current = true;
                 debouncedSaveReportComment(reportID, newCommentConverted);
             } else {
-                Report.saveReportDraftComment(reportID, newCommentConverted);
+                saveReportDraftComment(reportID, newCommentConverted);
             }
             if (newCommentConverted) {
                 debouncedBroadcastUserIsTyping(reportID);
@@ -433,7 +434,7 @@ function ComposerWithSuggestions(
         (text: string) => {
             // selection replacement should be debounced to avoid conflicts with text typing
             // (f.e. when emoji is being picked and 1 second still did not pass after user finished typing)
-            updateComment(ComposerUtils.insertText(commentRef.current, selection, text), true);
+            updateComment(insertText(commentRef.current, selection, text), true);
         },
         [selection, updateComment],
     );
@@ -441,7 +442,7 @@ function ComposerWithSuggestions(
     const handleKeyPress = useCallback(
         (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
             const webEvent = event as unknown as KeyboardEvent;
-            if (!webEvent || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
+            if (!webEvent || canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
                 return;
             }
 
@@ -461,7 +462,7 @@ function ComposerWithSuggestions(
                 webEvent.preventDefault();
                 if (lastReportAction) {
                     const message = Array.isArray(lastReportAction?.message) ? lastReportAction?.message?.at(-1) ?? null : lastReportAction?.message ?? null;
-                    Report.saveReportActionDraft(reportID, lastReportAction, Parser.htmlToMarkdown(message?.html ?? ''));
+                    saveReportActionDraft(reportID, lastReportAction, Parser.htmlToMarkdown(message?.html ?? ''));
                 }
             }
             // Flag emojis like "Wales" have several code points. Default backspace key action does not remove such flag emojis completely.
@@ -544,7 +545,7 @@ function ComposerWithSuggestions(
         if (!suggestionsRef.current) {
             return false;
         }
-        InputFocus.inputFocusChange(false);
+        inputFocusChange(false);
         return suggestionsRef.current.setShouldBlockSuggestionCalc(false);
     }, [suggestionsRef]);
 
@@ -579,7 +580,7 @@ function ComposerWithSuggestions(
      */
     const checkComposerVisibility = useCallback(() => {
         // Checking whether the screen is focused or not, helps avoid `modal.isVisible` false when popups are closed, even if the modal is opened.
-        const isComposerCoveredUp = !isFocused || EmojiPickerActions.isEmojiPickerVisible() || isMenuVisible || !!modal?.isVisible || modal?.willAlertModalBecomeVisible;
+        const isComposerCoveredUp = !isFocused || isEmojiPickerVisible() || isMenuVisible || !!modal?.isVisible || modal?.willAlertModalBecomeVisible;
         return !isComposerCoveredUp;
     }, [isMenuVisible, modal, isFocused]);
 
@@ -590,7 +591,7 @@ function ComposerWithSuggestions(
                 return;
             }
 
-            if (!ReportUtils.shouldAutoFocusOnKeyPress(e)) {
+            if (!shouldAutoFocusOnKeyPress(e)) {
                 return;
             }
 
@@ -622,21 +623,21 @@ function ComposerWithSuggestions(
     }, []);
 
     useEffect(() => {
-        const unsubscribeNavigationBlur = navigation.addListener('blur', () => KeyDownListener.removeKeyDownPressListener(focusComposerOnKeyPress));
+        const unsubscribeNavigationBlur = navigation.addListener('blur', () => removeKeyDownPressListener(focusComposerOnKeyPress));
         const unsubscribeNavigationFocus = navigation.addListener('focus', () => {
-            KeyDownListener.addKeyDownPressListener(focusComposerOnKeyPress);
+            addKeyDownPressListener(focusComposerOnKeyPress);
             // The report isn't unmounted and can be focused again after going back from another report so we should update the composerRef again
             ReportActionComposeFocusManager.composerRef.current = textInputRef.current;
             setUpComposeFocusManager();
         });
-        KeyDownListener.addKeyDownPressListener(focusComposerOnKeyPress);
+        addKeyDownPressListener(focusComposerOnKeyPress);
 
         setUpComposeFocusManager();
 
         return () => {
             ReportActionComposeFocusManager.clear();
 
-            KeyDownListener.removeKeyDownPressListener(focusComposerOnKeyPress);
+            removeKeyDownPressListener(focusComposerOnKeyPress);
             unsubscribeNavigationBlur();
             unsubscribeNavigationFocus();
         };
@@ -672,7 +673,7 @@ function ComposerWithSuggestions(
         }
 
         if (editFocused) {
-            InputFocus.inputFocusChange(false);
+            inputFocusChange(false);
             return;
         }
         focus(true);
@@ -807,7 +808,7 @@ function ComposerWithSuggestions(
                     onClick={setShouldBlockSuggestionCalcToFalse}
                     onPasteFile={(file) => {
                         textInputRef.current?.blur();
-                        displayFileInModal(file);
+                        onFilePasted(file);
                     }}
                     onClear={onClear}
                     isDisabled={isBlockedFromConcierge || disabled}
@@ -819,14 +820,14 @@ function ComposerWithSuggestions(
                     shouldCalculateCaretPosition
                     onLayout={onLayout}
                     onScroll={hideSuggestionMenu}
-                    shouldContainScroll={Browser.isMobileSafari()}
+                    shouldContainScroll={isMobileSafari()}
                     isGroupPolicyReport={isGroupPolicyReport}
                     showSoftInputOnFocus={showSoftInputOnFocus}
                     onTouchStart={() => {
                         if (showSoftInputOnFocus) {
                             return;
                         }
-                        if (Browser.isMobileSafari()) {
+                        if (isMobileSafari()) {
                             setTimeout(() => {
                                 setShowSoftInputOnFocus(true);
                             }, CONST.ANIMATED_TRANSITION);
@@ -851,7 +852,7 @@ function ComposerWithSuggestions(
                 resetKeyboardInput={resetKeyboardInput}
             />
 
-            {ReportUtils.isValidReportIDFromPath(reportID) && (
+            {isValidReportIDFromPath(reportID) && (
                 <SilentCommentUpdater
                     reportID={reportID}
                     value={value}
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index 0a461bdf756a..4564a32119ab 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -1,15 +1,13 @@
 import {useIsFocused} from '@react-navigation/native';
 import lodashDebounce from 'lodash/debounce';
 import noop from 'lodash/noop';
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFocusEventData, TextInputSelectionChangeEventData} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import {runOnUI, useSharedValue} from 'react-native-reanimated';
 import type {Emoji} from '@assets/emojis/types';
-import type {FileObject} from '@components/AttachmentModal';
-import AttachmentModal from '@components/AttachmentModal';
 import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton';
 import ExceededCommentLength from '@components/ExceededCommentLength';
 import ImportedStateIndicator from '@components/ImportedStateIndicator';
@@ -33,6 +31,7 @@ import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import DomUtils from '@libs/DomUtils';
 import {getDraftComment} from '@libs/DraftCommentUtils';
 import getModalState from '@libs/getModalState';
+import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import {canShowReportRecipientLocalTime, chatIncludesChronos, chatIncludesConcierge, getReportRecipientAccountIDs} from '@libs/ReportUtils';
 import playSound, {SOUNDS} from '@libs/Sound';
@@ -40,6 +39,8 @@ import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutsi
 import ParticipantLocalTime from '@pages/home/report/ParticipantLocalTime';
 import ReportDropUI from '@pages/home/report/ReportDropUI';
 import ReportTypingIndicator from '@pages/home/report/ReportTypingIndicator';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import variables from '@styles/variables';
 import {hideEmojiPicker, isActive as isActiveEmojiPickerAction} from '@userActions/EmojiPickerAction';
 import {addAttachment as addAttachmentReportActions, setIsComposerFullSize} from '@userActions/Report';
@@ -47,6 +48,7 @@ import Timing from '@userActions/Timing';
 import {isBlockedFromConcierge as isBlockedFromConciergeUserAction} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -414,6 +416,22 @@ function ReportActionCompose({
         [isComposerFullSize, reportID, debouncedValidate],
     );
 
+    const reportAttachmentsContext = useContext(AttachmentModalContext);
+    const showAttachmentModal = useCallback(
+        (file: FileObject) => {
+            const attachmentId = reportAttachmentsContext.addAttachment({
+                file,
+                headerTitle: translate('reportActionCompose.sendAttachment'),
+                onConfirm: addAttachment,
+                onModalShow: () => setIsAttachmentPreviewActive(true),
+                onModalHide: onAttachmentPreviewClose,
+                shouldDisableSendButton: !!exceededMaxLength,
+            });
+            Navigation.navigate(ROUTES.ATTACHMENTS.getRoute({attachmentId}));
+        },
+        [addAttachment, exceededMaxLength, onAttachmentPreviewClose, reportAttachmentsContext, translate],
+    );
+
     return (
         <View style={[shouldShowReportRecipientLocalTime && !isOffline && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}>
             <OfflineWithFeedback pendingAction={pendingAction}>
@@ -451,87 +469,75 @@ function ReportActionCompose({
                                 !!exceededMaxLength && styles.borderColorDanger,
                             ]}
                         >
-                            <AttachmentModal
-                                headerTitle={translate('reportActionCompose.sendAttachment')}
-                                onConfirm={addAttachment}
-                                onModalShow={() => setIsAttachmentPreviewActive(true)}
-                                onModalHide={onAttachmentPreviewClose}
-                                shouldDisableSendButton={!!exceededMaxLength}
-                            >
-                                {({displayFileInModal}) => (
-                                    <>
-                                        <AttachmentPickerWithMenuItems
-                                            displayFileInModal={displayFileInModal}
-                                            reportID={reportID}
-                                            report={report}
-                                            reportParticipantIDs={reportParticipantIDs}
-                                            isComposerFullSize={isComposerFullSize}
-                                            isBlockedFromConcierge={isBlockedFromConcierge}
-                                            disabled={!!disabled}
-                                            setMenuVisibility={setMenuVisibility}
-                                            isMenuVisible={isMenuVisible}
-                                            onTriggerAttachmentPicker={onTriggerAttachmentPicker}
-                                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
-                                            onAddActionPressed={onAddActionPressed}
-                                            onItemSelected={onItemSelected}
-                                            onCanceledAttachmentPicker={() => {
-                                                if (!shouldFocusInputOnScreenFocus) {
-                                                    return;
-                                                }
-                                                focus();
-                                            }}
-                                            actionButtonRef={actionButtonRef}
-                                            shouldDisableAttachmentItem={!!exceededMaxLength}
-                                        />
-                                        <ComposerWithSuggestions
-                                            ref={(ref) => {
-                                                composerRef.current = ref ?? undefined;
-                                                composerRefShared.set({
-                                                    clear: ref?.clear,
-                                                });
-                                            }}
-                                            suggestionsRef={suggestionsRef}
-                                            isNextModalWillOpenRef={isNextModalWillOpenRef}
-                                            isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered}
-                                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
-                                            reportID={reportID}
-                                            policyID={report?.policyID}
-                                            includeChronos={chatIncludesChronos(report)}
-                                            isGroupPolicyReport={isGroupPolicyReport}
-                                            lastReportAction={lastReportAction}
-                                            isMenuVisible={isMenuVisible}
-                                            inputPlaceholder={inputPlaceholder}
-                                            isComposerFullSize={isComposerFullSize}
-                                            displayFileInModal={displayFileInModal}
-                                            onCleared={submitForm}
-                                            isBlockedFromConcierge={isBlockedFromConcierge}
-                                            disabled={!!disabled}
-                                            setIsCommentEmpty={setIsCommentEmpty}
-                                            handleSendMessage={handleSendMessage}
-                                            shouldShowComposeInput={shouldShowComposeInput}
-                                            onFocus={onFocus}
-                                            onBlur={onBlur}
-                                            measureParentContainer={measureContainer}
-                                            showSoftInputOnFocus={showSoftInputOnFocus}
-                                            setShowSoftInputOnFocus={setShowSoftInputOnFocus}
-                                            onValueChange={onValueChange}
-                                            didHideComposerInput={didHideComposerInput}
-                                        />
-                                        <ReportDropUI
-                                            onDrop={(event: DragEvent) => {
-                                                if (isAttachmentPreviewActive) {
-                                                    return;
-                                                }
-                                                const data = event.dataTransfer?.files[0];
-                                                if (data) {
-                                                    data.uri = URL.createObjectURL(data);
-                                                    displayFileInModal(data);
-                                                }
-                                            }}
-                                        />
-                                    </>
-                                )}
-                            </AttachmentModal>
+                            <AttachmentPickerWithMenuItems
+                                onAttachmentPicked={showAttachmentModal}
+                                reportID={reportID}
+                                report={report}
+                                reportParticipantIDs={reportParticipantIDs}
+                                isComposerFullSize={isComposerFullSize}
+                                isBlockedFromConcierge={isBlockedFromConcierge}
+                                disabled={!!disabled}
+                                setMenuVisibility={setMenuVisibility}
+                                isMenuVisible={isMenuVisible}
+                                onTriggerAttachmentPicker={onTriggerAttachmentPicker}
+                                raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
+                                onAddActionPressed={onAddActionPressed}
+                                onItemSelected={onItemSelected}
+                                onCanceledAttachmentPicker={() => {
+                                    if (!shouldFocusInputOnScreenFocus) {
+                                        return;
+                                    }
+                                    focus();
+                                }}
+                                actionButtonRef={actionButtonRef}
+                                shouldDisableAttachmentItem={!!exceededMaxLength}
+                            />
+                            <ComposerWithSuggestions
+                                ref={(ref) => {
+                                    composerRef.current = ref ?? undefined;
+                                    composerRefShared.set({
+                                        clear: ref?.clear,
+                                    });
+                                }}
+                                suggestionsRef={suggestionsRef}
+                                isNextModalWillOpenRef={isNextModalWillOpenRef}
+                                isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered}
+                                raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
+                                reportID={reportID}
+                                policyID={report?.policyID}
+                                includeChronos={chatIncludesChronos(report)}
+                                isGroupPolicyReport={isGroupPolicyReport}
+                                lastReportAction={lastReportAction}
+                                isMenuVisible={isMenuVisible}
+                                inputPlaceholder={inputPlaceholder}
+                                isComposerFullSize={isComposerFullSize}
+                                onFilePasted={showAttachmentModal}
+                                onCleared={submitForm}
+                                isBlockedFromConcierge={isBlockedFromConcierge}
+                                disabled={!!disabled}
+                                setIsCommentEmpty={setIsCommentEmpty}
+                                handleSendMessage={handleSendMessage}
+                                shouldShowComposeInput={shouldShowComposeInput}
+                                onFocus={onFocus}
+                                onBlur={onBlur}
+                                measureParentContainer={measureContainer}
+                                showSoftInputOnFocus={showSoftInputOnFocus}
+                                setShowSoftInputOnFocus={setShowSoftInputOnFocus}
+                                onValueChange={onValueChange}
+                                didHideComposerInput={didHideComposerInput}
+                            />
+                            <ReportDropUI
+                                onDrop={(event: DragEvent) => {
+                                    if (isAttachmentPreviewActive) {
+                                        return;
+                                    }
+                                    const data = event.dataTransfer?.files[0];
+                                    if (data) {
+                                        data.uri = URL.createObjectURL(data);
+                                        showAttachmentModal(data);
+                                    }
+                                }}
+                            />
                             {canUseTouchScreen() && isMediumScreenWidth ? null : (
                                 <EmojiPickerButton
                                     isDisabled={isBlockedFromConcierge || disabled}
diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
deleted file mode 100644
index dfac22b23f06..000000000000
--- a/src/pages/home/report/ReportAttachments.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, {useCallback} from 'react';
-import {useOnyx} from 'react-native-onyx';
-import AttachmentModal from '@components/AttachmentModal';
-import type {Attachment} from '@components/Attachments/types';
-import ComposerFocusManager from '@libs/ComposerFocusManager';
-import Navigation from '@libs/Navigation/Navigation';
-import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {AuthScreensParamList} from '@libs/Navigation/types';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type SCREENS from '@src/SCREENS';
-
-type ReportAttachmentsProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.ATTACHMENTS>;
-
-function ReportAttachments({route}: ReportAttachmentsProps) {
-    const reportID = route.params.reportID;
-    const type = route.params.type;
-    const accountID = route.params.accountID;
-    const isAuthTokenRequired = route.params.isAuthTokenRequired;
-    const attachmentLink = route.params.attachmentLink;
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`);
-    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
-    const fileName = route.params?.fileName;
-
-    // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
-    const source = Number(route.params.source) || route.params.source;
-
-    const onCarouselAttachmentChange = useCallback(
-        (attachment: Attachment) => {
-            const routeToNavigate = ROUTES.ATTACHMENTS.getRoute(
-                reportID,
-                type,
-                String(attachment.source),
-                Number(accountID),
-                attachment?.isAuthTokenRequired,
-                attachment?.file?.name,
-                attachment?.attachmentLink,
-            );
-            Navigation.navigate(routeToNavigate);
-        },
-        [reportID, type, accountID],
-    );
-
-    return (
-        <AttachmentModal
-            accountID={Number(accountID)}
-            type={type}
-            allowDownload
-            defaultOpen
-            report={report}
-            source={source}
-            onModalClose={() => {
-                Navigation.dismissModal();
-                // This enables Composer refocus when the attachments modal is closed by the browser navigation
-                ComposerFocusManager.setReadyToFocus();
-            }}
-            onCarouselAttachmentChange={onCarouselAttachmentChange}
-            shouldShowNotFoundPage={!isLoadingApp && type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID}
-            isAuthTokenRequired={!!isAuthTokenRequired}
-            attachmentLink={attachmentLink ?? ''}
-            originalFileName={fileName ?? ''}
-        />
-    );
-}
-
-ReportAttachments.displayName = 'ReportAttachments';
-
-export default ReportAttachments;
diff --git a/src/pages/home/report/ReportAttachmentsContext.tsx b/src/pages/home/report/ReportAttachmentsContext.tsx
deleted file mode 100644
index d118d4d8bee9..000000000000
--- a/src/pages/home/report/ReportAttachmentsContext.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {useEffect, useMemo, useRef} from 'react';
-import useCurrentReportID from '@hooks/useCurrentReportID';
-import type ChildrenProps from '@src/types/utils/ChildrenProps';
-
-type ReportAttachmentsContextValue = {
-    isAttachmentHidden: (reportActionID: string) => boolean;
-    updateHiddenAttachments: (reportActionID: string, isHidden: boolean) => void;
-};
-
-const ReportAttachmentsContext = React.createContext<ReportAttachmentsContextValue>({
-    isAttachmentHidden: () => false,
-    updateHiddenAttachments: () => {},
-});
-
-function ReportAttachmentsProvider({children}: ChildrenProps) {
-    const currentReportID = useCurrentReportID();
-    const hiddenAttachments = useRef<Record<string, boolean>>({});
-
-    useEffect(() => {
-        // We only want to store the attachment visibility for the current report.
-        // If the current report ID changes, clear the ref.
-        hiddenAttachments.current = {};
-    }, [currentReportID]);
-
-    const contextValue = useMemo(
-        () => ({
-            isAttachmentHidden: (reportActionID: string) => hiddenAttachments.current[reportActionID],
-            updateHiddenAttachments: (reportActionID: string, value: boolean) => {
-                hiddenAttachments.current = {
-                    ...hiddenAttachments.current,
-                    [reportActionID]: value,
-                };
-            },
-        }),
-        [],
-    );
-
-    return <ReportAttachmentsContext.Provider value={contextValue}>{children}</ReportAttachmentsContext.Provider>;
-}
-
-ReportAttachmentsProvider.displayName = 'ReportAttachmentsProvider';
-
-export default ReportAttachmentsContext;
-export {ReportAttachmentsProvider};
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
index d99807bc9759..087d88434607 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
@@ -12,7 +12,6 @@ import {useCameraDevice} from 'react-native-vision-camera';
 import type {TupleToUnion} from 'type-fest';
 import Hand from '@assets/images/hand.svg';
 import Shutter from '@assets/images/shutter.svg';
-import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import Button from '@components/Button';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -43,6 +42,7 @@ import {getDefaultTaxCode} from '@libs/TransactionUtils';
 import StepScreenWrapper from '@pages/iou/request/step/StepScreenWrapper';
 import withFullTransactionOrNotFound from '@pages/iou/request/step/withFullTransactionOrNotFound';
 import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import {
     replaceReceipt,
     requestMoney,
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx
index c2f51c6001b6..5dbd243c9bb8 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx
@@ -8,7 +8,6 @@ import type {TupleToUnion} from 'type-fest';
 import Hand from '@assets/images/hand.svg';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import Shutter from '@assets/images/shutter.svg';
-import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
@@ -42,6 +41,7 @@ import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
 import StepScreenDragAndDropWrapper from '@pages/iou/request/step/StepScreenDragAndDropWrapper';
 import withFullTransactionOrNotFound from '@pages/iou/request/step/withFullTransactionOrNotFound';
 import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import {
     replaceReceipt,
     requestMoney,
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/BaseContent.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/BaseContent.tsx
new file mode 100644
index 000000000000..2a738db5d33a
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/BaseContent.tsx
@@ -0,0 +1,576 @@
+import type {RefObject} from 'react';
+import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
+import {Keyboard, View} from 'react-native';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import Animated, {FadeIn, useSharedValue} from 'react-native-reanimated';
+import type {ValueOf} from 'type-fest';
+import AttachmentCarousel from '@components/Attachments/AttachmentCarousel';
+import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
+import AttachmentView from '@components/Attachments/AttachmentView';
+import type {Attachment} from '@components/Attachments/types';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import HeaderGap from '@components/HeaderGap';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import fileDownload from '@libs/fileDownload';
+import {cleanFileName, getFileName, validateImageForCorruption} from '@libs/fileDownload/FileUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import {getOriginalMessage, getReportAction, isMoneyRequestAction} from '@libs/ReportActionsUtils';
+import {hasEReceipt, hasMissingSmartscanFields, hasReceipt, hasReceiptSource, isReceiptBeingScanned} from '@libs/TransactionUtils';
+import type {AvatarSource} from '@libs/UserUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
+import variables from '@styles/variables';
+import {detachReceipt} from '@userActions/IOU';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
+import ROUTES from '@src/ROUTES';
+import type * as OnyxTypes from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import viewRef from '@src/types/utils/viewRef';
+
+type AttachmentModalBaseContentProps = {
+    /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */
+    source?: AvatarSource;
+    /** Optional file object to be used for the attachment. If not passed in via props must be specified when modal is opened. */
+    file?: FileObject;
+    /** Optional original filename when uploading */
+    originalFileName?: string;
+    /** Whether source url requires authentication */
+    isAuthTokenRequired?: boolean;
+    /** Determines if download Button should be shown or not */
+    allowDownload?: boolean;
+    /** Determines if the receipt comes from track expense action */
+    isTrackExpenseAction?: boolean;
+    /** Title shown in the header of the modal */
+    headerTitle?: string;
+    /** The report that has this attachment */
+    report?: OnyxEntry<OnyxTypes.Report>;
+    /** The type of the attachment */
+    type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
+    /** If the attachment originates from a note, the accountID will represent the author of that note. */
+    accountID?: number;
+    /** The data is loading or not */
+    isLoading?: boolean;
+    /** Should display not found page or not */
+    shouldShowNotFoundPage?: boolean;
+    /** Denotes whether it is a workspace avatar or not */
+    isWorkspaceAvatar?: boolean;
+    /** Denotes whether it can be an icon (ex: SVG) */
+    maybeIcon?: boolean;
+    /** Whether it is a receipt attachment or not */
+    isReceiptAttachment?: boolean;
+    /** Fallback source (URL, SVG function) for the image shown. */
+    fallbackSource?: AvatarSource;
+    /** Determines if the user can edit the receipt or not */
+    canEditReceipt?: boolean;
+    /** Determines if the user can delete the receipt or not */
+    canDeleteReceipt?: boolean;
+    /** Determines if the send button should be disabled or not */
+    shouldDisableSendButton?: boolean;
+    /** The link of the attachment */
+    attachmentLink?: string;
+    /** Optional callback to fire when we want to preview an image and approve it for use. */
+    onConfirm?: ((file: FileObject) => void) | null;
+    /** Fallback route when the modal is closed */
+    fallbackRoute?: Route;
+    /** Optional callback to fire when we want to do something after attachment carousel changes. */
+    onCarouselAttachmentChange?: (attachment: Attachment) => void;
+    /** Determines if the attachment is invalid or not */
+    isAttachmentInvalid?: boolean;
+    /** Determines if the attachment is invalid or not */
+    shouldLoadAttachment?: boolean;
+    /** Function to set the attachment invalid or not */
+    setIsAttachmentInvalid?: (value: boolean) => void;
+    /** Whether the attachment modal is currently open */
+    isOpen?: boolean;
+    /** Function to set the modal open or close */
+    setIsModalOpen?: (value: boolean) => void;
+    /** Determines if the attachment is invalid or not */
+    attachmentInvalidReason?: TranslationPaths | null;
+    /** Function to set the attachment invalid reason */
+    setAttachmentInvalidReason?: (value: TranslationPaths | null) => void;
+    /** Determines the title of the invalid reason modal */
+    attachmentInvalidReasonTitle?: TranslationPaths | null;
+    /** Function to set the attachment invalid reason title */
+    setAttachmentInvalidReasonTitle?: (value: TranslationPaths | null) => void;
+    /** Ref to the submit button */
+    submitRef?: RefObject<View | HTMLElement>;
+    /** Determines if the delete receipt confirm modal is visible or not */
+    isDeleteReceiptConfirmModalVisible?: boolean;
+    /** Function to set the delete receipt confirm modal visibility */
+    setIsDeleteReceiptConfirmModalVisible?: (value: boolean) => void;
+    /** Function to close the confirm modal */
+    closeModal?: (shouldCallDirectly?: boolean) => void;
+    /** Function to close the confirm modal */
+    closeConfirmModal?: () => void;
+    /** Function to submit and close the modal */
+    onSubmitAndClose?: () => void;
+    /** Function to handle pdf load error */
+    onPdfLoadError?: (setIsModalOpen?: (isModalOpen: boolean) => void) => void;
+    /** Function to hide the invalid reason modal */
+    onInvalidReasonModalHide?: () => void;
+    /** Function to handle upload file validation */
+    onUploadFileValidated?: (type: 'file' | 'uri', sourceURL: string, fileObject: FileObject) => void;
+};
+
+function AttachmentModalBaseContent({
+    source = '',
+    originalFileName = '',
+    isAuthTokenRequired = false,
+    maybeIcon = false,
+    headerTitle: headerTitleProp,
+    fallbackSource,
+    file: fileProp,
+    type,
+    accountID,
+    attachmentLink = '',
+    isOpen = true,
+    allowDownload = false,
+    isTrackExpenseAction = false,
+    report,
+    isReceiptAttachment = false,
+    isWorkspaceAvatar = false,
+    canEditReceipt = false,
+    canDeleteReceipt = false,
+    isLoading = false,
+    shouldShowNotFoundPage = false,
+    shouldDisableSendButton = false,
+    fallbackRoute,
+    isDeleteReceiptConfirmModalVisible,
+    setIsDeleteReceiptConfirmModalVisible,
+    isAttachmentInvalid = false,
+    shouldLoadAttachment = true,
+    setIsAttachmentInvalid,
+    setIsModalOpen,
+    attachmentInvalidReason,
+    setAttachmentInvalidReason,
+    attachmentInvalidReasonTitle,
+    setAttachmentInvalidReasonTitle,
+    submitRef,
+    onConfirm,
+    onCarouselAttachmentChange = () => {},
+    closeConfirmModal,
+    closeModal = () => Navigation.goBack(fallbackRoute),
+    onSubmitAndClose = () => Navigation.goBack(fallbackRoute),
+    onPdfLoadError,
+    onInvalidReasonModalHide,
+    onUploadFileValidated,
+}: AttachmentModalBaseContentProps) {
+    const styles = useThemeStyles();
+
+    const [isAuthTokenRequiredState, setIsAuthTokenRequiredState] = useState(isAuthTokenRequired);
+    const [sourceState, setSourceState] = useState<AvatarSource>(() => source);
+    const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
+    const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
+    // const isPDFLoadError = useRef(false);
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const nope = useSharedValue(false);
+    const iouType = useMemo(() => (isTrackExpenseAction ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT), [isTrackExpenseAction]);
+    const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const transactionID = (isMoneyRequestAction(parentReportAction) && getOriginalMessage(parentReportAction)?.IOUTransactionID) || CONST.DEFAULT_NUMBER_ID;
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const [currentAttachmentLink, setCurrentAttachmentLink] = useState(attachmentLink);
+
+    const [file, setFile] = useState<FileObject | undefined>(
+        originalFileName
+            ? {
+                  name: originalFileName,
+              }
+            : undefined,
+    );
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+
+    const isLocalSource = typeof sourceState === 'string' && /^file:|^blob:/.test(sourceState);
+
+    useEffect(() => {
+        setFile(originalFileName ? {name: originalFileName} : undefined);
+    }, [originalFileName]);
+
+    /**
+     * Keeps the attachment source in sync with the attachment displayed currently in the carousel.
+     */
+    const onNavigate = useCallback(
+        (attachment: Attachment) => {
+            setSourceState(attachment.source);
+            setFile(attachment.file);
+            setIsAuthTokenRequiredState(attachment.isAuthTokenRequired ?? false);
+            onCarouselAttachmentChange(attachment);
+            setCurrentAttachmentLink(attachment?.attachmentLink ?? '');
+        },
+        [onCarouselAttachmentChange],
+    );
+
+    const setDownloadButtonVisibility = useCallback(
+        (isButtonVisible: boolean) => {
+            if (isDownloadButtonReadyToBeShown === isButtonVisible) {
+                return;
+            }
+            setIsDownloadButtonReadyToBeShown(isButtonVisible);
+        },
+        [isDownloadButtonReadyToBeShown],
+    );
+
+    /**
+     * Download the currently viewed attachment.
+     */
+    const downloadAttachment = useCallback(() => {
+        let sourceURL = sourceState;
+        if (isAuthTokenRequiredState && typeof sourceURL === 'string') {
+            sourceURL = addEncryptedAuthTokenToURL(sourceURL);
+        }
+
+        if (typeof sourceURL === 'string') {
+            const fileName = type === CONST.ATTACHMENT_TYPE.SEARCH ? getFileName(`${sourceURL}`) : file?.name;
+            fileDownload(sourceURL, fileName ?? '');
+        }
+
+        // At ios, if the keyboard is open while opening the attachment, then after downloading
+        // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
+        Keyboard.dismiss();
+    }, [isAuthTokenRequiredState, sourceState, file, type]);
+
+    /**
+     * Execute the onConfirm callback and close the modal.
+     */
+    const submitAndClose = useCallback(() => {
+        // If the modal has already been closed or the confirm button is disabled
+        // do not submit.
+        if (!isOpen || isConfirmButtonDisabled) {
+            return;
+        }
+
+        if (onConfirm) {
+            onConfirm(Object.assign(file ?? {}, {source: sourceState} as FileObject));
+        }
+
+        onSubmitAndClose?.();
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [isOpen, isConfirmButtonDisabled, onConfirm, file, sourceState]);
+
+    /**
+     * Detach the receipt and close the modal.
+     */
+    const deleteAndCloseModal = useCallback(() => {
+        detachReceipt(transaction?.transactionID);
+        setIsDeleteReceiptConfirmModalVisible?.(false);
+        Navigation.goBack(fallbackRoute);
+    }, [transaction?.transactionID, setIsDeleteReceiptConfirmModalVisible, fallbackRoute]);
+
+    const isValidFile = useCallback(
+        (fileObject: FileObject) =>
+            validateImageForCorruption(fileObject)
+                .then(() => {
+                    if (fileObject.size && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+                        setIsAttachmentInvalid?.(true);
+                        setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentTooLarge');
+                        setAttachmentInvalidReason?.('attachmentPicker.sizeExceeded');
+                        return false;
+                    }
+
+                    if (fileObject.size && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+                        setIsAttachmentInvalid?.(true);
+                        setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentTooSmall');
+                        setAttachmentInvalidReason?.('attachmentPicker.sizeNotMet');
+                        return false;
+                    }
+
+                    return true;
+                })
+                .catch(() => {
+                    setIsAttachmentInvalid?.(true);
+                    setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentError');
+                    setAttachmentInvalidReason?.('attachmentPicker.errorWhileSelectingCorruptedAttachment');
+                    return false;
+                }),
+        [setAttachmentInvalidReason, setAttachmentInvalidReasonTitle, setIsAttachmentInvalid],
+    );
+
+    const isDirectoryCheck = useCallback(
+        (data: FileObject) => {
+            if ('webkitGetAsEntry' in data && (data as DataTransferItem).webkitGetAsEntry()?.isDirectory) {
+                setIsAttachmentInvalid?.(true);
+                setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentError');
+                setAttachmentInvalidReason?.('attachmentPicker.folderNotAllowedMessage');
+                return false;
+            }
+            return true;
+        },
+        [setAttachmentInvalidReason, setAttachmentInvalidReasonTitle, setIsAttachmentInvalid],
+    );
+
+    useEffect(() => {
+        if (!fileProp || !isDirectoryCheck(fileProp)) {
+            return;
+        }
+        let fileObject = fileProp;
+        if ('getAsFile' in fileProp && typeof fileProp.getAsFile === 'function') {
+            fileObject = fileProp.getAsFile() as FileObject;
+        }
+        if (!fileObject) {
+            return;
+        }
+
+        isValidFile(fileObject).then((isValid) => {
+            if (!isValid) {
+                return;
+            }
+            if (fileObject instanceof File) {
+                /**
+                 * Cleaning file name, done here so that it covers all cases:
+                 * upload, drag and drop, copy-paste
+                 */
+                let updatedFile = fileObject;
+                const cleanName = cleanFileName(updatedFile.name);
+                if (updatedFile.name !== cleanName) {
+                    updatedFile = new File([updatedFile], cleanName, {type: updatedFile.type});
+                }
+                const inputSource = URL.createObjectURL(updatedFile);
+                updatedFile.uri = inputSource;
+                setIsModalOpen?.(true);
+                setSourceState(inputSource);
+                setFile(updatedFile);
+                onUploadFileValidated?.('file', inputSource, updatedFile);
+            } else if (fileObject.uri) {
+                setIsModalOpen?.(true);
+                setSourceState(fileObject.uri);
+                setFile(fileObject);
+                onUploadFileValidated?.('uri', fileObject.uri, fileObject);
+            }
+        });
+    }, [isDirectoryCheck, isValidFile, setIsModalOpen, onUploadFileValidated, fileProp]);
+
+    useEffect(() => {
+        setSourceState(() => source);
+    }, [source]);
+
+    useEffect(() => {
+        setIsAuthTokenRequiredState(isAuthTokenRequired);
+    }, [isAuthTokenRequired]);
+
+    const sourceForAttachmentView = sourceState || source;
+
+    const threeDotsMenuItems = useMemo(() => {
+        if (!isReceiptAttachment) {
+            return [];
+        }
+
+        const menuItems = [];
+        if (canEditReceipt) {
+            menuItems.push({
+                icon: Expensicons.Camera,
+                text: translate('common.replace'),
+                onSelected: () => {
+                    closeModal?.(true);
+                    Navigation.navigate(
+                        ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID, report?.reportID, Navigation.getActiveRouteWithoutParams()),
+                    );
+                },
+            });
+        }
+        if (!isOffline && allowDownload && !isLocalSource) {
+            menuItems.push({
+                icon: Expensicons.Download,
+                text: translate('common.download'),
+                onSelected: () => downloadAttachment(),
+            });
+        }
+
+        const hasOnlyEReceipt = hasEReceipt(transaction) && !hasReceiptSource(transaction);
+        if (!hasOnlyEReceipt && hasReceipt(transaction) && !isReceiptBeingScanned(transaction) && canDeleteReceipt && !hasMissingSmartscanFields(transaction)) {
+            menuItems.push({
+                icon: Expensicons.Trashcan,
+                text: translate('receipt.deleteReceipt'),
+                onSelected: () => {
+                    setIsDeleteReceiptConfirmModalVisible?.(true);
+                },
+                shouldCallAfterModalHide: true,
+            });
+        }
+        return menuItems;
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [isReceiptAttachment, transaction, file, sourceState, iouType]);
+
+    // There are a few things that shouldn't be set until we absolutely know if the file is a receipt or an attachment.
+    // props.isReceiptAttachment will be null until its certain what the file is, in which case it will then be true|false.
+    const {headerTitle, shouldShowDownloadButton, shouldShowThreeDotsButton} = useMemo(() => {
+        let headerTitleNew = headerTitleProp;
+        let shouldShowDownloadButtonNew = false;
+        let shouldShowThreeDotsButtonNew = false;
+
+        if (!isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH) {
+            headerTitleNew = translate(isReceiptAttachment ? 'common.receipt' : 'common.attachment');
+            shouldShowDownloadButtonNew = allowDownload && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isReceiptAttachment && !isOffline && !isLocalSource;
+            shouldShowThreeDotsButtonNew = isReceiptAttachment && isOpen && threeDotsMenuItems.length !== 0;
+        }
+
+        return {headerTitle: headerTitleNew, shouldShowDownloadButton: shouldShowDownloadButtonNew, shouldShowThreeDotsButton: shouldShowThreeDotsButtonNew};
+    }, [
+        allowDownload,
+        headerTitleProp,
+        isDownloadButtonReadyToBeShown,
+        isLocalSource,
+        isOffline,
+        isOpen,
+        isReceiptAttachment,
+        report,
+        shouldShowNotFoundPage,
+        threeDotsMenuItems.length,
+        translate,
+        type,
+    ]);
+
+    const context = useMemo(
+        () => ({
+            pagerItems: [{source: sourceForAttachmentView, index: 0, isActive: true}],
+            activePage: 0,
+            pagerRef: undefined,
+            isPagerScrolling: nope,
+            isScrollEnabled: nope,
+            onTap: () => {},
+            onScaleChanged: () => {},
+            onSwipeDown: closeModal,
+        }),
+        [closeModal, nope, sourceForAttachmentView],
+    );
+
+    return (
+        <>
+            <GestureHandlerRootView style={styles.flex1}>
+                {shouldUseNarrowLayout && <HeaderGap />}
+                <HeaderWithBackButton
+                    title={headerTitle}
+                    shouldShowBorderBottom
+                    shouldShowDownloadButton={shouldShowDownloadButton}
+                    onDownloadButtonPress={() => downloadAttachment()}
+                    shouldShowCloseButton={!shouldUseNarrowLayout}
+                    shouldShowBackButton={shouldUseNarrowLayout}
+                    onBackButtonPress={closeModal}
+                    onCloseButtonPress={closeModal}
+                    shouldShowThreeDotsButton={shouldShowThreeDotsButton}
+                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
+                    threeDotsMenuItems={threeDotsMenuItems}
+                    shouldOverlayDots
+                    subTitleLink={currentAttachmentLink ?? ''}
+                />
+                <View style={styles.imageModalImageCenterContainer}>
+                    {isLoading && <FullScreenLoadingIndicator />}
+                    {shouldShowNotFoundPage && !isLoading && (
+                        <BlockingView
+                            icon={Illustrations.ToddBehindCloud}
+                            iconWidth={variables.modalTopIconWidth}
+                            iconHeight={variables.modalTopIconHeight}
+                            title={translate('notFound.notHere')}
+                            subtitle={translate('notFound.pageNotFound')}
+                            linkKey="notFound.goBackHome"
+                            shouldShowLink
+                            onLinkPress={() => Navigation.dismissModal()}
+                        />
+                    )}
+                    {!shouldShowNotFoundPage &&
+                        (!isEmptyObject(report) && !isReceiptAttachment ? (
+                            <AttachmentCarousel
+                                accountID={accountID}
+                                type={type}
+                                report={report}
+                                onNavigate={onNavigate}
+                                onClose={closeModal}
+                                source={source}
+                                setDownloadButtonVisibility={setDownloadButtonVisibility}
+                                attachmentLink={currentAttachmentLink}
+                            />
+                        ) : (
+                            !!sourceForAttachmentView &&
+                            shouldLoadAttachment &&
+                            !isLoading && (
+                                <AttachmentCarouselPagerContext.Provider value={context}>
+                                    <AttachmentView
+                                        containerStyles={[styles.mh5]}
+                                        source={sourceForAttachmentView}
+                                        isAuthTokenRequired={isAuthTokenRequiredState}
+                                        file={file}
+                                        onToggleKeyboard={setIsConfirmButtonDisabled}
+                                        onPDFLoadError={() => onPdfLoadError?.(setIsModalOpen)}
+                                        isWorkspaceAvatar={isWorkspaceAvatar}
+                                        maybeIcon={maybeIcon}
+                                        fallbackSource={fallbackSource}
+                                        isUsedInAttachmentModal
+                                        transactionID={transaction?.transactionID}
+                                        isUploaded={!isEmptyObject(report)}
+                                    />
+                                </AttachmentCarouselPagerContext.Provider>
+                            )
+                        ))}
+                </View>
+                {/* If we have an onConfirm method show a confirmation button */}
+                {!!onConfirm && !isConfirmButtonDisabled && (
+                    <SafeAreaConsumer>
+                        {({safeAreaPaddingBottomStyle}) => (
+                            <Animated.View
+                                style={safeAreaPaddingBottomStyle}
+                                entering={FadeIn}
+                            >
+                                <Button
+                                    ref={submitRef ? viewRef(submitRef) : undefined}
+                                    success
+                                    large
+                                    style={[styles.buttonConfirm, shouldUseNarrowLayout ? {} : styles.attachmentButtonBigScreen]}
+                                    textStyles={[styles.buttonConfirmText]}
+                                    text={translate('common.send')}
+                                    onPress={submitAndClose}
+                                    isDisabled={isConfirmButtonDisabled || shouldDisableSendButton}
+                                    pressOnEnter
+                                />
+                            </Animated.View>
+                        )}
+                    </SafeAreaConsumer>
+                )}
+                {isReceiptAttachment && (
+                    <ConfirmModal
+                        title={translate('receipt.deleteReceipt')}
+                        isVisible={isDeleteReceiptConfirmModalVisible ?? false}
+                        onConfirm={deleteAndCloseModal}
+                        onCancel={closeConfirmModal}
+                        prompt={translate('receipt.deleteConfirmation')}
+                        confirmText={translate('common.delete')}
+                        cancelText={translate('common.cancel')}
+                        danger
+                    />
+                )}
+            </GestureHandlerRootView>
+            {!isReceiptAttachment && (
+                <ConfirmModal
+                    title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
+                    onConfirm={() => closeConfirmModal?.()}
+                    onCancel={closeConfirmModal}
+                    isVisible={isAttachmentInvalid}
+                    prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
+                    confirmText={translate('common.close')}
+                    shouldShowCancelButton={false}
+                    onModalHide={onInvalidReasonModalHide}
+                />
+            )}
+        </>
+    );
+}
+
+export default memo(AttachmentModalBaseContent);
+
+export type {AttachmentModalBaseContentProps};
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ProfileAvatarModalContent.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ProfileAvatarModalContent.tsx
new file mode 100644
index 000000000000..54bd6adf15e6
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ProfileAvatarModalContent.tsx
@@ -0,0 +1,48 @@
+import {useEffect, useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import {openPublicProfilePage} from '@libs/actions/PersonalDetails';
+import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
+import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
+import {getFullSizeAvatar} from '@libs/UserUtils';
+import {isValidAccountRoute} from '@libs/ValidationUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {AttachmentModalBaseContentProps} from './BaseContent';
+import type {AttachmentModalContent} from './types';
+
+const ProfileAvatarModalContent: AttachmentModalContent = ({params, children}) => {
+    const accountID = params.accountID ?? CONST.DEFAULT_NUMBER_ID;
+
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const personalDetail = personalDetails?.[accountID];
+    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
+    const avatarURL = personalDetail?.avatar ?? '';
+    const displayName = getDisplayNameOrDefault(personalDetail);
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
+
+    useEffect(() => {
+        if (!isValidAccountRoute(accountID)) {
+            return;
+        }
+        openPublicProfilePage(accountID);
+    }, [accountID]);
+
+    const contentProps = useMemo(
+        () =>
+            ({
+                source: getFullSizeAvatar(avatarURL, accountID),
+                isLoading: !!(personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length)),
+                headerTitle: formatPhoneNumber(displayName),
+                originalFileName: personalDetail?.originalFileName ?? '',
+                shouldShowNotFoundPage: !avatarURL,
+            } satisfies Partial<AttachmentModalBaseContentProps>),
+        [accountID, avatarURL, displayName, isLoadingApp, personalDetail, personalDetailsMetadata],
+    );
+
+    const wrapperProps = useMemo(() => ({}), []);
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    return children({contentProps, wrapperProps});
+};
+
+export default ProfileAvatarModalContent;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ReportAttachmentModalContent.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ReportAttachmentModalContent.tsx
new file mode 100644
index 000000000000..6c62947e03ea
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ReportAttachmentModalContent.tsx
@@ -0,0 +1,194 @@
+import {Str} from 'expensify-common';
+import {useCallback, useMemo, useRef, useState} from 'react';
+import type {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import type {Attachment} from '@components/Attachments/types';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
+import {translateLocal} from '@libs/Localize';
+import Navigation from '@libs/Navigation/Navigation';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type ModalType from '@src/types/utils/ModalType';
+import type {AttachmentModalBaseContentProps} from './BaseContent';
+import type {AttachmentModalContent, AttachmentModalWrapperWrapperProps} from './types';
+
+const ReportAttachmentModalContent: AttachmentModalContent = ({params, children}) => {
+    const accountID = params.accountID ?? CONST.DEFAULT_NUMBER_ID;
+    const reportID = params.reportID ?? CONST.DEFAULT_NUMBER_ID;
+    const isReceiptAttachment = params.isReceiptAttachment ?? false;
+
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+
+    const [shouldLoadAttachment, setShouldLoadAttachment] = useState(true);
+    const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
+    const [attachmentInvalidReason, setAttachmentInvalidReason] = useState<TranslationPaths | null>(null);
+    const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState<TranslationPaths | null>(null);
+    const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
+
+    const isPDFLoadError = useRef(false);
+    const submitRef = useRef<View | HTMLElement>(null);
+
+    const isOverlayModalVisible = (isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!isReceiptAttachment && isAttachmentInvalid);
+
+    const onCarouselAttachmentChange = useCallback(
+        (attachment: Attachment) => {
+            const routeToNavigate = ROUTES.ATTACHMENTS.getRoute({
+                reportID,
+                type: params.type,
+                source: String(attachment.source),
+                accountID,
+                isAuthTokenRequired: attachment?.isAuthTokenRequired,
+                fileName: attachment?.file?.name,
+                attachmentLink: attachment?.attachmentLink,
+            });
+            Navigation.navigate(routeToNavigate);
+        },
+        [reportID, params.type, accountID],
+    );
+
+    /**
+     * Close the confirm modals.
+     */
+    const closeConfirmModal = useCallback(() => {
+        setIsAttachmentInvalid(false);
+        setIsDeleteReceiptConfirmModalVisible(false);
+    }, [setIsAttachmentInvalid]);
+
+    const onModalHide = useCallback(() => {
+        if (!isPDFLoadError.current) {
+            params.onModalHide?.();
+        }
+        setShouldLoadAttachment(false);
+        if (isPDFLoadError.current) {
+            setIsAttachmentInvalid(true);
+            setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
+            setAttachmentInvalidReason('attachmentPicker.errorWhileSelectingCorruptedAttachment');
+        }
+    }, [params]);
+
+    const onPdfLoadError = useCallback(
+        (setIsModalOpen?: (isModalOpen: boolean) => void) => {
+            isPDFLoadError.current = true;
+            setIsModalOpen?.(false);
+        },
+        [isPDFLoadError],
+    );
+
+    const onInvalidReasonModalHide = useCallback(() => {
+        if (!isPDFLoadError.current) {
+            return;
+        }
+        isPDFLoadError.current = false;
+        onModalHide?.();
+    }, [isPDFLoadError, onModalHide]);
+
+    const onModalClose = useCallback(() => {
+        Navigation.dismissModal();
+        // This enables Composer refocus when the attachments modal is closed by the browser navigation
+        ComposerFocusManager.setReadyToFocus();
+
+        params.onModalClose?.();
+    }, [params]);
+
+    /**
+     * If our attachment is a PDF, return the unswipeablge Modal type.
+     */
+    const getModalType = useCallback(
+        (sourceURL: string, fileObject: FileObject) =>
+            sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name ?? translateLocal('attachmentView.unknownFilename'))))
+                ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
+                : CONST.MODAL.MODAL_TYPE.CENTERED,
+        [],
+    );
+
+    const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
+
+    const onUploadFileValidated = useCallback(
+        (type: string, sourceURL: string, fileObject: FileObject) => {
+            if (type === 'file') {
+                const inputModalType = getModalType(sourceURL, fileObject);
+                setModalType(inputModalType);
+            } else if (type === 'uri') {
+                const inputModalType = getModalType(sourceURL, fileObject);
+                setModalType(inputModalType);
+            }
+        },
+        [getModalType],
+    );
+
+    const screenProps = useMemo(
+        () =>
+            params.file
+                ? {...params, accountID}
+                : {
+                      // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
+                      source: Number(params.source) || params.source,
+                      type: params.type,
+                      report,
+                      accountID,
+                      shouldShowNotFoundPage: !params.file && !isLoadingApp && params.type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID,
+                      allowDownload: true,
+                      isAuthTokenRequired: !!params.isAuthTokenRequired,
+                      attachmentLink: params.attachmentLink ?? '',
+                      originalFileName: params.originalFileName ?? '',
+                      fallbackRoute: ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID),
+                  },
+        [accountID, isLoadingApp, params, report],
+    );
+
+    const contentProps = useMemo(
+        () =>
+            ({
+                ...screenProps,
+                shouldLoadAttachment,
+                isAttachmentInvalid,
+                setIsAttachmentInvalid,
+                setAttachmentInvalidReason,
+                attachmentInvalidReasonTitle,
+                setAttachmentInvalidReasonTitle,
+                attachmentInvalidReason,
+                isDeleteReceiptConfirmModalVisible,
+                setIsDeleteReceiptConfirmModalVisible,
+                submitRef,
+                onCarouselAttachmentChange,
+                onPdfLoadError,
+                onInvalidReasonModalHide,
+                onUploadFileValidated,
+            } satisfies Partial<AttachmentModalBaseContentProps>),
+        [
+            attachmentInvalidReason,
+            attachmentInvalidReasonTitle,
+            isAttachmentInvalid,
+            isDeleteReceiptConfirmModalVisible,
+            onCarouselAttachmentChange,
+            onInvalidReasonModalHide,
+            onPdfLoadError,
+            onUploadFileValidated,
+            screenProps,
+            shouldLoadAttachment,
+        ],
+    );
+
+    const wrapperProps = useMemo(
+        () =>
+            ({
+                modalType,
+                setModalType,
+                setShouldLoadAttachment,
+                isOverlayModalVisible,
+                closeConfirmModal,
+                onModalClose,
+                onModalHide,
+            } satisfies AttachmentModalWrapperWrapperProps),
+        [closeConfirmModal, isOverlayModalVisible, modalType, onModalClose, onModalHide],
+    );
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    return children({contentProps, wrapperProps});
+};
+
+export default ReportAttachmentModalContent;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ReportAvatarModalContent.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ReportAvatarModalContent.tsx
new file mode 100644
index 000000000000..7666cf92dcda
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/ReportAvatarModalContent.tsx
@@ -0,0 +1,55 @@
+import {useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import {getDefaultGroupAvatar, getPolicyName, getReportName, getWorkspaceIcon, isGroupChat, isThread} from '@libs/ReportUtils';
+import {getFullSizeAvatar} from '@libs/UserUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {AttachmentModalBaseContentProps} from './BaseContent';
+import type {AttachmentModalContent} from './types';
+
+const ReportAvatarModalContent: AttachmentModalContent = ({params, children}) => {
+    const reportID = params.reportID ?? CONST.DEFAULT_NUMBER_ID;
+    const policyID = params.policyID ?? CONST.DEFAULT_NUMBER_ID;
+
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
+
+    const attachment = useMemo(() => {
+        if (isGroupChat(report) && !isThread(report)) {
+            return {
+                source: report?.avatarUrl ? getFullSizeAvatar(report.avatarUrl, 0) : getDefaultGroupAvatar(report?.reportID),
+                headerTitle: getReportName(report),
+                isWorkspaceAvatar: false,
+            };
+        }
+
+        return {
+            source: getFullSizeAvatar(getWorkspaceIcon(report).source, 0),
+            headerTitle: getPolicyName({report, policy}),
+            // In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar
+            originalFileName: policy?.originalFileName ?? policy?.id ?? report?.policyID,
+            isWorkspaceAvatar: true,
+        };
+    }, [policy, report]);
+
+    const contentProps = useMemo(
+        () =>
+            ({
+                ...attachment,
+                fallbackRoute: ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID),
+                shouldShowNotFoundPage: !report?.reportID && !isLoadingApp,
+                isLoading: (!report?.reportID || !policy?.id) && !!isLoadingApp,
+            } satisfies Partial<AttachmentModalBaseContentProps>),
+        [attachment, isLoadingApp, policy?.id, report?.reportID, reportID],
+    );
+
+    const wrapperProps = useMemo(() => ({}), []);
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    return children({contentProps, wrapperProps});
+};
+
+export default ReportAvatarModalContent;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/TransactionReceiptModalContent.tsx
new file mode 100644
index 000000000000..2ec92c55fe32
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/TransactionReceiptModalContent.tsx
@@ -0,0 +1,111 @@
+import {useCallback, useEffect, useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import {openReport} from '@libs/actions/Report';
+import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
+import type {RootStackParamList, State} from '@libs/Navigation/types';
+import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
+import {getReportAction, isTrackExpenseAction} from '@libs/ReportActionsUtils';
+import {canEditFieldOfMoneyRequest, isMoneyRequestReport, isOneTransactionThread, isTrackExpenseReport} from '@libs/ReportUtils';
+import {hasEReceipt, hasReceiptSource} from '@libs/TransactionUtils';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {AttachmentModalBaseContentProps} from './BaseContent';
+import type {AttachmentModalContent} from './types';
+
+const TransactionReceiptModalContent: AttachmentModalContent = ({params, children}) => {
+    const reportID = params.reportID ?? CONST.DEFAULT_NUMBER_ID;
+    const transactionID = params.transactionID ?? CONST.DEFAULT_NUMBER_ID;
+
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`);
+    const receiptURIs = getThumbnailAndImageURIs(transaction);
+
+    const imageSource = tryResolveUrlFromApiRoot(receiptURIs.image ?? '');
+
+    const isLocalFile = receiptURIs.isLocalFile;
+    const readonly = !!params.readonly;
+    const isFromReviewDuplicates = !!params.isFromReviewDuplicates;
+
+    const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
+    const canEditReceipt = canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT);
+    const canDeleteReceipt = canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT, true);
+    const isEReceipt = transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction);
+    const isTrackExpenseActionValue = isTrackExpenseAction(parentReportAction);
+
+    useEffect(() => {
+        if (report && transaction) {
+            return;
+        }
+        openReport(params.reportID);
+        // I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render.
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, []);
+
+    const onModalClose = useCallback(() => {
+        // Receipt Page can be opened either from Reports or from Search RHP view
+        // We have to handle going back to correct screens, if it was opened from RHP just close the modal, otherwise go to Report Page
+        const rootState = navigationRef.getRootState() as State<RootStackParamList>;
+        const secondToLastRoute = rootState.routes.at(-2);
+        if (secondToLastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+            Navigation.dismissModal();
+        } else {
+            const isOneTransactionThreadValue = isOneTransactionThread(report?.reportID, report?.parentReportID, parentReportAction);
+            Navigation.dismissModal(isOneTransactionThreadValue ? report?.parentReportID : report?.reportID);
+        }
+
+        Navigation.goBack(params.fallbackRoute);
+    }, [params.fallbackRoute, parentReportAction, report?.parentReportID, report?.reportID]);
+
+    const moneyRequestReportID = isMoneyRequestReport(report) ? report?.reportID : report?.parentReportID;
+    const isTrackExpenseReportValue = isTrackExpenseReport(report);
+
+    // eslint-disable-next-line rulesdir/no-negated-variables
+    const shouldShowNotFoundPage =
+        isTrackExpenseReportValue || transaction?.reportID === CONST.REPORT.SPLIT_REPORTID || isFromReviewDuplicates ? !transaction : moneyRequestReportID !== transaction?.reportID;
+
+    const contentProps = useMemo(
+        () =>
+            ({
+                source: imageSource,
+                isAuthTokenRequired: !isLocalFile,
+                report,
+                isReceiptAttachment: true,
+                canEditReceipt: canEditReceipt && !readonly,
+                canDeleteReceipt: canDeleteReceipt && !readonly,
+                allowDownload: !isEReceipt,
+                isTrackExpenseAction: isTrackExpenseActionValue,
+                originalFileName: receiptURIs?.filename,
+                isLoading: !transaction && reportMetadata?.isLoadingInitialReportActions,
+                shouldShowNotFoundPage,
+            } satisfies Partial<AttachmentModalBaseContentProps>),
+        [
+            canDeleteReceipt,
+            canEditReceipt,
+            imageSource,
+            isEReceipt,
+            isLocalFile,
+            isTrackExpenseActionValue,
+            readonly,
+            receiptURIs?.filename,
+            report,
+            reportMetadata?.isLoadingInitialReportActions,
+            shouldShowNotFoundPage,
+            transaction,
+        ],
+    );
+
+    const wrapperProps = useMemo(
+        () => ({
+            onModalClose,
+        }),
+        [onModalClose],
+    );
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    return children({contentProps, wrapperProps});
+};
+
+export default TransactionReceiptModalContent;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/WorkspaceAvatarModalContent.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/WorkspaceAvatarModalContent.tsx
new file mode 100644
index 000000000000..322972b46e16
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/WorkspaceAvatarModalContent.tsx
@@ -0,0 +1,34 @@
+import {useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {AttachmentModalBaseContentProps} from './BaseContent';
+import type {AttachmentModalContent} from './types';
+
+const WorkspaceAvatarModalContent: AttachmentModalContent = ({params, children}) => {
+    const policyID = params.policyID ?? CONST.DEFAULT_NUMBER_ID;
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
+
+    const contentProps = useMemo(
+        () =>
+            ({
+                source: policy?.avatarURL ? policy?.avatarURL : getDefaultWorkspaceAvatar(policy?.name),
+                headerTitle: policy?.name,
+                isWorkspaceAvatar: true,
+                originalFileName: policy?.originalFileName ?? policy?.id,
+                shouldShowNotFoundPage: !Object.keys(policy ?? {}).length && !isLoadingApp,
+                isLoading: !Object.keys(policy ?? {}).length && !!isLoadingApp,
+                maybeIcon: true,
+            } satisfies Partial<AttachmentModalBaseContentProps>),
+        [isLoadingApp, policy],
+    );
+
+    const wrapperProps = useMemo(() => ({}), []);
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    return children({contentProps, wrapperProps});
+};
+
+export default WorkspaceAvatarModalContent;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContent/types.ts b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/types.ts
new file mode 100644
index 000000000000..3a28f3eb0e5f
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContent/types.ts
@@ -0,0 +1,24 @@
+import type React from 'react';
+import type {AttachmentModalScreenModalCallbacks, AttachmentModalScreenParams} from '@pages/media/AttachmentModalScreen/types';
+import type ModalType from '@src/types/utils/ModalType';
+import type {AttachmentModalBaseContentProps} from './BaseContent';
+
+type AttachmentModalWrapperWrapperProps = AttachmentModalScreenModalCallbacks & {
+    modalType?: ModalType;
+    setModalType?: (modalType: ModalType) => void;
+    setShouldLoadAttachment?: (shouldLoadAttachment: boolean) => void;
+    closeConfirmModal?: () => void;
+    isOverlayModalVisible?: boolean;
+};
+
+type AttachmentModalContentChildrenProps = {
+    contentProps: Partial<AttachmentModalBaseContentProps>;
+    wrapperProps: AttachmentModalWrapperWrapperProps;
+};
+
+type AttachmentModalContent = React.FC<{
+    params: AttachmentModalScreenParams;
+    children: (props: AttachmentModalContentChildrenProps) => React.ReactElement;
+}>;
+
+export type {AttachmentModalContent, AttachmentModalContentChildrenProps, AttachmentModalWrapperWrapperProps};
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContext.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContext.tsx
new file mode 100644
index 000000000000..35474376eea5
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContext.tsx
@@ -0,0 +1,79 @@
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import useCurrentReportID from '@hooks/useCurrentReportID';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import type {AttachmentModalScreenParams} from './types';
+
+type AttachmentModalContextValue = {
+    isAttachmentHidden: (reportActionID: string) => boolean;
+    updateHiddenAttachments: (reportActionID: string, isHidden: boolean) => void;
+    addAttachment(attachmentProps: Partial<AttachmentModalScreenParams>): string;
+    removeAttachment(attachmentId: string): void;
+    getAttachmentById(attachmentId: string): Partial<AttachmentModalScreenParams> | undefined;
+};
+
+const AttachmentModalContext = React.createContext<AttachmentModalContextValue>({
+    isAttachmentHidden: () => false,
+    updateHiddenAttachments: () => {},
+    addAttachment: () => '',
+    removeAttachment: () => undefined,
+    getAttachmentById: () => undefined,
+});
+
+function AttachmentModalProvider({children}: ChildrenProps) {
+    const currentReportID = useCurrentReportID();
+    const hiddenAttachments = useRef<Record<string, boolean>>({});
+
+    useEffect(() => {
+        // We only want to store the attachment visibility for the current report.
+        // If the current report ID changes, clear the ref.
+        hiddenAttachments.current = {};
+    }, [currentReportID]);
+
+    const attachments = useRef<Record<string, Partial<AttachmentModalScreenParams>>>({});
+    const addAttachment = useCallback<AttachmentModalContextValue['addAttachment']>(
+        (attachmentProps) => {
+            const attachmentCount = Object.keys(attachments.current).length;
+            const attachmentId = `attachment_${attachmentCount + 1}`;
+            attachments.current = {...attachments.current, [attachmentId]: attachmentProps};
+            return attachmentId;
+        },
+        [attachments],
+    );
+
+    const removeAttachment = useCallback<AttachmentModalContextValue['removeAttachment']>(
+        (attachmentId) => {
+            delete attachments.current[attachmentId];
+        },
+        [attachments],
+    );
+
+    const getAttachmentById = useCallback<AttachmentModalContextValue['getAttachmentById']>(
+        (attachmentId) => {
+            return attachments.current[attachmentId];
+        },
+        [attachments],
+    );
+
+    const contextValue = useMemo(
+        () => ({
+            isAttachmentHidden: (reportActionID: string) => hiddenAttachments.current[reportActionID],
+            updateHiddenAttachments: (reportActionID: string, value: boolean) => {
+                hiddenAttachments.current = {
+                    ...hiddenAttachments.current,
+                    [reportActionID]: value,
+                };
+            },
+            addAttachment,
+            removeAttachment,
+            getAttachmentById,
+        }),
+        [addAttachment, getAttachmentById, removeAttachment],
+    );
+
+    return <AttachmentModalContext.Provider value={contextValue}>{children}</AttachmentModalContext.Provider>;
+}
+
+AttachmentModalProvider.displayName = 'AttachmentModalProvider';
+
+export default AttachmentModalContext;
+export {AttachmentModalProvider};
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/index.native.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/index.native.tsx
new file mode 100644
index 000000000000..2674a371c0f3
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/index.native.tsx
@@ -0,0 +1,36 @@
+import React, {memo, useCallback, useContext} from 'react';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Navigation from '@libs/Navigation/Navigation';
+import AttachmentModalBaseContent from '@pages/media/AttachmentModalScreen/AttachmentModalContent/BaseContent';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
+import type {AttachmentModalWrapperProps} from './types';
+
+function AttachmentModalWrapper({contentProps, navigation, attachmentId}: AttachmentModalWrapperProps) {
+    const attachmentsContext = useContext(AttachmentModalContext);
+    const testID = typeof contentProps.source === 'string' ? contentProps.source : contentProps.source?.toString() ?? '';
+
+    const closeModal = useCallback(() => {
+        if (attachmentId) {
+            attachmentsContext.removeAttachment(attachmentId);
+        }
+
+        Navigation.goBack(contentProps.fallbackRoute);
+    }, [attachmentId, attachmentsContext, contentProps.fallbackRoute]);
+
+    return (
+        <ScreenWrapper
+            navigation={navigation}
+            testID={`attachment-modal-${testID}`}
+        >
+            <AttachmentModalBaseContent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...contentProps}
+                closeModal={closeModal}
+            />
+        </ScreenWrapper>
+    );
+}
+
+AttachmentModalWrapper.displayName = 'AttachmentModalWrapper';
+
+export default memo(AttachmentModalWrapper);
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/index.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/index.tsx
new file mode 100644
index 000000000000..3dd33457fb23
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/index.tsx
@@ -0,0 +1,82 @@
+import React, {useCallback, useContext, useState} from 'react';
+import Modal from '@components/Modal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
+import Navigation from '@libs/Navigation/Navigation';
+import AttachmentModalBaseContent from '@pages/media/AttachmentModalScreen/AttachmentModalContent/BaseContent';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
+import CONST from '@src/CONST';
+import type {AttachmentModalWrapperProps} from './types';
+
+function AttachmentModalWrapper({
+    contentProps,
+    wrapperProps: {modalType, closeConfirmModal, setShouldLoadAttachment, isOverlayModalVisible, onModalShow, onModalClose, onModalHide},
+    attachmentId,
+}: AttachmentModalWrapperProps) {
+    const attachmentsContext = useContext(AttachmentModalContext);
+    const [isModalOpen, setIsModalOpen] = useState(true);
+
+    const onSubmitAndClose = useCallback(() => {
+        setIsModalOpen(false);
+    }, [setIsModalOpen]);
+
+    /**
+     * Closes the modal.
+     * @param {boolean} [shouldCallDirectly] If true, directly calls `onModalClose`.
+     * This is useful when you plan to continue navigating to another page after closing the modal, to avoid freezing the app due to navigating to another page first and dismissing the modal later.
+     * If `shouldCallDirectly` is false or undefined, it calls `attachmentModalHandler.handleModalClose` to close the modal.
+     * This ensures smooth modal closing behavior without causing delays in closing.
+     */
+    const closeModal = useCallback(
+        (shouldCallDirectly?: boolean) => {
+            setIsModalOpen(false);
+            if (typeof onModalClose === 'function') {
+                if (shouldCallDirectly) {
+                    onModalClose();
+                    return;
+                }
+                attachmentModalHandler.handleModalClose(onModalClose);
+            }
+
+            if (attachmentId) {
+                attachmentsContext.removeAttachment(attachmentId);
+            }
+
+            Navigation.goBack(contentProps.fallbackRoute);
+        },
+        [attachmentId, attachmentsContext, contentProps.fallbackRoute, onModalClose],
+    );
+
+    return (
+        <Modal
+            type={modalType ?? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
+            onClose={isOverlayModalVisible ? () => closeConfirmModal?.() : () => closeModal?.()}
+            isVisible={isModalOpen}
+            onModalHide={onModalHide}
+            onModalShow={() => {
+                onModalShow?.();
+                setShouldLoadAttachment?.(true);
+            }}
+            propagateSwipe
+            initialFocus={() => {
+                if (!contentProps.submitRef?.current) {
+                    return false;
+                }
+                return contentProps.submitRef.current;
+            }}
+        >
+            <AttachmentModalBaseContent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...contentProps}
+                closeModal={closeModal}
+                closeConfirmModal={closeConfirmModal}
+                isOpen={isModalOpen}
+                setIsModalOpen={setIsModalOpen}
+                onSubmitAndClose={onSubmitAndClose}
+            />
+        </Modal>
+    );
+}
+
+AttachmentModalWrapper.displayName = 'AttachmentModalWrapper';
+
+export default AttachmentModalWrapper;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/types.ts b/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/types.ts
new file mode 100644
index 000000000000..1c1a3d60e768
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalWrapper/types.ts
@@ -0,0 +1,10 @@
+import type {AttachmentModalContentChildrenProps} from '@pages/media/AttachmentModalScreen/AttachmentModalContent/types';
+import type {AttachmentModalScreenProps} from '@pages/media/AttachmentModalScreen/types';
+
+type AttachmentModalWrapperProps = AttachmentModalContentChildrenProps & {
+    navigation: AttachmentModalScreenProps['navigation'];
+    attachmentId?: string;
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export type {AttachmentModalWrapperProps};
diff --git a/src/pages/media/AttachmentModalScreen/index.tsx b/src/pages/media/AttachmentModalScreen/index.tsx
new file mode 100644
index 000000000000..6648f379ce30
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/index.tsx
@@ -0,0 +1,102 @@
+import React, {useContext, useMemo} from 'react';
+import SCREENS from '@src/SCREENS';
+import ProfileAvatarModalContent from './AttachmentModalContent/ProfileAvatarModalContent';
+import ReportAttachmentModalContent from './AttachmentModalContent/ReportAttachmentModalContent';
+import ReportAvatarModalContent from './AttachmentModalContent/ReportAvatarModalContent';
+import TransactionReceiptModalContent from './AttachmentModalContent/TransactionReceiptModalContent';
+import WorkspaceAvatarModalContent from './AttachmentModalContent/WorkspaceAvatarModalContent';
+import AttachmentModalContext from './AttachmentModalContext';
+import AttachmentModalWrapper from './AttachmentModalWrapper';
+import type {AttachmentModalScreenParams, AttachmentModalScreenProps} from './types';
+
+function AttachmentModalScreen({route, navigation}: AttachmentModalScreenProps) {
+    const attachmentId = route.params.attachmentId;
+    const attachmentsContext = useContext(AttachmentModalContext);
+    const params: AttachmentModalScreenParams = useMemo(() => {
+        if (attachmentId) {
+            return {...route.params, ...attachmentsContext.getAttachmentById(attachmentId)};
+        }
+        return route.params;
+    }, [attachmentId, attachmentsContext, route.params]);
+
+    if (route.name === SCREENS.ATTACHMENTS) {
+        return (
+            <ReportAttachmentModalContent params={params}>
+                {({contentProps, wrapperProps}) => (
+                    <AttachmentModalWrapper
+                        navigation={navigation}
+                        attachmentId={attachmentId}
+                        contentProps={contentProps}
+                        wrapperProps={wrapperProps}
+                    />
+                )}
+            </ReportAttachmentModalContent>
+        );
+    }
+
+    if (route.name === SCREENS.TRANSACTION_RECEIPT) {
+        return (
+            <TransactionReceiptModalContent params={params}>
+                {({contentProps, wrapperProps}) => (
+                    <AttachmentModalWrapper
+                        navigation={navigation}
+                        attachmentId={attachmentId}
+                        contentProps={contentProps}
+                        wrapperProps={wrapperProps}
+                    />
+                )}
+            </TransactionReceiptModalContent>
+        );
+    }
+
+    if (route.name === SCREENS.PROFILE_AVATAR) {
+        return (
+            <ProfileAvatarModalContent params={params}>
+                {({contentProps, wrapperProps}) => (
+                    <AttachmentModalWrapper
+                        navigation={navigation}
+                        attachmentId={attachmentId}
+                        contentProps={contentProps}
+                        wrapperProps={wrapperProps}
+                    />
+                )}
+            </ProfileAvatarModalContent>
+        );
+    }
+
+    if (route.name === SCREENS.WORKSPACE_AVATAR) {
+        return (
+            <WorkspaceAvatarModalContent params={params}>
+                {({contentProps, wrapperProps}) => (
+                    <AttachmentModalWrapper
+                        navigation={navigation}
+                        attachmentId={attachmentId}
+                        contentProps={contentProps}
+                        wrapperProps={wrapperProps}
+                    />
+                )}
+            </WorkspaceAvatarModalContent>
+        );
+    }
+
+    if (route.name === SCREENS.REPORT_AVATAR) {
+        return (
+            <ReportAvatarModalContent params={params}>
+                {({contentProps, wrapperProps}) => (
+                    <AttachmentModalWrapper
+                        navigation={navigation}
+                        attachmentId={attachmentId}
+                        contentProps={contentProps}
+                        wrapperProps={wrapperProps}
+                    />
+                )}
+            </ReportAvatarModalContent>
+        );
+    }
+
+    return null;
+}
+
+AttachmentModalScreen.displayName = 'AttachmentModalScreen';
+
+export default AttachmentModalScreen;
diff --git a/src/pages/media/AttachmentModalScreen/types.ts b/src/pages/media/AttachmentModalScreen/types.ts
new file mode 100644
index 000000000000..1585dcac6472
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/types.ts
@@ -0,0 +1,45 @@
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {AuthScreensParamList} from '@libs/Navigation/types';
+import type SCREENS from '@src/SCREENS';
+import type {AttachmentModalBaseContentProps} from './AttachmentModalContent/BaseContent';
+
+/**
+ * Modal render prop component that exposes modal launching triggers that can be used
+ * to display a full size image or PDF modally with optional confirmation button.
+ */
+
+type ImagePickerResponse = {
+    height?: number;
+    name: string;
+    size?: number | null;
+    type: string;
+    uri: string;
+    width?: number;
+};
+
+type FileObject = Partial<File | ImagePickerResponse>;
+
+type AttachmentModalChildrenProps = {
+    displayFileInModal: (data: FileObject) => void;
+    show: () => void;
+};
+
+type AttachmentModalScreenModalCallbacks = {
+    onModalShow?: () => void;
+    onModalHide?: () => void;
+    onModalClose?: () => void;
+};
+
+type AttachmentModalScreenParams = AttachmentModalBaseContentProps &
+    AttachmentModalScreenModalCallbacks & {
+        attachmentId?: string;
+        reportID?: string;
+        policyID?: string;
+        transactionID?: string;
+        readonly?: boolean;
+        isFromReviewDuplicates?: boolean;
+    };
+
+type AttachmentModalScreenProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.ATTACHMENTS>;
+
+export type {AttachmentModalScreenParams, AttachmentModalScreenModalCallbacks, AttachmentModalScreenProps, AttachmentModalChildrenProps, FileObject, ImagePickerResponse};
diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx
deleted file mode 100644
index 74b88f419e1d..000000000000
--- a/src/pages/settings/Profile/ProfileAvatar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, {useEffect} from 'react';
-import {useOnyx} from 'react-native-onyx';
-import AttachmentModal from '@components/AttachmentModal';
-import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
-import Navigation from '@libs/Navigation/Navigation';
-import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {AuthScreensParamList} from '@libs/Navigation/types';
-import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import * as UserUtils from '@libs/UserUtils';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import * as PersonalDetails from '@userActions/PersonalDetails';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type SCREENS from '@src/SCREENS';
-
-type ProfileAvatarProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
-
-function ProfileAvatar({route}: ProfileAvatarProps) {
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
-    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
-    const personalDetail = personalDetails?.[route.params.accountID];
-    const avatarURL = personalDetail?.avatar ?? '';
-    const accountID = Number(route.params.accountID ?? '-1');
-    const isLoading = personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length);
-    const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail);
-
-    useEffect(() => {
-        if (!ValidationUtils.isValidAccountRoute(Number(accountID)) ?? !!avatarURL) {
-            return;
-        }
-        PersonalDetails.openPublicProfilePage(accountID);
-    }, [accountID, avatarURL]);
-
-    return (
-        <AttachmentModal
-            headerTitle={LocalePhoneNumber.formatPhoneNumber(displayName)}
-            defaultOpen
-            source={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
-            onModalClose={() => {
-                Navigation.goBack();
-            }}
-            originalFileName={personalDetail?.originalFileName ?? ''}
-            isLoading={!!isLoading}
-            shouldShowNotFoundPage={!avatarURL}
-        />
-    );
-}
-
-ProfileAvatar.displayName = 'ProfileAvatar';
-
-export default ProfileAvatar;
diff --git a/src/pages/workspace/WorkspaceAvatar.tsx b/src/pages/workspace/WorkspaceAvatar.tsx
deleted file mode 100644
index 79fc432a82a8..000000000000
--- a/src/pages/workspace/WorkspaceAvatar.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import AttachmentModal from '@components/AttachmentModal';
-import Navigation from '@libs/Navigation/Navigation';
-import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import type {AuthScreensParamList} from '@libs/Navigation/types';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as UserUtils from '@libs/UserUtils';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type SCREENS from '@src/SCREENS';
-import type {Policy} from '@src/types/onyx';
-
-type WorkspaceAvatarOnyxProps = {
-    policy: OnyxEntry<Policy>;
-    isLoadingApp: OnyxEntry<boolean>;
-};
-
-type WorkspaceAvatarProps = WorkspaceAvatarOnyxProps & PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.WORKSPACE_AVATAR>;
-
-function WorkspaceAvatar({policy, isLoadingApp = true}: WorkspaceAvatarProps) {
-    const avatarURL = policy?.avatarURL ?? '' ? policy?.avatarURL ?? '' : ReportUtils.getDefaultWorkspaceAvatar(policy?.name ?? '');
-
-    return (
-        <AttachmentModal
-            headerTitle={policy?.name ?? ''}
-            defaultOpen
-            source={UserUtils.getFullSizeAvatar(avatarURL, 0)}
-            onModalClose={Navigation.goBack}
-            isWorkspaceAvatar
-            originalFileName={policy?.originalFileName ?? policy?.id}
-            shouldShowNotFoundPage={!Object.keys(policy ?? {}).length && !isLoadingApp}
-            isLoading={!Object.keys(policy ?? {}).length && !!isLoadingApp}
-            maybeIcon
-        />
-    );
-}
-
-WorkspaceAvatar.displayName = 'WorkspaceAvatar';
-
-export default withOnyx<WorkspaceAvatarProps, WorkspaceAvatarOnyxProps>({
-    policy: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID ?? '-1'}`,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(WorkspaceAvatar);
diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index 8379f3e94caa..2d7e248158c5 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -223,7 +223,7 @@ function WorkspaceProfilePage({policyDraft, policy: policyProp, route}: Workspac
                                 styles.sectionMenuItemTopDescription,
                             ]}
                             editIconStyle={styles.smallEditIconWorkspace}
-                            isUsingDefaultAvatar={!policy?.avatarURL ?? false}
+                            isUsingDefaultAvatar={!policy?.avatarURL}
                             onImageSelected={(file) => {
                                 if (!policy?.id) {
                                     return;
diff --git a/src/stories/Composer.stories.tsx b/src/stories/Composer.stories.tsx
index efb8e05614e2..cdf70313d87d 100644
--- a/src/stories/Composer.stories.tsx
+++ b/src/stories/Composer.stories.tsx
@@ -3,13 +3,13 @@ import type {Meta} from '@storybook/react';
 import {ExpensiMark} from 'expensify-common';
 import React, {useState} from 'react';
 import {Image, View} from 'react-native';
-import type {FileObject} from '@components/AttachmentModal';
 import Composer from '@components/Composer';
 import type {ComposerProps, CustomSelectionChangeEvent, TextSelection} from '@components/Composer/types';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useStyleUtils from '@hooks/useStyleUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 // eslint-disable-next-line no-restricted-imports
 import {defaultTheme} from '@styles/theme';
 import {defaultStyles} from '@src/styles';
diff --git a/src/types/form/ReimbursementAccountForm.ts b/src/types/form/ReimbursementAccountForm.ts
index 9b3f8183b94f..253073661f2c 100644
--- a/src/types/form/ReimbursementAccountForm.ts
+++ b/src/types/form/ReimbursementAccountForm.ts
@@ -1,4 +1,4 @@
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type {Country} from '@src/CONST';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type Form from './Form';
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
index 5acaa5c5c29e..7a6b06ca3587 100644
--- a/src/types/onyx/ReimbursementAccount.ts
+++ b/src/types/onyx/ReimbursementAccount.ts
@@ -1,5 +1,5 @@
 import type {ValueOf} from 'type-fest';
-import type {FileObject} from '@components/AttachmentModal';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type CONST from '@src/CONST';
 import type {Country} from '@src/CONST';
 import type {ACHContractStepProps, BeneficialOwnersStepProps, CompanyStepProps, ReimbursementAccountProps, RequestorStepProps} from '@src/types/form/ReimbursementAccountForm';
diff --git a/src/types/utils/SvgIconComponent.ts b/src/types/utils/SvgIconComponent.ts
new file mode 100644
index 000000000000..c13e155a450d
--- /dev/null
+++ b/src/types/utils/SvgIconComponent.ts
@@ -0,0 +1,5 @@
+import type {SvgProps} from 'react-native-svg';
+
+type SvgIconComponent = React.FC<SvgProps>;
+
+export default SvgIconComponent;
diff --git a/tests/perf-test/ReportActionsList.perf-test.tsx b/tests/perf-test/ReportActionsList.perf-test.tsx
index dff140a3e63a..ea1d619bb610 100644
--- a/tests/perf-test/ReportActionsList.perf-test.tsx
+++ b/tests/perf-test/ReportActionsList.perf-test.tsx
@@ -4,12 +4,12 @@ import Onyx from 'react-native-onyx';
 import {measureRenders} from 'reassure';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import type Navigation from '@libs/Navigation/Navigation';
+import {AttachmentModalProvider} from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
 import ComposeProviders from '@src/components/ComposeProviders';
 import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
 import OnyxProvider from '@src/components/OnyxProvider';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ReportActionsList from '@src/pages/home/report/ReportActionsList';
-import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext';
 import {ActionListContext, ReactionListContext} from '@src/pages/home/ReportScreenContext';
 import type {PersonalDetailsList} from '@src/types/onyx';
 import createRandomReportAction from '../utils/collections/reportActions';
@@ -106,7 +106,7 @@ afterEach(() => {
 function ReportActionsListWrapper() {
     const reportActions = ReportTestUtils.getMockedSortedReportActions(500);
     return (
-        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, ReportAttachmentsProvider]}>
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, AttachmentModalProvider]}>
             <ReactionListContext.Provider value={mockRef}>
                 <ActionListContext.Provider value={mockRef}>
                     <ReportActionsList