diff --git a/stirling-pdf/src/main/resources/messages_en_GB.properties b/stirling-pdf/src/main/resources/messages_en_GB.properties
index 8add1b6bd..da042ca14 100644
--- a/stirling-pdf/src/main/resources/messages_en_GB.properties
+++ b/stirling-pdf/src/main/resources/messages_en_GB.properties
@@ -1,3 +1,41 @@
+account.adminTitle=Administrator Tools
+account.adminNotif=You have admin privileges. Access system settings and user management.
+view=View
+cancel=Cancel
+adminUserSettings.teams=View/Edit Teams
+adminUserSettings.team=Team
+adminUserSettings.manageTeams=Manage Teams
+adminUserSettings.createTeam=Create Team
+adminUserSettings.teamName=Team Name
+adminUserSettings.teamExists=Team already exists
+adminUserSettings.teamCreated=Team created successfully
+adminUserSettings.teamChanged=User's team was updated
+adminUserSettings.totalMembers=Total Members
+
+teamCreated=Team created successfully
+teamExists=A team with that name already exists
+teamNameExists=Another team with that name already exists
+teamNotFound=Team not found
+teamDeleted=Team deleted
+teamHasUsers=Cannot delete a team with users assigned
+teamRenamed=Team renamed successfully
+merge.generateToc=Generate table of contents in the merged file?
+# Table of Contents Feature
+home.editTableOfContents.title=Edit Table of Contents
+home.editTableOfContents.desc=Add or edit bookmarks and table of contents in PDF documents
+editTableOfContents.tags=bookmarks,toc,navigation,index,table of contents,chapters,sections,outline
+editTableOfContents.title=Edit Table of Contents
+editTableOfContents.header=Add or Edit PDF Table of Contents
+editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to append to existing)
+editTableOfContents.editorTitle=Bookmark Editor
+editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
+editTableOfContents.addBookmark=Add New Bookmark
+editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
+editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
+editTableOfContents.desc.3=Each bookmark requires a title and target page number.
+editTableOfContents.submit=Apply Table of Contents
+
+
 ###########
 # Generic #
 ###########
diff --git a/stirling-pdf/src/main/resources/templates/account.html b/stirling-pdf/src/main/resources/templates/account.html
index 5389601fb..097794a8d 100644
--- a/stirling-pdf/src/main/resources/templates/account.html
+++ b/stirling-pdf/src/main/resources/templates/account.html
@@ -220,9 +220,6 @@
           </form>
         </div>
       </div>
-      
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
-    </div>
     
     <!-- JavaScript for validation -->
     <script th:inline="javascript">
@@ -467,360 +464,8 @@
 	    });
 	  });
 	</script>
-  <th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></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-9 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon organize">settings_account_box</span>
-                <span class="tool-header-text" th:text="#{account.accountSettings}">User Settings</span>
-              </div>
-
-              <!-- User Settings Title -->
-              <th:block th:if="${messageType}">
-              <div class="alert alert-danger">
-                <span th:text="#{${messageType}}">Default message if not found</span>
-              </div>
-              </th:block>
-
-              <!-- At the top of the user settings -->
-              <h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
-              <th:block th:if="${error}">
-              <div class="alert alert-danger" role="alert">
-                <span th:text="${error}">Error Message</span>
-              </div>
-              </th:block>
-
-              <!-- Change Username Form -->
-              <th:block th:if="not ${oAuth2Login} or not ${saml2Login}">
-              <h4 th:text="#{account.changeUsername}">Change Username?</h4>
-              <form id="formsavechangeusername" class="bg-card mt-4 mb-4" th:action="@{'/api/v1/user/change-username'}" method="post">
-                <div class="mb-3">
-                  <label for="newUsername" th:text="#{account.newUsername}">Change Username</label>
-                  <input type="text" class="form-control" name="newUsername" id="newUsername" th:placeholder="#{account.newUsername}">
-                  <span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
-                </div>
-                <div class="mb-3">
-                  <label for="currentPasswordChangeUsername" th:text="#{password}">Password</label>
-                  <input type="password" class="form-control" name="currentPasswordChangeUsername" id="currentPasswordChangeUsername" 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 Password Form -->
-              <th:block th:if="not ${oAuth2Login} or not ${saml2Login}">
-              <h4 th:text="#{account.changePassword}">Change Password?</h4>
-              <form id="formsavechangepassword" class="bg-card mt-4 mb-4" th: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="currentPassword" 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">
-                  <span id="confirmPasswordError" style="display: none;" th:text="#{confirmPasswordErrorMessage}">New Password and Confirm New Password must match.</span>
-                  <button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
-                </div>
-              </form>
-              </th:block>
-
-            <!-- 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 th:inline="javascript">
-                jQuery.validator.addMethod("usernamePattern", function(value, element) {
-                  // Regular expression for user name: Min. 3 characters, max. 50 characters
-                  const regexUsername = /^[a-zA-Z0-9](?!.*[-@._+]{2,})([a-zA-Z0-9@._+-]{1,48})[a-zA-Z0-9]$/;
-
-                  // Regular expression for email addresses: Max. 320 characters, with RFC-like validation
-                  const regexEmail = /^(?=.{1,320}$)(?=.{1,64}@)[A-Za-z0-9](?:[A-Za-z0-9_.+-]*[A-Za-z0-9])?@[^-][A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)*(?:\.[A-Za-z]{2,})$/;
-
-                  // Check if the field is optional or meets the requirements
-                  return this.optional(element) || regexUsername.test(value) || regexEmail.test(value);
-                }, /*[[#{invalidUsernameMessage}]]*/ "Invalid username format");
-                $(document).ready(function() {
-                  $.validator.addMethod("passwordMatch", function(value, element) {
-                    return $('#newPassword').val() === $('#confirmNewPassword').val();
-                  }, /*[[#{confirmPasswordErrorMessage}]]*/ "New Password and Confirm New Password must match.");
-                  $('#formsavechangepassword').validate({
-                    rules: {
-                      currentPassword: {
-                        required: true
-                      },
-                      newPassword: {
-                        required: true
-                      },
-                      confirmNewPassword: {
-                        required: true,
-                        passwordMatch: true
-                      },
-                      errorPlacement: function(error, element) {
-                          if ($(element).attr("name") === "newPassword" || $(element).attr("name") === "confirmNewPassword") {
-                            $("#confirmPasswordError").text(error.text()).show();
-                          } else {
-                              error.insertAfter(element);
-                          }
-                      },
-                      success: function(label, element) {
-                          if ($(element).attr("name") === "newPassword" || $(element).attr("name") === "confirmNewPassword") {
-                            $("#confirmPasswordError").hide();
-                          }
-                      }
-                    }
-                  });
-
-                  $('#formsavechangeusername').validate({
-                    rules: {
-                      newUsername: {
-                        required: true,
-                        usernamePattern: true
-                      },
-                      currentPasswordChangeUsername: {
-                        required: true
-                      }
-                      },
-                      messages: {
-                        newUsername: {
-                              usernamePattern: /*[[#{invalidUsernameMessage}]]*/ "Invalid username format"
-                          },
-                      },
-                      errorPlacement: function(error, element) {
-                          if (element.attr("name") === "newUsername") {
-                              $("#usernameError").text(error.text()).show();
-                          } else {
-                              error.insertAfter(element);
-                          }
-                      },
-                      success: function(label, element) {
-                          if ($(element).attr("name") === "newUsername") {
-                              $("#usernameError").hide();
-                          }
-                      }
-                  });
-                });
-              </script>
-
-              <script th:inline="javascript">
-                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
-                  }
-                }
-
-                document.addEventListener("DOMContentLoaded", async function() {
-                  showApiKey();
-                  try {
-                    /*<![CDATA[*/
-                    const urlGetApiKey = /*[[@{/api/v1/user/get-api-key}]]*/ "/api/v1/user/get-api-key";
-                    /*]]>*/
-                    let response = await window.fetchWithCsrf(urlGetApiKey, { 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 {
-                    /*<![CDATA[*/
-                    const urlUpdateApiKey = /*[[@{/api/v1/user/update-api-key}]]*/ "/api/v1/user/update-api-key";
-                    /*]]>*/
-                    let response = await window.fetchWithCsrf(urlUpdateApiKey, { 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 = false;
-                  } else {
-                    apiKeyElement.value = "";
-                    showBtn.disabled = true;
-                    copyBtn.disabled = true;
-                  }
-                }
-              </script>
-
-              <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
-              <div class="bg-card container mt-4">
-                <h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
-                <table id="settingsTable" class="table table-bordered table-sm table-striped">
-                  <thead>
-                    <tr>
-                      <th scope="col" th:text="#{account.property}">Property</th>
-                      <th scope="col" th:text="#{account.accountSettings}">Account Setting</th>
-                      <th scope="col" 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>
-
-              <script th:inline="javascript">
-                document.addEventListener("DOMContentLoaded", async function() {
-                  const settingsTableBody = document.querySelector("#settingsTable tbody");
-
-                  /*<![CDATA[*/
-                  var accountSettingsString = /*[[${settings}]]*/ {};
-                  /*]]>*/
-                  var accountSettings = JSON.parse(accountSettingsString);
-
-                  let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
-
-                  allKeys.forEach(key => {
-                    if(key === 'debug' || key === '0' || key === '1' || key.includes('pdfjs') || key.includes('posthog') || key.includes('pageViews')) return;  // Ignoring specific keys
-
-                    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' && !key.includes('pdfjs') && !key.includes('posthog') && !key.includes('pageViews')) { // Only sync non-ignored keys
-                        localStorage.setItem(key, accountSettings[key]);
-                      }
-                    }
-                    location.reload();  // Refresh the page after sync
-                  });
-
-                  document.getElementById('syncToAccount').addEventListener('click', async  function() {
-                    /*<![CDATA[*/
-                    const urlUpdateUserSettings = /*[[@{/api/v1/user/updateUserSettings}]]*/ "/api/v1/user/updateUserSettings";
-                    /*]]>*/
-
-                    let settings = {};
-                    for (let i = 0; i < localStorage.length; i++) {
-                      const key = localStorage.key(i);
-                      if(key !== 'debug' && key !== '0' && key !== '1' && !key.includes('pdfjs') && !key.includes('posthog') && !key.includes('pageViews')) {
-                        settings[key] = localStorage.getItem(key);
-                      }
-                    }
-
-                    try {
-                      const response = await window.fetchWithCsrf(urlUpdateUserSettings, {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(settings)
-                      });
-
-                      if (response.ok) {
-                        location.reload();
-                      } else {
-                        alert('Error syncing settings to account');
-                      }
-                    } catch (error) {
-                      console.error('Error:', error);
-                      alert('Error syncing settings to account');
-                    }
-                  });
-                });
-              </script>
-              <div class="mb-3 mt-4 text-center">
-                <a th: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" th:href="@{'/adminSettings'}" role="button" th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+              
+      
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
