diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss
index 0bbfea58d3..e517b44ebf 100644
--- a/frappe/public/scss/desktop.scss
+++ b/frappe/public/scss/desktop.scss
@@ -136,8 +136,7 @@ $panel-bg: $gray-50;
 	height: 100%;
 
 	&.widget-shadow {
-		box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08);
-
+		box-shadow: $card-box-shadow;
 		&:hover {
 			box-shadow: 0px 2px 8px rgba(17, 43, 66, 0.1), 0px 3px 12px rgba(17, 43, 66, 0.08);
 		}
@@ -182,16 +181,17 @@ $panel-bg: $gray-50;
 				cursor: -webkit-grabbing;
 
 				&:active {
-				    cursor: grabbing;
-				    cursor: -moz-grabbing;
-				    cursor: -webkit-grabbing;
+					cursor: grabbing;
+					cursor: -moz-grabbing;
+					cursor: -webkit-grabbing;
 				}
 			}
 
 			.dashboard-date-field {
-				.clearfix,
-				.help-box {
-					display: none;
+				height: 27px;
+
+				.clearfix, .help-box {
+					display: none !important;
 				}
 
 				.frappe-control,
@@ -220,17 +220,37 @@ $panel-bg: $gray-50;
 
 	// Overrides for each widgets
 	&.dashboard-widget-box {
-		min-height: 260px;
-		padding: 0px;
+		min-height: 240px;
+		padding: 10px 15px;
+		box-shadow: $card-box-shadow;
 
 		.chart-container {
 			margin-right: -10px;
 			margin-left: -10px;
+
+			.frappe-chart {
+				line.line-horizontal {
+					stroke: $border-color !important;
+				}
+			}
 		}
 
-		.widget-footer {
-			font-size: 85%;
+		.btn-xs {
+			padding: 4px 8px;
+		}
+
+		.widget-subtitle {
+			font-size: $font-size-sm;
 			color: $text-muted;
+			margin-top: 5px;
+		}
+
+		.widget-head {
+			padding: 10px;
+		}
+
+		.widget-control {
+			margin-top: -10px;
 		}
 
 		.chart-loading-state {
@@ -405,14 +425,14 @@ $panel-bg: $gray-50;
 
 	&.number-widget-box {
 		cursor: pointer;
-		height: 110px;
-		padding: 10px;
+		height: 115px;
+		padding: 20px;
 
 		.widget-head {
 
 			.widget-title {
-				font-weight: normal;
-				color: $text-muted;
+				font-weight: 500;
+				color: var(--grey-900);
 				font-size: var(--text-base);
 				margin-top: -5px;
 			}
@@ -421,6 +441,10 @@ $panel-bg: $gray-50;
 				right: -10px;
 				top: -10px;
 			}
+
+			.card-actions {
+				margin-top: -25px;
+			}
 		}
 
 		.widget-body {
@@ -434,14 +458,15 @@ $panel-bg: $gray-50;
 			}
 
 			.widget-content {
-				padding-top: 30px;
+				padding-top: 25px;
 				display: flex;
 				justify-content: space-between;
 
 				.number {
 					font-weight: 600;
-					font-size: 26px;
-					line-height: 1.8em;
+					font-size: 22px;
+					line-height: 2.4em;
+					color: var(--grey-800);
 				}
 
 				.number-text {
@@ -451,31 +476,46 @@ $panel-bg: $gray-50;
 				}
 
 				.card-stats {
-					padding-top: 5px;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-end;
 				}
 
-				.percentage-stat {
-					float: right;
-					clear: right;
+				.percentage-stat-area {
 					font-size: 12px;
+
+					.indicator-pill-round {
+						height: 18px;
+						width: 18px;
+
+						.icon-xs {
+							width: 8px;
+							height: 7px;
+						}
+					}
+
+					.percentage-stat {
+						margin-left: 5px;
+						vertical-align: bottom;
+						font-weight: 500;
+					}
 				}
 
 				.stat-period {
-					float: right;
-					clear: right;
+					margin-top: 5px;
 					font-size: 11px;
 				}
 
 				.green-stat {
-					color: var(--green-600);
+					color: var(--dark-green-500);
 				}
 
 				.red-stat {
-					color: var(--red-600);
+					color: var(--red-500);
 				}
 
 				.grey-stat {
-					color: $text-muted;
+					color: var(--grey-600);
 				}
 			}
 		}
diff --git a/frappe/public/scss/indicator.scss b/frappe/public/scss/indicator.scss
index 98b40d728f..12f46e7cb1 100644
--- a/frappe/public/scss/indicator.scss
+++ b/frappe/public/scss/indicator.scss
@@ -10,6 +10,19 @@
 	height: 24px;
 }
 
+.indicator-pill-round {
+	align-items: center;
+	display: inline-flex;
+	justify-content: center;
+	font-size: var(--text-sm);
+	border-radius: 50%;
+	vertical-align: middle;
+	font-weight: 500;
+	margin: auto;
+	width: 24px;
+	height: 24px;
+}
+
 .indicator-pill::before,
 .indicator-pill-right::after {
 	content:'';
@@ -27,11 +40,12 @@
 }
 
 .indicator-pill-right::after {
-	margin:0 0 0 4px;
+	margin: 0 0 0 4px;
 }
 
 .indicator-pill.green,
-.indicator-pill-right.green {
+.indicator-pill-right.green,
+.indicator-pill-round.green {
 	background: var(--dark-green-50);
 	color: var(--dark-green-500);
 	&::before, &::after {
@@ -67,7 +81,8 @@
 }
 
 .indicator-pill.grey,
-.indicator-pill-right.grey {
+.indicator-pill-right.grey,
+.indicator-pill-round.grey {
 	background: var(--grey-100);
 	color: var(--grey-600);
 	&::before, &::after {
@@ -85,7 +100,8 @@
 }
 
 .indicator-pill.red,
-.indicator-pill-right.red {
+.indicator-pill-right.red,
+.indicator-pill-round.red {
 	background: var(--red-50);
 	color: var(--red-500);
 	&::before, &::after {