[enhancement] Item Selector
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index d12b9b2..36ef7c9 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -47,7 +47,10 @@
     			</div>
     		</div>
     	</div>
-    	<div class="col-sm-7 pos-item-area">
+    	<div class="col-sm-7 pos-items-section">
+			<div class="row pos-item-area">
+
+			</div>
             <div class="row pos-item-toolbar">
             	<div class="search-area col-xs-12"></div>
             </div>
diff --git a/erpnext/public/js/pos/pos.js b/erpnext/public/js/pos/pos.js
index a239bbc..60801e6 100644
--- a/erpnext/public/js/pos/pos.js
+++ b/erpnext/public/js/pos/pos.js
@@ -131,7 +131,9 @@
 							item_code: obj.name,
 							item_price: format_currency(obj.price_list_rate, obj.currency),
 							item_name: obj.name===obj.item_name ? "" : obj.item_name,
-							item_image: obj.image ? "url('" + obj.image + "')" : null
+							item_image: obj.image ? "url('" + obj.image + "')" : null,
+							color: frappe.get_palette(obj.item_name),
+							abbr: frappe.get_abbr(obj.item_name)
 						})).tooltip().appendTo($wrap);
 					});
 				}
diff --git a/erpnext/public/js/pos/pos_item.html b/erpnext/public/js/pos/pos_item.html
index 1235db9..aec36a7 100644
--- a/erpnext/public/js/pos/pos_item.html
+++ b/erpnext/public/js/pos/pos_item.html
@@ -1,9 +1,13 @@
-<div class="pos-item" data-item-code="{%= item_code %}" title="{%= item_name || item_code %}">
-	<div class="pos-item-image {% if (!item_image) { %} no-image {% } %}"
-		 style="{% if (item_image) { %} background-image: {%= item_image %} {% } %}">
+<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>
+		<div class="pos-item-text">
+			<h6 class="item-code text-ellipsis">{%= item_name ? (item_name + " (" + item_code + ")") : item_code %}</h6>
+			<div class="small text-ellipsis">{%= item_price %}</div>
+		</div>
 	</div>
-	<div class="pos-item-text">
-		<h6 class="item-code text-ellipsis">{%= item_name ? (item_name + " (" + item_code + ")") : item_code %}</h6>
-		<div class="small text-ellipsis">{%= item_price %}</div>
-	</div>
-</div>
+</div>
\ No newline at end of file