diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js
index ed54ab4..961b2a1 100644
--- a/erpnext/accounts/page/pos/pos.js
+++ b/erpnext/accounts/page/pos/pos.js
@@ -374,6 +374,7 @@
 		this.add_customer_btn = this.wrapper.find('.add-customer-btn');
 		this.pos_bill = this.wrapper.find('.pos-bill').hide();
 		this.list_customers = this.wrapper.find('.list-customers');
+		this.numeric_keypad = this.wrapper.find('.numeric_keypad');
 
 		this.list_customers_btn.on('click', function () {
 			$(this).toggleClass("view_customer");
@@ -383,12 +384,16 @@
 				me.party_field.$input.attr('disabled', true);
 				me.list_customers.show();
 				me.pos_bill.hide();
+				me.numeric_keypad.hide();
 			} else {
 				if(me.frm.doc.docstatus == 0) {
 					me.party_field.$input.attr('disabled', false);
 				}
 				me.pos_bill.show();
 				me.list_customers.hide()
+				if(me.frm.doc.items.length > 0) {
+					me.numeric_keypad.show();
+				}
 			}
 		});
 		this.add_customer_btn.on('click', function() {
@@ -662,6 +667,7 @@
 		this.frm.doc.customer_group = doc.customer_group;
 		this.frm.doc.territory = doc.territory;
 		this.pos_bill.show();
+		this.numeric_keypad.show();
 	},
 
 	get_customers: function (key) {
@@ -835,12 +841,29 @@
 
 	update_rate: function () {
 		var me = this;
+		
+		$(this.wrapper).find(".pos-bill-item").click(function() {
+			var item_code = $(this).attr("data-item-code");
+			doc = me.get_child_item(item_code);
+			html_data = frappe.render_template("pos_selected_item", doc[0])
+			$(me.wrapper).find('.selected-item').html(html_data)
+			me.bind_qty_event()
+		})
 
 		$(this.wrapper).find(".pos-item-rate").on("change", function () {
 			var item_code = $(this).parents(".pos-bill-item").attr("data-item-code");
 			me.set_item_details(item_code, "rate", $(this).val());
 		})
 	},
+	
+	get_child_item: function(item_code) {
+		var me = this;
+		return $.map(me.frm.doc.items, function(doc){
+			if(doc.item_code == item_code) {
+				return doc
+			}
+		})
+	},
 
 	set_item_details: function (item_code, field, value) {
 		var me = this;
@@ -950,6 +973,7 @@
 			this.add_new_item_to_grid();
 
 		this.update_paid_amount_status(false)
+		this.wrapper.find(".item-cart").scrollTop(1000);
 	},
 
 	add_new_item_to_grid: function () {
@@ -959,6 +983,7 @@
 		this.child.item_name = this.items[0].item_name;
 		this.child.stock_uom = this.items[0].stock_uom;
 		this.child.description = this.items[0].description;
+		this.child.discount_percentage = 0.0;
 		this.child.qty = 1;
 		this.child.item_group = this.items[0].item_group;
 		this.child.cost_center = this.pos_profile_data['cost_center'] || this.items[0].cost_center;
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index c405681..858514e 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -20,6 +20,7 @@
         "public/js/controllers/transaction.js",
         "public/js/pos/pos.html",
         "public/js/pos/pos_bill_item.html",
+		"public/js/pos/pos_selected_item.html",
         "public/js/pos/pos_item.html",
         "public/js/pos/pos_tax_row.html",
         "public/js/pos/pos_invoice_list.html",
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index cfe9f63..b1f1985 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -59,7 +59,8 @@
   padding: 10px 0px;
   border-bottom: 1px solid #d1d8dd;
 }
-.item-list-area {
+.item-list-area,
+.list-customers {
   padding: 15px 0px;
   overflow-y: scroll;
   height: calc(100vh - 162px);
@@ -82,6 +83,19 @@
   margin-left: -15px;
   margin-right: -15px;
 }
+.item-cart {
+  overflow-y: scroll;
+  height: calc(100vh - 60vh);
+}
+.edit-pos-item {
+  height: 40px;
+  font-size: 14px;
+  border-top: 1px solid #d1d8dd;
+}
+.pos-bill-item:hover {
+  background-color: #f5f7fa;
+  cursor: pointer;
+}
 .pos-bill-row {
   margin: 0px;
   padding: 7px 0px;
@@ -157,13 +171,20 @@
 .pos-keyboard-key,
 .delete-btn {
   border: 1px solid #d1d8dd;
-  height: 85px;
-  width: 85px;
-  margin: 10px 10px;
-  font-size: 24px;
+  height: 69px;
+  width: 69px;
+  font-size: 20px;
   font-weight: 200;
   background-color: #FDFDFD;
   border-color: #e8e8e8;
+  margin-left: -4px;
+}
+.pos-pay {
+  height: 69px;
+  width: 69px;
+  font-size: 17px;
+  font-weight: 200;
+  margin-left: -4px;
 }
 .multimode-payments {
   padding-left: 30px;
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index 44e42d7..c634135 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -17,12 +17,12 @@
             </div>
     		<div class="pos-bill">
     			<div class="item-cart">
-                    <div class="row pos-bill-row pos-bill-header">
+                    <!-- <div class="row pos-bill-row pos-bill-header">
                         <div class="col-xs-4"><h6>{%= __("Item") %}</h6></div>
                         <div class="col-xs-3"><h6 class="text-right">{%= __("Quantity") %}</h6></div>
 						<div class="col-xs-2"><h6 class="text-right">{%= __("Discount") %}</h6></div>
                         <div class="col-xs-3"><h6 class="text-right">{%= __("Rate") %}</h6></div>
-                    </div>
+                    </div> -->
                     <div class="items"></div>
     			</div>
     			<div class="totals-area">
@@ -54,15 +54,38 @@
 							</div>
 	                    </div>
 					{% } %} 
-                    <div class="row pos-bill-row grand-total-area">
+                    <div class="row pos-bill-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
                         <div class="col-xs-6"><h6>{%= __("Grand Total") %}</h6></div>
                         <div class="col-xs-6"><h6 class="grand-total text-right"></h6></div>
                     </div>
     			</div>
     		</div>
-			<div class="list-customers">
+			
+			<div class="list-customers" style = "display:none">
 
 			</div>
+			<div class="row">
+				<div class="col-xs-5 selected-item">
+					
+		        </div>
+				<div class="col-xs-7 numeric_keypad" style="display:none">
+					{% var chartData = ["Qty", "Disc", "Price"] %}
+					{% for(var i=0; i<3; i++) { %}
+						<div class="row text-right">
+							{% for(var j=i*3; j<(i+1)*3; j++) { %}
+								<button type="button"  class="btn btn-default pos-keyboard-key">{{j+1}}</button>
+							{% } %}
+							<button type="button" class="btn text-center btn-default pos-keyboard-key">{{ chartData[i] }}</button>
+						</div>
+					{% } %}
+					<div class="row text-right">
+						<button type="button"  class="btn btn-default delete-btn">Del</button>
+						<button type="button"  class="btn btn-default pos-keyboard-key">0</button>
+						<button type="button"  class="btn btn-default pos-keyboard-key">.</button>
+						<button type="button" class="btn btn-primary pos-pay">Pay</button>
+					</div>
+		        </div>
+			</div>
     	</div>
     	<div class="col-sm-6 pos-items-section">
 			<div class="row pos-item-area">
@@ -77,10 +100,10 @@
 				<div class="app-listing item-list"></ul>
     		</div>
     	</div>
-		<div class="row">
+		<!-- <div class="row">
 			<div class="text-right list-paging-area">
 				<button class="btn btn-default btn-more btn-sm" style="margin:5px 20px">{{ __("More") }}</button>
 			</div>
-		</div>
+		</div> -->
     </div>
 </div>
diff --git a/erpnext/public/js/pos/pos_selected_item.html b/erpnext/public/js/pos/pos_selected_item.html
new file mode 100644
index 0000000..491938e
--- /dev/null
+++ b/erpnext/public/js/pos/pos_selected_item.html
@@ -0,0 +1,27 @@
+<h5 style="margin-top:5px">Item <span class="text-primary no-margin font-montserrat">{%= item_name %}</h5>
+<div class="pos-bill-item" data-item-code="{%= item_code %}">
+	<div class="form-group edit-pos-item">
+		<label class=" text-left col-xs-4">Price:</label>
+		<div class="col-xs-8">
+			<input class="form-control text-right" value="{%= rate %}">
+		</div>
+	</div>
+	<div class="form-group edit-pos-item">
+		<label class=" text-left col-xs-4">Qty:</label>
+		<div class="col-xs-8">
+			<input class="form-control text-right pos-item-qty" value="{%= qty %}">
+		</div>
+	</div>
+	<div class="form-group edit-pos-item">
+		<label class=" text-left col-xs-4">Discount:</label>
+		<div class="col-xs-8">
+			<input class="form-control text-right" value="{%= discount_percentage %}">
+		</div>
+	</div>
+	<div class="form-group edit-pos-item">
+		<label class=" text-left col-xs-4">Amount:</label>
+		<div class="col-xs-8">
+			<input class="form-control text-right " value="{%= amount %}">
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index 495e618..34ea901 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -74,7 +74,7 @@
 	border-bottom: 1px solid #d1d8dd;
 }
 
-.item-list-area {
+.item-list-area, .list-customers {
 	padding: 15px 0px;
 	overflow-y: scroll;
 	height: ~"calc(100vh - 162px)";
@@ -102,6 +102,22 @@
 	margin-right: -15px;
 }
 
+.item-cart {
+	overflow-y: scroll;
+	height: ~"calc(100vh - 60vh)";
+}
+
+.edit-pos-item {
+	height: 40px;
+	font-size: 14px;
+	border-top: 1px solid @border-color;
+}
+
+.pos-bill-item:hover {
+	background-color: #f5f7fa;
+	cursor: pointer;
+}
+
 .pos-bill-row {
 	margin: 0px;
 	padding: 7px 0px;
@@ -197,13 +213,21 @@
 
 .pos-keyboard-key, .delete-btn {
 	border: 1px solid #d1d8dd;
-	height:85px;
-	width:85px;
-	margin:10px 10px;
-	font-size:24px;
+	height:69px;
+	width:69px;
+	font-size:20px;
 	font-weight:200;
 	background-color: #FDFDFD;
 	border-color: #e8e8e8;
+	margin-left:-4px;
+}
+
+.pos-pay {
+	height:69px;
+	width:69px;
+	font-size:17px;
+	font-weight:200;
+	margin-left:-4px;
 }
 
 .multimode-payments {