Index: .idea/runConfigurations.xml
===================================================================
--- .idea/runConfigurations.xml	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ .idea/runConfigurations.xml	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.android.tools.idea.compose.preview.runconfiguration.ComposePreviewRunConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>
Index: src/main/java/com/wediscussmovies/project/configuration/SecurityConfig.java
===================================================================
--- src/main/java/com/wediscussmovies/project/configuration/SecurityConfig.java	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/java/com/wediscussmovies/project/configuration/SecurityConfig.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -5,4 +5,5 @@
 import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.builders.WebSecurity;
 import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
 
@@ -15,4 +16,11 @@
     }
 
+    @Override
+    public void configure(WebSecurity web) throws Exception {
+        web.ignoring().antMatchers("/*.jpg");
+        web.ignoring().antMatchers("/*.png");
+        web.ignoring().antMatchers("/*.css");
+        web.ignoring().antMatchers("/*.js");
+    }
 
     @Override
@@ -21,5 +29,5 @@
         http.csrf().disable()
                 .authorizeRequests()
-                .antMatchers("/movies","/actors","/directors","/discussions","/replies","/register","/genres").permitAll()
+                .antMatchers("/movies","/movies/**/","/actors","/persons/**/","/directors","/discussions","/discussions/**/","/discussions/all/**/","/replies","/register","/genres").permitAll()
                 .anyRequest()
                 .authenticated()
Index: src/main/java/com/wediscussmovies/project/model/Movie.java
===================================================================
--- src/main/java/com/wediscussmovies/project/model/Movie.java	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/java/com/wediscussmovies/project/model/Movie.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -6,4 +6,5 @@
 import com.wediscussmovies.project.model.relation.MovieRates;
 import lombok.Data;
+import org.hibernate.annotations.Fetch;
 
 import javax.persistence.*;
@@ -37,5 +38,5 @@
     private Double imdbRating;
 
-    @OneToMany(mappedBy = "movie")
+    @OneToMany(mappedBy = "movie", fetch = FetchType.LAZY)
     private Collection<MovieActors> actors;
     @OneToMany(mappedBy = "movie")
Index: src/main/java/com/wediscussmovies/project/web/controller/MovieController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/MovieController.java	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/java/com/wediscussmovies/project/web/controller/MovieController.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -61,4 +61,19 @@
     }
 
+    @GetMapping("/{id}")
+    public String getMovie(@PathVariable Integer id, Model model){
+        model.addAttribute("movie", movieService.findById(id));
+
+        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+        if (!(auth instanceof AnonymousAuthenticationToken)){
+            UserDetails userDetails = (UserDetails) auth.getPrincipal();
+            User user = (User) userDetails;
+            model.addAttribute("likedMovies",this.movieService.findLikedMoviesByUser(user));
+            model.addAttribute("user",user);
+        }
+
+        model.addAttribute("contentTemplate", "movieShow");
+        return "template";
+    }
 
     @GetMapping("/add")
Index: src/main/java/com/wediscussmovies/project/web/controller/PersonController.java
===================================================================
--- src/main/java/com/wediscussmovies/project/web/controller/PersonController.java	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/java/com/wediscussmovies/project/web/controller/PersonController.java	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -45,4 +45,14 @@
         model.addAttribute("persons", persons);
         model.addAttribute("contentTemplate", "personsList");
+        return "template";
+    }
+
+    @GetMapping("/persons/{id}")
+    public String getPerson(@PathVariable Integer id, Model model){
+        Person person = personService.findById(id);
+        //Error handling, could be null!!!!!!!!!
+        model.addAttribute("person", person);
+
+        model.addAttribute("contentTemplate", "personShow");
         return "template";
     }
Index: src/main/resources/static/js/sharedScript.js
===================================================================
--- src/main/resources/static/js/sharedScript.js	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/static/js/sharedScript.js	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -4,4 +4,5 @@
     var elements = $(".elements")
     var elementGrade;
+
 
     $("#dialog-rating").dialog({
@@ -145,9 +146,9 @@
                 let movieId=$(button).attr("movie-id")
                 if (type==='like') {
-                    $(button).parent().append("<a class='btn btn-primary button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
+                    $(button).parent().append("<a class='btn btn-warning button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
                     console.log("da")
                 }
                 else{
-                    $(button).parent().append("<a class='btn btn-primary button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
+                    $(button).parent().append("<a class='btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
 
                 }
Index: src/main/resources/templates/discussion.html
===================================================================
--- src/main/resources/templates/discussion.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/discussion.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,23 +1,35 @@
 <div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <div th:text="${disc.getMovie() != null ? disc.getMovie().getTitle() : disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}"></div>
-    <div th:text="${disc.getTitle()}"></div>
-    <div th:text="${disc.getText()}"></div>
-    <div th:text="${disc.getDate()}"></div>
-    <div th:text="${disc.getUser().getUsername()}"></div>
-    <div th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a> </div>
-    <div th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </div>
-    <table class="table table-striped">
+    <div style="width: 85%; text-align: justify; margin: auto; clear: both">
+        <div>
+            <h1 th:text="${disc.getTitle()}" style="width: 80%; float: left"></h1>
+        </div>
+        <hr><br><br>
+        <div>
+            <h5 th:text="${disc.getText()}" style="width: 90%; margin: auto; background-color: lightblue; border-radius: 4px; padding: 20px"></h5>
+        </div>
+        <br><br><br>
+        <h6 style="width: 60%; float:left;">
+            <span th:text="${'Поставено од: '+disc.getUser().getUsername()}"></span>
+            <span th:text="${', на датум '+ disc.getDate()}"></span>
+            <br>
+            <span>Поставено за </span>
+            <span th:text="${disc.getMovie() != null ? 'Филмот ' + disc.getMovie().getTitle() : 'Актерот ' + disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}" ></span>
+        </h6>
+        <div style="float: right"  sec:authorize="isAuthenticated()">
+        <a th:if="${disc.getUser().equals(user)}" class="btn btn-warning" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a>
+        <a th:if="${disc.getUser().equals(user)}" class="btn btn-danger button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a>
+        <a class="btn btn-success" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a>
+        </div>
+    </div>
+    <table class="table table-striped" style="width: 70%; margin: auto;">
         <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:block  sec:authorize="isAuthenticated()">
-
                 <th scope="col"></th>
                 <th scope="col"></th>
             </th:block>
-
         </tr>
         </thead>
@@ -27,16 +39,12 @@
             <td th:text="${reply.getDate()}"></td>
             <td th:text="${reply.getUser().getUsername()}"></td>
-            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/edit/{discussionId}/{replyId}' (discussionId=${disc.getDiscussionId()},replyId=${reply.getReplyId()})}">Промени</a> </td>
-            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-primary button-delete-reply" th:reply-id="${reply.getReplyId()}" th:dicsussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
-
+            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/replies/edit/{discussionId}/{replyId}' (discussionId=${disc.getDiscussionId()},replyId=${reply.getReplyId()})}">Промени</a> </td>
+            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-danger button-delete-reply" th:reply-id="${reply.getReplyId()}" th:dicsussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
             <th:block sec:authorize="isAuthenticated()">
-                <td th:if="${!reply.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
                 <td th:if="${!reply.getUser().equals(user)}">
-                    <a class="btn btn-primary">Ми се допаѓа</a>
-                    <a class="btn btn-primary">Не ми се допаѓа</a>
+                    <a class="btn btn-success">👍 </a>
+                    <a class="btn btn-danger">👎</a>
                 </td>
             </th:block>
-
-
         </tr>
         </tbody>
Index: src/main/resources/templates/discussionForType.html
===================================================================
--- src/main/resources/templates/discussionForType.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/discussionForType.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -8,5 +8,4 @@
                         <thead>
                         <tr>
-                            <th scope="col">Наменета</th>
                             <th scope="col">Наслов</th>
                             <th scope="col">Опис</th>
@@ -26,17 +25,18 @@
                         <tbody>
                         <tr th:each="disc : ${discussions}" class="movie">
-                            <td th:text="${disc.getMovie() != null ? disc.getMovie().getTitle() : disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}"></td>
-                            <td th:text="${disc.getTitle()}"></td>
+                            <td>
+                                <a th:text="${disc.getTitle()}" th:href="@{'/discussions/{id}' (id=${disc.getDiscussionId()})}"></a>
+                            </td>
                             <td th:text="${disc.getText()}"></td>
                             <td th:text="${disc.getDate()}"></td>
                             <td th:text="${disc.getUser().getUsername()}"></td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a> </td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Измени</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-danger button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
 
                             <th:block sec:authorize="isAuthenticated()">
-                                <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
+                                <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-success" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
                                 <td th:if="${!disc.getUser().equals(user)}">
-                                    <a class="btn btn-primary">Ми се допаѓа</a>
-                                    <a class="btn btn-primary">Не ми се допаѓа</a>
+                                    <a class="btn btn-success">👍 </a>
+                                    <a class="btn btn-danger">👎</a>
                                 </td>
                             </th:block>
Index: src/main/resources/templates/discussionsList.html
===================================================================
--- src/main/resources/templates/discussionsList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/discussionsList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -10,5 +10,4 @@
                         <thead>
                         <tr>
-                            <th scope="col">Наменета</th>
                             <th scope="col">Наслов</th>
                             <th scope="col">Опис</th>
@@ -29,16 +28,18 @@
                         <tr th:each="disc : ${discussions}" class="movie">
                             <td th:text="${disc.getMovie() != null ? disc.getMovie().getTitle() : disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}"></td>
-                            <td th:text="${disc.getTitle()}"></td>
+                            <td>
+                                <a th:text="${disc.getTitle()}" th:href="@{'/discussions/{id}' (id=${disc.getDiscussionId()})}"></a>
+                            </td>
                             <td th:text="${disc.getText()}"></td>
                             <td th:text="${disc.getDate()}"></td>
                             <td th:text="${disc.getUser().getUsername()}"></td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a> </td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Измени</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-danger button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
 
                             <th:block sec:authorize="isAuthenticated()">
-                            <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
+                            <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-success" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
                             <td th:if="${!disc.getUser().equals(user)}">
-                                <a class="btn btn-primary">Ми се допаѓа</a>
-                                <a class="btn btn-primary">Не ми се допаѓа</a>
+                                <a class="btn btn-success">👍 </a>
+                                <a class="btn btn-danger">👎</a>
                             </td>
                             </th:block>
Index: src/main/resources/templates/favoriteList.html
===================================================================
--- src/main/resources/templates/favoriteList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/favoriteList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,6 +1,45 @@
-<div class="container mb-4">
+<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;
+    }
+
+    .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="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>
Index: src/main/resources/templates/fragments/header.html
===================================================================
--- src/main/resources/templates/fragments/header.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/fragments/header.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -2,5 +2,5 @@
     <nav class="navbar navbar-expand-md navbar-dark bg-dark">
         <div class="container">
-            <a class="navbar-brand" href="/">Форум за филмови</a>
+            <a class="navbar-brand" href="/movies">Форум за филмови</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
                     aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
@@ -16,5 +16,5 @@
                     </li>
                     <li class="nav-item m-auto">
-                        <a class="nav-link active" href="/directors">Директори</a>
+                        <a class="nav-link active" href="/directors">Режисери</a>
                     </li>
                     <li class="nav-item m-auto">
Index: src/main/resources/templates/fragments/searchBarGenre.html
===================================================================
--- src/main/resources/templates/fragments/searchBarGenre.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/fragments/searchBarGenre.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,4 +1,4 @@
 <div>
-      <label for="searchGenre">жанр</label>
+      <label for="searchGenre" style="width: 150px;">Пребарај по жанр</label>
         <input id="searchGenre" type="text" placeholder="жанр">
         <button class="search-button">Пребарај</button>
Index: src/main/resources/templates/fragments/searchBarName.html
===================================================================
--- src/main/resources/templates/fragments/searchBarName.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/fragments/searchBarName.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,4 +1,4 @@
 <div>
-    <label for="searchTitle">Прабарај по име</label>
+    <label for="searchTitle" style="width: 150px;">Прабарај по име</label>
     <input id="searchTitle" type="text" placeholder="име">
     <button class="search-button-title">Пребарај</button>
Index: src/main/resources/templates/movieShow.html
===================================================================
--- src/main/resources/templates/movieShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/templates/movieShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -0,0 +1,91 @@
+<style>
+    #admin-buttons button{
+        float:left;
+        margin: 20px !important;
+    }
+
+    #admin-buttons{
+        width: 60%;
+        margin: auto;
+    }
+</style>
+
+<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" style="width: 80%; margin: auto">
+    <div>
+        <div style="width: 30%; margin-right: 10px; padding:20px; border-right: 3px solid black; border-radius: 10px; float:left">
+            <img th:src="${movie.getImageUrl()}" style="width: 90%; height: auto">
+        </div>
+
+        <div style="width: 60%; margin-left: 10px; padding:20px; float:left">
+            <h1 th:text="${movie.getTitle()}" style="text-align: center; padding:10px; background-color: rgba(64,64,64,0.5); color:white; border-radius: 10px 0px"></h1>
+            <hr>
+            <h3>
+                <span>Режисер:</span>
+                <a th:if="${movie.getDirector() != null}" th:text="${movie.getDirector().getName() + ' ' + movie.getDirector().getSurname()}" th:href="@{'/persons/{id}' (id=${movie.getDirector().getPersonId()})}"></a>
+                <span th:if="${movie.getDirector() == null}"> / </span>
+            </h3>
+            <h3 th:text="${'IMDB оцена: ' + movie.getImdbRating()}"></h3>
+            <h3 th:text="${'Прикажан на: ' + movie.getAiringDate()}"></h3>
+
+            <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
+                <h3>Краток опис:</h3>
+                <p th:text="${movie.getDescription()}" style="text-align: justify"></p>
+            </div>
+
+            <div>
+                <h3>Жанрови:</h3>
+                <ul>
+                    <li th:each="genre: ${movie.getGenres()}" th:text="${genre.getGenre().getGenreType()}"></li>
+                </ul>
+            </div>
+            <div>
+                <h3>Актери:</h3>
+                <ul>
+                    <li th:each="actor: ${movie.getActors()}"><a th:text="${actor.getPerson().getName() + ' ' + actor.getPerson().getSurname()}" th:href="@{'/persons/{id}' (id=${actor.getPerson().getPersonId()})}" ></a></li>
+                </ul>
+            </div>
+
+        </div>
+    </div>
+    <div id="admin-buttons">
+        <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-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
+            <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
+        </th:block>
+    </div>
+    <hr>
+    <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/moviesList.html
===================================================================
--- src/main/resources/templates/moviesList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/moviesList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,5 +1,7 @@
 <div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <div th:replace="fragments/searchBarGenre">
 
+    <div style="width: 70%; margin: auto">
+        <div th:replace="fragments/searchBarName"></div>
+        <div th:replace="fragments/searchBarGenre"></div>
     </div>
 
@@ -16,8 +18,8 @@
                         <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 scope="col">Режисер</th>
@@ -37,6 +39,6 @@
                         <tbody>
                         <tr th:each="movie : ${movies}" class="elements">
-                            <td th:text="${movie.getTitle()}"></td>
-                            <td th:text="${movie.getDescription()}"></td>
+                            <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}">
@@ -47,7 +49,14 @@
                             </td>
                             <td>
-                                <div th:each="a: ${movie.getActors()}" th:text="${a.getPerson().getName()} "></div>
+                                <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:text="${movie.getDirector() != null ? movie.getDirector()?.getName() + ' '+ movie.getDirector()?.getSurname() : 'Не е додаен директор'}"></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>
@@ -55,16 +64,16 @@
                             <th:block sec:authorize="isAuthenticated()">
                             <td>
-                                <a class="btn btn-primary button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">Додади во омилена листа</a>
-                                <a class="btn btn-primary button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">Избриши од омилена листа</a>
+                                <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-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>
                             </td>
                             <td>
-                                <a class="btn btn-primary" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
+                                <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Измени</a>
                             </td>
                             <td>
-                                <a class="btn btn-primary button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
+                                <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
                             </td>
                             </th:block>
Index: src/main/resources/templates/personShow.html
===================================================================
--- src/main/resources/templates/personShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ src/main/resources/templates/personShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -0,0 +1,32 @@
+
+<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" style="width: 80%; margin: auto">
+    <div>
+
+        <div style="width: 60%; margin-left: 10px; padding:20px; float:left">
+            <h1 th:text="${person.getName() + ' ' + person.getSurname()}" style="text-align: center; padding:10px; background-color: rgba(64,64,64,0.5); color:white; border-radius: 10px 0px"></h1>
+            <hr>
+            <h3 th:text="${'Born on: ' + person.getDateOfBirth()}"></h3>
+            <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
+                <h3>Description:</h3>
+                <p th:text="${person.getDescription()}" style="text-align: justify"></p>
+            </div>
+
+            <div th:if="${person.getType() == 'D'}">
+                <h3 >Directed movies:</h3>
+                <ul>
+                    <li th:each="movie: ${actor.getMovies()}"><a th:text="${movie.getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" ></a></li>
+                </ul>
+            </div>
+            <div th:if="${person.getType() == 'A'}">
+                <h3 >Acted in movies:</h3>
+                <ul>
+                    <li th:each="movie: ${actor.getMovieActors()}" ><a th:text="${movie.getMovie().getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovie().getMovieId()})}" ></a></li>
+                </ul>
+            </div>
+
+        </div>
+        <div style="width: 30%; margin-left: 10px; padding:20px; border-left: 3px solid black; border-radius: 10px; float:left">
+            <img th:src="${person.getImageUrl()}" style="width: 90%; height: auto">
+        </div>
+    </div>
+</div>
Index: src/main/resources/templates/personsList.html
===================================================================
--- src/main/resources/templates/personsList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/personsList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -12,7 +12,7 @@
                         <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>
@@ -31,8 +31,8 @@
                         <tbody>
                         <tr th:each="person : ${persons}" class="elements">
-                            <td th:text="${person.getName()}"></td>
-                            <td th:text="${person.getSurname()}"></td>
+                            <td><a th:href="@{'/persons/{id}' (id=${person.getPersonId()})}" th:text="${person.getName() + ' ' + person.getSurname()}"></a></td>
+                            <!--<td th:text="${person.getSurname()}"></td>-->
                             <td th:text="${person.getDateOfBirth()}"></td>
-                            <td th:text="${person.getDescription()}"></td>
+                            <!--<td th:text="${person.getDescription()}"></td>-->
 
 <!--                            <td>-->
Index: src/main/resources/templates/template.html
===================================================================
--- src/main/resources/templates/template.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ src/main/resources/templates/template.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -3,5 +3,5 @@
 <head>
     <meta charset="UTF-8"/>
-    <title>Products</title>
+    <title>weDiscussMovies</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
@@ -18,6 +18,6 @@
 <section class="jumbotron text-center">
     <div class="container">
-        <h1 class="jumbotron-heading">WEB PROGRAMMING SHOP</h1>
-        <h3 class="jumbotron-heading">All products</h3>
+        <!--<img th:src="@{/img/logo.png}" style="opacity: 0.3; z-index: 5; position: absolute; margin: auto; height: 225px; width: auto; left: 42%; top: 2%">-->
+        <h1 class="jumbotron-heading" style="z-index: -1">weDiscussMovies</h1>
     </div>
 </section>
@@ -27,5 +27,4 @@
     <h1 class="danger" th:text="${error?.toString()}"></h1>
 </div>
-<div th:replace="fragments/searchBarName"></div>
 <section th:include="${contentTemplate}"></section>
 <div id="dialog-rating" style="display: none">
Index: target/classes/static/js/sharedScript.js
===================================================================
--- target/classes/static/js/sharedScript.js	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/static/js/sharedScript.js	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -4,4 +4,5 @@
     var elements = $(".elements")
     var elementGrade;
+
 
     $("#dialog-rating").dialog({
@@ -145,9 +146,9 @@
                 let movieId=$(button).attr("movie-id")
                 if (type==='like') {
-                    $(button).parent().append("<a class='btn btn-primary button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
+                    $(button).parent().append("<a class='btn btn-warning button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
                     console.log("da")
                 }
                 else{
-                    $(button).parent().append("<a class='btn btn-primary button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
+                    $(button).parent().append("<a class='btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
 
                 }
Index: target/classes/templates/discussion.html
===================================================================
--- target/classes/templates/discussion.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/discussion.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,23 +1,35 @@
 <div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <div th:text="${disc.getMovie() != null ? disc.getMovie().getTitle() : disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}"></div>
-    <div th:text="${disc.getTitle()}"></div>
-    <div th:text="${disc.getText()}"></div>
-    <div th:text="${disc.getDate()}"></div>
-    <div th:text="${disc.getUser().getUsername()}"></div>
-    <div th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a> </div>
-    <div th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </div>
-    <table class="table table-striped">
+    <div style="width: 85%; text-align: justify; margin: auto; clear: both">
+        <div>
+            <h1 th:text="${disc.getTitle()}" style="width: 80%; float: left"></h1>
+        </div>
+        <hr><br><br>
+        <div>
+            <h5 th:text="${disc.getText()}" style="width: 90%; margin: auto; background-color: lightblue; border-radius: 4px; padding: 20px"></h5>
+        </div>
+        <br><br><br>
+        <h6 style="width: 60%; float:left;">
+            <span th:text="${'Поставено од: '+disc.getUser().getUsername()}"></span>
+            <span th:text="${', на датум '+ disc.getDate()}"></span>
+            <br>
+            <span>Поставено за </span>
+            <span th:text="${disc.getMovie() != null ? 'Филмот ' + disc.getMovie().getTitle() : 'Актерот ' + disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}" ></span>
+        </h6>
+        <div style="float: right"  sec:authorize="isAuthenticated()">
+        <a th:if="${disc.getUser().equals(user)}" class="btn btn-warning" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a>
+        <a th:if="${disc.getUser().equals(user)}" class="btn btn-danger button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a>
+        <a class="btn btn-success" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a>
+        </div>
+    </div>
+    <table class="table table-striped" style="width: 70%; margin: auto;">
         <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:block  sec:authorize="isAuthenticated()">
-
                 <th scope="col"></th>
                 <th scope="col"></th>
             </th:block>
-
         </tr>
         </thead>
@@ -27,16 +39,12 @@
             <td th:text="${reply.getDate()}"></td>
             <td th:text="${reply.getUser().getUsername()}"></td>
-            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/edit/{discussionId}/{replyId}' (discussionId=${disc.getDiscussionId()},replyId=${reply.getReplyId()})}">Промени</a> </td>
-            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-primary button-delete-reply" th:reply-id="${reply.getReplyId()}" th:dicsussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
-
+            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/replies/edit/{discussionId}/{replyId}' (discussionId=${disc.getDiscussionId()},replyId=${reply.getReplyId()})}">Промени</a> </td>
+            <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-danger button-delete-reply" th:reply-id="${reply.getReplyId()}" th:dicsussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
             <th:block sec:authorize="isAuthenticated()">
-                <td th:if="${!reply.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
                 <td th:if="${!reply.getUser().equals(user)}">
-                    <a class="btn btn-primary">Ми се допаѓа</a>
-                    <a class="btn btn-primary">Не ми се допаѓа</a>
+                    <a class="btn btn-success">👍 </a>
+                    <a class="btn btn-danger">👎</a>
                 </td>
             </th:block>
-
-
         </tr>
         </tbody>
Index: target/classes/templates/discussionForType.html
===================================================================
--- target/classes/templates/discussionForType.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/discussionForType.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -8,5 +8,4 @@
                         <thead>
                         <tr>
-                            <th scope="col">Наменета</th>
                             <th scope="col">Наслов</th>
                             <th scope="col">Опис</th>
@@ -26,17 +25,18 @@
                         <tbody>
                         <tr th:each="disc : ${discussions}" class="movie">
-                            <td th:text="${disc.getMovie() != null ? disc.getMovie().getTitle() : disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}"></td>
-                            <td th:text="${disc.getTitle()}"></td>
+                            <td>
+                                <a th:text="${disc.getTitle()}" th:href="@{'/discussions/{id}' (id=${disc.getDiscussionId()})}"></a>
+                            </td>
                             <td th:text="${disc.getText()}"></td>
                             <td th:text="${disc.getDate()}"></td>
                             <td th:text="${disc.getUser().getUsername()}"></td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a> </td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Измени</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-danger button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
 
                             <th:block sec:authorize="isAuthenticated()">
-                                <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
+                                <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-success" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
                                 <td th:if="${!disc.getUser().equals(user)}">
-                                    <a class="btn btn-primary">Ми се допаѓа</a>
-                                    <a class="btn btn-primary">Не ми се допаѓа</a>
+                                    <a class="btn btn-success">👍 </a>
+                                    <a class="btn btn-danger">👎</a>
                                 </td>
                             </th:block>
Index: target/classes/templates/discussionsList.html
===================================================================
--- target/classes/templates/discussionsList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/discussionsList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -10,5 +10,4 @@
                         <thead>
                         <tr>
-                            <th scope="col">Наменета</th>
                             <th scope="col">Наслов</th>
                             <th scope="col">Опис</th>
@@ -29,16 +28,18 @@
                         <tr th:each="disc : ${discussions}" class="movie">
                             <td th:text="${disc.getMovie() != null ? disc.getMovie().getTitle() : disc.getPerson().getName() + ' ' + disc.getPerson().getSurname()}"></td>
-                            <td th:text="${disc.getTitle()}"></td>
+                            <td>
+                                <a th:text="${disc.getTitle()}" th:href="@{'/discussions/{id}' (id=${disc.getDiscussionId()})}"></a>
+                            </td>
                             <td th:text="${disc.getText()}"></td>
                             <td th:text="${disc.getDate()}"></td>
                             <td th:text="${disc.getUser().getUsername()}"></td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Промени</a> </td>
-                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-primary button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/discussions/add/{id}' (id=${disc.getDiscussionId()})}">Измени</a> </td>
+                            <td th:if="${disc.getUser().equals(user)}"><a class="btn btn-danger button-delete-discussion" th:discussion-id="${disc.getDiscussionId()}">Избриши</a> </td>
 
                             <th:block sec:authorize="isAuthenticated()">
-                            <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-primary" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
+                            <td th:if="${!disc.getUser().equals(user)}"><a class="btn btn-success" th:href="@{'/replies/add/{discussionId}' (discussionId=${disc.getDiscussionId()})}">Реплицирај</a> </td>
                             <td th:if="${!disc.getUser().equals(user)}">
-                                <a class="btn btn-primary">Ми се допаѓа</a>
-                                <a class="btn btn-primary">Не ми се допаѓа</a>
+                                <a class="btn btn-success">👍 </a>
+                                <a class="btn btn-danger">👎</a>
                             </td>
                             </th:block>
Index: target/classes/templates/favoriteList.html
===================================================================
--- target/classes/templates/favoriteList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/favoriteList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,6 +1,45 @@
-<div class="container mb-4">
+<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;
+    }
+
+    .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="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>
Index: target/classes/templates/fragments/header.html
===================================================================
--- target/classes/templates/fragments/header.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/fragments/header.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -2,5 +2,5 @@
     <nav class="navbar navbar-expand-md navbar-dark bg-dark">
         <div class="container">
-            <a class="navbar-brand" href="/">Форум за филмови</a>
+            <a class="navbar-brand" href="/movies">Форум за филмови</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
                     aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
@@ -16,5 +16,5 @@
                     </li>
                     <li class="nav-item m-auto">
-                        <a class="nav-link active" href="/directors">Директори</a>
+                        <a class="nav-link active" href="/directors">Режисери</a>
                     </li>
                     <li class="nav-item m-auto">
Index: target/classes/templates/fragments/searchBarGenre.html
===================================================================
--- target/classes/templates/fragments/searchBarGenre.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/fragments/searchBarGenre.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,4 +1,4 @@
 <div>
-      <label for="searchGenre">жанр</label>
+      <label for="searchGenre" style="width: 150px;">Пребарај по жанр</label>
         <input id="searchGenre" type="text" placeholder="жанр">
         <button class="search-button">Пребарај</button>
Index: target/classes/templates/fragments/searchBarName.html
===================================================================
--- target/classes/templates/fragments/searchBarName.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/fragments/searchBarName.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,4 +1,4 @@
 <div>
-    <label for="searchTitle">Прабарај по име</label>
+    <label for="searchTitle" style="width: 150px;">Прабарај по име</label>
     <input id="searchTitle" type="text" placeholder="име">
     <button class="search-button-title">Пребарај</button>
Index: target/classes/templates/movieShow.html
===================================================================
--- target/classes/templates/movieShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/templates/movieShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -0,0 +1,91 @@
+<style>
+    #admin-buttons button{
+        float:left;
+        margin: 20px !important;
+    }
+
+    #admin-buttons{
+        width: 60%;
+        margin: auto;
+    }
+</style>
+
+<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" style="width: 80%; margin: auto">
+    <div>
+        <div style="width: 30%; margin-right: 10px; padding:20px; border-right: 3px solid black; border-radius: 10px; float:left">
+            <img th:src="${movie.getImageUrl()}" style="width: 90%; height: auto">
+        </div>
+
+        <div style="width: 60%; margin-left: 10px; padding:20px; float:left">
+            <h1 th:text="${movie.getTitle()}" style="text-align: center; padding:10px; background-color: rgba(64,64,64,0.5); color:white; border-radius: 10px 0px"></h1>
+            <hr>
+            <h3>
+                <span>Режисер:</span>
+                <a th:if="${movie.getDirector() != null}" th:text="${movie.getDirector().getName() + ' ' + movie.getDirector().getSurname()}" th:href="@{'/persons/{id}' (id=${movie.getDirector().getPersonId()})}"></a>
+                <span th:if="${movie.getDirector() == null}"> / </span>
+            </h3>
+            <h3 th:text="${'IMDB оцена: ' + movie.getImdbRating()}"></h3>
+            <h3 th:text="${'Прикажан на: ' + movie.getAiringDate()}"></h3>
+
+            <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
+                <h3>Краток опис:</h3>
+                <p th:text="${movie.getDescription()}" style="text-align: justify"></p>
+            </div>
+
+            <div>
+                <h3>Жанрови:</h3>
+                <ul>
+                    <li th:each="genre: ${movie.getGenres()}" th:text="${genre.getGenre().getGenreType()}"></li>
+                </ul>
+            </div>
+            <div>
+                <h3>Актери:</h3>
+                <ul>
+                    <li th:each="actor: ${movie.getActors()}"><a th:text="${actor.getPerson().getName() + ' ' + actor.getPerson().getSurname()}" th:href="@{'/persons/{id}' (id=${actor.getPerson().getPersonId()})}" ></a></li>
+                </ul>
+            </div>
+
+        </div>
+    </div>
+    <div id="admin-buttons">
+        <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-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
+            <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
+        </th:block>
+    </div>
+    <hr>
+    <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/moviesList.html
===================================================================
--- target/classes/templates/moviesList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/moviesList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -1,5 +1,7 @@
 <div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <div th:replace="fragments/searchBarGenre">
 
+    <div style="width: 70%; margin: auto">
+        <div th:replace="fragments/searchBarName"></div>
+        <div th:replace="fragments/searchBarGenre"></div>
     </div>
 
@@ -16,8 +18,8 @@
                         <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 scope="col">Режисер</th>
@@ -37,6 +39,6 @@
                         <tbody>
                         <tr th:each="movie : ${movies}" class="elements">
-                            <td th:text="${movie.getTitle()}"></td>
-                            <td th:text="${movie.getDescription()}"></td>
+                            <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}">
@@ -47,7 +49,14 @@
                             </td>
                             <td>
-                                <div th:each="a: ${movie.getActors()}" th:text="${a.getPerson().getName()} "></div>
+                                <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:text="${movie.getDirector() != null ? movie.getDirector()?.getName() + ' '+ movie.getDirector()?.getSurname() : 'Не е додаен директор'}"></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>
@@ -55,16 +64,16 @@
                             <th:block sec:authorize="isAuthenticated()">
                             <td>
-                                <a class="btn btn-primary button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">Додади во омилена листа</a>
-                                <a class="btn btn-primary button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">Избриши од омилена листа</a>
+                                <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-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>
                             </td>
                             <td>
-                                <a class="btn btn-primary" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
+                                <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Измени</a>
                             </td>
                             <td>
-                                <a class="btn btn-primary button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
+                                <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
                             </td>
                             </th:block>
Index: target/classes/templates/personShow.html
===================================================================
--- target/classes/templates/personShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
+++ target/classes/templates/personShow.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -0,0 +1,32 @@
+
+<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" style="width: 80%; margin: auto">
+    <div>
+
+        <div style="width: 60%; margin-left: 10px; padding:20px; float:left">
+            <h1 th:text="${person.getName() + ' ' + person.getSurname()}" style="text-align: center; padding:10px; background-color: rgba(64,64,64,0.5); color:white; border-radius: 10px 0px"></h1>
+            <hr>
+            <h3 th:text="${'Born on: ' + person.getDateOfBirth()}"></h3>
+            <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
+                <h3>Description:</h3>
+                <p th:text="${person.getDescription()}" style="text-align: justify"></p>
+            </div>
+
+            <div th:if="${person.getType() == 'D'}">
+                <h3 >Directed movies:</h3>
+                <ul>
+                    <li th:each="movie: ${actor.getMovies()}"><a th:text="${movie.getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" ></a></li>
+                </ul>
+            </div>
+            <div th:if="${person.getType() == 'A'}">
+                <h3 >Acted in movies:</h3>
+                <ul>
+                    <li th:each="movie: ${actor.getMovieActors()}" ><a th:text="${movie.getMovie().getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovie().getMovieId()})}" ></a></li>
+                </ul>
+            </div>
+
+        </div>
+        <div style="width: 30%; margin-left: 10px; padding:20px; border-left: 3px solid black; border-radius: 10px; float:left">
+            <img th:src="${person.getImageUrl()}" style="width: 90%; height: auto">
+        </div>
+    </div>
+</div>
Index: target/classes/templates/personsList.html
===================================================================
--- target/classes/templates/personsList.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/personsList.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -12,7 +12,7 @@
                         <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>
@@ -31,8 +31,8 @@
                         <tbody>
                         <tr th:each="person : ${persons}" class="elements">
-                            <td th:text="${person.getName()}"></td>
-                            <td th:text="${person.getSurname()}"></td>
+                            <td><a th:href="@{'/persons/{id}' (id=${person.getPersonId()})}" th:text="${person.getName() + ' ' + person.getSurname()}"></a></td>
+                            <!--<td th:text="${person.getSurname()}"></td>-->
                             <td th:text="${person.getDateOfBirth()}"></td>
-                            <td th:text="${person.getDescription()}"></td>
+                            <!--<td th:text="${person.getDescription()}"></td>-->
 
 <!--                            <td>-->
Index: target/classes/templates/template.html
===================================================================
--- target/classes/templates/template.html	(revision 5b447b0d2e718cbed66c944e78e18dd0a5d8bbe3)
+++ target/classes/templates/template.html	(revision f25e8dd2951fa6a4f137647ddf715ff7c799d638)
@@ -3,5 +3,5 @@
 <head>
     <meta charset="UTF-8"/>
-    <title>Products</title>
+    <title>weDiscussMovies</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
@@ -18,6 +18,6 @@
 <section class="jumbotron text-center">
     <div class="container">
-        <h1 class="jumbotron-heading">WEB PROGRAMMING SHOP</h1>
-        <h3 class="jumbotron-heading">All products</h3>
+        <!--<img th:src="@{/img/logo.png}" style="opacity: 0.3; z-index: 5; position: absolute; margin: auto; height: 225px; width: auto; left: 42%; top: 2%">-->
+        <h1 class="jumbotron-heading" style="z-index: -1">weDiscussMovies</h1>
     </div>
 </section>
@@ -27,5 +27,4 @@
     <h1 class="danger" th:text="${error?.toString()}"></h1>
 </div>
-<div th:replace="fragments/searchBarName"></div>
 <section th:include="${contentTemplate}"></section>
 <div id="dialog-rating" style="display: none">
