diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html
index af7af11677..07dd676e77 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>