diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index 889908031e3..135982d7090 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/erpnext/templates/generators/item/item.html
@@ -3,6 +3,9 @@
 {% block title %} {{ title }} {% endblock %}
 
 {% block breadcrumbs %}
+<div class="item-breadcrumbs small text-muted">
+	{% include "templates/includes/breadcrumbs.html" %}
+</div>
 {% endblock %}
 
 {% block page_content %}
diff --git a/erpnext/templates/generators/item/item_add_to_cart.html b/erpnext/templates/generators/item/item_add_to_cart.html
index 3210e2497f6..f5adbf01e3d 100644
--- a/erpnext/templates/generators/item/item_add_to_cart.html
+++ b/erpnext/templates/generators/item/item_add_to_cart.html
@@ -30,7 +30,7 @@
 			{% endif %}
 		</div>
 		{% endif %}
-		<div class="mt-3">
+		<div class="mt-5 mb-5">
 			{% if product_info.price and (cart_settings.allow_items_not_in_stock or product_info.in_stock) %}
 				<a href="/cart"
 					class="btn btn-light btn-view-in-cart {% if not product_info.qty %}hidden{% endif %}"
@@ -40,8 +40,13 @@
 				</a>
 				<button
 					data-item-code="{{item_code}}"
-					class="btn btn-outline-primary btn-add-to-cart {% if product_info.qty %}hidden{% endif %}"
+					class="btn btn-primary btn-add-to-cart {% if product_info.qty %}hidden{% endif %} w-100"
 				>
+					<span class="mr-2">
+						<svg class="icon icon-md">
+							<use href="#icon-assets"></use>
+						</svg>
+					</span>
 					{{ _("Add to Cart") }}
 				</button>
 			{% endif %}
diff --git a/erpnext/templates/generators/item/item_configure.html b/erpnext/templates/generators/item/item_configure.html
index 73f9ec99b34..b61ac73072d 100644
--- a/erpnext/templates/generators/item/item_configure.html
+++ b/erpnext/templates/generators/item/item_configure.html
@@ -1,9 +1,9 @@
 {% if shopping_cart and shopping_cart.cart_settings.enabled %}
 {% set cart_settings = shopping_cart.cart_settings %}
 
-<div class="mt-3">
+<div class="mt-5 mb-6">
 	{% if cart_settings.enable_variants | int %}
-	<button class="btn btn-primary btn-configure"
+	<button class="btn btn-primary-light btn-configure"
 		data-item-code="{{ doc.name }}"
 		data-item-name="{{ doc.item_name }}"
 	>
diff --git a/erpnext/templates/generators/item/item_configure.js b/erpnext/templates/generators/item/item_configure.js
index 5fd901169f0..276837ea61d 100644
--- a/erpnext/templates/generators/item/item_configure.js
+++ b/erpnext/templates/generators/item/item_configure.js
@@ -187,42 +187,53 @@ class ItemConfigure {
 	}
 
 	get_html_for_item_found({ filtered_items_count, filtered_items, exact_match, product_info }) {
-		const exact_match_message = __('1 exact match.');
-		const one_item = exact_match.length === 1 ?
-			exact_match[0] :
-			filtered_items_count === 1 ?
-				filtered_items[0] : '';
+		const one_item = exact_match.length === 1
+			? exact_match[0]
+			: filtered_items_count === 1
+				? filtered_items[0]
+				: '';
 
 		const item_add_to_cart = one_item ? `
-			<div class="alert alert-success d-flex justify-content-between align-items-center" role="alert">
-				<div>
-					<div>${one_item} ${product_info && product_info.price ? '(' + product_info.price.formatted_price_sales_uom + ')' : ''}</div>
-				</div>
-				<a href data-action="btn_add_to_cart" data-item-code="${one_item}">
-					${__('Add to cart')}
-				</a>
-			</div>
-		`: '';
+			<button data-item-code="${one_item}"
+				class="btn btn-primary btn-add-to-cart w-100"
+				data-action="btn_add_to_cart"
+			>
+				<span class="mr-2">
+					${frappe.utils.icon('assets', 'md')}
+				</span>
+				${__("Add to Cart")}s
+			</button>
+		` : '';
 
 		const items_found = filtered_items_count === 1 ?
 			__('{0} item found.', [filtered_items_count]) :
 			__('{0} items found.', [filtered_items_count]);
 
-		const item_found_status = `
-			<div class="alert alert-warning d-flex justify-content-between align-items-center" role="alert">
-				<span>
-					${exact_match.length === 1 ? '' : items_found}
-					${exact_match.length === 1 ? `<span>${exact_match_message}</span>` : ''}
-				</span>
-				<a href data-action="btn_clear_values">
-					${__('Clear values')}
+		const item_found_status = exact_match.length === 1
+			? `<div class="alert alert-success d-flex justify-content-between align-items-center" role="alert">
+				<div><div>
+					${one_item}
+					${product_info && product_info.price
+						? '(' + product_info.price.formatted_price_sales_uom + ')'
+						: ''
+					}
+				</div></div>
+				<a href data-action="btn_clear_values" data-item-code="${one_item}">
+					${__('Clear Values')}
 				</a>
-			</div>
-		`;
+			</div>`
+			: `<div class="alert alert-warning d-flex justify-content-between align-items-center" role="alert">
+					<span>
+						${items_found}
+					</span>
+					<a href data-action="btn_clear_values">
+						${__('Clear values')}
+					</a>
+			</div>`;
 
 		return `
-			${item_add_to_cart}
 			${item_found_status}
+			${item_add_to_cart}
 		`;
 	}
 
@@ -254,8 +265,8 @@ class ItemConfigure {
 	}
 
 	append_status_area() {
-		this.dialog.$status_area = $('<div class="status-area">');
-		this.dialog.$wrapper.find('.modal-body').prepend(this.dialog.$status_area);
+		this.dialog.$status_area = $('<div class="status-area mt-5">');
+		this.dialog.$wrapper.find('.modal-body').append(this.dialog.$status_area);
 		this.dialog.$wrapper.on('click', '[data-action]', (e) => {
 			e.preventDefault();
 			const $target = $(e.currentTarget);
@@ -263,7 +274,7 @@ class ItemConfigure {
 			const method = this[action];
 			method.call(this, e);
 		});
-		this.dialog.$body.css({ maxHeight: '75vh', overflow: 'auto', overflowX: 'hidden' });
+		this.dialog.$wrapper.addClass('item-configurator-dialog');
 	}
 
 	get_next_attribute_and_values(selected_attributes) {
diff --git a/erpnext/templates/generators/item/item_details.html b/erpnext/templates/generators/item/item_details.html
index 6a85ca50e65..3b775858276 100644
--- a/erpnext/templates/generators/item/item_details.html
+++ b/erpnext/templates/generators/item/item_details.html
@@ -1,8 +1,5 @@
-<div class="col-md-7">
+<div class="col-md-7 product-details">
 <!-- title -->
-<div class="item-breadcrumbs small text-muted">
-	{% include "templates/includes/breadcrumbs.html" %}
-</div>
 <h1 class="product-title" itemprop="name">
 	{{ item_name }}
 </h1>