diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 0e8bd9b601..2c3bef45a8 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -6,7 +6,7 @@
 	import ArgInput from './ArgInput.svelte'
 	import FieldHeader from './FieldHeader.svelte'
 	import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte'
-	import type { PropPickerWrapperContext } from './flows/propPicker/PropPickerWrapper.svelte'
+	import type { FlowEditorContext } from './flows/types'
 	import { codeToStaticTemplate, getDefaultExpr } from './flows/utils'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import { Button } from '$lib/components/common'
@@ -39,6 +39,7 @@
 	export let argExtra: Record<string, any> = {}
 	export let pickableProperties: PickableProperties | undefined = undefined
 	export let enableAi = false
+	export let id: string
 
 	let monaco: SimpleEditor | undefined = undefined
 	let monacoTemplate: TemplateEditor | undefined = undefined
@@ -146,6 +147,8 @@
 
 	function onFocus() {
 		focused = true
+		if (!focusProp) return
+
 		if (isStaticTemplate(inputCat)) {
 			focusProp(argName, 'append', (path) => {
 				const toAppend = `\$\{${path}}`
@@ -166,7 +169,7 @@
 		}
 	}
 
-	const { focusProp, propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
+	const { flowInputsStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value)
 
@@ -189,11 +192,14 @@
 
 	loadResourceTypes()
 
+	$: propPickerConfig = $flowInputsStore[id]?.connectingInputs?.propPickerConfig
+	$: focusProp = $flowInputsStore[id]?.connectingInputs?.focusProp
+
 	$: connecting =
 		$propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'
 </script>
 
-{#if arg != undefined}
+{#if arg != undefined && focusProp}
 	<div
 		class={twMerge(
 			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
@@ -476,7 +482,7 @@
 					{/if}
 				</div>
 
-				{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'insert'}
+				{#if $propPickerConfig?.propName == argName && ($propPickerConfig?.insertionMode == 'insert' || $propPickerConfig?.insertionMode == 'append')}
 					<div class="text-blue-500 mt-2" in:fade={{ duration: 200 }}>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index 4b1dd080ec..35046059b2 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -23,7 +23,7 @@
 	export let noDynamicToggle = false
 	export let pickableProperties: PickableProperties | undefined = undefined
 	export let enableAi = false
-
+	export let id: string
 	let clazz: string = ''
 	export { clazz as class }
 
@@ -102,6 +102,11 @@
 							const { argName } = e.detail
 							dispatch('changeArg', { argName })
 						}}
+						on:connect={(e) => {
+							dispatch('connect', e.detail)
+							console.log('dbg connect 2', e.detail)
+						}}
+						{id}
 					/>
 				</div>
 			{/if}
diff --git a/frontend/src/lib/components/common/button/AnimatedButton.svelte b/frontend/src/lib/components/common/button/AnimatedButton.svelte
index 40dfa1f024..f6696fb79b 100644
--- a/frontend/src/lib/components/common/button/AnimatedButton.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButton.svelte
@@ -4,7 +4,7 @@
 	export let marginWidth = '2px'
 	export let animationDuration = '2s'
 	export let baseRadius = '4px'
-	export let animate = true
+	export let animate: boolean = true
 	export let wrapperClasses = ''
 	export let ringColor = 'transparent'
 
diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
index df0688f177..52b7256e0e 100644
--- a/frontend/src/lib/components/flows/content/FlowConstants.svelte
+++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -3,9 +3,7 @@
 	import FlowCard from '../common/FlowCard.svelte'
 	import { Alert, Badge } from '$lib/components/common'
 	import type { FlowModule, FlowModuleValue, InputTransform, PathScript, RawScript } from '$lib/gen'
-	import { getContext, setContext } from 'svelte'
-	import type { PropPickerWrapperContext } from '../propPicker/PropPickerWrapper.svelte'
-	import { writable } from 'svelte/store'
+	import { getContext } from 'svelte'
 	import Toggle from '../../Toggle.svelte'
 	import InputTransformSchemaForm from '$lib/components/InputTransformSchemaForm.svelte'
 	import type { FlowEditorContext } from '../types'
@@ -75,12 +73,6 @@
 				] as [Record<string, InputTransform>, string[], FlowModule]
 		)
 		.filter(([i, f, m]) => f.length > 0)
-
-	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
-		focusProp: () => {},
-		propPickerConfig: writable(undefined),
-		clearFocus: () => {}
-	})
 </script>
 
 <div class="min-h-full">
@@ -135,6 +127,7 @@
 							class="mt-2"
 							schema={$flowStateStore[m.id]?.schema ?? {}}
 							bind:args
+							id={m.id}
 						/>
 					</div>
 				{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 12df94be76..321b190af6 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -13,7 +13,7 @@
 	import FlowModuleHeader from './FlowModuleHeader.svelte'
 	import { getLatestHashForScript, scriptLangToEditorLang } from '$lib/scripts'
 	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
-	import { afterUpdate, getContext, tick } from 'svelte'
+	import { afterUpdate, getContext, tick, createEventDispatcher } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import FlowModuleScript from './FlowModuleScript.svelte'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
@@ -48,6 +48,8 @@
 	import { debounce } from '$lib/utils'
 	import { dfs } from '../dfs'
 	import FlowModuleSkip from './FlowModuleSkip.svelte'
+	import { writable } from 'svelte/store'
+	import type { PropPickerConfig } from '../types'
 
 	const {
 		selectedId,
@@ -213,6 +215,33 @@
 		}
 		debouncedWarning(argName)
 	}
+
+	function setConnect() {
+		const dispatch = createEventDispatcher()
+		if ($flowInputsStore && flowModule.id && $flowInputsStore?.[flowModule.id] === undefined) {
+			$flowInputsStore[flowModule.id] = {}
+		}
+
+		const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
+		$flowInputsStore[flowModule.id] = {
+			connectingInputs: {
+				propPickerConfig,
+				focusProp: (propName, insertionMode, onSelect) => {
+					propPickerConfig.set({
+						propName,
+						insertionMode,
+						onSelect
+					})
+				},
+				clearFocus: () => {
+					propPickerConfig.set(undefined)
+					dispatch('connect', false)
+				}
+			}
+		}
+	}
+
+	setConnect()
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -379,6 +408,10 @@
 										pickableProperties={stepPropPicker.pickableProperties}
 										error={failureModule}
 										noPadding
+										on:connect={(e) => {
+											console.log('dbg connect', e.detail)
+										}}
+										id={flowModule.id}
 									>
 										<InputTransformSchemaForm
 											bind:this={inputTransformSchemaForm}
@@ -391,7 +424,12 @@
 											on:changeArg={(e) => {
 												const { argName } = e.detail
 												setFlowInput(argName)
+												console.log('dbg changeArg', argName)
 											}}
+											on:connect={(e) => {
+												console.log('dbg connect 3', e.detail)
+											}}
+											id={flowModule.id}
 										/>
 									</PropPickerWrapper>
 								</div>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index d93d85366d..abdf5d45df 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -15,7 +15,8 @@
 		Square,
 		SkipForward,
 		Voicemail,
-		X
+		X,
+		Plug
 	} from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { fade } from 'svelte/transition'
@@ -28,6 +29,7 @@
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import { getDependeeAndDependentComponents } from '../flowExplorer'
 	import { replaceId } from '../flowStore'
+	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
 
 	export let selected: boolean = false
 	export let deletable: boolean = false
@@ -290,6 +292,25 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 			</button>
 		{/if}
 
+		{#if hover || selected}
+			<AnimatedButton
+				wrapperClasses="absolute -top-[10px] right-[85px] w-fit h-fit"
+				animate={!!id && false}
+				animationDuration="1s"
+				baseRadius="9999px"
+				marginWidth="3px"
+			>
+				<button
+					class="rounded-full h-[20px] w-[20px] trash center-center text-secondary-inverse
+bg-surface-inverse duration-150 hover:bg-blue-400 hover:text-white"
+					on:click|preventDefault|stopPropagation={(event) => dispatch('connect')}
+					title="Connect"
+				>
+					<Plug class="mx-[3px]" size={12} strokeWidth={2} />
+				</button>
+			</AnimatedButton>
+		{/if}
+
 		{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
 			<div class="absolute -top-[10px] -left-[10px]">
 				<Popover>
diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
index 13bbb6c611..dd42f90465 100644
--- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
+++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -1,31 +1,15 @@
-<script context="module" lang="ts">
-	type InsertionMode = 'append' | 'connect' | 'insert'
-
-	type SelectCallback = (path: string) => boolean
-
-	type PropPickerConfig = {
-		insertionMode: InsertionMode
-		propName: string
-		onSelect: SelectCallback
-	}
-
-	export type PropPickerWrapperContext = {
-		propPickerConfig: Writable<PropPickerConfig | undefined>
-		focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void
-		clearFocus: () => void
-	}
-</script>
-
 <script lang="ts">
 	import PropPicker from '$lib/components/propertyPicker/PropPicker.svelte'
 	import PropPickerResult from '$lib/components/propertyPicker/PropPickerResult.svelte'
 	import { clickOutside } from '$lib/utils'
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { getContext, createEventDispatcher } from 'svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { writable, type Writable } from 'svelte/store'
 	import type { PickableProperties } from '../previousResults'
 	import { twMerge } from 'tailwind-merge'
 	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
+	import type { FlowEditorContext } from '../types'
+	import { writable } from 'svelte/store'
+	import type { PropPickerConfig, InsertionMode, SelectCallback } from '../types'
 
 	export let pickableProperties: PickableProperties | undefined
 	export let result: any = undefined
@@ -35,23 +19,47 @@
 	export let displayContext = true
 	export let notSelectable = false
 	export let noPadding: boolean = false
+	export let id: string
 
 	const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
+	const { flowInputsStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
 
-	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
-		propPickerConfig,
-		focusProp: (propName, insertionMode, onSelect) => {
-			propPickerConfig.set({
-				propName,
-				insertionMode,
-				onSelect
-			})
-		},
-		clearFocus: () => {
-			propPickerConfig.set(undefined)
+	function setPropPickerConfig() {
+		if ($flowInputsStore && id && $flowInputsStore?.[id] === undefined) {
+			$flowInputsStore[id] = {
+				connectingInputs: {
+					propPickerConfig,
+					focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => {
+						propPickerConfig.set({
+							propName,
+							insertionMode,
+							onSelect
+						})
+					},
+					clearFocus: () => {
+						propPickerConfig.set(undefined)
+					}
+				}
+			}
+		} else if ($flowInputsStore && id) {
+			$flowInputsStore[id].connectingInputs = {
+				propPickerConfig,
+				focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => {
+					propPickerConfig.set({
+						propName,
+						insertionMode,
+						onSelect
+					})
+				},
+				clearFocus: () => {
+					propPickerConfig.set(undefined)
+				}
+			}
 		}
-	})
+	}
+
+	$: $flowInputsStore && setPropPickerConfig()
 </script>
 
 <div
@@ -69,7 +77,10 @@
 				baseRadius="4px"
 				wrapperClasses="h-full w-full pt-2"
 				marginWidth="4px"
-				ringColor={$propPickerConfig?.insertionMode == 'insert' ? '#3b82f6' : 'transparent'}
+				ringColor={$propPickerConfig?.insertionMode == 'insert' ||
+				$propPickerConfig?.insertionMode == 'append'
+					? '#3b82f6'
+					: 'transparent'}
 				animationDuration="1s"
 			>
 				{#if result}
@@ -93,11 +104,12 @@
 						{notSelectable}
 						allowCopy={!notSelectable && !$propPickerConfig}
 						on:select={({ detail }) => {
-							dispatch('select', detail)
+							//dispatch('select', detail)
 							if ($propPickerConfig?.onSelect(detail)) {
 								propPickerConfig.set(undefined)
 							}
 						}}
+						{id}
 					/>
 				{/if}
 			</AnimatedButton>
diff --git a/frontend/src/lib/components/flows/types.ts b/frontend/src/lib/components/flows/types.ts
index 2cf7127018..fd3d881fd5 100644
--- a/frontend/src/lib/components/flows/types.ts
+++ b/frontend/src/lib/components/flows/types.ts
@@ -5,9 +5,25 @@ import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte'
 import type { FlowState } from './flowState'
 import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui'
 
+export type InsertionMode = 'connect' | 'insert' | 'append'
+export type SelectCallback = (detail: any) => boolean
+
+export type PropPickerConfig = {
+	propName: string
+	insertionMode: InsertionMode
+	onSelect: SelectCallback
+}
+
+export type PropPickerWrapper = {
+	propPickerConfig: Writable<PropPickerConfig | undefined>
+	focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void
+	clearFocus: () => void
+}
+
 export type FlowInput = Record<
 	string,
 	{
+		connectingInputs?: PropPickerWrapper
 		flowStepWarnings?: Record<
 			string,
 			{
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 5311c4ae53..a00f0ea237 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -3,7 +3,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import { getContext } from 'svelte'
 	import { Badge, Button } from '../common'
-	import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
+	import type { FlowEditorContext } from '../flows/types'
 
 	import ObjectViewer from './ObjectViewer.svelte'
 	import { keepByKey } from './utils'
@@ -15,6 +15,7 @@
 	export let notSelectable: boolean
 	export let error: boolean = false
 	export let allowCopy = false
+	export let id: string
 
 	$: previousId = pickableProperties?.previousId
 	let variables: Record<string, string> = {}
@@ -26,7 +27,9 @@
 	const EMPTY_STRING = ''
 	let search = ''
 
-	const { propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
+	const { flowInputsStore } = getContext<FlowEditorContext>('FlowEditorContext')
+
+	$: propPickerConfig = flowInputsStore[id]?.connectingInputs?.propPickerConfig
 
 	$: flowInputsFiltered =
 		search === EMPTY_STRING