diff --git a/web-client/app/controllers/ImagesCtrl.js b/web-client/app/controllers/ImagesCtrl.js
index 23eaa5b..5f1d5ec 100644
--- a/web-client/app/controllers/ImagesCtrl.js
+++ b/web-client/app/controllers/ImagesCtrl.js
@@ -17,6 +17,10 @@ angular.module('collaboroControllers').controller('imagesCtrl', ['$scope',functi
   //$scope.addSlide();
  }
 
+ $scope.nextImage=function(){if($scope.notationImageIndex+1<$scope.slides.length){$scope.notationImageIndex++;}else{$scope.notationImageIndex=0;}};
+ $scope.previousImage=function(){if($scope.notationImageIndex-1>=0){$scope.notationImageIndex--;}else{$scope.notationImageIndex=$scope.slides.length-1}};
+
+
  //$scope.sportImages = ['http://placekitten.com/600/300','http://placekitten.com/601/300','http://placekitten.com/602/300'];
  //$scope.sportImages = ['http://placekitten.com/604/300','http://placekitten.com/601/300','http://placekitten.com/602/300'];
 
diff --git a/web-client/app/partials/project.html b/web-client/app/partials/project.html
index e792454..a655587 100644
--- a/web-client/app/partials/project.html
+++ b/web-client/app/partials/project.html
@@ -32,6 +32,8 @@ <h3 class="panel-title">Notation examples</h3>
               <div class="panel-body">  
                   <div ng-controller="imagesCtrl">
                     <img style="height:305px;" ng-src="{{slides[notationImageIndex].image}}">
+                    <button ng-click="previousImage()" class="btn btn-default btn-sm"><<</button>
+                    <button ng-click="nextImage()" class="btn btn-default btn-sm">>></button>
                     <!--<div style="height:305 px width:600">-->
                      <!--<ul rn-carousel class="image">
                       <li ng-repeat="image in sportImages" ng-style="{ backgroundImage: 'url(' + image + ')' }">