From 4ba9f04c15c25ad52ee918704d4eb85d984bcc6d Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Mon, 30 Dec 2024 23:18:45 +0000
Subject: [PATCH 01/20] Fix file drag and drop

---
 .../static/js/multitool/PdfContainer.js       | 15 ++++++
 .../static/js/multitool/fileInput.js          | 48 +++++++++----------
 src/main/resources/templates/multi-tool.html  |  2 +-
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index c060203d1b0..61548200009 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -168,6 +168,21 @@ class PdfContainer {
       input.click();
     });
   }
+
+  async handleDroppedFiles(files, nextSiblingElement = null) {
+    if (files.length > 0) {
+      const pages = await this.addFilesFromFiles(files, nextSiblingElement, []);
+      this.updateFilename(files[0]?.name || 'untitled');
+
+      const selectAll = document.getElementById('select-pages-container');
+      if (selectAll) {
+        selectAll.classList.remove('hidden');
+      }
+
+      return pages;
+    }
+  }
+
   async addFilesFromFiles(files, nextSiblingElement, pages) {
     this.fileName = files[0].name;
     for (var i = 0; i < files.length; i++) {
diff --git a/src/main/resources/static/js/multitool/fileInput.js b/src/main/resources/static/js/multitool/fileInput.js
index 9efa8eb2a9e..ec7fa4c1e3d 100644
--- a/src/main/resources/static/js/multitool/fileInput.js
+++ b/src/main/resources/static/js/multitool/fileInput.js
@@ -8,7 +8,7 @@ class FileDragManager {
     this.setCallback(cb);
 
     // Prevent default behavior for drag events
-    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
       document.body.addEventListener(eventName, preventDefaults, false);
     });
 
@@ -21,13 +21,13 @@ class FileDragManager {
     this.dragleaveListener = this.dragleaveListener.bind(this);
     this.dropListener = this.dropListener.bind(this);
 
-    document.body.addEventListener("dragenter", this.dragenterListener);
-    document.body.addEventListener("dragleave", this.dragleaveListener);
+    document.body.addEventListener('dragenter', this.dragenterListener);
+    document.body.addEventListener('dragleave', this.dragleaveListener);
     // Add drop event listener
-    document.body.addEventListener("drop", this.dropListener);
+    document.body.addEventListener('drop', this.dropListener);
   }
 
-  setActions({ updateFilename }) {
+  setActions({updateFilename}) {
     this.updateFilename = updateFilename;
   }
 
@@ -35,7 +35,7 @@ class FileDragManager {
     if (cb) {
       this.callback = cb;
     } else {
-      this.callback = (files) => console.warn("FileDragManager not set");
+      this.callback = (files) => console.warn('FileDragManager not set');
     }
   }
 
@@ -43,21 +43,21 @@ class FileDragManager {
     this.dragCounter++;
     if (!this.overlay) {
       // Create and show the overlay
-      this.overlay = document.createElement("div");
-      this.overlay.style.position = "fixed";
+      this.overlay = document.createElement('div');
+      this.overlay.style.position = 'fixed';
       this.overlay.style.top = 0;
       this.overlay.style.left = 0;
-      this.overlay.style.width = "100%";
-      this.overlay.style.height = "100%";
-      this.overlay.style.background = "rgba(0, 0, 0, 0.5)";
-      this.overlay.style.color = "#fff";
-      this.overlay.style.zIndex = "1000";
-      this.overlay.style.display = "flex";
-      this.overlay.style.alignItems = "center";
-      this.overlay.style.justifyContent = "center";
-      this.overlay.style.pointerEvents = "none";
-      this.overlay.innerHTML = "<p>Drop files anywhere to upload</p>";
-      document.getElementById("content-wrap").appendChild(this.overlay);
+      this.overlay.style.width = '100%';
+      this.overlay.style.height = '100%';
+      this.overlay.style.background = 'rgba(0, 0, 0, 0.5)';
+      this.overlay.style.color = '#fff';
+      this.overlay.style.zIndex = '1000';
+      this.overlay.style.display = 'flex';
+      this.overlay.style.alignItems = 'center';
+      this.overlay.style.justifyContent = 'center';
+      this.overlay.style.pointerEvents = 'none';
+      this.overlay.innerHTML = '<p>Drop files anywhere to upload</p>';
+      document.getElementById('content-wrap').appendChild(this.overlay);
     }
   }
 
@@ -87,16 +87,16 @@ class FileDragManager {
           this.overlay = null;
         }
 
-        this.updateFilename(files ? files[0].name : "");
+        this.updateFilename(files ? files[0].name : '');
       });
   }
 
   async addImageFile(file, nextSiblingElement) {
-    const div = document.createElement("div");
-    div.classList.add("page-container");
+    const div = document.createElement('div');
+    div.classList.add('page-container');
 
-    var img = document.createElement("img");
-    img.classList.add("page-image");
+    var img = document.createElement('img');
+    img.classList.add('page-image');
     img.src = URL.createObjectURL(file);
     div.appendChild(img);
 
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index d785c34858e..d45160f27fb 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -216,7 +216,7 @@ <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-righ
       undoManager
     )
 
-    fileDragManager.setCallback(async (files) => pdfContainer.addFilesFromFiles(files));
+    fileDragManager.setCallback(async (files) => pdfContainer.handleDroppedFiles(files));
     document.addEventListener('keydown', function(event) {
     let targetElementId = event.target.id;
 

From 01e97ad21ac4aff4b8553e66d26a91d776e2caf6 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 3 Jan 2025 19:01:54 +0000
Subject: [PATCH 02/20] Match navbar in homepage

---
 src/main/resources/static/css/home.css        |   7 +-
 src/main/resources/static/js/homecard.js      | 219 +++++-----
 .../fragments/featureGroupHeader.html         |   5 +-
 src/main/resources/templates/home.html        | 401 +++++++++---------
 4 files changed, 308 insertions(+), 324 deletions(-)

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 301abe81b54..21faabc743c 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -56,15 +56,14 @@
   user-select: none;
   cursor: pointer;
   gap: 10px;
-}
 
 .feature-group-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
-  gap: 30px 30px;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 3fr));
+  gap: 10px 0px;
   overflow: hidden;
   margin: -20px;
-  padding: 20px;
+  padding: 10px;
   box-sizing:content-box;
 }
 
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 9b5297f3cb1..c3ea9c5b720 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -1,71 +1,71 @@
 function filterCards() {
-  var input = document.getElementById("searchBar");
+  var input = document.getElementById('searchBar');
   var filter = input.value.toUpperCase();
 
-  let featureGroups = document.querySelectorAll(".feature-group");
+  let featureGroups = document.querySelectorAll('.feature-group');
   const collapsedGroups = getCollapsedGroups();
 
   for (const featureGroup of featureGroups) {
-    var cards = featureGroup.querySelectorAll(".feature-card");
+    var cards = featureGroup.querySelectorAll('.dropdown-item');
 
     let groupMatchesFilter = false;
     for (var i = 0; i < cards.length; i++) {
       var card = cards[i];
-      var title = card.querySelector("h5.card-title").innerText;
-      var text = card.querySelector("p.card-text").innerText;
+      var title = card.getAttribute('title') || '';
+      //var text = card.querySelector('p.card-text').innerText;
 
       // Get the navbar tags associated with the card
       var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
-      var navbarTags = navbarItem ? navbarItem.getAttribute("data-bs-tags") : "";
+      var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
 
-      var content = title + " " + text + " " + navbarTags;
+      var content = title + ' ' + navbarTags;
 
       if (content.toUpperCase().indexOf(filter) > -1) {
-        card.style.display = "";
+        card.style.display = '';
         groupMatchesFilter = true;
       } else {
-        card.style.display = "none";
+        card.style.display = 'none';
       }
     }
 
     if (!groupMatchesFilter) {
-      featureGroup.style.display = "none";
+      featureGroup.style.display = 'none';
     } else {
-      featureGroup.style.display = "";
+      featureGroup.style.display = '';
       resetOrTemporarilyExpandGroup(featureGroup, filter, collapsedGroups);
     }
   }
 }
 
 function getCollapsedGroups() {
-  return localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
+  return localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
 }
 
-function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = "", collapsedGroups = []) {
-  const shouldResetCollapse = filterKeywords.trim() === "";
+function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = '', collapsedGroups = []) {
+  const shouldResetCollapse = filterKeywords.trim() === '';
   if (shouldResetCollapse) {
     // Resetting the group's expand/collapse to its original state (as in collapsed groups)
     const isCollapsed = collapsedGroups.indexOf(featureGroup.id) != -1;
     expandCollapseToggle(featureGroup, !isCollapsed);
   } else {
     // Temporarily expands feature group without affecting the actual/stored collapsed groups
-    featureGroup.classList.remove("collapsed");
-    featureGroup.querySelector(".header-expand-button").classList.remove("collapsed");
+    featureGroup.classList.remove('collapsed');
+    featureGroup.querySelector('.header-expand-button').classList.remove('collapsed');
   }
 }
 
 function updateFavoritesSection() {
-  const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container");
-  favoritesContainer.style.maxHeight = "none";
-  favoritesContainer.innerHTML = ""; // Clear the container first
-  const cards = Array.from(document.querySelectorAll(".feature-card:not(.duplicate)"));
+  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.feature-group-container');
+  favoritesContainer.style.maxHeight = 'none';
+  favoritesContainer.innerHTML = ''; // Clear the container first
+  const cards = Array.from(document.querySelectorAll('.feature-card:not(.duplicate)'));
   const addedCardIds = new Set(); // To keep track of added card IDs
   let favoritesAmount = 0;
 
-  cards.forEach(card => {
-    if (localStorage.getItem(card.id) === "favorite" && !addedCardIds.has(card.id)) {
+  cards.forEach((card) => {
+    if (localStorage.getItem(card.id) === 'favorite' && !addedCardIds.has(card.id)) {
       const duplicate = card.cloneNode(true);
-      duplicate.classList.add("duplicate");
+      duplicate.classList.add('duplicate');
       favoritesContainer.appendChild(duplicate);
       addedCardIds.add(card.id); // Mark this card as added
       favoritesAmount++;
@@ -73,31 +73,31 @@ function updateFavoritesSection() {
   });
 
   if (favoritesAmount === 0) {
-    document.getElementById("groupFavorites").style.display = "none";
+    document.getElementById('groupFavorites').style.display = 'none';
   } else {
-    document.getElementById("groupFavorites").style.display = "flex";
+    document.getElementById('groupFavorites').style.display = 'flex';
   }
   reorderCards(favoritesContainer);
-  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + "px";
+  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
 }
 
 function toggleFavorite(element) {
-  var span = element.querySelector("span.material-symbols-rounded");
-  var card = element.closest(".feature-card");
+  var span = element.querySelector('span.material-symbols-rounded');
+  var card = element.closest('.dropdown-item');
   var cardId = card.id;
 
   // Prevent the event from bubbling up to parent elements
   event.stopPropagation();
 
-  if (span.classList.contains("no-fill")) {
-    span.classList.remove("no-fill");
-    span.classList.add("fill");
-    card.classList.add("favorite");
-    localStorage.setItem(cardId, "favorite");
+  if (span.classList.contains('no-fill')) {
+    span.classList.remove('no-fill');
+    span.classList.add('fill');
+    card.classList.add('favorite');
+    localStorage.setItem(cardId, 'favorite');
   } else {
-    span.classList.remove("fill");
-    span.classList.add("no-fill");
-    card.classList.remove("favorite");
+    span.classList.remove('fill');
+    span.classList.add('no-fill');
+    card.classList.remove('favorite');
     localStorage.removeItem(cardId);
   }
 
@@ -111,19 +111,19 @@ function toggleFavorite(element) {
 }
 
 function syncFavorites() {
-  const cards = Array.from(document.querySelectorAll(".feature-card"));
-  cards.forEach(card => {
-    const isFavorite = localStorage.getItem(card.id) === "favorite";
-    const starIcon = card.querySelector(".favorite-icon span.material-symbols-rounded");
+  const cards = Array.from(document.querySelectorAll('.dropdown-item'));
+  cards.forEach((card) => {
+    const isFavorite = localStorage.getItem(card.id) === 'favorite';
+    const starIcon = card.querySelector('.favorite-icon span.material-symbols-rounded');
     if (starIcon) {
       if (isFavorite) {
-        starIcon.classList.remove("no-fill");
-        starIcon.classList.add("fill");
-        card.classList.add("favorite");
+        starIcon.classList.remove('no-fill');
+        starIcon.classList.add('fill');
+        card.classList.add('favorite');
       } else {
-        starIcon.classList.remove("fill");
-        starIcon.classList.add("no-fill");
-        card.classList.remove("favorite");
+        starIcon.classList.remove('fill');
+        starIcon.classList.add('no-fill');
+        card.classList.remove('favorite');
       }
     }
   });
@@ -133,27 +133,25 @@ function syncFavorites() {
 }
 
 function reorderCards(container) {
-  var cards = Array.from(container.querySelectorAll(".feature-card"));
+  var cards = Array.from(container.querySelectorAll('.dropdown-item'));
   cards.forEach(function (card) {
     container.removeChild(card);
   });
   cards.sort(function (a, b) {
-    var aIsFavorite = localStorage.getItem(a.id) === "favorite";
-    var bIsFavorite = localStorage.getItem(b.id) === "favorite";
-    if (a.id === "update-link") {
+    var aIsFavorite = localStorage.getItem(a.id) === 'favorite';
+    var bIsFavorite = localStorage.getItem(b.id) === 'favorite';
+    if (a.id === 'update-link') {
       return -1;
     }
-    if (b.id === "update-link") {
+    if (b.id === 'update-link') {
       return 1;
     }
 
     if (aIsFavorite && !bIsFavorite) {
       return -1;
-    }
-    else if (!aIsFavorite && bIsFavorite) {
+    } else if (!aIsFavorite && bIsFavorite) {
       return 1;
-    }
-    else {
+    } else {
       return a.id > b.id;
     }
   });
@@ -163,21 +161,21 @@ function reorderCards(container) {
 }
 
 function reorderAllCards() {
-  const containers = Array.from(document.querySelectorAll(".feature-group-container"));
+  const containers = Array.from(document.querySelectorAll('.feature-group-container'));
   containers.forEach(function (container) {
     reorderCards(container);
-  })
+  });
 }
 
 function initializeCards() {
-  var cards = document.querySelectorAll(".feature-card");
+  var cards = document.querySelectorAll('.dropdown-item');
   cards.forEach(function (card) {
     var cardId = card.id;
-    var span = card.querySelector(".favorite-icon span.material-symbols-rounded");
-    if (localStorage.getItem(cardId) === "favorite") {
-      span.classList.remove("no-fill");
-      span.classList.add("fill");
-      card.classList.add("favorite");
+    var span = card.querySelector('.favorite-icon span.material-symbols-rounded');
+    if (localStorage.getItem(cardId) === 'favorite') {
+      span.classList.remove('no-fill');
+      span.classList.add('fill');
+      card.classList.add('favorite');
     }
   });
   reorderAllCards();
@@ -187,27 +185,27 @@ function initializeCards() {
 }
 
 function showFavoritesOnly() {
-  const groups = Array.from(document.querySelectorAll(".feature-group"));
-  if (localStorage.getItem("favoritesOnly") === "true") {
+  const groups = Array.from(document.querySelectorAll('.feature-group'));
+  if (localStorage.getItem('favoritesOnly') === 'true') {
     groups.forEach((group) => {
-      if (group.id !== "groupFavorites") {
-        group.style.display = "none";
-      };
-    })
+      if (group.id !== 'groupFavorites') {
+        group.style.display = 'none';
+      }
+    });
   } else {
     groups.forEach((group) => {
-      if (group.id !== "groupFavorites") {
-        group.style.display = "flex";
-      };
-    })
-  };
+      if (group.id !== 'groupFavorites') {
+        group.style.display = 'flex';
+      }
+    });
+  }
 }
 
 function toggleFavoritesOnly() {
-  if (localStorage.getItem("favoritesOnly") === "true") {
-    localStorage.setItem("favoritesOnly", "false");
+  if (localStorage.getItem('favoritesOnly') === 'true') {
+    localStorage.setItem('favoritesOnly', 'false');
   } else {
-    localStorage.setItem("favoritesOnly", "true");
+    localStorage.setItem('favoritesOnly', 'true');
   }
   showFavoritesOnly();
 }
@@ -215,20 +213,20 @@ function toggleFavoritesOnly() {
 // Expands a feature group on true, collapses it on false and toggles state on null.
 function expandCollapseToggle(group, expand = null) {
   if (expand === null) {
-    group.classList.toggle("collapsed");
-    group.querySelector(".header-expand-button").classList.toggle("collapsed");
+    group.classList.toggle('collapsed');
+    group.querySelector('.header-expand-button').classList.toggle('collapsed');
   } else if (expand) {
-    group.classList.remove("collapsed");
-    group.querySelector(".header-expand-button").classList.remove("collapsed");
+    group.classList.remove('collapsed');
+    group.querySelector('.header-expand-button').classList.remove('collapsed');
   } else {
-    group.classList.add("collapsed");
-    group.querySelector(".header-expand-button").classList.add("collapsed");
+    group.classList.add('collapsed');
+    group.querySelector('.header-expand-button').classList.add('collapsed');
   }
 
-  const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
+  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
   const groupIndex = collapsed.indexOf(group.id);
 
-  if (group.classList.contains("collapsed")) {
+  if (group.classList.contains('collapsed')) {
     if (groupIndex === -1) {
       collapsed.push(group.id);
     }
@@ -238,59 +236,62 @@ function expandCollapseToggle(group, expand = null) {
     }
   }
 
-  localStorage.setItem("collapsedGroups", JSON.stringify(collapsed));
+  localStorage.setItem('collapsedGroups', JSON.stringify(collapsed));
 }
 
 function expandCollapseAll(expandAll) {
-  const groups = Array.from(document.querySelectorAll(".feature-group"));
+  const groups = Array.from(document.querySelectorAll('.feature-group'));
   groups.forEach((group) => {
     expandCollapseToggle(group, expandAll);
-  })
+  });
 }
 
-window.onload = function() {
+window.onload = function () {
   initializeCards();
   syncFavorites(); // Ensure everything is in sync on page load
 };
 
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
   const materialIcons = new FontFaceObserver('Material Symbols Rounded');
 
-  materialIcons.load().then(() => {
-    document.querySelectorAll('.feature-card.hidden').forEach(el => {
-      el.classList.remove('hidden');
+  materialIcons
+    .load()
+    .then(() => {
+      document.querySelectorAll('.dropdown-item.hidden').forEach((el) => {
+        el.classList.remove('hidden');
+      });
+    })
+    .catch(() => {
+      console.error('Material Symbols Rounded font failed to load.');
     });
-  }).catch(() => {
-    console.error('Material Symbols Rounded font failed to load.');
-  });
 
-  Array.from(document.querySelectorAll(".feature-group-header")).forEach(header => {
+  Array.from(document.querySelectorAll('.feature-group-header')).forEach((header) => {
     const parent = header.parentNode;
-    const container = header.parentNode.querySelector(".feature-group-container");
-    if (parent.id !== "groupFavorites") {
-      container.style.maxHeight = container.scrollHeight + "px";
+    const container = header.parentNode.querySelector('.feature-group-container');
+    if (parent.id !== 'groupFavorites') {
+      container.style.maxHeight = container.scrollHeight + 'px';
     }
     header.onclick = () => {
       expandCollapseToggle(parent);
     };
-  })
+  });
 
-  const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
-  const groupsArray = Array.from(document.querySelectorAll(".feature-group"));
+  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+  const groupsArray = Array.from(document.querySelectorAll('.feature-group'));
 
-  groupsArray.forEach(group => {
+  groupsArray.forEach((group) => {
     if (collapsed.indexOf(group.id) !== -1) {
       expandCollapseToggle(group, false);
     }
-  })
+  });
 
   // Necessary in order to not fire the transition animation on page load, which looks wrong.
   // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
   setTimeout(() => {
-    groupsArray.forEach(group => {
-      const container = group.querySelector(".feature-group-container");
-      container.classList.add("animated-group");
-    })
+    groupsArray.forEach((group) => {
+      const container = group.querySelector('.feature-group-container');
+      container.classList.add('animated-group');
+    });
   }, 500);
 
   showFavoritesOnly();
diff --git a/src/main/resources/templates/fragments/featureGroupHeader.html b/src/main/resources/templates/fragments/featureGroupHeader.html
index 0a8f7e9b12f..7cdcb833923 100644
--- a/src/main/resources/templates/fragments/featureGroupHeader.html
+++ b/src/main/resources/templates/fragments/featureGroupHeader.html
@@ -1,6 +1,3 @@
 <div th:fragment="featureGroupHeader" class="feature-group-header">
-  <h3 class="menu-title" th:text="${groupTitle}"></h3>
-  <span class="material-symbols-rounded header-expand-button">
-    chevron_right
-  </span>
+  <h6 class="menu-title" th:text="${groupTitle}"></h6>
 </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 02b6699c7c7..fce55e055ef 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -11,7 +11,7 @@
     <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="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"
@@ -29,21 +29,6 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
         </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
 
-        <div id="filtersContainer">
-          <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
-            star
-          </span>
-          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(true)">
-            expand_all
-          </span>
-          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(false)">
-            collapse_all
-          </span>
-          <span class="material-symbols-rounded filter-button hidden" onclick="switchViewMode()">
-            dashboard
-          </span>
-        </div>
-
         <div class="features-container">
 
           <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
@@ -68,25 +53,28 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
           </div>
 
-
+          <div style="
+          display: flex;
+          flex-direction: row;
+          width: 100%;">
           <div id="popularTools" class="feature-group">
             <div
                     th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
             </div>
             <div class="feature-group-container">
               <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>
+              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('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+            </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('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
+            </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='organize')}">
-              </div>
-              <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='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
-              </div>
             </div>
           </div>
 
@@ -98,65 +86,64 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
             </div>
             <div class="feature-group-container">
+
               <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='organize')}">
-              </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='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='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='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='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
+              th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', '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')}">
+              th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'add_to_photos', 'home.merge.title', 'home.merge.desc', 'merge.tags', 'organize')}">
               </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>
+              th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', '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>
+              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('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.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('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.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('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>
           </div>
-
           <div id="groupConvertTo" class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
             </div>
             <div class="feature-group-container">
               <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='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='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='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='book', tags=#{BookToPDF.tags}, toolGroup='convert')}">
-              </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
+              th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
+            </div>
             </div>
           </div>
 
@@ -166,73 +153,74 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             <div class="feature-group-container">
               <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='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='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='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='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='book', tags=#{PDFToBook.tags}, toolGroup='convert')}">
-              </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-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
+            </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-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'tableExtraxt.tags', 'convert')}">
+            </div>
+            <div
+              th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
+            </div>
             </div>
           </div>
-
           <div id="groupSecurity" class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
             </div>
             <div class="feature-group-container">
               <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='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='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='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='validate-signature', cardTitle=#{home.validateSignature.title}, cardText=#{home.validateSignature.desc}, cardLink='validate-signature', toolIcon='verified', tags=#{validateSignature.tags}, toolGroup='security')}">
-			  </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
-              </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='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='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
-              </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>
+              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('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
+            </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('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+          </div>
+
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.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
+        th:replace="~{fragments/navbarEntry :: navbarEntry('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
+      </div>
             </div>
           </div>
 
@@ -241,46 +229,44 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             <div class="feature-group-container">
               <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='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='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='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='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='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='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='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='remove-image-pdf', cardTitle=#{home.removeImagePdf.title}, cardText=#{home.removeImagePdf.desc}, cardLink='remove-image-pdf', toolIcon='remove_selection', tags=#{removeImagePdf.tags}, toolGroup='other')}">
-              </div>
-              <div
-                      th:replace="~{fragments/card :: card(id='replace-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
-              </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('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', 'text_fields', 'home.addImage.title', 'home.addImage.desc', 'addImage.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('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.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-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.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('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.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
+              th:replace="~{fragments/navbarEntry :: navbarEntry('remove-image-pdf', 'remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
+            </div>
+            <div
+              th:replace="~{fragments/navbarEntry :: navbarEntry('replace-color-pdf', 'format_color_fill', 'home.replaceColorPdf.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
+            </div>
             </div>
           </div>
             <div id="groupAdvanced" class="feature-group">
@@ -290,44 +276,45 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             <div class="feature-group-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='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='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='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='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='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='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='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='split-pdf-by-chapters', cardTitle=#{home.splitPdfByChapters.title}, cardText=#{home.splitPdfByChapters.desc}, cardLink='split-pdf-by-chapters', toolIcon='book', tags=#{splitPdfByChapters.tags}, toolGroup='advance')}">
-              </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('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
+            </div>
+            <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('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.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('auto-rename', 'text_fields_alt', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.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('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.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('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.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-pdf-by-chapters', 'book', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
+            </div>
             </div>
           </div>
         </div>
+        </div>
       </div>
     </div>
     <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>

From 7c2ef7ef1aa84086edc62cd5cc1e967c73335d37 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 10 Jan 2025 17:53:21 +0000
Subject: [PATCH 03/20] Homepage overhaul

---
 src/main/resources/static/css/general.css     | 21 ++++++
 src/main/resources/static/css/home.css        | 19 +++---
 src/main/resources/static/js/homecard.js      |  4 --
 .../templates/fragments/navbarEntry.html      |  7 +-
 src/main/resources/templates/home.html        | 65 ++++++++++---------
 5 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css
index d5948f99b5d..70115561506 100644
--- a/src/main/resources/static/css/general.css
+++ b/src/main/resources/static/css/general.css
@@ -114,6 +114,7 @@ input[data-autocompleted] {
   color: whitesmoke;
   animation: fadeup 0.15s linear;
 }
+
 @keyframes fadeup {
   0% {
     transform: translateY(10px);
@@ -127,3 +128,23 @@ input[data-autocompleted] {
 .btn:hover .btn-tooltip {
   display: block;
   }
+
+  .nav-tooltip {
+    position: absolute;
+    display: none;
+    bottom: 3.2rem;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    padding: 7px;
+    background-color: rgb(0, 29, 41);
+    border-radius: 3px;
+    font-size: 12px;
+    color: whitesmoke;
+    animation: fadeup 0.15s linear;
+    z-index: 20;
+    width:15rem;
+    text-wrap: auto;
+  }
+  .dropdown-item:hover .nav-tooltip {
+    display: block;
+    }
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 21faabc743c..8c6eb0a7dce 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -45,26 +45,27 @@
 .feature-group {
   display: flex;
   flex-direction: column;
+  width: 14rem;
+}
+
+.feature-rows{
+          display: flex;
+          flex-direction: row;
+          width: 120%;
+          flex-wrap: wrap;
 }
 
 .feature-group-header {
   display: flex;
-  align-items: center;
   justify-content: flex-start;
   color: var(--md-sys-color-on-surface);
-  margin-bottom: 15px;
+  margin-top: 15px;
   user-select: none;
   cursor: pointer;
   gap: 10px;
-
+}
 .feature-group-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(12rem, 3fr));
-  gap: 10px 0px;
-  overflow: hidden;
-  margin: -20px;
   padding: 10px;
-  box-sizing:content-box;
 }
 
 .feature-group-container.animated-group {
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index c3ea9c5b720..b92e093382a 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -50,7 +50,6 @@ function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = '', collap
   } else {
     // Temporarily expands feature group without affecting the actual/stored collapsed groups
     featureGroup.classList.remove('collapsed');
-    featureGroup.querySelector('.header-expand-button').classList.remove('collapsed');
   }
 }
 
@@ -214,13 +213,10 @@ function toggleFavoritesOnly() {
 function expandCollapseToggle(group, expand = null) {
   if (expand === null) {
     group.classList.toggle('collapsed');
-    group.querySelector('.header-expand-button').classList.toggle('collapsed');
   } else if (expand) {
     group.classList.remove('collapsed');
-    group.querySelector('.header-expand-button').classList.remove('collapsed');
   } else {
     group.classList.add('collapsed');
-    group.querySelector('.header-expand-button').classList.add('collapsed');
   }
 
   const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index ad117ed6f1a..f0ab7b496b1 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,9 +1,10 @@
 <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}}"
+  <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative"  href="#" th:href="@{${endpoint}}"
+    th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
     th:data-bs-tags="#{${tagKey}}">
-    <div class="icon" alt="icon" th:class="@{${toolGroup}}">
+    <span class="nav-tooltip" th:text="#{${descKey}}"></span>
+    <div style="height:2.5rem" 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>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index fce55e055ef..0ee407e3289 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -23,12 +23,35 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
       <!-- Features -->
       <script th:src="@{'/js/homecard.js'}"></script>
       <div class=" container">
+          <div>
         <br>
         <span class="material-symbols-rounded search-icon">
           search
         </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+        </div>
+        <div>
+        <!-- <div id="popularTools" >
+            <div
+                    th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
+            </div>
+            <div style="display: flex; flex-direction: row;">
+              <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('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+            </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('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
+            </div>
 
+            </div>
+          </div> -->
+        </div>
         <div class="features-container">
 
           <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
@@ -46,41 +69,14 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </a>
           </div>
 
-          <div id="groupFavorites" class="feature-group">
+          <!-- <div id="groupFavorites" class="feature-group">
             <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
             </div>
             <div class="feature-group-container">
             </div>
-          </div>
-
-          <div style="
-          display: flex;
-          flex-direction: row;
-          width: 100%;">
-          <div id="popularTools" class="feature-group">
-            <div
-                    th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
-            </div>
-            <div class="feature-group-container">
-              <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('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-            </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('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
-            </div>
-
-            </div>
-          </div>
-
-
-
+          </div> -->
 
+          <div class="feature-rows">
           <div id="groupOrganize" class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
@@ -121,7 +117,12 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             </div>
           </div>
-          <div id="groupConvertTo" class="feature-group">
+          <div id="groupConvert" style="display: flex;
+              flex-direction: column;
+              height: 45rem;
+              gap:24px;
+              flex-wrap: wrap;">
+          <div id="groupConvertTo"  class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
             </div>
@@ -146,7 +147,6 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             </div>
           </div>
-
           <div id="groupConvertFrom" class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
@@ -181,6 +181,7 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             </div>
           </div>
+        </div>
           <div id="groupSecurity" class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">

From d06b3740dbc0bdd1936210268f8c2eacb45c2f4d Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 10 Jan 2025 20:37:11 +0000
Subject: [PATCH 04/20] full width and  bug fixes

---
 src/main/resources/static/css/home.css        | 19 +++++++++------
 .../static/css/theme/componentes.css          |  3 ++-
 .../templates/fragments/navbarEntry.html      |  6 ++---
 src/main/resources/templates/home.html        | 23 ++++++++++---------
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 8c6eb0a7dce..33f3d8820d3 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -38,21 +38,25 @@
 
 .features-container {
   display: flex;
-  flex-direction: column;
   gap: 30px;
+  justify-content: center;
 }
 
 .feature-group {
   display: flex;
-  flex-direction: column;
-  width: 14rem;
+      flex-direction: column;
+      min-width: 10rem;
+      flex: 1 1 auto;
+      box-sizing: border-box;
 }
 
 .feature-rows{
-          display: flex;
-          flex-direction: row;
-          width: 120%;
-          flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-auto-flow: dense;
+  gap: 1rem;
+width:100%;
+
 }
 
 .feature-group-header {
@@ -64,6 +68,7 @@
   cursor: pointer;
   gap: 10px;
 }
+
 .feature-group-container {
   padding: 10px;
 }
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index d2c700cea79..890944c8436 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -874,6 +874,8 @@ textarea.form-control {
 .dropdown-item {
   color: var(--md-sys-color-on-surface);
   padding: 0.25rem 1rem;
+  border-radius: 3rem;
+
 }
 
 .dropdown-item:focus,
@@ -881,7 +883,6 @@ textarea.form-control {
   color: var(--md-sys-color-on-surface);
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
-  font-weight: 500;
   font-variation-settings: var(--md-sys-icon-fill-1);
 }
 
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index f0ab7b496b1..321a3b7ccf8 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,12 +1,12 @@
 <th:block th:fragment="navbarEntry(endpoint, toolIcon, titleKey, descKey, tagKey, toolGroup)"
-  th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
+th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
   <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative"  href="#" th:href="@{${endpoint}}"
     th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
     th:data-bs-tags="#{${tagKey}}">
     <span class="nav-tooltip" th:text="#{${descKey}}"></span>
-    <div style="height:2.5rem" class="icon" alt="icon" th:class="@{${toolGroup}}">
+    <div style="height:2.5rem;align-items: center;display: flex" 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>
+      <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 611ea20f056..59049cfbd93 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -22,13 +22,20 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
       <br class="d-md-none">
       <!-- Features -->
       <script th:src="@{'/js/homecard.js'}"></script>
-      <div class=" container">
+      <div style="
+      width: 100%;
+      display: flex;
+      flex-direction: column;">
           <div>
         <br>
-        <span class="material-symbols-rounded search-icon">
-          search
-        </span>
+        <div style="justify-content: center; display: flex;">
+          <div style="width:80%">
+          <span class="material-symbols-rounded search-icon">
+            search
+          </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+      </div>
+      </div>
         </div>
         <div>
         <!-- <div id="popularTools" >
@@ -75,7 +82,6 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             <div class="feature-group-container">
             </div>
           </div> -->
-
           <div class="feature-rows">
           <div id="groupOrganize" class="feature-group">
             <div
@@ -117,11 +123,7 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </div>
             </div>
           </div>
-          <div id="groupConvert" style="display: flex;
-              flex-direction: column;
-              height: 45rem;
-              gap:24px;
-              flex-wrap: wrap;">
+
           <div id="groupConvertTo"  class="feature-group">
             <div
               th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
@@ -179,7 +181,6 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             <div
               th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
             </div>
-            </div>
           </div>
         </div>
           <div id="groupSecurity" class="feature-group">

From e69329ae85feb4142b44ee58924c6140d77b21fa Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 10 Jan 2025 21:30:09 +0000
Subject: [PATCH 05/20] correct resize and wrap

---
 src/main/resources/static/css/home.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 33f3d8820d3..d705b33c7ff 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -46,17 +46,17 @@
   display: flex;
       flex-direction: column;
       min-width: 10rem;
-      flex: 1 1 auto;
+      flex: 1 1 min(12rem, 100%);
       box-sizing: border-box;
 }
 
 .feature-rows{
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-  grid-auto-flow: dense;
-  gap: 1rem;
-width:100%;
-
+  display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 1rem;
+    padding: 1rem;
+    box-sizing: border-box;
 }
 
 .feature-group-header {

From 0831787508238014ed9ad56e8913aa7c94f095f3 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 10 Jan 2025 21:52:55 +0000
Subject: [PATCH 06/20] improve search

---
 src/main/resources/static/js/homecard.js           | 14 ++++++++++----
 .../resources/templates/fragments/navbarEntry.html |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index b92e093382a..60c1aede30e 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -1,6 +1,9 @@
 function filterCards() {
   var input = document.getElementById('searchBar');
-  var filter = input.value.toUpperCase();
+  var filter = input.value.toUpperCase().trim();
+
+  // Split the input filter into individual words for multi-word matching
+  var filterWords = filter.split(/[\s,;.\-]+/);
 
   let featureGroups = document.querySelectorAll('.feature-group');
   const collapsedGroups = getCollapsedGroups();
@@ -12,15 +15,18 @@ function filterCards() {
     for (var i = 0; i < cards.length; i++) {
       var card = cards[i];
       var title = card.getAttribute('title') || '';
-      //var text = card.querySelector('p.card-text').innerText;
 
       // Get the navbar tags associated with the card
       var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
       var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
+      var navbarTags = navbarItem ? navbarTags + ',' + navbarItem.getAttribute('data-bs-title') : '';
+
+      var content = (title + ' ' + navbarTags).toUpperCase();
 
-      var content = title + ' ' + navbarTags;
+      // Check if all words in the filter match the content
+      var matches = filterWords.every((word) => content.includes(word));
 
-      if (content.toUpperCase().indexOf(filter) > -1) {
+      if (matches) {
         card.style.display = '';
         groupMatchesFilter = true;
       } else {
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index 321a3b7ccf8..9746d486cfc 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -2,7 +2,7 @@
 th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
   <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative"  href="#" th:href="@{${endpoint}}"
     th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
-    th:data-bs-tags="#{${tagKey}}">
+    th:data-bs-tags="#{${tagKey}}" th:data-bs-title='#{${titleKey}}'>
     <span class="nav-tooltip" th:text="#{${descKey}}"></span>
     <div style="height:2.5rem;align-items: center;display: flex" class="icon" alt="icon" th:class="@{${toolGroup}}">
       <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>

From 90d2b4ab154671631ecbf37e112265e60e850166 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Tue, 14 Jan 2025 02:08:55 +0000
Subject: [PATCH 07/20] Favourites rework

---
 src/main/resources/static/css/home.css        | 142 ---------
 src/main/resources/static/css/navbar.css      | 107 +++++++
 .../static/css/theme/componentes.css          |   7 +
 src/main/resources/static/js/favourites.js    | 147 +++++----
 src/main/resources/static/js/homecard.js      |  87 +----
 .../templates/convert/img-to-pdf.html         |   2 +-
 .../templates/convert/pdf-to-img.html         |   2 +-
 .../templates/fragments/navElements.html      | 238 ++++++++++++++
 .../resources/templates/fragments/navbar.html | 245 ++-------------
 .../templates/fragments/navbarEntry.html      |   6 +-
 .../fragments/navbarEntryCustom.html          |  13 +-
 src/main/resources/templates/home.html        | 297 ++++--------------
 .../templates/security/auto-redact.html       |   2 +-
 .../resources/templates/security/redact.html  |   2 +-
 14 files changed, 553 insertions(+), 744 deletions(-)
 create mode 100644 src/main/resources/templates/fragments/navElements.html

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index d705b33c7ff..5fc2f301f3e 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -36,106 +36,6 @@
   border: 0.1rem solid transparent;
 }
 
-.features-container {
-  display: flex;
-  gap: 30px;
-  justify-content: center;
-}
-
-.feature-group {
-  display: flex;
-      flex-direction: column;
-      min-width: 10rem;
-      flex: 1 1 min(12rem, 100%);
-      box-sizing: border-box;
-}
-
-.feature-rows{
-  display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 1rem;
-    padding: 1rem;
-    box-sizing: border-box;
-}
-
-.feature-group-header {
-  display: flex;
-  justify-content: flex-start;
-  color: var(--md-sys-color-on-surface);
-  margin-top: 15px;
-  user-select: none;
-  cursor: pointer;
-  gap: 10px;
-}
-
-.feature-group-container {
-  padding: 10px;
-}
-
-.feature-group-container.animated-group {
-  transition: 0.5s all;
-}
-
-.feature-group.collapsed>.feature-group-container {
-  max-height: 0 !important;
-  margin: 0;
-  padding: 0;
-}
-
-.header-expand-button {
-  transition: 0.5s all;
-  transform: rotate(90deg);
-}
-
-.header-expand-button.collapsed {
-  transform: rotate(0deg);
-}
-
-.feature-card {
-  border: 1px solid var(--md-sys-color-surface-5);
-  border-radius: 1.75rem;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background: var(--md-sys-color-surface-5);
-  transition:
-    transform 0.3s,
-    border 0.3s;
-  transform-origin: center center;
-  outline: 0px solid transparent;
-}
-
-.feature-card a {
-  text-decoration: none;
-  color: var(--md-sys-color-on-surface);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.feature-card .card-text {
-  font-size: .875rem;
-}
-
-.feature-card:hover {
-  cursor: pointer;
-  transform: scale(1.08);
-  box-shadow: var(--md-sys-elevation-2);
-}
-
-.card-title.text-primary {
-  color: #000;
-}
-
-.home-card-icon {
-  width: 3rem;
-  height: 3rem;
-  transform: translateY(-5px);
-}
-
 .favorite-icon {
   display: none;
   position: absolute;
@@ -152,16 +52,6 @@
   margin: 0.0rem 0 0 1.25rem;
 }
 
-.card-title {
-  margin-bottom: 1rem;
-  font-size: 1.1rem;
-}
-
-/* Only show the favorite icons when the parent card is being hovered over */
-.feature-card:hover .favorite-icon {
-  display: block;
-}
-
 .favorite-icon img {
   filter: brightness(0) invert(var(--md-theme-filter-color));
 }
@@ -199,35 +89,3 @@
   -webkit-animation: 2s infinite Pulse steps(20);
   animation: 2s infinite Pulse steps(20);
 }
-
-@keyframes Pulse {
-  from {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-.update-notice {
-  animation: scale 1s infinite alternate;
-}
-
-@keyframes scale {
-  0% {
-    transform: scale(0.96);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.hidden {
-  visibility: hidden;
-}
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index 71c573986ef..d6528a7e0fa 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -374,3 +374,110 @@ span.icon-text::after {
 #stacked > .navbar-item {
   margin: 0;
 }
+
+.features-container {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+}
+
+.feature-group {
+  display: flex;
+      flex-direction: column;
+      min-width: 14rem;
+      max-width: 18rem;
+      flex: 1 1 min(14rem, 100%);
+      box-sizing: border-box;
+      height:auto;
+}
+
+.feature-rows{
+  display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 1rem;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
+.feature-group-header {
+  display: flex;
+  justify-content: flex-start;
+  color: var(--md-sys-color-on-surface);
+  margin-top: 15px;
+  user-select: none;
+  cursor: pointer;
+  gap: 10px;
+}
+
+.feature-group-container {
+  padding: 10px;
+}
+
+.feature-group-container.animated-group {
+  transition: 0.5s all;
+}
+
+
+.card-title.text-primary {
+  color: #000;
+}
+
+.home-card-icon {
+  width: 3rem;
+  height: 3rem;
+  transform: translateY(-5px);
+}
+
+.favorite-icon {
+  display: none;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--md-sys-color-secondary);
+}
+
+.favorite-icon img {
+  filter: brightness(0) invert(var(--md-theme-filter-color));
+}
+
+.favorite-icon:hover .material-symbols-rounded {
+  transform: scale(1.2);
+}
+
+.favorite-icon .material-symbols-rounded.fill{
+  color: #f5c000;
+}
+
+
+@keyframes Pulse {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.update-notice {
+  animation: scale 1s infinite alternate;
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(0.96);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index 890944c8436..f49ce6489a4 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -885,6 +885,13 @@ textarea.form-control {
   border-radius: 3rem;
   font-variation-settings: var(--md-sys-icon-fill-1);
 }
+.dropdown-item.no-hover:hover,
+.dropdown-item.no-hover:focus {
+  color: var(--md-sys-color-on-surface) !important;
+  background-color: transparent !important;
+  border-radius: 3rem !important;
+  font-variation-settings: initial !important;
+}
 
 .dropdown-item.active,
 .dropdown-item:active {
diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js
index 16e219f77c8..7500bd6a829 100644
--- a/src/main/resources/static/js/favourites.js
+++ b/src/main/resources/static/js/favourites.js
@@ -1,73 +1,112 @@
 function updateFavoritesDropdown() {
-  var dropdown = document.querySelector("#favoritesDropdown");
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+
+  for (var i = 0; i < localStorage.length; i++) {
+    var key = localStorage.key(i);
+    var value = localStorage.getItem(key);
+
+    if (value === 'favorite') {
+      const index = favoritesList.indexOf(key);
+      if (index === -1) {
+        favoritesList.push(key);
+        console.log(`Added to favorites: ${key}`);
+      }
+    }
+  }
+
+  var dropdown = document.querySelector('#favoritesDropdown');
 
   if (!dropdown) {
     console.error('Dropdown element with ID "favoritesDropdown" not found!');
     return;
   }
-  dropdown.innerHTML = "";
+  dropdown.innerHTML = '';
 
   var hasFavorites = false;
   var addedFeatures = new Set();
 
-  for (var i = 0; i < localStorage.length; i++) {
-    var key = localStorage.key(i);
-    var value = localStorage.getItem(key);
+  for (var i = 0; i < favoritesList.length; i++) {
+    var value = favoritesList[i];
+
+    var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
+    if (navbarEntry) {
+      var featureName = navbarEntry.textContent.trim();
 
-    if (value === "favorite") {
-      var navbarEntry = document.querySelector(`a[href='${key}']`);
-      if (navbarEntry) {
-        var featureName = navbarEntry.textContent.trim();
-
-        if (!addedFeatures.has(featureName)) {
-          var dropdownItem = document.createElement("div");
-          dropdownItem.className = "dropdown-item d-flex justify-content-between align-items-center";
-
-          // Create a wrapper for the original content
-          var contentWrapper = document.createElement("div");
-          contentWrapper.className = "d-flex align-items-center flex-grow-1";
-          contentWrapper.style.textDecoration = "none";
-          contentWrapper.style.color = "inherit";
-
-          // Clone the original content
-          var originalContent = navbarEntry.querySelector('div').cloneNode(true);
-          contentWrapper.appendChild(originalContent);
-
-          // Create the remove button
-          var removeButton = document.createElement("button");
-          removeButton.className = "btn btn-sm btn-link p-0 ml-2";
-          removeButton.innerHTML = '<i class="material-symbols-rounded close-icon" style="font-size: 18px;">close</i>';
-          removeButton.onclick = function(itemKey, event) {
-            event.preventDefault();
-            event.stopPropagation();
-            localStorage.removeItem(itemKey);
-            updateFavoritesSection();
-            updateFavoritesDropdown();
-            filterCards();
-          }.bind(null, key);
-
-          // Add click event to the content wrapper
-          contentWrapper.onclick = function(itemHref, event) {
-            event.preventDefault();
-            window.location.href = itemHref;
-          }.bind(null, navbarEntry.href);
-
-          dropdownItem.appendChild(contentWrapper);
-          dropdownItem.appendChild(removeButton);
-          dropdown.appendChild(dropdownItem);
-          hasFavorites = true;
-          addedFeatures.add(featureName);
-        }
-      } else {
-        console.warn(`Navbar entry not found for key: ${key}`);
+      if (!addedFeatures.has(featureName)) {
+        var dropdownItem = document.createElement('div');
+        dropdownItem.className = 'dropdown-item d-flex justify-content-between align-items-center';
+
+        // Create a wrapper for the original content
+        var contentWrapper = document.createElement('div');
+        contentWrapper.className = 'd-flex align-items-center flex-grow-1';
+        contentWrapper.style.textDecoration = 'none';
+        contentWrapper.style.color = 'inherit';
+
+        // Clone the original content
+        var originalContent = navbarEntry.querySelector('div').cloneNode(true);
+        contentWrapper.appendChild(originalContent);
+
+        // Create the remove button
+        var removeButton = document.createElement('button');
+        removeButton.className = 'btn btn-sm btn-link p-0 ml-2';
+        removeButton.innerHTML = '<i class="material-symbols-rounded close-icon" style="font-size: 18px;">close</i>';
+        removeButton.onclick = function (itemKey, event) {
+          event.preventDefault();
+          event.stopPropagation();
+          addToFavorites(itemKey);
+          updateFavoritesDropdown();
+        }.bind(null, value);
+
+        // Add click event to the content wrapper
+        contentWrapper.onclick = function (itemHref, event) {
+          event.preventDefault();
+          window.location.href = itemHref;
+        }.bind(null, navbarEntry.href);
+
+        dropdownItem.appendChild(contentWrapper);
+        dropdownItem.appendChild(removeButton);
+        dropdown.appendChild(dropdownItem);
+        hasFavorites = true;
+        addedFeatures.add(featureName);
       }
+    } else {
+      console.warn(`Navbar entry not found for : ${value}`);
     }
   }
 
   if (!hasFavorites) {
-    var defaultItem = document.createElement("a");
-    defaultItem.className = "dropdown-item";
-    defaultItem.textContent = noFavourites || "No favorites added";
+    var defaultItem = document.createElement('a');
+    defaultItem.className = 'dropdown-item';
+    defaultItem.textContent = noFavourites || 'No favorites added';
     dropdown.appendChild(defaultItem);
   }
 }
+
+function updateFavoriteIcons() {
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+  document.querySelectorAll('.favorite-icon').forEach((icon) => {
+    const endpoint = icon.getAttribute('data-endpoint');
+    if (favoritesList.includes(endpoint)) {
+      icon.style.color = 'gold';
+    } else {
+      icon.style.color = '';
+    }
+  });
+}
+
+function addToFavorites(entryId) {
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+  const index = favoritesList.indexOf(entryId);
+
+  if (index === -1) {
+    favoritesList.push(entryId);
+    console.log(`Added to favorites: ${entryId}`);
+  } else {
+    favoritesList.splice(index, 1);
+    console.log(`Removed from favorites: ${entryId}`);
+  }
+
+  localStorage.setItem('favoritesList', JSON.stringify(favoritesList));
+  updateFavoritesDropdown();
+  updateFavoriteIcons();
+}
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 60c1aede30e..593c1a5af47 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -6,7 +6,6 @@ function filterCards() {
   var filterWords = filter.split(/[\s,;.\-]+/);
 
   let featureGroups = document.querySelectorAll('.feature-group');
-  const collapsedGroups = getCollapsedGroups();
 
   for (const featureGroup of featureGroups) {
     var cards = featureGroup.querySelectorAll('.dropdown-item');
@@ -38,33 +37,16 @@ function filterCards() {
       featureGroup.style.display = 'none';
     } else {
       featureGroup.style.display = '';
-      resetOrTemporarilyExpandGroup(featureGroup, filter, collapsedGroups);
+      resetOrTemporarilyExpandGroup(featureGroup, filter);
     }
   }
 }
 
-function getCollapsedGroups() {
-  return localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
-}
-
-function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = '', collapsedGroups = []) {
-  const shouldResetCollapse = filterKeywords.trim() === '';
-  if (shouldResetCollapse) {
-    // Resetting the group's expand/collapse to its original state (as in collapsed groups)
-    const isCollapsed = collapsedGroups.indexOf(featureGroup.id) != -1;
-    expandCollapseToggle(featureGroup, !isCollapsed);
-  } else {
-    // Temporarily expands feature group without affecting the actual/stored collapsed groups
-    featureGroup.classList.remove('collapsed');
-  }
-}
-
 function updateFavoritesSection() {
   const favoritesContainer = document.getElementById('groupFavorites').querySelector('.feature-group-container');
-  favoritesContainer.style.maxHeight = 'none';
-  favoritesContainer.innerHTML = ''; // Clear the container first
+  favoritesContainer.innerHTML = '';
   const cards = Array.from(document.querySelectorAll('.feature-card:not(.duplicate)'));
-  const addedCardIds = new Set(); // To keep track of added card IDs
+  const addedCardIds = new Set();
   let favoritesAmount = 0;
 
   cards.forEach((card) => {
@@ -72,7 +54,7 @@ function updateFavoritesSection() {
       const duplicate = card.cloneNode(true);
       duplicate.classList.add('duplicate');
       favoritesContainer.appendChild(duplicate);
-      addedCardIds.add(card.id); // Mark this card as added
+      addedCardIds.add(card.id);
       favoritesAmount++;
     }
   });
@@ -178,9 +160,9 @@ function initializeCards() {
     var cardId = card.id;
     var span = card.querySelector('.favorite-icon span.material-symbols-rounded');
     if (localStorage.getItem(cardId) === 'favorite') {
-      span.classList.remove('no-fill');
-      span.classList.add('fill');
-      card.classList.add('favorite');
+      // span.classList.remove('no-fill');
+      // span.classList.add('fill');
+      // card.classList.add('favorite');
     }
   });
   reorderAllCards();
@@ -215,39 +197,6 @@ function toggleFavoritesOnly() {
   showFavoritesOnly();
 }
 
-// Expands a feature group on true, collapses it on false and toggles state on null.
-function expandCollapseToggle(group, expand = null) {
-  if (expand === null) {
-    group.classList.toggle('collapsed');
-  } else if (expand) {
-    group.classList.remove('collapsed');
-  } else {
-    group.classList.add('collapsed');
-  }
-
-  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
-  const groupIndex = collapsed.indexOf(group.id);
-
-  if (group.classList.contains('collapsed')) {
-    if (groupIndex === -1) {
-      collapsed.push(group.id);
-    }
-  } else {
-    if (groupIndex !== -1) {
-      collapsed.splice(groupIndex, 1);
-    }
-  }
-
-  localStorage.setItem('collapsedGroups', JSON.stringify(collapsed));
-}
-
-function expandCollapseAll(expandAll) {
-  const groups = Array.from(document.querySelectorAll('.feature-group'));
-  groups.forEach((group) => {
-    expandCollapseToggle(group, expandAll);
-  });
-}
-
 window.onload = function () {
   initializeCards();
   syncFavorites(); // Ensure everything is in sync on page load
@@ -269,32 +218,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
   Array.from(document.querySelectorAll('.feature-group-header')).forEach((header) => {
     const parent = header.parentNode;
-    const container = header.parentNode.querySelector('.feature-group-container');
-    if (parent.id !== 'groupFavorites') {
-      container.style.maxHeight = container.scrollHeight + 'px';
-    }
     header.onclick = () => {
       expandCollapseToggle(parent);
     };
   });
 
-  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
-  const groupsArray = Array.from(document.querySelectorAll('.feature-group'));
-
-  groupsArray.forEach((group) => {
-    if (collapsed.indexOf(group.id) !== -1) {
-      expandCollapseToggle(group, false);
-    }
-  });
-
-  // Necessary in order to not fire the transition animation on page load, which looks wrong.
-  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
-  setTimeout(() => {
-    groupsArray.forEach((group) => {
-      const container = group.querySelector('.feature-group-container');
-      container.classList.add('animated-group');
-    });
-  }, 500);
-
   showFavoritesOnly();
 });
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index fa0fc74f207..ee63debdba5 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -14,7 +14,7 @@
           <div class="row justify-content-center">
             <div class="col-md-6 bg-card">
               <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon image">image</span>
+                <span class="material-symbols-rounded tool-header-icon image">picture_as_pdf</span>
                 <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
               </div>
               <form  id="imageToPDFForm" method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/img/pdf'}">
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index d83ef4e9915..88747cea9d1 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -14,7 +14,7 @@
           <div class="row justify-content-center">
             <div class="col-md-6 bg-card">
               <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon image">image</span>
+                <span class="material-symbols-rounded tool-header-icon image">photo_library</span>
                 <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
               </div>
               <p th:text="#{processTimeWarning}"></p>
diff --git a/src/main/resources/templates/fragments/navElements.html b/src/main/resources/templates/fragments/navElements.html
new file mode 100644
index 00000000000..17eb1bbaa26
--- /dev/null
+++ b/src/main/resources/templates/fragments/navElements.html
@@ -0,0 +1,238 @@
+<th:block th:fragment="navElements">
+  <div class="feature-rows">
+    <div id="groupOrganize" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
+      </div>
+      <div class="feature-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+        </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('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.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('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.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('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>
+    </div>
+
+    <div id="groupConvertTo"  class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+      </div>
+      <div class="feature-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', '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
+        th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
+      </div>
+      </div>
+    </div>
+    <div id="groupConvertFrom" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+      </div>
+      <div class="feature-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
+      </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-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-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'tableExtraxt.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
+      </div>
+    </div>
+  </div>
+    <div id="groupSecurity" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
+      </div>
+      <div class="feature-group-container">
+        <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('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
+      </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('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+    </div>
+
+  <div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.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', 'contract_delete', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
+</div>
+      </div>
+    </div>
+
+    <div id="groupView" class="feature-group">
+      <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+      </div>
+      <div class="feature-group-container">
+        <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('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', 'text_fields', 'home.addImage.title', 'home.addImage.desc', 'addImage.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('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.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-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.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('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.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
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-image-pdf', 'remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('replace-color-pdf', 'format_color_fill', 'home.replaceColorPdf.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
+      </div>
+      </div>
+    </div>
+    <div id="groupAdvanced" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
+      </div>
+      <div class="feature-group-container">
+        <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('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
+      </div>
+      <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('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.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/navbarEntryCustom :: navbarEntry('auto-rename', '/images/rename.svg#icon-rename', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.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('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.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('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.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-pdf-by-chapters', 'book', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
+      </div>
+      </div>
+    </div>
+  </div>
+  </th:block>
\ 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 9e42f200219..014b4c6fc76 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -32,7 +32,7 @@
         <ul class="navbar-nav me-auto flex-nowrap">
 
           <!-- All Tools -->
-          <li class="nav-item dropdown dropdown-mega position-static">
+          <li id="navItemToHide" class="nav-item dropdown dropdown-mega position-static">
             <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">
@@ -42,229 +42,9 @@
             </a>
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="navbarDropdown-1">
               <div class="dropdown-menu-wrapper">
-                <div class='mega-content px-md-4'>
-                  <div class="container-fluid">
-                    <div class="row">
-                      <!-- Page tools menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1">
-                        <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-                        </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>
-                      <div id="stacked" class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"
-                        style="display:flex; flex-direction: column;">
-                        <!-- Convert to PDF menu items -->
-                        <div class="navbar-item py px-xl-1 px-2" style="margin-bottom: 1rem;">
-                          <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'picture_as_pdf', '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
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
-                          </div>
-                        </div>
-                        <!-- Convert from PDF menu items -->
-                        <div class="navbar-item py px-xl-1">
-                          <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'photo_library', '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
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
-                          </div>
-                        </div>
-                      </div>
-                      <!-- Security menu items -->
-                      <div class="navbar-item 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('validate-signature','verified','home.validateSignature.title','home.validateSignature.desc','validateSignature.tags','security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.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', 'contract_delete', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.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="navbar-item 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', 'wallpaper', '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
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-image-pdf','remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('replace-and-invert-color-pdf','format_color_fill', 'replace-color.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
-                        </div>
-                      </div>
-                      <!-- Advance menu items -->
-                      <div class="navbar-item 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 ('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.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/navbarEntryCustom :: navbarEntry ('auto-rename', '/images/rename.svg#icon-rename', '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-pdf-by-chapters', 'book', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.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>
+
+                    <th:block th:insert="~{fragments/navelements.html :: navElements}"></th:block>
+            </div>
             </div>
 
           </li>
@@ -477,4 +257,21 @@ <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5
     </div>
   </div>
   <script th:src="@{'/js/settings.js'}"></script>
+  <script>
+      window.onload = function () {
+    updateFavoritesDropdown();
+      }
+      document.addEventListener('DOMContentLoaded', function () {
+  const featureGroups = document.querySelectorAll('.feature-group');
+  featureGroups.forEach(group => {
+    const observer = new MutationObserver(() => {
+      group.style.height = 'auto'; // Reset height to auto
+      const height = group.scrollHeight; // Get the updated content height
+      group.style.height = `${height}px`; // Apply the new height
+    });
+
+    observer.observe(group, { childList: true, subtree: true });
+  });
+});
+  </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 9746d486cfc..c4b098fd50b 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,6 +1,6 @@
 <th:block th:fragment="navbarEntry(endpoint, toolIcon, titleKey, descKey, tagKey, toolGroup)"
 th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
-  <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative"  href="#" th:href="@{${endpoint}}"
+  <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative"  th:href="@{${endpoint}}" th:data-bs-link="@{${endpoint}}"
     th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
     th:data-bs-tags="#{${tagKey}}" th:data-bs-title='#{${titleKey}}'>
     <span class="nav-tooltip" th:text="#{${descKey}}"></span>
@@ -8,5 +8,9 @@
       <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
       <span  class="icon-text" th:text="#{${titleKey}}"></span>
     </div>
+    <span class="material-symbols-rounded favorite-icon" style="display: none;" th:data-endpoint="@{${endpoint}}" th:onclick="'addToFavorites(\'' + @{${endpoint}} + '\')'">
+      star
+    </span>
   </a>
+
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbarEntryCustom.html b/src/main/resources/templates/fragments/navbarEntryCustom.html
index c918e32f1b8..a6b024f72a7 100644
--- a/src/main/resources/templates/fragments/navbarEntryCustom.html
+++ b/src/main/resources/templates/fragments/navbarEntryCustom.html
@@ -1,13 +1,18 @@
 <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:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
+  <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative"  th:href="@{${endpoint}}" th:data-bs-link="@{${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}}">
+    th:data-bs-tags="#{${tagKey}}" th:data-bs-title='#{${titleKey}}'>
+    <span class="nav-tooltip" th:text="#{${descKey}}"></span>
+    <div style="height:2.5rem;align-items: center;display: flex" class="icon" alt="icon" th:class="@{${toolGroup}}">
       <svg class="nav-icon" style="height: 2.5rem; width:2.5rem">
         <use th:xlink:href="@{${toolIcon}}"></use>
       </svg>
       <span class="icon-text" th:text="#{${titleKey}}"></span>
     </div>
+    <span class="material-symbols-rounded favorite-icon" style="display: none;" th:data-endpoint="@{${endpoint}}" th:onclick="'addToFavorites(\'' + @{${endpoint}} + '\')'">
+      star
+    </span>
   </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 59049cfbd93..a43893d1c3e 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -34,6 +34,9 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
             search
           </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+        <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesMode()" style="font-size: 2rem;" >
+          star
+        </span>
       </div>
       </div>
         </div>
@@ -60,7 +63,6 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
           </div> -->
         </div>
         <div class="features-container">
-
           <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
             style="display: none;">
             <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
@@ -76,245 +78,15 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
             </a>
           </div>
 
-          <!-- <div id="groupFavorites" class="feature-group">
+          <div id="groupFavorites" class="feature-group">
             <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
             </div>
             <div class="feature-group-container">
             </div>
-          </div> -->
-          <div class="feature-rows">
-          <div id="groupOrganize" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
-            </div>
-            <div class="feature-group-container">
-
-              <div
-              th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-              </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('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.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('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.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('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>
-          </div>
-
-          <div id="groupConvertTo"  class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
-            </div>
-            <div class="feature-group-container">
-              <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
-              th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
-            </div>
-            </div>
-          </div>
-          <div id="groupConvertFrom" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
-            </div>
-            <div class="feature-group-container">
-              <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-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
-            </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-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'tableExtraxt.tags', 'convert')}">
-            </div>
-            <div
-              th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
-            </div>
           </div>
-        </div>
-          <div id="groupSecurity" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
-            </div>
-            <div class="feature-group-container">
-              <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('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
-            </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('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
-          </div>
+          <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
 
-        <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.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
-        th:replace="~{fragments/navbarEntry :: navbarEntry('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
-      </div>
-            </div>
-          </div>
-
-          <div id="groupView" class="feature-group">
-            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
-            </div>
-            <div class="feature-group-container">
-              <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('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', 'text_fields', 'home.addImage.title', 'home.addImage.desc', 'addImage.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('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.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-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.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('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.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
-              th:replace="~{fragments/navbarEntry :: navbarEntry('remove-image-pdf', 'remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
-            </div>
-            <div
-              th:replace="~{fragments/navbarEntry :: navbarEntry('replace-color-pdf', 'format_color_fill', 'home.replaceColorPdf.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
-            </div>
-            </div>
-          </div>
-          <div id="groupAdvanced" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
-            </div>
-            <div class="feature-group-container">
-              <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('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
-            </div>
-            <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('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.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('auto-rename', 'text_fields_alt', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.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('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.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('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.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-pdf-by-chapters', 'book', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
-            </div>
-            </div>
-          </div>
-        </div>
         </div>
       </div>
     </div>
@@ -386,7 +158,18 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
   </div>
 
 
-
+<style> .favorite-icon {
+  cursor: pointer;
+  width:0rem;
+  font-size: 2rem;
+}
+.toggle-favourites{
+  cursor: pointer;
+}
+.toggle-favourites.active {
+  color: gold;
+}
+</style>
   <script th:src="@{'/js/fetch-utils.js'}"></script>
   <script th:inline="javascript">
 
@@ -425,6 +208,41 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
         });
     }
 
+    let favoritesMode = false;
+function toggleFavoritesMode() {
+  favoritesMode = !favoritesMode;
+  document.querySelector('.toggle-favourites').classList.toggle('active', favoritesMode);
+  document.querySelectorAll('.favorite-icon').forEach(icon => {
+    icon.style.display = favoritesMode ? 'inline-block' : 'none';
+  });
+  document.querySelectorAll('.dropdown-item').forEach(link => {
+    if (favoritesMode) {
+      link.dataset.originalHref = link.getAttribute('href'); // Save original href
+      link.setAttribute('href', '#');
+
+      link.classList.add('no-hover');
+    } else {
+      link.setAttribute('href', link.dataset.originalHref);
+      link.classList.remove('no-hover');
+    }
+  });
+
+}
+
+updateFavoriteIcons();
+
+
+
+// function updateFavoritesDropdown() {
+//   const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+//   const favoritesDropdown = document.getElementById('favoritesDropdown');
+//   favoritesDropdown.innerHTML = '';
+//   favoritesList.forEach(fav => {
+//     const item = document.createElement('div');
+//     item.textContent = fav;
+//     favoritesDropdown.appendChild(item);
+//   });
+// }
 
 
 
@@ -486,7 +304,16 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
       if (localStorage.getItem('dontShowSurvey')) {
         modal.hide();
       }
-    });
+
+    if (window.location.pathname === '/') {
+      const navItem = document.getElementById('navItemToHide');
+      if (navItem) {
+        navItem.style.display = 'none'
+      }
+    }
+    updateFavoritesDropdown();
+
+  });
   </script>
 
 
diff --git a/src/main/resources/templates/security/auto-redact.html b/src/main/resources/templates/security/auto-redact.html
index 7a4bcc5dd97..26bfb39eb7e 100644
--- a/src/main/resources/templates/security/auto-redact.html
+++ b/src/main/resources/templates/security/auto-redact.html
@@ -13,7 +13,7 @@
           <div class="row justify-content-center">
             <div class="col-md-6 bg-card">
               <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon security">ink_eraser</span>
+                <span class="material-symbols-rounded tool-header-icon security">playlist_remove</span>
                 <span class="tool-header-text" th:text="#{autoRedact.header}"></span>
               </div>
               <form th:action="@{'api/v1/security/auto-redact'}" method="post" enctype="multipart/form-data">
diff --git a/src/main/resources/templates/security/redact.html b/src/main/resources/templates/security/redact.html
index 2088ce4a9bd..efb8ee89015 100644
--- a/src/main/resources/templates/security/redact.html
+++ b/src/main/resources/templates/security/redact.html
@@ -31,7 +31,7 @@
     <div class="row justify-content-center">
       <div class="col-md-6 bg-card">
         <div class="tool-header">
-          <span class="material-symbols-rounded tool-header-icon security">ink_eraser</span>
+          <span class="material-symbols-rounded tool-header-icon security">playlist_remove</span>
           <span class="tool-header-text" th:text="#{redact.header}"></span>
         </div>
         <form th:action="@{'api/v1/security/redact'}" method="post" enctype="multipart/form-data">

From 0a7c205beacc10f4f210f799c5071f578a1686b8 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Tue, 14 Jan 2025 11:36:26 +0000
Subject: [PATCH 08/20] fix fragment

---
 src/main/resources/templates/fragments/navbar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 014b4c6fc76..3e627baad69 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -43,7 +43,7 @@
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="navbarDropdown-1">
               <div class="dropdown-menu-wrapper">
 
-                    <th:block th:insert="~{fragments/navelements.html :: navElements}"></th:block>
+                    <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
             </div>
             </div>
 

From c40ee9f2406d1dc741d92a0022f322639ca1d201 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Tue, 14 Jan 2025 12:21:48 +0000
Subject: [PATCH 09/20] Remove unnecessary function

---
 src/main/resources/static/js/homecard.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 593c1a5af47..67fd41d901d 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -37,7 +37,6 @@ function filterCards() {
       featureGroup.style.display = 'none';
     } else {
       featureGroup.style.display = '';
-      resetOrTemporarilyExpandGroup(featureGroup, filter);
     }
   }
 }

From 539c6f049fe617745600b9cbe774093a71f6e8f4 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Wed, 15 Jan 2025 02:20:10 +0000
Subject: [PATCH 10/20] Restore old homepage as option and add feature row

---
 src/main/resources/static/css/home-legacy.css | 229 ++++++++
 src/main/resources/static/css/navbar.css      |   5 +-
 src/main/resources/static/js/favourites.js    | 118 ++--
 .../resources/static/js/homecard-legacy.js    | 260 +++++++++
 src/main/resources/static/js/homecard.js      | 155 ++----
 .../resources/templates/fragments/card.html   |  10 +-
 .../resources/templates/fragments/common.html |   1 +
 .../fragments/featureGroupHeaderLegacy.html   |   6 +
 .../templates/fragments/navElements.html      |  14 +-
 .../resources/templates/fragments/navbar.html |   2 +
 src/main/resources/templates/home-legacy.html | 509 ++++++++++++++++++
 src/main/resources/templates/home.html        |  31 +-
 .../resources/templates/misc/auto-rename.html |   7 +-
 13 files changed, 1165 insertions(+), 182 deletions(-)
 create mode 100644 src/main/resources/static/css/home-legacy.css
 create mode 100644 src/main/resources/static/js/homecard-legacy.js
 create mode 100644 src/main/resources/templates/fragments/featureGroupHeaderLegacy.html
 create mode 100644 src/main/resources/templates/home-legacy.html

diff --git a/src/main/resources/static/css/home-legacy.css b/src/main/resources/static/css/home-legacy.css
new file mode 100644
index 00000000000..b25fafc1791
--- /dev/null
+++ b/src/main/resources/static/css/home-legacy.css
@@ -0,0 +1,229 @@
+#searchBar {
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface-container-low);
+    width: 100%;
+    font-size: 16px;
+    margin-bottom: 2rem;
+    padding: 0.75rem 3.5rem;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 3rem;
+    outline-color: var(--md-sys-color-outline-variant);
+  }
+
+  #filtersContainer {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .filter-button {
+    color: var(--md-sys-color-secondary);
+    user-select: none;
+    cursor: pointer;
+    transition: transform 0.3s;
+    transform-origin: center center;
+  }
+
+  .filter-button:hover {
+    transform: scale(1.08);
+  }
+
+  .search-icon {
+    position: absolute;
+    margin: 0.75rem 1rem;
+    border: 0.1rem solid transparent;
+  }
+
+  .features-container {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .feature-group-legacy {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .feature-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--md-sys-color-on-surface);
+    margin-bottom: 15px;
+    user-select: none;
+    cursor: pointer;
+    gap: 10px;
+  }
+
+  .feature-group-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
+    gap: 30px 30px;
+    overflow: hidden;
+    margin: -20px;
+    padding: 20px;
+    box-sizing:content-box;
+  }
+
+  .feature-group-container.animated-group {
+    transition: 0.5s all;
+  }
+
+  .feature-group-legacy.collapsed>.feature-group-container {
+    max-height: 0 !important;
+    margin: 0;
+    padding: 0;
+  }
+
+  .header-expand-button {
+    transition: 0.5s all;
+    transform: rotate(90deg);
+  }
+
+  .header-expand-button.collapsed {
+    transform: rotate(0deg);
+  }
+
+  .feature-card {
+    border: 1px solid var(--md-sys-color-surface-5);
+    border-radius: 1.75rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: var(--md-sys-color-surface-5);
+    transition:
+      transform 0.3s,
+      border 0.3s;
+    transform-origin: center center;
+    outline: 0px solid transparent;
+    position:relative;
+  }
+
+  .feature-card a {
+    text-decoration: none;
+    color: var(--md-sys-color-on-surface);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .feature-card .card-text {
+    font-size: .875rem;
+  }
+
+  .feature-card:hover {
+    cursor: pointer;
+    transform: scale(1.08);
+    box-shadow: var(--md-sys-elevation-2);
+  }
+
+  .card-title.text-primary {
+    color: #000;
+  }
+
+  .home-card-icon {
+    width: 3rem;
+    height: 3rem;
+    transform: translateY(-5px);
+  }
+
+  .favorite-icon {
+    display: none !important;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: var(--md-sys-color-secondary);
+  }
+
+  #tool-icon {
+    height: 100%;
+  }
+
+  #tool-text {
+    margin: 0.0rem 0 0 1.25rem;
+  }
+
+  .card-title {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+  }
+
+  /* Only show the favorite icons when the parent card is being hovered over */
+  .feature-card:hover .favorite-icon {
+    display: block  !important;
+  }
+
+  .favorite-icon img {
+    filter: brightness(0) invert(var(--md-theme-filter-color));
+  }
+
+  .favorite-icon:hover .material-symbols-rounded {
+    transform: scale(1.2);
+  }
+
+  .favorite-icon .material-symbols-rounded.fill{
+    color: #f5c000;
+  }
+
+  .jumbotron {
+    padding: 3rem 3rem;
+    /* Reduce vertical padding */
+  }
+
+  .lookatme {
+    opacity: 1;
+    position: relative;
+    display: inline-block;
+  }
+
+  .lookatme::after {
+    color: #e33100;
+    text-shadow: 0 0 5px #e33100;
+    /* in the html, the data-lookatme-text attribute must */
+    /* contain the same text as the .lookatme element */
+    content: attr(data-lookatme-text);
+    padding: inherit;
+    position: absolute;
+    inset: 0 0 0 0;
+    z-index: 1;
+    /* 20 steps / 2 seconds = 10fps */
+    -webkit-animation: 2s infinite Pulse steps(20);
+    animation: 2s infinite Pulse steps(20);
+  }
+
+  @keyframes Pulse {
+    from {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  .update-notice {
+    animation: scale 1s infinite alternate;
+  }
+
+  @keyframes scale {
+    0% {
+      transform: scale(0.96);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index d6528a7e0fa..c600d54759e 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -410,13 +410,10 @@ span.icon-text::after {
   gap: 10px;
 }
 
-.feature-group-container {
+.nav-group-container {
   padding: 10px;
 }
 
-.feature-group-container.animated-group {
-  transition: 0.5s all;
-}
 
 
 .card-title.text-primary {
diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js
index 7500bd6a829..949a2cf9977 100644
--- a/src/main/resources/static/js/favourites.js
+++ b/src/main/resources/static/js/favourites.js
@@ -9,6 +9,7 @@ function updateFavoritesDropdown() {
       const index = favoritesList.indexOf(key);
       if (index === -1) {
         favoritesList.push(key);
+        localStorage.removeItem(key);
         console.log(`Added to favorites: ${key}`);
       }
     }
@@ -27,47 +28,48 @@ function updateFavoritesDropdown() {
 
   for (var i = 0; i < favoritesList.length; i++) {
     var value = favoritesList[i];
-
-    var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
-    if (navbarEntry) {
-      var featureName = navbarEntry.textContent.trim();
-
-      if (!addedFeatures.has(featureName)) {
-        var dropdownItem = document.createElement('div');
-        dropdownItem.className = 'dropdown-item d-flex justify-content-between align-items-center';
-
-        // Create a wrapper for the original content
-        var contentWrapper = document.createElement('div');
-        contentWrapper.className = 'd-flex align-items-center flex-grow-1';
-        contentWrapper.style.textDecoration = 'none';
-        contentWrapper.style.color = 'inherit';
-
-        // Clone the original content
-        var originalContent = navbarEntry.querySelector('div').cloneNode(true);
-        contentWrapper.appendChild(originalContent);
-
-        // Create the remove button
-        var removeButton = document.createElement('button');
-        removeButton.className = 'btn btn-sm btn-link p-0 ml-2';
-        removeButton.innerHTML = '<i class="material-symbols-rounded close-icon" style="font-size: 18px;">close</i>';
-        removeButton.onclick = function (itemKey, event) {
-          event.preventDefault();
-          event.stopPropagation();
-          addToFavorites(itemKey);
-          updateFavoritesDropdown();
-        }.bind(null, value);
-
-        // Add click event to the content wrapper
-        contentWrapper.onclick = function (itemHref, event) {
-          event.preventDefault();
-          window.location.href = itemHref;
-        }.bind(null, navbarEntry.href);
-
-        dropdownItem.appendChild(contentWrapper);
-        dropdownItem.appendChild(removeButton);
-        dropdown.appendChild(dropdownItem);
-        hasFavorites = true;
-        addedFeatures.add(featureName);
+    if (value) {
+      var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
+      if (navbarEntry) {
+        var featureName = navbarEntry.textContent.trim();
+
+        if (!addedFeatures.has(featureName)) {
+          var dropdownItem = document.createElement('div');
+          dropdownItem.className = 'dropdown-item d-flex justify-content-between align-items-center';
+
+          // Create a wrapper for the original content
+          var contentWrapper = document.createElement('div');
+          contentWrapper.className = 'd-flex align-items-center flex-grow-1';
+          contentWrapper.style.textDecoration = 'none';
+          contentWrapper.style.color = 'inherit';
+
+          // Clone the original content
+          var originalContent = navbarEntry.querySelector('div').cloneNode(true);
+          contentWrapper.appendChild(originalContent);
+
+          // Create the remove button
+          var removeButton = document.createElement('button');
+          removeButton.className = 'btn btn-sm btn-link p-0 ml-2';
+          removeButton.innerHTML = '<i class="material-symbols-rounded close-icon" style="font-size: 18px;">close</i>';
+          removeButton.onclick = function (itemKey, event) {
+            event.preventDefault();
+            event.stopPropagation();
+            addToFavorites(itemKey);
+            updateFavoritesDropdown();
+          }.bind(null, value);
+
+          // Add click event to the content wrapper
+          contentWrapper.onclick = function (itemHref, event) {
+            event.preventDefault();
+            window.location.href = itemHref;
+          }.bind(null, navbarEntry.href);
+
+          dropdownItem.appendChild(contentWrapper);
+          dropdownItem.appendChild(removeButton);
+          dropdown.appendChild(dropdownItem);
+          hasFavorites = true;
+          addedFeatures.add(featureName);
+        }
       }
     } else {
       console.warn(`Navbar entry not found for : ${value}`);
@@ -95,18 +97,26 @@ function updateFavoriteIcons() {
 }
 
 function addToFavorites(entryId) {
-  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
-  const index = favoritesList.indexOf(entryId);
-
-  if (index === -1) {
-    favoritesList.push(entryId);
-    console.log(`Added to favorites: ${entryId}`);
-  } else {
-    favoritesList.splice(index, 1);
-    console.log(`Removed from favorites: ${entryId}`);
-  }
+  if (entryId) {
+    const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+    const index = favoritesList.indexOf(entryId);
 
-  localStorage.setItem('favoritesList', JSON.stringify(favoritesList));
-  updateFavoritesDropdown();
-  updateFavoriteIcons();
+    if (index === -1) {
+      favoritesList.push(entryId);
+      console.log(`Added to favorites: ${entryId}`);
+    } else {
+      favoritesList.splice(index, 1);
+      console.log(`Removed from favorites: ${entryId}`);
+    }
+
+    localStorage.setItem('favoritesList', JSON.stringify(favoritesList));
+    updateFavoritesDropdown();
+    updateFavoriteIcons();
+    const currentPath = window.location.pathname;
+    if (currentPath.includes('home-legacy')) {
+      syncFavoritesLegacy();
+    } else {
+      syncFavorites();
+    }
+  }
 }
diff --git a/src/main/resources/static/js/homecard-legacy.js b/src/main/resources/static/js/homecard-legacy.js
new file mode 100644
index 00000000000..48d0c526fe5
--- /dev/null
+++ b/src/main/resources/static/js/homecard-legacy.js
@@ -0,0 +1,260 @@
+function filterCardsLegacy() {
+  var input = document.getElementById('searchBar');
+  var filter = input.value.toUpperCase();
+
+  let featureGroups = document.querySelectorAll('.feature-group-legacy');
+  const collapsedGroups = getCollapsedGroups();
+
+  for (const featureGroup of featureGroups) {
+    var cards = featureGroup.querySelectorAll('.feature-card');
+
+    let groupMatchesFilter = false;
+    for (var i = 0; i < cards.length; i++) {
+      var card = cards[i];
+      var title = card.querySelector('h5.card-title').innerText;
+      var text = card.querySelector('p.card-text').innerText;
+
+      // Get the navbar tags associated with the card
+      var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
+      var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
+
+      var content = title + ' ' + text + ' ' + navbarTags;
+
+      if (content.toUpperCase().indexOf(filter) > -1) {
+        card.style.display = '';
+        groupMatchesFilter = true;
+      } else {
+        card.style.display = 'none';
+      }
+    }
+
+    if (!groupMatchesFilter) {
+      featureGroup.style.display = 'none';
+    } else {
+      featureGroup.style.display = '';
+      resetOrTemporarilyExpandGroup(featureGroup, filter, collapsedGroups);
+    }
+  }
+}
+
+function getCollapsedGroups() {
+  return localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+}
+
+function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = '', collapsedGroups = []) {
+  const shouldResetCollapse = filterKeywords.trim() === '';
+  if (shouldResetCollapse) {
+    // Resetting the group's expand/collapse to its original state (as in collapsed groups)
+    const isCollapsed = collapsedGroups.indexOf(featureGroup.id) != -1;
+    expandCollapseToggle(featureGroup, !isCollapsed);
+  } else {
+    // Temporarily expands feature group without affecting the actual/stored collapsed groups
+    featureGroup.classList.remove('collapsed');
+    featureGroup.querySelector('.header-expand-button').classList.remove('collapsed');
+  }
+}
+
+function updateFavoritesSectionLegacy() {
+  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.feature-group-container');
+  favoritesContainer.innerHTML = '';
+  const cards = Array.from(document.querySelectorAll('.feature-card:not(.duplicate)'));
+  const addedCardIds = new Set();
+  let favoritesAmount = 0;
+
+  cards.forEach((card) => {
+    const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
+
+    if (favouritesList.includes(card.id) && !addedCardIds.has(card.id)) {
+      const duplicate = card.cloneNode(true);
+      duplicate.classList.add('duplicate');
+      favoritesContainer.appendChild(duplicate);
+      addedCardIds.add(card.id);
+      favoritesAmount++;
+    }
+  });
+
+  if (favoritesAmount === 0) {
+    document.getElementById('groupFavorites').style.display = 'none';
+  } else {
+    document.getElementById('groupFavorites').style.display = 'flex';
+  }
+  reorderCards(favoritesContainer);
+  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
+}
+
+function syncFavoritesLegacy() {
+  const cards = Array.from(document.querySelectorAll('.feature-card'));
+  cards.forEach((card) => {
+    const isFavorite = localStorage.getItem(card.id) === 'favorite';
+    const starIcon = card.querySelector('.favorite-icon span.material-symbols-rounded');
+    if (starIcon) {
+      if (isFavorite) {
+        starIcon.classList.remove('no-fill');
+        starIcon.classList.add('fill');
+        card.classList.add('favorite');
+      } else {
+        starIcon.classList.remove('fill');
+        starIcon.classList.add('no-fill');
+        card.classList.remove('favorite');
+      }
+    }
+  });
+  updateFavoritesSectionLegacy();
+  updateFavoritesDropdown();
+  filterCardsLegacy();
+}
+
+function reorderCards(container) {
+  var cards = Array.from(container.querySelectorAll('.feature-card'));
+  cards.forEach(function (card) {
+    container.removeChild(card);
+  });
+  cards.sort(function (a, b) {
+    var aIsFavorite = localStorage.getItem(a.id) === 'favorite';
+    var bIsFavorite = localStorage.getItem(b.id) === 'favorite';
+    if (a.id === 'update-link') {
+      return -1;
+    }
+    if (b.id === 'update-link') {
+      return 1;
+    }
+
+    if (aIsFavorite && !bIsFavorite) {
+      return -1;
+    } else if (!aIsFavorite && bIsFavorite) {
+      return 1;
+    } else {
+      return a.id > b.id;
+    }
+  });
+  cards.forEach(function (card) {
+    container.appendChild(card);
+  });
+}
+
+function reorderAllCards() {
+  const containers = Array.from(document.querySelectorAll('.feature-group-container'));
+  containers.forEach(function (container) {
+    reorderCards(container);
+  });
+}
+
+function initializeCardsLegacy() {
+  reorderAllCards();
+  updateFavoritesSectionLegacy();
+  updateFavoritesDropdown();
+  filterCardsLegacy();
+}
+
+function showFavoritesOnly() {
+  const groups = Array.from(document.querySelectorAll('.feature-group-legacy'));
+  if (localStorage.getItem('favoritesOnly') === 'true') {
+    groups.forEach((group) => {
+      if (group.id !== 'groupFavorites') {
+        group.style.display = 'none';
+      }
+    });
+  } else {
+    groups.forEach((group) => {
+      if (group.id !== 'groupFavorites') {
+        group.style.display = 'flex';
+      }
+    });
+  }
+}
+
+function toggleFavoritesOnly() {
+  if (localStorage.getItem('favoritesOnly') === 'true') {
+    localStorage.setItem('favoritesOnly', 'false');
+  } else {
+    localStorage.setItem('favoritesOnly', 'true');
+  }
+  showFavoritesOnly();
+}
+
+// Expands a feature group on true, collapses it on false and toggles state on null.
+function expandCollapseToggle(group, expand = null) {
+  if (expand === null) {
+    group.classList.toggle('collapsed');
+    group.querySelector('.header-expand-button').classList.toggle('collapsed');
+  } else if (expand) {
+    group.classList.remove('collapsed');
+    group.querySelector('.header-expand-button').classList.remove('collapsed');
+  } else {
+    group.classList.add('collapsed');
+    group.querySelector('.header-expand-button').classList.add('collapsed');
+  }
+
+  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+  const groupIndex = collapsed.indexOf(group.id);
+
+  if (group.classList.contains('collapsed')) {
+    if (groupIndex === -1) {
+      collapsed.push(group.id);
+    }
+  } else {
+    if (groupIndex !== -1) {
+      collapsed.splice(groupIndex, 1);
+    }
+  }
+
+  localStorage.setItem('collapsedGroups', JSON.stringify(collapsed));
+}
+
+function expandCollapseAll(expandAll) {
+  const groups = Array.from(document.querySelectorAll('.feature-group-legacy'));
+  groups.forEach((group) => {
+    expandCollapseToggle(group, expandAll);
+  });
+}
+
+window.onload = function () {
+  initializeCardsLegacy();
+  syncFavoritesLegacy(); // Ensure everything is in sync on page load
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  const materialIcons = new FontFaceObserver('Material Symbols Rounded');
+
+  materialIcons
+    .load()
+    .then(() => {
+      document.querySelectorAll('.feature-card.hidden').forEach((el) => {
+        el.classList.remove('hidden');
+      });
+    })
+    .catch(() => {
+      console.error('Material Symbols Rounded font failed to load.');
+    });
+
+  Array.from(document.querySelectorAll('.feature-group-header-legacy')).forEach((header) => {
+    const parent = header.parentNode;
+    const container = header.parentNode.querySelector('.feature-group-container');
+    if (parent.id !== 'groupFavorites') {
+      container.style.maxHeight = container.scrollHeight + 'px';
+    }
+    header.onclick = () => {
+      expandCollapseToggle(parent);
+    };
+  });
+
+  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+  const groupsArray = Array.from(document.querySelectorAll('.feature-group-legacy'));
+
+  groupsArray.forEach((group) => {
+    if (collapsed.indexOf(group.id) !== -1) {
+      expandCollapseToggle(group, false);
+    }
+  });
+
+  // Necessary in order to not fire the transition animation on page load, which looks wrong.
+  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
+  setTimeout(() => {
+    groupsArray.forEach((group) => {
+      const container = group.querySelector('.feature-group-container');
+      container.classList.add('animated-group');
+    });
+  }, 500);
+
+  showFavoritesOnly();
+});
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 67fd41d901d..b57b8565f57 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -42,77 +42,60 @@ function filterCards() {
 }
 
 function updateFavoritesSection() {
-  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.feature-group-container');
-  favoritesContainer.innerHTML = '';
-  const cards = Array.from(document.querySelectorAll('.feature-card:not(.duplicate)'));
-  const addedCardIds = new Set();
-  let favoritesAmount = 0;
-
-  cards.forEach((card) => {
-    if (localStorage.getItem(card.id) === 'favorite' && !addedCardIds.has(card.id)) {
-      const duplicate = card.cloneNode(true);
-      duplicate.classList.add('duplicate');
-      favoritesContainer.appendChild(duplicate);
-      addedCardIds.add(card.id);
-      favoritesAmount++;
-    }
-  });
+  if (localStorage.getItem('favoritesView') === 'true') {
+    const favoritesContainer = document.getElementById('groupFavorites').querySelector('.nav-group-container');
+    favoritesContainer.innerHTML = '';
+    let favoritesAmount = 0;
+    const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
+
+    favouritesList.forEach((value) => {
+      var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
+      if (navbarEntry) {
+        const duplicate = navbarEntry.cloneNode(true);
+        favoritesContainer.appendChild(duplicate);
+      }
+    });
 
-  if (favoritesAmount === 0) {
-    document.getElementById('groupFavorites').style.display = 'none';
-  } else {
-    document.getElementById('groupFavorites').style.display = 'flex';
+    if (favoritesAmount === 0) {
+      document.getElementById('groupFavorites').style.display = 'none';
+    } else {
+      document.getElementById('groupFavorites').style.display = 'flex';
+    }
+    reorderCards(favoritesContainer);
+    favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
   }
-  reorderCards(favoritesContainer);
-  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
-}
 
-function toggleFavorite(element) {
-  var span = element.querySelector('span.material-symbols-rounded');
-  var card = element.closest('.dropdown-item');
-  var cardId = card.id;
+  function toggleFavorite(element) {
+    var span = element.querySelector('span.material-symbols-rounded');
+    var card = element.closest('.dropdown-item');
+    var cardId = card.id;
 
-  // Prevent the event from bubbling up to parent elements
-  event.stopPropagation();
+    // Prevent the event from bubbling up to parent elements
+    event.stopPropagation();
 
-  if (span.classList.contains('no-fill')) {
-    span.classList.remove('no-fill');
-    span.classList.add('fill');
-    card.classList.add('favorite');
-    localStorage.setItem(cardId, 'favorite');
-  } else {
-    span.classList.remove('fill');
-    span.classList.add('no-fill');
-    card.classList.remove('favorite');
-    localStorage.removeItem(cardId);
-  }
+    if (span.classList.contains('no-fill')) {
+      span.classList.remove('no-fill');
+      span.classList.add('fill');
+      card.classList.add('favorite');
+      localStorage.setItem(cardId, 'favorite');
+    } else {
+      span.classList.remove('fill');
+      span.classList.add('no-fill');
+      card.classList.remove('favorite');
+      localStorage.removeItem(cardId);
+    }
 
-  // Use setTimeout to ensure this runs after the current call stack is clear
-  setTimeout(() => {
-    reorderCards(card.parentNode);
-    updateFavoritesSection();
-    updateFavoritesDropdown();
-    filterCards();
-  }, 0);
+    // Use setTimeout to ensure this runs after the current call stack is clear
+    setTimeout(() => {
+      reorderCards(card.parentNode);
+      updateFavoritesSection();
+      updateFavoritesDropdown();
+      filterCards();
+    }, 0);
+  }
 }
 
 function syncFavorites() {
-  const cards = Array.from(document.querySelectorAll('.dropdown-item'));
-  cards.forEach((card) => {
-    const isFavorite = localStorage.getItem(card.id) === 'favorite';
-    const starIcon = card.querySelector('.favorite-icon span.material-symbols-rounded');
-    if (starIcon) {
-      if (isFavorite) {
-        starIcon.classList.remove('no-fill');
-        starIcon.classList.add('fill');
-        card.classList.add('favorite');
-      } else {
-        starIcon.classList.remove('fill');
-        starIcon.classList.add('no-fill');
-        card.classList.remove('favorite');
-      }
-    }
-  });
   updateFavoritesSection();
   updateFavoritesDropdown();
   filterCards();
@@ -146,54 +129,28 @@ function reorderCards(container) {
   });
 }
 
-function reorderAllCards() {
-  const containers = Array.from(document.querySelectorAll('.feature-group-container'));
-  containers.forEach(function (container) {
-    reorderCards(container);
-  });
-}
-
 function initializeCards() {
-  var cards = document.querySelectorAll('.dropdown-item');
-  cards.forEach(function (card) {
-    var cardId = card.id;
-    var span = card.querySelector('.favorite-icon span.material-symbols-rounded');
-    if (localStorage.getItem(cardId) === 'favorite') {
-      // span.classList.remove('no-fill');
-      // span.classList.add('fill');
-      // card.classList.add('favorite');
-    }
-  });
-  reorderAllCards();
   updateFavoritesSection();
   updateFavoritesDropdown();
   filterCards();
 }
 
-function showFavoritesOnly() {
-  const groups = Array.from(document.querySelectorAll('.feature-group'));
-  if (localStorage.getItem('favoritesOnly') === 'true') {
-    groups.forEach((group) => {
-      if (group.id !== 'groupFavorites') {
-        group.style.display = 'none';
-      }
-    });
+function showFavorites() {
+  const favoritesGroup = document.querySelector('#groupFavorites');
+  if (localStorage.getItem('favoritesView') === 'true') {
+    favoritesGroup.style.display = 'flex';
   } else {
-    groups.forEach((group) => {
-      if (group.id !== 'groupFavorites') {
-        group.style.display = 'flex';
-      }
-    });
+    favoritesGroup.style.display = 'none';
   }
 }
 
-function toggleFavoritesOnly() {
-  if (localStorage.getItem('favoritesOnly') === 'true') {
-    localStorage.setItem('favoritesOnly', 'false');
+function toggleFavoritesView() {
+  if (localStorage.getItem('favoritesView') === 'true') {
+    localStorage.setItem('favoritesView', 'false');
   } else {
-    localStorage.setItem('favoritesOnly', 'true');
+    localStorage.setItem('favoritesView', 'true');
   }
-  showFavoritesOnly();
+  showFavorites();
 }
 
 window.onload = function () {
@@ -221,6 +178,4 @@ document.addEventListener('DOMContentLoaded', function () {
       expandCollapseToggle(parent);
     };
   });
-
-  showFavoritesOnly();
 });
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index e4f5e9130d1..b2ab67eece7 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,5 +1,6 @@
-<div th:fragment="card" class="feature-card hidden" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
-  th:data-bs-tags="${tags}">
+<div th:fragment="card" class="feature-card hidden" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)} "
+  th:data-bs-tags="${tags}"
+  th:data-bs-link="@{${endpoint}}">
   <a th:href="${cardLink}">
     <div class="d-flex align-items-center">
 
@@ -14,10 +15,7 @@ <h5 class="card-title" th:text="${cardTitle}"></h5>
 
     </div>
   </a>
-  <div class="favorite-icon" onclick="toggleFavorite(this)">
-    <span class="material-symbols-rounded">
+    <span class="material-symbols-rounded favorite-icon" th:data-endpoint="@{${endpoint}}" th:onclick="'addToFavorites(\'' + @{${cardLink}} + '\')'">
       star
     </span>
-  </div>
-</div>
 </div>
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index a6099f5a121..153e03c8b36 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -52,6 +52,7 @@
     <link rel="stylesheet" th:href="@{'/css/error.css'}" th:if="${error}">
 
     <link rel="stylesheet" th:href="@{'/css/home.css'}" th:if="${currentPage == 'home'}">
+    <link rel="stylesheet" th:href="@{'/css/home-legacy.css'}" th:if="${currentPage == 'home-legacy'}">
     <link rel="stylesheet" th:href="@{'/css/account.css'}" th:if="${currentPage == 'account'}">
     <link rel="stylesheet" th:href="@{'/css/licenses.css'}" th:if="${currentPage == 'licenses'}">
     <link rel="stylesheet" th:href="@{'/css/multi-tool.css'}" th:if="${currentPage == 'multi-tool'}">
diff --git a/src/main/resources/templates/fragments/featureGroupHeaderLegacy.html b/src/main/resources/templates/fragments/featureGroupHeaderLegacy.html
new file mode 100644
index 00000000000..0a8f7e9b12f
--- /dev/null
+++ b/src/main/resources/templates/fragments/featureGroupHeaderLegacy.html
@@ -0,0 +1,6 @@
+<div th:fragment="featureGroupHeader" class="feature-group-header">
+  <h3 class="menu-title" th:text="${groupTitle}"></h3>
+  <span class="material-symbols-rounded header-expand-button">
+    chevron_right
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navElements.html b/src/main/resources/templates/fragments/navElements.html
index 17eb1bbaa26..eabd718be00 100644
--- a/src/main/resources/templates/fragments/navElements.html
+++ b/src/main/resources/templates/fragments/navElements.html
@@ -1,10 +1,9 @@
 <th:block th:fragment="navElements">
-  <div class="feature-rows">
     <div id="groupOrganize" class="feature-group">
       <div
         th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
       </div>
-      <div class="feature-group-container">
+      <div class="nav-group-container">
         <div
         th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
         </div>
@@ -45,7 +44,7 @@
       <div
         th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
       </div>
-      <div class="feature-group-container">
+      <div class="nav-group-container">
         <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
       </div>
@@ -70,7 +69,7 @@
       <div
         th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
       </div>
-      <div class="feature-group-container">
+      <div class="nav-group-container">
         <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
       </div>
@@ -104,7 +103,7 @@
       <div
         th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
       </div>
-      <div class="feature-group-container">
+      <div class="nav-group-container">
         <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('add-password', 'lock', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags', 'security')}">
       </div>
@@ -149,7 +148,7 @@
     <div id="groupView" class="feature-group">
       <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
       </div>
-      <div class="feature-group-container">
+      <div class="nav-group-container">
         <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('view-pdf', 'menu_book', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags', 'other')}">
       </div>
@@ -195,7 +194,7 @@
       <div
         th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
       </div>
-      <div class="feature-group-container">
+      <div class="nav-group-container">
         <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pipeline', 'family_history', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags', 'advance')}">
       </div>
@@ -233,6 +232,5 @@
         th:replace="~{fragments/navbarEntry :: navbarEntry('split-pdf-by-chapters', 'book', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
       </div>
       </div>
-    </div>
   </div>
   </th:block>
\ 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 3e627baad69..52e1beebb50 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -42,8 +42,10 @@
             </a>
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="navbarDropdown-1">
               <div class="dropdown-menu-wrapper">
+                <div class="feature-rows">
 
                     <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
+                    </div>
             </div>
             </div>
 
diff --git a/src/main/resources/templates/home-legacy.html b/src/main/resources/templates/home-legacy.html
new file mode 100644
index 00000000000..980a3873f1a
--- /dev/null
+++ b/src/main/resources/templates/home-legacy.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
+  <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
+</head>
+
+<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>
+      </div>
+      <br class="d-md-none">
+      <!-- Features -->
+      <script th:src="@{'/js/homecard-legacy.js'}"></script>
+      <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 id="filtersContainer">
+          <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
+            star
+          </span>
+          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(true)">
+            expand_all
+          </span>
+          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(false)">
+            collapse_all
+          </span>
+          <span class="material-symbols-rounded filter-button hidden" onclick="switchViewMode()">
+            dashboard
+          </span>
+        </div>
+
+        <div class="features-container">
+
+          <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
+            style="display: none;">
+            <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
+              <div class="d-flex align-items-center">
+                <div id="tool-icon" class="advance" alt="icon">
+                  <span class="material-symbols-rounded nav-icon">update</span>
+                </div>
+                <div id="tool-text">
+                  <h5 class="card-title" th:text="#{settings.update}"></h5>
+                  <p class="card-text" id="app-update"></p>
+                </div>
+              </div>
+            </a>
+          </div>
+
+          <div id="groupFavorites" class="feature-group-legacy">
+            <div th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
+            </div>
+            <div class="feature-group-container">
+            </div>
+          </div>
+
+
+          <div id="popularTools" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
+            </div>
+            <div class="feature-group-container">
+              <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='organize')}">
+              </div>
+              <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='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+              </div>
+            </div>
+          </div>
+
+
+
+
+          <div id="groupOrganize" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
+            </div>
+            <div class="feature-group-container">
+              <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='organize')}">
+              </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='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='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='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='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='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>
+          </div>
+
+          <div id="groupConvertTo" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='picture_as_pdf', toolIcon='picture_as_pdf', tags=#{imageToPdf.tags}, toolGroup='image')}">
+              </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='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='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='book', tags=#{BookToPDF.tags}, toolGroup='convert')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupConvertFrom" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='photo_library', tags=#{pdfToImage.tags}, toolGroup='image')}">
+              </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='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='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='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='book', tags=#{PDFToBook.tags}, toolGroup='convert')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupSecurity" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
+            </div>
+            <div class="feature-group-container">
+              <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='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='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='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='validate-signature', cardTitle=#{home.validateSignature.title}, cardText=#{home.validateSignature.desc}, cardLink='validate-signature', toolIcon='verified', tags=#{validateSignature.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
+              </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='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='redact', cardTitle=#{home.redact.title}, cardText=#{home.redact.desc}, cardLink='redact', toolIcon='playlist_remove', tags=#{redact.tags}, toolGroup='security')}">
+              </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
+                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>
+          </div>
+
+          <div id="groupView" class="feature-group-legacy">
+            <div th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+            </div>
+            <div class="feature-group-container">
+              <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='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='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='add_photo_alternate', tags=#{addImage.tags}, toolGroup='other')}">
+              </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='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='wallpaper', tags=#{extractImages.tags}, toolGroup='other')}">
+              </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='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='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='remove-image-pdf', cardTitle=#{home.removeImagePdf.title}, cardText=#{home.removeImagePdf.desc}, cardLink='remove-image-pdf', toolIcon='remove_selection', tags=#{removeImagePdf.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='replace-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
+              </div>
+
+            </div>
+          </div>
+          <div id="groupAdvanced" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
+            </div>
+            <div class="feature-group-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='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='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='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='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='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='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='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='split-pdf-by-chapters', cardTitle=#{home.splitPdfByChapters.title}, cardText=#{home.splitPdfByChapters.desc}, cardLink='split-pdf-by-chapters', toolIcon='book', tags=#{splitPdfByChapters.tags}, toolGroup='advance')}">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+
+
+  <!-- Survey Modal -->
+  <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel"
+    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="surveyModalLabel" th:text="#{survey.title}">Stirling-PDF Survey</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p><span th:text="#{survey.changes}">Stirling-PDF has changed since the last survey! To find out more please
+              check our blog post here: </span><a href="https://www.stirlingpdf.com/blog/stirling-pdf-future"
+              target="_blank"> Stirling PDF</a></p>
+
+          <p th:text="#{survey.changes2}">With these changes we are getting paid business support and funding</p>
+          <p th:text="#{survey.please}">Please consider taking our survey!</p>
+          <p th:text="#{survey.disabled}">Survey popup will be disabled in following updates but available at foot of
+            page)</p>
+          <a href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" target="_blank" class="btn btn-primary"
+            id="takeSurvey" th:text="#{survey.button}">Take Survey</a>
+        </div>
+        <div class="modal-footer">
+          <div class="form-check mb-3">
+            <input type="checkbox" id="dontShowAgain">
+            <label for="dontShowAgain" th:text="#{survey.dontShowAgain}">Don't show again</label>
+          </div>
+
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}">Close</button>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <!-- Analytics Modal -->
+  <div class="modal fade" id="analyticsModal" tabindex="-1" role="dialog" aria-labelledby="analyticsModalLabel"
+    aria-hidden="true" th:if="${@analyticsPrompt}">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do you want make Stirling PDF
+            better?</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p th:text="#{analytics.paragraph1}">Stirling PDF has opt in analytics to help us improve the product. We do
+            not track any personal information or file contents.</p>
+          <p th:text="#{analytics.paragraph2}">Please consider enabling analytics to help Stirling-PDF grow and to allow
+            us to understand our users better.</p>
+          <p th:text="#{analytics.settings}">You can change the settings for analytics in the config/settings.yml file
+          </p>
+        </div>
+        <div class="modal-footer justify-content-between">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="setAnalytics(false)"
+            th:text="#{analytics.disable}">Disable analytics</button>
+          <button type="button" class="btn btn-primary" th:text="#{analytics.enable}"
+            onclick="setAnalytics(true)">Enable analytics</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+  <script th:src="@{'/js/fetch-utils.js'}"></script>
+  <script th:inline="javascript">
+
+    /*<![CDATA[*/
+    const analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
+
+    document.addEventListener('DOMContentLoaded', function () {
+      if (analyticsPromptBoolean) {
+        const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
+        analyticsModal.show();
+      }
+    });
+    /*]]>*/
+    function setAnalytics(enabled) {
+      fetchWithCsrf('api/v1/settings/update-enable-analytics', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(enabled)
+      })
+        .then(response => {
+          if (response.status === 200) {
+            console.log('Analytics setting updated successfully');
+            bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
+          } else if (response.status === 208) {
+            console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
+            alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
+          } else {
+            throw new Error('Unexpected response status: ' + response.status);
+          }
+        })
+        .catch(error => {
+          console.error('Error updating analytics setting:', error);
+          alert('An error occurred while updating the analytics setting. Please try again.');
+        });
+    }
+
+
+
+
+
+    document.addEventListener("DOMContentLoaded", function () {
+      const surveyVersion = "2.0";
+      const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
+      const dontShowAgain = document.getElementById('dontShowAgain');
+      const takeSurveyButton = document.getElementById('takeSurvey');
+
+      const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
+
+      // Check if survey version changed and reset page views if it did
+      const storedVersion = localStorage.getItem('surveyVersion');
+      if (storedVersion && storedVersion !== surveyVersion) {
+        localStorage.setItem('pageViews', '0');
+      }
+
+      let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
+
+      pageViews++;
+      localStorage.setItem('pageViews', pageViews.toString());
+
+      function shouldShowSurvey() {
+        if (localStorage.getItem('dontShowSurvey') === 'true' ||
+          localStorage.getItem('surveyTaken') === 'true') {
+          return false;
+        }
+
+        // If survey version changed and we hit a threshold, show the survey
+        if (localStorage.getItem('surveyVersion') !== surveyVersion &&
+          viewThresholds.includes(pageViews)) {
+          return true;
+        }
+
+        return viewThresholds.includes(pageViews);
+      }
+
+      if (shouldShowSurvey()) {
+        modal.show();
+      }
+
+      dontShowAgain.addEventListener('change', function () {
+        if (this.checked) {
+          localStorage.setItem('dontShowSurvey', 'true');
+          localStorage.setItem('surveyVersion', surveyVersion);
+        } else {
+          localStorage.removeItem('dontShowSurvey');
+          localStorage.removeItem('surveyVersion');
+        }
+      });
+
+      takeSurveyButton.addEventListener('click', function () {
+        localStorage.setItem('surveyTaken', 'true');
+        localStorage.setItem('surveyVersion', surveyVersion);
+        modal.hide();
+      });
+
+      if (localStorage.getItem('dontShowSurvey')) {
+        modal.hide();
+      }
+    });
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index a43893d1c3e..a32ffbdf434 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -34,9 +34,24 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
             search
           </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
-        <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesMode()" style="font-size: 2rem;" >
+        <div style="display: flex; align-items: center;">
+        Set Favourites
+        <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesMode()" style="font-size: 2rem;  margin-left: 0.2rem;" >
           star
         </span>
+        <div style="margin-left: 3rem; display: flex; align-items: center;">
+        Hide Favourites
+        <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesView()" style="font-size: 2rem;  margin-left: 0.2rem;" >
+          visibility
+        </span>
+      </div>
+        <a href="home-legacy" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; margin-left: 3rem;">
+        Miss the old homepage?
+        <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
+          home
+        </span>
+</a>
+      </div>
       </div>
       </div>
         </div>
@@ -77,15 +92,15 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
               </div>
             </a>
           </div>
-
-          <div id="groupFavorites" class="feature-group">
-            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
-            </div>
-            <div class="feature-group-container">
+          <div class="feature-rows">
+            <div id="groupFavorites" class="feature-group">
+              <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
+              </div>
+              <div class="nav-group-container">
+              </div>
             </div>
-          </div>
-
           <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
+          </div>
 
         </div>
       </div>
diff --git a/src/main/resources/templates/misc/auto-rename.html b/src/main/resources/templates/misc/auto-rename.html
index 0e444201593..884b6898559 100644
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -3,7 +3,6 @@
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{auto-rename.title}, header=#{auto-rename.header})}"></th:block>
   </head>
-
   <body>
     <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
@@ -14,7 +13,11 @@
           <div class="row justify-content-center">
             <div class="col-md-6 bg-card">
               <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon advance">text_fields_alt</span>
+                <span >
+                    <svg class="tool-header-icon advance">
+                      <use xlink:href="/images/rename.svg#icon-rename"></use>
+                    </svg>
+                </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'}">

From de5921be7a0ec39de7c663dc3bd1ab5018d46a46 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Wed, 15 Jan 2025 18:18:51 +0000
Subject: [PATCH 11/20] Toggle homepage and favourites clean up

---
 src/main/resources/messages_en_GB.properties  |  6 ++
 src/main/resources/static/js/homecard.js      | 68 +++++++++----------
 src/main/resources/templates/home-legacy.html | 15 +++-
 src/main/resources/templates/home.html        | 26 +++++--
 4 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties
index 35a0211f64d..9c37d1c2e08 100644
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@@ -265,6 +265,12 @@ home.viewPdf.title=View PDF
 home.viewPdf.desc=View, annotate, add text or images
 viewPdf.tags=view,read,annotate,text,image
 
+home.setFavorites=Set Favourites
+home.hideFavorites=Hide Favourites
+home.showFavorites=Show Favourites
+home.legacyHomepage=Return to old homepage
+home.newHomePage=Try our new homepage!
+
 home.multiTool.title=PDF Multi Tool
 home.multiTool.desc=Merge, Rotate, Rearrange, Split, and Remove pages
 multiTool.tags=Multi Tool,Multi operation,UI,click drag,front end,client side,interactive,intractable,move,delete,migrate,divide
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index b57b8565f57..1dd26f90e5b 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -38,32 +38,32 @@ function filterCards() {
     } else {
       featureGroup.style.display = '';
     }
+    updateFavoritesView();
   }
 }
 
 function updateFavoritesSection() {
-  if (localStorage.getItem('favoritesView') === 'true') {
-    const favoritesContainer = document.getElementById('groupFavorites').querySelector('.nav-group-container');
-    favoritesContainer.innerHTML = '';
-    let favoritesAmount = 0;
-    const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
-
-    favouritesList.forEach((value) => {
-      var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
-      if (navbarEntry) {
-        const duplicate = navbarEntry.cloneNode(true);
-        favoritesContainer.appendChild(duplicate);
-      }
-    });
-
-    if (favoritesAmount === 0) {
-      document.getElementById('groupFavorites').style.display = 'none';
-    } else {
-      document.getElementById('groupFavorites').style.display = 'flex';
+  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.nav-group-container');
+  favoritesContainer.innerHTML = '';
+  let favoritesAmount = 0;
+  const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+
+  favouritesList.forEach((value) => {
+    var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
+    if (navbarEntry) {
+      const duplicate = navbarEntry.cloneNode(true);
+      favoritesContainer.appendChild(duplicate);
     }
-    reorderCards(favoritesContainer);
-    favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
+  });
+
+  if (favoritesAmount === 0 || !isFavoritesView) {
+    document.getElementById('groupFavorites').style.display = 'none';
+  } else {
+    document.getElementById('groupFavorites').style.display = 'flex';
   }
+  reorderCards(favoritesContainer);
+  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
 
   function toggleFavorite(element) {
     var span = element.querySelector('span.material-symbols-rounded');
@@ -95,12 +95,6 @@ function updateFavoritesSection() {
   }
 }
 
-function syncFavorites() {
-  updateFavoritesSection();
-  updateFavoritesDropdown();
-  filterCards();
-}
-
 function reorderCards(container) {
   var cards = Array.from(container.querySelectorAll('.dropdown-item'));
   cards.forEach(function (card) {
@@ -135,27 +129,31 @@ function initializeCards() {
   filterCards();
 }
 
-function showFavorites() {
+function updateFavoritesView() {
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+  const textElement = document.getElementById('toggle-favourites-text');
+  const iconElement = document.getElementById('toggle-favourites-icon');
   const favoritesGroup = document.querySelector('#groupFavorites');
-  if (localStorage.getItem('favoritesView') === 'true') {
+
+  if (isFavoritesView) {
+    textElement.textContent = /*[[#{home.hideFavorites}]]*/ 'Hide Favourites';
+    iconElement.textContent = 'visibility_off';
     favoritesGroup.style.display = 'flex';
   } else {
+    textElement.textContent = /*[[#{home.showFavorites}]]*/ 'Show Favourites';
+    iconElement.textContent = 'visibility';
     favoritesGroup.style.display = 'none';
   }
 }
 
 function toggleFavoritesView() {
-  if (localStorage.getItem('favoritesView') === 'true') {
-    localStorage.setItem('favoritesView', 'false');
-  } else {
-    localStorage.setItem('favoritesView', 'true');
-  }
-  showFavorites();
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+  localStorage.setItem('favoritesView', !isFavoritesView);
+  updateFavoritesView();
 }
 
 window.onload = function () {
   initializeCards();
-  syncFavorites(); // Ensure everything is in sync on page load
 };
 
 document.addEventListener('DOMContentLoaded', function () {
diff --git a/src/main/resources/templates/home-legacy.html b/src/main/resources/templates/home-legacy.html
index 980a3873f1a..c5c5e99eaa6 100644
--- a/src/main/resources/templates/home-legacy.html
+++ b/src/main/resources/templates/home-legacy.html
@@ -28,7 +28,15 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
           search
         </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
-
+        <div style="display: flex; align-items: center;">
+        <a href="home" onclick="setAsDefault('home')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; margin-left: 3rem;">
+          <span th:text="#{home.newHomePage}">
+          </span>
+        <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
+          home
+        </span>
+        </a>
+        </div>
         <div id="filtersContainer">
           <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
             star
@@ -501,6 +509,11 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
         modal.hide();
       }
     });
+
+    function setAsDefault(value) {
+      localStorage.setItem('defaultView', value);
+      console.log(`Default view set to: ${value}`);
+      }
   </script>
 
 
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index a32ffbdf434..31cd4839e67 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -35,22 +35,24 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
           </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
         <div style="display: flex; align-items: center;">
-        Set Favourites
+          <span th:text="#{home.setFavorites}">Hide Favourites</span>
         <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesMode()" style="font-size: 2rem;  margin-left: 0.2rem;" >
           star
         </span>
         <div style="margin-left: 3rem; display: flex; align-items: center;">
-        Hide Favourites
-        <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesView()" style="font-size: 2rem;  margin-left: 0.2rem;" >
+          <span     id="toggle-favourites-text"
+          th:text="#{home.hideFavorites}">Hide Favourites</span>
+        <span     id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesView()" style="font-size: 2rem;  margin-left: 0.2rem;" >
           visibility
         </span>
-      </div>
-        <a href="home-legacy" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; margin-left: 3rem;">
-        Miss the old homepage?
+        </div>
+        <a href="home" onclick="setAsDefault('home-legacy')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; margin-left: 3rem;">
+          <span th:text="#{home.legacyHomepage}">
+          </span>
         <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
           home
         </span>
-</a>
+        </a>
       </div>
       </div>
       </div>
@@ -260,9 +262,15 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
 // }
 
 
+    const defaultView = localStorage.getItem("defaultView") || "home"; // Default to "home"
+    if (defaultView === "home-legacy") {
+      window.location.href = "/home-legacy"; // Redirect to legacy view
+    }
+
 
 
     document.addEventListener("DOMContentLoaded", function () {
+
       const surveyVersion = "2.0";
       const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
       const dontShowAgain = document.getElementById('dontShowAgain');
@@ -329,6 +337,10 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
     updateFavoritesDropdown();
 
   });
+  function setAsDefault(value) {
+      localStorage.setItem('defaultView', value);
+      console.log(`Default view set to: ${value}`);
+      }
   </script>
 
 

From 0f87fe8f88b01b02a5c0d71eec09c960b065fb65 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Wed, 15 Jan 2025 18:37:25 +0000
Subject: [PATCH 12/20] Always show favourites when selecting favourites

---
 src/main/resources/static/js/favourites.js |  2 +-
 src/main/resources/static/js/homecard.js   | 23 +++++++++++++++++++++-
 src/main/resources/templates/home.html     | 20 -------------------
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js
index 949a2cf9977..ea1e990109c 100644
--- a/src/main/resources/static/js/favourites.js
+++ b/src/main/resources/static/js/favourites.js
@@ -116,7 +116,7 @@ function addToFavorites(entryId) {
     if (currentPath.includes('home-legacy')) {
       syncFavoritesLegacy();
     } else {
-      syncFavorites();
+      initializeCards();
     }
   }
 }
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 1dd26f90e5b..33cefbf9dd3 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -146,12 +146,33 @@ function updateFavoritesView() {
   }
 }
 
+function toggleFavoritesMode() {
+  favoritesMode = !document.querySelector('.toggle-favourites').classList.contains('active');
+  document.querySelector('.toggle-favourites').classList.toggle('active', favoritesMode);
+  document.querySelectorAll('.favorite-icon').forEach((icon) => {
+    icon.style.display = favoritesMode ? 'inline-block' : 'none';
+  });
+  document.querySelectorAll('.dropdown-item').forEach((link) => {
+    if (favoritesMode) {
+      link.dataset.originalHref = link.getAttribute('href'); // Save original href
+      link.setAttribute('href', '#');
+      link.classList.add('no-hover');
+    } else {
+      link.setAttribute('href', link.dataset.originalHref);
+      link.classList.remove('no-hover');
+    }
+  });
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+  if (favoritesMode && !isFavoritesView) {
+    toggleFavoritesView();
+  }
+}
+
 function toggleFavoritesView() {
   const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
   localStorage.setItem('favoritesView', !isFavoritesView);
   updateFavoritesView();
 }
-
 window.onload = function () {
   initializeCards();
 };
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 31cd4839e67..9c79e76831b 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -225,26 +225,6 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
         });
     }
 
-    let favoritesMode = false;
-function toggleFavoritesMode() {
-  favoritesMode = !favoritesMode;
-  document.querySelector('.toggle-favourites').classList.toggle('active', favoritesMode);
-  document.querySelectorAll('.favorite-icon').forEach(icon => {
-    icon.style.display = favoritesMode ? 'inline-block' : 'none';
-  });
-  document.querySelectorAll('.dropdown-item').forEach(link => {
-    if (favoritesMode) {
-      link.dataset.originalHref = link.getAttribute('href'); // Save original href
-      link.setAttribute('href', '#');
-
-      link.classList.add('no-hover');
-    } else {
-      link.setAttribute('href', link.dataset.originalHref);
-      link.classList.remove('no-hover');
-    }
-  });
-
-}
 
 updateFavoriteIcons();
 

From 9e56914adea54e54e011c44c0e4c36a5caa93d6e Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Wed, 15 Jan 2025 18:55:23 +0000
Subject: [PATCH 13/20] Css tweak

---
 src/main/resources/templates/home-legacy.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/home-legacy.html b/src/main/resources/templates/home-legacy.html
index c5c5e99eaa6..c30701e29b7 100644
--- a/src/main/resources/templates/home-legacy.html
+++ b/src/main/resources/templates/home-legacy.html
@@ -29,7 +29,7 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
         </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
         <div style="display: flex; align-items: center;">
-        <a href="home" onclick="setAsDefault('home')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; margin-left: 3rem;">
+        <a href="home" onclick="setAsDefault('home')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
           <span th:text="#{home.newHomePage}">
           </span>
         <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >

From 35408a15365a17c5db5308758a950b7146ca4ddb Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Wed, 15 Jan 2025 19:27:08 +0000
Subject: [PATCH 14/20] Mapping

---
 .../software/SPDF/controller/web/HomeWebController.java     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java b/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java
index ddc99a82b9a..402c172863f 100644
--- a/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java
+++ b/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java
@@ -74,6 +74,12 @@ public String root(Model model) {
         return "redirect:/";
     }
 
+    @GetMapping("/home-legacy")
+    public String homeLegacy(Model model) {
+        model.addAttribute("currentPage", "home-legacy");
+        return "home-legacy";
+    }
+
     @GetMapping(value = "/robots.txt", produces = MediaType.TEXT_PLAIN_VALUE)
     @ResponseBody
     @Hidden

From bfd5d71947ba51e5edbbd0d813a020bc666c4726 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 17 Jan 2025 15:53:11 +0000
Subject: [PATCH 15/20] Order homepage + UI tweaks

---
 src/main/resources/messages_en_GB.properties  |   5 +-
 src/main/resources/static/css/home.css        |   4 +
 .../resources/static/files/popularity.txt     |  46 +++++++
 src/main/resources/static/js/favourites.js    |  18 ++-
 src/main/resources/static/js/homecard.js      | 121 +++++++++++++-----
 .../resources/templates/fragments/navbar.html |   7 +
 .../templates/fragments/navbarEntry.html      |   4 +-
 src/main/resources/templates/home.html        |  72 +++++++----
 8 files changed, 209 insertions(+), 68 deletions(-)
 create mode 100644 src/main/resources/static/files/popularity.txt

diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties
index 9c37d1c2e08..97507b5fd4e 100644
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@@ -138,6 +138,7 @@ analytics.settings=You can change the settings for analytics in the config/setti
 #  NAVBAR   #
 #############
 navbar.favorite=Favorites
+navbar.recent=New and recently updated
 navbar.darkmode=Dark Mode
 navbar.language=Languages
 navbar.settings=Settings
@@ -268,8 +269,10 @@ viewPdf.tags=view,read,annotate,text,image
 home.setFavorites=Set Favourites
 home.hideFavorites=Hide Favourites
 home.showFavorites=Show Favourites
-home.legacyHomepage=Return to old homepage
+home.legacyHomepage=Old homepage
 home.newHomePage=Try our new homepage!
+home.alphabetical=Alphabetical
+home.globalPopularity=Global Popularity
 
 home.multiTool.title=PDF Multi Tool
 home.multiTool.desc=Merge, Rotate, Rearrange, Split, and Remove pages
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 5fc2f301f3e..6e22f3b3a65 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -89,3 +89,7 @@
   -webkit-animation: 2s infinite Pulse steps(20);
   animation: 2s infinite Pulse steps(20);
 }
+
+.newfeature{
+  min-width:10rem;
+}
diff --git a/src/main/resources/static/files/popularity.txt b/src/main/resources/static/files/popularity.txt
new file mode 100644
index 00000000000..175ebb8aded
--- /dev/null
+++ b/src/main/resources/static/files/popularity.txt
@@ -0,0 +1,46 @@
+{
+  "/login": 1,
+  "/multi-tool": 2,
+  "/merge-pdfs": 3,
+  "/pdf-to-word": 4,
+  "/compress-pdf": 5,
+  "/pdf-to-img": 6,
+  "/pipeline": 7,
+  "/split-pdfs": 8,
+  "/img-to-pdf": 9,
+  "/file-to-pdf": 10,
+  "/ocr-pdf": 11,
+  "/sign": 12,
+  "/remove-password": 13,
+  "/adjust-contrast": 14,
+  "/pdf-to-text": 15,
+  "/extract-page": 16,
+  "/add-watermark": 17,
+  "/remove-pages": 18,
+  "/crop": 19,
+  "/url-to-pdf": 20,
+  "/pdf-to-presentation": 21,
+  "/pdf-to-csv": 22,
+  "/html-to-pdf": 23,
+  "/cert-sign": 24,
+  "/rotate-pdf": 25,
+  "/console/": 26,
+  "/geoserver": 27,
+  "/pdf-to-xml": 28,
+  "/markdown-to-pdf": 29,
+  "/pdf-organizer": 30,
+  "/add-image": 31,
+  "/stamp": 32,
+  "/auto-redact": 33,
+  "/scale-pages": 34,
+  "/extract-images": 35,
+  "/change-metadata": 36,
+  "/pdf-to-html": 37,
+  "/get-info-on-pdf": 38,
+  "/replace-and-invert-color-pdf": 39,
+  "/pdf-to-pdfa": 40,
+  "/change-permissions": 41,
+  "/compare": 42,
+  "/add-password": 43,
+  "/multi-page-layout": 44
+}
diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js
index ea1e990109c..fd20d1d67a5 100644
--- a/src/main/resources/static/js/favourites.js
+++ b/src/main/resources/static/js/favourites.js
@@ -86,12 +86,24 @@ function updateFavoritesDropdown() {
 
 function updateFavoriteIcons() {
   const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+
+  // Select all favorite icons
   document.querySelectorAll('.favorite-icon').forEach((icon) => {
     const endpoint = icon.getAttribute('data-endpoint');
-    if (favoritesList.includes(endpoint)) {
-      icon.style.color = 'gold';
+    const parent = icon.closest('.dropdown-item');
+
+    // Determine if the icon belongs to groupRecent or groupFavorites
+    const isInGroupRecent = parent.closest('#groupRecent') !== null;
+    const isInGroupFavorites = parent.closest('#groupFavorites') !== null;
+
+    if (isInGroupRecent) {
+      icon.style.display = 'none';
+    } else if (isInGroupFavorites) {
+      icon.textContent = 'close_small';
+      icon.style.color = 'palevioletred';
     } else {
-      icon.style.color = '';
+      icon.textContent = favoritesList.includes(endpoint) ? 'close_small' : 'add';
+      icon.style.color = favoritesList.includes(endpoint) ? 'palevioletred' : '#9ed18c';
     }
   });
 }
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 33cefbf9dd3..64ee06c804b 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -64,35 +64,6 @@ function updateFavoritesSection() {
   }
   reorderCards(favoritesContainer);
   favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
-
-  function toggleFavorite(element) {
-    var span = element.querySelector('span.material-symbols-rounded');
-    var card = element.closest('.dropdown-item');
-    var cardId = card.id;
-
-    // Prevent the event from bubbling up to parent elements
-    event.stopPropagation();
-
-    if (span.classList.contains('no-fill')) {
-      span.classList.remove('no-fill');
-      span.classList.add('fill');
-      card.classList.add('favorite');
-      localStorage.setItem(cardId, 'favorite');
-    } else {
-      span.classList.remove('fill');
-      span.classList.add('no-fill');
-      card.classList.remove('favorite');
-      localStorage.removeItem(cardId);
-    }
-
-    // Use setTimeout to ensure this runs after the current call stack is clear
-    setTimeout(() => {
-      reorderCards(card.parentNode);
-      updateFavoritesSection();
-      updateFavoritesDropdown();
-      filterCards();
-    }, 0);
-  }
 }
 
 function reorderCards(container) {
@@ -147,21 +118,38 @@ function updateFavoritesView() {
 }
 
 function toggleFavoritesMode() {
-  favoritesMode = !document.querySelector('.toggle-favourites').classList.contains('active');
+  const favoritesMode = !document.querySelector('.toggle-favourites').classList.contains('active');
   document.querySelector('.toggle-favourites').classList.toggle('active', favoritesMode);
+
   document.querySelectorAll('.favorite-icon').forEach((icon) => {
-    icon.style.display = favoritesMode ? 'inline-block' : 'none';
+    const endpoint = icon.getAttribute('data-endpoint');
+    const parent = icon.closest('.dropdown-item');
+    const isInGroupRecent = parent.closest('#groupRecent') !== null;
+    const isInGroupFavorites = parent.closest('#groupFavorites') !== null;
+
+    if (isInGroupRecent) {
+      icon.style.display = 'none';
+    } else if (isInGroupFavorites) {
+      icon.style.display = favoritesMode ? 'inline-block' : 'none';
+      icon.textContent = 'close_small';
+    } else {
+      icon.style.display = favoritesMode ? 'inline-block' : 'none';
+      const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+      icon.textContent = favoritesList.includes(endpoint) ? 'close_small' : 'add';
+    }
   });
+
   document.querySelectorAll('.dropdown-item').forEach((link) => {
     if (favoritesMode) {
-      link.dataset.originalHref = link.getAttribute('href'); // Save original href
+      link.dataset.originalHref = link.getAttribute('href');
       link.setAttribute('href', '#');
       link.classList.add('no-hover');
     } else {
-      link.setAttribute('href', link.dataset.originalHref);
+      link.setAttribute('href', link.dataset.originalHref || '#');
       link.classList.remove('no-hover');
     }
   });
+
   const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
   if (favoritesMode && !isFavoritesView) {
     toggleFavoritesView();
@@ -177,7 +165,72 @@ window.onload = function () {
   initializeCards();
 };
 
-document.addEventListener('DOMContentLoaded', function () {
+function sortNavElements(criteria) {
+  document.querySelectorAll('.nav-group-container').forEach((container) => {
+    const items = Array.from(container.children);
+
+    items.sort((a, b) => {
+      if (criteria === 'alphabetical') {
+        const titleA = a.querySelector('.icon-text')?.textContent.trim().toLowerCase() || '';
+        const titleB = b.querySelector('.icon-text')?.textContent.trim().toLowerCase() || '';
+        return titleA.localeCompare(titleB);
+      } else if (criteria === 'global') {
+        const popularityA = parseInt(a.dataset.popularity, 10) || 1000;
+        const popularityB = parseInt(b.dataset.popularity, 10) || 1000;
+        return popularityA - popularityB;
+      }
+      return 0;
+    });
+    container.innerHTML = '';
+    items.forEach((item) => container.appendChild(item));
+  });
+}
+
+async function fetchPopularityData(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.text();
+}
+
+function applyPopularityData(popularityData) {
+  document.querySelectorAll('.dropdown-item').forEach((item) => {
+    const endpoint = item.getAttribute('data-bs-link');
+    const popularity = popularityData['/' + endpoint];
+    if (endpoint && popularity !== undefined) {
+      item.setAttribute('data-popularity', popularity);
+    }
+  });
+  const currentSort = localStorage.getItem('homepageSort') || 'alphabetical';
+  const sortDropdown = document.getElementById('sort-options');
+  if (sortDropdown) {
+    sortDropdown.value = currentSort;
+    ``;
+  }
+  sortNavElements(currentSort);
+}
+document.addEventListener('DOMContentLoaded', async function () {
+  const sortDropdown = document.getElementById('sort-options');
+  if (sortDropdown) {
+    sortDropdown.addEventListener('change', (event) => {
+      const selectedOption = event.target.value;
+      localStorage.setItem('homepageSort', selectedOption);
+
+      sortNavElements(selectedOption);
+    });
+  }
+  try {
+    const response = await fetch('files/popularity.txt');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const popularityData = await response.json();
+    applyPopularityData(popularityData);
+  } catch (error) {
+    console.error('Error loading popularity data:', error);
+  }
+
   const materialIcons = new FontFaceObserver('Material Symbols Rounded');
 
   materialIcons
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 52e1beebb50..45f3c4787e1 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -262,8 +262,15 @@ <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5
   <script>
       window.onload = function () {
     updateFavoritesDropdown();
+
       }
       document.addEventListener('DOMContentLoaded', function () {
+        const navbarLink = document.querySelector(".navbar-brand");
+    if (localStorage.getItem("defaultView") === "home-legacy") {
+      navbarLink.setAttribute("href", "/home-legacy");
+    }else{
+      navbarLink.setAttribute("href", "/");
+    }
   const featureGroups = document.querySelectorAll('.feature-group');
   featureGroups.forEach(group => {
     const observer = new MutationObserver(() => {
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index c4b098fd50b..de8fae13c1b 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -4,12 +4,12 @@
     th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
     th:data-bs-tags="#{${tagKey}}" th:data-bs-title='#{${titleKey}}'>
     <span class="nav-tooltip" th:text="#{${descKey}}"></span>
-    <div style="height:2.5rem;align-items: center;display: flex" class="icon" alt="icon" th:class="@{${toolGroup}}">
+    <div style="height:2.5rem;align-items: center;display: flex;" 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>
     <span class="material-symbols-rounded favorite-icon" style="display: none;" th:data-endpoint="@{${endpoint}}" th:onclick="'addToFavorites(\'' + @{${endpoint}} + '\')'">
-      star
+      add
     </span>
   </a>
 
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 9c79e76831b..16601376c6b 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -10,15 +10,36 @@
   <div id="page-container">
     <div id="content-wrap">
       <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-      <!-- Jumbotron -->
-      <div class="rounded d-none d-md-block" id="jumbotron">
+
         <div class="container">
-          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
+        <div style="display:flex;">
+ <!-- Jumbotron -->
+ <div class="rounded d-none d-md-block" id="jumbotron">
+         <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>
+        <div id="groupRecent" >
+          <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
+          </div>
+          <div style="display: flex; flex-direction: row;">
+            <div class="newfeature"
+  th:include="~{fragments/navbarEntry :: navbarEntry('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+</div>
+<div class="newfeature"
+th:include="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+</div>
+<div class="newfeature"
+th:include="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+</div>
+          </div>
+        </div>
+      </div>
+
       </div>
+
+
       <br class="d-md-none">
       <!-- Features -->
       <script th:src="@{'/js/homecard.js'}"></script>
@@ -34,50 +55,45 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
             search
           </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
-        <div style="display: flex; align-items: center;">
+
+        <div style="display: flex; justify-content: center;">
+        <div  style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:3rem">
+          <div  style="display: flex; align-items: center; cursor: pointer;" onclick="toggleFavoritesMode()" >
           <span th:text="#{home.setFavorites}">Hide Favourites</span>
-        <span class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesMode()" style="font-size: 2rem;  margin-left: 0.2rem;" >
+        <span class="material-symbols-rounded toggle-favourites" style="font-size: 2rem;  margin-left: 0.2rem;" >
           star
         </span>
-        <div style="margin-left: 3rem; display: flex; align-items: center;">
+        </div>
+        <div onclick="toggleFavoritesView()" style="display: flex; align-items: center; cursor: pointer;">
           <span     id="toggle-favourites-text"
           th:text="#{home.hideFavorites}">Hide Favourites</span>
-        <span     id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites" onclick="toggleFavoritesView()" style="font-size: 2rem;  margin-left: 0.2rem;" >
+        <span     id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem;  margin-left: 0.2rem;" >
           visibility
         </span>
         </div>
-        <a href="home" onclick="setAsDefault('home-legacy')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; margin-left: 3rem;">
+        <a href="home" onclick="setAsDefault('home-legacy')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
           <span th:text="#{home.legacyHomepage}">
           </span>
         <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
           home
         </span>
         </a>
+        <div style="height:2.5rem;  display: flex; align-items: center; cursor: pointer;">
+          <label for="sort-options">Sort by:</label>
+          <select id="sort-options" style="border:none">
+            <option value="alphabetical"  th:text="#{home.alphabetical}"> </option>
+            <!-- <option value="personal">Your most used</option> -->
+            <option value="global" th:text="#{home.globalPopularity}"></option>
+            <!-- <option value="server">Popularity in organisation</option> -->
+          </select>
+        </div>
+      </div>
+
       </div>
       </div>
       </div>
         </div>
         <div>
-        <!-- <div id="popularTools" >
-            <div
-                    th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
-            </div>
-            <div style="display: flex; flex-direction: row;">
-              <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('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-            </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('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
-            </div>
-
-            </div>
-          </div> -->
         </div>
         <div class="features-container">
           <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"

From a62db9a64bcfac9ca0d8dfc65b8de5176dd20cad Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Fri, 17 Jan 2025 18:46:49 +0000
Subject: [PATCH 16/20] Theming updates and UI tweaks/fixes

---
 src/main/resources/static/css/navbar.css      |  8 +++++++-
 .../static/css/theme/componentes.css          | 12 +++++++++++
 .../resources/static/css/theme/theme.dark.css |  4 +++-
 .../static/css/theme/theme.light.css          |  4 +++-
 src/main/resources/static/js/favourites.js    |  4 ++--
 .../resources/static/js/homecard-legacy.js    |  3 +--
 src/main/resources/static/js/homecard.js      | 17 +++++++++++-----
 .../templates/fragments/navElements.html      | 20 +++++++++----------
 .../resources/templates/fragments/navbar.html | 10 ----------
 src/main/resources/templates/home.html        |  4 ++--
 10 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index c600d54759e..21eb652193e 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -231,6 +231,13 @@ span.icon-text::after {
   background-color: var(--md-nav-section-color-convert);
 }
 
+.dropdown-item:focus.convertto,
+.dropdown-item:hover.convertto,
+.dropdown-item.active.convertto {
+  color: var(--md-nav-on-section-color-convertto);
+  background-color: var(--md-nav-section-color-convertto);
+}
+
 .dropdown-item:focus.image,
 .dropdown-item:hover.image,
 .dropdown-item.active.image {
@@ -388,7 +395,6 @@ span.icon-text::after {
       max-width: 18rem;
       flex: 1 1 min(14rem, 100%);
       box-sizing: border-box;
-      height:auto;
 }
 
 .feature-rows{
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index f49ce6489a4..22e86891267 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -128,6 +128,13 @@ td {
   background-color: var(--md-nav-section-color-convert);
 }
 
+.convertto .nav-icon,
+.convertto.tool-header-icon {
+  color: var(--md-nav-on-section-color-convertto);
+  background-color: var(--md-nav-section-color-convertto);
+}
+
+
 .security .nav-icon,
 .security.tool-header-icon {
   color: var(--md-nav-on-section-color-security);
@@ -213,6 +220,11 @@ td {
   background-color: var(--md-nav-section-color-convert);
 }
 
+.feature-card .convertto .nav-icon {
+  color: var(--md-nav-on-section-color-convertto);
+  background-color: var(--md-nav-section-color-convertto);
+}
+
 .feature-card .security .nav-icon {
   color: var(--md-nav-on-section-color-security);
   background-color: var(--md-nav-section-color-security);
diff --git a/src/main/resources/static/css/theme/theme.dark.css b/src/main/resources/static/css/theme/theme.dark.css
index ad6657881e0..405fd19bb1a 100644
--- a/src/main/resources/static/css/theme/theme.dark.css
+++ b/src/main/resources/static/css/theme/theme.dark.css
@@ -58,6 +58,8 @@
     --md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-convertto: rgba(9, 230, 182, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-convertto: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
@@ -70,4 +72,4 @@
     --md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/static/css/theme/theme.light.css b/src/main/resources/static/css/theme/theme.light.css
index 74101fe284c..0d372309212 100644
--- a/src/main/resources/static/css/theme/theme.light.css
+++ b/src/main/resources/static/css/theme/theme.light.css
@@ -58,6 +58,8 @@
     --md-nav-on-section-color-organize: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convert: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-convertto: rgba(9, 230, 182, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-convertto: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-security: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
@@ -70,4 +72,4 @@
     --md-nav-on-section-color-word: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-ppt: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js
index fd20d1d67a5..bd63b245873 100644
--- a/src/main/resources/static/js/favourites.js
+++ b/src/main/resources/static/js/favourites.js
@@ -93,8 +93,8 @@ function updateFavoriteIcons() {
     const parent = icon.closest('.dropdown-item');
 
     // Determine if the icon belongs to groupRecent or groupFavorites
-    const isInGroupRecent = parent.closest('#groupRecent') !== null;
-    const isInGroupFavorites = parent.closest('#groupFavorites') !== null;
+    const isInGroupRecent = parent?.closest('#groupRecent') !== null;
+    const isInGroupFavorites = parent?.closest('#groupFavorites') !== null;
 
     if (isInGroupRecent) {
       icon.style.display = 'none';
diff --git a/src/main/resources/static/js/homecard-legacy.js b/src/main/resources/static/js/homecard-legacy.js
index 48d0c526fe5..02789efd654 100644
--- a/src/main/resources/static/js/homecard-legacy.js
+++ b/src/main/resources/static/js/homecard-legacy.js
@@ -79,7 +79,6 @@ function updateFavoritesSectionLegacy() {
     document.getElementById('groupFavorites').style.display = 'flex';
   }
   reorderCards(favoritesContainer);
-  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
 }
 
 function syncFavoritesLegacy() {
@@ -231,7 +230,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const parent = header.parentNode;
     const container = header.parentNode.querySelector('.feature-group-container');
     if (parent.id !== 'groupFavorites') {
-      container.style.maxHeight = container.scrollHeight + 'px';
+      // container.style.maxHeight = container.scrollHeight + 'px';
     }
     header.onclick = () => {
       expandCollapseToggle(parent);
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 64ee06c804b..63a8b898344 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -55,6 +55,7 @@ function updateFavoritesSection() {
       const duplicate = navbarEntry.cloneNode(true);
       favoritesContainer.appendChild(duplicate);
     }
+    favoritesAmount++;
   });
 
   if (favoritesAmount === 0 || !isFavoritesView) {
@@ -63,7 +64,7 @@ function updateFavoritesSection() {
     document.getElementById('groupFavorites').style.display = 'flex';
   }
   reorderCards(favoritesContainer);
-  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
+  //favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
 }
 
 function reorderCards(container) {
@@ -105,15 +106,21 @@ function updateFavoritesView() {
   const textElement = document.getElementById('toggle-favourites-text');
   const iconElement = document.getElementById('toggle-favourites-icon');
   const favoritesGroup = document.querySelector('#groupFavorites');
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+  document.getElementById('favouritesVisibility').style.display = 'flex';
 
-  if (isFavoritesView) {
+  if (isFavoritesView && favoritesList.length > 0) {
     textElement.textContent = /*[[#{home.hideFavorites}]]*/ 'Hide Favourites';
     iconElement.textContent = 'visibility_off';
     favoritesGroup.style.display = 'flex';
   } else {
-    textElement.textContent = /*[[#{home.showFavorites}]]*/ 'Show Favourites';
-    iconElement.textContent = 'visibility';
-    favoritesGroup.style.display = 'none';
+    if (favoritesList.length > 0) {
+      textElement.textContent = /*[[#{home.showFavorites}]]*/ 'Show Favourites';
+      iconElement.textContent = 'visibility';
+      favoritesGroup.style.display = 'none';
+    } else {
+      document.getElementById('favouritesVisibility').style.display = 'none';
+    }
   }
 }
 
diff --git a/src/main/resources/templates/fragments/navElements.html b/src/main/resources/templates/fragments/navElements.html
index eabd718be00..9f3d299695b 100644
--- a/src/main/resources/templates/fragments/navElements.html
+++ b/src/main/resources/templates/fragments/navElements.html
@@ -46,22 +46,22 @@
       </div>
       <div class="nav-group-container">
         <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'convertto')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convert')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convertto')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convert')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convertto')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convert')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convertto')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convert')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convertto')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convertto')}">
       </div>
       </div>
     </div>
@@ -71,16 +71,16 @@
       </div>
       <div class="nav-group-container">
         <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.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-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'word')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'convert')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'ppt')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'convert')}">
       </div>
       <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-text', 'text_fields', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags', 'convert')}">
@@ -114,7 +114,7 @@
         th:replace="~{fragments/navbarEntry :: navbarEntry('change-permissions', 'encrypted', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags', 'security')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
+        th:replace="~{fragments/navbarEntry :: navbarEntry('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'security')}">
       </div>
       <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('cert-sign', 'workspace_premium', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags', 'security')}">
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 45f3c4787e1..de1afeb2bdc 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -271,16 +271,6 @@ <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5
     }else{
       navbarLink.setAttribute("href", "/");
     }
-  const featureGroups = document.querySelectorAll('.feature-group');
-  featureGroups.forEach(group => {
-    const observer = new MutationObserver(() => {
-      group.style.height = 'auto'; // Reset height to auto
-      const height = group.scrollHeight; // Get the updated content height
-      group.style.height = `${height}px`; // Apply the new height
-    });
-
-    observer.observe(group, { childList: true, subtree: true });
-  });
 });
   </script>
 </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 16601376c6b..358d44abdcd 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -12,7 +12,7 @@
       <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
 
         <div class="container">
-        <div style="display:flex;">
+        <div style="display:flex; gap:3rem">
  <!-- Jumbotron -->
  <div class="rounded d-none d-md-block" id="jumbotron">
          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
@@ -64,7 +64,7 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
           star
         </span>
         </div>
-        <div onclick="toggleFavoritesView()" style="display: flex; align-items: center; cursor: pointer;">
+        <div onclick="toggleFavoritesView()" id="favouritesVisibility" style="display: flex; align-items: center; cursor: pointer;">
           <span     id="toggle-favourites-text"
           th:text="#{home.hideFavorites}">Hide Favourites</span>
         <span     id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem;  margin-left: 0.2rem;" >

From 0e4ec43098e598c6b33792bcaa3c3b11db78a1b5 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Mon, 20 Jan 2025 22:29:08 +0000
Subject: [PATCH 17/20] UI tweaks and js cleanup

---
 src/main/resources/static/css/home.css        |  10 +-
 src/main/resources/static/css/navbar.css      |   4 +-
 src/main/resources/static/js/navbar.js        |  67 +++----
 src/main/resources/static/js/pages/home.js    | 183 ++++++++++++++++++
 .../templates/fragments/navElements.html      |  60 +++++-
 .../resources/templates/fragments/navbar.html |   2 +
 src/main/resources/templates/home.html        | 155 ++-------------
 7 files changed, 298 insertions(+), 183 deletions(-)
 create mode 100644 src/main/resources/static/js/pages/home.js

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 6e22f3b3a65..3a0bffc0a63 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -91,5 +91,13 @@
 }
 
 .newfeature{
-  min-width:10rem;
+  min-width:12rem;
+}
+.recent-features{
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  overflow: hidden;
+  justify-content: center;
+
 }
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index 21eb652193e..401c1c112e6 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -405,7 +405,9 @@ span.icon-text::after {
     padding: 1rem;
     box-sizing: border-box;
 }
-
+.feature-rows.single-column {
+  justify-content: center; /* Center-align a single column */
+}
 .feature-group-header {
   display: flex;
   justify-content: flex-start;
diff --git a/src/main/resources/static/js/navbar.js b/src/main/resources/static/js/navbar.js
index 97272a5b010..efca13e0281 100644
--- a/src/main/resources/static/js/navbar.js
+++ b/src/main/resources/static/js/navbar.js
@@ -1,46 +1,43 @@
 function toolsManager() {
-  document.addEventListener('DOMContentLoaded', function () {
-    const stackedContainer = document.getElementById('stacked');
+  const convertToPDF = document.querySelector('#groupConvertTo');
+  const convertFromPDF = document.querySelector('#groupConvertFrom');
 
-    if (stackedContainer) {
-      const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
-      const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');
+  if (convertToPDF && convertFromPDF) {
+    const itemsTo = Array.from(convertToPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
+    const itemsFrom = Array.from(convertFromPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
 
-      if (convertToPDF && convertFromPDF) {
-        const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
-        const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item');
+    const totalItems = itemsTo.length + itemsFrom.length;
 
-        const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider'));
-        const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider'));
-
-        const totalItems = itemsTo.length + itemsFrom.length;
-
-        if (totalItems > 12) {
-          stackedContainer.style.flexDirection = 'row';
-          stackedContainer.classList.remove('col-lg-2');
-          stackedContainer.classList.add('col-lg-4');
-          convertToPDF.style.flex = '1 1 50%';
-          convertFromPDF.style.flex = '1 1 50%';
-        }
-      }
+    if (totalItems > 12) {
+      document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'none'));
+      document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'flex'));
+    } else {
+      document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'none'));
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'none'));
     }
+  }
 
-    document.querySelectorAll('.navbar-item').forEach((element) => {
-      if (!element.closest('#stacked')) {
-        const dropdownItems = element.querySelectorAll('.dropdown-item');
-        const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
+  document.querySelectorAll('.navbar-item').forEach((element) => {
+    if (!element.closest('#stacked')) {
+      const dropdownItems = element.querySelectorAll('.dropdown-item');
+      const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
 
-        if (items.length === 0) {
-          if (
-            element.previousElementSibling &&
-            element.previousElementSibling.classList.contains('navbar-item') &&
-            element.previousElementSibling.classList.contains('nav-item-separator')
-          ) {
-            element.previousElementSibling.remove();
-          }
-          element.remove();
+      if (items.length === 0) {
+        if (
+          element.previousElementSibling &&
+          element.previousElementSibling.classList.contains('navbar-item') &&
+          element.previousElementSibling.classList.contains('nav-item-separator')
+        ) {
+          element.previousElementSibling.remove();
         }
+        element.remove();
       }
-    });
+    }
   });
 }
diff --git a/src/main/resources/static/js/pages/home.js b/src/main/resources/static/js/pages/home.js
new file mode 100644
index 00000000000..0e7b3b54aab
--- /dev/null
+++ b/src/main/resources/static/js/pages/home.js
@@ -0,0 +1,183 @@
+/*<![CDATA[*/
+const analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
+
+document.addEventListener('DOMContentLoaded', function () {
+  if (analyticsPromptBoolean) {
+    const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
+    analyticsModal.show();
+  }
+});
+/*]]>*/
+function setAnalytics(enabled) {
+  fetchWithCsrf('api/v1/settings/update-enable-analytics', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(enabled),
+  })
+    .then((response) => {
+      if (response.status === 200) {
+        console.log('Analytics setting updated successfully');
+        bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
+      } else if (response.status === 208) {
+        console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
+        alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
+      } else {
+        throw new Error('Unexpected response status: ' + response.status);
+      }
+    })
+    .catch((error) => {
+      console.error('Error updating analytics setting:', error);
+      alert('An error occurred while updating the analytics setting. Please try again.');
+    });
+}
+
+updateFavoriteIcons();
+
+const defaultView = localStorage.getItem('defaultView') || 'home'; // Default to "home"
+if (defaultView === 'home-legacy') {
+  window.location.href = '/home-legacy'; // Redirect to legacy view
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const surveyVersion = '2.0';
+  const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
+  const dontShowAgain = document.getElementById('dontShowAgain');
+  const takeSurveyButton = document.getElementById('takeSurvey');
+
+  const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
+
+  // Check if survey version changed and reset page views if it did
+  const storedVersion = localStorage.getItem('surveyVersion');
+  if (storedVersion && storedVersion !== surveyVersion) {
+    localStorage.setItem('pageViews', '0');
+  }
+
+  let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
+
+  pageViews++;
+  localStorage.setItem('pageViews', pageViews.toString());
+
+  function shouldShowSurvey() {
+    if (localStorage.getItem('dontShowSurvey') === 'true' || localStorage.getItem('surveyTaken') === 'true') {
+      return false;
+    }
+
+    // If survey version changed and we hit a threshold, show the survey
+    if (localStorage.getItem('surveyVersion') !== surveyVersion && viewThresholds.includes(pageViews)) {
+      return true;
+    }
+
+    return viewThresholds.includes(pageViews);
+  }
+
+  if (shouldShowSurvey()) {
+    modal.show();
+  }
+
+  dontShowAgain.addEventListener('change', function () {
+    if (this.checked) {
+      localStorage.setItem('dontShowSurvey', 'true');
+      localStorage.setItem('surveyVersion', surveyVersion);
+    } else {
+      localStorage.removeItem('dontShowSurvey');
+      localStorage.removeItem('surveyVersion');
+    }
+  });
+
+  takeSurveyButton.addEventListener('click', function () {
+    localStorage.setItem('surveyTaken', 'true');
+    localStorage.setItem('surveyVersion', surveyVersion);
+    modal.hide();
+  });
+
+  if (localStorage.getItem('dontShowSurvey')) {
+    modal.hide();
+  }
+
+  if (window.location.pathname === '/') {
+    const navItem = document.getElementById('navItemToHide');
+    if (navItem) {
+      navItem.style.display = 'none';
+    }
+  }
+  updateFavoritesDropdown();
+});
+function setAsDefault(value) {
+  localStorage.setItem('defaultView', value);
+  console.log(`Default view set to: ${value}`);
+}
+
+function adjustVisibleElements() {
+  const container = document.querySelector('.recent-features');
+  const subElements = Array.from(container.children);
+
+  let totalWidth = 0;
+  const containerWidth = container.offsetWidth;
+
+  subElements.forEach((element) => {
+    totalWidth += 12 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+    if (totalWidth > containerWidth) {
+      element.style.display = 'none';
+    } else {
+      element.style.display = 'block';
+    }
+  });
+}
+
+function adjustContainerAlignment() {
+  console.log('Adjusting container alignment');
+
+  document.querySelectorAll('.features-container').forEach((parent) => {
+    parent.querySelectorAll('.feature-rows').forEach((container) => {
+      const childElements = Array.from(container.children);
+
+      const containerWidth = parent.offsetWidth;
+      console.log(containerWidth < 30 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+      if (containerWidth < 30 * parseFloat(getComputedStyle(document.documentElement).fontSize)) {
+        container.classList.add('single-column');
+      } else {
+        container.classList.remove('single-column');
+      }
+    });
+  });
+}
+function toolsManager() {
+  const convertToPDF = document.querySelector('#groupConvertTo');
+  const convertFromPDF = document.querySelector('#groupConvertFrom');
+
+  if (convertToPDF && convertFromPDF) {
+    const itemsTo = Array.from(convertToPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
+    const itemsFrom = Array.from(convertFromPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
+
+    const totalItems = itemsTo.length + itemsFrom.length;
+
+    if (totalItems > 12) {
+      document.querySelectorAll('#convertGroup').forEach((element) => element.remove());
+      document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'flex'));
+    } else {
+      document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertTo').forEach((element) => element.remove());
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => element.remove());
+    }
+  }
+}
+document.addEventListener('DOMContentLoaded', function () {
+  toolsManager();
+});
+
+window.addEventListener('load', () => {
+  adjustContainerAlignment();
+  adjustVisibleElements();
+});
+window.addEventListener('resize', () => {
+  adjustContainerAlignment();
+  adjustVisibleElements();
+});
diff --git a/src/main/resources/templates/fragments/navElements.html b/src/main/resources/templates/fragments/navElements.html
index 9f3d299695b..a9dc84fc287 100644
--- a/src/main/resources/templates/fragments/navElements.html
+++ b/src/main/resources/templates/fragments/navElements.html
@@ -98,7 +98,64 @@
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
       </div>
     </div>
-  </div>
+    </div>
+    <div id="convertGroup"  class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convertto')}">
+      </div>
+      </div>
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.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-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'convert')}">
+      </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-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'tableExtraxt.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
+      </div>
+    </div>
+    </div>
     <div id="groupSecurity" class="feature-group">
       <div
         th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
@@ -123,7 +180,6 @@
       <div
       th:replace="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
     </div>
-
   <div
   th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.tags', 'security')}">
 </div>
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index de1afeb2bdc..819feefef4b 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -5,7 +5,9 @@
   <script th:inline="javascript">
     // Initializing the scripts
     initLanguageSettings();
+    document.addEventListener('DOMContentLoaded', function () {
     toolsManager();
+    });
   </script>
   <script th:inline="javascript">
     const currentVersion = /*[[${@appVersion}]]*/ '';
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 358d44abdcd..e644a0dc183 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -14,16 +14,16 @@
         <div class="container">
         <div style="display:flex; gap:3rem">
  <!-- Jumbotron -->
- <div class="rounded d-none d-md-block" id="jumbotron">
-         <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
+ <div class="rounded d-none d-md-block" id="jumbotron" style="width:50%">
+  <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>
-        <div id="groupRecent" >
+        <div id="groupRecent" style="width:100%" margin-left: 10%;>
           <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
           </div>
-          <div style="display: flex; flex-direction: row;">
+          <div class="recent-features" >
             <div class="newfeature"
   th:include="~{fragments/navbarEntry :: navbarEntry('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
 </div>
@@ -50,14 +50,14 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
           <div>
         <br>
         <div style="justify-content: center; display: flex;">
-          <div style="width:80%">
+          <div style="margin:0 3rem">
           <span class="material-symbols-rounded search-icon">
             search
           </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
 
-        <div style="display: flex; justify-content: center;">
-        <div  style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:3rem">
+        <div style="display: flex;  justify-content: center; ">
+        <div  style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:3rem;  justify-content: center;">
           <div  style="display: flex; align-items: center; cursor: pointer;" onclick="toggleFavoritesMode()" >
           <span th:text="#{home.setFavorites}">Hide Favourites</span>
         <span class="material-symbols-rounded toggle-favourites" style="font-size: 2rem;  margin-left: 0.2rem;" >
@@ -78,9 +78,9 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
           home
         </span>
         </a>
-        <div style="height:2.5rem;  display: flex; align-items: center; cursor: pointer;">
+        <div style="height:2.5rem;  display: flex; align-items: center; cursor: pointer; justify-content: center;">
           <label for="sort-options">Sort by:</label>
-          <select id="sort-options" style="border:none">
+          <select id="sort-options" style="border:none;">
             <option value="alphabetical"  th:text="#{home.alphabetical}"> </option>
             <!-- <option value="personal">Your most used</option> -->
             <option value="global" th:text="#{home.globalPopularity}"></option>
@@ -110,7 +110,7 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
               </div>
             </a>
           </div>
-          <div class="feature-rows">
+          <div class="feature-rows" >
             <div id="groupFavorites" class="feature-group">
               <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
               </div>
@@ -204,140 +204,7 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
 }
 </style>
   <script th:src="@{'/js/fetch-utils.js'}"></script>
-  <script th:inline="javascript">
-
-    /*<![CDATA[*/
-    const analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
-
-    document.addEventListener('DOMContentLoaded', function () {
-      if (analyticsPromptBoolean) {
-        const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
-        analyticsModal.show();
-      }
-    });
-    /*]]>*/
-    function setAnalytics(enabled) {
-      fetchWithCsrf('api/v1/settings/update-enable-analytics', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(enabled)
-      })
-        .then(response => {
-          if (response.status === 200) {
-            console.log('Analytics setting updated successfully');
-            bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
-          } else if (response.status === 208) {
-            console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
-            alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
-          } else {
-            throw new Error('Unexpected response status: ' + response.status);
-          }
-        })
-        .catch(error => {
-          console.error('Error updating analytics setting:', error);
-          alert('An error occurred while updating the analytics setting. Please try again.');
-        });
-    }
-
-
-updateFavoriteIcons();
-
-
-
-// function updateFavoritesDropdown() {
-//   const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
-//   const favoritesDropdown = document.getElementById('favoritesDropdown');
-//   favoritesDropdown.innerHTML = '';
-//   favoritesList.forEach(fav => {
-//     const item = document.createElement('div');
-//     item.textContent = fav;
-//     favoritesDropdown.appendChild(item);
-//   });
-// }
-
-
-    const defaultView = localStorage.getItem("defaultView") || "home"; // Default to "home"
-    if (defaultView === "home-legacy") {
-      window.location.href = "/home-legacy"; // Redirect to legacy view
-    }
-
-
-
-    document.addEventListener("DOMContentLoaded", function () {
-
-      const surveyVersion = "2.0";
-      const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
-      const dontShowAgain = document.getElementById('dontShowAgain');
-      const takeSurveyButton = document.getElementById('takeSurvey');
-
-      const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
-
-      // Check if survey version changed and reset page views if it did
-      const storedVersion = localStorage.getItem('surveyVersion');
-      if (storedVersion && storedVersion !== surveyVersion) {
-        localStorage.setItem('pageViews', '0');
-      }
-
-      let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
-
-      pageViews++;
-      localStorage.setItem('pageViews', pageViews.toString());
-
-      function shouldShowSurvey() {
-        if (localStorage.getItem('dontShowSurvey') === 'true' ||
-          localStorage.getItem('surveyTaken') === 'true') {
-          return false;
-        }
-
-        // If survey version changed and we hit a threshold, show the survey
-        if (localStorage.getItem('surveyVersion') !== surveyVersion &&
-          viewThresholds.includes(pageViews)) {
-          return true;
-        }
-
-        return viewThresholds.includes(pageViews);
-      }
-
-      if (shouldShowSurvey()) {
-        modal.show();
-      }
-
-      dontShowAgain.addEventListener('change', function () {
-        if (this.checked) {
-          localStorage.setItem('dontShowSurvey', 'true');
-          localStorage.setItem('surveyVersion', surveyVersion);
-        } else {
-          localStorage.removeItem('dontShowSurvey');
-          localStorage.removeItem('surveyVersion');
-        }
-      });
-
-      takeSurveyButton.addEventListener('click', function () {
-        localStorage.setItem('surveyTaken', 'true');
-        localStorage.setItem('surveyVersion', surveyVersion);
-        modal.hide();
-      });
-
-      if (localStorage.getItem('dontShowSurvey')) {
-        modal.hide();
-      }
-
-    if (window.location.pathname === '/') {
-      const navItem = document.getElementById('navItemToHide');
-      if (navItem) {
-        navItem.style.display = 'none'
-      }
-    }
-    updateFavoritesDropdown();
-
-  });
-  function setAsDefault(value) {
-      localStorage.setItem('defaultView', value);
-      console.log(`Default view set to: ${value}`);
-      }
-  </script>
+  <script th:src="@{'/js/pages/home.js'}"></script>
 
 
 </body>

From 01748922a9170d09e35ed012c7e323779f236e9a Mon Sep 17 00:00:00 2001
From: Reece Browne <reece@stirling.pdf>
Date: Tue, 21 Jan 2025 16:29:28 +0000
Subject: [PATCH 18/20] Central UI with seperator

---
 src/main/resources/static/css/navbar.css   |  43 ++---
 src/main/resources/static/js/pages/home.js |   2 +-
 src/main/resources/templates/home.html     | 173 +++++++++++----------
 3 files changed, 116 insertions(+), 102 deletions(-)

diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index 401c1c112e6..7a30fe9aa82 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -349,12 +349,12 @@ span.icon-text::after {
 }
 
 .go-pro-link {
-   position: relative;
-   padding: 0.5rem 1rem;
-   transition: all 0.3s ease;
-   z-index: 1;
-   display: inline-block;
-   width: auto;
+  position: relative;
+  padding: 0.5rem 1rem;
+  transition: all 0.3s ease;
+  z-index: 1;
+  display: inline-block;
+  width: auto;
 }
 
 .go-pro-badge {
@@ -378,7 +378,7 @@ span.icon-text::after {
   gap: 1rem;
 }
 
-#stacked > .navbar-item {
+#stacked>.navbar-item {
   margin: 0;
 }
 
@@ -390,24 +390,27 @@ span.icon-text::after {
 
 .feature-group {
   display: flex;
-      flex-direction: column;
-      min-width: 14rem;
-      max-width: 18rem;
-      flex: 1 1 min(14rem, 100%);
-      box-sizing: border-box;
+  flex-direction: column;
+  min-width: 14rem;
+  max-width: 18rem;
+  flex: 1 1 min(14rem, 100%);
+  box-sizing: border-box;
 }
 
-.feature-rows{
+.feature-rows {
   display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 1rem;
-    padding: 1rem;
-    box-sizing: border-box;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 1rem;
+  padding: 0 1rem;
+  box-sizing: border-box;
 }
+
 .feature-rows.single-column {
-  justify-content: center; /* Center-align a single column */
+  justify-content: center;
+  /* Center-align a single column */
 }
+
 .feature-group-header {
   display: flex;
   justify-content: flex-start;
@@ -450,7 +453,7 @@ span.icon-text::after {
   transform: scale(1.2);
 }
 
-.favorite-icon .material-symbols-rounded.fill{
+.favorite-icon .material-symbols-rounded.fill {
   color: #f5c000;
 }
 
diff --git a/src/main/resources/static/js/pages/home.js b/src/main/resources/static/js/pages/home.js
index 0e7b3b54aab..bb0abba0905 100644
--- a/src/main/resources/static/js/pages/home.js
+++ b/src/main/resources/static/js/pages/home.js
@@ -119,7 +119,7 @@ function adjustVisibleElements() {
   subElements.forEach((element) => {
     totalWidth += 12 * parseFloat(getComputedStyle(document.documentElement).fontSize);
 
-    if (totalWidth > containerWidth) {
+    if (totalWidth > window.innerWidth) {
       element.style.display = 'none';
     } else {
       element.style.display = 'block';
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index e644a0dc183..84239316c74 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -11,31 +11,29 @@
     <div id="content-wrap">
       <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
 
-        <div class="container">
-        <div style="display:flex; gap:3rem">
- <!-- Jumbotron -->
- <div class="rounded d-none d-md-block" id="jumbotron" style="width:50%">
-  <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>
-        <div id="groupRecent" style="width:100%" margin-left: 10%;>
-          <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
+      <div>
+        <div style="display:flex; flex-direction: column; justify-content: center; width:100%">
+          <div style="width:fit-content; margin: 0 auto; padding: 0 3rem">
+            <p class="lead fs-4"
+              th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
+            </p>
           </div>
-          <div class="recent-features" >
-            <div class="newfeature"
-  th:include="~{fragments/navbarEntry :: navbarEntry('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
-</div>
-<div class="newfeature"
-th:include="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-</div>
-<div class="newfeature"
-th:include="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
-</div>
+          <div id="groupRecent" style="width: fit-content; margin: 0 auto">
+            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
+            </div>
+            <div class="recent-features">
+              <div class="newfeature"
+                th:include="~{fragments/navbarEntry :: navbarEntry('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+              </div>
+              <div class="newfeature"
+                th:include="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+              </div>
+              <div class="newfeature"
+                th:include="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+              </div>
+            </div>
           </div>
         </div>
-      </div>
 
       </div>
 
@@ -47,55 +45,65 @@ <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
       width: 100%;
       display: flex;
       flex-direction: column;">
-          <div>
-        <br>
-        <div style="justify-content: center; display: flex;">
-          <div style="margin:0 3rem">
-          <span class="material-symbols-rounded search-icon">
-            search
-          </span>
-        <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
-
-        <div style="display: flex;  justify-content: center; ">
-        <div  style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:3rem;  justify-content: center;">
-          <div  style="display: flex; align-items: center; cursor: pointer;" onclick="toggleFavoritesMode()" >
-          <span th:text="#{home.setFavorites}">Hide Favourites</span>
-        <span class="material-symbols-rounded toggle-favourites" style="font-size: 2rem;  margin-left: 0.2rem;" >
-          star
-        </span>
-        </div>
-        <div onclick="toggleFavoritesView()" id="favouritesVisibility" style="display: flex; align-items: center; cursor: pointer;">
-          <span     id="toggle-favourites-text"
-          th:text="#{home.hideFavorites}">Hide Favourites</span>
-        <span     id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem;  margin-left: 0.2rem;" >
-          visibility
-        </span>
-        </div>
-        <a href="home" onclick="setAsDefault('home-legacy')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
-          <span th:text="#{home.legacyHomepage}">
-          </span>
-        <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
-          home
-        </span>
-        </a>
-        <div style="height:2.5rem;  display: flex; align-items: center; cursor: pointer; justify-content: center;">
-          <label for="sort-options">Sort by:</label>
-          <select id="sort-options" style="border:none;">
-            <option value="alphabetical"  th:text="#{home.alphabetical}"> </option>
-            <!-- <option value="personal">Your most used</option> -->
-            <option value="global" th:text="#{home.globalPopularity}"></option>
-            <!-- <option value="server">Popularity in organisation</option> -->
-          </select>
-        </div>
-      </div>
+        <div>
+          <br>
+          <div style="justify-content: center; display: flex;">
+            <div style="margin:0 3rem">
+              <span class="material-symbols-rounded search-icon">
+                search
+              </span>
+              <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+
+              <div style="display: flex;  justify-content: center; ">
+                <div
+                  style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:3rem;  justify-content: center;">
+                  <div style="display: flex; align-items: center; cursor: pointer;" onclick="toggleFavoritesMode()">
+                    <span th:text="#{home.setFavorites}">Hide Favourites</span>
+                    <span class="material-symbols-rounded toggle-favourites"
+                      style="font-size: 2rem;  margin-left: 0.2rem;">
+                      star
+                    </span>
+                  </div>
+                  <div onclick="toggleFavoritesView()" id="favouritesVisibility"
+                    style="display: flex; align-items: center; cursor: pointer;">
+                    <span id="toggle-favourites-text" th:text="#{home.hideFavorites}">Hide Favourites</span>
+                    <span id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites"
+                      style="font-size: 2rem;  margin-left: 0.2rem;">
+                      visibility
+                    </span>
+                  </div>
+                  <a href="home" onclick="setAsDefault('home-legacy')"
+                    style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
+                    <span th:text="#{home.legacyHomepage}">
+                    </span>
+                    <span class="material-symbols-rounded toggle-favourites"
+                      style="font-size: 2rem; margin-left: 0.2rem;">
+                      home
+                    </span>
+                  </a>
+                  <div
+                    style="height:2.5rem;  display: flex; align-items: center; cursor: pointer; justify-content: center;">
+                    <label for="sort-options">Sort by:</label>
+                    <select id="sort-options" style="border:none;">
+                      <option value="alphabetical" th:text="#{home.alphabetical}"> </option>
+                      <!-- <option value="personal">Your most used</option> -->
+                      <option value="global" th:text="#{home.globalPopularity}"></option>
+                      <!-- <option value="server">Popularity in organisation</option> -->
+                    </select>
+                  </div>
+                </div>
 
-      </div>
-      </div>
-      </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div>
         </div>
-        <div class="features-container">
+        <div class="features-container" style="  border-top: 1px;
+        border-top-style: solid;
+        border-color: var(--md-sys-color-on-surface);
+        margin-top: 1rem;
+      ">
           <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
             style="display: none;">
             <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
@@ -110,14 +118,14 @@ <h5 class="card-title" th:text="#{settings.update}"></h5>
               </div>
             </a>
           </div>
-          <div class="feature-rows" >
+          <div class="feature-rows">
             <div id="groupFavorites" class="feature-group">
               <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
               </div>
               <div class="nav-group-container">
               </div>
             </div>
-          <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
+            <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
           </div>
 
         </div>
@@ -191,18 +199,21 @@ <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do
   </div>
 
 
-<style> .favorite-icon {
-  cursor: pointer;
-  width:0rem;
-  font-size: 2rem;
-}
-.toggle-favourites{
-  cursor: pointer;
-}
-.toggle-favourites.active {
-  color: gold;
-}
-</style>
+  <style>
+    .favorite-icon {
+      cursor: pointer;
+      width: 0rem;
+      font-size: 2rem;
+    }
+
+    .toggle-favourites {
+      cursor: pointer;
+    }
+
+    .toggle-favourites.active {
+      color: gold;
+    }
+  </style>
   <script th:src="@{'/js/fetch-utils.js'}"></script>
   <script th:src="@{'/js/pages/home.js'}"></script>
 

From a43a5c73d23958fbb73b35a7ff1b69b55ef5c868 Mon Sep 17 00:00:00 2001
From: Reece Browne <reece@stirling.pdf>
Date: Tue, 21 Jan 2025 17:48:16 +0000
Subject: [PATCH 19/20] convert colour updates

---
 .../resources/static/css/theme/theme.dark.css |   2 +-
 .../static/css/theme/theme.light.css          |   2 +-
 .../templates/convert/file-to-pdf.html        |   8 +-
 .../templates/convert/html-to-pdf.html        |  63 +++---
 .../templates/convert/img-to-pdf.html         | 196 +++++++++---------
 .../templates/convert/markdown-to-pdf.html    |  56 ++---
 .../templates/convert/pdf-to-img.html         | 124 +++++------
 .../convert/pdf-to-presentation.html          |  74 ++++---
 .../templates/convert/pdf-to-word.html        |  69 +++---
 .../templates/convert/url-to-pdf.html         |  51 ++---
 10 files changed, 344 insertions(+), 301 deletions(-)

diff --git a/src/main/resources/static/css/theme/theme.dark.css b/src/main/resources/static/css/theme/theme.dark.css
index 405fd19bb1a..39353fb6bc3 100644
--- a/src/main/resources/static/css/theme/theme.dark.css
+++ b/src/main/resources/static/css/theme/theme.dark.css
@@ -58,7 +58,7 @@
     --md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
-    --md-nav-section-color-convertto: rgba(9, 230, 182, var(--md-nav-section-color-opacity));
+    --md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convertto: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
diff --git a/src/main/resources/static/css/theme/theme.light.css b/src/main/resources/static/css/theme/theme.light.css
index 0d372309212..4b42bd9fc7b 100644
--- a/src/main/resources/static/css/theme/theme.light.css
+++ b/src/main/resources/static/css/theme/theme.light.css
@@ -58,7 +58,7 @@
     --md-nav-on-section-color-organize: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convert: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
-    --md-nav-section-color-convertto: rgba(9, 230, 182, var(--md-nav-section-color-opacity));
+    --md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convertto: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-security: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html
index 062abda3a07..4fbc8ead580 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -16,12 +16,14 @@
         <div class="row justify-content-center">
           <div class="col-md-6 bg-card">
             <div class="tool-header">
-              <span class="material-symbols-rounded tool-header-icon convert">draft</span>
+              <span class="material-symbols-rounded tool-header-icon convertto">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', multipleInputsForSingleRequest=false)}"></div>
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=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">
@@ -42,7 +44,7 @@
                   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>
               <div>
-                <br/>
+                <br />
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
               </div>
             </form>
diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html
index 9ed186be52e..25f75b0f076 100644
--- a/src/main/resources/templates/convert/html-to-pdf.html
+++ b/src/main/resources/templates/convert/html-to-pdf.html
@@ -1,38 +1,43 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{HTMLToPDF.title}, header=#{HTMLToPDF.header})}"></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-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon convert">html</span>
-                <span class="tool-header-text" th:text="#{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', multipleInputsForSingleRequest=false, accept='text/html,application/zip' )}"></div>
-                <div class="mb-3">
-                  <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
-                  <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{HTMLToPDF.help}"></p>
-              <p class="mt-3" th:text="#{HTMLToPDF.credit}"></p>
+<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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">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', multipleInputsForSingleRequest=false, accept='text/html,application/zip' )}">
+              </div>
+              <div class="mb-3">
+                <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
+                <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{HTMLToPDF.help}"></p>
+            <p class="mt-3" th:text="#{HTMLToPDF.credit}"></p>
           </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/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index ee63debdba5..6c37e64736d 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -1,60 +1,67 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{imageToPDF.title}, header=#{imageToPDF.header})}"></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-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon image">picture_as_pdf</span>
-                <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
+<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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">picture_as_pdf</span>
+              <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
+            </div>
+            <form id="imageToPDFForm" method="post" enctype="multipart/form-data"
+              th:action="@{'/api/v1/convert/img/pdf'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='image/*', inputText=#{imgPrompt})}">
+              </div>
+              <div class="mb-3">
+                <label for="fitOption" th:text="#{imageToPDF.selectLabel}">Fit Options</label>
+                <select class="form-control" id="fitOption" name="fitOption">
+                  <option value="fillPage" th:text="#{imageToPDF.fillPage}">Fill Page</option>
+                  <option value="fitDocumentToImage" th:text="#{imageToPDF.fitDocumentToImage}">Fit Document to Image
+                  </option>
+                  <option value="maintainAspectRatio" th:text="#{imageToPDF.maintainAspectRatio}">Maintain Aspect Ratio
+                  </option>
+                </select>
               </div>
-              <form  id="imageToPDFForm" method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/img/pdf'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='image/*', inputText=#{imgPrompt})}"></div>
-                <div class="mb-3">
-                  <label for="fitOption" th:text="#{imageToPDF.selectLabel}">Fit Options</label>
-                  <select class="form-control" id="fitOption" name="fitOption">
-                    <option value="fillPage" th:text="#{imageToPDF.fillPage}">Fill Page</option>
-                    <option value="fitDocumentToImage" th:text="#{imageToPDF.fitDocumentToImage}">Fit Document to Image</option>
-                    <option value="maintainAspectRatio" th:text="#{imageToPDF.maintainAspectRatio}">Maintain Aspect Ratio</option>
-                  </select>
-                </div>
 
-                <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>
-                  <select class="form-control" id="colorType" name="colorType">
-                    <option value="color" th:text="#{pdfToImage.color}"></option>
-                    <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
-                    <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
-                  </select>
-                </div>
-                <input type="hidden" id="override" name="override" value="multi">
-                <div class="mb-3">
-                  <label th:text=#{imageToPDF.selectText.3}></label>
-                  <select class="form-control" id="conversionType" name="conversionType" disabled>
-                    <option value="merge" th:text=#{imageToPDF.selectText.4}></option>
-                    <option value="convert" th:text=#{imageToPDF.selectText.5} selected></option>
-                  </select>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
-                <script>
-                  $('#fileInput-input').on('change', function(e) {
-                    const fileInput = e.target;
-                    fileInput.addEventListener('file-input-change', async (e) => {
-                    const {allFiles} = e.detail;
+              <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>
+                <select class="form-control" id="colorType" name="colorType">
+                  <option value="color" th:text="#{pdfToImage.color}"></option>
+                  <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
+                  <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
+                </select>
+              </div>
+              <input type="hidden" id="override" name="override" value="multi">
+              <div class="mb-3">
+                <label th:text=#{imageToPDF.selectText.3}></label>
+                <select class="form-control" id="conversionType" name="conversionType" disabled>
+                  <option value="merge" th:text=#{imageToPDF.selectText.4}></option>
+                  <option value="convert" th:text=#{imageToPDF.selectText.5} selected></option>
+                </select>
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
+              <script>
+                $('#fileInput-input').on('change', function (e) {
+                  const fileInput = e.target;
+                  fileInput.addEventListener('file-input-change', async (e) => {
+                    const { allFiles } = e.detail;
                     var conversionType = document.getElementById("conversionType");
                     console.log("files.length=" + allFiles.length)
                     if (allFiles.length > 1) {
@@ -62,58 +69,59 @@
                     } else {
                       conversionType.disabled = true;
                     }
-                    });
                   });
+                });
 
-                  $('#conversionType').change(function() {
-                    var selectedValue = $(this).val();
-                    var override = document.getElementById("override");
-                    console.log("selectedValue=" + selectedValue)
-                    if (selectedValue === 'merge') {
-                      override.value = "single";
-                    } else if (selectedValue === 'convert') {
-                      override.value = "multi";
-                    }
-                  });
-                  document.getElementById("imageToPDFForm").addEventListener("submit", async function (e) {
-    e.preventDefault();
+                $('#conversionType').change(function () {
+                  var selectedValue = $(this).val();
+                  var override = document.getElementById("override");
+                  console.log("selectedValue=" + selectedValue)
+                  if (selectedValue === 'merge') {
+                    override.value = "single";
+                  } else if (selectedValue === 'convert') {
+                    override.value = "multi";
+                  }
+                });
+                document.getElementById("imageToPDFForm").addEventListener("submit", async function (e) {
+                  e.preventDefault();
 
-    const form = e.target;
-    const formData = new FormData(form);
+                  const form = e.target;
+                  const formData = new FormData(form);
 
-    const fitOptionSelect = document.getElementById("fitOption");
-    const fitOptionValue = fitOptionSelect ? fitOptionSelect.value : "fit-to-page"; // Default value
-    formData.append("fitOption", fitOptionValue);
+                  const fitOptionSelect = document.getElementById("fitOption");
+                  const fitOptionValue = fitOptionSelect ? fitOptionSelect.value : "fit-to-page"; // Default value
+                  formData.append("fitOption", fitOptionValue);
 
-    const overrideInput = document.getElementById("override");
-    console.log("Override value before submission:", overrideInput.value);
+                  const overrideInput = document.getElementById("override");
+                  console.log("Override value before submission:", overrideInput.value);
 
-    for (let [key, value] of formData.entries()) {
-        console.log(`${key}:`, value);
-    }
+                  for (let [key, value] of formData.entries()) {
+                    console.log(`${key}:`, value);
+                  }
 
-    try {
-        const response = await fetch(form.action, {
-            method: "POST",
-            body: formData
-        });
+                  try {
+                    const response = await fetch(form.action, {
+                      method: "POST",
+                      body: formData
+                    });
 
-        if (response.ok) {
-            console.log("Form successfully submitted");
-        } else {
-            console.error("Failed to submit the form");
-        }
-    } catch (error) {
-        console.error("Error submitting the form:", error);
-    }
-});
-                </script>
-              </form>
-            </div>
+                    if (response.ok) {
+                      console.log("Form successfully submitted");
+                    } else {
+                      console.error("Failed to submit the form");
+                    }
+                  } catch (error) {
+                    console.error("Error submitting the form:", error);
+                  }
+                });
+              </script>
+            </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/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html
index 9f9c52e2338..f40a0781e41 100644
--- a/src/main/resources/templates/convert/markdown-to-pdf.html
+++ b/src/main/resources/templates/convert/markdown-to-pdf.html
@@ -1,33 +1,39 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{MarkdownToPDF.title}, header=#{MarkdownToPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://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 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', multipleInputsForSingleRequest=false, accept='.md')}"></div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{MarkdownToPDF.help}"></p>
-              <p class="mt-3" th:text="#{MarkdownToPDF.credit}"></p>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{MarkdownToPDF.title}, header=#{MarkdownToPDF.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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">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', multipleInputsForSingleRequest=false, accept='.md')}">
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{MarkdownToPDF.help}"></p>
+            <p class="mt-3" th:text="#{MarkdownToPDF.credit}"></p>
           </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/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index 88747cea9d1..b4f2b0657be 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -1,70 +1,76 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{pdfToImage.title}, header=#{pdfToImage.header})}"></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-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon image">photo_library</span>
-                <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
+<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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">photo_library</span>
+              <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
+            </div>
+            <p th:text="#{processTimeWarning}"></p>
+            <p th:if="${!isPython}" th:text="#{pdfToImage.info}">Python is not installed. Required for WebP conversion.
+            </p>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/img'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.selectText}"></label>
+                <select class="form-control" name="imageFormat">
+                  <option value="png">PNG</option>
+                  <option value="jpg">JPG</option>
+                  <option value="gif">GIF</option>
+                  <option value="tiff">TIFF</option>
+                  <option value="bmp">BMP</option>
+                  <option th:if="${isPython}" value="webp">WEBP</option>
+                </select>
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.singleOrMultiple}"></label>
+                <select class="form-control" name="singleOrMultiple">
+                  <option value="multiple" th:text="#{pdfToImage.multi}"></option>
+                  <option value="single" th:text="#{pdfToImage.single}"></option>
+                </select>
               </div>
-              <p th:text="#{processTimeWarning}"></p>
-              <p th:if="${!isPython}" th:text="#{pdfToImage.info}">Python is not installed. Required for WebP conversion.</p>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/img'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.selectText}"></label>
-                  <select class="form-control" name="imageFormat">
-                    <option value="png">PNG</option>
-                    <option value="jpg">JPG</option>
-                    <option value="gif">GIF</option>
-                    <option value="tiff">TIFF</option>
-                    <option value="bmp">BMP</option>
-                    <option th:if="${isPython}" value="webp">WEBP</option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.singleOrMultiple}"></label>
-                  <select class="form-control" name="singleOrMultiple">
-                    <option value="multiple" th:text="#{pdfToImage.multi}"></option>
-                    <option value="single" th:text="#{pdfToImage.single}"></option>
-                  </select>
-                </div>
 
-                <div class="mb-3" id="singleOptionSection" >
-                  <label for="pageNumbers" th:text="#{pageSelectionPrompt}"></label>
-                  <input type="text" name="pageNumbers" class="form-control" id="pageNumbers" value="all"
-                         th:placeholder="#{pdfToImage.placeholder}" required>
-                </div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.colorType}"></label>
-                  <select class="form-control" name="colorType">
-                    <option value="color" th:text="#{pdfToImage.color}"></option>
-                    <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
-                    <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label for="dpi">DPI:</label>
-                  <input type="number" name="dpi" class="form-control" id="dpi" min="1" step="1" value="300" required>
-                </div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToImage.submit}"></button>
-              </form>
-            </div>
+              <div class="mb-3" id="singleOptionSection">
+                <label for="pageNumbers" th:text="#{pageSelectionPrompt}"></label>
+                <input type="text" name="pageNumbers" class="form-control" id="pageNumbers" value="all"
+                  th:placeholder="#{pdfToImage.placeholder}" required>
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.colorType}"></label>
+                <select class="form-control" name="colorType">
+                  <option value="color" th:text="#{pdfToImage.color}"></option>
+                  <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
+                  <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
+                </select>
+              </div>
+              <div class="mb-3">
+                <label for="dpi">DPI:</label>
+                <input type="number" name="dpi" class="form-control" id="dpi" min="1" step="1" value="300" required>
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToImage.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+
+</body>
 
-  </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index c52419f303b..56f22db56de 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -1,41 +1,49 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{PDFToPresentation.title}, header=#{PDFToPresentation.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://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 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', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
-                <div class="mb-3">
-                  <label th:text="#{PDFToPresentation.selectText.1}"></label>
-                  <select class="form-control" name="outputFormat">
-                    <option value="pptx">PPTX</option>
-                    <option value="ppt">PPT</option>
-                    <option value="odp">ODP</option>
-                  </select>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{PDFToPresentation.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{PDFToPresentation.credit}"></p>
+<head>
+  <th:block
+    th:insert="~{fragments/common :: head(title=#{PDFToPresentation.title}, header=#{PDFToPresentation.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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">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', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
+              <div class="mb-3">
+                <label th:text="#{PDFToPresentation.selectText.1}"></label>
+                <select class="form-control" name="outputFormat">
+                  <option value="pptx">PPTX</option>
+                  <option value="ppt">PPT</option>
+                  <option value="odp">ODP</option>
+                </select>
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary"
+                th:text="#{PDFToPresentation.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{PDFToPresentation.credit}"></p>
           </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/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index 1b3f7f58860..0b500cbb6ed 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -1,41 +1,46 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{PDFToWord.title}, header=#{PDFToWord.header})}"></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-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon word">description</span>
-                <span class="tool-header-text" th:text="#{PDFToWord.header}"></span>
-              </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/word'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
-                <div class="mb-3">
-                  <label th:text="#{PDFToWord.selectText.1}"></label>
-                  <select class="form-control" name="outputFormat">
-                    <option value="docx">DocX</option>
-                    <option value="doc">Doc</option>
-                    <option value="odt">Odt</option>
-                  </select>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{PDFToWord.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{PDFToWord.credit}"></p>
+<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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">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', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
+              <div class="mb-3">
+                <label th:text="#{PDFToWord.selectText.1}"></label>
+                <select class="form-control" name="outputFormat">
+                  <option value="docx">DocX</option>
+                  <option value="doc">Doc</option>
+                  <option value="odt">Odt</option>
+                </select>
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{PDFToWord.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{PDFToWord.credit}"></p>
           </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/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html
index 671672586c1..67e89c101ff 100644
--- a/src/main/resources/templates/convert/url-to-pdf.html
+++ b/src/main/resources/templates/convert/url-to-pdf.html
@@ -1,33 +1,36 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{URLToPDF.title}, header=#{URLToPDF.header})}"></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-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon convert">link</span>
-                <span class="tool-header-text" th:text="#{URLToPDF.header}"></span>
-              </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>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{URLToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{URLToPDF.credit}"></p>
+<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 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">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>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{URLToPDF.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{URLToPDF.credit}"></p>
           </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

From 06186ebebcfb50c8fa50b1fa2b955aee9faa3c3b Mon Sep 17 00:00:00 2001
From: Reece Browne <reece@stirling.pdf>
Date: Wed, 22 Jan 2025 11:17:45 +0000
Subject: [PATCH 20/20] Update centring

---
 src/main/resources/static/js/pages/home.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/static/js/pages/home.js b/src/main/resources/static/js/pages/home.js
index bb0abba0905..2bc8015db3f 100644
--- a/src/main/resources/static/js/pages/home.js
+++ b/src/main/resources/static/js/pages/home.js
@@ -135,8 +135,8 @@ function adjustContainerAlignment() {
       const childElements = Array.from(container.children);
 
       const containerWidth = parent.offsetWidth;
-      console.log(containerWidth < 30 * parseFloat(getComputedStyle(document.documentElement).fontSize));
-      if (containerWidth < 30 * parseFloat(getComputedStyle(document.documentElement).fontSize)) {
+      console.log(containerWidth < 32 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+      if (containerWidth < 32 * parseFloat(getComputedStyle(document.documentElement).fontSize)) {
         container.classList.add('single-column');
       } else {
         container.classList.remove('single-column');