Index: src/main/resources/templates/project_pages/edit-role.html
===================================================================
--- src/main/resources/templates/project_pages/edit-role.html	(revision c19fe86cc2983836dcb157fee711e97b793ba974)
+++ src/main/resources/templates/project_pages/edit-role.html	(revision 4cfb3a5f62751cfe9f031a04e43ed8e3fe095843)
@@ -106,5 +106,5 @@
                 <!-- Submit -->
                 <div class="modal-footer d-flex justify-content-between">
-                    <a th:href="@{/projects/{ptitle}/roles (ptitle=${role.getProject().getTitle()})}" class="btn btn-secondary w-100 me-2">Cancel</a>
+                    <span class="btn btn-secondary w-100 me-2" id="btn-cancel">Cancel</span>
                     <button type="submit" id="update-role-modal-submit" class="btn btn-warning w-100">Update Role</button>
                 </div>
@@ -120,5 +120,4 @@
 <!-- Script to show modal by default -->
 <script>
-
     const getCheckedValues = (inputs) => {
         const values = []
@@ -149,4 +148,12 @@
         return document.body.dataset.roleId
     }
+
+    document.querySelector("#btn-cancel").addEventListener("click", ev => {
+        ev.preventDefault()
+
+        const pTitle = getProjectTitle()
+
+        window.location.replace(`/projects/${pTitle}/roles`)
+    })
 
     document.getElementById('update-role-form').addEventListener('submit', async function(event) {
Index: src/main/resources/templates/project_pages/project-roles.html
===================================================================
--- src/main/resources/templates/project_pages/project-roles.html	(revision c19fe86cc2983836dcb157fee711e97b793ba974)
+++ src/main/resources/templates/project_pages/project-roles.html	(revision 4cfb3a5f62751cfe9f031a04e43ed8e3fe095843)
@@ -1,9 +1,14 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="en"
+      xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title th:text="${project.getTitle()} + ' - Roles'">Project Roles</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title th:text="${project.getTitle()} + ' - Roles'">
+        Project
+        Roles</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+          rel="stylesheet">
     <style>
         .error-bubble {
@@ -14,14 +19,16 @@
             border-radius: 20px;
             font-weight: bold;
-            box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
-        }
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+        }
+
         .badge {
             background: #00e7ff80;
         }
+
         .role-card {
             border-radius: 12px;
             padding: 10px 15px;
             margin-bottom: 10px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
     </style>
@@ -32,7 +39,10 @@
 <div class="container mt-4">
     <div class="w-100 d-flex justify-content-center align-items-center mb-3">
-        <div th:if="${errMsg!=null}" class="error-bubble">
-            <h5 class="text-center">Error</h5>
-            <p th:text="${errMsg}" class="mb-0"></p>
+        <div th:if="${errMsg!=null}"
+             class="error-bubble">
+            <h5 class="text-center">
+                Error</h5>
+            <p th:text="${errMsg}"
+               class="mb-0"></p>
         </div>
     </div>
@@ -41,8 +51,15 @@
         <div class="card shadow-sm mb-4">
             <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
-                <h3>Roles for <span th:text="${project.getTitle()}">Project Title</span></h3>
+                <h3>
+                    Roles
+                    for
+                    <span th:text="${project.getTitle()}">Project Title</span>
+                </h3>
                 <div th:if="${isManager}">
-                    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addRoleModal">
-                        Add Role
+                    <button class="btn btn-success btn-sm"
+                            data-bs-toggle="modal"
+                            data-bs-target="#addRoleModal">
+                        Add
+                        Role
                     </button>
                 </div>
@@ -50,20 +67,37 @@
 
             <div class="card-body d-flex flex-column gap-3">
-                <div th:if="${developersRoles.isEmpty()}" class="text-center text-muted">
-                    No roles defined for this project yet.
-                </div>
-
-                <div th:each="role : ${developersRoles}" class="role-card d-flex justify-content-between align-items-center">
+                <div th:if="${developersRoles.isEmpty()}"
+                     class="text-center text-muted">
+                    No
+                    roles
+                    defined
+                    for
+                    this
+                    project
+                    yet.
+                </div>
+
+                <div th:each="role : ${developersRoles}"
+                     class="role-card d-flex justify-content-between align-items-center">
                     <div>
-                        <h5 th:text="${role.getName()}">Role Name</h5>
-<!--                        <small th:text="'Members: ' + ${role.memberCount}">Members: 0</small>-->
+                        <h5 th:text="${role.getName()}">
+                            Role
+                            Name</h5>
+                        <!--                        <small th:text="'Members: ' + ${role.memberCount}">Members: 0</small>-->
                     </div>
                     <div class="d-flex gap-2">
-                        <button th:if="${isManager}" class="btn btn-warning btn-sm"
-                                data-bs-toggle="modal" th:data-bs-target="'#updateRoleModal-' + ${role.getId()}">
+                        <button th:if="${isManager}"
+                                class="btn btn-warning btn-sm"
+                                data-bs-toggle="modal"
+                                th:data-bs-target="'#updateRoleModal-' + ${role.getId()}">
                             <a th:href="@{/projects/{title}/roles/{id}/edit (title=${project.getTitle()},id=${role.getId()})}">Edit</a>
                         </button>
-                        <form th:if="${isManager}" th:action="@{/projects/{projectTitle}/roles/{id}/delete (projectTitle=${project.getTitle()}, id=${role.getId()})}" method="post">
-                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
+                        <form th:if="${isManager}"
+                              th:action="@{/projects/{projectTitle}/roles/{id}/delete (projectTitle=${project.getTitle()}, id=${role.getId()})}"
+                              method="post">
+                            <button type="submit"
+                                    class="btn btn-danger btn-sm">
+                                Delete
+                            </button>
                         </form>
                     </div>
@@ -75,29 +109,59 @@
 
 <!-- Add Role Modal -->
-<div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="addRoleModal"
+     tabindex="-1"
+     aria-labelledby="addRoleModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Add New Role</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <h5 class="modal-title">
+                    Add
+                    New
+                    Role</h5>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
             </div>
-            <form th:action="@{/projects/{title}/roles/add(title=${project.getTitle()})}" method="post" id="add-role-form">
+            <form th:action="@{/projects/{title}/roles/add(title=${project.getTitle()})}"
+                  method="post"
+                  id="add-role-form">
                 <div class="modal-body">
                     <!-- Role Name -->
                     <div class="mb-3">
-                        <label for="roleName" class="form-label">Role Name</label>
-                        <input type="text" class="form-control" id="roleName" name="roleName" required>
+                        <label for="roleName"
+                               class="form-label">Role
+                            Name</label>
+                        <input type="text"
+                               class="form-control"
+                               id="roleName"
+                               name="roleName"
+                               required>
                     </div>
 
                     <!-- Override Type -->
                     <div class="mb-3">
-                        <label class="form-label">Override Type</label>
+                        <label class="form-label">Override
+                            Type</label>
                         <div class="form-check">
-                            <input class="form-check-input" type="radio" name="overrideType" id="includeType" value="INCLUDE" checked>
-                            <label class="form-check-label" for="includeType">INCLUDE</label>
+                            <input class="form-check-input"
+                                   type="radio"
+                                   name="overrideType"
+                                   id="includeType"
+                                   value="INCLUDE"
+                                   checked>
+                            <label class="form-check-label"
+                                   for="includeType">INCLUDE</label>
                         </div>
                         <div class="form-check">
-                            <input class="form-check-input" type="radio" name="overrideType" id="excludeType" value="EXCLUDE">
-                            <label class="form-check-label" for="excludeType">EXCLUDE</label>
+                            <input class="form-check-input"
+                                   type="radio"
+                                   name="overrideType"
+                                   id="excludeType"
+                                   value="EXCLUDE">
+                            <label class="form-check-label"
+                                   for="excludeType">EXCLUDE</label>
                         </div>
                     </div>
@@ -110,6 +174,8 @@
                         <!-- Global Permissions -->
                         <div class="mb-2 border p-2 rounded">
-                            <strong>Global Permissions</strong>
-                            <div class="d-flex flex-wrap gap-2 mt-1" th:each="permission : ${globalPermissions}">
+                            <strong>Global
+                                Permissions</strong>
+                            <div class="d-flex flex-wrap gap-2 mt-1"
+                                 th:each="permission : ${globalPermissions}">
                                 <div class="form-check">
                                     <input class="form-check-input perm-checkbox"
@@ -118,6 +184,8 @@
                                            th:name="'global-permission'"
                                            th:value="${permission.toLowerCase()}">
-<!--                                           th:checked="${permissionDefaultSelected.contains(permission.name)}">-->
-                                    <label class="form-check-label" th:for="${permission}" th:text="${permission.toLowerCase() + ' channels'}">Permission</label>
+                                    <!--                                           th:checked="${permissionDefaultSelected.contains(permission.name)}">-->
+                                    <label class="form-check-label"
+                                           th:for="${permission}"
+                                           th:text="${permission.toLowerCase() + ' channels'}">Permission</label>
                                 </div>
                             </div>
@@ -126,9 +194,12 @@
                         <!-- Per-Resource Permissions -->
                         <div class="mb-2 border p-2 rounded">
-                            <strong>Per-Resource Permissions</strong>
+                            <strong>Per-Resource
+                                Permissions</strong>
                             <div th:each="permission : ${perResourcePermissions}">
                                 <div class="mb-2">
-                                    <strong th:text="${permission}">Permission Name</strong>
-                                    <div class="d-flex flex-wrap gap-2 mt-1" th:each="channel : ${project.getChannels()}">
+                                    <strong th:text="${permission}">Permission
+                                        Name</strong>
+                                    <div class="d-flex flex-wrap gap-2 mt-1"
+                                         th:each="channel : ${project.getChannels()}">
                                         <div class="form-check">
                                             <input class="form-check-input perm-checkbox"
@@ -141,5 +212,6 @@
                                             <label class="form-check-label"
                                                    th:for="${permission + '-' + channel.getProjectResource().getId()}"
-                                                   th:text="${channel.getName()}">Resource Name</label>
+                                                   th:text="${channel.getName()}">Resource
+                                                Name</label>
                                         </div>
                                     </div>
@@ -153,5 +225,10 @@
                 <!-- Submit -->
                 <div class="modal-footer">
-                    <button type="submit" id="add-role-modal-submit" class="btn btn-success w-100">Add Role</button>
+                    <button type="submit"
+                            id="add-role-modal-submit"
+                            class="btn btn-success w-100">
+                        Add
+                        Role
+                    </button>
                 </div>
             </form>
@@ -162,6 +239,6 @@
     const getCheckedValues = (inputs) => {
         const values = []
-        for(let i of inputs){
-            if(i.checked)
+        for (let i of inputs) {
+            if (i.checked)
                 values.push(i.value)
         }
@@ -171,6 +248,6 @@
     const processPerResourcePermissions = (inputs) => {
         const values = []
-        for(let i of inputs){
-            if(i.checked){
+        for (let i of inputs) {
+            if (i.checked) {
                 values.push({
                     name: i.value,
@@ -186,5 +263,5 @@
     }
 
-    document.getElementById('add-role-form').addEventListener('submit', async function(event) {
+    document.getElementById('add-role-form').addEventListener('submit', async function (event) {
         event.preventDefault()
         const roleNameInput = document.querySelector("#roleName")
@@ -202,5 +279,5 @@
             method: "POST",
             headers: {
-                "Content-Type" : "application/json",
+                "Content-Type": "application/json",
             },
             body: JSON.stringify({
@@ -217,5 +294,5 @@
         })
 
-        if(!response.ok)
+        if (!response.ok)
             throw new Error("Something went wrong")
 
@@ -235,4 +312,12 @@
         includeRadio.addEventListener("change", updateCheckboxes);
         excludeRadio.addEventListener("change", updateCheckboxes);
+
+        const previousPage = document.referrer
+        const pattern = /\/roles\/\d+\/edit$/;
+
+        if (pattern.test(previousPage)) {
+            history.replaceState(null, "", window.location.href);
+        }
+
     });
 </script>
