diff --git a/addons/stock/static/src/css/picking.css b/addons/stock/static/src/css/picking.css
index bc131efb715..5baa9846710 100644
--- a/addons/stock/static/src/css/picking.css
+++ b/addons/stock/static/src/css/picking.css
@@ -17,50 +17,65 @@
 }
 
 .oe_pick_widget .oe_pick_header{
-    background: red;
+    background: #454343;
+    background-image: linear-gradient(#646060,#262626);
 }
 .oe_pick_widget .oe_pick_body_cont{
-    background: blue;
     height: 100%;
 }
 .oe_pick_widget .oe_pick_body{
     width: 100%;
     height: 100%;
-    background: green;
+    background-color: white;
+    background: url('/web/static/src/img/form_sheetbg.png');
+    box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.16) inset;
     overflow: hidden;
     overflow-y: auto;
 }
 .oe_pick_widget .oe_pick_app{
     width: 600px;
-    background: yellow;
+    background: white;
     margin: 40px auto;
+    padding: 20px;
+    border: solid 1px rgb(228, 228, 255);
+    box-shadow: 0px 2px 3px rgba(114, 114, 175, 0.11);
 }
 .oe_pick_widget .oe_pick_toolbar{
     width: 600px;
-    background: purple;
     margin: auto;
     text-align: center;
 }
 .oe_pick_widget .oe_pick_button{
     display: inline-block;
     min-width: 120px;
-    padding: 15px;
-    margin: 10px;
+    padding: 5px;
+    font-size: 18px;
+    border-radius: 3px;
+    margin: 10px 5px;
     text-align: center;
     line-height: 30px;
-    background: white;
+    background: linear-gradient(#b2b3d7, #7f82ac);
+    color: #273072;
+    border: 1px solid #353A7E;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
+    cursor: pointer;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 }
 .oe_pick_widget .oe_pick_right_toolbar{
-    background: blue;
     float: right;
 }
-.oe_pick_widget .oe_pick_col_small{  width: 50px; }
-.oe_pick_widget .oe_pick_col_medium{ width: 100px; }
-.oe_pick_widget .oe_pick_col_big{    width: 200px; }
-.oe_pick_widget .oe_pick_col_expand{  width: 100%; }
+.oe_pick_widget .oe_pick_right_toolbar .oe_pick_button{
+    margin-right: 10px;
+}
+.oe_pick_widget .oe_pick_col_small{     width: 50px; }
+.oe_pick_widget .oe_pick_col_medium{    width: 100px; }
+.oe_pick_widget .oe_pick_col_big{       width: 200px; }
+.oe_pick_widget .oe_pick_col_expand{    width: 100%; }
+.oe_pick_widget .oe_centeralign{  text-align: center; }
+
 .oe_pick_widget .oe_invalid{ 
-    background: red;
-    color: white;
+    background: rgb(255, 226, 226);
+    color: rgb(168, 6, 6);
 }
 
 /* ----------------------- *
@@ -68,112 +83,50 @@
  * ----------------------- */
 
 .oe_pick_widget .oe_pick_list{
-    background: red;
-    margin: 20px 0px;
+    margin: 0px 0px 20px 0px;
+    padding: 5px;
 }
 
 .oe_pick_widget .oe_pick_list_header{
-    background: blue;
+    font-size: 20px;
+    margin-bottom: 5px;
 }
 .oe_pick_widget .oe_pick_list_table{
+    background: whitesmoke;
     width: 100%;
     table-layout: fixed;
-    background: greenyellow;
-
-}
-
-
-
-/* ----------------------- *
- *      TACTILE LIST       *
- * ----------------------- */
-
-.openerp .oe_tactlist {
+    font-size: 16px;
     border-radius: 3px;
-    font-size: 18px;
-    background: black;
-    color: white;
-    margin-bottom: 20px;
+
 }
-.openerp .oe_tactlist .oe_tactlist_header{
+.oe_pick_widget .oe_pick_list_table tbody tr:nth-child(odd){
+    background: rgb(250,250,250);
+}
+.oe_pick_widget .oe_pick_list_table td,
+.oe_pick_widget .oe_pick_list_table th {
     padding: 5px;
-    font-size: 24px;
-    overflow: hidden;
 }
-.openerp .oe_tactlist .oe_vresizer{
-    cursor: ns-resize;
-    height: 15px;
+.oe_pick_widget .oe_pick_list_table thead{
+    background: rgb(224, 225, 235);
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
 }
-.openerp .oe_tactlist .oe_hresizer{
+.oe_pick_widget .oe_pick_list_table th {
+    background: none;
+    border: none;
+    font-weight: bold;
+}
+.oe_pick_widget .oe_row_button{
     display: inline-block;
-    float: right;
-    height: 15px;
-    width: 15px;
-    line-height: 15px;
-    text-align: center;
-    font-size: 9px;
-    color: rgba(255,255,255,0.3);
-    cursor: move;
+    background: rgb(255, 255, 255);
+    width: 16px;
+    height: 16px;
+    line-height: 14px;
+    color: rgb(102, 98, 133);
+    font-weight: bold;
+    border-radius: 9px;
+    border: solid 1px rgba(0, 0, 0, 0.09);
+    cursor: pointer;
 }
-.openerp .oe_tactlist .oe_scrolltable{
-    position: relative;
-    background: rgb(209,209,209);
-}
-.openerp .oe_tactlist td{
-    padding: 5px;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-.openerp .oe_tactlist .oe_scrolltable_scroll{
-    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-.openerp .oe_tactlist .oe_scrolltable_header_container{
-    position: absolute;
-    top: 0px;
-    overflow: hidden;
-}
-.openerp .oe_tactlist .oe_scrolltable_header{
-    background: black;
-    color: white;
-    width: 100%;
-    table-layout: fixed;
-}
-.openerp .oe_tactlist .oe_scrolltable_body{
-    table-layout: fixed;
-    margin-top: 32px;
-    background: #D6D6D6;
-    color: #444444;
-}
-.openerp .oe_tactlist .oe_invalid{
-    background: rgb(255, 192, 192);
-    color: rgb(201, 0, 0);
-}
-.openerp .oe_tactlist .oe_scrolltable_body tr:nth-child(even){
-    background: rgba(0,0,0,0.02);
-}
-.openerp .oe_tactlist td.oe_small,  .openerp .oe_tactlist col.oe_small{  width: 50px;  }
-.openerp .oe_tactlist td.oe_medium, .openerp .oe_tactlist col.oe_medium{ width: 100px; }
-.openerp .oe_tactlist td.oe_big,    .openerp .oe_tactlist col.oe_big{    width: 200px; }
-.openerp .oe_tactlist td.oe_expand, .openerp .oe_tactlist col.oe_expand{ width: 100%;  }
-
-.openerp .oe_tactlist ::-webkit-scrollbar{
-    width: 15px;
-    background-color: black;
-}
-.openerp .oe_tactlist ::-webkit-scrollbar-track{
-    background-color: black;
-}
-.openerp .oe_tactlist ::-webkit-scrollbar-thumb{
-    background-color: rgba(255,255,255,0.6);
-    border: solid 4px black;
-}
-.openerp .oe_tactlist ::-wekbit-scrollbar-button{
-    display: none;
-}
-    
-
-
 
 
diff --git a/addons/stock/static/src/js/widgets.js b/addons/stock/static/src/js/widgets.js
index fc5d88276e5..f49275ef2c0 100644
--- a/addons/stock/static/src/js/widgets.js
+++ b/addons/stock/static/src/js/widgets.js
@@ -2,97 +2,18 @@
 function openerp_picking_widgets(instance){
     var module = instance.stock;
 
-    /*
-     * new TactileListWidget(parent,{
-     *   height: '500px',
-     *   width:  '100%',
-     *   title:  'Sample List',
-     *   collumns: [
-     *      {header:'Foobar', classes:'oe_small'},
-     *      {header:'Foobar', classes:'oe_medium'},
-     *      {header:''      , classes:'oe_big'},
-     *      {header:'BarFoo', classes:'oe_expand'},
-     *   ],
-     *   rows: [
-     *      {cols: [0,1,2,3] },
-     *      {cols: [1,2,3,4], classes:'oe_selected oe_invalid'},
-     *      {cols: [2,1,3,4] },
-     *   ]
-     * });
-     */
-
-    module.TactileListWidget = instance.web.Widget.extend({
-        template: 'TactileListWidget',
-        init: function(parent, options){
-            this._super(parent,options);
-            this._collumns = options.collumns || [];
-            this._rows = options.rows || [];
-            this._title = options.title || '';
-            this._width = options.width || 625;
-            this._height = options.height || 200;
-            this._scrollbarwidth = 15;
-        },
-        renderElement: function(){
-            var self = this;
-            this._super();
-            this.$('.js_vresizer, .js_hresizer').mousedown(function(event){
-                self._startsize = {height: self.get_height(), width: self.get_width()};
-                console.log('drag init:',self._startsize);
-            });
-            this.$('.js_vresizer').drag(function(event,dragevent){
-                self.set_height(self._startsize.height + dragevent.deltaY);
-            });
-            this.$('.js_hresizer').drag(function(event,dragevent){
-                self.set_height(self._startsize.height + dragevent.deltaY);
-                self.set_width(self._startsize.width + dragevent.deltaX);
-            });
-        },
-        get_collumns: function(){
-            return this._collumns;
-        },
-        get_rows: function(){
-            return this._rows;
-        },
-        add_row: function(row){
-            this._rows.push(row);
-            this.renderElement();
-        },
-        get_title: function(){
-            return this._title;
-        },
-        get_width: function(){
-            return this._width;
-        },
-        get_innerwidth: function(){
-            return this._width - this._scrollbarwidth;
-        },
-        set_width: function(width){
-            if(width >= 0){
-                this._width = width;
-                this.$('.js_innerwidth').css({'width':this.get_innerwidth()+'px'});
-                this.$el.css({'width':this.get_width()+'px'});
-            }
-        },
-        get_height: function(){
-            return this._height;
-        },
-        set_height: function(height){
-            if(height >= 0){
-                this._height = height;
-                this.$('.js_height').css({'height':this.get_height()+'px'});
-            }
-        },
-    });
-
     module.PickingEditorWidget = instance.web.Widget.extend({
         template: 'PickingEditorWidget',
+        init: function(parent,options){
+            this._super(parent,options);
+        },
         get_header: function(){
-            return 'Picking: INTERNAL/00112';
+            return this._header || 'Picking: INTERNAL/00112';
         },
         get_rows: function(){
-            return [
+            return this._rows || [
                 { cols: { product:'abc', qty:1, rem: 4, uom: 5, loc: 'def', stat: 'available' },   },
-                { cols: { product:'dec', qty:2, rem: 3, uom: 5, loc: 'rcd', stat: 'available' },  classes: 'oe_invalid' },
+                { cols: { product:'dec', qty:2, rem: 3, uom: 5, loc: 'rcd', stat: 'available' },  classes: '' },
                 { cols: { product:'qcr', qty:4, rem: 4, uom: 5, loc: 'hre', stat: 'unavailable' }, },
             ];
         },
@@ -101,12 +22,12 @@ function openerp_picking_widgets(instance){
     module.PackageEditorWidget = instance.web.Widget.extend({
         template: 'PackageEditorWidget',
         get_header: function(){
-            return 'Package: 032 ';
+            return this._header || 'Package: 032 ';
         },
         get_rows: function(){
-            return [
+            return this._rows || [
                 { cols: { product:'abc', qty:1, uom: 5, },   },
-                { cols: { product:'dec', qty:2, uom: 5, },  classes: 'oe_invalid' },
+                { cols: { product:'dec', qty:2, uom: 5, },  classes: '' },
                 { cols: { product:'qcr', qty:4, uom: 5, }, },
             ];
         },
@@ -115,31 +36,52 @@ function openerp_picking_widgets(instance){
     module.PackageSelectorWidget = instance.web.Widget.extend({
         template: 'PackageSelectorWidget',
         get_header: function(){
-            return 'Package Selector';
+            return this._header || 'Package Selector';
         },
         get_rows: function(){
-            return [
-                { cols: { pack:'abc' },   },
-                { cols: { pack:'def' }, classes: 'oe_invalid'   },
-                { cols: { pack:'ghi' },   },
+            return this._rows || [
+                { cols: { pack:'abc', qty:12  },   },
+                { cols: { pack:'def', qty:500 }, classes: ''   },
+                { cols: { pack:'ghi', qty:1   },   },
             ];
         },
-        increment: function(){
-        },
-        decrement: function(){
-        },
     });
 
     module.PickingMainWidget = instance.web.Widget.extend({
         template: 'PickingMainWidget',
         init: function(parent,params){
             this._super(parent,params);
-            console.log(params);
+            
+            console.log('Action params:', params);
+
+            new instance.web.Model('stock.picking.in')
+                .query()
+                .all()
+                .then(function(results){
+                    console.log('Picking In:',results);
+                });
+
+            new instance.web.Model('stock.picking.out')
+                .query()
+                .all()
+                .then(function(results){
+                    console.log('Picking Out:',results);
+                });
+
+            new instance.web.Model('stock.quant.package')
+                .query(['name','packaging_id','quant_ids','parent_id','children_ids','location_id','pack_operation_id'])
+                .all()
+                .then(function(result){
+                    console.log('Packages: ',result);
+                 });
+
+            new instance.web.Model('stock.pack.operation')
+                .query(['picking_id','product_id','product_uom','product_qty','package_id','quant_id','result_package_id'])
+                .all()
+                .then(function(results){
+                    console.log('Pack Operations:',results);
+                });
 
-            var packages = new instance.web.Model('stock.quant.package');
-            packages.query('name','packaging_id','quant_ids','parent_id','children_ids','location_id','pack_operation_id').all().then(function(result){
-                console.log(result);
-            });
         },
         start: function(){
             var self = this;
diff --git a/addons/stock/static/src/xml/picking.xml b/addons/stock/static/src/xml/picking.xml
index 8b6847a54b0..c1c5f088f11 100644
--- a/addons/stock/static/src/xml/picking.xml
+++ b/addons/stock/static/src/xml/picking.xml
@@ -62,7 +62,12 @@
 
                 <thead>
                     <tr>
-                        <th>Product</th> <th>Qty</th> <th>Rem</th> <th>UoM</th> <th>Location</th> <th>Status</th>
+                        <th>Product</th> 
+                        <th class='oe_centeralign'>Qty</th> 
+                        <th class='oe_centeralign'>Rem</th> 
+                        <th class='oe_centeralign'>UoM</th> 
+                        <th>Location</th> 
+                        <th>Status</th>
                     </tr>
                 </thead>
 
@@ -70,9 +75,9 @@
                     <t t-foreach="widget.get_rows()" t-as="row">
                         <tr t-att-class="row.classes">
                             <td> <t t-esc="row.cols.product" /> </td>
-                            <td> <t t-esc="row.cols.qty" /> </td>
-                            <td> <t t-esc="row.cols.rem" /> </td>
-                            <td> <t t-esc="row.cols.uom" /> </td>
+                            <td class='oe_centeralign'> <t t-esc="row.cols.qty" /> </td>
+                            <td class='oe_centeralign'> <t t-esc="row.cols.rem" /> </td>
+                            <td class='oe_centeralign'> <t t-esc="row.cols.uom" /> </td>
                             <td> <t t-esc="row.cols.loc" /> </td>
                             <td> <t t-esc="row.cols.stat" /> </td>
                         </tr>
@@ -96,7 +101,9 @@
 
                 <thead>
                     <tr>
-                        <th>Product</th> <th>Qty</th> <th>UoM</th> 
+                        <th>Product</th> 
+                        <th class='oe_centeralign'>Qty</th> 
+                        <th class='oe_centeralign'>UoM</th> 
                     </tr>
                 </thead>
 
@@ -104,8 +111,8 @@
                     <t t-foreach="widget.get_rows()" t-as="row">
                         <tr t-att-class="row.classes">
                             <td> <t t-esc="row.cols.product" /> </td>
-                            <td> <t t-esc="row.cols.qty" /> </td>
-                            <td> <t t-esc="row.cols.uom" /> </td>
+                            <td class='oe_centeralign'> <t t-esc="row.cols.qty" /> </td>
+                            <td class='oe_centeralign'> <t t-esc="row.cols.uom" /> </td>
                         </tr>
                     </t>
                 </tbody>
@@ -123,11 +130,12 @@
                     <col class='oe_pick_col_expand'></col>
                     <col class='oe_pick_col_small'></col>
                     <col class='oe_pick_col_small'></col>
+                    <col class='oe_pick_col_small'></col>
                 </colgroup>
 
                 <thead>
                     <tr>
-                        <th>Package</th> <th></th> <th></th> 
+                        <th>Package</th> <th class='oe_centeralign'>Qty</th> <th></th> <th></th> 
                     </tr>
                 </thead>
 
@@ -135,8 +143,9 @@
                     <t t-foreach="widget.get_rows()" t-as="row">
                         <tr t-att-class="row.classes">
                             <td> <t t-esc="row.cols.pack" /> </td>
-                            <td> + </td>
-                            <td> - </td>
+                            <td class='oe_centeralign'> <t t-esc="row.cols.qty" /> </td>
+                            <td class='oe_centeralign'> <span class='oe_row_button js_pick_plus'>+</span> </td>
+                            <td class='oe_centeralign'> <span class='oe_row_button js_pick_minus'>-</span> </td>
                         </tr>
                     </t>
                 </tbody>