diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 5d140c125..84f4eec4b 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -13,7 +13,7 @@
 					<ComponentRenderer
 						class="componentRenderer"
 						:class="{
-							settingsOpen: ssbm.isSelectionActive(),
+							settingsOpen: ssbm.isSingleSelectionActive,
 						}"
 						@dragover="handleRendererDragover"
 						@dragstart="handleRendererDragStart"
@@ -25,7 +25,7 @@
 				</div>
 
 				<BuilderSettings
-					v-if="ssbm.isSelectionActive()"
+					v-if="ssbm.isSingleSelectionActive"
 					:key="selectedId ?? 'noneSelected'"
 				></BuilderSettings>
 			</div>
@@ -82,6 +82,7 @@ import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
 import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
+import { SelectionStatus } from "./builderManager";
 
 const BuilderSettings = defineAsyncComponent({
 	loader: () => import("./settings/BuilderSettings.vue"),
@@ -139,7 +140,7 @@ const {
 } = useComponentActions(wf, ssbm);
 
 const builderMode = computed(() => ssbm.getMode());
-const selectedId = computed(() => ssbm.getSelection()?.componentId);
+const selectedId = computed(() => ssbm.firstSelectedId.value);
 
 function handleKeydown(ev: KeyboardEvent): void {
 	if (ev.key == "Escape") {
@@ -162,9 +163,12 @@ function handleKeydown(ev: KeyboardEvent): void {
 		return;
 	}
 
-	if (!ssbm.isSelectionActive()) return;
+	if (!ssbm.isSingleSelectionActive.value || !ssbm.firstSelectedItem.value) {
+		return;
+	}
+
 	const { componentId: selectedId, instancePath: selectedInstancePath } =
-		ssbm.getSelection();
+		ssbm.firstSelectedItem.value;
 
 	if (ev.key == "Delete") {
 		if (!isDeleteAllowed(selectedId)) return;
@@ -234,11 +238,20 @@ function handleRendererClick(ev: PointerEvent): void {
 	if (!targetEl) return;
 	const targetId = targetEl.dataset.writerId;
 	const targetInstancePath = targetEl.dataset.writerInstancePath;
-	if (targetId !== ssbm.getSelectedId()) {
-		ev.preventDefault();
-		ev.stopPropagation();
-		ssbm.setSelection(targetId, targetInstancePath, "click");
+
+	const isAlreadySelected = ssbm.isComponentIdSelected(targetId);
+
+	if (
+		isAlreadySelected &&
+		ssbm.selectionStatus.value !== SelectionStatus.Multiple
+	) {
+		return;
 	}
+
+	ev.preventDefault();
+	ev.stopPropagation();
+
+	ssbm.handleSelectionFromEvent(ev, targetId, targetInstancePath, "click");
 }
 
 const handleRendererDragStart = (ev: DragEvent) => {
@@ -251,6 +264,12 @@ const handleRendererDragStart = (ev: DragEvent) => {
 	const componentId = targetEl.dataset.writerId;
 	const { type } = wf.getComponentById(componentId);
 
+	// we don't support yet dragginfg multiple components in UI. If drag is starting with multiple selections, we select only one component
+	if (ssbm.selectionStatus.value === SelectionStatus.Multiple) {
+		ssbm.setSelection(componentId, undefined, "click");
+		ssbm.isSettingsBarCollapsed.value = true;
+	}
+
 	ev.dataTransfer.setData(
 		`application/json;writer=${type},${componentId}`,
 		"{}",
diff --git a/src/ui/src/builder/builderManager.spec.ts b/src/ui/src/builder/builderManager.spec.ts
new file mode 100644
index 000000000..8b30d4d98
--- /dev/null
+++ b/src/ui/src/builder/builderManager.spec.ts
@@ -0,0 +1,92 @@
+import { describe, it, expect } from "vitest";
+import { generateBuilderManager, SelectionStatus } from "./builderManager";
+
+describe(generateBuilderManager.name, () => {
+	describe("selection", () => {
+		it("should select an element", () => {
+			const {
+				setSelection,
+				isComponentIdSelected,
+				selectionStatus,
+				firstSelectedId,
+			} = generateBuilderManager();
+
+			setSelection("componentId", "instancePath", "click");
+
+			expect(firstSelectedId.value).toBe("componentId");
+			expect(isComponentIdSelected("componentId")).toBeTruthy();
+			expect(selectionStatus.value).toBe(SelectionStatus.Single);
+		});
+
+		it("should select multiple element", () => {
+			const {
+				setSelection,
+				appendSelection,
+				isComponentIdSelected,
+				selectionStatus,
+				firstSelectedId,
+			} = generateBuilderManager();
+
+			setSelection("componentId", "instancePath", "click");
+			appendSelection("componentId2", "instancePath2", "click");
+
+			expect(firstSelectedId.value).toBe("componentId");
+			expect(isComponentIdSelected("componentId")).toBeTruthy();
+			expect(isComponentIdSelected("componentId2")).toBeTruthy();
+			expect(selectionStatus.value).toBe(SelectionStatus.Multiple);
+		});
+
+		it("should clear the selection an element", () => {
+			const {
+				setSelection,
+				isComponentIdSelected,
+				selectionStatus,
+				firstSelectedId,
+			} = generateBuilderManager();
+
+			setSelection("componentId", "instancePath", "click");
+			setSelection(null);
+
+			expect(firstSelectedId.value).toBeUndefined();
+			expect(isComponentIdSelected("componentId")).toBeFalsy();
+			expect(selectionStatus.value).toBe(SelectionStatus.None);
+		});
+
+		it("should handle click events", () => {
+			const {
+				handleSelectionFromEvent,
+				isComponentIdSelected,
+				selectionStatus,
+			} = generateBuilderManager();
+
+			handleSelectionFromEvent(
+				{ ctrlKey: true } as KeyboardEvent,
+				"1",
+				"path",
+			);
+
+			expect(selectionStatus.value).toBe(SelectionStatus.Single);
+			expect(isComponentIdSelected("1")).toBeTruthy();
+
+			handleSelectionFromEvent(
+				{ ctrlKey: true } as KeyboardEvent,
+				"2",
+				"path",
+			);
+
+			expect(selectionStatus.value).toBe(SelectionStatus.Multiple);
+			expect(isComponentIdSelected("1")).toBeTruthy();
+			expect(isComponentIdSelected("2")).toBeTruthy();
+
+			handleSelectionFromEvent(
+				{ ctrlKey: true } as KeyboardEvent,
+				"2",
+				"path",
+			);
+
+			expect(selectionStatus.value).toBe(SelectionStatus.Single);
+			expect(isComponentIdSelected("1")).toBeTruthy();
+			expect(isComponentIdSelected("2")).toBeFalsy();
+		});
+	});
+});
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index bc7d0a38e..70d207020 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -1,4 +1,4 @@
-import { ref, Ref } from "vue";
+import { computed, ref, Ref } from "vue";
 import { Component, ClipboardOperation } from "@/writerTypes";
 
 export const CANDIDATE_CONFIRMATION_DELAY_MS = 1500;
@@ -61,13 +61,19 @@ type LogEntry = {
 
 type SelectionSource = "click" | "tree" | "log";
 
+export const enum SelectionStatus {
+	None = 0,
+	Single = 1,
+	Multiple = 2,
+}
+
 type State = {
 	mode: "ui" | "workflows" | "preview";
 	selection: {
 		componentId: Component["id"];
 		instancePath: string;
 		source: SelectionSource;
-	};
+	}[];
 	clipboard: {
 		operation: ClipboardOperation;
 		jsonSubtree: string;
@@ -82,7 +88,7 @@ type State = {
 export function generateBuilderManager() {
 	const initState: State = {
 		mode: "ui",
-		selection: null,
+		selection: [],
 		clipboard: null,
 		mutationTransactionsSnapshot: {
 			undo: null,
@@ -105,14 +111,27 @@ export function generateBuilderManager() {
 	};
 
 	const setSelection = (
-		componentId: Component["id"],
+		componentId: Component["id"] | null,
 		instancePath?: string,
 		source?: SelectionSource,
 	) => {
 		if (componentId === null) {
-			state.value.selection = null;
+			state.value.selection = [];
 			return;
 		}
+
+		if (state.value.selection.length !== 0) {
+			state.value.selection = [];
+		}
+
+		appendSelection(componentId, instancePath, source);
+	};
+
+	const appendSelection = (
+		componentId: Component["id"],
+		instancePath?: string,
+		source?: SelectionSource,
+	) => {
 		let resolvedInstancePath = instancePath;
 		if (typeof resolvedInstancePath == "undefined") {
 			const componentFirstElement: HTMLElement = document.querySelector(
@@ -122,25 +141,57 @@ export function generateBuilderManager() {
 				componentFirstElement?.dataset.writerInstancePath;
 		}
 
-		state.value.selection = {
+		state.value.selection.push({
 			componentId,
 			instancePath: resolvedInstancePath,
 			source,
-		};
+		});
 	};
 
-	const isSelectionActive = () => {
-		return state.value.selection !== null;
+	const handleSelectionFromEvent = (
+		ev: MouseEvent | KeyboardEvent,
+		componentId: Component["id"],
+		instancePath?: string,
+		source?: SelectionSource,
+	) => {
+		if (!ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+			return setSelection(componentId, instancePath, source);
+		}
+
+		if (isComponentIdSelected(componentId)) {
+			removeSelectedComponentId(componentId);
+		} else {
+			appendSelection(componentId, instancePath, source);
+		}
 	};
 
-	const getSelection = () => {
-		return state.value.selection;
+	const isComponentIdSelected = (componentId: string) => {
+		return state.value.selection.some((s) => s.componentId === componentId);
 	};
 
-	const getSelectedId = () => {
-		return state.value.selection?.componentId;
+	const removeSelectedComponentId = (componentId: string) => {
+		const newSelection = state.value.selection.filter(
+			(c) => c.componentId !== componentId,
+		);
+		if (newSelection.length === state.value.selection.length) return;
+		state.value.selection = newSelection;
 	};
 
+	const selectionStatus = computed<SelectionStatus>(() => {
+		if (state.value.selection.length === 0) return SelectionStatus.None;
+		if (state.value.selection.length === 1) return SelectionStatus.Single;
+		return SelectionStatus.Multiple;
+	});
+	const isSingleSelectionActive = computed(
+		() => selectionStatus.value === SelectionStatus.Single,
+	);
+
+	const firstSelectedItem = computed(() => state.value.selection[0]);
+
+	const firstSelectedId = computed(
+		() => state.value.selection[0]?.componentId,
+	);
+
 	const setClipboard = (clipboard: State["clipboard"]) => {
 		state.value.clipboard = clipboard;
 	};
@@ -312,10 +363,16 @@ export function generateBuilderManager() {
 		getMode,
 		openPanels: ref(new Set<"code" | "log">()),
 		isSettingsBarCollapsed: ref(false),
-		isSelectionActive,
+		isComponentIdSelected,
+		selectionStatus,
+		isSingleSelectionActive,
+		firstSelectedId,
+		firstSelectedItem,
+		removeSelectedComponentId,
 		setSelection,
-		getSelection,
-		getSelectedId,
+		appendSelection,
+		handleSelectionFromEvent,
+		selection: computed(() => state.value.selection),
 		setClipboard,
 		getClipboard,
 		openMutationTransaction,
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
index e34eb491d..f164b8d50 100644
--- a/src/ui/src/builder/settings/BuilderSettings.vue
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -1,10 +1,13 @@
 <template>
 	<div
-		v-if="ssbm.isSelectionActive()"
+		v-if="ssbm.selectionStatus.value !== SelectionStatus.None"
 		class="BuilderSettings"
-		:class="{ collapsed, miniDocsActive }"
+		:class="{
+			'BuilderSettings--collapsed': collapsed,
+			'BuilderSettings--miniDocActive': miniDocsActive,
+		}"
 	>
-		<div class="collapser">
+		<div v-if="ssbm.isSingleSelectionActive.value" class="collapser">
 			<WdsButton
 				v-if="collapsed"
 				class="collapserButton"
@@ -30,7 +33,7 @@
 				></WdsButton
 			>
 		</div>
-		<div class="titleBar">
+		<div v-if="ssbm.isSingleSelectionActive" class="titleBar">
 			<div>{{ componentDefinition.name }}</div>
 			<WdsButton
 				v-if="Boolean(rawMiniDocs)"
@@ -44,6 +47,14 @@
 				><i class="material-symbols-outlined">info</i></WdsButton
 			>
 		</div>
+		<div
+			v-if="ssbm.selectionStatus.value === SelectionStatus.Multiple"
+			class="BuilderSettings__selectionCount"
+			data-writer-tooltip-placement="left"
+			:data-writer-tooltip="`${selectionCount} components selected`"
+		>
+			<p>{{ selectionCount }}</p>
+		</div>
 		<BuilderSettingsMiniDocs
 			v-if="miniDocsActive && rawMiniDocs && !collapsed"
 			class="miniDocs"
@@ -65,13 +76,22 @@ import BuilderSettingsActions from "./BuilderSettingsActions.vue";
 import BuilderSettingsMain from "./BuilderSettingsMain.vue";
 import BuilderSettingsMiniDocs from "./BuilderSettingsMiniDocs.vue";
 import WdsButton from "@/wds/WdsButton.vue";
+import { SelectionStatus } from "../builderManager";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const miniDocsActive = ref(false);
 
-const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
-const collapsed = computed(() => ssbm.isSettingsBarCollapsed.value);
+const component = computed(() =>
+	wf.getComponentById(ssbm.firstSelectedId.value),
+);
+
+const collapsed = computed(() => {
+	if (ssbm.selectionStatus.value === SelectionStatus.Multiple) return true;
+	return ssbm.isSettingsBarCollapsed.value;
+});
+
+const selectionCount = computed(() => ssbm.selection.value.length);
 
 function toggleSettings() {
 	ssbm.isSettingsBarCollapsed.value = !ssbm.isSettingsBarCollapsed.value;
@@ -119,15 +139,26 @@ const toggleMiniDocs = () => {
 	top: v-bind("ssbm.getMode() == `workflows` ? `72px` : `20px`");
 }
 
-.BuilderSettings.collapsed {
+.BuilderSettings--collapsed {
 	margin-right: -357px;
 	max-height: 340px;
+	bottom: unset;
 }
 
-.BuilderSettings:not(.miniDocsActive) {
+.BuilderSettings:not(.BuilderSettings--miniDocActive) {
 	grid-template-rows: min-content 0 auto;
 }
 
+.BuilderSettings__selectionCount {
+	background-color: var(--wdsColorBlue3);
+	color: var(--wdsColorBlue5);
+	font-weight: 700;
+	font-size: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .collapser {
 	grid-row: 1;
 	grid-column: 1;
@@ -190,7 +221,7 @@ const toggleMiniDocs = () => {
 	transition: 0.2s margin linear;
 }
 
-.BuilderSettings.collapsed .main {
+.BuilderSettings--collapsed .main {
 	overflow: hidden;
 	max-height: 400px;
 	margin-top: -400px;
diff --git a/src/ui/src/builder/settings/BuilderSettingsAPICode.vue b/src/ui/src/builder/settings/BuilderSettingsAPICode.vue
index efb16446d..d17edbba4 100644
--- a/src/ui/src/builder/settings/BuilderSettingsAPICode.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsAPICode.vue
@@ -71,7 +71,9 @@ import WdsButton from "@/wds/WdsButton.vue";
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 
-const component = computed(() => wf.getComponentById(wfbm.getSelectedId()));
+const component = computed(() =>
+	wf.getComponentById(wfbm.firstSelectedId.value),
+);
 
 const isWorkflow = computed(
 	() => component.value?.type === "workflows_workflow",
diff --git a/src/ui/src/builder/settings/BuilderSettingsActions.vue b/src/ui/src/builder/settings/BuilderSettingsActions.vue
index 0b17d809a..acc9850fb 100644
--- a/src/ui/src/builder/settings/BuilderSettingsActions.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsActions.vue
@@ -7,6 +7,7 @@
 		:data-writer-id="selectedId"
 	>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			data-writer-tooltip="Add child"
 			data-writer-tooltip-placement="left"
 			variant="neutral"
@@ -21,6 +22,7 @@
 			><i class="material-symbols-outlined">add</i></WdsButton
 		>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			class="actionButton"
 			size="small"
 			variant="neutral"
@@ -35,6 +37,7 @@
 			><i class="material-symbols-outlined">arrow_upward</i></WdsButton
 		>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			class="actionButton"
 			variant="neutral"
 			size="small"
@@ -50,6 +53,7 @@
 			<i class="material-symbols-outlined">arrow_downward</i>
 		</WdsButton>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			class="actionButton"
 			variant="neutral"
 			size="small"
@@ -65,6 +69,7 @@
 			<i class="material-symbols-outlined">cut</i>
 		</WdsButton>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			class="actionButton"
 			variant="neutral"
 			size="small"
@@ -80,6 +85,7 @@
 			<i class="material-symbols-outlined">content_copy</i>
 		</WdsButton>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			class="actionButton"
 			variant="neutral"
 			size="small"
@@ -95,6 +101,7 @@
 			<i class="material-symbols-outlined">content_paste</i>
 		</WdsButton>
 		<WdsButton
+			v-if="ssbm.isSingleSelectionActive.value"
 			class="actionButton"
 			variant="neutral"
 			size="small"
@@ -109,6 +116,18 @@
 		>
 			<i class="material-symbols-outlined">move_up</i>
 		</WdsButton>
+		<WdsButton
+			v-if="ssbm.selectionStatus.value === SelectionStatus.Multiple"
+			class="actionButton"
+			variant="neutral"
+			size="small"
+			data-automation-action="clear-selection"
+			data-writer-tooltip="Clear selection"
+			data-writer-tooltip-placement="left"
+			@click="ssbm.setSelection(null)"
+		>
+			<i class="material-symbols-outlined">close</i>
+		</WdsButton>
 		<WdsButton
 			class="actionButton delete"
 			variant="neutral"
@@ -117,11 +136,7 @@
 			data-writer-tooltip="Delete (Del)"
 			data-writer-tooltip-placement="left"
 			:disabled="!shortcutsInfo?.isDeleteEnabled"
-			@click="
-				shortcutsInfo?.isDeleteEnabled
-					? removeComponentSubtree(selectedId)
-					: undefined
-			"
+			@click="deleteSelectedComponents"
 		>
 			<i class="material-symbols-outlined">delete</i>
 		</WdsButton>
@@ -160,6 +175,7 @@ import injectionKeys from "@/injectionKeys";
 import { getModifierKeyName } from "@/core/detectPlatform";
 import WdsButton from "@/wds/WdsButton.vue";
 import BuilderModal, { ModalAction } from "../BuilderModal.vue";
+import { SelectionStatus } from "../builderManager";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -178,12 +194,21 @@ const {
 	isPasteAllowed,
 	isDeleteAllowed,
 	getEnabledMoves,
-	removeComponentSubtree,
+	removeComponentsSubtree,
 	goToParent,
 } = useComponentActions(wf, ssbm);
 
-const selectedId = computed(() => ssbm.getSelection()?.componentId);
-const selectedInstancePath = computed(() => ssbm.getSelection()?.instancePath);
+function deleteSelectedComponents() {
+	if (!shortcutsInfo.value.isDeleteEnabled) return;
+	const componentIds = ssbm.selection.value.map((c) => c.componentId);
+	if (componentIds.length === 0) return;
+	removeComponentsSubtree(...componentIds);
+}
+
+const selectedId = ssbm.firstSelectedId;
+const selectedInstancePath = computed(
+	() => ssbm.firstSelectedItem.value?.instancePath,
+);
 
 const isAddModalOpen = ref(false);
 
diff --git a/src/ui/src/builder/settings/BuilderSettingsBinding.vue b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
index c2e536d17..cd3d30db2 100644
--- a/src/ui/src/builder/settings/BuilderSettingsBinding.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsBinding">
+	<div v-if="ssbm.isSingleSelectionActive" class="BuilderSettingsBinding">
 		<BuilderSectionTitle icon="link" label="Binding" />
 		<div class="main">
 			<WdsFieldWrapper label="State element" :hint="hint">
@@ -34,7 +34,9 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setBinding } = useComponentActions(wf, ssbm);
 
-const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+const component = computed(() =>
+	wf.getComponentById(ssbm.firstSelectedId.value),
+);
 </script>
 
 <style scoped>
diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index d93c3d43e..13ab6facc 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsHandlers">
+	<div v-if="ssbm.isSingleSelectionActive" class="BuilderSettingsHandlers">
 		<div class="BuilderSettingsHandlers__title">
 			<i class="material-symbols-outlined">bolt</i>
 			<h3>Events</h3>
@@ -120,7 +120,9 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
 const { setHandlerValue } = useComponentActions(wf, ssbm);
-const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+const component = computed(() =>
+	wf.getComponentById(ssbm.firstSelectedId.value),
+);
 
 const options = computed<Option[]>(() => {
 	const userFunctionsOptions: Option[] = userFunctions.value
diff --git a/src/ui/src/builder/settings/BuilderSettingsMain.vue b/src/ui/src/builder/settings/BuilderSettingsMain.vue
index 1bef1f604..b3b082496 100644
--- a/src/ui/src/builder/settings/BuilderSettingsMain.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsMain.vue
@@ -10,12 +10,7 @@
 
 		<div class="sections" :inert="isReadOnly">
 			<BuilderSettingsProperties></BuilderSettingsProperties>
-			<template
-				v-if="
-					!componentDefinition.toolkit ||
-					componentDefinition.toolkit == 'core'
-				"
-			>
+			<template v-if="displaySettings">
 				<BuilderSettingsBinding
 					v-if="isBindable"
 				></BuilderSettingsBinding>
@@ -28,7 +23,9 @@
 		<div class="sections debug">
 			<div>
 				Component id:
-				<BuilderCopyText>{{ ssbm.getSelectedId() }}</BuilderCopyText>
+				<BuilderCopyText>{{
+					ssbm.firstSelectedId.value
+				}}</BuilderCopyText>
 			</div>
 		</div>
 	</div>
@@ -53,9 +50,20 @@ const BuilderSettingsHandlers = defineAsyncComponent({
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
-const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+const component = computed(() =>
+	wf.getComponentById(ssbm.firstSelectedId.value),
+);
 const isReadOnly = computed(() => component.value.isCodeManaged);
 
+const displaySettings = computed(() => {
+	if (!ssbm.isSingleSelectionActive.value) return false;
+
+	return (
+		!componentDefinition.value.toolkit ||
+		componentDefinition.value.toolkit == "core"
+	);
+});
+
 const componentDefinition = computed(() => {
 	const { type } = component.value;
 	const definition = wf.getComponentDefinition(type);
diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index e5c91bab7..a23176d7b 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		v-if="ssbm.isSelectionActive() && fields"
+		v-if="ssbm.isSingleSelectionActive && fields"
 		class="BuilderSettingsProperties"
 	>
 		<div
@@ -131,11 +131,11 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
 const selectedInstancePath = computed<InstancePath>(() =>
-	parseInstancePathString(ssbm.getSelection()?.instancePath),
+	parseInstancePathString(ssbm.firstSelectedItem?.value?.instancePath),
 );
 
 const selectedComponent = computed(() => {
-	return wf.getComponentById(ssbm.getSelectedId());
+	return wf.getComponentById(ssbm.firstSelectedId.value);
 });
 
 const fields = computed(() => {
diff --git a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
index 266f41de6..9747f1a88 100644
--- a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsVisibility">
+	<div v-if="ssbm.isSingleSelectionActive" class="BuilderSettingsVisibility">
 		<BuilderSectionTitle icon="visibility" label="Visibility" />
 		<div class="main">
 			<WdsTabs v-model="tab" :tabs="tabs" />
@@ -88,7 +88,9 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setVisibleValue } = useComponentActions(wf, ssbm);
 
-const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+const component = computed(() =>
+	wf.getComponentById(ssbm.firstSelectedId.value),
+);
 
 const hint =
 	'Reference a state or context element that will evaluate to true or false. Reference the element directly, i.e. use "my_var" instead of "@{my_var}".';
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
index 75808ddfb..bdb0a5afd 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
@@ -72,7 +72,7 @@ import WdsButton from "@/wds/WdsButton.vue";
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const collapsed = ref(false);
-const selected = computed(() => wfbm.getSelectedId() == props.componentId);
+const selected = computed(() => wfbm.isComponentIdSelected(props.componentId));
 const {
 	createAndInsertComponent,
 	moveComponent,
@@ -146,10 +146,10 @@ const name = computed(() => {
 	return def.value?.name ?? `Unknown (${component.value.type})`;
 });
 
-async function select() {
+async function select(ev: MouseEvent | KeyboardEvent) {
 	goToComponentParentPage(props.componentId);
 	await nextTick();
-	wfbm.setSelection(props.componentId, undefined, "tree");
+	wfbm.handleSelectionFromEvent(ev, props.componentId, undefined, "tree");
 	expand();
 }
 
@@ -205,7 +205,7 @@ function toggleCollapse() {
 }
 
 watch(
-	() => wfbm.getSelection(),
+	wfbm.firstSelectedItem,
 	async (newSelection) => {
 		if (!newSelection) return;
 		if (newSelection.componentId !== props.componentId) return;
diff --git a/src/ui/src/builder/useComponentAction.spec.ts b/src/ui/src/builder/useComponentAction.spec.ts
new file mode 100644
index 000000000..4fed9998f
--- /dev/null
+++ b/src/ui/src/builder/useComponentAction.spec.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useComponentActions } from "./useComponentActions";
+import { Core } from "@/writerTypes.js";
+import { generateBuilderManager } from "./builderManager";
+
+describe(useComponentActions.name, () => {
+	let core: Core;
+	let ssbm: ReturnType<typeof generateBuilderManager>;
+
+	beforeEach(() => {
+		ssbm = generateBuilderManager();
+
+		// @ts-expect-error we mock only necessary functions
+		core = {
+			getComponentById: vi
+				.fn()
+				.mockImplementation((id: string) => ({ id })),
+			getComponents: vi.fn().mockReturnValue([]),
+			deleteComponent: vi.fn(),
+			sendComponentUpdate: vi.fn(),
+		};
+	});
+
+	describe("removeComponentSubtree", () => {
+		it("should delete the component in a transaction", () => {
+			const { removeComponentSubtree } = useComponentActions(core, ssbm);
+
+			const openMutationTransaction = vi.spyOn(
+				ssbm,
+				"openMutationTransaction",
+			);
+
+			removeComponentSubtree("1");
+
+			expect(core.sendComponentUpdate).toHaveBeenCalledOnce();
+			expect(openMutationTransaction).toHaveBeenNthCalledWith(
+				1,
+				"delete-1",
+				"Delete",
+			);
+		});
+	});
+
+	describe("removeComponentsSubtree", () => {
+		it("should delete the component in a transaction", () => {
+			const { removeComponentsSubtree } = useComponentActions(core, ssbm);
+
+			const openMutationTransaction = vi.spyOn(
+				ssbm,
+				"openMutationTransaction",
+			);
+
+			removeComponentsSubtree("1", "2", "3");
+
+			expect(core.sendComponentUpdate).toHaveBeenCalledOnce();
+			expect(openMutationTransaction).toHaveBeenNthCalledWith(
+				1,
+				"delete-1,2,3",
+				"Delete",
+			);
+		});
+	});
+});
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 9ca27dc2e..0ed52efa4 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -251,34 +251,51 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	}
 
 	/**
-	 * Removes a component and all its descendents
+	 * Removes multiples components at the same time (including their descendents) inside an unique transaction.
 	 *
 	 * @param componentId Id of the target component
 	 */
-	function removeComponentSubtree(componentId: Component["id"]): void {
-		const component = wf.getComponentById(componentId);
-		if (!component) return;
-		const parentId = wf.getComponentById(componentId).parentId;
+	function removeComponentsSubtree(...componentIds: Component["id"][]): void {
+		const components = componentIds
+			.map((i) => wf.getComponentById(i))
+			.filter(Boolean);
+		if (components.length === 0) return;
 
-		const transactionId = `delete-${componentId}`;
+		const transactionId = `delete-${components.map((c) => c.id).join(",")}`;
 		ssbm.openMutationTransaction(transactionId, `Delete`);
-		if (parentId) {
-			repositionHigherSiblings(component.id, -1);
+
+		for (const component of components) {
+			if (wf.getComponentById(component.id).parentId) {
+				repositionHigherSiblings(component.id, -1);
+			}
+			const dependencies = getNodeDependencies(component.id);
+			for (const c of dependencies) {
+				ssbm.registerPreMutation(c);
+				c.outs = [
+					...c.outs.filter((out) => out.toNodeId !== component.id),
+				];
+			}
+			const subtree = getFlatComponentSubtree(component.id);
+			for (const c of subtree) {
+				ssbm.registerPreMutation(c);
+				wf.deleteComponent(c.id);
+				ssbm.removeSelectedComponentId(c.id);
+			}
 		}
-		const dependencies = getNodeDependencies(componentId);
-		dependencies.map((c) => {
-			ssbm.registerPreMutation(c);
-			c.outs = [...c.outs.filter((out) => out.toNodeId !== componentId)];
-		});
-		const subtree = getFlatComponentSubtree(componentId);
-		subtree.map((c) => {
-			ssbm.registerPreMutation(c);
-			wf.deleteComponent(c.id);
-		});
+
 		ssbm.closeMutationTransaction(transactionId);
 		wf.sendComponentUpdate();
 	}
 
+	/**
+	 * Removes a component and all its descendents
+	 *
+	 * @param componentId Id of the target component
+	 */
+	function removeComponentSubtree(componentId: Component["id"]): void {
+		return removeComponentsSubtree(componentId);
+	}
+
 	/**
 	 * Whether a target component is the root
 	 */
@@ -789,7 +806,11 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		if (!component) return;
 
 		const transactionId = `change-${componentId}-coordinates`;
-		ssbm.openMutationTransaction(transactionId, "Change coordinates", false);
+		ssbm.openMutationTransaction(
+			transactionId,
+			"Change coordinates",
+			false,
+		);
 		ssbm.registerPreMutation(component);
 
 		component.x = Math.floor(x);
@@ -804,14 +825,18 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	 * Change the coordinates of multiple components.
 	 */
 	function changeCoordinatesMultiple(
-		coordinates: Record<Component["id"], {x: number, y: number}>
+		coordinates: Record<Component["id"], { x: number; y: number }>,
 	) {
 		const transactionId = "change-multiple-coordinates";
-		ssbm.openMutationTransaction(transactionId, "Change coordinates", false);
+		ssbm.openMutationTransaction(
+			transactionId,
+			"Change coordinates",
+			false,
+		);
 
-		const entries = Object.entries(coordinates); 
+		const entries = Object.entries(coordinates);
 		if (entries.length == 0) return;
-		entries.forEach(([componentId, {x, y}]) => {
+		entries.forEach(([componentId, { x, y }]) => {
 			const component = wf.getComponentById(componentId);
 			if (!component) return;
 			ssbm.registerPreMutation(component);
@@ -965,6 +990,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		pasteComponent,
 		createAndInsertComponent,
 		removeComponentSubtree,
+		removeComponentsSubtree,
 		isPasteAllowed,
 		undo,
 		redo,
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 868229b8c..946ec7369 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -79,7 +79,7 @@ const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
-const selectedId = computed(() => ssbm?.getSelectedId());
+const selectedId = computed(() => ssbm?.firstSelectedId.value);
 
 const rendererTop = ref(0);
 
diff --git a/src/ui/src/components/core/layout/CoreStep.vue b/src/ui/src/components/core/layout/CoreStep.vue
index 7c331c144..28efff027 100644
--- a/src/ui/src/components/core/layout/CoreStep.vue
+++ b/src/ui/src/components/core/layout/CoreStep.vue
@@ -128,7 +128,7 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
 const { isComponentVisible } = useEvaluator(wf);
-const selectedId = computed(() => ssbm?.getSelectedId());
+const selectedId = computed(() => ssbm?.firstSelectedId.value);
 
 const stepContainerData: Ref<StepsData> = getStepContainerData();
 
diff --git a/src/ui/src/components/core/layout/CoreTab.vue b/src/ui/src/components/core/layout/CoreTab.vue
index 1f9b34643..bbe354169 100644
--- a/src/ui/src/components/core/layout/CoreTab.vue
+++ b/src/ui/src/components/core/layout/CoreTab.vue
@@ -86,7 +86,7 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
 const { isComponentVisible } = useEvaluator(wf);
-const selectedId = computed(() => ssbm?.getSelectedId());
+const selectedId = computed(() => ssbm?.firstSelectedId.value);
 
 const getDirectChildInstanceNegativeIndex = () => {
 	for (let i = -2; i > -1 * instancePath.length; i--) {
diff --git a/src/ui/src/components/core/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
index 3b45f64cb..bb1a9c7f6 100644
--- a/src/ui/src/components/core/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -136,7 +136,7 @@ function handleHashChange() {
 watch(displayedPageId, (newPageId) => {
 	const page = wf.getComponentById(newPageId);
 	const pageKey = page.content?.["key"];
-	if (ssbm && ssbm.getSelectedId() !== newPageId) {
+	if (ssbm && !ssbm.isComponentIdSelected(newPageId)) {
 		ssbm.setSelection(null);
 	}
 	nextTick().then(() => {
diff --git a/src/ui/src/components/workflows/WorkflowsWorkflow.vue b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
index 8e610f219..e494fb53d 100644
--- a/src/ui/src/components/workflows/WorkflowsWorkflow.vue
+++ b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
@@ -19,8 +19,8 @@
 					:is-selected="selectedArrow == arrowId"
 					:is-engaged="
 						selectedArrow == arrowId ||
-						wfbm.getSelectedId() == arrow.fromNodeId ||
-						wfbm.getSelectedId() == arrow.toNodeId
+						wfbm.isComponentIdSelected(arrow.fromNodeId) ||
+						wfbm.isComponentIdSelected(arrow.toNodeId)
 					"
 					@click="handleArrowClick($event, arrowId)"
 					@delete="handleArrowDeleteClick(arrow)"
@@ -137,6 +137,7 @@ import {
 	onMounted,
 	onUnmounted,
 	ref,
+	shallowRef,
 } from "vue";
 import { useComponentActions } from "@/builder/useComponentActions";
 import { useDragDropComponent } from "@/builder/useDragDropComponent";
@@ -150,12 +151,12 @@ const nodeContainerEl: Ref<HTMLElement | null> = ref(null);
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const arrows: Ref<WorkflowArrowData[]> = ref([]);
-const renderOffset = ref({ x: 0, y: 0 });
+const renderOffset = shallowRef({ x: 0, y: 0 });
 const isRunning = ref(false);
 const selectedArrow = ref(null);
 const zoomLevel = ref(ZOOM_SETTINGS.initialLevel);
 const arrowRefresherObserver = new MutationObserver(refreshArrows);
-const temporaryNodeCoordinates = ref<
+const temporaryNodeCoordinates = shallowRef<
 	Record<Component["id"], { x: number; y: number }>
 >({});
 
@@ -170,7 +171,6 @@ const {
 	createAndInsertComponent,
 	addOut,
 	removeOut,
-	changeCoordinates,
 	changeCoordinatesMultiple,
 } = useComponentActions(wf, wfbm);
 const { getComponentInfoFromDrag } = useDragDropComponent(wf);
@@ -484,12 +484,8 @@ function clearActiveOperations() {
 }
 
 function saveNodeMove() {
-	const { nodeId } = activeNodeMove.value;
-	const tempXY = temporaryNodeCoordinates.value?.[nodeId];
-	if (!tempXY) return;
-	const { x, y } = tempXY;
-	changeCoordinates(nodeId, x, y);
-	temporaryNodeCoordinates.value[nodeId] = null;
+	changeCoordinatesMultiple(temporaryNodeCoordinates.value);
+	temporaryNodeCoordinates.value = {};
 }
 
 function moveNode(ev: MouseEvent) {
@@ -500,9 +496,29 @@ function moveNode(ev: MouseEvent) {
 	const newX = Math.floor(x - offset.x);
 	const newY = Math.floor(y - offset.y);
 
-	temporaryNodeCoordinates.value[nodeId] = {
-		x: newX,
-		y: newY,
+	const component = wf.getComponentById(nodeId);
+
+	const translationX = newX - component.x;
+	const translationY = newY - component.y;
+
+	// apply the same vector to other selected components
+	const otherSelectedComponents = wfbm.selection.value
+		.map((c) => wf.getComponentById(c.componentId))
+		.filter(
+			(c) => c.id !== nodeId && c.x !== undefined && c.y !== undefined,
+		)
+		.reduce<Record<string, { x: number; y: number }>>((acc, component) => {
+			acc[component.id] = {
+				x: component.x + translationX,
+				y: component.y + translationY,
+			};
+			return acc;
+		}, {});
+
+	temporaryNodeCoordinates.value = {
+		...temporaryNodeCoordinates.value,
+		...otherSelectedComponents,
+		[nodeId]: { x: newX, y: newY },
 	};
 }
 
@@ -713,18 +729,14 @@ async function resetZoom() {
 	changeRenderOffset(0, 0);
 }
 
-watch(
-	() => wfbm.getSelection(),
-	(newSelection) => {
-		if (!newSelection) return;
-		selectedArrow.value = null;
-		if (!wf.isChildOf(workflowComponentId, newSelection.componentId))
-			return;
-		if (newSelection.source !== "click") {
-			findAndCenterBlock(newSelection.componentId);
-		}
-	},
-);
+watch(wfbm.firstSelectedItem, (newSelection) => {
+	if (!newSelection) return;
+	selectedArrow.value = null;
+	if (!wf.isChildOf(workflowComponentId, newSelection.componentId)) return;
+	if (newSelection.source !== "click") {
+		findAndCenterBlock(newSelection.componentId);
+	}
+});
 
 onMounted(async () => {
 	await resetZoom();
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
index d2e6f1163..5db673f1a 100644
--- a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -91,7 +91,7 @@ const def = computed(() => {
 });
 
 const isEngaged = computed(() => {
-	const isSelected = wfbm.getSelectedId() == componentId;
+	const isSelected = wfbm.isComponentIdSelected(componentId);
 	return isSelected;
 });
 
diff --git a/src/ui/src/components/workflows/base/WorkflowMiniMap.vue b/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
index 5a11d3b9d..5cccd8373 100644
--- a/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
+++ b/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
@@ -29,7 +29,7 @@
 			v-for="miniNode in miniNodes"
 			:key="miniNode.id"
 			class="node"
-			:class="{ selected: wfbm.getSelectedId() == miniNode.id }"
+			:class="{ selected: wfbm.isComponentIdSelected(miniNode.id) }"
 			:style="{
 				top: `${miniNode.top * scale}px`,
 				left: `${miniNode.left * scale}px`,
diff --git a/src/ui/src/renderer/ComponentProxy.vue b/src/ui/src/renderer/ComponentProxy.vue
index 66d19714c..c4da52b21 100644
--- a/src/ui/src/renderer/ComponentProxy.vue
+++ b/src/ui/src/renderer/ComponentProxy.vue
@@ -165,7 +165,7 @@ export default {
 
 		const isSelected = ref(false);
 		watch(
-			() => ssbm?.getSelectedId() == componentId,
+			() => ssbm?.isComponentIdSelected(componentId),
 			(isNowSelected) => {
 				isSelected.value = isNowSelected;
 			},
diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index 8854efd19..e70cc746a 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, Locator } from "@playwright/test";
 
 test.describe("Workflows", () => {
 	let url: string;
@@ -14,7 +14,7 @@ test.describe("Workflows", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url, {waitUntil: "domcontentloaded"});
+		await page.goto(url, { waitUntil: "domcontentloaded" });
 	});
 
 	const inputData = [
@@ -27,9 +27,12 @@ test.describe("Workflows", () => {
 			page,
 		}) => {
 			await page.getByPlaceholder(object).fill(color);
-			await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
-			const rowsLocator = page
-				.locator(".BuilderPanelSwitcher div.row");
+			await page
+				.locator(
+					`[data-automation-action="toggle-panel"][data-automation-key="log"]`,
+				)
+				.click();
+			const rowsLocator = page.locator(".BuilderPanelSwitcher div.row");
 			await expect(rowsLocator).toHaveCount(3);
 			const rowLocator = rowsLocator.filter({ hasText: "Return value" });
 			await rowLocator.getByRole("button", { name: "Details" }).click();
@@ -61,7 +64,9 @@ test.describe("Workflows", () => {
 			.dragTo(page.locator(".WorkflowsWorkflow"), {
 				targetPosition: { x: 100, y: 100 },
 			});
-		const runWorkflowBlock = page.locator(`.WorkflowsNode.wf-type-workflows_runworkflow`);
+		const runWorkflowBlock = page.locator(
+			`.WorkflowsNode.wf-type-workflows_runworkflow`,
+		);
 
 		await page
 			.locator(
@@ -70,25 +75,37 @@ test.describe("Workflows", () => {
 			.dragTo(page.locator(".WorkflowsWorkflow"), {
 				targetPosition: { x: 400, y: 100 },
 			});
-		const returnValueBlock = page.locator(`.WorkflowsNode.wf-type-workflows_returnvalue`);
+		const returnValueBlock = page.locator(
+			`.WorkflowsNode.wf-type-workflows_returnvalue`,
+		);
 
 		await runWorkflowBlock.click();
-		await page.locator(`.BuilderFieldsText[data-automation-key="workflowKey"] input`).fill("repeat_payload");
+		await page
+			.locator(`.BuilderFieldsText[data-automation-key="workflowKey"] input`)
+			.fill("repeat_payload");
 		const payload = "blue";
-		await page.locator(`.BuilderFieldsText[data-automation-key="payload"] textarea`).fill(payload);
+		await page
+			.locator(`.BuilderFieldsText[data-automation-key="payload"] textarea`)
+			.fill(payload);
 		await page.locator(`[data-automation-action="collapse-settings"]`).click();
 
 		await runWorkflowBlock.locator(".ball.success").dragTo(returnValueBlock);
 
 		await returnValueBlock.click();
-		await page.locator(`.BuilderFieldsText[data-automation-key="value"] textarea`).fill("@{result}");
+		await page
+			.locator(`.BuilderFieldsText[data-automation-key="value"] textarea`)
+			.fill("@{result}");
 
 		await page.locator(`[data-automation-action="run-workflow"]`).click();
 
-		await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
+		await page
+			.locator(
+				`[data-automation-action="toggle-panel"][data-automation-key="log"]`,
+			)
+			.click();
 		const rowsLocator = page.locator(".BuilderPanelSwitcher div.row");
 		await expect(rowsLocator).toHaveCount(3);
-		const rowLocator = rowsLocator.filter({ hasText: "Return value" }).first();;
+		const rowLocator = rowsLocator.filter({ hasText: "Return value" }).first();
 		await rowLocator.getByRole("button", { name: "Details" }).click();
 		await expect(page.locator(".BuilderModal")).toBeVisible();
 		const returnValueLocator = page.locator(
@@ -96,4 +113,86 @@ test.describe("Workflows", () => {
 		);
 		await expect(returnValueLocator).toContainText("blue");
 	});
-});
\ No newline at end of file
+
+	test.describe("multiple selection", () => {
+		let runWorkflowBlock: Locator;
+		let returnValueBlock: Locator;
+
+		test.beforeEach(async ({ page }) => {
+			await page
+				.locator(`[data-automation-action="set-mode-workflows"]`)
+				.click();
+			await page.locator(`[data-automation-action="add-workflow"]`).click();
+
+			await page
+				.locator(
+					`.BuilderSidebarToolkit [data-component-type="workflows_runworkflow"]`,
+				)
+				.dragTo(page.locator(".WorkflowsWorkflow"), {
+					targetPosition: { x: 100, y: 100 },
+				});
+			runWorkflowBlock = page.locator(
+				`.WorkflowsNode.wf-type-workflows_runworkflow`,
+			);
+
+			await page
+				.locator(
+					`.BuilderSidebarToolkit [data-component-type="workflows_returnvalue"]`,
+				)
+				.dragTo(page.locator(".WorkflowsWorkflow"), {
+					targetPosition: { x: 400, y: 100 },
+				});
+			returnValueBlock = page.locator(
+				`.WorkflowsNode.wf-type-workflows_returnvalue`,
+			);
+
+			await expect(page.locator(`.WorkflowsNode`)).toHaveCount(2);
+
+			await runWorkflowBlock.click();
+			await returnValueBlock.click({ modifiers: ["Shift"] });
+
+			await expect(page.locator(`.WorkflowsNode.selected`)).toHaveCount(2);
+		});
+
+		test("clear selection", async ({ page }) => {
+			await page
+				.locator(
+					'.BuilderSettingsActions [data-automation-action="clear-selection"]',
+				)
+				.click();
+
+			await expect(page.locator(`.WorkflowsNode.selected`)).toHaveCount(0);
+		});
+
+		test("remove multiple elements", async ({ page }) => {
+			await page
+				.locator('.BuilderSettingsActions [data-automation-action="delete"]')
+				.click();
+
+			await expect(page.locator(`.WorkflowsNode`)).toHaveCount(0);
+		});
+
+		test("drag multiple elements", async ({ page }) => {
+			const returnValueBlockBoundingBefore =
+				await returnValueBlock.boundingBox();
+
+			await runWorkflowBlock.click();
+			await returnValueBlock.click({ modifiers: ["Shift"] });
+
+			await expect(page.locator(`.WorkflowsNode.selected`)).toHaveCount(2);
+
+			await runWorkflowBlock.dragTo(page.locator(".WorkflowsWorkflow"), {
+				targetPosition: { x: 110, y: 110 },
+			});
+
+			const returnValueBlockBounding = await returnValueBlock.boundingBox();
+
+			expect(returnValueBlockBounding?.x).not.toBe(
+				returnValueBlockBoundingBefore?.x,
+			);
+			expect(returnValueBlockBounding?.y).not.toBe(
+				returnValueBlockBoundingBefore?.y,
+			);
+		});
+	});
+});