diff --git a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
new file mode 100644
index 0000000000..f965fc41ee
--- /dev/null
+++ b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { FlowModule } from '$lib/gen'
+	import { getContext } from 'svelte'
+	import { flowStore } from '../flowStore'
+	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
+	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+
+	import { flowStateStore } from '../flowState'
+	import { getStepPropPicker } from '../previousResults'
+	import type { FlowEditorContext } from '../types'
+
+	export let branch: {
+		summary?: string
+		expr: string
+		modules: Array<FlowModule>
+	}
+	export let parentModule: FlowModule
+	export let previousModule: FlowModule | undefined
+
+	const { previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
+	let editor: SimpleEditor | undefined = undefined
+
+	$: stepPropPicker = getStepPropPicker(
+		$flowStateStore,
+		parentModule,
+		previousModule,
+		parentModule.id,
+		$flowStore,
+		$previewArgs,
+		false,
+		true
+	)
+</script>
+
+<PropPickerWrapper
+	notSelectable
+	pickableProperties={stepPropPicker.pickableProperties}
+	on:select={({ detail }) => {
+		editor?.insertAtCursor(detail)
+	}}
+>
+	<SimpleEditor
+		bind:this={editor}
+		lang="javascript"
+		bind:code={branch.expr}
+		class="small-editor"
+		shouldBindKey={false}
+		extraLib={stepPropPicker.extraLib}
+	/>
+</PropPickerWrapper>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte
index 2a927cfd62..ea27216983 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte
@@ -20,7 +20,7 @@
 			<Toggle
 				bind:checked={branch.skip_failure}
 				options={{
-					right: 'Skip failure'
+					right: 'Skip failures'
 				}}
 			/>
 		</div>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
new file mode 100644
index 0000000000..8ca0a2abcb
--- /dev/null
+++ b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Alert, Badge, Button, Tab } from '$lib/components/common'
+	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
+
+	import type { BranchAll, FlowModule } from '$lib/gen'
+	import FlowCard from '../common/FlowCard.svelte'
+	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
+	import FlowModuleSleep from './FlowModuleSleep.svelte'
+	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
+	// import FlowRetries from './FlowRetries.svelte'
+
+	export let flowModule: FlowModule
+	export let previousModule: FlowModule | undefined
+
+	let value = flowModule.value as BranchAll
+	$: value = flowModule.value as BranchAll
+
+	let selected = 'early-stop'
+</script>
+
+<div class="h-full flex flex-col w-full">
+	<FlowCard title={value.type == 'branchall' ? 'Run all branches' : 'Run one branch'}>
+		<div class="flex flex-col h-full w-full">
+			<div class="border w-full">
+				<Alert notRounded type="info" title="All branches will be run">
+					The result of this step is the list of the result of each branch.
+				</Alert>
+
+				<div class="p-4 mt-4 w-full">
+					<h3 class="mb-4">{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
+					>
+					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
+						{#each value.branches as branch, i}
+							<div class="flex flex-row gap-x-4 w-full">
+								<div class="grow">
+									<input type="text" bind:value={branch.summary} placeholder="Summary" />
+								</div>
+								<div class="w-min-sm">
+									<Toggle
+										bind:checked={branch.skip_failure}
+										options={{
+											right: 'Skip failure'
+										}}
+									/>
+								</div>
+							</div>
+						{/each}
+					</div>
+					<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+					<Toggle
+						bind:checked={value.parallel}
+						options={{
+							right: 'All branches run in parallel'
+						}}
+					/>
+				</div>
+			</div>
+			{#if flowModule}
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="suspend">Suspend</Tab>
+					<Tab value="sleep">Sleep</Tab>
+
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule />
+								</div>
+							</TabContent> -->
+
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule />
+								</div>
+							</TabContent>
+
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend bind:flowModule />
+								</div>
+							</TabContent>
+							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			{/if}
+		</div>
+	</FlowCard>
+</div>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
new file mode 100644
index 0000000000..c0dc6dbb5b
--- /dev/null
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { Alert, Badge, Button, Tab } from '$lib/components/common'
+	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+
+	import type { BranchOne, FlowModule } from '$lib/gen'
+	import FlowCard from '../common/FlowCard.svelte'
+	import BranchPredicateEditor from './BranchPredicateEditor.svelte'
+	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
+	import FlowModuleSleep from './FlowModuleSleep.svelte'
+	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
+	// import FlowRetries from './FlowRetries.svelte'
+
+	export let flowModule: FlowModule
+	export let previousModule: FlowModule | undefined
+
+	let value = flowModule.value as BranchOne
+	$: value = flowModule.value as BranchOne
+
+	let selected = 'early-stop'
+</script>
+
+<div class="h-full">
+	<FlowCard title="Run one branch">
+		<div class="flex flex-col h-full overflow-auto">
+			<div class="border">
+				<Alert notRounded type="info" title="Only one branch will be run">
+					The result of this step is the result of the branch.
+				</Alert>
+
+				<div class="p-2">
+					<h3 class="my-4"
+						>{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}</h3
+					>
+					<div class="flex flex-col gap-y-4 py-2">
+						<div class="flex flex-row gap-2 text-sm border border-gray-400 p-2">
+							<Badge large={true} color="blue">Default branch</Badge>
+							<p class="italic text-gray-600"
+								>If none of the predicates' expressions evaluated in-order match, this branch is
+								chosen</p
+							>
+						</div>
+						{#each value.branches as branch, i}
+							<div class="flex flex-col gap-x-2 p-2 items-center border border-gray-400">
+								<input
+									class="w-full"
+									type="text"
+									bind:value={branch.summary}
+									placeholder="Summary"
+								/>
+								<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+			{#if flowModule}
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="suspend">Suspend</Tab>
+					<Tab value="sleep">Sleep</Tab>
+
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule />
+								</div>
+							</TabContent> -->
+
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule />
+								</div>
+							</TabContent>
+
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend bind:flowModule />
+								</div>
+							</TabContent>
+							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			{/if}
+		</div>
+	</FlowCard>
+</div>