diff --git a/frappe/public/js/frappe/form/controls/comment.js b/frappe/public/js/frappe/form/controls/comment.js
index a64df56bca..0b73e2c703 100644
--- a/frappe/public/js/frappe/form/controls/comment.js
+++ b/frappe/public/js/frappe/form/controls/comment.js
@@ -6,12 +6,9 @@ Quill.register('modules/mention', Mention, true);
 frappe.ui.form.ControlComment = frappe.ui.form.ControlTextEditor.extend({
 	make_wrapper() {
 		this.comment_wrapper = !this.no_wrapper ? $(`
-				<div class="comment-input-wrapper">
-					<div class="comment-input-header">
-					<span class="small text-muted">${__("Add a comment")}</span>
-					<button class="btn btn-default btn-comment btn-xs pull-right">
-						${__("Comment")}
-					</button>
+			<div class="comment-input-wrapper">
+				<div class="comment-input-header">
+					<span>${__("Add a comment")}</span>
 				</div>
 				<div class="comment-input-container">
 					<div class="frappe-control"></div>
@@ -19,6 +16,9 @@ frappe.ui.form.ControlComment = frappe.ui.form.ControlTextEditor.extend({
 						${__("Ctrl+Enter to add comment")}
 					</div>
 				</div>
+				<button class="btn btn-default btn-comment btn-xs">
+					${__("Comment")}
+				</button>
 			</div>
 		`) : $('<div class="frappe-control"></div>');
 
diff --git a/frappe/public/js/frappe/form/footer/footer.js b/frappe/public/js/frappe/form/footer/footer.js
index 63757be08b..a6d2bb7d13 100644
--- a/frappe/public/js/frappe/form/footer/footer.js
+++ b/frappe/public/js/frappe/form/footer/footer.js
@@ -2,13 +2,15 @@
 // MIT License. See license.txt
 
 import './timeline.js';
+import './new_timeline.js';
 
 frappe.ui.form.Footer = Class.extend({
 	init: function(opts) {
 		var me = this;
 		$.extend(this, opts);
 		this.make();
-		this.make_comments();
+		this.make_comment_box();
+		this.make_timeline();
 		// render-complete
 		$(this.frm.wrapper).on("render_complete", function() {
 			me.refresh();
@@ -20,17 +22,42 @@ frappe.ui.form.Footer = Class.extend({
 			.appendTo(this.parent);
 		this.wrapper.find(".btn-save").click(function() {
 			me.frm.save('Save', null, this);
-		})
-
+		});
 	},
-	make_comments: function() {
-		this.frm.timeline = new frappe.ui.form.Timeline({
-			parent: this.wrapper.find(".form-comments"),
+	make_comment_box: function() {
+		this.frm.comment_box = frappe.ui.form.make_control({
+			parent: this.wrapper.find(".comment-box"),
+			render_input: true,
+			only_input: true,
+			mentions: this.get_names_for_mentions(),
+			df: {
+				fieldtype: 'Comment',
+				fieldname: 'comment'
+			},
+		});
+	},
+	get_names_for_mentions() {
+		let names_for_mentions = Object.keys(frappe.boot.user_info)
+			.filter(user => {
+				return !["Administrator", "Guest"].includes(user)
+					&& frappe.boot.user_info[user].allowed_in_mentions;
+			})
+			.map(user => {
+				return {
+					id: frappe.boot.user_info[user].name,
+					value: frappe.boot.user_info[user].fullname,
+				};
+			});
+		return names_for_mentions;
+	},
+	make_timeline() {
+		this.frm.timeline = new frappe.ui.form.NewTimeline({
+			parent: this.wrapper.find(".timeline"),
 			frm: this.frm
 		});
 	},
 	refresh: function() {
-		if(this.frm.doc.__islocal) {
+		if (this.frm.doc.__islocal) {
 			this.parent.addClass("hide");
 		} else {
 			this.parent.removeClass("hide");
diff --git a/frappe/public/js/frappe/form/templates/form_footer.html b/frappe/public/js/frappe/form/templates/form_footer.html
index 5319950108..968fbffc3b 100644
--- a/frappe/public/js/frappe/form/templates/form_footer.html
+++ b/frappe/public/js/frappe/form/templates/form_footer.html
@@ -1,6 +1,7 @@
 <div class="form-footer">
 	<div class="after-save">
-		<div class="form-comments"></div>
+		<div class="comment-box"></div>
+		<div class="timeline"></div>
 	</div>
 	<div class="pull-right scroll-to-top">
 		<a onclick="frappe.utils.scroll_to(0)"><i class="fa fa-chevron-up text-muted"></i></a>
diff --git a/frappe/public/js/frappe/form/templates/timeline_item.html b/frappe/public/js/frappe/form/templates/timeline_item.html
index 9cb8499771..9254fbc946 100755
--- a/frappe/public/js/frappe/form/templates/timeline_item.html
+++ b/frappe/public/js/frappe/form/templates/timeline_item.html
@@ -60,7 +60,7 @@
 						{% } %}
 					</span>
 						{% if(in_list(["Communication", "Feedback"], data.communication_type)) { %}
-							{% if (frappe.model.can_read(\'Communication\')) { %}
+							{% if (frappe.model.can_read("Communication")) { %}
 							<a href="#Form/Communication/{%= data.name %}"
 								class="text-muted">
 							{% } %}
@@ -83,13 +83,13 @@
 								{%= __(data.delivery_status) %}</span></span>
 
 							{% } else { %}
-								{% if (frappe.model.can_read(\'Communication\')) { %}
+								{% if (frappe.model.can_read("Communication")) { %}
 								<span class="text-muted n-dash">&ndash;</span>
 								{%= __("Details") %}
 								{% } %}
 							{% } %}
 
-							{% if (frappe.model.can_read(\'Communication\')) { %}
+							{% if (frappe.model.can_read("Communication")) { %}
 							</a>
 							{% } %}
 
@@ -106,7 +106,7 @@
 					<span class="text-muted commented-on-small {% if (data.futur_date) { %}timeline-futur{% } %}">
 						&ndash; {%= data.comment_on_small %}</span>
 					<span class="comment-likes hidden-xs"
-						data-liked-by=\'{{ JSON.stringify(data._liked_by) }}\'>
+						data-liked-by="{{ JSON.stringify(data._liked_by) }}">
 						<i class="octicon octicon-heart like-action
 							{% if (!data.liked_by_user) { %}
 								text-extra-muted not-liked
diff --git a/frappe/public/less/quill.less b/frappe/public/less/quill.less
index 98c762bb4a..f806dc2f31 100644
--- a/frappe/public/less/quill.less
+++ b/frappe/public/less/quill.less
@@ -55,7 +55,6 @@
 .ql-bubble .ql-editor {
 	min-height: 100px;
 	max-height: 300px;
-	border: 1px solid @light-border-color;
 	border-radius: 4px;
 }
 
diff --git a/frappe/public/scss/dark.scss b/frappe/public/scss/dark.scss
new file mode 100644
index 0000000000..fa1f51e9a0
--- /dev/null
+++ b/frappe/public/scss/dark.scss
@@ -0,0 +1,39 @@
+[data-theme="dark"] {
+	--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: transparent;
+	--icon-stroke: var(--gray-500);
+
+	// Layout Colors
+	--bg-color: var(--gray-900);
+	--fg-color: var(--gray-800);
+	--fg-hover-color: var(--gray-700);
+	--card-bg: var(--gray-800);
+	--control-bg: var(--gray-700);
+	--modal-bg: var(--gray-700);
+	--toast-bg: var(--modal-bg);
+	--popover-bg: var(--bg-color);
+
+	--sidebar-select-color: var(--gray-800);
+
+	--shadow-inset: var(--fg-color);
+	--border-color: var(--gray-700);
+	--dark-border-color: var(--gray-600);
+	--highlight-color: var(--gray-700);
+}
\ No newline at end of file
diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss
index aae71b8f95..8a3ff744d7 100644
--- a/frappe/public/scss/form.scss
+++ b/frappe/public/scss/form.scss
@@ -21,12 +21,10 @@
 	}
 
 	.section-head {
+		@extend .head-title;
 		width: 100%;
 		padding: var(--padding-md);
 		margin: 0;
-		font-size: var(--text-lg);
-		font-weight: 500;
-		color: var(--heading-color);
 		cursor: pointer;
 
 		.collapse-indicator {
@@ -78,4 +76,25 @@
 	font-weight: 400;
 	background-color: $control-bg;
 	padding: var(--padding-xs) var(--padding-sm);
+}
+
+.comment-box {
+	@include card();
+	padding: 25px var(--padding-xl);
+	.comment-input-header {
+		@extend .head-title;
+		margin-bottom: var(--margin-sm);
+	}
+	.comment-input-container {
+		.frappe-control {
+			margin-bottom: var(--margin-xs);
+		}
+		.ql-editor {
+			background-color: var(--gray-200);
+		}
+	}
+
+	.btn-comment {
+		margin-top: var(--margin-md);
+	}
 }
\ No newline at end of file
diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss
index 9c2452c78e..8e6447624e 100644
--- a/frappe/public/scss/global.scss
+++ b/frappe/public/scss/global.scss
@@ -136,7 +136,7 @@ img {
 }
 
 .btn-primary {
-	background: $brand-gradient;
+	background-color: var(--primary-color);
 }
 
 
@@ -297,4 +297,10 @@ input[type="checkbox"] {
 
 .frappe-card {
 	@include card();
+}
+
+.head-title {
+	font-size: var(--text-lg);
+	font-weight: 500;
+	color: var(--heading-color);
 }
\ No newline at end of file
diff --git a/frappe/public/scss/timeline.scss b/frappe/public/scss/timeline.scss
index 34ba6157fe..eb4f6256c1 100644
--- a/frappe/public/scss/timeline.scss
+++ b/frappe/public/scss/timeline.scss
@@ -10,7 +10,7 @@ $threshold: 50px;
 		top: 0;
 		height: 100%;
 		position: absolute;
-		border-left: 1px solid var(--gray-300);
+		border-left: 1px solid var(--dark-border-color);
 	}
 
 	.timeline-item {
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index fab668b715..5d0b98d08a 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -10,6 +10,7 @@ $gray-100: #F4F5F6;
 $gray-50 : #F9FAFA;
 
 $primary: #2490EF;
+$danger: #E24C4C;
 $black: #000;
 $white: #fff;
 $light: $gray-50 !default;
@@ -163,6 +164,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	// Layout Colors
 	--bg-color: var(--gray-50);
 	--fg-color: white;
+	--fg-hover-color: var(--gray-100);
 	--card-bg: var(--fg-color);
 	--control-bg: var(--gray-100);
 	--modal-bg: white;
@@ -173,6 +175,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 
 	--shadow-inset: var(--gray-100);
 	--border-color: var(--gray-100);
+	--dark-border-color: var(--gray-300);
 	--highlight-color: var(--gray-50);
 
 	// Border Sizes
@@ -180,6 +183,8 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--border-radius: 6px;
 	--border-radius-md: 8px;
 	--border-radius-lg: 12px;
+
+	--primary-color: #{$primary};
 }
 
 html, body {
@@ -203,17 +208,27 @@ $container-max-widths: (
 
 $theme-colors: (
   "primary": $primary,
-  "danger": #ff4136
+  "danger": $danger
 );
 
-$brand-gradient: linear-gradient(180deg, #2C9AF1 0%, var(--blue-500) 100%);
-
 $navbar-height: 60px;
 $page-head-height: 68px;
 
-$body-color: $gray-700 !default;
+$body-color: var(--text-light);
 $input-placeholder-color: var(--text-light);
+$component-active-color: var(--fg-color);
+$modal-content-bg: var(--modal-bg);
 
+// dropdown
+$dropdown-bg: var(--fg-color);
+$dropdown-border-color: var(--dark-border-color);
+$dropdown-link-color: var(--text-color);
+$dropdown-link-hover-color: var(--text-color);
+$dropdown-link-hover-bg: var(--fg-hover-color);
+$dropdown-link-disabled-color: var(--gray-600);
+$dropdown-header-color: var(--gray-600);
+
+// button
 $btn-padding-y-lg: 1rem !default;
 $btn-padding-x-lg: 2.5rem !default;
 $btn-font-size-lg: 1.125rem !default;
@@ -233,44 +248,6 @@ $dropdown-border-radius: 0.375rem !default;
 $dropdown-item-padding-y: 0.5rem !default;
 $dropdown-item-padding-x: 0.5rem !default;
 
-[data-theme="dark"] {
-	--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: transparent;
-	--icon-stroke: var(--gray-500);
-
-	// 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);
-	--popover-bg: var(--bg-color);
-
-	--sidebar-select-color: var(--gray-800);
-
-	--shadow-inset: var(--fg-color);
-	--border-color: var(--gray-600);
-	--highlight-color: var(--gray-700);
-}
-
 $spacer: 14px;
 $grid-breakpoints: (
   xs: 0,
@@ -281,6 +258,7 @@ $grid-breakpoints: (
   2xl: 1440px
 ) !default;
 
+@import 'dark';
 @import 'typography';
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';