diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js
index 8cc393d4c70..f9f0cb8260c 100644
--- a/erpnext/accounts/page/pos/pos.js
+++ b/erpnext/accounts/page/pos/pos.js
@@ -363,8 +363,8 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 
 	make: function () {
 		this.make_search();
-		this.make_list_customers();
 		this.make_customer();
+		this.make_list_customers();
 		this.make_item_list();
 		this.bind_numeric_keypad();
 		this.make_discount_field()
@@ -391,24 +391,41 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 			}, 1000);
 		});
 
-		this.search_item_group = frappe.ui.form.make_control({
-			df: {
-				"fieldtype": "Select",
-				"options": me.item_groups,
-				"label": __("Item Group"),
-				"fieldname": "item_group",
-				"placeholder": __("Item Group")
-			},
-			parent: this.wrapper.find(".search-item-group"),
-			only_input: true,
-		});
+		// this.search_item_group = frappe.ui.form.make_control({
+		// 	df: {
+		// 		"fieldtype": "Select",
+		// 		"options": me.item_groups,
+		// 		"label": __("Item Group"),
+		// 		"fieldname": "item_group",
+		// 		"placeholder": __("Item Group")
+		// 	},
+		// 	parent: this.wrapper.find(".search-item-group"),
+		// 	only_input: true,
+		// });
+
+		this.search_item_group = this.wrapper.find('.search-item-group');
+
+		var dropdown_html = me.item_groups.map(function(item_group) {
+			return "<li><a class='option' data-value='"+item_group+"'>"+item_group+"</a></li>";
+		}).join("");
+
+		this.search_item_group.find('.dropdown-menu').html(dropdown_html);
+
+		this.search_item_group.on('click', '.dropdown-menu a', function() {
+			me.selected_item_group = $(this).attr('data-value');
+			me.search_item_group.find('.dropdown-text').text(me.selected_item_group);
 
-		this.search_item_group.make_input();
-		this.search_item_group.$input.on("change", function () {
 			me.page_len = 20;
 			me.items = me.get_items();
 			me.make_item_list();
-		});
+		})
+
+		// this.search_item_group.make_input();
+		// this.search_item_group.$input.on("change", function () {
+		// 	me.page_len = 20;
+		// 	me.items = me.get_items();
+		// 	me.make_item_list();
+		// });
 
 		this.wrapper.find(".btn-more").on("click", function() {
 			me.page_len += 20;
@@ -423,9 +440,9 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 
 	make_list_customers: function () {
 		var me = this;
-		this.list_customers_btn = this.wrapper.find('.list-customers-btn');
+		this.list_customers_btn = this.page.wrapper.find('.list-customers-btn');
 		this.add_customer_btn = this.wrapper.find('.add-customer-btn');
-		this.pos_bill = this.wrapper.find('.pos-bill').hide();
+		this.pos_bill = this.wrapper.find('.pos-bill-wrapper').hide();
 		this.list_customers = this.wrapper.find('.list-customers');
 		this.numeric_keypad = this.wrapper.find('.numeric_keypad');
 
@@ -466,13 +483,27 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 		$(this.numeric_keypad).find('.numeric-keypad').on('click', function(){
 			me.numeric_id = $(this).attr("id") || me.numeric_id;
 			me.val = $(this).attr("val")
+			console.log(me.numeric_id);
+
+			me.selected_field = $(me.wrapper).find('.selected-item').find('.' + me.numeric_id)
+			
 			if(me.val && me.numeric_id) {
-				me.selected_field = $(me.wrapper).find('.selected-item').find('.' + me.numeric_id)
 				me.numeric_val += me.val;
+				console.log(me.numeric_val)
+				console.log(me.selected_field)
+
 				me.selected_field.val(flt(me.numeric_val))
 				me.selected_field.trigger("change")
 				me.render_selected_item()
 			}
+
+			if(me.numeric_id && $(this).hasClass('pos-operation')) {
+				me.numeric_keypad.find('button.pos-operation').removeClass('active');
+				$(this).addClass('active');
+
+				me.selected_row.find('.pos-list-row').removeClass('active');
+				me.selected_field.closest('.pos-list-row').addClass('active');
+			}
 		})
 		
 		$(this.numeric_keypad).find('.numeric-del').click(function(){
@@ -582,10 +613,12 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 
 	make_customer: function () {
 		var me = this;
-
-		$(frappe.render_template('customer_toolbar', {
-			allow_delete: this.frm.doc.allow_delete
-		})).insertAfter(this.page.$title_area.hide());
+		
+		if(this.page.wrapper.find('.pos-bill-toolbar').length === 0) {
+			$(frappe.render_template('customer_toolbar', {
+				allow_delete: this.frm.doc.allow_delete
+			})).insertAfter(this.page.$title_area.hide());
+		}
 
 		this.party_field = frappe.ui.form.make_control({
 			df: {
@@ -879,6 +912,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 		$(me.wrapper).on("click", ".pos-item-wrapper", function () {
 			if(me.list_customers_btn.hasClass("view_customer")) return;
 
+			console.log($(this).attr('data-item-code'));
 			me.customer_validate();
 			if (me.frm.doc.docstatus == 0) {
 				me.items = me.get_items($(this).attr("data-item-code"))
@@ -936,7 +970,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 
 	apply_category: function() {
 		var me = this;
-		category = this.search_item_group.$input.val();
+		category = this.selected_item_group;
 
 		if(category == 'All Item Groups') {
 			return this.item_data
@@ -1015,7 +1049,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 		doc = this.get_child_item(this.item_code);
 		$(this.wrapper).find('.selected-item').empty();
 		if(doc.length) {
-			this.selected_row = frappe.render_template("pos_selected_item", doc[0])
+			this.selected_row = $(frappe.render_template("pos_selected_item", doc[0]))
 			$(this.wrapper).find('.selected-item').html(this.selected_row)
 		}
 	},
@@ -1280,14 +1314,19 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 
 	set_primary_action: function () {
 		var me = this;
-
+		this.page.set_primary_action(__("Add Customer"), function () {
+			me.save_previous_entry();
+			me.create_new();
+			me.refresh();
+			me.set_focus();
+		})
 		if (this.frm.doc.docstatus == 0) {
-			this.page.set_primary_action(__("Pay"), function () {
-				me.validate();
-				me.update_paid_amount_status(true);
-				me.create_invoice();
-				me.make_payment();
-			}, "fa fa-credit-card");
+			// this.page.set_primary_action(__("Pay"), function () {
+			// 	me.validate();
+			// 	me.update_paid_amount_status(true);
+			// 	me.create_invoice();
+			// 	me.make_payment();
+			// }, "fa fa-credit-card");
 		} else if (this.frm.doc.docstatus == 1) {
 			this.page.set_primary_action(__("Print"), function () {
 				html = frappe.render(me.print_template_data, me.frm.doc)
@@ -1578,6 +1617,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 
 	mandatory_batch_no: function () {
 		var me = this;
+		console.log(this.items[0])
 		if (this.items[0].has_batch_no && !this.item_batch_no[this.items[0].item_code]) {
 			frappe.throw(__(repl("Error: Batch no is mandatory for item %(item)s", {
 				'item': this.items[0].item_code
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 6a1d3b6a9b1..e233c08aebb 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -301,8 +301,9 @@ body[data-route="pos"] .modal-dialog {
 .pos-bill-header {
   background-color: #f5f7fa;
   border: 1px solid #d1d8dd;
+  padding: 13px 15px;
 }
-.pos-bill-item.active {
+.pos-list-row.active {
   background-color: #fffce7;
 }
 .totals-area {
@@ -310,11 +311,8 @@ body[data-route="pos"] .modal-dialog {
   border-left: 1px solid #d1d8dd;
   margin-bottom: 15px;
 }
-body[data-route="pos"] .page-body {
-  height: calc(100vh - 40px);
-}
 .item-cart-items {
-  height: 30vh;
+  height: calc(100vh - 500px);
   overflow: auto;
   border: 1px solid #d1d8dd;
   border-top: none;
@@ -337,4 +335,22 @@ body[data-route="pos"] .page-body {
 .pos .item-list {
   border-left: 1px solid #d1d8dd;
   border-right: 1px solid #d1d8dd;
+  height: calc(100vh - 180px);
+  overflow: auto;
+}
+.pos .item-list .image-field {
+  height: 140px;
+}
+.pos-bill-toolbar {
+  margin-top: 10px;
+}
+.pos .search-item .form-group {
+  margin: 0;
+}
+.item-list-area .pos-bill-header {
+  padding: 5px;
+  padding-left: 15px;
+}
+.pos-selected-item-action > .pos-list-row {
+  border: none;
 }
diff --git a/erpnext/public/js/pos/customer_toolbar.html b/erpnext/public/js/pos/customer_toolbar.html
index a32c1572204..86a38c3a8bf 100644
--- a/erpnext/public/js/pos/customer_toolbar.html
+++ b/erpnext/public/js/pos/customer_toolbar.html
@@ -1,10 +1,8 @@
-<div class="pos-bill-toolbar" style="display: flex;">
+<div class="pos-bill-toolbar col-sm-9" style="display: flex;">
 	<div class="party-area" style="flex: 1;"></div>
-	<button class="btn btn-default list-customers-btn" style="margin: 0 5px 0 15px;">
-		<i class="fa fa-list"></i>
+	<button class="btn btn-default list-customers-btn" style="margin-left: 12px">
+		<i class="octicon octicon-organization"></i>
 	</button>
-	<button class="btn btn-default add-customer-btn">
-		<i class="fa fa-plus"></i>
 	</button> {% if (allow_delete) { %}
 	<button class="btn btn-default btn-danger" style="margin: 0 5px 0 5px;display:none">
 			<i class="octicon octicon-trashcan"></i>
diff --git a/erpnext/public/js/pos/pos_bill_item_new.html b/erpnext/public/js/pos/pos_bill_item_new.html
index f5c888e030c..80a33d49fca 100644
--- a/erpnext/public/js/pos/pos_bill_item_new.html
+++ b/erpnext/public/js/pos/pos_bill_item_new.html
@@ -1,4 +1,4 @@
-<div class="pos-list-row pos-bill-item" data-item-code="{%= item_code %}">
+<div class="pos-list-row pos-bill-item" data-item-code="{{ item_code }}">
 	<div class="cell subject">
 		<!--<input class="list-row-checkbox" type="checkbox" data-name="{{item_code}}">-->
 		<a class="grey list-id" title="{{ item_name }}">{{ strip_html(__(item_name)) || item_code }}</a>
diff --git a/erpnext/public/js/pos/pos_item.html b/erpnext/public/js/pos/pos_item.html
index 89384edabd2..7e374ae3763 100644
--- a/erpnext/public/js/pos/pos_item.html
+++ b/erpnext/public/js/pos/pos_item.html
@@ -1,4 +1,4 @@
-<div class="pos-item-wrapper image-view-item" data-item-code={{item_code}}>
+<div class="pos-item-wrapper image-view-item" data-item-code="{{item_code}}">
 	<div class="image-view-header doclist-row">
 		<div class="list-value">
 			<a class="grey list-id" data-name="{{item_code}}" title="{{ item_name || item_code}}">{{item_name || item_code}}</a>
diff --git a/erpnext/public/js/pos/pos_selected_item.html b/erpnext/public/js/pos/pos_selected_item.html
index 501e1da0666..ff975015901 100644
--- a/erpnext/public/js/pos/pos_selected_item.html
+++ b/erpnext/public/js/pos/pos_selected_item.html
@@ -4,18 +4,18 @@
 	</div>
 	<div class="pos-list-row">
 		<div class="cell">Price:</div>
-		<div class="cell pos-item-price">{%= rate %}</div>
+		<input class="form-control cell pos-item-price" value="{%= rate %}"/>
 	</div>
 	<div class="pos-list-row">
 		<div class="cell">Quantity:</div>
-		<div class="cell pos-item-qty">{%= qty %}</div>
+		<input class="form-control cell pos-item-qty" value="{%= qty %}"/>
 	</div>
 	<div class="pos-list-row">
 		<div class="cell">Discount:</div>
-		<div class="cell pos-item-disc">{%= discount_percentage %}</div>
+		<input class="form-control cell pos-item-disc" value="{%= discount_percentage %}">
 	</div>
 	<div class="pos-list-row">
 		<div class="cell">Amount:</div>
-		<div class="cell pos-item-disc">{%= amount %}</div>
+		<input class="form-control cell" value="{%= amount %}"/>
 	</div>
 </div>
\ No newline at end of file
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index bec2c91a670..ae1c818ef85 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -379,9 +379,10 @@ body[data-route="pos"] .modal-dialog {
 .pos-bill-header {
 	background-color: #f5f7fa;
 	border: 1px solid @border-color;
+	padding: 13px 15px;
 }
 
-.pos-bill-item.active {
+.pos-list-row.active {
 	background-color: @light-yellow;
 }
 
@@ -391,12 +392,12 @@ body[data-route="pos"] .modal-dialog {
 	margin-bottom: 15px;
 }
 
-body[data-route="pos"] .page-body {
-	height: ~"calc(100vh - 40px)";
-}
+// body[data-route="pos"] .page-body {
+// 	height: ~"calc(100vh - 40px)";
+// }
 
 .item-cart-items {
-	height: 30vh;
+	height: ~"calc(100vh - 500px)";
 	overflow: auto;
 	border: 1px solid @border-color;
 	border-top: none;
@@ -424,4 +425,27 @@ body[data-route="pos"] .page-body {
 .pos .item-list {
 	border-left: 1px solid @border-color;
 	border-right: 1px solid @border-color;
+	height: ~"calc(100vh - 180px)";
+	overflow: auto;
+
+	.image-field {
+		height: 140px;
+	}
+}
+
+.pos-bill-toolbar {
+	margin-top: 10px;
+}
+
+.pos .search-item .form-group {
+	margin: 0;
+}
+
+.item-list-area .pos-bill-header {
+	padding: 5px;
+	padding-left: 15px;
+}
+
+.pos-selected-item-action > .pos-list-row {
+	border: none;
 }
\ No newline at end of file