diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
index 337ad376ea..d5ab13c969 100644
--- a/frappe/public/js/frappe/dom.js
+++ b/frappe/public/js/frappe/dom.js
@@ -291,7 +291,7 @@ frappe.scrub = function(text, spacer='_') {
 
 frappe.get_data_pill = (label, target_id=null, remove_action=null) => {
 	let data_pill_wrapper = $(`
-		<div class="data-pill">
+		<div class="data-pill btn">
 			<span class="pill-label ellipsis">${label}</span>
 		</div>
 	`);
diff --git a/frappe/public/js/frappe/form/form.js b/frappe/public/js/frappe/form/form.js
index f7d1b3e873..9200a14711 100644
--- a/frappe/public/js/frappe/form/form.js
+++ b/frappe/public/js/frappe/form/form.js
@@ -159,7 +159,8 @@ frappe.ui.form.Form = class FrappeForm {
 			parent: this.body,
 			doctype: this.doctype,
 			frm: this,
-			with_dashboard: true
+			with_dashboard: true,
+			card_layout: true,
 		});
 		this.layout.make();
 
diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js
index d4d0a6a551..1829ec66d2 100644
--- a/frappe/public/js/frappe/form/layout.js
+++ b/frappe/public/js/frappe/form/layout.js
@@ -554,7 +554,6 @@ frappe.ui.form.Layout = Class.extend({
 
 frappe.ui.form.Section = Class.extend({
 	init: function(layout, df) {
-		var me = this;
 		this.layout = layout;
 		this.df = df || {};
 		this.fields_list = [];
@@ -578,7 +577,7 @@ frappe.ui.form.Section = Class.extend({
 			this.layout.page = $('<div class="form-page"></div>').appendTo(this.layout.wrapper);
 		}
 
-		this.wrapper = $('<div class="row form-section">')
+		this.wrapper = $(`<div class="row form-section ${this.layout.card_layout ? "frappe-card" : "" }">`)
 			.appendTo(this.layout.page);
 		this.layout.sections.push(this);
 
diff --git a/frappe/public/js/frappe/form/sidebar/review.js b/frappe/public/js/frappe/form/sidebar/review.js
index 21eb217e97..dd991778d3 100644
--- a/frappe/public/js/frappe/form/sidebar/review.js
+++ b/frappe/public/js/frappe/form/sidebar/review.js
@@ -72,7 +72,6 @@ frappe.ui.form.Review = class Review {
 	}
 	show_review_dialog() {
 		const user_options = this.get_involved_users();
-		const doc_owner = this.frm.doc.owner;
 		const review_dialog = new frappe.ui.Dialog({
 			'title': __('Add Review'),
 			'fields': [{
@@ -140,12 +139,11 @@ frappe.ui.form.Review = class Review {
 		const review_logs = this.frm.get_docinfo().energy_point_logs
 			.filter(log => ['Appreciation', 'Criticism'].includes(log.type));
 
-		this.parent.find('.review-row').remove();
+		this.parent.find('.review').remove();
 		review_logs.forEach(log => {
 			let review_pill = $(`
-				<li class="review-row">
-					${frappe.avatar(log.owner)}
-					${log.points > 0 ? '+': ''}${log.points} ${ __('Points')}
+				<li class="review ${log.points < 0 ? 'criticism': 'appreciation'}">
+					${log.points > 0 ? '+': ''}${log.points}
 				</li>
 			`);
 			review_pill.insertBefore(this.add_review_button_wrapper);
diff --git a/frappe/public/js/frappe/ui/messages.js b/frappe/public/js/frappe/ui/messages.js
index cba15377db..9013cc79c9 100644
--- a/frappe/public/js/frappe/ui/messages.js
+++ b/frappe/public/js/frappe/ui/messages.js
@@ -366,7 +366,7 @@ frappe.show_alert = function(message, seconds=7, actions={}) {
 			message: message
 		};
 	}
-	
+
 	if (!$('#dialog-container').length) {
 		$('<div id="dialog-container"><div id="alert-container"></div></div>').appendTo('body');
 	}
diff --git a/frappe/public/less/controls.less b/frappe/public/less/controls.less
index 53f0aba43c..d16811843d 100644
--- a/frappe/public/less/controls.less
+++ b/frappe/public/less/controls.less
@@ -66,28 +66,6 @@
 	margin-bottom: 5px;
 }
 
-/* table multiselect */
-.table-multiselect {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	height: auto;
-	padding: 10px;
-	padding-bottom: 5px;
-}
-
-.table-multiselect.form-control input {
-	display: inline-block;
-	outline: none;
-	border: none;
-	padding: 0;
-	font-size: @text-medium;
-}
-
-.table-multiselect .awesomplete {
-	display: inline;
-}
-
 .tb-selected-value {
 	display: inline-block;
 	margin-right: 5px;
diff --git a/frappe/public/scss/controls.scss b/frappe/public/scss/controls.scss
new file mode 100644
index 0000000000..9a05c2f34b
--- /dev/null
+++ b/frappe/public/scss/controls.scss
@@ -0,0 +1,22 @@
+/* table multiselect */
+.table-multiselect {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	height: auto;
+	padding: 10px;
+	padding-bottom: 5px;
+}
+
+.table-multiselect.form-control input {
+	display: inline-block;
+	outline: none;
+	border: none;
+	padding: 0;
+	font-size: var(--text-xs);
+	background-color: var(--control-bg);
+}
+
+.table-multiselect .awesomplete {
+	display: inline;
+}
\ No newline at end of file
diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss
index 8a8a6acc81..d19e6d5dea 100644
--- a/frappe/public/scss/desktop.scss
+++ b/frappe/public/scss/desktop.scss
@@ -1,69 +1,58 @@
-$disabled-background: var(--gray-100);
-$panel-bg: $gray-50;
+html, body {
+	background-color: var(--bg-color);
+}
 
 .desk-sidebar {
 	.list-sidebar-label {
 		margin-bottom: 1rem;
 	}
+
 	.desk-sidebar-item {
+		@include flex(flex, null, center, null);
 		display: flex;
 		align-items: center;
 		font-size: var(--text-base);
 		padding: 8px 12px;
-		margin-bottom: 1px;
-		border-radius: 4px;
+		margin-bottom: 2px;
+		border-radius: var(--border-radius-md);
 		cursor: pointer;
-		text-rendering: optimizelegibility;
 
 		&:focus {
-			background-color: $panel-bg;
+			background-color: var(--sidebar-select-color);
 			outline: 0;
 		}
 
-		&:first-child {
-			margin-top: 100px;
-		}
-
 		&:hover {
-			background-color: $panel-bg;
+			background-color: var(--sidebar-select-color);
 		}
 
 		&.selected {
-			background-color: $panel-bg;
+			background-color: var(--sidebar-select-color);
 		}
 
 		a {
-			color: $gray-800;
+			color: var(--text-color);
 			text-decoration: none;
 		}
 
 		svg {
-			margin-right: 0.875rem;
+			margin-right: var(--margin-sm);
 		}
 	}
 }
 
 .desk-page {
-	padding: 15px;
-}
-
-.frappe-rtl {
-	.desk-body {
-		padding-left: 0px;
-		padding-right: calc(20rem + 15px);
-	}
+	padding: var(--padding-md);
 }
 
 .widget-group {
-	margin-bottom: 40px;
+	margin-bottom: var(--margin-2xl);
 
 	.widget-group-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
+		@include flex(flex, space-between, center, null);
 
 		.widget-group-title {
-			color: var(--gray-900);
+			color: var(--heading-color);
 			font-weight: 600;
 			font-size: var(--text-lg);
 			margin-bottom: 1.2rem;
@@ -72,7 +61,7 @@ $panel-bg: $gray-50;
 
 	.legend {
 		display: flex;
-		padding: 15px;
+		padding: var(--padding-md);
 
 		.legend-item {
 			margin-right: 20px;
@@ -112,8 +101,7 @@ $panel-bg: $gray-50;
 
 	@media (max-width: 768px) {
 		.legend {
-			display: flex;
-			flex-direction: column;
+			@include flex(flex, null, null, column);
 
 			.legend-item {
 				margin-right: 20px;
@@ -135,38 +123,34 @@ $panel-bg: $gray-50;
 }
 
 .widget {
-	display: flex;
-	flex-direction: column;
+	@include flex(flex, null, null, column);
 	min-height: 1px;
 	padding: 15px;
 	border-radius: var(--border-radius-md);
 	height: 100%;
-	box-shadow: var(--card-shadow);
-	background-color: white;
+	box-shadow: var(--shadow-sm);
+	background-color: var(--card-bg);
 
 	&.widget-shadow {
 		&:hover {
-			box-shadow: 0px 2px 8px rgba(17, 43, 66, 0.1), 0px 3px 12px rgba(17, 43, 66, 0.08);
+			box-shadow: var(--shadow-md);
 		}
 	}
 
 	&.border {
-		border: 1px solid $border-color;
+		border: 1px solid var(--border-color);
 	}
 
 	.widget-head {
-		display: flex;
-		justify-content: space-between;
+		@include flex(flex, space-between, center, null);
 
 		.widget-title {
-			display: flex;
-			align-self: center;
-			align-items: center;
+			@include flex(flex, null, center, null);
 			font-size: var(--text-lg);
 			font-family: inherit;
 			font-weight: 500;
 			line-height: 1.3em;
-			color: var(--gray-900);
+			color: var(--heading-color);
 
 			svg {
 				margin-right: 6px;
@@ -174,9 +158,7 @@ $panel-bg: $gray-50;
 			}
 		}
 		.widget-control {
-			align-self: center;
-			display: flex;
-			flex-direction: row-reverse;
+			@include flex(flex, null, center, row-reverse);
 
 			// Any immidiate child
 			>* {
@@ -212,18 +194,17 @@ $panel-bg: $gray-50;
 	}
 
 	&.sortable-ghost {
-		background-color: $disabled-background;
-		border-color: $disabled-background
+		background-color: var(--gray-100);
+		border-color: var(--gray-100)
 	}
 
 	&.new-widget {
+		@include flex(flex, center, center, null);
 		min-height: 65px;
-		background-color: $disabled-background;
-		color: $text-muted;
+		box-shadow: none;
+		background-color: var(--gray-100);
+		color: var(--text-muted);
 		border: 1px dashed var(--gray-300);
-		display: flex;
-		align-content: center;
-		justify-content: center;
 		cursor: pointer;
 	}
 
@@ -239,7 +220,7 @@ $panel-bg: $gray-50;
 
 			.frappe-chart {
 				line.line-horizontal {
-					stroke: $border-color !important;
+					stroke: var(--border-color) !important;
 				}
 			}
 		}
@@ -286,7 +267,7 @@ $panel-bg: $gray-50;
 
 			.widget-subtitle {
 				margin-top: 5px;
-				color: $text-muted;
+				color: var(--text-muted);
 				font-size: 14px;
 				font-weight: 400;
 			}
@@ -294,7 +275,7 @@ $panel-bg: $gray-50;
 			.widget-control {
 				align-self: flex-start;
 				margin-top: -5px;
-				color: $text-muted;
+				color: var(--text-muted);
 			}
 		}
 
@@ -306,7 +287,7 @@ $panel-bg: $gray-50;
 				letter-spacing: 0.015em;
 
 				i {
-					color: $text-muted;
+					color: var(--text-muted);
 					padding-left: 5px;
 					padding-right: 2px;
 				}
@@ -319,7 +300,7 @@ $panel-bg: $gray-50;
 				}
 
 				span {
-					color: $text-muted;
+					color: var(--text-muted);
 					cursor: pointer;
 				}
 
@@ -335,16 +316,16 @@ $panel-bg: $gray-50;
 
 				&.skipped {
 					i {
-						color: $text-muted;
+						color: var(--text-muted);
 					}
 
 					span {
-						color: $text-muted;
+						color: var(--text-muted);
 					}
 
 					&:hover {
 						span {
-							color: $text-muted;
+							color: var(--text-muted);
 						}
 
 						.step-skip {
@@ -370,7 +351,7 @@ $panel-bg: $gray-50;
 		cursor: pointer;
 
 		.widget-head {
-			margin-top: 5px;
+			margin-top: var(--margin-xs);
 			margin-bottom: 5px;
 		}
 
@@ -383,19 +364,14 @@ $panel-bg: $gray-50;
 		.link-item {
 			display: block;
 			text-decoration: none;
-			color: var(--gray-900);
-			padding: 5px;
-			margin: 3px 0px;
-			border-radius: 6px;
+			color: var(--text-color);
+			padding: var(--padding-xs);
+			margin: var(--margin-xs) 0px;
+			border-radius: var(--border-radius-md);
 			cursor: pointer;
 
 			&:hover {
-				background-color: var(--gray-50);
-
-				.indicator-pill,
-				.indicator-pill-right {
-					background: white;
-				}
+				background-color: var(--bg-color);
 			}
 
 			&:first-child {
@@ -411,7 +387,7 @@ $panel-bg: $gray-50;
 			}
 
 			.disabled-link {
-				color: $text-muted;
+				color: var(--text-muted);
 			}
 
 			.popover {
@@ -440,7 +416,7 @@ $panel-bg: $gray-50;
 
 			.widget-title {
 				font-weight: 500;
-				color: var(--gray-900);
+				color: var(--heading-color);
 				font-size: var(--text-base);
 				margin-top: var(--margin-xs);
 			}
@@ -460,16 +436,13 @@ $panel-bg: $gray-50;
 			text-align: left;
 
 			.number-card-loading {
-				display: flex;
+				@include flex(flex, space-between, center, null);
 				height: 50px;
-				align-items: center;
-				justify-content: center;
 			}
 
 			.widget-content {
-				padding-top: 27px;
-				display: flex;
-				justify-content: space-between;
+				@include flex(flex, space-between, null, null);
+				padding-top: 25px;
 
 				.number {
 					font-weight: 600;
@@ -485,9 +458,7 @@ $panel-bg: $gray-50;
 				}
 
 				.card-stats {
-					display: flex;
-					flex-direction: column;
-					align-items: flex-end;
+					@include flex(flex, null, flex-end, column);
 				}
 
 				.percentage-stat-area {
@@ -548,7 +519,7 @@ $panel-bg: $gray-50;
 	left: 2px;
 	// font-weight: bold;
 	display: inline-block;
-	background:	$text-muted;
+	background:	var(--text-muted);
 	font-size: 12px;
 	line-height: 20px;
 	padding: 0 8px;
@@ -556,146 +527,6 @@ $panel-bg: $gray-50;
 	border-radius: 10px;
 }
 
-@-webkit-keyframes smallBounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -12px, 0);
-    transform: translate3d(0, -12px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -6px, 0);
-    transform: translate3d(0, -6px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
-@keyframes smallBounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -12px, 0);
-    transform: translate3d(0, -12px, 0);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -6px, 0);
-    transform: translate3d(0, -6px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0);
-    transform: translate3d(0, -4px, 0);
-  }
-}
-
-.small-bounce {
-  -webkit-animation-name: smallBounce;
-  animation-name: smallBounce;
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-  animation-duration: 1s;
-}
-
-@-webkit-keyframes slideInUp {
-  from {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInUp {
-  from {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slide-in-up {
-  -webkit-animation-name: slideInUp;
-  animation-name: slideInUp;
-  animation-duration: 1s;
-}
-
-
-@-webkit-keyframes pulse {
-  from {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes pulse {
-  from {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
 
 .zoomOutDelete {
   transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss
index aa02bfc3fe..14ec2dd238 100644
--- a/frappe/public/scss/form.scss
+++ b/frappe/public/scss/form.scss
@@ -16,11 +16,7 @@ $form-left-padding: var(--padding-xl);
 }
 
 .form-section {
-	margin: var(--margin-lg) 0px;
-	border-radius: var(--border-radius-md);
-	box-shadow: var(--card-shadow);
-	padding: var(--padding-sm);
-	background: var(--card-bg);
+	margin: 0px;
 
 	.form-section-description {
 		margin-bottom: 10px;
@@ -51,6 +47,11 @@ $form-left-padding: var(--padding-xl);
 	}
 }
 
+.form-section.frappe-card {
+	margin: var(--margin-lg) 0px;
+	@include card();
+}
+
 .form-dashboard {
 	.section-head {
 		font-size: var(--text-xl);
diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss
index 8573433b3c..cdbe64271e 100644
--- a/frappe/public/scss/global.scss
+++ b/frappe/public/scss/global.scss
@@ -181,11 +181,16 @@ h2 {
 	}
 }
 
-.btn-group-sm > .btn, .btn-sm, .btn-xs {
-	padding: 4px 12px;
+.btn-group-sm > .btn, .btn-sm {
+	padding: var(--padding-xs) var(--padding-sm);
 	font-size: var(--text-md);
 }
 
+.btn-xs {
+	padding: var(--padding-xs) var(--padding-sm);
+	font-size: var(--text-xs);
+}
+
 .input-xs {
 	height: 26px;
 	font-size: var(--text-md);
diff --git a/frappe/public/scss/icons.scss b/frappe/public/scss/icons.scss
index 3f64a111a4..b955795750 100644
--- a/frappe/public/scss/icons.scss
+++ b/frappe/public/scss/icons.scss
@@ -7,8 +7,8 @@
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
-	fill: var(--gray-900);
-	stroke: var(--gray-900);
+	fill: var(--icon-fill);
+	stroke: var(--icon-stroke);
 }
 
 #icon-search {
diff --git a/frappe/public/scss/indicator.scss b/frappe/public/scss/indicator.scss
index 7a4f93a116..0611a9f1aa 100644
--- a/frappe/public/scss/indicator.scss
+++ b/frappe/public/scss/indicator.scss
@@ -43,69 +43,115 @@
 	margin: 0 0 0 4px;
 }
 
+:root {
+	--indicator-green: var(--dark-green-500);
+	--indicator-green-bg: var(--dark-green-50);
+
+	--indicator-blue: var(--blue-500);
+	--indicator-blue-bg: var(--blue-50);
+
+	--indicator-orange: var(--orange-500);
+	--indicator-orange-bg: var(--orange-50);
+
+	--indicator-yellow: var(--yellow-500);
+	--indicator-yellow-bg: var(--yellow-50);
+
+	--indicator-gray: var(--gray-500);
+	--indicator-gray-bg: var(--gray-50);
+
+	--indicator-darkgray: var(--dark-gray-500);
+	--indicator-darkgray-bg: var(--dark-gray-50);
+
+	--indicator-red: var(--red-500);
+	--indicator-red-bg: var(--red-50);
+}
+
+[data-theme="dark"] {
+	--indicator-green: var(--dark-green-50);
+	--indicator-green-bg: var(--dark-green-500);
+
+	--indicator-blue: var(--blue-50);
+	--indicator-blue-bg: var(--blue-500);
+
+	--indicator-orange: var(--orange-100);
+	--indicator-orange-bg: var(--orange-500);
+
+	--indicator-yellow: var(--yellow-50);
+	--indicator-yellow-bg: var(--yellow-500);
+
+	--indicator-gray: var(--gray-100);
+	--indicator-gray-bg: var(--gray-600);
+
+	--indicator-dark-gray: var(--dark-gray-200);
+	--indicator-dark-gray-bg: var(--dark-gray-700);
+
+	--indicator-red: var(--red-50);
+	--indicator-red-bg: var(--red-500);
+}
+
 .indicator-pill.green,
 .indicator-pill-right.green,
 .indicator-pill-round.green {
-	background: var(--dark-green-50);
-	color: var(--dark-green-500);
+	background: var(--indicator-green-bg);
+	color: var(--indicator-green);
 	&::before, &::after {
-		background: var(--dark-green-500);
+		background: var(--indicator-green);
 	}
 }
 
 .indicator-pill.blue,
 .indicator-pill-right.blue {
-	background: var(--blue-50);
-	color: var(--blue-500);
+	background: var(--indicator-blue-bg);
+	color: var(--indicator-blue);
 	&::before, &::after {
-		background: var(--blue-500);
+		background: var(--indicator-blue);
 	}
 }
 
 .indicator-pill.orange,
 .indicator-pill-right.orange {
-	background: var(--orange-100);
-	color: var(--orange-500);
+	background: var(--indicator-orange-bg);
+	color: var(--indicator-orange);
 	&::before, &::after {
-		background: var(--orange-500);
+		background: var(--indicator-orange);
 	}
 }
 
 .indicator-pill.yellow,
 .indicator-pill-right.yellow {
-	background: var(--yellow-50);
-	color: var(--yellow-500);
+	background: var(--indicator-yellow-bg);
+	color: var(--indicator-yellow);
 	&::before, &::after {
-		background: var(--yellow-500);
+		background: var(--indicator-yellow);
 	}
 }
 
 .indicator-pill.grey,
 .indicator-pill-right.grey,
 .indicator-pill-round.grey {
-	background: var(--gray-100);
-	color: var(--gray-600);
+	background: var(--indicator-gray-bg);
+	color: var(--indicator-gray);
 	&::before, &::after {
-		background: var(--gray-600);
+		background: var(--indicator-gray);
 	}
 }
 
 .indicator-pill.darkgrey,
 .indicator-pill-right.darkgrey {
-	background: var(--gray-200);
-	color: var(--gray-600);
+	background: var(--indicator-dark-gray-bg);
+	color: var(--indicator-gray);
 	&::before, &::after {
-		background: var(--gray-700);
+		background: var(--indicator-dark-gray);
 	}
 }
 
 .indicator-pill.red,
 .indicator-pill-right.red,
 .indicator-pill-round.red {
-	background: var(--red-50);
-	color: var(--red-500);
+	background: var(--indicator-red-bg);
+	color: var(--indicator-red);
 	&::before, &::after {
-		background: var(--red-500);
+		background: var(--indicator-red);
 	}
 }
 
diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss
index 1c569199b6..6b057a5d7c 100644
--- a/frappe/public/scss/main.scss
+++ b/frappe/public/scss/main.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 
 @import "~bootstrap/scss/bootstrap";
 @import "global";
@@ -25,6 +26,7 @@
 @import "kanban";
 @import "calendar";
 @import "dashboard-view";
+@import "controls";
 
 @import "frappe/public/css/font-awesome";
 @import "multilevel-dropdown";
diff --git a/frappe/public/scss/mixins.scss b/frappe/public/scss/mixins.scss
new file mode 100644
index 0000000000..99327d2043
--- /dev/null
+++ b/frappe/public/scss/mixins.scss
@@ -0,0 +1,18 @@
+@mixin flex($dis, $x, $y, $dir) {
+	display: $dis;
+	justify-content: $x;
+	align-items: $y;
+	flex-direction: $dir;
+}
+
+@mixin card(
+	$radius: var(--border-radius-md),
+	$shadow: var(--card-shadow),
+	$padding: var(--padding-sm),
+	$background-color: var(--card-bg)
+) {
+	border-radius: $radius;
+	box-shadow: $shadow;
+	padding: $padding;
+	background-color: $background-color;
+}
\ No newline at end of file
diff --git a/frappe/public/scss/navbar.scss b/frappe/public/scss/navbar.scss
index 2039b33b78..99ac65ec2d 100644
--- a/frappe/public/scss/navbar.scss
+++ b/frappe/public/scss/navbar.scss
@@ -1,7 +1,7 @@
 .navbar {
 	height: $navbar-height;
 	background: var(--fg-color);
-	box-shadow: inset 0px -1px 0px var(--gray-100);
+	box-shadow: inset 0px -1px 0px var(--shadow-inset);
 
 	.navbar-brand {
 		padding: 0rem 1rem;
diff --git a/frappe/public/scss/notification.scss b/frappe/public/scss/notification.scss
index 3b6c1e6b25..c5fdc273b9 100644
--- a/frappe/public/scss/notification.scss
+++ b/frappe/public/scss/notification.scss
@@ -3,13 +3,6 @@
 	height: $h;
 }
 
-@mixin flex($dis, $x, $y, $dir) {
-	display: $dis;
-	justify-content: $x;
-	align-items: $y;
-	flex-direction: $dir;
-}
-
 .navbar {
 	perspective: 3200px;
 }
diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss
index 6247088bfb..4cf345758e 100644
--- a/frappe/public/scss/sidebar.scss
+++ b/frappe/public/scss/sidebar.scss
@@ -405,7 +405,7 @@ body[data-route^="Module"] .main-menu {
 	.remove-btn {
 		margin-left: var(--margin-xs);
 	}
-	background-color: var(--gray-50);
+	background-color: var(--fg-color);
 	border-radius: var(--border-radius);
 	padding: var(--padding-xs) var(--padding-sm);
 	color: $gray-800;
@@ -421,10 +421,31 @@ body[data-route^="Module"] .main-menu {
 }
 
 .form-reviews {
-	.review-row {
+	// REDESIGN-TODO: Refactor
+	.review {
+		display: inline-block;
 		font-weight: 500;
+		border-radius: 50%;
 		margin-bottom: var(--margin-sm);
+		margin-right: var(--margin-sm);
+		font-size: var(--text-xs);
+		height: 34px;
+		width: 34px;
+		text-align: center;
 		cursor: pointer;
+		padding: var(--padding-xs);
+		padding-top: 8px;
+		&.appreciation {
+			background-color: var(--dark-green-100);
+			color: var(--dark-green-600);
+		}
+		&.criticism {
+			background-color: var(--red-100);
+			color: var(--red-600);
+		}
+	}
+	li:last-child {
+		display: inline-block;
 	}
 	.add-review-btn {
 		height: 28px;
diff --git a/frappe/public/scss/toast.scss b/frappe/public/scss/toast.scss
index 15339f5d13..d0f2566615 100644
--- a/frappe/public/scss/toast.scss
+++ b/frappe/public/scss/toast.scss
@@ -6,29 +6,27 @@
 }
 
 #alert-container .desk-alert {
-	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;
 	width: 400px;
 	min-height: 50px;
 	max-height: 200px;
-	background-color: $white;
+	background-color: var(--toast-bg);
 
 	-webkit-animation-name: backInRight;
 	animation-name: backInRight;
 	animation-duration: 600ms;
 
-	// word-break: break-all;
 	overflow-y: auto;
 	position: relative;
-	// transform: translateX(calc(100% + 20px));
-	// transition: transform 300ms ease;
 	padding: 0px;
 	border-radius: var(--border-radius-md);
 
 	.alert-message-container {
-		padding: 16px 40px 16px 16px;
+		padding: var(--padding-md);
+		padding-right: var(--padding-2xl);
 
 		.icon {
-			margin-right: 10px;
+			margin-right: var(--margin-sm);
 		}
 
 		.alert-title-container {
@@ -38,20 +36,21 @@
 
 		.alert-message {
 			font-weight: 500;
-			color: var(--gray-900);
+			color: var(--text-color);
 			line-height: 20px;
 		}
 
 		.alert-subtitle {
-			font-size: 13px;
+			font-size: var(--text-md);
 			padding-left: 34px;
+			color: var(--text-muted);
 		}
 	}
 
 	.close {
 		position: absolute;
-		top: 10px;
-		right: 10px;
+		top: var(--padding-sm);
+		right: var(--padding-sm);
 		color: inherit;
 		opacity: 1;
 		font-size: inherit;
@@ -64,16 +63,16 @@
 			border: none;
 			background: none;
 			width: 100%;
-			border-top: 1px solid $border-color;
-			border-right: 1px solid $border-color;
-			padding: 7px;
+			border-top: 1px solid var(--border-color);
+			border-right: 1px solid var(--border-color);
+			padding: var(--padding-sm);
 			outline: none;
-			font-size: 12px;
+			font-size: var(--text-sm);
 			font-weight: 500;
-			color: $text-muted;
+			color: var(--text-light);
 
 			&:hover {
-				color: var(--gray-900)
+				color: var(--text-color)
 			}
 
 			&:last-child {
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index 64ddee7b61..fdd7957760 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -117,19 +117,20 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--purple-100: #EAEAFB;
 	--purple-50: #F2F2FD;
 
-	--card-shadow: 0px 0px 0.5px rgba(0, 0, 0, 0.75), 0px 1px 2px rgba(0, 0, 0, 0.13);
 
 	--padding-xs: 5px;
 	--padding-sm: 10px;
 	--padding-md: 15px;
 	--padding-lg: 20px;
 	--padding-xl: 30px;
+	--padding-2xl: 40px;
 
 	--margin-xs: 5px;
 	--margin-sm: 10px;
 	--margin-md: 15px;
 	--margin-lg: 20px;
 	--margin-xl: 30px;
+	--margin-2xl: 40px;
 
 	--text-xs: 11px;
 	--text-sm: 12px;
@@ -139,27 +140,49 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--text-xl: 18px;
 	--text-2xl: 20px;
 
+	--shadow-sm: 0px 0px 0.5px rgba(0, 0, 0, 0.75), 0px 1px 2px rgba(0, 0, 0, 0.13);
+	--shadow-md: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1);
+	--shadow-base:  0px 4px 8px rgba(25, 39, 52, 0.06), 0px 0px 4px rgba(25, 39, 52, 0.12);
+	--shadow-lg:  0px 8px 14px rgba(25, 39, 52, 0.08), 0px 2px 6px rgba(25, 39, 52, 0.04);
+	--shadow-xl: 0px 18px 22px rgba(25, 39, 52, 0.1), 0px 1px 10px rgba(0, 0, 0, 0.06), 0px 0.5px 5px rgba(25, 39, 52, 0.04);
+	--card-shadow: var(--shadow-sm);
+
+	// Type Colors
 	--text-muted: var(--gray-600);
 	--text-light: var(--gray-700);
 	--text-color: var(--gray-900);
 	--heading-color: var(--gray-900);
 
+	// SVG Colors
+	--icon-fill: var(--gray-900);
+	--icon-stroke: var(--gray-900);
+
+	// Layout Colors
+	--bg-color: var(--gray-50);
+	--fg-color: white;
+	--card-bg: var(--fg-color);
+	--control-bg: var(--gray-100);
+	--modal-bg: white;
+	--toast-bg: var(--modal-bg);
+
+	--sidebar-select-color: var(--gray-200);
+
+	--shadow-inset: var(--gray-100);
+	--border-color: var(--gray-100);
+
+	// Border Sizes
 	--border-radius-sm: 4px;
 	--border-radius: 6px;
 	--border-radius-md: 8px;
 	--border-radius-lg: 12px;
-
-	--bg-color: var(--gray-50);
-	--fg-color: white;
-	--card-bg: var(--fg-color);
 }
 
 html, body {
 	font-size: 14px;
 }
 
-$border-color: var(--gray-100);
-$control-bg: var(--gray-100);
+$border-color: var(--border-color);
+$control-bg: var(--control-bg);
 $code-color: var(--purple-600);
 
 $border-radius: var(--border-radius);
@@ -205,13 +228,39 @@ $dropdown-item-padding-y: 0.5rem !default;
 $dropdown-item-padding-x: 0.5rem !default;
 
 [data-theme="dark"] {
-	--bg-color: var(--gray-900);
-	--fg-color: var(--gray-700);
+	--gray-50: #{$gray-50};
+	--gray-100: #F7FAFC;
+	--gray-200: #EDF2F7;
+	--gray-300: #E2E8F0;
+	--gray-400: #CBD5E0;
+	--gray-500: #A0AEC0;
+	--gray-600: #718096;
+	--gray-700: #4A5568;
+	--gray-800: #2D3748;
+	--gray-900: #1A202C;
 
+	// Type Colors
 	--text-muted: var(--gray-300);
 	--text-light: var(--gray-400);
 	--text-color: var(--gray-50);
 	--heading-color: var(--gray-50);
+
+	// SVG Colors
+	--icon-fill: var(--gray-50);
+	--icon-stroke: var(--gray-50);
+
+	// Layout Colors
+	--bg-color: var(--gray-900);
+	--fg-color: var(--gray-800);
+	--card-bg: var(--gray-800);
+	--control-bg: var(--gray-700);
+	--modal-bg: var(--gray-700);
+	--toast-bg: var(--modal-bg);
+
+	--sidebar-select-color: var(--gray-800);
+
+	--shadow-inset: var(--fg-color);
+	--border-color: var(--gray-600);
 }
 
 $spacer: 14px;