diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 631fee811..56bbf4fe7 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -2,7 +2,7 @@ import { Bars2Icon, CommandLineIcon, CpuChipIcon, LightBulbIcon, LinkIcon, Rocke
 import { llm_chain } from "../../../../data_assets/llm_chain";
 import { prompt } from "../../../../data_assets/prompt";
 import DisclosureComponent from "../DisclosureComponent";
-import { borderLColors, nodeColors } from "../../../../utils";
+import { borderLColors, nodeColors, nodeIcons } from "../../../../utils";
 
 export function ExtraSidebar() {
   function onDragStart(event: React.DragEvent<any>, nodeType) {
@@ -33,7 +33,7 @@ export function ExtraSidebar() {
   return (
     <div className="mt-4">
       <DisclosureComponent
-        button={{ title: "Prompts", Icon: CommandLineIcon }}
+        button={{ title: "Prompts", Icon: nodeIcons['prompt'] }}
       >
         <div className="p-2">
           <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['prompt']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
@@ -49,7 +49,7 @@ export function ExtraSidebar() {
         </div>
       </DisclosureComponent>
       <DisclosureComponent
-        button={{ title: "Models", Icon: LightBulbIcon }}
+        button={{ title: "Models", Icon: nodeIcons['model'] }}
       >
         <div className="p-2">
           <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['model']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
@@ -66,7 +66,7 @@ export function ExtraSidebar() {
       </DisclosureComponent>
       
       <DisclosureComponent
-        button={{ title: "Agents", Icon: RocketLaunchIcon }}
+        button={{ title: "Agents", Icon: nodeIcons['agent'] }}
       >
         <div className="p-2">
           <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['agent']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
@@ -82,23 +82,23 @@ export function ExtraSidebar() {
         </div>
       </DisclosureComponent>
       <DisclosureComponent
-        button={{ title: "Tools", Icon: WrenchScrewdriverIcon }}
+        button={{ title: "Tools", Icon: nodeIcons['tool'] }}
       >
         <div className="p-2">
-          <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['validator']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
+          <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['tool']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
           <div
             
             className="flex justify-between text-sm p-4 items-center h-12 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2"
             
           >
-            <span className="text-black">Validator</span>
+            <span className="text-black">Tool</span>
             <Bars2Icon className="w-6 text-gray-400" />
           </div>
           </div>
         </div>
       </DisclosureComponent>
       <DisclosureComponent
-        button={{ title: "Memories", Icon: CpuChipIcon }}
+        button={{ title: "Memories", Icon: nodeIcons['memory'] }}
       >
         <div className="p-2">
           <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['memory']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
@@ -114,7 +114,7 @@ export function ExtraSidebar() {
         </div>
       </DisclosureComponent>
       <DisclosureComponent
-        button={{ title: "Chains", Icon: LinkIcon }}
+        button={{ title: "Chains", Icon: nodeIcons['chain'] }}
       >
         <div className="p-2">
           <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['chain']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts
index bebc01432..a56486b8f 100644
--- a/space_flow/src/utils.ts
+++ b/space_flow/src/utils.ts
@@ -1,4 +1,4 @@
-import { RocketLaunchIcon, LinkIcon, CpuChipIcon, LightBulbIcon, CommandLineIcon, ShieldCheckIcon } from "@heroicons/react/24/outline";
+import { RocketLaunchIcon, LinkIcon, CpuChipIcon, LightBulbIcon, CommandLineIcon, ShieldCheckIcon, WrenchScrewdriverIcon } from "@heroicons/react/24/outline";
 
 export function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
@@ -55,7 +55,7 @@ export function classNames(...classes) {
     model: "#4266BE",
     chain: "#6344BE",
     agent: "#903BBE",
-    validator: "#DB3392",
+    tool: "#DB3392",
     memory: "#FF3434",
   } */
 
@@ -64,7 +64,7 @@ export function classNames(...classes) {
     model: "#4266BE",
     chain: "#903BBE",
     agent: "#FF3434",
-    validator: "#FEBB35",
+    tool: "#FEBB35",
     memory: "#FFFF33",
   } */
 
@@ -73,7 +73,7 @@ export function classNames(...classes) {
     model: "#35ADAE",
     chain: "#903BBE",
     agent: "#DB3392",
-    validator: "#FF9135",
+    tool: "#FF9135",
     memory: "#FFDC35",
   } */
 
@@ -82,7 +82,7 @@ export function classNames(...classes) {
     model: "#35ADAE",
     chain: "#903BBE",
     agent: "#DB3392",
-    validator: "#FF3434",
+    tool: "#FF3434",
     memory: "#FF9135",
   } */
 
@@ -91,7 +91,7 @@ export function classNames(...classes) {
     model: "#35ADAE",
     chain: "#FFDC35",
     agent: "#903BBE",
-    validator: "#FF3434",
+    tool: "#FF3434",
     memory: "#FF9135",
   }
 
@@ -102,7 +102,7 @@ export function classNames(...classes) {
     memory: CpuChipIcon,
     model: LightBulbIcon,
     prompt: CommandLineIcon,
-    validator: ShieldCheckIcon,
+    tool: WrenchScrewdriverIcon,
   }
   
   export const bgColors = {