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/scss/sidebar.scss b/frappe/public/scss/sidebar.scss
index 6247088bfb..ee5c7f007b 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;