From f2eb5dd7d3f5c67451663144322845db4fa1a644 Mon Sep 17 00:00:00 2001
From: Ludy87 <Ludy87@users.noreply.github.com>
Date: Sun, 19 May 2024 12:44:54 +0200
Subject: [PATCH] bg-card will be added to the class and password/username
 validation

bg-card should not be an id, ids should be unique in their use.
---
 src/main/resources/static/css/multi-tool.css  |  2 +-
 .../static/css/theme/componentes.css          |  2 +-
 src/main/resources/templates/about.html       |  2 +-
 src/main/resources/templates/account.html     | 81 ++++++++++++++++++-
 src/main/resources/templates/addUsers.html    |  2 +-
 .../resources/templates/auto-split-pdf.html   |  2 +-
 .../resources/templates/change-creds.html     |  2 +-
 .../templates/convert/file-to-pdf.html        |  2 +-
 .../templates/convert/html-to-pdf.html        |  2 +-
 .../templates/convert/img-to-pdf.html         |  2 +-
 .../templates/convert/markdown-to-pdf.html    |  2 +-
 .../templates/convert/pdf-to-csv.html         |  2 +-
 .../templates/convert/pdf-to-html.html        |  2 +-
 .../templates/convert/pdf-to-img.html         |  2 +-
 .../templates/convert/pdf-to-pdfa.html        |  2 +-
 .../convert/pdf-to-presentation.html          |  2 +-
 .../templates/convert/pdf-to-text.html        |  2 +-
 .../templates/convert/pdf-to-word.html        |  2 +-
 .../templates/convert/pdf-to-xml.html         |  2 +-
 .../templates/convert/url-to-pdf.html         |  2 +-
 src/main/resources/templates/crop.html        |  2 +-
 src/main/resources/templates/error.html       |  2 +-
 .../resources/templates/extract-page.html     |  2 +-
 src/main/resources/templates/licenses.html    |  2 +-
 src/main/resources/templates/merge-pdfs.html  |  2 +-
 .../resources/templates/misc/add-image.html   |  2 +-
 .../templates/misc/add-page-numbers.html      |  2 +-
 .../templates/misc/adjust-contrast.html       |  2 +-
 .../resources/templates/misc/auto-crop.html   |  2 +-
 .../resources/templates/misc/auto-rename.html |  2 +-
 .../templates/misc/change-metadata.html       |  2 +-
 .../resources/templates/misc/compare.html     |  2 +-
 .../templates/misc/compress-pdf.html          |  2 +-
 .../templates/misc/extract-image-scans.html   |  2 +-
 .../templates/misc/extract-images.html        |  2 +-
 .../resources/templates/misc/flatten.html     |  2 +-
 .../resources/templates/misc/ocr-pdf.html     |  2 +-
 .../templates/misc/remove-annotations.html    |  2 +-
 .../templates/misc/remove-blanks.html         |  2 +-
 src/main/resources/templates/misc/repair.html |  2 +-
 .../templates/misc/show-javascript.html       |  2 +-
 src/main/resources/templates/misc/stamp.html  |  2 +-
 .../templates/multi-page-layout.html          |  2 +-
 src/main/resources/templates/multi-tool.html  |  2 +-
 src/main/resources/templates/overlay-pdf.html |  2 +-
 .../resources/templates/pdf-organizer.html    |  2 +-
 .../templates/pdf-to-single-page.html         |  2 +-
 src/main/resources/templates/pipeline.html    |  2 +-
 .../resources/templates/remove-pages.html     |  2 +-
 src/main/resources/templates/rotate-pdf.html  |  2 +-
 src/main/resources/templates/scale-pages.html |  2 +-
 .../templates/security/add-password.html      |  2 +-
 .../templates/security/add-watermark.html     |  2 +-
 .../templates/security/auto-redact.html       |  2 +-
 .../templates/security/cert-sign.html         |  2 +-
 .../security/change-permissions.html          |  2 +-
 .../templates/security/get-info-on-pdf.html   |  2 +-
 .../templates/security/remove-password.html   |  2 +-
 .../templates/security/remove-watermark.html  |  2 +-
 .../templates/security/sanitize-pdf.html      |  2 +-
 src/main/resources/templates/sign.html        |  2 +-
 .../templates/split-by-size-or-count.html     |  2 +-
 .../templates/split-pdf-by-sections.html      |  2 +-
 src/main/resources/templates/split-pdfs.html  |  2 +-
 64 files changed, 140 insertions(+), 67 deletions(-)

diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css
index f9c359dc6..0e609652b 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 d588d6869..d767d59d0 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 c29d2ffad..c315ce747 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 727de2245..e07050ffd 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 e87726cf4..4657ecd9e 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 fa6b1d167..3e93c565c 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 30e066885..adef8b556 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 f822a5930..1386a4410 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 94b4f8428..ff0bf143e 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 ec49e1c4e..09d0461b7 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 748c5c663..af93f23c5 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 be78d1da0..23f804b09 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 395f98296..5006ad1b5 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 d6b5f871a..a0402fc15 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 7b51a86c5..98f1565cf 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 8d4a42845..fcef6e65c 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 21bf1fae7..e0fc5fbbb 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 cce75d761..c17c2675b 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 388ed80b1..8ee1237e9 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 26c13ad15..03f26e9dc 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 0af2509c8..fdb248fdf 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 61c69c245..fd357afbe 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 1f8feec28..05d171ce3 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 c91a4507c..a2f81653e 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 c8579fc08..d810fdc4a 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 40146ed23..21ecfdc78 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 a118a4c26..ea8281c81 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 1f381e03e..b4811495a 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 2dcaa06de..6b6ffcdbb 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 8a7085cf7..72bf41d0e 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 90ead65f7..604ff0bc5 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 e68a6bb4f..93cbee58f 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 74f9f95dc..093a09b52 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 4932ae916..a49df7cb2 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 eec412b41..71cc686f9 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 dd90fee5f..120f6f40d 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 8d8cb8a2e..df99b9693 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 fae40ebd0..c928d1c04 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 a4601d04f..f313cea5c 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 2694885b6..001332eea 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 392ba8e8d..6e643f363 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 a083cce63..3f882c963 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 b103d1d75..dc0a0b9cf 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 409e14db5..92b4537ff 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 75f48a419..c427dacb4 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 a5bedc5c8..7083f0f88 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 3b8f2e167..28946d051 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 ed1c1e31e..991aef186 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 7905c7a34..93357b57c 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 0c58191be..386ebe723 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 ff52c1573..a9bc7e860 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 90738b141..c1283173c 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 e8ea6873d..6f0bdb5f5 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 50a7d9559..c92f7e9fc 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 09129af9b..0d0849064 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 ca527006a..335ebc325 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 edab3fe57..ad6d297b4 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 f27a7e6b5..1cdf72471 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 eefd6240c..0e2750603 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 4d3cd2de0..3103c7443 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 8a8586aae..7b6347e2f 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 286d98086..f92a73800 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 73fdc74c0..9790b1b27 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 9d402c65e..9146cdf78 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>