diff --git a/web/src/app/chat/components/message-list-view.tsx b/web/src/app/chat/components/message-list-view.tsx
index 1a25e35..6ccb5f8 100644
--- a/web/src/app/chat/components/message-list-view.tsx
+++ b/web/src/app/chat/components/message-list-view.tsx
@@ -9,6 +9,7 @@ import {
   ChevronDown,
   ChevronRight,
   Lightbulb,
+  Wrench,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import React, { useCallback, useMemo, useRef, useState } from "react";
@@ -440,7 +441,7 @@ function PlanCard({
   const plan = useMemo<{
     title?: string;
     thought?: string;
-    steps?: { title?: string; description?: string }[];
+    steps?: { title?: string; description?: string; tools?: string[] }[];
   }>(() => {
     return parseJSON(message.content ?? "", {});
   }, [message.content]);
@@ -648,3 +649,18 @@ function PodcastCard({
     </Card>
   );
 }
+
+function ToolsDisplay({ tools }: { tools: string[] }) {
+  return (
+    <div className="mt-2 flex flex-wrap gap-1">
+      {tools.map((tool, index) => (
+        <span
+          key={index}
+          className="rounded-md bg-muted px-2 py-1 text-xs font-mono text-muted-foreground"
+        >
+          {tool}
+        </span>
+      ))}
+    </div>
+  );
+}