diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 3c9434b017c28..7c8988a9c8e4f 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -1,7 +1,7 @@
 <template>
 	<button
 		:class="classes"
-		:disabled="disabled || loading"
+		:disabled="isDisabled"
 		:aria-disabled="ariaDisabled"
 		:aria-busy="ariaBusy"
 		aria-live="polite"
@@ -17,93 +17,81 @@
 	</button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import N8nIcon from '../N8nIcon';
 import N8nSpinner from '../N8nSpinner';
+import { useCssModule, computed, useAttrs } from 'vue';
 
-export default defineComponent({
-	name: 'n8n-button',
-	props: {
-		label: {
-			type: String,
-			default: '',
-		},
-		type: {
-			type: String,
-			default: 'primary',
-			validator: (value: string): boolean =>
-				['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(value),
-		},
-		size: {
-			type: String,
-			default: 'medium',
-			validator: (value: string): boolean =>
-				['xmini', 'mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		outline: {
-			type: Boolean,
-			default: false,
-		},
-		text: {
-			type: Boolean,
-			default: false,
-		},
-		icon: {
-			type: [String, Array],
-		},
-		block: {
-			type: Boolean,
-			default: false,
-		},
-		active: {
-			type: Boolean,
-			default: false,
-		},
-		float: {
-			type: String,
-			validator: (value: string): boolean => ['left', 'right'].includes(value),
-		},
-		square: {
-			type: Boolean,
-			default: false,
-		},
+const $style = useCssModule();
+const $attrs = useAttrs();
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: '',
+	},
+	type: {
+		type: String,
+		default: 'primary',
+	},
+	size: {
+		type: String,
+		default: 'medium',
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	outline: {
+		type: Boolean,
+		default: false,
+	},
+	text: {
+		type: Boolean,
+		default: false,
 	},
-	components: {
-		N8nSpinner,
-		N8nIcon,
+	icon: {
+		type: [String, Array],
 	},
-	computed: {
-		ariaBusy(): 'true' | undefined {
-			return this.loading ? 'true' : undefined;
-		},
-		ariaDisabled(): 'true' | undefined {
-			return this.disabled ? 'true' : undefined;
-		},
-		classes(): string {
-			return (
-				`button ${this.$style.button} ${this.$style[this.type]}` +
-				`${this.size ? ` ${this.$style[this.size]}` : ''}` +
-				`${this.outline ? ` ${this.$style.outline}` : ''}` +
-				`${this.loading ? ` ${this.$style.loading}` : ''}` +
-				`${this.float ? ` ${this.$style[`float-${this.float}`]}` : ''}` +
-				`${this.text ? ` ${this.$style.text}` : ''}` +
-				`${this.disabled ? ` ${this.$style.disabled}` : ''}` +
-				`${this.block ? ` ${this.$style.block}` : ''}` +
-				`${this.active ? ` ${this.$style.active}` : ''}` +
-				`${this.icon || this.loading ? ` ${this.$style.withIcon}` : ''}` +
-				`${this.square ? ` ${this.$style.square}` : ''}`
-			);
-		},
+	block: {
+		type: Boolean,
+		default: false,
 	},
+	active: {
+		type: Boolean,
+		default: false,
+	},
+	float: {
+		type: String,
+	},
+	square: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const ariaBusy = computed(() => (props.loading ? 'true' : undefined));
+const ariaDisabled = computed(() => (props.disabled ? 'true' : undefined));
+const isDisabled = computed(() => props.disabled || props.loading);
+
+const classes = computed(() => {
+	return (
+		`button ${$style.button} ${$style[props.type]}` +
+		`${props.size ? ` ${$style[props.size]}` : ''}` +
+		`${props.outline ? ` ${$style.outline}` : ''}` +
+		`${props.loading ? ` ${$style.loading}` : ''}` +
+		`${props.float ? ` ${$style[`float-${props.float}`]}` : ''}` +
+		`${props.text ? ` ${$style.text}` : ''}` +
+		`${props.disabled ? ` ${$style.disabled}` : ''}` +
+		`${props.block ? ` ${$style.block}` : ''}` +
+		`${props.active ? ` ${$style.active}` : ''}` +
+		`${props.icon || props.loading ? ` ${$style.withIcon}` : ''}` +
+		`${props.square ? ` ${$style.square}` : ''}`
+	);
 });
 </script>
 
@@ -178,7 +166,8 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
  * Colors
  */
 
-.secondary {
+.secondary,
+.btn--cancel {
 	--button-color: var(--color-primary);
 	--button-border-color: var(--color-primary);
 	--button-background-color: var(--color-background-xlight);
diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index b0fc0c62e6f43..56239a30f0db1 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -93,6 +93,10 @@ export default defineComponent({
 	},
 	computed: {
 		computedSize(): string | undefined {
+			if (this.size === 'medium') {
+				return 'default';
+			}
+
 			if (this.size === 'xlarge') {
 				return undefined;
 			}
diff --git a/packages/design-system/src/css/checkbox.scss b/packages/design-system/src/css/checkbox.scss
index aa31707b70357..3b79a6353227e 100644
--- a/packages/design-system/src/css/checkbox.scss
+++ b/packages/design-system/src/css/checkbox.scss
@@ -276,7 +276,7 @@
 			color: var(--color-primary);
 		}
 
-		& [class*='el-icon-'] {
+		& .el-icon {
 			line-height: 0.9;
 
 			& + span {
diff --git a/packages/design-system/src/css/dialog.scss b/packages/design-system/src/css/dialog.scss
index 08c250836bdce..7b497a2544d01 100644
--- a/packages/design-system/src/css/dialog.scss
+++ b/packages/design-system/src/css/dialog.scss
@@ -16,6 +16,10 @@
 @include mixins.b(overlay-dialog) {
 	width: 100%;
 	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: inherit;
+	justify-content: center;
 	padding-top: var(--spacing-2xl);
 }
 
diff --git a/packages/design-system/src/css/icon.scss b/packages/design-system/src/css/icon.scss
index dfab446582d3e..5ffa344d56964 100644
--- a/packages/design-system/src/css/icon.scss
+++ b/packages/design-system/src/css/icon.scss
@@ -27,6 +27,24 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.el-icon {
+	--color: inherit;
+	height: 1em;
+	width: 1em;
+	line-height: 1em;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	fill: currentColor;
+	color: var(--color);
+	font-size: inherit;
+
+	svg {
+		height: 1em;
+    width: 1em;
+	}
+}
 .el-icon-ice-cream-round:before {
 	content: '\e6a0';
 }
diff --git a/packages/design-system/src/css/message-box.scss b/packages/design-system/src/css/message-box.scss
index 360130d5a6651..023c984a168f7 100644
--- a/packages/design-system/src/css/message-box.scss
+++ b/packages/design-system/src/css/message-box.scss
@@ -150,13 +150,23 @@
 			margin-left: 10px;
 		}
 
-		//& .btn--confirm {
-		//	@include button.button-just-primary();
-		//	@include button.button-medium();
-		//}
+		& .btn--confirm {
+			@include button.button-just-primary();
+			@include button.button-small();
+		}
 		//
-		//& .btn--cancel {
-		//}
+		& .btn--cancel {
+			@include button.button-small();
+			@include button.button-outline;
+
+			--button-active-background-color: var(--color-primary-tint-2);
+			--button-active-color: var(--color-primary);
+			--button-active-border-color: var(--color-primary);
+			--button-hover-background-color: var(--color-primary-tint-3);
+			--button-hover-color: var(--color-primary);
+			--button-hover-border-color: var(--color-primary);
+			--button-focus-outline-color: var(--color-primary-tint-1);
+		}
 	}
 
 	@include mixins.e(btns-reverse) {
diff --git a/packages/design-system/src/css/notification.scss b/packages/design-system/src/css/notification.scss
index fae03903d04b8..b948f65a0d49f 100644
--- a/packages/design-system/src/css/notification.scss
+++ b/packages/design-system/src/css/notification.scss
@@ -67,19 +67,19 @@
 		}
 	}
 
-	.el-icon-success {
+	.el-icon.el-notification--success {
 		color: var.$notification-success-icon-color;
 	}
 
-	.el-icon-error {
+	.el-icon.el-notification--error {
 		color: var.$notification-danger-icon-color;
 	}
 
-	.el-icon-info {
+	.el-icon.el-notification--info {
 		color: var.$notification-info-icon-color;
 	}
 
-	.el-icon-warning {
+	.el-icon.el-notification--warning {
 		color: var.$notification-warning-icon-color;
 	}
 }
diff --git a/packages/design-system/src/css/select.scss b/packages/design-system/src/css/select.scss
index 6fed9ae001299..1b09d2656e046 100644
--- a/packages/design-system/src/css/select.scss
+++ b/packages/design-system/src/css/select.scss
@@ -165,4 +165,9 @@
 			height: 42px;
 		}
 	}
+	&--default {
+		.el-tag {
+			padding: var(--spacing-5xs) var(--spacing-xs);
+		}
+	}
 }
diff --git a/packages/design-system/src/css/tag.scss b/packages/design-system/src/css/tag.scss
index d7e8f736e9b67..47d740fd4e752 100644
--- a/packages/design-system/src/css/tag.scss
+++ b/packages/design-system/src/css/tag.scss
@@ -104,7 +104,7 @@
 	box-sizing: border-box;
 	white-space: nowrap;
 
-	.el-icon-close {
+	.el-icon.el-tag__close {
 		border-radius: 50%;
 		text-align: center;
 		position: relative;
@@ -133,7 +133,7 @@
 	@include mixins.m(medium) {
 		padding: 12px;
 
-		.el-icon-close {
+		.el-icon.el-tag__close {
 			transform: scale(0.8);
 		}
 	}
@@ -143,7 +143,7 @@
 		padding: 0 8px;
 		line-height: 22px;
 
-		.el-icon-close {
+		.el-icon.el-tag__close {
 			transform: scale(0.8);
 		}
 	}
@@ -153,7 +153,7 @@
 		padding: 0 5px;
 		line-height: 18px;
 
-		.el-icon-close {
+		.el-icon.el-tag__close {
 			margin-left: -3px;
 			transform: scale(0.7);
 		}
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 49601eef170f9..78bb5151c9224 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -16,11 +16,11 @@
 				<router-view name="sidebar"></router-view>
 			</div>
 			<div id="content" :class="$style.content">
-				<keep-alive include="NodeView" :max="1">
-					<main>
-						<router-view />
-					</main>
-				</keep-alive>
+				<router-view v-slot="{ Component }">
+					<keep-alive include="NodeView" :max="1">
+						<component :is="Component" />
+					</keep-alive>
+				</router-view>
 			</div>
 			<Modals />
 			<Telemetry />
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 05f467b79f90a..635f92f8d6422 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -200,7 +200,7 @@ export default defineComponent({
 
 <style lang="scss">
 .dialog-wrapper {
-	.el-dialog {
+	&.el-dialog {
 		display: flex;
 		flex-direction: column;
 		max-width: var(--dialog-max-width, 80%);
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 5bcb4aa7ba697..6d7c3c37abd0e 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -253,8 +253,8 @@ export default defineComponent({
 .tags-container {
 	$--max-input-height: 60px;
 
-	:deep(.el-select) {
-		.el-select__tags {
+	.el-select-tags-wrapper {
+		.el-tag {
 			max-height: $--max-input-height;
 			overflow-y: scroll;
 			overflow-x: hidden;
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index b1984ff995297..075eeef623823 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -32,6 +32,7 @@
 					:users="ownedByUsers"
 					:currentUserId="usersStore.currentUser.id"
 					:modelValue="modelValue.ownedBy"
+					size="medium"
 					@update:modelValue="setKeyValue('ownedBy', $event)"
 				/>
 			</enterprise-edition>
@@ -47,6 +48,7 @@
 					:users="sharedWithUsers"
 					:currentUserId="usersStore.currentUser.id"
 					:modelValue="modelValue.sharedWith"
+					size="medium"
 					@update:modelValue="setKeyValue('sharedWith', $event)"
 				/>
 			</enterprise-edition>
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 264ce6a401fdf..d756d2edc2824 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -66,6 +66,7 @@
 								v-model="filters.search"
 								:class="[$style['search'], 'mr-2xs']"
 								:placeholder="$locale.baseText(`${resourceKey}.search.placeholder`)"
+								size="medium"
 								clearable
 								ref="search"
 								data-test-id="resources-list-search"
@@ -75,7 +76,7 @@
 								</template>
 							</n8n-input>
 							<div :class="$style['sort-and-filter']">
-								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
+								<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
 									<n8n-option
 										v-for="sortOption in sortOptions"
 										:key="sortOption"
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 74c528d3cf9f4..f8b5a0ee20349 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -69,6 +69,13 @@
 	.el-message-box__title {
 		color: $custom-dialog-text-color;
 	}
+	.el-message-box-icon {
+		width: var(--spacing-l);
+		height: var(--spacing-l);
+		&--warning {
+			color: var(--color-warning);
+		}
+	}
 }
 
 // Notification Message
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index c3661df77c3cf..f194740812f08 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -24,6 +24,7 @@
 				/>
 				<n8n-select
 					:modelValue="filters.type"
+					size="medium"
 					multiple
 					filterable
 					ref="typeInput"