diff --git a/erpnext/templates/includes/footer/footer_extension.html b/erpnext/templates/includes/footer/footer_extension.html
index c7f0d06..0072dc2 100644
--- a/erpnext/templates/includes/footer/footer_extension.html
+++ b/erpnext/templates/includes/footer/footer_extension.html
@@ -6,7 +6,7 @@
 		aria-label="{{ _('Your email address...') }}"
 		aria-describedby="footer-subscribe-button">
 	<div class="input-group-append">
-		<button class="btn btn-sm btn-default"
+		<button class="btn btn-sm btn-secondary pl-3 pr-3 ml-2"
 			type="button" id="footer-subscribe-button">{{ _("Get Updates") }}</button>
 	</div>
 </div>
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index f56dc3a..dc9ee23 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -1,5 +1,5 @@
 {% macro product_image_square(website_image, css_class="") %}
-<div class="product-image product-image-square
+<div class="product-image product-image-square h-100 rounded
 	{% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
 	{% if website_image -%}
 	style="background-image: url('{{ frappe.utils.quoted(website_image) | abs_url }}');"
diff --git a/erpnext/templates/includes/order/order_macros.html b/erpnext/templates/includes/order/order_macros.html
index 3f2c1f2..d95b289 100644
--- a/erpnext/templates/includes/order/order_macros.html
+++ b/erpnext/templates/includes/order/order_macros.html
@@ -3,7 +3,7 @@
 {% macro item_name_and_description(d) %}
 	<div class="row item_name_and_description">
 		<div class="col-xs-4 col-sm-2 order-image-col">
-			<div class="order-image">
+			<div class="order-image h-100">
 				{% if d.thumbnail or d.image %}
 					{{ product_image(d.thumbnail or d.image, no_border=True) }}
 				{% else %}
@@ -18,6 +18,9 @@
 			<div class="text-muted small item-description">
 				{{ html2text(d.description) | truncate(140) }}
 			</div>
+			<span class="text-muted mt-2 d-l-n order-qty">
+				{{ _("Qty ") }}({{ d.get_formatted("qty") }})
+			</span>
 		</div>
 	</div>
 {% endmacro %}
diff --git a/erpnext/templates/includes/order/order_taxes.html b/erpnext/templates/includes/order/order_taxes.html
index b821e62..0060ab3 100644
--- a/erpnext/templates/includes/order/order_taxes.html
+++ b/erpnext/templates/includes/order/order_taxes.html
@@ -1,84 +1,111 @@
 {% if doc.taxes %}
-<tr>
-	<td class="text-left" colspan="1">
-		{{ _("Net Total") }}
-	</td>
-	<td class="text-right totals" colspan="3">
-		{{ doc.get_formatted("net_total") }}
-	</td>
-</tr>
+	<div class="w-100 order-taxes mt-5">
+		<div class="col-4 d-flex  border-btm pb-5">
+			<div class="item-grand-total col-8">
+				{{ _("Net Total") }}
+			</div>
+			<div class="item-grand-total col-4 text-right pr-0">
+				{{ doc.get_formatted("net_total") }}
+			</div>
+		</div>
+	</div>
 {% endif %}
 
 {% for d in doc.taxes %}
 	{% if d.base_tax_amount %}
-	<tr>
-		<td class="text-left" colspan="1">
-			{{ d.description }}
-		</td>
-		<td class="text-right totals" colspan="3">
-			{{ d.get_formatted("base_tax_amount") }}
-		</td>
-	</tr>
+		<div class="order-taxes w-100 mt-5">
+			<div class="col-4 d-flex  border-btm pb-5">
+				<div class="item-grand-total col-8">
+					{{ d.description }}
+				</div>
+				<div class="item-grand-total col-4 text-right pr-0">
+					{{ doc.get_formatted("net_total") }}
+				</div>
+			</div>
+		</div>
 	{% endif %}
 {% endfor %}
 
 {% if doc.doctype == 'Quotation' %}
 	{% if doc.coupon_code %}
-		<tr>
-			<td class="text-left total-discount" colspan="1">
-				{{ _("Savings") }}
-			</td>
-			<td class="text-right tot_quotation_discount total-discount totals" colspan="3">
-				{% 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) }}
-			</td>
-		</tr>
+		<div class="w-100 mt-5 order-taxes font-weight-bold">
+			<div class="col-4 d-flex  border-btm pb-5">
+				<div class="item-grand-total col-8">
+					{{ _("Savings") }}
+				</div>
+				<div class="item-grand-total col-4 text-right pr-0">
+					{% 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) }} </div>
+			</div>
+		</div>
 	{% endif %}
 {% endif %}
 
 {% if doc.doctype == 'Sales Order' %}
 	{% if doc.coupon_code %}
-		<tr>
-			<td class="text-left total-discount" colspan="2" style="padding-right: 2rem;">
-				{{ _("Applied Coupon Code") }}
-			</td>
-			<td class="text-right total-discount">
-				<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>
-			</td>
-		</tr>
-		<tr>
-			<td class="text-left total-discount" colspan="2">
-				{{ _("Savings") }}
-			</td>
-			<td class="text-right total-discount">
-				<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>
-			</td>
-		</tr>
+		<div class="w-100 order-taxes mt-5">
+			<div class="col-4 d-flex  border-btm pb-5">
+				<div class="item-grand-total col-8">
+					{{ _("Total Amount") }}
+				</div>
+				<div class="item-grand-total col-4 text-right pr-0">
+					<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>
+				</div>
+			</div>
+		</div>
+		<div class="order-taxes w-100 mt-5">
+			<div class="col-4 d-flex">
+				<div class="item-grand-total col-8">
+					{{ _("Applied Coupon Code") }}
+				</div>
+				<div class="item-grand-total col-4 text-right pr-0">
+					<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>
+				</div>
+			</div>
+		</div>
+		<div class="order-taxes mt-5">
+			<div class="col-4 d-flex border-btm pb-5">
+				<div class="item-grand-total col-8">
+					{{ _("Savings") }}
+				</div>
+				<div class="item-grand-total col-4 text-right pr-0">
+					<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>
+				</div>
+			</div>
+		</div>
 	{% endif %}
 {% endif %}
 
-<tr>
-	<th class="text-left item-grand-total" colspan="1">
-		{{ _("Grand Total") }}
-	</th>
-	<th class="text-right item-grand-total totals" colspan="3">
-		{{ doc.get_formatted("grand_total") }}
-	</th>
-</tr>
+<div class="w-100 mt-5 order-taxes font-weight-bold">
+	<div class="col-4 d-flex">
+		<div class="item-grand-total col-8">
+			{{ _("Grand Total") }}
+		</div>
+		<div class="item-grand-total col-4 text-right pr-0">
+			{{ doc.get_formatted("grand_total") }}
+		</div>
+	</div>
+</div>
diff --git a/erpnext/templates/includes/transaction_row.html b/erpnext/templates/includes/transaction_row.html
index 3cfb8d8..72d498c 100644
--- a/erpnext/templates/includes/transaction_row.html
+++ b/erpnext/templates/includes/transaction_row.html
@@ -1,20 +1,22 @@
 <div class="web-list-item transaction-list-item">
-	<div class="row">
+	<div class="row align-items-center">
 		<div class="col-sm-4">
-			<span class="indicator small {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }}">
-			{{ doc.name }}</span>
+			<span class="list-item-name font-weight-bold">{{ doc.name }}</span>
 			<div class="small text-muted transaction-time"
 				title="{{ frappe.utils.format_datetime(doc.modified, "medium") }}">
 				{{ frappe.utils.global_date_format(doc.modified) }}
 			</div>
 		</div>
-		<div class="col-sm-5">
+		<div class="col-sm-3">
+			<span class="indicator-pill {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }} list-item-status">{{doc.status}}</span>
+		</div>
+		<div class="col-sm-2">
 			<div class="small text-muted items-preview ellipsis ellipsis-width">
 				{{ doc.items_preview }}
 			</div>
 		</div>
 		{% if doc.get('grand_total') %}
-			<div class="col-sm-3 text-right bold">
+			<div class="col-sm-3 text-right font-weight-bold item-total">
 				{{ doc.get_formatted("grand_total") }}
 			</div>
 		{% endif %}
diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html
index ec1d497..6b354b2 100644
--- a/erpnext/templates/pages/order.html
+++ b/erpnext/templates/pages/order.html
@@ -5,149 +5,159 @@
 	{% include "templates/includes/breadcrumbs.html" %}
 {% endblock %}
 
-{% block title %}{{ doc.name }}{% endblock %}
+{% block title %}
+	{{ doc.name }}
+{% endblock %}
 
 {% block header %}
-	<h2 class="m-0">{{ doc.name }}</h2>
+	<h3 class="m-0">{{ doc.name }}</h3>
 {% endblock %}
 
 {% block header_actions %}
-	<div class="dropdown">
-		<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-			<span class="font-md">{{ _('Actions') }}</span>
-			<b class="caret"></b>
-		</button>
-		<ul class="dropdown-menu dropdown-menu-right" role="menu">
-			{% if doc.doctype == 'Purchase Order' and show_make_pi_button %}
-				<a class="dropdown-item" href="/api/method/erpnext.buying.doctype.purchase_order.purchase_order.make_purchase_invoice_from_portal?purchase_order_name={{ doc.name }}" data-action="make_purchase_invoice">{{ _("Make Purchase Invoice") }}</a>
-			{% endif %}
-			<a class="dropdown-item" href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}'
-				target="_blank" rel="noopener noreferrer">
-				{{ _("Print") }}
-			</a>
-		</ul>
+	<div class="row">
+		<div class="dropdown">
+			<button class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+				<span class="font-md">{{ _('Actions') }}</span>
+				<b class="caret"></b>
+			</button>
+			<ul class="dropdown-menu dropdown-menu-right" role="menu">
+				{% if doc.doctype == 'Purchase Order' and show_make_pi_button %}
+					<a class="dropdown-item"
+						href="/api/method/erpnext.buying.doctype.purchase_order.purchase_order.make_purchase_invoice_from_portal?purchase_order_name={{ doc.name }}"
+						data-action="make_purchase_invoice">{{ _("Make Purchase Invoice") }}
+					</a>
+				{% endif %}
+				<a class="dropdown-item"
+					href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank"
+					rel="noopener noreferrer">
+					{{ _("Print") }}
+				</a>
+			</ul>
+		</div>
+		<div class="form-column col-sm-6">
+			<div class="page-header-actions-block" data-html-block="header-actions">
+				<p>
+					<a href="/api/method/erpnext.accounts.doctype.payment_request.payment_request.make_payment_request?dn={{ doc.name }}&dt={{ doc.doctype }}&submit_doc=1&order_type=Shopping Cart"
+						class="btn btn-primary btn-sm" id="pay-for-order">
+						{{ _("Pay") }} {{doc.get_formatted("grand_total") }}
+					</a>
+				</p>
+			</div>
+		</div>
 	</div>
 {% endblock %}
 
 {% block page_content %}
-	<div class="row transaction-subheading">
-		<div class="col-6">
-			<span class="font-md indicator-pill {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
-				{% if doc.doctype == "Quotation" and not doc.docstatus %}
-					{{ _("Pending") }}
-				{% else %}
-					{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
+	<div>
+		<div class="row transaction-subheading  mt-1">
+			<div class="col-6 text-muted small mt-1">
+				{{ frappe.utils.format_date(doc.transaction_date, 'medium') }}
+				{% if doc.valid_till %}
+					<p>
+						{{ _("Valid Till") }}: {{ frappe.utils.format_date(doc.valid_till, 'medium') }}
+					</p>
 				{% endif %}
-			</span>
+			</div>
 		</div>
-		<div class="col-6 text-muted text-right small pt-3">
-			{{ frappe.utils.format_date(doc.transaction_date, 'medium') }}
-			{% if doc.valid_till %}
-			<p>
-			{{ _("Valid Till") }}: {{ frappe.utils.format_date(doc.valid_till, 'medium') }}
-			</p>
-			{% endif %}
-		</div>
-	</div>
-
-	<p class="small my-3">
-		{%- set party_name = doc.supplier_name if doc.doctype in ['Supplier Quotation', 'Purchase Invoice', 'Purchase Order'] 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 %}
-		{{ doc._header }}
-	{% endif %}
-
-	<div class="order-container">
-		<!-- items -->
-		<table class="order-item-table w-100 table">
-			<thead class="order-items order-item-header">
-				<th width="60%">
-					{{ _("Item") }}
-				</th>
-				<th width="20%" class="text-right">
-					{{ _("Quantity") }}
-				</th>
-				<th width="20%" class="text-right">
-					{{ _("Amount") }}
-				</th>
-			</thead>
-			<tbody>
-			{% for d in doc.items %}
-			<tr class="order-items">
-				<td>
-					{{ item_name_and_description(d) }}
-				</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>
+		<div class="row indicator-container mt-2">
+			<div class="col-10">
+				<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 %}
+						{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
 					{% endif %}
-				</td>
-				<td class="text-right">
-					{{ d.get_formatted("amount")	 }}
-					<p class="text-muted small">{{ _("Rate:") }}&nbsp;{{ d.get_formatted("rate") }}</p>
-				</td>
-			</tr>
-			{% endfor %}
-			</tbody>
-		</table>
-		<!-- taxes -->
-		<div class="order-taxes d-flex justify-content-end">
-			<table>
+				</span>
+			</div>
+			<div class="text-right col-2">
+				{%- set party_name = doc.supplier_name if doc.doctype in ['Supplier Quotation', 'Purchase Invoice', 'Purchase
+				Order'] else doc.customer_name %}
+				<b>{{ party_name }}</b>
+
+				{% if doc.contact_display and doc.contact_display != party_name %}
+					<br>
+					{{ doc.contact_display }}
+				{% endif %}
+			</div>
+		</div>
+
+		{% if doc._header %}
+			{{ doc._header }}
+		{% endif %}
+
+		<div class="order-container mt-4">
+			<!-- items -->
+			<div class="w-100">
+				<div class="order-items order-item-header mb-1 row text-muted">
+					<span class="col-5">
+						{{ _("Item") }}
+					</span>
+					<span class="d-s-n col-3">
+						{{ _("Quantity") }}
+					</span>
+					<span class="col-2 pl-10">
+						{{ _("Rate") }}
+					</span>
+					<span class="col-2 text-right">
+						{{ _("Amount") }}
+					</span>
+				</div>
+				{% for d in doc.items %}
+				<div class="order-items row align-items-center">
+					<span class="order-item-name col-5 pr-0">
+						{{ item_name_and_description(d) }}
+					</span>
+
+					<span class="d-s-n col-3 pl-10">
+						{{ d.get_formatted("qty") }}
+					</span>
+					<span class="order-rate pl-4 col-2">
+						{{ d.get_formatted("rate") }}
+					</span>
+					<span class="col-2 text-right">
+						{{ d.get_formatted("amount") }}
+					</span>
+				</div>
+				{% endfor %}
+			</div>
+
+			<!-- taxes -->
+			<div class="">
 				{% include "erpnext/templates/includes/order/order_taxes.html" %}
-			</table>
+			</div>
 		</div>
 	</div>
 
 	{% if enabled_checkout and ((doc.doctype=="Sales Order" and doc.per_billed <= 0)
-		or (doc.doctype=="Sales Invoice" and doc.outstanding_amount > 0)) %}
+		or (doc.doctype=="Sales Invoice" and doc.outstanding_amount> 0)) %}
 		<div class="panel panel-default">
-			<div class="panel-heading">
-				<div class="row">
-					<div class="form-column col-sm-6 address-title">
-						<strong>Payment</strong>
-					</div>
-				</div>
-			</div>
 			<div class="panel-collapse">
 				<div class="panel-body text-muted small">
 					<div class="row">
 						<div class="form-column col-sm-6">
 							{% if available_loyalty_points %}
+							<div class="panel-heading">
+								<div class="row">
+									<div class="form-column col-sm-6 address-title">
+										<strong>Loyalty Points</strong>
+									</div>
+								</div>
+							</div>
+
 							<div class="form-group">
 								<div class="h6">Enter Loyalty Points</div>
 								<div class="control-input-wrapper">
 									<div class="control-input">
-										<input class="form-control" type="number" min="0" max="{{ available_loyalty_points }}" id="loyalty-point-to-redeem">
+										<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 d-none d-sm-block"> 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 %}
 						</div>
-
-						<div class="form-column col-sm-6">
-							<div id="loyalty-points-status" style="text-align: right"></div>
-							<div class="page-header-actions-block" data-html-block="header-actions">
-								<p class="mt-2" style="float: right;">
-									<a href="/api/method/erpnext.accounts.doctype.payment_request.payment_request.make_payment_request?dn={{ doc.name }}&dt={{ doc.doctype }}&submit_doc=1&order_type=Shopping Cart"
-										class="btn btn-primary btn-sm"
-										id="pay-for-order">
-										{{ _("Pay") }} {{ doc.get_formatted("grand_total") }}
-									</a>
-								</p>
-							</div>
-						</div>
-
 					</div>
-
 				</div>
 			</div>
 		</div>
@@ -172,17 +182,17 @@
 			</div>
 		</div>
 	{% endif %}
-	</div>
 
 	{% if doc.terms %}
 		<div class="terms-and-condition text-muted small">
-			<hr><p>{{ doc.terms }}</p>
+			<hr>
+			<p>{{ doc.terms }}</p>
 		</div>
 	{% endif %}
 {% endblock %}
 
 {% block script %}
-	<script> {% include "templates/pages/order.js" %} </script>
+	<script> {% include "templates/pages/order.js" %}</script>
 	<script>
 		window.doc_info = {
 			customer: '{{doc.customer}}',
@@ -192,4 +202,4 @@
 			currency: '{{ doc.currency }}'
 		}
 	</script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file