diff --git a/frappe/public/js/frappe/form/controls/color.js b/frappe/public/js/frappe/form/controls/color.js
index 7890ea755c..bf04581abd 100644
--- a/frappe/public/js/frappe/form/controls/color.js
+++ b/frappe/public/js/frappe/form/controls/color.js
@@ -76,7 +76,7 @@ frappe.ui.form.ControlColor = frappe.ui.form.ControlData.extend({
 	refresh() {
 		this._super();
 		let color = this.get_color();
-		if (this.picker.color !== color) {
+		if (this.picker && this.picker.color !== color) {
 			this.picker.color = color;
 			this.picker.refresh();
 		}
diff --git a/frappe/public/js/frappe/form/footer/version_timeline_content_builder.js b/frappe/public/js/frappe/form/footer/version_timeline_content_builder.js
index 0f57998475..a563286413 100644
--- a/frappe/public/js/frappe/form/footer/version_timeline_content_builder.js
+++ b/frappe/public/js/frappe/form/footer/version_timeline_content_builder.js
@@ -144,6 +144,27 @@ function get_version_timeline_content(version_doc, frm) {
 
 
 function get_version_comment(version_doc, text) {
+	// TODO: Replace with a better solution
+	if (text.includes("<a")) {
+		// if text already has linked content in it
+		// then just add a version link to unlinked content
+		let version_comment = "";
+		let unlinked_content = "";
+
+		Array.from($(text)).forEach(element => {
+			if ($(element).is('a')) {
+				version_comment += unlinked_content ? frappe.utils.get_form_link('Version', version_doc.name, true, unlinked_content) : "";
+				unlinked_content = "";
+				version_comment += element.outerHTML;
+			} else {
+				unlinked_content += element.outerHTML || element.textContent;
+			}
+		});
+		if (unlinked_content) {
+			version_comment += frappe.utils.get_form_link('Version', version_doc.name, true, unlinked_content);
+		}
+		return version_comment;
+	}
 	return frappe.utils.get_form_link('Version', version_doc.name, true, text);
 }
 
@@ -164,4 +185,5 @@ function get_user_link(doc) {
 	return frappe.utils.get_form_link('User', user, true, user_display_text);
 }
 
-export { get_version_timeline_content };
\ No newline at end of file
+export { get_version_timeline_content };
+
diff --git a/frappe/public/js/frappe/form/formatters.js b/frappe/public/js/frappe/form/formatters.js
index 4578cf2ded..f792d5b173 100644
--- a/frappe/public/js/frappe/form/formatters.js
+++ b/frappe/public/js/frappe/form/formatters.js
@@ -293,6 +293,12 @@ frappe.form.formatters = {
 			return frappe.format(value, link_field, options, row);
 		});
 		return formatted_values.join(', ');
+	},
+	Color: (value) => {
+		return `<div>
+			<div class="selected-color" style="background-color: ${value}"></div>
+			<span class="color-value">${value}</span>
+		</div>`;
 	}
 }
 
diff --git a/frappe/public/js/frappe/ui/filters/filter.js b/frappe/public/js/frappe/ui/filters/filter.js
index 945115af82..b2b2b623e2 100644
--- a/frappe/public/js/frappe/ui/filters/filter.js
+++ b/frappe/public/js/frappe/ui/filters/filter.js
@@ -495,6 +495,7 @@ frappe.ui.filter_utils = {
 				'Dynamic Link',
 				'Read Only',
 				'Assign',
+				'Color',
 			].indexOf(df.fieldtype) != -1
 		) {
 			df.fieldtype = 'Data';
diff --git a/frappe/public/scss/common/color_picker.scss b/frappe/public/scss/common/color_picker.scss
index 627ab12a2e..7ab9b0c504 100644
--- a/frappe/public/scss/common/color_picker.scss
+++ b/frappe/public/scss/common/color_picker.scss
@@ -92,7 +92,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Color']  {
+.frappe-control[data-fieldtype='Color'] {
 	input {
 		padding-left: 40px;
 	}
@@ -104,11 +104,20 @@
 		background-color: red;
 		position: absolute;
 		top: calc(50% + 1px);
-		left: 5px;
+		left: 8px;
 		content: ' ';
 		&.no-value {
 			background: url('/assets/frappe/images/color-circle.png');
 			background-size: contain;
 		}
 	}
-}
\ No newline at end of file
+	.like-disabled-input {
+		.color-value {
+			padding-left: 25px;
+		}
+		.selected-color {
+			top: 20%;
+			cursor: default;
+		}
+	}
+}