From 303b8e032bacf99f984e8e2a5946c574fc1454ac Mon Sep 17 00:00:00 2001
From: Rectos VX <rectos28@hotmail.com>
Date: Sun, 5 May 2024 15:19:53 +0400
Subject: [PATCH] Update: updated all pages to new theme system

---
 src/main/resources/templates/about.html       |   2 +-
 src/main/resources/templates/account.html     | 466 ++++++-------
 src/main/resources/templates/addUsers.html    |   2 +-
 .../resources/templates/auto-split-pdf.html   |  89 ++-
 .../resources/templates/change-creds.html     |   2 +-
 .../templates/convert/file-to-pdf.html        |  84 ++-
 .../templates/convert/html-to-pdf.html        |   7 +-
 .../templates/convert/img-to-pdf.html         |  13 +-
 .../templates/convert/markdown-to-pdf.html    |   7 +-
 .../templates/convert/pdf-to-csv.html         |   7 +-
 .../templates/convert/pdf-to-html.html        |   7 +-
 .../templates/convert/pdf-to-img.html         |   7 +-
 .../templates/convert/pdf-to-pdfa.html        |   7 +-
 .../convert/pdf-to-presentation.html          |   7 +-
 .../templates/convert/pdf-to-text.html        |   7 +-
 .../templates/convert/pdf-to-word.html        |   7 +-
 .../templates/convert/pdf-to-xml.html         |   7 +-
 .../templates/convert/url-to-pdf.html         |   7 +-
 src/main/resources/templates/crop.html        |   7 +-
 .../resources/templates/extract-page.html     |   7 +-
 .../resources/templates/fragments/card.html   |  35 +-
 .../resources/templates/fragments/common.html | 295 +++++----
 .../resources/templates/fragments/footer.html |  27 +-
 .../resources/templates/fragments/navbar.html | 623 +++++++++++-------
 .../templates/fragments/navbarEntry.html      |  17 +-
 src/main/resources/templates/home.html        | 284 +++++---
 src/main/resources/templates/licenses.html    |   2 +-
 src/main/resources/templates/login.html       |  42 +-
 src/main/resources/templates/merge-pdfs.html  |   9 +-
 .../resources/templates/misc/add-image.html   |   7 +-
 .../templates/misc/add-page-numbers.html      |   7 +-
 .../templates/misc/adjust-contrast.html       |   7 +-
 .../resources/templates/misc/auto-crop.html   |   7 +-
 .../resources/templates/misc/auto-rename.html |   7 +-
 .../templates/misc/change-metadata.html       |  19 +-
 .../resources/templates/misc/compare.html     |   7 +-
 .../templates/misc/compress-pdf.html          |  86 +--
 .../templates/misc/extract-image-scans.html   |   7 +-
 .../templates/misc/extract-images.html        |   7 +-
 .../resources/templates/misc/flatten.html     |   7 +-
 .../resources/templates/misc/ocr-pdf.html     |  41 +-
 .../templates/misc/remove-annotations.html    |   7 +-
 .../templates/misc/remove-blanks.html         |   7 +-
 src/main/resources/templates/misc/repair.html |   7 +-
 .../templates/misc/show-javascript.html       |   7 +-
 src/main/resources/templates/misc/stamp.html  |   7 +-
 .../templates/multi-page-layout.html          |  15 +-
 src/main/resources/templates/multi-tool.html  | 178 ++---
 src/main/resources/templates/overlay-pdf.html |   7 +-
 .../resources/templates/pdf-organizer.html    |   7 +-
 .../templates/pdf-to-single-page.html         |   7 +-
 src/main/resources/templates/pipeline.html    | 243 ++++---
 .../resources/templates/remove-pages.html     |   7 +-
 src/main/resources/templates/rotate-pdf.html  |   7 +-
 src/main/resources/templates/scale-pages.html |  11 +-
 .../templates/security/add-password.html      |  57 +-
 .../templates/security/add-watermark.html     |   7 +-
 .../templates/security/auto-redact.html       |  19 +-
 .../templates/security/cert-sign.html         |   9 +-
 .../security/change-permissions.html          |  57 +-
 .../templates/security/get-info-on-pdf.html   |   7 +-
 .../templates/security/remove-password.html   |   7 +-
 .../templates/security/remove-watermark.html  |   7 +-
 .../templates/security/sanitize-pdf.html      |  27 +-
 src/main/resources/templates/sign.html        |   7 +-
 .../templates/split-by-size-or-count.html     |   7 +-
 .../templates/split-pdf-by-sections.html      |  13 +-
 src/main/resources/templates/split-pdfs.html  |  83 ++-
 68 files changed, 1866 insertions(+), 1250 deletions(-)

diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index 2870fb41..c29d2ffa 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"></div>
+            <div class="col-md-6" id="bg-card"></div>
           </div>
         </div>
       </div>
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index 97e50af6..c59cecc1 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -1,23 +1,24 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-9">
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-9" id="bg-card">
 
-              <!-- User Settings Title -->
-              <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
-              <hr>
-              <th:block th:if="${param.messageType != null and param.messageType.size() > 0}">
+            <!-- User Settings Title -->
+            <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
+            <th:block th:if="${param.messageType != null and param.messageType.size() > 0}">
               <div th:if="${param.messageType[0] == 'notAuthenticated'}" class="alert alert-danger">
                 <span th:text="#{notAuthenticatedMessage}">Default message if not found</span>
               </div>
@@ -33,251 +34,266 @@
               <div th:if="${param.messageType[0] == 'invalidUsername'}" class="alert alert-danger">
                 <span th:text="#{invalidUsernameMessage}">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}">
+            </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}">
               <div class="alert alert-danger" role="alert">
                 <span th:text="${error}">Error Message</span>
               </div>
-              </th:block>
-              <!-- Change Username Form -->
-              <form action="api/v1/user/change-username" method="post">
-                <div class="mb-3">
-                  <label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
-                  <input type="text" class="form-control" name="newUsername" id="newUsername" th:placeholder="#{account.newUsername}">
-                </div>
-                <div class="mb-3">
-                  <label for="currentPassword" th:text="#{password}">Password</label>
-                  <input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{password}">
-                </div>
-                <div class="mb-3">
-                  <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
-                </div>
-              </form>
+            </th:block>
+            <!-- Change Username Form -->
+            <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">
+              <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}">
+              </div>
+              <div class="mb-3">
+                <label for="currentPassword" th:text="#{password}">Password</label>
+                <input type="password" class="form-control" name="currentPassword" id="currentPassword"
+                  th:placeholder="#{password}">
+              </div>
+              <div class="mb-3">
+                <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change
+                  Username</button>
+              </div>
+            </form>
 
-              <hr> <!-- Separator Line -->
+            <!-- Change Password Form -->
+            <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">
+              <div class="mb-3">
+                <label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
+                <input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword"
+                  th:placeholder="#{account.oldPassword}">
+              </div>
+              <div class="mb-3">
+                <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
+                <input type="password" class="form-control" name="newPassword" id="newPassword"
+                  th:placeholder="#{account.newPassword}">
+              </div>
+              <div class="mb-3">
+                <label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
+                <input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword"
+                  th:placeholder="#{account.confirmNewPassword}">
+              </div>
+              <div class="mb-3">
+                <button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change
+                  Password</button>
+              </div>
+            </form>
 
-              <!-- Change Password Form -->
-              <h4 th:text="#{account.changePassword}">Change Password?</h4>
-              <form 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}">
-                </div>
-                <div class="mb-3">
-                  <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
-                  <input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{account.newPassword}">
-                </div>
-                <div class="mb-3">
-                  <label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
-                  <input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword" th:placeholder="#{account.confirmNewPassword}">
-                </div>
-                <div class="mb-3">
-                  <button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
-                </div>
-              </form>
-
-              <hr>
-
-              <div class="card">
-                <div class="card-header" th:text="#{account.yourApiKey}"></div>
-                <div class="card-body">
-                  <div class="input-group mb-3">
-                    <input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>
-                    <div class="input-group-append">
-                      <button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
-                        <img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">
-                      </button>
-                      <button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">
-                        <img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
-                      </button>
-                      <button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
-                        <img class="blackwhite-icon" id="arrowIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
-                      </button>
-                    </div>
+            <!-- API Key Form -->
+            <h4 th:text="#{account.yourApiKey}">API Key</h4>
+            <div class="card mt-4 mb-4">
+              <div class="card-header" th:text="#{account.yourApiKey}"></div>
+              <div class="card-body">
+                <div class="input-group mb-3">
+                  <input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}"
+                    readonly>
+                  <div class="input-group-append">
+                    <button class="btn btn-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
+                      <span class="material-symbols-rounded">
+                        content_copy
+                      </span>
+                    </button>
+                    <button class="btn btn-secondary" id="showBtn" type="button" onclick="showApiKey()">
+                      <span class="material-symbols-rounded" id="eyeIcon">
+                        visibility
+                      </span>
+                    </button>
+                    <button class="btn btn-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
+                      <span class="material-symbols-rounded">
+                        refresh
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
+            </div>
 
-              <script>
-                function copyToClipboard() {
-                  const apiKeyElement = document.getElementById("apiKey");
-                  apiKeyElement.select();
-                  document.execCommand("copy");
+            <script>
+              function copyToClipboard() {
+                const apiKeyElement = document.getElementById("apiKey");
+                apiKeyElement.select();
+                document.execCommand("copy");
+              }
+
+              function showApiKey() {
+                const apiKeyElement = document.getElementById("apiKey");
+                const copyBtn = document.getElementById("copyBtn");
+                const eyeIcon = document.getElementById("eyeIcon");
+                if (apiKeyElement.type === "password") {
+                  apiKeyElement.type = "text";
+                  eyeIcon.textContent = "visibility_off";
+                  copyBtn.disabled = false;  // Enable copy button when API key is visible
+                } else {
+                  apiKeyElement.type = "password";
+                  eyeIcon.textContent = "visibility";
+                  copyBtn.disabled = true;  // Disable copy button when API key is hidden
                 }
+              }
 
-                function showApiKey() {
-                  const apiKeyElement = document.getElementById("apiKey");
-                  const copyBtn = document.getElementById("copyBtn");
-                  const eyeIcon = document.getElementById("eyeIcon");
-                  if (apiKeyElement.type === "password") {
-                    apiKeyElement.type = "text";
-                    eyeIcon.src = "images/eye-slash.svg";
-                    copyBtn.disabled = false;  // Enable copy button when API key is visible
+              document.addEventListener("DOMContentLoaded", async function () {
+                try {
+                  let response = await fetch('/api/v1/user/get-api-key', { method: 'POST' });
+                  if (response.status === 200) {
+                    let apiKey = await response.text();
+                    manageUIState(apiKey);
                   } else {
-                    apiKeyElement.type = "password";
-                    eyeIcon.src = "images/eye.svg";
-                    copyBtn.disabled = true;  // Disable copy button when API key is hidden
+                    manageUIState(null);
                   }
+                } catch (error) {
+                  console.error('There was an error:', error);
                 }
+              });
 
-                document.addEventListener("DOMContentLoaded", async function() {
-                  try {
-                    let response = await fetch('/api/v1/user/get-api-key', { method: 'POST' });
-                    if (response.status === 200) {
-                      let apiKey = await response.text();
-                      manageUIState(apiKey);
-                    } else {
-                      manageUIState(null);
-                    }
-                  } catch (error) {
-                    console.error('There was an error:', error);
-                  }
-                });
-
-                async function refreshApiKey() {
-                  try {
-                    let response = await fetch('/api/v1/user/update-api-key', { method: 'POST' });
-                    if (response.status === 200) {
-                      let apiKey = await response.text();
-                      manageUIState(apiKey);
-                      document.getElementById("apiKey").type = 'text';
-                      document.getElementById("copyBtn").disabled = false;
-                    } else {
-                      alert('Error refreshing API key.');
-                    }
-                  } catch (error) {
-                    console.error('There was an error:', error);
-                  }
-                }
-
-                function manageUIState(apiKey) {
-                  const apiKeyElement = document.getElementById("apiKey");
-                  const showBtn = document.getElementById("showBtn");
-                  const copyBtn = document.getElementById("copyBtn");
-
-                  if (apiKey && apiKey.trim().length > 0) {
-                    apiKeyElement.value = apiKey;
-                    showBtn.disabled = false;
-                    copyBtn.disabled = true;
+              async function refreshApiKey() {
+                try {
+                  let response = await fetch('/api/v1/user/update-api-key', { method: 'POST' });
+                  if (response.status === 200) {
+                    let apiKey = await response.text();
+                    manageUIState(apiKey);
+                    document.getElementById("apiKey").type = 'text';
+                    document.getElementById("copyBtn").disabled = false;
                   } else {
-                    apiKeyElement.value = "";
-                    showBtn.disabled = true;
-                    copyBtn.disabled = true;
+                    alert('Error refreshing API key.');
                   }
+                } catch (error) {
+                  console.error('There was an error:', error);
                 }
+              }
 
-                document.addEventListener("DOMContentLoaded", function() {
-                  const form = document.querySelector('form[action="api/v1/user/change-password"]');
+              function manageUIState(apiKey) {
+                const apiKeyElement = document.getElementById("apiKey");
+                const showBtn = document.getElementById("showBtn");
+                const copyBtn = document.getElementById("copyBtn");
 
-                  form.addEventListener('submit', function(event) {
-                    const newPassword = document.getElementById('newPassword').value;
-                    const confirmNewPassword = document.getElementById('confirmNewPassword').value;
+                if (apiKey && apiKey.trim().length > 0) {
+                  apiKeyElement.value = apiKey;
+                  showBtn.disabled = false;
+                  copyBtn.disabled = true;
+                } else {
+                  apiKeyElement.value = "";
+                  showBtn.disabled = true;
+                  copyBtn.disabled = true;
+                }
+              }
 
-                    if (newPassword !== confirmNewPassword) {
-                      alert('New Password and Confirm New Password must match.');
-                      event.preventDefault(); // Prevent form submission
-                    }
-                  });
+              document.addEventListener("DOMContentLoaded", function () {
+                const form = document.querySelector('form[action="api/v1/user/change-password"]');
+
+                form.addEventListener('submit', function (event) {
+                  const newPassword = document.getElementById('newPassword').value;
+                  const confirmNewPassword = document.getElementById('confirmNewPassword').value;
+
+                  if (newPassword !== confirmNewPassword) {
+                    alert('New Password and Confirm New Password must match.');
+                    event.preventDefault(); // Prevent form submission
+                  }
                 });
-              </script>
+              });
+            </script>
 
-              <hr> <!-- Separator Line -->
+            <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
+            <div id="bg-card" class="container mt-4">
+              <h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
+              <table id="settingsTable" class="table table-bordered table-sm table-striped">
+                <thead>
+                  <tr>
+                    <th th:text="#{account.property}">Property</th>
+                    <th th:text="#{account.accountSettings}">Account Setting</th>
+                    <th th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <!-- This will be dynamically populated by JavaScript -->
+                </tbody>
+              </table>
 
-              <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
-              <div class="container mt-4">
-                <h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
-                <table id="settingsTable" class="table table-bordered table-sm table-striped">
-                  <thead>
-                    <tr>
-                      <th th:text="#{account.property}">Property</th>
-                      <th  th:text="#{account.accountSettings}">Account Setting</th>
-                      <th  th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <!-- This will be dynamically populated by JavaScript -->
-                  </tbody>
-                </table>
-
-                <div class="buttons-container mt-3 text-center">
-                  <button id="syncToBrowser" class="btn btn-primary btn-sm" th:text="#{account.syncToBrowser}">Sync Account -> Browser</button>
-                  <button id="syncToAccount" class="btn btn-secondary btn-sm" th:text="#{account.syncToAccount}">Sync Account <- Browser</button>
-                </div>
+              <div class="buttons-container mt-3 text-center">
+                <button id="syncToBrowser" class="btn btn-primary btn-sm" th:text="#{account.syncToBrowser}">Sync
+                  Account -> Browser</button>
+                <button id="syncToAccount" class="btn btn-secondary btn-sm" th:text="#{account.syncToAccount}">Sync
+                  Account <- Browser</button>
               </div>
+            </div>
 
-              <script th:inline="javascript">
-                document.addEventListener("DOMContentLoaded", function() {
-                  const settingsTableBody = document.querySelector("#settingsTable tbody");
+            <script th:inline="javascript">
+              document.addEventListener("DOMContentLoaded", function () {
+                const settingsTableBody = document.querySelector("#settingsTable tbody");
 
-                  /*<![CDATA[*/
-                  var accountSettingsString = /*[[${settings}]]*/ {};
-                  /*]]>*/
-                  var accountSettings = JSON.parse(accountSettingsString);
+                /*<![CDATA[*/
+                var accountSettingsString = /*[[${settings}]]*/ {};
+                /*]]>*/
+                var accountSettings = JSON.parse(accountSettingsString);
 
-                  let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
+                let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
 
-                  allKeys.forEach(key => {
-                    if(key === 'debug' || key === '0' || key === '1') return;  // Ignoring specific keys
+                allKeys.forEach(key => {
+                  if (key === 'debug' || key === '0' || key === '1') return;  // Ignoring specific keys
 
-                    const accountValue = accountSettings[key] || '-';
-                    const browserValue = localStorage.getItem(key) || '-';
+                  const accountValue = accountSettings[key] || '-';
+                  const browserValue = localStorage.getItem(key) || '-';
 
-                    const row = settingsTableBody.insertRow();
-                    const propertyCell = row.insertCell(0);
-                    const accountCell = row.insertCell(1);
-                    const browserCell = row.insertCell(2);
-
-                    propertyCell.textContent = key;
-                    accountCell.textContent = accountValue;
-                    browserCell.textContent = browserValue;
-                  });
-
-                  document.getElementById('syncToBrowser').addEventListener('click', function() {
-                    // First, clear the local storage
-                    localStorage.clear();
-
-                    // Then, set the account settings to local storage
-                    for (let key in accountSettings) {
-                      if(key !== 'debug' && key !== '0' && key !== '1') { // Only sync non-ignored keys
-                        localStorage.setItem(key, accountSettings[key]);
-                      }
-                    }
-                    location.reload();  // Refresh the page after sync
-                  });
-
-                  document.getElementById('syncToAccount').addEventListener('click', function() {
-                    let form = document.createElement("form");
-                    form.method = "POST";
-                    form.action = "api/v1/user/updateUserSettings";  // Your endpoint URL
-
-                    for (let i = 0; i < localStorage.length; i++) {
-                      const key = localStorage.key(i);
-                      if(key !== 'debug' && key !== '0' && key !== '1') { // Only send non-ignored keys
-                        let hiddenField = document.createElement("input");
-                        hiddenField.type = "hidden";
-                        hiddenField.name = key;
-                        hiddenField.value = localStorage.getItem(key);
-                        form.appendChild(hiddenField);
-                      }
-                    }
-
-                    document.body.appendChild(form);
-                    form.submit();
-                  });
+                  const row = settingsTableBody.insertRow();
+                  const propertyCell = row.insertCell(0);
+                  const accountCell = row.insertCell(1);
+                  const browserCell = row.insertCell(2);
 
+                  propertyCell.textContent = key;
+                  accountCell.textContent = accountValue;
+                  browserCell.textContent = browserValue;
                 });
-              </script>
-              <div class="mb-3 mt-4 text-center">
-                <a href="logout" role="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</a>
-                <a th:if="${role == 'ROLE_ADMIN'}" class="btn btn-info" href="addUsers" role="button" th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
-              </div>
+
+                document.getElementById('syncToBrowser').addEventListener('click', function () {
+                  // First, clear the local storage
+                  localStorage.clear();
+
+                  // Then, set the account settings to local storage
+                  for (let key in accountSettings) {
+                    if (key !== 'debug' && key !== '0' && key !== '1') { // Only sync non-ignored keys
+                      localStorage.setItem(key, accountSettings[key]);
+                    }
+                  }
+                  location.reload();  // Refresh the page after sync
+                });
+
+                document.getElementById('syncToAccount').addEventListener('click', function () {
+                  let form = document.createElement("form");
+                  form.method = "POST";
+                  form.action = "api/v1/user/updateUserSettings";  // Your endpoint URL
+
+                  for (let i = 0; i < localStorage.length; i++) {
+                    const key = localStorage.key(i);
+                    if (key !== 'debug' && key !== '0' && key !== '1') { // Only send non-ignored keys
+                      let hiddenField = document.createElement("input");
+                      hiddenField.type = "hidden";
+                      hiddenField.name = key;
+                      hiddenField.value = localStorage.getItem(key);
+                      form.appendChild(hiddenField);
+                    }
+                  }
+
+                  document.body.appendChild(form);
+                  form.submit();
+                });
+
+              });
+            </script>
+            <div class="mb-3 mt-4 text-center">
+              <a href="logout" role="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</a>
+              <a th:if="${role == 'ROLE_ADMIN'}" class="btn btn-info" href="addUsers" role="button"
+                th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
             </div>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html
index 850beb9e..81027825 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">
+            <div class="col-md-8" id="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 914b9d60..fa6b1d16 100644
--- a/src/main/resources/templates/auto-split-pdf.html
+++ b/src/main/resources/templates/auto-split-pdf.html
@@ -1,43 +1,62 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{autoSplitPDF.title}, header=#{autoSplitPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoSplitPDF.header}"></h2>
-              <!-- Added a brief description -->
-              <p th:text="#{autoSplitPDF.description}"></p>
-              <ul>
-                <li th:text="#{autoSplitPDF.selectText.1}"></li>
-                <li th:text="#{autoSplitPDF.selectText.2}"></li>
-                <li th:text="#{autoSplitPDF.selectText.3}"></li>
-                <li th:text="#{autoSplitPDF.selectText.4}"></li>
-              </ul>
-              <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-split-pdf}">
-                <p th:text="#{autoSplitPDF.formPrompt}"></p>
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="duplexMode" id="duplexMode">
-                  <label class="ms-3" for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
-                </div>
-                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(minimal).pdf}" download th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
-                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(with%20instructions).pdf}" download th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
-              </form>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{autoSplitPDF.title}, header=#{autoSplitPDF.header})}">
+  </th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="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>
             </div>
+
+            <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-split-pdf}">
+              <p th:text="#{autoSplitPDF.formPrompt}"></p>
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+              <div class="form-check ms-3">
+                <input type="checkbox" name="duplexMode" id="duplexMode">
+                <label for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
+              </div>
+              <p>
+                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                  aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
+              </p>
+              <div class="collapse" id="info">
+                <!-- Added a brief description -->
+                <p th:text="#{autoSplitPDF.description}"></p>
+                <ul>
+                  <li th:text="#{autoSplitPDF.selectText.1}"></li>
+                  <li th:text="#{autoSplitPDF.selectText.2}"></li>
+                  <li th:text="#{autoSplitPDF.selectText.3}"></li>
+                  <li th:text="#{autoSplitPDF.selectText.4}"></li>
+                </ul>
+                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(minimal).pdf}" download
+                    th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
+                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(with%20instructions).pdf}" download
+                    th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
+              </div>
+
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/change-creds.html b/src/main/resources/templates/change-creds.html
index 08a3ade7..feee43c1 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">
+            <div class="col-md-9" id="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 d8c8b969..f822a593 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -1,43 +1,57 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{fileToPDF.title}, header=#{fileToPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{fileToPDF.header}"></h2>
-              <p th:text="#{processTimeWarning}"></p>
-              <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/file/pdf}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{fileToPDF.credit}"></p>
-              <p class="mt-3" th:text="#{fileToPDF.supportedFileTypes}"></p>
-              <p>Microsoft Word: (DOC, DOCX, DOT, DOTX)</p>
-              <p>Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)</p>
-              <p>Microsoft PowerPoint: (PPT, PPTX)</p>
-              <p>OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)</p>
-              <p>Plain Text: (TXT, TEXT, XML)</p>
-              <p>Rich Text Format: (RTF)</p>
-              <p>Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)</p>
-              <p>HTML: (HTML)</p>
-              <p>Lotus Word Pro: (LWP)</p>
-              <p>StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)</p>
-              <p>Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)</p>
-              <a href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{fileToPDF.title}, header=#{fileToPDF.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="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>
             </div>
+            <p th:text="#{processTimeWarning}"></p>
+            <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/file/pdf}">
+              <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
+              <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                aria-expanded="false" aria-controls="info" th:text="#{fileToPDF.supportedFileTypesInfo}"></a>
+              <div class="collapse" id="info">
+                <p class="mt-3" th:text="#{fileToPDF.credit}"></p>
+                <p class="mt-3" th:text="#{fileToPDF.supportedFileTypes}"></p>
+                <p>Microsoft Word: (DOC, DOCX, DOT, DOTX)</p>
+                <p>Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)</p>
+                <p>Microsoft PowerPoint: (PPT, PPTX)</p>
+                <p>OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)</p>
+                <p>Plain Text: (TXT, TEXT, XML)</p>
+                <p>Rich Text Format: (RTF)</p>
+                <p>Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)</p>
+                <p>HTML: (HTML)</p>
+                <p>Lotus Word Pro: (LWP)</p>
+                <p>StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)</p>
+                <p>Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)</p>
+                <a
+                  href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
+              </div>
+              <br>
+              
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
+            </form>
+
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html
index 3c426917..94b4f842 100644
--- a/src/main/resources/templates/convert/html-to-pdf.html
+++ b/src/main/resources/templates/convert/html-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="mb-3">
-              <h2 th:text="#{HTMLToPDF.header}"></h2>
+            <div class="mb-3"  id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/html/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/html,application/zip' )}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index a8633ad1..ec49e1c4 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{imageToPDF.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/img/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*', inputText=#{imgPrompt})}"></div>
                 <div class="mb-3">
@@ -25,9 +28,9 @@
                   </select>
                 </div>
 
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="autoRotate" id="autoRotate">
-                  <label class="ms-3" for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="autoRotate" id="autoRotate">
+                  <label for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
                 </div>
                 <div class="mb-3">
                   <label th:text="#{pdfToImage.colorType}"></label>
diff --git a/src/main/resources/templates/convert/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html
index 7a51a29c..748c5c66 100644
--- a/src/main/resources/templates/convert/markdown-to-pdf.html
+++ b/src/main/resources/templates/convert/markdown-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{MarkdownToPDF.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/markdown/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/markdown')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
diff --git a/src/main/resources/templates/convert/pdf-to-csv.html b/src/main/resources/templates/convert/pdf-to-csv.html
index 9fba9430..be78d1da 100644
--- a/src/main/resources/templates/convert/pdf-to-csv.html
+++ b/src/main/resources/templates/convert/pdf-to-csv.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToCSV.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="PDFToCSVForm" th:action="@{api/v1/convert/pdf/csv}" method="post" enctype="multipart/form-data">
                 <input  id="pageId" type="hidden" name="pageId">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-html.html b/src/main/resources/templates/convert/pdf-to-html.html
index c9256805..395f9829 100644
--- a/src/main/resources/templates/convert/pdf-to-html.html
+++ b/src/main/resources/templates/convert/pdf-to-html.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToHTML.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/html}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index 039c52e0..d6b5f871 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfToImage.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <p th:text="#{processTimeWarning}"></p>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/img}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-pdfa.html b/src/main/resources/templates/convert/pdf-to-pdfa.html
index 6494cf9c..2e89250b 100644
--- a/src/main/resources/templates/convert/pdf-to-pdfa.html
+++ b/src/main/resources/templates/convert/pdf-to-pdfa.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfToPDFA.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <p th:text="#{pdfToPDFA.tip}"></p>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/pdfa}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index 48d27d24..8d4a4284 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToPresentation.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/presentation}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html
index 9877be8f..4d11c8ee 100644
--- a/src/main/resources/templates/convert/pdf-to-text.html
+++ b/src/main/resources/templates/convert/pdf-to-text.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToText.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/text}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index fbbbf45d..cce75d76 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToWord.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/word}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/pdf-to-xml.html b/src/main/resources/templates/convert/pdf-to-xml.html
index cad43da2..388ed80b 100644
--- a/src/main/resources/templates/convert/pdf-to-xml.html
+++ b/src/main/resources/templates/convert/pdf-to-xml.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToXML.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/xml}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/convert/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html
index 714bd1c4..26c13ad1 100644
--- a/src/main/resources/templates/convert/url-to-pdf.html
+++ b/src/main/resources/templates/convert/url-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{URLToPDF.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/url/pdf}">
                 <input type="text" class="form-control" id="urlInput" name="urlInput" placeholder="http://">
                 <br>
diff --git a/src/main/resources/templates/crop.html b/src/main/resources/templates/crop.html
index f2049572..0af2509c 100644
--- a/src/main/resources/templates/crop.html
+++ b/src/main/resources/templates/crop.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{crop.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="cropForm" action="/api/v1/general/crop" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <input id="x" type="hidden" name="x">
diff --git a/src/main/resources/templates/extract-page.html b/src/main/resources/templates/extract-page.html
index 9d97b3b4..1f8feec2 100644
--- a/src/main/resources/templates/extract-page.html
+++ b/src/main/resources/templates/extract-page.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pageExtracter.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form th:action="@{api/v1/general/rearrange-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <input type="hidden" id="customMode" name="customMode" value="">
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index 3f5517d6..fdf68b64 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,12 +1,23 @@
-<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" th:data-bs-tags="${tags}">
-              <a th:href="${cardLink}">
-                <div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
-                  <img th:if="${svgPath}" class="card-icon home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
-                  <h5 class="card-title  ms-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
-                </div>
-                <p class="card-text" th:text="${cardText}"></p>
-              </a>
-              <div class="favorite-icon" onclick="toggleFavorite(this)">
-                <img src="images/star.svg" alt="Favorite">
-              </div>
-            </div>
+<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
+  th:data-bs-tags="${tags}">
+  <a th:href="${cardLink}">
+    <div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
+
+
+      
+      <div class="icon" alt="icon" th:class="@{${toolGroup}}">
+        <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
+      </div>
+
+
+      <h5 class="card-title  ms-2" th:text="${cardTitle}"></h5>
+      <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
+    </div>
+    <p class="card-text" th:text="${cardText}"></p>
+  </a>
+  <div class="favorite-icon" onclick="toggleFavorite(this)">
+    <span class="material-symbols-rounded no-fill">
+      star
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 98bf27e9..d8b9b133 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -1,162 +1,171 @@
 <th:block th:fragment="head">
-    <!-- Title -->
-    <title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
+  <!-- Title -->
+  <title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
 
-    <!-- Metadata -->
-    <meta charset="utf-8">
-    <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')">
-    <meta name="msapplication-TileColor" content="#2d89ef">
-    <meta name="theme-color" content="#ffffff">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Metadata -->
+  <meta charset="utf-8">
+  <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')">
+  <meta name="msapplication-TileColor" content="#2d89ef">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- Icons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
-    <link rel="manifest" href="/site.webmanifest?v=2">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#ca2b2a">
-    <link rel="shortcut icon" href="/favicon.ico?v=2">
-    <meta name="apple-mobile-web-app-title" content="Stirling PDF">
-    <meta name="application-name" content="Stirling PDF">
-    <meta name="msapplication-TileColor" content="#00aba9">
-    <meta name="theme-color" content="#ffffff">
+  <!-- Icons -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
+  <link rel="manifest" href="/site.webmanifest?v=2">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#ca2b2a">
+  <link rel="shortcut icon" href="/favicon.ico?v=2">
+  <meta name="apple-mobile-web-app-title" content="Stirling PDF">
+  <meta name="application-name" content="Stirling PDF">
+  <meta name="msapplication-TileColor" content="#00aba9">
+  <meta name="theme-color" content="#ffffff">
 
-    <!-- jQuery -->
-    <script src="js/thirdParty/jquery.min.js"></script>
-    <script src="js/thirdParty/jszip.min.js"></script>
+  <!-- jQuery -->
+  <script src="js/thirdParty/jquery.min.js"></script>
+  <script src="js/thirdParty/jszip.min.js"></script>
 
-    <!-- Bootstrap -->
-    <script src="js/thirdParty/popper.min.js"></script>
-    <script src="js/thirdParty/bootstrap.min.js"></script>
-    <link rel="stylesheet" href="css/bootstrap.min.css">
+  <!-- Bootstrap -->
+  <script src="js/thirdParty/popper.min.js"></script>
+  <script src="js/thirdParty/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="css/bootstrap.min.css">
 
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" href="css/bootstrap-icons.min.css">
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" href="css/bootstrap-icons.min.css">
 
-    <!-- PDF.js -->
-    <script th:src="@{pdfjs/pdf.js}"></script>
+  <!-- PDF.js -->
+  <script th:src="@{pdfjs/pdf.js}"></script>
 
-    <!-- PDF-Lib -->
-    <script src="js/thirdParty/pdf-lib.min.js"></script>
+  <!-- PDF-Lib -->
+  <script src="js/thirdParty/pdf-lib.min.js"></script>
 
-    <!-- Custom -->
-    <link rel="stylesheet" href="css/general.css">
-    <link rel="stylesheet" th:href="@{css/light-mode.css}" id="light-mode-styles">
-    <link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
-    <link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled>
-    <link rel="stylesheet" href="css/tab-container.css">
-    <link rel="stylesheet" href="css/navbar.css">
+  <!-- Custom -->
+  <link rel="stylesheet" href="css/general.css">
+  <link rel="stylesheet" th:href="@{css/theme/theme.css}">
+  <link rel="stylesheet" th:href="@{css/theme/componentes.css}">
+  <link rel="stylesheet" th:href="@{css/theme/theme.light.css}" id="light-mode-styles">
+  <link rel="stylesheet" th:href="@{css/theme/theme.dark.css}" id="dark-mode-styles">
+  <link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled>
+  <link rel="stylesheet" href="css/tab-container.css">
+  <link rel="stylesheet" href="css/navbar.css">
 
-    <link rel="stylesheet" th:href="@{/css/error.css}" th:if="${error}">
+  <link rel="stylesheet" th:href="@{/css/error.css}" th:if="${error}">
 
-    <link rel="stylesheet" href="css/home.css" th:if="${currentPage == 'home'}">
-    <link rel="stylesheet" href="css/account.css" th:if="${currentPage == 'account'}">
-    <link rel="stylesheet" href="css/licenses.css" th:if="${currentPage == 'licenses'}">
-    <link rel="stylesheet" href="css/multi-tool.css" th:if="${currentPage == 'multi-tool'}">
-    <link rel="stylesheet" href="css/rotate-pdf.css" th:if="${currentPage == 'rotate-pdf'}">
-    <link rel="stylesheet" href="css/stamp.css" th:if="${currentPage == 'stamp'}">
-    <link rel="stylesheet" href="css/fileSelect.css">
-    <link rel="stylesheet" href="css/footer.css">
+  <link rel="stylesheet" href="css/home.css" th:if="${currentPage == 'home'}">
+  <link rel="stylesheet" href="css/account.css" th:if="${currentPage == 'account'}">
+  <link rel="stylesheet" href="css/licenses.css" th:if="${currentPage == 'licenses'}">
+  <link rel="stylesheet" href="css/multi-tool.css" th:if="${currentPage == 'multi-tool'}">
+  <link rel="stylesheet" href="css/rotate-pdf.css" th:if="${currentPage == 'rotate-pdf'}">
+  <link rel="stylesheet" href="css/stamp.css" th:if="${currentPage == 'stamp'}">
+  <link rel="stylesheet" href="css/fileSelect.css">
+  <link rel="stylesheet" href="css/footer.css">
 
-    <!-- Help Modal -->
-    <link rel="stylesheet" href="css/errorBanner.css">
+  <!-- Google MD Icons -->
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
 
-    <script src="js/tab-container.js"></script>
-    <script src="js/darkmode.js"></script>
-  </th:block>
+  <!-- Help Modal -->
+  <link rel="stylesheet" href="css/errorBanner.css">
 
-<th:block th:fragment="game">
-    <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
-      <script th:inline="javascript">
-        console.log("loaded game");
-        $(document).ready(function() {
-
-           // Find the file input within the form
-          var fileInput = $('input[type="file"]');
-          
-          // Find the closest enclosing form of the file input
-          var form = fileInput.closest('form');
-          
-          // Find the submit button within the form
-          var submitButton = form.find('button[type="submit"], input[type="submit"]');
-          
-          const boredWaitingText = /*[[#{bored}]]*/ 'Bored Waiting?';
-          const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete';
-          window.downloadCompleteText = downloadCompleteText;
-          // Create the 'show-game-btn' button
-          var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button><br><br>');
-          
-          // Insert the 'show-game-btn' just above the submit button
-          submitButton.before(gameButton);
-
-          function loadGameScript(callback) {
-            console.log('loadGameScript called');
-            const script = document.createElement('script');
-            script.src = 'js/game.js';
-            script.onload = callback;
-            document.body.appendChild(script);
-          }
-          let gameScriptLoaded = false;
-          const gameDialog = document.getElementById('game-container-wrapper');
-          $('#show-game-btn').on('click', function() {
-            console.log('Show game button clicked');
-            if (!gameScriptLoaded) {
-              console.log('Show game button load');
-              loadGameScript(function() {
-                console.log('Game script loaded');
-                window.initializeGame();
-                gameScriptLoaded = true;
-              });
-            } else {
-              window.resetGame();
-            }
-            gameDialog.showModal();
-          });
-          gameDialog.addEventListener("click", e => {
-            const dialogDimensions = gameDialog.getBoundingClientRect()
-            if (
-              e.clientX < dialogDimensions.left ||
-              e.clientX > dialogDimensions.right ||
-              e.clientY < dialogDimensions.top ||
-              e.clientY > dialogDimensions.bottom
-            ) {
-              gameDialog.close();
-            }
-          })
-        })
-      </script>
-      <div id="game-container">
-        <div id="lives">Lives: 3</div>
-        <div id="score">Score: 0</div>
-        <div id="high-score">High Score: 0</div>
-        <div id="level">Level: 1</div>
-        <img src="favicon.svg" class="player" id="player" alt="favicon">
-      </div>
-      <link rel="stylesheet" href="css/game.css">
-    </dialog>
+  <script src="js/tab-container.js"></script>
+  <script src="js/darkmode.js"></script>
 </th:block>
 
-<th:block th:fragment="fileSelector(name, multiple)" th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
-                <script th:inline="javascript">
-                  const pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
-                  const multiple = [[${multiple}]] || false;
-                  const remoteCall = [[${remoteCall}]] || true;
-                </script>
-                <script src="js/downloader.js"></script>
+<th:block th:fragment="game">
+  <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
+    <script th:inline="javascript">
+      console.log("loaded game");
+      $(document).ready(function () {
 
-                <div class="custom-file-chooser" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
-                  <div class="mb-3">
-                    <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:required="${notRequired} ? null : 'required'">
-                  </div>
-                  <div class="selected-files"></div>
-                </div>
+        // Find the file input within the form
+        var fileInput = $('input[type="file"]');
 
-                <div class="progressBarContainer" style="display: none; position: relative;">
-                  <div class="progress" style="height: 1rem;">
-                    <div class="progressBar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
-                      <span class="visually-hidden">Loading...</span>
-                    </div>
-                  </div>
-                </div>
-                <script src="js/fileInput.js"></script>
+        // Find the closest enclosing form of the file input
+        var form = fileInput.closest('form');
+
+        // Find the submit button within the form
+        var submitButton = form.find('button[type="submit"], input[type="submit"]');
+
+        const boredWaitingText = /*[[#{bored}]]*/ 'Bored Waiting?';
+        const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete';
+        window.downloadCompleteText = downloadCompleteText;
+        // Create the 'show-game-btn' button
+        var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button><br><br>');
+
+        // Insert the 'show-game-btn' just above the submit button
+        submitButton.before(gameButton);
+
+        function loadGameScript(callback) {
+          console.log('loadGameScript called');
+          const script = document.createElement('script');
+          script.src = 'js/game.js';
+          script.onload = callback;
+          document.body.appendChild(script);
+        }
+        let gameScriptLoaded = false;
+        const gameDialog = document.getElementById('game-container-wrapper');
+        $('#show-game-btn').on('click', function () {
+          console.log('Show game button clicked');
+          if (!gameScriptLoaded) {
+            console.log('Show game button load');
+            loadGameScript(function () {
+              console.log('Game script loaded');
+              window.initializeGame();
+              gameScriptLoaded = true;
+            });
+          } else {
+            window.resetGame();
+          }
+          gameDialog.showModal();
+        });
+        gameDialog.addEventListener("click", e => {
+          const dialogDimensions = gameDialog.getBoundingClientRect()
+          if (
+            e.clientX < dialogDimensions.left ||
+            e.clientX > dialogDimensions.right ||
+            e.clientY < dialogDimensions.top ||
+            e.clientY > dialogDimensions.bottom
+          ) {
+            gameDialog.close();
+          }
+        })
+      })
+    </script>
+    <div id="game-container">
+      <div id="lives">Lives: 3</div>
+      <div id="score">Score: 0</div>
+      <div id="high-score">High Score: 0</div>
+      <div id="level">Level: 1</div>
+      <img src="favicon.svg" class="player" id="player" alt="favicon">
+    </div>
+    <link rel="stylesheet" href="css/game.css">
+  </dialog>
+</th:block>
+
+<th:block th:fragment="fileSelector(name, multiple)"
+  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
+  <script th:inline="javascript">
+    const pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
+    const multiple = [[${ multiple }]] || false;
+    const remoteCall = [[${ remoteCall }]] || true;
+  </script>
+  <script src="js/downloader.js"></script>
+
+  <div class="custom-file-chooser"
+    th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
+    <div class="mb-3">
+      <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple
+        th:required="${notRequired} ? null : 'required'">
+    </div>
+    <div class="selected-files"></div>
+  </div>
+
+  <div class="progressBarContainer" style="display: none; position: relative;">
+    <div class="progress" style="height: 1rem;">
+      <div class="progressBar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
+        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <script src="js/fileInput.js"></script>
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index a7ed547f..8afd54a4 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,19 +1,8 @@
-<footer th:fragment="footer" id="footer" class="text-center py-3">
-        <div class="footer-center">
-          <a href="https://github.com/Stirling-Tools/Stirling-PDF" target="_blank" class="mx-1" th:title="#{visitGithub}">
-            <img src="images/github.svg" alt="github">
-          </a>
-          <a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1" th:title="#{seeDockerHub}">
-            <img src="images/docker.svg" alt="docker">
-          </a>
-          <a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1" th:title="#{joinDiscord}">
-            <img src="images/discord.svg" alt="discord">
-          </a>
-          <a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1" th:title="#{donate}">
-            <img src="images/suit-heart-fill.svg" alt="suit-heart-fill">
-          </a>
-        </div>
-        <div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
-        <a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
-      </footer>
-
+<footer th:fragment="footer" id="footer" class="text-center py-5">
+  <div class="footer-center">
+    <div class="footer-powered-by">
+      <span th:text="#{poweredBy} + ' Stirling PDF'"></span>
+    </div>
+    <a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
+  </div>
+</footer>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index c2a8ec26..2296d258 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,226 +1,407 @@
 <div th:fragment="navbar" class="mx-auto">
-          <script src="js/languageSelection.js"></script>
-          <script th:inline="javascript">
-            const currentVersion = /*[[${@appVersion}]]*/ '';
-            const noFavourites = /*[[#{noFavourites}]]*/ '';
-          </script>
-          <script th:src="@{js/githubVersion.js}"></script>
-          <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <div class="container ">
-              <a class="navbar-brand" href="#" th:href="@{/}" style="display: flex;">
-                <img class="main-icon" src="favicon.svg?v=2" alt="icon">
-                <span class="icon-text" th:text="${@navBarText}"></span>
+  <script src="js/languageSelection.js"></script>
+  <script th:inline="javascript">
+    const currentVersion = /*[[${@appVersion}]]*/ '';
+    const noFavourites = /*[[#{noFavourites}]]*/ '';
+  </script>
+  <script th:src="@{js/githubVersion.js}"></script>
+  <nav class="navbar navbar-expand-lg">
+    <div class="container ">
+      <a class="navbar-brand" href="#" th:href="@{/}" style="display: flex;">
+        <img class="main-icon" src="favicon.svg?v=2" alt="icon">
+        <span class="icon-text" th:text="${@navBarText}"></span>
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="material-symbols-rounded">
+          menu
+        </span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav me-auto flex-nowrap">
+
+          <!-- All Tools -->
+          <li class="nav-item dropdown dropdown-mega position-static"
+            th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' OR ${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='html-to-pdf' OR ${currentPage}=='url-to-pdf' OR ${currentPage}=='pdf-to-img' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='remove-annotations' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
+            <a class="nav-link" id="navbarDropdown-1" href="#" role="button" data-bs-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="material-symbols-rounded">
+                apps
+              </span>
+              <span class="icon-text" th:data-text="#{navbar.allTools}" th:text="#{navbar.allTools}"></span>
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown-1">
+              <div class='mega-content px-md-4'>
+                <div class="container-fluid">
+                  <div class="row">
+                    <!-- Page tools menu items -->
+                    <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'add_to_photos', 'home.merge.title', 'home.merge.desc', 'merge.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('rotate-pdf', 'rotate_right', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-organizer', 'format_list_bulleted', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-page-layout', 'dashboard', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('scale-pages', 'fullscreen', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-page', 'upload', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags', 'organize')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
+                      </div>
+                    </div>
+                    <!-- Convert to PDF menu items -->
+                    <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convert')}">
+                      </div>
+                    </div>
+                    <!-- Convert from PDF menu items -->
+                    <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'word')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'ppt')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'text_fields', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'html', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'code', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'pdfToPDFA.tags', 'convert')}">
+                      </div>
+                    </div>
+                    <!-- Security menu items -->
+                    <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <h6 class="menu-title" th:text="#{navbar.sections.security}"></h6>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'lock', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'lock_open_right', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'encrypted', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'workspace_premium', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('sanitize-pdf', 'sanitizer', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-redact', 'ink_eraser', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
+                      </div>
+                    </div>
+                    <!-- View & Edit menu items -->
+                    <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <h6 class="menu-title" th:text="#{navbar.sections.edit}"></h6>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('view-pdf', 'menu_book', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', '123', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'add_photo_alternate', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'photo_library', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'layers_clear', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-annotations', 'thread_unread', 'home.removeAnnotations.title', 'home.removeAnnotations.desc', 'removeAnnotations.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'assignment', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags', 'other')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'info', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags', 'other')}">
+                      </div>
+                    </div>
+                    <!-- Advance menu items -->
+                    <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <h6 class="menu-title" th:text="#{navbar.sections.advance}"></h6>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'family_history', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-rename', 'text_fields_alt', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'build', 'home.repair.title', 'home.repair.desc', 'repair.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-split-pdf', 'cut', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdf-by-sections', 'grid_on', 'home.split-by-sections.title', 'home.split-by-sections.desc', 'split-by-sections.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('split-by-size-or-count', 'vertical_split', 'home.autoSizeSplitPDF.title', 'home.autoSizeSplitPDF.desc', 'autoSizeSplitPDF.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags', 'advance')}">
+                      </div>
+                      <div
+                        th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags', 'advance')}">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </li>
+
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{multi-tool}"
+              th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
+              <span class="material-symbols-rounded">
+                construction
+              </span>
+              <span class="icon-text" th:data-text="#{navbar.multiTool}" th:text="#{navbar.multiTool}"></span>
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{pipeline}"
+              th:classappend="${currentPage}=='pipeline' ? 'active' : ''" th:title="#{home.pipeline.desc}">
+              <span class="material-symbols-rounded">
+                family_history
+              </span>
+              <span class="icon-text" th:data-text="#{home.pipeline.title}" th:text="#{home.pipeline.title}"></span>
+            </a>
+          </li>
+
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" title="#{home.compressPdfs.title}" th:href="@{compress-pdf}"
+              th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''" th:title="#{home.compressPdfs.desc}">
+              <span class="material-symbols-rounded">
+                zoom_in_map
+              </span>
+              <span class="icon-text" th:data-text="#{home.compressPdfs.title}"
+                th:text="#{home.compressPdfs.title}"></span>
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{split-pdfs}"
+              th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:title="#{home.split-pdfs.desc}">
+              <span class="material-symbols-rounded">
+                cut
+              </span>
+              <span class="icon-text" th:data-text="#{home.split.title}" th:text="#{home.split.title}"></span>
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{merge-pdfs}"
+              th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:title="#{home.merge.desc}">
+              <span class="material-symbols-rounded">
+                add_to_photos
+              </span>
+              <span class="icon-text" th:data-text="#{home.merge.title}" th:text="#{home.merge.title}"></span>
+            </a>
+          </li>
+
+        </ul>
+        <ul class="navbar-nav  flex-nowrap">
+          <li class="nav-item dropdown">
+            <a class="nav-link" id="navbarDropdown-5" href="#" role="button" data-bs-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="material-symbols-rounded">
+                star
+              </span>
+            </a>
+            <div class="dropdown-menu  px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
+              <!-- Dropdown items will be added here by JavaScript -->
+            </div>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="dark-mode-toggle" href="#">
+              <span class="material-symbols-rounded" id="dark-mode-icon">
+                dark_mode
+              </span>
+            </a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="material-symbols-rounded">
+                language
+              </span>
+            </a>
+            <div class="dropdown-menu px-xl-2 px-2" aria-labelledby="languageDropdown">
+              <div class="scrollable-y">
+                <th:block th:insert="~{fragments/languages :: langs}"></th:block>
+              </div>
+            </div>
+          </li>
+          <li class="nav-item">
+            <!-- Settings Button -->
+            <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
+              <span class="material-symbols-rounded">
+                settings
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <script src="js/favourites.js"></script>
+    <script src="js/search.js"></script>
+  </nav>
+
+  <th:block th:insert="~{fragments/errorBannerPerPage.html :: errorBannerPerPage}"></th:block>
+  <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+            <span class="material-symbols-rounded">
+              close
+            </span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
+          <div class="d-flex justify-content-between align-items-center mb-3 mt-3">
+            <div class="footer-center" style="flex-direction: row;">
+              <a href="https://github.com/Stirling-Tools/Stirling-PDF" class="mx-1" role="button"
+                th:title="#{visitGithub}">
+                <img src="images/github.svg" alt="github">
+              </a>
+              <a href="https://hub.docker.com/r/frooodle/s-pdf" class="mx-1" role="button" th:title="#{seeDockerHub}">
+                <img src="images/docker.svg" alt="docker">
+              </a>
+              <a href="https://discord.gg/Cn8pWhQRxZ" class="mx-1" role="button" th:title="#{joinDiscord}">
+                <img src="images/discord.svg" alt="discord">
+              </a>
+              <a href="https://github.com/sponsors/Frooodle" class="mx-1" role="button" th:title="#{donate}">
+                <span class="material-symbols-rounded fill footer-icon">
+                  favorite
+                </span>
               </a>
-              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto flex-nowrap">
-                  <li class="nav-item">
-                    <a class="nav-link" href="#" th:href="@{multi-tool}" th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
-                      <img class="icon" src="images/tools.svg" alt="icon">
-                      <span class="icon-text" th:text="#{home.multiTool.title}"></span>
-                    </a>
-                  </li>
-                  <li class="nav-item nav-item-separator"></li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="#" th:href="@{pipeline}" th:classappend="${currentPage}=='pipeline' ? 'active' : ''" th:title="#{home.pipeline.desc}">
-                      <img class="icon" src="images/pipeline.svg" alt="icon">
-                      <span class="icon-text" th:text="#{home.pipeline.title}"></span>
-                    </a>
-                  </li>
-                  <li class="nav-item nav-item-separator"></li>
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/file-earmark-pdf.svg" alt="icon">
-                      <span class="icon-text" th:text="#{navbar.pageOps}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-1">
-                      <!-- Existing menu items -->
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'images/union.svg', 'home.merge.title', 'home.merge.desc', 'merge.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'images/layout-split.svg', 'home.split.title', 'home.split.desc', 'split.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-organizer', 'images/sort-numeric-down.svg', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('rotate-pdf', 'images/arrow-clockwise.svg', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-pages', 'images/file-earmark-x.svg', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-page-layout', 'images/page-layout.svg', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('scale-pages', 'images/scale-pages.svg', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-split-pdf', 'images/layout-split.svg', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('adjust-contrast', 'images/adjust-contrast.svg', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('crop', 'images/crop.svg', 'home.crop.title', 'home.crop.desc', 'crop.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-page', 'images/extract.svg', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'images/single-page.svg', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-by-size-or-count', 'images/layout-split.svg', 'home.autoSizeSplitPDF.title', 'home.autoSizeSplitPDF.desc', 'autoSizeSplitPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('overlay-pdf', 'images/overlay.svg', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdf-by-sections', 'images/layout-split.svg', 'home.split-by-sections.title', 'home.split-by-sections.desc', 'split-by-sections.tags')}"></div>
-                    </div>
-                  </li>
-
-                  <li class="nav-item nav-item-separator"></li>
-
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-2" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/arrow-left-right.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
-                      <span class="icon-text" th:text="#{navbar.convert}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-2">
-                      <!-- Existing menu items -->
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'images/image.svg', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'images/file.svg', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('html-to-pdf', 'images/html.svg', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('url-to-pdf', 'images/url.svg', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'images/markdown.svg', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('book-to-pdf', 'images/book.svg', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags')}"></div>
-                      <hr class="dropdown-divider">
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'images/image.svg', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'images/file-earmark-word.svg', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'images/file-earmark-ppt.svg', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'images/filetype-txt.svg', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'images/filetype-html.svg', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'images/filetype-xml.svg', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'images/file-earmark-pdf.svg', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-csv', 'images/pdf-csv.svg', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'pdfToPDFA.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-book', 'images/book.svg', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags')}"></div>
-                    </div>
-                  </li>
-
-                  <li class="nav-item nav-item-separator"></li>
-
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-3" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/shield-check.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text" th:text="#{navbar.security}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-3">
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'images/lock.svg', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'images/unlock.svg', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'images/shield-lock.svg', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'images/droplet.svg', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'images/award.svg', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sanitize-pdf', 'images/sanitize.svg', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-redact', 'images/eraser-fill.svg', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags')}"></div>
-                    </div>
-                  </li>
-
-                  <li class="nav-item nav-item-separator"></li>
-
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='remove-annotations' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-4" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
-                      <span class="icon-text" th:text="#{navbar.other}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-4">
-                      <!--<div th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'images/pipeline.svg', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags')}"></div> -->
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('view-pdf', 'images/book-opened.svg', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'images/search.svg', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'images/file-earmark-richtext.svg', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'images/file-zip.svg', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'images/images.svg', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'images/clipboard-data.svg', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'images/scanner.svg', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'images/sign.svg', 'home.sign.title', 'home.sign.desc', 'sign.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'images/flatten.svg', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'images/wrench.svg', 'home.repair.title', 'home.repair.desc', 'repair.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'images/blank-file.svg', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-annotations', 'images/no-chat.svg', 'home.removeAnnotations.title', 'home.removeAnnotations.desc', 'removeAnnotations.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'images/scales.svg', 'home.compare.title', 'home.compare.desc', 'compare.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', 'images/add-page-numbers.svg', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-rename', 'images/fonts.svg', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'images/info.svg', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'images/js.svg', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('stamp', 'images/stamp.svg', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags')}"></div>
-                    </div>
-                  </li>
-                </ul>
-                <ul class="navbar-nav  flex-nowrap">
-                  <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-5" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="navbar-icon" src="images/star.svg" alt="icon" width="24" height="24">
-                    </a>
-                    <div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
-                      <!-- Dropdown items will be added here by JavaScript -->
-                    </div>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" id="dark-mode-toggle" href="#">
-                      <img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="icon" >
-                    </a>
-                  </li>
-                  <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2 globe-icon" viewBox="0 0 20 20">
-                        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
-                      </svg>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="languageDropdown">
-                      <th:block th:insert="~{fragments/languages :: langs}"></th:block>
-                    </div>
-                  </li>
-                  <li class="nav-item">
-                    <!-- Settings Button -->
-                    <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
-                      <img class="navbar-icon" src="images/gear.svg" alt="icon" width="24" height="24">
-                    </a>
-                  </li>
-                  <!-- Search Button and Search Bar -->
-                  <li class="nav-item position-relative">
-                    <a href="#" class="nav-link" id="search-icon">
-                      <img class="navbar-icon" src="images/search.svg" alt="icon" width="24" height="24">
-                    </a>
-                    <!-- Search Bar -->
-                    <div class="collapse position-absolute" id="navbarSearch">
-                      <form class="d-flex p-2 bg-white border search-form" id="searchForm">
-                        <input class="form-control search-input" type="search" th:placeholder="#{home.searchBar}" aria-label="Search" id="navbarSearchInput">
-                      </form>
-                      <!-- Search Results -->
-                      <div id="searchResults" class="border p-2 bg-white search-results"></div>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
-            <script src="js/favourites.js"></script>
-            <script src="js/search.js"></script>
-          </nav>
 
-          <th:block th:insert="~{fragments/errorBannerPerPage.html :: errorBannerPerPage}"></th:block>
-          <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered" role="document">
-              <div class="modal-content dark-card">
-                <div class="modal-header">
-                  <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
-                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                  <div class="d-flex justify-content-between align-items-center mb-3">
-                    <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
-                    <a href="https://github.com/sponsors/Frooodle" class="btn btn-sm btn-outline-primary" role="button" target="_blank" th:text="#{sponsor}+' Stirling-PDF'"></a>
-                    <a href="swagger-ui/index.html" class="btn btn-sm btn-outline-primary" role="button" target="_blank">API</a>
-                    <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" class="btn btn-sm btn-outline-primary" id="update-btn" th:utext="#{settings.update}" role="button" target="_blank"></a>
-                  </div>
-                  <div class="mb-3">
-                    <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
-                    <select class="form-control" id="downloadOption">
-                      <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
-                      <option value="newWindow" th:utext="#{settings.downloadOption.2}"></option>
-                      <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
-                    </select>
-                  </div>
-                  <div class="mb-3">
-                    <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
-                    <input type="range" class="form-range" min="1" max="9" step="1" id="zipThreshold" value="4">
-                    <span id="zipThresholdValue" class="ms-2"></span>
-                  </div>
-                  <div class="mb-3 form-check">
-                    <input type="checkbox" class="form-check-input" id="boredWaiting">
-                    <label class="form-check-label" for="boredWaiting" th:text="#{bored}"></label>
-                  </div>
-                  <a th:if="${@loginEnabled}" href="account" class="btn btn-sm btn-outline-primary" role="button" th:text="#{settings.accountSettings}" target="_blank">Account Settings</a>
-                </div>
-                <div class="modal-footer">
-                  <a th:if="${@loginEnabled}" class="btn btn-danger" role="button" th:text="#{settings.signOut}" href="logout">Sign Out</a>
-                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
-                </div>
-              </div>
-            </div>
+            <a href="swagger-ui/index.html" class="btn btn-sm btn-outline-primary mx-1" role="button"
+              target="_blank">API</a>
+            <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
+              class="btn btn-sm btn-outline-primary mx-1" id="update-btn" th:utext="#{settings.update}" role="button"
+              target="_blank"></a>
           </div>
-          <script src="js/settings.js"></script>
-        </div>
\ No newline at end of file
+
+
+
+
+          <div class="mb-3">
+            <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
+            <select class="form-control" id="downloadOption">
+              <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
+              <option value="newWindow" th:utext="#{settings.downloadOption.2}"></option>
+              <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
+            </select>
+          </div>
+          <div class="mb-3">
+            <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
+            <input type="range" class="form-range" min="1" max="9" step="1" id="zipThreshold" value="4">
+            <span id="zipThresholdValue" class="ms-2"></span>
+          </div>
+          <div class="form-check mb-3">
+            <input type="checkbox" id="boredWaiting">
+            <label for="boredWaiting" th:text="#{bored}"></label>
+          </div>
+          <a th:if="${@loginEnabled}" href="account" class="btn btn-sm btn-outline-primary" role="button"
+            th:text="#{settings.accountSettings}" target="_blank">Account Settings</a>
+        </div>
+        <div class="modal-footer">
+          <a th:if="${@loginEnabled}" class="btn btn-danger" role="button" th:text="#{settings.signOut}"
+            href="logout">Sign Out</a>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="js/settings.js"></script>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index f0a55c16..ad117ed6 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,6 +1,11 @@
-<th:block th:fragment="navbarEntry(endpoint, imgSrc, titleKey, descKey, tagKey)" th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
-                      <a class="dropdown-item" href="#" th:href="@{${endpoint}}" th:classappend="${endpoint.equals(currentPage)} ? 'active' : ''" th:title="#{${descKey}}" th:data-bs-tags="#{${tagKey}}">
-                        <img class="icon" th:src="@{${imgSrc}}" alt="icon">
-                        <span class="icon-text" th:text="#{${titleKey}}"></span>
-                      </a>
-</th:block>
+<th:block th:fragment="navbarEntry(endpoint, toolIcon, titleKey, descKey, tagKey, toolGroup)"
+  th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
+  <a class="dropdown-item" href="#" th:href="@{${endpoint}}"
+    th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}" th:title="#{${descKey}}"
+    th:data-bs-tags="#{${tagKey}}">
+    <div class="icon" alt="icon" th:class="@{${toolGroup}}">
+      <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
+      <span class="icon-text" th:text="#{${titleKey}}"></span>
+    </div>
+  </a>
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index ed1c6a18..1ba22f60 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,104 +1,222 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <!-- Jumbotron -->
-        <div class="bg-light p-5 rounded d-none d-md-block" id="jumbotron">
-          <div class="container">
-            <h1 class="display-4" th:text="${@appName}"></h1>
-            <p class="lead" th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}"></p>
-          </div>
+<body>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <!-- Jumbotron -->
+      <div class="p-5 rounded d-none d-md-block" id="jumbotron">
+        <div class="container">
+          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
+          <p class="lead fs-4"
+            th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
+          </p>
         </div>
-        <br class="d-md-none">
-        <!-- Features -->
-        <script src="js/homecard.js"></script>
+      </div>
+      <br class="d-md-none">
+      <!-- Features -->
+      <script src="js/homecard.js"></script>
 
-        <div class=" container">
-          <br>
-          <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
-          <div class="features-container">
-            <div th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', svgPath='images/pipeline.svg', tags=#{pipeline.tags})}"></div>
+      <div class=" container">
+        <br>
+        <span class="material-symbols-rounded search-icon">
+          search
+        </span>
+        <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+        <div class="features-container">
+          <div
+            th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', toolIcon='add_to_photos', tags=#{merge.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', toolIcon='cut', tags=#{split.tags}, toolGroup='organize')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', svgPath='images/book-opened.svg', tags=#{viewPdf.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', svgPath='images/tools.svg', tags=#{multiTool.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', svgPath='images/union.svg', tags=#{merge.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', svgPath='images/layout-split.svg', tags=#{split.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', toolIcon='rotate_right', tags=#{rotate.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', toolIcon='crop', tags=#{crop.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', svgPath='images/arrow-clockwise.svg', tags=#{rotate.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', svgPath='images/crop.svg', tags=#{crop.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', svgPath='images/add-page-numbers.svg', tags=#{add-page-numbers.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', toolIcon='image', tags=#{imageToPdf.tags}, toolGroup='image')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='image', tags=#{pdfToImage.tags}, toolGroup='image')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', svgPath='images/adjust-contrast.svg', tags=#{adjust-contrast.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', svgPath='images/image.svg', tags=#{imageToPdf.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', svgPath='images/image.svg', tags=#{pdfToImage.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', toolIcon='format_list_bulleted', tags=#{pdfOrganiser.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='text_fields', tags=#{addImage.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', svgPath='images/sort-numeric-down.svg', tags=#{pdfOrganiser.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', svgPath='images/file-earmark-richtext.svg', tags=#{addImage.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', svgPath='images/droplet.svg', tags=#{watermark.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', toolIcon='delete', tags=#{removePages.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', svgPath='images/file.svg', tags=#{fileToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', svgPath='images/file-earmark-x.svg', tags=#{removePages.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', svgPath='images/lock.svg', tags=#{addPassword.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='photo_library', tags=#{extractImages.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', svgPath='images/unlock.svg', tags=#{removePassword.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', svgPath='images/file-zip.svg', tags=#{compressPdfs.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', svgPath='images/clipboard-data.svg', tags=#{changeMetadata.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', toolIcon='picture_as_pdf', tags=#{pdfToPDFA.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', toolIcon='description', tags=#{PDFToWord.tags}, toolGroup='word')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', toolIcon='slideshow', tags=#{PDFToPresentation.tags}, toolGroup='ppt')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', svgPath='images/shield-lock.svg', tags=#{permissions.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', svgPath='images/search.svg', tags=#{ocr.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', svgPath='images/images.svg', tags=#{extractImages.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', toolIcon='text_fields', tags=#{PDFToText.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', toolIcon='html', tags=#{PDFToHTML.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', toolIcon='code', tags=#{PDFToXML.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', toolIcon='signature', tags=#{sign.tags}, toolGroup='sign')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', svgPath='images/file-earmark-pdf.svg', tags=#{pdfToPDFA.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', svgPath='images/file-earmark-word.svg', tags=#{PDFToWord.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', svgPath='images/file-earmark-ppt.svg', tags=#{PDFToPresentation.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', toolIcon='scan_delete', tags=#{removeBlanks.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', toolIcon='thread_unread', tags=#{removeAnnotations.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', toolIcon='compare', tags=#{compare.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', svgPath='images/filetype-txt.svg', tags=#{PDFToText.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', svgPath='images/filetype-html.svg', tags=#{PDFToHTML.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', svgPath='images/filetype-xml.svg', tags=#{PDFToXML.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', toolIcon='text_fields_alt', tags=#{auto-rename.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', toolIcon='cut', tags=#{autoSplitPDF.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', svgPath='images/scanner.svg', tags=#{ScannerImageSplit.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', svgPath='images/sign.svg', tags=#{sign.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', svgPath='images/flatten.svg', tags=#{flatten.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', toolIcon='javascript', tags=#{showJS.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', svgPath='images/wrench.svg', tags=#{repair.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', svgPath='images/blank-file.svg', tags=#{removeBlanks.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', svgPath='images/no-chat.svg', tags=#{removeAnnotations.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', svgPath='images/scales.svg', tags=#{compare.tags})}"></div>
-
-            <div th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', svgPath='images/award.svg', tags=#{certSign.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', svgPath='images/page-layout.svg', tags=#{pageLayout.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', svgPath='images/scale-pages.svg', tags=#{scalePages.tags})}"></div>
-
-            <div th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', svgPath='images/fonts.svg', tags=#{auto-rename.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', svgPath='images/layout-split.svg', tags=#{autoSplitPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', svgPath='images/sanitize.svg', tags=#{sanitizePdf.tags})}"></div>
-
-            <div th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', svgPath='images/url.svg', tags=#{URLToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', svgPath='images/html.svg', tags=#{HTMLToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', svgPath='images/markdown.svg', tags=#{MarkdownToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', svgPath='images/info.svg', tags=#{getPdfInfo.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', svgPath='images/extract.svg', tags=#{extractPage.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', svgPath='images/single-page.svg', tags=#{PdfToSinglePage.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', svgPath='images/js.svg', tags=#{showJS.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', svgPath='images/eraser-fill.svg', tags=#{autoRedact.tags})}"></div>
-
-            <div th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', svgPath='images/pdf-csv.svg', tags=#{tableExtraxt.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', svgPath='images/layout-split.svg', tags=#{autoSizeSplitPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', svgPath='images/overlay.svg', tags=#{overlay-pdfs.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', svgPath='images/layout-split.svg', tags=#{split-by-sections.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', svgPath='images/book.svg', tags=#{BookToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', svgPath='images/book.svg', tags=#{PDFToBook.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', svgPath='images/stamp.svg', tags=#{AddStampRequest.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', toolIcon='vertical_split', tags=#{autoSizeSplitPDF.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', toolIcon='layers', tags=#{overlay-pdfs.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', toolIcon='grid_on', tags=#{split-by-sections.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='images/book.svg', tags=#{BookToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='images/book.svg', tags=#{PDFToBook.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/licenses.html b/src/main/resources/templates/licenses.html
index f9d6c641..c91a4507 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">
+            <div class="col-md-6" id="bg-card">
               <h2 th:text="#{licenses.header}">3rd Party licenses</h2>
               <table class="table table-striped">
                 <thead>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 02c9cfed..84616c70 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -8,28 +8,8 @@
   <body>
     <div class="your-container-class"></div>
     <div class="container-flex">
-      <main class="form-signin text-center">
+      <main class="form-signin">
         <script>
-          function setInputMode(elementId, mode) {
-            var inputElement = document.getElementById(elementId);
-
-            if (!inputElement) return;  // If the element doesn't exist, exit the function
-
-            switch (mode) {
-              case "on":
-                inputElement.classList.add("bg-dark", "text-light");
-                inputElement.classList.remove("bg-light", "text-dark");
-                break;
-              case "off":
-                inputElement.classList.add("bg-light", "text-dark");
-                inputElement.classList.remove("bg-dark", "text-light");
-                break;
-              case "rainbow":
-                // Assuming you have defined some classes for rainbow mode
-                break;
-            }
-          }
-
           document.addEventListener('modeChanged', function(e) {
             var mode = e.detail;
 
@@ -137,34 +117,38 @@
           <span th:text="#{changedCredsMessage}">Default message if not found</span>
         </div>
         <form th:action="@{login}" method="post">
-          <img class="mb-4" src="favicon.svg?v=2" alt="" width="144" height="144">
-          <h1 class="h1 mb-3 fw-normal" th:text="${@appName}">Stirling-PDF</h1>
-          <h2 class="h5 mb-3 fw-normal" th:text="#{login.signinTitle}">Please sign in</h2>
+          <div class="text-center">
+            <img class="mb-4" src="favicon.svg?v=2" alt="" width="144" height="144">
+            <h1 class="h1 mb-3 fw-normal" th:text="${@appName}">Stirling-PDF</h1>
+            <h2 class="h5 mb-3 fw-normal" th:text="#{login.signinTitle}">Please sign in</h2>
+          </div>
 
           <div class="form-floating">
-            <input type="text" class="form-control bg-dark text-light" id="username" name="username" placeholder="admin">
+            <input type="text" class="form-control" id="username" name="username" placeholder="admin">
             <label for="username" th:text="#{username}">Username</label>
           </div>
           <div class="form-floating">
-            <input type="password" class="form-control bg-dark text-light" id="password" name="password" placeholder="Password">
+            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
             <label for="password" th:text="#{password}">Password</label>
           </div>
 
-          <div class="checkbox mb-3">
+          <div class="form-check m-2 mb-3">
             <input type="checkbox" id="remember" value="remember-me">
             <label for="remember" th:text="#{login.rememberme}"></label> 
           </div>
           <button class="w-100 btn btn-lg btn-primary" type="submit" th:text="#{login.signin}">Sign in</button>
         </form>
         <div class="mt-3"> <!-- Added a margin-top for spacing -->
-          <div class="dropdown">
+          <div class="dropdown text-center">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
               <img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
               <!-- Default language placeholder -->
             </button>
             <div class="dropdown-menu" aria-labelledby="languageDropdown">
               <!-- Here's where the fragment will be included -->
-              <th:block th:replace="~{fragments/languages :: langs}"></th:block>
+              <div class="scrollable-y">
+                <th:block th:replace="~{fragments/languages :: langs}"></th:block>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 10a0bb06..c8579fc0 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container" id="dropContainer">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{merge.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form action="api/v1/general/merge-pdfs" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{multiPdfDropPrompt}"></label>
@@ -22,7 +25,7 @@
                 <div class="mb-3">
                   <ul id="selectedFiles" class="list-group"></ul>
                 </div>
-                <div class="mb-3 text-center">
+                <div class="mb-3">
                   <button type="button" id="sortByNameBtn" class="btn btn-info" th:text="#{merge.sortByName}"></button>
                   <button type="button" id="sortByDateBtn" class="btn btn-info" th:text="#{merge.sortByDate}"></button>
                   <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
diff --git a/src/main/resources/templates/misc/add-image.html b/src/main/resources/templates/misc/add-image.html
index 86bc6bab..40146ed2 100644
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -13,8 +13,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addImage.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <!-- pdf selector -->
               <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/misc/add-page-numbers.html b/src/main/resources/templates/misc/add-page-numbers.html
index 0d02d456..a118a4c2 100644
--- a/src/main/resources/templates/misc/add-page-numbers.html
+++ b/src/main/resources/templates/misc/add-page-numbers.html
@@ -55,8 +55,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addPageNumbers.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/add-page-numbers}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/adjust-contrast.html b/src/main/resources/templates/misc/adjust-contrast.html
index 8fc3b661..1f381e03 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">
+            <div class="col-md-12" id="bg-card">
               <div class="row justify-content-center">
                 <div class="col-md-3">
                   <div id="sliders-container" style="display:none;">
@@ -35,7 +35,10 @@
                   </div>
                 </div>
                 <div class="col-md-7">
-                  <h2 th:text="#{adjustContrast.header}"></h2>
+                  <div class="tool-header">
+                    <span class="material-symbols-rounded tool-header-icon advance">palette</span>
+                    <span class="tool-header-text" th:text="#{adjustContrast.header}"></span>
+                  </div>
                   <div class="col-md-8">
                     <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                   </div>
diff --git a/src/main/resources/templates/misc/auto-crop.html b/src/main/resources/templates/misc/auto-crop.html
index 06e7874f..2dcaa06d 100644
--- a/src/main/resources/templates/misc/auto-crop.html
+++ b/src/main/resources/templates/misc/auto-crop.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoCrop.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-crop}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/auto-rename.html b/src/main/resources/templates/misc/auto-rename.html
index 42876df3..8a7085cf 100644
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{auto-rename.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-rename}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/change-metadata.html b/src/main/resources/templates/misc/change-metadata.html
index b620755c..90ead65f 100644
--- a/src/main/resources/templates/misc/change-metadata.html
+++ b/src/main/resources/templates/misc/change-metadata.html
@@ -11,18 +11,21 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{changeMetadata.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" id="form1" enctype="multipart/form-data" th:action="@{api/v1/misc/update-metadata}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p>
-                <div class="mb-3-inline form-check">
-                  <input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll">
-                  <label class="ms-3" for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
+                <div class="form-check mb-3-inline ms-3">
+                  <input type="checkbox" id="deleteAll" name="deleteAll">
+                  <label for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
                 </div>
-                <div class="mb-3-inline form-check">
-                  <input type="checkbox" class="form-check-input" id="customModeCheckbox">
-                  <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
+                <div class="form-check mb-3-inline ms-3">
+                  <input type="checkbox" id="customModeCheckbox">
+                  <label for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                 </div>
                 <div class="mb-3">
                   <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
diff --git a/src/main/resources/templates/misc/compare.html b/src/main/resources/templates/misc/compare.html
index fd9ff958..e68a6bb4 100644
--- a/src/main/resources/templates/misc/compare.html
+++ b/src/main/resources/templates/misc/compare.html
@@ -20,8 +20,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9">
-              <h2 th:text="#{compare.header}"></h2>
+            <div class="col-md-9" id="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>
+              </div>
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
               <button class="btn btn-primary"  onclick="comparePDFs()" th:text="#{compare.submit}"></button>
diff --git a/src/main/resources/templates/misc/compress-pdf.html b/src/main/resources/templates/misc/compress-pdf.html
index 3638e3af..74f9f95d 100644
--- a/src/main/resources/templates/misc/compress-pdf.html
+++ b/src/main/resources/templates/misc/compress-pdf.html
@@ -1,47 +1,55 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{compress.header}"></h2>
-              <form action="#" th:action="@{api/v1/misc/compress-pdf}" method="post" enctype="multipart/form-data">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                <div class="card mb-3">
-                  <div class="card-body">
-                    <h4 th:text="#{compress.selectText.1}"></h4>
-                    <label for="optimizeLevel" th:text="#{compress.selectText.2}"></label>
-                    <select name="optimizeLevel" id="optimizeLevel" class="form-control">
-                      <option value="1">1</option>
-                      <option value="2" selected>2</option>
-                      <option value="3">3</option>
-                      <option value="4" th:text="#{compress.selectText.3}"></option>
-                    </select>
-                  </div>
-                </div>
-                <div class="card mb-3">
-                  <div class="card-body">
-                    <h4 th:text="#{compress.selectText.4}"></h4>
-                    <label for="expectedOutputSize" th:text="#{compress.selectText.5}"></label>
-                    <input type="text" name="expectedOutputSize" id="expectedOutputSize" class="form-control">
-                  </div>
-                </div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
-              </form>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="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>
             </div>
+            <form action="#" th:action="@{api/v1/misc/compress-pdf}" method="post" enctype="multipart/form-data">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+              <div class="card mb-3">
+                <div class="card-body">
+                  <h4 th:text="#{compress.selectText.1}"></h4>
+                  <label for="optimizeLevel" th:text="#{compress.selectText.2}"></label>
+                  <select name="optimizeLevel" id="optimizeLevel" class="form-control">
+                    <option value="1">1</option>
+                    <option value="2" selected>2</option>
+                    <option value="3">3</option>
+                    <option value="4" th:text="#{compress.selectText.3}"></option>
+                  </select>
+                </div>
+              </div>
+              <div class="card mb-3">
+                <div class="card-body">
+                  <h4 th:text="#{compress.selectText.4}"></h4>
+                  <label for="expectedOutputSize" th:text="#{compress.selectText.5}"></label>
+                  <input type="text" name="expectedOutputSize" id="expectedOutputSize" class="form-control">
+                </div>
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/extract-image-scans.html b/src/main/resources/templates/misc/extract-image-scans.html
index 90623b22..4932ae91 100644
--- a/src/main/resources/templates/misc/extract-image-scans.html
+++ b/src/main/resources/templates/misc/extract-image-scans.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{home.ScannerImageSplit.title}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <form id="multiPdfForm" th:action="@{api/v1/misc/extract-image-scans}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*, application/pdf')}"></div>
diff --git a/src/main/resources/templates/misc/extract-images.html b/src/main/resources/templates/misc/extract-images.html
index 12d2f64e..eec412b4 100644
--- a/src/main/resources/templates/misc/extract-images.html
+++ b/src/main/resources/templates/misc/extract-images.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{extractImages.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/extract-images}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/misc/flatten.html b/src/main/resources/templates/misc/flatten.html
index 49710831..179716f3 100644
--- a/src/main/resources/templates/misc/flatten.html
+++ b/src/main/resources/templates/misc/flatten.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{flatten.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="pdfForm" class="mb-3">
                 <div class="custom-file">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
diff --git a/src/main/resources/templates/misc/ocr-pdf.html b/src/main/resources/templates/misc/ocr-pdf.html
index a5374a22..8d8cb8a2 100644
--- a/src/main/resources/templates/misc/ocr-pdf.html
+++ b/src/main/resources/templates/misc/ocr-pdf.html
@@ -34,17 +34,20 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{ocr.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form th:if="${#lists.size(languages) > 0}" action="#" th:action="@{api/v1/misc/ocr-pdf}" method="post" enctype="multipart/form-data" class="mb-3">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
                   <hr>
                   <div id="languages">
-                    <div th:each="language, iterStat : ${languages}">
+                    <div class="form-check" th:each="language, iterStat : ${languages}">
                       <input type="checkbox" th:name="languages" th:value="${language}" required th:id="${'language-' + language}" onchange="handleLangSelection()" />
-                      <label class="form-check-label" th:for="${'language-' + language}" th:text="${language}"></label>
+                      <label th:for="${'language-' + language}" th:text="${language}"></label>
                     </div>
                   </div>
                   <hr>
@@ -59,25 +62,25 @@
                 </div>
                 <br>
                 <label for="languages" class="form-label" th:text="#{ocr.selectText.9}"></label>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="sidecar" id="sidecar" />
-                  <label class="form-check-label" for="sidecar" th:text="#{ocr.selectText.2}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="sidecar" id="sidecar" />
+                  <label for="sidecar" th:text="#{ocr.selectText.2}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="deskew" id="deskew" />
-                  <label class="form-check-label" for="deskew" th:text="#{ocr.selectText.3}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="deskew" id="deskew" />
+                  <label for="deskew" th:text="#{ocr.selectText.3}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="clean" id="clean" />
-                  <label class="form-check-label" for="clean" th:text="#{ocr.selectText.4}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="clean" id="clean" />
+                  <label for="clean" th:text="#{ocr.selectText.4}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="clean-final" id="clean-final" />
-                  <label class="form-check-label" for="clean-final" th:text="#{ocr.selectText.5}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="clean-final" id="clean-final" />
+                  <label for="clean-final" th:text="#{ocr.selectText.5}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="removeImagesAfter" id="removeImagesAfter" />
-                  <label class="form-check-label" for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="removeImagesAfter" id="removeImagesAfter" />
+                  <label for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
                 </div>
                 <div class="mb-3">
                   <label th:text="#{ocr.selectText.12}"></label>
diff --git a/src/main/resources/templates/misc/remove-annotations.html b/src/main/resources/templates/misc/remove-annotations.html
index a9973b79..fae40ebd 100644
--- a/src/main/resources/templates/misc/remove-annotations.html
+++ b/src/main/resources/templates/misc/remove-annotations.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removeAnnotations.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="pdfForm" class="mb-3">
                 <div class="custom-file">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
diff --git a/src/main/resources/templates/misc/remove-blanks.html b/src/main/resources/templates/misc/remove-blanks.html
index 6ab25907..a4601d04 100644
--- a/src/main/resources/templates/misc/remove-blanks.html
+++ b/src/main/resources/templates/misc/remove-blanks.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removeBlanks.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/remove-blanks}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/misc/repair.html b/src/main/resources/templates/misc/repair.html
index 204bce14..2694885b 100644
--- a/src/main/resources/templates/misc/repair.html
+++ b/src/main/resources/templates/misc/repair.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{repair.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/repair}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{repair.submit}"></button>
diff --git a/src/main/resources/templates/misc/show-javascript.html b/src/main/resources/templates/misc/show-javascript.html
index ba60ec00..392ba8e8 100644
--- a/src/main/resources/templates/misc/show-javascript.html
+++ b/src/main/resources/templates/misc/show-javascript.html
@@ -20,8 +20,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12">
-              <h2 th:text="#{showJS.header}"></h2>
+            <div class="col-md-12" id="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>
+              </div>
               <form id="pdfInfoForm" method="post" enctype="multipart/form-data" th:action="@{show-javascript}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false', accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/stamp.html b/src/main/resources/templates/misc/stamp.html
index 89e689b1..a083cce6 100644
--- a/src/main/resources/templates/misc/stamp.html
+++ b/src/main/resources/templates/misc/stamp.html
@@ -22,8 +22,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{AddStampRequest.header}"></h2>
+            <div class="col-md-6"  id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/add-stamp}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/multi-page-layout.html b/src/main/resources/templates/multi-page-layout.html
index 0e51b8fa..b103d1d7 100644
--- a/src/main/resources/templates/multi-page-layout.html
+++ b/src/main/resources/templates/multi-page-layout.html
@@ -11,13 +11,16 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pageLayout.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/general/multi-page-layout}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
-                  <select id="pagesPerSheet" name="pagesPerSheet">
+                  <select class="form-control" id="pagesPerSheet" name="pagesPerSheet">
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
@@ -25,9 +28,9 @@
                     <option value="16">16</option>
                   </select>
                 </div>
-                <div class="mb-3">
-                  <input type="checkbox" class="form-check-input" id="addBorder" name="addBorder">
-                  <label class="form-check-label" for="addBorder" th:text="#{pageLayout.addBorder}"></label>
+                <div class="form-check mb-3">
+                  <input type="checkbox" id="addBorder" name="addBorder">
+                  <label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button>
               </form>
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 170ba7f3..409e14db 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -1,104 +1,108 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{multiTool.title}, header=#{multiTool.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <div id="image-highlighter"></div>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="multi-tool-container">
-          <div class="row justify-content-center">
-            <h2 th:text="#{multiTool.header}"></h2>
-            <div class="col-md-12" id="pages-container-wrapper">
-              <div id="pages-container">
-                <div class="page-container" th:each="pdf, status: ${pdfList}" th:id="'page-container-' + ${status.index}">
-                  <div class="page-number-container">
-                    <span th:text="${status.index + 1}"></span>
-                  </div>
-                  <img th:src="${pdf.imageUrl}" alt="PDF Page">
-                </div>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{multiTool.title}, header=#{multiTool.header})}"></th:block>
+</head>
+
+<body>
+  <div id="image-highlighter"></div>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-12">
+            <div id="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>
               </div>
-            </div>
-          </div>
-        </div>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6" style="text-align: center">
-              <div class="global-buttons-container d-flex align-content-center justify-content-center">
-                <div class="form-group">
+              <div class="mt-action-bar d-flex flex-wrap">
+                <div class="mt-filename">
                   <label for="filename-input" th:text="#{multiTool.uploadPrompts}">Filename</label>
-                  <input type="text" class="form-control" id="filename-input" th:placeholder="#{multiTool.uploadPrompts}">
+                  <input type="text" class="form-control" id="filename-input"
+                    th:placeholder="#{multiTool.uploadPrompts}">
+                </div>
+                <div class="mt-action-btn">
+                  <button class="btn btn-primary" onclick="addPdfs()">
+                    <span class="material-symbols-rounded">
+                      add
+                    </span>
+                  </button>
+                  <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
+                    <span class="material-symbols-rounded">
+                      rotate_left
+                    </span>
+                  </button>
+                  <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
+                    <span class="material-symbols-rounded">
+                      rotate_right
+                    </span>
+                  </button>
+                  <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
+                    <span class="material-symbols-rounded">
+                      download
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div class="global-buttons-container">
-                <button class="btn btn-primary" onclick="addPdfs()">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                    <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                  </svg>
-                </button>
-                <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
-                    <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
-                  </svg>
-                </button>
-                <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
-                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
-                  </svg>
-                </button>
-                <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
-                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-                  </svg>
-                </button>
+              <div class="multi-tool-container">
+                <div class="d-flex flex-wrap" id="pages-container-wrapper">
+                  <div id="pages-container">
+                    <div class="page-container" th:each="pdf, status: ${pdfList}"
+                      th:id="'page-container-' + ${status.index}">
+                      <div class="page-number-container">
+                        <span th:text="${status.index + 1}"></span>
+                      </div>
+                      <img th:src="${pdf.imageUrl}" alt="PDF Page">
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div id="drag-container"></div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
+    <div id="drag-container"></div>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
 
-    <script type="module">
-      import PdfContainer from './js/multitool/PdfContainer.js';
-      import DragDropManager from "./js/multitool/DragDropManager.js";
-      import scrollDivHorizontally from "./js/multitool/horizontalScroll.js";
-      import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
-      import PdfActionsManager from './js/multitool/PdfActionsManager.js';
-      import FileDragManager from './js/multitool/fileInput.js';
-      // enables drag and drop
-      const dragDropManager = new DragDropManager('drag-container', 'pages-container');
-      // enables image highlight on click
-      const imageHighlighter = new ImageHighlighter('image-highlighter');
-      // enables the default action buttons on each pdf
-      const pdfActionsManager = new PdfActionsManager('pages-container');
-      const fileDragManager = new FileDragManager();
+  <script type="module">
+    import PdfContainer from './js/multitool/PdfContainer.js';
+    import DragDropManager from "./js/multitool/DragDropManager.js";
+    import scrollDivHorizontally from "./js/multitool/horizontalScroll.js";
+    import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
+    import PdfActionsManager from './js/multitool/PdfActionsManager.js';
+    import FileDragManager from './js/multitool/fileInput.js';
+    // enables drag and drop
+    const dragDropManager = new DragDropManager('drag-container', 'pages-container');
+    // enables image highlight on click
+    const imageHighlighter = new ImageHighlighter('image-highlighter');
+    // enables the default action buttons on each pdf
+    const pdfActionsManager = new PdfActionsManager('pages-container');
+    const fileDragManager = new FileDragManager();
 
-      // Scroll the wrapper horizontally
-      scrollDivHorizontally('pages-container-wrapper');
+    // Scroll the wrapper horizontally
+    scrollDivHorizontally('pages-container-wrapper');
 
-      // Automatically exposes rotateAll, addPdfs and exportPdf to the window for the global buttons.
-      const pdfContainer = new PdfContainer(
-        'pages-container',
-        'pages-container-wrapper',
-        [
-          dragDropManager,
-          imageHighlighter,
-          pdfActionsManager,
-          fileDragManager
-        ]
-      )
+    // Automatically exposes rotateAll, addPdfs and exportPdf to the window for the global buttons.
+    const pdfContainer = new PdfContainer(
+      'pages-container',
+      'pages-container-wrapper',
+      [
+        dragDropManager,
+        imageHighlighter,
+        pdfActionsManager,
+        fileDragManager
+      ]
+    )
+
+    fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
+  </script>
+</body>
 
-      fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
-    </script>
-  </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/overlay-pdf.html b/src/main/resources/templates/overlay-pdf.html
index 10cd43d9..75f48a41 100644
--- a/src/main/resources/templates/overlay-pdf.html
+++ b/src/main/resources/templates/overlay-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{overlay-pdfs.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="overlayForm" method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/overlay-pdfs}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div th:replace="~{fragments/common :: fileSelector(name='overlayFiles', multiple=true, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index 4466fa23..a5bedc5c 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfOrganiser.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <form th:action="@{api/v1/general/rearrange-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/pdf-to-single-page.html b/src/main/resources/templates/pdf-to-single-page.html
index 0dc8761c..3b8f2e16 100644
--- a/src/main/resources/templates/pdf-to-single-page.html
+++ b/src/main/resources/templates/pdf-to-single-page.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfToSinglePage.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/general/pdf-to-single-page}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToSinglePage.submit}"></button>
diff --git a/src/main/resources/templates/pipeline.html b/src/main/resources/templates/pipeline.html
index b59d68c0..ed1c1e31 100644
--- a/src/main/resources/templates/pipeline.html
+++ b/src/main/resources/templates/pipeline.html
@@ -1,10 +1,21 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html
+  th:lang="${#locale.language}"
+  th:dir="#{language.direction}"
+  th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org"
+>
   <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"></th:block>
-    <link rel="stylesheet" href="css/pipeline.css" th:if="${currentPage == 'pipeline'}">
+    <th:block
+      th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"
+    ></th:block>
+    <link
+      rel="stylesheet"
+      href="css/pipeline.css"
+      th:if="${currentPage == 'pipeline'}"
+    />
     <script th:inline="javascript">
-      const saveSettings =  /*[[#{pipelineOptions.saveSettings}]]*/ '';
+      const saveSettings = /*[[#{pipelineOptions.saveSettings}]]*/ "";
     </script>
   </head>
 
@@ -12,96 +23,174 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
+        <br /><br />
         <div class="container">
           <div class="row justify-content-center">
+            <div class="col-md-6" id="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>
+                </div>
+                <div class="text-end text-top">
+                  <button
+                    id="uploadPipelineBtn"
+                    class="btn btn-primary"
+                    th:text="#{pipeline.uploadButton}"
+                  ></button>
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#pipelineSettingsModal"
+                    th:text="#{pipeline.configureButton}"
+                  ></button>
+                </div>
 
-            <div style="text-align: center;">
-              <h1 th:text="#{pipeline.header}"></h1>
-              <img src="images/pipeline.svg" alt="icon" style="filter: invert(33%) sepia(100%) saturate(5000%) hue-rotate(183deg) brightness(90%) contrast(100%); width: 100px; height: 100px;">
-            </div>
-          
-            <div class="bordered-box">
-              <div class="text-end text-top">
-                <button id="uploadPipelineBtn" class="btn btn-primary" th:text="#{pipeline.uploadButton}"></button>
-                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pipelineSettingsModal" th:text="#{pipeline.configureButton}"></button>
+                <div class="center-element">
+                  <div class="element-margin">
+                    <select id="pipelineSelect" class="custom-select form-control">
+                      <option
+                        value='{"name":"Custom","pipeline":[],"_examples":{"outputDir":"{outputFolder}/{folderName}","outputFileName":"{filename}-{pipelineName}-{date}-{time}"},"outputDir":"{outputFolder}","outputFileName":"{filename}"}'
+                        th:text="#{pipeline.defaultOption}"
+                      ></option>
+                      <th:block th:each="config : ${pipelineConfigsWithNames}">
+                        <option
+                          th:value="${config.json}"
+                          th:text="${config.name}"
+                        ></option>
+                      </th:block>
+                    </select>
+                  </div>
+                  <div class="element-margin">
+                    <div
+                      th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true)}"
+                    ></div>
+                  </div>
+                  <div class="element-margin">
+                    <button
+                      class="btn btn-primary"
+                      id="submitConfigBtn"
+                      th:text="#{pipeline.submitButton}"
+                    ></button>
+                  </div>
+                  <br/>
+                  <a
+                    href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/PipelineFeature.md"
+                    target="_blank"
+                    th:text="#{pipeline.help}"
+                    >Pipeline Help</a
+                  >
+                  <br/>
+                  <a
+                    href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/FolderScanning.md"
+                    target="_blank"
+                    th:text="#{pipeline.scanHelp}"
+                    >Folder Scanning Help</a
+                  >
+                </div>
               </div>
 
-              <div class="center-element">
-                <div class="element-margin">
-                  <select id="pipelineSelect" class="custom-select">
-                    <option value="{&quot;name&quot;:&quot;Custom&quot;,&quot;pipeline&quot;:[],&quot;_examples&quot;:{&quot;outputDir&quot;:&quot;{outputFolder}/{folderName}&quot;,&quot;outputFileName&quot;:&quot;{filename}-{pipelineName}-{date}-{time}&quot;},&quot;outputDir&quot;:&quot;{outputFolder}&quot;,&quot;outputFileName&quot;:&quot;{filename}&quot;}" th:text="#{pipeline.defaultOption}"></option>
-                    <th:block th:each="config : ${pipelineConfigsWithNames}">
-                      <option th:value="${config.json}" th:text="${config.name}"></option>
-                    </th:block>
-                  </select>
-                </div>
-                <div class="element-margin">
-                  <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true)}"></div>
-                </div>
-                <div class="element-margin">
-                  <button class="btn btn-primary" id="submitConfigBtn" th:text="#{pipeline.submitButton}"></button>
-                </div>
-                <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/PipelineFeature.md" target="_blank" th:text="#{pipeline.help}">Pipeline Help</a>
-                <br>
-                <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/FolderScanning.md" target="_blank" th:text="#{pipeline.scanHelp}">Folder Scanning Help</a>
-              </div>
-            </div>
-
-            <!-- The Modal -->
-            <div class="modal" id="pipelineSettingsModal">
-              <div class="modal-dialog">
-                <div class="modal-content dark-card">
-
-                  <!-- Modal Header -->
-                  <div class="modal-header">
-                    <h2 class="modal-title" th:text="#{pipelineOptions.header}"></h2>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                  </div>
-
-                  <!-- Modal body -->
-                  <div class="modal-body">
-                    <div class="mb-3">
-                      <label for="pipelineName" class="form-label" th:text="#{pipelineOptions.pipelineNameLabel}"></label>
-                      <input type="text" id="pipelineName" class="form-control" th:placeholder="#{pipelineOptions.pipelineNamePrompt}">
+              <!-- The Modal -->
+              <div class="modal" id="pipelineSettingsModal">
+                <div class="modal-dialog">
+                  <div class="modal-content dark-card">
+                    <!-- Modal Header -->
+                    <div class="modal-header">
+                      <h2
+                        class="modal-title"
+                        th:text="#{pipelineOptions.header}"
+                      ></h2>
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                        <span class="material-symbols-rounded">
+                          close
+                        </span>
+                      </button>
                     </div>
-                    <div class="mb-3">
-                      <label for="operationsDropdown" th:text="#{pipelineOptions.selectOperation}"></label>
-                      <select id="operationsDropdown" class="form-select">
-                        <!-- Options will be dynamically populated here -->
-                      </select>
-                    </div>
-                    <div class="mb-3">
-                      <button id="addOperationBtn" class="btn btn-primary" th:text="#{pipelineOptions.addOperationButton}"></button>
-                    </div>
-                    <h3 id="pipelineHeader" style="display: none;" th:text="#{pipelineOptions.pipelineHeader}"></h3>
 
-                    <ol id="pipelineList" class="list-group">
-                      <!-- Pipeline operations will be dynamically populated here -->
-                    </ol>
-                    <div id="pipelineSettingsContent">
-                      <!-- pipelineSettings will be dynamically populated here -->
+                    <!-- Modal body -->
+                    <div class="modal-body">
+                      <div class="mb-3">
+                        <label
+                          for="pipelineName"
+                          class="form-label"
+                          th:text="#{pipelineOptions.pipelineNameLabel}"
+                        ></label>
+                        <input
+                          type="text"
+                          id="pipelineName"
+                          class="form-control"
+                          th:placeholder="#{pipelineOptions.pipelineNamePrompt}"
+                        />
+                      </div>
+                      <div class="mb-3">
+                        <label
+                          for="operationsDropdown"
+                          th:text="#{pipelineOptions.selectOperation}"
+                        ></label>
+                        <select id="operationsDropdown" class="form-select">
+                          <!-- Options will be dynamically populated here -->
+                        </select>
+                      </div>
+                      <div class="mb-3">
+                        <button
+                          id="addOperationBtn"
+                          class="btn btn-primary"
+                          th:text="#{pipelineOptions.addOperationButton}"
+                        ></button>
+                      </div>
+                      <h3
+                        id="pipelineHeader"
+                        style="display: none"
+                        th:text="#{pipelineOptions.pipelineHeader}"
+                      ></h3>
+
+                      <ol id="pipelineList" class="list-group">
+                        <!-- Pipeline operations will be dynamically populated here -->
+                      </ol>
+                      <div id="pipelineSettingsContent">
+                        <!-- pipelineSettings will be dynamically populated here -->
+                      </div>
                     </div>
-                  </div>
 
-                  <!-- Modal footer -->
-                  <div class="modal-footer">
-                    <button id="saveBrowserPipelineBtn" class="btn btn-success" th:text="#{saveToBrowser}"></button>
-                    <button id="savePipelineBtn" class="btn btn-success" th:text="#{pipelineOptions.saveButton}"></button>
-                    <button id="validateButton" class="btn btn-success" th:text="#{pipelineOptions.validateButton}"></button>
+                    <!-- Modal footer -->
+                    <div class="modal-footer">
+                      <button
+                        id="saveBrowserPipelineBtn"
+                        class="btn btn-success"
+                        th:text="#{saveToBrowser}"
+                      ></button>
+                      <button
+                        id="savePipelineBtn"
+                        class="btn btn-success"
+                        th:text="#{pipelineOptions.saveButton}"
+                      ></button>
+                      <button
+                        id="validateButton"
+                        class="btn btn-success"
+                        th:text="#{pipelineOptions.validateButton}"
+                      ></button>
 
-                    <div class="btn-group">
-                      <input type="file" id="uploadPipelineInput" accept=".json" style="display: none;">
+                      <div class="btn-group">
+                        <input
+                          type="file"
+                          id="uploadPipelineInput"
+                          accept=".json"
+                          style="display: none"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
+                <script src="js/pipeline.js"></script>\
             </div>
-            <script src="js/pipeline.js"></script>
           </div>
         </div>
       </div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/remove-pages.html b/src/main/resources/templates/remove-pages.html
index cd9e57d5..7905c7a3 100644
--- a/src/main/resources/templates/remove-pages.html
+++ b/src/main/resources/templates/remove-pages.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pageRemover.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <form th:action="@{api/v1/general/remove-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index 5446ff92..2c399f9d 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{rotate.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <form action="#" th:action="@{api/v1/general/rotate-pdf}" th:object="${rotateForm}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/scale-pages.html b/src/main/resources/templates/scale-pages.html
index ede08025..ff52c157 100644
--- a/src/main/resources/templates/scale-pages.html
+++ b/src/main/resources/templates/scale-pages.html
@@ -11,13 +11,16 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{scalePages.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="scalePagesFrom" th:action="@{api/v1/general/scale-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="pageSize" th:text="#{scalePages.pageSize}"></label>
-                  <select id="pageSize" name="pageSize">
+                  <select class="form-control" id="pageSize" name="pageSize">
                     <option value="A0">A0</option>
                     <option value="A1">A1</option>
                     <option value="A2">A2</option>
@@ -31,7 +34,7 @@
                 </div>
                 <div class="mb-3">
                   <label for="scaleFactor" th:text="#{scalePages.scaleFactor}"></label>
-                  <input type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
+                  <input class="form-control" type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{scalePages.submit}"></button>
               </form>
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index 015cee5c..90738b14 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addPassword.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form action="api/v1/security/add-password" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{addPassword.selectText.1}"></label>
@@ -36,38 +39,38 @@
                   <small class="form-text text-muted" th:text="#{addPassword.selectText.4}"></small>
                 </div>
                 <div class="mb-3">
-                  <label th:text="#{addPassword.selectText.5}"></label>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
-                    <label class="form-check-label" for="canAssembleDocument" th:text="#{addPassword.selectText.6}"></label>
+                  <label class="mb-2" th:text="#{addPassword.selectText.5}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
+                    <label for="canAssembleDocument" th:text="#{addPassword.selectText.6}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractContent" name="canExtractContent">
-                    <label class="form-check-label" for="canExtractContent" th:text="#{addPassword.selectText.7}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractContent" name="canExtractContent">
+                    <label for="canExtractContent" th:text="#{addPassword.selectText.7}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
-                    <label class="form-check-label" for="canExtractForAccessibility" th:text="#{addPassword.selectText.8}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
+                    <label for="canExtractForAccessibility" th:text="#{addPassword.selectText.8}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canFillInForm" name="canFillInForm">
-                    <label class="form-check-label" for="canFillInForm" th:text="#{addPassword.selectText.9}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canFillInForm" name="canFillInForm">
+                    <label for="canFillInForm" th:text="#{addPassword.selectText.9}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModify" name="canModify">
-                    <label class="form-check-label" for="canModify" th:text="#{addPassword.selectText.10}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModify" name="canModify">
+                    <label for="canModify" th:text="#{addPassword.selectText.10}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
-                    <label class="form-check-label" for="canModifyAnnotations" th:text="#{addPassword.selectText.11}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
+                    <label for="canModifyAnnotations" th:text="#{addPassword.selectText.11}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrint" name="canPrint">
-                    <label class="form-check-label" for="canPrint" th:text="#{addPassword.selectText.12}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrint" name="canPrint">
+                    <label for="canPrint" th:text="#{addPassword.selectText.12}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
-                    <label class="form-check-label" for="canPrintFaithful" th:text="#{addPassword.selectText.13}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
+                    <label for="canPrintFaithful" th:text="#{addPassword.selectText.13}"></label>
                   </div>
                 </div>
                 <br>
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index 2840946e..e8ea6873 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{watermark.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <form method="post" enctype="multipart/form-data" action="api/v1/security/add-watermark">
                 <div class="mb-3">
diff --git a/src/main/resources/templates/security/auto-redact.html b/src/main/resources/templates/security/auto-redact.html
index d13fcb88..50a7d955 100644
--- a/src/main/resources/templates/security/auto-redact.html
+++ b/src/main/resources/templates/security/auto-redact.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoRedact.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form action="api/v1/security/auto-redact" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <input type="file" class="form-control" id="fileInput" name="fileInput" required accept="application/pdf">
@@ -52,13 +55,13 @@
                   }
                 </script>
                 <div class="mb-3 form-check">
-                  <input type="checkbox" class="form-check-input" id="useRegex" name="useRegex">
-                  <label class="form-check-label" for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
+                  <input type="checkbox" id="useRegex" name="useRegex">
+                  <label for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
                 </div>
 
                 <div class="mb-3 form-check">
-                  <input type="checkbox" class="form-check-input" id="wholeWordSearch" name="wholeWordSearch">
-                  <label class="form-check-label" for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
+                  <input type="checkbox" id="wholeWordSearch" name="wholeWordSearch">
+                  <label for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
                 </div>
 
                 <div class="mb-3">
@@ -67,8 +70,8 @@
                 </div>
 
                 <div class="mb-3 form-check">
-                  <input type="checkbox" class="form-check-input" id="convertPDFToImage" name="convertPDFToImage" checked>
-                  <label class="form-check-label" for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
+                  <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage" checked>
+                  <label for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
                 </div>
 
                 <button type="submit" class="btn btn-primary" th:text="#{autoRedact.submitButton}"></button>
diff --git a/src/main/resources/templates/security/cert-sign.html b/src/main/resources/templates/security/cert-sign.html
index 0f369c27..09129af9 100644
--- a/src/main/resources/templates/security/cert-sign.html
+++ b/src/main/resources/templates/security/cert-sign.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{certSign.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form action="api/v1/security/cert-sign" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{certSign.selectPDF}"></label>
@@ -53,7 +56,7 @@
                   <label th:text="#{certSign.password}" for="password"></label>
                   <input type="password" class="form-control" id="password" name="password">
                 </div>
-                <div class="mb-3">
+                <div class="form-check mb-3">
                   <input type="checkbox" id="showSignature" name="showSignature">
                   <label th:text="#{certSign.showSig}" for="showSignature"></label>
                 </div>
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index 58a5350c..ca527006 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{permissions.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <p th:text="#{permissions.warning}"></p>
               <form action="api/v1/security/add-password" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
@@ -20,38 +23,38 @@
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 </div>
                 <div class="mb-3">
-                  <label th:text="#{permissions.selectText.2}"></label>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
-                    <label class="form-check-label" for="canAssembleDocument" th:text="#{permissions.selectText.3}"></label>
+                  <label class="mb-2" th:text="#{permissions.selectText.2}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
+                    <label for="canAssembleDocument" th:text="#{permissions.selectText.3}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractContent" name="canExtractContent">
-                    <label class="form-check-label" for="canExtractContent" th:text="#{permissions.selectText.4}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractContent" name="canExtractContent">
+                    <label for="canExtractContent" th:text="#{permissions.selectText.4}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
-                    <label class="form-check-label" for="canExtractForAccessibility" th:text="#{permissions.selectText.5}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
+                    <label for="canExtractForAccessibility" th:text="#{permissions.selectText.5}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canFillInForm" name="canFillInForm">
-                    <label class="form-check-label" for="canFillInForm" th:text="#{permissions.selectText.6}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canFillInForm" name="canFillInForm">
+                    <label for="canFillInForm" th:text="#{permissions.selectText.6}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModify" name="canModify">
-                    <label class="form-check-label" for="canModify" th:text="#{permissions.selectText.7}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModify" name="canModify">
+                    <label for="canModify" th:text="#{permissions.selectText.7}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
-                    <label class="form-check-label" for="canModifyAnnotations" th:text="#{permissions.selectText.8}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
+                    <label for="canModifyAnnotations" th:text="#{permissions.selectText.8}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrint" name="canPrint">
-                    <label class="form-check-label" for="canPrint" th:text="#{permissions.selectText.9}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrint" name="canPrint">
+                    <label for="canPrint" th:text="#{permissions.selectText.9}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
-                    <label class="form-check-label" for="canPrintFaithful" th:text="#{permissions.selectText.10}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
+                    <label for="canPrintFaithful" th:text="#{permissions.selectText.10}"></label>
                   </div>
                 </div>
                 <br>
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 ff7106ed..edab3fe5 100644
--- a/src/main/resources/templates/security/get-info-on-pdf.html
+++ b/src/main/resources/templates/security/get-info-on-pdf.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{getPdfInfo.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form id="pdfInfoForm" method="post" enctype="multipart/form-data" th:action="@{api/v1/security/get-info-on-pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false', accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index b77f0690..f27a7e6b 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removePassword.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form action="api/v1/security/remove-password" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{removePassword.selectText.1}"></label>
diff --git a/src/main/resources/templates/security/remove-watermark.html b/src/main/resources/templates/security/remove-watermark.html
index 01d89be5..eefd6240 100644
--- a/src/main/resources/templates/security/remove-watermark.html
+++ b/src/main/resources/templates/security/remove-watermark.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{remove-watermark.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" action="api/v1/security/remove-watermark">
                 <div class="mb-3">
                   <label th:text="#{remove-watermark.selectText.1}"></label>
diff --git a/src/main/resources/templates/security/sanitize-pdf.html b/src/main/resources/templates/security/sanitize-pdf.html
index da1dc3c4..4d3cd2de 100644
--- a/src/main/resources/templates/security/sanitize-pdf.html
+++ b/src/main/resources/templates/security/sanitize-pdf.html
@@ -11,31 +11,34 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{sanitizePDF.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form action="api/v1/security/sanitize-pdf" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeJavaScript" name="removeJavaScript" checked>
-                  <label class="form-check-label" for="removeJavaScript" th:text="#{sanitizePDF.selectText.1}"></label>
+                  <input type="checkbox" id="removeJavaScript" name="removeJavaScript" checked>
+                  <label for="removeJavaScript" th:text="#{sanitizePDF.selectText.1}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeEmbeddedFiles" name="removeEmbeddedFiles" checked>
-                  <label class="form-check-label" for="removeEmbeddedFiles" th:text="#{sanitizePDF.selectText.2}"></label>
+                  <input type="checkbox" id="removeEmbeddedFiles" name="removeEmbeddedFiles" checked>
+                  <label for="removeEmbeddedFiles" th:text="#{sanitizePDF.selectText.2}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeMetadata" name="removeMetadata" checked>
-                  <label class="form-check-label" for="removeMetadata" th:text="#{sanitizePDF.selectText.3}"></label>
+                  <input type="checkbox" id="removeMetadata" name="removeMetadata" checked>
+                  <label for="removeMetadata" th:text="#{sanitizePDF.selectText.3}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeLinks" name="removeLinks">
-                  <label class="form-check-label" for="removeLinks" th:text="#{sanitizePDF.selectText.4}"></label>
+                  <input type="checkbox" id="removeLinks" name="removeLinks">
+                  <label for="removeLinks" th:text="#{sanitizePDF.selectText.4}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeFonts" name="removeFonts">
-                  <label class="form-check-label" for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
+                  <input type="checkbox" id="removeFonts" name="removeFonts">
+                  <label for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
                 </div>
                 <br>
                 <div class="mb-3 text-center">
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 259d5e97..8a8586aa 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -29,8 +29,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{sign.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
 
               <!-- pdf selector -->
               <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>
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 a6bf13e0..286d9808 100644
--- a/src/main/resources/templates/split-by-size-or-count.html
+++ b/src/main/resources/templates/split-by-size-or-count.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{split-by-size-or-count.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/split-by-size-or-count}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <label for="splitType" th:text="#{split-by-size-or-count.type.label}">Split Type</label>
diff --git a/src/main/resources/templates/split-pdf-by-sections.html b/src/main/resources/templates/split-pdf-by-sections.html
index 9fb0eae4..73fdc74c 100644
--- a/src/main/resources/templates/split-pdf-by-sections.html
+++ b/src/main/resources/templates/split-pdf-by-sections.html
@@ -13,8 +13,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{split-by-sections.header}"></h2>
+            <div class="col-md-6" id="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>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/split-pdf-by-sections}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <label for="horizontalDivisions" th:text="#{split-by-sections.horizontal.label}">Horizontal Divisions</label>
@@ -23,8 +26,10 @@
                 <label for="verticalDivisions" th:text="#{split-by-sections.vertical.label}">Vertical Divisions</label>
                 <input type="number" id="verticalDivisions" name="verticalDivisions" class="form-control" min="0" max="300" required value="1" th:placeholder="#{split-by-sections.vertical.placeholder}">
                 <br>
-                <label for="merge" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
-                <input type="checkbox" id="merge" name="merge">
+                <div class="mb-3 form-check">
+                  <input type="checkbox" id="merge" name="merge">
+                  <label for="merge" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
+                </div>
                 <br>
                 <div id="pdfVisualAid" class="pdf-visual-aid"></div>
                 <script>
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index 7ed934dd..9d402c65 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -1,42 +1,59 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{split.title}, header=#{split.header})}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h1 th:text="#{split.header}"></h1>
-              <p th:text="#{split.desc.1}"></p>
-              <p th:text="#{split.desc.2}"></p>
-              <p th:text="#{split.desc.3}"></p>
-              <p th:text="#{split.desc.4}"></p>
-              <p th:text="#{split.desc.5}"></p>
-              <p th:text="#{split.desc.6}"></p>
-              <p th:text="#{split.desc.7}"></p>
-              <p th:text="#{split.desc.8}"></p>
-
-              <form th:action="@{api/v1/general/split-pages}" method="post" enctype="multipart/form-data">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-
-                <div class="mb-3">
-                  <label for="pageNumbers" th:text="#{split.splitPages}"></label>
-                  <input type="text" class="form-control" id="pageNumbers" name="pageNumbers" placeholder="1,3,5-10" required>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{split.submit}"></button>
-              </form>
+<body>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="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>
             </div>
+            <form th:action="@{api/v1/general/split-pages}" method="post" enctype="multipart/form-data">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+
+              <div class="mb-3">
+                <label for="pageNumbers" th:text="#{split.splitPages}"></label>
+                <input type="text" class="form-control" id="pageNumbers" name="pageNumbers" placeholder="1,3,5-10"
+                  required>
+              </div>
+
+              <p>
+                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                  aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
+              </p>
+              <div class="collapse" id="info">
+                <p th:text="#{split.desc.1}"></p>
+                <p th:text="#{split.desc.2}"></p>
+                <p th:text="#{split.desc.3}"></p>
+                <p th:text="#{split.desc.4}"></p>
+                <p th:text="#{split.desc.5}"></p>
+                <p th:text="#{split.desc.6}"></p>
+                <p th:text="#{split.desc.7}"></p>
+                <p th:text="#{split.desc.8}"></p>
+              </div>
+
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{split.submit}"></button>
+            </form>
+
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file