Index: source/freeparkingspace/src/main/resources/templates/about.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/about.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/about.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<p style="color: red">
+    <br>
+    <br>
+    <br>
+    Изработиле: <br>
+    Мајкл Танчин 193187 <br>
+    Златко Стојановски 193288 <br>
+
+</p>
+
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/contact.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/contact.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/contact.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<p style="color: red">
+    <br>
+    <br>
+    Контакт <br>
+    Адреса  <br>
+    "Руѓер Бошковиќ" 16  <br>
+    P.O. Box 393  <br>
+    1000 Скопје, Република Македонија  <br>
+
+    <br>
+
+    Телефони <br>
+    +389 77903008 <br>
+    <br>
+    E-mail <br>
+    Stojanovskizlatko08@gmail.com
+
+</p>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/employee.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/employee.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/employee.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base href="${pageContext.request.contextPath}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Одобрување</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" th:href="@{../css/styleMovies.css}"/>
+
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 2.2rem;
+            background: rgba(0,0,0,0.50);
+        }
+        th, td{
+            padding: 30px;
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background3.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: no-repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 4rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+        li,
+        a:hover {
+            color: red;
+            font-size: 1.3rem;
+        }
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            font-size: 3rem;
+            margin-left: 45%;
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 2rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+        input{
+            font-size: 1.5rem;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html" >-->
+    <!--&lt;!&ndash;        <a href="/home"><img class="logo" th:src="@{../images/LOGOPNG2.png}" alt="logo"></a>&ndash;&gt;-->
+    <!--&lt;!&ndash;        <ul class="nav_links">&ndash;&gt;-->
+    <!--&lt;!&ndash;            <li><a href="/movies">MOVIES</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;            <li><a href="/projections">PROJECTIONS</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;            <li><a href="/auditoriums">AUDITORIUMS</a></li>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;        </ul>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;        <div class="right">&ndash;&gt;-->
+    <!--&lt;!&ndash;            <li><a class="reg" href="/login">LOGIN</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;            <li><a class="log" style="color: red" href="/register">REGISTER</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;        </div>&ndash;&gt;-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <div class="content">
+                <!-- Page content -->
+                <div class="header-one">
+                </div>
+                <div class="centered">
+                    <table>
+                        <thead style="border-bottom: 1px solid rgba(255, 51, 51,0.8)">
+                        <tr>
+                            <td style="border-right: 1px solid rgba(255, 51, 51,0.8);font-size:2rem">Име</td>
+                            <td style="border-right: 1px solid rgba(255, 51, 51,0.8);font-size:2rem">Презиме</td>
+                            <td style="border-right: 1px solid rgba(255, 51, 51,0.8);font-size:2rem">Улога</td>
+                            <td></td>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr th:each="vraboten : ${employee}">
+                            <td th:text="${vraboten.getVrabotenKey().getUser().getIme()}"/>
+                            <td th:text="${vraboten.getVrabotenKey().getUser().getPrezime()}"/>
+                            <td th:text="${vraboten.getUloga()}"/>
+                            <td>
+                                    <!-- EmployeeController.delete (Only MASTER can see this element)-->
+                                    <form  th:action="@{'/employee/{id}/delete' (id=${vraboten.getVrabotenKey().getUser().getKorisnickoIme()})}" th:method="POST">
+                                        <button type="submit" class="btn">Одбиј</button>
+                                    </form>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!--<a class="btn" href="/projections">Projections</a>-->
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
Index: source/freeparkingspace/src/main/resources/templates/fragments/header.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/fragments/header.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/fragments/header.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,22 @@
+<head>    <link rel="stylesheet" type="text/css" th:href="@{../css/style.css}"/></head>
+<header xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" style="
+    padding: 30px 10%;
+    max-width: 100%;
+    height: 15%;
+    background-color: rgba(0, 0, 0, 0.5);
+    border: none;">
+    <a href="/home"><img class="logo" th:src="@{../images/LOGOPNG.png}"></a>
+    <ul class="nav_links">
+        <li><a href="/home">Home</a></li>
+        <li><a href="/reservation-info">Reservation</a></li>
+        <li><a href="/contact" style="margin-right: 5px">Contact</a></li>
+        <li><a href="/about" style="margin-right: 5px">About</a></li>
+    </ul>
+    <div class="right" style="display:flex;">
+        <div sec:authorize="!isAuthenticated()">
+            <a href="/register-info" style="margin-right: 55px" >Register</a>
+        </div>
+        <!--            <a class="reg" href="/register">LOGIN</a>-->
+        <!--          <a class="log" href="/login">REGISTER</a>-->
+    </div>
+</header>
Index: source/freeparkingspace/src/main/resources/templates/home.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/home.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/home.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base href="${pageContext.request.contextPath}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>ДОБРЕДОЈДОВТЕ!</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background1.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 5rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 3vw;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+            font-size: 3rem;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html">-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined" style="margin-bottom: 5%">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <p style="text-align: center;margin-bottom: 3%; background-color: rgba(0,0,0,0.35); font-size: 2.5rem;">
+                Платформата FreeParkingSpace ќе го реши проблемот за залудно потрошеното време на поединецот
+                во пронаоѓање на паркинг место низ густо населениот главен град. Главна карактеристика на оваа платофрма
+                е дека точно покажува на секој паркинг во кој реон има слободно место.
+            </p>
+            <a class="btn" th:href="@{/reservation-info}">Reservation</a>
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/index.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/index.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/index.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+</head>
+<body>
+
+
+<script src="" async defer></script>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/master-template.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/master-template.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/master-template.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8"/>
+    <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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 5rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100vh;
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+<header th:replace="fragments/header"/>
+<!--<header style="margin:0px;width: 0%;height: 0%"></header>-->
+<section th:include="${bodyContent}" />
+
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/register.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/register.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/register.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,291 @@
+
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+  <base href="${pageContext.request.contextPath}">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>РЕГИСТРАЦИЈА!</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+    @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+    :root {
+      --shadow-color: #FF9E9E;
+      --shadow-color-light: white;
+    }
+
+    .navbar {
+      max-width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.25);
+    }
+
+    header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 30px 10%;
+      max-width: 100%;
+      height: 10%;
+      background-color: rgb(0, 0, 0, 0.25);
+      border: none;
+    }
+
+    table{
+      color: white;
+      font-size: 0.3rem;
+      background: rgba(255,255,255,0.05);
+    }
+
+    img {
+      width: 120px;
+      height: 120px;
+    }
+    html{
+      text-align: center;
+    }
+    body {
+      padding: 0;
+      margin: 0;
+      max-width: 100%;
+      background-image: url('../images/background2.jpg');
+      object-fit: cover;
+      height: 100vh;
+      background-size: cover;
+      background-repeat:repeat;
+      text-align: center;
+    }
+
+
+    li,
+    a:not(.btn) {
+      font-family: "Montserrat", sans-serif;
+      font-weight: 500;
+      font-size: 1.2rem;
+      text-decoration: none;
+      color: white;
+      padding: 10%;
+      list-style: none;
+    }
+
+    h1{
+      font-family: 'Roboto', sans-serif;
+      font-width: 900;
+      font-size: 4rem;
+
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgb(0, 225, 255, 0.05);
+      border-radius: 10%;
+      flex-direction: row;
+      margin-left: 25%;
+      width: 17%;
+      height: 2%;
+    }
+
+    .right a {
+      margin: -5px;
+    }
+    .navbar{
+      max-width: 100%;
+      height: 100vh;
+    }
+
+    .reg {
+      color: rgb(255, 0, 0);
+    }
+
+    ul {
+      display: flex;
+      flex-direction: row;
+    }
+
+
+
+    .reg:hover {
+      color: white;
+    }
+    .container-main{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      font-size: 3rem;
+      margin: 0 0 30% 105%;
+    }
+    P{
+      font-family: "Montserrat", sans-serif;
+      font-weight: 500;
+      font-size: 4rem;
+      text-decoration: none;
+      color: white;
+      width: 80%;
+      list-style: none;
+      margin-top: -2%;
+    }
+
+    .glow{
+      text-transform: uppercase;
+      height: auto;
+      text-align: center;
+    }
+
+    .glow {
+      color: white;
+      animation: neon 3s infinite;
+    }
+
+    .h1Combined{
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      max-width: 100%;
+    }
+
+    @keyframes neon {
+      0% {
+        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+        0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+        0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+      }
+      50% {
+        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+        0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+        0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+      }
+      100% {
+        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+        0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+        0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+      }
+    }
+
+    .btn{
+      text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+      border: 1px solid #b70000;
+      color: white;
+      font-size: 2rem;
+      border:none;
+      background: #af0101;
+      padding: 0.5rem 1.3rem;
+      border-radius: 10%;
+      cursor: pointer;
+      transition: 1s ease;
+      display:block;
+      box-shadow: 3px 2px 10px #d50101,
+      -1px -1px 1px #e60000;
+      font-family: 'Roboto', sans-serif;
+      font-weight: 500;
+      text-decoration: none;
+      transition: infinite 1s ease;
+    }
+    input{
+      font-size: 1.5rem;
+    }
+
+    .btn:hover{
+      background-color: #58ACFA;
+      color: white;
+    }
+
+    .btn2{
+      text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+      border: 1px solid #b70000;
+      color: white;
+      font-size: 1.5rem;
+      border:none;
+      background: #af0101;
+      padding: 0.5rem 1.3rem;
+      border-radius: 10%;
+      cursor: pointer;
+      transition: 1s ease;
+      display:block;
+      box-shadow: 3px 2px 10px #d50101,
+      -1px -1px 1px #e60000;
+      font-family: 'Roboto', sans-serif;
+      font-weight: 500;
+      text-decoration: none;
+      transition: infinite 1s ease;
+    }
+
+    .btn2:hover{
+      background-color: #58ACFA;
+      color: white;
+    }
+
+
+  </style>
+</head>
+
+<body>
+<div class="navbar">
+  <!--    <header th:replace="fragments/header.html">-->
+  <!--    </header>-->
+  <main>
+    <div class="container-main">
+      <div class="h1Combined">
+        <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+      </div>
+      <div class="container"  xmlns:th="http://www.w3.org/1999/xhtml" >
+        <h1 th:if="${hasError}" th:text="${error}"></h1>
+      </div>
+      <div class="container" style="background-color: rgba(0,0,0,0.5);margin-top: 3%; ">
+        <h2 class="form-signin-heading" style="margin-bot: 15%;color:white;">Регистрација на Корисник</h2>
+        <form class="form-signin mt-xl-5" method="post" action="/register">
+
+          <p>
+            <label for="ime" class="sr-only">Име</label>
+            <input type="text" id="ime" name="ime" class="form-control" placeholder="Име" required=""
+                   autofocus="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+          <p>
+            <label for="prezime" class="sr-only">Презиме</label>
+            <input type="text" id="prezime" name="prezime" class="form-control" placeholder="Презиме"
+                   required="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+          <p>
+            <label for="korisnicko_ime" class="sr-only">Корисничко Име</label>
+            <input type="text" id="korisnicko_ime" name="korisnicko_ime" class="form-control"
+                   placeholder="Username" required="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+
+          <p>
+            <label for="embg" class="sr-only">EMBG</label>
+            <input type="text" id="embg" name="embg" class="form-control"
+                   placeholder="EMBG" required="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+
+          <p>
+            <label for="email" class="sr-only">E-mail</label>
+            <input type="text" id="email" name="email" class="form-control" placeholder="E-mail" required="" autofocus="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+
+          <p>
+            <label for="br_tel" class="sr-only">Телефонски Број</label>
+            <input type="text" id="br_tel" name="br_tel" class="form-control" placeholder="Phone Number" required="" autofocus="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+
+          <p>
+            <label for="password" class="sr-only">Лозинка</label>
+            <input type="text" id="password" name="password" class="form-control" placeholder="Password" required="" autofocus="" style="margin-bottom: 5%;margin-left:10%">
+          </p>
+          <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
+        </form>
+        <button href="/login" class="btn btn-block btn-light">Already have an account? Login here!</button>
+      </div>
+    </div>
+  </main>
+  <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/registerConfirmation.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/registerConfirmation.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/registerConfirmation.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,257 @@
+
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base href="${pageContext.request.contextPath}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>РЕГИСТРАЦИЈА!</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background2.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 4rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 50%;
+            height: 100%;
+            font-size: 3rem;
+            margin: 0 0 7% 25%;
+            background-color: rgba(0,0,0,0.35);
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+            margin-left: 10%;
+            background-color: rgba(0,0,0,0.45);
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 2rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+        input{
+            font-size: 1.5rem;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html">-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined" style="margin-bottom: 5%">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <div class="container"  xmlns:th="http://www.w3.org/1999/xhtml" >
+                <h1 th:if="${hasError}" th:text="${error}"></h1>
+            </div>
+            <div>
+                <p>Ве молиме одберете што од следните понудени опции што би сакале да регистрирате!</p>
+                <div>
+                <a class="btn btn-lg btn-primary btn-block" href="/register-employee">Вработен</a>
+                <a class="btn btn-lg btn-primary btn-block" href="/register">Корисник</a>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/registerEmployee.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/registerEmployee.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/registerEmployee.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,297 @@
+
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base href="${pageContext.request.contextPath}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>РЕГИСТРАЦИЈА!</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background2.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 5rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            margin: 0 0 25% 90%;
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 2rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html">-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined" style="margin-bottom: 5%">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <div class="container"  xmlns:th="http://www.w3.org/1999/xhtml" >
+                <h1 th:if="${hasError}" th:text="${error}"></h1>
+            </div>
+            <div class="container" style="background-color: rgba(0,0,0,0.5);margin-top: 3%; ">
+                <h2 class="form-signin-heading" style="margin-bot: 15%;color:white;">Регистрација на Корисник</h2>
+                <form class="form-signin mt-xl-5" method="post" action="/register-employee">
+
+                    <p>
+                        <label for="ime" class="sr-only">Име</label>
+                        <input type="text" id="ime" name="ime" class="form-control" placeholder="Име" required=""
+                               autofocus="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+                    <p>
+                        <label for="prezime" class="sr-only">Презиме</label>
+                        <input type="text" id="prezime" name="prezime" class="form-control" placeholder="Презиме"
+                               required="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+                    <p>
+                        <label for="korisnicko_ime" class="sr-only">Корисничко Име</label>
+                        <input type="text" id="korisnicko_ime" name="korisnicko_ime" class="form-control"
+                               placeholder="Username" required="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+
+                    <p>
+                        <label for="embg" class="sr-only">EMBG</label>
+                        <input type="text" id="embg" name="embg" class="form-control"
+                               placeholder="EMBG" required="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+
+                    <p>
+                        <label for="email" class="sr-only">E-mail</label>
+                        <input type="text" id="email" name="email" class="form-control" placeholder="E-mail" required="" autofocus="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+
+                    <p>
+                        <label for="br_tel" class="sr-only">Телефонски Број</label>
+                        <input type="text" id="br_tel" name="br_tel" class="form-control" placeholder="Phone Number" required="" autofocus="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+
+                    <p>
+                        <label for="password" class="sr-only">Лозинка</label>
+                        <input type="text" id="password" name="password" class="form-control" placeholder="Password" required="" autofocus="" style="margin-bottom: 5%;margin-left:10%">
+                    </p>
+
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" name="user_role" type="radio" id="ROLE_ADMIN" value="ROLE_ADMIN" style="margin-bottom: 3%;">
+                        <label class="form-check-label" for="ROLE_ADMIN" style="color:white;margin-bottom: 10%;font-size: 2rem">Admin</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" name="user_role"  type="radio" id="ROLE_CONTROLLER" value="ROLE_CONTROLLER" style="margin-bottom: 3%">
+                        <label class="form-check-label" for="ROLE_CONTROLLER" style="color:white;margin-bottom: 10%;font-size: 2rem">Controller</label>
+                    </div>
+
+                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
+                </form>
+                <a href="/login" class="btn btn-block btn-light">Already have an account? Login here!</a>
+            </div>
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/reservation.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/reservation.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/reservation.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+        <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+        <head>
+        <base href="${pageContext.request.contextPath}">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>РЕЗЕРВАЦИЈA!</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background4.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 5rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.50);
+            margin-left: 50%;
+            margin-bottom: 10%;
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 2vw;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            margin-left: 40%;
+            margin-top: 1.5%;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+        .forma{
+            display:flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid red;
+            padding: 30px;
+            font-size: 2rem;
+
+
+        }
+        .vreme{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+        }
+        input{
+            margin-left: 10px;
+        }
+        .formi{
+            margin-top: -10%;
+            margin-bottom: 10%;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html">-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined" style="margin-bottom: 5%">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <div class="formi">
+                <form class="form-signin mt-xl-5" method="post" action="/reservation/parking-place/add">
+
+
+                    <div class="forma">
+                        <label for="reg_tablica" style="color: white;font-size: 1.5rem">Вашата регистација за автомобил</label>
+                    <input type="text" id="reg_tablica" name="reg_tablica" class="form-control" placeholder="XX-XXXX-XX"
+                           required="" >
+                </div>
+
+                <div class="forma">
+                    <label for="marka" style="color: white;font-size: 1.5rem">Марка за автомобилот</label>
+                    <input type="text" id="marka" name="marka" class="form-control" placeholder="BMW X6 / MERCEDES C220"
+                           required="" >
+                </div>
+                <div class="forma">
+                    <label for="boja" style="color: white;font-size: 1.5rem">Боја за автомобилот</label>
+                    <input type="text" id="boja" name="boja" class="form-control" placeholder="Bela / Crna / Crvena"
+                           required="" >
+                </div>
+
+                <div class="vreme">
+                <div class="forma">
+                    <label for="pocetno_vreme" style="color: white;font-size: 1.5rem">Резервација од</label>
+                    <input type="datetime-local" id="pocetno_vreme" name="pocetno_vreme" class="form-control" placeholder="2022-02-25 17:32:14.093681"
+                           required="" >
+                </div>
+                <div class="forma">
+                    <label for="krajno_vreme" style="color: white;font-size: 1.5rem">Резервација до</label>
+                    <input type="datetime-local" id="krajno_vreme" name="krajno_vreme" class="form-control" placeholder="2022-02-25 19:32:14.093681"
+                           required="" >
+                </div>
+                </div>
+                    <label style="opacity: 0%">Parking ID</label>
+                    <select name="broj_na_pmesta" class="form-control" autocomplete="off" style="opacity: 0%">
+                        <option th:if="${parking} != null"
+                                th:selected="${parking.getBrojNaPmesta() != null}"
+                                th:each="parking : ${parking}"
+                                th:value="${parking.getBrojNaPmesta()}"
+                                th:text="${parking.getBrojNaPmesta()}">
+                        </option>
+                        <option th:if="${parking} == null"
+                                th:each="parking : ${parking}"
+                                th:value="${parking.getBrojNaPmesta()}"
+                                th:text="${parking.getBrojNaPmesta()}">
+                        </option>
+                    </select>
+                    <button class="btn" type="submit">Reserve</button>
+                </form>
+            </div>
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
Index: source/freeparkingspace/src/main/resources/templates/reservationInfo.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/reservationInfo.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/reservationInfo.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base href="${pageContext.request.contextPath}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>ДОБРЕДОЈДОВТЕ!</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background3.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 5rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            margin-left: 40%;
+            margin-bottom: 20%;
+
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 3.2rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+            font-size: 3rem;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html">-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined" style="margin-bottom: 5%">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <div class="parking">
+                <table style="font-size:3.0rem;">
+                    <thead style="border-bottom: 1px solid rgba(255, 51, 51,0.8)">
+                    <tr>
+                        <td style="border-right: 1px solid rgba(255, 51, 51,0.8)">PARKING</td>
+                        <td style="border-right: 1px solid rgba(255, 51, 51,0.8)">ZONA</td>
+                        <td style="border-right: 1px solid rgba(255, 51, 51,0.8)">BROJ NA PARKING</td>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr th:each="parking_mesto : ${parking_mesto}">
+                        <td th:text="${parking_mesto.getIdZona().getIdIme().getLokacija()} "/>
+                        <td th:text="${parking_mesto.getIdZona().getIdZona()} "/>
+                        <td th:text="${parking_mesto.getBrojNaPmesta()} "/>
+                        <td class="text-right">
+                            <form th:action="@{/reservation/parking-place/}">
+                                <button class="btn btn-sm btn-danger view-product" type="submit" th:name="broj_na_pmesta" th:value="${parking_mesto.getBrojNaPmesta()}">RESERVE</button>
+                            </form>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
+</html>
Index: source/freeparkingspace/src/main/resources/templates/success.html
===================================================================
--- source/freeparkingspace/src/main/resources/templates/success.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
+++ source/freeparkingspace/src/main/resources/templates/success.html	(revision 31d67c0f0c6f25d3f0f116f6d94283ade221e11d)
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base href="${pageContext.request.contextPath}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>ДОБРЕДОЈДОВТЕ!</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
+        @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
+
+        :root {
+            --shadow-color: #FF9E9E;
+            --shadow-color-light: white;
+        }
+
+        .navbar {
+            max-width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.25);
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 10%;
+            max-width: 100%;
+            height: 10%;
+            background-color: rgb(0, 0, 0, 0.25);
+            border: none;
+        }
+
+        table{
+            color: white;
+            font-size: 0.3rem;
+            background: rgba(255,255,255,0.05);
+        }
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+        html{
+            text-align: center;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            max-width: 100%;
+            background-image: url('../images/background1.jpg');
+            object-fit: cover;
+            height: 100vh;
+            background-size: cover;
+            background-repeat: repeat;
+            text-align: center;
+        }
+
+
+        li,
+        a:not(.btn) {
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-decoration: none;
+            color: white;
+            padding: 10%;
+            list-style: none;
+        }
+
+        h1{
+            font-family: 'Roboto', sans-serif;
+            font-width: 900;
+            font-size: 5rem;
+
+        }
+
+        .right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgb(0, 225, 255, 0.05);
+            border-radius: 10%;
+            flex-direction: row;
+            margin-left: 25%;
+            width: 17%;
+            height: 2%;
+        }
+
+        .right a {
+            margin: -5px;
+        }
+        .navbar{
+            max-width: 100%;
+            height: 100vh;
+        }
+
+        .reg {
+            color: rgb(255, 0, 0);
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+        }
+
+
+
+        .reg:hover {
+            color: white;
+        }
+        .container-main{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            margin-left: 10%;
+            margin-bottom: 20%;
+        }
+        P{
+            font-family: "Montserrat", sans-serif;
+            font-weight: 500;
+            font-size: 4rem;
+            text-decoration: none;
+            color: white;
+            width: 80%;
+            list-style: none;
+            margin-top: -2%;
+        }
+
+        .glow{
+            text-transform: uppercase;
+            height: auto;
+            text-align: center;
+        }
+
+        .glow {
+            color: white;
+            animation: neon 3s infinite;
+        }
+
+        .h1Combined{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+        }
+
+        @keyframes neon {
+            0% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+            50% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+                0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
+            }
+            100% {
+                text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+                0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+                0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
+            }
+        }
+
+        .btn{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 3vw;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn:hover{
+            background-color: #58ACFA;
+            color: white;
+            font-size: 3rem;
+        }
+
+        .btn2{
+            text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
+            border: 1px solid #b70000;
+            color: white;
+            font-size: 1.5rem;
+            border:none;
+            background: #af0101;
+            padding: 0.5rem 1.3rem;
+            border-radius: 10%;
+            cursor: pointer;
+            transition: 1s ease;
+            display:block;
+            box-shadow: 3px 2px 10px #d50101,
+            -1px -1px 1px #e60000;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            text-decoration: none;
+            transition: infinite 1s ease;
+        }
+
+        .btn2:hover{
+            background-color: #58ACFA;
+            color: white;
+        }
+
+
+    </style>
+</head>
+
+<body>
+<div class="navbar">
+    <!--    <header th:replace="fragments/header.html">-->
+    <!--    </header>-->
+    <main>
+        <div class="container-main">
+            <div class="h1Combined" style="margin-bottom: 5%">
+                <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
+            </div>
+            <p style="text-align: center;color:lightgreen;margin-bottom: 3%; background-color: rgba(0,0,0,0.35); font-size: 3.5rem;">
+                ВАШЕТО БАРАЊЕ Е УСПЕШНО, ВИ БЛАГОДАРИМЕ!
+            </p>
+
+        </div>
+    </main>
+    <!--<footer th:replace="fragments/footer"/>-->
+</div>
+</body>
+</html>
