diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js
index 7e14ec824ae..bd1372b5018 100644
--- a/erpnext/accounts/page/pos/pos.js
+++ b/erpnext/accounts/page/pos/pos.js
@@ -954,6 +954,15 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 			me.set_item_details(item_code, "rate", $(this).val());
 		})
 	},
+
+	render_selected_item: function() {
+		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.wrapper).find('.selected-item').html(this.selected_row)
+		}
+	},
 	
 	get_child_item: function(item_code) {
 		var me = this;
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index b76d36ee563..052e8c87a75 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -61,6 +61,23 @@
 .pos-item-toolbar .form-group {
   margin-bottom: 0px;
 }
+<<<<<<< d8a807e5853af7f9d633b32c2aff0c80ebca7d3d
+=======
+.pos-bill-wrapper {
+  border: 1px solid #d1d8dd;
+  border-top: none;
+  margin-right: -1px;
+}
+.pos-bill {
+  border-top: 1px solid #d1d8dd;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.item-cart {
+  overflow-y: scroll;
+  height: calc(100vh - 72vh);
+}
+>>>>>>> added event on numeric keypad
 .edit-pos-item {
   height: 50px;
   font-size: 14px;
@@ -136,6 +153,16 @@
 }
 .pos-keyboard-key,
 .delete-btn {
+  border: 1px solid #d1d8dd;
+  height: 85px;
+  width: 85px;
+  margin: 10px 10px;
+  font-size: 24px;
+  font-weight: 200;
+  background-color: #FDFDFD;
+  border-color: #e8e8e8;
+}
+.numeric-keypad {
   border: 1px solid #d1d8dd;
   height: 69px;
   width: 69px;
diff --git a/erpnext/public/js/pos/pos_selected_item.html b/erpnext/public/js/pos/pos_selected_item.html
index 501e1da0666..c73daa0c8ae 100644
--- a/erpnext/public/js/pos/pos_selected_item.html
+++ b/erpnext/public/js/pos/pos_selected_item.html
@@ -1,3 +1,4 @@
+<<<<<<< d8a807e5853af7f9d633b32c2aff0c80ebca7d3d
 <div class="pos-selected-item-action" data-item-code="{%= item_code %}">
 	<div class="pos-list-row">
 		<span class="cell bold">{{item_name}}</span>
@@ -17,5 +18,32 @@
 	<div class="pos-list-row">
 		<div class="cell">Amount:</div>
 		<div class="cell pos-item-disc">{%= amount %}</div>
+=======
+<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 pos-item-price" disabled 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" disabled 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 pos-item-disc" disabled 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 " disabled value="{%= amount %}">
+		</div>
+>>>>>>> added event on numeric keypad
 	</div>
 </div>
\ No newline at end of file
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index 8b1ecdc0393..70eb688e638 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -198,6 +198,17 @@
 }
 
 .pos-keyboard-key, .delete-btn {
+	border: 1px solid #d1d8dd;
+	height:85px;
+	width:85px;
+	margin:10px 10px;
+	font-size:24px;
+	font-weight:200;
+	background-color: #FDFDFD;
+	border-color: #e8e8e8;
+}
+
+.numeric-keypad {
 	border: 1px solid #d1d8dd;
 	height:69px;
 	width:69px;