diff --git a/frappe/public/js/frappe/views/desktop/desktop.js b/frappe/public/js/frappe/views/desktop/desktop.js
index 747bd56d26..3c1f5b4c18 100644
--- a/frappe/public/js/frappe/views/desktop/desktop.js
+++ b/frappe/public/js/frappe/views/desktop/desktop.js
@@ -200,7 +200,7 @@ class DesktopPage {
 		}
 
 		this.allow_customization && this.make_customization_link();
-		this.make_onboarding();
+		this.data.onboarding.items.length && this.make_onboarding();
 		this.make_charts().then(() => {
 			this.make_shortcuts();
 			this.make_cards();
@@ -230,6 +230,7 @@ class DesktopPage {
 		// It may be possible the chart area is hidden since it has no widgets
 		// So the margin-top: -25px would be applied to the shortcut group
 		// We need to remove this as the  chart group will be visible during customization
+		$('.widget.onboarding-widget-box').hide();
 		$('.desk-page .widget-group:visible:first').css('margin-top', '0px');
 
 		this.customize_link.hide();
@@ -266,53 +267,20 @@ class DesktopPage {
 	}
 
 	make_onboarding() {
-		this.sections["onboarding"] = new frappe.widget.WidgetGroup({
-			title: `Getting Started`,
+		this.onboarding_widget = frappe.widget.make_widget({
+			label: this.data.onboarding.label || __(`Let's Get Started`),
+			subtitle: this.data.onboarding.subtitle,
+			steps: this.data.onboarding.items,
+			widget_type: 'onboarding',
 			container: this.page,
-			type: "onboarding",
-			columns: 1,
 			options: {
-					allow_sorting: false,
-					allow_create: false,
-					allow_delete: false,
-					allow_hiding: false,
-					allow_edit: false,
-					max_widget_count: 2,
-			},
-			widgets: [
-				{
-					label: "Unlock Great Customer Experience",
-					subtitle: "Just a few steps, and you’re good to go.",
-					steps: [
-						{
-							label: "Configure Lead Sources",
-							type: "Create",
-							completed: true
-
-						},
-						{
-							label: "Add Your Leads",
-							type: "Visit Page",
-							completed: false
-						},
-						{
-							label: "Create Your First Opportunity",
-							type: "Create",
-							completed: false
-						},
-						{
-							label: "Onboard your Sales Team",
-							type: "Create",
-							completed: false
-						},
-						{
-							label: "Assign Territories",
-							type: "Create",
-							completed: false
-						}
-					]
-				}
-			]
+				allow_sorting: false,
+				allow_create: false,
+				allow_delete: false,
+				allow_hiding: false,
+				allow_edit: false,
+				max_widget_count: 2,
+			}
 		});
 	}
 
diff --git a/frappe/public/js/frappe/widgets/onboarding_widget.js b/frappe/public/js/frappe/widgets/onboarding_widget.js
index bebbaf7ad8..375e622ae9 100644
--- a/frappe/public/js/frappe/widgets/onboarding_widget.js
+++ b/frappe/public/js/frappe/widgets/onboarding_widget.js
@@ -13,7 +13,7 @@ export default class OnboardingWidget extends Widget {
 
 	add_step(step) {
 		let $step = $(`<div class="onboarding-step">
-				<i class="fa fa-check-circle ${step.completed ? 'complete' : 'incomplete'}" aria-hidden="true"></i>${step.label}
+				<i class="fa fa-check-circle ${step.is_complete ? 'complete' : 'incomplete'}" aria-hidden="true"></i>${step.label}
 			</div>`)
 
 		$step.appendTo(this.body)
@@ -28,6 +28,15 @@ export default class OnboardingWidget extends Widget {
 	set_title() {
 		super.set_title();
 		let subtitle = $(`<div class="widget-subtitle">${this.subtitle}</div>`)
-		subtitle.appendTo(this.head);
+		subtitle.appendTo(this.title_field);
+	}
+
+	set_actions() {
+		this.action_area.empty();
+		const dismiss = $(`<div class="small" style="cursor:pointer;">Dismiss</div>`);
+		dismiss.on('click', () => {
+			this.delete();
+		})
+		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 2230c59ac9..349df6aa80 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -294,8 +294,11 @@
 	}
 
 	&.onboarding-widget-box {
+		margin-bottom: 50px;
+		margin-top: 10px;
+
 		.widget-head {
-			display: block;
+			display: flex;
 
 			.widget-title {
 				font-size: 20px;
@@ -306,6 +309,12 @@
 				margin-top: 5px;
 				color: @text-muted;
 			}
+
+			.widget-control {
+				align-self: flex-start;
+				margin-top: -5px;
+				color: @text-muted;
+			}
 		}
 
 		.widget-body {