diff --git a/webapp/js/components/album/album.html b/webapp/js/components/album/album.html
new file mode 100644
index 0000000..4a994c9
--- /dev/null
+++ b/webapp/js/components/album/album.html
@@ -0,0 +1,15 @@
+<a href="" ng-click="$ctrl.openAlbumModal()">
+  <div class="cover-container">
+	<div class="cover">
+      <img class="img-responsive img-rounded" alt="{{$ctrl.album.titleDisplay}}" ng-src="{{$ctrl.album.CoverURL}}"/>
+	  <div class="over-img-rating">
+		<uib-rating  ng-if="$ctrl.render" ng-model="$ctrl.album.Note" readonly="true"></uib-rating>
+	  </div>
+	  <div class="over-img-ref">{{$ctrl.album.ref}}</div>
+	</div>
+  </div>
+  <div class="album-ellipsis">
+	<p>{{$ctrl.album.serieDisplay || '-'}}</p>
+	<p>{{$ctrl.album.titleDisplay}}</p>
+  </div>
+</a>
diff --git a/webapp/js/components/album/album.js b/webapp/js/components/album/album.js
new file mode 100644
index 0000000..19147dc
--- /dev/null
+++ b/webapp/js/components/album/album.js
@@ -0,0 +1,49 @@
+var album = angular.module('satbd.satellite.bar.components.album', [
+	'ui.bootstrap',
+	'ngAnimate']);
+
+function AlbumCtrl($log,$uibModal,albumService) {
+	var ctrl = this;
+	ctrl.render = false;
+	ctrl.album = {Note :-1};
+
+	albumService.get(ctrl.id)
+		.then(function(data) {
+			ctrl.album = data;
+			ctrl.render = true;
+		}, function(err) {
+			$log.error('Could not fetch album '+ ctrl.id + ' :' +err);
+		});
+
+	ctrl.openAlbumModal = function() {
+		var albumModalInstance = $uibModal.open({
+			templateUrl: 'js/components/album/albumModal.html',
+			controller: 'AlbumModalInstanceCtrl',
+			size: 'lg',
+			keyboard: true,
+			resolve: {
+				album: function() {
+					return ctrl.album;
+				}
+			}
+		});
+	};
+}
+
+album.component('album', {
+	templateUrl: 'js/components/album/album.html',
+	controller: AlbumCtrl,
+	bindings: {
+		id: '=albumId'
+	}
+})
+
+album.controller('AlbumModalInstanceCtrl', function($scope,$uibModalInstance,album) {
+	$scope.album = album;
+	$scope.ok = function() {
+		$uibModalInstance.close('');
+	};
+	$scope.getLink = function(n) {
+		return $scope.album[n];
+	}
+});
diff --git a/webapp/html/albumModal.html b/webapp/js/components/album/albumModal.html
similarity index 100%
rename from webapp/html/albumModal.html
rename to webapp/js/components/album/albumModal.html
diff --git a/webapp/js/directives.js b/webapp/js/directives.js
deleted file mode 100644
index a5d2c88..0000000
--- a/webapp/js/directives.js
+++ /dev/null
@@ -1,51 +0,0 @@
-var directives = angular.module('satbd.satellite.bar.directives',[
-	'ui.bootstrap',
-	'ngAnimate'
-])
-
-directives.directive('album', function() {
-	return {
-		scope: {
-			id: '=albumId'
-		},
-		templateUrl: 'js/directives/album.html',
-		restrict: 'E',
-		controller: 'AlbumCtrl'
-	};
-});
-
-directives.controller('AlbumCtrl', function($scope,$http,$log,$uibModal,albumService) {
-	//we need to make sure rating is not rendered before note is known
-	$scope.render = false;
-	$scope.album = { Note:-1};
-	albumService.get($scope.id)
-		.then(function(data) {
-			$scope.album = data;
-			$scope.render = true;
-		}, function(err) {
-			$log.error('Could not fetch album ' + $scope.id +  ' :' + err);
-		});
-	$scope.openAlbumModal = function() {
-		var albumModalInstance = $uibModal.open({
-			templateUrl: 'html/albumModal.html',
-			controller: 'AlbumModalInstanceCtrl',
-			size: 'lg',
-			keyboard: true,
-			resolve: {
-				album: function() {
-					return $scope.album;
-				}
-			}
-		});
-	};
-});
-
-directives.controller('AlbumModalInstanceCtrl', function($scope,$uibModalInstance,album) {
-	$scope.album = album;
-	$scope.ok = function() {
-		$uibModalInstance.close('');
-	};
-	$scope.getLink = function(n) {
-		return $scope.album[n];
-	}
-});
diff --git a/webapp/js/directives/album.html b/webapp/js/directives/album.html
deleted file mode 100644
index 38d01dc..0000000
--- a/webapp/js/directives/album.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<a href="" ng-click="openAlbumModal()">
-  <div class="cover-container">
-	<div class="cover">
-      <img class="img-responsive img-rounded" alt="{{album.titleDisplay}}" ng-src="{{album.CoverURL}}"/>
-	  <div class="over-img-rating">
-		<uib-rating  ng-if="render" ng-model="album.Note" readonly="true"></uib-rating>
-	  </div>
-	  <div class="over-img-ref">{{album.ref}}</div>
-	</div>
-  </div>
-  <div class="album-ellipsis">
-	<p>{{album.serieDisplay || '-'}}</p>
-	<p>{{album.titleDisplay}}</p>
-  </div>
-</a>
diff --git a/webapp/js/directives/responsive-ratio.html b/webapp/js/directives/responsive-ratio/responsive-ratio.html
similarity index 100%
rename from webapp/js/directives/responsive-ratio.html
rename to webapp/js/directives/responsive-ratio/responsive-ratio.html
diff --git a/webapp/js/directives/responsive-ratio.js b/webapp/js/directives/responsive-ratio/responsive-ratio.js
similarity index 87%
rename from webapp/js/directives/responsive-ratio.js
rename to webapp/js/directives/responsive-ratio/responsive-ratio.js
index 882d8d2..d9dafbb 100644
--- a/webapp/js/directives/responsive-ratio.js
+++ b/webapp/js/directives/responsive-ratio/responsive-ratio.js
@@ -6,7 +6,7 @@ responsiveRatio.directive('responsiveRatio', function() {
         scope: {
             responsiveRatio: '<responsiveRatio'
         },
-        templateUrl: 'js/directives/responsive-ratio.html',
+        templateUrl: 'js/directives/responsive-ratio/responsive-ratio.html',
         restrict: 'A',
         transclude:  true,
         controller: 'ResponsiveRatioCtrl'
diff --git a/webapp/js/satbd.satellite.bar.js b/webapp/js/satbd.satellite.bar.js
index 00f6b71..37cddc7 100644
--- a/webapp/js/satbd.satellite.bar.js
+++ b/webapp/js/satbd.satellite.bar.js
@@ -3,7 +3,6 @@
 angular.module('satbd.satellite.bar',[
 	'ngRoute',
 	'satbd.satellite.bar.controllers',
-	'satbd.satellite.bar.directives',
 	'satbd.satellite.bar.services',
 	'satbd.satellite.bar.views.recents',
 	'satbd.satellite.bar.views.series',
diff --git a/webapp/js/views/recents/recents.js b/webapp/js/views/recents/recents.js
index b54bf01..427b650 100644
--- a/webapp/js/views/recents/recents.js
+++ b/webapp/js/views/recents/recents.js
@@ -2,6 +2,7 @@
 
 angular.module('satbd.satellite.bar.views.recents',[
 	'ngRoute',
+	'satbd.satellite.bar.components.album',
 	'angular-inview'
 ]).config(function($routeProvider) {
 	$routeProvider.when('/recents', {