From 609bc4d97db56edd0299c7733e80ffe0cabe135b Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Sat, 24 Aug 2024 09:24:08 -0400
Subject: [PATCH] refactor(editor): Standardize components sections order
 (no-changelog) (#10540)

---
 packages/@n8n_io/eslint-config/frontend.js    |    6 +
 .../src/components/N8nActionBox/ActionBox.vue |   52 +-
 .../N8nActionDropdown/ActionDropdown.vue      |  108 +-
 .../N8nActionToggle/ActionToggle.vue          |   70 +-
 .../src/components/N8nAlert/Alert.vue         |   50 +-
 .../src/components/N8nAvatar/Avatar.vue       |   32 +-
 .../src/components/N8nBadge/Badge.vue         |   16 +-
 .../src/components/N8nBlockUi/BlockUi.vue     |   20 +-
 .../src/components/N8nButton/Button.vue       |   48 +-
 .../src/components/N8nCallout/Callout.vue     |   34 +-
 .../src/components/N8nCard/Card.vue           |   40 +-
 .../src/components/N8nCheckbox/Checkbox.vue   |   44 +-
 .../N8nCircleLoader/CircleLoader.vue          |   46 +-
 .../src/components/N8nDatatable/Datatable.vue |  124 +-
 .../src/components/N8nFormBox/FormBox.vue     |   80 +-
 .../src/components/N8nFormInput/FormInput.vue |  186 +-
 .../src/components/N8nHeading/Heading.vue     |   12 +-
 .../src/components/N8nIcon/Icon.vue           |   12 +-
 .../components/N8nIconButton/IconButton.vue   |    8 +-
 .../N8nInfoAccordion/InfoAccordion.vue        |   80 +-
 .../src/components/N8nInfoTip/InfoTip.vue     |   68 +-
 .../src/components/N8nInput/Input.vue         |   64 +-
 .../components/N8nInputLabel/InputLabel.vue   |   66 +-
 .../src/components/N8nLink/Link.vue           |   20 +-
 .../src/components/N8nLoading/Loading.vue     |   68 +-
 .../src/components/N8nMarkdown/Markdown.vue   |   40 +-
 .../src/components/N8nMenu/Menu.vue           |  110 +-
 .../src/components/N8nMenuItem/MenuItem.vue   |  128 +-
 .../src/components/N8nNodeIcon/NodeIcon.vue   |   74 +-
 .../src/components/N8nNotice/Notice.vue       |   34 +-
 .../src/components/N8nPulse/Pulse.vue         |    8 +-
 .../N8nRadioButtons/RadioButton.vue           |   32 +-
 .../N8nRadioButtons/RadioButtons.vue          |   34 +-
 .../N8nResizeWrapper/ResizeWrapper.vue        |   26 +-
 .../N8nResizeableSticky/ResizeableSticky.vue  |   34 +-
 .../src/components/N8nRoute/Route.vue         |   28 +-
 .../src/components/N8nSpinner/Spinner.vue     |   24 +-
 .../src/components/N8nSticky/Sticky.vue       |   96 +-
 .../src/components/N8nTabs/Tabs.vue           |  112 +-
 .../src/components/N8nTag/Tag.vue             |   12 +-
 .../src/components/N8nTags/Tags.vue           |   40 +-
 .../src/components/N8nText/Text.vue           |   12 +-
 .../src/components/N8nTooltip/Tooltip.vue     |   44 +-
 .../src/components/N8nTree/Tree.vue           |   56 +-
 .../src/components/N8nUserInfo/UserInfo.vue   |   54 +-
 .../components/N8nUserSelect/UserSelect.vue   |   64 +-
 .../src/components/N8nUsersList/UsersList.vue |   72 +-
 .../src/styleguide/VariableTable.vue          |   34 +-
 .../styleguide/components/SpacingPreview.vue  |   22 +-
 .../editor-ui/src/components/AboutModal.vue   |   86 +-
 .../src/components/ActivationModal.vue        |   72 +-
 packages/editor-ui/src/components/Badge.vue   |   12 +-
 packages/editor-ui/src/components/Banner.vue  |   74 +-
 .../src/components/BinaryDataDisplay.vue      |   40 +-
 .../src/components/BinaryDataDisplayEmbed.vue |   50 +-
 .../src/components/BreakpointsObserver.vue    |   12 +-
 .../src/components/CanvasControls.vue         |   67 +-
 .../src/components/ChangePasswordModal.vue    |   60 +-
 .../CodeNodeEditor/CodeNodeEditor.vue         |   96 +-
 .../src/components/CollectionParameter.vue    |  100 +-
 .../src/components/CollectionWorkflowCard.vue |   14 +-
 .../src/components/CommunityPackageCard.vue   |  126 +-
 .../CommunityPackageInstallModal.vue          |  184 +-
 .../CommunityPackageManageConfirmModal.vue    |   68 +-
 .../src/components/ContactPromptModal.vue     |   68 +-
 .../editor-ui/src/components/CopyInput.vue    |   48 +-
 .../CredentialEdit/CredentialConfig.vue       |  316 +-
 .../CredentialEdit/CredentialDocs.vue         |   48 +-
 .../CredentialEdit/CredentialEdit.vue         |  230 +-
 .../CredentialEdit/CredentialInfo.vue         |   40 +-
 .../CredentialEdit/CredentialInputs.vue       |   50 +-
 .../CredentialEdit/CredentialSharing.ee.vue   |   98 +-
 .../CredentialEdit/GoogleAuthButton.vue       |   16 +-
 .../components/CredentialEdit/OauthButton.vue |   16 +-
 .../src/components/CredentialsSelect.vue      |  100 +-
 .../src/components/CredentialsSelectModal.vue |  118 +-
 .../editor-ui/src/components/Draggable.vue    |   34 +-
 .../src/components/DraggableTarget.vue        |   12 +-
 .../components/DuplicateWorkflowDialog.vue    |   98 +-
 .../src/components/EnterpriseEdition.ee.vue   |   14 +-
 .../ExpandableInput/ExpandableInputBase.vue   |   14 +-
 .../ExpandableInput/ExpandableInputEdit.vue   |   32 +-
 .../ExpandableInputPreview.vue                |   20 +-
 .../src/components/ExpressionEditModal.vue    |  182 +-
 .../ExpressionEditorModalInput.vue            |    8 +-
 .../src/components/ExpressionFunctionIcon.vue |   12 +-
 .../src/components/FeatureComingSoon.vue      |   56 +-
 .../components/FixedCollectionParameter.vue   |  256 +-
 .../editor-ui/src/components/GoBackButton.vue |   14 +-
 .../src/components/HoverableNodeIcon.vue      |   82 +-
 .../src/components/HtmlEditor/HtmlEditor.vue  |   14 +-
 .../src/components/ImportCurlModal.vue        |   82 +-
 .../src/components/InlineNameEdit.vue         |   64 +-
 .../src/components/InlineTextEdit.vue         |   44 +-
 .../editor-ui/src/components/InputPanel.vue   |  270 +-
 .../src/components/IntersectionObserved.vue   |   12 +-
 .../src/components/IntersectionObserver.vue   |   12 +-
 .../src/components/InviteUsersModal.vue       |  124 +-
 .../src/components/JsEditor/JsEditor.vue      |   14 +-
 .../src/components/JsonEditor/JsonEditor.vue  |   14 +-
 packages/editor-ui/src/components/Logo.vue    |    8 +-
 .../src/components/MainHeader/TabBar.vue      |   32 +-
 .../editor-ui/src/components/MainSidebar.vue  |  198 +-
 .../src/components/MfaSetupModal.vue          |  264 +-
 packages/editor-ui/src/components/Modal.vue   |   98 +-
 .../editor-ui/src/components/ModalDrawer.vue  |   36 +-
 .../editor-ui/src/components/ModalRoot.vue    |   26 +-
 .../src/components/MultipleParameter.vue      |  170 +-
 .../src/components/NDVFloatingNodes.vue       |   76 +-
 .../src/components/NDVSubConnections.vue      |  248 +-
 packages/editor-ui/src/components/Node.vue    |  358 +--
 .../Node/NodeCreator/ItemTypes/ActionItem.vue |   44 +-
 .../Node/NodeCreator/ItemTypes/LabelItem.vue  |   12 +-
 .../Node/NodeCreator/ItemTypes/LinkItem.vue   |   20 +-
 .../Node/NodeCreator/ItemTypes/NodeItem.vue   |   85 +-
 .../NodeCreator/ItemTypes/SubcategoryItem.vue |   32 +-
 .../Node/NodeCreator/ItemTypes/ViewItem.vue   |   20 +-
 .../Node/NodeCreator/NodeCreator.vue          |   52 +-
 .../Node/NodeCreator/Panel/NoResults.vue      |   38 +-
 .../Node/NodeCreator/Panel/SearchBar.vue      |   50 +-
 .../src/components/NodeCredentials.vue        |  222 +-
 .../src/components/NodeDetailsView.vue        |  280 +-
 .../src/components/NodeExecuteButton.vue      |   58 +-
 .../editor-ui/src/components/NodeIcon.vue     |   34 +-
 .../editor-ui/src/components/NodeList.vue     |   28 +-
 .../editor-ui/src/components/NodeSettings.vue |  362 +--
 .../src/components/NodeSettingsTabs.vue       |   18 +-
 .../editor-ui/src/components/NodeTitle.vue    |   86 +-
 .../editor-ui/src/components/NodeWebhooks.vue |  102 +-
 .../editor-ui/src/components/OutputPanel.vue  |  208 +-
 .../editor-ui/src/components/PageAlert.vue    |    8 +-
 .../src/components/PanelDragButton.vue        |   62 +-
 .../src/components/ParameterInput.vue         | 1174 ++++----
 .../src/components/ParameterInputExpanded.vue |  112 +-
 .../src/components/ParameterInputFull.vue     |  156 +-
 .../src/components/ParameterInputHint.vue     |   40 +-
 .../src/components/ParameterInputList.vue     |  328 +--
 .../src/components/ParameterInputWrapper.vue  |   94 +-
 .../src/components/ParameterIssues.vue        |   22 +-
 .../src/components/ParameterOptions.vue       |   82 +-
 .../src/components/PersonalizationModal.vue   |  108 +-
 .../PromptMfaCodeModal/PromptMfaCodeModal.vue |   72 +-
 .../src/components/PushConnectionTracker.vue  |   26 +-
 .../ResourceLocator/ResourceLocator.vue       |  292 +-
 .../ResourceLocatorDropdown.vue               |  158 +-
 packages/editor-ui/src/components/RunData.vue | 2598 ++++++++---------
 .../RunDataAi/AiRunContentBlock.vue           |  126 +-
 .../src/components/RunDataAi/RunDataAi.vue    |  128 +-
 .../components/RunDataAi/RunDataAiContent.vue |  146 +-
 .../editor-ui/src/components/RunDataHtml.vue  |    8 +-
 .../editor-ui/src/components/RunDataJson.vue  |  152 +-
 .../src/components/RunDataJsonActions.vue     |   72 +-
 .../editor-ui/src/components/RunDataTable.vue |  326 +--
 packages/editor-ui/src/components/RunInfo.vue |   66 +-
 .../EventDestinationCard.ee.vue               |   94 +-
 .../EventDestinationSettingsModal.ee.vue      |  336 +--
 .../EventSelection.ee.vue                     |  112 +-
 .../src/components/SettingsSidebar.vue        |   44 +-
 .../editor-ui/src/components/ShortenName.vue  |   12 +-
 .../src/components/SqlEditor/SqlEditor.vue    |   26 +-
 packages/editor-ui/src/components/Sticky.vue  |  212 +-
 .../src/components/TagsContainer.vue          |   98 +-
 .../editor-ui/src/components/TagsDropdown.vue |  117 +-
 .../components/TagsManager/TagsManager.vue    |   60 +-
 .../TagsManager/TagsView/TagsTable.vue        |  214 +-
 .../TagsManager/TagsView/TagsTableHeader.vue  |   58 +-
 .../TagsManager/TagsView/TagsView.vue         |   48 +-
 .../editor-ui/src/components/TemplateCard.vue |  102 +-
 .../src/components/TemplateDetails.vue        |  117 +-
 .../src/components/TemplateDetailsBlock.vue   |   12 +-
 .../src/components/TemplateFilters.vue        |   82 +-
 .../editor-ui/src/components/TemplateList.vue |   70 +-
 .../src/components/TemplatesInfoCard.vue      |   28 +-
 .../src/components/TemplatesInfoCarousel.vue  |   76 +-
 .../editor-ui/src/components/TextEdit.vue     |   60 +-
 .../editor-ui/src/components/TitledList.vue   |   13 +-
 .../editor-ui/src/components/TriggerPanel.vue |  218 +-
 .../editor-ui/src/components/UpdatesPanel.vue |   76 +-
 .../editor-ui/src/components/VersionCard.vue  |   38 +-
 .../src/components/WorkerList.ee.vue          |   40 +-
 .../components/Workers/WorkerAccordion.ee.vue |   30 +-
 .../src/components/Workers/WorkerCard.ee.vue  |   70 +-
 .../Workers/WorkerChartsAccordion.ee.vue      |   66 +-
 .../Workers/WorkerJobAccordion.ee.vue         |   36 +-
 .../Workers/WorkerNetAccordion.ee.vue         |   42 +-
 .../WorkflowLMChat/MessageOptionAction.vue    |   22 +-
 .../WorkflowLMChat/MessageOptionTooltip.vue   |   12 +-
 .../WorkflowLMChat/WorkflowLMChat.vue         |  154 +-
 .../src/components/WorkflowPreview.vue        |   48 +-
 .../src/components/WorkflowSettings.vue       |  742 ++---
 .../src/components/WorkflowShareModal.ee.vue  |  236 +-
 .../forms/ResourceFiltersDropdown.vue         |   92 +-
 .../src/components/layouts/PageViewLayout.vue |   18 +-
 .../layouts/ResourcesListLayout.vue           |  294 +-
 packages/editor-ui/src/views/AuthView.vue     |   46 +-
 .../editor-ui/src/views/CanvasAddButton.vue   |   38 +-
 .../src/views/ChangePasswordView.vue          |   20 +-
 .../editor-ui/src/views/CredentialsView.vue   |  126 +-
 packages/editor-ui/src/views/ErrorView.vue    |   36 +-
 .../src/views/ForgotMyPasswordView.vue        |    8 +-
 packages/editor-ui/src/views/MfaView.vue      |  140 +-
 packages/editor-ui/src/views/NodeView.vue     |  438 +--
 .../editor-ui/src/views/SettingsApiView.vue   |  176 +-
 .../src/views/SettingsCommunityNodesView.vue  |   82 +-
 .../src/views/SettingsFakeDoorView.vue        |    8 +-
 .../editor-ui/src/views/SettingsLdapView.vue  |  268 +-
 .../src/views/SettingsLogStreamingView.vue    |  148 +-
 packages/editor-ui/src/views/SetupView.vue    |   18 +-
 packages/editor-ui/src/views/SigninView.vue   |   40 +-
 .../src/views/TemplatesCollectionView.vue     |  102 +-
 .../src/views/TemplatesSearchView.vue         |  166 +-
 .../editor-ui/src/views/TemplatesView.vue     |   32 +-
 .../src/views/TemplatesWorkflowView.vue       |  114 +-
 packages/editor-ui/src/views/WorkerView.vue   |   26 +-
 .../editor-ui/src/views/WorkflowsView.vue     |  322 +-
 215 files changed, 11224 insertions(+), 11213 deletions(-)

diff --git a/packages/@n8n_io/eslint-config/frontend.js b/packages/@n8n_io/eslint-config/frontend.js
index c801a6007cf9f..cd62a6059a352 100644
--- a/packages/@n8n_io/eslint-config/frontend.js
+++ b/packages/@n8n_io/eslint-config/frontend.js
@@ -66,6 +66,12 @@ module.exports = {
 				useAttrs: 'attrs',
 			},
 		],
+		'vue/block-order': [
+			'error',
+			{
+				order: ['script', 'template', 'style'],
+			},
+		],
 
 		// TODO: fix these
 		'@typescript-eslint/no-unsafe-call': 'off',
diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
index 575895ab1585b..c048c3f6438c5 100644
--- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -1,3 +1,29 @@
+<script lang="ts" setup>
+import N8nButton from '../N8nButton';
+import N8nHeading from '../N8nHeading';
+import N8nText from '../N8nText';
+import N8nCallout, { type CalloutTheme } from '../N8nCallout';
+import type { ButtonType } from 'n8n-design-system/types/button';
+import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
+
+interface ActionBoxProps {
+	emoji: string;
+	heading: string;
+	buttonText: string;
+	buttonType: ButtonType;
+	buttonDisabled?: boolean;
+	description: string;
+	calloutText?: string;
+	calloutTheme?: CalloutTheme;
+	calloutIcon?: string;
+}
+
+defineOptions({ name: 'N8nActionBox' });
+withDefaults(defineProps<ActionBoxProps>(), {
+	calloutTheme: 'info',
+});
+</script>
+
 <template>
 	<div :class="['n8n-action-box', $style.container]" data-test-id="action-box">
 		<div v-if="emoji" :class="$style.emoji">
@@ -41,32 +67,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import N8nButton from '../N8nButton';
-import N8nHeading from '../N8nHeading';
-import N8nText from '../N8nText';
-import N8nCallout, { type CalloutTheme } from '../N8nCallout';
-import type { ButtonType } from 'n8n-design-system/types/button';
-import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
-
-interface ActionBoxProps {
-	emoji: string;
-	heading: string;
-	buttonText: string;
-	buttonType: ButtonType;
-	buttonDisabled?: boolean;
-	description: string;
-	calloutText?: string;
-	calloutTheme?: CalloutTheme;
-	calloutIcon?: string;
-}
-
-defineOptions({ name: 'N8nActionBox' });
-withDefaults(defineProps<ActionBoxProps>(), {
-	calloutTheme: 'info',
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	border: 2px dashed var(--color-foreground-base);
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 649d4bc570491..643d677c04f38 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -1,57 +1,3 @@
-<template>
-	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
-		<ElDropdown
-			ref="elementDropdown"
-			:placement="placement"
-			:trigger="trigger"
-			:popper-class="popperClass"
-			:teleported="teleported"
-			:disabled="disabled"
-			@command="onSelect"
-			@visible-change="onVisibleChange"
-		>
-			<slot v-if="$slots.activator" name="activator" />
-			<n8n-icon-button
-				v-else
-				type="tertiary"
-				text
-				:class="$style.activator"
-				:size="activatorSize"
-				:icon="activatorIcon"
-				@blur="onButtonBlur"
-			/>
-
-			<template #dropdown>
-				<ElDropdownMenu :class="$style.userActionsMenu">
-					<ElDropdownItem
-						v-for="item in items"
-						:key="item.id"
-						:command="item.id"
-						:disabled="item.disabled"
-						:divided="item.divided"
-						:class="$style.elementItem"
-					>
-						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
-							<span v-if="item.icon" :class="$style.icon">
-								<N8nIcon :icon="item.icon" :size="iconSize" />
-							</span>
-							<span :class="$style.label">
-								{{ item.label }}
-							</span>
-							<N8nKeyboardShortcut
-								v-if="item.shortcut"
-								v-bind="item.shortcut"
-								:class="$style.shortcut"
-							>
-							</N8nKeyboardShortcut>
-						</div>
-					</ElDropdownItem>
-				</ElDropdownMenu>
-			</template>
-		</ElDropdown>
-	</div>
-</template>
-
 <script lang="ts" setup>
 // This component is visually similar to the ActionToggle component
 // but it offers more options when it comes to dropdown items styling
@@ -129,6 +75,60 @@ const close = () => elementDropdown.value?.handleClose();
 defineExpose({ open, close });
 </script>
 
+<template>
+	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
+		<ElDropdown
+			ref="elementDropdown"
+			:placement="placement"
+			:trigger="trigger"
+			:popper-class="popperClass"
+			:teleported="teleported"
+			:disabled="disabled"
+			@command="onSelect"
+			@visible-change="onVisibleChange"
+		>
+			<slot v-if="$slots.activator" name="activator" />
+			<n8n-icon-button
+				v-else
+				type="tertiary"
+				text
+				:class="$style.activator"
+				:size="activatorSize"
+				:icon="activatorIcon"
+				@blur="onButtonBlur"
+			/>
+
+			<template #dropdown>
+				<ElDropdownMenu :class="$style.userActionsMenu">
+					<ElDropdownItem
+						v-for="item in items"
+						:key="item.id"
+						:command="item.id"
+						:disabled="item.disabled"
+						:divided="item.divided"
+						:class="$style.elementItem"
+					>
+						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
+							<span v-if="item.icon" :class="$style.icon">
+								<N8nIcon :icon="item.icon" :size="iconSize" />
+							</span>
+							<span :class="$style.label">
+								{{ item.label }}
+							</span>
+							<N8nKeyboardShortcut
+								v-if="item.shortcut"
+								v-bind="item.shortcut"
+								:class="$style.shortcut"
+							>
+							</N8nKeyboardShortcut>
+						</div>
+					</ElDropdownItem>
+				</ElDropdownMenu>
+			</template>
+		</ElDropdown>
+	</div>
+</template>
+
 <style lang="scss" module>
 :global(.el-dropdown__list) {
 	.userActionsMenu {
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index 2705b90e87f7f..2885d1c601a69 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -1,3 +1,38 @@
+<script lang="ts" setup>
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
+import type { UserAction } from 'n8n-design-system/types';
+import N8nIcon from '../N8nIcon';
+import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
+
+const SIZE = ['mini', 'small', 'medium'] as const;
+const THEME = ['default', 'dark'] as const;
+
+interface ActionToggleProps {
+	actions?: UserAction[];
+	placement?: Placement;
+	size?: (typeof SIZE)[number];
+	iconSize?: IconSize;
+	theme?: (typeof THEME)[number];
+	iconOrientation?: IconOrientation;
+}
+
+defineOptions({ name: 'N8nActionToggle' });
+withDefaults(defineProps<ActionToggleProps>(), {
+	actions: () => [],
+	placement: 'bottom',
+	size: 'medium',
+	theme: 'default',
+	iconOrientation: 'vertical',
+});
+
+const emit = defineEmits<{
+	action: [value: string];
+	'visible-change': [value: boolean];
+}>();
+const onCommand = (value: string) => emit('action', value);
+const onVisibleChange = (value: boolean) => emit('visible-change', value);
+</script>
+
 <template>
 	<span :class="$style.container" data-test-id="action-toggle" @click.stop.prevent>
 		<ElDropdown
@@ -41,41 +76,6 @@
 	</span>
 </template>
 
-<script lang="ts" setup>
-import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
-import type { UserAction } from 'n8n-design-system/types';
-import N8nIcon from '../N8nIcon';
-import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
-
-const SIZE = ['mini', 'small', 'medium'] as const;
-const THEME = ['default', 'dark'] as const;
-
-interface ActionToggleProps {
-	actions?: UserAction[];
-	placement?: Placement;
-	size?: (typeof SIZE)[number];
-	iconSize?: IconSize;
-	theme?: (typeof THEME)[number];
-	iconOrientation?: IconOrientation;
-}
-
-defineOptions({ name: 'N8nActionToggle' });
-withDefaults(defineProps<ActionToggleProps>(), {
-	actions: () => [],
-	placement: 'bottom',
-	size: 'medium',
-	theme: 'default',
-	iconOrientation: 'vertical',
-});
-
-const emit = defineEmits<{
-	action: [value: string];
-	'visible-change': [value: boolean];
-}>();
-const onCommand = (value: string) => emit('action', value);
-const onVisibleChange = (value: boolean) => emit('visible-change', value);
-</script>
-
 <style lang="scss" module>
 .container > * {
 	line-height: 1;
diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue
index 6c9bc5cee08c7..6a401ecf2faca 100644
--- a/packages/design-system/src/components/N8nAlert/Alert.vue
+++ b/packages/design-system/src/components/N8nAlert/Alert.vue
@@ -1,28 +1,3 @@
-<template>
-	<div :class="alertBoxClassNames" role="alert">
-		<div :class="$style.content">
-			<span v-if="showIcon || $slots.icon" :class="$style.icon">
-				<N8nIcon v-if="showIcon" :icon="icon" />
-				<slot v-else-if="$slots.icon" name="icon" />
-			</span>
-			<div :class="$style.text">
-				<div v-if="$slots.title || title" :class="$style.title">
-					<slot name="title">{{ title }}</slot>
-				</div>
-				<div
-					v-if="$slots.default || description"
-					:class="{ [$style.description]: true, [$style.hasTitle]: $slots.title || title }"
-				>
-					<slot>{{ description }}</slot>
-				</div>
-			</div>
-		</div>
-		<div v-if="$slots.aside" :class="$style.aside">
-			<slot name="aside" />
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -76,6 +51,31 @@ const alertBoxClassNames = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="alertBoxClassNames" role="alert">
+		<div :class="$style.content">
+			<span v-if="showIcon || $slots.icon" :class="$style.icon">
+				<N8nIcon v-if="showIcon" :icon="icon" />
+				<slot v-else-if="$slots.icon" name="icon" />
+			</span>
+			<div :class="$style.text">
+				<div v-if="$slots.title || title" :class="$style.title">
+					<slot name="title">{{ title }}</slot>
+				</div>
+				<div
+					v-if="$slots.default || description"
+					:class="{ [$style.description]: true, [$style.hasTitle]: $slots.title || title }"
+				>
+					<slot>{{ description }}</slot>
+				</div>
+			</div>
+		</div>
+		<div v-if="$slots.aside" :class="$style.aside">
+			<slot name="aside" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 @import '../../css/common/var.scss';
 
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index 9ec104a7ea809..96686abc5061d 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -1,19 +1,3 @@
-<template>
-	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
-		<Avatar
-			v-if="name"
-			:size="getSize(size)"
-			:name="name"
-			variant="marble"
-			:colors="getColors(colors)"
-		/>
-		<div v-else :class="[$style.empty, $style[size]]"></div>
-		<span v-if="firstName || lastName" :class="[$style.initials, $style[`text-${size}`]]">
-			{{ initials }}
-		</span>
-	</span>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import Avatar from 'vue-boring-avatars';
@@ -57,6 +41,22 @@ const sizes: { [size: string]: number } = {
 const getSize = (size: string): number => sizes[size];
 </script>
 
+<template>
+	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
+		<Avatar
+			v-if="name"
+			:size="getSize(size)"
+			:name="name"
+			variant="marble"
+			:colors="getColors(colors)"
+		/>
+		<div v-else :class="[$style.empty, $style[size]]"></div>
+		<span v-if="firstName || lastName" :class="[$style.initials, $style[`text-${size}`]]">
+			{{ initials }}
+		</span>
+	</span>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/design-system/src/components/N8nBadge/Badge.vue b/packages/design-system/src/components/N8nBadge/Badge.vue
index c523ed15a6fc8..245aca5f1723f 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.vue
+++ b/packages/design-system/src/components/N8nBadge/Badge.vue
@@ -1,11 +1,3 @@
-<template>
-	<span :class="['n8n-badge', $style[theme]]">
-		<N8nText :size="size" :bold="bold" :compact="true">
-			<slot></slot>
-		</N8nText>
-	</span>
-</template>
-
 <script lang="ts" setup>
 import type { TextSize } from 'n8n-design-system/types/text';
 import N8nText from '../N8nText';
@@ -34,6 +26,14 @@ withDefaults(defineProps<BadgeProps>(), {
 });
 </script>
 
+<template>
+	<span :class="['n8n-badge', $style[theme]]">
+		<N8nText :size="size" :bold="bold" :compact="true">
+			<slot></slot>
+		</N8nText>
+	</span>
+</template>
+
 <style lang="scss" module>
 .badge {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue
index a4213c9d7d66a..ce41e16d05f1f 100644
--- a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue
+++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+type BlockUiProps = {
+	show: boolean;
+};
+
+withDefaults(defineProps<BlockUiProps>(), {
+	show: false,
+});
+</script>
+
 <template>
 	<transition name="fade" mode="out-in">
 		<div
@@ -9,16 +19,6 @@
 	</transition>
 </template>
 
-<script lang="ts" setup>
-type BlockUiProps = {
-	show: boolean;
-};
-
-withDefaults(defineProps<BlockUiProps>(), {
-	show: false,
-});
-</script>
-
 <style lang="scss" module>
 .uiBlocker {
 	position: absolute;
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index b9387d0c7b47f..b365354e08c92 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -1,27 +1,3 @@
-<template>
-	<component
-		:is="element"
-		:class="classes"
-		:disabled="isDisabled"
-		:aria-disabled="ariaDisabled"
-		:aria-busy="ariaBusy"
-		:href="href"
-		aria-live="polite"
-		v-bind="{
-			...attrs,
-			...(props.nativeType ? { type: props.nativeType } : {}),
-		}"
-	>
-		<span v-if="loading || icon" :class="$style.icon">
-			<N8nSpinner v-if="loading" :size="iconSize" />
-			<N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" />
-		</span>
-		<span v-if="label || $slots.default">
-			<slot>{{ label }}</slot>
-		</span>
-	</component>
-</template>
-
 <script setup lang="ts">
 import { useCssModule, computed, useAttrs, watchEffect } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -75,6 +51,30 @@ const classes = computed(() => {
 });
 </script>
 
+<template>
+	<component
+		:is="element"
+		:class="classes"
+		:disabled="isDisabled"
+		:aria-disabled="ariaDisabled"
+		:aria-busy="ariaBusy"
+		:href="href"
+		aria-live="polite"
+		v-bind="{
+			...attrs,
+			...(props.nativeType ? { type: props.nativeType } : {}),
+		}"
+	>
+		<span v-if="loading || icon" :class="$style.icon">
+			<N8nSpinner v-if="loading" :size="iconSize" />
+			<N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" />
+		</span>
+		<span v-if="label || $slots.default">
+			<slot>{{ label }}</slot>
+		</span>
+	</component>
+</template>
+
 <style lang="scss">
 @import './Button';
 
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
index 9a8e17ddf63a8..1ab024be084f5 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -1,20 +1,3 @@
-<template>
-	<div :class="classes" role="alert">
-		<div :class="$style.messageSection">
-			<div v-if="!iconless" :class="$style.icon">
-				<N8nIcon :icon="getIcon" :size="getIconSize" />
-			</div>
-			<N8nText size="small">
-				<slot />
-			</N8nText>
-			&nbsp;
-			<slot name="actions" />
-		</div>
-
-		<slot name="trailingContent" />
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nText from '../N8nText';
@@ -70,6 +53,23 @@ const getIconSize = computed<IconSize>(() => {
 });
 </script>
 
+<template>
+	<div :class="classes" role="alert">
+		<div :class="$style.messageSection">
+			<div v-if="!iconless" :class="$style.icon">
+				<N8nIcon :icon="getIcon" :size="getIconSize" />
+			</div>
+			<N8nText size="small">
+				<slot />
+			</N8nText>
+			&nbsp;
+			<slot name="actions" />
+		</div>
+
+		<slot name="trailingContent" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .callout {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nCard/Card.vue b/packages/design-system/src/components/N8nCard/Card.vue
index 611fc275abf38..589a7f6c365a2 100644
--- a/packages/design-system/src/components/N8nCard/Card.vue
+++ b/packages/design-system/src/components/N8nCard/Card.vue
@@ -1,3 +1,23 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+
+interface CardProps {
+	hoverable?: boolean;
+}
+
+defineOptions({ name: 'N8nCard' });
+const props = withDefaults(defineProps<CardProps>(), {
+	hoverable: false,
+});
+
+const $style = useCssModule();
+const classes = computed(() => ({
+	card: true,
+	[$style.card]: true,
+	[$style.hoverable]: props.hoverable,
+}));
+</script>
+
 <template>
 	<div :class="classes" v-bind="$attrs">
 		<div v-if="$slots.prepend" :class="$style.icon">
@@ -20,26 +40,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
-
-interface CardProps {
-	hoverable?: boolean;
-}
-
-defineOptions({ name: 'N8nCard' });
-const props = withDefaults(defineProps<CardProps>(), {
-	hoverable: false,
-});
-
-const $style = useCssModule();
-const classes = computed(() => ({
-	card: true,
-	[$style.card]: true,
-	[$style.hoverable]: props.hoverable,
-}));
-</script>
-
 <style lang="scss" module>
 .card {
 	border-radius: var(--border-radius-large);
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index cddfa56ad439c..4e4ff3946c537 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -1,25 +1,3 @@
-<template>
-	<ElCheckbox
-		v-bind="$props"
-		ref="checkbox"
-		:class="['n8n-checkbox', $style.n8nCheckbox]"
-		:disabled="disabled"
-		:indeterminate="indeterminate"
-		:model-value="modelValue"
-		@update:model-value="onUpdateModelValue"
-	>
-		<slot></slot>
-		<N8nInputLabel
-			v-if="label"
-			:label="label"
-			:tooltip-text="tooltipText"
-			:bold="false"
-			:size="labelSize"
-			@click.prevent="onLabelClick"
-		/>
-	</ElCheckbox>
-</template>
-
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElCheckbox } from 'element-plus';
@@ -58,6 +36,28 @@ const onLabelClick = () => {
 };
 </script>
 
+<template>
+	<ElCheckbox
+		v-bind="$props"
+		ref="checkbox"
+		:class="['n8n-checkbox', $style.n8nCheckbox]"
+		:disabled="disabled"
+		:indeterminate="indeterminate"
+		:model-value="modelValue"
+		@update:model-value="onUpdateModelValue"
+	>
+		<slot></slot>
+		<N8nInputLabel
+			v-if="label"
+			:label="label"
+			:tooltip-text="tooltipText"
+			:bold="false"
+			:size="labelSize"
+			@click.prevent="onLabelClick"
+		/>
+	</ElCheckbox>
+</template>
+
 <style lang="scss" module>
 .n8nCheckbox {
 	display: flex !important;
diff --git a/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue b/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
index 7f8e88a0b6f6d..37a890f5355c4 100644
--- a/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
+++ b/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
@@ -1,26 +1,3 @@
-<template>
-	<div class="progress-circle">
-		<svg class="progress-ring" :width="diameter" :height="diameter">
-			<circle
-				:class="$style.progressRingCircle"
-				:stroke-width="strokeWidth"
-				stroke="#DCDFE6"
-				fill="transparent"
-				:r="radius"
-				v-bind="{ cx, cy }"
-			/>
-			<circle
-				:class="$style.progressRingCircle"
-				stroke="#5C4EC2"
-				:stroke-width="strokeWidth"
-				fill="transparent"
-				:r="radius"
-				v-bind="{ cx, cy, style }"
-			/>
-		</svg>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 const props = withDefaults(
@@ -50,6 +27,29 @@ const style = computed(() => ({
 }));
 </script>
 
+<template>
+	<div class="progress-circle">
+		<svg class="progress-ring" :width="diameter" :height="diameter">
+			<circle
+				:class="$style.progressRingCircle"
+				:stroke-width="strokeWidth"
+				stroke="#DCDFE6"
+				fill="transparent"
+				:r="radius"
+				v-bind="{ cx, cy }"
+			/>
+			<circle
+				:class="$style.progressRingCircle"
+				stroke="#5C4EC2"
+				:stroke-width="strokeWidth"
+				fill="transparent"
+				:r="radius"
+				v-bind="{ cx, cy, style }"
+			/>
+		</svg>
+	</div>
+</template>
+
 <style module>
 .progressRingCircle {
 	transition: stroke-dashoffset 0.35s linear;
diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue
index a8e397f23a9e5..38dbf44ab7626 100644
--- a/packages/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -1,65 +1,3 @@
-<template>
-	<div :class="classes" v-bind="$attrs">
-		<table :class="$style.datatable">
-			<thead :class="$style.datatableHeader">
-				<tr>
-					<th
-						v-for="column in columns"
-						:key="column.id"
-						:class="column.classes"
-						:style="getThStyle(column)"
-					>
-						{{ column.label }}
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<template v-for="row in visibleRows">
-					<slot name="row" :columns="columns" :row="row" :get-td-value="getTdValue">
-						<tr :key="row.id">
-							<td v-for="column in columns" :key="column.id" :class="column.classes">
-								<component :is="column.render" v-if="column.render" :row="row" :column="column" />
-								<span v-else>{{ getTdValue(row, column) }}</span>
-							</td>
-						</tr>
-					</slot>
-				</template>
-			</tbody>
-		</table>
-
-		<div :class="$style.pagination">
-			<N8nPagination
-				v-if="totalPages > 1"
-				background
-				:pager-count="5"
-				:page-size="rowsPerPage"
-				layout="prev, pager, next"
-				:total="totalRows"
-				:current-page="currentPage"
-				@update:current-page="onUpdateCurrentPage"
-			/>
-
-			<div :class="$style.pageSizeSelector">
-				<N8nSelect
-					size="mini"
-					:model-value="rowsPerPage"
-					teleported
-					@update:model-value="onRowsPerPageChange"
-				>
-					<template #prepend>{{ t('datatable.pageSize') }}</template>
-					<N8nOption
-						v-for="size in rowsPerPageOptions"
-						:key="size"
-						:label="`${size}`"
-						:value="size"
-					/>
-					<N8nOption :label="`All`" value="*"> </N8nOption>
-				</N8nSelect>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, useCssModule } from 'vue';
 import N8nSelect from '../N8nSelect';
@@ -138,6 +76,68 @@ function getThStyle(column: DatatableColumn) {
 }
 </script>
 
+<template>
+	<div :class="classes" v-bind="$attrs">
+		<table :class="$style.datatable">
+			<thead :class="$style.datatableHeader">
+				<tr>
+					<th
+						v-for="column in columns"
+						:key="column.id"
+						:class="column.classes"
+						:style="getThStyle(column)"
+					>
+						{{ column.label }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-for="row in visibleRows">
+					<slot name="row" :columns="columns" :row="row" :get-td-value="getTdValue">
+						<tr :key="row.id">
+							<td v-for="column in columns" :key="column.id" :class="column.classes">
+								<component :is="column.render" v-if="column.render" :row="row" :column="column" />
+								<span v-else>{{ getTdValue(row, column) }}</span>
+							</td>
+						</tr>
+					</slot>
+				</template>
+			</tbody>
+		</table>
+
+		<div :class="$style.pagination">
+			<N8nPagination
+				v-if="totalPages > 1"
+				background
+				:pager-count="5"
+				:page-size="rowsPerPage"
+				layout="prev, pager, next"
+				:total="totalRows"
+				:current-page="currentPage"
+				@update:current-page="onUpdateCurrentPage"
+			/>
+
+			<div :class="$style.pageSizeSelector">
+				<N8nSelect
+					size="mini"
+					:model-value="rowsPerPage"
+					teleported
+					@update:model-value="onRowsPerPageChange"
+				>
+					<template #prepend>{{ t('datatable.pageSize') }}</template>
+					<N8nOption
+						v-for="size in rowsPerPageOptions"
+						:key="size"
+						:label="`${size}`"
+						:value="size"
+					/>
+					<N8nOption :label="`All`" value="*"> </N8nOption>
+				</N8nSelect>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .datatableWrapper {
 	display: block;
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue
index 7881c4b5c9ba4..54f010a7efebf 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.vue
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue
@@ -1,43 +1,3 @@
-<template>
-	<div :class="['n8n-form-box', $style.container]">
-		<div v-if="title" :class="$style.heading">
-			<N8nHeading size="xlarge">
-				{{ title }}
-			</N8nHeading>
-		</div>
-		<div :class="$style.inputsContainer">
-			<N8nFormInputs
-				:inputs="inputs"
-				:event-bus="formBus"
-				:column-view="true"
-				@update="onUpdateModelValue"
-				@submit="onSubmit"
-			/>
-		</div>
-		<div v-if="secondaryButtonText || buttonText" :class="$style.buttonsContainer">
-			<span v-if="secondaryButtonText" :class="$style.secondaryButtonContainer">
-				<N8nLink size="medium" theme="text" @click="onSecondaryButtonClick">
-					{{ secondaryButtonText }}
-				</N8nLink>
-			</span>
-			<N8nButton
-				v-if="buttonText"
-				:label="buttonText"
-				:loading="buttonLoading"
-				data-test-id="form-submit-button"
-				size="large"
-				@click="onButtonClick"
-			/>
-		</div>
-		<div :class="$style.actionContainer">
-			<N8nLink v-if="redirectText && redirectLink" :to="redirectLink">
-				{{ redirectText }}
-			</N8nLink>
-		</div>
-		<slot></slot>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import N8nFormInputs from '../N8nFormInputs';
 import N8nHeading from '../N8nHeading';
@@ -80,6 +40,46 @@ const onButtonClick = () => formBus.emit('submit');
 const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
 </script>
 
+<template>
+	<div :class="['n8n-form-box', $style.container]">
+		<div v-if="title" :class="$style.heading">
+			<N8nHeading size="xlarge">
+				{{ title }}
+			</N8nHeading>
+		</div>
+		<div :class="$style.inputsContainer">
+			<N8nFormInputs
+				:inputs="inputs"
+				:event-bus="formBus"
+				:column-view="true"
+				@update="onUpdateModelValue"
+				@submit="onSubmit"
+			/>
+		</div>
+		<div v-if="secondaryButtonText || buttonText" :class="$style.buttonsContainer">
+			<span v-if="secondaryButtonText" :class="$style.secondaryButtonContainer">
+				<N8nLink size="medium" theme="text" @click="onSecondaryButtonClick">
+					{{ secondaryButtonText }}
+				</N8nLink>
+			</span>
+			<N8nButton
+				v-if="buttonText"
+				:label="buttonText"
+				:loading="buttonLoading"
+				data-test-id="form-submit-button"
+				size="large"
+				@click="onButtonClick"
+			/>
+		</div>
+		<div :class="$style.actionContainer">
+			<N8nLink v-if="redirectText && redirectLink" :to="redirectLink">
+				{{ redirectText }}
+			</N8nLink>
+		</div>
+		<slot></slot>
+	</div>
+</template>
+
 <style lang="scss" module>
 .heading {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index 569fe030e64e4..0266d8347e8d9 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -1,96 +1,3 @@
-<template>
-	<N8nCheckbox
-		v-if="type === 'checkbox'"
-		ref="inputRef"
-		:label="label"
-		:disabled="disabled"
-		:label-size="labelSize as CheckboxLabelSizePropType"
-		:model-value="modelValue as CheckboxModelValuePropType"
-		@update:model-value="onUpdateModelValue"
-		@focus="onFocus"
-	/>
-	<N8nInputLabel
-		v-else-if="type === 'toggle'"
-		:input-name="name"
-		:label="label"
-		:tooltip-text="tooltipText"
-		:required="required && showRequiredAsterisk"
-	>
-		<template #content>
-			{{ tooltipText }}
-		</template>
-		<ElSwitch
-			:model-value="modelValue as SwitchModelValuePropType"
-			:active-color="activeColor"
-			:inactive-color="inactiveColor"
-			@update:model-value="onUpdateModelValue"
-		></ElSwitch>
-	</N8nInputLabel>
-	<N8nInputLabel
-		v-else
-		:input-name="name"
-		:label="label"
-		:tooltip-text="tooltipText"
-		:required="required && showRequiredAsterisk"
-	>
-		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
-			<slot v-if="hasDefaultSlot" />
-			<N8nSelect
-				v-else-if="type === 'select' || type === 'multi-select'"
-				ref="inputRef"
-				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
-				:model-value="modelValue"
-				:placeholder="placeholder"
-				:multiple="type === 'multi-select'"
-				:disabled="disabled"
-				:name="name"
-				:teleported="teleported"
-				@update:model-value="onUpdateModelValue"
-				@focus="onFocus"
-				@blur="onBlur"
-			>
-				<N8nOption
-					v-for="option in options || []"
-					:key="option.value"
-					:value="option.value"
-					:label="option.label"
-					:disabled="!!option.disabled"
-					size="small"
-				/>
-			</N8nSelect>
-			<N8nInput
-				v-else
-				ref="inputRef"
-				:name="name"
-				:type="type as InputTypePropType"
-				:placeholder="placeholder"
-				:model-value="modelValue as InputModelValuePropType"
-				:maxlength="maxlength"
-				:autocomplete="autocomplete"
-				:disabled="disabled"
-				@update:model-value="onUpdateModelValue"
-				@blur="onBlur"
-				@focus="onFocus"
-			/>
-		</div>
-		<div v-if="showErrors" :class="$style.errors">
-			<span v-text="validationError" />
-			<n8n-link
-				v-if="documentationUrl && documentationText"
-				:to="documentationUrl"
-				:new-window="true"
-				size="small"
-				theme="danger"
-			>
-				{{ documentationText }}
-			</n8n-link>
-		</div>
-		<div v-else-if="infoText" :class="$style.infoText">
-			<span size="small" v-text="infoText" />
-		</div>
-	</N8nInputLabel>
-</template>
-
 <script lang="ts" setup>
 import { computed, reactive, onMounted, ref, watch, useSlots } from 'vue';
 
@@ -271,6 +178,99 @@ watch(
 defineExpose({ inputRef });
 </script>
 
+<template>
+	<N8nCheckbox
+		v-if="type === 'checkbox'"
+		ref="inputRef"
+		:label="label"
+		:disabled="disabled"
+		:label-size="labelSize as CheckboxLabelSizePropType"
+		:model-value="modelValue as CheckboxModelValuePropType"
+		@update:model-value="onUpdateModelValue"
+		@focus="onFocus"
+	/>
+	<N8nInputLabel
+		v-else-if="type === 'toggle'"
+		:input-name="name"
+		:label="label"
+		:tooltip-text="tooltipText"
+		:required="required && showRequiredAsterisk"
+	>
+		<template #content>
+			{{ tooltipText }}
+		</template>
+		<ElSwitch
+			:model-value="modelValue as SwitchModelValuePropType"
+			:active-color="activeColor"
+			:inactive-color="inactiveColor"
+			@update:model-value="onUpdateModelValue"
+		></ElSwitch>
+	</N8nInputLabel>
+	<N8nInputLabel
+		v-else
+		:input-name="name"
+		:label="label"
+		:tooltip-text="tooltipText"
+		:required="required && showRequiredAsterisk"
+	>
+		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
+			<slot v-if="hasDefaultSlot" />
+			<N8nSelect
+				v-else-if="type === 'select' || type === 'multi-select'"
+				ref="inputRef"
+				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
+				:model-value="modelValue"
+				:placeholder="placeholder"
+				:multiple="type === 'multi-select'"
+				:disabled="disabled"
+				:name="name"
+				:teleported="teleported"
+				@update:model-value="onUpdateModelValue"
+				@focus="onFocus"
+				@blur="onBlur"
+			>
+				<N8nOption
+					v-for="option in options || []"
+					:key="option.value"
+					:value="option.value"
+					:label="option.label"
+					:disabled="!!option.disabled"
+					size="small"
+				/>
+			</N8nSelect>
+			<N8nInput
+				v-else
+				ref="inputRef"
+				:name="name"
+				:type="type as InputTypePropType"
+				:placeholder="placeholder"
+				:model-value="modelValue as InputModelValuePropType"
+				:maxlength="maxlength"
+				:autocomplete="autocomplete"
+				:disabled="disabled"
+				@update:model-value="onUpdateModelValue"
+				@blur="onBlur"
+				@focus="onFocus"
+			/>
+		</div>
+		<div v-if="showErrors" :class="$style.errors">
+			<span v-text="validationError" />
+			<n8n-link
+				v-if="documentationUrl && documentationText"
+				:to="documentationUrl"
+				:new-window="true"
+				size="small"
+				theme="danger"
+			>
+				{{ documentationText }}
+			</n8n-link>
+		</div>
+		<div v-else-if="infoText" :class="$style.infoText">
+			<span size="small" v-text="infoText" />
+		</div>
+	</N8nInputLabel>
+</template>
+
 <style lang="scss" module>
 .infoText {
 	margin-top: var(--spacing-2xs);
diff --git a/packages/design-system/src/components/N8nHeading/Heading.vue b/packages/design-system/src/components/N8nHeading/Heading.vue
index d296c3557856e..ef3190b8d3355 100644
--- a/packages/design-system/src/components/N8nHeading/Heading.vue
+++ b/packages/design-system/src/components/N8nHeading/Heading.vue
@@ -1,9 +1,3 @@
-<template>
-	<component :is="tag" :class="['n8n-heading', ...classes]" v-bind="$attrs">
-		<slot></slot>
-	</component>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 
@@ -50,6 +44,12 @@ const classes = computed(() => {
 });
 </script>
 
+<template>
+	<component :is="tag" :class="['n8n-heading', ...classes]" v-bind="$attrs">
+		<slot></slot>
+	</component>
+</template>
+
 <style lang="scss" module>
 .bold {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index e4b431d4dcc66..00e5fed31c847 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -1,9 +1,3 @@
-<template>
-	<N8nText :size="size" :color="color" :compact="true" class="n8n-icon" v-bind="$attrs">
-		<FontAwesomeIcon :icon="icon" :spin="spin" :class="$style[size]" />
-	</N8nText>
-</template>
-
 <script lang="ts" setup>
 import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -24,6 +18,12 @@ withDefaults(defineProps<IconProps>(), {
 });
 </script>
 
+<template>
+	<N8nText :size="size" :color="color" :compact="true" class="n8n-icon" v-bind="$attrs">
+		<FontAwesomeIcon :icon="icon" :spin="spin" :class="$style[size]" />
+	</N8nText>
+</template>
+
 <style lang="scss" module>
 .xlarge {
 	width: var(--font-size-xl) !important;
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index e70527e6c3f80..3d2c0a0541370 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -1,7 +1,3 @@
-<template>
-	<N8nButton square v-bind="{ ...$attrs, ...$props }" />
-</template>
-
 <script lang="ts" setup>
 import type { IconButtonProps } from 'n8n-design-system/types/button';
 import N8nButton from '../N8nButton';
@@ -17,3 +13,7 @@ withDefaults(defineProps<IconButtonProps>(), {
 	active: false,
 });
 </script>
+
+<template>
+	<N8nButton square v-bind="{ ...$attrs, ...$props }" />
+</template>
diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index 6cad6f885fb90..71830b02dcac6 100644
--- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -1,43 +1,3 @@
-<template>
-	<div :class="['accordion', $style.container]">
-		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
-			<N8nIcon
-				v-if="headerIcon"
-				:icon="headerIcon.icon"
-				:color="headerIcon.color"
-				size="small"
-				class="mr-2xs"
-			/>
-			<N8nText :class="$style.headerText" color="text-base" size="small" align="left" bold>{{
-				title
-			}}</N8nText>
-			<N8nIcon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
-		</div>
-		<div
-			v-if="expanded"
-			:class="{ [$style.description]: true, [$style.collapsed]: !expanded }"
-			@click="onClick"
-		>
-			<!-- Info accordion can display list of items with icons or just a HTML description -->
-			<div v-if="items.length > 0" :class="$style.accordionItems">
-				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
-					<n8n-tooltip :disabled="!item.tooltip">
-						<template #content>
-							<div @click="onTooltipClick(item.id, $event)" v-html="item.tooltip"></div>
-						</template>
-						<N8nIcon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
-					</n8n-tooltip>
-					<N8nText size="small" color="text-base">{{ item.label }}</N8nText>
-				</div>
-			</div>
-			<N8nText color="text-base" size="small" align="left">
-				<span v-html="description"></span>
-			</N8nText>
-			<slot name="customContent"></slot>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import N8nText from '../N8nText';
@@ -90,6 +50,46 @@ const onClick = (e: MouseEvent) => emit('click:body', e);
 const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick', item, event);
 </script>
 
+<template>
+	<div :class="['accordion', $style.container]">
+		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
+			<N8nIcon
+				v-if="headerIcon"
+				:icon="headerIcon.icon"
+				:color="headerIcon.color"
+				size="small"
+				class="mr-2xs"
+			/>
+			<N8nText :class="$style.headerText" color="text-base" size="small" align="left" bold>{{
+				title
+			}}</N8nText>
+			<N8nIcon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
+		</div>
+		<div
+			v-if="expanded"
+			:class="{ [$style.description]: true, [$style.collapsed]: !expanded }"
+			@click="onClick"
+		>
+			<!-- Info accordion can display list of items with icons or just a HTML description -->
+			<div v-if="items.length > 0" :class="$style.accordionItems">
+				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
+					<n8n-tooltip :disabled="!item.tooltip">
+						<template #content>
+							<div @click="onTooltipClick(item.id, $event)" v-html="item.tooltip"></div>
+						</template>
+						<N8nIcon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
+					</n8n-tooltip>
+					<N8nText size="small" color="text-base">{{ item.label }}</N8nText>
+				</div>
+			</div>
+			<N8nText color="text-base" size="small" align="left">
+				<span v-html="description"></span>
+			</N8nText>
+			<slot name="customContent"></slot>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	background-color: var(--color-background-base);
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
index a537a4ffc5ec6..c551000006b42 100644
--- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -1,37 +1,3 @@
-<template>
-	<div
-		:class="{
-			'n8n-info-tip': true,
-			[$style.infoTip]: true,
-			[$style[theme]]: true,
-			[$style[type]]: true,
-			[$style.bold]: bold,
-		}"
-	>
-		<N8nTooltip
-			v-if="type === 'tooltip'"
-			:placement="tooltipPlacement"
-			:popper-class="$style.tooltipPopper"
-			:disabled="type !== 'tooltip'"
-		>
-			<span :class="$style.iconText" :style="{ color: iconData.color }">
-				<N8nIcon :icon="iconData.icon" />
-			</span>
-			<template #content>
-				<span>
-					<slot />
-				</span>
-			</template>
-		</N8nTooltip>
-		<span v-else :class="$style.iconText">
-			<N8nIcon :icon="iconData.icon" />
-			<span>
-				<slot />
-			</span>
-		</span>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import type { Placement } from 'element-plus';
@@ -92,6 +58,40 @@ const iconData = computed((): { icon: string; color: string } => {
 });
 </script>
 
+<template>
+	<div
+		:class="{
+			'n8n-info-tip': true,
+			[$style.infoTip]: true,
+			[$style[theme]]: true,
+			[$style[type]]: true,
+			[$style.bold]: bold,
+		}"
+	>
+		<N8nTooltip
+			v-if="type === 'tooltip'"
+			:placement="tooltipPlacement"
+			:popper-class="$style.tooltipPopper"
+			:disabled="type !== 'tooltip'"
+		>
+			<span :class="$style.iconText" :style="{ color: iconData.color }">
+				<N8nIcon :icon="iconData.icon" />
+			</span>
+			<template #content>
+				<span>
+					<slot />
+				</span>
+			</template>
+		</N8nTooltip>
+		<span v-else :class="$style.iconText">
+			<N8nIcon :icon="iconData.icon" />
+			<span>
+				<slot />
+			</span>
+		</span>
+	</div>
+</template>
+
 <style lang="scss" module>
 .infoTip {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 7b600709ba703..e4a3f57af1904 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -1,35 +1,3 @@
-<template>
-	<ElInput
-		ref="innerInput"
-		:model-value="modelValue"
-		:type="type"
-		:size="resolvedSize"
-		:class="['n8n-input', ...classes]"
-		:autocomplete="autocomplete"
-		:name="name"
-		:placeholder="placeholder"
-		:disabled="disabled"
-		:readonly="readonly"
-		:clearable="clearable"
-		:rows="rows"
-		:title="title"
-		v-bind="$attrs"
-	>
-		<template v-if="$slots.prepend" #prepend>
-			<slot name="prepend" />
-		</template>
-		<template v-if="$slots.append" #append>
-			<slot name="append" />
-		</template>
-		<template v-if="$slots.prefix" #prefix>
-			<slot name="prefix" />
-		</template>
-		<template v-if="$slots.suffix" #suffix>
-			<slot name="suffix" />
-		</template>
-	</ElInput>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { ElInput } from 'element-plus';
@@ -96,6 +64,38 @@ const select = () => inputElement.value?.select();
 defineExpose({ focus, blur, select });
 </script>
 
+<template>
+	<ElInput
+		ref="innerInput"
+		:model-value="modelValue"
+		:type="type"
+		:size="resolvedSize"
+		:class="['n8n-input', ...classes]"
+		:autocomplete="autocomplete"
+		:name="name"
+		:placeholder="placeholder"
+		:disabled="disabled"
+		:readonly="readonly"
+		:clearable="clearable"
+		:rows="rows"
+		:title="title"
+		v-bind="$attrs"
+	>
+		<template v-if="$slots.prepend" #prepend>
+			<slot name="prepend" />
+		</template>
+		<template v-if="$slots.append" #append>
+			<slot name="append" />
+		</template>
+		<template v-if="$slots.prefix" #prefix>
+			<slot name="prefix" />
+		</template>
+		<template v-if="$slots.suffix" #suffix>
+			<slot name="suffix" />
+		</template>
+	</ElInput>
+</template>
+
 <style lang="scss" module>
 .xlarge {
 	--input-font-size: var(--font-size-m);
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 795a6846501a4..d8f1845da368f 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -1,3 +1,36 @@
+<script lang="ts" setup>
+import N8nText from '../N8nText';
+import N8nIcon from '../N8nIcon';
+import N8nTooltip from '../N8nTooltip';
+import type { TextColor } from 'n8n-design-system/types/text';
+
+const SIZE = ['small', 'medium'] as const;
+
+interface InputLabelProps {
+	compact?: boolean;
+	color?: TextColor;
+	label?: string;
+	tooltipText?: string;
+	inputName?: string;
+	required?: boolean;
+	bold?: boolean;
+	size?: (typeof SIZE)[number];
+	underline?: boolean;
+	showTooltip?: boolean;
+	showOptions?: boolean;
+}
+
+defineOptions({ name: 'N8nInputLabel' });
+withDefaults(defineProps<InputLabelProps>(), {
+	compact: false,
+	bold: true,
+	size: 'medium',
+});
+
+const addTargetBlank = (html: string) =>
+	html && html.includes('href=') ? html.replace(/href=/g, 'target="_blank" href=') : html;
+</script>
+
 <template>
 	<div :class="$style.container" v-bind="$attrs" data-test-id="input-label">
 		<label
@@ -45,39 +78,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import N8nText from '../N8nText';
-import N8nIcon from '../N8nIcon';
-import N8nTooltip from '../N8nTooltip';
-import type { TextColor } from 'n8n-design-system/types/text';
-
-const SIZE = ['small', 'medium'] as const;
-
-interface InputLabelProps {
-	compact?: boolean;
-	color?: TextColor;
-	label?: string;
-	tooltipText?: string;
-	inputName?: string;
-	required?: boolean;
-	bold?: boolean;
-	size?: (typeof SIZE)[number];
-	underline?: boolean;
-	showTooltip?: boolean;
-	showOptions?: boolean;
-}
-
-defineOptions({ name: 'N8nInputLabel' });
-withDefaults(defineProps<InputLabelProps>(), {
-	compact: false,
-	bold: true,
-	size: 'medium',
-});
-
-const addTargetBlank = (html: string) =>
-	html && html.includes('href=') ? html.replace(/href=/g, 'target="_blank" href=') : html;
-</script>
-
 <style lang="scss" module>
 .container {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index 891aef5e16bfb..4c325f6473195 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -1,13 +1,3 @@
-<template>
-	<N8nRoute :to="to" :new-window="newWindow" v-bind="$attrs" class="n8n-link">
-		<span :class="$style[`${underline ? `${theme}-underline` : theme}`]">
-			<N8nText :size="size" :bold="bold">
-				<slot></slot>
-			</N8nText>
-		</span>
-	</N8nRoute>
-</template>
-
 <script lang="ts" setup>
 import type { RouteLocationRaw } from 'vue-router';
 import N8nText from '../N8nText';
@@ -35,6 +25,16 @@ withDefaults(defineProps<LinkProps>(), {
 });
 </script>
 
+<template>
+	<N8nRoute :to="to" :new-window="newWindow" v-bind="$attrs" class="n8n-link">
+		<span :class="$style[`${underline ? `${theme}-underline` : theme}`]">
+			<N8nText :size="size" :bold="bold">
+				<slot></slot>
+			</N8nText>
+		</span>
+	</N8nRoute>
+</template>
+
 <style lang="scss" module>
 @import '../../utils';
 @import '../../css/common/var';
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
index 0f33b169cd0f5..50bcc94e82c84 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.vue
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -1,3 +1,37 @@
+<script lang="ts" setup>
+import { ElSkeleton, ElSkeletonItem } from 'element-plus';
+
+const VARIANT = [
+	'custom',
+	'p',
+	'text',
+	'h1',
+	'h3',
+	'text',
+	'caption',
+	'button',
+	'image',
+	'circle',
+	'rect',
+] as const;
+
+interface LoadingProps {
+	animated?: boolean;
+	loading?: boolean;
+	rows?: number;
+	shrinkLast?: boolean;
+	variant?: (typeof VARIANT)[number];
+}
+
+withDefaults(defineProps<LoadingProps>(), {
+	animated: true,
+	loading: true,
+	rows: 1,
+	shrinkLast: true,
+	variant: 'p',
+});
+</script>
+
 <template>
 	<ElSkeleton
 		:loading="loading"
@@ -35,40 +69,6 @@
 	</ElSkeleton>
 </template>
 
-<script lang="ts" setup>
-import { ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-const VARIANT = [
-	'custom',
-	'p',
-	'text',
-	'h1',
-	'h3',
-	'text',
-	'caption',
-	'button',
-	'image',
-	'circle',
-	'rect',
-] as const;
-
-interface LoadingProps {
-	animated?: boolean;
-	loading?: boolean;
-	rows?: number;
-	shrinkLast?: boolean;
-	variant?: (typeof VARIANT)[number];
-}
-
-withDefaults(defineProps<LoadingProps>(), {
-	animated: true,
-	loading: true,
-	rows: 1,
-	shrinkLast: true,
-	variant: 'p',
-});
-</script>
-
 <style lang="scss" module>
 .h1Last {
 	width: 40%;
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index 07c8ecc9339c5..c953ff9d657e5 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -1,23 +1,3 @@
-<template>
-	<div class="n8n-markdown">
-		<div
-			v-if="!loading"
-			ref="editor"
-			:class="$style[theme]"
-			@click="onClick"
-			@mousedown="onMouseDown"
-			@change="onChange"
-			v-html="htmlContent"
-		/>
-		<div v-else :class="$style.markdown">
-			<div v-for="(_, index) in loadingBlocks" :key="index">
-				<N8nLoading :loading="loading" :rows="loadingRows" animated variant="p" />
-				<div :class="$style.spacer" />
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import type { Options as MarkdownOptions } from 'markdown-it';
@@ -213,6 +193,26 @@ const onCheckboxChange = (index: number) => {
 };
 </script>
 
+<template>
+	<div class="n8n-markdown">
+		<div
+			v-if="!loading"
+			ref="editor"
+			:class="$style[theme]"
+			@click="onClick"
+			@mousedown="onMouseDown"
+			@change="onChange"
+			v-html="htmlContent"
+		/>
+		<div v-else :class="$style.markdown">
+			<div v-for="(_, index) in loadingBlocks" :key="index">
+				<N8nLoading :loading="loading" :rows="loadingRows" animated variant="p" />
+				<div :class="$style.spacer" />
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .markdown {
 	color: var(--color-text-base);
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 0075663e6de07..56c8b2d0ab7a2 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -1,58 +1,3 @@
-<template>
-	<div
-		:class="{
-			['menu-container']: true,
-			[$style.container]: true,
-			[$style.menuCollapsed]: collapsed,
-			[$style.transparentBackground]: transparentBackground,
-		}"
-	>
-		<div v-if="$slots.header" :class="$style.menuHeader">
-			<slot name="header"></slot>
-		</div>
-		<div :class="$style.menuContent">
-			<div :class="{ [$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix }">
-				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
-					<slot name="menuPrefix"></slot>
-				</div>
-				<ElMenu :default-active="defaultActive" :collapse="collapsed">
-					<N8nMenuItem
-						v-for="item in upperMenuItems"
-						:key="item.id"
-						:item="item"
-						:compact="collapsed"
-						:tooltip-delay="tooltipDelay"
-						:mode="mode"
-						:active-tab="activeTab"
-						:handle-select="onSelect"
-					/>
-				</ElMenu>
-			</div>
-			<div :class="[$style.lowerContent, 'pb-2xs']">
-				<slot name="beforeLowerMenu"></slot>
-				<ElMenu :default-active="defaultActive" :collapse="collapsed">
-					<N8nMenuItem
-						v-for="item in lowerMenuItems"
-						:key="item.id"
-						:item="item"
-						:compact="collapsed"
-						:tooltip-delay="tooltipDelay"
-						:mode="mode"
-						:active-tab="activeTab"
-						:handle-select="onSelect"
-					/>
-				</ElMenu>
-				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
-					<slot name="menuSuffix"></slot>
-				</div>
-			</div>
-		</div>
-		<div v-if="$slots.footer" :class="$style.menuFooter">
-			<slot name="footer"></slot>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
@@ -125,6 +70,61 @@ const onSelect = (item: IMenuItem): void => {
 };
 </script>
 
+<template>
+	<div
+		:class="{
+			['menu-container']: true,
+			[$style.container]: true,
+			[$style.menuCollapsed]: collapsed,
+			[$style.transparentBackground]: transparentBackground,
+		}"
+	>
+		<div v-if="$slots.header" :class="$style.menuHeader">
+			<slot name="header"></slot>
+		</div>
+		<div :class="$style.menuContent">
+			<div :class="{ [$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix }">
+				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
+					<slot name="menuPrefix"></slot>
+				</div>
+				<ElMenu :default-active="defaultActive" :collapse="collapsed">
+					<N8nMenuItem
+						v-for="item in upperMenuItems"
+						:key="item.id"
+						:item="item"
+						:compact="collapsed"
+						:tooltip-delay="tooltipDelay"
+						:mode="mode"
+						:active-tab="activeTab"
+						:handle-select="onSelect"
+					/>
+				</ElMenu>
+			</div>
+			<div :class="[$style.lowerContent, 'pb-2xs']">
+				<slot name="beforeLowerMenu"></slot>
+				<ElMenu :default-active="defaultActive" :collapse="collapsed">
+					<N8nMenuItem
+						v-for="item in lowerMenuItems"
+						:key="item.id"
+						:item="item"
+						:compact="collapsed"
+						:tooltip-delay="tooltipDelay"
+						:mode="mode"
+						:active-tab="activeTab"
+						:handle-select="onSelect"
+					/>
+				</ElMenu>
+				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
+					<slot name="menuSuffix"></slot>
+				</div>
+			</div>
+		</div>
+		<div v-if="$slots.footer" :class="$style.menuFooter">
+			<slot name="footer"></slot>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	height: 100%;
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index a0a5c75a6f6cc..f4f01b16d9cc5 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,3 +1,67 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElSubMenu, ElMenuItem } from 'element-plus';
+import N8nTooltip from '../N8nTooltip';
+import N8nIcon from '../N8nIcon';
+import ConditionalRouterLink from '../ConditionalRouterLink';
+import type { IMenuItem } from '../../types';
+import { doesMenuItemMatchCurrentRoute } from './routerUtil';
+import { getInitials } from '../../utils/labelUtil';
+
+interface MenuItemProps {
+	item: IMenuItem;
+	compact?: boolean;
+	tooltipDelay?: number;
+	popperClass?: string;
+	mode?: 'router' | 'tabs';
+	activeTab?: string;
+	handleSelect?: (item: IMenuItem) => void;
+}
+
+const props = withDefaults(defineProps<MenuItemProps>(), {
+	compact: false,
+	tooltipDelay: 300,
+	popperClass: '',
+	mode: 'router',
+});
+
+const $style = useCssModule();
+const $route = useRoute();
+
+const availableChildren = computed((): IMenuItem[] =>
+	Array.isArray(props.item.children)
+		? props.item.children.filter((child) => child.available !== false)
+		: [],
+);
+
+const currentRoute = computed(() => {
+	return $route ?? { name: '', path: '' };
+});
+
+const submenuPopperClass = computed((): string => {
+	const popperClass = [$style.submenuPopper, props.popperClass];
+	if (props.compact) {
+		popperClass.push($style.compact);
+	}
+	return popperClass.join(' ');
+});
+
+const isActive = (item: IMenuItem): boolean => {
+	if (props.mode === 'router') {
+		return doesMenuItemMatchCurrentRoute(item, currentRoute.value);
+	} else {
+		return item.id === props.activeTab;
+	}
+};
+
+const isItemActive = (item: IMenuItem): boolean => {
+	const hasActiveChild =
+		Array.isArray(item.children) && item.children.some((child) => isActive(child));
+	return isActive(item) || hasActiveChild;
+};
+</script>
+
 <template>
 	<div :class="['n8n-menu-item', $style.item]">
 		<ElSubMenu
@@ -88,70 +152,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
-import { useRoute } from 'vue-router';
-import { ElSubMenu, ElMenuItem } from 'element-plus';
-import N8nTooltip from '../N8nTooltip';
-import N8nIcon from '../N8nIcon';
-import ConditionalRouterLink from '../ConditionalRouterLink';
-import type { IMenuItem } from '../../types';
-import { doesMenuItemMatchCurrentRoute } from './routerUtil';
-import { getInitials } from '../../utils/labelUtil';
-
-interface MenuItemProps {
-	item: IMenuItem;
-	compact?: boolean;
-	tooltipDelay?: number;
-	popperClass?: string;
-	mode?: 'router' | 'tabs';
-	activeTab?: string;
-	handleSelect?: (item: IMenuItem) => void;
-}
-
-const props = withDefaults(defineProps<MenuItemProps>(), {
-	compact: false,
-	tooltipDelay: 300,
-	popperClass: '',
-	mode: 'router',
-});
-
-const $style = useCssModule();
-const $route = useRoute();
-
-const availableChildren = computed((): IMenuItem[] =>
-	Array.isArray(props.item.children)
-		? props.item.children.filter((child) => child.available !== false)
-		: [],
-);
-
-const currentRoute = computed(() => {
-	return $route ?? { name: '', path: '' };
-});
-
-const submenuPopperClass = computed((): string => {
-	const popperClass = [$style.submenuPopper, props.popperClass];
-	if (props.compact) {
-		popperClass.push($style.compact);
-	}
-	return popperClass.join(' ');
-});
-
-const isActive = (item: IMenuItem): boolean => {
-	if (props.mode === 'router') {
-		return doesMenuItemMatchCurrentRoute(item, currentRoute.value);
-	} else {
-		return item.id === props.activeTab;
-	}
-};
-
-const isItemActive = (item: IMenuItem): boolean => {
-	const hasActiveChild =
-		Array.isArray(item.children) && item.children.some((child) => isActive(child));
-	return isActive(item) || hasActiveChild;
-};
-</script>
-
 <style module lang="scss">
 // Element menu-item overrides
 :global(.el-menu-item),
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index 7ba2287fe65e7..be173979d47b2 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -1,40 +1,3 @@
-<template>
-	<div class="n8n-node-icon" v-bind="$attrs">
-		<div
-			:class="{
-				[$style.nodeIconWrapper]: true,
-				[$style.circle]: circle,
-				[$style.disabled]: disabled,
-			}"
-			:style="iconStyleData"
-		>
-			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
-			<N8nTooltip v-if="showTooltip" :placement="tooltipPosition" :disabled="!showTooltip">
-				<template #content>{{ nodeTypeName }}</template>
-				<div v-if="type !== 'unknown'" :class="$style.icon">
-					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon v-else :icon="`${name}`" :class="$style.iconFa" :style="fontStyleData" />
-				</div>
-				<div v-else :class="$style.nodeIconPlaceholder">
-					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
-				</div>
-			</N8nTooltip>
-			<template v-else>
-				<div v-if="type !== 'unknown'" :class="$style.icon">
-					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon v-else :icon="`${name}`" :style="fontStyleData" />
-					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
-						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
-					</div>
-				</div>
-				<div v-else :class="$style.nodeIconPlaceholder">
-					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
-				</div>
-			</template>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -107,6 +70,43 @@ const badgeStyleData = computed((): Record<string, string> => {
 });
 </script>
 
+<template>
+	<div class="n8n-node-icon" v-bind="$attrs">
+		<div
+			:class="{
+				[$style.nodeIconWrapper]: true,
+				[$style.circle]: circle,
+				[$style.disabled]: disabled,
+			}"
+			:style="iconStyleData"
+		>
+			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
+			<N8nTooltip v-if="showTooltip" :placement="tooltipPosition" :disabled="!showTooltip">
+				<template #content>{{ nodeTypeName }}</template>
+				<div v-if="type !== 'unknown'" :class="$style.icon">
+					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
+					<FontAwesomeIcon v-else :icon="`${name}`" :class="$style.iconFa" :style="fontStyleData" />
+				</div>
+				<div v-else :class="$style.nodeIconPlaceholder">
+					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
+				</div>
+			</N8nTooltip>
+			<template v-else>
+				<div v-if="type !== 'unknown'" :class="$style.icon">
+					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
+					<FontAwesomeIcon v-else :icon="`${name}`" :style="fontStyleData" />
+					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
+						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
+					</div>
+				</div>
+				<div v-else :class="$style.nodeIconPlaceholder">
+					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .nodeIconWrapper {
 	width: var(--node-icon-size, 26px);
diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 82d778d760498..eb27aa2efdf8f 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -1,20 +1,3 @@
-<template>
-	<div :id="id" :class="classes" role="alert" @click="onClick">
-		<div class="notice-content">
-			<N8nText size="small" :compact="true">
-				<slot>
-					<span
-						:id="`${id}-content`"
-						:class="showFullContent ? $style['expanded'] : $style['truncated']"
-						role="region"
-						v-html="displayContent"
-					/>
-				</slot>
-			</N8nText>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, useCssModule } from 'vue';
 import sanitize from 'sanitize-html';
@@ -81,6 +64,23 @@ const onClick = (event: MouseEvent) => {
 };
 </script>
 
+<template>
+	<div :id="id" :class="classes" role="alert" @click="onClick">
+		<div class="notice-content">
+			<N8nText size="small" :compact="true">
+				<slot>
+					<span
+						:id="`${id}-content`"
+						:class="showFullContent ? $style['expanded'] : $style['truncated']"
+						role="region"
+						v-html="displayContent"
+					/>
+				</slot>
+			</N8nText>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .notice {
 	font-size: var(--font-size-2xs);
diff --git a/packages/design-system/src/components/N8nPulse/Pulse.vue b/packages/design-system/src/components/N8nPulse/Pulse.vue
index 125bfb1535c0a..3ee098456163c 100644
--- a/packages/design-system/src/components/N8nPulse/Pulse.vue
+++ b/packages/design-system/src/components/N8nPulse/Pulse.vue
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+defineOptions({ name: 'N8nPulse' });
+</script>
+
 <template>
 	<div :class="['pulse', $style.pulseContainer]">
 		<div :class="$style.pulse">
@@ -8,10 +12,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-defineOptions({ name: 'N8nPulse' });
-</script>
-
 <style lang="scss" module>
 $--light-pulse-color: hsla(
 	var(--color-primary-h),
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
index 37137793b552d..5be4090469bfb 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+interface RadioButtonProps {
+	label: string;
+	value: string;
+	active?: boolean;
+	disabled?: boolean;
+	size?: 'small' | 'medium';
+}
+
+withDefaults(defineProps<RadioButtonProps>(), {
+	active: false,
+	disabled: false,
+	size: 'medium',
+});
+</script>
+
 <template>
 	<label
 		role="radio"
@@ -23,22 +39,6 @@
 	</label>
 </template>
 
-<script lang="ts" setup>
-interface RadioButtonProps {
-	label: string;
-	value: string;
-	active?: boolean;
-	disabled?: boolean;
-	size?: 'small' | 'medium';
-}
-
-withDefaults(defineProps<RadioButtonProps>(), {
-	active: false,
-	disabled: false,
-	size: 'medium',
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	display: inline-block;
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index f176b2efb7c64..837260722be02 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -1,20 +1,3 @@
-<template>
-	<div
-		role="radiogroup"
-		:class="{ 'n8n-radio-buttons': true, [$style.radioGroup]: true, [$style.disabled]: disabled }"
-	>
-		<RadioButton
-			v-for="option in options"
-			:key="option.value"
-			v-bind="option"
-			:active="modelValue === option.value"
-			:size="size"
-			:disabled="disabled || option.disabled"
-			@click.prevent.stop="onClick(option, $event)"
-		/>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import RadioButton from './RadioButton.vue';
 
@@ -53,6 +36,23 @@ const onClick = (
 };
 </script>
 
+<template>
+	<div
+		role="radiogroup"
+		:class="{ 'n8n-radio-buttons': true, [$style.radioGroup]: true, [$style.disabled]: disabled }"
+	>
+		<RadioButton
+			v-for="option in options"
+			:key="option.value"
+			v-bind="option"
+			:active="modelValue === option.value"
+			:size="size"
+			:disabled="disabled || option.disabled"
+			@click.prevent.stop="onClick(option, $event)"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .radioGroup {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
index 475000bf3cd07..3d32365c4b8ca 100644
--- a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
+++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
@@ -1,16 +1,3 @@
-<template>
-	<div :class="$style.resize">
-		<div
-			v-for="direction in enabledDirections"
-			:key="direction"
-			:data-dir="direction"
-			:class="{ [$style.resizer]: true, [$style[direction]]: true }"
-			@mousedown="resizerMove"
-		/>
-		<slot></slot>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 
@@ -180,6 +167,19 @@ const resizerMove = (event: MouseEvent) => {
 };
 </script>
 
+<template>
+	<div :class="$style.resize">
+		<div
+			v-for="direction in enabledDirections"
+			:key="direction"
+			:data-dir="direction"
+			:class="{ [$style.resizer]: true, [$style[direction]]: true }"
+			@mousedown="resizerMove"
+		/>
+		<slot></slot>
+	</div>
+</template>
+
 <style lang="scss" module>
 .resize {
 	position: relative;
diff --git a/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue b/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
index c70dfe89e885a..f75fc0e0ef63e 100644
--- a/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
+++ b/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
@@ -1,20 +1,3 @@
-<template>
-	<N8nResizeWrapper
-		:is-resizing-enabled="!readOnly"
-		:height="height"
-		:width="width"
-		:min-height="minHeight"
-		:min-width="minWidth"
-		:scale="scale"
-		:grid-size="gridSize"
-		@resizeend="onResizeEnd"
-		@resize="onResize"
-		@resizestart="onResizeStart"
-	>
-		<N8nSticky v-bind="stickyBindings" />
-	</N8nResizeWrapper>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, useAttrs } from 'vue';
 import N8nResizeWrapper, { type ResizeData } from '../N8nResizeWrapper/ResizeWrapper.vue';
@@ -59,3 +42,20 @@ const onResizeEnd = () => {
 	emit('resizeend');
 };
 </script>
+
+<template>
+	<N8nResizeWrapper
+		:is-resizing-enabled="!readOnly"
+		:height="height"
+		:width="width"
+		:min-height="minHeight"
+		:min-width="minWidth"
+		:scale="scale"
+		:grid-size="gridSize"
+		@resizeend="onResizeEnd"
+		@resize="onResize"
+		@resizestart="onResizeStart"
+	>
+		<N8nSticky v-bind="stickyBindings" />
+	</N8nResizeWrapper>
+</template>
diff --git a/packages/design-system/src/components/N8nRoute/Route.vue b/packages/design-system/src/components/N8nRoute/Route.vue
index 4501582a84496..07fe1f3c28a45 100644
--- a/packages/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/design-system/src/components/N8nRoute/Route.vue
@@ -1,17 +1,3 @@
-<template>
-	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
-		<slot></slot>
-	</router-link>
-	<a
-		v-else
-		:href="to ? `${to}` : undefined"
-		:target="openNewWindow ? '_blank' : '_self'"
-		v-bind="$attrs"
-	>
-		<slot></slot>
-	</a>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
@@ -39,3 +25,17 @@ const useRouterLink = computed(() => {
 
 const openNewWindow = computed(() => !useRouterLink.value);
 </script>
+
+<template>
+	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
+		<slot></slot>
+	</router-link>
+	<a
+		v-else
+		:href="to ? `${to}` : undefined"
+		:target="openNewWindow ? '_blank' : '_self'"
+		v-bind="$attrs"
+	>
+		<slot></slot>
+	</a>
+</template>
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue
index 497ae554a8f1c..66ac825c3b796 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue
@@ -1,15 +1,3 @@
-<template>
-	<span class="n8n-spinner">
-		<div v-if="type === 'ring'" class="lds-ring">
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
-		</div>
-		<N8nIcon v-else icon="spinner" :size="size" spin />
-	</span>
-</template>
-
 <script lang="ts" setup>
 import type { TextSize } from 'n8n-design-system/types/text';
 import N8nIcon from '../N8nIcon';
@@ -28,6 +16,18 @@ withDefaults(defineProps<SpinnerProps>(), {
 });
 </script>
 
+<template>
+	<span class="n8n-spinner">
+		<div v-if="type === 'ring'" class="lds-ring">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<N8nIcon v-else icon="spinner" :size="size" spin />
+	</span>
+</template>
+
 <style lang="scss">
 .lds-ring {
 	display: inline-block;
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.vue b/packages/design-system/src/components/N8nSticky/Sticky.vue
index c53fb012f9909..4b7dca944acb0 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.vue
+++ b/packages/design-system/src/components/N8nSticky/Sticky.vue
@@ -1,51 +1,3 @@
-<template>
-	<div
-		:class="{
-			'n8n-sticky': true,
-			[$style.sticky]: true,
-			[$style.clickable]: !isResizing,
-			[$style[`color-${backgroundColor}`]]: true,
-		}"
-		:style="styles"
-		@keydown.prevent
-	>
-		<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
-			<N8nMarkdown
-				theme="sticky"
-				:content="modelValue"
-				:with-multi-breaks="true"
-				@markdown-click="onMarkdownClick"
-				@update-content="onUpdateModelValue"
-			/>
-		</div>
-		<div
-			v-show="editMode"
-			:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
-			@click.stop
-			@mousedown.stop
-			@mouseup.stop
-			@keydown.esc="onInputBlur"
-			@keydown.stop
-		>
-			<N8nInput
-				ref="input"
-				:model-value="modelValue"
-				:name="inputName"
-				type="textarea"
-				:rows="5"
-				@blur="onInputBlur"
-				@update:model-value="onUpdateModelValue"
-				@wheel="onInputScroll"
-			/>
-		</div>
-		<div v-if="editMode && shouldShowFooter" :class="$style.footer">
-			<N8nText size="xsmall" align="right">
-				<span v-html="t('sticky.markdownHint')"></span>
-			</N8nText>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import N8nInput from '../N8nInput';
@@ -122,6 +74,54 @@ const onInputScroll = (event: WheelEvent) => {
 };
 </script>
 
+<template>
+	<div
+		:class="{
+			'n8n-sticky': true,
+			[$style.sticky]: true,
+			[$style.clickable]: !isResizing,
+			[$style[`color-${backgroundColor}`]]: true,
+		}"
+		:style="styles"
+		@keydown.prevent
+	>
+		<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
+			<N8nMarkdown
+				theme="sticky"
+				:content="modelValue"
+				:with-multi-breaks="true"
+				@markdown-click="onMarkdownClick"
+				@update-content="onUpdateModelValue"
+			/>
+		</div>
+		<div
+			v-show="editMode"
+			:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
+			@click.stop
+			@mousedown.stop
+			@mouseup.stop
+			@keydown.esc="onInputBlur"
+			@keydown.stop
+		>
+			<N8nInput
+				ref="input"
+				:model-value="modelValue"
+				:name="inputName"
+				type="textarea"
+				:rows="5"
+				@blur="onInputBlur"
+				@update:model-value="onUpdateModelValue"
+				@wheel="onInputScroll"
+			/>
+		</div>
+		<div v-if="editMode && shouldShowFooter" :class="$style.footer">
+			<N8nText size="xsmall" align="right">
+				<span v-html="t('sticky.markdownHint')"></span>
+			</N8nText>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .sticky {
 	position: absolute;
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 967f08a430701..64277ca8630e9 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -1,59 +1,3 @@
-<template>
-	<div :class="['n8n-tabs', $style.container]">
-		<div v-if="scrollPosition > 0" :class="$style.back" @click="scrollLeft">
-			<N8nIcon icon="chevron-left" size="small" />
-		</div>
-		<div v-if="canScrollRight" :class="$style.next" @click="scrollRight">
-			<N8nIcon icon="chevron-right" size="small" />
-		</div>
-		<div ref="tabs" :class="$style.tabs">
-			<div
-				v-for="option in options"
-				:id="option.value"
-				:key="option.value"
-				:class="{ [$style.alignRight]: option.align === 'right' }"
-			>
-				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
-					<template #content>
-						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
-					</template>
-					<a
-						v-if="option.href"
-						target="_blank"
-						:href="option.href"
-						:class="[$style.link, $style.tab]"
-						@click="() => handleTabClick(option.value)"
-					>
-						<div>
-							{{ option.label }}
-							<span :class="$style.external">
-								<N8nIcon icon="external-link-alt" size="xsmall" />
-							</span>
-						</div>
-					</a>
-					<router-link
-						v-else-if="option.to"
-						:to="option.to"
-						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
-					>
-						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
-						<span v-if="option.label">{{ option.label }}</span>
-					</router-link>
-					<div
-						v-else
-						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
-						:data-test-id="`tab-${option.value}`"
-						@click="() => handleTabClick(option.value)"
-					>
-						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
-						<span v-if="option.label">{{ option.label }}</span>
-					</div>
-				</N8nTooltip>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -128,6 +72,62 @@ const scrollLeft = () => scroll(-50);
 const scrollRight = () => scroll(50);
 </script>
 
+<template>
+	<div :class="['n8n-tabs', $style.container]">
+		<div v-if="scrollPosition > 0" :class="$style.back" @click="scrollLeft">
+			<N8nIcon icon="chevron-left" size="small" />
+		</div>
+		<div v-if="canScrollRight" :class="$style.next" @click="scrollRight">
+			<N8nIcon icon="chevron-right" size="small" />
+		</div>
+		<div ref="tabs" :class="$style.tabs">
+			<div
+				v-for="option in options"
+				:id="option.value"
+				:key="option.value"
+				:class="{ [$style.alignRight]: option.align === 'right' }"
+			>
+				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
+					<template #content>
+						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
+					</template>
+					<a
+						v-if="option.href"
+						target="_blank"
+						:href="option.href"
+						:class="[$style.link, $style.tab]"
+						@click="() => handleTabClick(option.value)"
+					>
+						<div>
+							{{ option.label }}
+							<span :class="$style.external">
+								<N8nIcon icon="external-link-alt" size="xsmall" />
+							</span>
+						</div>
+					</a>
+					<router-link
+						v-else-if="option.to"
+						:to="option.to"
+						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
+					>
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
+						<span v-if="option.label">{{ option.label }}</span>
+					</router-link>
+					<div
+						v-else
+						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
+						:data-test-id="`tab-${option.value}`"
+						@click="() => handleTabClick(option.value)"
+					>
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
+						<span v-if="option.label">{{ option.label }}</span>
+					</div>
+				</N8nTooltip>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/design-system/src/components/N8nTag/Tag.vue b/packages/design-system/src/components/N8nTag/Tag.vue
index ba95e2095362c..92c725fb96d79 100644
--- a/packages/design-system/src/components/N8nTag/Tag.vue
+++ b/packages/design-system/src/components/N8nTag/Tag.vue
@@ -1,9 +1,3 @@
-<template>
-	<span :class="['n8n-tag', $style.tag]" v-bind="$attrs">
-		{{ text }}
-	</span>
-</template>
-
 <script lang="ts" setup>
 interface TagProps {
 	text: string;
@@ -12,6 +6,12 @@ defineOptions({ name: 'N8nTag' });
 defineProps<TagProps>();
 </script>
 
+<template>
+	<span :class="['n8n-tag', $style.tag]" v-bind="$attrs">
+		{{ text }}
+	</span>
+</template>
+
 <style lang="scss" module>
 .tag {
 	min-width: max-content;
diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue
index 9b3daf7c74727..dfc1b57060ee9 100644
--- a/packages/design-system/src/components/N8nTags/Tags.vue
+++ b/packages/design-system/src/components/N8nTags/Tags.vue
@@ -1,23 +1,3 @@
-<template>
-	<div :class="['n8n-tags', $style.tags]">
-		<N8nTag
-			v-for="tag in visibleTags"
-			:key="tag.id"
-			:text="tag.name"
-			@click="emit('click:tag', tag.id, $event)"
-		/>
-		<N8nLink
-			v-if="truncate && !showAll && hiddenTagsLength > 0"
-			theme="text"
-			underline
-			size="small"
-			@click.stop.prevent="onExpand"
-		>
-			{{ t('tags.showMore', [`${hiddenTagsLength}`]) }}
-		</N8nLink>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import N8nTag from '../N8nTag';
@@ -67,6 +47,26 @@ const onExpand = () => {
 };
 </script>
 
+<template>
+	<div :class="['n8n-tags', $style.tags]">
+		<N8nTag
+			v-for="tag in visibleTags"
+			:key="tag.id"
+			:text="tag.name"
+			@click="emit('click:tag', tag.id, $event)"
+		/>
+		<N8nLink
+			v-if="truncate && !showAll && hiddenTagsLength > 0"
+			theme="text"
+			underline
+			size="small"
+			@click.stop.prevent="onExpand"
+		>
+			{{ t('tags.showMore', [`${hiddenTagsLength}`]) }}
+		</N8nLink>
+	</div>
+</template>
+
 <style lang="scss" module>
 .tags {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue
index d5624f9b4cbdf..055a79c3ddc97 100644
--- a/packages/design-system/src/components/N8nText/Text.vue
+++ b/packages/design-system/src/components/N8nText/Text.vue
@@ -1,9 +1,3 @@
-<template>
-	<component :is="tag" :class="['n8n-text', ...classes]" v-bind="$attrs">
-		<slot></slot>
-	</component>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import type { TextSize, TextColor, TextAlign } from 'n8n-design-system/types/text';
@@ -46,6 +40,12 @@ const classes = computed(() => {
 });
 </script>
 
+<template>
+	<component :is="tag" :class="['n8n-text', ...classes]" v-bind="$attrs">
+		<slot></slot>
+	</component>
+</template>
+
 <style lang="scss" module>
 .bold {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index 6af93a92e9b18..8c1c17358bfc6 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,25 +1,3 @@
-<template>
-	<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
-		<slot />
-		<template #content>
-			<slot name="content">
-				<div v-html="content"></div>
-			</slot>
-			<div
-				v-if="buttons.length"
-				:class="$style.buttons"
-				:style="{ justifyContent: justifyButtons }"
-			>
-				<N8nButton
-					v-for="button in buttons"
-					:key="button.attrs.label"
-					v-bind="{ ...button.attrs, ...button.listeners }"
-				/>
-			</div>
-		</template>
-	</ElTooltip>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -65,6 +43,28 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
+		<slot />
+		<template #content>
+			<slot name="content">
+				<div v-html="content"></div>
+			</slot>
+			<div
+				v-if="buttons.length"
+				:class="$style.buttons"
+				:style="{ justifyContent: justifyButtons }"
+			>
+				<N8nButton
+					v-for="button in buttons"
+					:key="button.attrs.label"
+					v-bind="{ ...button.attrs, ...button.listeners }"
+				/>
+			</div>
+		</template>
+	</ElTooltip>
+</template>
+
 <style lang="scss" module>
 .buttons {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index b588af3ae6e29..b78c2fee02093 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,31 +1,3 @@
-<template>
-	<div v-if="isObject(value)" class="n8n-tree">
-		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
-			<div v-if="isSimple(value[label])" :class="$style.simple">
-				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
-				<span v-else>{{ label }}</span>
-				<span>:</span>
-				<slot v-if="$slots.value" name="value" :value="value[label]" />
-				<span v-else>{{ value[label] }}</span>
-			</div>
-			<div v-else>
-				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
-				<span v-else>{{ label }}</span>
-				<n8n-tree
-					:path="getPath(label)"
-					:depth="depth + 1"
-					:value="value[label] as Record<string, unknown>"
-					:node-class="nodeClass"
-				>
-					<template v-for="(_, name) in $slots" #[name]="data">
-						<slot :name="name" v-bind="data"></slot>
-					</template>
-				</n8n-tree>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 
@@ -85,6 +57,34 @@ const getPath = (key: string): Array<string | number> => {
 };
 </script>
 
+<template>
+	<div v-if="isObject(value)" class="n8n-tree">
+		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
+			<div v-if="isSimple(value[label])" :class="$style.simple">
+				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
+				<span v-else>{{ label }}</span>
+				<span>:</span>
+				<slot v-if="$slots.value" name="value" :value="value[label]" />
+				<span v-else>{{ value[label] }}</span>
+			</div>
+			<div v-else>
+				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
+				<span v-else>{{ label }}</span>
+				<n8n-tree
+					:path="getPath(label)"
+					:depth="depth + 1"
+					:value="value[label] as Record<string, unknown>"
+					:node-class="nodeClass"
+				>
+					<template v-for="(_, name) in $slots" #[name]="data">
+						<slot :name="name" v-bind="data"></slot>
+					</template>
+				</n8n-tree>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 $--spacing: var(--spacing-s);
 
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
index 44d9a62c029a3..fd8c3f061c5b6 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
@@ -1,30 +1,3 @@
-<template>
-	<div :class="classes">
-		<div :class="$style.avatarContainer">
-			<N8nAvatar :first-name="firstName" :last-name="lastName" />
-		</div>
-
-		<div v-if="isPendingUser" :class="$style.pendingUser">
-			<N8nText :bold="true">{{ email }}</N8nText>
-			<span :class="$style.pendingBadge"><N8nBadge :bold="true">Pending</N8nBadge></span>
-		</div>
-		<div v-else :class="$style.infoContainer">
-			<div>
-				<N8nText :bold="true" color="text-dark">
-					{{ firstName }} {{ lastName }}
-					{{ isCurrentUser ? t('nds.userInfo.you') : '' }}
-				</N8nText>
-				<span v-if="disabled" :class="$style.pendingBadge">
-					<N8nBadge :bold="true">Disabled</N8nBadge>
-				</span>
-			</div>
-			<div>
-				<N8nText data-test-id="user-email" size="small" color="text-light">{{ email }}</N8nText>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nText from '../N8nText';
@@ -59,6 +32,33 @@ const classes = computed(
 );
 </script>
 
+<template>
+	<div :class="classes">
+		<div :class="$style.avatarContainer">
+			<N8nAvatar :first-name="firstName" :last-name="lastName" />
+		</div>
+
+		<div v-if="isPendingUser" :class="$style.pendingUser">
+			<N8nText :bold="true">{{ email }}</N8nText>
+			<span :class="$style.pendingBadge"><N8nBadge :bold="true">Pending</N8nBadge></span>
+		</div>
+		<div v-else :class="$style.infoContainer">
+			<div>
+				<N8nText :bold="true" color="text-dark">
+					{{ firstName }} {{ lastName }}
+					{{ isCurrentUser ? t('nds.userInfo.you') : '' }}
+				</N8nText>
+				<span v-if="disabled" :class="$style.pendingBadge">
+					<N8nBadge :bold="true">Disabled</N8nBadge>
+				</span>
+			</div>
+			<div>
+				<N8nText data-test-id="user-email" size="small" color="text-light">{{ email }}</N8nText>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
index 3a4558bcb65fe..feeaa1a8d2de3 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -1,35 +1,3 @@
-<template>
-	<N8nSelect
-		data-test-id="user-select-trigger"
-		v-bind="$attrs"
-		:model-value="modelValue"
-		:filterable="true"
-		:filter-method="setFilter"
-		:placeholder="placeholder || t('nds.userSelect.selectUser')"
-		:default-first-option="true"
-		teleported
-		:popper-class="$style.limitPopperWidth"
-		:no-data-text="t('nds.userSelect.noMatchingUsers')"
-		:size="size"
-		@blur="onBlur"
-		@focus="onFocus"
-	>
-		<template v-if="$slots.prefix" #prefix>
-			<slot name="prefix" />
-		</template>
-		<N8nOption
-			v-for="user in sortedUsers"
-			:key="user.id"
-			:value="user.id"
-			:class="$style.itemContainer"
-			:label="getLabel(user)"
-			:disabled="user.disabled"
-		>
-			<N8nUserInfo v-bind="user" :is-current-user="currentUserId === user.id" />
-		</N8nOption>
-	</N8nSelect>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import N8nUserInfo from '../N8nUserInfo';
@@ -112,6 +80,38 @@ const getLabel = (user: IUser) =>
 	!user.fullName ? user.email : `${user.fullName} (${user.email})`;
 </script>
 
+<template>
+	<N8nSelect
+		data-test-id="user-select-trigger"
+		v-bind="$attrs"
+		:model-value="modelValue"
+		:filterable="true"
+		:filter-method="setFilter"
+		:placeholder="placeholder || t('nds.userSelect.selectUser')"
+		:default-first-option="true"
+		teleported
+		:popper-class="$style.limitPopperWidth"
+		:no-data-text="t('nds.userSelect.noMatchingUsers')"
+		:size="size"
+		@blur="onBlur"
+		@focus="onFocus"
+	>
+		<template v-if="$slots.prefix" #prefix>
+			<slot name="prefix" />
+		</template>
+		<N8nOption
+			v-for="user in sortedUsers"
+			:key="user.id"
+			:value="user.id"
+			:class="$style.itemContainer"
+			:label="getLabel(user)"
+			:disabled="user.disabled"
+		>
+			<N8nUserInfo v-bind="user" :is-current-user="currentUserId === user.id" />
+		</N8nOption>
+	</N8nSelect>
+</template>
+
 <style lang="scss" module>
 .itemContainer {
 	--select-option-padding: var(--spacing-2xs) var(--spacing-s);
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.vue b/packages/design-system/src/components/N8nUsersList/UsersList.vue
index 9b1f54ebec1c6..e4a6870d064cf 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.vue
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.vue
@@ -1,39 +1,3 @@
-<template>
-	<div>
-		<div
-			v-for="(user, i) in sortedUsers"
-			:key="user.id"
-			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
-			:data-test-id="`user-list-item-${user.email}`"
-		>
-			<N8nUserInfo
-				v-bind="user"
-				:is-current-user="currentUserId === user.id"
-				:is-saml-login-enabled="isSamlLoginEnabled"
-			/>
-			<div :class="$style.badgeContainer">
-				<N8nBadge v-if="user.isOwner" theme="tertiary" bold>
-					{{ t('nds.auth.roles.owner') }}
-				</N8nBadge>
-				<slot v-if="!user.isOwner && !readonly" name="actions" :user="user" />
-				<N8nActionToggle
-					v-if="
-						!user.isOwner &&
-						user.signInType !== 'ldap' &&
-						!readonly &&
-						getActions(user).length > 0 &&
-						actions.length > 0
-					"
-					placement="bottom"
-					:actions="getActions(user)"
-					theme="dark"
-					@action="(action: string) => onUserAction(user, action)"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import N8nActionToggle from '../N8nActionToggle';
@@ -115,6 +79,42 @@ const onUserAction = (user: IUser, action: string) =>
 	});
 </script>
 
+<template>
+	<div>
+		<div
+			v-for="(user, i) in sortedUsers"
+			:key="user.id"
+			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
+			:data-test-id="`user-list-item-${user.email}`"
+		>
+			<N8nUserInfo
+				v-bind="user"
+				:is-current-user="currentUserId === user.id"
+				:is-saml-login-enabled="isSamlLoginEnabled"
+			/>
+			<div :class="$style.badgeContainer">
+				<N8nBadge v-if="user.isOwner" theme="tertiary" bold>
+					{{ t('nds.auth.roles.owner') }}
+				</N8nBadge>
+				<slot v-if="!user.isOwner && !readonly" name="actions" :user="user" />
+				<N8nActionToggle
+					v-if="
+						!user.isOwner &&
+						user.signInType !== 'ldap' &&
+						!readonly &&
+						getActions(user).length > 0 &&
+						actions.length > 0
+					"
+					placement="bottom"
+					:actions="getActions(user)"
+					theme="dark"
+					@action="(action: string) => onUserAction(user, action)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .itemContainer {
 	display: flex;
diff --git a/packages/design-system/src/styleguide/VariableTable.vue b/packages/design-system/src/styleguide/VariableTable.vue
index f0c8e1feadb9c..39ce861211261 100644
--- a/packages/design-system/src/styleguide/VariableTable.vue
+++ b/packages/design-system/src/styleguide/VariableTable.vue
@@ -1,20 +1,3 @@
-<template>
-	<table :class="$style.table">
-		<tr>
-			<th :class="$style.row">Name</th>
-			<th :class="$style.row">Value</th>
-		</tr>
-		<tr
-			v-for="variable in variables"
-			:key="variable"
-			:style="attr ? { [attr]: `var(${variable})` } : {}"
-		>
-			<td>{{ variable }}</td>
-			<td>{{ values[variable] }}</td>
-		</tr>
-	</table>
-</template>
-
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
 
@@ -64,6 +47,23 @@ onUnmounted(() => {
 });
 </script>
 
+<template>
+	<table :class="$style.table">
+		<tr>
+			<th :class="$style.row">Name</th>
+			<th :class="$style.row">Value</th>
+		</tr>
+		<tr
+			v-for="variable in variables"
+			:key="variable"
+			:style="attr ? { [attr]: `var(${variable})` } : {}"
+		>
+			<td>{{ variable }}</td>
+			<td>{{ values[variable] }}</td>
+		</tr>
+	</table>
+</template>
+
 <style lang="scss" module>
 .table {
 	text-align: center;
diff --git a/packages/design-system/src/styleguide/components/SpacingPreview.vue b/packages/design-system/src/styleguide/components/SpacingPreview.vue
index b8dd68d317986..40c61e5a04ea5 100644
--- a/packages/design-system/src/styleguide/components/SpacingPreview.vue
+++ b/packages/design-system/src/styleguide/components/SpacingPreview.vue
@@ -1,14 +1,3 @@
-<template>
-	<div>
-		<div v-for="size in sizes" :key="size" class="spacing-group">
-			<div class="spacing-example" :class="`${property[0]}${side ? side[0] : ''}-${size}`">
-				<div class="spacing-box" />
-				<div class="label">{{ property[0] }}{{ side ? side[0] : '' }}-{{ size }}</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 
@@ -42,6 +31,17 @@ const props = withDefaults(defineProps<SpacingPreviewProps>(), {
 const sizes = computed(() => [...SIZES, ...(props.property === 'margin' ? ['auto'] : [])]);
 </script>
 
+<template>
+	<div>
+		<div v-for="size in sizes" :key="size" class="spacing-group">
+			<div class="spacing-example" :class="`${property[0]}${side ? side[0] : ''}-${size}`">
+				<div class="spacing-box" />
+				<div class="label">{{ property[0] }}{{ side ? side[0] : '' }}-{{ size }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 $box-size: 64px;
 
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 8552044e4b30b..83b4c2becd5c1 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -1,3 +1,46 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { createEventBus } from 'n8n-design-system/utils';
+import Modal from './Modal.vue';
+import { ABOUT_MODAL_KEY } from '../constants';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useRootStore } from '@/stores/root.store';
+import { useToast } from '@/composables/useToast';
+import { useClipboard } from '@/composables/useClipboard';
+import { useDebugInfo } from '@/composables/useDebugInfo';
+
+export default defineComponent({
+	name: 'About',
+	components: {
+		Modal,
+	},
+	data() {
+		return {
+			ABOUT_MODAL_KEY,
+			modalBus: createEventBus(),
+		};
+	},
+	computed: {
+		...mapStores(useRootStore, useSettingsStore),
+	},
+	methods: {
+		closeDialog() {
+			this.modalBus.emit('close');
+		},
+		async copyDebugInfoToClipboard() {
+			useToast().showToast({
+				title: this.$locale.baseText('about.debug.toast.title'),
+				message: this.$locale.baseText('about.debug.toast.message'),
+				type: 'info',
+				duration: 5000,
+			});
+			await useClipboard().copy(useDebugInfo().generateDebugInfo());
+		},
+	},
+});
+</script>
+
 <template>
 	<Modal
 		max-width="540px"
@@ -68,49 +111,6 @@
 	</Modal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { createEventBus } from 'n8n-design-system/utils';
-import Modal from './Modal.vue';
-import { ABOUT_MODAL_KEY } from '../constants';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useRootStore } from '@/stores/root.store';
-import { useToast } from '@/composables/useToast';
-import { useClipboard } from '@/composables/useClipboard';
-import { useDebugInfo } from '@/composables/useDebugInfo';
-
-export default defineComponent({
-	name: 'About',
-	components: {
-		Modal,
-	},
-	data() {
-		return {
-			ABOUT_MODAL_KEY,
-			modalBus: createEventBus(),
-		};
-	},
-	computed: {
-		...mapStores(useRootStore, useSettingsStore),
-	},
-	methods: {
-		closeDialog() {
-			this.modalBus.emit('close');
-		},
-		async copyDebugInfoToClipboard() {
-			useToast().showToast({
-				title: this.$locale.baseText('about.debug.toast.title'),
-				message: this.$locale.baseText('about.debug.toast.message'),
-				type: 'info',
-				duration: 5000,
-			});
-			await useClipboard().copy(useDebugInfo().generateDebugInfo());
-		},
-	},
-});
-</script>
-
 <style module lang="scss">
 .container > * {
 	margin-bottom: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index 349bf5d9ddb00..df4892ea71a2d 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -1,39 +1,3 @@
-<template>
-	<Modal
-		:name="WORKFLOW_ACTIVE_MODAL_KEY"
-		:title="$locale.baseText('activationModal.workflowActivated')"
-		width="460px"
-	>
-		<template #content>
-			<div>
-				<n8n-text>{{ triggerContent }}</n8n-text>
-			</div>
-			<div :class="$style.spaced">
-				<n8n-text>
-					<n8n-text :bold="true">
-						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
-					</n8n-text>
-					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
-					<a @click="showExecutionsList">
-						{{ $locale.baseText('activationModal.executionList') }}
-					</a>
-					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
-					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
-				</n8n-text>
-			</div>
-		</template>
-
-		<template #footer="{ close }">
-			<div :class="$style.footer">
-				<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
-					$locale.baseText('generic.dontShowAgain')
-				}}</el-checkbox>
-				<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -134,6 +98,42 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="WORKFLOW_ACTIVE_MODAL_KEY"
+		:title="$locale.baseText('activationModal.workflowActivated')"
+		width="460px"
+	>
+		<template #content>
+			<div>
+				<n8n-text>{{ triggerContent }}</n8n-text>
+			</div>
+			<div :class="$style.spaced">
+				<n8n-text>
+					<n8n-text :bold="true">
+						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
+					</n8n-text>
+					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
+					<a @click="showExecutionsList">
+						{{ $locale.baseText('activationModal.executionList') }}
+					</a>
+					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
+					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
+				</n8n-text>
+			</div>
+		</template>
+
+		<template #footer="{ close }">
+			<div :class="$style.footer">
+				<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
+					$locale.baseText('generic.dontShowAgain')
+				}}</el-checkbox>
+				<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .spaced {
 	margin-top: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/Badge.vue b/packages/editor-ui/src/components/Badge.vue
index 25ffed271c912..5184286b05bb0 100644
--- a/packages/editor-ui/src/components/Badge.vue
+++ b/packages/editor-ui/src/components/Badge.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+	props: ['text', 'type'],
+};
+</script>
+
 <template>
 	<el-tag
 		v-if="type === 'danger'"
@@ -18,12 +24,6 @@
 	</el-tag>
 </template>
 
-<script lang="ts">
-export default {
-	props: ['text', 'type'],
-};
-</script>
-
 <style lang="scss" module>
 .badge {
 	font-size: 11px;
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 8247feb9dfb09..e418002d4e43f 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -1,40 +1,3 @@
-<template>
-	<el-tag :type="theme" :disable-transitions="true" :class="$style.container">
-		<font-awesome-icon
-			:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
-			:class="theme === 'success' ? $style.icon : $style.dangerIcon"
-		/>
-		<div :class="$style.banner">
-			<div :class="$style.content">
-				<div>
-					<span :class="theme === 'success' ? $style.message : $style.dangerMessage">
-						{{ message }}&nbsp;
-					</span>
-					<n8n-link v-if="details && !expanded" :bold="true" size="small" @click="expand">
-						<span :class="$style.moreDetails">More details</span>
-					</n8n-link>
-				</div>
-			</div>
-
-			<slot v-if="$slots.button" name="button" />
-			<n8n-button
-				v-else-if="buttonLabel"
-				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
-				:title="buttonTitle"
-				:type="theme"
-				:loading="buttonLoading"
-				size="small"
-				outline
-				@click.stop="onClick"
-			/>
-		</div>
-
-		<div v-if="expanded" :class="$style.details">
-			{{ details }}
-		</div>
-	</el-tag>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 
@@ -72,6 +35,43 @@ const onClick = () => {
 };
 </script>
 
+<template>
+	<el-tag :type="theme" :disable-transitions="true" :class="$style.container">
+		<font-awesome-icon
+			:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
+			:class="theme === 'success' ? $style.icon : $style.dangerIcon"
+		/>
+		<div :class="$style.banner">
+			<div :class="$style.content">
+				<div>
+					<span :class="theme === 'success' ? $style.message : $style.dangerMessage">
+						{{ message }}&nbsp;
+					</span>
+					<n8n-link v-if="details && !expanded" :bold="true" size="small" @click="expand">
+						<span :class="$style.moreDetails">More details</span>
+					</n8n-link>
+				</div>
+			</div>
+
+			<slot v-if="$slots.button" name="button" />
+			<n8n-button
+				v-else-if="buttonLabel"
+				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
+				:title="buttonTitle"
+				:type="theme"
+				:loading="buttonLoading"
+				size="small"
+				outline
+				@click.stop="onClick"
+			/>
+		</div>
+
+		<div v-if="expanded" :class="$style.details">
+			{{ details }}
+		</div>
+	</el-tag>
+</template>
+
 <style module lang="scss">
 .icon {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index 4f41d15a39fc8..9b7eb62e62054 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -1,23 +1,3 @@
-<template>
-	<div v-if="windowVisible" :class="['binary-data-window', binaryData?.fileType]">
-		<n8n-button
-			size="small"
-			class="binary-data-window-back"
-			:title="$locale.baseText('binaryDataDisplay.backToOverviewPage')"
-			icon="arrow-left"
-			:label="$locale.baseText('binaryDataDisplay.backToList')"
-			@click.stop="closeWindow"
-		/>
-
-		<div class="binary-data-window-wrapper">
-			<div v-if="!binaryData">
-				{{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
-			</div>
-			<BinaryDataDisplayEmbed v-else :binary-data="binaryData" />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { IBinaryData, IRunData } from 'n8n-workflow';
@@ -89,6 +69,26 @@ function closeWindow() {
 }
 </script>
 
+<template>
+	<div v-if="windowVisible" :class="['binary-data-window', binaryData?.fileType]">
+		<n8n-button
+			size="small"
+			class="binary-data-window-back"
+			:title="$locale.baseText('binaryDataDisplay.backToOverviewPage')"
+			icon="arrow-left"
+			:label="$locale.baseText('binaryDataDisplay.backToList')"
+			@click.stop="closeWindow"
+		/>
+
+		<div class="binary-data-window-wrapper">
+			<div v-if="!binaryData">
+				{{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
+			</div>
+			<BinaryDataDisplayEmbed v-else :binary-data="binaryData" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .binary-data-window {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index c95393c3da735..fe822821e22f2 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -1,28 +1,3 @@
-<template>
-	<span>
-		<div v-if="isLoading">Loading binary data...</div>
-		<div v-else-if="error">Error loading binary data</div>
-		<span v-else>
-			<video v-if="binaryData.fileType === 'video'" controls autoplay>
-				<source :src="embedSource" :type="binaryData.mimeType" />
-				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
-			</video>
-			<audio v-else-if="binaryData.fileType === 'audio'" controls autoplay>
-				<source :src="embedSource" :type="binaryData.mimeType" />
-				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
-			</audio>
-			<VueJsonPretty
-				v-else-if="binaryData.fileType === 'json'"
-				:data="data"
-				:deep="3"
-				:show-length="true"
-			/>
-			<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
-			<embed v-else :src="embedSource" class="binary-data" :class="embedClass" />
-		</span>
-	</span>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -75,6 +50,31 @@ onMounted(async () => {
 });
 </script>
 
+<template>
+	<span>
+		<div v-if="isLoading">Loading binary data...</div>
+		<div v-else-if="error">Error loading binary data</div>
+		<span v-else>
+			<video v-if="binaryData.fileType === 'video'" controls autoplay>
+				<source :src="embedSource" :type="binaryData.mimeType" />
+				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
+			</video>
+			<audio v-else-if="binaryData.fileType === 'audio'" controls autoplay>
+				<source :src="embedSource" :type="binaryData.mimeType" />
+				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
+			</audio>
+			<VueJsonPretty
+				v-else-if="binaryData.fileType === 'json'"
+				:data="data"
+				:deep="3"
+				:show-length="true"
+			/>
+			<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
+			<embed v-else :src="embedSource" class="binary-data" :class="embedClass" />
+		</span>
+	</span>
+</template>
+
 <style lang="scss">
 .binary-data {
 	background-color: var(--color-foreground-xlight);
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
index 8b1435a343b1d..e89281cd57300 100644
--- a/packages/editor-ui/src/components/BreakpointsObserver.vue
+++ b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -1,9 +1,3 @@
-<template>
-	<span>
-		<slot :bp="bp" :value="value" />
-	</span>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants';
@@ -90,3 +84,9 @@ onBeforeUnmount(() => {
 	window.removeEventListener('resize', onResize);
 });
 </script>
+
+<template>
+	<span>
+		<slot :bp="bp" :value="value" />
+	</span>
+</template>
diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue
index 495a1ac8ed8d8..881ae623f50b4 100644
--- a/packages/editor-ui/src/components/CanvasControls.vue
+++ b/packages/editor-ui/src/components/CanvasControls.vue
@@ -1,3 +1,37 @@
+<script lang="ts" setup>
+import { onBeforeMount, onBeforeUnmount } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useCanvasStore } from '@/stores/canvas.store';
+import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import { useDeviceSupport } from 'n8n-design-system';
+
+const canvasStore = useCanvasStore();
+const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
+const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
+const deviceSupport = useDeviceSupport();
+
+const keyDown = (e: KeyboardEvent) => {
+	const isCtrlKeyPressed = deviceSupport.isCtrlKeyPressed(e);
+	if ((e.key === '=' || e.key === '+') && !isCtrlKeyPressed) {
+		zoomIn();
+	} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {
+		zoomOut();
+	} else if (e.key === '0' && !isCtrlKeyPressed) {
+		resetZoom();
+	} else if (e.key === '1' && !isCtrlKeyPressed) {
+		zoomToFit();
+	}
+};
+
+onBeforeMount(() => {
+	document.addEventListener('keydown', keyDown);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', keyDown);
+});
+</script>
+
 <template>
 	<div
 		:class="{
@@ -57,39 +91,6 @@
 		</KeyboardShortcutTooltip>
 	</div>
 </template>
-<script lang="ts" setup>
-import { onBeforeMount, onBeforeUnmount } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useCanvasStore } from '@/stores/canvas.store';
-import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
-import { useDeviceSupport } from 'n8n-design-system';
-
-const canvasStore = useCanvasStore();
-const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
-const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
-const deviceSupport = useDeviceSupport();
-
-const keyDown = (e: KeyboardEvent) => {
-	const isCtrlKeyPressed = deviceSupport.isCtrlKeyPressed(e);
-	if ((e.key === '=' || e.key === '+') && !isCtrlKeyPressed) {
-		zoomIn();
-	} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {
-		zoomOut();
-	} else if (e.key === '0' && !isCtrlKeyPressed) {
-		resetZoom();
-	} else if (e.key === '1' && !isCtrlKeyPressed) {
-		zoomToFit();
-	}
-};
-
-onBeforeMount(() => {
-	document.addEventListener('keydown', keyDown);
-});
-
-onBeforeUnmount(() => {
-	document.removeEventListener('keydown', keyDown);
-});
-</script>
 
 <style lang="scss" module>
 .zoomMenu {
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index dc6ace63edcb6..efd2901d8bc14 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -1,33 +1,3 @@
-<template>
-	<Modal
-		:name="CHANGE_PASSWORD_MODAL_KEY"
-		:title="i18n.baseText('auth.changePassword')"
-		:center="true"
-		width="460px"
-		:event-bus="modalBus"
-		@enter="onSubmit"
-	>
-		<template #content>
-			<n8n-form-inputs
-				:inputs="config"
-				:event-bus="formBus"
-				:column-view="true"
-				@update="onInput"
-				@submit="onSubmit"
-			/>
-		</template>
-		<template #footer>
-			<n8n-button
-				:loading="loading"
-				:label="i18n.baseText('auth.changePassword')"
-				float="right"
-				data-test-id="change-password-button"
-				@click="onSubmitClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useToast } from '@/composables/useToast';
@@ -160,3 +130,33 @@ onMounted(() => {
 	config.value = form;
 });
 </script>
+
+<template>
+	<Modal
+		:name="CHANGE_PASSWORD_MODAL_KEY"
+		:title="i18n.baseText('auth.changePassword')"
+		:center="true"
+		width="460px"
+		:event-bus="modalBus"
+		@enter="onSubmit"
+	>
+		<template #content>
+			<n8n-form-inputs
+				:inputs="config"
+				:event-bus="formBus"
+				:column-view="true"
+				@update="onInput"
+				@submit="onSubmit"
+			/>
+		</template>
+		<template #footer>
+			<n8n-button
+				:loading="loading"
+				:label="i18n.baseText('auth.changePassword')"
+				float="right"
+				data-test-id="change-password-button"
+				@click="onSubmitClick"
+			/>
+		</template>
+	</Modal>
+</template>
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 1e19e4400f864..6633bcacb59a2 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -1,51 +1,3 @@
-<template>
-	<div
-		ref="codeNodeEditorContainerRef"
-		:class="['code-node-editor', $style['code-node-editor-container'], language]"
-		@mouseover="onMouseOver"
-		@mouseout="onMouseOut"
-	>
-		<el-tabs
-			v-if="aiEnabled"
-			ref="tabs"
-			v-model="activeTab"
-			type="card"
-			:before-leave="onBeforeTabLeave"
-		>
-			<el-tab-pane
-				:label="$locale.baseText('codeNodeEditor.tabs.code')"
-				name="code"
-				data-test-id="code-node-tab-code"
-			>
-				<div
-					ref="codeNodeEditorRef"
-					:class="['ph-no-capture', 'code-editor-tabs', $style.editorInput]"
-				/>
-				<slot name="suffix" />
-			</el-tab-pane>
-			<el-tab-pane
-				:label="$locale.baseText('codeNodeEditor.tabs.askAi')"
-				name="ask-ai"
-				data-test-id="code-node-tab-ai"
-			>
-				<!-- Key the AskAI tab to make sure it re-mounts when changing tabs -->
-				<AskAI
-					:key="activeTab"
-					:has-changes="hasChanges"
-					@replace-code="onReplaceCode"
-					@started-loading="onAiLoadStart"
-					@finished-loading="onAiLoadEnd"
-				/>
-			</el-tab-pane>
-		</el-tabs>
-		<!-- If AskAi not enabled, there's no point in rendering tabs -->
-		<div v-else :class="$style.fillHeight">
-			<div ref="codeNodeEditorRef" :class="['ph-no-capture', $style.fillHeight]" />
-			<slot name="suffix" />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { javascript } from '@codemirror/lang-javascript';
 import { python } from '@codemirror/lang-python';
@@ -411,6 +363,54 @@ function onAiLoadEnd() {
 }
 </script>
 
+<template>
+	<div
+		ref="codeNodeEditorContainerRef"
+		:class="['code-node-editor', $style['code-node-editor-container'], language]"
+		@mouseover="onMouseOver"
+		@mouseout="onMouseOut"
+	>
+		<el-tabs
+			v-if="aiEnabled"
+			ref="tabs"
+			v-model="activeTab"
+			type="card"
+			:before-leave="onBeforeTabLeave"
+		>
+			<el-tab-pane
+				:label="$locale.baseText('codeNodeEditor.tabs.code')"
+				name="code"
+				data-test-id="code-node-tab-code"
+			>
+				<div
+					ref="codeNodeEditorRef"
+					:class="['ph-no-capture', 'code-editor-tabs', $style.editorInput]"
+				/>
+				<slot name="suffix" />
+			</el-tab-pane>
+			<el-tab-pane
+				:label="$locale.baseText('codeNodeEditor.tabs.askAi')"
+				name="ask-ai"
+				data-test-id="code-node-tab-ai"
+			>
+				<!-- Key the AskAI tab to make sure it re-mounts when changing tabs -->
+				<AskAI
+					:key="activeTab"
+					:has-changes="hasChanges"
+					@replace-code="onReplaceCode"
+					@started-loading="onAiLoadStart"
+					@finished-loading="onAiLoadEnd"
+				/>
+			</el-tab-pane>
+		</el-tabs>
+		<!-- If AskAi not enabled, there's no point in rendering tabs -->
+		<div v-else :class="$style.fillHeight">
+			<div ref="codeNodeEditorRef" :class="['ph-no-capture', $style.fillHeight]" />
+			<slot name="suffix" />
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 :deep(.el-tabs) {
 	.code-editor-tabs .cm-editor {
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index c63de2e750233..57df73e4bd2a2 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -1,53 +1,3 @@
-<template>
-	<div class="collection-parameter" @keydown.stop>
-		<div class="collection-parameter-wrapper">
-			<div v-if="getProperties.length === 0" class="no-items-exist">
-				<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
-			</div>
-
-			<Suspense>
-				<ParameterInputList
-					:parameters="getProperties"
-					:node-values="nodeValues"
-					:path="path"
-					:hide-delete="hideDelete"
-					:indent="true"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</Suspense>
-
-			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
-				<n8n-button
-					v-if="(parameter.options ?? []).length === 1"
-					type="tertiary"
-					block
-					:label="getPlaceholderText"
-					@click="optionSelected((parameter.options ?? [])[0].name)"
-				/>
-				<div v-else class="add-option">
-					<n8n-select
-						v-model="selectedOption"
-						:placeholder="getPlaceholderText"
-						size="small"
-						filterable
-						@update:model-value="optionSelected"
-					>
-						<n8n-option
-							v-for="item in parameterOptions"
-							:key="item.name"
-							:label="getParameterOptionLabel(item)"
-							:value="item.name"
-							data-test-id="collection-parameter-option"
-						>
-						</n8n-option>
-					</n8n-select>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
@@ -210,6 +160,56 @@ function valueChanged(parameterData: IUpdateInformation) {
 }
 </script>
 
+<template>
+	<div class="collection-parameter" @keydown.stop>
+		<div class="collection-parameter-wrapper">
+			<div v-if="getProperties.length === 0" class="no-items-exist">
+				<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
+			</div>
+
+			<Suspense>
+				<ParameterInputList
+					:parameters="getProperties"
+					:node-values="nodeValues"
+					:path="path"
+					:hide-delete="hideDelete"
+					:indent="true"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</Suspense>
+
+			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
+				<n8n-button
+					v-if="(parameter.options ?? []).length === 1"
+					type="tertiary"
+					block
+					:label="getPlaceholderText"
+					@click="optionSelected((parameter.options ?? [])[0].name)"
+				/>
+				<div v-else class="add-option">
+					<n8n-select
+						v-model="selectedOption"
+						:placeholder="getPlaceholderText"
+						size="small"
+						filterable
+						@update:model-value="optionSelected"
+					>
+						<n8n-option
+							v-for="item in parameterOptions"
+							:key="item.name"
+							:label="getParameterOptionLabel(item)"
+							:value="item.name"
+							data-test-id="collection-parameter-option"
+						>
+						</n8n-option>
+					</n8n-select>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .collection-parameter {
 	padding-left: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index 2a4ddafe0726e..e810d1e26cbef 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+	loading: boolean;
+	title?: string;
+}>();
+</script>
+
 <template>
 	<n8n-card :class="$style.card" v-bind="$attrs">
 		<template v-if="!loading && title" #header>
@@ -10,13 +17,6 @@
 	</n8n-card>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-	loading: boolean;
-	title?: string;
-}>();
-</script>
-
 <style lang="scss" module>
 .card {
 	min-width: 235px;
diff --git a/packages/editor-ui/src/components/CommunityPackageCard.vue b/packages/editor-ui/src/components/CommunityPackageCard.vue
index 7beae2c16d384..80618315dc5c7 100644
--- a/packages/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/editor-ui/src/components/CommunityPackageCard.vue
@@ -1,66 +1,3 @@
-<template>
-	<div :class="$style.cardContainer" data-test-id="community-package-card">
-		<div v-if="loading" :class="$style.cardSkeleton">
-			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
-			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
-		</div>
-		<div v-else-if="communityPackage" :class="$style.packageCard">
-			<div :class="$style.cardInfoContainer">
-				<div :class="$style.cardTitle">
-					<n8n-text :bold="true" size="large">{{ communityPackage.packageName }}</n8n-text>
-				</div>
-				<div :class="$style.cardSubtitle">
-					<n8n-text :bold="true" size="small" color="text-light">
-						{{
-							$locale.baseText('settings.communityNodes.packageNodes.label', {
-								adjustToNumber: communityPackage.installedNodes.length,
-							})
-						}}:&nbsp;
-					</n8n-text>
-					<n8n-text size="small" color="text-light">
-						<span v-for="(node, index) in communityPackage.installedNodes" :key="node.name">
-							{{ node.name
-							}}<span v-if="index != communityPackage.installedNodes.length - 1">,</span>
-						</span>
-					</n8n-text>
-				</div>
-			</div>
-			<div :class="$style.cardControlsContainer">
-				<n8n-text :bold="true" size="large" color="text-light">
-					v{{ communityPackage.installedVersion }}
-				</n8n-text>
-				<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
-					<template #content>
-						<div>
-							{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
-						</div>
-					</template>
-					<n8n-icon icon="exclamation-triangle" color="danger" size="large" />
-				</n8n-tooltip>
-				<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
-					<template #content>
-						<div>
-							{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
-						</div>
-					</template>
-					<n8n-button outline label="Update" @click="onUpdateClick" />
-				</n8n-tooltip>
-				<n8n-tooltip v-else placement="top">
-					<template #content>
-						<div>
-							{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
-						</div>
-					</template>
-					<n8n-icon icon="check-circle" color="text-light" size="large" />
-				</n8n-tooltip>
-				<div :class="$style.cardActions">
-					<n8n-action-toggle :actions="packageActions" @action="onAction"></n8n-action-toggle>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { useUIStore } from '@/stores/ui.store';
 import type { PublicInstalledPackage } from 'n8n-workflow';
@@ -125,6 +62,69 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.cardContainer" data-test-id="community-package-card">
+		<div v-if="loading" :class="$style.cardSkeleton">
+			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+		</div>
+		<div v-else-if="communityPackage" :class="$style.packageCard">
+			<div :class="$style.cardInfoContainer">
+				<div :class="$style.cardTitle">
+					<n8n-text :bold="true" size="large">{{ communityPackage.packageName }}</n8n-text>
+				</div>
+				<div :class="$style.cardSubtitle">
+					<n8n-text :bold="true" size="small" color="text-light">
+						{{
+							$locale.baseText('settings.communityNodes.packageNodes.label', {
+								adjustToNumber: communityPackage.installedNodes.length,
+							})
+						}}:&nbsp;
+					</n8n-text>
+					<n8n-text size="small" color="text-light">
+						<span v-for="(node, index) in communityPackage.installedNodes" :key="node.name">
+							{{ node.name
+							}}<span v-if="index != communityPackage.installedNodes.length - 1">,</span>
+						</span>
+					</n8n-text>
+				</div>
+			</div>
+			<div :class="$style.cardControlsContainer">
+				<n8n-text :bold="true" size="large" color="text-light">
+					v{{ communityPackage.installedVersion }}
+				</n8n-text>
+				<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
+						</div>
+					</template>
+					<n8n-icon icon="exclamation-triangle" color="danger" size="large" />
+				</n8n-tooltip>
+				<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
+						</div>
+					</template>
+					<n8n-button outline label="Update" @click="onUpdateClick" />
+				</n8n-tooltip>
+				<n8n-tooltip v-else placement="top">
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
+						</div>
+					</template>
+					<n8n-icon icon="check-circle" color="text-light" size="large" />
+				</n8n-tooltip>
+				<div :class="$style.cardActions">
+					<n8n-action-toggle :actions="packageActions" @action="onAction"></n8n-action-toggle>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .cardContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index e7f089ae3cfa1..60e8b7a0aab3b 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -1,95 +1,3 @@
-<template>
-	<Modal
-		width="540px"
-		:name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY"
-		:title="$locale.baseText('settings.communityNodes.installModal.title')"
-		:event-bus="modalBus"
-		:center="true"
-		:before-close="onModalClose"
-		:show-close="!loading"
-	>
-		<template #content>
-			<div :class="[$style.descriptionContainer, 'p-s']">
-				<div>
-					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.description') }}
-					</n8n-text>
-					{{ ' ' }}
-					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
-						{{ $locale.baseText('generic.moreInfo') }}
-					</n8n-link>
-				</div>
-				<n8n-button
-					:label="$locale.baseText('settings.communityNodes.browseButton.label')"
-					icon="external-link-alt"
-					:class="$style.browseButton"
-					@click="openNPMPage"
-				/>
-			</div>
-			<div :class="[$style.formContainer, 'mt-m']">
-				<n8n-input-label
-					:class="$style.labelTooltip"
-					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
-					:tooltip-text="
-						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
-							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
-						})
-					"
-				>
-					<n8n-input
-						v-model="packageName"
-						name="packageNameInput"
-						type="text"
-						:maxlength="214"
-						:placeholder="
-							$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')
-						"
-						:required="true"
-						:disabled="loading"
-						@blur="onInputBlur"
-					/>
-				</n8n-input-label>
-				<div :class="[$style.infoText, 'mt-4xs']">
-					<span
-						size="small"
-						:class="[$style.infoText, infoTextErrorMessage ? $style.error : '']"
-						v-text="infoTextErrorMessage"
-					></span>
-				</div>
-				<el-checkbox
-					v-model="userAgreed"
-					:class="[$style.checkbox, checkboxWarning ? $style.error : '', 'mt-l']"
-					:disabled="loading"
-					data-test-id="user-agreement-checkbox"
-					@update:model-value="onCheckboxChecked"
-				>
-					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
-					><br />
-					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
-						$locale.baseText('generic.moreInfo')
-					}}</n8n-link>
-				</el-checkbox>
-			</div>
-		</template>
-		<template #footer>
-			<n8n-button
-				:loading="loading"
-				:disabled="!userAgreed || packageName === '' || loading"
-				:label="
-					loading
-						? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
-						: $locale.baseText('settings.communityNodes.installModal.installButton.label')
-				"
-				size="large"
-				float="right"
-				data-test-id="install-community-package-button"
-				@click="onInstallClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -189,6 +97,98 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		width="540px"
+		:name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY"
+		:title="$locale.baseText('settings.communityNodes.installModal.title')"
+		:event-bus="modalBus"
+		:center="true"
+		:before-close="onModalClose"
+		:show-close="!loading"
+	>
+		<template #content>
+			<div :class="[$style.descriptionContainer, 'p-s']">
+				<div>
+					<n8n-text>
+						{{ $locale.baseText('settings.communityNodes.installModal.description') }}
+					</n8n-text>
+					{{ ' ' }}
+					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
+						{{ $locale.baseText('generic.moreInfo') }}
+					</n8n-link>
+				</div>
+				<n8n-button
+					:label="$locale.baseText('settings.communityNodes.browseButton.label')"
+					icon="external-link-alt"
+					:class="$style.browseButton"
+					@click="openNPMPage"
+				/>
+			</div>
+			<div :class="[$style.formContainer, 'mt-m']">
+				<n8n-input-label
+					:class="$style.labelTooltip"
+					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
+					:tooltip-text="
+						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
+							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
+						})
+					"
+				>
+					<n8n-input
+						v-model="packageName"
+						name="packageNameInput"
+						type="text"
+						:maxlength="214"
+						:placeholder="
+							$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')
+						"
+						:required="true"
+						:disabled="loading"
+						@blur="onInputBlur"
+					/>
+				</n8n-input-label>
+				<div :class="[$style.infoText, 'mt-4xs']">
+					<span
+						size="small"
+						:class="[$style.infoText, infoTextErrorMessage ? $style.error : '']"
+						v-text="infoTextErrorMessage"
+					></span>
+				</div>
+				<el-checkbox
+					v-model="userAgreed"
+					:class="[$style.checkbox, checkboxWarning ? $style.error : '', 'mt-l']"
+					:disabled="loading"
+					data-test-id="user-agreement-checkbox"
+					@update:model-value="onCheckboxChecked"
+				>
+					<n8n-text>
+						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
+					><br />
+					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
+						$locale.baseText('generic.moreInfo')
+					}}</n8n-link>
+				</el-checkbox>
+			</div>
+		</template>
+		<template #footer>
+			<n8n-button
+				:loading="loading"
+				:disabled="!userAgreed || packageName === '' || loading"
+				:label="
+					loading
+						? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
+						: $locale.baseText('settings.communityNodes.installModal.installButton.label')
+				"
+				size="large"
+				float="right"
+				data-test-id="install-community-package-button"
+				@click="onInstallClick"
+			/>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .descriptionContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index cd13888bbb972..6f07866287142 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -1,37 +1,3 @@
-<template>
-	<Modal
-		width="540px"
-		:name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"
-		:title="getModalContent.title"
-		:event-bus="modalBus"
-		:center="true"
-		:show-close="!loading"
-		:before-close="onModalClose"
-	>
-		<template #content>
-			<n8n-text>{{ getModalContent.message }}</n8n-text>
-			<div
-				v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE"
-				:class="$style.descriptionContainer"
-			>
-				<n8n-info-tip theme="info" type="note" :bold="false">
-					<span v-text="getModalContent.description"></span>
-				</n8n-info-tip>
-			</div>
-		</template>
-		<template #footer>
-			<n8n-button
-				:loading="loading"
-				:disabled="loading"
-				:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
-				size="large"
-				float="right"
-				@click="onConfirmButtonClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script>
 import { defineComponent } from 'vue';
 import Modal from '@/components/Modal.vue';
@@ -194,6 +160,40 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		width="540px"
+		:name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"
+		:title="getModalContent.title"
+		:event-bus="modalBus"
+		:center="true"
+		:show-close="!loading"
+		:before-close="onModalClose"
+	>
+		<template #content>
+			<n8n-text>{{ getModalContent.message }}</n8n-text>
+			<div
+				v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE"
+				:class="$style.descriptionContainer"
+			>
+				<n8n-info-tip theme="info" type="note" :bold="false">
+					<span v-text="getModalContent.description"></span>
+				</n8n-info-tip>
+			</div>
+		</template>
+		<template #footer>
+			<n8n-button
+				:loading="loading"
+				:disabled="loading"
+				:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
+				size="large"
+				float="right"
+				@click="onConfirmButtonClick"
+			/>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .descriptionContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index a0364b43e5b90..d0832340572db 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -1,37 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:event-bus="modalBus"
-		:center="true"
-		:close-on-press-escape="false"
-		:before-close="closeDialog"
-		custom-class="contact-prompt-modal"
-		width="460px"
-	>
-		<template #header>
-			<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
-		</template>
-		<template #content>
-			<div :class="$style.description">
-				<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
-			</div>
-			<div @keyup.enter="send">
-				<n8n-input v-model="email" placeholder="Your email address" />
-			</div>
-			<div :class="$style.disclaimer">
-				<n8n-text size="small" color="text-base"
-					>David from our product team will get in touch personally</n8n-text
-				>
-			</div>
-		</template>
-		<template #footer>
-			<div :class="$style.footer">
-				<n8n-button label="Send" float="right" :disabled="!isEmailValid" @click="send" />
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -118,6 +84,40 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:center="true"
+		:close-on-press-escape="false"
+		:before-close="closeDialog"
+		custom-class="contact-prompt-modal"
+		width="460px"
+	>
+		<template #header>
+			<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
+		</template>
+		<template #content>
+			<div :class="$style.description">
+				<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
+			</div>
+			<div @keyup.enter="send">
+				<n8n-input v-model="email" placeholder="Your email address" />
+			</div>
+			<div :class="$style.disclaimer">
+				<n8n-text size="small" color="text-base"
+					>David from our product team will get in touch personally</n8n-text
+				>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.footer">
+				<n8n-button label="Send" float="right" :disabled="!isEmailValid" @click="send" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .description {
 	margin-bottom: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index 8171885b265b5..fb68984a57afd 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -1,27 +1,3 @@
-<template>
-	<div>
-		<n8n-input-label :label="label">
-			<div
-				:class="{
-					[$style.copyText]: true,
-					[$style[size]]: true,
-					[$style.collapsed]: collapse,
-					[$style.noHover]: disableCopy,
-					'ph-no-capture': redactValue,
-				}"
-				data-test-id="copy-input"
-				@click="copy"
-			>
-				<span ref="copyInputValue">{{ value }}</span>
-				<div v-if="!disableCopy" :class="$style.copyButton">
-					<span>{{ copyButtonText }}</span>
-				</div>
-			</div>
-		</n8n-input-label>
-		<div v-if="hint" :class="$style.hint">{{ hint }}</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { useClipboard } from '@/composables/useClipboard';
 import { useI18n } from '@/composables/useI18n';
@@ -71,6 +47,30 @@ function copy() {
 }
 </script>
 
+<template>
+	<div>
+		<n8n-input-label :label="label">
+			<div
+				:class="{
+					[$style.copyText]: true,
+					[$style[size]]: true,
+					[$style.collapsed]: collapse,
+					[$style.noHover]: disableCopy,
+					'ph-no-capture': redactValue,
+				}"
+				data-test-id="copy-input"
+				@click="copy"
+			>
+				<span ref="copyInputValue">{{ value }}</span>
+				<div v-if="!disableCopy" :class="$style.copyButton">
+					<span>{{ copyButtonText }}</span>
+				</div>
+			</div>
+		</n8n-input-label>
+		<div v-if="hint" :class="$style.hint">{{ hint }}</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .copyText {
 	span {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index ca79b07f836dd..86e8c65e1cfde 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -1,161 +1,3 @@
-<template>
-	<div>
-		<div :class="$style.config" data-test-id="node-credentials-config-container">
-			<Banner
-				v-show="showValidationWarning"
-				theme="danger"
-				:message="
-					$locale.baseText(
-						`credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow${
-							credentialPermissions.update ? '' : '.sharee'
-						}`,
-						{ interpolate: { owner: credentialOwnerName } },
-					)
-				"
-			/>
-
-			<Banner
-				v-if="authError && !showValidationWarning"
-				theme="danger"
-				:message="
-					$locale.baseText(
-						`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
-							credentialPermissions.update ? '' : '.sharee'
-						}`,
-						{ interpolate: { owner: credentialOwnerName } },
-					)
-				"
-				:details="authError"
-				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
-				button-loading-label="Retrying"
-				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-				:button-loading="isRetesting"
-				@click="$emit('retest')"
-			/>
-
-			<Banner
-				v-show="showOAuthSuccessBanner && !showValidationWarning"
-				theme="success"
-				:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
-				:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
-				:button-title="
-					$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')
-				"
-				data-test-id="oauth-connect-success-banner"
-				@click="$emit('oauth')"
-			>
-				<template v-if="isGoogleOAuthType" #button>
-					<p
-						:class="$style.googleReconnectLabel"
-						v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
-					/>
-					<GoogleAuthButton @click="$emit('oauth')" />
-				</template>
-			</Banner>
-
-			<Banner
-				v-show="testedSuccessfully && !showValidationWarning"
-				theme="success"
-				:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
-				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
-				:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
-				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-				:button-loading="isRetesting"
-				data-test-id="credentials-config-container-test-success"
-				@click="$emit('retest')"
-			/>
-
-			<template v-if="credentialPermissions.update">
-				<n8n-notice v-if="documentationUrl && credentialProperties.length && !docs" theme="warning">
-					{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
-					<span class="ml-4xs">
-						<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
-							{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
-						</n8n-link>
-					</span>
-				</n8n-notice>
-
-				<AuthTypeSelector
-					v-if="showAuthTypeSelector && isNewCredential"
-					:credential-type="credentialType"
-					@auth-type-changed="onAuthTypeChange"
-				/>
-
-				<CopyInput
-					v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
-					:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
-					:value="oAuthCallbackUrl"
-					:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
-					:hint="
-						$locale.baseText('credentialEdit.credentialConfig.subtitle', {
-							interpolate: { appName },
-						})
-					"
-					:toast-title="
-						$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
-					"
-					:redact-value="true"
-				/>
-			</template>
-			<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
-				<div>
-					<n8n-info-tip :bold="false">
-						{{
-							$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
-								interpolate: { credentialOwnerName },
-							})
-						}}
-					</n8n-info-tip>
-				</div>
-			</EnterpriseEdition>
-
-			<CredentialInputs
-				v-if="credentialType && credentialPermissions.update"
-				:credential-data="credentialData"
-				:credential-properties="credentialProperties"
-				:documentation-url="documentationUrl"
-				:show-validation-warnings="showValidationWarning"
-				@update="onDataChange"
-			/>
-
-			<OauthButton
-				v-if="
-					isOAuthType &&
-					requiredPropertiesFilled &&
-					!isOAuthConnected &&
-					credentialPermissions.update
-				"
-				:is-google-o-auth-type="isGoogleOAuthType"
-				data-test-id="oauth-connect-button"
-				@click="$emit('oauth')"
-			/>
-
-			<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
-				{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
-			</n8n-text>
-
-			<EnterpriseEdition :features="[EnterpriseEditionFeature.ExternalSecrets]">
-				<template #fallback>
-					<n8n-info-tip class="mt-s">
-						{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets') }}
-						<n8n-link bold :to="$locale.baseText('settings.externalSecrets.docs')" size="small">
-							{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets.moreInfo') }}
-						</n8n-link>
-					</n8n-info-tip>
-				</template>
-			</EnterpriseEdition>
-		</div>
-		<CredentialDocs
-			v-if="docs"
-			:credential-type="credentialType"
-			:documentation-url="documentationUrl"
-			:docs="docs"
-			:class="$style.docs"
-		>
-		</CredentialDocs>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed, onBeforeMount, watch } from 'vue';
 
@@ -345,6 +187,164 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 });
 </script>
 
+<template>
+	<div>
+		<div :class="$style.config" data-test-id="node-credentials-config-container">
+			<Banner
+				v-show="showValidationWarning"
+				theme="danger"
+				:message="
+					$locale.baseText(
+						`credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow${
+							credentialPermissions.update ? '' : '.sharee'
+						}`,
+						{ interpolate: { owner: credentialOwnerName } },
+					)
+				"
+			/>
+
+			<Banner
+				v-if="authError && !showValidationWarning"
+				theme="danger"
+				:message="
+					$locale.baseText(
+						`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
+							credentialPermissions.update ? '' : '.sharee'
+						}`,
+						{ interpolate: { owner: credentialOwnerName } },
+					)
+				"
+				:details="authError"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+				button-loading-label="Retrying"
+				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+				:button-loading="isRetesting"
+				@click="$emit('retest')"
+			/>
+
+			<Banner
+				v-show="showOAuthSuccessBanner && !showValidationWarning"
+				theme="success"
+				:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
+				:button-title="
+					$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')
+				"
+				data-test-id="oauth-connect-success-banner"
+				@click="$emit('oauth')"
+			>
+				<template v-if="isGoogleOAuthType" #button>
+					<p
+						:class="$style.googleReconnectLabel"
+						v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
+					/>
+					<GoogleAuthButton @click="$emit('oauth')" />
+				</template>
+			</Banner>
+
+			<Banner
+				v-show="testedSuccessfully && !showValidationWarning"
+				theme="success"
+				:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+				:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
+				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+				:button-loading="isRetesting"
+				data-test-id="credentials-config-container-test-success"
+				@click="$emit('retest')"
+			/>
+
+			<template v-if="credentialPermissions.update">
+				<n8n-notice v-if="documentationUrl && credentialProperties.length && !docs" theme="warning">
+					{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
+					<span class="ml-4xs">
+						<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
+							{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
+						</n8n-link>
+					</span>
+				</n8n-notice>
+
+				<AuthTypeSelector
+					v-if="showAuthTypeSelector && isNewCredential"
+					:credential-type="credentialType"
+					@auth-type-changed="onAuthTypeChange"
+				/>
+
+				<CopyInput
+					v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
+					:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
+					:value="oAuthCallbackUrl"
+					:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
+					:hint="
+						$locale.baseText('credentialEdit.credentialConfig.subtitle', {
+							interpolate: { appName },
+						})
+					"
+					:toast-title="
+						$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
+					"
+					:redact-value="true"
+				/>
+			</template>
+			<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
+				<div>
+					<n8n-info-tip :bold="false">
+						{{
+							$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
+								interpolate: { credentialOwnerName },
+							})
+						}}
+					</n8n-info-tip>
+				</div>
+			</EnterpriseEdition>
+
+			<CredentialInputs
+				v-if="credentialType && credentialPermissions.update"
+				:credential-data="credentialData"
+				:credential-properties="credentialProperties"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarning"
+				@update="onDataChange"
+			/>
+
+			<OauthButton
+				v-if="
+					isOAuthType &&
+					requiredPropertiesFilled &&
+					!isOAuthConnected &&
+					credentialPermissions.update
+				"
+				:is-google-o-auth-type="isGoogleOAuthType"
+				data-test-id="oauth-connect-button"
+				@click="$emit('oauth')"
+			/>
+
+			<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
+				{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
+			</n8n-text>
+
+			<EnterpriseEdition :features="[EnterpriseEditionFeature.ExternalSecrets]">
+				<template #fallback>
+					<n8n-info-tip class="mt-s">
+						{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets') }}
+						<n8n-link bold :to="$locale.baseText('settings.externalSecrets.docs')" size="small">
+							{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets.moreInfo') }}
+						</n8n-link>
+					</n8n-info-tip>
+				</template>
+			</EnterpriseEdition>
+		</div>
+		<CredentialDocs
+			v-if="docs"
+			:credential-type="credentialType"
+			:documentation-url="documentationUrl"
+			:docs="docs"
+			:class="$style.docs"
+		>
+		</CredentialDocs>
+	</div>
+</template>
+
 <style lang="scss" module>
 .config {
 	--notice-margin: 0;
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
index 18db06c938195..7a468e8e07389 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
@@ -1,27 +1,3 @@
-<template>
-	<div :class="$style.docs">
-		<div :class="$style.header">
-			<p :class="$style.title">{{ i18n.baseText('credentialEdit.credentialEdit.setupGuide') }}</p>
-			<n8n-link
-				:class="$style.docsLink"
-				theme="text"
-				new-window
-				:to="documentationUrl"
-				@click="onDocumentationUrlClick"
-			>
-				{{ i18n.baseText('credentialEdit.credentialEdit.docs') }}
-				<n8n-icon icon="external-link-alt" size="small" :class="$style.externalIcon" />
-			</n8n-link>
-		</div>
-		<VueMarkdown :source="docs" :options="{ html: true }" :class="$style.markdown" />
-		<Feedback
-			:class="$style.feedback"
-			:model-value="submittedFeedback"
-			@update:model-value="onFeedback"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import Feedback from '@/components/Feedback.vue';
 import { useI18n } from '@/composables/useI18n';
@@ -66,6 +42,30 @@ function onDocumentationUrlClick(): void {
 }
 </script>
 
+<template>
+	<div :class="$style.docs">
+		<div :class="$style.header">
+			<p :class="$style.title">{{ i18n.baseText('credentialEdit.credentialEdit.setupGuide') }}</p>
+			<n8n-link
+				:class="$style.docsLink"
+				theme="text"
+				new-window
+				:to="documentationUrl"
+				@click="onDocumentationUrlClick"
+			>
+				{{ i18n.baseText('credentialEdit.credentialEdit.docs') }}
+				<n8n-icon icon="external-link-alt" size="small" :class="$style.externalIcon" />
+			</n8n-link>
+		</div>
+		<VueMarkdown :source="docs" :options="{ html: true }" :class="$style.markdown" />
+		<Feedback
+			:class="$style.feedback"
+			:model-value="submittedFeedback"
+			@update:model-value="onFeedback"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .docs {
 	background-color: var(--color-background-light);
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index e2c7c428e5a36..a6b1d2127ca64 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -1,118 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:custom-class="$style.credentialModal"
-		:event-bus="modalBus"
-		:loading="loading"
-		:before-close="beforeClose"
-		width="70%"
-		height="80%"
-	>
-		<template #header>
-			<div :class="$style.header">
-				<div :class="$style.credInfo">
-					<div :class="$style.credIcon">
-						<CredentialIcon :credential-type-name="defaultCredentialTypeName" />
-					</div>
-					<InlineNameEdit
-						:model-value="credentialName"
-						:subtitle="credentialType ? credentialType.displayName : ''"
-						:readonly="!credentialPermissions.update || !credentialType"
-						type="Credential"
-						data-test-id="credential-name"
-						@update:model-value="onNameEdit"
-					/>
-				</div>
-				<div :class="$style.credActions">
-					<n8n-icon-button
-						v-if="currentCredential && credentialPermissions.delete"
-						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
-						icon="trash"
-						type="tertiary"
-						:disabled="isSaving"
-						:loading="isDeleting"
-						data-test-id="credential-delete-button"
-						@click="deleteCredential"
-					/>
-					<SaveButton
-						v-if="showSaveButton"
-						:saved="!hasUnsavedChanges && !isTesting"
-						:is-saving="isSaving || isTesting"
-						:saving-label="
-							isTesting
-								? $locale.baseText('credentialEdit.credentialEdit.testing')
-								: $locale.baseText('credentialEdit.credentialEdit.saving')
-						"
-						data-test-id="credential-save-button"
-						@click="saveCredential"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #content>
-			<div :class="$style.container" data-test-id="credential-edit-dialog">
-				<div :class="$style.sidebar">
-					<n8n-menu
-						mode="tabs"
-						:items="sidebarItems"
-						:transparent-background="true"
-						@select="onTabSelect"
-					></n8n-menu>
-				</div>
-				<div
-					v-if="activeTab === 'connection' && credentialType"
-					ref="contentRef"
-					:class="$style.mainContent"
-				>
-					<CredentialConfig
-						:credential-type="credentialType"
-						:credential-properties="credentialProperties"
-						:credential-data="credentialData"
-						:credential-id="credentialId"
-						:show-validation-warning="showValidationWarning"
-						:auth-error="authError"
-						:tested-successfully="testedSuccessfully"
-						:is-o-auth-type="isOAuthType"
-						:is-o-auth-connected="isOAuthConnected"
-						:is-retesting="isRetesting"
-						:parent-types="parentTypes"
-						:required-properties-filled="requiredPropertiesFilled"
-						:credential-permissions="credentialPermissions"
-						:all-o-auth2-base-properties-overridden="allOAuth2BasePropertiesOverridden"
-						:mode="mode"
-						:selected-credential="selectedCredential"
-						:show-auth-type-selector="requiredCredentials"
-						@update="onDataChange"
-						@oauth="oAuthCredentialAuthorize"
-						@retest="retestCredential"
-						@scroll-to-top="scrollToTop"
-						@auth-type-changed="onAuthTypeChanged"
-					/>
-				</div>
-				<div v-else-if="showSharingContent" :class="$style.mainContent">
-					<CredentialSharing
-						:credential="currentCredential"
-						:credential-data="credentialData"
-						:credential-id="credentialId"
-						:credential-permissions="credentialPermissions"
-						:modal-bus="modalBus"
-						@update:model-value="onChangeSharedWith"
-					/>
-				</div>
-				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
-					<CredentialInfo
-						:current-credential="currentCredential"
-						:credential-permissions="credentialPermissions"
-					/>
-				</div>
-				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
-					<FeatureComingSoon :feature-id="activeTab.split('/')[1]"></FeatureComingSoon>
-				</div>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
@@ -1143,6 +1028,121 @@ function resetCredentialData(): void {
 }
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:custom-class="$style.credentialModal"
+		:event-bus="modalBus"
+		:loading="loading"
+		:before-close="beforeClose"
+		width="70%"
+		height="80%"
+	>
+		<template #header>
+			<div :class="$style.header">
+				<div :class="$style.credInfo">
+					<div :class="$style.credIcon">
+						<CredentialIcon :credential-type-name="defaultCredentialTypeName" />
+					</div>
+					<InlineNameEdit
+						:model-value="credentialName"
+						:subtitle="credentialType ? credentialType.displayName : ''"
+						:readonly="!credentialPermissions.update || !credentialType"
+						type="Credential"
+						data-test-id="credential-name"
+						@update:model-value="onNameEdit"
+					/>
+				</div>
+				<div :class="$style.credActions">
+					<n8n-icon-button
+						v-if="currentCredential && credentialPermissions.delete"
+						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
+						icon="trash"
+						type="tertiary"
+						:disabled="isSaving"
+						:loading="isDeleting"
+						data-test-id="credential-delete-button"
+						@click="deleteCredential"
+					/>
+					<SaveButton
+						v-if="showSaveButton"
+						:saved="!hasUnsavedChanges && !isTesting"
+						:is-saving="isSaving || isTesting"
+						:saving-label="
+							isTesting
+								? $locale.baseText('credentialEdit.credentialEdit.testing')
+								: $locale.baseText('credentialEdit.credentialEdit.saving')
+						"
+						data-test-id="credential-save-button"
+						@click="saveCredential"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #content>
+			<div :class="$style.container" data-test-id="credential-edit-dialog">
+				<div :class="$style.sidebar">
+					<n8n-menu
+						mode="tabs"
+						:items="sidebarItems"
+						:transparent-background="true"
+						@select="onTabSelect"
+					></n8n-menu>
+				</div>
+				<div
+					v-if="activeTab === 'connection' && credentialType"
+					ref="contentRef"
+					:class="$style.mainContent"
+				>
+					<CredentialConfig
+						:credential-type="credentialType"
+						:credential-properties="credentialProperties"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:show-validation-warning="showValidationWarning"
+						:auth-error="authError"
+						:tested-successfully="testedSuccessfully"
+						:is-o-auth-type="isOAuthType"
+						:is-o-auth-connected="isOAuthConnected"
+						:is-retesting="isRetesting"
+						:parent-types="parentTypes"
+						:required-properties-filled="requiredPropertiesFilled"
+						:credential-permissions="credentialPermissions"
+						:all-o-auth2-base-properties-overridden="allOAuth2BasePropertiesOverridden"
+						:mode="mode"
+						:selected-credential="selectedCredential"
+						:show-auth-type-selector="requiredCredentials"
+						@update="onDataChange"
+						@oauth="oAuthCredentialAuthorize"
+						@retest="retestCredential"
+						@scroll-to-top="scrollToTop"
+						@auth-type-changed="onAuthTypeChanged"
+					/>
+				</div>
+				<div v-else-if="showSharingContent" :class="$style.mainContent">
+					<CredentialSharing
+						:credential="currentCredential"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:credential-permissions="credentialPermissions"
+						:modal-bus="modalBus"
+						@update:model-value="onChangeSharedWith"
+					/>
+				</div>
+				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
+					<CredentialInfo
+						:current-credential="currentCredential"
+						:credential-permissions="credentialPermissions"
+					/>
+				</div>
+				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
+					<FeatureComingSoon :feature-id="activeTab.split('/')[1]"></FeatureComingSoon>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .credentialModal {
 	--dialog-max-width: 1200px;
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
index 9574c2c0e0aef..445bfb8c06522 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
@@ -1,3 +1,23 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import TimeAgo from '../TimeAgo.vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+
+export default defineComponent({
+	name: 'CredentialInfo',
+	components: {
+		TimeAgo,
+	},
+	props: ['currentCredential', 'credentialPermissions'],
+	methods: {
+		shortNodeType(nodeType: INodeTypeDescription) {
+			return this.$locale.shortNodeType(nodeType.name);
+		},
+	},
+});
+</script>
+
 <template>
 	<div :class="$style.container">
 		<el-row v-if="currentCredential">
@@ -37,26 +57,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import TimeAgo from '../TimeAgo.vue';
-import type { INodeTypeDescription } from 'n8n-workflow';
-
-export default defineComponent({
-	name: 'CredentialInfo',
-	components: {
-		TimeAgo,
-	},
-	props: ['currentCredential', 'credentialPermissions'],
-	methods: {
-		shortNodeType(nodeType: INodeTypeDescription) {
-			return this.$locale.shortNodeType(nodeType.name);
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
index 7ab0276c54d63..9d27959affc5e 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
@@ -1,28 +1,3 @@
-<template>
-	<div v-if="credentialProperties.length" :class="$style.container" @keydown.stop>
-		<form
-			v-for="parameter in credentialProperties"
-			:key="parameter.name"
-			autocomplete="off"
-			data-test-id="credential-connection-parameter"
-			@submit.prevent
-		>
-			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
-			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
-			<ParameterInputExpanded
-				v-else
-				:parameter="parameter"
-				:value="credentialDataValues[parameter.name]"
-				:documentation-url="documentationUrl"
-				:show-validation-warnings="showValidationWarnings"
-				:label="{ size: 'medium' }"
-				event-source="credentials"
-				@update="valueChanged"
-			/>
-		</form>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type {
 	ICredentialDataDecryptedObject,
@@ -60,6 +35,31 @@ function valueChanged(parameterData: IUpdateInformation) {
 }
 </script>
 
+<template>
+	<div v-if="credentialProperties.length" :class="$style.container" @keydown.stop>
+		<form
+			v-for="parameter in credentialProperties"
+			:key="parameter.name"
+			autocomplete="off"
+			data-test-id="credential-connection-parameter"
+			@submit.prevent
+		>
+			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
+			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
+			<ParameterInputExpanded
+				v-else
+				:parameter="parameter"
+				:value="credentialDataValues[parameter.name]"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarnings"
+				:label="{ size: 'medium' }"
+				event-source="credentials"
+				@update="valueChanged"
+			/>
+		</form>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index f86e48a0c5a2c..5d8c68c1aeaaf 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -1,52 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div v-if="!isSharingEnabled">
-			<N8nActionBox
-				:heading="
-					$locale.baseText(
-						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.title,
-					)
-				"
-				:description="
-					$locale.baseText(
-						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.description,
-					)
-				"
-				:button-text="
-					$locale.baseText(
-						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.button,
-					)
-				"
-				@click:button="goToUpgrade"
-			/>
-		</div>
-		<div v-else>
-			<N8nInfoTip v-if="credentialPermissions.share" :bold="false" class="mb-s">
-				{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
-			</N8nInfoTip>
-			<N8nInfoTip v-else-if="isHomeTeamProject" :bold="false" class="mb-s">
-				{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee.team') }}
-			</N8nInfoTip>
-			<N8nInfoTip v-else :bold="false" class="mb-s">
-				{{
-					$locale.baseText('credentialEdit.credentialSharing.info.sharee.personal', {
-						interpolate: { credentialOwnerName },
-					})
-				}}
-			</N8nInfoTip>
-			<ProjectSharing
-				v-model="sharedWithProjects"
-				:projects="projects"
-				:roles="credentialRoles"
-				:home-project="homeProject"
-				:readonly="!credentialPermissions.share"
-				:static="!credentialPermissions.share"
-				:placeholder="sharingSelectPlaceholder"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type {
 	ICredentialsResponse,
@@ -208,6 +159,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div v-if="!isSharingEnabled">
+			<N8nActionBox
+				:heading="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.title,
+					)
+				"
+				:description="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.description,
+					)
+				"
+				:button-text="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.button,
+					)
+				"
+				@click:button="goToUpgrade"
+			/>
+		</div>
+		<div v-else>
+			<N8nInfoTip v-if="credentialPermissions.share" :bold="false" class="mb-s">
+				{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
+			</N8nInfoTip>
+			<N8nInfoTip v-else-if="isHomeTeamProject" :bold="false" class="mb-s">
+				{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee.team') }}
+			</N8nInfoTip>
+			<N8nInfoTip v-else :bold="false" class="mb-s">
+				{{
+					$locale.baseText('credentialEdit.credentialSharing.info.sharee.personal', {
+						interpolate: { credentialOwnerName },
+					})
+				}}
+			</N8nInfoTip>
+			<ProjectSharing
+				v-model="sharedWithProjects"
+				:projects="projects"
+				:roles="credentialRoles"
+				:home-project="homeProject"
+				:readonly="!credentialPermissions.share"
+				:static="!credentialPermissions.share"
+				:placeholder="sharingSelectPlaceholder"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue b/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
index c2c73bc9c6cbd..8a67505130e0d 100644
--- a/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
@@ -1,11 +1,3 @@
-<template>
-	<button
-		:class="$style.googleAuthBtn"
-		:title="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
-		:style="googleAuthButtons"
-	/>
-</template>
-
 <script lang="ts" setup>
 import { useUIStore } from '@/stores/ui.store';
 import { useRootStore } from '@/stores/root.store';
@@ -20,6 +12,14 @@ const googleAuthButtons = {
 };
 </script>
 
+<template>
+	<button
+		:class="$style.googleAuthBtn"
+		:title="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
+		:style="googleAuthButtons"
+	/>
+</template>
+
 <style module lang="scss">
 .googleAuthBtn {
 	--google-auth-btn-height: 46px;
diff --git a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
index 27da6ee5702c2..427b15a4d517e 100644
--- a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
@@ -1,3 +1,11 @@
+<script lang="ts" setup>
+import GoogleAuthButton from './GoogleAuthButton.vue';
+
+defineProps<{
+	isGoogleOAuthType: boolean;
+}>();
+</script>
+
 <template>
 	<div :class="$style.container">
 		<GoogleAuthButton v-if="isGoogleOAuthType" />
@@ -9,14 +17,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import GoogleAuthButton from './GoogleAuthButton.vue';
-
-defineProps<{
-	isGoogleOAuthType: boolean;
-}>();
-</script>
-
 <style module lang="scss">
 .container {
 	display: inline-block;
diff --git a/packages/editor-ui/src/components/CredentialsSelect.vue b/packages/editor-ui/src/components/CredentialsSelect.vue
index 859f554ea137b..ab1ced6f583d8 100644
--- a/packages/editor-ui/src/components/CredentialsSelect.vue
+++ b/packages/editor-ui/src/components/CredentialsSelect.vue
@@ -1,53 +1,3 @@
-<template>
-	<div>
-		<div :class="$style['parameter-value-container']">
-			<n8n-select
-				ref="innerSelect"
-				:size="inputSize"
-				filterable
-				:model-value="displayValue"
-				:placeholder="$locale.baseText('parameterInput.select')"
-				:title="displayTitle"
-				:disabled="isReadOnly"
-				data-test-id="credential-select"
-				@update:model-value="(value: string) => $emit('update:modelValue', value)"
-				@keydown.stop
-				@focus="$emit('setFocus')"
-				@blur="$emit('onBlur')"
-			>
-				<n8n-option
-					v-for="credType in supportedCredentialTypes"
-					:key="credType.name"
-					:value="credType.name"
-					:label="credType.displayName"
-					data-test-id="credential-select-option"
-				>
-					<div class="list-option">
-						<div class="option-headline">
-							{{ credType.displayName }}
-						</div>
-					</div>
-				</n8n-option>
-			</n8n-select>
-			<slot name="issues-and-options" />
-		</div>
-
-		<ScopesNotice
-			v-if="scopes.length > 0"
-			:active-credential-type="activeCredentialType"
-			:scopes="scopes"
-		/>
-		<div>
-			<NodeCredentials
-				:node="node"
-				:readonly="isReadOnly"
-				:override-cred-type="node.parameters[parameter.name]"
-				@credential-selected="(updateInformation) => $emit('credentialSelected', updateInformation)"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type { ICredentialType } from 'n8n-workflow';
 import { defineComponent } from 'vue';
@@ -156,6 +106,56 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div>
+		<div :class="$style['parameter-value-container']">
+			<n8n-select
+				ref="innerSelect"
+				:size="inputSize"
+				filterable
+				:model-value="displayValue"
+				:placeholder="$locale.baseText('parameterInput.select')"
+				:title="displayTitle"
+				:disabled="isReadOnly"
+				data-test-id="credential-select"
+				@update:model-value="(value: string) => $emit('update:modelValue', value)"
+				@keydown.stop
+				@focus="$emit('setFocus')"
+				@blur="$emit('onBlur')"
+			>
+				<n8n-option
+					v-for="credType in supportedCredentialTypes"
+					:key="credType.name"
+					:value="credType.name"
+					:label="credType.displayName"
+					data-test-id="credential-select-option"
+				>
+					<div class="list-option">
+						<div class="option-headline">
+							{{ credType.displayName }}
+						</div>
+					</div>
+				</n8n-option>
+			</n8n-select>
+			<slot name="issues-and-options" />
+		</div>
+
+		<ScopesNotice
+			v-if="scopes.length > 0"
+			:active-credential-type="activeCredentialType"
+			:scopes="scopes"
+		/>
+		<div>
+			<NodeCredentials
+				:node="node"
+				:readonly="isReadOnly"
+				:override-cred-type="node.parameters[parameter.name]"
+				@credential-selected="(updateInformation) => $emit('credentialSelected', updateInformation)"
+			/>
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .parameter-value-container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index c932db45bde75..0b31f03029c16 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -1,62 +1,3 @@
-<template>
-	<Modal
-		:name="CREDENTIAL_SELECT_MODAL_KEY"
-		:event-bus="modalBus"
-		width="50%"
-		:center="true"
-		:loading="loading"
-		max-width="460px"
-		min-height="250px"
-	>
-		<template #header>
-			<h2 :class="$style.title">
-				{{ $locale.baseText('credentialSelectModal.addNewCredential') }}
-			</h2>
-		</template>
-		<template #content>
-			<div>
-				<div :class="$style.subtitle">
-					{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}
-				</div>
-				<n8n-select
-					ref="select"
-					filterable
-					default-first-option
-					:placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
-					size="xlarge"
-					:model-value="selected"
-					data-test-id="new-credential-type-select"
-					@update:model-value="onSelect"
-				>
-					<template #prefix>
-						<font-awesome-icon icon="search" />
-					</template>
-					<n8n-option
-						v-for="credential in credentialsStore.allCredentialTypes"
-						:key="credential.name"
-						:value="credential.name"
-						:label="credential.displayName"
-						filterable
-						data-test-id="new-credential-type-select-option"
-					/>
-				</n8n-select>
-			</div>
-		</template>
-		<template #footer>
-			<div :class="$style.footer">
-				<n8n-button
-					:label="$locale.baseText('credentialSelectModal.continue')"
-					float="right"
-					size="large"
-					:disabled="!selected"
-					data-test-id="new-credential-type-button"
-					@click="openCredentialType"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
@@ -125,6 +66,65 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="CREDENTIAL_SELECT_MODAL_KEY"
+		:event-bus="modalBus"
+		width="50%"
+		:center="true"
+		:loading="loading"
+		max-width="460px"
+		min-height="250px"
+	>
+		<template #header>
+			<h2 :class="$style.title">
+				{{ $locale.baseText('credentialSelectModal.addNewCredential') }}
+			</h2>
+		</template>
+		<template #content>
+			<div>
+				<div :class="$style.subtitle">
+					{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}
+				</div>
+				<n8n-select
+					ref="select"
+					filterable
+					default-first-option
+					:placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
+					size="xlarge"
+					:model-value="selected"
+					data-test-id="new-credential-type-select"
+					@update:model-value="onSelect"
+				>
+					<template #prefix>
+						<font-awesome-icon icon="search" />
+					</template>
+					<n8n-option
+						v-for="credential in credentialsStore.allCredentialTypes"
+						:key="credential.name"
+						:value="credential.name"
+						:label="credential.displayName"
+						filterable
+						data-test-id="new-credential-type-select-option"
+					/>
+				</n8n-select>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.footer">
+				<n8n-button
+					:label="$locale.baseText('credentialSelectModal.continue')"
+					float="right"
+					size="large"
+					:disabled="!selected"
+					data-test-id="new-credential-type-button"
+					@click="openCredentialType"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .title {
 	font-size: var(--font-size-xl);
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index 5adfaaf05af3c..6f1fcab336084 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -1,20 +1,3 @@
-<template>
-	<component
-		:is="tag"
-		ref="wrapper"
-		:class="{ [$style.dragging]: isDragging }"
-		@mousedown="onDragStart"
-	>
-		<slot :is-dragging="isDragging"></slot>
-
-		<Teleport to="body">
-			<div v-show="isDragging" ref="draggable" :class="$style.draggable" :style="draggableStyle">
-				<slot name="preview" :can-drop="canDrop" :el="draggingElement"></slot>
-			</div>
-		</Teleport>
-	</component>
-</template>
-
 <script setup lang="ts">
 import type { XYPosition } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -137,6 +120,23 @@ const onDragEnd = () => {
 };
 </script>
 
+<template>
+	<component
+		:is="tag"
+		ref="wrapper"
+		:class="{ [$style.dragging]: isDragging }"
+		@mousedown="onDragStart"
+	>
+		<slot :is-dragging="isDragging"></slot>
+
+		<Teleport to="body">
+			<div v-show="isDragging" ref="draggable" :class="$style.draggable" :style="draggableStyle">
+				<slot name="preview" :can-drop="canDrop" :el="draggingElement"></slot>
+			</div>
+		</Teleport>
+	</component>
+</template>
+
 <style lang="scss" module>
 .dragging {
 	visibility: visible;
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index 6197d3c347837..2fa41beff2c27 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -1,9 +1,3 @@
-<template>
-	<div ref="targetRef" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mouseup="onMouseUp">
-		<slot :droppable="droppable" :active-drop="activeDrop"></slot>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { XYPosition } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -84,3 +78,9 @@ function getStickyPosition(): XYPosition | null {
 	return [left + props.stickyOffset[0], top + props.stickyOffset[1]];
 }
 </script>
+
+<template>
+	<div ref="targetRef" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mouseup="onMouseUp">
+		<slot :droppable="droppable" :active-drop="activeDrop"></slot>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index a2c60236f6d56..0864d839110df 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -1,52 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:event-bus="modalBus"
-		:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
-		:center="true"
-		width="420px"
-		@enter="save"
-	>
-		<template #content>
-			<div :class="$style.content">
-				<n8n-input
-					ref="nameInput"
-					v-model="name"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
-					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
-				/>
-				<TagsDropdown
-					v-if="settingsStore.areTagsEnabled"
-					ref="dropdown"
-					v-model="currentTagIds"
-					:create-enabled="true"
-					:event-bus="dropdownBus"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
-					@blur="onTagsBlur"
-					@esc="onTagsEsc"
-				/>
-			</div>
-		</template>
-		<template #footer="{ close }">
-			<div :class="$style.footer">
-				<n8n-button
-					:loading="isSaving"
-					:label="$locale.baseText('duplicateWorkflowDialog.save')"
-					float="right"
-					@click="save"
-				/>
-				<n8n-button
-					type="secondary"
-					:disabled="isSaving"
-					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
-					float="right"
-					@click="close"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -199,6 +150,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
+		:center="true"
+		width="420px"
+		@enter="save"
+	>
+		<template #content>
+			<div :class="$style.content">
+				<n8n-input
+					ref="nameInput"
+					v-model="name"
+					:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
+					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
+				/>
+				<TagsDropdown
+					v-if="settingsStore.areTagsEnabled"
+					ref="dropdown"
+					v-model="currentTagIds"
+					:create-enabled="true"
+					:event-bus="dropdownBus"
+					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
+					@blur="onTagsBlur"
+					@esc="onTagsEsc"
+				/>
+			</div>
+		</template>
+		<template #footer="{ close }">
+			<div :class="$style.footer">
+				<n8n-button
+					:loading="isSaving"
+					:label="$locale.baseText('duplicateWorkflowDialog.save')"
+					float="right"
+					@click="save"
+				/>
+				<n8n-button
+					type="secondary"
+					:disabled="isSaving"
+					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
+					float="right"
+					@click="close"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .content {
 	> *:not(:last-child) {
diff --git a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
index a2dec568889cc..1ee2f4eebaae1 100644
--- a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
+++ b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
@@ -1,10 +1,3 @@
-<template>
-	<div>
-		<slot v-if="canAccess" />
-		<slot v-else name="fallback" />
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import type { EnterpriseEditionFeatureValue } from '@/Interface';
@@ -29,3 +22,10 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<slot v-if="canAccess" />
+		<slot v-else name="fallback" />
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index 7cf3710c3ea65..666b29ef68d0b 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -1,10 +1,3 @@
-<template>
-	<!-- mock el-input element to apply styles -->
-	<div :class="{ 'el-input': true, 'static-size': staticSize }" :data-value="hiddenValue">
-		<slot></slot>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 
@@ -26,6 +19,13 @@ const hiddenValue = computed(() => {
 });
 </script>
 
+<template>
+	<!-- mock el-input element to apply styles -->
+	<div :class="{ 'el-input': true, 'static-size': staticSize }" :data-value="hiddenValue">
+		<slot></slot>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 $--horiz-padding: 15px;
 
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index 939701e141616..88f45b7374217 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -1,19 +1,3 @@
-<template>
-	<ExpandableInputBase :model-value="modelValue" :placeholder="placeholder">
-		<input
-			ref="inputRef"
-			class="el-input__inner"
-			:value="modelValue"
-			:placeholder="placeholder"
-			:maxlength="maxlength"
-			size="4"
-			@input="onInput"
-			@keydown.enter="onEnter"
-			@keydown.esc="onEscape"
-		/>
-	</ExpandableInputBase>
-</template>
-
 <script setup lang="ts">
 import type { EventBus } from 'n8n-design-system';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
@@ -78,3 +62,19 @@ function onEscape() {
 	emit('esc');
 }
 </script>
+
+<template>
+	<ExpandableInputBase :model-value="modelValue" :placeholder="placeholder">
+		<input
+			ref="inputRef"
+			class="el-input__inner"
+			:value="modelValue"
+			:placeholder="placeholder"
+			:maxlength="maxlength"
+			size="4"
+			@input="onInput"
+			@keydown.enter="onEnter"
+			@keydown.esc="onEscape"
+		/>
+	</ExpandableInputBase>
+</template>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index 4a0a80b886b75..d4f2851583ef9 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import ExpandableInputBase from './ExpandableInputBase.vue';
+
+type Props = {
+	modelValue: string;
+};
+
+defineProps<Props>();
+</script>
+
 <template>
 	<ExpandableInputBase :model-value="modelValue" :static-size="true">
 		<input
@@ -9,16 +19,6 @@
 	</ExpandableInputBase>
 </template>
 
-<script setup lang="ts">
-import ExpandableInputBase from './ExpandableInputBase.vue';
-
-type Props = {
-	modelValue: string;
-};
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" scoped>
 input,
 input:hover {
diff --git a/packages/editor-ui/src/components/ExpressionEditModal.vue b/packages/editor-ui/src/components/ExpressionEditModal.vue
index cb58f67a58217..bf8fe9bc445a1 100644
--- a/packages/editor-ui/src/components/ExpressionEditModal.vue
+++ b/packages/editor-ui/src/components/ExpressionEditModal.vue
@@ -1,94 +1,3 @@
-<template>
-	<el-dialog
-		width="calc(100vw - var(--spacing-3xl))"
-		append-to-body
-		:class="$style.modal"
-		:model-value="dialogVisible"
-		:before-close="closeDialog"
-	>
-		<button :class="$style.close" @click="closeDialog">
-			<Close height="18" width="18" />
-		</button>
-		<div :class="$style.container">
-			<div :class="$style.sidebar">
-				<N8nInput
-					v-model="search"
-					size="small"
-					:class="$style.search"
-					:placeholder="i18n.baseText('ndv.search.placeholder.input.schema')"
-				>
-					<template #prefix>
-						<N8nIcon :class="$style.ioSearchIcon" icon="search" />
-					</template>
-				</N8nInput>
-
-				<RunDataSchema
-					:class="$style.schema"
-					:search="appliedSearch"
-					:nodes="parentNodes"
-					mapping-enabled
-					pane-type="input"
-					connection-type="main"
-				/>
-			</div>
-
-			<div :class="$style.io">
-				<div :class="$style.input">
-					<div :class="$style.header">
-						<N8nText bold size="large">
-							{{ i18n.baseText('expressionEdit.expression') }}
-						</N8nText>
-						<N8nText
-							:class="$style.tip"
-							size="small"
-							v-html="i18n.baseText('expressionTip.javascript')"
-						/>
-					</div>
-
-					<DraggableTarget :class="$style.editorContainer" type="mapping" @drop="onDrop">
-						<template #default>
-							<ExpressionEditorModalInput
-								ref="expressionInputRef"
-								:model-value="modelValue"
-								:is-read-only="isReadOnly"
-								:path="path"
-								:class="[
-									$style.editor,
-									{
-										'ph-no-capture': redactValues,
-									},
-								]"
-								data-test-id="expression-modal-input"
-								@change="valueChanged"
-								@close="closeDialog"
-							/>
-						</template>
-					</DraggableTarget>
-				</div>
-
-				<div :class="$style.output">
-					<div :class="$style.header">
-						<N8nText bold size="large">
-							{{ i18n.baseText('parameterInput.result') }}
-						</N8nText>
-						<OutputItemSelect />
-					</div>
-
-					<div :class="[$style.editorContainer, { 'ph-no-capture': redactValues }]">
-						<ExpressionOutput
-							ref="expressionResultRef"
-							:class="$style.editor"
-							:segments="segments"
-							:extensions="theme"
-							data-test-id="expression-modal-output"
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	</el-dialog>
-</template>
-
 <script setup lang="ts">
 import ExpressionEditorModalInput from '@/components/ExpressionEditorModal/ExpressionEditorModalInput.vue';
 import { computed, ref, toRaw, watch } from 'vue';
@@ -211,6 +120,97 @@ async function onDrop(expression: string, event: MouseEvent) {
 }
 </script>
 
+<template>
+	<el-dialog
+		width="calc(100vw - var(--spacing-3xl))"
+		append-to-body
+		:class="$style.modal"
+		:model-value="dialogVisible"
+		:before-close="closeDialog"
+	>
+		<button :class="$style.close" @click="closeDialog">
+			<Close height="18" width="18" />
+		</button>
+		<div :class="$style.container">
+			<div :class="$style.sidebar">
+				<N8nInput
+					v-model="search"
+					size="small"
+					:class="$style.search"
+					:placeholder="i18n.baseText('ndv.search.placeholder.input.schema')"
+				>
+					<template #prefix>
+						<N8nIcon :class="$style.ioSearchIcon" icon="search" />
+					</template>
+				</N8nInput>
+
+				<RunDataSchema
+					:class="$style.schema"
+					:search="appliedSearch"
+					:nodes="parentNodes"
+					mapping-enabled
+					pane-type="input"
+					connection-type="main"
+				/>
+			</div>
+
+			<div :class="$style.io">
+				<div :class="$style.input">
+					<div :class="$style.header">
+						<N8nText bold size="large">
+							{{ i18n.baseText('expressionEdit.expression') }}
+						</N8nText>
+						<N8nText
+							:class="$style.tip"
+							size="small"
+							v-html="i18n.baseText('expressionTip.javascript')"
+						/>
+					</div>
+
+					<DraggableTarget :class="$style.editorContainer" type="mapping" @drop="onDrop">
+						<template #default>
+							<ExpressionEditorModalInput
+								ref="expressionInputRef"
+								:model-value="modelValue"
+								:is-read-only="isReadOnly"
+								:path="path"
+								:class="[
+									$style.editor,
+									{
+										'ph-no-capture': redactValues,
+									},
+								]"
+								data-test-id="expression-modal-input"
+								@change="valueChanged"
+								@close="closeDialog"
+							/>
+						</template>
+					</DraggableTarget>
+				</div>
+
+				<div :class="$style.output">
+					<div :class="$style.header">
+						<N8nText bold size="large">
+							{{ i18n.baseText('parameterInput.result') }}
+						</N8nText>
+						<OutputItemSelect />
+					</div>
+
+					<div :class="[$style.editorContainer, { 'ph-no-capture': redactValues }]">
+						<ExpressionOutput
+							ref="expressionResultRef"
+							:class="$style.editor"
+							:segments="segments"
+							:extensions="theme"
+							data-test-id="expression-modal-output"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
 <style module lang="scss">
 .modal {
 	--dialog-close-top: var(--spacing-m);
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 68a65ada6e84f..5816dab1ccc98 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -1,7 +1,3 @@
-<template>
-	<div ref="root" :class="$style.editor" @keydown.stop></div>
-</template>
-
 <script setup lang="ts">
 import { history } from '@codemirror/commands';
 import { Prec } from '@codemirror/state';
@@ -109,6 +105,10 @@ onMounted(() => {
 defineExpose({ editor });
 </script>
 
+<template>
+	<div ref="root" :class="$style.editor" @keydown.stop></div>
+</template>
+
 <style lang="scss" module>
 :global(.cm-content) {
 	border-radius: var(--border-radius-base);
diff --git a/packages/editor-ui/src/components/ExpressionFunctionIcon.vue b/packages/editor-ui/src/components/ExpressionFunctionIcon.vue
index d7f60f556e527..156f54f9a0cc7 100644
--- a/packages/editor-ui/src/components/ExpressionFunctionIcon.vue
+++ b/packages/editor-ui/src/components/ExpressionFunctionIcon.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+	name: 'ExpressionFunctionIcon',
+};
+</script>
+
 <template>
 	<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
@@ -7,10 +13,4 @@
 	</svg>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'ExpressionFunctionIcon',
-};
-</script>
-
 <style lang="scss"></style>
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index 3dcf1e58b13df..a96b3d0ec31f8 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -1,31 +1,3 @@
-<template>
-	<div v-if="featureInfo" :class="[$style.container]">
-		<div v-if="showTitle" class="mb-2xl">
-			<n8n-heading size="2xlarge">
-				{{ $locale.baseText(featureInfo.featureName) }}
-			</n8n-heading>
-		</div>
-		<div v-if="featureInfo.infoText" class="mb-l">
-			<n8n-info-tip theme="info" type="note">
-				<span v-html="$locale.baseText(featureInfo.infoText)"></span>
-			</n8n-info-tip>
-		</div>
-		<div :class="$style.actionBoxContainer">
-			<n8n-action-box
-				:description="$locale.baseText(featureInfo.actionBoxDescription)"
-				:button-text="
-					$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')
-				"
-				@click:button="openLinkPage"
-			>
-				<template #heading>
-					<span v-html="$locale.baseText(featureInfo.actionBoxTitle)" />
-				</template>
-			</n8n-action-box>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -75,6 +47,34 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="featureInfo" :class="[$style.container]">
+		<div v-if="showTitle" class="mb-2xl">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText(featureInfo.featureName) }}
+			</n8n-heading>
+		</div>
+		<div v-if="featureInfo.infoText" class="mb-l">
+			<n8n-info-tip theme="info" type="note">
+				<span v-html="$locale.baseText(featureInfo.infoText)"></span>
+			</n8n-info-tip>
+		</div>
+		<div :class="$style.actionBoxContainer">
+			<n8n-action-box
+				:description="$locale.baseText(featureInfo.actionBoxDescription)"
+				:button-text="
+					$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')
+				"
+				@click:button="openLinkPage"
+			>
+				<template #heading>
+					<span v-html="$locale.baseText(featureInfo.actionBoxTitle)" />
+				</template>
+			</n8n-action-box>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .actionBoxContainer {
 	text-align: center;
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 68d74dd04f1c5..98c5ef5971abc 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,131 +1,3 @@
-<template>
-	<div
-		class="fixed-collection-parameter"
-		:data-test-id="`fixed-collection-${parameter.name}`"
-		@keydown.stop
-	>
-		<div v-if="getProperties.length === 0" class="no-items-exist">
-			<n8n-text size="small">{{
-				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
-			}}</n8n-text>
-		</div>
-
-		<div
-			v-for="property in getProperties"
-			:key="property.name"
-			class="fixed-collection-parameter-property"
-		>
-			<n8n-input-label
-				v-if="property.displayName !== '' && parameter.options && parameter.options.length !== 1"
-				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
-				:underline="true"
-				size="small"
-				color="text-dark"
-			/>
-			<div v-if="multipleValues">
-				<div
-					v-for="(_, index) in mutableValues[property.name]"
-					:key="property.name + index"
-					class="parameter-item"
-				>
-					<div
-						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
-					>
-						<div v-if="!isReadOnly" class="delete-option">
-							<n8n-icon-button
-								type="tertiary"
-								text
-								size="mini"
-								icon="trash"
-								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-								@click="deleteOption(property.name, index)"
-							></n8n-icon-button>
-							<n8n-icon-button
-								v-if="sortable && index !== 0"
-								type="tertiary"
-								text
-								size="mini"
-								icon="angle-up"
-								:title="$locale.baseText('fixedCollectionParameter.moveUp')"
-								@click="moveOptionUp(property.name, index)"
-							></n8n-icon-button>
-							<n8n-icon-button
-								v-if="sortable && index !== mutableValues[property.name].length - 1"
-								type="tertiary"
-								text
-								size="mini"
-								icon="angle-down"
-								:title="$locale.baseText('fixedCollectionParameter.moveDown')"
-								@click="moveOptionDown(property.name, index)"
-							></n8n-icon-button>
-						</div>
-						<Suspense>
-							<ParameterInputList
-								:parameters="property.values"
-								:node-values="nodeValues"
-								:path="getPropertyPath(property.name, index)"
-								:hide-delete="true"
-								:is-read-only="isReadOnly"
-								@value-changed="valueChanged"
-							/>
-						</Suspense>
-					</div>
-				</div>
-			</div>
-			<div v-else class="parameter-item">
-				<div class="parameter-item-wrapper">
-					<div v-if="!isReadOnly" class="delete-option">
-						<n8n-icon-button
-							type="tertiary"
-							text
-							size="mini"
-							icon="trash"
-							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-							@click="deleteOption(property.name)"
-						></n8n-icon-button>
-					</div>
-					<ParameterInputList
-						:parameters="property.values"
-						:node-values="nodeValues"
-						:path="getPropertyPath(property.name)"
-						:is-read-only="isReadOnly"
-						class="parameter-item"
-						:hide-delete="true"
-						@value-changed="valueChanged"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<div v-if="parameterOptions.length > 0 && !isReadOnly" class="controls">
-			<n8n-button
-				v-if="parameter.options && parameter.options.length === 1"
-				type="tertiary"
-				block
-				data-test-id="fixed-collection-add"
-				:label="getPlaceholderText"
-				@click="optionSelected(parameter.options[0].name)"
-			/>
-			<div v-else class="add-option">
-				<n8n-select
-					v-model="selectedOption"
-					:placeholder="getPlaceholderText"
-					size="small"
-					filterable
-					@update:model-value="optionSelected"
-				>
-					<n8n-option
-						v-for="item in parameterOptions"
-						:key="item.name"
-						:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
-						:value="item.name"
-					></n8n-option>
-				</n8n-select>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -339,6 +211,134 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		class="fixed-collection-parameter"
+		:data-test-id="`fixed-collection-${parameter.name}`"
+		@keydown.stop
+	>
+		<div v-if="getProperties.length === 0" class="no-items-exist">
+			<n8n-text size="small">{{
+				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
+			}}</n8n-text>
+		</div>
+
+		<div
+			v-for="property in getProperties"
+			:key="property.name"
+			class="fixed-collection-parameter-property"
+		>
+			<n8n-input-label
+				v-if="property.displayName !== '' && parameter.options && parameter.options.length !== 1"
+				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
+				:underline="true"
+				size="small"
+				color="text-dark"
+			/>
+			<div v-if="multipleValues">
+				<div
+					v-for="(_, index) in mutableValues[property.name]"
+					:key="property.name + index"
+					class="parameter-item"
+				>
+					<div
+						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
+					>
+						<div v-if="!isReadOnly" class="delete-option">
+							<n8n-icon-button
+								type="tertiary"
+								text
+								size="mini"
+								icon="trash"
+								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+								@click="deleteOption(property.name, index)"
+							></n8n-icon-button>
+							<n8n-icon-button
+								v-if="sortable && index !== 0"
+								type="tertiary"
+								text
+								size="mini"
+								icon="angle-up"
+								:title="$locale.baseText('fixedCollectionParameter.moveUp')"
+								@click="moveOptionUp(property.name, index)"
+							></n8n-icon-button>
+							<n8n-icon-button
+								v-if="sortable && index !== mutableValues[property.name].length - 1"
+								type="tertiary"
+								text
+								size="mini"
+								icon="angle-down"
+								:title="$locale.baseText('fixedCollectionParameter.moveDown')"
+								@click="moveOptionDown(property.name, index)"
+							></n8n-icon-button>
+						</div>
+						<Suspense>
+							<ParameterInputList
+								:parameters="property.values"
+								:node-values="nodeValues"
+								:path="getPropertyPath(property.name, index)"
+								:hide-delete="true"
+								:is-read-only="isReadOnly"
+								@value-changed="valueChanged"
+							/>
+						</Suspense>
+					</div>
+				</div>
+			</div>
+			<div v-else class="parameter-item">
+				<div class="parameter-item-wrapper">
+					<div v-if="!isReadOnly" class="delete-option">
+						<n8n-icon-button
+							type="tertiary"
+							text
+							size="mini"
+							icon="trash"
+							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+							@click="deleteOption(property.name)"
+						></n8n-icon-button>
+					</div>
+					<ParameterInputList
+						:parameters="property.values"
+						:node-values="nodeValues"
+						:path="getPropertyPath(property.name)"
+						:is-read-only="isReadOnly"
+						class="parameter-item"
+						:hide-delete="true"
+						@value-changed="valueChanged"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="parameterOptions.length > 0 && !isReadOnly" class="controls">
+			<n8n-button
+				v-if="parameter.options && parameter.options.length === 1"
+				type="tertiary"
+				block
+				data-test-id="fixed-collection-add"
+				:label="getPlaceholderText"
+				@click="optionSelected(parameter.options[0].name)"
+			/>
+			<div v-else class="add-option">
+				<n8n-select
+					v-model="selectedOption"
+					:placeholder="getPlaceholderText"
+					size="small"
+					filterable
+					@update:model-value="optionSelected"
+				>
+					<n8n-option
+						v-for="item in parameterOptions"
+						:key="item.name"
+						:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
+						:value="item.name"
+					></n8n-option>
+				</n8n-select>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .fixed-collection-parameter {
 	padding-left: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index 87c964959fe8c..889067d5fa19a 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.wrapper" @click="navigateTo">
-		<font-awesome-icon :class="$style.icon" icon="arrow-left" />
-		<div :class="$style.text" v-text="$locale.baseText('template.buttons.goBackButton')" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { VIEWS } from '@/constants';
@@ -16,6 +9,13 @@ const navigateTo = () => {
 };
 </script>
 
+<template>
+	<div :class="$style.wrapper" @click="navigateTo">
+		<font-awesome-icon :class="$style.icon" icon="arrow-left" />
+		<div :class="$style.text" v-text="$locale.baseText('template.buttons.goBackButton')" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index f5ae0630ff495..b30894ceb10b5 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -1,44 +1,3 @@
-<template>
-	<div
-		:class="$style.wrapper"
-		:style="iconStyleData"
-		@click="() => $emit('click')"
-		@mouseover="showTooltip = true"
-		@mouseleave="showTooltip = false"
-	>
-		<div :class="$style.tooltip">
-			<n8n-tooltip placement="top" :visible="showTooltip">
-				<template #content>
-					<div v-text="nodeType.displayName"></div>
-				</template>
-				<span />
-			</n8n-tooltip>
-		</div>
-		<div v-if="nodeIconData !== null" :class="$style.icon" title="">
-			<div :class="$style.iconWrapper" :style="iconStyleData">
-				<div v-if="nodeIconData !== null" :class="$style.icon">
-					<img
-						v-if="nodeIconData.type === 'file'"
-						:src="nodeIconData.fileBuffer || nodeIconData.path"
-						:style="imageStyleData"
-					/>
-					<font-awesome-icon
-						v-else
-						:icon="nodeIconData.icon || nodeIconData.path"
-						:style="fontStyleData"
-					/>
-				</div>
-				<div v-else class="node-icon-placeholder">
-					{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
-				</div>
-			</div>
-		</div>
-		<div v-else :class="$style.placeholder">
-			{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type StyleValue, defineComponent, type PropType } from 'vue';
 
@@ -151,6 +110,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:class="$style.wrapper"
+		:style="iconStyleData"
+		@click="() => $emit('click')"
+		@mouseover="showTooltip = true"
+		@mouseleave="showTooltip = false"
+	>
+		<div :class="$style.tooltip">
+			<n8n-tooltip placement="top" :visible="showTooltip">
+				<template #content>
+					<div v-text="nodeType.displayName"></div>
+				</template>
+				<span />
+			</n8n-tooltip>
+		</div>
+		<div v-if="nodeIconData !== null" :class="$style.icon" title="">
+			<div :class="$style.iconWrapper" :style="iconStyleData">
+				<div v-if="nodeIconData !== null" :class="$style.icon">
+					<img
+						v-if="nodeIconData.type === 'file'"
+						:src="nodeIconData.fileBuffer || nodeIconData.path"
+						:style="imageStyleData"
+					/>
+					<font-awesome-icon
+						v-else
+						:icon="nodeIconData.icon || nodeIconData.path"
+						:style="fontStyleData"
+					/>
+				</div>
+				<div v-else class="node-icon-placeholder">
+					{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
+				</div>
+			</div>
+		</div>
+		<div v-else :class="$style.placeholder">
+			{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	cursor: pointer;
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index 1c90a3870f9a7..c4c730cde7079 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.editor">
-		<div ref="htmlEditor" data-test-id="html-editor-container"></div>
-		<slot name="suffix" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { history } from '@codemirror/commands';
 import {
@@ -247,6 +240,13 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.editor">
+		<div ref="htmlEditor" data-test-id="html-editor-container"></div>
+		<slot name="suffix" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .editor {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index 77939b5032c87..4a1ff64282431 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -1,44 +1,3 @@
-<template>
-	<Modal
-		width="700px"
-		:title="i18n.baseText('importCurlModal.title')"
-		:event-bus="modalBus"
-		:name="IMPORT_CURL_MODAL_KEY"
-		:center="true"
-	>
-		<template #content>
-			<div :class="$style.container">
-				<N8nInputLabel :label="i18n.baseText('importCurlModal.input.label')" color="text-dark">
-					<N8nInput
-						ref="inputRef"
-						:model-value="curlCommand"
-						type="textarea"
-						:rows="5"
-						:placeholder="i18n.baseText('importCurlModal.input.placeholder')"
-						@update:model-value="onInput"
-						@focus="$event.target.select()"
-					/>
-				</N8nInputLabel>
-			</div>
-		</template>
-		<template #footer>
-			<div :class="$style.modalFooter">
-				<N8nNotice
-					:class="$style.notice"
-					:content="i18n.baseText('ImportCurlModal.notice.content')"
-				/>
-				<div>
-					<N8nButton
-						float="right"
-						:label="i18n.baseText('importCurlModal.button.label')"
-						@click="onImport"
-					/>
-				</div>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts" setup>
 import Modal from '@/components/Modal.vue';
 import { IMPORT_CURL_MODAL_KEY } from '@/constants';
@@ -116,6 +75,47 @@ async function onImport() {
 }
 </script>
 
+<template>
+	<Modal
+		width="700px"
+		:title="i18n.baseText('importCurlModal.title')"
+		:event-bus="modalBus"
+		:name="IMPORT_CURL_MODAL_KEY"
+		:center="true"
+	>
+		<template #content>
+			<div :class="$style.container">
+				<N8nInputLabel :label="i18n.baseText('importCurlModal.input.label')" color="text-dark">
+					<N8nInput
+						ref="inputRef"
+						:model-value="curlCommand"
+						type="textarea"
+						:rows="5"
+						:placeholder="i18n.baseText('importCurlModal.input.placeholder')"
+						@update:model-value="onInput"
+						@focus="$event.target.select()"
+					/>
+				</N8nInputLabel>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.modalFooter">
+				<N8nNotice
+					:class="$style.notice"
+					:content="i18n.baseText('ImportCurlModal.notice.content')"
+				/>
+				<div>
+					<N8nButton
+						float="right"
+						:label="i18n.baseText('importCurlModal.button.label')"
+						@click="onImport"
+					/>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .modalFooter {
 	justify-content: space-between;
diff --git a/packages/editor-ui/src/components/InlineNameEdit.vue b/packages/editor-ui/src/components/InlineNameEdit.vue
index 020e422c538f8..6c9e2f4a41122 100644
--- a/packages/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/editor-ui/src/components/InlineNameEdit.vue
@@ -1,35 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<span v-if="readonly" :class="$style.headline">
-			{{ modelValue }}
-		</span>
-		<div
-			v-else
-			:class="[$style.headline, $style['headline-editable']]"
-			@keydown.stop
-			@click="enableNameEdit"
-		>
-			<div v-if="!isNameEdit">
-				<span>{{ modelValue }}</span>
-				<i><font-awesome-icon icon="pen" /></i>
-			</div>
-			<div v-else :class="$style.nameInput">
-				<n8n-input
-					ref="nameInput"
-					:model-value="modelValue"
-					size="xlarge"
-					:maxlength="64"
-					@update:model-value="onNameEdit"
-					@change="disableNameEdit"
-				/>
-			</div>
-		</div>
-		<div v-if="!isNameEdit && subtitle" :class="$style.subtitle">
-			{{ subtitle }}
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { nextTick, ref } from 'vue';
 import { useToast } from '@/composables/useToast';
@@ -79,6 +47,38 @@ const disableNameEdit = () => {
 onClickOutside(nameInput, disableNameEdit);
 </script>
 
+<template>
+	<div :class="$style.container">
+		<span v-if="readonly" :class="$style.headline">
+			{{ modelValue }}
+		</span>
+		<div
+			v-else
+			:class="[$style.headline, $style['headline-editable']]"
+			@keydown.stop
+			@click="enableNameEdit"
+		>
+			<div v-if="!isNameEdit">
+				<span>{{ modelValue }}</span>
+				<i><font-awesome-icon icon="pen" /></i>
+			</div>
+			<div v-else :class="$style.nameInput">
+				<n8n-input
+					ref="nameInput"
+					:model-value="modelValue"
+					size="xlarge"
+					:maxlength="64"
+					@update:model-value="onNameEdit"
+					@change="disableNameEdit"
+				/>
+			</div>
+		</div>
+		<div v-if="!isNameEdit && subtitle" :class="$style.subtitle">
+			{{ subtitle }}
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 722f51891a8b3..2a2ab61484462 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -1,25 +1,3 @@
-<template>
-	<span class="inline-edit" @keydown.stop>
-		<span v-if="isEditEnabled && !isDisabled">
-			<ExpandableInputEdit
-				v-model="newValue"
-				:placeholder="placeholder"
-				:maxlength="maxLength"
-				:autofocus="true"
-				:event-bus="inputBus"
-				@update:model-value="onInput"
-				@esc="onEscape"
-				@blur="onBlur"
-				@enter="submit"
-			/>
-		</span>
-
-		<span v-else class="preview" @click="onClick">
-			<ExpandableInputPreview :model-value="previewValue || modelValue" />
-		</span>
-	</span>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
@@ -100,6 +78,28 @@ function onEscape() {
 }
 </script>
 
+<template>
+	<span class="inline-edit" @keydown.stop>
+		<span v-if="isEditEnabled && !isDisabled">
+			<ExpandableInputEdit
+				v-model="newValue"
+				:placeholder="placeholder"
+				:maxlength="maxLength"
+				:autofocus="true"
+				:event-bus="inputBus"
+				@update:model-value="onInput"
+				@esc="onEscape"
+				@blur="onBlur"
+				@enter="submit"
+			/>
+		</span>
+
+		<span v-else class="preview" @click="onClick">
+			<ExpandableInputPreview :model-value="previewValue || modelValue" />
+		</span>
+	</span>
+</template>
+
 <style lang="scss" scoped>
 .preview {
 	cursor: pointer;
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 3b7b1432ac5f0..135d228c51531 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -1,138 +1,3 @@
-<template>
-	<RunData
-		:node="currentNode"
-		:nodes="isMappingMode ? rootNodesParents : parentNodes"
-		:workflow="workflow"
-		:run-index="runIndex"
-		:linked-runs="linkedRuns"
-		:can-link-runs="!mappedNode && canLinkRuns"
-		:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
-		:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
-		:is-executing="isExecutingPrevious"
-		:executing-message="$locale.baseText('ndv.input.executingPrevious')"
-		:push-ref="pushRef"
-		:override-outputs="connectedCurrentNodeOutputs"
-		:mapping-enabled="isMappingEnabled"
-		:distance-from-active="currentNodeDepth"
-		:is-production-execution-preview="isProductionExecutionPreview"
-		:is-pane-active="isPaneActive"
-		pane-type="input"
-		data-test-id="ndv-input-panel"
-		@activate-pane="activatePane"
-		@item-hover="$emit('itemHover', $event)"
-		@link-run="onLinkRun"
-		@unlink-run="onUnlinkRun"
-		@run-change="onRunIndexChange"
-		@table-mounted="$emit('tableMounted', $event)"
-		@search="$emit('search', $event)"
-	>
-		<template #header>
-			<div :class="$style.titleSection">
-				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
-				<n8n-radio-buttons
-					v-if="isActiveNodeConfig && !readOnly"
-					:options="inputModes"
-					:model-value="inputMode"
-					@update:model-value="onInputModeChange"
-				/>
-			</div>
-		</template>
-		<template #input-select>
-			<InputNodeSelect
-				v-if="parentNodes.length && currentNodeName"
-				:model-value="currentNodeName"
-				:workflow="workflow"
-				:nodes="parentNodes"
-				@update:model-value="onInputNodeChange"
-			/>
-		</template>
-		<template v-if="isMappingMode" #before-data>
-			<!--
-						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
-						Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
-				-->
-			<component :is="'style'">button.linkRun { display: none }</component>
-			<div :class="$style.mappedNode">
-				<InputNodeSelect
-					:model-value="mappedNode"
-					:workflow="workflow"
-					:nodes="rootNodesParents"
-					@update:model-value="onMappedNodeSelected"
-				/>
-			</div>
-		</template>
-		<template #node-not-run>
-			<div
-				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
-				:class="$style.noOutputData"
-			>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('ndv.input.noOutputData.title')
-				}}</n8n-text>
-				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
-					<template #content>
-						<div
-							v-html="
-								$locale.baseText('dataMapping.dragFromPreviousHint', {
-									interpolate: { name: focusedMappableInput },
-								})
-							"
-						></div>
-					</template>
-					<NodeExecuteButton
-						type="secondary"
-						hide-icon
-						:transparent="true"
-						:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
-						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
-						telemetry-source="inputs"
-						data-test-id="execute-previous-node"
-						@execute="onNodeExecute"
-					/>
-				</n8n-tooltip>
-				<n8n-text v-if="!readOnly" tag="div" size="small">
-					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
-				</n8n-text>
-			</div>
-			<div v-else :class="$style.notConnected">
-				<div>
-					<WireMeUp />
-				</div>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('ndv.input.notConnected.title')
-				}}</n8n-text>
-				<n8n-text tag="div">
-					{{ $locale.baseText('ndv.input.notConnected.message') }}
-					<a
-						href="https://docs.n8n.io/workflows/connections/"
-						target="_blank"
-						@click="onConnectionHelpClick"
-					>
-						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
-					</a>
-				</n8n-text>
-			</div>
-		</template>
-
-		<template #no-output-data>
-			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-				$locale.baseText('ndv.input.noOutputData')
-			}}</n8n-text>
-		</template>
-
-		<template #recovered-artificial-output-data>
-			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
-					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
-			</div>
-		</template>
-	</RunData>
-</template>
-
 <script lang="ts">
 import type { INodeUi } from '@/Interface';
 import {
@@ -468,6 +333,141 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<RunData
+		:node="currentNode"
+		:nodes="isMappingMode ? rootNodesParents : parentNodes"
+		:workflow="workflow"
+		:run-index="runIndex"
+		:linked-runs="linkedRuns"
+		:can-link-runs="!mappedNode && canLinkRuns"
+		:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
+		:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
+		:is-executing="isExecutingPrevious"
+		:executing-message="$locale.baseText('ndv.input.executingPrevious')"
+		:push-ref="pushRef"
+		:override-outputs="connectedCurrentNodeOutputs"
+		:mapping-enabled="isMappingEnabled"
+		:distance-from-active="currentNodeDepth"
+		:is-production-execution-preview="isProductionExecutionPreview"
+		:is-pane-active="isPaneActive"
+		pane-type="input"
+		data-test-id="ndv-input-panel"
+		@activate-pane="activatePane"
+		@item-hover="$emit('itemHover', $event)"
+		@link-run="onLinkRun"
+		@unlink-run="onUnlinkRun"
+		@run-change="onRunIndexChange"
+		@table-mounted="$emit('tableMounted', $event)"
+		@search="$emit('search', $event)"
+	>
+		<template #header>
+			<div :class="$style.titleSection">
+				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
+				<n8n-radio-buttons
+					v-if="isActiveNodeConfig && !readOnly"
+					:options="inputModes"
+					:model-value="inputMode"
+					@update:model-value="onInputModeChange"
+				/>
+			</div>
+		</template>
+		<template #input-select>
+			<InputNodeSelect
+				v-if="parentNodes.length && currentNodeName"
+				:model-value="currentNodeName"
+				:workflow="workflow"
+				:nodes="parentNodes"
+				@update:model-value="onInputNodeChange"
+			/>
+		</template>
+		<template v-if="isMappingMode" #before-data>
+			<!--
+						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
+						Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
+				-->
+			<component :is="'style'">button.linkRun { display: none }</component>
+			<div :class="$style.mappedNode">
+				<InputNodeSelect
+					:model-value="mappedNode"
+					:workflow="workflow"
+					:nodes="rootNodesParents"
+					@update:model-value="onMappedNodeSelected"
+				/>
+			</div>
+		</template>
+		<template #node-not-run>
+			<div
+				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
+				:class="$style.noOutputData"
+			>
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('ndv.input.noOutputData.title')
+				}}</n8n-text>
+				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
+					<template #content>
+						<div
+							v-html="
+								$locale.baseText('dataMapping.dragFromPreviousHint', {
+									interpolate: { name: focusedMappableInput },
+								})
+							"
+						></div>
+					</template>
+					<NodeExecuteButton
+						type="secondary"
+						hide-icon
+						:transparent="true"
+						:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
+						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
+						telemetry-source="inputs"
+						data-test-id="execute-previous-node"
+						@execute="onNodeExecute"
+					/>
+				</n8n-tooltip>
+				<n8n-text v-if="!readOnly" tag="div" size="small">
+					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
+				</n8n-text>
+			</div>
+			<div v-else :class="$style.notConnected">
+				<div>
+					<WireMeUp />
+				</div>
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('ndv.input.notConnected.title')
+				}}</n8n-text>
+				<n8n-text tag="div">
+					{{ $locale.baseText('ndv.input.notConnected.message') }}
+					<a
+						href="https://docs.n8n.io/workflows/connections/"
+						target="_blank"
+						@click="onConnectionHelpClick"
+					>
+						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
+					</a>
+				</n8n-text>
+			</div>
+		</template>
+
+		<template #no-output-data>
+			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				$locale.baseText('ndv.input.noOutputData')
+			}}</n8n-text>
+		</template>
+
+		<template #recovered-artificial-output-data>
+			<div :class="$style.recoveredOutputData">
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
+				}}</n8n-text>
+				<n8n-text>
+					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
+				</n8n-text>
+			</div>
+		</template>
+	</RunData>
+</template>
+
 <style lang="scss" module>
 .mappedNode {
 	padding: 0 var(--spacing-s) var(--spacing-s);
diff --git a/packages/editor-ui/src/components/IntersectionObserved.vue b/packages/editor-ui/src/components/IntersectionObserved.vue
index 3be8dde88eb1b..4fa53e311ca57 100644
--- a/packages/editor-ui/src/components/IntersectionObserved.vue
+++ b/packages/editor-ui/src/components/IntersectionObserved.vue
@@ -1,9 +1,3 @@
-<template>
-	<span ref="observed">
-		<slot></slot>
-	</span>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -37,3 +31,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<span ref="observed">
+		<slot></slot>
+	</span>
+</template>
diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue
index 437c7baf7e3b0..cebfb89b7f1b2 100644
--- a/packages/editor-ui/src/components/IntersectionObserver.vue
+++ b/packages/editor-ui/src/components/IntersectionObserver.vue
@@ -1,9 +1,3 @@
-<template>
-	<div ref="root">
-		<slot></slot>
-	</div>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -70,3 +64,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div ref="root">
+		<slot></slot>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index fd9c70443c15c..aa698371e62fb 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -1,65 +1,3 @@
-<template>
-	<Modal
-		:name="INVITE_USER_MODAL_KEY"
-		:title="
-			$locale.baseText(
-				showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers',
-			)
-		"
-		:center="true"
-		width="460px"
-		:event-bus="modalBus"
-		@enter="onSubmit"
-	>
-		<template #content>
-			<n8n-notice v-if="!isAdvancedPermissionsEnabled">
-				<i18n-t keypath="settings.users.advancedPermissions.warning">
-					<template #link>
-						<n8n-link size="small" @click="goToUpgradeAdvancedPermissions">
-							{{ $locale.baseText('settings.users.advancedPermissions.warning.link') }}
-						</n8n-link>
-					</template>
-				</i18n-t>
-			</n8n-notice>
-			<div v-if="showInviteUrls">
-				<n8n-users-list :users="invitedUsers">
-					<template #actions="{ user }">
-						<n8n-tooltip>
-							<template #content>
-								{{ $locale.baseText('settings.users.inviteLink.copy') }}
-							</template>
-							<n8n-icon-button
-								icon="link"
-								type="tertiary"
-								data-test-id="copy-invite-link-button"
-								:data-invite-link="user.inviteAcceptUrl"
-								@click="onCopyInviteLink(user)"
-							></n8n-icon-button>
-						</n8n-tooltip>
-					</template>
-				</n8n-users-list>
-			</div>
-			<n8n-form-inputs
-				v-else
-				:inputs="config"
-				:event-bus="formBus"
-				:column-view="true"
-				@update="onInput"
-				@submit="onSubmit"
-			/>
-		</template>
-		<template v-if="!showInviteUrls" #footer>
-			<n8n-button
-				:loading="loading"
-				:disabled="!enabledButton"
-				:label="buttonLabel"
-				float="right"
-				@click="onSubmitClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -344,3 +282,65 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<Modal
+		:name="INVITE_USER_MODAL_KEY"
+		:title="
+			$locale.baseText(
+				showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers',
+			)
+		"
+		:center="true"
+		width="460px"
+		:event-bus="modalBus"
+		@enter="onSubmit"
+	>
+		<template #content>
+			<n8n-notice v-if="!isAdvancedPermissionsEnabled">
+				<i18n-t keypath="settings.users.advancedPermissions.warning">
+					<template #link>
+						<n8n-link size="small" @click="goToUpgradeAdvancedPermissions">
+							{{ $locale.baseText('settings.users.advancedPermissions.warning.link') }}
+						</n8n-link>
+					</template>
+				</i18n-t>
+			</n8n-notice>
+			<div v-if="showInviteUrls">
+				<n8n-users-list :users="invitedUsers">
+					<template #actions="{ user }">
+						<n8n-tooltip>
+							<template #content>
+								{{ $locale.baseText('settings.users.inviteLink.copy') }}
+							</template>
+							<n8n-icon-button
+								icon="link"
+								type="tertiary"
+								data-test-id="copy-invite-link-button"
+								:data-invite-link="user.inviteAcceptUrl"
+								@click="onCopyInviteLink(user)"
+							></n8n-icon-button>
+						</n8n-tooltip>
+					</template>
+				</n8n-users-list>
+			</div>
+			<n8n-form-inputs
+				v-else
+				:inputs="config"
+				:event-bus="formBus"
+				:column-view="true"
+				@update="onInput"
+				@submit="onSubmit"
+			/>
+		</template>
+		<template v-if="!showInviteUrls" #footer>
+			<n8n-button
+				:loading="loading"
+				:disabled="!enabledButton"
+				:label="buttonLabel"
+				float="right"
+				@click="onSubmitClick"
+			/>
+		</template>
+	</Modal>
+</template>
diff --git a/packages/editor-ui/src/components/JsEditor/JsEditor.vue b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
index 5a5f2cb411878..2c89c83e08e5d 100644
--- a/packages/editor-ui/src/components/JsEditor/JsEditor.vue
+++ b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.editor" :style="isReadOnly ? 'opacity: 0.7' : ''">
-		<div ref="jsEditorRef" class="ph-no-capture js-editor"></div>
-		<slot name="suffix" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { history, toggleComment } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
@@ -124,6 +117,13 @@ const extensions = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.editor" :style="isReadOnly ? 'opacity: 0.7' : ''">
+		<div ref="jsEditorRef" class="ph-no-capture js-editor"></div>
+		<slot name="suffix" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .editor {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
index 8649f5f8d4dc1..f1116da097c37 100644
--- a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
+++ b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.editor">
-		<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
-		<slot name="suffix" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { history } from '@codemirror/commands';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
@@ -115,6 +108,13 @@ function destroyEditor() {
 }
 </script>
 
+<template>
+	<div :class="$style.editor">
+		<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
+		<slot name="suffix" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .editor {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index ecd6fa2aae8c1..77e811f35cc3e 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -1,7 +1,3 @@
-<template>
-	<img :src="logoPath" :class="$style.img" alt="n8n.io" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -21,6 +17,10 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<img :src="logoPath" :class="$style.img" alt="n8n.io" />
+</template>
+
 <style lang="scss" module>
 .img {
 	height: 32px;
diff --git a/packages/editor-ui/src/components/MainHeader/TabBar.vue b/packages/editor-ui/src/components/MainHeader/TabBar.vue
index 4385538d38224..0e78f480a99a7 100644
--- a/packages/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/editor-ui/src/components/MainHeader/TabBar.vue
@@ -1,19 +1,3 @@
-<template>
-	<div
-		v-if="items"
-		:class="{
-			[$style.container]: true,
-			['tab-bar-container']: true,
-		}"
-	>
-		<N8nRadioButtons
-			:model-value="modelValue"
-			:options="items"
-			@update:model-value="onUpdateModelValue"
-		/>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { MAIN_HEADER_TABS } from '@/constants';
 import type { ITabBarItem } from '@/Interface';
@@ -37,6 +21,22 @@ function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {
 }
 </script>
 
+<template>
+	<div
+		v-if="items"
+		:class="{
+			[$style.container]: true,
+			['tab-bar-container']: true,
+		}"
+	>
+		<N8nRadioButtons
+			:model-value="modelValue"
+			:options="items"
+			@update:model-value="onUpdateModelValue"
+		/>
+	</div>
+</template>
+
 <style module lang="scss">
 .container {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index cc8502a8a7ca7..3cff24734f429 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,102 +1,3 @@
-<template>
-	<div
-		id="side-menu"
-		:class="{
-			['side-menu']: true,
-			[$style.sideMenu]: true,
-			[$style.sideMenuCollapsed]: isCollapsed,
-		}"
-	>
-		<div
-			id="collapse-change-button"
-			:class="['clickable', $style.sideMenuCollapseButton]"
-			@click="toggleCollapse"
-		>
-			<n8n-icon v-if="isCollapsed" icon="chevron-right" size="xsmall" class="ml-5xs" />
-			<n8n-icon v-else icon="chevron-left" size="xsmall" class="mr-5xs" />
-		</div>
-		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
-			<template #header>
-				<div :class="$style.logo">
-					<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
-				</div>
-				<ProjectNavigation
-					:collapsed="isCollapsed"
-					:plan-name="cloudPlanStore.currentPlanData?.displayName"
-				/>
-			</template>
-
-			<template #beforeLowerMenu>
-				<BecomeTemplateCreatorCta v-if="fullyExpanded && !userIsTrialing" />
-			</template>
-			<template #menuSuffix>
-				<div>
-					<div
-						v-if="hasVersionUpdates"
-						data-test-id="version-updates-panel-button"
-						:class="$style.updates"
-						@click="openUpdatesPanel"
-					>
-						<div :class="$style.giftContainer">
-							<GiftNotificationIcon />
-						</div>
-						<n8n-text
-							:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
-							color="text-base"
-						>
-							{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
-								nextVersions.length > 1 ? 's' : ''
-							}}
-						</n8n-text>
-					</div>
-					<MainSidebarSourceControl :is-collapsed="isCollapsed" />
-				</div>
-			</template>
-			<template v-if="showUserArea" #footer>
-				<div :class="$style.userArea">
-					<div class="ml-3xs" data-test-id="main-sidebar-user-menu">
-						<!-- This dropdown is only enabled when sidebar is collapsed -->
-						<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
-							<div :class="{ [$style.avatar]: true, ['clickable']: isCollapsed }">
-								<n8n-avatar
-									:first-name="usersStore.currentUser?.firstName"
-									:last-name="usersStore.currentUser?.lastName"
-									size="small"
-								/>
-							</div>
-							<template v-if="isCollapsed" #dropdown>
-								<el-dropdown-menu>
-									<el-dropdown-item command="settings">
-										{{ $locale.baseText('settings') }}
-									</el-dropdown-item>
-									<el-dropdown-item command="logout">
-										{{ $locale.baseText('auth.signout') }}
-									</el-dropdown-item>
-								</el-dropdown-menu>
-							</template>
-						</el-dropdown>
-					</div>
-					<div
-						:class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }"
-					>
-						<n8n-text size="small" :bold="true" color="text-dark">{{
-							usersStore.currentUser?.fullName
-						}}</n8n-text>
-					</div>
-					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-action-dropdown
-							:items="userMenuItems"
-							placement="top-start"
-							data-test-id="user-menu"
-							@select="onUserActionToggle"
-						/>
-					</div>
-				</div>
-			</template>
-		</n8n-menu>
-	</div>
-</template>
-
 <script lang="ts">
 import type { IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
@@ -413,6 +314,105 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		id="side-menu"
+		:class="{
+			['side-menu']: true,
+			[$style.sideMenu]: true,
+			[$style.sideMenuCollapsed]: isCollapsed,
+		}"
+	>
+		<div
+			id="collapse-change-button"
+			:class="['clickable', $style.sideMenuCollapseButton]"
+			@click="toggleCollapse"
+		>
+			<n8n-icon v-if="isCollapsed" icon="chevron-right" size="xsmall" class="ml-5xs" />
+			<n8n-icon v-else icon="chevron-left" size="xsmall" class="mr-5xs" />
+		</div>
+		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
+			<template #header>
+				<div :class="$style.logo">
+					<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
+				</div>
+				<ProjectNavigation
+					:collapsed="isCollapsed"
+					:plan-name="cloudPlanStore.currentPlanData?.displayName"
+				/>
+			</template>
+
+			<template #beforeLowerMenu>
+				<BecomeTemplateCreatorCta v-if="fullyExpanded && !userIsTrialing" />
+			</template>
+			<template #menuSuffix>
+				<div>
+					<div
+						v-if="hasVersionUpdates"
+						data-test-id="version-updates-panel-button"
+						:class="$style.updates"
+						@click="openUpdatesPanel"
+					>
+						<div :class="$style.giftContainer">
+							<GiftNotificationIcon />
+						</div>
+						<n8n-text
+							:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
+							color="text-base"
+						>
+							{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
+								nextVersions.length > 1 ? 's' : ''
+							}}
+						</n8n-text>
+					</div>
+					<MainSidebarSourceControl :is-collapsed="isCollapsed" />
+				</div>
+			</template>
+			<template v-if="showUserArea" #footer>
+				<div :class="$style.userArea">
+					<div class="ml-3xs" data-test-id="main-sidebar-user-menu">
+						<!-- This dropdown is only enabled when sidebar is collapsed -->
+						<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
+							<div :class="{ [$style.avatar]: true, ['clickable']: isCollapsed }">
+								<n8n-avatar
+									:first-name="usersStore.currentUser?.firstName"
+									:last-name="usersStore.currentUser?.lastName"
+									size="small"
+								/>
+							</div>
+							<template v-if="isCollapsed" #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item command="settings">
+										{{ $locale.baseText('settings') }}
+									</el-dropdown-item>
+									<el-dropdown-item command="logout">
+										{{ $locale.baseText('auth.signout') }}
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+					<div
+						:class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }"
+					>
+						<n8n-text size="small" :bold="true" color="text-dark">{{
+							usersStore.currentUser?.fullName
+						}}</n8n-text>
+					</div>
+					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
+						<n8n-action-dropdown
+							:items="userMenuItems"
+							placement="top-start"
+							data-test-id="user-menu"
+							@select="onUserActionToggle"
+						/>
+					</div>
+				</div>
+			</template>
+		</n8n-menu>
+	</div>
+</template>
+
 <style lang="scss" module>
 .sideMenu {
 	position: relative;
diff --git a/packages/editor-ui/src/components/MfaSetupModal.vue b/packages/editor-ui/src/components/MfaSetupModal.vue
index b9fd149c862f9..663108ffed03f 100644
--- a/packages/editor-ui/src/components/MfaSetupModal.vue
+++ b/packages/editor-ui/src/components/MfaSetupModal.vue
@@ -1,135 +1,3 @@
-<template>
-	<Modal
-		width="460px"
-		height="80%"
-		max-height="640px"
-		:title="
-			!showRecoveryCodes
-				? i18.baseText('mfa.setup.step1.title')
-				: i18.baseText('mfa.setup.step2.title')
-		"
-		:event-bus="modalBus"
-		:name="MFA_SETUP_MODAL_KEY_NAME"
-		:center="true"
-		:loading="loadingQrCode"
-	>
-		<template #content>
-			<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
-				<div :class="$style.textContainer">
-					<n8n-text size="large" color="text-dark" :bold="true">{{
-						i18.baseText('mfa.setup.step1.instruction1.title')
-					}}</n8n-text>
-				</div>
-				<div>
-					<n8n-text size="medium" :bold="false">
-						<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
-							<template #part1>
-								{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
-							</template>
-							<template #part2>
-								<a
-									:class="$style.secret"
-									data-test-id="mfa-secret-button"
-									@click="onCopySecretToClipboard"
-									>{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
-								>
-							</template>
-						</i18n-t>
-					</n8n-text>
-				</div>
-				<div :class="$style.qrContainer">
-					<QrcodeVue :value="qrCode" :size="150" level="H" />
-				</div>
-				<div :class="$style.textContainer">
-					<n8n-text size="large" color="text-dark" :bold="true">{{
-						i18.baseText('mfa.setup.step1.instruction2.title')
-					}}</n8n-text>
-				</div>
-				<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
-					<n8n-input-label
-						size="medium"
-						:bold="false"
-						:class="$style.labelTooltip"
-						:label="i18.baseText('mfa.setup.step1.input.label')"
-					>
-						<n8n-input
-							v-model="authenticatorCode"
-							type="text"
-							:maxlength="6"
-							:placeholder="$locale.baseText('mfa.code.input.placeholder')"
-							:required="true"
-							data-test-id="mfa-token-input"
-							@input="onInput"
-						/>
-					</n8n-input-label>
-					<div :class="[$style.infoText, 'mt-4xs']">
-						<span size="small" v-text="infoTextErrorMessage"></span>
-					</div>
-				</div>
-			</div>
-			<div v-else :class="$style.container">
-				<div>
-					<n8n-text size="medium" :bold="false">{{
-						i18.baseText('mfa.setup.step2.description')
-					}}</n8n-text>
-				</div>
-				<div :class="$style.recoveryCodesContainer">
-					<div v-for="recoveryCode in recoveryCodes" :key="recoveryCode">
-						<n8n-text size="medium">{{ recoveryCode }}</n8n-text>
-					</div>
-				</div>
-				<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
-					<i18n-t keypath="mfa.setup.step2.infobox.description" tag="span">
-						<template #part1>
-							{{ i18.baseText('mfa.setup.step2.infobox.description.part1') }}
-						</template>
-						<template #part2>
-							<n8n-text size="small" :bold="true" :class="$style.loseAccessText">
-								{{ i18.baseText('mfa.setup.step2.infobox.description.part2') }}
-							</n8n-text>
-						</template>
-					</i18n-t>
-				</n8n-info-tip>
-				<div>
-					<n8n-button
-						type="primary"
-						icon="download"
-						float="right"
-						:label="i18.baseText('mfa.setup.step2.button.download')"
-						data-test-id="mfa-recovery-codes-button"
-						@click="onDownloadClick"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #footer>
-			<div v-if="showRecoveryCodes">
-				<div>
-					<n8n-button
-						float="right"
-						:disabled="!recoveryCodesDownloaded"
-						:label="i18.baseText('mfa.setup.step2.button.save')"
-						size="large"
-						data-test-id="mfa-save-button"
-						@click="onSetupClick"
-					/>
-				</div>
-			</div>
-			<div v-else>
-				<div>
-					<n8n-button
-						float="right"
-						:label="i18.baseText('mfa.setup.step1.button.continue')"
-						size="large"
-						:disabled="!readyToSubmit"
-						@click="onSaveClick"
-					/>
-				</div>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import Modal from './Modal.vue';
 import {
@@ -278,6 +146,138 @@ onMounted(async () => {
 // #endregion
 </script>
 
+<template>
+	<Modal
+		width="460px"
+		height="80%"
+		max-height="640px"
+		:title="
+			!showRecoveryCodes
+				? i18.baseText('mfa.setup.step1.title')
+				: i18.baseText('mfa.setup.step2.title')
+		"
+		:event-bus="modalBus"
+		:name="MFA_SETUP_MODAL_KEY_NAME"
+		:center="true"
+		:loading="loadingQrCode"
+	>
+		<template #content>
+			<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
+				<div :class="$style.textContainer">
+					<n8n-text size="large" color="text-dark" :bold="true">{{
+						i18.baseText('mfa.setup.step1.instruction1.title')
+					}}</n8n-text>
+				</div>
+				<div>
+					<n8n-text size="medium" :bold="false">
+						<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
+							<template #part1>
+								{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
+							</template>
+							<template #part2>
+								<a
+									:class="$style.secret"
+									data-test-id="mfa-secret-button"
+									@click="onCopySecretToClipboard"
+									>{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
+								>
+							</template>
+						</i18n-t>
+					</n8n-text>
+				</div>
+				<div :class="$style.qrContainer">
+					<QrcodeVue :value="qrCode" :size="150" level="H" />
+				</div>
+				<div :class="$style.textContainer">
+					<n8n-text size="large" color="text-dark" :bold="true">{{
+						i18.baseText('mfa.setup.step1.instruction2.title')
+					}}</n8n-text>
+				</div>
+				<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
+					<n8n-input-label
+						size="medium"
+						:bold="false"
+						:class="$style.labelTooltip"
+						:label="i18.baseText('mfa.setup.step1.input.label')"
+					>
+						<n8n-input
+							v-model="authenticatorCode"
+							type="text"
+							:maxlength="6"
+							:placeholder="$locale.baseText('mfa.code.input.placeholder')"
+							:required="true"
+							data-test-id="mfa-token-input"
+							@input="onInput"
+						/>
+					</n8n-input-label>
+					<div :class="[$style.infoText, 'mt-4xs']">
+						<span size="small" v-text="infoTextErrorMessage"></span>
+					</div>
+				</div>
+			</div>
+			<div v-else :class="$style.container">
+				<div>
+					<n8n-text size="medium" :bold="false">{{
+						i18.baseText('mfa.setup.step2.description')
+					}}</n8n-text>
+				</div>
+				<div :class="$style.recoveryCodesContainer">
+					<div v-for="recoveryCode in recoveryCodes" :key="recoveryCode">
+						<n8n-text size="medium">{{ recoveryCode }}</n8n-text>
+					</div>
+				</div>
+				<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
+					<i18n-t keypath="mfa.setup.step2.infobox.description" tag="span">
+						<template #part1>
+							{{ i18.baseText('mfa.setup.step2.infobox.description.part1') }}
+						</template>
+						<template #part2>
+							<n8n-text size="small" :bold="true" :class="$style.loseAccessText">
+								{{ i18.baseText('mfa.setup.step2.infobox.description.part2') }}
+							</n8n-text>
+						</template>
+					</i18n-t>
+				</n8n-info-tip>
+				<div>
+					<n8n-button
+						type="primary"
+						icon="download"
+						float="right"
+						:label="i18.baseText('mfa.setup.step2.button.download')"
+						data-test-id="mfa-recovery-codes-button"
+						@click="onDownloadClick"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<div v-if="showRecoveryCodes">
+				<div>
+					<n8n-button
+						float="right"
+						:disabled="!recoveryCodesDownloaded"
+						:label="i18.baseText('mfa.setup.step2.button.save')"
+						size="large"
+						data-test-id="mfa-save-button"
+						@click="onSetupClick"
+					/>
+				</div>
+			</div>
+			<div v-else>
+				<div>
+					<n8n-button
+						float="right"
+						:label="i18.baseText('mfa.setup.step1.button.continue')"
+						size="large"
+						:disabled="!readyToSubmit"
+						@click="onSaveClick"
+					/>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 141e93a521472..ec83c76bc78a2 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,52 +1,3 @@
-<template>
-	<el-dialog
-		:model-value="uiStore.modalsById[name].open"
-		:before-close="onCloseDialog"
-		:class="{
-			'dialog-wrapper': true,
-			scrollable: scrollable,
-			[getCustomClass()]: true,
-		}"
-		:center="center"
-		:width="width"
-		:show-close="showClose"
-		:close-on-click-modal="closeOnClickModal"
-		:close-on-press-escape="closeOnPressEscape"
-		:style="styles"
-		:append-to-body="appendToBody"
-		:data-test-id="`${name}-modal`"
-		:modal-class="center ? $style.center : ''"
-	>
-		<template v-if="$slots.header" #header>
-			<slot v-if="!loading" name="header" />
-		</template>
-		<template v-else-if="title" #title>
-			<div :class="centerTitle ? $style.centerTitle : ''">
-				<div v-if="title">
-					<n8n-heading tag="h1" size="xlarge">{{ title }}</n8n-heading>
-				</div>
-				<div v-if="subtitle" :class="$style.subtitle">
-					<n8n-heading tag="h3" size="small" color="text-light">{{ subtitle }}</n8n-heading>
-				</div>
-			</div>
-		</template>
-		<div
-			class="modal-content"
-			@keydown.stop
-			@keydown.enter="handleEnter"
-			@keydown.esc="onCloseDialog"
-		>
-			<slot v-if="!loading" name="content" />
-			<div v-else :class="$style.loader">
-				<n8n-spinner />
-			</div>
-		</div>
-		<div v-if="!loading && $slots.footer" :class="$style.footer">
-			<slot name="footer" :close="closeDialog" />
-		</div>
-	</el-dialog>
-</template>
-
 <script lang="ts">
 import { ElDialog } from 'element-plus';
 import { defineComponent } from 'vue';
@@ -209,6 +160,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<el-dialog
+		:model-value="uiStore.modalsById[name].open"
+		:before-close="onCloseDialog"
+		:class="{
+			'dialog-wrapper': true,
+			scrollable: scrollable,
+			[getCustomClass()]: true,
+		}"
+		:center="center"
+		:width="width"
+		:show-close="showClose"
+		:close-on-click-modal="closeOnClickModal"
+		:close-on-press-escape="closeOnPressEscape"
+		:style="styles"
+		:append-to-body="appendToBody"
+		:data-test-id="`${name}-modal`"
+		:modal-class="center ? $style.center : ''"
+	>
+		<template v-if="$slots.header" #header>
+			<slot v-if="!loading" name="header" />
+		</template>
+		<template v-else-if="title" #title>
+			<div :class="centerTitle ? $style.centerTitle : ''">
+				<div v-if="title">
+					<n8n-heading tag="h1" size="xlarge">{{ title }}</n8n-heading>
+				</div>
+				<div v-if="subtitle" :class="$style.subtitle">
+					<n8n-heading tag="h3" size="small" color="text-light">{{ subtitle }}</n8n-heading>
+				</div>
+			</div>
+		</template>
+		<div
+			class="modal-content"
+			@keydown.stop
+			@keydown.enter="handleEnter"
+			@keydown.esc="onCloseDialog"
+		>
+			<slot v-if="!loading" name="content" />
+			<div v-else :class="$style.loader">
+				<n8n-spinner />
+			</div>
+		</div>
+		<div v-if="!loading && $slots.footer" :class="$style.footer">
+			<slot name="footer" :close="closeDialog" />
+		</div>
+	</el-dialog>
+</template>
+
 <style lang="scss">
 .dialog-wrapper {
 	&.el-dialog {
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 454866ae751b1..c143abc20180a 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -1,21 +1,3 @@
-<template>
-	<ElDrawer
-		:direction="direction"
-		:model-value="uiStore.modalsById[name].open"
-		:size="width"
-		:before-close="close"
-		:modal="modal"
-		:wrapper-closable="wrapperClosable"
-	>
-		<template #header>
-			<slot name="header" />
-		</template>
-		<span @keydown.stop>
-			<slot name="content" />
-		</span>
-	</ElDrawer>
-</template>
-
 <script lang="ts">
 import { useUIStore } from '@/stores/ui.store';
 import { mapStores } from 'pinia';
@@ -101,6 +83,24 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<ElDrawer
+		:direction="direction"
+		:model-value="uiStore.modalsById[name].open"
+		:size="width"
+		:before-close="close"
+		:modal="modal"
+		:wrapper-closable="wrapperClosable"
+	>
+		<template #header>
+			<slot name="header" />
+		</template>
+		<span @keydown.stop>
+			<slot name="content" />
+		</span>
+	</ElDrawer>
+</template>
+
 <style lang="scss">
 .el-drawer__header {
 	margin: 0;
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index 541630fa3b298..13e6582f008b5 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,16 +1,3 @@
-<template>
-	<div v-if="uiStore.modalsById[name].open || keepAlive">
-		<slot
-			:modal-name="name"
-			:active="uiStore.isModalActiveById[name]"
-			:open="uiStore.modalsById[name].open"
-			:active-id="uiStore.modalsById[name].activeId"
-			:mode="uiStore.modalsById[name].mode"
-			:data="uiStore.modalsById[name].data"
-		></slot>
-	</div>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -34,3 +21,16 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div v-if="uiStore.modalsById[name].open || keepAlive">
+		<slot
+			:modal-name="name"
+			:active="uiStore.isModalActiveById[name]"
+			:open="uiStore.modalsById[name].open"
+			:active-id="uiStore.modalsById[name].activeId"
+			:mode="uiStore.modalsById[name].mode"
+			:data="uiStore.modalsById[name].data"
+		></slot>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index 36a37b85d6abb..a02b341983ff3 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -1,88 +1,3 @@
-<template>
-	<div class="duplicate-parameter" @keydown.stop>
-		<n8n-input-label
-			:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-			:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
-			:underline="true"
-			size="small"
-			color="text-dark"
-		/>
-
-		<div
-			v-for="(value, index) in mutableValues"
-			:key="index"
-			class="duplicate-parameter-item"
-			:class="parameter.type"
-		>
-			<div v-if="!isReadOnly" class="delete-item clickable">
-				<font-awesome-icon
-					icon="trash"
-					:title="$locale.baseText('multipleParameter.deleteItem')"
-					@click="deleteItem(index)"
-				/>
-				<div v-if="sortable">
-					<font-awesome-icon
-						v-if="index !== 0"
-						icon="angle-up"
-						class="clickable"
-						:title="$locale.baseText('multipleParameter.moveUp')"
-						@click="moveOptionUp(index)"
-					/>
-					<font-awesome-icon
-						v-if="index !== mutableValues.length - 1"
-						icon="angle-down"
-						class="clickable"
-						:title="$locale.baseText('multipleParameter.moveDown')"
-						@click="moveOptionDown(index)"
-					/>
-				</div>
-			</div>
-			<div v-if="parameter.type === 'collection'">
-				<CollectionParameter
-					:parameter="parameter"
-					:values="value"
-					:node-values="nodeValues"
-					:path="getPath(index)"
-					:hide-delete="hideDelete"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</div>
-			<div v-else>
-				<ParameterInputFull
-					class="duplicate-parameter-input-item"
-					:parameter="parameter"
-					:value="value"
-					:display-options="true"
-					:hide-label="true"
-					:path="getPath(index)"
-					input-size="small"
-					:is-read-only="isReadOnly"
-					@update="valueChanged"
-				/>
-			</div>
-		</div>
-
-		<div class="add-item-wrapper">
-			<div
-				v-if="(mutableValues && mutableValues.length === 0) || isReadOnly"
-				class="no-items-exist"
-			>
-				<n8n-text size="small">{{
-					$locale.baseText('multipleParameter.currentlyNoItemsExist')
-				}}</n8n-text>
-			</div>
-			<n8n-button
-				v-if="!isReadOnly"
-				type="tertiary"
-				block
-				:label="addButtonText"
-				@click="addItem()"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -208,6 +123,91 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div class="duplicate-parameter" @keydown.stop>
+		<n8n-input-label
+			:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
+			:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
+			:underline="true"
+			size="small"
+			color="text-dark"
+		/>
+
+		<div
+			v-for="(value, index) in mutableValues"
+			:key="index"
+			class="duplicate-parameter-item"
+			:class="parameter.type"
+		>
+			<div v-if="!isReadOnly" class="delete-item clickable">
+				<font-awesome-icon
+					icon="trash"
+					:title="$locale.baseText('multipleParameter.deleteItem')"
+					@click="deleteItem(index)"
+				/>
+				<div v-if="sortable">
+					<font-awesome-icon
+						v-if="index !== 0"
+						icon="angle-up"
+						class="clickable"
+						:title="$locale.baseText('multipleParameter.moveUp')"
+						@click="moveOptionUp(index)"
+					/>
+					<font-awesome-icon
+						v-if="index !== mutableValues.length - 1"
+						icon="angle-down"
+						class="clickable"
+						:title="$locale.baseText('multipleParameter.moveDown')"
+						@click="moveOptionDown(index)"
+					/>
+				</div>
+			</div>
+			<div v-if="parameter.type === 'collection'">
+				<CollectionParameter
+					:parameter="parameter"
+					:values="value"
+					:node-values="nodeValues"
+					:path="getPath(index)"
+					:hide-delete="hideDelete"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</div>
+			<div v-else>
+				<ParameterInputFull
+					class="duplicate-parameter-input-item"
+					:parameter="parameter"
+					:value="value"
+					:display-options="true"
+					:hide-label="true"
+					:path="getPath(index)"
+					input-size="small"
+					:is-read-only="isReadOnly"
+					@update="valueChanged"
+				/>
+			</div>
+		</div>
+
+		<div class="add-item-wrapper">
+			<div
+				v-if="(mutableValues && mutableValues.length === 0) || isReadOnly"
+				class="no-items-exist"
+			>
+				<n8n-text size="small">{{
+					$locale.baseText('multipleParameter.currentlyNoItemsExist')
+				}}</n8n-text>
+			</div>
+			<n8n-button
+				v-if="!isReadOnly"
+				type="tertiary"
+				block
+				:label="addButtonText"
+				@click="addItem()"
+			/>
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .duplicate-parameter {
 	:deep(.button) {
diff --git a/packages/editor-ui/src/components/NDVFloatingNodes.vue b/packages/editor-ui/src/components/NDVFloatingNodes.vue
index 5a9d9b41ec376..10b165409c3f9 100644
--- a/packages/editor-ui/src/components/NDVFloatingNodes.vue
+++ b/packages/editor-ui/src/components/NDVFloatingNodes.vue
@@ -1,41 +1,3 @@
-<template>
-	<aside :class="$style.floatingNodes">
-		<ul
-			v-for="connectionGroup in connectionGroups"
-			:key="connectionGroup"
-			:class="[$style.nodesList, $style[connectionGroup]]"
-		>
-			<template v-for="{ node, nodeType } in connectedNodes[connectionGroup]">
-				<n8n-tooltip
-					v-if="node && nodeType"
-					:key="node.name"
-					:placement="tooltipPositionMapper[connectionGroup]"
-					:teleported="false"
-					:offset="60"
-				>
-					<template #content>{{ node.name }}</template>
-
-					<li
-						:class="$style.connectedNode"
-						data-test-id="floating-node"
-						:data-node-name="node.name"
-						:data-node-placement="connectionGroup"
-						@click="emit('switchSelectedNode', node.name)"
-					>
-						<NodeIcon
-							:node-type="nodeType"
-							:node-name="node.name"
-							:tooltip-position="tooltipPositionMapper[connectionGroup]"
-							:size="35"
-							circle
-						/>
-					</li>
-				</n8n-tooltip>
-			</template>
-		</ul>
-	</aside>
-</template>
-
 <script setup lang="ts">
 import type { INodeUi } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -137,6 +99,44 @@ defineExpose({
 });
 </script>
 
+<template>
+	<aside :class="$style.floatingNodes">
+		<ul
+			v-for="connectionGroup in connectionGroups"
+			:key="connectionGroup"
+			:class="[$style.nodesList, $style[connectionGroup]]"
+		>
+			<template v-for="{ node, nodeType } in connectedNodes[connectionGroup]">
+				<n8n-tooltip
+					v-if="node && nodeType"
+					:key="node.name"
+					:placement="tooltipPositionMapper[connectionGroup]"
+					:teleported="false"
+					:offset="60"
+				>
+					<template #content>{{ node.name }}</template>
+
+					<li
+						:class="$style.connectedNode"
+						data-test-id="floating-node"
+						:data-node-name="node.name"
+						:data-node-placement="connectionGroup"
+						@click="emit('switchSelectedNode', node.name)"
+					>
+						<NodeIcon
+							:node-type="nodeType"
+							:node-name="node.name"
+							:tooltip-position="tooltipPositionMapper[connectionGroup]"
+							:size="35"
+							circle
+						/>
+					</li>
+				</n8n-tooltip>
+			</template>
+		</ul>
+	</aside>
+</template>
+
 <style lang="scss" module>
 .floatingNodes {
 	position: fixed;
diff --git a/packages/editor-ui/src/components/NDVSubConnections.vue b/packages/editor-ui/src/components/NDVSubConnections.vue
index 2b421f6ff8844..7aa4a4c861896 100644
--- a/packages/editor-ui/src/components/NDVSubConnections.vue
+++ b/packages/editor-ui/src/components/NDVSubConnections.vue
@@ -1,127 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div
-			:class="$style.connections"
-			:style="`--possible-connections: ${possibleConnections.length}`"
-		>
-			<div
-				v-for="connection in possibleConnections"
-				:key="connection.type"
-				:data-test-id="`subnode-connection-group-${connection.type}`"
-			>
-				<div :class="$style.connectionType">
-					<span
-						:class="{
-							[$style.connectionLabel]: true,
-							[$style.hasIssues]: hasInputIssues(connection.type),
-						}"
-						v-text="`${connection.displayName}${connection.required ? ' *' : ''}`"
-					/>
-					<OnClickOutside @trigger="expandConnectionGroup(connection.type, false)">
-						<div
-							ref="connectedNodesWrapper"
-							:class="{
-								[$style.connectedNodesWrapper]: true,
-								[$style.connectedNodesWrapperExpanded]: expandedGroups.includes(connection.type),
-							}"
-							:style="`--nodes-length: ${connectedNodes[connection.type].length}`"
-							@click="expandConnectionGroup(connection.type, true)"
-						>
-							<div
-								v-if="
-									connectedNodes[connection.type].length >= 1
-										? connection.maxConnections !== 1
-										: true
-								"
-								:class="{
-									[$style.plusButton]: true,
-									[$style.hasIssues]: hasInputIssues(connection.type),
-								}"
-								@click="onPlusClick(connection.type)"
-							>
-								<n8n-tooltip
-									placement="top"
-									:teleported="true"
-									:offset="10"
-									:show-after="300"
-									:disabled="
-										shouldShowConnectionTooltip(connection.type) &&
-										connectedNodes[connection.type].length >= 1
-									"
-								>
-									<template #content>
-										Add {{ connection.displayName }}
-										<template v-if="hasInputIssues(connection.type)">
-											<TitledList
-												:title="`${$locale.baseText('node.issues')}:`"
-												:items="nodeInputIssues[connection.type]"
-											/>
-										</template>
-									</template>
-									<n8n-icon-button
-										size="medium"
-										icon="plus"
-										type="tertiary"
-										:data-test-id="`add-subnode-${connection.type}`"
-									/>
-								</n8n-tooltip>
-							</div>
-							<div
-								v-if="connectedNodes[connection.type].length > 0"
-								:class="{
-									[$style.connectedNodes]: true,
-									[$style.connectedNodesMultiple]: connectedNodes[connection.type].length > 1,
-								}"
-							>
-								<div
-									v-for="(node, index) in connectedNodes[connection.type]"
-									:key="node.node.name"
-									:class="{ [$style.nodeWrapper]: true, [$style.hasIssues]: node.issues }"
-									data-test-id="floating-subnode"
-									:data-node-name="node.node.name"
-									:style="`--node-index: ${index}`"
-								>
-									<n8n-tooltip
-										:key="node.node.name"
-										placement="top"
-										:teleported="true"
-										:offset="10"
-										:show-after="300"
-										:disabled="shouldShowConnectionTooltip(connection.type)"
-									>
-										<template #content>
-											{{ node.node.name }}
-											<template v-if="node.issues">
-												<TitledList
-													:title="`${$locale.baseText('node.issues')}:`"
-													:items="node.issues"
-												/>
-											</template>
-										</template>
-
-										<div
-											:class="$style.connectedNode"
-											@click="onNodeClick(node.node.name, connection.type)"
-										>
-											<NodeIcon
-												:node-type="node.nodeType"
-												:node-name="node.node.name"
-												tooltip-position="top"
-												:size="20"
-												circle
-											/>
-										</div>
-									</n8n-tooltip>
-								</div>
-							</div>
-						</div>
-					</OnClickOutside>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { INodeUi } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -310,6 +186,130 @@ defineExpose({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div
+			:class="$style.connections"
+			:style="`--possible-connections: ${possibleConnections.length}`"
+		>
+			<div
+				v-for="connection in possibleConnections"
+				:key="connection.type"
+				:data-test-id="`subnode-connection-group-${connection.type}`"
+			>
+				<div :class="$style.connectionType">
+					<span
+						:class="{
+							[$style.connectionLabel]: true,
+							[$style.hasIssues]: hasInputIssues(connection.type),
+						}"
+						v-text="`${connection.displayName}${connection.required ? ' *' : ''}`"
+					/>
+					<OnClickOutside @trigger="expandConnectionGroup(connection.type, false)">
+						<div
+							ref="connectedNodesWrapper"
+							:class="{
+								[$style.connectedNodesWrapper]: true,
+								[$style.connectedNodesWrapperExpanded]: expandedGroups.includes(connection.type),
+							}"
+							:style="`--nodes-length: ${connectedNodes[connection.type].length}`"
+							@click="expandConnectionGroup(connection.type, true)"
+						>
+							<div
+								v-if="
+									connectedNodes[connection.type].length >= 1
+										? connection.maxConnections !== 1
+										: true
+								"
+								:class="{
+									[$style.plusButton]: true,
+									[$style.hasIssues]: hasInputIssues(connection.type),
+								}"
+								@click="onPlusClick(connection.type)"
+							>
+								<n8n-tooltip
+									placement="top"
+									:teleported="true"
+									:offset="10"
+									:show-after="300"
+									:disabled="
+										shouldShowConnectionTooltip(connection.type) &&
+										connectedNodes[connection.type].length >= 1
+									"
+								>
+									<template #content>
+										Add {{ connection.displayName }}
+										<template v-if="hasInputIssues(connection.type)">
+											<TitledList
+												:title="`${$locale.baseText('node.issues')}:`"
+												:items="nodeInputIssues[connection.type]"
+											/>
+										</template>
+									</template>
+									<n8n-icon-button
+										size="medium"
+										icon="plus"
+										type="tertiary"
+										:data-test-id="`add-subnode-${connection.type}`"
+									/>
+								</n8n-tooltip>
+							</div>
+							<div
+								v-if="connectedNodes[connection.type].length > 0"
+								:class="{
+									[$style.connectedNodes]: true,
+									[$style.connectedNodesMultiple]: connectedNodes[connection.type].length > 1,
+								}"
+							>
+								<div
+									v-for="(node, index) in connectedNodes[connection.type]"
+									:key="node.node.name"
+									:class="{ [$style.nodeWrapper]: true, [$style.hasIssues]: node.issues }"
+									data-test-id="floating-subnode"
+									:data-node-name="node.node.name"
+									:style="`--node-index: ${index}`"
+								>
+									<n8n-tooltip
+										:key="node.node.name"
+										placement="top"
+										:teleported="true"
+										:offset="10"
+										:show-after="300"
+										:disabled="shouldShowConnectionTooltip(connection.type)"
+									>
+										<template #content>
+											{{ node.node.name }}
+											<template v-if="node.issues">
+												<TitledList
+													:title="`${$locale.baseText('node.issues')}:`"
+													:items="node.issues"
+												/>
+											</template>
+										</template>
+
+										<div
+											:class="$style.connectedNode"
+											@click="onNodeClick(node.node.name, connection.type)"
+										>
+											<NodeIcon
+												:node-type="node.nodeType"
+												:node-name="node.node.name"
+												tooltip-position="top"
+												:size="20"
+												circle
+											/>
+										</div>
+									</n8n-tooltip>
+								</div>
+							</div>
+						</div>
+					</OnClickOutside>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 @keyframes horizontal-shake {
 	0% {
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 1e35b38eddc10..3a27f0a7018dd 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,182 +1,3 @@
-<template>
-	<div
-		v-if="node"
-		:id="nodeId"
-		:ref="node.name"
-		:class="nodeWrapperClass"
-		:style="nodeWrapperStyles"
-		data-test-id="canvas-node"
-		:data-name="node.name"
-		:data-node-type="nodeType?.name"
-		@contextmenu="(e: MouseEvent) => openContextMenu(e, 'node-right-click')"
-	>
-		<div v-show="isSelected" class="select-background"></div>
-		<div
-			:class="{
-				'node-default': true,
-				'touch-active': isTouchActive,
-				'is-touch-device': deviceSupport.isTouchDevice,
-				'menu-open': isContextMenuOpen,
-				'disable-pointer-events': disablePointerEvents,
-			}"
-		>
-			<div
-				v-touch:start="touchStart"
-				v-touch:end="touchEnd"
-				:class="nodeClass"
-				:style="nodeStyle"
-				@click.left="onClick"
-			>
-				<i v-if="isTriggerNode" class="trigger-icon">
-					<n8n-tooltip placement="bottom">
-						<template #content>
-							<span v-html="i18n.baseText('node.thisIsATriggerNode')" />
-						</template>
-						<FontAwesomeIcon icon="bolt" size="lg" />
-					</n8n-tooltip>
-				</i>
-				<div
-					v-if="!node.disabled"
-					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
-				>
-					<div v-if="hasIssues && !hideNodeIssues" class="node-issues" data-test-id="node-issues">
-						<n8n-tooltip :show-after="500" placement="bottom">
-							<template #content>
-								<TitledList :title="`${i18n.baseText('node.issues')}:`" :items="nodeIssues" />
-							</template>
-							<FontAwesomeIcon icon="exclamation-triangle" />
-						</n8n-tooltip>
-					</div>
-					<div v-else-if="waiting || nodeExecutionStatus === 'waiting'" class="waiting">
-						<n8n-tooltip placement="bottom">
-							<template #content>
-								<div v-text="waiting"></div>
-							</template>
-							<FontAwesomeIcon icon="clock" />
-						</n8n-tooltip>
-					</div>
-					<span v-else-if="showPinnedDataInfo" class="node-pin-data-icon">
-						<FontAwesomeIcon icon="thumbtack" />
-						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
-					</span>
-					<span v-else-if="nodeExecutionStatus === 'unknown'">
-						<!-- Do nothing, unknown means the node never executed -->
-					</span>
-					<span v-else-if="workflowDataItems" class="data-count">
-						<FontAwesomeIcon icon="check" />
-						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
-					</span>
-				</div>
-
-				<div class="node-executing-info" :title="i18n.baseText('node.nodeIsExecuting')">
-					<FontAwesomeIcon icon="sync-alt" spin />
-				</div>
-
-				<div class="node-trigger-tooltip__wrapper">
-					<n8n-tooltip
-						placement="top"
-						:show-after="500"
-						:visible="showTriggerNodeTooltip"
-						popper-class="node-trigger-tooltip__wrapper--item"
-					>
-						<template #content>
-							<div v-text="getTriggerNodeTooltip"></div>
-						</template>
-						<span />
-					</n8n-tooltip>
-					<n8n-tooltip
-						v-if="isTriggerNode"
-						placement="top"
-						:visible="pinDataDiscoveryTooltipVisible"
-						popper-class="node-trigger-tooltip__wrapper--item"
-					>
-						<template #content>
-							{{ i18n.baseText('node.discovery.pinData.canvas') }}
-						</template>
-						<span />
-					</n8n-tooltip>
-				</div>
-
-				<NodeIcon
-					class="node-icon"
-					:node-type="iconNodeType"
-					:size="40"
-					:shrink="false"
-					:color-default="iconColorDefault"
-					:disabled="node.disabled"
-				/>
-			</div>
-
-			<div
-				v-if="showDisabledLineThrough"
-				:class="{
-					'disabled-line-through': true,
-					success: !['unknown'].includes(nodeExecutionStatus) && workflowDataItems > 0,
-				}"
-			></div>
-		</div>
-		<div class="node-description">
-			<div class="node-name" :title="nodeTitle">
-				<p data-test-id="canvas-node-box-title">
-					{{ nodeTitle }}
-				</p>
-				<p v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</p>
-			</div>
-			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
-				{{ nodeSubtitle }}
-			</div>
-		</div>
-
-		<div
-			v-if="!isReadOnly"
-			v-show="!hideActions"
-			class="node-options no-select-on-click"
-			@contextmenu.stop
-			@mousedown.stop
-		>
-			<div class="node-options-inner">
-				<N8nIconButton
-					v-if="!isConfigNode"
-					data-test-id="execute-node-button"
-					type="tertiary"
-					text
-					size="small"
-					icon="play"
-					:disabled="workflowRunning"
-					:title="i18n.baseText('node.testStep')"
-					@click="executeNode"
-				/>
-				<N8nIconButton
-					data-test-id="disable-node-button"
-					type="tertiary"
-					text
-					size="small"
-					icon="power-off"
-					:title="nodeDisabledTitle"
-					@click="toggleDisableNode"
-				/>
-				<N8nIconButton
-					data-test-id="delete-node-button"
-					type="tertiary"
-					size="small"
-					text
-					icon="trash"
-					:title="i18n.baseText('node.delete')"
-					@click="deleteNode"
-				/>
-				<N8nIconButton
-					data-test-id="overflow-node-button"
-					type="tertiary"
-					size="small"
-					text
-					icon="ellipsis-h"
-					@click="(e: MouseEvent) => openContextMenu(e, 'node-button')"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { useStorage } from '@/composables/useStorage';
 import {
@@ -781,6 +602,185 @@ function openContextMenu(event: MouseEvent, source: 'node-button' | 'node-right-
 }
 </script>
 
+<template>
+	<div
+		v-if="node"
+		:id="nodeId"
+		:ref="node.name"
+		:class="nodeWrapperClass"
+		:style="nodeWrapperStyles"
+		data-test-id="canvas-node"
+		:data-name="node.name"
+		:data-node-type="nodeType?.name"
+		@contextmenu="(e: MouseEvent) => openContextMenu(e, 'node-right-click')"
+	>
+		<div v-show="isSelected" class="select-background"></div>
+		<div
+			:class="{
+				'node-default': true,
+				'touch-active': isTouchActive,
+				'is-touch-device': deviceSupport.isTouchDevice,
+				'menu-open': isContextMenuOpen,
+				'disable-pointer-events': disablePointerEvents,
+			}"
+		>
+			<div
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
+				:class="nodeClass"
+				:style="nodeStyle"
+				@click.left="onClick"
+			>
+				<i v-if="isTriggerNode" class="trigger-icon">
+					<n8n-tooltip placement="bottom">
+						<template #content>
+							<span v-html="i18n.baseText('node.thisIsATriggerNode')" />
+						</template>
+						<FontAwesomeIcon icon="bolt" size="lg" />
+					</n8n-tooltip>
+				</i>
+				<div
+					v-if="!node.disabled"
+					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
+				>
+					<div v-if="hasIssues && !hideNodeIssues" class="node-issues" data-test-id="node-issues">
+						<n8n-tooltip :show-after="500" placement="bottom">
+							<template #content>
+								<TitledList :title="`${i18n.baseText('node.issues')}:`" :items="nodeIssues" />
+							</template>
+							<FontAwesomeIcon icon="exclamation-triangle" />
+						</n8n-tooltip>
+					</div>
+					<div v-else-if="waiting || nodeExecutionStatus === 'waiting'" class="waiting">
+						<n8n-tooltip placement="bottom">
+							<template #content>
+								<div v-text="waiting"></div>
+							</template>
+							<FontAwesomeIcon icon="clock" />
+						</n8n-tooltip>
+					</div>
+					<span v-else-if="showPinnedDataInfo" class="node-pin-data-icon">
+						<FontAwesomeIcon icon="thumbtack" />
+						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
+					</span>
+					<span v-else-if="nodeExecutionStatus === 'unknown'">
+						<!-- Do nothing, unknown means the node never executed -->
+					</span>
+					<span v-else-if="workflowDataItems" class="data-count">
+						<FontAwesomeIcon icon="check" />
+						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
+					</span>
+				</div>
+
+				<div class="node-executing-info" :title="i18n.baseText('node.nodeIsExecuting')">
+					<FontAwesomeIcon icon="sync-alt" spin />
+				</div>
+
+				<div class="node-trigger-tooltip__wrapper">
+					<n8n-tooltip
+						placement="top"
+						:show-after="500"
+						:visible="showTriggerNodeTooltip"
+						popper-class="node-trigger-tooltip__wrapper--item"
+					>
+						<template #content>
+							<div v-text="getTriggerNodeTooltip"></div>
+						</template>
+						<span />
+					</n8n-tooltip>
+					<n8n-tooltip
+						v-if="isTriggerNode"
+						placement="top"
+						:visible="pinDataDiscoveryTooltipVisible"
+						popper-class="node-trigger-tooltip__wrapper--item"
+					>
+						<template #content>
+							{{ i18n.baseText('node.discovery.pinData.canvas') }}
+						</template>
+						<span />
+					</n8n-tooltip>
+				</div>
+
+				<NodeIcon
+					class="node-icon"
+					:node-type="iconNodeType"
+					:size="40"
+					:shrink="false"
+					:color-default="iconColorDefault"
+					:disabled="node.disabled"
+				/>
+			</div>
+
+			<div
+				v-if="showDisabledLineThrough"
+				:class="{
+					'disabled-line-through': true,
+					success: !['unknown'].includes(nodeExecutionStatus) && workflowDataItems > 0,
+				}"
+			></div>
+		</div>
+		<div class="node-description">
+			<div class="node-name" :title="nodeTitle">
+				<p data-test-id="canvas-node-box-title">
+					{{ nodeTitle }}
+				</p>
+				<p v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</p>
+			</div>
+			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
+				{{ nodeSubtitle }}
+			</div>
+		</div>
+
+		<div
+			v-if="!isReadOnly"
+			v-show="!hideActions"
+			class="node-options no-select-on-click"
+			@contextmenu.stop
+			@mousedown.stop
+		>
+			<div class="node-options-inner">
+				<N8nIconButton
+					v-if="!isConfigNode"
+					data-test-id="execute-node-button"
+					type="tertiary"
+					text
+					size="small"
+					icon="play"
+					:disabled="workflowRunning"
+					:title="i18n.baseText('node.testStep')"
+					@click="executeNode"
+				/>
+				<N8nIconButton
+					data-test-id="disable-node-button"
+					type="tertiary"
+					text
+					size="small"
+					icon="power-off"
+					:title="nodeDisabledTitle"
+					@click="toggleDisableNode"
+				/>
+				<N8nIconButton
+					data-test-id="delete-node-button"
+					type="tertiary"
+					size="small"
+					text
+					icon="trash"
+					:title="i18n.baseText('node.delete')"
+					@click="deleteNode"
+				/>
+				<N8nIconButton
+					data-test-id="overflow-node-button"
+					type="tertiary"
+					size="small"
+					text
+					icon="ellipsis-h"
+					@click="(e: MouseEvent) => openContextMenu(e, 'node-button')"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 .context-menu {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
index ffa015afe21ad..729e074eac4d8 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
@@ -1,25 +1,3 @@
-<template>
-	<n8n-node-creator-node
-		draggable
-		:class="$style.action"
-		:title="action.displayName"
-		:is-trigger="isTriggerAction(action)"
-		data-keyboard-nav="true"
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
-	>
-		<template #dragContent>
-			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
-			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
-				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
-			</div>
-		</template>
-		<template #icon>
-			<NodeIcon :node-type="action" />
-		</template>
-	</n8n-node-creator-node>
-</template>
-
 <script setup lang="ts">
 import { reactive, computed, toRefs } from 'vue';
 import type { ActionTypeDescription, SimplifiedNodeType } from '@/Interface';
@@ -116,6 +94,28 @@ function onDragEnd(): void {
 const { draggableDataTransfer, dragging } = toRefs(state);
 </script>
 
+<template>
+	<n8n-node-creator-node
+		draggable
+		:class="$style.action"
+		:title="action.displayName"
+		:is-trigger="isTriggerAction(action)"
+		data-keyboard-nav="true"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+	>
+		<template #dragContent>
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
+			</div>
+		</template>
+		<template #icon>
+			<NodeIcon :node-type="action" />
+		</template>
+	</n8n-node-creator-node>
+</template>
+
 <style lang="scss" module>
 .action {
 	--node-creator-name-size: var(--font-size-2xs);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
index d3d3b3585c337..9f905f7b366fb 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
@@ -1,9 +1,3 @@
-<template>
-	<div :class="$style.label">
-		<span :class="$style.name" v-text="item.key" />
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { LabelItemProps } from '@/Interface';
 
@@ -13,6 +7,12 @@ export interface Props {
 defineProps<Props>();
 </script>
 
+<template>
+	<div :class="$style.label">
+		<span :class="$style.name" v-text="item.key" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .label {
 	margin-left: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
index d64b860728ca9..b5c3dc55a2fb4 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import type { LinkItemProps } from '@/Interface';
+
+export interface Props {
+	link: LinkItemProps;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
 	<n8n-node-creator-node
 		:class="$style.creatorLink"
@@ -13,16 +23,6 @@
 	</n8n-node-creator-node>
 </template>
 
-<script setup lang="ts">
-import type { LinkItemProps } from '@/Interface';
-
-export interface Props {
-	link: LinkItemProps;
-}
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" module>
 .creatorLink {
 	--action-arrow-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
index 1a20ed2b9ac9e..ebea3cba41979 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
@@ -1,45 +1,3 @@
-<template>
-	<!-- Node Item is draggable only if it doesn't contain actions -->
-	<n8n-node-creator-node
-		:draggable="!showActionArrow"
-		:class="$style.nodeItem"
-		:description="description"
-		:title="displayName"
-		:show-action-arrow="showActionArrow"
-		:is-trigger="isTrigger"
-		:data-test-id="dataTestId"
-		:tag="nodeType.tag"
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
-	>
-		<template #icon>
-			<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
-			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
-		</template>
-
-		<template v-if="isCommunityNode" #tooltip>
-			<p
-				:class="$style.communityNodeIcon"
-				@click="onCommunityNodeTooltipClick"
-				v-html="
-					i18n.baseText('generic.communityNode.tooltip', {
-						interpolate: {
-							packageName: nodeType.name.split('.')[0],
-							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-						},
-					})
-				"
-			/>
-		</template>
-		<template #dragContent>
-			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
-			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
-				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
-			</div>
-		</template>
-	</n8n-node-creator-node>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { SimplifiedNodeType } from '@/Interface';
@@ -181,6 +139,49 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 	}
 }
 </script>
+
+<template>
+	<!-- Node Item is draggable only if it doesn't contain actions -->
+	<n8n-node-creator-node
+		:draggable="!showActionArrow"
+		:class="$style.nodeItem"
+		:description="description"
+		:title="displayName"
+		:show-action-arrow="showActionArrow"
+		:is-trigger="isTrigger"
+		:data-test-id="dataTestId"
+		:tag="nodeType.tag"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+	>
+		<template #icon>
+			<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
+			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
+		</template>
+
+		<template v-if="isCommunityNode" #tooltip>
+			<p
+				:class="$style.communityNodeIcon"
+				@click="onCommunityNodeTooltipClick"
+				v-html="
+					i18n.baseText('generic.communityNode.tooltip', {
+						interpolate: {
+							packageName: nodeType.name.split('.')[0],
+							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+						},
+					})
+				"
+			/>
+		</template>
+		<template #dragContent>
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
+			</div>
+		</template>
+	</n8n-node-creator-node>
+</template>
+
 <style lang="scss" module>
 .nodeItem {
 	--trigger-icon-background-color: #{$trigger-icon-background-color};
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
index 929247fa0cafb..b7c2adce66f96 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import type { SubcategoryItemProps } from '@/Interface';
+import { camelCase } from 'lodash-es';
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+import type { BaseTextKey } from '@/plugins/i18n';
+
+export interface Props {
+	item: SubcategoryItemProps;
+}
+
+const props = defineProps<Props>();
+const i18n = useI18n();
+const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
+</script>
+
 <template>
 	<n8n-node-creator-node
 		:class="$style.subCategory"
@@ -20,22 +36,6 @@
 	</n8n-node-creator-node>
 </template>
 
-<script setup lang="ts">
-import type { SubcategoryItemProps } from '@/Interface';
-import { camelCase } from 'lodash-es';
-import { computed } from 'vue';
-import { useI18n } from '@/composables/useI18n';
-import type { BaseTextKey } from '@/plugins/i18n';
-
-export interface Props {
-	item: SubcategoryItemProps;
-}
-
-const props = defineProps<Props>();
-const i18n = useI18n();
-const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
-</script>
-
 <style lang="scss" module>
 .subCategory {
 	--action-arrow-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
index ee9edaad11dac..4759a0b45c1e0 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import type { ViewItemProps } from '@/Interface';
+
+export interface Props {
+	view: ViewItemProps;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
 	<n8n-node-creator-node
 		:class="$style.view"
@@ -13,16 +23,6 @@
 	</n8n-node-creator-node>
 </template>
 
-<script setup lang="ts">
-import type { ViewItemProps } from '@/Interface';
-
-export interface Props {
-	view: ViewItemProps;
-}
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" module>
 .view {
 	--action-arrow-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index 2f886b414c2ff..b446ade75edcf 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -1,29 +1,3 @@
-<template>
-	<div>
-		<aside
-			:class="{
-				[$style.nodeCreatorScrim]: true,
-				[$style.active]: showScrim,
-			}"
-		/>
-		<SlideTransition>
-			<div
-				v-if="active"
-				ref="nodeCreator"
-				:class="{ [$style.nodeCreator]: true }"
-				:style="nodeCreatorInlineStyle"
-				data-test-id="node-creator"
-				@dragover="onDragOver"
-				@drop="onDrop"
-				@mousedown="onMouseDown"
-				@mouseup="onMouseUp"
-			>
-				<NodesListPanel @node-type-selected="onNodeTypeSelected" />
-			</div>
-		</SlideTransition>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { watch, reactive, toRefs, computed, onBeforeUnmount } from 'vue';
 
@@ -163,6 +137,32 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<div>
+		<aside
+			:class="{
+				[$style.nodeCreatorScrim]: true,
+				[$style.active]: showScrim,
+			}"
+		/>
+		<SlideTransition>
+			<div
+				v-if="active"
+				ref="nodeCreator"
+				:class="{ [$style.nodeCreator]: true }"
+				:style="nodeCreatorInlineStyle"
+				data-test-id="node-creator"
+				@dragover="onDragOver"
+				@drop="onDrop"
+				@mousedown="onMouseDown"
+				@mouseup="onMouseUp"
+			>
+				<NodesListPanel @node-type-selected="onNodeTypeSelected" />
+			</div>
+		</SlideTransition>
+	</div>
+</template>
+
 <style module lang="scss">
 :global(strong) {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
index 59a9bc49a4cb3..e6dce65be3aac 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import {
+	REQUEST_NODE_FORM_URL,
+	REGULAR_NODE_CREATOR_VIEW,
+	TRIGGER_NODE_CREATOR_VIEW,
+} from '@/constants';
+import type { NodeFilterType } from '@/Interface';
+
+import NoResultsIcon from './NoResultsIcon.vue';
+
+export interface Props {
+	showIcon?: boolean;
+	showRequest?: boolean;
+	rootView?: NodeFilterType;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
 	<div
 		:class="{ [$style.noResults]: true, [$style.iconless]: !showIcon }"
@@ -44,25 +63,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import {
-	REQUEST_NODE_FORM_URL,
-	REGULAR_NODE_CREATOR_VIEW,
-	TRIGGER_NODE_CREATOR_VIEW,
-} from '@/constants';
-import type { NodeFilterType } from '@/Interface';
-
-import NoResultsIcon from './NoResultsIcon.vue';
-
-export interface Props {
-	showIcon?: boolean;
-	showRequest?: boolean;
-	rootView?: NodeFilterType;
-}
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" module>
 .noResults {
 	background-color: $node-creator-no-results-background-color;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
index a4066c1ea6ff9..d4866eddf23af 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
@@ -1,28 +1,3 @@
-<template>
-	<div :class="$style.searchContainer" data-test-id="search-bar">
-		<div :class="{ [$style.prefix]: true, [$style.active]: modelValue.length > 0 }">
-			<font-awesome-icon icon="search" size="sm" />
-		</div>
-		<div :class="$style.text">
-			<input
-				ref="inputRef"
-				:placeholder="placeholder"
-				:value="modelValue"
-				:class="$style.input"
-				autofocus
-				data-test-id="node-creator-search-bar"
-				tabindex="0"
-				@input="onInput"
-			/>
-		</div>
-		<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
-			<button :class="[$style.clear, $style.clickable]">
-				<font-awesome-icon icon="times-circle" />
-			</button>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
 import { useExternalHooks } from '@/composables/useExternalHooks';
@@ -75,6 +50,31 @@ defineExpose({
 });
 </script>
 
+<template>
+	<div :class="$style.searchContainer" data-test-id="search-bar">
+		<div :class="{ [$style.prefix]: true, [$style.active]: modelValue.length > 0 }">
+			<font-awesome-icon icon="search" size="sm" />
+		</div>
+		<div :class="$style.text">
+			<input
+				ref="inputRef"
+				:placeholder="placeholder"
+				:value="modelValue"
+				:class="$style.input"
+				autofocus
+				data-test-id="node-creator-search-bar"
+				tabindex="0"
+				@input="onInput"
+			/>
+		</div>
+		<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
+			<button :class="[$style.clear, $style.clickable]">
+				<font-awesome-icon icon="times-circle" />
+			</button>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .searchContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index ad9b229541eda..f2fed81d47691 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -1,114 +1,3 @@
-<template>
-	<div
-		v-if="credentialTypesNodeDescriptionDisplayed.length"
-		:class="['node-credentials', $style.container]"
-	>
-		<div
-			v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
-			:key="credentialTypeDescription.name"
-		>
-			<n8n-input-label
-				:label="getCredentialsFieldLabel(credentialTypeDescription)"
-				:bold="false"
-				size="small"
-				color="text-dark"
-				data-test-id="credentials-label"
-			>
-				<div v-if="readonly">
-					<n8n-input
-						:model-value="getSelectedName(credentialTypeDescription.name)"
-						disabled
-						size="small"
-						data-test-id="node-credentials-select"
-					/>
-				</div>
-				<div
-					v-else
-					:class="
-						getIssues(credentialTypeDescription.name).length && !hideIssues
-							? $style.hasIssues
-							: $style.input
-					"
-					data-test-id="node-credentials-select"
-				>
-					<n8n-select
-						:model-value="getSelectedId(credentialTypeDescription.name)"
-						:placeholder="
-							getSelectPlaceholder(
-								credentialTypeDescription.name,
-								getIssues(credentialTypeDescription.name),
-							)
-						"
-						size="small"
-						@update:model-value="
-							(value: string) =>
-								onCredentialSelected(
-									credentialTypeDescription.name,
-									value,
-									showMixedCredentials(credentialTypeDescription),
-								)
-						"
-						@blur="$emit('blur', 'credentials')"
-					>
-						<n8n-option
-							v-for="item in getCredentialOptions(
-								getAllRelatedCredentialTypes(credentialTypeDescription),
-							)"
-							:key="item.id"
-							:data-test-id="`node-credentials-select-item-${item.id}`"
-							:label="item.name"
-							:value="item.id"
-						>
-							<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
-								<n8n-text bold>{{ item.name }}</n8n-text>
-								<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
-							</div>
-						</n8n-option>
-						<n8n-option
-							:key="NEW_CREDENTIALS_TEXT"
-							data-test-id="node-credentials-select-item-new"
-							:value="NEW_CREDENTIALS_TEXT"
-							:label="NEW_CREDENTIALS_TEXT"
-						>
-						</n8n-option>
-					</n8n-select>
-
-					<div
-						v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
-						:class="$style.warning"
-					>
-						<n8n-tooltip placement="top">
-							<template #content>
-								<TitledList
-									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
-									:items="getIssues(credentialTypeDescription.name)"
-								/>
-							</template>
-							<font-awesome-icon icon="exclamation-triangle" />
-						</n8n-tooltip>
-					</div>
-
-					<div
-						v-if="
-							selected[credentialTypeDescription.name] &&
-							isCredentialExisting(credentialTypeDescription.name)
-						"
-						:class="$style.edit"
-						data-test-id="credential-edit-button"
-					>
-						<font-awesome-icon
-							icon="pen"
-							class="clickable"
-							:title="$locale.baseText('nodeCredentials.updateCredential')"
-							@click="editCredential(credentialTypeDescription.name)"
-						/>
-					</div>
-				</div>
-			</n8n-input-label>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -618,6 +507,117 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		v-if="credentialTypesNodeDescriptionDisplayed.length"
+		:class="['node-credentials', $style.container]"
+	>
+		<div
+			v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
+			:key="credentialTypeDescription.name"
+		>
+			<n8n-input-label
+				:label="getCredentialsFieldLabel(credentialTypeDescription)"
+				:bold="false"
+				size="small"
+				color="text-dark"
+				data-test-id="credentials-label"
+			>
+				<div v-if="readonly">
+					<n8n-input
+						:model-value="getSelectedName(credentialTypeDescription.name)"
+						disabled
+						size="small"
+						data-test-id="node-credentials-select"
+					/>
+				</div>
+				<div
+					v-else
+					:class="
+						getIssues(credentialTypeDescription.name).length && !hideIssues
+							? $style.hasIssues
+							: $style.input
+					"
+					data-test-id="node-credentials-select"
+				>
+					<n8n-select
+						:model-value="getSelectedId(credentialTypeDescription.name)"
+						:placeholder="
+							getSelectPlaceholder(
+								credentialTypeDescription.name,
+								getIssues(credentialTypeDescription.name),
+							)
+						"
+						size="small"
+						@update:model-value="
+							(value: string) =>
+								onCredentialSelected(
+									credentialTypeDescription.name,
+									value,
+									showMixedCredentials(credentialTypeDescription),
+								)
+						"
+						@blur="$emit('blur', 'credentials')"
+					>
+						<n8n-option
+							v-for="item in getCredentialOptions(
+								getAllRelatedCredentialTypes(credentialTypeDescription),
+							)"
+							:key="item.id"
+							:data-test-id="`node-credentials-select-item-${item.id}`"
+							:label="item.name"
+							:value="item.id"
+						>
+							<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
+								<n8n-text bold>{{ item.name }}</n8n-text>
+								<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
+							</div>
+						</n8n-option>
+						<n8n-option
+							:key="NEW_CREDENTIALS_TEXT"
+							data-test-id="node-credentials-select-item-new"
+							:value="NEW_CREDENTIALS_TEXT"
+							:label="NEW_CREDENTIALS_TEXT"
+						>
+						</n8n-option>
+					</n8n-select>
+
+					<div
+						v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
+						:class="$style.warning"
+					>
+						<n8n-tooltip placement="top">
+							<template #content>
+								<TitledList
+									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
+									:items="getIssues(credentialTypeDescription.name)"
+								/>
+							</template>
+							<font-awesome-icon icon="exclamation-triangle" />
+						</n8n-tooltip>
+					</div>
+
+					<div
+						v-if="
+							selected[credentialTypeDescription.name] &&
+							isCredentialExisting(credentialTypeDescription.name)
+						"
+						:class="$style.edit"
+						data-test-id="credential-edit-button"
+					>
+						<font-awesome-icon
+							icon="pen"
+							class="clickable"
+							:title="$locale.baseText('nodeCredentials.updateCredential')"
+							@click="editCredential(credentialTypeDescription.name)"
+						/>
+					</div>
+				</div>
+			</n8n-input-label>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	margin-top: var(--spacing-xs);
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 17a2195a8c05d..08bf5e5d5df66 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -1,143 +1,3 @@
-<template>
-	<el-dialog
-		:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
-		:before-close="close"
-		:show-close="false"
-		class="data-display-wrapper ndv-wrapper"
-		overlay-class="data-display-overlay"
-		width="auto"
-		append-to-body
-		data-test-id="ndv"
-		:data-has-output-connection="hasOutputConnection"
-	>
-		<n8n-tooltip
-			placement="bottom-start"
-			:visible="showTriggerWaitingWarning"
-			:disabled="!showTriggerWaitingWarning"
-		>
-			<template #content>
-				<div :class="$style.triggerWarning">
-					{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
-				</div>
-			</template>
-			<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
-				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
-				<n8n-text color="text-xlight" size="medium" :bold="true">
-					{{ $locale.baseText('ndv.backToCanvas') }}
-				</n8n-text>
-			</div>
-		</n8n-tooltip>
-
-		<div
-			v-if="activeNode"
-			ref="container"
-			class="data-display"
-			tabindex="0"
-			@keydown.capture="onKeyDown"
-		>
-			<div :class="$style.modalBackground" @click="close"></div>
-			<NDVDraggablePanels
-				:key="activeNode.name"
-				:is-trigger-node="isTriggerNode"
-				:hide-input-and-output="activeNodeType === null"
-				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
-				:is-draggable="!isTriggerNode"
-				:has-double-width="activeNodeType?.parameterPane === 'wide'"
-				:node-type="activeNodeType"
-				@switch-selected-node="onSwitchSelectedNode"
-				@open-connection-node-creator="onOpenConnectionNodeCreator"
-				@close="close"
-				@init="onPanelsInit"
-				@dragstart="onDragStart"
-				@dragend="onDragEnd"
-			>
-				<template v-if="showTriggerPanel || !isTriggerNode" #input>
-					<TriggerPanel
-						v-if="showTriggerPanel"
-						:node-name="activeNode.name"
-						:push-ref="pushRef"
-						@execute="onNodeExecute"
-						@activate="onWorkflowActivate"
-					/>
-					<InputPanel
-						v-else-if="!isTriggerNode"
-						:workflow="workflowObject"
-						:can-link-runs="canLinkRuns"
-						:run-index="inputRun"
-						:linked-runs="linked"
-						:current-node-name="inputNodeName"
-						:push-ref="pushRef"
-						:read-only="readOnly || hasForeignCredential"
-						:is-production-execution-preview="isProductionExecutionPreview"
-						:is-pane-active="isInputPaneActive"
-						@activate-pane="activateInputPane"
-						@link-run="onLinkRunToInput"
-						@unlink-run="() => onUnlinkRun('input')"
-						@run-change="onRunInputIndexChange"
-						@open-settings="openSettings"
-						@change-input-node="onInputNodeChange"
-						@execute="onNodeExecute"
-						@table-mounted="onInputTableMounted"
-						@item-hover="onInputItemHover"
-						@search="onSearch"
-					/>
-				</template>
-				<template #output>
-					<OutputPanel
-						data-test-id="output-panel"
-						:workflow="workflowObject"
-						:can-link-runs="canLinkRuns"
-						:run-index="outputRun"
-						:linked-runs="linked"
-						:push-ref="pushRef"
-						:is-read-only="readOnly || hasForeignCredential"
-						:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
-						:is-production-execution-preview="isProductionExecutionPreview"
-						:is-pane-active="isOutputPaneActive"
-						@activate-pane="activateOutputPane"
-						@link-run="onLinkRunToOutput"
-						@unlink-run="() => onUnlinkRun('output')"
-						@run-change="onRunOutputIndexChange"
-						@open-settings="openSettings"
-						@table-mounted="onOutputTableMounted"
-						@item-hover="onOutputItemHover"
-						@search="onSearch"
-					/>
-				</template>
-				<template #main>
-					<NodeSettings
-						:event-bus="settingsEventBus"
-						:dragging="isDragging"
-						:push-ref="pushRef"
-						:node-type="activeNodeType"
-						:foreign-credentials="foreignCredentials"
-						:read-only="readOnly"
-						:block-u-i="blockUi && showTriggerPanel"
-						:executable="!readOnly"
-						:input-size="inputSize"
-						@value-changed="valueChanged"
-						@execute="onNodeExecute"
-						@stop-execution="onStopExecution"
-						@redraw-required="redrawRequired = true"
-						@activate="onWorkflowActivate"
-						@switch-selected-node="onSwitchSelectedNode"
-						@open-connection-node-creator="onOpenConnectionNodeCreator"
-					/>
-					<a
-						v-if="featureRequestUrl"
-						:class="$style.featureRequest"
-						target="_blank"
-						@click="onFeatureRequestClick"
-					>
-						<font-awesome-icon icon="lightbulb" />
-						{{ $locale.baseText('ndv.featureRequest') }}
-					</a>
-				</template>
-			</NDVDraggablePanels>
-		</div>
-	</el-dialog>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 import { createEventBus } from 'n8n-design-system/utils';
@@ -796,6 +656,146 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<el-dialog
+		:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
+		:before-close="close"
+		:show-close="false"
+		class="data-display-wrapper ndv-wrapper"
+		overlay-class="data-display-overlay"
+		width="auto"
+		append-to-body
+		data-test-id="ndv"
+		:data-has-output-connection="hasOutputConnection"
+	>
+		<n8n-tooltip
+			placement="bottom-start"
+			:visible="showTriggerWaitingWarning"
+			:disabled="!showTriggerWaitingWarning"
+		>
+			<template #content>
+				<div :class="$style.triggerWarning">
+					{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
+				</div>
+			</template>
+			<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
+				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
+				<n8n-text color="text-xlight" size="medium" :bold="true">
+					{{ $locale.baseText('ndv.backToCanvas') }}
+				</n8n-text>
+			</div>
+		</n8n-tooltip>
+
+		<div
+			v-if="activeNode"
+			ref="container"
+			class="data-display"
+			tabindex="0"
+			@keydown.capture="onKeyDown"
+		>
+			<div :class="$style.modalBackground" @click="close"></div>
+			<NDVDraggablePanels
+				:key="activeNode.name"
+				:is-trigger-node="isTriggerNode"
+				:hide-input-and-output="activeNodeType === null"
+				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
+				:is-draggable="!isTriggerNode"
+				:has-double-width="activeNodeType?.parameterPane === 'wide'"
+				:node-type="activeNodeType"
+				@switch-selected-node="onSwitchSelectedNode"
+				@open-connection-node-creator="onOpenConnectionNodeCreator"
+				@close="close"
+				@init="onPanelsInit"
+				@dragstart="onDragStart"
+				@dragend="onDragEnd"
+			>
+				<template v-if="showTriggerPanel || !isTriggerNode" #input>
+					<TriggerPanel
+						v-if="showTriggerPanel"
+						:node-name="activeNode.name"
+						:push-ref="pushRef"
+						@execute="onNodeExecute"
+						@activate="onWorkflowActivate"
+					/>
+					<InputPanel
+						v-else-if="!isTriggerNode"
+						:workflow="workflowObject"
+						:can-link-runs="canLinkRuns"
+						:run-index="inputRun"
+						:linked-runs="linked"
+						:current-node-name="inputNodeName"
+						:push-ref="pushRef"
+						:read-only="readOnly || hasForeignCredential"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:is-pane-active="isInputPaneActive"
+						@activate-pane="activateInputPane"
+						@link-run="onLinkRunToInput"
+						@unlink-run="() => onUnlinkRun('input')"
+						@run-change="onRunInputIndexChange"
+						@open-settings="openSettings"
+						@change-input-node="onInputNodeChange"
+						@execute="onNodeExecute"
+						@table-mounted="onInputTableMounted"
+						@item-hover="onInputItemHover"
+						@search="onSearch"
+					/>
+				</template>
+				<template #output>
+					<OutputPanel
+						data-test-id="output-panel"
+						:workflow="workflowObject"
+						:can-link-runs="canLinkRuns"
+						:run-index="outputRun"
+						:linked-runs="linked"
+						:push-ref="pushRef"
+						:is-read-only="readOnly || hasForeignCredential"
+						:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:is-pane-active="isOutputPaneActive"
+						@activate-pane="activateOutputPane"
+						@link-run="onLinkRunToOutput"
+						@unlink-run="() => onUnlinkRun('output')"
+						@run-change="onRunOutputIndexChange"
+						@open-settings="openSettings"
+						@table-mounted="onOutputTableMounted"
+						@item-hover="onOutputItemHover"
+						@search="onSearch"
+					/>
+				</template>
+				<template #main>
+					<NodeSettings
+						:event-bus="settingsEventBus"
+						:dragging="isDragging"
+						:push-ref="pushRef"
+						:node-type="activeNodeType"
+						:foreign-credentials="foreignCredentials"
+						:read-only="readOnly"
+						:block-u-i="blockUi && showTriggerPanel"
+						:executable="!readOnly"
+						:input-size="inputSize"
+						@value-changed="valueChanged"
+						@execute="onNodeExecute"
+						@stop-execution="onStopExecution"
+						@redraw-required="redrawRequired = true"
+						@activate="onWorkflowActivate"
+						@switch-selected-node="onSwitchSelectedNode"
+						@open-connection-node-creator="onOpenConnectionNodeCreator"
+					/>
+					<a
+						v-if="featureRequestUrl"
+						:class="$style.featureRequest"
+						target="_blank"
+						@click="onFeatureRequestClick"
+					>
+						<font-awesome-icon icon="lightbulb" />
+						{{ $locale.baseText('ndv.featureRequest') }}
+					</a>
+				</template>
+			</NDVDraggablePanels>
+		</div>
+	</el-dialog>
+</template>
+
 <style lang="scss">
 // Hide notice(.ndv-connection-hint-notice) warning when node has output connection
 [data-has-output-connection='true'] .ndv-connection-hint-notice {
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 1a70354735231..b66df657df059 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -1,32 +1,3 @@
-<template>
-	<div>
-		<n8n-tooltip placement="right" :disabled="!tooltipText">
-			<template #content>
-				<div>{{ tooltipText }}</div>
-			</template>
-			<div>
-				<n8n-button
-					v-bind="$attrs"
-					:loading
-					:disabled="disabled || !!disabledHint"
-					:label="buttonLabel"
-					:type="type"
-					:size="size"
-					:icon="!isListeningForEvents && !hideIcon ? 'flask' : undefined"
-					:transparent-background="transparent"
-					:title="
-						!isTriggerNode && !tooltipText
-							? $locale.baseText('ndv.execute.testNode.description')
-							: ''
-					"
-					@mouseover="onMouseOver"
-					@click="onClick"
-				/>
-			</div>
-		</n8n-tooltip>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -319,3 +290,32 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<n8n-tooltip placement="right" :disabled="!tooltipText">
+			<template #content>
+				<div>{{ tooltipText }}</div>
+			</template>
+			<div>
+				<n8n-button
+					v-bind="$attrs"
+					:loading
+					:disabled="disabled || !!disabledHint"
+					:label="buttonLabel"
+					:type="type"
+					:size="size"
+					:icon="!isListeningForEvents && !hideIcon ? 'flask' : undefined"
+					:transparent-background="transparent"
+					:title="
+						!isTriggerNode && !tooltipText
+							? $locale.baseText('ndv.execute.testNode.description')
+							: ''
+					"
+					@mouseover="onMouseOver"
+					@click="onClick"
+				/>
+			</div>
+		</n8n-tooltip>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 66e78837188e9..45b57fd323a48 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -1,20 +1,3 @@
-<template>
-	<n8n-node-icon
-		:type="iconType"
-		:src="iconSource.path || iconSource.fileBuffer"
-		:name="iconSource.icon"
-		:color="color"
-		:disabled="disabled"
-		:size="size"
-		:circle="circle"
-		:node-type-name="nodeName ?? nodeType?.displayName ?? ''"
-		:show-tooltip="showTooltip"
-		:tooltip-position="tooltipPosition"
-		:badge="badge"
-		@click="emit('click')"
-	></n8n-node-icon>
-</template>
-
 <script setup lang="ts">
 import type { IVersionNode, SimplifiedNodeType } from '@/Interface';
 import { useRootStore } from '@/stores/root.store';
@@ -130,4 +113,21 @@ const badge = computed(() => {
 });
 </script>
 
+<template>
+	<n8n-node-icon
+		:type="iconType"
+		:src="iconSource.path || iconSource.fileBuffer"
+		:name="iconSource.icon"
+		:color="color"
+		:disabled="disabled"
+		:size="size"
+		:circle="circle"
+		:node-type-name="nodeName ?? nodeType?.displayName ?? ''"
+		:show-tooltip="showTooltip"
+		:tooltip-position="tooltipPosition"
+		:badge="badge"
+		@click="emit('click')"
+	></n8n-node-icon>
+</template>
+
 <style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/NodeList.vue b/packages/editor-ui/src/components/NodeList.vue
index 53d710ad15932..8e93ecbe5ae49 100644
--- a/packages/editor-ui/src/components/NodeList.vue
+++ b/packages/editor-ui/src/components/NodeList.vue
@@ -1,17 +1,3 @@
-<template>
-	<div :class="$style.list">
-		<div v-for="node in slicedNodes" :key="node.name" :class="[$style.container, $style[size]]">
-			<NodeIcon :node-type="node" :size="size === 'md' ? 24 : 18" :show-tooltip="true" />
-		</div>
-		<div
-			v-if="filteredCoreNodes.length > limit + 1"
-			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
-		>
-			+{{ hiddenNodes }}
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import NodeIcon from '@/components/NodeIcon.vue';
@@ -59,6 +45,20 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.list">
+		<div v-for="node in slicedNodes" :key="node.name" :class="[$style.container, $style[size]]">
+			<NodeIcon :node-type="node" :size="size === 'md' ? 24 : 18" :show-tooltip="true" />
+		</div>
+		<div
+			v-if="filteredCoreNodes.length > limit + 1"
+			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
+		>
+			+{{ hiddenNodes }}
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .list {
 	max-width: 100px;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index d9b8a734c190d..9acc78a24cf37 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -1,184 +1,3 @@
-<template>
-	<div
-		:class="{
-			'node-settings': true,
-			dragging: dragging,
-		}"
-		@keydown.stop
-	>
-		<div :class="$style.header">
-			<div class="header-side-menu">
-				<NodeTitle
-					v-if="node"
-					class="node-name"
-					:model-value="node.name"
-					:node-type="nodeType"
-					:read-only="isReadOnly"
-					@update:model-value="nameChanged"
-				></NodeTitle>
-				<div v-if="isExecutable">
-					<NodeExecuteButton
-						v-if="!blockUI && node && nodeValid"
-						data-test-id="node-execute-button"
-						:node-name="node.name"
-						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
-						:tooltip="executeButtonTooltip"
-						size="small"
-						telemetry-source="parameters"
-						@execute="onNodeExecute"
-						@stop-execution="onStopExecution"
-					/>
-				</div>
-			</div>
-			<NodeSettingsTabs
-				v-if="node && nodeValid"
-				:model-value="openPanel"
-				:node-type="nodeType"
-				:push-ref="pushRef"
-				@update:model-value="onTabSelect"
-			/>
-		</div>
-		<div v-if="node && !nodeValid" class="node-is-not-valid">
-			<p :class="$style.warningIcon">
-				<font-awesome-icon icon="exclamation-triangle" />
-			</p>
-			<div class="missingNodeTitleContainer mt-s mb-xs">
-				<n8n-text size="large" color="text-dark" bold>
-					{{ $locale.baseText('nodeSettings.communityNodeUnknown.title') }}
-				</n8n-text>
-			</div>
-			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
-				<div class="mb-l">
-					<i18n-t
-						keypath="nodeSettings.communityNodeUnknown.description"
-						tag="span"
-						@click="onMissingNodeTextClick"
-					>
-						<template #action>
-							<a
-								:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
-								target="_blank"
-								>{{ node.type.split('.')[0] }}</a
-							>
-						</template>
-					</i18n-t>
-				</div>
-				<n8n-link
-					:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
-					@click="onMissingNodeLearnMoreLinkClick"
-				>
-					{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
-				</n8n-link>
-			</div>
-			<i18n-t v-else keypath="nodeSettings.nodeTypeUnknown.description" tag="span">
-				<template #action>
-					<a
-						:href="CUSTOM_NODES_DOCS_URL"
-						target="_blank"
-						v-text="$locale.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
-					/>
-				</template>
-			</i18n-t>
-		</div>
-		<div v-if="node && nodeValid" class="node-parameters-wrapper" data-test-id="node-parameters">
-			<n8n-notice
-				v-if="hasForeignCredential"
-				:content="
-					$locale.baseText('nodeSettings.hasForeignCredential', {
-						interpolate: { owner: credentialOwnerName },
-					})
-				"
-			/>
-			<div v-show="openPanel === 'params'">
-				<NodeWebhooks :node="node" :node-type="nodeType" />
-
-				<ParameterInputList
-					v-if="nodeValuesInitialized"
-					:parameters="parametersNoneSetting"
-					:hide-delete="true"
-					:node-values="nodeValues"
-					:is-read-only="isReadOnly"
-					:hidden-issues-inputs="hiddenIssuesInputs"
-					path="parameters"
-					@value-changed="valueChanged"
-					@activate="onWorkflowActivate"
-					@parameter-blur="onParameterBlur"
-				>
-					<NodeCredentials
-						:node="node"
-						:readonly="isReadOnly"
-						:show-all="true"
-						:hide-issues="hiddenIssuesInputs.includes('credentials')"
-						@credential-selected="credentialSelected"
-						@value-changed="valueChanged"
-						@blur="onParameterBlur"
-					/>
-				</ParameterInputList>
-				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
-					<n8n-text>
-						{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
-					</n8n-text>
-				</div>
-
-				<div
-					v-if="nodeHelpers.isCustomApiCallSelected(nodeValues)"
-					class="parameter-item parameter-notice"
-					data-test-id="node-parameters-http-notice"
-				>
-					<n8n-notice
-						:content="
-							$locale.baseText('nodeSettings.useTheHttpRequestNode', {
-								interpolate: { nodeTypeDisplayName: nodeType?.displayName ?? '' },
-							})
-						"
-					/>
-				</div>
-			</div>
-			<div v-show="openPanel === 'settings'">
-				<ParameterInputList
-					:parameters="parametersSetting"
-					:node-values="nodeValues"
-					:is-read-only="isReadOnly"
-					:hide-delete="true"
-					:hidden-issues-inputs="hiddenIssuesInputs"
-					path="parameters"
-					@value-changed="valueChanged"
-					@parameter-blur="onParameterBlur"
-				/>
-				<ParameterInputList
-					:parameters="nodeSettings"
-					:hide-delete="true"
-					:node-values="nodeValues"
-					:is-read-only="isReadOnly"
-					:hidden-issues-inputs="hiddenIssuesInputs"
-					path=""
-					@value-changed="valueChanged"
-					@parameter-blur="onParameterBlur"
-				/>
-				<div class="node-version" data-test-id="node-version">
-					{{
-						$locale.baseText('nodeSettings.nodeVersion', {
-							interpolate: {
-								node: nodeType?.displayName as string,
-								version: (node.typeVersion ?? latestVersion).toString(),
-							},
-						})
-					}}
-					<span>({{ nodeVersionTag }})</span>
-				</div>
-			</div>
-		</div>
-		<NDVSubConnections
-			v-if="node"
-			ref="subConnections"
-			:root-node="node"
-			@switch-selected-node="onSwitchSelectedNode"
-			@open-connection-node-creator="onOpenConnectionNodeCreator"
-		/>
-		<n8n-block-ui :show="blockUI" />
-	</div>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -1185,6 +1004,187 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:class="{
+			'node-settings': true,
+			dragging: dragging,
+		}"
+		@keydown.stop
+	>
+		<div :class="$style.header">
+			<div class="header-side-menu">
+				<NodeTitle
+					v-if="node"
+					class="node-name"
+					:model-value="node.name"
+					:node-type="nodeType"
+					:read-only="isReadOnly"
+					@update:model-value="nameChanged"
+				></NodeTitle>
+				<div v-if="isExecutable">
+					<NodeExecuteButton
+						v-if="!blockUI && node && nodeValid"
+						data-test-id="node-execute-button"
+						:node-name="node.name"
+						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
+						:tooltip="executeButtonTooltip"
+						size="small"
+						telemetry-source="parameters"
+						@execute="onNodeExecute"
+						@stop-execution="onStopExecution"
+					/>
+				</div>
+			</div>
+			<NodeSettingsTabs
+				v-if="node && nodeValid"
+				:model-value="openPanel"
+				:node-type="nodeType"
+				:push-ref="pushRef"
+				@update:model-value="onTabSelect"
+			/>
+		</div>
+		<div v-if="node && !nodeValid" class="node-is-not-valid">
+			<p :class="$style.warningIcon">
+				<font-awesome-icon icon="exclamation-triangle" />
+			</p>
+			<div class="missingNodeTitleContainer mt-s mb-xs">
+				<n8n-text size="large" color="text-dark" bold>
+					{{ $locale.baseText('nodeSettings.communityNodeUnknown.title') }}
+				</n8n-text>
+			</div>
+			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
+				<div class="mb-l">
+					<i18n-t
+						keypath="nodeSettings.communityNodeUnknown.description"
+						tag="span"
+						@click="onMissingNodeTextClick"
+					>
+						<template #action>
+							<a
+								:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
+								target="_blank"
+								>{{ node.type.split('.')[0] }}</a
+							>
+						</template>
+					</i18n-t>
+				</div>
+				<n8n-link
+					:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
+					@click="onMissingNodeLearnMoreLinkClick"
+				>
+					{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
+				</n8n-link>
+			</div>
+			<i18n-t v-else keypath="nodeSettings.nodeTypeUnknown.description" tag="span">
+				<template #action>
+					<a
+						:href="CUSTOM_NODES_DOCS_URL"
+						target="_blank"
+						v-text="$locale.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
+					/>
+				</template>
+			</i18n-t>
+		</div>
+		<div v-if="node && nodeValid" class="node-parameters-wrapper" data-test-id="node-parameters">
+			<n8n-notice
+				v-if="hasForeignCredential"
+				:content="
+					$locale.baseText('nodeSettings.hasForeignCredential', {
+						interpolate: { owner: credentialOwnerName },
+					})
+				"
+			/>
+			<div v-show="openPanel === 'params'">
+				<NodeWebhooks :node="node" :node-type="nodeType" />
+
+				<ParameterInputList
+					v-if="nodeValuesInitialized"
+					:parameters="parametersNoneSetting"
+					:hide-delete="true"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
+					path="parameters"
+					@value-changed="valueChanged"
+					@activate="onWorkflowActivate"
+					@parameter-blur="onParameterBlur"
+				>
+					<NodeCredentials
+						:node="node"
+						:readonly="isReadOnly"
+						:show-all="true"
+						:hide-issues="hiddenIssuesInputs.includes('credentials')"
+						@credential-selected="credentialSelected"
+						@value-changed="valueChanged"
+						@blur="onParameterBlur"
+					/>
+				</ParameterInputList>
+				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
+					<n8n-text>
+						{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
+					</n8n-text>
+				</div>
+
+				<div
+					v-if="nodeHelpers.isCustomApiCallSelected(nodeValues)"
+					class="parameter-item parameter-notice"
+					data-test-id="node-parameters-http-notice"
+				>
+					<n8n-notice
+						:content="
+							$locale.baseText('nodeSettings.useTheHttpRequestNode', {
+								interpolate: { nodeTypeDisplayName: nodeType?.displayName ?? '' },
+							})
+						"
+					/>
+				</div>
+			</div>
+			<div v-show="openPanel === 'settings'">
+				<ParameterInputList
+					:parameters="parametersSetting"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hide-delete="true"
+					:hidden-issues-inputs="hiddenIssuesInputs"
+					path="parameters"
+					@value-changed="valueChanged"
+					@parameter-blur="onParameterBlur"
+				/>
+				<ParameterInputList
+					:parameters="nodeSettings"
+					:hide-delete="true"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
+					path=""
+					@value-changed="valueChanged"
+					@parameter-blur="onParameterBlur"
+				/>
+				<div class="node-version" data-test-id="node-version">
+					{{
+						$locale.baseText('nodeSettings.nodeVersion', {
+							interpolate: {
+								node: nodeType?.displayName as string,
+								version: (node.typeVersion ?? latestVersion).toString(),
+							},
+						})
+					}}
+					<span>({{ nodeVersionTag }})</span>
+				</div>
+			</div>
+		</div>
+		<NDVSubConnections
+			v-if="node"
+			ref="subConnections"
+			:root-node="node"
+			@switch-selected-node="onSwitchSelectedNode"
+			@open-connection-node-creator="onOpenConnectionNodeCreator"
+		/>
+		<n8n-block-ui :show="blockUI" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .header {
 	background-color: var(--color-background-base);
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 11a779d3a40d0..8b9f06f2b6150 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -1,12 +1,3 @@
-<template>
-	<N8nTabs
-		:options="options"
-		:model-value="modelValue"
-		@update:model-value="onTabSelect"
-		@tooltip-click="onTooltipClick"
-	/>
-</template>
-
 <script setup lang="ts">
 import type { ITab } from '@/Interface';
 import {
@@ -163,6 +154,15 @@ function onTooltipClick(tab: string, event: MouseEvent) {
 }
 </script>
 
+<template>
+	<N8nTabs
+		:options="options"
+		:model-value="modelValue"
+		@update:model-value="onTabSelect"
+		@tooltip-click="onTooltipClick"
+	/>
+</template>
+
 <style lang="scss">
 #communityNode > div {
 	cursor: auto;
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 5e1168928e21f..01324b01281f4 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -1,46 +1,3 @@
-<template>
-	<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
-		<span :class="$style.iconWrapper">
-			<NodeIcon :node-type="nodeType" :size="18" />
-		</span>
-		<n8n-popover placement="right" width="200" :visible="editName" :disabled="!editable">
-			<div
-				:class="$style.editContainer"
-				@keydown.enter="onRename"
-				@keydown.stop
-				@keydown.esc="editName = false"
-			>
-				<n8n-text :bold="true" color="text-base" tag="div">{{
-					$locale.baseText('ndv.title.renameNode')
-				}}</n8n-text>
-				<n8n-input ref="input" v-model="newName" size="small" data-test-id="node-rename-input" />
-				<div :class="$style.editButtons">
-					<n8n-button
-						type="secondary"
-						size="small"
-						:label="$locale.baseText('ndv.title.cancel')"
-						@click="editName = false"
-					/>
-					<n8n-button
-						type="primary"
-						size="small"
-						:label="$locale.baseText('ndv.title.rename')"
-						@click="onRename"
-					/>
-				</div>
-			</div>
-			<template #reference>
-				<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
-					{{ modelValue }}
-					<div :class="$style.editIconContainer">
-						<font-awesome-icon v-if="editable" :class="$style.editIcon" icon="pencil-alt" />
-					</div>
-				</div>
-			</template>
-		</n8n-popover>
-	</span>
-</template>
-
 <script setup lang="ts">
 import NodeIcon from '@/components/NodeIcon.vue';
 import type { INodeTypeDescription } from 'n8n-workflow';
@@ -84,6 +41,49 @@ function onRename() {
 }
 </script>
 
+<template>
+	<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
+		<span :class="$style.iconWrapper">
+			<NodeIcon :node-type="nodeType" :size="18" />
+		</span>
+		<n8n-popover placement="right" width="200" :visible="editName" :disabled="!editable">
+			<div
+				:class="$style.editContainer"
+				@keydown.enter="onRename"
+				@keydown.stop
+				@keydown.esc="editName = false"
+			>
+				<n8n-text :bold="true" color="text-base" tag="div">{{
+					$locale.baseText('ndv.title.renameNode')
+				}}</n8n-text>
+				<n8n-input ref="input" v-model="newName" size="small" data-test-id="node-rename-input" />
+				<div :class="$style.editButtons">
+					<n8n-button
+						type="secondary"
+						size="small"
+						:label="$locale.baseText('ndv.title.cancel')"
+						@click="editName = false"
+					/>
+					<n8n-button
+						type="primary"
+						size="small"
+						:label="$locale.baseText('ndv.title.rename')"
+						@click="onRename"
+					/>
+				</div>
+			</div>
+			<template #reference>
+				<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
+					{{ modelValue }}
+					<div :class="$style.editIconContainer">
+						<font-awesome-icon v-if="editable" :class="$style.editIcon" icon="pencil-alt" />
+					</div>
+				</div>
+			</template>
+		</n8n-popover>
+	</span>
+</template>
+
 <style lang="scss" module>
 .container {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 5ee9d9979fb0a..6924bbc82e029 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -1,54 +1,3 @@
-<template>
-	<div v-if="webhooksNode.length && visibleWebhookUrls.length > 0" class="webhooks">
-		<div
-			class="clickable headline"
-			:class="{ expanded: !isMinimized }"
-			:title="isMinimized ? baseText.clickToDisplay : baseText.clickToHide"
-			@click="isMinimized = !isMinimized"
-		>
-			<font-awesome-icon icon="angle-right" class="minimize-button minimize-icon" />
-			{{ baseText.toggleTitle }}
-		</div>
-		<el-collapse-transition>
-			<div v-if="!isMinimized" class="node-webhooks">
-				<div v-if="!isProductionOnly" class="url-selection">
-					<el-row>
-						<el-col :span="24">
-							<n8n-radio-buttons v-model="showUrlFor" :options="urlOptions" />
-						</el-col>
-					</el-row>
-				</div>
-
-				<n8n-tooltip
-					v-for="(webhook, index) in visibleWebhookUrls"
-					:key="index"
-					class="item"
-					:content="baseText.clickToCopy"
-					placement="left"
-				>
-					<div v-if="isWebhookMethodVisible(webhook)" class="webhook-wrapper">
-						<div class="http-field">
-							<div class="http-method">{{ getWebhookHttpMethod(webhook) }}<br /></div>
-						</div>
-						<div class="url-field">
-							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
-								{{ getWebhookUrlDisplay(webhook) }}<br />
-							</div>
-						</div>
-					</div>
-					<div v-else class="webhook-wrapper">
-						<div class="url-field-full-width">
-							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
-								{{ getWebhookUrlDisplay(webhook) }}<br />
-							</div>
-						</div>
-					</div>
-				</n8n-tooltip>
-			</div>
-		</el-collapse-transition>
-	</div>
-</template>
-
 <script lang="ts">
 import type { INodeTypeDescription, IWebhookDescription } from 'n8n-workflow';
 import { defineComponent } from 'vue';
@@ -218,6 +167,57 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="webhooksNode.length && visibleWebhookUrls.length > 0" class="webhooks">
+		<div
+			class="clickable headline"
+			:class="{ expanded: !isMinimized }"
+			:title="isMinimized ? baseText.clickToDisplay : baseText.clickToHide"
+			@click="isMinimized = !isMinimized"
+		>
+			<font-awesome-icon icon="angle-right" class="minimize-button minimize-icon" />
+			{{ baseText.toggleTitle }}
+		</div>
+		<el-collapse-transition>
+			<div v-if="!isMinimized" class="node-webhooks">
+				<div v-if="!isProductionOnly" class="url-selection">
+					<el-row>
+						<el-col :span="24">
+							<n8n-radio-buttons v-model="showUrlFor" :options="urlOptions" />
+						</el-col>
+					</el-row>
+				</div>
+
+				<n8n-tooltip
+					v-for="(webhook, index) in visibleWebhookUrls"
+					:key="index"
+					class="item"
+					:content="baseText.clickToCopy"
+					placement="left"
+				>
+					<div v-if="isWebhookMethodVisible(webhook)" class="webhook-wrapper">
+						<div class="http-field">
+							<div class="http-method">{{ getWebhookHttpMethod(webhook) }}<br /></div>
+						</div>
+						<div class="url-field">
+							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
+								{{ getWebhookUrlDisplay(webhook) }}<br />
+							</div>
+						</div>
+					</div>
+					<div v-else class="webhook-wrapper">
+						<div class="url-field-full-width">
+							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
+								{{ getWebhookUrlDisplay(webhook) }}<br />
+							</div>
+						</div>
+					</div>
+				</n8n-tooltip>
+			</div>
+		</el-collapse-transition>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .webhooks {
 	padding-bottom: var(--spacing-xs);
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index af1a7801f6652..b1ddc35042d4b 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -1,107 +1,3 @@
-<template>
-	<RunData
-		ref="runDataRef"
-		:node="node"
-		:workflow="workflow"
-		:run-index="runIndex"
-		:linked-runs="linkedRuns"
-		:can-link-runs="canLinkRuns"
-		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
-		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
-		:is-executing="isNodeRunning"
-		:executing-message="$locale.baseText('ndv.output.executing')"
-		:push-ref="pushRef"
-		:block-u-i="blockUI"
-		:is-production-execution-preview="isProductionExecutionPreview"
-		:is-pane-active="isPaneActive"
-		pane-type="output"
-		:data-output-type="outputMode"
-		@activate-pane="activatePane"
-		@run-change="onRunIndexChange"
-		@link-run="onLinkRun"
-		@unlink-run="onUnlinkRun"
-		@table-mounted="emit('tableMounted', $event)"
-		@item-hover="emit('itemHover', $event)"
-		@search="emit('search', $event)"
-	>
-		<template #header>
-			<div :class="$style.titleSection">
-				<template v-if="hasAiMetadata">
-					<n8n-radio-buttons
-						data-test-id="ai-output-mode-select"
-						v-model="outputMode"
-						:options="outputTypes"
-						@update:model-value="onUpdateOutputMode"
-					/>
-				</template>
-				<span v-else :class="$style.title">
-					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
-				</span>
-				<RunInfo
-					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
-					v-show="!outputPanelEditMode.enabled"
-					:task-data="runTaskData"
-					:has-stale-data="staleData"
-					:has-pin-data="pinnedData.hasData.value"
-				/>
-			</div>
-		</template>
-
-		<template #node-not-run>
-			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
-				$locale.baseText('ndv.output.waitingToRun')
-			}}</n8n-text>
-			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
-				<template v-if="isSubNodeType">
-					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
-				</template>
-				<template v-else>
-					{{ $locale.baseText('ndv.output.runNodeHint') }}
-					<span v-if="canPinData" @click="insertTestData">
-						<br />
-						{{ $locale.baseText('generic.or') }}
-						<n8n-text tag="a" size="medium" color="primary">
-							{{ $locale.baseText('ndv.output.insertTestData') }}
-						</n8n-text>
-					</span>
-				</template>
-			</n8n-text>
-		</template>
-
-		<template #no-output-data>
-			<n8n-text :bold="true" color="text-dark" size="large">{{
-				$locale.baseText('ndv.output.noOutputData.title')
-			}}</n8n-text>
-			<n8n-text>
-				{{ $locale.baseText('ndv.output.noOutputData.message') }}
-				<a @click="openSettings">{{
-					$locale.baseText('ndv.output.noOutputData.message.settings')
-				}}</a>
-				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
-			</n8n-text>
-		</template>
-
-		<template v-if="outputMode === 'logs' && node" #content>
-			<RunDataAi :node="node" :run-index="runIndex" />
-		</template>
-
-		<template #recovered-artificial-output-data>
-			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
-					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
-			</div>
-		</template>
-
-		<template v-if="!pinnedData.hasData.value && runsCount > 1" #run-info>
-			<RunInfo :task-data="runTaskData" />
-		</template>
-	</RunData>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
 import type { IRunData, IRunExecutionData, NodeError, Workflow } from 'n8n-workflow';
@@ -382,6 +278,110 @@ const activatePane = () => {
 };
 </script>
 
+<template>
+	<RunData
+		ref="runDataRef"
+		:node="node"
+		:workflow="workflow"
+		:run-index="runIndex"
+		:linked-runs="linkedRuns"
+		:can-link-runs="canLinkRuns"
+		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
+		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
+		:is-executing="isNodeRunning"
+		:executing-message="$locale.baseText('ndv.output.executing')"
+		:push-ref="pushRef"
+		:block-u-i="blockUI"
+		:is-production-execution-preview="isProductionExecutionPreview"
+		:is-pane-active="isPaneActive"
+		pane-type="output"
+		:data-output-type="outputMode"
+		@activate-pane="activatePane"
+		@run-change="onRunIndexChange"
+		@link-run="onLinkRun"
+		@unlink-run="onUnlinkRun"
+		@table-mounted="emit('tableMounted', $event)"
+		@item-hover="emit('itemHover', $event)"
+		@search="emit('search', $event)"
+	>
+		<template #header>
+			<div :class="$style.titleSection">
+				<template v-if="hasAiMetadata">
+					<n8n-radio-buttons
+						data-test-id="ai-output-mode-select"
+						v-model="outputMode"
+						:options="outputTypes"
+						@update:model-value="onUpdateOutputMode"
+					/>
+				</template>
+				<span v-else :class="$style.title">
+					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
+				</span>
+				<RunInfo
+					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
+					v-show="!outputPanelEditMode.enabled"
+					:task-data="runTaskData"
+					:has-stale-data="staleData"
+					:has-pin-data="pinnedData.hasData.value"
+				/>
+			</div>
+		</template>
+
+		<template #node-not-run>
+			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
+				$locale.baseText('ndv.output.waitingToRun')
+			}}</n8n-text>
+			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
+				<template v-if="isSubNodeType">
+					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
+				</template>
+				<template v-else>
+					{{ $locale.baseText('ndv.output.runNodeHint') }}
+					<span v-if="canPinData" @click="insertTestData">
+						<br />
+						{{ $locale.baseText('generic.or') }}
+						<n8n-text tag="a" size="medium" color="primary">
+							{{ $locale.baseText('ndv.output.insertTestData') }}
+						</n8n-text>
+					</span>
+				</template>
+			</n8n-text>
+		</template>
+
+		<template #no-output-data>
+			<n8n-text :bold="true" color="text-dark" size="large">{{
+				$locale.baseText('ndv.output.noOutputData.title')
+			}}</n8n-text>
+			<n8n-text>
+				{{ $locale.baseText('ndv.output.noOutputData.message') }}
+				<a @click="openSettings">{{
+					$locale.baseText('ndv.output.noOutputData.message.settings')
+				}}</a>
+				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
+			</n8n-text>
+		</template>
+
+		<template v-if="outputMode === 'logs' && node" #content>
+			<RunDataAi :node="node" :run-index="runIndex" />
+		</template>
+
+		<template #recovered-artificial-output-data>
+			<div :class="$style.recoveredOutputData">
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
+				}}</n8n-text>
+				<n8n-text>
+					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
+				</n8n-text>
+			</div>
+		</template>
+
+		<template v-if="!pinnedData.hasData.value && runsCount > 1" #run-info>
+			<RunInfo :task-data="runTaskData" />
+		</template>
+	</RunData>
+</template>
+
 <style lang="scss" module>
 // The items count and displayModes are rendered in the RunData component
 // this is a workaround to hide it in the output panel(for ai type) to not add unnecessary one-time props
diff --git a/packages/editor-ui/src/components/PageAlert.vue b/packages/editor-ui/src/components/PageAlert.vue
index a6cf03113c31f..9c16a8d21f85f 100644
--- a/packages/editor-ui/src/components/PageAlert.vue
+++ b/packages/editor-ui/src/components/PageAlert.vue
@@ -1,7 +1,3 @@
-<template>
-	<span v-show="false" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { NotificationHandle } from 'element-plus';
@@ -47,3 +43,7 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<span v-show="false" />
+</template>
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 35a10693d8c06..cffd9ce15fe9a 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -1,3 +1,34 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Draggable from './Draggable.vue';
+import type { XYPosition } from '@/Interface';
+
+export default defineComponent({
+	components: {
+		Draggable,
+	},
+	props: {
+		canMoveRight: {
+			type: Boolean,
+		},
+		canMoveLeft: {
+			type: Boolean,
+		},
+	},
+	methods: {
+		onDrag(e: XYPosition) {
+			this.$emit('drag', e);
+		},
+		onDragStart() {
+			this.$emit('dragstart');
+		},
+		onDragEnd() {
+			this.$emit('dragend');
+		},
+	},
+});
+</script>
+
 <template>
 	<Draggable
 		type="panel-resize"
@@ -41,37 +72,6 @@
 	</Draggable>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Draggable from './Draggable.vue';
-import type { XYPosition } from '@/Interface';
-
-export default defineComponent({
-	components: {
-		Draggable,
-	},
-	props: {
-		canMoveRight: {
-			type: Boolean,
-		},
-		canMoveLeft: {
-			type: Boolean,
-		},
-	},
-	methods: {
-		onDrag(e: XYPosition) {
-			this.$emit('drag', e);
-		},
-		onDragStart() {
-			this.$emit('dragstart');
-		},
-		onDragEnd() {
-			this.$emit('dragend');
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .dragContainer {
 	pointer-events: all;
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index b55e7b7c6d3b1..4e056fe83576c 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1,495 +1,3 @@
-<template>
-	<div ref="wrapper" :class="parameterInputClasses" @keydown.stop>
-		<ExpressionEditModal
-			:dialog-visible="expressionEditDialogVisible"
-			:model-value="modelValueExpressionEdit"
-			:parameter="parameter"
-			:node="node"
-			:path="path"
-			:event-source="eventSource || 'ndv'"
-			:is-read-only="isReadOnly"
-			:redact-values="shouldRedactValue"
-			@close-dialog="closeExpressionEditDialog"
-			@update:model-value="expressionUpdated"
-		></ExpressionEditModal>
-
-		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
-			<ResourceLocator
-				v-if="parameter.type === 'resourceLocator'"
-				ref="resourceLocator"
-				:parameter="parameter"
-				:model-value="modelValueResourceLocator"
-				:dependent-parameters-values="dependentParametersValues"
-				:display-title="displayTitle"
-				:expression-display-value="expressionDisplayValue"
-				:expression-computed-value="expressionEvaluated"
-				:is-value-expression="isModelValueExpression"
-				:is-read-only="isReadOnly"
-				:parameter-issues="getIssues"
-				:droppable="droppable"
-				:node="node"
-				:path="path"
-				:event-bus="eventBus"
-				@update:model-value="valueChanged"
-				@modal-opener-click="openExpressionEditorModal"
-				@focus="setFocus"
-				@blur="onBlur"
-				@drop="onResourceLocatorDrop"
-			/>
-			<WorkflowSelectorParameterInput
-				v-else-if="parameter.type === 'workflowSelector'"
-				ref="resourceLocator"
-				:parameter="parameter"
-				:model-value="modelValueResourceLocator"
-				:dependent-parameters-values="dependentParametersValues"
-				:display-title="displayTitle"
-				:expression-display-value="expressionDisplayValue"
-				:expression-computed-value="expressionEvaluated"
-				:is-value-expression="isModelValueExpression"
-				:expression-edit-dialog-visible="expressionEditDialogVisible"
-				:path="path"
-				:parameter-issues="getIssues"
-				@update:model-value="valueChanged"
-				@modal-opener-click="openExpressionEditorModal"
-				@focus="setFocus"
-				@blur="onBlur"
-				@drop="onResourceLocatorDrop"
-			/>
-			<ExpressionParameterInput
-				v-else-if="isModelValueExpression || forceShowExpression"
-				ref="inputField"
-				:model-value="expressionDisplayValue"
-				:title="displayTitle"
-				:is-read-only="isReadOnly"
-				:rows="rows"
-				:is-assignment="isAssignment"
-				:path="path"
-				:additional-expression-data="additionalExpressionData"
-				:class="{ 'ph-no-capture': shouldRedactValue }"
-				:event-bus="eventBus"
-				@update:model-value="expressionUpdated"
-				@modal-opener-click="openExpressionEditorModal"
-				@focus="setFocus"
-				@blur="onBlur"
-			/>
-			<div
-				v-else-if="
-					['json', 'string'].includes(parameter.type) ||
-					remoteParameterOptionsLoadingIssues !== null
-				"
-			>
-				<el-dialog
-					:model-value="codeEditDialogVisible"
-					append-to-body
-					width="80%"
-					:title="`${i18n.baseText('codeEdit.edit')} ${$locale
-						.nodeText()
-						.inputLabelDisplayName(parameter, path)}`"
-					:before-close="closeCodeEditDialog"
-					data-test-id="code-editor-fullscreen"
-				>
-					<div :key="codeEditDialogVisible.toString()" class="ignore-key-press code-edit-dialog">
-						<CodeNodeEditor
-							v-if="editorType === 'codeNodeEditor'"
-							:mode="codeEditorMode"
-							:model-value="modelValueString"
-							:default-value="parameter.default"
-							:language="editorLanguage"
-							:is-read-only="isReadOnly"
-							fill-parent
-							@update:model-value="valueChangedDebounced"
-						/>
-						<HtmlEditor
-							v-else-if="editorType === 'htmlEditor'"
-							:model-value="modelValueString"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							:disable-expression-coloring="!isHtmlNode"
-							:disable-expression-completions="!isHtmlNode"
-							fullscreen
-							@update:model-value="valueChangedDebounced"
-						/>
-						<SqlEditor
-							v-else-if="editorType === 'sqlEditor'"
-							:model-value="modelValueString"
-							:dialect="getArgument('sqlDialect')"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							fullscreen
-							@update:model-value="valueChangedDebounced"
-						/>
-						<JsEditor
-							v-else-if="editorType === 'jsEditor'"
-							:model-value="modelValueString"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							fill-parent
-							@update:model-value="valueChangedDebounced"
-						/>
-
-						<JsonEditor
-							v-else-if="parameter.type === 'json'"
-							:model-value="modelValueString"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							fill-parent
-							@update:model-value="valueChangedDebounced"
-						/>
-					</div>
-				</el-dialog>
-
-				<TextEdit
-					:dialog-visible="textEditDialogVisible"
-					:model-value="`${modelValue}`"
-					:parameter="parameter"
-					:path="path"
-					:is-read-only="isReadOnly"
-					@close-dialog="closeTextEditDialog"
-					@update:model-value="expressionUpdated"
-				></TextEdit>
-
-				<CodeNodeEditor
-					v-if="editorType === 'codeNodeEditor' && isCodeNode"
-					:key="'code-' + codeEditDialogVisible.toString()"
-					:mode="codeEditorMode"
-					:model-value="modelValueString"
-					:default-value="parameter.default"
-					:language="editorLanguage"
-					:is-read-only="isReadOnly || editorIsReadOnly"
-					:rows="editorRows"
-					:ai-button-enabled="settingsStore.isCloudDeployment"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							v-if="!editorIsReadOnly"
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</CodeNodeEditor>
-
-				<HtmlEditor
-					v-else-if="editorType === 'htmlEditor'"
-					:key="'html-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:is-read-only="isReadOnly"
-					:rows="editorRows"
-					:disable-expression-coloring="!isHtmlNode"
-					:disable-expression-completions="!isHtmlNode"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</HtmlEditor>
-
-				<SqlEditor
-					v-else-if="editorType === 'sqlEditor'"
-					:key="'sql-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:dialect="getArgument('sqlDialect')"
-					:is-read-only="isReadOnly"
-					:rows="editorRows"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</SqlEditor>
-
-				<JsEditor
-					v-else-if="editorType === 'jsEditor'"
-					:key="'js-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:is-read-only="isReadOnly || editorIsReadOnly"
-					:rows="editorRows"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							v-if="!editorIsReadOnly"
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</JsEditor>
-
-				<JsonEditor
-					v-else-if="parameter.type === 'json'"
-					:key="'json-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:is-read-only="isReadOnly"
-					:rows="editorRows"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</JsonEditor>
-
-				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
-					<CodeNodeEditor
-						v-if="!codeEditDialogVisible"
-						:mode="codeEditorMode"
-						:model-value="modelValueString"
-						:language="editorLanguage"
-						:is-read-only="true"
-						:rows="editorRows"
-					/>
-				</div>
-
-				<N8nInput
-					v-else
-					ref="inputField"
-					v-model="tempValue"
-					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
-					:size="inputSize"
-					:type="getStringInputType"
-					:rows="editorRows"
-					:disabled="
-						isReadOnly ||
-						remoteParameterOptionsLoading ||
-						remoteParameterOptionsLoadingIssues !== null
-					"
-					:title="displayTitle"
-					:placeholder="getPlaceholder()"
-					@update:model-value="(valueChanged($event) as undefined) && onUpdateTextInput($event)"
-					@keydown.stop
-					@focus="setFocus"
-					@blur="onBlur"
-				>
-					<template #suffix>
-						<n8n-icon
-							v-if="!isReadOnly && !isSecretParameter"
-							icon="external-link-alt"
-							size="xsmall"
-							class="edit-window-button textarea-modal-opener"
-							:class="{
-								focused: isFocused,
-								invalid: !isFocused && getIssues.length > 0 && !isModelValueExpression,
-							}"
-							:title="i18n.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-							@focus="setFocus"
-						/>
-					</template>
-				</N8nInput>
-			</div>
-
-			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
-				<el-color-picker
-					size="small"
-					class="color-picker"
-					:model-value="displayValue"
-					:disabled="isReadOnly"
-					:title="displayTitle"
-					:show-alpha="getArgument('showAlpha')"
-					@focus="setFocus"
-					@blur="onBlur"
-					@update:model-value="valueChanged"
-				/>
-				<N8nInput
-					v-model="tempValue"
-					:size="inputSize"
-					type="text"
-					:disabled="isReadOnly"
-					:title="displayTitle"
-					@update:model-value="valueChanged"
-					@keydown.stop
-					@focus="setFocus"
-					@blur="onBlur"
-				/>
-			</div>
-
-			<el-date-picker
-				v-else-if="parameter.type === 'dateTime'"
-				ref="inputField"
-				v-model="tempValue"
-				type="datetime"
-				value-format="YYYY-MM-DDTHH:mm:ss"
-				:size="inputSize"
-				:title="displayTitle"
-				:disabled="isReadOnly"
-				:placeholder="
-					parameter.placeholder
-						? getPlaceholder()
-						: i18n.baseText('parameterInput.selectDateAndTime')
-				"
-				:picker-options="dateTimePickerOptions"
-				:class="{ 'ph-no-capture': shouldRedactValue }"
-				@update:model-value="valueChanged"
-				@focus="setFocus"
-				@blur="onBlur"
-				@keydown.stop
-			/>
-
-			<N8nInputNumber
-				v-else-if="parameter.type === 'number'"
-				ref="inputField"
-				:size="inputSize"
-				:model-value="displayValue"
-				:controls="false"
-				:max="getArgument('maxValue')"
-				:min="getArgument('minValue')"
-				:precision="getArgument('numberPrecision')"
-				:disabled="isReadOnly"
-				:class="{ 'ph-no-capture': shouldRedactValue }"
-				:title="displayTitle"
-				:placeholder="parameter.placeholder"
-				@update:model-value="onUpdateTextInput"
-				@focus="setFocus"
-				@blur="onBlur"
-				@keydown.stop
-			/>
-
-			<CredentialsSelect
-				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
-				ref="inputField"
-				:parameter="parameter"
-				:node="node"
-				:active-credential-type="activeCredentialType"
-				:input-size="inputSize"
-				:display-value="displayValue"
-				:is-read-only="isReadOnly"
-				:display-title="displayTitle"
-				@credential-selected="credentialSelected"
-				@update:model-value="valueChanged"
-				@set-focus="setFocus"
-				@on-blur="onBlur"
-			>
-				<template #issues-and-options>
-					<ParameterIssues :issues="getIssues" />
-				</template>
-			</CredentialsSelect>
-
-			<N8nSelect
-				v-else-if="parameter.type === 'options'"
-				ref="inputField"
-				:size="inputSize"
-				filterable
-				:model-value="displayValue"
-				:placeholder="
-					parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
-				"
-				:loading="remoteParameterOptionsLoading"
-				:disabled="isReadOnly || remoteParameterOptionsLoading"
-				:title="displayTitle"
-				@update:model-value="valueChanged"
-				@keydown.stop
-				@focus="setFocus"
-				@blur="onBlur"
-			>
-				<n8n-option
-					v-for="option in parameterOptions"
-					:key="option.value"
-					:value="option.value"
-					:label="getOptionsOptionDisplayName(option)"
-				>
-					<div class="list-option">
-						<div
-							class="option-headline"
-							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
-						>
-							{{ getOptionsOptionDisplayName(option) }}
-						</div>
-						<div
-							v-if="option.description"
-							class="option-description"
-							v-html="getOptionsOptionDescription(option)"
-						></div>
-					</div>
-				</n8n-option>
-			</N8nSelect>
-
-			<N8nSelect
-				v-else-if="parameter.type === 'multiOptions'"
-				ref="inputField"
-				:size="inputSize"
-				filterable
-				multiple
-				:model-value="displayValue"
-				:loading="remoteParameterOptionsLoading"
-				:disabled="isReadOnly || remoteParameterOptionsLoading"
-				:title="displayTitle"
-				:placeholder="i18n.baseText('parameterInput.select')"
-				@update:model-value="valueChanged"
-				@keydown.stop
-				@focus="setFocus"
-				@blur="onBlur"
-			>
-				<n8n-option
-					v-for="option in parameterOptions"
-					:key="option.value"
-					:value="option.value"
-					:label="getOptionsOptionDisplayName(option)"
-				>
-					<div class="list-option">
-						<div class="option-headline">{{ getOptionsOptionDisplayName(option) }}</div>
-						<div
-							v-if="option.description"
-							class="option-description"
-							v-html="getOptionsOptionDescription(option)"
-						></div>
-					</div>
-				</n8n-option>
-			</N8nSelect>
-
-			<!-- temporary state of booleans while data is mapped -->
-			<N8nInput
-				v-else-if="parameter.type === 'boolean' && droppable"
-				:size="inputSize"
-				:model-value="JSON.stringify(displayValue)"
-				:disabled="isReadOnly"
-				:title="displayTitle"
-			/>
-			<el-switch
-				v-else-if="parameter.type === 'boolean'"
-				ref="inputField"
-				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
-				active-color="#13ce66"
-				:model-value="displayValue"
-				:disabled="isReadOnly"
-				@update:model-value="valueChanged"
-			/>
-		</div>
-
-		<ParameterIssues
-			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
-			:issues="getIssues"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue';
 
@@ -1336,116 +844,608 @@ async function optionSelected(command: string) {
 		} else {
 			let newValue = typeof value !== 'undefined' ? value : null;
 
-			if (props.parameter.type === 'string') {
-				// Strip the '=' from the beginning
-				newValue = modelValueString.value ? modelValueString.value.toString().substring(1) : null;
-			}
-			valueChanged(newValue);
-		}
-	} else if (command === 'refreshOptions') {
-		if (isResourceLocatorParameter.value) {
-			props.eventBus.emit('refreshList');
-		}
-		void loadRemoteParameterOptions();
-	} else if (command === 'formatHtml') {
-		htmlEditorEventBus.emit('format-html');
-	}
+			if (props.parameter.type === 'string') {
+				// Strip the '=' from the beginning
+				newValue = modelValueString.value ? modelValueString.value.toString().substring(1) : null;
+			}
+			valueChanged(newValue);
+		}
+	} else if (command === 'refreshOptions') {
+		if (isResourceLocatorParameter.value) {
+			props.eventBus.emit('refreshList');
+		}
+		void loadRemoteParameterOptions();
+	} else if (command === 'formatHtml') {
+		htmlEditorEventBus.emit('format-html');
+	}
+
+	if (node.value && (command === 'addExpression' || command === 'removeExpression')) {
+		const telemetryPayload = {
+			node_type: node.value.type,
+			parameter: props.path,
+			old_mode: command === 'addExpression' ? 'fixed' : 'expression',
+			new_mode: command === 'removeExpression' ? 'fixed' : 'expression',
+			was_parameter_empty: prevValue === '' || prevValue === undefined,
+			had_mapping: hasExpressionMapping(prevValue),
+			had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
+		};
+		telemetry.track('User switched parameter mode', telemetryPayload);
+		void externalHooks.run('parameterInput.modeSwitch', telemetryPayload);
+	}
+}
+
+onMounted(() => {
+	props.eventBus.on('optionSelected', optionSelected);
+
+	tempValue.value = displayValue.value as string;
+
+	if (node.value) {
+		nodeName.value = node.value.name;
+	}
+
+	if (node.value && node.value.parameters.authentication === 'predefinedCredentialType') {
+		activeCredentialType.value = node.value.parameters.nodeCredentialType as string;
+	}
+
+	if (
+		props.parameter.type === 'color' &&
+		getArgument('showAlpha') === true &&
+		displayValue.value !== null &&
+		displayValue.value.toString().charAt(0) !== '#'
+	) {
+		const newValue = rgbaToHex(displayValue.value as string);
+		if (newValue !== null) {
+			tempValue.value = newValue;
+		}
+	}
+
+	void externalHooks.run('parameterInput.mount', {
+		parameter: props.parameter,
+		inputFieldRef: inputField.value as InstanceType<typeof N8nInput>,
+	});
+});
+
+onBeforeUnmount(() => {
+	props.eventBus.off('optionSelected', optionSelected);
+});
+
+watch(
+	() => node.value?.credentials,
+	() => {
+		if (hasRemoteMethod.value && node.value) {
+			void loadRemoteParameterOptions();
+		}
+	},
+	{ immediate: true },
+);
+
+watch(dependentParametersValues, async () => {
+	// Reload the remote parameters whenever a parameter
+	// on which the current field depends on changes
+	await loadRemoteParameterOptions();
+});
+
+watch(
+	() => props.modelValue,
+	async () => {
+		if (props.parameter.type === 'color' && getArgument('showAlpha') === true) {
+			// Do not set for color with alpha else wrong value gets displayed in field
+			return;
+		}
+		tempValue.value = displayValue.value as string;
+	},
+);
+
+watch(remoteParameterOptionsLoading, () => {
+	tempValue.value = displayValue.value as string;
+});
+
+onUpdated(async () => {
+	await nextTick();
+
+	if (wrapper.value) {
+		const remoteParamOptions = wrapper.value.querySelectorAll('.remote-parameter-option') ?? [];
+
+		if (remoteParamOptions.length > 0) {
+			void externalHooks.run('parameterInput.updated', {
+				remoteParameterOptions: remoteParamOptions,
+			});
+		}
+	}
+});
+</script>
+
+<template>
+	<div ref="wrapper" :class="parameterInputClasses" @keydown.stop>
+		<ExpressionEditModal
+			:dialog-visible="expressionEditDialogVisible"
+			:model-value="modelValueExpressionEdit"
+			:parameter="parameter"
+			:node="node"
+			:path="path"
+			:event-source="eventSource || 'ndv'"
+			:is-read-only="isReadOnly"
+			:redact-values="shouldRedactValue"
+			@close-dialog="closeExpressionEditDialog"
+			@update:model-value="expressionUpdated"
+		></ExpressionEditModal>
+
+		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
+			<ResourceLocator
+				v-if="parameter.type === 'resourceLocator'"
+				ref="resourceLocator"
+				:parameter="parameter"
+				:model-value="modelValueResourceLocator"
+				:dependent-parameters-values="dependentParametersValues"
+				:display-title="displayTitle"
+				:expression-display-value="expressionDisplayValue"
+				:expression-computed-value="expressionEvaluated"
+				:is-value-expression="isModelValueExpression"
+				:is-read-only="isReadOnly"
+				:parameter-issues="getIssues"
+				:droppable="droppable"
+				:node="node"
+				:path="path"
+				:event-bus="eventBus"
+				@update:model-value="valueChanged"
+				@modal-opener-click="openExpressionEditorModal"
+				@focus="setFocus"
+				@blur="onBlur"
+				@drop="onResourceLocatorDrop"
+			/>
+			<WorkflowSelectorParameterInput
+				v-else-if="parameter.type === 'workflowSelector'"
+				ref="resourceLocator"
+				:parameter="parameter"
+				:model-value="modelValueResourceLocator"
+				:dependent-parameters-values="dependentParametersValues"
+				:display-title="displayTitle"
+				:expression-display-value="expressionDisplayValue"
+				:expression-computed-value="expressionEvaluated"
+				:is-value-expression="isModelValueExpression"
+				:expression-edit-dialog-visible="expressionEditDialogVisible"
+				:path="path"
+				:parameter-issues="getIssues"
+				@update:model-value="valueChanged"
+				@modal-opener-click="openExpressionEditorModal"
+				@focus="setFocus"
+				@blur="onBlur"
+				@drop="onResourceLocatorDrop"
+			/>
+			<ExpressionParameterInput
+				v-else-if="isModelValueExpression || forceShowExpression"
+				ref="inputField"
+				:model-value="expressionDisplayValue"
+				:title="displayTitle"
+				:is-read-only="isReadOnly"
+				:rows="rows"
+				:is-assignment="isAssignment"
+				:path="path"
+				:additional-expression-data="additionalExpressionData"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
+				:event-bus="eventBus"
+				@update:model-value="expressionUpdated"
+				@modal-opener-click="openExpressionEditorModal"
+				@focus="setFocus"
+				@blur="onBlur"
+			/>
+			<div
+				v-else-if="
+					['json', 'string'].includes(parameter.type) ||
+					remoteParameterOptionsLoadingIssues !== null
+				"
+			>
+				<el-dialog
+					:model-value="codeEditDialogVisible"
+					append-to-body
+					width="80%"
+					:title="`${i18n.baseText('codeEdit.edit')} ${$locale
+						.nodeText()
+						.inputLabelDisplayName(parameter, path)}`"
+					:before-close="closeCodeEditDialog"
+					data-test-id="code-editor-fullscreen"
+				>
+					<div :key="codeEditDialogVisible.toString()" class="ignore-key-press code-edit-dialog">
+						<CodeNodeEditor
+							v-if="editorType === 'codeNodeEditor'"
+							:mode="codeEditorMode"
+							:model-value="modelValueString"
+							:default-value="parameter.default"
+							:language="editorLanguage"
+							:is-read-only="isReadOnly"
+							fill-parent
+							@update:model-value="valueChangedDebounced"
+						/>
+						<HtmlEditor
+							v-else-if="editorType === 'htmlEditor'"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							:disable-expression-coloring="!isHtmlNode"
+							:disable-expression-completions="!isHtmlNode"
+							fullscreen
+							@update:model-value="valueChangedDebounced"
+						/>
+						<SqlEditor
+							v-else-if="editorType === 'sqlEditor'"
+							:model-value="modelValueString"
+							:dialect="getArgument('sqlDialect')"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fullscreen
+							@update:model-value="valueChangedDebounced"
+						/>
+						<JsEditor
+							v-else-if="editorType === 'jsEditor'"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fill-parent
+							@update:model-value="valueChangedDebounced"
+						/>
+
+						<JsonEditor
+							v-else-if="parameter.type === 'json'"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fill-parent
+							@update:model-value="valueChangedDebounced"
+						/>
+					</div>
+				</el-dialog>
 
-	if (node.value && (command === 'addExpression' || command === 'removeExpression')) {
-		const telemetryPayload = {
-			node_type: node.value.type,
-			parameter: props.path,
-			old_mode: command === 'addExpression' ? 'fixed' : 'expression',
-			new_mode: command === 'removeExpression' ? 'fixed' : 'expression',
-			was_parameter_empty: prevValue === '' || prevValue === undefined,
-			had_mapping: hasExpressionMapping(prevValue),
-			had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
-		};
-		telemetry.track('User switched parameter mode', telemetryPayload);
-		void externalHooks.run('parameterInput.modeSwitch', telemetryPayload);
-	}
-}
+				<TextEdit
+					:dialog-visible="textEditDialogVisible"
+					:model-value="`${modelValue}`"
+					:parameter="parameter"
+					:path="path"
+					:is-read-only="isReadOnly"
+					@close-dialog="closeTextEditDialog"
+					@update:model-value="expressionUpdated"
+				></TextEdit>
 
-onMounted(() => {
-	props.eventBus.on('optionSelected', optionSelected);
+				<CodeNodeEditor
+					v-if="editorType === 'codeNodeEditor' && isCodeNode"
+					:key="'code-' + codeEditDialogVisible.toString()"
+					:mode="codeEditorMode"
+					:model-value="modelValueString"
+					:default-value="parameter.default"
+					:language="editorLanguage"
+					:is-read-only="isReadOnly || editorIsReadOnly"
+					:rows="editorRows"
+					:ai-button-enabled="settingsStore.isCloudDeployment"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							v-if="!editorIsReadOnly"
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</CodeNodeEditor>
 
-	tempValue.value = displayValue.value as string;
+				<HtmlEditor
+					v-else-if="editorType === 'htmlEditor'"
+					:key="'html-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					:disable-expression-coloring="!isHtmlNode"
+					:disable-expression-completions="!isHtmlNode"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</HtmlEditor>
 
-	if (node.value) {
-		nodeName.value = node.value.name;
-	}
+				<SqlEditor
+					v-else-if="editorType === 'sqlEditor'"
+					:key="'sql-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:dialect="getArgument('sqlDialect')"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</SqlEditor>
 
-	if (node.value && node.value.parameters.authentication === 'predefinedCredentialType') {
-		activeCredentialType.value = node.value.parameters.nodeCredentialType as string;
-	}
+				<JsEditor
+					v-else-if="editorType === 'jsEditor'"
+					:key="'js-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly || editorIsReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							v-if="!editorIsReadOnly"
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</JsEditor>
 
-	if (
-		props.parameter.type === 'color' &&
-		getArgument('showAlpha') === true &&
-		displayValue.value !== null &&
-		displayValue.value.toString().charAt(0) !== '#'
-	) {
-		const newValue = rgbaToHex(displayValue.value as string);
-		if (newValue !== null) {
-			tempValue.value = newValue;
-		}
-	}
+				<JsonEditor
+					v-else-if="parameter.type === 'json'"
+					:key="'json-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</JsonEditor>
 
-	void externalHooks.run('parameterInput.mount', {
-		parameter: props.parameter,
-		inputFieldRef: inputField.value as InstanceType<typeof N8nInput>,
-	});
-});
+				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
+					<CodeNodeEditor
+						v-if="!codeEditDialogVisible"
+						:mode="codeEditorMode"
+						:model-value="modelValueString"
+						:language="editorLanguage"
+						:is-read-only="true"
+						:rows="editorRows"
+					/>
+				</div>
 
-onBeforeUnmount(() => {
-	props.eventBus.off('optionSelected', optionSelected);
-});
+				<N8nInput
+					v-else
+					ref="inputField"
+					v-model="tempValue"
+					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
+					:size="inputSize"
+					:type="getStringInputType"
+					:rows="editorRows"
+					:disabled="
+						isReadOnly ||
+						remoteParameterOptionsLoading ||
+						remoteParameterOptionsLoadingIssues !== null
+					"
+					:title="displayTitle"
+					:placeholder="getPlaceholder()"
+					@update:model-value="(valueChanged($event) as undefined) && onUpdateTextInput($event)"
+					@keydown.stop
+					@focus="setFocus"
+					@blur="onBlur"
+				>
+					<template #suffix>
+						<n8n-icon
+							v-if="!isReadOnly && !isSecretParameter"
+							icon="external-link-alt"
+							size="xsmall"
+							class="edit-window-button textarea-modal-opener"
+							:class="{
+								focused: isFocused,
+								invalid: !isFocused && getIssues.length > 0 && !isModelValueExpression,
+							}"
+							:title="i18n.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+							@focus="setFocus"
+						/>
+					</template>
+				</N8nInput>
+			</div>
 
-watch(
-	() => node.value?.credentials,
-	() => {
-		if (hasRemoteMethod.value && node.value) {
-			void loadRemoteParameterOptions();
-		}
-	},
-	{ immediate: true },
-);
+			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
+				<el-color-picker
+					size="small"
+					class="color-picker"
+					:model-value="displayValue"
+					:disabled="isReadOnly"
+					:title="displayTitle"
+					:show-alpha="getArgument('showAlpha')"
+					@focus="setFocus"
+					@blur="onBlur"
+					@update:model-value="valueChanged"
+				/>
+				<N8nInput
+					v-model="tempValue"
+					:size="inputSize"
+					type="text"
+					:disabled="isReadOnly"
+					:title="displayTitle"
+					@update:model-value="valueChanged"
+					@keydown.stop
+					@focus="setFocus"
+					@blur="onBlur"
+				/>
+			</div>
 
-watch(dependentParametersValues, async () => {
-	// Reload the remote parameters whenever a parameter
-	// on which the current field depends on changes
-	await loadRemoteParameterOptions();
-});
+			<el-date-picker
+				v-else-if="parameter.type === 'dateTime'"
+				ref="inputField"
+				v-model="tempValue"
+				type="datetime"
+				value-format="YYYY-MM-DDTHH:mm:ss"
+				:size="inputSize"
+				:title="displayTitle"
+				:disabled="isReadOnly"
+				:placeholder="
+					parameter.placeholder
+						? getPlaceholder()
+						: i18n.baseText('parameterInput.selectDateAndTime')
+				"
+				:picker-options="dateTimePickerOptions"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
+				@update:model-value="valueChanged"
+				@focus="setFocus"
+				@blur="onBlur"
+				@keydown.stop
+			/>
 
-watch(
-	() => props.modelValue,
-	async () => {
-		if (props.parameter.type === 'color' && getArgument('showAlpha') === true) {
-			// Do not set for color with alpha else wrong value gets displayed in field
-			return;
-		}
-		tempValue.value = displayValue.value as string;
-	},
-);
+			<N8nInputNumber
+				v-else-if="parameter.type === 'number'"
+				ref="inputField"
+				:size="inputSize"
+				:model-value="displayValue"
+				:controls="false"
+				:max="getArgument('maxValue')"
+				:min="getArgument('minValue')"
+				:precision="getArgument('numberPrecision')"
+				:disabled="isReadOnly"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
+				:title="displayTitle"
+				:placeholder="parameter.placeholder"
+				@update:model-value="onUpdateTextInput"
+				@focus="setFocus"
+				@blur="onBlur"
+				@keydown.stop
+			/>
 
-watch(remoteParameterOptionsLoading, () => {
-	tempValue.value = displayValue.value as string;
-});
+			<CredentialsSelect
+				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
+				ref="inputField"
+				:parameter="parameter"
+				:node="node"
+				:active-credential-type="activeCredentialType"
+				:input-size="inputSize"
+				:display-value="displayValue"
+				:is-read-only="isReadOnly"
+				:display-title="displayTitle"
+				@credential-selected="credentialSelected"
+				@update:model-value="valueChanged"
+				@set-focus="setFocus"
+				@on-blur="onBlur"
+			>
+				<template #issues-and-options>
+					<ParameterIssues :issues="getIssues" />
+				</template>
+			</CredentialsSelect>
 
-onUpdated(async () => {
-	await nextTick();
+			<N8nSelect
+				v-else-if="parameter.type === 'options'"
+				ref="inputField"
+				:size="inputSize"
+				filterable
+				:model-value="displayValue"
+				:placeholder="
+					parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
+				"
+				:loading="remoteParameterOptionsLoading"
+				:disabled="isReadOnly || remoteParameterOptionsLoading"
+				:title="displayTitle"
+				@update:model-value="valueChanged"
+				@keydown.stop
+				@focus="setFocus"
+				@blur="onBlur"
+			>
+				<n8n-option
+					v-for="option in parameterOptions"
+					:key="option.value"
+					:value="option.value"
+					:label="getOptionsOptionDisplayName(option)"
+				>
+					<div class="list-option">
+						<div
+							class="option-headline"
+							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
+						>
+							{{ getOptionsOptionDisplayName(option) }}
+						</div>
+						<div
+							v-if="option.description"
+							class="option-description"
+							v-html="getOptionsOptionDescription(option)"
+						></div>
+					</div>
+				</n8n-option>
+			</N8nSelect>
 
-	if (wrapper.value) {
-		const remoteParamOptions = wrapper.value.querySelectorAll('.remote-parameter-option') ?? [];
+			<N8nSelect
+				v-else-if="parameter.type === 'multiOptions'"
+				ref="inputField"
+				:size="inputSize"
+				filterable
+				multiple
+				:model-value="displayValue"
+				:loading="remoteParameterOptionsLoading"
+				:disabled="isReadOnly || remoteParameterOptionsLoading"
+				:title="displayTitle"
+				:placeholder="i18n.baseText('parameterInput.select')"
+				@update:model-value="valueChanged"
+				@keydown.stop
+				@focus="setFocus"
+				@blur="onBlur"
+			>
+				<n8n-option
+					v-for="option in parameterOptions"
+					:key="option.value"
+					:value="option.value"
+					:label="getOptionsOptionDisplayName(option)"
+				>
+					<div class="list-option">
+						<div class="option-headline">{{ getOptionsOptionDisplayName(option) }}</div>
+						<div
+							v-if="option.description"
+							class="option-description"
+							v-html="getOptionsOptionDescription(option)"
+						></div>
+					</div>
+				</n8n-option>
+			</N8nSelect>
 
-		if (remoteParamOptions.length > 0) {
-			void externalHooks.run('parameterInput.updated', {
-				remoteParameterOptions: remoteParamOptions,
-			});
-		}
-	}
-});
-</script>
+			<!-- temporary state of booleans while data is mapped -->
+			<N8nInput
+				v-else-if="parameter.type === 'boolean' && droppable"
+				:size="inputSize"
+				:model-value="JSON.stringify(displayValue)"
+				:disabled="isReadOnly"
+				:title="displayTitle"
+			/>
+			<el-switch
+				v-else-if="parameter.type === 'boolean'"
+				ref="inputField"
+				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
+				active-color="#13ce66"
+				:model-value="displayValue"
+				:disabled="isReadOnly"
+				@update:model-value="valueChanged"
+			/>
+		</div>
+
+		<ParameterIssues
+			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
+			:issues="getIssues"
+		/>
+	</div>
+</template>
 
 <style scoped lang="scss">
 .readonly-code {
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 18098f8090563..cdae28fe5313f 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -1,59 +1,3 @@
-<template>
-	<n8n-input-label
-		:label="$locale.credText().inputLabelDisplayName(parameter)"
-		:tooltip-text="$locale.credText().inputLabelDescription(parameter)"
-		:required="parameter.required"
-		:show-tooltip="focused"
-		:show-options="menuExpanded"
-		:data-test-id="parameter.name"
-		:size="label.size"
-	>
-		<template #options>
-			<ParameterOptions
-				:parameter="parameter"
-				:value="value"
-				:is-read-only="false"
-				:show-options="true"
-				:is-value-expression="isValueExpression"
-				@update:model-value="optionSelected"
-				@menu-expanded="onMenuExpanded"
-			/>
-		</template>
-		<ParameterInputWrapper
-			ref="param"
-			input-size="large"
-			:parameter="parameter"
-			:model-value="value"
-			:path="parameter.name"
-			:hide-issues="true"
-			:documentation-url="documentationUrl"
-			:error-highlight="showRequiredErrors"
-			:is-for-credential="true"
-			:event-source="eventSource"
-			:hint="!showRequiredErrors && hint ? hint : ''"
-			:event-bus="eventBus"
-			@focus="onFocus"
-			@blur="onBlur"
-			@text-input="valueChanged"
-			@update="valueChanged"
-		/>
-		<div v-if="showRequiredErrors" :class="$style.errors">
-			<n8n-text color="danger" size="small">
-				{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }}
-				<n8n-link
-					v-if="documentationUrl"
-					:to="documentationUrl"
-					size="small"
-					:underline="true"
-					@click="onDocumentationUrlClick"
-				>
-					{{ $locale.baseText('parameterInputExpanded.openDocs') }}
-				</n8n-link>
-			</n8n-text>
-		</div>
-	</n8n-input-label>
-</template>
-
 <script setup lang="ts">
 import type { IUpdateInformation } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -164,6 +108,62 @@ function onDocumentationUrlClick(): void {
 }
 </script>
 
+<template>
+	<n8n-input-label
+		:label="$locale.credText().inputLabelDisplayName(parameter)"
+		:tooltip-text="$locale.credText().inputLabelDescription(parameter)"
+		:required="parameter.required"
+		:show-tooltip="focused"
+		:show-options="menuExpanded"
+		:data-test-id="parameter.name"
+		:size="label.size"
+	>
+		<template #options>
+			<ParameterOptions
+				:parameter="parameter"
+				:value="value"
+				:is-read-only="false"
+				:show-options="true"
+				:is-value-expression="isValueExpression"
+				@update:model-value="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</template>
+		<ParameterInputWrapper
+			ref="param"
+			input-size="large"
+			:parameter="parameter"
+			:model-value="value"
+			:path="parameter.name"
+			:hide-issues="true"
+			:documentation-url="documentationUrl"
+			:error-highlight="showRequiredErrors"
+			:is-for-credential="true"
+			:event-source="eventSource"
+			:hint="!showRequiredErrors && hint ? hint : ''"
+			:event-bus="eventBus"
+			@focus="onFocus"
+			@blur="onBlur"
+			@text-input="valueChanged"
+			@update="valueChanged"
+		/>
+		<div v-if="showRequiredErrors" :class="$style.errors">
+			<n8n-text color="danger" size="small">
+				{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }}
+				<n8n-link
+					v-if="documentationUrl"
+					:to="documentationUrl"
+					size="small"
+					:underline="true"
+					@click="onDocumentationUrlClick"
+				>
+					{{ $locale.baseText('parameterInputExpanded.openDocs') }}
+				</n8n-link>
+			</n8n-text>
+		</div>
+	</n8n-input-label>
+</template>
+
 <style lang="scss" module>
 .errors {
 	margin-top: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index d0952be794746..f5e2999d7b9c2 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,81 +1,3 @@
-<template>
-	<n8n-input-label
-		:class="[$style.wrapper, { [$style.tipVisible]: showDragnDropTip }]"
-		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
-		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
-		:show-tooltip="focused"
-		:show-options="menuExpanded || focused || forceShowExpression"
-		:options-position="optionsPosition"
-		:bold="false"
-		:size="label.size"
-		color="text-dark"
-	>
-		<template v-if="displayOptions && optionsPosition === 'top'" #options>
-			<ParameterOptions
-				:parameter="parameter"
-				:value="value"
-				:is-read-only="isReadOnly"
-				:show-options="displayOptions"
-				:show-expression-selector="showExpressionSelector"
-				@update:model-value="optionSelected"
-				@menu-expanded="onMenuExpanded"
-			/>
-		</template>
-		<DraggableTarget
-			type="mapping"
-			:disabled="isDropDisabled"
-			sticky
-			:sticky-offset="[3, 3]"
-			@drop="onDrop"
-		>
-			<template #default="{ droppable, activeDrop }">
-				<ParameterInputWrapper
-					:parameter="parameter"
-					:model-value="value"
-					:path="path"
-					:is-read-only="isReadOnly"
-					:is-assignment="isAssignment"
-					:rows="rows"
-					:droppable="droppable"
-					:active-drop="activeDrop"
-					:force-show-expression="forceShowExpression"
-					:hint="hint"
-					:hide-hint="hideHint"
-					:hide-issues="hideIssues"
-					:label="label"
-					:event-bus="eventBus"
-					input-size="small"
-					@update="valueChanged"
-					@text-input="onTextInput"
-					@focus="onFocus"
-					@blur="onBlur"
-					@drop="onDrop"
-				/>
-			</template>
-		</DraggableTarget>
-		<div v-if="showDragnDropTip" :class="$style.tip">
-			<InlineExpressionTip />
-		</div>
-		<div
-			:class="{
-				[$style.options]: true,
-				[$style.visible]: menuExpanded || focused || forceShowExpression,
-			}"
-		>
-			<ParameterOptions
-				v-if="optionsPosition === 'bottom'"
-				:parameter="parameter"
-				:value="value"
-				:is-read-only="isReadOnly"
-				:show-options="displayOptions"
-				:show-expression-selector="showExpressionSelector"
-				@update:model-value="optionSelected"
-				@menu-expanded="onMenuExpanded"
-			/>
-		</div>
-	</n8n-input-label>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
@@ -281,6 +203,84 @@ function onDrop(newParamValue: string) {
 }
 </script>
 
+<template>
+	<n8n-input-label
+		:class="[$style.wrapper, { [$style.tipVisible]: showDragnDropTip }]"
+		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
+		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
+		:show-tooltip="focused"
+		:show-options="menuExpanded || focused || forceShowExpression"
+		:options-position="optionsPosition"
+		:bold="false"
+		:size="label.size"
+		color="text-dark"
+	>
+		<template v-if="displayOptions && optionsPosition === 'top'" #options>
+			<ParameterOptions
+				:parameter="parameter"
+				:value="value"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
+				:show-expression-selector="showExpressionSelector"
+				@update:model-value="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</template>
+		<DraggableTarget
+			type="mapping"
+			:disabled="isDropDisabled"
+			sticky
+			:sticky-offset="[3, 3]"
+			@drop="onDrop"
+		>
+			<template #default="{ droppable, activeDrop }">
+				<ParameterInputWrapper
+					:parameter="parameter"
+					:model-value="value"
+					:path="path"
+					:is-read-only="isReadOnly"
+					:is-assignment="isAssignment"
+					:rows="rows"
+					:droppable="droppable"
+					:active-drop="activeDrop"
+					:force-show-expression="forceShowExpression"
+					:hint="hint"
+					:hide-hint="hideHint"
+					:hide-issues="hideIssues"
+					:label="label"
+					:event-bus="eventBus"
+					input-size="small"
+					@update="valueChanged"
+					@text-input="onTextInput"
+					@focus="onFocus"
+					@blur="onBlur"
+					@drop="onDrop"
+				/>
+			</template>
+		</DraggableTarget>
+		<div v-if="showDragnDropTip" :class="$style.tip">
+			<InlineExpressionTip />
+		</div>
+		<div
+			:class="{
+				[$style.options]: true,
+				[$style.visible]: menuExpanded || focused || forceShowExpression,
+			}"
+		>
+			<ParameterOptions
+				v-if="optionsPosition === 'bottom'"
+				:parameter="parameter"
+				:value="value"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
+				:show-expression-selector="showExpressionSelector"
+				@update:model-value="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</div>
+	</n8n-input-label>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	position: relative;
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 8a88ba4793a87..87ce1a92ab992 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,23 +1,3 @@
-<template>
-	<n8n-text v-if="hint" size="small" color="text-base" tag="div">
-		<div
-			v-if="!renderHTML"
-			:class="{
-				[$style.singleline]: singleLine,
-				[$style.highlight]: highlight,
-			}"
-		>
-			<span data-test-id="parameter-input-hint" v-html="simplyText"></span>
-		</div>
-		<div
-			v-else
-			ref="hintTextRef"
-			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
-			v-html="sanitizeHtml(hint)"
-		></div>
-	</n8n-text>
-</template>
-
 <script setup lang="ts">
 import { sanitizeHtml } from '@/utils/htmlUtils';
 import { computed, onMounted, ref } from 'vue';
@@ -57,6 +37,26 @@ const simplyText = computed(() => {
 });
 </script>
 
+<template>
+	<n8n-text v-if="hint" size="small" color="text-base" tag="div">
+		<div
+			v-if="!renderHTML"
+			:class="{
+				[$style.singleline]: singleLine,
+				[$style.highlight]: highlight,
+			}"
+		>
+			<span data-test-id="parameter-input-hint" v-html="simplyText"></span>
+		</div>
+		<div
+			v-else
+			ref="hintTextRef"
+			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
+			v-html="sanitizeHtml(hint)"
+		></div>
+	</n8n-text>
+</template>
+
 <style lang="scss" module>
 .singleline {
 	white-space: nowrap;
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 3e27b8c96cd7b..08256fbfef173 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,167 +1,3 @@
-<template>
-	<div class="parameter-input-list-wrapper">
-		<div
-			v-for="(parameter, index) in filteredParameters"
-			:key="parameter.name"
-			:class="{ indent }"
-			data-test-id="parameter-item"
-		>
-			<slot v-if="indexToShowSlotAt === index" />
-
-			<div
-				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
-				class="parameter-item"
-			>
-				<MultipleParameter
-					:parameter="parameter"
-					:values="getParameterValue(parameter.name)"
-					:node-values="nodeValues"
-					:path="getPath(parameter.name)"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</div>
-
-			<ImportCurlParameter
-				v-else-if="parameter.type === 'curlImport'"
-				:is-read-only="isReadOnly"
-				@value-changed="valueChanged"
-			/>
-
-			<n8n-notice
-				v-else-if="parameter.type === 'notice'"
-				:class="['parameter-item', parameter.typeOptions?.containerClass ?? '']"
-				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-				@action="onNoticeAction"
-			/>
-
-			<div v-else-if="parameter.type === 'button'" class="parameter-item">
-				<ButtonParameter
-					:parameter="parameter"
-					:path="path"
-					:value="getParameterValue(parameter.name)"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</div>
-
-			<div
-				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
-				class="multi-parameter"
-			>
-				<n8n-icon-button
-					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
-					type="tertiary"
-					text
-					size="mini"
-					icon="trash"
-					class="delete-option"
-					:title="$locale.baseText('parameterInputList.delete')"
-					@click="deleteOption(parameter.name)"
-				></n8n-icon-button>
-				<n8n-input-label
-					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
-					size="small"
-					:underline="true"
-					color="text-dark"
-				/>
-				<Suspense v-if="!asyncLoadingError">
-					<template #default>
-						<LazyCollectionParameter
-							v-if="parameter.type === 'collection'"
-							:parameter="parameter"
-							:values="getParameterValue(parameter.name)"
-							:node-values="nodeValues"
-							:path="getPath(parameter.name)"
-							:is-read-only="isReadOnly"
-							@value-changed="valueChanged"
-						/>
-						<LazyFixedCollectionParameter
-							v-else-if="parameter.type === 'fixedCollection'"
-							:parameter="parameter"
-							:values="getParameterValue(parameter.name)"
-							:node-values="nodeValues"
-							:path="getPath(parameter.name)"
-							:is-read-only="isReadOnly"
-							@value-changed="valueChanged"
-						/>
-					</template>
-					<template #fallback>
-						<n8n-text size="small" class="async-notice">
-							<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
-							{{ $locale.baseText('parameterInputList.loadingFields') }}
-						</n8n-text>
-					</template>
-				</Suspense>
-				<n8n-text v-else size="small" color="danger" class="async-notice">
-					<n8n-icon icon="exclamation-triangle" size="xsmall" />
-					{{ $locale.baseText('parameterInputList.loadingError') }}
-				</n8n-text>
-			</div>
-			<ResourceMapper
-				v-else-if="parameter.type === 'resourceMapper'"
-				:parameter="parameter"
-				:node="node"
-				:path="getPath(parameter.name)"
-				:dependent-parameters-values="getDependentParametersValues(parameter)"
-				input-size="small"
-				label-size="small"
-				@value-changed="valueChanged"
-			/>
-			<FilterConditions
-				v-else-if="parameter.type === 'filter'"
-				:parameter="parameter"
-				:value="getParameterValue(parameter.name)"
-				:path="getPath(parameter.name)"
-				:node="node"
-				:read-only="isReadOnly"
-				@value-changed="valueChanged"
-			/>
-			<AssignmentCollection
-				v-else-if="parameter.type === 'assignmentCollection'"
-				:parameter="parameter"
-				:value="getParameterValue(parameter.name)"
-				:path="getPath(parameter.name)"
-				:node="node"
-				:is-read-only="isReadOnly"
-				@value-changed="valueChanged"
-			/>
-			<div
-				v-else-if="displayNodeParameter(parameter) && credentialsParameterIndex !== index"
-				class="parameter-item"
-			>
-				<n8n-icon-button
-					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
-					type="tertiary"
-					text
-					size="mini"
-					icon="trash"
-					class="delete-option"
-					:title="$locale.baseText('parameterInputList.delete')"
-					@click="deleteOption(parameter.name)"
-				></n8n-icon-button>
-
-				<ParameterInputFull
-					:parameter="parameter"
-					:hide-issues="hiddenIssuesInputs.includes(parameter.name)"
-					:value="getParameterValue(parameter.name)"
-					:display-options="shouldShowOptions(parameter)"
-					:path="getPath(parameter.name)"
-					:is-read-only="isReadOnly"
-					:hide-label="false"
-					:node-values="nodeValues"
-					@update="valueChanged"
-					@blur="onParameterBlur(parameter.name)"
-				/>
-			</div>
-		</div>
-		<div v-if="filteredParameters.length === 0" :class="{ indent }">
-			<slot />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type {
 	INodeParameters,
@@ -529,6 +365,170 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 }
 </script>
 
+<template>
+	<div class="parameter-input-list-wrapper">
+		<div
+			v-for="(parameter, index) in filteredParameters"
+			:key="parameter.name"
+			:class="{ indent }"
+			data-test-id="parameter-item"
+		>
+			<slot v-if="indexToShowSlotAt === index" />
+
+			<div
+				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
+				class="parameter-item"
+			>
+				<MultipleParameter
+					:parameter="parameter"
+					:values="getParameterValue(parameter.name)"
+					:node-values="nodeValues"
+					:path="getPath(parameter.name)"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</div>
+
+			<ImportCurlParameter
+				v-else-if="parameter.type === 'curlImport'"
+				:is-read-only="isReadOnly"
+				@value-changed="valueChanged"
+			/>
+
+			<n8n-notice
+				v-else-if="parameter.type === 'notice'"
+				:class="['parameter-item', parameter.typeOptions?.containerClass ?? '']"
+				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
+				@action="onNoticeAction"
+			/>
+
+			<div v-else-if="parameter.type === 'button'" class="parameter-item">
+				<ButtonParameter
+					:parameter="parameter"
+					:path="path"
+					:value="getParameterValue(parameter.name)"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</div>
+
+			<div
+				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
+				class="multi-parameter"
+			>
+				<n8n-icon-button
+					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
+				<n8n-input-label
+					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
+					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
+					size="small"
+					:underline="true"
+					color="text-dark"
+				/>
+				<Suspense v-if="!asyncLoadingError">
+					<template #default>
+						<LazyCollectionParameter
+							v-if="parameter.type === 'collection'"
+							:parameter="parameter"
+							:values="getParameterValue(parameter.name)"
+							:node-values="nodeValues"
+							:path="getPath(parameter.name)"
+							:is-read-only="isReadOnly"
+							@value-changed="valueChanged"
+						/>
+						<LazyFixedCollectionParameter
+							v-else-if="parameter.type === 'fixedCollection'"
+							:parameter="parameter"
+							:values="getParameterValue(parameter.name)"
+							:node-values="nodeValues"
+							:path="getPath(parameter.name)"
+							:is-read-only="isReadOnly"
+							@value-changed="valueChanged"
+						/>
+					</template>
+					<template #fallback>
+						<n8n-text size="small" class="async-notice">
+							<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
+							{{ $locale.baseText('parameterInputList.loadingFields') }}
+						</n8n-text>
+					</template>
+				</Suspense>
+				<n8n-text v-else size="small" color="danger" class="async-notice">
+					<n8n-icon icon="exclamation-triangle" size="xsmall" />
+					{{ $locale.baseText('parameterInputList.loadingError') }}
+				</n8n-text>
+			</div>
+			<ResourceMapper
+				v-else-if="parameter.type === 'resourceMapper'"
+				:parameter="parameter"
+				:node="node"
+				:path="getPath(parameter.name)"
+				:dependent-parameters-values="getDependentParametersValues(parameter)"
+				input-size="small"
+				label-size="small"
+				@value-changed="valueChanged"
+			/>
+			<FilterConditions
+				v-else-if="parameter.type === 'filter'"
+				:parameter="parameter"
+				:value="getParameterValue(parameter.name)"
+				:path="getPath(parameter.name)"
+				:node="node"
+				:read-only="isReadOnly"
+				@value-changed="valueChanged"
+			/>
+			<AssignmentCollection
+				v-else-if="parameter.type === 'assignmentCollection'"
+				:parameter="parameter"
+				:value="getParameterValue(parameter.name)"
+				:path="getPath(parameter.name)"
+				:node="node"
+				:is-read-only="isReadOnly"
+				@value-changed="valueChanged"
+			/>
+			<div
+				v-else-if="displayNodeParameter(parameter) && credentialsParameterIndex !== index"
+				class="parameter-item"
+			>
+				<n8n-icon-button
+					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
+
+				<ParameterInputFull
+					:parameter="parameter"
+					:hide-issues="hiddenIssuesInputs.includes(parameter.name)"
+					:value="getParameterValue(parameter.name)"
+					:display-options="shouldShowOptions(parameter)"
+					:path="getPath(parameter.name)"
+					:is-read-only="isReadOnly"
+					:hide-label="false"
+					:node-values="nodeValues"
+					@update="valueChanged"
+					@blur="onParameterBlur(parameter.name)"
+				/>
+			</div>
+		</div>
+		<div v-if="filteredParameters.length === 0" :class="{ indent }">
+			<slot />
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .parameter-input-list-wrapper {
 	.delete-option {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 7165bccf13c29..5158d1b59a2a6 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -1,50 +1,3 @@
-<template>
-	<div :class="$style.parameterInput" data-test-id="parameter-input">
-		<ParameterInput
-			ref="param"
-			:input-size="inputSize"
-			:parameter="parameter"
-			:model-value="modelValue"
-			:path="path"
-			:is-read-only="isReadOnly"
-			:is-assignment="isAssignment"
-			:droppable="droppable"
-			:active-drop="activeDrop"
-			:force-show-expression="forceShowExpression"
-			:hide-issues="hideIssues"
-			:documentation-url="documentationUrl"
-			:error-highlight="errorHighlight"
-			:is-for-credential="isForCredential"
-			:event-source="eventSource"
-			:expression-evaluated="evaluatedExpressionValue"
-			:additional-expression-data="resolvedAdditionalExpressionData"
-			:label="label"
-			:rows="rows"
-			:data-test-id="`parameter-input-${parsedParameterName}`"
-			:event-bus="eventBus"
-			@focus="onFocus"
-			@blur="onBlur"
-			@drop="onDrop"
-			@text-input="onTextInput"
-			@update="onValueChanged"
-		/>
-		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
-			<div>
-				<InputHint
-					v-if="expressionOutput"
-					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
-					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
-					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
-					:hint="expressionOutput"
-					:single-line="true"
-				/>
-				<InputHint v-else-if="parameterHint" :render-h-t-m-l="true" :hint="parameterHint" />
-			</div>
-			<slot v-if="$slots.options" name="options" />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { IUpdateInformation, InputSize } from '@/Interface';
 import ParameterInput from '@/components/ParameterInput.vue';
@@ -237,6 +190,53 @@ function onTextInput(parameterData: IUpdateInformation) {
 }
 </script>
 
+<template>
+	<div :class="$style.parameterInput" data-test-id="parameter-input">
+		<ParameterInput
+			ref="param"
+			:input-size="inputSize"
+			:parameter="parameter"
+			:model-value="modelValue"
+			:path="path"
+			:is-read-only="isReadOnly"
+			:is-assignment="isAssignment"
+			:droppable="droppable"
+			:active-drop="activeDrop"
+			:force-show-expression="forceShowExpression"
+			:hide-issues="hideIssues"
+			:documentation-url="documentationUrl"
+			:error-highlight="errorHighlight"
+			:is-for-credential="isForCredential"
+			:event-source="eventSource"
+			:expression-evaluated="evaluatedExpressionValue"
+			:additional-expression-data="resolvedAdditionalExpressionData"
+			:label="label"
+			:rows="rows"
+			:data-test-id="`parameter-input-${parsedParameterName}`"
+			:event-bus="eventBus"
+			@focus="onFocus"
+			@blur="onBlur"
+			@drop="onDrop"
+			@text-input="onTextInput"
+			@update="onValueChanged"
+		/>
+		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
+			<div>
+				<InputHint
+					v-if="expressionOutput"
+					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
+					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
+					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
+					:hint="expressionOutput"
+					:single-line="true"
+				/>
+				<InputHint v-else-if="parameterHint" :render-h-t-m-l="true" :hint="parameterHint" />
+			</div>
+			<slot v-if="$slots.options" name="options" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .parameterInput {
 	display: flex;
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
index 6e6388cdbfee2..e786e9895aa06 100644
--- a/packages/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -1,14 +1,3 @@
-<template>
-	<div v-if="issues.length" :class="$style['parameter-issues']" data-test-id="parameter-issues">
-		<n8n-tooltip placement="top">
-			<template #content>
-				<TitledList :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
-			</template>
-			<font-awesome-icon icon="exclamation-triangle" />
-		</n8n-tooltip>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TitledList from '@/components/TitledList.vue';
@@ -22,6 +11,17 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="issues.length" :class="$style['parameter-issues']" data-test-id="parameter-issues">
+		<n8n-tooltip placement="top">
+			<template #content>
+				<TitledList :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
+			</template>
+			<font-awesome-icon icon="exclamation-triangle" />
+		</n8n-tooltip>
+	</div>
+</template>
+
 <style module lang="scss">
 .parameter-issues {
 	width: 20px;
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index 5755e4cd92b3d..bfe99398055cc 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -1,44 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div v-if="loading" :class="$style.loader">
-			<n8n-text v-if="loading" size="small">
-				<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
-				{{ loadingMessage }}
-			</n8n-text>
-		</div>
-		<div v-else :class="$style.controlsContainer">
-			<div
-				:class="{
-					[$style.noExpressionSelector]: !shouldShowExpressionSelector,
-				}"
-			>
-				<n8n-action-toggle
-					v-if="shouldShowOptions"
-					placement="bottom-end"
-					size="small"
-					color="foreground-xdark"
-					icon-size="small"
-					:actions="actions"
-					:icon-orientation="iconOrientation"
-					@action="(action: string) => $emit('update:modelValue', action)"
-					@visible-change="onMenuToggle"
-				/>
-			</div>
-			<n8n-radio-buttons
-				v-if="shouldShowExpressionSelector"
-				size="small"
-				:model-value="selectedView"
-				:disabled="isReadOnly"
-				:options="[
-					{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
-					{ label: $locale.baseText('parameterInput.expression'), value: 'expression' },
-				]"
-				@update:model-value="onViewSelected"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type { INodeProperties, NodeParameterValueType } from 'n8n-workflow';
 import { defineComponent } from 'vue';
@@ -202,6 +161,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div v-if="loading" :class="$style.loader">
+			<n8n-text v-if="loading" size="small">
+				<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
+				{{ loadingMessage }}
+			</n8n-text>
+		</div>
+		<div v-else :class="$style.controlsContainer">
+			<div
+				:class="{
+					[$style.noExpressionSelector]: !shouldShowExpressionSelector,
+				}"
+			>
+				<n8n-action-toggle
+					v-if="shouldShowOptions"
+					placement="bottom-end"
+					size="small"
+					color="foreground-xdark"
+					icon-size="small"
+					:actions="actions"
+					:icon-orientation="iconOrientation"
+					@action="(action: string) => $emit('update:modelValue', action)"
+					@visible-change="onMenuToggle"
+				/>
+			</div>
+			<n8n-radio-buttons
+				v-if="shouldShowExpressionSelector"
+				size="small"
+				:model-value="selectedView"
+				:disabled="isReadOnly"
+				:options="[
+					{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
+					{ label: $locale.baseText('parameterInput.expression'), value: 'expression' },
+				]"
+				@update:model-value="onViewSelected"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index cd4693565e449..13e360c3c1981 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -1,57 +1,3 @@
-<template>
-	<Modal
-		:name="PERSONALIZATION_MODAL_KEY"
-		:title="$locale.baseText('personalizationModal.customizeN8n')"
-		:subtitle="$locale.baseText('personalizationModal.theseQuestionsHelpUs')"
-		:center-title="true"
-		:show-close="false"
-		:event-bus="modalBus"
-		:close-on-click-modal="false"
-		:close-on-press-escape="false"
-		width="460px"
-		data-test-id="personalization-form"
-		@enter="onSave"
-	>
-		<template #content>
-			<div :class="$style.container">
-				<n8n-form-inputs
-					v-model="formValues"
-					:inputs="survey"
-					:column-view="true"
-					:event-bus="formBus"
-					:teleported="teleported"
-					tag-size="small"
-					@submit="onSubmit"
-				/>
-				<n8n-card v-if="canRegisterForEnterpriseTrial">
-					<n8n-checkbox v-model="registerForEnterpriseTrial">
-						<i18n-t keypath="personalizationModal.registerEmailForTrial">
-							<template #trial>
-								<strong>
-									{{ $locale.baseText('personalizationModal.registerEmailForTrial.enterprise') }}
-								</strong>
-							</template>
-						</i18n-t>
-						<n8n-text size="small" tag="div" color="text-light">
-							{{ $locale.baseText('personalizationModal.registerEmailForTrial.notice') }}
-						</n8n-text>
-					</n8n-checkbox>
-				</n8n-card>
-			</div>
-		</template>
-		<template #footer>
-			<div>
-				<n8n-button
-					:loading="isSaving"
-					:label="$locale.baseText('personalizationModal.getStarted')"
-					float="right"
-					@click="onSave"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -753,6 +699,60 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="PERSONALIZATION_MODAL_KEY"
+		:title="$locale.baseText('personalizationModal.customizeN8n')"
+		:subtitle="$locale.baseText('personalizationModal.theseQuestionsHelpUs')"
+		:center-title="true"
+		:show-close="false"
+		:event-bus="modalBus"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+		width="460px"
+		data-test-id="personalization-form"
+		@enter="onSave"
+	>
+		<template #content>
+			<div :class="$style.container">
+				<n8n-form-inputs
+					v-model="formValues"
+					:inputs="survey"
+					:column-view="true"
+					:event-bus="formBus"
+					:teleported="teleported"
+					tag-size="small"
+					@submit="onSubmit"
+				/>
+				<n8n-card v-if="canRegisterForEnterpriseTrial">
+					<n8n-checkbox v-model="registerForEnterpriseTrial">
+						<i18n-t keypath="personalizationModal.registerEmailForTrial">
+							<template #trial>
+								<strong>
+									{{ $locale.baseText('personalizationModal.registerEmailForTrial.enterprise') }}
+								</strong>
+							</template>
+						</i18n-t>
+						<n8n-text size="small" tag="div" color="text-light">
+							{{ $locale.baseText('personalizationModal.registerEmailForTrial.notice') }}
+						</n8n-text>
+					</n8n-checkbox>
+				</n8n-card>
+			</div>
+		</template>
+		<template #footer>
+			<div>
+				<n8n-button
+					:loading="isSaving"
+					:label="$locale.baseText('personalizationModal.getStarted')"
+					float="right"
+					@click="onSave"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .container {
 	> div,
diff --git a/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue b/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
index a40343a8bb537..5fdfc205cd6f0 100644
--- a/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
+++ b/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
@@ -1,39 +1,3 @@
-<template>
-	<Modal
-		width="460px"
-		height="300px"
-		max-height="640px"
-		:title="i18n.baseText('mfa.prompt.code.modal.title')"
-		:event-bus="promptMfaCodeBus"
-		:name="PROMPT_MFA_CODE_MODAL_KEY"
-		:center="true"
-	>
-		<template #content>
-			<div :class="[$style.formContainer]">
-				<n8n-form-inputs
-					data-test-id="mfa-code-form"
-					:inputs="formFields"
-					:event-bus="formBus"
-					@submit="onSubmit"
-					@ready="onFormReady"
-				/>
-			</div>
-		</template>
-		<template #footer>
-			<div>
-				<n8n-button
-					float="right"
-					:disabled="!readyToSubmit"
-					:label="i18n.baseText('settings.personal.save')"
-					size="large"
-					data-test-id="mfa-save-button"
-					@click="onClickSave"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import Modal from '../Modal.vue';
@@ -77,6 +41,42 @@ function onFormReady(isReady: boolean) {
 }
 </script>
 
+<template>
+	<Modal
+		width="460px"
+		height="300px"
+		max-height="640px"
+		:title="i18n.baseText('mfa.prompt.code.modal.title')"
+		:event-bus="promptMfaCodeBus"
+		:name="PROMPT_MFA_CODE_MODAL_KEY"
+		:center="true"
+	>
+		<template #content>
+			<div :class="[$style.formContainer]">
+				<n8n-form-inputs
+					data-test-id="mfa-code-form"
+					:inputs="formFields"
+					:event-bus="formBus"
+					@submit="onSubmit"
+					@ready="onFormReady"
+				/>
+			</div>
+		</template>
+		<template #footer>
+			<div>
+				<n8n-button
+					float="right"
+					:disabled="!readyToSubmit"
+					:label="i18n.baseText('settings.personal.save')"
+					size="large"
+					data-test-id="mfa-save-button"
+					@click="onClickSave"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .formContainer {
 	padding-bottom: var(--spacing-xl);
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index 2648a55e2c496..bd4ecc865494b 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -1,3 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/root.store';
+
+export default defineComponent({
+	name: 'PushConnectionTracker',
+	computed: {
+		...mapStores(useRootStore),
+	},
+});
+</script>
+
 <template>
 	<span>
 		<div v-if="!rootStore.pushConnectionActive" class="push-connection-lost primary-color">
@@ -14,16 +27,3 @@
 		<slot v-else />
 	</span>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { useRootStore } from '@/stores/root.store';
-
-export default defineComponent({
-	name: 'PushConnectionTracker',
-	computed: {
-		...mapStores(useRootStore),
-	},
-});
-</script>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 6eebe37e3423b..2723c87195ba2 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -1,149 +1,3 @@
-<template>
-	<div
-		ref="container"
-		class="resource-locator"
-		:data-test-id="`resource-locator-${parameter.name}`"
-	>
-		<OnClickOutside @trigger="hideResourceDropdown">
-			<ResourceLocatorDropdown
-				ref="dropdown"
-				:model-value="modelValue ? modelValue.value : ''"
-				:show="resourceDropdownVisible"
-				:filterable="isSearchable"
-				:filter-required="requiresSearchFilter"
-				:resources="currentQueryResults"
-				:loading="currentQueryLoading"
-				:filter="searchFilter"
-				:has-more="currentQueryHasMore"
-				:error-view="currentQueryError"
-				:width="width"
-				:event-bus="eventBus"
-				@update:model-value="onListItemSelected"
-				@filter="onSearchFilter"
-				@load-more="loadResourcesDebounced"
-			>
-				<template #error>
-					<div :class="$style.error" data-test-id="rlc-error-container">
-						<n8n-text color="text-dark" align="center" tag="div">
-							{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
-						</n8n-text>
-						<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
-							{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
-							<a v-if="credentialsNotSet" @click="createNewCredential">{{
-								$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
-							}}</a>
-							<a v-else-if="hasCredential" @click="openCredential">{{
-								$locale.baseText('resourceLocator.mode.list.error.description.part2.hasCredentials')
-							}}</a>
-						</n8n-text>
-					</div>
-				</template>
-				<div
-					:class="{
-						[$style.resourceLocator]: true,
-						[$style.multipleModes]: hasMultipleModes,
-					}"
-				>
-					<div :class="$style.background"></div>
-					<div v-if="hasMultipleModes" :class="$style.modeSelector">
-						<n8n-select
-							:model-value="selectedMode"
-							:size="inputSize"
-							:disabled="isReadOnly"
-							:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
-							data-test-id="rlc-mode-selector"
-							@update:model-value="onModeSelected"
-						>
-							<n8n-option
-								v-for="mode in parameter.modes"
-								:key="mode.name"
-								:value="mode.name"
-								:label="getModeLabel(mode)"
-								:disabled="isValueExpression && mode.name === 'list'"
-								:title="
-									isValueExpression && mode.name === 'list'
-										? $locale.baseText('resourceLocator.mode.list.disabled.title')
-										: ''
-								"
-							>
-								{{ getModeLabel(mode) }}
-							</n8n-option>
-						</n8n-select>
-					</div>
-
-					<div :class="$style.inputContainer" data-test-id="rlc-input-container">
-						<DraggableTarget
-							type="mapping"
-							:disabled="hasOnlyListMode"
-							:sticky="true"
-							:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
-							@drop="onDrop"
-						>
-							<template #default="{ droppable, activeDrop }">
-								<div
-									:class="{
-										[$style.listModeInputContainer]: isListMode,
-										[$style.droppable]: droppable,
-										[$style.activeDrop]: activeDrop,
-									}"
-									@keydown.stop="onKeyDown"
-								>
-									<ExpressionParameterInput
-										v-if="isValueExpression || forceShowExpression"
-										ref="input"
-										:model-value="expressionDisplayValue"
-										:path="path"
-										:rows="3"
-										@update:model-value="onInputChange"
-										@modal-opener-click="$emit('modalOpenerClick')"
-									/>
-									<n8n-input
-										v-else
-										ref="input"
-										:class="{ [$style.selectInput]: isListMode }"
-										:size="inputSize"
-										:model-value="valueToDisplay"
-										:disabled="isReadOnly"
-										:readonly="isListMode"
-										:title="displayTitle"
-										:placeholder="inputPlaceholder"
-										type="text"
-										data-test-id="rlc-input"
-										@update:model-value="onInputChange"
-										@focus="onInputFocus"
-										@blur="onInputBlur"
-									>
-										<template v-if="isListMode" #suffix>
-											<i
-												:class="{
-													['el-input__icon']: true,
-													['el-icon-arrow-down']: true,
-													[$style.selectIcon]: true,
-													[$style.isReverse]: resourceDropdownVisible,
-												}"
-											/>
-										</template>
-									</n8n-input>
-								</div>
-							</template>
-						</DraggableTarget>
-						<ParameterIssues
-							v-if="parameterIssues && parameterIssues.length"
-							:issues="parameterIssues"
-							:class="$style['parameter-issues']"
-						/>
-						<div v-else-if="urlValue" :class="$style.openResourceLink">
-							<n8n-link theme="text" @click.stop="openResource(urlValue)">
-								<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
-							</n8n-link>
-						</div>
-					</div>
-				</div>
-			</ResourceLocatorDropdown>
-		</OnClickOutside>
-	</div>
-</template>
-
 <script lang="ts">
 import type { DynamicNodeParameters, IResourceLocatorResultExpanded } from '@/Interface';
 import DraggableTarget from '@/components/DraggableTarget.vue';
@@ -827,6 +681,152 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		ref="container"
+		class="resource-locator"
+		:data-test-id="`resource-locator-${parameter.name}`"
+	>
+		<OnClickOutside @trigger="hideResourceDropdown">
+			<ResourceLocatorDropdown
+				ref="dropdown"
+				:model-value="modelValue ? modelValue.value : ''"
+				:show="resourceDropdownVisible"
+				:filterable="isSearchable"
+				:filter-required="requiresSearchFilter"
+				:resources="currentQueryResults"
+				:loading="currentQueryLoading"
+				:filter="searchFilter"
+				:has-more="currentQueryHasMore"
+				:error-view="currentQueryError"
+				:width="width"
+				:event-bus="eventBus"
+				@update:model-value="onListItemSelected"
+				@filter="onSearchFilter"
+				@load-more="loadResourcesDebounced"
+			>
+				<template #error>
+					<div :class="$style.error" data-test-id="rlc-error-container">
+						<n8n-text color="text-dark" align="center" tag="div">
+							{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
+						</n8n-text>
+						<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
+							{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
+							<a v-if="credentialsNotSet" @click="createNewCredential">{{
+								$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
+							}}</a>
+							<a v-else-if="hasCredential" @click="openCredential">{{
+								$locale.baseText('resourceLocator.mode.list.error.description.part2.hasCredentials')
+							}}</a>
+						</n8n-text>
+					</div>
+				</template>
+				<div
+					:class="{
+						[$style.resourceLocator]: true,
+						[$style.multipleModes]: hasMultipleModes,
+					}"
+				>
+					<div :class="$style.background"></div>
+					<div v-if="hasMultipleModes" :class="$style.modeSelector">
+						<n8n-select
+							:model-value="selectedMode"
+							:size="inputSize"
+							:disabled="isReadOnly"
+							:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
+							data-test-id="rlc-mode-selector"
+							@update:model-value="onModeSelected"
+						>
+							<n8n-option
+								v-for="mode in parameter.modes"
+								:key="mode.name"
+								:value="mode.name"
+								:label="getModeLabel(mode)"
+								:disabled="isValueExpression && mode.name === 'list'"
+								:title="
+									isValueExpression && mode.name === 'list'
+										? $locale.baseText('resourceLocator.mode.list.disabled.title')
+										: ''
+								"
+							>
+								{{ getModeLabel(mode) }}
+							</n8n-option>
+						</n8n-select>
+					</div>
+
+					<div :class="$style.inputContainer" data-test-id="rlc-input-container">
+						<DraggableTarget
+							type="mapping"
+							:disabled="hasOnlyListMode"
+							:sticky="true"
+							:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
+							@drop="onDrop"
+						>
+							<template #default="{ droppable, activeDrop }">
+								<div
+									:class="{
+										[$style.listModeInputContainer]: isListMode,
+										[$style.droppable]: droppable,
+										[$style.activeDrop]: activeDrop,
+									}"
+									@keydown.stop="onKeyDown"
+								>
+									<ExpressionParameterInput
+										v-if="isValueExpression || forceShowExpression"
+										ref="input"
+										:model-value="expressionDisplayValue"
+										:path="path"
+										:rows="3"
+										@update:model-value="onInputChange"
+										@modal-opener-click="$emit('modalOpenerClick')"
+									/>
+									<n8n-input
+										v-else
+										ref="input"
+										:class="{ [$style.selectInput]: isListMode }"
+										:size="inputSize"
+										:model-value="valueToDisplay"
+										:disabled="isReadOnly"
+										:readonly="isListMode"
+										:title="displayTitle"
+										:placeholder="inputPlaceholder"
+										type="text"
+										data-test-id="rlc-input"
+										@update:model-value="onInputChange"
+										@focus="onInputFocus"
+										@blur="onInputBlur"
+									>
+										<template v-if="isListMode" #suffix>
+											<i
+												:class="{
+													['el-input__icon']: true,
+													['el-icon-arrow-down']: true,
+													[$style.selectIcon]: true,
+													[$style.isReverse]: resourceDropdownVisible,
+												}"
+											/>
+										</template>
+									</n8n-input>
+								</div>
+							</template>
+						</DraggableTarget>
+						<ParameterIssues
+							v-if="parameterIssues && parameterIssues.length"
+							:issues="parameterIssues"
+							:class="$style['parameter-issues']"
+						/>
+						<div v-else-if="urlValue" :class="$style.openResourceLink">
+							<n8n-link theme="text" @click.stop="openResource(urlValue)">
+								<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
+							</n8n-link>
+						</div>
+					</div>
+				</div>
+			</ResourceLocatorDropdown>
+		</OnClickOutside>
+	</div>
+</template>
+
 <style lang="scss" module>
 @import './resourceLocator.scss';
 </style>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index ddadd763f9b0e..658f2da9d59d3 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -1,82 +1,3 @@
-<template>
-	<n8n-popover
-		placement="bottom"
-		:width="width"
-		:popper-class="$style.popover"
-		:visible="show"
-		:teleported="false"
-		data-test-id="resource-locator-dropdown"
-	>
-		<div v-if="errorView" :class="$style.messageContainer">
-			<slot name="error"></slot>
-		</div>
-		<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
-			<n8n-input
-				ref="search"
-				:model-value="filter"
-				:clearable="true"
-				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
-				data-test-id="rlc-search"
-				@update:model-value="onFilterInput"
-			>
-				<template #prefix>
-					<font-awesome-icon :class="$style.searchIcon" icon="search" />
-				</template>
-			</n8n-input>
-		</div>
-		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
-			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
-		</div>
-		<div
-			v-else-if="!errorView && sortedResources.length === 0 && !loading"
-			:class="$style.messageContainer"
-		>
-			{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
-		</div>
-		<div
-			v-else-if="!errorView"
-			ref="resultsContainer"
-			:class="$style.container"
-			@scroll="onResultsEnd"
-		>
-			<div
-				v-for="(result, i) in sortedResources"
-				:key="result.value.toString()"
-				:ref="`item-${i}`"
-				:class="{
-					[$style.resourceItem]: true,
-					[$style.selected]: result.value === modelValue,
-					[$style.hovering]: hoverIndex === i,
-				}"
-				data-test-id="rlc-item"
-				@click="() => onItemClick(result.value)"
-				@mouseenter="() => onItemHover(i)"
-				@mouseleave="() => onItemHoverLeave()"
-			>
-				<div :class="$style.resourceNameContainer">
-					<span>{{ result.name }}</span>
-				</div>
-				<div :class="$style.urlLink">
-					<font-awesome-icon
-						v-if="showHoverUrl && result.url && hoverIndex === i"
-						icon="external-link-alt"
-						:title="result.linkAlt || $locale.baseText('resourceLocator.mode.list.openUrl')"
-						@click="openUrl($event, result.url)"
-					/>
-				</div>
-			</div>
-			<div v-if="loading && !errorView">
-				<div v-for="i in 3" :key="i" :class="$style.loadingItem">
-					<n8n-loading :class="$style.loader" variant="p" :rows="1" />
-				</div>
-			</div>
-		</div>
-		<template #reference>
-			<slot />
-		</template>
-	</n8n-popover>
-</template>
-
 <script lang="ts">
 import type { IResourceLocatorResultExpanded } from '@/Interface';
 import { defineComponent } from 'vue';
@@ -267,6 +188,85 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<n8n-popover
+		placement="bottom"
+		:width="width"
+		:popper-class="$style.popover"
+		:visible="show"
+		:teleported="false"
+		data-test-id="resource-locator-dropdown"
+	>
+		<div v-if="errorView" :class="$style.messageContainer">
+			<slot name="error"></slot>
+		</div>
+		<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
+			<n8n-input
+				ref="search"
+				:model-value="filter"
+				:clearable="true"
+				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
+				data-test-id="rlc-search"
+				@update:model-value="onFilterInput"
+			>
+				<template #prefix>
+					<font-awesome-icon :class="$style.searchIcon" icon="search" />
+				</template>
+			</n8n-input>
+		</div>
+		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
+			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
+		</div>
+		<div
+			v-else-if="!errorView && sortedResources.length === 0 && !loading"
+			:class="$style.messageContainer"
+		>
+			{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
+		</div>
+		<div
+			v-else-if="!errorView"
+			ref="resultsContainer"
+			:class="$style.container"
+			@scroll="onResultsEnd"
+		>
+			<div
+				v-for="(result, i) in sortedResources"
+				:key="result.value.toString()"
+				:ref="`item-${i}`"
+				:class="{
+					[$style.resourceItem]: true,
+					[$style.selected]: result.value === modelValue,
+					[$style.hovering]: hoverIndex === i,
+				}"
+				data-test-id="rlc-item"
+				@click="() => onItemClick(result.value)"
+				@mouseenter="() => onItemHover(i)"
+				@mouseleave="() => onItemHoverLeave()"
+			>
+				<div :class="$style.resourceNameContainer">
+					<span>{{ result.name }}</span>
+				</div>
+				<div :class="$style.urlLink">
+					<font-awesome-icon
+						v-if="showHoverUrl && result.url && hoverIndex === i"
+						icon="external-link-alt"
+						:title="result.linkAlt || $locale.baseText('resourceLocator.mode.list.openUrl')"
+						@click="openUrl($event, result.url)"
+					/>
+				</div>
+			</div>
+			<div v-if="loading && !errorView">
+				<div v-for="i in 3" :key="i" :class="$style.loadingItem">
+					<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+				</div>
+			</div>
+		</div>
+		<template #reference>
+			<slot />
+		</template>
+	</n8n-popover>
+</template>
+
 <style lang="scss" module>
 :root .popover {
 	--content-height: 236px;
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index ec26ef996402d..b4e783cf211b6 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1,578 +1,3 @@
-<template>
-	<div :class="['run-data', $style.container]" @mouseover="activatePane">
-		<n8n-callout
-			v-if="
-				canPinData && pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview
-			"
-			theme="secondary"
-			icon="thumbtack"
-			:class="$style.pinnedDataCallout"
-		>
-			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
-			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">
-				<n8n-link
-					theme="secondary"
-					size="small"
-					underline
-					bold
-					@click.stop="onTogglePinData({ source: 'banner-link' })"
-				>
-					{{ $locale.baseText('runData.pindata.unpin') }}
-				</n8n-link>
-			</span>
-			<template #trailingContent>
-				<n8n-link
-					:to="dataPinningDocsUrl"
-					size="small"
-					theme="secondary"
-					bold
-					underline
-					@click="onClickDataPinningDocsLink"
-				>
-					{{ $locale.baseText('runData.pindata.learnMore') }}
-				</n8n-link>
-			</template>
-		</n8n-callout>
-
-		<BinaryDataDisplay
-			v-if="binaryDataDisplayData"
-			:window-visible="binaryDataDisplayVisible"
-			:display-data="binaryDataDisplayData"
-			@close="closeBinaryDataDisplay"
-		/>
-
-		<div :class="$style.header">
-			<slot name="header"></slot>
-
-			<div
-				v-show="!hasRunError"
-				:class="$style.displayModes"
-				data-test-id="run-data-pane-header"
-				@click.stop
-			>
-				<Suspense>
-					<LazyRunDataSearch
-						v-if="showIOSearch"
-						v-model="search"
-						:class="$style.search"
-						:pane-type="paneType"
-						:display-mode="displayMode"
-						:is-area-active="isPaneActive"
-						@focus="activatePane"
-					/>
-				</Suspense>
-
-				<n8n-radio-buttons
-					v-show="
-						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
-					"
-					:model-value="displayMode"
-					:options="displayModes"
-					data-test-id="ndv-run-data-display-mode"
-					@update:model-value="onDisplayModeChange"
-				/>
-
-				<n8n-icon-button
-					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
-					v-show="!editMode.enabled"
-					:title="$locale.baseText('runData.editOutput')"
-					:circle="false"
-					:disabled="node?.disabled"
-					icon="pencil-alt"
-					type="tertiary"
-					data-test-id="ndv-edit-pinned-data"
-					@click="enterEditMode({ origin: 'editIconButton' })"
-				/>
-
-				<RunDataPinButton
-					v-if="(canPinData || !!binaryData?.length) && rawInputData.length && !editMode.enabled"
-					:disabled="
-						(!rawInputData.length && !pinnedData.hasData.value) ||
-						isReadOnlyRoute ||
-						readOnlyEnv ||
-						!!binaryData?.length
-					"
-					:tooltip-contents-visibility="{
-						binaryDataTooltipContent: !!binaryData?.length,
-						pinDataDiscoveryTooltipContent:
-							isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible,
-					}"
-					:data-pinning-docs-url="dataPinningDocsUrl"
-					:pinned-data="pinnedData"
-					@toggle-pin-data="onTogglePinData({ source: 'pin-icon-click' })"
-				/>
-
-				<div v-show="editMode.enabled" :class="$style.editModeActions">
-					<n8n-button
-						type="tertiary"
-						:label="$locale.baseText('runData.editor.cancel')"
-						@click="onClickCancelEdit"
-					/>
-					<n8n-button
-						class="ml-2xs"
-						type="primary"
-						:label="$locale.baseText('runData.editor.save')"
-						@click="onClickSaveEdit"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<div v-if="inputSelectLocation === 'header'" :class="$style.inputSelect">
-			<slot name="input-select"></slot>
-		</div>
-
-		<div
-			v-if="maxRunIndex > 0 && !isInputSchemaView"
-			v-show="!editMode.enabled"
-			:class="$style.runSelector"
-		>
-			<slot v-if="inputSelectLocation === 'runs'" name="input-select"></slot>
-
-			<n8n-select
-				:model-value="runIndex"
-				:class="$style.runSelectorInner"
-				size="small"
-				teleported
-				data-test-id="run-selector"
-				@update:model-value="onRunIndexChange"
-				@click.stop
-			>
-				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
-				<n8n-option
-					v-for="option in maxRunIndex + 1"
-					:key="option"
-					:label="getRunLabel(option)"
-					:value="option - 1"
-				></n8n-option>
-			</n8n-select>
-
-			<n8n-tooltip v-if="canLinkRuns" placement="right">
-				<template #content>
-					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
-				</template>
-				<n8n-icon-button
-					:icon="linkedRuns ? 'unlink' : 'link'"
-					class="linkRun"
-					text
-					type="tertiary"
-					size="small"
-					data-test-id="link-run"
-					@click="toggleLinkRuns"
-				/>
-			</n8n-tooltip>
-
-			<slot name="run-info"></slot>
-		</div>
-
-		<slot v-if="!isInputSchemaView" name="before-data" />
-
-		<n8n-callout
-			v-for="hint in getNodeHints()"
-			:key="hint.message"
-			:class="$style.hintCallout"
-			:theme="hint.type || 'info'"
-		>
-			<n8n-text size="small" v-html="hint.message"></n8n-text>
-		</n8n-callout>
-
-		<div
-			v-if="maxOutputIndex > 0 && branches.length > 1 && !isInputSchemaView"
-			:class="$style.outputs"
-			data-test-id="branches"
-		>
-			<slot v-if="inputSelectLocation === 'outputs'" name="input-select"></slot>
-
-			<div :class="$style.tabs">
-				<n8n-tabs
-					:model-value="currentOutputIndex"
-					:options="branches"
-					@update:model-value="onBranchChange"
-				/>
-			</div>
-		</div>
-
-		<div
-			v-else-if="
-				!hasRunError &&
-				hasNodeRun &&
-				((dataCount > 0 && maxRunIndex === 0) || search) &&
-				!isArtificialRecoveredEventItem &&
-				!isInputSchemaView
-			"
-			v-show="!editMode.enabled && !hasRunError"
-			:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
-			data-test-id="ndv-items-count"
-		>
-			<slot v-if="inputSelectLocation === 'items'" name="input-select"></slot>
-
-			<n8n-text v-if="search" :class="$style.itemsText">
-				{{
-					$locale.baseText('ndv.search.items', {
-						adjustToNumber: unfilteredDataCount,
-						interpolate: { matched: dataCount, total: unfilteredDataCount },
-					})
-				}}
-			</n8n-text>
-			<n8n-text v-else :class="$style.itemsText">
-				{{
-					$locale.baseText('ndv.output.items', {
-						adjustToNumber: dataCount,
-						interpolate: { count: dataCount },
-					})
-				}}
-			</n8n-text>
-		</div>
-
-		<div ref="dataContainer" :class="$style.dataContainer" data-test-id="ndv-data-container">
-			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
-				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
-				<n8n-text>{{ executingMessage }}</n8n-text>
-			</div>
-
-			<div v-else-if="editMode.enabled" :class="$style.editMode">
-				<div :class="[$style.editModeBody, 'ignore-key-press']">
-					<JsonEditor
-						:model-value="editMode.value"
-						:fill-parent="true"
-						@update:model-value="ndvStore.setOutputPanelEditModeValue($event)"
-					/>
-				</div>
-				<div :class="$style.editModeFooter">
-					<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
-						{{ $locale.baseText('runData.editor.copyDataInfo') }}
-						<n8n-link :to="dataEditingDocsUrl" size="small">
-							{{ $locale.baseText('generic.learnMore') }}
-						</n8n-link>
-					</n8n-info-tip>
-				</div>
-			</div>
-
-			<div
-				v-else-if="paneType === 'output' && hasSubworkflowExecutionError"
-				:class="$style.stretchVertically"
-			>
-				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
-			</div>
-
-			<div v-else-if="!hasNodeRun && !(isInputSchemaView && node?.disabled)" :class="$style.center">
-				<slot name="node-not-run"></slot>
-			</div>
-
-			<div
-				v-else-if="paneType === 'input' && !isInputSchemaView && node?.disabled"
-				:class="$style.center"
-			>
-				<n8n-text>
-					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
-					<n8n-link @click="enableNode">
-						{{ $locale.baseText('ndv.input.disabled.cta') }}
-					</n8n-link>
-				</n8n-text>
-			</div>
-
-			<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
-				<slot name="recovered-artificial-output-data"></slot>
-			</div>
-
-			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
-				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
-					{{
-						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
-							interpolate: { nodeName: node?.name ?? '' },
-						})
-					}}
-				</n8n-text>
-				<div v-else-if="$slots['content']">
-					<NodeErrorView
-						v-if="workflowRunErrorAsNodeError"
-						:error="workflowRunErrorAsNodeError"
-						:class="$style.inlineError"
-						compact
-					/>
-					<slot name="content"></slot>
-				</div>
-				<NodeErrorView
-					v-else-if="workflowRunErrorAsNodeError"
-					:error="workflowRunErrorAsNodeError"
-					:class="$style.dataDisplay"
-				/>
-			</div>
-
-			<div
-				v-else-if="
-					hasNodeRun && (!unfilteredDataCount || (search && !dataCount)) && branches.length > 1
-				"
-				:class="$style.center"
-			>
-				<div v-if="search">
-					<n8n-text tag="h3" size="large">{{
-						$locale.baseText('ndv.search.noMatch.title')
-					}}</n8n-text>
-					<n8n-text>
-						<i18n-t keypath="ndv.search.noMatch.description" tag="span">
-							<template #link>
-								<a href="#" @click="onSearchClear">
-									{{ $locale.baseText('ndv.search.noMatch.description.link') }}
-								</a>
-							</template>
-						</i18n-t>
-					</n8n-text>
-				</div>
-				<n8n-text v-else>
-					{{ noDataInBranchMessage }}
-				</n8n-text>
-			</div>
-
-			<div v-else-if="hasNodeRun && !inputData.length && !search" :class="$style.center">
-				<slot name="no-output-data">xxx</slot>
-			</div>
-
-			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
-				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
-				<n8n-text align="center" tag="div"
-					><span
-						v-html="
-							$locale.baseText('ndv.output.tooMuchData.message', {
-								interpolate: { size: dataSizeInMB },
-							})
-						"
-					></span
-				></n8n-text>
-
-				<n8n-button
-					outline
-					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
-					@click="showTooMuchData"
-				/>
-
-				<n8n-button
-					size="small"
-					:label="$locale.baseText('runData.downloadBinaryData')"
-					@click="downloadJsonData()"
-				/>
-			</div>
-
-			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
-			<slot v-else-if="hasNodeRun && $slots['content']" name="content"></slot>
-
-			<div
-				v-else-if="
-					hasNodeRun &&
-					displayMode === 'table' &&
-					binaryData.length > 0 &&
-					inputData.length === 1 &&
-					Object.keys(jsonData[0] || {}).length === 0
-				"
-				:class="$style.center"
-			>
-				<n8n-text>
-					{{ $locale.baseText('runData.switchToBinary.info') }}
-					<a @click="switchToBinary">
-						{{ $locale.baseText('runData.switchToBinary.binary') }}
-					</a>
-				</n8n-text>
-			</div>
-
-			<div v-else-if="showIoSearchNoMatchContent" :class="$style.center">
-				<n8n-text tag="h3" size="large">{{
-					$locale.baseText('ndv.search.noMatch.title')
-				}}</n8n-text>
-				<n8n-text>
-					<i18n-t keypath="ndv.search.noMatch.description" tag="span">
-						<template #link>
-							<a href="#" @click="onSearchClear">
-								{{ $locale.baseText('ndv.search.noMatch.description.link') }}
-							</a>
-						</template>
-					</i18n-t>
-				</n8n-text>
-			</div>
-
-			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
-				<LazyRunDataTable
-					:node="node"
-					:input-data="inputDataPage"
-					:mapping-enabled="mappingEnabled"
-					:distance-from-active="distanceFromActive"
-					:run-index="runIndex"
-					:page-offset="currentPageOffset"
-					:total-runs="maxRunIndex"
-					:has-default-hover-state="paneType === 'input' && !search"
-					:search="search"
-					@mounted="$emit('tableMounted', $event)"
-					@active-row-changed="onItemHover"
-					@display-mode-change="onDisplayModeChange"
-				/>
-			</Suspense>
-
-			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
-				<LazyRunDataJson
-					:pane-type="paneType"
-					:edit-mode="editMode"
-					:push-ref="pushRef"
-					:node="node"
-					:input-data="inputDataPage"
-					:mapping-enabled="mappingEnabled"
-					:distance-from-active="distanceFromActive"
-					:run-index="runIndex"
-					:total-runs="maxRunIndex"
-					:search="search"
-				/>
-			</Suspense>
-
-			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<LazyRunDataHtml :input-html="inputHtml" />
-			</Suspense>
-
-			<Suspense v-else-if="hasNodeRun && isSchemaView">
-				<LazyRunDataSchema
-					:nodes="nodes"
-					:mapping-enabled="mappingEnabled"
-					:node="node"
-					:data="jsonData"
-					:pane-type="paneType"
-					:connection-type="connectionType"
-					:run-index="runIndex"
-					:output-index="currentOutputIndex"
-					:total-runs="maxRunIndex"
-					:search="search"
-					:class="$style.schema"
-					@clear:search="onSearchClear"
-				/>
-			</Suspense>
-
-			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
-				<n8n-text align="center" tag="div">{{
-					$locale.baseText('runData.noBinaryDataFound')
-				}}</n8n-text>
-			</div>
-
-			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
-				<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
-					<div v-if="binaryData.length > 1" :class="$style.binaryIndex">
-						<div>
-							{{ index + 1 }}
-						</div>
-					</div>
-
-					<div :class="$style.binaryRow">
-						<div
-							v-for="(binaryData, key) in binaryDataEntry"
-							:key="index + '_' + key"
-							:class="$style.binaryCell"
-						>
-							<div :data-test-id="'ndv-binary-data_' + index">
-								<div :class="$style.binaryHeader">
-									{{ key }}
-								</div>
-								<div v-if="binaryData.fileName">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileName') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.fileName }}</div>
-								</div>
-								<div v-if="binaryData.directory">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.directory') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.directory }}</div>
-								</div>
-								<div v-if="binaryData.fileExtension">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileExtension') }}:</n8n-text
-										>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.fileExtension }}</div>
-								</div>
-								<div v-if="binaryData.mimeType">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.mimeType') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.mimeType }}</div>
-								</div>
-								<div v-if="binaryData.fileSize">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileSize') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.fileSize }}</div>
-								</div>
-
-								<div :class="$style.binaryButtonContainer">
-									<n8n-button
-										v-if="isViewable(index, key)"
-										size="small"
-										:label="$locale.baseText('runData.showBinaryData')"
-										data-test-id="ndv-view-binary-data"
-										@click="displayBinaryData(index, key)"
-									/>
-									<n8n-button
-										v-if="isDownloadable(index, key)"
-										size="small"
-										type="secondary"
-										:label="$locale.baseText('runData.downloadBinaryData')"
-										data-test-id="ndv-download-binary-data"
-										@click="downloadBinaryData(index, key)"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div
-			v-if="
-				hasNodeRun &&
-				!hasRunError &&
-				binaryData.length === 0 &&
-				dataCount > pageSize &&
-				!isSchemaView &&
-				!isArtificialRecoveredEventItem
-			"
-			v-show="!editMode.enabled"
-			:class="$style.pagination"
-			data-test-id="ndv-data-pagination"
-		>
-			<el-pagination
-				background
-				:hide-on-single-page="true"
-				:current-page="currentPage"
-				:pager-count="5"
-				:page-size="pageSize"
-				layout="prev, pager, next"
-				:total="dataCount"
-				@update:current-page="onCurrentPageChange"
-			>
-			</el-pagination>
-
-			<div :class="$style.pageSizeSelector">
-				<n8n-select
-					size="mini"
-					:model-value="pageSize"
-					teleported
-					@update:model-value="onPageSizeChange"
-				>
-					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
-					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
-					</n8n-option>
-					<n8n-option :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </n8n-option>
-				</n8n-select>
-			</div>
-		</div>
-		<n8n-block-ui :show="blockUI" :class="$style.uiBlocker" />
-	</div>
-</template>
-
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, toRef } from 'vue';
 import type { PropType } from 'vue';
@@ -857,859 +282,1434 @@ export default defineComponent({
 				defaults.unshift({ label: 'HTML', value: 'html' });
 			}
 
-			return defaults;
+			return defaults;
+		},
+		hasNodeRun(): boolean {
+			return Boolean(
+				!this.isExecuting &&
+					this.node &&
+					((this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name)) ||
+						this.pinnedData.hasData.value),
+			);
+		},
+		isArtificialRecoveredEventItem(): boolean {
+			return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
+		},
+		subworkflowExecutionError(): NodeError {
+			return {
+				node: this.node,
+				messages: [this.workflowsStore.subWorkflowExecutionError?.message ?? ''],
+			} as NodeError;
+		},
+		hasSubworkflowExecutionError(): boolean {
+			return Boolean(this.workflowsStore.subWorkflowExecutionError);
+		},
+		workflowRunErrorAsNodeError(): NodeError | null {
+			if (!this.node) {
+				return null;
+			}
+			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
+		},
+		hasRunError(): boolean {
+			return Boolean(this.node && this.workflowRunErrorAsNodeError);
+		},
+		executionHints(): NodeHint[] {
+			if (this.hasNodeRun) {
+				const hints = this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.hints;
+
+				if (hints) return hints;
+			}
+
+			return [];
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.workflowsStore.getWorkflowExecution;
+		},
+		workflowRunData(): IRunData | null {
+			if (this.workflowExecution === null) {
+				return null;
+			}
+			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
+			if (executionData?.resultData) {
+				return executionData.resultData.runData;
+			}
+			return null;
+		},
+		dataCount(): number {
+			return this.getDataCount(this.runIndex, this.currentOutputIndex);
+		},
+		unfilteredDataCount(): number {
+			return this.pinnedData.data.value
+				? this.pinnedData.data.value.length
+				: this.rawInputData.length;
+		},
+		dataSizeInMB(): string {
+			return (this.dataSize / (1024 * 1024)).toFixed(1);
+		},
+		maxOutputIndex(): number {
+			if (this.node === null || this.runIndex === undefined) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length < this.runIndex) {
+				return 0;
+			}
+
+			if (runData[this.node.name][this.runIndex]) {
+				const taskData = runData[this.node.name][this.runIndex].data;
+				if (taskData?.main) {
+					return taskData.main.length - 1;
+				}
+			}
+
+			return 0;
+		},
+		currentPageOffset(): number {
+			return this.pageSize * (this.currentPage - 1);
+		},
+		maxRunIndex(): number {
+			if (this.node === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length) {
+				return runData[this.node.name].length - 1;
+			}
+
+			return 0;
+		},
+		rawInputData(): INodeExecutionData[] {
+			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
+		},
+		unfilteredInputData(): INodeExecutionData[] {
+			return this.getPinDataOrLiveData(this.rawInputData);
+		},
+		inputData(): INodeExecutionData[] {
+			return this.getFilteredData(this.unfilteredInputData);
+		},
+		inputDataPage(): INodeExecutionData[] {
+			const offset = this.pageSize * (this.currentPage - 1);
+			return this.inputData.slice(offset, offset + this.pageSize);
+		},
+		jsonData(): IDataObject[] {
+			return executionDataToJson(this.inputData);
+		},
+		binaryData(): IBinaryKeyData[] {
+			if (!this.node) {
+				return [];
+			}
+
+			const binaryData = this.nodeHelpers.getBinaryData(
+				this.workflowRunData,
+				this.node.name,
+				this.runIndex,
+				this.currentOutputIndex,
+			);
+			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
+		},
+		inputHtml(): string {
+			return String(this.inputData[0]?.json?.html ?? '');
+		},
+		currentOutputIndex(): number {
+			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
+				return this.overrideOutputs[0];
+			}
+
+			return this.outputIndex;
+		},
+		branches(): ITab[] {
+			const capitalize = (name: string) => name.charAt(0).toLocaleUpperCase() + name.slice(1);
+
+			const branches: ITab[] = [];
+
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
+					continue;
+				}
+				const totalItemsCount = this.getRawInputData(this.runIndex, i).length;
+				const itemsCount = this.getDataCount(this.runIndex, i);
+				const items = this.search
+					? this.$locale.baseText('ndv.search.items', {
+							adjustToNumber: totalItemsCount,
+							interpolate: { matched: itemsCount, total: totalItemsCount },
+						})
+					: this.$locale.baseText('ndv.output.items', {
+							adjustToNumber: itemsCount,
+							interpolate: { count: itemsCount },
+						});
+				let outputName = this.getOutputName(i);
+
+				if (`${outputName}` === `${i}`) {
+					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
+				} else {
+					const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
+						this.node?.type ?? '',
+					)
+						? ''
+						: ` ${this.$locale.baseText('ndv.output.branch')}`;
+					outputName = capitalize(`${this.getOutputName(i)}${appendBranchWord}`);
+				}
+				branches.push({
+					label:
+						(this.search && itemsCount) || totalItemsCount
+							? `${outputName} (${items})`
+							: outputName,
+					value: i,
+				});
+			}
+			return branches;
+		},
+		editMode(): { enabled: boolean; value: string } {
+			return this.isPaneTypeInput
+				? { enabled: false, value: '' }
+				: this.ndvStore.outputPanelEditMode;
+		},
+		isPaneTypeInput(): boolean {
+			return this.paneType === 'input';
+		},
+		isPaneTypeOutput(): boolean {
+			return this.paneType === 'output';
+		},
+		readOnlyEnv(): boolean {
+			return this.sourceControlStore.preferences.branchReadOnly;
+		},
+		showIOSearch(): boolean {
+			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
+		},
+		inputSelectLocation() {
+			if (this.isSchemaView) return 'none';
+			if (!this.hasNodeRun) return 'header';
+			if (this.maxRunIndex > 0) return 'runs';
+			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
+				return 'outputs';
+			}
+
+			return 'items';
+		},
+		showIoSearchNoMatchContent(): boolean {
+			return this.hasNodeRun && !this.inputData.length && !!this.search;
+		},
+		parentNodeOutputData(): INodeExecutionData[] {
+			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
+			let parentNodeData: INodeExecutionData[] = [];
+
+			if (parentNode?.name) {
+				parentNodeData = this.nodeHelpers.getNodeInputData(
+					this.workflow.getNode(parentNode?.name),
+					this.runIndex,
+					this.outputIndex,
+					'input',
+					this.connectionType,
+				);
+			}
+
+			return parentNodeData;
 		},
-		hasNodeRun(): boolean {
-			return Boolean(
-				!this.isExecuting &&
-					this.node &&
-					((this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name)) ||
-						this.pinnedData.hasData.value),
-			);
+	},
+	watch: {
+		node(newNode: INodeUi, prevNode: INodeUi) {
+			if (newNode?.id === prevNode?.id) return;
+			this.init();
 		},
-		isArtificialRecoveredEventItem(): boolean {
-			return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
+		hasNodeRun() {
+			if (this.paneType === 'output') this.setDisplayMode();
 		},
-		subworkflowExecutionError(): NodeError {
-			return {
-				node: this.node,
-				messages: [this.workflowsStore.subWorkflowExecutionError?.message ?? ''],
-			} as NodeError;
+		inputDataPage: {
+			handler(data: INodeExecutionData[]) {
+				if (this.paneType && data) {
+					this.ndvStore.setNDVPanelDataIsEmpty({
+						panel: this.paneType as 'input' | 'output',
+						isEmpty: data.every((item) => isEmpty(item.json)),
+					});
+				}
+			},
+			immediate: true,
+			deep: true,
 		},
-		hasSubworkflowExecutionError(): boolean {
-			return Boolean(this.workflowsStore.subWorkflowExecutionError);
+		jsonData(data: IDataObject[], prevData: IDataObject[]) {
+			if (isEqual(data, prevData)) return;
+			this.refreshDataSize();
+			if (this.dataCount) {
+				this.resetCurrentPageIfTooFar();
+			}
+			this.showPinDataDiscoveryTooltip(data);
 		},
-		workflowRunErrorAsNodeError(): NodeError | null {
-			if (!this.node) {
-				return null;
+		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
+			if (newData.length && !prevData.length && this.displayMode !== 'binary') {
+				this.switchToBinary();
+			} else if (!newData.length && this.displayMode === 'binary') {
+				this.onDisplayModeChange('table');
 			}
-			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
 		},
-		hasRunError(): boolean {
-			return Boolean(this.node && this.workflowRunErrorAsNodeError);
+		currentOutputIndex(branchIndex: number) {
+			this.ndvStore.setNDVBranchIndex({
+				pane: this.paneType as 'input' | 'output',
+				branchIndex,
+			});
 		},
-		executionHints(): NodeHint[] {
-			if (this.hasNodeRun) {
-				const hints = this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.hints;
+		search(newSearch: string) {
+			this.$emit('search', newSearch);
+		},
+	},
+	mounted() {
+		this.init();
 
-				if (hints) return hints;
+		if (!this.isPaneTypeInput) {
+			this.showPinDataDiscoveryTooltip(this.jsonData);
+		}
+		this.ndvStore.setNDVBranchIndex({
+			pane: this.paneType as 'input' | 'output',
+			branchIndex: this.currentOutputIndex,
+		});
+
+		if (this.paneType === 'output') {
+			this.setDisplayMode();
+			this.activatePane();
+		}
+
+		if (this.hasRunError && this.node) {
+			const error = this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error;
+			const errorsToTrack = ['unknown error'];
+
+			if (error && errorsToTrack.some((e) => error.message?.toLowerCase().includes(e))) {
+				this.$telemetry.track(
+					`User encountered an error: "${error.message}"`,
+					{
+						node: this.node.type,
+						errorMessage: error.message,
+						nodeVersion: this.node.typeVersion,
+						n8nVersion: this.rootStore.versionCli,
+					},
+					{
+						withPostHog: true,
+					},
+				);
 			}
+		}
+	},
+	beforeUnmount() {
+		this.hidePinDataDiscoveryTooltip();
+	},
+	methods: {
+		getResolvedNodeOutputs() {
+			if (this.node && this.nodeType) {
+				const workflowNode = this.workflow.getNode(this.node.name);
 
+				if (workflowNode) {
+					const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
+					return outputs;
+				}
+			}
 			return [];
 		},
-		workflowExecution(): IExecutionResponse | null {
-			return this.workflowsStore.getWorkflowExecution;
-		},
-		workflowRunData(): IRunData | null {
-			if (this.workflowExecution === null) {
-				return null;
+		shouldHintBeDisplayed(hint: NodeHint): boolean {
+			const { location, whenToDisplay } = hint;
+
+			if (location) {
+				if (location === 'ndv' && !['input', 'output'].includes(this.paneType)) {
+					return false;
+				}
+				if (location === 'inputPane' && this.paneType !== 'input') {
+					return false;
+				}
+
+				if (location === 'outputPane' && this.paneType !== 'output') {
+					return false;
+				}
 			}
-			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-			if (executionData?.resultData) {
-				return executionData.resultData.runData;
+
+			if (whenToDisplay === 'afterExecution' && !this.hasNodeRun) {
+				return false;
 			}
-			return null;
+
+			if (whenToDisplay === 'beforeExecution' && this.hasNodeRun) {
+				return false;
+			}
+
+			return true;
 		},
-		dataCount(): number {
-			return this.getDataCount(this.runIndex, this.currentOutputIndex);
+		getNodeHints(): NodeHint[] {
+			if (this.node && this.nodeType) {
+				const workflowNode = this.workflow.getNode(this.node.name);
+
+				if (workflowNode) {
+					const executionHints = this.executionHints;
+					const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
+						runExecutionData: this.workflowExecution?.data ?? null,
+						runIndex: this.runIndex,
+						connectionInputData: this.parentNodeOutputData,
+					});
+
+					return executionHints.concat(nodeHints).filter(this.shouldHintBeDisplayed);
+				}
+			}
+			return [];
 		},
-		unfilteredDataCount(): number {
-			return this.pinnedData.data.value
-				? this.pinnedData.data.value.length
-				: this.rawInputData.length;
+		onItemHover(itemIndex: number | null) {
+			if (itemIndex === null) {
+				this.$emit('itemHover', null);
+
+				return;
+			}
+			this.$emit('itemHover', {
+				outputIndex: this.currentOutputIndex,
+				itemIndex,
+			});
 		},
-		dataSizeInMB(): string {
-			return (this.dataSize / (1024 * 1024)).toFixed(1);
+		onClickDataPinningDocsLink() {
+			this.$telemetry.track('User clicked ndv link', {
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				node_type: this.activeNode?.type,
+				pane: 'output',
+				type: 'data-pinning-docs',
+			});
 		},
-		maxOutputIndex(): number {
-			if (this.node === null || this.runIndex === undefined) {
-				return 0;
+		showPinDataDiscoveryTooltip(value: IDataObject[]) {
+			if (!this.isTriggerNode) {
+				return;
 			}
 
-			const runData: IRunData | null = this.workflowRunData;
+			const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
 
-			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-				return 0;
-			}
+			if (value && value.length > 0 && !this.isReadOnlyRoute && !pinDataDiscoveryFlag) {
+				this.pinDataDiscoveryComplete();
 
-			if (runData[this.node.name].length < this.runIndex) {
-				return 0;
+				setTimeout(() => {
+					this.isControlledPinDataTooltip = true;
+					this.pinDataDiscoveryTooltipVisible = true;
+					dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
+				}, 500); // Wait for NDV to open
 			}
-
-			if (runData[this.node.name][this.runIndex]) {
-				const taskData = runData[this.node.name][this.runIndex].data;
-				if (taskData?.main) {
-					return taskData.main.length - 1;
-				}
+		},
+		hidePinDataDiscoveryTooltip() {
+			if (this.pinDataDiscoveryTooltipVisible) {
+				this.isControlledPinDataTooltip = false;
+				this.pinDataDiscoveryTooltipVisible = false;
+				dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
 			}
+		},
+		pinDataDiscoveryComplete() {
+			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
+			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+		},
+		enterEditMode({ origin }: EnterEditModeArgs) {
+			const inputData = this.pinnedData.data.value
+				? clearJsonKey(this.pinnedData.data.value)
+				: executionDataToJson(this.rawInputData);
 
-			return 0;
+			const inputDataLength = Array.isArray(inputData)
+				? inputData.length
+				: Object.keys(inputData ?? {}).length;
+
+			const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
+
+			this.ndvStore.setOutputPanelEditModeEnabled(true);
+			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
+
+			this.$telemetry.track('User opened ndv edit state', {
+				node_type: this.activeNode?.type,
+				click_type: origin === 'editIconButton' ? 'button' : 'link',
+				push_ref: this.pushRef,
+				run_index: this.runIndex,
+				is_output_present: this.hasNodeRun || this.pinnedData.hasData.value,
+				view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'undefined' : this.displayMode,
+				is_data_pinned: this.pinnedData.hasData.value,
+			});
 		},
-		currentPageOffset(): number {
-			return this.pageSize * (this.currentPage - 1);
+		onClickCancelEdit() {
+			this.ndvStore.setOutputPanelEditModeEnabled(false);
+			this.ndvStore.setOutputPanelEditModeValue('');
+			this.onExitEditMode({ type: 'cancel' });
 		},
-		maxRunIndex(): number {
-			if (this.node === null) {
-				return 0;
+		onClickSaveEdit() {
+			if (!this.node) {
+				return;
 			}
 
-			const runData: IRunData | null = this.workflowRunData;
+			const { value } = this.editMode;
 
-			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-				return 0;
-			}
+			this.clearAllStickyNotifications();
 
-			if (runData[this.node.name].length) {
-				return runData[this.node.name].length - 1;
+			try {
+				const clearedValue = clearJsonKey(value) as INodeExecutionData[];
+				try {
+					this.pinnedData.setData(clearedValue, 'save-edit');
+				} catch (error) {
+					// setData function already shows toasts on error, so just return here
+					return;
+				}
+			} catch (error) {
+				this.showError(error, this.$locale.baseText('ndv.pinData.error.syntaxError.title'));
+				return;
 			}
 
-			return 0;
-		},
-		rawInputData(): INodeExecutionData[] {
-			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
-		},
-		unfilteredInputData(): INodeExecutionData[] {
-			return this.getPinDataOrLiveData(this.rawInputData);
-		},
-		inputData(): INodeExecutionData[] {
-			return this.getFilteredData(this.unfilteredInputData);
-		},
-		inputDataPage(): INodeExecutionData[] {
-			const offset = this.pageSize * (this.currentPage - 1);
-			return this.inputData.slice(offset, offset + this.pageSize);
+			this.ndvStore.setOutputPanelEditModeEnabled(false);
+
+			this.onExitEditMode({ type: 'save' });
 		},
-		jsonData(): IDataObject[] {
-			return executionDataToJson(this.inputData);
+		onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
+			this.$telemetry.track('User closed ndv edit state', {
+				node_type: this.activeNode?.type,
+				push_ref: this.pushRef,
+				run_index: this.runIndex,
+				view: this.displayMode,
+				type,
+			});
 		},
-		binaryData(): IBinaryKeyData[] {
+		async onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
 			if (!this.node) {
-				return [];
+				return;
 			}
 
-			const binaryData = this.nodeHelpers.getBinaryData(
-				this.workflowRunData,
-				this.node.name,
-				this.runIndex,
-				this.currentOutputIndex,
-			);
-			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
-		},
-		inputHtml(): string {
-			return String(this.inputData[0]?.json?.html ?? '');
-		},
-		currentOutputIndex(): number {
-			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
-				return this.overrideOutputs[0];
+			if (source === 'pin-icon-click') {
+				const telemetryPayload = {
+					node_type: this.activeNode?.type,
+					push_ref: this.pushRef,
+					run_index: this.runIndex,
+					view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'none' : this.displayMode,
+				};
+
+				void this.externalHooks.run('runData.onTogglePinData', telemetryPayload);
+				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
 			}
 
-			return this.outputIndex;
-		},
-		branches(): ITab[] {
-			const capitalize = (name: string) => name.charAt(0).toLocaleUpperCase() + name.slice(1);
+			this.nodeHelpers.updateNodeParameterIssues(this.node);
 
-			const branches: ITab[] = [];
+			if (this.pinnedData.hasData.value) {
+				this.pinnedData.unsetData(source);
+				return;
+			}
 
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
-					continue;
-				}
-				const totalItemsCount = this.getRawInputData(this.runIndex, i).length;
-				const itemsCount = this.getDataCount(this.runIndex, i);
-				const items = this.search
-					? this.$locale.baseText('ndv.search.items', {
-							adjustToNumber: totalItemsCount,
-							interpolate: { matched: itemsCount, total: totalItemsCount },
-						})
-					: this.$locale.baseText('ndv.output.items', {
-							adjustToNumber: itemsCount,
-							interpolate: { count: itemsCount },
-						});
-				let outputName = this.getOutputName(i);
+			try {
+				this.pinnedData.setData(this.rawInputData, 'pin-icon-click');
+			} catch (error) {
+				console.error(error);
+				return;
+			}
 
-				if (`${outputName}` === `${i}`) {
-					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
-				} else {
-					const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
-						this.node?.type ?? '',
-					)
-						? ''
-						: ` ${this.$locale.baseText('ndv.output.branch')}`;
-					outputName = capitalize(`${this.getOutputName(i)}${appendBranchWord}`);
-				}
-				branches.push({
-					label:
-						(this.search && itemsCount) || totalItemsCount
-							? `${outputName} (${items})`
-							: outputName,
-					value: i,
+			if (this.maxRunIndex > 0) {
+				this.showToast({
+					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
+						interpolate: {
+							index: `${this.runIndex}`,
+						},
+					}),
+					message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
+					type: 'success',
+					duration: 2000,
 				});
 			}
-			return branches;
+
+			this.hidePinDataDiscoveryTooltip();
+			this.pinDataDiscoveryComplete();
 		},
-		editMode(): { enabled: boolean; value: string } {
-			return this.isPaneTypeInput
-				? { enabled: false, value: '' }
-				: this.ndvStore.outputPanelEditMode;
+		switchToBinary() {
+			this.onDisplayModeChange('binary');
 		},
-		isPaneTypeInput(): boolean {
-			return this.paneType === 'input';
+		onBranchChange(value: number) {
+			this.outputIndex = value;
+
+			this.$telemetry.track('User changed ndv branch', {
+				push_ref: this.pushRef,
+				branch_index: value,
+				node_type: this.activeNode?.type,
+				node_type_input_selection: this.nodeType ? this.nodeType.name : '',
+				pane: this.paneType,
+			});
 		},
-		isPaneTypeOutput(): boolean {
-			return this.paneType === 'output';
+		showTooMuchData() {
+			this.showData = true;
+			this.userEnabledShowData = true;
+			this.$telemetry.track('User clicked ndv button', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				pane: this.paneType,
+				type: 'showTooMuchData',
+			});
 		},
-		readOnlyEnv(): boolean {
-			return this.sourceControlStore.preferences.branchReadOnly;
+		toggleLinkRuns() {
+			this.linkedRuns ? this.unlinkRun() : this.linkRun();
 		},
-		showIOSearch(): boolean {
-			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
+		linkRun() {
+			this.$emit('linkRun');
 		},
-		inputSelectLocation() {
-			if (this.isSchemaView) return 'none';
-			if (!this.hasNodeRun) return 'header';
-			if (this.maxRunIndex > 0) return 'runs';
-			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
-				return 'outputs';
-			}
-
-			return 'items';
+		unlinkRun() {
+			this.$emit('unlinkRun');
 		},
-		showIoSearchNoMatchContent(): boolean {
-			return this.hasNodeRun && !this.inputData.length && !!this.search;
+		onCurrentPageChange(value: number) {
+			this.currentPage = value;
+			this.$telemetry.track('User changed ndv page', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				pane: this.paneType,
+				page_selected: this.currentPage,
+				page_size: this.pageSize,
+				items_total: this.dataCount,
+			});
 		},
-		parentNodeOutputData(): INodeExecutionData[] {
-			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
-			let parentNodeData: INodeExecutionData[] = [];
-
-			if (parentNode?.name) {
-				parentNodeData = this.nodeHelpers.getNodeInputData(
-					this.workflow.getNode(parentNode?.name),
-					this.runIndex,
-					this.outputIndex,
-					'input',
-					this.connectionType,
-				);
+		resetCurrentPageIfTooFar() {
+			const maxPage = Math.ceil(this.dataCount / this.pageSize);
+			if (maxPage < this.currentPage) {
+				this.currentPage = maxPage;
 			}
-
-			return parentNodeData;
-		},
-	},
-	watch: {
-		node(newNode: INodeUi, prevNode: INodeUi) {
-			if (newNode?.id === prevNode?.id) return;
-			this.init();
 		},
-		hasNodeRun() {
-			if (this.paneType === 'output') this.setDisplayMode();
+		onPageSizeChange(pageSize: number) {
+			this.pageSize = pageSize;
+
+			this.resetCurrentPageIfTooFar();
+
+			this.$telemetry.track('User changed ndv page size', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				pane: this.paneType,
+				page_selected: this.currentPage,
+				page_size: this.pageSize,
+				items_total: this.dataCount,
+			});
 		},
-		inputDataPage: {
-			handler(data: INodeExecutionData[]) {
-				if (this.paneType && data) {
-					this.ndvStore.setNDVPanelDataIsEmpty({
-						panel: this.paneType as 'input' | 'output',
-						isEmpty: data.every((item) => isEmpty(item.json)),
-					});
+		onDisplayModeChange(displayMode: IRunDataDisplayMode) {
+			const previous = this.displayMode;
+			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
+
+			if (!this.userEnabledShowData) this.updateShowData();
+
+			const dataContainerRef = this.$refs.dataContainer as Element | undefined;
+			if (dataContainerRef) {
+				const dataDisplay = dataContainerRef.children[0];
+
+				if (dataDisplay) {
+					dataDisplay.scrollTo(0, 0);
 				}
-			},
-			immediate: true,
-			deep: true,
-		},
-		jsonData(data: IDataObject[], prevData: IDataObject[]) {
-			if (isEqual(data, prevData)) return;
-			this.refreshDataSize();
-			if (this.dataCount) {
-				this.resetCurrentPageIfTooFar();
 			}
-			this.showPinDataDiscoveryTooltip(data);
-		},
-		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
-			if (newData.length && !prevData.length && this.displayMode !== 'binary') {
-				this.switchToBinary();
-			} else if (!newData.length && this.displayMode === 'binary') {
-				this.onDisplayModeChange('table');
+
+			this.closeBinaryDataDisplay();
+			void this.externalHooks.run('runData.displayModeChanged', {
+				newValue: displayMode,
+				oldValue: previous,
+			});
+			if (this.activeNode) {
+				this.$telemetry.track('User changed ndv item view', {
+					previous_view: previous,
+					new_view: displayMode,
+					node_type: this.activeNode.type,
+					workflow_id: this.workflowsStore.workflowId,
+					push_ref: this.pushRef,
+					pane: this.paneType,
+				});
 			}
 		},
-		currentOutputIndex(branchIndex: number) {
-			this.ndvStore.setNDVBranchIndex({
-				pane: this.paneType as 'input' | 'output',
-				branchIndex,
+		getRunLabel(option: number) {
+			let itemsCount = 0;
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
+			}
+			const items = this.$locale.baseText('ndv.output.items', {
+				adjustToNumber: itemsCount,
+				interpolate: { count: itemsCount },
 			});
+			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
+			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
 		},
-		search(newSearch: string) {
-			this.$emit('search', newSearch);
-		},
-	},
-	mounted() {
-		this.init();
-
-		if (!this.isPaneTypeInput) {
-			this.showPinDataDiscoveryTooltip(this.jsonData);
-		}
-		this.ndvStore.setNDVBranchIndex({
-			pane: this.paneType as 'input' | 'output',
-			branchIndex: this.currentOutputIndex,
-		});
-
-		if (this.paneType === 'output') {
-			this.setDisplayMode();
-			this.activatePane();
-		}
-
-		if (this.hasRunError && this.node) {
-			const error = this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error;
-			const errorsToTrack = ['unknown error'];
+		getRawInputData(
+			runIndex: number,
+			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
+		): INodeExecutionData[] {
+			let inputData: INodeExecutionData[] = [];
 
-			if (error && errorsToTrack.some((e) => error.message?.toLowerCase().includes(e))) {
-				this.$telemetry.track(
-					`User encountered an error: "${error.message}"`,
-					{
-						node: this.node.type,
-						errorMessage: error.message,
-						nodeVersion: this.node.typeVersion,
-						n8nVersion: this.rootStore.versionCli,
-					},
-					{
-						withPostHog: true,
-					},
+			if (this.node) {
+				inputData = this.nodeHelpers.getNodeInputData(
+					this.node,
+					runIndex,
+					outputIndex,
+					this.paneType,
+					connectionType,
 				);
 			}
-		}
-	},
-	beforeUnmount() {
-		this.hidePinDataDiscoveryTooltip();
-	},
-	methods: {
-		getResolvedNodeOutputs() {
-			if (this.node && this.nodeType) {
-				const workflowNode = this.workflow.getNode(this.node.name);
 
-				if (workflowNode) {
-					const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
-					return outputs;
-				}
+			if (inputData.length === 0 || !Array.isArray(inputData)) {
+				return [];
 			}
-			return [];
-		},
-		shouldHintBeDisplayed(hint: NodeHint): boolean {
-			const { location, whenToDisplay } = hint;
 
-			if (location) {
-				if (location === 'ndv' && !['input', 'output'].includes(this.paneType)) {
-					return false;
-				}
-				if (location === 'inputPane' && this.paneType !== 'input') {
-					return false;
-				}
+			return inputData;
+		},
+		getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] {
+			if (this.pinnedData.data.value && !this.isProductionExecutionPreview) {
+				return Array.isArray(this.pinnedData.data.value)
+					? this.pinnedData.data.value.map((value) => ({
+							json: value,
+						}))
+					: [
+							{
+								json: this.pinnedData.data.value,
+							},
+						];
+			}
+			return inputData;
+		},
+		getFilteredData(inputData: INodeExecutionData[]): INodeExecutionData[] {
+			if (!this.search || this.isSchemaView) {
+				return inputData;
+			}
 
-				if (location === 'outputPane' && this.paneType !== 'output') {
-					return false;
-				}
+			this.currentPage = 1;
+			return inputData.filter(({ json }) => searchInObject(json, this.search));
+		},
+		getDataCount(
+			runIndex: number,
+			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
+		) {
+			if (!this.node) {
+				return 0;
 			}
 
-			if (whenToDisplay === 'afterExecution' && !this.hasNodeRun) {
-				return false;
+			if (this.workflowRunData?.[this.node.name]?.[runIndex]?.hasOwnProperty('error')) {
+				return 1;
 			}
 
-			if (whenToDisplay === 'beforeExecution' && this.hasNodeRun) {
-				return false;
+			const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
+			const pinOrLiveData = this.getPinDataOrLiveData(rawInputData);
+			return this.getFilteredData(pinOrLiveData).length;
+		},
+		init() {
+			// Reset the selected output index every time another node gets selected
+			this.outputIndex = 0;
+			this.refreshDataSize();
+			this.closeBinaryDataDisplay();
+			let outputTypes: ConnectionTypes[] = [];
+			if (this.nodeType !== null && this.node !== null) {
+				const outputs = this.getResolvedNodeOutputs();
+				outputTypes = NodeHelpers.getConnectionTypes(outputs);
+			}
+			this.connectionType = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
+			if (this.binaryData.length > 0) {
+				this.ndvStore.setPanelDisplayMode({
+					pane: this.paneType as 'input' | 'output',
+					mode: 'binary',
+				});
+			} else if (this.displayMode === 'binary') {
+				this.ndvStore.setPanelDisplayMode({
+					pane: this.paneType as 'input' | 'output',
+					mode: 'table',
+				});
 			}
+		},
+		closeBinaryDataDisplay() {
+			this.binaryDataDisplayVisible = false;
+			this.binaryDataDisplayData = null;
+		},
+		clearExecutionData() {
+			this.workflowsStore.setWorkflowExecutionData(null);
+			this.nodeHelpers.updateNodesExecutionIssues();
+		},
+		isViewable(index: number, key: string | number): boolean {
+			const { fileType } = this.binaryData[index][key];
+			return (
+				!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
+			);
+		},
+		isDownloadable(index: number, key: string | number): boolean {
+			const { mimeType, fileName } = this.binaryData[index][key];
+			return !!(mimeType && fileName);
+		},
+		async downloadBinaryData(index: number, key: string | number) {
+			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
 
-			return true;
+			if (id) {
+				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
+				saveAs(url, [fileName, fileExtension].join('.'));
+				return;
+			} else {
+				const bufferString = 'data:' + mimeType + ';base64,' + data;
+				const blob = await fetch(bufferString).then(async (d) => await d.blob());
+				saveAs(blob, fileName);
+			}
 		},
-		getNodeHints(): NodeHint[] {
-			if (this.node && this.nodeType) {
-				const workflowNode = this.workflow.getNode(this.node.name);
+		async downloadJsonData() {
+			const fileName = (this.node?.name ?? '').replace(/[^\w\d]/g, '_');
+			const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
+				type: 'application/json',
+			});
 
-				if (workflowNode) {
-					const executionHints = this.executionHints;
-					const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
-						runExecutionData: this.workflowExecution?.data ?? null,
-						runIndex: this.runIndex,
-						connectionInputData: this.parentNodeOutputData,
-					});
+			saveAs(blob, `${fileName}.json`);
+		},
+		displayBinaryData(index: number, key: string | number) {
+			const { data, mimeType } = this.binaryData[index][key];
+			this.binaryDataDisplayVisible = true;
 
-					return executionHints.concat(nodeHints).filter(this.shouldHintBeDisplayed);
-				}
+			this.binaryDataDisplayData = {
+				node: this.node?.name,
+				runIndex: this.runIndex,
+				outputIndex: this.currentOutputIndex,
+				index,
+				key,
+				data,
+				mimeType,
+			};
+		},
+		getOutputName(outputIndex: number) {
+			if (this.node === null) {
+				return outputIndex + 1;
 			}
-			return [];
-		},
-		onItemHover(itemIndex: number | null) {
-			if (itemIndex === null) {
-				this.$emit('itemHover', null);
 
-				return;
+			const nodeType = this.nodeType;
+			const outputs = this.getResolvedNodeOutputs();
+			const outputConfiguration = outputs?.[outputIndex] as INodeOutputConfiguration;
+
+			if (outputConfiguration && isObject(outputConfiguration)) {
+				return outputConfiguration?.displayName;
 			}
-			this.$emit('itemHover', {
-				outputIndex: this.currentOutputIndex,
-				itemIndex,
-			});
+			if (!nodeType?.outputNames || nodeType.outputNames.length <= outputIndex) {
+				return outputIndex + 1;
+			}
+
+			return nodeType.outputNames[outputIndex];
 		},
-		onClickDataPinningDocsLink() {
-			this.$telemetry.track('User clicked ndv link', {
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				node_type: this.activeNode?.type,
-				pane: 'output',
-				type: 'data-pinning-docs',
-			});
+		refreshDataSize() {
+			// Hide by default the data from being displayed
+			this.showData = false;
+			const jsonItems = this.inputDataPage.map((item) => item.json);
+			const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
+			this.dataSize = byteSize;
+			this.updateShowData();
 		},
-		showPinDataDiscoveryTooltip(value: IDataObject[]) {
-			if (!this.isTriggerNode) {
-				return;
-			}
+		updateShowData() {
+			// Display data if it is reasonably small (< 1MB)
+			this.showData =
+				(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
+				this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
+		},
+		onRunIndexChange(run: number) {
+			this.$emit('runChange', run);
+		},
+		enableNode() {
+			if (this.node) {
+				const updateInformation = {
+					name: this.node.name,
+					properties: {
+						disabled: !this.node.disabled,
+					} as IDataObject,
+				} as INodeUpdatePropertiesInformation;
 
-			const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
+				this.workflowsStore.updateNodeProperties(updateInformation);
+			}
+		},
+		setDisplayMode() {
+			if (!this.activeNode) return;
 
-			if (value && value.length > 0 && !this.isReadOnlyRoute && !pinDataDiscoveryFlag) {
-				this.pinDataDiscoveryComplete();
+			const shouldDisplayHtml =
+				this.activeNode.type === HTML_NODE_TYPE &&
+				this.activeNode.parameters.operation === 'generateHtmlTemplate';
 
-				setTimeout(() => {
-					this.isControlledPinDataTooltip = true;
-					this.pinDataDiscoveryTooltipVisible = true;
-					dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
-				}, 500); // Wait for NDV to open
+			if (shouldDisplayHtml) {
+				this.ndvStore.setPanelDisplayMode({
+					pane: 'output',
+					mode: 'html',
+				});
 			}
 		},
-		hidePinDataDiscoveryTooltip() {
-			if (this.pinDataDiscoveryTooltipVisible) {
-				this.isControlledPinDataTooltip = false;
-				this.pinDataDiscoveryTooltipVisible = false;
-				dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
-			}
+		activatePane() {
+			this.$emit('activatePane');
 		},
-		pinDataDiscoveryComplete() {
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+		onSearchClear() {
+			this.search = '';
+			document.dispatchEvent(new KeyboardEvent('keyup', { key: '/' }));
 		},
-		enterEditMode({ origin }: EnterEditModeArgs) {
-			const inputData = this.pinnedData.data.value
-				? clearJsonKey(this.pinnedData.data.value)
-				: executionDataToJson(this.rawInputData);
+	},
+});
+</script>
 
-			const inputDataLength = Array.isArray(inputData)
-				? inputData.length
-				: Object.keys(inputData ?? {}).length;
+<template>
+	<div :class="['run-data', $style.container]" @mouseover="activatePane">
+		<n8n-callout
+			v-if="
+				canPinData && pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview
+			"
+			theme="secondary"
+			icon="thumbtack"
+			:class="$style.pinnedDataCallout"
+		>
+			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
+			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">
+				<n8n-link
+					theme="secondary"
+					size="small"
+					underline
+					bold
+					@click.stop="onTogglePinData({ source: 'banner-link' })"
+				>
+					{{ $locale.baseText('runData.pindata.unpin') }}
+				</n8n-link>
+			</span>
+			<template #trailingContent>
+				<n8n-link
+					:to="dataPinningDocsUrl"
+					size="small"
+					theme="secondary"
+					bold
+					underline
+					@click="onClickDataPinningDocsLink"
+				>
+					{{ $locale.baseText('runData.pindata.learnMore') }}
+				</n8n-link>
+			</template>
+		</n8n-callout>
 
-			const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
+		<BinaryDataDisplay
+			v-if="binaryDataDisplayData"
+			:window-visible="binaryDataDisplayVisible"
+			:display-data="binaryDataDisplayData"
+			@close="closeBinaryDataDisplay"
+		/>
 
-			this.ndvStore.setOutputPanelEditModeEnabled(true);
-			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
+		<div :class="$style.header">
+			<slot name="header"></slot>
 
-			this.$telemetry.track('User opened ndv edit state', {
-				node_type: this.activeNode?.type,
-				click_type: origin === 'editIconButton' ? 'button' : 'link',
-				push_ref: this.pushRef,
-				run_index: this.runIndex,
-				is_output_present: this.hasNodeRun || this.pinnedData.hasData.value,
-				view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'undefined' : this.displayMode,
-				is_data_pinned: this.pinnedData.hasData.value,
-			});
-		},
-		onClickCancelEdit() {
-			this.ndvStore.setOutputPanelEditModeEnabled(false);
-			this.ndvStore.setOutputPanelEditModeValue('');
-			this.onExitEditMode({ type: 'cancel' });
-		},
-		onClickSaveEdit() {
-			if (!this.node) {
-				return;
-			}
+			<div
+				v-show="!hasRunError"
+				:class="$style.displayModes"
+				data-test-id="run-data-pane-header"
+				@click.stop
+			>
+				<Suspense>
+					<LazyRunDataSearch
+						v-if="showIOSearch"
+						v-model="search"
+						:class="$style.search"
+						:pane-type="paneType"
+						:display-mode="displayMode"
+						:is-area-active="isPaneActive"
+						@focus="activatePane"
+					/>
+				</Suspense>
 
-			const { value } = this.editMode;
+				<n8n-radio-buttons
+					v-show="
+						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
+					"
+					:model-value="displayMode"
+					:options="displayModes"
+					data-test-id="ndv-run-data-display-mode"
+					@update:model-value="onDisplayModeChange"
+				/>
 
-			this.clearAllStickyNotifications();
+				<n8n-icon-button
+					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
+					v-show="!editMode.enabled"
+					:title="$locale.baseText('runData.editOutput')"
+					:circle="false"
+					:disabled="node?.disabled"
+					icon="pencil-alt"
+					type="tertiary"
+					data-test-id="ndv-edit-pinned-data"
+					@click="enterEditMode({ origin: 'editIconButton' })"
+				/>
 
-			try {
-				const clearedValue = clearJsonKey(value) as INodeExecutionData[];
-				try {
-					this.pinnedData.setData(clearedValue, 'save-edit');
-				} catch (error) {
-					// setData function already shows toasts on error, so just return here
-					return;
-				}
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('ndv.pinData.error.syntaxError.title'));
-				return;
-			}
+				<RunDataPinButton
+					v-if="(canPinData || !!binaryData?.length) && rawInputData.length && !editMode.enabled"
+					:disabled="
+						(!rawInputData.length && !pinnedData.hasData.value) ||
+						isReadOnlyRoute ||
+						readOnlyEnv ||
+						!!binaryData?.length
+					"
+					:tooltip-contents-visibility="{
+						binaryDataTooltipContent: !!binaryData?.length,
+						pinDataDiscoveryTooltipContent:
+							isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible,
+					}"
+					:data-pinning-docs-url="dataPinningDocsUrl"
+					:pinned-data="pinnedData"
+					@toggle-pin-data="onTogglePinData({ source: 'pin-icon-click' })"
+				/>
+
+				<div v-show="editMode.enabled" :class="$style.editModeActions">
+					<n8n-button
+						type="tertiary"
+						:label="$locale.baseText('runData.editor.cancel')"
+						@click="onClickCancelEdit"
+					/>
+					<n8n-button
+						class="ml-2xs"
+						type="primary"
+						:label="$locale.baseText('runData.editor.save')"
+						@click="onClickSaveEdit"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="inputSelectLocation === 'header'" :class="$style.inputSelect">
+			<slot name="input-select"></slot>
+		</div>
+
+		<div
+			v-if="maxRunIndex > 0 && !isInputSchemaView"
+			v-show="!editMode.enabled"
+			:class="$style.runSelector"
+		>
+			<slot v-if="inputSelectLocation === 'runs'" name="input-select"></slot>
 
-			this.ndvStore.setOutputPanelEditModeEnabled(false);
+			<n8n-select
+				:model-value="runIndex"
+				:class="$style.runSelectorInner"
+				size="small"
+				teleported
+				data-test-id="run-selector"
+				@update:model-value="onRunIndexChange"
+				@click.stop
+			>
+				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
+				<n8n-option
+					v-for="option in maxRunIndex + 1"
+					:key="option"
+					:label="getRunLabel(option)"
+					:value="option - 1"
+				></n8n-option>
+			</n8n-select>
 
-			this.onExitEditMode({ type: 'save' });
-		},
-		onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
-			this.$telemetry.track('User closed ndv edit state', {
-				node_type: this.activeNode?.type,
-				push_ref: this.pushRef,
-				run_index: this.runIndex,
-				view: this.displayMode,
-				type,
-			});
-		},
-		async onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
-			if (!this.node) {
-				return;
-			}
+			<n8n-tooltip v-if="canLinkRuns" placement="right">
+				<template #content>
+					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
+				</template>
+				<n8n-icon-button
+					:icon="linkedRuns ? 'unlink' : 'link'"
+					class="linkRun"
+					text
+					type="tertiary"
+					size="small"
+					data-test-id="link-run"
+					@click="toggleLinkRuns"
+				/>
+			</n8n-tooltip>
 
-			if (source === 'pin-icon-click') {
-				const telemetryPayload = {
-					node_type: this.activeNode?.type,
-					push_ref: this.pushRef,
-					run_index: this.runIndex,
-					view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'none' : this.displayMode,
-				};
+			<slot name="run-info"></slot>
+		</div>
 
-				void this.externalHooks.run('runData.onTogglePinData', telemetryPayload);
-				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
-			}
+		<slot v-if="!isInputSchemaView" name="before-data" />
 
-			this.nodeHelpers.updateNodeParameterIssues(this.node);
+		<n8n-callout
+			v-for="hint in getNodeHints()"
+			:key="hint.message"
+			:class="$style.hintCallout"
+			:theme="hint.type || 'info'"
+		>
+			<n8n-text size="small" v-html="hint.message"></n8n-text>
+		</n8n-callout>
 
-			if (this.pinnedData.hasData.value) {
-				this.pinnedData.unsetData(source);
-				return;
-			}
+		<div
+			v-if="maxOutputIndex > 0 && branches.length > 1 && !isInputSchemaView"
+			:class="$style.outputs"
+			data-test-id="branches"
+		>
+			<slot v-if="inputSelectLocation === 'outputs'" name="input-select"></slot>
 
-			try {
-				this.pinnedData.setData(this.rawInputData, 'pin-icon-click');
-			} catch (error) {
-				console.error(error);
-				return;
-			}
+			<div :class="$style.tabs">
+				<n8n-tabs
+					:model-value="currentOutputIndex"
+					:options="branches"
+					@update:model-value="onBranchChange"
+				/>
+			</div>
+		</div>
 
-			if (this.maxRunIndex > 0) {
-				this.showToast({
-					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
-						interpolate: {
-							index: `${this.runIndex}`,
-						},
-					}),
-					message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
-					type: 'success',
-					duration: 2000,
-				});
-			}
+		<div
+			v-else-if="
+				!hasRunError &&
+				hasNodeRun &&
+				((dataCount > 0 && maxRunIndex === 0) || search) &&
+				!isArtificialRecoveredEventItem &&
+				!isInputSchemaView
+			"
+			v-show="!editMode.enabled && !hasRunError"
+			:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
+			data-test-id="ndv-items-count"
+		>
+			<slot v-if="inputSelectLocation === 'items'" name="input-select"></slot>
 
-			this.hidePinDataDiscoveryTooltip();
-			this.pinDataDiscoveryComplete();
-		},
-		switchToBinary() {
-			this.onDisplayModeChange('binary');
-		},
-		onBranchChange(value: number) {
-			this.outputIndex = value;
+			<n8n-text v-if="search" :class="$style.itemsText">
+				{{
+					$locale.baseText('ndv.search.items', {
+						adjustToNumber: unfilteredDataCount,
+						interpolate: { matched: dataCount, total: unfilteredDataCount },
+					})
+				}}
+			</n8n-text>
+			<n8n-text v-else :class="$style.itemsText">
+				{{
+					$locale.baseText('ndv.output.items', {
+						adjustToNumber: dataCount,
+						interpolate: { count: dataCount },
+					})
+				}}
+			</n8n-text>
+		</div>
 
-			this.$telemetry.track('User changed ndv branch', {
-				push_ref: this.pushRef,
-				branch_index: value,
-				node_type: this.activeNode?.type,
-				node_type_input_selection: this.nodeType ? this.nodeType.name : '',
-				pane: this.paneType,
-			});
-		},
-		showTooMuchData() {
-			this.showData = true;
-			this.userEnabledShowData = true;
-			this.$telemetry.track('User clicked ndv button', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				type: 'showTooMuchData',
-			});
-		},
-		toggleLinkRuns() {
-			this.linkedRuns ? this.unlinkRun() : this.linkRun();
-		},
-		linkRun() {
-			this.$emit('linkRun');
-		},
-		unlinkRun() {
-			this.$emit('unlinkRun');
-		},
-		onCurrentPageChange(value: number) {
-			this.currentPage = value;
-			this.$telemetry.track('User changed ndv page', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				page_selected: this.currentPage,
-				page_size: this.pageSize,
-				items_total: this.dataCount,
-			});
-		},
-		resetCurrentPageIfTooFar() {
-			const maxPage = Math.ceil(this.dataCount / this.pageSize);
-			if (maxPage < this.currentPage) {
-				this.currentPage = maxPage;
-			}
-		},
-		onPageSizeChange(pageSize: number) {
-			this.pageSize = pageSize;
+		<div ref="dataContainer" :class="$style.dataContainer" data-test-id="ndv-data-container">
+			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
+				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
+				<n8n-text>{{ executingMessage }}</n8n-text>
+			</div>
 
-			this.resetCurrentPageIfTooFar();
+			<div v-else-if="editMode.enabled" :class="$style.editMode">
+				<div :class="[$style.editModeBody, 'ignore-key-press']">
+					<JsonEditor
+						:model-value="editMode.value"
+						:fill-parent="true"
+						@update:model-value="ndvStore.setOutputPanelEditModeValue($event)"
+					/>
+				</div>
+				<div :class="$style.editModeFooter">
+					<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
+						{{ $locale.baseText('runData.editor.copyDataInfo') }}
+						<n8n-link :to="dataEditingDocsUrl" size="small">
+							{{ $locale.baseText('generic.learnMore') }}
+						</n8n-link>
+					</n8n-info-tip>
+				</div>
+			</div>
 
-			this.$telemetry.track('User changed ndv page size', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				page_selected: this.currentPage,
-				page_size: this.pageSize,
-				items_total: this.dataCount,
-			});
-		},
-		onDisplayModeChange(displayMode: IRunDataDisplayMode) {
-			const previous = this.displayMode;
-			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
+			<div
+				v-else-if="paneType === 'output' && hasSubworkflowExecutionError"
+				:class="$style.stretchVertically"
+			>
+				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
+			</div>
 
-			if (!this.userEnabledShowData) this.updateShowData();
+			<div v-else-if="!hasNodeRun && !(isInputSchemaView && node?.disabled)" :class="$style.center">
+				<slot name="node-not-run"></slot>
+			</div>
 
-			const dataContainerRef = this.$refs.dataContainer as Element | undefined;
-			if (dataContainerRef) {
-				const dataDisplay = dataContainerRef.children[0];
+			<div
+				v-else-if="paneType === 'input' && !isInputSchemaView && node?.disabled"
+				:class="$style.center"
+			>
+				<n8n-text>
+					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
+					<n8n-link @click="enableNode">
+						{{ $locale.baseText('ndv.input.disabled.cta') }}
+					</n8n-link>
+				</n8n-text>
+			</div>
 
-				if (dataDisplay) {
-					dataDisplay.scrollTo(0, 0);
-				}
-			}
+			<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
+				<slot name="recovered-artificial-output-data"></slot>
+			</div>
 
-			this.closeBinaryDataDisplay();
-			void this.externalHooks.run('runData.displayModeChanged', {
-				newValue: displayMode,
-				oldValue: previous,
-			});
-			if (this.activeNode) {
-				this.$telemetry.track('User changed ndv item view', {
-					previous_view: previous,
-					new_view: displayMode,
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: this.paneType,
-				});
-			}
-		},
-		getRunLabel(option: number) {
-			let itemsCount = 0;
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
-			}
-			const items = this.$locale.baseText('ndv.output.items', {
-				adjustToNumber: itemsCount,
-				interpolate: { count: itemsCount },
-			});
-			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
-			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
-		},
-		getRawInputData(
-			runIndex: number,
-			outputIndex: number,
-			connectionType: ConnectionTypes = NodeConnectionType.Main,
-		): INodeExecutionData[] {
-			let inputData: INodeExecutionData[] = [];
+			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
+				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
+					{{
+						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
+							interpolate: { nodeName: node?.name ?? '' },
+						})
+					}}
+				</n8n-text>
+				<div v-else-if="$slots['content']">
+					<NodeErrorView
+						v-if="workflowRunErrorAsNodeError"
+						:error="workflowRunErrorAsNodeError"
+						:class="$style.inlineError"
+						compact
+					/>
+					<slot name="content"></slot>
+				</div>
+				<NodeErrorView
+					v-else-if="workflowRunErrorAsNodeError"
+					:error="workflowRunErrorAsNodeError"
+					:class="$style.dataDisplay"
+				/>
+			</div>
 
-			if (this.node) {
-				inputData = this.nodeHelpers.getNodeInputData(
-					this.node,
-					runIndex,
-					outputIndex,
-					this.paneType,
-					connectionType,
-				);
-			}
+			<div
+				v-else-if="
+					hasNodeRun && (!unfilteredDataCount || (search && !dataCount)) && branches.length > 1
+				"
+				:class="$style.center"
+			>
+				<div v-if="search">
+					<n8n-text tag="h3" size="large">{{
+						$locale.baseText('ndv.search.noMatch.title')
+					}}</n8n-text>
+					<n8n-text>
+						<i18n-t keypath="ndv.search.noMatch.description" tag="span">
+							<template #link>
+								<a href="#" @click="onSearchClear">
+									{{ $locale.baseText('ndv.search.noMatch.description.link') }}
+								</a>
+							</template>
+						</i18n-t>
+					</n8n-text>
+				</div>
+				<n8n-text v-else>
+					{{ noDataInBranchMessage }}
+				</n8n-text>
+			</div>
 
-			if (inputData.length === 0 || !Array.isArray(inputData)) {
-				return [];
-			}
+			<div v-else-if="hasNodeRun && !inputData.length && !search" :class="$style.center">
+				<slot name="no-output-data">xxx</slot>
+			</div>
 
-			return inputData;
-		},
-		getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] {
-			if (this.pinnedData.data.value && !this.isProductionExecutionPreview) {
-				return Array.isArray(this.pinnedData.data.value)
-					? this.pinnedData.data.value.map((value) => ({
-							json: value,
-						}))
-					: [
-							{
-								json: this.pinnedData.data.value,
-							},
-						];
-			}
-			return inputData;
-		},
-		getFilteredData(inputData: INodeExecutionData[]): INodeExecutionData[] {
-			if (!this.search || this.isSchemaView) {
-				return inputData;
-			}
+			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
+				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
+				<n8n-text align="center" tag="div"
+					><span
+						v-html="
+							$locale.baseText('ndv.output.tooMuchData.message', {
+								interpolate: { size: dataSizeInMB },
+							})
+						"
+					></span
+				></n8n-text>
 
-			this.currentPage = 1;
-			return inputData.filter(({ json }) => searchInObject(json, this.search));
-		},
-		getDataCount(
-			runIndex: number,
-			outputIndex: number,
-			connectionType: ConnectionTypes = NodeConnectionType.Main,
-		) {
-			if (!this.node) {
-				return 0;
-			}
+				<n8n-button
+					outline
+					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
+					@click="showTooMuchData"
+				/>
 
-			if (this.workflowRunData?.[this.node.name]?.[runIndex]?.hasOwnProperty('error')) {
-				return 1;
-			}
+				<n8n-button
+					size="small"
+					:label="$locale.baseText('runData.downloadBinaryData')"
+					@click="downloadJsonData()"
+				/>
+			</div>
 
-			const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
-			const pinOrLiveData = this.getPinDataOrLiveData(rawInputData);
-			return this.getFilteredData(pinOrLiveData).length;
-		},
-		init() {
-			// Reset the selected output index every time another node gets selected
-			this.outputIndex = 0;
-			this.refreshDataSize();
-			this.closeBinaryDataDisplay();
-			let outputTypes: ConnectionTypes[] = [];
-			if (this.nodeType !== null && this.node !== null) {
-				const outputs = this.getResolvedNodeOutputs();
-				outputTypes = NodeHelpers.getConnectionTypes(outputs);
-			}
-			this.connectionType = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
-			if (this.binaryData.length > 0) {
-				this.ndvStore.setPanelDisplayMode({
-					pane: this.paneType as 'input' | 'output',
-					mode: 'binary',
-				});
-			} else if (this.displayMode === 'binary') {
-				this.ndvStore.setPanelDisplayMode({
-					pane: this.paneType as 'input' | 'output',
-					mode: 'table',
-				});
-			}
-		},
-		closeBinaryDataDisplay() {
-			this.binaryDataDisplayVisible = false;
-			this.binaryDataDisplayData = null;
-		},
-		clearExecutionData() {
-			this.workflowsStore.setWorkflowExecutionData(null);
-			this.nodeHelpers.updateNodesExecutionIssues();
-		},
-		isViewable(index: number, key: string | number): boolean {
-			const { fileType } = this.binaryData[index][key];
-			return (
-				!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
-			);
-		},
-		isDownloadable(index: number, key: string | number): boolean {
-			const { mimeType, fileName } = this.binaryData[index][key];
-			return !!(mimeType && fileName);
-		},
-		async downloadBinaryData(index: number, key: string | number) {
-			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
+			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
+			<slot v-else-if="hasNodeRun && $slots['content']" name="content"></slot>
 
-			if (id) {
-				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
-				saveAs(url, [fileName, fileExtension].join('.'));
-				return;
-			} else {
-				const bufferString = 'data:' + mimeType + ';base64,' + data;
-				const blob = await fetch(bufferString).then(async (d) => await d.blob());
-				saveAs(blob, fileName);
-			}
-		},
-		async downloadJsonData() {
-			const fileName = (this.node?.name ?? '').replace(/[^\w\d]/g, '_');
-			const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
-				type: 'application/json',
-			});
+			<div
+				v-else-if="
+					hasNodeRun &&
+					displayMode === 'table' &&
+					binaryData.length > 0 &&
+					inputData.length === 1 &&
+					Object.keys(jsonData[0] || {}).length === 0
+				"
+				:class="$style.center"
+			>
+				<n8n-text>
+					{{ $locale.baseText('runData.switchToBinary.info') }}
+					<a @click="switchToBinary">
+						{{ $locale.baseText('runData.switchToBinary.binary') }}
+					</a>
+				</n8n-text>
+			</div>
+
+			<div v-else-if="showIoSearchNoMatchContent" :class="$style.center">
+				<n8n-text tag="h3" size="large">{{
+					$locale.baseText('ndv.search.noMatch.title')
+				}}</n8n-text>
+				<n8n-text>
+					<i18n-t keypath="ndv.search.noMatch.description" tag="span">
+						<template #link>
+							<a href="#" @click="onSearchClear">
+								{{ $locale.baseText('ndv.search.noMatch.description.link') }}
+							</a>
+						</template>
+					</i18n-t>
+				</n8n-text>
+			</div>
 
-			saveAs(blob, `${fileName}.json`);
-		},
-		displayBinaryData(index: number, key: string | number) {
-			const { data, mimeType } = this.binaryData[index][key];
-			this.binaryDataDisplayVisible = true;
+			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
+				<LazyRunDataTable
+					:node="node"
+					:input-data="inputDataPage"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
+					:run-index="runIndex"
+					:page-offset="currentPageOffset"
+					:total-runs="maxRunIndex"
+					:has-default-hover-state="paneType === 'input' && !search"
+					:search="search"
+					@mounted="$emit('tableMounted', $event)"
+					@active-row-changed="onItemHover"
+					@display-mode-change="onDisplayModeChange"
+				/>
+			</Suspense>
 
-			this.binaryDataDisplayData = {
-				node: this.node?.name,
-				runIndex: this.runIndex,
-				outputIndex: this.currentOutputIndex,
-				index,
-				key,
-				data,
-				mimeType,
-			};
-		},
-		getOutputName(outputIndex: number) {
-			if (this.node === null) {
-				return outputIndex + 1;
-			}
+			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
+				<LazyRunDataJson
+					:pane-type="paneType"
+					:edit-mode="editMode"
+					:push-ref="pushRef"
+					:node="node"
+					:input-data="inputDataPage"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
+					:run-index="runIndex"
+					:total-runs="maxRunIndex"
+					:search="search"
+				/>
+			</Suspense>
 
-			const nodeType = this.nodeType;
-			const outputs = this.getResolvedNodeOutputs();
-			const outputConfiguration = outputs?.[outputIndex] as INodeOutputConfiguration;
+			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
+				<LazyRunDataHtml :input-html="inputHtml" />
+			</Suspense>
 
-			if (outputConfiguration && isObject(outputConfiguration)) {
-				return outputConfiguration?.displayName;
-			}
-			if (!nodeType?.outputNames || nodeType.outputNames.length <= outputIndex) {
-				return outputIndex + 1;
-			}
+			<Suspense v-else-if="hasNodeRun && isSchemaView">
+				<LazyRunDataSchema
+					:nodes="nodes"
+					:mapping-enabled="mappingEnabled"
+					:node="node"
+					:data="jsonData"
+					:pane-type="paneType"
+					:connection-type="connectionType"
+					:run-index="runIndex"
+					:output-index="currentOutputIndex"
+					:total-runs="maxRunIndex"
+					:search="search"
+					:class="$style.schema"
+					@clear:search="onSearchClear"
+				/>
+			</Suspense>
 
-			return nodeType.outputNames[outputIndex];
-		},
-		refreshDataSize() {
-			// Hide by default the data from being displayed
-			this.showData = false;
-			const jsonItems = this.inputDataPage.map((item) => item.json);
-			const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
-			this.dataSize = byteSize;
-			this.updateShowData();
-		},
-		updateShowData() {
-			// Display data if it is reasonably small (< 1MB)
-			this.showData =
-				(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
-				this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
-		},
-		onRunIndexChange(run: number) {
-			this.$emit('runChange', run);
-		},
-		enableNode() {
-			if (this.node) {
-				const updateInformation = {
-					name: this.node.name,
-					properties: {
-						disabled: !this.node.disabled,
-					} as IDataObject,
-				} as INodeUpdatePropertiesInformation;
+			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
+				<n8n-text align="center" tag="div">{{
+					$locale.baseText('runData.noBinaryDataFound')
+				}}</n8n-text>
+			</div>
 
-				this.workflowsStore.updateNodeProperties(updateInformation);
-			}
-		},
-		setDisplayMode() {
-			if (!this.activeNode) return;
+			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
+				<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
+					<div v-if="binaryData.length > 1" :class="$style.binaryIndex">
+						<div>
+							{{ index + 1 }}
+						</div>
+					</div>
 
-			const shouldDisplayHtml =
-				this.activeNode.type === HTML_NODE_TYPE &&
-				this.activeNode.parameters.operation === 'generateHtmlTemplate';
+					<div :class="$style.binaryRow">
+						<div
+							v-for="(binaryData, key) in binaryDataEntry"
+							:key="index + '_' + key"
+							:class="$style.binaryCell"
+						>
+							<div :data-test-id="'ndv-binary-data_' + index">
+								<div :class="$style.binaryHeader">
+									{{ key }}
+								</div>
+								<div v-if="binaryData.fileName">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileName') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileName }}</div>
+								</div>
+								<div v-if="binaryData.directory">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.directory') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.directory }}</div>
+								</div>
+								<div v-if="binaryData.fileExtension">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileExtension') }}:</n8n-text
+										>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileExtension }}</div>
+								</div>
+								<div v-if="binaryData.mimeType">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.mimeType') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.mimeType }}</div>
+								</div>
+								<div v-if="binaryData.fileSize">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileSize') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileSize }}</div>
+								</div>
 
-			if (shouldDisplayHtml) {
-				this.ndvStore.setPanelDisplayMode({
-					pane: 'output',
-					mode: 'html',
-				});
-			}
-		},
-		activatePane() {
-			this.$emit('activatePane');
-		},
-		onSearchClear() {
-			this.search = '';
-			document.dispatchEvent(new KeyboardEvent('keyup', { key: '/' }));
-		},
-	},
-});
-</script>
+								<div :class="$style.binaryButtonContainer">
+									<n8n-button
+										v-if="isViewable(index, key)"
+										size="small"
+										:label="$locale.baseText('runData.showBinaryData')"
+										data-test-id="ndv-view-binary-data"
+										@click="displayBinaryData(index, key)"
+									/>
+									<n8n-button
+										v-if="isDownloadable(index, key)"
+										size="small"
+										type="secondary"
+										:label="$locale.baseText('runData.downloadBinaryData')"
+										data-test-id="ndv-download-binary-data"
+										@click="downloadBinaryData(index, key)"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			v-if="
+				hasNodeRun &&
+				!hasRunError &&
+				binaryData.length === 0 &&
+				dataCount > pageSize &&
+				!isSchemaView &&
+				!isArtificialRecoveredEventItem
+			"
+			v-show="!editMode.enabled"
+			:class="$style.pagination"
+			data-test-id="ndv-data-pagination"
+		>
+			<el-pagination
+				background
+				:hide-on-single-page="true"
+				:current-page="currentPage"
+				:pager-count="5"
+				:page-size="pageSize"
+				layout="prev, pager, next"
+				:total="dataCount"
+				@update:current-page="onCurrentPageChange"
+			>
+			</el-pagination>
+
+			<div :class="$style.pageSizeSelector">
+				<n8n-select
+					size="mini"
+					:model-value="pageSize"
+					teleported
+					@update:model-value="onPageSizeChange"
+				>
+					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
+					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
+					</n8n-option>
+					<n8n-option :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </n8n-option>
+				</n8n-select>
+			</div>
+		</div>
+		<n8n-block-ui :show="blockUI" :class="$style.uiBlocker" />
+	</div>
+</template>
 
 <style lang="scss" module>
 .infoIcon {
diff --git a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
index 3e2bb2da36fc0..a94bf38f8bad2 100644
--- a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
+++ b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
@@ -1,66 +1,3 @@
-<template>
-	<div :class="$style.block">
-		<header :class="$style.blockHeader" @click="onBlockHeaderClick">
-			<button :class="$style.blockToggle">
-				<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
-			</button>
-			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
-			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
-			<el-switch
-				v-if="contentParsed"
-				v-model="isShowRaw"
-				:class="$style.rawSwitch"
-				active-text="RAW JSON"
-				@click.stop
-			/>
-		</header>
-		<main
-			:class="{
-				[$style.blockContent]: true,
-				[$style.blockContentExpanded]: isExpanded,
-			}"
-		>
-			<div
-				v-for="({ parsedContent, raw }, index) in parsedRun"
-				:key="index"
-				:class="$style.contentText"
-				:data-content-type="parsedContent?.type"
-			>
-				<template v-if="parsedContent && !isShowRaw">
-					<template v-if="parsedContent.type === 'json'">
-						<VueMarkdown
-							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
-							:class="$style.markdown"
-						/>
-					</template>
-					<template v-if="parsedContent.type === 'markdown'">
-						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
-					</template>
-					<p
-						v-if="parsedContent.type === 'text'"
-						:class="$style.runText"
-						v-text="parsedContent.data"
-					/>
-				</template>
-				<!-- We weren't able to parse text or raw switch -->
-				<template v-else>
-					<div :class="$style.rawContent">
-						<n8n-icon-button
-							size="small"
-							:class="$style.copyToClipboard"
-							type="secondary"
-							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
-							icon="copy"
-							@click="onCopyToClipboard(raw)"
-						/>
-						<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
-					</div>
-				</template>
-			</div>
-		</main>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { IAiDataContent } from '@/Interface';
 import { capitalize } from 'lodash-es';
@@ -175,6 +112,69 @@ onMounted(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.block">
+		<header :class="$style.blockHeader" @click="onBlockHeaderClick">
+			<button :class="$style.blockToggle">
+				<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
+			</button>
+			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
+			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
+			<el-switch
+				v-if="contentParsed"
+				v-model="isShowRaw"
+				:class="$style.rawSwitch"
+				active-text="RAW JSON"
+				@click.stop
+			/>
+		</header>
+		<main
+			:class="{
+				[$style.blockContent]: true,
+				[$style.blockContentExpanded]: isExpanded,
+			}"
+		>
+			<div
+				v-for="({ parsedContent, raw }, index) in parsedRun"
+				:key="index"
+				:class="$style.contentText"
+				:data-content-type="parsedContent?.type"
+			>
+				<template v-if="parsedContent && !isShowRaw">
+					<template v-if="parsedContent.type === 'json'">
+						<VueMarkdown
+							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
+							:class="$style.markdown"
+						/>
+					</template>
+					<template v-if="parsedContent.type === 'markdown'">
+						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
+					</template>
+					<p
+						v-if="parsedContent.type === 'text'"
+						:class="$style.runText"
+						v-text="parsedContent.data"
+					/>
+				</template>
+				<!-- We weren't able to parse text or raw switch -->
+				<template v-else>
+					<div :class="$style.rawContent">
+						<n8n-icon-button
+							size="small"
+							:class="$style.copyToClipboard"
+							type="secondary"
+							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
+							icon="copy"
+							@click="onCopyToClipboard(raw)"
+						/>
+						<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
+					</div>
+				</template>
+			</div>
+		</main>
+	</div>
+</template>
+
 <style lang="scss" module>
 .copyToClipboard {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
index 9731ef4a9abcc..eb7de453c16dc 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
@@ -1,67 +1,3 @@
-<template>
-	<div v-if="aiData" :class="$style.container">
-		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
-			<ElTree
-				:data="executionTree"
-				:props="{ label: 'node' }"
-				default-expand-all
-				:indent="12"
-				:expand-on-click-node="false"
-				data-test-id="lm-chat-logs-tree"
-				@node-click="onItemClick"
-			>
-				<template #default="{ node, data }">
-					<div
-						:class="{
-							[$style.treeNode]: true,
-							[$style.isSelected]: isTreeNodeSelected(data),
-						}"
-						:data-tree-depth="data.depth"
-						:style="{ '--item-depth': data.depth }"
-					>
-						<button
-							v-if="data.children.length"
-							:class="$style.treeToggle"
-							@click="toggleTreeItem(node)"
-						>
-							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
-						</button>
-						<n8n-tooltip :disabled="!slim" placement="right">
-							<template #content>
-								{{ node.label }}
-							</template>
-							<span :class="$style.leafLabel">
-								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
-								<span v-if="!slim" v-text="node.label" />
-							</span>
-						</n8n-tooltip>
-					</div>
-				</template>
-			</ElTree>
-		</div>
-		<div :class="$style.runData">
-			<div v-if="selectedRun.length === 0" :class="$style.empty">
-				<n8n-text size="large">
-					{{
-						$locale.baseText('ndv.output.ai.empty', {
-							interpolate: {
-								node: props.node.name,
-							},
-						})
-					}}
-				</n8n-text>
-			</div>
-			<div
-				v-for="(data, index) in selectedRun"
-				:key="`${data.node}__${data.runIndex}__index`"
-				data-test-id="lm-chat-logs-entry"
-			>
-				<RunDataAiContent :input-data="data" :content-index="index" />
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 import { computed, ref, watch } from 'vue';
@@ -269,6 +205,70 @@ const executionTree = computed<TreeNode[]>(() => {
 watch(() => props.runIndex, selectFirst, { immediate: true });
 </script>
 
+<template>
+	<div v-if="aiData" :class="$style.container">
+		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
+			<ElTree
+				:data="executionTree"
+				:props="{ label: 'node' }"
+				default-expand-all
+				:indent="12"
+				:expand-on-click-node="false"
+				data-test-id="lm-chat-logs-tree"
+				@node-click="onItemClick"
+			>
+				<template #default="{ node, data }">
+					<div
+						:class="{
+							[$style.treeNode]: true,
+							[$style.isSelected]: isTreeNodeSelected(data),
+						}"
+						:data-tree-depth="data.depth"
+						:style="{ '--item-depth': data.depth }"
+					>
+						<button
+							v-if="data.children.length"
+							:class="$style.treeToggle"
+							@click="toggleTreeItem(node)"
+						>
+							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
+						</button>
+						<n8n-tooltip :disabled="!slim" placement="right">
+							<template #content>
+								{{ node.label }}
+							</template>
+							<span :class="$style.leafLabel">
+								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
+								<span v-if="!slim" v-text="node.label" />
+							</span>
+						</n8n-tooltip>
+					</div>
+				</template>
+			</ElTree>
+		</div>
+		<div :class="$style.runData">
+			<div v-if="selectedRun.length === 0" :class="$style.empty">
+				<n8n-text size="large">
+					{{
+						$locale.baseText('ndv.output.ai.empty', {
+							interpolate: {
+								node: props.node.name,
+							},
+						})
+					}}
+				</n8n-text>
+			</div>
+			<div
+				v-for="(data, index) in selectedRun"
+				:key="`${data.node}__${data.runIndex}__index`"
+				data-test-id="lm-chat-logs-entry"
+			>
+				<RunDataAiContent :input-data="data" :content-index="index" />
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .treeToggle {
 	border: none;
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
index 8ed80a2c46715..e7d5c3fe4e5e9 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
@@ -1,76 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<header :class="$style.header">
-			<NodeIcon
-				v-if="runMeta?.node"
-				:class="$style.nodeIcon"
-				:node-type="runMeta.node"
-				:size="20"
-			/>
-			<div :class="$style.headerWrap">
-				<p :class="$style.title">
-					{{ inputData.node }}
-				</p>
-				<ul :class="$style.meta">
-					<li v-if="runMeta?.startTimeMs">{{ runMeta?.executionTimeMs }}ms</li>
-					<li v-if="runMeta?.startTimeMs">
-						<n8n-tooltip>
-							<template #content>
-								{{ new Date(runMeta?.startTimeMs).toLocaleString() }}
-							</template>
-							{{
-								$locale.baseText('runData.aiContentBlock.startedAt', {
-									interpolate: {
-										startTime: new Date(runMeta?.startTimeMs).toLocaleTimeString(),
-									},
-								})
-							}}
-						</n8n-tooltip>
-					</li>
-					<li v-if="(consumedTokensSum?.totalTokens ?? 0) > 0" :class="$style.tokensUsage">
-						{{
-							$locale.baseText('runData.aiContentBlock.tokens', {
-								interpolate: {
-									count: formatTokenUsageCount(consumedTokensSum?.totalTokens ?? 0),
-								},
-							})
-						}}
-						<n8n-info-tip type="tooltip" theme="info-light" tooltip-placement="right">
-							<div>
-								<n8n-text :bold="true" size="small">
-									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
-									{{
-										$locale.baseText('runData.aiContentBlock.tokens', {
-											interpolate: {
-												count: formatTokenUsageCount(consumedTokensSum?.promptTokens ?? 0),
-											},
-										})
-									}}
-								</n8n-text>
-								<br />
-								<n8n-text :bold="true" size="small">
-									{{ $locale.baseText('runData.aiContentBlock.tokens.completion') }}
-									{{
-										$locale.baseText('runData.aiContentBlock.tokens', {
-											interpolate: {
-												count: formatTokenUsageCount(consumedTokensSum?.completionTokens ?? 0),
-											},
-										})
-									}}
-								</n8n-text>
-							</div>
-						</n8n-info-tip>
-					</li>
-				</ul>
-			</div>
-		</header>
-
-		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
-			<AiRunContentBlock :run-data="run" />
-		</main>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { IAiData, IAiDataContent } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -160,6 +87,79 @@ const runMeta = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<header :class="$style.header">
+			<NodeIcon
+				v-if="runMeta?.node"
+				:class="$style.nodeIcon"
+				:node-type="runMeta.node"
+				:size="20"
+			/>
+			<div :class="$style.headerWrap">
+				<p :class="$style.title">
+					{{ inputData.node }}
+				</p>
+				<ul :class="$style.meta">
+					<li v-if="runMeta?.startTimeMs">{{ runMeta?.executionTimeMs }}ms</li>
+					<li v-if="runMeta?.startTimeMs">
+						<n8n-tooltip>
+							<template #content>
+								{{ new Date(runMeta?.startTimeMs).toLocaleString() }}
+							</template>
+							{{
+								$locale.baseText('runData.aiContentBlock.startedAt', {
+									interpolate: {
+										startTime: new Date(runMeta?.startTimeMs).toLocaleTimeString(),
+									},
+								})
+							}}
+						</n8n-tooltip>
+					</li>
+					<li v-if="(consumedTokensSum?.totalTokens ?? 0) > 0" :class="$style.tokensUsage">
+						{{
+							$locale.baseText('runData.aiContentBlock.tokens', {
+								interpolate: {
+									count: formatTokenUsageCount(consumedTokensSum?.totalTokens ?? 0),
+								},
+							})
+						}}
+						<n8n-info-tip type="tooltip" theme="info-light" tooltip-placement="right">
+							<div>
+								<n8n-text :bold="true" size="small">
+									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
+									{{
+										$locale.baseText('runData.aiContentBlock.tokens', {
+											interpolate: {
+												count: formatTokenUsageCount(consumedTokensSum?.promptTokens ?? 0),
+											},
+										})
+									}}
+								</n8n-text>
+								<br />
+								<n8n-text :bold="true" size="small">
+									{{ $locale.baseText('runData.aiContentBlock.tokens.completion') }}
+									{{
+										$locale.baseText('runData.aiContentBlock.tokens', {
+											interpolate: {
+												count: formatTokenUsageCount(consumedTokensSum?.completionTokens ?? 0),
+											},
+										})
+									}}
+								</n8n-text>
+							</div>
+						</n8n-info-tip>
+					</li>
+				</ul>
+			</div>
+		</header>
+
+		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
+			<AiRunContentBlock :run-data="run" />
+		</main>
+	</div>
+</template>
+
 <style type="scss" module>
 .container {
 	padding: 0 var(--spacing-s) var(--spacing-s);
diff --git a/packages/editor-ui/src/components/RunDataHtml.vue b/packages/editor-ui/src/components/RunDataHtml.vue
index 4ac7234953347..d120a0ad06ffb 100644
--- a/packages/editor-ui/src/components/RunDataHtml.vue
+++ b/packages/editor-ui/src/components/RunDataHtml.vue
@@ -1,7 +1,3 @@
-<template>
-	<iframe class="__html-display" :srcdoc="sanitizedHtml" />
-</template>
-
 <script lang="ts">
 import sanitizeHtml, { defaults, type IOptions as SanitizeOptions } from 'sanitize-html';
 
@@ -35,6 +31,10 @@ export default {
 };
 </script>
 
+<template>
+	<iframe class="__html-display" :srcdoc="sanitizedHtml" />
+</template>
+
 <style lang="scss">
 .__html-display {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 91ee7f68c8e73..69963e10a6ed9 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -1,79 +1,3 @@
-<template>
-	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
-		<Suspense>
-			<LazyRunDataJsonActions
-				v-if="!editMode.enabled"
-				:node="node"
-				:push-ref="pushRef"
-				:display-mode="displayMode"
-				:distance-from-active="distanceFromActive"
-				:selected-json-path="selectedJsonPath"
-				:json-data="jsonData"
-				:pane-type="paneType"
-			/>
-		</Suspense>
-		<Draggable
-			type="mapping"
-			target-data-key="mappable"
-			:disabled="!mappingEnabled"
-			@dragstart="onDragStart"
-			@dragend="onDragEnd"
-		>
-			<template #preview="{ canDrop, el }">
-				<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
-			</template>
-			<VueJsonPretty
-				:data="jsonData"
-				:deep="10"
-				:show-length="true"
-				:selected-value="selectedJsonPath"
-				root-path=""
-				selectable-type="single"
-				class="json-data"
-				@update:selected-value="selectedJsonPath = $event"
-			>
-				<template #renderNodeKey="{ node }">
-					<TextWithHighlights
-						:content="getContent(node.key)"
-						:search="search"
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="node.key"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-					/>
-				</template>
-				<template #renderNodeValue="{ node }">
-					<TextWithHighlights
-						v-if="isNaN(node.index)"
-						:content="getContent(node.content)"
-						:search="search"
-					/>
-					<TextWithHighlights
-						v-else
-						:content="getContent(node.content)"
-						:search="search"
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="getListItemName(node.path)"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-						class="ph-no-capture"
-					/>
-				</template>
-			</VueJsonPretty>
-		</Draggable>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, ref } from 'vue';
 import type { PropType } from 'vue';
@@ -222,6 +146,82 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
+		<Suspense>
+			<LazyRunDataJsonActions
+				v-if="!editMode.enabled"
+				:node="node"
+				:push-ref="pushRef"
+				:display-mode="displayMode"
+				:distance-from-active="distanceFromActive"
+				:selected-json-path="selectedJsonPath"
+				:json-data="jsonData"
+				:pane-type="paneType"
+			/>
+		</Suspense>
+		<Draggable
+			type="mapping"
+			target-data-key="mappable"
+			:disabled="!mappingEnabled"
+			@dragstart="onDragStart"
+			@dragend="onDragEnd"
+		>
+			<template #preview="{ canDrop, el }">
+				<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
+			</template>
+			<VueJsonPretty
+				:data="jsonData"
+				:deep="10"
+				:show-length="true"
+				:selected-value="selectedJsonPath"
+				root-path=""
+				selectable-type="single"
+				class="json-data"
+				@update:selected-value="selectedJsonPath = $event"
+			>
+				<template #renderNodeKey="{ node }">
+					<TextWithHighlights
+						:content="getContent(node.key)"
+						:search="search"
+						data-target="mappable"
+						:data-value="getJsonParameterPath(node.path)"
+						:data-name="node.key"
+						:data-path="node.path"
+						:data-depth="node.level"
+						:class="{
+							[$style.mappable]: mappingEnabled,
+							[$style.dragged]: draggingPath === node.path,
+						}"
+					/>
+				</template>
+				<template #renderNodeValue="{ node }">
+					<TextWithHighlights
+						v-if="isNaN(node.index)"
+						:content="getContent(node.content)"
+						:search="search"
+					/>
+					<TextWithHighlights
+						v-else
+						:content="getContent(node.content)"
+						:search="search"
+						data-target="mappable"
+						:data-value="getJsonParameterPath(node.path)"
+						:data-name="getListItemName(node.path)"
+						:data-path="node.path"
+						:data-depth="node.level"
+						:class="{
+							[$style.mappable]: mappingEnabled,
+							[$style.dragged]: draggingPath === node.path,
+						}"
+						class="ph-no-capture"
+					/>
+				</template>
+			</VueJsonPretty>
+		</Draggable>
+	</div>
+</template>
+
 <style lang="scss" module>
 .jsonDisplay {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index ccdc911c1026a..41e01e1ff6065 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -1,39 +1,3 @@
-<template>
-	<div :class="$style.actionsGroup">
-		<n8n-icon-button
-			v-if="noSelection"
-			:title="i18n.baseText('runData.copyToClipboard')"
-			icon="copy"
-			type="tertiary"
-			:circle="false"
-			@click="handleCopyClick({ command: 'value' })"
-		/>
-		<el-dropdown v-else trigger="click" @command="handleCopyClick">
-			<span class="el-dropdown-link">
-				<n8n-icon-button
-					:title="i18n.baseText('runData.copyToClipboard')"
-					icon="copy"
-					type="tertiary"
-					:circle="false"
-				/>
-			</span>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item :command="{ command: 'value' }">
-						{{ i18n.baseText('runData.copyValue') }}
-					</el-dropdown-item>
-					<el-dropdown-item :command="{ command: 'itemPath' }" divided>
-						{{ i18n.baseText('runData.copyItemPath') }}
-					</el-dropdown-item>
-					<el-dropdown-item :command="{ command: 'parameterPath' }">
-						{{ i18n.baseText('runData.copyParameterPath') }}
-					</el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -238,6 +202,42 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.actionsGroup">
+		<n8n-icon-button
+			v-if="noSelection"
+			:title="i18n.baseText('runData.copyToClipboard')"
+			icon="copy"
+			type="tertiary"
+			:circle="false"
+			@click="handleCopyClick({ command: 'value' })"
+		/>
+		<el-dropdown v-else trigger="click" @command="handleCopyClick">
+			<span class="el-dropdown-link">
+				<n8n-icon-button
+					:title="i18n.baseText('runData.copyToClipboard')"
+					icon="copy"
+					type="tertiary"
+					:circle="false"
+				/>
+			</span>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item :command="{ command: 'value' }">
+						{{ i18n.baseText('runData.copyValue') }}
+					</el-dropdown-item>
+					<el-dropdown-item :command="{ command: 'itemPath' }" divided>
+						{{ i18n.baseText('runData.copyItemPath') }}
+					</el-dropdown-item>
+					<el-dropdown-item :command="{ command: 'parameterPath' }">
+						{{ i18n.baseText('runData.copyParameterPath') }}
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
+</template>
+
 <style lang="scss" module>
 .actionsGroup {
 	position: sticky;
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 21a1530919ae1..67f0ecea1d321 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -1,166 +1,3 @@
-<template>
-	<div :class="[$style.dataDisplay, { [$style.highlight]: highlight }]">
-		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
-			<tr>
-				<th :class="$style.emptyCell"></th>
-				<th :class="$style.tableRightMargin"></th>
-			</tr>
-			<tr
-				v-for="(_, index1) in tableData.data"
-				:key="index1"
-				:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
-			>
-				<td
-					:data-row="index1"
-					:data-col="0"
-					@mouseenter="onMouseEnterCell"
-					@mouseleave="onMouseLeaveCell"
-				>
-					<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
-				</td>
-				<td :class="$style.tableRightMargin"></td>
-			</tr>
-		</table>
-		<table v-else :class="$style.table">
-			<thead>
-				<tr>
-					<th v-for="(column, i) in tableData.columns || []" :key="column">
-						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
-							<template #content>
-								<div>
-									<img src="/static/data-mapping-gif.gif" />
-									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
-								</div>
-							</template>
-							<Draggable
-								type="mapping"
-								:data="getExpression(column)"
-								:disabled="!mappingEnabled"
-								@dragstart="onDragStart"
-								@dragend="(column) => onDragEnd(column?.textContent ?? '', 'column')"
-							>
-								<template #preview="{ canDrop }">
-									<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
-								</template>
-								<template #default="{ isDragging }">
-									<div
-										:class="{
-											[$style.header]: true,
-											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]:
-												(i === activeColumn || forceShowGrip) && mappingEnabled,
-											[$style.draggingHeader]: isDragging,
-										}"
-									>
-										<TextWithHighlights
-											:content="getValueToRender(column || '')"
-											:search="search"
-										/>
-										<div :class="$style.dragButton">
-											<font-awesome-icon icon="grip-vertical" />
-										</div>
-									</div>
-								</template>
-							</Draggable>
-						</n8n-tooltip>
-					</th>
-					<th v-if="columnLimitExceeded" :class="$style.header">
-						<n8n-tooltip placement="bottom-end">
-							<template #content>
-								<div>
-									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
-										<template #columnLimit>{{ columnLimit }}</template>
-										<template #link>
-											<a @click="switchToJsonView">{{
-												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
-											}}</a>
-										</template>
-									</i18n-t>
-								</div>
-							</template>
-							<span>
-								<font-awesome-icon
-									:class="$style['warningTooltip']"
-									icon="exclamation-triangle"
-								></font-awesome-icon>
-								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
-							</span>
-						</n8n-tooltip>
-					</th>
-					<th :class="$style.tableRightMargin"></th>
-				</tr>
-			</thead>
-			<Draggable
-				ref="draggable"
-				tag="tbody"
-				type="mapping"
-				target-data-key="mappable"
-				:disabled="!mappingEnabled"
-				@dragstart="onCellDragStart"
-				@dragend="onCellDragEnd"
-			>
-				<template #preview="{ canDrop, el }">
-					<MappingPill
-						:html="shorten(getPathNameFromTarget(el) || '', 16, 2)"
-						:can-drop="canDrop"
-					/>
-				</template>
-				<tr
-					v-for="(row, index1) in tableData.data"
-					:key="index1"
-					:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
-					:data-test-id="isHoveringRow(index1) ? 'hovering-item' : undefined"
-				>
-					<td
-						v-for="(data, index2) in row"
-						:key="index2"
-						:data-row="index1"
-						:data-col="index2"
-						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
-						@mouseenter="onMouseEnterCell"
-						@mouseleave="onMouseLeaveCell"
-					>
-						<TextWithHighlights
-							v-if="isSimple(data)"
-							:content="getValueToRender(data)"
-							:search="search"
-							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
-						/>
-						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
-							<template #label="{ label, path }">
-								<span
-									:class="{
-										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
-										[$style.draggingKey]: isDraggingKey(path, index2),
-										[$style.dataKey]: true,
-										[$style.mappable]: mappingEnabled,
-									}"
-									data-target="mappable"
-									:data-name="getCellPathName(path, index2)"
-									:data-value="getCellExpression(path, index2)"
-									:data-depth="path.length"
-									@mouseenter="() => onMouseEnterKey(path, index2)"
-									@mouseleave="onMouseLeaveKey"
-									>{{ label || $locale.baseText('runData.unnamedField') }}</span
-								>
-							</template>
-							<template #value="{ value }">
-								<TextWithHighlights
-									:content="getValueToRender(value)"
-									:search="search"
-									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
-								/>
-							</template>
-						</n8n-tree>
-					</td>
-					<td v-if="columnLimitExceeded"></td>
-					<td :class="$style.tableRightMargin"></td>
-				</tr>
-			</Draggable>
-		</table>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -550,6 +387,169 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="[$style.dataDisplay, { [$style.highlight]: highlight }]">
+		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
+			<tr>
+				<th :class="$style.emptyCell"></th>
+				<th :class="$style.tableRightMargin"></th>
+			</tr>
+			<tr
+				v-for="(_, index1) in tableData.data"
+				:key="index1"
+				:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
+			>
+				<td
+					:data-row="index1"
+					:data-col="0"
+					@mouseenter="onMouseEnterCell"
+					@mouseleave="onMouseLeaveCell"
+				>
+					<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
+				</td>
+				<td :class="$style.tableRightMargin"></td>
+			</tr>
+		</table>
+		<table v-else :class="$style.table">
+			<thead>
+				<tr>
+					<th v-for="(column, i) in tableData.columns || []" :key="column">
+						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
+							<template #content>
+								<div>
+									<img src="/static/data-mapping-gif.gif" />
+									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+								</div>
+							</template>
+							<Draggable
+								type="mapping"
+								:data="getExpression(column)"
+								:disabled="!mappingEnabled"
+								@dragstart="onDragStart"
+								@dragend="(column) => onDragEnd(column?.textContent ?? '', 'column')"
+							>
+								<template #preview="{ canDrop }">
+									<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
+								</template>
+								<template #default="{ isDragging }">
+									<div
+										:class="{
+											[$style.header]: true,
+											[$style.draggableHeader]: mappingEnabled,
+											[$style.activeHeader]:
+												(i === activeColumn || forceShowGrip) && mappingEnabled,
+											[$style.draggingHeader]: isDragging,
+										}"
+									>
+										<TextWithHighlights
+											:content="getValueToRender(column || '')"
+											:search="search"
+										/>
+										<div :class="$style.dragButton">
+											<font-awesome-icon icon="grip-vertical" />
+										</div>
+									</div>
+								</template>
+							</Draggable>
+						</n8n-tooltip>
+					</th>
+					<th v-if="columnLimitExceeded" :class="$style.header">
+						<n8n-tooltip placement="bottom-end">
+							<template #content>
+								<div>
+									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
+										<template #columnLimit>{{ columnLimit }}</template>
+										<template #link>
+											<a @click="switchToJsonView">{{
+												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
+											}}</a>
+										</template>
+									</i18n-t>
+								</div>
+							</template>
+							<span>
+								<font-awesome-icon
+									:class="$style['warningTooltip']"
+									icon="exclamation-triangle"
+								></font-awesome-icon>
+								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
+							</span>
+						</n8n-tooltip>
+					</th>
+					<th :class="$style.tableRightMargin"></th>
+				</tr>
+			</thead>
+			<Draggable
+				ref="draggable"
+				tag="tbody"
+				type="mapping"
+				target-data-key="mappable"
+				:disabled="!mappingEnabled"
+				@dragstart="onCellDragStart"
+				@dragend="onCellDragEnd"
+			>
+				<template #preview="{ canDrop, el }">
+					<MappingPill
+						:html="shorten(getPathNameFromTarget(el) || '', 16, 2)"
+						:can-drop="canDrop"
+					/>
+				</template>
+				<tr
+					v-for="(row, index1) in tableData.data"
+					:key="index1"
+					:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
+					:data-test-id="isHoveringRow(index1) ? 'hovering-item' : undefined"
+				>
+					<td
+						v-for="(data, index2) in row"
+						:key="index2"
+						:data-row="index1"
+						:data-col="index2"
+						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
+						@mouseenter="onMouseEnterCell"
+						@mouseleave="onMouseLeaveCell"
+					>
+						<TextWithHighlights
+							v-if="isSimple(data)"
+							:content="getValueToRender(data)"
+							:search="search"
+							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
+						/>
+						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
+							<template #label="{ label, path }">
+								<span
+									:class="{
+										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
+										[$style.draggingKey]: isDraggingKey(path, index2),
+										[$style.dataKey]: true,
+										[$style.mappable]: mappingEnabled,
+									}"
+									data-target="mappable"
+									:data-name="getCellPathName(path, index2)"
+									:data-value="getCellExpression(path, index2)"
+									:data-depth="path.length"
+									@mouseenter="() => onMouseEnterKey(path, index2)"
+									@mouseleave="onMouseLeaveKey"
+									>{{ label || $locale.baseText('runData.unnamedField') }}</span
+								>
+							</template>
+							<template #value="{ value }">
+								<TextWithHighlights
+									:content="getValueToRender(value)"
+									:search="search"
+									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
+								/>
+							</template>
+						</n8n-tree>
+					</td>
+					<td v-if="columnLimitExceeded"></td>
+					<td :class="$style.tableRightMargin"></td>
+				</tr>
+			</Draggable>
+		</table>
+	</div>
+</template>
+
 <style lang="scss" module>
 .dataDisplay {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 24a4f3675b388..92db3caa80266 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,3 +1,36 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { ITaskData } from 'n8n-workflow';
+import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
+
+export default defineComponent({
+	props: {
+		taskData: {}, // ITaskData
+		hasStaleData: Boolean,
+		hasPinData: Boolean,
+	},
+
+	computed: {
+		theme(): string {
+			return this.runTaskData?.error ? 'danger' : 'success';
+		},
+		runTaskData(): ITaskData {
+			return this.taskData as ITaskData;
+		},
+		runMetadata(): { executionTime: number; startTime: string } | null {
+			if (!this.runTaskData) {
+				return null;
+			}
+			const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
+			return {
+				executionTime: this.runTaskData.executionTime,
+				startTime: `${date} at ${time}`,
+			};
+		},
+	},
+});
+</script>
+
 <template>
 	<n8n-info-tip
 		v-if="hasStaleData"
@@ -42,36 +75,3 @@
 		</div>
 	</n8n-info-tip>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { ITaskData } from 'n8n-workflow';
-import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
-
-export default defineComponent({
-	props: {
-		taskData: {}, // ITaskData
-		hasStaleData: Boolean,
-		hasPinData: Boolean,
-	},
-
-	computed: {
-		theme(): string {
-			return this.runTaskData?.error ? 'danger' : 'success';
-		},
-		runTaskData(): ITaskData {
-			return this.taskData as ITaskData;
-		},
-		runMetadata(): { executionTime: number; startTime: string } | null {
-			if (!this.runTaskData) {
-				return null;
-			}
-			const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
-			return {
-				executionTime: this.runTaskData.executionTime,
-				startTime: `${date} at ${time}`,
-			};
-		},
-	},
-});
-</script>
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
index a032f655ede11..e98b139b21f29 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
@@ -1,50 +1,3 @@
-<template>
-	<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
-		<template #header>
-			<div>
-				<n8n-heading tag="h2" bold :class="$style.cardHeading">
-					{{ destination.label }}
-				</n8n-heading>
-				<div :class="$style.cardDescription">
-					<n8n-text color="text-light" size="small">
-						<span>{{ $locale.baseText(typeLabelName) }}</span>
-					</n8n-text>
-				</div>
-			</div>
-		</template>
-		<template #append>
-			<div ref="cardActions" :class="$style.cardActions">
-				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
-					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
-						{{ $locale.baseText('workflowActivator.active') }}
-					</n8n-text>
-					<n8n-text v-else color="text-base" size="small" bold>
-						{{ $locale.baseText('workflowActivator.inactive') }}
-					</n8n-text>
-				</div>
-
-				<el-switch
-					class="mr-s"
-					:disabled="readonly"
-					:model-value="nodeParameters.enabled"
-					:title="
-						nodeParameters.enabled
-							? $locale.baseText('workflowActivator.deactivateWorkflow')
-							: $locale.baseText('workflowActivator.activateWorkflow')
-					"
-					active-color="#13ce66"
-					inactive-color="#8899AA"
-					data-test-id="workflow-activate-switch"
-					@update:model-value="onEnabledSwitched($event)"
-				>
-				</el-switch>
-
-				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
-			</div>
-		</template>
-	</n8n-card>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
@@ -178,6 +131,53 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
+		<template #header>
+			<div>
+				<n8n-heading tag="h2" bold :class="$style.cardHeading">
+					{{ destination.label }}
+				</n8n-heading>
+				<div :class="$style.cardDescription">
+					<n8n-text color="text-light" size="small">
+						<span>{{ $locale.baseText(typeLabelName) }}</span>
+					</n8n-text>
+				</div>
+			</div>
+		</template>
+		<template #append>
+			<div ref="cardActions" :class="$style.cardActions">
+				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
+					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
+						{{ $locale.baseText('workflowActivator.active') }}
+					</n8n-text>
+					<n8n-text v-else color="text-base" size="small" bold>
+						{{ $locale.baseText('workflowActivator.inactive') }}
+					</n8n-text>
+				</div>
+
+				<el-switch
+					class="mr-s"
+					:disabled="readonly"
+					:model-value="nodeParameters.enabled"
+					:title="
+						nodeParameters.enabled
+							? $locale.baseText('workflowActivator.deactivateWorkflow')
+							: $locale.baseText('workflowActivator.activateWorkflow')
+					"
+					active-color="#13ce66"
+					inactive-color="#8899AA"
+					data-test-id="workflow-activate-switch"
+					@update:model-value="onEnabledSwitched($event)"
+				>
+				</el-switch>
+
+				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
+			</div>
+		</template>
+	</n8n-card>
+</template>
+
 <style lang="scss" module>
 .cardLink {
 	transition: box-shadow 0.3s ease;
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
index 854f4a51bec9e..4d6e23cf8bd50 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -1,171 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:event-bus="modalBus"
-		:before-close="onModalClose"
-		:scrollable="true"
-		:center="true"
-		:loading="loading"
-		:min-width="isTypeAbstract ? '460px' : '70%'"
-		:max-width="isTypeAbstract ? '460px' : '70%'"
-		:min-height="isTypeAbstract ? '160px' : '650px'"
-		:max-height="isTypeAbstract ? '300px' : '650px'"
-		data-test-id="destination-modal"
-	>
-		<template #header>
-			<template v-if="isTypeAbstract">
-				<div :class="$style.headerCreate">
-					<span>Add new destination</span>
-				</div>
-			</template>
-			<template v-else>
-				<div :class="$style.header">
-					<div :class="$style.destinationInfo">
-						<InlineNameEdit
-							:model-value="headerLabel"
-							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
-							:readonly="isTypeAbstract"
-							type="Credential"
-							data-test-id="subtitle-showing-type"
-							@update:model-value="onLabelChange"
-						/>
-					</div>
-					<div :class="$style.destinationActions">
-						<n8n-button
-							v-if="nodeParameters && hasOnceBeenSaved && unchanged"
-							:icon="testMessageSent ? (testMessageResult ? 'check' : 'exclamation-triangle') : ''"
-							:title="
-								testMessageSent && testMessageResult
-									? 'Event sent and returned OK'
-									: 'Event returned with error'
-							"
-							type="tertiary"
-							label="Send Test-Event"
-							:disabled="!hasOnceBeenSaved || !unchanged"
-							data-test-id="destination-test-button"
-							@click="sendTestEvent"
-						/>
-						<template v-if="canManageLogStreaming">
-							<n8n-icon-button
-								v-if="nodeParameters && hasOnceBeenSaved"
-								:title="$locale.baseText('settings.log-streaming.delete')"
-								icon="trash"
-								type="tertiary"
-								:disabled="isSaving"
-								:loading="isDeleting"
-								data-test-id="destination-delete-button"
-								@click="removeThis"
-							/>
-							<SaveButton
-								:saved="unchanged && hasOnceBeenSaved"
-								:disabled="isTypeAbstract || unchanged"
-								:saving-label="$locale.baseText('settings.log-streaming.saving')"
-								data-test-id="destination-save-button"
-								@click="saveDestination"
-							/>
-						</template>
-					</div>
-				</div>
-				<hr />
-			</template>
-		</template>
-		<template #content>
-			<div :class="$style.container">
-				<template v-if="isTypeAbstract">
-					<n8n-input-label
-						:class="$style.typeSelector"
-						:label="$locale.baseText('settings.log-streaming.selecttype')"
-						:tooltip-text="$locale.baseText('settings.log-streaming.selecttypehint')"
-						:bold="false"
-						size="medium"
-						:underline="false"
-					>
-						<n8n-select
-							ref="typeSelectRef"
-							:model-value="typeSelectValue"
-							:placeholder="typeSelectPlaceholder"
-							data-test-id="select-destination-type"
-							name="name"
-							@update:model-value="onTypeSelectInput"
-						>
-							<n8n-option
-								v-for="option in typeSelectOptions || []"
-								:key="option.value"
-								:value="option.value"
-								:label="$locale.baseText(option.label)"
-							/>
-						</n8n-select>
-						<div class="mt-m text-right">
-							<n8n-button
-								size="large"
-								data-test-id="select-destination-button"
-								:disabled="!typeSelectValue"
-								@click="onContinueAddClicked"
-							>
-								{{ $locale.baseText(`settings.log-streaming.continue`) }}
-							</n8n-button>
-						</div>
-					</n8n-input-label>
-				</template>
-				<template v-else>
-					<div :class="$style.sidebar">
-						<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
-					</div>
-					<div v-if="activeTab === 'settings'" ref="content" :class="$style.mainContent">
-						<template v-if="isTypeWebhook">
-							<ParameterInputList
-								:parameters="webhookDescription"
-								:hide-delete="true"
-								:node-values="nodeParameters"
-								:is-read-only="!canManageLogStreaming"
-								path=""
-								@value-changed="valueChanged"
-							/>
-						</template>
-						<template v-else-if="isTypeSyslog">
-							<ParameterInputList
-								:parameters="syslogDescription"
-								:hide-delete="true"
-								:node-values="nodeParameters"
-								:is-read-only="!canManageLogStreaming"
-								path=""
-								@value-changed="valueChanged"
-							/>
-						</template>
-						<template v-else-if="isTypeSentry">
-							<ParameterInputList
-								:parameters="sentryDescription"
-								:hide-delete="true"
-								:node-values="nodeParameters"
-								:is-read-only="!canManageLogStreaming"
-								path=""
-								@value-changed="valueChanged"
-							/>
-						</template>
-					</div>
-					<div v-if="activeTab === 'events'" :class="$style.mainContent">
-						<div class="">
-							<n8n-input-label
-								class="mb-m mt-m"
-								:label="$locale.baseText('settings.log-streaming.tab.events.title')"
-								:bold="true"
-								size="medium"
-								:underline="false"
-							/>
-							<EventSelection
-								:destination-id="destination.id"
-								:readonly="!canManageLogStreaming"
-								@input="onInput"
-								@change="valueChanged"
-							/>
-						</div>
-					</div>
-				</template>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { get, set, unset } from 'lodash-es';
 import { mapStores } from 'pinia';
@@ -521,6 +353,174 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:before-close="onModalClose"
+		:scrollable="true"
+		:center="true"
+		:loading="loading"
+		:min-width="isTypeAbstract ? '460px' : '70%'"
+		:max-width="isTypeAbstract ? '460px' : '70%'"
+		:min-height="isTypeAbstract ? '160px' : '650px'"
+		:max-height="isTypeAbstract ? '300px' : '650px'"
+		data-test-id="destination-modal"
+	>
+		<template #header>
+			<template v-if="isTypeAbstract">
+				<div :class="$style.headerCreate">
+					<span>Add new destination</span>
+				</div>
+			</template>
+			<template v-else>
+				<div :class="$style.header">
+					<div :class="$style.destinationInfo">
+						<InlineNameEdit
+							:model-value="headerLabel"
+							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
+							:readonly="isTypeAbstract"
+							type="Credential"
+							data-test-id="subtitle-showing-type"
+							@update:model-value="onLabelChange"
+						/>
+					</div>
+					<div :class="$style.destinationActions">
+						<n8n-button
+							v-if="nodeParameters && hasOnceBeenSaved && unchanged"
+							:icon="testMessageSent ? (testMessageResult ? 'check' : 'exclamation-triangle') : ''"
+							:title="
+								testMessageSent && testMessageResult
+									? 'Event sent and returned OK'
+									: 'Event returned with error'
+							"
+							type="tertiary"
+							label="Send Test-Event"
+							:disabled="!hasOnceBeenSaved || !unchanged"
+							data-test-id="destination-test-button"
+							@click="sendTestEvent"
+						/>
+						<template v-if="canManageLogStreaming">
+							<n8n-icon-button
+								v-if="nodeParameters && hasOnceBeenSaved"
+								:title="$locale.baseText('settings.log-streaming.delete')"
+								icon="trash"
+								type="tertiary"
+								:disabled="isSaving"
+								:loading="isDeleting"
+								data-test-id="destination-delete-button"
+								@click="removeThis"
+							/>
+							<SaveButton
+								:saved="unchanged && hasOnceBeenSaved"
+								:disabled="isTypeAbstract || unchanged"
+								:saving-label="$locale.baseText('settings.log-streaming.saving')"
+								data-test-id="destination-save-button"
+								@click="saveDestination"
+							/>
+						</template>
+					</div>
+				</div>
+				<hr />
+			</template>
+		</template>
+		<template #content>
+			<div :class="$style.container">
+				<template v-if="isTypeAbstract">
+					<n8n-input-label
+						:class="$style.typeSelector"
+						:label="$locale.baseText('settings.log-streaming.selecttype')"
+						:tooltip-text="$locale.baseText('settings.log-streaming.selecttypehint')"
+						:bold="false"
+						size="medium"
+						:underline="false"
+					>
+						<n8n-select
+							ref="typeSelectRef"
+							:model-value="typeSelectValue"
+							:placeholder="typeSelectPlaceholder"
+							data-test-id="select-destination-type"
+							name="name"
+							@update:model-value="onTypeSelectInput"
+						>
+							<n8n-option
+								v-for="option in typeSelectOptions || []"
+								:key="option.value"
+								:value="option.value"
+								:label="$locale.baseText(option.label)"
+							/>
+						</n8n-select>
+						<div class="mt-m text-right">
+							<n8n-button
+								size="large"
+								data-test-id="select-destination-button"
+								:disabled="!typeSelectValue"
+								@click="onContinueAddClicked"
+							>
+								{{ $locale.baseText(`settings.log-streaming.continue`) }}
+							</n8n-button>
+						</div>
+					</n8n-input-label>
+				</template>
+				<template v-else>
+					<div :class="$style.sidebar">
+						<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
+					</div>
+					<div v-if="activeTab === 'settings'" ref="content" :class="$style.mainContent">
+						<template v-if="isTypeWebhook">
+							<ParameterInputList
+								:parameters="webhookDescription"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
+								path=""
+								@value-changed="valueChanged"
+							/>
+						</template>
+						<template v-else-if="isTypeSyslog">
+							<ParameterInputList
+								:parameters="syslogDescription"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
+								path=""
+								@value-changed="valueChanged"
+							/>
+						</template>
+						<template v-else-if="isTypeSentry">
+							<ParameterInputList
+								:parameters="sentryDescription"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
+								path=""
+								@value-changed="valueChanged"
+							/>
+						</template>
+					</div>
+					<div v-if="activeTab === 'events'" :class="$style.mainContent">
+						<div class="">
+							<n8n-input-label
+								class="mb-m mt-m"
+								:label="$locale.baseText('settings.log-streaming.tab.events.title')"
+								:bold="true"
+								size="medium"
+								:underline="false"
+							/>
+							<EventSelection
+								:destination-id="destination.id"
+								:readonly="!canManageLogStreaming"
+								@input="onInput"
+								@change="valueChanged"
+							/>
+						</div>
+					</div>
+				</template>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .labelMargins {
 	margin-bottom: 1em;
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
index c16bce7403d54..9a1591809c415 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
@@ -1,3 +1,59 @@
+<script lang="ts">
+import { ElCheckbox as Checkbox, type CheckboxValueType } from 'element-plus';
+import { mapStores } from 'pinia';
+import type { BaseTextKey } from '@/plugins/i18n';
+import { useLogStreamingStore } from '@/stores/logStreaming.store';
+
+export default {
+	name: 'EventSelection',
+	components: {
+		Checkbox,
+	},
+	props: {
+		destinationId: {
+			type: String,
+			default: 'defaultDestinationId',
+		},
+		readonly: Boolean,
+	},
+	data() {
+		return {
+			unchanged: true,
+		};
+	},
+	computed: {
+		...mapStores(useLogStreamingStore),
+		anonymizeAuditMessages() {
+			return this.logStreamingStore.items[this.destinationId]?.destination.anonymizeAuditMessages;
+		},
+	},
+	methods: {
+		onInput() {
+			this.$emit('input');
+		},
+		onCheckboxChecked(eventName: string, checked: CheckboxValueType) {
+			this.logStreamingStore.setSelectedInGroup(this.destinationId, eventName, Boolean(checked));
+			this.$forceUpdate();
+		},
+		anonymizeAuditMessagesChanged(value: CheckboxValueType) {
+			this.logStreamingStore.items[this.destinationId].destination.anonymizeAuditMessages =
+				Boolean(value);
+			this.$emit('change', { name: 'anonymizeAuditMessages', node: this.destinationId, value });
+			this.$forceUpdate();
+		},
+		groupLabelName(t: string): string {
+			return this.$locale.baseText(`settings.log-streaming.eventGroup.${t}` as BaseTextKey) ?? t;
+		},
+		groupLabelInfo(t: string): string | undefined {
+			const labelInfo = `settings.log-streaming.eventGroup.${t}.info`;
+			const infoText = this.$locale.baseText(labelInfo as BaseTextKey);
+			if (infoText === labelInfo || infoText === '') return;
+			return infoText;
+		},
+	},
+};
+</script>
+
 <template>
 	<div>
 		<div
@@ -68,62 +124,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { ElCheckbox as Checkbox, type CheckboxValueType } from 'element-plus';
-import { mapStores } from 'pinia';
-import type { BaseTextKey } from '@/plugins/i18n';
-import { useLogStreamingStore } from '@/stores/logStreaming.store';
-
-export default {
-	name: 'EventSelection',
-	components: {
-		Checkbox,
-	},
-	props: {
-		destinationId: {
-			type: String,
-			default: 'defaultDestinationId',
-		},
-		readonly: Boolean,
-	},
-	data() {
-		return {
-			unchanged: true,
-		};
-	},
-	computed: {
-		...mapStores(useLogStreamingStore),
-		anonymizeAuditMessages() {
-			return this.logStreamingStore.items[this.destinationId]?.destination.anonymizeAuditMessages;
-		},
-	},
-	methods: {
-		onInput() {
-			this.$emit('input');
-		},
-		onCheckboxChecked(eventName: string, checked: CheckboxValueType) {
-			this.logStreamingStore.setSelectedInGroup(this.destinationId, eventName, Boolean(checked));
-			this.$forceUpdate();
-		},
-		anonymizeAuditMessagesChanged(value: CheckboxValueType) {
-			this.logStreamingStore.items[this.destinationId].destination.anonymizeAuditMessages =
-				Boolean(value);
-			this.$emit('change', { name: 'anonymizeAuditMessages', node: this.destinationId, value });
-			this.$forceUpdate();
-		},
-		groupLabelName(t: string): string {
-			return this.$locale.baseText(`settings.log-streaming.eventGroup.${t}` as BaseTextKey) ?? t;
-		},
-		groupLabelInfo(t: string): string | undefined {
-			const labelInfo = `settings.log-streaming.eventGroup.${t}.info`;
-			const infoText = this.$locale.baseText(labelInfo as BaseTextKey);
-			if (infoText === labelInfo || infoText === '') return;
-			return infoText;
-		},
-	},
-};
-</script>
-
 <style lang="scss" module>
 .eventListCard {
 	margin-left: 1em;
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 127e8849acb07..7fa3b8834180d 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -1,25 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
-			<template #header>
-				<div :class="$style.returnButton" data-test-id="settings-back" @click="$emit('return')">
-					<i class="mr-xs">
-						<font-awesome-icon icon="arrow-left" />
-					</i>
-					<n8n-heading size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
-				</div>
-			</template>
-			<template #menuSuffix>
-				<div :class="$style.versionContainer">
-					<n8n-link size="small" @click="onVersionClick">
-						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
-					</n8n-link>
-				</div>
-			</template>
-		</n8n-menu>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -216,6 +194,28 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
+			<template #header>
+				<div :class="$style.returnButton" data-test-id="settings-back" @click="$emit('return')">
+					<i class="mr-xs">
+						<font-awesome-icon icon="arrow-left" />
+					</i>
+					<n8n-heading size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+				</div>
+			</template>
+			<template #menuSuffix>
+				<div :class="$style.versionContainer">
+					<n8n-link size="small" @click="onVersionClick">
+						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
+					</n8n-link>
+				</div>
+			</template>
+		</n8n-menu>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	min-width: $sidebar-expanded-width;
diff --git a/packages/editor-ui/src/components/ShortenName.vue b/packages/editor-ui/src/components/ShortenName.vue
index 109773cce7061..29ad2fd95c727 100644
--- a/packages/editor-ui/src/components/ShortenName.vue
+++ b/packages/editor-ui/src/components/ShortenName.vue
@@ -1,9 +1,3 @@
-<template>
-	<span :title="name" :data-test-id="testId">
-		<slot :shortened-name="shortenedName"></slot>
-	</span>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import { shorten } from '@/utils/typesUtils';
@@ -25,3 +19,9 @@ const shortenedName = computed(() =>
 	shorten(props.name, props.limit, WORKFLOW_NAME_END_COUNT_TO_KEEP),
 );
 </script>
+
+<template>
+	<span :title="name" :data-test-id="testId">
+		<slot :shortened-name="shortenedName"></slot>
+	</span>
+</template>
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index 06ec2606b4067..3b6766822bbc4 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -1,16 +1,3 @@
-<template>
-	<div :class="$style.sqlEditor">
-		<div ref="sqlEditor" :class="$style.codemirror" data-test-id="sql-editor-container"></div>
-		<slot name="suffix" />
-		<InlineExpressionEditorOutput
-			v-if="!fullscreen"
-			:segments="segments"
-			:is-read-only="isReadOnly"
-			:visible="hasFocus"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import InlineExpressionEditorOutput from '@/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue';
 import { codeNodeEditorEventBus } from '@/event-bus';
@@ -193,6 +180,19 @@ function highlightLine(lineNumber: number | 'final') {
 }
 </script>
 
+<template>
+	<div :class="$style.sqlEditor">
+		<div ref="sqlEditor" :class="$style.codemirror" data-test-id="sql-editor-container"></div>
+		<slot name="suffix" />
+		<InlineExpressionEditorOutput
+			v-if="!fullscreen"
+			:segments="segments"
+			:is-read-only="isReadOnly"
+			:visible="hasFocus"
+		/>
+	</div>
+</template>
+
 <style module lang="scss">
 .sqlEditor {
 	position: relative;
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 8c2cd1fdd31f8..9888d6253d95e 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -1,109 +1,3 @@
-<template>
-	<div
-		:id="nodeId"
-		:ref="data?.name"
-		class="sticky-wrapper"
-		:style="stickyPosition"
-		:data-name="data?.name"
-		data-test-id="sticky"
-	>
-		<div
-			:class="{
-				'sticky-default': true,
-				'touch-active': isTouchActive,
-				'is-touch-device': deviceSupport.isTouchDevice,
-				'is-read-only': isReadOnly,
-			}"
-			:style="stickySize"
-		>
-			<div v-show="isSelected" class="select-sticky-background" />
-			<div
-				v-touch:start="touchStart"
-				v-touch:end="touchEnd"
-				class="sticky-box"
-				@click.left="mouseLeftClick"
-				@contextmenu="onContextMenu"
-			>
-				<N8nResizeableSticky
-					v-if="node"
-					:id="node.id"
-					:model-value="node.parameters.content"
-					:height="node.parameters.height"
-					:width="node.parameters.width"
-					:scale="nodeViewScale"
-					:background-color="node.parameters.color"
-					:read-only="isReadOnly"
-					:default-text="defaultText"
-					:edit-mode="isActive && !isReadOnly"
-					:grid-size="gridSize"
-					@edit="onEdit"
-					@resizestart="onResizeStart"
-					@resize="onResize"
-					@resizeend="onResizeEnd"
-					@markdown-click="onMarkdownClick"
-					@update:model-value="onInputChange"
-				/>
-			</div>
-
-			<div
-				v-show="showActions"
-				ref="stickOptions"
-				:class="{ 'sticky-options': true, 'no-select-on-click': true, 'force-show': forceActions }"
-			>
-				<div
-					v-touch:tap="deleteNode"
-					class="option"
-					data-test-id="delete-sticky"
-					:title="$locale.baseText('node.delete')"
-				>
-					<font-awesome-icon icon="trash" />
-				</div>
-				<n8n-popover
-					effect="dark"
-					trigger="click"
-					placement="top"
-					:popper-style="{ width: '208px' }"
-					:visible="isColorPopoverVisible"
-					@show="onShowPopover"
-					@hide="onHidePopover"
-				>
-					<template #reference>
-						<div
-							class="option"
-							data-test-id="change-sticky-color"
-							:title="$locale.baseText('node.changeColor')"
-							@click="() => setColorPopoverVisible(!isColorPopoverVisible)"
-						>
-							<font-awesome-icon icon="palette" />
-						</div>
-					</template>
-					<div class="content">
-						<div
-							v-for="(_, index) in Array.from({ length: 7 })"
-							:key="index"
-							class="color"
-							data-test-id="color"
-							:class="`sticky-color-${index + 1}`"
-							:style="{
-								'border-width': '1px',
-								'border-style': 'solid',
-								'border-color': 'var(--color-foreground-xdark)',
-								'background-color': `var(--color-sticky-background-${index + 1})`,
-								'box-shadow':
-									(index === 0 && node?.parameters.color === '') ||
-									index + 1 === node?.parameters.color
-										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
-										: 'none',
-							}"
-							@click="changeColor(index + 1)"
-						></div>
-					</div>
-				</n8n-popover>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import type { PropType, StyleValue } from 'vue';
@@ -440,6 +334,112 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:id="nodeId"
+		:ref="data?.name"
+		class="sticky-wrapper"
+		:style="stickyPosition"
+		:data-name="data?.name"
+		data-test-id="sticky"
+	>
+		<div
+			:class="{
+				'sticky-default': true,
+				'touch-active': isTouchActive,
+				'is-touch-device': deviceSupport.isTouchDevice,
+				'is-read-only': isReadOnly,
+			}"
+			:style="stickySize"
+		>
+			<div v-show="isSelected" class="select-sticky-background" />
+			<div
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
+				class="sticky-box"
+				@click.left="mouseLeftClick"
+				@contextmenu="onContextMenu"
+			>
+				<N8nResizeableSticky
+					v-if="node"
+					:id="node.id"
+					:model-value="node.parameters.content"
+					:height="node.parameters.height"
+					:width="node.parameters.width"
+					:scale="nodeViewScale"
+					:background-color="node.parameters.color"
+					:read-only="isReadOnly"
+					:default-text="defaultText"
+					:edit-mode="isActive && !isReadOnly"
+					:grid-size="gridSize"
+					@edit="onEdit"
+					@resizestart="onResizeStart"
+					@resize="onResize"
+					@resizeend="onResizeEnd"
+					@markdown-click="onMarkdownClick"
+					@update:model-value="onInputChange"
+				/>
+			</div>
+
+			<div
+				v-show="showActions"
+				ref="stickOptions"
+				:class="{ 'sticky-options': true, 'no-select-on-click': true, 'force-show': forceActions }"
+			>
+				<div
+					v-touch:tap="deleteNode"
+					class="option"
+					data-test-id="delete-sticky"
+					:title="$locale.baseText('node.delete')"
+				>
+					<font-awesome-icon icon="trash" />
+				</div>
+				<n8n-popover
+					effect="dark"
+					trigger="click"
+					placement="top"
+					:popper-style="{ width: '208px' }"
+					:visible="isColorPopoverVisible"
+					@show="onShowPopover"
+					@hide="onHidePopover"
+				>
+					<template #reference>
+						<div
+							class="option"
+							data-test-id="change-sticky-color"
+							:title="$locale.baseText('node.changeColor')"
+							@click="() => setColorPopoverVisible(!isColorPopoverVisible)"
+						>
+							<font-awesome-icon icon="palette" />
+						</div>
+					</template>
+					<div class="content">
+						<div
+							v-for="(_, index) in Array.from({ length: 7 })"
+							:key="index"
+							class="color"
+							data-test-id="color"
+							:class="`sticky-color-${index + 1}`"
+							:style="{
+								'border-width': '1px',
+								'border-style': 'solid',
+								'border-color': 'var(--color-foreground-xdark)',
+								'background-color': `var(--color-sticky-background-${index + 1})`,
+								'box-shadow':
+									(index === 0 && node?.parameters.color === '') ||
+									index + 1 === node?.parameters.color
+										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
+										: 'none',
+							}"
+							@click="changeColor(index + 1)"
+						></div>
+					</div>
+				</n8n-popover>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 .sticky-wrapper {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index ff14bafdec27b..4eb4b92c2e50b 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -1,52 +1,3 @@
-<template>
-	<IntersectionObserver
-		ref="tagsContainer"
-		:threshold="1.0"
-		class="tags-container"
-		:style="style"
-		:enabled="responsive"
-		:event-bus="intersectionEventBus"
-		@observed="onObserved"
-	>
-		<span class="tags">
-			<span
-				v-for="tag in tags"
-				:key="tag.id"
-				:class="{ clickable: !tag.hidden }"
-				@click="(e) => onClick(e, tag)"
-			>
-				<el-tag
-					v-if="tag.isCount"
-					:title="tag.title"
-					type="info"
-					size="small"
-					class="count-container"
-					:disable-transitions="true"
-				>
-					{{ tag.name }}
-				</el-tag>
-				<IntersectionObserved
-					v-else
-					:class="{ hideTag: tag.hidden }"
-					:data-id="tag.id"
-					:enabled="responsive"
-					:event-bus="intersectionEventBus"
-				>
-					<el-tag
-						:title="tag.name"
-						type="info"
-						size="small"
-						:class="{ hoverable }"
-						:disable-transitions="true"
-					>
-						{{ tag.name }}
-					</el-tag>
-				</IntersectionObserved>
-			</span>
-		</span>
-	</IntersectionObserver>
-</template>
-
 <script lang="ts">
 import { defineComponent, type ComponentInstance } from 'vue';
 
@@ -180,6 +131,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<IntersectionObserver
+		ref="tagsContainer"
+		:threshold="1.0"
+		class="tags-container"
+		:style="style"
+		:enabled="responsive"
+		:event-bus="intersectionEventBus"
+		@observed="onObserved"
+	>
+		<span class="tags">
+			<span
+				v-for="tag in tags"
+				:key="tag.id"
+				:class="{ clickable: !tag.hidden }"
+				@click="(e) => onClick(e, tag)"
+			>
+				<el-tag
+					v-if="tag.isCount"
+					:title="tag.title"
+					type="info"
+					size="small"
+					class="count-container"
+					:disable-transitions="true"
+				>
+					{{ tag.name }}
+				</el-tag>
+				<IntersectionObserved
+					v-else
+					:class="{ hideTag: tag.hidden }"
+					:data-id="tag.id"
+					:enabled="responsive"
+					:event-bus="intersectionEventBus"
+				>
+					<el-tag
+						:title="tag.name"
+						type="info"
+						size="small"
+						:class="{ hoverable }"
+						:disable-transitions="true"
+					>
+						{{ tag.name }}
+					</el-tag>
+				</IntersectionObserved>
+			</span>
+		</span>
+	</IntersectionObserver>
+</template>
+
 <style lang="scss" scoped>
 .tags-container {
 	display: block;
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 2b799f96a514d..f9407606a9fb8 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -1,61 +1,3 @@
-<template>
-	<div ref="container" :class="{ 'tags-container': true, focused }" @keydown.stop>
-		<n8n-select
-			ref="selectRef"
-			:teleported="true"
-			:model-value="appliedTags"
-			:loading="isLoading"
-			:placeholder="placeholder"
-			:filter-method="filterOptions"
-			filterable
-			multiple
-			:reserve-keyword="false"
-			loading-text="..."
-			popper-class="tags-dropdown"
-			data-test-id="tags-dropdown"
-			@update:model-value="onTagsUpdated"
-			@visible-change="onVisibleChange"
-			@remove-tag="onRemoveTag"
-		>
-			<n8n-option
-				v-if="options.length === 0 && filter"
-				:key="CREATE_KEY"
-				ref="createRef"
-				:value="CREATE_KEY"
-				class="ops"
-			>
-				<font-awesome-icon icon="plus-circle" />
-				<span>
-					{{ i18n.baseText('tagsDropdown.createTag', { interpolate: { filter } }) }}
-				</span>
-			</n8n-option>
-			<n8n-option v-else-if="options.length === 0" value="message" disabled>
-				<span>{{ i18n.baseText('tagsDropdown.typeToCreateATag') }}</span>
-				<span v-if="allTags.length > 0">{{
-					i18n.baseText('tagsDropdown.noMatchingTagsExist')
-				}}</span>
-				<span v-else-if="filter">{{ i18n.baseText('tagsDropdown.noTagsExist') }}</span>
-			</n8n-option>
-
-			<!-- key is id+index for keyboard navigation to work well with filter -->
-			<n8n-option
-				v-for="(tag, i) in options"
-				:key="tag.id + '_' + i"
-				ref="tagRefs"
-				:value="tag.id"
-				:label="tag.name"
-				class="tag"
-				data-test-id="tag"
-			/>
-
-			<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
-				<font-awesome-icon icon="cog" />
-				<span>{{ i18n.baseText('tagsDropdown.manageTags') }}</span>
-			</n8n-option>
-		</n8n-select>
-	</div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
@@ -285,6 +227,65 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div ref="container" :class="{ 'tags-container': true, focused }" @keydown.stop>
+		<n8n-select
+			ref="selectRef"
+			:teleported="true"
+			:model-value="appliedTags"
+			:loading="isLoading"
+			:placeholder="placeholder"
+			:filter-method="filterOptions"
+			filterable
+			multiple
+			:reserve-keyword="false"
+			loading-text="..."
+			popper-class="tags-dropdown"
+			data-test-id="tags-dropdown"
+			@update:model-value="onTagsUpdated"
+			@visible-change="onVisibleChange"
+			@remove-tag="onRemoveTag"
+		>
+			<n8n-option
+				v-if="options.length === 0 && filter"
+				:key="CREATE_KEY"
+				ref="createRef"
+				:value="CREATE_KEY"
+				class="ops"
+			>
+				<font-awesome-icon icon="plus-circle" />
+				<span>
+					{{ i18n.baseText('tagsDropdown.createTag', { interpolate: { filter } }) }}
+				</span>
+			</n8n-option>
+			<n8n-option v-else-if="options.length === 0" value="message" disabled>
+				<span>{{ i18n.baseText('tagsDropdown.typeToCreateATag') }}</span>
+				<span v-if="allTags.length > 0">{{
+					i18n.baseText('tagsDropdown.noMatchingTagsExist')
+				}}</span>
+				<span v-else-if="filter">{{ i18n.baseText('tagsDropdown.noTagsExist') }}</span>
+			</n8n-option>
+
+			<!-- key is id+index for keyboard navigation to work well with filter -->
+			<n8n-option
+				v-for="(tag, i) in options"
+				:key="tag.id + '_' + i"
+				ref="tagRefs"
+				:value="tag.id"
+				:label="tag.name"
+				class="tag"
+				data-test-id="tag"
+			/>
+
+			<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
+				<font-awesome-icon icon="cog" />
+				<span>{{ i18n.baseText('tagsDropdown.manageTags') }}</span>
+			</n8n-option>
+		</n8n-select>
+	</div>
+</template>
+
 <style lang="scss">
 .tags-container {
 	$--max-input-height: 60px;
diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
index 02bfee1dd2b86..973d05d8f7543 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
@@ -1,33 +1,3 @@
-<template>
-	<Modal
-		id="tags-manager-modal"
-		:title="$locale.baseText('tagsManager.manageTags')"
-		:name="TAGS_MANAGER_MODAL_KEY"
-		:event-bus="modalBus"
-		min-width="620px"
-		min-height="420px"
-		@enter="onEnter"
-	>
-		<template #content>
-			<el-row>
-				<TagsView
-					v-if="hasTags || isCreating"
-					:is-loading="isLoading"
-					:tags="tags"
-					@create="onCreate"
-					@update="onUpdate"
-					@delete="onDelete"
-					@disable-create="onDisableCreate"
-				/>
-				<NoTagsView v-else @enable-create="onEnableCreate" />
-			</el-row>
-		</template>
-		<template #footer="{ close }">
-			<n8n-button :label="$locale.baseText('tagsManager.done')" float="right" @click="close" />
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -186,3 +156,33 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<Modal
+		id="tags-manager-modal"
+		:title="$locale.baseText('tagsManager.manageTags')"
+		:name="TAGS_MANAGER_MODAL_KEY"
+		:event-bus="modalBus"
+		min-width="620px"
+		min-height="420px"
+		@enter="onEnter"
+	>
+		<template #content>
+			<el-row>
+				<TagsView
+					v-if="hasTags || isCreating"
+					:is-loading="isLoading"
+					:tags="tags"
+					@create="onCreate"
+					@update="onUpdate"
+					@delete="onDelete"
+					@disable-create="onDisableCreate"
+				/>
+				<NoTagsView v-else @enable-create="onEnableCreate" />
+			</el-row>
+		</template>
+		<template #footer="{ close }">
+			<n8n-button :label="$locale.baseText('tagsManager.done')" float="right" @click="close" />
+		</template>
+	</Modal>
+</template>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 6176dcf7c9ca0..a6e6f7fe00c72 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -1,3 +1,110 @@
+<script lang="ts">
+import type { ElTable } from 'element-plus';
+import { MAX_TAG_NAME_LENGTH } from '@/constants';
+import type { ITagRow } from '@/Interface';
+import { defineComponent } from 'vue';
+import type { N8nInput } from 'n8n-design-system';
+
+type TableRef = InstanceType<typeof ElTable>;
+type N8nInputRef = InstanceType<typeof N8nInput>;
+
+const INPUT_TRANSITION_TIMEOUT = 350;
+const DELETE_TRANSITION_TIMEOUT = 100;
+
+export default defineComponent({
+	name: 'TagsTable',
+	props: ['rows', 'isLoading', 'newName', 'isSaving'],
+	data() {
+		return {
+			maxLength: MAX_TAG_NAME_LENGTH,
+		};
+	},
+	watch: {
+		rows(newValue: ITagRow[] | undefined) {
+			if (newValue?.[0] && newValue[0].create) {
+				this.focusOnCreate();
+			}
+		},
+	},
+	mounted() {
+		if (this.rows.length === 1 && this.rows[0].create) {
+			this.focusOnInput();
+		}
+	},
+	methods: {
+		getRowClasses: ({ row }: { row: ITagRow }): string => {
+			return row.disable ? 'disabled' : '';
+		},
+
+		getSpan({ row, columnIndex }: { row: ITagRow; columnIndex: number }): number | number[] {
+			// expand text column with delete message
+			if (columnIndex === 0 && row.tag && row.delete) {
+				return [1, 2];
+			}
+			// hide usage column on delete
+			if (columnIndex === 1 && row.tag && row.delete) {
+				return [0, 0];
+			}
+
+			return 1;
+		},
+
+		enableUpdate(row: ITagRow): void {
+			if (row.tag) {
+				this.$emit('updateEnable', row.tag.id);
+				this.$emit('newNameChange', row.tag.name);
+				this.focusOnInput();
+			}
+		},
+
+		enableDelete(row: ITagRow): void {
+			if (row.tag) {
+				this.$emit('deleteEnable', row.tag.id);
+				this.focusOnDelete();
+			}
+		},
+
+		cancel(): void {
+			this.$emit('cancelOperation');
+		},
+		apply(): void {
+			this.$emit('applyOperation');
+		},
+
+		onNewNameChange(name: string): void {
+			this.$emit('newNameChange', name);
+		},
+
+		focusOnInput(): void {
+			setTimeout(() => {
+				const inputRef = this.$refs.nameInput as N8nInputRef | undefined;
+				if (inputRef?.focus) {
+					inputRef.focus();
+				}
+			}, INPUT_TRANSITION_TIMEOUT);
+		},
+
+		focusOnDelete(): void {
+			setTimeout(() => {
+				const inputRef = this.$refs.deleteHiddenInput as N8nInputRef | undefined;
+				if (inputRef?.focus) {
+					inputRef.focus();
+				}
+			}, DELETE_TRANSITION_TIMEOUT);
+		},
+
+		focusOnCreate(): void {
+			const bodyWrapperRef = (this.$refs.table as TableRef).$refs.bodyWrapper as HTMLElement;
+			if (bodyWrapperRef) {
+				bodyWrapperRef.scrollTop = 0;
+			}
+
+			this.focusOnInput();
+		},
+	},
+});
+</script>
+
 <template>
 	<el-table
 		ref="table"
@@ -107,113 +214,6 @@
 	</el-table>
 </template>
 
-<script lang="ts">
-import type { ElTable } from 'element-plus';
-import { MAX_TAG_NAME_LENGTH } from '@/constants';
-import type { ITagRow } from '@/Interface';
-import { defineComponent } from 'vue';
-import type { N8nInput } from 'n8n-design-system';
-
-type TableRef = InstanceType<typeof ElTable>;
-type N8nInputRef = InstanceType<typeof N8nInput>;
-
-const INPUT_TRANSITION_TIMEOUT = 350;
-const DELETE_TRANSITION_TIMEOUT = 100;
-
-export default defineComponent({
-	name: 'TagsTable',
-	props: ['rows', 'isLoading', 'newName', 'isSaving'],
-	data() {
-		return {
-			maxLength: MAX_TAG_NAME_LENGTH,
-		};
-	},
-	watch: {
-		rows(newValue: ITagRow[] | undefined) {
-			if (newValue?.[0] && newValue[0].create) {
-				this.focusOnCreate();
-			}
-		},
-	},
-	mounted() {
-		if (this.rows.length === 1 && this.rows[0].create) {
-			this.focusOnInput();
-		}
-	},
-	methods: {
-		getRowClasses: ({ row }: { row: ITagRow }): string => {
-			return row.disable ? 'disabled' : '';
-		},
-
-		getSpan({ row, columnIndex }: { row: ITagRow; columnIndex: number }): number | number[] {
-			// expand text column with delete message
-			if (columnIndex === 0 && row.tag && row.delete) {
-				return [1, 2];
-			}
-			// hide usage column on delete
-			if (columnIndex === 1 && row.tag && row.delete) {
-				return [0, 0];
-			}
-
-			return 1;
-		},
-
-		enableUpdate(row: ITagRow): void {
-			if (row.tag) {
-				this.$emit('updateEnable', row.tag.id);
-				this.$emit('newNameChange', row.tag.name);
-				this.focusOnInput();
-			}
-		},
-
-		enableDelete(row: ITagRow): void {
-			if (row.tag) {
-				this.$emit('deleteEnable', row.tag.id);
-				this.focusOnDelete();
-			}
-		},
-
-		cancel(): void {
-			this.$emit('cancelOperation');
-		},
-		apply(): void {
-			this.$emit('applyOperation');
-		},
-
-		onNewNameChange(name: string): void {
-			this.$emit('newNameChange', name);
-		},
-
-		focusOnInput(): void {
-			setTimeout(() => {
-				const inputRef = this.$refs.nameInput as N8nInputRef | undefined;
-				if (inputRef?.focus) {
-					inputRef.focus();
-				}
-			}, INPUT_TRANSITION_TIMEOUT);
-		},
-
-		focusOnDelete(): void {
-			setTimeout(() => {
-				const inputRef = this.$refs.deleteHiddenInput as N8nInputRef | undefined;
-				if (inputRef?.focus) {
-					inputRef.focus();
-				}
-			}, DELETE_TRANSITION_TIMEOUT);
-		},
-
-		focusOnCreate(): void {
-			const bodyWrapperRef = (this.$refs.table as TableRef).$refs.bodyWrapper as HTMLElement;
-			if (bodyWrapperRef) {
-				bodyWrapperRef.scrollTop = 0;
-			}
-
-			this.focusOnInput();
-		},
-	},
-});
-</script>
-
 <style lang="scss" scoped>
 .tags-table {
 	:deep(tr.disabled) {
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index 61031ea6be02d..f3b1144440212 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -1,32 +1,3 @@
-<template>
-	<el-row class="tags-header">
-		<el-col :span="10">
-			<n8n-input
-				:placeholder="$locale.baseText('tagsTableHeader.searchTags')"
-				:model-value="search"
-				:disabled="disabled"
-				:maxlength="maxLength"
-				clearable
-				@update:model-value="onSearchChange"
-			>
-				<template #prefix>
-					<font-awesome-icon icon="search" />
-				</template>
-			</n8n-input>
-		</el-col>
-		<el-col :span="14">
-			<n8n-button
-				:disabled="disabled"
-				icon="plus"
-				:label="$locale.baseText('tagsTableHeader.addNew')"
-				size="large"
-				float="right"
-				@click="onAddNew"
-			/>
-		</el-col>
-	</el-row>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import { MAX_TAG_NAME_LENGTH } from '@/constants';
@@ -58,6 +29,35 @@ const onSearchChange = (search: string) => {
 };
 </script>
 
+<template>
+	<el-row class="tags-header">
+		<el-col :span="10">
+			<n8n-input
+				:placeholder="$locale.baseText('tagsTableHeader.searchTags')"
+				:model-value="search"
+				:disabled="disabled"
+				:maxlength="maxLength"
+				clearable
+				@update:model-value="onSearchChange"
+			>
+				<template #prefix>
+					<font-awesome-icon icon="search" />
+				</template>
+			</n8n-input>
+		</el-col>
+		<el-col :span="14">
+			<n8n-button
+				:disabled="disabled"
+				icon="plus"
+				:label="$locale.baseText('tagsTableHeader.addNew')"
+				size="large"
+				float="right"
+				@click="onAddNew"
+			/>
+		</el-col>
+	</el-row>
+</template>
+
 <style lang="scss" scoped>
 .tags-header {
 	margin-bottom: 15px;
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index a70b523f9e68e..ed99286c03247 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -1,27 +1,3 @@
-<template>
-	<div @keyup.enter="applyOperation" @keyup.esc="cancelOperation">
-		<TagsTableHeader
-			:search="search"
-			:disabled="isHeaderDisabled()"
-			@search-change="onSearchChange"
-			@create-enable="onCreateEnable"
-		/>
-		<TagsTable
-			ref="tagsTable"
-			:rows="rows"
-			:is-loading="isLoading"
-			:is-saving="isSaving"
-			:new-name="newName"
-			data-test-id="tags-table"
-			@new-name-change="onNewNameChange"
-			@update-enable="onUpdateEnable"
-			@delete-enable="onDeleteEnable"
-			@cancel-operation="cancelOperation"
-			@apply-operation="applyOperation"
-		/>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -191,3 +167,27 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div @keyup.enter="applyOperation" @keyup.esc="cancelOperation">
+		<TagsTableHeader
+			:search="search"
+			:disabled="isHeaderDisabled()"
+			@search-change="onSearchChange"
+			@create-enable="onCreateEnable"
+		/>
+		<TagsTable
+			ref="tagsTable"
+			:rows="rows"
+			:is-loading="isLoading"
+			:is-saving="isSaving"
+			:new-name="newName"
+			data-test-id="tags-table"
+			@new-name-change="onNewNameChange"
+			@update-enable="onUpdateEnable"
+			@delete-enable="onDeleteEnable"
+			@cancel-operation="cancelOperation"
+			@apply-operation="applyOperation"
+		/>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index 759d3a2550c46..51a77a0cc3b35 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/packages/editor-ui/src/components/TemplateCard.vue
@@ -1,54 +1,3 @@
-<template>
-	<div
-		:class="[
-			$style.card,
-			lastItem && $style.last,
-			firstItem && $style.first,
-			!loading && $style.loaded,
-		]"
-		data-test-id="template-card"
-		@click="onCardClick"
-	>
-		<div v-if="loading" :class="$style.loading">
-			<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
-		</div>
-		<div v-else-if="workflow">
-			<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
-			<div v-if="!simpleView" :class="$style.content">
-				<span v-if="workflow.totalViews">
-					<n8n-text size="small" color="text-light">
-						<font-awesome-icon icon="eye" />
-						{{ abbreviateNumber(workflow.totalViews) }}
-					</n8n-text>
-				</span>
-				<div v-if="workflow.totalViews" :class="$style.line" v-text="'|'" />
-				<n8n-text size="small" color="text-light">
-					<TimeAgo :date="workflow.createdAt" />
-				</n8n-text>
-				<div v-if="workflow.user" :class="$style.line" v-text="'|'" />
-				<n8n-text v-if="workflow.user" size="small" color="text-light"
-					>By {{ workflow.user.username }}</n8n-text
-				>
-			</div>
-		</div>
-		<div
-			v-if="!loading && workflow"
-			:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
-		>
-			<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
-		</div>
-		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
-			<n8n-button
-				v-if="useWorkflowButton"
-				outline
-				label="Use workflow"
-				data-test-id="use-workflow-button"
-				@click.stop="onUseWorkflowClick"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
@@ -111,6 +60,57 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:class="[
+			$style.card,
+			lastItem && $style.last,
+			firstItem && $style.first,
+			!loading && $style.loaded,
+		]"
+		data-test-id="template-card"
+		@click="onCardClick"
+	>
+		<div v-if="loading" :class="$style.loading">
+			<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
+		</div>
+		<div v-else-if="workflow">
+			<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
+			<div v-if="!simpleView" :class="$style.content">
+				<span v-if="workflow.totalViews">
+					<n8n-text size="small" color="text-light">
+						<font-awesome-icon icon="eye" />
+						{{ abbreviateNumber(workflow.totalViews) }}
+					</n8n-text>
+				</span>
+				<div v-if="workflow.totalViews" :class="$style.line" v-text="'|'" />
+				<n8n-text size="small" color="text-light">
+					<TimeAgo :date="workflow.createdAt" />
+				</n8n-text>
+				<div v-if="workflow.user" :class="$style.line" v-text="'|'" />
+				<n8n-text v-if="workflow.user" size="small" color="text-light"
+					>By {{ workflow.user.username }}</n8n-text
+				>
+			</div>
+		</div>
+		<div
+			v-if="!loading && workflow"
+			:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
+		>
+			<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
+		</div>
+		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
+			<n8n-button
+				v-if="useWorkflowButton"
+				outline
+				label="Use workflow"
+				data-test-id="use-workflow-button"
+				@click.stop="onUseWorkflowClick"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .nodes {
 	display: flex;
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 0e6a6336e94e6..e8b97a0281140 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -1,61 +1,3 @@
-<template>
-	<div>
-		<n8n-loading :loading="loading" :rows="5" variant="p" />
-
-		<TemplateDetailsBlock
-			v-if="!loading && template && template.nodes.length > 0"
-			:title="blockTitle"
-		>
-			<div :class="$style.icons">
-				<div
-					v-for="node in filterTemplateNodes(template.nodes)"
-					:key="node.name"
-					:class="$style.icon"
-				>
-					<NodeIcon
-						:node-type="node"
-						:size="24"
-						:show-tooltip="true"
-						@click="redirectToSearchPage(node)"
-					/>
-				</div>
-			</div>
-		</TemplateDetailsBlock>
-
-		<TemplateDetailsBlock
-			v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
-			:title="$locale.baseText('template.details.categories')"
-		>
-			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
-		</TemplateDetailsBlock>
-
-		<TemplateDetailsBlock
-			v-if="!loading && template"
-			:title="$locale.baseText('template.details.details')"
-		>
-			<div :class="$style.text">
-				<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
-					{{ $locale.baseText('template.details.created') }}
-					<TimeAgo :date="template.createdAt" />
-					{{ $locale.baseText('template.details.by') }}
-					{{ template.user ? template.user.username : 'n8n team' }}
-				</n8n-text>
-			</div>
-			<div :class="$style.text">
-				<n8n-text
-					v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
-					size="small"
-					color="text-base"
-				>
-					{{ $locale.baseText('template.details.viewed') }}
-					{{ abbreviateNumber(template.totalViews) }}
-					{{ $locale.baseText('template.details.times') }}
-				</n8n-text>
-			</div>
-		</TemplateDetailsBlock>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -115,6 +57,65 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<n8n-loading :loading="loading" :rows="5" variant="p" />
+
+		<TemplateDetailsBlock
+			v-if="!loading && template && template.nodes.length > 0"
+			:title="blockTitle"
+		>
+			<div :class="$style.icons">
+				<div
+					v-for="node in filterTemplateNodes(template.nodes)"
+					:key="node.name"
+					:class="$style.icon"
+				>
+					<NodeIcon
+						:node-type="node"
+						:size="24"
+						:show-tooltip="true"
+						@click="redirectToSearchPage(node)"
+					/>
+				</div>
+			</div>
+		</TemplateDetailsBlock>
+
+		<TemplateDetailsBlock
+			v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
+			:title="$locale.baseText('template.details.categories')"
+		>
+			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
+		</TemplateDetailsBlock>
+
+		<TemplateDetailsBlock
+			v-if="!loading && template"
+			:title="$locale.baseText('template.details.details')"
+		>
+			<div :class="$style.text">
+				<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
+					{{ $locale.baseText('template.details.created') }}
+					<TimeAgo :date="template.createdAt" />
+					{{ $locale.baseText('template.details.by') }}
+					{{ template.user ? template.user.username : 'n8n team' }}
+				</n8n-text>
+			</div>
+			<div :class="$style.text">
+				<n8n-text
+					v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
+					size="small"
+					color="text-base"
+				>
+					{{ $locale.baseText('template.details.viewed') }}
+					{{ abbreviateNumber(template.totalViews) }}
+					{{ $locale.baseText('template.details.times') }}
+				</n8n-text>
+			</div>
+		</TemplateDetailsBlock>
+	</div>
+</template>
+
 <style lang="scss" module>
 .icons {
 	display: flex;
diff --git a/packages/editor-ui/src/components/TemplateDetailsBlock.vue b/packages/editor-ui/src/components/TemplateDetailsBlock.vue
index 0aa4ed41a5125..830c28acbd39e 100644
--- a/packages/editor-ui/src/components/TemplateDetailsBlock.vue
+++ b/packages/editor-ui/src/components/TemplateDetailsBlock.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+defineProps<{
+	title: string;
+}>();
+</script>
+
 <template>
 	<div :class="$style.block">
 		<div :class="$style.header">
@@ -9,12 +15,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-	title: string;
-}>();
-</script>
-
 <style lang="scss" module>
 .block {
 	padding-bottom: var(--spacing-xl);
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
index fe7b9022587c7..8fedd594d1627 100644
--- a/packages/editor-ui/src/components/TemplateFilters.vue
+++ b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -1,44 +1,3 @@
-<template>
-	<div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container">
-		<div :class="$style.title" v-text="$locale.baseText('templates.categoriesHeading')" />
-		<div v-if="loading" :class="$style.list">
-			<n8n-loading :loading="loading" :rows="expandLimit" />
-		</div>
-		<ul v-if="!loading" :class="$style.categories">
-			<li :class="$style.item" data-test-id="template-filter-all-categories">
-				<el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()">
-					{{ $locale.baseText('templates.allCategories') }}
-				</el-checkbox>
-			</li>
-			<li
-				v-for="(category, index) in collapsed
-					? sortedCategories.slice(0, expandLimit)
-					: sortedCategories"
-				:key="index"
-				:class="$style.item"
-				:data-test-id="`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`"
-			>
-				<el-checkbox
-					:model-value="isSelected(category)"
-					@update:model-value="(value: boolean) => handleCheckboxChanged(value, category)"
-				>
-					{{ category.name }}
-				</el-checkbox>
-			</li>
-		</ul>
-		<div
-			v-if="sortedCategories.length > expandLimit && collapsed && !loading"
-			:class="$style.button"
-			data-test-id="expand-categories-button"
-			@click="collapseAction"
-		>
-			<n8n-text size="small" color="primary">
-				+ {{ `${sortedCategories.length - expandLimit} more` }}
-			</n8n-text>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { ITemplatesCategory } from '@/Interface';
@@ -127,6 +86,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container">
+		<div :class="$style.title" v-text="$locale.baseText('templates.categoriesHeading')" />
+		<div v-if="loading" :class="$style.list">
+			<n8n-loading :loading="loading" :rows="expandLimit" />
+		</div>
+		<ul v-if="!loading" :class="$style.categories">
+			<li :class="$style.item" data-test-id="template-filter-all-categories">
+				<el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()">
+					{{ $locale.baseText('templates.allCategories') }}
+				</el-checkbox>
+			</li>
+			<li
+				v-for="(category, index) in collapsed
+					? sortedCategories.slice(0, expandLimit)
+					: sortedCategories"
+				:key="index"
+				:class="$style.item"
+				:data-test-id="`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`"
+			>
+				<el-checkbox
+					:model-value="isSelected(category)"
+					@update:model-value="(value: boolean) => handleCheckboxChanged(value, category)"
+				>
+					{{ category.name }}
+				</el-checkbox>
+			</li>
+		</ul>
+		<div
+			v-if="sortedCategories.length > expandLimit && collapsed && !loading"
+			:class="$style.button"
+			data-test-id="expand-categories-button"
+			@click="collapseAction"
+		>
+			<n8n-text size="small" color="primary">
+				+ {{ `${sortedCategories.length - expandLimit} more` }}
+			</n8n-text>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .title {
 	font-size: var(--font-size-2xs);
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 62073452935eb..06c644dc804d2 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -1,38 +1,3 @@
-<template>
-	<div v-if="loading || workflows.length" :class="$style.list">
-		<div v-if="!simpleView" :class="$style.header">
-			<n8n-heading :bold="true" size="medium" color="text-light">
-				{{ $locale.baseText('templates.workflows') }}
-				<span v-if="totalCount > 0" data-test-id="template-count-label">({{ totalCount }})</span>
-				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
-			</n8n-heading>
-		</div>
-		<div :class="$style.container">
-			<TemplateCard
-				v-for="(workflow, index) in workflows"
-				:key="workflow.id"
-				:workflow="workflow"
-				:first-item="index === 0"
-				:simple-view="simpleView"
-				:last-item="index === workflows.length - 1 && !loading"
-				:use-workflow-button="useWorkflowButton"
-				@click="(e) => onCardClick(e, workflow.id)"
-				@use-workflow="(e) => onUseWorkflow(e, workflow.id)"
-			/>
-			<div v-if="infiniteScrollEnabled" ref="loader" />
-			<div v-if="loading" data-test-id="templates-loading-container">
-				<TemplateCard
-					v-for="n in 4"
-					:key="'index-' + n"
-					:loading="true"
-					:first-item="workflows.length === 0 && n === 1"
-					:last-item="n === 4"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import TemplateCard from './TemplateCard.vue';
@@ -114,6 +79,41 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="loading || workflows.length" :class="$style.list">
+		<div v-if="!simpleView" :class="$style.header">
+			<n8n-heading :bold="true" size="medium" color="text-light">
+				{{ $locale.baseText('templates.workflows') }}
+				<span v-if="totalCount > 0" data-test-id="template-count-label">({{ totalCount }})</span>
+				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
+			</n8n-heading>
+		</div>
+		<div :class="$style.container">
+			<TemplateCard
+				v-for="(workflow, index) in workflows"
+				:key="workflow.id"
+				:workflow="workflow"
+				:first-item="index === 0"
+				:simple-view="simpleView"
+				:last-item="index === workflows.length - 1 && !loading"
+				:use-workflow-button="useWorkflowButton"
+				@click="(e) => onCardClick(e, workflow.id)"
+				@use-workflow="(e) => onUseWorkflow(e, workflow.id)"
+			/>
+			<div v-if="infiniteScrollEnabled" ref="loader" />
+			<div v-if="loading" data-test-id="templates-loading-container">
+				<TemplateCard
+					v-for="n in 4"
+					:key="'index-' + n"
+					:loading="true"
+					:first-item="workflows.length === 0 && n === 1"
+					:last-item="n === 4"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .header {
 	padding-bottom: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/TemplatesInfoCard.vue b/packages/editor-ui/src/components/TemplatesInfoCard.vue
index 2d155148e1816..9e77a9e10adeb 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCard.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCard.vue
@@ -1,17 +1,3 @@
-<template>
-	<Card :loading="loading" :title="collection.name" :style="{ width }">
-		<template #footer>
-			<span>
-				<n8n-text v-show="showItemCount" size="small" color="text-light">
-					{{ collection.workflows.length }}
-					{{ $locale.baseText('templates.workflows') }}
-				</n8n-text>
-			</span>
-			<NodeList :nodes="collection.nodes" :show-more="false" />
-		</template>
-	</Card>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import Card from '@/components/CollectionWorkflowCard.vue';
@@ -44,4 +30,18 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Card :loading="loading" :title="collection.name" :style="{ width }">
+		<template #footer>
+			<span>
+				<n8n-text v-show="showItemCount" size="small" color="text-light">
+					{{ collection.workflows.length }}
+					{{ $locale.baseText('templates.workflows') }}
+				</n8n-text>
+			</span>
+			<NodeList :nodes="collection.nodes" :show-more="false" />
+		</template>
+	</Card>
+</template>
+
 <style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
index 377f6c81373a8..6810443b26d32 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
@@ -1,41 +1,3 @@
-<template>
-	<div v-show="loading || collections.length" :class="$style.container">
-		<agile
-			ref="slider"
-			:dots="false"
-			:nav-buttons="false"
-			:infinite="false"
-			:slides-to-show="4"
-			@after-change="updateCarouselScroll"
-		>
-			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
-			<TemplatesInfoCard
-				v-for="collection in loading ? [] : collections"
-				:key="collection.id"
-				data-test-id="templates-info-card"
-				:collection="collection"
-				:show-item-count="showItemCount"
-				:width="cardsWidth"
-				@click="(e) => onCardClick(e, collection.id)"
-			/>
-		</agile>
-		<button
-			v-show="showNavigation && carouselScrollPosition > 0"
-			:class="{ [$style.leftButton]: true }"
-			@click="scrollLeft"
-		>
-			<font-awesome-icon icon="chevron-left" />
-		</button>
-		<button
-			v-show="showNavigation && !scrollEnd"
-			:class="{ [$style.rightButton]: true }"
-			@click="scrollRight"
-		>
-			<font-awesome-icon icon="chevron-right" />
-		</button>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -143,6 +105,44 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-show="loading || collections.length" :class="$style.container">
+		<agile
+			ref="slider"
+			:dots="false"
+			:nav-buttons="false"
+			:infinite="false"
+			:slides-to-show="4"
+			@after-change="updateCarouselScroll"
+		>
+			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
+			<TemplatesInfoCard
+				v-for="collection in loading ? [] : collections"
+				:key="collection.id"
+				data-test-id="templates-info-card"
+				:collection="collection"
+				:show-item-count="showItemCount"
+				:width="cardsWidth"
+				@click="(e) => onCardClick(e, collection.id)"
+			/>
+		</agile>
+		<button
+			v-show="showNavigation && carouselScrollPosition > 0"
+			:class="{ [$style.leftButton]: true }"
+			@click="scrollLeft"
+		>
+			<font-awesome-icon icon="chevron-left" />
+		</button>
+		<button
+			v-show="showNavigation && !scrollEnd"
+			:class="{ [$style.rightButton]: true }"
+			@click="scrollRight"
+		>
+			<font-awesome-icon icon="chevron-right" />
+		</button>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
index 41d941c05d7ac..440507a2b4640 100644
--- a/packages/editor-ui/src/components/TextEdit.vue
+++ b/packages/editor-ui/src/components/TextEdit.vue
@@ -1,33 +1,3 @@
-<template>
-	<div v-if="dialogVisible">
-		<el-dialog
-			:model-value="dialogVisible"
-			append-to-body
-			width="80%"
-			:title="`${$locale.baseText('textEdit.edit')} ${$locale
-				.nodeText()
-				.inputLabelDisplayName(parameter, path)}`"
-			:before-close="closeDialog"
-		>
-			<div class="ignore-key-press">
-				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
-					<div @keydown.stop @keydown.esc="onKeyDownEsc">
-						<n8n-input
-							ref="inputField"
-							v-model="tempValue"
-							type="textarea"
-							:placeholder="$locale.nodeText().placeholder(parameter, path)"
-							:read-only="isReadOnly"
-							:rows="15"
-							@update:model-value="valueChanged"
-						/>
-					</div>
-				</n8n-input-label>
-			</div>
-		</el-dialog>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { ref, watch, onMounted, nextTick } from 'vue';
 import type { INodeProperties } from 'n8n-workflow';
@@ -85,3 +55,33 @@ const closeDialog = () => {
 	emit('closeDialog');
 };
 </script>
+
+<template>
+	<div v-if="dialogVisible">
+		<el-dialog
+			:model-value="dialogVisible"
+			append-to-body
+			width="80%"
+			:title="`${$locale.baseText('textEdit.edit')} ${$locale
+				.nodeText()
+				.inputLabelDisplayName(parameter, path)}`"
+			:before-close="closeDialog"
+		>
+			<div class="ignore-key-press">
+				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
+					<div @keydown.stop @keydown.esc="onKeyDownEsc">
+						<n8n-input
+							ref="inputField"
+							v-model="tempValue"
+							type="textarea"
+							:placeholder="$locale.nodeText().placeholder(parameter, path)"
+							:read-only="isReadOnly"
+							:rows="15"
+							@update:model-value="valueChanged"
+						/>
+					</div>
+				</n8n-input-label>
+			</div>
+		</el-dialog>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/TitledList.vue b/packages/editor-ui/src/components/TitledList.vue
index c866f5888a6ce..4dc308ea8d2fa 100644
--- a/packages/editor-ui/src/components/TitledList.vue
+++ b/packages/editor-ui/src/components/TitledList.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+	title: string;
+	items: string[];
+}>();
+</script>
+
 <template>
 	<div class="titled-list">
 		<p v-text="title" />
@@ -7,12 +14,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-	title: string;
-	items: string[];
-}>();
-</script>
 <style lang="scss" scoped>
 .titled-list {
 	display: flex;
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 612edfbc9ff0e..db8a64736a2df 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -1,112 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<transition name="fade" mode="out-in">
-			<div v-if="hasIssues || hideContent" key="empty"></div>
-			<div v-else-if="isListeningForEvents" key="listening">
-				<n8n-pulse>
-					<NodeIcon :node-type="nodeType" :size="40"></NodeIcon>
-				</n8n-pulse>
-				<div v-if="isWebhookNode">
-					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
-						$locale.baseText('ndv.trigger.webhookNode.listening')
-					}}</n8n-text>
-					<div :class="[$style.shake, 'mb-xs']">
-						<n8n-text>
-							{{
-								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
-									interpolate: { type: webhookHttpMethod ?? '' },
-								})
-							}}
-						</n8n-text>
-					</div>
-					<CopyInput
-						:value="webhookTestUrl"
-						:toast-title="$locale.baseText('ndv.trigger.copiedTestUrl')"
-						class="mb-2xl"
-						size="medium"
-						:collapse="true"
-						:copy-button-text="$locale.baseText('generic.clickToCopy')"
-						@copy="onTestLinkCopied"
-					></CopyInput>
-					<NodeExecuteButton
-						data-test-id="trigger-execute-button"
-						:node-name="nodeName"
-						size="medium"
-						telemetry-source="inputs"
-						@execute="onNodeExecute"
-					/>
-				</div>
-				<div v-else>
-					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
-						listeningTitle
-					}}</n8n-text>
-					<div :class="[$style.shake, 'mb-xs']">
-						<n8n-text tag="div">
-							{{ listeningHint }}
-						</n8n-text>
-					</div>
-					<div v-if="displayChatButton">
-						<n8n-button class="mb-xl" @click="openWebhookUrl()">
-							{{ $locale.baseText('ndv.trigger.chatTrigger.openChat') }}
-						</n8n-button>
-					</div>
-
-					<NodeExecuteButton
-						data-test-id="trigger-execute-button"
-						:node-name="nodeName"
-						size="medium"
-						telemetry-source="inputs"
-						@execute="onNodeExecute"
-					/>
-				</div>
-			</div>
-			<div v-else key="default">
-				<div v-if="isActivelyPolling" class="mb-xl">
-					<n8n-spinner type="ring" />
-				</div>
-
-				<div :class="$style.action">
-					<div :class="$style.header">
-						<n8n-heading v-if="header" tag="h1" bold>
-							{{ header }}
-						</n8n-heading>
-						<n8n-text v-if="subheader">
-							<span v-text="subheader" />
-						</n8n-text>
-					</div>
-
-					<NodeExecuteButton
-						data-test-id="trigger-execute-button"
-						:node-name="nodeName"
-						size="medium"
-						telemetry-source="inputs"
-						@execute="onNodeExecute"
-					/>
-				</div>
-
-				<n8n-text v-if="activationHint" size="small" @click="onLinkClick">
-					<span v-html="activationHint"></span>&nbsp;
-				</n8n-text>
-				<n8n-link
-					v-if="activationHint && executionsHelp"
-					size="small"
-					@click="expandExecutionHelp"
-					>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
-				>
-				<n8n-info-accordion
-					v-if="executionsHelp"
-					ref="help"
-					:class="$style.accordion"
-					:title="$locale.baseText('ndv.trigger.executionsHint.question')"
-					:description="executionsHelp"
-					:event-bus="executionsHelpEventBus"
-					@click:body="onLinkClick"
-				></n8n-info-accordion>
-			</div>
-		</transition>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -463,6 +354,115 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<transition name="fade" mode="out-in">
+			<div v-if="hasIssues || hideContent" key="empty"></div>
+			<div v-else-if="isListeningForEvents" key="listening">
+				<n8n-pulse>
+					<NodeIcon :node-type="nodeType" :size="40"></NodeIcon>
+				</n8n-pulse>
+				<div v-if="isWebhookNode">
+					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
+						$locale.baseText('ndv.trigger.webhookNode.listening')
+					}}</n8n-text>
+					<div :class="[$style.shake, 'mb-xs']">
+						<n8n-text>
+							{{
+								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
+									interpolate: { type: webhookHttpMethod ?? '' },
+								})
+							}}
+						</n8n-text>
+					</div>
+					<CopyInput
+						:value="webhookTestUrl"
+						:toast-title="$locale.baseText('ndv.trigger.copiedTestUrl')"
+						class="mb-2xl"
+						size="medium"
+						:collapse="true"
+						:copy-button-text="$locale.baseText('generic.clickToCopy')"
+						@copy="onTestLinkCopied"
+					></CopyInput>
+					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
+						:node-name="nodeName"
+						size="medium"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
+					/>
+				</div>
+				<div v-else>
+					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
+						listeningTitle
+					}}</n8n-text>
+					<div :class="[$style.shake, 'mb-xs']">
+						<n8n-text tag="div">
+							{{ listeningHint }}
+						</n8n-text>
+					</div>
+					<div v-if="displayChatButton">
+						<n8n-button class="mb-xl" @click="openWebhookUrl()">
+							{{ $locale.baseText('ndv.trigger.chatTrigger.openChat') }}
+						</n8n-button>
+					</div>
+
+					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
+						:node-name="nodeName"
+						size="medium"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
+					/>
+				</div>
+			</div>
+			<div v-else key="default">
+				<div v-if="isActivelyPolling" class="mb-xl">
+					<n8n-spinner type="ring" />
+				</div>
+
+				<div :class="$style.action">
+					<div :class="$style.header">
+						<n8n-heading v-if="header" tag="h1" bold>
+							{{ header }}
+						</n8n-heading>
+						<n8n-text v-if="subheader">
+							<span v-text="subheader" />
+						</n8n-text>
+					</div>
+
+					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
+						:node-name="nodeName"
+						size="medium"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
+					/>
+				</div>
+
+				<n8n-text v-if="activationHint" size="small" @click="onLinkClick">
+					<span v-html="activationHint"></span>&nbsp;
+				</n8n-text>
+				<n8n-link
+					v-if="activationHint && executionsHelp"
+					size="small"
+					@click="expandExecutionHelp"
+					>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
+				>
+				<n8n-info-accordion
+					v-if="executionsHelp"
+					ref="help"
+					:class="$style.accordion"
+					:title="$locale.baseText('ndv.trigger.executionsHint.question')"
+					:description="executionsHelp"
+					:event-bus="executionsHelpEventBus"
+					@click:body="onLinkClick"
+				></n8n-info-accordion>
+			</div>
+		</transition>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/editor-ui/src/components/UpdatesPanel.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
index cd8580f0783dd..b96a20c6502da 100644
--- a/packages/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -1,3 +1,41 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import ModalDrawer from './ModalDrawer.vue';
+import TimeAgo from './TimeAgo.vue';
+import VersionCard from './VersionCard.vue';
+import { VERSIONS_MODAL_KEY } from '../constants';
+import { mapStores } from 'pinia';
+import { useVersionsStore } from '@/stores/versions.store';
+import type { IVersion } from '@/Interface';
+
+export default defineComponent({
+	name: 'UpdatesPanel',
+	components: {
+		ModalDrawer,
+		VersionCard,
+		TimeAgo,
+	},
+	computed: {
+		...mapStores(useVersionsStore),
+		nextVersions(): IVersion[] {
+			return this.versionsStore.nextVersions;
+		},
+		currentVersion(): IVersion | undefined {
+			return this.versionsStore.currentVersion;
+		},
+		infoUrl(): string {
+			return this.versionsStore.infoUrl;
+		},
+	},
+	data() {
+		return {
+			VERSIONS_MODAL_KEY,
+		};
+	},
+});
+</script>
+
 <template>
 	<ModalDrawer
 		:name="VERSIONS_MODAL_KEY"
@@ -51,44 +89,6 @@
 	</ModalDrawer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import ModalDrawer from './ModalDrawer.vue';
-import TimeAgo from './TimeAgo.vue';
-import VersionCard from './VersionCard.vue';
-import { VERSIONS_MODAL_KEY } from '../constants';
-import { mapStores } from 'pinia';
-import { useVersionsStore } from '@/stores/versions.store';
-import type { IVersion } from '@/Interface';
-
-export default defineComponent({
-	name: 'UpdatesPanel',
-	components: {
-		ModalDrawer,
-		VersionCard,
-		TimeAgo,
-	},
-	computed: {
-		...mapStores(useVersionsStore),
-		nextVersions(): IVersion[] {
-			return this.versionsStore.nextVersions;
-		},
-		currentVersion(): IVersion | undefined {
-			return this.versionsStore.currentVersion;
-		},
-		infoUrl(): string {
-			return this.versionsStore.infoUrl;
-		},
-	},
-	data() {
-		return {
-			VERSIONS_MODAL_KEY,
-		};
-	},
-});
-</script>
-
 <style module lang="scss">
 .title {
 	margin: 0;
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 9434e5a0bc8ef..1703d21f87056 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import NodeIcon from './NodeIcon.vue';
+import TimeAgo from './TimeAgo.vue';
+import Badge from './Badge.vue';
+import WarningTooltip from './WarningTooltip.vue';
+import type { IVersion, IVersionNode } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+
+defineProps<{
+	version: IVersion;
+}>();
+
+const i18n = useI18n();
+
+const nodeName = (node: IVersionNode): string => {
+	return node !== null ? node.displayName : i18n.baseText('versionCard.unknown');
+};
+</script>
+
 <template>
 	<a
 		v-if="version"
@@ -51,25 +70,6 @@
 	</a>
 </template>
 
-<script setup lang="ts">
-import NodeIcon from './NodeIcon.vue';
-import TimeAgo from './TimeAgo.vue';
-import Badge from './Badge.vue';
-import WarningTooltip from './WarningTooltip.vue';
-import type { IVersion, IVersionNode } from '@/Interface';
-import { useI18n } from '@/composables/useI18n';
-
-defineProps<{
-	version: IVersion;
-}>();
-
-const i18n = useI18n();
-
-const nodeName = (node: IVersionNode): string => {
-	return node !== null ? node.displayName : i18n.baseText('versionCard.unknown');
-};
-</script>
-
 <style module lang="scss">
 .card {
 	background-color: $version-card-background-color;
diff --git a/packages/editor-ui/src/components/WorkerList.ee.vue b/packages/editor-ui/src/components/WorkerList.ee.vue
index 0c4f8baa7a7d5..bbae452b05020 100644
--- a/packages/editor-ui/src/components/WorkerList.ee.vue
+++ b/packages/editor-ui/src/components/WorkerList.ee.vue
@@ -1,23 +1,3 @@
-<template>
-	<div>
-		<PushConnectionTracker class="actions"></PushConnectionTracker>
-		<div :class="$style.workerListHeader">
-			<n8n-heading tag="h1" size="2xlarge">{{ pageTitle }}</n8n-heading>
-		</div>
-		<div v-if="!initialStatusReceived">
-			<n8n-spinner />
-		</div>
-		<div v-else>
-			<div v-if="workerIds.length === 0">{{ $locale.baseText('workerList.empty') }}</div>
-			<div v-else>
-				<div v-for="workerId in workerIds" :key="workerId" :class="$style.card">
-					<WorkerCard :worker-id="workerId" data-test-id="worker-card" />
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -119,6 +99,26 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div>
+		<PushConnectionTracker class="actions"></PushConnectionTracker>
+		<div :class="$style.workerListHeader">
+			<n8n-heading tag="h1" size="2xlarge">{{ pageTitle }}</n8n-heading>
+		</div>
+		<div v-if="!initialStatusReceived">
+			<n8n-spinner />
+		</div>
+		<div v-else>
+			<div v-if="workerIds.length === 0">{{ $locale.baseText('workerList.empty') }}</div>
+			<div v-else>
+				<div v-for="workerId in workerIds" :key="workerId" :class="$style.card">
+					<WorkerCard :worker-id="workerId" data-test-id="worker-card" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .workerListHeader {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
index 39b9b15b9a369..7a5d080050b9b 100644
--- a/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
@@ -1,18 +1,3 @@
-<template>
-	<div :class="['accordion', $style.container]">
-		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
-			<n8n-icon :icon="icon" :color="iconColor" size="small" class="mr-2xs" />
-			<n8n-text :class="$style.headerText" color="text-base" size="small" align="left" bold>
-				<slot name="title"></slot>
-			</n8n-text>
-			<n8n-icon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
-		</div>
-		<div v-if="expanded" :class="{ [$style.description]: true, [$style.collapsed]: !expanded }">
-			<slot name="content"></slot>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 
@@ -36,6 +21,21 @@ function toggle() {
 }
 </script>
 
+<template>
+	<div :class="['accordion', $style.container]">
+		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
+			<n8n-icon :icon="icon" :color="iconColor" size="small" class="mr-2xs" />
+			<n8n-text :class="$style.headerText" color="text-base" size="small" align="left" bold>
+				<slot name="title"></slot>
+			</n8n-text>
+			<n8n-icon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
+		</div>
+		<div v-if="expanded" :class="{ [$style.description]: true, [$style.collapsed]: !expanded }">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue b/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
index ac8d09aaf0ec7..541a04e831faf 100644
--- a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
@@ -1,38 +1,3 @@
-<template>
-	<n8n-card v-if="worker" :class="$style.cardLink">
-		<template #header>
-			<n8n-heading
-				tag="h2"
-				bold
-				:class="stale ? [$style.cardHeading, $style.stale] : [$style.cardHeading]"
-				data-test-id="worker-card-name"
-			>
-				Name: {{ worker.workerId }} ({{ worker.hostname }}) <br />
-				Average Load: {{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
-				{{ memAsGb(worker.freeMem).toFixed(2) }}GB / {{ memAsGb(worker.totalMem).toFixed(2) }}GB
-				{{ stale ? ' (stale)' : '' }}
-			</n8n-heading>
-		</template>
-		<div :class="$style.cardDescription">
-			<n8n-text color="text-light" size="small" :class="$style.container">
-				<span
-					>{{ $locale.baseText('workerList.item.lastUpdated') }} {{ secondsSinceLastUpdateString }}s
-					ago | n8n-Version: {{ worker.version }} | Architecture: {{ worker.arch }} (
-					{{ worker.platform }}) | Uptime: {{ upTime(worker.uptime) }}</span
-				>
-				<WorkerJobAccordion :items="worker.runningJobsSummary" />
-				<WorkerNetAccordion :items="sortedWorkerInterfaces" />
-				<WorkerChartsAccordion :worker-id="worker.workerId" />
-			</n8n-text>
-		</div>
-		<template #append>
-			<div ref="cardActions" :class="$style.cardActions">
-				<!-- For future Worker actions -->
-			</div>
-		</template>
-	</n8n-card>
-</template>
-
 <script setup lang="ts">
 import { useOrchestrationStore } from '@/stores/orchestration.store';
 import type { IPushDataWorkerStatusPayload } from '@/Interface';
@@ -88,6 +53,41 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<n8n-card v-if="worker" :class="$style.cardLink">
+		<template #header>
+			<n8n-heading
+				tag="h2"
+				bold
+				:class="stale ? [$style.cardHeading, $style.stale] : [$style.cardHeading]"
+				data-test-id="worker-card-name"
+			>
+				Name: {{ worker.workerId }} ({{ worker.hostname }}) <br />
+				Average Load: {{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
+				{{ memAsGb(worker.freeMem).toFixed(2) }}GB / {{ memAsGb(worker.totalMem).toFixed(2) }}GB
+				{{ stale ? ' (stale)' : '' }}
+			</n8n-heading>
+		</template>
+		<div :class="$style.cardDescription">
+			<n8n-text color="text-light" size="small" :class="$style.container">
+				<span
+					>{{ $locale.baseText('workerList.item.lastUpdated') }} {{ secondsSinceLastUpdateString }}s
+					ago | n8n-Version: {{ worker.version }} | Architecture: {{ worker.arch }} (
+					{{ worker.platform }}) | Uptime: {{ upTime(worker.uptime) }}</span
+				>
+				<WorkerJobAccordion :items="worker.runningJobsSummary" />
+				<WorkerNetAccordion :items="sortedWorkerInterfaces" />
+				<WorkerChartsAccordion :worker-id="worker.workerId" />
+			</n8n-text>
+		</div>
+		<template #append>
+			<div ref="cardActions" :class="$style.cardActions">
+				<!-- For future Worker actions -->
+			</div>
+		</template>
+	</n8n-card>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
index 7d930acd21b5d..4383f59673ceb 100644
--- a/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
@@ -1,36 +1,3 @@
-<template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
-		<template #title>
-			{{ $locale.baseText('workerList.item.chartsTitle') }}
-		</template>
-		<template #content>
-			<div :class="$style.charts">
-				<Chart
-					ref="chartRefJobs"
-					type="line"
-					:data="dataJobs"
-					:options="optionsJobs"
-					:class="$style.chart"
-				/>
-				<Chart
-					ref="chartRefCPU"
-					type="line"
-					:data="dataCPU"
-					:options="optionsCPU"
-					:class="$style.chart"
-				/>
-				<Chart
-					ref="chartRefMemory"
-					type="line"
-					:data="dataMemory"
-					:options="optionsMemory"
-					:class="$style.chart"
-				/>
-			</div>
-		</template>
-	</WorkerAccordion>
-</template>
-
 <script setup lang="ts">
 import WorkerAccordion from './WorkerAccordion.ee.vue';
 import { WORKER_HISTORY_LENGTH, useOrchestrationStore } from '@/stores/orchestration.store';
@@ -124,6 +91,39 @@ orchestrationStore.$onAction(({ name, store }) => {
 });
 </script>
 
+<template>
+	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
+		<template #title>
+			{{ $locale.baseText('workerList.item.chartsTitle') }}
+		</template>
+		<template #content>
+			<div :class="$style.charts">
+				<Chart
+					ref="chartRefJobs"
+					type="line"
+					:data="dataJobs"
+					:options="optionsJobs"
+					:class="$style.chart"
+				/>
+				<Chart
+					ref="chartRefCPU"
+					type="line"
+					:data="dataCPU"
+					:options="optionsCPU"
+					:class="$style.chart"
+				/>
+				<Chart
+					ref="chartRefMemory"
+					type="line"
+					:data="dataMemory"
+					:options="optionsMemory"
+					:class="$style.chart"
+				/>
+			</div>
+		</template>
+	</WorkerAccordion>
+</template>
+
 <style lang="scss" module>
 .accordionItems {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
index c8f6f949b3049..2a770eef67200 100644
--- a/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import type { WorkerJobStatusSummary } from '@/Interface';
+import WorkerAccordion from './WorkerAccordion.ee.vue';
+
+const props = defineProps<{
+	items: WorkerJobStatusSummary[];
+}>();
+
+function runningSince(started: Date): string {
+	let seconds = Math.floor((new Date().getTime() - started.getTime()) / 1000);
+	const hrs = Math.floor(seconds / 3600);
+	seconds -= hrs * 3600;
+	const mnts = Math.floor(seconds / 60);
+	seconds -= mnts * 60;
+	return `${hrs}h ${mnts}m ${Math.floor(seconds)}s`;
+}
+</script>
+
 <template>
 	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="true">
 		<template #title>
@@ -27,24 +45,6 @@
 	</WorkerAccordion>
 </template>
 
-<script setup lang="ts">
-import type { WorkerJobStatusSummary } from '@/Interface';
-import WorkerAccordion from './WorkerAccordion.ee.vue';
-
-const props = defineProps<{
-	items: WorkerJobStatusSummary[];
-}>();
-
-function runningSince(started: Date): string {
-	let seconds = Math.floor((new Date().getTime() - started.getTime()) / 1000);
-	const hrs = Math.floor(seconds / 3600);
-	seconds -= hrs * 3600;
-	const mnts = Math.floor(seconds / 60);
-	seconds -= mnts * 60;
-	return `${hrs}h ${mnts}m ${Math.floor(seconds)}s`;
-}
-</script>
-
 <style lang="scss" module>
 .accordionItems {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
index 203ad6895d916..517fc98ac01fc 100644
--- a/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
@@ -1,24 +1,3 @@
-<template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
-		<template #title>
-			{{ $locale.baseText('workerList.item.netListTitle') }} ({{ items.length }})
-		</template>
-		<template #content>
-			<div v-if="props.items.length > 0" :class="$style.accordionItems">
-				<div
-					v-for="item in props.items"
-					:key="item.address"
-					:class="$style.accordionItem"
-					@click="onCopyToClipboard(item.address)"
-				>
-					{{ item.family }}: <span :class="$style.clickable">{{ item.address }}</span>
-					{{ item.internal ? '(internal)' : '' }}
-				</div>
-			</div>
-		</template>
-	</WorkerAccordion>
-</template>
-
 <script setup lang="ts">
 import type { IPushDataWorkerStatusPayload } from '@/Interface';
 import WorkerAccordion from './WorkerAccordion.ee.vue';
@@ -45,6 +24,27 @@ function onCopyToClipboard(content: string) {
 }
 </script>
 
+<template>
+	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
+		<template #title>
+			{{ $locale.baseText('workerList.item.netListTitle') }} ({{ items.length }})
+		</template>
+		<template #content>
+			<div v-if="props.items.length > 0" :class="$style.accordionItems">
+				<div
+					v-for="item in props.items"
+					:key="item.address"
+					:class="$style.accordionItem"
+					@click="onCopyToClipboard(item.address)"
+				>
+					{{ item.family }}: <span :class="$style.clickable">{{ item.address }}</span>
+					{{ item.internal ? '(internal)' : '' }}
+				</div>
+			</div>
+		</template>
+	</WorkerAccordion>
+</template>
+
 <style lang="scss" module>
 .accordionItems {
 	display: flex;
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
index ce6ef7d64e249..69bb16737d174 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
@@ -1,14 +1,3 @@
-<template>
-	<N8nTooltip :placement="placement">
-		<button :class="$style.button" :style="{ color: '#aaa' }" @click="emit('click')">
-			<N8nIcon :icon="icon" size="small" />
-		</button>
-		<template #content>
-			{{ label }}
-		</template>
-	</N8nTooltip>
-</template>
-
 <script setup lang="ts">
 const emit = defineEmits<{
 	click: [];
@@ -21,6 +10,17 @@ defineProps<{
 }>();
 </script>
 
+<template>
+	<N8nTooltip :placement="placement">
+		<button :class="$style.button" :style="{ color: '#aaa' }" @click="emit('click')">
+			<N8nIcon :icon="icon" size="small" />
+		</button>
+		<template #content>
+			{{ label }}
+		</template>
+	</N8nTooltip>
+</template>
+
 <style module>
 .button {
 	background: none;
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
index 251a67d2bf2c6..008993fee522d 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+	placement: 'left' | 'right';
+}>();
+</script>
+
 <template>
 	<n8n-info-tip type="tooltip" theme="info-light" :tooltip-placement="placement">
 		<n8n-text :bold="true" size="small">
@@ -6,10 +12,4 @@
 	</n8n-info-tip>
 </template>
 
-<script setup lang="ts">
-defineProps<{
-	placement: 'left' | 'right';
-}>();
-</script>
-
 <style module lang="scss"></style>
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
index 333a16cc3661e..9d032f5fa1bb4 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
@@ -1,80 +1,3 @@
-<template>
-	<Modal
-		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
-		width="80%"
-		max-height="80%"
-		:title="
-			locale.baseText('chat.window.title', {
-				interpolate: {
-					nodeName: connectedNode?.name || locale.baseText('chat.window.noChatNode'),
-				},
-			})
-		"
-		:event-bus="modalBus"
-		:scrollable="false"
-		@keydown.stop
-	>
-		<template #content>
-			<div
-				:class="$style.workflowLmChat"
-				data-test-id="workflow-lm-chat-dialog"
-				:style="messageVars"
-			>
-				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
-					<template #beforeMessage="{ message }">
-						<MessageOptionTooltip
-							v-if="message.sender === 'bot' && !message.id.includes('preload')"
-							placement="right"
-						>
-							{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
-							<a href="#" @click="displayExecution(message.id)">{{ message.id }}</a>
-						</MessageOptionTooltip>
-
-						<MessageOptionAction
-							v-if="isTextMessage(message) && message.sender === 'user'"
-							data-test-id="repost-message-button"
-							icon="redo"
-							:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
-							placement="left"
-							@click="repostMessage(message)"
-						/>
-
-						<MessageOptionAction
-							v-if="isTextMessage(message) && message.sender === 'user'"
-							data-test-id="reuse-message-button"
-							icon="copy"
-							:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
-							placement="left"
-							@click="reuseMessage(message)"
-						/>
-					</template>
-				</MessagesList>
-				<div v-if="node" :class="$style.logsWrapper" data-test-id="lm-chat-logs">
-					<n8n-text :class="$style.logsTitle" tag="p" size="large">{{
-						locale.baseText('chat.window.logs')
-					}}</n8n-text>
-					<div :class="$style.logs">
-						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
-					</div>
-				</div>
-			</div>
-		</template>
-		<template #footer>
-			<ChatInput
-				:class="$style.messagesInput"
-				data-test-id="lm-chat-inputs"
-				@arrow-key-down="onArrowKeyDown"
-			/>
-			<n8n-info-tip class="mt-s">
-				{{ locale.baseText('chatEmbed.infoTip.description') }}
-				<a @click="uiStore.openModal(CHAT_EMBED_MODAL_KEY)">
-					{{ locale.baseText('chatEmbed.infoTip.link') }}
-				</a>
-			</n8n-info-tip>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import type { Ref } from 'vue';
 import { defineAsyncComponent, provide, ref, computed, onMounted, nextTick } from 'vue';
@@ -589,6 +512,83 @@ onMounted(() => {
 });
 </script>
 
+<template>
+	<Modal
+		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
+		width="80%"
+		max-height="80%"
+		:title="
+			locale.baseText('chat.window.title', {
+				interpolate: {
+					nodeName: connectedNode?.name || locale.baseText('chat.window.noChatNode'),
+				},
+			})
+		"
+		:event-bus="modalBus"
+		:scrollable="false"
+		@keydown.stop
+	>
+		<template #content>
+			<div
+				:class="$style.workflowLmChat"
+				data-test-id="workflow-lm-chat-dialog"
+				:style="messageVars"
+			>
+				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
+					<template #beforeMessage="{ message }">
+						<MessageOptionTooltip
+							v-if="message.sender === 'bot' && !message.id.includes('preload')"
+							placement="right"
+						>
+							{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
+							<a href="#" @click="displayExecution(message.id)">{{ message.id }}</a>
+						</MessageOptionTooltip>
+
+						<MessageOptionAction
+							v-if="isTextMessage(message) && message.sender === 'user'"
+							data-test-id="repost-message-button"
+							icon="redo"
+							:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
+							placement="left"
+							@click="repostMessage(message)"
+						/>
+
+						<MessageOptionAction
+							v-if="isTextMessage(message) && message.sender === 'user'"
+							data-test-id="reuse-message-button"
+							icon="copy"
+							:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
+							placement="left"
+							@click="reuseMessage(message)"
+						/>
+					</template>
+				</MessagesList>
+				<div v-if="node" :class="$style.logsWrapper" data-test-id="lm-chat-logs">
+					<n8n-text :class="$style.logsTitle" tag="p" size="large">{{
+						locale.baseText('chat.window.logs')
+					}}</n8n-text>
+					<div :class="$style.logs">
+						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<ChatInput
+				:class="$style.messagesInput"
+				data-test-id="lm-chat-inputs"
+				@arrow-key-down="onArrowKeyDown"
+			/>
+			<n8n-info-tip class="mt-s">
+				{{ locale.baseText('chatEmbed.infoTip.description') }}
+				<a @click="uiStore.openModal(CHAT_EMBED_MODAL_KEY)">
+					{{ locale.baseText('chatEmbed.infoTip.link') }}
+				</a>
+			</n8n-info-tip>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss">
 .chat-message-markdown ul,
 .chat-message-markdown ol {
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 9ca2616880f9b..4f295b924d885 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -1,27 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div v-if="loaderType === 'image' && !showPreview" :class="$style.imageLoader">
-			<n8n-loading :loading="!showPreview" :rows="1" variant="image" />
-		</div>
-		<div v-else-if="loaderType === 'spinner' && !showPreview" :class="$style.spinner">
-			<n8n-spinner type="dots" />
-		</div>
-		<iframe
-			ref="iframeRef"
-			:class="{
-				[$style.workflow]: !nodeViewDetailsOpened,
-				[$style.executionPreview]: mode === 'execution',
-				[$style.openNDV]: nodeViewDetailsOpened,
-				[$style.show]: showPreview,
-			}"
-			:src="iframeSrc"
-			data-test-id="workflow-preview-iframe"
-			@mouseenter="onMouseEnter"
-			@mouseleave="onMouseLeave"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue';
 import { useI18n } from '@/composables/useI18n';
@@ -215,6 +191,30 @@ watch(
 );
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div v-if="loaderType === 'image' && !showPreview" :class="$style.imageLoader">
+			<n8n-loading :loading="!showPreview" :rows="1" variant="image" />
+		</div>
+		<div v-else-if="loaderType === 'spinner' && !showPreview" :class="$style.spinner">
+			<n8n-spinner type="dots" />
+		</div>
+		<iframe
+			ref="iframeRef"
+			:class="{
+				[$style.workflow]: !nodeViewDetailsOpened,
+				[$style.executionPreview]: mode === 'execution',
+				[$style.openNDV]: nodeViewDetailsOpened,
+				[$style.show]: showPreview,
+			}"
+			:src="iframeSrc"
+			data-test-id="workflow-preview-iframe"
+			@mouseenter="onMouseEnter"
+			@mouseleave="onMouseLeave"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 42eac67db091c..2d915611ff07a 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -1,375 +1,22 @@
-<template>
-	<Modal
-		:name="WORKFLOW_SETTINGS_MODAL_KEY"
-		width="65%"
-		max-height="80%"
-		:title="
-			$locale.baseText('workflowSettings.settingsFor', {
-				interpolate: { workflowName, workflowId },
-			})
-		"
-		:event-bus="modalBus"
-		:scrollable="true"
-	>
-		<template #content>
-			<div v-loading="isLoading" class="workflow-settings" data-test-id="workflow-settings-dialog">
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.executionOrder') + ':' }}
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.executionOrder"
-							placeholder="Select Execution Order"
-							size="medium"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-execution-order"
-						>
-							<n8n-option
-								v-for="option in executionOrderOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.errorWorkflow') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-html="helpTexts.errorWorkflow"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.errorWorkflow"
-							placeholder="Select Workflow"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-error-workflow"
-						>
-							<n8n-option
-								v-for="item in workflows"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<div v-if="isSharingEnabled" data-test-id="workflow-caller-policy">
-					<el-row>
-						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.callerPolicy') + ':' }}
-							<n8n-tooltip placement="top">
-								<template #content>
-									<div v-text="helpTexts.workflowCallerPolicy"></div>
-								</template>
-								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
-						</el-col>
-
-						<el-col :span="14" class="ignore-key-press">
-							<n8n-select
-								v-model="workflowSettings.callerPolicy"
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:placeholder="$locale.baseText('workflowSettings.selectOption')"
-								filterable
-								:limit-popper-width="true"
-							>
-								<n8n-option
-									v-for="option of workflowCallerPolicyOptions"
-									:key="option.key"
-									:label="option.value"
-									:value="option.key"
-								>
-								</n8n-option>
-							</n8n-select>
-						</el-col>
-					</el-row>
-					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
-						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.callerIds') + ':' }}
-							<n8n-tooltip placement="top">
-								<template #content>
-									<div v-text="helpTexts.workflowCallerIds"></div>
-								</template>
-								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
-						</el-col>
-						<el-col :span="14">
-							<n8n-input
-								v-model="workflowSettings.callerIds"
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:placeholder="$locale.baseText('workflowSettings.callerIds.placeholder')"
-								type="text"
-								data-test-id="workflow-caller-policy-workflow-ids"
-								@update:model-value="onCallerIdsInput"
-							/>
-						</el-col>
-					</el-row>
-				</div>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.timezone') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.timezone"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.timezone"
-							placeholder="Select Timezone"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-timezone"
-						>
-							<n8n-option
-								v-for="timezone of timezones"
-								:key="timezone.key"
-								:label="timezone.value"
-								:value="timezone.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveDataErrorExecution"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveDataErrorExecution"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-failed-executions"
-						>
-							<n8n-option
-								v-for="option of saveDataErrorExecutionOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveDataSuccessExecution"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveDataSuccessExecution"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-success-executions"
-						>
-							<n8n-option
-								v-for="option of saveDataSuccessExecutionOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveManualExecutions"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveManualExecutions"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-manual-executions"
-						>
-							<n8n-option
-								v-for="option of saveManualOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveExecutionProgress"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveExecutionProgress"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-execution-progress"
-						>
-							<n8n-option
-								v-for="option of saveExecutionProgressOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.executionTimeoutToggle"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14">
-						<div>
-							<el-switch
-								ref="inputField"
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="(workflowSettings.executionTimeout ?? -1) > -1"
-								active-color="#13ce66"
-								data-test-id="workflow-settings-timeout-workflow"
-								@update:model-value="toggleTimeout"
-							></el-switch>
-						</div>
-					</el-col>
-				</el-row>
-				<div
-					v-if="(workflowSettings.executionTimeout ?? -1) > -1"
-					data-test-id="workflow-settings-timeout-form"
-				>
-					<el-row>
-						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.timeoutAfter') + ':' }}
-							<n8n-tooltip placement="top">
-								<template #content>
-									<div v-text="helpTexts.executionTimeout"></div>
-								</template>
-								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
-						</el-col>
-						<el-col :span="4">
-							<n8n-input
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="timeoutHMS.hours"
-								:min="0"
-								@update:model-value="(value: string) => setTimeout('hours', value)"
-							>
-								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
-							</n8n-input>
-						</el-col>
-						<el-col :span="4" class="timeout-input">
-							<n8n-input
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="timeoutHMS.minutes"
-								:min="0"
-								:max="60"
-								@update:model-value="(value: string) => setTimeout('minutes', value)"
-							>
-								<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
-							</n8n-input>
-						</el-col>
-						<el-col :span="4" class="timeout-input">
-							<n8n-input
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="timeoutHMS.seconds"
-								:min="0"
-								:max="60"
-								@update:model-value="(value: string) => setTimeout('seconds', value)"
-							>
-								<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
-							</n8n-input>
-						</el-col>
-					</el-row>
-				</div>
-			</div>
-		</template>
-		<template #footer>
-			<div class="action-buttons" data-test-id="workflow-settings-save-button">
-				<n8n-button
-					:disabled="readOnlyEnv || !workflowPermissions.update"
-					:label="$locale.baseText('workflowSettings.save')"
-					size="large"
-					float="right"
-					@click="saveSettings"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-
-import { useToast } from '@/composables/useToast';
-import type {
-	ITimeoutHMS,
-	IUser,
-	IWorkflowDataUpdate,
-	IWorkflowDb,
-	IWorkflowSettings,
-	IWorkflowShortResponse,
-} from '@/Interface';
-import Modal from '@/components/Modal.vue';
-import {
-	EnterpriseEditionFeature,
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-} from '@/constants';
+import { useToast } from '@/composables/useToast';
+import type {
+	ITimeoutHMS,
+	IUser,
+	IWorkflowDataUpdate,
+	IWorkflowDb,
+	IWorkflowSettings,
+	IWorkflowShortResponse,
+} from '@/Interface';
+import Modal from '@/components/Modal.vue';
+import {
+	EnterpriseEditionFeature,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+} from '@/constants';
 
 import type { WorkflowSettings } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
@@ -881,6 +528,359 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="WORKFLOW_SETTINGS_MODAL_KEY"
+		width="65%"
+		max-height="80%"
+		:title="
+			$locale.baseText('workflowSettings.settingsFor', {
+				interpolate: { workflowName, workflowId },
+			})
+		"
+		:event-bus="modalBus"
+		:scrollable="true"
+	>
+		<template #content>
+			<div v-loading="isLoading" class="workflow-settings" data-test-id="workflow-settings-dialog">
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.executionOrder') + ':' }}
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.executionOrder"
+							placeholder="Select Execution Order"
+							size="medium"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-execution-order"
+						>
+							<n8n-option
+								v-for="option in executionOrderOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.errorWorkflow') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-html="helpTexts.errorWorkflow"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.errorWorkflow"
+							placeholder="Select Workflow"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-error-workflow"
+						>
+							<n8n-option
+								v-for="item in workflows"
+								:key="item.id"
+								:label="item.name"
+								:value="item.id"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<div v-if="isSharingEnabled" data-test-id="workflow-caller-policy">
+					<el-row>
+						<el-col :span="10" class="setting-name">
+							{{ $locale.baseText('workflowSettings.callerPolicy') + ':' }}
+							<n8n-tooltip placement="top">
+								<template #content>
+									<div v-text="helpTexts.workflowCallerPolicy"></div>
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</n8n-tooltip>
+						</el-col>
+
+						<el-col :span="14" class="ignore-key-press">
+							<n8n-select
+								v-model="workflowSettings.callerPolicy"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:placeholder="$locale.baseText('workflowSettings.selectOption')"
+								filterable
+								:limit-popper-width="true"
+							>
+								<n8n-option
+									v-for="option of workflowCallerPolicyOptions"
+									:key="option.key"
+									:label="option.value"
+									:value="option.key"
+								>
+								</n8n-option>
+							</n8n-select>
+						</el-col>
+					</el-row>
+					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
+						<el-col :span="10" class="setting-name">
+							{{ $locale.baseText('workflowSettings.callerIds') + ':' }}
+							<n8n-tooltip placement="top">
+								<template #content>
+									<div v-text="helpTexts.workflowCallerIds"></div>
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</n8n-tooltip>
+						</el-col>
+						<el-col :span="14">
+							<n8n-input
+								v-model="workflowSettings.callerIds"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:placeholder="$locale.baseText('workflowSettings.callerIds.placeholder')"
+								type="text"
+								data-test-id="workflow-caller-policy-workflow-ids"
+								@update:model-value="onCallerIdsInput"
+							/>
+						</el-col>
+					</el-row>
+				</div>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.timezone') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.timezone"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.timezone"
+							placeholder="Select Timezone"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-timezone"
+						>
+							<n8n-option
+								v-for="timezone of timezones"
+								:key="timezone.key"
+								:label="timezone.value"
+								:value="timezone.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveDataErrorExecution"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveDataErrorExecution"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-failed-executions"
+						>
+							<n8n-option
+								v-for="option of saveDataErrorExecutionOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveDataSuccessExecution"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveDataSuccessExecution"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-success-executions"
+						>
+							<n8n-option
+								v-for="option of saveDataSuccessExecutionOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveManualExecutions"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveManualExecutions"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-manual-executions"
+						>
+							<n8n-option
+								v-for="option of saveManualOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveExecutionProgress"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveExecutionProgress"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-execution-progress"
+						>
+							<n8n-option
+								v-for="option of saveExecutionProgressOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.executionTimeoutToggle"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14">
+						<div>
+							<el-switch
+								ref="inputField"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="(workflowSettings.executionTimeout ?? -1) > -1"
+								active-color="#13ce66"
+								data-test-id="workflow-settings-timeout-workflow"
+								@update:model-value="toggleTimeout"
+							></el-switch>
+						</div>
+					</el-col>
+				</el-row>
+				<div
+					v-if="(workflowSettings.executionTimeout ?? -1) > -1"
+					data-test-id="workflow-settings-timeout-form"
+				>
+					<el-row>
+						<el-col :span="10" class="setting-name">
+							{{ $locale.baseText('workflowSettings.timeoutAfter') + ':' }}
+							<n8n-tooltip placement="top">
+								<template #content>
+									<div v-text="helpTexts.executionTimeout"></div>
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</n8n-tooltip>
+						</el-col>
+						<el-col :span="4">
+							<n8n-input
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="timeoutHMS.hours"
+								:min="0"
+								@update:model-value="(value: string) => setTimeout('hours', value)"
+							>
+								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
+							</n8n-input>
+						</el-col>
+						<el-col :span="4" class="timeout-input">
+							<n8n-input
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="timeoutHMS.minutes"
+								:min="0"
+								:max="60"
+								@update:model-value="(value: string) => setTimeout('minutes', value)"
+							>
+								<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
+							</n8n-input>
+						</el-col>
+						<el-col :span="4" class="timeout-input">
+							<n8n-input
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="timeoutHMS.seconds"
+								:min="0"
+								:max="60"
+								@update:model-value="(value: string) => setTimeout('seconds', value)"
+							>
+								<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
+							</n8n-input>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<div class="action-buttons" data-test-id="workflow-settings-save-button">
+				<n8n-button
+					:disabled="readOnlyEnv || !workflowPermissions.update"
+					:label="$locale.baseText('workflowSettings.save')"
+					size="large"
+					float="right"
+					@click="saveSettings"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style scoped lang="scss">
 .workflow-settings {
 	font-size: var(--font-size-s);
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 886ac5017644b..886bd90003e11 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -1,121 +1,3 @@
-<template>
-	<Modal
-		width="460px"
-		max-height="75%"
-		:title="modalTitle"
-		:event-bus="modalBus"
-		:name="WORKFLOW_SHARE_MODAL_KEY"
-		:center="true"
-		:before-close="onCloseModal"
-	>
-		<template #content>
-			<div v-if="!isSharingEnabled" :class="$style.container">
-				<n8n-text>
-					{{
-						$locale.baseText(
-							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description.modal,
-						)
-					}}
-				</n8n-text>
-			</div>
-			<div v-else :class="$style.container">
-				<n8n-info-tip
-					v-if="!workflowPermissions.share && !isHomeTeamProject"
-					:bold="false"
-					class="mb-s"
-				>
-					{{
-						$locale.baseText('workflows.shareModal.info.sharee', {
-							interpolate: { workflowOwnerName },
-						})
-					}}
-				</n8n-info-tip>
-				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" :class="$style.content">
-					<div>
-						<ProjectSharing
-							v-model="sharedWithProjects"
-							:home-project="workflow.homeProject"
-							:projects="projects"
-							:roles="workflowRoles"
-							:readonly="!workflowPermissions.share"
-							:static="isHomeTeamProject || !workflowPermissions.share"
-							:placeholder="$locale.baseText('workflows.shareModal.select.placeholder')"
-							@project-added="onProjectAdded"
-							@project-removed="onProjectRemoved"
-						/>
-						<n8n-info-tip v-if="isHomeTeamProject" :bold="false" class="mt-s">
-							<i18n-t keypath="workflows.shareModal.info.members" tag="span">
-								<template #projectName>
-									{{ workflow.homeProject?.name }}
-								</template>
-								<template #members>
-									<strong>
-										{{
-											$locale.baseText('workflows.shareModal.info.members.number', {
-												interpolate: {
-													number: String(numberOfMembersInHomeTeamProject),
-												},
-												adjustToNumber: numberOfMembersInHomeTeamProject,
-											})
-										}}
-									</strong>
-								</template>
-							</i18n-t>
-						</n8n-info-tip>
-					</div>
-					<template #fallback>
-						<n8n-text>
-							<i18n-t
-								:keypath="
-									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
-										.tooltip
-								"
-								tag="span"
-							>
-								<template #action />
-							</i18n-t>
-						</n8n-text>
-					</template>
-				</enterprise-edition>
-			</div>
-		</template>
-
-		<template #footer>
-			<div v-if="!isSharingEnabled" :class="$style.actionButtons">
-				<n8n-button @click="goToUpgrade">
-					{{
-						$locale.baseText(
-							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.button,
-						)
-					}}
-				</n8n-button>
-			</div>
-			<enterprise-edition
-				v-else
-				:features="[EnterpriseEditionFeature.Sharing]"
-				:class="$style.actionButtons"
-			>
-				<n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs">
-					{{ $locale.baseText('workflows.shareModal.changesHint') }}
-				</n8n-text>
-				<n8n-button v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')">
-					{{ $locale.baseText('generic.close') }}
-				</n8n-button>
-				<n8n-button
-					v-else
-					v-show="workflowPermissions.share"
-					:loading="loading"
-					:disabled="!isDirty"
-					data-test-id="workflow-sharing-modal-save-button"
-					@click="onSave"
-				>
-					{{ $locale.baseText('workflows.shareModal.save') }}
-				</n8n-button>
-			</enterprise-edition>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -374,6 +256,124 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		width="460px"
+		max-height="75%"
+		:title="modalTitle"
+		:event-bus="modalBus"
+		:name="WORKFLOW_SHARE_MODAL_KEY"
+		:center="true"
+		:before-close="onCloseModal"
+	>
+		<template #content>
+			<div v-if="!isSharingEnabled" :class="$style.container">
+				<n8n-text>
+					{{
+						$locale.baseText(
+							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description.modal,
+						)
+					}}
+				</n8n-text>
+			</div>
+			<div v-else :class="$style.container">
+				<n8n-info-tip
+					v-if="!workflowPermissions.share && !isHomeTeamProject"
+					:bold="false"
+					class="mb-s"
+				>
+					{{
+						$locale.baseText('workflows.shareModal.info.sharee', {
+							interpolate: { workflowOwnerName },
+						})
+					}}
+				</n8n-info-tip>
+				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" :class="$style.content">
+					<div>
+						<ProjectSharing
+							v-model="sharedWithProjects"
+							:home-project="workflow.homeProject"
+							:projects="projects"
+							:roles="workflowRoles"
+							:readonly="!workflowPermissions.share"
+							:static="isHomeTeamProject || !workflowPermissions.share"
+							:placeholder="$locale.baseText('workflows.shareModal.select.placeholder')"
+							@project-added="onProjectAdded"
+							@project-removed="onProjectRemoved"
+						/>
+						<n8n-info-tip v-if="isHomeTeamProject" :bold="false" class="mt-s">
+							<i18n-t keypath="workflows.shareModal.info.members" tag="span">
+								<template #projectName>
+									{{ workflow.homeProject?.name }}
+								</template>
+								<template #members>
+									<strong>
+										{{
+											$locale.baseText('workflows.shareModal.info.members.number', {
+												interpolate: {
+													number: String(numberOfMembersInHomeTeamProject),
+												},
+												adjustToNumber: numberOfMembersInHomeTeamProject,
+											})
+										}}
+									</strong>
+								</template>
+							</i18n-t>
+						</n8n-info-tip>
+					</div>
+					<template #fallback>
+						<n8n-text>
+							<i18n-t
+								:keypath="
+									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
+										.tooltip
+								"
+								tag="span"
+							>
+								<template #action />
+							</i18n-t>
+						</n8n-text>
+					</template>
+				</enterprise-edition>
+			</div>
+		</template>
+
+		<template #footer>
+			<div v-if="!isSharingEnabled" :class="$style.actionButtons">
+				<n8n-button @click="goToUpgrade">
+					{{
+						$locale.baseText(
+							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.button,
+						)
+					}}
+				</n8n-button>
+			</div>
+			<enterprise-edition
+				v-else
+				:features="[EnterpriseEditionFeature.Sharing]"
+				:class="$style.actionButtons"
+			>
+				<n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs">
+					{{ $locale.baseText('workflows.shareModal.changesHint') }}
+				</n8n-text>
+				<n8n-button v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')">
+					{{ $locale.baseText('generic.close') }}
+				</n8n-button>
+				<n8n-button
+					v-else
+					v-show="workflowPermissions.share"
+					:loading="loading"
+					:disabled="!isDirty"
+					data-test-id="workflow-sharing-modal-save-button"
+					@click="onSave"
+				>
+					{{ $locale.baseText('workflows.shareModal.save') }}
+				</n8n-button>
+			</enterprise-edition>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index cd03972b1c8ca..d5bd8cc82e33a 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -1,49 +1,3 @@
-<template>
-	<n8n-popover trigger="click" width="304" size="large">
-		<template #reference>
-			<n8n-button
-				icon="filter"
-				type="tertiary"
-				:active="hasFilters"
-				:class="$style['filter-button']"
-				data-test-id="resources-list-filters-trigger"
-			>
-				<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
-					{{ filtersLength }}
-				</n8n-badge>
-				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
-			</n8n-button>
-		</template>
-		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
-			<slot :filters="modelValue" :set-key-value="setKeyValue" />
-			<enterprise-edition
-				v-if="shareable && projectsStore.isProjectHome"
-				:features="[EnterpriseEditionFeature.Sharing]"
-			>
-				<n8n-input-label
-					:label="$locale.baseText('forms.resourceFiltersDropdown.owner')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<ProjectSharing
-					v-model="selectedProject"
-					:projects="projectsStore.projects"
-					:placeholder="$locale.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
-					:empty-options-text="$locale.baseText('projects.sharing.noMatchingProjects')"
-					@update:model-value="setKeyValue('homeProject', ($event as ProjectSharingData).id)"
-				/>
-			</enterprise-edition>
-			<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
-				<n8n-link @click="resetFilters">
-					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
-				</n8n-link>
-			</div>
-		</div>
-	</n8n-popover>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
@@ -141,6 +95,52 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<n8n-popover trigger="click" width="304" size="large">
+		<template #reference>
+			<n8n-button
+				icon="filter"
+				type="tertiary"
+				:active="hasFilters"
+				:class="$style['filter-button']"
+				data-test-id="resources-list-filters-trigger"
+			>
+				<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
+					{{ filtersLength }}
+				</n8n-badge>
+				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
+			</n8n-button>
+		</template>
+		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
+			<slot :filters="modelValue" :set-key-value="setKeyValue" />
+			<enterprise-edition
+				v-if="shareable && projectsStore.isProjectHome"
+				:features="[EnterpriseEditionFeature.Sharing]"
+			>
+				<n8n-input-label
+					:label="$locale.baseText('forms.resourceFiltersDropdown.owner')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<ProjectSharing
+					v-model="selectedProject"
+					:projects="projectsStore.projects"
+					:placeholder="$locale.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
+					:empty-options-text="$locale.baseText('projects.sharing.noMatchingProjects')"
+					@update:model-value="setKeyValue('homeProject', ($event as ProjectSharingData).id)"
+				/>
+			</enterprise-edition>
+			<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
+				<n8n-link @click="resetFilters">
+					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
+				</n8n-link>
+			</div>
+		</div>
+	</n8n-popover>
+</template>
+
 <style lang="scss" module>
 .filter-button {
 	height: 40px;
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index 523fdfc28ab2c..abb1ba02a04b6 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -1,12 +1,3 @@
-<template>
-	<div :class="$style.wrapper">
-		<slot name="header" />
-		<main :class="$style.content">
-			<slot />
-		</main>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -25,6 +16,15 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.wrapper">
+		<slot name="header" />
+		<main :class="$style.content">
+			<slot />
+		</main>
+	</div>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: grid;
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 648b1d5eddd46..74f3c7d7d35b8 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -1,150 +1,3 @@
-<template>
-	<PageViewLayout>
-		<template #header> <slot name="header" /> </template>
-		<div v-if="loading" class="resource-list-loading">
-			<n8n-loading :rows="25" :shrink-last="false" />
-		</div>
-		<template v-else>
-			<div v-if="resources.length === 0">
-				<slot name="empty">
-					<n8n-action-box
-						data-test-id="empty-resources-list"
-						emoji="👋"
-						:heading="
-							i18n.baseText(
-								usersStore.currentUser?.firstName
-									? (`${resourceKey}.empty.heading` as BaseTextKey)
-									: (`${resourceKey}.empty.heading.userNotSetup` as BaseTextKey),
-								{
-									interpolate: { name: usersStore.currentUser?.firstName ?? '' },
-								},
-							)
-						"
-						:description="i18n.baseText(`${resourceKey}.empty.description` as BaseTextKey)"
-						:button-text="i18n.baseText(`${resourceKey}.empty.button` as BaseTextKey)"
-						button-type="secondary"
-						:button-disabled="disabled"
-						@click:button="onAddButtonClick"
-					>
-						<template #disabledButtonTooltip>
-							{{ i18n.baseText(`${resourceKey}.empty.button.disabled.tooltip` as BaseTextKey) }}
-						</template>
-					</n8n-action-box>
-				</slot>
-			</div>
-			<PageViewLayoutList v-else :overflow="type !== 'list'">
-				<template #header>
-					<div :class="$style['filters-row']">
-						<div :class="$style.filters">
-							<n8n-input
-								ref="search"
-								:model-value="filtersModel.search"
-								:class="[$style['search'], 'mr-2xs']"
-								:placeholder="i18n.baseText(`${resourceKey}.search.placeholder` as BaseTextKey)"
-								clearable
-								data-test-id="resources-list-search"
-								@update:model-value="onSearch"
-							>
-								<template #prefix>
-									<n8n-icon icon="search" />
-								</template>
-							</n8n-input>
-							<ResourceFiltersDropdown
-								v-if="showFiltersDropdown"
-								:keys="filterKeys"
-								:reset="resetFilters"
-								:model-value="filtersModel"
-								:shareable="shareable"
-								@update:model-value="onUpdateFilters"
-								@update:filters-length="onUpdateFiltersLength"
-							>
-								<template #default="resourceFiltersSlotProps">
-									<slot name="filters" v-bind="resourceFiltersSlotProps" />
-								</template>
-							</ResourceFiltersDropdown>
-							<div :class="$style['sort-and-filter']">
-								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
-									<n8n-option
-										v-for="sortOption in sortOptions"
-										:key="sortOption"
-										data-test-id="resources-list-sort-item"
-										:value="sortOption"
-										:label="i18n.baseText(`${resourceKey}.sort.${sortOption}` as BaseTextKey)"
-									/>
-								</n8n-select>
-							</div>
-						</div>
-						<slot name="add-button" :disabled="disabled">
-							<n8n-button
-								size="large"
-								:disabled="disabled"
-								data-test-id="resources-list-add"
-								@click="onAddButtonClick"
-							>
-								{{ i18n.baseText(`${resourceKey}.add` as BaseTextKey) }}
-							</n8n-button>
-						</slot>
-					</div>
-
-					<slot name="callout"></slot>
-
-					<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
-						<n8n-info-tip :bold="false">
-							{{ i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) }}
-							<n8n-link data-test-id="workflows-filter-reset" size="small" @click="resetFilters">
-								{{ i18n.baseText(`${resourceKey}.filters.active.reset` as BaseTextKey) }}
-							</n8n-link>
-						</n8n-info-tip>
-					</div>
-
-					<div class="pb-xs" />
-				</template>
-
-				<slot name="preamble" />
-
-				<div
-					v-if="filteredAndSortedResources.length > 0"
-					ref="listWrapperRef"
-					:class="$style.listWrapper"
-				>
-					<n8n-recycle-scroller
-						v-if="type === 'list'"
-						data-test-id="resources-list"
-						:items="filteredAndSortedResources"
-						:item-size="itemSize()"
-						item-key="id"
-					>
-						<template #default="{ item, updateItemSize }">
-							<slot :data="item" :update-item-size="updateItemSize" />
-						</template>
-					</n8n-recycle-scroller>
-					<n8n-datatable
-						v-if="type === 'datatable'"
-						data-test-id="resources-table"
-						:class="$style.datatable"
-						:columns="getColumns()"
-						:rows="filteredAndSortedResources"
-						:current-page="currentPage"
-						:rows-per-page="rowsPerPage"
-						@update:current-page="setCurrentPage"
-						@update:rows-per-page="setRowsPerPage"
-					>
-						<template #row="{ columns, row }">
-							<slot :data="row" :columns="columns" />
-						</template>
-					</n8n-datatable>
-				</div>
-
-				<n8n-text v-else color="text-base" size="medium" data-test-id="resources-list-empty">
-					{{ i18n.baseText(`${resourceKey}.noResults` as BaseTextKey) }}
-				</n8n-text>
-
-				<slot name="postamble" />
-			</PageViewLayoutList>
-		</template>
-	</PageViewLayout>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, nextTick, ref, onMounted, watch } from 'vue';
 import type { PropType } from 'vue';
@@ -514,6 +367,153 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<PageViewLayout>
+		<template #header> <slot name="header" /> </template>
+		<div v-if="loading" class="resource-list-loading">
+			<n8n-loading :rows="25" :shrink-last="false" />
+		</div>
+		<template v-else>
+			<div v-if="resources.length === 0">
+				<slot name="empty">
+					<n8n-action-box
+						data-test-id="empty-resources-list"
+						emoji="👋"
+						:heading="
+							i18n.baseText(
+								usersStore.currentUser?.firstName
+									? (`${resourceKey}.empty.heading` as BaseTextKey)
+									: (`${resourceKey}.empty.heading.userNotSetup` as BaseTextKey),
+								{
+									interpolate: { name: usersStore.currentUser?.firstName ?? '' },
+								},
+							)
+						"
+						:description="i18n.baseText(`${resourceKey}.empty.description` as BaseTextKey)"
+						:button-text="i18n.baseText(`${resourceKey}.empty.button` as BaseTextKey)"
+						button-type="secondary"
+						:button-disabled="disabled"
+						@click:button="onAddButtonClick"
+					>
+						<template #disabledButtonTooltip>
+							{{ i18n.baseText(`${resourceKey}.empty.button.disabled.tooltip` as BaseTextKey) }}
+						</template>
+					</n8n-action-box>
+				</slot>
+			</div>
+			<PageViewLayoutList v-else :overflow="type !== 'list'">
+				<template #header>
+					<div :class="$style['filters-row']">
+						<div :class="$style.filters">
+							<n8n-input
+								ref="search"
+								:model-value="filtersModel.search"
+								:class="[$style['search'], 'mr-2xs']"
+								:placeholder="i18n.baseText(`${resourceKey}.search.placeholder` as BaseTextKey)"
+								clearable
+								data-test-id="resources-list-search"
+								@update:model-value="onSearch"
+							>
+								<template #prefix>
+									<n8n-icon icon="search" />
+								</template>
+							</n8n-input>
+							<ResourceFiltersDropdown
+								v-if="showFiltersDropdown"
+								:keys="filterKeys"
+								:reset="resetFilters"
+								:model-value="filtersModel"
+								:shareable="shareable"
+								@update:model-value="onUpdateFilters"
+								@update:filters-length="onUpdateFiltersLength"
+							>
+								<template #default="resourceFiltersSlotProps">
+									<slot name="filters" v-bind="resourceFiltersSlotProps" />
+								</template>
+							</ResourceFiltersDropdown>
+							<div :class="$style['sort-and-filter']">
+								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
+									<n8n-option
+										v-for="sortOption in sortOptions"
+										:key="sortOption"
+										data-test-id="resources-list-sort-item"
+										:value="sortOption"
+										:label="i18n.baseText(`${resourceKey}.sort.${sortOption}` as BaseTextKey)"
+									/>
+								</n8n-select>
+							</div>
+						</div>
+						<slot name="add-button" :disabled="disabled">
+							<n8n-button
+								size="large"
+								:disabled="disabled"
+								data-test-id="resources-list-add"
+								@click="onAddButtonClick"
+							>
+								{{ i18n.baseText(`${resourceKey}.add` as BaseTextKey) }}
+							</n8n-button>
+						</slot>
+					</div>
+
+					<slot name="callout"></slot>
+
+					<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
+						<n8n-info-tip :bold="false">
+							{{ i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) }}
+							<n8n-link data-test-id="workflows-filter-reset" size="small" @click="resetFilters">
+								{{ i18n.baseText(`${resourceKey}.filters.active.reset` as BaseTextKey) }}
+							</n8n-link>
+						</n8n-info-tip>
+					</div>
+
+					<div class="pb-xs" />
+				</template>
+
+				<slot name="preamble" />
+
+				<div
+					v-if="filteredAndSortedResources.length > 0"
+					ref="listWrapperRef"
+					:class="$style.listWrapper"
+				>
+					<n8n-recycle-scroller
+						v-if="type === 'list'"
+						data-test-id="resources-list"
+						:items="filteredAndSortedResources"
+						:item-size="itemSize()"
+						item-key="id"
+					>
+						<template #default="{ item, updateItemSize }">
+							<slot :data="item" :update-item-size="updateItemSize" />
+						</template>
+					</n8n-recycle-scroller>
+					<n8n-datatable
+						v-if="type === 'datatable'"
+						data-test-id="resources-table"
+						:class="$style.datatable"
+						:columns="getColumns()"
+						:rows="filteredAndSortedResources"
+						:current-page="currentPage"
+						:rows-per-page="rowsPerPage"
+						@update:current-page="setCurrentPage"
+						@update:rows-per-page="setRowsPerPage"
+					>
+						<template #row="{ columns, row }">
+							<slot :data="row" :columns="columns" />
+						</template>
+					</n8n-datatable>
+				</div>
+
+				<n8n-text v-else color="text-base" size="medium" data-test-id="resources-list-empty">
+					{{ i18n.baseText(`${resourceKey}.noResults` as BaseTextKey) }}
+				</n8n-text>
+
+				<slot name="postamble" />
+			</PageViewLayoutList>
+		</template>
+	</PageViewLayout>
+</template>
+
 <style lang="scss" module>
 .filters-row {
 	display: flex;
diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue
index 3c95a67cb907e..871b9f9bf590d 100644
--- a/packages/editor-ui/src/views/AuthView.vue
+++ b/packages/editor-ui/src/views/AuthView.vue
@@ -1,26 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.logoContainer">
-			<Logo />
-		</div>
-		<div v-if="subtitle" :class="$style.textContainer">
-			<n8n-text size="large">{{ subtitle }}</n8n-text>
-		</div>
-		<div :class="$style.formContainer">
-			<n8n-form-box
-				v-bind="form"
-				data-test-id="auth-form"
-				:button-loading="formLoading"
-				@secondary-click="onSecondaryClick"
-				@submit="onSubmit"
-				@update="onUpdate"
-			>
-				<SSOLogin v-if="withSso" />
-			</n8n-form-box>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 
@@ -64,6 +41,29 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.logoContainer">
+			<Logo />
+		</div>
+		<div v-if="subtitle" :class="$style.textContainer">
+			<n8n-text size="large">{{ subtitle }}</n8n-text>
+		</div>
+		<div :class="$style.formContainer">
+			<n8n-form-box
+				v-bind="form"
+				data-test-id="auth-form"
+				:button-loading="formLoading"
+				@secondary-click="onSecondaryClick"
+				@submit="onSubmit"
+				@update="onUpdate"
+			>
+				<SSOLogin v-if="withSso" />
+			</n8n-form-box>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 body {
 	background-color: var(--color-background-light);
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 05590a9573cf5..ff7b37b4e33bb 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { XYPosition } from '@/Interface';
+import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+
+export interface Props {
+	showTooltip: boolean;
+	position: XYPosition;
+}
+
+const props = defineProps<Props>();
+
+const nodeCreatorStore = useNodeCreatorStore();
+const containerCssVars = computed(() => ({
+	'--trigger-placeholder-left-position': `${props.position[0]}px`,
+	'--trigger-placeholder-top-position': `${props.position[1]}px`,
+}));
+</script>
+
 <template>
 	<div
 		ref="container"
@@ -23,25 +42,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { XYPosition } from '@/Interface';
-import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
-
-export interface Props {
-	showTooltip: boolean;
-	position: XYPosition;
-}
-
-const props = defineProps<Props>();
-
-const nodeCreatorStore = useNodeCreatorStore();
-const containerCssVars = computed(() => ({
-	'--trigger-placeholder-left-position': `${props.position[0]}px`,
-	'--trigger-placeholder-top-position': `${props.position[1]}px`,
-}));
-</script>
-
 <style lang="scss" module>
 .canvasAddButton {
 	display: flex;
diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue
index a7598a4697938..d45bc30efa8b1 100644
--- a/packages/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/editor-ui/src/views/ChangePasswordView.vue
@@ -1,13 +1,3 @@
-<template>
-	<AuthView
-		v-if="config"
-		:form="config"
-		:form-loading="loading"
-		@submit="onSubmit"
-		@update="onInput"
-	/>
-</template>
-
 <script lang="ts">
 import AuthView from '@/views/AuthView.vue';
 import { useToast } from '@/composables/useToast';
@@ -170,3 +160,13 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<AuthView
+		v-if="config"
+		:form="config"
+		:form-loading="loading"
+		@submit="onSubmit"
+		@update="onInput"
+	/>
+</template>
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index fe71fcb8fff72..28f7e5655c019 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -1,66 +1,3 @@
-<template>
-	<ResourcesListLayout
-		ref="layout"
-		resource-key="credentials"
-		:resources="allCredentials"
-		:initialize="initialize"
-		:filters="filters"
-		:additional-filters-handler="onFilter"
-		:type-props="{ itemSize: 77 }"
-		:loading="loading"
-		:disabled="readOnlyEnv || !projectPermissions.credential.create"
-		@click:add="addCredential"
-		@update:filters="filters = $event"
-	>
-		<template #header>
-			<ProjectTabs />
-		</template>
-		<template #add-button="{ disabled }">
-			<div>
-				<n8n-button
-					size="large"
-					block
-					:disabled="disabled"
-					data-test-id="resources-list-add"
-					@click="addCredential"
-				>
-					{{ addCredentialButtonText }}
-				</n8n-button>
-			</div>
-		</template>
-		<template #default="{ data }">
-			<CredentialCard data-test-id="resources-list-item" class="mb-2xs" :data="data" />
-		</template>
-		<template #filters="{ setKeyValue }">
-			<div class="mb-s">
-				<n8n-input-label
-					:label="$locale.baseText('credentials.filters.type')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<n8n-select
-					ref="typeInput"
-					:model-value="filters.type"
-					size="medium"
-					multiple
-					filterable
-					:class="$style['type-input']"
-					@update:model-value="setKeyValue('type', $event)"
-				>
-					<n8n-option
-						v-for="credentialType in allCredentialTypes"
-						:key="credentialType.name"
-						:value="credentialType.name"
-						:label="credentialType.displayName"
-					/>
-				</n8n-select>
-			</div>
-		</template>
-	</ResourcesListLayout>
-</template>
-
 <script lang="ts">
 import type { ICredentialsResponse, ICredentialTypeMap } from '@/Interface';
 import { defineComponent } from 'vue';
@@ -211,6 +148,69 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<ResourcesListLayout
+		ref="layout"
+		resource-key="credentials"
+		:resources="allCredentials"
+		:initialize="initialize"
+		:filters="filters"
+		:additional-filters-handler="onFilter"
+		:type-props="{ itemSize: 77 }"
+		:loading="loading"
+		:disabled="readOnlyEnv || !projectPermissions.credential.create"
+		@click:add="addCredential"
+		@update:filters="filters = $event"
+	>
+		<template #header>
+			<ProjectTabs />
+		</template>
+		<template #add-button="{ disabled }">
+			<div>
+				<n8n-button
+					size="large"
+					block
+					:disabled="disabled"
+					data-test-id="resources-list-add"
+					@click="addCredential"
+				>
+					{{ addCredentialButtonText }}
+				</n8n-button>
+			</div>
+		</template>
+		<template #default="{ data }">
+			<CredentialCard data-test-id="resources-list-item" class="mb-2xs" :data="data" />
+		</template>
+		<template #filters="{ setKeyValue }">
+			<div class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('credentials.filters.type')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<n8n-select
+					ref="typeInput"
+					:model-value="filters.type"
+					size="medium"
+					multiple
+					filterable
+					:class="$style['type-input']"
+					@update:model-value="setKeyValue('type', $event)"
+				>
+					<n8n-option
+						v-for="credentialType in allCredentialTypes"
+						:key="credentialType.name"
+						:value="credentialType.name"
+						:label="credentialType.displayName"
+					/>
+				</n8n-select>
+			</div>
+		</template>
+	</ResourcesListLayout>
+</template>
+
 <style lang="scss" module>
 .type-input {
 	--max-width: 265px;
diff --git a/packages/editor-ui/src/views/ErrorView.vue b/packages/editor-ui/src/views/ErrorView.vue
index 1a0a1fc4da841..93935fe576fde 100644
--- a/packages/editor-ui/src/views/ErrorView.vue
+++ b/packages/editor-ui/src/views/ErrorView.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import type { BaseTextKey } from '@/plugins/i18n';
+import { useRouter } from 'vue-router';
+import { VIEWS } from '@/constants';
+const router = useRouter();
+
+const props = defineProps<{
+	messageKey: BaseTextKey;
+	errorCode: number;
+	redirectTextKey: BaseTextKey;
+	redirectPage?: keyof typeof VIEWS;
+}>();
+
+function onButtonClick() {
+	void router.push({ name: props.redirectPage ?? VIEWS.HOMEPAGE });
+}
+</script>
+
 <template>
 	<div :class="$style.container">
 		<font-awesome-icon icon="exclamation-triangle" :class="$style.icon" />
@@ -17,24 +35,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import type { BaseTextKey } from '@/plugins/i18n';
-import { useRouter } from 'vue-router';
-import { VIEWS } from '@/constants';
-const router = useRouter();
-
-const props = defineProps<{
-	messageKey: BaseTextKey;
-	errorCode: number;
-	redirectTextKey: BaseTextKey;
-	redirectPage?: keyof typeof VIEWS;
-}>();
-
-function onButtonClick() {
-	void router.push({ name: props.redirectPage ?? VIEWS.HOMEPAGE });
-}
-</script>
-
 <style lang="scss" module>
 .container {
 	height: 100%;
diff --git a/packages/editor-ui/src/views/ForgotMyPasswordView.vue b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
index b04ef8e7609be..f365798571b00 100644
--- a/packages/editor-ui/src/views/ForgotMyPasswordView.vue
+++ b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
@@ -1,7 +1,3 @@
-<template>
-	<AuthView :form="formConfig" :form-loading="loading" @submit="onSubmit" />
-</template>
-
 <script lang="ts">
 import AuthView from './AuthView.vue';
 import { useToast } from '@/composables/useToast';
@@ -108,3 +104,7 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<AuthView :form="formConfig" :form-loading="loading" @submit="onSubmit" />
+</template>
diff --git a/packages/editor-ui/src/views/MfaView.vue b/packages/editor-ui/src/views/MfaView.vue
index b4bbe14105f0e..71b6ff9243f82 100644
--- a/packages/editor-ui/src/views/MfaView.vue
+++ b/packages/editor-ui/src/views/MfaView.vue
@@ -1,73 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.logoContainer">
-			<Logo />
-		</div>
-		<n8n-card>
-			<div :class="$style.headerContainer">
-				<n8n-heading size="xlarge" color="text-dark">{{
-					showRecoveryCodeForm
-						? i18.baseText('mfa.recovery.modal.title')
-						: i18.baseText('mfa.code.modal.title')
-				}}</n8n-heading>
-			</div>
-			<div :class="[$style.formContainer, reportError ? $style.formError : '']">
-				<n8n-form-inputs
-					v-if="formInputs"
-					data-test-id="mfa-login-form"
-					:inputs="formInputs"
-					:event-bus="formBus"
-					@input="onInput"
-					@submit="onSubmit"
-				/>
-				<div :class="$style.infoBox">
-					<n8n-text
-						v-if="!showRecoveryCodeForm && !reportError"
-						size="small"
-						color="text-base"
-						:bold="false"
-						>{{ i18.baseText('mfa.code.input.info') }}
-						<a data-test-id="mfa-enter-recovery-code-button" @click="onRecoveryCodeClick">{{
-							i18.baseText('mfa.code.input.info.action')
-						}}</a></n8n-text
-					>
-					<n8n-text v-if="reportError" color="danger" size="small"
-						>{{ formError }}
-						<a
-							v-if="!showRecoveryCodeForm"
-							:class="$style.recoveryCodeLink"
-							@click="onRecoveryCodeClick"
-						>
-							{{ i18.baseText('mfa.recovery.input.info.action') }}</a
-						>
-					</n8n-text>
-				</div>
-			</div>
-			<div>
-				<n8n-button
-					float="right"
-					:loading="verifyingMfaToken"
-					:label="
-						showRecoveryCodeForm
-							? i18.baseText('mfa.recovery.button.verify')
-							: i18.baseText('mfa.code.button.continue')
-					"
-					size="large"
-					:disabled="!hasAnyChanges"
-					@click="onSaveClick"
-				/>
-				<n8n-button
-					float="left"
-					:label="i18.baseText('mfa.button.back')"
-					size="large"
-					type="tertiary"
-					@click="onBackClick"
-				/>
-			</div>
-		</n8n-card>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { IFormInputs } from '@/Interface';
 import Logo from '../components/Logo.vue';
@@ -233,6 +163,76 @@ onMounted(() => {
 // #endregion
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.logoContainer">
+			<Logo />
+		</div>
+		<n8n-card>
+			<div :class="$style.headerContainer">
+				<n8n-heading size="xlarge" color="text-dark">{{
+					showRecoveryCodeForm
+						? i18.baseText('mfa.recovery.modal.title')
+						: i18.baseText('mfa.code.modal.title')
+				}}</n8n-heading>
+			</div>
+			<div :class="[$style.formContainer, reportError ? $style.formError : '']">
+				<n8n-form-inputs
+					v-if="formInputs"
+					data-test-id="mfa-login-form"
+					:inputs="formInputs"
+					:event-bus="formBus"
+					@input="onInput"
+					@submit="onSubmit"
+				/>
+				<div :class="$style.infoBox">
+					<n8n-text
+						v-if="!showRecoveryCodeForm && !reportError"
+						size="small"
+						color="text-base"
+						:bold="false"
+						>{{ i18.baseText('mfa.code.input.info') }}
+						<a data-test-id="mfa-enter-recovery-code-button" @click="onRecoveryCodeClick">{{
+							i18.baseText('mfa.code.input.info.action')
+						}}</a></n8n-text
+					>
+					<n8n-text v-if="reportError" color="danger" size="small"
+						>{{ formError }}
+						<a
+							v-if="!showRecoveryCodeForm"
+							:class="$style.recoveryCodeLink"
+							@click="onRecoveryCodeClick"
+						>
+							{{ i18.baseText('mfa.recovery.input.info.action') }}</a
+						>
+					</n8n-text>
+				</div>
+			</div>
+			<div>
+				<n8n-button
+					float="right"
+					:loading="verifyingMfaToken"
+					:label="
+						showRecoveryCodeForm
+							? i18.baseText('mfa.recovery.button.verify')
+							: i18.baseText('mfa.code.button.continue')
+					"
+					size="large"
+					:disabled="!hasAnyChanges"
+					@click="onSaveClick"
+				/>
+				<n8n-button
+					float="left"
+					:label="i18.baseText('mfa.button.back')"
+					size="large"
+					type="tertiary"
+					@click="onBackClick"
+				/>
+			</div>
+		</n8n-card>
+	</div>
+</template>
+
 <style lang="scss" module>
 body {
 	background-color: var(--color-background-light);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 6bcc74bd2b1e8..266b4c1fda084 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1,222 +1,3 @@
-<template>
-	<div ref="nodeViewRootRef" :class="$style['content']">
-		<div
-			id="node-view-root"
-			class="node-view-root do-not-select"
-			data-test-id="node-view-root"
-			@dragover="onDragOver"
-			@drop="onDrop"
-		>
-			<div
-				v-touch:tap="touchTap"
-				class="node-view-wrapper"
-				:class="workflowClasses"
-				data-test-id="node-view-wrapper"
-				@touchstart="mouseDown"
-				@touchend="mouseUp"
-				@touchmove="canvasPanning.onMouseMove"
-				@mousedown="mouseDown"
-				@mouseup="mouseUp"
-				@contextmenu="onContextMenu"
-				@wheel="canvasStore.wheelScroll"
-			>
-				<div
-					id="node-view-background"
-					class="node-view-background"
-					:style="backgroundStyle"
-					data-test-id="node-view-background"
-				/>
-				<div
-					id="node-view"
-					ref="nodeViewRef"
-					class="node-view"
-					:style="workflowStyle"
-					data-test-id="node-view"
-				>
-					<CanvasAddButton
-						v-show="showCanvasAddButton"
-						ref="canvasAddButton"
-						:style="canvasAddButtonStyle"
-						:show-tooltip="!containsTrigger && showTriggerMissingTooltip"
-						:position="canvasStore.canvasAddButtonPosition"
-						data-test-id="canvas-add-button"
-						@click="onCanvasAddButtonCLick"
-						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
-					/>
-					<Node
-						v-for="nodeData in nodesToRender"
-						:key="`${nodeData.id}_node`"
-						:name="nodeData.name"
-						:is-read-only="
-							isReadOnlyRoute ||
-							readOnlyEnv ||
-							!(workflowPermissions.update ?? projectPermissions.workflow.update)
-						"
-						:instance="instance"
-						:is-active="!!activeNode && activeNode.name === nodeData.name"
-						:hide-actions="pullConnActive"
-						:is-production-execution-preview="isProductionExecutionPreview"
-						:workflow="currentWorkflowObject"
-						:disable-pointer-events="!canOpenNDV"
-						:hide-node-issues="hideNodeIssues"
-						@deselect-all-nodes="deselectAllNodes"
-						@deselect-node="nodeDeselectedByName"
-						@node-selected="nodeSelectedByName"
-						@run-workflow="onRunNode"
-						@moved="onNodeMoved"
-						@run="onNodeRun"
-						@remove-node="(name) => removeNode(name, true)"
-						@toggle-disable-node="(node) => toggleActivationNodes([node])"
-					>
-						<template #custom-tooltip>
-							<span
-								v-text="$locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting')"
-							/>
-						</template>
-					</Node>
-					<Sticky
-						v-for="stickyData in stickiesToRender"
-						:key="`${stickyData.id}_sticky`"
-						:name="stickyData.name"
-						:workflow="currentWorkflowObject"
-						:is-read-only="
-							isReadOnlyRoute ||
-							readOnlyEnv ||
-							!(workflowPermissions.update ?? projectPermissions.workflow.update)
-						"
-						:instance="instance"
-						:is-active="!!activeNode && activeNode.name === stickyData.name"
-						:node-view-scale="nodeViewScale"
-						:grid-size="GRID_SIZE"
-						:hide-actions="pullConnActive"
-						@deselect-all-nodes="deselectAllNodes"
-						@deselect-node="nodeDeselectedByName"
-						@node-selected="nodeSelectedByName"
-						@remove-node="(name) => removeNode(name, true)"
-					/>
-				</div>
-			</div>
-			<NodeDetailsView
-				:workflow-object="currentWorkflowObject"
-				:read-only="
-					isReadOnlyRoute ||
-					readOnlyEnv ||
-					!(workflowPermissions.update ?? projectPermissions.workflow.update)
-				"
-				:renaming="renamingActive"
-				:is-production-execution-preview="isProductionExecutionPreview"
-				@redraw-node="redrawNode"
-				@switch-selected-node="onSwitchSelectedNode"
-				@open-connection-node-creator="onOpenConnectionNodeCreator"
-				@value-changed="valueChanged"
-				@stop-execution="stopExecution"
-				@save-keyboard-shortcut="onSaveKeyboardShortcut"
-			/>
-			<Suspense>
-				<div :class="$style.setupCredentialsButtonWrapper">
-					<LazySetupWorkflowCredentialsButton />
-				</div>
-			</Suspense>
-			<Suspense>
-				<LazyNodeCreation
-					v-if="
-						!isReadOnlyRoute &&
-						!readOnlyEnv &&
-						(workflowPermissions.update ?? projectPermissions.workflow.update)
-					"
-					:create-node-active="createNodeActive"
-					:node-view-scale="nodeViewScale"
-					@toggle-node-creator="onToggleNodeCreator"
-					@add-nodes="onAddNodes"
-				/>
-			</Suspense>
-			<Suspense>
-				<LazyCanvasControls />
-			</Suspense>
-			<Suspense>
-				<ContextMenu @action="onContextMenuAction" />
-			</Suspense>
-			<div
-				v-if="
-					!isReadOnlyRoute &&
-					!readOnlyEnv &&
-					(workflowPermissions.update ?? projectPermissions.workflow.update)
-				"
-				class="workflow-execute-wrapper"
-			>
-				<span
-					v-if="!isManualChatOnly"
-					@mouseenter="showTriggerMissingToltip(true)"
-					@mouseleave="showTriggerMissingToltip(false)"
-					@click="onRunContainerClick"
-				>
-					<KeyboardShortcutTooltip
-						:label="runButtonText"
-						:shortcut="{ metaKey: true, keys: ['↵'] }"
-					>
-						<n8n-button
-							:loading="workflowRunning"
-							:label="runButtonText"
-							size="large"
-							icon="flask"
-							type="primary"
-							:disabled="isExecutionDisabled"
-							data-test-id="execute-workflow-button"
-							@click.stop="onRunWorkflow"
-						/>
-					</KeyboardShortcutTooltip>
-				</span>
-
-				<n8n-button
-					v-if="containsChatNodes"
-					label="Chat"
-					size="large"
-					icon="comment"
-					type="primary"
-					data-test-id="workflow-chat-button"
-					@click.stop="onOpenChat"
-				/>
-
-				<n8n-icon-button
-					v-if="workflowRunning === true && !executionWaitingForWebhook"
-					icon="stop"
-					size="large"
-					class="stop-execution"
-					type="secondary"
-					:title="
-						stopExecutionInProgress
-							? $locale.baseText('nodeView.stoppingCurrentExecution')
-							: $locale.baseText('nodeView.stopCurrentExecution')
-					"
-					:loading="stopExecutionInProgress"
-					data-test-id="stop-execution-button"
-					@click.stop="stopExecution"
-				/>
-
-				<n8n-icon-button
-					v-if="workflowRunning === true && executionWaitingForWebhook === true"
-					class="stop-execution"
-					icon="stop"
-					size="large"
-					:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
-					type="secondary"
-					data-test-id="stop-execution-waiting-for-webhook-button"
-					@click.stop="stopWaitingForWebhook"
-				/>
-
-				<n8n-icon-button
-					v-if="workflowExecution && !workflowRunning && !allTriggersDisabled"
-					:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
-					icon="trash"
-					size="large"
-					data-test-id="clear-execution-data-button"
-					@click.stop="clearExecutionData"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, nextTick, ref } from 'vue';
 import { mapStores, storeToRefs } from 'pinia';
@@ -4685,6 +4466,225 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div ref="nodeViewRootRef" :class="$style['content']">
+		<div
+			id="node-view-root"
+			class="node-view-root do-not-select"
+			data-test-id="node-view-root"
+			@dragover="onDragOver"
+			@drop="onDrop"
+		>
+			<div
+				v-touch:tap="touchTap"
+				class="node-view-wrapper"
+				:class="workflowClasses"
+				data-test-id="node-view-wrapper"
+				@touchstart="mouseDown"
+				@touchend="mouseUp"
+				@touchmove="canvasPanning.onMouseMove"
+				@mousedown="mouseDown"
+				@mouseup="mouseUp"
+				@contextmenu="onContextMenu"
+				@wheel="canvasStore.wheelScroll"
+			>
+				<div
+					id="node-view-background"
+					class="node-view-background"
+					:style="backgroundStyle"
+					data-test-id="node-view-background"
+				/>
+				<div
+					id="node-view"
+					ref="nodeViewRef"
+					class="node-view"
+					:style="workflowStyle"
+					data-test-id="node-view"
+				>
+					<CanvasAddButton
+						v-show="showCanvasAddButton"
+						ref="canvasAddButton"
+						:style="canvasAddButtonStyle"
+						:show-tooltip="!containsTrigger && showTriggerMissingTooltip"
+						:position="canvasStore.canvasAddButtonPosition"
+						data-test-id="canvas-add-button"
+						@click="onCanvasAddButtonCLick"
+						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
+					/>
+					<Node
+						v-for="nodeData in nodesToRender"
+						:key="`${nodeData.id}_node`"
+						:name="nodeData.name"
+						:is-read-only="
+							isReadOnlyRoute ||
+							readOnlyEnv ||
+							!(workflowPermissions.update ?? projectPermissions.workflow.update)
+						"
+						:instance="instance"
+						:is-active="!!activeNode && activeNode.name === nodeData.name"
+						:hide-actions="pullConnActive"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:workflow="currentWorkflowObject"
+						:disable-pointer-events="!canOpenNDV"
+						:hide-node-issues="hideNodeIssues"
+						@deselect-all-nodes="deselectAllNodes"
+						@deselect-node="nodeDeselectedByName"
+						@node-selected="nodeSelectedByName"
+						@run-workflow="onRunNode"
+						@moved="onNodeMoved"
+						@run="onNodeRun"
+						@remove-node="(name) => removeNode(name, true)"
+						@toggle-disable-node="(node) => toggleActivationNodes([node])"
+					>
+						<template #custom-tooltip>
+							<span
+								v-text="$locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting')"
+							/>
+						</template>
+					</Node>
+					<Sticky
+						v-for="stickyData in stickiesToRender"
+						:key="`${stickyData.id}_sticky`"
+						:name="stickyData.name"
+						:workflow="currentWorkflowObject"
+						:is-read-only="
+							isReadOnlyRoute ||
+							readOnlyEnv ||
+							!(workflowPermissions.update ?? projectPermissions.workflow.update)
+						"
+						:instance="instance"
+						:is-active="!!activeNode && activeNode.name === stickyData.name"
+						:node-view-scale="nodeViewScale"
+						:grid-size="GRID_SIZE"
+						:hide-actions="pullConnActive"
+						@deselect-all-nodes="deselectAllNodes"
+						@deselect-node="nodeDeselectedByName"
+						@node-selected="nodeSelectedByName"
+						@remove-node="(name) => removeNode(name, true)"
+					/>
+				</div>
+			</div>
+			<NodeDetailsView
+				:workflow-object="currentWorkflowObject"
+				:read-only="
+					isReadOnlyRoute ||
+					readOnlyEnv ||
+					!(workflowPermissions.update ?? projectPermissions.workflow.update)
+				"
+				:renaming="renamingActive"
+				:is-production-execution-preview="isProductionExecutionPreview"
+				@redraw-node="redrawNode"
+				@switch-selected-node="onSwitchSelectedNode"
+				@open-connection-node-creator="onOpenConnectionNodeCreator"
+				@value-changed="valueChanged"
+				@stop-execution="stopExecution"
+				@save-keyboard-shortcut="onSaveKeyboardShortcut"
+			/>
+			<Suspense>
+				<div :class="$style.setupCredentialsButtonWrapper">
+					<LazySetupWorkflowCredentialsButton />
+				</div>
+			</Suspense>
+			<Suspense>
+				<LazyNodeCreation
+					v-if="
+						!isReadOnlyRoute &&
+						!readOnlyEnv &&
+						(workflowPermissions.update ?? projectPermissions.workflow.update)
+					"
+					:create-node-active="createNodeActive"
+					:node-view-scale="nodeViewScale"
+					@toggle-node-creator="onToggleNodeCreator"
+					@add-nodes="onAddNodes"
+				/>
+			</Suspense>
+			<Suspense>
+				<LazyCanvasControls />
+			</Suspense>
+			<Suspense>
+				<ContextMenu @action="onContextMenuAction" />
+			</Suspense>
+			<div
+				v-if="
+					!isReadOnlyRoute &&
+					!readOnlyEnv &&
+					(workflowPermissions.update ?? projectPermissions.workflow.update)
+				"
+				class="workflow-execute-wrapper"
+			>
+				<span
+					v-if="!isManualChatOnly"
+					@mouseenter="showTriggerMissingToltip(true)"
+					@mouseleave="showTriggerMissingToltip(false)"
+					@click="onRunContainerClick"
+				>
+					<KeyboardShortcutTooltip
+						:label="runButtonText"
+						:shortcut="{ metaKey: true, keys: ['↵'] }"
+					>
+						<n8n-button
+							:loading="workflowRunning"
+							:label="runButtonText"
+							size="large"
+							icon="flask"
+							type="primary"
+							:disabled="isExecutionDisabled"
+							data-test-id="execute-workflow-button"
+							@click.stop="onRunWorkflow"
+						/>
+					</KeyboardShortcutTooltip>
+				</span>
+
+				<n8n-button
+					v-if="containsChatNodes"
+					label="Chat"
+					size="large"
+					icon="comment"
+					type="primary"
+					data-test-id="workflow-chat-button"
+					@click.stop="onOpenChat"
+				/>
+
+				<n8n-icon-button
+					v-if="workflowRunning === true && !executionWaitingForWebhook"
+					icon="stop"
+					size="large"
+					class="stop-execution"
+					type="secondary"
+					:title="
+						stopExecutionInProgress
+							? $locale.baseText('nodeView.stoppingCurrentExecution')
+							: $locale.baseText('nodeView.stopCurrentExecution')
+					"
+					:loading="stopExecutionInProgress"
+					data-test-id="stop-execution-button"
+					@click.stop="stopExecution"
+				/>
+
+				<n8n-icon-button
+					v-if="workflowRunning === true && executionWaitingForWebhook === true"
+					class="stop-execution"
+					icon="stop"
+					size="large"
+					:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
+					type="secondary"
+					data-test-id="stop-execution-waiting-for-webhook-button"
+					@click.stop="stopWaitingForWebhook"
+				/>
+
+				<n8n-icon-button
+					v-if="workflowExecution && !workflowRunning && !allTriggersDisabled"
+					:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
+					icon="trash"
+					size="large"
+					data-test-id="clear-execution-data-button"
+					@click.stop="clearExecutionData"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .node-view-root {
 	position: relative;
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index d5b8bcb5a671c..7ad6781839705 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -1,91 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.header">
-			<n8n-heading size="2xlarge">
-				{{ $locale.baseText('settings.api') }}
-				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }">
-					({{ $locale.baseText('generic.beta') }})
-				</span>
-			</n8n-heading>
-		</div>
-
-		<div v-if="apiKey">
-			<p class="mb-s">
-				<n8n-info-tip :bold="false">
-					<i18n-t keypath="settings.api.view.info" tag="span">
-						<template #apiAction>
-							<a
-								href="https://docs.n8n.io/api"
-								target="_blank"
-								v-text="$locale.baseText('settings.api.view.info.api')"
-							/>
-						</template>
-						<template #webhookAction>
-							<a
-								href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
-								target="_blank"
-								v-text="$locale.baseText('settings.api.view.info.webhook')"
-							/>
-						</template>
-					</i18n-t>
-				</n8n-info-tip>
-			</p>
-			<n8n-card class="mb-4xs" :class="$style.card">
-				<span :class="$style.delete">
-					<n8n-link :bold="true" @click="showDeleteModal">
-						{{ $locale.baseText('generic.delete') }}
-					</n8n-link>
-				</span>
-				<div>
-					<CopyInput
-						:label="$locale.baseText('settings.api.view.myKey')"
-						:value="apiKey"
-						:copy-button-text="$locale.baseText('generic.clickToCopy')"
-						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
-						:redact-value="true"
-						:disable-copy="isRedactedApiKey"
-						:hint="!isRedactedApiKey ? $locale.baseText('settings.api.view.copy') : ''"
-						@copy="onCopy"
-					/>
-				</div>
-			</n8n-card>
-			<div :class="$style.hint">
-				<n8n-text size="small">
-					{{
-						$locale.baseText(`settings.api.view.${swaggerUIEnabled ? 'tryapi' : 'more-details'}`)
-					}}
-				</n8n-text>
-				{{ ' ' }}
-				<n8n-link :to="apiDocsURL" :new-window="true" size="small">
-					{{
-						$locale.baseText(
-							`settings.api.view.${swaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`,
-						)
-					}}
-				</n8n-link>
-			</div>
-		</div>
-		<n8n-action-box
-			v-else-if="!isPublicApiEnabled && isTrialing"
-			data-test-id="public-api-upgrade-cta"
-			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
-			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
-			:button-text="$locale.baseText('settings.api.trial.upgradePlan.cta')"
-			@click:button="onUpgrade"
-		/>
-		<n8n-action-box
-			v-else-if="mounted && !isLoadingCloudPlans"
-			:button-text="
-				$locale.baseText(
-					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
-				)
-			"
-			:description="$locale.baseText('settings.api.create.description')"
-			@click:button="createApiKey"
-		/>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { IUser } from '@/Interface';
@@ -211,6 +123,94 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.header">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText('settings.api') }}
+				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }">
+					({{ $locale.baseText('generic.beta') }})
+				</span>
+			</n8n-heading>
+		</div>
+
+		<div v-if="apiKey">
+			<p class="mb-s">
+				<n8n-info-tip :bold="false">
+					<i18n-t keypath="settings.api.view.info" tag="span">
+						<template #apiAction>
+							<a
+								href="https://docs.n8n.io/api"
+								target="_blank"
+								v-text="$locale.baseText('settings.api.view.info.api')"
+							/>
+						</template>
+						<template #webhookAction>
+							<a
+								href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
+								target="_blank"
+								v-text="$locale.baseText('settings.api.view.info.webhook')"
+							/>
+						</template>
+					</i18n-t>
+				</n8n-info-tip>
+			</p>
+			<n8n-card class="mb-4xs" :class="$style.card">
+				<span :class="$style.delete">
+					<n8n-link :bold="true" @click="showDeleteModal">
+						{{ $locale.baseText('generic.delete') }}
+					</n8n-link>
+				</span>
+				<div>
+					<CopyInput
+						:label="$locale.baseText('settings.api.view.myKey')"
+						:value="apiKey"
+						:copy-button-text="$locale.baseText('generic.clickToCopy')"
+						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
+						:redact-value="true"
+						:disable-copy="isRedactedApiKey"
+						:hint="!isRedactedApiKey ? $locale.baseText('settings.api.view.copy') : ''"
+						@copy="onCopy"
+					/>
+				</div>
+			</n8n-card>
+			<div :class="$style.hint">
+				<n8n-text size="small">
+					{{
+						$locale.baseText(`settings.api.view.${swaggerUIEnabled ? 'tryapi' : 'more-details'}`)
+					}}
+				</n8n-text>
+				{{ ' ' }}
+				<n8n-link :to="apiDocsURL" :new-window="true" size="small">
+					{{
+						$locale.baseText(
+							`settings.api.view.${swaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`,
+						)
+					}}
+				</n8n-link>
+			</div>
+		</div>
+		<n8n-action-box
+			v-else-if="!isPublicApiEnabled && isTrialing"
+			data-test-id="public-api-upgrade-cta"
+			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
+			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
+			:button-text="$locale.baseText('settings.api.trial.upgradePlan.cta')"
+			@click:button="onUpgrade"
+		/>
+		<n8n-action-box
+			v-else-if="mounted && !isLoadingCloudPlans"
+			:button-text="
+				$locale.baseText(
+					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
+				)
+			"
+			:description="$locale.baseText('settings.api.create.description')"
+			@click:button="createApiKey"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index 194a289eb1b9b..b720c5478d192 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -1,44 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.headingContainer">
-			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
-			<n8n-button
-				v-if="communityNodesStore.getInstalledPackages.length > 0 && !loading"
-				:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
-				size="large"
-				@click="openInstallModal"
-			/>
-		</div>
-		<div v-if="loading" :class="$style.cardsContainer">
-			<CommunityPackageCard
-				v-for="n in 2"
-				:key="'index-' + n"
-				:loading="true"
-			></CommunityPackageCard>
-		</div>
-		<div
-			v-else-if="communityNodesStore.getInstalledPackages.length === 0"
-			:class="$style.actionBoxContainer"
-		>
-			<n8n-action-box
-				:heading="$locale.baseText('settings.communityNodes.empty.title')"
-				:description="getEmptyStateDescription"
-				:button-text="getEmptyStateButtonText"
-				:callout-text="actionBoxConfig.calloutText"
-				:callout-theme="actionBoxConfig.calloutTheme"
-				@click:button="onClickEmptyStateButton"
-			/>
-		</div>
-		<div v-else :class="$style.cardsContainer">
-			<CommunityPackageCard
-				v-for="communityPackage in communityNodesStore.getInstalledPackages"
-				:key="communityPackage.packageName"
-				:community-package="communityPackage"
-			></CommunityPackageCard>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
@@ -215,6 +174,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.headingContainer">
+			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
+			<n8n-button
+				v-if="communityNodesStore.getInstalledPackages.length > 0 && !loading"
+				:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
+				size="large"
+				@click="openInstallModal"
+			/>
+		</div>
+		<div v-if="loading" :class="$style.cardsContainer">
+			<CommunityPackageCard
+				v-for="n in 2"
+				:key="'index-' + n"
+				:loading="true"
+			></CommunityPackageCard>
+		</div>
+		<div
+			v-else-if="communityNodesStore.getInstalledPackages.length === 0"
+			:class="$style.actionBoxContainer"
+		>
+			<n8n-action-box
+				:heading="$locale.baseText('settings.communityNodes.empty.title')"
+				:description="getEmptyStateDescription"
+				:button-text="getEmptyStateButtonText"
+				:callout-text="actionBoxConfig.calloutText"
+				:callout-theme="actionBoxConfig.calloutTheme"
+				@click:button="onClickEmptyStateButton"
+			/>
+		</div>
+		<div v-else :class="$style.cardsContainer">
+			<CommunityPackageCard
+				v-for="communityPackage in communityNodesStore.getInstalledPackages"
+				:key="communityPackage.packageName"
+				:community-package="communityPackage"
+			></CommunityPackageCard>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	height: 100%;
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index 4398c117fcce2..403bd696b9667 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -1,7 +1,3 @@
-<template>
-	<FeatureComingSoon :feature-id="featureId" show-title />
-</template>
-
 <script lang="ts">
 import type { IFakeDoor } from '@/Interface';
 import { defineComponent } from 'vue';
@@ -36,6 +32,10 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<FeatureComingSoon :feature-id="featureId" show-title />
+</template>
+
 <style lang="scss" module>
 .header {
 	display: flex;
diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue
index bdfd8247696b9..8feca49da78c4 100644
--- a/packages/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/editor-ui/src/views/SettingsLdapView.vue
@@ -1,137 +1,3 @@
-<template>
-	<div v-if="!isLDAPFeatureEnabled">
-		<div :class="[$style.header, 'mb-2xl']">
-			<n8n-heading size="2xlarge">
-				{{ $locale.baseText('settings.ldap') }}
-			</n8n-heading>
-		</div>
-
-		<n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l">
-			{{ $locale.baseText('settings.ldap.note') }}
-		</n8n-info-tip>
-		<n8n-action-box
-			:description="$locale.baseText('settings.ldap.disabled.description')"
-			:button-text="$locale.baseText('settings.ldap.disabled.buttonText')"
-			@click:button="goToUpgrade"
-		>
-			<template #heading>
-				<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
-			</template>
-		</n8n-action-box>
-	</div>
-	<div v-else>
-		<div :class="$style.container">
-			<div :class="$style.header">
-				<n8n-heading size="2xlarge">
-					{{ $locale.baseText('settings.ldap') }}
-				</n8n-heading>
-			</div>
-			<div :class="$style.docsInfoTip">
-				<n8n-info-tip theme="info" type="note">
-					<span v-html="$locale.baseText('settings.ldap.infoTip')"></span>
-				</n8n-info-tip>
-			</div>
-			<div :class="$style.settingsForm">
-				<n8n-form-inputs
-					v-if="formInputs"
-					ref="ldapConfigForm"
-					:inputs="formInputs"
-					:event-bus="formBus"
-					:column-view="true"
-					vertical-spacing="l"
-					@update="onInput"
-					@ready="onReadyToSubmit"
-					@submit="onSubmit"
-				/>
-			</div>
-			<div>
-				<n8n-button
-					v-if="loginEnabled"
-					:label="
-						loadingTestConnection
-							? $locale.baseText('settings.ldap.testingConnection')
-							: $locale.baseText('settings.ldap.testConnection')
-					"
-					size="large"
-					class="mr-s"
-					:disabled="hasAnyChanges || !readyToSubmit"
-					:loading="loadingTestConnection"
-					@click="onTestConnectionClick"
-				/>
-				<n8n-button
-					:label="$locale.baseText('settings.ldap.save')"
-					size="large"
-					:disabled="!hasAnyChanges || !readyToSubmit"
-					@click="onSaveClick"
-				/>
-			</div>
-		</div>
-		<div v-if="loginEnabled">
-			<n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{
-				$locale.baseText('settings.ldap.section.synchronization.title')
-			}}</n8n-heading>
-			<div :class="$style.syncTable">
-				<ElTable
-					:key="tableKey"
-					v-loading="loadingTable"
-					:border="true"
-					:stripe="true"
-					:data="dataTable"
-					:cell-style="cellClassStyle"
-					style="width: 100%"
-					max-height="250"
-				>
-					<ElTableColumn
-						prop="status"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
-					/>
-					<ElTableColumn
-						prop="endedAt"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
-					/>
-					<ElTableColumn
-						prop="runMode"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
-					/>
-					<ElTableColumn
-						prop="runTime"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
-					/>
-					<ElTableColumn
-						prop="details"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
-					/>
-					<template #empty>{{
-						$locale.baseText('settings.ldap.synchronizationTable.empty.message')
-					}}</template>
-					<template #append>
-						<InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations">
-						</InfiniteLoading>
-					</template>
-				</ElTable>
-			</div>
-			<div class="pb-3xl">
-				<n8n-button
-					:label="$locale.baseText('settings.ldap.dryRun')"
-					type="secondary"
-					size="large"
-					class="mr-s"
-					:disabled="hasAnyChanges || !readyToSubmit"
-					:loading="loadingDryRun"
-					@click="onDryRunClick"
-				/>
-				<n8n-button
-					:label="$locale.baseText('settings.ldap.synchronizeNow')"
-					size="large"
-					:disabled="hasAnyChanges || !readyToSubmit"
-					:loading="loadingLiveRun"
-					@click="onLiveRunClick"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type { CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
@@ -737,6 +603,140 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="!isLDAPFeatureEnabled">
+		<div :class="[$style.header, 'mb-2xl']">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText('settings.ldap') }}
+			</n8n-heading>
+		</div>
+
+		<n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l">
+			{{ $locale.baseText('settings.ldap.note') }}
+		</n8n-info-tip>
+		<n8n-action-box
+			:description="$locale.baseText('settings.ldap.disabled.description')"
+			:button-text="$locale.baseText('settings.ldap.disabled.buttonText')"
+			@click:button="goToUpgrade"
+		>
+			<template #heading>
+				<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
+			</template>
+		</n8n-action-box>
+	</div>
+	<div v-else>
+		<div :class="$style.container">
+			<div :class="$style.header">
+				<n8n-heading size="2xlarge">
+					{{ $locale.baseText('settings.ldap') }}
+				</n8n-heading>
+			</div>
+			<div :class="$style.docsInfoTip">
+				<n8n-info-tip theme="info" type="note">
+					<span v-html="$locale.baseText('settings.ldap.infoTip')"></span>
+				</n8n-info-tip>
+			</div>
+			<div :class="$style.settingsForm">
+				<n8n-form-inputs
+					v-if="formInputs"
+					ref="ldapConfigForm"
+					:inputs="formInputs"
+					:event-bus="formBus"
+					:column-view="true"
+					vertical-spacing="l"
+					@update="onInput"
+					@ready="onReadyToSubmit"
+					@submit="onSubmit"
+				/>
+			</div>
+			<div>
+				<n8n-button
+					v-if="loginEnabled"
+					:label="
+						loadingTestConnection
+							? $locale.baseText('settings.ldap.testingConnection')
+							: $locale.baseText('settings.ldap.testConnection')
+					"
+					size="large"
+					class="mr-s"
+					:disabled="hasAnyChanges || !readyToSubmit"
+					:loading="loadingTestConnection"
+					@click="onTestConnectionClick"
+				/>
+				<n8n-button
+					:label="$locale.baseText('settings.ldap.save')"
+					size="large"
+					:disabled="!hasAnyChanges || !readyToSubmit"
+					@click="onSaveClick"
+				/>
+			</div>
+		</div>
+		<div v-if="loginEnabled">
+			<n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{
+				$locale.baseText('settings.ldap.section.synchronization.title')
+			}}</n8n-heading>
+			<div :class="$style.syncTable">
+				<ElTable
+					:key="tableKey"
+					v-loading="loadingTable"
+					:border="true"
+					:stripe="true"
+					:data="dataTable"
+					:cell-style="cellClassStyle"
+					style="width: 100%"
+					max-height="250"
+				>
+					<ElTableColumn
+						prop="status"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
+					/>
+					<ElTableColumn
+						prop="endedAt"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
+					/>
+					<ElTableColumn
+						prop="runMode"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
+					/>
+					<ElTableColumn
+						prop="runTime"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
+					/>
+					<ElTableColumn
+						prop="details"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
+					/>
+					<template #empty>{{
+						$locale.baseText('settings.ldap.synchronizationTable.empty.message')
+					}}</template>
+					<template #append>
+						<InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations">
+						</InfiniteLoading>
+					</template>
+				</ElTable>
+			</div>
+			<div class="pb-3xl">
+				<n8n-button
+					:label="$locale.baseText('settings.ldap.dryRun')"
+					type="secondary"
+					size="large"
+					class="mr-s"
+					:disabled="hasAnyChanges || !readyToSubmit"
+					:loading="loadingDryRun"
+					@click="onDryRunClick"
+				/>
+				<n8n-button
+					:label="$locale.baseText('settings.ldap.synchronizeNow')"
+					size="large"
+					:disabled="hasAnyChanges || !readyToSubmit"
+					:loading="loadingLiveRun"
+					@click="onLiveRunClick"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/views/SettingsLogStreamingView.vue b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
index 29fb285e4e590..e8abb67e64d2a 100644
--- a/packages/editor-ui/src/views/SettingsLogStreamingView.vue
+++ b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
@@ -1,77 +1,3 @@
-<template>
-	<div>
-		<div :class="$style.header">
-			<div class="mb-2xl">
-				<n8n-heading size="2xlarge">
-					{{ $locale.baseText(`settings.log-streaming.heading`) }}
-				</n8n-heading>
-				<template v-if="environment !== 'production'">
-					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
-					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
-				</template>
-			</div>
-		</div>
-		<template v-if="isLicensed">
-			<div class="mb-l">
-				<n8n-info-tip theme="info" type="note">
-					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
-				</n8n-info-tip>
-			</div>
-			<template v-if="storeHasItems()">
-				<el-row
-					v-for="item in sortedItemKeysByLabel"
-					:key="item.key"
-					:gutter="10"
-					:class="$style.destinationItem"
-				>
-					<el-col v-if="logStreamingStore.items[item.key]?.destination">
-						<EventDestinationCard
-							:destination="logStreamingStore.items[item.key]?.destination"
-							:event-bus="eventBus"
-							:readonly="!canManageLogStreaming"
-							@remove="onRemove(logStreamingStore.items[item.key]?.destination?.id)"
-							@edit="onEdit(logStreamingStore.items[item.key]?.destination?.id)"
-						/>
-					</el-col>
-				</el-row>
-				<div class="mt-m text-right">
-					<n8n-button v-if="canManageLogStreaming" size="large" @click="addDestination">
-						{{ $locale.baseText(`settings.log-streaming.add`) }}
-					</n8n-button>
-				</div>
-			</template>
-			<div v-else data-test-id="action-box-licensed">
-				<n8n-action-box
-					:button-text="$locale.baseText(`settings.log-streaming.add`)"
-					@click:button="addDestination"
-				>
-					<template #heading>
-						<span v-html="$locale.baseText(`settings.log-streaming.addFirstTitle`)" />
-					</template>
-				</n8n-action-box>
-			</div>
-		</template>
-		<template v-else>
-			<div v-if="$locale.baseText('settings.log-streaming.infoText')" class="mb-l">
-				<n8n-info-tip theme="info" type="note">
-					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
-				</n8n-info-tip>
-			</div>
-			<div data-test-id="action-box-unlicensed">
-				<n8n-action-box
-					:description="$locale.baseText('settings.log-streaming.actionBox.description')"
-					:button-text="$locale.baseText('settings.log-streaming.actionBox.button')"
-					@click:button="goToUpgrade"
-				>
-					<template #heading>
-						<span v-html="$locale.baseText('settings.log-streaming.actionBox.title')" />
-					</template>
-				</n8n-action-box>
-			</div>
-		</template>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent, nextTick } from 'vue';
 import { mapStores } from 'pinia';
@@ -233,6 +159,80 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div>
+		<div :class="$style.header">
+			<div class="mb-2xl">
+				<n8n-heading size="2xlarge">
+					{{ $locale.baseText(`settings.log-streaming.heading`) }}
+				</n8n-heading>
+				<template v-if="environment !== 'production'">
+					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
+					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
+				</template>
+			</div>
+		</div>
+		<template v-if="isLicensed">
+			<div class="mb-l">
+				<n8n-info-tip theme="info" type="note">
+					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
+				</n8n-info-tip>
+			</div>
+			<template v-if="storeHasItems()">
+				<el-row
+					v-for="item in sortedItemKeysByLabel"
+					:key="item.key"
+					:gutter="10"
+					:class="$style.destinationItem"
+				>
+					<el-col v-if="logStreamingStore.items[item.key]?.destination">
+						<EventDestinationCard
+							:destination="logStreamingStore.items[item.key]?.destination"
+							:event-bus="eventBus"
+							:readonly="!canManageLogStreaming"
+							@remove="onRemove(logStreamingStore.items[item.key]?.destination?.id)"
+							@edit="onEdit(logStreamingStore.items[item.key]?.destination?.id)"
+						/>
+					</el-col>
+				</el-row>
+				<div class="mt-m text-right">
+					<n8n-button v-if="canManageLogStreaming" size="large" @click="addDestination">
+						{{ $locale.baseText(`settings.log-streaming.add`) }}
+					</n8n-button>
+				</div>
+			</template>
+			<div v-else data-test-id="action-box-licensed">
+				<n8n-action-box
+					:button-text="$locale.baseText(`settings.log-streaming.add`)"
+					@click:button="addDestination"
+				>
+					<template #heading>
+						<span v-html="$locale.baseText(`settings.log-streaming.addFirstTitle`)" />
+					</template>
+				</n8n-action-box>
+			</div>
+		</template>
+		<template v-else>
+			<div v-if="$locale.baseText('settings.log-streaming.infoText')" class="mb-l">
+				<n8n-info-tip theme="info" type="note">
+					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
+				</n8n-info-tip>
+			</div>
+			<div data-test-id="action-box-unlicensed">
+				<n8n-action-box
+					:description="$locale.baseText('settings.log-streaming.actionBox.description')"
+					:button-text="$locale.baseText('settings.log-streaming.actionBox.button')"
+					@click:button="goToUpgrade"
+				>
+					<template #heading>
+						<span v-html="$locale.baseText('settings.log-streaming.actionBox.title')" />
+					</template>
+				</n8n-action-box>
+			</div>
+		</template>
+	</div>
+</template>
+
 <style lang="scss" module>
 .header {
 	display: flex;
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index c85735374cf5d..53dc8267fe14b 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -1,12 +1,3 @@
-<template>
-	<AuthView
-		:form="FORM_CONFIG"
-		:form-loading="loading"
-		data-test-id="setup-form"
-		@submit="onSubmit"
-	/>
-</template>
-
 <script lang="ts">
 import AuthView from './AuthView.vue';
 import { defineComponent } from 'vue';
@@ -129,3 +120,12 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<AuthView
+		:form="FORM_CONFIG"
+		:form-loading="loading"
+		data-test-id="setup-form"
+		@submit="onSubmit"
+	/>
+</template>
diff --git a/packages/editor-ui/src/views/SigninView.vue b/packages/editor-ui/src/views/SigninView.vue
index c5af41e29c2a1..e4a62a883d32b 100644
--- a/packages/editor-ui/src/views/SigninView.vue
+++ b/packages/editor-ui/src/views/SigninView.vue
@@ -1,23 +1,3 @@
-<template>
-	<div>
-		<AuthView
-			v-if="!showMfaView"
-			:form="FORM_CONFIG"
-			:form-loading="loading"
-			:with-sso="true"
-			data-test-id="signin-form"
-			@submit="onEmailPasswordSubmitted"
-		/>
-		<MfaView
-			v-if="showMfaView"
-			:report-error="reportError"
-			@submit="onMFASubmitted"
-			@on-back-click="onBackClick"
-			@on-form-changed="onFormChanged"
-		/>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import AuthView from './AuthView.vue';
@@ -200,3 +180,23 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<AuthView
+			v-if="!showMfaView"
+			:form="FORM_CONFIG"
+			:form-loading="loading"
+			:with-sso="true"
+			data-test-id="signin-form"
+			@submit="onEmailPasswordSubmitted"
+		/>
+		<MfaView
+			v-if="showMfaView"
+			:report-error="reportError"
+			@submit="onMFASubmitted"
+			@on-back-click="onBackClick"
+			@on-form-changed="onFormChanged"
+		/>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 0ddf6ec5952c2..626b7d26f5d38 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -1,54 +1,3 @@
-<template>
-	<TemplatesView :go-back-enabled="true">
-		<template #header>
-			<div v-if="!notFoundError" :class="$style.wrapper">
-				<div :class="$style.title">
-					<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge">
-						{{ collection.name }}
-					</n8n-heading>
-					<n8n-text v-if="collection && collection.name" color="text-base" size="small">
-						{{ $locale.baseText('templates.collection') }}
-					</n8n-text>
-					<n8n-loading :loading="!collection || !collection.name" :rows="2" variant="h1" />
-				</div>
-			</div>
-			<div v-else :class="$style.notFound">
-				<n8n-text color="text-base">{{
-					$locale.baseText('templates.collectionsNotFound')
-				}}</n8n-text>
-			</div>
-		</template>
-		<template v-if="!notFoundError" #content>
-			<div :class="$style.wrapper">
-				<div :class="$style.mainContent">
-					<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
-						<n8n-markdown
-							:content="isFullTemplatesCollection(collection) && collection.description"
-							:images="isFullTemplatesCollection(collection) && collection.image"
-							:loading="loading"
-						/>
-					</div>
-					<TemplateList
-						:infinite-scroll-enabled="false"
-						:loading="loading"
-						:use-workflow-button="true"
-						:workflows="collectionWorkflows"
-						@use-workflow="onUseWorkflow"
-						@open-template="onOpenTemplate"
-					/>
-				</div>
-				<div :class="$style.details">
-					<TemplateDetails
-						:block-title="$locale.baseText('template.details.appsInTheCollection')"
-						:loading="loading"
-						:template="collection"
-					/>
-				</div>
-			</div>
-		</template>
-	</TemplatesView>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -177,6 +126,57 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<TemplatesView :go-back-enabled="true">
+		<template #header>
+			<div v-if="!notFoundError" :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge">
+						{{ collection.name }}
+					</n8n-heading>
+					<n8n-text v-if="collection && collection.name" color="text-base" size="small">
+						{{ $locale.baseText('templates.collection') }}
+					</n8n-text>
+					<n8n-loading :loading="!collection || !collection.name" :rows="2" variant="h1" />
+				</div>
+			</div>
+			<div v-else :class="$style.notFound">
+				<n8n-text color="text-base">{{
+					$locale.baseText('templates.collectionsNotFound')
+				}}</n8n-text>
+			</div>
+		</template>
+		<template v-if="!notFoundError" #content>
+			<div :class="$style.wrapper">
+				<div :class="$style.mainContent">
+					<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
+						<n8n-markdown
+							:content="isFullTemplatesCollection(collection) && collection.description"
+							:images="isFullTemplatesCollection(collection) && collection.image"
+							:loading="loading"
+						/>
+					</div>
+					<TemplateList
+						:infinite-scroll-enabled="false"
+						:loading="loading"
+						:use-workflow-button="true"
+						:workflows="collectionWorkflows"
+						@use-workflow="onUseWorkflow"
+						@open-template="onOpenTemplate"
+					/>
+				</div>
+				<div :class="$style.details">
+					<TemplateDetails
+						:block-title="$locale.baseText('template.details.appsInTheCollection')"
+						:loading="loading"
+						:template="collection"
+					/>
+				</div>
+			</div>
+		</template>
+	</TemplatesView>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 05a2359ea5fe9..61ce8b42e0fe0 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -1,86 +1,3 @@
-<template>
-	<TemplatesView>
-		<template #header>
-			<div :class="$style.wrapper">
-				<div :class="$style.title">
-					<n8n-heading tag="h1" size="2xlarge">
-						{{ $locale.baseText('templates.heading') }}
-					</n8n-heading>
-				</div>
-				<div :class="$style.button">
-					<n8n-button
-						size="large"
-						type="secondary"
-						element="a"
-						:href="creatorHubUrl"
-						:label="$locale.baseText('templates.shareWorkflow')"
-						target="_blank"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #content>
-			<div :class="$style.contentWrapper">
-				<div :class="$style.filters">
-					<TemplateFilters
-						:categories="templatesStore.allCategories"
-						:sort-on-populate="areCategoriesPrepopulated"
-						:selected="categories"
-						:loading="loadingCategories"
-						@clear="onCategoryUnselected"
-						@clear-all="onCategoriesCleared"
-						@select="onCategorySelected"
-					/>
-				</div>
-				<div :class="$style.search">
-					<n8n-input
-						:model-value="search"
-						:placeholder="$locale.baseText('templates.searchPlaceholder')"
-						clearable
-						data-test-id="template-search-input"
-						@update:model-value="onSearchInput"
-						@blur="trackSearch"
-					>
-						<template #prefix>
-							<font-awesome-icon icon="search" />
-						</template>
-					</n8n-input>
-					<div v-show="collections.length || loadingCollections" :class="$style.carouselContainer">
-						<div :class="$style.header">
-							<n8n-heading :bold="true" size="medium" color="text-light">
-								{{ $locale.baseText('templates.collections') }}
-								<span
-									v-if="!loadingCollections"
-									data-test-id="collection-count-label"
-									v-text="`(${collections.length})`"
-								/>
-							</n8n-heading>
-						</div>
-						<TemplatesInfoCarousel
-							:collections="collections"
-							:loading="loadingCollections"
-							@open-collection="onOpenCollection"
-						/>
-					</div>
-					<TemplateList
-						:infinite-scroll-enabled="true"
-						:loading="loadingWorkflows"
-						:workflows="workflows"
-						:total-count="totalWorkflows"
-						@load-more="onLoadMore"
-						@open-template="onOpenTemplate"
-					/>
-					<div v-if="endOfSearchMessage" :class="$style.endText">
-						<n8n-text size="medium" color="text-base">
-							<span v-html="endOfSearchMessage" />
-						</n8n-text>
-					</div>
-				</div>
-			</div>
-		</template>
-	</TemplatesView>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -419,6 +336,89 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<TemplatesView>
+		<template #header>
+			<div :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading tag="h1" size="2xlarge">
+						{{ $locale.baseText('templates.heading') }}
+					</n8n-heading>
+				</div>
+				<div :class="$style.button">
+					<n8n-button
+						size="large"
+						type="secondary"
+						element="a"
+						:href="creatorHubUrl"
+						:label="$locale.baseText('templates.shareWorkflow')"
+						target="_blank"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #content>
+			<div :class="$style.contentWrapper">
+				<div :class="$style.filters">
+					<TemplateFilters
+						:categories="templatesStore.allCategories"
+						:sort-on-populate="areCategoriesPrepopulated"
+						:selected="categories"
+						:loading="loadingCategories"
+						@clear="onCategoryUnselected"
+						@clear-all="onCategoriesCleared"
+						@select="onCategorySelected"
+					/>
+				</div>
+				<div :class="$style.search">
+					<n8n-input
+						:model-value="search"
+						:placeholder="$locale.baseText('templates.searchPlaceholder')"
+						clearable
+						data-test-id="template-search-input"
+						@update:model-value="onSearchInput"
+						@blur="trackSearch"
+					>
+						<template #prefix>
+							<font-awesome-icon icon="search" />
+						</template>
+					</n8n-input>
+					<div v-show="collections.length || loadingCollections" :class="$style.carouselContainer">
+						<div :class="$style.header">
+							<n8n-heading :bold="true" size="medium" color="text-light">
+								{{ $locale.baseText('templates.collections') }}
+								<span
+									v-if="!loadingCollections"
+									data-test-id="collection-count-label"
+									v-text="`(${collections.length})`"
+								/>
+							</n8n-heading>
+						</div>
+						<TemplatesInfoCarousel
+							:collections="collections"
+							:loading="loadingCollections"
+							@open-collection="onOpenCollection"
+						/>
+					</div>
+					<TemplateList
+						:infinite-scroll-enabled="true"
+						:loading="loadingWorkflows"
+						:workflows="workflows"
+						:total-count="totalWorkflows"
+						@load-more="onLoadMore"
+						@open-template="onOpenTemplate"
+					/>
+					<div v-if="endOfSearchMessage" :class="$style.endText">
+						<n8n-text size="medium" color="text-base">
+							<span v-html="endOfSearchMessage" />
+						</n8n-text>
+					</div>
+				</div>
+			</div>
+		</template>
+	</TemplatesView>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index d1efe2c900ac7..6ace29391164c 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,19 +1,3 @@
-<template>
-	<div :class="$style.template">
-		<div :class="$style.container">
-			<div :class="$style.header">
-				<div v-if="goBackEnabled" :class="$style.goBack">
-					<GoBackButton />
-				</div>
-				<slot name="header"></slot>
-			</div>
-			<div>
-				<slot name="content"></slot>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import GoBackButton from '@/components/GoBackButton.vue';
@@ -32,6 +16,22 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.template">
+		<div :class="$style.container">
+			<div :class="$style.header">
+				<div v-if="goBackEnabled" :class="$style.goBack">
+					<GoBackButton />
+				</div>
+				<slot name="header"></slot>
+			</div>
+			<div>
+				<slot name="content"></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .template {
 	display: flex;
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index fa582f3b9550d..527a253e9b8f0 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -1,60 +1,3 @@
-<template>
-	<TemplatesView :go-back-enabled="true">
-		<template #header>
-			<div v-if="!notFoundError" :class="$style.wrapper">
-				<div :class="$style.title">
-					<n8n-heading v-if="template && template.name" tag="h1" size="2xlarge">{{
-						template.name
-					}}</n8n-heading>
-					<n8n-text v-if="template && template.name" color="text-base" size="small">
-						{{ $locale.baseText('generic.workflow') }}
-					</n8n-text>
-					<n8n-loading :loading="!template || !template.name" :rows="2" variant="h1" />
-				</div>
-				<div :class="$style.button">
-					<n8n-button
-						v-if="template"
-						data-test-id="use-template-button"
-						:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
-						size="large"
-						@click="openTemplateSetup(templateId, $event)"
-					/>
-					<n8n-loading :loading="!template" :rows="1" variant="button" />
-				</div>
-			</div>
-			<div v-else :class="$style.notFound">
-				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
-			</div>
-		</template>
-		<template v-if="!notFoundError" #content>
-			<div :class="$style.image">
-				<WorkflowPreview
-					v-if="showPreview"
-					:loading="loading"
-					:workflow="template?.workflow"
-					@close="onHidePreview"
-				/>
-			</div>
-			<div :class="$style.content">
-				<div :class="$style.markdown" data-test-id="template-description">
-					<n8n-markdown
-						:content="template?.description"
-						:images="template?.image"
-						:loading="loading"
-					/>
-				</div>
-				<div :class="$style.details">
-					<TemplateDetails
-						:block-title="$locale.baseText('template.details.appsInTheWorkflow')"
-						:loading="loading"
-						:template="template"
-					/>
-				</div>
-			</div>
-		</template>
-	</TemplatesView>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -158,6 +101,63 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<TemplatesView :go-back-enabled="true">
+		<template #header>
+			<div v-if="!notFoundError" :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading v-if="template && template.name" tag="h1" size="2xlarge">{{
+						template.name
+					}}</n8n-heading>
+					<n8n-text v-if="template && template.name" color="text-base" size="small">
+						{{ $locale.baseText('generic.workflow') }}
+					</n8n-text>
+					<n8n-loading :loading="!template || !template.name" :rows="2" variant="h1" />
+				</div>
+				<div :class="$style.button">
+					<n8n-button
+						v-if="template"
+						data-test-id="use-template-button"
+						:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
+						size="large"
+						@click="openTemplateSetup(templateId, $event)"
+					/>
+					<n8n-loading :loading="!template" :rows="1" variant="button" />
+				</div>
+			</div>
+			<div v-else :class="$style.notFound">
+				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
+			</div>
+		</template>
+		<template v-if="!notFoundError" #content>
+			<div :class="$style.image">
+				<WorkflowPreview
+					v-if="showPreview"
+					:loading="loading"
+					:workflow="template?.workflow"
+					@close="onHidePreview"
+				/>
+			</div>
+			<div :class="$style.content">
+				<div :class="$style.markdown" data-test-id="template-description">
+					<n8n-markdown
+						:content="template?.description"
+						:images="template?.image"
+						:loading="loading"
+					/>
+				</div>
+				<div :class="$style.details">
+					<TemplateDetails
+						:block-title="$locale.baseText('template.details.appsInTheWorkflow')"
+						:loading="loading"
+						:template="template"
+					/>
+				</div>
+			</div>
+		</template>
+	</TemplatesView>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/views/WorkerView.vue b/packages/editor-ui/src/views/WorkerView.vue
index 966f1e50a85b0..8da48f85ce82a 100644
--- a/packages/editor-ui/src/views/WorkerView.vue
+++ b/packages/editor-ui/src/views/WorkerView.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import WorkerList from '@/components/WorkerList.ee.vue';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+
+const goToUpgrade = () => {
+	void uiStore.goToUpgrade('worker-view', 'upgrade-worker-view');
+};
+</script>
+
 <template>
 	<WorkerList
 		v-if="settingsStore.isQueueModeEnabled && settingsStore.isWorkerViewAvailable"
@@ -23,19 +36,6 @@
 	</n8n-action-box>
 </template>
 
-<script setup lang="ts">
-import WorkerList from '@/components/WorkerList.ee.vue';
-import { useUIStore } from '@/stores/ui.store';
-import { useSettingsStore } from '@/stores/settings.store';
-
-const settingsStore = useSettingsStore();
-const uiStore = useUIStore();
-
-const goToUpgrade = () => {
-	void uiStore.goToUpgrade('worker-view', 'upgrade-worker-view');
-};
-</script>
-
 <style module lang="scss">
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index 564ff672a2e7a..86df4f4408a32 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -1,164 +1,3 @@
-<template>
-	<ResourcesListLayout
-		ref="layout"
-		resource-key="workflows"
-		:resources="allWorkflows"
-		:filters="filters"
-		:additional-filters-handler="onFilter"
-		:type-props="{ itemSize: 80 }"
-		:shareable="isShareable"
-		:initialize="initialize"
-		:disabled="readOnlyEnv || !projectPermissions.workflow.create"
-		:loading="loading"
-		@click:add="addWorkflow"
-		@update:filters="onFiltersUpdated"
-	>
-		<template #header>
-			<ProjectTabs />
-		</template>
-		<template #add-button="{ disabled }">
-			<n8n-tooltip :disabled="!readOnlyEnv">
-				<div>
-					<n8n-button
-						size="large"
-						block
-						:disabled="disabled"
-						data-test-id="resources-list-add"
-						@click="addWorkflow"
-					>
-						{{ addWorkflowButtonText }}
-					</n8n-button>
-				</div>
-				<template #content>
-					<i18n-t tag="span" keypath="mainSidebar.workflows.readOnlyEnv.tooltip">
-						<template #link>
-							<a target="_blank" href="https://docs.n8n.io/source-control-environments/">
-								{{ $locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip.link') }}
-							</a>
-						</template>
-					</i18n-t>
-				</template>
-			</n8n-tooltip>
-		</template>
-		<template #default="{ data, updateItemSize }">
-			<WorkflowCard
-				data-test-id="resources-list-item"
-				class="mb-2xs"
-				:data="data"
-				:read-only="readOnlyEnv"
-				@expand:tags="updateItemSize(data)"
-				@click:tag="onClickTag"
-			/>
-		</template>
-		<template #empty>
-			<div class="text-center mt-s">
-				<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
-					{{
-						currentUser.firstName
-							? $locale.baseText('workflows.empty.heading', {
-									interpolate: { name: currentUser.firstName },
-								})
-							: $locale.baseText('workflows.empty.heading.userNotSetup')
-					}}
-				</n8n-heading>
-				<n8n-text v-if="!isOnboardingExperimentEnabled" size="large" color="text-base">
-					{{ emptyListDescription }}
-				</n8n-text>
-			</div>
-			<div
-				v-if="!readOnlyEnv && projectPermissions.workflow.create"
-				:class="['text-center', 'mt-2xl', $style.actionsContainer]"
-			>
-				<n8n-card
-					:class="$style.emptyStateCard"
-					hoverable
-					data-test-id="new-workflow-card"
-					@click="addWorkflow"
-				>
-					<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
-					<n8n-text size="large" class="mt-xs" color="text-dark">
-						{{ $locale.baseText('workflows.empty.startFromScratch') }}
-					</n8n-text>
-				</n8n-card>
-				<a
-					v-if="isSalesUser || isOnboardingExperimentEnabled"
-					href="https://docs.n8n.io/courses/#available-courses"
-					:class="$style.emptyStateCard"
-					target="_blank"
-				>
-					<n8n-card
-						hoverable
-						data-test-id="browse-sales-templates-card"
-						@click="trackEmptyCardClick('courses')"
-					>
-						<n8n-icon :class="$style.emptyStateCardIcon" icon="graduation-cap" />
-						<n8n-text size="large" class="mt-xs" color="text-dark">
-							{{ $locale.baseText('workflows.empty.learnN8n') }}
-						</n8n-text>
-					</n8n-card>
-				</a>
-				<a
-					v-if="isSalesUser || isOnboardingExperimentEnabled"
-					:href="getTemplateRepositoryURL()"
-					:class="$style.emptyStateCard"
-					target="_blank"
-				>
-					<n8n-card
-						hoverable
-						data-test-id="browse-sales-templates-card"
-						@click="trackEmptyCardClick('templates')"
-					>
-						<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
-						<n8n-text size="large" class="mt-xs" color="text-dark">
-							{{ $locale.baseText('workflows.empty.browseTemplates') }}
-						</n8n-text>
-					</n8n-card>
-				</a>
-			</div>
-		</template>
-		<template #filters="{ setKeyValue }">
-			<div v-if="settingsStore.areTagsEnabled" class="mb-s">
-				<n8n-input-label
-					:label="$locale.baseText('workflows.filters.tags')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<TagsDropdown
-					:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
-					:model-value="filters.tags"
-					:create-enabled="false"
-					@update:model-value="setKeyValue('tags', $event)"
-				/>
-			</div>
-			<div class="mb-s">
-				<n8n-input-label
-					:label="$locale.baseText('workflows.filters.status')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<n8n-select
-					data-test-id="status-dropdown"
-					:model-value="filters.status"
-					@update:model-value="setKeyValue('status', $event)"
-				>
-					<n8n-option
-						v-for="option in statusFilterOptions"
-						:key="option.label"
-						:label="option.label"
-						:value="option.value"
-						data-test-id="status"
-					>
-					</n8n-option>
-				</n8n-select>
-			</div>
-		</template>
-	</ResourcesListLayout>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import ResourcesListLayout, { type IResource } from '@/components/layouts/ResourcesListLayout.vue';
@@ -466,6 +305,167 @@ const WorkflowsView = defineComponent({
 export default WorkflowsView;
 </script>
 
+<template>
+	<ResourcesListLayout
+		ref="layout"
+		resource-key="workflows"
+		:resources="allWorkflows"
+		:filters="filters"
+		:additional-filters-handler="onFilter"
+		:type-props="{ itemSize: 80 }"
+		:shareable="isShareable"
+		:initialize="initialize"
+		:disabled="readOnlyEnv || !projectPermissions.workflow.create"
+		:loading="loading"
+		@click:add="addWorkflow"
+		@update:filters="onFiltersUpdated"
+	>
+		<template #header>
+			<ProjectTabs />
+		</template>
+		<template #add-button="{ disabled }">
+			<n8n-tooltip :disabled="!readOnlyEnv">
+				<div>
+					<n8n-button
+						size="large"
+						block
+						:disabled="disabled"
+						data-test-id="resources-list-add"
+						@click="addWorkflow"
+					>
+						{{ addWorkflowButtonText }}
+					</n8n-button>
+				</div>
+				<template #content>
+					<i18n-t tag="span" keypath="mainSidebar.workflows.readOnlyEnv.tooltip">
+						<template #link>
+							<a target="_blank" href="https://docs.n8n.io/source-control-environments/">
+								{{ $locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip.link') }}
+							</a>
+						</template>
+					</i18n-t>
+				</template>
+			</n8n-tooltip>
+		</template>
+		<template #default="{ data, updateItemSize }">
+			<WorkflowCard
+				data-test-id="resources-list-item"
+				class="mb-2xs"
+				:data="data"
+				:read-only="readOnlyEnv"
+				@expand:tags="updateItemSize(data)"
+				@click:tag="onClickTag"
+			/>
+		</template>
+		<template #empty>
+			<div class="text-center mt-s">
+				<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
+					{{
+						currentUser.firstName
+							? $locale.baseText('workflows.empty.heading', {
+									interpolate: { name: currentUser.firstName },
+								})
+							: $locale.baseText('workflows.empty.heading.userNotSetup')
+					}}
+				</n8n-heading>
+				<n8n-text v-if="!isOnboardingExperimentEnabled" size="large" color="text-base">
+					{{ emptyListDescription }}
+				</n8n-text>
+			</div>
+			<div
+				v-if="!readOnlyEnv && projectPermissions.workflow.create"
+				:class="['text-center', 'mt-2xl', $style.actionsContainer]"
+			>
+				<n8n-card
+					:class="$style.emptyStateCard"
+					hoverable
+					data-test-id="new-workflow-card"
+					@click="addWorkflow"
+				>
+					<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
+					<n8n-text size="large" class="mt-xs" color="text-dark">
+						{{ $locale.baseText('workflows.empty.startFromScratch') }}
+					</n8n-text>
+				</n8n-card>
+				<a
+					v-if="isSalesUser || isOnboardingExperimentEnabled"
+					href="https://docs.n8n.io/courses/#available-courses"
+					:class="$style.emptyStateCard"
+					target="_blank"
+				>
+					<n8n-card
+						hoverable
+						data-test-id="browse-sales-templates-card"
+						@click="trackEmptyCardClick('courses')"
+					>
+						<n8n-icon :class="$style.emptyStateCardIcon" icon="graduation-cap" />
+						<n8n-text size="large" class="mt-xs" color="text-dark">
+							{{ $locale.baseText('workflows.empty.learnN8n') }}
+						</n8n-text>
+					</n8n-card>
+				</a>
+				<a
+					v-if="isSalesUser || isOnboardingExperimentEnabled"
+					:href="getTemplateRepositoryURL()"
+					:class="$style.emptyStateCard"
+					target="_blank"
+				>
+					<n8n-card
+						hoverable
+						data-test-id="browse-sales-templates-card"
+						@click="trackEmptyCardClick('templates')"
+					>
+						<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
+						<n8n-text size="large" class="mt-xs" color="text-dark">
+							{{ $locale.baseText('workflows.empty.browseTemplates') }}
+						</n8n-text>
+					</n8n-card>
+				</a>
+			</div>
+		</template>
+		<template #filters="{ setKeyValue }">
+			<div v-if="settingsStore.areTagsEnabled" class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('workflows.filters.tags')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<TagsDropdown
+					:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
+					:model-value="filters.tags"
+					:create-enabled="false"
+					@update:model-value="setKeyValue('tags', $event)"
+				/>
+			</div>
+			<div class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('workflows.filters.status')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<n8n-select
+					data-test-id="status-dropdown"
+					:model-value="filters.status"
+					@update:model-value="setKeyValue('status', $event)"
+				>
+					<n8n-option
+						v-for="option in statusFilterOptions"
+						:key="option.label"
+						:label="option.label"
+						:value="option.value"
+						data-test-id="status"
+					>
+					</n8n-option>
+				</n8n-select>
+			</div>
+		</template>
+	</ResourcesListLayout>
+</template>
+
 <style lang="scss" module>
 .actionsContainer {
 	display: flex;