diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 3635f5f44..ebb5d1247 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -1124,5 +1124,8 @@ export async function deleteMessagesFn(ids: string[]) {
 }
 
 export async function updateMessageApi(data: Message) {
-  return await api.post(`${BASE_URL_API}monitor/messages/${data.id}`, data);
+  if (data.files && typeof data.files === "string") {
+    data.files = JSON.parse(data.files);
+  }
+  return await api.put(`${BASE_URL_API}monitor/messages/${data.id}`, data);
 }
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
index c3172f152..3be8122de 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
@@ -4,6 +4,7 @@ import {
   ColGroupDef,
   SelectionChangedEvent,
 } from "ag-grid-community";
+import { cloneDeep } from "lodash";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
 import useAlertStore from "../../../../stores/alertStore";
@@ -37,7 +38,7 @@ export default function MessagesPage() {
   function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
     const newValue = event.newValue;
     const field = event.column.getColId();
-    const row = event.data;
+    const row = cloneDeep(event.data);
     const data = {
       ...row,
       [field]: newValue,
diff --git a/src/frontend/src/types/messages/index.ts b/src/frontend/src/types/messages/index.ts
index 4cb98a51d..9b19e1489 100644
--- a/src/frontend/src/types/messages/index.ts
+++ b/src/frontend/src/types/messages/index.ts
@@ -6,6 +6,7 @@ type Message = {
   sender_name: string;
   session_id: string;
   timestamp: string;
+  files: Array<string>;
   id: string;
 };