Index: src/main/resources/templates/album.html
===================================================================
--- src/main/resources/templates/album.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/album.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Album</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+</head>
+<body>
+<header th:replace="common/navbar :: navbar"></header>
+<hr class="dropdown-divider">
+<br/>
+<br/>
+<main>
+    <p th:if="${noPosts}">No posts</p>
+    <div th:unless="${noPosts}" class="album py-5 bg-light">
+        <div class="container">
+
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+                <div class="col" th:each="post : ${postList}">
+                    <div class="card shadow-sm">
+                        <img class="card-img" style="object-fit: contain" width="100%" height="225"
+                             th:src="${post.imagesPath[0]}">
+                        <div class="card-body overflow-hidden">
+                            <h4 th:text="${post.title}" style="height: 60px"></h4>
+                            <p class="card-text text-truncate" style="height: 45px" th:text="${post.description}"></p>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <div class="btn-group">
+                                    <a class="btn btn-sm btn-outline-secondary" th:href="@{/post(postid=${post.id})}">Open</a>
+                                </div>
+                                <span class="text-muted">Date due: <small th:text="${post.dateDue}"></small></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr class="ui-menu-divider" />
+        <nav>
+            <ul class="pagination justify-content-center">
+                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
+                <li class="page-item"><a class="page-link" href="#">1</a></li>
+                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                <li class="page-item"><a class="page-link" href="#">Next</a></li>
+            </ul>
+        </nav>
+    </div>
+
+</main>
+<script src="/js/bootstrap.min.js"></script>
+</body>
+</html>
Index: src/main/resources/templates/common/navbar.html
===================================================================
--- src/main/resources/templates/common/navbar.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/common/navbar.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<header th:fragment="navbar">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img th:src="@{image/charity.png}" class="bi me-2" width="40" height="32" />
+                <span class="fs-4">Charitable</span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
+                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarCollapse">
+                <ul class="navbar-nav me-auto mb-2 mb-md-0">
+                    <li class="nav-item">
+                        <a th:href="@{/}" class="nav-link px-2 text-white">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a th:href="@{/album?page=1}" class="nav-link px-2 text-white">Posts</a>
+                    </li>
+                    <li class="nav-item">
+                        <a th:href="@{/upload}" class="nav-link px-2 text-white">Upload</a>
+                    </li>
+                </ul>
+                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+                    <input type="search" class="form-control form-control-dark" placeholder="Search...">
+                </form>
+
+                <div class="text-end">
+                    <a sec:authorize="isAnonymous()" type="button" class="btn btn-outline-light me-2" th:href="@{/login}">Login</a>
+                    <a sec:authorize="isAnonymous()" type="button" class="btn btn-warning" th:href="@{/register}">Sign-up</a>
+                    <a sec:authorize="isAuthenticated()" type="button" class="btn btn-outline-light me-2" th:href="@{/userInformation}">My profile - <span th:text="${user.firstName}"></span></a>
+                    <a sec:authorize="isAuthenticated()" type="button" class="btn btn-warning" th:href="@{/logout}">Logout</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+</header>
+</body>
+</html>
Index: src/main/resources/templates/index.html
===================================================================
--- src/main/resources/templates/index.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/index.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Home</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/carousel.css" rel="stylesheet"/>
+    <meta name="theme-color" content="#7952b3"/>
+</head>
+<body class="text-center">
+<header th:replace="common/navbar :: navbar"></header>
+<main>
+
+    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        </div>
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+                <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
+
+                <div class="container">
+                    <div class="carousel-caption text-start">
+                        <h1>Example headline.</h1>
+                        <p>Some representative placeholder content for the first slide of the carousel.</p>
+                        <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-item">
+                <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
+
+                <div class="container">
+                    <div class="carousel-caption">
+                        <h1>Another example headline.</h1>
+                        <p>Some representative placeholder content for the second slide of the carousel.</p>
+                        <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-item">
+                <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
+
+                <div class="container">
+                    <div class="carousel-caption text-end">
+                        <h1>One more for good measure.</h1>
+                        <p>Some representative placeholder content for the third slide of this carousel.</p>
+                        <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+        </button>
+    </div>
+
+
+    <!-- Marketing messaging and featurettes
+    ================================================== -->
+    <!-- Wrap the rest of the page in another container to center all the content. -->
+
+    <div class="container marketing">
+
+        <!-- Three columns of text below the carousel -->
+        <div class="row">
+            <div class="col-lg-4">
+                <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
+
+                <h2>Heading</h2>
+                <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
+                <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+            </div><!-- /.col-lg-4 -->
+            <div class="col-lg-4">
+                <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
+
+                <h2>Heading</h2>
+                <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
+                <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+            </div><!-- /.col-lg-4 -->
+            <div class="col-lg-4">
+                <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
+
+                <h2>Heading</h2>
+                <p>And lastly this, the third column of representative placeholder content.</p>
+                <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+            </div><!-- /.col-lg-4 -->
+        </div><!-- /.row -->
+
+
+        <!-- START THE FEATURETTES -->
+
+        <hr class="featurette-divider">
+
+        <div class="row featurette">
+            <div class="col-md-7">
+                <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+                <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
+            </div>
+            <div class="col-md-5">
+                <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
+
+            </div>
+        </div>
+
+        <hr class="featurette-divider">
+
+        <div class="row featurette">
+            <div class="col-md-7 order-md-2">
+                <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+                <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
+            </div>
+            <div class="col-md-5 order-md-1">
+                <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
+
+            </div>
+        </div>
+
+        <hr class="featurette-divider">
+
+        <div class="row featurette">
+            <div class="col-md-7">
+                <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+                <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
+            </div>
+            <div class="col-md-5">
+                <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
+
+            </div>
+        </div>
+
+        <hr class="featurette-divider">
+
+        <!-- /END THE FEATURETTES -->
+
+    </div><!-- /.container -->
+
+
+    <!-- FOOTER -->
+    <footer class="container">
+
+    </footer>
+</main>
+<script src="/js/bootstrap.min.js"></script>
+</body>
+</html>
Index: src/main/resources/templates/login.html
===================================================================
--- src/main/resources/templates/login.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/login.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Login</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/login.css" rel="stylesheet"/>
+    <meta name="theme-color" content="#7952b3"/>
+</head>
+<body class="text-center">
+<header th:replace="common/navbar :: navbar"></header>
+<main class="form-signin">
+    <form th:action="@{/login}" method="post">
+        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
+
+        <div class="form-floating">
+            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" name="username" required>
+            <label for="floatingInput">Email address</label>
+        </div>
+        <div class="form-floating">
+            <input type="password" class="form-control" id="floatingPassword" placeholder="Password" name="password" required>
+            <label for="floatingPassword">Password</label>
+        </div>
+
+        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
+    </form>
+    <p th:if="${param.error != null}" class="text-danger">Incorrect username or password</p>
+    <p th:if="${successValidation}" class="text-success">Account validated</p>
+    <p th:if="${error}" class="text-danger">Account token expired or does not exist</p>
+</main>
+<script src="/js/bootstrap.min.js"></script>
+</body>
+</html>
Index: src/main/resources/templates/myProfile.html
===================================================================
--- src/main/resources/templates/myProfile.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/myProfile.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>My profile</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/myProfile.css" rel="stylesheet"/>
+</head>
+<body>
+<header th:replace="common/navbar :: navbar"></header>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="table" viewBox="0 0 16 16">
+        <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
+    </symbol>
+    <symbol id="people-circle" viewBox="0 0 16 16">
+        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+        <path fill-rule="evenodd"
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+    </symbol>
+    <symbol id="grid" viewBox="0 0 16 16">
+        <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+    </symbol>
+</svg>
+
+
+<!--Sidebar-->
+<div class="container-fluid overflow-hidden">
+    <div class="row overflow-auto" id="rowHeight">
+        <div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-light d-flex sticky-top">
+            <div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-dark">
+                <ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start"
+                    id="menu">
+                    <li class="nav-item">
+                        <a th:href="@{/userInformation}" class="nav-link px-sm-0 px-2">
+                            <svg class="bi fs5" width="24" height="24">
+                                <use xlink:href="#people-circle"/>
+                            </svg>
+                            <span class="ms-1 d-none d-sm-inline">User information</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a th:href="@{/myDonations}" class="nav-link px-sm-0 px-2">
+                            <svg class="bi" width="24" height="24">
+                                <use xlink:href="#table"/>
+                            </svg>
+                            <span class="ms-1 d-none d-sm-inline">My donations</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a th:href="@{/myPosts}" class="nav-link px-sm-0 px-2">
+                            <svg class="bi" width="24" height="24">
+                                <use xlink:href="#grid"/>
+                            </svg>
+                            <span class="ms-1 d-none d-sm-inline">My posts</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!--SideBar end-->
+
+        <!--User information-->
+        <div class="col d-flex flex-column h-sm-100" th:if="${userInformation}">
+            <main class="row overflow-auto">
+                <div class="col pt-4">
+                    <h3>User Information</h3>
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <h6 class="mb-0">First Name</h6>
+                                </div>
+                                <div class="col-sm-9 text-secondary" th:text="${user.firstName}">
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <h6 class="mb-0">Last Name</h6>
+                                </div>
+                                <div class="col-sm-9 text-secondary" th:text="${user.lastName}">
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <h6 class="mb-0">Email</h6>
+                                </div>
+                                <div class="col-sm-9 text-secondary" th:text="${user.email}">
+                                </div>
+                            </div>
+                            <hr>
+                            <form th:action="@{/changePassword}" method="post">
+                                <div class="row">
+                                    <div class="col-sm-3">
+                                        <h6 class="mb-0">Old Password</h6>
+                                    </div>
+                                    <div class="col-sm-9 text-secondary">
+                                        <input class="form-control" type="password" name="oldPassword">
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="row">
+                                    <div class="col-sm-3">
+                                        <h6 class="mb-0">New Password</h6>
+                                    </div>
+                                    <div class="col-sm-9 text-secondary">
+                                        <input class="form-control" type="password" name="newPassword">
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="row">
+                                    <div class="col-sm-3">
+                                        <h6 class="mb-0">Confirm Password</h6>
+                                    </div>
+                                    <div class="col-sm-9 text-secondary">
+                                        <input class="form-control" type="password" name="confirmPassword">
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="row">
+                                    <div class="col-sm-12">
+                                        <input type="submit" class="btn btn-info" value="Change password">
+                                    </div>
+                                </div>
+                            </form>
+                            <div th:if="${changedPassword}" class="text-success">Password changed</div>
+                            <div th:if="${notChangedPassword}" class="text-danger">One of the passwords doesn't match
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+            <main class="row overflow-auto">
+                <div class="col pt-4">
+                    <h3>Payment</h3>
+                    <div class="card">
+                        <div class="card-body">
+                            <div style="float: right">
+                                <img src="https://img.icons8.com/color/48/000000/visa.png"/>
+                                <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png"/>
+                                <img src="https://img.icons8.com/color/48/000000/maestro.png"/>
+                            </div>
+                            <br/>
+                            <br/>
+                            <form th:action="@{/changeCardInfo}" method="post">
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <label for="cardName" class="form-label">Cardholder's name</label>
+                                        <input type="text" class="form-control" id="cardName" name="cardName"
+                                               placeholder="Name on card">
+                                    </div>
+                                    <div class="col-md-6 mb-0">
+                                        <label for="cardNumber" class="form-label">Card Number</label>
+                                        <input type="text" class="form-control" id="cardNumber" name="cardNumber"
+                                               placeholder="0000 0000 0000 0000">
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <label for="expiryDate" class="form-label">Expiry date</label>
+                                        <input type="text" class="form-control" id="expiryDate" name="expiryDate"
+                                               placeholder="MM/YY">
+                                    </div>
+                                    <div class="col-md-6">
+                                        <label for="cvv" class="form-label">CVV</label>
+                                        <input type="text" class="form-control" id="cvv" name="cvv" placeholder="XXX">
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="row">
+                                    <div class="col-sm-12">
+                                        <input type="submit" class="btn btn-info" value="Change card information">
+                                        <a class="btn btn-danger" th:href="@{/removeCardInfo}">Remove card
+                                            information</a>
+                                    </div>
+                                </div>
+                            </form>
+                            <div th:if="${creditCardError}" class="text-danger">Error</div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <!--UserInformationEnd-->
+
+        <!--MyDonations-->
+        <div class="col d-flex flex-column h-sm-100" th:if="${myDonations}">
+            <main class="row overflow-auto">
+                <div class="col pt-4">
+                    <h3>My donations</h3>
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col">
+                                    <h6>Post</h6>
+                                </div>
+                                <div class="col text-secondary">
+                                    <h6>Amount (MKD)</h6>
+                                </div>
+                            </div>
+                            <div class="row" th:each="donation : ${donations}">
+                                <div class="col">
+                                    <a th:text="${donation.title}" th:href="@{/post(postid=${donation.postId})}"></a>
+                                </div>
+                                <div class="col text-secondary" th:text="${donation.donatedAmount}">
+                                </div>
+                                <hr class="dropdown-divider">
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <h6>Total</h6>
+                                </div>
+                                <div class="col text-secondary">
+                                    <h6 th:text="${total}"></h6>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <!--MyDonationsEnd-->
+
+        <!--MyPosts-->
+        <div class="col d-flex flex-column h-sm-100" th:if="${myPosts}">
+            <main class="row overflow-auto">
+                <div class="col pt-4">
+                    <h3>My Posts</h3>
+                    <div class="row">
+                        <div class="col-md-6" th:each="post : ${postList}">
+                            <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+                                <div class="col p-4 d-flex flex-column position-static">
+                                    <h3 class="mb-0" th:text="${post.title}"></h3>
+                                    <p class="card-text mb-auto" th:text="${post.description}"></p>
+                                    <div class="row">
+                                        <div class="col">
+                                            <a class="btn btn-sm btn-outline-secondary"
+                                               th:href="@{/post(postid=${post.id})}">Open</a>
+                                            <a class="btn btn-sm btn-success" href="#">Add Collected Funds</a>
+                                            <a class="btn btn-sm btn-danger"
+                                               th:href="@{/deletePost(postid=${post.id})}">Delete</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-auto d-none d-lg-block">
+                                    <img th:src="${post.imagesPath[0]}" width="200" height="250"
+                                         style="object-fit: contain">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <!--MyPostsEnd-->
+    </div>
+</div>
+<script src="/js/bootstrap.min.js"></script>
+<script th:inline="javascript">
+    /*<![CDATA[*/
+
+    var creditCardInfo = /*[[${user.creditCardInfo}]]*/ 'default';
+    if (creditCardInfo) {
+        var parts = creditCardInfo.split(",");
+        document.getElementById("cardName").value = parts[0];
+        document.getElementById("cardNumber").value = parts[1];
+        document.getElementById("expiryDate").value = parts[2];
+        document.getElementById("cvv").value = parts[3];
+    }
+
+    /*]]>*/
+</script>
+</body>
+</html>
Index: src/main/resources/templates/post.html
===================================================================
--- src/main/resources/templates/post.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/post.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,175 @@
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Register</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/carousel.css" rel="stylesheet"/>
+    <meta name="theme-color" content="#7952b3"/>
+</head>
+<body>
+<header th:replace="common/navbar :: navbar"></header>
+<br/>
+<br/>
+<br/>
+<div th:if="${notFound}">
+    Post not found
+</div>
+<div th:unless="${notFound}">
+<div class="row">
+    <div class="col-md-6" style="margin-left: 5px">
+        <div class="col-md-12">
+
+            <div id="myCarousel" class="carousel carousel-dark slide card" data-bs-ride="carousel">
+                <div class="carousel-indicators">
+                    <button th:each="image, itrStat : ${post.imagesPath}" type="button" data-bs-target="#myCarousel"
+                            th:data-bs-slide-to="${itrStat.index}" th:classappend="${itrStat.index} == 0 ? active"></button>
+                </div>
+                <div class="carousel-inner">
+                    <div th:each="image, itrStat : ${post.imagesPath}" th:classappend="${itrStat.index} == 0 ? active"
+                         class="carousel-item">
+                        <img class="card-img" th:src="${image}" style="object-fit: contain">
+                    </div>
+                </div>
+                <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Previous</span>
+                </button>
+                <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Next</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-5" style="margin-left: 5px">
+        <div class="col-md-12">
+            <h1 th:text="${post.title}"></h1>
+            <h5>Description:</h5>
+            <p th:text="${post.description}"></p>
+            <h5>Funds needed:</h5>
+            <p><span th:text="${total}"></span>/<span th:text="${post.fundsNeeded}"></span> - <span th:text="${post.currency}"></span></p>
+            <h5>Date due:</h5>
+            <p th:text="${post.dateDue}"></p>
+            <h5>Bank account:</h5>
+            <p th:text="${post.bankAccount}"></p>
+            <h5>Phone numbers:</h5>
+            <p><span th:text="${post.phoneNumbers[0]}"></span> - Telekom</p>
+            <p><span th:text="${post.phoneNumbers[1]}"></span> - A1</p>
+            <h5>Created by:</h5>
+            <p><span th:text="${createdByFirstName}"></span> <span th:text="${createdByLastName}"></span></p>
+
+            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+                Donate
+            </button>
+
+            <!-- Modal -->
+            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel">Donate</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="card-body">
+                                <div style="float: right">
+                                    <img src="https://img.icons8.com/color/48/000000/visa.png"/>
+                                    <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png"/>
+                                    <img src="https://img.icons8.com/color/48/000000/maestro.png"/>
+                                </div>
+                                <br/>
+                                <br/>
+                                <form th:action="@{/donate(postid=${post.id})}" method="post" id="myForm">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <label for="cardName" class="form-label">Cardholder's name</label>
+                                            <input type="text" class="form-control" id="cardName" name="cardName"
+                                                   placeholder="Name on card" required>
+                                        </div>
+                                        <div class="col-md-6 mb-0">
+                                            <label for="cardNumber" class="form-label">Card Number</label>
+                                            <input type="text" class="form-control" id="cardNumber" name="cardNumber"
+                                                   placeholder="0000 0000 0000 0000" required>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <label for="expiryDate" class="form-label">Expiry date</label>
+                                            <input type="text" class="form-control" id="expiryDate" name="expiryDate"
+                                                   placeholder="MM/YY" required>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <label for="cvv" class="form-label">CVV</label>
+                                            <input type="text" class="form-control" id="cvv" name="cvv" placeholder="XXX" required>
+                                        </div>
+                                    </div>
+                                    <hr>
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <label for="amount" class="form-label">Amount</label>
+                                            <div class="input-group">
+                                                <input type="number" class="form-control" id="amount" name="amount" required>
+                                                <span class="input-group-text">MKD</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                            <input type="submit" class="btn btn-primary" form="myForm" value="Confirm">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-12">
+    <div class="col-md-8">
+    <h3>Funds collected</h3>
+    <div class="card mb-3">
+        <div class="card-body">
+            <div class="row">
+                <div class="col">
+                    <h6>Type</h6>
+                </div>
+                <div class="col text-secondary">
+                    <h6>Amount (MKD)</h6>
+                </div>
+            </div>
+            <div class="row" th:each="funds : ${post.fundsCollected}">
+                <div class="col">
+                    <h6 th:text="${funds.description}"></h6>
+                </div>
+                <div class="col text-secondary" th:text="${funds.funds}">
+                </div>
+                <hr class="dropdown-divider">
+            </div>
+        </div>
+    </div>
+    </div>
+</div>
+</div>
+</div>
+<script src="/js/bootstrap.min.js"></script>
+<script th:inline="javascript" th:unless="${notFound}" sec:authorize="isAuthenticated()">
+    /*<![CDATA[*/
+
+    var creditCardInfo = /*[[${user.creditCardInfo}]]*/ 'default';
+    if(creditCardInfo) {
+        var parts = creditCardInfo.split(",");
+        document.getElementById("cardName").value=parts[0];
+        document.getElementById("cardNumber").value=parts[1];
+        document.getElementById("expiryDate").value=parts[2];
+        document.getElementById("cvv").value=parts[3];
+    }
+
+    /*]]>*/
+</script>
+</body>
+</html>
Index: src/main/resources/templates/register.html
===================================================================
--- src/main/resources/templates/register.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/register.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,57 @@
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Register</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/login.css" rel="stylesheet"/>
+    <meta name="theme-color" content="#7952b3"/>
+</head>
+<body class="text-center">
+<header th:replace="common/navbar :: navbar"></header>
+<main class="form-signin">
+    <form th:action="@{/register}" method="post">
+        <h1 class="h3 mb-3 fw-normal">Register</h1>
+
+        <div class="form-floating">
+            <input type="text" class="form-control" th:classappend="${nameError} ? is-invalid" id="floatingFirstName" placeholder="First Name" name="firstName" required>
+            <label for="floatingFirstName">First Name</label>
+        </div>
+        <div class="form-floating">
+            <input type="text" class="form-control" th:classappend="${nameError} ? is-invalid" id="floatingLastName" placeholder="Last Name" name="lastName" required>
+            <label for="floatingLastName">Last Name</label>
+            <div class="invalid-feedback">
+                Firstname and lastname are required
+            </div>
+        </div>
+        <div class="form-floating">
+            <input type="email" class="form-control" th:classappend="${emailError} ? is-invalid" id="floatingInput" placeholder="name@example.com" name="email" required>
+            <label for="floatingInput">Email address</label>
+            <div class="invalid-feedback">
+                Email not valid.
+            </div>
+        </div>
+        <div class="form-floating">
+            <input type="password" class="form-control" th:classappend="${passwordError} ? is-invalid" id="floatingPassword" placeholder="Password" name="password" required>
+            <label for="floatingPassword">Password</label>
+        </div>
+        <div class="form-floating">
+            <input type="password" class="form-control" th:classappend="${passwordError} ? is-invalid" id="floatingConfirmPassword" placeholder="Confirm Password" name="confirmPassword" required>
+            <label for="floatingConfirmPassword">Confirm Password</label>
+            <div class="invalid-feedback">
+                Password does not match
+            </div>
+        </div>
+
+        <button class="w-100 btn btn-lg btn-primary" type="submit">Register</button>
+    </form>
+    <p th:if="${userExists}" class="text-danger">User already exists</p>
+    <div th:if="${success}" class="text-success">
+        <p>Registration successful</p>
+        <p>Please check your registered email for email verification</p>
+    </div>
+</main>
+<script src="/js/bootstrap.min.js"></script>
+</body>
+</html>
Index: src/main/resources/templates/upload.html
===================================================================
--- src/main/resources/templates/upload.html	(revision 55775667201163b458d59d683882d62bc92839e0)
+++ src/main/resources/templates/upload.html	(revision 55775667201163b458d59d683882d62bc92839e0)
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Upload</title>
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/fileUploadPreview.css" rel="stylesheet"/>
+</head>
+<body>
+<header th:replace="common/navbar :: navbar"></header>
+<br/>
+<br/>
+<br/>
+<br/>
+<div class="row">
+    <div class="col-md-4" id="left">
+        <form th:action="@{/newPost}" method="post" id="myForm" enctype="multipart/form-data" class="row g-3">
+            <div class="col-md-6">
+                <label for="title" class="form-label">Title</label>
+                <input type="text" class="form-control" id="title" name="title" required>
+            </div>
+            <div class="col-md-6">
+                <label for="fundsNeeded" class="form-label">Funds Needed</label>
+                <div class="input-group">
+                    <input type="number" class="form-control" id="fundsNeeded" name="fundsNeeded" required>
+                    <select class="input-group-text" name="currency">
+                        <option value="MKD">MKD</option>
+                        <option value="EUR">EUR</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col-12">
+                <label for="description" class="form-label">Description</label>
+                <textarea class="form-control" id="description" name="description" rows="5" required></textarea>
+            </div>
+            <div class="col-12">
+                Phone numbers
+            </div>
+            <div class="col-md-6">
+                <!--                <label for="telekom" class="form-label">Phone numbers</label>-->
+                <div class="input-group">
+                    <input type="text" class="form-control" id="telekom" name="telekom">
+                    <span class="input-group-text">Telekom</span>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <!--                <label for="a1" class="form-label"></label>-->
+                <div class="input-group">
+                    <input type="text" class="form-control" id="a1" name="a1">
+                    <span class="input-group-text">A1</span>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <label for="dateDue" class="form-label">Date due</label>
+                <input type="date" class="form-control" id="dateDue" name="dateDue" required>
+            </div>
+            <div class="col-md-6">
+                <label for="bankAccount" class="form-label">Bank account</label>
+                <input type="text" class="form-control" id="bankAccount" name="bankAccount" required>
+            </div>
+        </form>
+    </div>
+    <div class="col-md-5" id="right">
+        <div class="col-md-6">
+            <label for="titleImage" class="form-label">Title image</label>
+            <input type="file" class="form-control" id="titleImage" name="titleImage" form="myForm" required>
+        </div>
+        <div class="col-md-6">
+            <label for="images" class="form-label">Images</label>
+            <input type="file" class="form-control" id="images" name="images" form="myForm" multiple>
+        </div>
+        <div class="col-md-6">
+            <label for="images" class="form-label">Moderator images</label>
+            <input type="file" class="form-control" id="moderatorImages" name="moderatorImages" form="myForm" multiple required>
+        </div>
+        <br/>
+        <div id="drop-region">
+            <div class="drop-message">
+                Image preview
+            </div>
+            <div id="image-preview"></div>
+        </div>
+        <div class="row">
+            <div class="col-5"></div>
+            <div class="col-2">
+                <input type="submit" class="btn btn-primary" value="Upload post" form="myForm">
+            </div>
+            <div class="col-5"></div>
+        </div>
+    </div>
+</div>
+
+<script src="/js/bootstrap.min.js"></script>
+<script src="/js/fileUploadPreview.js"></script>
+</body>
+</html>
