diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index b6a0313f07..083eacbce9 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -83,7 +83,7 @@ const CustomEdge = ({
       <EdgeLabelRenderer>
         <div
           className={`
-            nopan nodrag
+            nopan nodrag hover:scale-150 transition-all
             ${data?._hovering ? 'block' : 'hidden'}
             ${open && '!block'}
           `}
@@ -99,6 +99,7 @@ const CustomEdge = ({
             asChild
             onSelect={handleInsert}
             availableBlocksTypes={intersection(availablePrevNodes, availableNextNodes)}
+            triggerClassName={() => 'hover:scale-150 transition-all'}
           />
         </div>
       </EdgeLabelRenderer>
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 978f944441..f8d6891660 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -69,6 +69,7 @@ export const NodeTargetHandle = memo(({
         className={`
           !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
           after:absolute after:w-0.5 after:h-2 after:left-1.5 after:top-1 after:bg-primary-500
+          hover:scale-150 transition-all
           ${!connected && 'after:opacity-0'}
           ${data.type === BlockEnum.Start && 'opacity-0'}
           ${handleClassName}
@@ -88,6 +89,7 @@ export const NodeTargetHandle = memo(({
                 hidden absolute left-0 top-0 pointer-events-none
                 ${nodeSelectorClassName}
                 group-hover:flex
+                group-hover:scale-150
                 ${open && '!flex'}
               `}
               availableBlocksTypes={availablePrevNodes}
@@ -149,6 +151,7 @@ export const NodeSourceHandle = memo(({
         className={`
           !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
           after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
+          hover:scale-150 transition-all
           ${!connected && 'after:opacity-0'}
           ${handleClassName}
         `}
@@ -163,7 +166,7 @@ export const NodeSourceHandle = memo(({
               onSelect={handleSelect}
               asChild
               triggerClassName={open => `
-                hidden absolute top-0 left-0 pointer-events-none
+                hidden absolute top-0 left-0 pointer-events-none 
                 ${nodeSelectorClassName}
                 group-hover:flex
                 ${open && '!flex'}