diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts
index e11dc9b3f2203..f3efd655b2f18 100644
--- a/cypress/e2e/4-node-creator.cy.ts
+++ b/cypress/e2e/4-node-creator.cy.ts
@@ -70,11 +70,20 @@ describe('Node Creator', () => {
 		.should('exist')
 		.should('contain.text', 'We didn\'t make that... yet');
 
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('edit image');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 1);
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('this node totally does not exist');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear()
+		nodeCreatorFeature.getters.getCreatorItem('On App Event').click();
+
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('edit image');
 		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
 		nodeCreatorFeature.getters.noResults()
 		.should('exist')
-		.should('contain.text', 'To see results, click here');
+		.should('contain.text', 'To see all results, click here');
 
 		nodeCreatorFeature.getters.noResults().contains('click here').click();
 		nodeCreatorFeature.getters.nodeCreatorTabs().should('exist');
@@ -85,6 +94,7 @@ describe('Node Creator', () => {
 	})
 
 	it('should add manual trigger node', () => {
+		cy.get('.el-loading-mask').should('not.exist');
 		nodeCreatorFeature.getters.canvasAddButton().click();
 		nodeCreatorFeature.getters.getCreatorItem('Manually').click();
 
@@ -95,7 +105,7 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.nodeCreator().should('not.exist');
 
 		// TODO: Replace once we have canvas feature utils
-		cy.get('div').contains("On clicking 'execute'").should('exist');
+		cy.get('div').contains("Add first step").should('exist');
 	})
 	it('check if non-core nodes are rendered', () => {
 		cy.wait('@nodesIntercept').then((interception) => {
@@ -144,7 +154,7 @@ describe('Node Creator', () => {
 			nodeCreatorFeature.getters.getCreatorItem(customCategory).should('exist');
 
 			nodeCreatorFeature.actions.toggleCategory(customCategory);
-			nodeCreatorFeature.getters.getCreatorItem(customNode).findChildByTestId('node-item-community-tooltip').should('exist');
+			nodeCreatorFeature.getters.getCreatorItem(customNode).findChildByTestId('node-creator-item-tooltip').should('exist');
 			nodeCreatorFeature.getters.getCreatorItem(customNode).contains(customNodeDescription).should('exist');
 			nodeCreatorFeature.actions.selectNode(customNode);
 
diff --git a/cypress/e2e/7-workflow-actions.cy.ts b/cypress/e2e/7-workflow-actions.cy.ts
index 495614d569a9a..b7d903b9ba40e 100644
--- a/cypress/e2e/7-workflow-actions.cy.ts
+++ b/cypress/e2e/7-workflow-actions.cy.ts
@@ -66,7 +66,7 @@ describe('Workflow Actions', () => {
 	it('should add more tags', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.actions.addTags(['Another one']);
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length + 1);
 	});
@@ -74,7 +74,7 @@ describe('Workflow Actions', () => {
 	it('should remove tags by clicking X in tag', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.getters.workflowTagsContainer().find('.el-tag__close').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);
@@ -83,7 +83,7 @@ describe('Workflow Actions', () => {
 	it('should remove tags from dropdown', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.getters.workflowTagsDropdown().find('li').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);
diff --git a/cypress/pages/features/node-creator.ts b/cypress/pages/features/node-creator.ts
index 54dc9790ba815..dad6f6ebe50d9 100644
--- a/cypress/pages/features/node-creator.ts
+++ b/cypress/pages/features/node-creator.ts
@@ -16,12 +16,13 @@ export class NodeCreator extends BasePage {
 		creatorItem: () => cy.getByTestId('item-iterator-item'),
 		communityNodeTooltip: () => cy.getByTestId('node-item-community-tooltip'),
 		noResults: () => cy.getByTestId('categorized-no-results'),
-		nodeItemName: () => cy.getByTestId('node-item-name'),
+		nodeItemName: () => cy.getByTestId('node-creator-item-name'),
 		activeSubcategory: () => cy.getByTestId('categorized-items-subcategory'),
 		expandedCategories: () => this.getters.creatorItem().find('>div').filter('.active').invoke('text'),
 	};
 	actions = {
 		openNodeCreator: () => {
+			cy.get('.el-loading-mask').should('not.exist');
 			this.getters.plusButton().click();
 			this.getters.nodeCreator().should('be.visible')
 		},
diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts
index 77001f2fc0dd2..3e0369ec7b24a 100644
--- a/cypress/pages/workflow.ts
+++ b/cypress/pages/workflow.ts
@@ -10,6 +10,7 @@ export class WorkflowPage extends BasePage {
 		workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'),
 		workflowTagsInput: () => this.getters.workflowTagsContainer().then(($el) => cy.wrap($el.find('input').first())),
 		workflowTagElements: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span'),
+		firstWorkflowTagElement: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span:nth-child(1)'),
 		workflowTagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
 		newTagLink: () => cy.getByTestId('new-tag-link'),
 		saveButton: () => cy.getByTestId('workflow-save-button'),
@@ -43,12 +44,14 @@ export class WorkflowPage extends BasePage {
 		addInitialNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.canvasPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
-			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+			this.getters.nodeCreatorSearchBar().type('{enter}');
+			cy.get('body').type('{esc}');
 		},
 		addNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.nodeCreatorPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
-			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+			this.getters.nodeCreatorSearchBar().type('{enter}');
+			cy.get('body').type('{esc}');
 		},
 		openNodeNdv: (nodeTypeName: string) => {
 			this.getters.canvasNodeByName(nodeTypeName).dblclick();
diff --git a/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts
new file mode 100644
index 0000000000000..7991eccca4b7d
--- /dev/null
+++ b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts
@@ -0,0 +1,58 @@
+/* tslint:disable:variable-name */
+import N8nNodeCreatorNode from './NodeCreatorNode.vue';
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Modules/Node Creator Node',
+	component: N8nNodeCreatorNode,
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nNodeCreatorNode,
+	},
+	template: `
+		<n8n-node-creator-node v-bind="$props">
+			<template v-slot:icon>
+				<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg" />
+			</template>
+		</n8n-node-creator-node>
+	`,
+});
+
+export const WithTitle = DefaultTemplate.bind({});
+WithTitle.args = {
+	title: 'Node with title',
+	tooltipHtml: '<b>Bold</b> tooltip',
+	description:
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et vehicula ipsum, eu facilisis lacus. Aliquam commodo vel elit eget mollis. Quisque ac elit non purus iaculis placerat. Quisque fringilla ultrices nisi sed porta.',
+};
+
+const PanelTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nNodeCreatorNode,
+	},
+	data() {
+		return {
+			isPanelActive: false,
+		};
+	},
+	template: `
+		<n8n-node-creator-node v-bind="$props" :isPanelActive="isPanelActive" @click.capture="isPanelActive = true">
+			<template v-slot:icon>
+				<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg" />
+			</template>
+			<template v-slot:panel>
+				<p style="width: 100%; height: 300px; background: white">Lorem ipsum dolor sit amet</p>
+				<button @click="isPanelActive = false">Close</button>
+			</template>
+		</n8n-node-creator-node>
+	`,
+});
+export const WithPanel = PanelTemplate.bind({});
+WithPanel.args = {
+	title: 'Node with panel',
+	isTrigger: true,
+};
diff --git a/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
new file mode 100644
index 0000000000000..4e0aef14a932f
--- /dev/null
+++ b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
@@ -0,0 +1,125 @@
+<template>
+	<div
+		:class="{
+			[$style.creatorNode]: true,
+			[$style.hasAction]: !showActionArrow,
+		}"
+		v-on="$listeners"
+		v-bind="$attrs"
+	>
+		<div :class="$style.nodeIcon">
+			<slot name="icon" />
+		</div>
+		<div>
+			<div :class="$style.details">
+				<span :class="$style.name" v-text="title" data-test-id="node-creator-item-name" />
+				<trigger-icon v-if="isTrigger" :class="$style.triggerIcon" />
+				<n8n-tooltip
+					v-if="!!$slots.tooltip"
+					placement="top"
+					data-test-id="node-creator-item-tooltip"
+				>
+					<template #content>
+						<slot name="tooltip" />
+					</template>
+					<n8n-icon :class="$style.tooltipIcon" icon="cube" />
+				</n8n-tooltip>
+			</div>
+			<p :class="$style.description" v-if="description" v-text="description" />
+		</div>
+		<slot name="dragContent" />
+		<button :class="$style.panelIcon" v-if="showActionArrow">
+			<font-awesome-icon :class="$style.panelArrow" icon="arrow-right" />
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import TriggerIcon from './TriggerIcon.vue';
+import N8nTooltip from '../N8nTooltip';
+
+export interface Props {
+	active?: boolean;
+	isTrigger?: boolean;
+	description?: string;
+	title: string;
+	showActionArrow?: boolean;
+}
+
+defineProps<Props>();
+
+defineEmits<{
+	(event: 'tooltipClick', $e: MouseEvent): void;
+}>();
+</script>
+
+<style lang="scss" module>
+.creatorNode {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	z-index: 1;
+	padding: 11px 8px 11px 0;
+
+	&.hasAction {
+		user-select: none;
+	}
+}
+.creatorNode:hover .panelIcon {
+	color: var(--color-text-light);
+}
+
+.panelIcon {
+	flex-grow: 1;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-left: var(--spacing-2xs);
+	color: var(--color-text-lighter);
+	cursor: pointer;
+	background: transparent;
+	border: none;
+}
+.tooltipIcon {
+	margin-left: var(--spacing-3xs);
+}
+.panelArrow {
+	font-size: var(--font-size-2xs);
+	width: 12px;
+}
+.details {
+	align-items: center;
+}
+.nodeIcon {
+	display: flex;
+	margin-right: var(--spacing-s);
+
+	& > :global(*) {
+		min-width: 25px;
+		max-width: 25px;
+	}
+}
+.name {
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-s);
+	line-height: 1.115rem;
+}
+.description {
+	margin-top: var(--spacing-5xs);
+	font-size: var(--font-size-2xs);
+	line-height: 1rem;
+	font-weight: 400;
+	color: var(--node-creator-description-colo, var(--color-text-base));
+}
+
+.triggerIcon {
+	margin-left: var(--spacing-2xs);
+}
+</style>
+
+<style lang="scss" scoped>
+.el-tooltip svg {
+	color: var(--color-foreground-xdark);
+}
+</style>
diff --git a/packages/design-system/src/components/N8nNodeCreatorNode/TriggerIcon.vue b/packages/design-system/src/components/N8nNodeCreatorNode/TriggerIcon.vue
new file mode 100644
index 0000000000000..dda6b227e72ec
--- /dev/null
+++ b/packages/design-system/src/components/N8nNodeCreatorNode/TriggerIcon.vue
@@ -0,0 +1,65 @@
+<template>
+	<span :class="$style.trigger">
+		<svg
+			width="36px"
+			height="36px"
+			viewBox="0 0 36 36"
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+		>
+			<title>Trigger node</title>
+			<g
+				id="/integrations-(V1-feature)"
+				stroke="none"
+				stroke-width="1"
+				fill="none"
+				fill-rule="evenodd"
+			>
+				<g
+					id="Individual-node-view"
+					transform="translate(-304.000000, -137.000000)"
+					fill-rule="nonzero"
+				>
+					<g id="left-column" transform="translate(120.000000, 131.000000)">
+						<g id="trigger-badge" transform="translate(178.000000, 0.000000)">
+							<g id="trigger-icon" transform="translate(6.857143, 6.857143)">
+								<g id="Icon" transform="translate(8.571429, 0.000000)" fill="#FF6150">
+									<polygon
+										id="Icon-Path"
+										points="7.14285714 21.4285714 0 21.4285714 10 1.42857143 10 12.8571429 17.1428571 12.8571429 7.14285714 32.8571429"
+									></polygon>
+								</g>
+								<rect id="ViewBox" x="0" y="0" width="34.2857143" height="34.2857143"></rect>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</svg>
+	</span>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'TriggerIcon',
+};
+</script>
+
+<style lang="scss" module>
+.trigger {
+	background-color: var(--trigger-icon-background-color, var(--color-background-xlight));
+	border: 1px solid var(--trigger-icon-border-color, var(--color-background-xlight));
+	border-radius: 4px;
+	height: 16px;
+	width: 16px;
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 16px;
+
+	> svg {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>
diff --git a/packages/design-system/src/components/N8nNodeCreatorNode/index.ts b/packages/design-system/src/components/N8nNodeCreatorNode/index.ts
new file mode 100644
index 0000000000000..657f0d26f29e8
--- /dev/null
+++ b/packages/design-system/src/components/N8nNodeCreatorNode/index.ts
@@ -0,0 +1,3 @@
+import NodeCreatorNode from './NodeCreatorNode.vue';
+
+export default NodeCreatorNode;
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index 79234705d1381..80948018a3427 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -2,24 +2,35 @@
 	<div class="n8n-node-icon">
 		<div
 			:class="{
-				[$style['node-icon-wrapper']]: true,
-				[$style['circle']]: this.circle,
-				[$style['disabled']]: this.disabled,
+				[$style.nodeIconWrapper]: true,
+				[$style.circle]: circle,
+				[$style.disabled]: disabled,
 			}"
 			:style="iconStyleData"
 			v-on="$listeners"
 		>
-			<n8n-tooltip placement="top" :disabled="!showTooltip">
+			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
+			<n8n-tooltip placement="top" :disabled="!showTooltip" v-if="showTooltip">
 				<template #content>{{ nodeTypeName }}</template>
 				<div v-if="type !== 'unknown'" :class="$style['icon']">
-					<img v-if="type === 'file'" :src="src" :class="$style['node-icon-image']" />
+					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
 					<font-awesome-icon v-else :icon="name" :style="fontStyleData" />
 				</div>
-				<div v-else :class="$style['node-icon-placeholder']">
+				<div v-else :class="$style.nodeIconPlaceholder">
 					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
 					?
 				</div>
 			</n8n-tooltip>
+			<template v-else>
+				<div v-if="type !== 'unknown'" :class="$style.icon">
+					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
+					<font-awesome-icon v-else :icon="name" :style="fontStyleData" />
+				</div>
+				<div v-else :class="$style.nodeIconPlaceholder">
+					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
+					?
+				</div>
+			</template>
 		</div>
 	</div>
 </template>
@@ -91,7 +102,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
-.node-icon-wrapper {
+.nodeIconWrapper {
 	width: 26px;
 	height: 26px;
 	border-radius: var(--border-radius-small);
@@ -110,13 +121,12 @@ export default Vue.extend({
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	pointer-events: none;
 }
-
-.node-icon-placeholder {
+.nodeIconPlaceholder {
 	text-align: center;
 }
-
-.node-icon-image {
+.nodeIconImage {
 	width: 100%;
 	max-width: 100%;
 	max-height: 100%;
diff --git a/packages/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts
index d56d4651cd020..dc5a03285ff52 100644
--- a/packages/design-system/src/plugins/n8nComponents.ts
+++ b/packages/design-system/src/plugins/n8nComponents.ts
@@ -25,6 +25,7 @@ import N8nLoading from '../components/N8nLoading';
 import N8nMarkdown from '../components/N8nMarkdown';
 import N8nMenu from '../components/N8nMenu';
 import N8nMenuItem from '../components/N8nMenuItem';
+import N8nNodeCreatorNode from '../components/N8nNodeCreatorNode';
 import N8nNodeIcon from '../components/N8nNodeIcon';
 import N8nNotice from '../components/N8nNotice';
 import N8nOption from '../components/N8nOption';
@@ -73,6 +74,7 @@ export default {
 		app.component('n8n-markdown', N8nMarkdown);
 		app.component('n8n-menu', N8nMenu);
 		app.component('n8n-menu-item', N8nMenuItem);
+		app.component('n8n-node-creator-node', N8nNodeCreatorNode);
 		app.component('n8n-node-icon', N8nNodeIcon);
 		app.component('n8n-notice', N8nNotice);
 		app.component('n8n-option', N8nOption);
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 38f0dfb55cd71..e18c274792ed4 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -86,6 +86,7 @@
     "@types/express": "^4.17.6",
     "@types/file-saver": "^2.0.1",
     "@types/jsonpath": "^0.2.0",
+    "@types/lodash-es": "^4.17.6",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.set": "^4.3.6",
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 3fdf8495bdecd..2cf7b6ba1a50f 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -36,8 +36,8 @@ import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
 import { userHelpers } from '@/mixins/userHelpers';
 import { loadLanguage } from './plugins/i18n';
+import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
 import { restApi } from '@/mixins/restApi';
-import { globalLinkActions } from '@/mixins/globalLinkActions';
 import { mapStores } from 'pinia';
 import { useUIStore } from './stores/ui';
 import { useSettingsStore } from './stores/settings';
@@ -50,7 +50,6 @@ export default mixins(
 	showMessage,
 	userHelpers,
 	restApi,
-	globalLinkActions,
 ).extend({
 	name: 'App',
 	components: {
@@ -58,6 +57,13 @@ export default mixins(
 		Telemetry,
 		Modals,
 	},
+	setup() {
+		const { registerCustomAction, unregisterCustomAction } = useGlobalLinkActions();
+		return {
+			registerCustomAction,
+			unregisterCustomAction,
+		};
+	},
 	computed: {
 		...mapStores(
 				useNodeTypesStore,
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index fc02855fc13e1..a32172b690aeb 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -35,6 +35,7 @@ import {
 	INodeCredentials,
 	INodeListSearchItems,
 	NodeParameterValueType,
+	INodeActionTypeDescription,
 } from 'n8n-workflow';
 import { FAKE_DOOR_FEATURES } from './constants';
 
@@ -808,6 +809,7 @@ export type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR';
 export interface ISubcategoryItemProps {
 	subcategory: string;
 	description: string;
+	key?: string;
 	icon?: string;
 	defaults?: INodeParameters;
 	iconData?: {
@@ -822,19 +824,44 @@ export interface INodeItemProps {
 	nodeType: INodeTypeDescription;
 }
 
+export interface IActionItemProps {
+	subcategory: string;
+	nodeType: INodeActionTypeDescription;
+}
+
 export interface ICategoryItemProps {
 	expanded: boolean;
 }
 
-export interface INodeCreateElement {
-	type: 'node' | 'category' | 'subcategory';
+export interface CreateElementBase {
 	category: string;
 	key: string;
 	includedByTrigger?: boolean;
 	includedByRegular?: boolean;
-	properties: ISubcategoryItemProps | INodeItemProps | ICategoryItemProps;
 }
 
+export interface NodeCreateElement extends CreateElementBase {
+	type: 'node';
+	properties: INodeItemProps;
+}
+
+export interface CategoryCreateElement extends CreateElementBase {
+	type: 'category';
+	properties: ICategoryItemProps;
+}
+
+export interface SubcategoryCreateElement extends CreateElementBase {
+	type: 'subcategory';
+	properties: ISubcategoryItemProps;
+}
+
+export interface ActionCreateElement extends CreateElementBase {
+	type: 'action';
+	properties: IActionItemProps;
+}
+
+export type INodeCreateElement = NodeCreateElement | CategoryCreateElement | SubcategoryCreateElement | ActionCreateElement;
+
 export interface ICategoriesWithNodes {
 	[category: string]: {
 		[subcategory: string]: {
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index 53d597a054027..97103fbee4758 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -84,16 +84,16 @@ export default Vue.extend({
 			position[0] -= DEFAULT_STICKY_WIDTH / 2;
 			position[1] -= DEFAULT_STICKY_HEIGHT / 2;
 
-			this.$emit('addNode', {
+			this.$emit('addNode', [{
 				nodeTypeName: STICKY_NODE_TYPE,
 				position,
-			});
+			}]);
 		},
 		closeNodeCreator() {
 			this.$emit('toggleNodeCreator', { createNodeActive: false });
 		},
-		nodeTypeSelected(nodeTypeName: string) {
-			this.$emit('addNode', { nodeTypeName });
+		nodeTypeSelected(nodeTypeNames: string[]) {
+			this.$emit('addNode', nodeTypeNames.map(nodeTypeName => ({ nodeTypeName })));
 			this.closeNodeCreator();
 		},
 	},
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue
new file mode 100644
index 0000000000000..b4a06cfba1eaa
--- /dev/null
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue
@@ -0,0 +1,162 @@
+<template>
+	<n8n-node-creator-node
+		:key="`${action.actionKey}_${action.displayName}`"
+		@click="onActionClick(action)"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+		draggable
+		:class="$style.action"
+		:title="action.displayName"
+		:isTrigger="isTriggerAction(action)"
+	>
+		<template #dragContent>
+			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer"/>
+			<div
+				:class="$style.draggable"
+				:style="draggableStyle"
+				v-show="dragging"
+			>
+				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
+			</div>
+		</template>
+		<template #icon>
+			<node-icon :nodeType="action" />
+		</template>
+	</n8n-node-creator-node>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, toRefs, getCurrentInstance } from 'vue';
+import { INodeTypeDescription, INodeActionTypeDescription } from 'n8n-workflow';
+import { getNewNodePosition, NODE_SIZE } from '@/utils/nodeViewUtils';
+import { IUpdateInformation } from '@/Interface';
+import NodeIcon from '@/components/NodeIcon.vue';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
+
+export interface Props {
+	nodeType: INodeTypeDescription,
+	action: INodeActionTypeDescription,
+}
+
+const props = defineProps<Props>();
+const instance = getCurrentInstance();
+const telemetry = instance?.proxy.$telemetry;
+const { getActionData, getNodeTypesWithManualTrigger, setAddedNodeActionParameters } = useNodeCreatorStore();
+
+const state = reactive({
+	dragging: false,
+	draggablePosition: {
+		x: -100,
+		y: -100,
+	},
+	storeWatcher: null as Function | null,
+	draggableDataTransfer: null as Element | null,
+});
+const emit = defineEmits<{
+	(event: 'actionSelected', action: IUpdateInformation): void,
+	(event: 'dragstart', $e: DragEvent): void,
+	(event: 'dragend', $e: DragEvent): void,
+}>();
+
+const draggableStyle = computed<{ top: string; left: string; }>(() => ({
+	top: `${state.draggablePosition.y}px`,
+	left: `${state.draggablePosition.x}px`,
+}));
+
+const actionData = computed(() => getActionData(props.action));
+
+const isTriggerAction = (action: INodeActionTypeDescription) => action.name?.toLowerCase().includes('trigger');
+function onActionClick(actionItem: INodeActionTypeDescription) {
+	emit('actionSelected', getActionData(actionItem));
+}
+
+function onDragStart(event: DragEvent): void {
+	/**
+	 * Workaround for firefox, that doesn't attach the pageX and pageY coordinates to "ondrag" event.
+	 * All browsers attach the correct page coordinates to the "dragover" event.
+	 * @bug https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+	 */
+	document.body.addEventListener("dragover", onDragOver);
+	const { pageX: x, pageY: y } = event;
+	if (event.dataTransfer) {
+		event.dataTransfer.effectAllowed = "copy";
+		event.dataTransfer.dropEffect = "copy";
+		event.dataTransfer.setDragImage(state.draggableDataTransfer as Element, 0, 0);
+		event.dataTransfer.setData('nodeTypeName', getNodeTypesWithManualTrigger(actionData.value?.key).join(','));
+
+		state.storeWatcher = setAddedNodeActionParameters(actionData.value, telemetry);
+		document.body.addEventListener("dragend", onDragEnd);
+	}
+
+	state.dragging = true;
+	state.draggablePosition = { x, y };
+	emit('dragstart', event);
+}
+
+function onDragOver(event: DragEvent): void {
+	if (!state.dragging || event.pageX === 0 && event.pageY === 0) {
+		return;
+	}
+
+	const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
+
+	state.draggablePosition = { x, y };
+}
+
+function onDragEnd(event: DragEvent): void {
+	if(state.storeWatcher) state.storeWatcher();
+	document.body.removeEventListener("dragend", onDragEnd);
+	document.body.removeEventListener("dragover", onDragOver);
+
+	emit('dragend', event);
+
+	state.dragging = false;
+	setTimeout(() => {
+		state.draggablePosition = { x: -100, y: -100 };
+	}, 300);
+}
+const { draggableDataTransfer, dragging } = toRefs(state);
+</script>
+
+<style lang="scss" module>
+.action {
+	margin-left: 15px;
+	margin-right: 12px;
+
+	--trigger-icon-background-color: #{$trigger-icon-background-color};
+	--trigger-icon-border-color: #{$trigger-icon-border-color};
+}
+.nodeIcon {
+	margin-right: var(--spacing-s);
+}
+
+.apiHint {
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-base);
+	padding-top: var(--spacing-s);
+	line-height: var(--font-line-height-regular);
+	border-top: 1px solid #DBDFE7;
+	z-index: 1;
+	// Prevent double borders when the last category is collapsed
+	margin-top: -1px;
+}
+
+.draggable {
+	width: 100px;
+	height: 100px;
+	position: fixed;
+	z-index: 1;
+	opacity: 0.66;
+	border: 2px solid var(--color-foreground-xdark);
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-background-xlight);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.draggableDataTransfer {
+	width: 1px;
+	height: 1px;
+}
+</style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 9d6b50b62bfa8..ae18d680d3377 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -1,15 +1,14 @@
 <template>
-	<transition :name="activeSubcategoryTitle ? 'panel-slide-in' : 'panel-slide-out'" >
+	<transition :name="`panel-slide-${state.transitionDirection}`" >
 		<div
-			:class="$style.categorizedItems"
 			ref="mainPanelContainer"
-			@click="onClickInside"
 			tabindex="0"
-			@keydown.capture="nodeFilterKeyDown"
-			:key="`${activeSubcategoryTitle}_transition`"
 			data-test-id="categorized-items"
+			:class="$style.categorizedItems"
+			:key="`${activeSubcategoryTitle}_transition`"
+			@keydown.capture="nodeFilterKeyDown"
 		>
-			<div class="header" v-if="$slots.header">
+			<div v-if="$slots.header">
 				<slot name="header" />
 			</div>
 
@@ -17,483 +16,533 @@
 				<button :class="$style.subcategoryBackButton" @click="onSubcategoryClose">
 					<font-awesome-icon :class="$style.subcategoryBackIcon" icon="arrow-left" size="2x" />
 				</button>
+				<node-icon
+					v-if="(showSubcategoryIcon && activeSubcategory.properties.nodeType)"
+					:class="$style.nodeIcon"
+					:nodeType="activeSubcategory.properties.nodeType"
+					:size="16"
+					:shrink="false"
+				/>
 				<span v-text="activeSubcategoryTitle" />
 			</div>
 
 			<search-bar
-				v-if="isSearchVisible"
-				:value="nodeFilter"
+				v-if="alwaysShowSearch || isSearchVisible"
+				:key="nodeCreatorStore.selectedType"
+				:value="nodeCreatorStore.itemsFilter"
+				:placeholder="searchPlaceholder ? searchPlaceholder : $locale.baseText('nodeCreator.searchBar.searchNodes')"
+				ref="searchBar"
 				@input="onNodeFilterChange"
-				:eventBus="searchEventBus"
 			/>
-			<div v-if="searchFilter.length === 0" :class="$style.scrollable">
-				<item-iterator
-					:elements="renderedItems"
-					:activeIndex="activeSubcategory ? activeSubcategoryIndex : activeIndex"
-					:transitionsEnabled="true"
-					@selected="selected"
-				/>
-			</div>
-			<div
-				:class="$style.scrollable"
-				v-else-if="filteredNodeTypes.length > 0"
-			>
-				<item-iterator
-					:elements="filteredNodeTypes"
-					:activeIndex="activeSubcategory ? activeSubcategoryIndex : activeIndex"
-					@selected="selected"
-				/>
-			</div>
-			<no-results
-				v-else
-				data-test-id="categorized-no-results"
-				:showRequest="filteredAllNodeTypes.length === 0"
-				:show-icon="filteredAllNodeTypes.length === 0"
-			>
+
+			<template v-if="(searchFilter.length > 0 && filteredNodeTypes.length === 0)">
+				<no-results
+					data-test-id="categorized-no-results"
+					:showRequest="(!$slots.noResultsTitle && !$slots.noResultsAction) && filteredAllNodeTypes.length === 0"
+					:show-icon="(!$slots.noResultsTitle && !$slots.noResultsAction) && filteredAllNodeTypes.length === 0"
+				>
+					<template v-if="$slots.noResultsTitle" #title>
+						<slot name="noResultsTitle" />
+					</template>
 					<!-- There are results in other sub-categories/tabs  -->
-					<template v-if="filteredAllNodeTypes.length > 0" #title>
+					<template v-else-if="filteredAllNodeTypes.length > 0" #title>
 						<p v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
 					</template>
-
-					<!-- Regular Search -->
-					<template v-else  #title>
-						<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
+					<template v-else #title>
+						<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')"/>
 					</template>
 
-					<template v-if="filteredAllNodeTypes.length === 0" #action>
+					<template v-if="$slots.noResultsAction" #action>
+						<slot name="noResultsAction" />
+					</template>
+					<template v-else-if="filteredAllNodeTypes.length === 0" #action>
 						{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
-						<n8n-link
-							@click="selectHttpRequest"
-							v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
-						>
+						<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)">
 							{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
 						</n8n-link>
 						<template v-if="nodeCreatorStore.selectedType === ALL_NODE_FILTER">
 							{{ $locale.baseText('nodeCreator.noResults.or') }}
 						</template>
 
-						<n8n-link
-							@click="selectWebhook"
-							v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
-						>
+						<n8n-link @click="selectWebhook" v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)">
 							{{ $locale.baseText('nodeCreator.noResults.webhook') }}
-							{{ $locale.baseText('nodeCreator.noResults.node') }}
 						</n8n-link>
+						{{ $locale.baseText('nodeCreator.noResults.node') }}
 					</template>
-			</no-results>
+
+					<n8n-link
+						@click="selectWebhook"
+						v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
+					>
+						{{ $locale.baseText('nodeCreator.noResults.webhook') }}
+						{{ $locale.baseText('nodeCreator.noResults.node') }}
+					</n8n-link>
+				</no-results>
+			</template>
+			<div :class="$style.scrollable" ref="scrollableContainer" v-else>
+				<item-iterator
+					:elements="searchFilter.length === 0 ? renderedItems :filteredNodeTypes"
+					:activeIndex="activeSubcategory ? activeSubcategoryIndex : activeIndex"
+					:with-actions-getter="withActionsGetter"
+					:lazyRender="lazyRender"
+					:enable-global-categories-counter="enableGlobalCategoriesCounter"
+					@selected="selected"
+					@actionsOpen="$listeners.actionsOpen"
+					@nodeTypeSelected="$listeners.nodeTypeSelected"
+				>
+
+				</item-iterator>
+				<div :class="$style.footer" v-if="$slots.footer">
+					<slot name="footer" />
+				</div>
+			</div>
 		</div>
 	</transition>
 </template>
 
-<script lang="ts">
-import Vue, { PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, reactive, onMounted, watch, getCurrentInstance, toRefs, ref, onUnmounted, nextTick } from 'vue';
 import camelcase from 'lodash.camelcase';
 
 import { externalHooks } from '@/mixins/externalHooks';
-import { globalLinkActions } from '@/mixins/globalLinkActions';
-
-import mixins from 'vue-typed-mixins';
+import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
+import { INodeTypeDescription } from 'n8n-workflow';
 import ItemIterator from './ItemIterator.vue';
 import NoResults from './NoResults.vue';
 import SearchBar from './SearchBar.vue';
-import { INodeCreateElement, INodeItemProps, ISubcategoryItemProps, ICategoriesWithNodes, ICategoryItemProps, INodeFilterType } from '@/Interface';
+import NodeIcon from '@/components/NodeIcon.vue';
+import { INodeCreateElement, ISubcategoryItemProps, ICategoryItemProps, ICategoriesWithNodes, SubcategoryCreateElement, NodeCreateElement } from '@/Interface';
 import { WEBHOOK_NODE_TYPE, HTTP_REQUEST_NODE_TYPE, ALL_NODE_FILTER, TRIGGER_NODE_FILTER, REGULAR_NODE_FILTER, NODE_TYPE_COUNT_MAPPER } from '@/constants';
 import { BaseTextKey } from '@/plugins/i18n';
-import { intersection, sublimeSearch, matchesNodeType, matchesSelectType  } from '@/utils';
-import { mapStores } from 'pinia';
+import { sublimeSearch, matchesNodeType, matchesSelectType  } from '@/utils';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
-import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
-export default mixins(externalHooks, globalLinkActions).extend({
-	name: 'CategorizedItems',
-	components: {
-		ItemIterator,
-		NoResults,
-		SearchBar,
-	},
-	props: {
-		searchItems: {
-			type: Array as PropType<INodeCreateElement[]>,
-		},
-		excludedCategories: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		excludedSubcategories: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		firstLevelItems: {
-			type: Array as PropType<INodeCreateElement[]>,
-			default: () => [],
-		},
-		initialActiveCategories: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		initialActiveIndex: {
-			type: Number,
-			default: 1,
-		},
-	},
-	data() {
-		return {
-			activeCategory: this.initialActiveCategories || [] as string[],
-			// Keep track of activated subcategories so we could traverse back more than one level
-			activeSubcategoryHistory: [] as INodeCreateElement[],
-			activeIndex: this.initialActiveIndex,
-			activeSubcategoryIndex: 0,
-			searchEventBus: new Vue(),
-			ALL_NODE_FILTER,
-			TRIGGER_NODE_FILTER,
-			REGULAR_NODE_FILTER,
-		};
-	},
-	mounted() {
-		this.registerCustomAction('showAllNodeCreatorNodes', this.switchToAllTabAndFilter);
-	},
-	destroyed() {
-		this.nodeCreatorStore.itemsFilter = '';
-		this.unregisterCustomAction('showAllNodeCreatorNodes');
-	},
-	computed: {
-		...mapStores(
-			useNodeCreatorStore,
-			useNodeTypesStore,
-			useRootStore,
-			useWorkflowsStore,
-		),
-		activeSubcategory(): INodeCreateElement | null {
-			return this.activeSubcategoryHistory[this.activeSubcategoryHistory.length - 1] || null;
-		},
-		nodeFilter(): string {
-			return this.nodeCreatorStore.itemsFilter;
-		},
-		selectedType(): INodeFilterType {
-			return this.nodeCreatorStore.selectedType;
-		},
-		categoriesWithNodes(): ICategoriesWithNodes {
-			return this.nodeTypesStore.categoriesWithNodes;
-		},
-		categorizedItems(): INodeCreateElement[] {
-			return this.nodeTypesStore.categorizedItems;
-		},
-		activeSubcategoryTitle(): string {
-			if(!this.activeSubcategory || !this.activeSubcategory.properties) return '';
-			const subcategoryName = camelcase((this.activeSubcategory.properties as ISubcategoryItemProps).subcategory);
-			const titleLocaleKey = `nodeCreator.subcategoryTitles.${subcategoryName}` as BaseTextKey;
-			const nameLocaleKey = `nodeCreator.subcategoryNames.${subcategoryName}` as BaseTextKey;
-
-			const titleLocale = this.$locale.baseText(titleLocaleKey);
-			const nameLocale = this.$locale.baseText(nameLocaleKey);
-
-			// If resolved title locale is same as the locale key it means it doesn't exist
-			// so we fallback to the subcategoryName
-			return titleLocale === titleLocaleKey ? nameLocale : titleLocale;
-		},
-		searchFilter(): string {
-			return this.nodeFilter.toLowerCase().trim();
-		},
-		defaultLocale (): string {
-			return this.rootStore.defaultLocale;
-		},
-		filteredNodeTypes(): INodeCreateElement[] {
-			const filter = this.searchFilter;
-
-			const searchableNodes = this.subcategorizedNodes.length > 0 && this.activeSubcategory?.key !== '*'
-				? this.subcategorizedNodes
-				: this.searchItems;
-
-			let returnItems: INodeCreateElement[] = [];
-			if (this.defaultLocale !== 'en') {
-				returnItems = searchableNodes.filter((el: INodeCreateElement) => {
-					return filter && matchesSelectType(el, this.selectedType) && matchesNodeType(el, filter);
-				});
-			}
-			else {
-				const matchingNodes = searchableNodes.filter((el) => matchesSelectType(el, this.selectedType));
-				const matchedCategorizedNodes = sublimeSearch<INodeCreateElement>(filter, matchingNodes, [{key: 'properties.nodeType.displayName', weight: 2}, {key: 'properties.nodeType.codex.alias', weight: 1}]);
-				returnItems = matchedCategorizedNodes.map(({item}) => item);;
-			}
-
-
-			const filteredNodeTypes = this.excludedCategories.length === 0
-				? returnItems
-				: this.filterOutNodexFromExcludedCategories(returnItems);
-
-			setTimeout(() => {
-				this.$externalHooks().run('nodeCreateList.filteredNodeTypesComputed', {
-					nodeFilter: this.nodeFilter,
-					result: filteredNodeTypes,
-					selectedType: this.selectedType,
-				});
-			}, 0);
-
-			return filteredNodeTypes;
-		},
-		filteredAllNodeTypes(): INodeCreateElement[] {
-			if(this.filteredNodeTypes.length > 0) return [];
-
-			const matchedAllNodex = this.searchItems.filter((el: INodeCreateElement) => {
-				return this.searchFilter && matchesNodeType(el, this.searchFilter);
-			});
-
-			return matchedAllNodex;
-		},
-		categorized(): INodeCreateElement[] {
-			return this.categorizedItems && this.categorizedItems
-				.reduce((accu: INodeCreateElement[], el: INodeCreateElement) => {
-					if((this.excludedCategories || []).includes(el.category)) return accu;
-
-					if(
-						el.type === 'subcategory' &&
-						(this.excludedSubcategories || []).includes((el.properties as ISubcategoryItemProps).subcategory)
-					) {
-						return accu;
-					}
-
-					if (
-						el.type !== 'category' &&
-						!this.activeCategory.includes(el.category)
-					) {
-						return accu;
-					}
-
-					if (!matchesSelectType(el, this.selectedType)) {
-						return accu;
-					}
-
-					if (el.type === 'category') {
-						accu.push({
-							...el,
-							properties: {
-								expanded: this.activeCategory.includes(el.category),
-							},
-						} as INodeCreateElement);
-						return accu;
-					}
-
-					accu.push(el);
-					return accu;
-				}, []);
-		},
-
-		subcategorizedItems(): INodeCreateElement[] {
-			const activeSubcategory = this.activeSubcategory;
-			if(!activeSubcategory) return [];
-
-			const category = activeSubcategory.category;
-			const subcategory = (activeSubcategory.properties as ISubcategoryItemProps).subcategory;
-
-			// If no category is set, we use all categorized nodes
-			const nodes = category
-				? this.categoriesWithNodes[category][subcategory].nodes
-				: this.categorized;
-
-			return nodes.filter((el: INodeCreateElement) => matchesSelectType(el, this.selectedType));
-		},
-
-		subcategorizedNodes(): INodeCreateElement[] {
-			return this.subcategorizedItems.filter(node => node.type === 'node');
-		},
-
-		renderedItems(): INodeCreateElement[] {
-			if(this.firstLevelItems.length > 0 && this.activeSubcategory === null) return this.firstLevelItems;
-			if(this.subcategorizedItems.length === 0) return this.categorized;
-
-			return this.subcategorizedItems;
-		},
-
-		isSearchVisible(): boolean {
-			if(this.subcategorizedItems.length === 0) return true;
-
-			let totalItems = 0;
-			for (const item of this.subcategorizedItems) {
-				// Category contains many nodes so we need to count all of them
-				// for the current selectedType
-				if(item.type === 'category') {
-					const categoryItems = this.categoriesWithNodes[item.key];
-					const categoryItemsCount = Object.values(categoryItems)?.[0];
-					const countKeys = NODE_TYPE_COUNT_MAPPER[this.selectedType];
-
-					for (const countKey of countKeys) {
-						totalItems += categoryItemsCount[(countKey as "triggerCount" | "regularCount")];
-					}
-
-					continue;
-				}
-				// If it's not category, it must be just a node item so we count it as 1
-				totalItems += 1;
-			}
-
-			return totalItems > 9;
-		},
-	},
-	watch: {
-		isSearchVisible(isVisible) {
-			if(isVisible === false) {
-				// Focus the root container when search is hidden to make sure
-				// keyboard navigation still works
-				this.$nextTick(() => {
-					(this.$refs.mainPanelContainer as HTMLElement).focus();
-				});
-			}
-		},
-		nodeFilter(newValue, oldValue) {
-			// Reset the index whenver the filter-value changes
-			this.activeIndex = 0;
-			this.activeSubcategoryIndex = 0;
-			this.$externalHooks().run('nodeCreateList.nodeFilterChanged', {
-				oldValue,
-				newValue,
-				selectedType: this.selectedType,
-				filteredNodes: this.filteredNodeTypes,
-			});
-			this.$telemetry.trackNodesPanel('nodeCreateList.nodeFilterChanged', {
-				oldValue,
-				newValue,
-				selectedType: this.selectedType,
-				filteredNodes: this.filteredNodeTypes,
-				workflow_id: this.workflowsStore.workflowId,
-			});
-		},
-	},
-	methods: {
-		filterOutNodexFromExcludedCategories(nodes: INodeCreateElement[]) {
-			return nodes.filter(node => {
-				const excludedCategoriesIntersect = intersection(
-					this.excludedCategories,
-					((node.properties as INodeItemProps)?.nodeType.codex?.categories || []),
-				);
-
-				return excludedCategoriesIntersect.length === 0;
-			});
-		},
-		switchToAllTabAndFilter() {
-			const currentFilter = this.nodeFilter;
-			this.nodeCreatorStore.showTabs = true;
-			this.nodeCreatorStore.selectedType = ALL_NODE_FILTER;
-			this.activeSubcategoryHistory = [];
-
-			this.$nextTick(() => this.nodeCreatorStore.itemsFilter = currentFilter);
-		},
-		onNodeFilterChange(filter: string) {
-			this.nodeCreatorStore.itemsFilter = filter;
-		},
-		selectWebhook() {
-			this.$emit('nodeTypeSelected', WEBHOOK_NODE_TYPE);
-		},
-		selectHttpRequest() {
-			this.$emit('nodeTypeSelected', HTTP_REQUEST_NODE_TYPE);
-		},
-		nodeFilterKeyDown(e: KeyboardEvent) {
-			// We only want to propagate 'Escape' as it closes the node-creator and
-			// 'Tab' which toggles it
-			if (!['Escape', 'Tab'].includes(e.key)) e.stopPropagation();
-
-			// Prevent cursors position change
-			if(['ArrowUp', 'ArrowDown'].includes(e.key)) e.preventDefault();
-
-			if (this.activeSubcategory) {
-				const activeList = this.subcategorizedItems;
-				const activeNodeType = activeList[this.activeSubcategoryIndex];
-
-				if (e.key === 'ArrowDown' && this.activeSubcategory) {
-					this.activeSubcategoryIndex++;
-					this.activeSubcategoryIndex = Math.min(
-						this.activeSubcategoryIndex,
-						activeList.length - 1,
-					);
-				}
-				else if (e.key === 'ArrowUp' && this.activeSubcategory) {
-					this.activeSubcategoryIndex--;
-					this.activeSubcategoryIndex = Math.max(this.activeSubcategoryIndex, 0);
-				}
-				else if (e.key === 'Enter') {
-					this.selected(activeNodeType);
-				} else if (e.key === 'ArrowLeft' && activeNodeType?.type === 'category' && (activeNodeType.properties as ICategoryItemProps).expanded) {
-					this.selected(activeNodeType);
-				} else if (e.key === 'ArrowLeft') {
-					this.onSubcategoryClose();
-				} else if (e.key === 'ArrowRight' && activeNodeType?.type === 'category' && !(activeNodeType.properties as ICategoryItemProps).expanded) {
-					this.selected(activeNodeType);
-				}
-				return;
-			}
-
-			const activeList = this.searchFilter.length > 0 ? this.filteredNodeTypes : this.renderedItems;
-			const activeNodeType = activeList[this.activeIndex];
-
-			if (e.key === 'ArrowDown') {
-				this.activeIndex++;
-				// Make sure that we stop at the last nodeType
-				this.activeIndex = Math.min(
-					this.activeIndex,
-					activeList.length - 1,
-				);
-			} else if (e.key === 'ArrowUp') {
-				this.activeIndex--;
-				// Make sure that we do not get before the first nodeType
-				this.activeIndex = Math.max(this.activeIndex, 0);
-			} else if (e.key === 'Enter' && activeNodeType) {
-				this.selected(activeNodeType);
-			} else if (e.key === 'ArrowRight' && activeNodeType?.type === 'subcategory') {
-				this.selected(activeNodeType);
-			} else if (e.key === 'ArrowRight' && activeNodeType?.type === 'category' && !(activeNodeType.properties as ICategoryItemProps).expanded) {
-				this.selected(activeNodeType);
-			} else if (e.key === 'ArrowLeft' && activeNodeType?.type === 'category' && (activeNodeType.properties as ICategoryItemProps).expanded) {
-				this.selected(activeNodeType);
-			}
-		},
-		selected(element: INodeCreateElement) {
-			const typeHandler = {
-				node: () => this.$emit('nodeTypeSelected', (element.properties as INodeItemProps).nodeType.name),
-				category: () => this.onCategorySelected(element.category),
-				subcategory: () => this.onSubcategorySelected(element),
-			};
-
-			typeHandler[element.type]();
-		},
-		onCategorySelected(category: string) {
-			if (this.activeCategory.includes(category)) {
-				this.activeCategory = this.activeCategory.filter(
-					(active: string) => active !== category,
-				);
-			} else {
-				this.activeCategory = [...this.activeCategory, category];
-				this.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', { category_name: category, workflow_id: this.workflowsStore.workflowId });
-			}
-
-			this.activeIndex = this.categorized.findIndex(
-				(el: INodeCreateElement) => el.category === category,
-			);
-		},
-		onSubcategorySelected(selected: INodeCreateElement) {
-			this.$emit('onSubcategorySelected', selected);
-			this.nodeCreatorStore.showTabs = false;
-			this.activeSubcategoryIndex = 0;
-			this.activeSubcategoryHistory.push(selected);
-			this.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: this.workflowsStore.workflowId });
-		},
-
-		onSubcategoryClose() {
-			this.$emit('subcategoryClose', this.activeSubcategory);
-			this.activeSubcategoryHistory.pop();
-			this.activeSubcategoryIndex = 0;
-			this.nodeCreatorStore.itemsFilter = '';
-
-			if (!this.nodeCreatorStore.showScrim) {
-				this.nodeCreatorStore.showTabs = true;
-			}
-		},
-
-		onClickInside() {
-			this.searchEventBus.$emit('focus');
-		},
-	},
+export interface Props {
+	flatten?: boolean;
+	filterByType?: boolean;
+	showSubcategoryIcon?: boolean;
+	alwaysShowSearch?: boolean;
+	expandAllCategories?: boolean;
+	enableGlobalCategoriesCounter?: boolean;
+	lazyRender?: boolean;
+	searchPlaceholder?: string;
+	withActionsGetter?: (element: NodeCreateElement) => boolean;
+	searchItems?: INodeCreateElement[];
+	excludedSubcategories?: string[];
+	firstLevelItems?: INodeCreateElement[];
+	initialActiveCategories?: string[];
+	initialActiveIndex?: number;
+	categorizedItems: INodeCreateElement[];
+	allItems: INodeCreateElement[];
+	categoriesWithNodes: ICategoriesWithNodes;
+	subcategoryOverride?: SubcategoryCreateElement | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	filterByType: true,
+	searchItems: () => [],
+	excludedSubcategories: () => [],
+	firstLevelItems: () => [],
+	initialActiveCategories: () => [],
+});
+
+const emit = defineEmits<{
+	(event: 'subcategoryClose', value: INodeCreateElement[]): void,
+	(event: 'onSubcategorySelected', value: INodeCreateElement): void,
+	(event: 'nodeTypeSelected', value: string[]): void,
+	(event: 'actionSelected', value: INodeCreateElement): void,
+	(event: 'actionsOpen', value: INodeTypeDescription): void,
+}>();
+
+const instance = getCurrentInstance();
+const { registerCustomAction, unregisterCustomAction } = useGlobalLinkActions();
+
+const { $externalHooks } = new externalHooks();
+
+const { defaultLocale } = useRootStore();
+const { workflowId } = useWorkflowsStore();
+const nodeCreatorStore = useNodeCreatorStore();
+
+const state = reactive({
+	activeCategory: props.initialActiveCategories,
+	// Keep track of activated subcategories so we could traverse back more than one level
+	activeSubcategoryHistory: [] as Array<{scrollPosition: number, subcategory: INodeCreateElement, activeIndex: number, filter: string}>,
+	activeIndex: props.initialActiveIndex || 0,
+	activeSubcategoryIndex: 0,
+	ALL_NODE_FILTER,
+	TRIGGER_NODE_FILTER,
+	REGULAR_NODE_FILTER,
+	mainPanelContainer: null as HTMLElement | null,
+	transitionDirection: 'in',
+});
+const searchBar = ref<InstanceType<typeof SearchBar>>();
+const scrollableContainer = ref<InstanceType<typeof HTMLElement>>();
+
+const activeSubcategory = computed<INodeCreateElement | null> (
+	() => state.activeSubcategoryHistory[state.activeSubcategoryHistory.length - 1]?.subcategory || null,
+);
+
+const activeSubcategoryTitle = computed<string> (() => {
+  if(!activeSubcategory.value || !activeSubcategory.value.properties) return '';
+
+	const subcategory = (activeSubcategory.value.properties as ISubcategoryItemProps).subcategory;
+  const subcategoryName = camelcase(subcategory);
+
+  const titleLocaleKey = `nodeCreator.subcategoryTitles.${subcategoryName}` as BaseTextKey;
+  const nameLocaleKey = `nodeCreator.subcategoryNames.${subcategoryName}` as BaseTextKey;
+
+  const titleLocale = instance?.proxy?.$locale.baseText(titleLocaleKey) as string;
+  const nameLocale = instance?.proxy?.$locale.baseText(nameLocaleKey) as string;
+  // If resolved title locale is same as the locale key it means it doesn't exist
+  // so we fallback to the subcategoryName
+	if(titleLocale === titleLocaleKey) return nameLocale === nameLocaleKey ? subcategory : nameLocale;
+
+  return titleLocale;
+});
+
+const searchFilter = computed<string> (() => nodeCreatorStore.itemsFilter.toLowerCase().trim());
+
+
+const matchedTypeNodes = computed<INodeCreateElement[]> (() => {
+  if(!props.filterByType) return props.searchItems;
+  return props.searchItems.filter((el: INodeCreateElement) => matchesSelectType(el, nodeCreatorStore.selectedType));
+});
+
+const filteredNodeTypes = computed<INodeCreateElement[]> (() => {
+  const filter = searchFilter.value;
+
+  let returnItems: INodeCreateElement[] = [];
+  if (defaultLocale !== 'en') {
+    returnItems = props.searchItems.filter((el: INodeCreateElement) => {
+      return filter && matchesSelectType(el, nodeCreatorStore.selectedType) && matchesNodeType(el, filter);
+    });
+  }
+  else {
+    const matchingNodes = props.filterByType
+			? props.searchItems.filter((el) => matchesSelectType(el, nodeCreatorStore.selectedType))
+			: props.searchItems;
+
+    const matchedCategorizedNodes = sublimeSearch<INodeCreateElement>(filter, matchingNodes, [
+			{key: 'properties.nodeType.displayName', weight: 2},
+			{key: 'properties.nodeType.codex.alias', weight: 1},
+		]);
+    returnItems = matchedCategorizedNodes.map(({item}) => item);
+  }
+
+  return returnItems;
+});
+
+const filteredAllNodeTypes = computed<INodeCreateElement[]> (() => {
+  if(filteredNodeTypes.value.length > 0) return [];
+
+  const matchedAllNodex = props.allItems.filter((el: INodeCreateElement) => {
+    return searchFilter.value && el.type === 'node' && matchesNodeType(el, searchFilter.value);
+  });
+
+  return matchedAllNodex;
+});
+
+const categorized = computed<INodeCreateElement[]> (() => {
+  return props.categorizedItems
+    .reduce((accu: INodeCreateElement[], el: INodeCreateElement) => {
+      if(
+        el.type === 'subcategory' &&
+        (props.excludedSubcategories || []).includes((el.properties as ISubcategoryItemProps).subcategory)
+      ) {
+        return accu;
+      }
+
+      if (
+        el.type !== 'category' &&
+        !state.activeCategory.includes(el.category)
+      ) {
+        return accu;
+      }
+
+      if (!matchesSelectType(el, nodeCreatorStore.selectedType)) {
+        return accu;
+      }
+
+      if (el.type === 'category') {
+        accu.push({
+          ...el,
+          properties: {
+            expanded: state.activeCategory.includes(el.category),
+          },
+        } as INodeCreateElement);
+        return accu;
+      }
+
+      accu.push(el);
+      return accu;
+    }, []);
+});
+
+const subcategorizedItems = computed<INodeCreateElement[]> (() => {
+  if(!activeSubcategory.value) return [];
+
+  const category = activeSubcategory.value.category;
+  const subcategory = (activeSubcategory.value.properties as ISubcategoryItemProps).subcategory;
+
+  // If no category is set, we use all categorized nodes
+  const nodes = category
+    ? props.categoriesWithNodes[category][subcategory].nodes
+    : categorized.value;
+
+  return nodes.filter((el: INodeCreateElement) => matchesSelectType(el, nodeCreatorStore.selectedType));
+});
+
+const renderedItems = computed<INodeCreateElement[]> (() => {
+  if(props.firstLevelItems.length > 0 && activeSubcategory.value === null) return props.firstLevelItems;
+  if(props.flatten) return matchedTypeNodes.value;
+  if(subcategorizedItems.value.length === 0) return categorized.value;
+
+	const isSingleCategory = subcategorizedItems.value.filter((item) => item.type === 'category').length === 1;
+  return isSingleCategory ? subcategorizedItems.value.slice(1) : subcategorizedItems.value;
+});
+
+const isSearchVisible = computed<boolean> (() => {
+  if(subcategorizedItems.value.length === 0) return true;
+
+  let totalItems = 0;
+  for (const item of subcategorizedItems.value) {
+    // Category contains many nodes so we need to count all of them
+    // for the current selectedType
+    if(item.type === 'category') {
+      const categoryItems = props.categoriesWithNodes[item.key];
+      const categoryItemsCount = Object.values(categoryItems)?.[0];
+      const countKeys = NODE_TYPE_COUNT_MAPPER[nodeCreatorStore.selectedType];
+
+      for (const countKey of countKeys) {
+        totalItems += categoryItemsCount[(countKey as "triggerCount" | "regularCount")];
+      }
+
+      continue;
+    }
+    // If it's not category, it must be just a node item so we count it as 1
+    totalItems += 1;
+  }
+  return totalItems > 9;
+});
+
+// Methods
+function getScrollTop() {
+	return scrollableContainer.value?.scrollTop || 0;
+}
+function setScrollTop(scrollTop: number) {
+	if(scrollableContainer.value) {
+		scrollableContainer.value.scrollTop = scrollTop;
+	}
+}
+function switchToAllTabAndFilter() {
+	const currentFilter = nodeCreatorStore.itemsFilter;
+  nodeCreatorStore.setShowTabs(true);
+  nodeCreatorStore.setSelectedType(ALL_NODE_FILTER);
+  state.activeSubcategoryHistory = [];
+
+  nextTick(() => onNodeFilterChange(currentFilter));
+}
+
+function onNodeFilterChange(filter: string) {
+  nodeCreatorStore.setFilter(filter);
+}
+
+function selectWebhook() {
+  emit('nodeTypeSelected', [WEBHOOK_NODE_TYPE]);
+}
+
+function selectHttpRequest() {
+  emit('nodeTypeSelected', [HTTP_REQUEST_NODE_TYPE]);
+}
+function nodeFilterKeyDown(e: KeyboardEvent) {
+  // We only want to propagate 'Escape' as it closes the node-creator and
+  // 'Tab' which toggles it
+  if (!['Escape', 'Tab'].includes(e.key)) e.stopPropagation();
+
+  // Prevent cursors position change
+  if(['ArrowUp', 'ArrowDown'].includes(e.key)) e.preventDefault();
+
+  if (activeSubcategory.value) {
+    const activeList = searchFilter.value.length > 0 ? filteredNodeTypes.value : renderedItems.value;;
+		const activeNodeType = activeList[state.activeSubcategoryIndex];
+
+    if (e.key === 'ArrowDown' && activeSubcategory.value) {
+      state.activeSubcategoryIndex++;
+      state.activeSubcategoryIndex = Math.min(
+        state.activeSubcategoryIndex,
+        activeList.length - 1,
+      );
+    }
+    else if (e.key === 'ArrowUp' && activeSubcategory.value) {
+      state.activeSubcategoryIndex--;
+      state.activeSubcategoryIndex = Math.max(state.activeSubcategoryIndex, 0);
+    }
+    else if (e.key === 'Enter') {
+      selected(activeNodeType);
+    } else if (e.key === 'ArrowLeft' && activeNodeType?.type === 'category' && (activeNodeType.properties as ICategoryItemProps).expanded) {
+      selected(activeNodeType);
+    } else if (e.key === 'ArrowLeft') {
+      onSubcategoryClose();
+    } else if (e.key === 'ArrowRight' && activeNodeType?.type === 'category' && !(activeNodeType.properties as ICategoryItemProps).expanded) {
+      selected(activeNodeType);
+    } else if (e.key === 'ArrowRight' && (['node','action'].includes(activeNodeType?.type))) {
+			selected(activeNodeType);
+		}
+    return;
+  }
+
+  const activeList = searchFilter.value.length > 0 ? filteredNodeTypes.value : renderedItems.value;
+  const activeNodeType = activeList[state.activeIndex];
+
+  if (e.key === 'ArrowDown') {
+    state.activeIndex++;
+    // Make sure that we stop at the last nodeType
+    state.activeIndex = Math.min(
+      state.activeIndex,
+      activeList.length - 1,
+    );
+  } else if (e.key === 'ArrowUp') {
+    state.activeIndex--;
+    // Make sure that we do not get before the first nodeType
+    state.activeIndex = Math.max(state.activeIndex, 0);
+  } else if (e.key === 'Enter' && activeNodeType) {
+    selected(activeNodeType);
+  } else if (e.key === 'ArrowRight' && activeNodeType?.type === 'subcategory') {
+    selected(activeNodeType);
+  } else if (e.key === 'ArrowRight' && activeNodeType?.type === 'category' && !(activeNodeType.properties as ICategoryItemProps).expanded) {
+    selected(activeNodeType);
+  } else if (e.key === 'ArrowLeft' && activeNodeType?.type === 'category' && (activeNodeType.properties as ICategoryItemProps).expanded) {
+    selected(activeNodeType);
+  } else if (e.key === 'ArrowRight' && (['node','action'].includes(activeNodeType?.type))) {
+		selected(activeNodeType);
+	}
+}
+function selected(element: INodeCreateElement) {
+  const typeHandler = {
+    category: () => onCategorySelected(element.category),
+    subcategory: () => onSubcategorySelected(element),
+		node: () => onNodeSelected(element as NodeCreateElement),
+		action: () => onActionSelected(element),
+  };
+
+  typeHandler[element.type]();
+}
+
+function onNodeSelected(element: NodeCreateElement) {
+	if(props.withActionsGetter && props.withActionsGetter(element) === true) {
+		emit('actionsOpen', element.properties.nodeType);
+		return;
+	}
+	emit('nodeTypeSelected', [element.key]);
+}
+
+function onCategorySelected(category: string) {
+  if (state.activeCategory.includes(category)) {
+    state.activeCategory = state.activeCategory.filter(
+      (active: string) => active !== category,
+    );
+  } else {
+    state.activeCategory = [...state.activeCategory, category];
+    instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', { category_name: category, workflow_id: workflowId });
+  }
+
+  state.activeIndex = categorized.value.findIndex(
+    (el: INodeCreateElement) => el.category === category,
+  );
+}
+function onActionSelected(element: INodeCreateElement) {
+	emit('actionSelected', element);
+}
+
+function onSubcategorySelected(selected: INodeCreateElement, track = true) {
+	state.transitionDirection = 'in';
+	// Store the current subcategory UI details in the state
+	// so we could revert it when the user closes the subcategory
+  state.activeSubcategoryHistory.push({
+		subcategory: selected,
+		activeIndex: state.activeSubcategoryIndex,
+		scrollPosition: getScrollTop(),
+		filter: nodeCreatorStore.itemsFilter,
+	});
+	nodeCreatorStore.setFilter('');
+  emit('onSubcategorySelected', selected);
+  nodeCreatorStore.setShowTabs(false);
+  state.activeSubcategoryIndex = 0;
+
+	if(track) {
+		instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: workflowId });
+	}
+}
+
+async function onSubcategoryClose() {
+	state.transitionDirection = 'out';
+	const poppedSubCategory = state.activeSubcategoryHistory.pop();
+	onNodeFilterChange(poppedSubCategory?.filter || '');
+	await nextTick();
+	emit('subcategoryClose', state.activeSubcategoryHistory.map((el) => el.subcategory));
+	await nextTick();
+	setScrollTop(poppedSubCategory?.scrollPosition || 0);
+	state.activeSubcategoryIndex = poppedSubCategory?.activeIndex || 0;
+
+	if(!nodeCreatorStore.showScrim && state.activeSubcategoryHistory.length === 0) {
+		nodeCreatorStore.setShowTabs(true);
+	}
+}
+
+watch(() => props.expandAllCategories, (expandAll) => {
+	if (expandAll) state.activeCategory = Object.keys(props.categoriesWithNodes);
+});
+
+watch(() => props.subcategoryOverride, (subcategory) => {
+	if (subcategory) onSubcategorySelected(subcategory, false);
+});
+
+onMounted(() => {
+	registerCustomAction('showAllNodeCreatorNodes', switchToAllTabAndFilter);
+});
+
+onUnmounted(() => {
+	nodeCreatorStore.setFilter('');
+	unregisterCustomAction('showAllNodeCreatorNodes');
 });
+
+watch(filteredNodeTypes, (returnItems) => {
+	$externalHooks().run('nodeCreateList.filteredNodeTypesComputed', {
+		nodeFilter: nodeCreatorStore.itemsFilter,
+		result: returnItems,
+		selectedType: nodeCreatorStore.selectedType,
+	});
+});
+
+watch(isSearchVisible, (isVisible) => {
+	if(isVisible === false) {
+		// Focus the root container when search is hidden to make sure
+		// keyboard navigation still works
+		nextTick(() => state.mainPanelContainer?.focus());
+	}
+});
+watch(() => nodeCreatorStore.itemsFilter, (newValue, oldValue) => {
+	// Reset the index whenver the filter-value changes
+	state.activeIndex = 0;
+	state.activeSubcategoryIndex = 0;
+	$externalHooks().run('nodeCreateList.nodeFilterChanged', {
+		oldValue,
+		newValue,
+		selectedType: nodeCreatorStore.selectedType,
+		filteredNodes: filteredNodeTypes.value,
+	});
+	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.nodeFilterChanged', {
+		oldValue,
+		newValue,
+		selectedType: nodeCreatorStore.selectedType,
+		filteredNodes: filteredNodeTypes.value,
+		workflow_id: workflowId,
+	});
+});
+
+const { activeSubcategoryIndex, activeIndex, mainPanelContainer } = toRefs(state);
 </script>
 
 <style lang="scss" module>
@@ -521,11 +570,12 @@ export default mixins(externalHooks, globalLinkActions).extend({
 	// for the slide-out panel effect
 	z-index: 1;
 }
-
+.nodeIcon {
+	margin-right: var(--spacing-s);
+}
 .categorizedItems {
 	background: white;
 	height: 100%;
-
 	background-color: $node-creator-background-color;
 	&:before {
 		box-sizing: border-box;
@@ -536,14 +586,24 @@ export default mixins(externalHooks, globalLinkActions).extend({
 		height: 100%;
 	}
 }
+.footer {
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-base);
+	margin: 0 var(--spacing-xs) 0;
+	padding: var(--spacing-4xs) 0;
+	line-height: var(--font-line-height-regular);
+	border-top: 1px solid #DBDFE7;
+	z-index: 1;
+	margin-top: -1px;
+}
 .subcategoryHeader {
 	border-bottom: $node-creator-border-color solid 1px;
 	height: 50px;
 	background-color: $node-creator-subcategory-panel-header-bacground-color;
 
-	font-size: 18px;
-	font-weight: 600;
-	line-height: 16px;
+	font-size: var(--font-size-l);
+	font-weight: var(--font-weight-bold);
+	line-height: var(--font-line-height-compact);
 
 	display: flex;
 	align-items: center;
@@ -567,9 +627,11 @@ export default mixins(externalHooks, globalLinkActions).extend({
 .scrollable {
 	height: calc(100% - 120px);
 	padding-top: 1px;
+	padding-bottom: var(--spacing-xl);
 	overflow-y: auto;
 	overflow-x: visible;
 
+	scrollbar-width: none; /* Firefox 64 */
 	&::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
index bbc2b3dd444a0..d67616f57f266 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
@@ -1,88 +1,50 @@
 <template>
 	<div :class="$style.category">
 		<span :class="$style.name">
-			{{ renderCategoryName(categoryName) }} ({{ nodesCount }})
+			{{ renderCategoryName(item.category) }}{{ count !== undefined ? ` (${count})` : ''}}
 		</span>
 		<font-awesome-icon
-			:class="$style.arrow"
+			v-if="isExpanded"
 			icon="chevron-down"
-			v-if="item.properties.expanded"
+			:class="$style.arrow"
 		/>
 		<font-awesome-icon :class="$style.arrow" icon="chevron-up" v-else />
 	</div>
 </template>
 
-<script lang="ts">
-import Vue, { PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, getCurrentInstance } from 'vue';
 import camelcase from 'lodash.camelcase';
 import { CategoryName } from '@/plugins/i18n';
-import { INodeCreateElement, ICategoriesWithNodes } from '@/Interface';
-import { NODE_TYPE_COUNT_MAPPER } from '@/constants';
-import { mapStores } from 'pinia';
-import { useNodeTypesStore } from '@/stores/nodeTypes';
-import { useNodeCreatorStore } from '@/stores/nodeCreator';
-
-
-export default Vue.extend({
-	props: {
-		item: {
-			type: Object as PropType<INodeCreateElement>,
-		},
-	},
-	computed: {
-		...mapStores(
-			useNodeCreatorStore,
-			useNodeTypesStore,
-		),
-		selectedType(): "Regular" | "Trigger" | "All" {
-			return this.nodeCreatorStore.selectedType;
-		},
-		categoriesWithNodes(): ICategoriesWithNodes {
-			return this.nodeTypesStore.categoriesWithNodes;
-		},
-		categorizedItems(): INodeCreateElement[] {
-			return this.nodeTypesStore.categorizedItems;
-		},
-		categoryName() {
-			return camelcase(this.item.category);
-		},
-		nodesCount(): number {
-			const currentCategory= (this.categoriesWithNodes as ICategoriesWithNodes)[this.item.category];
-			const subcategories = Object.keys(currentCategory);
+import { INodeCreateElement, ICategoryItemProps } from '@/Interface';
 
-			// We need to sum subcategories count for the curent nodeType view
-			// to get the total count of category
-			const count = subcategories.reduce((accu: number, subcategory: string) => {
-				const countKeys = NODE_TYPE_COUNT_MAPPER[this.selectedType];
+export interface Props {
+	item: INodeCreateElement;
+	count?: number;
+}
+const props = defineProps<Props>();
+const instance = getCurrentInstance();
 
-				for (const countKey of countKeys) {
-					accu += currentCategory[subcategory][(countKey as "triggerCount" | "regularCount")];
-				}
+const isExpanded = computed<boolean>(() =>(props.item.properties as ICategoryItemProps).expanded);
 
-				return accu;
-			}, 0);
-			return count;
-		},
-	},
-	methods: {
-		renderCategoryName(categoryName: CategoryName) {
-			const key = `nodeCreator.categoryNames.${categoryName}` as const;
+function renderCategoryName(categoryName: string) {
+	const camelCasedCategoryName = camelcase(categoryName) as CategoryName;
+	const key = `nodeCreator.categoryNames.${camelCasedCategoryName}` as const;
 
-			return this.$locale.exists(key) ? this.$locale.baseText(key) : this.item.category;
-		},
-	},
-});
+	return instance?.proxy.$locale.exists(key)
+		? instance?.proxy.$locale.baseText(key)
+		: categoryName;
+}
 </script>
 
-
 <style lang="scss" module>
 .category {
 	font-size: 11px;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 	letter-spacing: 1px;
 	line-height: 11px;
 	padding: 10px 0;
-	margin: 0 12px;
+	margin: 0 var(--spacing-xs);
 	border-bottom: 1px solid $node-creator-border-color;
 	display: flex;
 	text-transform: uppercase;
@@ -94,7 +56,7 @@ export default Vue.extend({
 }
 
 .arrow {
-	font-size: 12px;
+	font-size: var(--font-size-2xs);
 	width: 12px;
 	color: $node-creator-arrow-color;
 }
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CreatorItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/CreatorItem.vue
deleted file mode 100644
index c25f3a62021d6..0000000000000
--- a/packages/editor-ui/src/components/Node/NodeCreator/CreatorItem.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-	<div
-		:class="{
-			container: true,
-			clickable: clickable,
-			active: active,
-		}"
-		v-on="$listeners"
-	>
-		<category-item
-			v-if="item.type === 'category'"
-			:item="item"
-		/>
-
-		<subcategory-item
-			v-else-if="item.type === 'subcategory'"
-			:item="item"
-		/>
-
-		<node-item
-			v-else-if="item.type === 'node'"
-			:nodeType="item.properties.nodeType"
-			@dragstart="$listeners.dragstart"
-			@dragend="$listeners.dragend"
-		/>
-	</div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { INodeCreateElement } from '@/Interface';
-import NodeItem from './NodeItem.vue';
-import SubcategoryItem from './SubcategoryItem.vue';
-import CategoryItem from './CategoryItem.vue';
-
-export default Vue.extend({
-	name: 'CreatorItem',
-	components: {
-		CategoryItem,
-		SubcategoryItem,
-		NodeItem,
-	},
-	props: {
-		item: {
-			type: Object as PropType<INodeCreateElement>,
-		},
-		active: {
-			type: Boolean,
-		},
-		clickable: {
-			type: Boolean,
-		},
-		lastNode: {
-			type: Boolean,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-	position: relative;
-	border-left: 2px solid transparent;
-
-	&:hover {
-		border-color: $node-creator-item-hover-border-color;
-	}
-
-	&.active  {
-		border-color: $color-primary !important;
-	}
-}
-
-</style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
index bf0396cd5a65b..06e402b5f31b1 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
@@ -1,7 +1,6 @@
 <template>
 	<div
-		:is="transitionsEnabled ? 'transition-group' : 'div'"
-		class="item-iterator"
+		:class="$style.itemIterator"
 		name="accordion"
 		@before-enter="beforeEnter"
 		@enter="enter"
@@ -9,108 +8,217 @@
 		@leave="leave"
 	>
 		<div
-			v-for="(item, index) in elements"
-			:key="item.key"
-			:class="item.type"
-			:data-key="item.key"
+			v-for="(item, index) in renderedItems"
+			:key="`${item.key}-${index}`"
 			data-test-id="item-iterator-item"
+			:class="{
+				'clickable': !disabled,
+				[$style[item.type]]: true,
+				[$style.active]: activeIndex === index && !disabled,
+				[$style.iteratorItem]: true
+			}"
+			ref="iteratorItems"
+			@click="wrappedEmit('selected', item)"
 		>
-			<creator-item
+			<category-item
+				v-if="item.type === 'category'"
 				:item="item"
-				:active="activeIndex === index && !disabled"
-				:clickable="!disabled"
-				:lastNode="
-					index === elements.length - 1 || elements[index + 1].type !== 'node'
-				"
-				@click="$emit('selected', item)"
-				@dragstart="emit('dragstart', item, $event)"
-				@dragend="emit('dragend', item, $event)"
+				:count="enableGlobalCategoriesCounter ? getCategoryCount(item) : undefined"
+			/>
+
+			<subcategory-item
+				v-else-if="item.type === 'subcategory'"
+				:item="item"
+			/>
+
+			<node-item
+				v-else-if="item.type === 'node'"
+				:nodeType="item.properties.nodeType"
+				:allow-actions="withActionsGetter && withActionsGetter(item)"
+				@dragstart="wrappedEmit('dragstart', item, $event)"
+				@dragend="wrappedEmit('dragend', item, $event)"
+				@nodeTypeSelected="$listeners.nodeTypeSelected"
+				@actionsOpen="$listeners.actionsOpen"
+			/>
+
+			<action-item
+				v-else-if="item.type === 'action'"
+				:nodeType="item.properties.nodeType"
+				:action="item.properties.nodeType"
+				@dragstart="wrappedEmit('dragstart', item, $event)"
+				@dragend="wrappedEmit('dragend', item, $event)"
 			/>
 		</div>
+		<aside
+			v-for="item in elements.length"
+			v-show="(renderedItems.length < item)"
+			:key="item"
+			:class="$style.loadingItem"
+		>
+			<n8n-loading :loading="true" :rows="1" variant="p" />
+		</aside>
 	</div>
 </template>
 
-<script lang="ts">
-import { INodeCreateElement } from '@/Interface';
-
-import Vue, { PropType } from 'vue';
-import CreatorItem from './CreatorItem.vue';
-
-export default Vue.extend({
-	name: 'ItemIterator',
-	components: {
-		CreatorItem,
-	},
-	props: {
-		elements: {
-			type: Array as PropType<INodeCreateElement[]>,
-		},
-		activeIndex: {
-			type: Number,
-		},
-		disabled: {
-			type: Boolean,
-		},
-		transitionsEnabled: {
-			type: Boolean,
-		},
-	},
-	methods: {
-		emit(eventName: string, element: INodeCreateElement, event: Event) {
-			if (this.$props.disabled) {
-				return;
-			}
-
-			this.$emit(eventName, { element, event });
-		},
-		beforeEnter(el: HTMLElement) {
-			el.style.height = '0';
-		},
-		enter(el: HTMLElement) {
-			el.style.height = `${el.scrollHeight}px`;
-		},
-		beforeLeave(el: HTMLElement) {
-			el.style.height = `${el.scrollHeight}px`;
-		},
-		leave(el: HTMLElement) {
-			el.style.height = '0';
-		},
-	},
+<script setup lang="ts">
+import { INodeCreateElement, CategoryCreateElement, NodeCreateElement } from '@/Interface';
+import NodeItem from './NodeItem.vue';
+import SubcategoryItem from './SubcategoryItem.vue';
+import CategoryItem from './CategoryItem.vue';
+import ActionItem from './ActionItem.vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted, ref } from 'vue';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
+import { NODE_TYPE_COUNT_MAPPER } from '@/constants';
+
+export interface Props {
+	elements: INodeCreateElement[];
+	activeIndex?: number;
+	disabled?: boolean;
+	lazyRender?: boolean;
+	withActionsGetter?: (element: NodeCreateElement) => boolean;
+	enableGlobalCategoriesCounter?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	elements: () => [],
 });
-</script>
 
+const emit = defineEmits<{
+	(event: 'selected', element: INodeCreateElement, $e?: Event): void,
+	(event: 'dragstart', element: INodeCreateElement, $e: Event): void,
+	(event: 'dragend', element: INodeCreateElement, $e: Event): void,
+}>();
+
+const state = reactive({
+	renderedItems: [] as INodeCreateElement[],
+	renderAnimationRequest: 0,
+});
+const iteratorItems = ref<HTMLElement[]>([]);
+
+function wrappedEmit(event: 'selected' | 'dragstart' | 'dragend', element: INodeCreateElement, $e?: Event) {
+	if (props.disabled) return;
+
+	emit((event as 'selected' || 'dragstart' || 'dragend'), element, $e);
+}
+function getCategoryCount(item: CategoryCreateElement) {
+	const { categoriesWithNodes } = useNodeTypesStore();
+
+	const currentCategory = categoriesWithNodes[item.category];
+	const subcategories = Object.keys(currentCategory);
+
+	// We need to sum subcategories count for the curent nodeType view
+	// to get the total count of category
+	const count = subcategories.reduce((accu: number, subcategory: string) => {
+		const countKeys = NODE_TYPE_COUNT_MAPPER[useNodeCreatorStore().selectedType];
 
-<style lang="scss" scoped>
-.item-iterator > *:last-child {
-	margin-bottom: var(--spacing-2xl);
+		for (const countKey of countKeys) {
+			accu += currentCategory[subcategory][(countKey as "triggerCount" | "regularCount")];
+		}
+
+		return accu;
+	}, 0);
+	return count;
 }
-.accordion-enter {
-	opacity: 0;
+
+// Lazy render large items lists to prevent the browser from freezing
+// when loading many items.
+function renderItems() {
+	if(props.elements.length <= 20 || props.lazyRender === false) {
+		state.renderedItems = props.elements;
+		return;
+	};
+
+	if (state.renderedItems.length < props.elements.length) {
+		state.renderedItems.push(...props.elements.slice(state.renderedItems.length, state.renderedItems.length + 10));
+		state.renderAnimationRequest = window.requestAnimationFrame(renderItems);
+	}
 }
 
-.accordion-leave-active {
-	opacity: 1;
+function beforeEnter(el: HTMLElement) {
+	el.style.height = '0';
 }
 
-.accordion-leave-active {
-	transition: all 0.25s ease, opacity 0.1s ease;
-	margin-top: 0;
+
+function enter(el: HTMLElement) {
+	el.style.height = `${el.scrollHeight}px`;
 }
 
-.accordion-enter-active {
-	transition: all 0.25s ease, opacity 0.25s ease;
-	margin-top: 0;
+function beforeLeave(el: HTMLElement) {
+	el.style.height = `${el.scrollHeight}px`;
 }
 
-.accordion-leave-to {
-	opacity: 0;
+function leave(el: HTMLElement) {
+	el.style.height = '0';
 }
 
-.accordion-enter-to {
-	opacity: 1;
+onMounted(() => {
+	renderItems();
+});
+
+onUnmounted(() => {
+	window.cancelAnimationFrame(state.renderAnimationRequest);
+	state.renderedItems = [];
+});
+
+// Make sure the active item is always visible
+// scroll if needed
+watch(() => props.activeIndex, async () => {
+	if(props.activeIndex === undefined) return;
+	iteratorItems.value[props.activeIndex]?.scrollIntoView({ block: 'nearest' });
+});
+
+// Trigger elements re-render when they change
+watch(() => props.elements, async () => {
+	window.cancelAnimationFrame(state.renderAnimationRequest);
+	state.renderedItems = [];
+	renderItems();
+});
+
+const { renderedItems } = toRefs(state);
+</script>
+
+<style lang="scss" module>
+.loadingItem {
+	height: 48px;
+	margin: 0 var(--search-margin, var(--spacing-s));
 }
+.iteratorItem {
+	// Make sure border is fully visible
+	margin-left: 1px;
+	position: relative;
+	&::before {
+		content: "";
+		position: absolute;
+		left: -1px;
+		top: 0;
+		bottom: 0;
+		border-left: 2px solid transparent;
+	}
+	&:hover::before {
+		border-color: $node-creator-item-hover-border-color;
+	}
+
+	&.active::before  {
+		border-color: $color-primary !important;
+	}
 
+	&.category.singleCategory {
+		display: none;
+	}
+
+}
+.itemIterator {
+	> *:last-child {
+		margin-bottom: var(--spacing-2xl);
+	}
+}
+.action {
+	&:last-of-type {
+		margin-bottom: var(--spacing-s);
+	}
+}
 .node + .category {
-	margin-top: 15px;
+	margin-top: var(--spacing-s);
 }
 </style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
index 3d363927ac9cf..0c06a61cf3e9f 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
@@ -5,9 +5,8 @@
 	>
 		<div class="main-panel">
 			<trigger-helper-panel
-				v-if="selectedType === TRIGGER_NODE_FILTER"
-				:searchItems="searchItems"
-				@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
+				v-if="nodeCreatorStore.selectedType === TRIGGER_NODE_FILTER"
+				@nodeTypeSelected="$listeners.nodeTypeSelected"
 			>
 				<template #header>
 					<type-selector/>
@@ -15,10 +14,15 @@
 			</trigger-helper-panel>
 			<categorized-items
 				v-else
+				enable-global-categories-counter
+				:categorizedItems="categorizedItems"
+				:categoriesWithNodes="categoriesWithNodes"
 				:searchItems="searchItems"
 				:excludedSubcategories="[OTHER_TRIGGER_NODES_SUBCATEGORY]"
 				:initialActiveCategories="[CORE_NODES_CATEGORY]"
-				@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
+				:allItems="categorizedItems"
+				@nodeTypeSelected="$listeners.nodeTypeSelected"
+				@actionsOpen="() => {}"
 			>
 				<template #header>
 					<type-selector />
@@ -28,73 +32,58 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { PropType } from 'vue';
+<script setup lang="ts">
+import { watch, getCurrentInstance, onMounted, onUnmounted } from 'vue';
 import { externalHooks } from '@/mixins/externalHooks';
-import mixins from 'vue-typed-mixins';
 import TriggerHelperPanel from './TriggerHelperPanel.vue';
 import { ALL_NODE_FILTER, TRIGGER_NODE_FILTER, OTHER_TRIGGER_NODES_SUBCATEGORY, CORE_NODES_CATEGORY } from '@/constants';
 import CategorizedItems from './CategorizedItems.vue';
 import TypeSelector from './TypeSelector.vue';
 import { INodeCreateElement } from '@/Interface';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+
+export interface Props {
+	searchItems?: INodeCreateElement[];
+}
+
+withDefaults(defineProps<Props>(), {
+	searchItems: () => [],
+});
+
+const instance = getCurrentInstance();
+const { $externalHooks } = new externalHooks();
+const { workflowId } = useWorkflowsStore();
+const nodeCreatorStore = useNodeCreatorStore();
+const { categorizedItems, categoriesWithNodes } = useNodeTypesStore();
 
-export default mixins(externalHooks).extend({
-	name: 'NodeCreateList',
-	components: {
-		TriggerHelperPanel,
-		CategorizedItems,
-		TypeSelector,
-	},
-	props: {
-		searchItems: {
-			type: Array as PropType<INodeCreateElement[] | null>,
-		},
-	},
-	data() {
-		return {
-			CORE_NODES_CATEGORY,
-			TRIGGER_NODE_FILTER,
-			ALL_NODE_FILTER,
-			OTHER_TRIGGER_NODES_SUBCATEGORY,
-		};
-	},
-	computed: {
-		...mapStores(
-			useNodeCreatorStore,
-			useWorkflowsStore,
-		),
-		selectedType(): string {
-			return this.nodeCreatorStore.selectedType;
-		},
-	},
-	watch: {
-		selectedType(newValue, oldValue) {
-			this.$externalHooks().run('nodeCreateList.selectedTypeChanged', {
-				oldValue,
-				newValue,
-			});
-			this.$telemetry.trackNodesPanel('nodeCreateList.selectedTypeChanged', {
-				old_filter: oldValue,
-				new_filter: newValue,
-				workflow_id: this.workflowsStore.workflowId,
-			});
-		},
-	},
-	mounted() {
-		this.$externalHooks().run('nodeCreateList.mounted');
-		// Make sure tabs are visible on mount
-		this.nodeCreatorStore.showTabs = true;
-	},
-	destroyed() {
-		this.nodeCreatorStore.selectedType = ALL_NODE_FILTER;
-		this.$externalHooks().run('nodeCreateList.destroyed');
-		this.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: this.workflowsStore.workflowId });
-	},
+watch(() => nodeCreatorStore.selectedType, (newValue, oldValue) => {
+	$externalHooks().run('nodeCreateList.selectedTypeChanged', {
+		oldValue,
+		newValue,
+	});
+	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.selectedTypeChanged', {
+		old_filter: oldValue,
+		new_filter: newValue,
+		workflow_id: workflowId,
+	});
 });
+
+onMounted(() => {
+	$externalHooks().run('nodeCreateList.mounted');
+	// Make sure tabs are visible on mount
+	nodeCreatorStore.setShowTabs(true);
+});
+
+onUnmounted(() => {
+	nodeCreatorStore.setSelectedType(ALL_NODE_FILTER);
+	$externalHooks().run('nodeCreateList.destroyed');
+	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: workflowId });
+});
+
 </script>
+
 <style lang="scss" scoped>
 .container {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue b/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue
index 68ca57426288b..793d27ef74de0 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.noResults">
+	<div :class="{[$style.noResults]: true, [$style.iconless]: !showIcon}">
 		<div :class="$style.icon" v-if="showIcon">
 			<no-results-icon />
 		</div>
@@ -29,30 +29,16 @@
 </template>
 
 
-<script lang="ts">
+<script setup lang="ts">
 import { REQUEST_NODE_FORM_URL } from '@/constants';
-import Vue from 'vue';
 import NoResultsIcon from './NoResultsIcon.vue';
 
-export default Vue.extend({
-	name: 'NoResults',
-	props: {
-		showRequest: {
-			type: Boolean,
-		},
-		showIcon: {
-			type: Boolean,
-		},
-	},
-	components: {
-		NoResultsIcon,
-	},
-	data() {
-		return {
-			REQUEST_NODE_FORM_URL,
-		};
-	},
-});
+export interface Props {
+	showIcon?: boolean;
+	showRequest?: boolean;
+}
+
+defineProps<Props>();
 </script>
 
 <style lang="scss" module>
@@ -79,9 +65,9 @@ export default Vue.extend({
 	}
 }
 
-.action, .request {
+.action p, .request p {
 	font-size: var(--font-size-s);
-	line-height: var(--font-line-height-compact);
+	line-height: var(--font-line-height-xloose);
 }
 
 .request {
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index 2cba51a60ac4c..ce546916a2a5c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<aside :class="{'node-creator-scrim': true, expanded: !uiStore.sidebarMenuCollapsed, active: showScrim}" />
+		<aside :class="{'node-creator-scrim': true, active: nodeCreatorStore.showScrim}" />
 
 		<slide-transition>
 			<div
@@ -10,10 +10,12 @@
 			 	v-click-outside="onClickOutside"
 			 	@dragover="onDragOver"
 			 	@drop="onDrop"
+				@mousedown="onMouseDown"
+				@mouseup="onMouseUp"
 				data-test-id="node-creator"
 			>
 				<main-panel
-					@nodeTypeSelected="nodeTypeSelected"
+					@nodeTypeSelected="$listeners.nodeTypeSelected"
 					:searchItems="searchItems"
 				/>
 			</div>
@@ -21,96 +23,103 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 
-import Vue from 'vue';
+import { computed, watch, reactive, toRefs } from 'vue';
 
 import { INodeCreateElement } from '@/Interface';
-import { INodeTypeDescription } from 'n8n-workflow';
-import SlideTransition from '../../transitions/SlideTransition.vue';
+import SlideTransition from '@/components/transitions/SlideTransition.vue';
 
 import MainPanel from './MainPanel.vue';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
-export default Vue.extend({
-	name: 'NodeCreator',
-	components: {
-		MainPanel,
-		SlideTransition,
-	},
-	props: {
-		active: {
-			type: Boolean,
-		},
-	},
-	computed: {
-		...mapStores(
-			useNodeCreatorStore,
-			useNodeTypesStore,
-			useUIStore,
-		),
-		showScrim(): boolean {
-			return this.nodeCreatorStore.showScrim;
-		},
-		visibleNodeTypes(): INodeTypeDescription[] {
-			return this.nodeTypesStore.visibleNodeTypes;
-		},
-		searchItems(): INodeCreateElement[] {
-			const sorted = [...this.visibleNodeTypes];
-			sorted.sort((a, b) => {
-				const textA = a.displayName.toLowerCase();
-				const textB = b.displayName.toLowerCase();
-				return textA < textB ? -1 : textA > textB ? 1 : 0;
-			});
-
-			return sorted.map((nodeType) => ({
-				type: 'node',
-				category: '',
-				key: `${nodeType.name}`,
-				properties: {
-					nodeType,
-					subcategory: '',
-				},
-				includedByTrigger: nodeType.group.includes('trigger'),
-				includedByRegular: !nodeType.group.includes('trigger'),
-			}));
-		},
-	},
-	methods: {
-		onClickOutside (e: Event) {
-			if (e.type === 'click') {
-				this.$emit('closeNodeCreator');
-			}
-		},
-		nodeTypeSelected (nodeTypeName: string) {
-			this.$emit('nodeTypeSelected', nodeTypeName);
-		},
-		onDragOver(event: DragEvent) {
-			event.preventDefault();
-		},
-		onDrop(event: DragEvent) {
-			if (!event.dataTransfer) {
-				return;
-			}
-
-			const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
-			const nodeCreatorBoundingRect = (this.$refs.nodeCreator as Element).getBoundingClientRect();
-
-			// Abort drag end event propagation if dropped inside nodes panel
-			if (nodeTypeName && event.pageX >= nodeCreatorBoundingRect.x && event.pageY >= nodeCreatorBoundingRect.y) {
-				event.stopPropagation();
-			}
-		},
-	},
-	watch: {
-		active(isActive) {
-			if(isActive === false) this.nodeCreatorStore.showScrim = false;
+export interface Props {
+	active?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	(event: 'closeNodeCreator'): void,
+}>();
+
+const nodeCreatorStore = useNodeCreatorStore();
+const state = reactive({
+	nodeCreator: null as HTMLElement | null,
+	mousedownInsideEvent: null as MouseEvent | null,
+});
+
+const visibleNodeTypes = computed(() => useNodeTypesStore().visibleNodeTypes);
+const searchItems = computed<INodeCreateElement[]>(() => {
+	const sorted = [...visibleNodeTypes.value];
+	sorted.sort((a, b) => {
+		const textA = a.displayName.toLowerCase();
+		const textB = b.displayName.toLowerCase();
+		return textA < textB ? -1 : textA > textB ? 1 : 0;
+	});
+
+	return sorted.map((nodeType) => ({
+		type: 'node',
+		category: '',
+		key: `${nodeType.name}`,
+		properties: {
+			nodeType,
+			subcategory: '',
 		},
-	},
+		includedByTrigger: nodeType.group.includes('trigger'),
+		includedByRegular: !nodeType.group.includes('trigger'),
+	}));
+});
+
+function onClickOutside (event: Event) {
+	// We need to prevent cases where user would click inside the node creator
+	// and try to drag undraggable element. In that case the click event would
+	// be fired and the node creator would be closed. So we stop that if we detect
+	// that the click event originated from inside the node creator. And fire click even on the
+	// original target.
+	if(state.mousedownInsideEvent) {
+		const clickEvent = new MouseEvent('click', {
+			bubbles: true,
+			cancelable: true,
+		});
+		state.mousedownInsideEvent.target?.dispatchEvent(clickEvent);
+		state.mousedownInsideEvent = null;
+		return;
+	};
+
+	if (event.type === 'click') {
+		emit('closeNodeCreator');
+	}
+}
+function onMouseUp() {
+	state.mousedownInsideEvent = null;
+}
+function onMouseDown(event: MouseEvent) {
+	state.mousedownInsideEvent = event;
+}
+function onDragOver(event: DragEvent) {
+	event.preventDefault();
+}
+function onDrop(event: DragEvent) {
+	if (!event.dataTransfer) {
+		return;
+	}
+
+	const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
+	const nodeCreatorBoundingRect = (state.nodeCreator as Element).getBoundingClientRect();
+
+	// Abort drag end event propagation if dropped inside nodes panel
+	if (nodeTypeName && event.pageX >= nodeCreatorBoundingRect.x && event.pageY >= nodeCreatorBoundingRect.y) {
+		event.stopPropagation();
+	}
+}
+
+watch(() => props.active, (isActive) => {
+	if(isActive === false) nodeCreatorStore.setShowScrim(false);
 });
+
+const { nodeCreator } = toRefs(state);
 </script>
 
 <style scoped lang="scss">
@@ -140,10 +149,6 @@ export default Vue.extend({
 	pointer-events: none;
 	transition: opacity 200ms ease-in-out;
 
-	&.expanded {
-		left: $sidebar-expanded-width
-	}
-
 	&.active {
 		opacity: 0.7;
 	}
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
index b90547e48d2a8..60df178a03083 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
@@ -1,206 +1,180 @@
 <template>
-	<div
-		draggable
+	<!-- Node Item is draggable only if it doesn't contain actions -->
+	<n8n-node-creator-node
+		:draggable="!showActionArrow"
 		@dragstart="onDragStart"
 		@dragend="onDragEnd"
-		:class="{[$style['node-item']]: true}"
+		@click.stop="onClick"
+		:class="$style.nodeItem"
+		:description="allowActions ? undefined : description"
+		:title="displayName"
+		:isTrigger="!allowActions && isTriggerNode"
+		:show-action-arrow="showActionArrow"
 	>
-		<node-icon :class="$style['node-icon']" :nodeType="nodeType" />
-		<div>
-			<div :class="$style.details">
-				<span :class="$style.name" data-test-id="node-item-name">
-					{{ $locale.headerText({
-							key: `headers.${shortNodeType}.displayName`,
-							fallback: nodeType.displayName,
-						})
-					}}
-				</span>
-				<span v-if="isTrigger" :class="$style['trigger-icon']">
-					<trigger-icon />
-				</span>
-				<n8n-tooltip v-if="isCommunityNode" placement="top" data-test-id="node-item-community-tooltip">
-					<template #content>
-						<div
-							:class="$style['community-node-icon']"
-							v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
-							@click="onCommunityNodeTooltipClick"
-						>
-						</div>
-					</template>
-					<n8n-icon icon="cube" />
-				</n8n-tooltip>
+		<template #icon>
+			<node-icon :nodeType="nodeType" />
+		</template>
+
+		<template #tooltip v-if="isCommunityNode">
+			<p
+				:class="$style.communityNodeIcon"
+				v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
+				@click="onCommunityNodeTooltipClick"
+			/>
+		</template>
+		<template #dragContent>
+			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer"/>
+			<div
+				:class="$style.draggable"
+				:style="draggableStyle"
+				v-show="dragging"
+			>
+				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
 			</div>
-			<div :class="$style.description">
-				{{ $locale.headerText({
-						key: `headers.${shortNodeType}.description`,
-						fallback: nodeType.description,
-					})
-				}}
-			</div>
-
-			<div :class="$style['draggable-data-transfer']" ref="draggableDataTransfer" />
-			<transition name="node-item-transition">
-				<div
-					:class="$style.draggable"
-					:style="draggableStyle"
-					ref="draggable"
-					v-show="dragging"
-				>
-					<node-icon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
-				</div>
-			</transition>
-		</div>
-	</div>
+		</template>
+	</n8n-node-creator-node>
 </template>
 
-<script lang="ts">
-
-import Vue, { PropType } from 'vue';
+<script setup lang="ts">
+import { reactive, computed, toRefs, getCurrentInstance } from 'vue';
 import { INodeTypeDescription } from 'n8n-workflow';
 
-import { isCommunityPackageName } from '@/utils';
 import { getNewNodePosition, NODE_SIZE } from '@/utils/nodeViewUtils';
+import { isCommunityPackageName } from '@/utils';
 import { COMMUNITY_NODES_INSTALLATION_DOCS_URL } from '@/constants';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
 import NodeIcon from '@/components/NodeIcon.vue';
-import TriggerIcon from '@/components/TriggerIcon.vue';
-
-Vue.component('node-icon', NodeIcon);
-Vue.component('trigger-icon', TriggerIcon);
-
-export default Vue.extend({
-	name: 'NodeItem',
-	props: {
-		nodeType: {
-			type: Object as PropType<INodeTypeDescription>,
-		},
-		active: {
-			type: Boolean,
-		},
-	},
-	data() {
-		return {
-			dragging: false,
-			draggablePosition: {
-				x: -100,
-				y: -100,
-			},
-			COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-		};
-	},
-	computed: {
-		shortNodeType(): string {
-			return this.$locale.shortNodeType(this.nodeType.name);
-		},
-		isTrigger (): boolean {
-			return this.nodeType.group.includes('trigger');
-		},
-		draggableStyle(): { top: string; left: string; } {
-			return {
-				top: `${this.draggablePosition.y}px`,
-				left: `${this.draggablePosition.x}px`,
-			};
-		},
-		isCommunityNode(): boolean {
-			return isCommunityPackageName(this.nodeType.name);
-		},
-	},
-	methods: {
-		onDragStart(event: DragEvent): void {
-			/**
-			 * Workaround for firefox, that doesn't attach the pageX and pageY coordinates to "ondrag" event.
-			 * All browsers attach the correct page coordinates to the "dragover" event.
-			 * @bug https://bugzilla.mozilla.org/show_bug.cgi?id=505521
-			 */
-			document.body.addEventListener("dragover", this.onDragOver);
-			const { pageX: x, pageY: y } = event;
-
-			this.$emit('dragstart', event);
-
-			if (event.dataTransfer) {
-				event.dataTransfer.effectAllowed = "copy";
-				event.dataTransfer.dropEffect = "copy";
-				event.dataTransfer.setData('nodeTypeName', this.nodeType.name);
-				event.dataTransfer.setDragImage(this.$refs.draggableDataTransfer as Element, 0, 0);
-			}
-
-			this.dragging = true;
-			this.draggablePosition = { x, y };
-		},
-		onDragOver(event: DragEvent): void {
-			if (!this.dragging || event.pageX === 0 && event.pageY === 0) {
-				return;
-			}
-
-			const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
-
-			this.draggablePosition = { x, y };
-		},
-		onDragEnd(event: DragEvent): void {
-			document.body.removeEventListener("dragover", this.onDragOver);
-			this.$emit('dragend', event);
-
-			this.dragging = false;
-			setTimeout(() => {
-				this.draggablePosition = { x: -100, y: -100 };
-			}, 300);
-		},
-		onCommunityNodeTooltipClick(event: MouseEvent) {
-			if ((event.target as Element).localName === 'a') {
-				this.$telemetry.track('user clicked cnr docs link', { source: 'nodes panel node' });
-			}
-		},
+
+export interface Props {
+	nodeType: INodeTypeDescription;
+	active?: boolean;
+	allowActions?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	active: false,
+	allowActions: false,
+});
+
+const emit = defineEmits<{
+	(event: 'dragstart', $e: DragEvent): void,
+	(event: 'dragend', $e: DragEvent): void,
+	(event: 'nodeTypeSelected', value: string[]): void,
+	(event: 'actionsOpen', value: INodeTypeDescription): void,
+}>();
+
+const instance = getCurrentInstance();
+const state = reactive({
+	dragging: false,
+	draggablePosition: {
+		x: -100,
+		y: -100,
 	},
+	draggableDataTransfer: null as Element | null,
 });
-</script>
+const description = computed<string>(() => {
+	return instance?.proxy.$locale.headerText({
+		key: `headers.${shortNodeType.value}.description`,
+		fallback: props.nodeType.description,
+	}) as string;
+});
+const showActionArrow = computed(() => props.allowActions && hasActions.value);
 
-<style lang="scss" module>
-.node-item {
-	padding: 11px 8px 11px 0;
-	margin-left: 15px;
-	margin-right: 12px;
-	display: flex;
-	cursor: grab;
-}
+const hasActions = computed<boolean>(() => (props.nodeType.actions?.length || 0) > 0);
 
-.details {
-	align-items: center;
+const shortNodeType = computed<string>(() => instance?.proxy.$locale.shortNodeType(props.nodeType.name) || '');
+
+const draggableStyle = computed<{ top: string; left: string; }>(() => ({
+	top: `${state.draggablePosition.y}px`,
+	left: `${state.draggablePosition.x}px`,
+}));
+
+const isCommunityNode = computed<boolean>(() => isCommunityPackageName(props.nodeType.name));
+
+const displayName = computed<any>(() => {
+	const displayName = props.nodeType.displayName.trimEnd();
+
+	return instance?.proxy.$locale.headerText({
+		key: `headers.${shortNodeType}.displayName`,
+		fallback: props.allowActions ? displayName.replace('Trigger', '') : displayName,
+	});
+});
+
+const isTriggerNode = computed<boolean>(() => props.nodeType.displayName.toLowerCase().includes('trigger'));
+
+function onClick() {
+	if(hasActions.value && props.allowActions) emit('actionsOpen', props.nodeType);
+	else emit('nodeTypeSelected', [props.nodeType.name]);
 }
+function onDragStart(event: DragEvent): void {
+	/**
+	 * Workaround for firefox, that doesn't attach the pageX and pageY coordinates to "ondrag" event.
+	 * All browsers attach the correct page coordinates to the "dragover" event.
+	 * @bug https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+	 */
+	document.body.addEventListener("dragover", onDragOver);
+
+	const { pageX: x, pageY: y } = event;
+
+	if (event.dataTransfer) {
+		event.dataTransfer.effectAllowed = "copy";
+		event.dataTransfer.dropEffect = "copy";
+		event.dataTransfer.setDragImage(state.draggableDataTransfer as Element, 0, 0);
+		event.dataTransfer.setData(
+			'nodeTypeName',
+			useNodeCreatorStore().getNodeTypesWithManualTrigger(props.nodeType.name).join(','),
+		);
+	}
 
-.node-icon {
-	min-width: 26px;
-	max-width: 26px;
-	margin-right: 15px;
+	state.dragging = true;
+	state.draggablePosition = { x, y };
+	emit('dragstart', event);
 }
 
-.name {
-	font-weight: var(--font-weight-bold);
-	font-size: 14px;
-	line-height: 18px;
-	margin-right: 5px;
+function onDragOver(event: DragEvent): void {
+	if (!state.dragging || event.pageX === 0 && event.pageY === 0) {
+		return;
+	}
+
+	const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
+
+	state.draggablePosition = { x, y };
 }
 
-.packageName {
-	margin-right: 5px;
+function onDragEnd(event: DragEvent): void {
+	document.body.removeEventListener("dragover", onDragOver);
+
+	emit('dragend', event);
+
+	state.dragging = false;
+	setTimeout(() => {
+		state.draggablePosition = { x: -100, y: -100 };
+	}, 300);
 }
 
-.description {
-	margin-top: 2px;
-	font-size: var(--font-size-2xs);
-	line-height: 16px;
-	font-weight: 400;
-	color: $node-creator-description-color;
+function onCommunityNodeTooltipClick(event: MouseEvent) {
+	if ((event.target as Element).localName === 'a') {
+		instance?.proxy.$telemetry.track('user clicked cnr docs link', { source: 'nodes panel node' });
+	}
 }
 
-.trigger-icon {
-	height: 16px;
-	width: 16px;
-	display: inline-block;
-	margin-right: var(--spacing-3xs);
-	vertical-align: middle;
+
+defineExpose({
+	onClick,
+});
+const { dragging, draggableDataTransfer } = toRefs(state);
+</script>
+<style lang="scss" module>
+.nodeItem {
+	--trigger-icon-background-color: #{$trigger-icon-background-color};
+	--trigger-icon-border-color: #{$trigger-icon-border-color};
+	margin-left: 15px;
+	margin-right: 12px;
+	user-select: none;
 }
 
-.community-node-icon {
+.communityNodeIcon {
 	vertical-align: top;
 }
 
@@ -218,29 +192,8 @@ export default Vue.extend({
 	align-items: center;
 }
 
-.draggable-data-transfer {
+.draggableDataTransfer {
 	width: 1px;
 	height: 1px;
 }
 </style>
-
-<style lang="scss" scoped>
-.node-item-transition {
-	&-enter-active,
-	&-leave-active {
-		transition-property: opacity, transform;
-		transition-duration: 300ms;
-		transition-timing-function: ease;
-	}
-
-	&-enter,
-	&-leave-to {
-		opacity: 0;
-		transform: scale(0);
-	}
-}
-
-.el-tooltip svg {
-	color: var(--color-foreground-xdark);
-}
-</style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
index 960077f458bab..ea899143782b0 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -5,12 +5,14 @@
 		</div>
 		<div :class="$style.text">
 			<input
-				:placeholder="$locale.baseText('nodeCreator.searchBar.searchNodes')"
-				ref="input"
+				:placeholder="placeholder"
 				:value="value"
 				@input="onInput"
 				:class="$style.input"
+				ref="inputRef"
+				autofocus
 				data-test-id="node-creator-search-bar"
+				tabindex="0"
 			/>
 		</div>
 		<div :class="$style.suffix" v-if="value.length > 0" @click="clear">
@@ -21,50 +23,56 @@
 	</div>
 </template>
 
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
-
+<script setup lang="ts">
+import Vue, { onMounted, reactive, toRefs, onBeforeUnmount  } from 'vue';
 import { externalHooks } from '@/mixins/externalHooks';
 
-export default mixins(externalHooks).extend({
-	name: "SearchBar",
-	props: {
-		value: {
-			type: String,
-		},
-		eventBus: {
-			type: Object as PropType<Vue>,
-		},
-	},
-	mounted() {
-		if (this.eventBus) {
-			this.eventBus.$on("focus", this.focus);
-		}
-		setTimeout(this.focus, 0);
-
-		this.$externalHooks().run('nodeCreator_searchBar.mount', { inputRef: this.$refs['input'] });
-	},
-	methods: {
-		focus() {
-			const input = this.$refs.input as HTMLInputElement;
-			if (input) {
-				input.focus();
-			}
-		},
-		onInput(event: InputEvent) {
-			const input = event.target as HTMLInputElement;
-			this.$emit("input", input.value);
-		},
-		clear() {
-			this.$emit("input", "");
-		},
-	},
-	beforeDestroy() {
-		if (this.eventBus) {
-			this.eventBus.$off("focus", this.focus);
-		}
-	},
+export interface Props {
+	placeholder: string;
+	value: string;
+	eventBus?: Vue;
+}
+
+withDefaults(defineProps<Props>(), {
+	placeholder: '',
+	value: '',
+});
+
+const emit = defineEmits<{
+	(event: 'input', value: string): void,
+}>();
+
+const { $externalHooks } = new externalHooks();
+
+const state = reactive({
+	inputRef: null as HTMLInputElement | null,
+});
+
+function focus() {
+	state.inputRef?.focus();
+}
+
+function onInput(event: Event) {
+	const input = event.target as HTMLInputElement;
+	emit("input", input.value);
+}
+
+function clear() {
+	emit("input", "");
+}
+
+onMounted(() => {
+	$externalHooks().run('nodeCreator_searchBar.mount', { inputRef: state.inputRef });
+	setTimeout(focus, 0);
+});
+
+onBeforeUnmount(() => {
+	state.inputRef?.remove();
+});
+
+const { inputRef } = toRefs(state);
+defineExpose({
+	focus,
 });
 </script>
 
@@ -74,7 +82,7 @@ export default mixins(externalHooks).extend({
 	height: 40px;
 	padding: var(--spacing-s) var(--spacing-xs);
 	align-items: center;
-	margin: var(--spacing-s);
+	margin: var(--search-margin, var(--spacing-s));
 	filter: drop-shadow(0px 2px 5px rgba(46, 46, 50, 0.04));
 
 	border: 1px solid $node-creator-border-color;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue
index 6467b7ac3eaef..feaaeb381b89b 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue
@@ -56,6 +56,7 @@ export default Vue.extend({
 .subcategory {
 	display: flex;
 	padding: 11px 16px 11px 30px;
+	user-select: none;
 }
 
 .subcategoryWithIcon {
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue
index 9e6b461441c83..9a80d318859e6 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue
@@ -1,167 +1,364 @@
 <template>
 	<div :class="{ [$style.triggerHelperContainer]: true, [$style.isRoot]: isRoot }">
 		<categorized-items
-			ref="categorizedItems"
-			@subcategoryClose="onSubcategoryClose"
-			@onSubcategorySelected="onSubcategorySelected"
-			@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
+			:expandAllCategories="isActionsActive"
+			:subcategoryOverride="nodeAppSubcategory"
+			:alwaysShowSearch="isActionsActive"
+			:categorizedItems="computedCategorizedItems"
+			:categoriesWithNodes="computedCategoriesWithNodes"
 			:initialActiveIndex="0"
 			:searchItems="searchItems"
-			:firstLevelItems="isRoot ? items : []"
-			:excludedCategories="isRoot ? [] : [CORE_NODES_CATEGORY]"
-			:initialActiveCategories="[COMMUNICATION_CATEGORY]"
+			:withActionsGetter="shouldShowNodeActions"
+			:firstLevelItems="firstLevelItems"
+			:showSubcategoryIcon="isActionsActive"
+			:flatten="!isActionsActive && isAppEventSubcategory"
+			:filterByType="false"
+			:lazyRender="true"
+			:allItems="allNodes"
+			:searchPlaceholder="searchPlaceholder"
+			ref="categorizedItemsRef"
+			@subcategoryClose="onSubcategoryClose"
+			@onSubcategorySelected="onSubcategorySelected"
+			@nodeTypeSelected="onNodeTypeSelected"
+			@actionsOpen="setActiveActionsNodeType"
+			@actionSelected="onActionSelected"
 		>
+
+			<template #noResultsTitle v-if="isActionsActive">
+				<i />
+			</template>
+			<template #noResultsAction  v-if="isActionsActive">
+				<p v-if="containsAPIAction" v-html="getCustomAPICallHintLocale('apiCallNoResult')" class="clickable" @click.stop="addHttpNode" />
+				<p v-else v-text="$locale.baseText('nodeCreator.noResults.noMatchingActions')"/>
+			</template>
+
 			<template #header>
 				<slot name="header" />
-				<p v-if="isRoot" v-text="$locale.baseText('nodeCreator.triggerHelperPanel.title')" :class="$style.title" />
+				<p
+					v-if="isRoot"
+					v-text="$locale.baseText('nodeCreator.triggerHelperPanel.title')"
+					:class="$style.title"
+				/>
+			</template>
+			<template #footer v-if="(activeNodeActions && containsAPIAction)">
+				<slot name="footer" />
+				<span v-html="getCustomAPICallHintLocale('apiCall')" class="clickable" @click.stop="addHttpNode" />
 			</template>
 		</categorized-items>
 	</div>
 </template>
 
-<script lang="ts">
-import { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
-
+<script setup lang="ts">
+import { reactive, toRefs, getCurrentInstance, computed, onMounted, ref } from 'vue';
+import { INodeTypeDescription, INodeActionTypeDescription, INodeTypeNameVersion } from 'n8n-workflow';
+import { INodeCreateElement, IActionItemProps, SubcategoryCreateElement, IUpdateInformation } from '@/Interface';
+import { CORE_NODES_CATEGORY, WEBHOOK_NODE_TYPE, OTHER_TRIGGER_NODES_SUBCATEGORY, EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, SCHEDULE_TRIGGER_NODE_TYPE, EMAIL_IMAP_NODE_TYPE, CUSTOM_API_CALL_NAME, HTTP_REQUEST_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
+import CategorizedItems from './CategorizedItems.vue';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
+import { getCategoriesWithNodes, getCategorizedList } from "@/utils";
 import { externalHooks } from '@/mixins/externalHooks';
-import { INodeCreateElement } from '@/Interface';
-import { CORE_NODES_CATEGORY, WEBHOOK_NODE_TYPE, OTHER_TRIGGER_NODES_SUBCATEGORY, EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, COMMUNICATION_CATEGORY, SCHEDULE_TRIGGER_NODE_TYPE } from '@/constants';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { BaseTextKey } from '@/plugins/i18n';
 
-import ItemIterator from './ItemIterator.vue';
-import CategorizedItems from './CategorizedItems.vue';
-import SearchBar from './SearchBar.vue';
-
-export default mixins(externalHooks).extend({
-	name: 'TriggerHelperPanel',
-	components: {
-		ItemIterator,
-		CategorizedItems,
-		SearchBar,
-	},
-	props: {
-		searchItems: {
-			type: Array as PropType<INodeCreateElement[] | null>,
+const instance = getCurrentInstance();
+const items: INodeCreateElement[] = [{
+		key: "*",
+		type: "subcategory",
+		title: instance?.proxy.$locale.baseText('nodeCreator.subcategoryNames.appTriggerNodes'),
+		properties: {
+			subcategory: "App Trigger Nodes",
+			description: instance?.proxy.$locale.baseText('nodeCreator.subcategoryDescriptions.appTriggerNodes'),
+			icon: "fa:satellite-dish",
+			defaults: {
+				color: "#7D838F",
+			},
 		},
 	},
-	data() {
-		return {
-			CORE_NODES_CATEGORY,
-			COMMUNICATION_CATEGORY,
-			isRoot: true,
-		};
-	},
-	computed: {
-		items() {
-			return [{
-					key: "*",
-					type: "subcategory",
-					title: this.$locale.baseText('nodeCreator.subcategoryNames.appTriggerNodes'),
-					properties: {
-						subcategory: "App Trigger Nodes",
-						description: this.$locale.baseText('nodeCreator.subcategoryDescriptions.appTriggerNodes'),
-						icon: "fa:satellite-dish",
-						defaults: {
-							color: "#7D838F",
-						},
-					},
-				},
-				{
-					key: SCHEDULE_TRIGGER_NODE_TYPE,
-					type: "node",
-					properties: {
-						nodeType: {
-
-							group: [],
-							name: SCHEDULE_TRIGGER_NODE_TYPE,
-							displayName: this.$locale.baseText('nodeCreator.triggerHelperPanel.scheduleTriggerDisplayName'),
-							description: this.$locale.baseText('nodeCreator.triggerHelperPanel.scheduleTriggerDescription'),
-							icon: "fa:clock",
-							defaults: {
-								color: "#7D838F",
-							},
-						},
-					},
+	{
+		key: SCHEDULE_TRIGGER_NODE_TYPE,
+		type: "node",
+		properties: {
+			nodeType: {
+
+				group: [],
+				name: SCHEDULE_TRIGGER_NODE_TYPE,
+				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.scheduleTriggerDisplayName'),
+				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.scheduleTriggerDescription'),
+				icon: "fa:clock",
+				defaults: {
+					color: "#7D838F",
 				},
-				{
-					key: WEBHOOK_NODE_TYPE,
-					type: "node",
-					properties: {
-						nodeType: {
-							group: [],
-							name: WEBHOOK_NODE_TYPE,
-							displayName: this.$locale.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDisplayName'),
-							description: this.$locale.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDescription'),
-							iconData: {
-								type: "file",
-								icon: "webhook",
-								fileBuffer: "/static/webhook-icon.svg",
-							},
-							defaults: {
-								color: "#7D838F",
-							},
-						},
-					},
+			},
+		},
+	},
+	{
+		key: WEBHOOK_NODE_TYPE,
+		type: "node",
+		properties: {
+			nodeType: {
+				group: [],
+				name: WEBHOOK_NODE_TYPE,
+				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDisplayName'),
+				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDescription'),
+				iconData: {
+					type: "file",
+					icon: "webhook",
+					fileBuffer: "/static/webhook-icon.svg",
 				},
-				{
-					key: MANUAL_TRIGGER_NODE_TYPE,
-					type: "node",
-					properties: {
-						nodeType: {
-							group: [],
-							name: MANUAL_TRIGGER_NODE_TYPE,
-							displayName: this.$locale.baseText('nodeCreator.triggerHelperPanel.manualTriggerDisplayName'),
-							description: this.$locale.baseText('nodeCreator.triggerHelperPanel.manualTriggerDescription'),
-							icon: "fa:mouse-pointer",
-							defaults: {
-								color: "#7D838F",
-							},
-						},
-					},
+				defaults: {
+					color: "#7D838F",
 				},
-				{
-					key: EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
-					type: "node",
-					properties: {
-						nodeType: {
-							group: [],
-							name: EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
-							displayName: this.$locale.baseText('nodeCreator.triggerHelperPanel.workflowTriggerDisplayName'),
-							description: this.$locale.baseText('nodeCreator.triggerHelperPanel.workflowTriggerDescription'),
-							icon: "fa:sign-out-alt",
-							defaults: {
-								color: "#7D838F",
-							},
-						},
-					},
+			},
+		},
+	},
+	{
+		key: MANUAL_TRIGGER_NODE_TYPE,
+		type: "node",
+		properties: {
+			nodeType: {
+				group: [],
+				name: MANUAL_TRIGGER_NODE_TYPE,
+				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.manualTriggerDisplayName'),
+				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.manualTriggerDescription'),
+				icon: "fa:mouse-pointer",
+				defaults: {
+					color: "#7D838F",
 				},
-				{
-					type: "subcategory",
-					key: OTHER_TRIGGER_NODES_SUBCATEGORY,
-					category: CORE_NODES_CATEGORY,
-					properties: {
-						subcategory: OTHER_TRIGGER_NODES_SUBCATEGORY,
-						description: this.$locale.baseText('nodeCreator.subcategoryDescriptions.otherTriggerNodes'),
-						icon: "fa:folder-open",
-						defaults: {
-							color: "#7D838F",
-						},
-					},
+			},
+		},
+	},
+	{
+		key: EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
+		type: "node",
+		properties: {
+			nodeType: {
+				group: [],
+				name: EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
+				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.workflowTriggerDisplayName'),
+				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.workflowTriggerDescription'),
+				icon: "fa:sign-out-alt",
+				defaults: {
+					color: "#7D838F",
 				},
-			];
+			},
 		},
 	},
-	methods: {
-		isRootSubcategory(subcategory: INodeCreateElement) {
-			return this.items.find(item => item.key === subcategory.key) !== undefined;
+	{
+		type: "subcategory",
+		key: OTHER_TRIGGER_NODES_SUBCATEGORY,
+		category: CORE_NODES_CATEGORY,
+		properties: {
+			subcategory: OTHER_TRIGGER_NODES_SUBCATEGORY,
+			description: instance?.proxy.$locale.baseText('nodeCreator.subcategoryDescriptions.otherTriggerNodes'),
+			icon: "fa:folder-open",
+			defaults: {
+				color: "#7D838F",
+			},
 		},
-		onSubcategorySelected() {
-			this.isRoot = false;
+	},
+];
+
+const emit = defineEmits({
+	"nodeTypeSelected": (nodeTypes: string[]) => true,
+});
+
+const state = reactive({
+	isRoot: true,
+	selectedSubcategory: '',
+	activeNodeActions: null as INodeTypeDescription | null,
+	latestNodeData: null as INodeTypeDescription | null,
+});
+const categorizedItemsRef = ref<InstanceType<typeof CategorizedItems>>();
+
+const { $externalHooks } = new externalHooks();
+const {
+	mergedAppNodes,
+	setShowTabs,
+	getActionData,
+	getNodeTypesWithManualTrigger,
+	setAddedNodeActionParameters,
+} = useNodeCreatorStore();
+
+const telemetry = instance?.proxy.$telemetry;
+const { categorizedItems: allNodes, isTriggerNode } = useNodeTypesStore();
+const containsAPIAction = computed(() => state.latestNodeData?.properties.some((p) => p.options?.find((o) => o.name === CUSTOM_API_CALL_NAME)) === true);
+
+const computedCategorizedItems = computed(() => getCategorizedList(computedCategoriesWithNodes.value, true));
+
+const nodeAppSubcategory = computed<(SubcategoryCreateElement | undefined)>(() => {
+	if(!state.activeNodeActions) return undefined;
+
+	return {
+		type: 'subcategory',
+		properties: {
+			subcategory: state.activeNodeActions.displayName,
+			nodeType: {
+				description: '',
+				key: state.activeNodeActions.name,
+				iconUrl: state.activeNodeActions.iconUrl,
+				icon: state.activeNodeActions.icon,
+			},
 		},
-		onSubcategoryClose(subcategory: INodeCreateElement) {
-			this.isRoot = this.isRootSubcategory(subcategory);
+	};
+});
+const searchPlaceholder = computed(() => {
+	const nodeNameTitle = state.activeNodeActions?.displayName?.trim() as string;
+	const actionsSearchPlaceholder = instance?.proxy.$locale.baseText(
+		'nodeCreator.actionsCategory.searchActions',
+		{ interpolate: { nodeNameTitle }},
+	);
+
+	return isActionsActive.value ? actionsSearchPlaceholder : undefined;
+});
+
+const filteredMergedAppNodes = computed(() => {
+	const WHITELISTED_APP_CORE_NODES = [
+		EMAIL_IMAP_NODE_TYPE,
+		WEBHOOK_NODE_TYPE,
+	];
+
+	if(isAppEventSubcategory.value) return mergedAppNodes.filter(node => {
+		const isRegularNode = !isTriggerNode(node.name);
+		const isStickyNode = node.name === STICKY_NODE_TYPE;
+		const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY) && !WHITELISTED_APP_CORE_NODES.includes(node.name);
+		const hasActions = (node.actions || []).length > 0;
+
+		if(isRegularNode && !hasActions) return false;
+		return !isCoreNode && !isStickyNode;
+	});
+
+	return mergedAppNodes;
+});
+
+const computedCategoriesWithNodes = computed(() => {
+	if(!state.activeNodeActions) return getCategoriesWithNodes(filteredMergedAppNodes.value, []);
+
+	return getCategoriesWithNodes(selectedNodeActions.value, [], state.activeNodeActions.displayName) ;
+});
+
+const selectedNodeActions = computed<INodeActionTypeDescription[]>(() => state.activeNodeActions?.actions ?? []);
+const isAppEventSubcategory = computed(() => state.selectedSubcategory === "*");
+const isActionsActive = computed(() => state.activeNodeActions !== null);
+const firstLevelItems = computed(() => isRoot.value ? items : []);
+
+const isSearchActive = computed(() => useNodeCreatorStore().itemsFilter !== '');
+const searchItems = computed<INodeCreateElement[]>(() => {
+	const sorted = state.activeNodeActions ? [...selectedNodeActions.value] : [...filteredMergedAppNodes.value];
+	sorted.sort((a, b) => {
+		const textA = a.displayName.toLowerCase();
+		const textB = b.displayName.toLowerCase();
+		return textA < textB ? -1 : textA > textB ? 1 : 0;
+	});
+
+	return sorted.map((nodeType) => ({
+		type: 'node',
+		category: '',
+		key: nodeType.name,
+		properties: {
+			nodeType,
+			subcategory: state.activeNodeActions ? state.activeNodeActions.displayName : '',
 		},
-	},
+		includedByTrigger: nodeType.group.includes('trigger'),
+		includedByRegular: !nodeType.group.includes('trigger'),
+	}));
 });
+
+function onNodeTypeSelected(nodeTypes: string[]) {
+	emit("nodeTypeSelected", nodeTypes.length === 1 ? getNodeTypesWithManualTrigger(nodeTypes[0]) : nodeTypes);
+}
+function getCustomAPICallHintLocale(key: string) {
+	if(!state.activeNodeActions) return '';
+
+	const nodeNameTitle  = state.activeNodeActions.displayName;
+	return instance?.proxy.$locale.baseText(
+		`nodeCreator.actionsList.${key}` as BaseTextKey,
+		{ interpolate: { nodeNameTitle }},
+	);
+}
+// The nodes.json doesn't contain API CALL option so we need to fetch the node detail
+// to determine if need to render the API CALL hint
+async function fetchNodeDetails() {
+	if(!state.activeNodeActions) return;
+
+	const { getNodesInformation } = useNodeTypesStore();
+	const { version, name } = state.activeNodeActions;
+	const payload = {
+		name,
+		version: Array.isArray(version) ? version?.slice(-1)[0] : version,
+	} as INodeTypeNameVersion;
+
+	const nodesInfo = await getNodesInformation([payload], false);
+
+	state.latestNodeData = nodesInfo[0];
+}
+
+function setActiveActionsNodeType(nodeType: INodeTypeDescription | null) {
+	state.activeNodeActions = nodeType;
+	setShowTabs(false);
+	fetchNodeDetails();
+
+	if(nodeType) trackActionsView();
+}
+
+function onActionSelected(actionCreateElement: INodeCreateElement) {
+	const action = (actionCreateElement.properties as IActionItemProps).nodeType;
+	const actionUpdateData = getActionData(action);
+	emit('nodeTypeSelected', getNodeTypesWithManualTrigger(actionUpdateData.key));
+	setAddedNodeActionParameters(actionUpdateData, telemetry);
+}
+function addHttpNode() {
+	const updateData = {
+		name: '',
+		key: HTTP_REQUEST_NODE_TYPE,
+		value: {
+			authentication: "predefinedCredentialType",
+		},
+	} as IUpdateInformation;
+
+	emit('nodeTypeSelected', [MANUAL_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
+	setAddedNodeActionParameters(updateData, telemetry, false);
+
+	const app_identifier = state.activeNodeActions?.name;
+	$externalHooks().run('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
+	telemetry?.trackNodesPanel('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
+}
+
+function onSubcategorySelected(subcategory: INodeCreateElement) {
+	state.isRoot = false;
+	state.selectedSubcategory = subcategory.key;
+}
+function onSubcategoryClose(activeSubcategories: INodeCreateElement[]) {
+	if(isActionsActive.value === true) setActiveActionsNodeType(null);
+
+	state.isRoot = activeSubcategories.length === 0;
+	state.selectedSubcategory = activeSubcategories[activeSubcategories.length - 1]?.key ?? '';
+}
+
+function shouldShowNodeActions(node: INodeCreateElement) {
+	if(isAppEventSubcategory.value) return true;
+	if(state.isRoot && !isSearchActive.value) return false;
+	// Do not show actions for core category when searching
+	if(node.type === 'node') return !node.properties.nodeType.codex?.categories?.includes(CORE_NODES_CATEGORY);
+
+	return false;
+}
+
+function trackActionsView() {
+	const trigger_action_count = selectedNodeActions.value
+		.filter((action) => action.name.toLowerCase().includes('trigger')).length;
+
+	const trackingPayload = {
+		app_identifier: state.activeNodeActions?.name,
+		actions: selectedNodeActions.value.map(action => action.displayName),
+		regular_action_count: selectedNodeActions.value.length - trigger_action_count,
+		trigger_action_count,
+	};
+
+	$externalHooks().run('nodeCreateList.onViewActions', trackingPayload);
+	telemetry?.trackNodesPanel('nodeCreateList.onViewActions', trackingPayload);
+}
+
+const { isRoot, activeNodeActions } = toRefs(state);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue b/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
index 67971c4bde061..c758a36ed2bd4 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="type-selector" v-if="showTabs" data-test-id="node-creator-type-selector">
-		<el-tabs stretch :value="selectedType" @input="setType">
+	<div class="type-selector" v-if="nodeCreatorStore.showTabs" data-test-id="node-creator-type-selector">
+		<el-tabs stretch :value="nodeCreatorStore.selectedType" @input="nodeCreatorStore.setSelectedType">
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane>
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane>
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.trigger')" :name="TRIGGER_NODE_FILTER"></el-tab-pane>
@@ -8,39 +8,11 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ALL_NODE_FILTER, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER } from '@/constants';
-import { INodeFilterType } from '@/Interface';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
-import { mapStores } from 'pinia';
-import Vue from 'vue';
 
-export default Vue.extend({
-	name: 'NodeCreateTypeSelector',
-	data() {
-		return {
-			REGULAR_NODE_FILTER,
-			TRIGGER_NODE_FILTER,
-			ALL_NODE_FILTER,
-		};
-	},
-	methods: {
-		setType(type: INodeFilterType) {
-			this.nodeCreatorStore.selectedType = type;
-		},
-	},
-	computed: {
-		...mapStores(
-			useNodeCreatorStore,
-		),
-		showTabs(): boolean {
-			return this.nodeCreatorStore.showTabs;
-		},
-		selectedType(): string {
-			return this.nodeCreatorStore.selectedType;
-		},
-	},
-});
+const nodeCreatorStore = useNodeCreatorStore();
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-tabs__item {
@@ -58,9 +30,9 @@ export default Vue.extend({
 .type-selector {
 	text-align: center;
 	background-color: $node-creator-select-background-color;
-
 	::v-deep .el-tabs > div {
 		margin-bottom: 0;
+		z-index: 1;
 
 		.el-tabs__nav {
 			height: 43px;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index d7187f907bf99..b3ea3ed24592b 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -816,6 +816,8 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				this.openPanel = 'settings';
 			});
 		}
+
+		this.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/TriggerIcon.vue b/packages/editor-ui/src/components/TriggerIcon.vue
deleted file mode 100644
index 946d994b04cf5..0000000000000
--- a/packages/editor-ui/src/components/TriggerIcon.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-	<span :class="$style.trigger">
-		<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-				<title>Trigger node</title>
-				<g id="/integrations-(V1-feature)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-						<g id="Individual-node-view" transform="translate(-304.000000, -137.000000)" fill-rule="nonzero">
-								<g id="left-column" transform="translate(120.000000, 131.000000)">
-										<g id="trigger-badge" transform="translate(178.000000, 0.000000)">
-												<g id="trigger-icon" transform="translate(6.857143, 6.857143)">
-														<g id="Icon" transform="translate(8.571429, 0.000000)" fill="#FF6150">
-																<polygon id="Icon-Path" points="7.14285714 21.4285714 0 21.4285714 10 1.42857143 10 12.8571429 17.1428571 12.8571429 7.14285714 32.8571429"></polygon>
-														</g>
-														<rect id="ViewBox" x="0" y="0" width="34.2857143" height="34.2857143"></rect>
-												</g>
-										</g>
-								</g>
-						</g>
-				</g>
-		</svg>
-	</span>
-</template>
-
-<script lang="ts">
-export default {
-	name: 'TriggerIcon',
-};
-</script>
-
-<style lang="scss" module>
-.trigger {
-	background-color: $trigger-icon-background-color;
-	border: 1px solid $trigger-icon-border-color;
-	border-radius: 4px;
-	display: inline-flex;
-
-	> svg {
-		width: 100%;
-		height: 100%;
-	}
-}
-
-</style>
diff --git a/packages/editor-ui/src/composables/useGlobalLinkActions.ts b/packages/editor-ui/src/composables/useGlobalLinkActions.ts
new file mode 100644
index 0000000000000..5ac3abe2ed363
--- /dev/null
+++ b/packages/editor-ui/src/composables/useGlobalLinkActions.ts
@@ -0,0 +1,59 @@
+/**
+ * Creates event listeners for `data-action` attribute to allow for actions to be called from locale without using
+ * unsafe onclick attribute
+ */
+import { reactive, del, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
+
+const state = reactive({
+	customActions: {} as Record<string, Function>,
+});
+
+export default () => {
+	function registerCustomAction(key: string, action: Function) {
+		state.customActions[key] = action;
+	}
+	function unregisterCustomAction(key: string) {
+		del(state.customActions, key);
+	}
+	function delegateClick(e: MouseEvent) {
+		const clickedElement = e.target;
+		if (!(clickedElement instanceof Element) || clickedElement.tagName !== 'A') return;
+
+		const actionAttribute = clickedElement.getAttribute('data-action');
+		if(actionAttribute && typeof availableActions.value[actionAttribute] === 'function') {
+			e.preventDefault();
+			availableActions.value[actionAttribute]();
+		}
+	}
+
+	function reload() {
+		if (window.top) {
+			window.top.location.reload();
+		} else {
+			window.location.reload();
+		}
+	}
+
+	const availableActions = computed<{[key: string]: Function}>(() => ({
+		reload,
+		...state.customActions,
+	}));
+
+	onMounted(() => {
+		const instance = getCurrentInstance();
+		window.addEventListener('click', delegateClick);
+		instance?.proxy.$root.$on('registerGlobalLinkAction', registerCustomAction);
+	});
+
+	onUnmounted(() => {
+		const instance = getCurrentInstance();
+		window.removeEventListener('click', delegateClick);
+		instance?.proxy.$root.$off('registerGlobalLinkAction', registerCustomAction);
+	});
+
+	return {
+		registerCustomAction,
+		unregisterCustomAction,
+	};
+};
+
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 9f98d9d196fc0..84b69bc57d4de 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -7,6 +7,7 @@ export const PLACEHOLDER_FILLED_AT_EXECUTION_TIME = '[filled at execution time]'
 
 // parameter input
 export const CUSTOM_API_CALL_KEY = '__CUSTOM_API_CALL__';
+export const CUSTOM_API_CALL_NAME = 'Custom API Call';
 
 // workflows
 export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__';
@@ -79,10 +80,12 @@ export const CRON_NODE_TYPE = 'n8n-nodes-base.cron';
 export const CLEARBIT_NODE_TYPE = 'n8n-nodes-base.clearbit';
 export const FUNCTION_NODE_TYPE = 'n8n-nodes-base.function';
 export const GITHUB_TRIGGER_NODE_TYPE = 'n8n-nodes-base.githubTrigger';
+export const GIT_NODE_TYPE = 'n8n-nodes-base.git';
 export const GOOGLE_SHEETS_NODE_TYPE = 'n8n-nodes-base.googleSheets';
 export const ERROR_TRIGGER_NODE_TYPE = 'n8n-nodes-base.errorTrigger';
 export const ELASTIC_SECURITY_NODE_TYPE = 'n8n-nodes-base.elasticSecurity';
 export const EMAIL_SEND_NODE_TYPE = 'n8n-nodes-base.emailSend';
+export const EMAIL_IMAP_NODE_TYPE = 'n8n-nodes-base.emailReadImap';
 export const EXECUTE_COMMAND_NODE_TYPE = 'n8n-nodes-base.executeCommand';
 export const HTTP_REQUEST_NODE_TYPE = 'n8n-nodes-base.httpRequest';
 export const HUBSPOT_TRIGGER_NODE_TYPE = 'n8n-nodes-base.hubspotTrigger';
@@ -139,6 +142,7 @@ export const PIN_DATA_NODE_TYPES_DENYLIST = [
 export const CORE_NODES_CATEGORY = 'Core Nodes';
 export const COMMUNICATION_CATEGORY = 'Communication';
 export const CUSTOM_NODES_CATEGORY = 'Custom Nodes';
+export const RECOMMENDED_CATEGORY = 'Recommended';
 export const SUBCATEGORY_DESCRIPTIONS: {
 	[category: string]: { [subcategory: string]: string };
 } = {
diff --git a/packages/editor-ui/src/mixins/globalLinkActions.ts b/packages/editor-ui/src/mixins/globalLinkActions.ts
deleted file mode 100644
index 9225fbeaf7e4c..0000000000000
--- a/packages/editor-ui/src/mixins/globalLinkActions.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Creates event listeners for `data-action` attribute to allow for actions to be called from locale without using
- * unsafe onclick attribute
- */
- import Vue from 'vue';
-
- export const globalLinkActions = Vue.extend({
-	data(): {[key: string]: {[key: string]: Function}} {
-		return {
-			customActions: {},
-		};
-	},
-	mounted() {
-		window.addEventListener('click', this.delegateClick);
-		this.$root.$on('registerGlobalLinkAction', this.registerCustomAction);
-	},
-	destroyed() {
-		window.removeEventListener('click', this.delegateClick);
-		this.$root.$off('registerGlobalLinkAction', this.registerCustomAction);
-	},
-	computed: {
-		availableActions(): {[key: string]: Function} {
-			return {
-				reload: this.reload,
-				...this.customActions,
-			};
-		},
-	},
-	methods: {
-		registerCustomAction(key: string, action: Function) {
-			this.customActions[key] = action;
-		},
-		unregisterCustomAction(key: string) {
-			Vue.delete(this.customActions, key);
-		},
-		delegateClick(e: MouseEvent) {
-			const clickedElement = e.target;
-			if (!(clickedElement instanceof Element) || clickedElement.tagName !== 'A') return;
-
-			const actionAttribute = clickedElement.getAttribute('data-action');
-			if(actionAttribute && typeof this.availableActions[actionAttribute] === 'function') {
-				e.preventDefault();
-				this.availableActions[actionAttribute]();
-			}
-		},
-		reload() {
-			if (window.top) {
-				window.top.location.reload();
-			} else {
-				window.location.reload();
-			}
-		},
-	},
- });
-
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index d0ed0acbf9a7a..92044d2291820 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -661,6 +661,13 @@
 	"node.discovery.pinData.canvas": "You can pin this output instead of waiting for a test event. Open node to do so.",
 	"node.discovery.pinData.ndv": "You can pin this output instead of waiting for a test event.",
 	"nodeBase.clickToAddNodeOrDragToConnect": "Click to add node<br />or drag to connect",
+	"nodeCreator.actionsCategory.operations": "Operations",
+	"nodeCreator.actionsCategory.onNewEvent": "On new {event} event",
+	"nodeCreator.actionsCategory.onEvent": "On {event}",
+	"nodeCreator.actionsCategory.recommended": "Recommended",
+	"nodeCreator.actionsCategory.searchActions": "Search {nodeNameTitle} Actions...",
+	"nodeCreator.actionsList.apiCall": "Didn't find the right event? Make a <a data-action='addHttpNode'>custom {nodeNameTitle} API call</a>",
+	"nodeCreator.actionsList.apiCallNoResult": "Nothing found — try making a <a data-action='addHttpNode'>custom {nodeNameTitle} API call</a>",
 	"nodeCreator.categoryNames.analytics": "Analytics",
 	"nodeCreator.categoryNames.communication": "Communication",
 	"nodeCreator.categoryNames.coreNodes": "Core Nodes",
@@ -684,7 +691,8 @@
 	"nodeCreator.noResults.requestTheNode": "Request the node",
 	"nodeCreator.noResults.wantUsToMakeItFaster": "Want us to make it faster?",
 	"nodeCreator.noResults.weDidntMakeThatYet": "We didn't make that... yet",
-	"nodeCreator.noResults.clickToSeeResults": "To see results, <a data-action='showAllNodeCreatorNodes'>click here</a>",
+	"nodeCreator.noResults.noMatchingActions": "No actions matching your results",
+	"nodeCreator.noResults.clickToSeeResults": "To see all results, <a data-action='showAllNodeCreatorNodes'>click here</a>",
 	"nodeCreator.noResults.webhook": "Webhook",
 	"nodeCreator.searchBar.searchNodes": "Search nodes...",
 	"nodeCreator.subcategoryDescriptions.appTriggerNodes": "Runs the flow when something happens in an app like Telegram, Notion or Airtable",
diff --git a/packages/editor-ui/src/plugins/telemetry/index.ts b/packages/editor-ui/src/plugins/telemetry/index.ts
index 3ef00e6569026..59fcc126cf5ff 100644
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -12,7 +12,6 @@ import { useSettingsStore } from "@/stores/settings";
 import { useRootStore } from "@/stores/n8nRootStore";
 
 export class Telemetry {
-
 	private pageEventQueue: Array<{route: Route}>;
 	private previousPath: string;
 
@@ -153,14 +152,28 @@ export class Telemetry {
 					break;
 				case 'nodeCreateList.onCategoryExpanded':
 					properties.is_subcategory = false;
+					properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
 					this.track('User viewed node category', properties);
 					break;
+				case 'nodeCreateList.onViewActions':
+					properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
+					this.track('User viewed node actions', properties);
+					break;
+				case 'nodeCreateList.onActionsCustmAPIClicked':
+					properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
+					this.track('User clicked custom API from node actions', properties);
+					break;
+				case 'nodeCreateList.addAction':
+					properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
+					this.track('User added action', properties);
+					break;
 				case 'nodeCreateList.onSubcategorySelected':
 					const selectedProperties = (properties.selected as IDataObject).properties as IDataObject;
 					if(selectedProperties && selectedProperties.subcategory) {
 						properties.category_name = selectedProperties.subcategory;
 					}
 					properties.is_subcategory = true;
+					properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
 					delete properties.selected;
 					this.track('User viewed node category', properties);
 					break;
diff --git a/packages/editor-ui/src/shims.d.ts b/packages/editor-ui/src/shims.d.ts
index eb1c83fcddccb..113b1ebaaac23 100644
--- a/packages/editor-ui/src/shims.d.ts
+++ b/packages/editor-ui/src/shims.d.ts
@@ -18,4 +18,11 @@ declare global {
 			[elem: string]: any;
 		}
 	}
+
+	interface Array<T> {
+    findLast(
+      predicate: (value: T, index: number, obj: T[]) => unknown,
+      thisArg?: any
+    ): T
+  }
 }
diff --git a/packages/editor-ui/src/stores/nodeCreator.ts b/packages/editor-ui/src/stores/nodeCreator.ts
index 3c5b4cec3858c..240eb69289b20 100644
--- a/packages/editor-ui/src/stores/nodeCreator.ts
+++ b/packages/editor-ui/src/stores/nodeCreator.ts
@@ -1,6 +1,192 @@
-import { ALL_NODE_FILTER, STORES } from "@/constants";
-import { INodeCreatorState } from "@/Interface";
+import startCase from 'lodash.startCase';
 import { defineStore } from "pinia";
+import { INodePropertyCollection, INodePropertyOptions, IDataObject, INodeProperties, INodeTypeDescription, deepCopy, INodeParameters, INodeActionTypeDescription } from 'n8n-workflow';
+import { STORES, MANUAL_TRIGGER_NODE_TYPE, CORE_NODES_CATEGORY, CALENDLY_TRIGGER_NODE_TYPE, TRIGGER_NODE_FILTER } from "@/constants";
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useWorkflowsStore } from './workflows';
+import { CUSTOM_API_CALL_KEY, ALL_NODE_FILTER } from '@/constants';
+import { INodeCreatorState, INodeFilterType, IUpdateInformation } from '@/Interface';
+import { i18n } from '@/plugins/i18n';
+import { externalHooks } from '@/mixins/externalHooks';
+import { Telemetry } from '@/plugins/telemetry';
+
+const PLACEHOLDER_RECOMMENDED_ACTION_KEY = 'placeholder_recommended';
+
+const customNodeActionsParsers: {[key: string]: (matchedProperty: INodeProperties, nodeTypeDescription: INodeTypeDescription) => INodeActionTypeDescription[] | undefined} = {
+	['n8n-nodes-base.hubspotTrigger']: (matchedProperty, nodeTypeDescription) => {
+		const collection = matchedProperty?.options?.[0] as INodePropertyCollection;
+
+		return (collection?.values[0]?.options as INodePropertyOptions[])?.map((categoryItem): INodeActionTypeDescription => ({
+			...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.recommended')),
+			actionKey: categoryItem.value as string,
+			displayName: i18n.baseText('nodeCreator.actionsCategory.onEvent', {
+				interpolate: {event: startCase(categoryItem.name)},
+			}),
+			description: categoryItem.description || '',
+			displayOptions: matchedProperty.displayOptions,
+			values: { eventsUi: { eventValues: [{ name: categoryItem.value }] } },
+		}));
+	},
+};
+
+function filterSinglePlaceholderAction(actions: INodeActionTypeDescription[]) {
+	return actions.filter((action: INodeActionTypeDescription, _: number, arr: INodeActionTypeDescription[]) => {
+		const isPlaceholderTriggerAction = action.actionKey === PLACEHOLDER_RECOMMENDED_ACTION_KEY;
+		return !isPlaceholderTriggerAction || (isPlaceholderTriggerAction && arr.length > 1);
+	});
+}
+
+function getNodeTypeBase(nodeTypeDescription: INodeTypeDescription, category: string) {
+	return {
+		name: nodeTypeDescription.name,
+		group: ['trigger'],
+		codex: {
+			categories: [category],
+			subcategories: {
+				[nodeTypeDescription.displayName]: [category],
+			},
+		},
+		iconUrl: nodeTypeDescription.iconUrl,
+		icon: nodeTypeDescription.icon,
+		version: [1],
+		defaults: {},
+		inputs: [],
+		outputs: [],
+		properties: [],
+	};
+}
+
+function operationsCategory(nodeTypeDescription: INodeTypeDescription): INodeActionTypeDescription[] {
+	if (!!nodeTypeDescription.properties.find((property) => property.name === 'resource')) return [];
+
+	const matchedProperty = nodeTypeDescription.properties
+		.find((property) =>property.name?.toLowerCase() === 'operation');
+
+	if (!matchedProperty || !matchedProperty.options) return [];
+
+	const filteredOutItems = (matchedProperty.options as INodePropertyOptions[]).filter(
+		(categoryItem: INodePropertyOptions) => !['*', '', ' '].includes(categoryItem.name),
+	);
+
+	const items = filteredOutItems.map((item: INodePropertyOptions) => ({
+		...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.operations')),
+		actionKey: item.value as string,
+		displayName: item.action ?? startCase(item.name),
+		description: item.description ?? '',
+		displayOptions: matchedProperty.displayOptions,
+		values: {
+			[matchedProperty.name]: matchedProperty.type === 'multiOptions' ? [item.value] : item.value,
+		},
+	}));
+
+	// Do not return empty category
+	if (items.length === 0) return [];
+
+	return items;
+}
+
+function recommendedCategory(nodeTypeDescription: INodeTypeDescription): INodeActionTypeDescription[] {
+	const matchingKeys = ['event', 'events', 'trigger on'];
+	const isTrigger = nodeTypeDescription.displayName?.toLowerCase().includes('trigger');
+	const matchedProperty = nodeTypeDescription.properties.find((property) =>
+		matchingKeys.includes(property.displayName?.toLowerCase()),
+	);
+
+	if (!isTrigger) return [];
+
+	// Inject placeholder action if no events are available
+	// so user is able to add node to the canvas from the actions panel
+	if (!matchedProperty || !matchedProperty.options) {
+		return [{
+			...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.recommended')),
+			actionKey: PLACEHOLDER_RECOMMENDED_ACTION_KEY,
+			displayName: i18n.baseText('nodeCreator.actionsCategory.onNewEvent', {
+				interpolate: {event: nodeTypeDescription.displayName.replace('Trigger', '').trimEnd()},
+			}),
+			description: '',
+		}];
+	}
+
+	const filteredOutItems = (matchedProperty.options as INodePropertyOptions[]).filter(
+		(categoryItem: INodePropertyOptions) => !['*', '', ' '].includes(categoryItem.name),
+	);
+
+	const customParsedItem = customNodeActionsParsers[nodeTypeDescription.name]?.(matchedProperty, nodeTypeDescription);
+
+	const items =
+		customParsedItem ??
+		filteredOutItems.map((categoryItem: INodePropertyOptions) => ({
+			...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.recommended')),
+			actionKey: categoryItem.value as string,
+			displayName: i18n.baseText('nodeCreator.actionsCategory.onEvent', {
+				interpolate: {event: startCase(categoryItem.name)},
+			}),
+			description: categoryItem.description || '',
+			displayOptions: matchedProperty.displayOptions,
+			values: {
+				[matchedProperty.name]:
+					matchedProperty.type === 'multiOptions' ? [categoryItem.value] : categoryItem.value,
+			},
+		}));
+
+	return items;
+}
+
+function resourceCategories(nodeTypeDescription: INodeTypeDescription): INodeActionTypeDescription[] {
+	const transformedNodes: INodeActionTypeDescription[] = [];
+	const matchedProperties = nodeTypeDescription.properties.filter((property) =>property.displayName?.toLowerCase() === 'resource');
+
+	matchedProperties.forEach((property) => {
+		(property.options as INodePropertyOptions[] || [])
+			.filter((option) => option.value !== CUSTOM_API_CALL_KEY)
+			.forEach((resourceOption, i, options) => {
+				const isSingleResource = options.length === 1;
+
+				// Match operations for the resource by checking if displayOptions matches or contains the resource name
+				const operations = nodeTypeDescription.properties.find(
+					(operation) =>
+						operation.name === 'operation' &&
+						(operation.displayOptions?.show?.resource?.includes(resourceOption.value) ||
+							isSingleResource),
+				);
+
+				if (!operations?.options) return;
+
+				const items = (operations.options as INodePropertyOptions[] || []).map(
+					(operationOption) => {
+						const displayName =
+							operationOption.action ??
+							`${resourceOption.name} ${startCase(operationOption.name)}`;
+
+						// We need to manually populate displayOptions as they are not present in the node description
+						// if the resource has only one option
+						const displayOptions = isSingleResource
+							? { show: { resource: [(options as INodePropertyOptions[])[0]?.value] } }
+							: operations?.displayOptions;
+
+						return {
+							...getNodeTypeBase(nodeTypeDescription, resourceOption.name),
+							actionKey: operationOption.value as string,
+							description: operationOption?.description ?? '',
+							displayOptions,
+							values: {
+								operation:
+									operations?.type === 'multiOptions'
+										? [operationOption.value]
+										: operationOption.value,
+							},
+							displayName,
+							group: ['trigger'],
+						};
+					},
+				);
+
+				transformedNodes.push(...items);
+			});
+	});
+
+	return transformedNodes;
+}
 
 export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 	state: (): INodeCreatorState => ({
@@ -9,4 +195,112 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 		showScrim: false,
 		selectedType: ALL_NODE_FILTER,
 	}),
+	actions: {
+		setShowTabs(isVisible: boolean) {
+			this.showTabs = isVisible;
+		},
+		setShowScrim(isVisible: boolean) {
+			this.showScrim = isVisible;
+		},
+		setSelectedType(selectedNodeType: INodeFilterType) {
+			this.selectedType = selectedNodeType;
+		},
+		setFilter(search: string) {
+			this.itemsFilter = search;
+		},
+		setAddedNodeActionParameters (action: IUpdateInformation, telemetry?: Telemetry, track = true) {
+			const { $onAction: onWorkflowStoreAction } = useWorkflowsStore();
+			const storeWatcher = onWorkflowStoreAction(({ name, after, store: { setLastNodeParameters }, args }) => {
+				if (name !== 'addNode' || args[0].type !== action.key) return;
+				after(() => {
+					setLastNodeParameters(action);
+					if(track) this.trackActionSelected(action, telemetry);
+					storeWatcher();
+				});
+			});
+
+			return storeWatcher;
+		},
+		trackActionSelected (action: IUpdateInformation, telemetry?: Telemetry) {
+			const { $externalHooks } = new externalHooks();
+
+			const payload = {
+				node_type: action.key,
+				action: action.name,
+				resource: (action.value as INodeParameters).resource || '',
+			};
+			$externalHooks().run('nodeCreateList.addAction', payload);
+			telemetry?.trackNodesPanel('nodeCreateList.addAction', payload);
+		},
+	},
+	getters: {
+		visibleNodesWithActions(): INodeTypeDescription[] {
+			const nodes = deepCopy(useNodeTypesStore().visibleNodeTypes);
+			const nodesWithActions = nodes.map((node) => {
+				const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY);
+				// Core nodes shouldn't support actions
+				node.actions = [];
+				if(isCoreNode) return node;
+
+				node.actions.push(
+					...recommendedCategory(node),
+					...operationsCategory(node),
+					...resourceCategories(node),
+				);
+
+				return node;
+			});
+			return nodesWithActions;
+		},
+		mergedAppNodes(): INodeTypeDescription[] {
+			const mergedNodes = this.visibleNodesWithActions.reduce((acc: Record<string, INodeTypeDescription>, node: INodeTypeDescription) => {
+
+				const clonedNode = deepCopy(node);
+				const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY);
+				const actions = node.actions || [];
+				// Do not merge core nodes
+				const normalizedName = isCoreNode ? node.name : node.name.toLowerCase().replace('trigger', '');
+				const existingNode = acc[normalizedName];
+
+				if(existingNode) existingNode.actions?.push(...actions);
+				else acc[normalizedName] = clonedNode;
+
+				if(!isCoreNode) acc[normalizedName].displayName = node.displayName.replace('Trigger', '');
+
+				acc[normalizedName].actions = filterSinglePlaceholderAction(acc[normalizedName].actions || []);
+				return acc;
+			}, {});
+			return Object.values(mergedNodes);
+		},
+		getNodeTypesWithManualTrigger: () => (nodeType?: string): string[] => {
+			if(!nodeType) return [];
+
+			const { workflowTriggerNodes } = useWorkflowsStore();
+			const isTriggerAction = nodeType.toLocaleLowerCase().includes('trigger');
+			const workflowContainsTrigger = workflowTriggerNodes.length > 0;
+			const isTriggerPanel = useNodeCreatorStore().selectedType === TRIGGER_NODE_FILTER;
+
+			const nodeTypes = !isTriggerAction && !workflowContainsTrigger && isTriggerPanel
+				? [MANUAL_TRIGGER_NODE_TYPE, nodeType]
+				: [nodeType];
+
+			return nodeTypes;
+		},
+
+		getActionData: () => (actionItem: INodeActionTypeDescription): IUpdateInformation => {
+			const displayOptions = actionItem.displayOptions ;
+
+			const displayConditions = Object.keys(displayOptions?.show || {})
+				.reduce((acc: IDataObject, showCondition: string) => {
+					acc[showCondition] = displayOptions?.show?.[showCondition]?.[0];
+					return acc;
+				}, {});
+
+			return {
+				name: actionItem.displayName,
+				key: actionItem.name as string,
+				value: { ...actionItem.values , ...displayConditions} as INodeParameters,
+			};
+		},
+	},
 });
diff --git a/packages/editor-ui/src/stores/nodeTypes.ts b/packages/editor-ui/src/stores/nodeTypes.ts
index fdd4a2b930c67..d536ee3c96acc 100644
--- a/packages/editor-ui/src/stores/nodeTypes.ts
+++ b/packages/editor-ui/src/stores/nodeTypes.ts
@@ -9,7 +9,7 @@ import Vue from "vue";
 import { useCredentialsStore } from "./credentials";
 import { useRootStore } from "./n8nRootStore";
 import { useUsersStore } from "./users";
-
+import { useNodeCreatorStore } from './nodeCreator';
 function getNodeVersions(nodeType: INodeTypeDescription) {
 	return Array.isArray(nodeType.version) ? nodeType.version : [nodeType.version];
 }
@@ -79,17 +79,21 @@ export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
 				}
 
 				for (const version of newNodeVersions) {
+					// Node exists with the same name
 					if (acc[newNodeType.name]) {
-						acc[newNodeType.name][version] = newNodeType;
+						acc[newNodeType.name][version] = Object.assign(acc[newNodeType.name][version] ?? {}, newNodeType);
 					} else {
-						acc[newNodeType.name] = { [version]: newNodeType };
+						acc[newNodeType.name] = Object.assign(acc[newNodeType.name] ?? {}, { [version]: newNodeType });
 					}
 				}
 
 				return acc;
 			}, { ...this.nodeTypes });
-
 			Vue.set(this, 'nodeTypes', nodeTypes);
+
+			// Trigger compute of mergedAppNodes getter so it's ready when user opens the node creator
+			// tslint:disable-next-line: no-unused-expression
+			useNodeCreatorStore().mergedAppNodes;
 		},
 		removeNodeTypes(nodeTypesToRemove: INodeTypeDescription[]): void {
 			this.nodeTypes = nodeTypesToRemove.reduce(
@@ -97,7 +101,7 @@ export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
 				this.nodeTypes,
 			);
 		},
-		async getNodesInformation(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
+		async getNodesInformation(nodeInfos: INodeTypeNameVersion[], replace = true): Promise<INodeTypeDescription[]> {
 			const rootStore = useRootStore();
 			const nodesInformation = await getNodesInformation(rootStore.getRestApiContext, nodeInfos);
 
@@ -111,7 +115,9 @@ export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
 					);
 				}
 			});
-			this.setNodeTypes(nodesInformation);
+			if(replace) this.setNodeTypes(nodesInformation);
+
+			return nodesInformation;
 		},
 		async getFullNodesProperties(nodesToBeFetched: INodeTypeNameVersion[]): Promise<void> {
 			const credentialsStore = useCredentialsStore();
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index 46ef5ac727948..c410d15b5b572 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -21,7 +21,7 @@ import {
 	IWorkflowsMap,
 	WorkflowsState,
 } from "@/Interface";
-import {defineStore} from "pinia";
+import { defineStore } from "pinia";
 import {
 	deepCopy,
 	IConnection,
@@ -40,7 +40,7 @@ import {
 } from 'n8n-workflow';
 import Vue from "vue";
 
-import {useRootStore} from "./n8nRootStore";
+import { useRootStore } from "./n8nRootStore";
 import {
 	getActiveWorkflows,
 	getCurrentExecutions,
@@ -50,7 +50,7 @@ import {
 } from "@/api/workflows";
 import {useUIStore} from "./ui";
 import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
-import {isJsonKeyObject, getPairedItemsMapping, stringSizeInBytes} from "@/utils";
+import {isJsonKeyObject, getPairedItemsMapping, stringSizeInBytes, isObjectLiteral} from "@/utils";
 import {useNDVStore} from "./ndv";
 import {useNodeTypesStore} from "./nodeTypes";
 import {useWorkflowsEEStore} from "@/stores/workflows.ee";
@@ -720,7 +720,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			Vue.set(node, updateInformation.key, updateInformation.value);
 		},
 
-		setNodeParameters(updateInformation: IUpdateInformation): void {
+		setNodeParameters(updateInformation: IUpdateInformation, append?: boolean): void {
 			// Find the node that should be updated
 			const node = this.workflow.nodes.find(node => {
 				return node.name === updateInformation.name;
@@ -732,7 +732,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 			const uiStore = useUIStore();
 			uiStore.stateIsDirty = true;
-			Vue.set(node, 'parameters', updateInformation.value);
+			const newParameters = !!append && isObjectLiteral(updateInformation.value)
+				? {...node.parameters, ...updateInformation.value }
+				: updateInformation.value;
+
+			Vue.set(node, 'parameters', newParameters);
 
 			if (!this.nodeMetadata[node.name]) {
 				Vue.set(this.nodeMetadata, node.name, {});
@@ -740,6 +744,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			Vue.set(this.nodeMetadata[node.name], 'parametersLastUpdatedAt', Date.now());
 		},
 
+		setLastNodeParameters(updateInformation: IUpdateInformation) {
+			const latestNode = this.workflow.nodes.findLast((node) => node.type === updateInformation.key) as INodeUi;
+
+			if(latestNode) this.setNodeParameters({...updateInformation, name: latestNode.name}, true);
+		},
+
 		addNodeExecutionData(pushData: IPushDataNodeExecuteAfter): void {
 			if (this.workflowExecutionData === null || !this.workflowExecutionData.data) {
 				throw new Error('The "workflowExecutionData" is not initialized!');
diff --git a/packages/editor-ui/src/utils/nodeTypesUtils.ts b/packages/editor-ui/src/utils/nodeTypesUtils.ts
index af6afc15c12f0..80029c3d0f2d0 100644
--- a/packages/editor-ui/src/utils/nodeTypesUtils.ts
+++ b/packages/editor-ui/src/utils/nodeTypesUtils.ts
@@ -1,5 +1,6 @@
 import {
 	CORE_NODES_CATEGORY,
+	RECOMMENDED_CATEGORY,
 	CUSTOM_NODES_CATEGORY,
 	SUBCATEGORY_DESCRIPTIONS,
 	UNCATEGORIZED_CATEGORY,
@@ -13,7 +14,7 @@ import {
 	MAPPING_PARAMS,
 } from '@/constants';
 import { INodeCreateElement, ICategoriesWithNodes, INodeUi, ITemplatesNode, INodeItemProps } from '@/Interface';
-import { IDataObject, INodeExecutionData, INodeProperties, INodeTypeDescription, NodeParameterValueType } from 'n8n-workflow';
+import { IDataObject, INodeExecutionData, INodeProperties, INodeTypeDescription, INodeActionTypeDescription, NodeParameterValueType } from 'n8n-workflow';
 import { isResourceLocatorValue, isJsonKeyObject } from '@/utils';
 
 /*
@@ -25,7 +26,7 @@ const CRED_KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
 const NODE_KEYWORDS_TO_FILTER = ['Trigger'];
 const COMMUNITY_PACKAGE_NAME_REGEX = /(@\w+\/)?n8n-nodes-(?!base\b)\b\w+/g;
 
-const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescription, category: string, subcategory: string) => {
+const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescription | INodeActionTypeDescription, category: string, subcategory: string) => {
 	if (!accu[category]) {
 		accu[category] = {};
 	}
@@ -44,7 +45,7 @@ const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescri
 		accu[category][subcategory].regularCount++;
 	}
 	accu[category][subcategory].nodes.push({
-		type: 'node',
+		type: nodeType.actionKey ? 'action' : 'node' ,
 		key: `${category}_${nodeType.name}`,
 		category,
 		properties: {
@@ -56,30 +57,25 @@ const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescri
 	});
 };
 
-export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[], personalizedNodeTypes: string[]): ICategoriesWithNodes => {
+export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[], personalizedNodeTypes: string[], uncategorizedSubcategory = UNCATEGORIZED_SUBCATEGORY): ICategoriesWithNodes => {
 	const sorted = [...nodeTypes].sort((a: INodeTypeDescription, b: INodeTypeDescription) => a.displayName > b.displayName? 1 : -1);
-	return sorted.reduce(
+	const result =  sorted.reduce(
 		(accu: ICategoriesWithNodes, nodeType: INodeTypeDescription) => {
 			if (personalizedNodeTypes.includes(nodeType.name)) {
-				addNodeToCategory(accu, nodeType, PERSONALIZED_CATEGORY, UNCATEGORIZED_SUBCATEGORY);
+				addNodeToCategory(accu, nodeType, PERSONALIZED_CATEGORY, uncategorizedSubcategory);
 			}
 
 			if (!nodeType.codex || !nodeType.codex.categories) {
-				addNodeToCategory(accu, nodeType, UNCATEGORIZED_CATEGORY, UNCATEGORIZED_SUBCATEGORY);
+				addNodeToCategory(accu, nodeType, UNCATEGORIZED_CATEGORY, uncategorizedSubcategory);
 				return accu;
 			}
 
 			nodeType.codex.categories.forEach((_category: string) => {
 				const category = _category.trim();
-				const subcategories =
-					nodeType.codex &&
-					nodeType.codex.subcategories &&
-					nodeType.codex.subcategories[category]
-					? nodeType.codex.subcategories[category]
-					: null;
+				const subcategories = nodeType?.codex?.subcategories?.[category] ?? null;
 
 				if(subcategories === null || subcategories.length === 0) {
-					addNodeToCategory(accu, nodeType, category, UNCATEGORIZED_SUBCATEGORY);
+					addNodeToCategory(accu, nodeType, category, uncategorizedSubcategory);
 					return;
 				}
 
@@ -92,10 +88,11 @@ export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[], person
 		},
 		{},
 	);
+	return result;
 };
 
 const getCategories = (categoriesWithNodes: ICategoriesWithNodes): string[] => {
-	const excludeFromSort = [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, UNCATEGORIZED_CATEGORY, PERSONALIZED_CATEGORY];
+	const excludeFromSort = [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, UNCATEGORIZED_CATEGORY, PERSONALIZED_CATEGORY, RECOMMENDED_CATEGORY];
 	const categories = Object.keys(categoriesWithNodes);
 	const sorted = categories.filter(
 		(category: string) =>
@@ -103,13 +100,13 @@ const getCategories = (categoriesWithNodes: ICategoriesWithNodes): string[] => {
 	);
 	sorted.sort();
 
-	return [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, PERSONALIZED_CATEGORY, ...sorted, UNCATEGORIZED_CATEGORY];
+	return [RECOMMENDED_CATEGORY, CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, PERSONALIZED_CATEGORY, ...sorted, UNCATEGORIZED_CATEGORY];
 };
 
-export const getCategorizedList = (categoriesWithNodes: ICategoriesWithNodes): INodeCreateElement[] => {
+export const getCategorizedList = (categoriesWithNodes: ICategoriesWithNodes, categoryIsExpanded = false): INodeCreateElement[] => {
 	const categories = getCategories(categoriesWithNodes);
 
-	return categories.reduce(
+	const result = categories.reduce(
 		(accu: INodeCreateElement[], category: string) => {
 			if (!categoriesWithNodes[category]) {
 				return accu;
@@ -120,7 +117,7 @@ export const getCategorizedList = (categoriesWithNodes: ICategoriesWithNodes): I
 				key: category,
 				category,
 				properties: {
-					expanded: false,
+					expanded: categoryIsExpanded,
 				},
 			};
 
@@ -170,6 +167,7 @@ export const getCategorizedList = (categoriesWithNodes: ICategoriesWithNodes): I
 		},
 		[],
 	);
+	return result;
 };
 
 export function getAppNameFromCredType(name: string) {
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 783488037232f..4f4549734ca5c 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,6 +1,6 @@
 <template>
-	<div :class="$style.container" :style="containerCssVars" ref="container" data-test-id="canvas-add-button">
-		<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :popper-class="$style.tooltip" :open-delay="700">
+	<div :class="$style.container" :style="containerCssVars" ref="container"  data-test-id="canvas-add-button">
+		<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="nodeCreatorStore.showScrim" :popper-class="$style.tooltip" :open-delay="700">
 			<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
 				<font-awesome-icon icon="plus" size="lg" />
 			</button>
@@ -12,38 +12,23 @@
 	</div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { XYPosition } from '@/Interface';
-import { mapStores } from 'pinia';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
-export default Vue.extend({
-	name: 'CanvasAddButton',
-	props: {
-		showTooltip: {
-			type: Boolean,
-		},
-		position: {
-			type: Array,
-		},
-	},
-	computed: {
-		...mapStores(
-			useNodeCreatorStore,
-		),
-		containerCssVars(): Record<string, string> {
-			const position = this.position as XYPosition;
-			return {
-				'--trigger-placeholder-left-position': `${position[0]}px`,
-				'--trigger-placeholder-top-position': `${position[1]}px`,
-			};
-		},
-		isScrimActive(): boolean {
-			return this.nodeCreatorStore.showScrim;
-		},
-	},
-});
+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>
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 0bff6c1134ee6..3d1f1e7d43972 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -160,7 +160,7 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 import { mouseSelect } from '@/mixins/mouseSelect';
 import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
 import { restApi } from '@/mixins/restApi';
-import { globalLinkActions } from '@/mixins/globalLinkActions';
+import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
 import { showMessage } from '@/mixins/showMessage';
 import { titleChange } from '@/mixins/titleChange';
 import { newVersions } from '@/mixins/newVersions';
@@ -256,7 +256,6 @@ export default mixins(
 	workflowHelpers,
 	workflowRun,
 	newVersions,
-	globalLinkActions,
 	debounceHelper,
 )
 	.extend({
@@ -271,6 +270,14 @@ export default mixins(
 			NodeCreation,
 			CanvasControls,
 		},
+		setup() {
+			const { registerCustomAction, unregisterCustomAction } = useGlobalLinkActions();
+
+			return {
+				registerCustomAction,
+				unregisterCustomAction,
+			};
+		},
 		errorCaptured: (err, vm, info) => {
 			console.error('errorCaptured'); // eslint-disable-line no-console
 			console.error(err); // eslint-disable-line no-console
@@ -326,7 +333,6 @@ export default mixins(
 			},
 			nodeViewScale(newScale) {
 				const element = this.$refs.nodeView as HTMLDivElement;
-
 				if(element) {
 					element.style.transform = `scale(${newScale})`;
 				}
@@ -397,8 +403,9 @@ export default mixins(
 				useSettingsStore,
 				useTemplatesStore,
 				useUIStore,
-				useUsersStore,
 				useWorkflowsStore,
+				useUsersStore,
+				useNodeCreatorStore,
 				useWorkflowsEEStore,
 			),
 			nativelyNumberSuffixedDefaults(): string[] {
@@ -675,12 +682,10 @@ export default mixins(
 			},
 			showTriggerCreator(source: string) {
 				if(this.createNodeActive) return;
-				this.nodeCreatorStore.selectedType = TRIGGER_NODE_FILTER;
-				this.nodeCreatorStore.showScrim = true;
+				this.nodeCreatorStore.setSelectedType(TRIGGER_NODE_FILTER);
+				this.nodeCreatorStore.setShowScrim(true);
 				this.onToggleNodeCreator({ source, createNodeActive: true });
-				this.$nextTick(() => {
-					this.nodeCreatorStore.showTabs = false;
-				});
+				this.$nextTick(() => this.nodeCreatorStore.setShowTabs(false));
 			},
 			async openExecution(executionId: string) {
 				this.startLoading();
@@ -1486,17 +1491,25 @@ export default mixins(
 					return;
 				}
 
-				const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
-				if (nodeTypeName) {
+				const nodeTypeNames = event.dataTransfer.getData('nodeTypeName').split(',');
+
+				if (nodeTypeNames) {
 					const mousePosition = this.getMousePositionWithinNodeView(event);
 
-					this.addNode(nodeTypeName, {
-						position: [
-							mousePosition[0] - NodeViewUtils.NODE_SIZE / 2,
-							mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
-						],
-						dragAndDrop: true,
+					const nodesToAdd = nodeTypeNames.map((nodeTypeName: string, index: number) => {
+
+						return {
+							nodeTypeName,
+							position: [
+								// If adding more than one node, offset the X position
+								(mousePosition[0] - NodeViewUtils.NODE_SIZE / 2) + (NodeViewUtils.NODE_SIZE * (index * 2)),
+								mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
+							] as XYPosition,
+							dragAndDrop: true,
+						};
 					});
+
+					this.onAddNode(nodesToAdd, true);
 					this.createNodeActive = false;
 				}
 			},
@@ -1608,7 +1621,7 @@ export default mixins(
 				return newNodeData;
 			},
 
-			async injectNode (nodeTypeName: string, options: AddNodeOptions = {}) {
+			async injectNode (nodeTypeName: string, options: AddNodeOptions = {}, showDetail = true) {
 				const nodeTypeData: INodeTypeDescription | null = this.nodeTypesStore.getNodeType(nodeTypeName);
 
 				if (nodeTypeData === null) {
@@ -1665,7 +1678,6 @@ export default mixins(
 						}
 
 						// If a node is active then add the new node directly after the current one
-						// newNodeData.position = [activeNode.position[0], activeNode.position[1] + 60];
 						newNodeData.position = NodeViewUtils.getNewNodePosition(
 							this.nodes,
 							[lastSelectedNode.position[0] + NodeViewUtils.PUSH_NODES_OFFSET, lastSelectedNode.position[1] + yOffset],
@@ -1718,9 +1730,12 @@ export default mixins(
 				// Automatically deselect all nodes and select the current one and also active
 				// current node
 				this.deselectAllNodes();
-				setTimeout(() => {
-					this.nodeSelectedByName(newNodeData.name, nodeTypeName !== STICKY_NODE_TYPE);
-				});
+				const preventDetailOpen = window.posthog?.getFeatureFlag && window.posthog?.getFeatureFlag('prevent-ndv-auto-open') === 'prevent';
+				if(showDetail && !preventDetailOpen) {
+					setTimeout(() => {
+						this.nodeSelectedByName(newNodeData.name, nodeTypeName !== STICKY_NODE_TYPE);
+					});
+				}
 
 				return newNodeData;
 			},
@@ -1756,7 +1771,7 @@ export default mixins(
 
 				this.__addConnection(connectionData, true);
 			},
-			async addNode(nodeTypeName: string, options: AddNodeOptions = {}) {
+			async addNode(nodeTypeName: string, options: AddNodeOptions = {}, showDetail = true) {
 				if (!this.editAllowedCheck()) {
 					return;
 				}
@@ -1765,7 +1780,7 @@ export default mixins(
 				const lastSelectedNode = this.lastSelectedNode;
 				const lastSelectedNodeOutputIndex = this.uiStore.lastSelectedNodeOutputIndex;
 
-				const newNodeData = await this.injectNode(nodeTypeName, options);
+				const newNodeData = await this.injectNode(nodeTypeName, options, showDetail);
 				if (!newNodeData) {
 					return;
 				}
@@ -3234,16 +3249,39 @@ export default mixins(
 				if (createNodeActive === this.createNodeActive) return;
 
 				// Default to the trigger tab in node creator if there's no trigger node yet
-				if (!this.containsTrigger) {
-					this.nodeCreatorStore.selectedType = TRIGGER_NODE_FILTER;
-				}
+				if (!this.containsTrigger) this.nodeCreatorStore.setSelectedType(TRIGGER_NODE_FILTER);
 
 				this.createNodeActive = createNodeActive;
-				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, createNodeActive });
-				this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source, createNodeActive, workflow_id: this.workflowsStore.workflowId });
-			},
-			onAddNode({ nodeTypeName, position }: { nodeTypeName: string; position?: [number, number] }) {
-				this.addNode(nodeTypeName, { position });
+
+				const mode = this.nodeCreatorStore.selectedType === TRIGGER_NODE_FILTER ? 'trigger' : 'default';
+				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, mode, createNodeActive });
+				this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source, mode, createNodeActive, workflow_id: this.workflowsStore.workflowId });
+			},
+			onAddNode(nodeTypes: Array<{ nodeTypeName: string; position: XYPosition }>, dragAndDrop: boolean) {
+				nodeTypes.forEach(({ nodeTypeName, position }, index) => {
+					this.addNode(nodeTypeName, { position, dragAndDrop }, nodeTypes.length === 1 || index > 0);
+					if(index === 0) return;
+					// If there's more than one node, we want to connect them
+					// this has to be done in mutation subscriber to make sure both nodes already
+					// exist
+					const actionWatcher = this.workflowsStore.$onAction(({ name, after, args }) => {
+						if(name === 'addNode' && args[0].type === nodeTypeName) {
+							after(() => {
+								const lastAddedNode = this.nodes[this.nodes.length - 1];
+								const previouslyAddedNode = this.nodes[this.nodes.length - 2];
+
+								this.$nextTick(() => this.connectTwoNodes(previouslyAddedNode.name, 0, lastAddedNode.name, 0));
+
+								// Position the added node to the right side of the previsouly added one
+								lastAddedNode.position = [
+									previouslyAddedNode.position[0] + (NodeViewUtils.NODE_SIZE * 2),
+									previouslyAddedNode.position[1],
+								];
+								actionWatcher();
+							});
+						}
+					});
+				});
 			},
 			async saveCurrentWorkflowExternal(callback: () => void) {
 				await this.saveCurrentWorkflow();
diff --git a/packages/nodes-base/nodes/Affinity/AffinityTrigger.node.ts b/packages/nodes-base/nodes/Affinity/AffinityTrigger.node.ts
index 336502e78a6b6..5e7e16a4ecc23 100644
--- a/packages/nodes-base/nodes/Affinity/AffinityTrigger.node.ts
+++ b/packages/nodes-base/nodes/Affinity/AffinityTrigger.node.ts
@@ -20,7 +20,7 @@ export class AffinityTrigger implements INodeType {
 		version: 1,
 		description: 'Handle Affinity events via webhooks',
 		defaults: {
-			name: 'Affinity-Trigger',
+			name: 'Affinity Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/AgileCrm/AgileCrm.node.ts b/packages/nodes-base/nodes/AgileCrm/AgileCrm.node.ts
index 70eafb8bfc4a4..c9bd5657fa928 100644
--- a/packages/nodes-base/nodes/AgileCrm/AgileCrm.node.ts
+++ b/packages/nodes-base/nodes/AgileCrm/AgileCrm.node.ts
@@ -41,7 +41,7 @@ export class AgileCrm implements INodeType {
 		version: 1,
 		description: 'Consume Agile CRM API',
 		defaults: {
-			name: 'AgileCRM',
+			name: 'Agile CRM',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Asana/AsanaTrigger.node.ts b/packages/nodes-base/nodes/Asana/AsanaTrigger.node.ts
index 3a7427b0527f0..4fe74103ab861 100644
--- a/packages/nodes-base/nodes/Asana/AsanaTrigger.node.ts
+++ b/packages/nodes-base/nodes/Asana/AsanaTrigger.node.ts
@@ -25,7 +25,7 @@ export class AsanaTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when Asana events occur.',
 		defaults: {
-			name: 'Asana-Trigger',
+			name: 'Asana Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Aws/AwsSnsTrigger.node.ts b/packages/nodes-base/nodes/Aws/AwsSnsTrigger.node.ts
index 434499dd666d1..4f67f1f2df6ce 100644
--- a/packages/nodes-base/nodes/Aws/AwsSnsTrigger.node.ts
+++ b/packages/nodes-base/nodes/Aws/AwsSnsTrigger.node.ts
@@ -25,7 +25,7 @@ export class AwsSnsTrigger implements INodeType {
 		version: 1,
 		description: 'Handle AWS SNS events via webhooks',
 		defaults: {
-			name: 'AWS-SNS-Trigger',
+			name: 'AWS SNS Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Cisco/Webex/CiscoWebex.node.ts b/packages/nodes-base/nodes/Cisco/Webex/CiscoWebex.node.ts
index 5c628d7d294bf..fad7ea4fd3ddf 100644
--- a/packages/nodes-base/nodes/Cisco/Webex/CiscoWebex.node.ts
+++ b/packages/nodes-base/nodes/Cisco/Webex/CiscoWebex.node.ts
@@ -34,7 +34,7 @@ export class CiscoWebex implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Consume the Cisco Webex API',
 		defaults: {
-			name: 'Webex',
+			name: 'Webex by Cisco',
 		},
 		credentials: [
 			{
diff --git a/packages/nodes-base/nodes/Cisco/Webex/CiscoWebexTrigger.node.ts b/packages/nodes-base/nodes/Cisco/Webex/CiscoWebexTrigger.node.ts
index e3cd51cc37ea2..f8607ffe1cf00 100644
--- a/packages/nodes-base/nodes/Cisco/Webex/CiscoWebexTrigger.node.ts
+++ b/packages/nodes-base/nodes/Cisco/Webex/CiscoWebexTrigger.node.ts
@@ -23,7 +23,7 @@ export class CiscoWebexTrigger implements INodeType {
 		subtitle: '={{$parameter["resource"] + ":" + $parameter["event"]}}',
 		description: 'Starts the workflow when Cisco Webex events occur.',
 		defaults: {
-			name: 'Webex Trigger',
+			name: 'Webex by Cisco Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts b/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts
index 36933ba038b91..d9b7dbfa0726e 100644
--- a/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts
+++ b/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts
@@ -22,7 +22,7 @@ export class CustomerIo implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Consume Customer.io API',
 		defaults: {
-			name: 'CustomerIo',
+			name: 'Customer.io',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/EmailReadImap/v1/EmailReadImapV1.node.ts b/packages/nodes-base/nodes/EmailReadImap/v1/EmailReadImapV1.node.ts
index 726907be0881a..242045b7b45b3 100644
--- a/packages/nodes-base/nodes/EmailReadImap/v1/EmailReadImapV1.node.ts
+++ b/packages/nodes-base/nodes/EmailReadImap/v1/EmailReadImapV1.node.ts
@@ -39,7 +39,7 @@ const versionDescription: INodeTypeDescription = {
 	description: 'Triggers the workflow when a new email is received',
 	eventTriggerDescription: 'Waiting for you to receive an email',
 	defaults: {
-		name: 'IMAP Email',
+		name: 'Email Trigger (IMAP)',
 		color: '#44AA22',
 	},
 	// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node
diff --git a/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts b/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts
index eab1cee969472..897a05c239ab4 100644
--- a/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts
+++ b/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts
@@ -39,7 +39,7 @@ const versionDescription: INodeTypeDescription = {
 	description: 'Triggers the workflow when a new email is received',
 	eventTriggerDescription: 'Waiting for you to receive an email',
 	defaults: {
-		name: 'IMAP Email',
+		name: 'Email Trigger (IMAP)',
 		color: '#44AA22',
 	},
 	// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node
diff --git a/packages/nodes-base/nodes/ExecuteWorkflowTrigger/ExecuteWorkflowTrigger.node.ts b/packages/nodes-base/nodes/ExecuteWorkflowTrigger/ExecuteWorkflowTrigger.node.ts
index 14efb8b1d774f..0f371b0653ed5 100644
--- a/packages/nodes-base/nodes/ExecuteWorkflowTrigger/ExecuteWorkflowTrigger.node.ts
+++ b/packages/nodes-base/nodes/ExecuteWorkflowTrigger/ExecuteWorkflowTrigger.node.ts
@@ -11,7 +11,7 @@ export class ExecuteWorkflowTrigger implements INodeType {
 		description: 'Runs the flow when called by the Execute Workflow node from a different workflow',
 		maxNodes: 1,
 		defaults: {
-			name: 'When Called By Another Workflow',
+			name: 'Execute Workflow Trigger',
 			color: '#ff6d5a',
 		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node
diff --git a/packages/nodes-base/nodes/FunctionItem/FunctionItem.node.ts b/packages/nodes-base/nodes/FunctionItem/FunctionItem.node.ts
index b7c967c5b3371..7221634b0e929 100644
--- a/packages/nodes-base/nodes/FunctionItem/FunctionItem.node.ts
+++ b/packages/nodes-base/nodes/FunctionItem/FunctionItem.node.ts
@@ -22,7 +22,7 @@ export class FunctionItem implements INodeType {
 		version: 1,
 		description: 'Run custom function code which gets executed once per item',
 		defaults: {
-			name: 'FunctionItem',
+			name: 'Function Item',
 			color: '#ddbb33',
 		},
 		inputs: ['main'],
diff --git a/packages/nodes-base/nodes/Gitlab/Gitlab.node.ts b/packages/nodes-base/nodes/Gitlab/Gitlab.node.ts
index f727e8c6097b6..bb3ca1810f1ad 100644
--- a/packages/nodes-base/nodes/Gitlab/Gitlab.node.ts
+++ b/packages/nodes-base/nodes/Gitlab/Gitlab.node.ts
@@ -20,7 +20,7 @@ export class Gitlab implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Retrieve data from GitLab API',
 		defaults: {
-			name: 'Gitlab',
+			name: 'GitLab',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Gitlab/GitlabTrigger.node.ts b/packages/nodes-base/nodes/Gitlab/GitlabTrigger.node.ts
index a5d72cfb53682..a203d8f992895 100644
--- a/packages/nodes-base/nodes/Gitlab/GitlabTrigger.node.ts
+++ b/packages/nodes-base/nodes/Gitlab/GitlabTrigger.node.ts
@@ -87,7 +87,7 @@ export class GitlabTrigger implements INodeType {
 			'={{$parameter["owner"] + "/" + $parameter["repository"] + ": " + $parameter["events"].join(", ")}}',
 		description: 'Starts the workflow when GitLab events occur',
 		defaults: {
-			name: 'Gitlab Trigger',
+			name: 'GitLab Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Hubspot/HubspotTrigger.node.ts b/packages/nodes-base/nodes/Hubspot/HubspotTrigger.node.ts
index 9804a9cad616d..eef9b34d74dbc 100644
--- a/packages/nodes-base/nodes/Hubspot/HubspotTrigger.node.ts
+++ b/packages/nodes-base/nodes/Hubspot/HubspotTrigger.node.ts
@@ -23,7 +23,7 @@ export class HubspotTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when HubSpot events occur',
 		defaults: {
-			name: 'Hubspot Trigger',
+			name: 'HubSpot Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Jira/Jira.node.ts b/packages/nodes-base/nodes/Jira/Jira.node.ts
index b70b503b87933..7254985debeab 100644
--- a/packages/nodes-base/nodes/Jira/Jira.node.ts
+++ b/packages/nodes-base/nodes/Jira/Jira.node.ts
@@ -46,7 +46,7 @@ export class Jira implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Consume Jira Software API',
 		defaults: {
-			name: 'Jira',
+			name: 'Jira Software',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/KoBoToolbox/KoBoToolbox.node.ts b/packages/nodes-base/nodes/KoBoToolbox/KoBoToolbox.node.ts
index 7a1b39df3a1f7..61c269ccc47df 100644
--- a/packages/nodes-base/nodes/KoBoToolbox/KoBoToolbox.node.ts
+++ b/packages/nodes-base/nodes/KoBoToolbox/KoBoToolbox.node.ts
@@ -1,7 +1,6 @@
 import { IExecuteFunctions } from 'n8n-core';
 
 import {
-	IBinaryData,
 	IBinaryKeyData,
 	IDataObject,
 	INodeExecutionData,
diff --git a/packages/nodes-base/nodes/ManualTrigger/ManualTrigger.node.ts b/packages/nodes-base/nodes/ManualTrigger/ManualTrigger.node.ts
index 7676646aa9894..a4e415e32b7e2 100644
--- a/packages/nodes-base/nodes/ManualTrigger/ManualTrigger.node.ts
+++ b/packages/nodes-base/nodes/ManualTrigger/ManualTrigger.node.ts
@@ -11,7 +11,7 @@ export class ManualTrigger implements INodeType {
 		description: 'Runs the flow on clicking a button in n8n',
 		maxNodes: 1,
 		defaults: {
-			name: "On clicking 'execute'",
+			name: 'When clicking "Execute Workflow"',
 			color: '#909298',
 		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node
diff --git a/packages/nodes-base/nodes/Msg91/Msg91.node.ts b/packages/nodes-base/nodes/Msg91/Msg91.node.ts
index c852841884eb2..a62c6fdbabfa9 100644
--- a/packages/nodes-base/nodes/Msg91/Msg91.node.ts
+++ b/packages/nodes-base/nodes/Msg91/Msg91.node.ts
@@ -20,7 +20,7 @@ export class Msg91 implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Sends transactional SMS via MSG91',
 		defaults: {
-			name: 'Msg91',
+			name: 'MSG91',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/N8nTrainingCustomerDatastore/N8nTrainingCustomerDatastore.node.ts b/packages/nodes-base/nodes/N8nTrainingCustomerDatastore/N8nTrainingCustomerDatastore.node.ts
index a64d139d50cc7..9814952136a16 100644
--- a/packages/nodes-base/nodes/N8nTrainingCustomerDatastore/N8nTrainingCustomerDatastore.node.ts
+++ b/packages/nodes-base/nodes/N8nTrainingCustomerDatastore/N8nTrainingCustomerDatastore.node.ts
@@ -55,7 +55,7 @@ export class N8nTrainingCustomerDatastore implements INodeType {
 		subtitle: '={{$parameter["operation"]}}',
 		description: 'Dummy node used for n8n training',
 		defaults: {
-			name: 'Customer Datastore',
+			name: 'Customer Datastore (n8n training)',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/N8nTrainingCustomerMessenger/N8nTrainingCustomerMessenger.node.ts b/packages/nodes-base/nodes/N8nTrainingCustomerMessenger/N8nTrainingCustomerMessenger.node.ts
index 0d20f74129b63..338e465b27464 100644
--- a/packages/nodes-base/nodes/N8nTrainingCustomerMessenger/N8nTrainingCustomerMessenger.node.ts
+++ b/packages/nodes-base/nodes/N8nTrainingCustomerMessenger/N8nTrainingCustomerMessenger.node.ts
@@ -11,7 +11,7 @@ export class N8nTrainingCustomerMessenger implements INodeType {
 		version: 1,
 		description: 'Dummy node used for n8n training',
 		defaults: {
-			name: 'Customer Messenger',
+			name: 'Customer Messenger (n8n training)',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/NoOp/NoOp.node.ts b/packages/nodes-base/nodes/NoOp/NoOp.node.ts
index 804531c7e67f9..a47f743a47dac 100644
--- a/packages/nodes-base/nodes/NoOp/NoOp.node.ts
+++ b/packages/nodes-base/nodes/NoOp/NoOp.node.ts
@@ -10,7 +10,7 @@ export class NoOp implements INodeType {
 		version: 1,
 		description: 'No Operation',
 		defaults: {
-			name: 'NoOp',
+			name: 'No Operation, do nothing',
 			color: '#b0b0b0',
 		},
 		inputs: ['main'],
diff --git a/packages/nodes-base/nodes/Notion/NotionTrigger.node.ts b/packages/nodes-base/nodes/Notion/NotionTrigger.node.ts
index 568a2811b29fa..4de1d97b98df2 100644
--- a/packages/nodes-base/nodes/Notion/NotionTrigger.node.ts
+++ b/packages/nodes-base/nodes/Notion/NotionTrigger.node.ts
@@ -18,7 +18,7 @@ export class NotionTrigger implements INodeType {
 		description: 'Starts the workflow when Notion events occur',
 		subtitle: '={{$parameter["event"]}}',
 		defaults: {
-			name: 'Notion Trigger',
+			name: 'Notion Trigger (Beta)',
 		},
 		credentials: [
 			{
diff --git a/packages/nodes-base/nodes/Notion/v1/VersionDescription.ts b/packages/nodes-base/nodes/Notion/v1/VersionDescription.ts
index bd3cabbe851e1..fd15aea9c6efd 100644
--- a/packages/nodes-base/nodes/Notion/v1/VersionDescription.ts
+++ b/packages/nodes-base/nodes/Notion/v1/VersionDescription.ts
@@ -20,7 +20,7 @@ export const versionDescription: INodeTypeDescription = {
 	subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 	description: 'Consume Notion API (Beta)',
 	defaults: {
-		name: 'Notion',
+		name: 'Notion (Beta)',
 	},
 	inputs: ['main'],
 	outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Notion/v2/VersionDescription.ts b/packages/nodes-base/nodes/Notion/v2/VersionDescription.ts
index a496d1a05157e..442ac6331910f 100644
--- a/packages/nodes-base/nodes/Notion/v2/VersionDescription.ts
+++ b/packages/nodes-base/nodes/Notion/v2/VersionDescription.ts
@@ -20,7 +20,7 @@ export const versionDescription: INodeTypeDescription = {
 	subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 	description: 'Consume Notion API (Beta)',
 	defaults: {
-		name: 'Notion',
+		name: 'Notion (Beta)',
 	},
 	inputs: ['main'],
 	outputs: ['main'],
diff --git a/packages/nodes-base/nodes/RssFeedRead/RssFeedRead.node.ts b/packages/nodes-base/nodes/RssFeedRead/RssFeedRead.node.ts
index 5ccef91b6c859..7b43fcd543409 100644
--- a/packages/nodes-base/nodes/RssFeedRead/RssFeedRead.node.ts
+++ b/packages/nodes-base/nodes/RssFeedRead/RssFeedRead.node.ts
@@ -19,7 +19,7 @@ export class RssFeedRead implements INodeType {
 		version: 1,
 		description: 'Reads data from an RSS Feed',
 		defaults: {
-			name: 'RSS Feed Read',
+			name: 'RSS Read',
 			color: '#b02020',
 		},
 		inputs: ['main'],
diff --git a/packages/nodes-base/nodes/SendInBlue/SendInBlueTrigger.node.ts b/packages/nodes-base/nodes/SendInBlue/SendInBlueTrigger.node.ts
index 2ff0c2dc4f328..2194e3017276c 100644
--- a/packages/nodes-base/nodes/SendInBlue/SendInBlueTrigger.node.ts
+++ b/packages/nodes-base/nodes/SendInBlue/SendInBlueTrigger.node.ts
@@ -18,7 +18,7 @@ export class SendInBlueTrigger implements INodeType {
 		],
 		displayName: 'SendInBlue Trigger',
 		defaults: {
-			name: 'SendInBlue-Trigger',
+			name: 'SendInBlue Trigger',
 		},
 		description: 'Starts the workflow when SendInBlue events occur',
 		group: ['trigger'],
diff --git a/packages/nodes-base/nodes/SplitInBatches/SplitInBatches.node.ts b/packages/nodes-base/nodes/SplitInBatches/SplitInBatches.node.ts
index e9ad33c774fdb..9b2e43104f3c8 100644
--- a/packages/nodes-base/nodes/SplitInBatches/SplitInBatches.node.ts
+++ b/packages/nodes-base/nodes/SplitInBatches/SplitInBatches.node.ts
@@ -10,7 +10,7 @@ export class SplitInBatches implements INodeType {
 		version: 1,
 		description: 'Split data into batches and iterate over each batch',
 		defaults: {
-			name: 'SplitInBatches',
+			name: 'Split In Batches',
 			color: '#007755',
 		},
 		inputs: ['main'],
diff --git a/packages/nodes-base/nodes/StickyNote/StickyNote.node.ts b/packages/nodes-base/nodes/StickyNote/StickyNote.node.ts
index c090afa7f7a56..7107a7d2a1081 100644
--- a/packages/nodes-base/nodes/StickyNote/StickyNote.node.ts
+++ b/packages/nodes-base/nodes/StickyNote/StickyNote.node.ts
@@ -10,7 +10,7 @@ export class StickyNote implements INodeType {
 		version: 1,
 		description: 'Make your workflow easier to understand',
 		defaults: {
-			name: 'Note',
+			name: 'Sticky Note',
 			color: '#FFD233',
 		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node
diff --git a/packages/nodes-base/nodes/StopAndError/StopAndError.node.ts b/packages/nodes-base/nodes/StopAndError/StopAndError.node.ts
index 55046a61c3ebb..c1d18eb15308d 100644
--- a/packages/nodes-base/nodes/StopAndError/StopAndError.node.ts
+++ b/packages/nodes-base/nodes/StopAndError/StopAndError.node.ts
@@ -22,7 +22,7 @@ export class StopAndError implements INodeType {
 		version: 1,
 		description: 'Throw an error in the workflow',
 		defaults: {
-			name: 'Stop And Error',
+			name: 'Stop and Error',
 			color: '#ff0000',
 		},
 		inputs: ['main'],
diff --git a/packages/nodes-base/nodes/Toggl/TogglTrigger.node.ts b/packages/nodes-base/nodes/Toggl/TogglTrigger.node.ts
index b1eeab8b0015e..afd9bfdb766f3 100644
--- a/packages/nodes-base/nodes/Toggl/TogglTrigger.node.ts
+++ b/packages/nodes-base/nodes/Toggl/TogglTrigger.node.ts
@@ -21,7 +21,7 @@ export class TogglTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when Toggl events occur',
 		defaults: {
-			name: 'Toggl',
+			name: 'Toggl Trigger',
 		},
 		credentials: [
 			{
diff --git a/packages/nodes-base/nodes/Venafi/Datacenter/VenafiTlsProtectDatacenter.node.ts b/packages/nodes-base/nodes/Venafi/Datacenter/VenafiTlsProtectDatacenter.node.ts
index ddc36cc8cacdd..1a1390c673529 100644
--- a/packages/nodes-base/nodes/Venafi/Datacenter/VenafiTlsProtectDatacenter.node.ts
+++ b/packages/nodes-base/nodes/Venafi/Datacenter/VenafiTlsProtectDatacenter.node.ts
@@ -16,9 +16,9 @@ export class VenafiTlsProtectDatacenter implements INodeType {
 		group: ['input'],
 		version: 1,
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
-		description: 'Consume Venafi TLS Protect Datacenter​',
+		description: 'Consume Venafi TLS Protect Datacenter',
 		defaults: {
-			name: 'Venafi TLS Protect Datacenter​',
+			name: 'Venafi TLS Protect Datacenter',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloud.node.ts b/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloud.node.ts
index 546c116dd0d40..155c23517dc6d 100644
--- a/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloud.node.ts
+++ b/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloud.node.ts
@@ -34,9 +34,9 @@ export class VenafiTlsProtectCloud implements INodeType {
 		group: ['input'],
 		version: 1,
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
-		description: 'Consume Venafi TLS Protect Cloud​ API',
+		description: 'Consume Venafi TLS Protect Cloud API',
 		defaults: {
-			name: 'Venafi TLS Protect Cloud​',
+			name: 'Venafi TLS Protect Cloud',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloudTrigger.node.ts b/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloudTrigger.node.ts
index 77e590a4dced0..40e0b77967f5b 100644
--- a/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloudTrigger.node.ts
+++ b/packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloudTrigger.node.ts
@@ -19,7 +19,7 @@ export class VenafiTlsProtectCloudTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when Venafi events occur',
 		defaults: {
-			name: 'Venafi TLS Protect Cloud​ Trigger',
+			name: 'Venafi TLS Protect Cloud Trigger',
 		},
 		credentials: [
 			{
diff --git a/packages/nodes-base/nodes/WhatsApp/WhatsApp.node.ts b/packages/nodes-base/nodes/WhatsApp/WhatsApp.node.ts
index b3910622b0d94..a1a9f8c97923f 100644
--- a/packages/nodes-base/nodes/WhatsApp/WhatsApp.node.ts
+++ b/packages/nodes-base/nodes/WhatsApp/WhatsApp.node.ts
@@ -13,7 +13,7 @@ export class WhatsApp implements INodeType {
 		subtitle: '={{ $parameter["resource"] + ": " + $parameter["operation"] }}',
 		description: 'Access WhatsApp API',
 		defaults: {
-			name: 'WhatsApp',
+			name: 'WhatsApp Business Cloud',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/nodes-base/nodes/Zoho/ZohoCrm.node.ts b/packages/nodes-base/nodes/Zoho/ZohoCrm.node.ts
index e19788cba03b9..601e7bb9fe0de 100644
--- a/packages/nodes-base/nodes/Zoho/ZohoCrm.node.ts
+++ b/packages/nodes-base/nodes/Zoho/ZohoCrm.node.ts
@@ -76,7 +76,7 @@ export class ZohoCrm implements INodeType {
 		version: 1,
 		description: 'Consume Zoho CRM API',
 		defaults: {
-			name: 'Zoho',
+			name: 'Zoho CRM',
 		},
 		inputs: ['main'],
 		outputs: ['main'],
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index 4e9ac5fbc2529..114743cc2265a 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1369,6 +1369,12 @@ export interface IPostReceiveSort extends IPostReceiveBase {
 	};
 }
 
+export interface INodeActionTypeDescription extends INodeTypeDescription {
+	displayOptions?: IDisplayOptions;
+	values?: IDataObject;
+	actionKey: string;
+}
+
 export interface INodeTypeDescription extends INodeTypeBaseDescription {
 	version: number | number[];
 	defaults: INodeParameters;
@@ -1407,6 +1413,7 @@ export interface INodeTypeDescription extends INodeTypeBaseDescription {
 					inactive: string;
 			  };
 	};
+	actions?: INodeActionTypeDescription[];
 }
 
 export interface INodeHookDescription {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd25e75922548..12dc61ff27246 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -493,6 +493,7 @@ importers:
       '@types/express': ^4.17.6
       '@types/file-saver': ^2.0.1
       '@types/jsonpath': ^0.2.0
+      '@types/lodash-es': ^4.17.6
       '@types/lodash.camelcase': ^4.3.6
       '@types/lodash.get': ^4.4.6
       '@types/lodash.set': ^4.3.6
@@ -607,6 +608,7 @@ importers:
       '@types/express': 4.17.14
       '@types/file-saver': 2.0.5
       '@types/jsonpath': 0.2.0
+      '@types/lodash-es': 4.17.6
       '@types/lodash.camelcase': 4.3.7
       '@types/lodash.get': 4.4.7
       '@types/lodash.set': 4.3.7
@@ -5743,6 +5745,12 @@ packages:
     resolution: {integrity: sha512-3YxO7RHRrmtYNX6Rhkr97bnXHrF1Ckfo4axENWLcBXWi+8B1WsNbqPqe5Eg6TA5survjAWWvLTu1KQesuLHVgQ==}
     dev: true
 
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.186
+    dev: true
+
   /@types/lodash.camelcase/4.3.7:
     resolution: {integrity: sha512-Nfi6jpo9vuEOSIJP+mpbTezKyEt75DQlbwjiDvs/JctWkbnHDoyQo5lWqdvgNiJmVUjcmkfvlrvSEgJYvurOKg==}
     dependencies: