diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index e07bcbd28e..429f4ca35d 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 7b3c9a4131..3f2c1f2a1d 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 19191d8909..f7775d5a28 100644
--- a/erpnext/templates/pages/order.html
+++ b/erpnext/templates/pages/order.html
@@ -14,7 +14,7 @@
 {% block header_actions %}
 <div class="dropdown">
 	<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-		<span>{{ _('Actions') }}</span>
+		<span class="font-md">{{ _('Actions') }}</span>
 		<b class="caret"></b>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -34,7 +34,7 @@
 
 <div class="row transaction-subheading">
 	<div class="col-6">
-		<span class="indicator-pill {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
+		<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 %}