diff --git a/addons/project/project_view.xml b/addons/project/project_view.xml
index cd5031920fb..cae0d54bb88 100644
--- a/addons/project/project_view.xml
+++ b/addons/project/project_view.xml
@@ -179,18 +179,18 @@
                     <templates>
                         <t t-name="kanban-box">
                             <div class="project_vignettes">
-                                <li class="oe_project_kanban_vignette " t-attf-class="#{kanban_color(record.color.raw_value)}">
+                                <li t-attf-class="#{kanban_color(record.color.raw_value)} oe_project_kanban_vignette" id="oe_project_kanban_vignette">
                                     <a href="#" class="oe_project_kanban_action dropdown-toggle"><span class="i">B</span></a>
                                     <ul class="dropdown-menu">
                                       <li ><a type="edit" >Edit...</a></li>
                                       <li ><a type="delete">Delete</a></li>
                                       <li>
                                         <ul class="color-chooser">
-                                            <li><a t-att-id="record.id.value"><span class="steelblue square"></span></a></li>
-                                            <li><a id="firebrick"><span class="firebrick square"></span></a></li>
-                                            <li><a id="khaki"><span class="khaki square"></span></a></li>
-                                            <li><a id="thistle"><span class="thistle square"></span></a></li>
-                                            <li><a id="orange"><span class="orange square"></span></a></li>
+                                            <li><a t-att-id="record.id.value" class="bgcolor_steelblue"><span class="steelblue square"></span></a></li>
+                                            <li><a t-att-id="record.id.value" class="bgcolor_firebrick"><span class="firebrick square"></span></a></li>
+                                            <li><a t-att-id="record.id.value" class="bgcolor_khaki"><span class="khaki square"></span></a></li>
+                                            <li><a t-att-id="record.id.value" class="bgcolor_thistle"><span class="thistle square"></span></a></li>
+                                            <li><a t-att-id="record.id.value" class="bgcolor_orange"><span class="orange square"></span></a></li>
                                         </ul>
                                       </li>
                                     </ul>
diff --git a/addons/project/static/src/css/project.css b/addons/project/static/src/css/project.css
index e5c8aa3b6a1..106dbc05df3 100644
--- a/addons/project/static/src/css/project.css
+++ b/addons/project/static/src/css/project.css
@@ -43,7 +43,7 @@ table {
     color: #4c4c4c; }
 
 .project_vignettes > li {
-  height: 175px;
+  height: 180px;
   width: 250px;
   padding: 8px;
   margin: 4px; }
@@ -81,7 +81,7 @@ table {
 .click_button {
     display: inline-block;
     background-color: transparent;
-    min-height: 145px;
+    min-height: 155px;
     min-width: 265px;
     border: hidden;
     margin-left: -6px !important;
@@ -136,9 +136,21 @@ a.oe_project_kanban_action {
   width: 18px;
   height: 18px; }
 
-.oe_kanban_color_2 {
+.oe_kanban_color_1 {
     background: steelblue;
 }
+.oe_kanban_color_2 {
+    background: firebrick;
+}
+.oe_kanban_color_3 {
+    background: khaki;
+}
+.oe_kanban_color_4 {
+    background: thistle;
+}
+.oe_kanban_color_5 {
+    background: orange;
+}
 
 
 .steelblue {
diff --git a/addons/project/static/src/js/project.js b/addons/project/static/src/js/project.js
index bc9643c8efe..e4a5f817180 100644
--- a/addons/project/static/src/js/project.js
+++ b/addons/project/static/src/js/project.js
@@ -17,7 +17,7 @@ openerp.project = function(openerp) {
                 //set avatar title for members.
                 _.each($(this.$element).find('.project_avatar'),function(avatar){
                     var dataset = new openerp.web.DataSetSearch(this, 'res.users', self.session.context, [['id','=',avatar.id]]);
-                    dataset.read_slice([]).then(function(result){
+                    dataset.read_slice(['name']).then(function(result){
                     avatar.setAttribute("title",result[0].name)
                     });
                  });
@@ -38,16 +38,36 @@ openerp.project = function(openerp) {
                   });
                 $('#list').replaceWith(my_list);
                 
-                console.log("curreeeeeeenttttttttttt",this.$element.find('.steelblue'))
-                $('#'+ self.id).click(function(){
-                	console.log("curreeeehsfkiash")
-                    //$(this).closest('.oe_project_kanban_vignette').css('background-color', 'steelblue');
-                    $action = $(this).closest('.oe_project_kanban_vignette').addClass(self.kanban_color(2));
-                    //var data = {};
-                    //data[$action.data('name')] = $(this).data('color');
-                    self.view.dataset.write(self.id, {color:2},self.do_reload());
-
+                // set background color
+                this.$element.find('.bgcolor_steelblue').click(function(){
+                    $(this).closest('#oe_project_kanban_vignette').removeClass().addClass(self.kanban_color(1) + ' oe_project_kanban_vignette');
+                    self.view.dataset.write(parseInt(this.id), {color:1});
                 });
+                
+                this.$element.find('.bgcolor_firebrick').click(function(){
+                    $(this).closest('#oe_project_kanban_vignette').removeClass().addClass(self.kanban_color(2) + ' oe_project_kanban_vignette');
+                    self.view.dataset.write(parseInt(this.id), {color:2});
+                    
+                });
+                
+                this.$element.find('.bgcolor_khaki').click(function(){
+                    $(this).closest('#oe_project_kanban_vignette').removeClass().addClass(self.kanban_color(3) + ' oe_project_kanban_vignette');
+                    self.view.dataset.write(parseInt(this.id), {color:3});
+                    
+                });
+                
+                this.$element.find('.bgcolor_thistle').click(function(){
+                    $(this).closest('#oe_project_kanban_vignette').removeClass().addClass(self.kanban_color(4) + ' oe_project_kanban_vignette');
+                    self.view.dataset.write(parseInt(this.id), {color:4});
+                    
+                });
+                
+                this.$element.find('.bgcolor_orange').click(function(){
+                    $(this).closest('#oe_project_kanban_vignette').removeClass().addClass(self.kanban_color(5) + ' oe_project_kanban_vignette');
+                    self.view.dataset.write(parseInt(this.id), {color:5});
+                    
+                });
+                
             };
             self._super();
         }