feat: added continue-shopping button on cart
diff --git a/erpnext/templates/emails/birthday_reminder.html b/erpnext/templates/emails/birthday_reminder.html
new file mode 100644
index 0000000..12cdf1e
--- /dev/null
+++ b/erpnext/templates/emails/birthday_reminder.html
@@ -0,0 +1,25 @@
+<div class="gray-container text-center">
+	<div>
+		{% for person in birthday_persons %}
+			{% if person.image  %}
+			<img
+				class="avatar-frame standard-image"
+				src="{{ person.image }}"
+				style="{{ css_style or '' }}"
+				title="{{ person.name }}">
+			</span>
+			{% else %}
+			<span
+				class="avatar-frame standard-image"
+				style="{{ css_style or '' }}"
+				title="{{ person.name }}">
+				{{ frappe.utils.get_abbr(person.name) }}
+			</span>
+			{% endif %}
+		{% endfor %}
+	</div>
+	<div style="margin-top: 15px">
+		<span>{{ reminder_text }}</span>
+		<p class="text-muted">{{ message }}</p>
+	</div>
+</div>
\ No newline at end of file
diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index d3691a6..135982d 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/erpnext/templates/generators/item/item.html
@@ -3,21 +3,25 @@
 {% block title %} {{ title }} {% endblock %}
 
 {% block breadcrumbs %}
+<div class="item-breadcrumbs small text-muted">
 	{% include "templates/includes/breadcrumbs.html" %}
+</div>
 {% endblock %}
 
 {% block page_content %}
-{% from "erpnext/templates/includes/macros.html" import product_image %}
-<div class="item-content">
-	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
-		<div class="row mb-5">
-			{% include "templates/generators/item/item_image.html" %}
-			{% include "templates/generators/item/item_details.html" %}
+<div class="product-container">
+	{% from "erpnext/templates/includes/macros.html" import product_image %}
+	<div class="item-content">
+		<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
+			<div class="row mb-5">
+				{% include "templates/generators/item/item_image.html" %}
+				{% include "templates/generators/item/item_details.html" %}
+			</div>
+
+			{% include "templates/generators/item/item_specifications.html" %}
+
+			{{ doc.website_content or '' }}
 		</div>
-
-		{% include "templates/generators/item/item_specifications.html" %}
-
-		{{ doc.website_content or '' }}
 	</div>
 </div>
 {% endblock %}
diff --git a/erpnext/templates/generators/item/item_add_to_cart.html b/erpnext/templates/generators/item/item_add_to_cart.html
index dbf15de..f5adbf0 100644
--- a/erpnext/templates/generators/item/item_add_to_cart.html
+++ b/erpnext/templates/generators/item/item_add_to_cart.html
@@ -6,10 +6,10 @@
 <div class="item-cart row mt-2" data-variant-item-code="{{ item_code }}">
 	<div class="col-md-12">
 		{% if cart_settings.show_price and product_info.price %}
-		<h4>
+		<div class="product-price">
 			{{ product_info.price.formatted_price_sales_uom }}
-			<small class="text-muted">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
-		</h4>
+			<small class="formatted-price">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
+		</div>
 		{% else %}
 			{{ _("Unit of Measurement") }} : {{ product_info.uom }}
 		{% endif %}
@@ -17,11 +17,11 @@
 		{% if cart_settings.show_stock_availability %}
 		<div>
 			{% if product_info.in_stock == 0 %}
-			<span class="text-danger">
+			<span class="text-danger no-stock">
 				{{ _('Not in stock') }}
 			</span>
 			{% elif product_info.in_stock == 1 %}
-			<span class="text-success">
+			<span class="text-success has-stock">
 				{{ _('In stock') }}
 				{% if product_info.show_stock_qty and product_info.stock_qty %}
 					({{ product_info.stock_qty[0][0] }})
@@ -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 73f9ec9..b61ac73 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 5fd9011..8eadb84 100644
--- a/erpnext/templates/generators/item/item_configure.js
+++ b/erpnext/templates/generators/item/item_configure.js
@@ -187,42 +187,55 @@
 	}
 
 	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')}
+		/* eslint-disable indent */
+		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>`;
+		/* eslint-disable indent */
 
 		return `
-			${item_add_to_cart}
 			${item_found_status}
+			${item_add_to_cart}
 		`;
 	}
 
@@ -254,8 +267,8 @@
 	}
 
 	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 +276,7 @@
 			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 4cbecb0..3b77585 100644
--- a/erpnext/templates/generators/item/item_details.html
+++ b/erpnext/templates/generators/item/item_details.html
@@ -1,14 +1,21 @@
-<div class="col-md-8">
+<div class="col-md-7 product-details">
 <!-- title -->
-<h1 itemprop="name">
+<h1 class="product-title" itemprop="name">
 	{{ item_name }}
 </h1>
-<p class="text-muted">
+<p class="product-code">
 	<span>{{ _("Item Code") }}:</span>
 	<span itemprop="productID">{{ doc.name }}</span>
 </p>
+{% if has_variants %}
+	<!-- configure template -->
+	{% include "templates/generators/item/item_configure.html" %}
+{% else %}
+	<!-- add variant to cart -->
+	{% include "templates/generators/item/item_add_to_cart.html" %}
+{% endif %}
 <!-- description -->
-<div itemprop="description">
+<div class="product-description" itemprop="description">
 {% if frappe.utils.strip_html(doc.web_long_description or '') %}
 	{{ doc.web_long_description | safe }}
 {% elif frappe.utils.strip_html(doc.description or '')  %}
@@ -17,12 +24,4 @@
 	{{ _("No description given") }}
 {% endif  %}
 </div>
-
-{% if has_variants %}
-	<!-- configure template -->
-	{% include "templates/generators/item/item_configure.html" %}
-{% else %}
-	<!-- add variant to cart -->
-	{% include "templates/generators/item/item_add_to_cart.html" %}
-{% endif %}
 </div>
diff --git a/erpnext/templates/generators/item/item_image.html b/erpnext/templates/generators/item/item_image.html
index 5d46a45..39a30d0 100644
--- a/erpnext/templates/generators/item/item_image.html
+++ b/erpnext/templates/generators/item/item_image.html
@@ -1,42 +1,42 @@
-<div class="col-md-4 h-100">
-{% if slides %}
-{{ product_image(slides[0].image, 'product-image') }}
-<div class="item-slideshow">
-	{% for item in slides %}
-	<img class="item-slideshow-image mt-2 {% if loop.first %}active{% endif %}"
-			src="{{ item.image }}" alt="{{ item.heading }}">
-	{% endfor %}
-</div>
-<!-- Simple image slideshow -->
-<script>
-	frappe.ready(() => {
-		$('.page_content').on('click', '.item-slideshow-image', (e) => {
-			const $img = $(e.currentTarget);
-			const link = $img.prop('src');
-			const $product_image = $('.product-image');
-			$product_image.find('a').prop('href', link);
-			$product_image.find('img').prop('src', link);
+<div class="col-md-5 h-100 d-flex">
+	{% if slides %}
+	<div class="item-slideshow d-flex flex-column mr-3">
+		{% for item in slides %}
+		<img class="item-slideshow-image mb-2 {% if loop.first %}active{% endif %}"
+				src="{{ item.image }}" alt="{{ item.heading }}">
+		{% endfor %}
+	</div>
+	{{ product_image(slides[0].image, 'product-image') }}
+	<!-- Simple image slideshow -->
+	<script>
+		frappe.ready(() => {
+			$('.page_content').on('click', '.item-slideshow-image', (e) => {
+				const $img = $(e.currentTarget);
+				const link = $img.prop('src');
+				const $product_image = $('.product-image');
+				$product_image.find('a').prop('href', link);
+				$product_image.find('img').prop('src', link);
 
-			$('.item-slideshow-image').removeClass('active');
-			$img.addClass('active');
-		});
-	})
-</script>
-{% else %}
-{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
-{% endif %}
+				$('.item-slideshow-image').removeClass('active');
+				$img.addClass('active');
+			});
+		})
+	</script>
+	{% else %}
+	{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
+	{% endif %}
 
-<!-- Simple image preview -->
+	<!-- Simple image preview -->
 
-<div class="image-zoom-view" style="display: none;">
-	<button type="button" class="close" aria-label="Close">
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-		 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
-			<line x1="18" y1="6" x2="6" y2="18"></line>
-			<line x1="6" y1="6" x2="18" y2="18"></line>
-		</svg>
-	</button>
-</div>
+	<div class="image-zoom-view" style="display: none;">
+		<button type="button" class="close" aria-label="Close">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+			stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
 </div>
 <style>
 	.website-image {
diff --git a/erpnext/templates/generators/item_group.html b/erpnext/templates/generators/item_group.html
index 74b2ae3..393c3a4 100644
--- a/erpnext/templates/generators/item_group.html
+++ b/erpnext/templates/generators/item_group.html
@@ -1,42 +1,139 @@
 {% extends "templates/web.html" %}
 
-{% block breadcrumbs %}
-	{% include "templates/includes/breadcrumbs.html" %}
-{% endblock %}
+{% block header %}
+<!-- <h2>{{ title }}</h2> -->
+{% endblock header %}
 
-{% block header %}<h1>{{ name }}</h1>{% endblock %}
+{% block script %}
+<script type="text/javascript" src="/all-products/index.js"></script>
+{% endblock %}
 
 {% block page_content %}
 <div class="item-group-content" itemscope itemtype="http://schema.org/Product">
 	<div class="item-group-slideshow">
 		{% if slideshow %}<!-- slideshow -->
-		{% include "templates/includes/slideshow.html" %}
+			{{ web_block(
+				"Hero Slider",
+				values=slideshow,
+				add_container=0,
+				add_top_padding=0,
+				add_bottom_padding=0,
+			) }}
 		{% endif %}
+		<h2 class="mt-3">{{ title }}</h2>
 		{% if description %}<!-- description -->
-		<div class="mb-3" itemprop="description">{{ description or ""}}</div>
+		<div class="item-group-description text-muted mb-5" itemprop="description">{{ description or ""}}</div>
 		{% endif %}
 	</div>
 	<div class="row">
-		<div class="col-md-8">
-			{% if items %}
-			<div id="search-list">
-				{% for i in range(0, page_length) %}
-					{% if items[i] %}
-						{%- set item = items[i] %}
+		<div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+			<div class="row products-list">
+				{% if items %}
+					{% for item in items %}
 						{% include "erpnext/www/all-products/item_row.html" %}
-					{% endif %}
+					{% endfor %}
+				{% else %}
+					{% include "erpnext/www/all-products/not_found.html" %}
+				{% endif %}
+			</div>
+		</div>
+		<div class="col-12 order-1 col-md-3 order-md-1">
+			<div class="collapse d-md-block mr-4 filters-section" id="product-filters">
+				<div class="d-flex justify-content-between align-items-center mb-5 title-section">
+					<div class="mb-4 filters-title" > {{ _('Filters') }} </div>
+					<a class="mb-4 clear-filters" href="/{{ doc.route }}">{{ _('Clear All') }}</a>
+				</div>
+				{% for field_filter in field_filters %}
+					{%- set item_field =  field_filter[0] %}
+					{%- set values =  field_filter[1] %}
+					<div class="mb-4 filter-block pb-5">
+						<div class="filter-label mb-3">{{ item_field.label }}</div>
+
+						{% if values | len > 20 %}
+						<!-- show inline filter if values more than 20 -->
+						<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
+						{% endif %}
+
+						{% if values %}
+						<div class="filter-options">
+							{% for value in values %}
+							<div class="checkbox" data-value="{{ value }}">
+								<label for="{{value}}">
+									<input type="checkbox"
+										class="product-filter field-filter"
+										id="{{value}}"
+										data-filter-name="{{ item_field.fieldname }}"
+										data-filter-value="{{ value }}"
+									>
+									<span class="label-area">{{ value }}</span>
+								</label>
+							</div>
+							{% endfor %}
+						</div>
+						{% else %}
+						<i class="text-muted">{{ _('No values') }}</i>
+						{% endif %}
+					</div>
+				{% endfor %}
+
+				{% for attribute in attribute_filters %}
+					<div class="mb-4 filter-block pb-5">
+						<div class="filter-label mb-3">{{ attribute.name}}</div>
+						{% if values | len > 20 %}
+						<!-- show inline filter if values more than 20 -->
+						<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
+						{% endif %}
+
+						{% if attribute.item_attribute_values %}
+						<div class="filter-options">
+							{% for attr_value in attribute.item_attribute_values %}
+							<div class="checkbox">
+								<label data-value="{{ value }}">
+									<input type="checkbox"
+										class="product-filter attribute-filter"
+										id="{{attr_value.name}}"
+										data-attribute-name="{{ attribute.name }}"
+										data-attribute-value="{{ attr_value.attribute_value }}"
+										{% if attr_value.checked %} checked {% endif %}>
+										<span class="label-area">{{ attr_value.attribute_value }}</span>
+								</label>
+							</div>
+							{% endfor %}
+						</div>
+						{% else %}
+						<i class="text-muted">{{ _('No values') }}</i>
+						{% endif %}
+					</div>
 				{% endfor %}
 			</div>
-			<div class="item-group-nav-buttons">
-				{% if frappe.form_dict.start|int > 0 %}
-				<a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</a>
-				{% endif %}
-				{% if items|length > page_length %}
-				<a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</a>
-				{% endif %}
-			</div>
-			{% else %}
-			<div class="text-muted">{{ _("No items listed") }}.</div>
+
+			<script>
+				frappe.ready(() => {
+					$('.product-filter-filter').on('keydown', frappe.utils.debounce((e) => {
+						const $input = $(e.target);
+						const keyword = ($input.val() || '').toLowerCase();
+						const $filter_options = $input.next('.filter-options');
+
+						$filter_options.find('.custom-control').show();
+						$filter_options.find('.custom-control').each((i, el) => {
+							const $el = $(el);
+							const value = $el.data('value').toLowerCase();
+							if (!value.includes(keyword)) {
+								$el.hide();
+							}
+						});
+					}, 300));
+				})
+			</script>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-12">
+			{% 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>
+			{% 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>
 			{% endif %}
 		</div>
 	</div>
diff --git a/erpnext/templates/generators/job_opening.html b/erpnext/templates/generators/job_opening.html
index f92e72e..c562db3 100644
--- a/erpnext/templates/generators/job_opening.html
+++ b/erpnext/templates/generators/job_opening.html
@@ -13,10 +13,21 @@
 {%- if description -%}
 <div>{{ description }}</div>
 {% endif %}
+
+{%- if publish_salary_range -%} 
+<div><b>{{_("Salary range per month")}}: </b>{{ frappe.format_value(frappe.utils.flt(lower_range), currency=currency) }} - {{ frappe.format_value(frappe.utils.flt(upper_range), currency=currency) }}</div>
+{% endif %}
+
 <p style='margin-top: 30px'>
-	<a class='btn btn-primary'
+	{%- if job_application_route -%}
+	<a class='btn btn-primary' 
+	href='/{{job_application_route}}?new=1&job_title={{ doc.name }}'>
+	{{ _("Apply Now") }}</a>
+	{% else %}
+	<a class='btn btn-primary' 
 	href='/job_application?new=1&job_title={{ doc.name }}'>
 	{{ _("Apply Now") }}</a>
+	{% endif %}
 </p>
 
 {% endblock %}
diff --git a/erpnext/templates/includes/address_row.html b/erpnext/templates/includes/address_row.html
index dadd2df..6d4dd54 100644
--- a/erpnext/templates/includes/address_row.html
+++ b/erpnext/templates/includes/address_row.html
@@ -2,7 +2,7 @@
     <a href="/addresses?name={{ doc.name | urlencode }}" class="no-underline text-reset">
 	    <div class="row">
 	        <div class="col-3">
-	                 <span class="indicator {{ "red" if doc.address_type=="Office" else "green" if doc.address_type=="Billing" else "blue" if doc.address_type=="Shipping" else "darkgrey" }}">{{ doc.address_title }}</span>
+	                 <span class="indicator {{ "red" if doc.address_type=="Office" else "green" if doc.address_type=="Billing" else "blue" if doc.address_type=="Shipping" else "gray" }}">{{ doc.address_title }}</span>
 			</div>
 			<div class="col-2"> {{ _(doc.address_type) }} </div>
 			<div class="col-2"> {{ doc.city }} </div>
diff --git a/erpnext/templates/includes/cart.js b/erpnext/templates/includes/cart.js
index c6dfd35..c390cd1 100644
--- a/erpnext/templates/includes/cart.js
+++ b/erpnext/templates/includes/cart.js
@@ -14,7 +14,7 @@
 	},
 
 	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,78 @@
 		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() {
+		let d = 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);
+						}
+					}
+				});
+			}
+		});
+
+		return d;
+	},
+
+	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 +271,7 @@
 
 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 646210e..667144b 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 0000000..2334ea2
--- /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 aa25c88..84a9430 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(() => {
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 0000000..72cc5f5
--- /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 ca5744b..75441c4 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/footer/footer_extension.html b/erpnext/templates/includes/footer/footer_extension.html
index 6171b61..c7f0d06 100644
--- a/erpnext/templates/includes/footer/footer_extension.html
+++ b/erpnext/templates/includes/footer/footer_extension.html
@@ -1,12 +1,12 @@
 {% if not hide_footer_signup %}
 <div class="input-group">
-	<input type="text" class="form-control border-secondary"
+	<input type="text" class="form-control"
 		id="footer-subscribe-email"
 		placeholder="{{ _('Your email address...') }}"
 		aria-label="{{ _('Your email address...') }}"
 		aria-describedby="footer-subscribe-button">
 	<div class="input-group-append">
-		<button class="btn btn-sm btn-outline-secondary"
+		<button class="btn btn-sm btn-default"
 			type="button" id="footer-subscribe-button">{{ _("Get Updates") }}</button>
 	</div>
 </div>
diff --git a/erpnext/templates/includes/issue_row.html b/erpnext/templates/includes/issue_row.html
index ff868fa..d909c5f 100644
--- a/erpnext/templates/includes/issue_row.html
+++ b/erpnext/templates/includes/issue_row.html
@@ -2,7 +2,7 @@
 	<a href="/issues?name={{ doc.name }}" class="no-underline">
 		<div class="row py-4 border-bottom">
 			<div class="col-3 d-flex align-items-center">
-				{% set indicator = 'red' if doc.status == 'Open' else 'darkgrey' %}
+				{% set indicator = 'red' if doc.status == 'Open' else 'gray' %}
 				{% set indicator = 'green' if doc.status == 'Closed' else indicator %}
 				<span class="d-inline-flex indicator {{ indicator }}"></span>
 					{{ doc.name }}
@@ -10,7 +10,7 @@
 			<div class="col-5 text-muted">
 				{{ doc.subject }}</div>
 			<div class="col-2 d-flex align-items-center text-muted">
-				{% set indicator = 'red' if doc.status == 'Open' else 'darkgrey' %}
+				{% set indicator = 'red' if doc.status == 'Open' else 'gray' %}
 				{% set indicator = 'green' if doc.status == 'Closed' else indicator %}
 				{% set indicator = 'orange' if doc.status == 'Open' and doc.priority == 'Medium' else indicator %}
 				{% set indicator = 'yellow' if doc.status == 'Open' and doc.priority == 'Low' else indicator %}
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index ea6b00f..c44bfb5 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -7,10 +7,10 @@
 </div>
 {% endmacro %}
 
-{% macro product_image(website_image, css_class="", alt="") %}
-    <div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
+{% macro product_image(website_image, css_class="product-image", alt="") %}
+	<div class="border text-center rounded {{ css_class }}" style="overflow: hidden;">
 		<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
-    </div>
+	</div>
 {% endmacro %}
 
 {% macro media_image(website_image, name, css_class="") %}
@@ -18,13 +18,13 @@
 		{% if not website_image -%}
 		<div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div>
 		{%- endif %}
-    	{% if website_image -%}
+		{% if website_image -%}
 			<a href="{{ frappe.utils.quoted(website_image) }}">
 				<img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}"
 					class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;">
 			</a>
-    	{%- endif %}
-    </div>
+		{%- endif %}
+	</div>
 {% endmacro %}
 
 {% macro render_homepage_section(section) %}
@@ -40,7 +40,7 @@
 		<div class="col-md-{{ section.column_value }} mb-4">
 			<div class="card h-100 justify-content-between">
 				{% if card.image %}
-				<div class="website-image-lazy" data-class="card-img-top h-100" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div>
+				<div class="website-image-lazy" data-class="card-img-top h-75" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div>
 				{% endif %}
 				<div class="card-body">
 					<h5 class="card-title">{{ card.title }}</h5>
@@ -57,4 +57,67 @@
 </section>
 {% endif %}
 
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
+
+{%- macro item_card(title, image, url, description, rate, category, is_featured=False, is_full_width=False, align="Left") -%}
+{%- set align_items_class = resolve_class({
+	'align-items-end': align == 'Right',
+	'align-items-center': align == 'Center',
+	'align-items-start': align == 'Left',
+}) -%}
+{%- set col_size = 3 if is_full_width else 4 -%}
+{% if is_featured %}
+<div class="col-sm-{{ col_size*2 }} item-card">
+	<div class="card featured-item {{ align_items_class }}">
+		{% if image %}
+		<div class="row no-gutters">
+			<div class="col-md-6">
+				<img class="card-img" src="{{ image }}" alt="{{ title }}">
+			</div>
+			<div class="col-md-6">
+				{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+			</div>
+		</div>
+		{% else %}
+			<div class="col-md-12">
+				{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+			</div>
+		{% endif %}
+	</div>
+</div>
+{% else %}
+<div class="col-sm-{{ col_size }} item-card">
+	<div class="card {{ align_items_class }}">
+		{% if image %}
+		<div class="card-img-container">
+			<img class="card-img" src="{{ image }}" alt="{{ title }}">
+		</div>
+		{% 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>
+</div>
+{% endif %}
+{%- endmacro -%}
+
+{%- macro item_card_body(title, description, url, rate, category, is_featured, align) -%}
+{%- set align_class = resolve_class({
+	'text-right': align == 'Right',
+	'text-center': align == 'Center' and not is_featured,
+	'text-left': align == 'Left' or is_featured,
+}) -%}
+<div class="card-body {{ align_class }}">
+	<div class="product-title">{{ title or '' }}</div>
+	{% if is_featured %}
+	<div class="product-price">{{ rate or '' }}</div>
+	<div class="product-description ellipsis">{{ description or '' }}</div>
+	{% else %}
+	<div class="product-category">{{ category or '' }}</div>
+	<div class="product-price">{{ rate or '' }}</div>
+	{% endif %}
+</div>
+<a href="/{{ url or '#' }}" class="stretched-link"></a>
+{%- endmacro -%}
\ No newline at end of file
diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html
index 4daf0e7..133d99e 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 ebec838..d2c458e 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/includes/products_as_list.html b/erpnext/templates/includes/products_as_list.html
index 88910d0..9bf9fd9 100644
--- a/erpnext/templates/includes/products_as_list.html
+++ b/erpnext/templates/includes/products_as_list.html
@@ -1,4 +1,4 @@
-{% from "erpnext/templates/includes/macros.html" import product_image_square %}
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
 
 <a class="product-link product-list-link" href="{{ route|abs_url }}">
 	<div class='row'>
diff --git a/erpnext/templates/includes/projects/project_row.html b/erpnext/templates/includes/projects/project_row.html
index 73c83ef..4c8c40d 100644
--- a/erpnext/templates/includes/projects/project_row.html
+++ b/erpnext/templates/includes/projects/project_row.html
@@ -15,7 +15,7 @@
 					  </div>
 					</div>
 				{% else %}
-					<span class="indicator {{ "red" if doc.status=="Open" else "darkgrey"  }}">
+					<span class="indicator {{ "red" if doc.status=="Open" else "gray"  }}">
 						{{ doc.status }}</span>
 				{% endif %}
 			</div>
diff --git a/erpnext/templates/includes/projects/project_tasks.html b/erpnext/templates/includes/projects/project_tasks.html
index 94c692c..50b9f4b 100644
--- a/erpnext/templates/includes/projects/project_tasks.html
+++ b/erpnext/templates/includes/projects/project_tasks.html
@@ -3,7 +3,7 @@
 		<a class="no-decoration task-link {{ task.css_seen }}" href="/tasks?name={{ task.name }}">
 		<div class='row project-item'>
 			<div class='col-xs-9'>
-				<span class="indicator {{ "red" if task.status=="Open" else "green" if task.status=="Closed" else "darkgrey" }}" title="{{ task.status }}"  > {{ task.subject }}</span> 
+				<span class="indicator {{ "red" if task.status=="Open" else "green" if task.status=="Closed" else "gray" }}" title="{{ task.status }}"  > {{ task.subject }}</span>
 	 				<div class="small text-muted item-timestamp"
 	 					title="{{ frappe.utils.pretty_date(task.modified) }}">
 						{{ _("modified") }} {{ frappe.utils.pretty_date(task.modified) }}
@@ -16,9 +16,9 @@
 						</span>
 					{% else %}
 						<span class="avatar avatar-small standard-image" title="Assigned to {{ task.todo.owner }}">
-							
+
 						</span>
-					{% endif %}		
+					{% endif %}
 				{% endif %}	 </div>
 			<div class='col-xs-2'>
 				<span class="pull-right list-comment-count small {{ "text-extra-muted" if task.comment_count==0 else "text-muted" }}">
diff --git a/erpnext/templates/includes/projects/project_timesheets.html b/erpnext/templates/includes/projects/project_timesheets.html
index fb3806c..05a07c1 100644
--- a/erpnext/templates/includes/projects/project_timesheets.html
+++ b/erpnext/templates/includes/projects/project_timesheets.html
@@ -3,19 +3,19 @@
 	<a class="no-decoration timesheet-link {{ timesheet.css_seen }}" href="/timesheet/{{ timesheet.info.name}}">
 		<div class='row project-item'>
 			<div class='col-xs-10'>
-				<span class="indicator {{ "blue" if timesheet.info.status=="Submitted" else "red" if timesheet.info.status=="Draft" else "darkgrey" }}" title="{{ timesheet.info.status }}"  > {{ timesheet.info.name }} </span> 
+				<span class="indicator {{ "blue" if timesheet.info.status=="Submitted" else "red" if timesheet.info.status=="Draft" else "gray" }}" title="{{ timesheet.info.status }}"  > {{ timesheet.info.name }} </span>
 				<div class="small text-muted item-timestamp">
 				{{ _("From") }} {{ frappe.format_date(timesheet.from_time) }} {{ _("to") }} {{ frappe.format_date(timesheet.to_time) }}
 			</div>
 			</div>
 				<div class='col-xs-1' style="margin-right:-30px;">
 				<span class="avatar avatar-small" title="{{ timesheet.info.modified_by }}"> <img src="{{ timesheet.info.user_image }}" style="display:flex;"></span>
-			</div> 
+			</div>
 			<div class='col-xs-1'>
 				<span class="pull-right list-comment-count small {{ "text-extra-muted" if timesheet.comment_count==0 else "text-muted" }}">
 				<i class="octicon octicon-comment-discussion"></i>
 				{{ timesheet.info.comment_count }}
-				</span> 
+				</span>
 			</div>
 		</div>
 	</a>
diff --git a/erpnext/templates/includes/timesheet/timesheet_row.html b/erpnext/templates/includes/timesheet/timesheet_row.html
index 4852f59..0f9cc77 100644
--- a/erpnext/templates/includes/timesheet/timesheet_row.html
+++ b/erpnext/templates/includes/timesheet/timesheet_row.html
@@ -1,7 +1,7 @@
 <div class="web-list-item transaction-list-item">
 	<div class="row">
 		<div class="col-xs-3">
-			<span class='indicator {{ "red" if doc.status=="Cancelled" else "green" if doc.status=="Billed" else "blue" if doc.status=="Submitted" else "darkgrey" }} small'>
+			<span class='indicator {{ "red" if doc.status=="Cancelled" else "green" if doc.status=="Billed" else "blue" if doc.status=="Submitted" else "gray" }} small'>
 				{{ doc.name }}
 			</span>
 		</div>
diff --git a/erpnext/templates/includes/transaction_row.html b/erpnext/templates/includes/transaction_row.html
index fd4835e..930d0c2 100644
--- a/erpnext/templates/includes/transaction_row.html
+++ b/erpnext/templates/includes/transaction_row.html
@@ -1,7 +1,7 @@
 <div class="web-list-item transaction-list-item">
 	<div class="row">
 		<div class="col-sm-4">
-			<span class="indicator small {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
+			<span class="indicator small {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }}">
 			{{ doc.name }}</span>
 			<div class="small text-muted transaction-time"
 				title="{{ frappe.utils.format_datetime(doc.modified, "medium") }}">
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index 876eaea..ea34371 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,97 +18,122 @@
 
 {% 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">
+						<a class="btn btn-primary-light mr-2" href="/all-products">
+							{{ _("Continue Shopping") }}
+						</a>
+						{% 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">
-			<a class="btn btn-primary-light mr-2" href="/all-products">
-				{{ _("Continue Shopping") }}
-			</a>
-			{% 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/templates/pages/material_request_info.html b/erpnext/templates/pages/material_request_info.html
index c7a7802..0c2772e 100644
--- a/erpnext/templates/pages/material_request_info.html
+++ b/erpnext/templates/pages/material_request_info.html
@@ -20,7 +20,7 @@
 <div class="row transaction-subheading">
 	<div class="col-xs-6">
 
-		<span class="indicator {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
+		<span class="indicator {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }}">
 			{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
 		</span>
 	</div>
diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html
index af7af11..07dd676 100644
--- a/erpnext/templates/pages/order.html
+++ b/erpnext/templates/pages/order.html
@@ -8,7 +8,7 @@
 {% block title %}{{ doc.name }}{% endblock %}
 
 {% block header %}
-	<h1 class="m-0">{{ doc.name }}</h1>
+	<h2 class="m-0">{{ doc.name }}</h2>
 {% endblock %}
 
 {% block header_actions %}
@@ -33,7 +33,7 @@
 
 <div class="row transaction-subheading">
 	<div class="col-6">
-		<span class="indicator {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
+		<span class="indicator-pill {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
 			{% if doc.doctype == "Quotation" and not doc.docstatus %}
 				{{ _("Pending") }}
 			{% else %}
@@ -41,7 +41,7 @@
 			{% endif %}
 		</span>
 	</div>
-	<div class="col-6 text-muted text-right small">
+	<div class="col-6 text-muted text-right small pt-3">
 		{{ frappe.utils.format_date(doc.transaction_date, 'medium') }}
 		{% if doc.valid_till %}
 		<p>
@@ -66,38 +66,39 @@
 {% endif %}
 
 <div class="order-container">
-
 	<!-- items -->
-	<div class="order-item-table">
-		<div class="row order-items order-item-header text-muted">
-			<div class="col-sm-6 col-6 h6 text-uppercase">
+	<table class="order-item-table w-100 table">
+		<thead class="order-items order-item-header">
+			<th width="60%">
 				{{ _("Item") }}
-			</div>
-			<div class="col-sm-3 col-xs-3 text-right h6 text-uppercase">
+			</th>
+			<th width="20%" class="text-right">
 				{{ _("Quantity") }}
-			</div>
-			<div class="col-sm-3 col-xs-3 text-right h6 text-uppercase">
+			</th>
+			<th width="20%" class="text-right">
 				{{ _("Amount") }}
-			</div>
-		</div>
+			</th>
+		</thead>
+		<tbody>
 		{% for d in doc.items %}
-		<div class="row order-items">
-			<div class="col-sm-6 col-6">
+		<tr class="order-items">
+			<td>
 				{{ item_name_and_description(d) }}
-			</div>
-			<div class="col-sm-3 col-xs-3 text-right">
+			</td>
+			<td class="text-right">
 				{{ d.qty }}
 				{% if d.delivered_qty is defined and d.delivered_qty != None %}
 				<p class="text-muted small">{{ _("Delivered") }}&nbsp;{{ d.delivered_qty }}</p>
 				{% endif %}
-			</div>
-			<div class="col-sm-3 col-xs-3 text-right">
+			</td>
+			<td class="text-right">
 				{{ d.get_formatted("amount")	 }}
 				<p class="text-muted small">{{ _("Rate:") }}&nbsp;{{ d.get_formatted("rate") }}</p>
-			</div>
-		</div>
+			</td>
+		</tr>
 		{% endfor %}
-	</div>
+		</tbody>
+	</table>
 	<!-- taxes -->
 	<div class="order-taxes d-flex justify-content-end">
 		<table>
diff --git a/erpnext/templates/pages/rfq.html b/erpnext/templates/pages/rfq.html
index 5b27a94..6e2edb6 100644
--- a/erpnext/templates/pages/rfq.html
+++ b/erpnext/templates/pages/rfq.html
@@ -77,13 +77,13 @@
 							<div class="web-list-item transaction-list-item quotations" idx="{{d.name}}">
 								<div class="row">
 									<div class="col-sm-6">
-										<span class="indicator darkgrey">{{d.name}}</span>
+										<span class="indicator gray">{{d.name}}</span>
 									</div>
 									<div class="col-sm-3">
-										<span class="small darkgrey">{{d.status}}</span>
+										<span class="small gray">{{d.status}}</span>
 									</div>
 									<div class="col-sm-3">
-										<span class="small darkgrey">{{d.transaction_date}}</span>
+										<span class="small gray">{{d.transaction_date}}</span>
 									</div>
 								</div>
 								<a class="transaction-item-link" href="/quotations/{{d.name}}">Link</a>
diff --git a/erpnext/templates/print_formats/includes/item_table_description.html b/erpnext/templates/print_formats/includes/item_table_description.html
index 070cca5..7569e50 100644
--- a/erpnext/templates/print_formats/includes/item_table_description.html
+++ b/erpnext/templates/print_formats/includes/item_table_description.html
@@ -1,7 +1,7 @@
-{%- set compact = doc.flags.compact_item_print -%}
-{%- set compact_fields = doc.flags.compact_item_fields -%}
+{%- set compact = print_settings.compact_item_print -%}
+{%- set compact_fields = parent_doc.flags.compact_item_fields -%}
 {%- set display_columns = visible_columns|map(attribute="fieldname")| list -%}
-{%- set columns = doc.flags.format_columns(display_columns, compact_fields) -%}
+{%- set columns = parent_doc.flags.format_columns(display_columns, compact_fields) -%}
 
 {% if doc.in_format_data("image") and doc.get("image") and "image" in display_columns -%}
 <div class="pull-left" style="max-width: 40%; margin-right: 10px;">
@@ -11,11 +11,11 @@
 
 <div>
 	{% if doc.in_format_data("item_code") and "item_code" in display_columns -%}
-		<div class="primary">
-			{% if compact %}<strong>{% endif %}
-				{{ _(doc.item_code) }}
-			{% if compact %}</strong>{% endif %}
+		{% if compact %}
+		<div class="primary compact-item">
+			{{ _(doc.item_code) }}
 		</div>
+		{% endif %}
 	{%- endif %}
 
 	{%- if doc.in_format_data("item_name") and "item_name" in display_columns and
diff --git a/erpnext/templates/print_formats/includes/item_table_qty.html b/erpnext/templates/print_formats/includes/item_table_qty.html
index ecaaef4..8e68f1c 100644
--- a/erpnext/templates/print_formats/includes/item_table_qty.html
+++ b/erpnext/templates/print_formats/includes/item_table_qty.html
@@ -1,4 +1,4 @@
-{% set qty_first=frappe.db.get_single_value("Print Settings", "print_uom_after_quantity") %}
+{% set qty_first=print_settings.print_uom_after_quantity %}
 {% if qty_first %}
 	{{ doc.get_formatted("qty", doc) }}
 	{% if (doc.uom and not doc.is_print_hide("uom")) %} {{ _(doc.uom) }}
diff --git a/erpnext/templates/print_formats/includes/items.html b/erpnext/templates/print_formats/includes/items.html
new file mode 100644
index 0000000..55598e7
--- /dev/null
+++ b/erpnext/templates/print_formats/includes/items.html
@@ -0,0 +1,37 @@
+{%- if data -%}
+	{%- set visible_columns = get_visible_columns(doc.get(df.fieldname),
+		table_meta, df) -%}
+	<div {{ fieldmeta(df) }}>
+		<table class="table table-bordered table-condensed">
+			<thead>
+				<tr>
+					<th style="width: 40px" class="table-sr">{{ _("Sr") }}</th>
+					{% for tdf in visible_columns %}
+					{% if (data and not print_settings.compact_item_print) or tdf.fieldname in doc.flags.compact_item_fields %}
+						<th style="width: {{ get_width(tdf) }};" class="{{ get_align_class(tdf) }}" {{ fieldmeta(df) }}>
+							{{ _(tdf.label) }}</th>
+					{% endif %}
+					{% endfor %}
+				</tr>
+			</thead>
+			<tbody>
+				{% for d in data %}
+				<tr>
+					<td class="table-sr">{{ d.idx }}</td>
+					{% for tdf in visible_columns %}
+					{% if not print_settings.compact_item_print or tdf.fieldname in doc.flags.compact_item_fields %}
+						<td class="{{ get_align_class(tdf) }}" {{ fieldmeta(df) }}>
+						{% if doc.child_print_templates %}
+							{%- set child_templates = doc.child_print_templates.get(df.fieldname) %}
+							<div class="value">{{ print_value(tdf, d, doc, visible_columns, child_templates) }}</div></td>
+						{% else %}
+							<div class="value">{{ print_value(tdf, d, doc, visible_columns) }}</div></td>
+						{% endif %}
+					{% endif %}
+					{% endfor %}
+				</tr>
+				{% endfor %}
+			</tbody>
+		</table>
+	</div>
+{%- endif -%}
diff --git a/erpnext/templates/print_formats/includes/taxes.html b/erpnext/templates/print_formats/includes/taxes.html
index 304e845..1935542 100644
--- a/erpnext/templates/print_formats/includes/taxes.html
+++ b/erpnext/templates/print_formats/includes/taxes.html
@@ -17,7 +17,7 @@
 			{{ render_discount_amount(doc) }}
 		{%- endif -%}
 		{%- for charge in data -%}
-			{%- if (charge.tax_amount or doc.flags.print_taxes_with_zero_amount) and (not charge.included_in_print_rate or doc.flags.show_inclusive_tax_in_print) -%}
+			{%- if (charge.tax_amount or print_settings.print_taxes_with_zero_amount) and (not charge.included_in_print_rate or doc.flags.show_inclusive_tax_in_print) -%}
 			<div class="row">
 				<div class="col-xs-5 {%- if doc.align_labels_right %} text-right{%- endif -%}">
 					<label>{{ charge.get_formatted("description") }}</label>