diff --git a/frappe/public/js/frappe/widgets/onboarding_widget.js b/frappe/public/js/frappe/widgets/onboarding_widget.js
index 870233cb25..8ece055a4b 100644
--- a/frappe/public/js/frappe/widgets/onboarding_widget.js
+++ b/frappe/public/js/frappe/widgets/onboarding_widget.js
@@ -12,16 +12,38 @@ export default class OnboardingWidget extends Widget {
 	}
 
 	add_step(step) {
-		let $step = $(`<div class="onboarding-step">
-				<i class="fa fa-check-circle ${
-					step.is_complete ? "complete" : "incomplete"
-				}" aria-hidden="true"></i>${step.label}
+		let $step = $(`<div class="onboarding-step ${
+					step.is_complete ? 'complete' : 'incomplete'
+				}" data-step-name=${step.name}>
+				<i class="fa fa-check-circle" aria-hidden="true"></i>
+				<span>${step.title}</span>
 			</div>`);
+		if (!step.is_complete) {
+			if (step.action == "Watch Video") {
+				$step.on('click', () => {
+					frappe.help.show_video(step.video_url, step.title);
+					this.mark_complete(step.name, $step);
+				});
+			} else {
+				$step.on('click', () => {
+					frappe.ui.form.make_quick_entry(step.reference_document)
+				});
+			}
+		}
 
 		$step.appendTo(this.body);
 		return $step;
 	}
 
+	mark_complete(name, $step) {
+		frappe.call("frappe.desk.desktop.complete_onboarding_step", {
+			name: name
+		}).then(() => {
+			$step.removeClass('incomplete')
+			$step.addClass('complete')
+		})
+	}
+
 	set_body() {
 		this.widget.addClass("onboarding-widget-box");
 		if (this.is_dismissed()) {
@@ -32,14 +54,16 @@ export default class OnboardingWidget extends Widget {
 	}
 
 	is_dismissed() {
-		let dismissed = JSON.parse(localStorage.getItem("dismissed-onboarding") || '{}');
+		let dismissed = JSON.parse(
+			localStorage.getItem("dismissed-onboarding") || "{}"
+		);
 		if (Object.keys(dismissed).includes(this.label)) {
 			let last_hidden = new Date(dismissed[this.label]);
 			let today = new Date();
-			let diff = frappe.datetime.get_hour_diff(today, last_hidden)
+			let diff = frappe.datetime.get_hour_diff(today, last_hidden);
 			return diff < 24;
 		}
-		return false
+		return false;
 	}
 
 	set_title(title) {
@@ -54,7 +78,9 @@ export default class OnboardingWidget extends Widget {
 			`<div class="small" style="cursor:pointer;">Dismiss</div>`
 		);
 		dismiss.on("click", () => {
-			let dismissed = JSON.parse(localStorage.getItem("dismissed-onboarding") || '{}');
+			let dismissed = JSON.parse(
+				localStorage.getItem("dismissed-onboarding") || "{}"
+			);
 			dismissed[this.label] = frappe.datetime.now_datetime();
 
 			localStorage.setItem(
@@ -65,4 +91,4 @@ export default class OnboardingWidget extends Widget {
 		});
 		dismiss.appendTo(this.action_area);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index 349df6aa80..291653b6e6 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -319,23 +319,46 @@
 
 		.widget-body {
 			margin-top: 20px;
+			display: grid;
+			grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+			grid-template-columns: 1fr 1fr 1fr;
+			grid-auto-flow: column;
 
 			.onboarding-step {
 				margin-bottom: 8px;
 				font-size: 16px;
 				letter-spacing: 0.015em;
-			}
 
-			i {
-				padding-left: 5px;
-				padding-right: 12px;
+				i {
+					padding-left: 5px;
+					padding-right: 12px;
+				}
 
 				&.complete {
-					color: @brand-primary;
+					i {
+						color: @brand-primary;
+					}
+
+					span {
+						color: @text-color;
+					}
 				}
 
 				&.incomplete {
-					color: @text-muted;
+					i {
+						color: @text-muted;
+					}
+
+					span {
+						color: @text-muted;
+						cursor: pointer;
+					}
+
+					&:hover {
+						span {
+							color: @text-color;
+						}
+					}
 				}
 			}
 		}