Index: src/main/java/com/wediscussmovies/project/model/primarykeys/GenreLikesPK.java
===================================================================
--- src/main/java/com/wediscussmovies/project/model/primarykeys/GenreLikesPK.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
+++ src/main/java/com/wediscussmovies/project/model/primarykeys/GenreLikesPK.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -0,0 +1,43 @@
+package com.wediscussmovies.project.model.primarykeys;
+
+import lombok.Data;
+
+import javax.persistence.Column;
+import javax.persistence.Embeddable;
+import java.io.Serializable;
+
+@Embeddable
+@Data
+public class GenreLikesPK implements Serializable {
+
+    @Column(name = "genre_id")
+    private int genreId;
+
+    @Column(name = "user_id")
+    private int userId;
+
+    public GenreLikesPK() {
+    }
+
+    public GenreLikesPK(int genreId, int userId) {
+        this.genreId = genreId;
+        this.userId = userId;
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+
+        GenreLikesPK that = (GenreLikesPK) o;
+
+        return userId == that.userId && genreId == that.genreId;
+    }
+
+    @Override
+    public int hashCode() {
+        int result = genreId;
+        result = 31 * result + userId;
+        return result;
+    }
+}
Index: src/main/java/com/wediscussmovies/project/model/primarykeys/UserGenresPK.java
===================================================================
--- src/main/java/com/wediscussmovies/project/model/primarykeys/UserGenresPK.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/model/primarykeys/UserGenresPK.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -1,3 +1,5 @@
 package com.wediscussmovies.project.model.primarykeys;
+
+import lombok.Data;
 
 import javax.persistence.Column;
@@ -6,4 +8,5 @@
 import java.io.Serializable;
 
+@Data
 @Embeddable
 public class UserGenresPK implements Serializable {
@@ -30,6 +33,4 @@
         UserGenresPK that = (UserGenresPK) o;
 
-
-
         return userId == that.userId && genreId == that.genreId;
     }
Index: src/main/java/com/wediscussmovies/project/querymodels/GenreLikes.java
===================================================================
--- src/main/java/com/wediscussmovies/project/querymodels/GenreLikes.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/querymodels/GenreLikes.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -3,13 +3,35 @@
 import lombok.Data;
 
+import javax.persistence.Entity;
+import javax.persistence.Table;
+import java.util.Comparator;
+import java.util.Objects;
+
 @Data
 public class GenreLikes {
-
+    private Integer genreId;
     private String name;
     private Long likes;
 
-    public GenreLikes(String name, Long likes) {
+    public static Comparator<GenreLikes> sorter = Comparator.comparing(GenreLikes::getLikes).thenComparing(GenreLikes::getName).reversed();
+
+    public GenreLikes(Integer genreId, String name, Long likes) {
+        this.genreId = genreId;
         this.name = name;
         this.likes = likes;
+
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+        GenreLikes that = (GenreLikes) o;
+        return Objects.equals(genreId, that.genreId);
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(genreId);
     }
 }
Index: src/main/java/com/wediscussmovies/project/repository/GenreLikesRepository.java
===================================================================
--- src/main/java/com/wediscussmovies/project/repository/GenreLikesRepository.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
+++ src/main/java/com/wediscussmovies/project/repository/GenreLikesRepository.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -0,0 +1,18 @@
+package com.wediscussmovies.project.repository;
+
+import com.wediscussmovies.project.model.User;
+import com.wediscussmovies.project.model.primarykeys.GenreLikesPK;
+import com.wediscussmovies.project.model.primarykeys.MovieLikesPK;
+import com.wediscussmovies.project.model.primarykeys.UserGenresPK;
+import com.wediscussmovies.project.model.relation.MovieLikes;
+import com.wediscussmovies.project.model.relation.UserGenres;
+import com.wediscussmovies.project.querymodels.GenreLikes;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public interface GenreLikesRepository  extends JpaRepository<UserGenres, UserGenresPK> {
+    List<UserGenres> findAllByUser(User user);
+}
Index: src/main/java/com/wediscussmovies/project/repository/GenreRepository.java
===================================================================
--- src/main/java/com/wediscussmovies/project/repository/GenreRepository.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/repository/GenreRepository.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -4,8 +4,11 @@
 import com.wediscussmovies.project.querymodels.GenreLikes;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
 import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.stereotype.Repository;
 
 import javax.transaction.Transactional;
+import java.sql.Date;
 import java.util.List;
 
@@ -14,9 +17,14 @@
      List<Genre> findAllByGenreType(String genre);
 
-     @Query(value = "select new com.wediscussmovies.project.querymodels.GenreLikes(g.genreType, count(ug.id.userId)) from Genre g" +
+     @Query(value = "select new com.wediscussmovies.project.querymodels.GenreLikes(g.genreId, g.genreType, count(ug.id.userId)) from Genre g" +
              " left join UserGenres ug on ug.id.genreId = g.genreId" +
-             " group by g.genreType" +
+             " group by g.genreId, g.genreType" +
              " order by count(ug.id.userId) desc")
      @Transactional
      List<GenreLikes> findAllWithLikes();
+
+     @Modifying
+     @Query(value = "insert into project.user_genres (user_id,genre_id) values(:user_id,:genre_id)",nativeQuery = true)
+     @Transactional
+     void insertInto(@Param("user_id")Integer userId, @Param("genre_id")Integer genreId);
 }
Index: src/main/java/com/wediscussmovies/project/repository/MovieRepository.java
===================================================================
--- src/main/java/com/wediscussmovies/project/repository/MovieRepository.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/repository/MovieRepository.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -4,4 +4,5 @@
 import com.wediscussmovies.project.model.Person;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Repository;
 
@@ -13,3 +14,5 @@
      List<Movie> findAllByDirector(Person director);
      List<Movie> findAllByDirectorIsNull();
+     @Query(value="select m.movieId from Movie m")
+     List<Integer> findAllMovieIds();
 }
Index: src/main/java/com/wediscussmovies/project/service/GenreService.java
===================================================================
--- src/main/java/com/wediscussmovies/project/service/GenreService.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/service/GenreService.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -14,4 +14,6 @@
     Genre save(String genreName);
     List<GenreLikes> findAllWithLikes();
+    void likeGenre(Integer genreId,Integer userId);
+    void unlikeGenre(Integer genreId,Integer userId);
 
 }
Index: src/main/java/com/wediscussmovies/project/service/MovieService.java
===================================================================
--- src/main/java/com/wediscussmovies/project/service/MovieService.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/service/MovieService.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -6,4 +6,5 @@
 import com.wediscussmovies.project.model.Person;
 import com.wediscussmovies.project.model.User;
+import org.springframework.data.jpa.repository.Query;
 
 import java.sql.Date;
@@ -16,4 +17,5 @@
      List<Movie> searchByTitle(String title);
      Movie findById(Integer id);
+     List<Integer> listAllIds();
      Movie save(String title, String description, String imageUrl, Date airingDate,Double  rating,
                 Integer directorId,List<Integer> actorIds,List<Integer> genreIds);
Index: src/main/java/com/wediscussmovies/project/service/PersonService.java
===================================================================
--- src/main/java/com/wediscussmovies/project/service/PersonService.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/service/PersonService.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -5,7 +5,9 @@
 import com.wediscussmovies.project.model.Person;
 import com.wediscussmovies.project.model.User;
+import com.wediscussmovies.project.model.relation.MovieLikes;
 
 import java.sql.Date;
 import java.util.List;
+import java.util.stream.Collectors;
 
 public interface PersonService {
@@ -27,4 +29,3 @@
     void deleteById(Integer id);
     void addGradePerson(Integer personId, User user, Grade grade);
-
 }
Index: src/main/java/com/wediscussmovies/project/service/impl/GenreServiceImpl.java
===================================================================
--- src/main/java/com/wediscussmovies/project/service/impl/GenreServiceImpl.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/service/impl/GenreServiceImpl.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -1,8 +1,16 @@
 package com.wediscussmovies.project.service.impl;
 
+import com.wediscussmovies.project.model.User;
 import com.wediscussmovies.project.model.exception.GenreNotExistException;
+import com.wediscussmovies.project.model.exception.UserNotExistException;
+import com.wediscussmovies.project.model.primarykeys.GenreLikesPK;
+import com.wediscussmovies.project.model.primarykeys.UserGenresPK;
+import com.wediscussmovies.project.model.relation.MovieLikes;
+import com.wediscussmovies.project.model.relation.UserGenres;
 import com.wediscussmovies.project.querymodels.GenreLikes;
+import com.wediscussmovies.project.repository.GenreLikesRepository;
 import com.wediscussmovies.project.repository.GenreRepository;
 import com.wediscussmovies.project.model.Genre;
+import com.wediscussmovies.project.repository.UserRepository;
 import com.wediscussmovies.project.service.GenreService;
 import org.springframework.stereotype.Service;
@@ -13,7 +21,12 @@
 public class GenreServiceImpl implements GenreService {
     private final GenreRepository genreRepository;
+    private final UserRepository userRepository;
+    private final GenreLikesRepository genreLikesRepository;
 
-    public GenreServiceImpl(GenreRepository genreRepository) {
+
+    public GenreServiceImpl(GenreRepository genreRepository, UserRepository userRepository, GenreLikesRepository genreLikesRepository) {
         this.genreRepository = genreRepository;
+        this.userRepository = userRepository;
+        this.genreLikesRepository = genreLikesRepository;
     }
 
@@ -36,5 +49,7 @@
     @Override
     public List<GenreLikes> findAllWithLikes() {
-        return this.genreRepository.findAllWithLikes();
+        List<GenreLikes> genreLikesList = this.genreRepository.findAllWithLikes();
+        genreLikesList.sort(GenreLikes.sorter);
+        return genreLikesList;
     }
 
@@ -43,3 +58,16 @@
         return this.genreRepository.findAll();
     }
+
+    @Override
+    public void likeGenre(Integer genreId, Integer userId) {
+        User user = this.userRepository.findById(userId).orElseThrow(() -> new UserNotExistException(userId.toString()));
+        Genre genre = this.genreRepository.findById(genreId).orElseThrow(() -> new GenreNotExistException(genreId));
+        this.genreLikesRepository.save(new UserGenres(genre, user));
+    }
+
+    @Override
+    public void unlikeGenre(Integer genreId, Integer userId) {
+        UserGenresPK movieLikesPK = new UserGenresPK(userId, genreId);
+        this.genreLikesRepository.deleteById(movieLikesPK);
+    }
 }
Index: src/main/java/com/wediscussmovies/project/service/impl/MovieServiceImpl.java
===================================================================
--- src/main/java/com/wediscussmovies/project/service/impl/MovieServiceImpl.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/service/impl/MovieServiceImpl.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -76,4 +76,9 @@
 
     @Override
+    public List<Integer> listAllIds() {
+        return this.movieRepository.findAllMovieIds();
+    }
+
+    @Override
     @Transactional
     public Movie save(String title, String description, String imageUrl,
Index: src/main/java/com/wediscussmovies/project/service/impl/PersonServiceImpl.java
===================================================================
--- src/main/java/com/wediscussmovies/project/service/impl/PersonServiceImpl.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/service/impl/PersonServiceImpl.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -9,10 +9,6 @@
 import com.wediscussmovies.project.model.primarykeys.PersonRatesPK;
 import com.wediscussmovies.project.model.relation.MovieActors;
-import com.wediscussmovies.project.model.relation.MovieRates;
 import com.wediscussmovies.project.model.relation.PersonRates;
-import com.wediscussmovies.project.repository.MovieActorsRepository;
-import com.wediscussmovies.project.repository.MovieRepository;
-import com.wediscussmovies.project.repository.PersonRatesRepository;
-import com.wediscussmovies.project.repository.PersonRepository;
+import com.wediscussmovies.project.repository.*;
 import com.wediscussmovies.project.model.Person;
 import com.wediscussmovies.project.service.PersonService;
@@ -32,5 +28,4 @@
     private final MovieActorsRepository movieActorsRepository;
     private final PersonRatesRepository personRatesRepository;
-
 
     public PersonServiceImpl(PersonRepository personRepository,
@@ -156,4 +151,6 @@
 
 
+
+
     private void addActorForMovies(Person person, List<Integer> movieIds){
 
Index: src/main/java/com/wediscussmovies/project/web/PageFrontMovies.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/PageFrontMovies.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
+++ src/main/java/com/wediscussmovies/project/web/PageFrontMovies.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -0,0 +1,39 @@
+package com.wediscussmovies.project.web;
+
+import com.wediscussmovies.project.model.Movie;
+import com.wediscussmovies.project.service.MovieService;
+import org.springframework.ui.Model;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class PageFrontMovies {
+    public static List<Movie> getPagedMovies(String page, MovieService movieService, Model model){
+        List<Integer> movieIds = movieService.listAllIds();
+        List<Movie> movies = new ArrayList<>();
+        if(page==null || Integer.parseInt(page) <= 0)
+            page="1";
+        int pageToLoad = Integer.parseInt(page);
+
+        int from = (pageToLoad-1)*12;
+        int to = pageToLoad*12;
+
+        if (from>movieIds.size()){
+            page = "1";
+            pageToLoad = Integer.parseInt(page);
+            from = (pageToLoad-1)*12;
+            to = pageToLoad*12;
+        }
+        else if(to>movieIds.size()){
+            to = movieIds.size();
+        }
+
+        movieIds = movieIds.subList(from, to);
+
+        for(Integer id: movieIds){
+            movies.add(movieService.findById(id));
+        }
+        model.addAttribute("page", page);
+        return movies;
+    }
+}
Index: src/main/java/com/wediscussmovies/project/web/controller/GenreController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/GenreController.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/web/controller/GenreController.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -1,4 +1,10 @@
 package com.wediscussmovies.project.web.controller;
 
+import com.wediscussmovies.project.LoggedUser;
+import com.wediscussmovies.project.model.Genre;
+import com.wediscussmovies.project.model.User;
+import com.wediscussmovies.project.model.relation.UserGenres;
+import com.wediscussmovies.project.querymodels.GenreLikes;
+import com.wediscussmovies.project.repository.GenreLikesRepository;
 import com.wediscussmovies.project.service.GenreService;
 import org.springframework.stereotype.Controller;
@@ -7,17 +13,35 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 
+import java.util.ArrayList;
+import java.util.List;
+
 @Controller
 @RequestMapping("/genres")
 public class GenreController {
     private final GenreService genreService;
+    private final GenreLikesRepository genreLikesRepository;
 
-    public GenreController(GenreService genreService) {
+    public GenreController(GenreService genreService, GenreLikesRepository genreLikesRepository) {
         this.genreService = genreService;
+        this.genreLikesRepository = genreLikesRepository;
     }
     @GetMapping
     public String getGenres(Model model){
         model.addAttribute("genres",genreService.findAllWithLikes());
+        model.addAttribute("allGenres", genreService.findAll());
         model.addAttribute("contentTemplate","genres");
+        addModelPropertiesForUser(model);
         return "template";
     }
+
+    private void addModelPropertiesForUser(Model model){
+        User user = LoggedUser.getLoggedUser();
+        List<UserGenres> genreLikesList = this.genreLikesRepository.findAllByUser(user);
+        List<Genre> genres = new ArrayList<>();
+        for(UserGenres g: genreLikesList){
+            genres.add(genreService.findById(g.getId().getGenreId()));
+        }
+        model.addAttribute("likedGenres",genres);
+        model.addAttribute("user",user);
+    }
 }
Index: src/main/java/com/wediscussmovies/project/web/controller/MovieController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/MovieController.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/web/controller/MovieController.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -9,4 +9,5 @@
 import com.wediscussmovies.project.service.PersonService;
 import com.wediscussmovies.project.web.DesignFrontMovies;
+import com.wediscussmovies.project.web.PageFrontMovies;
 import lombok.Data;
 import org.springframework.format.annotation.DateTimeFormat;
@@ -37,5 +38,5 @@
     }
 
-    @GetMapping
+    @GetMapping("/old")
     public String getMovies(@RequestParam(required = false) String titleQuery, Model model,
                             @RequestParam(required = false) String error){
@@ -55,4 +56,23 @@
         model.addAttribute("movie_rows", movie_rows);
         model.addAttribute("contentTemplate", "moviesList");
+        if (error != null && !error.equals(" "))
+            model.addAttribute("error",error);
+        return "template";
+    }
+
+
+    @GetMapping
+    public String getMoviesAlternative(@RequestParam(required = false) String titleQuery, Model model,
+                            @RequestParam(required = false) String error, @RequestParam(required = false) String page){
+        if (page==null){
+            return "redirect:/movies?page=1";
+        }
+        addModelPropertiesForUser(model);
+        List<Movie> movies = PageFrontMovies.getPagedMovies(page, movieService, model);
+        List<List<Movie>> movie_rows = new ArrayList<>();
+        DesignFrontMovies.designMovieList(movies,movie_rows);
+        model.addAttribute("movies", movies);
+        model.addAttribute("movie_rows", movie_rows);
+        model.addAttribute("contentTemplate", "moviesListPaged");
         if (error != null && !error.equals(" "))
             model.addAttribute("error",error);
@@ -160,6 +180,5 @@
     }
     private void addModelProperties(Model model){
-
-        model.addAttribute("directors",  personService.findAllDirectors());
+        model.addAttribute("directors", personService.findAllDirectors());
         model.addAttribute("actors", personService.findAllActors());
         model.addAttribute("genres", genreService.findAll());
@@ -169,5 +188,5 @@
         model.addAttribute("likedMovies",this.movieService.findLikedMoviesByUser(user));
         model.addAttribute("user",user);
-        }
+    }
 
 }
Index: src/main/java/com/wediscussmovies/project/web/controller/PersonController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/PersonController.java	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/java/com/wediscussmovies/project/web/controller/PersonController.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -1,5 +1,7 @@
 package com.wediscussmovies.project.web.controller;
 
+import com.wediscussmovies.project.LoggedUser;
 import com.wediscussmovies.project.model.Person;
+import com.wediscussmovies.project.model.User;
 import com.wediscussmovies.project.service.MovieService;
 import com.wediscussmovies.project.service.PersonService;
@@ -135,4 +137,9 @@
     }
 
+    private void addModelPropertiesForUser(Model model){
+        User user = LoggedUser.getLoggedUser();
+        model.addAttribute("user",user);
+    }
+
 
 }
Index: src/main/java/com/wediscussmovies/project/web/controller/rest/GenreRestController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/rest/GenreRestController.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
+++ src/main/java/com/wediscussmovies/project/web/controller/rest/GenreRestController.java	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -0,0 +1,38 @@
+package com.wediscussmovies.project.web.controller.rest;
+
+import com.wediscussmovies.project.service.DiscussionService;
+import com.wediscussmovies.project.service.GenreService;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("api/genres")
+public class GenreRestController {
+    private final GenreService genreService;
+
+    public GenreRestController(GenreService genreService) {
+        this.genreService = genreService;
+    }
+
+    @GetMapping("/like/{genreId}")
+    public ResponseEntity likeGenre(@PathVariable Integer genreId, @RequestParam Integer userId){
+        try {
+            this.genreService.likeGenre(genreId,userId);
+            return ResponseEntity.ok(true);
+        }
+        catch (RuntimeException exception){
+            return ResponseEntity.ok(false);
+        }
+    }
+    @GetMapping("/unlike/{genreId}")
+    public ResponseEntity unlikeGenre (@PathVariable Integer genreId, @RequestParam Integer userId){
+        try {
+            this.genreService.unlikeGenre(genreId,userId);
+            return ResponseEntity.ok(true);
+        }
+        catch (RuntimeException exception){
+            System.out.println(exception.getMessage());
+            return ResponseEntity.ok(false);
+        }
+    }
+}
Index: src/main/resources/static/css/shared.css
===================================================================
--- src/main/resources/static/css/shared.css	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/resources/static/css/shared.css	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -70,2 +70,37 @@
     text-align: center;
 }
+
+#paging-section{
+    width: 100%;
+    clear: both;
+    margin-bottom: 30px;
+}
+
+#inner-paging{
+    width: fit-content;
+    margin: auto;
+
+}
+
+#button-sub, #button-add{
+    width: 100px;
+}
+
+#pageInput{
+    font-size: 100%;
+    text-align: center;
+    width: 175px;
+    margin: auto;
+}
+
+#button-submit-page{
+    margin: auto;
+    text-align: center;
+    margin-top: 7px;
+    display: none;
+}
+
+.visibility{
+    transition: 200ms;
+    opacity: 0;
+}
Index: src/main/resources/static/js/sharedScript.js
===================================================================
--- src/main/resources/static/js/sharedScript.js	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/resources/static/js/sharedScript.js	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -4,4 +4,33 @@
     var elements = $(".elements")
     var elementGrade;
+
+
+    $("#button-add").on("click", function (){
+        itemInput = $("#pageInput")
+        itemInput.val(Number(itemInput.val()) + 1);
+        $("#button-submit-page").click()
+    })
+
+    $("#button-sub").on("click", function (){
+        itemInput = $("#pageInput")
+        if(Number(itemInput.val()) > 1){
+            itemInput.val(Number(itemInput.val()) - 1);
+            $("#button-submit-page").click()
+        }
+    })
+
+    $("#searchTitle").on("keyup", function() {
+        var value = $(this).val().toLowerCase();
+        console.log(value)
+        $(".elements div a .title").filter(function() {
+            console.log($(this).text())
+            if($(this).text().toLowerCase().indexOf(value) <= -1)
+                $(this).parent().parent().parent().addClass("visibility")
+            else
+                $(this).parent().parent().parent().removeClass("visibility")
+        });
+    });
+
+
 
 
@@ -37,5 +66,5 @@
 
 
-    $(".search-button-title").on("click",function (){
+    /*$(".search-button-title").on("click",function (){
         let filter = $("#searchTitle").val()
         console.log(elements)
@@ -50,12 +79,9 @@
             }
         }
-
-    })
+    })*/
 
 
    $(".search-button").on("click",function () {
         let filter = $("#searchGenre").val()
-       console.log(elements)
-
        for (let item of elements) {
             let genre = $(item).find(".card-genre")
@@ -64,12 +90,15 @@
             for (let g of genre) {
 
-                if ($(g).text().toLowerCase() === filter.toLowerCase()) {
+                if (( $(g).text().toLowerCase() === filter.toLowerCase() && !$(g).hasClass("visibility") && filter.trim().length != 0)) {
                     visible = true
-                    $(item).css("display","block")
+                    $(item).removeClass("visibility")
                     break;
                 }
             }
-            if (!visible)
-                $(item).css("display","none")
+            if (!visible && filter.trim().length != 0)
+                $(item).addClass("visibility")
+            else
+                $(item).removeClass("visibility")
+
         }
     });
@@ -117,4 +146,14 @@
         let url = "api/movies/unlike/"+ $(this).attr("movie-id")+"?userId="+ $(this).attr("user-id")
         ajaxCallLike(url,button,'unlike','Немате оставено допаѓање на филмот!')
+    })
+    $(document.body).on("click",".button-add-genre-liked-list",function (){
+        let button = $(this)
+        let url = "api/genres/like/"+ $(this).attr("genre-id") + "?userId="+ $(this).attr("user-id")
+        ajaxCallLikeGenre(url,button,'like','Веќе ви се допаѓа жанрот!')
+    })
+    $(document.body).on("click",".button-remove-genre-liked-list",function (){
+        let button = $(this)
+        let url = "api/genres/unlike/"+ $(this).attr("genre-id")+"?userId="+ $(this).attr("user-id")
+        ajaxCallLikeGenre(url,button,'unlike','Немате оставено допаѓање на жанрот!')
     })
     $(".discussion-type").change(function (){
@@ -157,4 +196,5 @@
 
                 }
+                $(button).remove()
             }
             else {
@@ -180,4 +220,47 @@
     })
 }
+
+
+
+function ajaxCallLikeGenre(url,button,type,message){
+    $.ajax({
+        url:url,
+        success:function (data){
+            if (data){
+                let el = $(button).parent().siblings().eq(3)
+                console.log(el)
+                if (type=="like") {
+                    $(el).html(parseInt($(el).text()) + 1)
+                    console.log("da")
+                }
+                else
+                    $(el).html(parseInt($(el).text()) - 1)
+                $(button).css("display","none")
+                let userId = $(button).attr("user-id")
+                let genreId=$(button).attr("genre-id")
+                if (type==='like') {
+                    $(button).parent().append("<a class='btn btn-danger button-remove-genre-liked-list' genre-id=" + genreId + " user-id=" + userId + ">💔</a>")
+                    console.log("da")
+                }
+                else{
+                    $(button).parent().append("<a class='btn btn-success button-add-genre-liked-list' genre-id=" + genreId + " user-id=" + userId + ">❤</a>")
+                }
+                let likes_sibling = $("#"+genreId+"genre")
+                value_likes = Number(likes_sibling.text())
+                if(type=="like")
+                    value_likes+=1
+                else
+                    value_likes-=1
+                likes_sibling.text(value_likes)
+                $(button).remove()
+            }
+            else {
+                $(button).parent().append("<div>" + message +" <button class='button-confirm'>Ок</button></div>")
+            }
+        }
+    })
+}
+
+
 function  ajaxCallRating(url,button,type){
     model = {
Index: src/main/resources/templates/genres.html
===================================================================
--- src/main/resources/templates/genres.html	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/resources/templates/genres.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -1,23 +1,30 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col-12">
-      <div class="table-responsive">
-        <table class="table table-striped">
-          <thead>
-          <tr>
-            <th scope="col">Име</th>
-            <th scope="col">Лајкови</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr th:each="genre : ${genres}" class="elements">
-            <td th:text="${genre.getName()}"></td>
-            <td th:text="${genre.getLikes()}"></td>
+<div class="container mb-4" xmlns:sec="http://www.w3.org/1999/xhtml">
 
-          </tr>
-          </tbody>
-        </table>
+    <div class="row">
+      <div class="col-12">
+        <div class="table-responsive">
+          <table class="table table-striped">
+            <thead>
+            <tr>
+              <th scope="col">Име</th>
+              <th scope="col">Лајкови</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="genre : ${genres}" class="elements">
+              <td th:text="${genre.getName()}"></td>
+              <td th:text="${genre.getLikes()}" th:id="${genre.getGenreId()+'genre'}"></td>
+              <td>
+                <th:block sec:authorize="isAuthenticated()" th:each="g: ${allGenres}" th:if="${g.getGenreId() == genre.getGenreId()}">
+                  <a class="btn btn-success button-add-genre-liked-list" th:genre-id="${g.getGenreId()}" th:user-id="${user.getUserId()}" th:if="${!likedGenres.contains(g)}">❤</a>
+                  <a class="btn btn-danger button-remove-genre-liked-list" th:genre-id="${g.getGenreId()}" th:user-id="${user.getUserId()}" th:if="${likedGenres.contains(g)}">💔</a>
+                </th:block>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </div>
+
   </div>
 </div>
Index: src/main/resources/templates/moviesListPaged.html
===================================================================
--- src/main/resources/templates/moviesListPaged.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
+++ src/main/resources/templates/moviesListPaged.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -0,0 +1,126 @@
+<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+
+    <div style="width: 70%; margin: auto">
+        <div th:replace="fragments/searchBarName"></div>
+        <div th:replace="fragments/searchBarGenre"></div>
+
+    </div>
+
+    <div id="paging-section">
+        <div id="inner-paging" class="input-group">
+            <!--
+            <a class="btn btn-danger" id="button-sub" style="float: left; display: block">Previous</a>
+            <a class="btn btn-success" id="button-add" style="float: left; display: block">Next</a>
+            -->
+            <div class="input-group-prepend">
+                <button class="btn btn-danger" id="button-sub" >Previous</button>
+            </div>
+            <form method="get" action="" style="float: left; display: block">
+                <input type="number" class="form-control" min="1" name="page" th:value="${page}" id="pageInput">
+                <button type="submit" id="button-submit-page" class="btn btn-primary">Check page</button>
+            </form>
+
+            <div class="input-group-append">
+                <button class="btn btn-success" id="button-add" >Next</button>
+            </div>
+        </div>
+    </div><br><br><br>
+
+    <div class="container mb-4">
+        <a  sec:authorize="isAuthenticated()" th:href="@{/movies/add}">Додади нов филм</a>
+    </div>
+
+    <div class="container mb-4">
+        <div class="row" th:each="row: ${movie_rows}" >
+            <div class="col-md-3 elements" th:each="movie: ${row}" >
+                    <div class="card-body card bg-image" th:style="'background:url(' + ${movie.getImageUrl()} + ') no-repeat center #eee;'">
+                        <a class="card-text-center" style="color: white" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
+                        <h3 class="card-title title" th:text="${movie.getTitle()}"></h3>
+                            <span th:each="genre: ${movie.getGenres()}"  th:text="${genre?.getGenre()?.getGenreType()}" hidden class="card-genre"></span>
+
+                        </a>
+                        <h3 class="card-text bottom" th:text="${'Rated '+movie.getImdbRating()}"></h3>
+                        <th:block sec:authorize="isAuthenticated()">
+                            <a class="bottom-heart btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">❤</a>
+                            <a class="bottom-heart btn btn-danger button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">💔</a>
+                        </th:block>
+                    </div>
+            </div>
+        </div>
+    </div>
+    <!--<div class="container mb-4">
+        <div class="row">
+            <div class="col-12" th:if="${movies.size() > 0}">
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                        <tr>
+                            <th scope="col">Наслов</th>
+                            <th scope="col">Опис</th>
+                            <th scope="col">Датум издавање</th>
+                            <th scope="col">Допаѓања</th>
+                            <th scope="col">Жанрови</th>
+                            <th scope="col">Актери</th>
+                            <th scope="col">Режисер</th>
+                            <th  scope="col"></th>
+
+                            <th:block sec:authorize="isAuthenticated()">
+                            <th scope="col"></th>
+                            <th scope="col"></th>
+                            <th scope="col"></th>
+                            <th scope="col"></th>
+                            </th:block>
+
+
+
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr th:each="movie : ${movies}" class="elements">
+                            <td><a th:text="${movie.getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}"></a></td>
+                            <td th:text="${movie.getDescription()}"></td>
+                            <td th:text="${movie.getAiringDate()}"></td>
+                            <td th:text="${movie.getLikes() != null  ? movie.getLikes().size() : 0}">
+
+                            </td>
+                            <td class="genre">
+                                <div th:each="g: ${movie.getGenres()}" th:text="${g.getGenre().genreType }"></div>
+                            </td>
+                            <td>
+                                <div th:each="ac: ${movie.getActors()}">
+                                    <a th:href="@{'/persons/{id}' (id=${ac.getPerson().getPersonId()})}" th:text="${ac.getPerson().getName() + ' ' + ac.getPerson().getSurname()}"></a>
+                                </div>
+                            </td>
+                            <td th:if="${movie.getDirector() != null}">
+                                <a th:href="@{'/persons/{id}' (id=${movie.getDirector().getPersonId()})}" th:text="${movie.getDirector().getName() + ' ' + movie.getDirector().getSurname()}"></a>
+                            </td>
+                            <td th:if="${movie.getDirector() == null}">
+                                Филмот нема режисер.
+                            </td>
+                            <td>
+                                <a class="btn btn-primary" th:href="@{'discussions/all/{id}?type=M' (id=${movie.getMovieId()})}" >Прегледај дискусии</a>
+                            </td>
+                            <th:block sec:authorize="isAuthenticated()">
+                            <td>
+                                <a class="btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">Додади во омилена листа</a>
+                                <a class="btn btn-warning button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">Избриши од омилена листа</a>
+                            </td>
+                            <td>
+                                <a class="btn btn-success button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
+                            </td>
+                            <td>
+                                <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Измени</a>
+                            </td>
+                            <td>
+                                <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
+                            </td>
+                            </th:block>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>-->
+
+</div>
Index: src/main/resources/templates/personShow.html
===================================================================
--- src/main/resources/templates/personShow.html	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/resources/templates/personShow.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -30,3 +30,34 @@
         </div>
     </div>
+    <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
+        <h2>
+            <span>Бројот на оцени кои филмот ги добил:</span>
+            <span th:text="${movie.getRates().size()}"></span>
+        </h2>
+        <hr>
+        <div th:each="rating: ${movie.getRates()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 130px;">
+            <div style="width: 60%; float:left;">
+                <p th:text="${rating.getReason()}" style="text-align: justify"></p>
+            </div>
+            <div style="width: 30%; float:right; background-color: darkorange; border-radius: 10px 30px; color: whitesmoke; padding: 10px;">
+                <h2 style="text-align: center">Rated:</h2>
+                <p th:text="${rating.getStarsRated() + ' out of 10 stars'}" style="text-align: center"></p>
+            </div>
+        </div>
+    </div>
+    <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
+        <h2>
+            <span>Бројот на лајкови кои филмот ги добил:</span>
+            <span th:text="${movie.getLikes().size()}"></span>
+        </h2>
+        <hr>
+        <div th:each="liked: ${movie.getLikes()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 60px;">
+            <div style="width: 100%; float:left;">
+                <h3  style="text-align: center">
+                    <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
+                    <span style="color: green; font-size: 100%" >✔</span>
+                </h3>
+            </div>
+        </div>
+    </div>
 </div>
Index: src/main/resources/templates/personsList.html
===================================================================
--- src/main/resources/templates/personsList.html	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ src/main/resources/templates/personsList.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -57,4 +57,15 @@
 
                             </td>
+
+                            <a class="bottom-heart btn btn-success button-add-favourite-list"
+                               th:movie-id="${person.getMovieId()}"
+                               th:user-id="${user.getUserId()}"
+                               th:if="${!likedPersons.contains(movie)}">❤</a>
+
+                            <a class="bottom-heart btn btn-danger button-remove-favourite-list"
+                               th:movie-id="${person.getMovieId()}" th:user-id="${user.getUserId()}"
+                               th:if="${likedPersons.contains(movie)}">💔</a>
+
+
                             </th:block>
 
Index: target/classes/static/css/shared.css
===================================================================
--- target/classes/static/css/shared.css	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ target/classes/static/css/shared.css	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -70,2 +70,37 @@
     text-align: center;
 }
+
+#paging-section{
+    width: 100%;
+    clear: both;
+    margin-bottom: 30px;
+}
+
+#inner-paging{
+    width: fit-content;
+    margin: auto;
+
+}
+
+#button-sub, #button-add{
+    width: 100px;
+}
+
+#pageInput{
+    font-size: 100%;
+    text-align: center;
+    width: 175px;
+    margin: auto;
+}
+
+#button-submit-page{
+    margin: auto;
+    text-align: center;
+    margin-top: 7px;
+    display: none;
+}
+
+.visibility{
+    transition: 200ms;
+    opacity: 0;
+}
Index: target/classes/static/js/sharedScript.js
===================================================================
--- target/classes/static/js/sharedScript.js	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ target/classes/static/js/sharedScript.js	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -4,4 +4,33 @@
     var elements = $(".elements")
     var elementGrade;
+
+
+    $("#button-add").on("click", function (){
+        itemInput = $("#pageInput")
+        itemInput.val(Number(itemInput.val()) + 1);
+        $("#button-submit-page").click()
+    })
+
+    $("#button-sub").on("click", function (){
+        itemInput = $("#pageInput")
+        if(Number(itemInput.val()) > 1){
+            itemInput.val(Number(itemInput.val()) - 1);
+            $("#button-submit-page").click()
+        }
+    })
+
+    $("#searchTitle").on("keyup", function() {
+        var value = $(this).val().toLowerCase();
+        console.log(value)
+        $(".elements div a .title").filter(function() {
+            console.log($(this).text())
+            if($(this).text().toLowerCase().indexOf(value) <= -1)
+                $(this).parent().parent().parent().addClass("visibility")
+            else
+                $(this).parent().parent().parent().removeClass("visibility")
+        });
+    });
+
+
 
 
@@ -37,5 +66,5 @@
 
 
-    $(".search-button-title").on("click",function (){
+    /*$(".search-button-title").on("click",function (){
         let filter = $("#searchTitle").val()
         console.log(elements)
@@ -50,12 +79,9 @@
             }
         }
-
-    })
+    })*/
 
 
    $(".search-button").on("click",function () {
         let filter = $("#searchGenre").val()
-       console.log(elements)
-
        for (let item of elements) {
             let genre = $(item).find(".card-genre")
@@ -64,12 +90,15 @@
             for (let g of genre) {
 
-                if ($(g).text().toLowerCase() === filter.toLowerCase()) {
+                if (( $(g).text().toLowerCase() === filter.toLowerCase() && !$(g).hasClass("visibility") && filter.trim().length != 0)) {
                     visible = true
-                    $(item).css("display","block")
+                    $(item).removeClass("visibility")
                     break;
                 }
             }
-            if (!visible)
-                $(item).css("display","none")
+            if (!visible && filter.trim().length != 0)
+                $(item).addClass("visibility")
+            else
+                $(item).removeClass("visibility")
+
         }
     });
@@ -117,4 +146,14 @@
         let url = "api/movies/unlike/"+ $(this).attr("movie-id")+"?userId="+ $(this).attr("user-id")
         ajaxCallLike(url,button,'unlike','Немате оставено допаѓање на филмот!')
+    })
+    $(document.body).on("click",".button-add-genre-liked-list",function (){
+        let button = $(this)
+        let url = "api/genres/like/"+ $(this).attr("genre-id") + "?userId="+ $(this).attr("user-id")
+        ajaxCallLikeGenre(url,button,'like','Веќе ви се допаѓа жанрот!')
+    })
+    $(document.body).on("click",".button-remove-genre-liked-list",function (){
+        let button = $(this)
+        let url = "api/genres/unlike/"+ $(this).attr("genre-id")+"?userId="+ $(this).attr("user-id")
+        ajaxCallLikeGenre(url,button,'unlike','Немате оставено допаѓање на жанрот!')
     })
     $(".discussion-type").change(function (){
@@ -157,4 +196,5 @@
 
                 }
+                $(button).remove()
             }
             else {
@@ -180,4 +220,47 @@
     })
 }
+
+
+
+function ajaxCallLikeGenre(url,button,type,message){
+    $.ajax({
+        url:url,
+        success:function (data){
+            if (data){
+                let el = $(button).parent().siblings().eq(3)
+                console.log(el)
+                if (type=="like") {
+                    $(el).html(parseInt($(el).text()) + 1)
+                    console.log("da")
+                }
+                else
+                    $(el).html(parseInt($(el).text()) - 1)
+                $(button).css("display","none")
+                let userId = $(button).attr("user-id")
+                let genreId=$(button).attr("genre-id")
+                if (type==='like') {
+                    $(button).parent().append("<a class='btn btn-danger button-remove-genre-liked-list' genre-id=" + genreId + " user-id=" + userId + ">💔</a>")
+                    console.log("da")
+                }
+                else{
+                    $(button).parent().append("<a class='btn btn-success button-add-genre-liked-list' genre-id=" + genreId + " user-id=" + userId + ">❤</a>")
+                }
+                let likes_sibling = $("#"+genreId+"genre")
+                value_likes = Number(likes_sibling.text())
+                if(type=="like")
+                    value_likes+=1
+                else
+                    value_likes-=1
+                likes_sibling.text(value_likes)
+                $(button).remove()
+            }
+            else {
+                $(button).parent().append("<div>" + message +" <button class='button-confirm'>Ок</button></div>")
+            }
+        }
+    })
+}
+
+
 function  ajaxCallRating(url,button,type){
     model = {
Index: target/classes/templates/genres.html
===================================================================
--- target/classes/templates/genres.html	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ target/classes/templates/genres.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -1,23 +1,30 @@
-<div class="container mb-4">
-  <div class="row">
-    <div class="col-12">
-      <div class="table-responsive">
-        <table class="table table-striped">
-          <thead>
-          <tr>
-            <th scope="col">Име</th>
-            <th scope="col">Лајкови</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr th:each="genre : ${genres}" class="elements">
-            <td th:text="${genre.getName()}"></td>
-            <td th:text="${genre.getLikes()}"></td>
+<div class="container mb-4" xmlns:sec="http://www.w3.org/1999/xhtml">
 
-          </tr>
-          </tbody>
-        </table>
+    <div class="row">
+      <div class="col-12">
+        <div class="table-responsive">
+          <table class="table table-striped">
+            <thead>
+            <tr>
+              <th scope="col">Име</th>
+              <th scope="col">Лајкови</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="genre : ${genres}" class="elements">
+              <td th:text="${genre.getName()}"></td>
+              <td th:text="${genre.getLikes()}" th:id="${genre.getGenreId()+'genre'}"></td>
+              <td>
+                <th:block sec:authorize="isAuthenticated()" th:each="g: ${allGenres}" th:if="${g.getGenreId() == genre.getGenreId()}">
+                  <a class="btn btn-success button-add-genre-liked-list" th:genre-id="${g.getGenreId()}" th:user-id="${user.getUserId()}" th:if="${!likedGenres.contains(g)}">❤</a>
+                  <a class="btn btn-danger button-remove-genre-liked-list" th:genre-id="${g.getGenreId()}" th:user-id="${user.getUserId()}" th:if="${likedGenres.contains(g)}">💔</a>
+                </th:block>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </div>
+
   </div>
 </div>
Index: target/classes/templates/moviesListPaged.html
===================================================================
--- target/classes/templates/moviesListPaged.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
+++ target/classes/templates/moviesListPaged.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -0,0 +1,126 @@
+<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+
+    <div style="width: 70%; margin: auto">
+        <div th:replace="fragments/searchBarName"></div>
+        <div th:replace="fragments/searchBarGenre"></div>
+
+    </div>
+
+    <div id="paging-section">
+        <div id="inner-paging" class="input-group">
+            <!--
+            <a class="btn btn-danger" id="button-sub" style="float: left; display: block">Previous</a>
+            <a class="btn btn-success" id="button-add" style="float: left; display: block">Next</a>
+            -->
+            <div class="input-group-prepend">
+                <button class="btn btn-danger" id="button-sub" >Previous</button>
+            </div>
+            <form method="get" action="" style="float: left; display: block">
+                <input type="number" class="form-control" min="1" name="page" th:value="${page}" id="pageInput">
+                <button type="submit" id="button-submit-page" class="btn btn-primary">Check page</button>
+            </form>
+
+            <div class="input-group-append">
+                <button class="btn btn-success" id="button-add" >Next</button>
+            </div>
+        </div>
+    </div><br><br><br>
+
+    <div class="container mb-4">
+        <a  sec:authorize="isAuthenticated()" th:href="@{/movies/add}">Додади нов филм</a>
+    </div>
+
+    <div class="container mb-4">
+        <div class="row" th:each="row: ${movie_rows}" >
+            <div class="col-md-3 elements" th:each="movie: ${row}" >
+                    <div class="card-body card bg-image" th:style="'background:url(' + ${movie.getImageUrl()} + ') no-repeat center #eee;'">
+                        <a class="card-text-center" style="color: white" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
+                        <h3 class="card-title title" th:text="${movie.getTitle()}"></h3>
+                            <span th:each="genre: ${movie.getGenres()}"  th:text="${genre?.getGenre()?.getGenreType()}" hidden class="card-genre"></span>
+
+                        </a>
+                        <h3 class="card-text bottom" th:text="${'Rated '+movie.getImdbRating()}"></h3>
+                        <th:block sec:authorize="isAuthenticated()">
+                            <a class="bottom-heart btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">❤</a>
+                            <a class="bottom-heart btn btn-danger button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">💔</a>
+                        </th:block>
+                    </div>
+            </div>
+        </div>
+    </div>
+    <!--<div class="container mb-4">
+        <div class="row">
+            <div class="col-12" th:if="${movies.size() > 0}">
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                        <tr>
+                            <th scope="col">Наслов</th>
+                            <th scope="col">Опис</th>
+                            <th scope="col">Датум издавање</th>
+                            <th scope="col">Допаѓања</th>
+                            <th scope="col">Жанрови</th>
+                            <th scope="col">Актери</th>
+                            <th scope="col">Режисер</th>
+                            <th  scope="col"></th>
+
+                            <th:block sec:authorize="isAuthenticated()">
+                            <th scope="col"></th>
+                            <th scope="col"></th>
+                            <th scope="col"></th>
+                            <th scope="col"></th>
+                            </th:block>
+
+
+
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr th:each="movie : ${movies}" class="elements">
+                            <td><a th:text="${movie.getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}"></a></td>
+                            <td th:text="${movie.getDescription()}"></td>
+                            <td th:text="${movie.getAiringDate()}"></td>
+                            <td th:text="${movie.getLikes() != null  ? movie.getLikes().size() : 0}">
+
+                            </td>
+                            <td class="genre">
+                                <div th:each="g: ${movie.getGenres()}" th:text="${g.getGenre().genreType }"></div>
+                            </td>
+                            <td>
+                                <div th:each="ac: ${movie.getActors()}">
+                                    <a th:href="@{'/persons/{id}' (id=${ac.getPerson().getPersonId()})}" th:text="${ac.getPerson().getName() + ' ' + ac.getPerson().getSurname()}"></a>
+                                </div>
+                            </td>
+                            <td th:if="${movie.getDirector() != null}">
+                                <a th:href="@{'/persons/{id}' (id=${movie.getDirector().getPersonId()})}" th:text="${movie.getDirector().getName() + ' ' + movie.getDirector().getSurname()}"></a>
+                            </td>
+                            <td th:if="${movie.getDirector() == null}">
+                                Филмот нема режисер.
+                            </td>
+                            <td>
+                                <a class="btn btn-primary" th:href="@{'discussions/all/{id}?type=M' (id=${movie.getMovieId()})}" >Прегледај дискусии</a>
+                            </td>
+                            <th:block sec:authorize="isAuthenticated()">
+                            <td>
+                                <a class="btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">Додади во омилена листа</a>
+                                <a class="btn btn-warning button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">Избриши од омилена листа</a>
+                            </td>
+                            <td>
+                                <a class="btn btn-success button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
+                            </td>
+                            <td>
+                                <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Измени</a>
+                            </td>
+                            <td>
+                                <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
+                            </td>
+                            </th:block>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>-->
+
+</div>
Index: target/classes/templates/personShow.html
===================================================================
--- target/classes/templates/personShow.html	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ target/classes/templates/personShow.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -30,3 +30,34 @@
         </div>
     </div>
+    <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
+        <h2>
+            <span>Бројот на оцени кои филмот ги добил:</span>
+            <span th:text="${movie.getRates().size()}"></span>
+        </h2>
+        <hr>
+        <div th:each="rating: ${movie.getRates()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 130px;">
+            <div style="width: 60%; float:left;">
+                <p th:text="${rating.getReason()}" style="text-align: justify"></p>
+            </div>
+            <div style="width: 30%; float:right; background-color: darkorange; border-radius: 10px 30px; color: whitesmoke; padding: 10px;">
+                <h2 style="text-align: center">Rated:</h2>
+                <p th:text="${rating.getStarsRated() + ' out of 10 stars'}" style="text-align: center"></p>
+            </div>
+        </div>
+    </div>
+    <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
+        <h2>
+            <span>Бројот на лајкови кои филмот ги добил:</span>
+            <span th:text="${movie.getLikes().size()}"></span>
+        </h2>
+        <hr>
+        <div th:each="liked: ${movie.getLikes()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 60px;">
+            <div style="width: 100%; float:left;">
+                <h3  style="text-align: center">
+                    <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
+                    <span style="color: green; font-size: 100%" >✔</span>
+                </h3>
+            </div>
+        </div>
+    </div>
 </div>
Index: target/classes/templates/personsList.html
===================================================================
--- target/classes/templates/personsList.html	(revision 7f3655122036717700124fc482399ad0780bdf52)
+++ target/classes/templates/personsList.html	(revision 3c0f9a97ce7897bbdf19cc016cc2edaede3e204c)
@@ -57,4 +57,15 @@
 
                             </td>
+
+                            <a class="bottom-heart btn btn-success button-add-favourite-list"
+                               th:movie-id="${person.getMovieId()}"
+                               th:user-id="${user.getUserId()}"
+                               th:if="${!likedPersons.contains(movie)}">❤</a>
+
+                            <a class="bottom-heart btn btn-danger button-remove-favourite-list"
+                               th:movie-id="${person.getMovieId()}" th:user-id="${user.getUserId()}"
+                               th:if="${likedPersons.contains(movie)}">💔</a>
+
+
                             </th:block>