diff --git a/src/components/thread/messages/tool-calls.tsx b/src/components/thread/messages/tool-calls.tsx
index 5eb78d36..b9bd2d97 100644
--- a/src/components/thread/messages/tool-calls.tsx
+++ b/src/components/thread/messages/tool-calls.tsx
@@ -15,7 +15,7 @@ export function ToolCalls({
   if (!toolCalls || toolCalls.length === 0) return null;
 
   return (
-    <div className="w-full max-w-4xl space-y-4">
+    <div className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2">
       {toolCalls.map((tc, idx) => {
         const args = tc.args as Record<string, any>;
         const hasArgs = Object.keys(args).length > 0;
@@ -94,96 +94,98 @@ export function ToolResult({ message }: { message: ToolMessage }) {
       : contentStr;
 
   return (
-    <div className="overflow-hidden rounded-lg border border-gray-200">
-      <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          {message.name ? (
-            <h3 className="font-medium text-gray-900">
-              Tool Result:{" "}
-              <code className="rounded bg-gray-100 px-2 py-1">
-                {message.name}
+    <div className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2">
+      <div className="overflow-hidden rounded-lg border border-gray-200">
+        <div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            {message.name ? (
+              <h3 className="font-medium text-gray-900">
+                Tool Result:{" "}
+                <code className="rounded bg-gray-100 px-2 py-1">
+                  {message.name}
+                </code>
+              </h3>
+            ) : (
+              <h3 className="font-medium text-gray-900">Tool Result</h3>
+            )}
+            {message.tool_call_id && (
+              <code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
+                {message.tool_call_id}
               </code>
-            </h3>
-          ) : (
-            <h3 className="font-medium text-gray-900">Tool Result</h3>
-          )}
-          {message.tool_call_id && (
-            <code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
-              {message.tool_call_id}
-            </code>
-          )}
+            )}
+          </div>
         </div>
-      </div>
-      <motion.div
-        className="min-w-full bg-gray-100"
-        initial={false}
-        animate={{ height: "auto" }}
-        transition={{ duration: 0.3 }}
-      >
-        <div className="p-3">
-          <AnimatePresence
-            mode="wait"
-            initial={false}
-          >
-            <motion.div
-              key={isExpanded ? "expanded" : "collapsed"}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-              transition={{ duration: 0.2 }}
+        <motion.div
+          className="min-w-full bg-gray-100"
+          initial={false}
+          animate={{ height: "auto" }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="p-3">
+            <AnimatePresence
+              mode="wait"
+              initial={false}
             >
-              {isJsonContent ? (
-                <table className="min-w-full divide-y divide-gray-200">
-                  <tbody className="divide-y divide-gray-200">
-                    {(Array.isArray(parsedContent)
-                      ? isExpanded
-                        ? parsedContent
-                        : parsedContent.slice(0, 5)
-                      : Object.entries(parsedContent)
-                    ).map((item, argIdx) => {
-                      const [key, value] = Array.isArray(parsedContent)
-                        ? [argIdx, item]
-                        : [item[0], item[1]];
-                      return (
-                        <tr key={argIdx}>
-                          <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
-                            {key}
-                          </td>
-                          <td className="px-4 py-2 text-sm text-gray-500">
-                            {isComplexValue(value) ? (
-                              <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
-                                {JSON.stringify(value, null, 2)}
-                              </code>
-                            ) : (
-                              String(value)
-                            )}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              ) : (
-                <code className="block text-sm">{displayedContent}</code>
-              )}
-            </motion.div>
-          </AnimatePresence>
-        </div>
-        {((shouldTruncate && !isJsonContent) ||
-          (isJsonContent &&
-            Array.isArray(parsedContent) &&
-            parsedContent.length > 5)) && (
-          <motion.button
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
-            initial={{ scale: 1 }}
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            {isExpanded ? <ChevronUp /> : <ChevronDown />}
-          </motion.button>
-        )}
-      </motion.div>
+              <motion.div
+                key={isExpanded ? "expanded" : "collapsed"}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.2 }}
+              >
+                {isJsonContent ? (
+                  <table className="min-w-full divide-y divide-gray-200">
+                    <tbody className="divide-y divide-gray-200">
+                      {(Array.isArray(parsedContent)
+                        ? isExpanded
+                          ? parsedContent
+                          : parsedContent.slice(0, 5)
+                        : Object.entries(parsedContent)
+                      ).map((item, argIdx) => {
+                        const [key, value] = Array.isArray(parsedContent)
+                          ? [argIdx, item]
+                          : [item[0], item[1]];
+                        return (
+                          <tr key={argIdx}>
+                            <td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
+                              {key}
+                            </td>
+                            <td className="px-4 py-2 text-sm text-gray-500">
+                              {isComplexValue(value) ? (
+                                <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
+                                  {JSON.stringify(value, null, 2)}
+                                </code>
+                              ) : (
+                                String(value)
+                              )}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                ) : (
+                  <code className="block text-sm">{displayedContent}</code>
+                )}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+          {((shouldTruncate && !isJsonContent) ||
+            (isJsonContent &&
+              Array.isArray(parsedContent) &&
+              parsedContent.length > 5)) && (
+            <motion.button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
+              initial={{ scale: 1 }}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              {isExpanded ? <ChevronUp /> : <ChevronDown />}
+            </motion.button>
+          )}
+        </motion.div>
+      </div>
     </div>
   );
 }