diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css
index f9c359dc..0e609652 100644
--- a/src/main/resources/static/css/multi-tool.css
+++ b/src/main/resources/static/css/multi-tool.css
@@ -65,7 +65,7 @@ label {
   margin-left: auto;
 }
 
-#bg-card {
+.bg-card {
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
   padding: 25px 0 0;
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index d588d686..d767d59d 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -58,7 +58,7 @@ td {
   border-bottom: none;
 }
 
-#bg-card {
+.bg-card {
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
   padding: 2.5rem;
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index c29d2ffa..c315ce74 100644
--- a/src/main/resources/templates/about.html
+++ b/src/main/resources/templates/about.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card"></div>
+            <div class="col-md-6 bg-card"></div>
           </div>
         </div>
       </div>
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index 727de224..e07050ff 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -21,6 +21,7 @@
                 <span th:text="#{${messageType}}">Default message if not found</span>
               </div>
               </th:block>
+
               <!-- At the top of the user settings -->
               <h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
               <th:block th:if="${error}">
@@ -28,13 +29,15 @@
                 <span th:text="${error}">Error Message</span>
               </div>
               </th:block>
+
               <!-- Change Username Form -->
               <th:block th:if="${!oAuth2Login}">
               <h4 th:text="#{account.changeUsername}">Change Username?</h4>
-              <form id="bg-card" class="mt-4 mb-4" action="api/v1/user/change-username" method="post">
+              <form id="formsavechangeusername" class="bg-card mt-4 mb-4" action="api/v1/user/change-username" method="post">
                 <div class="mb-3">
                   <label for="newUsername" th:text="#{account.newUsername}">Change Username</label>
                   <input type="text" class="form-control" name="newUsername" id="newUsername" th:placeholder="#{account.newUsername}">
+                  <span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
                 </div>
                 <div class="mb-3">
                   <label for="currentPassword" th:text="#{password}">Password</label>
@@ -49,10 +52,10 @@
               <!-- Change Password Form -->
               <th:block th:if="${!oAuth2Login}">
               <h4 th:text="#{account.changePassword}">Change Password?</h4>
-              <form id="bg-card" class="mt-4 mb-4" action="api/v1/user/change-password" method="post">
+              <form id="formsavechangepassword" class="bg-card mt-4 mb-4" action="api/v1/user/change-password" method="post">
                 <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}">
+                  <input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{account.oldPassword}">
                 </div>
                 <div class="mb-3">
                   <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
@@ -95,6 +98,76 @@
                   </div>
                 </div>
               </div>
+              <script th:inline="javascript">
+                jQuery.validator.addMethod("usernamePattern", function(value, element) {
+                    return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9@._+-]*[a-zA-Z0-9]$|^(?=.{1,64}@)[A-Za-z0-9]+(\.[A-Za-z0-9_+.-]+)*@[^-][A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*(\.[A-Za-z]{2,})$/.test(value);
+                }, /*[[#{invalidUsernameMessage}]]*/ "Invalid username format");
+                $(document).ready(function() {
+                  $('#formsavechangepassword').validate({
+                    rules: {
+                      currentPassword: {
+                        required: true
+                      },
+                      newPassword: {
+                        required: true
+                      },
+                      confirmNewPassword: {
+                        required: true
+                      }
+                    }
+                  });
+                  $('#formsavechangeusername').validate({
+                    rules: {
+                      newUsername: {
+                        required: true,
+                        usernamePattern: true
+                      },
+                      currentPassword: {
+                        required: true
+                      }
+                      },
+                      messages: {
+                        newUsername: {
+                              usernamePattern: /*[[#{invalidUsernameMessage}]]*/ "Invalid username format"
+                          },
+                      },
+                      errorPlacement: function(error, element) {
+                          if (element.attr("name") === "newUsername") {
+                              $("#usernameError").text(error.text()).show();
+                          } else {
+                              error.insertAfter(element);
+                          }
+                      },
+                      success: function(label, element) {
+                          if ($(element).attr("name") === "newUsername") {
+                              $("#usernameError").hide();
+                          }
+                      }
+                  });
+                  $('#formsavechangepassword').on('submit', function(event) {
+                    var newPassword = $('#newPassword').val();
+                    var confirmNewPassword = $('#confirmNewPassword').val();
+
+                    if (newPassword !== confirmNewPassword) {
+                      alert('New Password and Confirm New Password must match.');
+                      event.preventDefault();
+                    }
+                  });
+                  $('#newUsername').on('input', function() {
+                      var usernameInput = $(this);
+                      var isValid = usernameInput[0].checkValidity();
+                      var errorSpan = $('#usernameError');
+        
+                      if (isValid) {
+                          usernameInput.removeClass('invalid').addClass('valid');
+                          errorSpan.hide();
+                      } else {
+                          usernameInput.removeClass('valid').addClass('invalid');
+                          errorSpan.show();
+                      }
+                  });
+                });
+              </script>
 
               <script>
                 function copyToClipboard() {
@@ -180,7 +253,7 @@
               </script>
 
               <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
-              <div id="bg-card" class="container mt-4">
+              <div class="bg-card container mt-4">
                 <h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
                 <table id="settingsTable" class="table table-bordered table-sm table-striped">
                   <thead>
diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html
index e87726cf..4657ecd9 100644
--- a/src/main/resources/templates/addUsers.html
+++ b/src/main/resources/templates/addUsers.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-8" id="bg-card">
+            <div class="col-md-8 bg-card">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{adminUserSettings.header}">Admin User Control Settings</h2>
diff --git a/src/main/resources/templates/auto-split-pdf.html b/src/main/resources/templates/auto-split-pdf.html
index fa6b1d16..3e93c565 100644
--- a/src/main/resources/templates/auto-split-pdf.html
+++ b/src/main/resources/templates/auto-split-pdf.html
@@ -15,7 +15,7 @@
       <br><br>
       <div class="container">
         <div class="row justify-content-center">
-          <div class="col-md-6" id="bg-card">
+          <div class="col-md-6 bg-card">
             <div class="tool-header">
               <span class="material-symbols-rounded tool-header-icon advance">cut</span>
               <span class="tool-header-text" th:text="#{autoSplitPDF.header}"></span>
diff --git a/src/main/resources/templates/change-creds.html b/src/main/resources/templates/change-creds.html
index 30e06688..adef8b55 100644
--- a/src/main/resources/templates/change-creds.html
+++ b/src/main/resources/templates/change-creds.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9" id="bg-card">
+            <div class="col-md-9 bg-card">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{changeCreds.header}">User Settings</h2>
diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html
index f822a593..1386a441 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -14,7 +14,7 @@
       <br><br>
       <div class="container">
         <div class="row justify-content-center">
-          <div class="col-md-6" id="bg-card">
+          <div class="col-md-6 bg-card">
             <div class="tool-header">
               <span class="material-symbols-rounded tool-header-icon convert">draft</span>
               <span class="tool-header-text" th:text="#{fileToPDF.header}"></span>
diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html
index 94b4f842..ff0bf143 100644
--- a/src/main/resources/templates/convert/html-to-pdf.html
+++ b/src/main/resources/templates/convert/html-to-pdf.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="mb-3"  id="bg-card">
+            <div class="mb-3 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">html</span>
                 <span class="tool-header-text" th:text="#{HTMLToPDF.header}"></span>
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index ec49e1c4..09d0461b 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon image">image</span>
                 <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
diff --git a/src/main/resources/templates/convert/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html
index 748c5c66..af93f23c 100644
--- a/src/main/resources/templates/convert/markdown-to-pdf.html
+++ b/src/main/resources/templates/convert/markdown-to-pdf.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">markdown</span>
                 <span class="tool-header-text" th:text="#{MarkdownToPDF.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-csv.html b/src/main/resources/templates/convert/pdf-to-csv.html
index be78d1da..23f804b0 100644
--- a/src/main/resources/templates/convert/pdf-to-csv.html
+++ b/src/main/resources/templates/convert/pdf-to-csv.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">csv</span>
                 <span class="tool-header-text" th:text="#{PDFToCSV.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-html.html b/src/main/resources/templates/convert/pdf-to-html.html
index 395f9829..5006ad1b 100644
--- a/src/main/resources/templates/convert/pdf-to-html.html
+++ b/src/main/resources/templates/convert/pdf-to-html.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">html</span>
                 <span class="tool-header-text" th:text="#{PDFToHTML.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index d6b5f871..a0402fc1 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon image">image</span>
                 <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-pdfa.html b/src/main/resources/templates/convert/pdf-to-pdfa.html
index 7b51a86c..98f1565c 100644
--- a/src/main/resources/templates/convert/pdf-to-pdfa.html
+++ b/src/main/resources/templates/convert/pdf-to-pdfa.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">picture_as_pdf</span>
                 <span class="tool-header-text" th:text="#{pdfToPDFA.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index 8d4a4284..fcef6e65 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon ppt">slideshow</span>
                 <span class="tool-header-text" th:text="#{PDFToPresentation.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html
index 21bf1fae..e0fc5fbb 100644
--- a/src/main/resources/templates/convert/pdf-to-text.html
+++ b/src/main/resources/templates/convert/pdf-to-text.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">text_fields</span>
                 <span class="tool-header-text" th:text="#{PDFToText.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index cce75d76..c17c2675 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon word">description</span>
                 <span class="tool-header-text" th:text="#{PDFToWord.header}"></span>
diff --git a/src/main/resources/templates/convert/pdf-to-xml.html b/src/main/resources/templates/convert/pdf-to-xml.html
index 388ed80b..8ee1237e 100644
--- a/src/main/resources/templates/convert/pdf-to-xml.html
+++ b/src/main/resources/templates/convert/pdf-to-xml.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">code</span>
                 <span class="tool-header-text" th:text="#{PDFToXML.header}"></span>
diff --git a/src/main/resources/templates/convert/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html
index 26c13ad1..03f26e9d 100644
--- a/src/main/resources/templates/convert/url-to-pdf.html
+++ b/src/main/resources/templates/convert/url-to-pdf.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon convert">link</span>
                 <span class="tool-header-text" th:text="#{URLToPDF.header}"></span>
diff --git a/src/main/resources/templates/crop.html b/src/main/resources/templates/crop.html
index 0af2509c..fdb248fd 100644
--- a/src/main/resources/templates/crop.html
+++ b/src/main/resources/templates/crop.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">crop</span>
                 <span class="tool-header-text" th:text="#{crop.header}"></span>
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index 61c69c24..fd357afb 100644
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -10,7 +10,7 @@
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
         <div class="container">
           <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
-          <div id="bg-card" class="text-center">
+          <div class="bg-card text-center">
             <h1 class="display-2" th:text="#{oops}"></h1>
             <p class="lead" th:if="${param.status == '404'}" th:text="#{error.404.1}"></p>
             <p class="lead" th:unless="${param.status == '404'}" th:text="#{error.404.2}"></p>
diff --git a/src/main/resources/templates/extract-page.html b/src/main/resources/templates/extract-page.html
index 1f8feec2..05d171ce 100644
--- a/src/main/resources/templates/extract-page.html
+++ b/src/main/resources/templates/extract-page.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">upload</span>
                 <span class="tool-header-text" th:text="#{pageExtracter.header}"></span>
diff --git a/src/main/resources/templates/licenses.html b/src/main/resources/templates/licenses.html
index c91a4507..a2f81653 100644
--- a/src/main/resources/templates/licenses.html
+++ b/src/main/resources/templates/licenses.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <h2 th:text="#{licenses.header}">3rd Party licenses</h2>
               <table class="table table-striped">
                 <thead>
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index c8579fc0..d810fdc4 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container" id="dropContainer">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 "bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">add_to_photos</span>
                 <span class="tool-header-text" th:text="#{merge.header}"></span>
diff --git a/src/main/resources/templates/misc/add-image.html b/src/main/resources/templates/misc/add-image.html
index 40146ed2..21ecfdc7 100644
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -13,7 +13,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">add_photo_alternate</span>
                 <span class="tool-header-text" th:text="#{addImage.header}"></span>
diff --git a/src/main/resources/templates/misc/add-page-numbers.html b/src/main/resources/templates/misc/add-page-numbers.html
index a118a4c2..ea8281c8 100644
--- a/src/main/resources/templates/misc/add-page-numbers.html
+++ b/src/main/resources/templates/misc/add-page-numbers.html
@@ -55,7 +55,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">123</span>
                 <span class="tool-header-text" th:text="#{addPageNumbers.header}"></span>
diff --git a/src/main/resources/templates/misc/adjust-contrast.html b/src/main/resources/templates/misc/adjust-contrast.html
index 1f381e03..b4811495 100644
--- a/src/main/resources/templates/misc/adjust-contrast.html
+++ b/src/main/resources/templates/misc/adjust-contrast.html
@@ -20,7 +20,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12" id="bg-card">
+            <div class="col-md-12 bg-card">
               <div class="row justify-content-center">
                 <div class="col-md-3">
                   <div id="sliders-container" style="display:none;">
diff --git a/src/main/resources/templates/misc/auto-crop.html b/src/main/resources/templates/misc/auto-crop.html
index 2dcaa06d..6b6ffcdb 100644
--- a/src/main/resources/templates/misc/auto-crop.html
+++ b/src/main/resources/templates/misc/auto-crop.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">crop</span>
                 <span class="tool-header-text" th:text="#{autoCrop.header}"></span>
diff --git a/src/main/resources/templates/misc/auto-rename.html b/src/main/resources/templates/misc/auto-rename.html
index 8a7085cf..72bf41d0 100644
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">text_fields_alt</span>
                 <span class="tool-header-text" th:text="#{auto-rename.header}"></span>
diff --git a/src/main/resources/templates/misc/change-metadata.html b/src/main/resources/templates/misc/change-metadata.html
index 90ead65f..604ff0bc 100644
--- a/src/main/resources/templates/misc/change-metadata.html
+++ b/src/main/resources/templates/misc/change-metadata.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">assignment</span>
                 <span class="tool-header-text" th:text="#{changeMetadata.header}"></span>
diff --git a/src/main/resources/templates/misc/compare.html b/src/main/resources/templates/misc/compare.html
index e68a6bb4..93cbee58 100644
--- a/src/main/resources/templates/misc/compare.html
+++ b/src/main/resources/templates/misc/compare.html
@@ -20,7 +20,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9" id="bg-card">
+            <div class="col-md-9 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">compare</span>
                 <span class="tool-header-text" th:text="#{compare.header}"></span>
diff --git a/src/main/resources/templates/misc/compress-pdf.html b/src/main/resources/templates/misc/compress-pdf.html
index 74f9f95d..093a09b5 100644
--- a/src/main/resources/templates/misc/compress-pdf.html
+++ b/src/main/resources/templates/misc/compress-pdf.html
@@ -14,7 +14,7 @@
       <br><br>
       <div class="container">
         <div class="row justify-content-center">
-          <div class="col-md-6" id="bg-card">
+          <div class="col-md-6 bg-card">
             <div class="tool-header">
               <span class="material-symbols-rounded tool-header-icon advance">zoom_in_map</span>
               <span class="tool-header-text" th:text="#{compress.header}"></span>
diff --git a/src/main/resources/templates/misc/extract-image-scans.html b/src/main/resources/templates/misc/extract-image-scans.html
index 4932ae91..a49df7cb 100644
--- a/src/main/resources/templates/misc/extract-image-scans.html
+++ b/src/main/resources/templates/misc/extract-image-scans.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">scanner</span>
                 <span class="tool-header-text" th:text="#{home.ScannerImageSplit.title}"></span>
diff --git a/src/main/resources/templates/misc/extract-images.html b/src/main/resources/templates/misc/extract-images.html
index eec412b4..71cc686f 100644
--- a/src/main/resources/templates/misc/extract-images.html
+++ b/src/main/resources/templates/misc/extract-images.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">photo_library</span>
                 <span class="tool-header-text" th:text="#{extractImages.header}"></span>
diff --git a/src/main/resources/templates/misc/flatten.html b/src/main/resources/templates/misc/flatten.html
index dd90fee5..120f6f40 100644
--- a/src/main/resources/templates/misc/flatten.html
+++ b/src/main/resources/templates/misc/flatten.html
@@ -12,7 +12,7 @@
         <div class="container">
           <div class="row justify-content-center">
 
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">layers_clear</span>
                 <span class="tool-header-text" th:text="#{flatten.header}"></span>
diff --git a/src/main/resources/templates/misc/ocr-pdf.html b/src/main/resources/templates/misc/ocr-pdf.html
index 8d8cb8a2..df99b969 100644
--- a/src/main/resources/templates/misc/ocr-pdf.html
+++ b/src/main/resources/templates/misc/ocr-pdf.html
@@ -34,7 +34,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">quick_reference_all</span>
                 <span class="tool-header-text" th:text="#{ocr.header}"></span>
diff --git a/src/main/resources/templates/misc/remove-annotations.html b/src/main/resources/templates/misc/remove-annotations.html
index fae40ebd..c928d1c0 100644
--- a/src/main/resources/templates/misc/remove-annotations.html
+++ b/src/main/resources/templates/misc/remove-annotations.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">thread_unread</span>
                 <span class="tool-header-text" th:text="#{removeAnnotations.header}"></span>
diff --git a/src/main/resources/templates/misc/remove-blanks.html b/src/main/resources/templates/misc/remove-blanks.html
index a4601d04..f313cea5 100644
--- a/src/main/resources/templates/misc/remove-blanks.html
+++ b/src/main/resources/templates/misc/remove-blanks.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">scan_delete</span>
                 <span class="tool-header-text" th:text="#{removeBlanks.header}"></span>
diff --git a/src/main/resources/templates/misc/repair.html b/src/main/resources/templates/misc/repair.html
index 2694885b..001332ee 100644
--- a/src/main/resources/templates/misc/repair.html
+++ b/src/main/resources/templates/misc/repair.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">build</span>
                 <span class="tool-header-text" th:text="#{repair.header}"></span>
diff --git a/src/main/resources/templates/misc/show-javascript.html b/src/main/resources/templates/misc/show-javascript.html
index 392ba8e8..6e643f36 100644
--- a/src/main/resources/templates/misc/show-javascript.html
+++ b/src/main/resources/templates/misc/show-javascript.html
@@ -20,7 +20,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12" id="bg-card">
+            <div class="col-md-12 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">javascript</span>
                 <span class="tool-header-text" th:text="#{showJS.header}"></span>
diff --git a/src/main/resources/templates/misc/stamp.html b/src/main/resources/templates/misc/stamp.html
index a083cce6..3f882c96 100644
--- a/src/main/resources/templates/misc/stamp.html
+++ b/src/main/resources/templates/misc/stamp.html
@@ -22,7 +22,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6"  id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">approval</span>
                 <span class="tool-header-text" th:text="#{AddStampRequest.header}"></span>
diff --git a/src/main/resources/templates/multi-page-layout.html b/src/main/resources/templates/multi-page-layout.html
index b103d1d7..dc0a0b9c 100644
--- a/src/main/resources/templates/multi-page-layout.html
+++ b/src/main/resources/templates/multi-page-layout.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">dashboard</span>
                 <span class="tool-header-text" th:text="#{pageLayout.header}"></span>
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 409e14db..92b4537f 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -15,7 +15,7 @@
       <div class="container">
         <div class="row justify-content-center">
           <div class="col-md-12">
-            <div id="bg-card">
+            <div class="bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">construction</span>
                 <span class="tool-header-text" th:text="#{multiTool.header}"></span>
diff --git a/src/main/resources/templates/overlay-pdf.html b/src/main/resources/templates/overlay-pdf.html
index 75f48a41..c427dacb 100644
--- a/src/main/resources/templates/overlay-pdf.html
+++ b/src/main/resources/templates/overlay-pdf.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">layers</span>
                 <span class="tool-header-text" th:text="#{overlay-pdfs.header}"></span>
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index a5bedc5c..7083f0f8 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">format_list_bulleted</span>
                 <span class="tool-header-text" th:text="#{pdfOrganiser.header}"></span>
diff --git a/src/main/resources/templates/pdf-to-single-page.html b/src/main/resources/templates/pdf-to-single-page.html
index 3b8f2e16..28946d05 100644
--- a/src/main/resources/templates/pdf-to-single-page.html
+++ b/src/main/resources/templates/pdf-to-single-page.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">looks_one</span>
                 <span class="tool-header-text" th:text="#{pdfToSinglePage.header}"></span>
diff --git a/src/main/resources/templates/pipeline.html b/src/main/resources/templates/pipeline.html
index ed1c1e31..991aef18 100644
--- a/src/main/resources/templates/pipeline.html
+++ b/src/main/resources/templates/pipeline.html
@@ -26,7 +26,7 @@
         <br /><br />
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
                 <div class="tool-header">
                   <span class="material-symbols-rounded tool-header-icon advance">family_history</span>
                   <span class="tool-header-text" th:text="#{pipeline.header}"></span>
diff --git a/src/main/resources/templates/remove-pages.html b/src/main/resources/templates/remove-pages.html
index 7905c7a3..93357b57 100644
--- a/src/main/resources/templates/remove-pages.html
+++ b/src/main/resources/templates/remove-pages.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">delete</span>
                 <span class="tool-header-text" th:text="#{pageRemover.header}"></span>
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index 0c58191b..386ebe72 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">rotate_right</span>
                 <span class="tool-header-text" th:text="#{rotate.header}"></span>
diff --git a/src/main/resources/templates/scale-pages.html b/src/main/resources/templates/scale-pages.html
index ff52c157..a9bc7e86 100644
--- a/src/main/resources/templates/scale-pages.html
+++ b/src/main/resources/templates/scale-pages.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon organize">fullscreen</span>
                 <span class="tool-header-text" th:text="#{scalePages.header}"></span>
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index 90738b14..c1283173 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">lock</span>
                 <span class="tool-header-text" th:text="#{addPassword.header}"></span>
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index e8ea6873..6f0bdb5f 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">water_drop</span>
                 <span class="tool-header-text" th:text="#{watermark.header}"></span>
diff --git a/src/main/resources/templates/security/auto-redact.html b/src/main/resources/templates/security/auto-redact.html
index 50a7d955..c92f7e9f 100644
--- a/src/main/resources/templates/security/auto-redact.html
+++ b/src/main/resources/templates/security/auto-redact.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">ink_eraser</span>
                 <span class="tool-header-text" th:text="#{autoRedact.header}"></span>
diff --git a/src/main/resources/templates/security/cert-sign.html b/src/main/resources/templates/security/cert-sign.html
index 09129af9..0d084906 100644
--- a/src/main/resources/templates/security/cert-sign.html
+++ b/src/main/resources/templates/security/cert-sign.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">workspace_premium</span>
                 <span class="tool-header-text" th:text="#{certSign.header}"></span>
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index ca527006..335ebc32 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">encrypted</span>
                 <span class="tool-header-text" th:text="#{permissions.header}"></span>
diff --git a/src/main/resources/templates/security/get-info-on-pdf.html b/src/main/resources/templates/security/get-info-on-pdf.html
index edab3fe5..ad6d297b 100644
--- a/src/main/resources/templates/security/get-info-on-pdf.html
+++ b/src/main/resources/templates/security/get-info-on-pdf.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon other">info</span>
                 <span class="tool-header-text" th:text="#{getPdfInfo.header}"></span>
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index f27a7e6b..1cdf7247 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">lock_open_right</span>
                 <span class="tool-header-text" th:text="#{removePassword.header}"></span>
diff --git a/src/main/resources/templates/security/remove-watermark.html b/src/main/resources/templates/security/remove-watermark.html
index eefd6240..0e275060 100644
--- a/src/main/resources/templates/security/remove-watermark.html
+++ b/src/main/resources/templates/security/remove-watermark.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">water_drop</span>
                 <span class="tool-header-text" th:text="#{remove-watermark.header}"></span>
diff --git a/src/main/resources/templates/security/sanitize-pdf.html b/src/main/resources/templates/security/sanitize-pdf.html
index 4d3cd2de..3103c744 100644
--- a/src/main/resources/templates/security/sanitize-pdf.html
+++ b/src/main/resources/templates/security/sanitize-pdf.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon security">sanitizer</span>
                 <span class="tool-header-text" th:text="#{sanitizePDF.header}"></span>
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 8a8586aa..7b6347e2 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -29,7 +29,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon sign">signature</span>
                 <span class="tool-header-text" th:text="#{sign.header}"></span>
diff --git a/src/main/resources/templates/split-by-size-or-count.html b/src/main/resources/templates/split-by-size-or-count.html
index 286d9808..f92a7380 100644
--- a/src/main/resources/templates/split-by-size-or-count.html
+++ b/src/main/resources/templates/split-by-size-or-count.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">vertical_split</span>
                 <span class="tool-header-text" th:text="#{split-by-size-or-count.header}"></span>
diff --git a/src/main/resources/templates/split-pdf-by-sections.html b/src/main/resources/templates/split-pdf-by-sections.html
index 73fdc74c..9790b1b2 100644
--- a/src/main/resources/templates/split-pdf-by-sections.html
+++ b/src/main/resources/templates/split-pdf-by-sections.html
@@ -13,7 +13,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6" id="bg-card">
+            <div class="col-md-6 bg-card">
               <div class="tool-header">
                 <span class="material-symbols-rounded tool-header-icon advance">grid_on</span>
                 <span class="tool-header-text" th:text="#{split-by-sections.header}"></span>
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index 9d402c65..9146cdf7 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -13,7 +13,7 @@
       <br><br>
       <div class="container">
         <div class="row justify-content-center">
-          <div class="col-md-6" id="bg-card">
+          <div class="col-md-6 bg-card">
             <div class="tool-header">
               <span class="material-symbols-rounded tool-header-icon organize">cut</span>
               <span class="tool-header-text" th:text="#{split.header}"></span>