diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index d24657de195..dfd0a5abeac 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -78,7 +78,7 @@
   background: white;
   /* http://www.quirksmode.org/dom/inputfile.html
    * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
-   */ */
+   */
 }
 .openerp :-moz-placeholder {
   color: #afafb6 !important;
@@ -562,10 +562,6 @@
 .openerp .oe_webclient .oe_star_on {
   color: gold;
 }
-.openerp .oe_bounce {
-  -moz-animation: bounce 0.4s linear;
-  -webkit-animation: bounce 0.4s linear;
-}
 .openerp .oe_tag {
   border-radius: 2px;
   -webkit-box-sizing: border-box;
@@ -1998,6 +1994,105 @@
   font-weight: bold;
   color: #b33630;
 }
+.openerp ul.oe_form_steps_clickable {
+  height: 30px;
+  margin: 0;
+  padding: 0;
+  text-shadow: 0 1px 1px #cacaca;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+.openerp ul.oe_form_steps_clickable li {
+  border-right: none;
+  padding: 0 0 0 12px;
+  position: relative;
+  float: left;
+  vertical-align: top;
+  height: 30px;
+  color: white;
+}
+.openerp ul.oe_form_steps_clickable li:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid #807fb4;
+  position: absolute;
+  top: 50%;
+  margin-top: -21px;
+  left: 100%;
+  z-index: 2;
+}
+.openerp ul.oe_form_steps_clickable li:hover:after {
+  border-left: 5px solid #807fb4;
+}
+.openerp ul.oe_form_steps_clickable li:before {
+  content: " ";
+  width: 0;
+  height: 0;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid white;
+  position: absolute;
+  top: 50%;
+  margin-top: -21px;
+  margin-left: 2px;
+  left: 100%;
+  z-index: 2;
+}
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_active {
+  font-weight: bold;
+  text-shadow: 0 1px 1px #999999;
+  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
+  background-color: #dc5f59;
+  background: -webkit-linear-gradient(top, #dc5f59, #b33630);
+  color: white;
+}
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive {
+  cursor: pointer;
+  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
+  background-color: #adadcf;
+  background: -webkit-linear-gradient(top, #adadcf, #7c7ba7);
+}
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive div {
+  padding: 0 30px 0 0;
+}
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive:hover {
+  background: -webkit-linear-gradient(top, #7c7ba7, #adadcf);
+}
+.openerp ul.oe_form_steps_clickable li div {
+  padding: 0 30px 0 0;
+}
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:after {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid #b33630;
+  position: absolute;
+  top: 50%;
+  margin-top: -21px;
+  left: 100%;
+  z-index: 2;
+}
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:before {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid white;
+  position: absolute;
+  top: 50%;
+  margin-top: -21px;
+  margin-left: 2px;
+  left: 100%;
+  z-index: 2;
+}
 .openerp .oe_form .oe_subtotal_footer {
   width: 1% !important;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 4963369ecbb..2570feec552 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1531,6 +1531,93 @@ $sheet-max-width: 860px
         .oe_form_steps_active
             font-weight: bold
             color: #b33630
+    ul.oe_form_steps_clickable
+        height: 30px
+        margin: 0
+        padding: 0
+        text-shadow: 0 1px 1px #cacaca
+        box-shadow: 0 0 1px rgba(0,0,0,0.5)
+        overflow: hidden
+        li
+            border-right: none
+            padding: 0 0 0 12px
+            position: relative
+            float: left
+            vertical-align: top
+            height: 30px
+            color: white
+            &:after
+                content: " "
+                width: 0
+                height: 0
+                border-top: 21px solid transparent
+                border-bottom: 21px solid transparent
+                border-left: 5px solid #807fb4
+                position: absolute
+                top: 50%
+                margin-top: -21px
+                left: 100%
+                z-index: 2
+            &:hover:after
+                border-left: 5px solid #807fb4
+            &:before
+                content: " "
+                width: 0
+                height: 0
+                border-top: 21px solid transparent
+                border-bottom: 21px solid transparent
+                border-left: 5px solid white
+                position: absolute
+                top: 50%
+                margin-top: -21px
+                margin-left: 2px
+                left: 100%
+                z-index: 2
+            &.oe_form_steps_active
+                font-weight: bold
+                text-shadow: 0 1px 1px #999999
+                box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)
+                background-color: #dc5f59
+                background: -webkit-linear-gradient(top, #dc5f59, #b33630)
+                color: white
+            &.oe_form_steps_inactive
+                cursor: pointer
+                box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)
+                background-color: #adadcf
+                background: -webkit-linear-gradient(top, #adadcf, #7c7ba7)
+                div
+                    padding: 0 30px 0 0
+            &.oe_form_steps_inactive:hover
+                background: -webkit-linear-gradient(top, #7c7ba7, #adadcf)
+            div
+                padding: 0 30px 0 0            
+            &.oe_form_steps_active:after
+                content: " "
+                display: block
+                width: 0
+                height: 0
+                border-top: 21px solid transparent
+                border-bottom: 21px solid transparent
+                border-left: 5px solid #b33630
+                position: absolute
+                top: 50%
+                margin-top: -21px
+                left: 100%
+                z-index: 2
+            &.oe_form_steps_active:before
+                content: " "
+                display: block
+                width: 0
+                height: 0
+                border-top: 21px solid transparent
+                border-bottom: 21px solid transparent
+                border-left: 5px solid white
+                position: absolute
+                top: 50%
+                margin-top: -21px
+                margin-left: 2px
+                left: 100%
+                z-index: 2
     .oe_form .oe_subtotal_footer
         width: 1% !important
         td.oe_form_group_cell
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 2a328a2e74b..a73595273b9 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -638,8 +638,9 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
      */
     _actualize_mode: function(switch_to) {
         var mode = switch_to || this.get("actual_mode");
-        if (! this.datarecord.id)
+        if (! this.datarecord.id) {
             mode = "create";
+        }
         this.set({actual_mode: mode});
     },
     check_actual_mode: function(source, options) {
@@ -681,8 +682,9 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
     },
     on_button_save: function() {
         var self = this;
-        return this.do_save().then(function(result) {
+        return this.do_save().then(function(result) {            
             self.to_view_mode();
+            self.fields.stage_id.render_list();
         });
     },
     on_button_cancel: function(event) {
@@ -706,6 +708,7 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
         });
     },
     on_button_edit: function() {
+        this.fields.stage_id.render_list();
         return this.to_edit_mode();
     },
     on_button_create: function() {
@@ -789,16 +792,16 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
                 self.set({'display_invalid_fields': false});
                 var save_deferral;
                 if (!self.datarecord.id) {
-                    //console.log("FormView(", self, ") : About to create", values);
+                    // console.log("FormView(", self, ") : About to create", values);
                     save_deferral = self.dataset.create(values).pipe(function(r) {
                         return self.on_created(r, undefined, prepend_on_create);
                     }, null);
                 } else if (_.isEmpty(values) && ! self.force_dirty) {
-                    //console.log("FormView(", self, ") : Nothing to save");
+                    // console.log("FormView(", self, ") : Nothing to save");
                     save_deferral = $.Deferred().resolve({}).promise();
                 } else {
                     self.force_dirty = false;
-                    //console.log("FormView(", self, ") : About to save", values);
+                    // console.log("FormView(", self, ") : About to save", values);
                     save_deferral = self.dataset.write(self.datarecord.id, values, {}).pipe(function(r) {
                         return self.on_saved(r);
                     }, null);
@@ -4638,9 +4641,11 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
 
 instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
     template: "FieldStatus",
+    clickable: false,
     start: function() {
         this._super();
         this.selected_value = null;
+        this.clickable = !!this.node.attrs.clickable;
         if (this.$element.parent().is('header')) {
             this.$element.after('<div class="oe_clear"/>');
         }
@@ -4745,14 +4750,32 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
      *  state (given by the key of (key, label)).
      */
     render_elements: function () {
+        var self = this;
         var content = instance.web.qweb.render("FieldStatus.content", {widget: this, _:_});
         this.$element.html(content);
-
+        if (this.clickable) {
+            this.$element.addClass("oe_form_steps_clickable");
+            $('.oe_form_steps_arrow').remove();
+            var elemts = this.$element.find('.oe_form_steps_button');
+            _.each(elemts, function(element){
+                $item = $(element);
+                if ($item.attr("data-id") != self.selected_value) {
+                    $item.click(function(event){
+                        var data_id = parseInt($(this).attr("data-id"))
+                        self.view.dataset.call('stage_set', [[self.view.datarecord.id],data_id]).then(function() {
+                            return self.view.reload();
+                        });
+                    });
+                }
+            });
+        } else {
+            this.$element.addClass("oe_form_steps");
+        }
         var colors = JSON.parse((this.node.attrs || {}).statusbar_colors || "{}");
         var color = colors[this.selected_value];
-        if (color) {
+        if (color) {            
             var elem = this.$element.find("li.oe_form_steps_active span");
-            elem.css("color", color);
+            elem.css("color", color);            
         }
     },
 });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index d16c34a6c5f..e338a9fefcf 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1036,14 +1036,19 @@
     </span>
 </t>
 <t t-name="FieldStatus">
-    <ul class="oe_form_steps" t-att-style="widget.node.attrs.style"/>
+    <ul class="" t-att-style="widget.node.attrs.style"/>
 </t>
 <t t-name="FieldStatus.content">
     <t t-set="size" t-value="widget.to_show.length"/>
     <t t-foreach="_.range(size)" t-as="i">
-        <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_form_steps_active' : ''">
-            <span><t t-esc="widget.to_show[i][1]"/></span>
-            <img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/>
+        <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_form_steps_active' : 'oe_form_steps_inactive'">
+            <div class="oe_form_steps_button" t-att-data-id="widget.to_show[i][0]">
+                <t t-esc="widget.to_show[i][1]"/>
+                <span class="oe_form_steps_arrow">
+                    <span></span>
+                </span>
+                <img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/>
+            </div>            
         </li>
     </t>
 </t>