diff --git a/packages/components/credentials/TavilyApi.credential.ts b/packages/components/credentials/TavilyApi.credential.ts
new file mode 100644
index 000000000..161ff4df0
--- /dev/null
+++ b/packages/components/credentials/TavilyApi.credential.ts
@@ -0,0 +1,25 @@
+import { INodeParams, INodeCredential } from '../src/Interface'
+
+class TavilyApi implements INodeCredential {
+    label: string
+    name: string
+    version: number
+    description: string
+    inputs: INodeParams[]
+
+    constructor() {
+        this.label = 'Tavily API'
+        this.name = 'tavilyApi'
+        this.version = 1.0
+        this.description = 'Tavily API is a real-time API to access Google search results'
+        this.inputs = [
+            {
+                label: 'Tavily Api Key',
+                name: 'tavilyApiKey',
+                type: 'password'
+            }
+        ]
+    }
+}
+
+module.exports = { credClass: TavilyApi }
diff --git a/packages/components/nodes/tools/TavilyAPI/TavilyAPI.ts b/packages/components/nodes/tools/TavilyAPI/TavilyAPI.ts
new file mode 100644
index 000000000..68e44c546
--- /dev/null
+++ b/packages/components/nodes/tools/TavilyAPI/TavilyAPI.ts
@@ -0,0 +1,42 @@
+import { TavilySearchResults } from '@langchain/community/tools/tavily_search'
+import { ICommonObject, INode, INodeData, INodeParams } from '../../../src/Interface'
+import { getBaseClasses, getCredentialData, getCredentialParam } from '../../../src/utils'
+
+class TavilyAPI_Tools implements INode {
+    label: string
+    name: string
+    version: number
+    description: string
+    type: string
+    icon: string
+    category: string
+    baseClasses: string[]
+    credential: INodeParams
+    inputs: INodeParams[]
+
+    constructor() {
+        this.label = 'Tavily API'
+        this.name = 'tavilyAPI'
+        this.version = 1.0
+        this.type = 'TavilyAPI'
+        this.icon = 'tavily.svg'
+        this.category = 'Tools'
+        this.description = 'Wrapper around TavilyAPI - a real-time API to access Google search results'
+        this.inputs = []
+        this.credential = {
+            label: 'Connect Credential',
+            name: 'credential',
+            type: 'credential',
+            credentialNames: ['tavilyApi']
+        }
+        this.baseClasses = [this.type, ...getBaseClasses(TavilySearchResults)]
+    }
+
+    async init(nodeData: INodeData, _: string, options: ICommonObject): Promise<any> {
+        const credentialData = await getCredentialData(nodeData.credential ?? '', options)
+        const tavilyApiKey = getCredentialParam('tavilyApiKey', credentialData, nodeData)
+        return new TavilySearchResults({ apiKey: tavilyApiKey })
+    }
+}
+
+module.exports = { nodeClass: TavilyAPI_Tools }
diff --git a/packages/components/nodes/tools/TavilyAPI/tavily.svg b/packages/components/nodes/tools/TavilyAPI/tavily.svg
new file mode 100644
index 000000000..141d1d3d6
--- /dev/null
+++ b/packages/components/nodes/tools/TavilyAPI/tavily.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg"><path d="m16.44.964 4.921 7.79c.79 1.252-.108 2.883-1.588 2.883H17.76V23.3h-2.91V.088c.61 0 1.22.292 1.59.876z" fill="#8FBCFA"/><path d="M8.342 8.755 13.263.964a1.864 1.864 0 0 1 1.59-.876V23.3a4.87 4.87 0 0 0-.252-.006c-.99 0-1.907.311-2.658.842V11.637H9.93c-1.48 0-2.38-1.631-1.589-2.882z" fill="#468BFF"/><path d="M30.278 31H18.031a4.596 4.596 0 0 0 1.219-2.91h22.577c0 .61-.292 1.22-.875 1.59L33.16 34.6c-1.251.791-2.883-.108-2.883-1.588V31z" fill="#FDBB11"/><path d="m33.16 21.581 7.79 4.921c.585.369.876.979.876 1.589H19.25a4.619 4.619 0 0 0-.858-2.91h11.887V23.17c0-1.48 1.631-2.38 2.882-1.589z" fill="#F6D785"/><path d="m8.24 34.25-7.107 7.108a1.864 1.864 0 0 0 1.742.504l8.989-2.03c1.443-.325 1.961-2.114.915-3.16l-1.423-1.423 5.356-5.356a2.805 2.805 0 0 0 0-3.966l-.074-.075L8.24 34.25z" fill="#FF9A9D"/><path d="m7.243 31.135 5.355-5.356a2.805 2.805 0 0 1 3.967 0l.074.074-8.397 8.397-7.108 7.108a1.864 1.864 0 0 1-.504-1.742l2.029-8.989c.325-1.444 2.115-1.961 3.161-.915l1.423 1.423z" fill="#FE363B"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/views/canvas/ButtonEdge.jsx b/packages/ui/src/views/canvas/ButtonEdge.jsx
index 3e93534b6..0e6810e06 100644
--- a/packages/ui/src/views/canvas/ButtonEdge.jsx
+++ b/packages/ui/src/views/canvas/ButtonEdge.jsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux'
 import { useContext } from 'react'
 import { SET_DIRTY } from '@/store/actions'
 import { flowContext } from '@/store/context/ReactFlowContext'
+import { IconX } from '@tabler/icons-react'
 
 import './index.css'
 
@@ -53,7 +54,7 @@ const ButtonEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, ta
             >
                 <div>
                     <button className='edgebutton' onClick={(event) => onEdgeClick(event, id)}>
-                        ×
+                        <IconX stroke={2} size='12' />
                     </button>
                 </div>
             </foreignObject>
diff --git a/packages/ui/src/views/canvas/index.css b/packages/ui/src/views/canvas/index.css
index e13d875e6..3ad926786 100644
--- a/packages/ui/src/views/canvas/index.css
+++ b/packages/ui/src/views/canvas/index.css
@@ -1,12 +1,14 @@
 .edgebutton {
     width: 20px;
     height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
     background: #eee;
     border: 1px solid #fff;
     cursor: pointer;
     border-radius: 50%;
-    font-size: 12px;
-    line-height: 1;
 }
 
 .edgebutton:hover {