diff --git a/erpnext/public/images/ui-states/cart-empty-state.png b/erpnext/public/images/ui-states/cart-empty-state.png
new file mode 100644
index 0000000000..e1ead0e175
Binary files /dev/null and b/erpnext/public/images/ui-states/cart-empty-state.png differ
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 16a19ad270..7bce6abafa 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -5,6 +5,19 @@ body.product-page {
 	background: var(--gray-50);
 }
 
+
+.item-breadcrumbs {
+	.breadcrumb-container {
+		ol.breadcrumb {
+			background-color: var(--gray-50) !important;
+		}
+
+		a {
+			color: var(--gray-900);
+		}
+	}
+}
+
 .carousel-control {
 	height: 42px;
 	width: 42px;
@@ -77,6 +90,18 @@ body.product-page {
 		margin-top: 1.25rem;
 	}
 
+	.no-image {
+		@include flex(flex, center, center, null);
+		height: 200px;
+		margin: 0 auto;
+		margin-top: var(--margin-xl);
+		background: var(--gray-100);
+		width: 80%;
+		border-radius: var(--border-radius);
+		font-size: 2rem;
+		color: var(--gray-500);
+	}
+
 	.product-title {
 		font-size: 14px;
 		color: var(--gray-800);
@@ -98,7 +123,7 @@ body.product-page {
 
 	.product-category {
 		font-size: 13px;
-		color: var(--gray-600);
+		color: var(--text-muted);
 		margin: var(--margin-sm) 0;
 	}
 
@@ -159,6 +184,15 @@ body.product-page {
 	@include card($padding: var(--padding-md));
 	min-height: 70vh;
 
+	.product-details {
+		max-width: 40%;
+		margin-left: -30px;
+
+		.btn-add-to-cart {
+			font-size: var(--text-base);
+		}
+	}
+
 	.product-title {
 		font-size: 24px;
 		font-weight: 600;
@@ -166,7 +200,7 @@ body.product-page {
 	}
 
 	.product-code {
-		color: var(--gray-600);
+		color: var(--text-muted);
 		font-size: 13px;
 	}
 
@@ -180,15 +214,15 @@ body.product-page {
 		padding: 15px;
 
 		@include media-breakpoint-between(xs, md) {
-			height: 320px;
-			width: 320px;
+			height: 300px;
+			width: 300px;
 		}
 
 		@include media-breakpoint-up(lg) {
-			height: 430px;
-			width: 420px;
+			height: 350px;
+			width: 350px;
 		}
-	 	
+
 	 	img {
 			object-fit: contain;
 		}
@@ -202,13 +236,13 @@ body.product-page {
 		@include media-breakpoint-up(lg) {
 			max-height: 430px;
 		}
-	 	
+
 		overflow: scroll;
 	}
 
 	.item-slideshow-image {
 		height: 4rem;
-		width: 4rem;
+		width: 6rem;
 		object-fit: contain;
 		padding: 0.5rem;
 		border: 1px solid var(--table-border-color);
@@ -227,25 +261,57 @@ body.product-page {
 			font-weight: 600;
 
 			.formatted-price {
-				color: var(--gray-600);
-				font-size: 14px;
+				color: var(--text-muted);
+				font-size: var(--text-base);
 			}
 		}
 
 		.no-stock {
-			font-size: 14px;
+			font-size: var(--text-base);
 		}
 	}
+}
 
-	.item-breadcrumbs {
-		.breadcrumb-container {
-			margin: 0px;
-			padding: 0px;
+.item-configurator-dialog {
+	.modal-header {
+		padding: var(--padding-md) var(--padding-xl);
+	}
 
-			a {
-				color: $text-muted;
+	.modal-body {
+		padding: 0 var(--padding-xl);
+		padding-bottom: var(--padding-xl);
+
+		.status-area {
+			.alert {
+				padding: var(--padding-xs) var(--padding-sm);
+				font-size: var(--text-sm);
 			}
 		}
+
+		.form-layout {
+			max-height: 50vh;
+			overflow-y: auto;
+		}
+
+		.section-body {
+			.form-column {
+				.form-group {
+					.control-label {
+						font-size: var(--text-md);
+						color: var(--gray-700);
+					}
+
+					.help-box {
+						margin-top: 2px;
+						font-size: var(--text-sm);
+					}
+				}
+			}
+		}
+
+		svg {
+			display: none;
+		}
 	}
 }
 
@@ -257,4 +323,168 @@ body.product-page {
 	.carousel-inner.rounded-carousel {
 		border-radius: $card-border-radius;
 	}
-}
\ No newline at end of file
+}
+
+.cart-icon {
+	.cart-badge {
+		position: relative;
+		top: -10px;
+		left: -12px;
+		background: var(--red-600);
+		width: 16px;
+		align-items: center;
+		height: 16px;
+		font-size: 10px;
+		border-radius: 50%;
+	}
+}
+
+
+#page-cart {
+	.shopping-cart-header {
+		font-weight: bold;
+	}
+
+	.cart-container {
+		color: var(--text-color);
+
+		.frappe-card {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+
+		.cart-items-header {
+			font-weight: 600;
+		}
+
+		.cart-table {
+			th, tr, td {
+				border-color: var(--border-color);
+				border-width: 1px;
+			}
+
+			th {
+				font-weight: normal;
+				font-size: 13px;
+				color: var(--text-muted);
+				padding: var(--padding-sm) 0;
+			}
+
+			td {
+				padding: var(--padding-sm) 0;
+				color: var(--text-color);
+			}
+
+			.cart-items {
+				.item-title {
+					font-size: var(--text-base);
+					font-weight: 500;
+					color: var(--text-color);
+				}
+
+				.item-subtitle {
+					color: var(--text-muted);
+					font-size: var(--text-md);
+				}
+
+				.item-subtotal {
+					font-size: var(--text-base);
+					font-weight: 500;
+				}
+
+				.item-rate {
+					font-size: var(--text-md);
+					color: var(--text-muted);
+				}
+
+				textarea {
+					width: 40%;
+				}
+			}
+
+			.cart-tax-items {
+				.item-grand-total {
+					font-size: 16px;
+					font-weight: 600;
+					color: var(--text-color);
+				}
+			}
+		}
+
+		.cart-addresses {
+			hr {
+				border-color: var(--border-color);
+			}
+		}
+
+		.number-spinner {
+			width: 75%;
+			.cart-btn {
+				border: none;
+				background: var(--gray-100);
+				box-shadow: none;
+				height: 28px;
+				align-items: center;
+				display: flex;
+			}
+
+			.cart-qty {
+				height: 28px;
+				font-size: var(--text-md);
+			}
+		}
+
+		.place-order-container {
+			.btn-place-order {
+				width: 62%;
+			}
+		}
+	}
+}
+
+.cart-empty.frappe-card {
+	min-height: 76vh;
+	@include flex(flex, center, center, column);
+
+	.cart-empty-message {
+		font-size: 18px;
+		color: var(--text-color);
+		font-weight: bold;
+	}
+}
+
+.address-card {
+	.card-title {
+		font-size: var(--text-base);
+		font-weight: 500;
+	}
+
+	.card-text {
+		font-size: var(--text-md);
+		color: var(--gray-700);
+	}
+
+	.card-link {
+		font-size: var(--text-md);
+
+		svg use {
+			stroke: var(--blue-500);
+		}
+	}
+
+	.btn-change-address {
+		color: var(--blue-500);
+		box-shadow: none;
+		border: 1px solid var(--blue-500);
+	}
+}
+
+.modal .address-card {
+	.card-body {
+		padding: var(--padding-sm);
+		border-radius: var(--border-radius);
+		border: 1px solid var(--dark-border-color);
+	}
+}
+
diff --git a/erpnext/shopping_cart/cart.py b/erpnext/shopping_cart/cart.py
index c2549fe7dd..fa9dcedc64 100644
--- a/erpnext/shopping_cart/cart.py
+++ b/erpnext/shopping_cart/cart.py
@@ -42,14 +42,30 @@ def get_cart_quotation(doc=None):
 
 	return {
 		"doc": decorate_quotation_doc(doc),
-		"shipping_addresses": [{"name": address.name, "title": address.address_title, "display": address.display}
-			for address in addresses if address.address_type == "Shipping"],
-		"billing_addresses": [{"name": address.name, "title": address.address_title, "display": address.display}
-			for address in addresses if address.address_type == "Billing"],
+		"shipping_addresses": get_shipping_addresses(party),
+		"billing_addresses": get_billing_addresses(party),
 		"shipping_rules": get_applicable_shipping_rules(party),
 		"cart_settings": frappe.get_cached_doc("Shopping Cart Settings")
 	}
 
+@frappe.whitelist()
+def get_shipping_addresses(party=None):
+	if not party:
+		party = get_party()
+	addresses = get_address_docs(party=party)
+	return [{"name": address.name, "title": address.address_title, "display": address.display}
+		for address in addresses if address.address_type == "Shipping"
+	]
+
+@frappe.whitelist()
+def get_billing_addresses(party=None):
+	if not party:
+		party = get_party()
+	addresses = get_address_docs(party=party)
+	return [{"name": address.name, "title": address.address_title, "display": address.display}
+		for address in addresses if address.address_type == "Billing"
+	]
+
 @frappe.whitelist()
 def place_order():
 	quotation = _get_cart_quotation()
@@ -203,27 +219,33 @@ def get_terms_and_conditions(terms_name):
 @frappe.whitelist()
 def update_cart_address(address_type, address_name):
 	quotation = _get_cart_quotation()
-	address_display = get_address_display(frappe.get_doc("Address", address_name).as_dict())
+	address_doc = frappe.get_doc("Address", address_name).as_dict()
+	address_display = get_address_display(address_doc)
 
 	if address_type.lower() == "billing":
 		quotation.customer_address = address_name
 		quotation.address_display = address_display
 		quotation.shipping_address_name == quotation.shipping_address_name or address_name
+		address_doc = next((doc for doc in get_billing_addresses() if doc["name"] == address_name), None)
 	elif address_type.lower() == "shipping":
 		quotation.shipping_address_name = address_name
 		quotation.shipping_address = address_display
 		quotation.customer_address == quotation.customer_address or address_name
-
+		address_doc = next((doc for doc in get_shipping_addresses() if doc["name"] == address_name), None)
 	apply_cart_settings(quotation=quotation)
 
 	quotation.flags.ignore_permissions = True
 	quotation.save()
 
 	context = get_cart_quotation(quotation)
+	context['address'] = address_doc
+
 	return {
 		"taxes": frappe.render_template("templates/includes/order/order_taxes.html",
 			context),
-		}
+		"address": frappe.render_template("templates/includes/cart/address_card.html",
+			context)
+	}
 
 def guess_territory():
 	territory = None
diff --git a/erpnext/templates/includes/cart.js b/erpnext/templates/includes/cart.js
index c6dfd35e29..0de02676af 100644
--- a/erpnext/templates/includes/cart.js
+++ b/erpnext/templates/includes/cart.js
@@ -14,7 +14,7 @@ $.extend(shopping_cart, {
 	},
 
 	bind_events: function() {
-		shopping_cart.bind_address_select();
+		shopping_cart.bind_address_picker_dialog();
 		shopping_cart.bind_place_order();
 		shopping_cart.bind_request_quotation();
 		shopping_cart.bind_change_qty();
@@ -23,28 +23,76 @@ $.extend(shopping_cart, {
 		shopping_cart.bind_coupon_code();
 	},
 
-	bind_address_select: function() {
-		$(".cart-addresses").on('click', '.address-card', function(e) {
-			const $card = $(e.currentTarget);
-			const address_type = $card.closest('[data-address-type]').attr('data-address-type');
-			const address_name = $card.closest('[data-address-name]').attr('data-address-name');
-			return frappe.call({
-				type: "POST",
-				method: "erpnext.shopping_cart.cart.update_cart_address",
-				freeze: true,
-				args: {
-					address_type,
-					address_name
-				},
-				callback: function(r) {
-					if(!r.exc) {
-						$(".cart-tax-items").html(r.message.taxes);
-					}
-				}
-			});
+	bind_address_picker_dialog: function() {
+		const d = this.get_update_address_dialog();
+		this.parent.find('.btn-change-address').on('click', (e) => {
+			const type = $(e.currentTarget).parents('.address-container').attr('data-address-type');
+			$(d.get_field('address_picker').wrapper).html(
+				this.get_address_template(type)
+			);
+			d.show();
 		});
 	},
 
+	get_update_address_dialog() {
+		return new frappe.ui.Dialog({
+			title: "Select Address",
+			fields: [{
+				'fieldtype': 'HTML',
+				'fieldname': 'address_picker',
+			}],
+			primary_action_label: __('Set Address'),
+			primary_action: () => {
+				const $card = d.$wrapper.find('.address-card.active');
+				const address_type = $card.closest('[data-address-type]').attr('data-address-type');
+				const address_name = $card.closest('[data-address-name]').attr('data-address-name');
+				frappe.call({
+					type: "POST",
+					method: "erpnext.shopping_cart.cart.update_cart_address",
+					freeze: true,
+					args: {
+						address_type,
+						address_name
+					},
+					callback: function(r) {
+						d.hide();
+						if(!r.exc) {
+							$(".cart-tax-items").html(r.message.taxes);
+							shopping_cart.parent.find(
+								`.address-container[data-address-type="${address_type}"]`
+							).html(r.message.address);
+						}
+					}
+				});
+			}
+		});
+	},
+
+	get_address_template(type) {
+		return {
+			shipping: `<div class="mb-3" data-section="shipping-address">
+				<div class="row no-gutters" data-fieldname="shipping_address_name">
+					{% for address in shipping_addresses %}
+						<div class="mr-3 mb-3 w-100" data-address-name="{{address.name}}" data-address-type="shipping"
+							{% if doc.shipping_address_name == address.name %} data-active {% endif %}>
+							{% include "templates/includes/cart/address_picker_card.html" %}
+						</div>
+					{% endfor %}
+				</div>
+			</div>`,
+			billing: `<div class="mb-3" data-section="billing-address">
+				<div class="row no-gutters" data-fieldname="customer_address">
+					{% for address in billing_addresses %}
+						<div class="mr-3 mb-3 w-100" data-address-name="{{address.name}}" data-address-type="billing"
+							{% if doc.shipping_address_name == address.name %} data-active {% endif %}>
+							{% include "templates/includes/cart/address_picker_card.html" %}
+						</div>
+					{% endfor %}
+				</div>
+			</div>`,
+		}[type];
+	},
+
 	bind_place_order: function() {
 		$(".btn-place-order").on("click", function() {
 			shopping_cart.place_order(this);
@@ -221,6 +269,7 @@ $.extend(shopping_cart, {
 
 frappe.ready(function() {
 	$(".cart-icon").hide();
+	shopping_cart.parent = $(".cart-container");
 	shopping_cart.bind_events();
 });
 
diff --git a/erpnext/templates/includes/cart/address_card.html b/erpnext/templates/includes/cart/address_card.html
index 646210e65f..667144bd87 100644
--- a/erpnext/templates/includes/cart/address_card.html
+++ b/erpnext/templates/includes/cart/address_card.html
@@ -1,12 +1,17 @@
 <div class="card address-card h-100">
-	<div class="check" style="position: absolute; right: 15px; top: 15px;">
-		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+	<div class="btn btn-sm btn-default btn-change-address" style="position: absolute; right: 0; top: 0;">
+		{{ _('Change') }}
 	</div>
-	<div class="card-body">
-		<h5 class="card-title">{{ address.title }}</h5>
-		<p class="card-text text-muted">
+	<div class="card-body p-0">
+		<div class="card-title">{{ address.title }}</div>
+		<div class="card-text mb-2">
 			{{ address.display }}
-		</p>
-		<a href="/addresses?name={{address.name}}" class="card-link">{{ _('Edit') }}</a>
+		</div>
+		<a href="/addresses?name={{address.name}}" class="card-link">
+			<svg class="icon icon-sm">
+				<use href="#icon-edit"></use>
+			</svg>
+			{{ _('Edit') }}
+		</a>
 	</div>
 </div>
diff --git a/erpnext/templates/includes/cart/address_picker_card.html b/erpnext/templates/includes/cart/address_picker_card.html
new file mode 100644
index 0000000000..2334ea2955
--- /dev/null
+++ b/erpnext/templates/includes/cart/address_picker_card.html
@@ -0,0 +1,12 @@
+<div class="card address-card h-100">
+	<div class="check" style="position: absolute; right: 15px; top: 15px;">
+		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+	</div>
+	<div class="card-body">
+		<h5 class="card-title">{{ address.title }}</h5>
+		<p class="card-text text-muted">
+			{{ address.display }}
+		</p>
+		<a href="/addresses?name={{address.name}}" class="card-link">{{ _('Edit') }}</a>
+	</div>
+</div>
\ No newline at end of file
diff --git a/erpnext/templates/includes/cart/cart_address.html b/erpnext/templates/includes/cart/cart_address.html
index aa25c885fe..3c8267c43d 100644
--- a/erpnext/templates/includes/cart/cart_address.html
+++ b/erpnext/templates/includes/cart/cart_address.html
@@ -14,31 +14,39 @@
 		</div>
 </div>
 {% endif %}
-<div class="mb-3" data-section="shipping-address">
-	<h6 class="text-uppercase">{{ _("Shipping Address") }}</h6>
+<div class="mb-3 frappe-card p-5" data-section="shipping-address">
+	<h6>{{ _("Shipping Address") }}</h6>
+	<hr>
+	{% for address in shipping_addresses %}
+	{% if doc.shipping_address_name == address.name %}
 	<div class="row no-gutters" data-fieldname="shipping_address_name">
-		{% for address in shipping_addresses %}
-			<div class="mr-3 mb-3 w-25" data-address-name="{{address.name}}" data-address-type="shipping" {% if doc.shipping_address_name == address.name %} data-active {% endif %}>
-				{% include "templates/includes/cart/address_card.html" %}
-			</div>
-		{% endfor %}
+		<div class="w-100 address-container" data-address-name="{{address.name}}" data-address-type="shipping" data-active>
+			{% include "templates/includes/cart/address_card.html" %}
+		</div>
 	</div>
+	{% endif %}
+	{% endfor %}
 </div>
-<div class="mb-3" data-section="billing-address">
-	<h6 class="text-uppercase">{{ _("Billing Address") }}</h6>
-	<div class="row no-gutters" data-fieldname="customer_address">
-		{% for address in billing_addresses %}
-			<div class="mr-3 mb-3 w-25" data-address-name="{{address.name}}" data-address-type="billing" {% if doc.customer_address == address.name %} data-active {% endif %}>
-				{% include "templates/includes/cart/address_card.html" %}
-			</div>
-		{% endfor %}
-	</div>
+<div class="checkbox ml-1 mb-2">
+	<label for="input_same_billing">
+		<input type="checkbox" id="input_same_billing" checked>
+		<span class="label-area">{{ _('Billing Address is same as Shipping Address') }}</span>
+	</label>
 </div>
-<div class="custom-control custom-checkbox">
-	<input type="checkbox" class="custom-control-input" id="input_same_billing" checked>
-	<label class="custom-control-label" for="input_same_billing">{{ _('Billing Address is same as Shipping Address') }}</label>
+<div class="mb-3 frappe-card p-5" data-section="billing-address">
+	<h6>{{ _("Billing Address") }}</h6>
+	<hr>
+	{% for address in billing_addresses %}
+		{% if doc.customer_address == address.name %}
+		<div class="row no-gutters" data-fieldname="customer_address">
+			<div class="w-100 address-container" data-address-name="{{address.name}}" data-address-type="billing" data-active>
+					{% include "templates/includes/cart/address_card.html" %}
+				</div>
+		</div>
+		{% endif %}
+	{% endfor %}
 </div>
-<button class="btn btn-outline-primary btn-sm mt-3 btn-new-address">{{ _("Add a new address") }}</button>
+<button class="btn btn-outline-primary btn-sm mt-1 btn-new-address bg-white">{{ _("Add a new address") }}</button>
 
 <script>
 frappe.ready(() => {
@@ -55,6 +63,7 @@ frappe.ready(() => {
 	});
 
 	$('.btn-new-address').click(() => {
+		console.log('clicked');
 		const d = new frappe.ui.Dialog({
 			title: __('New Address'),
 			fields: [
@@ -168,5 +177,12 @@ frappe.ready(() => {
 	function toggle_billing_address_section(flag) {
 		$('[data-section="billing-address"]').toggle(flag);
 	}
+
+	$('.btn-change-address').click(() => {
+		// const d = new frappe.ui.Dialog({
+		// })
+
+		// d.show();
+	});
 });
 </script>
diff --git a/erpnext/templates/includes/cart/cart_address_picker.html b/erpnext/templates/includes/cart/cart_address_picker.html
new file mode 100644
index 0000000000..72cc5f5142
--- /dev/null
+++ b/erpnext/templates/includes/cart/cart_address_picker.html
@@ -0,0 +1,4 @@
+<div class="mb-3 frappe-card p-5" data-section="shipping-address">
+	<h6>{{ _("Shipping Address") }}</h6>
+</div>
+
diff --git a/erpnext/templates/includes/cart/cart_items.html b/erpnext/templates/includes/cart/cart_items.html
index ca5744bebb..75441c42bc 100644
--- a/erpnext/templates/includes/cart/cart_items.html
+++ b/erpnext/templates/includes/cart/cart_items.html
@@ -1,15 +1,15 @@
 {% for d in doc.items %}
 <tr data-name="{{ d.name }}">
 	<td>
-		<div class="font-weight-bold">
+		<div class="item-title mb-1">
 			{{ d.item_name }}
 		</div>
-		<div>
+		<div class="item-subtitle">
 			{{ d.item_code }}
 		</div>
 		{%- set variant_of = frappe.db.get_value('Item', d.item_code, 'variant_of') %}
 		{% if variant_of %}
-		<span class="text-muted">
+		<span class="item-subtitle">
 			{{ _('Variant of') }} <a href="{{frappe.db.get_value('Item', variant_of, 'route')}}">{{ variant_of }}</a>
 		</span>
 		{% endif %}
@@ -20,20 +20,20 @@
 	<td class="text-right">
 		<div class="input-group number-spinner">
 			<span class="input-group-prepend d-none d-sm-inline-block">
-				<button class="btn btn-outline-secondary cart-btn" data-dir="dwn">–</button>
+				<button class="btn cart-btn" data-dir="dwn">–</button>
 			</span>
-			<input class="form-control text-right cart-qty border-secondary" value="{{ d.get_formatted('qty') }}" data-item-code="{{ d.item_code }}">
+			<input class="form-control text-center cart-qty" value="{{ d.get_formatted('qty') }}" data-item-code="{{ d.item_code }}">
 			<span class="input-group-append d-none d-sm-inline-block">
-				<button class="btn btn-outline-secondary cart-btn" data-dir="up">+</button>
+				<button class="btn cart-btn" data-dir="up">+</button>
 			</span>
 		</div>
 	</td>
 	{% if cart_settings.enable_checkout %}
-	<td class="text-right">
+	<td class="text-right item-subtotal">
 		<div>
 			{{ d.get_formatted('amount') }}
 		</div>
-		<span class="text-muted">
+		<span class="item-rate">
 			{{ _('Rate:') }} {{ d.get_formatted('rate') }}
 		</span>
 	</td>
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 74c84ba27c..0adfbc9dfd 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -90,6 +90,10 @@
 	<div class="card {{ align_items_class }}">
 		{% if image %}
 		<img class="card-img" src="{{ image }}" alt="{{ title }}">
+		{% else %}
+		<div class="card-img-top no-image">
+			{{ frappe.utils.get_abbr(title) }}
+		</div>
 		{% endif %}
 		{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
 	</div>
diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html
index 4daf0e74e0..133d99e5eb 100644
--- a/erpnext/templates/includes/navbar/navbar_items.html
+++ b/erpnext/templates/includes/navbar/navbar_items.html
@@ -2,9 +2,11 @@
 
 {% block navbar_right_extension %}
 	<li class="shopping-cart cart-icon hidden">
-		<a href="/cart" class="nav-link">
-			{{ _("Cart") }}
-			<span class="badge badge-primary" id="cart-count"></span>
+		<a class="nav-link" href="/cart">
+			<svg class="icon icon-lg">
+				<use href="#icon-assets"></use>
+			</svg>
+			<span class="badge badge-primary cart-badge" id="cart-count"></span>
 		</a>
 	 </li>
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/includes/order/order_taxes.html b/erpnext/templates/includes/order/order_taxes.html
index ebec838d03..d2c458e0a4 100644
--- a/erpnext/templates/includes/order/order_taxes.html
+++ b/erpnext/templates/includes/order/order_taxes.html
@@ -29,12 +29,12 @@
 		{{ _("Discount") }}
 	</th>
 	<th class="text-right tot_quotation_discount">
-        {% set tot_quotation_discount = [] %}
-        {%- for item in doc.items -%}
-        {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
-            * item.discount_percentage) / 100)) %}{% endif %}
-         {% endfor %}
-         {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
+		{% set tot_quotation_discount = [] %}
+		{%- for item in doc.items -%}
+		{% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
+			* item.discount_percentage) / 100)) %}{% endif %}
+		{% endfor %}
+		{{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
 	</th>
 </tr>
 {% endif %}
@@ -47,51 +47,52 @@
 		{{ _("Total Amount") }}
 	</th>
 	<th class="text-right">
-        <span>
-        {% set total_amount = [] %}
-        {%- for item in doc.items -%}
-        {% if total_amount.append((item.price_list_rate * item.qty)) %}{% endif %}
-        {% endfor %}
-        {{ frappe.utils.fmt_money((total_amount | sum),currency=doc.currency) }}
-        </span>
+		<span>
+		{% set total_amount = [] %}
+		{%- for item in doc.items -%}
+		{% if total_amount.append((item.price_list_rate * item.qty)) %}{% endif %}
+		{% endfor %}
+		{{ frappe.utils.fmt_money((total_amount | sum),currency=doc.currency) }}
+		</span>
 	</th>
 </tr>
 <tr>
-    <th class="text-right" colspan="2">
-        {{ _("Applied Coupon Code") }}
-    </th>
-    <th class="text-right">
-        <span>
-        {%- for row in frappe.get_all(doctype="Coupon Code",
-        fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
-            <span>{{ row.coupon_code }}</span>
-        {% endfor %}
-        </span>
-    </th>
+	<th class="text-right" colspan="2">
+		{{ _("Applied Coupon Code") }}
+	</th>
+	<th class="text-right">
+		<span>
+		{%- for row in frappe.get_all(doctype="Coupon Code",
+		fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
+			<span>{{ row.coupon_code }}</span>
+		{% endfor %}
+		</span>
+	</th>
 </tr>
 <tr>
-    <th class="text-right" colspan="2">
-        {{ _("Discount") }}
-    </th>
-    <th class="text-right">
-        <span>
-        {% set tot_SO_discount = [] %}
-        {%- for item in doc.items -%}
-        {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
-            * item.discount_percentage) / 100)) %}{% endif %}
-        {% endfor %}
-        {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
-        </span>
-    </th>
+	<th class="text-right" colspan="2">
+		{{ _("Discount") }}
+	</th>
+	<th class="text-right">
+		<span>
+		{% set tot_SO_discount = [] %}
+		{%- for item in doc.items -%}
+		{% if tot_SO_discount.append((((item.price_list_rate * item.qty)
+			* item.discount_percentage) / 100)) %}{% endif %}
+		{% endfor %}
+		{{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
+		</span>
+	</th>
 </tr>
 {% endif %}
 {% endif %}
 
 <tr>
-	<th class="text-right" colspan="2">
+	<th></th>
+	<th class="item-grand-total">
 		{{ _("Grand Total") }}
 	</th>
-	<th class="text-right">
+	<th class="text-right item-grand-total">
 		{{ doc.get_formatted("grand_total") }}
 	</th>
 </tr>
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index 3033d1587d..2cabf5a9e0 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -2,7 +2,7 @@
 
 {% block title %} {{ _("Shopping Cart") }} {% endblock %}
 
-{% block header %}<h1>{{ _("Shopping Cart") }}</h1>{% endblock %}
+{% block header %}<h3 class="shopping-cart-header mt-2 mb-6">{{ _("Shopping Cart") }}</h1>{% endblock %}
 
 <!--
 {% block script %}
@@ -18,94 +18,119 @@
 
 {% from "templates/includes/macros.html" import item_name_and_description %}
 
+{% if doc.items %}
 <div class="cart-container">
-	<div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+	<div class="row m-0">
+		<div class="col-md-8 frappe-card p-5">
+			<div>
+				<div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+				<div class="cart-items-header">
+					{{ _('Items') }}
+				</div>
+				<table class="table mt-3 cart-table">
+					<thead>
+						<tr>
+							<th width="60%">{{ _('Item') }}</th>
+							<th width="20%">{{ _('Quantity') }}</th>
+							{% if cart_settings.enable_checkout %}
+							<th width="20%" class="text-right">{{ _('Subtotal') }}</th>
+							{% endif %}
+						</tr>
+					</thead>
+					<tbody class="cart-items">
+						{% include "templates/includes/cart/cart_items.html" %}
+					</tbody>
+					{% if cart_settings.enable_checkout %}
+					<tfoot class="cart-tax-items">
+						{% include "templates/includes/order/order_taxes.html" %}
+					</tfoot>
+					{% endif %}
+				</table>
+			</div>
+			<div class="row">
+				<div class="col-4">
+					{% if cart_settings.enable_checkout %}
+					<a class="btn btn-outline-primary" href="/orders">
+						{{ _('See past orders') }}
+					</a>
+					{% else %}
+					<a class="btn btn-outline-primary" href="/quotations">
+						{{ _('See past quotations') }}
+					</a>
+					{% endif %}
+				</div>
+				<div class="col-8">
+					{% if doc.items %}
+					<div class="place-order-container">
+						{% if cart_settings.enable_checkout %}
+							<button class="btn btn-primary btn-place-order" type="button">
+								{{ _("Place Order") }}
+							</button>
+						{% else %}
+							<button class="btn btn-primary btn-request-for-quotation" type="button">
+								{{ _("Request for Quotation") }}
+							</button>
+						{% endif %}
+					</div>
+					{% endif %}
+				</div>
+			</div>
 
-	{% if doc.items %}
-	<table class="table table-bordered mt-3">
-		<thead>
-			<tr>
-				<th width="60%">{{ _('Item') }}</th>
-				<th width="20%" class="text-right">{{ _('Quantity') }}</th>
-				{% if cart_settings.enable_checkout %}
-				<th width="20%" class="text-right">{{ _('Subtotal') }}</th>
-				{% endif %}
-			</tr>
-		</thead>
-		<tbody class="cart-items">
-			{% include "templates/includes/cart/cart_items.html" %}
-		</tbody>
-		{% if cart_settings.enable_checkout %}
-		<tfoot class="cart-tax-items">
-			{% include "templates/includes/order/order_taxes.html" %}
-		</tfoot>
-		{% endif %}
-	</table>
-	{% else %}
-	<p class="text-muted">{{ _('Your cart is Empty') }}</p>
-	{% endif %}
 
-	{% if doc.items %}
-		<div class="place-order-container">
-			{% if cart_settings.enable_checkout %}
-				<button class="btn btn-primary btn-place-order" type="button">
-					{{ _("Place Order") }}
-				</button>
-			{% else %}
-				<button class="btn btn-primary btn-request-for-quotation" type="button">
-					{{ _("Request for Quotation") }}
-				</button>
+			{% if doc.items %}
+			{% if doc.tc_name %}
+				<div class="terms-and-conditions-link">
+					<a href class="link-terms-and-conditions" data-terms-name="{{ doc.tc_name }}">
+						{{ _("Terms and Conditions") }}
+					</a>
+					<script>
+						frappe.ready(() => {
+							$('.link-terms-and-conditions').click((e) => {
+								e.preventDefault();
+								const $link = $(e.target);
+								const terms_name = $link.attr('data-terms-name');
+								show_terms_and_conditions(terms_name);
+							})
+						});
+						function show_terms_and_conditions(terms_name) {
+							frappe.call('erpnext.shopping_cart.cart.get_terms_and_conditions', { terms_name })
+							.then(r => {
+								frappe.msgprint({
+									title: terms_name,
+									message: r.message
+								});
+							});
+						}
+					</script>
+				</div>
 			{% endif %}
 		</div>
-	{% endif %}
 
-	{% if doc.items %}
-	{% if doc.tc_name %}
-		<div class="terms-and-conditions-link">
-			<a href class="link-terms-and-conditions" data-terms-name="{{ doc.tc_name }}">
-				{{ _("Terms and Conditions") }}
-			</a>
-			<script>
-				frappe.ready(() => {
-					$('.link-terms-and-conditions').click((e) => {
-						e.preventDefault();
-						const $link = $(e.target);
-						const terms_name = $link.attr('data-terms-name');
-						show_terms_and_conditions(terms_name);
-					})
-				});
-				function show_terms_and_conditions(terms_name) {
-					frappe.call('erpnext.shopping_cart.cart.get_terms_and_conditions', { terms_name })
-					.then(r => {
-						frappe.msgprint({
-							title: terms_name,
-							message: r.message
-						});
-					});
-				}
-			</script>
+		<div class="col-md-4">
+			<div class="cart-addresses">
+				{% include "templates/includes/cart/cart_address.html" %}
+				</div>
 		</div>
-	{% endif %}
-
-	<div class="cart-addresses mt-5">
-	{% include "templates/includes/cart/cart_address.html" %}
+		{% endif %}
 	</div>
-	{% endif %}
 </div>
-
-<div class="row mt-5">
-	<div class="col-12">
-		{% if cart_settings.enable_checkout %}
-		<a href="/orders">
+{% else %}
+<div class="cart-empty frappe-card">
+	<div class="cart-empty-state">
+		<img src="/assets/erpnext/images/ui-states/cart-empty-state.png" alt="Empty State">
+	</div>
+	<div class="cart-empty-message mt-4">{{ _('Your cart is Empty') }}</p>
+	{% if cart_settings.enable_checkout %}
+		<a class="btn btn-outline-primary" href="/orders">
 			{{ _('See past orders') }}
 		</a>
 		{% else %}
-		<a href="/quotations">
+		<a class="btn btn-outline-primary" href="/quotations">
 			{{ _('See past quotations') }}
 		</a>
-		{% endif %}
-	</div>
+	{% endif %}
 </div>
+{% endif %}
 
 {% endblock %}
 
diff --git a/erpnext/www/all-products/index.html b/erpnext/www/all-products/index.html
index 17e6d02d5f..92c76ad879 100644
--- a/erpnext/www/all-products/index.html
+++ b/erpnext/www/all-products/index.html
@@ -137,13 +137,15 @@
 		</script>
 	</div>
 </div>
-<div class="row">
-	<div class="col-12">
+<div class="row product-paging-area mt-5">
+	<div class="col-3">
+	</div>
+	<div class="col-9 text-right">
 		{% if frappe.form_dict.start|int > 0 %}
-		<button class="btn btn-outline-secondary btn-prev" data-start="{{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</button>
+		<button class="btn btn-default btn-prev" data-start="{{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</button>
 		{% endif %}
 		{% if items|length >= page_length %}
-		<button class="btn btn-outline-secondary btn-next" data-start="{{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</button>
+		<button class="btn btn-default btn-next" data-start="{{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</button>
 		{% endif %}
 	</div>
 </div>