diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index fb0c05f..b301fc0 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -2,18 +2,25 @@
 
 {% block title %} {{ _("Shopping Cart") }} {% endblock %}
 
-{% block header %}<h2>{{ _("My Cart") }}</h2>{% endblock %}
+{% block header %}<h1>{{ _("Shopping Cart") }}</h1>{% endblock %}
 
+<!--
 {% block script %}
 <script>{% include "templates/includes/cart.js" %}</script>
 {% endblock %}
+-->
 
 
 {% block header_actions %}
-{% if doc.items %}
-<button class="btn btn-primary btn-place-order btn-sm"
-    type="button">
-    {{ _("Place Order") }}</button>
+{% if doc.items and cart_settings.enable_checkout %}
+<button class="btn btn-primary btn-place-order" type="button">
+	{{ _("Place Order") }}
+</button>
+{% endif %}
+{% if doc.items and not cart_settings.enable_checkout %}
+<button class="btn btn-primary btn-request-for-quotation" type="button">
+	{{ _("Request for Quotation") }}
+</button>
 {% endif %}
 {% endblock %}
 
@@ -22,58 +29,89 @@
 {% from "templates/includes/macros.html" import item_name_and_description %}
 
 <div class="cart-container">
-	<div id="cart-container">
-			<div id="cart-error" class="alert alert-danger"
-		style="display: none;"></div>
-		<div id="cart-items">
-			<div class="row cart-item-header text-muted">
-				<div class="col-sm-8 col-xs-6 h6 text-uppercase">
-				{{ _("Item") }}
-				</div>
-				<div class="col-sm-2 col-xs-3 text-center h6 text-uppercase">
-				{{ _("Qty") }}
-				</div>
-				<div class="col-sm-2 col-xs-3 text-right h6 text-uppercase">
-				{{ _("Subtotal") }}
-				</div>
-			</div>
-			{% if doc.items %}
-				<div class="cart-items">
-					{% include "templates/includes/cart/cart_items.html" %}
-				</div>
-			{% else %}
-				<p class="empty-cart">{{ _("Cart is Empty") }}</p>
-			{% endif %}
-		</div>
-		{% if doc.items %}
-		<!-- taxes -->
-		<div class="row cart-taxes">
-			<div class="col-sm-6"><!-- empty --></div>
-			<div class="col-sm-6 text-right cart-tax-items">
+	<div id="cart-error" class="alert alert-danger" style="display: none;"></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" %}
-			</div>
-		</div>
-
-		{% if doc.tc_name %}
-			<div class="cart-terms" style="display: none;" title={{doc.tc_name}}>
-				{{doc.tc_name}}
-				{{doc.terms}}
-			</div>
-			<div class="cart-link">
-				<a href="#" onclick="show_terms();return false;">*{{ __("Terms and Conditions") }}</a>
-			</div>
+		</tfoot>
 		{% endif %}
+	</table>
+	{% else %}
+	<p class="text-muted">{{ _('Your cart is Empty') }}</p>
+	{% endif %}
 
-		<div class="cart-addresses">
-		{% include "templates/includes/cart/cart_address.html" %}
+	{% 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 %}
 
-		<p class="cart-footer text-right">
-		<button class="btn btn-primary btn-place-order btn-sm" type="button">
-		{{ _("Place Order") }}</button></p>
+	{% if cart_settings.enable_checkout %}
+	<div class="cart-addresses mt-5">
+	{% include "templates/includes/cart/cart_address.html" %}
+	</div>
+	{% endif %}
+	{% endif %}
+</div>
+
+<div class="row mt-5">
+	<div class="col-12">
+		{% if cart_settings.enable_checkout %}
+		<a href="/orders">
+			{{ _('See past orders') }}
+		</a>
+		{% else %}
+		<a href="/quotations">
+			{{ _('See past quotations') }}
+		</a>
 		{% endif %}
 	</div>
 </div>
 
+{% endblock %}
 
+{% block base_scripts %}
+<!-- js should be loaded in body! -->
+<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="/assets/js/frappe-web.min.js"></script>
+<script type="text/javascript" src="/assets/js/control.min.js"></script>
+<script type="text/javascript" src="/assets/js/dialog.min.js"></script>
+<script type="text/javascript" src="/assets/js/bootstrap-4-web.min.js"></script>
 {% endblock %}
diff --git a/erpnext/templates/pages/help.html b/erpnext/templates/pages/help.html
index 8c26852..1cfe358 100644
--- a/erpnext/templates/pages/help.html
+++ b/erpnext/templates/pages/help.html
@@ -11,7 +11,7 @@
 		value='{{ frappe.form_dict.q or ''}}'
 		{% if not frappe.form_dict.q%}placeholder="{{ _("What do you need help with?") }}"{% endif %}>
 	<input type='submit'
-		class='btn btn-sm btn-default btn-search' value="{{ _("Search") }}">
+		class='btn btn-sm btn-light btn-search' value="{{ _("Search") }}">
 	</form>
 </div>
 
diff --git a/erpnext/templates/pages/home.css b/erpnext/templates/pages/home.css
new file mode 100644
index 0000000..cf54766
--- /dev/null
+++ b/erpnext/templates/pages/home.css
@@ -0,0 +1,9 @@
+/* csslint ignore:start */
+{% if homepage.hero_image %}
+.hero-image {
+	background-image: url("{{ homepage.hero_image }}");
+	background-size: cover;
+	padding: 10rem 0;
+}
+{% endif %}
+/* csslint ignore:end */
\ No newline at end of file
diff --git a/erpnext/templates/pages/home.html b/erpnext/templates/pages/home.html
index f36b4e0..b67a465 100644
--- a/erpnext/templates/pages/home.html
+++ b/erpnext/templates/pages/home.html
@@ -1,75 +1,75 @@
 {% extends "templates/web.html" %}
-{% from "erpnext/templates/includes/macros.html" import product_image_square %}
 
-{% block page_content %}
+{% from "erpnext/templates/includes/macros.html" import render_homepage_section %}
 
-<div class="row">
-	<div class="col-sm-12">
-		<div class="hero">
-			<h1 class="text-center">{{ homepage.tag_line or '' }}</h1>
-			<p class="text-center">{{ homepage.description or '' }}</p>
+{% block content %}
+<main>
+	{% if homepage.hero_section_based_on == 'Default' %}
+	<section class="hero-section border-bottom {%if homepage.hero_image%}hero-image{%endif%}">
+		<div class="container py-5">
+			<h1 class="d-none d-sm-block display-4">{{ homepage.tag_line }}</h1>
+			<h1 class="d-block d-sm-none">{{ homepage.tag_line }}</h1>
+			<h2 class="d-none d-sm-block">{{ homepage.description }}</h2>
+			<h3 class="d-block d-sm-none">{{ homepage.description }}</h3>
 		</div>
-		{% if homepage.products %}
-		<div class='featured-products-section' itemscope itemtype="http://schema.org/Product">
-			<h5 class='featured-product-heading'>{{ _("Featured Products") }}</h5>
-			<div class="featured-products">
-				<div id="search-list" class="row" style="margin-top:40px;">
-					{% for item in homepage.products %}
-					<a class="product-link" href="{{ item.route|abs_url }}">
-						<div class="col-sm-4 col-xs-4 product-image-wrapper">
-							<div class="product-image-img">
-								<!-- thumbnail not updated, and used as background image in item card -->
-								{{ product_image_square(item.image) }}
-							<div class="product-text" itemprop="name">{{ item.item_name }}</div>
-							</div>
-						</div>
-					</a>
-					{% endfor %}
+
+		<div class="container">
+			<a href="{{ explore_link }}" class="mb-5 btn btn-primary">{{ _('Explore') }}</a>
+		</div>
+	</section>
+	{% elif homepage.hero_section_based_on == 'Slideshow' and slideshow %}
+	<section class="hero-section">
+		{% include "templates/includes/slideshow.html" %}
+	</section>
+	{% elif homepage.hero_section_based_on == 'Homepage Section' %}
+		{{ render_homepage_section(homepage.hero_section_doc) }}
+	{% endif %}
+
+	{% if homepage.products %}
+	<section class="container section-products my-5">
+		<h3>{{ _('Products') }}</h3>
+
+		<div class="row">
+			{% for item in homepage.products %}
+			<div class="col-md-4 mb-4">
+				<div class="card h-100 justify-content-between">
+					<div class="website-image-lazy" data-class="card-img-top h-100" data-src="{{ item.image }}" data-alt="{{ item.item_name }}"></div>
+					<div class="card-body flex-grow-0">
+						<h5 class="card-title">{{ item.item_name }}</h5>
+						<a href="{{ item.route }}" class="card-link">{{ _('More details') }}</a>
+					</div>
 				</div>
 			</div>
-			<div class="text-center padding">
-				<a href="{{ homepage.products_url or "/products" }}" class="btn btn-primary all-products">
-					{{ _("View All Products") }}</a></div>
+			{% endfor %}
 		</div>
-		{% endif %}
-	</div>
-</div>
-{% endblock %}
+	</section>
+	{% endif %}
 
-{% block style %}
-<style>
-	.hero {
-		padding-top: 50px;
-		padding-bottom: 100px;
-	}
+	{% if blogs %}
+	<section class="container my-5">
+		<h3>{{ _('Publications') }}</h3>
 
-	.hero h1 {
-		font-size: 40px;
-		font-weight: 200;
-	}
+		<div class="row">
+			{% for blog in blogs %}
+			<div class="col-md-4 mb-4">
+				<div class="card h-100">
+					<div class="card-body">
+						<h5 class="card-title">{{ blog.title }}</h5>
+						<p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(blog.blogger) }}</p>
+						<p class="card-text">{{ blog.blog_intro }}</p>
+					</div>
+					<div class="card-body flex-grow-0">
+						<a href="{{ blog.route }}" class="card-link">{{ _('Read blog') }}</a>
+					</div>
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+	</section>
+	{% endif %}
 
-	.home-login {
-		margin-top: 30px;
-	}
-	.btn-login {
-		width: 80px;
-	}
-
-	.featured-product-heading, .all-products {
-		 text-transform: uppercase;
-		 letter-spacing: 0.5px;
-		 font-size: 12px;
-		 font-weight: 500;
-	}
-
-	.all-products {
-		 font-weight: 300;
-		 padding-left: 25px;
-		 padding-right: 25px;
-		 padding-top: 10px;
-		 padding-bottom: 10px;
-	}
-
-
-</style>
-{% endblock %}
+	{% for section in homepage_sections %}
+		{{ render_homepage_section(section) }}
+	{% endfor %}
+</main>
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/pages/home.py b/erpnext/templates/pages/home.py
index 82d525a..4b688b1 100644
--- a/erpnext/templates/pages/home.py
+++ b/erpnext/templates/pages/home.py
@@ -15,15 +15,38 @@
 		if route:
 			item.route = '/' + route
 
-	context.title = homepage.title or homepage.company
-
-	# show atleast 3 products
-	if len(homepage.products) < 3:
-		for i in range(3 - len(homepage.products)):
-			homepage.append('products', {
-				'item_code': 'product-{0}'.format(i),
-				'item_name': frappe._('Product {0}').format(i),
-				'route': '#'
-			})
-
+	homepage.title = homepage.title or homepage.company
+	context.title = homepage.title
 	context.homepage = homepage
+
+	if homepage.hero_section_based_on == 'Homepage Section' and homepage.hero_section:
+		homepage.hero_section_doc = frappe.get_doc('Homepage Section', homepage.hero_section)
+
+	if homepage.slideshow:
+		doc = frappe.get_doc('Website Slideshow', homepage.slideshow)
+		context.slideshow = homepage.slideshow
+		context.slideshow_header = doc.header
+		context.slides = doc.slideshow_items
+
+	context.blogs = frappe.get_all('Blog Post',
+		fields=['title', 'blogger', 'blog_intro', 'route'],
+		filters={
+			'published': 1
+		},
+		order_by='modified desc',
+		limit=3
+	)
+
+	# filter out homepage section which is used as hero section
+	homepage_hero_section = homepage.hero_section_based_on == 'Homepage Section' and homepage.hero_section
+	homepage_sections = frappe.get_all('Homepage Section',
+		filters=[['name', '!=', homepage_hero_section]] if homepage_hero_section else None,
+		order_by='section_order asc'
+	)
+	context.homepage_sections = [frappe.get_doc('Homepage Section', name) for name in homepage_sections]
+
+	context.metatags = context.metatags or frappe._dict({})
+	context.metatags.image = homepage.hero_image or None
+	context.metatags.description = homepage.description or None
+
+	context.explore_link = '/all-products'
diff --git a/erpnext/templates/pages/material_request_info.html b/erpnext/templates/pages/material_request_info.html
index ff3bd65..9d18989 100644
--- a/erpnext/templates/pages/material_request_info.html
+++ b/erpnext/templates/pages/material_request_info.html
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block header_actions %}
-<a class='btn btn-xs btn-default' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
+<a class='btn btn-xs btn-light' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
 {% endblock %}
 
 {% block page_content %}
@@ -70,5 +70,5 @@
 		{% endif %}
 		{% endfor %}
 	</div>
-</div>	
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/pages/non_profit/leave-chapter.html b/erpnext/templates/pages/non_profit/leave-chapter.html
index 009c7af..bc4242f 100644
--- a/erpnext/templates/pages/non_profit/leave-chapter.html
+++ b/erpnext/templates/pages/non_profit/leave-chapter.html
@@ -9,7 +9,7 @@
 					<label for="leave">Why do you want to leave this chapter</label>
 					<input type="text" name="leave" class="form-control" id="leave">
 				</div>
-				<button type="button" class="btn btn-default btn-leave" data-title= "{{ chapter.name }}" id="btn-leave">Submit
+				<button type="button" class="btn btn-light btn-leave" data-title= "{{ chapter.name }}" id="btn-leave">Submit
 				</button>
 			</form>
 		</div>
diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html
index 64fd32a..67a8fed 100644
--- a/erpnext/templates/pages/order.html
+++ b/erpnext/templates/pages/order.html
@@ -8,23 +8,22 @@
 {% block title %}{{ doc.name }}{% endblock %}
 
 {% block header %}
-	<h1>{{ doc.name }}</h1>
+	<h1 class="m-0">{{ doc.name }}</h1>
 {% endblock %}
 
 {% block header_actions %}
-<a class='btn btn-xs btn-default' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
+<a href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
 {% endblock %}
 
 {% block page_content %}
 
 <div class="row transaction-subheading">
-	<div class="col-xs-6">
-
+	<div class="col-6">
 		<span class="indicator {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
 			{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
 		</span>
 	</div>
-	<div class="col-xs-6 text-muted text-right small">
+	<div class="col-6 text-muted text-right small">
 		{{ frappe.utils.formatdate(doc.transaction_date, 'medium') }}
 		{% if doc.valid_till %}
 		<p>
@@ -34,16 +33,14 @@
 	</div>
 </div>
 
-<p class='small' style='padding-top: 15px;'>
-{% if doc.doctype == 'Supplier Quotation' %}
-	<b>{{ doc.supplier_name}}</b>
-{% else %}
-	<b>{{ doc.customer_name}}</b>
-{% endif %}
-{% if doc.contact_display %}
-	<br>
-	{{ doc.contact_display }}
-{% endif %}
+<p class="small my-3">
+	{%- set party_name = doc.supplier_name if doc.doctype == 'Supplier Quotation' else doc.customer_name %}
+	<b>{{ party_name }}</b>
+
+	{% if doc.contact_display and doc.contact_display != party_name %}
+		<br>
+		{{ doc.contact_display }}
+	{% endif %}
 </p>
 
 {% if doc._header %}
@@ -55,7 +52,7 @@
 	<!-- items -->
 	<div class="order-item-table">
 		<div class="row order-items order-item-header text-muted">
-			<div class="col-sm-6 col-xs-6 h6 text-uppercase">
+			<div class="col-sm-6 col-6 h6 text-uppercase">
 				{{ _("Item") }}
 			</div>
 			<div class="col-sm-3 col-xs-3 text-right h6 text-uppercase">
@@ -67,7 +64,7 @@
 		</div>
 		{% for d in doc.items %}
 		<div class="row order-items">
-			<div class="col-sm-6 col-xs-6">
+			<div class="col-sm-6 col-6">
 				{{ item_name_and_description(d) }}
 			</div>
 			<div class="col-sm-3 col-xs-3 text-right">
@@ -85,11 +82,10 @@
 	</div>
 
 	<!-- taxes -->
-	<div class="order-taxes row">
-		<div class="col-sm-6"><!-- empty --></div>
-		<div class="col-sm-6 text-right">
+	<div class="order-taxes d-flex justify-content-end">
+		<table>
 			{% include "erpnext/templates/includes/order/order_taxes.html" %}
-		</div>
+		</table>
 	</div>
 </div>
 
@@ -115,7 +111,7 @@
 							<div class="control-input">
 								<input class="form-control" type="number" min="0" max="{{ available_loyalty_points }}" id="loyalty-point-to-redeem">
 							</div>
-							<p class="help-box small text-muted hidden-xs"> Available Points: {{ available_loyalty_points }} </p>
+							<p class="help-box small text-muted d-none d-sm-block"> Available Points: {{ available_loyalty_points }} </p>
 						</div>
 					</div>
 					{% endif %}
diff --git a/erpnext/templates/pages/product_search.html b/erpnext/templates/pages/product_search.html
index f9efd48..6a5425b 100644
--- a/erpnext/templates/pages/product_search.html
+++ b/erpnext/templates/pages/product_search.html
@@ -25,7 +25,7 @@
 	<div style="text-align: center;">
 		<div class="more-btn"
 			style="display: none; text-align: center;">
-            <button class="btn btn-default">{{ _("More...") }}</button>
+            <button class="btn btn-light">{{ _("More...") }}</button>
 		</div>
 	</div>
 </div>
diff --git a/erpnext/templates/pages/projects.html b/erpnext/templates/pages/projects.html
index baa2ae6..7e294e0 100644
--- a/erpnext/templates/pages/projects.html
+++ b/erpnext/templates/pages/projects.html
@@ -20,11 +20,11 @@
 	aria-valuemin="0" aria-valuemax="100" style="width:{{ doc.percent_complete|round|int }}%;">
 	</div>
 </div>
-{% endif %}		
+{% endif %}
 
 <div class="clearfix">
   <h4 style="float: left;">{{ _("Tasks") }}</h4>
-  <a class="btn btn-secondary btn-default btn-sm" style="float: right; position: relative; top: 10px;" href='/tasks?new=1&project={{ doc.project_name }}'>{{ _("New task") }}</a>
+  <a class="btn btn-secondary btn-light btn-sm" style="float: right; position: relative; top: 10px;" href='/tasks?new=1&project={{ doc.project_name }}'>{{ _("New task") }}</a>
 </div>
 
 <p>
diff --git a/erpnext/templates/pages/task_info.html b/erpnext/templates/pages/task_info.html
index 6cfac28..6cd6a7e 100644
--- a/erpnext/templates/pages/task_info.html
+++ b/erpnext/templates/pages/task_info.html
@@ -20,7 +20,7 @@
 		<div class="page-header-actions-block" data-html-block="header-actions">
 			<button type="submit" class="btn btn-primary btn-sm btn-form-submit">
 	    		{{ __("Update") }}</button>
-	    		<a href="tasks" class="btn btn-default btn-sm">
+	    		<a href="tasks" class="btn btn-light btn-sm">
 	    		{{ __("Cancel") }}</a>
 		</div>
     </div>
@@ -91,7 +91,7 @@
 		{% endfor %}
 	</div>
 	<div class="comment-form-wrapper">
-		<a class="add-comment btn btn-default btn-sm">{{ __("Add Comment") }}</a>
+		<a class="add-comment btn btn-light btn-sm">{{ __("Add Comment") }}</a>
 		<div style="display: none;" id="comment-form">
 			<p>{{ __("Add Comment") }}</p>
 			<form>