diff --git a/frappe/public/scss/website/blog.scss b/frappe/public/scss/website/blog.scss
index 3cabf181c9..e599210435 100644
--- a/frappe/public/scss/website/blog.scss
+++ b/frappe/public/scss/website/blog.scss
@@ -1,5 +1,6 @@
 :root {
-	--comment-timeline-height: 60px;
+	--comment-timeline-bottom: 60px;
+	--comment-timeline-top: 8px;
 }
 
 .blog-list {
@@ -102,26 +103,54 @@
 	}
 
 
-	.feedback-button svg, .comment-count svg {
+	.feedback-item svg {
 		vertical-align: sub;
 	}
 
 	.blog-feedback {
-		.feedback-header {
-			display: flex;
-			justify-content: space-between;
+		display: flex;
 
-			.like-dislike {
-				display: flex;
+		.like-icon {
+			cursor: pointer;
 
-				.like-icon, .dislike-icon {
-					cursor: pointer;
-				}
+			&.gray use {
+				fill: var(--gray-600);
+				stroke: none;
 			}
 		}
 	}
 
+	.add-comment-button {
+		margin-left: 35px;
+	}
+
+	.timeline-dot {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		position: absolute;
+		top: 8px;
+		left: 22px;
+		background-color: var(--fg-color);
+		border: 1px solid var(--dark-border-color);
+
+		&:before {
+			content: ' ';
+			background: var(--gray-600);
+			position: absolute;
+			top: 5px;
+			left: 5px;
+			border-radius: 50%;
+			height: 4px;
+			width: 4px;
+		}
+	}
+
 	.blog-comments {
+		.comment-form-wrapper {
+			display: none;
+		}
+
 		.add-comment-section {
 			.login-required {
 				padding: var(--padding-sm);
@@ -160,13 +189,12 @@
 		#comment-list {
 			position: relative;
 			padding-left: var(--padding-xl);
-			padding-top: var(--padding-lg);
 
-			&::before {
+			&:before {
 				content: " ";
-				top: 0;
 				position: absolute;
-				bottom: var(--comment-timeline-height);
+				top: var(--comment-timeline-top);
+				bottom: var(--comment-timeline-bottom);
 				border-left: 1px solid var(--dark-border-color);
 			}
 
diff --git a/frappe/templates/includes/comments/comment.html b/frappe/templates/includes/comments/comment.html
index 3ce5224db2..e0fc1c3c54 100644
--- a/frappe/templates/includes/comments/comment.html
+++ b/frappe/templates/includes/comments/comment.html
@@ -1,6 +1,6 @@
 {% from "frappe/templates/includes/avatar_macro.html" import avatar %}
 
-<div class="comment-row media my-3">
+<div class="comment-row media my-5">
 	<div class="comment-avatar">
 		{{  avatar(user_id=(comment.comment_email or comment.sender), size='avatar-medium') }}
 	</div>
diff --git a/frappe/templates/includes/comments/comments.html b/frappe/templates/includes/comments/comments.html
index c0bb33fd38..8a9058bb4d 100644
--- a/frappe/templates/includes/comments/comments.html
+++ b/frappe/templates/includes/comments/comments.html
@@ -1,33 +1,35 @@
 <div class="comment-view mb-6">
 	{% if not comment_list %}
 		<div class="no-comment">
-			<p class="text-muted small">{{ _("No comments yet. Start a new discussion.") }}</p>
+			<p class="text-muted small">{{ _("No comments yet. ") }}
+				<span class="hidden login-required">
+					<a href="/login?redirect-to={{ pathname }}">{{ _("Login to start a new discussion") }}</a>
+				</span>
+				<span class="hidden start-discussion">{{ _("Start a new discussion") }}</span>
+			</p>
 		</div>
 	{% endif %}
 
 	{% if not is_communication %}
-		<div class="add-comment-section">
-			<div class="text-muted hidden login-required">
-				<a href="/login?redirect-to={{ pathname }}">{{ _("Login to comment") }}</a>
-			</div>
+		<div class="add-comment-section mb-5">
 			<div class="comment-form-wrapper">
 				<div id="comment-form">
 					<form class="new-comment">
 						<fieldset class="new-comment-fields">
 							<div class="user-details row" style="margin-bottom: 15px; display:none;">
 								<div class="comment-by col-sm-6 pb-4">
-									<div class="form-label mb-1">Your Name</div>
+									<div class="form-label mb-1">{{ _("Your Name") }}</div>
 									<input class="form-control comment_by" name="comment_by" type="text">
 								</div>
 								<div class="col-sm-6">
-									<div class="form-label mb-1">Email</div>
+									<div class="form-label mb-1">{{ _("Email") }}</div>
 									<input class="form-control comment_email" name="comment_email" type="email">
 								</div>
 							</div>
 							<div class="comment-text-area">
-								<div class="form-label mb-1">Add a comment</div>
+								<div class="form-label mb-1">{{ _("Add a comment") }}</div>
 								<textarea class="form-control" name="comment" rows=5 ></textarea>
-								<div class="text-muted small mt-1 mb-4">Ctrl+Enter to add comment</div>
+								<div class="text-muted small mt-1 mb-4">{{ _("Ctrl+Enter to add comment") }}</div>
 							</div>
 							<button class="btn btn-sm small" id="submit-comment">{{ _("Comment") }}</button>
 						</fieldset>
@@ -37,77 +39,109 @@
 		</div>
 	{% endif %}
 
+	<hr class="add-comment-hr my-5">
+
 	<div itemscope itemtype="http://schema.org/UserComments" id="comment-list">
-		{% for comment in comment_list %}
-			{% include "templates/includes/comments/comment.html" %}
-		{% endfor %}
+		<div class="add-comment mb-5">
+			<div class="timeline-dot"></div>
+			<button class="btn btn-sm small add-comment-button">{{ _("Add a comment") }}</button>
+		</div>
+		<div class="comment-list">
+			{% for comment in comment_list %}
+				{% include "templates/includes/comments/comment.html" %}
+			{% endfor %}
+		</div>
 	</div>
 </div>
 
 <script>
 	frappe.ready(function() {
-		let guest_allowed = "{{ guest_allowed or ''}}";
+		let guest_allowed = parseInt("{{ guest_allowed or 0}}");
 		let comment_count = "{{ comment_text }}";
+		let full_name = ""
+		let user_id = "";
+
+		let update_timeline_line_length = function(direction, size) {
+			if (direction == 'top') {
+				$('.blog-container')[0].style.setProperty('--comment-timeline-top', size);
+			} else {
+				let comment_timeline_bottom = $('.comment-list .comment-row:last-child').height() - 10;
+				$('.blog-container')[0].style.setProperty('--comment-timeline-bottom', comment_timeline_bottom +'px');
+			}
+		}
+
+		let show_comment_box = function() {
+			$('.comment-form-wrapper').show();
+			update_timeline_line_length('top', '-20px');
+			$('.add-comment-hr').hide();
+			$('.add-comment').hide();
+		}
+
+		let hide_comment_box = function() {
+			$('.comment-form-wrapper').hide();
+			update_timeline_line_length('top', '8px');
+			update_timeline_line_length('bottom');
+			$('.add-comment-hr').show();
+			$('.add-comment').show();
+		}
 
 		let $comment_count = $(`
-			<div class="comment-count">
-				${frappe.utils.icon('small-message', 'md')}
+			<div class="feedback-item">
+				<span class="comment-icon">${frappe.utils.icon('small-message', 'md')}</span>
+				<span class="comment-count"></span>
 			</div>
 		`);
 
-		$('.feedback-header').append($comment_count);
-
 		$('form').keydown(function(event) {
 			if (event.ctrlKey && event.keyCode === 13) {
 				$(this).find('#submit-comment').trigger('click');
 			}
 		})
 
-		let comment_timeline_height = $('#comment-list .comment-row:last-child').height() - 10;
-		$('.blog-container')[0].style.setProperty('--comment-timeline-height', comment_timeline_height +'px');
-
-		let update_count = function(name, count) {
-			let text = count == 0 || count == 1 ? name : `${name}s`;
-
-			$(`.${name.toLowerCase()}-count`).find('span').remove();
-
-			$(`.${name.toLowerCase()}-count`).append(`
-				<span>${text} ${count}</span>
-			`);
-		}
-
-		update_count('Comment', comment_count);
-
 		if (!frappe.is_user_logged_in()) {
-			!guest_allowed && $(".login-required, .comment-form-wrapper").toggleClass("hidden");
+			$(".user-details").toggle('hide');
+			if (guest_allowed) {
+				$('.start-discussion').removeClass('hidden');
+			} else {
+				$(".login-required, .comment-form-wrapper").toggleClass("hidden");
+
+				$('.add-comment-button').text('{{ _("Login to comment") }}');
+				$('.add-comment-button').click(() => {
+					window.location.href = '/login?redirect-to={{ pathname }}';
+				});
+			}
 		} else {
 			$('input.comment_by').prop("disabled", true);
 			$('input.comment_email').prop("disabled", true);
-		}
 
-		var n_comments = $(".comment-row").length;
-
-		if(n_comments) {
-			$(".no_comment").toggle(false);
-		}
-		if(n_comments > 50) {
-			$(".add-comment").toggle(false)
-				.parent().append("<div class='text-muted'>Comments are closed.</div>")
-		}
-
-		var full_name = "", user_id = "";
-		if(frappe.is_user_logged_in()) {
 			full_name = frappe.get_cookie("full_name");
 			user_id = frappe.get_cookie("user_id");
 			if(user_id != "Guest") {
 				$("[name='comment_email']").val(user_id);
 				$("[name='comment_by']").val(full_name);
 			}
-		} else {
-			$(".user-details").toggle('hide');
+
+			$('.start-discussion').removeClass('hidden');
 		}
+
+		$('.blog-feedback').append($comment_count);
+		$('.comment-count').text(comment_count);
 		$("#comment-form textarea").val("");
 
+		update_timeline_line_length('bottom');
+
+		let n_comments = $(".comment-row").length;
+		n_comments ? $(".no_comment").toggle(false) : show_comment_box();
+
+		if(n_comments > 50) {
+			$(".add-comment").toggle(false)
+				.parent().append("<div class='text-muted'>Comments are closed.</div>")
+		}
+
+		$('.add-comment-button').click(() => {
+			show_comment_box();
+		});
+
 		$("#submit-comment").click(function() {
 			var args = {
 				comment_by: $("[name='comment_by']").val(),
@@ -120,17 +154,17 @@
 			}
 
 			if(!args.comment_by || !args.comment_email || !args.comment) {
-				frappe.msgprint("{{ _("All fields are necessary to submit the comment.") }}");
+				frappe.msgprint('{{ _("All fields are necessary to submit the comment.") }}');
 				return false;
 			}
 
 			if (args.comment_email!=='Administrator' && !validate_email(args.comment_email)) {
-				frappe.msgprint("{{ _("Please enter a valid email address.") }}");
+				frappe.msgprint('{{ _("Please enter a valid email address.") }}');
 				return false;
 			}
 
 			if(!args.comment || !args.comment.trim()) {
-				frappe.msgprint("{{ _("Please add a valid comment.") }}");
+				frappe.msgprint('{{ _("Please add a valid comment.") }}');
 				return false;
 			}
 
@@ -145,12 +179,13 @@
 							frappe.msgprint(r._server_messages);
 					} else {
 						if (r.message) {
-							$(r.message).prependTo("#comment-list");
+							$(r.message).prependTo(".comment-list");
 							comment_count = cint(comment_count) + 1;
-							update_count('Comment', comment_count);
+							$('.comment-count').text(comment_count);
 						}
-						$(".no-comment, .add-comment").toggle(false);
+						$(".no-comment").toggle(false);
 						$("#comment-form textarea").val("");
+						hide_comment_box();
 					}
 				}
 			})
diff --git a/frappe/templates/includes/feedback/feedback.html b/frappe/templates/includes/feedback/feedback.html
index fd509f9db3..7925d4dccd 100644
--- a/frappe/templates/includes/feedback/feedback.html
+++ b/frappe/templates/includes/feedback/feedback.html
@@ -1,64 +1,31 @@
-<div class="feedback-header mb-0">
-	<div class="like-dislike">
-		<div class="feedback-button mr-3">
-			<span class="like-icon"></span>
-			<span class="like-count"></span>
-		</div>
-		<div class="feedback-button mr-3">
-			<span class="dislike-icon"></span>
-			<span class="dislike-count"></span>
-		</div>
-	</div>
+<div class="feedback-item mr-3">
+	<span class="like-icon"></span>
+	<span class="like-count"></span>
 </div>
 
 <script type="text/javascript">
 	frappe.ready(() => {
 		let like = parseInt("{{ user_feedback.like or 0 }}");
-		let dislike = parseInt("{{ user_feedback.dislike or 0 }}");
 		let like_count = parseInt("{{ like_count or 0 }}");
-		let dislike_count = parseInt("{{ dislike_count or 0 }}");
-
-		$('.like-icon').append(frappe.utils.icon(like ? 'like-active' : 'like', 'md'));
-		$('.dislike-icon').append(frappe.utils.icon(dislike ? 'dislike-active' : 'dislike', 'md'));
-
-		let update_count = function(name, count) {
-			let text = count == 0 || count == 1 ? name : `${name}s`;
-
-			$(`.${name.toLowerCase()}-count`).text('');
-			$(`.${name.toLowerCase()}-count`).text(`${text} ${count}`);
-		}
 
 		let update_like = function() {
 			like = !like;
 			like ? like_count++ : like_count--;
-			toggle_icon('like', like);
-			update_count('Like', like_count);
+			toggle_like_icon(like);
+			$('.like-count').text(like_count);
 		}
 
-		let update_dislike = function() {
-			dislike = !dislike;
-			dislike ? dislike_count++ : dislike_count--;
-			toggle_icon('dislike', dislike);
-			update_count('Dislike', dislike_count);
+		let toggle_like_icon = function(active) {
+			active ? $('.like-icon').addClass('gray') : $('.like-icon').removeClass('gray');
 		}
 
-		let toggle_icon = function(icon_name, active) {
-			let icon = active ? `${icon_name}-active` : icon_name;
-			$(`.${icon_name}-icon svg`).replaceWith(frappe.utils.icon(icon, 'md'));
-		}
+		$('.like-icon').append(frappe.utils.icon('heart', 'md'))
+		toggle_like_icon(like);
 
-		update_count('Like', like_count);
-		update_count('Dislike', dislike_count);
+		$('.like-count').text(like_count);
 
 		$('.like-icon').click(() => {
 			update_like();
-			dislike && update_dislike();
-			update_feedback();
-		})
-
-		$('.dislike-icon').click(() => {
-			update_dislike();
-			like && update_like();
 			update_feedback();
 		})
 
@@ -68,8 +35,7 @@
 				args: {
 					reference_doctype: "{{ reference_doctype or doctype }}",
 					reference_name: "{{ reference_name or name }}",
-					like,
-					dislike
+					like
 				}
 			});
 		} 
diff --git a/frappe/templates/includes/feedback/feedback.py b/frappe/templates/includes/feedback/feedback.py
index e31e210689..62fdc3f746 100644
--- a/frappe/templates/includes/feedback/feedback.py
+++ b/frappe/templates/includes/feedback/feedback.py
@@ -10,9 +10,8 @@ from frappe.website.doctype.blog_settings.blog_settings import get_feedback_limi
 
 @frappe.whitelist(allow_guest=True)
 @rate_limit(key='reference_name', limit=get_feedback_limit, seconds=60*60)
-def give_feedback(reference_doctype, reference_name, like, dislike):
+def give_feedback(reference_doctype, reference_name, like):
 	like = frappe.parse_json(like)
-	dislike = frappe.parse_json(dislike)
 	doc = frappe.get_doc(reference_doctype, reference_name)
 	if doc.disable_feedback == 1:
 		return
@@ -31,7 +30,6 @@ def give_feedback(reference_doctype, reference_name, like, dislike):
 		doc.reference_name = reference_name
 		doc.ip_address = frappe.local.request_ip
 	doc.like = like
-	doc.dislike = dislike
 	doc.save(ignore_permissions=True)
 
 	subject = _('Feedback on {0}: {1}').format(reference_doctype, reference_name)
@@ -41,9 +39,7 @@ def give_feedback(reference_doctype, reference_name, like, dislike):
 def send_mail(feedback, subject):
 	doc = frappe.get_doc(feedback.reference_doctype, feedback.reference_name)
 	if feedback.like:
-		message = "<p>Hey, </p><p>You have received a 👍 like on your blog post <b>{0}</b></p>".format(feedback.reference_name)
-	elif feedback.dislike:
-		message = "<p>Hey, </p><p>You have received a 👎 dislike on your blog post <b>{0}</b></p>".format(feedback.reference_name)
+		message = "<p>Hey, </p><p>You have received a ❤️ heart on your blog post <b>{0}</b></p>".format(feedback.reference_name)
 	else:
 		return
 
diff --git a/frappe/website/doctype/blog_post/blog_post.py b/frappe/website/doctype/blog_post/blog_post.py
index 1f19447e78..2b723c107a 100644
--- a/frappe/website/doctype/blog_post/blog_post.py
+++ b/frappe/website/doctype/blog_post/blog_post.py
@@ -147,7 +147,7 @@ class BlogPost(WebsiteGenerator):
 		user = frappe.session.user
 
 		feedback = frappe.get_all('Feedback',
-			fields=['like', 'dislike'],
+			fields=['like'],
 			filters=dict(
 				reference_doctype=self.doctype,
 				reference_name=self.name,
@@ -157,7 +157,6 @@ class BlogPost(WebsiteGenerator):
 		)
 
 		like_count = 0
-		dislike_count = 0
 
 		if frappe.db.count('Feedback'):
 			like_count = frappe.db.count('Feedback', 
@@ -168,17 +167,8 @@ class BlogPost(WebsiteGenerator):
 				)
 			)
 
-			dislike_count = frappe.db.count('Feedback', 
-				filters = dict(
-					reference_doctype = self.doctype, 
-					reference_name = self.name, 
-					dislike = True
-				)
-			)
-
 		context.user_feedback = feedback[0] if feedback else ''
 		context.like_count = like_count
-		context.dislike_count = dislike_count
 
 	def set_read_time(self):
 		content = self.content or self.content_html or ''
diff --git a/frappe/website/doctype/blog_post/templates/blog_post.html b/frappe/website/doctype/blog_post/templates/blog_post.html
index d12cef797e..69b92f49fd 100644
--- a/frappe/website/doctype/blog_post/templates/blog_post.html
+++ b/frappe/website/doctype/blog_post/templates/blog_post.html
@@ -43,30 +43,28 @@
 		) }}
 	{%- endif -%}
 	<div class="blog-footer">
-		<div>
-			{{ _('Published on') }} <time datetime="{{ published_on }}">{{ frappe.format_date(published_on) }}</time>
-		</div>
-		<div>
-			{% if social_links %}
+		{% if social_links %}
+			<div>
 				{% for link in social_links %}
 					<a href="{{ link.link }}" class="text-muted ml-2 fa fa-{{ link.icon }}" target="_blank"></a>
 				{% endfor %}
+			</div>
+		{% endif %}
+		<div class="blog-feedback">
+			{% if not disable_feedback %}
+				{% include 'templates/includes/feedback/feedback.html' %}
 			{% endif %}
 		</div>
+		<div>
+			{{ _('Published on') }} <time datetime="{{ published_on }}">{{ frappe.format_date(published_on) }}</time>
+		</div>
 	</div>
 
 	{% if blogger_info %}
-		<hr class="my-5">
+		<hr class="mt-2 mb-5">
 		{% include "templates/includes/blog/blogger.html" %}
 	{% endif %}
 
-	{% if not disable_feedback %}
-		<div class="blog-feedback my-5">
-			{% include 'templates/includes/feedback/feedback.html' %}
-			<hr class="mt-2 mb-5">
-		</div>
-	{% endif %}
-
 	{% if not disable_comments %}
 		<div class="my-5 blog-comments">
 			{% include 'templates/includes/comments/comments.html' %}