diff --git a/biome.jsonc b/biome.jsonc
index d231d17407..1eb434dc88 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -8,6 +8,7 @@
 	"files": {
 		"ignore": [
 			"**/.turbo",
+			"**/components.d.ts",
 			"**/coverage",
 			"**/dist",
 			"**/package.json",
diff --git a/packages/frontend/@n8n/chat/.gitignore b/packages/frontend/@n8n/chat/.gitignore
index 38adffa64e..286644387f 100644
--- a/packages/frontend/@n8n/chat/.gitignore
+++ b/packages/frontend/@n8n/chat/.gitignore
@@ -26,3 +26,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Auto-generated files
+src/components.d.ts
diff --git a/packages/frontend/@n8n/chat/package.json b/packages/frontend/@n8n/chat/package.json
index 13d3cb7885..2c7015b79e 100644
--- a/packages/frontend/@n8n/chat/package.json
+++ b/packages/frontend/@n8n/chat/package.json
@@ -12,8 +12,8 @@
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . --ext .js,.ts,.vue --quiet",
     "lintfix": "eslint . --ext .js,.ts,.vue --fix",
-    "format": "biome format --write src .storybook && prettier --write src/ --ignore-path ../../.prettierignore",
-    "format:check": "biome ci src .storybook && prettier --check src/ --ignore-path ../../.prettierignore",
+    "format": "biome format --write src .storybook && prettier --write src/ --ignore-path ../../../../.prettierignore",
+    "format:check": "biome ci src .storybook && prettier --check src/ --ignore-path ../../../../.prettierignore",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build"
   },
@@ -36,6 +36,7 @@
     }
   },
   "dependencies": {
+    "@n8n/design-system": "workspace:*",
     "@vueuse/core": "catalog:frontend",
     "highlight.js": "catalog:frontend",
     "markdown-it-link-attributes": "^4.0.1",
diff --git a/packages/frontend/@n8n/chat/src/App.vue b/packages/frontend/@n8n/chat/src/App.vue
index 0614b7cf73..32e5976d9d 100644
--- a/packages/frontend/@n8n/chat/src/App.vue
+++ b/packages/frontend/@n8n/chat/src/App.vue
@@ -4,7 +4,8 @@ import hljsJavascript from 'highlight.js/lib/languages/javascript';
 import hljsXML from 'highlight.js/lib/languages/xml';
 import { computed, onMounted } from 'vue';
 
-import { Chat, ChatWindow } from '@n8n/chat/components';
+import Chat from '@n8n/chat/components/Chat.vue';
+import ChatWindow from '@n8n/chat/components/ChatWindow.vue';
 import { useOptions } from '@n8n/chat/composables';
 
 defineProps({});
diff --git a/packages/frontend/@n8n/chat/src/components/Message.vue b/packages/frontend/@n8n/chat/src/components/Message.vue
index 7868cd54f6..bfcc21ca39 100644
--- a/packages/frontend/@n8n/chat/src/components/Message.vue
+++ b/packages/frontend/@n8n/chat/src/components/Message.vue
@@ -105,7 +105,7 @@ onMounted(async () => {
 
 <template>
 	<div ref="messageContainer" class="chat-message" :class="classes">
-		<div v-if="$slots.beforeMessage" class="chat-message-actions">
+		<div v-if="!!$slots.beforeMessage" class="chat-message-actions">
 			<slot name="beforeMessage" v-bind="{ message }" />
 		</div>
 		<slot>
diff --git a/packages/frontend/@n8n/chat/src/components/MessagesList.vue b/packages/frontend/@n8n/chat/src/components/MessagesList.vue
index ba941f0625..b96be9dcc7 100644
--- a/packages/frontend/@n8n/chat/src/components/MessagesList.vue
+++ b/packages/frontend/@n8n/chat/src/components/MessagesList.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { N8nIcon, N8nText } from '@n8n/design-system';
 import { ref, watch } from 'vue';
 
 import Message from '@n8n/chat/components/Message.vue';
diff --git a/packages/frontend/@n8n/chat/src/env.d.ts b/packages/frontend/@n8n/chat/src/env.d.ts
index 11f02fe2a0..1e9445333b 100644
--- a/packages/frontend/@n8n/chat/src/env.d.ts
+++ b/packages/frontend/@n8n/chat/src/env.d.ts
@@ -1 +1,17 @@
 /// <reference types="vite/client" />
+
+declare module 'markdown-it-task-lists' {
+	import type { PluginWithOptions } from 'markdown-it';
+
+	declare namespace markdownItTaskLists {
+		interface Config {
+			enabled?: boolean;
+			label?: boolean;
+			labelAfter?: boolean;
+		}
+	}
+
+	declare const markdownItTaskLists: PluginWithOptions<markdownItTaskLists.Config>;
+
+	export = markdownItTaskLists;
+}
diff --git a/packages/frontend/@n8n/chat/src/shims.d.ts b/packages/frontend/@n8n/chat/src/shims.d.ts
deleted file mode 100644
index 1fc02b2079..0000000000
--- a/packages/frontend/@n8n/chat/src/shims.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.vue' {
-	import { defineComponent } from 'vue';
-
-	const component: ReturnType<typeof defineComponent>;
-	export default component;
-}
diff --git a/packages/frontend/@n8n/chat/tsconfig.json b/packages/frontend/@n8n/chat/tsconfig.json
index 34bb759969..ce8d699e70 100644
--- a/packages/frontend/@n8n/chat/tsconfig.json
+++ b/packages/frontend/@n8n/chat/tsconfig.json
@@ -6,6 +6,7 @@
 		"baseUrl": "src",
 		"target": "esnext",
 		"module": "esnext",
+		"moduleResolution": "bundler",
 		"allowJs": true,
 		"importHelpers": true,
 		"incremental": false,
@@ -13,7 +14,8 @@
 		"resolveJsonModule": true,
 		"types": ["vitest/globals"],
 		"paths": {
-			"@n8n/chat/*": ["./*"]
+			"@n8n/chat/*": ["./*"],
+			"@n8n/design-system*": ["../../design-system/src*"]
 		},
 		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line
diff --git a/packages/frontend/@n8n/chat/vite.config.mts b/packages/frontend/@n8n/chat/vite.config.mts
index 75abffe6bf..d8d5e8016e 100644
--- a/packages/frontend/@n8n/chat/vite.config.mts
+++ b/packages/frontend/@n8n/chat/vite.config.mts
@@ -5,9 +5,12 @@ import vue from '@vitejs/plugin-vue';
 import icons from 'unplugin-icons/vite';
 import dts from 'vite-plugin-dts';
 import { vitestConfig } from '@n8n/vitest-config/frontend';
+import iconsResolver from 'unplugin-icons/resolver';
+import components from 'unplugin-vue-components/vite';
 
 const includeVue = process.env.INCLUDE_VUE === 'true';
 const srcPath = resolve(__dirname, 'src');
+const packagesDir = resolve(__dirname, '..', '..', '..');
 
 // https://vitejs.dev/config/
 export default mergeConfig(
@@ -19,6 +22,18 @@ export default mergeConfig(
 				autoInstall: true,
 			}),
 			dts(),
+			components({
+				dts: './src/components.d.ts',
+				resolvers: [
+					(componentName) => {
+						if (componentName.startsWith('N8n'))
+							return { name: componentName, from: '@n8n/design-system' };
+					},
+					iconsResolver({
+						prefix: 'icon',
+					}),
+				],
+			}),
 			{
 				name: 'rename-css-file',
 				closeBundle() {
@@ -36,10 +51,24 @@ export default mergeConfig(
 			},
 		],
 		resolve: {
-			alias: {
-				'@': srcPath,
-				'@n8n/chat': srcPath,
-			},
+			alias: [
+				{
+					find: '@',
+					replacement: srcPath,
+				},
+				{
+					find: '@n8n/chat',
+					replacement: srcPath,
+				},
+				{
+					find: /^@n8n\/chat(.+)$/,
+					replacement: srcPath + '$1',
+				},
+				{
+					find: /^@n8n\/design-system(.+)$/,
+					replacement: resolve(packagesDir, 'frontend', '@n8n', 'design-system', 'src$1'),
+				},
+			],
 		},
 		define: {
 			'process.env.NODE_ENV': process.env.NODE_ENV ? `"${process.env.NODE_ENV}"` : '"development"',
diff --git a/packages/frontend/@n8n/design-system/.eslintrc.js b/packages/frontend/@n8n/design-system/.eslintrc.js
index ad1f1884d3..9a8cc924b8 100644
--- a/packages/frontend/@n8n/design-system/.eslintrc.js
+++ b/packages/frontend/@n8n/design-system/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
 		'@typescript-eslint/no-unsafe-member-access': 'warn',
 		'@typescript-eslint/prefer-optional-chain': 'warn',
 		'@typescript-eslint/prefer-nullish-coalescing': 'warn',
+		'vue/no-undef-components': 'error',
 	},
 
 	overrides: [
diff --git a/packages/frontend/@n8n/design-system/package.json b/packages/frontend/@n8n/design-system/package.json
index 6ad141308e..96f9bac636 100644
--- a/packages/frontend/@n8n/design-system/package.json
+++ b/packages/frontend/@n8n/design-system/package.json
@@ -8,6 +8,7 @@
     "clean": "rimraf dist .turbo",
     "build": "vite build",
     "typecheck": "vue-tsc --noEmit",
+    "typecheck:watch": "vue-tsc --watch --noEmit",
     "test": "vitest run",
     "test:dev": "vitest",
     "build:storybook": "storybook build",
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
index 72796a1274..541dee2a12 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
@@ -18,6 +18,9 @@ import AssistantLoadingMessage from '../AskAssistantLoadingMessage/AssistantLoad
 import AssistantText from '../AskAssistantText/AssistantText.vue';
 import BetaTag from '../BetaTag/BetaTag.vue';
 import InlineAskAssistantButton from '../InlineAskAssistantButton/InlineAskAssistantButton.vue';
+import N8nButton from '../N8nButton';
+import N8nIcon from '../N8nIcon';
+import N8nIconButton from '../N8nIconButton';
 
 const { t } = useI18n();
 
@@ -124,7 +127,7 @@ function onSubmitFeedback(feedback: string) {
 				<slot name="header" />
 			</div>
 			<div :class="$style.back" data-test-id="close-chat-button" @click="onClose">
-				<n8n-icon icon="arrow-right" color="text-base" />
+				<N8nIcon icon="arrow-right" color="text-base" />
 			</div>
 		</div>
 		<div :class="$style.body">
@@ -222,14 +225,14 @@ function onSubmitFeedback(feedback: string) {
 								{{ t('assistantChat.quickRepliesTitle') }}
 							</div>
 							<div v-for="opt in message.quickReplies" :key="opt.type" data-test-id="quick-replies">
-								<n8n-button
+								<N8nButton
 									v-if="opt.text"
 									type="secondary"
 									size="mini"
 									@click="() => onQuickReply(opt)"
 								>
 									{{ opt.text }}
-								</n8n-button>
+								</N8nButton>
 							</div>
 						</div>
 					</data>
@@ -289,10 +292,10 @@ function onSubmitFeedback(feedback: string) {
 					@input.prevent="growInput"
 					@keydown.stop
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					:class="{ [$style.sendButton]: true }"
 					icon="paper-plane"
-					type="text"
+					:text="true"
 					size="large"
 					data-test-id="send-message-button"
 					:disabled="sendDisabled"
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
index a7885824b5..f6c3fba6e3 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
@@ -69,6 +69,8 @@ exports[`AskAssistantChat > does not render retry button if no error is present
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -175,12 +177,16 @@ exports[`AskAssistantChat > does not render retry button if no error is present
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
@@ -257,6 +263,8 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -601,11 +609,18 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
                   class="actions"
                 >
                   <n8n-button-stub
+                    active="false"
+                    block="false"
                     data-test-id="replace-code-button"
                     disabled="false"
+                    element="button"
                     icon="refresh"
+                    label=""
                     loading="false"
+                    outline="false"
                     size="mini"
+                    square="false"
+                    text="false"
                     type="primary"
                   />
                 </div>
@@ -625,8 +640,9 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
               >
                 
                 <n8n-avatar-stub
-                  first-name="Kobi"
-                  last-name="Dog"
+                  colors="--color-primary,--color-secondary,--color-avatar-accent-1,--color-avatar-accent-2,--color-primary-tint-1"
+                  firstname="Kobi"
+                  lastname="Dog"
                   size="xsmall"
                 />
                 <span>
@@ -897,11 +913,18 @@ Testing more code
                   class="actions"
                 >
                   <n8n-button-stub
+                    active="false"
+                    block="false"
                     data-test-id="replace-code-button"
                     disabled="false"
+                    element="button"
                     icon="refresh"
+                    label=""
                     loading="false"
+                    outline="false"
                     size="mini"
+                    square="false"
+                    text="false"
                     type="primary"
                   />
                 </div>
@@ -921,7 +944,16 @@ Testing more code
                 data-test-id="quick-replies"
               >
                 <n8n-button-stub
+                  active="false"
+                  block="false"
+                  disabled="false"
+                  element="button"
+                  label=""
+                  loading="false"
+                  outline="false"
                   size="mini"
+                  square="false"
+                  text="false"
                   type="secondary"
                 />
               </div>
@@ -929,7 +961,16 @@ Testing more code
                 data-test-id="quick-replies"
               >
                 <n8n-button-stub
+                  active="false"
+                  block="false"
+                  disabled="false"
+                  element="button"
+                  label=""
+                  loading="false"
+                  outline="false"
                   size="mini"
+                  square="false"
+                  text="false"
                   type="secondary"
                 />
               </div>
@@ -954,12 +995,16 @@ Testing more code
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
@@ -1036,6 +1081,8 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -1135,12 +1182,16 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
@@ -1217,6 +1268,8 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -1400,12 +1453,16 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
@@ -1482,6 +1539,8 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -1558,13 +1617,23 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
                     class="errorIcon"
                     icon="exclamation-triangle"
                     size="small"
+                    spin="false"
                   />
                    This is an error message.
                 </p>
                 <n8n-button-stub
+                  active="false"
+                  block="false"
                   class="retryButton"
                   data-test-id="error-retry-button"
+                  disabled="false"
+                  element="button"
+                  label=""
+                  loading="false"
+                  outline="false"
                   size="mini"
+                  square="false"
+                  text="false"
                   type="secondary"
                 />
               </div>
@@ -1590,12 +1659,16 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
@@ -1672,6 +1745,8 @@ exports[`AskAssistantChat > renders message with code snippet 1`] = `
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -1848,12 +1923,16 @@ catch(e) {
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
@@ -1930,6 +2009,8 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
         <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
+          size="medium"
+          spin="false"
         />
       </div>
     </div>
@@ -2039,12 +2120,16 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
         wrap="hard"
       />
       <n8n-icon-button-stub
+        active="false"
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
         icon="paper-plane"
+        loading="false"
+        outline="false"
         size="large"
-        type="text"
+        text="true"
+        type="primary"
       />
       
     </div>
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/BaseMessage.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/BaseMessage.vue
index f4058c811c..ba8ce0cb14 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/BaseMessage.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/BaseMessage.vue
@@ -4,6 +4,7 @@ import { computed } from 'vue';
 import { useI18n } from '../../../composables/useI18n';
 import type { ChatUI } from '../../../types/assistant';
 import AssistantAvatar from '../../AskAssistantAvatar/AssistantAvatar.vue';
+import N8nAvatar from '../../N8nAvatar';
 
 interface Props {
 	message: ChatUI.AssistantMessage;
@@ -27,7 +28,7 @@ const isUserMessage = computed(() => props.message.role === 'user');
 			:class="{ [$style.roleName]: true, [$style.userSection]: !isUserMessage }"
 		>
 			<template v-if="isUserMessage">
-				<n8n-avatar :first-name="user?.firstName" :last-name="user?.lastName" size="xsmall" />
+				<N8nAvatar :first-name="user?.firstName" :last-name="user?.lastName" size="xsmall" />
 				<span>{{ t('assistantChat.you') }}</span>
 			</template>
 			<template v-else>
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
index d9c1a776bd..290c8a0520 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
@@ -2,6 +2,8 @@
 import BaseMessage from './BaseMessage.vue';
 import { useI18n } from '../../../composables/useI18n';
 import type { ChatUI } from '../../../types/assistant';
+import N8nButton from '../../N8nButton';
+import N8nIcon from '../../N8nIcon';
 
 interface Props {
 	message: ChatUI.ErrorMessage & { id: string; read: boolean };
@@ -20,10 +22,10 @@ const { t } = useI18n();
 	<BaseMessage :message="message" :is-first-of-role="isFirstOfRole" :user="user">
 		<div :class="$style.error" data-test-id="chat-message-system">
 			<p :class="$style.errorText">
-				<n8n-icon icon="exclamation-triangle" size="small" :class="$style.errorIcon" />
+				<N8nIcon icon="exclamation-triangle" size="small" :class="$style.errorIcon" />
 				{{ message.content }}
 			</p>
-			<n8n-button
+			<N8nButton
 				v-if="message.retry"
 				type="secondary"
 				size="mini"
@@ -32,7 +34,7 @@ const { t } = useI18n();
 				@click="() => message.retry?.()"
 			>
 				{{ t('generic.retry') }}
-			</n8n-button>
+			</N8nButton>
 		</div>
 	</BaseMessage>
 </template>
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
index 0f228e1189..23fd097bd6 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
@@ -6,6 +6,7 @@ import { useMarkdown } from './useMarkdown';
 import { useI18n } from '../../../composables/useI18n';
 import type { ChatUI } from '../../../types/assistant';
 import BlinkingCursor from '../../BlinkingCursor/BlinkingCursor.vue';
+import N8nButton from '../../N8nButton';
 
 interface Props {
 	message: ChatUI.TextMessage & { id: string; read: boolean; quickReplies?: ChatUI.QuickReply[] };
@@ -55,15 +56,15 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
 				data-test-id="assistant-code-snippet"
 			>
 				<header v-if="isClipboardSupported">
-					<n8n-button
+					<N8nButton
 						type="tertiary"
-						text="true"
+						:text="true"
 						size="mini"
 						data-test-id="assistant-copy-snippet-button"
 						@click="onCopyButtonClick(message.codeSnippet, $event)"
 					>
 						{{ t('assistantChat.copy') }}
-					</n8n-button>
+					</N8nButton>
 				</header>
 				<div
 					v-n8n-html="renderMarkdown(message.codeSnippet).trim()"
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/workflow/RateWorkflowMessage.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/workflow/RateWorkflowMessage.vue
index 2dfabdc195..33bec98e37 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/workflow/RateWorkflowMessage.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/workflow/RateWorkflowMessage.vue
@@ -5,6 +5,8 @@ import { useI18n } from '@n8n/design-system/composables/useI18n';
 
 import BaseWorkflowMessage from './BaseWorkflowMessage.vue';
 import type { ChatUI } from '../../../../types/assistant';
+import N8nButton from '../../../N8nButton';
+import N8nInput from '../../../N8nInput';
 
 interface Props {
 	message: ChatUI.RateWorkflowMessage & { id: string; read: boolean };
@@ -48,7 +50,7 @@ function onSubmitFeedback() {
 		<div :class="$style.content">
 			<p v-if="!showSuccess">{{ message.content }}</p>
 			<div v-if="!showFeedback && !showSuccess" :class="$style.buttons">
-				<n8n-button
+				<N8nButton
 					type="secondary"
 					size="small"
 					:label="t('assistantChat.builder.thumbsUp')"
@@ -56,7 +58,7 @@ function onSubmitFeedback() {
 					icon="thumbs-up"
 					@click="onRateButton('thumbsUp')"
 				/>
-				<n8n-button
+				<N8nButton
 					type="secondary"
 					size="small"
 					data-test-id="message-thumbs-down-button"
@@ -66,7 +68,7 @@ function onSubmitFeedback() {
 				/>
 			</div>
 			<div v-if="showFeedback" :class="$style.feedbackTextArea">
-				<n8n-input
+				<N8nInput
 					v-model="feedback"
 					:class="$style.feedbackInput"
 					type="textarea"
@@ -77,7 +79,7 @@ function onSubmitFeedback() {
 					:rows="5"
 				/>
 				<div :class="$style.feedbackTextArea__footer">
-					<n8n-button
+					<N8nButton
 						native-type="submit"
 						type="secondary"
 						size="small"
@@ -85,7 +87,7 @@ function onSubmitFeedback() {
 						@click="onSubmitFeedback"
 					>
 						{{ t('assistantChat.builder.submit') }}
-					</n8n-button>
+					</N8nButton>
 				</div>
 			</div>
 
diff --git a/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue b/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
index 6fb458a1d1..29168ec4c3 100644
--- a/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
+++ b/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
@@ -4,6 +4,9 @@ import { computed } from 'vue';
 
 import { useI18n } from '@n8n/design-system/composables/useI18n';
 
+import N8nButton from '../N8nButton';
+import N8nIcon from '../N8nIcon';
+
 const MIN_LINES = 4;
 
 interface Props {
@@ -106,11 +109,11 @@ const diffs = computed(() => {
 		</div>
 		<div :class="$style.actions">
 			<div v-if="error">
-				<n8n-icon icon="exclamation-triangle" color="danger" class="mr-5xs" />
+				<N8nIcon icon="exclamation-triangle" color="danger" class="mr-5xs" />
 				<span :class="$style.infoText">{{ t('codeDiff.couldNotReplace') }}</span>
 			</div>
 			<div v-else-if="replaced">
-				<n8n-button
+				<N8nButton
 					type="secondary"
 					size="mini"
 					icon="undo"
@@ -118,13 +121,13 @@ const diffs = computed(() => {
 					@click="() => emit('undo')"
 				>
 					{{ t('codeDiff.undo') }}
-				</n8n-button>
-				<n8n-icon icon="check" color="success" class="ml-xs" />
+				</N8nButton>
+				<N8nIcon icon="check" color="success" class="ml-xs" />
 				<span :class="$style.infoText" data-test-id="code-replaced-message">
 					{{ t('codeDiff.codeReplaced') }}
 				</span>
 			</div>
-			<n8n-button
+			<N8nButton
 				v-else
 				:type="replacing ? 'secondary' : 'primary'"
 				size="mini"
@@ -133,7 +136,7 @@ const diffs = computed(() => {
 				:disabled="!content || streaming"
 				:loading="replacing"
 				@click="() => emit('replace')"
-				>{{ replacing ? t('codeDiff.replacing') : t('codeDiff.replaceMyCode') }}</n8n-button
+				>{{ replacing ? t('codeDiff.replacing') : t('codeDiff.replaceMyCode') }}</N8nButton
 			>
 		</div>
 	</div>
diff --git a/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap
index 0810f24767..6fdaa70094 100644
--- a/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap
@@ -271,11 +271,18 @@ exports[`CodeDiff > renders code diff correctly 1`] = `
       class="actions"
     >
       <n8n-button-stub
+        active="false"
+        block="false"
         data-test-id="replace-code-button"
         disabled="false"
+        element="button"
         icon="refresh"
+        label=""
         loading="false"
+        outline="false"
         size="mini"
+        square="false"
+        text="false"
         type="primary"
       />
     </div>
@@ -537,6 +544,8 @@ exports[`CodeDiff > renders error state correctly 1`] = `
           class="mr-5xs"
           color="danger"
           icon="exclamation-triangle"
+          size="medium"
+          spin="false"
         />
         <span
           class="infoText"
@@ -800,15 +809,26 @@ exports[`CodeDiff > renders replaced code diff correctly 1`] = `
     >
       <div>
         <n8n-button-stub
+          active="false"
+          block="false"
           data-test-id="undo-replace-button"
+          disabled="false"
+          element="button"
           icon="undo"
+          label=""
+          loading="false"
+          outline="false"
           size="mini"
+          square="false"
+          text="false"
           type="secondary"
         />
         <n8n-icon-stub
           class="ml-xs"
           color="success"
           icon="check"
+          size="medium"
+          spin="false"
         />
         <span
           class="infoText"
@@ -1072,11 +1092,18 @@ exports[`CodeDiff > renders replacing code diff correctly 1`] = `
       class="actions"
     >
       <n8n-button-stub
+        active="false"
+        block="false"
         data-test-id="replace-code-button"
         disabled="false"
+        element="button"
         icon="refresh"
+        label=""
         loading="true"
+        outline="false"
         size="mini"
+        square="false"
+        text="false"
         type="secondary"
       />
     </div>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
index 0c9c4e0773..3cc40d1368 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -8,13 +8,13 @@ import N8nHeading from '../N8nHeading';
 import N8nText from '../N8nText';
 
 interface ActionBoxProps {
-	emoji: string;
-	heading: string;
+	emoji?: string;
+	heading?: string;
 	buttonText?: string;
 	buttonType?: ButtonType;
 	buttonDisabled?: boolean;
 	buttonIcon?: string;
-	description: string;
+	description?: string;
 	calloutText?: string;
 	calloutTheme?: CalloutTheme;
 	calloutIcon?: string;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 80c7944219..17d7ce595a 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -8,10 +8,11 @@
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import { ref, useCssModule, useAttrs, computed } from 'vue';
 
-import type { IconSize } from '@n8n/design-system/types/icon';
+import type { ActionDropdownItem, IconSize, ButtonSize } from '@n8n/design-system/types';
 
-import type { ActionDropdownItem } from '../../types';
+import N8nBadge from '../N8nBadge';
 import N8nIcon from '../N8nIcon';
+import N8nIconButton from '../N8nIconButton';
 import { N8nKeyboardShortcut } from '../N8nKeyboardShortcut';
 
 const TRIGGER = ['click', 'hover'] as const;
@@ -20,7 +21,7 @@ interface ActionDropdownProps {
 	items: ActionDropdownItem[];
 	placement?: Placement;
 	activatorIcon?: string;
-	activatorSize?: IconSize;
+	activatorSize?: ButtonSize;
 	iconSize?: IconSize;
 	trigger?: (typeof TRIGGER)[number];
 	hideArrow?: boolean;
@@ -96,7 +97,7 @@ defineExpose({ open, close });
 			@visible-change="onVisibleChange"
 		>
 			<slot v-if="$slots.activator" name="activator" />
-			<n8n-icon-button
+			<N8nIconButton
 				v-else
 				type="tertiary"
 				text
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
index 5035266042..eef65f7a8c 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -1,17 +1,18 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="UserType extends IUser, Actions extends UserAction<UserType>[]">
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import { ref } from 'vue';
 
-import type { UserAction } from '@n8n/design-system/types';
+import type { IUser, UserAction } from '@n8n/design-system/types';
 import type { IconOrientation, IconSize } from '@n8n/design-system/types/icon';
 
 import N8nIcon from '../N8nIcon';
+import N8nLoading from '../N8nLoading';
 
 const SIZE = ['mini', 'small', 'medium'] as const;
 const THEME = ['default', 'dark'] as const;
 
-interface ActionToggleProps {
-	actions?: UserAction[];
+interface ActionToggleProps<UserType extends IUser, Actions extends Array<UserAction<UserType>>> {
+	actions?: Actions;
 	placement?: Placement;
 	size?: (typeof SIZE)[number];
 	iconSize?: IconSize;
@@ -24,8 +25,10 @@ interface ActionToggleProps {
 	trigger?: 'click' | 'hover';
 }
 
+type ActionValue = Actions[number]['value'];
+
 defineOptions({ name: 'N8nActionToggle' });
-withDefaults(defineProps<ActionToggleProps>(), {
+withDefaults(defineProps<ActionToggleProps<UserType, Array<UserAction<UserType>>>>(), {
 	actions: () => [],
 	placement: 'bottom',
 	size: 'medium',
@@ -42,9 +45,9 @@ withDefaults(defineProps<ActionToggleProps>(), {
 const actionToggleRef = ref<InstanceType<typeof ElDropdown> | null>(null);
 
 const emit = defineEmits<{
-	action: [value: string];
+	action: [value: ActionValue];
 	'visible-change': [value: boolean];
-	'item-mouseup': [action: UserAction];
+	'item-mouseup': [action: UserAction<UserType>];
 }>();
 
 const onCommand = (value: string) => emit('action', value);
@@ -57,7 +60,7 @@ const openActionToggle = (isOpen: boolean) => {
 	}
 };
 
-const onActionMouseUp = (action: UserAction) => {
+const onActionMouseUp = (action: UserAction<UserType>) => {
 	emit('item-mouseup', action);
 	actionToggleRef.value?.handleClose();
 };
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.vue b/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.vue
index 675f81062e..a572bcb38e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.vue
@@ -5,8 +5,8 @@ import Avatar from 'vue-boring-avatars';
 import { getInitials } from '../../utils/labelUtil';
 
 interface AvatarProps {
-	firstName?: string;
-	lastName?: string;
+	firstName?: string | null;
+	lastName?: string | null;
 	size?: 'xsmall' | 'small' | 'medium' | 'large';
 	colors?: string[];
 }
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.vue b/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.vue
index a71618d3cd..b0e26e5987 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.vue
@@ -1,20 +1,10 @@
 <script lang="ts" setup>
-import type { TextSize } from '@n8n/design-system/types/text';
+import type { TextSize, BadgeTheme } from '@n8n/design-system/types/';
 
 import N8nText from '../N8nText';
 
-const THEME = [
-	'default',
-	'success',
-	'warning',
-	'danger',
-	'primary',
-	'secondary',
-	'tertiary',
-] as const;
-
 interface BadgeProps {
-	theme?: (typeof THEME)[number];
+	theme?: BadgeTheme;
 	size?: TextSize;
 	bold?: boolean;
 	showBorder?: boolean;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts
index 92fcbb2621..932c64af24 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts
@@ -1,6 +1,6 @@
 import type { StoryFn } from '@storybook/vue3';
 
-import type { UserAction } from '@n8n/design-system/types';
+import type { IUser, UserAction } from '@n8n/design-system/types';
 
 import AsyncLoadingCacheDemo from './AsyncLoadingCacheDemo.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
@@ -125,7 +125,7 @@ SyncLoadingCacheTest.args = {
 	title: '[Demo] This will update the hidden items every time dropdown is opened',
 };
 
-const testActions: UserAction[] = [
+const testActions: Array<UserAction<IUser>> = [
 	{ label: 'Create Folder', value: 'action1', disabled: false },
 	{ label: 'Create Workflow', value: 'action2', disabled: false },
 	{ label: 'Rename', value: 'action3', disabled: false },
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
index f5d3b2e600..3c4eed7352 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
@@ -1,9 +1,13 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="UserType extends IUser">
 import { computed, ref, watch } from 'vue';
 
-import type { UserAction } from '@n8n/design-system/types';
+import type { IUser, UserAction } from '@n8n/design-system/types';
 
+import N8nActionToggle from '../N8nActionToggle';
+import N8nLink from '../N8nLink';
 import N8nLoading from '../N8nLoading';
+import N8nText from '../N8nText';
+import N8nTooltip from '../N8nTooltip';
 
 export type PathItem = {
 	id: string;
@@ -66,7 +70,7 @@ const dropdownDisabled = computed(() => {
 	return props.pathTruncated && !hasHiddenItems.value;
 });
 
-const hiddenItemActions = computed((): UserAction[] => {
+const hiddenItemActions = computed((): Array<UserAction<UserType>> => {
 	return loadedHiddenItems.value.map((item) => ({
 		value: item.id,
 		label: item.label,
@@ -132,7 +136,7 @@ const emitItemHover = (id: string) => {
 	emit('itemHover', item);
 };
 
-const onHiddenItemMouseUp = (item: UserAction) => {
+const onHiddenItemMouseUp = (item: UserAction<UserType>) => {
 	const pathItem = [...props.items, ...loadedHiddenItems.value].find((i) => i.id === item.value);
 	if (!pathItem || !props.dragActive) {
 		return;
@@ -177,16 +181,13 @@ const handleTooltipClose = () => {
 			>
 				<!-- Show interactive dropdown for larger versions -->
 				<div v-if="props.theme !== 'small'" :class="$style['hidden-items-menu']">
-					<n8n-action-toggle
+					<N8nActionToggle
 						:actions="hiddenItemActions"
 						:loading="isLoadingHiddenItems"
 						:loading-row-count="loadingSkeletonRows"
 						:disabled="dropdownDisabled"
 						:class="$style['action-toggle']"
-						:popper-class="{
-							[$style['hidden-items-menu-popper']]: true,
-							[$style.dragging]: dragActive,
-						}"
+						:popper-class="`${$style['hidden-items-menu-popper']} ${dragActive ? $style.dragging : ''}`"
 						:trigger="hiddenItemsTrigger"
 						theme="dark"
 						placement="bottom"
@@ -197,11 +198,11 @@ const handleTooltipClose = () => {
 						@action="emitItemSelected"
 						@item-mouseup="onHiddenItemMouseUp"
 					>
-						<n8n-text :bold="true" :class="$style.dots">...</n8n-text>
-					</n8n-action-toggle>
+						<N8nText :bold="true" :class="$style.dots">...</N8nText>
+					</N8nActionToggle>
 				</div>
 				<!-- Just a tooltip for smaller versions -->
-				<n8n-tooltip
+				<N8nTooltip
 					v-else
 					:popper-class="$style.tooltip"
 					:disabled="dropdownDisabled"
@@ -222,12 +223,12 @@ const handleTooltipClose = () => {
 						</div>
 						<div v-else :class="$style.tooltipContent">
 							<div data-test-id="hidden-items-tooltip">
-								<n8n-text>{{ loadedHiddenItems.map((item) => item.label).join(' / ') }}</n8n-text>
+								<N8nText>{{ loadedHiddenItems.map((item) => item.label).join(' / ') }}</N8nText>
 							</div>
 						</div>
 					</template>
 					<span :class="$style['tooltip-ellipsis']">...</span>
-				</n8n-tooltip>
+				</N8nTooltip>
 			</li>
 			<li v-if="showEllipsis" :class="$style.separator">{{ separator }}</li>
 			<template v-for="(item, index) in items" :key="item.id">
@@ -245,8 +246,8 @@ const handleTooltipClose = () => {
 					@mouseenter="emitItemHover(item.id)"
 					@mouseup="onItemMouseUp(item)"
 				>
-					<n8n-link v-if="item.href" :href="item.href" theme="text">{{ item.label }}</n8n-link>
-					<n8n-text v-else>{{ item.label }}</n8n-text>
+					<N8nLink v-if="item.href" :href="item.href" theme="text">{{ item.label }}</N8nLink>
+					<N8nText v-else>{{ item.label }}</N8nText>
 				</li>
 				<li v-if="index !== items.length - 1" :class="$style.separator">
 					{{ separator }}
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
index 4cf356ca69..6afbab7e63 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, useAttrs, useCssModule, watchEffect } from 'vue';
 
+import type { IconSize } from '@n8n/design-system/types';
 import type { ButtonProps } from '@n8n/design-system/types/button';
 
 import N8nIcon from '../N8nIcon';
@@ -34,7 +35,10 @@ const ariaBusy = computed(() => (props.loading ? 'true' : undefined));
 const ariaDisabled = computed(() => (props.disabled ? 'true' : undefined));
 const isDisabled = computed(() => props.disabled || props.loading);
 
-const iconSize = computed(() => props.iconSize ?? (props.size === 'mini' ? 'xsmall' : props.size));
+const iconSize = computed(
+	(): IconSize | undefined =>
+		props.iconSize ?? (props.size === 'xmini' || props.size === 'mini' ? 'xsmall' : props.size),
+);
 
 const classes = computed(() => {
 	return (
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
index a91b5d7b21..3d755c17cb 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 
-import type { IconSize } from '@n8n/design-system/types/icon';
+import type { IconSize, CalloutTheme } from '@n8n/design-system/types';
 
 import N8nIcon from '../N8nIcon';
 import N8nText from '../N8nText';
 
-const THEMES = ['info', 'success', 'secondary', 'warning', 'danger', 'custom'] as const;
-export type CalloutTheme = (typeof THEMES)[number];
-
 const CALLOUT_DEFAULT_ICONS: Record<string, string> = {
 	info: 'info-circle',
 	success: 'check-circle',
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCallout/index.ts b/packages/frontend/@n8n/design-system/src/components/N8nCallout/index.ts
index a9ae0b25a9..23a98715c2 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCallout/index.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCallout/index.ts
@@ -1,3 +1,3 @@
 import N8nCallout from './Callout.vue';
-export type { CalloutTheme } from './Callout.vue';
+export type { CalloutTheme } from '../../types';
 export default N8nCallout;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue
index 92507fac8f..4e6730116d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue
@@ -32,7 +32,7 @@ import type {
 	Updater,
 } from '@tanstack/vue-table';
 import { createColumnHelper, FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table';
-import { ElCheckbox } from 'element-plus';
+import { ElCheckbox, ElOption, ElSelect, ElSkeletonItem } from 'element-plus';
 import get from 'lodash/get';
 import { computed, h, ref, shallowRef, useSlots, watch } from 'vue';
 
@@ -428,7 +428,7 @@ const table = useVueTable({
 									:key="coll.id"
 									class="el-skeleton is-animated"
 								>
-									<el-skeleton-item />
+									<ElSkeletonItem />
 								</td>
 							</tr>
 						</template>
@@ -470,14 +470,14 @@ const table = useVueTable({
 			</N8nPagination>
 			<div class="table-pagination__sizes">
 				<div class="table-pagination__sizes__label">Page size</div>
-				<el-select
+				<ElSelect
 					v-model.number="itemsPerPage"
 					class="table-pagination__sizes__select"
 					size="small"
 					:teleported="false"
 				>
-					<el-option v-for="item in pageSizes" :key="item" :label="item" :value="item" />
-				</el-select>
+					<ElOption v-for="item in pageSizes" :key="item" :label="item" :value="item" />
+				</ElSelect>
 			</div>
 		</div>
 	</div>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.vue b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.vue
index b90d456b01..4140616a8e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Item extends DatatableRow">
 import { computed, ref } from 'vue';
 
 import { useI18n } from '../../composables/useI18n';
@@ -13,7 +13,7 @@ const ALL_ROWS = -1;
 
 interface DatatableProps {
 	columns: DatatableColumn[];
-	rows: DatatableRow[];
+	rows: Item[];
 	currentPage?: number;
 	pagination?: boolean;
 	rowsPerPage?: number;
@@ -69,7 +69,7 @@ function onRowsPerPageChange(value: number) {
 	}
 }
 
-function getTdValue(row: DatatableRow, column: DatatableColumn) {
+function getTdValue(row: Item, column: DatatableColumn) {
 	return getValueByPath<DatatableRowDataType>(row, column.path);
 }
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue
index 337cb350bf..c545e39cb1 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import type { IFormInput } from '@n8n/design-system/types';
+import type {
+	FormFieldValue,
+	IFormInput,
+	FormFieldValueUpdate,
+	FormValues,
+} from '@n8n/design-system/types';
 
 import { createFormEventBus } from '../../utils';
 import N8nButton from '../N8nButton';
@@ -17,12 +22,10 @@ interface FormBoxProps {
 	redirectLink?: string;
 }
 
-type Value = string | number | boolean | null | undefined;
-
 defineOptions({ name: 'N8nFormBox' });
 withDefaults(defineProps<FormBoxProps>(), {
 	title: '',
-	inputs: () => [],
+	inputs: (): IFormInput[] => [],
 	buttonLoading: false,
 	redirectText: '',
 	redirectLink: '',
@@ -30,13 +33,13 @@ withDefaults(defineProps<FormBoxProps>(), {
 
 const formBus = createFormEventBus();
 const emit = defineEmits<{
-	submit: [value: { [key: string]: Value }];
-	update: [value: { name: string; value: Value }];
+	submit: [value: FormValues];
+	update: [value: FormFieldValueUpdate];
 	secondaryClick: [value: Event];
 }>();
 
-const onUpdateModelValue = (e: { name: string; value: Value }) => emit('update', e);
-const onSubmit = (e: { [key: string]: Value }) => emit('submit', e);
+const onUpdateModelValue = (e: { name: string; value: FormFieldValue }) => emit('update', e);
+const onSubmit = (e: { [key: string]: FormFieldValue }) => emit('submit', e);
 const onButtonClick = () => formBus.emit('submit');
 const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
 </script>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue b/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue
index 4932b274bf..42b5724b67 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElSwitch } from 'element-plus';
-import { computed, reactive, onMounted, ref, watch, useSlots } from 'vue';
+import { computed, reactive, onMounted, ref, watch } from 'vue';
 
 import { getValidationError, VALIDATORS } from './validators';
 import { t } from '../../locale';
@@ -19,6 +19,7 @@ import type {
 import N8nCheckbox from '../N8nCheckbox';
 import N8nInput from '../N8nInput';
 import N8nInputLabel from '../N8nInputLabel';
+import N8nLink from '../N8nLink';
 import N8nOption from '../N8nOption';
 import N8nSelect from '../N8nSelect';
 
@@ -77,8 +78,6 @@ const state = reactive({
 	isTyping: false,
 });
 
-const slots = useSlots();
-
 const inputRef = ref<HTMLTextAreaElement | null>(null);
 
 function getInputValidationError(): ReturnType<IValidator['validate']> {
@@ -160,8 +159,6 @@ const validationError = computed<{ message: string } | null>(() => {
 	return null;
 });
 
-const hasDefaultSlot = computed(() => !!slots.default);
-
 const showErrors = computed(
 	() =>
 		!!validationError.value &&
@@ -217,7 +214,7 @@ defineExpose({ inputRef });
 		:size="labelSize"
 	>
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter.exact="onEnter">
-			<slot v-if="hasDefaultSlot" />
+			<slot v-if="$slots.default" />
 			<N8nSelect
 				v-else-if="type === 'select' || type === 'multi-select'"
 				ref="inputRef"
@@ -261,7 +258,7 @@ defineExpose({ inputRef });
 		</div>
 		<div v-if="showErrors" :class="$style.errors">
 			<span v-text="validationError?.message" />
-			<n8n-link
+			<N8nLink
 				v-if="documentationUrl && documentationText"
 				:to="documentationUrl"
 				:new-window="true"
@@ -269,7 +266,7 @@ defineExpose({ inputRef });
 				theme="danger"
 			>
 				{{ documentationText }}
-			</n8n-link>
+			</N8nLink>
 		</div>
 		<div v-else-if="infoText" :class="$style.infoText">
 			<span size="small" v-text="infoText" />
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.vue
index 261663de32..e2b4d759a2 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 
-import type { IFormInput } from '../../types';
+import type { FormFieldValue, IFormInput, FormFieldValueUpdate, FormValues } from '../../types';
 import type { FormEventBus } from '../../utils';
 import { createFormEventBus } from '../../utils';
 import N8nFormInput from '../N8nFormInput';
+import N8nText from '../N8nText';
 import ResizeObserver from '../ResizeObserver';
 
-export type FormInputsProps = {
-	inputs?: IFormInput[];
+export interface FormInputsProps {
+	inputs: IFormInput[];
 	eventBus?: FormEventBus;
 	columnView?: boolean;
 	verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
 	teleported?: boolean;
-};
-
-type Value = string | number | boolean | null | undefined;
+}
 
 const props = withDefaults(defineProps<FormInputsProps>(), {
-	inputs: () => [],
 	eventBus: createFormEventBus,
 	columnView: false,
 	verticalSpacing: '',
@@ -26,14 +24,14 @@ const props = withDefaults(defineProps<FormInputsProps>(), {
 });
 
 const emit = defineEmits<{
-	update: [value: { name: string; value: Value }];
-	'update:modelValue': [value: Record<string, Value>];
-	submit: [value: Record<string, Value>];
+	update: [value: FormFieldValueUpdate];
+	'update:modelValue': [value: FormValues];
+	submit: [value: FormValues];
 	ready: [value: boolean];
 }>();
 
 const showValidationWarnings = ref(false);
-const values = reactive<Record<string, Value>>({});
+const values = reactive<FormValues>({});
 const validity = ref<Record<string, boolean>>({});
 
 const filteredInputs = computed(() => {
@@ -50,7 +48,7 @@ watch(isReadyToSubmit, (ready) => {
 	emit('ready', ready);
 });
 
-function onUpdateModelValue(name: string, value: Value) {
+function onUpdateModelValue(name: string, value: FormFieldValue) {
 	values[name] = value;
 	emit('update', { name, value });
 	emit('update:modelValue', values);
@@ -76,12 +74,15 @@ function onSubmit() {
 		return;
 	}
 
-	const toSubmit = filteredInputs.value.reduce<Record<string, Value>>((valuesToSubmit, input) => {
-		if (values[input.name]) {
-			valuesToSubmit[input.name] = values[input.name];
-		}
-		return valuesToSubmit;
-	}, {});
+	const toSubmit = filteredInputs.value.reduce<Record<string, FormFieldValue>>(
+		(valuesToSubmit, input) => {
+			if (values[input.name]) {
+				valuesToSubmit[input.name] = values[input.name];
+			}
+			return valuesToSubmit;
+		},
+		{},
+	);
 
 	emit('submit', toSubmit);
 }
@@ -108,7 +109,7 @@ onMounted(() => {
 					:key="input.name"
 					:class="{ [`mt-${verticalSpacing}`]: verticalSpacing && index > 0 }"
 				>
-					<n8n-text
+					<N8nText
 						v-if="input.properties.type === 'info'"
 						color="text-base"
 						tag="div"
@@ -117,7 +118,7 @@ onMounted(() => {
 						class="form-text"
 					>
 						{{ input.properties.label }}
-					</n8n-text>
+					</N8nText>
 					<N8nFormInput
 						v-else
 						v-bind="input.properties"
@@ -127,7 +128,7 @@ onMounted(() => {
 						:data-test-id="input.name"
 						:show-validation-warnings="showValidationWarnings"
 						:teleported="teleported"
-						@update:model-value="(value: Value) => onUpdateModelValue(input.name, value)"
+						@update:model-value="(value: FormFieldValue) => onUpdateModelValue(input.name, value)"
 						@validate="(value: boolean) => onValidate(input.name, value)"
 						@enter="onSubmit"
 					/>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
index f3295ba5e6..71efa28b20 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
@@ -60,6 +60,7 @@ describe('IconPicker', () => {
 			global: {
 				plugins: [router],
 				components,
+				stubs: ['N8nButton'],
 			},
 		});
 		const TEST_EMOJI_COUNT = 1962;
@@ -90,11 +91,12 @@ describe('IconPicker', () => {
 			global: {
 				plugins: [router],
 				components,
+				stubs: ['N8nButton'],
 			},
 		});
 		await userEvent.hover(getByTestId('icon-picker-button'));
 		expect(getByRole('tooltip').textContent).toBe(TOOLTIP);
-		expect(getByTestId('icon-picker-button').dataset.icon).toBe(ICON);
+		expect(getByTestId('icon-picker-button')).toHaveAttribute('icon', ICON);
 	});
 	it('renders emoji as default icon correctly', async () => {
 		const ICON = '🔥';
@@ -124,6 +126,7 @@ describe('IconPicker', () => {
 			global: {
 				plugins: [router],
 				components,
+				stubs: ['N8nButton'],
 			},
 		});
 		expect(queryByTestId('tab-icons')).not.toBeInTheDocument();
@@ -138,13 +141,14 @@ describe('IconPicker', () => {
 			global: {
 				plugins: [router],
 				components,
+				stubs: ['N8nButton'],
 			},
 		});
 		await fireEvent.click(getByTestId('icon-picker-button'));
 		// Select the first icon
 		await fireEvent.click(getAllByTestId('icon-picker-icon')[0]);
 		// Icon should be selected and popup should be closed
-		expect(getByTestId('icon-picker-button').dataset.icon).toBe(TEST_ICONS[0]);
+		expect(getByTestId('icon-picker-button')).toHaveAttribute('icon', TEST_ICONS[0]);
 		expect(queryByTestId('icon-picker-popup')).toBeNull();
 		expect(emitted()).toHaveProperty('update:modelValue');
 		// Should emit the selected icon
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
index cea6f197c3..c327bb15f9 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
@@ -6,6 +6,10 @@ import { isEmojiSupported } from 'is-emoji-supported';
 import { ref, computed } from 'vue';
 
 import { useI18n } from '../../composables/useI18n';
+import N8nButton from '../N8nButton';
+import N8nIcon from '../N8nIcon';
+import N8nIconButton from '../N8nIconButton';
+import N8nTabs from '../N8nTabs';
 import N8nTooltip from '../N8nTooltip';
 
 /**
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index 456a0c4cfe..4e37d88038 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -6,13 +6,14 @@ import type { IconColor } from '@n8n/design-system/types/icon';
 
 import N8nIcon from '../N8nIcon';
 import N8nText from '../N8nText';
+import N8nTooltip from '../N8nTooltip';
 
-interface IAccordionItem {
+export interface IAccordionItem {
 	id: string;
 	label: string;
 	icon: string;
 	iconColor?: IconColor;
-	tooltip?: string;
+	tooltip?: string | null;
 }
 
 interface InfoAccordionProps {
@@ -69,12 +70,12 @@ const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick',
 			<!-- Info accordion can display list of items with icons or just a HTML description -->
 			<div v-if="items.length > 0" :class="$style.accordionItems">
 				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
-					<n8n-tooltip :disabled="!item.tooltip">
+					<N8nTooltip :disabled="!item.tooltip">
 						<template #content>
 							<div v-n8n-html="item.tooltip" @click="onTooltipClick(item.id, $event)"></div>
 						</template>
 						<N8nIcon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
-					</n8n-tooltip>
+					</N8nTooltip>
 					<N8nText size="small" color="text-base">{{ item.label }}</N8nText>
 				</div>
 			</div>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue b/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
index b622a349cd..88b058cbc6 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
@@ -8,7 +8,7 @@ import type { InputSize, InputType } from '@n8n/design-system/types/input';
 import { uid } from '../../utils';
 
 interface InputProps {
-	modelValue?: string | number;
+	modelValue?: string | number | null;
 	type?: InputType;
 	size?: InputSize;
 	placeholder?: string;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue
index 3688cc0265..8979f87df5 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -12,7 +12,7 @@ import { escapeMarkdown, toggleCheckbox } from '../../utils/markdown';
 import N8nLoading from '../N8nLoading';
 
 interface IImage {
-	id: string;
+	id: string | number;
 	url: string;
 }
 
@@ -24,7 +24,7 @@ interface Options {
 }
 
 interface MarkdownProps {
-	content?: string;
+	content?: string | null;
 	withMultiBreaks?: boolean;
 	images?: IImage[];
 	loading?: boolean;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.vue
index f22bcd8827..cdba4dd4ff 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElSubMenu, ElMenuItem } from 'element-plus';
-import { computed, useCssModule } from 'vue';
+import { computed, useCssModule, getCurrentInstance } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { doesMenuItemMatchCurrentRoute } from './routerUtil';
@@ -8,6 +8,7 @@ import type { IMenuItem } from '../../types';
 import { getInitials } from '../../utils/labelUtil';
 import ConditionalRouterLink from '../ConditionalRouterLink';
 import N8nIcon from '../N8nIcon';
+import N8nSpinner from '../N8nSpinner';
 import N8nTooltip from '../N8nTooltip';
 
 interface MenuItemProps {
@@ -61,6 +62,9 @@ const isItemActive = (item: IMenuItem): boolean => {
 		Array.isArray(item.children) && item.children.some((child) => isActive(child));
 	return isActive(item) || hasActiveChild;
 };
+
+// Get self component to avoid dependency cycle
+const N8nMenuItem = getCurrentInstance()?.type;
 </script>
 
 <template>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index ae48582a1b..1cd6c72eab 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import type { Placement } from 'element-plus';
-import { computed } from 'vue';
+import { computed, getCurrentInstance } from 'vue';
 
 import N8nTooltip from '../N8nTooltip';
 
+type IconType = 'file' | 'icon' | 'unknown';
+
 interface NodeIconProps {
-	type: 'file' | 'icon' | 'unknown';
+	type: IconType;
 	src?: string;
 	name?: string;
 	nodeTypeName?: string;
@@ -16,7 +18,7 @@ interface NodeIconProps {
 	color?: string;
 	showTooltip?: boolean;
 	tooltipPosition?: Placement;
-	badge?: { src: string; type: string };
+	badge?: { src: string; type: IconType };
 }
 
 const props = withDefaults(defineProps<NodeIconProps>(), {
@@ -69,6 +71,9 @@ const badgeStyleData = computed((): Record<string, string> => {
 		bottom: `-${Math.floor(size / 2)}px`,
 	};
 });
+
+// Get self component to avoid dependency cycle
+const N8nNodeIcon = getCurrentInstance()?.type;
 </script>
 
 <template>
@@ -97,7 +102,7 @@ const badgeStyleData = computed((): Record<string, string> => {
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
 					<FontAwesomeIcon v-else :icon="`${name}`" :style="fontStyleData" />
 					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
-						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
+						<N8nNodeIcon :type="badge.type" :src="badge.src" :size="badgeSize" />
 					</div>
 				</div>
 				<div v-else :class="$style.nodeIconPlaceholder">
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index e5959f0ebc..2f7ac72225 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup generic="Value extends string">
+<script lang="ts" setup generic="Value extends string | boolean">
 import RadioButton from './RadioButton.vue';
 
 interface RadioOption {
@@ -47,8 +47,9 @@ const onClick = (
 	>
 		<RadioButton
 			v-for="option in options"
-			:key="option.value"
+			:key="`${option.value}`"
 			v-bind="option"
+			:value="`${option.value}`"
 			:active="modelValue === option.value"
 			:size="size"
 			:disabled="disabled || option.disabled"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue b/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
index 3a5d798ad9..0b6a5cbd7e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
@@ -1,11 +1,13 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Key extends string, Item extends ItemWithKey<Key>">
 import type { ComponentPublicInstance } from 'vue';
 import { computed, onMounted, onBeforeMount, ref, nextTick, watch } from 'vue';
 
+import type { ItemWithKey } from '@n8n/design-system/types';
+
 interface RecycleScrollerProps {
 	itemSize: number;
-	items: Array<Record<string, string>>;
-	itemKey: string;
+	items: Item[];
+	itemKey: Key;
 	offset?: number;
 }
 
@@ -24,18 +26,21 @@ const windowHeight = ref(0);
 
 /** Cache */
 
-const itemSizeCache = ref<Record<string, number>>({});
+const itemSizeCache = ref<Record<Item[Key], number>>({} as Record<Item[Key], number>);
 const itemPositionCache = computed(() => {
-	return props.items.reduce<Record<string, number>>((acc, item, index) => {
-		const key = item[props.itemKey];
-		const prevItem = props.items[index - 1];
-		const prevItemPosition = prevItem ? acc[prevItem[props.itemKey]] : 0;
-		const prevItemSize = prevItem ? itemSizeCache.value[prevItem[props.itemKey]] : 0;
+	return props.items.reduce<Record<Item[Key], number>>(
+		(acc, item, index) => {
+			const key = item[props.itemKey];
+			const prevItem = props.items[index - 1];
+			const prevItemPosition = prevItem ? acc[prevItem[props.itemKey]] : 0;
+			const prevItemSize = prevItem ? itemSizeCache.value[prevItem[props.itemKey]] : 0;
 
-		acc[key] = prevItemPosition + prevItemSize;
+			acc[key] = prevItemPosition + prevItemSize;
 
-		return acc;
-	}, {});
+			return acc;
+		},
+		{} as Record<Item[Key], number>,
+	);
 });
 
 /** Indexes */
@@ -186,7 +191,7 @@ function onScroll() {
 				<div
 					v-for="item in visibleItems"
 					:key="item[itemKey]"
-					:ref="(element) => (itemRefs[item[itemKey]] = element)"
+					:ref="(element) => (itemRefs[`${item[itemKey]}`] = element)"
 					class="recycle-scroller-item"
 				>
 					<slot :item="item" :update-item-size="onUpdateItemSize" />
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.test.ts
index ea307826d4..d9536a7ce2 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.test.ts
@@ -8,6 +8,9 @@ describe('N8nRoute', () => {
 			props: {
 				to: '/test',
 			},
+			global: {
+				stubs: ['RouterLink'],
+			},
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
@@ -18,6 +21,9 @@ describe('N8nRoute', () => {
 				to: '/test',
 				newWindow: true,
 			},
+			global: {
+				stubs: ['RouterLink'],
+			},
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
@@ -27,6 +33,9 @@ describe('N8nRoute', () => {
 			props: {
 				to: 'https://example.com/',
 			},
+			global: {
+				stubs: ['RouterLink'],
+			},
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.vue b/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.vue
index 07fe1f3c28..dea475fbb5 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRoute/Route.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
+import { RouterLink, type RouteLocationRaw } from 'vue-router';
 
 interface RouteProps {
 	to?: RouteLocationRaw | string;
@@ -27,9 +27,9 @@ const openNewWindow = computed(() => !useRouterLink.value);
 </script>
 
 <template>
-	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
+	<RouterLink v-if="useRouterLink && to" :to="to" role="link" v-bind="$attrs">
 		<slot></slot>
-	</router-link>
+	</RouterLink>
 	<a
 		v-else
 		:href="to ? `${to}` : undefined"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRoute/__snapshots__/Route.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nRoute/__snapshots__/Route.test.ts.snap
index c9e658ff2b..15e32cb9b7 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRoute/__snapshots__/Route.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRoute/__snapshots__/Route.test.ts.snap
@@ -4,4 +4,4 @@ exports[`N8nRoute > should render external links 1`] = `"<a href="https://exampl
 
 exports[`N8nRoute > should render internal links with newWindow=true 1`] = `"<a href="/test" target="_blank"></a>"`;
 
-exports[`N8nRoute > should render internal router links 1`] = `"<router-link to="/test"></router-link>"`;
+exports[`N8nRoute > should render internal router links 1`] = `"<router-link-stub to="/test" replace="false" custom="false" ariacurrentvalue="page" role="link"></router-link-stub>"`;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue
index e695ed477f..db3754ef8c 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 
 import { useI18n } from '../../composables/useI18n';
+import N8nIcon from '../N8nIcon';
 
 const { t } = useI18n();
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue b/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue
index afd72e1a8c..06646ab75f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { TextSize } from '@n8n/design-system/types/text';
+import type { IconSize } from '@n8n/design-system/types';
 
 import N8nIcon from '../N8nIcon';
 
 const TYPE = ['dots', 'ring'] as const;
 
 interface SpinnerProps {
-	size?: Exclude<TextSize, 'mini' | 'xlarge'>;
+	size?: IconSize;
 	type?: (typeof TYPE)[number];
 }
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
index 2735e95d0e..284d90d0c0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
@@ -1,26 +1,19 @@
 <script lang="ts" setup generic="Value extends string | number">
 import { onMounted, onUnmounted, ref } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import { RouterLink } from 'vue-router';
 
+import type { TabOptions } from '../../types';
 import N8nIcon from '../N8nIcon';
-
-interface TabOptions {
-	value: Value;
-	label?: string;
-	icon?: string;
-	href?: string;
-	tooltip?: string;
-	align?: 'left' | 'right';
-	to?: RouteLocationRaw;
-}
+import N8nTooltip from '../N8nTooltip';
 
 interface TabsProps {
 	modelValue?: Value;
-	options?: TabOptions[];
+	options?: Array<TabOptions<Value>>;
 	size?: 'small' | 'medium';
 }
 
 withDefaults(defineProps<TabsProps>(), {
+	modelValue: undefined,
 	options: () => [],
 	size: 'medium',
 });
@@ -108,14 +101,14 @@ const scrollRight = () => scroll(50);
 							</span>
 						</div>
 					</a>
-					<router-link
+					<RouterLink
 						v-else-if="option.to"
 						:to="option.to"
 						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
 					>
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
 						<span v-if="option.label">{{ option.label }}</span>
-					</router-link>
+					</RouterLink>
 					<div
 						v-else
 						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.vue b/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.vue
index 502348bbc1..fb2e5d200e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.vue
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<TagsProp>(), {
 
 const emit = defineEmits<{
 	expand: [value: boolean];
-	'click:tag': [tagId: string, e: MouseEvent];
+	'click:tag': [tagId: string, e: PointerEvent];
 }>();
 
 const { t } = useI18n();
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.vue b/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.vue
index 756fd627ff..4377b8d8ed 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup generic="Value extends unknown = unknown">
-import { computed, useCssModule } from 'vue';
+import { computed, getCurrentInstance, useCssModule } from 'vue';
 
 interface TreeProps {
 	value?: Record<string, Value>;
@@ -52,20 +52,23 @@ const getPath = (key: string): Array<string | number> => {
 	}
 	return [...props.path, key];
 };
+
+// Get self component to avoid dependency cycle
+const N8nTree = getCurrentInstance()?.type;
 </script>
 
 <template>
 	<div v-if="isObject(value)" class="n8n-tree">
 		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
 			<div v-if="isSimple(value[label])" :class="$style.simple">
-				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
+				<slot v-if="!!$slots.label" name="label" :label="label" :path="getPath(label)" />
 				<span v-else>{{ label }}</span>
 				<span>:</span>
-				<slot v-if="$slots.value" name="value" :value="value[label]" />
+				<slot v-if="!!$slots.value" name="value" :value="value[label]" />
 				<span v-else>{{ value[label] }}</span>
 			</div>
 			<div v-else>
-				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
+				<slot v-if="!!$slots.label" name="label" :label="label" :path="getPath(label)" />
 				<span v-else>{{ label }}</span>
 				<N8nTree
 					v-if="isObject(value[label])"
@@ -74,11 +77,11 @@ const getPath = (key: string): Array<string | number> => {
 					:value="value[label]"
 					:node-class="nodeClass"
 				>
-					<template v-if="$slots.label" #label="data">
+					<template v-if="!!$slots.label" #label="data">
 						<slot name="label" v-bind="data" />
 					</template>
 
-					<template v-if="$slots.value" #value="data">
+					<template v-if="!!$slots.value" #value="data">
 						<slot name="value" v-bind="data" />
 					</template>
 				</N8nTree>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue
index f34818d2a0..708c6562d0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue
@@ -7,9 +7,9 @@ import N8nBadge from '../N8nBadge';
 import N8nText from '../N8nText';
 
 interface UsersInfoProps {
-	firstName?: string;
-	lastName?: string;
-	email?: string;
+	firstName?: string | null;
+	lastName?: string | null;
+	email?: string | null;
 	isOwner?: boolean;
 	isPendingUser?: boolean;
 	isCurrentUser?: boolean;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.vue
index e4c289a67d..95b3d21110 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -74,7 +74,7 @@ const onBlur = () => emit('blur');
 const onFocus = () => emit('focus');
 
 const getLabel = (user: IUser) =>
-	!user.fullName ? user.email : `${user.fullName} (${user.email})`;
+	(!user.fullName ? user.email : `${user.fullName} (${user.email})`) ?? '';
 </script>
 
 <template>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue b/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue
index ab771c3726..7522516be5 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
 import { computed } from 'vue';
 
 import type { IUser, UserStackGroups } from '@n8n/design-system/types';
@@ -9,7 +10,7 @@ import N8nUserInfo from '../N8nUserInfo';
 const props = withDefaults(
 	defineProps<{
 		users: UserStackGroups;
-		currentUserEmail?: string;
+		currentUserEmail?: string | null;
 		maxAvatars?: number;
 		dropdownTrigger?: 'hover' | 'click';
 	}>(),
@@ -63,7 +64,7 @@ const menuHeight = computed(() => {
 
 <template>
 	<div class="user-stack" data-test-id="user-stack-container">
-		<el-dropdown
+		<ElDropdown
 			:trigger="$props.dropdownTrigger"
 			:max-height="menuHeight"
 			popper-class="user-stack-popper"
@@ -81,14 +82,14 @@ const menuHeight = computed(() => {
 				<div v-if="hiddenUsersCount > 0" :class="$style.hiddenBadge">+{{ hiddenUsersCount }}</div>
 			</div>
 			<template #dropdown>
-				<el-dropdown-menu class="user-stack-list" data-test-id="user-stack-list">
+				<ElDropdownMenu class="user-stack-list" data-test-id="user-stack-list">
 					<div v-for="(groupUsers, index) in nonEmptyGroups" :key="index">
 						<div :class="$style.groupContainer">
-							<el-dropdown-item>
+							<ElDropdownItem>
 								<header v-if="groupCount > 1" :class="$style.groupName">{{ index }}</header>
-							</el-dropdown-item>
+							</ElDropdownItem>
 							<div :class="$style.groupUsers">
-								<el-dropdown-item
+								<ElDropdownItem
 									v-for="user in groupUsers"
 									:key="user.id"
 									:data-test-id="`user-stack-info-${user.id}`"
@@ -98,13 +99,13 @@ const menuHeight = computed(() => {
 										v-bind="user"
 										:is-current-user="user.email === props.currentUserEmail"
 									/>
-								</el-dropdown-item>
+								</ElDropdownItem>
 							</div>
 						</div>
 					</div>
-				</el-dropdown-menu>
+				</ElDropdownMenu>
 			</template>
-		</el-dropdown>
+		</ElDropdown>
 	</div>
 </template>
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.vue b/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.vue
index d4bbdfe91e..0068494728 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="UserType extends IUser = IUser">
 import { computed } from 'vue';
 
 import { useI18n } from '../../composables/useI18n';
@@ -8,10 +8,10 @@ import N8nBadge from '../N8nBadge';
 import N8nUserInfo from '../N8nUserInfo';
 
 interface UsersListProps {
-	users: IUser[];
+	users: UserType[];
 	readonly?: boolean;
-	currentUserId?: string;
-	actions?: UserAction[];
+	currentUserId?: string | null;
+	actions?: Array<UserAction<UserType>>;
 	isSamlLoginEnabled?: boolean;
 }
 
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<UsersListProps>(), {
 const { t } = useI18n();
 
 const sortedUsers = computed(() =>
-	[...props.users].sort((a: IUser, b: IUser) => {
+	[...props.users].sort((a: UserType, b: UserType) => {
 		if (!a.email || !b.email) {
 			throw new Error('Expected all users to have email');
 		}
@@ -64,7 +64,7 @@ const sortedUsers = computed(() =>
 );
 
 const defaultGuard = () => true;
-const getActions = (user: IUser): UserAction[] => {
+const getActions = (user: UserType): Array<UserAction<UserType>> => {
 	if (user.isOwner) return [];
 
 	return props.actions.filter((action) => (action.guard ?? defaultGuard)(user));
@@ -73,7 +73,7 @@ const getActions = (user: IUser): UserAction[] => {
 const emit = defineEmits<{
 	action: [value: { action: string; userId: string }];
 }>();
-const onUserAction = (user: IUser, action: string) =>
+const onUserAction = (user: UserType, action: string) =>
 	emit('action', {
 		action,
 		userId: user.id,
@@ -101,7 +101,7 @@ const onUserAction = (user: IUser, action: string) =>
 				<N8nActionToggle
 					v-if="
 						!user.isOwner &&
-						!['ldap'].includes(user.signInType) &&
+						user.signInType !== 'ldap' &&
 						!readonly &&
 						getActions(user).length > 0 &&
 						actions.length > 0
diff --git a/packages/frontend/@n8n/design-system/src/plugin.ts b/packages/frontend/@n8n/design-system/src/plugin.ts
index 446dc579dc..103c187bc8 100644
--- a/packages/frontend/@n8n/design-system/src/plugin.ts
+++ b/packages/frontend/@n8n/design-system/src/plugin.ts
@@ -1,16 +1,11 @@
-import type { Component, Plugin } from 'vue';
+import type { Plugin } from 'vue';
 
-import * as components from './components';
 import * as directives from './directives';
 
 export interface N8nPluginOptions {}
 
 export const N8nPlugin: Plugin<N8nPluginOptions> = {
 	install: (app) => {
-		for (const [name, component] of Object.entries(components)) {
-			app.component(name, component as unknown as Component);
-		}
-
 		for (const [name, directive] of Object.entries(directives)) {
 			app.directive(name, directive);
 		}
diff --git a/packages/frontend/@n8n/design-system/src/types/badge.ts b/packages/frontend/@n8n/design-system/src/types/badge.ts
new file mode 100644
index 0000000000..fd740ab9ce
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/types/badge.ts
@@ -0,0 +1,10 @@
+const BADGE_THEME = [
+	'default',
+	'success',
+	'warning',
+	'danger',
+	'primary',
+	'secondary',
+	'tertiary',
+] as const;
+export type BadgeTheme = (typeof BADGE_THEME)[number];
diff --git a/packages/frontend/@n8n/design-system/src/types/button.ts b/packages/frontend/@n8n/design-system/src/types/button.ts
index 247d8740ce..9f21adbb9a 100644
--- a/packages/frontend/@n8n/design-system/src/types/button.ts
+++ b/packages/frontend/@n8n/design-system/src/types/button.ts
@@ -7,7 +7,7 @@ export type ButtonElement = (typeof BUTTON_ELEMENT)[number];
 const BUTTON_TYPE = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'] as const;
 export type ButtonType = (typeof BUTTON_TYPE)[number];
 
-const BUTTON_SIZE = ['mini', 'small', 'medium', 'large'] as const;
+const BUTTON_SIZE = ['xmini', 'mini', 'small', 'medium', 'large'] as const;
 export type ButtonSize = (typeof BUTTON_SIZE)[number];
 
 const BUTTON_NATIVE_TYPE = ['submit', 'reset', 'button'] as const;
@@ -21,7 +21,7 @@ export interface IconButtonProps {
 	loading?: boolean;
 	outline?: boolean;
 	size?: ButtonSize;
-	iconSize?: Exclude<IconSize, 'xlarge'>;
+	iconSize?: IconSize;
 	text?: boolean;
 	type?: ButtonType;
 	nativeType?: ButtonNativeType;
diff --git a/packages/frontend/@n8n/design-system/src/types/callout.ts b/packages/frontend/@n8n/design-system/src/types/callout.ts
new file mode 100644
index 0000000000..ba909867f7
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/types/callout.ts
@@ -0,0 +1,2 @@
+const CALLOUT_THEMES = ['info', 'success', 'secondary', 'warning', 'danger', 'custom'] as const;
+export type CalloutTheme = (typeof CALLOUT_THEMES)[number];
diff --git a/packages/frontend/@n8n/design-system/src/types/datatable.ts b/packages/frontend/@n8n/design-system/src/types/datatable.ts
index 751dab559e..6468d91ed3 100644
--- a/packages/frontend/@n8n/design-system/src/types/datatable.ts
+++ b/packages/frontend/@n8n/design-system/src/types/datatable.ts
@@ -4,7 +4,7 @@ export type DatatableRowDataType = string | number | boolean | null | undefined;
 
 export interface DatatableRow {
 	id: string | number;
-	[key: string]: DatatableRowDataType | Record<string, DatatableRowDataType>;
+	[key: string]: unknown;
 }
 
 export interface DatatableColumn {
diff --git a/packages/frontend/@n8n/design-system/src/types/form.ts b/packages/frontend/@n8n/design-system/src/types/form.ts
index 742e6b1bd0..aa2c3d630a 100644
--- a/packages/frontend/@n8n/design-system/src/types/form.ts
+++ b/packages/frontend/@n8n/design-system/src/types/form.ts
@@ -1,5 +1,13 @@
 import type { N8nLocaleTranslateFnOptions } from '@n8n/design-system/types/i18n';
 
+export type FormFieldValue = string | number | boolean | null | undefined;
+
+export type FormInputsToFormValues<T extends IFormInput[], V> = {
+	[K in T[number]['name']]: V;
+};
+
+export type FormFieldValueUpdate = { name: string; value: FormFieldValue };
+
 export type Rule = { name: string; config?: unknown };
 
 export type RuleGroup = {
@@ -65,6 +73,8 @@ export type IFormInput = {
 
 export type IFormInputs = IFormInput[];
 
+export type FormValues = FormInputsToFormValues<IFormInput[], FormFieldValue>;
+
 export type IFormBoxConfig = {
 	title: string;
 	buttonText?: string;
diff --git a/packages/frontend/@n8n/design-system/src/types/index.ts b/packages/frontend/@n8n/design-system/src/types/index.ts
index ec9f0cdb6d..39c4cbf0e5 100644
--- a/packages/frontend/@n8n/design-system/src/types/index.ts
+++ b/packages/frontend/@n8n/design-system/src/types/index.ts
@@ -1,12 +1,19 @@
 export * from './action-dropdown';
+export * from './assistant';
+export * from './badge';
 export * from './button';
+export * from './callout';
 export * from './datatable';
 export * from './form';
 export * from './i18n';
+export * from './icon';
 export * from './input';
-export * from './menu';
-export * from './select';
-export * from './user';
 export * from './keyboardshortcut';
+export * from './menu';
 export * from './node-creator-node';
+export * from './recycle-scroller';
 export * from './resize';
+export * from './select';
+export * from './tabs';
+export * from './text';
+export * from './user';
diff --git a/packages/frontend/@n8n/design-system/src/types/recycle-scroller.ts b/packages/frontend/@n8n/design-system/src/types/recycle-scroller.ts
new file mode 100644
index 0000000000..5cf4bd63e7
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/types/recycle-scroller.ts
@@ -0,0 +1,5 @@
+export type ItemWithKey<Key extends string> = {
+	[K in Key]: string;
+} & {
+	[key: string]: unknown;
+};
diff --git a/packages/frontend/@n8n/design-system/src/types/tabs.ts b/packages/frontend/@n8n/design-system/src/types/tabs.ts
new file mode 100644
index 0000000000..68dfa3eccb
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/types/tabs.ts
@@ -0,0 +1,11 @@
+import type { RouteLocationRaw } from 'vue-router';
+
+export interface TabOptions<Value extends string | number> {
+	value: Value;
+	label?: string;
+	icon?: string;
+	href?: string;
+	tooltip?: string;
+	align?: 'left' | 'right';
+	to?: RouteLocationRaw;
+}
diff --git a/packages/frontend/@n8n/design-system/src/types/user.ts b/packages/frontend/@n8n/design-system/src/types/user.ts
index 4af8b52dbc..20330eec17 100644
--- a/packages/frontend/@n8n/design-system/src/types/user.ts
+++ b/packages/frontend/@n8n/design-system/src/types/user.ts
@@ -1,23 +1,24 @@
-export interface IUser {
+export type IUser = {
 	id: string;
-	firstName?: string;
-	lastName?: string;
+	firstName?: string | null;
+	lastName?: string | null;
 	fullName?: string;
-	email?: string;
-	isOwner: boolean;
-	isPendingUser: boolean;
+	role?: string;
+	email?: string | null;
+	signInType?: string;
+	isOwner?: boolean;
+	isPendingUser?: boolean;
 	inviteAcceptUrl?: string;
-	disabled: boolean;
-	signInType: string;
-}
+	disabled?: boolean;
+};
 
-export interface UserAction {
+export interface UserAction<UserType extends IUser> {
 	label: string;
 	value: string;
-	disabled: boolean;
+	disabled?: boolean;
 	type?: 'external-link';
 	tooltip?: string;
-	guard?: (user: IUser) => boolean;
+	guard?: (user: UserType) => boolean;
 }
 
 export type UserStackGroups = { [groupName: string]: IUser[] };
diff --git a/packages/frontend/editor-ui/package.json b/packages/frontend/editor-ui/package.json
index 6a7fd16668..8193ce9d40 100644
--- a/packages/frontend/editor-ui/package.json
+++ b/packages/frontend/editor-ui/package.json
@@ -86,6 +86,7 @@
     "vue": "catalog:frontend",
     "vue-agile": "^2.0.0",
     "vue-chartjs": "^5.2.0",
+    "vue-component-type-helpers": "^2.2.10",
     "vue-github-button": "^3.1.3",
     "vue-i18n": "catalog:frontend",
     "vue-json-pretty": "2.2.4",
diff --git a/packages/frontend/editor-ui/src/Interface.ts b/packages/frontend/editor-ui/src/Interface.ts
index 8f8e10fbc7..1e15f898e6 100644
--- a/packages/frontend/editor-ui/src/Interface.ts
+++ b/packages/frontend/editor-ui/src/Interface.ts
@@ -293,6 +293,56 @@ export type BaseResource = {
 	name: string;
 };
 
+export type FolderResource = BaseFolderItem & {
+	resourceType: 'folder';
+};
+
+export type WorkflowResource = BaseResource & {
+	resourceType: 'workflow';
+	updatedAt: string;
+	createdAt: string;
+	active: boolean;
+	isArchived: boolean;
+	homeProject?: ProjectSharingData;
+	scopes?: Scope[];
+	tags?: ITag[] | string[];
+	sharedWithProjects?: ProjectSharingData[];
+	readOnly: boolean;
+	parentFolder?: ResourceParentFolder;
+};
+
+export type VariableResource = BaseResource & {
+	resourceType: 'variable';
+	key?: string;
+	value?: string;
+};
+
+export type CredentialsResource = BaseResource & {
+	resourceType: 'credential';
+	updatedAt: string;
+	createdAt: string;
+	type: string;
+	homeProject?: ProjectSharingData;
+	scopes?: Scope[];
+	sharedWithProjects?: ProjectSharingData[];
+	readOnly: boolean;
+	needsSetup: boolean;
+};
+
+export type Resource = WorkflowResource | FolderResource | CredentialsResource | VariableResource;
+
+export type BaseFilters = {
+	search: string;
+	homeProject: string;
+	[key: string]: boolean | string | string[];
+};
+
+export type SortingAndPaginationUpdates = {
+	page?: number;
+	pageSize?: number;
+	sort?: string;
+};
+
 export type WorkflowListItem = Omit<
 	IWorkflowDb,
 	'nodes' | 'connections' | 'settings' | 'pinData' | 'usedCredentials' | 'meta'
diff --git a/packages/frontend/editor-ui/src/__tests__/render.ts b/packages/frontend/editor-ui/src/__tests__/render.ts
index 8c42cf5529..a34dccb6e5 100644
--- a/packages/frontend/editor-ui/src/__tests__/render.ts
+++ b/packages/frontend/editor-ui/src/__tests__/render.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from 'vue';
+import type { Component, Plugin } from 'vue';
 import { render } from '@testing-library/vue';
 import { i18nInstance } from '@n8n/i18n';
 import { GlobalComponentsPlugin } from '@/plugins/components';
@@ -10,6 +10,7 @@ import type { Telemetry } from '@/plugins/telemetry';
 import vueJsonPretty from 'vue-json-pretty';
 import merge from 'lodash/merge';
 import type { TestingPinia } from '@pinia/testing';
+import * as components from '@n8n/design-system/components';
 
 export type RenderComponent = Parameters<typeof render>[0];
 export type RenderOptions = Parameters<typeof render>[1] & {
@@ -25,6 +26,14 @@ const TelemetryPlugin: Plugin<{}> = {
 	},
 };
 
+const TestingGlobalComponentsPlugin: Plugin<{}> = {
+	install(app) {
+		for (const [name, component] of Object.entries(components)) {
+			app.component(name, component as unknown as Component);
+		}
+	},
+};
+
 const defaultOptions = {
 	global: {
 		stubs: {
@@ -38,6 +47,7 @@ const defaultOptions = {
 			GlobalComponentsPlugin,
 			GlobalDirectivesPlugin,
 			TelemetryPlugin,
+			TestingGlobalComponentsPlugin,
 		],
 	},
 };
diff --git a/packages/frontend/editor-ui/src/components/ApiKeyCard.vue b/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
index 774bd0bdf2..702dc60968 100644
--- a/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
+++ b/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
@@ -76,7 +76,7 @@ const getExpirationTime = (apiKey: ApiKey): string => {
 
 		<template #append>
 			<div ref="cardActions" :class="$style.cardActions">
-				<n8n-action-toggle :actions="ACTION_LIST" theme="dark" @action="onAction" />
+				<N8nActionToggle :actions="ACTION_LIST" theme="dark" @action="onAction" />
 			</div>
 		</template>
 	</n8n-card>
diff --git a/packages/frontend/editor-ui/src/components/ChangePasswordModal.vue b/packages/frontend/editor-ui/src/components/ChangePasswordModal.vue
index 8878e9a0dd..fab59f37e1 100644
--- a/packages/frontend/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/frontend/editor-ui/src/components/ChangePasswordModal.vue
@@ -6,7 +6,7 @@ import Modal from '@/components/Modal.vue';
 import { useUsersStore } from '@/stores/users.store';
 import { createFormEventBus } from '@n8n/design-system/utils';
 import { createEventBus } from '@n8n/utils/event-bus';
-import type { IFormInputs, IFormInput } from '@/Interface';
+import type { IFormInputs, IFormInput, FormFieldValueUpdate, FormValues } from '@/Interface';
 import { useI18n } from '@n8n/i18n';
 
 const config = ref<IFormInputs | null>(null);
@@ -33,17 +33,14 @@ const passwordsMatch = (value: string | number | boolean | null | undefined) =>
 	return false;
 };
 
-const onInput = (e: { name: string; value: string }) => {
-	if (e.name === 'password') {
+const onInput = (e: FormFieldValueUpdate) => {
+	if (e.name === 'password' && typeof e.value === 'string') {
 		password.value = e.value;
 	}
 };
 
-const onSubmit = async (values: {
-	currentPassword: string;
-	password: string;
-	mfaCode?: string;
-}) => {
+const onSubmit = async (data: FormValues) => {
+	const values = data as { currentPassword: string; password: string; mfaCode?: string };
 	try {
 		loading.value = true;
 		await usersStore.updateCurrentUserPassword({
@@ -143,6 +140,7 @@ onMounted(() => {
 	>
 		<template #content>
 			<n8n-form-inputs
+				v-if="config"
 				:inputs="config"
 				:event-bus="formBus"
 				:column-view="true"
diff --git a/packages/frontend/editor-ui/src/components/CommunityPackageCard.vue b/packages/frontend/editor-ui/src/components/CommunityPackageCard.vue
index 5e281daabd..ba571c89e7 100644
--- a/packages/frontend/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/frontend/editor-ui/src/components/CommunityPackageCard.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { useUIStore } from '@/stores/ui.store';
-import type { PublicInstalledPackage } from 'n8n-workflow';
+import type { IUser, PublicInstalledPackage } from 'n8n-workflow';
 import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
 import { useI18n } from '@n8n/i18n';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useSettingsStore } from '@/stores/settings.store';
+import type { UserAction } from '@n8n/design-system';
 
 interface Props {
 	communityPackage?: PublicInstalledPackage | null;
@@ -22,7 +23,7 @@ const i18n = useI18n();
 const telemetry = useTelemetry();
 const settingsStore = useSettingsStore();
 
-const packageActions = [
+const packageActions: Array<UserAction<IUser>> = [
 	{
 		label: i18n.baseText('settings.communityNodes.viewDocsAction.label'),
 		value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS,
diff --git a/packages/frontend/editor-ui/src/components/CredentialCard.vue b/packages/frontend/editor-ui/src/components/CredentialCard.vue
index b571e502b4..f23b78239e 100644
--- a/packages/frontend/editor-ui/src/components/CredentialCard.vue
+++ b/packages/frontend/editor-ui/src/components/CredentialCard.vue
@@ -12,7 +12,7 @@ import { useProjectsStore } from '@/stores/projects.store';
 import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
 import { useI18n } from '@n8n/i18n';
 import { ResourceType } from '@/utils/projects.utils';
-import type { CredentialsResource } from './layouts/ResourcesListLayout.vue';
+import type { CredentialsResource } from '@/Interface';
 
 const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
diff --git a/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue b/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue
index f15abcb203..2f37f9408d 100644
--- a/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue
+++ b/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue
@@ -4,6 +4,7 @@ import type { BaseTextKey } from '@n8n/i18n';
 import type { TestTableColumn } from '@/components/Evaluations.ee/shared/TestTableBase.vue';
 import { useI18n } from '@n8n/i18n';
 import { useRouter } from 'vue-router';
+import type { BadgeTheme } from '@n8n/design-system';
 
 defineProps<{
 	column: TestTableColumn<T>;
@@ -39,7 +40,7 @@ const errorTooltipMap: Record<string, BaseTextKey> = {
 };
 
 // FIXME: move status logic to a parent component
-const statusThemeMap: Record<string, string> = {
+const statusThemeMap: Record<string, BadgeTheme> = {
 	new: 'default',
 	running: 'warning',
 	evaluation_running: 'warning',
diff --git a/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue b/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue
index 8621eddff7..a6759934c4 100644
--- a/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue
@@ -206,7 +206,7 @@ defineExpose({ focus, select });
 				outline
 				type="tertiary"
 				icon="external-link-alt"
-				size="xsmall"
+				size="mini"
 				:class="$style['expression-editor-modal-opener']"
 				data-test-id="expander"
 				@click="emit('modal-opener-click')"
diff --git a/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.test.ts b/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.test.ts
index be68ff7c3d..c4edd24937 100644
--- a/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.test.ts
+++ b/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.test.ts
@@ -9,6 +9,7 @@ import { mockedStore } from '@/__tests__/utils';
 import { useProjectsStore } from '@/stores/projects.store';
 import { ProjectTypes, type Project } from '@/types/projects.types';
 import { useFoldersStore } from '@/stores/folders.store';
+import type { IUser } from 'n8n-workflow';
 
 vi.mock('vue-router', async (importOriginal) => ({
 	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
@@ -41,7 +42,7 @@ const TEST_FOLDER_CHILD: FolderShortInfo = {
 	parentFolder: TEST_FOLDER.id,
 };
 
-const TEST_ACTIONS: UserAction[] = [
+const TEST_ACTIONS: Array<UserAction<IUser>> = [
 	{ label: 'Action 1', value: 'action1', disabled: false },
 	{ label: 'Action 2', value: 'action2', disabled: true },
 ];
diff --git a/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.vue b/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.vue
index e13578a498..b8d588741d 100644
--- a/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.vue
+++ b/packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.vue
@@ -7,11 +7,12 @@ import { type PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Brea
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useFoldersStore } from '@/stores/folders.store';
 import type { FolderPathItem, FolderShortInfo } from '@/Interface';
+import type { IUser } from 'n8n-workflow';
 
 type Props = {
 	// Current folder can be null when showing breadcrumbs for workflows in project root
 	currentFolder?: FolderShortInfo | null;
-	actions?: UserAction[];
+	actions?: Array<UserAction<IUser>>;
 	hiddenItemsTrigger?: 'hover' | 'click';
 	currentFolderAsLink?: boolean;
 	visibleLevels?: 1 | 2;
diff --git a/packages/frontend/editor-ui/src/components/Folders/FolderCard.test.ts b/packages/frontend/editor-ui/src/components/Folders/FolderCard.test.ts
index d784873fb0..f4194ee5a1 100644
--- a/packages/frontend/editor-ui/src/components/Folders/FolderCard.test.ts
+++ b/packages/frontend/editor-ui/src/components/Folders/FolderCard.test.ts
@@ -2,8 +2,8 @@ import { createComponentRenderer } from '@/__tests__/render';
 import userEvent from '@testing-library/user-event';
 import FolderCard from './FolderCard.vue';
 import { createPinia, setActivePinia } from 'pinia';
-import type { FolderResource } from '../layouts/ResourcesListLayout.vue';
-import type { FolderPathItem, UserAction } from '@/Interface';
+import type { FolderResource, FolderPathItem, UserAction } from '@/Interface';
+import type { IUser } from 'n8n-workflow';
 
 vi.mock('vue-router', () => {
 	const push = vi.fn();
@@ -54,7 +54,7 @@ const renderComponent = createComponentRenderer(FolderCard, {
 		actions: [
 			{ label: 'Open', value: 'open', disabled: false },
 			{ label: 'Delete', value: 'delete', disabled: false },
-		] as const satisfies UserAction[],
+		] as const satisfies Array<UserAction<IUser>>,
 		breadcrumbs: DEFAULT_BREADCRUMBS,
 	},
 	global: {
diff --git a/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue b/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue
index 0371231cc0..ab547391ff 100644
--- a/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue
+++ b/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { FOLDER_LIST_ITEM_ACTIONS } from './constants';
-import type { FolderResource } from '../layouts/ResourcesListLayout.vue';
 import { ProjectTypes, type Project } from '@/types/projects.types';
 import { useI18n } from '@n8n/i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { VIEWS } from '@/constants';
-import type { UserAction } from '@/Interface';
+import type { FolderResource, UserAction } from '@/Interface';
 import { ResourceType } from '@/utils/projects.utils';
 import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
 import { useFoldersStore } from '@/stores/folders.store';
+import { type IUser } from 'n8n-workflow';
 
 type Props = {
 	data: FolderResource;
 	personalProject: Project | null;
-	actions: UserAction[];
+	actions: Array<UserAction<IUser>>;
 	readOnly?: boolean;
 	showOwnershipBadge?: boolean;
 };
@@ -36,6 +36,7 @@ const emit = defineEmits<{
 }>();
 
 const hiddenBreadcrumbsItemsAsync = ref<Promise<PathItem[]>>(new Promise(() => {}));
+
 const cachedHiddenBreadcrumbsItems = ref<PathItem[]>([]);
 
 const resourceTypeLabel = computed(() => i18n.baseText('generic.folder').toLowerCase());
diff --git a/packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue b/packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue
index e041548ac6..99d3b57475 100644
--- a/packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue
+++ b/packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue
@@ -118,7 +118,7 @@ const onClaimCreditsClicked = async () => {
 					})
 				}}</n8n-text
 			>&nbsp;
-			<n8n-text size="small" bold="true">
+			<n8n-text size="small" :bold="true">
 				{{ i18n.baseText('freeAi.credits.callout.success.title.part2') }}</n8n-text
 			>
 		</n8n-callout>
diff --git a/packages/frontend/editor-ui/src/components/FromAiParametersModal.vue b/packages/frontend/editor-ui/src/components/FromAiParametersModal.vue
index 1dcd07af90..d4d1b12a03 100644
--- a/packages/frontend/editor-ui/src/components/FromAiParametersModal.vue
+++ b/packages/frontend/editor-ui/src/components/FromAiParametersModal.vue
@@ -11,7 +11,7 @@ import {
 	NodeConnectionTypes,
 	traverseNodeParameters,
 } from 'n8n-workflow';
-import type { IFormInput } from '@n8n/design-system';
+import type { FormFieldValueUpdate, IFormInput } from '@n8n/design-system';
 import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
@@ -249,9 +249,11 @@ const onExecute = async () => {
 };
 
 // Add handler for tool selection change
-const onUpdate = (change: { name: string; value: string }) => {
+const onUpdate = (change: FormFieldValueUpdate) => {
 	if (change.name !== 'toolName') return;
-	selectedTool.value = change.value;
+	if (typeof change.value === 'string') {
+		selectedTool.value = change.value;
+	}
 };
 </script>
 
diff --git a/packages/frontend/editor-ui/src/components/InlineNameEdit.vue b/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
index 1685d2f518..97aba8e667 100644
--- a/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
@@ -2,17 +2,18 @@
 import { nextTick, ref } from 'vue';
 import { useToast } from '@/composables/useToast';
 import { onClickOutside } from '@vueuse/core';
+import type { InputType } from '@n8n/design-system';
 
 interface Props {
 	modelValue: string;
 	subtitle?: string;
-	type: string;
+	type: InputType;
 	readonly?: boolean;
 	placeholder?: string;
 	maxlength?: number;
 	required?: boolean;
 	autosize?: boolean | { minRows: number; maxRows: number };
-	inputType?: string;
+	inputType?: InputType;
 	maxHeight?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/frontend/editor-ui/src/components/InviteUsersModal.vue b/packages/frontend/editor-ui/src/components/InviteUsersModal.vue
index def1f2ea26..e9a06d12a6 100644
--- a/packages/frontend/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/frontend/editor-ui/src/components/InviteUsersModal.vue
@@ -2,7 +2,13 @@
 import { computed, onMounted, ref } from 'vue';
 import { useToast } from '@/composables/useToast';
 import Modal from './Modal.vue';
-import type { IFormInputs, IInviteResponse, IUser, InvitableRoleName } from '@/Interface';
+import type {
+	FormFieldValueUpdate,
+	IFormInputs,
+	IInviteResponse,
+	IUser,
+	InvitableRoleName,
+} from '@/Interface';
 import { EnterpriseEditionFeature, VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from '@/constants';
 import { ROLE } from '@n8n/api-types';
 import { useUsersStore } from '@/stores/users.store';
@@ -127,11 +133,15 @@ const validateEmails = (value: string | number | boolean | null | undefined) =>
 	return false;
 };
 
-function onInput(e: { name: string; value: InvitableRoleName }) {
-	if (e.name === 'emails') {
+function isInvitableRoleName(val: unknown): val is InvitableRoleName {
+	return typeof val === 'string' && [ROLE.Member, ROLE.Admin].includes(val as InvitableRoleName);
+}
+
+function onInput(e: FormFieldValueUpdate) {
+	if (e.name === 'emails' && typeof e.value === 'string') {
 		emails.value = e.value;
 	}
-	if (e.name === 'role') {
+	if (e.name === 'role' && isInvitableRoleName(e.value)) {
 		role.value = e.value;
 	}
 }
@@ -312,7 +322,7 @@ function getEmail(email: string): string {
 				</n8n-users-list>
 			</div>
 			<n8n-form-inputs
-				v-else
+				v-else-if="config"
 				:inputs="config"
 				:event-bus="formBus"
 				:column-view="true"
diff --git a/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue b/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue
index 2512cfc149..b6c92e09d0 100644
--- a/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue
@@ -16,8 +16,8 @@ const emit = defineEmits<{
 	'update:modelValue': [tab: MAIN_HEADER_TABS, event: MouseEvent];
 }>();
 
-function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {
-	emit('update:modelValue', tab, event);
+function onUpdateModelValue(tab: string, event: MouseEvent): void {
+	emit('update:modelValue', tab as MAIN_HEADER_TABS, event);
 }
 </script>
 
diff --git a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 2b4b3fddc4..750a154909 100644
--- a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -428,7 +428,8 @@ async function handleFileImport(): Promise<void> {
 	}
 }
 
-async function onWorkflowMenuSelect(action: WORKFLOW_MENU_ACTIONS): Promise<void> {
+async function onWorkflowMenuSelect(value: string): Promise<void> {
+	const action = value as WORKFLOW_MENU_ACTIONS;
 	switch (action) {
 		case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
 			uiStore.openModalWithData({
diff --git a/packages/frontend/editor-ui/src/components/MainSidebar.vue b/packages/frontend/editor-ui/src/components/MainSidebar.vue
index 97c352e4d8..c1ddb75abb 100644
--- a/packages/frontend/editor-ui/src/components/MainSidebar.vue
+++ b/packages/frontend/editor-ui/src/components/MainSidebar.vue
@@ -25,6 +25,7 @@ import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper
 
 import { useGlobalEntityCreation } from '@/composables/useGlobalEntityCreation';
 import { N8nNavigationDropdown, N8nTooltip, N8nLink, N8nIconButton } from '@n8n/design-system';
+import type { IMenuItem } from '@n8n/design-system';
 import { onClickOutside, type VueInstance } from '@vueuse/core';
 import Logo from './Logo/Logo.vue';
 
@@ -67,7 +68,7 @@ const userMenuItems = ref([
 	},
 ]);
 
-const mainMenuItems = computed(() => [
+const mainMenuItems = computed<IMenuItem[]>(() => [
 	{
 		id: 'cloud-admin',
 		position: 'bottom',
diff --git a/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue b/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue
index a3651570e6..51221e5cbc 100644
--- a/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue
@@ -8,7 +8,7 @@ import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '
 import { useNDVStore } from '@/stores/ndv.store';
 import { ndvEventBus } from '@/event-bus';
 import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue';
-import type { MainPanelType, XYPosition } from '@/Interface';
+import type { Direction, MainPanelType, XYPosition } from '@/Interface';
 import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
 import { useThrottleFn } from '@vueuse/core';
@@ -151,8 +151,8 @@ const outputPanelRelativeTranslate = computed((): number => {
 	return currentRelativeLeftDelta > 0 ? currentRelativeLeftDelta : 0;
 });
 
-const supportedResizeDirections = computed((): string[] => {
-	const supportedDirections = ['right'];
+const supportedResizeDirections = computed((): Direction[] => {
+	const supportedDirections = ['right' as Direction];
 
 	if (props.isDraggable) supportedDirections.push('left');
 	return supportedDirections;
diff --git a/packages/frontend/editor-ui/src/components/NDVSubConnections.test.ts b/packages/frontend/editor-ui/src/components/NDVSubConnections.test.ts
index f9fe640deb..55f750e88d 100644
--- a/packages/frontend/editor-ui/src/components/NDVSubConnections.test.ts
+++ b/packages/frontend/editor-ui/src/components/NDVSubConnections.test.ts
@@ -99,10 +99,11 @@ describe('NDVSubConnections', () => {
       <div class="connectionType"><span class="connectionLabel">Tools</span>
         <div>
           <div class="connectedNodesWrapper" style="--nodes-length: 0;">
-            <div class="plusButton">
-              <n8n-tooltip placement="top" teleported="true" offset="10" show-after="300" disabled="false">
-                <n8n-icon-button size="medium" icon="plus" type="tertiary" data-test-id="add-subnode-ai_tool-0"></n8n-icon-button>
-              </n8n-tooltip>
+            <div class="plusButton"><button class="button button tertiary medium withIcon square el-tooltip__trigger el-tooltip__trigger" aria-live="polite" data-test-id="add-subnode-ai_tool-0"><span class="icon"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span></span>
+                <!--v-if-->
+              </button>
+              <!--teleport start-->
+              <!--teleport end-->
             </div>
             <!--v-if-->
           </div>
diff --git a/packages/frontend/editor-ui/src/components/NodeExecuteButton.vue b/packages/frontend/editor-ui/src/components/NodeExecuteButton.vue
index 6762917ff6..0262290b6f 100644
--- a/packages/frontend/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/frontend/editor-ui/src/components/NodeExecuteButton.vue
@@ -26,10 +26,11 @@ import { useRunWorkflow } from '@/composables/useRunWorkflow';
 import { useRouter } from 'vue-router';
 import { useI18n } from '@n8n/i18n';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { type IUpdateInformation } from '@/Interface';
+import type { ButtonSize, IUpdateInformation } from '@/Interface';
 import { generateCodeForAiTransform } from '@/components/ButtonParameter/utils';
 import { needsAgentInput } from '@/utils/nodes/nodeTransforms';
 import { useUIStore } from '@/stores/ui.store';
+import type { ButtonType } from '@n8n/design-system';
 
 const NODE_TEST_STEP_POPUP_COUNT_KEY = 'N8N_NODE_TEST_STEP_POPUP_COUNT';
 const MAX_POPUP_COUNT = 10;
@@ -41,8 +42,8 @@ const props = withDefaults(
 		telemetrySource: string;
 		disabled?: boolean;
 		label?: string;
-		type?: string;
-		size?: string;
+		type?: ButtonType;
+		size?: ButtonSize;
 		transparent?: boolean;
 		hideIcon?: boolean;
 		tooltip?: string;
diff --git a/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue b/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue
index 654eed58f6..8b0e213717 100644
--- a/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue
@@ -119,7 +119,7 @@ const options = computed<ITab[]>(() => {
 	return options;
 });
 
-function onTabSelect(tab: string) {
+function onTabSelect(tab: string | number) {
 	if (tab === 'docs' && props.nodeType) {
 		void externalHooks.run('dataDisplay.onDocumentationUrlClick', {
 			nodeType: props.nodeType,
@@ -147,7 +147,7 @@ function onTabSelect(tab: string) {
 	}
 }
 
-function onTooltipClick(tab: string, event: MouseEvent) {
+function onTooltipClick(tab: string | number, event: MouseEvent) {
 	if (tab === 'communityNode' && (event.target as Element).localName === 'a') {
 		telemetry.track('user clicked cnr docs link', { source: 'node details view' });
 	}
diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index 5763f997c0..d472ab87eb 100644
--- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -26,9 +26,9 @@ const emit = defineEmits<{
 			v-if="!isReadOnly"
 			type="tertiary"
 			:class="['n8n-input', $style.overrideCloseButton]"
-			outline="false"
+			:outline="false"
 			icon="xmark"
-			size="xsmall"
+			size="mini"
 			@click="emit('close')"
 		/>
 	</div>
diff --git a/packages/frontend/editor-ui/src/components/PersonalizationModal.vue b/packages/frontend/editor-ui/src/components/PersonalizationModal.vue
index 0783baa954..0480f988ef 100644
--- a/packages/frontend/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/frontend/editor-ui/src/components/PersonalizationModal.vue
@@ -114,438 +114,441 @@ const isSaving = ref(false);
 const userPermissions = computed(() =>
 	getResourcePermissions(usersStore.currentUser?.globalScopes),
 );
-const survey = computed<IFormInputs>(() => [
-	{
-		name: COMPANY_TYPE_KEY,
-		properties: {
-			label: i18n.baseText('personalizationModal.whatBestDescribesYourCompany'),
-			type: 'select',
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					label: i18n.baseText('personalizationModal.saas'),
-					value: SAAS_COMPANY_TYPE,
-				},
-				{
-					label: i18n.baseText('personalizationModal.eCommerce'),
-					value: ECOMMERCE_COMPANY_TYPE,
-				},
+const survey = computed<IFormInputs>(
+	() =>
+		[
+			{
+				name: COMPANY_TYPE_KEY,
+				properties: {
+					label: i18n.baseText('personalizationModal.whatBestDescribesYourCompany'),
+					type: 'select',
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							label: i18n.baseText('personalizationModal.saas'),
+							value: SAAS_COMPANY_TYPE,
+						},
+						{
+							label: i18n.baseText('personalizationModal.eCommerce'),
+							value: ECOMMERCE_COMPANY_TYPE,
+						},
 
-				{
-					label: i18n.baseText('personalizationModal.digitalAgencyOrConsultant'),
-					value: DIGITAL_AGENCY_COMPANY_TYPE,
+						{
+							label: i18n.baseText('personalizationModal.digitalAgencyOrConsultant'),
+							value: DIGITAL_AGENCY_COMPANY_TYPE,
+						},
+						{
+							label: i18n.baseText('personalizationModal.systemsIntegrator'),
+							value: SYSTEMS_INTEGRATOR_COMPANY_TYPE,
+						},
+						{
+							value: EDUCATION_TYPE,
+							label: i18n.baseText('personalizationModal.education'),
+						},
+						{
+							label: i18n.baseText('personalizationModal.other'),
+							value: OTHER_COMPANY_TYPE,
+						},
+						{
+							label: i18n.baseText('personalizationModal.imNotUsingN8nForWork'),
+							value: PERSONAL_COMPANY_TYPE,
+						},
+					],
 				},
-				{
-					label: i18n.baseText('personalizationModal.systemsIntegrator'),
-					value: SYSTEMS_INTEGRATOR_COMPANY_TYPE,
+			},
+			{
+				name: COMPANY_INDUSTRY_EXTENDED_KEY,
+				properties: {
+					type: 'multi-select',
+					label: i18n.baseText('personalizationModal.whichIndustriesIsYourCompanyIn'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							value: FINANCE_INSURANCE_INDUSTRY,
+							label: i18n.baseText('personalizationModal.financeOrInsurance'),
+						},
+						{
+							value: GOVERNMENT_INDUSTRY,
+							label: i18n.baseText('personalizationModal.government'),
+						},
+						{
+							value: HEALTHCARE_INDUSTRY,
+							label: i18n.baseText('personalizationModal.healthcare'),
+						},
+						{
+							value: IT_INDUSTRY,
+							label: i18n.baseText('personalizationModal.it'),
+						},
+						{
+							value: LEGAL_INDUSTRY,
+							label: i18n.baseText('personalizationModal.legal'),
+						},
+						{
+							value: MSP_INDUSTRY,
+							label: i18n.baseText('personalizationModal.managedServiceProvider'),
+						},
+						{
+							value: MARKETING_INDUSTRY,
+							label: i18n.baseText('personalizationModal.marketing'),
+						},
+						{
+							value: MEDIA_INDUSTRY,
+							label: i18n.baseText('personalizationModal.media'),
+						},
+						{
+							value: MANUFACTURING_INDUSTRY,
+							label: i18n.baseText('personalizationModal.manufacturing'),
+						},
+						{
+							value: PHYSICAL_RETAIL_OR_SERVICES,
+							label: i18n.baseText('personalizationModal.physicalRetailOrServices'),
+						},
+						{
+							value: REAL_ESTATE_OR_CONSTRUCTION,
+							label: i18n.baseText('personalizationModal.realEstateOrConstruction'),
+						},
+						{
+							value: SECURITY_INDUSTRY,
+							label: i18n.baseText('personalizationModal.security'),
+						},
+						{
+							value: TELECOMS_INDUSTRY,
+							label: i18n.baseText('personalizationModal.telecoms'),
+						},
+						{
+							value: OTHER_INDUSTRY_OPTION,
+							label: i18n.baseText('personalizationModal.otherPleaseSpecify'),
+						},
+					],
 				},
-				{
-					value: EDUCATION_TYPE,
-					label: i18n.baseText('personalizationModal.education'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					return companyType === OTHER_COMPANY_TYPE;
 				},
-				{
-					label: i18n.baseText('personalizationModal.other'),
-					value: OTHER_COMPANY_TYPE,
+			},
+			{
+				name: OTHER_COMPANY_INDUSTRY_EXTENDED_KEY,
+				properties: {
+					placeholder: i18n.baseText('personalizationModal.specifyYourCompanysIndustry'),
 				},
-				{
-					label: i18n.baseText('personalizationModal.imNotUsingN8nForWork'),
-					value: PERSONAL_COMPANY_TYPE,
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					const companyIndustry = (values as IPersonalizationLatestVersion)[
+						COMPANY_INDUSTRY_EXTENDED_KEY
+					];
+					return (
+						companyType === OTHER_COMPANY_TYPE &&
+						!!companyIndustry &&
+						companyIndustry.includes(OTHER_INDUSTRY_OPTION)
+					);
 				},
-			],
-		},
-	},
-	{
-		name: COMPANY_INDUSTRY_EXTENDED_KEY,
-		properties: {
-			type: 'multi-select',
-			label: i18n.baseText('personalizationModal.whichIndustriesIsYourCompanyIn'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					value: FINANCE_INSURANCE_INDUSTRY,
-					label: i18n.baseText('personalizationModal.financeOrInsurance'),
+			},
+			{
+				name: ROLE_KEY,
+				properties: {
+					type: 'select',
+					label: i18n.baseText('personalizationModal.whichRoleBestDescribesYou'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							value: ROLE_BUSINESS_OWNER,
+							label: i18n.baseText('personalizationModal.businessOwner'),
+						},
+						{
+							value: ROLE_CUSTOMER_SUPPORT,
+							label: i18n.baseText('personalizationModal.customerSupport'),
+						},
+						{
+							value: ROLE_DATA_SCIENCE,
+							label: i18n.baseText('personalizationModal.dataScience'),
+						},
+						{
+							value: ROLE_DEVOPS,
+							label: i18n.baseText('personalizationModal.devops'),
+						},
+						{
+							value: ROLE_IT,
+							label: i18n.baseText('personalizationModal.it'),
+						},
+						{
+							value: ROLE_ENGINEERING,
+							label: i18n.baseText('personalizationModal.engineering'),
+						},
+						{
+							value: ROLE_SALES_AND_MARKETING,
+							label: i18n.baseText('personalizationModal.salesAndMarketing'),
+						},
+						{
+							value: ROLE_SECURITY,
+							label: i18n.baseText('personalizationModal.security'),
+						},
+						{
+							value: ROLE_OTHER,
+							label: i18n.baseText('personalizationModal.otherPleaseSpecify'),
+						},
+					],
 				},
-				{
-					value: GOVERNMENT_INDUSTRY,
-					label: i18n.baseText('personalizationModal.government'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					return companyType !== PERSONAL_COMPANY_TYPE;
 				},
-				{
-					value: HEALTHCARE_INDUSTRY,
-					label: i18n.baseText('personalizationModal.healthcare'),
+			},
+			{
+				name: ROLE_OTHER_KEY,
+				properties: {
+					placeholder: i18n.baseText('personalizationModal.specifyYourRole'),
 				},
-				{
-					value: IT_INDUSTRY,
-					label: i18n.baseText('personalizationModal.it'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					const role = (values as IPersonalizationLatestVersion)[ROLE_KEY];
+					return companyType !== PERSONAL_COMPANY_TYPE && role === ROLE_OTHER;
 				},
-				{
-					value: LEGAL_INDUSTRY,
-					label: i18n.baseText('personalizationModal.legal'),
+			},
+			{
+				name: DEVOPS_AUTOMATION_GOAL_KEY,
+				properties: {
+					type: 'multi-select',
+					label: i18n.baseText('personalizationModal.whatAreYouLookingToAutomate'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							value: DEVOPS_AUTOMATION_CI_CD_GOAL,
+							label: i18n.baseText('personalizationModal.cicd'),
+						},
+						{
+							value: DEVOPS_AUTOMATION_CLOUD_INFRASTRUCTURE_ORCHESTRATION_GOAL,
+							label: i18n.baseText('personalizationModal.cloudInfrastructureOrchestration'),
+						},
+						{
+							value: DEVOPS_AUTOMATION_DATA_SYNCING_GOAL,
+							label: i18n.baseText('personalizationModal.dataSynching'),
+						},
+						{
+							value: DEVOPS_INCIDENT_RESPONSE_GOAL,
+							label: i18n.baseText('personalizationModal.incidentResponse'),
+						},
+						{
+							value: DEVOPS_MONITORING_AND_ALERTING_GOAL,
+							label: i18n.baseText('personalizationModal.monitoringAndAlerting'),
+						},
+						{
+							value: DEVOPS_REPORTING_GOAL,
+							label: i18n.baseText('personalizationModal.reporting'),
+						},
+						{
+							value: DEVOPS_TICKETING_SYSTEMS_INTEGRATIONS_GOAL,
+							label: i18n.baseText('personalizationModal.ticketingSystemsIntegrations'),
+						},
+						{
+							value: OTHER_AUTOMATION_GOAL,
+							label: i18n.baseText('personalizationModal.other'),
+						},
+					],
 				},
-				{
-					value: MSP_INDUSTRY,
-					label: i18n.baseText('personalizationModal.managedServiceProvider'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					const role = (values as IPersonalizationLatestVersion)[ROLE_KEY] as string;
+					return (
+						companyType !== PERSONAL_COMPANY_TYPE &&
+						[ROLE_DEVOPS, ROLE_ENGINEERING, ROLE_IT].includes(role)
+					);
 				},
-				{
-					value: MARKETING_INDUSTRY,
-					label: i18n.baseText('personalizationModal.marketing'),
+			},
+			{
+				name: DEVOPS_AUTOMATION_GOAL_OTHER_KEY,
+				properties: {
+					placeholder: i18n.baseText('personalizationModal.specifyYourAutomationGoal'),
 				},
-				{
-					value: MEDIA_INDUSTRY,
-					label: i18n.baseText('personalizationModal.media'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					const goals = (values as IPersonalizationLatestVersion)[DEVOPS_AUTOMATION_GOAL_KEY];
+					const role = (values as IPersonalizationLatestVersion)[ROLE_KEY] as string;
+					return (
+						companyType !== PERSONAL_COMPANY_TYPE &&
+						[ROLE_DEVOPS, ROLE_ENGINEERING, ROLE_IT].includes(role) &&
+						!!goals &&
+						goals.includes(DEVOPS_AUTOMATION_OTHER)
+					);
 				},
-				{
-					value: MANUFACTURING_INDUSTRY,
-					label: i18n.baseText('personalizationModal.manufacturing'),
+			},
+			{
+				name: MARKETING_AUTOMATION_GOAL_KEY,
+				properties: {
+					type: 'multi-select',
+					label: i18n.baseText('personalizationModal.specifySalesMarketingGoal'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							label: i18n.baseText('personalizationModal.leadGeneration'),
+							value: MARKETING_AUTOMATION_LEAD_GENERATION_GOAL,
+						},
+						{
+							label: i18n.baseText('personalizationModal.customerCommunication'),
+							value: MARKETING_AUTOMATION_CUSTOMER_COMMUNICATION,
+						},
+						{
+							label: i18n.baseText('personalizationModal.customerActions'),
+							value: MARKETING_AUTOMATION_ACTIONS,
+						},
+						{
+							label: i18n.baseText('personalizationModal.adCampaign'),
+							value: MARKETING_AUTOMATION_AD_CAMPAIGN,
+						},
+						{
+							label: i18n.baseText('personalizationModal.reporting'),
+							value: MARKETING_AUTOMATION_REPORTING,
+						},
+						{
+							label: i18n.baseText('personalizationModal.dataSynching'),
+							value: MARKETING_AUTOMATION_DATA_SYNCHING,
+						},
+						{
+							label: i18n.baseText('personalizationModal.other'),
+							value: MARKETING_AUTOMATION_OTHER,
+						},
+					],
 				},
-				{
-					value: PHYSICAL_RETAIL_OR_SERVICES,
-					label: i18n.baseText('personalizationModal.physicalRetailOrServices'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					const role = (values as IPersonalizationLatestVersion)[ROLE_KEY];
+					return companyType !== PERSONAL_COMPANY_TYPE && role === ROLE_SALES_AND_MARKETING;
 				},
-				{
-					value: REAL_ESTATE_OR_CONSTRUCTION,
-					label: i18n.baseText('personalizationModal.realEstateOrConstruction'),
+			},
+			{
+				name: OTHER_MARKETING_AUTOMATION_GOAL_KEY,
+				properties: {
+					placeholder: i18n.baseText('personalizationModal.specifyOtherSalesAndMarketingGoal'),
 				},
-				{
-					value: SECURITY_INDUSTRY,
-					label: i18n.baseText('personalizationModal.security'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					const goals = (values as IPersonalizationLatestVersion)[MARKETING_AUTOMATION_GOAL_KEY];
+					const role = (values as IPersonalizationLatestVersion)[ROLE_KEY];
+					return (
+						companyType !== PERSONAL_COMPANY_TYPE &&
+						role === ROLE_SALES_AND_MARKETING &&
+						!!goals &&
+						goals.includes(MARKETING_AUTOMATION_OTHER)
+					);
 				},
-				{
-					value: TELECOMS_INDUSTRY,
-					label: i18n.baseText('personalizationModal.telecoms'),
+			},
+			{
+				name: AUTOMATION_BENEFICIARY_KEY,
+				properties: {
+					type: 'select',
+					label: i18n.baseText('personalizationModal.specifyAutomationBeneficiary'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							label: i18n.baseText('personalizationModal.myself'),
+							value: AUTOMATION_BENEFICIARY_SELF,
+						},
+						{
+							label: i18n.baseText('personalizationModal.myTeam'),
+							value: AUTOMATION_BENEFICIARY_MY_TEAM,
+						},
+						{
+							label: i18n.baseText('personalizationModal.otherTeams'),
+							value: AUTOMATION_BENEFICIARY_OTHER_TEAMS,
+						},
+					],
 				},
-				{
-					value: OTHER_INDUSTRY_OPTION,
-					label: i18n.baseText('personalizationModal.otherPleaseSpecify'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					return companyType !== PERSONAL_COMPANY_TYPE;
 				},
-			],
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			return companyType === OTHER_COMPANY_TYPE;
-		},
-	},
-	{
-		name: OTHER_COMPANY_INDUSTRY_EXTENDED_KEY,
-		properties: {
-			placeholder: i18n.baseText('personalizationModal.specifyYourCompanysIndustry'),
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			const companyIndustry = (values as IPersonalizationLatestVersion)[
-				COMPANY_INDUSTRY_EXTENDED_KEY
-			];
-			return (
-				companyType === OTHER_COMPANY_TYPE &&
-				!!companyIndustry &&
-				companyIndustry.includes(OTHER_INDUSTRY_OPTION)
-			);
-		},
-	},
-	{
-		name: ROLE_KEY,
-		properties: {
-			type: 'select',
-			label: i18n.baseText('personalizationModal.whichRoleBestDescribesYou'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					value: ROLE_BUSINESS_OWNER,
-					label: i18n.baseText('personalizationModal.businessOwner'),
+			},
+			{
+				name: COMPANY_SIZE_KEY,
+				properties: {
+					type: 'select',
+					label: i18n.baseText('personalizationModal.howBigIsYourCompany'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							label: i18n.baseText('personalizationModal.lessThan20People'),
+							value: COMPANY_SIZE_20_OR_LESS,
+						},
+						{
+							label: `20-99 ${i18n.baseText('personalizationModal.people')}`,
+							value: COMPANY_SIZE_20_99,
+						},
+						{
+							label: `100-499 ${i18n.baseText('personalizationModal.people')}`,
+							value: COMPANY_SIZE_100_499,
+						},
+						{
+							label: `500-999 ${i18n.baseText('personalizationModal.people')}`,
+							value: COMPANY_SIZE_500_999,
+						},
+						{
+							label: `1000+ ${i18n.baseText('personalizationModal.people')}`,
+							value: COMPANY_SIZE_1000_OR_MORE,
+						},
+						{
+							label: i18n.baseText('personalizationModal.imNotUsingN8nForWork'),
+							value: COMPANY_SIZE_PERSONAL_USE,
+						},
+					],
 				},
-				{
-					value: ROLE_CUSTOMER_SUPPORT,
-					label: i18n.baseText('personalizationModal.customerSupport'),
+				shouldDisplay(values): boolean {
+					const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
+					return companyType !== PERSONAL_COMPANY_TYPE;
 				},
-				{
-					value: ROLE_DATA_SCIENCE,
-					label: i18n.baseText('personalizationModal.dataScience'),
+			},
+			{
+				name: REPORTED_SOURCE_KEY,
+				properties: {
+					type: 'select',
+					label: i18n.baseText('personalizationModal.howDidYouHearAboutN8n'),
+					placeholder: i18n.baseText('personalizationModal.select'),
+					options: [
+						{
+							label: 'Google',
+							value: REPORTED_SOURCE_GOOGLE,
+						},
+						{
+							label: 'Twitter',
+							value: REPORTED_SOURCE_TWITTER,
+						},
+						{
+							label: 'LinkedIn',
+							value: REPORTED_SOURCE_LINKEDIN,
+						},
+						{
+							label: 'YouTube',
+							value: REPORTED_SOURCE_YOUTUBE,
+						},
+						{
+							label: i18n.baseText('personalizationModal.friendWordOfMouth'),
+							value: REPORTED_SOURCE_FRIEND,
+						},
+						{
+							label: i18n.baseText('personalizationModal.podcast'),
+							value: REPORTED_SOURCE_PODCAST,
+						},
+						{
+							label: i18n.baseText('personalizationModal.event'),
+							value: REPORTED_SOURCE_EVENT,
+						},
+						{
+							label: i18n.baseText('personalizationModal.otherPleaseSpecify'),
+							value: REPORTED_SOURCE_OTHER,
+						},
+					],
 				},
-				{
-					value: ROLE_DEVOPS,
-					label: i18n.baseText('personalizationModal.devops'),
+			},
+			{
+				name: REPORTED_SOURCE_OTHER_KEY,
+				properties: {
+					placeholder: i18n.baseText('personalizationModal.specifyReportedSource'),
 				},
-				{
-					value: ROLE_IT,
-					label: i18n.baseText('personalizationModal.it'),
+				shouldDisplay(values): boolean {
+					const reportedSource = (values as IPersonalizationLatestVersion)[REPORTED_SOURCE_KEY];
+					return reportedSource === REPORTED_SOURCE_OTHER;
 				},
-				{
-					value: ROLE_ENGINEERING,
-					label: i18n.baseText('personalizationModal.engineering'),
-				},
-				{
-					value: ROLE_SALES_AND_MARKETING,
-					label: i18n.baseText('personalizationModal.salesAndMarketing'),
-				},
-				{
-					value: ROLE_SECURITY,
-					label: i18n.baseText('personalizationModal.security'),
-				},
-				{
-					value: ROLE_OTHER,
-					label: i18n.baseText('personalizationModal.otherPleaseSpecify'),
-				},
-			],
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			return companyType !== PERSONAL_COMPANY_TYPE;
-		},
-	},
-	{
-		name: ROLE_OTHER_KEY,
-		properties: {
-			placeholder: i18n.baseText('personalizationModal.specifyYourRole'),
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			const role = (values as IPersonalizationLatestVersion)[ROLE_KEY];
-			return companyType !== PERSONAL_COMPANY_TYPE && role === ROLE_OTHER;
-		},
-	},
-	{
-		name: DEVOPS_AUTOMATION_GOAL_KEY,
-		properties: {
-			type: 'multi-select',
-			label: i18n.baseText('personalizationModal.whatAreYouLookingToAutomate'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					value: DEVOPS_AUTOMATION_CI_CD_GOAL,
-					label: i18n.baseText('personalizationModal.cicd'),
-				},
-				{
-					value: DEVOPS_AUTOMATION_CLOUD_INFRASTRUCTURE_ORCHESTRATION_GOAL,
-					label: i18n.baseText('personalizationModal.cloudInfrastructureOrchestration'),
-				},
-				{
-					value: DEVOPS_AUTOMATION_DATA_SYNCING_GOAL,
-					label: i18n.baseText('personalizationModal.dataSynching'),
-				},
-				{
-					value: DEVOPS_INCIDENT_RESPONSE_GOAL,
-					label: i18n.baseText('personalizationModal.incidentResponse'),
-				},
-				{
-					value: DEVOPS_MONITORING_AND_ALERTING_GOAL,
-					label: i18n.baseText('personalizationModal.monitoringAndAlerting'),
-				},
-				{
-					value: DEVOPS_REPORTING_GOAL,
-					label: i18n.baseText('personalizationModal.reporting'),
-				},
-				{
-					value: DEVOPS_TICKETING_SYSTEMS_INTEGRATIONS_GOAL,
-					label: i18n.baseText('personalizationModal.ticketingSystemsIntegrations'),
-				},
-				{
-					value: OTHER_AUTOMATION_GOAL,
-					label: i18n.baseText('personalizationModal.other'),
-				},
-			],
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			const role = (values as IPersonalizationLatestVersion)[ROLE_KEY] as string;
-			return (
-				companyType !== PERSONAL_COMPANY_TYPE &&
-				[ROLE_DEVOPS, ROLE_ENGINEERING, ROLE_IT].includes(role)
-			);
-		},
-	},
-	{
-		name: DEVOPS_AUTOMATION_GOAL_OTHER_KEY,
-		properties: {
-			placeholder: i18n.baseText('personalizationModal.specifyYourAutomationGoal'),
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			const goals = (values as IPersonalizationLatestVersion)[DEVOPS_AUTOMATION_GOAL_KEY];
-			const role = (values as IPersonalizationLatestVersion)[ROLE_KEY] as string;
-			return (
-				companyType !== PERSONAL_COMPANY_TYPE &&
-				[ROLE_DEVOPS, ROLE_ENGINEERING, ROLE_IT].includes(role) &&
-				!!goals &&
-				goals.includes(DEVOPS_AUTOMATION_OTHER)
-			);
-		},
-	},
-	{
-		name: MARKETING_AUTOMATION_GOAL_KEY,
-		properties: {
-			type: 'multi-select',
-			label: i18n.baseText('personalizationModal.specifySalesMarketingGoal'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					label: i18n.baseText('personalizationModal.leadGeneration'),
-					value: MARKETING_AUTOMATION_LEAD_GENERATION_GOAL,
-				},
-				{
-					label: i18n.baseText('personalizationModal.customerCommunication'),
-					value: MARKETING_AUTOMATION_CUSTOMER_COMMUNICATION,
-				},
-				{
-					label: i18n.baseText('personalizationModal.customerActions'),
-					value: MARKETING_AUTOMATION_ACTIONS,
-				},
-				{
-					label: i18n.baseText('personalizationModal.adCampaign'),
-					value: MARKETING_AUTOMATION_AD_CAMPAIGN,
-				},
-				{
-					label: i18n.baseText('personalizationModal.reporting'),
-					value: MARKETING_AUTOMATION_REPORTING,
-				},
-				{
-					label: i18n.baseText('personalizationModal.dataSynching'),
-					value: MARKETING_AUTOMATION_DATA_SYNCHING,
-				},
-				{
-					label: i18n.baseText('personalizationModal.other'),
-					value: MARKETING_AUTOMATION_OTHER,
-				},
-			],
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			const role = (values as IPersonalizationLatestVersion)[ROLE_KEY];
-			return companyType !== PERSONAL_COMPANY_TYPE && role === ROLE_SALES_AND_MARKETING;
-		},
-	},
-	{
-		name: OTHER_MARKETING_AUTOMATION_GOAL_KEY,
-		properties: {
-			placeholder: i18n.baseText('personalizationModal.specifyOtherSalesAndMarketingGoal'),
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			const goals = (values as IPersonalizationLatestVersion)[MARKETING_AUTOMATION_GOAL_KEY];
-			const role = (values as IPersonalizationLatestVersion)[ROLE_KEY];
-			return (
-				companyType !== PERSONAL_COMPANY_TYPE &&
-				role === ROLE_SALES_AND_MARKETING &&
-				!!goals &&
-				goals.includes(MARKETING_AUTOMATION_OTHER)
-			);
-		},
-	},
-	{
-		name: AUTOMATION_BENEFICIARY_KEY,
-		properties: {
-			type: 'select',
-			label: i18n.baseText('personalizationModal.specifyAutomationBeneficiary'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					label: i18n.baseText('personalizationModal.myself'),
-					value: AUTOMATION_BENEFICIARY_SELF,
-				},
-				{
-					label: i18n.baseText('personalizationModal.myTeam'),
-					value: AUTOMATION_BENEFICIARY_MY_TEAM,
-				},
-				{
-					label: i18n.baseText('personalizationModal.otherTeams'),
-					value: AUTOMATION_BENEFICIARY_OTHER_TEAMS,
-				},
-			],
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			return companyType !== PERSONAL_COMPANY_TYPE;
-		},
-	},
-	{
-		name: COMPANY_SIZE_KEY,
-		properties: {
-			type: 'select',
-			label: i18n.baseText('personalizationModal.howBigIsYourCompany'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					label: i18n.baseText('personalizationModal.lessThan20People'),
-					value: COMPANY_SIZE_20_OR_LESS,
-				},
-				{
-					label: `20-99 ${i18n.baseText('personalizationModal.people')}`,
-					value: COMPANY_SIZE_20_99,
-				},
-				{
-					label: `100-499 ${i18n.baseText('personalizationModal.people')}`,
-					value: COMPANY_SIZE_100_499,
-				},
-				{
-					label: `500-999 ${i18n.baseText('personalizationModal.people')}`,
-					value: COMPANY_SIZE_500_999,
-				},
-				{
-					label: `1000+ ${i18n.baseText('personalizationModal.people')}`,
-					value: COMPANY_SIZE_1000_OR_MORE,
-				},
-				{
-					label: i18n.baseText('personalizationModal.imNotUsingN8nForWork'),
-					value: COMPANY_SIZE_PERSONAL_USE,
-				},
-			],
-		},
-		shouldDisplay(values): boolean {
-			const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-			return companyType !== PERSONAL_COMPANY_TYPE;
-		},
-	},
-	{
-		name: REPORTED_SOURCE_KEY,
-		properties: {
-			type: 'select',
-			label: i18n.baseText('personalizationModal.howDidYouHearAboutN8n'),
-			placeholder: i18n.baseText('personalizationModal.select'),
-			options: [
-				{
-					label: 'Google',
-					value: REPORTED_SOURCE_GOOGLE,
-				},
-				{
-					label: 'Twitter',
-					value: REPORTED_SOURCE_TWITTER,
-				},
-				{
-					label: 'LinkedIn',
-					value: REPORTED_SOURCE_LINKEDIN,
-				},
-				{
-					label: 'YouTube',
-					value: REPORTED_SOURCE_YOUTUBE,
-				},
-				{
-					label: i18n.baseText('personalizationModal.friendWordOfMouth'),
-					value: REPORTED_SOURCE_FRIEND,
-				},
-				{
-					label: i18n.baseText('personalizationModal.podcast'),
-					value: REPORTED_SOURCE_PODCAST,
-				},
-				{
-					label: i18n.baseText('personalizationModal.event'),
-					value: REPORTED_SOURCE_EVENT,
-				},
-				{
-					label: i18n.baseText('personalizationModal.otherPleaseSpecify'),
-					value: REPORTED_SOURCE_OTHER,
-				},
-			],
-		},
-	},
-	{
-		name: REPORTED_SOURCE_OTHER_KEY,
-		properties: {
-			placeholder: i18n.baseText('personalizationModal.specifyReportedSource'),
-		},
-		shouldDisplay(values): boolean {
-			const reportedSource = (values as IPersonalizationLatestVersion)[REPORTED_SOURCE_KEY];
-			return reportedSource === REPORTED_SOURCE_OTHER;
-		},
-	},
-]);
+			},
+		] as const,
+);
 
 const onSave = () => {
 	formBus.emit('submit');
@@ -575,7 +578,7 @@ const closeDialog = () => {
 	}
 };
 
-const onSubmit = async (values: IPersonalizationLatestVersion) => {
+const onSubmit = async (values: object) => {
 	isSaving.value = true;
 
 	try {
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue
index 7a7bbbcad5..9da538164c 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue
@@ -4,11 +4,7 @@ import { useI18n } from '@n8n/i18n';
 import { ResourceType, splitName } from '@/utils/projects.utils';
 import type { Project, ProjectIcon as BadgeIcon } from '@/types/projects.types';
 import { ProjectTypes } from '@/types/projects.types';
-import type {
-	CredentialsResource,
-	FolderResource,
-	WorkflowResource,
-} from '../layouts/ResourcesListLayout.vue';
+import type { CredentialsResource, FolderResource, WorkflowResource } from '@/Interface';
 import { VIEWS } from '@/constants';
 
 type Props = {
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue
index de23ed69ac..02c35f3298 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue
@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import type { ButtonType } from '@n8n/design-system';
+import type { ButtonType, UserAction } from '@n8n/design-system';
 import { N8nIconButton, N8nActionToggle } from '@n8n/design-system';
-import { ref } from 'vue';
+import type { IUser } from 'n8n-workflow';
+import { useTemplateRef } from 'vue';
 
-type Action = {
-	label: string;
-	value: string;
-	disabled: boolean;
-};
 defineProps<{
-	actions: Action[];
+	actions: Array<UserAction<IUser>>;
 	disabled?: boolean;
 	type?: ButtonType;
 }>();
@@ -18,7 +14,7 @@ const emit = defineEmits<{
 	action: [id: string];
 }>();
 
-const actionToggleRef = ref<InstanceType<typeof N8nActionToggle> | null>(null);
+const actionToggleRef = useTemplateRef('actionToggleRef');
 
 defineExpose({
 	openActionToggle: (isOpen: boolean) => actionToggleRef.value?.openActionToggle(isOpen),
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue
index f0cf524304..48e504472a 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue
@@ -16,6 +16,7 @@ import ProjectCreateResource from '@/components/Projects/ProjectCreateResource.v
 import { useSettingsStore } from '@/stores/settings.store';
 import { useProjectPages } from '@/composables/useProjectPages';
 import { truncateTextToFitWidth } from '@/utils/formatters/textFormatter';
+import type { IUser } from 'n8n-workflow';
 
 const route = useRoute();
 const router = useRouter();
@@ -96,7 +97,7 @@ const createWorkflowButton = computed(() => ({
 }));
 
 const menu = computed(() => {
-	const items: UserAction[] = [
+	const items: Array<UserAction<IUser>> = [
 		{
 			value: ACTION_TYPES.CREDENTIAL,
 			label: i18n.baseText('projects.header.create.credential'),
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
index 0329978a8b..d163cfd1ea 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
@@ -240,7 +240,7 @@ onMounted(async () => {
 						v-for="p in filteredProjects"
 						:key="p.id"
 						:value="p.id"
-						:label="p.name"
+						:label="p.name ?? ''"
 					></N8nOption>
 				</N8nSelect>
 				<N8nText>
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectNavigation.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectNavigation.vue
index 28297a3545..dc774dda1f 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectNavigation.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectNavigation.vue
@@ -43,10 +43,10 @@ const shared = computed<IMenuItem>(() => ({
 	},
 }));
 
-const getProjectMenuItem = (project: ProjectListItem) => ({
+const getProjectMenuItem = (project: ProjectListItem): IMenuItem => ({
 	id: project.id,
-	label: project.name,
-	icon: project.icon,
+	label: project.name ?? '',
+	icon: project.icon as IMenuItem['icon'],
 	route: {
 		to: {
 			name: VIEWS.PROJECTS_WORKFLOWS,
@@ -70,6 +70,14 @@ const personalProject = computed<IMenuItem>(() => ({
 const showAddFirstProject = computed(
 	() => projectsStore.isTeamProjectFeatureEnabled && !displayProjects.value.length,
 );
+
+const activeTabId = computed(() => {
+	return (
+		(Array.isArray(projectsStore.projectNavActiveId)
+			? projectsStore.projectNavActiveId[0]
+			: projectsStore.projectNavActiveId) ?? undefined
+	);
+});
 </script>
 
 <template>
@@ -78,7 +86,7 @@ const showAddFirstProject = computed(
 			<N8nMenuItem
 				:item="home"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-home-menu-item"
 			/>
@@ -86,7 +94,7 @@ const showAddFirstProject = computed(
 				v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
 				:item="personalProject"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-personal-menu-item"
 			/>
@@ -94,7 +102,7 @@ const showAddFirstProject = computed(
 				v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
 				:item="shared"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-shared-menu-item"
 			/>
@@ -136,7 +144,7 @@ const showAddFirstProject = computed(
 				}"
 				:item="getProjectMenuItem(project)"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-menu-item"
 			/>
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectSharing.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectSharing.vue
index 13f6a12a42..28b59bfb50 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectSharing.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectSharing.vue
@@ -136,7 +136,7 @@ watch(
 				v-for="project in filteredProjects"
 				:key="project.id"
 				:value="project.id"
-				:label="project.name"
+				:label="project.name ?? ''"
 			>
 				<ProjectSharingInfo :project="project" />
 			</N8nOption>
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectTabs.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectTabs.vue
index 7136bed245..88d90a76e3 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectTabs.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectTabs.vue
@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import { VIEWS } from '@/constants';
 import { useI18n } from '@n8n/i18n';
 import type { BaseTextKey } from '@n8n/i18n';
+import type { TabOptions } from '@n8n/design-system';
 
 type Props = {
 	showSettings?: boolean;
@@ -23,6 +24,8 @@ const route = useRoute();
 
 const selectedTab = ref<RouteRecordName | null | undefined>('');
 
+const selectedTabLabel = computed(() => (selectedTab.value ? String(selectedTab.value) : ''));
+
 const projectId = computed(() => {
 	return Array.isArray(route?.params?.projectId)
 		? route.params.projectId[0]
@@ -70,16 +73,16 @@ const createTab = (
 	label: BaseTextKey,
 	routeKey: string,
 	routes: Record<string, { name: RouteRecordName; params?: Record<string, string | number> }>,
-) => {
+): TabOptions<string> => {
 	return {
 		label: locale.baseText(label),
-		value: routes[routeKey].name,
+		value: routes[routeKey].name as string,
 		to: routes[routeKey],
 	};
 };
 
 // Generate the tabs configuration
-const options = computed(() => {
+const options = computed<Array<TabOptions<string>>>(() => {
 	const routes = getRouteConfigs();
 	const tabs = [
 		createTab('mainSidebar.workflows', 'workflows', routes),
@@ -93,7 +96,7 @@ const options = computed(() => {
 	if (props.showSettings) {
 		tabs.push({
 			label: locale.baseText('projects.settings'),
-			value: VIEWS.PROJECT_SETTINGS,
+			value: VIEWS.PROJECT_SETTINGS as string,
 			to: { name: VIEWS.PROJECT_SETTINGS, params: { projectId: projectId.value } },
 		});
 	}
@@ -110,8 +113,17 @@ watch(
 	},
 	{ immediate: true },
 );
+
+function onSelectTab(value: string | number) {
+	selectedTab.value = value as RouteRecordName;
+}
 </script>
 
 <template>
-	<N8nTabs v-model="selectedTab" :options="options" data-test-id="project-tabs" />
+	<N8nTabs
+		:model-value="selectedTabLabel"
+		:options="options"
+		data-test-id="project-tabs"
+		@update:model-value="onSelectTab"
+	/>
 </template>
diff --git a/packages/frontend/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue b/packages/frontend/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
index a8219f4229..9c46d06c3a 100644
--- a/packages/frontend/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
+++ b/packages/frontend/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
@@ -4,7 +4,7 @@ import Modal from '../Modal.vue';
 import { PROMPT_MFA_CODE_MODAL_KEY } from '@/constants';
 import { useI18n } from '@n8n/i18n';
 import { promptMfaCodeBus } from '@/event-bus';
-import type { IFormInputs } from '@/Interface';
+import { type IFormInput } from '@/Interface';
 import { createFormEventBus } from '@n8n/design-system/utils';
 import { validate as validateUuid } from 'uuid';
 
@@ -13,7 +13,7 @@ const i18n = useI18n();
 const formBus = createFormEventBus();
 const readyToSubmit = ref(false);
 
-const formFields: IFormInputs = [
+const formFields: IFormInput[] = [
 	{
 		name: 'mfaCodeOrMfaRecoveryCode',
 		initialValue: '',
@@ -25,9 +25,14 @@ const formFields: IFormInputs = [
 			required: true,
 		},
 	},
-];
+] as const;
 
-function onSubmit(values: { mfaCodeOrMfaRecoveryCode: string }) {
+function onSubmit(values: object) {
+	if (
+		!('mfaCodeOrMfaRecoveryCode' in values && typeof values.mfaCodeOrMfaRecoveryCode === 'string')
+	) {
+		return;
+	}
 	if (validateUuid(values.mfaCodeOrMfaRecoveryCode)) {
 		promptMfaCodeBus.emit('close', {
 			mfaRecoveryCode: values.mfaCodeOrMfaRecoveryCode,
diff --git a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index fb79d88139..edac5a0dea 100644
--- a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -220,9 +220,9 @@ const hasMultipleModes = computed(() => {
 });
 
 const hasOnlyListMode = computed(() => hasOnlyListModeUtil(props.parameter));
-const valueToDisplay = computed<NodeParameterValue>(() => {
+const valueToDisplay = computed<INodeParameterResourceLocator['value']>(() => {
 	if (typeof props.modelValue !== 'object') {
-		return props.modelValue;
+		return `${props.modelValue}`;
 	}
 
 	if (isListMode.value) {
@@ -398,6 +398,9 @@ const handleAddResourceClick = async () => {
 	const newResource = (await nodeTypesStore.getNodeParameterActionResult(
 		requestParams,
 	)) as NodeParameterValue;
+	if (typeof newResource === 'boolean') {
+		return;
+	}
 
 	refreshList();
 	await loadResources();
@@ -563,7 +566,7 @@ function findModeByName(name: string): INodePropertyMode | null {
 	return null;
 }
 
-function getModeLabel(mode: INodePropertyMode): string | null {
+function getModeLabel(mode: INodePropertyMode): string | undefined {
 	if (mode.name === 'id' || mode.name === 'url' || mode.name === 'list') {
 		return i18n.baseText(`resourceLocator.mode.${mode.name}`);
 	}
@@ -571,7 +574,7 @@ function getModeLabel(mode: INodePropertyMode): string | null {
 	return mode.displayName;
 }
 
-function onInputChange(value: NodeParameterValue): void {
+function onInputChange(value: INodeParameterResourceLocator['value']): void {
 	const params: INodeParameterResourceLocator = { __rl: true, value, mode: selectedMode.value };
 	if (isListMode.value) {
 		const resource = currentQueryResults.value.find((result) => result.value === value);
@@ -823,7 +826,7 @@ function showResourceDropdown() {
 	resourceDropdownVisible.value = true;
 }
 
-function onListItemSelected(value: NodeParameterValue) {
+function onListItemSelected(value: INodeParameterResourceLocator['value']) {
 	onInputChange(value);
 	hideResourceDropdown();
 }
diff --git a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index f59bba0850..ab88733f96 100644
--- a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -4,7 +4,7 @@ import type { IResourceLocatorResultExpanded } from '@/Interface';
 import { N8nLoading } from '@n8n/design-system';
 import type { EventBus } from '@n8n/utils/event-bus';
 import { createEventBus } from '@n8n/utils/event-bus';
-import type { NodeParameterValue } from 'n8n-workflow';
+import type { INodeParameterResourceLocator, NodeParameterValue } from 'n8n-workflow';
 import { computed, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';
 
 const SEARCH_BAR_HEIGHT_PX = 40;
@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	'update:modelValue': [value: NodeParameterValue];
+	'update:modelValue': [value: INodeParameterResourceLocator['value']];
 	loadMore: [];
 	filter: [filter: string];
 	addResourceClick: [];
@@ -164,7 +164,7 @@ function onKeyDown(e: KeyboardEvent) {
 		const selected = sortedResources.value[hoverIndex.value - 1]?.value;
 
 		// Selected resource can be empty when loading or empty results
-		if (selected) {
+		if (selected && typeof selected !== 'boolean') {
 			emit('update:modelValue', selected);
 		}
 	}
@@ -175,6 +175,10 @@ function onFilterInput(value: string) {
 }
 
 function onItemClick(selected: string | number | boolean) {
+	if (typeof selected === 'boolean') {
+		return;
+	}
+
 	emit('update:modelValue', selected);
 }
 
diff --git a/packages/frontend/editor-ui/src/components/SSOLogin.vue b/packages/frontend/editor-ui/src/components/SSOLogin.vue
index fa26cec2bd..057e969c38 100644
--- a/packages/frontend/editor-ui/src/components/SSOLogin.vue
+++ b/packages/frontend/editor-ui/src/components/SSOLogin.vue
@@ -28,7 +28,7 @@ const onSSOLogin = async () => {
 		<div :class="$style.divider">
 			<span>{{ i18n.baseText('sso.login.divider') }}</span>
 		</div>
-		<n8n-button
+		<N8nButton
 			size="large"
 			type="primary"
 			outline
diff --git a/packages/frontend/editor-ui/src/components/SaveButton.vue b/packages/frontend/editor-ui/src/components/SaveButton.vue
index 8293ba1f61..4fc2320f92 100644
--- a/packages/frontend/editor-ui/src/components/SaveButton.vue
+++ b/packages/frontend/editor-ui/src/components/SaveButton.vue
@@ -2,13 +2,14 @@
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
 import { useI18n } from '@n8n/i18n';
 import { computed } from 'vue';
+import type { ButtonType } from '@n8n/design-system';
 
 const props = withDefaults(
 	defineProps<{
 		saved: boolean;
 		isSaving?: boolean;
 		disabled?: boolean;
-		type?: string;
+		type?: ButtonType;
 		withShortcut?: boolean;
 		shortcutTooltip?: string;
 		savingLabel?: string;
diff --git a/packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.vue b/packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.vue
index da45656efd..0723cc3252 100644
--- a/packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.vue
+++ b/packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { WorkflowResource } from '@/components/layouts/ResourcesListLayout.vue';
 import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
 import { useLoadingService } from '@/composables/useLoadingService';
 import { useTelemetry } from '@/composables/useTelemetry';
@@ -41,6 +40,7 @@ import { useRoute } from 'vue-router';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import Modal from './Modal.vue';
+import { type WorkflowResource } from '@/Interface';
 
 const props = defineProps<{
 	data: { eventBus: EventBus; status: SourceControlledFile[] };
diff --git a/packages/frontend/editor-ui/src/components/TemplateDetails.vue b/packages/frontend/editor-ui/src/components/TemplateDetails.vue
index c2d9c18d52..70307710b1 100644
--- a/packages/frontend/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/frontend/editor-ui/src/components/TemplateDetails.vue
@@ -9,13 +9,15 @@ import type {
 	ITemplatesNode,
 	ITemplatesWorkflow,
 } from '@n8n/rest-api-client/api/templates';
+import type { ITag } from '@n8n/rest-api-client/api/tags';
 import { useTemplatesStore } from '@/stores/templates.store';
 import TimeAgo from '@/components/TimeAgo.vue';
 import { isFullTemplatesCollection, isTemplatesWorkflow } from '@/utils/templates/typeGuards';
 import { useRouter } from 'vue-router';
 import { useI18n } from '@n8n/i18n';
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
 	template: ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null;
 	blockTitle: string;
 	loading: boolean;
@@ -26,6 +28,15 @@ const i18n = useI18n();
 
 const templatesStore = useTemplatesStore();
 
+const categoriesAsTags = computed<ITag[]>(() =>
+	props.template && 'categories' in props.template
+		? props.template.categories.map((category) => ({
+				id: `${category.id}`,
+				name: category.name,
+			}))
+		: [],
+);
+
 const redirectToCategory = (id: string) => {
 	templatesStore.resetSessionId();
 	void router.push(`/templates?categories=${id}`);
@@ -62,10 +73,10 @@ const redirectToSearchPage = (node: ITemplatesNode) => {
 		</TemplateDetailsBlock>
 
 		<TemplateDetailsBlock
-			v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
+			v-if="!loading && isFullTemplatesCollection(template) && categoriesAsTags.length > 0"
 			:title="i18n.baseText('template.details.categories')"
 		>
-			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
+			<n8n-tags :tags="categoriesAsTags" @click:tag="redirectToCategory" />
 		</TemplateDetailsBlock>
 
 		<TemplateDetailsBlock
diff --git a/packages/frontend/editor-ui/src/components/VirtualSchema.vue b/packages/frontend/editor-ui/src/components/VirtualSchema.vue
index 12e59d9b60..1e6fd656ab 100644
--- a/packages/frontend/editor-ui/src/components/VirtualSchema.vue
+++ b/packages/frontend/editor-ui/src/components/VirtualSchema.vue
@@ -473,7 +473,7 @@ const onDragEnd = (el: HTMLElement) => {
 						</VirtualSchemaItem>
 
 						<N8nTooltip v-else-if="item.type === 'icon'" :content="item.tooltip" placement="top">
-							<N8nIcon :size="14" :icon="item.icon" class="icon" />
+							<N8nIcon size="small" :icon="item.icon" class="icon" />
 						</N8nTooltip>
 
 						<div
diff --git a/packages/frontend/editor-ui/src/components/Workers/WorkerAccordion.ee.vue b/packages/frontend/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
index 7a5d080050..0ce4894ba1 100644
--- a/packages/frontend/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
+++ b/packages/frontend/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import type { IconColor } from '@n8n/design-system';
 
 const props = withDefaults(
 	defineProps<{
 		icon?: string;
-		iconColor?: string;
+		iconColor?: IconColor;
 		initialExpanded?: boolean;
 	}>(),
 	{
 		icon: 'tasks',
-		iconColor: 'black',
+		iconColor: 'text-dark',
 		initialExpanded: true,
 	},
 );
diff --git a/packages/frontend/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue b/packages/frontend/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
index f34322aea7..f57ff7139b 100644
--- a/packages/frontend/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
+++ b/packages/frontend/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
@@ -95,7 +95,7 @@ orchestrationStore.$onAction(({ name, store }) => {
 </script>
 
 <template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
+	<WorkerAccordion icon="tasks" icon-color="text-dark" :initial-expanded="false">
 		<template #title>
 			{{ i18n.baseText('workerList.item.chartsTitle') }}
 		</template>
diff --git a/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue b/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
index 1e96af1f48..2b0fc98178 100644
--- a/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
+++ b/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
@@ -20,7 +20,7 @@ function runningSince(started: Date): string {
 </script>
 
 <template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="true">
+	<WorkerAccordion icon="tasks" icon-color="text-dark" :initial-expanded="true">
 		<template #title>
 			{{ i18n.baseText('workerList.item.jobListTitle') }} ({{ items.length }})
 		</template>
diff --git a/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue b/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
index bce6d3fdbd..e9f2b8c6c5 100644
--- a/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
+++ b/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
@@ -25,7 +25,7 @@ function onCopyToClipboard(content: string) {
 </script>
 
 <template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
+	<WorkerAccordion icon="tasks" icon-color="text-dark" :initial-expanded="false">
 		<template #title>
 			{{ i18n.baseText('workerList.item.netListTitle') }} ({{ items.length }})
 		</template>
diff --git a/packages/frontend/editor-ui/src/components/WorkflowActivationConflictingWebhookModal.vue b/packages/frontend/editor-ui/src/components/WorkflowActivationConflictingWebhookModal.vue
index 0e096da931..987d369e76 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowActivationConflictingWebhookModal.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowActivationConflictingWebhookModal.vue
@@ -51,7 +51,7 @@ const onClick = async () => {
 			<div :class="$style.container">
 				<div>
 					<n8n-text color="text-base"> You can deactivate </n8n-text>
-					<n8n-link :to="workflowUrl" underline="true"> '{{ data.workflowName }}' </n8n-link>
+					<n8n-link :to="workflowUrl" :underline="true"> '{{ data.workflowName }}' </n8n-link>
 					<n8n-text color="text-base">
 						and activate this one, or adjust the following URL path in either workflow:
 					</n8n-text>
diff --git a/packages/frontend/editor-ui/src/components/WorkflowCard.vue b/packages/frontend/editor-ui/src/components/WorkflowCard.vue
index c91ea4b8f0..4fe79967fc 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowCard.vue
@@ -24,7 +24,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { ResourceType } from '@/utils/projects.utils';
 import type { EventBus } from '@n8n/utils/event-bus';
-import type { WorkflowResource } from './layouts/ResourcesListLayout.vue';
+import type { WorkflowResource } from '@/Interface';
 import type { IUser } from 'n8n-workflow';
 import { type ProjectSharingData, ProjectTypes } from '@/types/projects.types';
 import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
@@ -406,6 +406,11 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 		await router.push(item.href);
 	}
 };
+
+const tags = computed(
+	() =>
+		props.data.tags?.map((tag) => (typeof tag === 'string' ? { id: tag, name: tag } : tag)) ?? [],
+);
 </script>
 
 <template>
@@ -448,7 +453,7 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 					:class="$style.cardTags"
 				>
 					<n8n-tags
-						:tags="data.tags"
+						:tags="tags"
 						:truncate-at="3"
 						truncate
 						data-test-id="workflow-card-tags"
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.test.ts b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.test.ts
index 2ea28ebbd1..65e771a7e1 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.test.ts
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.test.ts
@@ -9,9 +9,10 @@ import WorkflowHistoryContent from '@/components/WorkflowHistory/WorkflowHistory
 import type { WorkflowHistoryActionTypes } from '@n8n/rest-api-client/api/workflowHistory';
 import { workflowVersionDataFactory } from '@/stores/__tests__/utils/workflowHistoryTestUtils';
 import type { IWorkflowDb } from '@/Interface';
+import type { IUser } from 'n8n-workflow';
 
 const actionTypes: WorkflowHistoryActionTypes = ['restore', 'clone', 'open', 'download'];
-const actions: UserAction[] = actionTypes.map((value) => ({
+const actions: Array<UserAction<IUser>> = actionTypes.map((value) => ({
 	label: value,
 	disabled: false,
 	value,
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index 91fe867d2c..44c2c23681 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -9,13 +9,14 @@ import type {
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue';
 import { useI18n } from '@n8n/i18n';
+import type { IUser } from 'n8n-workflow';
 
 const i18n = useI18n();
 
 const props = defineProps<{
 	workflow: IWorkflowDb | null;
 	workflowVersion: WorkflowVersion | null;
-	actions: UserAction[];
+	actions: Array<UserAction<IUser>>;
 	isListLoading?: boolean;
 	isFirstItemShown?: boolean;
 }>();
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.test.ts b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.test.ts
index c3968eee63..d27064eb4f 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.test.ts
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.test.ts
@@ -7,6 +7,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import WorkflowHistoryList from '@/components/WorkflowHistory/WorkflowHistoryList.vue';
 import type { WorkflowHistoryActionTypes } from '@n8n/rest-api-client/api/workflowHistory';
 import { workflowHistoryDataFactory } from '@/stores/__tests__/utils/workflowHistoryTestUtils';
+import type { IUser } from 'n8n-workflow';
 
 vi.stubGlobal(
 	'IntersectionObserver',
@@ -19,7 +20,7 @@ vi.stubGlobal(
 );
 
 const actionTypes: WorkflowHistoryActionTypes = ['restore', 'clone', 'open', 'download'];
-const actions: UserAction[] = actionTypes.map((value) => ({
+const actions: Array<UserAction<IUser>> = actionTypes.map((value) => ({
 	label: value,
 	disabled: false,
 	value,
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
index 279e1e13b1..631dbe1127 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
@@ -9,11 +9,12 @@ import type {
 	WorkflowHistoryRequestParams,
 } from '@n8n/rest-api-client/api/workflowHistory';
 import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue';
+import type { IUser } from 'n8n-workflow';
 
 const props = defineProps<{
 	items: WorkflowHistory[];
 	activeItem: WorkflowHistory | null;
-	actions: UserAction[];
+	actions: Array<UserAction<IUser>>;
 	requestNumberOfItems: number;
 	lastReceivedItemsLength: number;
 	evaluatedPruneTime: number;
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.test.ts b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.test.ts
index 27f6d49611..201d934816 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.test.ts
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.test.ts
@@ -5,9 +5,10 @@ import { createComponentRenderer } from '@/__tests__/render';
 import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue';
 import type { WorkflowHistoryActionTypes } from '@n8n/rest-api-client/api/workflowHistory';
 import { workflowHistoryDataFactory } from '@/stores/__tests__/utils/workflowHistoryTestUtils';
+import { type IUser } from 'n8n-workflow';
 
 const actionTypes: WorkflowHistoryActionTypes = ['restore', 'clone', 'open', 'download'];
-const actions: UserAction[] = actionTypes.map((value) => ({
+const actions: Array<UserAction<IUser>> = actionTypes.map((value) => ({
 	label: value,
 	disabled: false,
 	value,
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
index f559f73814..a6eb40189e 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
@@ -8,11 +8,12 @@ import type {
 	WorkflowHistoryActionTypes,
 } from '@n8n/rest-api-client/api/workflowHistory';
 import { useI18n } from '@n8n/i18n';
+import type { IUser } from 'n8n-workflow';
 
 const props = defineProps<{
 	item: WorkflowHistory;
 	index: number;
-	actions: UserAction[];
+	actions: Array<UserAction<IUser>>;
 	isActive: boolean;
 }>();
 const emit = defineEmits<{
@@ -62,7 +63,8 @@ const idLabel = computed<string>(() =>
 	i18n.baseText('workflowHistory.item.id', { interpolate: { id: props.item.versionId } }),
 );
 
-const onAction = (action: WorkflowHistoryActionTypes[number]) => {
+const onAction = (value: string) => {
+	const action = value as WorkflowHistoryActionTypes[number];
 	emit('action', {
 		action,
 		id: props.item.versionId,
diff --git a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue
index 35e93ce075..6e6cdae850 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue
@@ -2,6 +2,7 @@
 import { useI18n } from '@n8n/i18n';
 import Modal from '@/components/Modal.vue';
 import { useUIStore } from '@/stores/ui.store';
+import type { ButtonType } from '@n8n/design-system';
 
 const props = defineProps<{
 	modalName: string;
@@ -11,7 +12,7 @@ const props = defineProps<{
 		beforeClose: () => void;
 		buttons: Array<{
 			text: string;
-			type: string;
+			type: ButtonType;
 			action: () => void;
 		}>;
 	};
diff --git a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
index 914e0b4eff..b73dd2a2b1 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
@@ -122,9 +122,9 @@ const getCreateResourceLabel = computed(() => {
 	});
 });
 
-const valueToDisplay = computed<NodeParameterValue>(() => {
+const valueToDisplay = computed<INodeParameterResourceLocator['value']>(() => {
 	if (typeof props.modelValue !== 'object') {
-		return props.modelValue;
+		return props.modelValue ?? '';
 	}
 
 	if (isListMode.value) {
@@ -208,9 +208,6 @@ async function refreshCachedWorkflow() {
 	}
 
 	const workflowId = props.modelValue.value;
-	if (workflowId === true) {
-		return;
-	}
 	try {
 		await workflowsStore.fetchWorkflow(`${workflowId}`);
 		onInputChange(workflowId);
diff --git a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/useWorkflowResourceLocatorModes.ts b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/useWorkflowResourceLocatorModes.ts
index 2305c5f3b4..93c4609eb2 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/useWorkflowResourceLocatorModes.ts
+++ b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/useWorkflowResourceLocatorModes.ts
@@ -49,7 +49,7 @@ export function useWorkflowResourceLocatorModes(
 		};
 	}
 
-	function getModeLabel(mode: INodePropertyMode): string | null {
+	function getModeLabel(mode: INodePropertyMode): string | undefined {
 		if (mode.name === 'id' || mode.name === 'list') {
 			return i18n.baseText(`resourceLocator.mode.${mode.name}`);
 		}
diff --git a/packages/frontend/editor-ui/src/components/WorkflowSettings.vue b/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
index 2d717e525d..8b04342b8a 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
@@ -701,7 +701,7 @@ onMounted(async () => {
 						>
 							<N8nOption
 								v-for="option of saveManualOptions"
-								:key="option.key"
+								:key="`${option.key}`"
 								:label="option.value"
 								:value="option.key"
 							>
@@ -730,7 +730,7 @@ onMounted(async () => {
 						>
 							<N8nOption
 								v-for="option of saveExecutionProgressOptions"
-								:key="option.key"
+								:key="`${option.key}`"
 								:label="option.value"
 								:value="option.key"
 							>
diff --git a/packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap b/packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
index fa11a38ead..62e4ff5fa2 100644
--- a/packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
+++ b/packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
@@ -316,7 +316,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
         
         
         <span
-          class="n8n-text compact size-14 regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"
+          class="n8n-text compact size-small regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"
           data-v-d00cba9a=""
         >
           
@@ -325,7 +325,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
             beatfade="false"
             border="false"
             bounce="false"
-            class="14"
+            class="small"
             fade="false"
             fixedwidth="false"
             flash="false"
diff --git a/packages/frontend/editor-ui/src/components/banners/BaseBanner.vue b/packages/frontend/editor-ui/src/components/banners/BaseBanner.vue
index 7e3a9a3b26..750edb54a2 100644
--- a/packages/frontend/editor-ui/src/components/banners/BaseBanner.vue
+++ b/packages/frontend/editor-ui/src/components/banners/BaseBanner.vue
@@ -3,10 +3,11 @@ import { useUIStore } from '@/stores/ui.store';
 import { computed, useSlots } from 'vue';
 import type { BannerName } from '@n8n/api-types';
 import { useI18n } from '@n8n/i18n';
+import type { CalloutTheme } from '@n8n/design-system';
 
 interface Props {
 	name: BannerName;
-	theme?: string;
+	theme?: CalloutTheme;
 	customIcon?: string;
 	dismissible?: boolean;
 }
diff --git a/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue b/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
index 12434fd2ae..d52b4ba5ca 100644
--- a/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
+++ b/packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
@@ -157,6 +157,12 @@ const goToUpgrade = () => {
 	void pageRedirectionHelper.goToUpgrade('custom-data-filter', 'upgrade-custom-data-filter');
 };
 
+const onExactMatchChange = (e: string | number | boolean) => {
+	if (typeof e === 'boolean') {
+		onFilterMetaChange(0, 'exactMatch', e);
+	}
+};
+
 onBeforeMount(() => {
 	isCustomDataFilterTracked.value = false;
 });
@@ -348,7 +354,7 @@ onBeforeMount(() => {
 								:model-value="filter.metadata[0]?.exactMatch"
 								:disabled="!isAdvancedExecutionFilterEnabled"
 								data-test-id="execution-filter-saved-data-exact-match-checkbox"
-								@update:model-value="onFilterMetaChange(0, 'exactMatch', $event)"
+								@update:model-value="onExactMatchChange"
 							/>
 						</n8n-tooltip>
 					</div>
diff --git a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsInfoAccordion.vue b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsInfoAccordion.vue
index d7a332bb63..24448e8a6c 100644
--- a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsInfoAccordion.vue
+++ b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsInfoAccordion.vue
@@ -10,6 +10,8 @@ import { deepCopy } from 'n8n-workflow';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { useI18n } from '@n8n/i18n';
 import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
+import type { IconColor } from '@n8n/design-system';
+import { type IAccordionItem } from '@n8n/design-system/components/N8nInfoAccordion/InfoAccordion.vue';
 
 interface IWorkflowSaveSettings {
 	saveFailedExecutions: boolean;
@@ -47,7 +49,7 @@ const workflowSaveSettings = ref({
 	saveTestExecutions: false,
 } as IWorkflowSaveSettings);
 
-const accordionItems = computed(() => [
+const accordionItems = computed((): IAccordionItem[] => [
 	{
 		id: 'productionExecutions',
 		label: locale.baseText('executionsLandingPage.emptyState.accordion.productionExecutions'),
@@ -77,7 +79,7 @@ const shouldExpandAccordion = computed(() => {
 		!workflowSaveSettings.value.saveTestExecutions
 	);
 });
-const productionExecutionsIcon = computed(() => {
+const productionExecutionsIcon = computed((): { color: IconColor; icon: string } => {
 	if (productionExecutionsStatus.value === 'saving') {
 		return { icon: 'check', color: 'success' };
 	} else if (productionExecutionsStatus.value === 'not-saving') {
@@ -104,9 +106,9 @@ const accordionIcon = computed(() => {
 		!workflowSaveSettings.value.saveTestExecutions ||
 		productionExecutionsStatus.value !== 'saving'
 	) {
-		return { icon: 'exclamation-triangle', color: 'warning' };
+		return { icon: 'exclamation-triangle', color: 'warning' as IconColor };
 	}
-	return null;
+	return undefined;
 });
 const currentWorkflowId = computed(() => workflowsStore.workflowId);
 const isNewWorkflow = computed(() => {
diff --git a/packages/frontend/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/frontend/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index 3476f18b39..b5e268918a 100644
--- a/packages/frontend/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/frontend/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -4,7 +4,7 @@ import { EnterpriseEditionFeature } from '@/constants';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { ProjectSharingData } from '@/types/projects.types';
 import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
-import type { BaseFilters } from '../layouts/ResourcesListLayout.vue';
+import type { BaseFilters } from '@/Interface';
 import { useI18n } from '@n8n/i18n';
 
 type IResourceFiltersType = Record<string, boolean | string | string[]>;
diff --git a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts
index 6c6ba1dc02..ce6c392bdc 100644
--- a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts
+++ b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts
@@ -1,7 +1,8 @@
 import { setActivePinia } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
 import { createComponentRenderer } from '@/__tests__/render';
-import ResourcesListLayout, { type Resource } from '@/components/layouts/ResourcesListLayout.vue';
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import type { Resource } from '@/Interface';
 import type router from 'vue-router';
 import type { ProjectSharingData } from 'n8n-workflow';
 import { waitAllPromises } from '@/__tests__/utils';
diff --git a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 6203288042..455db88eb6 100644
--- a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -1,7 +1,6 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="ResourceType extends Resource = Resource">
 import { computed, nextTick, ref, onMounted, watch, onBeforeUnmount } from 'vue';
 
-import { type ProjectSharingData } from '@/types/projects.types';
 import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
@@ -13,64 +12,12 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useRoute, useRouter } from 'vue-router';
 
 import type { BaseTextKey } from '@n8n/i18n';
-import type { Scope } from '@n8n/permissions';
-import type { ITag } from '@n8n/rest-api-client/api/tags';
-import type { BaseFolderItem, BaseResource, ResourceParentFolder } from '@/Interface';
+import type { BaseFilters, Resource, SortingAndPaginationUpdates } from '@/Interface';
 import { isSharedResource, isResourceSortableByDate } from '@/utils/typeGuards';
 import { useN8nLocalStorage } from '@/composables/useN8nLocalStorage';
 
 type ResourceKeyType = 'credentials' | 'workflows' | 'variables' | 'folders';
 
-export type FolderResource = BaseFolderItem & {
-	resourceType: 'folder';
-};
-
-export type WorkflowResource = BaseResource & {
-	resourceType: 'workflow';
-	updatedAt: string;
-	createdAt: string;
-	active: boolean;
-	isArchived: boolean;
-	homeProject?: ProjectSharingData;
-	scopes?: Scope[];
-	tags?: ITag[] | string[];
-	sharedWithProjects?: ProjectSharingData[];
-	readOnly: boolean;
-	parentFolder?: ResourceParentFolder;
-};
-
-export type VariableResource = BaseResource & {
-	resourceType: 'variable';
-	key?: string;
-	value?: string;
-};
-
-export type CredentialsResource = BaseResource & {
-	resourceType: 'credential';
-	updatedAt: string;
-	createdAt: string;
-	type: string;
-	homeProject?: ProjectSharingData;
-	scopes?: Scope[];
-	sharedWithProjects?: ProjectSharingData[];
-	readOnly: boolean;
-	needsSetup: boolean;
-};
-
-export type Resource = WorkflowResource | FolderResource | CredentialsResource | VariableResource;
-
-export type BaseFilters = {
-	search: string;
-	homeProject: string;
-	[key: string]: boolean | string | string[];
-};
-
-export type SortingAndPaginationUpdates = {
-	page?: number;
-	pageSize?: number;
-	sort?: string;
-};
-
 const route = useRoute();
 const router = useRouter();
 const i18n = useI18n();
@@ -82,19 +29,19 @@ const n8nLocalStorage = useN8nLocalStorage();
 const props = withDefaults(
 	defineProps<{
 		resourceKey: ResourceKeyType;
-		displayName?: (resource: Resource) => string;
-		resources: Resource[];
+		displayName?: (resource: ResourceType) => string;
+		resources: ResourceType[];
 		disabled: boolean;
 		initialize?: () => Promise<void>;
 		filters?: BaseFilters;
 		additionalFiltersHandler?: (
-			resource: Resource,
+			resource: ResourceType,
 			filters: BaseFilters,
 			matches: boolean,
 		) => boolean;
 		shareable?: boolean;
 		showFiltersDropdown?: boolean;
-		sortFns?: Record<string, (a: Resource, b: Resource) => number>;
+		sortFns?: Record<string, (a: ResourceType, b: ResourceType) => number>;
 		sortOptions?: string[];
 		type?: 'datatable' | 'list-full' | 'list-paginated';
 		typeProps: { itemSize: number } | { columns: DatatableColumn[] };
@@ -108,7 +55,7 @@ const props = withDefaults(
 		hasEmptyState?: boolean;
 	}>(),
 	{
-		displayName: (resource: Resource) => resource.name || '',
+		displayName: (resource: ResourceType) => resource.name || '',
 		initialize: async () => {},
 		filters: () => ({ search: '', homeProject: '' }),
 		sortFns: () => ({}),
@@ -190,7 +137,7 @@ const filterKeys = computed(() => {
 	return Object.keys(filtersModel.value);
 });
 
-const filteredAndSortedResources = computed(() => {
+const filteredAndSortedResources = computed((): ResourceType[] => {
 	if (props.dontPerformSortingAndFiltering) {
 		return props.resources;
 	}
@@ -200,7 +147,11 @@ const filteredAndSortedResources = computed(() => {
 		if (filtersModel.value.homeProject && isSharedResource(resource)) {
 			matches =
 				matches &&
-				!!(resource.homeProject && resource.homeProject.id === filtersModel.value.homeProject);
+				!!(
+					'homeProject' in resource &&
+					resource.homeProject &&
+					resource.homeProject.id === filtersModel.value.homeProject
+				);
 		}
 
 		if (filtersModel.value.search) {
@@ -222,16 +173,27 @@ const filteredAndSortedResources = computed(() => {
 				if (!sortableByDate) {
 					return 0;
 				}
-				return props.sortFns.lastUpdated
-					? props.sortFns.lastUpdated(a, b)
-					: new Date(b.updatedAt ?? '').valueOf() - new Date(a.updatedAt ?? '').valueOf();
+
+				if ('updatedAt' in a && 'updatedAt' in b) {
+					return props.sortFns.lastUpdated
+						? props.sortFns.lastUpdated(a, b)
+						: new Date(b.updatedAt ?? '').valueOf() - new Date(a.updatedAt ?? '').valueOf();
+				}
+
+				return 0;
+
 			case 'lastCreated':
 				if (!sortableByDate) {
 					return 0;
 				}
-				return props.sortFns.lastCreated
-					? props.sortFns.lastCreated(a, b)
-					: new Date(b.createdAt ?? '').valueOf() - new Date(a.createdAt ?? '').valueOf();
+
+				if ('createdAt' in a && 'createdAt' in b) {
+					return props.sortFns.lastCreated
+						? props.sortFns.lastCreated(a, b)
+						: new Date(b.createdAt ?? '').valueOf() - new Date(a.createdAt ?? '').valueOf();
+				}
+
+				return 0;
 			case 'nameAsc':
 				return props.sortFns.nameAsc
 					? props.sortFns.nameAsc(a, b)
@@ -718,7 +680,7 @@ defineExpose({
 						data-test-id="resources-list"
 						:items="filteredAndSortedResources"
 						:item-size="itemSize()"
-						item-key="id"
+						:item-key="'id'"
 					>
 						<template #default="{ item, updateItemSize }">
 							<slot :data="item" :update-item-size="updateItemSize" />
diff --git a/packages/frontend/editor-ui/src/composables/useWorkflowSaving.ts b/packages/frontend/editor-ui/src/composables/useWorkflowSaving.ts
index 1227a32be1..c8c4cf5f98 100644
--- a/packages/frontend/editor-ui/src/composables/useWorkflowSaving.ts
+++ b/packages/frontend/editor-ui/src/composables/useWorkflowSaving.ts
@@ -386,7 +386,7 @@ export function useWorkflowSaving({ router }: { router: ReturnType<typeof useRou
 			});
 
 			const createdTags = (workflowData.tags || []) as ITag[];
-			const tagIds = createdTags.map((tag: ITag): string => tag.id);
+			const tagIds = createdTags.map((tag: ITag) => tag.id);
 			workflowsStore.setWorkflowTagIds(tagIds);
 
 			const templateId = router.currentRoute.value.query.templateId;
diff --git a/packages/frontend/editor-ui/src/features/logs/components/MessageOptionAction.vue b/packages/frontend/editor-ui/src/features/logs/components/MessageOptionAction.vue
index bc5a649a5f..964a4901eb 100644
--- a/packages/frontend/editor-ui/src/features/logs/components/MessageOptionAction.vue
+++ b/packages/frontend/editor-ui/src/features/logs/components/MessageOptionAction.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
+import { useAttrs } from 'vue';
 
 defineProps({
 	label: {
@@ -15,6 +16,13 @@ defineProps({
 		default: 'top',
 	},
 });
+
+const attrs = useAttrs();
+
+const onClick = () => {
+	// @ts-expect-error Attrs onClick is not typed
+	attrs.onClick?.();
+};
 </script>
 
 <template>
@@ -23,7 +31,7 @@ defineProps({
 			<template #content>
 				{{ label }}
 			</template>
-			<n8n-icon :class="$style.icon" :icon="icon" size="xsmall" @click="$attrs.onClick" />
+			<n8n-icon :class="$style.icon" :icon="icon" size="xsmall" @click="onClick" />
 		</n8n-tooltip>
 	</div>
 </template>
diff --git a/packages/frontend/editor-ui/src/utils/typeGuards.ts b/packages/frontend/editor-ui/src/utils/typeGuards.ts
index 7856ce4d57..514e22fa4a 100644
--- a/packages/frontend/editor-ui/src/utils/typeGuards.ts
+++ b/packages/frontend/editor-ui/src/utils/typeGuards.ts
@@ -4,19 +4,21 @@ import type {
 	TriggerPanelDefinition,
 } from 'n8n-workflow';
 import { nodeConnectionTypes } from 'n8n-workflow';
-import type { IExecutionResponse, ICredentialsResponse, NewCredentialsModal } from '@/Interface';
-import type { Connection as VueFlowConnection } from '@vue-flow/core';
-import type { RouteLocationRaw } from 'vue-router';
-import type { CanvasConnectionMode } from '@/types';
-import { canvasConnectionModes } from '@/types';
-import type { ComponentPublicInstance } from 'vue';
 import type {
+	IExecutionResponse,
+	ICredentialsResponse,
+	NewCredentialsModal,
 	CredentialsResource,
 	FolderResource,
 	Resource,
 	VariableResource,
 	WorkflowResource,
-} from '@/components/layouts/ResourcesListLayout.vue';
+} from '@/Interface';
+import type { Connection as VueFlowConnection } from '@vue-flow/core';
+import type { RouteLocationRaw } from 'vue-router';
+import type { CanvasConnectionMode } from '@/types';
+import { canvasConnectionModes } from '@/types';
+import type { ComponentPublicInstance } from 'vue';
 
 /*
 	Type guards used in editor-ui project
diff --git a/packages/frontend/editor-ui/src/views/AuthView.vue b/packages/frontend/editor-ui/src/views/AuthView.vue
index d3ba2249c3..a9d2cbfee7 100644
--- a/packages/frontend/editor-ui/src/views/AuthView.vue
+++ b/packages/frontend/editor-ui/src/views/AuthView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Logo from '@/components/Logo/Logo.vue';
 import SSOLogin from '@/components/SSOLogin.vue';
-import type { IFormBoxConfig } from '@/Interface';
+import type { FormFieldValueUpdate, IFormBoxConfig } from '@/Interface';
 import { useSettingsStore } from '@/stores/settings.store';
 import type { EmailOrLdapLoginIdAndPassword } from './SigninView.vue';
 
@@ -19,17 +19,17 @@ withDefaults(
 );
 
 const emit = defineEmits<{
-	update: [{ name: string; value: string }];
+	update: [FormFieldValueUpdate];
 	submit: [values: EmailOrLdapLoginIdAndPassword];
 	secondaryClick: [];
 }>();
 
-const onUpdate = (e: { name: string; value: string }) => {
+const onUpdate = (e: FormFieldValueUpdate) => {
 	emit('update', e);
 };
 
-const onSubmit = (values: EmailOrLdapLoginIdAndPassword) => {
-	emit('submit', values);
+const onSubmit = (data: unknown) => {
+	emit('submit', data as EmailOrLdapLoginIdAndPassword);
 };
 
 const onSecondaryClick = () => {
@@ -45,10 +45,10 @@ const {
 	<div :class="$style.container">
 		<Logo location="authView" :release-channel="releaseChannel" />
 		<div v-if="subtitle" :class="$style.textContainer">
-			<n8n-text size="large">{{ subtitle }}</n8n-text>
+			<N8nText size="large">{{ subtitle }}</N8nText>
 		</div>
 		<div :class="$style.formContainer">
-			<n8n-form-box
+			<N8nFormBox
 				v-bind="form"
 				data-test-id="auth-form"
 				:button-loading="formLoading"
@@ -57,7 +57,7 @@ const {
 				@update="onUpdate"
 			>
 				<SSOLogin v-if="withSso" />
-			</n8n-form-box>
+			</N8nFormBox>
 		</div>
 	</div>
 </template>
diff --git a/packages/frontend/editor-ui/src/views/ChangePasswordView.vue b/packages/frontend/editor-ui/src/views/ChangePasswordView.vue
index 03eb3efeef..1a74800252 100644
--- a/packages/frontend/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/frontend/editor-ui/src/views/ChangePasswordView.vue
@@ -8,7 +8,7 @@ import { useI18n } from '@n8n/i18n';
 import { useToast } from '@/composables/useToast';
 import { useUsersStore } from '@/stores/users.store';
 
-import type { IFormBoxConfig } from '@/Interface';
+import type { FormFieldValueUpdate, IFormBoxConfig } from '@/Interface';
 import { MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH, VIEWS } from '@/constants';
 
 const usersStore = useUsersStore();
@@ -80,8 +80,8 @@ const onSubmit = async (values: { [key: string]: string }) => {
 	loading.value = false;
 };
 
-const onInput = (e: { name: string; value: string }) => {
-	if (e.name === 'password') {
+const onInput = (e: FormFieldValueUpdate) => {
+	if (e.name === 'password' && typeof e.value === 'string') {
 		password.value = e.value;
 	}
 };
diff --git a/packages/frontend/editor-ui/src/views/CredentialsView.vue b/packages/frontend/editor-ui/src/views/CredentialsView.vue
index 0a3ac9e3d9..24fa10ac99 100644
--- a/packages/frontend/editor-ui/src/views/CredentialsView.vue
+++ b/packages/frontend/editor-ui/src/views/CredentialsView.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import CredentialCard from '@/components/CredentialCard.vue';
-import ResourcesListLayout, {
-	type BaseFilters,
-	type Resource,
-} from '@/components/layouts/ResourcesListLayout.vue';
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import type { BaseFilters, Resource } from '@/Interface';
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useDocumentTitle } from '@/composables/useDocumentTitle';
 import { useProjectPages } from '@/composables/useProjectPages';
diff --git a/packages/frontend/editor-ui/src/views/MfaView.vue b/packages/frontend/editor-ui/src/views/MfaView.vue
index 3e14b94bd5..3701ff4d10 100644
--- a/packages/frontend/editor-ui/src/views/MfaView.vue
+++ b/packages/frontend/editor-ui/src/views/MfaView.vue
@@ -99,11 +99,13 @@ const onBackClick = () => {
 	emit('onBackClick', MFA_FORM.MFA_RECOVERY_CODE);
 };
 
-const onSubmit = async (form: { mfaCode: string; mfaRecoveryCode: string }) => {
+const onSubmit = (formData: unknown) => {
+	const data = formData as { mfaCode: string; mfaRecoveryCode: string };
+
 	formError.value = !showRecoveryCodeForm.value
 		? i18.baseText('mfa.code.invalid')
 		: i18.baseText('mfa.recovery.invalid');
-	emit('submit', form);
+	emit('submit', data);
 };
 
 const onInput = ({ target: { value, name } }: { target: { value: string; name: string } }) => {
@@ -124,9 +126,12 @@ const onInput = ({ target: { value, name } }: { target: { value: string; name: s
 		? { mfaCode: value, mfaRecoveryCode: '' }
 		: { mfaCode: '', mfaRecoveryCode: value };
 
-	onSubmit(dataToSubmit)
-		.catch(() => {})
-		.finally(() => (verifyingMfaCode.value = false));
+	try {
+		onSubmit(dataToSubmit);
+	} catch (e) {
+	} finally {
+		verifyingMfaCode.value = false;
+	}
 };
 
 const mfaRecoveryCodeFieldWithDefaults = () => {
diff --git a/packages/frontend/editor-ui/src/views/ProjectSettings.vue b/packages/frontend/editor-ui/src/views/ProjectSettings.vue
index 36c622c4ef..c6dc36a28f 100644
--- a/packages/frontend/editor-ui/src/views/ProjectSettings.vue
+++ b/packages/frontend/editor-ui/src/views/ProjectSettings.vue
@@ -102,9 +102,9 @@ const onAddMember = (userId: string) => {
 	formData.value.relations.push(relation);
 };
 
-const onRoleAction = (user: Partial<IUser>, role: string) => {
+const onRoleAction = (userId: string, role?: string) => {
 	isDirty.value = true;
-	const index = formData.value.relations.findIndex((r: ProjectRelation) => r.id === user.id);
+	const index = formData.value.relations.findIndex((r: ProjectRelation) => r.id === userId);
 	if (role === 'remove') {
 		formData.value.relations.splice(index, 1);
 	} else {
@@ -394,7 +394,7 @@ onMounted(() => {
 								:model-value="user?.role || projectRoles[0].role"
 								size="small"
 								data-test-id="projects-settings-user-role-select"
-								@update:model-value="onRoleAction(user, $event)"
+								@update:model-value="onRoleAction(user.id, $event)"
 							>
 								<N8nOption
 									v-for="role in projectRoles"
@@ -419,7 +419,7 @@ onMounted(() => {
 								square
 								icon="trash"
 								data-test-id="project-user-remove"
-								@click="onRoleAction(user, 'remove')"
+								@click="onRoleAction(user.id, 'remove')"
 							/>
 						</div>
 					</template>
diff --git a/packages/frontend/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/frontend/editor-ui/src/views/SettingsCommunityNodesView.vue
index bae9bbb27e..7678308326 100644
--- a/packages/frontend/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -73,7 +73,7 @@ const getEmptyStateButtonText = computed(() => {
 const actionBoxConfig = computed(() => {
 	return {
 		calloutText: '',
-		calloutTheme: '',
+		calloutTheme: undefined,
 		hideButton: false,
 	};
 });
diff --git a/packages/frontend/editor-ui/src/views/SettingsLdapView.vue b/packages/frontend/editor-ui/src/views/SettingsLdapView.vue
index 4f0234ffd1..476032646f 100644
--- a/packages/frontend/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsLdapView.vue
@@ -106,7 +106,7 @@ const cellClassStyle = ({ row, column }: CellClassStyleMethodParams<TableRow>):
 	return {};
 };
 
-const onInput = (input: { name: string; value: string | number | boolean }) => {
+const onInput = (input: { name: string; value: string | number | boolean | null | undefined }) => {
 	if (input.name === 'loginEnabled' && typeof input.value === 'boolean') {
 		loginEnabled.value = input.value;
 	}
diff --git a/packages/frontend/editor-ui/src/views/SettingsPersonalView.vue b/packages/frontend/editor-ui/src/views/SettingsPersonalView.vue
index b94c62a2d4..4e443d6675 100644
--- a/packages/frontend/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsPersonalView.vue
@@ -194,7 +194,8 @@ async function saveUserSettings(params: UserBasicDetailsWithMfa) {
 	}
 }
 
-async function onSubmit(form: UserBasicDetailsForm) {
+async function onSubmit(data: Record<string, string | number | boolean | null | undefined>) {
+	const form = data as UserBasicDetailsForm;
 	const emailChanged = usersStore.currentUser?.email !== form.email;
 
 	if (usersStore.currentUser?.mfaEnabled && emailChanged) {
diff --git a/packages/frontend/editor-ui/src/views/SettingsSourceControl.vue b/packages/frontend/editor-ui/src/views/SettingsSourceControl.vue
index 4626508563..355b206d32 100644
--- a/packages/frontend/editor-ui/src/views/SettingsSourceControl.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsSourceControl.vue
@@ -11,6 +11,7 @@ import type { SshKeyTypes } from '@/types/sourceControl.types';
 import type { TupleToUnion } from '@/utils/typeHelpers';
 import type { Rule, RuleGroup } from '@n8n/design-system/types';
 import { useI18n } from '@n8n/i18n';
+import type { Validatable } from '@n8n/design-system';
 import { computed, onMounted, reactive, ref } from 'vue';
 
 const locale = useI18n();
@@ -94,11 +95,11 @@ const onSave = async () => {
 	loadingService.stopLoading();
 };
 
-const onSelect = async (b: string) => {
+const onSelect = (b: Validatable) => {
 	if (b === sourceControlStore.preferences.branchName) {
 		return;
 	}
-	sourceControlStore.preferences.branchName = b;
+	sourceControlStore.preferences.branchName = b as string;
 };
 
 const goToUpgrade = () => {
@@ -180,7 +181,8 @@ const refreshBranches = async () => {
 	}
 };
 
-const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
+const onSelectSshKeyType = (value: Validatable) => {
+	const sshKeyType = value as TupleToUnion<SshKeyTypes>;
 	if (sshKeyType === sourceControlStore.preferences.keyGeneratorType) {
 		return;
 	}
@@ -215,7 +217,7 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 					<n8n-form-input
 						id="repoUrl"
 						v-model="sourceControlStore.preferences.repositoryUrl"
-						label
+						label=""
 						class="ml-0"
 						name="repoUrl"
 						validate-on-blur
@@ -243,7 +245,7 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 						v-if="!isConnected"
 						id="keyGeneratorType"
 						:class="$style.sshKeyTypeSelect"
-						label
+						label=""
 						type="select"
 						name="keyGeneratorType"
 						data-test-id="source-control-ssh-key-type-select"
@@ -303,7 +305,7 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 					<div :class="$style.branchSelection">
 						<n8n-form-input
 							id="branchName"
-							label
+							label=""
 							type="select"
 							name="branchName"
 							class="mb-s"
diff --git a/packages/frontend/editor-ui/src/views/SettingsUsersView.vue b/packages/frontend/editor-ui/src/views/SettingsUsersView.vue
index 7f54f512bc..103c9995f3 100644
--- a/packages/frontend/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsUsersView.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ROLE, type Role } from '@n8n/api-types';
 import { EnterpriseEditionFeature, INVITE_USER_MODAL_KEY } from '@/constants';
-import type { IUser, IUserListAction, InvitableRoleName } from '@/Interface';
+import type { InvitableRoleName, IUser } from '@/Interface';
+import type { UserAction } from '@n8n/design-system';
 import { useToast } from '@/composables/useToast';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
@@ -31,6 +32,8 @@ const showUMSetupWarning = computed(() => {
 	return hasPermission(['defaultUser']);
 });
 
+const allUsers = computed(() => usersStore.allUsers);
+
 onMounted(async () => {
 	documentTitle.set(i18n.baseText('settings.users'));
 
@@ -39,7 +42,7 @@ onMounted(async () => {
 	}
 });
 
-const usersListActions = computed((): IUserListAction[] => {
+const usersListActions = computed((): Array<UserAction<IUser>> => {
 	return [
 		{
 			label: i18n.baseText('settings.users.actions.copyInviteLink'),
@@ -284,12 +287,12 @@ async function onRoleChange(user: IUser, newRoleName: UpdateGlobalRolePayload['n
 		<!-- If there's more than 1 user it means the account quota was more than 1 in the past. So we need to allow instance owner to be able to delete users and transfer workflows.
 		-->
 		<div
-			v-if="usersStore.usersLimitNotReached || usersStore.allUsers.length > 1"
+			v-if="usersStore.usersLimitNotReached || allUsers.length > 1"
 			:class="$style.usersContainer"
 		>
 			<n8n-users-list
 				:actions="usersListActions"
-				:users="usersStore.allUsers"
+				:users="allUsers"
 				:current-user-id="usersStore.currentUserId"
 				:is-saml-login-enabled="ssoStore.isSamlLoginEnabled"
 				@action="onUsersListAction"
diff --git a/packages/frontend/editor-ui/src/views/TemplatesCollectionView.vue b/packages/frontend/editor-ui/src/views/TemplatesCollectionView.vue
index d62f59315c..1a3ae3811d 100644
--- a/packages/frontend/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/frontend/editor-ui/src/views/TemplatesCollectionView.vue
@@ -134,8 +134,16 @@ onMounted(async () => {
 				<div :class="$style.mainContent">
 					<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
 						<n8n-markdown
-							:content="isFullTemplatesCollection(collection) && collection.description"
-							:images="isFullTemplatesCollection(collection) && collection.image"
+							:content="
+								isFullTemplatesCollection(collection) && collection.description
+									? collection.description
+									: ''
+							"
+							:images="
+								isFullTemplatesCollection(collection) && collection.image
+									? collection.image
+									: undefined
+							"
 							:loading="loading"
 						/>
 					</div>
diff --git a/packages/frontend/editor-ui/src/views/VariablesView.vue b/packages/frontend/editor-ui/src/views/VariablesView.vue
index f77cb17ba6..301a5ccf23 100644
--- a/packages/frontend/editor-ui/src/views/VariablesView.vue
+++ b/packages/frontend/editor-ui/src/views/VariablesView.vue
@@ -14,11 +14,8 @@ import { useUsersStore } from '@/stores/users.store';
 import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { useRoute, useRouter, type LocationQueryRaw } from 'vue-router';
 
-import ResourcesListLayout, {
-	type BaseFilters,
-	type Resource,
-	type VariableResource,
-} from '@/components/layouts/ResourcesListLayout.vue';
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import type { BaseFilters, Resource, VariableResource } from '@/Interface';
 
 import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
@@ -35,6 +32,7 @@ import {
 import { uid } from '@n8n/design-system/utils';
 import { useAsyncState } from '@vueuse/core';
 import pickBy from 'lodash/pickBy';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 const settingsStore = useSettingsStore();
 const environmentsStore = useEnvironmentsStore();
@@ -47,7 +45,7 @@ const sourceControlStore = useSourceControlStore();
 const route = useRoute();
 const router = useRouter();
 
-const layoutRef = useTemplateRef<InstanceType<typeof ResourcesListLayout>>('layoutRef');
+const layoutRef = useTemplateRef<ComponentExposed<typeof ResourcesListLayout>>('layoutRef');
 
 const { showError } = useToast();
 
diff --git a/packages/frontend/editor-ui/src/views/WorkflowHistory.vue b/packages/frontend/editor-ui/src/views/WorkflowHistory.vue
index 49560be5bb..7ed16a3c5f 100644
--- a/packages/frontend/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/frontend/editor-ui/src/views/WorkflowHistory.vue
@@ -21,6 +21,7 @@ import { telemetry } from '@/plugins/telemetry';
 import { useRootStore } from '@n8n/stores/useRootStore';
 import { getResourcePermissions } from '@/permissions';
 import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
+import type { IUser } from 'n8n-workflow';
 
 type WorkflowHistoryActionRecord = {
 	[K in Uppercase<WorkflowHistoryActionTypes[number]>]: Lowercase<K>;
@@ -72,7 +73,7 @@ const editorRoute = computed(() => ({
 const workflowPermissions = computed(
 	() => getResourcePermissions(workflowsStore.getWorkflowById(workflowId.value)?.scopes).workflow,
 );
-const actions = computed<UserAction[]>(() =>
+const actions = computed<Array<UserAction<IUser>>>(() =>
 	workflowHistoryActionTypes.map((value) => ({
 		label: i18n.baseText(`workflowHistory.item.actions.${value}`),
 		disabled:
diff --git a/packages/frontend/editor-ui/src/views/WorkflowsView.vue b/packages/frontend/editor-ui/src/views/WorkflowsView.vue
index a414e8422d..c322b645b4 100644
--- a/packages/frontend/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/frontend/editor-ui/src/views/WorkflowsView.vue
@@ -7,7 +7,7 @@ import type {
 	Resource,
 	SortingAndPaginationUpdates,
 	WorkflowResource,
-} from '@/components/layouts/ResourcesListLayout.vue';
+} from '@/Interface';
 import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import WorkflowCard from '@/components/WorkflowCard.vue';
@@ -33,7 +33,6 @@ import InsightsSummary from '@/features/insights/components/InsightsSummary.vue'
 import { useInsightsStore } from '@/features/insights/insights.store';
 import type {
 	FolderListItem,
-	IUser,
 	UserAction,
 	WorkflowListItem,
 	WorkflowListResource,
@@ -64,7 +63,7 @@ import {
 import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
 import { createEventBus } from '@n8n/utils/event-bus';
 import debounce from 'lodash/debounce';
-import { PROJECT_ROOT } from 'n8n-workflow';
+import { type IUser, PROJECT_ROOT } from 'n8n-workflow';
 import { useTemplateRef, computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { type LocationQueryRaw, useRoute, useRouter } from 'vue-router';
 
@@ -148,7 +147,7 @@ const showCardsBadge = ref(false);
  * 'onlyAvailableOn' is used to specify where the action should be available, if not specified it will be available on both
  */
 const folderActions = computed<
-	Array<UserAction & { onlyAvailableOn?: 'mainBreadcrumbs' | 'card' }>
+	Array<UserAction<IUser> & { onlyAvailableOn?: 'mainBreadcrumbs' | 'card' }>
 >(() => [
 	{
 		label: i18n.baseText('generic.open'),
@@ -183,16 +182,18 @@ const folderActions = computed<
 	},
 ]);
 
-const folderCardActions = computed(() =>
-	folderActions.value.filter(
-		(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'card',
-	),
+const folderCardActions = computed(
+	(): Array<UserAction<IUser>> =>
+		folderActions.value.filter(
+			(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'card',
+		),
 );
 
-const mainBreadcrumbsActions = computed(() =>
-	folderActions.value.filter(
-		(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'mainBreadcrumbs',
-	),
+const mainBreadcrumbsActions = computed(
+	(): Array<UserAction<IUser>> =>
+		folderActions.value.filter(
+			(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'mainBreadcrumbs',
+		),
 );
 
 const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
@@ -1859,7 +1860,7 @@ const onNameSubmit = async (name: string) => {
 					:personal-project="personalProject"
 					resource-type="workflows"
 				/>
-				<n8n-action-box
+				<N8nActionBox
 					v-else-if="currentFolder"
 					data-test-id="empty-folder-action-box"
 					:heading="
@@ -1878,7 +1879,7 @@ const onNameSubmit = async (name: string) => {
 								? i18n.baseText('readOnlyEnv.cantAdd.workflow')
 								: i18n.baseText('generic.missing.permissions')
 						}}
-					</template></n8n-action-box
+					</template></N8nActionBox
 				>
 			</div>
 		</template>
diff --git a/packages/frontend/editor-ui/vite.config.mts b/packages/frontend/editor-ui/vite.config.mts
index a666676939..2c87e174c0 100644
--- a/packages/frontend/editor-ui/vite.config.mts
+++ b/packages/frontend/editor-ui/vite.config.mts
@@ -73,6 +73,10 @@ const plugins = [
 	components({
 		dts: './src/components.d.ts',
 		resolvers: [
+			(componentName) => {
+				if (componentName.startsWith('N8n'))
+					return { name: componentName, from: '@n8n/design-system' };
+			},
 			iconsResolver({
 				prefix: 'icon',
 			}),
diff --git a/packages/workflow/src/interfaces.ts b/packages/workflow/src/interfaces.ts
index c1b3fc5d27..b53f745efb 100644
--- a/packages/workflow/src/interfaces.ts
+++ b/packages/workflow/src/interfaces.ts
@@ -1220,7 +1220,7 @@ export interface IResourceLocatorResult {
 export interface INodeParameterResourceLocator {
 	__rl: true;
 	mode: ResourceLocatorModes;
-	value: NodeParameterValue;
+	value: Exclude<NodeParameterValue, boolean>;
 	cachedResultName?: string;
 	cachedResultUrl?: string;
 	__regex?: string;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 542b3e56a1..935a19ae65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -783,7 +783,7 @@ importers:
         version: 4.3.0
       '@getzep/zep-cloud':
         specifier: 1.0.12
-        version: 1.0.12(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(langchain@0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21))
+        version: 1.0.12(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(langchain@0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6))
       '@getzep/zep-js':
         specifier: 0.9.0
         version: 0.9.0
@@ -810,7 +810,7 @@ importers:
         version: 0.3.4(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)
       '@langchain/community':
         specifier: 'catalog:'
-        version: 0.3.46(9d9844bc33bc460a2ae2eef819849ab0)
+        version: 0.3.46(421f5526c191b539c59b7e383489c114)
       '@langchain/core':
         specifier: 'catalog:'
         version: 0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67))
@@ -918,7 +918,7 @@ importers:
         version: 23.0.1
       langchain:
         specifier: 0.3.28
-        version: 0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21)
+        version: 0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6)
       lodash:
         specifier: 'catalog:'
         version: 4.17.21
@@ -1692,6 +1692,9 @@ importers:
 
   packages/frontend/@n8n/chat:
     dependencies:
+      '@n8n/design-system':
+        specifier: workspace:*
+        version: link:../design-system
       '@vueuse/core':
         specifier: catalog:frontend
         version: 10.11.0(vue@3.5.13(typescript@5.8.2))
@@ -2321,6 +2324,9 @@ importers:
       vue-chartjs:
         specifier: ^5.2.0
         version: 5.2.0(chart.js@4.4.0)(vue@3.5.13(typescript@5.8.2))
+      vue-component-type-helpers:
+        specifier: ^2.2.10
+        version: 2.2.10
       vue-github-button:
         specifier: ^3.1.3
         version: 3.1.3
@@ -15950,7 +15956,7 @@ snapshots:
   '@babel/helper-member-expression-to-functions@7.25.9':
     dependencies:
       '@babel/traverse': 7.26.10
-      '@babel/types': 7.26.10
+      '@babel/types': 7.27.6
     transitivePeerDependencies:
       - supports-color
 
@@ -15972,7 +15978,7 @@ snapshots:
 
   '@babel/helper-optimise-call-expression@7.25.9':
     dependencies:
-      '@babel/types': 7.26.10
+      '@babel/types': 7.27.6
 
   '@babel/helper-plugin-utils@7.26.5': {}
 
@@ -17009,7 +17015,7 @@ snapshots:
   '@gar/promisify@1.1.3':
     optional: true
 
-  '@getzep/zep-cloud@1.0.12(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(langchain@0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21))':
+  '@getzep/zep-cloud@1.0.12(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(langchain@0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6))':
     dependencies:
       form-data: 4.0.0
       node-fetch: 2.7.0(encoding@0.1.13)
@@ -17018,7 +17024,7 @@ snapshots:
       zod: 3.25.67
     optionalDependencies:
       '@langchain/core': 0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67))
-      langchain: 0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21)
+      langchain: 0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6)
     transitivePeerDependencies:
       - encoding
 
@@ -17532,7 +17538,7 @@ snapshots:
       - aws-crt
       - encoding
 
-  '@langchain/community@0.3.46(9d9844bc33bc460a2ae2eef819849ab0)':
+  '@langchain/community@0.3.46(421f5526c191b539c59b7e383489c114)':
     dependencies:
       '@browserbasehq/stagehand': 1.9.0(@playwright/test@1.49.1)(deepmerge@4.3.1)(dotenv@16.5.0)(encoding@0.1.13)(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67))(zod@3.25.67)
       '@ibm-cloud/watsonx-ai': 1.1.2
@@ -17544,7 +17550,7 @@ snapshots:
       flat: 5.0.2
       ibm-cloud-sdk-core: 5.3.2
       js-yaml: 4.1.0
-      langchain: 0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21)
+      langchain: 0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6)
       langsmith: 0.3.33(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67))
       openai: 4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)
       uuid: 10.0.0
@@ -17558,7 +17564,7 @@ snapshots:
       '@aws-sdk/credential-provider-node': 3.808.0
       '@azure/storage-blob': 12.26.0
       '@browserbasehq/sdk': 2.6.0(encoding@0.1.13)
-      '@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(langchain@0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21))
+      '@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(langchain@0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6))
       '@getzep/zep-js': 0.9.0
       '@google-ai/generativelanguage': 2.6.0(encoding@0.1.13)
       '@google-cloud/storage': 7.12.1(encoding@0.1.13)
@@ -21022,7 +21028,7 @@ snapshots:
 
   axios-retry@4.5.0(axios@1.9.0):
     dependencies:
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       is-retry-allowed: 2.2.0
 
   axios@1.8.3:
@@ -21033,14 +21039,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  axios@1.9.0:
-    dependencies:
-      follow-redirects: 1.15.9(debug@4.3.6)
-      form-data: 4.0.2
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   axios@1.9.0(debug@4.3.6):
     dependencies:
       follow-redirects: 1.15.9(debug@4.3.6)
@@ -21059,7 +21057,7 @@ snapshots:
 
   axios@1.9.0(debug@4.4.1):
     dependencies:
-      follow-redirects: 1.15.9(debug@4.4.1)
+      follow-redirects: 1.15.9(debug@4.3.6)
       form-data: 4.0.2
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -21318,7 +21316,7 @@ snapshots:
 
   bundlemon@3.1.0(typescript@5.8.2):
     dependencies:
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       axios-retry: 4.5.0(axios@1.9.0)
       brotli-size: 4.0.0
       bundlemon-utils: 2.0.1
@@ -23270,10 +23268,6 @@ snapshots:
     optionalDependencies:
       debug: 4.4.0
 
-  follow-redirects@1.15.9(debug@4.4.1):
-    optionalDependencies:
-      debug: 4.4.1(supports-color@8.1.1)
-
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -23915,7 +23909,7 @@ snapshots:
       isstream: 0.1.2
       jsonwebtoken: 9.0.2
       mime-types: 2.1.35
-      retry-axios: 2.6.0(axios@1.9.0)
+      retry-axios: 2.6.0(axios@1.9.0(debug@4.4.1))
       tough-cookie: 4.1.4
     transitivePeerDependencies:
       - supports-color
@@ -23980,7 +23974,7 @@ snapshots:
 
   infisical-node@1.3.0:
     dependencies:
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       dotenv: 16.3.1
       tweetnacl: 1.0.3
       tweetnacl-util: 0.15.1
@@ -24907,7 +24901,7 @@ snapshots:
 
   kuler@2.0.0: {}
 
-  langchain@0.3.28(d0079d2993dfd2a4e9e2c2f03851bb21):
+  langchain@0.3.28(a1ee45cf0a7ccac06c2d6fcd08fda4e6):
     dependencies:
       '@langchain/core': 0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67))
       '@langchain/openai': 0.5.13(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)(ws@8.18.2)
@@ -24930,7 +24924,7 @@ snapshots:
       '@langchain/groq': 0.2.3(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(encoding@0.1.13)
       '@langchain/mistralai': 0.2.1(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))(zod@3.25.67)
       '@langchain/ollama': 0.2.2(@langchain/core@0.3.59(openai@4.103.0(encoding@0.1.13)(ws@8.18.2)(zod@3.25.67)))
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       cheerio: 1.0.0
       handlebars: 4.7.8
     transitivePeerDependencies:
@@ -26744,7 +26738,7 @@ snapshots:
 
   posthog-node@3.2.1:
     dependencies:
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       rusha: 0.8.14
     transitivePeerDependencies:
       - debug
@@ -27321,9 +27315,9 @@ snapshots:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
-  retry-axios@2.6.0(axios@1.9.0):
+  retry-axios@2.6.0(axios@1.9.0(debug@4.4.1)):
     dependencies:
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
 
   retry-request@7.0.2(encoding@0.1.13):
     dependencies:
@@ -27778,7 +27772,7 @@ snapshots:
       asn1.js: 5.4.1
       asn1.js-rfc2560: 5.0.1(asn1.js@5.4.1)
       asn1.js-rfc5280: 3.0.0
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       big-integer: 1.6.52
       bignumber.js: 9.1.2
       binascii: 0.0.2