diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index e7a4445d1b3c0..d7d222beeaaf3 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -30,14 +30,14 @@
     "@fortawesome/free-solid-svg-icons": "5.x",
     "@fortawesome/vue-fontawesome": "2.x",
     "core-js": "3.x",
-    "element-ui": "2.13.x"
+    "element-ui": "2.15.x"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "core-js": "^3.6.5",
-    "element-ui": "~2.13.0",
+    "element-ui": "2.15.x",
     "storybook-addon-themes": "^6.1.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -48,6 +48,7 @@
     "@storybook/addon-links": "^6.3.6",
     "@storybook/vue": "^6.3.6",
     "@types/jest": "^26.0.13",
+    "@types/markdown-it": "^12.2.3",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -64,6 +65,10 @@
     "eslint-plugin-vue": "^7.16.0",
     "fibers": "^5.0.0",
     "gulp": "^4.0.0",
+    "markdown-it": "^12.3.2",
+    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-link-attributes": "^4.0.0",
+    "markdown-it-task-lists": "^2.1.1",
     "prettier": "^2.3.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
@@ -75,6 +80,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-dart-sass": "^1.0.2",
     "node-notifier": ">=8.0.1",
-    "trim": ">=0.0.3"
+    "trim": ">=0.0.3",
+    "xss": "^1.0.10"
   }
 }
diff --git a/packages/design-system/src/components/N8nImage/Image.stories.js b/packages/design-system/src/components/N8nImage/Image.stories.js
new file mode 100644
index 0000000000000..237435e073841
--- /dev/null
+++ b/packages/design-system/src/components/N8nImage/Image.stories.js
@@ -0,0 +1,24 @@
+import N8nImage from './Image.vue';
+
+export default {
+  title: 'Atoms/Image',
+  component: N8nImage,
+	argTypes: {
+		images: {
+			control: {
+				type: 'array',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    N8nImage,
+  },
+  template:
+    '<n8n-image v-bind="$props"></n8n-image>',
+});
+
+export const Image = Template.bind({});
diff --git a/packages/design-system/src/components/N8nImage/Image.vue b/packages/design-system/src/components/N8nImage/Image.vue
new file mode 100644
index 0000000000000..0afc47e4c4d0c
--- /dev/null
+++ b/packages/design-system/src/components/N8nImage/Image.vue
@@ -0,0 +1,66 @@
+<template>
+	<div :class="$style.wrapper">
+		<div v-show="imageIsLoaded">
+			<img :class="$style.image" :srcset="getSrcset(images)" @load="imageIsLoaded = true"/>
+		</div>
+		<div>
+			<n8n-loading :animated="true" :loading="!imageIsLoaded" :rows="1" variant="image" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import N8nLoading from '../N8nLoading';
+
+interface IProps {
+	url: string;
+	metadata: IMetadata;
+}
+
+interface IMetadata {
+  width: string
+}
+
+export default {
+	name: 'n8n-image',
+	props: {
+		images: {
+			type: Array,
+		},
+	},
+	components: {
+		N8nLoading,
+	},
+	data() {
+		return {
+			imageIsLoaded: false,
+		};
+	},
+	methods: {
+		getSrcset(images: IProps[]): string {
+			let srcset = '';
+			if (images) {
+				for (let i = 0; i < images.length; i++) {
+          if (!images[i].metadata) {
+            srcset += images[i].url + ` 600w,`;
+          } else {
+						srcset += images[i].url + ` ${images[i].metadata.width}w,`;
+					}
+
+				}
+			}
+			return srcset;
+		},
+		onLoad() {
+			this.imageIsLoaded = true;
+		}
+	},
+};
+</script>
+
+<style lang="scss" module>
+.image {
+	border: 1px solid #dbdfe7;
+	border-radius: var(--border-radius-large);
+}
+</style>
diff --git a/packages/design-system/src/components/N8nImage/index.js b/packages/design-system/src/components/N8nImage/index.js
new file mode 100644
index 0000000000000..51a6b5bea462d
--- /dev/null
+++ b/packages/design-system/src/components/N8nImage/index.js
@@ -0,0 +1,3 @@
+import Image from './Image.vue';
+
+export default Image;
diff --git a/packages/design-system/src/components/N8nLoading/Loading.stories.js b/packages/design-system/src/components/N8nLoading/Loading.stories.js
new file mode 100644
index 0000000000000..7de62119abed5
--- /dev/null
+++ b/packages/design-system/src/components/N8nLoading/Loading.stories.js
@@ -0,0 +1,40 @@
+import N8nLoading from './Loading.vue';
+
+export default {
+	title: 'Atoms/Loading',
+	component: N8nLoading,
+	argTypes: {
+		animated: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		loading: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		rows: {
+			control: {
+				type: 'select',
+				options: [1, 2, 3, 4, 5],
+			},
+		},
+		variant: {
+			control: {
+				type: 'select',
+				options: ['button', 'h1', 'image', 'p'],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nLoading,
+	},
+	template: '<n8n-loading v-bind="$props"></n8n-heading>',
+});
+
+export const Loading = Template.bind({});
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
new file mode 100644
index 0000000000000..5967d11d476a6
--- /dev/null
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -0,0 +1,62 @@
+<template>
+	<el-skeleton :loading="loading" :animated="animated">
+		<template slot="template">
+			<el-skeleton-item
+				v-if="variant === 'button'"
+				:variant="variant"
+			/>
+			<div v-if="variant === 'h1'">
+				<el-skeleton-item
+					v-for="(item, index) in rows"
+					:key="`${index}-${item}`"
+					:class="{
+						'el-skeleton__h1--last': item === rows && rows > 1,
+					}"
+					:variant="variant"
+				/>
+			</div>
+			<el-skeleton-item
+				v-if="variant === 'image'"
+				:variant="variant"
+			/>
+			<div v-if="variant === 'p'">
+				<el-skeleton-item
+					class="el-skeleton__paragraph"
+					v-for="(item, index) in rows"
+					:key="`${index}-${item}`"
+					:class="{
+						'last': item === rows && rows > 1,
+					}"
+					:variant="variant"
+				/>
+			</div>
+		</template>
+	</el-skeleton>
+</template>
+
+<script lang="ts">
+import ElSkeleton from 'element-ui/lib/skeleton';
+import ElSkeletonItem from 'element-ui/lib/skeleton-item';
+
+export default {
+	name: 'n8n-loading',
+	components: {
+		ElSkeleton,
+		ElSkeletonItem,
+	},
+	props: {
+		animated: {
+			type: Boolean,
+		},
+		loading: {
+			type: Boolean,
+		},
+		rows: {
+			type: Number,
+		},
+		variant: {
+			type: String,
+		},
+	},
+};
+</script>
diff --git a/packages/design-system/src/components/N8nLoading/index.js b/packages/design-system/src/components/N8nLoading/index.js
new file mode 100644
index 0000000000000..a7420bd670927
--- /dev/null
+++ b/packages/design-system/src/components/N8nLoading/index.js
@@ -0,0 +1,3 @@
+import N8nLoading from './Loading.vue';
+
+export default N8nLoading;
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.stories.js b/packages/design-system/src/components/N8nMarkdown/Markdown.stories.js
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
new file mode 100644
index 0000000000000..a3235f2800aa6
--- /dev/null
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+		<div v-if="!loading" ref="editor" :class="$style.markdown" v-html="getContent" />
+		<div v-else :class="$style.markdown">
+			<div v-for="(block, index) in loadingBlocks"
+				:key="'block-' + index">
+				<n8n-loading
+					:animated="loadingAnimated"
+					:loading="loading"
+					:rows="loadingRows"
+					variant="p"
+				/>
+				<div :class="$style.spacer" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import N8nLoading from '../N8nLoading';
+import Markdown from 'markdown-it';
+const markdownLink = require('markdown-it-link-attributes');
+const markdownEmoji = require('markdown-it-emoji');
+const markdownTasklists = require('markdown-it-task-lists');
+
+import xss from 'xss';
+import { escapeMarkdown } from '../../utils/markdown';
+
+const DEFAULT_OPTIONS_MARKDOWN = {
+	html: true,
+	linkify: true,
+	typographer: true,
+};
+
+const DEFAULT_OPTIONS_LINK_ATTRIBUTES = {
+	attrs: {
+		target: '_blank',
+		rel: 'noopener',
+	},
+};
+
+const DEFAULT_OPTIONS_TASKLISTS = {
+	label: true,
+	labelAfter: true,
+};
+
+const DEFAULT_XSS_OPTIONS = {
+	escapeHtml: (html: string) => escapeMarkdown(html),
+};
+
+interface IImage {
+	id: string;
+	url: string;
+}
+
+export default {
+	components: {
+		N8nLoading,
+	},
+	name: 'n8n-markdown',
+	props: {
+		content: {
+			type: String,
+		},
+		images: {
+			type: Array,
+		},
+		loading: {
+			type: Boolean,
+		},
+		loadingAnimated: {
+			type: Boolean,
+			default: true,
+		},
+		loadingBlocks: {
+			type: Number,
+			default: 2
+		},
+		loadingRows: {
+			type: Number,
+			default: () => {
+				return 3;
+			}
+		},
+		options: {
+			type: Object,
+			default() {
+				return {
+					markdown: DEFAULT_OPTIONS_MARKDOWN,
+					linkAttributes: DEFAULT_OPTIONS_LINK_ATTRIBUTES,
+					tasklists: DEFAULT_OPTIONS_TASKLISTS,
+					xssOptions: DEFAULT_XSS_OPTIONS,
+				};
+			},
+		},
+	},
+	computed: {
+		getContent(): string {
+			if (this.content) {
+				const imageUrls: { [key: string]: string } = {};
+				if (this.images) {
+					// @ts-ignore
+					this.images.forEach((image: IImage) => {
+						if (!image) {
+							// Happens if an image got deleted but the workflow
+							// still has a reference to it
+							return;
+						}
+						imageUrls[image.id] = `${image.url}`;
+					});
+				}
+
+				// Replace the fileIds with the actual URLs
+				const imageRegexString = '][(]fileId:([0-9]+)[)]';
+				const imageMatches = this.content.match(new RegExp(imageRegexString, 'g'));
+				let content = this.content;
+
+				if (imageMatches !== null) {
+					for (const imageMatch of imageMatches) {
+						const matches = imageMatch.match(new RegExp(imageRegexString));
+						if (matches) {
+							const imageId = matches[1];
+							if (!imageUrls[imageId]) {
+								// Image is missing for some unknown reason
+								continue;
+							}
+							const imageUrl = imageUrls[imageId];
+							content = content.replace(
+								new RegExp('][(]fileId:' + imageId + '[)]'),
+								`](${imageUrl})`,
+							);
+						}
+					}
+				}
+
+				content = xss(content, this.options.xssOptions);
+
+				return this.md.render(content);
+			} else {
+				return '';
+			}
+		},
+	},
+	data() {
+		return {
+			md: new Markdown(this.options.markdown)
+				.use(markdownLink, this.options.linkAttributes)
+				.use(markdownEmoji)
+				.use(markdownTasklists, this.options.tasklists),
+		};
+	},
+};
+</script>
+
+<style lang="scss" module>
+.markdown {
+	color: var(--color-text-base);
+	font-size: var(--font-size-m);
+	line-height: var(--font-line-height-xloose);
+
+	h1, h2, h3, h4 {
+		margin-bottom: var(--spacing-s);
+	}
+
+	h3, h4 {
+		font-weight: var(--font-weight-bold);;
+	}
+
+	p,
+	span {
+		margin-bottom: var(--spacing-s);
+		font-size: var(--font-size-m);
+	line-height: var(--font-line-height-xloose);
+	}
+
+	ul, ol {
+		margin-bottom: var(--spacing-s);
+		padding-left: var(--spacing-m);
+		font-size: var(--font-size-m);
+		line-height: var(--font-line-height-xloose);
+
+		li {
+			margin-top: 0.25em;
+		}
+	}
+
+	a {
+		font-size: var(--font-size-m);
+		line-height: var(--font-line-height-xloose);
+	}
+
+	li > code,
+	p > code {
+		display: block;
+		padding: var(--spacing-s);
+		color: #555555;
+		background-color: #f2f4f8;
+	}
+
+	.label {
+		font-size: var(--font-size-m);
+	  line-height: var(--font-line-height-xloose);
+    color: var(--color-text-base);
+	}
+
+	img {
+		width: 100%;
+		border: 1px solid #dbdfe7;
+		border-radius: var(--border-radius-large);
+	}
+
+	.spacer {
+		margin: 48px;
+	}
+}
+</style>
diff --git a/packages/design-system/src/components/N8nMarkdown/index.js b/packages/design-system/src/components/N8nMarkdown/index.js
new file mode 100644
index 0000000000000..3751d0c839564
--- /dev/null
+++ b/packages/design-system/src/components/N8nMarkdown/index.js
@@ -0,0 +1,3 @@
+import N8nMarkdown from './Markdown.vue';
+
+export default N8nMarkdown;
diff --git a/packages/design-system/src/components/N8nTag/Tag.stories.js b/packages/design-system/src/components/N8nTag/Tag.stories.js
new file mode 100644
index 0000000000000..abac7c6792a38
--- /dev/null
+++ b/packages/design-system/src/components/N8nTag/Tag.stories.js
@@ -0,0 +1,24 @@
+import N8nTag from './Tag.vue';
+
+export default {
+	title: 'Atoms/Tag',
+	component: N8nTag,
+	argTypes: {
+		tag: {
+			control: {
+				control: 'text',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nTag,
+	},
+	template:
+		'<n8n-tag v-bind="$props"></n8n-tag>',
+});
+
+export const Tag = Template.bind({});
diff --git a/packages/design-system/src/components/N8nTag/Tag.vue b/packages/design-system/src/components/N8nTag/Tag.vue
new file mode 100644
index 0000000000000..1687f7e094aa3
--- /dev/null
+++ b/packages/design-system/src/components/N8nTag/Tag.vue
@@ -0,0 +1,26 @@
+<template functional>
+	<div :class="$style.tag" v-text="props.tag" @click="(e) => listeners.click && listeners.click(e)" />
+</template>
+
+<script lang="ts">
+export default {
+	name: 'n8n-tag',
+	props: {
+		tag: {
+			type: String,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.tag {
+	width: fit-content;
+  	margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0;
+	padding: var(--spacing-4xs);
+	background-color: #dbdfe7;
+	border-radius: var(--border-radius-base);
+	font-size: 11px;
+	cursor: pointer;
+}
+</style>
diff --git a/packages/design-system/src/components/N8nTag/index.js b/packages/design-system/src/components/N8nTag/index.js
new file mode 100644
index 0000000000000..5e8a0d45a6249
--- /dev/null
+++ b/packages/design-system/src/components/N8nTag/index.js
@@ -0,0 +1,3 @@
+import Tag from './Tag.vue';
+
+export default Tag;
diff --git a/packages/design-system/src/components/N8nTags/Tags.stories.js b/packages/design-system/src/components/N8nTags/Tags.stories.js
new file mode 100644
index 0000000000000..4de11c649e686
--- /dev/null
+++ b/packages/design-system/src/components/N8nTags/Tags.stories.js
@@ -0,0 +1,24 @@
+import N8nTags from './Tags.vue';
+
+export default {
+  title: 'Atoms/Tags',
+  component: N8nTags,
+	argTypes: {
+		tags: {
+			control: {
+				type: 'array',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    N8nTags,
+  },
+  template:
+    '<n8n-tags v-bind="$props"></n8n-tags>',
+});
+
+export const Tags = Template.bind({});
diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue
new file mode 100644
index 0000000000000..b4b9154e05667
--- /dev/null
+++ b/packages/design-system/src/components/N8nTags/Tags.vue
@@ -0,0 +1,31 @@
+<template functional>
+	<div :class="$style.tags">
+		<n8n-tag v-for="(tag, key) in props.tags" :key="'tag-' + key" :tag="tag.name" @click="props.clickButton(tag)"/>
+	</div>
+</template>
+
+<script lang="ts">
+import N8nTag from '../N8nTag';
+
+export default {
+	name: 'n8n-tags',
+	components: {
+		N8nTag,
+	},
+	props: {
+		tags: {
+			type: Array,
+		},
+		clickButton: {
+			type: Function,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+}
+</style>
diff --git a/packages/design-system/src/components/N8nTags/index.js b/packages/design-system/src/components/N8nTags/index.js
new file mode 100644
index 0000000000000..ebf28f6470f1c
--- /dev/null
+++ b/packages/design-system/src/components/N8nTags/index.js
@@ -0,0 +1,3 @@
+import Tags from './Tags.vue';
+
+export default Tags;
diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js
index a82ddc6e3f84b..8989827ea98ac 100644
--- a/packages/design-system/src/components/index.js
+++ b/packages/design-system/src/components/index.js
@@ -1,16 +1,21 @@
 import N8nButton from './N8nButton';
 import N8nIcon from './N8nIcon';
 import N8nIconButton from './N8nIconButton';
+import N8nImage from './N8nImage';
 import N8nInput from './N8nInput';
 import N8nInfoTip from './N8nInfoTip';
 import N8nInputNumber from './N8nInputNumber';
 import N8nInputLabel from './N8nInputLabel';
+import N8nLoading from './N8nLoading';
 import N8nHeading from './N8nHeading';
+import N8nMarkdown from './N8nMarkdown';
 import N8nMenu from './N8nMenu';
 import N8nMenuItem from './N8nMenuItem';
 import N8nSelect from './N8nSelect';
 import N8nSpinner from './N8nSpinner';
 import N8nSquareButton from './N8nSquareButton';
+import N8nTags from './N8nTags';
+import N8nTag from './N8nTag';
 import N8nText from './N8nText';
 import N8nTooltip from './N8nTooltip';
 import N8nOption from './N8nOption';
@@ -19,16 +24,21 @@ export {
 	N8nButton,
 	N8nIcon,
 	N8nIconButton,
+	N8nImage,
 	N8nInfoTip,
 	N8nInput,
 	N8nInputLabel,
 	N8nInputNumber,
+	N8nLoading,
+	N8nMarkdown,
 	N8nHeading,
 	N8nMenu,
 	N8nMenuItem,
 	N8nSelect,
 	N8nSpinner,
 	N8nSquareButton,
+	N8nTags,
+	N8nTag,
 	N8nText,
 	N8nTooltip,
 	N8nOption,
diff --git a/packages/design-system/src/shims-element-ui.d.ts b/packages/design-system/src/shims-element-ui.d.ts
index e59e86f062c80..645df50e69941 100644
--- a/packages/design-system/src/shims-element-ui.d.ts
+++ b/packages/design-system/src/shims-element-ui.d.ts
@@ -6,4 +6,6 @@ declare module 'element-ui/lib/select';
 declare module 'element-ui/lib/option';
 declare module 'element-ui/lib/menu';
 declare module 'element-ui/lib/menu-item';
+declare module 'element-ui/lib/skeleton';
+declare module 'element-ui/lib/skeleton-item';
 
diff --git a/packages/design-system/src/utils/markdown.ts b/packages/design-system/src/utils/markdown.ts
new file mode 100644
index 0000000000000..8d757580d3d5b
--- /dev/null
+++ b/packages/design-system/src/utils/markdown.ts
@@ -0,0 +1,12 @@
+export const escapeMarkdown = (html: string | undefined): string => {
+	if (!html) {
+		return '';
+	}
+	const escaped = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+	// unescape greater than quotes at start of line
+	const withQuotes = escaped.replace(/^((\s)*(&gt;)+)+\s*/gm, (matches) => {
+		return matches.replace(/&gt;/g, '>');
+	});
+
+	return withQuotes;
+};
diff --git a/packages/design-system/theme/src/index.scss b/packages/design-system/theme/src/index.scss
index 353317e1c3d2e..953f306f1a2d3 100644
--- a/packages/design-system/theme/src/index.scss
+++ b/packages/design-system/theme/src/index.scss
@@ -22,6 +22,7 @@
 // @use "./checkbox-group.scss";
 @use "./switch.scss";
 @use "./select.scss";
+@use "./skeleton.scss";
 @use "./button.scss";
 // @use "./button-group.scss";
 @use "./table.scss";
diff --git a/packages/design-system/theme/src/skeleton.scss b/packages/design-system/theme/src/skeleton.scss
new file mode 100644
index 0000000000000..f85d78e11d8dd
--- /dev/null
+++ b/packages/design-system/theme/src/skeleton.scss
@@ -0,0 +1,96 @@
+.el-skeleton {
+	width: 100%;
+}
+
+.el-skeleton__item {
+	width: 100%;
+	height: 16px;
+	border-radius: var(--border-radius-large);
+	background: #f2f2f2;
+	display: inline-block;
+}
+
+.el-skeleton__button {
+	width: 162px;
+	height: 40px;
+	border-radius: 20px;
+}
+
+.el-skeleton__p {
+	width: 100%;
+}
+
+.el-skeleton__h1 {
+	height: 20px;
+	margin-top: 14px;
+}
+
+.el-skeleton__h1--last {
+	width: 40%;
+	margin-top: 14px;
+}
+
+.el-skeleton__image {
+	width: unset;
+	height: 607px !important;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	border-radius: 8px !important;
+}
+
+.el-skeleton__image svg {
+	width: 22%;
+	height: 22%;
+	fill: #dcdde0;
+}
+
+.el-skeleton__first-line,
+.el-skeleton__paragraph {
+	height: 16px;
+	margin-top: 16px;
+	background: #f2f2f2;
+}
+
+.el-skeleton__paragraph.last {
+	width: 61%;
+}
+
+.el-skeleton.is-animated .el-skeleton__item {
+	background: -webkit-gradient(
+		linear,
+		left top,
+		right top,
+		color-stop(25%, #f2f2f2),
+		color-stop(37%, #e6e6e6),
+		color-stop(63%, #f2f2f2)
+	);
+	background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+	background-size: 400% 100%;
+	-webkit-animation: el-skeleton-loading 1.4s ease infinite;
+	animation: el-skeleton-loading 1.4s ease infinite;
+}
+
+@-webkit-keyframes el-skeleton-loading {
+	0% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0 50%;
+	}
+}
+
+@keyframes el-skeleton-loading {
+	0% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0 50%;
+	}
+}
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 6d0710be8097b..9888bbee15196 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -30,7 +30,8 @@
     "timeago.js": "^4.0.2",
     "v-click-outside": "^3.1.2",
     "vue-fragment": "^1.5.2",
-    "vue-i18n": "^8.26.7"
+    "vue-i18n": "^8.26.7",
+    "xss": "^1.0.10"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -61,7 +62,7 @@
     "babel-eslint": "^10.0.1",
     "cross-env": "^7.0.2",
     "dateformat": "^3.0.3",
-    "element-ui": "~2.13.0",
+    "element-ui": "~2.15.7",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-vue": "^7.16.0",
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index a0ab00a93b774..8e5f9f00ca7d9 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -511,6 +511,29 @@ export interface IN8nPromptResponse {
 	updated: boolean;
 }
 
+export interface IN8nTemplateResponse {
+	data: IN8nTemplateWorkflow;
+}
+
+export interface IN8nTemplateWorkflow {
+	workflow: IN8nTemplate;
+}
+
+export interface IN8nTemplate {
+	id: string;
+	categories: ITemplateCategories[];
+	createdAt: string;
+	description: string;
+	image: ITemplateImage[];
+	mainImage: ITemplateMainImage[];
+	name: string;
+	nodes: ITemplateNode[];
+	totalViews: number;
+	user: {
+		username: string;
+	};
+}
+
 export interface IN8nUISettings {
 	endpointWebhook: string;
 	endpointWebhookTest: string;
@@ -545,6 +568,38 @@ export interface IWorkflowSettings extends IWorkflowSettingsWorkflow {
 	executionTimeout?: number;
 }
 
+export interface ITemplateCategories {
+	id: string;
+	name: string;
+}
+
+export interface ITemplateImage {
+	id: string;
+	url: string;
+}
+
+export interface ITemplateMainImage {
+	url: string;
+	metadata: ITemplateMetadata;
+}
+
+export interface ITemplateMetadata {
+	width: string;
+}
+export interface ITemplateNode {
+	displayName: string;
+	defaults: {
+		color: string;
+	};
+	icon: string;
+	iconData?: {
+		fileBuffer?: string;
+		type?: string;
+	};
+	name: string;
+	typeVersion: number;
+}
+
 export interface ITimeoutHMS {
 	hours: number;
 	minutes: number;
@@ -721,6 +776,10 @@ export interface ISettingsState {
 	promptsData: IN8nPrompts;
 }
 
+export interface ITemplateState {
+	templates: IN8nTemplate[];
+}
+
 export interface IVersionsState {
 	versionNotificationSettings: IVersionNotificationSettings;
 	nextVersions: IVersion[];
diff --git a/packages/editor-ui/src/api/templates-mock.ts b/packages/editor-ui/src/api/templates-mock.ts
new file mode 100644
index 0000000000000..e0c401c930ced
--- /dev/null
+++ b/packages/editor-ui/src/api/templates-mock.ts
@@ -0,0 +1,90 @@
+import { IN8nTemplateResponse } from '@/Interface';
+
+const response = {
+	data: {
+		workflow: {
+			id: '23',
+			name: 'New/updated employee in BambooHR -> Create/Update user in Okta and Slack to group',
+			description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit iaculis ante quis pretium. Fusce eget lectus nec quam ornare finibus. Proin ut imperdiet velit. Donec at ligula mattis, sagittis     elit sit amet, volutpat quam. Nunc vel congue quam. Vivamus feugiat libero tellus, quis iaculis justo mattis sit amet. Nam vitae nunc vel urna interdum pretium ut quis odio. Maecenas porta scelerisque dolor eleifend suscipit. Ut venenatis orci eget neque vestibulum, id elementum nisi congue. Nulla facilisi. Suspendisse vitae venenatis urna. Fusce viverra sapien nec diam tincidunt, id scelerisque turpis viverra. Morbi finibus consequat nisi maximus malesuada. Integer vel ultricies odio. Donec at ligula mattis, sagittis elit sit amet Vivamus feugiat libero tellus, quis iaculis justo mattis sit amet. Nam vitae nunc vel urna interdum pretium ut quis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit iaculis ante quis pretium. Fusce eget lectus nec quam ornare finibus. I made this workflow after discovering that n8n does not have a Todoist trigger. \n\nSteps:\n\n- Configure Todoist webhook by visiting their portal [https://developer.todoist.com/appconsole.html](https://developer.todoist.com/appconsole.html) and checking off the triggers which you want to use. I only used item:completed in my case, but yours could be different.\n- Use the test webhook URL from n8n to test your trigger.\n- Once testing is successful, register the production webhook URL from n8n into the todoist developer portal\n- Adjust the date & time to your liking and appropriate timezone\n- In my case I am sending the data to a Google Sheet but you can change that to whatever app you want to send it to.\n- Profit!\n\nFeel free to reach out to me on [https://twitter.com/sami_abid](https://twitter.com/sami_abid) if you have any questions\n<script>alert("xss");</script>\n\n\n\n**HTTP Request node:** This node fetches an image from Unsplash. Replace this node with any other node to fetch the image file.\n\n**HTTP Request1 node:** This node uploads the Twitter Profile Banner. The Twitter API requires OAuth 1.0 authentication. Follow the Twitter documentation to learn how to configure the authentication.\n\n**Cron node** schedules the workflow to run every minute.\n1. Copy workflow to your n8n\n2. Set telegram credentials and\n3. Copy workflow to your n8n\n2. Set telegram credentials and\n *Heading* \n ***Heading*** \n  **h1Headingh1** \n  ##Heading 2 \n ###Heading3 \n > Blockquote \n ~~Strikethrough~~ \n # 🛸 Technologies Used \n \n ## 🛸 Technologies Used \n ### 🛸 Technologies Used \n #### 🛸 Technologies Used \n ```bash npm install happiness ``` \n - [ ] Mercury \n - [x] Mercury',
+			image: [
+				{
+					id: '564',
+					url: 'https://f000.backblazeb2.com/file/n8n-website-images/ffa19945d89a4feca922859899d435cf.png',
+				},
+			],
+			mainImage: [
+				{
+					url: 'https://f000.backblazeb2.com/file/n8n-website-images/ffa19945d89a4feca922859899d435cf.png',
+					metadata: {
+						width: '1000',
+					},
+				},
+				{
+					url: 'https://f000.backblazeb2.com/file/n8n-website-images/ffa19945d89a4feca922859899d435cf.png',
+					metadata: {
+						width: '600',
+					},
+				},
+			],
+			nodes: [
+				{
+					defaults: {
+						color: '#000000',
+					},
+					displayName: 'Airtable',
+					icon: 'file:airtable.svg',
+					iconData: {
+						fileBuffer: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcwIj48cGF0aCBkPSJNODkgNC44TDE2LjIgMzQuOWMtNC4xIDEuNy00IDcuNC4xIDkuMWw3My4yIDI5YzYuNCAyLjYgMTMuNiAyLjYgMjAgMGw3My4yLTI5YzQuMS0xLjYgNC4xLTcuNC4xLTkuMWwtNzMtMzAuMUMxMDMuMiAyIDk1LjcgMiA4OSA0LjgiIGZpbGw9IiNmY2I0MDAiLz48cGF0aCBkPSJNMTA1LjkgODguOXY3Mi41YzAgMy40IDMuNSA1LjggNi43IDQuNWw4MS42LTMxLjdjMS45LS43IDMuMS0yLjUgMy4xLTQuNVY1Ny4yYzAtMy40LTMuNS01LjgtNi43LTQuNUwxMDkgODQuM2MtMS45LjgtMy4xIDIuNi0zLjEgNC42IiBmaWxsPSIjMThiZmZmIi8+PHBhdGggZD0iTTg2LjkgOTIuNmwtMjQuMiAxMS43LTIuNSAxLjJMOS4xIDEzMGMtMy4yIDEuNi03LjQtLjgtNy40LTQuNFY1Ny41YzAtMS4zLjctMi40IDEuNi0zLjMuNC0uNC44LS43IDEuMi0uOSAxLjItLjcgMy0uOSA0LjQtLjNsNzcuNSAzMC43YzQgMS41IDQuMyA3LjEuNSA4LjkiIGZpbGw9IiNmODJiNjAiLz48cGF0aCBkPSJNODYuOSA5Mi42bC0yNC4yIDExLjctNTkuNC01MGMuNC0uNC44LS43IDEuMi0uOSAxLjItLjcgMy0uOSA0LjQtLjNsNzcuNSAzMC43YzQgMS40IDQuMyA3IC41IDguOCIgZmlsbD0iI2JhMWU0NSIvPjwvc3ZnPg==',
+						type: 'file',
+					},
+					name: 'n8n-nodes-base.airtable',
+					typeVersion: 1,
+				},
+				{
+					defaults: {
+						color: '#305b94',
+					},
+					displayName: 'AWS Rekognition',
+					icon: `file:rekognition.svg`,
+					iconData: {
+						fileBuffer: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNzQuMzc1IDg1IiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48dXNlIHhsaW5rOmhyZWY9IiNhIiB4PSIyLjE4OCIgeT0iMi41Ii8+PHN5bWJvbCBpZD0iYSIgb3ZlcmZsb3c9InZpc2libGUiPjxnIHN0cm9rZT0ibm9uZSI+PHBhdGggZD0iTTIuODg2IDUyLjhMMTYuOCA1MS4yNjhWMjguNzMyTDIuODg2IDI3LjJ2MjUuNnoiIGZpbGw9IiM1Mjk0Y2YiLz48ZyBmaWxsPSIjMTk0ODZmIj48cGF0aCBkPSJNNjcuMjA3IDI4Ljg5OGwtNi40NjIgMi40My0zNi4yMzctNS4zNDZMMzQuOTkgMGwzMi4yMTcgMjguODk4eiIvPjxwYXRoIGQ9Ik0zLjUwNCAyOC45NjZMMzUgMTIuMjM0IDQ1LjU0MyAyNiAxNi44MSAzMC4yMjRsLTEzLjMwNS0xLjI2eiIvPjwvZz48ZyBmaWxsPSIjMjA1Yjk5Ij48cGF0aCBkPSJNMzUgMjRMMCAzMC42MjRWMTYuNTU2TDM1IDBsMTcuMDE2IDE4LjQ3OEwzNSAyNHoiLz48cGF0aCBkPSJNNy4wMDggMTYuNDc4TDAgMTkuMzk1djQ0LjA1bDcuMDA4IDMuMzA3VjE2LjQ3OHoiLz48L2c+PHBhdGggZD0iTTcwIDE2LjU2NkwzNSAwdjI0bDM1IDYuNjI0di0xNC4wNnoiIGZpbGw9IiM1Mjk0Y2YiLz48ZyBmaWxsPSIjOTliY2UzIj48cGF0aCBkPSJNMS4xNTQgNTEuMjZMMzQuOTkgODBsMTAuNTU0LTI2LTI4LjczNC00LjIyNEwxLjE1NCA1MS4yNnoiLz48cGF0aCBkPSJNNjcuNjQgNTEuMTQybC02LjQ5My0yLjUyNy0zNi42NCA1LjQwNSAxMC40OCAyNS4yMiAzMi42NS0yOC4wOTd6Ii8+PC9nPjxwYXRoIGQ9Ik02Ny4yMDcgNTEuMTAzbC0xMy45NjUtMS4zMjd2LTE5LjU1TDY3LjIwNyAyOC45djIyLjIwNXpNMzUgNTZsMTUuMTMtMTZMMzUgMjQgMTYuMzU2IDQwIDM1IDU2eiIgZmlsbD0iIzIwNWI5OSIvPjxwYXRoIGQ9Ik01My42MjQgNDBMMzUgNTZWMjRsMTguNjM0IDE2eiIgZmlsbD0iIzUyOTRjZiIvPjxwYXRoIGQ9Ik0wIDQ5LjM3NkwzNSA1NmwxOS4yMSA3Ljg3M0wzNSA4MCAwIDYzLjQ0NFY0OS4zNzZ6IiBmaWxsPSIjMjA1Yjk5Ii8+PGcgZmlsbD0iIzUyOTRjZiI+PHBhdGggZD0iTTcwIDYzLjQzNUwzNSA4MFY1NmwzNS02LjYyNHYxNC4wNnoiLz48cGF0aCBkPSJNNjIuOTcgNjYuNzVMNzAgNjMuNDM0VjE2LjU2NmwtNy4wMy0zLjMyN1Y2Ni43NXoiLz48L2c+PC9nPjwvc3ltYm9sPjwvc3ZnPg==',
+						type: 'file',
+					},
+					name: 'n8n-nodes-base.awsRekognition',
+					typeVersion: 1,
+				},
+			],
+			totalViews: 120000,
+			categories: [
+				{
+					id: '1',
+					name: 'Security Ops',
+				},
+				{
+					id: '2',
+					name: 'Building Blocks',
+				},
+				{
+					id: '3',
+					name: 'Building Blocks',
+				},
+				{
+					id: '4',
+					name: 'Building Blocks',
+				},
+				{
+					id: '5',
+					name: 'Building Blocks',
+				},
+			],
+			user: {
+				username: 'someusername',
+			},
+			createdAt: '2021-12-15T11:56:35.412Z',
+		},
+	},
+};
+
+export async function getTemplateById(templateId: string): Promise<IN8nTemplateResponse> {
+	return response;
+}
diff --git a/packages/editor-ui/src/api/templates.ts b/packages/editor-ui/src/api/templates.ts
new file mode 100644
index 0000000000000..7706d3c320911
--- /dev/null
+++ b/packages/editor-ui/src/api/templates.ts
@@ -0,0 +1,37 @@
+import { IN8nTemplateResponse } from '@/Interface';
+import { post } from './helpers';
+import { TEMPLATES_BASE_URL } from '@/constants';
+
+export async function getTemplateById(templateId: string): Promise<IN8nTemplateResponse> {
+	const query = `query {
+		workflow(id:"${templateId}"){
+			id
+			name
+			description
+			image{
+				id
+				url
+			}
+			mainImage
+			nodes{
+				defaults
+				name
+				displayName
+				icon
+				iconData
+				typeVersion: version
+			}
+			totalViews: views
+			categories{
+				id
+				name
+			}
+			user{
+				username
+			}
+			created_at
+		}
+	}`;
+
+	return await post(TEMPLATES_BASE_URL, `/graphql`, { query });
+}
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
new file mode 100644
index 0000000000000..4f769efcd06f2
--- /dev/null
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -0,0 +1,41 @@
+<template>
+	<div :class="$style.wrapper" @click="$router.go(-1)">
+		<font-awesome-icon :class="$style.icon" icon="arrow-left" />
+		<div :class="$style.text" v-text="$locale.baseText('template.buttons.goBackButton')" />
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({});
+</script>
+
+<style lang="scss" module>
+.wrapper {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+
+	&:hover {
+		.icon, .text {
+			color: $--color-primary;
+		}
+	}
+}
+
+.icon {
+	margin-right: var(--spacing-2xs);
+	color: #C6C8D0;
+	font-size: var(--font-size-m);
+
+	&:hover {
+		color: $--color-primary;
+	}
+}
+
+.text {
+	font-size: var(--font-size-s);
+	line-height: var(--font-line-height-loose);
+	color: var(--color-text-base);
+}
+</style>
diff --git a/packages/editor-ui/src/components/TemplateDetails/NodeIcon/NodeIcon.vue b/packages/editor-ui/src/components/TemplateDetails/NodeIcon/NodeIcon.vue
new file mode 100644
index 0000000000000..18449f3bb04dc
--- /dev/null
+++ b/packages/editor-ui/src/components/TemplateDetails/NodeIcon/NodeIcon.vue
@@ -0,0 +1,177 @@
+<template>
+	<div
+		:class="$style.wrapper"
+		:style="iconStyleData"
+		@mouseover="showTooltip = true"
+    @mouseleave="showTooltip = false"
+		@click="clickButton(nodeType)"
+	>
+		<div :class="$style.tooltip">
+			<n8n-tooltip placement="top" :manual="true" :value="showTooltip">
+				<div slot="content" v-text="nodeType.displayName"></div>
+				<span />
+			</n8n-tooltip>
+		</div>
+		<div
+			v-if="nodeIconData !== null"
+			:class="$style.icon"
+			title=""
+		>
+			<img
+				v-if="nodeIconData.type === 'file'"
+				:src="nodeIconData.fileBuffer || nodeIconData.path"
+				:style="imageStyleData"
+			/>
+			<font-awesome-icon
+				v-else
+				:icon="nodeIconData.icon || nodeIconData.path"
+				:style="fontStyleData"
+			/>
+		</div>
+		<div v-else :class="$style.placeholder">
+			{{nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { IVersionNode } from '@/Interface';
+import { INodeTypeDescription } from 'n8n-workflow';
+
+interface NodeIconData {
+	type: string;
+	path?: string;
+	fileExtension?: string;
+	fileBuffer?: string;
+}
+
+export default Vue.extend({
+	name: 'NodeIcon',
+	props: {
+		circle: {
+			type: Boolean,
+			default: false,
+		},
+		clickButton: {
+			type: Function,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		nodeType: {
+			type: Object,
+		},
+		size: {
+			type: Number,
+		},
+	},
+	computed: {
+		iconStyleData (): object {
+			const nodeType = this.nodeType as IVersionNode | null;
+			const color = nodeType ? nodeType.defaults && nodeType!.defaults.color : '';
+			if (!this.size) {
+				return {color};
+			}
+
+			return {
+				color,
+				width: this.size + 'px',
+				height: this.size + 'px',
+				'font-size': this.size + 'px',
+				'line-height': this.size + 'px',
+				'border-radius': this.circle ? '50%': '2px',
+				...(this.disabled && {
+					color: '#ccc',
+					'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
+					'filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
+				}),
+			};
+		},
+		fontStyleData (): object {
+			return {
+				'max-width': this.size + 'px',
+			};
+		},
+		imageStyleData (): object {
+			return {
+				width: '100%',
+				'max-width': '100%',
+				'max-height': '100%',
+			};
+		},
+		isSvgIcon (): boolean {
+			if (this.nodeIconData && this.nodeIconData.type === 'file' && this.nodeIconData.fileExtension === 'svg') {
+				return true;
+			}
+			return false;
+		},
+		nodeIconData (): null | NodeIconData {
+			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
+			if (nodeType === null) {
+				return null;
+			}
+
+			if ((nodeType as IVersionNode).iconData) {
+				return (nodeType as IVersionNode).iconData;
+			}
+
+			const restUrl = this.$store.getters.getRestUrl;
+
+			if (nodeType.icon) {
+				let type, path;
+				[type, path] = nodeType.icon.split(':');
+				const returnData: NodeIconData = {
+					type,
+					path,
+				};
+
+				if (type === 'file') {
+					returnData.path = restUrl + '/node-icon/' + nodeType.name;
+					returnData.fileExtension = path.split('.').slice(-1).join();
+				}
+
+				return returnData;
+			}
+			return null;
+		},
+	},
+	data() {
+		return {
+			showTooltip: false,
+		};
+	},
+});
+</script>
+
+<style lang="scss" module>
+.wrapper {
+  width: 24px;
+	height: 24px;
+	margin-right: var(--spacing-xs);
+	border-radius: var(--border-radius-small);
+	line-height: var(--font-line-height-xloose);
+	font-size: var(--font-size-l);
+	font-weight: var(--font-weight-bold);
+	cursor: pointer;
+	z-index: 3000;
+}
+
+.icon {
+  height: 100%;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.placeholder {
+	text-align: center;
+}
+
+.tooltip {
+	left: 10px;
+	position: relative;
+}
+</style>
diff --git a/packages/editor-ui/src/components/TemplateDetails/TemplateBlock/TemplateBlock.vue b/packages/editor-ui/src/components/TemplateDetails/TemplateBlock/TemplateBlock.vue
new file mode 100644
index 0000000000000..dc24378bf2a38
--- /dev/null
+++ b/packages/editor-ui/src/components/TemplateDetails/TemplateBlock/TemplateBlock.vue
@@ -0,0 +1,36 @@
+<template>
+	<div :class="$style.block">
+		<div :class="$style.header">
+			<n8n-heading tag="h3" size="small" color="text-base">{{ title }}</n8n-heading>
+		</div>
+		<div :class="$style.content">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		title: {
+			type: String,
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.block {
+	padding-bottom: var(--spacing-xl);
+}
+
+.header {
+	padding: 0 0 var(--spacing-4xs);
+	border-bottom: 1px solid $--node-creator-border-color;
+}
+
+.content {
+	padding: var(--spacing-xs) 0;
+}
+</style>
diff --git a/packages/editor-ui/src/components/TemplateDetails/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails/TemplateDetails.vue
new file mode 100644
index 0000000000000..6a05ff47e4b94
--- /dev/null
+++ b/packages/editor-ui/src/components/TemplateDetails/TemplateDetails.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="template-details">
+		<n8n-loading :animated="true" :loading="loading" :rows="5" variant="p" />
+
+		<template-block v-if="!loading" :title="$locale.baseText('template.details.appsInTheWorkflow')">
+			<template v-slot:content>
+				<div :class="$style.icons">
+					<NodeIcon
+						v-for="node in template.nodes"
+						:key="node.name"
+						:nodeType="node"
+						:title="node.name"
+						:clickButton="redirectToSearchPage"
+					/>
+				</div>
+			</template>
+		</template-block>
+
+		<template-block v-if="!loading" :title="$locale.baseText('template.details.categories')">
+			<template v-slot:content>
+				<n8n-tags :tags="template.categories" :clickButton="redirectToCategory"/>
+			</template>
+		</template-block>
+
+		<template-block v-if="!loading" :title="$locale.baseText('template.details.details')">
+			<template v-slot:content>
+				<div :class="$style.text">
+					<n8n-text v-if="template.user" size="small" color="text-base">
+						{{ $locale.baseText('template.details.created') }}
+						<TimeAgo :date="template.createdAt" />
+						{{ $locale.baseText('template.details.by') }}
+						{{ template.user.username }}
+					</n8n-text>
+				</div>
+				<div :class="$style.text">
+					<n8n-text size="small" color="text-base">
+						{{ $locale.baseText('template.details.viewed') }}
+						{{ abbreviateNumber(template.totalViews) }}
+						{{ $locale.baseText('template.details.times') }}
+					</n8n-text>
+				</div>
+			</template>
+		</template-block>
+
+	</div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+import TemplateBlock from './TemplateBlock/TemplateBlock.vue';
+import NodeIcon from './NodeIcon/NodeIcon.vue';
+import { abbreviateNumber } from '../helpers';
+
+interface ITag {
+	id: string;
+	name: string;
+}
+
+interface INode {
+	displayName: string;
+}
+
+export default Vue.extend({
+	props: {
+		loading: {
+			type: Boolean,
+		},
+		template: {
+			type: Object,
+		},
+	},
+	components: {
+		TemplateBlock,
+		NodeIcon,
+	},
+	methods: {
+		abbreviateNumber,
+		redirectToCategory(tag: ITag) {
+			this.$router.push(`/templates?categoryId=${tag.id}`);
+		},
+		redirectToSearchPage(node: INode) {
+			this.$router.push(`/templates?search=${node.displayName}`);
+		},
+	},
+});
+</script>
+<style lang="scss" module>
+.icons {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.tags {
+	display: flex;
+}
+
+.text {
+	padding-bottom: var(--spacing-xs);
+}
+</style>
diff --git a/packages/editor-ui/src/components/helpers.ts b/packages/editor-ui/src/components/helpers.ts
index 506b3de6185a5..7b1d49709d375 100644
--- a/packages/editor-ui/src/components/helpers.ts
+++ b/packages/editor-ui/src/components/helpers.ts
@@ -1,6 +1,19 @@
 import dateformat from 'dateformat';
 
 const KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
+const SI_SYMBOL = ['', 'k', 'M', 'G', 'T', 'P', 'E'];
+
+export function abbreviateNumber(num: number) {
+	const tier = (Math.log10(Math.abs(num)) / 3) | 0;
+
+	if (tier === 0) return num;
+
+	const suffix = SI_SYMBOL[tier];
+	const scale = Math.pow(10, tier * 3);
+	const scaled = num / scale;
+
+	return Number(scaled.toFixed(1)) + suffix;
+}
 
 export function convertToDisplayDate (epochTime: number) {
 	return dateformat(epochTime, 'yyyy-mm-dd HH:MM:ss');
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 9036c1cabcaad..aa85d538915f7 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -37,7 +37,7 @@ export const BREAKPOINT_XL = 1920;
 
 
 // templates
-export const TEMPLATES_BASE_URL = `https://api.n8n.io/`;
+export const TEMPLATES_BASE_URL = `https://api-staging.n8n.io/`;
 
 // node types
 export const CALENDLY_TRIGGER_NODE_TYPE = 'n8n-nodes-base.calendlyTrigger';
diff --git a/packages/editor-ui/src/modules/templates.ts b/packages/editor-ui/src/modules/templates.ts
new file mode 100644
index 0000000000000..5f317930d07a6
--- /dev/null
+++ b/packages/editor-ui/src/modules/templates.ts
@@ -0,0 +1,42 @@
+import { getTemplateById } from '@/api/templates';
+import { ActionContext, Module } from 'vuex';
+import {
+	IRootState,
+	IN8nTemplateResponse,
+	IN8nTemplateWorkflow,
+	IN8nTemplate,
+	ITemplateState,
+} from '../Interface';
+
+const module: Module<ITemplateState, IRootState> = {
+	namespaced: true,
+	state: {
+		templates: [],
+	},
+	getters: {
+		getTemplates(state: ITemplateState) {
+			return state.templates;
+		},
+	},
+	mutations: {
+		setTemplate(state: ITemplateState, template: IN8nTemplate) {
+			state.templates.push(template);
+		},
+	},
+	actions: {
+		async getTemplateById(context: ActionContext<ITemplateState, IRootState>, templateId: string) {
+			try {
+				const response: IN8nTemplateResponse = await getTemplateById(templateId);
+				const data: IN8nTemplateWorkflow = response.data;
+				const template: IN8nTemplate = data.workflow;
+
+				context.commit('setTemplate', template);
+				return template;
+			} catch(e) {
+				return;
+			}
+		},
+	},
+};
+
+export default module;
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 24856be949381..ea0c87adb280a 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -46,16 +46,21 @@ import locale from 'element-ui/lib/locale';
 import {
 	N8nIconButton,
 	N8nButton,
+	N8nImage,
 	N8nInfoTip,
 	N8nInput,
 	N8nInputLabel,
 	N8nInputNumber,
+	N8nLoading,
 	N8nHeading,
+	N8nMarkdown,
 	N8nMenu,
 	N8nMenuItem,
 	N8nSelect,
 	N8nSpinner,
 	N8nSquareButton,
+	N8nTags,
+	N8nTag,
 	N8nText,
 	N8nTooltip,
 	N8nOption,
@@ -67,16 +72,21 @@ Vue.use(Fragment.Plugin);
 // n8n design system
 Vue.use(N8nButton);
 Vue.use(N8nIconButton);
+Vue.use(N8nImage);
 Vue.use(N8nInfoTip);
 Vue.use(N8nInput);
 Vue.use(N8nInputLabel);
 Vue.use(N8nInputNumber);
+Vue.component('n8n-loading', N8nLoading);
 Vue.use(N8nHeading);
+Vue.component('n8n-markdown', N8nMarkdown);
 Vue.use(N8nMenu);
 Vue.use(N8nMenuItem);
 Vue.use(N8nSelect);
 Vue.use(N8nSpinner);
 Vue.component('n8n-square-button', N8nSquareButton);
+Vue.use(N8nTags);
+Vue.use(N8nTag);
 Vue.component('n8n-text', N8nText);
 Vue.use(N8nTooltip);
 Vue.use(N8nOption);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index dd979ce8e9339..35173a32c94ae 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -828,6 +828,21 @@
 		},
 		"notBeingUsed": "Not being used"
 	},
+	"template": {
+		"buttons": {
+			"goBackButton": "Go back",
+			"useThisWorkflowButton": "Use this workflow"
+		},
+		"details": {
+			"appsInTheWorkflow": "Apps in this workflow",
+			"by": "by",
+			"categories": "Categories",
+			"created": "Created",
+			"details": "Details",
+			"times": "times",
+			"viewed": "Viewed"
+		}
+	},
 	"textEdit": {
 		"edit": "Edit"
 	},
@@ -1039,4 +1054,4 @@
 		"timeoutWorkflow": "Timeout Workflow",
 		"timezone": "Timezone"
 	}
-}
\ No newline at end of file
+}
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index a1f5e30e50dfe..b7cf7ba111312 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -3,6 +3,7 @@ import Router from 'vue-router';
 import MainHeader from '@/components/MainHeader/MainHeader.vue';
 import MainSidebar from '@/components/MainSidebar.vue';
 import NodeView from '@/views/NodeView.vue';
+import TemplateView from '@/views/TemplateView.vue';
 
 Vue.use(Router);
 
@@ -20,6 +21,14 @@ export default new Router({
 				sidebar: MainSidebar,
 			},
 		},
+		{
+			path: '/template/:id',
+			name: 'TemplateView',
+			components: {
+				default: TemplateView,
+				sidebar: MainSidebar,
+			},
+		},
 		{
 			path: '/workflow',
 			name: 'NodeViewNew',
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 987ffa87699f8..a4eadc887f117 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -38,6 +38,7 @@ import settings from './modules/settings';
 import ui from './modules/ui';
 import workflows from './modules/workflows';
 import versions from './modules/versions';
+import templates from './modules/templates';
 
 Vue.use(Vuex);
 
@@ -96,6 +97,7 @@ const modules = {
 	credentials,
 	tags,
 	settings,
+	templates,
 	workflows,
 	versions,
 	ui,
diff --git a/packages/editor-ui/src/views/TemplateView.vue b/packages/editor-ui/src/views/TemplateView.vue
new file mode 100644
index 0000000000000..629eca2e6819b
--- /dev/null
+++ b/packages/editor-ui/src/views/TemplateView.vue
@@ -0,0 +1,184 @@
+<template>
+<div :class="$style.template">
+	<div :class="[$style.container, !isMenuCollapsed ? $style.expanded : '']">
+		<div :class="$style.header">
+			<go-back-button />
+			<div :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading v-if="!loading" tag="h1" size="2xlarge">{{ template.name }}</n8n-heading>
+					<n8n-loading :animated="true" :loading="loading" :rows="2" variant="h1" />
+				</div>
+				<div :class="$style.button">
+					<n8n-button
+						v-if="!loading"
+						:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
+						size="large"
+						@click="goToWorkflowsTemplate(template.id)"
+					/>
+					<n8n-loading :animated="true" :loading="loading" :rows="1" variant="button" />
+				</div>
+			</div>
+		</div>
+		<div>
+			<div :class="$style.image">
+				<n8n-image :images="template.mainImage" />
+			</div>
+			<div :class="$style.content">
+				<div :class="$style.markdown">
+					<n8n-markdown
+						:content="template.description"
+						:images="template.image"
+						:loading="loading"
+					/>
+				</div>
+				<div :class="$style.details">
+					<template-details :loading="loading" :template="template" />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import GoBackButton from '../components/GoBackButton.vue';
+import TemplateDetails from '../components/TemplateDetails/TemplateDetails.vue';
+
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import {
+	IN8nTemplate,
+} from '../Interface';
+
+import mixins from 'vue-typed-mixins';
+
+export default mixins(workflowHelpers).extend({
+	name: 'TemplateView',
+	components: {
+		GoBackButton,
+		TemplateDetails,
+	},
+	computed: {
+		isMenuCollapsed() {
+			return this.$store.getters['ui/sidebarMenuCollapsed'];
+		},
+		template() {
+			let template = {} as IN8nTemplate;
+			const templates = this.$store.getters['templates/getTemplates'];
+			templates.forEach((element : IN8nTemplate) => {
+				if (element.id === this.$route.params.id) {
+					template = element;
+				}
+			});
+
+			return template;
+		},
+	},
+	data() {
+		return {
+			loading: false,
+		};
+	},
+	methods: {
+		goToWorkflowsTemplate(templateId: string) {
+			this.$router.push(`/workflows/templates/${templateId}`);
+		},
+	},
+	async mounted() {
+		this.loading = true;
+		const templateId = this.$route.params.id;
+		const response = await this.$store.dispatch('templates/getTemplateById', templateId);
+		if (!response) {
+			this.$showMessage({
+				title: 'Error',
+				message: 'Could not find workflow template',
+				type: 'error',
+			});
+			setTimeout(() => {
+				this.$router.go(-1);
+			}, 2000);
+		}
+		this.loading = false;
+	},
+});
+</script>
+
+<style lang="scss" module>
+.template {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	background-color: var(--color-background-light);
+}
+
+.container {
+	width: 100%;
+	max-width: 1024px;
+	margin: 0 var(--spacing-3xl) 0 129px;
+	padding: var(--spacing-3xl) 0 var(--spacing-3xl);
+
+	@media (max-width: $--breakpoint-md) {
+		width: 900px;
+		margin: 0 var(--spacing-2xl) 0 113px;
+		padding: var(--spacing-2xl) 0 var(--spacing-2xl);
+	}
+}
+
+.expanded {
+	margin-left: 248px;
+
+	@media (max-width: $--breakpoint-2xs) {
+		margin-left: 113px;
+	}
+}
+
+.header {
+	padding: 0px 0px var(--spacing-2xl);
+	display: flex;
+	flex-direction: column;
+}
+
+.wrapper {
+	padding: var(--spacing-s) 0 0;
+	display: flex;
+	justify-content: space-between;
+}
+
+.title {
+	width: 75%;
+}
+
+.button {
+	display: block;
+}
+
+.image {
+	width: 100%;
+
+	img {
+		width: 100%;
+	}
+}
+
+.content {
+	padding: var(--spacing-2xl) 0;
+	display: flex;
+	justify-content: space-between;
+}
+
+.markdown {
+	width: 100%;
+	padding-right: var(--spacing-2xl);
+}
+
+.spacer {
+	margin: 56px;
+}
+
+.details {
+	width: 180px;
+
+	@media (max-width: $--breakpoint-xs) {
+		width: auto;
+	}
+}
+</style>