diff --git a/frappe/public/js/frappe/widgets/onboarding_widget.js b/frappe/public/js/frappe/widgets/onboarding_widget.js
index 4dacec451a..e0a5705d87 100644
--- a/frappe/public/js/frappe/widgets/onboarding_widget.js
+++ b/frappe/public/js/frappe/widgets/onboarding_widget.js
@@ -8,11 +8,11 @@ export default class OnboardingWidget extends Widget {
 	}
 
 	make_body() {
-		this.body.addClass('grid')
+		this.body.addClass("grid");
 		if (this.steps.length < 5) {
-			this.body.addClass(`grid-rows-${this.steps.length}`)
+			this.body.addClass(`grid-rows-${this.steps.length}`);
 		} else if (this.steps.length >= 5) {
-			this.body.addClass('grid-rows-5')
+			this.body.addClass("grid-rows-5");
 		}
 		this.steps.forEach((step) => {
 			this.add_step(step);
@@ -20,24 +20,34 @@ export default class OnboardingWidget extends Widget {
 	}
 
 	add_step(step) {
-		let status = step.is_complete
-			? "complete"
-			: step.is_skipped
-				? "skipped"
-				: "";
-		let $step = $(`<div class="onboarding-step ${status}" data-step-name=${step.name}>
-				<i class="fa fa-check-circle" aria-hidden="true" title="${status}"></i>
+		let status = "";
+		let icon_class = "fa-circle-o";
+
+		if (step.is_skipped) {
+			status = "skipped"
+			icon_class = "fa-times-circle-o"
+		}
+
+		if (step.is_complete) {
+			status = "complete";
+			icon_class = "fa-check-circle-o";
+		}
+
+		let $step = $(`<div class="onboarding-step ${status}">
+				<i class="fa ${icon_class}" aria-hidden="true" title="${status}"></i>
 				<span>${step.title}</span>
 			</div>`);
 
 		if (!step.is_mandatory && !step.is_complete) {
 			// let skip_html = $(`<i class="fa fa-check text-extra-muted step-skip" title="Mark as Complete" aria-hidden="true"></i>`);
-			let skip_html = $(`<span class="ml-5 small text-muted step-skip">Skip</span>`);
+			let skip_html = $(
+				`<span class="ml-5 small text-muted step-skip">Skip</span>`
+			);
 			skip_html.appendTo($step);
-			skip_html.on('click', () => {
+			skip_html.on("click", () => {
 				this.skip_step(step, $step);
 				event.stopPropagation();
-			})
+			});
 		}
 
 		let action = () => {};
@@ -45,88 +55,105 @@ export default class OnboardingWidget extends Widget {
 			action = () => {
 				frappe.help.show_video(step.video_url, step.title);
 				this.mark_complete(step, $step);
-			}
-		}
-
-		else if (step.action == "Create Entry") {
+			};
+		} else if (step.action == "Create Entry") {
 			action = () => {
-				frappe.ui.form.make_quick_entry(step.reference_document, () => {
-					this.mark_complete(step, $step);
-				}, null, null, true)
-			}
-		}
-
-		else if (step.action == "View Settings") {
+				frappe.ui.form.make_quick_entry(
+					step.reference_document,
+					() => {
+						this.mark_complete(step, $step);
+					},
+					null,
+					null,
+					true
+				);
+			};
+		} else if (step.action == "View Settings") {
 			action = () => {
-				frappe.set_route("Form", step.reference_document)
-			}
-		}
-
-		else if (step.action == "View Report") {
+				frappe.set_route("Form", step.reference_document);
+			};
+		} else if (step.action == "View Report") {
 			action = () => {
 				let route = generate_route({
 					name: step.reference_report,
-					type: 'report',
-					is_query_report: ["Query Report", "Script Report"].includes(step.report_type)
+					type: "report",
+					is_query_report: ["Query Report", "Script Report"].includes(
+						step.report_type
+					),
 				});
 
 				frappe.set_route(route);
 				this.mark_complete(step, $step);
-			}
+			};
 		}
 
-		$step.on('click', action)
-
+		$step.on("click", action);
 
 		$step.appendTo(this.body);
 		return $step;
 	}
 
 	mark_complete(step, $step) {
-		frappe.call("frappe.desk.desktop.update_onboarding_step", {
-			name: step.name,
-			field: 'is_complete',
-			value: 1
-		}).then(() => {
-			step.is_complete = true;
-			$step.addClass('complete');
-		})
+		frappe
+			.call("frappe.desk.desktop.update_onboarding_step", {
+				name: step.name,
+				field: "is_complete",
+				value: 1,
+			})
+			.then(() => {
+				step.is_complete = true;
+				$step.removeClass("skipped");
+				$step.addClass("complete");
 
-		let pending = onb.steps.filter(step => {
-			return !(step.is_complete || step.is_skipped)
-		})
+				let icon = $step.find("i.fa");
+				icon.removeClass();
+				icon.addClass('fa');
+				icon.addClass('fa-check-circle-o');
 
-		if (pending.length) {
-			this.show_success()
-		}
+				let pending = this.steps.filter((step) => {
+					return !(step.is_complete || step.is_skipped);
+				});
+
+				if (pending.length == 0) {
+					this.show_success();
+				}
+			});
 	}
 
 	skip_step(step, $step) {
-		frappe.call("frappe.desk.desktop.update_onboarding_step", {
-			name: step.name,
-			field: 'is_skipped',
-			value: 1
-		}).then(() => {
-			step.is_skipped = true;
-			$step.addClass('skipped');
-		})
+		frappe
+			.call("frappe.desk.desktop.update_onboarding_step", {
+				name: step.name,
+				field: "is_skipped",
+				value: 1,
+			})
+			.then(() => {
+				step.is_skipped = true;
+				$step.removeClass("complete");
+				$step.addClass("skipped");
 
-		let pending = onb.steps.filter(step => {
-			return !(step.is_complete || step.is_skipped)
-		})
+				let icon = $step.find("i.fa");
+				icon.removeClass();
+				icon.addClass('fa');
+				icon.addClass('fa-times-circle-o');
 
-		if (pending.length) {
-			this.show_success()
-		}
+				let pending = this.steps.filter((step) => {
+					return !(step.is_complete || step.is_skipped);
+				});
+
+				if (pending.length == 0) {
+					this.show_success();
+				}
+			});
 	}
 
 	show_success() {
 		let height = this.widget.height();
 		this.widget.empty();
 		this.widget.height(height);
-		this.widget.addClass('flex');
-		this.widget.addClass('align-center');
-		this.widget.addClass('justify-center');
+		this.widget.addClass("flex");
+		this.widget.addClass("align-center");
+		this.widget.addClass("justify-center");
 
 		let success = $(`<div class="success">
 					<h1>Hooray 🎉</h1>
@@ -134,8 +161,7 @@ export default class OnboardingWidget extends Widget {
 			</div>
 		`);
 		success.appendTo(this.widget);
-
-	};
+	}
 
 	set_body() {
 		this.widget.addClass("onboarding-widget-box");
@@ -162,7 +188,9 @@ export default class OnboardingWidget extends Widget {
 	set_title(title) {
 		super.set_title(title);
 		if (this.subtitle) {
-			let subtitle = $(`<div class="widget-subtitle">${this.subtitle}</div>`);
+			let subtitle = $(
+				`<div class="widget-subtitle">${this.subtitle}</div>`
+			);
 			subtitle.appendTo(this.title_field);
 		}
 	}
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index 1ddee72022..ffd993b28a 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -358,7 +358,7 @@
 				i {
 					color: @text-muted;
 					padding-left: 5px;
-					padding-right: 12px;
+					padding-right: 2px;
 				}
 
 				.step-skip {
@@ -386,7 +386,7 @@
 
 				&.skipped {
 					i {
-						color: @blue-light;
+						color: @text-muted;
 					}
 
 					span {
@@ -646,8 +646,8 @@
 @-webkit-keyframes zoomIn {
   from {
     opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
+    -webkit-transform: scale3d(0.7, 0.7, 0.7);
+    transform: scale3d(0.7, 0.7, 0.7);
   }
 
   50% {
@@ -658,8 +658,8 @@
 @keyframes zoomIn {
   from {
     opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
+    -webkit-transform: scale3d(0.7, 0.7, 0.7);
+    transform: scale3d(0.7, 0.7, 0.7);
   }
 
   50% {