diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 3f21a49c57e..3ce06d12b0b 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -10,6 +10,7 @@
     top: 0;
     width: 100%;
     height: 100%;
+    -webkit-user-select: none;
 }
 .point-of-sale .loader{
     background-color: #222;
@@ -141,7 +142,7 @@
     /*height: 87%;
     width: 440px;
     position: relative;*/
-    border-right: solid 1px #afafb6;
+    border-right: solid 1px #CECBCB;
     background-color: white;
 }
 .point-of-sale #leftpane footer {
@@ -149,69 +150,9 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    background-color: #e0e0e0;
-    background-image: url(../img/headerbackground.jpg);
+    background: #F0EEEE;
     white-space: nowrap;
 }
-.point-of-sale #current-order {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 271px;
-    overflow: auto;
-}
-.point-of-sale #current-order thead {
-    background-color: #cccccc;
-    background-image: url(../img/headerbackground.jpg);
-    border: 0px;
-    font-size: 12px;
-    width: 440px;
-}
-.point-of-sale #current-order thead td {
-    text-align: center;
-    padding: 8px 0px;
-    min-width: 40px;
-    font-size: 12px;
-}
-.point-of-sale #current-order td {
-    padding: 6px 4px;
-    font-size: 11px;
-    text-align: right;
-    min-width: 40px;
-    white-space: nowrap;
-}
-.point-of-sale #current-order td:first-child {
-    width: 320px;
-    padding: 6px;
-    text-align: left;
-    text-overflow: ellipsis;
-}
-.point-of-sale #current-order td:last-child {
-    border-right: none;
-}
-.point-of-sale #current-order tr.selected {
-    background-color: #e9eaf2;
-}
-.point-of-sale #current-order tr.selected td {
-    border-top: 2px solid #d5d6e0;
-    border-bottom: 1px solid #d5d6e0;
-    padding-top: 5px;
-    color: #555555;
-}
-.point-of-sale #amounts {
-    background: white;
-    border-bottom: solid 1px #d2d2d2;
-    border-top: solid 1px #e9eaec;
-    font-weight: bold;
-    text-align: right;
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-}
-.point-of-sale #amounts li {
-    display: inline-block;
-    padding: 8px;
-    width: 29%;
-}
 .point-of-sale #paypad {
     padding: 8px 4px 8px 8px;
     display: inline-block;
@@ -275,6 +216,7 @@
     left: 440px;
     right: 0;
     vertical-align: top;
+    /*border-left: solid 1px #FFF;*/
 }
 .point-of-sale #rightpane header {
     padding: 0;
@@ -364,10 +306,11 @@
     font-size: 12px;
 }
 .point-of-sale .product {
+    position:relative;
     vertical-align: top;
     display: inline-block;
     font-size: 11px;
-    margin: 10px;
+    margin: 5px;
     max-width: 120px;
     background:#fff;
     border: 1px solid #fff;
@@ -379,7 +322,7 @@
     -box-shadow: 0px 1px 8px rgba(0,0,0,0.9);
     -webkit-filter: blur(3px);
 }
-.point-of-sale .product-img {
+.point-of-sale .product .product-img {
     position: relative;
     width: 120px;
     height: 100px;
@@ -387,7 +330,7 @@
     text-align: center;
     -webkit-filter: blur(3px);
 }
-.point-of-sale .price-tag {
+.point-of-sale .product .price-tag {
     position: absolute;
     top: 2px;
     right: 2px;
@@ -399,7 +342,7 @@
     -webkit-border-radius: 3px;
     border-radius: 3px;
 }
-.point-of-sale .price-subtag {
+.point-of-sale .product .price-subtag {
     position: absolute;
     top: 24px;
     right: 2px;
@@ -411,8 +354,15 @@
     -webkit-border-radius: 3px;
     border-radius: 3px;
 }
-.point-of-sale .product-name {
+.point-of-sale .product .product-name {
+    position: absolute;
+    -webkit-box-sizing: border-box;
+    bottom:0;
+    top:auto;
+    width:100%;
+    background: -webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
     padding: 3px;
+    padding-top:15px;
 }
 .point-of-sale #login-form label, .point-of-sale #login-form input {
     display: block;
@@ -457,11 +407,13 @@
 }
 
 .point-of-sale .screen .header-row {
+    border:none;
     width:100%;
     height:0px;
 }
 
 .point-of-sale .screen .header-cell{
+    border:none;
     width:100%;
     height:0px;
 }
@@ -562,6 +514,70 @@
     }
 }
 
+.point-of-sale .order-container{
+    position: absolute;
+    top: 0px;
+    bottom: 229px;
+    width:100%;
+    background: #F0EEEE;
+    overflow:hidden;
+}
+.point-of-sale .order{
+    background: #FFF;
+    background: -webkit-linear-gradient(0deg,rgba(245,245,245,1),rgba(255,255,255,1), rgba(245,245,245,1));
+    padding-bottom:15px;
+    padding-top:15px;
+    margin-left:16px;
+    margin-right:16px;
+    margin-top:16px;
+    -webkit-box-shadow: 0px 5px 16px rgba(0,0,0, 0.3);
+
+}
+.point-of-sale .orderline{
+    width:100%;
+    margin:0px;
+    padding-top:3px;
+    padding-bottom:10px;
+    padding-left:15px;
+    padding-right:15px;
+    cursor: pointer;
+    -webkit-box-sizing: border-box;
+    -webkit-transition: background 250ms ease-in-out;
+}
+.point-of-sale .orderline:hover{
+    background: rgba(140,143,183,0.05);
+    -webkit-transition: background 50ms ease-in-out;
+}
+
+.point-of-sale .orderline.selected{
+    background: rgba(140,143,183,0.2);
+    -webkit-transition: background 250ms ease-in-out;
+    cursor: default;
+}
+.point-of-sale .orderline .product-name{
+    padding:0;
+    display:inline-block;
+    font-size:18px;
+    font-weight: bold;
+    width:80%;
+    overflow:hidden;
+}
+.point-of-sale .orderline .price{
+    padding:0;
+    font-size: 18px;
+    font-weight: bold;
+    float:right;
+}
+.point-of-sale .orderline .info-list{
+    color: #888;
+    margin-left:10px;
+}
+.point-of-sale .orderline .info-list em{
+    color: #777;
+    font-weight: bold;
+    font-style:normal;
+}
+
 /* ----------------------- ACTION BAR ---------------------- */
 
 .point-of-sale .pos-actionbar{
@@ -771,6 +787,9 @@
     text-shadow: rgba(255,255,255,0.5) 0px 0px 10px;
     -webkit-transition: all 250ms ease-in-out;
 }
+.point-of-sale .scrollbar .button:hover{
+    text-shadow: rgba(255,255,255,0.8) 0px 0px 15px;
+}
 .point-of-sale .scrollbar .button.disabled{
     background: rgba(0,0,0,0.3);
     color:rgba(255,255,255,0.5);
diff --git a/addons/point_of_sale/static/src/js/pos_models.js b/addons/point_of_sale/static/src/js/pos_models.js
index 0c796a8a5e5..b183c22d8ec 100644
--- a/addons/point_of_sale/static/src/js/pos_models.js
+++ b/addons/point_of_sale/static/src/js/pos_models.js
@@ -493,6 +493,7 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
             discount: 0,
             weighted: false,
             product_type: 'unit',
+            unit: 'Unit',
         },
         initialize: function(attributes) {
             this.pos = attributes.pos;
diff --git a/addons/point_of_sale/static/src/js/pos_widgets.js b/addons/point_of_sale/static/src/js/pos_widgets.js
index c4ce370a4c3..714094f1cbc 100644
--- a/addons/point_of_sale/static/src/js/pos_widgets.js
+++ b/addons/point_of_sale/static/src/js/pos_widgets.js
@@ -92,30 +92,42 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
                 this.$element.remove();
             }, this));
             this.order = options.order;
-        },
-        start: function() {
-            this.$element.click(_.bind(this.clickHandler, this));
-            this.refresh();
+
+            if(options.selected){
+                this.select();
+            }else{
+                this.selected = false;
+            }
         },
         clickHandler: function() {
             this.select();
         },
         renderElement: function() {
             this._super();
-            this.select();
+            this.$element.click(_.bind(this.clickHandler, this));
+            if(this.selected){
+                this.$element.addClass('selected');
+            }
         },
-        refresh: function() {
+        refresh: function(){
             this.renderElement();
-            var heights = _.map(this.$element.prevAll(), function(el) {return $(el).outerHeight();});
-            heights.push($('#current-order thead').outerHeight());
-            var position = _.reduce(heights, function(memo, num){ return memo + num; }, 0);
-            $('#current-order').scrollTop(position);
         },
         select: function() {
-            $('tr.selected').removeClass('selected');
-            this.$element.addClass('selected');
+            console.log('SELECT:',this);
+            if(this.order.selected_widget){
+                this.order.selected_widget.deselect();
+            }
+            this.selected = true;
+            this.order.selected_widget = this;
             this.order.selected = this.model;
             this.on_selected();
+            this.$element.addClass('selected');
+        },
+        deselect: function(){
+            this.selected = false;
+            this.order.selected_widget = null;
+            this.order.selected = null;
+            this.$element.removeClass('selected');
         },
         on_selected: function() {},
     });
@@ -163,12 +175,12 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
             var line = new module.OrderlineWidget(null, {
                     model: newLine,
                     pos: this.pos,
-                    order: this.pos.get('selectedOrder')
+                    order: this.pos.get('selectedOrder'),
+                    selected:true,
             });
             line.on_selected.add(_.bind(this.selected_line, this));
             this.selected_line();
-            line.appendTo(this.$element.find('#current-order-content'));
-            this.update_summary();
+            line.appendTo(this.$('.order'));
         },
         selected_line: function() {
         	var reset = false;
@@ -178,32 +190,20 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
         	this.currentSelected = this.pos.get('selectedOrder').selected;
         	if (reset && this.numpadState)
         		this.numpadState.reset();
-            this.update_summary();
         },
         renderElement: function() {
             this._super();
-            var $content = this.$element.find('#current-order-content');
+            var $content = this.$('.order');
             $content.empty();
             this.currentOrderLines.each(_.bind( function(orderLine) {
                 var line = new module.OrderlineWidget(null, {
                         model: orderLine,
-                        order: this.pos.get('selectedOrder')
+                        order: this.pos.get('selectedOrder'),
+                        selected:true,
                 });
             	line.on_selected.add(_.bind(this.selected_line, this));
                 line.appendTo($content);
             }, this));
-            this.update_summary();
-        },
-        update_summary: function() {
-            var currentOrder, tax, total, totalTaxExcluded;
-            currentOrder = this.pos.get('selectedOrder');
-            total = currentOrder.getTotal();
-            totalTaxExcluded = currentOrder.getTotalTaxExcluded();
-            tax = currentOrder.getTax();
-            this.pos_widget.action_bar.set_total_value(Math.round(total*100)/100);
-            $('#subtotal').html(totalTaxExcluded.toFixed(2)).hide().fadeIn();
-            $('#tax').html(tax.toFixed(2)).hide().fadeIn();
-            $('#total').html(total.toFixed(2)).hide().fadeIn();
         },
     });
 
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index 564b0da09ea..7cf4744a5ce 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -25,33 +25,8 @@
                 <div id="leftpane">
                     <div id="placeholder-OrderWidget"></div>
                     <footer>
-
-                        <ul id="amounts">
-                            <li>
-                                Subtotal:
-                                <t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/> 
-                                <span id="subtotal">0</span> 
-                                <t t-if="widget.currency.position === 'after'"  t-esc="widget.currency.symbol"/>
-                            </li>
-
-                            <li>
-                                Tax:
-                                <t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/> 
-                                <span id="tax">0</span> 
-                                <t t-if="widget.currency.position === 'after'"  t-esc="widget.currency.symbol"/>
-                            </li>
-
-                            <li>
-                                Total:
-                                <t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/> 
-                                <span id="total">0</span> 
-                                <t t-if="widget.currency.position === 'after'"  t-esc="widget.currency.symbol"/>
-                            </li>
-                        </ul>
-
                         <div id="placeholder-PaypadWidget"></div>
                         <div id="placeholder-NumpadWidget"></div>
-
                     </footer>
                 </div>
                 <div id="rightpane">
@@ -63,22 +38,6 @@
         </div>
     </t>
 
-    <t t-name="OrderWidget">
-        <div id="current-order">
-            <table>
-                <thead>
-                    <tr>
-                        <td>Product</td>
-                        <td>Price</td>
-                        <td>Disc (%)</td>
-                        <td>Qty</td>
-                        <td>Total</td>
-                    </tr>
-                </thead>
-                <tbody id="current-order-content"></tbody>
-            </table>
-        </div>
-    </t>
 
     <t t-name="SynchNotificationWidget">
         <span>
@@ -371,46 +330,44 @@
             </div>
         </div>
     </t>
-    <t t-name="OrderlineWidget">
-        <tr>
-            <td>
-                <t t-esc="widget.model.get('name')"/>
-            </td>
-            <td>
-                <t t-esc="widget.format_currency(widget.model.get('list_price'))"/>
-            </td>
-            <td>
-                <t t-esc="widget.model.get('discount').toFixed(2)"/>
-            </td>
-            <td>
-                <t t-if="widget.model.get('weighted')">
-                    <t t-esc="Math.round(widget.model.get('quantity')*100)/100+' Kg'"/>
-                </t>
-                <t t-if="!widget.model.get('weighted')">
-                    <t t-esc="Math.round(widget.model.get('quantity')*100)/100"/>
-                </t>
-            </td>
-            <td>
-                <t t-esc="widget.format_currency(widget.model.get('list_price') * (1 - widget.model.get('discount')/100) * widget.model.get('quantity'))"/>
-            </td>
-        </tr>
+
+    <t t-name="OrderWidget">
+        <div class="order-container">
+            <ul class="order">
+            </ul>
+        </div>
     </t>
 
-    <t t-name="OrderlineWidget2">
+    <t t-name="OrderlineWidget">
         <li class="orderline">
-            <h4 class="product-name">
-                Pizza
-            </h4>
+            <span class="product-name">
+                <t t-esc="widget.model.get('name')"/>
+            </span>
             <span class="price">
-                3.14$
+                <t t-esc="widget.format_currency(widget.model.getPriceWithTax())"/>
             </span>
             <ul class="info-list">
-                <li class="info">
-                    5 pizza at $0.51/pizza
-                </li>
-                <li class="info">
-                    25 discount
-                </li>
+                <t t-if="widget.model.get('quantity') !== 1.0">
+                    <li class="info">
+                        <em>
+                            <t t-esc="widget.model.get('quantity')" />
+                        </em>
+                        <t t-esc="widget.model.get('unit')" />
+                        at
+                        <t t-esc="widget.format_currency(widget.model.get('list_price'))" />
+                        /
+                        <t t-esc="widget.model.get('unit')" />
+                    </li>
+                </t>
+                <t t-if="widget.model.get('discount') > 0">
+                    <li class="info">
+                        With a 
+                        <em>
+                            <t t-esc="widget.model.get('discount')" />%
+                        </em>
+                        discount
+                    </li>
+                </t>
             </ul>
         </li>
     </t>