diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 2a170150d23da..7a88579560dd2 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -2200,7 +2200,6 @@ const CONST = {
     YOUR_LOCATION_TEXT: 'Your Location',
 
     ATTACHMENT_MESSAGE_TEXT: '[Attachment]',
-    ATTACHMENT_REGEX: /<video |<img /,
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
     ATTACHMENT_ID_ATTRIBUTE: 'data-attachment-id',
     ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src',
@@ -2254,6 +2253,20 @@ const CONST = {
         HEIC: 'image/heic',
     },
 
+    IMAGE_CACHE_FILE_TYPES: {
+        'image/webp': 'webp',
+        'image/png': 'png',
+        'image/apng': 'png',
+        'image/avif': 'avif',
+        'image/jpeg': 'jpg',
+        'image/jpg': 'jpg',
+        'image/gif': 'gif',
+        'image/svg+xml': 'svg',
+        'image/x-icon': 'ico',
+        'image/vnd.microsoft.icon': 'ico',
+        'image/heic': 'heic',
+    },
+
     SHARE_FILE_MIMETYPE: {
         JPG: 'image/jpg',
         JPEG: 'image/jpeg',
@@ -4200,15 +4213,25 @@ const CONST = {
         NON_NUMERIC: /\D/g,
         ANY_SPACE: /\s/g,
 
-        // Extract attachment's source from the data's html string
-        ATTACHMENT_DATA: /(data-expensify-source|data-name)="([^"]+)"/g,
-
         EMOJI_NAME: /(?<=^|[\s\S]):[\p{L}0-9_+-]+:/gu,
         EMOJI_SUGGESTIONS: /(?<=^|[\s\S]):[\p{L}0-9_+-]{1,40}$/u,
         AFTER_FIRST_LINE_BREAK: /\n.*/g,
         LINE_BREAK: /\r\n|\r|\n|\u2028/g,
         CODE_2FA: /^\d{6}$/,
-        ATTACHMENT_ID: /chat-attachments\/(\d+)/,
+
+        ATTACHMENT: {
+            // Match any attachment tag inside the markdown text i.e only: <img or <video
+            ATTACHMENT_REGEX: /<video |<img /g,
+            // Extract all attachments including all atributes and values from markdown text
+            ATTACHMENT: /<(img|video)[^>]*>/gi,
+            // Retrieve the attachment id value from data-attachment-id attribute
+            ATTACHMENT_ID: /data-attachment-id=(["'])(.*?)\1/,
+            // Retrive attachment source id from attachment source url link
+            ATTACHMENT_SOURCE_ID: /chat-attachments\/(\d+)/,
+            // Retrieve attachment source either local or remote
+            ATTACHMENT_SOURCE: /(src|data-expensify-source|data-optimistic-src)="([^"]+)"/i,
+        },
+
         HAS_COLON_ONLY_AT_THE_BEGINNING: /^:[^:]+$/,
         HAS_AT_MOST_TWO_AT_SIGNS: /^@[^@]*@?[^@]*$/,
         EMPTY_COMMENT: /^(\s)*$/,
@@ -7120,6 +7143,10 @@ const CONST = {
         BOOK_MEETING_LINK: 'https://calendly.com/d/cqsm-2gm-fxr/expensify-product-team',
     },
 
+    CACHE_API_KEYS: {
+        ATTACHMENTS: 'attachments',
+    },
+
     SESSION_STORAGE_KEYS: {
         INITIAL_URL: 'INITIAL_URL',
         ACTIVE_WORKSPACE_ID: 'ACTIVE_WORKSPACE_ID',
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 90fbdba1ce94c..64ca41bfdcf5f 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -673,6 +673,7 @@ const ONYXKEYS = {
 
     /** Collection Keys */
     COLLECTION: {
+        ATTACHMENT: 'attachment_',
         DOMAIN: 'domain_',
         DOWNLOAD: 'download_',
         POLICY: 'policy_',
@@ -1165,6 +1166,7 @@ type OnyxFormDraftValuesMapping = {
 };
 
 type OnyxCollectionValuesMapping = {
+    [ONYXKEYS.COLLECTION.ATTACHMENT]: OnyxTypes.Attachment;
     [ONYXKEYS.COLLECTION.DOMAIN]: OnyxTypes.Domain;
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;
     [ONYXKEYS.COLLECTION.POLICY]: OnyxTypes.Policy;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 23188706a6e21..c1cd30528c31e 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -4069,18 +4069,19 @@ function getAttachmentModalScreenRoute(url: AttachmentRoutes, params?: ReportAtt
         return url;
     }
 
-    const {source, attachmentID, type, reportID, accountID, isAuthTokenRequired, originalFileName, attachmentLink} = params;
+    const {source, attachmentID, type, reportID, reportActionID, accountID, isAuthTokenRequired, originalFileName, attachmentLink} = params;
 
     const sourceParam = `?source=${encodeURIComponent(source as string)}`;
     const attachmentIDParam = attachmentID ? `&attachmentID=${attachmentID}` : '';
     const typeParam = type ? `&type=${type as string}` : '';
     const reportIDParam = reportID ? `&reportID=${reportID}` : '';
+    const reportActionIDParam = reportActionID ? `&reportActionID=${reportActionID}` : '';
     const accountIDParam = accountID ? `&accountID=${accountID}` : '';
     const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
     const fileNameParam = originalFileName ? `&originalFileName=${originalFileName}` : '';
     const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
 
-    return `${url}${sourceParam}${typeParam}${reportIDParam}${attachmentIDParam}${accountIDParam}${authTokenParam}${fileNameParam}${attachmentLinkParam} ` as const;
+    return `${url}${sourceParam}${typeParam}${reportIDParam}${reportActionIDParam}${attachmentIDParam}${accountIDParam}${authTokenParam}${fileNameParam}${attachmentLinkParam} ` as const;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
index d43c203b50d38..eca3f7e5ea53e 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
@@ -26,7 +26,7 @@ type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & {
 };
 
 function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onPressIn, onPressOut, isDeleted}: BaseAnchorForAttachmentsOnlyProps) {
-    const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
+    const sourceID = (source.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_SOURCE_ID) ?? [])[1];
 
     const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`);
     const session = useSession();
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index c2ae94febd359..55fd1ad0eb398 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -109,6 +109,7 @@ function ImageRenderer({tnode}: CustomRendererProps<TBlock>) {
                         const route = ROUTES.REPORT_ATTACHMENTS?.getRoute({
                             attachmentID,
                             reportID,
+                            reportActionID: action?.reportActionID,
                             type,
                             source,
                             accountID,
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index 0eb1536b27707..b25cd5fbac862 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -27,7 +27,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const isDeleted = isDeletedNode(tnode);
     const attachmentID = htmlAttribs[CONST.ATTACHMENT_ID_ATTRIBUTE];
 
-    const {report} = useShowContextMenuState();
+    const {report, action} = useShowContextMenuState();
 
     return (
         <AttachmentContext.Consumer>
@@ -49,6 +49,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                         const route = ROUTES.REPORT_ATTACHMENTS.getRoute({
                             attachmentID,
                             reportID: report?.reportID,
+                            reportActionID: action?.reportActionID,
                             type,
                             source: sourceURL,
                             accountID,
diff --git a/src/libs/API/parameters/AddCommentOrAttachmentParams.ts b/src/libs/API/parameters/AddCommentOrAttachmentParams.ts
index de70f600204a4..c4f973e8ac964 100644
--- a/src/libs/API/parameters/AddCommentOrAttachmentParams.ts
+++ b/src/libs/API/parameters/AddCommentOrAttachmentParams.ts
@@ -5,6 +5,7 @@ type AddCommentOrAttachmentParams = {
     reportActionID?: string;
     commentReportActionID?: string | null;
     reportComment?: string;
+    attachmentID?: string;
     file?: FileObject;
     timezone?: string;
     clientCreatedTime?: string;
diff --git a/src/libs/AttachmentUtils.ts b/src/libs/AttachmentUtils.ts
index 7c585a3e35809..f6cfa7ff06751 100644
--- a/src/libs/AttachmentUtils.ts
+++ b/src/libs/AttachmentUtils.ts
@@ -102,5 +102,13 @@ function isDirectoryCheck(data: FileObject) {
     return true;
 }
 
-export default validateAttachmentFile;
+/**
+ * Returns image cache file extension based from mime type
+ */
+function getImageCacheFileExtension(contentType: string) {
+    const imageCacheFileTypes: Record<string, string> = CONST.IMAGE_CACHE_FILE_TYPES;
+    return imageCacheFileTypes[contentType] ?? '';
+}
+
+export {validateAttachmentFile, getImageCacheFileExtension};
 export type {AttachmentValidationResult};
diff --git a/src/libs/CacheAPI/index.native.ts b/src/libs/CacheAPI/index.native.ts
new file mode 100644
index 0000000000000..4d2fe191cc99e
--- /dev/null
+++ b/src/libs/CacheAPI/index.native.ts
@@ -0,0 +1,14 @@
+// Cache API only works for web, so we will return empty function here
+function init() {}
+function put() {}
+function get() {}
+function remove() {}
+function clear() {}
+
+export default {
+    init,
+    put,
+    get,
+    remove,
+    clear,
+};
diff --git a/src/libs/CacheAPI/index.ts b/src/libs/CacheAPI/index.ts
new file mode 100644
index 0000000000000..1a01275747aa0
--- /dev/null
+++ b/src/libs/CacheAPI/index.ts
@@ -0,0 +1,54 @@
+import type {ValueOf} from 'type-fest';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+
+type CacheNameType = ValueOf<typeof CONST.CACHE_API_KEYS>;
+
+function init() {
+    // Exit early if the Cache API is not supported in the current browser.
+    if (!('caches' in window)) {
+        Log.warn('Cache API is not supported');
+        return;
+    }
+    const keys = Object.values(CONST.CACHE_API_KEYS);
+    for (const key of keys) {
+        caches.has(key).then((isExist) => {
+            if (isExist) {
+                return;
+            }
+            caches.open(key);
+        });
+    }
+}
+
+function put(cacheName: CacheNameType, key: string, value: Response) {
+    return caches.open(cacheName).then((cache) => cache.put(key, value));
+}
+
+function get(cacheName: CacheNameType, key: string) {
+    return caches.open(cacheName).then((cache) => cache.match(key));
+}
+
+function remove(cacheName: CacheNameType, key: string) {
+    return caches.open(cacheName).then((cache) => cache.delete(key));
+}
+
+function clear(cacheName?: CacheNameType) {
+    // If a cache name is provided, delete only that key.
+    if (cacheName) {
+        return caches.delete(cacheName);
+    }
+
+    const keys = Object.values(CONST.CACHE_API_KEYS);
+    const deletePromises = keys.map((key) => caches.delete(key));
+
+    return Promise.all(deletePromises);
+}
+
+export default {
+    init,
+    put,
+    get,
+    remove,
+    clear,
+};
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 072269fe167f3..b37080736f7dc 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -2872,6 +2872,7 @@ type AttachmentModalScreensParamList = {
     [SCREENS.REPORT_ATTACHMENTS]: AttachmentModalContainerModalProps & {
         source?: AvatarSource;
         reportID?: string;
+        reportActionID?: string;
         accountID?: number;
         attachmentID?: string;
         type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
@@ -2887,6 +2888,7 @@ type AttachmentModalScreensParamList = {
     };
     [SCREENS.REPORT_ADD_ATTACHMENT]: AttachmentModalContainerModalProps & {
         reportID?: string;
+        reportActionID?: string;
         accountID?: number;
         attachmentID?: string;
         source?: AvatarSource;
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index d65e3986654f9..8b5b8dbae7263 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -223,16 +223,22 @@ function isDeletedAction(reportAction: OnyxInputOrEntry<ReportAction | Optimisti
 
 /**
  * This function will add attachment ID attribute on img and video HTML tags inside the passed html content
- * of a report action. This attachment id is the reportActionID concatenated with the order index that the attachment
- * appears inside the report action message so as to identify attachments with identical source inside a report action.
+ * of a report action. For newer attachments, it will use the existing attachmentID unique id value. otherwise, it falls back to the reportActionID concatenated
+ * with the order index that the attachment appears inside the report action message, so as to identify
+ * attachments with identical source inside a report action.
  */
 function getHtmlWithAttachmentID(html: string, reportActionID: string | undefined) {
     if (!reportActionID) {
         return html;
     }
 
-    let attachmentID = 0;
-    return html.replaceAll(/<img |<video /g, (m) => m.concat(`${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++attachmentID}" `));
+    let index = 0;
+    return html.replaceAll(CONST.REGEX.ATTACHMENT.ATTACHMENT, (match) => {
+        const attachmentID = match.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_ID)?.[2];
+
+        // If the attachment ID is already present, skip it
+        return attachmentID ? match : match.replaceAll(CONST.REGEX.ATTACHMENT.ATTACHMENT_REGEX, (m) => m.concat(`${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++index}" `));
+    });
 }
 
 function getReportActionMessage(reportAction: PartialReportAction) {
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index afa945e01fcbe..1a58d95e7a856 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -357,6 +357,16 @@ type OptimisticAddCommentReportAction = Pick<
     | 'delegateAccountID'
 > & {isOptimisticAction: boolean};
 
+type BuildOptimisticAddCommentReportActionParams = {
+    text?: string;
+    file?: FileObject;
+    actorAccountID?: number;
+    createdOffset?: number;
+    reportID?: string;
+    reportActionID?: string;
+    attachmentID?: string;
+};
+
 type OptimisticReportAction = {
     commentText: string;
     reportAction: OptimisticAddCommentReportAction;
@@ -6316,7 +6326,7 @@ function getParsedComment(text: string, parsingDetails?: ParsingDetails, mediaAt
     });
 }
 
-function getUploadingAttachmentHtml(file?: FileObject): string {
+function getUploadingAttachmentHtml(file?: FileObject, attachmentID?: string): string {
     if (!file || typeof file.uri !== 'string') {
         return '';
     }
@@ -6325,6 +6335,7 @@ function getUploadingAttachmentHtml(file?: FileObject): string {
         `${CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE}="${file.uri}"`,
         `${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="${file.uri}"`,
         `${CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE}="${file.name}"`,
+        attachmentID && `${CONST.ATTACHMENT_ID_ATTRIBUTE}="${attachmentID}"`,
         'width' in file && `${CONST.ATTACHMENT_THUMBNAIL_WIDTH_ATTRIBUTE}="${file.width}"`,
         'height' in file && `${CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE}="${file.height}"`,
     ]
@@ -6364,16 +6375,17 @@ function getPolicyDescriptionText(policy: OnyxEntry<Policy>): string {
     return Parser.htmlToText(policy.description);
 }
 
-function buildOptimisticAddCommentReportAction(
-    text?: string,
-    file?: FileObject,
-    actorAccountID?: number,
+function buildOptimisticAddCommentReportAction({
+    text,
+    file,
+    actorAccountID,
     createdOffset = 0,
-    reportID?: string,
-    reportActionID: string = rand64(),
-): OptimisticReportAction {
+    reportID,
+    reportActionID = rand64(),
+    attachmentID,
+}: BuildOptimisticAddCommentReportActionParams): OptimisticReportAction {
     const commentText = getParsedComment(text ?? '', {reportID});
-    const attachmentHtml = getUploadingAttachmentHtml(file);
+    const attachmentHtml = getUploadingAttachmentHtml(file, attachmentID);
 
     const htmlForNewComment = `${commentText}${commentText && attachmentHtml ? '<br /><br />' : ''}${attachmentHtml}`;
     const textForNewComment = Parser.htmlToText(htmlForNewComment);
@@ -6499,7 +6511,7 @@ function buildOptimisticTaskCommentReportAction(
     actorAccountID?: number,
     createdOffset = 0,
 ): OptimisticReportAction {
-    const reportAction = buildOptimisticAddCommentReportAction(text, undefined, undefined, createdOffset, taskReportID);
+    const reportAction = buildOptimisticAddCommentReportAction({text, reportID: taskReportID, createdOffset});
     if (Array.isArray(reportAction.reportAction.message)) {
         const message = reportAction.reportAction.message.at(0);
         if (message) {
@@ -11634,7 +11646,7 @@ function prepareOnboardingOnyxData({
 
     // Text message
     const message = typeof onboardingMessage.message === 'function' ? onboardingMessage.message(onboardingTaskParams) : onboardingMessage.message;
-    const textComment = buildOptimisticAddCommentReportAction(message, undefined, actorAccountID, 1);
+    const textComment = buildOptimisticAddCommentReportAction({text: message, actorAccountID, createdOffset: 1});
     const textCommentAction: OptimisticAddCommentReportAction = textComment.reportAction;
     const textMessage: AddCommentOrAttachmentParams = {
         reportID: targetChatReportID,
@@ -11651,7 +11663,13 @@ function prepareOnboardingOnyxData({
     if (shouldUseFollowupsInsteadOfTasks && companySize === CONST.ONBOARDING_COMPANY_SIZE.MICRO) {
         bespokeWelcomeMessage = getBespokeWelcomeMessage(userReportedIntegration);
         optimisticConciergeReportActionID = rand64();
-        bespokeAction = buildOptimisticAddCommentReportAction(bespokeWelcomeMessage, undefined, CONST.ACCOUNT_ID.CONCIERGE, 2, targetChatReportID, optimisticConciergeReportActionID);
+        bespokeAction = buildOptimisticAddCommentReportAction({
+            text: bespokeWelcomeMessage,
+            actorAccountID: CONST.ACCOUNT_ID.CONCIERGE,
+            createdOffset: 2,
+            reportID: targetChatReportID,
+            reportActionID: optimisticConciergeReportActionID,
+        });
     }
 
     let createWorkspaceTaskReportID;
@@ -11762,7 +11780,7 @@ function prepareOnboardingOnyxData({
     const welcomeSignOffText =
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         engagementChoice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM ? translateLocal('onboarding.welcomeSignOffTitleManageTeam') : translateLocal('onboarding.welcomeSignOffTitle');
-    const welcomeSignOffComment = buildOptimisticAddCommentReportAction(welcomeSignOffText, undefined, actorAccountID, tasksData.length + 3);
+    const welcomeSignOffComment = buildOptimisticAddCommentReportAction({text: welcomeSignOffText, actorAccountID, createdOffset: tasksData.length + 3});
     const welcomeSignOffCommentAction: OptimisticAddCommentReportAction = welcomeSignOffComment.reportAction;
     const welcomeSignOffMessage = {
         reportID: targetChatReportID,
@@ -12391,7 +12409,7 @@ function getSourceIDFromReportAction(reportAction: OnyxEntry<ReportAction>): str
     const message = Array.isArray(reportAction?.message) ? (reportAction?.message?.at(-1) ?? null) : (reportAction?.message ?? null);
     const html = message?.html ?? '';
     const {sourceURL} = getAttachmentDetails(html);
-    const sourceID = (sourceURL?.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
+    const sourceID = (sourceURL?.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_SOURCE_ID) ?? [])[1];
     return sourceID;
 }
 
diff --git a/src/libs/actions/Attachment/index.native.ts b/src/libs/actions/Attachment/index.native.ts
new file mode 100644
index 0000000000000..a321e329ecd52
--- /dev/null
+++ b/src/libs/actions/Attachment/index.native.ts
@@ -0,0 +1,112 @@
+import RNFetchBlob from 'react-native-blob-util';
+import RNFS from 'react-native-fs';
+import Onyx from 'react-native-onyx';
+import {getImageCacheFileExtension} from '@libs/AttachmentUtils';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {CacheAttachmentProps, GetCachedAttachmentProps, RemoveCachedAttachmentProps} from './types';
+
+const ATTACHMENT_DIR = `${RNFS.DocumentDirectoryPath}/attachments`;
+
+async function cacheAttachment({attachmentID, uri, mimeType}: CacheAttachmentProps) {
+    const isLocalFile = uri.startsWith('file://');
+    const fileExtension = getImageCacheFileExtension(mimeType ?? '');
+
+    // For local file uploads and the file type is supported for caching, then copy instead of re-downloading the file
+    if (isLocalFile && fileExtension) {
+        const fileName = `${attachmentID}.${fileExtension}`;
+        const destPath = `${ATTACHMENT_DIR}/${fileName}`;
+
+        try {
+            await RNFS.copyFile(uri, destPath);
+            await Onyx.set(`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`, {
+                attachmentID,
+                source: destPath,
+            });
+        } catch (error) {
+            Log.warn('[AttachmentCache] Failed to cache attachment', {error});
+        }
+
+        return;
+    }
+
+    try {
+        // HEAD first to validate size and type before downloading
+        const headResponse = await fetch(uri, {method: 'HEAD'});
+        const contentType = headResponse.headers.get('content-type') ?? '';
+        const contentSize = Number(headResponse.headers.get('content-length') ?? 0);
+
+        // Exit if the attachment size is too large
+        if (contentSize > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+            Log.warn('[AttachmentCache] Attachment is too large, skipping cache', {attachmentID, contentSize});
+            return;
+        }
+
+        const attachmentFileExtension = getImageCacheFileExtension(contentType ?? '');
+
+        // If attachmentFileExtension is not set properly / or doesn't exist in our lists, then we need to exit
+        if (!attachmentFileExtension) {
+            Log.warn('[AttachmentCache] Unsupported file type, skipping cache', {attachmentID, contentType});
+            return;
+        }
+
+        const fileName = `${attachmentID}.${attachmentFileExtension}`;
+        const filePath = `${ATTACHMENT_DIR}/${fileName}`;
+        await RNFetchBlob.config({path: filePath}).fetch('GET', uri);
+
+        await Onyx.set(`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`, {
+            attachmentID,
+            source: filePath,
+            remoteSource: uri,
+        });
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to cache attachment', {error});
+    }
+}
+
+async function getCachedAttachment({attachmentID, attachment, currentSource}: GetCachedAttachmentProps) {
+    const isStale = attachment ? attachment?.remoteSource && attachment.remoteSource !== currentSource : false;
+    if (isStale) {
+        // Only re-cache the [markdown-attachment] if it is outdated (updated)
+        cacheAttachment({attachmentID, uri: currentSource});
+        return currentSource;
+    }
+
+    const localSource = attachment?.source;
+    if (localSource) {
+        return localSource;
+    }
+
+    return currentSource;
+}
+
+async function removeCachedAttachment({attachmentID, localSource}: RemoveCachedAttachmentProps): Promise<void> {
+    if (!localSource) {
+        return;
+    }
+
+    try {
+        const exists = await RNFS.exists(localSource);
+        if (exists) {
+            await RNFS.unlink(localSource);
+        }
+        await Onyx.set(`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`, null);
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to remove cached attachment', {attachmentID, error});
+    }
+}
+
+async function clearCachedAttachments(): Promise<void> {
+    try {
+        const exists = await RNFS.exists(ATTACHMENT_DIR);
+        if (exists) {
+            await RNFS.unlink(ATTACHMENT_DIR);
+        }
+        await Onyx.setCollection(ONYXKEYS.COLLECTION.ATTACHMENT, {});
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to clear cached attachments', {error});
+    }
+}
+
+export {cacheAttachment, getCachedAttachment, removeCachedAttachment, clearCachedAttachments};
diff --git a/src/libs/actions/Attachment/index.ts b/src/libs/actions/Attachment/index.ts
new file mode 100644
index 0000000000000..804b747f23ada
--- /dev/null
+++ b/src/libs/actions/Attachment/index.ts
@@ -0,0 +1,87 @@
+import Onyx from 'react-native-onyx';
+import {getImageCacheFileExtension} from '@libs/AttachmentUtils';
+import CacheAPI from '@libs/CacheAPI';
+import {isLocalFile} from '@libs/fileDownload/FileUtils';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {CacheAttachmentProps, GetCachedAttachmentProps, RemoveCachedAttachmentProps} from './types';
+
+async function cacheAttachment({attachmentID, uri}: CacheAttachmentProps): Promise<void> {
+    try {
+        const response = await fetch(uri);
+        if (!response.ok) {
+            Log.warn('[AttachmentCache] Failed to fetch attachment');
+            return;
+        }
+
+        const contentType = response.headers.get('content-type') ?? '';
+        if (contentType === 'image/heic') {
+            Log.warn('[AttachmentCache] HEIC is not supported, skipping cache', {attachmentID, contentType});
+            return;
+        }
+
+        const fileExtension = getImageCacheFileExtension(contentType);
+
+        // If the image file type doesn't exist in our list, then we need to exit
+        if (!fileExtension) {
+            Log.warn('[AttachmentCache] Unsupported file type, skipping cache', {attachmentID, contentType});
+            return;
+        }
+
+        try {
+            await CacheAPI.put(CONST.CACHE_API_KEYS.ATTACHMENTS, attachmentID, response);
+            await Onyx.set(`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`, {
+                attachmentID,
+                remoteSource: isLocalFile(uri) ? '' : uri,
+            });
+        } catch (error) {
+            Log.warn('[AttachmentCache] Failed to cache attachment', {error});
+        }
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to fetch attachment', {error});
+    }
+}
+
+async function getCachedAttachment({attachmentID, attachment, currentSource}: GetCachedAttachmentProps): Promise<string> {
+    const isStale = attachment ? attachment?.remoteSource && attachment.remoteSource !== currentSource : false;
+    if (isStale) {
+        // Only re-cache the [markdown-attachment] if it is outdated (updated)
+        cacheAttachment({attachmentID, uri: currentSource});
+        return currentSource;
+    }
+
+    const cachedAttachment = await CacheAPI.get(CONST.CACHE_API_KEYS.ATTACHMENTS, attachmentID);
+    const isUncached = !cachedAttachment;
+    if (isUncached) {
+        return currentSource;
+    }
+
+    try {
+        const attachmentFile = await cachedAttachment.blob();
+        return URL.createObjectURL(attachmentFile);
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to get attachment', {error});
+        return currentSource;
+    }
+}
+
+async function removeCachedAttachment({attachmentID}: RemoveCachedAttachmentProps) {
+    try {
+        await CacheAPI.remove(CONST.CACHE_API_KEYS.ATTACHMENTS, attachmentID);
+        await Onyx.set(`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`, null);
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to remove cached attachment', {error});
+    }
+}
+
+async function clearCachedAttachments() {
+    try {
+        await CacheAPI.clear(CONST.CACHE_API_KEYS.ATTACHMENTS);
+        await Onyx.setCollection(ONYXKEYS.COLLECTION.ATTACHMENT, {});
+    } catch (error) {
+        Log.warn('[AttachmentCache] Failed to clear cached attachments', {error});
+    }
+}
+
+export {cacheAttachment, getCachedAttachment, removeCachedAttachment, clearCachedAttachments};
diff --git a/src/libs/actions/Attachment/types.ts b/src/libs/actions/Attachment/types.ts
new file mode 100644
index 0000000000000..eb0dad30ae5dc
--- /dev/null
+++ b/src/libs/actions/Attachment/types.ts
@@ -0,0 +1,34 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Attachment} from '@src/types/onyx';
+
+type CacheAttachmentProps = {
+    /** Attachment ID based on the data-attachment-id attribute */
+    attachmentID: string;
+
+    /** URI of the given attachment either external or local source */
+    uri: string;
+
+    /** MIME type of the given attachment (native-only) */
+    mimeType?: string;
+};
+
+type GetCachedAttachmentProps = {
+    /** Attachment ID based on the data-attachment-id attribute */
+    attachmentID: string;
+
+    /** Attachment data from Onyx */
+    attachment: OnyxEntry<Attachment>;
+
+    /** Current source of the attachment */
+    currentSource: string;
+};
+
+type RemoveCachedAttachmentProps = {
+    /** Attachment ID based on the data-attachment-id attribute */
+    attachmentID: string;
+
+    /** Local source of the attachment (for-native-only) */
+    localSource?: string;
+};
+
+export type {CacheAttachmentProps, GetCachedAttachmentProps, RemoveCachedAttachmentProps};
diff --git a/src/libs/actions/IOU/index.ts b/src/libs/actions/IOU/index.ts
index af3bbdf5ebc49..43c87c3612116 100644
--- a/src/libs/actions/IOU/index.ts
+++ b/src/libs/actions/IOU/index.ts
@@ -1811,7 +1811,7 @@ function buildOnyxDataForTestDriveIOU(
     });
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     const text = Localize.translateLocal('testDrive.employeeInviteMessage', personalDetailsList?.[userAccountID]?.firstName ?? '');
-    const textComment = buildOptimisticAddCommentReportAction(text, undefined, userAccountID, undefined, undefined, testDriveIOUParams.testDriveCommentReportActionID);
+    const textComment = buildOptimisticAddCommentReportAction({text, actorAccountID: userAccountID, reportActionID: testDriveIOUParams.testDriveCommentReportActionID});
     textComment.reportAction.created = DateUtils.subtractMillisecondsFromDateTime(testDriveIOUParams.iouOptimisticParams.createdAction.created, 1);
 
     optimisticData.push(
diff --git a/src/libs/actions/Report/SuggestedFollowup.ts b/src/libs/actions/Report/SuggestedFollowup.ts
index 0b14bb3e5025c..5e55e0f7fa6ee 100644
--- a/src/libs/actions/Report/SuggestedFollowup.ts
+++ b/src/libs/actions/Report/SuggestedFollowup.ts
@@ -77,14 +77,12 @@ function resolveSuggestedFollowup(
         },
     });
 
-    const optimisticConciergeAction = buildOptimisticAddCommentReportAction(
-        selectedFollowup.response,
-        undefined,
-        CONST.ACCOUNT_ID.CONCIERGE,
-        CONCIERGE_RESPONSE_DELAY_MS,
+    const optimisticConciergeAction = buildOptimisticAddCommentReportAction({
+        text: selectedFollowup.response,
+        actorAccountID: CONST.ACCOUNT_ID.CONCIERGE,
+        reportActionID: optimisticConciergeReportActionID,
         reportID,
-        optimisticConciergeReportActionID,
-    );
+    });
 
     addOptimisticConciergeActionWithDelay(reportID, optimisticConciergeAction);
 }
diff --git a/src/libs/actions/Report/index.ts b/src/libs/actions/Report/index.ts
index 64ab9f1b60f05..e60ebb5bebb82 100644
--- a/src/libs/actions/Report/index.ts
+++ b/src/libs/actions/Report/index.ts
@@ -165,6 +165,7 @@ import playSound, {SOUNDS} from '@libs/Sound';
 import {getAmount, getCurrency, hasValidModifiedAmount, isOnHold, recalculateUnreportedTransactionDetails, shouldClearConvertedAmount} from '@libs/TransactionUtils';
 import addTrailingForwardSlash from '@libs/UrlUtils';
 import Visibility from '@libs/Visibility';
+import {cacheAttachment, removeCachedAttachment} from '@userActions/Attachment';
 import {clearByKey} from '@userActions/CachedPDFPaths';
 import {setDownload} from '@userActions/Download';
 import {close} from '@userActions/Modal';
@@ -191,6 +192,7 @@ import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/NewRoomForm';
 import type {
     AnyRequest,
+    Attachment,
     BankAccountList,
     Beta,
     IntroSelected,
@@ -420,6 +422,14 @@ Onyx.connect({
     },
 });
 
+// We use connectWithoutView because `allAttachments` doesn't affect the UI rendering, it's only used to retrieve attachment local source when deleting a comment
+let allAttachments: OnyxCollection<Attachment> = {};
+Onyx.connectWithoutView({
+    key: ONYXKEYS.COLLECTION.ATTACHMENT,
+    waitForCollectionCallback: true,
+    callback: (value) => (allAttachments = value),
+});
+
 let environment: EnvironmentType;
 getEnvironment().then((env) => {
     environment = env;
@@ -708,8 +718,9 @@ function addActions({
     let attachmentAction: OptimisticAddCommentReportAction | undefined;
     let commandName: typeof WRITE_COMMANDS.ADD_COMMENT | typeof WRITE_COMMANDS.ADD_ATTACHMENT | typeof WRITE_COMMANDS.ADD_TEXT_AND_ATTACHMENT = WRITE_COMMANDS.ADD_COMMENT;
 
+    const attachmentID = rand64();
     if (text && !file) {
-        const reportComment = buildOptimisticAddCommentReportAction(text, undefined, undefined, undefined, reportID, reportActionID);
+        const reportComment = buildOptimisticAddCommentReportAction({text, reportID, reportActionID});
         reportCommentAction = reportComment.reportAction;
         reportCommentText = reportComment.commentText;
     }
@@ -718,8 +729,9 @@ function addActions({
         // When we are adding an attachment we will call AddAttachment.
         // It supports sending an attachment with an optional comment and AddComment supports adding a single text comment only.
         commandName = WRITE_COMMANDS.ADD_ATTACHMENT;
-        const attachment = buildOptimisticAddCommentReportAction(text, file, undefined, undefined, reportID);
+        const attachment = buildOptimisticAddCommentReportAction({text, file, reportID, attachmentID});
         attachmentAction = attachment.reportAction;
+        cacheAttachment({attachmentID, uri: file.uri ?? '', mimeType: file.type});
     }
 
     if (text && file) {
@@ -730,6 +742,31 @@ function addActions({
         commandName = WRITE_COMMANDS.ADD_TEXT_AND_ATTACHMENT;
     }
 
+    // Store all markdown text attachments i.e `![](https://images.unsplash.com/...)`
+    const resolvedReportActionID = file ? attachmentAction?.reportActionID : reportCommentAction?.reportActionID;
+    const attachmentTags = [...reportCommentText.matchAll(CONST.REGEX.ATTACHMENT.ATTACHMENT)];
+
+    const attachments = attachmentTags.flatMap((htmlTag, index) => {
+        const tag = htmlTag[0];
+
+        // [2] means the exact value, in this case source url and attachment id of the attachment tag
+        const source = tag.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_SOURCE)?.[2];
+        const dataAttachmentID = tag.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_ID)?.[2];
+
+        if (!source) {
+            return [];
+        }
+
+        return {
+            uri: source,
+            attachmentID: dataAttachmentID ?? `${resolvedReportActionID}_${index + 1}`,
+        };
+    });
+
+    for (const attachment of attachments) {
+        cacheAttachment({attachmentID: attachment.attachmentID, uri: attachment.uri ?? ''});
+    }
+
     // Always prefer the file as the last action over text
     const lastAction = attachmentAction ?? reportCommentAction;
     const currentTime = NetworkConnection.getDBTimeWithSkew();
@@ -774,7 +811,7 @@ function addActions({
 
     const parameters: AddCommentOrAttachmentParams = {
         reportID,
-        reportActionID: file ? attachmentAction?.reportActionID : reportCommentAction?.reportActionID,
+        reportActionID: resolvedReportActionID,
         commentReportActionID: file && reportCommentAction ? reportCommentAction.reportActionID : null,
         reportComment: reportCommentText,
         file,
@@ -786,6 +823,10 @@ function addActions({
         parameters.isOldDotConciergeChat = true;
     }
 
+    if (file) {
+        parameters.attachmentID = attachmentID;
+    }
+
     if (isInSidePanel && (isConciergeChatReport(report) || isAdminRoom(report))) {
         const pageHTML = capturePageHTML();
         if (pageHTML) {
@@ -2448,6 +2489,27 @@ function deleteReportComment(
     if (!reportActionID || !originalReportID || !reportID) {
         return;
     }
+    const reportActionMessage = ReportActionsUtils.getReportActionMessage(reportAction);
+    const reportCommentText = reportActionMessage?.html ?? '';
+
+    const attachmentTags = [...reportCommentText.matchAll(CONST.REGEX.ATTACHMENT.ATTACHMENT)];
+
+    const attachments = attachmentTags.flatMap((htmlTag, index) => {
+        const tag = htmlTag[0];
+
+        const dataAttachmentID = tag.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_ID)?.[2]; // [2] means the exact value of the attachment id of the attachment tag
+        const attachmentID = dataAttachmentID ?? `${reportActionID}_${index + 1}`;
+        const attachment = allAttachments?.[`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`];
+
+        return {
+            attachmentID,
+            localSource: attachment?.source,
+        };
+    });
+
+    for (const attachment of attachments) {
+        removeCachedAttachment({attachmentID: attachment.attachmentID, localSource: attachment.localSource});
+    }
 
     const isDeletedParentAction = ReportActionsUtils.isThreadParentMessage(reportAction, reportID);
     const deletedMessage: Message[] = [
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index 7ebdac9a989fc..50bb0fa72b24a 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -68,6 +68,7 @@ import type Response from '@src/types/onyx/Response';
 import type Session from '@src/types/onyx/Session';
 import type {AutoAuthState} from '@src/types/onyx/Session';
 import pkg from '../../../../package.json';
+import {clearCachedAttachments} from '../Attachment';
 import clearCache from './clearCache';
 import updateSessionAuthTokens from './updateSessionAuthTokens';
 
@@ -1016,6 +1017,7 @@ function cleanupSession() {
     clearCache().then(() => {
         Log.info('Cleared all cache data', true, {}, true);
     });
+    clearCachedAttachments();
     clearSoundAssetsCache();
 }
 
diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts
index 5d5efc4566491..3bd9d0163795b 100644
--- a/src/libs/actions/User.ts
+++ b/src/libs/actions/User.ts
@@ -1534,7 +1534,7 @@ function respondToProactiveAppReview(response: 'positive' | 'negative' | 'skip',
     // For positive/negative responses, create an optimistic Concierge message
     if (message && conciergeChatReportID && response !== 'skip') {
         const conciergeAccountID = CONST.ACCOUNT_ID.CONCIERGE;
-        const optimisticReportAction = ReportUtils.buildOptimisticAddCommentReportAction(message, undefined, conciergeAccountID, undefined, conciergeChatReportID);
+        const optimisticReportAction = ReportUtils.buildOptimisticAddCommentReportAction({text: message, actorAccountID: conciergeAccountID, reportID: conciergeChatReportID});
         const optimisticReportActionID = optimisticReportAction.reportAction.reportActionID;
         const currentTime = DateUtils.getDBTime();
 
diff --git a/src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx b/src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx
index 19cb1f4f4d5df..69012e109252b 100644
--- a/src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx
+++ b/src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx
@@ -1196,7 +1196,7 @@ const ContextMenuActions: ContextMenuAction[] = [
             const html = getActionHtml(reportAction);
             const {originalFileName, sourceURL} = getAttachmentDetails(html);
             const sourceURLWithAuth = addEncryptedAuthTokenToURL(sourceURL ?? '', encryptedAuthToken);
-            const sourceID = (sourceURL?.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
+            const sourceID = (sourceURL?.match(CONST.REGEX.ATTACHMENT.ATTACHMENT_SOURCE_ID) ?? [])[1];
             setDownload(sourceID, true);
             const anchorRegex = CONST.REGEX_LINK_IN_ANCHOR;
             const isAnchorTag = anchorRegex.test(html);
diff --git a/src/pages/inbox/report/PureReportActionItem.tsx b/src/pages/inbox/report/PureReportActionItem.tsx
index 518254ba99acc..7edb8ac3cd3d6 100644
--- a/src/pages/inbox/report/PureReportActionItem.tsx
+++ b/src/pages/inbox/report/PureReportActionItem.tsx
@@ -597,7 +597,7 @@ function PureReportActionItem({
         (isHiddenValue: boolean) => {
             setIsHidden(isHiddenValue);
             const message = Array.isArray(action.message) ? action.message?.at(-1) : action.message;
-            const isAttachment = CONST.ATTACHMENT_REGEX.test(message?.html ?? '') || isReportMessageAttachment(message);
+            const isAttachment = (message?.html ?? '').search(CONST.REGEX.ATTACHMENT.ATTACHMENT_REGEX) !== -1 || isReportMessageAttachment(message);
             if (!isAttachment) {
                 return;
             }
diff --git a/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent/index.tsx b/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent/index.tsx
index 6f667e47fc4f6..7e6feeb49063a 100644
--- a/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent/index.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent/index.tsx
@@ -4,7 +4,7 @@ import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import {openReport} from '@libs/actions/Report';
-import validateAttachmentFile from '@libs/AttachmentUtils';
+import {validateAttachmentFile} from '@libs/AttachmentUtils';
 import type {AttachmentValidationResult} from '@libs/AttachmentUtils';
 import {getValidatedImageSource} from '@libs/AvatarUtils';
 import Navigation from '@libs/Navigation/Navigation';
diff --git a/src/pages/media/AttachmentModalScreen/routes/report/ReportAttachmentModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/report/ReportAttachmentModalContent.tsx
index be7fc3d58f80a..75600ef3b2b7e 100644
--- a/src/pages/media/AttachmentModalScreen/routes/report/ReportAttachmentModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/report/ReportAttachmentModalContent.tsx
@@ -22,7 +22,21 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import SafeString from '@src/utils/SafeString';
 
 function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreenProps<typeof SCREENS.REPORT_ATTACHMENTS>) {
-    const {attachmentID, type, source: sourceParam, isAuthTokenRequired, attachmentLink, originalFileName, accountID, reportID, hashKey, headerTitle, onShow, onClose} = route.params;
+    const {
+        attachmentID,
+        type,
+        source: sourceParam,
+        isAuthTokenRequired,
+        attachmentLink,
+        originalFileName,
+        accountID,
+        reportID,
+        reportActionID,
+        hashKey,
+        headerTitle,
+        onShow,
+        onClose,
+    } = route.params;
 
     const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
         canEvict: false,
@@ -30,7 +44,6 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [betas] = useOnyx(ONYXKEYS.BETAS);
 
-    const reportActionID = useMemo(() => attachmentID?.split('_')?.[0], [attachmentID]);
     const originalReportID = useOriginalReportID(reportID, reportActionID ? (reportActions?.[reportActionID ?? CONST.DEFAULT_NUMBER_ID] ?? {reportActionID}) : undefined);
     const reportActionReportID = originalReportID ?? reportID;
 
@@ -72,6 +85,7 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
         (attachment: Attachment) => {
             const routeToNavigate = ROUTES.REPORT_ATTACHMENTS.getRoute({
                 reportID,
+                reportActionID: attachment.reportActionID,
                 attachmentID: attachment.attachmentID,
                 type,
                 source: SafeString(attachment.source),
@@ -83,7 +97,7 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
             });
             Navigation.navigate(routeToNavigate);
         },
-        [reportID, type, accountID, hashKey],
+        [reportID, reportActionID, type, accountID, hashKey],
     );
 
     const onDownloadAttachment = useDownloadAttachment({
diff --git a/src/setup/platformSetup/index.ts b/src/setup/platformSetup/index.ts
index f0038a8f0728e..fd37ec1f01842 100644
--- a/src/setup/platformSetup/index.ts
+++ b/src/setup/platformSetup/index.ts
@@ -1,4 +1,5 @@
 import {AppRegistry} from 'react-native';
+import CacheAPI from '@libs/CacheAPI';
 import checkForUpdates from '@libs/checkForUpdates';
 import DateUtils from '@libs/DateUtils';
 import Visibility from '@libs/Visibility';
@@ -51,6 +52,9 @@ const webUpdater = (): PlatformSpecificUpdater => ({
 });
 
 export default function () {
+    // Initialize Cache API
+    CacheAPI.init();
+
     AppRegistry.runApplication(Config.APP_NAME, {
         rootTag: document.getElementById('root'),
     });
diff --git a/src/types/onyx/Attachment.tsx b/src/types/onyx/Attachment.tsx
new file mode 100644
index 0000000000000..7321eaa26472e
--- /dev/null
+++ b/src/types/onyx/Attachment.tsx
@@ -0,0 +1,12 @@
+type Attachment = {
+    /** Attachment ID of the attachment */
+    attachmentID: string;
+
+    /** Local source of the attachment */
+    source?: string;
+
+    /** Remote source url of the attachment */
+    remoteSource?: string;
+};
+
+export default Attachment;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 07b1e30bf1dd9..d6be837a45fda 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -5,6 +5,7 @@ import type AccountData from './AccountData';
 import type AppReview from './AppReview';
 import type {ApprovalWorkflowOnyx} from './ApprovalWorkflow';
 import type {AssignCard, AssignCardData} from './AssignCard';
+import type Attachment from './Attachment';
 import type {BankAccountList} from './BankAccount';
 import type BankAccount from './BankAccount';
 import type BankAccountShareDetails from './BankAccountShareDetails';
@@ -181,6 +182,7 @@ import type WalletTransfer from './WalletTransfer';
 export type {
     FileObject,
     TryNewDot,
+    Attachment,
     Account,
     AccountData,
     AssignCard,
diff --git a/tests/actions/AttachmentTest.ts b/tests/actions/AttachmentTest.ts
new file mode 100644
index 0000000000000..ce035f04fb429
--- /dev/null
+++ b/tests/actions/AttachmentTest.ts
@@ -0,0 +1,372 @@
+import Onyx from 'react-native-onyx';
+import type {OnyxCollection} from 'react-native-onyx';
+import {rand64} from '@libs/NumberUtils';
+import {clearCachedAttachments, getCachedAttachment} from '@userActions/Attachment';
+import {addAttachmentWithComment, addComment, deleteReportComment} from '@userActions/Report';
+import CONST from '@src/CONST';
+import type {Attachment, ReportAction} from '@src/types/onyx';
+import ONYXKEYS from '../../src/ONYXKEYS';
+import * as TestHelper from '../utils/TestHelper';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+jest.mock('react-native-fs', () => ({
+    DocumentDirectoryPath: '/mock/documents',
+    copyFile: jest.fn(() => Promise.resolve()),
+    exists: jest.fn(() => Promise.resolve(true)),
+    unlink: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock('react-native-blob-util', () => ({
+    config: jest.fn((data: {path?: string} | undefined) => {
+        const filePath: string = data?.path ?? '/mock/documents/file';
+        return {
+            fetch: jest.fn(() =>
+                Promise.resolve({
+                    path: jest.fn((): string => filePath),
+                }),
+            ),
+        };
+    }),
+    fs: {
+        dirs: {
+            DocumentDir: '/mock/documents',
+        },
+    },
+    fetch: jest.fn(() =>
+        Promise.resolve({
+            path: jest.fn((): string => '/mock/documents/file'),
+        }),
+    ),
+}));
+
+describe('AttachmentStorage', () => {
+    const reportID = rand64();
+
+    beforeAll(() => {
+        Onyx.init({
+            keys: ONYXKEYS,
+        });
+    });
+    beforeEach(async () => {
+        Onyx.clear();
+        await waitForBatchedUpdates();
+
+        // Mock global fetch and response for attachment
+        global.fetch = TestHelper.getGlobalFetchMock({
+            headers: new Headers({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'image/jpg',
+            }),
+        });
+    });
+
+    it('should cache attachment file upload', async () => {
+        // Given the attachment data consisting of name, type and uri
+        const fileData = {
+            name: `TEST_ATTACHMENT_FILE`,
+            type: 'image/jpg',
+            uri: 'file://mock/documents/113134427695441775.jpg',
+        };
+
+        // Then upload the attachment
+        addAttachmentWithComment({report: {reportID}, notifyReportID: reportID, ancestors: [], attachments: fileData, currentUserAccountID: 1});
+
+        await waitForBatchedUpdates();
+
+        const attachments = await new Promise<OnyxCollection<Attachment>>((resolve) => {
+            const connection = Onyx.connect({
+                key: ONYXKEYS.COLLECTION.ATTACHMENT,
+                waitForCollectionCallback: true,
+                callback: (value) => {
+                    Onyx.disconnect(connection);
+                    resolve(value);
+                },
+            });
+        });
+
+        const attachmentLists = Object.values(attachments ?? {});
+        const attachment = attachmentLists.at(0);
+        const attachmentID = attachment?.attachmentID;
+
+        // Then the attachmentID and attachment value should be defined
+        expect(attachmentID).toBeDefined();
+        expect(attachment).toEqual({
+            attachmentID,
+            source: `/mock/documents/attachments/${attachmentID}.jpg`,
+        });
+    });
+    it('should cache markdown attachment', async () => {
+        // Given the attachment data consisting of sourceURL and markdown comment text
+        const sourceURL = 'https://images.unsplash.com/photo-1726066012751-2adfb5485977?w=500';
+        const markdownTextLinkAttachment = `![](${sourceURL})`;
+
+        // Then send the comment
+        addComment({report: {reportID}, notifyReportID: reportID, ancestors: [], text: markdownTextLinkAttachment, timezoneParam: CONST.DEFAULT_TIME_ZONE, currentUserAccountID: 1});
+
+        await waitForBatchedUpdates();
+
+        const attachments = await new Promise<OnyxCollection<Attachment>>((resolve) => {
+            const connection = Onyx.connect({
+                key: ONYXKEYS.COLLECTION.ATTACHMENT,
+                waitForCollectionCallback: true,
+                callback: (value) => {
+                    Onyx.disconnect(connection);
+                    resolve(value);
+                },
+            });
+        });
+
+        const attachmentLists = Object.values(attachments ?? {});
+        const attachment = attachmentLists.at(0);
+        const attachmentID = attachment?.attachmentID;
+
+        // Then the attachmentID and attachment value should be defined
+        expect(attachmentID).toBeDefined();
+        expect(attachment).toEqual({
+            attachmentID,
+            source: `/mock/documents/attachments/${attachmentID}.jpg`,
+            remoteSource: sourceURL,
+        });
+    });
+    it('should re-cache when markdown image link is changed', async () => {
+        // Given the attachment data consisting of sourceURL and markdown comment text
+        const sourceURL = 'https://images.unsplash.com/photo-1726066012751-2adfb5485977?w=500';
+        const markdownTextLinkAttachment = `![](${sourceURL})`;
+
+        let attachments!: OnyxCollection<Attachment>;
+
+        Onyx.connect({
+            key: ONYXKEYS.COLLECTION.ATTACHMENT,
+            waitForCollectionCallback: true,
+            callback: (value) => {
+                if (!value) {
+                    return;
+                }
+                attachments = value;
+            },
+        });
+
+        await waitForBatchedUpdates();
+
+        // Then send the comment
+        addComment({report: {reportID}, notifyReportID: reportID, ancestors: [], text: markdownTextLinkAttachment, timezoneParam: CONST.DEFAULT_TIME_ZONE, currentUserAccountID: 1});
+
+        await waitForBatchedUpdates();
+
+        const attachment = Object.values(attachments ?? {}).at(0);
+        const attachmentID = attachment?.attachmentID;
+
+        // Then the attachmentID and attachment value should be defined
+        expect(attachmentID).toBeDefined();
+        expect(attachment).toEqual({
+            attachmentID,
+            source: `/mock/documents/attachments/${attachmentID}.jpg`,
+            remoteSource: sourceURL,
+        });
+
+        if (!attachmentID) {
+            return;
+        }
+
+        // Given the new markdown attachment link
+        const newSourceURL = 'https://images.unsplash.com/photo-1726066012751-2adfb5485977?w=100';
+        getCachedAttachment({attachmentID, attachment, currentSource: newSourceURL});
+
+        await waitForBatchedUpdates();
+
+        const newAttachment = Object.values(attachments ?? {}).at(0);
+
+        // Then the attachment should be updated with new attachment link
+        expect(newAttachment).toEqual({
+            attachmentID,
+            source: `/mock/documents/attachments/${attachmentID}.jpg`,
+            remoteSource: newSourceURL,
+        });
+    });
+    it('should remove attachment file when deleting the comment', async () => {
+        // Given the attachment data consisting of name, type and uri
+        const fileData = {
+            name: `TEST_ATTACHMENT_FILE`,
+            type: 'image/jpg',
+            uri: 'https://images.unsplash.com/photo-1726066012751-2adfb5485977?w=500',
+        };
+
+        let reportActions!: OnyxCollection<ReportAction>;
+        let attachments!: OnyxCollection<Attachment>;
+
+        Onyx.connect({
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
+            callback: (val) => (reportActions = val),
+        });
+
+        Onyx.connect({
+            key: ONYXKEYS.COLLECTION.ATTACHMENT,
+            waitForCollectionCallback: true,
+            callback: (value) => {
+                if (!value) {
+                    return;
+                }
+                attachments = value;
+            },
+        });
+
+        await waitForBatchedUpdates();
+
+        // Then upload the attachment
+        addAttachmentWithComment({report: {reportID}, notifyReportID: reportID, ancestors: [], attachments: fileData, currentUserAccountID: 1});
+
+        await waitForBatchedUpdates();
+
+        const attachmentAction = Object.values(reportActions ?? {}).find((reportAction) => reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT);
+        const newAttachment = Object.values(attachments ?? {}).at(0);
+        const attachmentID = newAttachment?.attachmentID;
+
+        // Then the attachmentID and attachment value should be defined
+        expect(attachmentID).toBeDefined();
+        expect(newAttachment).toEqual({
+            attachmentID,
+            source: `/mock/documents/attachments/${attachmentID}.jpg`,
+            remoteSource: fileData.uri,
+        });
+
+        if (!attachmentAction) {
+            return;
+        }
+
+        // Delete attachment
+        deleteReportComment({reportID}, attachmentAction, [], false, false, 'test@user.com');
+        await waitForBatchedUpdates();
+
+        // Then the attachment should be removed
+        const removedAttachment = attachments?.[`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`];
+        expect(removedAttachment).toBeUndefined();
+    });
+    it('should remove markdown attachment when deleting the comment', async () => {
+        // Given the attachment data consisting of sourceURL and markdown comment text
+        const sourceURL = 'https://images.unsplash.com/photo-1726066012751-2adfb5485977?w=500';
+        const markdownTextLinkAttachment = `![](${sourceURL})`;
+
+        let reportActions!: OnyxCollection<ReportAction>;
+        let attachments!: OnyxCollection<Attachment>;
+
+        Onyx.connect({
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
+            callback: (val) => (reportActions = val),
+        });
+
+        Onyx.connect({
+            key: ONYXKEYS.COLLECTION.ATTACHMENT,
+            waitForCollectionCallback: true,
+            callback: (value) => {
+                if (!value) {
+                    return;
+                }
+                attachments = value;
+            },
+        });
+
+        await waitForBatchedUpdates();
+
+        // Then send the comment
+        addComment({report: {reportID}, notifyReportID: reportID, ancestors: [], text: markdownTextLinkAttachment, timezoneParam: CONST.DEFAULT_TIME_ZONE, currentUserAccountID: 1});
+
+        await waitForBatchedUpdates();
+
+        const attachmentAction = Object.values(reportActions ?? {}).find((reportAction) => reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT);
+        const newAttachment = Object.values(attachments ?? {}).at(0);
+        const attachmentID = newAttachment?.attachmentID;
+
+        // Then the attachmentID and attachment value should be defined
+        expect(attachmentID).toBeDefined();
+        expect(newAttachment).toEqual({
+            attachmentID,
+            source: `/mock/documents/attachments/${attachmentID}.jpg`,
+            remoteSource: sourceURL,
+        });
+
+        if (!attachmentAction) {
+            return;
+        }
+
+        // Delete attachment
+        deleteReportComment({reportID}, attachmentAction, [], false, false, 'test@user.com');
+        await waitForBatchedUpdates();
+
+        const removedAttachment = attachments?.[`${ONYXKEYS.COLLECTION.ATTACHMENT}${attachmentID}`];
+
+        // Then the attachment should be removed
+        expect(removedAttachment).toBeUndefined();
+    });
+    it('should clear all markdown/attachment files when clearCachedAttachments is invoked', async () => {
+        // Given the markdown & attachment files data consisting of sourceURL and markdown comment text
+        const markdownAttachments = ['https://images.unsplash.com/photo-1726066012751-2adfb5485977?w=500', 'https://images.pexels.com/photos/577585/pexels-photo-577585.jpg'];
+        const markdownCommentText = markdownAttachments.map((url) => `![](${url})`).join('\n');
+        const attachmentFiles = [
+            {
+                name: `TEST_ATTACHMENT_FILE`,
+                type: 'image/jpg',
+                uri: 'file://mock/documents/113134427695441775.jpg',
+            },
+            {
+                name: `TEST_ATTACHMENT_FILE_2`,
+                type: 'image/jpg',
+                uri: 'file://mock/documents/224234427695441115.jpg',
+            },
+        ];
+
+        let attachments!: OnyxCollection<Attachment>;
+
+        Onyx.connect({
+            key: ONYXKEYS.COLLECTION.ATTACHMENT,
+            waitForCollectionCallback: true,
+            callback: (value) => {
+                if (!value) {
+                    return;
+                }
+                attachments = value;
+            },
+        });
+
+        await waitForBatchedUpdates();
+
+        // Then send both markdown & attachment files
+        addComment({report: {reportID}, notifyReportID: reportID, ancestors: [], text: markdownCommentText, timezoneParam: CONST.DEFAULT_TIME_ZONE, currentUserAccountID: 1});
+        addAttachmentWithComment({report: {reportID}, notifyReportID: reportID, ancestors: [], attachments: attachmentFiles, currentUserAccountID: 1});
+
+        await waitForBatchedUpdates();
+
+        const attachmentLists = Object.values(attachments ?? {});
+        const attachmentLength = markdownAttachments.length + attachmentFiles.length;
+
+        // Then the attachmentID and attachment value should be defined
+        expect(attachmentLists.length).toBe(attachmentLength);
+        for (const attachment of attachmentLists) {
+            const attachmentID = attachment?.attachmentID;
+            expect(attachmentID).toBeDefined();
+
+            const isMarkdownAttachment = !!attachment?.remoteSource;
+            if (isMarkdownAttachment) {
+                const remoteSourceIndex = markdownAttachments.indexOf(attachment?.remoteSource ?? '');
+                expect(remoteSourceIndex).toBeDefined();
+                expect(attachment).toEqual({
+                    attachmentID,
+                    source: `/mock/documents/attachments/${attachmentID}.jpg`,
+                    remoteSource: markdownAttachments.at(remoteSourceIndex),
+                });
+                continue;
+            }
+            expect(attachment).toEqual({
+                attachmentID,
+                source: `/mock/documents/attachments/${attachmentID}.jpg`,
+            });
+        }
+
+        // Clear all attachments
+        clearCachedAttachments();
+
+        await waitForBatchedUpdates();
+
+        // Then all attachments should be removed
+        expect(Object.values(attachments ?? {}).length).toBe(0);
+    });
+});
diff --git a/tests/actions/ReportTest.ts b/tests/actions/ReportTest.ts
index a2e43ca2c69a4..81fb90c957eac 100644
--- a/tests/actions/ReportTest.ts
+++ b/tests/actions/ReportTest.ts
@@ -140,6 +140,36 @@ jest.mock('@libs/actions/Welcome', () => ({
     onServerDataReady: jest.fn(() => Promise.resolve()),
 }));
 
+jest.mock('react-native-fs', () => ({
+    DocumentDirectoryPath: '/mock/documents',
+    copyFile: jest.fn(() => Promise.resolve()),
+    exists: jest.fn(() => Promise.resolve(true)),
+    unlink: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock('react-native-blob-util', () => ({
+    config: jest.fn((data: {path?: string} | undefined) => {
+        const filePath: string = data?.path ?? '/mock/documents/file';
+        return {
+            fetch: jest.fn(() =>
+                Promise.resolve({
+                    path: jest.fn((): string => filePath),
+                }),
+            ),
+        };
+    }),
+    fs: {
+        dirs: {
+            DocumentDir: '/mock/documents',
+        },
+    },
+    fetch: jest.fn(() =>
+        Promise.resolve({
+            path: jest.fn((): string => '/mock/documents/file'),
+        }),
+    ),
+}));
+
 const originalXHR = HttpUtils.xhr;
 OnyxUpdateManager();
 
@@ -1592,7 +1622,12 @@ describe('actions/Report', () => {
     });
 
     it('should send not DeleteComment request and remove AddAttachment accordingly', async () => {
-        global.fetch = TestHelper.getGlobalFetchMock();
+        global.fetch = TestHelper.getGlobalFetchMock({
+            headers: new Headers({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'image/jpeg',
+            }),
+        });
 
         const TEST_USER_ACCOUNT_ID = 1;
         const REPORT_ID = '1';
@@ -1662,7 +1697,12 @@ describe('actions/Report', () => {
     });
 
     it('should send not DeleteComment request and remove AddTextAndAttachment accordingly', async () => {
-        global.fetch = TestHelper.getGlobalFetchMock();
+        global.fetch = TestHelper.getGlobalFetchMock({
+            headers: new Headers({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'image/jpeg',
+            }),
+        });
 
         const TEST_USER_ACCOUNT_ID = 1;
         const REPORT_ID = '1';
@@ -1732,7 +1772,12 @@ describe('actions/Report', () => {
     });
 
     it('should post text + attachment as first action then attachment only for remaining attachments when adding multiple attachments with a comment', async () => {
-        global.fetch = TestHelper.getGlobalFetchMock();
+        global.fetch = TestHelper.getGlobalFetchMock({
+            headers: new Headers({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'image/jpeg',
+            }),
+        });
         const playSoundMock = playSound as jest.MockedFunction<typeof playSound>;
         await Onyx.set(ONYXKEYS.NETWORK, {isOffline: true});
         await waitForBatchedUpdates();
@@ -1776,7 +1821,12 @@ describe('actions/Report', () => {
     });
 
     it('should create attachment only actions when adding multiple attachments without a comment', async () => {
-        global.fetch = TestHelper.getGlobalFetchMock();
+        global.fetch = TestHelper.getGlobalFetchMock({
+            headers: new Headers({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'image/jpeg',
+            }),
+        });
         const playSoundMock = playSound as jest.MockedFunction<typeof playSound>;
         await Onyx.set(ONYXKEYS.NETWORK, {isOffline: true});
         await waitForBatchedUpdates();
@@ -1819,7 +1869,12 @@ describe('actions/Report', () => {
     });
 
     it('should create attachment only action & not play sound when adding attachment without a comment & shouldPlaySound not passed', async () => {
-        global.fetch = TestHelper.getGlobalFetchMock();
+        global.fetch = TestHelper.getGlobalFetchMock({
+            headers: new Headers({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'Content-Type': 'image/jpeg',
+            }),
+        });
         const playSoundMock = playSound as jest.MockedFunction<typeof playSound>;
         await Onyx.set(ONYXKEYS.NETWORK, {isOffline: true});
         await waitForBatchedUpdates();
diff --git a/tests/utils/TestHelper.ts b/tests/utils/TestHelper.ts
index adaf1b17e52cf..5fc0e9dc4d47d 100644
--- a/tests/utils/TestHelper.ts
+++ b/tests/utils/TestHelper.ts
@@ -276,7 +276,7 @@ function signOutTestUser() {
  * - fail() - start returning a failure response
  * - success() - go back to returning a success response
  */
-function getGlobalFetchMock(): typeof fetch {
+function getGlobalFetchMock(mockResponse?: Partial<Response>): typeof fetch {
     let queue: QueueItem[] = [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let responses = new Map<string, (params: any) => OnyxResponse<any>>();
@@ -303,6 +303,7 @@ function getGlobalFetchMock(): typeof fetch {
 
                       return Promise.resolve({jsonCode: 200});
                   },
+                  ...mockResponse,
               };
 
     const mockFetch = jest.fn().mockImplementation((input: RequestInfo, options?: RequestInit) => {