diff --git a/frappe/public/js/frappe/form/footer/base_timeline.js b/frappe/public/js/frappe/form/footer/base_timeline.js
index 2610dc40cb..0e983cb66b 100644
--- a/frappe/public/js/frappe/form/footer/base_timeline.js
+++ b/frappe/public/js/frappe/form/footer/base_timeline.js
@@ -40,22 +40,36 @@ class BaseTimeline {
 		this.timeline_items_wrapper.empty();
 		this.timeline_items = [];
 		this.doc_info = this.frm && this.frm.get_docinfo() || {};
-		this.prepare_timeline_contents();
-
-		this.timeline_items.sort((item1, item2) => new Date(item1.creation) - new Date(item2.creation));
-		this.timeline_items.forEach(this.add_timeline_item.bind(this));
+		let response = this.prepare_timeline_contents();
+		if (response instanceof Promise) {
+			response.then(() => {
+				this.timeline_items.sort((item1, item2) => new Date(item1.creation) - new Date(item2.creation));
+				this.timeline_items.forEach(this.add_timeline_item.bind(this));
+			});
+		} else {
+			this.timeline_items.sort((item1, item2) => new Date(item1.creation) - new Date(item2.creation));
+			this.timeline_items.forEach(this.add_timeline_item.bind(this));
+		}
 	}
 
 	prepare_timeline_contents() {
 		//
 	}
 
-	add_timeline_item(item) {
+	add_timeline_item(item, append_at_the_end=false) {
 		let timeline_item = this.get_timeline_item(item);
-		this.timeline_items_wrapper.prepend(timeline_item);
+		if (append_at_the_end) {
+			this.timeline_items_wrapper.append(timeline_item);
+		} else {
+			this.timeline_items_wrapper.prepend(timeline_item);
+		}
 		return timeline_item;
 	}
 
+	add_timeline_items(items, append_at_the_end=false) {
+		items.forEach((item) => this.add_timeline_item(item, append_at_the_end));
+	}
+
 	get_timeline_item(item) {
 		// item can have content*, creation*,
 		// timeline_badge, icon, icon_size,
diff --git a/frappe/public/js/frappe/form/toolbar.js b/frappe/public/js/frappe/form/toolbar.js
index 6c5bef380b..28cc9bb28b 100644
--- a/frappe/public/js/frappe/form/toolbar.js
+++ b/frappe/public/js/frappe/form/toolbar.js
@@ -211,10 +211,10 @@ frappe.ui.form.Toolbar = Class.extend({
 		if (!this.frm.is_new() && !issingle) {
 			this.page.add_action_icon("left", function() {
 				me.frm.navigate_records(1);
-			}, 'prev-doc');
+			}, 'prev-doc', __("Previous Document"));
 			this.page.add_action_icon("right", function() {
 				me.frm.navigate_records(0);
-			}, 'next-doc');
+			}, 'next-doc', __("Next Document"));
 		}
 
 		// Print
@@ -227,7 +227,7 @@ frappe.ui.form.Toolbar = Class.extend({
 				}, true);
 				this.print_icon = this.page.add_action_icon("printer", function() {
 					me.frm.print_doc();
-				});
+				},'', __("Print"));
 			}
 		}
 
diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js
index 010f6b3f9b..afdb40118a 100644
--- a/frappe/public/js/frappe/ui/notifications/notifications.js
+++ b/frappe/public/js/frappe/ui/notifications/notifications.js
@@ -44,13 +44,17 @@ frappe.ui.Notifications = class Notifications {
 				e.stopImmediatePropagation();
 				this.dropdown.dropdown('hide');
 				frappe.set_route('Form', 'Notification Settings', frappe.session.user);
-			}).appendTo(this.header_actions);
+			}).appendTo(this.header_actions)
+			.attr('title', __("Notification Settings"))
+			.tooltip();
 
 		$(`<span class="mark-all-read pull-right" data-action="mark_all_as_read">
 			${frappe.utils.icon('mark-as-read')}
 		</span>`)
 			.on('click', (e) => this.mark_all_as_read(e))
-			.appendTo(this.header_actions);
+			.appendTo(this.header_actions)
+			.attr('title', __("Mark all as read"))
+			.tooltip();
 
 		this.categories = [
 			{
@@ -193,6 +197,7 @@ class BaseNotificaitonsView {
 class NotificationsView extends BaseNotificaitonsView {
 	make() {
 		this.notifications_icon = this.parent.find('.notifications-icon');
+		this.notifications_icon.attr("title", __('Notifications')).tooltip();
 
 		this.setup_notification_listeners();
 		this.get_notifications_list(this.max_length).then(list => {
@@ -277,23 +282,23 @@ class NotificationsView extends BaseNotificaitonsView {
 					${user_avatar}
 					${message_html}
 				</div>
-				<div class="mark-as-read">
+				<div class="mark-as-read" title="${__("Mark as Read")}">
 				</div>
 			</a>`);
 
-		item_html.find('.mark-as-read').on('click', (e) => {
-			e.preventDefault();
-			e.stopImmediatePropagation();
-			if (!field.read) {
+		if (!field.read) {
+			let mark_btn = item_html.find(".mark-as-read")
+			mark_btn.tooltip();
+			mark_btn.on('click', (e) => {
+				e.preventDefault();
+				e.stopImmediatePropagation();
 				this.mark_as_read(field.name, item_html);
-			}
-		});
-
-		item_html.on('click', (e) => {
-			if (!field.read) {
+			});
+			
+			item_html.on('click', (e) => {
 				this.mark_as_read(field.name, item_html);
-			}
-		});
+			});
+		}
 
 		return item_html;
 	}
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index e5cc934292..d3184ecca2 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -144,6 +144,7 @@ frappe.ui.Page = Class.extend({
 
 		// keyboard shortcuts
 		let menu_btn = this.menu_btn_group.find('button');
+		menu_btn.attr("title", __("Menu")).tooltip();
 		frappe.ui.keys
 			.get_shortcut_group(this.page_actions[0])
 			.add(menu_btn, menu_btn.find('.menu-btn-group-label'));
@@ -157,6 +158,7 @@ frappe.ui.Page = Class.extend({
 	setup_sidebar_toggle() {
 		let sidebar_toggle = $('.page-head').find('.sidebar-toggle-btn');
 		let sidebar_wrapper = this.wrapper.find('.layout-side-section');
+		sidebar_toggle.attr("title", __("Toggle Sidebar")).tooltip();
 		if (sidebar_wrapper.length) {
 			sidebar_toggle.click(() => sidebar_wrapper.toggle());
 		} else {
@@ -168,12 +170,18 @@ frappe.ui.Page = Class.extend({
 		this.clear_indicator().removeClass("hide").html(`<span>${label}</span>`).addClass(color);
 	},
 
-	add_action_icon: function(icon, click, css_class='') {
-		return $(`
+	add_action_icon: function(icon, click, css_class='', tooltip_label) {
+		const button = $(`
 			<button class="text-muted btn btn-default ${css_class} icon-btn">
 				${frappe.utils.icon(icon)}
 			</button>
-		`).appendTo(this.icon_group.removeClass("hide")).click(click);
+		`)
+
+		button.appendTo(this.icon_group.removeClass("hide"));
+		button.click(click);
+		button.attr("title", __(tooltip_label || frappe.unscrub(icon))).tooltip();
+
+		return button
 	},
 
 	clear_indicator: function() {
diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js
index 9043ffecac..36ce8bfa61 100644
--- a/frappe/public/js/frappe/views/reports/query_report.js
+++ b/frappe/public/js/frappe/views/reports/query_report.js
@@ -648,7 +648,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 
 	render_summary(data) {
 		data.forEach((summary) => {
-			frappe.widget.utils.build_summary_item(summary).appendTo(this.$summary);
+			frappe.utils.build_summary_item(summary).appendTo(this.$summary);
 		})
 
 		this.$summary.show();
diff --git a/frappe/public/js/frappe/widgets/chart_widget.js b/frappe/public/js/frappe/widgets/chart_widget.js
index 04477197ce..f9a60916d9 100644
--- a/frappe/public/js/frappe/widgets/chart_widget.js
+++ b/frappe/public/js/frappe/widgets/chart_widget.js
@@ -83,7 +83,7 @@ export default class ChartWidget extends Widget {
 		}
 
 		this.summary.forEach(summary => {
-			frappe.widget.utils.build_summary_item(summary).appendTo(this.$summary);
+			frappe.utils.build_summary_item(summary).appendTo(this.$summary);
 		});
 		this.summary.length && this.$summary.show();
 	}
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index 209d03c515..42b1c09d1d 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -165,14 +165,18 @@
 	--popover-bg: white;
 
 	// Background Text Color Pairs
-	--bg-blue: var(--blue-50);
+	--bg-blue: var(--blue-100);
+	--bg-light-blue: var(--blue-50);
 	--bg-green: var(--dark-green-50);
 	--bg-yellow: var(--yellow-50);
 	--bg-orange: var(--orange-50);
 	--bg-red: var(--red-50);
 	--bg-gray: var(--gray-200);
 	--bg-light-gray: var(--gray-100);
+	--bg-purple: var(--purple-100);
 
+	--text-on-blue: var(--blue-600);
+	--text-on-light-blue: var(--blue-500);
 	--text-on-blue: var(--blue-600);
 	--text-on-green: var(--dark-green-500);
 	--text-on-yellow: var(--yellow-500);
@@ -180,6 +184,7 @@
 	--text-on-red: var(--red-500);
 	--text-on-gray: var(--gray-600);
 	--text-on-light-gray: var(--gray-800);
+	--text-on-purple: var(--purple-500);
 
 	// Other Colors
 	--sidebar-select-color: var(--gray-200);
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 792c569521..cf8ae80982 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -34,21 +34,25 @@
 	--popover-bg: var(--bg-color);
 
 	// Background Text Color Pairs
-	--bg-blue: var(--blue-500);
+	--bg-blue: var(--blue-600);
+	--bg-light-blue: var(--blue-400);
 	--bg-green: var(--dark-green-500);
 	--bg-yellow: var(--yellow-500);
 	--bg-orange: var(--orange-500);
 	--bg-red: var(--red-500);
 	--bg-gray: var(--gray-600);
 	--bg-light-gray: var(--gray-700);
+	--bg-purple: var(--purple-600);
 
 	--text-on-blue: var(--blue-50);
+	--text-on-light-blue: var(--blue-100);
 	--text-on-green: var(--dark-green-50);
 	--text-on-yellow: var(--yellow-50);
 	--text-on-orange: var(--orange-100);
 	--text-on-red: var(--red-50);
 	--text-on-gray: var(--gray-300);
 	--text-on-light-gray: var(--gray-100);
+	--text-on-purple: var(--purple-100);
 
 	--sidebar-select-color: var(--gray-800);
 
diff --git a/frappe/public/scss/desk/indicator.scss b/frappe/public/scss/desk/indicator.scss
index e4fd2f8879..89523a9f09 100644
--- a/frappe/public/scss/desk/indicator.scss
+++ b/frappe/public/scss/desk/indicator.scss
@@ -117,7 +117,7 @@
 .indicator-pill.gray,
 .indicator-pill-right.gray,
 .indicator-pill-round.gray {
-	@include indicator-pill-color('gray');
+	@include indicator-pill-color('light-gray');
 }
 
 .indicator.red {
@@ -130,6 +130,24 @@
 	@include indicator-pill-color('red');
 }
 
+.indicator-pill.darkgrey,
+.indicator-pill-right.darkgrey,
+.indicator-pill-round.darkgrey {
+	@include indicator-pill-color('gray');
+}
+
+.indicator-pill.purple,
+.indicator-pill-right.purple,
+.indicator-pill-round.purple {
+	@include indicator-pill-color('purple');
+}
+
+.indicator-pill.lightblue,
+.indicator-pill-right.lightblue,
+.indicator-pill-round.lightblue {
+	@include indicator-pill-color('light-blue');
+}
+
 .indicator.blink {
 	animation: blink 1s linear infinite;
 }
diff --git a/frappe/public/scss/desk/kanban.scss b/frappe/public/scss/desk/kanban.scss
index 525fd24257..696270909a 100644
--- a/frappe/public/scss/desk/kanban.scss
+++ b/frappe/public/scss/desk/kanban.scss
@@ -1,5 +1,5 @@
 :root {
-	--kanban-column-bg: var(--gray-200);
+	--kanban-column-bg: var(--gray-100);
 	--kanban-card-bg: var(--card-bg);
 	--kanban-card-hover-bg: var(--card-bg);
 	--kanban-new-card-bg: var(--gray-200);