Index: src/main/java/com/example/moviezone/config/WebSecurityConfig.java
===================================================================
--- src/main/java/com/example/moviezone/config/WebSecurityConfig.java	(revision f9cc55582c02fa97aae4ea5ba53abfc2240d0230)
+++ src/main/java/com/example/moviezone/config/WebSecurityConfig.java	(revision a69d48c37eb6b6e86bf35724845212d0acde4bca)
@@ -32,5 +32,5 @@
         http.csrf().disable()
                 .authorizeRequests()
-                .antMatchers("/","/home/getFilm/**", "/home", "/assets/**", "/register", "/api/**").permitAll()
+                .antMatchers("/","/**","/home/getFilm/**","/films","/projections" ,"/home", "/assets/**", "/register", "/api/**").permitAll()
                 .antMatchers("/admin/**").hasRole("ADMIN")
                 .anyRequest()
Index: src/main/java/com/example/moviezone/service/Impl/UserServiceImpl.java
===================================================================
--- src/main/java/com/example/moviezone/service/Impl/UserServiceImpl.java	(revision f9cc55582c02fa97aae4ea5ba53abfc2240d0230)
+++ src/main/java/com/example/moviezone/service/Impl/UserServiceImpl.java	(revision a69d48c37eb6b6e86bf35724845212d0acde4bca)
@@ -56,7 +56,7 @@
        if(role.equals(Role.ROLE_ADMIN))
         {
-            Worker worker=new Worker(passwordEncoder.encode(password),first_name,last_name,username,email,number);
-            workerRepository.save(worker);
-            return userRepository.save(worker);
+            User user= new User(passwordEncoder.encode(password),first_name,last_name,username,email,number);
+            workerRepository.save((Worker) user);
+            return userRepository.save(user);
         }
         else
Index: src/main/resources/templates/events.html
===================================================================
--- src/main/resources/templates/events.html	(revision f9cc55582c02fa97aae4ea5ba53abfc2240d0230)
+++ src/main/resources/templates/events.html	(revision a69d48c37eb6b6e86bf35724845212d0acde4bca)
@@ -1,10 +1,216 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>
+<style xmlns:sec="http://www.w3.org/1999/xhtml">
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+
+    *{
+        font-family: 'Poppins', sans-serif;
+    }
+
+
+    .container{
+
+        position: relative;
+    }
+
+    .container .card{
+        position: relative;
+        width: 250px;
+        height: 300px;
+        background: #232323;
+        border-radius: 20px;
+        overflow: hidden;
+    }
+
+    .container .card:before{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: black;
+        transition: 0.5s ease-in-out;
+    }
+
+
+    .container .card:after{
+        position: absolute;
+
+        font-size: 6em;
+        font-weight: 600;
+        font-style: italic;
+        color: rgba(255,255,25,0.05)
+    }
+
+    .container .card .imgBx{
+        position: absolute;
+        width: 100%;
+        height: 300px;
+        transition: 0.5s;
+    }
+
+    .container .card:hover .imgBx{
+        top: 0%;
+
+    }
+
+    .container .card .imgBx img{
+        position: absolute;
+        width: 100%;
+    }
+
+    .container .card .contentBx{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 300px;
+        text-align: center;
+        transition: 1s;
+        z-index: 10;
+    }
+
+    .container .card:hover .contentBx{
+        height: 300px;
+    }
+
+    .container .card .contentBx h2{
+        position: relative;
+        font-weight: 300;
+        letter-spacing: 1px;
+        color: #fff;
+        margin: 0;
+    }
+
+    .container .card .contentBx .size, .container .card .contentBx .color, .container .card .contentBx .button {
+        display: flex;
+        justify-content: start;
+        align-items: start;
+        padding: 8px 20px;
+        transition: 0.5s;opacity: 0;
+        visibility: hidden;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .container .card .contentBx .button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 8px 20px;
+        transition: 0.5s;opacity: 0;
+        visibility: hidden;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    .container .card:hover .contentBx .size{
+        opacity: 1;
+        visibility: visible;
+        transition-delay: 0.5s;
+    }
+    .container .card:hover .contentBx .button{
+        opacity: 1;
+        visibility: visible;
+        transition-delay: 0.5s;
+    }
+
+    .container .card:hover .contentBx .color{
+        opacity: 1;
+        visibility: visible;
+        transition-delay: 0.6s;
+    }
+
+    .container .card .contentBx .size h3, .container .card .contentBx .color h3{
+        color: #fff;
+        font-weight: 600;
+        font-size: 8px;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-right: 10px;
+    }
+
+    .container .card .contentBx .size span{
+        width: 26px;
+        height: 26px;
+        text-align: center;
+        line-height: 26px;
+        font-size: 8px;
+        display: inline-block;
+        color: #111;
+        background: #fff;
+        margin: 0 5px;
+        transition: 0.5s;
+        color: #111;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+
+
+    .container .card .contentBx .color span{
+        width: 100%;
+        height: 20px;
+        color: white;
+        margin: 0 5px;
+        cursor: pointer;
+    }
+
+
+    .container .card .contentBx a{
+        display: inline-block;
+        padding: 10px 20px;
+        background: #fff;
+        border-radius: 4px;
+        margin-top: 10px;
+        text-decoration: none;
+        font-weight: 600;
+        color: #111;
+        opacity: 0;
+        transform: translateY(50px);
+        transition: 0.5s;
+        margin-top: 0;
+    }
+
+    .container .card:hover .contentBx a{
+        opacity: 1;
+        transition-delay: 0.75s;
+
+    }
+    .main{
+        margin-top: 100px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+    .button {
+        top:250px;
+        background-color: white;
+        border: none;
+        color: black;
+        padding: 10px 20px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        border-radius: 20px;
+    }
+</style>
+<div xmlns:th="http://www.thymeleaf.org">
+    <div class="main">
+        <div th:each="event : ${events}" class="container">
+            <div class="card">
+<!--                <div class="imgBx">-->
+<!--&lt;!&ndash;                    <img th:src="@{${film.getUrl()}}"/>&ndash;&gt;-->
+<!--                </div>-->
+                <div class="contentBx">
+                    <h2  th:text="${event.theme()}"></h2>
+                    <div class="size">
+                        <h3>Duration :</h3>
+                        <span th:text="${event.getDuration()}"></span>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
Index: src/main/resources/templates/film.html
===================================================================
--- src/main/resources/templates/film.html	(revision f9cc55582c02fa97aae4ea5ba53abfc2240d0230)
+++ src/main/resources/templates/film.html	(revision a69d48c37eb6b6e86bf35724845212d0acde4bca)
@@ -25,5 +25,14 @@
                 <span th:text="${genre}"></span>
             </div>
-
+            <h4 style="color: white;"> Возрасна категорија:
+                <span th:text="${film.age_category}"></span>
+            </h4>
+            <h4 style="color: white"> Траење на филмот:
+                <span th:text="${film.duration}"></span>
+                минути
+            </h4>
+            <h4 style="color: white"> Режисер:
+                <span th:text="${film.director}"></span>
+            </h4>
         </div>
 
Index: src/main/resources/templates/films.html
===================================================================
--- src/main/resources/templates/films.html	(revision f9cc55582c02fa97aae4ea5ba53abfc2240d0230)
+++ src/main/resources/templates/films.html	(revision a69d48c37eb6b6e86bf35724845212d0acde4bca)
@@ -1,10 +1,224 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>
+<style xmlns:sec="http://www.w3.org/1999/xhtml">
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+
+    *{
+        font-family: 'Poppins', sans-serif;
+    }
+
+
+    .container{
+
+        position: relative;
+    }
+
+    .container .card{
+        position: relative;
+        width: 250px;
+        height: 300px;
+        background: #232323;
+        border-radius: 20px;
+        overflow: hidden;
+    }
+
+    .container .card:before{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: black;
+        transition: 0.5s ease-in-out;
+    }
+
+
+    .container .card:after{
+        position: absolute;
+
+        font-size: 6em;
+        font-weight: 600;
+        font-style: italic;
+        color: rgba(255,255,25,0.05)
+    }
+
+    .container .card .imgBx{
+        position: absolute;
+        width: 100%;
+        height: 300px;
+        transition: 0.5s;
+    }
+
+    .container .card:hover .imgBx{
+        top: 0%;
+
+    }
+
+    .container .card .imgBx img{
+        position: absolute;
+        width: 100%;
+    }
+
+    .container .card .contentBx{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 300px;
+        text-align: center;
+        transition: 1s;
+        z-index: 10;
+    }
+
+    .container .card:hover .contentBx{
+        height: 300px;
+    }
+
+    .container .card .contentBx h2{
+        position: relative;
+        font-weight: 300;
+        letter-spacing: 1px;
+        color: #fff;
+        margin: 0;
+    }
+
+    .container .card .contentBx .size, .container .card .contentBx .color, .container .card .contentBx .button {
+        display: flex;
+        justify-content: start;
+        align-items: start;
+        padding: 8px 20px;
+        transition: 0.5s;opacity: 0;
+        visibility: hidden;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .container .card .contentBx .button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 8px 20px;
+        transition: 0.5s;opacity: 0;
+        visibility: hidden;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    .container .card:hover .contentBx .size{
+        opacity: 1;
+        visibility: visible;
+        transition-delay: 0.5s;
+    }
+    .container .card:hover .contentBx .button{
+        opacity: 1;
+        visibility: visible;
+        transition-delay: 0.5s;
+    }
+
+    .container .card:hover .contentBx .color{
+        opacity: 1;
+        visibility: visible;
+        transition-delay: 0.6s;
+    }
+
+    .container .card .contentBx .size h3, .container .card .contentBx .color h3{
+        color: #fff;
+        font-weight: 600;
+        font-size: 8px;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-right: 10px;
+    }
+
+    .container .card .contentBx .size span{
+        width: 26px;
+        height: 26px;
+        text-align: center;
+        line-height: 26px;
+        font-size: 8px;
+        display: inline-block;
+        color: #111;
+        background: #fff;
+        margin: 0 5px;
+        transition: 0.5s;
+        color: #111;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+
+
+    .container .card .contentBx .color span{
+        width: 100%;
+        height: 20px;
+        color: white;
+        margin: 0 5px;
+        cursor: pointer;
+    }
+
+
+    .container .card .contentBx a{
+        display: inline-block;
+        padding: 10px 20px;
+        background: #fff;
+        border-radius: 4px;
+        margin-top: 10px;
+        text-decoration: none;
+        font-weight: 600;
+        color: #111;
+        opacity: 0;
+        transform: translateY(50px);
+        transition: 0.5s;
+        margin-top: 0;
+    }
+
+    .container .card:hover .contentBx a{
+        opacity: 1;
+        transition-delay: 0.75s;
+
+    }
+    .main{
+        margin-top: 100px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+    .button {
+        top:250px;
+        background-color: white;
+        border: none;
+        color: black;
+        padding: 10px 20px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        border-radius: 20px;
+    }
+</style>
+<div xmlns:th="http://www.thymeleaf.org">
+    <div class="main">
+        <div th:each="film : ${films}" class="container">
+            <div class="card">
+                <div class="imgBx">
+                    <img th:src="@{${film.getUrl()}}"/>
+                </div>
+                <div class="contentBx">
+                    <h2  th:text="${film.getName()}"></h2>
+                    <div class="size">
+                        <h3>Duration :</h3>
+                        <span th:text="${film.getDuration()}"></span>
+                    </div>
+                    <div class="color">
+                        <h3>Genre:</h3>
+                        <span th:text="${film.getGenre()}"></span>
+                    </div>
+                    <form th:action="@{'/home/getFilm/{id}' (id=${film.getId_film()})}"
+                          th:method="GET">
+                        <button class="button" type="submit">Details</button>
+                    </form>
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
Index: src/main/resources/templates/fragments/header.html
===================================================================
--- src/main/resources/templates/fragments/header.html	(revision f9cc55582c02fa97aae4ea5ba53abfc2240d0230)
+++ src/main/resources/templates/fragments/header.html	(revision a69d48c37eb6b6e86bf35724845212d0acde4bca)
@@ -62,8 +62,14 @@
     <ul class="menu-left">
         <li class="begin"><a href="#!">MovieZone</a></li>
-        <li class="begin"><a href="#!">Филмови</a></li>
-        <li class="begin"><a href="#!">Програма</a></li>
-        <li class="begin"><a href="#!">Настани</a></li>
-        <li class="begin"><a href="#!">Faq</a></li>
+        <li class="begin"><a href="/films">Филмови</a></li>
+        <li class="begin"><a href="/projections">Програма</a></li>
+        <li class="begin"><a href="/events">Настани</a></li>
+<!--        <li class="begin"><a href="#!">Faq</a></li>-->
+        <li class="begin"><a href="/myTickets">Мои Карти</a></li>
+        <li class="begin"><a href="/workers">Вработени</a></li>
+        <li class="begin"><a href="/addProjection">Нова Проекција</a></li>
+        <li class="begin"><a href="/addFilm">Нов Филм</a></li>
+        <li class="begin"><a href="/addEvent">Нов Настан</a></li>
+
     </ul>
     <ul class="menu-right">
