diff --git a/css/app.css b/css/app.css
index 196efe9..94f760b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -22,3 +22,26 @@ body {
 .tierrow {
   margin-bottom:10px;
 }
+
+
+/*Animations*/
+
+/* The starting CSS styles for the enter animation */
+.fade.ng-enter {
+  transition:0.5s linear all;
+  opacity:0;
+}
+
+/* The finishing CSS styles for the enter animation */
+.fade.ng-enter.ng-enter-active {
+  opacity:1;
+}
+
+/* now the element will fade out before it is removed from the DOM */
+.fade.ng-leave {
+  transition:0.5s linear all;
+  opacity:1;
+}
+.fade.ng-leave.ng-leave-active {
+  opacity:0;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index efa5a06..3feb169 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
   <script src="node_modules/jquery/dist/jquery.min.js"></script>
   <script src="node_modules/angular-route/angular-route.min.js"></script>
   <script src="node_modules/angular-md5/angular-md5.min.js"></script>
+  <script src="node_modules/angular-animate/angular-animate.min.js"></script>
 
   <!-- enable cookies -->
   <script src="node_modules/angular-cookies/angular-cookies.min.js"></script>
diff --git a/js/controllers/viewer.js b/js/controllers/viewer.js
index 0ffce89..1698ea3 100644
--- a/js/controllers/viewer.js
+++ b/js/controllers/viewer.js
@@ -1,29 +1,34 @@
-angular.module('bananaraceApp.controllers').controller('PouleViewerCtrl', ['$scope', '$routeParams', 'ViewerService', function($scope, $routeParams, ViewerService) {
+var mod = angular.module('bananaraceApp.controllers', ['ngAnimate']);
 
-	//store all the teams
-	$scope.teamsInPoule = [];
 
-	$scope.currentTier = $routeParams.tier;
-	$scope.currentPoule = $routeParams.poule;
+mod.controller('PouleViewerCtrl', ['$scope', '$routeParams', 'ViewerService',
+    function($scope, $routeParams, ViewerService) {
 
-	$scope.refreshTeamsForPoule = function() {
-		var idchampionship = $routeParams.idchampionship;
-		var tier = $routeParams.tier;
-		var poule = $routeParams.poule;
-		ViewerService.getTeamsForPoule(idchampionship, tier, poule).
-		success(function(data, status, headers, config) {
-			console.log('getTeamsForPoule successful...');
-			console.log(data);
-			if(data['ok']==true) {
-				$scope.teamsInPoule = data.teams;
-			} else {
-				console.log('call returned but wasnt ok: '+data.error);
-			}
-		}).
-		error(function(data, status, headers, config) {
-			console.log('getTeamsForPoule failed...');
-		});
-	};
+        //store all the teams
+        $scope.teamsInPoule = [];
 
-	$scope.refreshTeamsForPoule();
-}]);
+        $scope.currentTier = $routeParams.tier;
+        $scope.currentPoule = $routeParams.poule;
+
+        $scope.refreshTeamsForPoule = function() {
+            var idchampionship = $routeParams.idchampionship;
+            var tier = $routeParams.tier;
+            var poule = $routeParams.poule;
+            ViewerService.getTeamsForPoule(idchampionship, tier, poule).
+            success(function(data, status, headers, config) {
+                console.log('getTeamsForPoule successful...');
+                console.log(data);
+                if (data['ok'] == true) {
+                    $scope.teamsInPoule = data.teams;
+                } else {
+                    console.log('call returned but wasnt ok: ' + data.error);
+                }
+            }).
+            error(function(data, status, headers, config) {
+                console.log('getTeamsForPoule failed...');
+            });
+        };
+
+        $scope.refreshTeamsForPoule();
+    }
+]);
\ No newline at end of file