diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js
index 71dd1be..c0b8c35 100644
--- a/erpnext/accounts/page/pos/pos.js
+++ b/erpnext/accounts/page/pos/pos.js
@@ -19,7 +19,7 @@
 
 erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 	init: function (wrapper) {
-		this.page_len = 20;
+		this.page_len = 2;
 		this.page = wrapper.page;
 		this.wrapper = $(wrapper).find('.page-content');
 		this.set_indicator();
@@ -439,17 +439,52 @@
 		// 	me.make_item_list();
 		// });
 
-		this.wrapper.find(".btn-more").on("click", function() {
-			me.page_len += 20;
+		me.toggle_more_btn();
+
+		this.wrapper.on("click", ".btn-more", function() {
+			console.log('asdf')
+			me.page_len += 2;
 			me.items = me.get_items();
 			me.make_item_list();
-		})
+			me.toggle_more_btn();
+		});
 
-		this.wrapper.find(".edit-customer-btn").on("click", function() {
+		this.page.wrapper.on("click", ".edit-customer-btn", function() {
 			me.update_customer()
 		})
 	},
 
+	toggle_more_btn: function() {
+		if(!this.items || this.items.length <= this.page_len) {
+			this.wrapper.find(".btn-more").hide();
+		} else {
+			this.wrapper.find(".btn-more").show();
+		}
+	},
+
+	toggle_totals_area: function(show) {
+
+		if(!show) {
+			show = this.is_totals_area_collapsed;
+		}
+
+		var totals_area = this.wrapper.find('.totals-area');
+		totals_area.find('.net-total-area, .tax-area, .discount-amount-area')
+			.toggle(show);
+
+		if(show) {
+			totals_area.find('.collapse-btn i')
+				.removeClass('octicon-chevron-down')
+				.addClass('octicon-chevron-up');
+		} else {
+			totals_area.find('.collapse-btn i')
+				.removeClass('octicon-chevron-up')
+				.addClass('octicon-chevron-down');
+		}
+
+		this.is_totals_area_collapsed = !show;
+	},
+
 	make_list_customers: function () {
 		var me = this;
 		this.list_customers_btn = this.page.wrapper.find('.list-customers-btn');
@@ -458,6 +493,9 @@
 		this.list_customers = this.wrapper.find('.list-customers');
 		this.numeric_keypad = this.wrapper.find('.numeric_keypad');
 
+		me.render_list_customers();
+		me.toggle_totals_area(false);
+
 		this.page.wrapper.on('click', '.list-customers-btn', function() {
 			$(this).toggleClass("view_customer");
 			if($(this).hasClass("view_customer")) {
@@ -472,7 +510,8 @@
 					me.party_field.$input.attr('disabled', false);
 				}
 				me.pos_bill.show();
-				me.list_customers.hide()
+				me.toggle_totals_area(false);
+				me.list_customers.hide();
 				if(me.frm.doc.items.length > 0) {
 					me.numeric_keypad.show();
 				}
@@ -484,6 +523,9 @@
 			me.refresh();
 			me.set_focus();
 		});
+		this.pos_bill.on('click', '.collapse-btn', function() {
+			me.toggle_totals_area();
+		});
 	},
 	
 	bind_numeric_keypad: function() {
@@ -535,22 +577,17 @@
 		var me = this;
 
 		this.removed_items = [];
-		this.list_customers.empty();
+		// this.list_customers.empty();
 		this.si_docs = this.get_doc_from_localstorage();
 
-		if (!this.si_docs.length) {
+		if (!this.si_docs.length) {fv
 			this.list_customers.append(
 				'<div style="padding: 12px; margin-left:-12px;">' + __("No offline records.") + '</div>'
 			)
 			return;
 		}
-		var html = '<div class="row list-row list-row-head pos-invoice-list">\
-			<div class="col-xs-1"><input class="list-select-all" type="checkbox"></div>\
-			<div class="col-xs-3">Customer</div>\
-			<div class="col-xs-2 text-left">Status</div>\
-			<div class="col-xs-3 text-right">Paid Amount</div>\
-			<div class="col-xs-3 text-right">Grand Total</div>\
-		</div>';
+
+		var html = "";
 		this.si_docs.forEach(function (data, i) {
 			for (key in data) {
 				html += frappe.render_template("pos_invoice_list", {
@@ -563,7 +600,7 @@
 				});
 			}
 		});
-		this.list_customers.append(html);
+		this.list_customers.find('.list-customers-table').html(html);
 
 		this.list_customers.find('.list-column').click(function () {
 			me.list_customers.hide();
@@ -667,11 +704,7 @@
 				},
 				item: function (item, input) {
 					var d = item;
-					var html = "<span>" + __(d.label || d.value) + "</span>\
-						<span class='link-btn'>\
-							<a class='btn-open no-decoration' title='" + __('Open Link') + "'>\
-								<i class='octicon octicon-arrow-right'></i></a>\
-						</span>";
+					var html = "<span>" + __(d.label || d.value) + "</span>";
 					return $('<li></li>')
 						.data('item.autocomplete', d)
 						.html('<a><p>' + html + '</p></a>')
@@ -710,12 +743,16 @@
 					customer.action.apply(me);
 					return;
 				}
+				me.toggle_list_customer(false);
+				me.toggle_edit_button(true);
 				me.update_customer_data(customer);
 				me.refresh();
 				me.set_focus();
 			})
 			.on('focus', function (e) {
 				$(e.target).val('').trigger('input');
+				me.toggle_edit_button(false);
+				me.toggle_list_customer(true);
 			})
 			.on("awesomplete-selectcomplete", function (e) {
 				var item = me.party_field.awesomeplete
@@ -727,6 +764,14 @@
 			});
 	},
 
+	toggle_edit_button: function(flag) {
+		this.page.wrapper.find('.edit-customer-btn').toggle(flag);
+	},
+
+	toggle_list_customer: function(flag) {
+		this.list_customers.toggle(flag);
+	},
+
 	add_customer: function() {
 		this.frm.doc.customer = "";
 		this.update_customer()
@@ -909,6 +954,26 @@
 					})).tooltip().appendTo($wrap);
 				}
 			});
+			
+			$wrap.append(`
+				<div class="image-view-item btn-more text-muted text-center">
+					<div class="image-view-body">
+						<i class="mega-octicon octicon-package"></i>
+						<div>Load more items</div>
+					</div>
+				</div>
+			`);
+
+			me.toggle_more_btn();
+			// $(frappe.render_template("pos_item", {
+			// 	item_code: 'btn_more',
+			// 	item_price: format_currency(me.price_list_data[obj.name], me.frm.doc.currency),
+			// 	item_name: obj.name === obj.item_name ? "" : obj.item_name,
+			// 	item_image: obj.image,
+			// 	color: frappe.get_palette(obj.item_name),
+			// 	abbr: frappe.get_abbr(obj.item_name)
+			// })).tooltip().appendTo($wrap);
+
 		} else {
 			$("<p class='text-muted small' style='padding-left: 10px'>"
 				+__("Not items found")+"</p>").appendTo($wrap)
@@ -1186,7 +1251,7 @@
 			this.add_new_item_to_grid();
 
 		this.update_paid_amount_status(false)
-		this.wrapper.find(".item-cart").scrollTop(1000);
+		this.wrapper.find(".item-cart-items").scrollTop(1000);
 	},
 
 	add_new_item_to_grid: function () {
@@ -1317,7 +1382,7 @@
 			me.refresh();
 			me.toggle_input_field();
 			me.set_focus();
-		})
+		}, "fa fa-plus")
 		if (this.frm.doc.docstatus == 0) {
 			// this.page.set_primary_action(__("Pay"), function () {
 			// 	me.validate();
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index bb1195a..d92559e 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -295,12 +295,13 @@
   margin-bottom: 15px;
 }
 .item-cart-items {
-  height: calc(100vh - 500px);
+  height: calc(100vh - 526px);
   overflow: auto;
   border: 1px solid #d1d8dd;
   border-top: none;
 }
-.item-cart-items .no-items-message {
+.pos .no-items-message {
+  min-height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -316,14 +317,29 @@
   overflow: hidden;
 }
 .pos .item-list {
-  border-left: 1px solid #d1d8dd;
-  border-right: 1px solid #d1d8dd;
-  height: calc(100vh - 180px);
+  border: 1px solid #d1d8dd;
+  border-top: none;
+  max-height: calc(100vh - 190px);
   overflow: auto;
 }
+@media (max-width: 767px) {
+  .pos .item-list {
+    max-height: initial;
+  }
+}
 .pos .item-list .image-field {
   height: 140px;
 }
+.pos .item-list .pos-item-wrapper {
+  position: relative;
+}
+.pos .item-list .price-info {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 9px 15px;
+}
 .pos-bill-toolbar {
   margin-top: 10px;
 }
@@ -337,3 +353,17 @@
 .pos-selected-item-action > .pos-list-row {
   border: none;
 }
+.edit-customer-btn {
+  position: absolute;
+  right: 57px;
+  top: 15px;
+  z-index: 100;
+}
+.btn-more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background-color: #fafbfc;
+  min-height: 200px;
+}
diff --git a/erpnext/public/js/pos/customer_toolbar.html b/erpnext/public/js/pos/customer_toolbar.html
index 86a38c3..a2cd834 100644
--- a/erpnext/public/js/pos/customer_toolbar.html
+++ b/erpnext/public/js/pos/customer_toolbar.html
@@ -1,5 +1,11 @@
-<div class="pos-bill-toolbar col-sm-9" style="display: flex;">
-	<div class="party-area" style="flex: 1;"></div>
+<div class="pos-bill-toolbar col-xs-9" style="display: flex; width: 70%;">
+	<div class="party-area" style="flex: 1;">
+		<span class="edit-customer-btn text-muted" style="display: inline;">
+			<a class="btn-open no-decoration" title="Edit Customer">
+				<i class="octicon octicon-pencil"></i>
+			</a>	
+		</span>
+	</div>
 	<button class="btn btn-default list-customers-btn" style="margin-left: 12px">
 		<i class="octicon octicon-organization"></i>
 	</button>
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index 827c794..54abf7e 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -1,7 +1,7 @@
 <div class="pos">
 	<div class="row">
 		<div class="col-sm-5 pos-bill-wrapper">
-			<div class="col-sm-12"><h6 class="form-section-heading uppercase">Item Cart</h6></div>
+			<div class="col-sm-12"><h6 class="form-section-heading uppercase">{{ __("Item Cart") }}</h6></div>
 			<div class="pos-bill">
 				<div class="item-cart">
 					<div class="pos-list-row pos-bill-header text-muted h6">
@@ -16,7 +16,7 @@
 					<div class="item-cart-items">
 						<div class="no-items-message text-extra-muted">
 							<span class="text-center">
-								<i class="fa fa-4x fa-shopping-cart"></i>
+								<i class="fa fa-2x fa-shopping-cart"></i>
 								<p>Tap items to add them here</p>
 							</span>
 						</div>
@@ -26,20 +26,20 @@
 				</div>
 			</div>
 			<div class="totals-area">
-				<div class="pos-list-row net-total-area hide">
+				<div class="pos-list-row net-total-area">
 					<div class="cell subject"></div>
 					<div class="cell"></div>
 					<div class="cell text-right">{%= __("Net Total") %}</div>
 					<div class="cell net-total text-right"></div>
 				</div>
-				<div class="pos-list-row tax-area hide">
+				<div class="pos-list-row tax-area">
 					<div class="cell subject"></div>
 					<div class="cell"></div>
 					<div class="cell text-muted">{%= __("Taxes") %}</div>
 					<div class="cell text-right tax-table"></div>
 				</div>
 				{% if (apply_discount_on) { %}
-				<div class="pos-list-row discount-amount-area hide">
+				<div class="pos-list-row discount-amount-area">
 					<div class="cell text-muted">{%= __("Discount") %}</div>
 					<div class="cell discount-field-col">
 						<div class="input-group input-group-sm">
@@ -56,9 +56,13 @@
 				</div>
 				{% } %}
 				<div class="pos-list-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
-					<div class="cell subject"></div>
+					<div class="cell">
+						<a class="collapse-btn">
+							<i class="octicon octicon-chevron-down"></i>
+						</a>
+					</div>
 					<div class="cell text-right bold">{%= __("Grand Total") %}</div>
-					<div class="cell grand-total text-right lead"></div>
+					<div class="cell subject grand-total text-right lead"></div>
 				</div>
 			</div>
 			<div class="row" style="margin-top: 30px">
@@ -84,10 +88,24 @@
 		</div>
 	</div>
 	<div class="col-sm-5 list-customers">
-
+		<div class="col-sm-12"><h6 class="form-section-heading uppercase">{{ __("Customers in Queue") }}</h6></div>
+		<div class="pos-list-row pos-bill-header">
+			<div class="cell"><input class="list-select-all" type="checkbox">{{ __("Customer") }}</div>
+			<div class="cell text-left">{{ __("Status") }}</div>
+			<div class="cell text-right">{{ __("Paid Amount") }}</div>
+			<div class="cell text-right">{{ __("Grand Total") }}</div>
+		</div>
+		<div class="list-customers-table border-left border-right border-bottom">
+			<div class="no-items-message text-extra-muted">
+				<span class="text-center">
+					<i class="fa fa-2x fa-user"></i>
+					<p>No Customers yet!</p>
+				</span>
+			</div>
+		</div>
 	</div>
 	<div class="col-sm-7 pos-items-section">
-		<div class="col-sm-12"><h6 class="form-section-heading uppercase">Stock Items</h6></div>
+		<div class="col-sm-12"><h6 class="form-section-heading uppercase">{{ __("Stock Items") }}</h6></div>
 		<div class="row pos-item-area">
 
 		</div>
diff --git a/erpnext/public/js/pos/pos_invoice_list.html b/erpnext/public/js/pos/pos_invoice_list.html
index 67110a7..fb15c86 100644
--- a/erpnext/public/js/pos/pos_invoice_list.html
+++ b/erpnext/public/js/pos/pos_invoice_list.html
@@ -1,7 +1,6 @@
-<div class="row list-row pos-invoice-list" invoice-name = "{{name}}">
-	<div class="col-xs-1"><input class="list-delete" type="checkbox"></div>
-	<div class="list-column col-xs-3">{%= customer %}</div>
-	<div class="list-column col-xs-2 text-left"><span class="indicator {{data.indicator}}">{{ data.status }}</span></div>
-	<div class="list-column col-xs-3 text-right">{%= paid_amount %}</div>
-	<div class="list-column col-xs-3 text-right">{%= grand_total %}</div>
+<div class="pos-list-row" invoice-name = "{{name}}">
+	<div class="list-column cell"><input class="list-delete" type="checkbox">{%= customer %}</div>
+	<div class="list-column cell text-left"><span class="indicator {{data.indicator}}">{{ data.status }}</span></div>
+	<div class="list-column cell text-right">{%= paid_amount %}</div>
+	<div class="list-column cell text-right">{%= grand_total %}</div>
 </div>
diff --git a/erpnext/public/js/pos/pos_item.html b/erpnext/public/js/pos/pos_item.html
index 7e374ae..fbc380b 100644
--- a/erpnext/public/js/pos/pos_item.html
+++ b/erpnext/public/js/pos/pos_item.html
@@ -23,10 +23,10 @@
 				{% if (item_image) { %}
 				<img src="{{ item_image }}" alt="{{item_name || item_code}}">
 				{% } %}
-				<button class="btn btn-default zoom-view hide" data-name="{{item_code}}">
-					<i class="fa fa-search-plus"></i>
-				</button>
 			</div>
+			<span class="price-info">
+				{{item_price}}
+			</span>
 		</a>
 	</div>
 </div>
\ No newline at end of file
diff --git a/erpnext/public/js/pos/pos_selected_item.html b/erpnext/public/js/pos/pos_selected_item.html
index ff97501..30cf0f0 100644
--- a/erpnext/public/js/pos/pos_selected_item.html
+++ b/erpnext/public/js/pos/pos_selected_item.html
@@ -3,10 +3,6 @@
 		<span class="cell bold">{{item_name}}</span>
 	</div>
 	<div class="pos-list-row">
-		<div class="cell">Price:</div>
-		<input class="form-control cell pos-item-price" value="{%= rate %}"/>
-	</div>
-	<div class="pos-list-row">
 		<div class="cell">Quantity:</div>
 		<input class="form-control cell pos-item-qty" value="{%= qty %}"/>
 	</div>
@@ -15,6 +11,10 @@
 		<input class="form-control cell pos-item-disc" value="{%= discount_percentage %}">
 	</div>
 	<div class="pos-list-row">
+		<div class="cell">Price:</div>
+		<input class="form-control cell pos-item-price" value="{%= rate %}"/>
+	</div>
+	<div class="pos-list-row">
 		<div class="cell">Amount:</div>
 		<input class="form-control cell" value="{%= amount %}"/>
 	</div>
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index ae1c818..5c4622d 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -19,10 +19,6 @@
 
 /* pos */
 
-// .pos-item-area {
-// 	padding: 0px 10px;
-// }
-
 .pos-item-wrapper {
 	padding: 5px;
 }
@@ -64,23 +60,12 @@
 	background-repeat: no-repeat;
 }
 
-.pos-item-area {
-	// border: 1px solid #d1d8dd;
-	// border-top: none;
-}
-
 .pos-item-toolbar {
 	height: 51px; // remove later
 	padding: 10px 0px;
 	border-bottom: 1px solid #d1d8dd;
 }
 
-// .item-list-area, .list-customers {
-// 	padding: 15px 0px;
-// 	overflow-y: scroll;
-// 	height: ~"calc(100vh - 162px)";
-// }
-
 .pos-toolbar, .pos-bill-toolbar {
 	padding: 10px 0px;
 	// border-bottom: 1px solid #d1d8dd;
@@ -90,19 +75,6 @@
 .pos-item-toolbar .form-group {
 	margin-bottom: 0px;
 }
-
-.pos-bill-wrapper {
-	// border: 1px solid #d1d8dd;
-	// border-top: none;
-	// margin-right: -1px;
-}
-
-.pos-bill {
-	// border-top: 1px solid @border-color;
-	// margin-left: -15px;
-	// margin-right: -15px;
-}
-
 .edit-pos-item {
 	height: 50px;
 	font-size: 14px;
@@ -229,15 +201,12 @@
 
 
 .numeric-keypad {
-	// border: 1px solid #d1d8dd;
 	height: 60px;
 	width: 60px;
 	font-size: 20px;
 	font-weight: 200;
 	border-radius: 0;
 	background-color: #fff;
-	// background-color: #FDFDFD;
-	// border-color: #e8e8e8;
 	margin-left:-4px;
 }
 
@@ -260,15 +229,8 @@
 }
 
 .pos-pay {
-
 	background-color: @brand-primary;
 	border: none;
-
-	// height:69px;
-	// width:69px;
-	// font-size:17px;
-	// font-weight:200;
-	// margin-left:-4px;
 }
 
 .multimode-payments {
@@ -392,22 +354,19 @@
 	margin-bottom: 15px;
 }
 
-// body[data-route="pos"] .page-body {
-// 	height: ~"calc(100vh - 40px)";
-// }
-
 .item-cart-items {
-	height: ~"calc(100vh - 500px)";
+	height: ~"calc(100vh - 526px)";
 	overflow: auto;
 	border: 1px solid @border-color;
 	border-top: none;
 
-	.no-items-message {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-	}
+}
+.pos .no-items-message {
+	min-height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
 }
 
 .pos .items .pos-list-row:last-child {
@@ -423,14 +382,30 @@
 }
 
 .pos .item-list {
-	border-left: 1px solid @border-color;
-	border-right: 1px solid @border-color;
-	height: ~"calc(100vh - 180px)";
+	border: 1px solid @border-color;
+	border-top: none;
+	max-height: ~"calc(100vh - 190px)";
 	overflow: auto;
 
+	@media (max-width: @screen-xs) {
+		max-height: initial;
+	}
+
 	.image-field {
 		height: 140px;
 	}
+
+	.pos-item-wrapper {
+		position: relative;
+	}
+
+	.price-info {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.1);
+		padding: 9px 15px;
+	}
 }
 
 .pos-bill-toolbar {
@@ -448,4 +423,20 @@
 
 .pos-selected-item-action > .pos-list-row {
 	border: none;
+}
+
+.edit-customer-btn {
+	position: absolute;
+	right: 57px;
+	top: 15px;
+	z-index: 100;
+}
+
+.btn-more {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	background-color: @light-bg;
+	min-height: 200px;
 }
\ No newline at end of file