diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 858514e..393e90c 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -20,9 +20,11 @@
         "public/js/controllers/transaction.js",
         "public/js/pos/pos.html",
         "public/js/pos/pos_bill_item.html",
+        "public/js/pos/pos_bill_item_new.html",
 		"public/js/pos/pos_selected_item.html",
         "public/js/pos/pos_item.html",
         "public/js/pos/pos_tax_row.html",
+        "public/js/pos/customer_toolbar.html",
         "public/js/pos/pos_invoice_list.html",
         "public/js/payment/pos_payment.html",
         "public/js/payment/payment_details.html",
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 1db761e..838d260 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -13,9 +13,6 @@
   margin: -10px auto;
 }
 /* pos */
-.pos-item-area {
-  padding: 0px 10px;
-}
 .pos-item-wrapper {
   padding: 5px;
 }
@@ -51,20 +48,11 @@
   background-position: center;
   background-repeat: no-repeat;
 }
-.pos-item-area {
-  border: 1px solid #d1d8dd;
-  border-top: none;
-}
 .pos-item-toolbar {
+  height: 51px;
   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;
@@ -73,20 +61,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 #d1d8dd;
-  margin-left: -15px;
-  margin-right: -15px;
-}
-.item-cart {
-  overflow-y: scroll;
-  height: calc(100vh - 72vh);
-}
 .edit-pos-item {
   height: 50px;
   font-size: 14px;
@@ -97,15 +71,6 @@
   background-color: #f5f7fa;
   cursor: pointer;
 }
-.pos-bill-row {
-  margin: 0px;
-  padding: 7px 0px;
-  border-top: 1px solid #d1d8dd;
-}
-.pos-bill-header {
-  border: none !important;
-  background-color: #f5f7fa;
-}
 .pos-item-qty {
   display: inline-block;
 }
@@ -181,21 +146,31 @@
   border-color: #e8e8e8;
 }
 .numeric-keypad {
-  border: 1px solid #d1d8dd;
-  height: 69px;
-  width: 69px;
+  height: 60px;
+  width: 60px;
   font-size: 20px;
   font-weight: 200;
-  background-color: #FDFDFD;
-  border-color: #e8e8e8;
+  border-radius: 0;
+  background-color: #fff;
   margin-left: -4px;
 }
+.numeric_keypad {
+  margin-left: -15px;
+}
+.numeric_keypad > .row > button {
+  border: none;
+  border-right: 1px solid #d1d8dd;
+  border-bottom: 1px solid #d1d8dd;
+}
+.numeric_keypad > .row > button:first-child {
+  border-left: 1px solid #d1d8dd;
+}
+.numeric_keypad > .row:first-child > button {
+  border-top: 1px solid #d1d8dd;
+}
 .pos-pay {
-  height: 69px;
-  width: 69px;
-  font-size: 17px;
-  font-weight: 200;
-  margin-left: -4px;
+  background-color: #5E64FF;
+  border: none;
 }
 .multimode-payments {
   padding-left: 30px;
@@ -269,3 +244,63 @@
 .assessment-result-tool .score {
   text-align: right;
 }
+.pos-list-row {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  padding: 9px 15px;
+  font-size: 12px;
+  margin: 0px;
+  border-bottom: 1px solid #d1d8dd;
+}
+.pos-list-row .cell {
+  display: table-cell;
+  vertical-align: middle;
+}
+.pos-list-row .subject {
+  width: 50%;
+}
+.pos-list-row .list-row-checkbox,
+.pos-list-row .list-select-all {
+  margin-right: 7px;
+}
+.pos-bill-header {
+  background-color: #f5f7fa;
+  border: 1px solid #d1d8dd;
+}
+.pos-bill-item.active {
+  background-color: #fffce7;
+}
+.totals-area {
+  border-right: 1px solid #d1d8dd;
+  border-left: 1px solid #d1d8dd;
+  margin-bottom: 15px;
+}
+body[data-route="pos"] .page-body {
+  height: calc(100vh - 40px);
+}
+.item-cart-items {
+  height: 30vh;
+  overflow: auto;
+  border: 1px solid #d1d8dd;
+  border-top: none;
+}
+.item-cart-items .no-items-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.pos .items .pos-list-row:last-child {
+  border-bottom: none;
+}
+.pos .form-section-heading {
+  padding: 0;
+}
+.pos {
+  overflow: hidden;
+}
+.pos .item-list {
+  border-left: 1px solid #d1d8dd;
+  border-right: 1px solid #d1d8dd;
+}
diff --git a/erpnext/public/js/pos/customer_toolbar.html b/erpnext/public/js/pos/customer_toolbar.html
new file mode 100644
index 0000000..a32c157
--- /dev/null
+++ b/erpnext/public/js/pos/customer_toolbar.html
@@ -0,0 +1,12 @@
+<div class="pos-bill-toolbar" 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>
+	<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>
+		</button> {% } %}
+</div>
\ No newline at end of file
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index 8a08a8b..17d1a5f 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -1,109 +1,111 @@
 <div class="pos">
-    <div class="row">
-    	<div class="col-sm-6 pos-bill-wrapper">
-            <div class="pos-bill-toolbar" 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>
-				<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>
-					</button>
-				{% } %}
-            </div>
-    		<div class="pos-bill">
-    			<div class="item-cart">
-                    <!-- <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 class="items"></div>
-    			</div>
-    			<div class="totals-area">
-                    <div class="row pos-bill-row net-total-area">
-                        <div class="col-xs-6"><h6 class="text-muted">{%= __("Net Total") %}</h6></div>
-                        <div class="col-xs-6"><h6 class="net-total text-right"></h6></div>
-                    </div>
-                    <div class="row pos-bill-row tax-area hide">
-						<div class="col-xs-12 text-muted">
-	                        <h6>{%= __("Taxes") %}</h6>
-							<div class="tax-table small"></div>
-						</div>
-                    </div>
-					{% if (apply_discount_on) { %}
-	                    <div class="row pos-bill-row discount-amount-area">
-	                        <div class="col-xs-6"><h6 class="text-muted">{%= __("Discount") %}</h6></div>
-							<div class="col-xs-3 discount-field-col">
-								<div class="input-group input-group-sm">
-									<span class="input-group-addon">%</span>
-									<input type="text" class="form-control discount-percentage text-right">
-								</div>
-							</div>
-	                        <div class="col-xs-3 discount-field-col">
-								<div class="input-group input-group-sm">
-									<span class="input-group-addon">{%= get_currency_symbol(currency) %}</span>
-									<input type="text" class="form-control discount-amount text-right"
-								  		placeholder="{%= 0.00 %}">
-								</div>
-							</div>
-	                    </div>
-					{% } %} 
-                    <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" style = "display:none">
-
-			</div>
-			<div class="row">
-				<div class="col-xs-6 selected-item">
-					
-		        </div>
-				<div class="col-xs-6 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 numeric-keypad" val="{{j+1}}">{{j+1}}</button>
-							{% } %}
-							<button type="button" id = "pos-item-{{ chartData[i].toLowerCase() }}" class="btn text-center btn-default numeric-keypad pos-operation">{{ chartData[i] }}</button>
-						</div>
-					{% } %}
-					<div class="row text-right">
-						<button type="button"  class="btn btn-default numeric-keypad numeric-del">Del</button>
-						<button type="button"  class="btn btn-default numeric-keypad" val="0">0</button>
-						<button type="button"  class="btn btn-default numeric-keypad" val=".">.</button>
-						<button type="button" class="btn btn-primary pos-pay">Pay</button>
+	<div class="row">
+		<div class="col-sm-6 pos-bill-wrapper">
+			<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">
+						<span class="cell subject">
+							<!--<input class="list-select-all" type="checkbox" title="{%= __("Select All") %}">-->
+							{{ __("Item Name")}}
+						</span>
+						<span class="cell text-right">{{ __("Quantity") }}</span>
+						<span class="cell text-right">{{ __("Discount") }}</span>
+						<span class="cell text-right">{{ __("Rate") }}</span>
 					</div>
-		        </div>
+					<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>
+								<p>Tap items to add them here</p>
+							</span>
+						</div>
+						<div class="items">
+						</div>
+					</div>
+				</div>
 			</div>
-    	</div>
-    	<div class="col-sm-6 pos-items-section">
-			<div class="row pos-item-area">
+			<div class="totals-area">
+				<div class="pos-list-row net-total-area hide">
+					<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">
+					<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="cell text-muted">{%= __("Discount") %}</div>
+					<div class="cell discount-field-col">
+						<div class="input-group input-group-sm">
+							<span class="input-group-addon">%</span>
+							<input type="text" class="form-control discount-percentage text-right">
+						</div>
+					</div>
+					<div class="cell discount-field-col">
+						<div class="input-group input-group-sm">
+							<span class="input-group-addon">{%= get_currency_symbol(currency) %}</span>
+							<input type="text" class="form-control discount-amount text-right" placeholder="{%= 0.00 %}">
+						</div>
+					</div>
+				</div>
+				{% } %}
+				<div class="pos-list-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
+					<div class="cell subject"></div>
+					<div class="cell text-right bold">{%= __("Grand Total") %}</div>
+					<div class="cell grand-total text-right lead"></div>
+				</div>
+			</div>
+			<div class="list-customers" style="display:none">
 
 			</div>
-			<span id="customer-results" style="color:#68a;"></span>
-            <div class="row pos-item-toolbar">
-				<div class="search-item-group col-xs-5"></div>
-				<div class="search-item col-xs-7"></div>
-            </div>
-    		<div class="item-list-area" style="auto">
-				<div class="app-listing item-list"></ul>
-    		</div>
-    	</div>
-		<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 class="row" style="margin-top: 15px">
+				<div class="col-xs-6 selected-item">
+
+				</div>
+				<div class="col-xs-6 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 numeric-keypad" val="{{j+1}}">{{j+1}}</button>
+							{% } %}
+							<button type="button" id="pos-item-{{ chartData[i].toLowerCase() }}" class="btn text-center btn-default numeric-keypad pos-operation">{{ chartData[i] }}</button>
+				</div>
+				{% } %}
+				<div class="row text-right">
+					<button type="button" class="btn btn-default numeric-keypad numeric-del">Del</button>
+					<button type="button" class="btn btn-default numeric-keypad" val="0">0</button>
+					<button type="button" class="btn btn-default numeric-keypad" val=".">.</button>
+					<button type="button" class="btn btn-primary numeric-keypad pos-pay">Pay</button>
+				</div>
 			</div>
 		</div>
-    </div>
-</div>
+	</div>
+	<div class="col-sm-6 pos-items-section">
+		<div class="col-sm-12"><h6 class="form-section-heading uppercase">Stock Items</h6></div>
+		<div class="row pos-item-area">
+
+		</div>
+		<span id="customer-results" style="color:#68a;"></span>
+		<div class="row pos-item-toolbar hide">
+			<div class="search-item-group col-xs-5 hide"></div>
+			<div class="search-item col-xs-7 hide"></div>
+		</div>
+		<div class="item-list-area">
+			<div class="pos-list-row pos-bill-header text-muted h6">
+				<div class="cell subject">All Item Groups</div>
+				<div class="cell"></div>
+				<div class="cell"></div>
+				<div class="cell"></div>
+			</div>
+			<div class="app-listing item-list image-view-container three-column">
+				
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/erpnext/public/js/pos/pos_bill_item_new.html b/erpnext/public/js/pos/pos_bill_item_new.html
new file mode 100644
index 0000000..f5c888e
--- /dev/null
+++ b/erpnext/public/js/pos/pos_bill_item_new.html
@@ -0,0 +1,9 @@
+<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>
+	</div>
+	<div class="cell text-right">{%= qty %}</div>
+	<div class="cell text-right">{%= discount_percentage %}</div>
+	<div class="cell text-right">{%= format_currency(rate) %}</div>
+</div>
diff --git a/erpnext/public/js/pos/pos_item.html b/erpnext/public/js/pos/pos_item.html
index b33076d..89384ed 100644
--- a/erpnext/public/js/pos/pos_item.html
+++ b/erpnext/public/js/pos/pos_item.html
@@ -1,13 +1,32 @@
-<div class="pos-item-wrapper col-xs-3">
-	<div class="pos-item" data-item-code="{%= item_code %}" title="{%= item_name || item_code %}">
-		<div class="pos-item-image"
-			 style="{% if (item_image) { %} background-image: {{ item_image }} {% }
-			 	else { %} background-color: {{ color }} {% } %}">
-			{% if (!item_image) { %}{{ abbr }}{% } %}
+<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>
 		</div>
-		<div class="pos-item-text">
-			<h6 class="item-code ellipsis">{%= item_name ? (item_name + " (" + item_code + ")") : item_code %}</h6>
-			<div class="small ellipsis">{%= item_price %}</div>
-		</div>
+	</div>
+	<div class="image-view-body">
+		<a  data-item-code="{{ item_code }}"
+			title="{{ item_name || item_code }}"
+		>
+			<div class="image-field"
+				style="
+				{% if (!item_image) { %}
+					background-color: #fafbfc;
+				{% } %}
+				border: 0px;"
+			>
+				{% if (!item_image) { %}
+				<span class="placeholder-text">
+					{%= frappe.get_abbr(item_name || item_code) %}
+				</span>
+				{% } %}
+				{% 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>
+		</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 4260cf7..501e1da 100644
--- a/erpnext/public/js/pos/pos_selected_item.html
+++ b/erpnext/public/js/pos/pos_selected_item.html
@@ -1,26 +1,21 @@
-<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 class="pos-selected-item-action" data-item-code="{%= item_code %}">
+	<div class="pos-list-row">
+		<span class="cell bold">{{item_name}}</span>
 	</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 class="pos-list-row">
+		<div class="cell">Price:</div>
+		<div class="cell pos-item-price">{%= rate %}</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 class="pos-list-row">
+		<div class="cell">Quantity:</div>
+		<div class="cell pos-item-qty">{%= qty %}</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>
+	<div class="pos-list-row">
+		<div class="cell">Discount:</div>
+		<div class="cell pos-item-disc">{%= discount_percentage %}</div>
+	</div>
+	<div class="pos-list-row">
+		<div class="cell">Amount:</div>
+		<div class="cell pos-item-disc">{%= 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 3ad8a0b..16857e3 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -19,9 +19,9 @@
 
 /* pos */
 
-.pos-item-area {
-	padding: 0px 10px;
-}
+// .pos-item-area {
+// 	padding: 0px 10px;
+// }
 
 .pos-item-wrapper {
 	padding: 5px;
@@ -65,20 +65,21 @@
 }
 
 .pos-item-area {
-	border: 1px solid #d1d8dd;
-	border-top: none;
+	// 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)";
-}
+// .item-list-area, .list-customers {
+// 	padding: 15px 0px;
+// 	overflow-y: scroll;
+// 	height: ~"calc(100vh - 162px)";
+// }
 
 .pos-toolbar, .pos-bill-toolbar {
 	padding: 10px 0px;
@@ -91,20 +92,15 @@
 }
 
 .pos-bill-wrapper {
-	border: 1px solid #d1d8dd;
-	border-top: none;
-	margin-right: -1px;
+	// border: 1px solid #d1d8dd;
+	// border-top: none;
+	// margin-right: -1px;
 }
 
 .pos-bill {
-	border-top: 1px solid @border-color;
-	margin-left: -15px;
-	margin-right: -15px;
-}
-
-.item-cart {
-	overflow-y: scroll;
-	height: ~"calc(100vh - 72vh)";
+	// border-top: 1px solid @border-color;
+	// margin-left: -15px;
+	// margin-right: -15px;
 }
 
 .edit-pos-item {
@@ -119,17 +115,6 @@
 	cursor: pointer;
 }
 
-.pos-bill-row {
-	margin: 0px;
-	padding: 7px 0px;
-	border-top: 1px solid #d1d8dd;
-}
-
-.pos-bill-header {
-	border: none !important;
-	background-color: #f5f7fa;
-}
-
 .pos-item-qty {
 	display: inline-block;
 }
@@ -223,23 +208,48 @@
 	border-color: #e8e8e8;
 }
 
+
 .numeric-keypad {
-	border: 1px solid #d1d8dd;
-	height:69px;
-	width:69px;
-	font-size:20px;
-	font-weight:200;
-	background-color: #FDFDFD;
-	border-color: #e8e8e8;
+	// 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;
 }
 
+.numeric_keypad {
+	margin-left: -15px;
+
+	& > .row > button {
+		border: none;
+		border-right: 1px solid @border-color;
+		border-bottom: 1px solid @border-color;
+
+		&:first-child {
+			border-left: 1px solid @border-color;
+		}
+	}
+
+	& > .row:first-child > button {
+		border-top: 1px solid @border-color;
+	}
+}
+
 .pos-pay {
-	height:69px;
-	width:69px;
-	font-size:17px;
-	font-weight:200;
-	margin-left:-4px;
+
+	background-color: @brand-primary;
+	border: none;
+
+	// height:69px;
+	// width:69px;
+	// font-size:17px;
+	// font-weight:200;
+	// margin-left:-4px;
 }
 
 .multimode-payments {
@@ -322,4 +332,77 @@
 	.total-score, .grade, .score {
 		text-align: right;
 	}
+}
+
+.pos-list-row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+	padding: 9px 15px;
+	font-size: 12px;
+	margin: 0px;
+	border-bottom: 1px solid @border-color;
+
+	.cell {
+		display: table-cell;
+		vertical-align: middle;
+	}
+
+	.subject {
+		width: 50%
+	}
+
+	.list-row-checkbox, .list-select-all {
+		margin-right: 7px;
+	}
+}
+
+.pos-bill-header {
+	background-color: #f5f7fa;
+	border: 1px solid @border-color;
+}
+
+.pos-bill-item.active {
+	background-color: @light-yellow;
+}
+
+.totals-area {
+	border-right: 1px solid @border-color;
+	border-left: 1px solid @border-color;
+	margin-bottom: 15px;
+}
+
+body[data-route="pos"] .page-body {
+	height: ~"calc(100vh - 40px)";
+}
+
+.item-cart-items {
+	height: 30vh;
+	overflow: auto;
+	border: 1px solid @border-color;
+	border-top: none;
+
+	.no-items-message {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+}
+
+.pos .items .pos-list-row:last-child {
+	border-bottom: none;
+}
+
+.pos .form-section-heading {
+	padding: 0;
+}
+
+.pos {
+	overflow: hidden;
+}
+
+.pos .item-list {
+	border-left: 1px solid @border-color;
+	border-right: 1px solid @border-color;
 }
\ No newline at end of file