diff --git a/bower.json b/bower.json
index e12c310c..10438b50 100644
--- a/bower.json
+++ b/bower.json
@@ -6,6 +6,7 @@
         "angular-mocks": "latest",
         "angular-resource": "latest",
         "angular-route": "latest",
+        "angular-animate": "1.3",
         "angular-sanitize": "latest",
         "angular-ui-router": "latest",
         "angular-ui-select": "*",
diff --git a/gulpfile.js b/gulpfile.js
index 67ed635b..fffcbcf1 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -27,6 +27,7 @@ var vendorJsFiles = [
   'static/bower_components/angular-route/angular-route.min.js',
   'static/bower_components/angular-sanitize/angular-sanitize.min.js',
   'static/bower_components/angular-cookies/angular-cookies.min.js',
+  'static/bower_components/angular-animate/angular-animate.min.js',
   'static/bower_components/angular-ui-router/release/angular-ui-router.min.js',
   'static/bower_components/angular-ui-select/dist/select.js',
   'static/bower_components/underscore/underscore-min.js',
diff --git a/search/static/search/style.css b/search/static/search/style.css
index 7bf0849a..8e4c13ac 100644
--- a/search/static/search/style.css
+++ b/search/static/search/style.css
@@ -27,4 +27,67 @@
 
 .mouse-pointer {
     cursor: pointer;
+}
+
+/* Angular animation for ng-repeat */
+
+/*
+  We're using CSS transitions for when
+  the enter and move events are triggered
+  for the element that has the .repeated-item
+  class
+*/
+.repeated-item.ng-enter, .repeated-item.ng-move {
+  -webkit-transition:0.5s linear all;
+  -moz-transition:0.5s linear all;
+  -o-transition:0.5s linear all;
+  transition:0.5s linear all;
+  opacity:0;
+}
+
+/*
+ The ng-enter-active and ng-move-active
+ are where the transition destination properties
+ are set so that the animation knows what to
+ animate.
+*/
+.repeated-item.ng-enter.ng-enter-active,
+.repeated-item.ng-move.ng-move-active {
+  opacity:1;
+}
+
+/*
+  We're using CSS keyframe animations for when
+  the leave event is triggered for the element
+  that has the .repeated-item class
+*/
+.repeated-item.ng-leave {
+  -webkit-animation:0.5s my_animation;
+  -moz-animation:0.5s my_animation;
+  -o-animation:0.5s my_animation;
+  animation:0.5s my_animation;
+}
+
+@keyframes my_animation {
+  from { opacity:1; }
+  to { opacity:0; }
+}
+
+/*
+  Unfortunately each browser vendor requires
+  its own definition of keyframe animation code...
+*/
+@-webkit-keyframes my_animation {
+  from { opacity:1; }
+  to { opacity:0; }
+}
+
+@-moz-keyframes my_animation {
+  from { opacity:1; }
+  to { opacity:0; }
+}
+
+@-o-keyframes my_animation {
+  from { opacity:1; }
+  to { opacity:0; }
 }
\ No newline at end of file
diff --git a/static/js/app/app.js b/static/js/app/app.js
index 6ab8b2a5..14f86745 100644
--- a/static/js/app/app.js
+++ b/static/js/app/app.js
@@ -8,6 +8,7 @@ angular.module('abelujo', [
     'ngCookies',
     'ngResource',
     'ngSanitize',
+    'ngAnimate',
     'ui.router',
     'ui.select',
     'ui.bootstrap',
diff --git a/static/js/app/controllers/basketsController.ls b/static/js/app/controllers/basketsController.ls
index c138e5a9..68c43e6a 100644
--- a/static/js/app/controllers/basketsController.ls
+++ b/static/js/app/controllers/basketsController.ls
@@ -16,7 +16,7 @@
 
 angular.module "abelujo" .controller 'basketsController', ['$http', '$scope', '$timeout', '$filter', '$window', '$uibModal', '$log', 'utils', ($http, $scope, $timeout, $filter, $window, $uibModal, $log, utils) !->
 
-    {Obj, join, reject, sum, map, filter, find, lines} = require 'prelude-ls'
+    {Obj, join, reject, sum, map, filter, find, lines, sort-by, find-index} = require 'prelude-ls'
 
     $scope.baskets = []
     $scope.copies = []
@@ -47,6 +47,7 @@ angular.module "abelujo" .controller 'basketsController', ['$http', '$scope', '$
             .then (response) !->
                 $scope.baskets[item].copies = response.data.data
                 $scope.copies = response.data
+                |> sort-by (.title)
 
         else
             $scope.copies = $scope.cur_basket.copies
@@ -83,24 +84,33 @@ angular.module "abelujo" .controller 'basketsController', ['$http', '$scope', '$
         tmpcard = $scope.cards_fetched
         |> find (.repr == card_repr.repr)
         tmpcard = tmpcard.item
-        $scope.copies.push tmpcard
+        # $scope.copies.push tmpcard
+        # Insert at the right sorted place
+        index = 0
+        index = find-index ( -> tmpcard.title < it.title), $scope.copies
+        if not index
+            index = $scope.copies.length
+        $scope.copies.splice index, 0, tmpcard
         $scope.copy_selected = undefined
         # TODO: save
         $scope.save_card_to_basket tmpcard.id, $scope.cur_basket.id
 
     $scope.save_card_to_basket = (card_id, basket_id) !->
+        # XXX seems redundant with save_quantity below
         coma_sep = "#{card_id}"
         params = do
             card_ids: coma_sep
         $http.post "/api/baskets/#{basket_id}/add/", params
         .then (response) !->
-            $scope.alerts = response.data.msgs
+            null
+            # $scope.alerts = response.data.msgs # the confirmation alert should be less intrusive
         , (response) !->
             ... # error
 
     $scope.save_quantity = (index) !->
         """Save the item quantity.
         """
+        # XXX see save_card_to_basket above
         card = $scope.copies[index]
         utils.save_quantity card, $scope.cur_basket.id
 
diff --git a/templates/search/baskets.jade b/templates/search/baskets.jade
index bc307270..2d9c462b 100644
--- a/templates/search/baskets.jade
+++ b/templates/search/baskets.jade
@@ -100,7 +100,11 @@ div(ng-cloak, ng-controller="basketsController")
        th {% trans "Price" %}
        th
      tbody
-       tr(ng-repeat="it in copies", ng-mouseenter="show_buttons[$index] = true", ng-mouseleave="show_buttons[$index] = false")
+       tr.repeated-item(
+          ng-repeat="it in copies"
+          ng-mouseenter="show_buttons[$index] = true"
+          ng-mouseleave="show_buttons[$index] = false")
+
          td: a(href="{{ 'it.get_absolute_url' | ng}}") {{ 'it.title' | ng }}
          td {{ 'it.quantity' | ng}}
          td {{ 'it.price' | ng }} €