diff --git a/application/agents/classic_agent.py b/application/agents/classic_agent.py
index b96a77fc..b371123b 100644
--- a/application/agents/classic_agent.py
+++ b/application/agents/classic_agent.py
@@ -57,4 +57,8 @@ class ClassicAgent(BaseAgent):
         )
 
         yield {"sources": retrieved_data}
+        # clean tool_call_data only send first 50 characters of tool_call['result']
+        for tool_call in self.tool_calls:
+            if len(str(tool_call["result"])) > 50:
+                tool_call["result"] = str(tool_call["result"])[:50] + "..."
         yield {"tool_calls": self.tool_calls.copy()}
diff --git a/application/agents/react_agent.py b/application/agents/react_agent.py
index a5d47850..5fce00b3 100644
--- a/application/agents/react_agent.py
+++ b/application/agents/react_agent.py
@@ -87,6 +87,10 @@ class ReActAgent(BaseAgent):
         )
 
         yield {"sources": retrieved_data}
+        # clean tool_call_data only send first 50 characters of tool_call['result']
+        for tool_call in self.tool_calls:
+            if len(str(tool_call["result"])) > 50:
+                tool_call["result"] = str(tool_call["result"])[:50] + "..."
         yield {"tool_calls": self.tool_calls.copy()}
 
         final_answer = self._create_final_answer(query, self.observations, log_context)
diff --git a/frontend/src/agents/index.tsx b/frontend/src/agents/index.tsx
index d0052111..4634dc76 100644
--- a/frontend/src/agents/index.tsx
+++ b/frontend/src/agents/index.tsx
@@ -127,7 +127,7 @@ function AgentsList() {
             New Agent
           </button>
         </div>
-        <div className="flex w-full flex-wrap gap-4">
+        <div className="grid w-full grid-cols-2 gap-2 md:flex md:flex-wrap md:gap-4">
           {loading ? (
             <div className="flex h-72 w-full items-center justify-center">
               <Spinner />
@@ -231,7 +231,7 @@ function AgentCard({
   };
   return (
     <div
-      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
+      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 md:w-48 ${agent.status === 'published' && 'cursor-pointer'}`}
       onClick={(e) => {
         e.stopPropagation();
         handleClick();