diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
new file mode 100644
index 0000000000..149d255ba0
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
@@ -0,0 +1,72 @@
+import N8nActionDropdown from "./ActionDropdown.vue";
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Atoms/ActionDropdown',
+	component: N8nActionDropdown,
+	argTypes: {
+		placement: {
+			control: {
+				type: 'select',
+				options: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'],
+			},
+		},
+		activatorIcon: {
+			control: {
+				type: 'text',
+			},
+		},
+		trigger: {
+			control: {
+				type: 'select',
+				options: ['click', 'hover'],
+			},
+		},
+	},
+};
+
+const template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nActionDropdown,
+	},
+	template: `<n8n-action-dropdown v-bind="$props" />`,
+});
+
+export const defaultActionDropdown = template.bind({});
+defaultActionDropdown.args = {
+	items: [
+		{
+			id: 'item1',
+			label: 'Action 1',
+		},
+		{
+			id: 'item2',
+			label: 'Action 2',
+		},
+	],
+};
+
+export const customStyling = template.bind({});
+customStyling.args = {
+	activatorIcon: 'bars',
+	items: [
+		{
+			id: 'item1',
+			label: 'Action 1',
+			icon: 'thumbs-up',
+		},
+		{
+			id: 'item2',
+			label: 'Action 2',
+			icon: 'thumbs-down',
+			disabled: true,
+		},
+		{
+			id: 'item3',
+			label: 'Action 3',
+			icon: 'heart',
+			divided: true,
+		},
+	],
+};
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
new file mode 100644
index 0000000000..0ae8705fed
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -0,0 +1,130 @@
+<template>
+	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
+		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect">
+			<div :class="$style.activator">
+				<n8n-icon :icon="activatorIcon"/>
+			</div>
+			<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
+				<el-dropdown-item
+					v-for="item in items"
+					:key="item.id"
+					:command="item.id"
+					:disabled="item.disabled"
+					:divided="item.divided"
+				>
+					<div :class="{
+						[$style.itemContainer]: true,
+						[$style.hasCustomStyling]: item.customClass !== undefined,
+						[item.customClass]: item.customClass !== undefined,
+					}">
+						<span v-if="item.icon" :class="$style.icon">
+							<n8n-icon :icon="item.icon"/>
+						</span>
+						<span :class="$style.label">
+							{{ item.label }}
+						</span>
+					</div>
+				</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from "vue";
+import ElDropdown from 'element-ui/lib/dropdown';
+import ElDropdownMenu from 'element-ui/lib/dropdown-menu';
+import ElDropdownItem from 'element-ui/lib/dropdown-item';
+import N8nIcon from '../N8nIcon';
+
+interface IActionDropdownItem {
+	id: string;
+	label: string;
+	icon?: string;
+	divided?: boolean;
+	disabled?: boolean;
+	customClass?: string;
+}
+
+// This component is visually similar to the ActionToggle component
+// but it offers more options when it comes to dropdown items styling
+// (supports icons, separators, custom styling and all options provided
+// by Element UI dropdown component).
+// It can be used in different parts of editor UI while ActionToggle
+// is designed to be used in card components.
+export default Vue.extend({
+	name: 'n8n-action-dropdown',
+	components: {
+		ElDropdownMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElDropdown,		// eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElDropdownItem,	// eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		N8nIcon,
+	},
+	props: {
+		items: {
+			type: Array as PropType<IActionDropdownItem[]>,
+			required: true,
+		},
+		placement: {
+			type: String,
+			default: 'bottom',
+			validator: (value: string): boolean =>
+				['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'].includes(value),
+		},
+		activatorIcon: {
+			type: String,
+			default: 'ellipsis-v',
+		},
+		trigger: {
+			type: String,
+			default: 'click',
+			validator: (value: string): boolean =>
+				['click', 'hover'].includes(value),
+		},
+	},
+	methods: {
+		onSelect(action: string) : void {
+			this.$emit('select', action);
+		},
+	},
+});
+
+</script>
+
+<style lang="scss" module>
+
+.activator {
+	cursor: pointer;
+	padding: var(--spacing-2xs);
+	margin: 0;
+	border-radius: var(--border-radius-base);
+	line-height: normal !important;
+
+	svg {
+		position: static !important;
+	}
+
+	&:hover {
+		background-color: var(--color-background-base);
+		color: initial !important;
+	}
+}
+
+.itemContainer {
+	display: flex;
+}
+
+.icon {
+	text-align: center;
+	margin-right: var(--spacing-2xs);
+
+	svg { width: 1.2em !important; }
+}
+
+:global(li.is-disabled) {
+	.hasCustomStyling {
+		color: inherit !important;
+	}
+}
+
+</style>
diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts
new file mode 100644
index 0000000000..8af723b476
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts
@@ -0,0 +1,52 @@
+import { render } from '@testing-library/vue';
+import N8nActionDropdown from '../ActionDropdown.vue';
+
+describe('components', () => {
+	describe('N8nActionDropdown', () => {
+		it('should render default styling correctly', () => {
+			const wrapper = render(N8nActionDropdown, {
+				props: {
+					items: [
+						{
+							id: 'item1',
+							label: 'Action 1',
+						},
+						{
+							id: 'item2',
+							label: 'Action 2',
+						},
+					],
+				},
+				stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+		it('should render custom styling correctly', () => {
+			const wrapper = render(N8nActionDropdown, {
+				props: {
+					items: [
+						{
+							id: 'item1',
+							label: 'Action 1',
+							icon: 'thumbs-up',
+						},
+						{
+							id: 'item2',
+							label: 'Action 2',
+							icon: 'thumbs-down',
+							disabled: true,
+						},
+						{
+							id: 'item3',
+							label: 'Action 3',
+							icon: 'heart',
+							divided: true,
+						},
+					],
+				},
+				stubs: ['n8n-icon', 'el-dropdown', 'el-dropdown-menu', 'el-dropdown-item'],
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});
diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
new file mode 100644
index 0000000000..cfeb3fa9ee
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
@@ -0,0 +1,42 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
+"<div class=\\"action-dropdown-container\\">
+  <el-dropdown-stub trigger=\\"click\\" size=\\"\\" hideonclick=\\"true\\" placement=\\"bottom\\" visiblearrow=\\"true\\" showtimeout=\\"250\\" hidetimeout=\\"150\\" tabindex=\\"0\\">
+    <div class=\\"_activator_lf4ng_1\\">
+      <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
+    </div>
+    <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
+      <el-dropdown-item-stub command=\\"item1\\">
+        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-up\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 1 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item2\\" disabled=\\"true\\">
+        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-down\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 2 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item3\\" divided=\\"true\\">
+        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"heart\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 3 </span></div>
+      </el-dropdown-item-stub>
+    </el-dropdown-menu-stub>
+  </el-dropdown-stub>
+</div>"
+`;
+
+exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
+"<div class=\\"action-dropdown-container\\">
+  <el-dropdown-stub trigger=\\"click\\" size=\\"\\" hideonclick=\\"true\\" placement=\\"bottom\\" visiblearrow=\\"true\\" showtimeout=\\"250\\" hidetimeout=\\"150\\" tabindex=\\"0\\">
+    <div class=\\"_activator_lf4ng_1\\">
+      <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
+    </div>
+    <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
+      <el-dropdown-item-stub command=\\"item1\\">
+        <div class=\\"_itemContainer_lf4ng_16\\">
+          <!----><span> Action 1 </span></div>
+      </el-dropdown-item-stub>
+      <el-dropdown-item-stub command=\\"item2\\">
+        <div class=\\"_itemContainer_lf4ng_16\\">
+          <!----><span> Action 2 </span></div>
+      </el-dropdown-item-stub>
+    </el-dropdown-menu-stub>
+  </el-dropdown-stub>
+</div>"
+`;
diff --git a/packages/design-system/src/components/N8nActionDropdown/index.ts b/packages/design-system/src/components/N8nActionDropdown/index.ts
new file mode 100644
index 0000000000..e0b58950d4
--- /dev/null
+++ b/packages/design-system/src/components/N8nActionDropdown/index.ts
@@ -0,0 +1,2 @@
+import N8nActionDropdown from './ActionDropdown.vue';
+export default N8nActionDropdown;
diff --git a/packages/design-system/src/css/reset.scss b/packages/design-system/src/css/reset.scss
index 6688cb9621..546de883be 100644
--- a/packages/design-system/src/css/reset.scss
+++ b/packages/design-system/src/css/reset.scss
@@ -15,7 +15,7 @@ html {
 body {
 	height: 100%;
 	width: 100%;
-	overscroll-behavior-x: none;
+	overscroll-behavior: none;
 	line-height: 1;
 	font-size: var(--font-size-m);
 	font-weight: var(--font-weight-regular);
diff --git a/packages/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts
index 15816855de..990b7311d9 100644
--- a/packages/design-system/src/plugins/n8nComponents.ts
+++ b/packages/design-system/src/plugins/n8nComponents.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import N8nActionBox from '../components/N8nActionBox';
+import N8nActionDropdown from '../components/N8nActionDropdown';
 import N8nActionToggle from '../components/N8nActionToggle';
 import N8nAvatar from '../components/N8nAvatar';
 import N8nBadge from "../components/N8nBadge";
@@ -46,6 +47,7 @@ export default {
 	install: (app: typeof Vue, options?: {}) => {
 		app.component('n8n-info-accordion', N8nInfoAccordion);
 		app.component('n8n-action-box', N8nActionBox);
+		app.component('n8n-action-dropdown', N8nActionDropdown);
 		app.component('n8n-action-toggle', N8nActionToggle);
 		app.component('n8n-avatar', N8nAvatar);
 		app.component('n8n-badge', N8nBadge);
diff --git a/packages/editor-ui/public/favicon.ico b/packages/editor-ui/public/favicon.ico
index 0b4949e8fd..e5f92d7f5e 100644
Binary files a/packages/editor-ui/public/favicon.ico and b/packages/editor-ui/public/favicon.ico differ
diff --git a/packages/editor-ui/public/n8n-logo-collapsed.svg b/packages/editor-ui/public/n8n-logo-collapsed.svg
new file mode 100644
index 0000000000..62e0c21bb7
--- /dev/null
+++ b/packages/editor-ui/public/n8n-logo-collapsed.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="16" viewBox="0 0 32 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0125 6.4C26.5214 6.4 25.2686 5.38018 24.9133 4H21.2456C20.4635 4 19.796 4.56546 19.6674 5.33696L19.5359 6.12608C19.411 6.87531 19.032 7.52738 18.496 8C19.032 8.47262 19.411 9.12469 19.5359 9.87392L19.6674 10.663C19.796 11.4345 20.4635 12 21.2456 12H21.7133C22.0686 10.6198 23.3214 9.6 24.8125 9.6C26.5798 9.6 28.0125 11.0327 28.0125 12.8C28.0125 14.5673 26.5798 16 24.8125 16C23.3214 16 22.0685 14.9802 21.7133 13.6H21.2456C19.6813 13.6 18.3463 12.4691 18.0891 10.9261L17.9576 10.137C17.829 9.36546 17.1615 8.8 16.3794 8.8H15.1117C14.7565 10.1802 13.5036 11.2 12.0125 11.2C10.5214 11.2 9.26855 10.1802 8.91331 8.8H7.11169C6.75645 10.1802 5.50357 11.2 4.0125 11.2C2.24519 11.2 0.8125 9.76731 0.8125 8C0.8125 6.23269 2.24519 4.8 4.0125 4.8C5.50357 4.8 6.75645 5.81982 7.11169 7.2H8.91331C9.26855 5.81982 10.5214 4.8 12.0125 4.8C13.5036 4.8 14.7565 5.81982 15.1117 7.2H16.3794C17.1615 7.2 17.829 6.63454 17.9576 5.86304L18.0891 5.07392C18.3463 3.53092 19.6813 2.4 21.2456 2.4L24.9133 2.4C25.2685 1.01982 26.5214 0 28.0125 0C29.7798 0 31.2125 1.43269 31.2125 3.2C31.2125 4.96731 29.7798 6.4 28.0125 6.4ZM28.0125 4.8C28.8962 4.8 29.6125 4.08366 29.6125 3.2C29.6125 2.31634 28.8962 1.6 28.0125 1.6C27.1288 1.6 26.4125 2.31634 26.4125 3.2C26.4125 4.08366 27.1288 4.8 28.0125 4.8ZM4.0125 9.6C4.89616 9.6 5.6125 8.88366 5.6125 8C5.6125 7.11634 4.89616 6.4 4.0125 6.4C3.12884 6.4 2.4125 7.11634 2.4125 8C2.4125 8.88366 3.12884 9.6 4.0125 9.6ZM13.6125 8C13.6125 8.88366 12.8962 9.6 12.0125 9.6C11.1288 9.6 10.4125 8.88366 10.4125 8C10.4125 7.11634 11.1288 6.4 12.0125 6.4C12.8962 6.4 13.6125 7.11634 13.6125 8ZM26.4125 12.8C26.4125 13.6837 25.6962 14.4 24.8125 14.4C23.9288 14.4 23.2125 13.6837 23.2125 12.8C23.2125 11.9163 23.9288 11.2 24.8125 11.2C25.6962 11.2 26.4125 11.9163 26.4125 12.8Z" fill="#EA4B71"/>
+</svg>
diff --git a/packages/editor-ui/public/n8n-logo-expanded.svg b/packages/editor-ui/public/n8n-logo-expanded.svg
new file mode 100644
index 0000000000..29dbf38f91
--- /dev/null
+++ b/packages/editor-ui/public/n8n-logo-expanded.svg
@@ -0,0 +1,6 @@
+<svg width="58" height="16" viewBox="0 0 58 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2 6.4C25.7089 6.4 24.4561 5.38018 24.1008 4H20.4331C19.651 4 18.9835 4.56546 18.8549 5.33696L18.7234 6.12608C18.5985 6.87531 18.2195 7.52738 17.6835 8C18.2195 8.47262 18.5985 9.12469 18.7234 9.87392L18.8549 10.663C18.9835 11.4345 19.651 12 20.4331 12H20.9008C21.2561 10.6198 22.5089 9.6 24 9.6C25.7673 9.6 27.2 11.0327 27.2 12.8C27.2 14.5673 25.7673 16 24 16C22.5089 16 21.256 14.9802 20.9008 13.6H20.4331C18.8688 13.6 17.5338 12.4691 17.2766 10.9261L17.1451 10.137C17.0165 9.36546 16.349 8.8 15.5669 8.8H14.2992C13.944 10.1802 12.6911 11.2 11.2 11.2C9.70893 11.2 8.45605 10.1802 8.10081 8.8H6.29919C5.94395 10.1802 4.69107 11.2 3.2 11.2C1.43269 11.2 0 9.76731 0 8C0 6.23269 1.43269 4.8 3.2 4.8C4.69107 4.8 5.94395 5.81982 6.29919 7.2H8.10081C8.45605 5.81982 9.70893 4.8 11.2 4.8C12.6911 4.8 13.944 5.81982 14.2992 7.2H15.5669C16.349 7.2 17.0165 6.63454 17.1451 5.86304L17.2766 5.07392C17.5338 3.53092 18.8688 2.4 20.4331 2.4L24.1008 2.4C24.456 1.01982 25.7089 0 27.2 0C28.9673 0 30.4 1.43269 30.4 3.2C30.4 4.96731 28.9673 6.4 27.2 6.4ZM27.2 4.8C28.0837 4.8 28.8 4.08366 28.8 3.2C28.8 2.31634 28.0837 1.6 27.2 1.6C26.3163 1.6 25.6 2.31634 25.6 3.2C25.6 4.08366 26.3163 4.8 27.2 4.8ZM3.2 9.6C4.08366 9.6 4.8 8.88366 4.8 8C4.8 7.11634 4.08366 6.4 3.2 6.4C2.31634 6.4 1.6 7.11634 1.6 8C1.6 8.88366 2.31634 9.6 3.2 9.6ZM12.8 8C12.8 8.88366 12.0837 9.6 11.2 9.6C10.3163 9.6 9.6 8.88366 9.6 8C9.6 7.11634 10.3163 6.4 11.2 6.4C12.0837 6.4 12.8 7.11634 12.8 8ZM25.6 12.8C25.6 13.6837 24.8837 14.4 24 14.4C23.1163 14.4 22.4 13.6837 22.4 12.8C22.4 11.9163 23.1163 11.2 24 11.2C24.8837 11.2 25.6 11.9163 25.6 12.8Z" fill="#EA4B71"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0015 6.91832V6.84207C48.5598 6.5625 49.118 6.07959 49.118 5.12649C49.118 3.75402 47.9888 2.928 46.4282 2.928C44.8296 2.928 43.6877 3.80486 43.6877 5.15191C43.6877 6.06688 44.2206 6.5625 44.8042 6.84207V6.91832C44.1571 7.14707 43.3832 7.8333 43.3832 8.97702C43.3832 10.3622 44.5251 11.328 46.4155 11.328C48.306 11.328 49.4098 10.3622 49.4098 8.97702C49.4098 7.8333 48.6486 7.15977 48.0015 6.91832ZM46.4155 4.09714C47.0499 4.09714 47.5194 4.5038 47.5194 5.19003C47.5194 5.87626 47.0372 6.28292 46.4155 6.28292C45.7938 6.28292 45.2737 5.87626 45.2737 5.19003C45.2737 4.49109 45.7685 4.09714 46.4155 4.09714ZM46.4155 10.108C45.6797 10.108 45.0833 9.63784 45.0833 8.83723C45.0833 8.11287 45.5782 7.56643 46.4029 7.56643C47.2149 7.56643 47.7097 8.10017 47.7097 8.86265C47.7097 9.63784 47.1387 10.108 46.4155 10.108Z" fill="#101330"/>
+<path d="M51.3672 11.2009H52.9912V7.75705C52.9912 6.62604 53.6763 6.13042 54.4503 6.13042C55.2116 6.13042 55.8079 6.63874 55.8079 7.6808V11.2009H57.4319V7.35039C57.4319 5.68564 56.4676 4.71983 54.9578 4.71983C54.0062 4.71983 53.4733 5.10107 53.0927 5.59669H52.9912L52.8516 4.84691H51.3672V11.2009Z" fill="#101330"/>
+<path d="M36.9912 11.2009H35.3672V4.84691H36.8516L36.9912 5.59669H37.0927C37.4733 5.10107 38.0062 4.71983 38.9578 4.71983C40.4676 4.71983 41.4319 5.68564 41.4319 7.35039V11.2009H39.8079V7.6808C39.8079 6.63874 39.2116 6.13042 38.4503 6.13042C37.6763 6.13042 36.9912 6.62604 36.9912 7.75705V11.2009Z" fill="#101330"/>
+</svg>
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index f48dcfb217..a03bbf4d37 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -1,14 +1,21 @@
 <template>
-	<div :class="$style.container">
+	<div :class="[$style.app, 'root-container']">
 		<LoadingView v-if="loading" />
-		<div v-else id="app" :class="$style.container">
-			<div id="header" :class="$style.header">
+		<div
+			v-else
+			id="app"
+			:class="{
+				[$style.container]: true,
+				[$style.sidebarCollapsed]: sidebarMenuCollapsed
+			}"
+		>
+			<div id="header" :class="$style['header']">
 				<router-view name="header"></router-view>
 			</div>
-			<div id="sidebar" :class="$style.sidebar">
+			<div id="sidebar" :class="$style['sidebar']">
 				<router-view name="sidebar"></router-view>
 			</div>
-			<div id="content" :class="$style.content">
+			<div id="content" :class="$style['content']">
 				<router-view />
 			</div>
 			<Modals />
@@ -47,6 +54,7 @@ export default mixins(
 	computed: {
 		...mapGetters('settings', ['isHiringBannerEnabled', 'isTemplatesEnabled', 'isTemplatesEndpointReachable', 'isUserManagementEnabled', 'showSetupPage']),
 		...mapGetters('users', ['currentUser']),
+		...mapGetters('ui', ['sidebarMenuCollapsed']),
 		defaultLocale (): string {
 			return this.$store.getters.defaultLocale;
 		},
@@ -180,26 +188,34 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
+.app {
+	height: 100vh;
+	overflow: hidden;
+}
+
 .container {
-	height: 100%;
-	width: 100%;
+	display: grid;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar content";
+  grid-auto-columns: fit-content($sidebar-expanded-width) 1fr;
+  grid-template-rows: fit-content($sidebar-width) 1fr;
 }
 
 .content {
-	composes: container;
-	background-color: var(--color-background-light);
-	position: relative;
+	grid-area: content;
+	overflow: auto;
+	height: 100vh;
 }
 
 .header {
-	z-index: 10;
-	position: fixed;
-	width: 100%;
+	grid-area: header;
+	z-index: 999;
 }
 
 .sidebar {
-	z-index: 15;
-	position: fixed;
+	grid-area: sidebar;
+	height: 100vh;
+	z-index: 999;
 }
 </style>
-
diff --git a/packages/editor-ui/src/components/CredentialsList.vue b/packages/editor-ui/src/components/CredentialsList.vue
deleted file mode 100644
index 4c9a00f57c..0000000000
--- a/packages/editor-ui/src/components/CredentialsList.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-	<Modal
-		:name="CREDENTIAL_LIST_MODAL_KEY"
-		width="80%"
-		:title="$locale.baseText('credentialsList.credentials')"
-	>
-		<template v-slot:content>
-			<n8n-heading tag="h3" size="small" color="text-light">{{ $locale.baseText('credentialsList.yourSavedCredentials') + ':' }}</n8n-heading>
-			<div class="new-credentials-button">
-				<n8n-button
-					:title="$locale.baseText('credentialsList.createNewCredential')"
-					icon="plus"
-					:label="$locale.baseText('credentialsList.addNew')"
-					size="large"
-					@click="createCredential()"
-				/>
-			</div>
-
-			<el-table class="ph-no-capture" :data="credentialsToDisplay" v-loading="loading" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential">
-				<el-table-column property="name" :label="$locale.baseText('credentialsList.name')" class-name="clickable" sortable></el-table-column>
-				<el-table-column property="type" :label="$locale.baseText('credentialsList.type')" class-name="clickable" sortable></el-table-column>
-				<el-table-column property="createdAt" :label="$locale.baseText('credentialsList.created')" class-name="clickable" sortable></el-table-column>
-				<el-table-column property="updatedAt" :label="$locale.baseText('credentialsList.updated')" class-name="clickable" sortable></el-table-column>
-				<el-table-column
-					:label="$locale.baseText('credentialsList.operations')"
-					width="120">
-					<template slot-scope="scope">
-						<div class="cred-operations">
-							<n8n-icon-button :title="$locale.baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
-							<n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
-						</div>
-					</template>
-				</el-table-column>
-			</el-table>
-		</template>
-	</Modal>
-</template>
-
-<script lang="ts">
-import { externalHooks } from '@/components/mixins/externalHooks';
-import { ICredentialsResponse } from '@/Interface';
-import { nodeHelpers } from '@/components/mixins/nodeHelpers';
-import { showMessage } from '@/components/mixins/showMessage';
-import { genericHelpers } from '@/components/mixins/genericHelpers';
-
-import { mapGetters } from "vuex";
-
-import mixins from 'vue-typed-mixins';
-import { convertToDisplayDate } from './helpers';
-import { CREDENTIAL_SELECT_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY } from '@/constants';
-
-import Modal from './Modal.vue';
-
-export default mixins(
-	externalHooks,
-	genericHelpers,
-	nodeHelpers,
-	showMessage,
-).extend({
-	name: 'CredentialsList',
-	components: {
-		Modal,
-	},
-	data() {
-		return {
-			CREDENTIAL_LIST_MODAL_KEY,
-			loading: true,
-		};
-	},
-	computed: {
-		...mapGetters('credentials', ['allCredentials']),
-		credentialsToDisplay(): ICredentialsResponse[] {
-			return this.allCredentials.reduce((accu: ICredentialsResponse[], cred: ICredentialsResponse) => {
-				const type = this.$store.getters['credentials/getCredentialTypeByName'](cred.type);
-
-				if (type) {
-					accu.push({
-						...cred,
-						type: type.displayName,
-						createdAt: convertToDisplayDate(cred.createdAt as number),
-						updatedAt: convertToDisplayDate(cred.updatedAt as number),
-					});
-				}
-
-				return accu;
-			}, []);
-		},
-	},
-	async mounted() {
-		try {
-			await Promise.all([
-				await this.$store.dispatch('credentials/fetchCredentialTypes'),
-				await this.$store.dispatch('credentials/fetchAllCredentials'),
-			]);
-		}	catch (e) {
-			this.$showError(e, this.$locale.baseText('credentialsList.errorLoadingCredentials'));
-		}
-		this.loading = false;
-		this.$telemetry.track('User opened Credentials panel', { workflow_id: this.$store.getters.workflowId });
-	},
-	destroyed() {
-		this.$externalHooks().run('credentialsList.destroyed');
-	},
-	methods: {
-		createCredential () {
-			this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
-		},
-
-		editCredential (credential: ICredentialsResponse) {
-			this.$store.dispatch('ui/openExistingCredential', { id: credential.id});
-			this.$telemetry.track('User opened Credential modal', { credential_type: credential.type, source: 'primary_menu', new_credential: false, workflow_id: this.$store.getters.workflowId });
-		},
-
-		async deleteCredential (credential: ICredentialsResponse) {
-			const deleteConfirmed = await this.confirmMessage(
-				this.$locale.baseText(
-					'credentialsList.confirmMessage.message',
-					{ interpolate: { credentialName: credential.name }},
-				),
-				this.$locale.baseText('credentialsList.confirmMessage.headline'),
-				null,
-				this.$locale.baseText('credentialsList.confirmMessage.confirmButtonText'),
-				this.$locale.baseText('credentialsList.confirmMessage.cancelButtonText'),
-			);
-
-			if (deleteConfirmed === false) {
-				return;
-			}
-
-			try {
-				await this.$store.dispatch('credentials/deleteCredential', {id: credential.id});
-			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('credentialsList.showError.deleteCredential.title'),
-				);
-
-				return;
-			}
-
-			// Now that the credentials got removed check if any nodes used them
-			this.updateNodesCredentialsIssues();
-
-			this.$showMessage({
-				title: this.$locale.baseText('credentialsList.showMessage.title'),
-				type: 'success',
-			});
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-
-.new-credentials-button {
-	float: right;
-	position: relative;
-	margin-bottom: var(--spacing-2xs);
-}
-
-.cred-operations {
-	> * {
-		margin-left: 10px;
-	}
-}
-
-</style>
diff --git a/packages/editor-ui/src/components/GiftNotificationIcon.vue b/packages/editor-ui/src/components/GiftNotificationIcon.vue
index b09529e5f8..912b89e45d 100644
--- a/packages/editor-ui/src/components/GiftNotificationIcon.vue
+++ b/packages/editor-ui/src/components/GiftNotificationIcon.vue
@@ -12,6 +12,10 @@
   display: flex;
   position: relative;
 
+	svg {
+		margin-right: 0 !important;
+	}
+
   .notification {
     height: .47em;
     width: .47em;
@@ -30,6 +34,7 @@
       width: .36em;
       background-color: $gift-notification-inner-color;
       border-radius: 50%;
+
     }
   }
 }
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index d568497a30..0ce2afda0c 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -1,6 +1,6 @@
 <template>
 	<img
-		:src="basePath + 'n8n-logo.svg'"
+		:src="basePath + 'n8n-logo-expanded.svg'"
 		:class="$style.img"
 		alt="n8n.io"
 	/>
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index d20c5914ef..d82828f01a 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -55,18 +55,11 @@ export default mixins(
 
 <style lang="scss">
 .main-header {
-	position: fixed;
-	top: 0;
 	background-color: var(--color-background-xlight);
 	height: 65px;
 	width: 100%;
 	box-sizing: border-box;
-
-	padding-left: $sidebar-width;
-
-	&.expanded {
-		padding-left: $sidebar-expanded-width;
-	}
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 }
 
 .top-menu {
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 502eebf5d0..eb1fb0af69 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -70,6 +70,10 @@
 					:disabled="isWorkflowSaving"
 					@click="onSaveButtonClick"
 				/>
+				<div :class="$style.workflowMenuContainer">
+					<input :class="$style.hiddenInput" type="file" ref="importFile" @change="handleFileImport()">
+					<n8n-action-dropdown :items="workflowMenuItems" @select="onWorkflowMenuSelect" />
+				</div>
 			</template>
 		</PushConnectionTracker>
 	</div>
@@ -79,7 +83,12 @@
 import Vue from "vue";
 import mixins from "vue-typed-mixins";
 import { mapGetters } from "vuex";
-import { MAX_WORKFLOW_NAME_LENGTH } from "@/constants";
+import {
+	DUPLICATE_MODAL_KEY,
+	MAX_WORKFLOW_NAME_LENGTH,
+	VIEWS, WORKFLOW_MENU_ACTIONS,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+} from "@/constants";
 
 import ShortenName from "@/components/ShortenName.vue";
 import TagsContainer from "@/components/TagsContainer.vue";
@@ -90,6 +99,11 @@ import SaveButton from "@/components/SaveButton.vue";
 import TagsDropdown from "@/components/TagsDropdown.vue";
 import InlineTextEdit from "@/components/InlineTextEdit.vue";
 import BreakpointsObserver from "@/components/BreakpointsObserver.vue";
+import { IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
+
+import { saveAs } from 'file-saver';
+import { titleChange } from "../mixins/titleChange";
+import type { MessageBoxInputData } from 'element-ui/types/message-box';
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -100,7 +114,7 @@ const hasChanged = (prev: string[], curr: string[]) => {
 	return curr.reduce((accu, val) => accu || !set.has(val), false);
 };
 
-export default mixins(workflowHelpers).extend({
+export default mixins(workflowHelpers, titleChange).extend({
 	name: "WorkflowDetails",
 	components: {
 		TagsContainer,
@@ -139,6 +153,51 @@ export default mixins(workflowHelpers).extend({
 		currentWorkflowId(): string {
 			return this.$route.params.name;
 		},
+		currentWorkflow (): string {
+			return this.$route.params.name;
+		},
+		workflowName (): string {
+			return this.$store.getters.workflowName;
+		},
+		onWorkflowPage(): boolean {
+			return this.$route.meta && this.$route.meta.nodeView;
+		},
+		workflowMenuItems(): Array<{}> {
+			return [
+				{
+					id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
+					label: this.$locale.baseText('menuActions.duplicate'),
+					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
+					label: this.$locale.baseText('menuActions.download'),
+					disabled: !this.onWorkflowPage,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
+					label: this.$locale.baseText('menuActions.importFromUrl'),
+					disabled: !this.onWorkflowPage,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
+					label: this.$locale.baseText('menuActions.importFromFile'),
+					disabled: !this.onWorkflowPage,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.SETTINGS,
+					label: this.$locale.baseText('generic.settings'),
+					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+				},
+				{
+					id: WORKFLOW_MENU_ACTIONS.DELETE,
+					label: this.$locale.baseText('menuActions.delete'),
+					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+					customClass: this.$style.deleteItem,
+					divided: true,
+				},
+			];
+		},
 	},
 	methods: {
 		async onSaveButtonClick () {
@@ -220,6 +279,132 @@ export default mixins(workflowHelpers).extend({
 			}
 			cb(saved);
 		},
+		async handleFileImport(): Promise<void> {
+			const reader = new FileReader();
+			reader.onload = (event: ProgressEvent) => {
+				const data = (event.target as FileReader).result;
+
+				let workflowData: IWorkflowDataUpdate;
+				try {
+					workflowData = JSON.parse(data as string);
+				} catch (error) {
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
+						message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
+						type: 'error',
+					});
+					return;
+				}
+
+				this.$root.$emit('importWorkflowData', { data: workflowData });
+			};
+
+			const input = this.$refs.importFile as HTMLInputElement;
+			if (input !== null && input.files !== null && input.files.length !== 0) {
+				reader.readAsText(input!.files[0]!);
+			}
+		},
+		async onWorkflowMenuSelect(action: string): Promise<void> {
+			switch (action) {
+				case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
+					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
+					const workflowData = await this.getWorkflowDataToSave();
+					const {tags, ...data} = workflowData;
+					if (data.id && typeof data.id === 'string') {
+						data.id = parseInt(data.id, 10);
+					}
+
+					const exportData: IWorkflowToShare = {
+						...data,
+						meta: {
+							instanceId: this.$store.getters.instanceId,
+						},
+						tags: (tags || []).map(tagId => {
+							const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
+
+							return tag;
+						}),
+					};
+
+					const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+						type: 'application/json;charset=utf-8',
+					});
+
+					let workflowName = this.$store.getters.workflowName || 'unsaved_workflow';
+					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
+
+					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
+					saveAs(blob, workflowName + '.json');
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
+					try {
+						const promptResponse = await this.$prompt(
+						this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
+						this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
+						{
+							confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
+							cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
+							inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
+							inputPattern: /^http[s]?:\/\/.*\.json$/i,
+						},
+					) as MessageBoxInputData;
+
+					this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
+				} catch (e) {}
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
+					(this.$refs.importFile as HTMLInputElement).click();
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.SETTINGS: {
+					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+					break;
+				}
+				case WORKFLOW_MENU_ACTIONS.DELETE: {
+					const deleteConfirmed = await this.confirmMessage(
+						this.$locale.baseText(
+							'mainSidebar.confirmMessage.workflowDelete.message',
+							{ interpolate: { workflowName: this.workflowName } },
+						),
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+						'warning',
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
+					);
+
+					if (deleteConfirmed === false) {
+						return;
+					}
+
+					try {
+						await this.restApi().deleteWorkflow(this.currentWorkflow);
+					} catch (error) {
+						this.$showError(
+							error,
+							this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
+						);
+						return;
+					}
+					this.$store.commit('setStateDirty', false);
+					// Reset tab title since workflow is deleted.
+					this.$titleReset();
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
+						type: 'success',
+					});
+
+					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					break;
+				}
+				default:
+					break;
+			}
+		},
 	},
 	watch: {
 		currentWorkflowId() {
@@ -235,6 +420,8 @@ $--text-line-height: 24px;
 $--header-spacing: 20px;
 
 .container {
+	position: relative;
+	top: -1px;
 	width: 100%;
 	display: flex;
 	align-items: center;
@@ -291,3 +478,17 @@ $--header-spacing: 20px;
 	align-items: center;
 }
 </style>
+
+<style module lang="scss">
+.workflowMenuContainer {
+	margin-left: var(--spacing-2xs);
+}
+
+.hiddenInput {
+	display: none;
+}
+
+.deleteItem {
+	color: var(--color-danger);
+}
+</style>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 0e0539c107..7c7bcb18de 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,176 +1,141 @@
 <template>
-	<div id="side-menu">
-		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
-
-		<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
-			<div id="collapse-change-button" class="clickable" @click="toggleCollapse">
-				<font-awesome-icon icon="angle-right" class="icon" />
-			</div>
-			<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
-
-				<n8n-menu-item index="logo" class="logo-item">
-					<a href="https://n8n.io" target="_blank">
-						<img :src="basePath + 'n8n-icon-small.png'" class="icon" alt="n8n.io"/>
-						<span class="logo-text" slot="title">n8n.io</span>
-					</a>
+	<div id="side-menu" :class="{
+		['side-menu']: true,
+		[$style.sideMenu]: true,
+		[$style.sideMenuCollapsed]: isCollapsed
+	}">
+		<div :class="{[$style.sideMenuWrapper]: true, [$style.expanded]: !isCollapsed}">
+			<div
+				id="collapse-change-button"
+				:class="{
+					['clickable']: true,
+					[$style.sideMenuCollapseButton]: true,
+					[$style.expandedButton]: !isCollapsed
+				}"
+				@click="toggleCollapse"
+			></div>
+			<n8n-menu :default-active="$route.path" @select="handleSelect" :collapse="isCollapsed">
+				<n8n-menu-item
+					index="logo"
+					:class="[$style.logoItem, $style.disableActiveStyle]"
+				>
+					<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
 				</n8n-menu-item>
+				<div :class="$style.sideMenuFlexContainer">
+					<div :class="$style.sideMenuUpper">
 
-				<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
+						<MenuItemsIterator :items="sidebarMenuTopItems" :root="true"/>
 
-				<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="network-wired"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
-					</template>
+						<el-submenu
+							index="/workflow"
+							title="Workflow"
+							popperClass="sidebar-popper"
+							:class="{
+								[$style.workflowSubmenu]: true,
+								[$style.active]: $route.path === '/workflow'
+							}"
+						>
+							<template slot="title">
+								<font-awesome-icon icon="network-wired"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
+							</template>
 
-					<n8n-menu-item index="workflow-new">
-						<template slot="title">
-							<font-awesome-icon icon="file"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item v-if="isTemplatesEnabled" index="template-new">
-						<template slot="title">
+							<n8n-menu-item index="/workflow">
+								<template slot="title">
+									<font-awesome-icon icon="file"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
+								</template>
+							</n8n-menu-item>
+							<n8n-menu-item index="workflow-open" :class="$style.disableActiveStyle">
+								<template slot="title">
+									<font-awesome-icon icon="folder-open"/>&nbsp;
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
+
+						<n8n-menu-item v-if="isTemplatesEnabled" index="/templates" :class="$style.templatesSubmenu">
 							<font-awesome-icon icon="box-open"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.newTemplate') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-open">
-						<template slot="title">
-							<font-awesome-icon icon="folder-open"/>&nbsp;
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-save" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="save"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-duplicate" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="copy"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-delete" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="trash"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-download" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="file-download"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-import-url" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="cloud"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-import-file" :disabled="!onWorkflowPage">
-						<template slot="title">
-							<font-awesome-icon icon="hdd"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
-						</template>
-					</n8n-menu-item>
-					<n8n-menu-item index="workflow-settings" :disabled="!onWorkflowPage || !currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="cog"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
+						</n8n-menu-item>
 
-				<n8n-menu-item v-if="isTemplatesEnabled" index="templates">
-					<font-awesome-icon icon="box-open"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.templates') }}</span>
-				</n8n-menu-item>
+						<n8n-menu-item index="/credentials" :class="$style.credentialsSubmenu">
+							<font-awesome-icon icon="key"/>
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
+						</n8n-menu-item>
 
-				<n8n-menu-item index="credentials">
-					<font-awesome-icon icon="key"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
-				</n8n-menu-item>
+						<n8n-menu-item index="executions"  :class="[$style.disableActiveStyle, $style.executionsSubmenu]">
+							<font-awesome-icon icon="tasks"/>&nbsp;
+							<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
+						</n8n-menu-item>
+					</div>
+					<div :class="$style.sideMenuLower">
+						<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser" :class="$style.settingsSubmenu">
+							<font-awesome-icon icon="cog"/>&nbsp;
+							<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
+						</n8n-menu-item>
 
-				<n8n-menu-item index="executions">
-					<font-awesome-icon icon="tasks"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
-				</n8n-menu-item>
+						<el-submenu index="help" :class="[$style.helpMenu, $style.disableActiveStyle]" title="Help" popperClass="sidebar-popper">
+							<template slot="title">
+								<font-awesome-icon icon="question"/>&nbsp;
+								<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
+							</template>
 
-				<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
-					<font-awesome-icon icon="cog"/>&nbsp;
-					<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
-				</n8n-menu-item>
+							<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
 
-				<el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper">
-					<template slot="title">
-						<font-awesome-icon icon="question"/>&nbsp;
-						<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
-					</template>
+							<n8n-menu-item index="help-about">
+								<template slot="title">
+									<font-awesome-icon :class="$style['about-icon']" icon="info"/>
+									<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
+								</template>
+							</n8n-menu-item>
+						</el-submenu>
 
-					<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
+						<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
 
-					<n8n-menu-item index="help-about">
-						<template slot="title">
-							<font-awesome-icon class="about-icon" icon="info"/>
-							<span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
-						</template>
-					</n8n-menu-item>
-				</el-submenu>
-
-				<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
-
-				<div :class="`footer-menu-items ${currentUser ? 'logged-in': ''}`">
-					<n8n-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
-						<div class="gift-container">
-							<GiftNotificationIcon />
-						</div>
-						<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
-					</n8n-menu-item>
-					<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
-						<div class="ph-no-capture">
-							<n8n-menu-item class="user">
-								<div class="avatar">
-									<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+						<div :class="{
+							[$style.footerMenuItems] : true,
+							[$style.loggedIn]: showUserArea,
+						}">
+							<n8n-menu-item index="updates" :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
+								<div :class="$style.giftContainer">
+									<GiftNotificationIcon />
 								</div>
-								<span slot="title" class="item-title-root" v-if="!isCollapsed">
-									{{currentUser.fullName}}
+								<span slot="title" :class="['item-title-root', $style.updatesLabel]">
+									{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}}
 								</span>
 							</n8n-menu-item>
+							<n8n-menu-item v-if="showUserArea" :class="$style.userSubmenu" index="">
+								<!-- This dropdown is only enabled when sidebar is collapsed -->
+								<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
+									<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
+										<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+										<el-dropdown-menu slot="dropdown">
+											<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
+											<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
+										</el-dropdown-menu>
+									</div>
+								</el-dropdown>
+								<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
+									<span :title="currentUser.fullName" :class="$style.fullName">{{currentUser.fullName}}</span>
+									<div :class="{[$style.userActions]: true, ['user-actions']: true }">
+										<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
+									</div>
+								</div>
+							</n8n-menu-item>
 						</div>
-						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item
-								command="settings"
-							>
-								{{ $locale.baseText('settings') }}
-							</el-dropdown-item>
-							<el-dropdown-item
-								command="logout"
-							>
-								{{ $locale.baseText('auth.signout') }}
-							</el-dropdown-item>
-						</el-dropdown-menu>
-					</el-dropdown>
+					</div>
 				</div>
 			</n8n-menu>
-
 		</div>
 	</div>
 
 </template>
 
 <script lang="ts">
-
-import type { MessageBoxInputData } from 'element-ui/types/message-box';
-
 import {
 	IExecutionResponse,
-	IWorkflowDataUpdate,
 	IMenuItem,
-	IWorkflowToShare,
 } from '../Interface';
 
 import ExecutionsList from '@/components/ExecutionsList.vue';
@@ -184,27 +149,21 @@ import { titleChange } from '@/components/mixins/titleChange';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
 
-import { saveAs } from 'file-saver';
-
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MenuItemsIterator.vue';
 import {
-	ABOUT_MODAL_KEY,
-	CREDENTIAL_LIST_MODAL_KEY,
-	CREDENTIAL_SELECT_MODAL_KEY,
-	DUPLICATE_MODAL_KEY,
 	MODAL_CANCEL,
 	MODAL_CLOSE,
 	MODAL_CONFIRMED,
-	TAGS_MANAGER_MODAL_KEY,
+	ABOUT_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	WORKFLOW_OPEN_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
+	WORKFLOW_OPEN_MODAL_KEY,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
+import { debounceHelper } from './mixins/debounce';
 
 export default mixins(
 	genericHelpers,
@@ -214,6 +173,7 @@ export default mixins(
 	workflowHelpers,
 	workflowRun,
 	userHelpers,
+	debounceHelper,
 )
 	.extend({
 		name: 'MainSidebar',
@@ -227,12 +187,22 @@ export default mixins(
 			return {
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				stopExecutionInProgress: false,
+				userMenuItems: [
+					{
+						id: 'settings',
+						label: this.$locale.baseText('settings'),
+					},
+					{
+						id: 'logout',
+						label: this.$locale.baseText('auth.signout'),
+					},
+				],
 			};
 		},
 		computed: {
 			...mapGetters('ui', {
 				isCollapsed: 'sidebarMenuCollapsed',
+				isNodeView: 'isNodeView',
 			}),
 			...mapGetters('versions', [
 				'hasVersionUpdates',
@@ -244,11 +214,15 @@ export default mixins(
 			]),
 			...mapGetters('settings', [
 				'isTemplatesEnabled',
+				'isUserManagementEnabled',
 			]),
 			canUserAccessSettings(): boolean {
 				const accessibleRoute = this.findFirstAccessibleSettingsRoute();
 				return accessibleRoute !== null;
 			},
+			showUserArea(): boolean {
+				return this.isUserManagementEnabled && this.canUserAccessSidebarUserInfo && this.currentUser;
+			},
 			helpMenuItems (): object[] {
 				return [
 					{
@@ -293,69 +267,45 @@ export default mixins(
 					},
 				];
 			},
-			exeuctionId (): string | undefined {
-				return this.$route.params.id;
-			},
-			executionFinished (): boolean {
-				if (!this.isExecutionPage) {
-					// We are not on an execution page so return false
-					return false;
-				}
-
-				const fullExecution = this.$store.getters.getWorkflowExecution;
-
-				if (fullExecution === null) {
-					// No execution loaded so return also false
-					return false;
-				}
-
-				if (fullExecution.finished === true) {
-					return true;
-				}
-
-				return false;
-			},
-			executionWaitingForWebhook (): boolean {
-				return this.$store.getters.executionWaitingForWebhook;
-			},
-			isExecutionPage (): boolean {
-				return this.$route.name === VIEWS.EXECUTION;
-			},
-			isWorkflowActive (): boolean {
-				return this.$store.getters.isActive;
-			},
-			currentWorkflow (): string {
-				return this.$route.params.name;
-			},
 			workflowExecution (): IExecutionResponse | null {
 				return this.$store.getters.getWorkflowExecution;
 			},
-			workflowName (): string {
-				return this.$store.getters.workflowName;
-			},
-			workflowRunning (): boolean {
-				return this.$store.getters.isActionActive('workflowRunning');
-			},
 			sidebarMenuTopItems(): IMenuItem[] {
 				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'top');
 			},
 			sidebarMenuBottomItems(): IMenuItem[] {
 				return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
 			},
-			onWorkflowPage(): boolean {
-				return this.$route.meta && this.$route.meta.nodeView;
-			},
+		},
+		mounted() {
+			if (this.$refs.user) {
+				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
+			}
+			if (window.innerWidth > 900 && !this.isNodeView) {
+				this.$store.commit('ui/expandSidebarMenu');
+			}
+			this.checkWidthAndAdjustSidebar(window.innerWidth);
+		},
+		created() {
+			window.addEventListener("resize", this.onResize);
+		},
+		destroyed() {
+			window.removeEventListener("resize", this.onResize);
 		},
 		methods: {
 			trackHelpItemClick (itemType: string) {
 				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.$store.getters.workflowId });
 			},
 			async onUserActionToggle(action: string) {
-				if (action === 'logout') {
-					this.onLogout();
-				}
-				else {
-					this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
+				switch (action) {
+					case 'logout':
+						this.onLogout();
+						break;
+					case 'settings':
+						this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
+						break;
+					default:
+						break;
 				}
 			},
 			async onLogout() {
@@ -371,245 +321,98 @@ export default mixins(
 			toggleCollapse () {
 				this.$store.commit('ui/toggleSidebarMenuCollapse');
 			},
-			clearExecutionData () {
-				this.$store.commit('setWorkflowExecutionData', null);
-				this.updateNodesExecutionIssues();
-			},
-			openTagManager() {
-				this.$store.dispatch('ui/openModal', TAGS_MANAGER_MODAL_KEY);
-			},
 			openUpdatesPanel() {
 				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 			},
-			async stopExecution () {
-				const executionId = this.$store.getters.activeExecutionId;
-				if (executionId === null) {
-					return;
-				}
-
-				try {
-					this.stopExecutionInProgress = true;
-					await this.restApi().stopCurrentExecution(executionId);
-					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.stopExecution.title'),
-						type: 'success',
-					});
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
-					);
-				}
-				this.stopExecutionInProgress = false;
-			},
-			async openWorkflow (workflowId: string) {
-				// Change to other workflow
-				this.$router.push({
-					name: VIEWS.WORKFLOW,
-					params: { name: workflowId },
-				});
-
-				this.$store.commit('ui/closeAllModals');
-			},
-			async handleFileImport () {
-				const reader = new FileReader();
-
-				reader.onload = (event: ProgressEvent) => {
-					const data = (event.target as FileReader).result;
-
-					let workflowData: IWorkflowDataUpdate;
-					try {
-						workflowData = JSON.parse(data as string);
-					} catch (error) {
-						this.$showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
-							message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
-							type: 'error',
-						});
-						return;
+			async handleSelect (key: string) {
+				switch (key) {
+					case '/workflow': {
+						await this.createNewWorkflow();
+						break;
 					}
-
-					this.$root.$emit('importWorkflowData', { data: workflowData });
-				};
-
-				const input = this.$refs.importFile as HTMLInputElement;
-				if (input !== null && input.files !== null && input.files.length !== 0) {
-					reader.readAsText(input!.files[0]!);
-				}
-			},
-			async handleSelect (key: string, keyPath: string) {
-				if (key === 'workflow-open') {
-					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
-				} else if (key === 'workflow-import-file') {
-					(this.$refs.importFile as HTMLInputElement).click();
-				} else if (key === 'workflow-import-url') {
-					try {
-						const promptResponse = await this.$prompt(
-							this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
-							this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
-							{
-								confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
-								cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
-								inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
-								inputPattern: /^http[s]?:\/\/.*\.json$/i,
-							},
-						) as MessageBoxInputData;
-
-						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
-					} catch (e) {}
-				} else if (key === 'workflow-delete') {
-					const deleteConfirmed = await this.confirmMessage(
-						this.$locale.baseText(
-							'mainSidebar.confirmMessage.workflowDelete.message',
-							{ interpolate: { workflowName: this.workflowName } },
-						),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-						'warning',
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
-					);
-
-					if (deleteConfirmed === false) {
-						return;
+					case 'workflow-open': {
+						this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
+						break;
 					}
-
-					try {
-						await this.restApi().deleteWorkflow(this.currentWorkflow);
-					} catch (error) {
-						this.$showError(
-							error,
-							this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
-						);
-						return;
-					}
-					this.$store.commit('setStateDirty', false);
-					// Reset tab title since workflow is deleted.
-					this.$titleReset();
-					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
-						type: 'success',
-					});
-
-					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-				} else if (key === 'workflow-download') {
-					const workflowData = await this.getWorkflowDataToSave();
-
-					const {tags, ...data} = workflowData;
-					if (data.id && typeof data.id === 'string') {
-						data.id = parseInt(data.id, 10);
-					}
-
-					const exportData: IWorkflowToShare = {
-						...data,
-						meta: {
-							instanceId: this.$store.getters.instanceId,
-						},
-						tags: (tags || []).map(tagId => {
-							const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
-
-							return tag;
-						}),
-					};
-
-					const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-						type: 'application/json;charset=utf-8',
-					});
-
-
-					let workflowName = this.$store.getters.workflowName || 'unsaved_workflow';
-
-					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
-
-					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
-
-					saveAs(blob, workflowName + '.json');
-				} else if (key === 'workflow-save') {
-					const saved = await this.saveCurrentWorkflow();
-					if (saved) this.$store.dispatch('settings/fetchPromptsData');
-				} else if (key === 'workflow-duplicate') {
-					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
-				} else if (key === 'help-about') {
-					this.trackHelpItemClick('about');
-					this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
-				} else if (key === 'workflow-settings') {
-					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
-				} else if (key === 'user') {
-					this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
-				} else if (key === 'workflow-new') {
-					const result = this.$store.getters.getStateIsDirty;
-					if(result) {
-						const confirmModal = await this.confirmModal(
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.message'),
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.headline'),
-							'warning',
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.confirmButtonText'),
-							this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.cancelButtonText'),
-							true,
-						);
-
-						if (confirmModal === MODAL_CONFIRMED) {
-							const saved = await this.saveCurrentWorkflow({}, false);
-							if (saved) this.$store.dispatch('settings/fetchPromptsData');
-
-							if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-								this.$root.$emit('newWorkflow');
-							} else {
-								this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-							}
-
-							this.$showMessage({
-								title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-								type: 'success',
-							});
-						} else if (confirmModal === MODAL_CANCEL) {
-							this.$store.commit('setStateDirty', false);
-							if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-								this.$root.$emit('newWorkflow');
-							} else {
-								this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-							}
-
-							this.$showMessage({
-								title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-								type: 'success',
-							});
-						} else if (confirmModal === MODAL_CLOSE) {
-							return;
+					case '/templates': {
+						if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
+							this.$router.push({ name: VIEWS.TEMPLATES });
 						}
-					} else {
-						if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
+						break;
+					}
+					case '/credentials': {
+						this.$router.push({name: VIEWS.CREDENTIALS});
+						break;
+					}
+					case 'executions': {
+						this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+						break;
+					}
+					case 'settings': {
+						const defaultRoute = this.findFirstAccessibleSettingsRoute();
+						if (defaultRoute) {
+							const routeProps = this.$router.resolve({ name: defaultRoute });
+							this.$router.push(routeProps.route.path);
+						}
+						break;
+					}
+					case 'help-about': {
+						this.trackHelpItemClick('about');
+						this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
+						break;
+					}
+					default: break;
+				}
+			},
+			async createNewWorkflow (): Promise<void> {
+				const result = this.$store.getters.getStateIsDirty;
+				if(result) {
+					const confirmModal = await this.confirmModal(
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+						'warning',
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+						true,
+					);
+					if (confirmModal === MODAL_CONFIRMED) {
+						const saved = await this.saveCurrentWorkflow({}, false);
+						if (saved) this.$store.dispatch('settings/fetchPromptsData');
+						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+							this.$root.$emit('newWorkflow');
+						} else {
 							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 						}
-
 						this.$showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
+							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
 							type: 'success',
 						});
+					} else if (confirmModal === MODAL_CANCEL) {
+						this.$store.commit('setStateDirty', false);
+						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+							this.$root.$emit('newWorkflow');
+						} else {
+							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+						}
+						this.$showMessage({
+							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
+							type: 'success',
+						});
+					} else if (confirmModal === MODAL_CLOSE) {
+						return;
 					}
-					this.$titleReset();
-				} else if (key === 'templates' || key === 'template-new') {
-					if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
-						this.$router.push({ name: VIEWS.TEMPLATES });
-					}
-				} else if (key === 'credentials') {
-					if (this.$router.currentRoute.name !== VIEWS.CREDENTIALS) {
-						this.$router.push({ name: VIEWS.CREDENTIALS });
-					}
-				} else if (key === 'execution-open-workflow') {
-					if (this.workflowExecution !== null) {
-						this.openWorkflow(this.workflowExecution.workflowId as string);
-					}
-				} else if (key === 'executions') {
-					this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
-				} else if (key === 'settings') {
-					const defaultRoute = this.findFirstAccessibleSettingsRoute();
-					if (defaultRoute) {
-						const routeProps = this.$router.resolve({ name: defaultRoute });
-						this.$router.push(routeProps.route.path);
+				} else {
+					if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
+						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 					}
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
+						type: 'success',
+					});
 				}
+				this.$titleReset();
 			},
-			findFirstAccessibleSettingsRoute() {
+			findFirstAccessibleSettingsRoute () {
 				// Get all settings rotes by filtering them by pageCategory property
 				const settingsRoutes = this.$router.getRoutes().filter(
 					category => category.meta.telemetry &&
@@ -625,18 +428,97 @@ export default mixins(
 				}
 				return defaultSettingsRoute;
 			},
+			onResize (event: UIEvent) {
+				this.callDebounced("onResizeEnd", { debounceTime: 100 }, event);
+			},
+			onResizeEnd (event: UIEvent) {
+				const browserWidth = (event.target as Window).outerWidth;
+				this.checkWidthAndAdjustSidebar(browserWidth);
+			},
+			checkWidthAndAdjustSidebar (width: number) {
+				if (width < 900) {
+					this.$store.commit('ui/collapseSidebarMenu');
+				}
+			},
 		},
 	});
 </script>
 
 <style lang="scss">
+#side-menu {
+	.el-menu {
+		--menu-item-active-background-color: var(--color-foreground-base);
+		--menu-item-active-font-color: var(--color-text-dark);
+		--menu-item-hover-fill: var(--color-foreground-base);
+		--menu-item-hover-font-color: var(--color-text-dark);
+		--menu-item-height: 35px;
+		--submenu-item-height: 27px;
+
+		.el-icon-arrow-down {
+			font-weight: bold;
+			right: 12px;
+
+			&:hover {
+				color: var(--color-primary);
+			}
+		}
+
+		.el-menu-item:hover, .el-submenu__title:hover, .el-menu-item.is-active {
+			svg {
+				color: var(--color-text-dark);
+			}
+		}
+
+		.el-menu-item, .el-menu-item .el-tooltip, .el-submenu__title {
+			padding: 0 8px !important;
+		}
+		.el-menu-item, .el-submenu__title {
+			margin: 8px 0;
+			border-radius: var(--border-radius-base);
+			user-select: none;
+
+			.item-title-root {
+				position: absolute;
+				left: 45px;
+			}
+
+			svg {
+				color: var(--color-text-light);
+			}
+		}
+
+		.el-submenu {
+			.el-menu-item {
+				height: var(--menu-item-height);
+				line-height: var(--menu-item-height);
+				padding-left: var(--spacing-l) !important;
+				min-width: auto;
+
+				svg {
+					width: var(--spacing-m);
+				}
+			}
+
+			.el-menu .el-menu-item {
+				height: var(--submenu-item-height);
+				margin: 4px 0 !important;
+
+				.item-title {
+					position: absolute;
+					left: 60px;
+				}
+			}
+		}
+	}
+}
+
 .sidebar-popper{
 	.el-menu-item {
-		font-size: 0.9em;
-		height: 35px;
-		line-height: 35px;
-		color: $custom-dialog-text-color;
-		--menu-item-hover-fill: var(--color-background-base);
+		--menu-item-height: 35px;
+		--submenu-item-height: 27px;
+		--menu-item-hover-fill: var(--color-foreground-base);
+		border-radius: var(--border-radius-base);
+		margin: 0 var(--spacing-2xs);
 
 		.item-title {
 			position: absolute;
@@ -644,230 +526,286 @@ export default mixins(
 		}
 
 		.svg-inline--fa {
+			color: var(--color-text-light);
 			position: relative;
 			right: -3px;
 		}
-	}
-}
 
-#side-menu {
-	// Menu
-	.el-menu--vertical,
-	.el-menu {
-		border: none;
-		font-size: 14px;
-		--menu-item-hover-fill: var(--color-background-base);
-
-		.el-menu--collapse {
-			width: 75px;
-		}
-
-		.el-menu--popup,
-		.el-menu--inline {
-			font-size: 0.9em;
-			li.el-menu-item {
-				height: 35px;
-				line-height: 35px;
-				color: $custom-dialog-text-color;
-			}
-		}
-
-		.el-menu-item,
-		.el-submenu__title {
-			color: $color-primary;
-			font-size: 1.2em;
-			.el-submenu__icon-arrow {
-				color: $color-primary;
-				font-weight: 800;
-				font-size: 1em;
-			}
+		&:hover {
 			.svg-inline--fa {
-				position: relative;
-				right: -3px;
-			}
-			.item-title {
-				position: absolute;
-				left: 56px;
-				font-size: var(--font-size-s);
-			}
-			.item-title-root {
-				position: absolute;
-				left: 60px;
-				top: 1px;
-			}
-		}
-
-		.el-menu--inline {
-			.el-menu-item {
-				padding-left: 30px!important;
-			}
-		}
-
-	}
-
-	.el-menu-item {
-		a {
-			color: var(--color-text-base);
-
-			&.primary-item {
-				color: $color-primary;
-				vertical-align: baseline;
-			}
-		}
-
-		&.logo-item {
-			background-color: $color-primary !important;
-			height: $header-height;
-			line-height: $header-height;
-			* {
-				vertical-align: middle;
-			}
-
-
-			.icon {
-				position: relative;
-				height: 23px;
-				left: -10px;
-				top: -2px;
+				color: var(--color-text-dark);
 			}
 		}
 	}
 }
+</style>
 
-.about-icon {
-	margin-left: 5px;
-}
+<style lang="scss" module>
 
-#collapse-change-button {
-	position: absolute;
-	z-index: 10;
-	top: 55px;
-	left: 25px;
-	text-align: right;
-	line-height: 24px;
-	height: 20px;
-	width: 20px;
-	background-color: var(--color-foreground-xlight);
-	border: none;
-	border-radius: 15px;
-
-	-webkit-transition-duration: 0.5s;
-	-moz-transition-duration: 0.5s;
-	-o-transition-duration: 0.5s;
-	transition-duration: 0.5s;
-
-	-webkit-transition-property: -webkit-transform;
-	-moz-transition-property: -moz-transform;
-	-o-transition-property: -o-transform;
-	transition-property: transform;
-
-	overflow: hidden;
-
-	.icon {
-		position: relative;
-		left: -5px;
-		top: -2px;
-	}
-}
-#collapse-change-button:hover {
-	transform: scale(1.1);
-}
-
-.logo-text {
-	position: relative;
-	top: -3px;
-	left: 5px;
-	font-weight: bold;
-	color: var(--color-foreground-xlight);
-	text-decoration: none;
-}
-
-.expanded #collapse-change-button {
-	-webkit-transform: translateX(60px) rotate(180deg);
-	-moz-transform: translateX(60px) rotate(180deg);
-	-o-transform: translateX(60px) rotate(180deg);
-	transform: translateX(60px) rotate(180deg);
-}
-
-#side-menu {
-	position: fixed;
+.sideMenu {
 	height: 100%;
 
-	.el-menu {
-		height: 100%;
+	&.sideMenuCollapsed {
+		.fullName,
+		:global(.item-title-root),
+		:global(.el-menu--collapse) :global(.el-submenu__icon-arrow),
+		:global(.el-icon-arrow-down) {
+			display: none;
+		}
+
+		.active {
+			background-color: var(--color-foreground-base);
+			border-radius: var(--border-radius-base);
+
+			svg { color: var(--color-text-dark) !important; }
+		}
+
+		.userSubmenu::before {
+			width: 160%;
+		}
+	}
+
+	svg:global(.svg-inline--fa) {
+		position: relative;
+		left: 3px;
+	}
+
+	svg:global(.svg-inline--fa.fa-home) { left: 4px; }
+	.executionsSubmenu svg:global(.svg-inline--fa),
+	.credentialsSubmenu svg:global(.svg-inline--fa),
+	.updatesSubmenu svg:global(.svg-inline--fa),
+	.settingsSubmenu svg:global(.svg-inline--fa)
+	{ left: 5px !important; }
+
+	.helpMenu{
+		svg:global(.svg-inline--fa) { left: 6px !important; }
+		:global(.el-menu--inline) { margin-bottom: 8px; }
 	}
 }
 
-.side-menu-wrapper {
+.sideMenuWrapper {
+	position: relative;
 	height: 100%;
 	width: $sidebar-width;
+	border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	transition: width 150ms ease-in-out;
 
 	&.expanded {
 		width: $sidebar-expanded-width;
+
+		.icon {
+			position: relative;
+			left: 16px;
+		}
 	}
 
-	ul {
-		display: flex;
-		flex-direction: column;
+	ul { height: 100%; }
+}
+
+.sideMenuCollapseButton {
+	position: absolute;
+	right: -10px;
+	top: 50%;
+	z-index: 999;
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	color: var(--color-text-base);
+	background-color: var(--color-foreground-xlight);
+	width: 20px;
+	height: 20px;
+	border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	text-align: center;
+	border-radius: 50%;
+
+	&::before {
+		display: block;
+		position: relative;
+		left: px;
+		top: -2.5px;
+		transform: rotate(270deg);
+		content: "\e6df";
+		font-family: element-icons;
+		font-size: var(--font-size-2xs);
+		font-weight: bold;
+		color: var(--color-text-base);
+	}
+
+	&.expandedButton {
+		&::before {
+			transform: rotate(90deg);
+			left: 0px;
+		}
+	}
+
+	&:hover {
+		&::before {
+			color: var(--color-primary-shade-1);
+		}
 	}
 }
 
-.footer-menu-items {
+.sideMenuFlexContainer {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: calc(100% - $header-height);
+	padding: var(--spacing-5xs) 0;
+}
+
+.sideMenuUpper, .sideMenuLower {
+	padding: 0 var(--spacing-xs);
+}
+
+
+li:global(.is-active) {
+	.sideMenuLower &, &.disableActiveStyle {
+		background-color: initial;
+		color: var(--color-text-base);
+
+		svg {
+			color: var(--color-text-base) !important;
+		}
+
+		&:hover {
+			background-color: var(--color-foreground-base);
+			svg {
+				color: var(--color-text-dark) !important;
+			}
+			&:global(.el-submenu) {
+				background-color: unset;
+			}
+		}
+	}
+}
+
+.logoItem {
+	display: flex;
+	justify-content: space-between;
+	height: $header-height;
+	line-height: $header-height;
+	margin: 0 !important;
+	border-radius: 0 !important;
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-background-xlight);
+	cursor: default;
+
+	&:hover, &:global(.is-active):hover {
+		background-color: initial !important;
+	}
+
+	* { vertical-align: middle; }
+	.icon {
+		height: 18px;
+		position: relative;
+		left: 6px;
+	}
+
+}
+
+.footerMenuItems {
 	display: flex;
 	flex-grow: 1;
 	flex-direction: column;
 	justify-content: flex-end;
-	padding-bottom: 32px;
+	padding-bottom: var(-spacing-m);
 
-	&.logged-in {
-		padding-bottom: 8px;
+	&.loggedIn {
+		padding-bottom: var(--spacing-xs);
 	}
 }
 
-.el-menu-item.updates {
-	color: $sidebar-inactive-color !important;
-	.item-title-root {
-		font-size: 13px;
-		top: 0 !important;
+.aboutIcon {
+	margin-left: 5px;
+}
+
+.updatesSubmenu {
+	margin-top: 0 !important;
+
+	.updatesLabel {
+		font-size: var(--font-size-xs);
 	}
 
-	&:hover {
-		color: $sidebar-active-color;
-	}
-
-	.gift-container {
+	.giftContainer {
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
 		height: 100%;
 		width: 100%;
+
+		div > div { right: -.5em; }
 	}
 }
 
-.el-menu-item.user {
+.userSubmenu {
 	position: relative;
+	cursor: default;
+	padding: var(--spacing-xs) !important;
+	margin: 0 !important;
+
+	// Fake border-top on user area
+	&::before {
+		width: 114%;
+		border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+		content: "";
+		position: absolute;
+		top: 0;
+		left: -12px;
+	}
+
+	&:hover, &:global(.is-active) {
+		background-color: initial !important;
+
+		.userActions svg {
+			color: var(--color-text-base) !important;
+		}
 
-	&:hover {
-		background-color: unset;
 	}
 
 	.avatar {
-		top: 25%;
-		left: 18px;
-		position: absolute;
+		position: relative;
+		left: -2px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		padding-top: 16px;
+		cursor: default;
 	}
 
-	.item-title-root {
-		color: var(--color-text-base);
+	.username {
+		position: relative !important;
+		display: flex !important;
+		left: 9px !important;
+		justify-content: space-between;
+		align-items: center;
 		font-weight: var(--font-weight-bold);
-		font-size: var(--font-size-s);
-		max-width: 130px;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		font-size: var(--font-size-2xs);
+		padding-top: var(--spacing-s);
+		cursor: default;
+
+		.fullName {
+			width: 99px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: var(--color-text-dark);
+		}
+	}
+
+	.userActions {
+		position: relative;
+		left: -1px;
+		cursor: pointer;
+
+		&:hover {
+			svg { color: initial; }
+		}
 	}
 }
 
+.userActionsMenu {
+	margin-left: 25px !important;
+}
+
+@media screen and (max-height: 470px) {
+	.helpMenu { display: none; }
+}
 </style>
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 733fd03986..feefb8f80f 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -25,10 +25,6 @@
 			<CredentialsSelectModal />
 		</ModalRoot>
 
-		<ModalRoot :name="CREDENTIAL_LIST_MODAL_KEY">
-			<CredentialsList />
-		</ModalRoot>
-
 		<ModalRoot :name="DUPLICATE_MODAL_KEY">
 			<template v-slot:default="{ modalName, active }">
 				<DuplicateWorkflowDialog
@@ -119,7 +115,6 @@ import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 	CONTACT_PROMPT_MODAL_KEY,
 	CREDENTIAL_EDIT_MODAL_KEY,
-	CREDENTIAL_LIST_MODAL_KEY,
 	CREDENTIAL_SELECT_MODAL_KEY,
 	DELETE_USER_MODAL_KEY,
 	DUPLICATE_MODAL_KEY,
@@ -141,7 +136,6 @@ import CommunityPackageInstallModal from './CommunityPackageInstallModal.vue';
 import ChangePasswordModal from "./ChangePasswordModal.vue";
 import ContactPromptModal from './ContactPromptModal.vue';
 import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
-import CredentialsList from "./CredentialsList.vue";
 import InviteUsersModal from "./InviteUsersModal.vue";
 import CredentialsSelectModal from "./CredentialsSelectModal.vue";
 import DuplicateWorkflowDialog from "./DuplicateWorkflowDialog.vue";
@@ -167,7 +161,6 @@ export default Vue.extend({
 		ContactPromptModal,
 		ChangePasswordModal,
 		CredentialEdit,
-		CredentialsList,
 		CredentialsSelectModal,
 		DeleteUserModal,
 		DuplicateWorkflowDialog,
@@ -187,7 +180,6 @@ export default Vue.extend({
 		COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 		CONTACT_PROMPT_MODAL_KEY,
 		CREDENTIAL_EDIT_MODAL_KEY,
-		CREDENTIAL_LIST_MODAL_KEY,
 		CREDENTIAL_SELECT_MODAL_KEY,
 		ABOUT_MODAL_KEY,
 		CHANGE_PASSWORD_MODAL_KEY,
diff --git a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
index 003da7a123..d35e55ee2e 100644
--- a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
@@ -63,7 +63,6 @@ export default mixins(externalHooks).extend({
 	align-items: center;
 	padding-left: 14px;
 	padding-right: 20px;
-	border-top: 1px solid $node-creator-border-color;
 	border-bottom: 1px solid $node-creator-border-color;
 	background-color: $node-creator-search-background-color;
 	color: $node-creator-search-placeholder-color;
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index c90984969d..ac14f52c04 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -5,7 +5,7 @@
 				<i :class="$style.icon">
 					<font-awesome-icon icon="arrow-left" />
 				</i>
-				<n8n-heading slot="title" size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+				<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
 			</div>
 			<n8n-menu-item index="/settings/personal" v-if="canAccessPersonalSettings()" :class="$style.tab">
 				<i :class="$style.icon">
@@ -13,13 +13,13 @@
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.personal') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="$style.tab">
+			<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="[$style.tab, $style.usersMenu]">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="user-friends" />
 				</i>
 				<span slot="title">{{ $locale.baseText('settings.users') }}</span>
 			</n8n-menu-item>
-			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="$style.tab">
+			<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="[$style.tab, $style.apiMenu]">
 				<i :class="$style.icon">
 					<font-awesome-icon icon="plug" />
 				</i>
@@ -54,14 +54,18 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
-import { ABOUT_MODAL_KEY, VIEWS } from '@/constants';
+import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { IFakeDoor } from '@/Interface';
+import GiftNotificationIcon from './GiftNotificationIcon.vue';
 
 export default mixins(
 	userHelpers,
 ).extend({
 	name: 'SettingsSidebar',
+	components: {
+		GiftNotificationIcon,
+	},
 	computed: {
 		...mapGetters('settings', ['versionCli']),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
@@ -87,27 +91,51 @@ export default mixins(
 		onReturn() {
 			this.$router.push({name: VIEWS.HOMEPAGE});
 		},
+		openUpdatesPanel() {
+			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+		},
 	},
 });
 </script>
 
 <style lang="scss" module>
+:global(.el-menu) {
+	--menu-item-height: 35px;
+	--submenu-item-height: 27px;
+}
+
 .container {
 	min-width: 200px;
 	height: 100%;
 	background-color: var(--color-background-xlight);
 	border-right: var(--border-base);
 	position: relative;
-	padding: var(--spacing-s);
+	padding: var(--spacing-xs);
+	overflow: auto;
+
+	ul {
+		height: 100%;
+	}
+
+	:global(.el-menu-item) > span{
+		position: relative;
+		left: 8px;
+	}
+}
+
+.settingsHeading {
+	position: relative;
+	left: 8px;
 }
 
 .tab {
 	margin-bottom: var(--spacing-2xs);
+	svg:global(.svg-inline--fa) { position: relative; }
 }
 
 .returnButton {
 	composes: tab;
-	margin-bottom: var(--spacing-xl);
+	margin-bottom: var(--spacing-l);
 	padding: 0 var(--spacing-xs);
 	height: 38px;
 	display: flex;
@@ -125,6 +153,9 @@ export default mixins(
 	}
 }
 
+.usersMenu svg { left: -2px; }
+.apiMenu svg { left: 2px; }
+
 .icon {
 	width: 16px;
 	display: inline-flex;
@@ -133,7 +164,11 @@ export default mixins(
 
 .versionContainer {
 	position: absolute;
-	left: 20px;
+	left: 23px;
 	bottom: 20px;
 }
+
+@media screen and (max-height: 420px) {
+	.updatesSubmenu, .versionContainer { display: none; }
+}
 </style>
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 7d6d5e86f9..9a2004f1ec 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -180,24 +180,12 @@ export default mixins(showMessage).extend({
 			else if (tags && tags[0] && tags[0].hoverItem) {
 				// @ts-ignore
 				tags[0].hoverItem();
-
-				// @ts-ignore
-				if (tags[0] && tags[0].$el && tags[0].$el.scrollIntoView) {
-					// @ts-ignore
-					tags[0].$el.scrollIntoView();
-				}
 			}
 		},
 		focusOnTag(tagId: string) {
 			const tagOptions = (this.$refs.tag as Vue[]) || [];
 			if (tagOptions && tagOptions.length) {
 				const added = tagOptions.find((ref: any) => ref.value === tagId); // tslint:disable-line:no-any
-				// @ts-ignore // focus on newly created item
-				if (added && added.$el && added.$el.scrollIntoView && added.hoverItem) {
-					// @ts-ignore
-					added.hoverItem();
-					added.$el.scrollIntoView();
-				}
 			}
 		},
 		focusOnInput() {
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 7f9fcc685b..a6183a6e79 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -59,11 +59,17 @@ export default mixins(genericHelpers).extend({
 	},
 	mounted() {
 		if (this.infiniteScrollEnabled) {
-			window.addEventListener('scroll', this.onScroll);
+			const content = document.getElementById('content');
+			if (content) {
+				content.addEventListener('scroll', this.onScroll);
+			}
 		}
 	},
 	destroyed() {
-		window.removeEventListener('scroll', this.onScroll);
+		const content = document.getElementById('content');
+		if (content) {
+			content.removeEventListener('scroll', this.onScroll);
+		}
 	},
 	components: {
 		TemplateCard,
diff --git a/packages/editor-ui/src/components/WorkflowOpen.vue b/packages/editor-ui/src/components/WorkflowOpen.vue
index 0b80bf8665..37f56757e5 100644
--- a/packages/editor-ui/src/components/WorkflowOpen.vue
+++ b/packages/editor-ui/src/components/WorkflowOpen.vue
@@ -25,6 +25,16 @@
 							<font-awesome-icon slot="prefix" icon="search"></font-awesome-icon>
 						</n8n-input>
 					</div>
+					<div class="open-wf-button">
+						<n8n-button
+							:label="$locale.baseText('workflowOpen.newWFButton.label')"
+							:title="$locale.baseText('workflowOpen.newWFButton.title')"
+							size="large"
+							icon="plus"
+							type="primary"
+							@click="onNewWFClick"
+						/>
+					</div>
 				</div>
 			</template>
 
@@ -68,12 +78,14 @@ import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import { convertToDisplayDate } from './helpers';
 import { mapGetters } from 'vuex';
 import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, VIEWS, WORKFLOW_OPEN_MODAL_KEY } from '../constants';
+import { titleChange } from './mixins/titleChange';
 
 export default mixins(
 	genericHelpers,
 	restApi,
 	showMessage,
 	workflowHelpers,
+	titleChange,
 ).extend({
 	name: 'WorkflowOpen',
 	components: {
@@ -166,10 +178,10 @@ export default mixins(
 				const result = this.$store.getters.getStateIsDirty;
 				if(result) {
 					const confirmModal = await this.confirmModal(
-						this.$locale.baseText('workflowOpen.confirmMessage.message'),
-						this.$locale.baseText('workflowOpen.confirmMessage.headline'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
 						'warning',
-						this.$locale.baseText('workflowOpen.confirmMessage.confirmButtonText'),
+						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
 						this.$locale.baseText('workflowOpen.confirmMessage.cancelButtonText'),
 						true,
 					);
@@ -226,6 +238,55 @@ export default mixins(
 				);
 			}
 		},
+		async onNewWFClick () {
+			const result = this.$store.getters.getStateIsDirty;
+			if(result) {
+				const confirmModal = await this.confirmModal(
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					'warning',
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+					true,
+				);
+				if (confirmModal === MODAL_CONFIRMED) {
+					const saved = await this.saveCurrentWorkflow({}, false);
+					if (saved) this.$store.dispatch('settings/fetchPromptsData');
+					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+						this.$root.$emit('newWorkflow');
+					} else {
+						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					}
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
+						type: 'success',
+					});
+				} else if (confirmModal === MODAL_CANCEL) {
+					this.$store.commit('setStateDirty', false);
+					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+						this.$root.$emit('newWorkflow');
+					} else {
+						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					}
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
+						type: 'success',
+					});
+				} else if (confirmModal === MODAL_CLOSE) {
+					return;
+				}
+			} else {
+				if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
+					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+				}
+				this.$showMessage({
+					title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
+					type: 'success',
+				});
+			}
+			this.$titleReset();
+			this.$store.commit('ui/closeModal', WORKFLOW_OPEN_MODAL_KEY);
+		},
 		workflowActiveChanged (data: { id: string, active: boolean }) {
 			for (const workflow of this.workflows) {
 				if (workflow.id === data.id) {
@@ -253,7 +314,8 @@ export default mixins(
 	}
 
 	.search-filter {
-		margin-left: 10px;
+		margin-left: 12px;
+		margin-right: 24px;
 		min-width: 160px;
 	}
 
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index 8373534301..c4a13755ee 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -33,7 +33,6 @@ export default Vue.extend({
 .wrapper {
 	display: flex;
 	height: 100%;
-	margin-left: 65px;
 	justify-content: center;
 	box-sizing: border-box;
 	background: var(--color-gray-light);
@@ -43,10 +42,6 @@ export default Vue.extend({
 	}
 }
 
-.expandedSidebar {
-	margin-left: 200px;
-}
-
 .container {
 	max-width: 1280px;
 	display: flex;
@@ -76,4 +71,14 @@ export default Vue.extend({
 	flex: 1 1 100%;
 	height: 100%;
 }
+
+@media (max-width: 500px) {
+	.container {
+		flex-direction: column;
+	}
+	.aside {
+		height: auto;
+		margin: 0;
+	}
+}
 </style>
diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts
index dbe6890a48..dcee43e117 100644
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -3,7 +3,8 @@ import { INodeUi, XYPosition } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
-import { getMousePosition, getRelativePosition } from '@/views/canvasHelpers';
+import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/views/canvasHelpers';
+import { VIEWS } from '@/constants';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,
@@ -17,6 +18,11 @@ export const mouseSelect = mixins(
 	mounted () {
 		this.createSelectBox();
 	},
+	computed: {
+		isDemo (): boolean {
+			return this.$route.name === VIEWS.DEMO;
+		},
+	},
 	methods: {
 		createSelectBox () {
 			this.selectBox.id = 'select-box';
@@ -43,8 +49,10 @@ export const mouseSelect = mixins(
 		},
 		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
+			const sidebarOffset = this.isDemo ? 0 : this.$store.getters['ui/sidebarMenuCollapsed'] ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
+			const headerOffset = this.isDemo ? 0 : HEADER_HEIGHT;
 			// @ts-ignore
-			return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
+			return getRelativePosition(x - sidebarOffset, y - headerOffset, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
 		},
 		showSelectBox (event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index e36e02fe28..a6ea3f21c1 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -33,7 +33,6 @@ export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
 export const WORKFLOW_OPEN_MODAL_KEY = 'workflowOpen';
 export const VERSIONS_MODAL_KEY = 'versions';
 export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
-export const CREDENTIAL_LIST_MODAL_KEY = 'credentialsList';
 export const PERSONALIZATION_MODAL_KEY = 'personalization';
 export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
 export const VALUE_SURVEY_MODAL_KEY = 'valueSurvey';
@@ -285,6 +284,7 @@ export enum VIEWS {
 	NOT_FOUND = "NotFoundView",
 	FAKE_DOOR = "ComingSoon",
 	COMMUNITY_NODES = "CommunityNodes",
+	WORKFLOWS = "WorkflowsView",
 }
 
 export enum FAKE_DOOR_FEATURES {
@@ -311,10 +311,18 @@ export const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$no
 export const DEFAULT_STICKY_HEIGHT = 160;
 export const DEFAULT_STICKY_WIDTH = 240;
 
+export enum WORKFLOW_MENU_ACTIONS {
+	DUPLICATE = 'duplicate',
+	DOWNLOAD = 'download',
+	IMPORT_FROM_URL = 'import-from-url',
+	IMPORT_FROM_FILE = 'import-from-file',
+	SETTINGS = 'settings',
+	DELETE = 'delete',
+}
+
 /**
  * Enterprise edition
  */
-
 export enum EnterpriseEditionFeature {
 	Sharing = 'sharing',
 }
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
index 7e333f21f3..166d1d7377 100644
--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -7,7 +7,6 @@ import {
 	CREDENTIAL_SELECT_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
 	CONTACT_PROMPT_MODAL_KEY,
-	CREDENTIAL_LIST_MODAL_KEY,
 	DELETE_USER_MODAL_KEY,
 	DUPLICATE_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
@@ -23,7 +22,6 @@ import {
 	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 	FAKE_DOOR_FEATURES,
 	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
-	MAIN_NODE_PANEL_WIDTH,
 } from '@/constants';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
@@ -54,9 +52,6 @@ const module: Module<IUiState, IRootState> = {
 				mode: '',
 				activeId: null,
 			},
-			[CREDENTIAL_LIST_MODAL_KEY]: {
-				open: false,
-			},
 			[CREDENTIAL_SELECT_MODAL_KEY]: {
 				open: false,
 			},
@@ -214,6 +209,8 @@ const module: Module<IUiState, IRootState> = {
 		},
 		draggableStickyPos: (state: IUiState) => state.draggable.stickyPosition,
 		mappingTelemetry: (state: IUiState) => state.ndv.mappingTelemetry,
+		getCurrentView: (state: IUiState) => state.currentView,
+		isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
 	},
 	mutations: {
 		setMainPanelDimensions: (state: IUiState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
@@ -255,6 +252,12 @@ const module: Module<IUiState, IRootState> = {
 		toggleSidebarMenuCollapse: (state: IUiState) => {
 			state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;
 		},
+		collapseSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = true;
+		},
+		expandSidebarMenu: (state: IUiState) => {
+			state.sidebarMenuCollapsed = false;
+		},
 		setCurrentView: (state: IUiState, currentView: string) => {
 			state.currentView = currentView;
 		},
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 4b191e4e1a..1cf97aa44a 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -1,5 +1,5 @@
 .clickable {
-	cursor: pointer;
+	cursor: pointer !important;
 }
 .primary-color {
 	color: $color-primary;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index f096dce931..868898b45a 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -20,6 +20,11 @@
 	"generic.beta": "beta",
 	"generic.yes": "Yes",
 	"generic.no": "No",
+	"generic.settings": "Settings",
+	"generic.unsavedWork.confirmMessage.headline": "Save changes before leaving?",
+	"generic.unsavedWork.confirmMessage.message": "If you don't save, you will lose your changes.",
+	"generic.unsavedWork.confirmMessage.confirmButtonText": "Save",
+	"generic.unsavedWork.confirmMessage.cancelButtonText": "Leave without saving",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",
@@ -344,22 +349,13 @@
 	"mainSidebar.confirmMessage.workflowDelete.confirmButtonText": "Yes, delete",
 	"mainSidebar.confirmMessage.workflowDelete.headline": "Delete Workflow?",
 	"mainSidebar.confirmMessage.workflowDelete.message": "Are you sure that you want to delete '{workflowName}'?",
-	"mainSidebar.confirmMessage.workflowNew.cancelButtonText": "Leave without saving",
-	"mainSidebar.confirmMessage.workflowNew.confirmButtonText": "Save",
-	"mainSidebar.confirmMessage.workflowNew.headline": "Save changes before leaving?",
-	"mainSidebar.confirmMessage.workflowNew.message": "If you don't save, you will lose your changes.",
 	"mainSidebar.credentials": "Credentials",
-	"mainSidebar.delete": "Delete",
-	"mainSidebar.download": "Download",
-	"mainSidebar.duplicate": "Duplicate",
 	"mainSidebar.executions": "Executions",
 	"mainSidebar.help": "Help",
 	"mainSidebar.helpMenuItems.course": "Course",
 	"mainSidebar.helpMenuItems.documentation": "Documentation",
 	"mainSidebar.helpMenuItems.forum": "Forum",
 	"mainSidebar.helpMenuItems.quickstart": "Quickstart",
-	"mainSidebar.importFromFile": "Import from File",
-	"mainSidebar.importFromUrl": "Import from URL",
 	"mainSidebar.new": "New",
 	"mainSidebar.newTemplate": "New from template",
 	"mainSidebar.open": "Open",
@@ -369,7 +365,6 @@
 	"mainSidebar.prompt.invalidUrl": "Invalid URL",
 	"mainSidebar.prompt.workflowUrl": "Workflow URL",
 	"mainSidebar.save": "@:_reusableBaseText.save",
-	"mainSidebar.settings": "Settings",
 	"mainSidebar.showError.stopExecution.title": "Problem stopping execution",
 	"mainSidebar.showMessage.handleFileImport.message": "The file does not contain valid JSON data",
 	"mainSidebar.showMessage.handleFileImport.title": "Could not import file",
@@ -379,6 +374,11 @@
 	"mainSidebar.showMessage.stopExecution.title": "Execution stopped",
 	"mainSidebar.templates": "Templates",
 	"mainSidebar.workflows": "Workflows",
+	"menuActions.duplicate": "Duplicate",
+	"menuActions.download": "Download",
+	"menuActions.importFromUrl": "Import from URL...",
+	"menuActions.importFromFile": "Import from File...",
+	"menuActions.delete": "Delete",
 	"multipleParameter.addItem": "Add item",
 	"multipleParameter.currentlyNoItemsExist": "Currently no items exist",
 	"multipleParameter.deleteItem": "Delete item",
@@ -560,14 +560,6 @@
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
-	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
-	"nodeView.confirmMessage.beforeRouteLeave.confirmButtonText": "Save",
-	"nodeView.confirmMessage.beforeRouteLeave.headline": "Save changes before leaving?",
-	"nodeView.confirmMessage.beforeRouteLeave.message": "If you don't save, you will lose your changes.",
-	"nodeView.confirmMessage.initView.cancelButtonText": "Leave without saving",
-	"nodeView.confirmMessage.initView.confirmButtonText": "Save",
-	"nodeView.confirmMessage.initView.headline": "Save changes before leaving?",
-	"nodeView.confirmMessage.initView.message": "If you don't save, you will lose your changes.",
 	"nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText": "",
 	"nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText": "Yes, import",
 	"nodeView.confirmMessage.receivedCopyPasteData.headline": "Import Workflow?",
@@ -1058,10 +1050,6 @@
 	"workflowDetails.showMessage.title": "Name missing",
 	"workflowHelpers.showMessage.title": "Problem saving workflow",
 	"workflowOpen.active": "Active",
-	"workflowOpen.confirmMessage.cancelButtonText": "Leave without saving",
-	"workflowOpen.confirmMessage.confirmButtonText": "Save",
-	"workflowOpen.confirmMessage.headline": "Save changes before leaving?",
-	"workflowOpen.confirmMessage.message": "If you don't save, you will lose your changes.",
 	"workflowOpen.couldNotLoadActiveWorkflows": "Could not load active workflows",
 	"workflowOpen.created": "Created",
 	"workflowOpen.filterWorkflows": "Filter by tags",
@@ -1072,6 +1060,8 @@
 	"workflowOpen.showMessage.message": "This is the current workflow",
 	"workflowOpen.showMessage.title": "Workflow already open",
 	"workflowOpen.updated": "Updated",
+	"workflowOpen.newWFButton.label": "Add workflow",
+	"workflowOpen.newWFButton.title": "Create a new workflow",
 	"workflowPreview.showError.arrayEmpty": "Must have an array of nodes",
 	"workflowPreview.showError.missingWorkflow": "Missing workflow",
 	"workflowPreview.showError.previewError.message": "Unable to preview workflow",
@@ -1113,7 +1103,7 @@
 	"workflowSettings.saveManualOptions.yes": "Yes",
 	"workflowSettings.seconds": "seconds",
 	"workflowSettings.selectOption": "Select Option",
-	"workflowSettings.settingsFor": "Settings for {workflowName} (#{workflowId})",
+	"workflowSettings.settingsFor": "Workflow settings for {workflowName} (#{workflowId})",
 	"workflowSettings.showError.saveSettings1.errorMessage": "Timeout is activated but set to 0",
 	"workflowSettings.showError.saveSettings1.message": "There was a problem saving the settings",
 	"workflowSettings.showError.saveSettings1.title": "Problem saving settings",
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 7e9487dd4d..a6a2cb1b98 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -4,6 +4,7 @@ import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
 	faAngleDown,
+	faAngleLeft,
 	faAngleRight,
 	faAngleUp,
 	faArrowLeft,
@@ -120,6 +121,7 @@ function addIcon(icon: any) { // tslint:disable-line:no-any
 
 addIcon(faAngleDoubleLeft);
 addIcon(faAngleDown);
+addIcon(faAngleLeft);
 addIcon(faAngleRight);
 addIcon(faAngleUp);
 addIcon(faArrowLeft);
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 28769c31ae..5babd669d1 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -21,11 +21,12 @@ import TemplatesWorkflowView from '@/views/TemplatesWorkflowView.vue';
 import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
 import CredentialsView from '@/views/CredentialsView.vue';
 import { Store } from 'vuex';
-import { IPermissions, IRootState } from './Interface';
+import { IPermissions, IRootState, IWorkflowsState } from './Interface';
 import { LOGIN_STATUS, ROLE } from './modules/userHelpers';
 import { RouteConfigSingleView } from 'vue-router/types/router';
 import { VIEWS } from './constants';
 import { store } from './store';
+import e from 'express';
 
 Vue.use(Router);
 
@@ -39,6 +40,7 @@ interface IRouteConfig extends RouteConfigSingleView {
 			disabled?: true;
 			getProperties: (route: Route, store: Store<IRootState>) => object;
 		};
+		scrollOffset?: number;
 	};
 }
 
@@ -55,6 +57,13 @@ const router = new Router({
 	mode: 'history',
 	// @ts-ignore
 	base: window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH,
+	scrollBehavior(to, from, savedPosition) {
+		// saved position == null means the page is NOT visited from history (back button)
+		if (savedPosition === null && to.name === VIEWS.TEMPLATES && to.meta) {
+			// for templates view, reset scroll position in this case
+			to.meta.setScrollPosition(0);
+		}
+	},
 	routes: [
 		{
 			path: '/',
@@ -147,6 +156,8 @@ const router = new Router({
 			meta: {
 				templatesEnabled: true,
 				getRedirect: getTemplatesRedirect,
+				// Templates view remembers it's scroll position on back
+				scrollOffset: 0,
 				telemetry: {
 					getProperties(route: Route, store: Store<IRootState>) {
 						return {
@@ -154,6 +165,9 @@ const router = new Router({
 						};
 					},
 				},
+				setScrollPosition(pos: number) {
+					this.scrollOffset = pos;
+				},
 				permissions: {
 					allow: {
 						loginStatus: [LOGIN_STATUS.LoggedIn],
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 67c35c99bd..34d85399ba 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -307,11 +307,11 @@ export default mixins(
 			const result = this.$store.getters.getStateIsDirty;
 			if(result) {
 				const confirmModal = await this.confirmModal(
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.message'),
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.headline'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
 					'warning',
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'),
-					this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
 					true,
 				);
 
@@ -1470,9 +1470,13 @@ export default mixins(
 				const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
 				if (nodeTypeName) {
 					const mousePosition = this.getMousePositionWithinNodeView(event);
+					const sidebarOffset = this.sidebarMenuCollapsed ? CanvasHelpers.SIDEBAR_WIDTH : CanvasHelpers.SIDEBAR_WIDTH_EXPANDED;
 
 					this.addNodeButton(nodeTypeName, {
-						position: [mousePosition[0] - CanvasHelpers.NODE_SIZE / 2, mousePosition[1] - CanvasHelpers.NODE_SIZE / 2],
+						position: [
+							mousePosition[0] - CanvasHelpers.NODE_SIZE / 2,
+							mousePosition[1] - CanvasHelpers.NODE_SIZE / 2,
+						],
 						dragAndDrop: true,
 					});
 					this.createNodeActive = false;
@@ -3210,7 +3214,7 @@ export default mixins(
 <style scoped lang="scss">
 
 .zoom-menu {
-	$--zoom-menu-margin: 5;
+	$--zoom-menu-margin: 15;
 
 	position: fixed;
 	left: $sidebar-width + $--zoom-menu-margin;
@@ -3288,19 +3292,14 @@ export default mixins(
 }
 
 .node-view-root {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	top: 0;
 	overflow: hidden;
 	background-color: var(--color-canvas-background);
+	width: 100%;
+	height: 100%;
 }
 
 .node-view-wrapper {
 	position: fixed;
-	width: 100%;
-	height: 100%;
 }
 
 .node-view {
@@ -3308,6 +3307,7 @@ export default mixins(
 	width: 100%;
 	height: 100%;
 	transform-origin: 0 0;
+	z-index: -1;
 }
 
 .node-view-background {
@@ -3315,6 +3315,7 @@ export default mixins(
 	position: absolute;
 	width: 10000px;
 	height: 10000px;
+	z-index: -2;
 }
 
 .move-active {
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 92803351d8..35dd36cc65 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -96,10 +96,13 @@ export default mixins(workflowHelpers).extend({
 	methods: {
 		scrollToTop() {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: 0,
+						behavior: 'smooth',
+					});
+				}
 			}, 50);
 		},
 		onOpenTemplate({event, id}: {event: MouseEvent, id: string}) {
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 1340f4f447..051fc3adc3 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -320,23 +320,34 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				this.updateSearchTracking(search, categories);
 			}
 		},
-		scrollToTop() {
+		scrollTo(position: number, behavior: ScrollBehavior = 'smooth') {
 			setTimeout(() => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				});
-			}, 100);
+				const contentArea = document.getElementById('content');
+				if (contentArea) {
+					contentArea.scrollTo({
+						top: position,
+						behavior,
+					});
+				}
+			}, 0);
 		},
 	},
 	watch: {
 		workflows(newWorkflows) {
 			if (newWorkflows.length === 0) {
-				this.scrollToTop();
+				this.scrollTo(0);
 			}
 		},
 	},
 	beforeRouteLeave(to, from, next) {
+		const contentArea = document.getElementById('content');
+		if (contentArea) {
+			// When leaving this page, store current scroll position in route data
+			if (this.$route.meta && this.$route.meta.setScrollPosition && typeof this.$route.meta.setScrollPosition === 'function') {
+				this.$route.meta.setScrollPosition(contentArea.scrollTop);
+			}
+		}
+
 		this.trackSearch();
 		next();
 	},
@@ -345,6 +356,13 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		this.loadCategories();
 		this.loadWorkflowsAndCollections(true);
 		this.$store.dispatch('users/showPersonalizationSurvey');
+
+		setTimeout(() => {
+			// Check if there is scroll position saved in route and scroll to it
+			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
+				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
+			}
+		}, 100);
 	},
 	async created() {
 		if (this.$route.query.search && typeof this.$route.query.search === 'string') {
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index edfc52842e..9d159f6e98 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,6 +1,5 @@
 <template>
 	<div :class="$style.template">
-		<div :class="isMenuCollapsed ? $style.menu : $style.expandedMenu"></div>
 		<div :class="$style.container">
 			<div :class="$style.header">
 				<div :class="$style.goBack" v-if="goBackEnabled">
@@ -30,38 +29,18 @@ export default Vue.extend({
 			default: false,
 		},
 	},
-	computed: {
-		isMenuCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
-		},
-	},
 });
 </script>
 
 <style lang="scss" module>
-.mockMenu {
-	height: 100%;
-	min-height: 100vh;
-}
-
-.menu {
-	composes: mockMenu;
-	min-width: $sidebar-width;
-}
-
-.expandedMenu {
-	composes: mockMenu;
-	min-width: $sidebar-expanded-width;
-}
-
 .template {
 	display: flex;
+	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
 }
 
 .container {
 	width: 100%;
 	max-width: 1024px;
-	padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) var(--spacing-3xl);
 	margin: 0 auto;
 
 	@media (max-width: $breakpoint-md) {
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index d8cb2869a2..2ae3bd4dbc 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -110,9 +110,13 @@ export default mixins(workflowHelpers).extend({
 			this.showPreview = false;
 		},
 		scrollToTop() {
-			window.scrollTo({
-				top: 0,
-			});
+			const contentArea = document.getElementById('content');
+
+			if (contentArea) {
+				contentArea.scrollTo({
+					top: 0,
+				});
+			}
 		},
 	},
 	watch: {
diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index 47893dd124..17c69d514d 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -28,10 +28,11 @@ const MIN_X_TO_SHOW_OUTPUT_LABEL = 90;
 const MIN_Y_TO_SHOW_OUTPUT_LABEL = 100;
 
 export const NODE_SIZE = 100;
-export const DEFAULT_START_POSITION_X = 240;
-export const DEFAULT_START_POSITION_Y = 300;
+export const DEFAULT_START_POSITION_X = 175;
+export const DEFAULT_START_POSITION_Y = 235;
 export const HEADER_HEIGHT = 65;
 export const SIDEBAR_WIDTH = 65;
+export const SIDEBAR_WIDTH_EXPANDED = 200;
 export const MAX_X_TO_PUSH_DOWNSTREAM_NODES = 300;
 export const PUSH_NODES_OFFSET = NODE_SIZE * 2 + GRID_SIZE;
 const LOOPBACK_MINIMUM = 140;
@@ -476,7 +477,8 @@ export const getRelativePosition = (x: number, y: number, scale: number, offset:
 };
 
 export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
-	return getRelativePosition((window.innerWidth - SIDEBAR_WIDTH) / 2, (window.innerHeight - HEADER_HEIGHT) / 2, scale, offset);
+	const { editorWidth, editorHeight } = getContentDimensions();
+	return getRelativePosition((editorWidth - SIDEBAR_WIDTH) / 2, (editorHeight - HEADER_HEIGHT) / 2, scale, offset);
 };
 
 export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition) => {
@@ -612,24 +614,40 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 };
 
 
+const getContentDimensions = (): { editorWidth: number, editorHeight: number } => {
+	let contentWidth = window.innerWidth;
+	let contentHeight = window.innerHeight;
+	const contentElement = document.getElementById('content');
+
+	if (contentElement) {
+		const contentBounds = contentElement.getBoundingClientRect();
+		contentWidth = contentBounds.width;
+		contentHeight = contentBounds.height;
+	}
+	return {
+		editorWidth: contentWidth,
+		editorHeight: contentHeight,
+	};
+};
+
 export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
 	const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
-	const sidebarWidth = addComponentPadding? SIDEBAR_WIDTH: 0;
-	const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
-	const footerHeight = addComponentPadding? 200: 100;
+	const { editorWidth, editorHeight } = getContentDimensions();
+	const sidebarWidth = addComponentPadding ? SIDEBAR_WIDTH : 0;
+	const headerHeight = addComponentPadding ? HEADER_HEIGHT: 0;
+	const footerHeight = addComponentPadding ? 200 : 100;
 
 	const PADDING = NODE_SIZE * 4;
 
-	const editorWidth = window.innerWidth;
 	const diffX = maxX - minX + sidebarWidth + PADDING;
 	const scaleX = editorWidth / diffX;
 
-	const editorHeight = window.innerHeight;
-	const diffY = maxY - minY + headerHeight + PADDING;
+	const diffY = maxY - minY + PADDING;
 	const scaleY = editorHeight / diffY;
 
 	const zoomLevel = Math.min(scaleX, scaleY, 1);
-	let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
+
+	let xOffset = (minX * -1) * zoomLevel; // find top right corner
 	xOffset += (editorWidth - sidebarWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow
 
 	let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner
@@ -637,7 +655,7 @@ export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {off
 
 	return {
 		zoomLevel,
-		offset: [xOffset, yOffset],
+		offset: [xOffset, yOffset - headerHeight],
 	};
 };