diff --git a/README.md b/README.md
index 7fba0db5..50928630 100644
--- a/README.md
+++ b/README.md
@@ -222,27 +222,47 @@ The Current list of settings is
 ```yaml
 security:
   enableLogin: false # set to 'true' to enable login
-  csrfDisabled: true
+  csrfDisabled: true  # Set to 'true' to disable CSRF protection (not recommended for production)
+  loginAttemptCount: 5 # lock user account after 5 tries
+  loginResetTimeMinutes : 120 # lock account for 2 hours after x attempts
+  # initialLogin:
+  #   username: "admin" # Initial username for the first login
+  #   password: "stirling" # Initial password for the first login
+  # oauth2:
+  #   enabled: false # set to 'true' to enable login (Note: enableLogin must also be 'true' for this to work)
+  #   issuer: "" # set to any provider that supports OpenID Connect Discovery (/.well-known/openid-configuration) end-point
+  #   clientId: "" # Client ID from your provider
+  #   clientSecret: "" # Client Secret from your provider
+  #   autoCreateUser: false # set to 'true' to allow auto-creation of non-existing users
+  #   useAsUsername: "email" # Default is 'email'; custom fields can be used as the username
+  #   scopes: "openid, profile, email" # Specify the scopes for which the application will request permissions
+  #   provider: "google" # Set this to your OAuth provider's name, e.g., 'google' or 'keycloak'
 
 system:
   defaultLocale: 'en-US' # Set the default language (e.g. 'de-DE', 'fr-FR', etc)
   googlevisibility: false # 'true' to allow Google visibility (via robots.txt), 'false' to disallow
-  customStaticFilePath: '/customFiles/static/' # Directory path for custom static files
+  rootURIPath: '/pdf-app' # ie set to /pdf-app to Set the application's root URI to localhost:8080/pdf-app
+  customStaticFilePath: '/customFiles/static/' # Customise static files (e.g., logo, images, CSS) by placing them in this directory.
+  maxFileSize: 10485760 # Maximum file size for uploads in bytes.
+  enableAlphaFunctionality: false # Set to enable functionality which might need more testing before it fully goes live (This feature might make no changes)
   showUpdate: true # see when a new update is available
   showUpdateOnlyAdmin: false # Only admins can see when a new update is available, depending on showUpdate it must be set to 'true'
   customHTMLFiles: false # enable to have files placed in /customFiles/templates override the existing template html files
 
-#ui:
-#  appName: exampleAppName # Application's visible name
-#  homeDescription: I am a description # Short description or tagline shown on homepage.
-#  appNameNavbar: navbarName # Name displayed on the navigation bar
+ui:
+  appName: null # Application's visible name
+  homeDescription: null # Short description or tagline shown on homepage.
+  appNameNavbar: null # Name displayed on the navigation bar
 
 endpoints:
   toRemove: [] # List endpoints to disable (e.g. ['img-to-pdf', 'remove-pages'])
   groupsToRemove: [] # List groups to disable (e.g. ['LibreOffice'])
 
 metrics:
-  enabled: true # 'true' to enable Info APIs endpoints (view http://localhost:8080/swagger-ui/index.html#/API to learn more), 'false' to disable
+  enabled: true # 'true' to enable Info APIs (`/api/*`) endpoints, 'false' to disable
+
+autoPipeline:
+  outputFolder: /output # Directory for auto-pipeline outputs.
 ```
 
 There is an additional config file ``/configs/custom_settings.yml`` were users familiar with java and spring application.properties can input their own settings on-top of Stirling-PDFs existing ones
diff --git a/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java b/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java
index 9ec02e17..452de53e 100644
--- a/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java
+++ b/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java
@@ -54,10 +54,8 @@ public class InitialSecuritySetup {
                 && !initialPassword.isEmpty()
                 && !userService.findByUsernameIgnoreCase(initialUsername).isPresent()) {
             try {
-                if (userService.isUsernameValid(initialUsername)) {
-                    userService.saveUser(initialUsername, initialPassword, Role.ADMIN.getRoleId());
-                    logger.info("Admin user created: " + initialUsername);
-                }
+                userService.saveUser(initialUsername, initialPassword, Role.ADMIN.getRoleId());
+                logger.info("Admin user created: " + initialUsername);
             } catch (IllegalArgumentException e) {
                 logger.error("Failed to initialize security setup", e);
                 System.exit(1);
diff --git a/src/main/java/stirling/software/SPDF/config/security/UserService.java b/src/main/java/stirling/software/SPDF/config/security/UserService.java
index 1fcf63f8..0a6898f8 100644
--- a/src/main/java/stirling/software/SPDF/config/security/UserService.java
+++ b/src/main/java/stirling/software/SPDF/config/security/UserService.java
@@ -197,7 +197,13 @@ public class UserService implements UserServiceInterface {
     }
 
     public boolean hasUsers() {
-        return userRepository.count() > 0;
+        long userCount = userRepository.count();
+        if (userRepository
+                .findByUsernameIgnoreCase(Role.INTERNAL_API_USER.getRoleId())
+                .isPresent()) {
+            userCount -= 1;
+        }
+        return userCount > 0;
     }
 
     public void updateUserSettings(String username, Map<String, String> updates) {
diff --git a/src/main/resources/settings.yml.template b/src/main/resources/settings.yml.template
index d7d1fcfa..d504e82e 100644
--- a/src/main/resources/settings.yml.template
+++ b/src/main/resources/settings.yml.template
@@ -4,9 +4,12 @@
 
 security:
   enableLogin: false # set to 'true' to enable login
-  csrfDisabled: true
+  csrfDisabled: true # Set to 'true' to disable CSRF protection (not recommended for production)
   loginAttemptCount: 5 # lock user account after 5 tries
   loginResetTimeMinutes : 120 # lock account for 2 hours after x attempts
+  # initialLogin:
+  #   username: "admin" # Initial username for the first login
+  #   password: "stirling" # Initial password for the first login
   # oauth2:
   #   enabled: false # set to 'true' to enable login (Note: enableLogin must also be 'true' for this to work)
   #   issuer: "" # set to any provider that supports OpenID Connect Discovery (/.well-known/openid-configuration) end-point
@@ -20,9 +23,13 @@ security:
 system:
   defaultLocale: 'en-US' # Set the default language (e.g. 'de-DE', 'fr-FR', etc)
   googlevisibility: false # 'true' to allow Google visibility (via robots.txt), 'false' to disallow
+  rootURIPath: '/pdf-app' # ie set to /pdf-app to Set the application's root URI to localhost:8080/pdf-app
+  customStaticFilePath: '/customFiles/static/' # Customise static files (e.g., logo, images, CSS) by placing them in this directory.
+  maxFileSize: 10485760 # Maximum file size for uploads in bytes.
   enableAlphaFunctionality: false # Set to enable functionality which might need more testing before it fully goes live (This feature might make no changes)
   showUpdate: true # see when a new update is available
   showUpdateOnlyAdmin: false # Only admins can see when a new update is available, depending on showUpdate it must be set to 'true'
+  customHTMLFiles: false # enable to have files placed in /customFiles/templates override the existing template html files
 
 ui:
   appName: null # Application's visible name
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>