Index: src/main/resources/application.properties
===================================================================
--- src/main/resources/application.properties	(revision 2d8c0e75b962f6dc505cbcda945b56f1946eb819)
+++ src/main/resources/application.properties	(revision b8dc7612c4ce79e01dfe5fa1fe25e62186eefcdb)
@@ -19,2 +19,10 @@
 
 server.port=9091
+
+spring.security.oauth2.client.registration.google.client-id=365912873832-mqicpsq1fbbi8e01ghslpulgblkngk3l.apps.googleusercontent.com
+spring.security.oauth2.client.registration.google.client-secret=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
+spring.security.oauth2.client.registration.google.scope=profile,email
+
+spring.security.oauth2.client.registration.facebook.client-id=429047632308553
+spring.security.oauth2.client.registration.facebook.client-secret=c13280b6c116663c5bdd85c5b7a986e1
+spring.security.oauth2.client.registration.facebook.scope=public_profile,email
Index: src/main/resources/static/css/risk.css
===================================================================
--- src/main/resources/static/css/risk.css	(revision b8dc7612c4ce79e01dfe5fa1fe25e62186eefcdb)
+++ src/main/resources/static/css/risk.css	(revision b8dc7612c4ce79e01dfe5fa1fe25e62186eefcdb)
@@ -0,0 +1,19 @@
+.red {
+    background-color: rgb(237, 28, 36);
+}
+
+.orange {
+    background-color: orange;
+}
+
+.yellow {
+    background-color: yellow;
+}
+
+.light-yellow {
+    background-color: lightgoldenrodyellow;
+}
+
+.green {
+    background-color: lightgreen;
+}
Index: src/main/resources/templates/album.html
===================================================================
--- src/main/resources/templates/album.html	(revision 2d8c0e75b962f6dc505cbcda945b56f1946eb819)
+++ src/main/resources/templates/album.html	(revision b8dc7612c4ce79e01dfe5fa1fe25e62186eefcdb)
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8"/>
@@ -7,4 +7,5 @@
     <!-- Bootstrap core CSS -->
     <link href="css/bootstrap.min.css" rel="stylesheet"/>
+    <link rel="stylesheet" href="css/risk.css"/>
 </head>
 <body>
@@ -26,4 +27,5 @@
                         <option value="dateDue">Date due</option>
                         <option value="fundsNeeded">Funds needed</option>
+                        <option value="riskFactor">Chance to collect funds</option>
                     </select>
                 </div>
@@ -47,5 +49,5 @@
             <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">
+                    <div class="card shadow-sm" th:classappend="${post.riskFactor < 25 ? 'red' : (post.riskFactor < 50 ? 'orange' : (post.riskFactor < 75 ? 'yellow' : (post.riskFactor < 100 ? 'light-yellow' : (post.riskFactor == 100 ? 'green' : '') )))}">
                         <img class="card-img" style="object-fit: contain" width="100%" height="225"
                              th:src="${post.imagesPath[0]}">
@@ -53,9 +55,11 @@
                             <h4 th:text="${post.title}" style="height: 60px"></h4>
                             <p class="card-text text-truncate" style="height: 45px" th:text="${post.description}"></p>
+                            <span th:if="${post.riskFactor < 101}" class="" style="color: black; margin-left: 62%;">Chance: <small th:text="${post.riskFactor}"></small></span>
+                            <span th:unless="${post.riskFactor < 101}" style="color: black; margin-left: 62%;">Chance: unavailable</span>
                             <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>
+                                    <a class="btn btn-sm btn-outline-secondary" style="color: black" th:href="@{/post(postid=${post.id})}">Open</a>
                                 </div>
-                                <span class="text-muted">Date due: <small th:text="${post.dateDue}"></small></span>
+                                <span class="" style="color: black">Date due: <small th:text="${post.dateDue}"></small></span>
                             </div>
                         </div>
Index: src/main/resources/templates/login.html
===================================================================
--- src/main/resources/templates/login.html	(revision 2d8c0e75b962f6dc505cbcda945b56f1946eb819)
+++ src/main/resources/templates/login.html	(revision b8dc7612c4ce79e01dfe5fa1fe25e62186eefcdb)
@@ -27,4 +27,6 @@
         <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
     </form>
+    <a th:href="@{/oauth2/authorization/google}" class="btn btn-primary">Continue with google</a>
+    <a th:href="@{/oauth2/authorization/facebook}" class="btn btn-primary">Continue with facebook</a>
     <p th:if="${param.error != null}" class="text-danger">Incorrect username or password</p>
     <p th:if="${successValidation}" class="text-success">Account validated</p>
Index: src/main/resources/templates/post.html
===================================================================
--- src/main/resources/templates/post.html	(revision 2d8c0e75b962f6dc505cbcda945b56f1946eb819)
+++ src/main/resources/templates/post.html	(revision b8dc7612c4ce79e01dfe5fa1fe25e62186eefcdb)
@@ -50,5 +50,5 @@
             <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>
+            <p><span th:text="${post.totalFundsCollected}"></span>/<span th:text="${post.fundsNeeded}"></span> - <span th:text="${post.currency}"></span></p>
             <h5>Date due:</h5>
             <p th:text="${post.dateDue}"></p>
