From 7c26c56210ef09691c9de897029f4cd6bb94e571 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Sun, 20 Aug 2023 21:57:19 +0100
Subject: [PATCH] test

---
 src/main/resources/static/css/home.css        |  2 +-
 .../resources/static/js/draggable-utils.js    | 20 ++---
 src/main/resources/static/js/fileInput.js     |  6 +-
 src/main/resources/static/js/homecard.js      |  2 +-
 .../resources/static/js/languageSelection.js  | 53 +++++++------
 src/main/resources/static/js/pipeline.js      |  2 +-
 src/main/resources/static/js/search.js        |  2 +-
 src/main/resources/templates/account.html     | 18 ++---
 src/main/resources/templates/addUsers.html    |  6 +-
 .../resources/templates/auto-split-pdf.html   |  2 +-
 .../templates/convert/img-to-pdf.html         |  8 +-
 .../templates/convert/pdf-to-img.html         |  8 +-
 .../convert/pdf-to-presentation.html          |  2 +-
 .../templates/convert/pdf-to-text.html        |  2 +-
 .../templates/convert/pdf-to-word.html        |  2 +-
 .../resources/templates/extract-page.html     |  2 +-
 .../resources/templates/fragments/card.html   |  4 +-
 .../resources/templates/fragments/common.html | 33 ++++----
 .../templates/fragments/errorBanner.html      |  2 +-
 .../fragments/errorBannerPerPage.html         |  6 +-
 .../templates/fragments/langAndDarkMode.html  | 75 +++++++++++++++++++
 .../resources/templates/fragments/navbar.html | 68 ++++++++---------
 .../templates/fragments/navbarEntry.html      |  2 +-
 src/main/resources/templates/home.html        |  2 +-
 src/main/resources/templates/login.html       | 10 +--
 src/main/resources/templates/merge-pdfs.html  |  6 +-
 .../templates/other/add-page-numbers.html     | 10 +--
 .../templates/other/change-metadata.html      | 34 ++++-----
 .../templates/other/extract-image-scans.html  | 10 +--
 .../templates/other/extract-images.html       |  2 +-
 .../templates/other/multi-page-layout.html    |  2 +-
 .../resources/templates/other/ocr-pdf.html    |  6 +-
 .../templates/other/remove-blanks.html        |  4 +-
 .../templates/other/scale-pages.html          |  4 +-
 .../resources/templates/pdf-organizer.html    |  4 +-
 src/main/resources/templates/pipeline.html    |  8 +-
 .../resources/templates/remove-pages.html     |  2 +-
 .../templates/security/add-password.html      | 12 +--
 .../templates/security/add-watermark.html     | 20 ++---
 .../templates/security/cert-sign.html         | 24 +++---
 .../security/change-permissions.html          |  6 +-
 .../templates/security/remove-password.html   |  6 +-
 .../templates/security/remove-watermark.html  |  6 +-
 .../templates/security/sanitize-pdf.html      |  4 +-
 src/main/resources/templates/split-pdfs.html  |  2 +-
 45 files changed, 297 insertions(+), 214 deletions(-)
 create mode 100644 src/main/resources/templates/fragments/langAndDarkMode.html

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 998278e1..f7549167 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -14,7 +14,7 @@
 
 .features-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
     gap: 25px 30px;
 }
 
diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js
index f90a80f1..4dadf920 100644
--- a/src/main/resources/static/js/draggable-utils.js
+++ b/src/main/resources/static/js/draggable-utils.js
@@ -13,12 +13,12 @@ const DraggableUtils = {
             listeners: {
                 move: (event) => {
                     const target = event.target;
-                    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
-                    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+                    const x = (parseFloat(target.getAttribute('data-bs-x')) || 0) + event.dx;
+                    const y = (parseFloat(target.getAttribute('data-bs-y')) || 0) + event.dy;
 
                     target.style.transform = `translate(${x}px, ${y}px)`;
-                    target.setAttribute('data-x', x);
-                    target.setAttribute('data-y', y);
+                    target.setAttribute('data-bs-x', x);
+                    target.setAttribute('data-bs-y', y);
 
                     this.onInteraction(target);
                 },
@@ -29,8 +29,8 @@ const DraggableUtils = {
     listeners: {
         move: (event) => {
             var target = event.target
-            var x = (parseFloat(target.getAttribute('data-x')) || 0)
-            var y = (parseFloat(target.getAttribute('data-y')) || 0)
+            var x = (parseFloat(target.getAttribute('data-bs-x')) || 0)
+            var y = (parseFloat(target.getAttribute('data-bs-y')) || 0)
 
             // check if control key is pressed
             if (event.ctrlKey) {
@@ -58,8 +58,8 @@ const DraggableUtils = {
 
             target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
 
-            target.setAttribute('data-x', x)
-            target.setAttribute('data-y', y)
+            target.setAttribute('data-bs-x', x)
+            target.setAttribute('data-bs-y', y)
             target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
 
             this.onInteraction(target);
@@ -86,8 +86,8 @@ const DraggableUtils = {
         const x = 0;
         const y = 20;
         createdCanvas.style.transform = `translate(${x}px, ${y}px)`;
-        createdCanvas.setAttribute('data-x', x);
-        createdCanvas.setAttribute('data-y', y);
+        createdCanvas.setAttribute('data-bs-x', x);
+        createdCanvas.setAttribute('data-bs-y', y);
 
         createdCanvas.onclick = e => this.onInteraction(e.target);
 
diff --git a/src/main/resources/static/js/fileInput.js b/src/main/resources/static/js/fileInput.js
index 7825af8b..12d50b3f 100644
--- a/src/main/resources/static/js/fileInput.js
+++ b/src/main/resources/static/js/fileInput.js
@@ -3,9 +3,9 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 function setupFileInput(chooser) {
-    const elementId = chooser.getAttribute('data-element-id');
-    const filesSelected = chooser.getAttribute('data-files-selected');
-    const pdfPrompt = chooser.getAttribute('data-pdf-prompt');
+    const elementId = chooser.getAttribute('data-bs-element-id');
+    const filesSelected = chooser.getAttribute('data-bs-files-selected');
+    const pdfPrompt = chooser.getAttribute('data-bs-pdf-prompt');
 
     let allFiles = [];
     let overlay;
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 72997a02..d0d56185 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -10,7 +10,7 @@ function filterCards() {
         
         // Get the navbar tags associated with the card
         var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
-        var navbarTags = navbarItem ? navbarItem.getAttribute('data-tags') : '';
+        var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
 
         var content = title + ' ' + text + ' ' + navbarTags;
 
diff --git a/src/main/resources/static/js/languageSelection.js b/src/main/resources/static/js/languageSelection.js
index e9d141f5..359a2be3 100644
--- a/src/main/resources/static/js/languageSelection.js
+++ b/src/main/resources/static/js/languageSelection.js
@@ -14,33 +14,40 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 function handleDropdownItemClick(event) {
-	event.preventDefault();
-	const languageCode = this.dataset.languageCode;
-	localStorage.setItem('languageCode', languageCode);
+    event.preventDefault();
+    const languageCode = event.currentTarget.dataset.bsLanguageCode;  // change this to event.currentTarget
+    if (languageCode) {
+        localStorage.setItem('languageCode', languageCode);
 
-	const currentUrl = window.location.href;
-	if (currentUrl.indexOf('?lang=') === -1) {
-		window.location.href = currentUrl + '?lang=' + languageCode;
-	} else {
-		window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
-	}
+        const currentUrl = window.location.href;
+        if (currentUrl.indexOf('?lang=') === -1) {
+            window.location.href = currentUrl + '?lang=' + languageCode;
+        } else {
+            window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
+        }
+    } else {
+        console.error("Language code is not set for this item.");  // for debugging
+    }
 }
 
-$(document).ready(function() {
-	$(".nav-item.dropdown").each(function() {
-		var $dropdownMenu = $(this).find(".dropdown-menu");
-		if ($dropdownMenu.children().length <= 2 && $dropdownMenu.children("hr.dropdown-divider").length === $dropdownMenu.children().length) {
-			$(this).prev('.nav-item.nav-item-separator').remove();
-			$(this).remove();
-		}
-	});
 
+document.addEventListener('DOMContentLoaded', function() {
+		document.querySelectorAll('.nav-item.dropdown').forEach((element) => {
+	    const dropdownMenu = element.querySelector(".dropdown-menu");
+	    if (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.remove();
+	    }
+	});
+	
 	//Sort languages by alphabet
-	var list = $('.dropdown-menu[aria-labelledby="languageDropdown"]').children("a");
+	const list = Array.from(document.querySelector('.dropdown-menu[aria-labelledby="languageDropdown"]').children).filter(child => child.matches('a'));
 	list.sort(function(a, b) {
-		var A = $(a).text().toUpperCase();
-		var B = $(b).text().toUpperCase();
-		return (A < B) ? -1 : (A > B) ? 1 : 0;
-	})
-		.appendTo('.dropdown-menu[aria-labelledby="languageDropdown"]');
+	    var A = a.textContent.toUpperCase();
+	    var B = b.textContent.toUpperCase();
+	    return (A < B) ? -1 : (A > B) ? 1 : 0;
+	}).forEach(node => document.querySelector('.dropdown-menu[aria-labelledby="languageDropdown"]').appendChild(node));
+
 });
\ No newline at end of file
diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js
index 8b2c263d..06810743 100644
--- a/src/main/resources/static/js/pipeline.js
+++ b/src/main/resources/static/js/pipeline.js
@@ -241,7 +241,7 @@ document.getElementById('addOperationBtn').addEventListener('click', function()
     		if (parameter.name === 'fileInput') return;
     
 			let parameterDiv = document.createElement('div');
-			parameterDiv.className = "form-group";
+			parameterDiv.className = "mb-3";
 
 			let parameterLabel = document.createElement('label');
 			parameterLabel.textContent = `${parameter.name} (${parameter.schema.type}): `;
diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js
index a4007206..5dd4acf5 100644
--- a/src/main/resources/static/js/search.js
+++ b/src/main/resources/static/js/search.js
@@ -43,7 +43,7 @@ document.querySelector('#navbarSearchInput').addEventListener('input', function(
         var titleElement = item.querySelector('.icon-text');
         var iconElement = item.querySelector('.icon');
         var itemHref = item.getAttribute('href');
-        var tags = item.getAttribute('data-tags') || ""; // If no tags, default to empty string
+        var tags = item.getAttribute('data-bs-tags') || ""; // If no tags, default to empty string
         
         if (titleElement && iconElement && itemHref !== '#') {
             var title = titleElement.innerText;
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index bd01c24e..5a4882e5 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
@@ -24,15 +24,15 @@
                         <!-- Change Username Form -->
                         <h4></h4>
                         <form action="/change-username" method="post">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
                                 <input type="text" class="form-control" name="newUsername" id="newUsername" placeholder="New Username">
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="currentPassword" th:text="#{password}">Password</label>
                                 <input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
                             </div>
                         </form>
@@ -42,19 +42,19 @@
                         <!-- Change Password Form -->
                         <h4 th:text="#{account.changePassword}">Change Password?</h4>
                         <form action="/change-password" method="post">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
                                 <input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword"  th:placeholder="#{account.oldPassword}">
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
                                 <input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{account.newPassword}">
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
                                 <input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword" th:placeholder="#{account.confirmNewPassword}">
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
                             </div>
                         </form>
@@ -286,7 +286,7 @@
 	                    
                         
                         
-                        <div class="form-group mt-4">
+                        <div class="mb-3 mt-4">
                             <a href="/logout">
                                 <button type="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</button>
                             </a>
diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html
index fe37e71c..c590988a 100644
--- a/src/main/resources/templates/addUsers.html
+++ b/src/main/resources/templates/addUsers.html
@@ -41,15 +41,15 @@
 
 						<h2 th:text="#{adminUserSettings.addUser}">Add New User</h2>
 					    <form action="/admin/saveUser" method="post">
-					        <div class="form-group">
+					        <div class="mb-3">
 					            <label for="username" th:text="#{username}">Username</label>
 					            <input type="text" class="form-control" name="username" required>
 					        </div>
-					        <div class="form-group">
+					        <div class="mb-3">
 					            <label for="password" th:text="#{password}">Password</label>
 					            <input type="password" class="form-control" name="password" required>
 					        </div>
-					        <div class="form-group">
+					        <div class="mb-3">
 						        <label for="role" th:text="#{adminUserSettings.role}">Role</label>
 						        <select name="role" class="form-control" required>
 						            <option value="ROLE_ADMIN"  th:text="#{adminUserSettings.admin}">Admin</option>
diff --git a/src/main/resources/templates/auto-split-pdf.html b/src/main/resources/templates/auto-split-pdf.html
index d6f68fe1..cd2596e5 100644
--- a/src/main/resources/templates/auto-split-pdf.html
+++ b/src/main/resources/templates/auto-split-pdf.html
@@ -27,7 +27,7 @@
 						    <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
 						    <div class="form-check">
                                 <input type="checkbox" class="form-check-input" name="duplexMode" id="duplexMode"> 
-                                <label class="ml-3" for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
+                                <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>
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index 3182eb9d..78da1934 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -23,13 +23,13 @@
 
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" name="stretchToFit" id="stretchToFit"> 
-                                <label class="ml-3" for="stretchToFit" th:text=#{imageToPDF.selectText.1}></label>
+                                <label class="ms-3" for="stretchToFit" th:text=#{imageToPDF.selectText.1}></label>
                             </div>
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" name="autoRotate" id="autoRotate"> 
-                                <label class="ml-3" for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
+                                <label class="ms-3" for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{pdfToImage.colorType}"></label> 
                                 <select class="form-control" id="colorType" name="colorType">
                                     <option value="color" th:text="#{pdfToImage.color}"></option>
@@ -39,7 +39,7 @@
                             </div>
                             <br>
                             <input type="hidden" id="override" name="override" value="multi">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text=#{imageToPDF.selectText.3}></label> 
                                 <select class="form-control" id="conversionType" name="conversionType" disabled>
                                     <option value="merge" th:text=#{imageToPDF.selectText.4}></option>
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index 6e1597f5..443334f4 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -18,7 +18,7 @@
                         <p th:text="#{processTimeWarning}"></p>
                         <form method="post" enctype="multipart/form-data" th:action="@{pdf-to-img}">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{pdfToImage.selectText}"></label> 
                                 <select class="form-control" name="imageFormat">
                                     <option value="png">PNG</option>
@@ -26,14 +26,14 @@
                                     <option value="gif">GIF</option>
                                 </select>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{pdfToImage.singleOrMultiple}"></label> 
                                 <select class="form-control" name="singleOrMultiple">
                                     <option value="single" th:text="#{pdfToImage.single}"></option>
                                     <option value="multiple" th:text="#{pdfToImage.multi}"></option>
                                 </select>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{pdfToImage.colorType}"></label> 
                                 <select class="form-control" name="colorType">
                                     <option value="color" th:text="#{pdfToImage.color}"></option>
@@ -41,7 +41,7 @@
                                     <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
                                 </select>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="dpi">DPI:</label> 
                                 <input type="number" name="dpi" class="form-control" id="dpi" min="1" step="1" value="300" required>
                             </div>
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index f5f73397..4c784017 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -15,7 +15,7 @@
                         <form method="post" enctype="multipart/form-data" th:action="@{pdf-to-presentation}">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{PDFToPresentation.selectText.1}"></label> 
                                 <select class="form-control" name="outputFormat">
                                     <option value="ppt">PPT</option>
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html
index b89bb66c..a31dad74 100644
--- a/src/main/resources/templates/convert/pdf-to-text.html
+++ b/src/main/resources/templates/convert/pdf-to-text.html
@@ -15,7 +15,7 @@
                         <form method="post" enctype="multipart/form-data" th:action="@{pdf-to-text}">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{PDFToText.selectText.1}"></label> 
                                 <select class="form-control" name="outputFormat">
                                     <option value="rtf">RTF</option>
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index c183d1bc..a10ca12f 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -15,7 +15,7 @@
                         <form method="post" enctype="multipart/form-data" th:action="@{pdf-to-word}">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{PDFToWord.selectText.1}"></label> 
                                 <select class="form-control" name="outputFormat">
                                     <option value="doc">Doc</option>
diff --git a/src/main/resources/templates/extract-page.html b/src/main/resources/templates/extract-page.html
index 9dd1b9ed..06900be2 100644
--- a/src/main/resources/templates/extract-page.html
+++ b/src/main/resources/templates/extract-page.html
@@ -16,7 +16,7 @@
                         <form th:action="@{rearrange-pages}" method="post" enctype="multipart/form-data">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             <input type="hidden" id="customMode" name="customMode" value="">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="pageOrder" th:text="#{pageOrderPrompt}"></label> 
                                 <input type="text" class="form-control" id="pageOrder" name="pageOrder" placeholder="(e.g. 1,2,8 or 4,7,12-16 or 2n-1)" required>
                             </div>
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index 48142b03..c3583da6 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,8 +1,8 @@
-<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" data-tags="${tags}">
+<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" 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">
-            <h5 class="card-title  ml-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ml-2) for spacing between SVG and title -->
+            <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>
     </a>
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 74536458..7c6b785d 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -32,10 +32,11 @@
 <script src="js/thirdParty/jszip.min.js"></script>
 
 <!-- Bootstrap -->
-<script src="js/thirdParty/popper.min.js"></script>
-<script src="js/thirdParty/bootstrap.min.js"></script>
-<link rel="stylesheet" href="css/bootstrap.min.css">
-<link rel="stylesheet" href="css/bootstrap-icons.css">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+
+
 
 <!-- PDF.js -->
 <script src="pdfjs/pdf.js"></script>
@@ -57,7 +58,7 @@
 </head>
 
 <th:block th:fragment="game">
-    <dialog id="game-container-wrapper" class="game-container-wrapper" data-modal>
+    <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
         <script>
             console.log("loaded game")
             $(document).ready(function() {
@@ -116,20 +117,20 @@
 	</script>
     <script src="js/downloader.js"></script>
 
-    <div class="custom-file-chooser" th:attr="data-unique-id=${name}, 
-              data-element-id=${name+'-input'}, 
-              data-files-selected=#{filesSelected}, 
-              data-pdf-prompt=#{pdfPrompt}">
-        <div class="custom-file">
-            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
-            <label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
-        </div>
-        <div class="selected-files"></div>
-    </div>
+    <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:classappend="${notRequired ? '' : 'required'}">
+	    </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="sr-only">Loading...</span>
+                <span class="visually-hidden">Loading...</span>
             </div>
         </div>
     </div>
diff --git a/src/main/resources/templates/fragments/errorBanner.html b/src/main/resources/templates/fragments/errorBanner.html
index 98fd9aeb..1d2153ab 100644
--- a/src/main/resources/templates/fragments/errorBanner.html
+++ b/src/main/resources/templates/fragments/errorBanner.html
@@ -24,7 +24,7 @@
     <p th:text="${message} + ' for path: ' + ${path}"></p>
     <button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()">Show Stack Trace</button>
     <button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()">Copy Stack Trace</button>
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="dismissError()">
+    <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
       <span aria-hidden="true">&times;</span>
     </button>
     <!-- Stack trace section -->
diff --git a/src/main/resources/templates/fragments/errorBannerPerPage.html b/src/main/resources/templates/fragments/errorBannerPerPage.html
index e1365513..ccc2f7b4 100644
--- a/src/main/resources/templates/fragments/errorBannerPerPage.html
+++ b/src/main/resources/templates/fragments/errorBannerPerPage.html
@@ -7,7 +7,7 @@
   <button type="button" class="btn btn-danger" onclick="toggletrace()">Show Stack Trace</button>
   <button type="button" class="btn btn-secondary" onclick="copytrace()">Copy Stack Trace</button>
   <button type="button" class="btn btn-info" onclick="showHelp()">Help</button>
-  <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="dismissError()">
+  <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
     <span aria-hidden="true">&times;</span>
   </button>
   <!-- Stack trace section -->
@@ -29,7 +29,7 @@
 	    <div class="modal-content">
 	      <div class="modal-header">
 	        <h5 class="modal-title" id="helpModalLabel">Help</h5>
-	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
 	          <span aria-hidden="true">&times;</span>
 	        </button>
 	      </div>
@@ -47,7 +47,7 @@
 	              <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-dismiss="modal" id="home-button">Close</a>
+	            <a data-bs-dismiss="modal" id="home-button">Close</a>
 	          </div>
 	        </div>
 	      </div>
diff --git a/src/main/resources/templates/fragments/langAndDarkMode.html b/src/main/resources/templates/fragments/langAndDarkMode.html
new file mode 100644
index 00000000..b587e88e
--- /dev/null
+++ b/src/main/resources/templates/fragments/langAndDarkMode.html
@@ -0,0 +1,75 @@
+<th:block th:fragment="langAndDarkMode">
+
+<script src="js/languageSelection.js"></script>
+<script src="js/darkmode.js"></script>
+
+    <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" />
+      </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 xmsns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2" 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"/>
+        </svg>
+         </a>
+        <div class="dropdown-menu" aria-labelledby="languageDropdown">
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ar_AR">
+                <img src="images/flags/sa.svg" alt="icon" width="20" height="15"> العربية
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ca_CA">
+                <img src="images/flags/es-ct.svg" alt="icon" width="20" height="15"> Català
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_CN">
+                <img src="images/flags/cn.svg" alt="icon" width="20" height="15"> 简体中文
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="de_DE">
+                <img src="images/flags/de.svg" alt="icon" width="20" height="15"> Deutsch
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_GB">
+                <img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_US">
+                <img src="images/flags/us.svg" alt="icon" width="20" height="15"> English (US)
+            </a>
+           <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="eu_ES">
+                <img src="images/flags/eu.svg" alt="icon" width="20" height="15"> Euskara
+            </a>
+<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="es_ES">
+                <img src="images/flags/es.svg" alt="icon" width="20" height="15"> Español
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="fr_FR">
+                <img src="images/flags/fr.svg" alt="icon" width="20" height="15"> Français
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="it_IT">
+                <img src="images/flags/it.svg" alt="icon" width="20" height="15"> Italiano
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="nl_NL">
+                <img src="images/flags/nl.svg" alt="icon" width="20" height="15"> Nederlands
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ps_PL">
+                <img src="images/flags/ps.svg" alt="icon" width="20" height="15"> Polski
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_BR">
+                <img src="images/flags/pt_br.svg" alt="icon" width="20" height="15"> Português (BR)
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ro_RO">
+                <img src="images/flags/ro.svg" alt="icon" width="20" height="15"> Romanian
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sv_SE">
+                <img src="images/flags/se.svg" alt="icon" width="20" height="15"> Svenska
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ru_RU">
+                <img src="images/flags/ru.svg" alt="icon" width="20" height="15"> Русский
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ko_KR">
+                <img src="images/flags/kr.svg" alt="icon" width="20" height="15"> 한국어
+            </a>
+            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ja_JP">
+                <img src="images/flags/jp.svg" alt="icon" width="20" height="15"> 日本語
+            </a>
+        </div>
+    </li>
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index c6dcadd5..060ebaf0 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -18,13 +18,13 @@
             </a>
 
 
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
 
             <div class="collapse navbar-collapse" id="navbarNav">
 
-                <ul class="navbar-nav mr-auto flex-nowrap">
+                <ul class="navbar-nav me-auto flex-nowrap">
 
                     <li class="nav-item">
                         <a class="nav-link" href="#" th:href="@{multi-tool}" th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
@@ -41,7 +41,7 @@
 
 <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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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>
@@ -64,7 +64,7 @@
     </div>
 </li>
 <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-toggle="dropdown"
+                    <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">
                         <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>
@@ -94,7 +94,7 @@
 <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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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">
@@ -110,7 +110,7 @@
 
                   <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}=='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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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>
 
@@ -137,9 +137,9 @@
 
 
                 </ul>
-                <ul class="navbar-nav ml-auto flex-nowrap">
+                <ul class="navbar-nav ms-auto flex-nowrap">
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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">
@@ -154,64 +154,64 @@
                       </li>
 
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <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" 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"/>
                         </svg>
                          </a>
                         <div class="dropdown-menu" aria-labelledby="languageDropdown">
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ar_AR">
                                 <img src="images/flags/sa.svg" alt="icon" width="20" height="15"> العربية
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ca_CA">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ca_CA">
                                 <img src="images/flags/es-ct.svg" alt="icon" width="20" height="15"> Català
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="zh_CN">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_CN">
                                 <img src="images/flags/cn.svg" alt="icon" width="20" height="15"> 简体中文
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="de_DE">
                                 <img src="images/flags/de.svg" alt="icon" width="20" height="15"> Deutsch
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_GB">
                                 <img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_US">
                                 <img src="images/flags/us.svg" alt="icon" width="20" height="15"> English (US)
                             </a>
-                           <a class="dropdown-item lang_dropdown-item" href="" data-language-code="eu_ES">
+                           <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="eu_ES">
                                 <img src="images/flags/eu.svg" alt="icon" width="20" height="15"> Euskara
                             </a>
-				            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="es_ES">
+				            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="es_ES">
                                 <img src="images/flags/es.svg" alt="icon" width="20" height="15"> Español
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="fr_FR">
                                 <img src="images/flags/fr.svg" alt="icon" width="20" height="15"> Français
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="it_IT">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="it_IT">
                                 <img src="images/flags/it.svg" alt="icon" width="20" height="15"> Italiano
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="nl_NL">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="nl_NL">
                                 <img src="images/flags/nl.svg" alt="icon" width="20" height="15"> Nederlands
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="pl_PL">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pl_PL">
                                 <img src="images/flags/pl.svg" alt="icon" width="20" height="15"> Polski
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="pt_BR">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_BR">
                                 <img src="images/flags/pt_br.svg" alt="icon" width="20" height="15"> Português (BR)
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ro_RO">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ro_RO">
                                 <img src="images/flags/ro.svg" alt="icon" width="20" height="15"> Romanian
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="sv_SE">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sv_SE">
                                 <img src="images/flags/se.svg" alt="icon" width="20" height="15"> Svenska
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ru_RU">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ru_RU">
                                 <img src="images/flags/ru.svg" alt="icon" width="20" height="15"> Русский
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ko_KR">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ko_KR">
                                 <img src="images/flags/kr.svg" alt="icon" width="20" height="15"> 한국어
                             </a>
-                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ja_JP">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ja_JP">
                                 <img src="images/flags/jp.svg" alt="icon" width="20" height="15"> 日本語
                             </a>
                         </div>
@@ -220,7 +220,7 @@
 
                     <li class="nav-item">
                         <!-- Settings Button -->
-                        <a href="#" class="nav-link" data-toggle="modal" data-target="#settingsModal">
+                        <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
                             <img class="navbar-icon" src="images/gear.svg" alt="icon" width="24" height="24">
                         </a>
 
@@ -305,7 +305,7 @@
         <div class="modal-content dark-card">
             <div class="modal-header">
                 <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -325,7 +325,7 @@
 
 
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
                     <select class="form-control" id="downloadOption">
                         <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
@@ -333,12 +333,12 @@
                         <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
                     </select>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
                     <input type="range" class="custom-range" min="1" max="9" step="1" id="zipThreshold" value="4">
-                    <span id="zipThresholdValue" class="ml-2"></span>
+                    <span id="zipThresholdValue" class="ms-2"></span>
                 </div>
-                <div class="form-group">
+                <div class="mb-3">
                   <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" id="boredWaiting">
                     <label class="custom-control-label" for="boredWaiting" th:text="#{bored}"></label>
@@ -356,7 +356,7 @@
             	<a th:if="${@loginEnabled}" href="/logout">
 	                  <button type="button" class="btn btn-danger" th:text="#{settings.signOut}">Sign Out</button>
 	              </a>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{close}"></button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
             </div>
 
         </div>
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index 016e5def..1cd33be6 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,5 +1,5 @@
 <div th:fragment="navbarEntry (endpoint, imgSrc, titleKey, descKey, tagKey)" th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
-    <a class="dropdown-item" href="#" th:href="@{${endpoint}}" th:classappend="${endpoint.equals(currentPage)} ? 'active' : ''" th:title="#{${descKey}}" th:data-tags="#{${tagKey}}">
+    <a class="dropdown-item" href="#" th:href="@{${endpoint}}" th:classappend="${endpoint.equals(currentPage)} ? 'active' : ''" th:title="#{${descKey}}" th:data-bs-tags="#{${tagKey}}">
         <img class="icon" th:src="@{${imgSrc}}" alt="icon">
         <span class="icon-text" th:text="#{${titleKey}}"></span>
     </a>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 99baba45..2122f011 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 5c23214e..8d7d477f 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,6 +1,6 @@
-<!--   Hi if you have been redirected here when using API then you might need to supply a X-API-KEY key in header to authenticate! -->
-<!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
+
+<!--   Hi if you have been redirected here when using API then you might need to supply a X-API-KEY key in header to authenticate! -->
 <head>
     <title>Login</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
@@ -26,15 +26,15 @@
                 
                 <div class="card-body">
                     <form th:action="@{/login}" method="post">
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="username">Username:</label>
                             <input type="text" id="username" name="username" class="form-control" required="required" />
                         </div>
-                        <div class="form-group">
+                        <div class="mb-3">
                             <label for="password">Password:</label>
                             <input type="password" id="password" name="password" class="form-control" required="required" />
                         </div>
-                        <div class="form-group text-center">
+                        <div class="mb-3 text-center">
                             <input type="submit" value="Login" class="btn btn-primary" />
                         </div>
                     </form>
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 72be72e7..efd5949b 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -14,15 +14,15 @@
                     <div class="col-md-6">
                         <h2 th:text="#{merge.header}"></h2>
                         <form action="merge-pdfs" method="post" enctype="multipart/form-data">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{multiPdfDropPrompt}"></label>
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true, accept='application/pdf')}"></div>
 
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <ul id="selectedFiles" class="list-group"></ul>
                             </div>
-                            <div class="form-group text-center">
+                            <div class="mb-3 text-center">
                             	<button type="button" id="sortByNameBtn" class="btn btn-info" th:text="#{merge.sortByName}"></button>
     							<button type="button" id="sortByDateBtn" class="btn btn-info" th:text="#{merge.sortByDate}"></button>
                                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
diff --git a/src/main/resources/templates/other/add-page-numbers.html b/src/main/resources/templates/other/add-page-numbers.html
index 9111ab44..c7bc5514 100644
--- a/src/main/resources/templates/other/add-page-numbers.html
+++ b/src/main/resources/templates/other/add-page-numbers.html
@@ -22,7 +22,7 @@
 							<div
 								th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
 							<br>
-							<div class="form-group">
+							<div class="mb-3">
 								<label for="customMargin" th:text="#{addPageNumbers.selectText.2}"></label> <select
 									class="form-control" id="customMargin" name="customMargin"
 									required>
@@ -77,7 +77,7 @@
 </style>
 
 
-							<div class="form-group">
+							<div class="mb-3">
 								<label for="position" th:text="#{addPageNumbers.selectText.3}"></label>
 								<div class="a4container">
 									<div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
@@ -94,18 +94,18 @@
 
 							<input type="hidden" id="numberInput" name="position" min="1"
 								max="9" required>
-							<div class="form-group">
+							<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" />
 							</div>
-							<div class="form-group">
+							<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}" />
 							</div>
-							<div class="form-group">
+							<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}" />
diff --git a/src/main/resources/templates/other/change-metadata.html b/src/main/resources/templates/other/change-metadata.html
index a5f38c93..ccb6fb0b 100644
--- a/src/main/resources/templates/other/change-metadata.html
+++ b/src/main/resources/templates/other/change-metadata.html
@@ -17,57 +17,57 @@
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p>
 
-                            <div class="form-group-inline form-check">
+                            <div class="mb-3-inline form-check">
                                 <input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll"> 
-                                <label class="ml-3" for="deleteAll"  th:text="#{changeMetadata.selectText.2}" ></label>
+                                <label class="ms-3" for="deleteAll"  th:text="#{changeMetadata.selectText.2}" ></label>
                             </div>
 
-                            <div class="form-group-inline form-check">
+                            <div class="mb-3-inline form-check">
                                 <input type="checkbox" class="form-check-input" id="customModeCheckbox"> 
-                                <label class="ml-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
+                                <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                             </div>
 
-                            <div class="form-group">
+                            <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">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="creationDate" th:text="#{changeMetadata.creationDate}"></label> 
                                 <input type="text" class="form-control" id="creationDate" name="creationDate" placeholder="2020/12/25 18:30:59">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="creator" th:text="#{changeMetadata.creator}"></label> 
                                 <input type="text" class="form-control" id="creator" name="creator">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="keywords" th:text="#{changeMetadata.keywords}"></label> 
                                 <input type="text" class="form-control" id="keywords" name="keywords">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="modificationDate" th:text="#{changeMetadata.modDate}"></label> 
                                 <input type="text" class="form-control" id="modificationDate" name="modificationDate" placeholder="2020/12/25 18:30:59">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="producer" th:text="#{changeMetadata.producer}"></label> 
                                 <input type="text" class="form-control" id="producer" name="producer">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="subject" th:text="#{changeMetadata.subject}"></label> 
                                 <input type="text" class="form-control" id="subject" name="subject">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="title" th:text="#{changeMetadata.title}"></label> 
                                 <input type="text" class="form-control" id="title" name="title">
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label class="form-check-label" for="trapped" th:text="#{changeMetadata.trapped}"></label> 
                                 <select class="form-control" id="trapped" name="trapped">
                                     <option value="True" th:text="#{true}"></option>
@@ -77,7 +77,7 @@
                             </div>
                             <div id="customMetadata" style="display: none;">
                                 <h3 th:text="#{changeMetadata.selectText.4}"></h3>
-                                <div class="form-group" id="otherMetadataEntries"></div>
+                                <div class="mb-3" id="otherMetadataEntries"></div>
                             </div>
                             <div id="customMetadataEntries"></div>
                             <button type="button" class="btn btn-secondary" id="addMetadataBtn" th:text="#{changeMetadata.selectText.5}"></button>
@@ -194,7 +194,7 @@
 	    count = count + 1;
 	    
 	    const formGroup = document.createElement("div");
-	    formGroup.className = "form-group";
+	    formGroup.className = "mb-3";
 	    formGroup.appendChild(keyInput);
 	    formGroup.appendChild(valueInput);
 	    
@@ -227,11 +227,11 @@
               continue;
             }
             const entryDiv = document.createElement('div');
-            entryDiv.className = 'form-group';
+            entryDiv.className = 'mb-3';
             
             
           
-            entryDiv.innerHTML = `<div class="form-group"><label class="form-check-label" for="${key}">${key}:</label><input name="${key}" value="${value}" type="text" class="form-control" id="${key}"></div>`;
+            entryDiv.innerHTML = `<div class="mb-3"><label class="form-check-label" for="${key}">${key}:</label><input name="${key}" value="${value}" type="text" class="form-control" id="${key}"></div>`;
             otherMetadataEntriesDiv.appendChild(entryDiv);
           }
         } else {
diff --git a/src/main/resources/templates/other/extract-image-scans.html b/src/main/resources/templates/other/extract-image-scans.html
index bc8c869b..80a2d7fb 100644
--- a/src/main/resources/templates/other/extract-image-scans.html
+++ b/src/main/resources/templates/other/extract-image-scans.html
@@ -16,27 +16,27 @@
 
             <form id="multiPdfForm" th:action="@{extract-image-scans}" method="post" enctype="multipart/form-data">
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*, application/pdf')}"></div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label for="angleThreshold" th:text="#{ScannerImageSplit.selectText.1}"></label>
                 <input type="number" class="form-control" id="angleThreshold" name="angle_threshold" value="10">
                 <small id="angleThresholdHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.2}"></small>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label for="tolerance" th:text="#{ScannerImageSplit.selectText.3}"></label>
                 <input type="number" class="form-control" id="tolerance" name="tolerance" value="20">
                 <small id="toleranceHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.4}"></small>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label for="minArea" th:text="#{ScannerImageSplit.selectText.5}"></label>
                 <input type="number" class="form-control" id="minArea" name="min_area" value="8000">
                 <small id="minAreaHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.6}"></small>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label for="minContourArea" th:text="#{ScannerImageSplit.selectText.7}"></label>
                 <input type="number" class="form-control" id="minContourArea" name="min_contour_area" value="500">
                 <small id="minContourAreaHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.8}"></small>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label for="borderSize" th:text="#{ScannerImageSplit.selectText.9}"></label>
                 <input type="number" class="form-control" id="borderSize" name="border_size" value="1">
                 <small id="borderSizeHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.10}"></small>
diff --git a/src/main/resources/templates/other/extract-images.html b/src/main/resources/templates/other/extract-images.html
index ad98819d..66a35036 100644
--- a/src/main/resources/templates/other/extract-images.html
+++ b/src/main/resources/templates/other/extract-images.html
@@ -16,7 +16,7 @@
 
             <form id="multiPdfForm" th:action="@{extract-images}" method="post" enctype="multipart/form-data">
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label th:text="#{extractImages.selectText}"></label> 
                 <select class="form-control" name="format">
                     <option value="png">PNG</option>
diff --git a/src/main/resources/templates/other/multi-page-layout.html b/src/main/resources/templates/other/multi-page-layout.html
index 509999e7..a0fc2615 100644
--- a/src/main/resources/templates/other/multi-page-layout.html
+++ b/src/main/resources/templates/other/multi-page-layout.html
@@ -16,7 +16,7 @@
                         <h2 th:text="#{pageLayout.header}"></h2>
                          <form id="multiPdfForm" th:action="@{multi-page-layout}" method="post" enctype="multipart/form-data">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                            <div class="form-group">
+                            <div class="mb-3">
 	                            <label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
 							    <select id="pagesPerSheet" name="pagesPerSheet" required>
 							        <option value="2">2</option>
diff --git a/src/main/resources/templates/other/ocr-pdf.html b/src/main/resources/templates/other/ocr-pdf.html
index 2b6f0bec..a7fece4b 100644
--- a/src/main/resources/templates/other/ocr-pdf.html
+++ b/src/main/resources/templates/other/ocr-pdf.html
@@ -40,7 +40,7 @@
                         <h2 th:text="#{ocr.header}"></h2>
                          <form th:if="${#lists.size(languages) > 0}" action="#" th:action="@{/ocr-pdf}" method="post" enctype="multipart/form-data" class="mb-3">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
                                 <hr>
                                 <div id="languages">
@@ -51,7 +51,7 @@
                                 </div>
                                 <hr>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{ocr.selectText.10}"></label> 
                                 <select class="form-control" name="ocrType">
                                     <option value="skip-text" th:text="#{ocr.selectText.6}"></option>
@@ -83,7 +83,7 @@
                             </div>
                             
                             
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{ocr.selectText.12}"></label> 
                                 <select class="form-control" name="ocrRenderType">
                                     <option value="hocr">HOCR (Latin/Roman alphabet only)</option>
diff --git a/src/main/resources/templates/other/remove-blanks.html b/src/main/resources/templates/other/remove-blanks.html
index 1bfffc0b..a464754f 100644
--- a/src/main/resources/templates/other/remove-blanks.html
+++ b/src/main/resources/templates/other/remove-blanks.html
@@ -16,12 +16,12 @@
 
             <form id="multiPdfForm" th:action="@{remove-blanks}" method="post" enctype="multipart/form-data">
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-               <div class="form-group">
+               <div class="mb-3">
                 <label for="threshold" th:text="#{removeBlanks.threshold}"></label>
                 <input type="number" class="form-control" id="threshold" name="threshold" value="10">
                 <small id="thresholdHelp" class="form-text text-muted" th:text="#{removeBlanks.thresholdDesc}"></small>
               </div>
-               <div class="form-group">
+               <div class="mb-3">
                 <label for="whitePercent" th:text="#{removeBlanks.whitePercent}"></label>
                 <input type="number" class="form-control" id="whitePercent" name="whitePercent" value="99.9" step="0.1">
                 <small id="whitePercentHelp" class="form-text text-muted" th:text="#{removeBlanks.whitePercentDesc}"></small>
diff --git a/src/main/resources/templates/other/scale-pages.html b/src/main/resources/templates/other/scale-pages.html
index b2030a4d..df0c22ad 100644
--- a/src/main/resources/templates/other/scale-pages.html
+++ b/src/main/resources/templates/other/scale-pages.html
@@ -16,7 +16,7 @@
                         <h2 th:text="#{scalePages.header}"></h2>
                          <form id="scalePagesFrom" th:action="@{scale-pages}" method="post" enctype="multipart/form-data">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                            <div class="form-group">
+                            <div class="mb-3">
 	                            <label for="pageSize" th:text="#{scalePages.pageSize}"></label>
 							    <select id="pageSize" name="pageSize" required>
 							        
@@ -48,7 +48,7 @@
 							        <option value="LEDGER">Ledger</option>
 							    </select>
 						    </div>
-                            <div class="form-group">
+                            <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">
 						    </div>
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index 6accc45f..96944649 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -16,7 +16,7 @@
 
                         <form th:action="@{rearrange-pages}" method="post" enctype="multipart/form-data">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                            <div class="form-group">
+                            <div class="mb-3">
 						        <label for="customMode">Mode</label>
 						        <select class="form-control" id="customMode" name="customMode">
 						            <option value="">Custom Page Order</option>
@@ -29,7 +29,7 @@
 						            <option value="REMOVE_FIRST_AND_LAST">Remove First and Last</option>
 						        </select>
 						    </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="pageOrder" th:text="#{pageOrderPrompt}"></label> 
                                 <input type="text" class="form-control" id="pageOrder" name="pageOrder" placeholder="(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)" required>
                             </div>
diff --git a/src/main/resources/templates/pipeline.html b/src/main/resources/templates/pipeline.html
index 1f61008d..fa26ff29 100644
--- a/src/main/resources/templates/pipeline.html
+++ b/src/main/resources/templates/pipeline.html
@@ -37,11 +37,11 @@
 				<div class="row justify-content-center">
 
 						 <div class="bordered-box">
-                        <div class="text-right text-top">
+                        <div class="text-end text-top">
                          <button id="uploadPipelineBtn" class="btn btn-primary">Upload
                                     Custom</button>
-                            <button type="button" class="btn btn-primary" data-toggle="modal"
-                                data-target="#pipelineSettingsModal">Configure</button>
+                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
+                                data-bs-target="#pipelineSettingsModal">Configure</button>
                         </div>
 
                         <div class="center-element">
@@ -71,7 +71,7 @@
 									<!-- Modal Header -->
 									<div class="modal-header">
 										<h2 class="modal-title">Pipeline Configuration</h2>
-										<button type="button" class="close" data-dismiss="modal">&times;</button>
+										<button type="button" class="close" data-bs-dismiss="modal">&times;</button>
 									</div>
 
 									<!-- Modal body -->
diff --git a/src/main/resources/templates/remove-pages.html b/src/main/resources/templates/remove-pages.html
index 967ccd1d..271158f9 100644
--- a/src/main/resources/templates/remove-pages.html
+++ b/src/main/resources/templates/remove-pages.html
@@ -16,7 +16,7 @@
 
             <form th:action="@{remove-pages}" method="post" enctype="multipart/form-data">
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-              <div class="form-group">
+              <div class="mb-3">
                 <label for="pagesToDelete" th:text="#{pageRemover.pagesToDelete}"></label> 
                 <input type="text" class="form-control" id="fileInput" name="pagesToDelete" placeholder="(e.g. 1,2,6 or 1-10,15-30)" required>
               </div>
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index 52005eb0..b0201158 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -14,27 +14,27 @@
                         <h2 th:text="#{addPassword.header}"></h2>
 
                         <form action="add-password" method="post" enctype="multipart/form-data">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{addPassword.selectText.1}"></label>
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{addPassword.selectText.14}"></label> <input type="password" class="form-control" id="ownerPassword" name="ownerPassword">
                             	<small class="form-text text-muted" th:text="#{addPassword.selectText.15}"></small>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{addPassword.selectText.2}"></label> <input type="password" class="form-control" id="password" name="password">
                                 <small class="form-text text-muted" th:text="#{addPassword.selectText.16}"></small>
                             </div>
     
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{addPassword.selectText.3}"></label> <select class="form-control" id="keyLength" name="keyLength">
                                     <option value="40">40</option>
                                     <option value="128">128</option>
                                     <option value="256">256</option>
                                 </select> <small class="form-text text-muted" th:text="#{addPassword.selectText.4}"></small>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{addPassword.selectText.5}"></label>
                                 <div class="form-check">
                                     <input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument"> 
@@ -71,7 +71,7 @@
 
                             </div>
                             <br />
-                            <div class="form-group text-center">
+                            <div class="mb-3 text-center">
                                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{addPassword.submit}"></button>
                             </div>
 
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index 060805fa..1f699415 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -14,14 +14,14 @@
                         <h2 th:text="#{watermark.header}"></h2>
 
                         <form method="post" enctype="multipart/form-data" action="add-watermark">
-                            <div class="form-group">
+                            <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="form-group">
+                            <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>
@@ -29,21 +29,21 @@
                                 </select>
                             </div>
                             
-                            <div id="watermarkTextGroup" class="form-group">
+                            <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="form-group" style="display: none;">
+                            <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="form-group">
+                            <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="form-group">
+                            <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">
@@ -83,19 +83,19 @@
 							    appendPercentageSymbol();
 							</script>
                             
-                            <div class="form-group">
+                            <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="form-group">
+                            <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="form-group">
+                            <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="form-group text-center">
+                            <div class="mb-3 text-center">
                                 <input type="submit" id="submitBtn" th:value="#{watermark.submit}" class="btn btn-primary" />
                             </div>
                         </form>
diff --git a/src/main/resources/templates/security/cert-sign.html b/src/main/resources/templates/security/cert-sign.html
index 0dad8f8f..9435e67e 100644
--- a/src/main/resources/templates/security/cert-sign.html
+++ b/src/main/resources/templates/security/cert-sign.html
@@ -18,12 +18,12 @@
 
 						<form action="/cert-sign" method="post"
 							enctype="multipart/form-data">
-							<div class="form-group">
+							<div class="mb-3">
 								<label th:text="#{certSign.selectPDF}"></label>
 								<div
 									th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
 							</div>
-							<div class="form-group">
+							<div class="mb-3">
 								<label for="certType" th:text="#{certSign.certType}"></label> <select
 									class="form-control" id="certType" name="certType">
 									<option value="" th:text="#{selectFillter}"></option>
@@ -32,50 +32,50 @@
 								</select>
 							</div>
 
-							<div class="form-group" id="p12Group" style="display: none;">
+							<div class="mb-3" id="p12Group" style="display: none;">
 								<label th:text="#{certSign.selectP12}"></label>
 								<div
 									th:replace="~{fragments/common :: fileSelector(name='p12', notRequired=true, multiple=false, accept='.p12,.pfx')}"></div>
 							</div>
 
 							<div id="pemGroup" style="display: none;">
-								<div class="form-group">
+								<div class="mb-3">
 									<label th:text="#{certSign.selectKey}"></label>
 									<div
 										th:replace="~{fragments/common :: fileSelector(name='key', multiple=false, notRequired=true, accept='.pem,.der')}"></div>
 								</div>
-								<div class="form-group">
+								<div class="mb-3">
 									<label th:text="#{certSign.selectCert}"></label>
 									<div
 										th:replace="~{fragments/common :: fileSelector(name='cert', multiple=false, notRequired=true, accept='.pem,.der')}"></div>
 								</div>
 							</div>
 
-							<div class="form-group">
+							<div class="mb-3">
 								<label th:text="#{certSign.password}"></label> <input
 									type="password" class="form-control" id="password"
 									name="password">
 							</div>
                             
-							<div class="form-group">
+							<div class="mb-3">
 								<label><input type="checkbox" id="showSignature"
 									name="showSignature" th:text="#{certSign.showSig}"></label>
 							</div>
 
 							<div id="signatureDetails" style="display: none;">
-								<div class="form-group">
+								<div class="mb-3">
 									<label for="reason" th:text="#{certSign.reason}"></label> <input type="text"
 										class="form-control" id="reason" name="reason">
 								</div>
-								<div class="form-group">
+								<div class="mb-3">
 									<label for="location" th:text="#{certSign.location}"></label> <input type="text"
 										class="form-control" id="location" name="location">
 								</div>
-								<div class="form-group">
+								<div class="mb-3">
 									<label for="name" th:text="#{certSign.name}"></label> <input type="text"
 										class="form-control" id="name" name="name">
 								</div>
-								<div class="form-group">
+								<div class="mb-3">
 									<label for="pageNumber" th:text="#{pageNum}"></label> <input
 										type="number" class="form-control" id="pageNumber"
 										name="pageNumber" min="1">
@@ -120,7 +120,7 @@
 							</script>
 
 
-							<div class="form-group text-center">
+							<div class="mb-3 text-center">
 								<button type="submit" id="submitBtn" class="btn btn-primary"
 									th:text="#{certSign.submit}"></button>
 							</div>
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index 329a1790..196f05ab 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -15,11 +15,11 @@
                         <h2 th:text="#{permissions.header}"></h2>
                         <p th:text="#{permissions.warning}"></p>
                         <form action="add-password" method="post" enctype="multipart/form-data">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{permissions.selectText.1}"></label>
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{permissions.selectText.2}"></label>
                                 <div class="form-check">
                                     <input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument"> 
@@ -56,7 +56,7 @@
 
                             </div>
                             <br />
-                            <div class="form-group text-center">
+                            <div class="mb-3 text-center">
                                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{permissions.submit}"></button>
                             </div>
 
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index b9777960..1e95f403 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -14,16 +14,16 @@
                         <h2 th:text="#{removePassword.header}"></h2>
 
                         <form action="remove-password" method="post" enctype="multipart/form-data">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{removePassword.selectText.1}"></label>
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{removePassword.selectText.2}"></label> 
                                 <input type="password" class="form-control" id="password" name="password" required>
                             </div>
                             <br />
-                            <div class="form-group text-center">
+                            <div class="mb-3 text-center">
                                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{removePassword.submit}"></button>
                             </div>
                         </form>
diff --git a/src/main/resources/templates/security/remove-watermark.html b/src/main/resources/templates/security/remove-watermark.html
index 2e538bcd..83c83937 100644
--- a/src/main/resources/templates/security/remove-watermark.html
+++ b/src/main/resources/templates/security/remove-watermark.html
@@ -14,15 +14,15 @@
                         <h2 th:text="#{remove-watermark.header}"></h2>
 
                         <form method="post" enctype="multipart/form-data" action="remove-watermark">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label th:text="#{remove-watermark.selectText.1}"></label>
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             </div>
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="watermarkText" th:text="#{remove-watermark.selectText.2}"></label> 
                                 <input type="text" id="watermarkText" name="watermarkText" class="form-control" placeholder="Stirling-PDF" required />
                             </div>
-                            <div class="form-group text-center">
+                            <div class="mb-3 text-center">
                                 <input type="submit" id="submitBtn" th:value="#{remove-watermark.submit}" class="btn btn-primary" />
                             </div>
                         </form>
diff --git a/src/main/resources/templates/security/sanitize-pdf.html b/src/main/resources/templates/security/sanitize-pdf.html
index 250e238e..dfd1f310 100644
--- a/src/main/resources/templates/security/sanitize-pdf.html
+++ b/src/main/resources/templates/security/sanitize-pdf.html
@@ -14,7 +14,7 @@
                         <h2 th:text="#{sanitizePDF.header}"></h2>
 
                         <form action="sanitize-pdf" method="post" enctype="multipart/form-data">
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                             </div>
                             <div class="form-check">
@@ -38,7 +38,7 @@
                                 <label class="form-check-label" for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
                             </div>
                             <br />
-                            <div class="form-group text-center">
+                            <div class="mb-3 text-center">
                                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{sanitizePDF.submit}"></button>
                             </div>
 
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index 3e1d994f..718f5cd4 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -26,7 +26,7 @@
                         <form th:action="@{split-pages}" method="post" enctype="multipart/form-data">
                             <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
 
-                            <div class="form-group">
+                            <div class="mb-3">
                                 <label for="pages" th:text="#{split.splitPages}"></label> 
                                 <input type="text" class="form-control" id="pages" name="pages" placeholder="1,3,5-10" required>
                             </div>