diff --git a/addons/web/static/src/css/Makefile b/addons/web/static/src/css/Makefile
index ba88946baac..d00e278a5ed 100644
--- a/addons/web/static/src/css/Makefile
+++ b/addons/web/static/src/css/Makefile
@@ -1,5 +1,5 @@
 all: *.css
 %.css: %.sass
-	sass -t expanded --compass --unix-newlines $< $@
+	sass -t expanded --unix-newlines $< $@
 watch:
-	sass -t expanded --compass --unix-newlines --watch .:.
+	sass -t expanded --unix-newlines --watch .:.
diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 56fdb985ffe..da44e55991d 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset "utf-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -449,6 +449,51 @@
   border-style: inset;
   border-width: 1px;
 }
+.openerp .oe_kanban_status {
+  position: relative;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background-position: center center;
+  background-image: -webkit-radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+  background-image: -moz-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+  background-image: -ms-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+  background-image: radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+}
+.openerp .oe_kanban_status_green {
+  background: green;
+  background-position: center center;
+  background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44aa44 40%, #339933 100%);
+  background-image: -moz-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
+  background-image: -ms-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
+  background-image: radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
+}
+.openerp .oe_kanban_status_red {
+  background: red;
+  background-position: center center;
+  background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
+  background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
+  background-image: -ms-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
+  background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
+}
+.openerp .btn-group.kanban_state {
+  padding-top: 8px;
+  margin-right: 4px !important;
+}
+.openerp .btn-group.kanban_state .dropdown-menu {
+  min-width: 100%;
+  padding-right: 10px !important;
+}
+.openerp .btn-group.kanban_state .dropdown-menu li a, .openerp .btn-group.kanban_state .dropdown-menu li a:hover, .openerp .btn-group.kanban_state .dropdown-menu li a:focus {
+  padding-left: 5px;
+  padding-right: 0px;
+}
+.openerp .btn-group.kanban_state a {
+  color: #333333;
+}
 .openerp .oe_tag {
   border: 1px solid #afafb6;
   font-size: 11px;
@@ -777,7 +822,7 @@
   background-image: -moz-linear-gradient(top, #fc8787, maroon);
   background-image: -ms-linear-gradient(top, #fc8787, maroon);
   background-image: -o-linear-gradient(top, #fc8787, maroon);
-  background-image: linear-gradient(to bottom, #fc8787, #800000);
+  background-image: linear-gradient(to bottom, #fc8787, maroon);
 }
 .openerp .navbar .oe_topbar_anonymous_login a {
   display: block;
@@ -3378,47 +3423,3 @@ input[type="radio"], input[type="checkbox"] {
   background-color: black;
   opacity: 0.6;
 }
-.openerp .dropdown-menu.state {
-  min-width: 100%;
-  padding-right: 10px !important;
-}
-.openerp .dropdown-menu.state li a, .openerp .dropdown-menu.state li a:hover, .openerp .dropdown-menu.state li a:focus {
-  padding-left: 5px;
-  padding-right: 0px;
-}
-.openerp .btn-group.state {
-  padding-top: 8px;
-}
-.openerp .btn-group.state a {
-  color: #333333;
-}
-.openerp .status {
-  display: inline-block;
-  position: relative;
-  height: 12px;
-  width: 12px;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
-  -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
-  background-position: center center;
-  background-image: radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%);
-  background-image: -moz-radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%);
-  background-image: -webkit-radial-gradient(circle, #dddddd 0%, #aaaaaa 40%, #999999 100%);
-}
-.openerp .status.error {
-  background: #cc3333;
-  background-position: center center;
-  background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
-  background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
-  background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
-}
-.openerp .status.ok {
-  background: #44dd44;
-  background-position: center center;
-  background-image: radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%);
-  background-image: -moz-radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%);
-  background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44cc44 40%, #33bb33 100%);
-}
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index f36942070a0..260b9e22484 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -424,7 +424,33 @@ $sheet-padding: 16px
             border-style: inset
             border-width: 1px
     // }}}
-
+    // Kanban state (used in form and kanban) {{{
+    .oe_kanban_status
+        position: relative
+        display: inline-block
+        height: 12px
+        width: 12px
+        @include radius(6px)
+        @include radial-gradient((#eee 0%, #ccc 40%, #bbb 100%))
+        // +background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))
+    .oe_kanban_status_green
+        background: green
+        @include radial-gradient((#55dd55 0%, #44aa44 40%, #339933 100%))
+    .oe_kanban_status_red
+        background: red
+        @include radial-gradient((#ee7777 0%, #cc3333 40%, #bb0808 100%))
+    .btn-group.kanban_state
+        padding-top: 8px
+        margin-right: 4px !important
+        .dropdown-menu
+            min-width: 100%
+            padding-right: 10px !important
+        .dropdown-menu li a, .dropdown-menu li a:hover, .dropdown-menu li a:focus
+            padding-left: 5px
+            padding-right: 0px
+        a
+            color: #333333
+    // }}}
     // Tags (for many2many tags, among others) {{{
     .oe_tag
         border: 1px solid $tag-border
@@ -2751,45 +2777,7 @@ input[type="radio"], input[type="checkbox"]
 .blockUI.blockOverlay
     background-color: black
     opacity: 0.6000000238418579
-.openerp
-    .dropdown-menu.state
-        min-width: 100%
-        padding-right: 10px !important
-    .dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus
-        padding-left: 5px
-        padding-right: 0px
-    .btn-group.state
-        padding-top: 8px
-    .btn-group.state a
-        color: #333333
-    .status
-        display: inline-block
-        position: relative
-        height: 12px
-        width: 12px
-        -moz-border-radius: 6px
-        -webkit-border-radius: 6px
-        border-radius: 6px
-        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
-        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
-        -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
-        background-position: center center
-        background-image: radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%)
-        background-image: -moz-radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%)
-        background-image: -webkit-radial-gradient(circle, #dddddd 0%, #aaaaaa 40%, #999999 100%)
 
-    .status.error
-        background: #cc3333
-        background-position: center center
-        background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%)
-        background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%)
-        background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%)
 
-    .status.ok
-        background: #44dd44
-        background-position: center center
-        background-image: radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%)
-        background-image: -moz-radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%)
-        background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44cc44 40%, #33bb33 100%)
 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 7c7c00c1646..54c8535dc1d 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2374,29 +2374,23 @@ instance.web.form.DropdownSelection = instance.web.form.FieldChar.extend({
         var data = [];
         var selection = self.field.selection || [];
         _.map(selection, function(res) {
-            var state_class;
-            if (res[0] == 'normal')
-                state_class = 'status'
-            else if(res[0] == 'done')
-                state_class = 'status ok'
-            else
-                state_class = 'status error'
-            value = {
+            var value = {
                 'name': res[0],
                 'tooltip': res[1],
                 'state_name': res[1],
-                'state_class': state_class
             }
-            data.push(value)
+            if (res[0] == 'normal') { value['state_class'] = 'oe_kanban_status'; }
+            else if (res[0] == 'done') { value['state_class'] = 'oe_kanban_status oe_kanban_status_green'; }
+            else { value['state_class'] = 'oe_kanban_status oe_kanban_status_red'; }
+            data.push(value);
         });
         return data;
     },
     render_value: function() {
         var self = this;
-        var data = {'widget': self }
-        self.record_id = self.view.datarecord.id;
-        data['states'] = self.prepare_dropdown_selection();
-        this.$el.html(QWeb.render("DropdownSelection", data));
+        this.record_id = self.view.datarecord.id;
+        this.states = self.prepare_dropdown_selection();;
+        this.$el.html(QWeb.render("DropdownSelection", {'widget': self}));
         this.$el.find('.oe_legend').click(self.do_action.bind(self));
     },
     do_action: function(e) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 281b8db4c2a..b91f7ea2c99 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1029,26 +1029,29 @@
         </t>
     </span>
 </t>
-
 <t t-name="DropdownSelection">
-    <span class="btn-group state">
-        <t t-foreach="states" t-as="rec">
-            <a>
+    <div class="btn-group kanban_state">
+        <t t-foreach="widget.states" t-as="rec">
+            <a t-if="widget.get('value') === rec.name">
                 <a class="oe_legend dropdown-toggle" data-toggle="dropdown">
-                <span t-att-class="rec.state_class" t-if="widget.get('value') === rec.name" t-att-title="rec.tooltip" ></span>
-                <span class="sr-only">Toggle Dropdown</span></a>
+                    <!-- <img height="16" width="16" t-att-src="'/web/static/src/img/icons/' + rec.icon_name"/> -->
+                    <span t-att-class="rec.state_class" t-if="widget.get('value') === rec.name" t-att-title="rec.tooltip"/>
+                    <span class="sr-only">Toggle Dropdown</span>
+                </a>
             </a>
         </t>
         <ul class="dropdown-menu state" role="menu">
-            <t t-foreach="states" t-as="rec">
+            <t t-foreach="widget.states" t-as="rec">
                 <t t-if="widget.get('value') !== rec.name">
                     <li class="oe_legend" t-att-data-value="rec.name" ><a href="#">
-                        <span t-att-class="rec.state_class"/> <t t-raw="rec.state_name" /></a>
+                        <span t-att-class="rec.state_class" t-att-title="rec.tooltip"/>
+                        <!-- <img height="16" width="16" t-att-src="'/web/static/src/img/icons/' + rec.icon_name"/> -->
+                        <t t-raw="rec.state_name" /></a>
                     </li>
                 </t>
             </t>
         </ul>
-    </span>
+    </div>
 </t>
 <t t-name="Priority">
     <ul style="list-style: none; padding-left: 2px;">
diff --git a/addons/web_kanban/static/src/css/kanban.css b/addons/web_kanban/static/src/css/kanban.css
index db43cc00586..ce77c543579 100644
--- a/addons/web_kanban/static/src/css/kanban.css
+++ b/addons/web_kanban/static/src/css/kanban.css
@@ -9,8 +9,6 @@
 .openerp .oe_kanban_view .oe_view_nocontent {
   position: relative;
   max-width: none;
-  z-index: 1;
-  width: 100%;
   height: 100%;
 }
 .openerp .oe_kanban_view .oe_view_nocontent .oe_view_nocontent_content {
@@ -165,9 +163,6 @@
 .openerp .oe_kanban_view .oe_kanban_column, .openerp .oe_kanban_view .oe_kanban_column_cards {
   height: 100%;
 }
-.openerp .oe_kanban_view .oe_kanban_column, .openerp .oe_kanban_view .oe_kanban_column_cards {
-  height: 100%;
-}
 .openerp .oe_kanban_view .oe_kanban_aggregates {
   padding: 0;
   margin: 0px;
@@ -522,37 +517,6 @@
   position: relative;
   top: 2px;
 }
-.openerp .oe_kanban_view .oe_kanban_status {
-  position: relative;
-  top: 4px;
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  background-position: center center;
-  background-image: -webkit-radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: -moz-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: -ms-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-}
-.openerp .oe_kanban_view .oe_kanban_status_green {
-  background: green;
-  background-position: center center;
-  background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44aa44 40%, #339933 100%);
-  background-image: -moz-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
-  background-image: -ms-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
-  background-image: radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
-}
-.openerp .oe_kanban_view .oe_kanban_status_red {
-  background: red;
-  background-position: center center;
-  background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
-  background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
-  background-image: -ms-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
-  background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
-}
 .openerp .oe_kanban_view .oe_kanban_text_red {
   color: #a61300;
   font-weight: bold;
diff --git a/addons/web_kanban/static/src/css/kanban.sass b/addons/web_kanban/static/src/css/kanban.sass
index 77533c1182e..0b70b056f27 100644
--- a/addons/web_kanban/static/src/css/kanban.sass
+++ b/addons/web_kanban/static/src/css/kanban.sass
@@ -454,20 +454,6 @@
         position: relative
         top: 2px
 
-    .oe_kanban_status
-        position: relative
-        top: 4px
-        display: inline-block
-        height: 12px
-        width: 12px
-        @include radius(6px)
-        @include radial-gradient((#eee 0%, #ccc 40%, #bbb 100%))
-    .oe_kanban_status_green
-        background: green
-        @include radial-gradient((#55dd55 0%, #44aa44 40%, #339933 100%))
-    .oe_kanban_status_red
-        background: red
-        @include radial-gradient((#ee7777 0%, #cc3333 40%, #bb0808 100%))
     .oe_kanban_text_red
         color: #A61300
         font-weight: bold
diff --git a/addons/web_kanban/static/src/js/kanban.js b/addons/web_kanban/static/src/js/kanban.js
index c0c16bc9a0f..3c122318ebd 100644
--- a/addons/web_kanban/static/src/js/kanban.js
+++ b/addons/web_kanban/static/src/js/kanban.js
@@ -1318,33 +1318,25 @@ instance.web_kanban.DropdownSelection = instance.web_kanban.AbstractField.extend
         this.parent = parent;
     },
     prepare_dropdown_selection: function() {
-        var self = this;
         var data = [];
-        var selection = self.field.selection || [];
-        _.map(selection, function(res) {
-            var state_class;
-            if (res[0] == 'normal')
-                state_class = 'status'
-            else if(res[0] == 'done')
-                state_class = 'status ok'
-            else
-                state_class = 'status error'
-            value = {
+        _.map(this.field.selection || [], function(res) {
+            var value = {
                 'name': res[0],
                 'tooltip': res[1],
                 'state_name': res[1],
-                'state_class': state_class
             }
-            data.push(value)
+            if (res[0] == 'normal') { value['state_class'] = 'oe_kanban_status'; }
+            else if (res[0] == 'done') { value['state_class'] = 'oe_kanban_status oe_kanban_status_green'; }
+            else { value['state_class'] = 'oe_kanban_status oe_kanban_status_red'; }
+            data.push(value);
         });
         return data;
     },
     renderElement: function() {
         var self = this;
-        self.record_id = self.parent.id;
-        var data = {'widget': self }
-        data['states'] = self.prepare_dropdown_selection();
-        this.$el = $(QWeb.render("DropdownSelection", data));
+        this.record_id = self.parent.id;
+        this.states = self.prepare_dropdown_selection();;
+        this.$el = $(QWeb.render("DropdownSelection", {'widget': self}));
         this.$el.find('.oe_legend').click(self.do_action.bind(self));
     },
     do_action: function(e) {