diff --git a/kfet/static/kfet/js/history.js b/kfet/static/kfet/js/history.js
index 008eb8d1..607b8147 100644
--- a/kfet/static/kfet/js/history.js
+++ b/kfet/static/kfet/js/history.js
@@ -16,171 +16,94 @@ class History {
         this.api_options = {
             'from': moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss'),
         };
-    }
-}
 
+        this.display_options = {} ;
 
-function KHistory(options={}) {
-    $.extend(this, KHistory.default_options, options);
-
-    this.$container = $(this.container);
-
-    this.reset = function() {
-        this.$container.html('');
-    };
-
-    this.addOpeGroup = function(opegroup) {
-        var $day = this._getOrCreateDay(opegroup['at']);
-        var $opegroup = this._opeGroupHtml(opegroup);
-
-        $day.after($opegroup);
-
-        var trigramme = opegroup['on_acc_trigramme'];
-        var is_cof    = opegroup['is_cof'];
-        var type      = opegroup['type']
-        switch (type) {
-            case 'opegroup':
-                for (var i=0; i<opegroup['opes'].length; i++) {
-                    var $ope = this._opeHtml(opegroup['opes'][i], is_cof, trigramme);
-                    $ope.data('opegroup', opegroup['id']);
-                    $opegroup.after($ope);
-                }
-                break;
-            case 'transfergroup':
-                for (var i=0; i<opegroup['opes'].length; i++) {
-                    var $transfer = this._transferHtml(opegroup['opes'][i]);
-                    $transfer.data('transfergroup', opegroup['id']);
-                    $opegroup.after($transfer);
-                }
-                break;
-        }
+        this._init_selection();
+        this._init_events();
     }
 
-    this._opeHtml = function(ope, is_cof, trigramme) {
-        var $ope_html = $(this.template_ope);
-        var parsed_amount = parseFloat(ope['amount']);
-        var amount = amountDisplay(parsed_amount, is_cof, trigramme);
-        var infos1 = '', infos2 = '';
-
-        if (ope['type'] == 'purchase') {
-            infos1 = ope['article_nb'];
-            infos2 = ope['article__name'];
-        } else if (ope['type'] == 'initial') {
-            infos1 = parsed_amount.toFixed(2)+'€';
-            infos2 = 'Initial';
-        } else {
-            infos1 = parsed_amount.toFixed(2)+'€';
-            infos2 = (ope['type'] == 'deposit') ? 'Charge' : 'Retrait';
-            infos2 = ope['is_checkout'] ? infos2 : 'Édition';
-        }
-
-        $ope_html
-            .data('type', 'ope')
-            .data('id', ope['id'])
-            .find('.amount').text(amount).end()
-            .find('.infos1').text(infos1).end()
-            .find('.infos2').text(infos2).end();
-
-        var addcost_for = ope['addcost_for__trigramme'];
-        if (addcost_for) {
-            var addcost_amount = parseFloat(ope['addcost_amount']);
-            $ope_html.find('.addcost').text('('+amountDisplay(addcost_amount, is_cof)+' UKF pour '+addcost_for+')');
-        }
-
-        if (ope['canceled_at'])
-            this.cancelOpe(ope, $ope_html);
-
-        return $ope_html;
+    display() {
+        this.list.display(this._$container, this.templates, this.display_options);
     }
 
-    this._transferHtml = function(transfer) {
-        var $transfer_html = $(this.template_transfer);
-        var parsed_amount = parseFloat(transfer['amount']);
-        var amount = parsed_amount.toFixed(2) + '€';
-
-        $transfer_html
-            .data('type', 'transfer')
-            .data('id', transfer['id'])
-            .find('.amount').text(amount).end()
-            .find('.infos1').text(transfer['from_acc']).end()
-            .find('.infos2').text(transfer['to_acc']).end();
-
-        if (transfer['canceled_at'])
-            this.cancelOpe(transfer, $transfer_html);
-
-        return $transfer_html ;
-            
+    reset() {
+        this._$container.html('');
+        this.list.clear();
+        this.list.fromAPI(this.api_options, this.display.bind(this), $.noop);
     }
 
-    this.cancelOpe = function(ope, $ope = null) {
-        if (!$ope)
-            $ope = this.findOpe(ope['id'], ope['type']);
-
-        var cancel = 'Annulé';
-        var canceled_at = dateUTCToParis(ope['canceled_at']);
-        if (ope['canceled_by__trigramme'])
-            cancel += ' par '+ope['canceled_by__trigramme'];
-        cancel += ' le '+canceled_at.format('DD/MM/YY à HH:mm:ss');
-
-        $ope.addClass('canceled').find('.canceled').text(cancel);
-    }
-
-    this._opeGroupHtml = function(opegroup) {
-
-        var type = opegroup['type'];
-
-        
-        switch (type) {
-            case 'opegroup':
-                var $opegroup_html = $(this.template_opegroup);
-                var trigramme = opegroup['on_acc__trigramme'];
-                var amount    = amountDisplay(
-                        parseFloat(opegroup['amount']), opegroup['is_cof'], trigramme);
-                break;
-            case 'transfergroup':
-                var $opegroup_html = $(this.template_transfergroup);
-                $opegroup_html.find('.infos').text('Transferts').end()
-                var trigramme = '';
-                var amount = '' ;
-                break;
-        }
-
-        var at        = dateUTCToParis(opegroup['at']).format('HH:mm:ss');
-        var comment = opegroup['comment'] || '';
-
-        $opegroup_html
-            .data('type',  type)
-            .data('id', opegroup['id'])
-            .find('.time').text(at).end()
-            .find('.trigramme').text(trigramme).end()
-            .find('.amount').text(amount).end()
-            .find('.comment').text(comment).end();
-
-        if (!this.display_trigramme)
-            $opegroup_html.find('.trigramme').remove();
-            $opegroup_html.find('.info').remove();
-
-        if (opegroup['valid_by__trigramme'])
-            $opegroup_html.find('.valid_by').text('Par '+opegroup['valid_by__trigramme']);
-
-        return $opegroup_html;
-    }
-
-    this._getOrCreateDay = function(date) {
-        var at = dateUTCToParis(date);
-        var at_ser = at.format('YYYY-MM-DD');
-        var $day = this.$container.find('.day').filter(function() {
-            return $(this).data('date') == at_ser
+    _init_selection() {
+        this._$container.selectable({
+            filter: 'div.opegroup, div.ope',
+            selected: function(e, ui) {
+                $(ui.selected).each(function() {
+                    if ($(this).hasClass('opegroup')) {
+                        $(this).parent().find('.ope').addClass('ui-selected');
+                    }
+                });
+            },
+            unselected: function(e, ui) {
+                $(ui.unselected).each(function() {
+                    if ($(this).hasClass('opegroup')) {
+                        $(this).parent().find('.ope').removeClass('ui-selected');
+                    }
+                });
+            },
         });
-        if ($day.length == 1)
-            return $day;
-        var $day = $(this.template_day).prependTo(this.$container);
-        return $day.data('date', at_ser).text(at.format('D MMMM'));
     }
 
-    this.findOpeGroup = function(id) {
-        return this.$container.find('.opegroup').filter(function() {
-            return $(this).data('opegroup') == id
+    _init_events() {
+        var that = this;
+        $(document).on('keydown', function(e) {
+            if (e.keyCode == 46) {
+                //DEL key ; we delete the selected operations (if any)
+                var to_cancel = [];
+                that._$container.find('.ope.ui-selected').each(function() {
+                    to_cancel.push($(this).parent().attr('id')) ;
+                });
+                if (to_cancel.length > 0)
+                    that.cancel_operations(to_cancel);
+            }
+        });
+    }
+
+    //TODO: permission management in another class ?
+    cancel_operations(to_cancel, password='') {
+        if (kpsul.lock == 1)
+            return false;
+        kpsul.lock = 1;
+
+        var data = { 'operations': to_cancel };
+
+        $.ajax({
+            dataType: "json",
+            url     : Urls['kfet.kpsul.cancel_operations'](),
+            method  : "POST",
+            data    : data,
+            beforeSend: function ($xhr) {
+                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
+                if (password != '')
+                    $xhr.setRequestHeader("KFetPassword", password);
+            },
+        })
+        .done(function(data) {
+            kpsul._env.coolReset();
+            kpsul.lock = 0;
+        })
+        .fail(function($xhr) {
+            var data = $xhr.responseJSON;
+            switch ($xhr.status) {
+                case 403:
+                    requestAuth(data, function(password) {
+                        cancelOperations(to_cancel, password);
+                    }, kpsul.account_manager._$input_trigramme);
+                    break;
+                case 400:
+                    displayErrors(getErrorsHtml(data));
+                    break;
+            }
+            kpsul.lock = 0;
         });
     }