diff --git a/apps/chat/components/accounts/profile/index.tsx b/apps/chat/components/accounts/profile/index.tsx
index c5608e670..206e23305 100644
--- a/apps/chat/components/accounts/profile/index.tsx
+++ b/apps/chat/components/accounts/profile/index.tsx
@@ -9,7 +9,7 @@ interface AgentImage {
 }
 
 interface Agent {
-  id: string;
+  id: number;
   name: string;
   images: AgentImage[];
 }
@@ -31,6 +31,10 @@ export function AccountProfile({ account }: AccountProps) {
   const agentUrl = `${origin}/accounts/${account.id}`;
   const randomAgentImage = account.agents[Math.floor(Math.random() * account.agents.length)]?.images[0].url;
 
+  const onDelete = (agentId: number) => {
+    account.agents = account.agents.filter((agent) => agent.id !== agentId);
+  };
+
   return (
     <div className="w-full mx-auto">
       <HeaderMaskFrame background={randomAgentImage} wrapperClass="bg-blue-500" backgroundOpacity={0.2}>
@@ -63,7 +67,7 @@ export function AccountProfile({ account }: AccountProps) {
       <div className="w-full max-w-6xl mx-auto relative px-4 mt-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 py-8">
           {account.agents.map((agent) => (
-            <AgentRow key={agent.id} agent={agent} author={account.name} user={null} />
+            <AgentRow key={agent.id} agent={agent} author={account.name} user={null} onDelete={onDelete}/>
           ))}
         </div>
       </div>
diff --git a/apps/chat/components/agents/list/AgentList.tsx b/apps/chat/components/agents/list/AgentList.tsx
index f3d3dc92a..caccffddd 100644
--- a/apps/chat/components/agents/list/AgentList.tsx
+++ b/apps/chat/components/agents/list/AgentList.tsx
@@ -7,9 +7,10 @@ export interface AgentListProps {
   loading: boolean
   range: number
   user: any
+  onAgentDelete: (agentId: number) => void
 }
 
-export function AgentList({ agents, loading, range, user }: AgentListProps) {
+export function AgentList({ agents, loading, range, user, onAgentDelete }: AgentListProps) {
 
   if (loading) return (
     <>
@@ -20,5 +21,5 @@ export function AgentList({ agents, loading, range, user }: AgentListProps) {
   );
 
   if (!agents.length) return 'No agents found.';
-  return agents.map((agent: any, index: number) => <AgentRow user={user} agent={agent} key={index} author={agent?.author?.name} />);
+  return agents.map((agent: any, index: number) => <AgentRow user={user} agent={agent} key={index} author={agent?.author?.name} onDelete={onAgentDelete}/>);
 }
diff --git a/apps/chat/components/agents/list/AgentRow.tsx b/apps/chat/components/agents/list/AgentRow.tsx
index af3a54b06..e959e7fe0 100644
--- a/apps/chat/components/agents/list/AgentRow.tsx
+++ b/apps/chat/components/agents/list/AgentRow.tsx
@@ -12,9 +12,10 @@ export interface AgentListProps {
   agent: any
   user: any
   author: string
+  onDelete: (agentId: number) => void;
 }
 
-export function AgentRow({ agent, user, author }: AgentListProps) {
+export function AgentRow({ agent, user, author, onDelete }: AgentListProps) {
   const [open, setOpen] = useState(false);
 
   const updateOpenState = () => {
@@ -43,6 +44,7 @@ export function AgentRow({ agent, user, author }: AgentListProps) {
   const handleDelete = async () => {
     updateOpenState();
     await deleteAgent();
+    onDelete(agent.id);
   };
 
   const handleDeleteClick = () => {
diff --git a/apps/chat/components/agents/list/index.tsx b/apps/chat/components/agents/list/index.tsx
index 065eec97d..25e34d526 100644
--- a/apps/chat/components/agents/list/index.tsx
+++ b/apps/chat/components/agents/list/index.tsx
@@ -105,6 +105,10 @@ export function Agents({ loadmore = false, search = true, range = 5, row = false
     fetchData(false, newRangeFrom, newRangeTo);
   };
 
+  const handleAgentDelete = (deletedAgentId: number) => {
+    setAgents(agents => agents.filter(agent => agent.id !== deletedAgentId));
+  };
+
   return (
     <>
       {search && (
@@ -127,7 +131,7 @@ export function Agents({ loadmore = false, search = true, range = 5, row = false
       )}
 
       <div className={`grid ${row ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'} gap-4`}>
-        <AgentList agents={agents} loading={loading} range={range} user={null} />
+        <AgentList agents={agents} loading={loading} range={range} user={null} onAgentDelete={handleAgentDelete}/>
       </div>
       {loadmore && (
         <div className='text-center pt-8'>
@@ -150,10 +154,14 @@ export function UserAgents({ agents = [], user, range = 5, row = false }: UserAg
   const [loading, setLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
 
+  const handleUserAgentDelete = (deletedAgentId: number) => {
+    setUserAgents(userAgents => userAgents.filter(agent => agent.id !== deletedAgentId));
+  };
+
   return (
     <>
       <div className={`grid ${row ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'} gap-4`}>
-        <AgentList agents={userAgents} loading={loading} range={range} user={user} />
+        <AgentList agents={userAgents} loading={loading} range={range} user={user} onAgentDelete={handleUserAgentDelete} />
       </div>
     </>
   );