diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index 83fc4461d6..c939c6de39 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -241,6 +241,7 @@ textarea.form-control {
 
 // rating
 .rating {
+	cursor: pointer;
 	--star-fill: var(--gray-300);
 	.star-hover {
 		--star-fill: var(--yellow-100);
@@ -248,6 +249,24 @@ textarea.form-control {
 	.star-click {
 		--star-fill: var(--yellow-300);
 	}
+
+	.rating-box {
+		background-color: var(--gray-300);
+		border-radius: 5px;
+		font-size: 14px;
+		text-align: center;
+		padding: 2px;
+		cursor: pointer;
+		width: 25px;
+		height: 25px;
+		margin: 4px 2px;
+	}
+	.rating-hover {
+		background-color: var(--yellow-100);
+	}
+	.rating-click {
+		background-color: var(--yellow-300);
+	}
 }
 
 .frappe-control .control-value {
diff --git a/frappe/templates/includes/feedback/feedback.html b/frappe/templates/includes/feedback/feedback.html
index a5282a9df4..55d44e95fb 100644
--- a/frappe/templates/includes/feedback/feedback.html
+++ b/frappe/templates/includes/feedback/feedback.html
@@ -12,17 +12,9 @@
 						</div>
 						<div class="col-sm-6">
 							<div class="rating">
-								<svg class="icon icon-md" data-rating="1">
-									<use href="#icon-star"></use>
-								</svg><svg class="icon icon-md" data-rating="2">
-									<use href="#icon-star"></use>
-								</svg><svg class="icon icon-md" data-rating="3">
-									<use href="#icon-star"></use>
-								</svg><svg class="icon icon-md" data-rating="4">
-									<use href="#icon-star"></use>
-								</svg><svg class="icon icon-md" data-rating="5">
-									<use href="#icon-star"></use>
-								</svg>
+								{% for rating in [1, 2, 3, 4, 5 ,6, 7, 8, 9, 10] %}
+									<div class="icon rating-box" data-rating="{{ rating }}">{{ rating }}</div>
+								{% endfor %}
 							</div>
 						</div>
 					</div>
@@ -44,8 +36,8 @@
 <script type="text/javascript">
 	frappe.ready(() => {
 		let feedback = "{{ user_feedback.feedback or ''}}"
-		let rating = parseInt("{{ user_feedback.rating or 0 }}")
-
+		let user_rating = parseInt("{{ user_feedback.rating or 0 }}")
+		let rating = user_rating;
 		feedback && $("#submit-feedback").html(__("Update"));
 
 		if (frappe.is_user_logged_in()) {
@@ -60,36 +52,35 @@
 		$('.give-feedback').click(() => toggle_feedback());
 
 
-		$('.rating').find('svg').hover((ev) => {
+		$('.rating').find('.rating-box').hover((ev) => {
 			const el = $(ev.currentTarget);
 			rating = el.data('rating');
-			el.parent().children('svg').each( function(e) {
+			el.parent().children('.rating-box').each( function(e) {
 				if (e < rating) {
-					$(this).addClass('star-hover');
+					$(this).addClass('rating-hover');
 				} else {
-					$(this).removeClass('star-hover');
+					$(this).removeClass('rating-hover');
 				}
 			});
 		}, (ev) => {
 			const el = $(ev.currentTarget);
-			el.parent().children('svg').each( function() {
-				$(this).removeClass('star-hover');
+			el.parent().children('.rating-box').each( function() {
+				$(this).removeClass('rating-hover');
 			});
 		});
 
-		$('.rating').find('svg').click((ev) => {
+		$('.rating').find('.rating-box').click((ev) => {
 			const el = $(ev.currentTarget);
 			rating = el.data('rating');
-			el.parent().children('svg').each( function(e) {
+			el.parent().children('.rating-box').each( function(e) {
 				if (e < rating) {
-					$(this).addClass('star-click');
+					$(this).addClass('rating-click');
 				} else {
-					$(this).removeClass('star-click');
+					$(this).removeClass('rating-click');
 				}
 			});
 		});
 
-
 		$('#submit-feedback').click((ev) => {
 			let update = ev.target.innerText !== __("Submit");
 			let args = {
@@ -126,13 +117,14 @@
 							set_rating(0);
 						} else {
 							feedback = $("[name='feedback']").val();
+							user_rating = rating;
 							$("#submit-feedback").html(__("Update"));
 						}
 						frappe.msgprint({message:__("Thank you for your valuable feedback!"), indicator:'green'});
 					}
 				})
 			} else {
-				if (feedback == $("[name='feedback']").val()) {
+				if (feedback == $("[name='feedback']").val() && rating == user_rating) {
 					frappe.msgprint({message:__("Please update rating or feedback before saving."), indicator:'red'});
 					return false;
 				}
@@ -142,6 +134,7 @@
 					callback: function(r) {
 						toggle_feedback();
 						feedback = $("[name='feedback']").val();
+						user_rating = rating;
 						frappe.msgprint({message:__("Feedback updated successfully!"), indicator:'green'});
 					}
 				})
@@ -155,12 +148,12 @@
 		})
 
 		function set_rating(rating) {
-			let el = $('.rating').find('svg');
-			el.children('svg').prevObject.each( function(e) {
+			let el = $('.rating').find('.rating-box');
+			el.children('.rating-box').prevObject.each( function(e) {
 				if (e < rating) {
-					$(this).addClass('star-click');
+					$(this).addClass('rating-click');
 				} else {
-					$(this).removeClass('star-click');
+					$(this).removeClass('rating-click');
 				}
 			});
 		}
diff --git a/frappe/templates/includes/feedback/feedback.py b/frappe/templates/includes/feedback/feedback.py
index cc2eb01645..23a61b8885 100644
--- a/frappe/templates/includes/feedback/feedback.py
+++ b/frappe/templates/includes/feedback/feedback.py
@@ -37,7 +37,7 @@ def update_feedback(reference_doctype, reference_name, rating, feedback, feedbac
 
 def send_mail(feedback, subject):
 	doc = frappe.get_doc(feedback.reference_doctype, feedback.reference_name)
- 
+
 	message = ("<p>{0} ({1})</p>".format(feedback.feedback, feedback.rating)
 		+ "<p><a href='{0}/app/marketing-asset-feedback/{1}' style='font-size: 80%'>{2}</a></p>".format(frappe.utils.get_request_site_address(),
 			feedback.name,