diff --git a/frontend/src/components/tools/automate/AutomationEntry.tsx b/frontend/src/components/tools/automate/AutomationEntry.tsx
index 23db33ea6..1a0d2b5bb 100644
--- a/frontend/src/components/tools/automate/AutomationEntry.tsx
+++ b/frontend/src/components/tools/automate/AutomationEntry.tsx
@@ -113,11 +113,11 @@ export default function AutomationEntry({
     if (title) {
       // Custom automation with title
       return (
-        <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
+        <Group gap="xs" align="center" justify="flex-start" style={{ width: '100%' }}>
           {BadgeIcon && (
             <ToolIcon
               icon={<BadgeIcon />}
-              color={keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'}
+              {...(keepIconColor && { color: 'var(--mantine-primary-color-filled)' })}
             />
           )}
           <Text size="xs" style={{ flex: 1, textAlign: 'left', color: 'var(--mantine-color-text)' }}>
@@ -128,11 +128,11 @@ export default function AutomationEntry({
     } else {
       // Suggested automation showing tool chain
       return (
-        <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
+        <Group gap="xs" align="center" justify="flex-start" style={{ width: '100%' }}>
           {BadgeIcon && (
             <ToolIcon
               icon={<BadgeIcon />}
-              color={keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'}
+              {...(keepIconColor && { color: 'var(--mantine-primary-color-filled)' })}
             />
           )}
           <Group gap="xs" justify="flex-start" style={{ flex: 1 }}>
diff --git a/frontend/src/components/tools/toolPicker/ToolButton.tsx b/frontend/src/components/tools/toolPicker/ToolButton.tsx
index 40cee33a7..467ce6738 100644
--- a/frontend/src/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "../../shared/Tooltip";
+import { ToolIcon } from "../../shared/ToolIcon";
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { useToolNavigation } from "../../../hooks/useToolNavigation";
 import { handleUnlessSpecialClick } from "../../../utils/clickHandlers";
@@ -57,7 +58,10 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
 
   const buttonContent = (
     <>
-      <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
+      <ToolIcon
+        icon={tool.icon}
+        opacity={isUnavailable ? 0.25 : 1}
+      />
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
         <FitText
           text={tool.name}
@@ -67,9 +71,9 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
           style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
         />
         {matchedSynonym && (
-          <span style={{ 
-            fontSize: '0.75rem', 
-            color: 'var(--mantine-color-dimmed)', 
+          <span style={{
+            fontSize: '0.75rem',
+            color: 'var(--mantine-color-dimmed)',
             opacity: isUnavailable ? 0.25 : 1,
             marginTop: '1px',
             overflow: 'visible',