diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
index 3056e765938b2f7b72652baf2a4563e477f835fe..5c0744f12f39b370e8aff39e4893a1240474d564 100644
--- a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
@@ -1,12 +1,10 @@
-import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash } from "@phosphor-icons/react";
 import System from "@/models/system";
 import ModalWrapper from "@/components/ModalWrapper";
 import { useModal } from "@/hooks/useModal";
 
-export default function ChatRow({ chat }) {
-  const rowRef = useRef(null);
+export default function ChatRow({ chat, onDelete }) {
   const {
     isOpen: isPromptOpen,
     openModal: openPromptModal,
@@ -25,16 +23,13 @@ export default function ChatRow({ chat }) {
       )
     )
       return false;
-    rowRef?.current?.remove();
     await System.deleteChat(chat.id);
+    onDelete(chat.id);
   };
 
   return (
     <>
-      <tr
-        ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
-      >
+      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
         <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
           {chat.id}
         </td>
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index f0ae8e97356031506093f24ff619b04cd2f0c0e5..336aadccea3a304494d8097eeef15b94b2489950 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -142,6 +142,10 @@ function ChatsContainer() {
     setOffset(offset + 1);
   };
 
+  const handleDeleteChat = (chatId) => {
+    setChats((prevChats) => prevChats.filter((chat) => chat.id !== chatId));
+  };
+
   useEffect(() => {
     async function fetchChats() {
       const { chats: _chats, hasPages = false } = await System.chats(offset);
@@ -196,7 +200,9 @@ function ChatsContainer() {
         </thead>
         <tbody>
           {!!chats &&
-            chats.map((chat) => <ChatRow key={chat.id} chat={chat} />)}
+            chats.map((chat) => (
+              <ChatRow key={chat.id} chat={chat} onDelete={handleDeleteChat} />
+            ))}
         </tbody>
       </table>
       <div className="flex w-full justify-between items-center">
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
index cc0bc2a83a9c04eb014b3ce12cf39e9975a3e673..a9c125cf4fa0667e5d9eee19f4cad6f3c3ef2c4b 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash, LinkSimple } from "@phosphor-icons/react";
 import ModalWrapper from "@/components/ModalWrapper";
@@ -6,8 +5,7 @@ import { useModal } from "@/hooks/useModal";
 import paths from "@/utils/paths";
 import Embed from "@/models/embed";
 
-export default function ChatRow({ chat }) {
-  const rowRef = useRef(null);
+export default function ChatRow({ chat, onDelete }) {
   const {
     isOpen: isPromptOpen,
     openModal: openPromptModal,
@@ -26,16 +24,13 @@ export default function ChatRow({ chat }) {
       )
     )
       return false;
-    rowRef?.current?.remove();
     await Embed.deleteChat(chat.id);
+    onDelete(chat.id);
   };
 
   return (
     <>
-      <tr
-        ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
-      >
+      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
         <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
           <a
             href={paths.settings.embedSetup()}
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index fdda8d4a266e1132097020406579506e37498b48..6b84b3fde48e7c0add32ffc3d295581adf81d48e 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -48,6 +48,10 @@ function ChatsContainer() {
     setOffset(offset + 1);
   };
 
+  const handleDeleteChat = (chatId) => {
+    setChats((prevChats) => prevChats.filter((chat) => chat.id !== chatId));
+  };
+
   useEffect(() => {
     async function fetchChats() {
       const { chats: _chats, hasPages = false } = await Embed.chats(offset);
@@ -99,7 +103,9 @@ function ChatsContainer() {
         </thead>
         <tbody>
           {!!chats &&
-            chats.map((chat) => <ChatRow key={chat.id} chat={chat} />)}
+            chats.map((chat) => (
+              <ChatRow key={chat.id} chat={chat} onDelete={handleDeleteChat} />
+            ))}
         </tbody>
       </table>
       <div className="flex w-full justify-between items-center">
diff --git a/server/endpoints/system.js b/server/endpoints/system.js
index 4eb82fb0ac1345128637c93dc63714c997c52027..100d0a4b68fd8fe79369857054d1d9b576da7bed 100644
--- a/server/endpoints/system.js
+++ b/server/endpoints/system.js
@@ -774,7 +774,7 @@ function systemEndpoints(app) {
       try {
         const { id } = request.params;
         await WorkspaceChats.delete({ id: Number(id) });
-        response.sendStatus(200).end();
+        response.json({ success: true, error: null });
       } catch (e) {
         console.error(e);
         response.sendStatus(500).end();