diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index b0990295105..14ec2b0c152 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -526,8 +526,7 @@
 
 					> .checkout-btn {
 						@extend .primary-action;
-						background-color: var(--blue-200);
-						color: white;
+						background-color: var(--control-bg);
 					}
 
 					> .edit-cart-btn {
@@ -769,8 +768,8 @@
 
 		.submit-order-btn {
 			@extend .primary-action;
-			background-color: var(--primary-color);
-			color: white;
+			background-color: var(--btn-primary);
+			color: var(--neutral);
 		}
 
 		.section-label {
diff --git a/erpnext/selling/page/point_of_sale/pos_item_cart.js b/erpnext/selling/page/point_of_sale/pos_item_cart.js
index d51f53981d3..a3f297b764f 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_cart.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_cart.js
@@ -184,7 +184,7 @@ erpnext.PointOfSale.ItemCart = class {
 		});
 
 		this.$component.on("click", ".checkout-btn", async function () {
-			if ($(this).attr("style").indexOf("--primary-color") == -1) return;
+			if ($(this).attr("style").indexOf("--btn-primary") == -1) return;
 
 			await me.events.checkout();
 			me.toggle_checkout_btn(false);
@@ -702,12 +702,14 @@ erpnext.PointOfSale.ItemCart = class {
 		if (toggle) {
 			this.$add_discount_elem.css("display", "flex");
 			this.$cart_container.find(".checkout-btn").css({
-				"background-color": "var(--primary-color)",
+				"background-color": "var(--btn-primary)",
+				color: "var(--neutral)",
 			});
 		} else {
 			this.$add_discount_elem.css("display", "none");
 			this.$cart_container.find(".checkout-btn").css({
-				"background-color": "var(--gray-200)",
+				"background-color": "var(--control-bg)",
+				color: "",
 			});
 		}
 	}