diff --git a/src/main/resources/static/css/dark-mode.css b/src/main/resources/static/css/dark-mode.css
index 8ddbf052..b874f410 100644
--- a/src/main/resources/static/css/dark-mode.css
+++ b/src/main/resources/static/css/dark-mode.css
@@ -114,28 +114,28 @@ hr {
   border-color: #fff;
 }
 
-#global-buttons-container input {
+.global-buttons-container input {
   background-color: #323948;
   caret-color: #ffffff;
   color: #ffffff;
 }
-#global-buttons-container input::placeholder {
+.global-buttons-container input::placeholder {
   color: #ffffff;
 }
 
-#global-buttons-container input:disabled::-webkit-input-placeholder {
+.global-buttons-container input:disabled::-webkit-input-placeholder {
   /* WebKit browsers */
   color: #6e6865;
 }
-#global-buttons-container input:disabled:-moz-placeholder {
+.global-buttons-container input:disabled:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: #6e6865;
 }
-#global-buttons-container input:disabled::-moz-placeholder {
+.global-buttons-container input:disabled::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: #6e6865;
 }
-#global-buttons-container input:disabled:-ms-input-placeholder {
+.global-buttons-container input:disabled:-ms-input-placeholder {
   /* Internet Explorer 10+ */
   color: #6e6865;
 }
diff --git a/src/main/resources/static/css/dragdrop.css b/src/main/resources/static/css/dragdrop.css
index 14c3befe..7758bdd9 100644
--- a/src/main/resources/static/css/dragdrop.css
+++ b/src/main/resources/static/css/dragdrop.css
@@ -36,11 +36,11 @@
   visibility: hidden !important;
 }
 
-html[lang-direction="ltr"] .drag-manager_draghover img {
+html[dir="ltr"] .drag-manager_draghover img {
   left: calc(50% + 62.5px) !important;
 }
 
-html[lang-direction="rtl"] .drag-manager_draghover img {
+html[dir="rtl"] .drag-manager_draghover img {
   left: 125px;
 }
 
diff --git a/src/main/resources/static/css/error.css b/src/main/resources/static/css/error.css
index 0477d7e0..5cc37b61 100644
--- a/src/main/resources/static/css/error.css
+++ b/src/main/resources/static/css/error.css
@@ -68,11 +68,11 @@ p {
 
 #github-button:hover,
 #discord-button:hover,
-#home-button:hover {
+.home-button:hover {
   background-color: #005b7f;
 }
 
-#home-button {
+.home-button {
   display: block;
   width: 200px;
   height: 50px;
diff --git a/src/main/resources/static/css/errorBanner.css b/src/main/resources/static/css/errorBanner.css
index 11b111ab..75618731 100644
--- a/src/main/resources/static/css/errorBanner.css
+++ b/src/main/resources/static/css/errorBanner.css
@@ -77,11 +77,11 @@
 
 #github-button:hover,
 #discord-button:hover,
-#home-button:hover {
+.home-button:hover {
   background-color: #005b7f;
 }
 
-#home-button {
+.home-button {
   display: block;
   width: 200px;
   height: 50px;
diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css
index 8d631bfd..72edf184 100644
--- a/src/main/resources/static/css/general.css
+++ b/src/main/resources/static/css/general.css
@@ -25,10 +25,10 @@
     margin-right: auto;
 }*/
 
-html[lang-direction="ltr"] * {
+html[dir="ltr"] * {
   direction: ltr;
 }
-html[lang-direction="rtl"] * {
+html[dir="rtl"] * {
   direction: rtl;
   text-align: right;
 }
@@ -63,11 +63,11 @@ html[lang-direction="rtl"] * {
   border-bottom-left-radius: 0.25rem !important;
 }
 
-html[lang-direction="rtl"] input.form-check-input {
+html[dir="rtl"] input.form-check-input {
   position: relative;
   margin-left: 0px;
 }
-html[lang-direction="rtl"] label.form-check-label {
+html[dir="rtl"] label.form-check-label {
   display: inline;
 }
 
diff --git a/src/main/resources/static/css/light-mode.css b/src/main/resources/static/css/light-mode.css
index af84b0d5..f7e79b90 100644
--- a/src/main/resources/static/css/light-mode.css
+++ b/src/main/resources/static/css/light-mode.css
@@ -4,20 +4,20 @@ body {
   --base-font-color: 33, 37, 41;
 }
 
-#global-buttons-container input {
+.global-buttons-container input {
   background-color: #ffffff;
   /*caret-color: #ffffff;*/
   /*color: #ffffff;*/
 }
-/*#global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
+/*.global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
 /*    color:    #98A0AB;*/
 /*}*/
-/*#global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
+/*.global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
 /*    color:    #98A0AB;*/
 /*}*/
-/*#global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
+/*.global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
 /*    color:    #98A0AB;*/
 /*}*/
-/*#global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
+/*.global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
 /*    color:    #98A0AB;*/
 /*}*/
diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css
index 9ed84f2b..50e038ce 100644
--- a/src/main/resources/static/css/multi-tool.css
+++ b/src/main/resources/static/css/multi-tool.css
@@ -3,7 +3,7 @@
   margin: 0 auto;
 }
 
-#global-buttons-container {
+.global-buttons-container {
   display: flex;
   gap: 10px;
   align-items: start;
@@ -17,11 +17,11 @@
   padding: 10px;
   border-radius: 8px;
 }
-#global-buttons-container > * {
+.global-buttons-container > * {
   padding: 0.6rem 0.75rem;
 }
 
-#global-buttons-container svg {
+.global-buttons-container svg {
   width: 20px;
   height: 20px;
 }
diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css
index ff680036..455de860 100644
--- a/src/main/resources/static/css/pdfActions.css
+++ b/src/main/resources/static/css/pdfActions.css
@@ -45,11 +45,11 @@
   right: -20px;
 }
 
-html[lang-direction="ltr"] .pdf-actions_insert-file-button-container.right {
+html[dir="ltr"] .pdf-actions_insert-file-button-container.right {
   display: none;
 }
 
-html[lang-direction="rtl"] .pdf-actions_insert-file-button-container.left {
+html[dir="rtl"] .pdf-actions_insert-file-button-container.left {
   display: none;
 }
 
@@ -63,11 +63,11 @@ html[lang-direction="rtl"] .pdf-actions_insert-file-button-container.left {
   translate: 0 -50%;
 }
 
-html[lang-direction="ltr"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.right {
+html[dir="ltr"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.right {
   display: block;
 }
 
-html[lang-direction="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.left {
+html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.left {
   display: block;
 }
 
diff --git a/src/main/resources/static/css/rotate-pdf.css b/src/main/resources/static/css/rotate-pdf.css
index 7c5d388d..57a30024 100644
--- a/src/main/resources/static/css/rotate-pdf.css
+++ b/src/main/resources/static/css/rotate-pdf.css
@@ -11,7 +11,7 @@
   translate: -50% -50%;
 }
 
-.previewContainer {
+#previewContainer {
   aspect-ratio: 1;
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.125);
diff --git a/src/main/resources/static/js/downloader.js b/src/main/resources/static/js/downloader.js
index 4d7fa783..c955bb1b 100644
--- a/src/main/resources/static/js/downloader.js
+++ b/src/main/resources/static/js/downloader.js
@@ -53,8 +53,8 @@ $(document).ready(function () {
         // Display a green banner at the bottom of the screen saying "Download complete"
         let downloadCompleteText = "Download Complete";
         if(window.downloadCompleteText){
-			downloadCompleteText = window.downloadCompleteText;
-		}
+          downloadCompleteText = window.downloadCompleteText;
+        }
         $("body").append('<div id="download-complete-banner" style="position:fixed;bottom:0;left:0;width:100%;background-color:green;color:white;text-align:center;padding:10px;font-size:16px;z-index:1000;">'+ downloadCompleteText + '</div>');
         setTimeout(function() {
           $("#download-complete-banner").fadeOut("slow", function() {
@@ -79,8 +79,8 @@ async function handleSingleDownload(url, formData, isMulti = false, isZip = fals
 
     if (!response.ok) {
       if (contentType && contentType.includes("application/json")) {
-        return handleJsonResponse(response);
         console.error("Throwing error banner, response was not okay");
+        return handleJsonResponse(response);
       }
       throw new Error(`HTTP error! status: ${response.status}`);
     }
@@ -177,10 +177,10 @@ async function submitMultiPdfForm(url, files) {
   const zipFiles = files.length > zipThreshold;
   let jszip = null;
   // Show the progress bar
-  $("#progressBarContainer").show();
+  $(".progressBarContainer").show();
   // Initialize the progress bar
 
-  let progressBar = $("#progressBar");
+  let progressBar = $(".progressBar");
   progressBar.css("width", "0%");
   progressBar.attr("aria-valuenow", 0);
   progressBar.attr("aria-valuemax", files.length);
diff --git a/src/main/resources/static/js/game.js b/src/main/resources/static/js/game.js
index c5162127..3746ef63 100644
--- a/src/main/resources/static/js/game.js
+++ b/src/main/resources/static/js/game.js
@@ -70,7 +70,7 @@ function initializeGame() {
     handleKeys();
   }
   function onKeyUp(event) {
-	  keysPressed[event.key] = false;
+    keysPressed[event.key] = false;
   }
   
   document.removeEventListener("keydown", onKeydown);
@@ -123,7 +123,7 @@ function initializeGame() {
   function updateGame() {
     if (gameOver || paused) return;
 
-	handleKeys();
+  handleKeys();
     for (let pdfIndex = 0; pdfIndex < pdfs.length; pdfIndex++) {
       const pdf = pdfs[pdfIndex];
       const pdfY = parseFloat(pdf.style.top) + pdfSpeed;
diff --git a/src/main/resources/static/js/languageSelection.js b/src/main/resources/static/js/languageSelection.js
index ee9ab03b..7af113d0 100644
--- a/src/main/resources/static/js/languageSelection.js
+++ b/src/main/resources/static/js/languageSelection.js
@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 function setLanguageForDropdown(dropdownClass) {
-  const defaultLocale = document.documentElement.language || "en_GB";
+  const defaultLocale = document.documentElement.getAttribute("data-language") || "en_GB";
   const storedLocale = localStorage.getItem("languageCode") || defaultLocale;
   const dropdownItems = document.querySelectorAll(dropdownClass);
 
diff --git a/src/main/resources/static/js/multitool/DragDropManager.js b/src/main/resources/static/js/multitool/DragDropManager.js
index 004412d4..eac92a8c 100644
--- a/src/main/resources/static/js/multitool/DragDropManager.js
+++ b/src/main/resources/static/js/multitool/DragDropManager.js
@@ -11,7 +11,7 @@ class DragDropManager {
 
   constructor(id, wrapperId) {
     this.dragContainer = document.getElementById(id);
-    this.pageDirection = document.documentElement.getAttribute("lang-direction");
+    this.pageDirection = document.documentElement.getAttribute("dir");
     this.wrapper = document.getElementById(wrapperId);
     this.pageDragging = false;
     this.hoveredEl = undefined;
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 2fae22d3..163dff3a 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -4,7 +4,7 @@ class PdfActionsManager {
 
   constructor(id) {
     this.pagesContainer = document.getElementById(id);
-    this.pageDirection = document.documentElement.getAttribute("lang-direction");
+    this.pageDirection = document.documentElement.getAttribute("dir");
 
     var styleElement = document.createElement("link");
     styleElement.rel = "stylesheet";
diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js
index 9ed3e608..afe1d4d7 100644
--- a/src/main/resources/static/js/pipeline.js
+++ b/src/main/resources/static/js/pipeline.js
@@ -248,20 +248,20 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
   }
 
   listItem.innerHTML = `
-	    <div class="d-flex justify-content-between align-items-center w-100">
-	        <div class="operationName">${selectedOperation}</div>
-	        <div class="arrows d-flex">
-	            <button class="btn btn-secondary move-up ms-1"><span>&uarr;</span></button>
-	            <button class="btn btn-secondary move-down ms-1"><span>&darr;</span></button>
-	            <button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${
+      <div class="d-flex justify-content-between align-items-center w-100">
+          <div class="operationName">${selectedOperation}</div>
+          <div class="arrows d-flex">
+              <button class="btn btn-secondary move-up ms-1"><span>&uarr;</span></button>
+              <button class="btn btn-secondary move-down ms-1"><span>&darr;</span></button>
+              <button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${
                 hasSettings ? "" : "disabled"
               }>
-			        <span style="color: ${hasSettings ? "white" : "grey"};">⚙️</span>
-			    </button>
-	            <button class="btn btn-danger remove ms-1"><span>X</span></button>
-	        </div>
-	    </div>
-	`;
+              <span style="color: ${hasSettings ? "white" : "grey"};">⚙️</span>
+          </button>
+              <button class="btn btn-danger remove ms-1"><span>X</span></button>
+          </div>
+      </div>
+  `;
 
   pipelineList.appendChild(listItem);
 
@@ -465,13 +465,13 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
     //pipelineSettingsModal.style.display = "block";
 
     //pipelineSettingsModal.getElementsByClassName("close")[0].onclick = function() {
-    //	pipelineSettingsModal.style.display = "none";
+    //  pipelineSettingsModal.style.display = "none";
     //}
 
     //window.onclick = function(event) {
-    //	if (event.target == pipelineSettingsModal) {
-    //		pipelineSettingsModal.style.display = "none";
-    //	}
+    //  if (event.target == pipelineSettingsModal) {
+    //    pipelineSettingsModal.style.display = "none";
+    //  }
     //}
   }
   showpipelineSettingsModal(selectedOperation);
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index 957bf45f..2870fb41 100644
--- a/src/main/resources/templates/about.html
+++ b/src/main/resources/templates/about.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title='<3')}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6"></div>
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index 20501413..97e50af6 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
   </head>
@@ -9,14 +9,14 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-9">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
-              <hr />
+              <hr>
               <th:block th:if="${param.messageType != null and param.messageType.size() > 0}">
               <div th:if="${param.messageType[0] == 'notAuthenticated'}" class="alert alert-danger">
                 <span th:text="#{notAuthenticatedMessage}">Default message if not found</span>
@@ -42,7 +42,6 @@
               </div>
               </th:block>
               <!-- Change Username Form -->
-              <h4></h4>
               <form action="api/v1/user/change-username" method="post">
                 <div class="mb-3">
                   <label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
@@ -50,14 +49,14 @@
                 </div>
                 <div class="mb-3">
                   <label for="currentPassword" th:text="#{password}">Password</label>
-                  <input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" th:placeholder="#{password}">
+                  <input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{password}">
                 </div>
                 <div class="mb-3">
                   <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
                 </div>
               </form>
 
-              <hr /> <!-- Separator Line -->
+              <hr> <!-- Separator Line -->
 
               <!-- Change Password Form -->
               <h4 th:text="#{account.changePassword}">Change Password?</h4>
@@ -79,7 +78,7 @@
                 </div>
               </form>
 
-              <hr />
+              <hr>
 
               <div class="card">
                 <div class="card-header" th:text="#{account.yourApiKey}"></div>
@@ -94,7 +93,7 @@
                         <img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
                       </button>
                       <button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
-                        <img class="blackwhite-icon" id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
+                        <img class="blackwhite-icon" id="arrowIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
                       </button>
                     </div>
                   </div>
@@ -169,7 +168,6 @@
                   }
                 }
 
-
                 document.addEventListener("DOMContentLoaded", function() {
                   const form = document.querySelector('form[action="api/v1/user/change-password"]');
 
@@ -185,7 +183,7 @@
                 });
               </script>
 
-              <hr /> <!-- Separator Line -->
+              <hr> <!-- Separator Line -->
 
               <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
               <div class="container mt-4">
@@ -199,7 +197,7 @@
                     </tr>
                   </thead>
                   <tbody>
-                      <!-- This will be dynamically populated by JavaScript -->
+                    <!-- This will be dynamically populated by JavaScript -->
                   </tbody>
                 </table>
 
@@ -271,13 +269,9 @@
 
                 });
               </script>
-              <div class="mb-3 mt-4">
-                <a href="logout">
-                    <button type="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</button>
-                </a>
-                <a th:if="${role == 'ROLE_ADMIN'}" href="addUsers" target="_blank">
-                  <button type="button" class="btn btn-info" th:text="#{account.adminSettings}">Admin Settings</button>
-                </a>
+              <div class="mb-3 mt-4 text-center">
+                <a href="logout" role="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</a>
+                <a th:if="${role == 'ROLE_ADMIN'}" class="btn btn-info" href="addUsers" role="button" th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
               </div>
             </div>
           </div>
@@ -286,4 +280,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html
index 397b054a..850beb9e 100644
--- a/src/main/resources/templates/addUsers.html
+++ b/src/main/resources/templates/addUsers.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{adminUserSettings.title}, header=#{adminUserSettings.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-8">
@@ -25,7 +25,7 @@
                   <tr>
                     <th th:text="#{username}">Username</th>
                     <th th:text="#{adminUserSettings.roles}">Roles</th>
-                     <th th:text="#{adminUserSettings.actions}">Actions</th>
+                    <th th:text="#{adminUserSettings.actions}">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -76,4 +76,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/auto-split-pdf.html b/src/main/resources/templates/auto-split-pdf.html
index 26106b46..914b9d60 100644
--- a/src/main/resources/templates/auto-split-pdf.html
+++ b/src/main/resources/templates/auto-split-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{autoSplitPDF.title}, header=#{autoSplitPDF.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -29,8 +29,8 @@
                   <input type="checkbox" class="form-check-input" name="duplexMode" id="duplexMode">
                   <label class="ms-3" for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
                 </div>
-                <p><a th:href="@{files/Auto Splitter Divider (minimal).pdf}" download th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
-                <p><a th:href="@{files/Auto Splitter Divider (with instructions).pdf}" download th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
+                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(minimal).pdf}" download th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
+                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(with%20instructions).pdf}" download th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
               </form>
             </div>
diff --git a/src/main/resources/templates/change-creds.html b/src/main/resources/templates/change-creds.html
index aab874e2..08a3ade7 100644
--- a/src/main/resources/templates/change-creds.html
+++ b/src/main/resources/templates/change-creds.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{changeCreds.title}, header=#{changeCreds.header})}"></th:block>
   </head>
@@ -9,14 +9,14 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-9">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{changeCreds.header}">User Settings</h2>
-              <hr />
+              <hr>
               <th:block th:if="${param.messageType != null and param.messageType.size() > 0}">
               <div th:if="${param.messageType[0] == 'notAuthenticated'}" class="alert alert-danger">
                 <span th:text="#{notAuthenticatedMessage}">Default message if not found</span>
@@ -35,7 +35,6 @@
               <h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
 
               <!-- Change Username Form -->
-              <h4></h4>
               <h4 th:text="#{changeCreds.changePassword}">Change password</h4>
               <form action="api/v1/user/change-password-on-login" method="post">
                 <div class="mb-3">
@@ -76,4 +75,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/book-to-pdf.html b/src/main/resources/templates/convert/book-to-pdf.html
index d614af0d..acd40b21 100644
--- a/src/main/resources/templates/convert/book-to-pdf.html
+++ b/src/main/resources/templates/convert/book-to-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{BookToPDF.title}, header=#{BookToPDF.header})}"></th:block>
   </head>
@@ -9,14 +9,14 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
               <h2 th:text="#{BookToPDF.header}"></h2>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/book/pdf}">
-                  <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
-                  <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{BookToPDF.submit}"></button>
+                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
+                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{BookToPDF.submit}"></button>
               </form>
               <p class="mt-3" th:text="#{BookToPDF.credit}"></p>
             </div>
@@ -26,4 +26,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html
index c0553c26..d8c8b969 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{fileToPDF.title}, header=#{fileToPDF.header})}"></th:block>
   </head>
@@ -9,31 +9,30 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
-                <h2 th:text="#{fileToPDF.header}"></h2>
-                <p th:text="#{processTimeWarning}"></p>
-                <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/file/pdf}">
-                    <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
-                    <br>
-                    <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
-                </form>
-                <p class="mt-3" th:text="#{fileToPDF.credit}"></p>
-                <p class="mt-3" th:text="#{fileToPDF.supportedFileTypes}"></p>
-				<p>Microsoft Word: (DOC, DOCX, DOT, DOTX)</p>
-				<p>Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)</p>
-				<p>Microsoft PowerPoint: (PPT, PPTX)</p>
-				<p>OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)</p>
-				<p>Plain Text: (TXT, TEXT, XML)</p>
-				<p>Rich Text Format: (RTF)</p>
-				<p>Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)</p>
-				<p>HTML: (HTML)</p>
-				<p>Lotus Word Pro: (LWP)</p>
-				<p>StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)</p>
-				<p>Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)</p>
-                <a href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
+              <h2 th:text="#{fileToPDF.header}"></h2>
+              <p th:text="#{processTimeWarning}"></p>
+              <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/file/pdf}">
+                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
+                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
+              </form>
+              <p class="mt-3" th:text="#{fileToPDF.credit}"></p>
+              <p class="mt-3" th:text="#{fileToPDF.supportedFileTypes}"></p>
+              <p>Microsoft Word: (DOC, DOCX, DOT, DOTX)</p>
+              <p>Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)</p>
+              <p>Microsoft PowerPoint: (PPT, PPTX)</p>
+              <p>OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)</p>
+              <p>Plain Text: (TXT, TEXT, XML)</p>
+              <p>Rich Text Format: (RTF)</p>
+              <p>Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)</p>
+              <p>HTML: (HTML)</p>
+              <p>Lotus Word Pro: (LWP)</p>
+              <p>StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)</p>
+              <p>Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)</p>
+              <a href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
             </div>
           </div>
         </div>
diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html
index c9a26a6b..3c426917 100644
--- a/src/main/resources/templates/convert/html-to-pdf.html
+++ b/src/main/resources/templates/convert/html-to-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{HTMLToPDF.title}, header=#{HTMLToPDF.header})}"></th:block>
   </head>
@@ -9,16 +9,16 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="mb-3">
               <h2 th:text="#{HTMLToPDF.header}"></h2>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/html/pdf}">
-                  <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/html,application/zip' )}"></div>
+                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/html,application/zip' )}"></div>
                 <div class="mb-3">
                   <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
-                  <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1" />
+                  <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
                 </div>
                 <br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
@@ -32,4 +32,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index 6d68fdec..a8633ad1 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{imageToPDF.title}, header=#{imageToPDF.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -46,7 +46,7 @@
                     <option value="convert" th:text=#{imageToPDF.selectText.5} selected></option>
                   </select>
                 </div>
-                <br /><br />
+                <br><br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
                 <script>
                   $('#fileInput-input').on('change', function() {
@@ -61,14 +61,14 @@
                   });
 
                   $('#conversionType').change(function() {
-                      var selectedValue = $(this).val();
-                      var override = document.getElementById("override");
-                      console.log("selectedValue=" + selectedValue)
-                      if (selectedValue === 'merge') {
-                        override.value = "single";
-                      } else if (selectedValue === 'convert') {
-                        override.value = "multi";
-                      }
+                    var selectedValue = $(this).val();
+                    var override = document.getElementById("override");
+                    console.log("selectedValue=" + selectedValue)
+                    if (selectedValue === 'merge') {
+                      override.value = "single";
+                    } else if (selectedValue === 'convert') {
+                      override.value = "multi";
+                    }
                   });
                 </script>
               </form>
@@ -79,4 +79,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html
index 8df3ad17..7a51a29c 100644
--- a/src/main/resources/templates/convert/markdown-to-pdf.html
+++ b/src/main/resources/templates/convert/markdown-to-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{MarkdownToPDF.title}, header=#{MarkdownToPDF.header})}"></th:block>
   </head>
@@ -9,14 +9,13 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
               <h2 th:text="#{MarkdownToPDF.header}"></h2>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/markdown/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/markdown')}"></div>
-                <br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
               </form>
               <p class="mt-3" th:text="#{MarkdownToPDF.help}"></p>
@@ -28,4 +27,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-book.html b/src/main/resources/templates/convert/pdf-to-book.html
index db9b4692..33fbd2e1 100644
--- a/src/main/resources/templates/convert/pdf-to-book.html
+++ b/src/main/resources/templates/convert/pdf-to-book.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToBook.title}, header=#{PDFToBook.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -42,4 +42,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-csv.html b/src/main/resources/templates/convert/pdf-to-csv.html
index 16da051e..9fba9430 100644
--- a/src/main/resources/templates/convert/pdf-to-csv.html
+++ b/src/main/resources/templates/convert/pdf-to-csv.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToCSV.title}, header=#{PDFToCSV.header})}"></th:block>
   </head>
@@ -8,13 +8,13 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
               <h2 th:text="#{PDFToCSV.header}"></h2>
               <form id="PDFToCSVForm" th:action="@{api/v1/convert/pdf/csv}" method="post" enctype="multipart/form-data">
-                <input  id="pageId" type="hidden" name="pageId" />
+                <input  id="pageId" type="hidden" name="pageId">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <button type="submit" class="btn btn-primary" th:text="#{PDFToCSV.submit}"></button>
               </form>
@@ -23,8 +23,8 @@
               <div style="position: relative; display: inline-block;">
                 <div>
                   <div style="display:none ;margin: 3px;position: absolute;top: 0;width: 120px;justify-content:space-between;z-index: 10" id="pagination-button-container">
-                      <button id='previous-page-btn' style='opacity: 80% ; width: 50px; height: 30px; display: flex;align-items: center;justify-content: center; background: grey; color: #ffffff;  ;border: none;outline: none; border-radius: 4px;'> < </button>
-                      <button id='next-page-btn' style='opacity: 80% ; width: 50px; height: 30px; display: flex;align-items: center;justify-content: center; background: grey; color: #ffffff;  ;border: none;outline: none; border-radius: 4px;'> > </button>
+                    <button id='previous-page-btn' style='opacity: 80% ; width: 50px; height: 30px; display: flex;align-items: center;justify-content: center; background: grey; color: #ffffff;  ;border: none;outline: none; border-radius: 4px;'> &lt; </button>
+                    <button id='next-page-btn' style='opacity: 80% ; width: 50px; height: 30px; display: flex;align-items: center;justify-content: center; background: grey; color: #ffffff;  ;border: none;outline: none; border-radius: 4px;'> &gt; </button>
                   </div>
                   <canvas id="crop-pdf-canvas" style="position: absolute; top: 0; left: 0; z-index: 1;"></canvas>
                 </div>
@@ -106,9 +106,9 @@
                       let typedArray = new Uint8Array(reader.result);
                       pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js';
                       pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
-                          pdfDoc = pdf;
-                          totalPages = pdf.numPages;
-                          renderPage(currentPage);
+                        pdfDoc = pdf;
+                        totalPages = pdf.numPages;
+                        renderPage(currentPage);
                       });
                       pageId.value = currentPage;
                     };
@@ -140,4 +140,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-html.html b/src/main/resources/templates/convert/pdf-to-html.html
index f2e914f9..c9256805 100644
--- a/src/main/resources/templates/convert/pdf-to-html.html
+++ b/src/main/resources/templates/convert/pdf-to-html.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToHTML.title}, header=#{PDFToHTML.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -27,4 +27,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index bcf3e8b3..039c52e0 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pdfToImage.title}, header=#{pdfToImage.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -55,4 +55,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-pdfa.html b/src/main/resources/templates/convert/pdf-to-pdfa.html
index 866449f1..e9b8ac88 100644
--- a/src/main/resources/templates/convert/pdf-to-pdfa.html
+++ b/src/main/resources/templates/convert/pdf-to-pdfa.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pdfToPDFA.title}, header=#{pdfToPDFA.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index 408ff151..48d27d24 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToPresentation.title}, header=#{PDFToPresentation.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -35,4 +35,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html
index d1616589..9877be8f 100644
--- a/src/main/resources/templates/convert/pdf-to-text.html
+++ b/src/main/resources/templates/convert/pdf-to-text.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToText.title}, header=#{PDFToText.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -34,5 +34,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
-
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index 6fd76f4e..fbbbf45d 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToWord.title}, header=#{PDFToWord.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -35,7 +35,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
-
-
-
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-xml.html b/src/main/resources/templates/convert/pdf-to-xml.html
index a7d020b0..cad43da2 100644
--- a/src/main/resources/templates/convert/pdf-to-xml.html
+++ b/src/main/resources/templates/convert/pdf-to-xml.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToXML.title}, header=#{PDFToXML.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -27,4 +27,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html
index 94f0bfa5..714bd1c4 100644
--- a/src/main/resources/templates/convert/url-to-pdf.html
+++ b/src/main/resources/templates/convert/url-to-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{URLToPDF.title}, header=#{URLToPDF.header})}"></th:block>
   </head>
@@ -9,13 +9,13 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
               <h2 th:text="#{URLToPDF.header}"></h2>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/url/pdf}">
-                <input type="text" class="form-control" id="urlInput" name="urlInput">
+                <input type="text" class="form-control" id="urlInput" name="urlInput" placeholder="http://">
                 <br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{URLToPDF.submit}"></button>
               </form>
@@ -27,4 +27,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/crop.html b/src/main/resources/templates/crop.html
index 05de3516..f2049572 100644
--- a/src/main/resources/templates/crop.html
+++ b/src/main/resources/templates/crop.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{crop.title}, header=#{crop.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -22,114 +22,117 @@
                 <button type="submit" class="btn btn-primary" th:text="#{crop.submit}"></button>
               </form>
               <div style="position: relative; display: inline-block;">
-            <canvas id="crop-pdf-canvas" style="position: absolute; top: 0; left: 0; z-index: 1;"></canvas>
-            <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>
-        </div>
-        <script>
-          let pdfCanvas  = document.getElementById('crop-pdf-canvas');
-          let overlayCanvas = document.getElementById('overlayCanvas');
+                <canvas id="crop-pdf-canvas" style="position: absolute; top: 0; left: 0; z-index: 1;"></canvas>
+                <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>
+              </div>
+            </div>
+          </div>
+          <script>
+            let pdfCanvas  = document.getElementById('crop-pdf-canvas');
+            let overlayCanvas = document.getElementById('overlayCanvas');
 
-          let context = pdfCanvas.getContext('2d');
-          let overlayContext = overlayCanvas.getContext('2d');
+            let context = pdfCanvas.getContext('2d');
+            let overlayContext = overlayCanvas.getContext('2d');
 
-          overlayCanvas.width = pdfCanvas.width;
-          overlayCanvas.height = pdfCanvas.height;
+            overlayCanvas.width = pdfCanvas.width;
+            overlayCanvas.height = pdfCanvas.height;
 
-          let isDrawing = false; // New flag to check if drawing is ongoing
+            let isDrawing = false; // New flag to check if drawing is ongoing
 
-          let cropForm = document.getElementById('cropForm');
-          let fileInput = document.getElementById('fileInput-input');
-          let xInput = document.getElementById('x');
-          let yInput = document.getElementById('y');
-          let widthInput = document.getElementById('width');
-          let heightInput = document.getElementById('height');
+            let cropForm = document.getElementById('cropForm');
+            let fileInput = document.getElementById('fileInput-input');
+            let xInput = document.getElementById('x');
+            let yInput = document.getElementById('y');
+            let widthInput = document.getElementById('width');
+            let heightInput = document.getElementById('height');
 
-          let pdfDoc = null;
-          let currentPage = 1;
-          let totalPages = 0;
+            let pdfDoc = null;
+            let currentPage = 1;
+            let totalPages = 0;
 
-          let startX = 0;
-          let startY = 0;
-          let rectWidth = 0;
-          let rectHeight = 0;
+            let startX = 0;
+            let startY = 0;
+            let rectWidth = 0;
+            let rectHeight = 0;
 
-          fileInput.addEventListener('change', function(e) {
-            let file = e.target.files[0];
-            if (file.type === 'application/pdf') {
-              let reader = new FileReader();
-              reader.onload = function(ev) {
-                let typedArray = new Uint8Array(reader.result);
-                pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
-                pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
-                  pdfDoc = pdf;
-                  totalPages = pdf.numPages;
-                  renderPage(currentPage);
-                });
-              };
-              reader.readAsArrayBuffer(file);
-            }
-          });
-
-          overlayCanvas.addEventListener('mousedown', function(e) {
-            // Clear previously drawn rectangle on the main canvas
-            context.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
-            renderPage(currentPage); // Re-render the PDF
-
-            // Clear the overlay canvas to ensure old drawings are removed
-            overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
-
-            startX = e.offsetX;
-            startY = e.offsetY;
-            isDrawing = true;
-          });
-
-          overlayCanvas.addEventListener('mousemove', function(e) {
-            if (!isDrawing) return;
-            overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); // Clear previous rectangle
-
-            rectWidth = e.offsetX - startX;
-            rectHeight = e.offsetY - startY;
-            overlayContext.strokeStyle = 'red';
-            overlayContext.strokeRect(startX, startY, rectWidth, rectHeight);
-          });
-
-          overlayCanvas.addEventListener('mouseup', function(e) {
-            isDrawing = false;
-
-            rectWidth = e.offsetX - startX;
-            rectHeight = e.offsetY - startY;
-
-            let flippedY = pdfCanvas.height - e.offsetY;
-
-            xInput.value = startX;
-            yInput.value = flippedY;
-            widthInput.value = rectWidth;
-            heightInput.value = rectHeight;
-
-            // Draw the final rectangle on the main canvas
-            context.strokeStyle = 'red';
-            context.strokeRect(startX, startY, rectWidth, rectHeight);
-
-            overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); // Clear the overlay
-          });
-
-          function renderPage(pageNumber) {
-            pdfDoc.getPage(pageNumber).then(function(page) {
-              let viewport = page.getViewport({ scale: 1.0 });
-              pdfCanvas.width = viewport.width;
-              pdfCanvas.height = viewport.height;
-
-              overlayCanvas.width = viewport.width;  // Match overlay canvas size with PDF canvas
-              overlayCanvas.height = viewport.height;
-
-              let renderContext = { canvasContext: context, viewport: viewport };
-              page.render(renderContext);
-              pdfCanvas.classList.add("shadow-canvas");
+            fileInput.addEventListener('change', function(e) {
+              let file = e.target.files[0];
+              if (file.type === 'application/pdf') {
+                let reader = new FileReader();
+                reader.onload = function(ev) {
+                  let typedArray = new Uint8Array(reader.result);
+                  pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
+                  pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
+                    pdfDoc = pdf;
+                    totalPages = pdf.numPages;
+                    renderPage(currentPage);
+                  });
+                };
+                reader.readAsArrayBuffer(file);
+              }
             });
-          }
-        </script>
+
+            overlayCanvas.addEventListener('mousedown', function(e) {
+              // Clear previously drawn rectangle on the main canvas
+              context.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
+              renderPage(currentPage); // Re-render the PDF
+
+              // Clear the overlay canvas to ensure old drawings are removed
+              overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+
+              startX = e.offsetX;
+              startY = e.offsetY;
+              isDrawing = true;
+            });
+
+            overlayCanvas.addEventListener('mousemove', function(e) {
+              if (!isDrawing) return;
+              overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); // Clear previous rectangle
+
+              rectWidth = e.offsetX - startX;
+              rectHeight = e.offsetY - startY;
+              overlayContext.strokeStyle = 'red';
+              overlayContext.strokeRect(startX, startY, rectWidth, rectHeight);
+            });
+
+            overlayCanvas.addEventListener('mouseup', function(e) {
+              isDrawing = false;
+
+              rectWidth = e.offsetX - startX;
+              rectHeight = e.offsetY - startY;
+
+              let flippedY = pdfCanvas.height - e.offsetY;
+
+              xInput.value = startX;
+              yInput.value = flippedY;
+              widthInput.value = rectWidth;
+              heightInput.value = rectHeight;
+
+              // Draw the final rectangle on the main canvas
+              context.strokeStyle = 'red';
+              context.strokeRect(startX, startY, rectWidth, rectHeight);
+
+              overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); // Clear the overlay
+            });
+
+            function renderPage(pageNumber) {
+              pdfDoc.getPage(pageNumber).then(function(page) {
+                let viewport = page.getViewport({ scale: 1.0 });
+                pdfCanvas.width = viewport.width;
+                pdfCanvas.height = viewport.height;
+
+                overlayCanvas.width = viewport.width;  // Match overlay canvas size with PDF canvas
+                overlayCanvas.height = viewport.height;
+
+                let renderContext = { canvasContext: context, viewport: viewport };
+                page.render(renderContext);
+                pdfCanvas.classList.add("shadow-canvas");
+              });
+            }
+          </script>
+        </div>
       </div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index 954bcd7d..57f2f4ad 100644
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title='404 - Page Not Found | Oops, we tripped in the code!')}"></th:block>
   </head>
@@ -29,11 +29,11 @@
               <a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" target="_blank">Submit a ticket on GitHub</a>
               <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank">Join our Discord server</a>
             </div>
-            <a href="/" id="home-button">Go back to homepage</a>
+            <a href="/" class="home-button">Go back to homepage</a>
           </div>
         </div>
       </div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/extract-page.html b/src/main/resources/templates/extract-page.html
index 4bbd8b22..c10485b8 100644
--- a/src/main/resources/templates/extract-page.html
+++ b/src/main/resources/templates/extract-page.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pageExtracter.title}, header=#{pageExtracter.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index 6fa05163..3f5517d6 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,7 +1,7 @@
 <div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" th:data-bs-tags="${tags}">
               <a th:href="${cardLink}">
                 <div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
-                  <img th:if="${svgPath}" id="card-icon" class="home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
+                  <img th:if="${svgPath}" class="card-icon home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
                   <h5 class="card-title  ms-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
                 </div>
                 <p class="card-text" th:text="${cardText}"></p>
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 2bd60360..98bf27e9 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -3,8 +3,8 @@
     <title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
 
     <!-- Metadata -->
-    <meta charset="UTF-8">
-    <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')"/>
+    <meta charset="utf-8">
+    <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')">
     <meta name="msapplication-TileColor" content="#2d89ef">
     <meta name="theme-color" content="#ffffff">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -43,7 +43,7 @@
     <link rel="stylesheet" href="css/general.css">
     <link rel="stylesheet" th:href="@{css/light-mode.css}" id="light-mode-styles">
     <link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
-    <link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled="true">
+    <link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled>
     <link rel="stylesheet" href="css/tab-container.css">
     <link rel="stylesheet" href="css/navbar.css">
 
@@ -84,7 +84,7 @@
           const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete';
           window.downloadCompleteText = downloadCompleteText;
           // Create the 'show-game-btn' button
-          var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button><br /><br />');
+          var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button><br><br>');
           
           // Insert the 'show-game-btn' just above the submit button
           submitButton.before(gameButton);
@@ -130,38 +130,33 @@
         <div id="score">Score: 0</div>
         <div id="high-score">High Score: 0</div>
         <div id="level">Level: 1</div>
-        <img src="favicon.svg" class="player" id="player">
+        <img src="favicon.svg" class="player" id="player" alt="favicon">
       </div>
       <link rel="stylesheet" href="css/game.css">
     </dialog>
-
 </th:block>
 
 <th:block th:fragment="fileSelector(name, multiple)" th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
-              <script th:inline="javascript">
-                const pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
-                const multiple = [[${multiple}]] || false;
-                const remoteCall = [[${remoteCall}]] || true;
-              </script>
-              <script src="js/downloader.js"></script>
+                <script th:inline="javascript">
+                  const pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
+                  const multiple = [[${multiple}]] || false;
+                  const remoteCall = [[${remoteCall}]] || true;
+                </script>
+                <script src="js/downloader.js"></script>
 
-              <div class="custom-file-chooser" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
-                <div class="mb-3">
-                  <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:required="${notRequired} ? null : 'required'">
+                <div class="custom-file-chooser" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
+                  <div class="mb-3">
+                    <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:required="${notRequired} ? null : 'required'">
+                  </div>
+                  <div class="selected-files"></div>
                 </div>
-                <div class="selected-files"></div>
-              </div>
 
-              <div id="progressBarContainer" style="display: none; position: relative;">
-                <div class="progress" style="height: 1rem;">
-                  <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
-                    <span class="visually-hidden">Loading...</span>
+                <div class="progressBarContainer" style="display: none; position: relative;">
+                  <div class="progress" style="height: 1rem;">
+                    <div class="progressBar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+                      <span class="visually-hidden">Loading...</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-             
- 
-          
-    
-              <script src="js/fileInput.js"></script>
+                <script src="js/fileInput.js"></script>
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/errorBanner.html b/src/main/resources/templates/fragments/errorBanner.html
index d9865b63..77aaab3b 100644
--- a/src/main/resources/templates/fragments/errorBanner.html
+++ b/src/main/resources/templates/fragments/errorBanner.html
@@ -35,8 +35,8 @@
     function copytrace() {
       var flip = false
       if(!traceVisible) {
-         toggletrace()
-         flip = true
+        toggletrace()
+        flip = true
       }
       var traceContent = document.getElementById("traceContent");
       var range = document.createRange();
diff --git a/src/main/resources/templates/fragments/errorBannerPerPage.html b/src/main/resources/templates/fragments/errorBannerPerPage.html
index e5a4f007..4f08c6a0 100644
--- a/src/main/resources/templates/fragments/errorBannerPerPage.html
+++ b/src/main/resources/templates/fragments/errorBannerPerPage.html
@@ -37,8 +37,8 @@
                         <a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" target="_blank">GitHub - Submit a ticket</a>
                         <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank">Discord - Submit Support post</a>
                       </div>
-                      <a href="/" id="home-button">Go to Homepage</a>
-                      <a data-bs-dismiss="modal" id="home-button">Close</a>
+                      <a href="/" class="home-button">Go to Homepage</a>
+                      <a data-bs-dismiss="modal" class="home-button">Close</a>
                     </div>
                   </div>
                 </div>
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index e382553b..3d32604d 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,19 +1,19 @@
 <footer th:fragment="footer" id="footer" class="text-center py-3">
         <div class="footer-center">
-            <a href="https://github.com/Stirling-Tools/Stirling-PDF" target="_blank" class="mx-1" title="Visit Github Repository">
-                <img src="images/github.svg">
-            </a>
-            <a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1" title="See Docker Hub">
-                <img src="images/docker.svg">
-            </a>
-            <a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1" title="Join Discord Channel">
-                <img src="images/discord.svg">
-            </a>
-            <a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1" title="Donate">
-                <img src="images/suit-heart-fill.svg">
-            </a>
-            <div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
+          <a href="https://github.com/Stirling-Tools/Stirling-PDF" target="_blank" class="mx-1" title="Visit Github Repository">
+            <img src="images/github.svg" alt="github">
+          </a>
+          <a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1" title="See Docker Hub">
+            <img src="images/docker.svg" alt="docker">
+          </a>
+          <a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1" title="Join Discord Channel">
+            <img src="images/discord.svg" alt="discord">
+          </a>
+          <a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1" title="Donate">
+            <img src="images/suit-heart-fill.svg" alt="suit-heart-fill">
+          </a>
         </div>
+        <div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
         <a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
       </footer>
 
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index f7d01c0e..926f494d 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -31,11 +31,11 @@
                   </li>
                   <li class="nav-item nav-item-separator"></li>
                   <li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <img class="icon" src="images/file-earmark-pdf.svg" alt="icon">
                       <span class="icon-text" th:text="#{navbar.pageOps}"></span>
                     </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-1">
                       <!-- Existing menu items -->
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'images/union.svg', 'home.merge.title', 'home.merge.desc', 'merge.tags')}"></div>
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'images/layout-split.svg', 'home.split.title', 'home.split.desc', 'split.tags')}"></div>
@@ -58,11 +58,11 @@
                   <li class="nav-item nav-item-separator"></li>
 
                   <li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown-2" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <img class="icon" src="images/arrow-left-right.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
                       <span class="icon-text" th:text="#{navbar.convert}"></span>
                     </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-2">
                       <!-- Existing menu items -->
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'images/image.svg', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags')}"></div>
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'images/file.svg', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags')}"></div>
@@ -86,10 +86,10 @@
                   <li class="nav-item nav-item-separator"></li>
 
                   <li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown-3" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <img class="icon" src="images/shield-check.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text" th:text="#{navbar.security}"></span>
                     </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-3">
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'images/lock.svg', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags')}"></div>
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'images/unlock.svg', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags')}"></div>
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'images/shield-lock.svg', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags')}"></div>
@@ -103,11 +103,11 @@
                   <li class="nav-item nav-item-separator"></li>
 
                   <li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='remove-annotations' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown-4" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
                       <span class="icon-text" th:text="#{navbar.other}"></span>
                     </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-4">
                       <!--<div th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'images/pipeline.svg', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags')}"></div> -->
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('view-pdf', 'images/book-opened.svg', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags')}"></div>
                       <div th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'images/search.svg', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags')}"></div>
@@ -132,22 +132,22 @@
                 </ul>
                 <ul class="navbar-nav  flex-nowrap">
                   <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown-5" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <img class="navbar-icon" src="images/star.svg" alt="icon" width="24" height="24">
                     </a>
-                    <div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
                       <!-- Dropdown items will be added here by JavaScript -->
                     </div>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link" id="dark-mode-toggle" href="#">
-                      <img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="icon" />
+                      <img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="icon" >
                     </a>
                   </li>
                   <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2 globe-icon" viewBox="0 0 20 20">
-                          <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
+                        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
                       </svg>
                     </a>
                     <div class="dropdown-menu" aria-labelledby="languageDropdown">
@@ -192,15 +192,9 @@
                 <div class="modal-body">
                   <div class="d-flex justify-content-between align-items-center mb-3">
                     <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
-                    <a href="https://github.com/sponsors/Frooodle" target="_blank">
-                      <button type="button" class="btn btn-sm btn-outline-primary">Sponsor Stirling-PDF</button>
-                    </a>
-                    <a href="swagger-ui/index.html" target="_blank">
-                      <button type="button" class="btn btn-sm btn-outline-primary">API</button>
-                    </a>
-                    <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank">
-                      <button type="button" class="btn btn-sm btn-outline-primary" id="update-btn" th:utext="#{settings.update}"></button>
-                    </a>
+                    <a href="https://github.com/sponsors/Frooodle" class="btn btn-sm btn-outline-primary" role="button" target="_blank">Sponsor Stirling-PDF</a>
+                    <a href="swagger-ui/index.html" class="btn btn-sm btn-outline-primary" role="button" target="_blank">API</a>
+                    <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" class="btn btn-sm btn-outline-primary" id="update-btn" th:utext="#{settings.update}" role="button" target="_blank"></a>
                   </div>
                   <div class="mb-3">
                     <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
@@ -219,18 +213,14 @@
                     <input type="checkbox" class="form-check-input" id="boredWaiting">
                     <label class="form-check-label" for="boredWaiting" th:text="#{bored}"></label>
                   </div>
-                  <a th:if="${@loginEnabled}" href="account" target="_blank">
-                    <button type="button" class="btn btn-sm btn-outline-primary" th:text="#{settings.accountSettings}">Account Settings</button>
-                  </a>
+                  <a th:if="${@loginEnabled}" href="account" class="btn btn-sm btn-outline-primary" role="button" th:text="#{settings.accountSettings}" target="_blank">Account Settings</a>
                 </div>
                 <div class="modal-footer">
-                  <a th:if="${@loginEnabled}" href="logout">
-                    <button type="button" class="btn btn-danger" th:text="#{settings.signOut}">Sign Out</button>
-                  </a>
+                  <a th:if="${@loginEnabled}" class="btn btn-danger" role="button" th:text="#{settings.signOut}" href="logout">Sign Out</a>
                   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
                 </div>
               </div>
             </div>
           </div>
           <script src="js/settings.js"></script>
-        </div>
+        </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 8ddb7dea..ed1c6a18 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
   </head>
@@ -21,7 +21,7 @@
 
         <div class=" container">
           <br>
-          <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}">
+          <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
           <div class="features-container">
             <div th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', svgPath='images/pipeline.svg', tags=#{pipeline.tags})}"></div>
 
@@ -75,7 +75,6 @@
             <div th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', svgPath='images/page-layout.svg', tags=#{pageLayout.tags})}"></div>
             <div th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', svgPath='images/scale-pages.svg', tags=#{scalePages.tags})}"></div>
 
-
             <div th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', svgPath='images/fonts.svg', tags=#{auto-rename.tags})}"></div>
             <div th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', svgPath='images/layout-split.svg', tags=#{autoSplitPDF.tags})}"></div>
             <div th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', svgPath='images/sanitize.svg', tags=#{sanitizePdf.tags})}"></div>
@@ -102,4 +101,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/licenses.html b/src/main/resources/templates/licenses.html
index 9d7cd250..f9d6c641 100644
--- a/src/main/resources/templates/licenses.html
+++ b/src/main/resources/templates/licenses.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{licenses.title}, header=#{licenses.title})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -23,15 +23,12 @@
                 </thead>
                 <tbody>
                   <tr th:each="dep : ${dependencies}">
-                    <td><a th:href="${dep.moduleUrl}"
-                      th:text="${dep.moduleName}"></a></td>
+                    <td><a th:href="${dep.moduleUrl}" th:text="${dep.moduleName}"></a></td>
                     <td th:text="${dep.moduleVersion}"></td>
-                    <td><a th:href="${dep.moduleLicenseUrl}"
-                      th:text="${dep.moduleLicense}"></a></td>
+                    <td><a th:href="${dep.moduleLicenseUrl}" th:text="${dep.moduleLicense}"></a></td>
                   </tr>
                 </tbody>
               </table>
-
             </div>
           </div>
         </div>
@@ -39,4 +36,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 19a4b728..02c9cfed 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{login.title}, header=#{login.header})}"></th:block>
     <link rel="stylesheet" href="css/login.css">
@@ -52,7 +52,7 @@
 
           document.addEventListener('DOMContentLoaded', function() {
 
-            const defaultLocale = document.documentElement.language || 'en_GB';
+            const defaultLocale = document.documentElement.getAttribute('language') || 'en_GB';
             const storedLocale = localStorage.getItem('languageCode') || defaultLocale;
 
             const currentURL = new URL(window.location.href);
@@ -61,10 +61,10 @@
 
 
             if (defaultLocale !== storedLocale && currentLangParam !== storedLocale) {
-                urlParams.set('lang', storedLocale);
-                currentURL.search = urlParams.toString();
-                window.location.href = currentURL.toString();
-                return;
+              urlParams.set('lang', storedLocale);
+              currentURL.search = urlParams.toString();
+              window.location.href = currentURL.toString();
+              return;
             }
 
             const dropdown = document.getElementById('languageDropdown');
@@ -72,17 +72,17 @@
 
             let activeItem;
             for (let i = 0; i < dropdownItems.length; i++) {
-                const item = dropdownItems[i];
-                item.classList.remove('active');
-                if (item.dataset.bsLanguageCode === storedLocale) {
-                    item.classList.add('active');
-                    activeItem = item;
-                }
-                item.addEventListener('click', handleDropdownItemClick);
+              const item = dropdownItems[i];
+              item.classList.remove('active');
+              if (item.dataset.bsLanguageCode === storedLocale) {
+                item.classList.add('active');
+                activeItem = item;
+              }
+              item.addEventListener('click', handleDropdownItemClick);
             }
 
             if (activeItem) {
-                dropdown.innerHTML = activeItem.innerHTML;  // This will set the dropdown button's content to the active language's flag and name
+              dropdown.innerHTML = activeItem.innerHTML;  // This will set the dropdown button's content to the active language's flag and name
             }
 
             // Additional functionality that was in your provided code:
@@ -91,7 +91,7 @@
               const dropdownMenu = element.querySelector(".dropdown-menu");
               if (dropdownMenu.id !== 'favoritesDropdown' &&  dropdownMenu.children.length <= 2 && dropdownMenu.querySelectorAll("hr.dropdown-divider").length === dropdownMenu.children.length) {
                 if (element.previousElementSibling && element.previousElementSibling.classList.contains('nav-item') && element.previousElementSibling.classList.contains('nav-item-separator')) {
-                    element.previousElementSibling.remove();
+                  element.previousElementSibling.remove();
                 }
                 element.remove();
               }
@@ -142,23 +142,25 @@
           <h2 class="h5 mb-3 fw-normal" th:text="#{login.signinTitle}">Please sign in</h2>
 
           <div class="form-floating">
-            <input type="text" class="form-control bg-dark text-light" id="username" name="username" placeholder="admin"> <label for="username" th:text="#{username}">Username</label>
+            <input type="text" class="form-control bg-dark text-light" id="username" name="username" placeholder="admin">
+            <label for="username" th:text="#{username}">Username</label>
           </div>
           <div class="form-floating">
-            <input type="password" class="form-control bg-dark text-light" id="password" name="password" placeholder="Password"> <label for="password" th:text="#{password}">Password</label>
+            <input type="password" class="form-control bg-dark text-light" id="password" name="password" placeholder="Password">
+            <label for="password" th:text="#{password}">Password</label>
           </div>
 
           <div class="checkbox mb-3">
-            <label > <input type="checkbox" value="remember-me">
-              <span th:text="#{login.rememberme}"></span>
-            </label>
+            <input type="checkbox" id="remember" value="remember-me">
+            <label for="remember" th:text="#{login.rememberme}"></label> 
           </div>
           <button class="w-100 btn btn-lg btn-primary" type="submit" th:text="#{login.signin}">Sign in</button>
         </form>
         <div class="mt-3"> <!-- Added a margin-top for spacing -->
           <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-              English (GB) <!-- Default language placeholder -->
+              <img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
+              <!-- Default language placeholder -->
             </button>
             <div class="dropdown-menu" aria-labelledby="languageDropdown">
               <!-- Here's where the fragment will be included -->
@@ -174,4 +176,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 33c0cb4f..10a0bb06 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{merge.title}, header=#{merge.header})}"></th:block>
     <link rel="stylesheet" href="css/merge.css">
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container" id="dropContainer">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -36,4 +36,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/add-image.html b/src/main/resources/templates/misc/add-image.html
index daa09a1b..04e0dfc5 100644
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{addImage.title}, header=#{addImage.header})}"></th:block>
     <script src="js/thirdParty/interact.min.js"></script>
@@ -10,7 +10,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -66,42 +66,41 @@
               <div id="box-drag-container" class="show-on-file-selected">
                 <canvas id="pdf-canvas"></canvas>
                 <script src="js/draggable-utils.js"></script>
-                  <div class="draggable-buttons-box ignore-rtl">
-                    <button class="btn btn-outline-secondary" onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-                      </svg>
-                    </button>
-                    <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
-                      </svg>
-                    </button>
-                    <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-                      </svg>
-                    </button>
-                  </div>
+                <div class="draggable-buttons-box ignore-rtl">
+                  <button class="btn btn-outline-secondary" onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
+                      <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
+                    </svg>
+                  </button>
+                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+                      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                    </svg>
+                  </button>
+                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+                      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                    </svg>
+                  </button>
                 </div>
-
-                <!-- download button -->
-                <div class="margin-auto-parent">
-                  <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
-                </div>
-                <script>
-                  document.getElementById("download-pdf").addEventListener('click', async() => {
-                    const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
-                    const modifiedPdfBytes = await modifiedPdf.save();
-                    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
-                    const link = document.createElement('a');
-                    link.href = URL.createObjectURL(blob);
-                    link.download = originalFileName + '_addedImage.pdf';
-                    link.click();
-                  });
-                </script>
               </div>
+
+              <!-- download button -->
+              <div class="margin-auto-parent">
+                <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
+              </div>
+              <script>
+                document.getElementById("download-pdf").addEventListener('click', async() => {
+                  const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+                  const modifiedPdfBytes = await modifiedPdf.save();
+                  const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+                  const link = document.createElement('a');
+                  link.href = URL.createObjectURL(blob);
+                  link.download = originalFileName + '_addedImage.pdf';
+                  link.click();
+                });
+              </script>
             </div>
           </div>
         </div>
@@ -109,4 +108,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/add-page-numbers.html b/src/main/resources/templates/misc/add-page-numbers.html
index 07fc3f9e..0d02d456 100644
--- a/src/main/resources/templates/misc/add-page-numbers.html
+++ b/src/main/resources/templates/misc/add-page-numbers.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{addPageNumbers.title}, header=#{addPageNumbers.header})}"></th:block>
     <style>
       .a4container {
         position: relative;
         width: 50%;
-        aspect-ratio: 0.707;
+        aspect-ratio: 0.707/1;
         border: 1px solid #ddd;
         box-sizing: border-box;
         background-color: white;
@@ -52,7 +52,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -62,7 +62,7 @@
                 <br>
                 <div class="mb-3">
                   <label for="customMargin" th:text="#{addPageNumbers.selectText.2}"></label>
-                  <select class="form-control" id="customMargin" name="customMargin" required>
+                  <select class="form-control" id="customMargin" name="customMargin">
                     <option value="small" th:text="#{sizes.small}"></option>
                     <option value="medium" selected th:text="#{sizes.medium}"></option>
                     <option value="large" th:text="#{sizes.large}"></option>
@@ -70,7 +70,7 @@
                   </select>
                 </div>
                 <div class="mb-3">
-                  <label for="position" th:text="#{addPageNumbers.selectText.3}"></label>
+                  <label th:text="#{addPageNumbers.selectText.3}"></label>
                   <div class="a4container">
                     <div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
                     <div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
@@ -83,18 +83,18 @@
                     <div class="pageNumber" id="9" style="top: 90%; left: 90%;">9</div>
                   </div>
                 </div>
-                <input type="hidden" id="numberInput" name="position" min="1" max="9" value="8" required />
+                <input type="hidden" id="numberInput" name="position" value="8">
                 <div class="mb-3">
                   <label for="startingNumber" th:text="#{addPageNumbers.selectText.4}"></label>
-                  <input type="number" class="form-control" id="startingNumber" name="startingNumber" min="1" required value="1" />
+                  <input type="number" class="form-control" id="startingNumber" name="startingNumber" min="1" required value="1">
                 </div>
                 <div class="mb-3">
                   <label for="pagesToNumber" th:text="#{addPageNumbers.selectText.5}"></label>
-                  <input type="text" class="form-control" id="pagesToNumber" name="pagesToNumber" th:placeholder="#{addPageNumbers.numberPagesDesc}" />
+                  <input type="text" class="form-control" id="pagesToNumber" name="pagesToNumber" th:placeholder="#{addPageNumbers.numberPagesDesc}">
                 </div>
                 <div class="mb-3">
                   <label for="customText" th:text="#{addPageNumbers.selectText.6}"></label>
-                  <input type="text" class="form-control" id="customText" name="customText" th:placeholder="#{addPageNumbers.customNumberDesc}" />
+                  <input type="text" class="form-control" id="customText" name="customText" th:placeholder="#{addPageNumbers.customNumberDesc}">
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{addPageNumbers.submit}"></button>
               </form>
@@ -134,4 +134,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/adjust-contrast.html b/src/main/resources/templates/misc/adjust-contrast.html
index 537985ec..8fc3b661 100644
--- a/src/main/resources/templates/misc/adjust-contrast.html
+++ b/src/main/resources/templates/misc/adjust-contrast.html
@@ -1,49 +1,49 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{adjustContrast.title}, header=#{adjustContrast.header})}"></th:block>
+    <style>
+      #flex-container {
+        display: flex;
+        align-items: center;
+      }
+      #sliders-container {
+        padding: 0 20px;  /* Add some padding to separate sliders from canvas */
+      }
+    </style>
   </head>
 
   <body>
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-12">
               <div class="row justify-content-center">
                 <div class="col-md-3">
-                    <div id="sliders-container" style="display:none;">
-                      <h4><span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%</h4>
-                      <input type="range" min="0" max="200" value="100" id="contrast-slider" />
+                  <div id="sliders-container" style="display:none;">
+                    <h4><span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%</h4>
+                    <input type="range" min="0" max="200" value="100" id="contrast-slider">
 
-                      <h4><span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%</h4>
-                      <input type="range" min="0" max="200" value="100" id="brightness-slider" />
+                    <h4><span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%</h4>
+                    <input type="range" min="0" max="200" value="100" id="brightness-slider">
 
-                      <h4><span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%</h4>
-                      <input type="range" min="0" max="200" value="100" id="saturation-slider" />
-                    </div>
+                    <h4><span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%</h4>
+                    <input type="range" min="0" max="200" value="100" id="saturation-slider">
+                  </div>
                 </div>
                 <div class="col-md-7">
                   <h2 th:text="#{adjustContrast.header}"></h2>
                   <div class="col-md-8">
                     <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                   </div>
-                  <br />
+                  <br>
                   <canvas id="contrast-pdf-canvas"></canvas>
                   <button id="download-button" class="btn btn-primary" th:text="#{adjustContrast.download}"></button>
                 </div>
               </div>
-              <style>
-                #flex-container {
-                  display: flex;
-                  align-items: center;
-                }
-                #sliders-container {
-                  padding: 0 20px;  /* Add some padding to separate sliders from canvas */
-                }
-              </style>
 
               <script>
                 var canvas = document.getElementById('contrast-pdf-canvas');
@@ -69,7 +69,6 @@
                     // Render the first page in the viewer
                     await renderPageAndAdjustImageProperties(1);
                     document.getElementById("sliders-container").style.display = "block";
-
                   };
                   fileReader.readAsArrayBuffer(file);
                 }
@@ -130,7 +129,6 @@
                       newImageData.data[i+1] = rgb[1];
                       newImageData.data[i+2] = rgb[2];
                     }
-
                     context.putImageData(newImageData, 0, 0);
                   }
                 }
@@ -256,7 +254,6 @@
                   if (pdf !== null) {
                     renderPageAndAdjustImageProperties(1);
                   }
-
                 }
 
                 // Event listeners
@@ -292,4 +289,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/auto-crop.html b/src/main/resources/templates/misc/auto-crop.html
index 21c470e1..06e7874f 100644
--- a/src/main/resources/templates/misc/auto-crop.html
+++ b/src/main/resources/templates/misc/auto-crop.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{autoCrop.title}, header=#{autoCrop.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/misc/auto-rename.html b/src/main/resources/templates/misc/auto-rename.html
index 9e2c44f2..42876df3 100644
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{auto-rename.title}, header=#{auto-rename.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -26,4 +26,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/change-metadata.html b/src/main/resources/templates/misc/change-metadata.html
index d96e9025..b620755c 100644
--- a/src/main/resources/templates/misc/change-metadata.html
+++ b/src/main/resources/templates/misc/change-metadata.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{changeMetadata.title}, header=#{changeMetadata.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -25,8 +25,8 @@
                   <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                 </div>
                 <div class="mb-3">
-                    <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
-                    <input type="text" class="form-control" id="author" name="author">
+                  <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
+                  <input type="text" class="form-control" id="author" name="author">
                 </div>
 
                 <div class="mb-3">
@@ -89,12 +89,12 @@
 
                   deleteAllCheckbox.addEventListener("change", function(event) {
                     inputs.forEach(input => {
-                        // If it's the deleteAllCheckbox or any file input, skip
-                        if (input === deleteAllCheckbox || input.type === "file") {
-                            return;
-                        }
-                        // Disable or enable based on the checkbox state
-                        input.disabled = deleteAllCheckbox.checked;
+                      // If it's the deleteAllCheckbox or any file input, skip
+                      if (input === deleteAllCheckbox || input.type === "file") {
+                        return;
+                      }
+                      // Disable or enable based on the checkbox state
+                      input.disabled = deleteAllCheckbox.checked;
                     });
                   });
 
@@ -224,4 +224,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/compare.html b/src/main/resources/templates/misc/compare.html
index 3b564855..fd9ff958 100644
--- a/src/main/resources/templates/misc/compare.html
+++ b/src/main/resources/templates/misc/compare.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{compare.title}, header=#{compare.header})}"></th:block>
     <style>
@@ -17,7 +17,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-9">
@@ -184,4 +184,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/compress-pdf.html b/src/main/resources/templates/misc/compress-pdf.html
index fa44d90a..3638e3af 100644
--- a/src/main/resources/templates/misc/compress-pdf.html
+++ b/src/main/resources/templates/misc/compress-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -32,7 +32,7 @@
                   <div class="card-body">
                     <h4 th:text="#{compress.selectText.4}"></h4>
                     <label for="expectedOutputSize" th:text="#{compress.selectText.5}"></label>
-                    <input type="text" name="expectedOutputSize" id="expectedOutputSize" min="1" class="form-control">
+                    <input type="text" name="expectedOutputSize" id="expectedOutputSize" class="form-control">
                   </div>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
diff --git a/src/main/resources/templates/misc/extract-image-scans.html b/src/main/resources/templates/misc/extract-image-scans.html
index a673f4a3..90623b22 100644
--- a/src/main/resources/templates/misc/extract-image-scans.html
+++ b/src/main/resources/templates/misc/extract-image-scans.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{home.ScannerImageSplit.title}, header=#{home.ScannerImageSplit.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/misc/extract-images.html b/src/main/resources/templates/misc/extract-images.html
index bf79fa54..12d2f64e 100644
--- a/src/main/resources/templates/misc/extract-images.html
+++ b/src/main/resources/templates/misc/extract-images.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{extractImages.title}, header=#{extractImages.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/misc/flatten.html b/src/main/resources/templates/misc/flatten.html
index 6107fcc4..49710831 100644
--- a/src/main/resources/templates/misc/flatten.html
+++ b/src/main/resources/templates/misc/flatten.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{flatten.title}, header=#{flatten.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -51,5 +51,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/ocr-pdf.html b/src/main/resources/templates/misc/ocr-pdf.html
index 5eebdda7..a5374a22 100644
--- a/src/main/resources/templates/misc/ocr-pdf.html
+++ b/src/main/resources/templates/misc/ocr-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{ocr.title}, header=#{ocr.header})}"></th:block>
     <script>
@@ -31,7 +31,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -40,14 +40,14 @@
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
-                  <hr />
+                  <hr>
                   <div id="languages">
                     <div th:each="language, iterStat : ${languages}">
                       <input type="checkbox" th:name="languages" th:value="${language}" required th:id="${'language-' + language}" onchange="handleLangSelection()" />
                       <label class="form-check-label" th:for="${'language-' + language}" th:text="${language}"></label>
                     </div>
                   </div>
-                  <hr />
+                  <hr>
                 </div>
                 <div class="mb-3">
                   <label th:text="#{ocr.selectText.10}"></label>
@@ -246,4 +246,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/remove-annotations.html b/src/main/resources/templates/misc/remove-annotations.html
index b8714ff1..a9973b79 100644
--- a/src/main/resources/templates/misc/remove-annotations.html
+++ b/src/main/resources/templates/misc/remove-annotations.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{removeAnnotations.title}, header=#{removeAnnotations.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/misc/remove-blanks.html b/src/main/resources/templates/misc/remove-blanks.html
index 08a5b3e8..6ab25907 100644
--- a/src/main/resources/templates/misc/remove-blanks.html
+++ b/src/main/resources/templates/misc/remove-blanks.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{removeBlanks.title}, header=#{removeBlanks.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -34,5 +34,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
-
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/repair.html b/src/main/resources/templates/misc/repair.html
index 438295d5..204bce14 100644
--- a/src/main/resources/templates/misc/repair.html
+++ b/src/main/resources/templates/misc/repair.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{repair.title}, header=#{repair.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/misc/show-javascript.html b/src/main/resources/templates/misc/show-javascript.html
index 147f0a4f..ba60ec00 100644
--- a/src/main/resources/templates/misc/show-javascript.html
+++ b/src/main/resources/templates/misc/show-javascript.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{showJS.title}, header=#{showJS.header})}"></th:block>
-    <link href="css/prism.css" rel="stylesheet" />
+    <link href="css/prism.css" rel="stylesheet">
     <script src="js/thirdParty/prism.js"></script>
     <style>
       /* Add a max-height and make it scrollable */
@@ -17,7 +17,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-12">
diff --git a/src/main/resources/templates/misc/stamp.html b/src/main/resources/templates/misc/stamp.html
index ea50024e..d7af666e 100644
--- a/src/main/resources/templates/misc/stamp.html
+++ b/src/main/resources/templates/misc/stamp.html
@@ -1,7 +1,17 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{AddStampRequest.title}, header=#{AddStampRequest.header})}"></th:block>
+    <style>
+      .a4container {
+        position: relative;
+        width: 50%;
+        aspect-ratio: 0.707/1;
+        border: 1px solid #ddd;
+        box-sizing: border-box;
+        background-color: white;
+      }
+    </style>
   </head>
 
   <body>
@@ -9,7 +19,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -33,7 +43,7 @@
                 </div>
 
                 <div class="mb-3">
-                  <label for="position" th:text="#{AddStampRequest.position}"></label>
+                  <label th:text="#{AddStampRequest.position}"></label>
                   <div class="a4container">
                     <div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
                     <div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
@@ -47,11 +57,11 @@
                   </div>
                 </div>
 
-                <input type="hidden" id="numberInput" name="position" min="1" max="9" value="8" required />
+                <input type="hidden" id="numberInput" name="position" value="8">
 
                 <div class="mb-3">
                   <label for="stampType" class="form-label" th:text="#{AddStampRequest.stampType}">Stamp Type</label>
-                  <select class="form-select" id="stampType" name="stampType" onchange="toggleFileOption()" required>
+                  <select class="form-select" id="stampType" name="stampType" onchange="toggleFileOption()">
                     <option value="text">Text</option>
                     <option value="image">Image</option>
                   </select>
@@ -70,11 +80,11 @@
                 <div id="alphabetGroup" class="mb-3">
                   <label for="alphabet" class="form-label" th:text="#{AddStampRequest.alphabet}">Alphabet</label>
                   <select class="form-select" id="alphabet" name="alphabet">
-                      <option value="roman">Roman</option>
-                      <option value="arabic">العربية</option>
-                      <option value="japanese">日本語</option>
-                      <option value="korean">한국어</option>
-                      <option value="chinese">简体中文</option>
+                    <option value="roman">Roman</option>
+                    <option value="arabic">العربية</option>
+                    <option value="japanese">日本語</option>
+                    <option value="korean">한국어</option>
+                    <option value="chinese">简体中文</option>
                   </select>
                 </div>
 
@@ -164,4 +174,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/multi-page-layout.html b/src/main/resources/templates/multi-page-layout.html
index ed143e42..0e51b8fa 100644
--- a/src/main/resources/templates/multi-page-layout.html
+++ b/src/main/resources/templates/multi-page-layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pageLayout.title}, header=#{pageLayout.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -17,12 +17,12 @@
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
-                  <select id="pagesPerSheet" name="pagesPerSheet" required>
-                      <option value="2">2</option>
-                      <option value="3">3</option>
-                      <option value="4">4</option>
-                      <option value="9">9</option>
-                      <option value="16">16</option>
+                  <select id="pagesPerSheet" name="pagesPerSheet">
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="9">9</option>
+                    <option value="16">16</option>
                   </select>
                 </div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index b9cc3841..cb398a61 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{multiTool.title}, header=#{multiTool.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="multi-tool-container">
           <div class="row justify-content-center">
             <h2 th:text="#{multiTool.header}"></h2>
@@ -28,13 +28,13 @@
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6" style="text-align: center">
-              <div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
+              <div class="global-buttons-container d-flex align-content-center justify-content-center">
                 <div class="form-group">
-                  <label for="filename-input">Filename</label>
-                  <input type="text" class="form-control" id="filename-input" placeholder="filename">
+                  <label for="filename-input" th:text="#{multiTool.filename}">Filename</label>
+                  <input type="text" class="form-control" id="filename-input" th:placeholder="#{multiTool.filename}">
                 </div>
               </div>
-              <div id="global-buttons-container">
+              <div class="global-buttons-container">
                 <button class="btn btn-primary" onclick="addPdfs()">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                     <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
@@ -64,9 +64,9 @@
           </div>
         </div>
       </div>
+      <div id="drag-container"></div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-    <div id="drag-container"></div>
 
     <script type="module">
       import PdfContainer from './js/multitool/PdfContainer.js';
@@ -101,4 +101,4 @@
       fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
     </script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/overlay-pdf.html b/src/main/resources/templates/overlay-pdf.html
index 5d482466..10cd43d9 100644
--- a/src/main/resources/templates/overlay-pdf.html
+++ b/src/main/resources/templates/overlay-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{split-by-size-or-count.title}, header=#{split-by-size-or-count.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -20,9 +20,9 @@
 
                 <label for="overlayMode" th:text="#{overlay-pdfs.mode.label}">Overlay Mode</label>
                 <select id="overlayMode" name="overlayMode" class="form-control">
-                    <option value="SequentialOverlay" th:text="#{overlay-pdfs.mode.sequential}">Sequential Overlay</option>
-                    <option value="InterleavedOverlay" th:text="#{overlay-pdfs.mode.interleaved}">Interleaved Overlay</option>
-                    <option value="FixedRepeatOverlay" th:text="#{overlay-pdfs.mode.fixedRepeat}">Fixed Repeat Overlay</option>
+                  <option value="SequentialOverlay" th:text="#{overlay-pdfs.mode.sequential}">Sequential Overlay</option>
+                  <option value="InterleavedOverlay" th:text="#{overlay-pdfs.mode.interleaved}">Interleaved Overlay</option>
+                  <option value="FixedRepeatOverlay" th:text="#{overlay-pdfs.mode.fixedRepeat}">Fixed Repeat Overlay</option>
                 </select>
                 <br>
                 <label for="overlayPosition" th:text="#{overlay-pdfs.position.label}">Overlay Position</label>
@@ -75,7 +75,7 @@
                   var fileInput = document.getElementById('overlayFiles-input');
                   console.log("fileInput2",fileInput);
                     if (fileInput) {
-                        fileInput.addEventListener('change', updateCountsInputs);
+                      fileInput.addEventListener('change', updateCountsInputs);
                     }
                 });
                 document.addEventListener('DOMContentLoaded', (event) => {
@@ -93,4 +93,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index 94362f55..9f69c95c 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pdfOrganiser.title}, header=#{pdfOrganiser.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -19,15 +19,15 @@
                 <div class="mb-3">
                   <label for="customMode">Mode</label>
                   <select class="form-control" id="customMode" name="customMode">
-                      <option value="">Custom Page Order</option>
-                      <option value="REVERSE_ORDER">Reverse Order</option>
-                      <option value="DUPLEX_SORT">Duplex Sort</option>
-                      <option value="BOOKLET_SORT">Booklet Sort</option>
-                      <option value="SIDE_STITCH_BOOKLET_SORT">Side Stitch Booklet Sort</option>
-                      <option value="ODD_EVEN_SPLIT">Odd-Even Split</option>
-                      <option value="REMOVE_FIRST">Remove First</option>
-                      <option value="REMOVE_LAST">Remove Last</option>
-                      <option value="REMOVE_FIRST_AND_LAST">Remove First and Last</option>
+                    <option value="">Custom Page Order</option>
+                    <option value="REVERSE_ORDER">Reverse Order</option>
+                    <option value="DUPLEX_SORT">Duplex Sort</option>
+                    <option value="BOOKLET_SORT">Booklet Sort</option>
+                    <option value="SIDE_STITCH_BOOKLET_SORT">Side Stitch Booklet Sort</option>
+                    <option value="ODD_EVEN_SPLIT">Odd-Even Split</option>
+                    <option value="REMOVE_FIRST">Remove First</option>
+                    <option value="REMOVE_LAST">Remove Last</option>
+                    <option value="REMOVE_FIRST_AND_LAST">Remove First and Last</option>
                   </select>
                 </div>
                 <div class="mb-3">
@@ -53,4 +53,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/pdf-to-single-page.html b/src/main/resources/templates/pdf-to-single-page.html
index 1cf5bc69..0dc8761c 100644
--- a/src/main/resources/templates/pdf-to-single-page.html
+++ b/src/main/resources/templates/pdf-to-single-page.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pdfToSinglePage.title}, header=#{pdfToSinglePage.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/pipeline.html b/src/main/resources/templates/pipeline.html
index 6dcab369..04887c0c 100644
--- a/src/main/resources/templates/pipeline.html
+++ b/src/main/resources/templates/pipeline.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"></th:block>
     <link rel="stylesheet" href="css/pipeline.css" th:if="${currentPage == 'pipeline'}">
@@ -12,16 +12,15 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            
-			<div style="text-align: center;">
-			<h1 th:text="#{pipeline.header}"></h1>
-    <img src="images/pipeline.svg" alt="icon" style="filter: invert(33%) sepia(100%) saturate(5000%) hue-rotate(183deg) brightness(90%) contrast(100%); width: 100px; height: 100px;">
-  </div>
-           
-			
+
+            <div style="text-align: center;">
+              <h1 th:text="#{pipeline.header}"></h1>
+              <img src="images/pipeline.svg" alt="icon" style="filter: invert(33%) sepia(100%) saturate(5000%) hue-rotate(183deg) brightness(90%) contrast(100%); width: 100px; height: 100px;">
+            </div>
+          
             <div class="bordered-box">
               <div class="text-end text-top">
                 <button id="uploadPipelineBtn" class="btn btn-primary" th:text="#{pipeline.uploadButton}"></button>
@@ -44,8 +43,8 @@
                   <button class="btn btn-primary" id="submitConfigBtn" th:text="#{pipeline.submitButton}"></button>
                 </div>
                 <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/PipelineFeature.md" target="_blank">Pipeline Help</a>
-              </br>
-			  <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/FolderScanning.md" target="_blank">Folder Scanning Help</a>
+                <br>
+                <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/FolderScanning.md" target="_blank">Folder Scanning Help</a>
               </div>
             </div>
 
@@ -87,7 +86,7 @@
 
                   <!-- Modal footer -->
                   <div class="modal-footer">
-                  	<button id="saveBrowserPipelineBtn" class="btn btn-success" th:text="#{saveToBrowser}"></button>
+                    <button id="saveBrowserPipelineBtn" class="btn btn-success" th:text="#{saveToBrowser}"></button>
                     <button id="savePipelineBtn" class="btn btn-success" th:text="#{pipelineOptions.saveButton}"></button>
                     <button id="validateButton" class="btn btn-success" th:text="#{pipelineOptions.validateButton}"></button>
 
@@ -105,4 +104,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/remove-pages.html b/src/main/resources/templates/remove-pages.html
index c67f7658..9e8a8bc5 100644
--- a/src/main/resources/templates/remove-pages.html
+++ b/src/main/resources/templates/remove-pages.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{pageRemover.title}, header=#{pageRemover.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -17,7 +17,7 @@
               <form th:action="@{api/v1/general/remove-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
-                  <label for="pageNumbers" th:text="#{pageRemover.pagesToDelete}"></label>
+                  <label for="fileInput" th:text="#{pageRemover.pagesToDelete}"></label>
                   <input type="text" class="form-control" id="fileInput" name="pageNumbers" placeholder="(e.g. 1,2,6 or 1-10,15-30)" required>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageRemover.submit}"></button>
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index c9ef7c6b..5446ff92 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{rotate.title}, header=#{rotate.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -19,25 +19,25 @@
                 <input type="hidden" id="angleInput" name="angle" value="0">
 
                 <div id="editSection" style="display: none">
-                    <div class="previewContainer">
-                        <img id="pdf-preview">
-                    </div>
+                  <div id="previewContainer">
+                    <!-- pdf-preview -->
+                  </div>
 
-                    <div class="buttonContainer">
-                      <button type="button" class="btn btn-secondary" onclick="rotate(-90)">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
-                            <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
-                          </svg>
-                      </button>
-                      <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{rotate.submit}"></button>
-                      <button type="button" class="btn btn-secondary" onclick="rotate(90)">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
-                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
-                          </svg>
-                      </button>
-                    </div>
+                  <div class="buttonContainer">
+                    <button type="button" class="btn btn-secondary" onclick="rotate(-90)">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
+                        <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
+                      </svg>
+                    </button>
+                    <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{rotate.submit}"></button>
+                    <button type="button" class="btn btn-secondary" onclick="rotate(90)">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+                        <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
               </form>
             </div>
@@ -49,7 +49,8 @@
     <script>
       const angleInput = document.getElementById("angleInput");
       const fileInput = document.getElementById("fileInput-input");
-      const preview = document.getElementById("pdf-preview");
+      const previewContainer = document.getElementById("previewContainer");
+      // const preview = document.getElementById("pdf-preview");
       fileInput.addEventListener("change", async function() {
         console.log("loading pdf");
 
@@ -78,21 +79,24 @@
         };
 
         await page.render(renderContext).promise;
+        const  preview = document.createElement("img");
+        preview.id = "pdf-preview";
+        preview.alt = "preview";
         preview.src = canvas.toDataURL();
+        previewContainer.appendChild(preview);
       });
 
       function rotate(deg) {
+        const preview = document.getElementById("pdf-preview");
         var lastTransform = preview.style.rotate;
         if (!lastTransform) {
           lastTransform = "0";
         }
         const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
         const newAngle = lastAngle + deg;
-
         preview.style.rotate = newAngle + "deg";
         angleInput.value = newAngle;
       }
     </script>
-</body>
-
-</html>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/scale-pages.html b/src/main/resources/templates/scale-pages.html
index 163e0de8..ede08025 100644
--- a/src/main/resources/templates/scale-pages.html
+++ b/src/main/resources/templates/scale-pages.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{scalePages.title}, header=#{scalePages.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -17,21 +17,21 @@
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="pageSize" th:text="#{scalePages.pageSize}"></label>
-                  <select id="pageSize" name="pageSize" required>
-                      <option value="A0">A0</option>
-                      <option value="A1">A1</option>
-                      <option value="A2">A2</option>
-                      <option value="A3">A3</option>
-                      <option value="A4" selected>A4</option>
-                      <option value="A5">A5</option>
-                      <option value="A6">A6</option>
-                      <option value="LETTER">Letter</option>
-                      <option value="LEGAL">Legal</option>
+                  <select id="pageSize" name="pageSize">
+                    <option value="A0">A0</option>
+                    <option value="A1">A1</option>
+                    <option value="A2">A2</option>
+                    <option value="A3">A3</option>
+                    <option value="A4" selected>A4</option>
+                    <option value="A5">A5</option>
+                    <option value="A6">A6</option>
+                    <option value="LETTER">Letter</option>
+                    <option value="LEGAL">Legal</option>
                   </select>
                 </div>
                 <div class="mb-3">
                   <label for="scaleFactor" th:text="#{scalePages.scaleFactor}"></label>
-                    <input type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
+                  <input type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{scalePages.submit}"></button>
               </form>
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index bb020d75..015cee5c 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{addPassword.title}, header=#{addPassword.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -82,4 +82,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index b7fdc949..1195f2c4 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{watermark.title}, header=#{watermark.header})}"></th:block>
   </head>
@@ -8,130 +8,130 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
-                <h2 th:text="#{watermark.header}"></h2>
+              <h2 th:text="#{watermark.header}"></h2>
 
-                <form method="post" enctype="multipart/form-data" action="api/v1/security/add-watermark">
-                    <div class="mb-3">
-                        <label th:text="#{watermark.selectText.1}"></label>
-                        <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
-                            <input type="file" id="fileInput" name="fileInput" class="form-control-file" accept="application/pdf" required />
-                        </div>
-                    </div>
+              <form method="post" enctype="multipart/form-data" action="api/v1/security/add-watermark">
+                <div class="mb-3">
+                  <label th:text="#{watermark.selectText.1}"></label>
+                  <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+                    <input type="file" id="fileInput" name="fileInput" class="form-control-file" accept="application/pdf" required>
+                  </div>
+                </div>
 
-                    <div class="mb-3">
-                        <label th:text="#{watermark.selectText.8}"></label>
-                        <select class="form-control" id="watermarkType" name="watermarkType" onchange="toggleFileOption()">
-                            <option value="text">Text</option>
-                            <option value="image">Image</option>
-                        </select>
-                    </div>
-                    <div id="alphabetGroup" class="mb-3">
-                      <label for="fontSize" th:text="#{alphabet} + ':'"></label>
-                      <select class="form-control" name="alphabet" id="alphabet-select">
-                          <option value="roman">Roman</option>
-                          <option value="arabic">العربية</option>
-                          <option value="japanese">日本語</option>
-                          <option value="korean">한국어</option>
-                          <option value="chinese">简体中文</option>
-                      </select>
-                    </div>
-                    <div id="watermarkTextGroup" class="mb-3">
-                        <label for="watermarkText" th:text="#{watermark.selectText.2}"></label>
-                        <input type="text" id="watermarkText" name="watermarkText" class="form-control" placeholder="Stirling-PDF" required />
-                    </div>
+                <div class="mb-3">
+                  <label th:text="#{watermark.selectText.8}"></label>
+                  <select class="form-control" id="watermarkType" name="watermarkType" onchange="toggleFileOption()">
+                    <option value="text">Text</option>
+                    <option value="image">Image</option>
+                  </select>
+                </div>
+                <div id="alphabetGroup" class="mb-3">
+                  <label for="fontSize" th:text="#{alphabet} + ':'"></label>
+                  <select class="form-control" name="alphabet" id="alphabet-select">
+                    <option value="roman">Roman</option>
+                    <option value="arabic">العربية</option>
+                    <option value="japanese">日本語</option>
+                    <option value="korean">한국어</option>
+                    <option value="chinese">简体中文</option>
+                  </select>
+                </div>
+                <div id="watermarkTextGroup" class="mb-3">
+                  <label for="watermarkText" th:text="#{watermark.selectText.2}"></label>
+                  <input type="text" id="watermarkText" name="watermarkText" class="form-control" placeholder="Stirling-PDF" required>
+                </div>
 
-                    <div id="watermarkImageGroup" class="mb-3" style="display: none;">
-                        <label for="watermarkImage" th:text="#{watermark.selectText.9}"></label>
-                        <input type="file" id="watermarkImage" name="watermarkImage" class="form-control-file" accept="image/*" />
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="fontSize" th:text="#{watermark.selectText.3}"></label>
-                        <input type="text" id="fontSize" name="fontSize" class="form-control" value="30" />
-                    </div>
-                    <div class="mb-3">
-                      <label for="opacity" th:text="#{watermark.selectText.7}"></label>
-                      <input type="text" id="opacity" name="opacityText" class="form-control" value="50" onblur="updateOpacityValue()" />
-                      <input type="hidden" id="opacityReal" name="opacity" value="0.5">
-                    </div>
-                    <script>
-                      const opacityInput = document.getElementById('opacity');
-                      const opacityRealInput = document.getElementById('opacityReal');
-
-                      const updateOpacityValue = () => {
-                        let percentageValue = parseFloat(opacityInput.value.replace('%', ''));
-                        if (isNaN(percentageValue)) {
-                          percentageValue = 0;
-                        }
-                        percentageValue = Math.min(Math.max(percentageValue, 0), 100);
-                        opacityInput.value = `${percentageValue}`;
-                        opacityRealInput.value = (percentageValue / 100).toFixed(2);
-                      };
-
-                      const appendPercentageSymbol = () => {
-                        if (!opacityInput.value.endsWith('%')) {
-                          opacityInput.value += '%';
-                        }
-                      };
-
-                      opacityInput.addEventListener('focus', () => {
-                        opacityInput.value = opacityInput.value.replace('%', '');
-                      });
-                      opacityInput.addEventListener('blur', () => {
-                        updateOpacityValue();
-                        appendPercentageSymbol();
-                      });
-
-                      // Set initial values
-                      updateOpacityValue();
-                      appendPercentageSymbol();
-                    </script>
-
-                    <div class="mb-3">
-                      <label for="rotation" th:text="#{watermark.selectText.4}"></label>
-                      <input type="text" id="rotation" name="rotation" class="form-control" value="45" />
-                    </div>
-                    <div class="mb-3">
-                      <label for="widthSpacer" th:text="#{watermark.selectText.5}"></label>
-                      <input type="text" id="widthSpacer" name="widthSpacer" class="form-control" value="50" />
-                    </div>
-                    <div class="mb-3">
-                      <label for="heightSpacer" th:text="#{watermark.selectText.6}"></label>
-                      <input type="text" id="heightSpacer" name="heightSpacer" class="form-control" value="50" />
-                    </div>
-                    <div class="mb-3 text-center">
-                      <input type="submit" id="submitBtn" th:value="#{watermark.submit}" class="btn btn-primary" />
-                    </div>
-                </form>
+                <div id="watermarkImageGroup" class="mb-3" style="display: none;">
+                  <label for="watermarkImage" th:text="#{watermark.selectText.9}"></label>
+                  <input type="file" id="watermarkImage" name="watermarkImage" class="form-control-file" accept="image/*">
+                </div>
 
+                <div class="mb-3">
+                  <label for="fontSize" th:text="#{watermark.selectText.3}"></label>
+                  <input type="text" id="fontSize" name="fontSize" class="form-control" value="30">
+                </div>
+                <div class="mb-3">
+                  <label for="opacity" th:text="#{watermark.selectText.7}"></label>
+                  <input type="text" id="opacity" name="opacityText" class="form-control" value="50" onblur="updateOpacityValue()">
+                  <input type="hidden" id="opacityReal" name="opacity" value="0.5">
+                </div>
                 <script>
-                  function toggleFileOption() {
-                    const watermarkType = document.getElementById('watermarkType').value;
-                    const watermarkTextGroup = document.getElementById('watermarkTextGroup');
-                    const watermarkImageGroup = document.getElementById('watermarkImageGroup');
-                    const alphabetGroup = document.getElementById('alphabetGroup'); // This is the new addition
-                    const watermarkText = document.getElementById('watermarkText');
-                    const watermarkImage = document.getElementById('watermarkImage');
+                  const opacityInput = document.getElementById('opacity');
+                  const opacityRealInput = document.getElementById('opacityReal');
 
-                    if (watermarkType === 'text') {
-                      watermarkTextGroup.style.display = 'block';
-                      watermarkText.required = true;
-                      watermarkImageGroup.style.display = 'none';
-                      watermarkImage.required = false;
-                      alphabetGroup.style.display = 'block';
-                    } else if (watermarkType === 'image') {
-                      watermarkTextGroup.style.display = 'none';
-                      watermarkText.required = false;
-                      watermarkImageGroup.style.display = 'block';
-                      watermarkImage.required = true;
-                      alphabetGroup.style.display = 'none';
+                  const updateOpacityValue = () => {
+                    let percentageValue = parseFloat(opacityInput.value.replace('%', ''));
+                    if (isNaN(percentageValue)) {
+                      percentageValue = 0;
                     }
-                  }
+                    percentageValue = Math.min(Math.max(percentageValue, 0), 100);
+                    opacityInput.value = `${percentageValue}`;
+                    opacityRealInput.value = (percentageValue / 100).toFixed(2);
+                  };
+
+                  const appendPercentageSymbol = () => {
+                    if (!opacityInput.value.endsWith('%')) {
+                      opacityInput.value += '%';
+                    }
+                  };
+
+                  opacityInput.addEventListener('focus', () => {
+                    opacityInput.value = opacityInput.value.replace('%', '');
+                  });
+                  opacityInput.addEventListener('blur', () => {
+                    updateOpacityValue();
+                    appendPercentageSymbol();
+                  });
+
+                  // Set initial values
+                  updateOpacityValue();
+                  appendPercentageSymbol();
                 </script>
+
+                <div class="mb-3">
+                  <label for="rotation" th:text="#{watermark.selectText.4}"></label>
+                  <input type="text" id="rotation" name="rotation" class="form-control" value="45">
+                </div>
+                <div class="mb-3">
+                  <label for="widthSpacer" th:text="#{watermark.selectText.5}"></label>
+                  <input type="text" id="widthSpacer" name="widthSpacer" class="form-control" value="50">
+                </div>
+                <div class="mb-3">
+                  <label for="heightSpacer" th:text="#{watermark.selectText.6}"></label>
+                  <input type="text" id="heightSpacer" name="heightSpacer" class="form-control" value="50">
+                </div>
+                <div class="mb-3 text-center">
+                  <input type="submit" id="submitBtn" th:value="#{watermark.submit}" class="btn btn-primary">
+                </div>
+              </form>
+
+              <script>
+                function toggleFileOption() {
+                  const watermarkType = document.getElementById('watermarkType').value;
+                  const watermarkTextGroup = document.getElementById('watermarkTextGroup');
+                  const watermarkImageGroup = document.getElementById('watermarkImageGroup');
+                  const alphabetGroup = document.getElementById('alphabetGroup'); // This is the new addition
+                  const watermarkText = document.getElementById('watermarkText');
+                  const watermarkImage = document.getElementById('watermarkImage');
+
+                  if (watermarkType === 'text') {
+                    watermarkTextGroup.style.display = 'block';
+                    watermarkText.required = true;
+                    watermarkImageGroup.style.display = 'none';
+                    watermarkImage.required = false;
+                    alphabetGroup.style.display = 'block';
+                  } else if (watermarkType === 'image') {
+                    watermarkTextGroup.style.display = 'none';
+                    watermarkText.required = false;
+                    watermarkImageGroup.style.display = 'block';
+                    watermarkImage.required = true;
+                    alphabetGroup.style.display = 'none';
+                  }
+                }
+              </script>
             </div>
           </div>
         </div>
@@ -139,4 +139,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/auto-redact.html b/src/main/resources/templates/security/auto-redact.html
index bd927964..d13fcb88 100644
--- a/src/main/resources/templates/security/auto-redact.html
+++ b/src/main/resources/templates/security/auto-redact.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{autoRedact.title}, header=#{autoRedact.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -52,23 +52,23 @@
                   }
                 </script>
                 <div class="mb-3 form-check">
-                    <input type="checkbox" class="form-check-input" id="useRegex" name="useRegex">
-                    <label class="form-check-label" for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
+                  <input type="checkbox" class="form-check-input" id="useRegex" name="useRegex">
+                  <label class="form-check-label" for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
                 </div>
 
                 <div class="mb-3 form-check">
-                    <input type="checkbox" class="form-check-input" id="wholeWordSearch" name="wholeWordSearch">
-                    <label class="form-check-label" for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
+                  <input type="checkbox" class="form-check-input" id="wholeWordSearch" name="wholeWordSearch">
+                  <label class="form-check-label" for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
                 </div>
 
                 <div class="mb-3">
-                    <label for="customPadding" class="form-label" th:text="#{autoRedact.customPaddingLabel}"></label>
-                    <input type="number" step="0.1" class="form-control" id="customPadding" name="customPadding" value="0.1">
+                  <label for="customPadding" class="form-label" th:text="#{autoRedact.customPaddingLabel}"></label>
+                  <input type="number" step="0.1" class="form-control" id="customPadding" name="customPadding" value="0.1">
                 </div>
 
                 <div class="mb-3 form-check">
-                    <input type="checkbox" class="form-check-input" id="convertPDFToImage" name="convertPDFToImage" checked>
-                    <label class="form-check-label" for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
+                  <input type="checkbox" class="form-check-input" id="convertPDFToImage" name="convertPDFToImage" checked>
+                  <label class="form-check-label" for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
                 </div>
 
                 <button type="submit" class="btn btn-primary" th:text="#{autoRedact.submitButton}"></button>
@@ -80,4 +80,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/cert-sign.html b/src/main/resources/templates/security/cert-sign.html
index c4a34463..0f369c27 100644
--- a/src/main/resources/templates/security/cert-sign.html
+++ b/src/main/resources/templates/security/cert-sign.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{certSign.title}, header=#{certSign.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -23,7 +23,8 @@
                   <label th:text="#{certSign.jksNote}"></label>
                 </div>
                 <div class="mb-3">
-                  <label for="certType" th:text="#{certSign.certType}"></label> <select class="form-control" id="certType" name="certType">
+                  <label for="certType" th:text="#{certSign.certType}"></label>
+                  <select class="form-control" id="certType" name="certType">
                     <option value="" th:text="#{selectFillter}"></option>
                     <option value="PEM">PEM</option>
                     <option value="PKCS12">PKCS12</option>
@@ -49,10 +50,12 @@
                   <div th:replace="~{fragments/common :: fileSelector(name='jksFile', notRequired=true, multiple=false, accept='.jks,.keystore')}"></div>
                 </div>
                 <div class="mb-3">
-                  <label th:text="#{certSign.password}"></label> <input type="password" class="form-control" id="password" name="password">
+                  <label th:text="#{certSign.password}" for="password"></label>
+                  <input type="password" class="form-control" id="password" name="password">
                 </div>
                 <div class="mb-3">
-                  <label><input type="checkbox" id="showSignature" name="showSignature" th:text="#{certSign.showSig}"></label>
+                  <input type="checkbox" id="showSignature" name="showSignature">
+                  <label th:text="#{certSign.showSig}" for="showSignature"></label>
                 </div>
                 <div id="signatureDetails" style="display: none;">
                   <div class="mb-3">
@@ -78,20 +81,20 @@
       </div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-    <script type="text/javascript">
+    <script>
       document.getElementById('certType').addEventListener('change', function() {
-          var pemGroup = document.getElementById('pemGroup');
-          var p12Group = document.getElementById('p12Group');
-          var jksGroup = document.getElementById('jksGroup');
-          var valueToGroupMap = {
-            'PEM': pemGroup,
-            'PKCS12': p12Group,
-            'JKS': jksGroup
-          };
-          for (var key in valueToGroupMap) {
-            valueToGroupMap[key].style.display = (this.value === key) ? 'block' : 'none';
-          }
-        });
+        var pemGroup = document.getElementById('pemGroup');
+        var p12Group = document.getElementById('p12Group');
+        var jksGroup = document.getElementById('jksGroup');
+        var valueToGroupMap = {
+          'PEM': pemGroup,
+          'PKCS12': p12Group,
+          'JKS': jksGroup
+        };
+        for (var key in valueToGroupMap) {
+          valueToGroupMap[key].style.display = (this.value === key) ? 'block' : 'none';
+        }
+      });
 
       document.getElementById('showSignature').addEventListener('change', function() {
         var signatureDetails = document.getElementById('signatureDetails');
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index c91dcae2..58a5350c 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{permissions.title}, header=#{permissions.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -66,4 +66,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/get-info-on-pdf.html b/src/main/resources/templates/security/get-info-on-pdf.html
index cb8c4af2..ff7106ed 100644
--- a/src/main/resources/templates/security/get-info-on-pdf.html
+++ b/src/main/resources/templates/security/get-info-on-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{getPdfInfo.title}, header=#{getPdfInfo.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index 27d09b20..b77f0690 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{removePassword.title}, header=#{removePassword.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -34,4 +34,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/remove-watermark.html b/src/main/resources/templates/security/remove-watermark.html
index 8359a27d..01d89be5 100644
--- a/src/main/resources/templates/security/remove-watermark.html
+++ b/src/main/resources/templates/security/remove-watermark.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{remove-watermark.title}, header=#{remove-watermark.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -33,4 +33,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/sanitize-pdf.html b/src/main/resources/templates/security/sanitize-pdf.html
index a23bc821..da1dc3c4 100644
--- a/src/main/resources/templates/security/sanitize-pdf.html
+++ b/src/main/resources/templates/security/sanitize-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{sanitizePDF.title}, header=#{sanitizePDF.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -49,4 +49,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 5097fc88..25f7bb04 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{sign.title}, header=#{sign.header})}"></th:block>
     <link rel="stylesheet" href="css/sign.css">
@@ -26,7 +26,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -69,7 +69,7 @@
                           var reader = new FileReader();
                           reader.readAsDataURL(imageFile);
                           reader.onloadend = function (e) {
-                              DraggableUtils.createDraggableCanvasFromUrl(e.target.result);
+                            DraggableUtils.createDraggableCanvasFromUrl(e.target.result);
                           };
                         }
                       });
@@ -162,10 +162,7 @@
                     <textarea class="form-control" id="sigText" name="sigText" rows="3"></textarea>
                     <label th:text="#{font}"></label>
                     <select class="form-control" name="font" id="font-select">
-                      <option th:each="font : ${fonts}"
-                              th:value="${font.name}"
-                              th:text="${font.name}"
-                              th:class="${font.name.toLowerCase()+'-font'}">
+                      <option th:each="font : ${fonts}" th:value="${font.name}" th:text="${font.name}" th:class="${font.name.toLowerCase()+'-font'}">
                       </option>
                     </select>
                     <div class="margin-auto-parent">
@@ -237,12 +234,12 @@
                       <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
                     </svg>
                   </button>
-                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
+                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                     </svg>
                   </button>
-                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
+                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                     </svg>
@@ -252,7 +249,7 @@
 
               <!-- download button -->
               <div class="margin-auto-parent">
-                  <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
+                <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
               </div>
 
               <script>
diff --git a/src/main/resources/templates/split-by-size-or-count.html b/src/main/resources/templates/split-by-size-or-count.html
index 8c3ab82d..a6bf13e0 100644
--- a/src/main/resources/templates/split-by-size-or-count.html
+++ b/src/main/resources/templates/split-by-size-or-count.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{split-by-size-or-count.title}, header=#{split-by-size-or-count.header})}"></th:block>
   </head>
@@ -9,7 +9,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -35,4 +35,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/split-pdf-by-sections.html b/src/main/resources/templates/split-pdf-by-sections.html
index e3c65b9f..9fb0eae4 100644
--- a/src/main/resources/templates/split-pdf-by-sections.html
+++ b/src/main/resources/templates/split-pdf-by-sections.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{split-by-sections.title}, header=#{split-by-sections.header})}"></th:block>
     <link rel="stylesheet" href="css/split-pdf-by-sections.css">
@@ -10,68 +10,69 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
               <h2 th:text="#{split-by-sections.header}"></h2>
-                <form method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/split-pdf-by-sections}">
-                  <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                  <label for="horizontalDivisions" th:text="#{split-by-sections.horizontal.label}">Horizontal Divisions</label>
-                  <input type="number" id="horizontalDivisions" name="horizontalDivisions" class="form-control" min="0" max="300" value="0" required th:placeholder="#{split-by-sections.horizontal.placeholder}">
-                  <br>
-                  <label for="verticalDivisions" th:text="#{split-by-sections.vertical.label}">Vertical Divisions</label>
-                  <input type="number" id="verticalDivisions" name="verticalDivisions" class="form-control" min="0" max="300" required value="1" th:placeholder="#{split-by-sections.vertical.placeholder}">
-                  <br>
-                  <label for="verticalDivisions" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
-                  <input type="checkbox" id="merge" name="merge" th:placeholder="#{split-by-sections.merge}">
-                  <br>
-                  <div id="pdfVisualAid" class="pdf-visual-aid"></div>
-                  <script>
-                    function updateVisualAid() {
-                      const horizontalDivisions = document.getElementById('horizontalDivisions').value;
-                      const verticalDivisions = document.getElementById('verticalDivisions').value;
-                      const aid = document.getElementById('pdfVisualAid');
+              <form method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/split-pdf-by-sections}">
+                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
+                <label for="horizontalDivisions" th:text="#{split-by-sections.horizontal.label}">Horizontal Divisions</label>
+                <input type="number" id="horizontalDivisions" name="horizontalDivisions" class="form-control" min="0" max="300" value="0" required th:placeholder="#{split-by-sections.horizontal.placeholder}">
+                <br>
+                <label for="verticalDivisions" th:text="#{split-by-sections.vertical.label}">Vertical Divisions</label>
+                <input type="number" id="verticalDivisions" name="verticalDivisions" class="form-control" min="0" max="300" required value="1" th:placeholder="#{split-by-sections.vertical.placeholder}">
+                <br>
+                <label for="merge" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
+                <input type="checkbox" id="merge" name="merge">
+                <br>
+                <div id="pdfVisualAid" class="pdf-visual-aid"></div>
+                <script>
+                  function updateVisualAid() {
+                    const horizontalDivisions = document.getElementById('horizontalDivisions').value;
+                    const verticalDivisions = document.getElementById('verticalDivisions').value;
+                    const aid = document.getElementById('pdfVisualAid');
 
-                      if(horizontalDivisions > 300)
-                        horizontalDivisions = 300
-                        if(verticalDivisions > 300)
-                          verticalDivisions = 300
-                      // Clear existing lines
-                      aid.innerHTML = '';
+                    if(horizontalDivisions > 300) {
+                      horizontalDivisions = 300
+                    }
+                    if(verticalDivisions > 300) {
+                      verticalDivisions = 300
+                    }
+                    // Clear existing lines
+                    aid.innerHTML = '';
 
-                      // Add horizontal lines
-                      for (let i = 0; i < horizontalDivisions; i++) {
-                        const line = document.createElement('div');
-                        line.classList.add('line');
-                        line.style.width = '100%';
-                        line.style.height = '1px';
-                        line.style.top = `${((i + 1) / (parseInt(horizontalDivisions) + 1)) * 100}%`;
-                        aid.appendChild(line);
-                      }
-
-                      // Add vertical lines
-                      for (let i = 0; i < verticalDivisions; i++) {
-                        const line = document.createElement('div');
-                        line.classList.add('line');
-                        line.style.height = '100%';
-                        line.style.width = '1px';
-                        line.style.left = `${((i + 1) / (parseInt(verticalDivisions) + 1)) * 100}%`;
-                        aid.appendChild(line);
-                      }
+                    // Add horizontal lines
+                    for (let i = 0; i < horizontalDivisions; i++) {
+                      const line = document.createElement('div');
+                      line.classList.add('line');
+                      line.style.width = '100%';
+                      line.style.height = '1px';
+                      line.style.top = `${((i + 1) / (parseInt(horizontalDivisions) + 1)) * 100}%`;
+                      aid.appendChild(line);
                     }
 
-                    // Event listeners
-                    document.getElementById('horizontalDivisions').addEventListener('input', updateVisualAid);
-                    document.getElementById('verticalDivisions').addEventListener('input', updateVisualAid);
+                    // Add vertical lines
+                    for (let i = 0; i < verticalDivisions; i++) {
+                      const line = document.createElement('div');
+                      line.classList.add('line');
+                      line.style.height = '100%';
+                      line.style.width = '1px';
+                      line.style.left = `${((i + 1) / (parseInt(verticalDivisions) + 1)) * 100}%`;
+                      aid.appendChild(line);
+                    }
+                  }
 
-                    // Initial draw
-                    updateVisualAid();
-                  </script>
-                  <br>
-                  <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{split-by-sections.submit}">Submit</button>
-                </form>
-              </div>
+                  // Event listeners
+                  document.getElementById('horizontalDivisions').addEventListener('input', updateVisualAid);
+                  document.getElementById('verticalDivisions').addEventListener('input', updateVisualAid);
+
+                  // Initial draw
+                  updateVisualAid();
+                </script>
+                <br>
+                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{split-by-sections.submit}">Submit</button>
+              </form>
             </div>
           </div>
         </div>
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index ce87d5f7..7ed934dd 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{split.title}, header=#{split.header})}"></th:block>
   </head>
@@ -8,7 +8,7 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-6">
@@ -26,7 +26,7 @@
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
 
                 <div class="mb-3">
-                  <label for="pages" th:text="#{split.splitPages}"></label>
+                  <label for="pageNumbers" th:text="#{split.splitPages}"></label>
                   <input type="text" class="form-control" id="pageNumbers" name="pageNumbers" placeholder="1,3,5-10" required>
                 </div>
                 <br>
@@ -39,4 +39,4 @@
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file