diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index ad505e23e..99a869b53 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -1,13 +1,9 @@
-import {
-  XCircleIcon,
-  XMarkIcon,
-  InformationCircleIcon,
-  CheckCircleIcon,
-} from "@heroicons/react/24/outline";
+
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
 import { SingleAlertComponentType } from "../../../../types/alerts";
+import { X, CheckCircle2, Info, XCircle } from "lucide-react";
 
 export default function SingleAlert({
   dropItem,
@@ -34,10 +30,11 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <XCircleIcon
-              className="h-5 w-5 text-red-400 dark:text-red-50"
-              aria-hidden="true"
-            />
+          <XCircle 
+                        className="h-5 w-5 text-red-400 dark:text-red-50"
+                        aria-hidden="true"
+          />
+
           </div>
           <div className="ml-3">
             <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
@@ -70,7 +67,7 @@ export default function SingleAlert({
                 className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
               >
                 <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                <X className="h-5 w-5" aria-hidden="true" />
               </button>
             </div>
           </div>
@@ -81,10 +78,11 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <InformationCircleIcon
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
-              aria-hidden="true"
-            />
+          <Info
+                        className="h-5 w-5 text-blue-400 dark:text-blue-50"
+                        aria-hidden="true"
+          />
+
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-blue-700 dark:text-white/80">
@@ -116,7 +114,7 @@ export default function SingleAlert({
                 className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
               >
                 <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                <X className="h-5 w-5" aria-hidden="true" />
               </button>
             </div>
           </div>
@@ -127,10 +125,11 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <CheckCircleIcon
-              className="h-5 w-5 text-green-400 dark:text-green-50"
-              aria-hidden="true"
-            />
+          <CheckCircle2
+                        className="h-5 w-5 text-green-400 dark:text-green-50"
+                        aria-hidden="true"
+          />
+
           </div>
           <div className="ml-3">
             <p className="text-sm font-medium text-green-800 dark:bg-white/80">
@@ -150,7 +149,7 @@ export default function SingleAlert({
                 className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
               >
                 <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                <X className="h-5 w-5" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index edd3bb23f..cb35b80cc 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -1,11 +1,11 @@
 import { useContext, useEffect, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { XMarkIcon } from "@heroicons/react/24/solid";
-import { TrashIcon } from "@heroicons/react/24/outline";
 import SingleAlert from "./components/singleAlertComponent";
 import { AlertDropdownType } from "../../types/alerts";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { useOnClickOutside } from "../hooks/useOnClickOutside";
+import { X, Trash2  } from "lucide-react";
+
 export default function AlertDropdown({}: AlertDropdownType) {
   const { closePopUp } = useContext(PopUpContext);
   const componentRef = useRef<HTMLDivElement>(null);
@@ -36,13 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
+            <Trash2 className="w-[1.1rem] h-[1.1rem]"/>
           </button>
           <button
             className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
             onClick={closePopUp}
           >
-            <XMarkIcon className="h-5 w-5" />
+            <X className="h-5 w-5" />
           </button>
         </div>
       </div>
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index bcabe764f..56ae7634e 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
+import { XCircle } from "lucide-react";
 
 export default function ErrorAlert({
   title,
@@ -43,10 +43,11 @@ export default function ErrorAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircleIcon
-              className="h-5 w-5 text-red-400 dark:text-red-50"
-              aria-hidden="true"
-            />
+          <XCircle
+                        className="h-5 w-5 text-red-400 dark:text-red-50"
+                        aria-hidden="true"
+          />
+
           </div>
           <div className="ml-3">
             <h3 className="text-sm font-medium text-red-800 dark:text-white/80">
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 81dce8ca0..47e26f51d 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
-import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
+import { Info } from "lucide-react";
 
 export default function NoticeAlert({
   title,
@@ -40,10 +40,11 @@ export default function NoticeAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <InformationCircleIcon
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
-              aria-hidden="true"
-            />
+          <Info 
+                        className="h-5 w-5 text-blue-400 dark:text-blue-50"
+                        aria-hidden="true"
+          />
+
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index d915adfcd..899f70f68 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -1,7 +1,8 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
+import { CheckCircle2 } from "lucide-react";
+
 
 export default function SuccessAlert({
   title,
@@ -38,10 +39,12 @@ export default function SuccessAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <CheckCircleIcon
-              className="h-5 w-5 text-green-400 dark:text-green-50"
-              aria-hidden="true"
-            />
+          <CheckCircle2
+          
+          className="h-5 w-5 text-green-400 dark:text-green-50"
+          aria-hidden="true"
+          />
+
           </div>
           <div className="ml-3">
             <p className="text-sm font-medium text-green-800 dark:text-white/80">
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index e03db68c8..b6fbf94b2 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -1,5 +1,4 @@
 import { Disclosure } from "@headlessui/react";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
 import { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 8ca2e56e3..ca67908c0 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -1,13 +1,10 @@
-import {
-  ChatBubbleLeftEllipsisIcon,
-  ChatBubbleOvalLeftEllipsisIcon,
-  PlusSmallIcon,
-} from "@heroicons/react/24/outline";
+
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";
 import Convert from "ansi-to-html";
 const convert = new Convert({ newline: true });
+import { MessageCircle } from "lucide-react";
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
   const [hidden, setHidden] = useState(true);
@@ -24,7 +21,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
                 onClick={() => setHidden((prev) => !prev)}
                 className="absolute top-2 right-2 cursor-pointer"
               >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
+                <MessageCircle className="w-5 h-5 animate-bounce" />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 399ab40b2..7fe01ceb1 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -1,10 +1,10 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import { INPUT_STYLE } from "../../constants";
+import { ExternalLink } from "lucide-react";
 
 export default function CodeAreaComponent({
   value,
@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3"/>
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 0f4942198..54049fd82 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -1,9 +1,9 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { Fragment, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { ChevronsUpDown, Check } from "lucide-react";
 
 export default function Dropdown({
   value,
@@ -43,10 +43,11 @@ export default function Dropdown({
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                   }
                 >
-                  <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
-                    aria-hidden="true"
+                  <ChevronsUpDown 
+                                      className="h-5 w-5 text-gray-400"
+                                      aria-hidden="true"
                   />
+
                 </span>
               </Listbox.Button>
 
@@ -97,14 +98,15 @@ export default function Dropdown({
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
-                              <CheckIcon
-                                className={
-                                  active
-                                    ? "h-5 w-5 dark:text-black text-black"
-                                    : "h-5 w-5 dark:text-white text-black"
-                                }
-                                aria-hidden="true"
+                              <Check 
+                                                              className={
+                                                                active
+                                                                  ? "h-5 w-5 dark:text-black text-black"
+                                                                  : "h-5 w-5 dark:text-white text-black"
+                                                              }
+                                                              aria-hidden="true"
                               />
+
                             </span>
                           ) : null}
                         </>
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index f332dc5c1..9637fc3a8 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -69,6 +69,8 @@ export const MenuBar = ({ flows, tabId }) => {
               onClick={() => {
                 handleAddFlow();
               }}
+            className="cursor-pointer"
+
             >
               <Plus className="w-4 h-4 mr-2" />
               New
@@ -77,6 +79,8 @@ export const MenuBar = ({ flows, tabId }) => {
               onClick={() => {
                 openPopUp(<FlowSettingsModal />);
               }}
+            className="cursor-pointer"
+
             >
               <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
               Settings
@@ -85,6 +89,8 @@ export const MenuBar = ({ flows, tabId }) => {
               onClick={() => {
                 undo();
               }}
+            className="cursor-pointer"
+
             >
               <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
               Undo
@@ -93,6 +99,8 @@ export const MenuBar = ({ flows, tabId }) => {
               onClick={() => {
                 redo();
               }}
+            className="cursor-pointer"
+
             >
               <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
               Redo
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 694f84549..351e123a0 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -13,6 +13,7 @@ import { Link, useLocation, useParams } from "react-router-dom";
 import { USER_PROJECTS_HEADER } from "../../constants";
 import { getRepoStars } from "../../controllers/API";
 import { Separator } from "../ui/separator";
+import { Bell } from "lucide-react";
 
 export default function Header() {
   const { flows, addFlow, tabId } = useContext(TabsContext);
@@ -134,7 +135,7 @@ export default function Header() {
             {notificationCenter && (
               <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
             )}
-            <BellIcon className="h-5 w-5" aria-hidden="true" />
+            <Bell className="h-5 w-5" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 9f801138f..cb922a35e 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -1,8 +1,8 @@
-import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
 import { INPUT_STYLE } from "../../constants";
+import { FileSearch2 } from "lucide-react";
 
 export default function InputFileComponent({
   value,
@@ -89,7 +89,7 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && (
-            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-ring" />
+            <FileSearch2 className="w-8 h-8  hover:text-ring" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 4bb82147f..80a6de417 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -1,10 +1,11 @@
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
 import { INPUT_STYLE } from "../../constants";
+import { X, Plus } from "lucide-react";
+
 export default function InputListComponent({
   value,
   onChange,
@@ -59,7 +60,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <PlusIcon className={"w-4 h-4 hover:text-ring"} />
+              <Plus className={"w-4 h-4 hover:text-ring"}/>
             </button>
           ) : (
             <button
@@ -72,7 +73,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <XMarkIcon className="w-4 h-4 hover:text-red-600" />
+              <X className="w-4 h-4 hover:text-red-600" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 7713da8e6..ef6bae94d 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -1,10 +1,10 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { ExternalLink } from "lucide-react";
 
 export default function PromptAreaComponent({
   value,
@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300"/>
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 4c0412994..4b4cd1582 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -1,10 +1,11 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { ExternalLink } from "lucide-react";
+
 export default function TextAreaComponent({
   value,
   onChange,
@@ -76,7 +77,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index c3b821ac9..2d4bdad4e 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -1,4 +1,3 @@
-import { CodeBracketSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
@@ -26,7 +25,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components/ui/tabs";
-import { Check, Clipboard } from "lucide-react";
+import { Check, Clipboard, Code2 } from "lucide-react";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -88,10 +87,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <CodeBracketSquareIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-              aria-hidden="true"
+            <Code2 
+                          className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+                          aria-hidden="true"
             />
+
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1a270f46e..d0412d9cd 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -12,7 +12,6 @@ import {
   TableRow,
 } from "../../components/ui/table";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import { VariableIcon } from "@heroicons/react/24/outline";
 import InputListComponent from "../../components/inputListComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import InputComponent from "../../components/inputComponent";
@@ -33,6 +32,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { Badge } from "../../components/ui/badge";
+import { Variable } from "lucide-react";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -90,9 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
-                &nbsp;
-              </VariableIcon>
+              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
               <span className="text-sm font-semibold text-gray-800 dark:text-white">
                 Parameters
               </span>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 27255fd84..2065b1720 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -1,5 +1,4 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { NodeDataType } from "../../types/flow";
@@ -13,6 +12,7 @@ import {
 } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
+import { X } from "lucide-react";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -70,7 +70,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     }}
                   >
                     <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <X className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index a6598bc67..e43114ff1 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -1,8 +1,9 @@
-import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { classNames } from "../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import { TabsContext } from "../../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../../constants";
+import { Lock, Send } from "lucide-react";
+
 export default function ChatInput({
   lockChat,
   chatValue,
@@ -60,14 +61,14 @@ export default function ChatInput({
       <div className="absolute bottom-0.5 right-3">
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
-            <LockClosedIcon
-              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
-              aria-hidden="true"
+            <Lock 
+            className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
+            aria-hidden="true"
             />
           ) : (
-            <PaperAirplaneIcon
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
-              aria-hidden="true"
+            <Send 
+            className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+            aria-hidden="true"
             />
           )}
         </button>
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 318edc376..de8953a6e 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -1,10 +1,8 @@
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { useEffect, useRef, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import AiIconStill from "../../../assets/froze-flow.png";
-import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
@@ -12,6 +10,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
+import { User2, MessageCircle } from "lucide-react";
 
 export default function ChatMessage({
   chat,
@@ -62,7 +61,7 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+          <User2 className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
         )}
       </div>
       {!chat.isSend ? (
@@ -73,7 +72,9 @@ export default function ChatMessage({
                 onClick={() => setHidden((prev) => !prev)}
                 className="absolute -top-1 -left-2 cursor-pointer"
               >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+                <MessageCircle 
+                className="w-5 h-5 animate-bounce dark:text-white"
+                />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 2b5d97ae9..1c152b5fd 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -1,6 +1,6 @@
-import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
 import * as base64js from "base64-js";
 import { useState } from "react";
+import { DownloadCloud, File } from "lucide-react";
 
 export default function FileCard({ fileName, content, fileType }) {
   const handleDownload = () => {
@@ -43,7 +43,7 @@ export default function FileCard({ fileName, content, fileType }) {
               className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
               onClick={handleDownload}
             >
-              <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
+            <DownloadCloud className="hover:scale-110 w-5 h-5 text-current"/>
             </button>
           </div>
         )}
@@ -65,14 +65,14 @@ export default function FileCard({ fileName, content, fileType }) {
             className="w-8 h-8"
           />
         ) : (
-          <DocumentIcon className="w-8 h-8" />
+          <File className="w-8 h-8" />
         )}
         <div className="flex flex-col items-start">
           {" "}
           <div className="truncate text-sm text-current">{fileName}</div>
           <div className="truncate text-xs  text-gray-500">{fileType}</div>
         </div>
-        <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
+        <DownloadCloud className="w-6 h-6 text-current ml-auto"/>
       </div>
     </button>
   );
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index bf87e4100..98b0e4b2d 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -1,13 +1,11 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import { Eraser } from "lucide-react";
-import { X } from "lucide-react";
+import { X, MessagesSquare, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -387,7 +385,7 @@ export default function ChatModal({
                         <span className="text-base text-gray-500">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
-                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+                          <MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 "/>
                           </span>{" "}
                           to inspect the chaining process.
                         </span>
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 9f8815f4b..7c8c6f135 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -1,4 +1,3 @@
-import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import AceEditor from "react-ace";
@@ -22,6 +21,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
+import { TerminalSquare } from "lucide-react";
 
 export default function CodeAreaModal({
   value,
@@ -51,10 +51,11 @@ export default function CodeAreaModal({
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
-            <CommandLineIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-              aria-hidden="true"
+            <TerminalSquare
+                          className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+                          aria-hidden="true"
             />
+
           </DialogTitle>
           <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 30567b4f1..df5925817 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,4 +1,3 @@
-import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index d241e7c04..f12f21b27 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,4 +1,3 @@
-import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { darkContext } from "../../contexts/darkContext";
@@ -17,6 +16,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import { FileText } from "lucide-react";
 
 export default function GenericModal({
   value,
@@ -54,10 +54,11 @@ export default function GenericModal({
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
-            <DocumentTextIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-              aria-hidden="true"
+            <FileText
+                          className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+                          aria-hidden="true"
             />
+
           </DialogTitle>
           <DialogDescription>
             {(() => {
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2c408a120..5b7a42b48 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -1,7 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from "react";
-import { DocumentDuplicateIcon } from "@heroicons/react/solid";
+import React, { ReactNode } from "react";
 import { classNames } from "../../../utils";
-import Tooltip from "../../../components/TooltipComponent";
 
 export default function ButtonBox({
   onClick,
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 3582a416b..915e22476 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -1,4 +1,3 @@
-import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Disclosure } from "@headlessui/react";
 import { DisclosureComponentType } from "../../../../types/components";
 import { ChevronRight } from "lucide-react";
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 46a48197c..b144ae77e 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,4 +1,3 @@
-import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
 import {
   classNames,
@@ -16,9 +15,9 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { alertContext } from "../../../../contexts/alertContext";
-import { updateFlowInDatabase } from "../../../../controllers/API";
 import { INPUT_STYLE } from "../../../../constants";
 import { Separator } from "../../../../components/ui/separator";
+import { Menu  } from "lucide-react";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -186,7 +185,7 @@ export default function ExtraSidebar() {
                               <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
                                 {t}
                               </span>
-                              <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                              <Menu className="w-4 h-6  text-gray-400 dark:text-gray-600"/>
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts
index 3c0877579..3730492ce 100644
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@@ -1,5 +1,3 @@
-import { HomeIcon } from "@heroicons/react/24/outline";
-
 export type sidebarNavigationItemType = {
   name: string;
   href: string;