diff --git a/apps/rowboat/app/projects/[projectId]/copilot/components/actions.tsx b/apps/rowboat/app/projects/[projectId]/copilot/components/actions.tsx
index e67ca589..94f8126f 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/components/actions.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/components/actions.tsx
@@ -8,6 +8,7 @@ import { PreviewModalProvider, usePreviewModal } from '../../workflow/preview-mo
 import { getAppliedChangeKey } from "../app";
 import { AlertTriangleIcon, CheckCheckIcon, CheckIcon, ChevronsDownIcon, ChevronsUpIcon, EyeIcon, PencilIcon, PlusIcon } from "lucide-react";
 import { Spinner } from "@heroui/react";
+import { PictureImg } from "@/components/ui/picture-img";
 
 const ActionContext = createContext<{
     msgIndex: number;
@@ -158,6 +159,33 @@ export function Action({
         );
     }
 
+    // Determine composio toolkit logo for tools
+    const toolkitLogo = (() => {
+        if (action.config_type !== 'tool') return undefined;
+        const getLogo = (o: any): string | undefined => {
+            return (
+                o?.composioData?.logo ||
+                o?.composioData?.logoUrl ||
+                o?.composio?.logo ||
+                o?.toolkit?.logo ||
+                o?.composio_tool?.toolkit?.logo ||
+                o?.logo ||
+                undefined
+            );
+        };
+        // Try various shapes the action might use
+        const a: any = action as any;
+        return (
+            getLogo(a.config_changes) ||
+            getLogo(a) ||
+            getLogo(a.config_changes?.tool) ||
+            getLogo(a.config_changes?.composio_tool) ||
+            getLogo(a.tool) ||
+            (workflow.tools.find(t => t.name === action.name) as any)?.composioData?.logo ||
+            undefined
+        );
+    })();
+
     return <div className={clsx(
         'flex flex-col rounded-md border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-xs',
         'transition-shadow duration-150',
@@ -170,9 +198,9 @@ export function Action({
     )}>
         <ActionContext.Provider value={{ msgIndex, actionIndex, action, workflow, appliedFields, stale }}>
             <div className="flex items-center gap-2 px-2 py-1 border-b border-zinc-100 dark:border-zinc-800">
-                {/* Small colored icon for type */}
+                {/* Small colored icon for type; show composio toolkit logo for tools when available */}
                 <span className={clsx(
-                    'inline-flex items-center justify-center rounded-full h-5 w-5 text-xs',
+                    'inline-flex items-center justify-center rounded-full h-5 w-5 text-xs overflow-hidden',
                     {
                         'bg-blue-100 text-blue-600': action.action == 'create_new',
                         'bg-yellow-100 text-yellow-600': action.action == 'edit',
@@ -180,7 +208,11 @@ export function Action({
                         'bg-gray-200 text-gray-600': stale || allApplied || action.error,
                     }
                 )}>
-                    {action.config_type === 'agent' ? '🧑‍💼' : action.config_type === 'tool' ? '🛠️' : action.config_type === 'pipeline' ? '⚙️' : action.config_type === 'start_agent' ? '🏁' : action.config_type === 'prompt' ? '💬' : '💬'}
+                    {action.config_type === 'tool' && toolkitLogo ? (
+                        <PictureImg src={toolkitLogo} alt={"Toolkit logo"} className="h-5 w-5 object-contain" />
+                    ) : (
+                        action.config_type === 'agent' ? '🧑‍💼' : action.config_type === 'tool' ? '🛠️' : action.config_type === 'pipeline' ? '⚙️' : action.config_type === 'start_agent' ? '🏁' : action.config_type === 'prompt' ? '💬' : '💬'
+                    )}
                 </span>
                 <span className="font-semibold text-sm text-zinc-800 dark:text-zinc-100 truncate flex-1">
                     {action.action === 'create_new' ? 'Add' : action.action === 'edit' ? 'Edit' : 'Delete'} {action.config_type}: {action.name}