From f839d2964c41d86b2b5769aaf19d1d3baab8ccf2 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Thu, 26 Sep 2024 15:03:04 +0300
Subject: [PATCH 01/17] Add footer to website templates

---
 src/main/resources/messages_en.properties     |  27 ++
 src/main/resources/messages_ru.properties     |  29 +-
 .../resources/templates/account/acc-info.html | 101 ++---
 .../templates/account/pass-update.html        |  71 +--
 .../templates/account/prof-update.html        |  79 ++--
 .../resources/templates/account/signup.html   |  86 ++--
 .../resources/templates/create-workspace.html |  67 +--
 .../resources/templates/error-general.html    |   1 +
 .../resources/templates/fragments/footer.html |  66 +--
 src/main/resources/templates/login.html       |  54 +--
 .../templates/workspace/wks-info.html         | 113 ++---
 .../templates/workspace/wks-integration.html  |  65 +--
 .../templates/workspace/wks-settings.html     | 239 +++++------
 .../templates/workspace/wks-typos.html        | 403 +++++++++---------
 .../templates/workspace/wks-update.html       | 125 +++---
 .../templates/workspace/wks-users.html        | 249 +++++------
 src/main/resources/templates/workspaces.html  |  33 +-
 17 files changed, 925 insertions(+), 883 deletions(-)

diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index d55eae14..373f8721 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -48,6 +48,7 @@ link.signup=Sign Up
 navbar.logout=Logout
 navbar.login=Login
 navbar.signup=Sign Up
+navbar.my-workspaces=My Workspaces
 navbar.create-workspace=Create Workspace
 navbar.account-info=Account Info
 
@@ -106,3 +107,29 @@ btn.delete-from-wks=Delete from workspace
 alert.password-wrong-format=Password must be between 8 and 20 characters \
   and contain only latin letters, digits and symbols ~`!@#$%^&*()_-+={[}]|\:;"'<,>.?/
 alert.passwords-dont-match=Confirmation does not match the password
+
+text.heroes=The free service for sending messages about typos in the text on your website. After adding a widget to your site, visitors have the opportunity to highlight an error or typo and report it to the administrator.
+text.features-header=FixIT helps websites
+text.features-sub-header1=Improve content quality
+text.features-description1=Users can quickly report typos and errors, which helps quickly eliminate inaccuracies and improve the quality of texts, improving the perception of information and confidence in the resource.
+text.features-sub-header2=Manage errors effectively
+text.features-description2=Tracking the status of errors allows administrators to effectively manage the process of fixing and updating content, reducing the time required to detect and resolve inaccuracies, which helps ensure that the site is updated quickly.
+text.features-sub-header3=Increase user engagement
+text.features-description3=Integration of the widget promotes active interaction between users and the site administration, making them part of the process of improving the resource. This contributes to the formation of a close and mutually beneficial user community.
+text.how-it-works-header=How FixIT works
+text.how-it-works-sub-header1=Create your own workspace
+text.how-it-works-description1=Create an account and add an unlimited number of sites.
+text.how-it-works-sub-header2=Add a widget to your site
+text.how-it-works-description2=Add a widget to your site to make it easy for users to report bugs.
+text.how-it-works-sub-header3=Manage your incoming messages
+text.how-it-works-description3=Manage incoming messages and effectively correct typos found.
+
+footer.about=About project
+footer.source-code=Source code
+footer.telegram=Telegram Hexlet channel Volunteers
+footer.help=Help
+footer.blog=Blog
+footer.study=Study for free
+footer.books=Recommended books
+footer.other-projects=Other open source projects
+footer.additionally=Additionally
diff --git a/src/main/resources/messages_ru.properties b/src/main/resources/messages_ru.properties
index 8d05ca07..e5eb8421 100644
--- a/src/main/resources/messages_ru.properties
+++ b/src/main/resources/messages_ru.properties
@@ -53,7 +53,8 @@ alert.bad-credential=Неверные логин и/или пароль
 
 navbar.login=Войти
 navbar.logout=Выход
-navbar.signup=Регистрация
+navbar.signup=Зарегистрироваться
+navbar.my-workspaces=Мои Пространства
 navbar.account-info=Информация об аккаунте
 navbar.create-workspace=Создать Пространство
 
@@ -104,3 +105,29 @@ alert.password-wrong-format=Пароль должен быть от 8 до 20 с
   \ и содержать только буквы латинского алфавита,\
   \ цифры и символы ~`!@#$%^&*()_-+={[}]|\:;"'<,>.?/
 alert.passwords-dont-match=Подтверждение не совпадает с паролем
+
+text.heroes=Бесплатный сервис для отправки сообщений об ошибках в тексте на Вашем сайте. После добавлении на ваш сайт виджета посетители имеют возможность выделить ошибку или опечатку и сообщить об этом администратору.
+text.features-header=FixIT помогает сайтам
+text.features-sub-header1=Улучшить качество контента
+text.features-description1=Пользователи могут быстро сообщать об опечатках и ошибках, что способствует оперативному устранению неточностей и повышению качества текстов, улучшая восприятие информации и доверие к ресурсу.
+text.features-sub-header2=Эффективно управлять ошибками
+text.features-description2=Отслеживание статуса ошибок позволяет администраторам эффективно управлять процессом исправления и обновления контента, сокращая время, необходимое на обнаружение и устранение неточностей, что способствует оперативному обновлению сайта.
+text.features-sub-header3=Повышать вовлеченность пользователей
+text.features-description3=Интеграция виджета способствует активному взаимодействию пользователей с администрацией сайта, делая их частью процесса улучшения ресурса. Это способствует формированию тесного и взаимовыгодного сообщества пользователей.
+text.how-it-works-header=Как FixIT работает
+text.how-it-works-sub-header1=Создайте свое рабочее пространство
+text.how-it-works-description1=Создайте аккаунт и добавляйте неограниченное количество сайтов.
+text.how-it-works-sub-header2=Добавьте виджет на сайт
+text.how-it-works-description2=Добавьте виджет на сайт, чтобы пользователи могли легко сообщать об ошибках.
+text.how-it-works-sub-header3=Управляйте входящими сообщениями
+text.how-it-works-description3=Управляйте входящими сообщениями и эффективно устраняйте найденные опечатки.
+
+footer.about=О проекте
+footer.source-code=Исходный код
+footer.telegram=Telegram Hexlet канал Волонтеры
+footer.help=Помощь
+footer.blog=Блог
+footer.study=Учиться бесплатно
+footer.books=Рекомендуемые книги
+footer.other-projects=Другие open source проекты
+footer.additionally=Дополнительно
diff --git a/src/main/resources/templates/account/acc-info.html b/src/main/resources/templates/account/acc-info.html
index f6c0a46b..aa0c5e0a 100644
--- a/src/main/resources/templates/account/acc-info.html
+++ b/src/main/resources/templates/account/acc-info.html
@@ -1,58 +1,59 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container" th:object="${accInfo}">
-    <div class="card mb-3">
-        <div class="card-body">
-            <h5 class="card-title mb-1" th:text="#{acc-info.card-title.general}"></h5>
-            <div class="row mb-1">
-                <div class="col" th:text="#{firstname}"></div>
-                <div class="col" th:text="*{firstName}"></div>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container" th:object="${accInfo}">
+        <div class="card mb-3">
+            <div class="card-body">
+                <h5 class="card-title mb-1" th:text="#{acc-info.card-title.general}"></h5>
+                <div class="row mb-1">
+                    <div class="col" th:text="#{firstname}"></div>
+                    <div class="col" th:text="*{firstName}"></div>
+                </div>
+                <div class="row mb-1">
+                    <div class="col" th:text="#{lastname}"></div>
+                    <div class="col" th:text="*{lastName}"></div>
+                </div>
+                <div class="row mb-1">
+                    <div class="col" th:text="#{username}"></div>
+                    <div class="col" th:text="*{username}"></div>
+                </div>
+                <div class="row mb-3">
+                    <div class="col" th:text="#{email}"></div>
+                    <div class="col" th:text="*{email}"></div>
+                </div>
+                <a class="btn btn-primary" th:href="@{/account/update}" th:text="#{btn.edit}"></a>
             </div>
-            <div class="row mb-1">
-                <div class="col" th:text="#{lastname}"></div>
-                <div class="col" th:text="*{lastName}"></div>
-            </div>
-            <div class="row mb-1">
-                <div class="col" th:text="#{username}"></div>
-                <div class="col" th:text="*{username}"></div>
-            </div>
-            <div class="row mb-3">
-                <div class="col" th:text="#{email}"></div>
-                <div class="col" th:text="*{email}"></div>
-            </div>
-            <a class="btn btn-primary" th:href="@{/account/update}" th:text="#{btn.edit}"></a>
         </div>
-    </div>
-    <div class="card mb-3">
-        <div class="card-body">
-            <h5 class="card-title mb-3" th:text="#{password}"></h5>
-            <a class="btn btn-primary" th:href="@{/account/password}" th:text="#{btn.edit}"></a>
+        <div class="card mb-5">
+            <div class="card-body">
+                <h5 class="card-title mb-3" th:text="#{password}"></h5>
+                <a class="btn btn-primary" th:href="@{/account/password}" th:text="#{btn.edit}"></a>
+            </div>
         </div>
-    </div>
-    <h5 class="card-title mb-1" th:text="#{acc-info.card-title.workspaces}"></h5>
-    <table class="table table-bordered table-hover mt-3">
-        <thead>
-        <tr>
-            <th class="col-1" th:text="#{acc-info.wks.name}"></th>
-            <th class="col-1" th:text="#{acc-info.wks.url}"></th>
-            <th class="col-1" th:text="#{acc-info.wks.descr}"></th>
-            <th class="col-1" th:text="#{username}"></th>
-            <th class="col-1" th:text="#{acc-info.wks.role}"></th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr th:each="workspaceRoleInfo : ${workspaceRoleInfoList}" th:object="${workspaceRoleInfo}">
-            <td th:text="*{workspaceName}"></td>
-            <td th:text="*{workspaceUrl}"></td>
-            <td th:text="*{workspaceDescription}"></td>
-            <td th:text="*{username}"></td>
-            <td th:text="*{role}"></td>
-        </tr>
-        </tbody>
-    </table>
-</main>
+        <h5 class="card-title mb-1" th:text="#{acc-info.card-title.workspaces}"></h5>
+        <table class="table table-bordered table-hover">
+            <thead>
+            <tr>
+                <th class="col-1" th:text="#{acc-info.wks.name}"></th>
+                <th class="col-1" th:text="#{acc-info.wks.url}"></th>
+                <th class="col-1" th:text="#{acc-info.wks.descr}"></th>
+                <th class="col-1" th:text="#{username}"></th>
+                <th class="col-1" th:text="#{acc-info.wks.role}"></th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="workspaceRoleInfo : ${workspaceRoleInfoList}" th:object="${workspaceRoleInfo}">
+                <td th:text="*{workspaceName}"></td>
+                <td th:text="*{workspaceUrl}"></td>
+                <td th:text="*{workspaceDescription}"></td>
+                <td th:text="*{username}"></td>
+                <td th:text="*{role}"></td>
+            </tr>
+            </tbody>
+        </table>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/account/pass-update.html b/src/main/resources/templates/account/pass-update.html
index 00009fd4..bc08e7bf 100644
--- a/src/main/resources/templates/account/pass-update.html
+++ b/src/main/resources/templates/account/pass-update.html
@@ -1,41 +1,42 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-    <div class="row">
-        <div class="col">
-            <form th:action="@{/account/password}" th:method="put" th:object="${updatePassword}">
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputOldPassword" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('oldPassword') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{oldPassword}" type="password">
-                    <label for="inputOldPassword" th:text="#{password.current}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('oldPassword')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputNewPassword" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('newPassword') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{newPassword}" type="password">
-                    <label for="inputNewPassword" th:text="#{password.new}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('newPassword')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputConfirmPassword" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('confirmNewPassword') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{confirmNewPassword}" type="password">
-                    <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('confirmNewPassword')}" th:text="${err}"></div>
-                </div>
-                <div th:if="${#fields.hasGlobalErrors()}">
-                    <div class="alert alert-danger" th:each="err : ${#fields.globalErrors()}" th:text="${err}"></div>
-                </div>
-                <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
-                <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
-            </form>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container">
+        <div class="row">
+            <div class="col">
+                <form th:action="@{/account/password}" th:method="put" th:object="${updatePassword}">
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputOldPassword" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('oldPassword') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{oldPassword}" type="password">
+                        <label for="inputOldPassword" th:text="#{password.current}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('oldPassword')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputNewPassword" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('newPassword') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{newPassword}" type="password">
+                        <label for="inputNewPassword" th:text="#{password.new}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('newPassword')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputConfirmPassword" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('confirmNewPassword') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{confirmNewPassword}" type="password">
+                        <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('confirmNewPassword')}" th:text="${err}"></div>
+                    </div>
+                    <div th:if="${#fields.hasGlobalErrors()}">
+                        <div class="alert alert-danger" th:each="err : ${#fields.globalErrors()}" th:text="${err}"></div>
+                    </div>
+                    <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
+                    <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
+                </form>
+            </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/account/prof-update.html b/src/main/resources/templates/account/prof-update.html
index d9d3332e..28f631e2 100644
--- a/src/main/resources/templates/account/prof-update.html
+++ b/src/main/resources/templates/account/prof-update.html
@@ -1,45 +1,46 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-    <div class="row">
-        <div class="col">
-            <form th:action="@{/account/update}" th:method="put" th:object="${updateProfile}">
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputFirstName" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('firstName') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{firstName}" type="text">
-                    <label for="inputFirstName" th:text="#{firstname}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('firstName')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputLastName" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('lastName') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{lastName}" type="text">
-                    <label for="inputLastName" th:text="#{lastname}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('lastName')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputUsername" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('username') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{username}" type="text">
-                    <label for="inputUsername" th:text="#{username}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('username')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputEmail" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('email') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{email}" type="email">
-                    <label for="inputEmail" th:text="#{email}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('email')}" th:text="${err}"></div>
-                </div>
-                <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
-                <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
-            </form>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container">
+        <div class="row">
+            <div class="col">
+                <form th:action="@{/account/update}" th:method="put" th:object="${updateProfile}">
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputFirstName" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('firstName') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{firstName}" type="text">
+                        <label for="inputFirstName" th:text="#{firstname}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('firstName')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputLastName" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('lastName') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{lastName}" type="text">
+                        <label for="inputLastName" th:text="#{lastname}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('lastName')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputUsername" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('username') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{username}" type="text">
+                        <label for="inputUsername" th:text="#{username}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('username')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputEmail" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('email') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{email}" type="email">
+                        <label for="inputEmail" th:text="#{email}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('email')}" th:text="${err}"></div>
+                    </div>
+                    <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
+                    <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
+                </form>
+            </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/account/signup.html b/src/main/resources/templates/account/signup.html
index 4af1f6e7..124feed4 100644
--- a/src/main/resources/templates/account/signup.html
+++ b/src/main/resources/templates/account/signup.html
@@ -1,56 +1,56 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-    <div class="row">
-        <div class="col">
-            <form method="post" th:action="@{/signup}" th:object="${signupAccount}">
-                <div class="form-floating mb-3">
-                    <input id="inputUsername" placeholder="p" type="text" th:field="*{username}"
-                           class="form-control"
-                           th:classappend="${!#fields.hasErrors('username') && formModified}? 'is-valid'"
-                           th:errorclass="is-invalid">
-                    <label for="inputUsername" th:text="#{username}"></label>
-                    <div class="invalid-feedback" th:if="${#fields.hasErrors('username')}">
-                        <p th:each="err : ${#fields.errors('username')}" th:text="${err}"></p>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container">
+        <div class="row">
+            <div class="col">
+                <form method="post" th:action="@{/signup}" th:object="${signupAccount}">
+                    <div class="form-floating mb-3">
+                        <input id="inputUsername" placeholder="p" type="text" th:field="*{username}"
+                               class="form-control"
+                               th:classappend="${!#fields.hasErrors('username') && formModified}? 'is-valid'"
+                               th:errorclass="is-invalid">
+                        <label for="inputUsername" th:text="#{username}"></label>
+                        <div class="invalid-feedback" th:if="${#fields.hasErrors('username')}">
+                            <p th:each="err : ${#fields.errors('username')}" th:text="${err}"></p>
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-floating mb-3">
-                    <input id="inputEmail" placeholder="p" type="email" th:field="*{email}"
-                           class="form-control"
-                           th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
-                           th:errorclass="is-invalid">
-                    <label for="inputEmail" th:text="#{email}"></label>
-                    <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
-                        <p th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
+                    <div class="form-floating mb-3">
+                        <input id="inputEmail" placeholder="p" type="email" th:field="*{email}"
+                               class="form-control"
+                               th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
+                               th:errorclass="is-invalid">
+                        <label for="inputEmail" th:text="#{email}"></label>
+                        <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
+                            <p th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-floating mb-3">
-                    <input id="inputPassword" placeholder="p" type="password" th:field="*{password}"
-                           class="form-control" th:errorclass="is-invalid">
-                    <label for="inputPassword" th:text="#{password}"></label>
-                    <div class="invalid-feedback" th:if="${#fields.hasErrors('password')}">
-                        <p th:each="err : ${#fields.errors('password')}" th:text="${err}"></p>
+                    <div class="form-floating mb-3">
+                        <input id="inputPassword" placeholder="p" type="password" th:field="*{password}"
+                               class="form-control" th:errorclass="is-invalid">
+                        <label for="inputPassword" th:text="#{password}"></label>
+                        <div class="invalid-feedback" th:if="${#fields.hasErrors('password')}">
+                            <p th:each="err : ${#fields.errors('password')}" th:text="${err}"></p>
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-floating mb-3">
-                    <input id="inputConfirmPassword" placeholder="p" type="password" th:field="*{confirmPassword}"
-                           class="form-control" th:errorclass="is-invalid">
-                    <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
-                    <div class="invalid-feedback" th:if="${#fields.hasErrors('confirmPassword')}">
-                        <p th:each="err : ${#fields.errors('confirmPassword')}" th:text="${err}"></p>
+                    <div class="form-floating mb-3">
+                        <input id="inputConfirmPassword" placeholder="p" type="password" th:field="*{confirmPassword}"
+                               class="form-control" th:errorclass="is-invalid">
+                        <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
+                        <div class="invalid-feedback" th:if="${#fields.hasErrors('confirmPassword')}">
+                            <p th:each="err : ${#fields.errors('confirmPassword')}" th:text="${err}"></p>
+                        </div>
                     </div>
-                </div>
-                <button class="btn btn-primary" type="submit" th:text="#{btn.create-account}"></button>
-            </form>
+                    <button class="btn btn-primary" type="submit" th:text="#{btn.create-account}"></button>
+                </form>
+            </div>
         </div>
-    </div>
-</main>
-
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/create-workspace.html b/src/main/resources/templates/create-workspace.html
index 88c0a31f..8da3ff0b 100644
--- a/src/main/resources/templates/create-workspace.html
+++ b/src/main/resources/templates/create-workspace.html
@@ -1,39 +1,40 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-    <div class="row">
-        <div class="col">
-            <form method="post" th:action="@{/workspace}" th:object="${createWorkspace}">
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputWksUrl" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{url}"
-                           type="url">
-                    <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control" id="inputWksName" placeholder="p"
-                           th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
-                           th:errorclass="is-invalid" th:field="*{name}"
-                           type="text">
-                    <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
-                </div>
-                <div class="form-floating mb-3">
-                    <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
-                              th:errorclass="is-invalid" th:field="*{description}"></textarea>
-                    <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
-                    <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}"
-                         th:text="${err}"></div>
-                </div>
-                <button class="btn btn-primary" type="submit" th:text="#{btn.create}"></button>
-            </form>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container">
+        <div class="row">
+            <div class="col">
+                <form method="post" th:action="@{/workspace}" th:object="${createWorkspace}">
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputWksUrl" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{url}"
+                               type="url">
+                        <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputWksName" placeholder="p"
+                               th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
+                               th:errorclass="is-invalid" th:field="*{name}"
+                               type="text">
+                        <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
+                                  th:errorclass="is-invalid" th:field="*{description}"></textarea>
+                        <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
+                        <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}"
+                             th:text="${err}"></div>
+                    </div>
+                    <button class="btn btn-primary" type="submit" th:text="#{btn.create}"></button>
+                </form>
+            </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/error-general.html b/src/main/resources/templates/error-general.html
index e8b7e77e..b98ba45a 100644
--- a/src/main/resources/templates/error-general.html
+++ b/src/main/resources/templates/error-general.html
@@ -6,4 +6,5 @@
     <span th:text="#{alert.general-error}"></span>
 </div>
 </body>
+<footer th:replace="~{fragments/footer :: footer}"></footer>
 </html>
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index 20ea9a34..52a0a127 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,91 +1,67 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <body class="d-flex min-vh-100">
-<footer th:fragment="footer" class="p-3 bg-dark text-light mt-auto">
+<footer th:fragment="footer" class="p-3 bg-dark bg-gradient text-light mt-auto">
     <div class="container-xl">
         <div class="row justify-content-lg-around">
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <a class="text-dark px-0 py-0 text-decoration-none " href="https://ru.hexlet.io">
-                    <p class="h3 mb-2 text-light">© Hexlet</p>
+                <a class="text-dark px-0 py-0 text-decoration-none" href="https://ru.hexlet.io">
+                    <p class="mb-2 text-light">© Hexlet</p>
                 </a>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" th:href="@{/about}">
-                            О проекте
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" th:href="@{/about}" th:text="#{footer.about}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-correction"
-                           target="_blank">
-                            Исходный код
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://github.com/Hexlet/hexlet-correction"
+                           target="_blank" th:text="#{footer.source-code}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://t.me/hexletcommunity/12"
-                           target="_blank">
-                            Telegram Hexlet канал Волонтеры
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://t.me/hexletcommunity/12"
+                           target="_blank" th:text="#{footer.telegram}"></a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Помощь</p>
+                <p class="mb-2" th:text="#{footer.help}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/blog">
-                            Блог
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/blog" th:text="#{footer.blog}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/webinars">
-                            Учиться бесплатно
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/webinars" th:text="#{footer.study}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light"
-                           href="https://ru.hexlet.io/pages/recommended-books">
-                            Рекомендуемые книги
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted"
+                           href="https://ru.hexlet.io/pages/recommended-books" th:text="#{footer.books}"></a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Другие open-source проекты</p>
+                <p class="mb-2" th:text="#{footer.other-projects}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-cv">
-                            Хекслет-резюме
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://codebattle.hexlet.io/">Codebattle</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-editor">
-                            Хекслет-редактор
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://runit.hexlet.ru/">RunIT</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-friends">
-                            Друзья Хекслета
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.code-basics.com/">Code Basics</a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Дополнительно</p>
+                <p class="mb-2" th:text="#{footer.additionally}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.code-basics.com/">
-                            Code Basics
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://guides.hexlet.io/">Hexlet Guides</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://codebattle.hexlet.io/">
-                            Кодбаттл
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://sicp.hexlet.io/ru">Hexlet SICP</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://guides.hexlet.io/">
-                            Гайды Хекслета
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://cv.hexlet.io/">Hexlet-CV</a>
                     </li>
                 </ul>
             </div>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index a81f88dc..dd0007b9 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,34 +1,34 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-<div class="row">
-    <div class="col">
-        <div class="invalid-feedback" role="alert" th:if="${param.error}" th:text="#{alert.bad-credential}"></div>
-        <div class="alert alert-warning" role="alert" th:if="${param.logout}" th:text="#{alert.logout}"></div>
-        <form method="post" th:action="@{/login}">
-            <div class="form-floating mb-3">
-                <input autofocus class="form-control" id="inputEmail"
-                       name="email" placeholder="Email" required type="text">
-                <label for="inputEmail" th:text="#{email}"></label>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container">
+        <div class="row">
+            <div class="col">
+                <div class="invalid-feedback" role="alert" th:if="${param.error}" th:text="#{alert.bad-credential}"></div>
+                <div class="alert alert-warning" role="alert" th:if="${param.logout}" th:text="#{alert.logout}"></div>
+                <form method="post" th:action="@{/login}">
+                    <div class="form-floating mb-3">
+                        <input autofocus class="form-control" id="inputEmail"
+                               name="email" placeholder="Email" required type="text">
+                        <label for="inputEmail" th:text="#{email}"></label>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="inputPassword" name="password"
+                               placeholder="Password" required type="password">
+                        <label for="inputPassword" th:text="#{password}"></label>
+                    </div>
+                    <button class="btn btn-primary" type="submit" th:text="#{btn.login}"></button>
+                </form>
             </div>
-            <div class="form-floating mb-3">
-                <input class="form-control" id="inputPassword" name="password"
-                       placeholder="Password" required type="password">
-                <label for="inputPassword" th:text="#{password}"></label>
+        </div>
+        <div class="row">
+            <div class="mt-4">
+                <a class="link-primary" th:href="@{/signup}" th:text="#{link.signup}"></a>
             </div>
-            <button class="btn btn-primary" type="submit" th:text="#{btn.login}"></button>
-        </form>
-    </div>
-</div>
-<div class="row">
-    <div class="mt-4">
-        <a class="link-primary" th:href="@{/signup}" th:text="#{link.signup}"></a>
-    </div>
-</div>
-</main>
-
+        </div>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-info.html b/src/main/resources/templates/workspace/wks-info.html
index 8e563e97..dd56925f 100644
--- a/src/main/resources/templates/workspace/wks-info.html
+++ b/src/main/resources/templates/workspace/wks-info.html
@@ -1,66 +1,67 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
-    <div class="row">
-        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'info')"></div>
-        <div class="col">
-            <div class="row my-3"
-                 th:if="${sumTypoInWks} > 0"
-                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-            <div class="row">
-                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-            </div>
-            <div class="row"
-                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-            <div class="row row-cols-1 row-cols-md-2 g-4">
-                <div class="col">
-                    <div class="card" th:object="${wksInfo}">
-                        <div class="card-body">
-                            <h5 class="card-title" th:text="*{name}"></h5>
-                            <p class="card-text" th:text="*{url}"></p>
-                            <p class="card-text" th:text="*{description}"></p>
-                            <form th:action="@{'/workspace/' + *{id}}" th:method="delete">
-                                <a class="btn btn-primary" th:href="@{'/workspace/' + *{id} + '/update'}" th:text="#{btn.edit}"></a>
-                                <button
-                                    class="btn btn-danger"
-                                    type="submit"
-                                    th:onclick="return confirm(/*[[#{text.wks-delete-confirm}]]*/)"
-                                    th:text="#{btn.delete}"></button>
-                            </form>
-                        </div>
-                        <div class="card-footer text-muted fst-italic">
-                            <h6 class="card-subtitle m-2">
-                                <span th:text="|#{text.modified-info(*{modifiedBy}, *{modifiedDateAgo})}|"></span>
-                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                <span th:text="*{#temporals.format(modifiedDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{modifiedDate}"></span>
-                            </h6>
-                            <h6 class="card-subtitle m-2">
-                                <span th:text="|#{text.created-info(*{createdBy}, *{createdDateAgo})}|"></span>
-                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                <span th:text="*{#temporals.format(createdDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{createdDate}"></span>                            </h6>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container-fluid">
+        <div class="row">
+            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'info')"></div>
+            <div class="col">
+                <div class="row my-3"
+                     th:if="${sumTypoInWks} > 0"
+                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+                <div class="row">
+                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+                </div>
+                <div class="row"
+                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+                <div class="row row-cols-1 row-cols-md-2 g-4">
+                    <div class="col">
+                        <div class="card" th:object="${wksInfo}">
+                            <div class="card-body">
+                                <h5 class="card-title" th:text="*{name}"></h5>
+                                <p class="card-text" th:text="*{url}"></p>
+                                <p class="card-text" th:text="*{description}"></p>
+                                <form th:action="@{'/workspace/' + *{id}}" th:method="delete">
+                                    <a class="btn btn-primary" th:href="@{'/workspace/' + *{id} + '/update'}" th:text="#{btn.edit}"></a>
+                                    <button
+                                        class="btn btn-danger"
+                                        type="submit"
+                                        th:onclick="return confirm(/*[[#{text.wks-delete-confirm}]]*/)"
+                                        th:text="#{btn.delete}"></button>
+                                </form>
+                            </div>
+                            <div class="card-footer text-muted fst-italic">
+                                <h6 class="card-subtitle m-2">
+                                    <span th:text="|#{text.modified-info(*{modifiedBy}, *{modifiedDateAgo})}|"></span>
+                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                    <span th:text="*{#temporals.format(modifiedDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{modifiedDate}"></span>
+                                </h6>
+                                <h6 class="card-subtitle m-2">
+                                    <span th:text="|#{text.created-info(*{createdBy}, *{createdDateAgo})}|"></span>
+                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                    <span th:text="*{#temporals.format(createdDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{createdDate}"></span>                            </h6>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="col">
-                    <ul class="list-group list-group-flush col-6">
-                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
-                            th:classappend="|text-*{key.getStyle()}|"
-                            th:each="pair : ${countTypoByStatus}"
-                            th:object="${pair}">
-                            <span th:text="#{*{key.toString()}}"></span><span class="badge rounded-pill" th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
-                        </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
-                            <span th:text="#{TOTAL}"></span><span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
-                        </li>
-                    </ul>
+                    <div class="col">
+                        <ul class="list-group list-group-flush col-6">
+                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
+                                th:classappend="|text-*{key.getStyle()}|"
+                                th:each="pair : ${countTypoByStatus}"
+                                th:object="${pair}">
+                                <span th:text="#{*{key.toString()}}"></span><span class="badge rounded-pill" th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
+                                <span th:text="#{TOTAL}"></span><span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-integration.html b/src/main/resources/templates/workspace/wks-integration.html
index 190249e8..59d66b13 100644
--- a/src/main/resources/templates/workspace/wks-integration.html
+++ b/src/main/resources/templates/workspace/wks-integration.html
@@ -1,40 +1,41 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
-    <div class="row">
-        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'integration')"></div>
-        <div class="col-10">
-            <div class="row mt-4">
-                <div class="col">
-                    <p class="fw-bold mb-2"th:text="#{text.script-descr}"></p>
-                    <pre style="font-size:18px" class="form-control user-select-all d-inline-flex mb-3" readonly>
-&lt;script&gt;
-function loadScript(src, callback) {
-  const body = document.querySelector('body')
-  const script = document.createElement('script');
-  script.src = src;
-  script.onload = callback;
-  body.appendChild(script);
-};
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container-fluid">
+        <div class="row">
+            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'integration')"></div>
+            <div class="col-10">
+                <div class="row mt-4">
+                    <div class="col">
+                        <p class="fw-bold mb-2"th:text="#{text.script-descr}"></p>
+                        <pre style="font-size:18px" class="form-control user-select-all d-inline-flex mb-3" readonly>
+    &lt;script&gt;
+    function loadScript(src, callback) {
+      const body = document.querySelector('body')
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = callback;
+      body.appendChild(script);
+    };
 
-document.addEventListener('DOMContentLoaded', function () {
-  const scriptSrc = 'https://cdn.jsdelivr.net/gh/hexlet/hexlet-correction@latest/src/widget/index.js?v=' + new Date().getTime();
-  loadScript(scriptSrc, function () {
-    handleTypoReporter({
-      authorizationToken: '[[${wksBasicToken}]]',
-      workSpaceUrl: '[[${rootUrl}]]',
-      workSpaceId: '[[${wksId}]]'})
-  });
-});
-&lt;/script&gt;
-                  </pre>
+    document.addEventListener('DOMContentLoaded', function () {
+      const scriptSrc = 'https://cdn.jsdelivr.net/gh/hexlet/hexlet-correction@latest/src/widget/index.js?v=' + new Date().getTime();
+      loadScript(scriptSrc, function () {
+        handleTypoReporter({
+          authorizationToken: '[[${wksBasicToken}]]',
+          workSpaceUrl: '[[${rootUrl}]]',
+          workSpaceId: '[[${wksId}]]'})
+      });
+    });
+    &lt;/script&gt;
+                      </pre>
+                  </div>
               </div>
-          </div>
+            </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-settings.html b/src/main/resources/templates/workspace/wks-settings.html
index 1c4ac2e3..0a2bcf48 100644
--- a/src/main/resources/templates/workspace/wks-settings.html
+++ b/src/main/resources/templates/workspace/wks-settings.html
@@ -1,138 +1,139 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
-    <div class="row">
-        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'settings')"></div>
-        <div class="col">
-            <div class="row my-3"
-                 th:if="${sumTypoInWks} > 0"
-                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-            <div class="row">
-                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-            </div>
-            <div class="row"
-                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-            <div class="row my-2">
-                <div aria-label="Re-generate workspace authentication token" class="col">
-                    <form th:method="patch"
-                          th:if="${isAdmin}"
-                          th:action="@{'/workspace/' + ${wksId} + '/token/regenerate'}">
-                        <button class="btn btn-danger" type="submit" th:text="#{btn.regenerate-token}"></button>
-                    </form>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container-fluid">
+        <div class="row">
+            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'settings')"></div>
+            <div class="col">
+                <div class="row my-3"
+                     th:if="${sumTypoInWks} > 0"
+                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+                <div class="row">
+                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
                 </div>
-            </div>
-            <div class="row mt-4">
-                <div class="col">
-                    <p class="fw-bold mb-2" th:text="|#{text.wks-access-token}|"></p>
-                    <p class="form-control user-select-all d-inline-flex mb-3" readonly>[[${wksBasicToken} ?: '&lt;Token not generated&gt;']]</p>
-                    <p class="fw-bold mb-2" th:text="|#{text.use-header}|"></p>
-                    <p class="form-control user-select-all  d-inline-flex mb-3" readonly>Basic [[${wksBasicToken}]]</p>
+                <div class="row"
+                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+                <div class="row my-2">
+                    <div aria-label="Re-generate workspace authentication token" class="col">
+                        <form th:method="patch"
+                              th:if="${isAdmin}"
+                              th:action="@{'/workspace/' + ${wksId} + '/token/regenerate'}">
+                            <button class="btn btn-danger" type="submit" th:text="#{btn.regenerate-token}"></button>
+                        </form>
+                    </div>
                 </div>
-                <!-- Adding an url to a workspace -->
-                <div class="row my-3">
-                    <p class="fw-bold mb-2" th:text="#{text.allowed-urls}"></p>
+                <div class="row mt-4">
                     <div class="col">
-                        <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}" th:object="${inputUrl}">
-                            <div class="row">
-                                <div class="col-7">
-                                    <input type="url" class="form-control mb-2 col" id="inputUrl" th:placeholder="#{text.input-url-placeholder}" th:field="*{url}"
-                                           th:classappend="${#fields.hasErrors('url') && formModified}? 'is-invalid'"
-                                           th:errorclass="is-invalid" required>
-                                </div>
-                                <div class="col-5">
-                                    <button type="submit" class="btn btn-light" th:text="#{btn.add-to-wks}"></button>
+                        <p class="fw-bold mb-2" th:text="|#{text.wks-access-token}|"></p>
+                        <p class="form-control user-select-all d-inline-flex mb-3" readonly>[[${wksBasicToken} ?: '&lt;Token not generated&gt;']]</p>
+                        <p class="fw-bold mb-2" th:text="|#{text.use-header}|"></p>
+                        <p class="form-control user-select-all  d-inline-flex mb-3" readonly>Basic [[${wksBasicToken}]]</p>
+                    </div>
+                    <!-- Adding an url to a workspace -->
+                    <div class="row my-3">
+                        <p class="fw-bold mb-2" th:text="#{text.allowed-urls}"></p>
+                        <div class="col">
+                            <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}" th:object="${inputUrl}">
+                                <div class="row">
+                                    <div class="col-7">
+                                        <input type="url" class="form-control mb-2 col" id="inputUrl" th:placeholder="#{text.input-url-placeholder}" th:field="*{url}"
+                                               th:classappend="${#fields.hasErrors('url') && formModified}? 'is-invalid'"
+                                               th:errorclass="is-invalid" required>
+                                    </div>
+                                    <div class="col-5">
+                                        <button type="submit" class="btn btn-light" th:text="#{btn.add-to-wks}"></button>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="row mt-2">
-                                <div class="col-12">
-                                    <ul class="invalid-feedback" th:if="${#fields.hasErrors('url')}">
-                                        <li th:each="err : ${#fields.errors('url')}" th:text="${err}"></li>
-                                    </ul>
+                                <div class="row mt-2">
+                                    <div class="col-12">
+                                        <ul class="invalid-feedback" th:if="${#fields.hasErrors('url')}">
+                                            <li th:each="err : ${#fields.errors('url')}" th:text="${err}"></li>
+                                        </ul>
+                                    </div>
                                 </div>
-                            </div>
-                        </form>
+                            </form>
+                        </div>
                     </div>
-                </div>
-                <!-- Workspace urls page -->
-                <div class="row" th:if="${urlsPage.hasContent()}">
-                    <main class="col">
-                        <div class="row">
-                            <!-- Page size dropdown -->
-                            <div class="col-5">
-                                <div class="dropdown">
-                                    <button aria-expanded="false"
-                                            class="btn btn-light dropdown-toggle"
-                                            data-bs-toggle="dropdown"
-                                            id="dropdownSizePage"
-                                            th:text="|#{btn.page-size} ${urlsPage.size}|"
-                                            type="button">
-                                    </button>
-                                    <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
-                                        <li th:each="availableSize : ${availableSizes}">
-                                            <a class="dropdown-item"
-                                               th:classappend="(${urlsPage.size} == ${availableSize} ? 'disabled' : '')"
-                                               th:href="@{'/workspace/' + ${wksId} + '/settings'(page=0,size=${availableSize},${sortDir}|)}"
-                                               th:text="${availableSize}">
-                                            </a>
-                                        </li>
-                                    </ul>
+                    <!-- Workspace urls page -->
+                    <div class="row" th:if="${urlsPage.hasContent()}">
+                        <main class="col">
+                            <div class="row">
+                                <!-- Page size dropdown -->
+                                <div class="col-5">
+                                    <div class="dropdown">
+                                        <button aria-expanded="false"
+                                                class="btn btn-light dropdown-toggle"
+                                                data-bs-toggle="dropdown"
+                                                id="dropdownSizePage"
+                                                th:text="|#{btn.page-size} ${urlsPage.size}|"
+                                                type="button">
+                                        </button>
+                                        <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
+                                            <li th:each="availableSize : ${availableSizes}">
+                                                <a class="dropdown-item"
+                                                   th:classappend="(${urlsPage.size} == ${availableSize} ? 'disabled' : '')"
+                                                   th:href="@{'/workspace/' + ${wksId} + '/settings'(page=0,size=${availableSize},${sortDir}|)}"
+                                                   th:text="${availableSize}">
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <!-- Page pagination -->
+                                <div class="col-sm-6">
+                                    <ul class="pagination" sd:pagination="full"></ul>
                                 </div>
                             </div>
-                            <!-- Page pagination -->
-                            <div class="col-sm-6">
-                                <ul class="pagination" sd:pagination="full"></ul>
-                            </div>
-                        </div>
-                        <!-- Workspace urls table -->
-                        <div class="row">
-                            <div class="col">
-                                <table class="table">
-                                    <!-- Workspace urls table head -->
-                                    <colgroup>
-                                        <col class="col-11">
-                                        <col class="col-1">
-                                    </colgroup>
-                                    <thead th:object="${urlsPage}">
-                                    <tr>
-                                        <th scope="col" colspan="2">
-                                            <a class="btn btn-light"
-                                               th:href="@{'/workspace/' + ${wksId} + '/settings'(size=*{size},sort=|url,${sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{report-url}"></span> <span>[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    <th:block th:each="url : ${urlsPage.content}" th:object="${url}">
-                                        <!-- Workspace url table row -->
+                            <!-- Workspace urls table -->
+                            <div class="row">
+                                <div class="col">
+                                    <table class="table">
+                                        <!-- Workspace urls table head -->
+                                        <colgroup>
+                                            <col class="col-11">
+                                            <col class="col-1">
+                                        </colgroup>
+                                        <thead th:object="${urlsPage}">
                                         <tr>
-                                            <td class="align-middle" th:text="*{url}"></td>
-                                            <td>
-                                                <form th:method="DELETE"
-                                                      th:if="isAdmin"
-                                                      th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}">
-                                                    <input type="hidden" th:value="*{url}" name="url">
-                                                    <button type="submit" class="btn btn-danger"
-                                                            th:text="#{btn.delete}"
-                                                            th:onclick="return confirm(/*[[#{text.confirm-delete-url-wks}]]*/)"
-                                                    ></button>
-                                                </form>
-                                            </td>
+                                            <th scope="col" colspan="2">
+                                                <a class="btn btn-light"
+                                                   th:href="@{'/workspace/' + ${wksId} + '/settings'(size=*{size},sort=|url,${sortDir.isAscending() ? DESC : ASC}|)}">
+                                                    <span th:text="#{report-url}"></span> <span>[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                                </a>
+                                            </th>
                                         </tr>
-                                    </th:block>
-                                    </tbody>
-                                </table>
+                                        </thead>
+                                        <tbody>
+                                        <th:block th:each="url : ${urlsPage.content}" th:object="${url}">
+                                            <!-- Workspace url table row -->
+                                            <tr>
+                                                <td class="align-middle" th:text="*{url}"></td>
+                                                <td>
+                                                    <form th:method="DELETE"
+                                                          th:if="isAdmin"
+                                                          th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}">
+                                                        <input type="hidden" th:value="*{url}" name="url">
+                                                        <button type="submit" class="btn btn-danger"
+                                                                th:text="#{btn.delete}"
+                                                                th:onclick="return confirm(/*[[#{text.confirm-delete-url-wks}]]*/)"
+                                                        ></button>
+                                                    </form>
+                                                </td>
+                                            </tr>
+                                        </th:block>
+                                        </tbody>
+                                    </table>
+                                </div>
                             </div>
-                        </div>
-                    </main>
+                        </main>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-typos.html b/src/main/resources/templates/workspace/wks-typos.html
index f73f20fd..a74d2fde 100644
--- a/src/main/resources/templates/workspace/wks-typos.html
+++ b/src/main/resources/templates/workspace/wks-typos.html
@@ -1,221 +1,222 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sd="http://www.w3.org/1999/xhtml">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
-    <div class="row">
-        <!-- Workspace Side Bar -->
-        <div class="col-2" th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'typos')"></div>
-        <div class="col">
-            <!-- Workspace progress typo bar -->
-            <div class="row my-3"
-                 th:if="${sumTypoInWks} > 0"
-                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-            <!-- Workspace number of typo -->
-            <div class="row">
-                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-            </div>
-            <!-- Workspace last typo date -->
-            <div class="row"
-                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-            <!-- Workspace typo page -->
-            <div class="row">
-                <main class="col">
-                    <div class="row">
-                        <!-- Page filtration -->
-                        <div class="col-2">
-                            <div class="dropdown">
-                                <button aria-expanded="false"
-                                        class="btn dropdown-toggle"
-                                        th:classappend="typoStatus == null ? btn-secondary : |btn-${typoStatusStyle}|"
-                                        data-bs-toggle="dropdown"
-                                        id="dropdownFilter"
-                                        th:text="${typoStatus} == null ? #{btn.page-empty-filter} : #{${#strings.replace(typoStatus, '_', ' ')}}"
-                                        type="button">
-                                </button>
-                                <ul aria-labelledby="dropdownFilter" class="dropdown-menu">
-                                    <li>
-                                        <a class="dropdown-item"
-                                           th:classappend="(${typoStatus} == null ? 'disabled' : '')"
-                                           th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|)}"
-                                           th:text="#{btn.page-empty-filter}">
-                                        </a>
-                                    </li>
-                                    <li th:each="status : ${availableStatuses}">
-                                        <a class="dropdown-item"
-                                           th:classappend="(${typoStatus} == ${#strings.replace(status, ' ', '_')} ? 'disabled' : '')"
-                                           th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|, typoStatus=${#strings.replace(status, ' ', '_')})}"
-                                           th:text="#{${status}}">
-                                        </a>
-                                    </li>
-                                </ul>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container-fluid">
+        <div class="row">
+            <!-- Workspace Side Bar -->
+            <div class="col-2" th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'typos')"></div>
+            <div class="col">
+                <!-- Workspace progress typo bar -->
+                <div class="row my-3"
+                     th:if="${sumTypoInWks} > 0"
+                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+                <!-- Workspace number of typo -->
+                <div class="row">
+                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+                </div>
+                <!-- Workspace last typo date -->
+                <div class="row"
+                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+                <!-- Workspace typo page -->
+                <div class="row">
+                    <main class="col">
+                        <div class="row">
+                            <!-- Page filtration -->
+                            <div class="col-2">
+                                <div class="dropdown">
+                                    <button aria-expanded="false"
+                                            class="btn dropdown-toggle"
+                                            th:classappend="typoStatus == null ? btn-secondary : |btn-${typoStatusStyle}|"
+                                            data-bs-toggle="dropdown"
+                                            id="dropdownFilter"
+                                            th:text="${typoStatus} == null ? #{btn.page-empty-filter} : #{${#strings.replace(typoStatus, '_', ' ')}}"
+                                            type="button">
+                                    </button>
+                                    <ul aria-labelledby="dropdownFilter" class="dropdown-menu">
+                                        <li>
+                                            <a class="dropdown-item"
+                                               th:classappend="(${typoStatus} == null ? 'disabled' : '')"
+                                               th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|)}"
+                                               th:text="#{btn.page-empty-filter}">
+                                            </a>
+                                        </li>
+                                        <li th:each="status : ${availableStatuses}">
+                                            <a class="dropdown-item"
+                                               th:classappend="(${typoStatus} == ${#strings.replace(status, ' ', '_')} ? 'disabled' : '')"
+                                               th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|, typoStatus=${#strings.replace(status, ' ', '_')})}"
+                                               th:text="#{${status}}">
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
-                        </div>
 
-                        <!-- Page size dropdown -->
-                        <div class="col-3">
-                            <div class="dropdown">
-                                <button aria-expanded="false"
-                                        class="btn btn-secondary dropdown-toggle"
-                                        data-bs-toggle="dropdown"
-                                        id="dropdownSizePage"
-                                        th:text="|#{btn.page-size} ${typoPage.size}|"
-                                        type="button">
-                                </button>
-                                <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
-                                    <li th:each="availableSize : ${availableSizes}">
-                                        <a class="dropdown-item"
-                                           th:classappend="(${typoPage.size} == ${availableSize} ? 'disabled' : '')"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|)}"
-                                           th:text="${availableSize}">
-                                        </a>
-                                    </li>
-                                </ul>
+                            <!-- Page size dropdown -->
+                            <div class="col-3">
+                                <div class="dropdown">
+                                    <button aria-expanded="false"
+                                            class="btn btn-secondary dropdown-toggle"
+                                            data-bs-toggle="dropdown"
+                                            id="dropdownSizePage"
+                                            th:text="|#{btn.page-size} ${typoPage.size}|"
+                                            type="button">
+                                    </button>
+                                    <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
+                                        <li th:each="availableSize : ${availableSizes}">
+                                            <a class="dropdown-item"
+                                               th:classappend="(${typoPage.size} == ${availableSize} ? 'disabled' : '')"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|)}"
+                                               th:text="${availableSize}">
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
-                        </div>
 
 
-                        <!-- Page pagination -->
-                        <div class="col-sm-6">
-                            <ul class="pagination" sd:pagination="full"></ul>
+                            <!-- Page pagination -->
+                            <div class="col-sm-6">
+                                <ul class="pagination" sd:pagination="full"></ul>
+                            </div>
                         </div>
-                    </div>
-                    <!-- Workspace typo table -->
-                    <div class="row">
-                        <div class="col">
-                            <table class="table">
-                                <!-- Workspace typo table head -->
-                                <thead th:object="${typoPage}">
-                                <tr>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{url-page}"></span> <span th:if="${sortProp == 'pageUrl'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{reporter-name}"></span> <span th:if="${sortProp == 'reporterName'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{date.created}"></span> <span th:if="${sortProp == 'createdDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{date.modified}"></span> <span  th:if="${sortProp == 'modifiedDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{modified-by}"></span> <span th:if="${sortProp == 'modifiedBy'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="${typoStatus} != null ?
-                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{typo-status}"></span> <span th:if="${sortProp == 'typoStatus'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <th:block th:each="typoInfo : ${typoPage.content}" th:object="${typoInfo}">
-                                    <!-- Workspace typo table row -->
-                                    <tr aria-expanded="false" class="accordion collapsed" data-bs-toggle="collapse"
-                                        th:aria-controls="|collapseTypoRowId_*{id}|"
-                                        th:classappend="|table-*{typoStatus.getStyle}|"
-                                        th:data-bs-target="|#collapseTypoRowId_*{id}|">
-                                        <td th:text="*{pageUrl}" class="text-break"></td>
-                                        <td th:text="*{reporterName}"></td>
-                                        <td th:text="*{createdDateAgo}"></td>
-                                        <td th:text="*{modifiedDateAgo}"></td>
-                                        <td th:text="*{modifiedBy} != ${wksInfo.id} ? *{modifiedBy} : ''"></td>
-                                        <td th:text="#{*{typoStatus}}"></td>
-                                    </tr>
-                                    <!-- Workspace typo table row collapsed part -->
+                        <!-- Workspace typo table -->
+                        <div class="row">
+                            <div class="col">
+                                <table class="table">
+                                    <!-- Workspace typo table head -->
+                                    <thead th:object="${typoPage}">
                                     <tr>
-                                        <td class="p-0" colspan="7">
-                                            <div class="accordion-collapse collapse" th:id="|collapseTypoRowId_*{id}|"
-                                            th:with="searchUri=${typoStatus} != null ?
-                                                        @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir}, typoStatus=${typoStatus})}
-                                                        : @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir})}">
-                                                <div class="p-4">
-                                                    <div class="row mb-2">
-                                                        <!-- Workspace typo table row change status buttons -->
-                                                        <div class="col-11">
-                                                            <div aria-label="Change typo status button group"
-                                                                 class="btn-group"
-                                                                 role="group">
-                                                                <form
-                                                                    th:action="@{|/typos/*{id}/status?wksId=${wksId}&event=${event}|(next=${searchUri})}"
-                                                                    th:each="event : *{typoStatus.getValidEvents()}"
-                                                                    th:method="patch">
-                                                                    <button class="btn me-1"
-                                                                            th:classappend="|btn-${event.getStyle()}|"
-                                                                            th:text="#{|btn.${event.getButtonName()}|}"
-                                                                            type="submit">
-                                                                    </button>
-                                                                </form>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{url-page}"></span> <span th:if="${sortProp == 'pageUrl'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{reporter-name}"></span> <span th:if="${sortProp == 'reporterName'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{date.created}"></span> <span th:if="${sortProp == 'createdDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{date.modified}"></span> <span  th:if="${sortProp == 'modifiedDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{modified-by}"></span> <span th:if="${sortProp == 'modifiedBy'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="${typoStatus} != null ?
+                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{typo-status}"></span> <span th:if="${sortProp == 'typoStatus'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    <th:block th:each="typoInfo : ${typoPage.content}" th:object="${typoInfo}">
+                                        <!-- Workspace typo table row -->
+                                        <tr aria-expanded="false" class="accordion collapsed" data-bs-toggle="collapse"
+                                            th:aria-controls="|collapseTypoRowId_*{id}|"
+                                            th:classappend="|table-*{typoStatus.getStyle}|"
+                                            th:data-bs-target="|#collapseTypoRowId_*{id}|">
+                                            <td th:text="*{pageUrl}" class="text-break"></td>
+                                            <td th:text="*{reporterName}"></td>
+                                            <td th:text="*{createdDateAgo}"></td>
+                                            <td th:text="*{modifiedDateAgo}"></td>
+                                            <td th:text="*{modifiedBy} != ${wksInfo.id} ? *{modifiedBy} : ''"></td>
+                                            <td th:text="#{*{typoStatus}}"></td>
+                                        </tr>
+                                        <!-- Workspace typo table row collapsed part -->
+                                        <tr>
+                                            <td class="p-0" colspan="7">
+                                                <div class="accordion-collapse collapse" th:id="|collapseTypoRowId_*{id}|"
+                                                th:with="searchUri=${typoStatus} != null ?
+                                                            @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir}, typoStatus=${typoStatus})}
+                                                            : @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir})}">
+                                                    <div class="p-4">
+                                                        <div class="row mb-2">
+                                                            <!-- Workspace typo table row change status buttons -->
+                                                            <div class="col-11">
+                                                                <div aria-label="Change typo status button group"
+                                                                     class="btn-group"
+                                                                     role="group">
+                                                                    <form
+                                                                        th:action="@{|/typos/*{id}/status?wksId=${wksId}&event=${event}|(next=${searchUri})}"
+                                                                        th:each="event : *{typoStatus.getValidEvents()}"
+                                                                        th:method="patch">
+                                                                        <button class="btn me-1"
+                                                                                th:classappend="|btn-${event.getStyle()}|"
+                                                                                th:text="#{|btn.${event.getButtonName()}|}"
+                                                                                type="submit">
+                                                                        </button>
+                                                                    </form>
+                                                                </div>
                                                             </div>
                                                         </div>
-                                                    </div>
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <p>
-                                                                <span th:text="|#{text.created-at}|"/>
-                                                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                                                <span th:text="*{#temporals.format(createdDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{createdDate}"/>
-                                                            </p>
-                                                            <p>
-                                                                <span th:text="|#{text.modified-at}|"/>
-                                                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                                                <span th:text="*{#temporals.format(modifiedDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{modifiedDate}"/>
-                                                            </p>
-                                                            <hr>
-                                                            <p class="fst-italic"
-                                                               th:text="|#{text.reported-by} *{reporterName}: *{reporterComment}|"></p>
-                                                            <hr>
-                                                            <p class="text-muted">
-                                                                [[*{textBeforeTypo}]]<span class="text-danger">[[*{textTypo}]]</span>[[*{textAfterTypo}]]
-                                                            </p>
+                                                        <div class="row">
+                                                            <div class="col">
+                                                                <p>
+                                                                    <span th:text="|#{text.created-at}|"/>
+                                                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                                                    <span th:text="*{#temporals.format(createdDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{createdDate}"/>
+                                                                </p>
+                                                                <p>
+                                                                    <span th:text="|#{text.modified-at}|"/>
+                                                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                                                    <span th:text="*{#temporals.format(modifiedDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{modifiedDate}"/>
+                                                                </p>
+                                                                <hr>
+                                                                <p class="fst-italic"
+                                                                   th:text="|#{text.reported-by} *{reporterName}: *{reporterComment}|"></p>
+                                                                <hr>
+                                                                <p class="text-muted">
+                                                                    [[*{textBeforeTypo}]]<span class="text-danger">[[*{textTypo}]]</span>[[*{textAfterTypo}]]
+                                                                </p>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </th:block>
-                                </tbody>
-                            </table>
+                                            </td>
+                                        </tr>
+                                    </th:block>
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
-                    </div>
-                </main>
+                    </main>
+                </div>
             </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-update.html b/src/main/resources/templates/workspace/wks-update.html
index 37a869ac..e21d81a3 100644
--- a/src/main/resources/templates/workspace/wks-update.html
+++ b/src/main/resources/templates/workspace/wks-update.html
@@ -1,71 +1,72 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
-    <div class="row">
-        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'info')"></div>
-        <div class="col">
-            <div class="row my-3"
-                 th:if="${sumTypoInWks} > 0"
-                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-            <div class="row">
-                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-            </div>
-            <div class="row"
-                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-            <div class="row row-cols-1 row-cols-md-2 g-4">
-                <div class="col">
-                    <form th:action="@{'/workspace/' + ${wksId} + '/update'}" th:method="put" th:object="${createWorkspace}">
-                        <div class="form-floating mb-3">
-                            <input class="form-control" id="inputWksName" placeholder="p"
-                                   th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
-                                   th:errorclass="is-invalid"
-                                   th:field="*{name}"
-                                   type="text">
-                            <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
-                            <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
-                        </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" id="inputWksUrl" placeholder="p" autofocus
-                                   th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
-                                   th:errorclass="is-invalid"
-                                   th:field="*{url}"
-                                   type="text">
-                            <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
-                            <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
-                        </div>
-                        <div class="form-floating mb-3">
-                            <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
-                                      th:classappend="${!#fields.hasErrors('description') && formModified ? 'is-valid' : ''}"
-                                      th:errorclass="is-invalid"
-                                      th:field="*{description}"></textarea>
-                            <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
-                            <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}" th:text="${err}"></div>
-                        </div>
-                        <button class="btn btn-primary" type="submit" th:text="#{btn.edit}"></button>
-                        <a class="btn btn-secondary" th:href="@{'/workspace/' + ${wksId}}" th:text="#{btn.close}"></a>
-                    </form>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container-fluid">
+        <div class="row">
+            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'info')"></div>
+            <div class="col">
+                <div class="row my-3"
+                     th:if="${sumTypoInWks} > 0"
+                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+                <div class="row">
+                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
                 </div>
-                <div class="col">
-                    <ul class="list-group list-group-flush col-6">
-                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
-                            th:classappend="|text-*{key.getStyle()}|"
-                            th:each="pair : ${countTypoByStatus}"
-                            th:object="${pair}">
-                            [[*{key.toString()}]]<span class="badge rounded-pill"
-                                                       th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
-                        </li>
-                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
-                            TOTAL<span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
-                        </li>
-                    </ul>
+                <div class="row"
+                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+                <div class="row row-cols-1 row-cols-md-2 g-4">
+                    <div class="col">
+                        <form th:action="@{'/workspace/' + ${wksId} + '/update'}" th:method="put" th:object="${createWorkspace}">
+                            <div class="form-floating mb-3">
+                                <input class="form-control" id="inputWksName" placeholder="p"
+                                       th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
+                                       th:errorclass="is-invalid"
+                                       th:field="*{name}"
+                                       type="text">
+                                <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
+                                <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
+                            </div>
+                            <div class="form-floating mb-3">
+                                <input class="form-control" id="inputWksUrl" placeholder="p" autofocus
+                                       th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
+                                       th:errorclass="is-invalid"
+                                       th:field="*{url}"
+                                       type="text">
+                                <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
+                                <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
+                            </div>
+                            <div class="form-floating mb-3">
+                                <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
+                                          th:classappend="${!#fields.hasErrors('description') && formModified ? 'is-valid' : ''}"
+                                          th:errorclass="is-invalid"
+                                          th:field="*{description}"></textarea>
+                                <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
+                                <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}" th:text="${err}"></div>
+                            </div>
+                            <button class="btn btn-primary" type="submit" th:text="#{btn.edit}"></button>
+                            <a class="btn btn-secondary" th:href="@{'/workspace/' + ${wksId}}" th:text="#{btn.close}"></a>
+                        </form>
+                    </div>
+                    <div class="col">
+                        <ul class="list-group list-group-flush col-6">
+                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
+                                th:classappend="|text-*{key.getStyle()}|"
+                                th:each="pair : ${countTypoByStatus}"
+                                th:object="${pair}">
+                                [[*{key.toString()}]]<span class="badge rounded-pill"
+                                                           th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
+                                TOTAL<span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-users.html b/src/main/resources/templates/workspace/wks-users.html
index 3e5f68f3..3dba0532 100644
--- a/src/main/resources/templates/workspace/wks-users.html
+++ b/src/main/resources/templates/workspace/wks-users.html
@@ -1,137 +1,138 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:sd="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
-    <div class="row">
-        <!-- Workspace Side Bar -->
-        <!-- <div class="col-2" th:include="~{fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')}"></div> -->
-        <div class="col-2"
-             th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')"></div>
-        <div class="col">
-            <!-- Workspace progress typo bar -->
-            <div class="row my-3"
-                 th:if="${sumTypoInWks} > 0"
-                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-            <!-- Workspace number of typo -->
-            <div class="row">
-                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-            </div>
-            <!-- Adding a user to a workspace -->
-            <div class="row my-3">
-                <p th:text="#{text.add-user-to-wks}"></p>
-                <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/users'}" th:object="${inputEmail}">
-                    <div class="form-group">
-                        <input type="email" class="form-control" id="inputUserEmail"
-                               th:placeholder="#{wks.users.email-placeholder}" th:field="*{email}"
-                               th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
-                               th:errorclass="is-invalid" required>
-                        <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
-                            <p class="mb-0" th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
-                        </div>
-                        <small id="emailHelp" class="form-text text-muted"></small>
-                    </div>
-                    <button type="submit" class="btn btn-secondary mt-1"
-                            th:text="#{btn.add-to-wks}"></button>
-                </form>
-            </div>
-            <div class="row">
-                <main class="col">
-                    <div class="row">
-                        <!-- Page size dropdown -->
-                        <div class="col-2">
-                            <div class="dropdown">
-                                <button aria-expanded="false"
-                                        class="btn btn-secondary dropdown-toggle"
-                                        data-bs-toggle="dropdown"
-                                        id="dropdownSizePage"
-                                        th:text="|#{btn.page-size} ${userPage.size}|"
-                                        type="button">
-                                </button>
-                                <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
-                                    <li th:each="avalibleSize : ${availableSizes}">
-                                        <a class="dropdown-item"
-                                           th:classappend="(${userPage.size} == ${avalibleSize} ? 'disabled' : '')"
-                                           th:href="@{'/workspace/' + ${wksId} + '/users'(page=0,size=${avalibleSize},sort=|${sortProp},${sortDir}|)}"
-                                           th:text="${avalibleSize}">
-                                        </a>
-                                    </li>
-                                </ul>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container-fluid">
+        <div class="row">
+            <!-- Workspace Side Bar -->
+            <!-- <div class="col-2" th:include="~{fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')}"></div> -->
+            <div class="col-2"
+                 th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')"></div>
+            <div class="col">
+                <!-- Workspace progress typo bar -->
+                <div class="row my-3"
+                     th:if="${sumTypoInWks} > 0"
+                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+                <!-- Workspace number of typo -->
+                <div class="row">
+                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+                </div>
+                <!-- Adding a user to a workspace -->
+                <div class="row my-3">
+                    <p th:text="#{text.add-user-to-wks}"></p>
+                    <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/users'}" th:object="${inputEmail}">
+                        <div class="form-group">
+                            <input type="email" class="form-control" id="inputUserEmail"
+                                   th:placeholder="#{wks.users.email-placeholder}" th:field="*{email}"
+                                   th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
+                                   th:errorclass="is-invalid" required>
+                            <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
+                                <p class="mb-0" th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
                             </div>
+                            <small id="emailHelp" class="form-text text-muted"></small>
                         </div>
-                        <!-- Page pagination -->
-                        <div class="col-sm-6">
-                            <ul class="pagination" sd:pagination="full"></ul>
+                        <button type="submit" class="btn btn-secondary mt-1"
+                                th:text="#{btn.add-to-wks}"></button>
+                    </form>
+                </div>
+                <div class="row">
+                    <main class="col">
+                        <div class="row">
+                            <!-- Page size dropdown -->
+                            <div class="col-2">
+                                <div class="dropdown">
+                                    <button aria-expanded="false"
+                                            class="btn btn-secondary dropdown-toggle"
+                                            data-bs-toggle="dropdown"
+                                            id="dropdownSizePage"
+                                            th:text="|#{btn.page-size} ${userPage.size}|"
+                                            type="button">
+                                    </button>
+                                    <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
+                                        <li th:each="avalibleSize : ${availableSizes}">
+                                            <a class="dropdown-item"
+                                               th:classappend="(${userPage.size} == ${avalibleSize} ? 'disabled' : '')"
+                                               th:href="@{'/workspace/' + ${wksId} + '/users'(page=0,size=${avalibleSize},sort=|${sortProp},${sortDir}|)}"
+                                               th:text="${avalibleSize}">
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <!-- Page pagination -->
+                            <div class="col-sm-6">
+                                <ul class="pagination" sd:pagination="full"></ul>
+                            </div>
                         </div>
-                    </div>
-                    <!-- Workspace user table -->
-                    <div class="row">
-                        <div class="col">
-                            <table class="table">
-                                <!-- Workspace user table head -->
-                                <thead th:object="${userPage}">
-                                <tr>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|id,${sortProp == 'id' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            Id <span>[[${sortProp == 'id' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|firstName,${sortProp == 'firstName' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{firstname}"></span> <span>[[${sortProp == 'firstName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|lastName,${sortProp == 'lastName' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{lastname}"></span> <span>[[${sortProp == 'lastName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                        <a class="btn btn-light"
-                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|email,${sortProp == 'email' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                            <span th:text="#{email}"></span> <span>[[${sortProp == 'email' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                        </a>
-                                    </th>
-                                    <th scope="col">
-                                    </th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <th:block th:each="userInfo : ${userPage.content}" th:object="${userInfo}">
-                                    <!-- Workspace user table row -->
+                        <!-- Workspace user table -->
+                        <div class="row">
+                            <div class="col">
+                                <table class="table">
+                                    <!-- Workspace user table head -->
+                                    <thead th:object="${userPage}">
                                     <tr>
-                                        <td th:text="*{id}"></td>
-                                        <td th:text="*{firstName}"></td>
-                                        <td th:text="*{lastName}"></td>
-                                        <td th:text="*{email}"></td>
-                                        <td>
-                                            <form th:method="DELETE"
-                                                  th:if="${isAdmin} and ${!excludeDeleteAccounts.contains(userInfo)}"
-                                                  th:action="@{'/workspace/' + ${wksId} + '/users'}">
-                                                <input type="hidden" th:value="*{email}" name="email">
-                                                <button type="submit" class="btn btn-danger"
-                                                        th:text="#{btn.delete-from-wks}"
-                                                        th:onclick="return confirm(/*[[#{text.confirm-delete-user-wks}]]*/)"
-                                                ></button>
-                                            </form>
-                                        </td>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|id,${sortProp == 'id' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                Id <span>[[${sortProp == 'id' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|firstName,${sortProp == 'firstName' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{firstname}"></span> <span>[[${sortProp == 'firstName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|lastName,${sortProp == 'lastName' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{lastname}"></span> <span>[[${sortProp == 'lastName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                            <a class="btn btn-light"
+                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|email,${sortProp == 'email' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{email}"></span> <span>[[${sortProp == 'email' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                        <th scope="col">
+                                        </th>
                                     </tr>
-                                    <!-- Workspace user table row collapsed part -->
-                                    <!-- Deleted -->
-                                    <!-- TODO add possibility for admin to leave workspace (i.e. delete himself from wks), like in posthog service -->
-                                </th:block>
-                                </tbody>
-                            </table>
+                                    </thead>
+                                    <tbody>
+                                    <th:block th:each="userInfo : ${userPage.content}" th:object="${userInfo}">
+                                        <!-- Workspace user table row -->
+                                        <tr>
+                                            <td th:text="*{id}"></td>
+                                            <td th:text="*{firstName}"></td>
+                                            <td th:text="*{lastName}"></td>
+                                            <td th:text="*{email}"></td>
+                                            <td>
+                                                <form th:method="DELETE"
+                                                      th:if="${isAdmin} and ${!excludeDeleteAccounts.contains(userInfo)}"
+                                                      th:action="@{'/workspace/' + ${wksId} + '/users'}">
+                                                    <input type="hidden" th:value="*{email}" name="email">
+                                                    <button type="submit" class="btn btn-danger"
+                                                            th:text="#{btn.delete-from-wks}"
+                                                            th:onclick="return confirm(/*[[#{text.confirm-delete-user-wks}]]*/)"
+                                                    ></button>
+                                                </form>
+                                            </td>
+                                        </tr>
+                                        <!-- Workspace user table row collapsed part -->
+                                        <!-- Deleted -->
+                                        <!-- TODO add possibility for admin to leave workspace (i.e. delete himself from wks), like in posthog service -->
+                                    </th:block>
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
-                    </div>
-                </main>
+                    </main>
+                </div>
             </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspaces.html b/src/main/resources/templates/workspaces.html
index d3ef9aad..fd2e839a 100644
--- a/src/main/resources/templates/workspaces.html
+++ b/src/main/resources/templates/workspaces.html
@@ -1,24 +1,25 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-    <div class="row row-cols-1 row-cols-md-3 g-4">
-        <div class="col" th:each="wksInfo : ${wksInfoList}" th:object="${wksInfo}">
-            <div class="card h-100">
-                <div class="card-body">
-                    <h5 class="card-title" th:text="*{name}"></h5>
-                    <p class="card-text" th:text="*{description}"></p>
-                </div>
-                <div class="card-footer bg-white border-top-0">
-                    <a class="card-link" th:href="@{'/workspace/' + *{id}}" th:text="#{wks.info}"></a>
-                    <a class="card-link" th:href="@{'/workspace/' + *{id} + '/typos'(typoStatus=REPORTED)}" th:text="#{wks.typos}"></a>
-                    <a class="card-link" th:href="@{'/workspace/' + *{id} + '/users'}" th:text="#{wks.users}"></a>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="mb-5 container">
+        <div class="row row-cols-1 row-cols-md-3 g-4">
+            <div class="col" th:each="wksInfo : ${wksInfoList}" th:object="${wksInfo}">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5 class="card-title" th:text="*{name}"></h5>
+                        <p class="card-text" th:text="*{description}"></p>
+                    </div>
+                    <div class="card-footer bg-white border-top-0">
+                        <a class="card-link" th:href="@{'/workspace/' + *{id}}" th:text="#{wks.info}"></a>
+                        <a class="card-link" th:href="@{'/workspace/' + *{id} + '/typos'(typoStatus=REPORTED)}" th:text="#{wks.typos}"></a>
+                        <a class="card-link" th:href="@{'/workspace/' + *{id} + '/users'}" th:text="#{wks.users}"></a>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</main>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </body>
 </html>

From dc56ec19d3f83d981440bc960f7294ab4e8de621 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Tue, 8 Oct 2024 18:54:27 +0300
Subject: [PATCH 02/17] Revert "Add footer to website templates"

This reverts commit f839d2964c41d86b2b5769aaf19d1d3baab8ccf2.
---
 src/main/resources/messages_en.properties     |  27 --
 src/main/resources/messages_ru.properties     |  29 +-
 .../resources/templates/account/acc-info.html | 101 +++--
 .../templates/account/pass-update.html        |  71 ++-
 .../templates/account/prof-update.html        |  79 ++--
 .../resources/templates/account/signup.html   |  86 ++--
 .../resources/templates/create-workspace.html |  67 ++-
 .../resources/templates/error-general.html    |   1 -
 .../resources/templates/fragments/footer.html |  66 ++-
 src/main/resources/templates/login.html       |  54 +--
 .../templates/workspace/wks-info.html         | 113 +++--
 .../templates/workspace/wks-integration.html  |  65 ++-
 .../templates/workspace/wks-settings.html     | 239 ++++++-----
 .../templates/workspace/wks-typos.html        | 403 +++++++++---------
 .../templates/workspace/wks-update.html       | 125 +++---
 .../templates/workspace/wks-users.html        | 249 ++++++-----
 src/main/resources/templates/workspaces.html  |  33 +-
 17 files changed, 883 insertions(+), 925 deletions(-)

diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index 373f8721..d55eae14 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -48,7 +48,6 @@ link.signup=Sign Up
 navbar.logout=Logout
 navbar.login=Login
 navbar.signup=Sign Up
-navbar.my-workspaces=My Workspaces
 navbar.create-workspace=Create Workspace
 navbar.account-info=Account Info
 
@@ -107,29 +106,3 @@ btn.delete-from-wks=Delete from workspace
 alert.password-wrong-format=Password must be between 8 and 20 characters \
   and contain only latin letters, digits and symbols ~`!@#$%^&*()_-+={[}]|\:;"'<,>.?/
 alert.passwords-dont-match=Confirmation does not match the password
-
-text.heroes=The free service for sending messages about typos in the text on your website. After adding a widget to your site, visitors have the opportunity to highlight an error or typo and report it to the administrator.
-text.features-header=FixIT helps websites
-text.features-sub-header1=Improve content quality
-text.features-description1=Users can quickly report typos and errors, which helps quickly eliminate inaccuracies and improve the quality of texts, improving the perception of information and confidence in the resource.
-text.features-sub-header2=Manage errors effectively
-text.features-description2=Tracking the status of errors allows administrators to effectively manage the process of fixing and updating content, reducing the time required to detect and resolve inaccuracies, which helps ensure that the site is updated quickly.
-text.features-sub-header3=Increase user engagement
-text.features-description3=Integration of the widget promotes active interaction between users and the site administration, making them part of the process of improving the resource. This contributes to the formation of a close and mutually beneficial user community.
-text.how-it-works-header=How FixIT works
-text.how-it-works-sub-header1=Create your own workspace
-text.how-it-works-description1=Create an account and add an unlimited number of sites.
-text.how-it-works-sub-header2=Add a widget to your site
-text.how-it-works-description2=Add a widget to your site to make it easy for users to report bugs.
-text.how-it-works-sub-header3=Manage your incoming messages
-text.how-it-works-description3=Manage incoming messages and effectively correct typos found.
-
-footer.about=About project
-footer.source-code=Source code
-footer.telegram=Telegram Hexlet channel Volunteers
-footer.help=Help
-footer.blog=Blog
-footer.study=Study for free
-footer.books=Recommended books
-footer.other-projects=Other open source projects
-footer.additionally=Additionally
diff --git a/src/main/resources/messages_ru.properties b/src/main/resources/messages_ru.properties
index e5eb8421..8d05ca07 100644
--- a/src/main/resources/messages_ru.properties
+++ b/src/main/resources/messages_ru.properties
@@ -53,8 +53,7 @@ alert.bad-credential=Неверные логин и/или пароль
 
 navbar.login=Войти
 navbar.logout=Выход
-navbar.signup=Зарегистрироваться
-navbar.my-workspaces=Мои Пространства
+navbar.signup=Регистрация
 navbar.account-info=Информация об аккаунте
 navbar.create-workspace=Создать Пространство
 
@@ -105,29 +104,3 @@ alert.password-wrong-format=Пароль должен быть от 8 до 20 с
   \ и содержать только буквы латинского алфавита,\
   \ цифры и символы ~`!@#$%^&*()_-+={[}]|\:;"'<,>.?/
 alert.passwords-dont-match=Подтверждение не совпадает с паролем
-
-text.heroes=Бесплатный сервис для отправки сообщений об ошибках в тексте на Вашем сайте. После добавлении на ваш сайт виджета посетители имеют возможность выделить ошибку или опечатку и сообщить об этом администратору.
-text.features-header=FixIT помогает сайтам
-text.features-sub-header1=Улучшить качество контента
-text.features-description1=Пользователи могут быстро сообщать об опечатках и ошибках, что способствует оперативному устранению неточностей и повышению качества текстов, улучшая восприятие информации и доверие к ресурсу.
-text.features-sub-header2=Эффективно управлять ошибками
-text.features-description2=Отслеживание статуса ошибок позволяет администраторам эффективно управлять процессом исправления и обновления контента, сокращая время, необходимое на обнаружение и устранение неточностей, что способствует оперативному обновлению сайта.
-text.features-sub-header3=Повышать вовлеченность пользователей
-text.features-description3=Интеграция виджета способствует активному взаимодействию пользователей с администрацией сайта, делая их частью процесса улучшения ресурса. Это способствует формированию тесного и взаимовыгодного сообщества пользователей.
-text.how-it-works-header=Как FixIT работает
-text.how-it-works-sub-header1=Создайте свое рабочее пространство
-text.how-it-works-description1=Создайте аккаунт и добавляйте неограниченное количество сайтов.
-text.how-it-works-sub-header2=Добавьте виджет на сайт
-text.how-it-works-description2=Добавьте виджет на сайт, чтобы пользователи могли легко сообщать об ошибках.
-text.how-it-works-sub-header3=Управляйте входящими сообщениями
-text.how-it-works-description3=Управляйте входящими сообщениями и эффективно устраняйте найденные опечатки.
-
-footer.about=О проекте
-footer.source-code=Исходный код
-footer.telegram=Telegram Hexlet канал Волонтеры
-footer.help=Помощь
-footer.blog=Блог
-footer.study=Учиться бесплатно
-footer.books=Рекомендуемые книги
-footer.other-projects=Другие open source проекты
-footer.additionally=Дополнительно
diff --git a/src/main/resources/templates/account/acc-info.html b/src/main/resources/templates/account/acc-info.html
index aa0c5e0a..f6c0a46b 100644
--- a/src/main/resources/templates/account/acc-info.html
+++ b/src/main/resources/templates/account/acc-info.html
@@ -1,59 +1,58 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container" th:object="${accInfo}">
-        <div class="card mb-3">
-            <div class="card-body">
-                <h5 class="card-title mb-1" th:text="#{acc-info.card-title.general}"></h5>
-                <div class="row mb-1">
-                    <div class="col" th:text="#{firstname}"></div>
-                    <div class="col" th:text="*{firstName}"></div>
-                </div>
-                <div class="row mb-1">
-                    <div class="col" th:text="#{lastname}"></div>
-                    <div class="col" th:text="*{lastName}"></div>
-                </div>
-                <div class="row mb-1">
-                    <div class="col" th:text="#{username}"></div>
-                    <div class="col" th:text="*{username}"></div>
-                </div>
-                <div class="row mb-3">
-                    <div class="col" th:text="#{email}"></div>
-                    <div class="col" th:text="*{email}"></div>
-                </div>
-                <a class="btn btn-primary" th:href="@{/account/update}" th:text="#{btn.edit}"></a>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container" th:object="${accInfo}">
+    <div class="card mb-3">
+        <div class="card-body">
+            <h5 class="card-title mb-1" th:text="#{acc-info.card-title.general}"></h5>
+            <div class="row mb-1">
+                <div class="col" th:text="#{firstname}"></div>
+                <div class="col" th:text="*{firstName}"></div>
             </div>
-        </div>
-        <div class="card mb-5">
-            <div class="card-body">
-                <h5 class="card-title mb-3" th:text="#{password}"></h5>
-                <a class="btn btn-primary" th:href="@{/account/password}" th:text="#{btn.edit}"></a>
+            <div class="row mb-1">
+                <div class="col" th:text="#{lastname}"></div>
+                <div class="col" th:text="*{lastName}"></div>
+            </div>
+            <div class="row mb-1">
+                <div class="col" th:text="#{username}"></div>
+                <div class="col" th:text="*{username}"></div>
             </div>
+            <div class="row mb-3">
+                <div class="col" th:text="#{email}"></div>
+                <div class="col" th:text="*{email}"></div>
+            </div>
+            <a class="btn btn-primary" th:href="@{/account/update}" th:text="#{btn.edit}"></a>
+        </div>
+    </div>
+    <div class="card mb-3">
+        <div class="card-body">
+            <h5 class="card-title mb-3" th:text="#{password}"></h5>
+            <a class="btn btn-primary" th:href="@{/account/password}" th:text="#{btn.edit}"></a>
         </div>
-        <h5 class="card-title mb-1" th:text="#{acc-info.card-title.workspaces}"></h5>
-        <table class="table table-bordered table-hover">
-            <thead>
-            <tr>
-                <th class="col-1" th:text="#{acc-info.wks.name}"></th>
-                <th class="col-1" th:text="#{acc-info.wks.url}"></th>
-                <th class="col-1" th:text="#{acc-info.wks.descr}"></th>
-                <th class="col-1" th:text="#{username}"></th>
-                <th class="col-1" th:text="#{acc-info.wks.role}"></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr th:each="workspaceRoleInfo : ${workspaceRoleInfoList}" th:object="${workspaceRoleInfo}">
-                <td th:text="*{workspaceName}"></td>
-                <td th:text="*{workspaceUrl}"></td>
-                <td th:text="*{workspaceDescription}"></td>
-                <td th:text="*{username}"></td>
-                <td th:text="*{role}"></td>
-            </tr>
-            </tbody>
-        </table>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+    <h5 class="card-title mb-1" th:text="#{acc-info.card-title.workspaces}"></h5>
+    <table class="table table-bordered table-hover mt-3">
+        <thead>
+        <tr>
+            <th class="col-1" th:text="#{acc-info.wks.name}"></th>
+            <th class="col-1" th:text="#{acc-info.wks.url}"></th>
+            <th class="col-1" th:text="#{acc-info.wks.descr}"></th>
+            <th class="col-1" th:text="#{username}"></th>
+            <th class="col-1" th:text="#{acc-info.wks.role}"></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr th:each="workspaceRoleInfo : ${workspaceRoleInfoList}" th:object="${workspaceRoleInfo}">
+            <td th:text="*{workspaceName}"></td>
+            <td th:text="*{workspaceUrl}"></td>
+            <td th:text="*{workspaceDescription}"></td>
+            <td th:text="*{username}"></td>
+            <td th:text="*{role}"></td>
+        </tr>
+        </tbody>
+    </table>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/account/pass-update.html b/src/main/resources/templates/account/pass-update.html
index bc08e7bf..00009fd4 100644
--- a/src/main/resources/templates/account/pass-update.html
+++ b/src/main/resources/templates/account/pass-update.html
@@ -1,42 +1,41 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="container">
-        <div class="row">
-            <div class="col">
-                <form th:action="@{/account/password}" th:method="put" th:object="${updatePassword}">
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputOldPassword" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('oldPassword') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{oldPassword}" type="password">
-                        <label for="inputOldPassword" th:text="#{password.current}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('oldPassword')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputNewPassword" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('newPassword') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{newPassword}" type="password">
-                        <label for="inputNewPassword" th:text="#{password.new}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('newPassword')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputConfirmPassword" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('confirmNewPassword') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{confirmNewPassword}" type="password">
-                        <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('confirmNewPassword')}" th:text="${err}"></div>
-                    </div>
-                    <div th:if="${#fields.hasGlobalErrors()}">
-                        <div class="alert alert-danger" th:each="err : ${#fields.globalErrors()}" th:text="${err}"></div>
-                    </div>
-                    <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
-                    <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
-                </form>
-            </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container">
+    <div class="row">
+        <div class="col">
+            <form th:action="@{/account/password}" th:method="put" th:object="${updatePassword}">
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputOldPassword" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('oldPassword') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{oldPassword}" type="password">
+                    <label for="inputOldPassword" th:text="#{password.current}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('oldPassword')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputNewPassword" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('newPassword') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{newPassword}" type="password">
+                    <label for="inputNewPassword" th:text="#{password.new}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('newPassword')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputConfirmPassword" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('confirmNewPassword') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{confirmNewPassword}" type="password">
+                    <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('confirmNewPassword')}" th:text="${err}"></div>
+                </div>
+                <div th:if="${#fields.hasGlobalErrors()}">
+                    <div class="alert alert-danger" th:each="err : ${#fields.globalErrors()}" th:text="${err}"></div>
+                </div>
+                <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
+                <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
+            </form>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/account/prof-update.html b/src/main/resources/templates/account/prof-update.html
index 28f631e2..d9d3332e 100644
--- a/src/main/resources/templates/account/prof-update.html
+++ b/src/main/resources/templates/account/prof-update.html
@@ -1,46 +1,45 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="container">
-        <div class="row">
-            <div class="col">
-                <form th:action="@{/account/update}" th:method="put" th:object="${updateProfile}">
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputFirstName" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('firstName') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{firstName}" type="text">
-                        <label for="inputFirstName" th:text="#{firstname}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('firstName')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputLastName" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('lastName') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{lastName}" type="text">
-                        <label for="inputLastName" th:text="#{lastname}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('lastName')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputUsername" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('username') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{username}" type="text">
-                        <label for="inputUsername" th:text="#{username}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('username')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputEmail" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('email') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{email}" type="email">
-                        <label for="inputEmail" th:text="#{email}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('email')}" th:text="${err}"></div>
-                    </div>
-                    <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
-                    <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
-                </form>
-            </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container">
+    <div class="row">
+        <div class="col">
+            <form th:action="@{/account/update}" th:method="put" th:object="${updateProfile}">
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputFirstName" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('firstName') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{firstName}" type="text">
+                    <label for="inputFirstName" th:text="#{firstname}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('firstName')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputLastName" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('lastName') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{lastName}" type="text">
+                    <label for="inputLastName" th:text="#{lastname}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('lastName')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputUsername" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('username') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{username}" type="text">
+                    <label for="inputUsername" th:text="#{username}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('username')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputEmail" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('email') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{email}" type="email">
+                    <label for="inputEmail" th:text="#{email}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('email')}" th:text="${err}"></div>
+                </div>
+                <button class="btn btn-primary" type="submit" th:text="#{btn.save}"></button>
+                <a class="btn btn-secondary" th:href="@{/account}" th:text="#{btn.close}"></a>
+            </form>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/account/signup.html b/src/main/resources/templates/account/signup.html
index 124feed4..4af1f6e7 100644
--- a/src/main/resources/templates/account/signup.html
+++ b/src/main/resources/templates/account/signup.html
@@ -1,56 +1,56 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="container">
-        <div class="row">
-            <div class="col">
-                <form method="post" th:action="@{/signup}" th:object="${signupAccount}">
-                    <div class="form-floating mb-3">
-                        <input id="inputUsername" placeholder="p" type="text" th:field="*{username}"
-                               class="form-control"
-                               th:classappend="${!#fields.hasErrors('username') && formModified}? 'is-valid'"
-                               th:errorclass="is-invalid">
-                        <label for="inputUsername" th:text="#{username}"></label>
-                        <div class="invalid-feedback" th:if="${#fields.hasErrors('username')}">
-                            <p th:each="err : ${#fields.errors('username')}" th:text="${err}"></p>
-                        </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container">
+    <div class="row">
+        <div class="col">
+            <form method="post" th:action="@{/signup}" th:object="${signupAccount}">
+                <div class="form-floating mb-3">
+                    <input id="inputUsername" placeholder="p" type="text" th:field="*{username}"
+                           class="form-control"
+                           th:classappend="${!#fields.hasErrors('username') && formModified}? 'is-valid'"
+                           th:errorclass="is-invalid">
+                    <label for="inputUsername" th:text="#{username}"></label>
+                    <div class="invalid-feedback" th:if="${#fields.hasErrors('username')}">
+                        <p th:each="err : ${#fields.errors('username')}" th:text="${err}"></p>
                     </div>
+                </div>
 
-                    <div class="form-floating mb-3">
-                        <input id="inputEmail" placeholder="p" type="email" th:field="*{email}"
-                               class="form-control"
-                               th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
-                               th:errorclass="is-invalid">
-                        <label for="inputEmail" th:text="#{email}"></label>
-                        <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
-                            <p th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
-                        </div>
+                <div class="form-floating mb-3">
+                    <input id="inputEmail" placeholder="p" type="email" th:field="*{email}"
+                           class="form-control"
+                           th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
+                           th:errorclass="is-invalid">
+                    <label for="inputEmail" th:text="#{email}"></label>
+                    <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
+                        <p th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
                     </div>
+                </div>
 
-                    <div class="form-floating mb-3">
-                        <input id="inputPassword" placeholder="p" type="password" th:field="*{password}"
-                               class="form-control" th:errorclass="is-invalid">
-                        <label for="inputPassword" th:text="#{password}"></label>
-                        <div class="invalid-feedback" th:if="${#fields.hasErrors('password')}">
-                            <p th:each="err : ${#fields.errors('password')}" th:text="${err}"></p>
-                        </div>
+                <div class="form-floating mb-3">
+                    <input id="inputPassword" placeholder="p" type="password" th:field="*{password}"
+                           class="form-control" th:errorclass="is-invalid">
+                    <label for="inputPassword" th:text="#{password}"></label>
+                    <div class="invalid-feedback" th:if="${#fields.hasErrors('password')}">
+                        <p th:each="err : ${#fields.errors('password')}" th:text="${err}"></p>
                     </div>
+                </div>
 
-                    <div class="form-floating mb-3">
-                        <input id="inputConfirmPassword" placeholder="p" type="password" th:field="*{confirmPassword}"
-                               class="form-control" th:errorclass="is-invalid">
-                        <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
-                        <div class="invalid-feedback" th:if="${#fields.hasErrors('confirmPassword')}">
-                            <p th:each="err : ${#fields.errors('confirmPassword')}" th:text="${err}"></p>
-                        </div>
+                <div class="form-floating mb-3">
+                    <input id="inputConfirmPassword" placeholder="p" type="password" th:field="*{confirmPassword}"
+                           class="form-control" th:errorclass="is-invalid">
+                    <label for="inputConfirmPassword" th:text="#{password.confirm}"></label>
+                    <div class="invalid-feedback" th:if="${#fields.hasErrors('confirmPassword')}">
+                        <p th:each="err : ${#fields.errors('confirmPassword')}" th:text="${err}"></p>
                     </div>
-                    <button class="btn btn-primary" type="submit" th:text="#{btn.create-account}"></button>
-                </form>
-            </div>
+                </div>
+                <button class="btn btn-primary" type="submit" th:text="#{btn.create-account}"></button>
+            </form>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
+
 </body>
 </html>
diff --git a/src/main/resources/templates/create-workspace.html b/src/main/resources/templates/create-workspace.html
index 8da3ff0b..88c0a31f 100644
--- a/src/main/resources/templates/create-workspace.html
+++ b/src/main/resources/templates/create-workspace.html
@@ -1,40 +1,39 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="container">
-        <div class="row">
-            <div class="col">
-                <form method="post" th:action="@{/workspace}" th:object="${createWorkspace}">
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputWksUrl" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{url}"
-                               type="url">
-                        <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputWksName" placeholder="p"
-                               th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
-                               th:errorclass="is-invalid" th:field="*{name}"
-                               type="text">
-                        <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
-                                  th:errorclass="is-invalid" th:field="*{description}"></textarea>
-                        <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
-                        <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}"
-                             th:text="${err}"></div>
-                    </div>
-                    <button class="btn btn-primary" type="submit" th:text="#{btn.create}"></button>
-                </form>
-            </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container">
+    <div class="row">
+        <div class="col">
+            <form method="post" th:action="@{/workspace}" th:object="${createWorkspace}">
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputWksUrl" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{url}"
+                           type="url">
+                    <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputWksName" placeholder="p"
+                           th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
+                           th:errorclass="is-invalid" th:field="*{name}"
+                           type="text">
+                    <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
+                </div>
+                <div class="form-floating mb-3">
+                    <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
+                              th:errorclass="is-invalid" th:field="*{description}"></textarea>
+                    <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
+                    <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}"
+                         th:text="${err}"></div>
+                </div>
+                <button class="btn btn-primary" type="submit" th:text="#{btn.create}"></button>
+            </form>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/error-general.html b/src/main/resources/templates/error-general.html
index b98ba45a..e8b7e77e 100644
--- a/src/main/resources/templates/error-general.html
+++ b/src/main/resources/templates/error-general.html
@@ -6,5 +6,4 @@
     <span th:text="#{alert.general-error}"></span>
 </div>
 </body>
-<footer th:replace="~{fragments/footer :: footer}"></footer>
 </html>
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index 52a0a127..20ea9a34 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,67 +1,91 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <body class="d-flex min-vh-100">
-<footer th:fragment="footer" class="p-3 bg-dark bg-gradient text-light mt-auto">
+<footer th:fragment="footer" class="p-3 bg-dark text-light mt-auto">
     <div class="container-xl">
         <div class="row justify-content-lg-around">
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <a class="text-dark px-0 py-0 text-decoration-none" href="https://ru.hexlet.io">
-                    <p class="mb-2 text-light">© Hexlet</p>
+                <a class="text-dark px-0 py-0 text-decoration-none " href="https://ru.hexlet.io">
+                    <p class="h3 mb-2 text-light">© Hexlet</p>
                 </a>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" th:href="@{/about}" th:text="#{footer.about}"></a>
+                        <a class="nav-link px-0 py-1 text-light" th:href="@{/about}">
+                            О проекте
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://github.com/Hexlet/hexlet-correction"
-                           target="_blank" th:text="#{footer.source-code}"></a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-correction"
+                           target="_blank">
+                            Исходный код
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://t.me/hexletcommunity/12"
-                           target="_blank" th:text="#{footer.telegram}"></a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://t.me/hexletcommunity/12"
+                           target="_blank">
+                            Telegram Hexlet канал Волонтеры
+                        </a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="mb-2" th:text="#{footer.help}"></p>
+                <p class="h5 mb-3">Помощь</p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/blog" th:text="#{footer.blog}"></a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/blog">
+                            Блог
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/webinars" th:text="#{footer.study}"></a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/webinars">
+                            Учиться бесплатно
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted"
-                           href="https://ru.hexlet.io/pages/recommended-books" th:text="#{footer.books}"></a>
+                        <a class="nav-link px-0 py-1 text-light"
+                           href="https://ru.hexlet.io/pages/recommended-books">
+                            Рекомендуемые книги
+                        </a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="mb-2" th:text="#{footer.other-projects}"></p>
+                <p class="h5 mb-3">Другие open-source проекты</p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://codebattle.hexlet.io/">Codebattle</a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-cv">
+                            Хекслет-резюме
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://runit.hexlet.ru/">RunIT</a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-editor">
+                            Хекслет-редактор
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.code-basics.com/">Code Basics</a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-friends">
+                            Друзья Хекслета
+                        </a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="mb-2" th:text="#{footer.additionally}"></p>
+                <p class="h5 mb-3">Дополнительно</p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://guides.hexlet.io/">Hexlet Guides</a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://ru.code-basics.com/">
+                            Code Basics
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://sicp.hexlet.io/ru">Hexlet SICP</a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://codebattle.hexlet.io/">
+                            Кодбаттл
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-muted" href="https://cv.hexlet.io/">Hexlet-CV</a>
+                        <a class="nav-link px-0 py-1 text-light" href="https://guides.hexlet.io/">
+                            Гайды Хекслета
+                        </a>
                     </li>
                 </ul>
             </div>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index dd0007b9..a81f88dc 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,34 +1,34 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="container">
-        <div class="row">
-            <div class="col">
-                <div class="invalid-feedback" role="alert" th:if="${param.error}" th:text="#{alert.bad-credential}"></div>
-                <div class="alert alert-warning" role="alert" th:if="${param.logout}" th:text="#{alert.logout}"></div>
-                <form method="post" th:action="@{/login}">
-                    <div class="form-floating mb-3">
-                        <input autofocus class="form-control" id="inputEmail"
-                               name="email" placeholder="Email" required type="text">
-                        <label for="inputEmail" th:text="#{email}"></label>
-                    </div>
-                    <div class="form-floating mb-3">
-                        <input class="form-control" id="inputPassword" name="password"
-                               placeholder="Password" required type="password">
-                        <label for="inputPassword" th:text="#{password}"></label>
-                    </div>
-                    <button class="btn btn-primary" type="submit" th:text="#{btn.login}"></button>
-                </form>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container">
+<div class="row">
+    <div class="col">
+        <div class="invalid-feedback" role="alert" th:if="${param.error}" th:text="#{alert.bad-credential}"></div>
+        <div class="alert alert-warning" role="alert" th:if="${param.logout}" th:text="#{alert.logout}"></div>
+        <form method="post" th:action="@{/login}">
+            <div class="form-floating mb-3">
+                <input autofocus class="form-control" id="inputEmail"
+                       name="email" placeholder="Email" required type="text">
+                <label for="inputEmail" th:text="#{email}"></label>
             </div>
-        </div>
-        <div class="row">
-            <div class="mt-4">
-                <a class="link-primary" th:href="@{/signup}" th:text="#{link.signup}"></a>
+            <div class="form-floating mb-3">
+                <input class="form-control" id="inputPassword" name="password"
+                       placeholder="Password" required type="password">
+                <label for="inputPassword" th:text="#{password}"></label>
             </div>
-        </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+            <button class="btn btn-primary" type="submit" th:text="#{btn.login}"></button>
+        </form>
+    </div>
+</div>
+<div class="row">
+    <div class="mt-4">
+        <a class="link-primary" th:href="@{/signup}" th:text="#{link.signup}"></a>
+    </div>
+</div>
+</main>
+
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-info.html b/src/main/resources/templates/workspace/wks-info.html
index dd56925f..8e563e97 100644
--- a/src/main/resources/templates/workspace/wks-info.html
+++ b/src/main/resources/templates/workspace/wks-info.html
@@ -1,67 +1,66 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container-fluid">
-        <div class="row">
-            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'info')"></div>
-            <div class="col">
-                <div class="row my-3"
-                     th:if="${sumTypoInWks} > 0"
-                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-                <div class="row">
-                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-                </div>
-                <div class="row"
-                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-                <div class="row row-cols-1 row-cols-md-2 g-4">
-                    <div class="col">
-                        <div class="card" th:object="${wksInfo}">
-                            <div class="card-body">
-                                <h5 class="card-title" th:text="*{name}"></h5>
-                                <p class="card-text" th:text="*{url}"></p>
-                                <p class="card-text" th:text="*{description}"></p>
-                                <form th:action="@{'/workspace/' + *{id}}" th:method="delete">
-                                    <a class="btn btn-primary" th:href="@{'/workspace/' + *{id} + '/update'}" th:text="#{btn.edit}"></a>
-                                    <button
-                                        class="btn btn-danger"
-                                        type="submit"
-                                        th:onclick="return confirm(/*[[#{text.wks-delete-confirm}]]*/)"
-                                        th:text="#{btn.delete}"></button>
-                                </form>
-                            </div>
-                            <div class="card-footer text-muted fst-italic">
-                                <h6 class="card-subtitle m-2">
-                                    <span th:text="|#{text.modified-info(*{modifiedBy}, *{modifiedDateAgo})}|"></span>
-                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                    <span th:text="*{#temporals.format(modifiedDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{modifiedDate}"></span>
-                                </h6>
-                                <h6 class="card-subtitle m-2">
-                                    <span th:text="|#{text.created-info(*{createdBy}, *{createdDateAgo})}|"></span>
-                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                    <span th:text="*{#temporals.format(createdDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{createdDate}"></span>                            </h6>
-                            </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container-fluid">
+    <div class="row">
+        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'info')"></div>
+        <div class="col">
+            <div class="row my-3"
+                 th:if="${sumTypoInWks} > 0"
+                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+            <div class="row">
+                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+            </div>
+            <div class="row"
+                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+            <div class="row row-cols-1 row-cols-md-2 g-4">
+                <div class="col">
+                    <div class="card" th:object="${wksInfo}">
+                        <div class="card-body">
+                            <h5 class="card-title" th:text="*{name}"></h5>
+                            <p class="card-text" th:text="*{url}"></p>
+                            <p class="card-text" th:text="*{description}"></p>
+                            <form th:action="@{'/workspace/' + *{id}}" th:method="delete">
+                                <a class="btn btn-primary" th:href="@{'/workspace/' + *{id} + '/update'}" th:text="#{btn.edit}"></a>
+                                <button
+                                    class="btn btn-danger"
+                                    type="submit"
+                                    th:onclick="return confirm(/*[[#{text.wks-delete-confirm}]]*/)"
+                                    th:text="#{btn.delete}"></button>
+                            </form>
+                        </div>
+                        <div class="card-footer text-muted fst-italic">
+                            <h6 class="card-subtitle m-2">
+                                <span th:text="|#{text.modified-info(*{modifiedBy}, *{modifiedDateAgo})}|"></span>
+                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                <span th:text="*{#temporals.format(modifiedDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{modifiedDate}"></span>
+                            </h6>
+                            <h6 class="card-subtitle m-2">
+                                <span th:text="|#{text.created-info(*{createdBy}, *{createdDateAgo})}|"></span>
+                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                <span th:text="*{#temporals.format(createdDate, 'HH:mm:ss dd-MM-yyyy')}" th:data-original-date="*{createdDate}"></span>                            </h6>
                         </div>
                     </div>
-                    <div class="col">
-                        <ul class="list-group list-group-flush col-6">
-                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
-                                th:classappend="|text-*{key.getStyle()}|"
-                                th:each="pair : ${countTypoByStatus}"
-                                th:object="${pair}">
-                                <span th:text="#{*{key.toString()}}"></span><span class="badge rounded-pill" th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
-                            </li>
-                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
-                                <span th:text="#{TOTAL}"></span><span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
-                            </li>
-                        </ul>
-                    </div>
+                </div>
+                <div class="col">
+                    <ul class="list-group list-group-flush col-6">
+                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
+                            th:classappend="|text-*{key.getStyle()}|"
+                            th:each="pair : ${countTypoByStatus}"
+                            th:object="${pair}">
+                            <span th:text="#{*{key.toString()}}"></span><span class="badge rounded-pill" th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
+                            <span th:text="#{TOTAL}"></span><span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-integration.html b/src/main/resources/templates/workspace/wks-integration.html
index 59d66b13..190249e8 100644
--- a/src/main/resources/templates/workspace/wks-integration.html
+++ b/src/main/resources/templates/workspace/wks-integration.html
@@ -1,41 +1,40 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container-fluid">
-        <div class="row">
-            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'integration')"></div>
-            <div class="col-10">
-                <div class="row mt-4">
-                    <div class="col">
-                        <p class="fw-bold mb-2"th:text="#{text.script-descr}"></p>
-                        <pre style="font-size:18px" class="form-control user-select-all d-inline-flex mb-3" readonly>
-    &lt;script&gt;
-    function loadScript(src, callback) {
-      const body = document.querySelector('body')
-      const script = document.createElement('script');
-      script.src = src;
-      script.onload = callback;
-      body.appendChild(script);
-    };
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container-fluid">
+    <div class="row">
+        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'integration')"></div>
+        <div class="col-10">
+            <div class="row mt-4">
+                <div class="col">
+                    <p class="fw-bold mb-2"th:text="#{text.script-descr}"></p>
+                    <pre style="font-size:18px" class="form-control user-select-all d-inline-flex mb-3" readonly>
+&lt;script&gt;
+function loadScript(src, callback) {
+  const body = document.querySelector('body')
+  const script = document.createElement('script');
+  script.src = src;
+  script.onload = callback;
+  body.appendChild(script);
+};
 
-    document.addEventListener('DOMContentLoaded', function () {
-      const scriptSrc = 'https://cdn.jsdelivr.net/gh/hexlet/hexlet-correction@latest/src/widget/index.js?v=' + new Date().getTime();
-      loadScript(scriptSrc, function () {
-        handleTypoReporter({
-          authorizationToken: '[[${wksBasicToken}]]',
-          workSpaceUrl: '[[${rootUrl}]]',
-          workSpaceId: '[[${wksId}]]'})
-      });
-    });
-    &lt;/script&gt;
-                      </pre>
-                  </div>
+document.addEventListener('DOMContentLoaded', function () {
+  const scriptSrc = 'https://cdn.jsdelivr.net/gh/hexlet/hexlet-correction@latest/src/widget/index.js?v=' + new Date().getTime();
+  loadScript(scriptSrc, function () {
+    handleTypoReporter({
+      authorizationToken: '[[${wksBasicToken}]]',
+      workSpaceUrl: '[[${rootUrl}]]',
+      workSpaceId: '[[${wksId}]]'})
+  });
+});
+&lt;/script&gt;
+                  </pre>
               </div>
-            </div>
+          </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-settings.html b/src/main/resources/templates/workspace/wks-settings.html
index 0a2bcf48..1c4ac2e3 100644
--- a/src/main/resources/templates/workspace/wks-settings.html
+++ b/src/main/resources/templates/workspace/wks-settings.html
@@ -1,139 +1,138 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container-fluid">
-        <div class="row">
-            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'settings')"></div>
-            <div class="col">
-                <div class="row my-3"
-                     th:if="${sumTypoInWks} > 0"
-                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-                <div class="row">
-                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container-fluid">
+    <div class="row">
+        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'settings')"></div>
+        <div class="col">
+            <div class="row my-3"
+                 th:if="${sumTypoInWks} > 0"
+                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+            <div class="row">
+                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+            </div>
+            <div class="row"
+                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+            <div class="row my-2">
+                <div aria-label="Re-generate workspace authentication token" class="col">
+                    <form th:method="patch"
+                          th:if="${isAdmin}"
+                          th:action="@{'/workspace/' + ${wksId} + '/token/regenerate'}">
+                        <button class="btn btn-danger" type="submit" th:text="#{btn.regenerate-token}"></button>
+                    </form>
                 </div>
-                <div class="row"
-                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-                <div class="row my-2">
-                    <div aria-label="Re-generate workspace authentication token" class="col">
-                        <form th:method="patch"
-                              th:if="${isAdmin}"
-                              th:action="@{'/workspace/' + ${wksId} + '/token/regenerate'}">
-                            <button class="btn btn-danger" type="submit" th:text="#{btn.regenerate-token}"></button>
-                        </form>
-                    </div>
+            </div>
+            <div class="row mt-4">
+                <div class="col">
+                    <p class="fw-bold mb-2" th:text="|#{text.wks-access-token}|"></p>
+                    <p class="form-control user-select-all d-inline-flex mb-3" readonly>[[${wksBasicToken} ?: '&lt;Token not generated&gt;']]</p>
+                    <p class="fw-bold mb-2" th:text="|#{text.use-header}|"></p>
+                    <p class="form-control user-select-all  d-inline-flex mb-3" readonly>Basic [[${wksBasicToken}]]</p>
                 </div>
-                <div class="row mt-4">
+                <!-- Adding an url to a workspace -->
+                <div class="row my-3">
+                    <p class="fw-bold mb-2" th:text="#{text.allowed-urls}"></p>
                     <div class="col">
-                        <p class="fw-bold mb-2" th:text="|#{text.wks-access-token}|"></p>
-                        <p class="form-control user-select-all d-inline-flex mb-3" readonly>[[${wksBasicToken} ?: '&lt;Token not generated&gt;']]</p>
-                        <p class="fw-bold mb-2" th:text="|#{text.use-header}|"></p>
-                        <p class="form-control user-select-all  d-inline-flex mb-3" readonly>Basic [[${wksBasicToken}]]</p>
-                    </div>
-                    <!-- Adding an url to a workspace -->
-                    <div class="row my-3">
-                        <p class="fw-bold mb-2" th:text="#{text.allowed-urls}"></p>
-                        <div class="col">
-                            <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}" th:object="${inputUrl}">
-                                <div class="row">
-                                    <div class="col-7">
-                                        <input type="url" class="form-control mb-2 col" id="inputUrl" th:placeholder="#{text.input-url-placeholder}" th:field="*{url}"
-                                               th:classappend="${#fields.hasErrors('url') && formModified}? 'is-invalid'"
-                                               th:errorclass="is-invalid" required>
-                                    </div>
-                                    <div class="col-5">
-                                        <button type="submit" class="btn btn-light" th:text="#{btn.add-to-wks}"></button>
-                                    </div>
-                                </div>
-                                <div class="row mt-2">
-                                    <div class="col-12">
-                                        <ul class="invalid-feedback" th:if="${#fields.hasErrors('url')}">
-                                            <li th:each="err : ${#fields.errors('url')}" th:text="${err}"></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                    <!-- Workspace urls page -->
-                    <div class="row" th:if="${urlsPage.hasContent()}">
-                        <main class="col">
+                        <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}" th:object="${inputUrl}">
                             <div class="row">
-                                <!-- Page size dropdown -->
+                                <div class="col-7">
+                                    <input type="url" class="form-control mb-2 col" id="inputUrl" th:placeholder="#{text.input-url-placeholder}" th:field="*{url}"
+                                           th:classappend="${#fields.hasErrors('url') && formModified}? 'is-invalid'"
+                                           th:errorclass="is-invalid" required>
+                                </div>
                                 <div class="col-5">
-                                    <div class="dropdown">
-                                        <button aria-expanded="false"
-                                                class="btn btn-light dropdown-toggle"
-                                                data-bs-toggle="dropdown"
-                                                id="dropdownSizePage"
-                                                th:text="|#{btn.page-size} ${urlsPage.size}|"
-                                                type="button">
-                                        </button>
-                                        <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
-                                            <li th:each="availableSize : ${availableSizes}">
-                                                <a class="dropdown-item"
-                                                   th:classappend="(${urlsPage.size} == ${availableSize} ? 'disabled' : '')"
-                                                   th:href="@{'/workspace/' + ${wksId} + '/settings'(page=0,size=${availableSize},${sortDir}|)}"
-                                                   th:text="${availableSize}">
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </div>
+                                    <button type="submit" class="btn btn-light" th:text="#{btn.add-to-wks}"></button>
+                                </div>
+                            </div>
+                            <div class="row mt-2">
+                                <div class="col-12">
+                                    <ul class="invalid-feedback" th:if="${#fields.hasErrors('url')}">
+                                        <li th:each="err : ${#fields.errors('url')}" th:text="${err}"></li>
+                                    </ul>
                                 </div>
-                                <!-- Page pagination -->
-                                <div class="col-sm-6">
-                                    <ul class="pagination" sd:pagination="full"></ul>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <!-- Workspace urls page -->
+                <div class="row" th:if="${urlsPage.hasContent()}">
+                    <main class="col">
+                        <div class="row">
+                            <!-- Page size dropdown -->
+                            <div class="col-5">
+                                <div class="dropdown">
+                                    <button aria-expanded="false"
+                                            class="btn btn-light dropdown-toggle"
+                                            data-bs-toggle="dropdown"
+                                            id="dropdownSizePage"
+                                            th:text="|#{btn.page-size} ${urlsPage.size}|"
+                                            type="button">
+                                    </button>
+                                    <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
+                                        <li th:each="availableSize : ${availableSizes}">
+                                            <a class="dropdown-item"
+                                               th:classappend="(${urlsPage.size} == ${availableSize} ? 'disabled' : '')"
+                                               th:href="@{'/workspace/' + ${wksId} + '/settings'(page=0,size=${availableSize},${sortDir}|)}"
+                                               th:text="${availableSize}">
+                                            </a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
-                            <!-- Workspace urls table -->
-                            <div class="row">
-                                <div class="col">
-                                    <table class="table">
-                                        <!-- Workspace urls table head -->
-                                        <colgroup>
-                                            <col class="col-11">
-                                            <col class="col-1">
-                                        </colgroup>
-                                        <thead th:object="${urlsPage}">
+                            <!-- Page pagination -->
+                            <div class="col-sm-6">
+                                <ul class="pagination" sd:pagination="full"></ul>
+                            </div>
+                        </div>
+                        <!-- Workspace urls table -->
+                        <div class="row">
+                            <div class="col">
+                                <table class="table">
+                                    <!-- Workspace urls table head -->
+                                    <colgroup>
+                                        <col class="col-11">
+                                        <col class="col-1">
+                                    </colgroup>
+                                    <thead th:object="${urlsPage}">
+                                    <tr>
+                                        <th scope="col" colspan="2">
+                                            <a class="btn btn-light"
+                                               th:href="@{'/workspace/' + ${wksId} + '/settings'(size=*{size},sort=|url,${sortDir.isAscending() ? DESC : ASC}|)}">
+                                                <span th:text="#{report-url}"></span> <span>[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                            </a>
+                                        </th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    <th:block th:each="url : ${urlsPage.content}" th:object="${url}">
+                                        <!-- Workspace url table row -->
                                         <tr>
-                                            <th scope="col" colspan="2">
-                                                <a class="btn btn-light"
-                                                   th:href="@{'/workspace/' + ${wksId} + '/settings'(size=*{size},sort=|url,${sortDir.isAscending() ? DESC : ASC}|)}">
-                                                    <span th:text="#{report-url}"></span> <span>[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                                </a>
-                                            </th>
+                                            <td class="align-middle" th:text="*{url}"></td>
+                                            <td>
+                                                <form th:method="DELETE"
+                                                      th:if="isAdmin"
+                                                      th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}">
+                                                    <input type="hidden" th:value="*{url}" name="url">
+                                                    <button type="submit" class="btn btn-danger"
+                                                            th:text="#{btn.delete}"
+                                                            th:onclick="return confirm(/*[[#{text.confirm-delete-url-wks}]]*/)"
+                                                    ></button>
+                                                </form>
+                                            </td>
                                         </tr>
-                                        </thead>
-                                        <tbody>
-                                        <th:block th:each="url : ${urlsPage.content}" th:object="${url}">
-                                            <!-- Workspace url table row -->
-                                            <tr>
-                                                <td class="align-middle" th:text="*{url}"></td>
-                                                <td>
-                                                    <form th:method="DELETE"
-                                                          th:if="isAdmin"
-                                                          th:action="@{'/workspace/' + ${wksId} + '/allowed-urls'}">
-                                                        <input type="hidden" th:value="*{url}" name="url">
-                                                        <button type="submit" class="btn btn-danger"
-                                                                th:text="#{btn.delete}"
-                                                                th:onclick="return confirm(/*[[#{text.confirm-delete-url-wks}]]*/)"
-                                                        ></button>
-                                                    </form>
-                                                </td>
-                                            </tr>
-                                        </th:block>
-                                        </tbody>
-                                    </table>
-                                </div>
+                                    </th:block>
+                                    </tbody>
+                                </table>
                             </div>
-                        </main>
-                    </div>
+                        </div>
+                    </main>
                 </div>
             </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-typos.html b/src/main/resources/templates/workspace/wks-typos.html
index a74d2fde..f73f20fd 100644
--- a/src/main/resources/templates/workspace/wks-typos.html
+++ b/src/main/resources/templates/workspace/wks-typos.html
@@ -1,222 +1,221 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sd="http://www.w3.org/1999/xhtml">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container-fluid">
-        <div class="row">
-            <!-- Workspace Side Bar -->
-            <div class="col-2" th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'typos')"></div>
-            <div class="col">
-                <!-- Workspace progress typo bar -->
-                <div class="row my-3"
-                     th:if="${sumTypoInWks} > 0"
-                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-                <!-- Workspace number of typo -->
-                <div class="row">
-                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-                </div>
-                <!-- Workspace last typo date -->
-                <div class="row"
-                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-                <!-- Workspace typo page -->
-                <div class="row">
-                    <main class="col">
-                        <div class="row">
-                            <!-- Page filtration -->
-                            <div class="col-2">
-                                <div class="dropdown">
-                                    <button aria-expanded="false"
-                                            class="btn dropdown-toggle"
-                                            th:classappend="typoStatus == null ? btn-secondary : |btn-${typoStatusStyle}|"
-                                            data-bs-toggle="dropdown"
-                                            id="dropdownFilter"
-                                            th:text="${typoStatus} == null ? #{btn.page-empty-filter} : #{${#strings.replace(typoStatus, '_', ' ')}}"
-                                            type="button">
-                                    </button>
-                                    <ul aria-labelledby="dropdownFilter" class="dropdown-menu">
-                                        <li>
-                                            <a class="dropdown-item"
-                                               th:classappend="(${typoStatus} == null ? 'disabled' : '')"
-                                               th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|)}"
-                                               th:text="#{btn.page-empty-filter}">
-                                            </a>
-                                        </li>
-                                        <li th:each="status : ${availableStatuses}">
-                                            <a class="dropdown-item"
-                                               th:classappend="(${typoStatus} == ${#strings.replace(status, ' ', '_')} ? 'disabled' : '')"
-                                               th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|, typoStatus=${#strings.replace(status, ' ', '_')})}"
-                                               th:text="#{${status}}">
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container-fluid">
+    <div class="row">
+        <!-- Workspace Side Bar -->
+        <div class="col-2" th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'typos')"></div>
+        <div class="col">
+            <!-- Workspace progress typo bar -->
+            <div class="row my-3"
+                 th:if="${sumTypoInWks} > 0"
+                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+            <!-- Workspace number of typo -->
+            <div class="row">
+                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+            </div>
+            <!-- Workspace last typo date -->
+            <div class="row"
+                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+            <!-- Workspace typo page -->
+            <div class="row">
+                <main class="col">
+                    <div class="row">
+                        <!-- Page filtration -->
+                        <div class="col-2">
+                            <div class="dropdown">
+                                <button aria-expanded="false"
+                                        class="btn dropdown-toggle"
+                                        th:classappend="typoStatus == null ? btn-secondary : |btn-${typoStatusStyle}|"
+                                        data-bs-toggle="dropdown"
+                                        id="dropdownFilter"
+                                        th:text="${typoStatus} == null ? #{btn.page-empty-filter} : #{${#strings.replace(typoStatus, '_', ' ')}}"
+                                        type="button">
+                                </button>
+                                <ul aria-labelledby="dropdownFilter" class="dropdown-menu">
+                                    <li>
+                                        <a class="dropdown-item"
+                                           th:classappend="(${typoStatus} == null ? 'disabled' : '')"
+                                           th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|)}"
+                                           th:text="#{btn.page-empty-filter}">
+                                        </a>
+                                    </li>
+                                    <li th:each="status : ${availableStatuses}">
+                                        <a class="dropdown-item"
+                                           th:classappend="(${typoStatus} == ${#strings.replace(status, ' ', '_')} ? 'disabled' : '')"
+                                           th:href="@{'/workspace/' + ${wksId} + '/typos'(page=0,size=${typoPage.size},sort=|${sortProp},${sortDir}|, typoStatus=${#strings.replace(status, ' ', '_')})}"
+                                           th:text="#{${status}}">
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
+                        </div>
 
-                            <!-- Page size dropdown -->
-                            <div class="col-3">
-                                <div class="dropdown">
-                                    <button aria-expanded="false"
-                                            class="btn btn-secondary dropdown-toggle"
-                                            data-bs-toggle="dropdown"
-                                            id="dropdownSizePage"
-                                            th:text="|#{btn.page-size} ${typoPage.size}|"
-                                            type="button">
-                                    </button>
-                                    <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
-                                        <li th:each="availableSize : ${availableSizes}">
-                                            <a class="dropdown-item"
-                                               th:classappend="(${typoPage.size} == ${availableSize} ? 'disabled' : '')"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|)}"
-                                               th:text="${availableSize}">
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
+                        <!-- Page size dropdown -->
+                        <div class="col-3">
+                            <div class="dropdown">
+                                <button aria-expanded="false"
+                                        class="btn btn-secondary dropdown-toggle"
+                                        data-bs-toggle="dropdown"
+                                        id="dropdownSizePage"
+                                        th:text="|#{btn.page-size} ${typoPage.size}|"
+                                        type="button">
+                                </button>
+                                <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
+                                    <li th:each="availableSize : ${availableSizes}">
+                                        <a class="dropdown-item"
+                                           th:classappend="(${typoPage.size} == ${availableSize} ? 'disabled' : '')"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(page=0,size=${availableSize},sort=|${sortProp},${sortDir}|)}"
+                                           th:text="${availableSize}">
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
+                        </div>
 
 
-                            <!-- Page pagination -->
-                            <div class="col-sm-6">
-                                <ul class="pagination" sd:pagination="full"></ul>
-                            </div>
+                        <!-- Page pagination -->
+                        <div class="col-sm-6">
+                            <ul class="pagination" sd:pagination="full"></ul>
                         </div>
-                        <!-- Workspace typo table -->
-                        <div class="row">
-                            <div class="col">
-                                <table class="table">
-                                    <!-- Workspace typo table head -->
-                                    <thead th:object="${typoPage}">
-                                    <tr>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{url-page}"></span> <span th:if="${sortProp == 'pageUrl'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{reporter-name}"></span> <span th:if="${sortProp == 'reporterName'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{date.created}"></span> <span th:if="${sortProp == 'createdDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{date.modified}"></span> <span  th:if="${sortProp == 'modifiedDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{modified-by}"></span> <span th:if="${sortProp == 'modifiedBy'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="${typoStatus} != null ?
-                                                    @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
-                                                    : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{typo-status}"></span> <span th:if="${sortProp == 'typoStatus'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
+                    </div>
+                    <!-- Workspace typo table -->
+                    <div class="row">
+                        <div class="col">
+                            <table class="table">
+                                <!-- Workspace typo table head -->
+                                <thead th:object="${typoPage}">
+                                <tr>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|pageUrl,${sortProp == 'pageUrl' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{url-page}"></span> <span th:if="${sortProp == 'pageUrl'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|reporterName,${sortProp == 'reporterName' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{reporter-name}"></span> <span th:if="${sortProp == 'reporterName'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|createdDate,${sortProp == 'createdDate' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{date.created}"></span> <span th:if="${sortProp == 'createdDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedDate,${sortProp == 'modifiedDate' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{date.modified}"></span> <span  th:if="${sortProp == 'modifiedDate'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|modifiedBy,${sortProp == 'modifiedBy' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{modified-by}"></span> <span th:if="${sortProp == 'modifiedBy'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="${typoStatus} != null ?
+                                                @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|, typoStatus=${typoStatus})}
+                                                : @{'/workspace/' + ${wksId} + '/typos'(size=*{size},sort=|typoStatus,${sortProp == 'typoStatus' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{typo-status}"></span> <span th:if="${sortProp == 'typoStatus'}">[[${sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <th:block th:each="typoInfo : ${typoPage.content}" th:object="${typoInfo}">
+                                    <!-- Workspace typo table row -->
+                                    <tr aria-expanded="false" class="accordion collapsed" data-bs-toggle="collapse"
+                                        th:aria-controls="|collapseTypoRowId_*{id}|"
+                                        th:classappend="|table-*{typoStatus.getStyle}|"
+                                        th:data-bs-target="|#collapseTypoRowId_*{id}|">
+                                        <td th:text="*{pageUrl}" class="text-break"></td>
+                                        <td th:text="*{reporterName}"></td>
+                                        <td th:text="*{createdDateAgo}"></td>
+                                        <td th:text="*{modifiedDateAgo}"></td>
+                                        <td th:text="*{modifiedBy} != ${wksInfo.id} ? *{modifiedBy} : ''"></td>
+                                        <td th:text="#{*{typoStatus}}"></td>
                                     </tr>
-                                    </thead>
-                                    <tbody>
-                                    <th:block th:each="typoInfo : ${typoPage.content}" th:object="${typoInfo}">
-                                        <!-- Workspace typo table row -->
-                                        <tr aria-expanded="false" class="accordion collapsed" data-bs-toggle="collapse"
-                                            th:aria-controls="|collapseTypoRowId_*{id}|"
-                                            th:classappend="|table-*{typoStatus.getStyle}|"
-                                            th:data-bs-target="|#collapseTypoRowId_*{id}|">
-                                            <td th:text="*{pageUrl}" class="text-break"></td>
-                                            <td th:text="*{reporterName}"></td>
-                                            <td th:text="*{createdDateAgo}"></td>
-                                            <td th:text="*{modifiedDateAgo}"></td>
-                                            <td th:text="*{modifiedBy} != ${wksInfo.id} ? *{modifiedBy} : ''"></td>
-                                            <td th:text="#{*{typoStatus}}"></td>
-                                        </tr>
-                                        <!-- Workspace typo table row collapsed part -->
-                                        <tr>
-                                            <td class="p-0" colspan="7">
-                                                <div class="accordion-collapse collapse" th:id="|collapseTypoRowId_*{id}|"
-                                                th:with="searchUri=${typoStatus} != null ?
-                                                            @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir}, typoStatus=${typoStatus})}
-                                                            : @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir})}">
-                                                    <div class="p-4">
-                                                        <div class="row mb-2">
-                                                            <!-- Workspace typo table row change status buttons -->
-                                                            <div class="col-11">
-                                                                <div aria-label="Change typo status button group"
-                                                                     class="btn-group"
-                                                                     role="group">
-                                                                    <form
-                                                                        th:action="@{|/typos/*{id}/status?wksId=${wksId}&event=${event}|(next=${searchUri})}"
-                                                                        th:each="event : *{typoStatus.getValidEvents()}"
-                                                                        th:method="patch">
-                                                                        <button class="btn me-1"
-                                                                                th:classappend="|btn-${event.getStyle()}|"
-                                                                                th:text="#{|btn.${event.getButtonName()}|}"
-                                                                                type="submit">
-                                                                        </button>
-                                                                    </form>
-                                                                </div>
+                                    <!-- Workspace typo table row collapsed part -->
+                                    <tr>
+                                        <td class="p-0" colspan="7">
+                                            <div class="accordion-collapse collapse" th:id="|collapseTypoRowId_*{id}|"
+                                            th:with="searchUri=${typoStatus} != null ?
+                                                        @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir}, typoStatus=${typoStatus})}
+                                                        : @{'/typos?'(page=${typoPage.pageable.getPageNumber()},size=${typoPage.size},sort=${sortProp} + ',' + ${sortDir})}">
+                                                <div class="p-4">
+                                                    <div class="row mb-2">
+                                                        <!-- Workspace typo table row change status buttons -->
+                                                        <div class="col-11">
+                                                            <div aria-label="Change typo status button group"
+                                                                 class="btn-group"
+                                                                 role="group">
+                                                                <form
+                                                                    th:action="@{|/typos/*{id}/status?wksId=${wksId}&event=${event}|(next=${searchUri})}"
+                                                                    th:each="event : *{typoStatus.getValidEvents()}"
+                                                                    th:method="patch">
+                                                                    <button class="btn me-1"
+                                                                            th:classappend="|btn-${event.getStyle()}|"
+                                                                            th:text="#{|btn.${event.getButtonName()}|}"
+                                                                            type="submit">
+                                                                    </button>
+                                                                </form>
                                                             </div>
                                                         </div>
-                                                        <div class="row">
-                                                            <div class="col">
-                                                                <p>
-                                                                    <span th:text="|#{text.created-at}|"/>
-                                                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                                                    <span th:text="*{#temporals.format(createdDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{createdDate}"/>
-                                                                </p>
-                                                                <p>
-                                                                    <span th:text="|#{text.modified-at}|"/>
-                                                                    <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
-                                                                    <span th:text="*{#temporals.format(modifiedDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{modifiedDate}"/>
-                                                                </p>
-                                                                <hr>
-                                                                <p class="fst-italic"
-                                                                   th:text="|#{text.reported-by} *{reporterName}: *{reporterComment}|"></p>
-                                                                <hr>
-                                                                <p class="text-muted">
-                                                                    [[*{textBeforeTypo}]]<span class="text-danger">[[*{textTypo}]]</span>[[*{textAfterTypo}]]
-                                                                </p>
-                                                            </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p>
+                                                                <span th:text="|#{text.created-at}|"/>
+                                                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                                                <span th:text="*{#temporals.format(createdDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{createdDate}"/>
+                                                            </p>
+                                                            <p>
+                                                                <span th:text="|#{text.modified-at}|"/>
+                                                                <!-- The text will be overwritten by time-converter.js unless JS is disabled -->
+                                                                <span th:text="*{#temporals.format(modifiedDate, 'dd/MM/yyyy HH:mm:ss')}" th:data-original-date="*{modifiedDate}"/>
+                                                            </p>
+                                                            <hr>
+                                                            <p class="fst-italic"
+                                                               th:text="|#{text.reported-by} *{reporterName}: *{reporterComment}|"></p>
+                                                            <hr>
+                                                            <p class="text-muted">
+                                                                [[*{textBeforeTypo}]]<span class="text-danger">[[*{textTypo}]]</span>[[*{textAfterTypo}]]
+                                                            </p>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </td>
-                                        </tr>
-                                    </th:block>
-                                    </tbody>
-                                </table>
-                            </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </th:block>
+                                </tbody>
+                            </table>
                         </div>
-                    </main>
-                </div>
+                    </div>
+                </main>
             </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-update.html b/src/main/resources/templates/workspace/wks-update.html
index e21d81a3..37a869ac 100644
--- a/src/main/resources/templates/workspace/wks-update.html
+++ b/src/main/resources/templates/workspace/wks-update.html
@@ -1,72 +1,71 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container-fluid">
-        <div class="row">
-            <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'info')"></div>
-            <div class="col">
-                <div class="row my-3"
-                     th:if="${sumTypoInWks} > 0"
-                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-                <div class="row">
-                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container-fluid">
+    <div class="row">
+        <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'info')"></div>
+        <div class="col">
+            <div class="row my-3"
+                 th:if="${sumTypoInWks} > 0"
+                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+            <div class="row">
+                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+            </div>
+            <div class="row"
+                 th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
+                 th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
+            <div class="row row-cols-1 row-cols-md-2 g-4">
+                <div class="col">
+                    <form th:action="@{'/workspace/' + ${wksId} + '/update'}" th:method="put" th:object="${createWorkspace}">
+                        <div class="form-floating mb-3">
+                            <input class="form-control" id="inputWksName" placeholder="p"
+                                   th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
+                                   th:errorclass="is-invalid"
+                                   th:field="*{name}"
+                                   type="text">
+                            <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
+                            <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" id="inputWksUrl" placeholder="p" autofocus
+                                   th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
+                                   th:errorclass="is-invalid"
+                                   th:field="*{url}"
+                                   type="text">
+                            <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
+                            <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
+                                      th:classappend="${!#fields.hasErrors('description') && formModified ? 'is-valid' : ''}"
+                                      th:errorclass="is-invalid"
+                                      th:field="*{description}"></textarea>
+                            <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
+                            <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}" th:text="${err}"></div>
+                        </div>
+                        <button class="btn btn-primary" type="submit" th:text="#{btn.edit}"></button>
+                        <a class="btn btn-secondary" th:href="@{'/workspace/' + ${wksId}}" th:text="#{btn.close}"></a>
+                    </form>
                 </div>
-                <div class="row"
-                     th:if="${lastTypoCreatedDateAgo.isPresent() && lastTypoCreatedDate.isPresent()}"
-                     th:insert="~{fragments/workspace :: wksLastTypoDate (${lastTypoCreatedDateAgo}, ${lastTypoCreatedDate})}"></div>
-                <div class="row row-cols-1 row-cols-md-2 g-4">
-                    <div class="col">
-                        <form th:action="@{'/workspace/' + ${wksId} + '/update'}" th:method="put" th:object="${createWorkspace}">
-                            <div class="form-floating mb-3">
-                                <input class="form-control" id="inputWksName" placeholder="p"
-                                       th:classappend="${!#fields.hasErrors('name') && formModified ? 'is-valid' : ''}"
-                                       th:errorclass="is-invalid"
-                                       th:field="*{name}"
-                                       type="text">
-                                <label for="inputWksName" th:text="#{wks.placeholder.name}"></label>
-                                <div class="invalid-feedback" th:each="err : ${#fields.errors('name')}" th:text="${err}"></div>
-                            </div>
-                            <div class="form-floating mb-3">
-                                <input class="form-control" id="inputWksUrl" placeholder="p" autofocus
-                                       th:classappend="${!#fields.hasErrors('url') && formModified ? 'is-valid' : ''}"
-                                       th:errorclass="is-invalid"
-                                       th:field="*{url}"
-                                       type="text">
-                                <label for="inputWksUrl" th:text="#{wks.placeholder.url}"></label>
-                                <div class="invalid-feedback" th:each="err : ${#fields.errors('url')}" th:text="${err}"></div>
-                            </div>
-                            <div class="form-floating mb-3">
-                                <textarea class="form-control" id="inWksDesc" placeholder="p" style="height: 100px"
-                                          th:classappend="${!#fields.hasErrors('description') && formModified ? 'is-valid' : ''}"
-                                          th:errorclass="is-invalid"
-                                          th:field="*{description}"></textarea>
-                                <label for="inWksDesc" th:text="#{wks.placeholder.descr}"></label>
-                                <div class="invalid-feedback" th:each="err : ${#fields.errors('description')}" th:text="${err}"></div>
-                            </div>
-                            <button class="btn btn-primary" type="submit" th:text="#{btn.edit}"></button>
-                            <a class="btn btn-secondary" th:href="@{'/workspace/' + ${wksId}}" th:text="#{btn.close}"></a>
-                        </form>
-                    </div>
-                    <div class="col">
-                        <ul class="list-group list-group-flush col-6">
-                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
-                                th:classappend="|text-*{key.getStyle()}|"
-                                th:each="pair : ${countTypoByStatus}"
-                                th:object="${pair}">
-                                [[*{key.toString()}]]<span class="badge rounded-pill"
-                                                           th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
-                            </li>
-                            <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
-                                TOTAL<span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
-                            </li>
-                        </ul>
-                    </div>
+                <div class="col">
+                    <ul class="list-group list-group-flush col-6">
+                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bold bg-gradient"
+                            th:classappend="|text-*{key.getStyle()}|"
+                            th:each="pair : ${countTypoByStatus}"
+                            th:object="${pair}">
+                            [[*{key.toString()}]]<span class="badge rounded-pill"
+                                                       th:classappend="|bg-*{key.getStyle()}|">[[*{value}]]</span>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center fw-bolder text-primary">
+                            TOTAL<span class="badge rounded-pill bg-primary" th:text="${sumTypoInWks}"></span>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-users.html b/src/main/resources/templates/workspace/wks-users.html
index 3dba0532..3e5f68f3 100644
--- a/src/main/resources/templates/workspace/wks-users.html
+++ b/src/main/resources/templates/workspace/wks-users.html
@@ -1,138 +1,137 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:sd="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container-fluid">
-        <div class="row">
-            <!-- Workspace Side Bar -->
-            <!-- <div class="col-2" th:include="~{fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')}"></div> -->
-            <div class="col-2"
-                 th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')"></div>
-            <div class="col">
-                <!-- Workspace progress typo bar -->
-                <div class="row my-3"
-                     th:if="${sumTypoInWks} > 0"
-                     th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
-                <!-- Workspace number of typo -->
-                <div class="row">
-                    <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
-                </div>
-                <!-- Adding a user to a workspace -->
-                <div class="row my-3">
-                    <p th:text="#{text.add-user-to-wks}"></p>
-                    <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/users'}" th:object="${inputEmail}">
-                        <div class="form-group">
-                            <input type="email" class="form-control" id="inputUserEmail"
-                                   th:placeholder="#{wks.users.email-placeholder}" th:field="*{email}"
-                                   th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
-                                   th:errorclass="is-invalid" required>
-                            <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
-                                <p class="mb-0" th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
-                            </div>
-                            <small id="emailHelp" class="form-text text-muted"></small>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container-fluid">
+    <div class="row">
+        <!-- Workspace Side Bar -->
+        <!-- <div class="col-2" th:include="~{fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')}"></div> -->
+        <div class="col-2"
+             th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')"></div>
+        <div class="col">
+            <!-- Workspace progress typo bar -->
+            <div class="row my-3"
+                 th:if="${sumTypoInWks} > 0"
+                 th:insert="~{fragments/workspace :: wksProgressBar (${sumTypoInWks}, ${countTypoByStatus})}"></div>
+            <!-- Workspace number of typo -->
+            <div class="row">
+                <p th:text="|#{text.number-of-typos(${wksName}, ${sumTypoInWks})}|"></p>
+            </div>
+            <!-- Adding a user to a workspace -->
+            <div class="row my-3">
+                <p th:text="#{text.add-user-to-wks}"></p>
+                <form method="POST" th:action="@{'/workspace/' + ${wksId} + '/users'}" th:object="${inputEmail}">
+                    <div class="form-group">
+                        <input type="email" class="form-control" id="inputUserEmail"
+                               th:placeholder="#{wks.users.email-placeholder}" th:field="*{email}"
+                               th:classappend="${!#fields.hasErrors('email') && formModified}? 'is-valid'"
+                               th:errorclass="is-invalid" required>
+                        <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
+                            <p class="mb-0" th:each="err : ${#fields.errors('email')}" th:text="${err}"></p>
                         </div>
-                        <button type="submit" class="btn btn-secondary mt-1"
-                                th:text="#{btn.add-to-wks}"></button>
-                    </form>
-                </div>
-                <div class="row">
-                    <main class="col">
-                        <div class="row">
-                            <!-- Page size dropdown -->
-                            <div class="col-2">
-                                <div class="dropdown">
-                                    <button aria-expanded="false"
-                                            class="btn btn-secondary dropdown-toggle"
-                                            data-bs-toggle="dropdown"
-                                            id="dropdownSizePage"
-                                            th:text="|#{btn.page-size} ${userPage.size}|"
-                                            type="button">
-                                    </button>
-                                    <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
-                                        <li th:each="avalibleSize : ${availableSizes}">
-                                            <a class="dropdown-item"
-                                               th:classappend="(${userPage.size} == ${avalibleSize} ? 'disabled' : '')"
-                                               th:href="@{'/workspace/' + ${wksId} + '/users'(page=0,size=${avalibleSize},sort=|${sortProp},${sortDir}|)}"
-                                               th:text="${avalibleSize}">
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <!-- Page pagination -->
-                            <div class="col-sm-6">
-                                <ul class="pagination" sd:pagination="full"></ul>
+                        <small id="emailHelp" class="form-text text-muted"></small>
+                    </div>
+                    <button type="submit" class="btn btn-secondary mt-1"
+                            th:text="#{btn.add-to-wks}"></button>
+                </form>
+            </div>
+            <div class="row">
+                <main class="col">
+                    <div class="row">
+                        <!-- Page size dropdown -->
+                        <div class="col-2">
+                            <div class="dropdown">
+                                <button aria-expanded="false"
+                                        class="btn btn-secondary dropdown-toggle"
+                                        data-bs-toggle="dropdown"
+                                        id="dropdownSizePage"
+                                        th:text="|#{btn.page-size} ${userPage.size}|"
+                                        type="button">
+                                </button>
+                                <ul aria-labelledby="dropdownSizePage" class="dropdown-menu">
+                                    <li th:each="avalibleSize : ${availableSizes}">
+                                        <a class="dropdown-item"
+                                           th:classappend="(${userPage.size} == ${avalibleSize} ? 'disabled' : '')"
+                                           th:href="@{'/workspace/' + ${wksId} + '/users'(page=0,size=${avalibleSize},sort=|${sortProp},${sortDir}|)}"
+                                           th:text="${avalibleSize}">
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
                         </div>
-                        <!-- Workspace user table -->
-                        <div class="row">
-                            <div class="col">
-                                <table class="table">
-                                    <!-- Workspace user table head -->
-                                    <thead th:object="${userPage}">
+                        <!-- Page pagination -->
+                        <div class="col-sm-6">
+                            <ul class="pagination" sd:pagination="full"></ul>
+                        </div>
+                    </div>
+                    <!-- Workspace user table -->
+                    <div class="row">
+                        <div class="col">
+                            <table class="table">
+                                <!-- Workspace user table head -->
+                                <thead th:object="${userPage}">
+                                <tr>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|id,${sortProp == 'id' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            Id <span>[[${sortProp == 'id' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|firstName,${sortProp == 'firstName' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{firstname}"></span> <span>[[${sortProp == 'firstName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|lastName,${sortProp == 'lastName' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{lastname}"></span> <span>[[${sortProp == 'lastName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                        <a class="btn btn-light"
+                                           th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|email,${sortProp == 'email' && sortDir.isAscending() ? DESC : ASC}|)}">
+                                            <span th:text="#{email}"></span> <span>[[${sortProp == 'email' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
+                                        </a>
+                                    </th>
+                                    <th scope="col">
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <th:block th:each="userInfo : ${userPage.content}" th:object="${userInfo}">
+                                    <!-- Workspace user table row -->
                                     <tr>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|id,${sortProp == 'id' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                Id <span>[[${sortProp == 'id' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|firstName,${sortProp == 'firstName' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{firstname}"></span> <span>[[${sortProp == 'firstName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|lastName,${sortProp == 'lastName' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{lastname}"></span> <span>[[${sortProp == 'lastName' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                            <a class="btn btn-light"
-                                               th:href="@{'/workspace/' + ${wksId} + '/users'(size=*{size},sort=|email,${sortProp == 'email' && sortDir.isAscending() ? DESC : ASC}|)}">
-                                                <span th:text="#{email}"></span> <span>[[${sortProp == 'email' && sortDir.isAscending() ? '&uArr;' : '&dArr;'}]]</span>
-                                            </a>
-                                        </th>
-                                        <th scope="col">
-                                        </th>
+                                        <td th:text="*{id}"></td>
+                                        <td th:text="*{firstName}"></td>
+                                        <td th:text="*{lastName}"></td>
+                                        <td th:text="*{email}"></td>
+                                        <td>
+                                            <form th:method="DELETE"
+                                                  th:if="${isAdmin} and ${!excludeDeleteAccounts.contains(userInfo)}"
+                                                  th:action="@{'/workspace/' + ${wksId} + '/users'}">
+                                                <input type="hidden" th:value="*{email}" name="email">
+                                                <button type="submit" class="btn btn-danger"
+                                                        th:text="#{btn.delete-from-wks}"
+                                                        th:onclick="return confirm(/*[[#{text.confirm-delete-user-wks}]]*/)"
+                                                ></button>
+                                            </form>
+                                        </td>
                                     </tr>
-                                    </thead>
-                                    <tbody>
-                                    <th:block th:each="userInfo : ${userPage.content}" th:object="${userInfo}">
-                                        <!-- Workspace user table row -->
-                                        <tr>
-                                            <td th:text="*{id}"></td>
-                                            <td th:text="*{firstName}"></td>
-                                            <td th:text="*{lastName}"></td>
-                                            <td th:text="*{email}"></td>
-                                            <td>
-                                                <form th:method="DELETE"
-                                                      th:if="${isAdmin} and ${!excludeDeleteAccounts.contains(userInfo)}"
-                                                      th:action="@{'/workspace/' + ${wksId} + '/users'}">
-                                                    <input type="hidden" th:value="*{email}" name="email">
-                                                    <button type="submit" class="btn btn-danger"
-                                                            th:text="#{btn.delete-from-wks}"
-                                                            th:onclick="return confirm(/*[[#{text.confirm-delete-user-wks}]]*/)"
-                                                    ></button>
-                                                </form>
-                                            </td>
-                                        </tr>
-                                        <!-- Workspace user table row collapsed part -->
-                                        <!-- Deleted -->
-                                        <!-- TODO add possibility for admin to leave workspace (i.e. delete himself from wks), like in posthog service -->
-                                    </th:block>
-                                    </tbody>
-                                </table>
-                            </div>
+                                    <!-- Workspace user table row collapsed part -->
+                                    <!-- Deleted -->
+                                    <!-- TODO add possibility for admin to leave workspace (i.e. delete himself from wks), like in posthog service -->
+                                </th:block>
+                                </tbody>
+                            </table>
                         </div>
-                    </main>
-                </div>
+                    </div>
+                </main>
             </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>
diff --git a/src/main/resources/templates/workspaces.html b/src/main/resources/templates/workspaces.html
index fd2e839a..d3ef9aad 100644
--- a/src/main/resources/templates/workspaces.html
+++ b/src/main/resources/templates/workspaces.html
@@ -1,25 +1,24 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main class="mb-5 container">
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-            <div class="col" th:each="wksInfo : ${wksInfoList}" th:object="${wksInfo}">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <h5 class="card-title" th:text="*{name}"></h5>
-                        <p class="card-text" th:text="*{description}"></p>
-                    </div>
-                    <div class="card-footer bg-white border-top-0">
-                        <a class="card-link" th:href="@{'/workspace/' + *{id}}" th:text="#{wks.info}"></a>
-                        <a class="card-link" th:href="@{'/workspace/' + *{id} + '/typos'(typoStatus=REPORTED)}" th:text="#{wks.typos}"></a>
-                        <a class="card-link" th:href="@{'/workspace/' + *{id} + '/users'}" th:text="#{wks.users}"></a>
-                    </div>
+<body style="padding-top: 4.5rem">
+<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+<main class="container">
+    <div class="row row-cols-1 row-cols-md-3 g-4">
+        <div class="col" th:each="wksInfo : ${wksInfoList}" th:object="${wksInfo}">
+            <div class="card h-100">
+                <div class="card-body">
+                    <h5 class="card-title" th:text="*{name}"></h5>
+                    <p class="card-text" th:text="*{description}"></p>
+                </div>
+                <div class="card-footer bg-white border-top-0">
+                    <a class="card-link" th:href="@{'/workspace/' + *{id}}" th:text="#{wks.info}"></a>
+                    <a class="card-link" th:href="@{'/workspace/' + *{id} + '/typos'(typoStatus=REPORTED)}" th:text="#{wks.typos}"></a>
+                    <a class="card-link" th:href="@{'/workspace/' + *{id} + '/users'}" th:text="#{wks.users}"></a>
                 </div>
             </div>
         </div>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
+</main>
 </body>
 </html>

From eb998d4b9621a7ada981c159ad3fc94f02184bbc Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Tue, 8 Oct 2024 23:35:24 +0300
Subject: [PATCH 03/17] Add layout dialect dependency

---
 build.gradle.kts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/build.gradle.kts b/build.gradle.kts
index bbb573a4..51116cb6 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -38,6 +38,7 @@ dependencies {
     implementation("io.github.jpenren:thymeleaf-spring-data-dialect:3.6.0")
     implementation("org.webjars:webjars-locator-core:0.58")
     implementation("org.webjars:bootstrap:5.2.3")
+    implementation("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.3.0")
     // Database
     runtimeOnly("org.postgresql:postgresql:42.5.4")
     implementation("io.hypersistence:hypersistence-utils-hibernate-60:3.2.0")

From f9497e03be593236c752436b68741ff12e47066a Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 00:13:48 +0300
Subject: [PATCH 04/17] Add layout.html

---
 src/main/resources/templates/layout.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/main/resources/templates/layout.html

diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
new file mode 100644
index 00000000..d98b2596
--- /dev/null
+++ b/src/main/resources/templates/layout.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+<head th:replace="~{fragments/header :: head}"></head>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container mb-5">
+        <div layout:fragment="content">
+        </div>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
+</body>
+</html>

From cbcd11768c3481cce50ca422fcb9162c438634cf Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 00:58:31 +0300
Subject: [PATCH 05/17] Update index.html

---
 src/main/resources/templates/index.html | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index e8aad8ca..f0ca3d55 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
 
-<head th:replace="~{fragments/header :: head}"></head>
-<body class="d-flex flex-column min-vh-100 bg-light bg-gradient bg-gradient">
+<body class="bg-light bg-gradient">
     <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
         <symbol id="check2" fill="white" viewBox="0 0 16 16">
             <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
@@ -19,9 +20,8 @@
             <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
         </symbol>
     </svg>
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main>
-        <section class="py-5 mt-5" id="heroes">
+    <div layout:fragment="content">
+        <section class="py-5" id="heroes">
             <div class="container my-5">
                 <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border-0 shadow-lg">
                     <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
@@ -106,7 +106,6 @@ <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold" th:text="#{text.how-it-works-s
                 </div>
             </div>
         </section>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
 </body>
 </html>

From de59309c31de310d917ef7627a53be2daa00f7e0 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 00:58:55 +0300
Subject: [PATCH 06/17] Update workspaces.html

---
 src/main/resources/templates/workspaces.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/templates/workspaces.html b/src/main/resources/templates/workspaces.html
index f8acd44b..a6dc9b97 100644
--- a/src/main/resources/templates/workspaces.html
+++ b/src/main/resources/templates/workspaces.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content">
     <div th:if="${#lists.isEmpty(wksInfoList)}">
         <div class="container-fluid px-4 py-5 my-5 text-center">
             <div class="lc-block mb-4">
@@ -35,6 +35,5 @@ <h5 class="card-title" th:text="*{name}"></h5>
             </div>
         </div>
     </div>
-</main>
-</body>
+</div>>
 </html>

From 89c3deffd05c9ca5f04d25454b9995193d971002 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 00:59:40 +0300
Subject: [PATCH 07/17] Update login.html

---
 src/main/resources/templates/login.html | 56 ++++++++++++-------------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index a81f88dc..0cd2413e 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,34 +1,32 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
-<div class="row">
-    <div class="col">
-        <div class="invalid-feedback" role="alert" th:if="${param.error}" th:text="#{alert.bad-credential}"></div>
-        <div class="alert alert-warning" role="alert" th:if="${param.logout}" th:text="#{alert.logout}"></div>
-        <form method="post" th:action="@{/login}">
-            <div class="form-floating mb-3">
-                <input autofocus class="form-control" id="inputEmail"
-                       name="email" placeholder="Email" required type="text">
-                <label for="inputEmail" th:text="#{email}"></label>
-            </div>
-            <div class="form-floating mb-3">
-                <input class="form-control" id="inputPassword" name="password"
-                       placeholder="Password" required type="password">
-                <label for="inputPassword" th:text="#{password}"></label>
-            </div>
-            <button class="btn btn-primary" type="submit" th:text="#{btn.login}"></button>
-        </form>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content">
+    <div class="row">
+        <div class="col">
+            <div class="invalid-feedback" role="alert" th:if="${param.error}" th:text="#{alert.bad-credential}"></div>
+            <div class="alert alert-warning" role="alert" th:if="${param.logout}" th:text="#{alert.logout}"></div>
+            <form method="post" th:action="@{/login}">
+                <div class="form-floating mb-3">
+                    <input autofocus class="form-control" id="inputEmail"
+                           name="email" placeholder="Email" required type="text">
+                    <label for="inputEmail" th:text="#{email}"></label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="inputPassword" name="password"
+                           placeholder="Password" required type="password">
+                    <label for="inputPassword" th:text="#{password}"></label>
+                </div>
+                <button class="btn btn-primary" type="submit" th:text="#{btn.login}"></button>
+            </form>
+        </div>
     </div>
-</div>
-<div class="row">
-    <div class="mt-4">
-        <a class="link-primary" th:href="@{/signup}" th:text="#{link.signup}"></a>
+    <div class="row">
+        <div class="mt-4">
+            <a class="link-primary" th:href="@{/signup}" th:text="#{link.signup}"></a>
+        </div>
     </div>
 </div>
-</main>
-
-</body>
 </html>

From 87f16f2d3d211f9dd338d1c31af3fbf9afa9ee33 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 01:00:03 +0300
Subject: [PATCH 08/17] Update create-workspace.html

---
 src/main/resources/templates/create-workspace.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/templates/create-workspace.html b/src/main/resources/templates/create-workspace.html
index 88c0a31f..b97fb51b 100644
--- a/src/main/resources/templates/create-workspace.html
+++ b/src/main/resources/templates/create-workspace.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content">
     <div class="row">
         <div class="col">
             <form method="post" th:action="@{/workspace}" th:object="${createWorkspace}">
@@ -34,6 +34,5 @@
             </form>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>

From c64f59884020613086e6054f2615bf86c45ca37e Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 01:00:21 +0300
Subject: [PATCH 09/17] Update about.html

---
 src/main/resources/templates/about.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index 60c8ad75..28ec8907 100644
--- a/src/main/resources/templates/about.html
+++ b/src/main/resources/templates/about.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body class="d-flex min-vh-100">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<div class="container-fluid d-flex flex-column p-0 m-0">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content">
     <div class=" bg-light mx-auto mt-5">
         <main class="bg-light p-3">
             <div class="container p-0">
@@ -20,7 +20,5 @@ <h1 class="my-4">О проекте</h1>
             </div>
         </main>
     </div>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </div>
-</body>
 </html>

From aa23883c81e50a1119a6b01b4e4e7f588364ae47 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 01:01:20 +0300
Subject: [PATCH 10/17] Update workspace folder templates

---
 .../resources/templates/workspace/wks-info.html     | 13 ++++++-------
 .../templates/workspace/wks-integration.html        | 13 ++++++-------
 .../resources/templates/workspace/wks-settings.html | 13 ++++++-------
 .../resources/templates/workspace/wks-typos.html    | 13 ++++++-------
 .../resources/templates/workspace/wks-update.html   | 13 ++++++-------
 .../resources/templates/workspace/wks-users.html    | 13 ++++++-------
 6 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/main/resources/templates/workspace/wks-info.html b/src/main/resources/templates/workspace/wks-info.html
index 8e563e97..bba3ac19 100644
--- a/src/main/resources/templates/workspace/wks-info.html
+++ b/src/main/resources/templates/workspace/wks-info.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container-fluid">
     <div class="row">
         <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'info')"></div>
         <div class="col">
@@ -61,6 +61,5 @@ <h6 class="card-subtitle m-2">
             </div>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-integration.html b/src/main/resources/templates/workspace/wks-integration.html
index 190249e8..238a502e 100644
--- a/src/main/resources/templates/workspace/wks-integration.html
+++ b/src/main/resources/templates/workspace/wks-integration.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
+<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container-fluid">
     <div class="row">
         <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'integration')"></div>
         <div class="col-10">
@@ -35,6 +35,5 @@
           </div>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-settings.html b/src/main/resources/templates/workspace/wks-settings.html
index 1c4ac2e3..aaee7ed7 100644
--- a/src/main/resources/templates/workspace/wks-settings.html
+++ b/src/main/resources/templates/workspace/wks-settings.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
+<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container-fluid">
     <div class="row">
         <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'settings')"></div>
         <div class="col">
@@ -133,6 +133,5 @@
             </div>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-typos.html b/src/main/resources/templates/workspace/wks-typos.html
index f73f20fd..ef210aa4 100644
--- a/src/main/resources/templates/workspace/wks-typos.html
+++ b/src/main/resources/templates/workspace/wks-typos.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sd="http://www.w3.org/1999/xhtml">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
+<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sd="http://www.w3.org/1999/xhtml"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container-fluid">
     <div class="row">
         <!-- Workspace Side Bar -->
         <div class="col-2" th:include="fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'typos')"></div>
@@ -216,6 +216,5 @@
             </div>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-update.html b/src/main/resources/templates/workspace/wks-update.html
index 37a869ac..921d961c 100644
--- a/src/main/resources/templates/workspace/wks-update.html
+++ b/src/main/resources/templates/workspace/wks-update.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container-fluid">
     <div class="row">
         <div class="col-2" th:insert="fragments/panels :: workspaceSideBar (${wksId}, ${wksName}, 'info')"></div>
         <div class="col">
@@ -66,6 +66,5 @@
             </div>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/workspace/wks-users.html b/src/main/resources/templates/workspace/wks-users.html
index 3e5f68f3..44f17a97 100644
--- a/src/main/resources/templates/workspace/wks-users.html
+++ b/src/main/resources/templates/workspace/wks-users.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:sd="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container-fluid">
+<html lang="en" xmlns:sd="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container-fluid">
     <div class="row">
         <!-- Workspace Side Bar -->
         <!-- <div class="col-2" th:include="~{fragments/panels :: workspaceSideBar (${wksInfo.id()}, ${wksName}, 'users')}"></div> -->
@@ -132,6 +132,5 @@
             </div>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>

From 78bd91919c71031893ccb20e87749cf1a1e18228 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 01:01:42 +0300
Subject: [PATCH 11/17] Update account folder templates

---
 src/main/resources/templates/account/acc-info.html | 13 ++++++-------
 .../resources/templates/account/pass-update.html   | 13 ++++++-------
 .../resources/templates/account/prof-update.html   | 13 ++++++-------
 src/main/resources/templates/account/signup.html   | 14 ++++++--------
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/main/resources/templates/account/acc-info.html b/src/main/resources/templates/account/acc-info.html
index f6c0a46b..17002173 100644
--- a/src/main/resources/templates/account/acc-info.html
+++ b/src/main/resources/templates/account/acc-info.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container" th:object="${accInfo}">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container" th:object="${accInfo}">
     <div class="card mb-3">
         <div class="card-body">
             <h5 class="card-title mb-1" th:text="#{acc-info.card-title.general}"></h5>
@@ -53,6 +53,5 @@ <h5 class="card-title mb-1" th:text="#{acc-info.card-title.workspaces}"></h5>
         </tr>
         </tbody>
     </table>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/account/pass-update.html b/src/main/resources/templates/account/pass-update.html
index 00009fd4..357f97e4 100644
--- a/src/main/resources/templates/account/pass-update.html
+++ b/src/main/resources/templates/account/pass-update.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container">
     <div class="row">
         <div class="col">
             <form th:action="@{/account/password}" th:method="put" th:object="${updatePassword}">
@@ -36,6 +36,5 @@
             </form>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/account/prof-update.html b/src/main/resources/templates/account/prof-update.html
index d9d3332e..2339cb19 100644
--- a/src/main/resources/templates/account/prof-update.html
+++ b/src/main/resources/templates/account/prof-update.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container">
     <div class="row">
         <div class="col">
             <form th:action="@{/account/update}" th:method="put" th:object="${updateProfile}">
@@ -40,6 +40,5 @@
             </form>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/account/signup.html b/src/main/resources/templates/account/signup.html
index 4af1f6e7..a5509078 100644
--- a/src/main/resources/templates/account/signup.html
+++ b/src/main/resources/templates/account/signup.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container">
     <div class="row">
         <div class="col">
             <form method="post" th:action="@{/signup}" th:object="${signupAccount}">
@@ -50,7 +50,5 @@
             </form>
         </div>
     </div>
-</main>
-
-</body>
+</div>
 </html>

From 9d93463c9a8d2e15e77301f4fb8a94ce125b53bf Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 01:10:12 +0300
Subject: [PATCH 12/17] Update footer and add english

---
 src/main/resources/messages_en.properties     | 10 +++
 src/main/resources/messages_ru.properties     | 10 +++
 .../resources/templates/fragments/footer.html | 66 ++++++-------------
 3 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index d5decde6..7ce063ee 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -127,3 +127,13 @@ text.how-it-works-sub-header2=Add a widget to your site
 text.how-it-works-description2=Add a widget to your site to make it easy for users to report bugs.
 text.how-it-works-sub-header3=Manage your incoming messages
 text.how-it-works-description3=Manage incoming messages and effectively correct typos found.
+
+footer.about=About project
+footer.source-code=Source code
+footer.telegram=Telegram Hexlet channel Volunteers
+footer.help=Help
+footer.blog=Blog
+footer.study=Study for free
+footer.books=Recommended books
+footer.other-projects=Other open source projects
+footer.additionally=Additionally
diff --git a/src/main/resources/messages_ru.properties b/src/main/resources/messages_ru.properties
index ab0bdf33..aee75a16 100644
--- a/src/main/resources/messages_ru.properties
+++ b/src/main/resources/messages_ru.properties
@@ -125,3 +125,13 @@ text.how-it-works-sub-header2=Добавьте виджет на сайт
 text.how-it-works-description2=Добавьте виджет на сайт, чтобы пользователи могли легко сообщать об ошибках.
 text.how-it-works-sub-header3=Управляйте входящими сообщениями
 text.how-it-works-description3=Управляйте входящими сообщениями и эффективно устраняйте найденные опечатки.
+
+footer.about=О проекте
+footer.source-code=Исходный код
+footer.telegram=Telegram Hexlet канал Волонтеры
+footer.help=Помощь
+footer.blog=Блог
+footer.study=Учиться бесплатно
+footer.books=Рекомендуемые книги
+footer.other-projects=Другие open source проекты
+footer.additionally=Дополнительно
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index 20ea9a34..52a0a127 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,91 +1,67 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <body class="d-flex min-vh-100">
-<footer th:fragment="footer" class="p-3 bg-dark text-light mt-auto">
+<footer th:fragment="footer" class="p-3 bg-dark bg-gradient text-light mt-auto">
     <div class="container-xl">
         <div class="row justify-content-lg-around">
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <a class="text-dark px-0 py-0 text-decoration-none " href="https://ru.hexlet.io">
-                    <p class="h3 mb-2 text-light">© Hexlet</p>
+                <a class="text-dark px-0 py-0 text-decoration-none" href="https://ru.hexlet.io">
+                    <p class="mb-2 text-light">© Hexlet</p>
                 </a>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" th:href="@{/about}">
-                            О проекте
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" th:href="@{/about}" th:text="#{footer.about}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-correction"
-                           target="_blank">
-                            Исходный код
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://github.com/Hexlet/hexlet-correction"
+                           target="_blank" th:text="#{footer.source-code}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://t.me/hexletcommunity/12"
-                           target="_blank">
-                            Telegram Hexlet канал Волонтеры
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://t.me/hexletcommunity/12"
+                           target="_blank" th:text="#{footer.telegram}"></a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Помощь</p>
+                <p class="mb-2" th:text="#{footer.help}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/blog">
-                            Блог
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/blog" th:text="#{footer.blog}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/webinars">
-                            Учиться бесплатно
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/webinars" th:text="#{footer.study}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light"
-                           href="https://ru.hexlet.io/pages/recommended-books">
-                            Рекомендуемые книги
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted"
+                           href="https://ru.hexlet.io/pages/recommended-books" th:text="#{footer.books}"></a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Другие open-source проекты</p>
+                <p class="mb-2" th:text="#{footer.other-projects}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-cv">
-                            Хекслет-резюме
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://codebattle.hexlet.io/">Codebattle</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-editor">
-                            Хекслет-редактор
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://runit.hexlet.ru/">RunIT</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-friends">
-                            Друзья Хекслета
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.code-basics.com/">Code Basics</a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Дополнительно</p>
+                <p class="mb-2" th:text="#{footer.additionally}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.code-basics.com/">
-                            Code Basics
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://guides.hexlet.io/">Hexlet Guides</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://codebattle.hexlet.io/">
-                            Кодбаттл
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://sicp.hexlet.io/ru">Hexlet SICP</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://guides.hexlet.io/">
-                            Гайды Хекслета
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://cv.hexlet.io/">Hexlet-CV</a>
                     </li>
                 </ul>
             </div>

From 0326a6afc5a8cf9c73b2c661a23cfe7346ae7e70 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 01:30:54 +0300
Subject: [PATCH 13/17] Update navbar style and naming

---
 src/main/resources/templates/fragments/panels.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/templates/fragments/panels.html b/src/main/resources/templates/fragments/panels.html
index 5866262f..7aa9be93 100644
--- a/src/main/resources/templates/fragments/panels.html
+++ b/src/main/resources/templates/fragments/panels.html
@@ -4,8 +4,8 @@
 
 <body>
 <nav aria-label="Main navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" th:fragment="mainNavbarTop">
-    <div class="container-fluid">
-        <a class="navbar-brand" th:href="@{/workspaces}">Hexlet Typo Reporter</a>
+    <div class="container">
+        <a class="navbar-brand" th:href="@{/workspaces}">FixIT</a>
         <button aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
                 data-bs-target="#mainNavbar" data-bs-toggle="collapse" type="button">
             <span class="navbar-toggler-icon"></span>

From 36589c6a9c8d826a320e0070a5b7fe17f9510c9a Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 02:01:44 +0300
Subject: [PATCH 14/17] Update style and add english to about.html

---
 src/main/resources/messages_en.properties |  5 +++++
 src/main/resources/messages_ru.properties |  5 +++++
 src/main/resources/templates/about.html   | 17 ++++++-----------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index 7ce063ee..f7e8cac9 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -137,3 +137,8 @@ footer.study=Study for free
 footer.books=Recommended books
 footer.other-projects=Other open source projects
 footer.additionally=Additionally
+
+text.about-header=About project
+text.about-welcome=Welcome to the open-source project FixIT
+text.about-description=The service for notifying website owners about errors and typos. After integration with the site, visitors have the opportunity to highlight an error or a typo and report it to the administrator. The project runs in Java.
+text.about-community=Tasks can be discussed in the community
diff --git a/src/main/resources/messages_ru.properties b/src/main/resources/messages_ru.properties
index aee75a16..e98ccbc4 100644
--- a/src/main/resources/messages_ru.properties
+++ b/src/main/resources/messages_ru.properties
@@ -135,3 +135,8 @@ footer.study=Учиться бесплатно
 footer.books=Рекомендуемые книги
 footer.other-projects=Другие open source проекты
 footer.additionally=Дополнительно
+
+text.about-header=О проекте
+text.about-welcome=Добро пожаловать в open-source проект FixIT
+text.about-description=Сервис для уведомления владельцев сайтов об ошибках и опечатках. После интеграции с сайтом посетители имеют возможность выделить ошибку или опечатку и сообщить об этом администратору. Проект работает на Java.
+text.about-community=Задачи можно обсудить в сообществе
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index 28ec8907..a6efee84 100644
--- a/src/main/resources/templates/about.html
+++ b/src/main/resources/templates/about.html
@@ -4,18 +4,13 @@
       layout:decorate="~{layout}">
 
 <div layout:fragment="content">
-    <div class=" bg-light mx-auto mt-5">
-        <main class="bg-light p-3">
+    <div class="mx-auto mt-5">
+        <main class="p-3">
             <div class="container p-0">
-                <h1 class="my-4">О проекте</h1>
-                <p class="display-6">Добро пожаловать в open-source проект Hexlet-Correction</p>
-                <p>
-                    Сервис для уведомления владельцев сайтов об ошибках и опечатках.
-                    После интеграции с сайтом посетители имеют возможность выделить ошибку
-                    или опечатку и сообщить об этом администратору. Проект работает на Java.
-                </p>
-                <p>Задачи можно обсудить в сообществе
-                    <a href="https://t.me/hexletcommunity/12">telegram</a>
+                <h1 class="my-4" th:text="#{text.about-header}"></h1>
+                <p class="display-6" th:text="#{text.about-welcome}"></p>
+                <p th:text="#{text.about-description}"></p>
+                <p th:inline="text">[[#{text.about-community}]] <a href="https://t.me/hexletcommunity/12">telegram</a>
                 </p>
             </div>
         </main>

From 72d6404c8ac41485e1fe4ed7776b553bc353e069 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 02:02:14 +0300
Subject: [PATCH 15/17] Update project name in header.html

---
 src/main/resources/templates/fragments/header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
index 789f082e..d059d3b9 100644
--- a/src/main/resources/templates/fragments/header.html
+++ b/src/main/resources/templates/fragments/header.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
-    <title>Hexlet Typo Reporter</title>
+    <title>FixIT</title>
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" type="text/css" />

From 7df1529602c08f233b11f33eab1025c73276e77a Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 02:02:40 +0300
Subject: [PATCH 16/17] Add favicon.ico

---
 .../typoreporter/config/SecurityConfig.java     |   2 +-
 src/main/resources/static/favicon.ico           | Bin 0 -> 16958 bytes
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 src/main/resources/static/favicon.ico

diff --git a/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java b/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
index fa8d92dd..b42cc342 100644
--- a/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
+++ b/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
@@ -84,7 +84,7 @@ public SecurityFilterChain filterChain(HttpSecurity http,
         http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());
 
         http.authorizeHttpRequests(authz -> authz
-                .requestMatchers(GET, "/webjars/**", "/widget/**", "/fragments/**", "/img/**").permitAll()
+                .requestMatchers(GET, "/webjars/**", "/widget/**", "/fragments/**", "/img/**", "/favicon.ico").permitAll()
                 .requestMatchers("/", "/login", "/signup", "/error", "/about").permitAll()
                 .anyRequest().authenticated()
             )
diff --git a/src/main/resources/static/favicon.ico b/src/main/resources/static/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..177caa2e3e10b217aa26e9bdfe37b10194a817dc
GIT binary patch
literal 16958
zcmeHOTPQ7G7$5gLIWD=RjzU`@w-=WOd853L@JNa$k^ch^>Yt=UZV^vHLZOtBH<Uso
z63Q*fom`Up<vaT~r<u0Bozu4W?Af!AHCkrRv}UdE_gmlk*80BrhU2W%e<>-P`u|T(
zmCA9x9LK5DMSY9=UtMsYKT<gEzaPKL?;9LP>|hKq1{ebt#=!ggyJ951ySt;Utu0zy
zT%?VS4Z69xA;>3%j6yrt*VnYZzD^4Z3$(qxP3TjK_KhX+;^Kk|3JNGNFp#{wyeJ?b
zfHE^PX>V`O*rvtjH#avaJw2WL{r&kqf`WpmxVV_EuCBy7=K3)+GeaI89;9AR#bRe?
zNB#Z%l8MyW*-6&c)?)kU%hS`7W@l$5>%-87CMPG!-QE3zY&JGF)YH>rXp=h6wY0Q+
zXdn2|=hW1cPF=Zgm=pi>^t9Y?b^2rY&8Pot{F(miOh}n;u=&sCzq!_bX8)M|liA$q
zbjR!;vwxr2zuw+n9bGZ>Mr&*9r~Z$U?O#nz4Xv!K(9+V9Q3Y*OR8&|Le)y+uZf@k`
z<3rxw-bNL);p*yYariakA*T3^Ij2<pHw9kpHW_|pkH3S1135c8larH^Q3Y+-+uK{z
z{70;^yu6&o$H!@GY|N;FHj0XhEDAs3pWl7`mm~hGRQoSi{F~ut{;#1vg;dWm|Cjl{
zpZUMc{`W{V#i+Tt*<$uT*srFgrP1>8vSj%2o;N-|o@{MxMIMym|3EhQ`grG`l$1n$
zeSLgh0&+9n-rkJnK*;|%I5?oj#zu;Wh~RSp(5DjCf5?!WoJ{TQ?R0v2YEa&bzIiOD
zx4XMb)z#G$6BDBd{Fj%Pgs~CEN#6l~etxFa)m7Tr+4-`bK(CMkbar;8Z+D8R_xk$E
z<1Q^NCFJphhlf*bZ7rWKq^}+bV7^*kc+MPW$ch}Xs;Vjq4h|+OD=X2K!C#1qilT;w
z2EBQ(6zq_5e}A9q>gq_PQt9L|A+9BG0s9Uf>g(%2@L(xewe{-c<b=12(b3U_G1kPY
z9naIe1`m;uk-R>DJ4?floWSnxZc0c<;MYY>Z2J7x)Cbsky#EkvtTx9=x<=mT(9jU2
zrlyjkqoX*#^}+nNI@nvp#>Og&2k4}rm&ip$oGv3HgIru(B*U%Ei6#$+hlgVSa_fMA
z`|<IS&q2(~%hSmL)s|h#Yw&>ma7RZ69UUFX3Ln_9h9eI-KR=((#}%*%^H#Vv^%*?G
z#l=xuTbrzVp{J)O8W<R$#Kc5C#&2qze`+6bc0WHqejL`;)@0EGVcz2mJ3l%)N;x?>
z{JTy;PE+dvY%9hcegOPT%tK*L%0hxxC-?XFG&eWLzw-zU4gKJ!3Y-{w2B*HhzLb@f
zMT3KbbbNd)Vm2psO)6j)u*Yp`YT|ui!~%@PjrVBS3sqKD()|29fotIqbWylg${BK<
zpP$pn$OvU;XY+I8t8)VR{rKjgtE-FOKT8oyFb6-_8{j*Iva&J?2?-JR!Jp{`_Pt?Y
zVN_C5!u$5Ox3}gHS+YJg_4DQBh438<VmR9C24Y#*Gh!WsUyr)~>H$s=w-_ECrrg|I
tDl9CdiHQkCe9I#@=MN7Lgg6imO<j>&4%Q!IfHCkr8Bnjo?D)nE`~sF}e!c(z

literal 0
HcmV?d00001


From de41a9bc328bd91465db35519da7f7febdcd9067 Mon Sep 17 00:00:00 2001
From: shamshaev <an.shamshaev@gmail.com>
Date: Wed, 9 Oct 2024 02:13:24 +0300
Subject: [PATCH 17/17] Fix line length SecurityConfig

---
 .../java/io/hexlet/typoreporter/config/SecurityConfig.java     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java b/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
index b42cc342..a93ba4e1 100644
--- a/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
+++ b/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
@@ -84,7 +84,8 @@ public SecurityFilterChain filterChain(HttpSecurity http,
         http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());
 
         http.authorizeHttpRequests(authz -> authz
-                .requestMatchers(GET, "/webjars/**", "/widget/**", "/fragments/**", "/img/**", "/favicon.ico").permitAll()
+                .requestMatchers(GET, "/webjars/**", "/widget/**", "/fragments/**", "/img/**",
+                    "/favicon.ico").permitAll()
                 .requestMatchers("/", "/login", "/signup", "/error", "/about").permitAll()
                 .anyRequest().authenticated()
             )