diff --git a/kfet/static/kfet/js/history.js b/kfet/static/kfet/js/history.js
index 607b8147..a0394b8a 100644
--- a/kfet/static/kfet/js/history.js
+++ b/kfet/static/kfet/js/history.js
@@ -107,28 +107,54 @@ class History {
         });
     }
 
-    this.findOpe = function(id, type='ope') {
-        return this.$container.find('.ope').filter(function() {
-            return ($(this).data('id') == id && $(this).data('type') == type)
-        });
+    add_node(data) {
+        var node = this.list.get_or_create(data, 0);
+        this.list.add_to_container(this._$container, node, this.templates, this.display_options);
     }
 
-    this.cancelOpeGroup = function(opegroup) {
-        var $opegroup = this.findOpeGroup(opegroup['id']);
-        var trigramme = $opegroup.find('.trigramme').text();
-        var amount = amountDisplay(
-                parseFloat(opegroup['amount'], opegroup['is_cof'], trigramme));
-        $opegroup.find('.amount').text(amount);
+    update_node(type, id, update_data) {
+        var to_update = this.list.find(type, id);
+        if (!to_update) 
+            return false;
+
+        $.extend(to_update.content, update_data);
+        var $new_elt = to_update.content.display($(this.templates[type]), this.display_options);
+
+        var $to_replace = this._$container.find('#'+type+'-'+id+'>:first-child');
+        $to_replace.replaceWith($new_elt);
+
+        return true;
     }
 
-}
+    update_data(data) {
+        //Filter opegroups before ?
+        var opegroups = data['opegroups'];
+        var opes = data['opes'];
 
-KHistory.default_options = {
-    container: '#history',
-    template_day: '<div class="day"></div>',
-    template_opegroup: '<div class="opegroup"><span class="time"></span><span class="trigramme"></span><span class="amount"></span><span class="valid_by"></span><span class="comment"></span></div>',
-    template_transfergroup: '<div class="opegroup"><span class="time"></span><span class="infos"></span><span class="valid_by"></span><span class="comment"></span></div>',
-    template_ope: '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span><span class="addcost"></span><span class="canceled"></span></div>',
-    template_transfer: '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="glyphicon glyphicon-arrow-right"></span><span class="infos2"></span><span class="canceled"></span></div>',
-    display_trigramme: true,
+        for (let ope of opes) {
+            if (ope['cancellation']) {
+                var update_data = {
+                    'canceled_at': ope.canceled_at,
+                    'canceled_by': ope.canceled_by,
+                };
+                if (ope.type === 'ope') {
+                    this.update_node('purchase', ope.id, update_data)
+                    || this.update_node('specialope', ope.id, update_data);
+                } else if (ope.type === 'transfer') {
+                    this.update_node('transfer', ope.id, update_data);
+                }
+            }
+        }
+
+        for (let opegroup of opegroups) {
+            if (opegroup['cancellation']) {
+                var update_data = { 'amount': opegroup.amount };
+                this.update_node('opegroup', opegroup.id, update_data);
+            }
+
+            if (opegroup['add']) {
+                this.add_node(opegroup);            
+            }
+        }
+    }
 }
diff --git a/kfet/static/kfet/js/kfet.api.js b/kfet/static/kfet/js/kfet.api.js
index c90d864d..8db9b0fe 100644
--- a/kfet/static/kfet/js/kfet.api.js
+++ b/kfet/static/kfet/js/kfet.api.js
@@ -654,11 +654,12 @@ class OperationGroup extends HistoryGroup {
 
     /**
      * Properties associated with an opegroup.
-     * @default <tt>{@link Models.HistoryGroup.props|HistoryGroup.props} + ['is_cof', 'trigramme']</tt>
+     * @default <tt>{@link Models.HistoryGroup.props|HistoryGroup.props} + 
+     * ['amount', 'is_cof', 'trigramme']</tt>
      * @see {@link Models.ModelObject.props|ModelObject.props}
      */
     static get props() {
-        return HistoryGroup.props.concat(['is_cof', 'trigramme']);
+        return HistoryGroup.props.concat(['amount', 'is_cof', 'trigramme']);
     }
 
     /**
@@ -984,19 +985,29 @@ class ModelForest {
         return $container;
     }
 
+    /**
+     * Renders node and adds it to given container.<br>
+     * Assumes that the inserted node is the 'youngest'.
+     * @param {jQuery} $container
+     * @param {Models.TreeNode} node
+     * @param {Object} templates Templates to render each model
+     * @param {Object} [options] Options for element render method
+     */
     add_to_container($container, node, templates, options) {
         var existing = node.parent ;
         var first_missing = node;
 
-        while (existing && !($container.find('#'+existing.type+'-'+existing.id))) {
+        while (existing && !($container.find('#'+existing.type+'-'+existing.content.id).length)) {
             first_missing = existing ;
             existing = existing.parent;
         }
 
-        var $to_insert = render_element(first_missing, templates, options);
-        var $insert_in = existing ? $container.find('#'+existing.type+'-'+existing.id)
-                                  : $container ;
-        $insert_in.prepend($to_insert);
+        var $to_insert = this.render_element(first_missing, templates, options);
+        if (existing) {
+            $container.find('#'+existing.type+'-'+existing.content.id+'>:first-child').after($to_insert);
+        } else {
+            $container.prepend($to_insert);
+        }
     }
 
     /**
@@ -1019,7 +1030,7 @@ class ModelForest {
             callback(node) ;
 
             for (let child of node.children)
-                callback(child);
+                recurse(child);
         }
 
         for (let root of this.roots)
@@ -1586,7 +1597,7 @@ class OperationFormatter extends Formatter {
      */
     static prop_canceled(a) {
         if (a.canceled_at) {
-            cancel = 'Annulé';
+            var cancel = 'Annulé';
             if (a.canceled_by) 
                 cancel += ' par '+a.canceled_by;
 
diff --git a/kfet/views.py b/kfet/views.py
index 09755bbf..27de08f8 100644
--- a/kfet/views.py
+++ b/kfet/views.py
@@ -1053,29 +1053,57 @@ def kpsul_perform_operations(request):
     websocket_data['opegroups'] = [{
         'add': True,
         'type': 'opegroup',
-        'id': operationgroup.pk,
-        'amount': operationgroup.amount,
-        'checkout__name': operationgroup.checkout.name,
-        'at': operationgroup.at,
-        'is_cof': operationgroup.is_cof,
-        'comment': operationgroup.comment,
-        'valid_by__trigramme': ( operationgroup.valid_by and
-            operationgroup.valid_by.trigramme or None),
-        'on_acc__trigramme': operationgroup.on_acc.trigramme,
-        'opes': [],
+        'content': {
+            'id': operationgroup.pk,
+            'amount': operationgroup.amount,
+            'at': operationgroup.at,
+            'is_cof': operationgroup.is_cof,
+            'comment': operationgroup.comment,
+            'valid_by': (operationgroup.valid_by and
+                operationgroup.valid_by.trigramme or None),
+            'trigramme': operationgroup.on_acc.trigramme,
+        },
+        'parent': {
+            'type': 'day',
+            'content': {
+                'id': operationgroup.at.strftime('%Y%m%d'),
+                'date': operationgroup.at
+            },
+            'child_sort': 'opegroup',
+        },
+        'children': [],
     }]
-    for operation in operations:
+    for ope in operations:
         ope_data = {
-            'id': operation.pk, 'type': operation.type, 'amount': operation.amount,
-            'addcost_amount': operation.addcost_amount,
-            'addcost_for__trigramme': is_addcost and addcost_for.trigramme or None,
-            'is_checkout': operation.is_checkout,
-            'article__name': operation.article and operation.article.name or None,
-            'article_nb': operation.article_nb,
-            'group_id': operationgroup.pk,
-            'canceled_by__trigramme': None, 'canceled_at': None,
+            'content': {
+                'id': ope.id,
+                'amount': ope.amount,
+                'canceled_at': ope.canceled_at,
+                'canceled_by':
+                    ope.canceled_by and ope.canceled_by.trigramme or None,
+                'is_cof': operationgroup.is_cof,
+                'trigramme': (
+                    operationgroup.on_acc and
+                    operationgroup.on_acc.trigramme or None),
+            },
         }
-        websocket_data['opegroups'][0]['opes'].append(ope_data)
+
+        if ope.type == Operation.PURCHASE:
+            ope_data['type'] = 'purchase'
+            ope_data['content'].update({
+                'article_name': ope.article.name,
+                'article_nb': ope.article_nb,
+                'addcost_amount': ope.addcost_amount,
+                'addcost_for':
+                ope.addcost_for and ope.addcost_for.trigramme or None,
+            })
+        else:
+            ope_data['type'] = 'specialope'
+            ope_data['content'].update({
+                'type': ope.type,
+                'is_checkout': ope.is_checkout,
+            })
+        websocket_data['opegroups'][0]['children'].append(ope_data)
     # Need refresh from db cause we used update on queryset
     operationgroup.checkout.refresh_from_db()
     websocket_data['checkouts'] = [{
@@ -1103,12 +1131,13 @@ def kpsul_cancel_operations(request):
     # Checking if BAD REQUEST (opes_pk not int or not existing)
     try:
         # Set pour virer les doublons
-        opes_post = set(map(lambda s: int(s.split()[1]),
-                            filter(lambda s: s.split()[0] == 'ope',
+        opes_post = set(map(lambda s: int(s.split('-')[1]),
+                            filter(lambda s: s.split('-')[0] == 'purchase'
+                                   or s.split('-')[0] == 'specialope',
                                    request.POST.getlist('operations[]', []))))
         transfers_post = \
-            set(map(lambda s: int(s.split()[1]),
-                    filter(lambda s: s.split()[0] == 'transfer',
+            set(map(lambda s: int(s.split('-')[1]),
+                    filter(lambda s: s.split('-')[0] == 'transfer',
                            request.POST.getlist('operations[]', []))))
     except ValueError:
         return JsonResponse(data, status=400)
@@ -1284,13 +1313,13 @@ def kpsul_cancel_operations(request):
             'amount': opegroup['amount'],
             'is_cof': opegroup['is_cof'],
         })
-    canceled_by__trigramme = canceled_by and canceled_by.trigramme or None
+    canceled_by = canceled_by and canceled_by.trigramme or None
     for ope in opes:
         websocket_data['opes'].append({
             'cancellation': True,
             'type': 'ope',
             'id': ope,
-            'canceled_by__trigramme': canceled_by__trigramme,
+            'canceled_by': canceled_by,
             'canceled_at': canceled_at,
         })
     for ope in transfers:
@@ -1298,7 +1327,7 @@ def kpsul_cancel_operations(request):
             'cancellation': True,
             'type': 'transfer',
             'id': ope,
-            'canceled_by__trigramme': canceled_by__trigramme,
+            'canceled_by': canceled_by,
             'canceled_at': canceled_at,
         })