Index: src/main/java/com/wediscussmovies/project/configuration/SecurityConfig.java
===================================================================
--- src/main/java/com/wediscussmovies/project/configuration/SecurityConfig.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/java/com/wediscussmovies/project/configuration/SecurityConfig.java	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -29,5 +29,5 @@
         http.csrf().disable()
                 .authorizeRequests()
-                .antMatchers("/movies","/movies/**/","/actors","/persons/**/","/directors","/discussions","/discussions/**/","/discussions/all/**/","/replies","/register","/genres").permitAll()
+                .antMatchers("/movies","/movies/**/","/actors","/persons/**/","/directors","/discussions","/discussions/**/","/discussions/all/**/","/replies","/register","/genres", "/css/**", "/js/**").permitAll()
                 .anyRequest()
                 .authenticated()
Index: src/main/java/com/wediscussmovies/project/web/controller/MovieController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/MovieController.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/java/com/wediscussmovies/project/web/controller/MovieController.java	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -1,4 +1,5 @@
 package com.wediscussmovies.project.web.controller;
 
+import com.wediscussmovies.project.LoggedUser;
 import com.wediscussmovies.project.model.Movie;
 import com.wediscussmovies.project.model.Person;
@@ -19,4 +20,5 @@
 import java.sql.Date;
 import java.time.LocalDate;
+import java.util.ArrayList;
 import java.util.List;
 
@@ -53,6 +55,14 @@
           model.addAttribute("user",user);
         }
-
+        List<Movie> movieList = movies;
+        List<List<Movie>> movie_rows = new ArrayList<>();
+        for(int i=0; i<movieList.size(); i+=4){
+            int j = i+4;
+            if(j>movieList.size())
+                j=movieList.size();
+            movie_rows.add(movieList.subList(i, j));
+        }
         model.addAttribute("movies", movies);
+        model.addAttribute("movie_rows", movie_rows);
         model.addAttribute("contentTemplate", "moviesList");
         if (error != null && !error.equals(" "))
Index: src/main/java/com/wediscussmovies/project/web/controller/UsersController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/UsersController.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/java/com/wediscussmovies/project/web/controller/UsersController.java	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -3,4 +3,5 @@
 
 import com.wediscussmovies.project.LoggedUser;
+import com.wediscussmovies.project.model.Movie;
 import com.wediscussmovies.project.model.exception.InvalidArgumentsException;
 import com.wediscussmovies.project.model.exception.PasswordsDoNotMatchException;
@@ -13,4 +14,7 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
+
+import java.util.ArrayList;
+import java.util.List;
 
 @Controller
@@ -59,5 +63,13 @@
     @GetMapping("/favoriteList")
     public String getFavoriteList(Model model){
-        model.addAttribute("movies",this.movieService.findLikedMoviesByUser(LoggedUser.getLoggedUser()));
+        List<Movie> movieList = this.movieService.findLikedMoviesByUser(LoggedUser.getLoggedUser());
+        List<List<Movie>> movie_rows = new ArrayList<>();
+        for(int i=0; i<movieList.size(); i+=4){
+            int j = i+4;
+            if(j>movieList.size())
+                j= movieList.size();
+            movie_rows.add(movieList.subList(i, j));
+        }
+        model.addAttribute("movie_rows", movie_rows);
         model.addAttribute("contentTemplate","favoriteList");
         return "template";
Index: src/main/resources/static/css/shared.css
===================================================================
--- src/main/resources/static/css/shared.css	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/static/css/shared.css	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -2,2 +2,70 @@
     max-width: 5vw;
 }
+
+.row{
+    height: 300px;
+    margin-bottom: 15px;
+}
+
+.row div{
+    height: 100%;
+}
+
+.row div div{
+    height: 100%;
+}
+
+.card{
+    background-size: 100vh auto;
+    float:left;
+    margin: 7px;
+    border-radius: 10px;
+    padding: 20px;
+    color: white;
+    -webkit-text-stroke-width: 1px !important;
+    -webkit-text-stroke-color: black !important;
+    width: 90%;
+    height: 90%;
+    box-shadow: 4px 4px 4px rgba(128,128,128,1);
+}
+
+.card a h3{
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: black;
+    color:white;
+    transition: 100ms;
+}
+
+.card:hover a h3{
+    transition: 400ms;
+    color:black;
+    -webkit-text-stroke-color: white;
+}
+
+.title{
+    text-align: center;
+    background-color: rgba(0,0,0,0.25);
+    border-radius: 10px 10px 0px 0px;
+    padding: 10px;
+}
+
+.bottom{
+    position: absolute;
+    top: 80%;
+    margin:auto;
+    width: 100%;
+    left: 0%;
+    border-radius: 0px;
+    text-align: center;
+    background-color: rgba(0,0,0,0.25);
+}
+
+
+.bottom-heart{
+    top: 60%;
+    left: auto;
+    position: absolute;
+    margin: auto;
+    width: 20%;
+    text-align: center;
+}
Index: src/main/resources/static/js/sharedScript.js
===================================================================
--- src/main/resources/static/js/sharedScript.js	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/static/js/sharedScript.js	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -146,9 +146,9 @@
                 let movieId=$(button).attr("movie-id")
                 if (type==='like') {
-                    $(button).parent().append("<a class='btn btn-warning button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
+                    $(button).parent().append("<a class='bottom-heart btn btn-danger button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">💔</a>")
                     console.log("da")
                 }
                 else{
-                    $(button).parent().append("<a class='btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
+                    $(button).parent().append("<a class='bottom-heart btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">❤</a>")
 
                 }
Index: src/main/resources/templates/favoriteList.html
===================================================================
--- src/main/resources/templates/favoriteList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/templates/favoriteList.html	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -1,45 +1,17 @@
-<style>
-    .card{
-        background-size: 200px 300px;
-        background-repeat: no-repeat;
-        float:left;
-        margin: 7px;
-        min-height: 270px;
-        border-radius: 10px;
-        padding: 20px;
-        color: white;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: black;
-    }
+<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+    <div class="row" th:each="row: ${movie_rows}" >
+        <div class="col-md-3" th:each="movie: ${row}" >
+            <a class="card-text-center" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
+                    <div class="card-body card bg-image" th:style="'background:url(' + ${movie.getImageUrl()} + ') no-repeat center #eee;'">
+                        <h3 class="card-title title" th:text="${movie.getTitle()}"></h3>
+                        <h3 class="card-text bottom" th:text="${'Rated '+movie.getImdbRating()}"></h3>
+                    </div>
+            </a>
+        </div>
+    </div>
 
-    .card h4{
-        text-align: center;
-        background-color: rgba(255,255,255,0.7);
-        border-radius: 5px;
-    }
-
-    .card h3{
-        position: absolute;
-        top: 85%;
-        margin:auto;
-        width: 100%;
-        left: 0%;
-        border-radius: 10px;
-        text-align: center;
-        background-color: rgba(255,255,255,0.7);
-    }
-</style>
-
-
-<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <div class="row">
+    <!--<div class="row">
         <div class="col-12" th:if="${movies.size() > 0}">
             <div class="table-responsive">
-                <a th:each="movie: ${movies}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
-                    <div class="col-2 card" th:style="'background:url(' + ${movie.getImageUrl()} + ');'">
-                        <h4 th:text="${movie.getTitle()}"></h4>
-                        <h3 th:text="${movie.getImdbRating()}"></h3>
-                    </div>
-                </a>
                 <table class="table table-striped">
                     <thead>
@@ -78,4 +50,4 @@
             </div>
         </div>
-    </div>
+    </div>-->
 </div>
Index: src/main/resources/templates/movieShow.html
===================================================================
--- src/main/resources/templates/movieShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/templates/movieShow.html	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -49,8 +49,9 @@
     </div>
     <div id="admin-buttons">
+        <a class="btn btn-primary" th:href="@{'/discussions/all/{id}?type=M' (id=${movie.getMovieId()})}" >Прегледај дискусии</a>
         <th:block sec:authorize="isAuthenticated()" >
             <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>
-            <a class="btn btn-primary button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
+            <a class="btn btn-success button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
             <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
             <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
Index: src/main/resources/templates/moviesList.html
===================================================================
--- src/main/resources/templates/moviesList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/templates/moviesList.html	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -11,4 +11,20 @@
 
     <div class="container mb-4">
+        <div class="row" th:each="row: ${movie_rows}" >
+            <div class="col-md-3" 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>
+                        </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}">
@@ -18,5 +34,5 @@
                         <tr>
                             <th scope="col">Наслов</th>
-                            <!--<th scope="col">Опис</th>-->
+                            <th scope="col">Опис</th>
                             <th scope="col">Датум издавање</th>
                             <th scope="col">Допаѓања</th>
@@ -40,5 +56,5 @@
                         <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.getDescription()}"></td>
                             <td th:text="${movie.getAiringDate()}"></td>
                             <td th:text="${movie.getLikes() != null  ? movie.getLikes().size() : 0}">
@@ -66,5 +82,4 @@
                                 <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>
@@ -84,5 +99,5 @@
             </div>
         </div>
-    </div>
+    </div>-->
 
 </div>
Index: target/classes/static/css/shared.css
===================================================================
--- target/classes/static/css/shared.css	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/static/css/shared.css	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -2,2 +2,70 @@
     max-width: 5vw;
 }
+
+.row{
+    height: 300px;
+    margin-bottom: 15px;
+}
+
+.row div{
+    height: 100%;
+}
+
+.row div div{
+    height: 100%;
+}
+
+.card{
+    background-size: 100vh auto;
+    float:left;
+    margin: 7px;
+    border-radius: 10px;
+    padding: 20px;
+    color: white;
+    -webkit-text-stroke-width: 1px !important;
+    -webkit-text-stroke-color: black !important;
+    width: 90%;
+    height: 90%;
+    box-shadow: 4px 4px 4px rgba(128,128,128,1);
+}
+
+.card a h3{
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: black;
+    color:white;
+    transition: 100ms;
+}
+
+.card:hover a h3{
+    transition: 400ms;
+    color:black;
+    -webkit-text-stroke-color: gray;
+}
+
+.title{
+    text-align: center;
+    background-color: rgba(0,0,0,0.25);
+    border-radius: 10px 10px 0px 0px;
+    padding: 10px;
+}
+
+.bottom{
+    position: absolute;
+    top: 80%;
+    margin:auto;
+    width: 100%;
+    left: 0%;
+    border-radius: 0px;
+    text-align: center;
+    background-color: rgba(0,0,0,0.25);
+}
+
+
+.bottom-heart{
+    top: 60%;
+    left: auto;
+    position: absolute;
+    margin: auto;
+    width: 20%;
+    text-align: center;
+}
Index: target/classes/static/js/sharedScript.js
===================================================================
--- target/classes/static/js/sharedScript.js	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/static/js/sharedScript.js	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -146,9 +146,9 @@
                 let movieId=$(button).attr("movie-id")
                 if (type==='like') {
-                    $(button).parent().append("<a class='btn btn-warning button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
+                    $(button).parent().append("<a class='bottom-heart btn btn-danger button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">💔</a>")
                     console.log("da")
                 }
                 else{
-                    $(button).parent().append("<a class='btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
+                    $(button).parent().append("<a class='bottom-heart btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">❤</a>")
 
                 }
Index: target/classes/templates/favoriteList.html
===================================================================
--- target/classes/templates/favoriteList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/templates/favoriteList.html	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -1,45 +1,17 @@
-<style>
-    .card{
-        background-size: 200px 300px;
-        background-repeat: no-repeat;
-        float:left;
-        margin: 7px;
-        min-height: 270px;
-        border-radius: 10px;
-        padding: 20px;
-        color: white;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-stroke-color: black;
-    }
+<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+    <div class="row" th:each="row: ${movie_rows}" >
+        <div class="col-md-3" th:each="movie: ${row}" >
+            <a class="card-text-center" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
+                    <div class="card-body card bg-image" th:style="'background:url(' + ${movie.getImageUrl()} + ') no-repeat center #eee;'">
+                        <h3 class="card-title title" th:text="${movie.getTitle()}"></h3>
+                        <h3 class="card-text bottom" th:text="${'Rated '+movie.getImdbRating()}"></h3>
+                    </div>
+            </a>
+        </div>
+    </div>
 
-    .card h4{
-        text-align: center;
-        background-color: rgba(255,255,255,0.7);
-        border-radius: 5px;
-    }
-
-    .card h3{
-        position: absolute;
-        top: 85%;
-        margin:auto;
-        width: 100%;
-        left: 0%;
-        border-radius: 10px;
-        text-align: center;
-        background-color: rgba(255,255,255,0.7);
-    }
-</style>
-
-
-<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <div class="row">
+    <!--<div class="row">
         <div class="col-12" th:if="${movies.size() > 0}">
             <div class="table-responsive">
-                <a th:each="movie: ${movies}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
-                    <div class="col-2 card" th:style="'background:url(' + ${movie.getImageUrl()} + ');'">
-                        <h4 th:text="${movie.getTitle()}"></h4>
-                        <h3 th:text="${movie.getImdbRating()}"></h3>
-                    </div>
-                </a>
                 <table class="table table-striped">
                     <thead>
@@ -78,4 +50,4 @@
             </div>
         </div>
-    </div>
+    </div>-->
 </div>
Index: target/classes/templates/movieShow.html
===================================================================
--- target/classes/templates/movieShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/templates/movieShow.html	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -49,8 +49,9 @@
     </div>
     <div id="admin-buttons">
+        <a class="btn btn-primary" th:href="@{'/discussions/all/{id}?type=M' (id=${movie.getMovieId()})}" >Прегледај дискусии</a>
         <th:block sec:authorize="isAuthenticated()" >
             <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>
-            <a class="btn btn-primary button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
+            <a class="btn btn-success button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
             <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
             <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
Index: target/classes/templates/moviesList.html
===================================================================
--- target/classes/templates/moviesList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/templates/moviesList.html	(revision 2efe93e6443168a68d51579962ac90a4d618179b)
@@ -11,4 +11,20 @@
 
     <div class="container mb-4">
+        <div class="row" th:each="row: ${movie_rows}" >
+            <div class="col-md-3" 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>
+                        </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}">
@@ -18,5 +34,5 @@
                         <tr>
                             <th scope="col">Наслов</th>
-                            <!--<th scope="col">Опис</th>-->
+                            <th scope="col">Опис</th>
                             <th scope="col">Датум издавање</th>
                             <th scope="col">Допаѓања</th>
@@ -40,5 +56,5 @@
                         <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.getDescription()}"></td>
                             <td th:text="${movie.getAiringDate()}"></td>
                             <td th:text="${movie.getLikes() != null  ? movie.getLikes().size() : 0}">
@@ -66,5 +82,4 @@
                                 <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>
@@ -84,5 +99,5 @@
             </div>
         </div>
-    </div>
+    </div>-->
 
 </div>