diff --git a/bower.json b/bower.json
index 18e2226..1108d10 100644
--- a/bower.json
+++ b/bower.json
@@ -8,7 +8,8 @@
     "angular-animate": "^1.5.0",
     "angular-sanitize": "^1.5.0",
     "angular-bootstrap": "^1.1.2",
-    "bootstrap": "^3.3.6"
+    "bootstrap": "^3.3.6",
+    "angular-inview": "^1.5.6"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.0",
diff --git a/webapp/html/index.html b/webapp/html/index.html
index 0336f65..6f9a598 100644
--- a/webapp/html/index.html
+++ b/webapp/html/index.html
@@ -50,6 +50,7 @@
 	<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
 	<script src="/bower_components/angular-route/angular-route.min.js"></script>
 	<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+	<script src="/bower_components/angular-inview/angular-inview.js"></script>
 	<!-- inject:js -->
 	<!-- endinject -->
   </body>
diff --git a/webapp/js/directives.js b/webapp/js/directives.js
index cbd8499..8c6893b 100644
--- a/webapp/js/directives.js
+++ b/webapp/js/directives.js
@@ -20,7 +20,7 @@ directives.controller('AlbumCtrl', function($scope,$http,$log,$uibModal,albumSer
 		.then(function(data) {
 			$scope.album = data;
 		}, function(err) {
-			$log.error('Could not fetch album' + $scope.id +  ' :' + err);
+			$log.error('Could not fetch album ' + $scope.id +  ' :' + err);
 		});
 	$scope.openAlbumModal = function() {
 		var albumModalInstance = $uibModal.open({
diff --git a/webapp/js/views/recents/recents.html b/webapp/js/views/recents/recents.html
index 042509b..cc8f922 100644
--- a/webapp/js/views/recents/recents.html
+++ b/webapp/js/views/recents/recents.html
@@ -1,5 +1,9 @@
-<h1> Albums Récents </h1>
-
-<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 album" ng-repeat="id in albumIDs">
-  <album album-id="id"> </album>
+<h1 class="text-center"> Albums Récents </h1>
+<div class="row">
+  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 album" ng-repeat="id in albumIDs">
+	<album album-id="id"> </album>
+  </div>
+</div>
+<div class="row text-center" in-view="$inview&&loadMore()" ng-if="scrollMore">
+  Chargement ...
 </div>
diff --git a/webapp/js/views/recents/recents.js b/webapp/js/views/recents/recents.js
index 027d83c..2eb139a 100644
--- a/webapp/js/views/recents/recents.js
+++ b/webapp/js/views/recents/recents.js
@@ -1,7 +1,8 @@
 'use strict';
 
 angular.module('satbd.satellite.bar.views.recents',[
-	'ngRoute'
+	'ngRoute',
+	'angular-inview'
 ]).config(function($routeProvider) {
 	$routeProvider.when('/recents', {
 		templateUrl: 'js/views/recents/recents.html',
@@ -9,12 +10,30 @@ angular.module('satbd.satellite.bar.views.recents',[
 	});
 }).controller('RecentsCtrl', function( $scope, $http, $log) {
 	$scope.albumIDs = [];
+	$scope.allAlbums = [];
+	$scope.scrollMore = false;
+
+	//we put all the albums in one variable
+
 	$http.get('/api/recents')
 		.success(function(data) {
-			for (var i=0; i < 10; i++) {
-				$scope.albumIDs.push(data[i]);
-			}
+			$scope.allAlbums = data;
+			$scope.scrollMore = true;
 		}).error(function(err){
 			$log.error(err);
 		});
+
+	$scope.loadMore = function() {
+		$log.info('Loading more components');
+		if (!$scope.scrollMore || $scope.albumIDs.length >= $scope.allAlbums.length) {
+			$scope.scrollMore = false;
+			$log.info('reached the end of albums')
+			return;
+		}
+		var newSize = Math.min($scope.albumIDs.length + 50, $scope.allAlbums.length);
+		for( var i = $scope.albumIDs.length; i < newSize; i++) {
+			$scope.albumIDs.push($scope.allAlbums[i]);
+		}
+	}
+
 });