diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 5420462cbf1..583754f947b 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -2717,6 +2717,7 @@
   width: 24px;
   height: 24px;
   display: inline-block;
+  z-index: 1;
   margin-left: -12px;
   margin-top: 3px;
   box-shadow: -1px 1px 2px rgba(255, 255, 255, 0.2), inset -1px 1px 1px rgba(0, 0, 0, 0.2);
@@ -2750,24 +2751,54 @@
   padding-left: 14px;
 }
 .openerp ul.oe_form_status li.oe_active, .openerp ul.oe_form_status_clickable li.oe_active {
-  background-color: #5382b9;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
-  background-image: -webkit-linear-gradient(top, #729fcf, #3465a4);
-  background-image: -moz-linear-gradient(top, #729fcf, #3465a4);
-  background-image: -ms-linear-gradient(top, #729fcf, #3465a4);
-  background-image: -o-linear-gradient(top, #729fcf, #3465a4);
-  background-image: linear-gradient(to bottom, #729fcf, #3465a4);
+  background-color: #868686;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9c9c), to(#707070));
+  background-image: -webkit-linear-gradient(top, #9c9c9c, #707070);
+  background-image: -moz-linear-gradient(top, #9c9c9c, #707070);
+  background-image: -ms-linear-gradient(top, #9c9c9c, #707070);
+  background-image: -o-linear-gradient(top, #9c9c9c, #707070);
+  background-image: linear-gradient(to bottom, #9c9c9c, #707070);
 }
 .openerp ul.oe_form_status li.oe_active > .arrow span, .openerp ul.oe_form_status_clickable li.oe_active > .arrow span {
-  background-color: #3465a4;
-  background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
-  background: -o-linear-gradient(135deg, #729fcf, #3465a4);
-  background: -webkit-gradient(linear, left top, right bottom, from(#729fcf), to(#3465a4));
-  background: -ms-linear-gradient(top, #729fcf, #3465a4);
+  background-color: #707070;
+  background: -moz-linear-gradient(135deg, #707070, #9c9c9c);
+  background: -o-linear-gradient(135deg, #9c9c9c, #707070);
+  background: -webkit-gradient(linear, left top, right bottom, from(#9c9c9c), to(#707070));
+  background: -ms-linear-gradient(top, #9c9c9c, #707070);
 }
 .openerp ul.oe_form_status li.oe_active > .label, .openerp ul.oe_form_status_clickable li.oe_active > .label {
   color: white;
-  text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
+  text-shadow: 0 1px 1px #9c9c9c, 0 -1px 1px #707070;
+}
+.openerp ul.oe_form_status li.oe_bar_1:not(.oe_active), .openerp ul.oe_form_status_clickable li.oe_bar_1:not(.oe_active) {
+  background: #dc5f59;
+  background-color: #c02c2c;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#df3f3f), to(#a21a1a));
+  background-image: -webkit-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: -moz-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: -ms-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: -o-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: linear-gradient(to bottom, #df3f3f, #a21a1a);
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
+}
+.openerp ul.oe_form_status li.oe_bar_1:not(.oe_active) > .arrow span, .openerp ul.oe_form_status_clickable li.oe_bar_1:not(.oe_active) > .arrow span {
+  background: #dc5f59;
+  background-color: #c02c2c;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#df3f3f), to(#a21a1a));
+  background-image: -webkit-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: -moz-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: -ms-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: -o-linear-gradient(top, #df3f3f, #a21a1a);
+  background-image: linear-gradient(to bottom, #df3f3f, #a21a1a);
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
+}
+.openerp ul.oe_form_status li.oe_bar_1:not(.oe_active) > .label, .openerp ul.oe_form_status_clickable li.oe_bar_1:not(.oe_active) > .label {
+  color: white;
+  text-shadow: none;
 }
 .openerp ul.oe_form_status_clickable li {
   cursor: pointer;
@@ -2797,23 +2828,23 @@
   color: #7c7bad;
 }
 .openerp ul.oe_form_status_clickable li.oe_active:hover {
-  background-color: #3a699f;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#4c85c2), to(#284d7d));
-  background-image: -webkit-linear-gradient(top, #4c85c2, #284d7d);
-  background-image: -moz-linear-gradient(top, #4c85c2, #284d7d);
-  background-image: -ms-linear-gradient(top, #4c85c2, #284d7d);
-  background-image: -o-linear-gradient(top, #4c85c2, #284d7d);
-  background-image: linear-gradient(to bottom, #4c85c2, #284d7d);
+  background-color: #6d6d6d;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#575757));
+  background-image: -webkit-linear-gradient(top, #838383, #575757);
+  background-image: -moz-linear-gradient(top, #838383, #575757);
+  background-image: -ms-linear-gradient(top, #838383, #575757);
+  background-image: -o-linear-gradient(top, #838383, #575757);
+  background-image: linear-gradient(to bottom, #838383, #575757);
 }
 .openerp ul.oe_form_status_clickable li.oe_active:hover > .label {
-  text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
+  text-shadow: 0 -1px 1px #9c9c9c, 0 1px 1px #707070;
 }
 .openerp ul.oe_form_status_clickable li.oe_active:hover > .arrow span {
-  background-color: #284d7d;
-  background: -moz-linear-gradient(135deg, #284d7d, #4c85c2);
-  background: -o-linear-gradient(135deg, #4c85c2, #284d7d);
-  background: -webkit-gradient(linear, left top, right bottom, from(#4c85c2), to(#284d7d));
-  background: -ms-linear-gradient(top, #4c85c2, #284d7d);
+  background-color: #575757;
+  background: -moz-linear-gradient(135deg, #575757, #838383);
+  background: -o-linear-gradient(135deg, #838383, #575757);
+  background: -webkit-gradient(linear, left top, right bottom, from(#838383), to(#575757));
+  background: -ms-linear-gradient(top, #838383, #575757);
 }
 .openerp .oe_form .oe_form_field_one2many > .oe_view_manager .oe_list_pager_single_page {
   display: none;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 5900eb9d268..0a94fb21f33 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -2166,6 +2166,7 @@ $sheet-padding: 16px
                     width: 24px
                     height: 24px
                     display: inline-block
+                    z-index: 1
                     margin-left: -12px
                     margin-top: 3px
                     box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
@@ -2185,12 +2186,26 @@ $sheet-padding: 16px
                     padding-left: 14px
 
         li.oe_active
-            @include vertical-gradient(#729fcf, #3465a4)
+            @include vertical-gradient(#9c9c9c, #707070)
             > .arrow span
-                @include skew-gradient(#729fcf, #3465a4)
+                @include skew-gradient(#9c9c9c, #707070)
             > .label
                 color: white
-                text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
+                text-shadow: 0 1px 1px #9c9c9c, 0 -1px 1px #707070
+
+        li.oe_bar_1:not(.oe_active)
+            background: #DC5F59
+            @include vertical-gradient(#df3f3f, #a21a1a)
+            @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
+            > .arrow 
+                span
+                    background: #DC5F59
+                    @include vertical-gradient(#df3f3f, #a21a1a)
+                    @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
+            > .label
+                color: white
+                text-shadow: none
+
     ul.oe_form_status_clickable
         li
             cursor: pointer
@@ -2204,11 +2219,11 @@ $sheet-padding: 16px
                 color: $link-color
         li.oe_active
             &:hover
-                @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
+                @include vertical-gradient(darken(#9c9c9c, 10%), darken(#707070, 10%))
                 > .label
-                    text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
+                    text-shadow: 0 -1px 1px #9c9c9c, 0 1px 1px #707070
                 > .arrow span
-                    @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
+                    @include skew-gradient(darken(#9c9c9c, 10%), darken(#707070, 10%))
     // }}}
     // FormView.one2many {{{
     .oe_form .oe_form_field_one2many > .oe_view_manager
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index bcea1bf5bbe..6f19455fc0b 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -5522,16 +5522,24 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
             if (this.field.type == "many2one") {
                 return self.get_distant_fields().then(function(fields) {
                     return new instance.web.DataSetSearch(self, self.field.relation, self.build_context(), self.get("evaluated_selection_domain"))
-                        .read_slice(fields.fold ? ['fold'] : ['id'], {}).then(function (records) {
+                        .read_slice(_.union(_.keys(self.distant_fields), ['id']), {}).then(function (records) {
+                            console.log(records);
+                            var ids = _.pluck(records, 'id');
 
-                            var ids = _.map(records, function (val) {return val.id;});
+                            // var ids = _.map(records, function (val) {return val.id;});
                             return self.dataset.name_get(ids).then(function (records_name) {
                                 _.each(records, function (record) {
                                     var name = _.find(records_name, function (val) {return val[0] == record.id;})[1];
-                                    if (record.fold && record.id != self.get('value')) {
-                                        selection_folded.push([record.id, name]);
+                                    var widget_item = {
+                                        'id': record.id,
+                                        'name': name,
+                                        'bar_color': record.bar_color || 0,
+                                        'bar_fold': record.bar_fold || false,
+                                    }
+                                    if (record.bar_fold && record.id != self.get('value')) {
+                                        selection_folded.push(widget_item);
                                     } else {
-                                        selection_unfolded.push([record.id, name]);
+                                        selection_unfolded.push(widget_item);
                                     }
                                 });
                             });
@@ -5563,7 +5571,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
         if (this.distant_fields) {
             return $.when(this.distant_fields);
         }
-        return new instance.web.Model(self.field.relation).call("fields_get", [["fold"]]).then(function(fields) {
+        return new instance.web.Model(self.field.relation).call("fields_get", [["bar_fold", "bar_color"]]).then(function(fields) {
             self.distant_fields = fields;
             return fields;
         });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 6cbc3fb5692..f60f8d1c6d8 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1220,9 +1220,9 @@
     <ul t-att-class="'oe_form_field_status ' + (widget.options.clickable ? 'oe_form_status_clickable' : 'oe_form_status')" t-att-style="widget.node.attrs.style"/>
 </t>
 <t t-name="FieldStatus.content">
-    <t t-foreach="widget.selection.unfolded" t-as="i">
-        <li t-att-class="i[0] === widget.get('value') ? 'oe_active' : ''" t-att-data-id="i[0]">
-            <span class="label"><t t-esc="i[1]"/></span>
+    <t t-foreach="widget.selection.unfolded" t-as="item">
+        <li t-attf-class="#{item.bar_color and ('oe_bar_' + item.bar_color)} #{item.id === widget.get('value') and 'oe_active'}" t-att-data-id="item.id">
+            <span class="label"><t t-esc="item.name"/></span>
             <!-- are you mit ? -->
             <span class="arrow"><span></span></span>
         </li>
@@ -1231,9 +1231,9 @@
         <li>
             <span class="label oe_dropdown_toggle oe_dropdown_arrow">More</span>
             <ul class="oe_dropdown_menu">
-                <t t-foreach="widget.selection.folded" t-as="i">
-                    <li t-att-class="i[0] === widget.get('value') ? 'oe_active' : ''" t-att-data-id="i[0]">
-                        <span class="label"><t t-esc="i[1]"/></span>
+                <t t-foreach="widget.selection.folded" t-as="item">
+                    <li t-att-class="item.id === widget.get('value') ? 'oe_active' : ''" t-att-data-id="item.id">
+                        <span class="label"><t t-esc="item.name"/></span>
                     </li>
                 </t>
             </ul>