diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index e07bcbd28ec..429f4ca35df 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -459,6 +459,7 @@ body.product-page {
 		min-height: 0px;
 
 		.r-item-image {
+			min-height: 100px;
 			width: 40%;
 
 			.r-product-image {
@@ -480,6 +481,7 @@ body.product-page {
 		.r-item-info {
 			font-size: 14px;
 			padding-right: 0;
+			padding-left: 10px;
 			width: 60%;
 
 			a {
@@ -672,18 +674,6 @@ body.product-page {
 				img {
 					max-height: 112px;
 				}
-
-				.no-image-cart-item {
-					max-height: 112px;
-					display: flex; justify-content: center;
-					background-color: var(--gray-200);
-					align-items: center;
-					color: var(--gray-400);
-					margin-top: .15rem;
-					border-radius: 6px;
-					height: 100%;
-					font-size: 24px;
-				}
 			}
 
 			.cart-items {
@@ -862,6 +852,18 @@ body.product-page {
 	}
 }
 
+.no-image-cart-item {
+	max-height: 112px;
+	display: flex; justify-content: center;
+	background-color: var(--gray-200);
+	align-items: center;
+	color: var(--gray-400);
+	margin-top: .15rem;
+	border-radius: 6px;
+	height: 100%;
+	font-size: 24px;
+}
+
 .cart-empty.frappe-card {
 	min-height: 76vh;
 	@include flex(flex, center, center, column);
diff --git a/erpnext/templates/includes/order/order_macros.html b/erpnext/templates/includes/order/order_macros.html
index 7b3c9a41318..3f2c1f2a1df 100644
--- a/erpnext/templates/includes/order/order_macros.html
+++ b/erpnext/templates/includes/order/order_macros.html
@@ -1,43 +1,49 @@
-{% from "erpnext/templates/includes/macros.html" import product_image_square %}
+{% from "erpnext/templates/includes/macros.html" import product_image %}
 
 {% 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">
-                {{ product_image_square(d.thumbnail or d.image) }}
-            </div>
-        </div>
-        <div class="col-xs-8 col-sm-10">
-            {{ d.item_code }}
-            <div class="text-muted small item-description">
+	<div class="row item_name_and_description">
+		<div class="col-xs-4 col-sm-2 order-image-col">
+			<div class="order-image">
+				{% if d.thumbnail or d.image %}
+					{{ product_image(d.thumbnail or d.image, no_border=True) }}
+				{% else %}
+					<div class="no-image-cart-item" style="min-height: 100px;">
+						{{ frappe.utils.get_abbr(d.item_name) or "NA" }}
+					</div>
+				{% endif %}
+			</div>
+		</div>
+		<div class="col-xs-8 col-sm-10">
+			{{ d.item_code }}
+			<div class="text-muted small item-description">
 				{{ html2text(d.description) | truncate(140) }}
 			</div>
-        </div>
-    </div>
+		</div>
+	</div>
 {% endmacro %}
 
 {% macro item_name_and_description_cart(d) %}
-    <div class="row item_name_dropdown">
-        <div class="col-xs-4 col-sm-4 order-image-col">
-            <div class="order-image">
-             {{ product_image_square(d.thumbnail or d.image) }}
-            </div>
-        </div>
-        <div class="col-xs-8 col-sm-8">
-           {{ d.item_name|truncate(25) }}
-			<div class="input-group number-spinner">
-                <span class="input-group-btn">
-                    <button class="btn btn-light cart-btn" data-dir="dwn">
-                        –</button>
-                </span>
-	            <input class="form-control text-right cart-qty"
-		            value = "{{ d.get_formatted('qty') }}"
-		            data-item-code="{{ d.item_code }}">
-                <span class="input-group-btn">
-                    <button class="btn btn-light cart-btn" data-dir="up">
-                        +</button>
-                </span>
+	<div class="row item_name_dropdown">
+		<div class="col-xs-4 col-sm-4 order-image-col">
+			<div class="order-image">
+			 {{ product_image_square(d.thumbnail or d.image) }}
 			</div>
-        </div>
-    </div>
+		</div>
+		<div class="col-xs-8 col-sm-8">
+		   {{ d.item_name|truncate(25) }}
+			<div class="input-group number-spinner">
+				<span class="input-group-btn">
+					<button class="btn btn-light cart-btn" data-dir="dwn">
+						–</button>
+				</span>
+				<input class="form-control text-right cart-qty"
+					value = "{{ d.get_formatted('qty') }}"
+					data-item-code="{{ d.item_code }}">
+				<span class="input-group-btn">
+					<button class="btn btn-light cart-btn" data-dir="up">
+						+</button>
+				</span>
+			</div>
+		</div>
+	</div>
 {% endmacro %}
diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html
index 19191d89096..a10870db278 100644
--- a/erpnext/templates/pages/order.html
+++ b/erpnext/templates/pages/order.html
@@ -12,175 +12,173 @@
 {% endblock %}
 
 {% block header_actions %}
-<div class="dropdown">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-		<span>{{ _('Actions') }}</span>
-		<b class="caret"></b>
-	</button>
-	<ul class="dropdown-menu dropdown-menu-right" role="menu">
-		{% if doc.doctype == 'Purchase Order' %}
-		<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="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' %}
+				<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>
 {% endblock %}
 
 {% block page_content %}
-
-<div class="row transaction-subheading">
-	<div class="col-6">
-		<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 %}
-		</span>
-	</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 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") }}
 				{% 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>
-			{% include "erpnext/templates/includes/order/order_taxes.html" %}
-		</table>
-	</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)) %}
-
-<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>
+			</span>
 		</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="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">
-							</div>
-							<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>
-{% endif %}
-
-
-{% if attachments %}
-<div class="order-item-table">
-	<div class="row order-items order-item-header text-muted">
-		<div class="col-sm-12 h6 text-uppercase">
-			{{ _("Attachments") }}
-		</div>
-	</div>
-	<div class="row order-items">
-		<div class="col-sm-12">
-			{% for attachment in attachments %}
-			<p class="small">
-				<a href="{{ attachment.file_url }}" target="blank"> {{ attachment.file_name }} </a>
+		<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>
-			{% endfor %}
+			{% endif %}
 		</div>
 	</div>
-</div>
-{% endif %}
-</div>
-{% if doc.terms %}
-<div class="terms-and-condition text-muted small">
-	<hr><p>{{ doc.terms }}</p>
-</div>
-{% endif %}
+
+	<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>
+					{% 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>
+				{% include "erpnext/templates/includes/order/order_taxes.html" %}
+			</table>
+		</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)) %}
+		<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="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">
+									</div>
+									<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>
+	{% endif %}
+
+
+	{% if attachments %}
+		<div class="order-item-table">
+			<div class="row order-items order-item-header text-muted">
+				<div class="col-sm-12 h6 text-uppercase">
+					{{ _("Attachments") }}
+				</div>
+			</div>
+			<div class="row order-items">
+				<div class="col-sm-12">
+					{% for attachment in attachments %}
+					<p class="small">
+						<a href="{{ attachment.file_url }}" target="blank"> {{ attachment.file_name }} </a>
+					</p>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	{% endif %}
+	</div>
+
+	{% if doc.terms %}
+		<div class="terms-and-condition text-muted small">
+			<hr><p>{{ doc.terms }}</p>
+		</div>
+	{% endif %}
 {% endblock %}
 
 {% block script %}