diff --git a/Dockerfile b/Dockerfile
index a1d2e85bb..834dce6cc 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,7 +5,7 @@ FROM alpine:20240329
 COPY scripts /scripts
 COPY pipeline /pipeline
 COPY src/main/resources/static/fonts/*.ttf /usr/share/fonts/opentype/noto/
-COPY src/main/resources/static/fonts/*.otf /usr/share/fonts/opentype/noto/
+#COPY src/main/resources/static/fonts/*.otf /usr/share/fonts/opentype/noto/
 COPY build/libs/*.jar app.jar
 
 ARG VERSION_TAG
@@ -34,7 +34,7 @@ RUN echo "@testing https://dl-cdn.alpinelinux.org/alpine/edge/main" | tee -a /et
 openssl-dev \
         bash \
         curl \
-        openjdk17-jre \
+        openjdk21-jre \
         su-exec \
         shadow \
 # Doc conversion
diff --git a/Dockerfile-ultra-lite b/Dockerfile-ultra-lite
index eed8d7838..ea07e62f9 100644
--- a/Dockerfile-ultra-lite
+++ b/Dockerfile-ultra-lite
@@ -31,7 +31,7 @@ RUN mkdir /configs /logs /customFiles && \
         curl \
         su-exec \
         shadow \
-        openjdk17-jre && \
+        openjdk21-jre && \
     echo "@testing https://dl-cdn.alpinelinux.org/alpine/edge/main" | tee -a /etc/apk/repositories && \
     echo "@testing https://dl-cdn.alpinelinux.org/alpine/edge/community" | tee -a /etc/apk/repositories && \
     echo "@testing https://dl-cdn.alpinelinux.org/alpine/edge/testing" | tee -a /etc/apk/repositories && \
diff --git a/LocalRunGuide.md b/LocalRunGuide.md
index e0851d622..0c3442031 100644
--- a/LocalRunGuide.md
+++ b/LocalRunGuide.md
@@ -14,7 +14,7 @@ You could theoretically use a Distrobox/Toolbox, if your Distribution has old or
 
 Install the following software, if not already installed:
 
-- Java 17 or later
+- Java 17 or later (21 recommended)
 
 - Gradle 7.0 or later (included within repo so not needed on server)
 
@@ -42,17 +42,25 @@ For Debian-based systems, you can use the following command:
 
 ```bash
 sudo apt-get update
-sudo apt-get install -y git  automake  autoconf  libtool  libleptonica-dev  pkg-config zlib1g-dev make g++ openjdk-17-jdk python3 python3-pip
+sudo apt-get install -y git  automake  autoconf  libtool  libleptonica-dev  pkg-config zlib1g-dev make g++ openjdk-21-jdk python3 python3-pip
 ```
 
 For Fedora-based systems use this command:
 
 ```bash
-sudo dnf install -y git automake autoconf libtool leptonica-devel pkg-config zlib-devel make gcc-c++ java-17-openjdk python3 python3-pip
+sudo dnf install -y git automake autoconf libtool leptonica-devel pkg-config zlib-devel make gcc-c++ java-21-openjdk python3 python3-pip
+```
+
+For non-root users with Nix Package Manager, use the following command:
+```bash
+nix-channel --update
+nix-env -iA nixpkgs.jdk21 nixpkgs.git nixpkgs.python38 nixpkgs.gnumake nixpkgs.libgcc nixpkgs.automake nixpkgs.autoconf nixpkgs.libtool nixpkgs.pkg-config nixpkgs.zlib nixpkgs.leptonica
 ```
 
 ### Step 2: Clone and Build jbig2enc (Only required for certain OCR functionality)
 
+For Debian and Fedora, you can build it from source using the following commands:
+
 ```bash
 mkdir ~/.git
 cd ~/.git &&\
@@ -64,6 +72,11 @@ make &&\
 sudo make install
 ```
 
+For Nix, you will face `Leptonica not detected`. Bypass this by installing it directly using the following command:
+```bash
+nix-env -iA nixpkgs.jbig2enc
+```
+
 ### Step 3: Install Additional Software
 Next we need to install LibreOffice for conversions, ocrmypdf for OCR, and opencv for pattern recognition functionality.
 
@@ -105,6 +118,13 @@ sudo dnf install -y libreoffice-writer libreoffice-calc libreoffice-impress unpa
 pip3 install uno opencv-python-headless unoconv pngquant WeasyPrint
 ```
 
+For Nix:
+
+```bash
+nix-env -iA nixpkgs.unpaper nixpkgs.libreoffice nixpkgs.ocrmypdf nixpkgs.poppler_utils
+pip3 install uno opencv-python-headless unoconv pngquant WeasyPrint
+```
+
 ### Step 4: Clone and Build Stirling-PDF
 
 ```bash
@@ -115,13 +135,12 @@ chmod +x ./gradlew &&\
 ./gradlew build
 ```
 
-
 ### Step 5: Move jar to desired location
 
 After the build process, a `.jar` file will be generated in the `build/libs` directory.
 You can move this file to a desired location, for example, `/opt/Stirling-PDF/`.
 You must also move the Script folder within the Stirling-PDF repo that you have downloaded to this directory.
-This folder is required for the python scripts using OpenCV
+This folder is required for the python scripts using OpenCV.
 
 ```bash
 sudo mkdir /opt/Stirling-PDF &&\
@@ -129,19 +148,25 @@ sudo mv ./build/libs/Stirling-PDF-*.jar /opt/Stirling-PDF/ &&\
 sudo mv scripts /opt/Stirling-PDF/ &&\
 echo "Scripts installed."
 ```
+
+For non-root users, you can just keep the jar in the main directory of Stirling-PDF using the following command:
+```bash
+mv ./build/libs/Stirling-PDF-*.jar ./Stirling-PDF-*.jar
+```
+
 ### Step 6: Other files
 #### OCR
 If you plan to use the OCR (Optical Character Recognition) functionality, you might need to install language packs for Tesseract if running non-english scanning.
 
 ##### Installing Language Packs
-Easiest is to use the langpacks provided by your repositories. Skip the other steps
+Easiest is to use the langpacks provided by your repositories. Skip the other steps.
 
 Manual:
 
 1. Download the desired language pack(s) by selecting the `.traineddata` file(s) for the language(s) you need.
 2. Place the `.traineddata` files in the Tesseract tessdata directory: `/usr/share/tessdata`
-3.
-Please view  [OCRmyPDF install guide](https://ocrmypdf.readthedocs.io/en/latest/installation.html) for more info.
+3. Please view  [OCRmyPDF install guide](https://ocrmypdf.readthedocs.io/en/latest/installation.html) for more info.
+
 **IMPORTANT:** DO NOT REMOVE EXISTING `eng.traineddata`, IT'S REQUIRED.
 
 Debian based systems, install languages with this command:
@@ -171,14 +196,38 @@ dnf search -C tesseract-langpack-
 rpm -qa | grep tesseract-langpack | sed 's/tesseract-langpack-//g'
 ```
 
+Nix:
+
+```bash
+nix-env -iA nixpkgs.tesseract
+```
+
+**Note:** Nix Package Manager pre-installs almost all the language packs when tesseract is installed.
+
 ### Step 7: Run Stirling-PDF
 
+Those who have pushed to the root directory, run the following commands:
+
 ```bash
 ./gradlew bootRun
 or
 java -jar /opt/Stirling-PDF/Stirling-PDF-*.jar
 ```
 
+Since libreoffice, soffice, and conversion tools have their dbus_tmp_dir set as `dbus_tmp_dir="/run/user/$(id -u)/libreoffice-dbus"`, you might get the following error when using their endpoints:
+```
+[Thread-7] INFO  s.s.SPDF.utils.ProcessExecutor - mkdir: cannot create directory ‘/run/user/1501’: Permission denied
+```
+To resolve this, before starting the Stirling-PDF, you have to set the environment variable to a directory you have write access to by using the following commands:
+
+```bash
+mkdir temp
+export DBUS_SESSION_BUS_ADDRESS="unix:path=./temp"
+./gradlew bootRun
+or
+java -jar ./Stirling-PDF-*.jar
+```
+
 ### Step 8: Adding a Desktop icon
 
 This will add a modified Appstarter to your Appmenu.
@@ -202,7 +251,19 @@ EOF
 
 Note: Currently the app will run in the background until manually closed.
 
-### Optional: Run Stirling-PDF as a service
+### Optional: Changing the host and port of the application:
+
+To override the default configuration, you can add the following to `/.git/Stirling-PDF/configs/custom_settings.yml` file:
+
+```bash
+server:
+  host: 0.0.0.0
+  port: 3000
+```
+
+**Note:** This file is created after the first application launch. To have it before that, you can create the directory and add the file yourself.
+
+### Optional: Run Stirling-PDF as a service (requires root).
 
 First create a .env file, where you can store environment variables:
 ```
@@ -239,6 +300,7 @@ WantedBy=multi-user.target
 ```
 
 Notify systemd that it has to rebuild its internal service database (you have to run this command every time you make a change in the service file):
+
 ```
 sudo systemctl daemon-reload
 ```
diff --git a/README.md b/README.md
index 82f0dcb7d..8490721d3 100644
--- a/README.md
+++ b/README.md
@@ -166,7 +166,7 @@ Stirling PDF currently supports 27!
 | English (English) (en_GB)                   | ![100%](https://geps.dev/progress/100) |
 | English (US) (en_US)                        | ![100%](https://geps.dev/progress/100) |
 | Arabic (العربية) (ar_AR)                    | ![42%](https://geps.dev/progress/42)   |
-| German (Deutsch) (de_DE)                    | ![100%](https://geps.dev/progress/100)   |
+| German (Deutsch) (de_DE)                    | ![99%](https://geps.dev/progress/99)   |
 | French (Français) (fr_FR)                   | ![91%](https://geps.dev/progress/91)   |
 | Spanish (Español) (es_ES)                   | ![99%](https://geps.dev/progress/99)   |
 | Simplified Chinese (简体中文) (zh_CN)       | ![98%](https://geps.dev/progress/98)   |
@@ -178,18 +178,19 @@ Stirling PDF currently supports 27!
 | Romanian (Română) (ro_RO)                   | ![41%](https://geps.dev/progress/41)   |
 | Korean (한국어) (ko_KR)                     | ![91%](https://geps.dev/progress/91)   |
 | Portuguese Brazilian (Português) (pt_BR)    | ![64%](https://geps.dev/progress/64)   |
-| Russian (Русский) (ru_RU)                   | ![91%](https://geps.dev/progress/91)   |
+| Russian (Русский) (ru_RU)                   | ![90%](https://geps.dev/progress/90)   |
 | Basque (Euskara) (eu_ES)                    | ![66%](https://geps.dev/progress/66)   |
 | Japanese (日本語) (ja_JP)                   | ![91%](https://geps.dev/progress/91)   |
 | Dutch (Nederlands) (nl_NL)                  | ![88%](https://geps.dev/progress/88)   |
-| Greek (Ελληνικά) (el_GR)                    | ![88%](https://geps.dev/progress/88)   |
+| Greek (Ελληνικά) (el_GR)                    | ![89%](https://geps.dev/progress/89)   |
 | Turkish (Türkçe) (tr_TR)                    | ![99%](https://geps.dev/progress/99)   |
 | Indonesia (Bahasa Indonesia) (id_ID)        | ![82%](https://geps.dev/progress/82)   |
 | Hindi (हिंदी) (hi_IN)                          | ![82%](https://geps.dev/progress/82)   |
 | Hungarian (Magyar) (hu_HU)                  | ![81%](https://geps.dev/progress/81)   |
-| Bulgarian (Български) (bg_BG)               | ![75%](https://geps.dev/progress/75)   |
+| Bulgarian (Български) (bg_BG)               | ![98%](https://geps.dev/progress/98)   |
 | Sebian Latin alphabet (Srpski) (sr_LATN_RS) | ![84%](https://geps.dev/progress/84)   |
 | Ukrainian (Українська) (uk_UA)              | ![90%](https://geps.dev/progress/90)   |
+| Slovakian (Slovensky) (sk_SK)               | ![98%](https://geps.dev/progress/98)   |
 
 ## Contributing (creating issues, translations, fixing bugs, etc.)
 
@@ -271,7 +272,7 @@ For those wanting to use Stirling-PDFs backend API to link with their own custom
 ### Prerequisites:
 
 - User must have the folder ./configs volumed within docker so that it is retained during updates.
-- Docker uses must download the security jar version by setting ``DOCKER_ENABLE_SECURITY`` to ``true`` in environment variables.
+- Docker users must download the security jar version by setting ``DOCKER_ENABLE_SECURITY`` to ``true`` in environment variables.
 - Then either enable login via the settings.yml file or via setting ``SECURITY_ENABLE_LOGIN`` to ``true``
 - Now the initial user will be generated with username ``admin`` and password ``stirling``. On login you will be forced to change the password to a new one. You can also use the environment variables ``SECURITY_INITIALLOGIN_USERNAME`` and  ``SECURITY_INITIALLOGIN_PASSWORD`` to set your own straight away (Recommended to remove them after user creation).
 
diff --git a/build.gradle b/build.gradle
index b8af66292..66817266a 100644
--- a/build.gradle
+++ b/build.gradle
@@ -12,7 +12,7 @@ plugins {
 import com.github.jk1.license.render.*
 
 group = 'stirling.software'
-version = '0.23.1'
+version = '0.23.2'
 sourceCompatibility = '17'
 
 repositories {
diff --git a/chart/stirling-pdf/Chart.yaml b/chart/stirling-pdf/Chart.yaml
index c076a0d07..52220bcdd 100644
--- a/chart/stirling-pdf/Chart.yaml
+++ b/chart/stirling-pdf/Chart.yaml
@@ -1,5 +1,5 @@
 apiVersion: v2
-appVersion: 0.23.1
+appVersion: 0.23.2
 description: locally hosted web application that allows you to perform various operations
   on PDF files
 home: https://github.com/Stirling-Tools/Stirling-PDF
diff --git a/scripts/translation_status.toml b/scripts/translation_status.toml
index 335ef567e..21fcad822 100644
--- a/scripts/translation_status.toml
+++ b/scripts/translation_status.toml
@@ -123,6 +123,11 @@ ignore = [
     'language.direction',
 ]
 
+[sk_SK]
+ignore = [
+    'language.direction',
+]
+
 [sr_LATN_RS]
 ignore = [
     'language.direction',
diff --git a/src/main/java/stirling/software/SPDF/config/ConfigInitializer.java b/src/main/java/stirling/software/SPDF/config/ConfigInitializer.java
index b31f44f8f..394baeb17 100644
--- a/src/main/java/stirling/software/SPDF/config/ConfigInitializer.java
+++ b/src/main/java/stirling/software/SPDF/config/ConfigInitializer.java
@@ -13,8 +13,6 @@ import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
 
 import org.springframework.context.ApplicationContextInitializer;
 import org.springframework.context.ConfigurableApplicationContext;
@@ -76,6 +74,7 @@ public class ConfigInitializer
             Files.createFile(customSettingsPath);
         }
     }
+
     private static Map<String, String> extractEntries(List<String> lines) {
         Map<String, String> entries = new HashMap<>();
         StringBuilder currentEntry = new StringBuilder();
@@ -121,8 +120,10 @@ public class ConfigInitializer
         return entries;
     }
 
-
-    private static List<String> mergeConfigs(List<String> templateLines, Map<String, String> templateEntries, Map<String, String> userEntries) {
+    private static List<String> mergeConfigs(
+            List<String> templateLines,
+            Map<String, String> templateEntries,
+            Map<String, String> userEntries) {
         List<String> mergedLines = new ArrayList<>();
         Set<String> handledKeys = new HashSet<>();
 
@@ -141,7 +142,8 @@ public class ConfigInitializer
                 blockIndent = indentLevel;
             }
 
-            if (userEntries.containsKey(currentBlockKey) && !handledKeys.contains(currentBlockKey)) {
+            if (userEntries.containsKey(currentBlockKey)
+                    && !handledKeys.contains(currentBlockKey)) {
                 mergedLines.add(userEntries.get(currentBlockKey));
                 handledKeys.add(currentBlockKey);
             } else if (!handledKeys.contains(currentBlockKey)) {
@@ -152,8 +154,6 @@ public class ConfigInitializer
         return mergedLines;
     }
 
-
-
     private static List<String> cleanInvalidYamlEntries(List<String> lines) {
         List<String> cleanedLines = new ArrayList<>();
         for (int i = 0; i < lines.size(); i++) {
diff --git a/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java b/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java
index b472622b5..b483ba109 100644
--- a/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java
+++ b/src/main/java/stirling/software/SPDF/config/security/InitialSecuritySetup.java
@@ -85,6 +85,7 @@ public class InitialSecuritySetup {
         // Write back to the file
         Files.write(path, lines);
     }
+
     private boolean isValidUUID(String uuid) {
         if (uuid == null) {
             return false;
@@ -96,5 +97,4 @@ public class InitialSecuritySetup {
             return false;
         }
     }
-    
 }
diff --git a/src/main/java/stirling/software/SPDF/config/security/UserBasedRateLimitingFilter.java b/src/main/java/stirling/software/SPDF/config/security/UserBasedRateLimitingFilter.java
index 7b3b9b4ee..b4b88d25e 100644
--- a/src/main/java/stirling/software/SPDF/config/security/UserBasedRateLimitingFilter.java
+++ b/src/main/java/stirling/software/SPDF/config/security/UserBasedRateLimitingFilter.java
@@ -20,6 +20,7 @@ import io.github.bucket4j.Bandwidth;
 import io.github.bucket4j.Bucket;
 import io.github.bucket4j.ConsumptionProbe;
 import io.github.bucket4j.Refill;
+import io.github.pixee.security.Newlines;
 
 import jakarta.servlet.FilterChain;
 import jakarta.servlet.ServletException;
@@ -125,12 +126,16 @@ public class UserBasedRateLimitingFilter extends OncePerRequestFilter {
         ConsumptionProbe probe = userBucket.tryConsumeAndReturnRemaining(1);
 
         if (probe.isConsumed()) {
-            response.setHeader("X-Rate-Limit-Remaining", Long.toString(probe.getRemainingTokens()));
+            response.setHeader(
+                    "X-Rate-Limit-Remaining",
+                    Newlines.stripAll(Long.toString(probe.getRemainingTokens())));
             filterChain.doFilter(request, response);
         } else {
             long waitForRefill = probe.getNanosToWaitForRefill() / 1_000_000_000;
             response.setStatus(HttpStatus.TOO_MANY_REQUESTS.value());
-            response.setHeader("X-Rate-Limit-Retry-After-Seconds", String.valueOf(waitForRefill));
+            response.setHeader(
+                    "X-Rate-Limit-Retry-After-Seconds",
+                    Newlines.stripAll(String.valueOf(waitForRefill)));
             response.getWriter().write("Rate limit exceeded for POST requests.");
         }
     }
diff --git a/src/main/java/stirling/software/SPDF/controller/api/converters/ConvertImgPDFController.java b/src/main/java/stirling/software/SPDF/controller/api/converters/ConvertImgPDFController.java
index 9fa357f78..3f880a807 100644
--- a/src/main/java/stirling/software/SPDF/controller/api/converters/ConvertImgPDFController.java
+++ b/src/main/java/stirling/software/SPDF/controller/api/converters/ConvertImgPDFController.java
@@ -36,7 +36,7 @@ public class ConvertImgPDFController {
             description =
                     "This endpoint converts a PDF file to image(s) with the specified image format, color type, and DPI. Users can choose to get a single image or multiple images.  Input:PDF Output:Image Type:SI-Conditional")
     public ResponseEntity<byte[]> convertToImage(@ModelAttribute ConvertToImageRequest request)
-            throws IOException {
+            throws NumberFormatException, Exception {
         MultipartFile file = request.getFileInput();
         String imageFormat = request.getImageFormat();
         String singleOrMultiple = request.getSingleOrMultiple();
@@ -56,23 +56,20 @@ public class ConvertImgPDFController {
         String filename =
                 Filenames.toSimpleFileName(file.getOriginalFilename())
                         .replaceFirst("[.][^.]+$", "");
-        try {
-            result =
-                    PdfUtils.convertFromPdf(
-                            pdfBytes,
-                            imageFormat.toUpperCase(),
-                            colorTypeResult,
-                            singleImage,
-                            Integer.valueOf(dpi),
-                            filename);
-        } catch (IOException e) {
-            // TODO Auto-generated catch block
-            e.printStackTrace();
-        } catch (Exception e) {
-            // TODO Auto-generated catch block
-            e.printStackTrace();
-        }
+        
+        result =
+                PdfUtils.convertFromPdf(
+                        pdfBytes,
+                        imageFormat.toUpperCase(),
+                        colorTypeResult,
+                        singleImage,
+                        Integer.valueOf(dpi),
+                        filename);
+        
 
+        if(result == null || result.length == 0) {
+        	logger.error("resultant bytes for {} is null, error converting ", filename);
+        }
         if (singleImage) {
             String docName = filename + "." + imageFormat;
             MediaType mediaType = MediaType.parseMediaType(getMediaType(imageFormat));
diff --git a/src/main/java/stirling/software/SPDF/controller/api/misc/FlattenController.java b/src/main/java/stirling/software/SPDF/controller/api/misc/FlattenController.java
new file mode 100644
index 000000000..bdc0a4784
--- /dev/null
+++ b/src/main/java/stirling/software/SPDF/controller/api/misc/FlattenController.java
@@ -0,0 +1,84 @@
+package stirling.software.SPDF.controller.api.misc;
+
+import java.awt.image.BufferedImage;
+import java.io.IOException;
+
+import org.apache.pdfbox.Loader;
+import org.apache.pdfbox.pdmodel.PDDocument;
+import org.apache.pdfbox.pdmodel.PDPage;
+import org.apache.pdfbox.pdmodel.PDPageContentStream;
+import org.apache.pdfbox.pdmodel.graphics.image.JPEGFactory;
+import org.apache.pdfbox.pdmodel.graphics.image.PDImageXObject;
+import org.apache.pdfbox.pdmodel.interactive.form.PDAcroForm;
+import org.apache.pdfbox.rendering.ImageType;
+import org.apache.pdfbox.rendering.PDFRenderer;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import io.github.pixee.security.Filenames;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+
+import stirling.software.SPDF.model.PdfMetadata;
+import stirling.software.SPDF.model.api.misc.FlattenRequest;
+import stirling.software.SPDF.utils.PdfUtils;
+import stirling.software.SPDF.utils.WebResponseUtils;
+
+@RestController
+@RequestMapping("/api/v1/misc")
+@Tag(name = "Misc", description = "Miscellaneous APIs")
+public class FlattenController {
+
+    @PostMapping(consumes = "multipart/form-data", value = "/flatten")
+    @Operation(
+            summary = "Flatten PDF form fields or full page",
+            description =
+                    "Flattening just PDF form fields or converting each page to images to make text unselectable. Input: PDF, Output: PDF. Type: SISO")
+    public ResponseEntity<byte[]> flatten(@ModelAttribute FlattenRequest request) throws Exception {
+        MultipartFile file = request.getFileInput();
+
+        PDDocument document = Loader.loadPDF(file.getBytes());
+        PdfMetadata metadata = PdfUtils.extractMetadataFromPdf(document);
+        Boolean flattenOnlyForms = request.getFlattenOnlyForms();
+
+        if (Boolean.TRUE.equals(flattenOnlyForms)) {
+            PDAcroForm acroForm = document.getDocumentCatalog().getAcroForm();
+            if (acroForm != null) {
+                acroForm.flatten();
+            }
+            return WebResponseUtils.pdfDocToWebResponse(
+                    document, Filenames.toSimpleFileName(file.getOriginalFilename()));
+        } else {
+            // flatten whole page aka convert each page to image and readd it (making text
+            // unselectable)
+            PDFRenderer pdfRenderer = new PDFRenderer(document);
+            PDDocument newDocument = new PDDocument();
+            int numPages = document.getNumberOfPages();
+            for (int i = 0; i < numPages; i++) {
+                try {
+                    BufferedImage image = pdfRenderer.renderImageWithDPI(i, 300, ImageType.RGB);
+                    PDPage page = new PDPage();
+                    page.setMediaBox(document.getPage(i).getMediaBox());
+                    newDocument.addPage(page);
+                    try (PDPageContentStream contentStream =
+                            new PDPageContentStream(newDocument, page)) {
+                        PDImageXObject pdImage = JPEGFactory.createFromImage(newDocument, image);
+                        float pageWidth = page.getMediaBox().getWidth();
+                        float pageHeight = page.getMediaBox().getHeight();
+
+                        contentStream.drawImage(pdImage, 0, 0, pageWidth, pageHeight);
+                    }
+                } catch (IOException e) {
+                    e.printStackTrace();
+                }
+            }
+            PdfUtils.setMetadataToPdf(newDocument, metadata);
+            return WebResponseUtils.pdfDocToWebResponse(
+                    newDocument, Filenames.toSimpleFileName(file.getOriginalFilename()));
+        }
+    }
+}
diff --git a/src/main/java/stirling/software/SPDF/model/api/misc/FlattenRequest.java b/src/main/java/stirling/software/SPDF/model/api/misc/FlattenRequest.java
new file mode 100644
index 000000000..c87d19745
--- /dev/null
+++ b/src/main/java/stirling/software/SPDF/model/api/misc/FlattenRequest.java
@@ -0,0 +1,17 @@
+package stirling.software.SPDF.model.api.misc;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import stirling.software.SPDF.model.api.PDFFile;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+public class FlattenRequest extends PDFFile {
+
+    @Schema(
+            description =
+                    "True to flatten only the forms, false to flatten full PDF (Convert page to image)")
+    private Boolean flattenOnlyForms;
+}
diff --git a/src/main/java/stirling/software/SPDF/utils/ProcessExecutor.java b/src/main/java/stirling/software/SPDF/utils/ProcessExecutor.java
index c8eb75175..93fdbd54b 100644
--- a/src/main/java/stirling/software/SPDF/utils/ProcessExecutor.java
+++ b/src/main/java/stirling/software/SPDF/utils/ProcessExecutor.java
@@ -58,10 +58,10 @@ public class ProcessExecutor {
                     long timeoutMinutes =
                             switch (key) {
                                 case LIBRE_OFFICE -> 30;
-                                case PDFTOHTML -> 5;
+                                case PDFTOHTML -> 20;
                                 case OCR_MY_PDF -> 30;
                                 case PYTHON_OPENCV -> 30;
-                                case GHOSTSCRIPT -> 5;
+                                case GHOSTSCRIPT -> 30;
                                 case WEASYPRINT -> 30;
                                 case INSTALL_APP -> 60;
                                 case CALIBRE -> 30;
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 1a5d14389..a5f12e646 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -24,8 +24,8 @@ spring.devtools.livereload.enabled=true
 
 spring.thymeleaf.encoding=UTF-8
 
-server.connection-timeout=${SYSTEM_CONNECTIONTIMEOUTMINUTES:5m}
-spring.mvc.async.request-timeout=${SYSTEM_CONNECTIONTIMEOUTMILLISECONDS:300000}
+server.connection-timeout=${SYSTEM_CONNECTIONTIMEOUTMINUTES:20m}
+spring.mvc.async.request-timeout=${SYSTEM_CONNECTIONTIMEOUTMILLISECONDS:1200000}
 
 spring.resources.static-locations=file:customFiles/static/
 #spring.thymeleaf.prefix=file:/customFiles/templates/,classpath:/templates/
diff --git a/src/main/resources/messages_ar_AR.properties b/src/main/resources/messages_ar_AR.properties
index c11023469..175ee6071 100644
--- a/src/main/resources/messages_ar_AR.properties
+++ b/src/main/resources/messages_ar_AR.properties
@@ -69,7 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
-
+info=Info
 
 
 ###############
@@ -102,12 +102,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=تحويل
-navbar.security=الأمان
-navbar.other=أخرى
+navbar.favorite=Favorites
 navbar.darkmode=الوضع الداكن
-navbar.pageOps=عمليات الصفحة
+navbar.language=Languages
 navbar.settings=إعدادات
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +700,7 @@ repair.submit=الإصلاح
 #flatten
 flatten.title=تسطيح
 flatten.header=تسوية ملفات PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=تسطيح
 
 
@@ -741,6 +748,7 @@ extractImages.submit=استخراج
 fileToPDF.title=ملف إلى PDF
 fileToPDF.header=تحويل أي ملف إلى PDF
 fileToPDF.credit=تستخدم هذه الخدمة ليبر أوفيس وأونوكونف لتحويل الملفات.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=يجب أن تتضمن أنواع الملفات المدعومة ما يلي ولكن للحصول على قائمة محدثة كاملة بالتنسيقات المدعومة ، يرجى الرجوع إلى وثائق LibreOffice
 fileToPDF.submit=تحويل إلى PDF
 
@@ -793,7 +801,7 @@ pdfOrganiser.placeholder=(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)
 #multiTool
 multiTool.title=أداة متعددة PDF
 multiTool.header=أداة متعددة PDF
-multiTool.uploadPrompts=Please Upload PDF
+multiTool.uploadPrompts=File Name
 
 #view pdf
 viewPdf.title=View PDF
diff --git a/src/main/resources/messages_bg_BG.properties b/src/main/resources/messages_bg_BG.properties
index 865522f62..60fb5220a 100644
--- a/src/main/resources/messages_bg_BG.properties
+++ b/src/main/resources/messages_bg_BG.properties
@@ -11,17 +11,17 @@ imgPrompt=Изберете изображение(я)
 genericSubmit=Подайте
 processTimeWarning=Предупреждение: Този процес може да отнеме до минута в зависимост от размера на файла
 pageOrderPrompt=Персонализиран ред на страниците (Въведете разделен със запетаи списък с номера на страници или функции като 2n+1):
-pageSelectionPrompt=Custom Page Selection (Enter a comma-separated list of page numbers 1,5,6 or Functions like 2n+1) :
+pageSelectionPrompt=Персонализиран избор на страница (Въведете списък с номера на страници 1,5,6, разделени със запетая, или функции като 2n+1) :
 goToPage=Давай
 true=Вярно
 false=Невярно
 unknown=Непознат
 save=Съхранете
-saveToBrowser=Save to Browser
+saveToBrowser=Съхраняване в браузъра
 close=Затворете
 filesSelected=избрани файлове
 noFavourites=Няма добавени любими
-downloadComplete=Download Complete
+downloadComplete=Свалянето завършено
 bored=Отекчени сте да чакате?
 alphabet=Азбука
 downloadPdf=Изтеглете PDF
@@ -45,56 +45,58 @@ red=Червено
 green=Зелено
 blue=Синьо
 custom=Персонализиране...
-WorkInProgess=Work in progress, May not work or be buggy, Please report any problems!
-poweredBy=Powered by
-yes=Yes
-no=No
+WorkInProgess=Работата е в ход, може да не работи или да има грешки, моля, докладвайте за проблеми!
+poweredBy=Задвижван чрез
+yes=Да
+no=Не
 changedCredsMessage=Идентификационните данни са променени!
 notAuthenticatedMessage=Потребителят не е автентикиран.
 userNotFoundMessage=Потребителят не е намерен
 incorrectPasswordMessage=Текущата парола е неправилна.
 usernameExistsMessage=Новият потребител вече съществува.
-invalidUsernameMessage=Invalid username, Username must only contain alphabet characters and numbers.
-deleteCurrentUserMessage=Cannot delete currently logged in user.
-deleteUsernameExistsMessage=The username does not exist and cannot be deleted.
+invalidUsernameMessage=Невалидно потребителско име, потребителското име трябва да съдържа само букви и цифри.
+deleteCurrentUserMessage=Не може да се изтрие вписания в момента потребител.
+deleteUsernameExistsMessage=Потребителското име не съществува и не може да бъде изтрито.
 downgradeCurrentUserMessage=Не може да се понижи ролята на текущия потребител
 downgradeCurrentUserLongMessage=Не може да се понижи ролята на текущия потребител. Следователно текущият потребител няма да бъде показан.
-error=Error
-oops=Oops!
-help=Help
-goHomepage=Go to Homepage
-joinDiscord=Join our Discord server
-seeDockerHub=See Docker Hub
-visitGithub=Visit Github Repository
-donate=Donate
-color=Color
-sponsor=Sponsor
+error=Грешка
+oops=Опаа!
+help=Помощ
+goHomepage=Отидете на началната страница
+joinDiscord=Присъединете се към нашия Discord сървър
+seeDockerHub=Погледнете Docker Hub
+visitGithub=Посетете Github Repository
+donate=Направете дарение
+color=Цвят
+sponsor=Спонсор
+info=Info
+
 
 
 
 ###############
 #   Pipeline  #
 ###############
-pipeline.header=Pipeline Menu (Beta)
-pipeline.uploadButton=Upload Custom
-pipeline.configureButton=Configure
-pipeline.defaultOption=Custom
-pipeline.submitButton=Submit
-pipeline.help=Pipeline Help
-pipeline.scanHelp=Folder Scanning Help
+pipeline.header=Pipeline Меню (Бета)
+pipeline.uploadButton=Качване на персонализиран
+pipeline.configureButton=Настройка
+pipeline.defaultOption=Персонализиран
+pipeline.submitButton=Подайте
+pipeline.help=Pipeline Помощ
+pipeline.scanHelp=Помощ за сканиране на папки
 
 ######################
 #  Pipeline Options  #
 ######################
-pipelineOptions.header=Pipeline Configuration
-pipelineOptions.pipelineNameLabel=Pipeline Name
-pipelineOptions.saveSettings=Save Operation Settings
-pipelineOptions.pipelineNamePrompt=Enter pipeline name here
-pipelineOptions.selectOperation=Select Operation
-pipelineOptions.addOperationButton=Add operation
+pipelineOptions.header=Pipeline Конфигурация
+pipelineOptions.pipelineNameLabel=Pipeline име
+pipelineOptions.saveSettings=Запазете настройките за работа
+pipelineOptions.pipelineNamePrompt=Въведете името на pipeline тук
+pipelineOptions.selectOperation=Избор на операция
+pipelineOptions.addOperationButton=Добавяне на операция
 pipelineOptions.pipelineHeader=Pipeline:
-pipelineOptions.saveButton=Download
-pipelineOptions.validateButton=Validate
+pipelineOptions.saveButton=Изтегли
+pipelineOptions.validateButton=Валидирай
 
 
 
@@ -102,19 +104,25 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Преобразуване
-navbar.security=Сигурност
-navbar.other=Разни
+navbar.favorite=Favorites
 navbar.darkmode=Тъмна тема
-navbar.pageOps=Операции със страници
+navbar.language=Languages
 navbar.settings=Настройки
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
 #############
 settings.title=Настройки
 settings.update=Налична актуализация
-settings.updateAvailable={0} is the current installed version. A new version ({1}) is available.
+settings.updateAvailable={0} е текущата инсталирана версия. Налична е нова версия ({1}).
 settings.appVersion=Версия на приложението:
 settings.downloadOption.title=Изберете опция за изтегляне (за изтегляния на един файл без да е архивиран):
 settings.downloadOption.1=Отваряне в същия прозорец
@@ -123,13 +131,13 @@ settings.downloadOption.3=Изтегли файл
 settings.zipThreshold=Архивирайте файловете, когато броят на изтеглените файлове надвишава
 settings.signOut=Изход
 settings.accountSettings=Настройки на акаунта
-settings.bored.help=Enables easter egg game
-settings.cacheInputs.name=Save form inputs
-settings.cacheInputs.help=Enable to store previously used inputs for future runs
+settings.bored.help=Активира игра с великденски яйца
+settings.cacheInputs.name=Запазете въведените формуляри
+settings.cacheInputs.help=Активирайте за съхраняване на предишни използвани въведени данни за бъдещи изпълнения
 
 changeCreds.title=Промяна на идентификационните данни
 changeCreds.header=Актуализирайте данните за акаунта си
-changeCreds.changePassword=You are using default login credentials. Please enter a new password
+changeCreds.changePassword=Използвате идентификационни данни за вход по подразбиране. Моля, въведете нова парола
 changeCreds.newUsername=Ново потребителско име
 changeCreds.oldPassword=Текуща парола
 changeCreds.newPassword=Нова парола
@@ -155,8 +163,8 @@ account.syncTitle=Синхронизиране на настройките на
 account.settingsCompare=Сравняване на настройките:
 account.property=Свойство
 account.webBrowserSettings=Уеб-браузър настройки
-account.syncToBrowser=Синхронизиране на акаунт -> Бразър
-account.syncToAccount=Синхронизиране на акаунт <- Бразър
+account.syncToBrowser=Синхронизиране на акаунт -> Браузър
+account.syncToAccount=Синхронизиране на акаунт <- Браузър
 
 
 adminUserSettings.title=Настройки за потребителски контрол
@@ -164,15 +172,15 @@ adminUserSettings.header=Настройки за администраторск
 adminUserSettings.admin=Администратор
 adminUserSettings.user=Потребител
 adminUserSettings.addUser=Добавяне на нов потребител
-adminUserSettings.usernameInfo=Username must only contain letters and numbers, no spaces or special characters.
+adminUserSettings.usernameInfo=Потребителското име трябва да съдържа само букви и цифри, без интервали или специални знаци.
 adminUserSettings.roles=Роли
 adminUserSettings.role=Роля
 adminUserSettings.actions=Действия
 adminUserSettings.apiUser=Ограничен API потребител
-adminUserSettings.extraApiUser=Additional Limited API User
+adminUserSettings.extraApiUser=Допълнителен ограничен API потребител
 adminUserSettings.webOnlyUser=Само за уеб-потребител
-adminUserSettings.demoUser=Demo User (No custom settings)
-adminUserSettings.internalApiUser=Internal API User
+adminUserSettings.demoUser=Демо потребител (без персонализирани настройки)
+adminUserSettings.internalApiUser=Вътрешен API потребител
 adminUserSettings.forceChange=Принудете потребителя да промени потребителското име/парола при влизане
 adminUserSettings.submit=Съхранете потребителя
 adminUserSettings.changeUserRole=Промяна на ролята на потребителя
@@ -181,12 +189,12 @@ adminUserSettings.changeUserRole=Промяна на ролята на потр
 # HOME-PAGE #
 #############
 home.desc=Вашето локално хоствано обслужване на едно място за всички ваши PDF нужди.
-home.searchBar=Search for features...
+home.searchBar=Търсене на функции...
 
 
-home.viewPdf.title=View PDF
-home.viewPdf.desc=View, annotate, add text or images
-viewPdf.tags=view,read,annotate,text,image
+home.viewPdf.title=Преглед на PDF
+home.viewPdf.desc=Преглеждайте, коментирайте, добавяйте текст или изображения
+viewPdf.tags=преглед,четене,анотиране,текст,изображение
 
 home.multiTool.title=PDF Мулти инструмент
 home.multiTool.desc=Обединяване, завъртане, пренареждане и премахване на страници
@@ -257,7 +265,7 @@ home.fileToPDF.desc=Преобразуване почти всеки файл к
 fileToPDF.tags=трансформация,формат,документ,изображение,слайд,текст,преобразуване,офис,документи,word,excel,powerpoint
 
 home.ocr.title=OCR / Почистващи сканирания
-home.ocr.desc=Cleanup сканира и открива текст от изображения към PDF и го добавя отново като текст.
+home.ocr.desc=Почистване, сканира и открива текст от изображения към PDF и го добавя отново като текст.
 ocr.tags=разпознаване,текст,изображение,сканиране,четене,идентифициране,откриване,редактиране
 
 
@@ -310,9 +318,9 @@ home.removeBlanks.title=Премахване на празни страници
 home.removeBlanks.desc=Открива и премахва празни страници от документ
 removeBlanks.tags=почистване,рационализиране,без съдържание,организиране
 
-home.removeAnnotations.title=Remove Annotations
-home.removeAnnotations.desc=Removes all comments/annotations from a PDF
-removeAnnotations.tags=comments,highlight,notes,markup,remove
+home.removeAnnotations.title=Премахване на анотации
+home.removeAnnotations.desc=Премахва всички коментари/анотации от PDF
+removeAnnotations.tags=коментари, маркиране, бележки, маркиране, премахване
 
 home.compare.title=Сравнете
 home.compare.desc=Сравнява и показва разликите между 2 PDF документа
@@ -354,7 +362,7 @@ home.autoSplitPDF.title=Автоматично разделяне на стра
 home.autoSplitPDF.desc=Автоматично разделяне на сканиран PDF файл с QR код за разделяне на физически сканирани страници
 autoSplitPDF.tags=QR-базиран,отделен,сканиране-сегмент,организиране
 
-home.sanitizePdf.title=Дезинфекцирай
+home.sanitizePdf.title=Дезинфенкцирам
 home.sanitizePdf.desc=Премахване на скриптове и други елементи от PDF файлове
 sanitizePdf.tags=чисти,сигурни,безопасни,премахване-заплахи
 
@@ -396,35 +404,35 @@ home.autoRedact.desc=Автоматично редактира (зачерняв
 autoRedact.tags=Редактиране,Скриване,затъмняване,черен,маркер,скрит
 
 home.tableExtraxt.title=PDF to CSV
-home.tableExtraxt.desc=Extracts Tables from a PDF converting it to CSV
-tableExtraxt.tags=CSV,Table Extraction,extract,convert
+home.tableExtraxt.desc=Извлича таблици от PDF, като ги конвертира в CSV
+tableExtraxt.tags=CSV,извличане на таблица,извличане,конвертиране
 
 
-home.autoSizeSplitPDF.title=Auto Split by Size/Count
-home.autoSizeSplitPDF.desc=Split a single PDF into multiple documents based on size, page count, or document count
-autoSizeSplitPDF.tags=pdf,split,document,organization
+home.autoSizeSplitPDF.title=Автоматично разделяне по размер/брой
+home.autoSizeSplitPDF.desc=Разделете един PDF на множество документи въз основа на размер, брой страници или брой документи
+autoSizeSplitPDF.tags=pdf,разделяне,документ,организация
 
 
-home.overlay-pdfs.title=Overlay PDFs
-home.overlay-pdfs.desc=Overlays PDFs on-top of another PDF
-overlay-pdfs.tags=Overlay
+home.overlay-pdfs.title=Наслагване PDF-и
+home.overlay-pdfs.desc=Наслагва PDF файлове върху друг PDF
+overlay-pdfs.tags=Наслагване
 
-home.split-by-sections.title=Split PDF by Sections
-home.split-by-sections.desc=Divide each page of a PDF into smaller horizontal and vertical sections
-split-by-sections.tags=Section Split, Divide, Customize
+home.split-by-sections.title=Разделяне на PDF по секции
+home.split-by-sections.desc=Разделете всяка страница от PDF на по-малки хоризонтални и вертикални секции
+split-by-sections.tags=Разделяне на секция,Разделяне,Персонализиране
 
-home.AddStampRequest.title=Add Stamp to PDF
-home.AddStampRequest.desc=Add text or add image stamps at set locations
-AddStampRequest.tags=Stamp, Add image, center image, Watermark, PDF, Embed, Customize
+home.AddStampRequest.title=Добавяне на печат към PDF
+home.AddStampRequest.desc=Добавете текст или добавете печати с изображения на определени места
+AddStampRequest.tags=Печат,добавяне на изображение,централно изображение,воден знак,PDF,вграждане,персонализиране
 
 
-home.PDFToBook.title=PDF to Book
-home.PDFToBook.desc=Converts PDF to Book/Comic formats using calibre
-PDFToBook.tags=Book,Comic,Calibre,Convert,manga,amazon,kindle
+home.PDFToBook.title=PDF към книга
+home.PDFToBook.desc=Преобразува PDF във формати на книги/комикси с помощта на calibre
+PDFToBook.tags=Книга,комикс,calibre,конвертиране,манга,Amazon,Kindle
 
-home.BookToPDF.title=Book to PDF
-home.BookToPDF.desc=Converts Books/Comics formats to PDF using calibre
-BookToPDF.tags=Book,Comic,Calibre,Convert,manga,amazon,kindle
+home.BookToPDF.title=Книга към PDF
+home.BookToPDF.desc=Преобразува формати на книги/комикси в PDF с помощта на calibre
+BookToPDF.tags=Книга,комикс,calibre,конвертиране,манга,Amazon,Kindle
 
 
 ###########################
@@ -471,9 +479,9 @@ pdfToSinglePage.submit=Преобразуване към единична стр
 
 
 #pageExtracter
-pageExtracter.title=Extract Pages
-pageExtracter.header=Extract Pages
-pageExtracter.submit=Extract
+pageExtracter.title=Извличане на страници
+pageExtracter.header=Извличане на страници
+pageExtracter.submit=Извличане
 pageExtracter.placeholder=(e.g. 1,2,8 or 4,7,12-16 or 2n-1)
 
 
@@ -503,40 +511,40 @@ URLToPDF.credit=Използва WeasyPrint
 #html-to-pdf
 HTMLToPDF.title=HTML към PDF
 HTMLToPDF.header=HTML към PDF
-HTMLToPDF.help=Приема HTML файлове и ZIP файлове, съдържащи html/css/изображения и т.н
+HTMLToPDF.help=Приемане на HTML файлове и ZIP файлове, съдържащи html/css/изображения и т.н.
 HTMLToPDF.submit=Преобразуване
 HTMLToPDF.credit=Използва WeasyPrint
-HTMLToPDF.zoom=Zoom level for displaying the website.
-HTMLToPDF.pageWidth=Width of the page in centimeters. (Blank to default)
-HTMLToPDF.pageHeight=Height of the page in centimeters. (Blank to default)
-HTMLToPDF.marginTop=Top margin of the page in millimeters. (Blank to default)
-HTMLToPDF.marginBottom=Bottom margin of the page in millimeters. (Blank to default)
-HTMLToPDF.marginLeft=Left margin of the page in millimeters. (Blank to default)
-HTMLToPDF.marginRight=Right margin of the page in millimeters. (Blank to default)
-HTMLToPDF.printBackground=Render the background of websites.
-HTMLToPDF.defaultHeader=Enable Default Header (Name and page number)
-HTMLToPDF.cssMediaType=Change the CSS media type of the page.
-HTMLToPDF.none=None
-HTMLToPDF.print=Print
-HTMLToPDF.screen=Screen
+HTMLToPDF.zoom=Ниво на мащабиране за показване на уебсайта.
+HTMLToPDF.pageWidth=Ширина на страницата в сантиметри. (Празно по подразбиране)
+HTMLToPDF.pageHeight=Височина на страницата в сантиметри. (Празно по подразбиране)
+HTMLToPDF.marginTop=Горно поле на страницата в милиметри. (Празно по подразбиране)
+HTMLToPDF.marginBottom=Долно поле на страницата в милиметри. (Празно по подразбиране)
+HTMLToPDF.marginLeft=Ляво поле на страницата в милиметри. (Празно по подразбиране)
+HTMLToPDF.marginRight=Дясно поле на страницата в милиметри. (Празно по подразбиране)
+HTMLToPDF.printBackground=Изобразете фона на уебсайтове.
+HTMLToPDF.defaultHeader=Активиране на горния колонтитул по подразбиране (име и номер на страница)
+HTMLToPDF.cssMediaType=Променете CSS медийния тип на страницата.
+HTMLToPDF.none=Няма
+HTMLToPDF.print=Печат
+HTMLToPDF.screen=Екран
 
 
 #AddStampRequest
-AddStampRequest.header=Stamp PDF
-AddStampRequest.title=Stamp PDF
-AddStampRequest.stampType=Stamp Type
-AddStampRequest.stampText=Stamp Text
-AddStampRequest.stampImage=Stamp Image
-AddStampRequest.alphabet=Alphabet
-AddStampRequest.fontSize=Font/Image Size
-AddStampRequest.rotation=Rotation
-AddStampRequest.opacity=Opacity
-AddStampRequest.position=Position
-AddStampRequest.overrideX=Override X Coordinate
-AddStampRequest.overrideY=Override Y Coordinate
-AddStampRequest.customMargin=Custom Margin
-AddStampRequest.customColor=Custom Text Color
-AddStampRequest.submit=Submit
+AddStampRequest.header=Поставяне на печат на PDF
+AddStampRequest.title=Поставяне на печат на PDF
+AddStampRequest.stampType=Тип печат
+AddStampRequest.stampText=Поставяне на текст
+AddStampRequest.stampImage=Изображение с печат
+AddStampRequest.alphabet=Азбука
+AddStampRequest.fontSize=Размер на шрифта/изображението
+AddStampRequest.rotation=Ротация
+AddStampRequest.opacity=Непрозрачност
+AddStampRequest.position=Позиция
+AddStampRequest.overrideX=Замяна на X координата
+AddStampRequest.overrideY=Замяна на Y координата
+AddStampRequest.customMargin=Персонализиран марж
+AddStampRequest.customColor=Персонализиран цвят на текста
+AddStampRequest.submit=Изпращане
 
 
 #sanitizePDF
@@ -625,11 +633,11 @@ scalePages.submit=Подайте
 certSign.title=Подписване на сертификат
 certSign.header=Подпишете PDF с вашия сертификат (В процес на работа)
 certSign.selectPDF=Изберете PDF файл за подписване:
-certSign.jksNote=Note: If your certificate type is not listed below, please convert it to a Java Keystore (.jks) file using the keytool command line tool. Then, choose the .jks file option below.
+certSign.jksNote=Забележка: Ако вашият тип сертификат не е в списъка по-долу, моля, конвертирайте го във файл на Java Keystore (.jks) с помощта на инструмента за команден ред keytool. След това изберете опцията за .jks файл по-долу.
 certSign.selectKey=Изберете вашия файл с личен ключ (формат PKCS#8, може да бъде .pem или .der):
 certSign.selectCert=Изберете вашия файл със сертификат (формат X.509, може да бъде .pem или .der):
 certSign.selectP12=Изберете вашия PKCS#12 Keystore файл (.p12 или .pfx) (По избор, ако е предоставен, трябва да съдържа вашия личен ключ и сертификат):
-certSign.selectJKS=Select Your Java Keystore File (.jks or .keystore):
+certSign.selectJKS=Изберете Вашия Java Keystore Файл (.jks или .keystore):
 certSign.certType=Тип сертификат
 certSign.password=Въведете вашата парола за Keystore за ключове или частен ключ (ако има):
 certSign.showSig=Показване на подпис
@@ -650,9 +658,9 @@ removeBlanks.submit=Премахване на празни места
 
 
 #removeAnnotations
-removeAnnotations.title=Remove Annotations
-removeAnnotations.header=Remove Annotations
-removeAnnotations.submit=Remove
+removeAnnotations.title=Премахване на анотации
+removeAnnotations.header=Премахване на анотации
+removeAnnotations.submit=Премахване
 
 
 #compare
@@ -663,17 +671,17 @@ compare.document.2=Документ 2
 compare.submit=Сравнявай
 
 #BookToPDF
-BookToPDF.title=Books and Comics to PDF
-BookToPDF.header=Book to PDF
-BookToPDF.credit=Uses Calibre
-BookToPDF.submit=Convert
+BookToPDF.title=Книги и комикси в PDF
+BookToPDF.header=Книга в PDF
+BookToPDF.credit=Използва Calibre
+BookToPDF.submit=Конвертиране
 
 #PDFToBook
-PDFToBook.title=PDF to Book
-PDFToBook.header=PDF to Book
-PDFToBook.selectText.1=Format
-PDFToBook.credit=Uses Calibre
-PDFToBook.submit=Convert
+PDFToBook.title=PDF към книга
+PDFToBook.header=PDF към книга
+PDFToBook.selectText.1=Формат
+PDFToBook.credit=Използва Calibre
+PDFToBook.submit=Конвертиране
 
 #sign
 sign.title=Подпишете
@@ -694,6 +702,7 @@ repair.submit=Поправи
 #flatten
 flatten.title=Изравнете
 flatten.header=Изравнете PDF-и
+flatten.flattenOnlyForms=Изравнете само форми
 flatten.submit=Изравнете
 
 
@@ -741,6 +750,7 @@ extractImages.submit=Извличане
 fileToPDF.title=Файл към PDF
 fileToPDF.header=Конвертирайте всеки файл към PDF
 fileToPDF.credit=Тази услуга използва LibreOffice и Unoconv за преобразуване на файлове.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Поддържаните типове файлове трябва да включват по-долу, но за пълен актуализиран списък на поддържаните формати, моля, вижте документацията на LibreOffice
 fileToPDF.submit=Преобразуване към PDF
 
@@ -753,7 +763,7 @@ compress.selectText.1=Ръчен режим - От 1 до 4
 compress.selectText.2=Ниво на оптимизация:
 compress.selectText.3=4 (Ужасно за текстови изображения)
 compress.selectText.4=Автоматичен режим - Автоматично настройва качеството, за да получи PDF точен размер
-compress.selectText.5=Очакван PDF размер (напр. 25MB, 10.8MB, 25KB)
+compress.selectText.5=Очакван PDF размер (напр. 25МБ, 10.8МБ, 25КБ)
 compress.submit=Компресиране
 
 
@@ -777,27 +787,28 @@ merge.submit=Обединяване
 pdfOrganiser.title=Организатор на страници
 pdfOrganiser.header=Организатор на PDF страници
 pdfOrganiser.submit=Пренареждане на страниците
-pdfOrganiser.mode=Mode
-pdfOrganiser.mode.1=Custom Page Order
-pdfOrganiser.mode.2=Reverse Order
-pdfOrganiser.mode.3=Duplex Sort
-pdfOrganiser.mode.4=Booklet Sort
-pdfOrganiser.mode.5=Side Stitch Booklet Sort
-pdfOrganiser.mode.6=Odd-Even Split
-pdfOrganiser.mode.7=Remove First
-pdfOrganiser.mode.8=Remove Last
-pdfOrganiser.mode.9=Remove First and Last
-pdfOrganiser.placeholder=(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)
+pdfOrganiser.mode=Режим
+pdfOrganiser.mode.1=Персонализиран ред на страниците
+pdfOrganiser.mode.2=Обърнат ред
+pdfOrganiser.mode.3=Двустранно сортиране
+pdfOrganiser.mode.4=Сортиране на брошури
+pdfOrganiser.mode.5=Сортиране на брошури със страничен шев
+pdfOrganiser.mode.6=Четно-нечетно разделяне
+pdfOrganiser.mode.7=Премахни първо
+pdfOrganiser.mode.8=Премахване на последния
+pdfOrganiser.mode.9=Премахване на първия и последния
+pdfOrganiser.placeholder=(напр. 1,3,2 или 4-8,2,10-12 или 2n-1)
 
 
 #multiTool
 multiTool.title=PDF Мулти инструмент
 multiTool.header=PDF Мулти инструмент
-multiTool.uploadPrompts=Please Upload PDF
+multiTool.uploadPrompts=File Name
+
 
 #view pdf
-viewPdf.title=View PDF
-viewPdf.header=View PDF
+viewPdf.title=Преглед на PDF
+viewPdf.header=Преглед на PDF
 
 #pageRemover
 pageRemover.title=Премахване на страници
@@ -945,8 +956,8 @@ pdfToPDFA.title=PDF към PDF/A
 pdfToPDFA.header=PDF към PDF/A
 pdfToPDFA.credit=Тази услуга използва OCRmyPDF за PDF/A преобразуване.
 pdfToPDFA.submit=Преобразуване
-pdfToPDFA.tip=Currently does not work for multiple inputs at once
-pdfToPDFA.outputFormat=Output format
+pdfToPDFA.tip=В момента не работи за няколко входа наведнъж
+pdfToPDFA.outputFormat=Изходен формат
 
 
 #PDFToWord
@@ -989,75 +1000,75 @@ PDFToXML.submit=Преобразуване
 #PDFToCSV
 PDFToCSV.title=PDF ??? CSV
 PDFToCSV.header=PDF ??? CSV
-PDFToCSV.prompt=Choose page to extract table
-PDFToCSV.submit=????????
+PDFToCSV.prompt=Изберете страница за извличане на таблица
+PDFToCSV.submit=????
 
 #split-by-size-or-count
-split-by-size-or-count.title=Split PDF by Size or Count
-split-by-size-or-count.header=Split PDF by Size or Count
-split-by-size-or-count.type.label=Select Split Type
-split-by-size-or-count.type.size=By Size
-split-by-size-or-count.type.pageCount=By Page Count
-split-by-size-or-count.type.docCount=By Document Count
-split-by-size-or-count.value.label=Enter Value
-split-by-size-or-count.value.placeholder=Enter size (e.g., 2MB or 3KB) or count (e.g., 5)
-split-by-size-or-count.submit=Submit
+split-by-size-or-count.title=Разделяне на PDF по размер или брой
+split-by-size-or-count.header=Разделяне на PDF по размер или брой
+split-by-size-or-count.type.label=Изберете тип разделяне
+split-by-size-or-count.type.size=По размер
+split-by-size-or-count.type.pageCount=По брой страници
+split-by-size-or-count.type.docCount=По брой документи
+split-by-size-or-count.value.label=Въведете стойност
+split-by-size-or-count.value.placeholder=Въведете размер (напр. 2МБ или 3КБ) или брой (напр. 5)
+split-by-size-or-count.submit=Изпращане
 
 
 #overlay-pdfs
-overlay-pdfs.header=Overlay PDF Files
-overlay-pdfs.baseFile.label=Select Base PDF File
-overlay-pdfs.overlayFiles.label=Select Overlay PDF Files
-overlay-pdfs.mode.label=Select Overlay Mode
-overlay-pdfs.mode.sequential=Sequential Overlay
-overlay-pdfs.mode.interleaved=Interleaved Overlay
-overlay-pdfs.mode.fixedRepeat=Fixed Repeat Overlay
-overlay-pdfs.counts.label=Overlay Counts (for Fixed Repeat Mode)
-overlay-pdfs.counts.placeholder=Enter comma-separated counts (e.g., 2,3,1)
-overlay-pdfs.position.label=Select Overlay Position
-overlay-pdfs.position.foreground=Foreground
-overlay-pdfs.position.background=Background
-overlay-pdfs.submit=Submit
+overlay-pdfs.header=Наслагване на PDF файлове
+overlay-pdfs.baseFile.label=Изберете Основен PDF файл
+overlay-pdfs.overlayFiles.label=Изберете наслагване на PDF файлове
+overlay-pdfs.mode.label=Изберете режим на наслагване
+overlay-pdfs.mode.sequential=Последователно наслагване
+overlay-pdfs.mode.interleaved=Преплетено наслагване
+overlay-pdfs.mode.fixedRepeat=Фиксирано наслагване при повторение
+overlay-pdfs.counts.label=Брой наслагвания (за режим на фиксирано повторение)
+overlay-pdfs.counts.placeholder=Въведете броя, разделени със запетая (напр. 2,3,1)
+overlay-pdfs.position.label=Изберете позиция на наслагване
+overlay-pdfs.position.foreground=Преден план
+overlay-pdfs.position.background=Фон
+overlay-pdfs.submit=Изпращане
 
 
 #split-by-sections
-split-by-sections.title=Split PDF by Sections
-split-by-sections.header=Split PDF into Sections
-split-by-sections.horizontal.label=Horizontal Divisions
-split-by-sections.vertical.label=Vertical Divisions
-split-by-sections.horizontal.placeholder=Enter number of horizontal divisions
-split-by-sections.vertical.placeholder=Enter number of vertical divisions
-split-by-sections.submit=Split PDF
-split-by-sections.merge=Merge Into One PDF
+split-by-sections.title=Разделяне на PDF по секции
+split-by-sections.header=Разделяне на PDF на секции
+split-by-sections.horizontal.label=Хоризонтални разделения
+split-by-sections.vertical.label=Вертикални разделения
+split-by-sections.horizontal.placeholder=Въведете брой хоризонтални деления
+split-by-sections.vertical.placeholder=Въведете брой вертикални деления
+split-by-sections.submit=Разделяне на PDF
+split-by-sections.merge=Сливане в един PDF
 
 
 #printFile
-printFile.title=Print File
-printFile.header=Print File to Printer
-printFile.selectText.1=Select File to Print
-printFile.selectText.2=Enter Printer Name
-printFile.submit=Print
+printFile.title=Печат на файл
+printFile.header=Печат на файл на принтер
+printFile.selectText.1=Изберете файл за печат
+printFile.selectText.2=Въведете име на принтер
+printFile.submit=Печат
 
 
 #licenses
-licenses.nav=Licenses
-licenses.title=3rd Party Licenses
-licenses.header=3rd Party Licenses
-licenses.module=Module
-licenses.version=Version
-licenses.license=License
+licenses.nav=Лицензи
+licenses.title=Лицензи на трети страни
+licenses.header=Лицензи на трети страни
+licenses.module=Модул
+licenses.version=Версия
+licenses.license=Лиценз
 
 
 # error
-error.sorry=Sorry for the issue!
-error.needHelp=Need help / Found an issue?
-error.contactTip=If you're still having trouble, don't hesitate to reach out to us for help. You can submit a ticket on our GitHub page or contact us through Discord:
-error.404.head=404 - Page Not Found | Oops, we tripped in the code!
-error.404.1=We can't seem to find the page you're looking for.
-error.404.2=Something went wrong
-error.github=Submit a ticket on GitHub
-error.showStack=Show Stack Trace
-error.copyStack=Copy Stack Trace
-error.githubSubmit=GitHub - Submit a ticket
-error.discordSubmit=Discord - Submit Support post
+error.sorry=Извинете за проблема!
+error.needHelp=Нуждаете се от помощ / Открихте проблем?
+error.contactTip=Ако все още имате проблеми, не се колебайте да се свържете с нас за помощ. Можете да изпратите запитване на нашата страница в GitHub или да се свържете с нас чрез Discord:
+error.404.head=404 - Страницата не е намерена | Опа! Спънахме се в кода!
+error.404.1=Изглежда не можем да намерим страницата, която търсите.
+error.404.2=Нещо се обърка
+error.github=Изпратете запитване в GitHub
+error.showStack=Покажи проследяване на стека
+error.copyStack=Копиране на проследяване на стека
+error.githubSubmit=GitHub - Изпратете запитване
+error.discordSubmit=Discord - Изпратете запитване за поддръжка
 
diff --git a/src/main/resources/messages_ca_CA.properties b/src/main/resources/messages_ca_CA.properties
index c2e2e4761..9c4451a01 100644
--- a/src/main/resources/messages_ca_CA.properties
+++ b/src/main/resources/messages_ca_CA.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Converteix
-navbar.security=Seguretat
-navbar.other=Altres
+navbar.favorite=Favorites
 navbar.darkmode=Mode Fosc
-navbar.pageOps=Operacions de Pàgina
+navbar.language=Languages
 navbar.settings=Opcions
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Reparar
 #flatten
 flatten.title=Aplanar
 flatten.header=Aplana els PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Aplanar
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extreu
 fileToPDF.title=Arxiu a PDF
 fileToPDF.header=Converteix arxiu a PDF
 fileToPDF.credit=Utilitza LibreOffice i Unoconv per a la conversió.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Els tipus de fitxers admesos haurien d'incloure el següent, però per obtenir una llista completa actualitzada dels formats compatibles, consulteu la documentació de LibreOffice
 fileToPDF.submit=Converteix a PDF
 
diff --git a/src/main/resources/messages_de_DE.properties b/src/main/resources/messages_de_DE.properties
index a007f314d..19a82fce9 100644
--- a/src/main/resources/messages_de_DE.properties
+++ b/src/main/resources/messages_de_DE.properties
@@ -69,6 +69,7 @@ visitGithub=GitHub-Repository besuchen
 donate=Spenden
 color=Farbe
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validieren
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Konvertieren
-navbar.security=Sicherheit
-navbar.other=Anderes
+navbar.favorite=Favorites
 navbar.darkmode=Dunkler Modus
-navbar.pageOps=Seitenoperationen
+navbar.language=Languages
 navbar.settings=Einstellungen
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Reparieren
 #flatten
 flatten.title=Abflachen
 flatten.header=PDFs reduzieren
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Abflachen
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extrahieren
 fileToPDF.title=Datei in PDF
 fileToPDF.header=Beliebige Dateien in PDF konvertieren
 fileToPDF.credit=Dieser Dienst verwendet LibreOffice und Unoconv für die Dateikonvertierung.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Unterstützte Dateitypen sollten die folgenden enthalten, eine vollständige aktualisierte Liste der unterstützten Formate finden Sie jedoch in der LibreOffice-Dokumentation
 fileToPDF.submit=In PDF konvertieren
 
diff --git a/src/main/resources/messages_el_GR.properties b/src/main/resources/messages_el_GR.properties
index 08e5f3298..b093516fd 100644
--- a/src/main/resources/messages_el_GR.properties
+++ b/src/main/resources/messages_el_GR.properties
@@ -69,6 +69,7 @@ visitGithub=Επισκεφθείτε το Αποθετήριο του Github
 donate=Δωρισε
 color=Χρώμα
 sponsor=Yποστηρικτής
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Επικυρώνω
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Μετατροπή
-navbar.security=Ασφάλεια
-navbar.other=Διάφορα
+navbar.favorite=Favorites
 navbar.darkmode=Μαύρο Θέμα
-navbar.pageOps=Λειτουργίες σελίδας
+navbar.language=Languages
 navbar.settings=Ρυθμίσεις
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Επιδιόρθωση
 #flatten
 flatten.title=Flatten
 flatten.header=Flatten PDFs
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Flatten
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Εξαγωγή
 fileToPDF.title=Αρχείο σε PDF
 fileToPDF.header=Μετατροπή οποιουδήποτε αρχείου σε PDF
 fileToPDF.credit=Αυτή η υπηρεσία χρησιμοποιεί LibreOffice και Unoconv για την μετατροπή των αρχείων.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Οι υποστηριζόμενοι τύποι αρχείων θα πρέπει να περιλαμβάνουν τα παρακάτω, ωστόσο, για μια πλήρη ενημερωμένη λίστα με τις υποστηριζόμενες μορφές, ανατρέξτε στην τεκμηρίωση του LibreOffice
 fileToPDF.submit=Μετατροπή σε PDF
 
diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties
index ed3779cc1..aa0c4d690 100644
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Convert
-navbar.security=Security
-navbar.other=Miscellaneous
+navbar.favorite=Favorites
 navbar.darkmode=Dark Mode
-navbar.pageOps=Page Operations
+navbar.language=Languages
 navbar.settings=Settings
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -693,7 +700,8 @@ repair.submit=Repair
 
 #flatten
 flatten.title=Flatten
-flatten.header=Flatten PDFs
+flatten.header=Flatten PDF
+flatten.flattenOnlyForms=Flatten only forms 
 flatten.submit=Flatten
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extract
 fileToPDF.title=File to PDF
 fileToPDF.header=Convert any file to PDF
 fileToPDF.credit=This service uses LibreOffice and Unoconv for file conversion.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Supported file types should include the below however for a full updated list of supported formats, please refer to the LibreOffice documentation
 fileToPDF.submit=Convert to PDF
 
@@ -793,7 +802,7 @@ pdfOrganiser.placeholder=(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)
 #multiTool
 multiTool.title=PDF Multi Tool
 multiTool.header=PDF Multi Tool
-multiTool.uploadPrompts=Please Upload PDF
+multiTool.uploadPrompts=File Name
 
 #view pdf
 viewPdf.title=View PDF
diff --git a/src/main/resources/messages_en_US.properties b/src/main/resources/messages_en_US.properties
index df24e3a21..66c2b4bd8 100644
--- a/src/main/resources/messages_en_US.properties
+++ b/src/main/resources/messages_en_US.properties
@@ -69,7 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
-
+info=Info
 
 
 ###############
@@ -102,12 +102,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Convert
-navbar.security=Security
-navbar.other=Miscellaneous
+navbar.favorite=Favorites
 navbar.darkmode=Dark Mode
-navbar.pageOps=Page Operations
+navbar.language=Languages
 navbar.settings=Settings
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -330,7 +336,7 @@ home.scalePages.title=Adjust page size/scale
 home.scalePages.desc=Change the size/scale of a page and/or its contents.
 scalePages.tags=resize,modify,dimension,adapt
 
-home.pipeline.title=Pipeline (Advanced)
+home.pipeline.title=Pipeline
 home.pipeline.desc=Run multiple actions on PDFs by defining pipeline scripts
 pipeline.tags=automate,sequence,scripted,batch-process
 
@@ -382,7 +388,7 @@ home.extractPage.desc=Extracts select pages from PDF
 extractPage.tags=extract
 
 
-home.PdfToSinglePage.title=PDF to Single Large Page
+home.PdfToSinglePage.title=Single Large Page
 home.PdfToSinglePage.desc=Merges all PDF pages into one large single page
 PdfToSinglePage.tags=single page
 
@@ -694,6 +700,7 @@ repair.submit=Repair
 #flatten
 flatten.title=Flatten
 flatten.header=Flatten PDFs
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Flatten
 
 
@@ -741,6 +748,7 @@ extractImages.submit=Extract
 fileToPDF.title=File to PDF
 fileToPDF.header=Convert any file to PDF
 fileToPDF.credit=This service uses LibreOffice and Unoconv for file conversion.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Supported file types should include the below however for a full updated list of supported formats, please refer to the LibreOffice documentation
 fileToPDF.submit=Convert to PDF
 
@@ -793,7 +801,7 @@ pdfOrganiser.placeholder=(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)
 #multiTool
 multiTool.title=PDF Multi Tool
 multiTool.header=PDF Multi Tool
-multiTool.uploadPrompts=Please Upload PDF
+multiTool.uploadPrompts=File Name
 
 #view pdf
 viewPdf.title=View PDF
diff --git a/src/main/resources/messages_es_ES.properties b/src/main/resources/messages_es_ES.properties
index 96008bedc..4cb6360af 100644
--- a/src/main/resources/messages_es_ES.properties
+++ b/src/main/resources/messages_es_ES.properties
@@ -69,6 +69,10 @@ visitGithub=Visitar Repositorio de Github
 donate=Donar
 color=Color
 sponsor=Patrocinador
+info=Info
+
+
+
 
 
 
@@ -102,12 +106,18 @@ pipelineOptions.validateButton=Validar
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Convertir
-navbar.security=Seguridad
-navbar.other=Otro
+navbar.favorite=Favorites
 navbar.darkmode=Modo oscuro
-navbar.pageOps=Operaciones de página
+navbar.language=Languages
 navbar.settings=Configuración
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +704,7 @@ repair.submit=Reparar
 #flatten
 flatten.title=Aplanar
 flatten.header=Acoplar archivos PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Aplanar
 
 
@@ -741,6 +752,7 @@ extractImages.submit=Extraer
 fileToPDF.title=Archivo a PDF
 fileToPDF.header=Convertir cualquier archivo a PDF
 fileToPDF.credit=Este servicio usa LibreOffice y Unoconv para la conversión de archivos
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Los tipos de archivo soportados deben incluir los indicados a continuación; sin embargo, para una completa y acutualizada lista de formatos soportados, por favor consulte la documentación de LibreOffice
 fileToPDF.submit=Convertir a PDF
 
diff --git a/src/main/resources/messages_eu_ES.properties b/src/main/resources/messages_eu_ES.properties
index 5df9bc3de..285d41c57 100644
--- a/src/main/resources/messages_eu_ES.properties
+++ b/src/main/resources/messages_eu_ES.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Bihurtu
-navbar.security=Segurtasuna
-navbar.other=Beste bat
+navbar.favorite=Favorites
 navbar.darkmode=Modu iluna
-navbar.pageOps=Orrialde-eragiketak
+navbar.language=Languages
 navbar.settings=Ezarpenak
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Konpondu
 #flatten
 flatten.title=Lautu
 flatten.header=Akoplatu PDF fitxategiak
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Lautu
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Atera
 fileToPDF.title=Fitxategia PDF bihurtu
 fileToPDF.header=Edozein fitxategi PDF bihurtu
 fileToPDF.credit=Zerbitzu honek LibreOffice eta Unoconv erabiltzen ditu fitxategiak bihurtzeko
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Jasandako fitxategi-motek behekoak barne hartu behar dituzte; hala ere, jasandako formatuen zerrenda osoa eta eguneratua izateko, kontsultatu, mesedez, LibreOffice-en dokumentazioa
 fileToPDF.submit=PDF bihurtu
 
diff --git a/src/main/resources/messages_fr_FR.properties b/src/main/resources/messages_fr_FR.properties
index 6624b01ce..e3abadef5 100644
--- a/src/main/resources/messages_fr_FR.properties
+++ b/src/main/resources/messages_fr_FR.properties
@@ -69,7 +69,7 @@ visitGithub=Visiter le dépôt Github
 donate=Faire un don
 color=Couleur
 sponsor=Sponsor
-
+info=Info
 
 
 ###############
@@ -102,12 +102,18 @@ pipelineOptions.validateButton=Valider
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Convertir
-navbar.security=Sécurité
-navbar.other=Autre
+navbar.favorite=Favorites
 navbar.darkmode=Mode sombre
-navbar.pageOps=Opérations sur les pages
+navbar.language=Languages
 navbar.settings=Paramètres
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +700,7 @@ repair.submit=Réparer
 #flatten
 flatten.title=Rendre inerte
 flatten.header=Rendre inerte
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Rendre inerte
 
 
@@ -741,6 +748,7 @@ extractImages.submit=Extraire
 fileToPDF.title=Fichier en PDF
 fileToPDF.header=Convertir un fichier en PDF
 fileToPDF.credit=Ce service utilise LibreOffice et Unoconv pour la conversion de fichiers.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Les types de fichiers pris en charge doivent inclure les éléments ci-dessous, mais pour une liste complète et mise à jour des formats pris en charge, veuillez vous reporter à la documentation de LibreOffice.
 fileToPDF.submit=Convertir
 
diff --git a/src/main/resources/messages_hi_IN.properties b/src/main/resources/messages_hi_IN.properties
index 355ccb9e7..f91d49002 100644
--- a/src/main/resources/messages_hi_IN.properties
+++ b/src/main/resources/messages_hi_IN.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=कनवर्ट
-navbar.security=सुरक्षा
-navbar.other=विविध
+navbar.favorite=Favorites
 navbar.darkmode=डार्क मोड
-navbar.pageOps=पेज कार्य
+navbar.language=Languages
 navbar.settings=सेटिंग्स
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=मरम्मत
 #flatten
 flatten.title=समतल करें
 flatten.header=पीडीएफ़ समतल करें
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=समतल करें
 
 
@@ -741,6 +749,7 @@ extractImages.submit=निकालें
 fileToPDF.title=फ़ाइल से पीडीएफ़
 fileToPDF.header=किसी भी फ़ाइल को पीडीएफ़ में बदलें
 fileToPDF.credit=यह सेवा फ़ाइल परिवर्तन के लिए LibreOffice और Unoconv का उपयोग करती है।
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=समर्थित फ़ाइल प्रकार नीचे दिए गए होने चाहिए हालांकि समर्थित प्रारूपों की पूरी अद्यतन सूची के लिए कृपया LibreOffice दस्तावेज़ीकरण से संदर्भित करें
 fileToPDF.submit=पीडीएफ़ में बदलें
 
diff --git a/src/main/resources/messages_hu_HU.properties b/src/main/resources/messages_hu_HU.properties
index 3b2811d4b..e05a15983 100644
--- a/src/main/resources/messages_hu_HU.properties
+++ b/src/main/resources/messages_hu_HU.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Átalakítás
-navbar.security=Biztonság
-navbar.other=Egyéb
+navbar.favorite=Favorites
 navbar.darkmode=Sötét mód
-navbar.pageOps=Lap műveletek
+navbar.language=Languages
 navbar.settings=Beállítások
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Javítás
 #flatten
 flatten.title=Kiegyenlítés
 flatten.header=PDF-ek kiegyenlítése
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Kiegyenlítés
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Kinyerés
 fileToPDF.title=Fájl PDF dokumentummá alakítása
 fileToPDF.header=Konvertáljon bármilyen fájlt PDF dokumentummá
 fileToPDF.credit=Ez a szolgáltatás a LibreOffice-t és az Unoconv-ot használja a fájlkonverzióhoz.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=A funkció az alábbi fájltípusokat támogatja, azonban a teljesen friss támogatott formátumok listájáért kérjük, tekintse meg a LibreOffice dokumentációját
 fileToPDF.submit=Konvertálás PDF dokumentummá
 
diff --git a/src/main/resources/messages_id_ID.properties b/src/main/resources/messages_id_ID.properties
index 370b01ad6..9a8d04f65 100644
--- a/src/main/resources/messages_id_ID.properties
+++ b/src/main/resources/messages_id_ID.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Konversi
-navbar.security=Keamanan
-navbar.other=Lain-lain
+navbar.favorite=Favorites
 navbar.darkmode=Mode Gelap
-navbar.pageOps=Operasi Halaman
+navbar.language=Languages
 navbar.settings=Pengaturan
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Perbaiki
 #flatten
 flatten.title=Ratakan
 flatten.header=Ratakan PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Ratakan
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Ekstrak
 fileToPDF.title=Berkas ke PDF
 fileToPDF.header=Mengonversi berkas apa pun ke PDF
 fileToPDF.credit=Layanan ini menggunakan LibreOffice dan Unoconv untuk konversi berkas.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Jenis berkas yang didukung harus mencakup yang di bawah ini, namun untuk daftar lengkap format yang didukung, silakan lihat dokumentasi LibreOffice
 fileToPDF.submit=Konversi ke PDF
 
diff --git a/src/main/resources/messages_it_IT.properties b/src/main/resources/messages_it_IT.properties
index 6f3ce31be..775e70b77 100644
--- a/src/main/resources/messages_it_IT.properties
+++ b/src/main/resources/messages_it_IT.properties
@@ -69,6 +69,7 @@ visitGithub=Visita il repository Github
 donate=Donazione
 color=Colore
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,19 +103,25 @@ pipelineOptions.validateButton=Convalidare
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Converti
-navbar.security=Sicurezza
-navbar.other=Altro
+navbar.favorite=Favorites
 navbar.darkmode=Modalità Scura
-navbar.pageOps=Modifica pagine
+navbar.language=Languages
 navbar.settings=Impostazioni
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
 #############
 settings.title=Impostazioni
 settings.update=Aggiornamento disponibile
-settings.updateAvailable={0} is the current installed version. A new version ({1}) is available.
+settings.updateAvailable={0} è la versione attualmente installata. Una nuova versione ({1}) è disponibile.
 settings.appVersion=Versione App:
 settings.downloadOption.title=Scegli opzione di download (Per file singoli non compressi):
 settings.downloadOption.1=Apri in questa finestra
@@ -692,8 +699,9 @@ repair.submit=Ripara
 
 
 #flatten
-flatten.title=Appiattisci
+flatten.title=Appiattire
 flatten.header=Appiattisci PDF
+flatten.flattenOnlyForms=Appiattisci solo i moduli
 flatten.submit=Appiattisci
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Estrai
 fileToPDF.title=Converti file in PDF
 fileToPDF.header=Converti qualsiasi file in PDF
 fileToPDF.credit=Questo servizio utilizza LibreOffice e Unoconv per la conversione dei file.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=I formati file supportati dovrebbero includere quelli sottostanti. Tuttavia, per una lista aggiornata controlla la documentazione di LibreOffice
 fileToPDF.submit=Converti in PDF
 
diff --git a/src/main/resources/messages_ja_JP.properties b/src/main/resources/messages_ja_JP.properties
index febd561c8..7c210c59c 100644
--- a/src/main/resources/messages_ja_JP.properties
+++ b/src/main/resources/messages_ja_JP.properties
@@ -69,6 +69,7 @@ visitGithub=Githubリポジトリを訪問する
 donate=寄付する
 color=色
 sponsor=スポンサー
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=検証
 #############
 #  NAVBAR   #
 #############
-navbar.convert=変換
-navbar.security=セキュリティ
-navbar.other=その他
+navbar.favorite=Favorites
 navbar.darkmode=ダークモード
-navbar.pageOps=ページ操作
+navbar.language=Languages
 navbar.settings=設定
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=修復
 #flatten
 flatten.title=平坦化
 flatten.header=PDFを平坦化する
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=平坦化
 
 
@@ -741,6 +749,7 @@ extractImages.submit=抽出
 fileToPDF.title=ファイルをPDFに変換
 fileToPDF.header=あらゆるファイルをPDFに変換
 fileToPDF.credit=本サービスはファイル変換にLibreOfficeとUnoconvを使用しています。
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=サポートされるファイル形式には以下が含まれますが、完全な更新リストについてはLibreOfficeのドキュメントを参照してください。
 fileToPDF.submit=PDFを変換
 
diff --git a/src/main/resources/messages_ko_KR.properties b/src/main/resources/messages_ko_KR.properties
index e86044775..ddc77b393 100644
--- a/src/main/resources/messages_ko_KR.properties
+++ b/src/main/resources/messages_ko_KR.properties
@@ -57,6 +57,8 @@ usernameExistsMessage=새 사용자명이 이미 존재합니다.
 invalidUsernameMessage=사용자 이름이 잘못되었습니다. 사용자 이름에는 알파벳 문자와 숫자만 포함되어야 합니다.
 deleteCurrentUserMessage=현재 로그인한 사용자를 삭제할 수 없습니다.
 deleteUsernameExistsMessage=사용자 이름이 존재하지 않으며 삭제할 수 없습니다.
+
+info=Info
 downgradeCurrentUserMessage=현재 사용자의 역할을 다운그레이드할 수 없습니다
 downgradeCurrentUserLongMessage=현재 사용자의 역할을 다운그레이드할 수 없습니다. 따라서 현재 사용자는 표시되지 않습니다.
 error=오류
@@ -102,12 +104,18 @@ pipelineOptions.validateButton=확인
 #############
 #  NAVBAR   #
 #############
-navbar.convert=변환
-navbar.security=보안
-navbar.other=기타
+navbar.favorite=Favorites
 navbar.darkmode=다크 모드
-navbar.pageOps=페이지 편집
+navbar.language=Languages
 navbar.settings=설정
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +702,7 @@ repair.submit=복구
 #flatten
 flatten.title=평탄화
 flatten.header=PDF 문서의 레이어 평탄화
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=평탄화
 
 
@@ -741,6 +750,7 @@ extractImages.submit=추출
 fileToPDF.title=File to PDF
 fileToPDF.header=다양한 파일을 PDF로 변환
 fileToPDF.credit=이 서비스는 파일 변환에 LibreOffice와 Unoconv를 사용합니다.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=지원되는 파일 형식은 아래와 같습니다. 지원되는 형식의 전체 업데이트 목록은 LibreOffice 설명서를 참조합니다.
 fileToPDF.submit=PDF로 변환
 
diff --git a/src/main/resources/messages_nl_NL.properties b/src/main/resources/messages_nl_NL.properties
index 6ba6a7b3c..d4cbbcf0c 100644
--- a/src/main/resources/messages_nl_NL.properties
+++ b/src/main/resources/messages_nl_NL.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Valideren
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Converteren
-navbar.security=Beveiliging
-navbar.other=Overige
+navbar.favorite=Favorites
 navbar.darkmode=Donkere modus
-navbar.pageOps=Pagina bewerkingen
+navbar.language=Languages
 navbar.settings=Instellingen
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Repareren
 #flatten
 flatten.title=Afvlakken
 flatten.header=PDF's afvlakken
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Afvlakken
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extraheer
 fileToPDF.title=Bestand naar PDF
 fileToPDF.header=Zet elk bestand om naar PDF
 fileToPDF.credit=Deze service gebruikt LibreOffice en Unoconv voor bestandsconversie.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Ondersteunde bestandstypen zijn hieronder opgenomen, maar raadpleeg voor een volledige lijst met ondersteunde formaten de LibreOffice-documentatie
 fileToPDF.submit=Omzetten naar PDF
 
diff --git a/src/main/resources/messages_pl_PL.properties b/src/main/resources/messages_pl_PL.properties
index ee96d34f3..50c22dd74 100644
--- a/src/main/resources/messages_pl_PL.properties
+++ b/src/main/resources/messages_pl_PL.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Konwertuj
-navbar.security=Bezpieczeństwo
-navbar.other=Inne
+navbar.favorite=Favorites
 navbar.darkmode=Tryb nocny
-navbar.pageOps=Strony
+navbar.language=Languages
 navbar.settings=Ustawienia
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Napraw
 #flatten
 flatten.title=Spłaszcz
 flatten.header=Spłaszcz dokument(y) PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Spłaszcz
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Wyodrębnij
 fileToPDF.title=Plik na PDF
 fileToPDF.header=Konwertuj dowolny plik na dokument PDF
 fileToPDF.credit=Ta usługa używa LibreOffice i Unoconv do konwersji plików.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Obsługiwane typy plików powinny być zgodne z poniższymi, jednak pełną zaktualizowaną listę obsługiwanych formatów można znaleźć w dokumentacji LibreOffice
 fileToPDF.submit=Konwertuj na PDF
 
diff --git a/src/main/resources/messages_pt_BR.properties b/src/main/resources/messages_pt_BR.properties
index 715615e47..7a0299789 100644
--- a/src/main/resources/messages_pt_BR.properties
+++ b/src/main/resources/messages_pt_BR.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Converter
-navbar.security=Segurança
-navbar.other=Outro
+navbar.favorite=Favorites
 navbar.darkmode=Modo Escuro
-navbar.pageOps=Operações de página
+navbar.language=Languages
 navbar.settings=Configurações
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Reparar
 #flatten
 flatten.title=Achatar
 flatten.header=Achatar PDFs
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Achatar
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extrair
 fileToPDF.title=Arquivo para PDF
 fileToPDF.header=Converter Qualquer Arquivo para PDF
 fileToPDF.credit=Este serviço usa o LibreOffice e o Unoconv para conversão de arquivos.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Os tipos de arquivo suportados devem incluir os listados abaixo. No entanto, para obter uma lista atualizada completa dos formatos suportados, consulte a documentação do LibreOffice.
 fileToPDF.submit=Converter para PDF
 
diff --git a/src/main/resources/messages_pt_PT.properties b/src/main/resources/messages_pt_PT.properties
index 7a5541e26..f814f1a77 100644
--- a/src/main/resources/messages_pt_PT.properties
+++ b/src/main/resources/messages_pt_PT.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validar
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Converter
-navbar.security=Segurança
-navbar.other=Outro
+navbar.favorite=Favorites
 navbar.darkmode=Modo Escuro
-navbar.pageOps=Operações de página
+navbar.language=Languages
 navbar.settings=Configurações
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Reparar
 #flatten
 flatten.title=Achatar
 flatten.header=Achatar PDFs
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Achatar
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extrair
 fileToPDF.title=Ficheiro para PDF
 fileToPDF.header=Converter Qualquer ficheiro para PDF
 fileToPDF.credit=Este serviço usa o LibreOffice e o Unoconv para conversão de ficheiros.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Os tipos de ficheiro suportados devem incluir os listados abaixo. No entanto, para obter uma lista atualizada completa dos formatos suportados, consulte a documentação do LibreOffice.
 fileToPDF.submit=Converter para PDF
 
diff --git a/src/main/resources/messages_ro_RO.properties b/src/main/resources/messages_ro_RO.properties
index 55f5e3d93..382b1760d 100644
--- a/src/main/resources/messages_ro_RO.properties
+++ b/src/main/resources/messages_ro_RO.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Converteste
-navbar.security=Securitate
-navbar.other=Altele
+navbar.favorite=Favorites
 navbar.darkmode=Mod întunecat
-navbar.pageOps=Operații pe pagină
+navbar.language=Languages
 navbar.settings=Setări
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Repară
 #flatten
 flatten.title=Nivelare
 flatten.header=Nivelează documente PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Nivelează
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extrage
 fileToPDF.title=Fișier în PDF
 fileToPDF.header=Convertiți orice fișier în PDF
 fileToPDF.credit=Acest serviciu utilizează LibreOffice și Unoconv pentru conversia fișierelor.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Tipurile de fișiere suportate ar trebui să includă cele de mai jos. Pentru o listă completă și actualizată a formatelor suportate, consultați documentația LibreOffice.
 fileToPDF.submit=Convertiți în PDF
 
diff --git a/src/main/resources/messages_ru_RU.properties b/src/main/resources/messages_ru_RU.properties
index fc7f39650..38d51610c 100644
--- a/src/main/resources/messages_ru_RU.properties
+++ b/src/main/resources/messages_ru_RU.properties
@@ -57,6 +57,7 @@ usernameExistsMessage=Новое имя пользователя уже суще
 invalidUsernameMessage=Недопустимое имя пользователя, Имя пользователя должно содержать только буквы алфавита и цифры.
 deleteCurrentUserMessage=Невозможно удалить пользователя, вошедшего в систему.
 deleteUsernameExistsMessage=Имя пользователя не существует и не может быть удалено.
+info=Info
 downgradeCurrentUserMessage=Невозможно понизить роль текущего пользователя
 downgradeCurrentUserLongMessage=Невозможно понизить роль текущего пользователя. Следовательно, текущий пользователь не будет отображаться.
 error=Ошибка
@@ -72,6 +73,7 @@ sponsor=Спонсор
 
 
 
+
 ###############
 #   Pipeline  #
 ###############
@@ -102,12 +104,18 @@ pipelineOptions.validateButton=Проверить
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Конвертировать
-navbar.security=Безопасность
-navbar.other=Другое
+navbar.favorite=Favorites
 navbar.darkmode=Темный режим
-navbar.pageOps=Операции с страницей
+navbar.language=Languages
 navbar.settings=Настройки
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +702,7 @@ repair.submit=Ремонт
 #flatten
 flatten.title=Сглаживание
 flatten.header=Сглаживание PDF ов
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Сгладить
 
 
@@ -741,6 +750,7 @@ extractImages.submit=Извлечь
 fileToPDF.title=Файл в PDF
 fileToPDF.header=Конвертировать любой файл в PDF
 fileToPDF.credit=Этот сервис использует LibreOffice и Unoconv для преобразования файлов.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Поддерживаемые типы файлов должны включать приведенные ниже, однако полный обновленный список поддерживаемых форматов см. в документации LibreOffice.
 fileToPDF.submit=Преобразовать в PDF
 
diff --git a/src/main/resources/messages_sk_SK.properties b/src/main/resources/messages_sk_SK.properties
new file mode 100644
index 000000000..124f51f9d
--- /dev/null
+++ b/src/main/resources/messages_sk_SK.properties
@@ -0,0 +1,1064 @@
+###########
+# Generic #
+###########
+# the direction that the language is written (ltr=left to right, rtl = right to left)
+language.direction=ltr
+
+pdfPrompt=Vyberte PDF súbor(y)
+multiPdfPrompt=Vyberte PDF súbory (2+)
+multiPdfDropPrompt=Vyberte (alebo pretiahnite) všetky požadované PDF súbory
+imgPrompt=Vyberte obrázok(y)
+genericSubmit=Odoslať
+processTimeWarning=Varovanie: Tento proces môže trvať až minútu v závislosti od veľkosti súboru
+pageOrderPrompt=Vlastné poradie stránok (Zadajte zoznam čísel stránok oddelených čiarkou alebo funkcie ako 2n+1):
+pageSelectionPrompt=Vlastný výber stránok (Zadajte zoznam čísel stránok oddelených čiarkou 1,5,6 alebo funkcie ako 2n+1):
+goToPage=Choď
+true=Áno
+false=Nie
+unknown=Neznáme
+save=Uložiť
+saveToBrowser=Uložiť do prehliadača
+close=Zatvoriť
+filesSelected=vybrané súbory
+noFavourites=Žiadne obľúbené položky
+downloadComplete=Stiahnutie dokončené
+bored=Nudíte sa pri čakaní?
+alphabet=Abeceda
+downloadPdf=Stiahnuť PDF
+text=Text
+font=Font
+selectFillter=-- Vyberte --
+pageNum=Číslo stránky
+sizes.small=Malé
+sizes.medium=Stredné
+sizes.large=Veľké
+sizes.x-large=Veľmi veľké
+error.pdfPassword=PDF dokument je chránený heslom a buď heslo nebolo zadané, alebo bolo nesprávne
+delete=Vymazať
+username=Používateľské meno
+password=Heslo
+welcome=Vitajte
+property=Vlastnosť
+black=Čierna
+white=Biela
+red=Červená
+green=Zelená
+blue=Modrá
+custom=Vlastné...
+WorkInProgess=Práca prebieha, nemusí fungovať alebo môže byť chybová, prosím nahláste akékoľvek problémy!
+poweredBy=Poskytované
+yes=Áno
+no=Nie
+changedCredsMessage=Údaje zmenené!
+notAuthenticatedMessage=Používateľ nie je overený.
+userNotFoundMessage=Používateľ nebol nájdený.
+incorrectPasswordMessage=Aktuálne heslo je nesprávne.
+usernameExistsMessage=Nové používateľské meno už existuje.
+invalidUsernameMessage=Neplatné používateľské meno, používateľské meno musí obsahovať len abecedné znaky a čísla.
+deleteCurrentUserMessage=Nie je možné zmazať aktuálne prihláseného používateľa.
+deleteUsernameExistsMessage=Používateľské meno neexistuje a nemôže byť zmazané.
+downgradeCurrentUserMessage=Nie je možné znížiť rolu aktuálneho používateľa
+downgradeCurrentUserLongMessage=Nie je možné znížiť rolu aktuálneho používateľa. Preto, aktuálny používateľ nebude zobrazený.
+error=Chyba
+oops=Ups!
+help=Pomoc
+goHomepage=Prejsť na domovskú stránku
+joinDiscord=Pripojte sa na náš Discord server
+seeDockerHub=Pozrieť Docker Hub
+visitGithub=Navštíviť GitHub repozitár
+donate=Darovať
+color=Farba
+sponsor=Sponzorovať
+
+
+
+###############
+#   Pipeline  #
+###############
+pipeline.header=Menu pipeline (Beta)
+pipeline.uploadButton=Nahrať vlastný
+pipeline.configureButton=Konfigurovať
+pipeline.defaultOption=Vlastné
+pipeline.submitButton=Odoslať
+pipeline.help=Pomoc s pipeline
+pipeline.scanHelp=Pomoc so skenovaním priečinka
+
+######################
+#  Pipeline Options  #
+######################
+pipelineOptions.header=Konfigurácia pipeline
+pipelineOptions.pipelineNameLabel=Názov pipeline
+pipelineOptions.saveSettings=Uložiť nastavenia operácie
+pipelineOptions.pipelineNamePrompt=Zadajte názov pipeline tu
+pipelineOptions.selectOperation=Vybrať operáciu
+pipelineOptions.addOperationButton=Pridať operáciu
+pipelineOptions.pipelineHeader=Pipeline:
+pipelineOptions.saveButton=Stiahnuť
+pipelineOptions.validateButton=Overiť
+
+
+
+
+#############
+#  NAVBAR   #
+#############
+navbar.convert=Konvertovať
+navbar.security=Bezpečnosť
+navbar.other=Rôzne
+navbar.darkmode=Tmavý režim
+navbar.pageOps=Operácie so stránkami
+navbar.settings=Nastavenia
+
+#############
+#  SETTINGS #
+#############
+settings.title=Nastavenia
+settings.update=Dostupná aktualizácia
+settings.updateAvailable={0} je aktuálne nainštalovaná verzia. Nová verzia ({1}) je dostupná.
+settings.appVersion=Verzia aplikácie:
+settings.downloadOption.title=Vyberte možnosť sťahovania (Pre jednotlivé neskomprimované súbory):
+settings.downloadOption.1=Otvoriť v rovnakom okne
+settings.downloadOption.2=Otvoriť v novom okne
+settings.downloadOption.3=Stiahnuť súbor
+settings.zipThreshold=Komprimovať súbory, keď počet stiahnutých súborov prekročí
+settings.signOut=Odhlásiť sa
+settings.accountSettings=Nastavenia účtu
+settings.bored.help=Umožňuje veľkonočnú hru
+settings.cacheInputs.name=Uložiť vstupy formulára
+settings.cacheInputs.help=Umožňuje uložiť predtým použité vstupy na budúce použitie
+
+changeCreds.title=Zmeniť údaje
+changeCreds.header=Aktualizujte údaje svojho účtu
+changeCreds.changePassword=Používate predvolené prihlasovacie údaje. Prosím, zadajte nové heslo
+changeCreds.newUsername=Nové používateľské meno
+changeCreds.oldPassword=Aktuálne heslo
+changeCreds.newPassword=Nové heslo
+changeCreds.confirmNewPassword=Potvrďte nové heslo
+changeCreds.submit=Odoslať zmeny
+
+
+
+account.title=Nastavenia účtu
+account.accountSettings=Nastavenia účtu
+account.adminSettings=Admin nastavenia - Zobraziť a pridať používateľov
+account.userControlSettings=Nastavenia kontroly používateľov
+account.changeUsername=Zmeniť používateľské meno
+account.newUsername=Nové používateľské meno
+account.password=Potvrdzovacie heslo
+account.oldPassword=Staré heslo
+account.newPassword=Nové heslo
+account.changePassword=Zmeniť heslo
+account.confirmNewPassword=Potvrďte nové heslo
+account.signOut=Odhlásiť sa
+account.yourApiKey=Váš API kľúč
+account.syncTitle=Synchronizovať nastavenia prehliadača s účtom
+account.settingsCompare=Porovnanie nastavení:
+account.property=Vlastnosť
+account.webBrowserSettings=Nastavenie webového prehliadača
+account.syncToBrowser=Synchronizovať účet -> Prehliadač
+account.syncToAccount=Synchronizovať účet <- Prehliadač
+
+
+adminUserSettings.title=Nastavenia kontroly používateľov
+adminUserSettings.header=Admin nastavenia kontroly používateľov
+adminUserSettings.admin=Admin
+adminUserSettings.user=Používateľ
+adminUserSettings.addUser=Pridať nového používateľa
+adminUserSettings.usernameInfo=Používateľské meno musí obsahovať iba písmená a čísla, žiadne medzery alebo špeciálne znaky.
+adminUserSettings.roles=Role
+adminUserSettings.role=Rola
+adminUserSettings.actions=Akcie
+adminUserSettings.apiUser=Obmedzený API používateľ
+adminUserSettings.extraApiUser=Ďalší obmedzený API používateľ
+adminUserSettings.webOnlyUser=Používateľ iba pre web
+adminUserSettings.demoUser=Demo používateľ (Bez vlastných nastavení)
+adminUserSettings.internalApiUser=Interný API používateľ
+adminUserSettings.forceChange=Donútiť používateľa zmeniť heslo pri prihlásení
+adminUserSettings.submit=Uložiť používateľa
+adminUserSettings.changeUserRole=Zmeniť rolu používateľa
+
+#############
+# HOME-PAGE #
+#############
+home.desc=Vaša lokálne hostovaná jednorazová zástavka pre všetky potreby PDF.
+home.searchBar=Vyhľadať funkcie...
+
+
+home.viewPdf.title=Zobraziť PDF
+home.viewPdf.desc=Zobraziť, anotovať, pridať text alebo obrázky
+viewPdf.tags=zobraziť,čítať,anotovať,text,obrázok
+
+home.multiTool.title=PDF Multi Tool
+home.multiTool.desc=Zlúčiť, otočiť, preusporiadať a odstrániť stránky
+multiTool.tags=Multi Tool,Multi operácie,UI,klik drag,front end,beží na klientovi,interaktívne,intraktívne,posunúť
+
+home.merge.title=Zlúčiť
+home.merge.desc=Jednoducho zlúčte viacero PDF súborov do jedného.
+merge.tags=zlúčenie,operácie so stránkami,back end,beží na serveri
+
+home.split.title=Rozdeliť
+home.split.desc=Rozdeľte PDF súbory na viacero dokumentov
+split.tags=operácie so stránkami,rozdelenie,viacstranové,rozrezať,beží na serveri
+
+home.rotate.title=Otočiť
+home.rotate.desc=Jednoducho otáčajte svoje PDF súbory.
+rotate.tags=beží na serveri
+
+
+home.imageToPdf.title=Obrázok na PDF
+home.imageToPdf.desc=Konvertujte obrázok (PNG, JPEG, GIF) na PDF.
+imageToPdf.tags=konverzia,img,jpg,obrázok,fotografia
+
+home.pdfToImage.title=PDF na obrázok
+home.pdfToImage.desc=Konvertujte PDF na obrázok. (PNG, JPEG, GIF)
+pdfToImage.tags=konverzia,img,jpg,obrázok,fotografia
+
+home.pdfOrganiser.title=Organizovať
+home.pdfOrganiser.desc=Odstráňte/preusporiadajte stránky v ľubovoľnom poradí
+pdfOrganiser.tags=duplex,nepárne,párne,zoradiť,posunúť
+
+
+home.addImage.title=Pridať obrázok
+home.addImage.desc=Pridať obrázok na zadané miesto v PDF
+addImage.tags=img,jpg,obrázok,fotografia
+
+home.watermark.title=Pridať vodotlač
+home.watermark.desc=Pridať vlastnú vodotlač do vášho PDF dokumentu.
+watermark.tags=Text,opakujúci sa,označenie,vlastné,autorské práva,ochranná známka,img,jpg,obrázok,fotografia
+
+home.permissions.title=Zmeniť povolenia
+home.permissions.desc=Zmena povolení vášho PDF dokumentu
+permissions.tags=čítať,písať,upravovať,tlačiť
+
+
+home.removePages.title=Odstrániť
+home.removePages.desc=Odstrániť nechcené stránky z vášho PDF dokumentu.
+removePages.tags=Odstrániť stránky,vymazať stránky
+
+home.addPassword.title=Pridať heslo
+home.addPassword.desc=Šifrovať váš PDF dokument heslom.
+addPassword.tags=zaistiť,bezpečnosť
+
+home.removePassword.title=Odstrániť heslo
+home.removePassword.desc=Odstrániť ochranu heslom z vášho PDF dokumentu.
+removePassword.tags=zaistiť,Dešifrovať,bezpečnosť,odheslovať,vymazať heslo
+
+home.compressPdfs.title=Komprimovať
+home.compressPdfs.desc=Komprimujte PDF na zmenšenie jeho veľkosti.
+compressPdfs.tags=stlačiť,malé,drobné
+
+
+home.changeMetadata.title=Zmeniť metadáta
+home.changeMetadata.desc=Zmena/Odstránenie/Pridanie metadát z PDF dokumentu
+changeMetadata.tags=Názov,autor,dátum,vytvorenie,čas,vydavateľ,producent,štatistiky
+
+home.fileToPDF.title=Konvertovať súbor na PDF
+home.fileToPDF.desc=Konvertujte takmer akýkoľvek súbor na PDF (DOCX, PNG, XLS, PPT, TXT a ďalšie)
+fileToPDF.tags=transformácia,formát,dokument,obrázok,prezentácia,text,konverzia,kancelária,dokumenty,word,excel,powerpoint
+
+home.ocr.title=OCR / Čistenie skenov
+home.ocr.desc=Čistenie skenov a rozpoznanie textu z obrázkov v PDF a opätovné pridanie ako text.
+ocr.tags=rozpoznanie,text,obrázok,scan,čítať,identifikovať,detekcia,upraviteľné
+
+
+home.extractImages.title=Extrahovať obrázky
+home.extractImages.desc=Extrahuje všetky obrázky z PDF a uloží ich do zipu
+extractImages.tags=obrázok,fotografia,uložiť,archív,zip,zachytiť,chytiť
+
+home.pdfToPDFA.title=PDF na PDF/A
+home.pdfToPDFA.desc=Konvertujte PDF na PDF/A pre dlhodobé uchovávanie
+pdfToPDFA.tags=archív,dĺhodobé,štandard,konverzia,uchovanie
+
+home.PDFToWord.title=PDF na Word
+home.PDFToWord.desc=Konvertujte PDF na formáty Word (DOC, DOCX a ODT)
+PDFToWord.tags=doc,docx,odt,word,transformácia,formát,konverzia,kancelária,microsoft,dokument
+
+home.PDFToPresentation.title=PDF na Prezentáciu
+home.PDFToPresentation.desc=Konvertujte PDF na formáty prezentácie (PPT, PPTX a ODP)
+PDFToPresentation.tags=slajdy,prezentácia,kancelária,microsoft
+
+home.PDFToText.title=PDF na RTF (Text)
+home.PDFToText.desc=Konvertujte PDF na RTF alebo textový formát
+PDFToText.tags=bohatý formát,bohatý textový formát,bohatý text
+
+home.PDFToHTML.title=PDF na HTML
+home.PDFToHTML.desc=Konvertujte PDF na HTML formát
+PDFToHTML.tags=webový obsah,prehliadač priateľský
+
+
+home.PDFToXML.title=PDF na XML
+home.PDFToXML.desc=Konvertujte PDF na XML formát
+PDFToXML.tags=extrakcia dát,štruktúrovaný obsah,interop,transformácia,konvertovať
+
+home.ScannerImageSplit.title=Detekcia/Rozdelenie skenovaných fotografií
+home.ScannerImageSplit.desc=Rozdelí viacero fotografií v rámci fotografie/PDF
+ScannerImageSplit.tags=rozdeliť,auto-detekcia,skeny,viac-fotografií,organizovať
+
+home.sign.title=Podpísať
+home.sign.desc=Pridáva podpis do PDF kreslením, textom alebo obrázkom
+sign.tags=autorizovať,iniciály,kreslený podpis,textový podpis,obrázkový podpis
+
+home.flatten.title=Zploštiť
+home.flatten.desc=Odstrániť všetky interaktívne prvky a formuláre z PDF
+flatten.tags=statické,deaktivovať,neinteraktívne,zjednodušiť
+
+home.repair.title=Opraviť
+home.repair.desc=Skúša opraviť poškodené/rozbité PDF
+repair.tags=opraviť,obnoviť,oprava,obnovenie
+
+home.removeBlanks.title=Odstrániť prázdne stránky
+home.removeBlanks.desc=Detekuje a odstraňuje prázdne stránky z dokumentu
+removeBlanks.tags=čistenie,zjednodušiť,neobsah,organizovať
+
+home.removeAnnotations.title=Odstrániť anotácie
+home.removeAnnotations.desc=Odstraňuje všetky komentáre/anotácie z PDF
+removeAnnotations.tags=komentáre,zdôraznenie,poznámky,označenie,odstrániť
+
+home.compare.title=Porovnať
+home.compare.desc=Porovnáva a zobrazuje rozdiely medzi 2 PDF dokumentmi
+compare.tags=odlišovať,kontrast,zmeny,analýza
+
+home.certSign.title=Podpísať s certifikátom
+home.certSign.desc=Podpísať PDF s certifikátom/kľúčom (PEM/P12)
+certSign.tags=autentifikovať,PEM,P12,oficiálne,šifrovať
+
+home.pageLayout.title=Viacstranové usporiadanie
+home.pageLayout.desc=Zlúčte viacero stránok PDF dokumentu do jednej stránky
+pageLayout.tags=zlúčiť,zjednotiť,jednostranový pohľad,organizovať
+
+home.scalePages.title=Prispôsobiť veľkosť/škálovanie stránok
+home.scalePages.desc=Zmeniť veľkosť/škálovanie stránky a/alebo jej obsahu.
+scalePages.tags=veľkosť,modifikovať,rozmery,prispôsobiť
+
+home.pipeline.title=Pipeline (Pokročilé)
+home.pipeline.desc=Spustiť viacero akcií na PDF definovaním pipeline skriptov
+pipeline.tags=automatizovať,sekvencia,skriptované,dávkové spracovanie
+
+home.add-page-numbers.title=Pridať čísla stránok
+home.add-page-numbers.desc=Pridať čísla stránok po celom dokumente na určenom mieste
+add-page-numbers.tags=číslovať,označiť,organizovať,indexovať
+
+home.auto-rename.title=Automatické premenovanie PDF súboru
+home.auto-rename.desc=Automaticky premenuje PDF súbor na základe zisteného záhlavia
+auto-rename.tags=auto-detekcia, založené na záhlaví, organizovať, premenovať
+
+home.adjust-contrast.title=Upraviť farby/kontrast
+home.adjust-contrast.desc=Upravte kontrast, sýtosť a jas PDF
+adjust-contrast.tags=farbová korekcia, doladenie, upraviť, zlepšiť
+
+home.crop.title=Orezať PDF
+home.crop.desc=Orezať PDF na zmenšenie jeho veľkosti (zachováva text!)
+crop.tags=orezať, zmenšiť, upraviť, tvarovať
+
+home.autoSplitPDF.title=Automatické rozdelenie stránok
+home.autoSplitPDF.desc=Automatické rozdelenie skenovaného PDF pomocou fyzického skenovaného rozdeľovača stránok QR kódom
+autoSplitPDF.tags=QR-založené, rozdeľ, skenovanie-segment, organizovať
+
+home.sanitizePdf.title=Vyčistiť
+home.sanitizePdf.desc=Odstrániť skripty a ďalšie prvky z PDF súborov
+sanitizePdf.tags=čistiť, zabezpečiť, bezpečné, odstrániť hrozby
+
+home.URLToPDF.title=URL/Webstránka do PDF
+home.URLToPDF.desc=Konvertuje akúkoľvek http(s)URL do PDF
+URLToPDF.tags=webová snímka, uložiť stránku, web do dokumentu, archív
+
+home.HTMLToPDF.title=HTML do PDF
+home.HTMLToPDF.desc=Konvertuje akýkoľvek HTML súbor alebo zip do PDF
+HTMLToPDF.tags=markup, webový obsah, transformácia, konvertovať
+
+
+home.MarkdownToPDF.title=Markdown do PDF
+home.MarkdownToPDF.desc=Konvertuje akýkoľvek Markdown súbor do PDF
+MarkdownToPDF.tags=markup, webový obsah, transformácia, konvertovať
+
+
+home.getPdfInfo.title=Získať všetky informácie o PDF
+home.getPdfInfo.desc=Získava všetky dostupné informácie o PDF
+getPdfInfo.tags=informácie, údaje, štatistiky
+
+
+home.extractPage.title=Extrahovať stránku(y)
+home.extractPage.desc=Extrahuje vybrané stránky z PDF
+extractPage.tags=extrahovať
+
+
+home.PdfToSinglePage.title=PDF na jednu veľkú stránku
+home.PdfToSinglePage.desc=Zlúči všetky stránky PDF do jednej veľkej stránky
+PdfToSinglePage.tags=jedna stránka
+
+
+home.showJS.title=Zobraziť JavaScript
+home.showJS.desc=Vyhľadá a zobrazuje akýkoľvek JS vložený do PDF
+showJS.tags=JS
+
+home.autoRedact.title=Automatické redigovanie
+home.autoRedact.desc=Automaticky rediguje (zatieni) text v PDF na základe zadaného textu
+autoRedact.tags=redigovať, skryť, zatieniť, čierne, marker, skryté
+
+home.tableExtraxt.title=PDF do CSV
+home.tableExtraxt.desc=Extrahuje tabuľky z PDF a konvertuje ich do CSV
+tableExtraxt.tags=CSV, extrakcia tabuliek, extrahovať, konvertovať
+
+
+home.autoSizeSplitPDF.title=Automatické rozdelenie podľa veľkosti/počtu
+home.autoSizeSplitPDF.desc=Rozdelí jeden PDF na viacero dokumentov na základe veľkosti, počtu stránok alebo počtu dokumentov
+autoSizeSplitPDF.tags=pdf, rozdelenie, dokument, organizácia
+
+
+home.overlay-pdfs.title=Prekrývanie PDF
+home.overlay-pdfs.desc=Prekrýva PDF súbory na iný PDF
+overlay-pdfs.tags=prekrývanie
+
+home.split-by-sections.title=Rozdelenie PDF podľa sekcií
+home.split-by-sections.desc=Rozdelí každú stránku PDF na menšie horizontálne a vertikálne sekcie
+split-by-sections.tags=rozdelenie sekcií, rozdeliť, prispôsobiť
+
+home.AddStampRequest.title=Pridať pečiatku do PDF
+home.AddStampRequest.desc=Pridať text alebo obrázkové pečiatky na určené miesta
+AddStampRequest.tags=pečiatka, pridať obrázok, stred obrázka, vodotlač, PDF, vložiť, prispôsobiť
+
+
+home.PDFToBook.title=PDF do knihy
+home.PDFToBook.desc=Konvertuje PDF do formátov knihy/komiksu pomocou Calibre
+PDFToBook.tags=kniha, komiks, Calibre, konvertovať, manga, amazon, kindle
+
+home.BookToPDF.title=Kniha do PDF
+home.BookToPDF.desc=Konvertuje formáty kníh/komiksov do PDF pomocou Calibre
+BookToPDF.tags=kniha, komiks, Calibre, konvertovať, manga, amazon, kindle
+
+
+###########################
+#                         #
+#       WEB PAGES         #
+#                         #
+###########################
+#login
+login.title=Prihlásenie
+login.header=Prihlásenie
+login.signin=Prihlásiť sa
+login.rememberme=Zapamätať si ma
+login.invalid=Neplatné používateľské meno alebo heslo.
+login.locked=Váš účet bol uzamknutý.
+login.signinTitle=Prosím, prihláste sa
+login.ssoSignIn=Prihlásiť sa cez Single Sign-on
+login.oauth2AutoCreateDisabled=Vytváranie používateľa cez OAUTH2 je zakázané
+
+
+#auto-redact
+autoRedact.title=Automatické redigovanie
+autoRedact.header=Automatické redigovanie
+autoRedact.colorLabel=Farba
+autoRedact.textsToRedactLabel=Text na redigovanie (oddelený riadkami)
+autoRedact.textsToRedactPlaceholder=napr. \nDôverné \nPrísne tajné
+autoRedact.useRegexLabel=Použiť Regex
+autoRedact.wholeWordSearchLabel=Vyhľadávanie celých slov
+autoRedact.customPaddingLabel=Vlastné odsadenie
+autoRedact.convertPDFToImageLabel=Konvertovať PDF na PDF-Obrázok (Používa sa na odstránenie textu za boxom)
+autoRedact.submitButton=Odoslať
+
+
+#showJS
+showJS.title=Zobraziť JavaScript
+showJS.header=Zobraziť JavaScript
+showJS.downloadJS=Stiahnuť JavaScript
+showJS.submit=Zobraziť
+
+
+#pdfToSinglePage
+pdfToSinglePage.title=PDF na jednu stránku
+pdfToSinglePage.header=PDF na jednu stránku
+pdfToSinglePage.submit=Konvertovať na jednu stránku
+
+
+#pageExtracter
+pageExtracter.title=Extrahovať stránky
+pageExtracter.header=Extrahovať stránky
+pageExtracter.submit=Extrahovať
+pageExtracter.placeholder=(napr. 1,2,8 alebo 4,7,12-16 alebo 2n-1)
+
+
+#getPdfInfo
+getPdfInfo.title=Získať informácie o PDF
+getPdfInfo.header=Získať informácie o PDF
+getPdfInfo.submit=Získať info
+getPdfInfo.downloadJson=Stiahnuť JSON
+
+
+#markdown-to-pdf
+MarkdownToPDF.title=Markdown do PDF
+MarkdownToPDF.header=Markdown do PDF
+MarkdownToPDF.submit=Konvertovať
+MarkdownToPDF.help=Práca prebieha
+MarkdownToPDF.credit=Používa WeasyPrint
+
+
+
+#url-to-pdf
+URLToPDF.title=URL do PDF
+URLToPDF.header=URL do PDF
+URLToPDF.submit=Konvertovať
+URLToPDF.credit=Používa WeasyPrint
+
+
+#html-to-pdf
+HTMLToPDF.title=HTML do PDF
+HTMLToPDF.header=HTML do PDF
+HTMLToPDF.help=Akceptuje HTML súbory a ZIPy obsahujúce html/css/obrázky atď. potrebné
+HTMLToPDF.submit=Konvertovať
+HTMLToPDF.credit=Používa WeasyPrint
+HTMLToPDF.zoom=Úroveň priblíženia pre zobrazenie webstránky.
+HTMLToPDF.pageWidth=Šírka stránky v centimetroch. (Prázdne pre predvolené)
+HTMLToPDF.pageHeight=Výška stránky v centimetroch. (Prázdne pre predvolené)
+HTMLToPDF.marginTop=Horný okraj stránky v milimetroch. (Prázdne pre predvolené)
+HTMLToPDF.marginBottom=Dolný okraj stránky v milimetroch. (Prázdne pre predvolené)
+HTMLToPDF.marginLeft=Ľavý okraj stránky v milimetroch. (Prázdne pre predvolené)
+HTMLToPDF.marginRight=Pravý okraj stránky v milimetroch. (Prázdne pre predvolené)
+HTMLToPDF.printBackground=Vykresliť pozadie webstránok.
+HTMLToPDF.defaultHeader=Povoliť predvolené záhlavie (Názov a číslo stránky)
+HTMLToPDF.cssMediaType=Zmeniť typ CSS médií stránky.
+HTMLToPDF.none=Žiadne
+HTMLToPDF.print=Tlač
+HTMLToPDF.screen=Obrazovka
+
+
+#AddStampRequest
+AddStampRequest.header=Pečiatka PDF
+AddStampRequest.title=Pečiatka PDF
+AddStampRequest.stampType=Typ pečiatky
+AddStampRequest.stampText=Text pečiatky
+AddStampRequest.stampImage=Obrázok pečiatky
+AddStampRequest.alphabet=Abeceda
+AddStampRequest.fontSize=Veľkosť písma/obrázka
+AddStampRequest.rotation=Rotácia
+AddStampRequest.opacity=Priehľadnosť
+AddStampRequest.position=Poloha
+AddStampRequest.overrideX=Nahradiť súradnicu X
+AddStampRequest.overrideY=Nahradiť súradnicu Y
+AddStampRequest.customMargin=Vlastný okraj
+AddStampRequest.customColor=Vlastná farba textu
+AddStampRequest.submit=Odoslať
+
+
+#sanitizePDF
+sanitizePDF.title=Vyčistiť PDF
+sanitizePDF.header=Vyčistiť PDF súbor
+sanitizePDF.selectText.1=Odstrániť JavaScript akcie
+sanitizePDF.selectText.2=Odstrániť vložené súbory
+sanitizePDF.selectText.3=Odstrániť metadáta
+sanitizePDF.selectText.4=Odstrániť odkazy
+sanitizePDF.selectText.5=Odstrániť fonty
+sanitizePDF.submit=Vyčistiť PDF
+
+
+#addPageNumbers
+addPageNumbers.title=Pridať čísla stránok
+addPageNumbers.header=Pridať čísla stránok
+addPageNumbers.selectText.1=Vybrať PDF súbor:
+addPageNumbers.selectText.2=Veľkosť okraja
+addPageNumbers.selectText.3=Pozícia
+addPageNumbers.selectText.4=Počiatočné číslo
+addPageNumbers.selectText.5=Stránky na číslovanie
+addPageNumbers.selectText.6=Vlastný text
+addPageNumbers.customTextDesc=Vlastný text
+addPageNumbers.numberPagesDesc=Ktoré stránky číslovať, predvolené 'všetky', tiež akceptuje 1-5 alebo 2,5,9 atď.
+addPageNumbers.customNumberDesc=Predvolené {n}, tiež akceptuje 'Strana {n} z {total}', 'Text-{n}', '{filename}-{n}
+addPageNumbers.submit=Pridať čísla stránok
+
+
+#auto-rename
+auto-rename.title=Automatické premenovanie
+auto-rename.header=Automatické premenovanie PDF
+auto-rename.submit=Automaticky premenovať
+
+
+#adjustContrast
+adjustContrast.title=Upraviť kontrast
+adjustContrast.header=Upraviť kontrast
+adjustContrast.contrast=Kontrast:
+adjustContrast.brightness=Jas:
+adjustContrast.saturation=Sýtosť:
+adjustContrast.download=Stiahnuť
+
+
+#crop
+crop.title=Orezať
+crop.header=Orezať obrázok
+crop.submit=Odoslať
+
+
+#autoSplitPDF
+autoSplitPDF.title=Automatické rozdelenie PDF
+autoSplitPDF.header=Automatické rozdelenie PDF
+autoSplitPDF.description=Vytlačte, vložte, naskenujte, nahrajte a nechajte nás automaticky oddeliť vaše dokumenty. Žiadna manuálna práca nie je potrebná.
+autoSplitPDF.selectText.1=Vytlačte si niekoľko rozdeľovacích listov nižšie (Čierno-biele je v poriadku).
+autoSplitPDF.selectText.2=Naskenujte všetky svoje dokumenty naraz vložením rozdeľovacieho listu medzi ne.
+autoSplitPDF.selectText.3=Nahrajte jeden veľký naskenovaný PDF súbor a nechajte Stirling PDF urobiť zvyšok.
+autoSplitPDF.selectText.4=Rozdeľovacie stránky sú automaticky detekované a odstránené, čo zaručuje čistý konečný dokument.
+autoSplitPDF.formPrompt=Odoslať PDF obsahujúce Stirling-PDF rozdeľovače stránok:
+autoSplitPDF.duplexMode=Duplex režim (skanovanie prednej a zadnej strany)
+autoSplitPDF.dividerDownload1=Stiahnuť 'Auto Splitter Divider (minimálny).pdf'
+autoSplitPDF.dividerDownload2=Stiahnuť 'Auto Splitter Divider (s inštrukciami).pdf'
+autoSplitPDF.submit=Odoslať
+
+
+#pipeline
+pipeline.title=Pipeline
+
+
+#pageLayout
+pageLayout.title=Viacstranové usporiadanie
+pageLayout.header=Viacstranové usporiadanie
+pageLayout.pagesPerSheet=Stránky na list:
+pageLayout.addBorder=Pridať okraje
+pageLayout.submit=Odoslať
+
+
+#scalePages
+scalePages.title=Upraviť mierku stránky
+scalePages.header=Upraviť mierku stránky
+scalePages.pageSize=Veľkosť stránky dokumentu.
+scalePages.scaleFactor=Úroveň priblíženia (orezania) stránky.
+scalePages.submit=Odoslať
+
+
+#certSign
+certSign.title=Podpis certifikátom
+certSign.header=Podpísať PDF certifikátom (Práca prebieha)
+certSign.selectPDF=Vyberte PDF súbor na podpis:
+certSign.jksNote=Poznámka: Ak váš typ certifikátu nie je uvedený nižšie, prosím, konvertujte ho na Java Keystore (.jks) súbor pomocou nástroja keytool. Potom vyberte možnosť .jks súbor nižšie.
+certSign.selectKey=Vyberte váš súkromný kľúčový súbor (formát PKCS#8, môže byť .pem alebo .der):
+certSign.selectCert=Vyberte váš certifikátový súbor (formát X.509, môže byť .pem alebo .der):
+certSign.selectP12=Vyberte váš PKCS#12 Keystore súbor (.p12 alebo .pfx) (Voliteľné, ak je poskytnuté, malo by obsahovať váš súkromný kľúč a certifikát):
+certSign.selectJKS=Vyberte váš Java Keystore súbor (.jks alebo .keystore):
+certSign.certType=Typ certifikátu
+certSign.password=Zadajte heslo pre Keystore alebo súkromný kľúč (ak existuje):
+certSign.showSig=Zobraziť podpis
+certSign.reason=Dôvod
+certSign.location=Miesto
+certSign.name=Meno
+certSign.submit=Podpísať PDF
+
+
+#removeBlanks
+removeBlanks.title=Odstrániť prázdne stránky
+removeBlanks.header=Odstrániť prázdne stránky
+removeBlanks.threshold=Prahová hodnota bielych pixelov:
+removeBlanks.thresholdDesc=Prahová hodnota pre určenie, ako biely musí byť biely pixel, aby bol klasifikovaný ako 'biely'. 0 = čierny, 255 = čistá biela.
+removeBlanks.whitePercent=Percento bielych pixelov (%):
+removeBlanks.whitePercentDesc=Percento stránky, ktoré musí byť 'biele' pixely, aby bola odstránená
+removeBlanks.submit=Odstrániť prázdne stránky
+
+
+#removeAnnotations
+removeAnnotations.title=Odstrániť anotácie
+removeAnnotations.header=Odstrániť anotácie
+removeAnnotations.submit=Odstrániť
+
+
+#compare
+compare.title=Porovnať
+compare.header=Porovnať PDF
+compare.document.1=Dokument 1
+compare.document.2=Dokument 2
+compare.submit=Porovnať
+
+#BookToPDF
+BookToPDF.title=Knihy a komiksy do PDF
+BookToPDF.header=Kniha do PDF
+BookToPDF.credit=Používa Calibre
+BookToPDF.submit=Konvertovať
+
+#PDFToBook
+PDFToBook.title=PDF do knihy
+PDFToBook.header=PDF do knihy
+PDFToBook.selectText.1=Formát
+PDFToBook.credit=Používa Calibre
+PDFToBook.submit=Konvertovať
+
+#sign
+sign.title=Podpísať
+sign.header=Podpísať PDF
+sign.upload=Nahrať obrázok
+sign.draw=Kresliť podpis
+sign.text=Textový vstup
+sign.clear=Vymazať
+sign.add=Pridať
+
+
+#repair
+repair.title=Opraviť
+repair.header=Opraviť PDF
+repair.submit=Opraviť
+
+
+#flatten
+flatten.title=Zploštiť
+flatten.header=Zploštiť PDF
+flatten.flattenOnlyForms=Zploštiť iba formuláre
+flatten.submit=Zploštiť
+
+
+#ScannerImageSplit
+ScannerImageSplit.selectText.1=Prahová hodnota uhla:
+ScannerImageSplit.selectText.2=Nastaví minimálny absolútny uhol potrebný na otočenie obrázka (predvolené: 10).
+ScannerImageSplit.selectText.3=Tolerancia:
+ScannerImageSplit.selectText.4=Určuje rozsah farebnej variácie okolo odhadovanej farby pozadia (predvolené: 30).
+ScannerImageSplit.selectText.5=Minimálna plocha:
+ScannerImageSplit.selectText.6=Nastaví minimálnu prahovú hodnotu plochy pre fotografiu (predvolené: 10000).
+ScannerImageSplit.selectText.7=Minimálna plocha obrysu:
+ScannerImageSplit.selectText.8=Nastaví minimálnu prahovú hodnotu plochy obrysu pre fotografiu
+ScannerImageSplit.selectText.9=Veľkosť okraja:
+ScannerImageSplit.selectText.10=Nastaví veľkosť okraja pridaného a odstráneného, aby sa zabránilo bielym okrajom vo výstupe (predvolené: 1).
+
+
+#OCR
+ocr.title=OCR / Čistenie skenov
+ocr.header=Čistenie skenov / OCR (Optické rozpoznávanie znakov)
+ocr.selectText.1=Vyberte jazyky, ktoré majú byť detekované v PDF (Uvedené sú tie, ktoré sú aktuálne detekované):
+ocr.selectText.2=Vytvoriť textový súbor obsahujúci OCR text spolu s OCR PDF
+ocr.selectText.3=Opraviť stránky, ktoré boli naskenované pod uhlom, otočením späť na miesto
+ocr.selectText.4=Vyčistiť stránku, aby OCR menej pravdepodobne našlo text v šume pozadia. (Žiadna zmena výstupu)
+ocr.selectText.5=Vyčistiť stránku, aby OCR menej pravdepodobne našlo text v šume pozadia, zachováva čistenie vo výstupe.
+ocr.selectText.6=Ignoruje stránky, ktoré majú interaktívny text, OCR iba stránky, ktoré sú obrázky
+ocr.selectText.7=Vynútiť OCR, OCR každú stránku odstránením všetkých pôvodných textových prvkov
+ocr.selectText.8=Normálne (Chyba, ak PDF obsahuje text)
+ocr.selectText.9=Ďalšie nastavenia
+ocr.selectText.10=OCR režim
+ocr.selectText.11=Odstrániť obrázky po OCR (Odstráni VŠETKY obrázky, užitočné iba ak je súčasťou konverzného kroku)
+ocr.selectText.12=Typ vykreslenia (Pokročilé)
+ocr.help=Prosím, prečítajte si túto dokumentáciu o tom, ako používať OCR pre iné jazyky a/alebo použitie mimo docker
+ocr.credit=Táto služba používa OCRmyPDF a Tesseract pre OCR.
+ocr.submit=Spracovať PDF s OCR
+
+
+#extractImages
+extractImages.title=Extrahovať obrázky
+extractImages.header=Extrahovať obrázky
+extractImages.selectText=Vyberte formát obrázka na konverziu extrahovaných obrázkov
+extractImages.submit=Extrahovať
+
+
+#File to PDF
+fileToPDF.title=Súbor do PDF
+fileToPDF.header=Konvertovať akýkoľvek súbor do PDF
+fileToPDF.credit=Táto služba používa LibreOffice a Unoconv pre konverziu súborov.
+fileToPDF.supportedFileTypes=Podporované typy súborov by mali zahŕňať nižšie uvedené, avšak pre úplný aktualizovaný zoznam podporovaných formátov, prosím, odkazujte na dokumentáciu LibreOffice
+fileToPDF.submit=Konvertovať do PDF
+
+
+#compress
+compress.title=Komprimovať
+compress.header=Komprimovať PDF
+compress.credit=Táto služba používa Ghostscript pre kompresiu/optimalizáciu PDF.
+compress.selectText.1=Manuálny režim - Od 1 do 4
+compress.selectText.2=Úroveň optimalizácie:
+compress.selectText.3=4 (Hrozné pre textové obrázky)
+compress.selectText.4=Automatický režim - Automaticky upravuje kvalitu, aby sa PDF dostalo na presnú veľkosť
+compress.selectText.5=Očakávaná veľkosť PDF (napr. 25MB, 10.8MB, 25KB)
+compress.submit=Komprimovať
+
+
+#Add image
+addImage.title=Pridať obrázok
+addImage.header=Pridať obrázok do PDF
+addImage.everyPage=Každá stránka?
+addImage.upload=Pridať obrázok
+addImage.submit=Pridať obrázok
+
+
+#merge
+merge.title=Zlúčiť
+merge.header=Zlúčiť viacero PDF (2+)
+merge.sortByName=Zoradiť podľa názvu
+merge.sortByDate=Zoradiť podľa dátumu
+merge.submit=Zlúčiť
+
+
+#pdfOrganiser
+pdfOrganiser.title=Organizátor stránok
+pdfOrganiser.header=Organizátor stránok PDF
+pdfOrganiser.submit=Preusporiadať stránky
+pdfOrganiser.mode=Režim
+pdfOrganiser.mode.1=Vlastné poradie stránok
+pdfOrganiser.mode.2=Obrátené poradie
+pdfOrganiser.mode.3=Duplexné triedenie
+pdfOrganiser.mode.4=Triedená brožúra
+pdfOrganiser.mode.5=Brožúra s bočným šitím
+pdfOrganiser.mode.6=Rozdelenie na nepárne a párne
+pdfOrganiser.mode.7=Odstrániť prvú
+pdfOrganiser.mode.8=Odstrániť poslednú
+pdfOrganiser.mode.9=Odstrániť prvú aj poslednú
+pdfOrganiser.placeholder=(napr. 1,3,2 alebo 4-8,2,10-12 alebo 2n-1)
+
+
+#multiTool
+multiTool.title=PDF Multi Nástroj
+multiTool.header=PDF Multi Nástroj
+multiTool.uploadPrompts=Prosím, nahrajte PDF
+
+#view pdf
+viewPdf.title=Zobraziť PDF
+viewPdf.header=Zobraziť PDF
+
+#pageRemover
+pageRemover.title=Odstraňovač stránok
+pageRemover.header=Odstraňovač stránok PDF
+pageRemover.pagesToDelete=Stránky na odstránenie (Zadajte zoznam čísel stránok oddelených čiarkami):
+pageRemover.submit=Odstrániť stránky
+pageRemover.placeholder=(napr. 1,2,6 alebo 1-10,15-30)
+
+
+#rotate
+rotate.title=Otočiť PDF
+rotate.header=Otočiť PDF
+rotate.selectAngle=Vyberte uhol otočenia (v násobkoch 90 stupňov):
+rotate.submit=Otočiť
+
+
+#split-pdfs
+split.title=Rozdeliť PDF
+split.header=Rozdeliť PDF
+split.desc.1=Čísla vybrané sú čísla stránok, na ktorých chcete urobiť rozdelenie
+split.desc.2=Takže výber 1,3,7-9 by rozdelil 10-stranový dokument na 6 samostatných PDF s:
+split.desc.3=Dokument č. 1: Strana 1
+split.desc.4=Dokument č. 2: Strany 2 a 3
+split.desc.5=Dokument č. 3: Strany 4, 5, 6, 7
+split.desc.6=Dokument č. 4: Strana 8
+split.desc.7=Dokument č. 5: Strana 9
+split.desc.8=Dokument č. 6: Strana 10
+split.splitPages=Zadajte stránky na rozdelenie:
+split.submit=Rozdeliť
+
+
+#merge
+imageToPDF.title=Obrázok na PDF
+imageToPDF.header=Obrázok na PDF
+imageToPDF.submit=Konvertovať
+imageToPDF.selectLabel=Možnosti prispôsobenia obrázka
+imageToPDF.fillPage=Vyplniť stránku
+imageToPDF.fitDocumentToImage=Prispôsobiť stránku obrázku
+imageToPDF.maintainAspectRatio=Zachovať pomery strán
+imageToPDF.selectText.2=Automatické otočenie PDF
+imageToPDF.selectText.3=Logika pre viac súborov (Povolí sa len, ak pracujete s viacerými obrázkami)
+imageToPDF.selectText.4=Zlúčiť do jedného PDF
+imageToPDF.selectText.5=Konvertovať na samostatné PDF
+
+
+#pdfToImage
+pdfToImage.title=PDF na obrázok
+pdfToImage.header=PDF na obrázok
+pdfToImage.selectText=Formát obrázka
+pdfToImage.singleOrMultiple=Typ výsledného obrázka
+pdfToImage.single=Jedna veľká snímka
+pdfToImage.multi=Viaceré snímky
+pdfToImage.colorType=Typ farby
+pdfToImage.color=Farba
+pdfToImage.grey=Odtiene šedej
+pdfToImage.blackwhite=Čierno-biele (Môže stratiť údaje!)
+pdfToImage.submit=Konvertovať
+
+
+#addPassword
+addPassword.title=Pridať heslo
+addPassword.header=Pridať heslo (Zašifrovať)
+addPassword.selectText.1=Vyberte PDF na zašifrovanie
+addPassword.selectText.2=Používateľské heslo
+addPassword.selectText.3=Dĺžka šifrovacieho kľúča
+addPassword.selectText.4=Vyššie hodnoty sú silnejšie, ale nižšie hodnoty majú lepšiu kompatibilitu.
+addPassword.selectText.5=Nastavenia povolení (Odporúča sa používať spolu s heslom vlastníka)
+addPassword.selectText.6=Zakázať zostavovanie dokumentu
+addPassword.selectText.7=Zakázať extrakciu obsahu
+addPassword.selectText.8=Zakázať extrakciu pre prístupnosť
+addPassword.selectText.9=Zakázať vypĺňanie formulárov
+addPassword.selectText.10=Zakázať úpravy
+addPassword.selectText.11=Zakázať úpravu anotácií
+addPassword.selectText.12=Zakázať tlač
+addPassword.selectText.13=Zakázať tlač rôznych formátov
+addPassword.selectText.14=Heslo vlastníka
+addPassword.selectText.15=Obmedzuje, čo môže byť vykonané s dokumentom po jeho otvorení (Nepodporované všetkými čítačmi)
+addPassword.selectText.16=Obmedzuje samotné otvorenie dokumentu
+addPassword.submit=Zašifrovať
+
+
+#watermark
+watermark.title=Pridať vodotlač
+watermark.header=Pridať vodotlač
+watermark.selectText.1=Vyberte PDF, do ktorého chcete pridať vodotlač:
+watermark.selectText.2=Text vodotlače:
+watermark.selectText.3=Veľkosť písma:
+watermark.selectText.4=Rotácia (0-360):
+watermark.selectText.5=Šírka medzery (Medzera medzi jednotlivými vodotlačami horizontálne):
+watermark.selectText.6=Výška medzery (Medzera medzi jednotlivými vodotlačami vertikálne):
+watermark.selectText.7=Priehľadnosť (0% - 100%):
+watermark.selectText.8=Typ vodotlače:
+watermark.selectText.9=Obrázok vodotlače:
+watermark.submit=Pridať vodotlač
+watermark.type.1=Text
+watermark.type.2=Obrázok
+
+
+#Change permissions
+permissions.title=Zmeniť povolenia
+permissions.header=Zmeniť povolenia
+permissions.warning=Varovanie: Aby boli tieto povolenia nemenné, odporúča sa nastaviť ich s heslom cez stránku pridania hesla
+permissions.selectText.1=Vyberte PDF na zmenu povolení
+permissions.selectText.2=Nastavenia povolení
+permissions.selectText.3=Zakázať zostavovanie dokumentu
+permissions.selectText.4=Zakázať extrakciu obsahu
+permissions.selectText.5=Zakázať extrakciu pre prístupnosť
+permissions.selectText.6=Zakázať vypĺňanie formulárov
+permissions.selectText.7=Zakázať úpravy
+permissions.selectText.8=Zakázať úpravu anotácií
+permissions.selectText.9=Zakázať tlač
+permissions.selectText.10=Zakázať tlač rôznych formátov
+permissions.submit=Zmeniť
+
+
+#remove password
+removePassword.title=Odstrániť heslo
+removePassword.header=Odstrániť heslo (Dešifrovať)
+removePassword.selectText.1=Vyberte PDF na dešifrovanie
+removePassword.selectText.2=Heslo
+removePassword.submit=Odstrániť
+
+
+#changeMetadata
+changeMetadata.title=Zmeniť metadáta
+changeMetadata.header=Zmeniť metadáta
+changeMetadata.selectText.1=Prosím, upravte premenné, ktoré chcete zmeniť
+changeMetadata.selectText.2=Vymazať všetky metadáta
+changeMetadata.selectText.3=Zobraziť vlastné metadáta:
+changeMetadata.author=Autor:
+changeMetadata.creationDate=Dátum vytvorenia (yyyy/MM/dd HH:mm:ss):
+changeMetadata.creator=Tvorca:
+changeMetadata.keywords=Kľúčové slová:
+changeMetadata.modDate=Dátum úpravy (yyyy/MM/dd HH:mm:ss):
+changeMetadata.producer=Producent:
+changeMetadata.subject=Predmet:
+changeMetadata.trapped=Zachytené:
+changeMetadata.selectText.4=Iné metadáta:
+changeMetadata.selectText.5=Pridať vlastný záznam metadát
+changeMetadata.submit=Zmeniť
+
+
+#pdfToPDFA
+pdfToPDFA.title=PDF na PDF/A
+pdfToPDFA.header=PDF na PDF/A
+pdfToPDFA.credit=Táto služba používa OCRmyPDF na konverziu PDF/A
+pdfToPDFA.submit=Konvertovať
+pdfToPDFA.tip=Momentálne nefunguje pre viacero vstupov naraz
+pdfToPDFA.outputFormat=Výstupný formát
+
+
+#PDFToWord
+PDFToWord.title=PDF na Word
+PDFToWord.header=PDF na Word
+PDFToWord.selectText.1=Výstupný formát súboru
+PDFToWord.credit=Táto služba používa LibreOffice na konverziu súborov.
+PDFToWord.submit=Konvertovať
+
+
+#PDFToPresentation
+PDFToPresentation.title=PDF na Prezentáciu
+PDFToPresentation.header=PDF na Prezentáciu
+PDFToPresentation.selectText.1=Výstupný formát súboru
+PDFToPresentation.credit=Táto služba používa LibreOffice na konverziu súborov.
+PDFToPresentation.submit=Konvertovať
+
+
+#PDFToText
+PDFToText.title=PDF na RTF (Text)
+PDFToText.header=PDF na RTF (Text)
+PDFToText.selectText.1=Výstupný formát súboru
+PDFToText.credit=Táto služba používa LibreOffice na konverziu súborov.
+PDFToText.submit=Konvertovať
+
+
+#PDFToHTML
+PDFToHTML.title=PDF na HTML
+PDFToHTML.header=PDF na HTML
+PDFToHTML.credit=Táto služba používa pdftohtml na konverziu súborov.
+PDFToHTML.submit=Konvertovať
+
+
+#PDFToXML
+PDFToXML.title=PDF na XML
+PDFToXML.header=PDF na XML
+PDFToXML.credit=Táto služba používa LibreOffice na konverziu súborov.
+PDFToXML.submit=Konvertovať
+
+#PDFToCSV
+PDFToCSV.title=PDF na CSV
+PDFToCSV.header=PDF na CSV
+PDFToCSV.prompt=Vyberte stránku na extrakciu tabuľky
+PDFToCSV.submit=Extrahovať
+
+#split-by-size-or-count
+split-by-size-or-count.title=Rozdeliť PDF podľa veľkosti alebo počtu
+split-by-size-or-count.header=Rozdeliť PDF podľa veľkosti alebo počtu
+split-by-size-or-count.type.label=Vyberte typ rozdelenia
+split-by-size-or-count.type.size=Podľa veľkosti
+split-by-size-or-count.type.pageCount=Podľa počtu stránok
+split-by-size-or-count.type.docCount=Podľa počtu dokumentov
+split-by-size-or-count.value.label=Zadajte hodnotu
+split-by-size-or-count.value.placeholder=Zadajte veľkosť (napr. 2MB alebo 3KB) alebo počet (napr. 5)
+split-by-size-or-count.submit=Odoslať
+
+
+#overlay-pdfs
+overlay-pdfs.header=Prekrytie PDF súborov
+overlay-pdfs.baseFile.label=Vyberte základný PDF súbor
+overlay-pdfs.overlayFiles.label=Vyberte prekryvné PDF súbory
+overlay-pdfs.mode.label=Vyberte režim prekrytia
+overlay-pdfs.mode.sequential=Sériové prekrytie
+overlay-pdfs.mode.interleaved=Prepletené prekrytie
+overlay-pdfs.mode.fixedRepeat=Pevné opakované prekrytie
+overlay-pdfs.counts.label=Počty prekrytí (pre režim pevného opakovania)
+overlay-pdfs.counts.placeholder=Zadajte počty oddelené čiarkami (napr. 2,3,1)
+overlay-pdfs.position.label=Vyberte pozíciu prekrytia
+overlay-pdfs.position.foreground=Popredie
+overlay-pdfs.position.background=Pozadie
+overlay-pdfs.submit=Odoslať
+
+
+#split-by-sections
+split-by-sections.title=Rozdeliť PDF podľa sekcií
+split-by-sections.header=Rozdeliť PDF na sekcie
+split-by-sections.horizontal.label=Horizontálne delenia
+split-by-sections.vertical.label=Vertikálne delenia
+split-by-sections.horizontal.placeholder=Zadajte počet horizontálnych delení
+split-by-sections.vertical.placeholder=Zadajte počet vertikálnych delení
+split-by-sections.submit=Rozdeliť PDF
+split-by-sections.merge=Zlúčiť do jedného PDF
+
+
+#printFile
+printFile.title=Vytlačiť súbor
+printFile.header=Vytlačiť súbor na tlačiareň
+printFile.selectText.1=Vyberte súbor na tlač
+printFile.selectText.2=Zadajte názov tlačiarne
+printFile.submit=Vytlačiť
+
+
+#licenses
+licenses.nav=Licencie
+licenses.title=Licencie tretích strán
+licenses.header=Licencie tretích strán
+licenses.module=Modul
+licenses.version=Verzia
+licenses.license=Licencia
+
+
+# error
+error.sorry=Ospravedlňujeme sa za problém!
+error.needHelp=Potrebujete pomoc / Našli ste problém?
+error.contactTip=Ak máte stále problémy, neváhajte nás kontaktovať pre pomoc. Môžete podať tiket na našej stránke GitHub alebo nás kontaktovať cez Discord:
+error.404.head=404 - Stránka nenájdená | Ups, narazili sme na chybu v kóde!
+error.404.1=Nemôžeme nájsť stránku, ktorú hľadáte.
+error.404.2=Niečo sa pokazilo
+error.github=Podajte tiket na GitHub
+error.showStack=Zobraziť sledovanie zásobníka
+error.copyStack=Kopírovať sledovanie zásobníka
+error.githubSubmit=GitHub - Podajte tiket
+error.discordSubmit=Discord - Podajte príspevok na podporu
+
diff --git a/src/main/resources/messages_sr_LATN_RS.properties b/src/main/resources/messages_sr_LATN_RS.properties
index 07c32db34..a200e5910 100644
--- a/src/main/resources/messages_sr_LATN_RS.properties
+++ b/src/main/resources/messages_sr_LATN_RS.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Proveri
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Konvertuj
-navbar.security=Bezbednost
-navbar.other=Razno
+navbar.favorite=Favorites
 navbar.darkmode=Tamni režim
-navbar.pageOps=Operacije stranice
+navbar.language=Languages
 navbar.settings=Podešavanja
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Popravi
 #flatten
 flatten.title=Ravnanje
 flatten.header=Ravnanje PDF fajlova
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Ravnanje
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Izdvajanje
 fileToPDF.title=Fajl u PDF
 fileToPDF.header=Konvertuj bilo koji fajl u PDF
 fileToPDF.credit=Ova usluga koristi LibreOffice i Unoconv za konverziju fajla.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Podržani tipovi fajlova bi trebali uključivati navedeno, ali za punu ažuriranu listu podržanih formata, molimo pogledajte LibreOffice dokumentaciju
 fileToPDF.submit=Konvertuj u PDF
 
diff --git a/src/main/resources/messages_sv_SE.properties b/src/main/resources/messages_sv_SE.properties
index ac29f553f..6120e96d9 100644
--- a/src/main/resources/messages_sv_SE.properties
+++ b/src/main/resources/messages_sv_SE.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Validate
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Konvertera
-navbar.security=Säkerhet
-navbar.other=Annat
+navbar.favorite=Favorites
 navbar.darkmode=Mörkt läge
-navbar.pageOps=Sidoperationer
+navbar.language=Languages
 navbar.settings=Inställningar
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Reparera
 #flatten
 flatten.title=Platta till
 flatten.header=Placera PDF-filer
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Platta till
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Extrahera
 fileToPDF.title=Fil till PDF
 fileToPDF.header=Konvertera valfri fil till PDF
 fileToPDF.credit=Denna tjänst använder LibreOffice och Unoconv för filkonvertering.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Filtyper som stöds bör inkludera nedanstående men för en fullständig uppdaterad lista över format som stöds, se LibreOffice-dokumentationen
 fileToPDF.submit=Konvertera till PDF
 
diff --git a/src/main/resources/messages_tr_TR.properties b/src/main/resources/messages_tr_TR.properties
index c8d3bab63..e0475f259 100644
--- a/src/main/resources/messages_tr_TR.properties
+++ b/src/main/resources/messages_tr_TR.properties
@@ -68,6 +68,7 @@ seeDockerHub=Docker Hub'a bakın
 visitGithub=Github Deposunu Ziyaret Edin
 donate=Bağış Yapın
 color=Renk
+info=Info
 sponsor=Bağış
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Doğrula
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Dönüştür
-navbar.security=Güvenlik
-navbar.other=Çeşitli
+navbar.favorite=Favorites
 navbar.darkmode=Karanlık Mod
-navbar.pageOps=Sayfa İşlemleri
+navbar.language=Languages
 navbar.settings=Ayarlar
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Onar
 #flatten
 flatten.title=Düzleştir
 flatten.header=PDF'leri Düzleştir
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Düzleştir
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Çıkar
 fileToPDF.title=Dosyadan PDF'e
 fileToPDF.header=Herhangi bir dosyayı PDF'e dönüştür
 fileToPDF.credit=Bu hizmet dosya dönüşümü için LibreOffice ve Unoconv'u kullanır.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Desteklenen dosya türleri aşağıdakileri içermelidir ancak desteklenen formatların tam güncellenmiş listesi için lütfen LibreOffice dokümantasyonuna başvurun
 fileToPDF.submit=PDF'e Dönüştür
 
diff --git a/src/main/resources/messages_uk_UA.properties b/src/main/resources/messages_uk_UA.properties
index 6cd0ace02..622f4ec84 100644
--- a/src/main/resources/messages_uk_UA.properties
+++ b/src/main/resources/messages_uk_UA.properties
@@ -69,6 +69,7 @@ visitGithub=Visit Github Repository
 donate=Donate
 color=Color
 sponsor=Sponsor
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=Перевірити
 #############
 #  NAVBAR   #
 #############
-navbar.convert=Конвертувати
-navbar.security=Безпека
-navbar.other=Інше
+navbar.favorite=Favorites
 navbar.darkmode=Темний режим
-navbar.pageOps=Операції зі сторінкою
+navbar.language=Languages
 navbar.settings=Налаштування
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=Ремонтувати
 #flatten
 flatten.title=Згладжування
 flatten.header=Згладжування PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=Згладити
 
 
@@ -741,6 +749,7 @@ extractImages.submit=Витягнути
 fileToPDF.title=Файл у PDF
 fileToPDF.header=Конвертувати будь-який файл у PDF
 fileToPDF.credit=Цей сервіс використовує LibreOffice та Unoconv для перетворення файлів.
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=Підтримувані типи файлів повинні включати нижченаведені, однак повний оновлений список підтримуваних форматів дивіться у документації LibreOffice.
 fileToPDF.submit=Перетворити у PDF
 
diff --git a/src/main/resources/messages_zh_CN.properties b/src/main/resources/messages_zh_CN.properties
index 7ea7ed554..063d1e035 100644
--- a/src/main/resources/messages_zh_CN.properties
+++ b/src/main/resources/messages_zh_CN.properties
@@ -69,6 +69,7 @@ visitGithub=访问Github仓库
 donate=捐款
 color=颜色
 sponsor=赞助
+info=Info
 
 
 
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=验证
 #############
 #  NAVBAR   #
 #############
-navbar.convert=转换
-navbar.security=安全
-navbar.other=其他
+navbar.favorite=Favorites
 navbar.darkmode=暗模式
-navbar.pageOps=页面操作
+navbar.language=Languages
 navbar.settings=设置
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=修复
 #flatten
 flatten.title=展平
 flatten.header=展平 PDF
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=展平
 
 
@@ -741,6 +749,7 @@ extractImages.submit=提取
 fileToPDF.title=文件转换为PDF
 fileToPDF.header=将任何文件转换为PDF。
 fileToPDF.credit=此服务使用LibreOffice和Unoconv进行文件转换。
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=支持的文件类型应该包括以下几种,但是,对于支持的格式的完整更新列表,请参考LibreOffice文档。
 fileToPDF.submit=转换为 PDF
 
diff --git a/src/main/resources/messages_zh_TW.properties b/src/main/resources/messages_zh_TW.properties
index 2c089b133..a218d0f11 100644
--- a/src/main/resources/messages_zh_TW.properties
+++ b/src/main/resources/messages_zh_TW.properties
@@ -57,6 +57,7 @@ usernameExistsMessage=新使用者名稱已存在。
 invalidUsernameMessage=使用者名無效,使用者名只能包含字母字元和數位。
 deleteCurrentUserMessage=無法刪除目前登錄的使用者。
 deleteUsernameExistsMessage=使用者名不存在,無法刪除。
+info=Info
 downgradeCurrentUserMessage=無法降級目前使用者的角色
 downgradeCurrentUserLongMessage=無法降級目前使用者的角色。因此,不會顯示目前的使用者。
 error=錯誤
@@ -102,12 +103,18 @@ pipelineOptions.validateButton=驗證
 #############
 #  NAVBAR   #
 #############
-navbar.convert=轉換
-navbar.security=安全
-navbar.other=其他
+navbar.favorite=Favorites
 navbar.darkmode=暗黑模式
-navbar.pageOps=頁面操作
+navbar.language=Languages
 navbar.settings=設定
+navbar.allTools=Tools
+navbar.multiTool=Multi Tools
+navbar.sections.organize=Organize
+navbar.sections.convertTo=Convert to PDF
+navbar.sections.convertFrom=Convert from PDF
+navbar.sections.security=Sign & Security
+navbar.sections.advance=Advanced
+navbar.sections.edit=View & Edit
 
 #############
 #  SETTINGS #
@@ -694,6 +701,7 @@ repair.submit=修復
 #flatten
 flatten.title=平坦化
 flatten.header=PDF 平坦化
+flatten.flattenOnlyForms=Flatten only forms
 flatten.submit=平坦化
 
 
@@ -741,6 +749,7 @@ extractImages.submit=提取
 fileToPDF.title=檔案轉 PDF
 fileToPDF.header=將任何檔案轉換為 PDF
 fileToPDF.credit=此服務使用 LibreOffice 和 Unoconv 進行檔案轉換。
+fileToPDF.supportedFileTypesInfo=Supported File types
 fileToPDF.supportedFileTypes=支援的檔案類型應包括以下內容,但要獲得完整的更新支援格式列表,請參閱 LibreOffice 的文件
 fileToPDF.submit=轉換為 PDF
 
diff --git a/src/main/resources/static/css/dark-mode.css b/src/main/resources/static/css/dark-mode.css
deleted file mode 100644
index b874f4104..000000000
--- a/src/main/resources/static/css/dark-mode.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/* Dark Mode Styles */
-body,
-select,
-textarea {
-  --body-background-color: 51, 51, 51;
-  --base-font-color: 255, 255, 255;
-  background-color: rgb(var(--body-background-color)) !important;
-  color: rgb(var(--base-font-color)) !important;
-}
-.card {
-  background-color: rgb(var(--body-background-color)) !important;
-  border: 1px solid #999;
-  color: rgb(var(--base-font-color)) !important;
-}
-
-a {
-  color: #add8e6;
-}
-a:hover {
-  color: #87ceeb; /* Slightly brighter blue on hover for accessibility */
-}
-
-.dark-card {
-  background-color: rgb(var(--body-background-color)) !important;
-  color: rgb(var(--base-font-color)) !important;
-}
-.jumbotron {
-  background-color: #222; /* or any other dark color */
-  color: rgb(var(--base-font-color)) !important; /* or any other light color */
-}
-
-.list-group {
-  background-color: #222 !important;
-  color: rgb(var(--base-font-color)) !important;
-}
-.list-group-item {
-  background-color: #222 !important;
-  color: rgb(var(--base-font-color)) !important;
-}
-#support-section {
-  background-color: #444 !important;
-}
-
-#pages-container-wrapper {
-  --background-color: rgba(255, 255, 255, 0.046) !important;
-  --scroll-bar-color: #4c4c4c !important;
-  --scroll-bar-thumb: #d3d3d3 !important;
-  --scroll-bar-thumb-hover: rgb(var(--base-font-color)) !important;
-}
-
-.favorite-icon img {
-  filter: brightness(0) invert(1) !important;
-}
-table thead {
-  background-color: #333 !important;
-  border: 1px solid #444;
-}
-table th,
-table td {
-  border: 1px solid #444 !important;
-  color: white;
-}
-.btn {
-  background-color: #444 !important;
-  border: none;
-  color: #fff !important;
-}
-.btn-primary {
-  background-color: #007bff !important;
-  border: none;
-  color: #fff !important;
-}
-.btn-secondary {
-  background-color: #6c757d !important;
-  border: none;
-  color: #fff !important;
-}
-.btn-info {
-  background-color: #17a2b8 !important;
-  border: none;
-  color: #fff !important;
-}
-.btn-danger {
-  background-color: #dc3545 !important;
-  border: none;
-  color: #fff !important;
-}
-
-.btn-warning {
-  background-color: #ffc107 !important;
-  border: none;
-  color: #000 !important;
-}
-
-.btn-outline-secondary {
-  color: #fff !important;
-  border-color: #fff;
-}
-.btn-outline-secondary:hover {
-  background-color: #444 !important;
-  color: #007bff !important;
-  border-color: #007bff;
-}
-.blackwhite-icon {
-  filter: brightness(0) invert(1);
-}
-hr {
-  border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
-  background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
-}
-
-.modal-content {
-  color: #fff !important;
-  border-color: #fff;
-}
-
-.global-buttons-container input {
-  background-color: #323948;
-  caret-color: #ffffff;
-  color: #ffffff;
-}
-.global-buttons-container input::placeholder {
-  color: #ffffff;
-}
-
-.global-buttons-container input:disabled::-webkit-input-placeholder {
-  /* WebKit browsers */
-  color: #6e6865;
-}
-.global-buttons-container input:disabled:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  color: #6e6865;
-}
-.global-buttons-container input:disabled::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  color: #6e6865;
-}
-.global-buttons-container input:disabled:-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  color: #6e6865;
-}
diff --git a/src/main/resources/static/css/error.css b/src/main/resources/static/css/error.css
index 5cc37b61f..40ff7669e 100644
--- a/src/main/resources/static/css/error.css
+++ b/src/main/resources/static/css/error.css
@@ -1,17 +1,8 @@
-h1 {
-  text-align: center;
-  margin-top: 10%;
-}
-
 p {
   text-align: center;
   margin-top: 2em;
 }
 
-.button:hover {
-  background-color: #005b7f;
-}
-
 .features-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
@@ -31,58 +22,21 @@ p {
   flex: 1;
 }
 
-#support-section {
-  background-color: #f9f9f9;
-  padding: 4rem;
-  margin-top: 1rem;
-  text-align: center;
-}
-
-#support-section h1 {
-  margin-top: 0;
-}
-
-#support-section p {
-  margin-top: 0;
-}
-
 #button-group {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 
+#home-button,
 #github-button,
 #discord-button {
   display: inline-block;
   padding: 1rem 2rem;
   margin: 1rem;
-  background-color: #008cba;
-  color: #fff;
   font-size: 1.2rem;
   text-align: center;
   text-decoration: none;
   border-radius: 3rem;
   transition: all 0.3s ease-in-out;
-}
-
-#github-button:hover,
-#discord-button:hover,
-.home-button:hover {
-  background-color: #005b7f;
-}
-
-.home-button {
-  display: block;
-  width: 200px;
-  height: 50px;
-  margin: 2em auto;
-  background-color: #008cba;
-  color: white;
-  text-align: center;
-  line-height: 50px;
-  text-decoration: none;
-  font-weight: bold;
-  border-radius: 25px;
-  transition: all 0.3s ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/errorBanner.css b/src/main/resources/static/css/errorBanner.css
index 75618731e..adeb3dfac 100644
--- a/src/main/resources/static/css/errorBanner.css
+++ b/src/main/resources/static/css/errorBanner.css
@@ -1,5 +1,6 @@
 #errorContainer {
-  margin: 20px; /* adjust this value as needed */
+  margin: 1rem 0rem 2rem;
+  border-radius: 3rem;
 }
 
 #helpModalDialog {
@@ -18,7 +19,7 @@
 }
 
 #helpModal .button:hover {
-  background-color: #005b7f;
+  background-color: var(--md-sys-color-primary);
 }
 
 #helpModal .features-container {
@@ -40,58 +41,21 @@
   flex: 1;
 }
 
-#support-section {
-  background-color: #f9f9f9;
-  padding: 4rem;
-  margin-top: 1rem;
-  text-align: center;
-}
-
-#support-section h1 {
-  margin-top: 0;
-}
-
-#support-section p {
-  margin-top: 0;
-}
-
 #button-group {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 
+#home-button,
 #github-button,
 #discord-button {
   display: inline-block;
   padding: 1rem 2rem;
   margin: 1rem;
-  background-color: #008cba;
-  color: #fff;
   font-size: 1.2rem;
   text-align: center;
   text-decoration: none;
   border-radius: 3rem;
   transition: all 0.3s ease-in-out;
-}
-
-#github-button:hover,
-#discord-button:hover,
-.home-button:hover {
-  background-color: #005b7f;
-}
-
-.home-button {
-  display: block;
-  width: 200px;
-  height: 50px;
-  margin: 2em auto;
-  background-color: #008cba;
-  color: white;
-  text-align: center;
-  line-height: 50px;
-  text-decoration: none;
-  font-weight: bold;
-  border-radius: 25px;
-  transition: all 0.3s ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/footer.css b/src/main/resources/static/css/footer.css
index f6cf093d7..b004cc27b 100644
--- a/src/main/resources/static/css/footer.css
+++ b/src/main/resources/static/css/footer.css
@@ -10,11 +10,15 @@
   display: flex;
   align-items: center; /* Center children horizontally */
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .footer-powered-by {
   margin-top: auto; /* Pushes the text to the bottom */
-  color: grey;
   text-align: center; /* Centers the text inside the div */
   width: 100%; /* Full width to center the text properly */
 }
+
+.footer-icon {
+  font-size: 2rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index ff8d1cf7d..a6f89ed09 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -1,18 +1,19 @@
 #searchBar {
-  background-image: url("../images/search.svg");
-  background-position: 16px 16px;
-  background-repeat: no-repeat;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container-low);
   width: 100%;
   font-size: 16px;
-  margin-bottom: 12px;
-  padding: 12px 20px 12px 40px;
-  border: 1px solid #ddd;
+  margin-bottom: 2rem;
+  padding: 0.75rem 3.5rem;
+  border: 0.1rem solid var(--md-sys-color-outline-variant);
+  border-radius: 3rem;
+  outline-color: var(--md-sys-color-outline-variant);
 }
-.dark-mode-search {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' hei… 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
-  color: #f8f9fa !important;
-  background-color: #212529 !important;
-  border-color: #343a40 !important;
+
+.search-icon {
+  position: absolute;
+  margin: 0.75rem 1rem;
+  border: 0.1rem solid transparent;
 }
 
 .features-container {
@@ -22,23 +23,23 @@
 }
 
 .feature-card {
-  border: 2px solid rgba(0, 0, 0, 0.25);
-  border-radius: 0.25rem;
+  border: 2px solid var(--md-sys-color-surface-5);
+  border-radius: 2rem;
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  background: rgba(13, 110, 253, 0.05);
+  background: var(--md-sys-color-surface-5);
   transition:
     transform 0.3s,
     border 0.3s;
   transform-origin: center center;
-  outline: 2px solid transparent;
+  outline: 0px solid transparent;
 }
 
 .feature-card a {
   text-decoration: none;
-  color: inherit;
+  color: var(--md-sys-color-on-surface);
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -50,44 +51,53 @@
 }
 
 .feature-card:hover {
-  outline: 1px solid rgba(0, 0, 0, 0.5);
   cursor: pointer;
   transform: scale(1.1);
+  box-shadow: var(--md-sys-elevation-3);
 }
 
-.feature-card:hover .card-title {
-  text-decoration: underline;
-}
 .card-title.text-primary {
-  color: #000; /* Replace with your desired shade of blue */
+  color: #000;
 }
 
 .home-card-icon {
-  width: 30px;
-  height: 30px;
+  width: 3rem;
+  height: 3rem;
   transform: translateY(-5px);
 }
-.home-card-icon-colour {
-  filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg);
-}
 
 .favorite-icon {
   display: none;
   position: absolute;
   top: 10px;
   right: 10px;
+  color: var(--md-sys-color-secondary);
+}
+
+#tool-icon {
+  height: 100%;
+}
+
+#tool-text {
+  margin: 0.5rem 0.5rem 0rem;
+}
+
+.card-title {
+  margin-bottom: 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);
+  filter: brightness(0) invert(var(--md-theme-filter-color));
 }
 
 .jumbotron {
-  padding: 3rem 3rem; /* Reduce vertical padding */
+  padding: 3rem 3rem;
+  /* Reduce vertical padding */
 }
 
 .lookatme {
@@ -124,3 +134,21 @@
     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/light-mode.css b/src/main/resources/static/css/light-mode.css
deleted file mode 100644
index f7e79b900..000000000
--- a/src/main/resources/static/css/light-mode.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* Dark Mode Styles */
-body {
-  --body-background-color: 255, 255, 255;
-  --base-font-color: 33, 37, 41;
-}
-
-.global-buttons-container input {
-  background-color: #ffffff;
-  /*caret-color: #ffffff;*/
-  /*color: #ffffff;*/
-}
-/*.global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
-/*    color:    #98A0AB;*/
-/*}*/
-/*.global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
-/*    color:    #98A0AB;*/
-/*}*/
-/*.global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
-/*    color:    #98A0AB;*/
-/*}*/
-/*.global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
-/*    color:    #98A0AB;*/
-/*}*/
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
index 743ee6063..7ed2a90b3 100644
--- a/src/main/resources/static/css/login.css
+++ b/src/main/resources/static/css/login.css
@@ -8,7 +8,6 @@ body {
   align-items: center;
   padding-top: 40px;
   padding-bottom: 40px;
-  background-color: #f5f5f5;
 }
 
 .form-signin {
@@ -37,6 +36,7 @@ body {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+
 .container-flex {
   display: flex;
   flex-direction: column;
@@ -44,41 +44,22 @@ body {
   width: 100%; /* Set width to 100% */
   align-items: center; /* Center its children horizontally */
 }
+
 .footer-bottom {
   margin-top: auto;
 }
-body.light-mode input:-webkit-autofill,
-body.light-mode input:-webkit-autofill:hover,
-body.light-mode input:-webkit-autofill:focus,
-body.light-mode input:-webkit-autofill:active {
-  -webkit-text-fill-color: #212529; /* Dark font color */
-  -webkit-box-shadow: 0 0 0 1000px #f8f9fa inset; /* Light background color */
+
+.form-control {
+  border-radius: 1.25rem !important;
 }
 
-/* Dark Mode */
-body.dark-mode input:-webkit-autofill,
-body.dark-mode input:-webkit-autofill:hover,
-body.dark-mode input:-webkit-autofill:focus,
-body.dark-mode input:-webkit-autofill:active {
-  -webkit-text-fill-color: #f8f9fa; /* Light font color */
-  -webkit-box-shadow: 0 0 0 1000px #212529 inset; /* Dark background color */
-}
-/* Light Mode */
-body.light-mode .form-floating > input:focus + label {
-  color: #212529 !important; /* Dark text for light background */
+.form-signin .form-floating {
+  margin: 1rem 0px;
 }
 
-/* Dark Mode */
-body.dark-mode .form-floating > input:focus + label {
-  color: #fff !important; /* Light text for dark background */
-}
-
-body.light-mode .form-floating > label {
-  color: #212529 !important; /* Dark text for light background */
-}
-
-body.dark-mode .form-floating > label {
-  color: #fff !important; /* Light text for dark background */
+input[type="checkbox" i] {
+  margin: 0px 5px;
+  vertical-align: middle;
 }
 
 /* Removing default styles for ul and li */
diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css
index 50e038ce9..f9c359dc6 100644
--- a/src/main/resources/static/css/multi-tool.css
+++ b/src/main/resources/static/css/multi-tool.css
@@ -3,43 +3,80 @@
   margin: 0 auto;
 }
 
-.global-buttons-container {
+label {
+  text-align: left;
+  display: block;
+  padding: 0rem 0.25rem;
+  font-size: 1.25rem;
+}
+
+.form-control {
+  border-radius: 16px !important;
+  padding: 0.75rem;
+  border: 1px solid var(--theme-color-outline-variant);
+}
+
+.mt-action-bar {
   display: flex;
   gap: 10px;
   align-items: start;
-
-  background-color: rgba(13, 110, 253, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.25);
+  background-color: var(--md-sys-color-surface-5); 
+  border: none;
   backdrop-filter: blur(2px);
-
   top: 10px;
   z-index: 10;
-  padding: 10px;
-  border-radius: 8px;
-}
-.global-buttons-container > * {
-  padding: 0.6rem 0.75rem;
+  padding: 1.25rem;
+  border-radius: 2rem;
+  margin: 0px 25px;
 }
 
-.global-buttons-container svg {
+.mt-action-bar>* {
+  padding-bottom: 0.5rem;
+}
+
+.mt-action-bar svg,
+.mt-action-btn svg {
   width: 20px;
   height: 20px;
 }
+
+.mt-action-bar .mt-filename {
+  width: 100%;
+}
+
+.mt-action-btn {
+  display: flex;
+  gap: 10px;
+  align-items: start;
+  top: 10px;
+  z-index: 10;
+  padding: 12px 0px 0px;
+  width: 100%;
+}
+
+.mt-action-btn .btn {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 20px;
+  padding: 0;
+}
+
 #export-button {
   margin-left: auto;
 }
 
+#bg-card {
+  background-color: var(--md-sys-color-surface-5);
+  border-radius: 3rem;
+  padding: 25px 0 0;
+}
+
 #pages-container-wrapper {
-  --background-color: rgba(0, 0, 0, 0.025);
-  --scroll-bar-color: #f1f1f1;
-  --scroll-bar-thumb: #888;
-  --scroll-bar-thumb-hover: #555;
-  background-color: var(--background-color);
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 10px 25px;
-  border-radius: 10px;
+  padding: 1rem;
+  border-radius: 25px;
   overflow-y: hidden;
   overflow-x: auto;
   min-height: 275px;
@@ -47,11 +84,11 @@
 }
 
 #pages-container {
-  margin: auto;
   gap: 0px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-wrap: wrap;
+  margin-left: -15px;
+  margin-right: -15px;
 }
 
 /* width */
@@ -86,6 +123,58 @@
   position: relative;
   user-select: none;
   transition: width 1s linear;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+/* Pushes the last item to the left */
+.page-container:last-child {
+  margin-right: auto;
+}
+
+.page-container:last-child:lang(ar),
+/* Arabic */
+.page-container:last-child:lang(he),
+/* Hebrew */
+.page-container:last-child:lang(fa),
+/* Persian */
+.page-container:last-child:lang(ur),
+/* Urdu */
+.page-container:last-child:lang(ckb),
+/* Sorani Kurdish */
+.page-container:last-child:lang(ks),
+/* Kashmiri */
+.page-container:last-child:lang(kk),
+/* Kazakh */
+.page-container:last-child:lang(uz),
+/* Uzbek */
+.page-container:last-child:lang(ky),
+/* Kyrgyz */
+.page-container:last-child:lang(bal),
+/* Baluchi */
+.page-container:last-child:lang(dv),
+/* Divehi */
+.page-container:last-child:lang(ps),
+/* Pashto */
+.page-container:last-child:lang(sdg),
+/* Southern Kurdish */
+.page-container:last-child:lang(syr),
+/* Syriac */
+.page-container:last-child:lang(mzn),
+/* Mazanderani */
+.page-container:last-child:lang(tgl),
+/* Tagalog */
+.page-container:last-child:lang(pnb),
+/* Western Punjabi */
+.page-container:last-child:lang(ug),
+/* Uyghur */
+.page-container:last-child:lang(nqo),
+/* N'Ko */
+.page-container:last-child:lang(bqi)
+/* Bakhtiari */
+{
+  margin-left: auto !important;
+  margin-right: 0 !important;
 }
 
 .page-container img {
@@ -109,11 +198,15 @@
 .page-number {
   position: absolute;
   top: 5px;
-  right: 5px;
-  color: white;
-  background-color: #007bff; /* Primary blue color */
-  padding: 3px 6px;
-  border-radius: 4px;
-  font-size: 12px;
+  right: 0px;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-5);
+  padding: 6px 8px;
+  border-radius: 8px;
+  font-size: 16px;
   z-index: 2;
 }
+
+.tool-header {
+  margin: 0.5rem 1rem 2rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index f46c44a6b..bd24738ba 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -7,28 +7,18 @@
 }
 
 #navbarSearch.show {
-  max-height: 300px; /* Adjust this to your desired max height */
-}
-
-#searchForm {
-  width: 200px; /* Adjust this value as needed */
-}
-
-/* Style the search results to match the navbar */
-#searchResults {
-  max-height: 200px; /* Adjust this value as needed */
-  overflow-y: auto;
-  width: 100%;
-  max-width: 300px; /* Adjust to your preferred width */
-  transition: height 0.3s ease; /* Smooth height transition */
+  max-height: 300px;
+  /* Adjust this to your desired max height */
 }
 
 #searchResults .dropdown-item {
   display: flex;
   align-items: center;
   white-space: nowrap;
-  height: 50px; /* Fixed height */
-  overflow: hidden; /* Hide overflow */
+  height: 50px;
+  /* Fixed height */
+  overflow: hidden;
+  /* Hide overflow */
 }
 
 #searchResults .icon {
@@ -37,40 +27,34 @@
 
 #searchResults .icon-text {
   display: inline;
-  overflow: hidden; /* Hide overflow */
-  text-overflow: ellipsis; /* Add ellipsis for long text */
+  overflow: hidden;
+  /* Hide overflow */
+  text-overflow: ellipsis;
+  /* Add ellipsis for long text */
 }
 
 #search-icon i {
-  font-size: 24px; /* Adjust this to your desired size */
+  font-size: 24px;
+  /* Adjust this to your desired size */
   transition: color 0.3s;
 }
 
 #search-icon:hover i {
-  color: #666; /* Adjust this to your hover color */
+  color: #666;
+  /* Adjust this to your hover color */
 }
 
 .search-input {
-  transition:
-    border 0.3s,
-    box-shadow 0.3s;
+  transition: border 0.3s, box-shadow 0.3s;
 }
 
 .search-input:focus {
-  border-color: #666; /* Adjust this to your focus color */
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */
+  border-color: #666;
+  /* Adjust this to your focus color */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  /* Adjust this to your desired shadow */
 }
 
-/* Set a fixed height and styling for each search result item */
-.search-results a {
-  display: flex;
-  align-items: center;
-  gap: 10px; /* space between icon and text */
-  height: 40px; /* Adjust based on your design */
-  overflow: hidden; /* Prevent content from overflowing */
-  white-space: nowrap; /* Prevent text from wrapping to next line */
-  text-overflow: ellipsis; /* Truncate text if it's too long */
-}
 
 .main-icon {
   width: 36px;
@@ -79,34 +63,59 @@
   transform: translateY(-2px);
 }
 
-.icon {
-  width: 16px;
-  height: 16px;
+.nav-icon {
   vertical-align: middle;
-  transform: translateY(-2px);
+  font-size: 2rem !important;
+  padding: 0.25rem;
+  border-radius: 1rem;
 }
 
-.icon + .icon {
+.icon+.icon {
   margin-left: -4px;
 }
 
 .icon-text {
   margin-left: 4px;
+  margin-right: 4px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  vertical-align: middle;
+}
+
+.dropdown-item .icon-text {
+  text-wrap: wrap;
+  word-break: break-word;
+  width: 80%;
+}
+
+span.icon-text::after {
+  content: attr(data-text);
+  content: attr(data-text) / "";
+  font-weight: 600;
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
 }
 
 .nav-item-separator {
   position: relative;
-  margin: 0 4px; /* Adjust the margin as needed */
+  margin: 0 4px;
+  /* Adjust the margin as needed */
 }
 
 .nav-item-separator::before {
   content: "";
   position: absolute;
   left: 0;
-  top: 10%; /* Adjust the top and bottom margins as needed */
+  top: 10%;
+  /* Adjust the top and bottom margins as needed */
   bottom: 10%;
   width: 1px;
-  background-color: #ccc; /* Adjust the color as needed */
+  background-color: #ccc;
+  /* Adjust the color as needed */
 }
 
 .navbar-icon {
@@ -114,3 +123,168 @@
   height: 20px;
   transform: translateY(-2px);
 }
+
+.navbar-toggler {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.dropdown-menu.scrollable-y {
+  overflow-y: scroll;
+  height: 360px;
+}
+
+/* Dropdown Scrollbar*/
+.scrollable-y {
+  overflow-y: scroll;
+  height: 360px;
+}
+
+.scrollable-y::-webkit-scrollbar {
+  background: transparent;
+  width: 0.7rem;
+}
+
+.scrollable-y::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollable-y::-webkit-scrollbar-thumb {
+  border-radius: 2rem;
+  background-color: var(--md-sys-color-surface-5);
+  border: 3px solid var(--md-sys-color-surface-5);
+}
+
+/* Mega Menu */
+.dropdown-mega .dropdown-menu {
+  width: 98%;
+}
+
+.dropdown-mega .title {
+  padding-bottom: 1rem;
+  margin: 0;
+}
+
+.dropdown-menu .list-group {
+  padding: 1rem;
+}
+
+.mega-content .dropdown-item:focus .nav-icon,
+.mega-content .dropdown-item:hover .nav-icon,
+.mega-content .dropdown-item.active .nav-icon {
+  background-color: transparent;
+}
+
+.dropdown-item:focus.sign,
+.dropdown-item:hover.sign,
+.dropdown-item.active.sign {
+  color: var(--md-nav-on-section-color-sign);
+  background-color: var(--md-nav-section-color-sign);
+}
+
+.dropdown-item:focus.organize,
+.dropdown-item:hover.organize,
+.dropdown-item.active.organize {
+  color: var(--md-nav-on-section-color-organize);
+  background-color: var(--md-nav-section-color-organize);
+}
+
+.dropdown-item:focus.convert,
+.dropdown-item:hover.convert,
+.dropdown-item.active.convert {
+  color: var(--md-nav-on-section-color-convert);
+  background-color: var(--md-nav-section-color-convert);
+}
+
+.dropdown-item:focus.image,
+.dropdown-item:hover.image,
+.dropdown-item.active.image {
+  color: var(--md-nav-on-section-color-image);
+  background-color: var(--md-nav-section-color-image);
+}
+
+.dropdown-item:focus.word,
+.dropdown-item:hover.word,
+.dropdown-item.active.word {
+  color: var(--md-nav-on-section-color-word);
+  background-color: var(--md-nav-section-color-word);
+}
+
+.dropdown-item:focus.ppt,
+.dropdown-item:hover.ppt,
+.dropdown-item.active.ppt {
+  color: var(--md-nav-on-section-color-ppt);
+  background-color: var(--md-nav-section-color-ppt);
+}
+
+.dropdown-item:focus.security,
+.dropdown-item:hover.security,
+.dropdown-item.active.security {
+  color: var(--md-nav-on-section-color-security);
+  background-color: var(--md-nav-section-color-security);
+}
+
+.dropdown-item:focus.other,
+.dropdown-item:hover.other,
+.dropdown-item.active.other {
+  color: var(--md-nav-on-section-color-other);
+  background-color: var(--md-nav-section-color-other);
+}
+
+.dropdown-item:focus.advance,
+.dropdown-item:hover.advance,
+.dropdown-item.active.advance {
+  color: var(--md-nav-on-section-color-advance);
+  background-color: var(--md-nav-section-color-advance);
+}
+
+/* Dropdown min-width */
+.dropdown-mw-28 {
+  min-width: 280px;
+}
+
+.dropdown-mw-20 {
+  min-width: 200px;
+}
+
+/* Dropdown open on hover */
+.dropdown-menu {
+  padding-top: 0.5rem;
+  top: auto;
+  left: 0;
+}
+
+.dropdown-menu[data-bs-popper] {
+  top: auto;
+  left: 0;
+  margin-top: 0 !important;
+}
+
+.dropdown-menu-wrapper {
+  padding: 1.5rem 0;
+  border-radius: 1rem;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container);
+  border: 1px solid var(--md-sys-color-surface-5);
+  box-shadow: var(--md-sys-elevation-2);
+}
+
+.dropdown-menu-tp {
+  color: transparent;
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.icon-hide {
+  display: inline-flex;
+}
+
+@media (min-width:992px) {
+  .dropdown:hover .dropdown-menu {
+    display: block;
+    margin-top: 0;
+  }
+  .icon-hide {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css
index 455de8605..e8a512240 100644
--- a/src/main/resources/static/css/pdfActions.css
+++ b/src/main/resources/static/css/pdfActions.css
@@ -9,19 +9,33 @@
   opacity: 1;
 }
 
-.pdf-actions_button-container > * {
+.pdf-actions_button-container>* {
   padding: 0.25rem 0.5rem;
-  margin: 3px;
   display: block;
 }
 
+.pdf-actions_button-container>*:focus {
+  box-shadow: none !important;
+}
+
+.pdf-actions_button-container .btn {
+  border-radius: 12px;
+}
+
+.pdf-actions_button-container> :first-child,
+.pdf-actions_container:first-child>.pdf-actions_button-container> :first-child+* {
+  border-radius: 12px 0px 0px 12px;
+}
+
 .pdf-actions_container svg {
   width: 16px;
   height: 16px;
 }
+
 .pdf-actions_container:nth-child(1) .pdf-actions_move-left-button {
   display: none;
 }
+
 .pdf-actions_container:last-child .pdf-actions_move-right-button {
   display: none;
 }
@@ -37,6 +51,25 @@
   transition: opacity 0.2s;
 }
 
+.pdf-actions_insert-file-button-container button .material-symbols-rounded {
+  vertical-align: top;
+}
+
+.pdf-actions_insert-file-button-container.left button,
+.pdf-actions_insert-file-button-container.right button {
+  padding: 0.45rem;
+}
+
+.pdf-actions_button-container button .material-symbols-rounded {
+  font-size: 1.25rem;
+  vertical-align: sub;
+}
+
+.pdf-actions_insert-file-button {
+  padding: 0;
+  vertical-align: sub;
+}
+
 .pdf-actions_insert-file-button-container.left {
   left: -20px;
 }
@@ -63,11 +96,11 @@ html[dir="rtl"] .pdf-actions_insert-file-button-container.left {
   translate: 0 -50%;
 }
 
-html[dir="ltr"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.right {
+html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right {
   display: block;
 }
 
-html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.left {
+html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left {
   display: block;
 }
 
@@ -75,6 +108,7 @@ html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-but
   opacity: 1;
   transition: opacity 0.05s;
 }
+
 .pdf-actions_insert-file-button {
   position: absolute;
   top: 50%;
@@ -82,4 +116,4 @@ html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-but
   translate: 50% -50%;
   aspect-ratio: 1;
   border-radius: 100px;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/pipeline.css b/src/main/resources/static/css/pipeline.css
index 9468333b1..2b7218f7f 100644
--- a/src/main/resources/static/css/pipeline.css
+++ b/src/main/resources/static/css/pipeline.css
@@ -4,18 +4,23 @@
 
 .bordered-box {
   border: 1px solid #ddd;
-  padding: 20px;
-  margin: 20px;
+  padding: 2rem;
+  margin: 2rem;
   width: 70%;
 }
 
 .center-element {
-  width: 80%;
+  width: 100%;
   text-align: center;
   margin: auto;
+  margin-top: 2rem;
 }
 
 .element-margin {
-  margin: 10px 0;
+  margin: 1rem 0;
   /* Adjust this value to increase/decrease the margin as needed */
 }
+
+#pipelineList {
+  margin-bottom: 2rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
new file mode 100644
index 000000000..d588d6869
--- /dev/null
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -0,0 +1,917 @@
+/* Dark Mode Styles */
+body,
+select,
+textarea {
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+}
+
+.transition-theme {
+  transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
+}
+
+
+/*.global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*.global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*.global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*.global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/* Scrollbar */
+*::-webkit-scrollbar {
+  background: var(--md-sys-color-surface);
+  width: 1rem;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--md-sys-color-surface);
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 2rem;
+  background-color: var(--md-sys-color-surface-5);
+  border: 5px solid var(--md-sys-color-surface-5);
+}
+
+/* Alerts */
+.alert {
+  border-radius: 3rem;
+}
+
+/* Table */
+td {
+  word-break: break-word;
+}
+
+.input-group-append {
+  margin: 0rem 0.5rem !important;
+}
+
+.card-header {
+  background-color: transparent;
+  border-bottom: none;
+}
+
+#bg-card {
+  background-color: var(--md-sys-color-surface-5);
+  border-radius: 3rem;
+  padding: 2.5rem;
+}
+
+.card {
+  padding: 1.25rem;
+  border-radius: 2rem;
+  background-color: var(--md-sys-color-surface-5);
+  border: none;
+}
+
+/* Modal */
+.modal-content {
+  background-color: var(--md-sys-color-surface);
+  border-radius: 2rem;
+  border: transparent;
+}
+
+.modal-header,
+.modal-body,
+.modal-footer {
+  background-color: var(--md-sys-color-surface-5);
+  padding: 1.5rem 2rem;
+  border: none;
+}
+
+.modal-header {
+  border-radius: 2rem 2rem 0rem 0rem;
+}
+
+.modal-footer {
+  border-radius: 0rem 0rem 2rem 2rem;
+}
+
+/* Icon fill */
+.material-symbols-rounded {
+  vertical-align: text-top;
+}
+
+/* Navbar Icon*/
+.nav-icon {
+  color: var(--md-sys-color-surface);
+}
+
+.sign .nav-icon,
+.sign.tool-header-icon {
+  color: var(--md-nav-on-section-color-sign);
+  background-color: var(--md-nav-section-color-sign);
+}
+
+.organize .nav-icon,
+.organize.tool-header-icon {
+  color: var(--md-nav-on-section-color-organize);
+  background-color: var(--md-nav-section-color-organize);
+}
+
+.convert .nav-icon,
+.convert.tool-header-icon {
+  color: var(--md-nav-on-section-color-convert);
+  background-color: var(--md-nav-section-color-convert);
+}
+
+.security .nav-icon,
+.security.tool-header-icon {
+  color: var(--md-nav-on-section-color-security);
+  background-color: var(--md-nav-section-color-security);
+}
+
+.other .nav-icon,
+.other.tool-header-icon {
+  color: var(--md-nav-on-section-color-other);
+  background-color: var(--md-nav-section-color-other);
+}
+
+.advance .nav-icon,
+.advance.tool-header-icon {
+  color: var(--md-nav-on-section-color-advance);
+  background-color: var(--md-nav-section-color-advance);
+}
+
+.image .nav-icon,
+.image.tool-header-icon {
+  color: var(--md-nav-on-section-color-image);
+  background-color: var(--md-nav-section-color-image);
+}
+
+.word .nav-icon,
+.word.tool-header-icon {
+  color: var(--md-nav-on-section-color-word);
+  background-color: var(--md-nav-section-color-word);
+}
+
+.ppt .nav-icon,
+.ppt.tool-header-icon {
+  color: var(--md-nav-on-section-color-ppt);
+  background-color: var(--md-nav-section-color-ppt);
+}
+
+/* Tool Page Header*/
+.tool-header {
+  margin-bottom: 2rem;
+}
+
+.tool-header .tool-header-icon {
+  margin: 0px 1rem;
+  height: 4rem;
+  width: 4rem;
+  border-radius: 25px;
+  font-size: 3rem;
+  padding: 0.5rem;
+  vertical-align: middle;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+.tool-header .tool-header-text {
+  font-size: 2.5rem;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+/* Home Card Colors*/
+.feature-card .nav-icon {
+  vertical-align: middle;
+  font-size: 2rem !important;
+  padding: 0.5rem;
+  border-radius: 1.25rem;
+  color: var(--md-sys-color-surface);
+}
+
+.feature-card .sign .nav-icon {
+  color: var(--md-nav-on-section-color-sign);
+  background-color: var(--md-nav-section-color-sign);
+}
+
+.feature-card .organize .nav-icon {
+  color: var(--md-nav-on-section-color-organize);
+  background-color: var(--md-nav-section-color-organize);
+}
+
+.feature-card .convert .nav-icon {
+  color: var(--md-nav-on-section-color-convert);
+  background-color: var(--md-nav-section-color-convert);
+}
+
+.feature-card .security .nav-icon {
+  color: var(--md-nav-on-section-color-security);
+  background-color: var(--md-nav-section-color-security);
+}
+
+.feature-card .other .nav-icon {
+  color: var(--md-nav-on-section-color-other);
+  background-color: var(--md-nav-section-color-other);
+}
+
+.feature-card .advance .nav-icon {
+  color: var(--md-nav-on-section-color-advance);
+  background-color: var(--md-nav-section-color-advance);
+}
+
+.feature-card .image .nav-icon {
+  color: var(--md-nav-on-section-color-image);
+  background-color: var(--md-nav-section-color-image);
+}
+
+.feature-card .word .nav-icon {
+  color: var(--md-nav-on-section-color-word);
+  background-color: var(--md-nav-section-color-word);
+}
+
+.feature-card .ppt .nav-icon {
+  color: var(--md-nav-on-section-color-ppt);
+  background-color: var(--md-nav-section-color-ppt);
+}
+
+/* Buttons Components */
+.btn {
+  border-radius: 1.25rem;
+}
+
+.btn-close {
+  width: auto;
+  height: auto;
+  color: var(--md-sys-color-on-surface);
+  background: transparent;
+}
+
+.btn-close:hover {
+  color: var(--md-sys-color-on-surface);
+}
+
+.modal-header .btn-close {
+  margin: 0;
+}
+
+/* Primary btn */
+.btn-primary {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+  box-shadow: none !important;
+}
+
+.btn-primary.disabled,
+.btn-primary:disabled {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+
+.btn-primary:hover {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:active+.btn-primary,
+.btn-check:checked+.btn-primary,
+.btn-primary.active,
+.btn-primary:active,
+.show>.btn-primary.dropdown-toggle {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:focus+.btn-primary,
+.btn-primary:focus {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+/* Secondary btn */
+.btn-secondary {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+  box-shadow: none !important;
+}
+
+.btn-secondary.disabled,
+.btn-secondary:disabled {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+}
+
+.btn-secondary:hover {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:active+.btn-secondary,
+.btn-check:checked+.btn-secondary,
+.btn-secondary.active,
+.btn-secondary:active,
+.show>.btn-secondary.dropdown-toggle {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:focus+.btn-secondary,
+.btn-secondary:focus {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+/* Danger btn */
+.btn-danger {
+  color: var(--md-sys-color-on-error);
+  background-color: var(--md-sys-color-error);
+  border-color: var(--md-sys-color-error);
+  box-shadow: none !important;
+}
+
+.btn-danger.disabled,
+.btn-danger:disabled {
+  color: var(--md-sys-color-on-error);
+  background-color: var(--md-sys-color-error);
+  border-color: var(--md-sys-color-error);
+}
+
+.btn-danger:hover {
+  color: var(--md-sys-color-on-error);
+  background-color: var(--md-sys-color-error);
+  border-color: var(--md-sys-color-error);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:active+.btn-danger,
+.btn-check:checked+.btn-danger,
+.btn-danger.active,
+.btn-danger:active,
+.show>.btn-danger.dropdown-toggle {
+  color: var(--md-sys-color-on-error);
+  background-color: var(--md-sys-color-error);
+  border-color: var(--md-sys-color-error);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:focus+.btn-danger,
+.btn-danger:focus {
+  color: var(--md-sys-color-on-error);
+  background-color: var(--md-sys-color-error);
+  border-color: var(--md-sys-color-error);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+/* Info btn */
+.btn-info {
+  color: var(--md-sys-color-on-tertiary);
+  background-color: var(--md-sys-color-tertiary);
+  border-color: var(--md-sys-color-tertiary);
+  box-shadow: none !important;
+}
+
+.btn-info .disabled,
+.btn-info:disabled {
+  color: var(--md-sys-color-on-tertiary);
+  background-color: var(--md-sys-color-tertiary);
+  border-color: var(--md-sys-color-tertiary);
+}
+
+.btn-info:hover {
+  color: var(--md-sys-color-on-tertiary);
+  background-color: var(--md-sys-color-tertiary);
+  border-color: var(--md-sys-color-tertiary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:active+.btn-info,
+.btn-check:checked+.btn-info,
+.btn-info .active,
+.btn-info:active,
+.show>.btn-info.dropdown-toggle {
+  color: var(--md-sys-color-on-tertiary);
+  background-color: var(--md-sys-color-tertiary);
+  border-color: var(--md-sys-color-tertiary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+.btn-check:focus+.btn-info,
+.btn-info:focus {
+  color: var(--md-sys-color-on-tertiary);
+  background-color: var(--md-sys-color-tertiary);
+  border-color: var(--md-sys-color-tertiary);
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+/* Info btn */
+.btn-success {
+  box-shadow: none !important;
+}
+
+.btn-success:hover,
+.btn-check:active+.btn-success,
+.btn-check:checked+.btn-success,
+.btn-success .active,
+.btn-success:active,
+.show>.btn-success.dropdown-toggle,
+.btn-check:focus+.btn-success,
+.btn-success:focus {
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+/* Warning btn */
+.btn-warning {
+  box-shadow: none !important;
+}
+
+.btn-warning:hover,
+.btn-check:active+.btn-warning,
+.btn-check:checked+.btn-warning,
+.btn-warning .active,
+.btn-warning:active,
+.show>.btn-warning.dropdown-toggle,
+.btn-check:focus+.btn-warning,
+.btn-warning:focus {
+  box-shadow: var(--md-sys-elevation-3) !important;
+}
+
+/* Outline Primary btn */
+.btn-outline-primary {
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+  border-color: var(--md-sys-color-primary);
+  box-shadow: none !important;
+}
+
+.btn-outline-primary .disabled,
+.btn-outline-primary:disabled {
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+  border-color: var(--md-sys-color-primary);
+}
+
+.btn-outline-primary:hover {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+
+.btn-check:active+.btn-outline-primary,
+.btn-check:checked+.btn-outline-primary,
+.btn-outline-primary .active,
+.btn-outline-primary:active,
+.show>.btn-outline-primary.dropdown-toggle {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+
+.btn-check:focus+.btn-outline-primary,
+.btn-outline-primary:focus {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+
+/* Outline Secondary btn */
+.btn-outline-secondary {
+  color: var(--md-sys-color-secondary);
+  background-color: transparent;
+  border-color: var(--md-sys-color-secondary);
+  box-shadow: none !important;
+}
+
+.btn-outline-secondary .disabled,
+.btn-outline-secondary:disabled {
+  color: var(--md-sys-color-secondary);
+  background-color: transparent;
+  border-color: var(--md-sys-color-secondary);
+}
+
+.btn-outline-secondary:hover {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+}
+
+.btn-check:active+.btn-outline-secondary,
+.btn-check:checked+.btn-outline-secondary,
+.btn-outline-secondary .active,
+.btn-outline-secondary:active,
+.show>.btn-outline-secondary.dropdown-toggle {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+}
+
+.btn-check:focus+.btn-outline-secondary,
+.btn-outline-secondary:focus {
+  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-secondary);
+  border-color: var(--md-sys-color-secondary);
+}
+
+/* Disabled btn */
+.btn.disabled,
+.btn:disabled,
+fieldset:disabled .btn {
+  pointer-events: none;
+  opacity: 0.65;
+}
+
+/* Range Slider */
+.form-range:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 1px var(--md-sys-color-surface), 0 0 0 .25rem var(--md-sys-color-primary)
+}
+
+.form-range:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 1px var(--md-sys-color-surface), 0 0 0 .25rem var(--md-sys-color-primary)
+}
+
+.form-range::-webkit-slider-thumb {
+  background-color: var(--md-sys-color-primary);
+}
+
+
+.form-range::-webkit-slider-thumb:active {
+  background-color: var(--md-sys-color-primary)
+}
+
+.form-range::-webkit-slider-runnable-track {
+  background-color: var(--md-sys-color-on-primary)
+}
+
+.form-range::-moz-range-thumb {
+  background-color: var(--md-sys-color-primary);
+}
+
+
+/* checkbox */
+.form-check {
+  margin-bottom: 1rem;
+}
+
+.form-check-label {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.form-check-input {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0;
+  background-color: var(--md-sys-color-surface);
+  border: 2px solid var(--md-sys-color-outline-variant);
+}
+
+.form-check-input:checked {
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-outline-variant);
+  border: none;
+}
+
+.form-check-input:focus {
+  border-color: var(--md-sys-color-outline-variant);
+  outline: 0;
+  box-shadow: 0 0 0 .25rem var(--md-sys-color-outline-variant);
+}
+
+.form-check-input:checked[type=checkbox] {
+  background-image: none;
+}
+
+.form-check input[type="checkbox"]:checked+span.material-symbols-rounded {
+  display: block;
+}
+
+.form-check span.material-symbols-rounded {
+  display: none;
+  color: var(--md-sys-color-surface);
+  position: absolute;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+.form-check {
+  min-height: 22px;
+  padding-left: 0;
+}
+
+.form-check > label {
+  padding-left: 29px !important;
+  min-height: 22px;
+  line-height: 22px;
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+  margin-bottom: 0;
+  font-weight: normal;
+  cursor: pointer;
+  padding-right: 29px !important;
+}
+
+.form-check > input:first-child {
+  position: absolute !important;
+  opacity: 0;
+  margin: 0;
+  background-color: var(--md-sys-state-hover-opacity);
+  border-radius: 50%;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  display: block;
+  width: 22px;
+  height: 22px;
+  outline: none;
+  transform: scale(1.65);
+  -ms-transform: scale(1.65);
+  transition: opacity .3s;
+}
+
+.form-check > input:first-child:hover {
+  opacity: 1;
+  transform: scale(1.65);
+  -ms-transform: scale(1.65);
+}
+
+.form-check > input:first-child:disabled {
+  cursor: default;
+}
+
+.form-check > input:first-child:disabled + label,
+.form-check > input:first-child:disabled + input[type="hidden"] + label,
+.form-check > input:first-child:disabled + label::before,
+.form-check > input:first-child:disabled + input[type="hidden"] + label::before {
+  pointer-events: none;
+  cursor: default;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  opacity: .65;
+}
+
+.form-check > input:first-child + label::before,
+.form-check > input:first-child + input[type="hidden"] + label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  border-radius: 3px;
+  margin-left: -29px;
+  box-sizing: border-box;
+  margin-right: -29px;
+}
+
+.form-check > input:first-child:checked + label::after,
+.form-check > input:first-child:checked + input[type="hidden"] + label::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 7px;
+  height: 10px;
+  border: solid 2px;
+  border-left: none;
+  border-top: none;
+  transform: translate(7.75px, 4.5px) rotate(45deg);
+  -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+  box-sizing: border-box;
+  right: 0;
+  margin-right: 14px;
+  border-bottom-color: var(--md-sys-color-on-primary);
+  border-right-color: var(--md-sys-color-on-primary);
+}
+
+.form-check > input:first-child::-ms-check {
+  opacity: 0;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-primary);
+}
+
+.form-check > input:first-child:active {
+  transform: scale(0);
+  -ms-transform: scale(0);
+  opacity: 1;
+  transition: opacity 0s, transform 0s;
+}
+
+.form-check > input[type="radio"]:first-child + label::before,
+.form-check > input[type="radio"]:first-child + input[type="hidden"] + label::before {
+  border-radius: 50%;
+}
+
+.form-check > input[type="radio"]:first-child:checked + label::before,
+.form-check > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before {
+  background-color: transparent;
+}
+
+.form-check > input[type="radio"]:first-child:checked + label::after,
+.form-check > input[type="radio"]:first-child:checked + input[type="hidden"] + label::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: none;
+  top: 6px;
+  left: 6px;
+  transform: none;
+  -ms-transform: none;
+}
+
+.form-check > input[type="checkbox"]:first-child:checked + label::after,
+.form-check > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::after {
+  width: 8px;
+  height: 14px;
+  transform: translate(7px, 2px) rotate(45deg);
+  -ms-transform: translate(7px, 2px) rotate(45deg);
+}
+
+.form-check-inline {
+  display: inline-block;
+}
+
+.form-check-inline + .form-check-inline {
+  margin-left: .75rem;
+  margin-top: 6px;
+}
+
+.form-check > input:first-child:checked + label::before,
+.form-check > input:first-child:checked + input[type="hidden"] + label::before {
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+
+/* Forms */
+textarea.form-control {
+  border-radius: 1.5rem !important;
+}
+
+.form-control,
+.form-select,
+.form-control:disabled,
+.form-control[readonly] {
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container-low);
+  border-color: var(--md-sys-color-outline-variant);
+  border-radius: 3rem !important;
+}
+
+.form-control:focus,
+.form-select:focus {
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container-lowest);
+  border-color: var(--md-sys-color-outline-variant);
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant);
+}
+
+/* Navbar Components */
+.navbar-brand {
+  color: var(--md-sys-color-on-surface) !important;
+}
+
+.nav-link {
+  transition: none !important;
+  padding: 0.5rem 1rem !important;
+  border: 1px transparent;
+}
+
+.navbar-nav li {
+  flex: 1;
+}
+
+.navbar-nav .nav-link {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.navbar-nav .nav-link:focus,
+.navbar-nav .nav-link:hover {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-surface-3);
+  border-radius: 3rem;
+  font-weight: 500;
+  font-variation-settings: var(--md-sys-icon-fill-1);
+}
+
+.navbar-nav .nav-link.active,
+.navbar-nav .show>.nav-link {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-surface-5);
+  border-radius: 3rem;
+  font-weight: 500;
+  font-variation-settings: var(--md-sys-icon-fill-1);
+}
+
+.menu-title {
+  padding: 0 1rem;
+}
+
+.dropdown-menu {
+  margin: 0 1%;
+  padding: 1.5rem 0;
+  border-radius: 1rem;
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-container);
+  border: 1px solid var(--md-sys-color-surface-5);
+  box-shadow: var(--md-sys-elevation-2);
+}
+
+.dropdown-item {
+  color: var(--md-sys-color-on-surface);
+  padding: 0.25rem 1rem;
+}
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+  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);
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  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);
+}
+
+/* list-group-item */
+.list-group-item {
+  color: var(--md-sys-color-on-surface);
+  background-color: var(--md-sys-color-surface-5);
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.list-group-item:first-child {
+  border-radius: 1rem 1rem 0rem 0rem;
+}
+
+.list-group-item:last-child {
+  border-radius: 0rem 0rem 1rem 1rem;
+}
+
+.list-group-item:only-child {
+  border-radius: 1rem 1rem 1rem 1rem;
+}
+
+.list-group-item .btn {
+  padding: .375rem .5rem;
+}
+
+/*Alert */
+.alert-container {
+  padding: 2rem 3rem;
+  border-radius: 3rem;
+  margin: 1rem 0rem 2rem;
+}
+
+.alert-header {
+  display: flex !important;
+  justify-content: space-between;
+}
+
+.alert-heading {
+  font-size: calc(1.275rem + .3vw);
+}
+
+.alert-dismissible .btn-close {
+  position: relative;
+  padding: 0;
+}
+
+.alert-danger {
+  color: var(--md-sys-color-on-error-container);
+  background-color: var(--md-sys-color-error-container);
+  border-color: transparent;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/font.css b/src/main/resources/static/css/theme/font.css
new file mode 100644
index 000000000..dfb1c1b8d
--- /dev/null
+++ b/src/main/resources/static/css/theme/font.css
@@ -0,0 +1,22 @@
+@font-face {
+    font-family: 'Material Symbols Rounded';
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(../../fonts/google-symbol.woff2) format('woff2');
+}
+
+.material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/theme.css b/src/main/resources/static/css/theme/theme.css
new file mode 100644
index 000000000..3c9565d10
--- /dev/null
+++ b/src/main/resources/static/css/theme/theme.css
@@ -0,0 +1,34 @@
+:where(html, .light-theme, .dark-theme),
+.tokens,
+:host {
+  /* Define surface colors based on primary color */
+  --md-sys-color-surface-1: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.05) 5%);
+  --md-sys-color-surface-2: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.08) 5%);
+  --md-sys-color-surface-3: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.11) 5%);
+  --md-sys-color-surface-4: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.12) 5%);
+  --md-sys-color-surface-5: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.14) 5%);
+  /* Icon fill */
+  --md-sys-icon-fill-0: 'FILL' 0, 'wght' 500;
+  --md-sys-icon-fill-1: 'FILL' 1, 'wght' 500;
+  /* Hover Color */
+  --md-sys-state-hover-opacity: color-mix(in srgb, var(--md-sys-color-primary), rgba(0, 0, 0, 0) 80%);
+  /* Shadow */
+  --md-sys-color-shadow: #000000;
+  --md-elevation-shadow-color-rgb: 0, 0, 0;
+  --md-elevation-shadow-color: var(--md-elevation-shadow-color-rgb);
+  /* Shadow Elevation*/
+  --md-sys-elevation-0: 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.2), 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.12);
+  --md-sys-elevation-1: 0px 3px 1px -2px rgb(var(--md-elevation-shadow-color), 0.2), 0px 2px 2px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 1px 5px 0px rgb(var(--md-elevation-shadow-color), 0.12);
+  --md-sys-elevation-2: 0px 2px 4px -1px rgb(var(--md-elevation-shadow-color), 0.2), 0px 4px 5px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 1px 10px 0px rgb(var(--md-elevation-shadow-color), 0.12);
+  --md-sys-elevation-3: 0px 5px 5px -3px rgb(var(--md-elevation-shadow-color), 0.2), 0px 8px 10px 1px rgb(var(--md-elevation-shadow-color), 0.14), 0px 3px 14px 2px rgb(var(--md-elevation-shadow-color), 0.12);
+  --md-sys-elevation-4: 0px 5px 5px -3px rgb(var(--md-elevation-shadow-color) / 0.2), 0px 8px 10px 1px rgb(var(--md-elevation-shadow-color), 0.14), 0px 3px 14px 2px rgb(var(--md-elevation-shadow-color), 0.12);
+  --md-sys-elevation-5: 0px 8px 10px -6px rgb(var(--md-elevation-shadow-color), 0.2), 0px 16px 24px 2px rgb(var(--md-elevation-shadow-color), 0.14), 0px 6px 30px 5px rgb(var(--md-elevation-shadow-color), 0.12);
+}
+
+.fill {
+  font-variation-settings: var(--md-sys-icon-fill-1);
+}
+
+.no-fill {
+  font-variation-settings: var(--md-sys-icon-fill-0);
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/theme.dark.css b/src/main/resources/static/css/theme/theme.dark.css
new file mode 100644
index 000000000..ad6657881
--- /dev/null
+++ b/src/main/resources/static/css/theme/theme.dark.css
@@ -0,0 +1,73 @@
+:root {
+    /*  Colors */
+    --md-sys-color-primary: rgb(162 201 255);
+    --md-sys-color-surface-tint: rgb(162 201 255);
+    --md-sys-color-on-primary: rgb(0 49 92);
+    --md-sys-color-primary-container: rgb(0 118 208);
+    --md-sys-color-on-primary-container: rgb(255 255 255);
+    --md-sys-color-secondary: rgb(169 201 246);
+    --md-sys-color-on-secondary: rgb(12 49 87);
+    --md-sys-color-secondary-container: rgb(29 62 100);
+    --md-sys-color-on-secondary-container: rgb(180 210 255);
+    --md-sys-color-tertiary: rgb(193 194 248);
+    --md-sys-color-on-tertiary: rgb(42 44 88);
+    --md-sys-color-tertiary-container: rgb(110 112 161);
+    --md-sys-color-on-tertiary-container: rgb(255 255 255);
+    --md-sys-color-error: rgb(255 180 171);
+    --md-sys-color-on-error: rgb(105 0 5);
+    --md-sys-color-error-container: rgb(147 0 10);
+    --md-sys-color-on-error-container: rgb(255 218 214);
+    --md-sys-color-background: rgb(15 20 26);
+    --md-sys-color-on-background: rgb(223 226 235);
+    --md-sys-color-surface: rgb(15 20 26);
+    --md-sys-color-on-surface: rgb(223 226 235);
+    --md-sys-color-surface-variant: rgb(64 71 83);
+    --md-sys-color-on-surface-variant: rgb(192 199 213);
+    --md-sys-color-outline: rgb(138 145 158);
+    --md-sys-color-outline-variant: rgb(64 71 83);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(223 226 235);
+    --md-sys-color-inverse-on-surface: rgb(45 49 55);
+    --md-sys-color-inverse-primary: rgb(0 96 170);
+    --md-sys-color-primary-fixed: rgb(211 228 255);
+    --md-sys-color-on-primary-fixed: rgb(0 28 56);
+    --md-sys-color-primary-fixed-dim: rgb(162 201 255);
+    --md-sys-color-on-primary-fixed-variant: rgb(0 72 130);
+    --md-sys-color-secondary-fixed: rgb(211 228 255);
+    --md-sys-color-on-secondary-fixed: rgb(0 28 56);
+    --md-sys-color-secondary-fixed-dim: rgb(169 201 246);
+    --md-sys-color-on-secondary-fixed-variant: rgb(40 72 111);
+    --md-sys-color-tertiary-fixed: rgb(225 224 255);
+    --md-sys-color-on-tertiary-fixed: rgb(20 22 66);
+    --md-sys-color-tertiary-fixed-dim: rgb(193 194 248);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112);
+    --md-sys-color-surface-dim: rgb(15 20 26);
+    --md-sys-color-surface-bright: rgb(53 57 64);
+    --md-sys-color-surface-container-lowest: rgb(10 14 20);
+    --md-sys-color-surface-container-low: rgb(24 28 34);
+    --md-sys-color-surface-container: rgb(28 32 38);
+    --md-sys-color-surface-container-high: rgb(38 42 49);
+    --md-sys-color-surface-container-highest: rgb(49 53 60);
+    /* Tools Color */
+    --md-nav-section-color-opacity: 1;
+    --md-nav-on-section-color-opacity: 1;
+    --md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-sign: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity));
+    --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-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));
+    --md-nav-on-section-color-other: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-advance: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-image: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity));
+    --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
new file mode 100644
index 000000000..74101fe28
--- /dev/null
+++ b/src/main/resources/static/css/theme/theme.light.css
@@ -0,0 +1,73 @@
+:root {
+    /* Colors */
+    --md-sys-color-primary: rgb(0 96 170);
+    --md-sys-color-surface-tint: rgb(0 96 170);
+    --md-sys-color-on-primary: rgb(255 255 255);
+    --md-sys-color-primary-container: rgb(80 163 255);
+    --md-sys-color-on-primary-container: rgb(0 20 43);
+    --md-sys-color-secondary: rgb(65 96 136);
+    --md-sys-color-on-secondary: rgb(255 255 255);
+    --md-sys-color-secondary-container: rgb(188 215 255);
+    --md-sys-color-on-secondary-container: rgb(32 65 103);
+    --md-sys-color-tertiary: rgb(88 90 138);
+    --md-sys-color-on-tertiary: rgb(255 255 255);
+    --md-sys-color-tertiary-container: rgb(151 153 205);
+    --md-sys-color-on-tertiary-container: rgb(7 9 55);
+    --md-sys-color-error: rgb(186 26 26);
+    --md-sys-color-on-error: rgb(255 255 255);
+    --md-sys-color-error-container: rgb(255 218 214);
+    --md-sys-color-on-error-container: rgb(65 0 2);
+    --md-sys-color-background: rgb(248 249 255);
+    --md-sys-color-on-background: rgb(24 28 34);
+    --md-sys-color-surface: rgb(248 249 255);
+    --md-sys-color-on-surface: rgb(24 28 34);
+    --md-sys-color-surface-variant: rgb(220 227 241);
+    --md-sys-color-on-surface-variant: rgb(64 71 83);
+    --md-sys-color-outline: rgb(112 119 132);
+    --md-sys-color-outline-variant: rgb(192 199 213);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(45 49 55);
+    --md-sys-color-inverse-on-surface: rgb(238 241 250);
+    --md-sys-color-inverse-primary: rgb(162 201 255);
+    --md-sys-color-primary-fixed: rgb(211 228 255);
+    --md-sys-color-on-primary-fixed: rgb(0 28 56);
+    --md-sys-color-primary-fixed-dim: rgb(162 201 255);
+    --md-sys-color-on-primary-fixed-variant: rgb(0 72 130);
+    --md-sys-color-secondary-fixed: rgb(211 228 255);
+    --md-sys-color-on-secondary-fixed: rgb(0 28 56);
+    --md-sys-color-secondary-fixed-dim: rgb(169 201 246);
+    --md-sys-color-on-secondary-fixed-variant: rgb(40 72 111);
+    --md-sys-color-tertiary-fixed: rgb(225 224 255);
+    --md-sys-color-on-tertiary-fixed: rgb(20 22 66);
+    --md-sys-color-tertiary-fixed-dim: rgb(193 194 248);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112);
+    --md-sys-color-surface-dim: rgb(215 218 227);
+    --md-sys-color-surface-bright: rgb(248 249 255);
+    --md-sys-color-surface-container-lowest: rgb(255 255 255);
+    --md-sys-color-surface-container-low: rgb(241 243 253);
+    --md-sys-color-surface-container: rgb(235 238 247);
+    --md-sys-color-surface-container-high: rgb(229 232 241);
+    --md-sys-color-surface-container-highest: rgb(223 226 235);
+    /* Tools Color */
+    --md-nav-section-color-opacity: 1;
+    --md-nav-on-section-color-opacity: 1;
+    --md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-sign: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity));
+    --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-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));
+    --md-nav-on-section-color-other: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-advance: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-image: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity));
+    --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/fonts/google-symbol.woff2 b/src/main/resources/static/fonts/google-symbol.woff2
new file mode 100644
index 000000000..e96cb008b
Binary files /dev/null and b/src/main/resources/static/fonts/google-symbol.woff2 differ
diff --git a/src/main/resources/static/images/add-page-numbers.svg b/src/main/resources/static/images/add-page-numbers.svg
deleted file mode 100644
index 3ee3396cd..000000000
--- a/src/main/resources/static/images/add-page-numbers.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16">
-  <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961h1.174Zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057h1.138Zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75v.96Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/adjust-contrast.svg b/src/main/resources/static/images/adjust-contrast.svg
deleted file mode 100644
index fea76d92d..000000000
--- a/src/main/resources/static/images/adjust-contrast.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
-  <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
-  <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/arrow-clockwise.svg b/src/main/resources/static/images/arrow-clockwise.svg
deleted file mode 100644
index b072eb097..000000000
--- a/src/main/resources/static/images/arrow-clockwise.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/arrow-left-right.svg b/src/main/resources/static/images/arrow-left-right.svg
deleted file mode 100644
index 8aabd7bea..000000000
--- a/src/main/resources/static/images/arrow-left-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-right" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/award.svg b/src/main/resources/static/images/award.svg
deleted file mode 100644
index 8f572ff07..000000000
--- a/src/main/resources/static/images/award.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
-  <path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
-  <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/blank-file.svg b/src/main/resources/static/images/blank-file.svg
deleted file mode 100644
index 3562fb2b2..000000000
--- a/src/main/resources/static/images/blank-file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file" viewBox="0 0 16 16">
-  <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/book-opened.svg b/src/main/resources/static/images/book-opened.svg
deleted file mode 100644
index e642d31ae..000000000
--- a/src/main/resources/static/images/book-opened.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-	 width="800px" height="800px" viewBox="0 0 318.336 318.336"
-	 xml:space="preserve">
-<g>
-	<g>
-		<path d="M302.137,74.432h-21.031c-30.496-13.614-56.389-20.611-77.028-20.611c-26.731,0-39.245,11.649-44.906,20.535
-			c-5.658-8.886-18.17-20.535-44.906-20.535c-20.638,0-46.533,7.003-77.037,20.611H16.2c-8.946,0-16.2,7.253-16.2,16.2v157.684
-			c0,8.949,7.254,16.2,16.2,16.2h285.937c8.948,0,16.199-7.251,16.199-16.2V90.632C318.336,81.686,311.085,74.432,302.137,74.432z
-			 M154.786,84.265c-0.048,0.25-0.069,0.503-0.069,0.757V233.74c-7.084-8.18-18.95-14.438-38.804-14.438
-			c-35.44,0-79.927,19.432-95.813,26.947V91.528c13.608-6.927,26.31-12.587,38.156-17.096c21.745-8.271,40.526-12.511,56.004-12.511
-			c18.992,0,29.37,6.354,34.986,12.511c3.241,3.554,4.91,7.038,5.698,9.192C154.852,83.985,154.791,84.243,154.786,84.265z
-			 M298.234,246.249c-15.884-7.516-60.371-26.947-95.809-26.947c-19.859,0-31.72,6.254-38.805,14.438
-			c-0.261,0.3-0.562,0.58-0.804,0.886V85.48c0.084-0.351,0.269-0.981,0.583-1.825c0.799-2.149,2.499-5.647,5.776-9.218
-			c5.648-6.157,16.026-12.512,34.9-12.512c15.478,0,34.251,4.24,56.004,12.512c11.854,4.509,24.548,10.17,38.153,17.097V246.249
-			L298.234,246.249z"/>
-	</g>
-</g>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/card-list.svg b/src/main/resources/static/images/card-list.svg
deleted file mode 100644
index 3dc5d429f..000000000
--- a/src/main/resources/static/images/card-list.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16">
-  <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
-  <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/clipboard-data.svg b/src/main/resources/static/images/clipboard-data.svg
deleted file mode 100644
index b4fcb336b..000000000
--- a/src/main/resources/static/images/clipboard-data.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-data" viewBox="0 0 16 16">
-  <path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z"/>
-  <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
-  <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/crop.svg b/src/main/resources/static/images/crop.svg
deleted file mode 100644
index b7e174904..000000000
--- a/src/main/resources/static/images/crop.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-crop" viewBox="0 0 16 16">
-  <path d="M3.5.5A.5.5 0 0 1 4 1v13h13a.5.5 0 0 1 0 1h-2v2a.5.5 0 0 1-1 0v-2H3.5a.5.5 0 0 1-.5-.5V4H1a.5.5 0 0 1 0-1h2V1a.5.5 0 0 1 .5-.5zm2.5 3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4H6.5a.5.5 0 0 1-.5-.5z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/droplet.svg b/src/main/resources/static/images/droplet.svg
deleted file mode 100644
index 2b405d682..000000000
--- a/src/main/resources/static/images/droplet.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
-  <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/eraser-fill.svg b/src/main/resources/static/images/eraser-fill.svg
deleted file mode 100644
index 10959b3d3..000000000
--- a/src/main/resources/static/images/eraser-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eraser-fill" viewBox="0 0 16 16">
-  <path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/extract.svg b/src/main/resources/static/images/extract.svg
deleted file mode 100644
index d21f03eb6..000000000
--- a/src/main/resources/static/images/extract.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-square" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm8.5 9.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/eye-slash.svg b/src/main/resources/static/images/eye-slash.svg
deleted file mode 100644
index c5208375a..000000000
--- a/src/main/resources/static/images/eye-slash.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
-  <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
-  <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
-  <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/eye.svg b/src/main/resources/static/images/eye.svg
deleted file mode 100644
index 412ff6928..000000000
--- a/src/main/resources/static/images/eye.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-  <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-earmark-pdf.svg b/src/main/resources/static/images/file-earmark-pdf.svg
deleted file mode 100644
index 52da96fe4..000000000
--- a/src/main/resources/static/images/file-earmark-pdf.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-pdf" viewBox="0 0 16 16">
-  <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
-  <path d="M4.603 14.087a.81.81 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.68 7.68 0 0 1 1.482-.645 19.697 19.697 0 0 0 1.062-2.227 7.269 7.269 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a10.954 10.954 0 0 0 .98 1.686 5.753 5.753 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.856.856 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.712 5.712 0 0 1-.911-.95 11.651 11.651 0 0 0-1.997.406 11.307 11.307 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.793.793 0 0 1-.58.029zm1.379-1.901c-.166.076-.32.156-.459.238-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361.01.022.02.036.026.044a.266.266 0 0 0 .035-.012c.137-.056.355-.235.635-.572a8.18 8.18 0 0 0 .45-.606zm1.64-1.33a12.71 12.71 0 0 1 1.01-.193 11.744 11.744 0 0 1-.51-.858 20.801 20.801 0 0 1-.5 1.05zm2.446.45c.15.163.296.3.435.41.24.19.407.253.498.256a.107.107 0 0 0 .07-.015.307.307 0 0 0 .094-.125.436.436 0 0 0 .059-.2.095.095 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a3.876 3.876 0 0 0-.612-.053zM8.078 7.8a6.7 6.7 0 0 0 .2-.828c.031-.188.043-.343.038-.465a.613.613 0 0 0-.032-.198.517.517 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822.024.111.054.227.09.346z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-earmark-ppt.svg b/src/main/resources/static/images/file-earmark-ppt.svg
deleted file mode 100644
index bedf55261..000000000
--- a/src/main/resources/static/images/file-earmark-ppt.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-ppt" viewBox="0 0 16 16">
-  <path d="M7 5.5a1 1 0 0 0-1 1V13a.5.5 0 0 0 1 0v-2h1.188a2.75 2.75 0 0 0 0-5.5H7zM8.188 10H7V6.5h1.188a1.75 1.75 0 1 1 0 3.5z"/>
-  <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-earmark-richtext.svg b/src/main/resources/static/images/file-earmark-richtext.svg
deleted file mode 100644
index 35af14671..000000000
--- a/src/main/resources/static/images/file-earmark-richtext.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-richtext" viewBox="0 0 16 16">
-  <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-  <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-earmark-word.svg b/src/main/resources/static/images/file-earmark-word.svg
deleted file mode 100644
index 7186b69ec..000000000
--- a/src/main/resources/static/images/file-earmark-word.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-word" viewBox="0 0 16 16">
-  <path d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .967.01L8 9.402l1.018 3.73a.5.5 0 0 0 .967-.01l1.5-6a.5.5 0 0 0-.97-.242l-1.036 4.144-.997-3.655a.5.5 0 0 0-.964 0l-.997 3.655L5.485 6.88z"/>
-  <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-earmark-x.svg b/src/main/resources/static/images/file-earmark-x.svg
deleted file mode 100644
index bedb970d2..000000000
--- a/src/main/resources/static/images/file-earmark-x.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-x" viewBox="0 0 16 16">
-  <path d="M6.854 7.146a.5.5 0 1 0-.708.708L7.293 9l-1.147 1.146a.5.5 0 0 0 .708.708L8 9.707l1.146 1.147a.5.5 0 0 0 .708-.708L8.707 9l1.147-1.146a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146z"/>
-  <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-pdf.svg b/src/main/resources/static/images/file-pdf.svg
deleted file mode 100644
index e8ba0a157..000000000
--- a/src/main/resources/static/images/file-pdf.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-pdf" viewBox="0 0 16 16">
-  <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
-  <path d="M4.603 12.087a.81.81 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.68 7.68 0 0 1 1.482-.645 19.701 19.701 0 0 0 1.062-2.227 7.269 7.269 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.187-.012.395-.047.614-.084.51-.27 1.134-.52 1.794a10.954 10.954 0 0 0 .98 1.686 5.753 5.753 0 0 1 1.334.05c.364.065.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.856.856 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.716 5.716 0 0 1-.911-.95 11.642 11.642 0 0 0-1.997.406 11.311 11.311 0 0 1-1.021 1.51c-.29.35-.608.655-.926.787a.793.793 0 0 1-.58.029zm1.379-1.901c-.166.076-.32.156-.459.238-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361.01.022.02.036.026.044a.27.27 0 0 0 .035-.012c.137-.056.355-.235.635-.572a8.18 8.18 0 0 0 .45-.606zm1.64-1.33a12.647 12.647 0 0 1 1.01-.193 11.666 11.666 0 0 1-.51-.858 20.741 20.741 0 0 1-.5 1.05zm2.446.45c.15.162.296.3.435.41.24.19.407.253.498.256a.107.107 0 0 0 .07-.015.307.307 0 0 0 .094-.125.436.436 0 0 0 .059-.2.095.095 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a3.881 3.881 0 0 0-.612-.053zM8.078 5.8a6.7 6.7 0 0 0 .2-.828c.031-.188.043-.343.038-.465a.613.613 0 0 0-.032-.198.517.517 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822.024.111.054.227.09.346z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file-zip.svg b/src/main/resources/static/images/file-zip.svg
deleted file mode 100644
index 3da93c8ce..000000000
--- a/src/main/resources/static/images/file-zip.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-zip" viewBox="0 0 16 16">
-  <path d="M6.5 7.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.109 0l-.93-.62a1 1 0 0 1-.415-1.074l.4-1.599V7.5zm2 0h-1v.938a1 1 0 0 1-.03.243l-.4 1.598.93.62.93-.62-.4-1.598a1 1 0 0 1-.03-.243V7.5z"/>
-  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm5.5-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9v1H8v1h1v1H8v1h1v1H7.5V5h-1V4h1V3h-1V2h1V1z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/file.svg b/src/main/resources/static/images/file.svg
deleted file mode 100644
index c3d086b9c..000000000
--- a/src/main/resources/static/images/file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark" viewBox="0 0 16 16">
-  <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/filetype-html.svg b/src/main/resources/static/images/filetype-html.svg
deleted file mode 100644
index 35d721856..000000000
--- a/src/main/resources/static/images/filetype-html.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-html" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-9.736 7.35v3.999h-.791v-1.714H1.79v1.714H1V11.85h.791v1.626h1.682V11.85h.79Zm2.251.662v3.337h-.794v-3.337H4.588v-.662h3.064v.662H6.515Zm2.176 3.337v-2.66h.038l.952 2.159h.516l.946-2.16h.038v2.661h.715V11.85h-.8l-1.14 2.596H9.93L8.79 11.85h-.805v3.999h.706Zm4.71-.674h1.696v.674H12.61V11.85h.79v3.325Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/filetype-txt.svg b/src/main/resources/static/images/filetype-txt.svg
deleted file mode 100644
index 6fae02a04..000000000
--- a/src/main/resources/static/images/filetype-txt.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-txt" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-2v-1h2a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.928 15.849v-3.337h1.136v-.662H0v.662h1.134v3.337h.794Zm4.689-3.999h-.894L4.9 13.289h-.035l-.832-1.439h-.932l1.228 1.983-1.24 2.016h.862l.853-1.415h.035l.85 1.415h.907l-1.253-1.992 1.274-2.007Zm1.93.662v3.337h-.794v-3.337H6.619v-.662h3.064v.662H8.546Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/filetype-xml.svg b/src/main/resources/static/images/filetype-xml.svg
deleted file mode 100644
index d82264553..000000000
--- a/src/main/resources/static/images/filetype-xml.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-xml" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.527 11.85h-.893l-.823 1.439h-.036L.943 11.85H.012l1.227 1.983L0 15.85h.861l.853-1.415h.035l.85 1.415h.908l-1.254-1.992 1.274-2.007Zm.954 3.999v-2.66h.038l.952 2.159h.516l.946-2.16h.038v2.661h.715V11.85h-.8l-1.14 2.596h-.025L4.58 11.85h-.806v3.999h.706Zm4.71-.674h1.696v.674H8.4V11.85h.791v3.325Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/flags/sk.svg b/src/main/resources/static/images/flags/sk.svg
new file mode 100644
index 000000000..81476940e
--- /dev/null
+++ b/src/main/resources/static/images/flags/sk.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sk" viewBox="0 0 640 480">
+  <path fill="#ee1c25" d="M0 0h640v480H0z"/>
+  <path fill="#0b4ea2" d="M0 0h640v320H0z"/>
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#fff" d="M233 370.8c-43-20.7-104.6-61.9-104.6-143.2 0-81.4 4-118.4 4-118.4h201.3s3.9 37 3.9 118.4S276 350 233 370.8"/>
+  <path fill="#ee1c25" d="M233 360c-39.5-19-96-56.8-96-131.4s3.6-108.6 3.6-108.6h184.8s3.5 34 3.5 108.6C329 303.3 272.5 341 233 360"/>
+  <path fill="#fff" d="M241.4 209c10.7.2 31.6.6 50.1-5.6 0 0-.4 6.7-.4 14.4s.5 14.4.5 14.4c-17-5.7-38.1-5.8-50.2-5.7v41.2h-16.8v-41.2c-12-.1-33.1 0-50.1 5.7 0 0 .5-6.7.5-14.4 0-7.8-.5-14.4-.5-14.4 18.5 6.2 39.4 5.8 50 5.6v-25.9c-9.7 0-23.7.4-39.6 5.7 0 0 .5-6.6.5-14.4 0-7.7-.5-14.4-.5-14.4 15.9 5.3 29.9 5.8 39.6 5.7-.5-16.4-5.3-37-5.3-37s9.9.7 13.8.7c4 0 13.8-.7 13.8-.7s-4.8 20.6-5.3 37c9.7.1 23.7-.4 39.6-5.7 0 0-.5 6.7-.5 14.4 0 7.8.5 14.4.5 14.4a119 119 0 0 0-39.7-5.7v26z"/>
+  <path fill="#0b4ea2" d="M233 263.3c-19.9 0-30.5 27.5-30.5 27.5s-6-13-22.2-13c-11 0-19 9.7-24.2 18.8 20 31.7 51.9 51.3 76.9 63.4 25-12 57-31.7 76.9-63.4-5.2-9-13.2-18.8-24.2-18.8-16.2 0-22.2 13-22.2 13S253 263.3 233 263.3"/>
+</svg>
diff --git a/src/main/resources/static/images/flatten.svg b/src/main/resources/static/images/flatten.svg
deleted file mode 100644
index 944240cfa..000000000
--- a/src/main/resources/static/images/flatten.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="16"
-   height="16"
-   fill="currentColor"
-   class="bi bi-ui-checks"
-   viewBox="0 0 16 16"
-   version="1.1"
-   id="svg826"
-   sodipodi:docname="no-checklist-black.svg"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs830" />
-  <sodipodi:namedview
-     id="namedview828"
-     pagecolor="#ffffff"
-     bordercolor="#999999"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="55.8125"
-     inkscape:cx="12.452408"
-     inkscape:cy="11.950728"
-     inkscape:current-layer="svg826" />
-  <path
-     d="M 7,2.5 C 7,2.2238576 7.2238576,2 7.5,2 h 7 C 14.776142,2 15,2.2238576 15,2.5 v 1 C 15,3.7761424 14.776142,4 14.5,4 h -7 C 7.2238576,4 7,3.7761424 7,3.5 Z M 2,1 C 0.8954305,1 0,1.8954305 0,3 V 5 C 0,6.1045695 0.8954305,7 2,7 H 4 C 5.1045695,7 6,6.1045695 6,5 V 3 C 6,1.8954305 5.1045695,1 4,1 Z M 2,9 C 0.8954305,9 0,9.8954305 0,11 v 2 c 0,1.104569 0.8954305,2 2,2 h 2 c 1.1045695,0 2,-0.895431 2,-2 V 11 C 6,9.8954305 5.1045695,9 4,9 Z M 2.854,5.354 c -0.1953639,0.1958584 -0.5126361,0.1958584 -0.708,0 l -1,-1 C 0.6740002,3.8820002 1.3820002,3.1740002 1.854,3.646 L 2.5,4.293 4.146,2.646 C 4.6179998,2.1740002 5.3259998,2.8820002 4.854,3.354 Z m 0,8 c -0.1953639,0.195858 -0.5126361,0.195858 -0.708,0 l -1,-1 C 0.67400022,11.882 1.3820002,11.174 1.854,11.646 L 2.5,12.293 4.146,10.646 c 0.4719998,-0.472 1.1799998,0.236 0.708,0.708 z M 7,10.5 C 7,10.223858 7.2238576,10 7.5,10 h 7 c 0.276142,0 0.5,0.223858 0.5,0.5 v 1 c 0,0.276142 -0.223858,0.5 -0.5,0.5 h -7 C 7.2238576,12 7,11.776142 7,11.5 Z m 0,-5 C 7,5.2238576 7.2238576,5 7.5,5 h 5 c 0.666666,0 0.666666,1 0,1 h -5 C 7.2238576,6 7,5.7761424 7,5.5 Z m 0,8 C 7,13.223858 7.2238576,13 7.5,13 h 5 c 0.666666,0 0.666666,1 0,1 h -5 C 7.2238576,14 7,13.776142 7,13.5 Z"
-     id="path824"
-     sodipodi:nodetypes="sssssssssssssssssssssssssssccscccscccscccscsssssssssssssssssssss"
-     style="fill:#000000" />
-  <path
-     d="m 0.14896862,0.16984545 c 0.1879493,-0.2023109 0.51141627,-0.22131574 0.7066285,-0.026004 L 15.795251,15.091111 c 0.471284,0.471524 -0.209339,1.204159 -0.680625,0.732632 L 0.17497212,0.87647378 C -0.02024026,0.68116189 -0.03898081,0.37215613 0.14896862,0.16984545 Z"
-     id="path937"
-     sodipodi:nodetypes="ssssss"
-     style="fill:#000000" />
-</svg>
diff --git a/src/main/resources/static/images/fonts.svg b/src/main/resources/static/images/fonts.svg
deleted file mode 100644
index 3afc7d2ea..000000000
--- a/src/main/resources/static/images/fonts.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fonts" viewBox="0 0 16 16">
-  <path d="M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479L12.258 3z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/gear.svg b/src/main/resources/static/images/gear.svg
deleted file mode 100644
index c11dbc1db..000000000
--- a/src/main/resources/static/images/gear.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
-  <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
-  <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/html.svg b/src/main/resources/static/images/html.svg
deleted file mode 100644
index 35d721856..000000000
--- a/src/main/resources/static/images/html.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-html" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-9.736 7.35v3.999h-.791v-1.714H1.79v1.714H1V11.85h.791v1.626h1.682V11.85h.79Zm2.251.662v3.337h-.794v-3.337H4.588v-.662h3.064v.662H6.515Zm2.176 3.337v-2.66h.038l.952 2.159h.516l.946-2.16h.038v2.661h.715V11.85h-.8l-1.14 2.596H9.93L8.79 11.85h-.805v3.999h.706Zm4.71-.674h1.696v.674H12.61V11.85h.79v3.325Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/image.svg b/src/main/resources/static/images/image.svg
deleted file mode 100644
index 1e1964b43..000000000
--- a/src/main/resources/static/images/image.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-image" viewBox="0 0 16 16">
-  <path d="M6.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
-  <path d="M14 14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5V14zM4 1a1 1 0 0 0-1 1v10l2.224-2.224a.5.5 0 0 1 .61-.075L8 11l2.157-3.02a.5.5 0 0 1 .76-.063L13 10V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/images.svg b/src/main/resources/static/images/images.svg
deleted file mode 100644
index b35ecebcb..000000000
--- a/src/main/resources/static/images/images.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16">
-  <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
-  <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/info.svg b/src/main/resources/static/images/info.svg
deleted file mode 100644
index 8f48f86cb..000000000
--- a/src/main/resources/static/images/info.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/js.svg b/src/main/resources/static/images/js.svg
deleted file mode 100644
index 8b198bfcd..000000000
--- a/src/main/resources/static/images/js.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-js" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H8v-1h4a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.186 15.29a1.176 1.176 0 0 1-.111-.449h.765a.578.578 0 0 0 .255.384c.07.049.153.087.249.114.095.028.202.041.319.041.164 0 .302-.023.413-.07a.559.559 0 0 0 .255-.193.507.507 0 0 0 .085-.29.387.387 0 0 0-.153-.326c-.101-.08-.255-.144-.462-.193l-.619-.143a1.72 1.72 0 0 1-.539-.214 1.001 1.001 0 0 1-.351-.367 1.068 1.068 0 0 1-.123-.524c0-.244.063-.457.19-.639.127-.181.303-.322.528-.422.224-.1.483-.149.776-.149.305 0 .564.05.78.152.216.102.383.239.5.41.12.17.186.359.2.566h-.75a.56.56 0 0 0-.12-.258.624.624 0 0 0-.247-.181.923.923 0 0 0-.369-.068c-.217 0-.388.05-.513.152a.472.472 0 0 0-.184.384c0 .121.048.22.143.3a.97.97 0 0 0 .405.175l.62.143c.218.05.406.12.566.211.16.09.285.21.375.358.09.148.135.335.135.56 0 .247-.063.466-.188.656a1.216 1.216 0 0 1-.539.439c-.234.105-.52.158-.858.158-.254 0-.476-.03-.665-.09a1.404 1.404 0 0 1-.478-.252 1.13 1.13 0 0 1-.29-.375Zm-3.104-.033A1.32 1.32 0 0 1 0 14.791h.765a.576.576 0 0 0 .073.27.499.499 0 0 0 .454.246c.19 0 .33-.055.422-.164.092-.11.138-.265.138-.466v-2.745h.79v2.725c0 .44-.119.774-.357 1.005-.236.23-.564.345-.984.345a1.59 1.59 0 0 1-.569-.094 1.145 1.145 0 0 1-.407-.266 1.14 1.14 0 0 1-.243-.39Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/layout-split.svg b/src/main/resources/static/images/layout-split.svg
deleted file mode 100644
index 71f33d2e7..000000000
--- a/src/main/resources/static/images/layout-split.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layout-split" viewBox="0 0 16 16">
-  <path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm8.5-1v12H14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8.5zm-1 0H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5.5V2z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/lock.svg b/src/main/resources/static/images/lock.svg
deleted file mode 100644
index b50a68ef1..000000000
--- a/src/main/resources/static/images/lock.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
-  <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/markdown.svg b/src/main/resources/static/images/markdown.svg
deleted file mode 100644
index ca5cd597d..000000000
--- a/src/main/resources/static/images/markdown.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-md" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H9v-1h3a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM.706 13.189v2.66H0V11.85h.806l1.14 2.596h.026l1.14-2.596h.8v3.999h-.716v-2.66h-.038l-.946 2.159h-.516l-.952-2.16H.706Zm3.919 2.66V11.85h1.459c.406 0 .741.078 1.005.234.263.157.46.383.589.68.13.297.196.655.196 1.075 0 .422-.066.784-.196 1.084-.131.301-.33.53-.595.689-.264.158-.597.237-1 .237H4.626Zm1.353-3.354h-.562v2.707h.562c.186 0 .347-.028.484-.082a.8.8 0 0 0 .334-.252 1.14 1.14 0 0 0 .196-.422c.045-.168.067-.365.067-.592a2.1 2.1 0 0 0-.117-.753.89.89 0 0 0-.354-.454c-.159-.102-.362-.152-.61-.152Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/no-chat.svg b/src/main/resources/static/images/no-chat.svg
deleted file mode 100644
index 8db220383..000000000
--- a/src/main/resources/static/images/no-chat.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="16" height="16" fill="currentColor" class="bi bi-chat-left-text" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" style="fill: rgb(0, 0, 0);"/>
-  <path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5" style="fill: rgb(0, 0, 0);"/>
-  <path d="M 0.125 0.178 C 0.312 -0.024 0.636 -0.043 0.831 0.152 L 15.771 15.1 C 16.242 15.571 15.561 16.304 15.09 15.832 L 0.151 0.885 C -0.045 0.69 -0.063 0.381 0.125 0.178 Z" id="path937" style="fill: rgb(0, 0, 0);"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/overlay.svg b/src/main/resources/static/images/overlay.svg
deleted file mode 100644
index 393ce40c9..000000000
--- a/src/main/resources/static/images/overlay.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layers" viewBox="0 0 16 16">
-  <path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/page-layout.svg b/src/main/resources/static/images/page-layout.svg
deleted file mode 100644
index bc505957f..000000000
--- a/src/main/resources/static/images/page-layout.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
-  <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/pdf-csv.svg b/src/main/resources/static/images/pdf-csv.svg
deleted file mode 100644
index 95d68c105..000000000
--- a/src/main/resources/static/images/pdf-csv.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-35.3 0-64 28.7-64 64V512H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM200 352h16c22.1 0 40 17.9 40 40v8c0 8.8-7.2 16-16 16s-16-7.2-16-16v-8c0-4.4-3.6-8-8-8H200c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-8c0-8.8 7.2-16 16-16s16 7.2 16 16v8c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V392c0-22.1 17.9-40 40-40zm133.1 0H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H333.1c-7.2 0-13.1 5.9-13.1 13.1c0 5.2 3 9.9 7.8 12l37.4 16.6c16.3 7.2 26.8 23.4 26.8 41.2c0 24.9-20.2 45.1-45.1 45.1H304c-8.8 0-16-7.2-16-16s7.2-16 16-16h42.9c7.2 0 13.1-5.9 13.1-13.1c0-5.2-3-9.9-7.8-12l-37.4-16.6c-16.3-7.2-26.8-23.4-26.8-41.2c0-24.9 20.2-45.1 45.1-45.1zm98.9 0c8.8 0 16 7.2 16 16v31.6c0 23 5.5 45.6 16 66c10.5-20.3 16-42.9 16-66V368c0-8.8 7.2-16 16-16s16 7.2 16 16v31.6c0 34.7-10.3 68.7-29.6 97.6l-5.1 7.7c-3 4.5-8 7.1-13.3 7.1s-10.3-2.7-13.3-7.1l-5.1-7.7c-19.3-28.9-29.6-62.9-29.6-97.6V368c0-8.8 7.2-16 16-16z"/></svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/pipeline.svg b/src/main/resources/static/images/pipeline.svg
deleted file mode 100644
index 48722d0c4..000000000
--- a/src/main/resources/static/images/pipeline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bezier2" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h1A1.5 1.5 0 0 1 5 2.5h4.134a1 1 0 1 1 0 1h-2.01c.18.18.34.381.484.605.638.992.892 2.354.892 3.895 0 1.993.257 3.092.713 3.7.356.476.895.721 1.787.784A1.5 1.5 0 0 1 12.5 11h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5H6.866a1 1 0 1 1 0-1h1.711a2.839 2.839 0 0 1-.165-.2C7.743 11.407 7.5 10.007 7.5 8c0-1.46-.246-2.597-.733-3.355-.39-.605-.952-1-1.767-1.112A1.5 1.5 0 0 1 3.5 5h-1A1.5 1.5 0 0 1 1 3.5v-1zM2.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10 10a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/sanitize.svg b/src/main/resources/static/images/sanitize.svg
deleted file mode 100644
index fc4dd2f98..000000000
--- a/src/main/resources/static/images/sanitize.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h48v48h-48z" fill="none"/><path d="m8.091 21c0 1.089-.576 1.695-1.304 2.464-.755.797-1.696 1.788-1.696 3.394v11.142c0 2.757 2.243 5 5 5h12c2.757 0 5-2.243 5-5v-11.143c0-2.316-2.045-3.302-4.022-4.254-2.447-1.179-4.978-2.397-4.978-6.104v-.215l-.088-.195c-.081-.179-.287-.608-.6-1.09h1.969l2.032-1.242 5.949 5.949 1.414-1.414-5.608-5.608 1.841-1.123v-6.561h-14.186l-5.713 3.428-.12 6.572h3.46c-.219.456-.351.961-.351 1.5v4.5zm-1.01-11.428 4.287-2.572h11.632v3.439l-4.19 2.561h-4.219-3-4.572zm3.01 11.428v-4.5c0-.827.673-1.5 1.5-1.5h3c.341 0 1.054.832 1.502 1.731.108 4.784 3.569 6.451 6.107 7.674 1.846.89 2.89 1.441 2.89 2.452v11.143c0 1.654-1.346 3-3 3h-12c-1.654 0-3-1.346-3-3v-11.143c0-.771.415-1.244 1.147-2.017.826-.87 1.854-1.953 1.854-3.84z"/><path d="m15.091 38h2v-5h5v-2h-5v-5h-2v5h-5v2h5z"/><circle cx="30.091" cy="8" r="2"/><circle cx="36.091" cy="8" r="2"/><circle cx="42.091" cy="8" r="2"/><circle cx="33.091" cy="13" r="2"/><circle cx="37.091" cy="17" r="2"/></svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/scale-pages.svg b/src/main/resources/static/images/scale-pages.svg
deleted file mode 100644
index dc0acc3ca..000000000
--- a/src/main/resources/static/images/scale-pages.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/scales.svg b/src/main/resources/static/images/scales.svg
deleted file mode 100644
index 61b9c381f..000000000
--- a/src/main/resources/static/images/scales.svg
+++ /dev/null
@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
-<svg
-    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:cc="http://web.resource.org/cc/"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    xmlns:dc="http://purl.org/dc/elements/1.1/"
-    xmlns:svg="http://www.w3.org/2000/svg"
-    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-    xmlns:ns1="http://sozi.baierouge.fr"
-    id="Layer_1"
-    style="enable-background:new 0 0 333.33 287.889"
-    xml:space="preserve"
-    viewBox="0 0 333.33 287.889"
-    version="1.1"
-    y="0px"
-    x="0px"
-  >
-<g
-    >
-	<polygon
-        style="fill:none"
-        points="19.374 136.98 98.932 136.98 59.083 18.273"
-    />
-	<polygon
-        style="fill:none"
-        points="235.57 191.34 315.13 191.34 275.28 72.635"
-    />
-	<path
-        d="m318.63 191.34l-42.85-127.63 6.892 1.386c-0.563 2.401 0.902 4.816 3.304 5.41 2.419 0.599 4.869-0.877 5.47-3.298 0.602-2.42-0.878-4.868-3.301-5.469-2.095-0.518-4.205 0.523-5.125 2.384l-58.16-17.14-54.361-16.029-0.509-9.298c5.801-0.21 10.444-4.966 10.444-10.818 0.01-5.985-4.85-10.838-10.84-10.838-5.985 0-10.837 4.853-10.837 10.838 0 5.288 3.79 9.686 8.8 10.64l-0.477 8.708-53.87-10.838-60.542-12.179c0.08-2.094-1.315-4.028-3.429-4.552-2.419-0.599-4.867 0.879-5.466 3.299-0.599 2.421 0.877 4.869 3.297 5.468 2.418 0.598 4.865-0.876 5.468-3.292l5.889 1.736-42.537 127.15h-15.88s9.255 20.324 58.069 20.324 54.804-20.324 54.804-20.324h-10.446l-42.535-126.72 51.784 15.269 54.78 16.151-11.76 214.82s0.461 9.693-14.772 12.002c-15.234 2.308-34.621 3.229-43.853 8.309-9.233 5.078-10.617 11.078-10.617 11.078h166.64s-1.386-6-10.615-11.078c-9.234-5.079-28.621-6.001-43.854-8.309-15.233-2.309-14.772-12.002-14.772-12.002l-11.72-213.83 52.188 10.499 51.506 10.362-42.755 127.82h-11.623s9.255 20.324 58.068 20.324 54.804-20.324 54.804-20.324h-14.7zm-219.7-54.36h-79.558l39.709-118.71 39.849 118.71zm136.64 54.36l39.708-118.71 39.85 118.71h-79.56z"
-    />
-</g
-  >
-<metadata
-    ><rdf:RDF
-      ><cc:Work
-        ><dc:format
-          >image/svg+xml</dc:format
-        ><dc:type
-            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
-        /><cc:license
-            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
-        /><dc:publisher
-          ><cc:Agent
-              rdf:about="http://openclipart.org/"
-            ><dc:title
-              >Openclipart</dc:title
-            ></cc:Agent
-          ></dc:publisher
-        ><dc:title
-          >scales of justice</dc:title
-        ><dc:date
-          >2009-06-26T04:35:18</dc:date
-        ><dc:description
-        /><dc:source
-          >https://openclipart.org/detail/26849/scales-of-justice-by-johnny_automatic</dc:source
-        ><dc:creator
-          ><cc:Agent
-            ><dc:title
-              >johnny_automatic</dc:title
-            ></cc:Agent
-          ></dc:creator
-        ><dc:subject
-          ><rdf:Bag
-            ><rdf:li
-              >justice</rdf:li
-            ><rdf:li
-              >law</rdf:li
-            ><rdf:li
-              >measurement</rdf:li
-            ><rdf:li
-              >scales</rdf:li
-            ><rdf:li
-              >silhouette</rdf:li
-            ><rdf:li
-              >weight</rdf:li
-            ></rdf:Bag
-          ></dc:subject
-        ></cc:Work
-      ><cc:License
-          rdf:about="http://creativecommons.org/licenses/publicdomain/"
-        ><cc:permits
-            rdf:resource="http://creativecommons.org/ns#Reproduction"
-        /><cc:permits
-            rdf:resource="http://creativecommons.org/ns#Distribution"
-        /><cc:permits
-            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
-        /></cc:License
-      ></rdf:RDF
-    ></metadata
-  ></svg
->
diff --git a/src/main/resources/static/images/scanner.svg b/src/main/resources/static/images/scanner.svg
deleted file mode 100644
index 4dca053b8..000000000
--- a/src/main/resources/static/images/scanner.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	 viewBox="0 0 32 32" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M30,20H3v6c0,1.1,0.9,2,2,2h23c1.1,0,2-0.9,2-2V20z"/>
-<line class="st0" x1="30" y1="20" x2="3" y2="4"/>
-<line class="st0" x1="7" y1="24" x2="10" y2="24"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/search.svg b/src/main/resources/static/images/search.svg
deleted file mode 100644
index d3dc7ca16..000000000
--- a/src/main/resources/static/images/search.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
-  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/shield-check.svg b/src/main/resources/static/images/shield-check.svg
deleted file mode 100644
index ecbf54399..000000000
--- a/src/main/resources/static/images/shield-check.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-check" viewBox="0 0 16 16">
-  <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
-  <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/shield-lock.svg b/src/main/resources/static/images/shield-lock.svg
deleted file mode 100644
index ff3842503..000000000
--- a/src/main/resources/static/images/shield-lock.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-lock" viewBox="0 0 16 16">
-  <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
-  <path d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/sign.svg b/src/main/resources/static/images/sign.svg
deleted file mode 100644
index 013acc258..000000000
--- a/src/main/resources/static/images/sign.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-vector-pen" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M10.646.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-1.902 1.902-.829 3.313a1.5 1.5 0 0 1-1.024 1.073L1.254 14.746 4.358 4.4A1.5 1.5 0 0 1 5.43 3.377l3.313-.828L10.646.646zm-1.8 2.908-3.173.793a.5.5 0 0 0-.358.342l-2.57 8.565 8.567-2.57a.5.5 0 0 0 .34-.357l.794-3.174-3.6-3.6z"/>
-  <path fill-rule="evenodd" d="M2.832 13.228 8 9a1 1 0 1 0-1-1l-4.228 5.168-.026.086.086-.026z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/single-page.svg b/src/main/resources/static/images/single-page.svg
deleted file mode 100644
index 4f57d79b7..000000000
--- a/src/main/resources/static/images/single-page.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-1-square" viewBox="0 0 16 16">
-  <path d="M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z"/>
-  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/sort-numeric-down.svg b/src/main/resources/static/images/sort-numeric-down.svg
deleted file mode 100644
index 57a3fb030..000000000
--- a/src/main/resources/static/images/sort-numeric-down.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-numeric-down" viewBox="0 0 16 16">
-  <path d="M12.438 1.668V7H11.39V2.684h-.051l-1.211.859v-.969l1.262-.906h1.046z"/>
-  <path fill-rule="evenodd" d="M11.36 14.098c-1.137 0-1.708-.657-1.762-1.278h1.004c.058.223.343.45.773.45.824 0 1.164-.829 1.133-1.856h-.059c-.148.39-.57.742-1.261.742-.91 0-1.72-.613-1.72-1.758 0-1.148.848-1.835 1.973-1.835 1.09 0 2.063.636 2.063 2.687 0 1.867-.723 2.848-2.145 2.848zm.062-2.735c.504 0 .933-.336.933-.972 0-.633-.398-1.008-.94-1.008-.52 0-.927.375-.927 1 0 .64.418.98.934.98z"/>
-  <path d="M4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293V2.5z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/stamp.svg b/src/main/resources/static/images/stamp.svg
deleted file mode 100644
index aa35a6cba..000000000
--- a/src/main/resources/static/images/stamp.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postage-heart" viewBox="0 0 16 16">
-  <path d="M3.5 1a1 1 0 0 0 1-1h1a1 1 0 0 0 2 0h1a1 1 0 0 0 2 0h1a1 1 0 1 0 2 0H15v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1h-1.5a1 1 0 1 0-2 0h-1a1 1 0 1 0-2 0h-1a1 1 0 1 0-2 0h-1a1 1 0 1 0-2 0H1v-1a1 1 0 1 0 0-2v-1a1 1 0 1 0 0-2V9a1 1 0 1 0 0-2V6a1 1 0 0 0 0-2V3a1 1 0 0 0 0-2V0h1.5a1 1 0 0 0 1 1M3 3v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1"/>
-  <path d="M8 11C2.175 7.236 6.336 4.31 8 5.982 9.664 4.309 13.825 7.236 8 11"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/star-fill.svg b/src/main/resources/static/images/star-fill.svg
deleted file mode 100644
index de09c4aa5..000000000
--- a/src/main/resources/static/images/star-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
-  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/star.svg b/src/main/resources/static/images/star.svg
deleted file mode 100644
index 742b5e250..000000000
--- a/src/main/resources/static/images/star.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
-  <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/suit-heart-fill.svg b/src/main/resources/static/images/suit-heart-fill.svg
deleted file mode 100644
index 74a0f27a8..000000000
--- a/src/main/resources/static/images/suit-heart-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" fill="#007bff" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
-  <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/tools.svg b/src/main/resources/static/images/tools.svg
deleted file mode 100644
index fcc8362f7..000000000
--- a/src/main/resources/static/images/tools.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tools" viewBox="0 0 16 16">
-  <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0Zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708ZM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/trash.svg b/src/main/resources/static/images/trash.svg
deleted file mode 100644
index 4d0ee3645..000000000
--- a/src/main/resources/static/images/trash.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-  <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/union.svg b/src/main/resources/static/images/union.svg
deleted file mode 100644
index e694d7744..000000000
--- a/src/main/resources/static/images/union.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 9.6V20.4C21 20.7314 20.7314 21 20.4 21H9.6C9.26863 21 9 20.7314 9 20.4V9.6C9 9.26863 9.26863 9 9.6 9H20.4C20.7314 9 21 9.26863 21 9.6Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15 3.6V14.4C15 14.7314 14.7314 15 14.4 15H3.6C3.26863 15 3 14.7314 3 14.4V3.6C3 3.26863 3.26863 3 3.6 3H14.4C14.7314 3 15 3.26863 15 3.6Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/unlock.svg b/src/main/resources/static/images/unlock.svg
deleted file mode 100644
index 8eb0925da..000000000
--- a/src/main/resources/static/images/unlock.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-unlock" viewBox="0 0 16 16">
-  <path d="M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2zM3 8a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H3z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/url.svg b/src/main/resources/static/images/url.svg
deleted file mode 100644
index df35bc8a1..000000000
--- a/src/main/resources/static/images/url.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
-  <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
-  <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/wrench.svg b/src/main/resources/static/images/wrench.svg
deleted file mode 100644
index bef07136f..000000000
--- a/src/main/resources/static/images/wrench.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wrench" viewBox="0 0 16 16">
-  <path d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z"/>
-</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js
index cb119a8ad..08c0c380d 100644
--- a/src/main/resources/static/js/darkmode.js
+++ b/src/main/resources/static/js/darkmode.js
@@ -8,7 +8,6 @@ var elements = {
   darkModeIcon: null,
   searchBar: null,
   formControls: null,
-  navbar: null,
   navIcons: null,
   navDropdownMenus: null,
 };
@@ -20,8 +19,6 @@ function getElements() {
   elements.darkModeIcon = document.getElementById("dark-mode-icon");
   elements.searchBar = document.getElementById("searchBar");
   elements.formControls = document.querySelectorAll(".form-control");
-  elements.navbar = document.querySelectorAll("nav.navbar");
-  elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon");
   elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu");
 }
 function setMode(mode) {
@@ -42,67 +39,23 @@ function setMode(mode) {
 
   if (mode === "on") {
     if (elements && elements.darkModeIcon) {
-      elements.darkModeIcon.src = "moon.svg";
-    }
-    if (elements && elements.searchBar) {
-      elements.searchBar.classList.add("dark-mode-search");
-    }
-    if (elements && elements.formControls) {
-      elements.formControls.forEach((input) => input.classList.add("bg-dark", "text-white"));
-    }
-    if (elements && elements.navbar) {
-      elements.navbar.forEach((navElement) => {
-        navElement.classList.remove("navbar-light", "bg-light");
-        navElement.classList.add("navbar-dark", "bg-dark");
-      });
-    }
-    if (elements && elements.navDropdownMenus) {
-      elements.navDropdownMenus.forEach((menu) => menu.classList.add("dropdown-menu-dark"));
-    }
-    if (elements && elements.navIcons) {
-      elements.navIcons.forEach((icon) => (icon.style.filter = "invert(1)"));
+      elements.darkModeIcon.textContent = "dark_mode";
     }
     var tables = document.querySelectorAll(".table");
     tables.forEach((table) => {
       table.classList.add("table-dark");
     });
-    if (jumbotron) {
-      jumbotron.classList.add("bg-dark");
-      jumbotron.classList.remove("bg-light");
-    }
   } else if (mode === "off") {
     if (elements && elements.darkModeIcon) {
-      elements.darkModeIcon.src = "sun.svg";
-    }
-    if (elements && elements.searchBar) {
-      elements.searchBar.classList.remove("dark-mode-search");
-    }
-    if (elements && elements.formControls) {
-      elements.formControls.forEach((input) => input.classList.remove("bg-dark", "text-white"));
-    }
-    if (elements && elements.navbar) {
-      elements.navbar.forEach((navElement) => {
-        navElement.classList.remove("navbar-dark", "bg-dark");
-        navElement.classList.add("navbar-light", "bg-light");
-      });
-    }
-    if (elements && elements.navDropdownMenus) {
-      elements.navDropdownMenus.forEach((menu) => menu.classList.remove("dropdown-menu-dark"));
-    }
-    if (elements && elements.navIcons) {
-      elements.navIcons.forEach((icon) => (icon.style.filter = "none"));
+      elements.darkModeIcon.textContent = "light_mode";
     }
     var tables = document.querySelectorAll(".table-dark");
     tables.forEach((table) => {
       table.classList.remove("table-dark");
     });
-    if (jumbotron) {
-      jumbotron.classList.remove("bg-dark");
-      jumbotron.classList.add("bg-light");
-    }
   } else if (mode === "rainbow") {
     if (elements && elements.darkModeIcon) {
-      elements.darkModeIcon.src = "rainbow.svg";
+      elements.darkModeIcon.textContent = "looks";
     }
   }
 }
@@ -116,6 +69,8 @@ function toggleDarkMode() {
   }
   lastToggleTime = currentTime;
 
+  document.body.classList.add("transition-theme");
+
   if (toggleCount >= 18) {
     localStorage.setItem("dark-mode", "rainbow");
     setMode("rainbow");
@@ -147,4 +102,4 @@ document.addEventListener("DOMContentLoaded", function () {
       toggleDarkMode();
     });
   }
-});
+});
\ No newline at end of file
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index c461af3c3..818e62e98 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -23,15 +23,17 @@ function filterCards() {
 }
 
 function toggleFavorite(element) {
-  var img = element.querySelector("img");
+  var span = element.querySelector("span.material-symbols-rounded");
   var card = element.closest(".feature-card");
   var cardId = card.id;
-  if (img.src.endsWith("star.svg")) {
-    img.src = "images/star-fill.svg";
+  if (span.classList.contains("no-fill")) {
+    span.classList.remove("no-fill");
+    span.classList.add("fill");
     card.classList.add("favorite");
     localStorage.setItem(cardId, "favorite");
   } else {
-    img.src = "images/star.svg";
+    span.classList.remove("fill");
+    span.classList.add("no-fill");
     card.classList.remove("favorite");
     localStorage.removeItem(cardId);
   }
@@ -40,6 +42,7 @@ function toggleFavorite(element) {
   filterCards();
 }
 
+
 function reorderCards() {
   var container = document.querySelector(".features-container");
   var cards = Array.from(container.getElementsByClassName("feature-card"));
@@ -64,13 +67,15 @@ function reorderCards() {
     container.appendChild(card);
   });
 }
+
 function initializeCards() {
   var cards = document.querySelectorAll(".feature-card");
   cards.forEach(function (card) {
     var cardId = card.id;
-    var img = card.querySelector(".favorite-icon img");
+    var span = card.querySelector(".favorite-icon span.material-symbols-rounded");
     if (localStorage.getItem(cardId) === "favorite") {
-      img.src = "images/star-fill.svg";
+      span.classList.remove("no-fill");
+      span.classList.add("fill");
       card.classList.add("favorite");
     }
   });
@@ -80,3 +85,15 @@ function initializeCards() {
 }
 
 window.onload = initializeCards;
+
+  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.');
+    });
+  });
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 163dff3ab..8135bed31 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -92,44 +92,35 @@ class PdfActionsManager {
     const rightDirection = this.pageDirection === "rtl" ? "left" : "right";
     const buttonContainer = document.createElement("div");
 
-    buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag");
+    buttonContainer.classList.add("btn-group", "pdf-actions_button-container", "hide-on-drag");
 
     const moveUp = document.createElement("button");
     moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary");
-    moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
+    moveUp.innerHTML = `<span class="material-symbols-rounded">arrow_${leftDirection}_alt</span>`;
     moveUp.onclick = this.moveUpButtonCallback;
     buttonContainer.appendChild(moveUp);
 
     const moveDown = document.createElement("button");
     moveDown.classList.add("pdf-actions_move-right-button", "btn", "btn-secondary");
-    moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
+    moveDown.innerHTML = `<span class="material-symbols-rounded">arrow_${rightDirection}_alt</span>`;
     moveDown.onclick = this.moveDownButtonCallback;
     buttonContainer.appendChild(moveDown);
 
     const rotateCCW = document.createElement("button");
     rotateCCW.classList.add("btn", "btn-secondary");
-    rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
-                            <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
-                        </svg>`;
+    rotateCCW.innerHTML = `<span class="material-symbols-rounded">rotate_left</span>`;
     rotateCCW.onclick = this.rotateCCWButtonCallback;
     buttonContainer.appendChild(rotateCCW);
 
     const rotateCW = document.createElement("button");
     rotateCW.classList.add("btn", "btn-secondary");
-    rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
-                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
-                        </svg>`;
+    rotateCW.innerHTML = `<span class="material-symbols-rounded">rotate_right</span>`;
     rotateCW.onclick = this.rotateCWButtonCallback;
     buttonContainer.appendChild(rotateCW);
 
     const deletePage = document.createElement("button");
     deletePage.classList.add("btn", "btn-danger");
-    deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-                            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-                        </svg>`;
+    deletePage.innerHTML = `<span class="material-symbols-rounded">delete</span>`;
     deletePage.onclick = this.deletePageButtonCallback;
     buttonContainer.appendChild(deletePage);
 
@@ -145,10 +136,7 @@ class PdfActionsManager {
 
     const insertFileButton = document.createElement("button");
     insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
-    insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                            </svg>`;
+    insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
     insertFileButton.onclick = this.insertFileButtonCallback;
     insertFileButtonContainer.appendChild(insertFileButton);
 
@@ -164,10 +152,7 @@ class PdfActionsManager {
 
     const insertFileButtonRight = document.createElement("button");
     insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
-    insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                                insertFileButtonRight</svg>`;
+    insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`;
     insertFileButtonRight.onclick = () => addPdfs();
     insertFileButtonRightContainer.appendChild(insertFileButtonRight);
 
diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js
index afe1d4d76..1c57dfd9e 100644
--- a/src/main/resources/static/js/pipeline.js
+++ b/src/main/resources/static/js/pipeline.js
@@ -251,14 +251,14 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
       <div class="d-flex justify-content-between align-items-center w-100">
           <div class="operationName">${selectedOperation}</div>
           <div class="arrows d-flex">
-              <button class="btn btn-secondary move-up ms-1"><span>&uarr;</span></button>
-              <button class="btn btn-secondary move-down ms-1"><span>&darr;</span></button>
+              <button class="btn btn-secondary move-up ms-1"><span class="material-symbols-rounded">arrow_upward</span></button>
+              <button class="btn btn-secondary move-down ms-1"><span class="material-symbols-rounded">arrow_downward</span></button>
               <button class="btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1" ${
                 hasSettings ? "" : "disabled"
               }>
-              <span style="color: ${hasSettings ? "white" : "grey"};">⚙️</span>
+              <span class="material-symbols-rounded">settings</span>
           </button>
-              <button class="btn btn-danger remove ms-1"><span>X</span></button>
+              <button class="btn btn-danger remove ms-1"><span class="material-symbols-rounded">close</span></button>
           </div>
       </div>
   `;
diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js
index 2329f9983..a5b9d70fb 100644
--- a/src/main/resources/static/js/search.js
+++ b/src/main/resources/static/js/search.js
@@ -1,9 +1,4 @@
-// Toggle search bar when the search icon is clicked
-document.querySelector("#search-icon").addEventListener("click", function (e) {
-  e.preventDefault();
-  var searchBar = document.querySelector("#navbarSearch");
-  searchBar.classList.toggle("show");
-});
+
 window.onload = function () {
   var items = document.querySelectorAll(".dropdown-item, .nav-link");
   var dummyContainer = document.createElement("div");
@@ -32,45 +27,47 @@ window.onload = function () {
 
 // Show search results as user types in search box
 document.querySelector("#navbarSearchInput").addEventListener("input", function (e) {
-  var searchText = e.target.value.toLowerCase();
+  var searchText = e.target.value.trim().toLowerCase(); // Trim whitespace and convert to lowercase
   var items = document.querySelectorAll(".dropdown-item, .nav-link");
   var resultsBox = document.querySelector("#searchResults");
 
   // Clear any previous results
   resultsBox.innerHTML = "";
-
+  if (searchText !== "") {
   items.forEach(function (item) {
     var titleElement = item.querySelector(".icon-text");
-    var iconElement = item.querySelector(".icon");
+    var iconElement = item.querySelector(".material-symbols-rounded, .icon");
     var itemHref = item.getAttribute("href");
     var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
 
-    if (titleElement && iconElement && itemHref !== "#") {
-      var title = titleElement.innerText;
-      if (
-        (title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
-        !resultsBox.querySelector(`a[href="${item.getAttribute("href")}"]`)
-      ) {
-        var result = document.createElement("a");
-        result.href = itemHref;
-        result.classList.add("dropdown-item");
+	
+      if (titleElement && iconElement && itemHref !== "#") {
+        var title = titleElement.innerText;
+        if (
+          (title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
+          !resultsBox.querySelector(`a[href="${itemHref}"]`)
+        ) {
+          var result = document.createElement("a");
+          result.href = itemHref;
+          result.classList.add("dropdown-item");
 
-        var resultIcon = document.createElement("img");
-        resultIcon.src = iconElement.src;
-        resultIcon.alt = "icon";
-        resultIcon.classList.add("icon");
+        var resultIcon = document.createElement("span");
+        resultIcon.classList.add("material-symbols-rounded");
+        resultIcon.textContent = iconElement.textContent;
         result.appendChild(resultIcon);
 
-        var resultText = document.createElement("span");
-        resultText.textContent = title;
-        resultText.classList.add("icon-text");
-        result.appendChild(resultText);
+          var resultText = document.createElement("span");
+          resultText.textContent = title;
+          resultText.classList.add("icon-text");
+          result.appendChild(resultText);
 
-        resultsBox.appendChild(result);
+          resultsBox.appendChild(result);
+        }
       }
-    }
-  });
+    });
+  }
 
   // Set the width of the search results box to the maximum width
   resultsBox.style.width = window.navItemMaxWidth + "px";
 });
+
diff --git a/src/main/resources/static/js/thirdParty/fontfaceobserver.standalone.js b/src/main/resources/static/js/thirdParty/fontfaceobserver.standalone.js
new file mode 100644
index 000000000..66c5cd69b
--- /dev/null
+++ b/src/main/resources/static/js/thirdParty/fontfaceobserver.standalone.js
@@ -0,0 +1,8 @@
+/* Font Face Observer v2.1.0 - © Bram Stein. License: BSD-3-Clause */(function(){function l(a,b){document.addEventListener?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function m(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function c(){document.removeEventListener("DOMContentLoaded",c);a()}):document.attachEvent("onreadystatechange",function k(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",k),a()})};function t(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
+this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
+function u(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+b+";"}function z(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function A(a,b){function c(){var a=k;z(a)&&a.a.parentNode&&b(a.g)}var k=a;l(a.b,c);l(a.c,c);z(a)};function B(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var C=null,D=null,E=null,F=null;function G(){if(null===D)if(J()&&/Apple/.test(window.navigator.vendor)){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent);D=!!a&&603>parseInt(a[1],10)}else D=!1;return D}function J(){null===F&&(F=!!document.fonts);return F}
+function K(){if(null===E){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}E=""!==a.style.font}return E}function L(a,b){return[a.style,a.weight,K()?a.stretch:"","100px",b].join(" ")}
+B.prototype.load=function(a,b){var c=this,k=a||"BESbswy",r=0,n=b||3E3,H=(new Date).getTime();return new Promise(function(a,b){if(J()&&!G()){var M=new Promise(function(a,b){function e(){(new Date).getTime()-H>=n?b(Error(""+n+"ms timeout exceeded")):document.fonts.load(L(c,'"'+c.family+'"'),k).then(function(c){1<=c.length?a():setTimeout(e,25)},b)}e()}),N=new Promise(function(a,c){r=setTimeout(function(){c(Error(""+n+"ms timeout exceeded"))},n)});Promise.race([N,M]).then(function(){clearTimeout(r);a(c)},
+b)}else m(function(){function v(){var b;if(b=-1!=f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=h)(b=f!=g&&f!=h&&g!=h)||(null===C&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),C=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=C&&(f==w&&g==w&&h==w||f==x&&g==x&&h==x||f==y&&g==y&&h==y)),b=!b;b&&(d.parentNode&&d.parentNode.removeChild(d),clearTimeout(r),a(c))}function I(){if((new Date).getTime()-H>=n)d.parentNode&&d.parentNode.removeChild(d),b(Error(""+
+n+"ms timeout exceeded"));else{var a=document.hidden;if(!0===a||void 0===a)f=e.a.offsetWidth,g=p.a.offsetWidth,h=q.a.offsetWidth,v();r=setTimeout(I,50)}}var e=new t(k),p=new t(k),q=new t(k),f=-1,g=-1,h=-1,w=-1,x=-1,y=-1,d=document.createElement("div");d.dir="ltr";u(e,L(c,"sans-serif"));u(p,L(c,"serif"));u(q,L(c,"monospace"));d.appendChild(e.a);d.appendChild(p.a);d.appendChild(q.a);document.body.appendChild(d);w=e.a.offsetWidth;x=p.a.offsetWidth;y=q.a.offsetWidth;I();A(e,function(a){f=a;v()});u(e,
+L(c,'"'+c.family+'",sans-serif'));A(p,function(a){g=a;v()});u(p,L(c,'"'+c.family+'",serif'));A(q,function(a){h=a;v()});u(q,L(c,'"'+c.family+'",monospace'))})})};"object"===typeof module?module.exports=B:(window.FontFaceObserver=B,window.FontFaceObserver.prototype.load=B.prototype.load);}());
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index 2870fb41c..c29d2ffad 100644
--- a/src/main/resources/templates/about.html
+++ b/src/main/resources/templates/about.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6"></div>
+            <div class="col-md-6" id="bg-card"></div>
           </div>
         </div>
       </div>
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index e8ed623aa..c82c97cbf 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -1,23 +1,24 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-9">
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-9" id="bg-card">
 
-              <!-- User Settings Title -->
-              <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
-              <hr>
-              <th:block th:if="${param.messageType != null and param.messageType.size() > 0}">
+            <!-- User Settings Title -->
+            <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
+            <th:block th:if="${param.messageType != null and param.messageType.size() > 0}">
               <div th:if="${param.messageType[0] == 'notAuthenticated'}" class="alert alert-danger">
                 <span th:text="#{notAuthenticatedMessage}">Default message if not found</span>
               </div>
@@ -33,251 +34,267 @@
               <div th:if="${param.messageType[0] == 'invalidUsername'}" class="alert alert-danger">
                 <span th:text="#{invalidUsernameMessage}">Default message if not found</span>
               </div>
-              </th:block>
-              <!-- At the top of the user settings -->
-              <h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
-              <th:block th:if="${error}">
+            </th:block>
+            <!-- At the top of the user settings -->
+            <h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
+            <th:block th:if="${error}">
               <div class="alert alert-danger" role="alert">
                 <span th:text="${error}">Error Message</span>
               </div>
-              </th:block>
-              <!-- Change Username Form -->
-              <form th:if="${!oAuth2Login}" action="api/v1/user/change-username" method="post">
-                <div class="mb-3">
-                  <label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
-                  <input type="text" class="form-control" name="newUsername" id="newUsername" th:placeholder="#{account.newUsername}">
-                </div>
-                <div class="mb-3">
-                  <label for="currentPassword" th:text="#{password}">Password</label>
-                  <input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{password}">
-                </div>
-                <div class="mb-3">
-                  <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
-                </div>
-              </form>
+            </th:block>
+            <!-- Change Username Form -->
+            <h4 th:text="#{account.changeUsername}">Change Username?</h4>
+            <form th:if="${!oAuth2Login}" id="bg-card" class="mt-4 mb-4" action="api/v1/user/change-username" method="post">
+              <div class="mb-3">
+                <label for="newUsername" th:text="#{account.newUsername}">Change Username</label>
+                <input type="text" class="form-control" name="newUsername" id="newUsername"
+                  th:placeholder="#{account.newUsername}">
+              </div>
+              <div class="mb-3">
+                <label for="currentPassword" th:text="#{password}">Password</label>
+                <input type="password" class="form-control" name="currentPassword" id="currentPassword"
+                  th:placeholder="#{password}">
+              </div>
+              <div class="mb-3">
+                <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change
+                  Username</button>
+              </div>
+            </form>
 
-              <hr> <!-- Separator Line -->
+            <!-- Change Password Form -->
+            <h4 th:if="${!oAuth2Login}" th:text="#{account.changePassword}">Change Password?</h4>
+            <form id="bg-card" class="mt-4 mb-4" action="api/v1/user/change-password" method="post">
+              <div class="mb-3">
+                <label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
+                <input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword"
+                  th:placeholder="#{account.oldPassword}">
+              </div>
+              <div class="mb-3">
+                <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
+                <input type="password" class="form-control" name="newPassword" id="newPassword"
+                  th:placeholder="#{account.newPassword}">
+              </div>
+              <div class="mb-3">
+                <label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
+                <input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword"
+                  th:placeholder="#{account.confirmNewPassword}">
+              </div>
+              <div class="mb-3">
+                <button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change
+                  Password</button>
+              </div>
+            </form>
 
-              <!-- Change Password Form -->
-              <h4 th:if="${!oAuth2Login}" th:text="#{account.changePassword}">Change Password?</h4>
-              <form th:if="${!oAuth2Login}" action="api/v1/user/change-password" method="post">
-                <div class="mb-3">
-                  <label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
-                  <input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword" th:placeholder="#{account.oldPassword}">
-                </div>
-                <div class="mb-3">
-                  <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
-                  <input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{account.newPassword}">
-                </div>
-                <div class="mb-3">
-                  <label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
-                  <input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword" th:placeholder="#{account.confirmNewPassword}">
-                </div>
-                <div class="mb-3">
-                  <button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
-                </div>
-              </form>
 
-              <hr>
-
-              <div class="card">
-                <div class="card-header" th:text="#{account.yourApiKey}"></div>
-                <div class="card-body">
-                  <div class="input-group mb-3">
-                    <input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>
-                    <div class="input-group-append">
-                      <button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
-                        <img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">
-                      </button>
-                      <button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">
-                        <img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
-                      </button>
-                      <button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
-                        <img class="blackwhite-icon" id="arrowIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
-                      </button>
-                    </div>
+            <!-- API Key Form -->
+            <h4 th:text="#{account.yourApiKey}">API Key</h4>
+            <div class="card mt-4 mb-4">
+              <div class="card-header" th:text="#{account.yourApiKey}"></div>
+              <div class="card-body">
+                <div class="input-group mb-3">
+                  <input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}"
+                    readonly>
+                  <div class="input-group-append">
+                    <button class="btn btn-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
+                      <span class="material-symbols-rounded">
+                        content_copy
+                      </span>
+                    </button>
+                    <button class="btn btn-secondary" id="showBtn" type="button" onclick="showApiKey()">
+                      <span class="material-symbols-rounded" id="eyeIcon">
+                        visibility
+                      </span>
+                    </button>
+                    <button class="btn btn-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
+                      <span class="material-symbols-rounded">
+                        refresh
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
+            </div>
 
-              <script>
-                function copyToClipboard() {
-                  const apiKeyElement = document.getElementById("apiKey");
-                  apiKeyElement.select();
-                  document.execCommand("copy");
+            <script>
+              function copyToClipboard() {
+                const apiKeyElement = document.getElementById("apiKey");
+                apiKeyElement.select();
+                document.execCommand("copy");
+              }
+
+              function showApiKey() {
+                const apiKeyElement = document.getElementById("apiKey");
+                const copyBtn = document.getElementById("copyBtn");
+                const eyeIcon = document.getElementById("eyeIcon");
+                if (apiKeyElement.type === "password") {
+                  apiKeyElement.type = "text";
+                  eyeIcon.textContent = "visibility_off";
+                  copyBtn.disabled = false;  // Enable copy button when API key is visible
+                } else {
+                  apiKeyElement.type = "password";
+                  eyeIcon.textContent = "visibility";
+                  copyBtn.disabled = true;  // Disable copy button when API key is hidden
                 }
+              }
 
-                function showApiKey() {
-                  const apiKeyElement = document.getElementById("apiKey");
-                  const copyBtn = document.getElementById("copyBtn");
-                  const eyeIcon = document.getElementById("eyeIcon");
-                  if (apiKeyElement.type === "password") {
-                    apiKeyElement.type = "text";
-                    eyeIcon.src = "images/eye-slash.svg";
-                    copyBtn.disabled = false;  // Enable copy button when API key is visible
+              document.addEventListener("DOMContentLoaded", async function () {
+                try {
+                  let response = await fetch('/api/v1/user/get-api-key', { method: 'POST' });
+                  if (response.status === 200) {
+                    let apiKey = await response.text();
+                    manageUIState(apiKey);
                   } else {
-                    apiKeyElement.type = "password";
-                    eyeIcon.src = "images/eye.svg";
-                    copyBtn.disabled = true;  // Disable copy button when API key is hidden
+                    manageUIState(null);
                   }
+                } catch (error) {
+                  console.error('There was an error:', error);
                 }
+              });
 
-                document.addEventListener("DOMContentLoaded", async function() {
-                  try {
-                    let response = await fetch('/api/v1/user/get-api-key', { method: 'POST' });
-                    if (response.status === 200) {
-                      let apiKey = await response.text();
-                      manageUIState(apiKey);
-                    } else {
-                      manageUIState(null);
-                    }
-                  } catch (error) {
-                    console.error('There was an error:', error);
-                  }
-                });
-
-                async function refreshApiKey() {
-                  try {
-                    let response = await fetch('/api/v1/user/update-api-key', { method: 'POST' });
-                    if (response.status === 200) {
-                      let apiKey = await response.text();
-                      manageUIState(apiKey);
-                      document.getElementById("apiKey").type = 'text';
-                      document.getElementById("copyBtn").disabled = false;
-                    } else {
-                      alert('Error refreshing API key.');
-                    }
-                  } catch (error) {
-                    console.error('There was an error:', error);
-                  }
-                }
-
-                function manageUIState(apiKey) {
-                  const apiKeyElement = document.getElementById("apiKey");
-                  const showBtn = document.getElementById("showBtn");
-                  const copyBtn = document.getElementById("copyBtn");
-
-                  if (apiKey && apiKey.trim().length > 0) {
-                    apiKeyElement.value = apiKey;
-                    showBtn.disabled = false;
-                    copyBtn.disabled = true;
+              async function refreshApiKey() {
+                try {
+                  let response = await fetch('/api/v1/user/update-api-key', { method: 'POST' });
+                  if (response.status === 200) {
+                    let apiKey = await response.text();
+                    manageUIState(apiKey);
+                    document.getElementById("apiKey").type = 'text';
+                    document.getElementById("copyBtn").disabled = false;
                   } else {
-                    apiKeyElement.value = "";
-                    showBtn.disabled = true;
-                    copyBtn.disabled = true;
+                    alert('Error refreshing API key.');
                   }
+                } catch (error) {
+                  console.error('There was an error:', error);
                 }
+              }
 
-                document.addEventListener("DOMContentLoaded", function() {
-                  const form = document.querySelector('form[action="api/v1/user/change-password"]');
+              function manageUIState(apiKey) {
+                const apiKeyElement = document.getElementById("apiKey");
+                const showBtn = document.getElementById("showBtn");
+                const copyBtn = document.getElementById("copyBtn");
 
-                  form.addEventListener('submit', function(event) {
-                    const newPassword = document.getElementById('newPassword').value;
-                    const confirmNewPassword = document.getElementById('confirmNewPassword').value;
+                if (apiKey && apiKey.trim().length > 0) {
+                  apiKeyElement.value = apiKey;
+                  showBtn.disabled = false;
+                  copyBtn.disabled = true;
+                } else {
+                  apiKeyElement.value = "";
+                  showBtn.disabled = true;
+                  copyBtn.disabled = true;
+                }
+              }
 
-                    if (newPassword !== confirmNewPassword) {
-                      alert('New Password and Confirm New Password must match.');
-                      event.preventDefault(); // Prevent form submission
-                    }
-                  });
+              document.addEventListener("DOMContentLoaded", function () {
+                const form = document.querySelector('form[action="api/v1/user/change-password"]');
+
+                form.addEventListener('submit', function (event) {
+                  const newPassword = document.getElementById('newPassword').value;
+                  const confirmNewPassword = document.getElementById('confirmNewPassword').value;
+
+                  if (newPassword !== confirmNewPassword) {
+                    alert('New Password and Confirm New Password must match.');
+                    event.preventDefault(); // Prevent form submission
+                  }
                 });
-              </script>
+              });
+            </script>
 
-              <hr> <!-- Separator Line -->
+            <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
+            <div id="bg-card" class="container mt-4">
+              <h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
+              <table id="settingsTable" class="table table-bordered table-sm table-striped">
+                <thead>
+                  <tr>
+                    <th th:text="#{account.property}">Property</th>
+                    <th th:text="#{account.accountSettings}">Account Setting</th>
+                    <th th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <!-- This will be dynamically populated by JavaScript -->
+                </tbody>
+              </table>
 
-              <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
-              <div class="container mt-4">
-                <h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
-                <table id="settingsTable" class="table table-bordered table-sm table-striped">
-                  <thead>
-                    <tr>
-                      <th th:text="#{account.property}">Property</th>
-                      <th  th:text="#{account.accountSettings}">Account Setting</th>
-                      <th  th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <!-- This will be dynamically populated by JavaScript -->
-                  </tbody>
-                </table>
-
-                <div class="buttons-container mt-3 text-center">
-                  <button id="syncToBrowser" class="btn btn-primary btn-sm" th:text="#{account.syncToBrowser}">Sync Account -> Browser</button>
-                  <button id="syncToAccount" class="btn btn-secondary btn-sm" th:text="#{account.syncToAccount}">Sync Account <- Browser</button>
-                </div>
+              <div class="buttons-container mt-3 text-center">
+                <button id="syncToBrowser" class="btn btn-primary btn-sm" th:text="#{account.syncToBrowser}">Sync
+                  Account -> Browser</button>
+                <button id="syncToAccount" class="btn btn-secondary btn-sm" th:text="#{account.syncToAccount}">Sync
+                  Account <- Browser</button>
               </div>
+            </div>
 
-              <script th:inline="javascript">
-                document.addEventListener("DOMContentLoaded", function() {
-                  const settingsTableBody = document.querySelector("#settingsTable tbody");
+            <script th:inline="javascript">
+              document.addEventListener("DOMContentLoaded", function () {
+                const settingsTableBody = document.querySelector("#settingsTable tbody");
 
-                  /*<![CDATA[*/
-                  var accountSettingsString = /*[[${settings}]]*/ {};
-                  /*]]>*/
-                  var accountSettings = JSON.parse(accountSettingsString);
+                /*<![CDATA[*/
+                var accountSettingsString = /*[[${settings}]]*/ {};
+                /*]]>*/
+                var accountSettings = JSON.parse(accountSettingsString);
 
-                  let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
+                let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
 
-                  allKeys.forEach(key => {
-                    if(key === 'debug' || key === '0' || key === '1') return;  // Ignoring specific keys
+                allKeys.forEach(key => {
+                  if (key === 'debug' || key === '0' || key === '1') return;  // Ignoring specific keys
 
-                    const accountValue = accountSettings[key] || '-';
-                    const browserValue = localStorage.getItem(key) || '-';
+                  const accountValue = accountSettings[key] || '-';
+                  const browserValue = localStorage.getItem(key) || '-';
 
-                    const row = settingsTableBody.insertRow();
-                    const propertyCell = row.insertCell(0);
-                    const accountCell = row.insertCell(1);
-                    const browserCell = row.insertCell(2);
-
-                    propertyCell.textContent = key;
-                    accountCell.textContent = accountValue;
-                    browserCell.textContent = browserValue;
-                  });
-
-                  document.getElementById('syncToBrowser').addEventListener('click', function() {
-                    // First, clear the local storage
-                    localStorage.clear();
-
-                    // Then, set the account settings to local storage
-                    for (let key in accountSettings) {
-                      if(key !== 'debug' && key !== '0' && key !== '1') { // Only sync non-ignored keys
-                        localStorage.setItem(key, accountSettings[key]);
-                      }
-                    }
-                    location.reload();  // Refresh the page after sync
-                  });
-
-                  document.getElementById('syncToAccount').addEventListener('click', function() {
-                    let form = document.createElement("form");
-                    form.method = "POST";
-                    form.action = "api/v1/user/updateUserSettings";  // Your endpoint URL
-
-                    for (let i = 0; i < localStorage.length; i++) {
-                      const key = localStorage.key(i);
-                      if(key !== 'debug' && key !== '0' && key !== '1') { // Only send non-ignored keys
-                        let hiddenField = document.createElement("input");
-                        hiddenField.type = "hidden";
-                        hiddenField.name = key;
-                        hiddenField.value = localStorage.getItem(key);
-                        form.appendChild(hiddenField);
-                      }
-                    }
-
-                    document.body.appendChild(form);
-                    form.submit();
-                  });
+                  const row = settingsTableBody.insertRow();
+                  const propertyCell = row.insertCell(0);
+                  const accountCell = row.insertCell(1);
+                  const browserCell = row.insertCell(2);
 
+                  propertyCell.textContent = key;
+                  accountCell.textContent = accountValue;
+                  browserCell.textContent = browserValue;
                 });
-              </script>
-              <div class="mb-3 mt-4 text-center">
-                <a href="logout" role="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</a>
-                <a th:if="${role == 'ROLE_ADMIN'}" class="btn btn-info" href="addUsers" role="button" th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
-              </div>
+
+                document.getElementById('syncToBrowser').addEventListener('click', function () {
+                  // First, clear the local storage
+                  localStorage.clear();
+
+                  // Then, set the account settings to local storage
+                  for (let key in accountSettings) {
+                    if (key !== 'debug' && key !== '0' && key !== '1') { // Only sync non-ignored keys
+                      localStorage.setItem(key, accountSettings[key]);
+                    }
+                  }
+                  location.reload();  // Refresh the page after sync
+                });
+
+                document.getElementById('syncToAccount').addEventListener('click', function () {
+                  let form = document.createElement("form");
+                  form.method = "POST";
+                  form.action = "api/v1/user/updateUserSettings";  // Your endpoint URL
+
+                  for (let i = 0; i < localStorage.length; i++) {
+                    const key = localStorage.key(i);
+                    if (key !== 'debug' && key !== '0' && key !== '1') { // Only send non-ignored keys
+                      let hiddenField = document.createElement("input");
+                      hiddenField.type = "hidden";
+                      hiddenField.name = key;
+                      hiddenField.value = localStorage.getItem(key);
+                      form.appendChild(hiddenField);
+                    }
+                  }
+
+                  document.body.appendChild(form);
+                  form.submit();
+                });
+
+              });
+            </script>
+            <div class="mb-3 mt-4 text-center">
+              <a href="logout" role="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</a>
+              <a th:if="${role == 'ROLE_ADMIN'}" class="btn btn-info" href="addUsers" role="button"
+                th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
             </div>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html
index d5fb14ee7..8eda8eab9 100644
--- a/src/main/resources/templates/addUsers.html
+++ b/src/main/resources/templates/addUsers.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-8">
+            <div class="col-md-8" id="bg-card">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{adminUserSettings.header}">Admin User Control Settings</h2>
diff --git a/src/main/resources/templates/auto-split-pdf.html b/src/main/resources/templates/auto-split-pdf.html
index 914b9d606..fa6b1d167 100644
--- a/src/main/resources/templates/auto-split-pdf.html
+++ b/src/main/resources/templates/auto-split-pdf.html
@@ -1,43 +1,62 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{autoSplitPDF.title}, header=#{autoSplitPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoSplitPDF.header}"></h2>
-              <!-- Added a brief description -->
-              <p th:text="#{autoSplitPDF.description}"></p>
-              <ul>
-                <li th:text="#{autoSplitPDF.selectText.1}"></li>
-                <li th:text="#{autoSplitPDF.selectText.2}"></li>
-                <li th:text="#{autoSplitPDF.selectText.3}"></li>
-                <li th:text="#{autoSplitPDF.selectText.4}"></li>
-              </ul>
-              <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-split-pdf}">
-                <p th:text="#{autoSplitPDF.formPrompt}"></p>
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="duplexMode" id="duplexMode">
-                  <label class="ms-3" for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
-                </div>
-                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(minimal).pdf}" download th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
-                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(with%20instructions).pdf}" download th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
-              </form>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{autoSplitPDF.title}, header=#{autoSplitPDF.header})}">
+  </th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon advance">cut</span>
+              <span class="tool-header-text" th:text="#{autoSplitPDF.header}"></span>
             </div>
+
+            <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-split-pdf}">
+              <p th:text="#{autoSplitPDF.formPrompt}"></p>
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+              <div class="form-check ms-3">
+                <input type="checkbox" name="duplexMode" id="duplexMode">
+                <label for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
+              </div>
+              <p>
+                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                  aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
+              </p>
+              <div class="collapse" id="info">
+                <!-- Added a brief description -->
+                <p th:text="#{autoSplitPDF.description}"></p>
+                <ul>
+                  <li th:text="#{autoSplitPDF.selectText.1}"></li>
+                  <li th:text="#{autoSplitPDF.selectText.2}"></li>
+                  <li th:text="#{autoSplitPDF.selectText.3}"></li>
+                  <li th:text="#{autoSplitPDF.selectText.4}"></li>
+                </ul>
+                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(minimal).pdf}" download
+                    th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
+                <p><a th:href="@{files/Auto%20Splitter%20Divider%20(with%20instructions).pdf}" download
+                    th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
+              </div>
+
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/change-creds.html b/src/main/resources/templates/change-creds.html
index 08a3ade77..feee43c1c 100644
--- a/src/main/resources/templates/change-creds.html
+++ b/src/main/resources/templates/change-creds.html
@@ -12,7 +12,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9">
+            <div class="col-md-9" id="bg-card">
 
               <!-- User Settings Title -->
               <h2 class="text-center" th:text="#{changeCreds.header}">User Settings</h2>
diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html
index d8c8b969d..f822a5930 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -1,43 +1,57 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{fileToPDF.title}, header=#{fileToPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{fileToPDF.header}"></h2>
-              <p th:text="#{processTimeWarning}"></p>
-              <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/file/pdf}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{fileToPDF.credit}"></p>
-              <p class="mt-3" th:text="#{fileToPDF.supportedFileTypes}"></p>
-              <p>Microsoft Word: (DOC, DOCX, DOT, DOTX)</p>
-              <p>Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)</p>
-              <p>Microsoft PowerPoint: (PPT, PPTX)</p>
-              <p>OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)</p>
-              <p>Plain Text: (TXT, TEXT, XML)</p>
-              <p>Rich Text Format: (RTF)</p>
-              <p>Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)</p>
-              <p>HTML: (HTML)</p>
-              <p>Lotus Word Pro: (LWP)</p>
-              <p>StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)</p>
-              <p>Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)</p>
-              <a href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{fileToPDF.title}, header=#{fileToPDF.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">draft</span>
+              <span class="tool-header-text" th:text="#{fileToPDF.header}"></span>
             </div>
+            <p th:text="#{processTimeWarning}"></p>
+            <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/file/pdf}">
+              <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
+              <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                aria-expanded="false" aria-controls="info" th:text="#{fileToPDF.supportedFileTypesInfo}"></a>
+              <div class="collapse" id="info">
+                <p class="mt-3" th:text="#{fileToPDF.credit}"></p>
+                <p class="mt-3" th:text="#{fileToPDF.supportedFileTypes}"></p>
+                <p>Microsoft Word: (DOC, DOCX, DOT, DOTX)</p>
+                <p>Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)</p>
+                <p>Microsoft PowerPoint: (PPT, PPTX)</p>
+                <p>OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)</p>
+                <p>Plain Text: (TXT, TEXT, XML)</p>
+                <p>Rich Text Format: (RTF)</p>
+                <p>Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)</p>
+                <p>HTML: (HTML)</p>
+                <p>Lotus Word Pro: (LWP)</p>
+                <p>StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)</p>
+                <p>Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)</p>
+                <a
+                  href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
+              </div>
+              <br>
+              
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
+            </form>
+
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html
index 3c4269170..94b4f8428 100644
--- a/src/main/resources/templates/convert/html-to-pdf.html
+++ b/src/main/resources/templates/convert/html-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="mb-3">
-              <h2 th:text="#{HTMLToPDF.header}"></h2>
+            <div class="mb-3"  id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">html</span>
+                <span class="tool-header-text" th:text="#{HTMLToPDF.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/html/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/html,application/zip' )}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index a8633ad1c..ec49e1c4e 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{imageToPDF.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon image">image</span>
+                <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/img/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*', inputText=#{imgPrompt})}"></div>
                 <div class="mb-3">
@@ -25,9 +28,9 @@
                   </select>
                 </div>
 
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="autoRotate" id="autoRotate">
-                  <label class="ms-3" for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="autoRotate" id="autoRotate">
+                  <label for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
                 </div>
                 <div class="mb-3">
                   <label th:text="#{pdfToImage.colorType}"></label>
diff --git a/src/main/resources/templates/convert/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html
index 7a51a29c5..748c5c663 100644
--- a/src/main/resources/templates/convert/markdown-to-pdf.html
+++ b/src/main/resources/templates/convert/markdown-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{MarkdownToPDF.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">markdown</span>
+                <span class="tool-header-text" th:text="#{MarkdownToPDF.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/markdown/pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='text/markdown')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
diff --git a/src/main/resources/templates/convert/pdf-to-csv.html b/src/main/resources/templates/convert/pdf-to-csv.html
index 9fba94305..be78d1da0 100644
--- a/src/main/resources/templates/convert/pdf-to-csv.html
+++ b/src/main/resources/templates/convert/pdf-to-csv.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToCSV.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">csv</span>
+                <span class="tool-header-text" th:text="#{PDFToCSV.header}"></span>
+              </div>
               <form id="PDFToCSVForm" th:action="@{api/v1/convert/pdf/csv}" method="post" enctype="multipart/form-data">
                 <input  id="pageId" type="hidden" name="pageId">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-html.html b/src/main/resources/templates/convert/pdf-to-html.html
index c92568059..395f98296 100644
--- a/src/main/resources/templates/convert/pdf-to-html.html
+++ b/src/main/resources/templates/convert/pdf-to-html.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToHTML.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">html</span>
+                <span class="tool-header-text" th:text="#{PDFToHTML.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/html}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index 039c52e06..d6b5f871a 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfToImage.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon image">image</span>
+                <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
+              </div>
               <p th:text="#{processTimeWarning}"></p>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/img}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-pdfa.html b/src/main/resources/templates/convert/pdf-to-pdfa.html
index 6f558a1eb..7b51a86c5 100644
--- a/src/main/resources/templates/convert/pdf-to-pdfa.html
+++ b/src/main/resources/templates/convert/pdf-to-pdfa.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfToPDFA.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">picture_as_pdf</span>
+                <span class="tool-header-text" th:text="#{pdfToPDFA.header}"></span>
+              </div>
               <p th:text="#{pdfToPDFA.tip}"></p>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/pdfa}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index 48d27d249..8d4a42845 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToPresentation.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon ppt">slideshow</span>
+                <span class="tool-header-text" th:text="#{PDFToPresentation.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/presentation}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html
index 52d461e08..21bf1fae7 100644
--- a/src/main/resources/templates/convert/pdf-to-text.html
+++ b/src/main/resources/templates/convert/pdf-to-text.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToText.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">text_fields</span>
+                <span class="tool-header-text" th:text="#{PDFToText.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/text}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index fbbbf45d3..cce75d761 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToWord.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon word">description</span>
+                <span class="tool-header-text" th:text="#{PDFToWord.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/word}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/convert/pdf-to-xml.html b/src/main/resources/templates/convert/pdf-to-xml.html
index cad43da2b..388ed80b1 100644
--- a/src/main/resources/templates/convert/pdf-to-xml.html
+++ b/src/main/resources/templates/convert/pdf-to-xml.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{PDFToXML.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">code</span>
+                <span class="tool-header-text" th:text="#{PDFToXML.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/pdf/xml}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/convert/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html
index 714bd1c4b..26c13ad15 100644
--- a/src/main/resources/templates/convert/url-to-pdf.html
+++ b/src/main/resources/templates/convert/url-to-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{URLToPDF.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon convert">link</span>
+                <span class="tool-header-text" th:text="#{URLToPDF.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/convert/url/pdf}">
                 <input type="text" class="form-control" id="urlInput" name="urlInput" placeholder="http://">
                 <br>
diff --git a/src/main/resources/templates/crop.html b/src/main/resources/templates/crop.html
index f20495721..0af2509c8 100644
--- a/src/main/resources/templates/crop.html
+++ b/src/main/resources/templates/crop.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{crop.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">crop</span>
+                <span class="tool-header-text" th:text="#{crop.header}"></span>
+              </div>
               <form id="cropForm" action="/api/v1/general/crop" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <input id="x" type="hidden" name="x">
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index d896ecbce..61c69c245 100644
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -8,9 +8,9 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
         <div class="container">
-          <div id="support-section">
+          <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
+          <div id="bg-card" class="text-center">
             <h1 class="display-2" th:text="#{oops}"></h1>
             <p class="lead" th:if="${param.status == '404'}" th:text="#{error.404.1}"></p>
             <p class="lead" th:unless="${param.status == '404'}" th:text="#{error.404.2}"></p>
@@ -18,10 +18,10 @@
             <h2 th:text="#{error.needHelp}"></h2>
             <p th:text="#{error.contactTip}"></p>
             <div id="button-group">
-              <a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" target="_blank" th:text="#{error.github}"></a>
-              <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank" th:text="#{joinDiscord}"></a>
+              <a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" class="btn btn-primary" target="_blank" th:text="#{error.github}"></a>
+              <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" class="btn btn-primary" target="_blank" th:text="#{joinDiscord}"></a>
             </div>
-            <a href="/" class="home-button"  th:text="#{goHomepage}"></a>
+            <a href="/" id="home-button" class="home-button btn btn-primary"  th:text="#{goHomepage}"></a>
           </div>
         </div>
       </div>
diff --git a/src/main/resources/templates/extract-page.html b/src/main/resources/templates/extract-page.html
index 9d97b3b4b..1f8feec28 100644
--- a/src/main/resources/templates/extract-page.html
+++ b/src/main/resources/templates/extract-page.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pageExtracter.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">upload</span>
+                <span class="tool-header-text" th:text="#{pageExtracter.header}"></span>
+              </div>
               <form th:action="@{api/v1/general/rearrange-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <input type="hidden" id="customMode" name="customMode" value="">
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index 3f5517d68..df236c589 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,12 +1,23 @@
-<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" th:data-bs-tags="${tags}">
-              <a th:href="${cardLink}">
-                <div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
-                  <img th:if="${svgPath}" class="card-icon home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
-                  <h5 class="card-title  ms-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
-                </div>
-                <p class="card-text" th:text="${cardText}"></p>
-              </a>
-              <div class="favorite-icon" onclick="toggleFavorite(this)">
-                <img src="images/star.svg" alt="Favorite">
-              </div>
-            </div>
+<div th:fragment="card" class="feature-card hidden" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
+  th:data-bs-tags="${tags}">
+  <a th:href="${cardLink}">
+    <div class="d-flex align-items-center">
+
+      <div id="tool-icon" class="icon" alt="icon" th:class="@{${toolGroup}}">
+        <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
+      </div>
+
+      <div id="tool-text">
+        <h5 class="card-title" th:text="${cardTitle}"></h5>
+        <p class="card-text" th:text="${cardText}"></p>
+      </div>
+
+    </div>
+  </a>
+  <div class="favorite-icon" onclick="toggleFavorite(this)">
+    <span class="material-symbols-rounded no-fill">
+      star
+    </span>
+  </div>
+</div>
+</div>
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 3d6cc9fd1..a1b6828b0 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -1,162 +1,174 @@
 <th:block th:fragment="head">
-    <!-- Title -->
-    <title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
+  <!-- Title -->
+  <title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
 
-    <!-- Metadata -->
-    <meta charset="utf-8">
-    <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')">
-    <meta name="msapplication-TileColor" content="#2d89ef">
-    <meta name="theme-color" content="#ffffff">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Metadata -->
+  <meta charset="utf-8">
+  <meta name="description" th:content="${@appName} + (${header} != null and ${header} != '' ? ' - ' + ${header} : '')">
+  <meta name="msapplication-TileColor" content="#2d89ef">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- Icons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
-    <link rel="manifest" href="/site.webmanifest?v=2">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#ca2b2a">
-    <link rel="shortcut icon" href="/favicon.ico?v=2">
-    <meta name="apple-mobile-web-app-title" content="Stirling PDF">
-    <meta name="application-name" content="Stirling PDF">
-    <meta name="msapplication-TileColor" content="#00aba9">
-    <meta name="theme-color" content="#ffffff">
+  <!-- Icons -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
+  <link rel="manifest" href="/site.webmanifest?v=2">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#ca2b2a">
+  <link rel="shortcut icon" href="/favicon.ico?v=2">
+  <meta name="apple-mobile-web-app-title" content="Stirling PDF">
+  <meta name="application-name" content="Stirling PDF">
+  <meta name="msapplication-TileColor" content="#00aba9">
+  <meta name="theme-color" content="#ffffff">
 
-    <!-- jQuery -->
-    <script src="js/thirdParty/jquery.min.js"></script>
-    <script src="js/thirdParty/jszip.min.js"></script>
+  <!-- jQuery -->
+  <script src="js/thirdParty/jquery.min.js"></script>
+  <script src="js/thirdParty/jszip.min.js"></script>
 
-    <!-- Bootstrap -->
-    <script src="js/thirdParty/popper.min.js"></script>
-    <script src="js/thirdParty/bootstrap.min.js"></script>
-    <link rel="stylesheet" href="css/bootstrap.min.css">
+  <!-- Bootstrap -->
+  <script src="js/thirdParty/popper.min.js"></script>
+  <script src="js/thirdParty/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="css/bootstrap.min.css">
 
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" href="css/bootstrap-icons.min.css">
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" href="css/bootstrap-icons.min.css">
 
-    <!-- PDF.js -->
-    <script th:src="@{pdfjs/pdf.js}"></script>
+  <!-- PDF.js -->
+  <script th:src="@{pdfjs/pdf.js}"></script>
 
-    <!-- PDF-Lib -->
-    <script src="js/thirdParty/pdf-lib.min.js"></script>
+  <!-- PDF-Lib -->
+  <script src="js/thirdParty/pdf-lib.min.js"></script>
 
-    <!-- Custom -->
-    <link rel="stylesheet" href="css/general.css">
-    <link rel="stylesheet" th:href="@{css/light-mode.css}" id="light-mode-styles">
-    <link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
-    <link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled>
-    <link rel="stylesheet" href="css/tab-container.css">
-    <link rel="stylesheet" href="css/navbar.css">
+  <!-- Custom -->
+  <link rel="stylesheet" href="css/general.css">
+  <link rel="stylesheet" th:href="@{css/theme/theme.css}">
+  <link rel="stylesheet" th:href="@{css/theme/componentes.css}">
+  <link rel="stylesheet" th:href="@{css/theme/theme.light.css}" id="light-mode-styles">
+  <link rel="stylesheet" th:href="@{css/theme/theme.dark.css}" id="dark-mode-styles">
+  <link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled>
+  <link rel="stylesheet" href="css/tab-container.css">
+  <link rel="stylesheet" href="css/navbar.css">
 
-    <link rel="stylesheet" th:href="@{/css/error.css}" th:if="${error}">
+  <link rel="stylesheet" th:href="@{/css/error.css}" th:if="${error}">
 
-    <link rel="stylesheet" href="css/home.css" th:if="${currentPage == 'home'}">
-    <link rel="stylesheet" href="css/account.css" th:if="${currentPage == 'account'}">
-    <link rel="stylesheet" href="css/licenses.css" th:if="${currentPage == 'licenses'}">
-    <link rel="stylesheet" href="css/multi-tool.css" th:if="${currentPage == 'multi-tool'}">
-    <link rel="stylesheet" href="css/rotate-pdf.css" th:if="${currentPage == 'rotate-pdf'}">
-    <link rel="stylesheet" href="css/stamp.css" th:if="${currentPage == 'stamp'}">
-    <link rel="stylesheet" href="css/fileSelect.css">
-    <link rel="stylesheet" href="css/footer.css">
+  <link rel="stylesheet" href="css/home.css" th:if="${currentPage == 'home'}">
+  <link rel="stylesheet" href="css/account.css" th:if="${currentPage == 'account'}">
+  <link rel="stylesheet" href="css/licenses.css" th:if="${currentPage == 'licenses'}">
+  <link rel="stylesheet" href="css/multi-tool.css" th:if="${currentPage == 'multi-tool'}">
+  <link rel="stylesheet" href="css/rotate-pdf.css" th:if="${currentPage == 'rotate-pdf'}">
+  <link rel="stylesheet" href="css/stamp.css" th:if="${currentPage == 'stamp'}">
+  <link rel="stylesheet" href="css/fileSelect.css">
+  <link rel="stylesheet" href="css/footer.css">
+<script src="js/thirdParty/fontfaceobserver.standalone.js"></script>
 
-    <!-- Help Modal -->
-    <link rel="stylesheet" href="css/errorBanner.css">
-	<script src="js/cacheFormInputs.js"></script>
-    <script src="js/tab-container.js"></script>
-    <script src="js/darkmode.js"></script>
-  </th:block>
+  <!-- Google MD Icons -->
+  <link rel="stylesheet" href="css/theme/font.css">
 
-<th:block th:fragment="game">
-    <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
-      <script th:inline="javascript">
-        console.log("loaded game");
-        $(document).ready(function() {
+  <!-- Help Modal -->
+  <link rel="stylesheet" href="css/errorBanner.css">
 
-           // Find the file input within the form
-          var fileInput = $('input[type="file"]');
-          
-          // Find the closest enclosing form of the file input
-          var form = fileInput.closest('form');
-          
-          // Find the submit button within the form
-          var submitButton = form.find('button[type="submit"], input[type="submit"]');
-          
-          const boredWaitingText = /*[[#{bored}]]*/ 'Bored Waiting?';
-          const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete';
-          window.downloadCompleteText = downloadCompleteText;
-          // Create the 'show-game-btn' button
-          var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button><br><br>');
-          
-          // Insert the 'show-game-btn' just above the submit button
-          submitButton.before(gameButton);
-
-          function loadGameScript(callback) {
-            console.log('loadGameScript called');
-            const script = document.createElement('script');
-            script.src = 'js/game.js';
-            script.onload = callback;
-            document.body.appendChild(script);
-          }
-          let gameScriptLoaded = false;
-          const gameDialog = document.getElementById('game-container-wrapper');
-          $('#show-game-btn').on('click', function() {
-            console.log('Show game button clicked');
-            if (!gameScriptLoaded) {
-              console.log('Show game button load');
-              loadGameScript(function() {
-                console.log('Game script loaded');
-                window.initializeGame();
-                gameScriptLoaded = true;
-              });
-            } else {
-              window.resetGame();
-            }
-            gameDialog.showModal();
-          });
-          gameDialog.addEventListener("click", e => {
-            const dialogDimensions = gameDialog.getBoundingClientRect()
-            if (
-              e.clientX < dialogDimensions.left ||
-              e.clientX > dialogDimensions.right ||
-              e.clientY < dialogDimensions.top ||
-              e.clientY > dialogDimensions.bottom
-            ) {
-              gameDialog.close();
-            }
-          })
-        })
-      </script>
-      <div id="game-container">
-        <div id="lives">Lives: 3</div>
-        <div id="score">Score: 0</div>
-        <div id="high-score">High Score: 0</div>
-        <div id="level">Level: 1</div>
-        <img src="favicon.svg" class="player" id="player" alt="favicon">
-      </div>
-      <link rel="stylesheet" href="css/game.css">
-    </dialog>
+  <script src="js/cacheFormInputs.js"></script>
+  <script src="js/tab-container.js"></script>
+  <script src="js/darkmode.js"></script>
 </th:block>
 
-<th:block th:fragment="fileSelector(name, multiple)" th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
-                <script th:inline="javascript">
-                  const pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
-                  const multiple = [[${multiple}]] || false;
-                  const remoteCall = [[${remoteCall}]] || true;
-                </script>
-                <script src="js/downloader.js"></script>
 
-                <div class="custom-file-chooser" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
-                  <div class="mb-3">
-                    <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:required="${notRequired} ? null : 'required'">
-                  </div>
-                  <div class="selected-files"></div>
-                </div>
+<th:block th:fragment="game">
+  <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
+    <script th:inline="javascript">
+      console.log("loaded game");
+      $(document).ready(function () {
 
-                <div class="progressBarContainer" style="display: none; position: relative;">
-                  <div class="progress" style="height: 1rem;">
-                    <div class="progressBar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
-                      <span class="visually-hidden">Loading...</span>
-                    </div>
-                  </div>
-                </div>
-                <script src="js/fileInput.js"></script>
+        // Find the file input within the form
+        var fileInput = $('input[type="file"]');
+
+        // Find the closest enclosing form of the file input
+        var form = fileInput.closest('form');
+
+        // Find the submit button within the form
+        var submitButton = form.find('button[type="submit"], input[type="submit"]');
+
+        const boredWaitingText = /*[[#{bored}]]*/ 'Bored Waiting?';
+        const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete';
+        window.downloadCompleteText = downloadCompleteText;
+        // Create the 'show-game-btn' button
+        var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">' + boredWaitingText + '</button><br><br>');
+
+        // Insert the 'show-game-btn' just above the submit button
+        submitButton.before(gameButton);
+
+        function loadGameScript(callback) {
+          console.log('loadGameScript called');
+          const script = document.createElement('script');
+          script.src = 'js/game.js';
+          script.onload = callback;
+          document.body.appendChild(script);
+        }
+        let gameScriptLoaded = false;
+        const gameDialog = document.getElementById('game-container-wrapper');
+        $('#show-game-btn').on('click', function () {
+          console.log('Show game button clicked');
+          if (!gameScriptLoaded) {
+            console.log('Show game button load');
+            loadGameScript(function () {
+              console.log('Game script loaded');
+              window.initializeGame();
+              gameScriptLoaded = true;
+            });
+          } else {
+            window.resetGame();
+          }
+          gameDialog.showModal();
+        });
+        gameDialog.addEventListener("click", e => {
+          const dialogDimensions = gameDialog.getBoundingClientRect()
+          if (
+            e.clientX < dialogDimensions.left ||
+            e.clientX > dialogDimensions.right ||
+            e.clientY < dialogDimensions.top ||
+            e.clientY > dialogDimensions.bottom
+          ) {
+            gameDialog.close();
+          }
+        })
+      })
+    </script>
+    <div id="game-container">
+      <div id="lives">Lives: 3</div>
+      <div id="score">Score: 0</div>
+      <div id="high-score">High Score: 0</div>
+      <div id="level">Level: 1</div>
+      <img src="favicon.svg" class="player" id="player" alt="favicon">
+    </div>
+    <link rel="stylesheet" href="css/game.css">
+  </dialog>
+</th:block>
+
+<th:block th:fragment="fileSelector(name, multiple)"
+  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
+  <script th:inline="javascript">
+    const pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
+    const multiple = [[${ multiple }]] || false;
+    const remoteCall = [[${ remoteCall }]] || true;
+  </script>
+  <script src="js/downloader.js"></script>
+
+  <div class="custom-file-chooser"
+    th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
+    <div class="mb-3">
+      <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple
+        th:required="${notRequired} ? null : 'required'">
+    </div>
+    <div class="selected-files"></div>
+  </div>
+
+  <div class="progressBarContainer" style="display: none; position: relative;">
+    <div class="progress" style="height: 1rem;">
+      <div class="progressBar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
+        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <script src="js/fileInput.js"></script>
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/errorBanner.html b/src/main/resources/templates/fragments/errorBanner.html
index a50704227..669083901 100644
--- a/src/main/resources/templates/fragments/errorBanner.html
+++ b/src/main/resources/templates/fragments/errorBanner.html
@@ -1,12 +1,18 @@
 <th:block th:fragment="errorBanner">
 
-  <br  th:if="${message}">
-  <div id="errorContainer" th:if="${message}" class="alert alert-danger alert-dismissible fade show" role="alert">
-    <h4 class="alert-heading" th:text="'Error:  ' + ${status} + '  ' + ${error}"></h4>
+  <br th:if="${message}">
+  <div id="errorContainer" th:if="${message}" class="alert alert-danger alert-dismissible alert-container fade show" role="alert">
+    <div class="alert-header d-flex">
+      <span class="alert-heading" th:text="'Error:  ' + ${status} + '  ' + ${error}"></span>
+      <button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()" th:text="#{error.showStack}"></button>
+      <button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()" th:text="#{error.copyStack}"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
+        <span class="material-symbols-rounded">
+          close
+        </span>
+      </button>
+    </div>
     <p th:text="${message} + ' for path: ' + ${path}"></p>
-    <button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()" th:text="#{error.showStack}"></button>
-    <button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()" th:text="#{error.copyStack}"></button>
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()"></button>
     <!-- Stack trace section -->
     <div id="trace" th:if="${trace}" style="max-height: 0; overflow: hidden;">
       <div style="background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 3px; padding: 10px; margin-top: 5px;">
@@ -34,7 +40,7 @@
 
     function copytrace() {
       var flip = false
-      if(!traceVisible) {
+      if (!traceVisible) {
         toggletrace()
         flip = true
       }
@@ -45,7 +51,7 @@
       window.getSelection().addRange(range);
       document.execCommand("copy");
       window.getSelection().removeAllRanges();
-      if(flip){
+      if (flip) {
         toggletrace()
       }
     }
@@ -53,7 +59,7 @@
     function dismissError() {
       var errorContainer = document.getElementById("errorContainer");
       errorContainer.style.display = "none";
-      errorContainer.style.height ="0";
+      errorContainer.style.height = "0";
     }
 
     function adjustContainerHeight() {
@@ -66,4 +72,4 @@
       }
     }
   </script>
-</th:block>
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index a7ed547f6..8afd54a48 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,19 +1,8 @@
-<footer th:fragment="footer" id="footer" class="text-center py-3">
-        <div class="footer-center">
-          <a href="https://github.com/Stirling-Tools/Stirling-PDF" target="_blank" class="mx-1" th:title="#{visitGithub}">
-            <img src="images/github.svg" alt="github">
-          </a>
-          <a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1" th:title="#{seeDockerHub}">
-            <img src="images/docker.svg" alt="docker">
-          </a>
-          <a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1" th:title="#{joinDiscord}">
-            <img src="images/discord.svg" alt="discord">
-          </a>
-          <a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1" th:title="#{donate}">
-            <img src="images/suit-heart-fill.svg" alt="suit-heart-fill">
-          </a>
-        </div>
-        <div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
-        <a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
-      </footer>
-
+<footer th:fragment="footer" id="footer" class="text-center py-5">
+  <div class="footer-center">
+    <div class="footer-powered-by">
+      <span th:text="#{poweredBy} + ' Stirling PDF'"></span>
+    </div>
+    <a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
+  </div>
+</footer>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/languages.html b/src/main/resources/templates/fragments/languages.html
index 57f00e8ec..16cd693bf 100644
--- a/src/main/resources/templates/fragments/languages.html
+++ b/src/main/resources/templates/fragments/languages.html
@@ -17,6 +17,7 @@
                       <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_BR"> <img src="images/flags/pt_br.svg" alt="icon" width="20" height="15"> Português (BR)</a>
                       <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_PT"> <img src="images/flags/pt_pt.svg" alt="icon" width="20" height="15"> Português (PT)</a>
                       <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ro_RO"> <img src="images/flags/ro.svg" alt="icon" width="20" height="15"> Romanian</a>
+                      <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sk_SK"> <img src="images/flags/sk.svg" alt="icon" width="20" height="15"> Slovensky</a>
                       <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sv_SE"> <img src="images/flags/se.svg" alt="icon" width="20" height="15"> Svenska</a>
                       <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="tr_TR"> <img src="images/flags/tr.svg" alt="icon" width="20" height="15"> Türkçe</a>
                       <a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ru_RU"> <img src="images/flags/ru.svg" alt="icon" width="20" height="15"> Русский</a>
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 8b412a6bb..1bc2c7a5b 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,231 +1,444 @@
 <div th:fragment="navbar" class="mx-auto">
-          <script src="js/languageSelection.js"></script>
-          <script th:inline="javascript">
-            const currentVersion = /*[[${@appVersion}]]*/ '';
-            const noFavourites = /*[[#{noFavourites}]]*/ '';
-            const updateAvailable =  /*[[#{settings.updateAvailable}]]*/ '';
-          </script>
-          <script th:src="@{js/githubVersion.js}"></script>
-          <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <div class="container ">
-              <a class="navbar-brand" href="#" th:href="@{/}" style="display: flex;">
-                <img class="main-icon" src="favicon.svg?v=2" alt="icon">
-                <span class="icon-text" th:text="${@navBarText}"></span>
-              </a>
-              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto flex-nowrap">
-                  <li class="nav-item" th:if="${@endpointConfiguration.isEndpointEnabled('multi-tool')}">
-                    <a class="nav-link" href="#" th:href="@{multi-tool}" th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
-                      <img class="icon" src="images/tools.svg" alt="icon">
-                      <span class="icon-text" th:text="#{home.multiTool.title}"></span>
-                    </a>
-                  </li>
-                  <li th:if="${@endpointConfiguration.isEndpointEnabled('multi-tool')}" class="nav-item nav-item-separator"></li>
-                  <li th:if="${@endpointConfiguration.isEndpointEnabled('pipeline')}" class="nav-item">
-                    <a class="nav-link" href="#" th:href="@{pipeline}" th:classappend="${currentPage}=='pipeline' ? 'active' : ''" th:title="#{home.pipeline.desc}">
-                      <img class="icon" src="images/pipeline.svg" alt="icon">
-                      <span class="icon-text" th:text="#{home.pipeline.title}"></span>
-                    </a>
-                  </li>
-                  <li th:if="${@endpointConfiguration.isEndpointEnabled('pipeline')}" class="nav-item nav-item-separator"></li>
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/file-earmark-pdf.svg" alt="icon">
-                      <span class="icon-text" th:text="#{navbar.pageOps}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-1">
-                      <!-- Existing menu items -->
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'images/union.svg', 'home.merge.title', 'home.merge.desc', 'merge.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'images/layout-split.svg', 'home.split.title', 'home.split.desc', 'split.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-organizer', 'images/sort-numeric-down.svg', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('rotate-pdf', 'images/arrow-clockwise.svg', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-pages', 'images/file-earmark-x.svg', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-page-layout', 'images/page-layout.svg', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('scale-pages', 'images/scale-pages.svg', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-split-pdf', 'images/layout-split.svg', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('adjust-contrast', 'images/adjust-contrast.svg', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('crop', 'images/crop.svg', 'home.crop.title', 'home.crop.desc', 'crop.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-page', 'images/extract.svg', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'images/single-page.svg', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-by-size-or-count', 'images/layout-split.svg', 'home.autoSizeSplitPDF.title', 'home.autoSizeSplitPDF.desc', 'autoSizeSplitPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('overlay-pdf', 'images/overlay.svg', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdf-by-sections', 'images/layout-split.svg', 'home.split-by-sections.title', 'home.split-by-sections.desc', 'split-by-sections.tags')}"></div>
-                    </div>
-                  </li>
+  <script src="js/languageSelection.js"></script>
+  <script th:inline="javascript">
+    const currentVersion = /*[[${@appVersion}]]*/ '';
+    const noFavourites = /*[[#{noFavourites}]]*/ '';
+    const updateAvailable =  /*[[#{settings.updateAvailable}]]*/ '';
+  </script>
+  <script th:src="@{js/githubVersion.js}"></script>
+  <nav class="navbar navbar-expand-lg">
+    <div class="container ">
+      <a class="navbar-brand" href="#" th:href="@{/}" style="display: flex;">
+        <img class="main-icon" src="favicon.svg?v=2" alt="icon">
+        <span class="icon-text" th:text="${@navBarText}"></span>
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="material-symbols-rounded">
+          menu
+        </span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav me-auto flex-nowrap">
 
-                  <li class="nav-item nav-item-separator"></li>
-
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-2" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/arrow-left-right.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
-                      <span class="icon-text" th:text="#{navbar.convert}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-2">
-                      <!-- Existing menu items -->
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'images/image.svg', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'images/file.svg', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('html-to-pdf', 'images/html.svg', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('url-to-pdf', 'images/url.svg', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'images/markdown.svg', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('book-to-pdf', 'images/book.svg', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags')}"></div>
-                      <hr class="dropdown-divider">
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'images/image.svg', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'images/file-earmark-word.svg', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'images/file-earmark-ppt.svg', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'images/filetype-txt.svg', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'images/filetype-html.svg', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'images/filetype-xml.svg', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'images/file-earmark-pdf.svg', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-csv', 'images/pdf-csv.svg', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'pdfToPDFA.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-book', 'images/book.svg', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags')}"></div>
+          <!-- All Tools -->
+          <li class="nav-item dropdown dropdown-mega position-static"
+            th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' OR ${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='html-to-pdf' OR ${currentPage}=='url-to-pdf' OR ${currentPage}=='pdf-to-img' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='remove-annotations' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
+            <a class="nav-link" id="navbarDropdown-1" href="#" role="button" data-bs-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="material-symbols-rounded">
+                apps
+              </span>
+              <span class="icon-text" th:data-text="#{navbar.allTools}" th:text="#{navbar.allTools}"></span>
+            </a>
+            <div class="dropdown-menu 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="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                        <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'add_to_photos', 'home.merge.title', 'home.merge.desc', 'merge.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('rotate-pdf', 'rotate_right', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-organizer', 'format_list_bulleted', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-page-layout', 'dashboard', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('scale-pages', 'fullscreen', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-page', 'upload', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags', 'organize')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
+                        </div>
+                      </div>
+                      <!-- Convert to PDF menu items -->
+                      <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                        <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convert')}">
+                        </div>
+                      </div>
+                      <!-- Convert from PDF menu items -->
+                      <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                        <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'word')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'ppt')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'text_fields', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'html', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'code', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'pdfToPDFA.tags', 'convert')}">
+                        </div>
+                      </div>
+                      <!-- Security menu items -->
+                      <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                        <h6 class="menu-title" th:text="#{navbar.sections.security}"></h6>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'lock', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'lock_open_right', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'encrypted', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'workspace_premium', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('sanitize-pdf', 'sanitizer', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-redact', 'ink_eraser', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
+                        </div>
+                      </div>
+                      <!-- View & Edit menu items -->
+                      <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                        <h6 class="menu-title" th:text="#{navbar.sections.edit}"></h6>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('view-pdf', 'menu_book', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', '123', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'add_photo_alternate', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'photo_library', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'layers_clear', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-annotations', 'thread_unread', 'home.removeAnnotations.title', 'home.removeAnnotations.desc', 'removeAnnotations.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'assignment', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags', 'other')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'info', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags', 'other')}">
+                        </div>
+                      </div>
+                      <!-- Advance menu items -->
+                      <div class="col-lg-2 col-sm-6 py px-xl-1 px-2">
+                        <h6 class="menu-title" th:text="#{navbar.sections.advance}"></h6>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'family_history', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-rename', 'text_fields_alt', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'build', 'home.repair.title', 'home.repair.desc', 'repair.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-split-pdf', 'cut', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdf-by-sections', 'grid_on', 'home.split-by-sections.title', 'home.split-by-sections.desc', 'split-by-sections.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-by-size-or-count', 'vertical_split', 'home.autoSizeSplitPDF.title', 'home.autoSizeSplitPDF.desc', 'autoSizeSplitPDF.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags', 'advance')}">
+                        </div>
+                        <div
+                          th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags', 'advance')}">
+                        </div>
+                      </div>
                     </div>
-                  </li>
-
-                  <li class="nav-item nav-item-separator"></li>
-
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-3" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/shield-check.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text" th:text="#{navbar.security}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-3">
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'images/lock.svg', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'images/unlock.svg', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'images/shield-lock.svg', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'images/droplet.svg', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'images/award.svg', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sanitize-pdf', 'images/sanitize.svg', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-redact', 'images/eraser-fill.svg', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags')}"></div>
-                    </div>
-                  </li>
-
-                  <li class="nav-item nav-item-separator"></li>
-
-                  <li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='remove-annotations' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-4" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
-                      <span class="icon-text" th:text="#{navbar.other}"></span>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="navbarDropdown-4">
-                      <!--<div th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'images/pipeline.svg', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags')}"></div> -->
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('view-pdf', 'images/book-opened.svg', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'images/search.svg', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'images/file-earmark-richtext.svg', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'images/file-zip.svg', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'images/images.svg', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'images/clipboard-data.svg', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'images/scanner.svg', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'images/sign.svg', 'home.sign.title', 'home.sign.desc', 'sign.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'images/flatten.svg', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'images/wrench.svg', 'home.repair.title', 'home.repair.desc', 'repair.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'images/blank-file.svg', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-annotations', 'images/no-chat.svg', 'home.removeAnnotations.title', 'home.removeAnnotations.desc', 'removeAnnotations.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'images/scales.svg', 'home.compare.title', 'home.compare.desc', 'compare.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', 'images/add-page-numbers.svg', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-rename', 'images/fonts.svg', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'images/info.svg', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'images/js.svg', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags')}"></div>
-                      <div th:replace="~{fragments/navbarEntry :: navbarEntry ('stamp', 'images/stamp.svg', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags')}"></div>
-                    </div>
-                  </li>
-                </ul>
-                <ul class="navbar-nav  flex-nowrap">
-                  <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" id="navbarDropdown-5" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <img class="navbar-icon" src="images/star.svg" alt="icon" width="24" height="24">
-                    </a>
-                    <div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
-                      <!-- Dropdown items will be added here by JavaScript -->
-                    </div>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" id="dark-mode-toggle" href="#">
-                      <img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="icon" >
-                    </a>
-                  </li>
-                  <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2 globe-icon" viewBox="0 0 20 20">
-                        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
-                      </svg>
-                    </a>
-                    <div class="dropdown-menu" aria-labelledby="languageDropdown">
-                      <th:block th:insert="~{fragments/languages :: langs}"></th:block>
-                    </div>
-                  </li>
-                  <li class="nav-item">
-                    <!-- Settings Button -->
-                    <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
-                      <img class="navbar-icon" src="images/gear.svg" alt="icon" width="24" height="24">
-                    </a>
-                  </li>
-                  <!-- Search Button and Search Bar -->
-                  <li class="nav-item position-relative">
-                    <a href="#" class="nav-link" id="search-icon">
-                      <img class="navbar-icon" src="images/search.svg" alt="icon" width="24" height="24">
-                    </a>
-                    <!-- Search Bar -->
-                    <div class="collapse position-absolute" id="navbarSearch">
-                      <form class="d-flex p-2 bg-white border search-form" id="searchForm">
-                        <input class="form-control search-input" type="search" th:placeholder="#{home.searchBar}" aria-label="Search" id="navbarSearchInput">
-                      </form>
-                      <!-- Search Results -->
-                      <div id="searchResults" class="border p-2 bg-white search-results"></div>
-                    </div>
-                  </li>
-                </ul>
+                  </div>
+                </div>
               </div>
             </div>
-            <script src="js/favourites.js"></script>
-            <script src="js/search.js"></script>
-          </nav>
 
-          <th:block th:insert="~{fragments/errorBannerPerPage.html :: errorBannerPerPage}"></th:block>
-          <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered" role="document">
-              <div class="modal-content dark-card">
-                <div class="modal-header">
-                  <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
-                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                  <div class="d-flex justify-content-between align-items-center mb-3">
-                    <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
-                    <a href="https://github.com/sponsors/Frooodle" class="btn btn-sm btn-outline-primary" role="button" target="_blank" th:text="#{sponsor}+' Stirling-PDF'"></a>
-                    <a href="swagger-ui/index.html" class="btn btn-sm btn-outline-primary" role="button" target="_blank">API</a>
-                    <a th:if="${@shouldShow}" href="https://github.com/Stirling-Tools/Stirling-PDF/releases" class="btn btn-sm btn-outline-primary" id="update-btn" th:utext="#{settings.update}" role="button" target="_blank" rel="noopener"></a>
-                  </div>
-                  <div class="mb-3">
-                    <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
-                    <select class="form-control" id="downloadOption">
-                      <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
-                      <option value="newWindow" th:utext="#{settings.downloadOption.2}"></option>
-                      <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
-                    </select>
-                  </div>
-                  <div class="mb-3">
-                    <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
-                    <input type="range" class="form-range" min="1" max="9" step="1" id="zipThreshold" value="4">
-                    <span id="zipThresholdValue" class="ms-2"></span>
-                  </div>
-                  <div class="mb-3 form-check">
-                    <input type="checkbox" class="form-check-input" id="boredWaiting" th:title="#{settings.bored.help}">
-                    <label class="form-check-label" for="boredWaiting" th:text="#{bored}"></label>
-                  </div>
-                  <div class="mb-3 form-check">
-                    <input type="checkbox" class="form-check-input" id="cacheInputs" th:title="#{settings.cacheInputs.help}">
-                    <label class="form-check-label" for="cacheInputs" th:text="#{settings.cacheInputs.name}"></label>
-                  </div>
-                  <a th:if="${@loginEnabled and @activSecurity}" href="account" class="btn btn-sm btn-outline-primary" role="button" th:text="#{settings.accountSettings}" target="_blank">Account Settings</a>
-                </div>
-                <div class="modal-footer">
-                  <a th:if="${@loginEnabled and @activSecurity}" class="btn btn-danger" role="button" th:text="#{settings.signOut}" href="logout">Sign Out</a>
-                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
-                </div>
-              </div>
+          </li>
+
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{multi-tool}"
+              th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
+              <span class="material-symbols-rounded">
+                construction
+              </span>
+              <span class="icon-text" th:data-text="#{navbar.multiTool}" th:text="#{navbar.multiTool}"></span>
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{pipeline}"
+              th:classappend="${currentPage}=='pipeline' ? 'active' : ''" th:title="#{home.pipeline.desc}">
+              <span class="material-symbols-rounded">
+                family_history
+              </span>
+              <span class="icon-text" th:data-text="#{home.pipeline.title}" th:text="#{home.pipeline.title}"></span>
+            </a>
+          </li>
+
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" title="#{home.compressPdfs.title}" th:href="@{compress-pdf}"
+              th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''" th:title="#{home.compressPdfs.desc}">
+              <span class="material-symbols-rounded">
+                zoom_in_map
+              </span>
+              <span class="icon-text" th:data-text="#{home.compressPdfs.title}"
+                th:text="#{home.compressPdfs.title}"></span>
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{split-pdfs}"
+              th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:title="#{home.split-pdfs.desc}">
+              <span class="material-symbols-rounded">
+                cut
+              </span>
+              <span class="icon-text" th:data-text="#{home.split.title}" th:text="#{home.split.title}"></span>
+            </a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="#" th:href="@{merge-pdfs}"
+              th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:title="#{home.merge.desc}">
+              <span class="material-symbols-rounded">
+                add_to_photos
+              </span>
+              <span class="icon-text" th:data-text="#{home.merge.title}" th:text="#{home.merge.title}"></span>
+            </a>
+          </li>
+
+        </ul>
+        <ul class="navbar-nav  flex-nowrap">
+          <li class="nav-item dropdown">
+            <a class="nav-link" id="navbarDropdown-5" href="#" role="button" data-bs-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="material-symbols-rounded">
+                star
+              </span>
+              <span class="icon-text icon-hide" th:data-text="#{navbar.favorite}" th:text="#{navbar.favorite}"></span>
+            </a>
+            <div class="dropdown-menu dropdown-menu-tp dropdown-mw-28" aria-labelledby="navbarDropdown-5">
+              <div class="dropdown-menu-wrapper px-xl-2 px-2" id="favoritesDropdown" >
+              <!-- Dropdown items will be added here by JavaScript -->
             </div>
           </div>
-          <script src="js/settings.js"></script>
-        </div>
\ No newline at end of file
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="dark-mode-toggle" href="#">
+              <span class="material-symbols-rounded" id="dark-mode-icon">
+                dark_mode
+              </span>
+              <span class="icon-text icon-hide" id="dark-mode-text" th:data-text="#{navbar.darkmode}" th:text="#{navbar.darkmode}"></span>
+            </a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="material-symbols-rounded">
+                language
+              </span>
+              <span class="icon-text icon-hide" th:data-text="#{navbar.language}" th:text="#{navbar.language}"></span>
+            </a>
+            <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
+              <div class="dropdown-menu-wrapper px-xl-2 px-2">
+                <div class="scrollable-y dropdown-mw-20">
+                  <th:block th:insert="~{fragments/languages :: langs}"></th:block>
+                </div>
+              </div>
+            </div>
+          </li>
+          
+          <li class="nav-item dropdown">
+			  <a class="nav-link" href="#" id="searchDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			    <span class="material-symbols-rounded">
+			      search
+			    </span>
+			    <span class="icon-text icon-hide">Search</span>
+			  </a>
+			  <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="searchDropdown">
+			    <div class="dropdown-menu-wrapper px-xl-2 px-2">
+			      <form class="d-flex p-2 search-form" id="searchForm">
+			        <input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
+			      </form>
+			      <!-- Search Results -->
+			      <div id="searchResults" class="search-results scrollable-y dropdown-mw-20"></div>
+			    </div>
+			  </div>
+			</li>
+
+
+
+          <li class="nav-item">
+            <!-- Settings Button -->
+            <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
+              <span class="material-symbols-rounded">
+                settings
+              </span>
+              <span class="icon-text icon-hide" th:data-text="#{navbar.settings}" th:text="#{navbar.settings}"></span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <script src="js/favourites.js"></script>
+    <script src="js/search.js"></script>
+  </nav>
+
+  <th:block th:insert="~{fragments/errorBannerPerPage.html :: errorBannerPerPage}"></th:block>
+  <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+            <span class="material-symbols-rounded">
+              close
+            </span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
+          <div class="d-flex justify-content-between align-items-center mb-3 mt-3">
+            <div class="footer-center" style="flex-direction: row;">
+              <a href="https://github.com/Stirling-Tools/Stirling-PDF" class="mx-1" role="button"
+                th:title="#{visitGithub}">
+                <img src="images/github.svg" alt="github">
+              </a>
+              <a href="https://hub.docker.com/r/frooodle/s-pdf" class="mx-1" role="button" th:title="#{seeDockerHub}">
+                <img src="images/docker.svg" alt="docker">
+              </a>
+              <a href="https://discord.gg/Cn8pWhQRxZ" class="mx-1" role="button" th:title="#{joinDiscord}">
+                <img src="images/discord.svg" alt="discord">
+              </a>
+              <a href="https://github.com/sponsors/Frooodle" class="mx-1" role="button" th:title="#{donate}">
+                <span class="material-symbols-rounded fill footer-icon" style="font-size: 2.5rem;">
+                  favorite
+                </span>
+              </a>
+            </div>
+
+            <a href="swagger-ui/index.html" class="btn btn-sm btn-outline-primary mx-1" role="button"
+              target="_blank">API</a>
+            <a th:if="${@shouldShow}" href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
+              class="btn btn-sm btn-outline-primary mx-1" id="update-btn" th:utext="#{settings.update}" role="button"
+              target="_blank"></a>
+          </div>
+
+
+
+
+          <div class="mb-3">
+            <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
+            <select class="form-control" id="downloadOption">
+              <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
+              <option value="newWindow" th:utext="#{settings.downloadOption.2}"></option>
+              <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
+            </select>
+          </div>
+          <div class="mb-3">
+            <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
+            <input type="range" class="form-range" min="1" max="9" step="1" id="zipThreshold" value="4">
+            <span id="zipThresholdValue" class="ms-2"></span>
+          </div>
+          <div class="form-check mb-3">
+            <input type="checkbox" id="boredWaiting" th:title="#{settings.bored.help}">
+            <label for="boredWaiting" th:text="#{bored}"></label>
+          </div>
+          <div class="form-check mb-3">
+            <input type="checkbox" id="cacheInputs" th:title="#{settings.cacheInputs.help}">
+            <label for="cacheInputs" th:text="#{settings.cacheInputs.name}"></label>
+          </div>
+
+          <a th:if="${@loginEnabled and @activSecurity}" href="account" class="btn btn-sm btn-outline-primary"
+            role="button" th:text="#{settings.accountSettings}" target="_blank">Account Settings</a>
+        </div>
+        <div class="modal-footer">
+          <a th:if="${@loginEnabled and @activSecurity}" class="btn btn-danger" role="button"
+            th:text="#{settings.signOut}" href="logout">Sign Out</a>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="js/settings.js"></script>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html
index f0a55c167..ad117ed6f 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,6 +1,11 @@
-<th:block th:fragment="navbarEntry(endpoint, imgSrc, titleKey, descKey, tagKey)" th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
-                      <a class="dropdown-item" href="#" th:href="@{${endpoint}}" th:classappend="${endpoint.equals(currentPage)} ? 'active' : ''" th:title="#{${descKey}}" th:data-bs-tags="#{${tagKey}}">
-                        <img class="icon" th:src="@{${imgSrc}}" alt="icon">
-                        <span class="icon-text" th:text="#{${titleKey}}"></span>
-                      </a>
-</th:block>
+<th:block th:fragment="navbarEntry(endpoint, toolIcon, titleKey, descKey, tagKey, toolGroup)"
+  th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
+  <a class="dropdown-item" href="#" th:href="@{${endpoint}}"
+    th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}" th:title="#{${descKey}}"
+    th:data-bs-tags="#{${tagKey}}">
+    <div class="icon" alt="icon" th:class="@{${toolGroup}}">
+      <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
+      <span class="icon-text" th:text="#{${titleKey}}"></span>
+    </div>
+  </a>
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 83528d4f2..9f78c128e 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,113 +1,237 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <!-- Jumbotron -->
-        <div class="bg-light p-5 rounded d-none d-md-block" id="jumbotron">
-          <div class="container">
-            <h1 class="display-4" th:text="${@appName}"></h1>
-            <p class="lead" th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}"></p>
-          </div>
+<body>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <!-- Jumbotron -->
+      <div class="p-5 rounded d-none d-md-block" id="jumbotron">
+        <div class="container">
+          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
+          <p class="lead fs-4"
+            th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
+          </p>
         </div>
-        <br class="d-md-none">
-        <!-- Features -->
-        <script src="js/homecard.js"></script>
+      </div>
+      <br class="d-md-none">
+      <!-- Features -->
+      <script src="js/homecard.js"></script>
+      <div class=" container">
+        <br>
+        <span class="material-symbols-rounded search-icon">
+          search
+        </span>
+        <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+        <div class="features-container">
 
-        <div class=" container">
-          <br>
-          <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
-          <div class="features-container">
-            <div th:if="${@shouldShow}" class="feature-card favorite" id="update-link" style="display: none;">
-              <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" class="nav-link text-body-secondary px-2" rel="noopener">
-                <div class="d-flex align-items-center">
-                  <img class="card-icon home-card-icon home-card-icon-colour" src="images/update.svg" alt="Icon" width="30" height="30">
-                  <h5 class="card-title lookatme ms-2" th:text="#{settings.update}" th:data-lookatme-text="#{settings.update}"></h5>
+          <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>
-                <p class="card-text" id="app-update"></p>
-              </a>
-            </div>
-            <div th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', svgPath='images/pipeline.svg', tags=#{pipeline.tags})}"></div>
+                <div 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 th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', svgPath='images/book-opened.svg', tags=#{viewPdf.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', svgPath='images/tools.svg', tags=#{multiTool.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', svgPath='images/union.svg', tags=#{merge.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', svgPath='images/layout-split.svg', tags=#{split.tags})}"></div>
 
-            <div th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', svgPath='images/arrow-clockwise.svg', tags=#{rotate.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', svgPath='images/crop.svg', tags=#{crop.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', svgPath='images/add-page-numbers.svg', tags=#{add-page-numbers.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', toolIcon='add_to_photos', tags=#{merge.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', toolIcon='cut', tags=#{split.tags}, toolGroup='organize')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', svgPath='images/adjust-contrast.svg', tags=#{adjust-contrast.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', svgPath='images/image.svg', tags=#{imageToPdf.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', svgPath='images/image.svg', tags=#{pdfToImage.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', toolIcon='rotate_right', tags=#{rotate.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', toolIcon='crop', tags=#{crop.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', svgPath='images/sort-numeric-down.svg', tags=#{pdfOrganiser.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', svgPath='images/file-earmark-richtext.svg', tags=#{addImage.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', svgPath='images/droplet.svg', tags=#{watermark.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', toolIcon='image', tags=#{imageToPdf.tags}, toolGroup='image')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='image', tags=#{pdfToImage.tags}, toolGroup='image')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', svgPath='images/file.svg', tags=#{fileToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', svgPath='images/file-earmark-x.svg', tags=#{removePages.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', svgPath='images/lock.svg', tags=#{addPassword.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', toolIcon='format_list_bulleted', tags=#{pdfOrganiser.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='text_fields', tags=#{addImage.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', svgPath='images/unlock.svg', tags=#{removePassword.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', svgPath='images/file-zip.svg', tags=#{compressPdfs.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', svgPath='images/clipboard-data.svg', tags=#{changeMetadata.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', toolIcon='delete', tags=#{removePages.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', svgPath='images/shield-lock.svg', tags=#{permissions.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', svgPath='images/search.svg', tags=#{ocr.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', svgPath='images/images.svg', tags=#{extractImages.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='photo_library', tags=#{extractImages.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', svgPath='images/file-earmark-pdf.svg', tags=#{pdfToPDFA.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', svgPath='images/file-earmark-word.svg', tags=#{PDFToWord.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', svgPath='images/file-earmark-ppt.svg', tags=#{PDFToPresentation.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='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', svgPath='images/filetype-txt.svg', tags=#{PDFToText.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', svgPath='images/filetype-html.svg', tags=#{PDFToHTML.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', svgPath='images/filetype-xml.svg', tags=#{PDFToXML.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', toolIcon='text_fields', tags=#{PDFToText.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', toolIcon='html', tags=#{PDFToHTML.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', toolIcon='code', tags=#{PDFToXML.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', toolIcon='signature', tags=#{sign.tags}, toolGroup='sign')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', svgPath='images/scanner.svg', tags=#{ScannerImageSplit.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', svgPath='images/sign.svg', tags=#{sign.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', svgPath='images/flatten.svg', tags=#{flatten.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', toolIcon='scan_delete', tags=#{removeBlanks.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', toolIcon='thread_unread', tags=#{removeAnnotations.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', toolIcon='compare', tags=#{compare.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', svgPath='images/wrench.svg', tags=#{repair.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', svgPath='images/blank-file.svg', tags=#{removeBlanks.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', svgPath='images/no-chat.svg', tags=#{removeAnnotations.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', svgPath='images/scales.svg', tags=#{compare.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', toolIcon='text_fields_alt', tags=#{auto-rename.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', toolIcon='cut', tags=#{autoSplitPDF.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', svgPath='images/award.svg', tags=#{certSign.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', svgPath='images/page-layout.svg', tags=#{pageLayout.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', svgPath='images/scale-pages.svg', tags=#{scalePages.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', toolIcon='javascript', tags=#{showJS.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
+          </div>
 
-            <div th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', svgPath='images/fonts.svg', tags=#{auto-rename.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', svgPath='images/layout-split.svg', tags=#{autoSplitPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', svgPath='images/sanitize.svg', tags=#{sanitizePdf.tags})}"></div>
-
-            <div th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', svgPath='images/url.svg', tags=#{URLToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', svgPath='images/html.svg', tags=#{HTMLToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', svgPath='images/markdown.svg', tags=#{MarkdownToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', svgPath='images/info.svg', tags=#{getPdfInfo.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', svgPath='images/extract.svg', tags=#{extractPage.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', svgPath='images/single-page.svg', tags=#{PdfToSinglePage.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', svgPath='images/js.svg', tags=#{showJS.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', svgPath='images/eraser-fill.svg', tags=#{autoRedact.tags})}"></div>
-
-            <div th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', svgPath='images/pdf-csv.svg', tags=#{tableExtraxt.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', svgPath='images/layout-split.svg', tags=#{autoSizeSplitPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', svgPath='images/overlay.svg', tags=#{overlay-pdfs.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', svgPath='images/layout-split.svg', tags=#{split-by-sections.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', svgPath='images/book.svg', tags=#{BookToPDF.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', svgPath='images/book.svg', tags=#{PDFToBook.tags})}"></div>
-            <div th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', svgPath='images/stamp.svg', tags=#{AddStampRequest.tags})}"></div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', toolIcon='vertical_split', tags=#{autoSizeSplitPDF.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', toolIcon='layers', tags=#{overlay-pdfs.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', toolIcon='grid_on', tags=#{split-by-sections.tags}, toolGroup='advance')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='images/book.svg', tags=#{BookToPDF.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='images/book.svg', tags=#{PDFToBook.tags}, toolGroup='convert')}">
+          </div>
+          <div
+            th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/licenses.html b/src/main/resources/templates/licenses.html
index f9d6c641d..c91a4507c 100644
--- a/src/main/resources/templates/licenses.html
+++ b/src/main/resources/templates/licenses.html
@@ -11,7 +11,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
+            <div class="col-md-6" id="bg-card">
               <h2 th:text="#{licenses.header}">3rd Party licenses</h2>
               <table class="table table-striped">
                 <thead>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 8cd475508..3d510f008 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -8,28 +8,8 @@
   <body>
     <div class="your-container-class"></div>
     <div class="container-flex">
-      <main class="form-signin text-center">
+      <main class="form-signin">
         <script>
-          function setInputMode(elementId, mode) {
-            var inputElement = document.getElementById(elementId);
-
-            if (!inputElement) return;  // If the element doesn't exist, exit the function
-
-            switch (mode) {
-              case "on":
-                inputElement.classList.add("bg-dark", "text-light");
-                inputElement.classList.remove("bg-light", "text-dark");
-                break;
-              case "off":
-                inputElement.classList.add("bg-light", "text-dark");
-                inputElement.classList.remove("bg-dark", "text-light");
-                break;
-              case "rainbow":
-                // Assuming you have defined some classes for rainbow mode
-                break;
-            }
-          }
-
           document.addEventListener('modeChanged', function(e) {
             var mode = e.detail;
 
@@ -137,41 +117,46 @@
           <span th:text="#{changedCredsMessage}">Default message if not found</span>
         </div>
         <form th:action="@{login}" method="post">
-          <img class="mb-4" src="favicon.svg?v=2" alt="" width="144" height="144">
-          <h1 class="h1 mb-3 fw-normal" th:text="${@appName}">Stirling-PDF</h1>
-          <div th:if="${oAuth2Enabled}">
+          <div class="text-center">
+            <img class="mb-4" src="favicon.svg?v=2" alt="" width="144" height="144">
+            <h1 class="h1 mb-3 fw-normal" th:text="${@appName}">Stirling-PDF</h1>
+            <div th:if="${oAuth2Enabled}">
             <a href="oauth2/authorization/oidc" class="w-100 btn btn-lg btn-primary" th:text="#{login.ssoSignIn}">Login Via SSO</a>
             <div class="text-danger text-center">
               <div th:if="${error == 'oauth2AutoCreateDisabled'}" th:text="#{login.oauth2AutoCreateDisabled}">OAUTH2 Auto-Create User Disabled.</div>
             </div>
             <hr />
           </div>
-          <h2 class="h5 mb-3 fw-normal" th:text="#{login.signinTitle}">Please sign in</h2>
+            <h2 class="h5 mb-3 fw-normal" th:text="#{login.signinTitle}">Please sign in</h2>
+          </div>
+
 
           <div class="form-floating">
-            <input type="text" class="form-control bg-dark text-light" id="username" name="username" placeholder="admin">
+            <input type="text" class="form-control" id="username" name="username" placeholder="admin">
             <label for="username" th:text="#{username}">Username</label>
           </div>
           <div class="form-floating">
-            <input type="password" class="form-control bg-dark text-light" id="password" name="password" placeholder="Password">
+            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
             <label for="password" th:text="#{password}">Password</label>
           </div>
 
-          <div class="checkbox mb-3">
+          <div class="form-check m-2 mb-3">
             <input type="checkbox" id="remember" value="remember-me">
             <label for="remember" th:text="#{login.rememberme}"></label> 
           </div>
           <button class="w-100 btn btn-lg btn-primary" type="submit" th:text="#{login.signin}">Sign in</button>
         </form>
         <div class="mt-3"> <!-- Added a margin-top for spacing -->
-          <div class="dropdown">
+          <div class="dropdown text-center">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
               <img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
               <!-- Default language placeholder -->
             </button>
             <div class="dropdown-menu" aria-labelledby="languageDropdown">
               <!-- Here's where the fragment will be included -->
-              <th:block th:replace="~{fragments/languages :: langs}"></th:block>
+              <div class="scrollable-y">
+                <th:block th:replace="~{fragments/languages :: langs}"></th:block>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 10a0bb060..c8579fc08 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container" id="dropContainer">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{merge.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">add_to_photos</span>
+                <span class="tool-header-text" th:text="#{merge.header}"></span>
+              </div>
               <form action="api/v1/general/merge-pdfs" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{multiPdfDropPrompt}"></label>
@@ -22,7 +25,7 @@
                 <div class="mb-3">
                   <ul id="selectedFiles" class="list-group"></ul>
                 </div>
-                <div class="mb-3 text-center">
+                <div class="mb-3">
                   <button type="button" id="sortByNameBtn" class="btn btn-info" th:text="#{merge.sortByName}"></button>
                   <button type="button" id="sortByDateBtn" class="btn btn-info" th:text="#{merge.sortByDate}"></button>
                   <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
diff --git a/src/main/resources/templates/misc/add-image.html b/src/main/resources/templates/misc/add-image.html
index 86bc6bab1..40146ed23 100644
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -13,8 +13,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addImage.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">add_photo_alternate</span>
+                <span class="tool-header-text" th:text="#{addImage.header}"></span>
+              </div>
 
               <!-- pdf selector -->
               <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/misc/add-page-numbers.html b/src/main/resources/templates/misc/add-page-numbers.html
index 0d02d4565..a118a4c26 100644
--- a/src/main/resources/templates/misc/add-page-numbers.html
+++ b/src/main/resources/templates/misc/add-page-numbers.html
@@ -55,8 +55,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addPageNumbers.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">123</span>
+                <span class="tool-header-text" th:text="#{addPageNumbers.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/add-page-numbers}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/adjust-contrast.html b/src/main/resources/templates/misc/adjust-contrast.html
index 8fc3b661b..1f381e03e 100644
--- a/src/main/resources/templates/misc/adjust-contrast.html
+++ b/src/main/resources/templates/misc/adjust-contrast.html
@@ -20,7 +20,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12">
+            <div class="col-md-12" id="bg-card">
               <div class="row justify-content-center">
                 <div class="col-md-3">
                   <div id="sliders-container" style="display:none;">
@@ -35,7 +35,10 @@
                   </div>
                 </div>
                 <div class="col-md-7">
-                  <h2 th:text="#{adjustContrast.header}"></h2>
+                  <div class="tool-header">
+                    <span class="material-symbols-rounded tool-header-icon advance">palette</span>
+                    <span class="tool-header-text" th:text="#{adjustContrast.header}"></span>
+                  </div>
                   <div class="col-md-8">
                     <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                   </div>
diff --git a/src/main/resources/templates/misc/auto-crop.html b/src/main/resources/templates/misc/auto-crop.html
index 06e7874fa..2dcaa06de 100644
--- a/src/main/resources/templates/misc/auto-crop.html
+++ b/src/main/resources/templates/misc/auto-crop.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoCrop.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">crop</span>
+                <span class="tool-header-text" th:text="#{autoCrop.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-crop}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/auto-rename.html b/src/main/resources/templates/misc/auto-rename.html
index 42876df36..8a7085cf7 100644
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{auto-rename.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">text_fields_alt</span>
+                <span class="tool-header-text" th:text="#{auto-rename.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-rename}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/change-metadata.html b/src/main/resources/templates/misc/change-metadata.html
index b620755c7..90ead65f7 100644
--- a/src/main/resources/templates/misc/change-metadata.html
+++ b/src/main/resources/templates/misc/change-metadata.html
@@ -11,18 +11,21 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{changeMetadata.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">assignment</span>
+                <span class="tool-header-text" th:text="#{changeMetadata.header}"></span>
+              </div>
               <form method="post" id="form1" enctype="multipart/form-data" th:action="@{api/v1/misc/update-metadata}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p>
-                <div class="mb-3-inline form-check">
-                  <input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll">
-                  <label class="ms-3" for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
+                <div class="form-check mb-3-inline ms-3">
+                  <input type="checkbox" id="deleteAll" name="deleteAll">
+                  <label for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
                 </div>
-                <div class="mb-3-inline form-check">
-                  <input type="checkbox" class="form-check-input" id="customModeCheckbox">
-                  <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
+                <div class="form-check mb-3-inline ms-3">
+                  <input type="checkbox" id="customModeCheckbox">
+                  <label for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                 </div>
                 <div class="mb-3">
                   <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
diff --git a/src/main/resources/templates/misc/compare.html b/src/main/resources/templates/misc/compare.html
index fd9ff9582..e68a6bb4f 100644
--- a/src/main/resources/templates/misc/compare.html
+++ b/src/main/resources/templates/misc/compare.html
@@ -20,8 +20,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9">
-              <h2 th:text="#{compare.header}"></h2>
+            <div class="col-md-9" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">compare</span>
+                <span class="tool-header-text" th:text="#{compare.header}"></span>
+              </div>
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
               <button class="btn btn-primary"  onclick="comparePDFs()" th:text="#{compare.submit}"></button>
diff --git a/src/main/resources/templates/misc/compress-pdf.html b/src/main/resources/templates/misc/compress-pdf.html
index 3638e3af8..74f9f95dc 100644
--- a/src/main/resources/templates/misc/compress-pdf.html
+++ b/src/main/resources/templates/misc/compress-pdf.html
@@ -1,47 +1,55 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{compress.header}"></h2>
-              <form action="#" th:action="@{api/v1/misc/compress-pdf}" method="post" enctype="multipart/form-data">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                <div class="card mb-3">
-                  <div class="card-body">
-                    <h4 th:text="#{compress.selectText.1}"></h4>
-                    <label for="optimizeLevel" th:text="#{compress.selectText.2}"></label>
-                    <select name="optimizeLevel" id="optimizeLevel" class="form-control">
-                      <option value="1">1</option>
-                      <option value="2" selected>2</option>
-                      <option value="3">3</option>
-                      <option value="4" th:text="#{compress.selectText.3}"></option>
-                    </select>
-                  </div>
-                </div>
-                <div class="card mb-3">
-                  <div class="card-body">
-                    <h4 th:text="#{compress.selectText.4}"></h4>
-                    <label for="expectedOutputSize" th:text="#{compress.selectText.5}"></label>
-                    <input type="text" name="expectedOutputSize" id="expectedOutputSize" class="form-control">
-                  </div>
-                </div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
-              </form>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon advance">zoom_in_map</span>
+              <span class="tool-header-text" th:text="#{compress.header}"></span>
             </div>
+            <form action="#" th:action="@{api/v1/misc/compress-pdf}" method="post" enctype="multipart/form-data">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+              <div class="card mb-3">
+                <div class="card-body">
+                  <h4 th:text="#{compress.selectText.1}"></h4>
+                  <label for="optimizeLevel" th:text="#{compress.selectText.2}"></label>
+                  <select name="optimizeLevel" id="optimizeLevel" class="form-control">
+                    <option value="1">1</option>
+                    <option value="2" selected>2</option>
+                    <option value="3">3</option>
+                    <option value="4" th:text="#{compress.selectText.3}"></option>
+                  </select>
+                </div>
+              </div>
+              <div class="card mb-3">
+                <div class="card-body">
+                  <h4 th:text="#{compress.selectText.4}"></h4>
+                  <label for="expectedOutputSize" th:text="#{compress.selectText.5}"></label>
+                  <input type="text" name="expectedOutputSize" id="expectedOutputSize" class="form-control">
+                </div>
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/misc/extract-image-scans.html b/src/main/resources/templates/misc/extract-image-scans.html
index 90623b228..4932ae916 100644
--- a/src/main/resources/templates/misc/extract-image-scans.html
+++ b/src/main/resources/templates/misc/extract-image-scans.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{home.ScannerImageSplit.title}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">scanner</span>
+                <span class="tool-header-text" th:text="#{home.ScannerImageSplit.title}"></span>
+              </div>
 
               <form id="multiPdfForm" th:action="@{api/v1/misc/extract-image-scans}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*, application/pdf')}"></div>
diff --git a/src/main/resources/templates/misc/extract-images.html b/src/main/resources/templates/misc/extract-images.html
index 12d2f64e9..eec412b41 100644
--- a/src/main/resources/templates/misc/extract-images.html
+++ b/src/main/resources/templates/misc/extract-images.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{extractImages.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">photo_library</span>
+                <span class="tool-header-text" th:text="#{extractImages.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/extract-images}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/misc/flatten.html b/src/main/resources/templates/misc/flatten.html
index 497108313..dd90fee5f 100644
--- a/src/main/resources/templates/misc/flatten.html
+++ b/src/main/resources/templates/misc/flatten.html
@@ -11,38 +11,23 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{flatten.header}"></h2>
-              <form id="pdfForm" class="mb-3">
+
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">layers_clear</span>
+                <span class="tool-header-text" th:text="#{flatten.header}"></span>
+              </div>
+              <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/flatten}" id="pdfForm" class="mb-3">
                 <div class="custom-file">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                 </div>
+                <div class="form-check ms-3">
+                  <input type="checkbox" id="flattenOnlyForms" name="flattenOnlyForms">
+                  <label for="flattenOnlyForms" th:text="#{flatten.flattenOnlyForms}" ></label>
+                </div>         
+                </div>	
+                <br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{flatten.submit}"></button>
-                <script src="js/local-pdf-input-download.js"></script>
-                <script>
-                  document.getElementById('pdfForm').addEventListener('submit', async (e) => {
-                    e.preventDefault();
-
-                    const { PDFDocument } = PDFLib;
-
-                    const processFile = async (file) => {
-                      const origFileUrl = URL.createObjectURL(file);
-                      const formPdfBytes = await fetch(origFileUrl).then(res => res.arrayBuffer());
-                      const pdfDoc = await PDFDocument.load(formPdfBytes, { ignoreEncryption: true });
-
-                      const form = pdfDoc.getForm();
-                      form.flatten();
-
-                      const pdfBytes = await pdfDoc.save();
-                      const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
-                      const fileName = (file.name ? file.name.replace('.pdf', '') : 'pdf') + '_flattened.pdf';
-
-                      return { processedData: pdfBlob, fileName };
-                    };
-
-                    await downloadFilesWithCallback(processFile);
-                  });
-                </script>
               </form>
             </div>
           </div>
diff --git a/src/main/resources/templates/misc/ocr-pdf.html b/src/main/resources/templates/misc/ocr-pdf.html
index a5374a22c..8d8cb8a2e 100644
--- a/src/main/resources/templates/misc/ocr-pdf.html
+++ b/src/main/resources/templates/misc/ocr-pdf.html
@@ -34,17 +34,20 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{ocr.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">quick_reference_all</span>
+                <span class="tool-header-text" th:text="#{ocr.header}"></span>
+              </div>
               <form th:if="${#lists.size(languages) > 0}" action="#" th:action="@{api/v1/misc/ocr-pdf}" method="post" enctype="multipart/form-data" class="mb-3">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
                   <hr>
                   <div id="languages">
-                    <div th:each="language, iterStat : ${languages}">
+                    <div class="form-check" th:each="language, iterStat : ${languages}">
                       <input type="checkbox" th:name="languages" th:value="${language}" required th:id="${'language-' + language}" onchange="handleLangSelection()" />
-                      <label class="form-check-label" th:for="${'language-' + language}" th:text="${language}"></label>
+                      <label th:for="${'language-' + language}" th:text="${language}"></label>
                     </div>
                   </div>
                   <hr>
@@ -59,25 +62,25 @@
                 </div>
                 <br>
                 <label for="languages" class="form-label" th:text="#{ocr.selectText.9}"></label>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="sidecar" id="sidecar" />
-                  <label class="form-check-label" for="sidecar" th:text="#{ocr.selectText.2}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="sidecar" id="sidecar" />
+                  <label for="sidecar" th:text="#{ocr.selectText.2}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="deskew" id="deskew" />
-                  <label class="form-check-label" for="deskew" th:text="#{ocr.selectText.3}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="deskew" id="deskew" />
+                  <label for="deskew" th:text="#{ocr.selectText.3}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="clean" id="clean" />
-                  <label class="form-check-label" for="clean" th:text="#{ocr.selectText.4}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="clean" id="clean" />
+                  <label for="clean" th:text="#{ocr.selectText.4}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="clean-final" id="clean-final" />
-                  <label class="form-check-label" for="clean-final" th:text="#{ocr.selectText.5}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="clean-final" id="clean-final" />
+                  <label for="clean-final" th:text="#{ocr.selectText.5}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="removeImagesAfter" id="removeImagesAfter" />
-                  <label class="form-check-label" for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="removeImagesAfter" id="removeImagesAfter" />
+                  <label for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
                 </div>
                 <div class="mb-3">
                   <label th:text="#{ocr.selectText.12}"></label>
diff --git a/src/main/resources/templates/misc/remove-annotations.html b/src/main/resources/templates/misc/remove-annotations.html
index a9973b795..fae40ebd0 100644
--- a/src/main/resources/templates/misc/remove-annotations.html
+++ b/src/main/resources/templates/misc/remove-annotations.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removeAnnotations.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">thread_unread</span>
+                <span class="tool-header-text" th:text="#{removeAnnotations.header}"></span>
+              </div>
               <form id="pdfForm" class="mb-3">
                 <div class="custom-file">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
diff --git a/src/main/resources/templates/misc/remove-blanks.html b/src/main/resources/templates/misc/remove-blanks.html
index 6ab259072..a4601d04f 100644
--- a/src/main/resources/templates/misc/remove-blanks.html
+++ b/src/main/resources/templates/misc/remove-blanks.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removeBlanks.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">scan_delete</span>
+                <span class="tool-header-text" th:text="#{removeBlanks.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/remove-blanks}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
diff --git a/src/main/resources/templates/misc/repair.html b/src/main/resources/templates/misc/repair.html
index 204bce143..2694885b6 100644
--- a/src/main/resources/templates/misc/repair.html
+++ b/src/main/resources/templates/misc/repair.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{repair.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">build</span>
+                <span class="tool-header-text" th:text="#{repair.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/repair}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{repair.submit}"></button>
diff --git a/src/main/resources/templates/misc/show-javascript.html b/src/main/resources/templates/misc/show-javascript.html
index ba60ec00c..392ba8e8d 100644
--- a/src/main/resources/templates/misc/show-javascript.html
+++ b/src/main/resources/templates/misc/show-javascript.html
@@ -20,8 +20,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12">
-              <h2 th:text="#{showJS.header}"></h2>
+            <div class="col-md-12" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">javascript</span>
+                <span class="tool-header-text" th:text="#{showJS.header}"></span>
+              </div>
               <form id="pdfInfoForm" method="post" enctype="multipart/form-data" th:action="@{show-javascript}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false', accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/misc/stamp.html b/src/main/resources/templates/misc/stamp.html
index 89e689b12..a083cce63 100644
--- a/src/main/resources/templates/misc/stamp.html
+++ b/src/main/resources/templates/misc/stamp.html
@@ -22,8 +22,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{AddStampRequest.header}"></h2>
+            <div class="col-md-6"  id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">approval</span>
+                <span class="tool-header-text" th:text="#{AddStampRequest.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/add-stamp}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/multi-page-layout.html b/src/main/resources/templates/multi-page-layout.html
index 0e51b8fa3..b103d1d75 100644
--- a/src/main/resources/templates/multi-page-layout.html
+++ b/src/main/resources/templates/multi-page-layout.html
@@ -11,13 +11,16 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pageLayout.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">dashboard</span>
+                <span class="tool-header-text" th:text="#{pageLayout.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/general/multi-page-layout}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
-                  <select id="pagesPerSheet" name="pagesPerSheet">
+                  <select class="form-control" id="pagesPerSheet" name="pagesPerSheet">
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
@@ -25,9 +28,9 @@
                     <option value="16">16</option>
                   </select>
                 </div>
-                <div class="mb-3">
-                  <input type="checkbox" class="form-check-input" id="addBorder" name="addBorder">
-                  <label class="form-check-label" for="addBorder" th:text="#{pageLayout.addBorder}"></label>
+                <div class="form-check mb-3">
+                  <input type="checkbox" id="addBorder" name="addBorder">
+                  <label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button>
               </form>
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 170ba7f35..409e14db5 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -1,104 +1,108 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{multiTool.title}, header=#{multiTool.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <div id="image-highlighter"></div>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="multi-tool-container">
-          <div class="row justify-content-center">
-            <h2 th:text="#{multiTool.header}"></h2>
-            <div class="col-md-12" id="pages-container-wrapper">
-              <div id="pages-container">
-                <div class="page-container" th:each="pdf, status: ${pdfList}" th:id="'page-container-' + ${status.index}">
-                  <div class="page-number-container">
-                    <span th:text="${status.index + 1}"></span>
-                  </div>
-                  <img th:src="${pdf.imageUrl}" alt="PDF Page">
-                </div>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{multiTool.title}, header=#{multiTool.header})}"></th:block>
+</head>
+
+<body>
+  <div id="image-highlighter"></div>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-12">
+            <div id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">construction</span>
+                <span class="tool-header-text" th:text="#{multiTool.header}"></span>
               </div>
-            </div>
-          </div>
-        </div>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6" style="text-align: center">
-              <div class="global-buttons-container d-flex align-content-center justify-content-center">
-                <div class="form-group">
+              <div class="mt-action-bar d-flex flex-wrap">
+                <div class="mt-filename">
                   <label for="filename-input" th:text="#{multiTool.uploadPrompts}">Filename</label>
-                  <input type="text" class="form-control" id="filename-input" th:placeholder="#{multiTool.uploadPrompts}">
+                  <input type="text" class="form-control" id="filename-input"
+                    th:placeholder="#{multiTool.uploadPrompts}">
+                </div>
+                <div class="mt-action-btn">
+                  <button class="btn btn-primary" onclick="addPdfs()">
+                    <span class="material-symbols-rounded">
+                      add
+                    </span>
+                  </button>
+                  <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
+                    <span class="material-symbols-rounded">
+                      rotate_left
+                    </span>
+                  </button>
+                  <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
+                    <span class="material-symbols-rounded">
+                      rotate_right
+                    </span>
+                  </button>
+                  <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
+                    <span class="material-symbols-rounded">
+                      download
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div class="global-buttons-container">
-                <button class="btn btn-primary" onclick="addPdfs()">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                    <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                  </svg>
-                </button>
-                <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
-                    <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
-                  </svg>
-                </button>
-                <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
-                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
-                  </svg>
-                </button>
-                <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
-                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-                  </svg>
-                </button>
+              <div class="multi-tool-container">
+                <div class="d-flex flex-wrap" id="pages-container-wrapper">
+                  <div id="pages-container">
+                    <div class="page-container" th:each="pdf, status: ${pdfList}"
+                      th:id="'page-container-' + ${status.index}">
+                      <div class="page-number-container">
+                        <span th:text="${status.index + 1}"></span>
+                      </div>
+                      <img th:src="${pdf.imageUrl}" alt="PDF Page">
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div id="drag-container"></div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
+    <div id="drag-container"></div>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
 
-    <script type="module">
-      import PdfContainer from './js/multitool/PdfContainer.js';
-      import DragDropManager from "./js/multitool/DragDropManager.js";
-      import scrollDivHorizontally from "./js/multitool/horizontalScroll.js";
-      import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
-      import PdfActionsManager from './js/multitool/PdfActionsManager.js';
-      import FileDragManager from './js/multitool/fileInput.js';
-      // enables drag and drop
-      const dragDropManager = new DragDropManager('drag-container', 'pages-container');
-      // enables image highlight on click
-      const imageHighlighter = new ImageHighlighter('image-highlighter');
-      // enables the default action buttons on each pdf
-      const pdfActionsManager = new PdfActionsManager('pages-container');
-      const fileDragManager = new FileDragManager();
+  <script type="module">
+    import PdfContainer from './js/multitool/PdfContainer.js';
+    import DragDropManager from "./js/multitool/DragDropManager.js";
+    import scrollDivHorizontally from "./js/multitool/horizontalScroll.js";
+    import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
+    import PdfActionsManager from './js/multitool/PdfActionsManager.js';
+    import FileDragManager from './js/multitool/fileInput.js';
+    // enables drag and drop
+    const dragDropManager = new DragDropManager('drag-container', 'pages-container');
+    // enables image highlight on click
+    const imageHighlighter = new ImageHighlighter('image-highlighter');
+    // enables the default action buttons on each pdf
+    const pdfActionsManager = new PdfActionsManager('pages-container');
+    const fileDragManager = new FileDragManager();
 
-      // Scroll the wrapper horizontally
-      scrollDivHorizontally('pages-container-wrapper');
+    // Scroll the wrapper horizontally
+    scrollDivHorizontally('pages-container-wrapper');
 
-      // Automatically exposes rotateAll, addPdfs and exportPdf to the window for the global buttons.
-      const pdfContainer = new PdfContainer(
-        'pages-container',
-        'pages-container-wrapper',
-        [
-          dragDropManager,
-          imageHighlighter,
-          pdfActionsManager,
-          fileDragManager
-        ]
-      )
+    // Automatically exposes rotateAll, addPdfs and exportPdf to the window for the global buttons.
+    const pdfContainer = new PdfContainer(
+      'pages-container',
+      'pages-container-wrapper',
+      [
+        dragDropManager,
+        imageHighlighter,
+        pdfActionsManager,
+        fileDragManager
+      ]
+    )
+
+    fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
+  </script>
+</body>
 
-      fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
-    </script>
-  </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/overlay-pdf.html b/src/main/resources/templates/overlay-pdf.html
index 10cd43d9d..75f48a419 100644
--- a/src/main/resources/templates/overlay-pdf.html
+++ b/src/main/resources/templates/overlay-pdf.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{overlay-pdfs.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">layers</span>
+                <span class="tool-header-text" th:text="#{overlay-pdfs.header}"></span>
+              </div>
               <form id="overlayForm" method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/overlay-pdfs}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div th:replace="~{fragments/common :: fileSelector(name='overlayFiles', multiple=true, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index 4466fa23d..a5bedc5c8 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfOrganiser.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">format_list_bulleted</span>
+                <span class="tool-header-text" th:text="#{pdfOrganiser.header}"></span>
+              </div>
 
               <form th:action="@{api/v1/general/rearrange-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/pdf-to-single-page.html b/src/main/resources/templates/pdf-to-single-page.html
index 0dc8761c6..3b8f2e167 100644
--- a/src/main/resources/templates/pdf-to-single-page.html
+++ b/src/main/resources/templates/pdf-to-single-page.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pdfToSinglePage.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">looks_one</span>
+                <span class="tool-header-text" th:text="#{pdfToSinglePage.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/general/pdf-to-single-page}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToSinglePage.submit}"></button>
diff --git a/src/main/resources/templates/pipeline.html b/src/main/resources/templates/pipeline.html
index b59d68c0d..ed1c1e31e 100644
--- a/src/main/resources/templates/pipeline.html
+++ b/src/main/resources/templates/pipeline.html
@@ -1,10 +1,21 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html
+  th:lang="${#locale.language}"
+  th:dir="#{language.direction}"
+  th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org"
+>
   <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"></th:block>
-    <link rel="stylesheet" href="css/pipeline.css" th:if="${currentPage == 'pipeline'}">
+    <th:block
+      th:insert="~{fragments/common :: head(title=#{pipeline.title}, header=#{pipeline.header})}"
+    ></th:block>
+    <link
+      rel="stylesheet"
+      href="css/pipeline.css"
+      th:if="${currentPage == 'pipeline'}"
+    />
     <script th:inline="javascript">
-      const saveSettings =  /*[[#{pipelineOptions.saveSettings}]]*/ '';
+      const saveSettings = /*[[#{pipelineOptions.saveSettings}]]*/ "";
     </script>
   </head>
 
@@ -12,96 +23,174 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
+        <br /><br />
         <div class="container">
           <div class="row justify-content-center">
+            <div class="col-md-6" id="bg-card">
+                <div class="tool-header">
+                  <span class="material-symbols-rounded tool-header-icon advance">family_history</span>
+                  <span class="tool-header-text" th:text="#{pipeline.header}"></span>
+                </div>
+                <div class="text-end text-top">
+                  <button
+                    id="uploadPipelineBtn"
+                    class="btn btn-primary"
+                    th:text="#{pipeline.uploadButton}"
+                  ></button>
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#pipelineSettingsModal"
+                    th:text="#{pipeline.configureButton}"
+                  ></button>
+                </div>
 
-            <div style="text-align: center;">
-              <h1 th:text="#{pipeline.header}"></h1>
-              <img src="images/pipeline.svg" alt="icon" style="filter: invert(33%) sepia(100%) saturate(5000%) hue-rotate(183deg) brightness(90%) contrast(100%); width: 100px; height: 100px;">
-            </div>
-          
-            <div class="bordered-box">
-              <div class="text-end text-top">
-                <button id="uploadPipelineBtn" class="btn btn-primary" th:text="#{pipeline.uploadButton}"></button>
-                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pipelineSettingsModal" th:text="#{pipeline.configureButton}"></button>
+                <div class="center-element">
+                  <div class="element-margin">
+                    <select id="pipelineSelect" class="custom-select form-control">
+                      <option
+                        value='{"name":"Custom","pipeline":[],"_examples":{"outputDir":"{outputFolder}/{folderName}","outputFileName":"{filename}-{pipelineName}-{date}-{time}"},"outputDir":"{outputFolder}","outputFileName":"{filename}"}'
+                        th:text="#{pipeline.defaultOption}"
+                      ></option>
+                      <th:block th:each="config : ${pipelineConfigsWithNames}">
+                        <option
+                          th:value="${config.json}"
+                          th:text="${config.name}"
+                        ></option>
+                      </th:block>
+                    </select>
+                  </div>
+                  <div class="element-margin">
+                    <div
+                      th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true)}"
+                    ></div>
+                  </div>
+                  <div class="element-margin">
+                    <button
+                      class="btn btn-primary"
+                      id="submitConfigBtn"
+                      th:text="#{pipeline.submitButton}"
+                    ></button>
+                  </div>
+                  <br/>
+                  <a
+                    href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/PipelineFeature.md"
+                    target="_blank"
+                    th:text="#{pipeline.help}"
+                    >Pipeline Help</a
+                  >
+                  <br/>
+                  <a
+                    href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/FolderScanning.md"
+                    target="_blank"
+                    th:text="#{pipeline.scanHelp}"
+                    >Folder Scanning Help</a
+                  >
+                </div>
               </div>
 
-              <div class="center-element">
-                <div class="element-margin">
-                  <select id="pipelineSelect" class="custom-select">
-                    <option value="{&quot;name&quot;:&quot;Custom&quot;,&quot;pipeline&quot;:[],&quot;_examples&quot;:{&quot;outputDir&quot;:&quot;{outputFolder}/{folderName}&quot;,&quot;outputFileName&quot;:&quot;{filename}-{pipelineName}-{date}-{time}&quot;},&quot;outputDir&quot;:&quot;{outputFolder}&quot;,&quot;outputFileName&quot;:&quot;{filename}&quot;}" th:text="#{pipeline.defaultOption}"></option>
-                    <th:block th:each="config : ${pipelineConfigsWithNames}">
-                      <option th:value="${config.json}" th:text="${config.name}"></option>
-                    </th:block>
-                  </select>
-                </div>
-                <div class="element-margin">
-                  <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true)}"></div>
-                </div>
-                <div class="element-margin">
-                  <button class="btn btn-primary" id="submitConfigBtn" th:text="#{pipeline.submitButton}"></button>
-                </div>
-                <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/PipelineFeature.md" target="_blank" th:text="#{pipeline.help}">Pipeline Help</a>
-                <br>
-                <a href="https://github.com/Stirling-Tools/Stirling-PDF/blob/main/FolderScanning.md" target="_blank" th:text="#{pipeline.scanHelp}">Folder Scanning Help</a>
-              </div>
-            </div>
-
-            <!-- The Modal -->
-            <div class="modal" id="pipelineSettingsModal">
-              <div class="modal-dialog">
-                <div class="modal-content dark-card">
-
-                  <!-- Modal Header -->
-                  <div class="modal-header">
-                    <h2 class="modal-title" th:text="#{pipelineOptions.header}"></h2>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                  </div>
-
-                  <!-- Modal body -->
-                  <div class="modal-body">
-                    <div class="mb-3">
-                      <label for="pipelineName" class="form-label" th:text="#{pipelineOptions.pipelineNameLabel}"></label>
-                      <input type="text" id="pipelineName" class="form-control" th:placeholder="#{pipelineOptions.pipelineNamePrompt}">
+              <!-- The Modal -->
+              <div class="modal" id="pipelineSettingsModal">
+                <div class="modal-dialog">
+                  <div class="modal-content dark-card">
+                    <!-- Modal Header -->
+                    <div class="modal-header">
+                      <h2
+                        class="modal-title"
+                        th:text="#{pipelineOptions.header}"
+                      ></h2>
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                        <span class="material-symbols-rounded">
+                          close
+                        </span>
+                      </button>
                     </div>
-                    <div class="mb-3">
-                      <label for="operationsDropdown" th:text="#{pipelineOptions.selectOperation}"></label>
-                      <select id="operationsDropdown" class="form-select">
-                        <!-- Options will be dynamically populated here -->
-                      </select>
-                    </div>
-                    <div class="mb-3">
-                      <button id="addOperationBtn" class="btn btn-primary" th:text="#{pipelineOptions.addOperationButton}"></button>
-                    </div>
-                    <h3 id="pipelineHeader" style="display: none;" th:text="#{pipelineOptions.pipelineHeader}"></h3>
 
-                    <ol id="pipelineList" class="list-group">
-                      <!-- Pipeline operations will be dynamically populated here -->
-                    </ol>
-                    <div id="pipelineSettingsContent">
-                      <!-- pipelineSettings will be dynamically populated here -->
+                    <!-- Modal body -->
+                    <div class="modal-body">
+                      <div class="mb-3">
+                        <label
+                          for="pipelineName"
+                          class="form-label"
+                          th:text="#{pipelineOptions.pipelineNameLabel}"
+                        ></label>
+                        <input
+                          type="text"
+                          id="pipelineName"
+                          class="form-control"
+                          th:placeholder="#{pipelineOptions.pipelineNamePrompt}"
+                        />
+                      </div>
+                      <div class="mb-3">
+                        <label
+                          for="operationsDropdown"
+                          th:text="#{pipelineOptions.selectOperation}"
+                        ></label>
+                        <select id="operationsDropdown" class="form-select">
+                          <!-- Options will be dynamically populated here -->
+                        </select>
+                      </div>
+                      <div class="mb-3">
+                        <button
+                          id="addOperationBtn"
+                          class="btn btn-primary"
+                          th:text="#{pipelineOptions.addOperationButton}"
+                        ></button>
+                      </div>
+                      <h3
+                        id="pipelineHeader"
+                        style="display: none"
+                        th:text="#{pipelineOptions.pipelineHeader}"
+                      ></h3>
+
+                      <ol id="pipelineList" class="list-group">
+                        <!-- Pipeline operations will be dynamically populated here -->
+                      </ol>
+                      <div id="pipelineSettingsContent">
+                        <!-- pipelineSettings will be dynamically populated here -->
+                      </div>
                     </div>
-                  </div>
 
-                  <!-- Modal footer -->
-                  <div class="modal-footer">
-                    <button id="saveBrowserPipelineBtn" class="btn btn-success" th:text="#{saveToBrowser}"></button>
-                    <button id="savePipelineBtn" class="btn btn-success" th:text="#{pipelineOptions.saveButton}"></button>
-                    <button id="validateButton" class="btn btn-success" th:text="#{pipelineOptions.validateButton}"></button>
+                    <!-- Modal footer -->
+                    <div class="modal-footer">
+                      <button
+                        id="saveBrowserPipelineBtn"
+                        class="btn btn-success"
+                        th:text="#{saveToBrowser}"
+                      ></button>
+                      <button
+                        id="savePipelineBtn"
+                        class="btn btn-success"
+                        th:text="#{pipelineOptions.saveButton}"
+                      ></button>
+                      <button
+                        id="validateButton"
+                        class="btn btn-success"
+                        th:text="#{pipelineOptions.validateButton}"
+                      ></button>
 
-                    <div class="btn-group">
-                      <input type="file" id="uploadPipelineInput" accept=".json" style="display: none;">
+                      <div class="btn-group">
+                        <input
+                          type="file"
+                          id="uploadPipelineInput"
+                          accept=".json"
+                          style="display: none"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
+                <script src="js/pipeline.js"></script>\
             </div>
-            <script src="js/pipeline.js"></script>
           </div>
         </div>
       </div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/remove-pages.html b/src/main/resources/templates/remove-pages.html
index cd9e57d53..7905c7a34 100644
--- a/src/main/resources/templates/remove-pages.html
+++ b/src/main/resources/templates/remove-pages.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{pageRemover.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">delete</span>
+                <span class="tool-header-text" th:text="#{pageRemover.header}"></span>
+              </div>
 
               <form th:action="@{api/v1/general/remove-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index 5446ff923..0c58191be 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{rotate.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">rotate_right</span>
+                <span class="tool-header-text" th:text="#{rotate.header}"></span>
+              </div>
 
               <form action="#" th:action="@{api/v1/general/rotate-pdf}" th:object="${rotateForm}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
@@ -55,7 +58,11 @@
         console.log("loading pdf");
 
         document.querySelector("#editSection").style.display = "";
-
+        
+        const existingPreview = document.getElementById("pdf-preview");
+        if (existingPreview) {
+          existingPreview.remove();
+        }
         var url = URL.createObjectURL(fileInput.files[0])
         pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
         const pdf = await pdfjsLib.getDocument(url).promise;
diff --git a/src/main/resources/templates/scale-pages.html b/src/main/resources/templates/scale-pages.html
index ede080251..ff52c1573 100644
--- a/src/main/resources/templates/scale-pages.html
+++ b/src/main/resources/templates/scale-pages.html
@@ -11,13 +11,16 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{scalePages.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">fullscreen</span>
+                <span class="tool-header-text" th:text="#{scalePages.header}"></span>
+              </div>
               <form id="scalePagesFrom" th:action="@{api/v1/general/scale-pages}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">
                   <label for="pageSize" th:text="#{scalePages.pageSize}"></label>
-                  <select id="pageSize" name="pageSize">
+                  <select class="form-control" id="pageSize" name="pageSize">
                     <option value="A0">A0</option>
                     <option value="A1">A1</option>
                     <option value="A2">A2</option>
@@ -31,7 +34,7 @@
                 </div>
                 <div class="mb-3">
                   <label for="scaleFactor" th:text="#{scalePages.scaleFactor}"></label>
-                  <input type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
+                  <input class="form-control" type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{scalePages.submit}"></button>
               </form>
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index 015cee5cd..90738b141 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addPassword.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">lock</span>
+                <span class="tool-header-text" th:text="#{addPassword.header}"></span>
+              </div>
               <form action="api/v1/security/add-password" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{addPassword.selectText.1}"></label>
@@ -36,38 +39,38 @@
                   <small class="form-text text-muted" th:text="#{addPassword.selectText.4}"></small>
                 </div>
                 <div class="mb-3">
-                  <label th:text="#{addPassword.selectText.5}"></label>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
-                    <label class="form-check-label" for="canAssembleDocument" th:text="#{addPassword.selectText.6}"></label>
+                  <label class="mb-2" th:text="#{addPassword.selectText.5}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
+                    <label for="canAssembleDocument" th:text="#{addPassword.selectText.6}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractContent" name="canExtractContent">
-                    <label class="form-check-label" for="canExtractContent" th:text="#{addPassword.selectText.7}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractContent" name="canExtractContent">
+                    <label for="canExtractContent" th:text="#{addPassword.selectText.7}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
-                    <label class="form-check-label" for="canExtractForAccessibility" th:text="#{addPassword.selectText.8}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
+                    <label for="canExtractForAccessibility" th:text="#{addPassword.selectText.8}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canFillInForm" name="canFillInForm">
-                    <label class="form-check-label" for="canFillInForm" th:text="#{addPassword.selectText.9}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canFillInForm" name="canFillInForm">
+                    <label for="canFillInForm" th:text="#{addPassword.selectText.9}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModify" name="canModify">
-                    <label class="form-check-label" for="canModify" th:text="#{addPassword.selectText.10}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModify" name="canModify">
+                    <label for="canModify" th:text="#{addPassword.selectText.10}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
-                    <label class="form-check-label" for="canModifyAnnotations" th:text="#{addPassword.selectText.11}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
+                    <label for="canModifyAnnotations" th:text="#{addPassword.selectText.11}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrint" name="canPrint">
-                    <label class="form-check-label" for="canPrint" th:text="#{addPassword.selectText.12}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrint" name="canPrint">
+                    <label for="canPrint" th:text="#{addPassword.selectText.12}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
-                    <label class="form-check-label" for="canPrintFaithful" th:text="#{addPassword.selectText.13}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
+                    <label for="canPrintFaithful" th:text="#{addPassword.selectText.13}"></label>
                   </div>
                 </div>
                 <br>
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index 2840946ea..e8ea6873d 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{watermark.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">water_drop</span>
+                <span class="tool-header-text" th:text="#{watermark.header}"></span>
+              </div>
 
               <form method="post" enctype="multipart/form-data" action="api/v1/security/add-watermark">
                 <div class="mb-3">
diff --git a/src/main/resources/templates/security/auto-redact.html b/src/main/resources/templates/security/auto-redact.html
index d13fcb889..50a7d9559 100644
--- a/src/main/resources/templates/security/auto-redact.html
+++ b/src/main/resources/templates/security/auto-redact.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoRedact.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">ink_eraser</span>
+                <span class="tool-header-text" th:text="#{autoRedact.header}"></span>
+              </div>
               <form action="api/v1/security/auto-redact" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <input type="file" class="form-control" id="fileInput" name="fileInput" required accept="application/pdf">
@@ -52,13 +55,13 @@
                   }
                 </script>
                 <div class="mb-3 form-check">
-                  <input type="checkbox" class="form-check-input" id="useRegex" name="useRegex">
-                  <label class="form-check-label" for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
+                  <input type="checkbox" id="useRegex" name="useRegex">
+                  <label for="useRegex" th:text="#{autoRedact.useRegexLabel}"></label>
                 </div>
 
                 <div class="mb-3 form-check">
-                  <input type="checkbox" class="form-check-input" id="wholeWordSearch" name="wholeWordSearch">
-                  <label class="form-check-label" for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
+                  <input type="checkbox" id="wholeWordSearch" name="wholeWordSearch">
+                  <label for="wholeWordSearch" th:text="#{autoRedact.wholeWordSearchLabel}"></label>
                 </div>
 
                 <div class="mb-3">
@@ -67,8 +70,8 @@
                 </div>
 
                 <div class="mb-3 form-check">
-                  <input type="checkbox" class="form-check-input" id="convertPDFToImage" name="convertPDFToImage" checked>
-                  <label class="form-check-label" for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
+                  <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage" checked>
+                  <label for="convertPDFToImage" th:text="#{autoRedact.convertPDFToImageLabel}"></label>
                 </div>
 
                 <button type="submit" class="btn btn-primary" th:text="#{autoRedact.submitButton}"></button>
diff --git a/src/main/resources/templates/security/cert-sign.html b/src/main/resources/templates/security/cert-sign.html
index 0f369c27f..09129af9b 100644
--- a/src/main/resources/templates/security/cert-sign.html
+++ b/src/main/resources/templates/security/cert-sign.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{certSign.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">workspace_premium</span>
+                <span class="tool-header-text" th:text="#{certSign.header}"></span>
+              </div>
               <form action="api/v1/security/cert-sign" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{certSign.selectPDF}"></label>
@@ -53,7 +56,7 @@
                   <label th:text="#{certSign.password}" for="password"></label>
                   <input type="password" class="form-control" id="password" name="password">
                 </div>
-                <div class="mb-3">
+                <div class="form-check mb-3">
                   <input type="checkbox" id="showSignature" name="showSignature">
                   <label th:text="#{certSign.showSig}" for="showSignature"></label>
                 </div>
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index 58a5350c3..ca527006a 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{permissions.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">encrypted</span>
+                <span class="tool-header-text" th:text="#{permissions.header}"></span>
+              </div>
               <p th:text="#{permissions.warning}"></p>
               <form action="api/v1/security/add-password" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
@@ -20,38 +23,38 @@
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 </div>
                 <div class="mb-3">
-                  <label th:text="#{permissions.selectText.2}"></label>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
-                    <label class="form-check-label" for="canAssembleDocument" th:text="#{permissions.selectText.3}"></label>
+                  <label class="mb-2" th:text="#{permissions.selectText.2}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
+                    <label for="canAssembleDocument" th:text="#{permissions.selectText.3}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractContent" name="canExtractContent">
-                    <label class="form-check-label" for="canExtractContent" th:text="#{permissions.selectText.4}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractContent" name="canExtractContent">
+                    <label for="canExtractContent" th:text="#{permissions.selectText.4}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
-                    <label class="form-check-label" for="canExtractForAccessibility" th:text="#{permissions.selectText.5}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canExtractForAccessibility" name="canExtractForAccessibility">
+                    <label for="canExtractForAccessibility" th:text="#{permissions.selectText.5}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canFillInForm" name="canFillInForm">
-                    <label class="form-check-label" for="canFillInForm" th:text="#{permissions.selectText.6}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canFillInForm" name="canFillInForm">
+                    <label for="canFillInForm" th:text="#{permissions.selectText.6}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModify" name="canModify">
-                    <label class="form-check-label" for="canModify" th:text="#{permissions.selectText.7}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModify" name="canModify">
+                    <label for="canModify" th:text="#{permissions.selectText.7}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
-                    <label class="form-check-label" for="canModifyAnnotations" th:text="#{permissions.selectText.8}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canModifyAnnotations" name="canModifyAnnotations">
+                    <label for="canModifyAnnotations" th:text="#{permissions.selectText.8}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrint" name="canPrint">
-                    <label class="form-check-label" for="canPrint" th:text="#{permissions.selectText.9}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrint" name="canPrint">
+                    <label for="canPrint" th:text="#{permissions.selectText.9}"></label>
                   </div>
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
-                    <label class="form-check-label" for="canPrintFaithful" th:text="#{permissions.selectText.10}"></label>
+                  <div class="form-check ms-3">
+                    <input type="checkbox" id="canPrintFaithful" name="canPrintFaithful">
+                    <label for="canPrintFaithful" th:text="#{permissions.selectText.10}"></label>
                   </div>
                 </div>
                 <br>
diff --git a/src/main/resources/templates/security/get-info-on-pdf.html b/src/main/resources/templates/security/get-info-on-pdf.html
index ff7106ed4..edab3fe57 100644
--- a/src/main/resources/templates/security/get-info-on-pdf.html
+++ b/src/main/resources/templates/security/get-info-on-pdf.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{getPdfInfo.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">info</span>
+                <span class="tool-header-text" th:text="#{getPdfInfo.header}"></span>
+              </div>
               <form id="pdfInfoForm" method="post" enctype="multipart/form-data" th:action="@{api/v1/security/get-info-on-pdf}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false', accept='application/pdf')}"></div>
                 <br>
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index b77f06906..f27a7e6b5 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removePassword.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">lock_open_right</span>
+                <span class="tool-header-text" th:text="#{removePassword.header}"></span>
+              </div>
               <form action="api/v1/security/remove-password" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <label th:text="#{removePassword.selectText.1}"></label>
diff --git a/src/main/resources/templates/security/remove-watermark.html b/src/main/resources/templates/security/remove-watermark.html
index 01d89be5d..eefd6240c 100644
--- a/src/main/resources/templates/security/remove-watermark.html
+++ b/src/main/resources/templates/security/remove-watermark.html
@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{remove-watermark.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">water_drop</span>
+                <span class="tool-header-text" th:text="#{remove-watermark.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" action="api/v1/security/remove-watermark">
                 <div class="mb-3">
                   <label th:text="#{remove-watermark.selectText.1}"></label>
diff --git a/src/main/resources/templates/security/sanitize-pdf.html b/src/main/resources/templates/security/sanitize-pdf.html
index da1dc3c4c..4d3cd2de0 100644
--- a/src/main/resources/templates/security/sanitize-pdf.html
+++ b/src/main/resources/templates/security/sanitize-pdf.html
@@ -11,31 +11,34 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{sanitizePDF.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">sanitizer</span>
+                <span class="tool-header-text" th:text="#{sanitizePDF.header}"></span>
+              </div>
               <form action="api/v1/security/sanitize-pdf" method="post" enctype="multipart/form-data">
                 <div class="mb-3">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeJavaScript" name="removeJavaScript" checked>
-                  <label class="form-check-label" for="removeJavaScript" th:text="#{sanitizePDF.selectText.1}"></label>
+                  <input type="checkbox" id="removeJavaScript" name="removeJavaScript" checked>
+                  <label for="removeJavaScript" th:text="#{sanitizePDF.selectText.1}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeEmbeddedFiles" name="removeEmbeddedFiles" checked>
-                  <label class="form-check-label" for="removeEmbeddedFiles" th:text="#{sanitizePDF.selectText.2}"></label>
+                  <input type="checkbox" id="removeEmbeddedFiles" name="removeEmbeddedFiles" checked>
+                  <label for="removeEmbeddedFiles" th:text="#{sanitizePDF.selectText.2}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeMetadata" name="removeMetadata" checked>
-                  <label class="form-check-label" for="removeMetadata" th:text="#{sanitizePDF.selectText.3}"></label>
+                  <input type="checkbox" id="removeMetadata" name="removeMetadata" checked>
+                  <label for="removeMetadata" th:text="#{sanitizePDF.selectText.3}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeLinks" name="removeLinks">
-                  <label class="form-check-label" for="removeLinks" th:text="#{sanitizePDF.selectText.4}"></label>
+                  <input type="checkbox" id="removeLinks" name="removeLinks">
+                  <label for="removeLinks" th:text="#{sanitizePDF.selectText.4}"></label>
                 </div>
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" id="removeFonts" name="removeFonts">
-                  <label class="form-check-label" for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
+                  <input type="checkbox" id="removeFonts" name="removeFonts">
+                  <label for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
                 </div>
                 <br>
                 <div class="mb-3 text-center">
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 259d5e97a..8a8586aae 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -29,8 +29,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{sign.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon sign">signature</span>
+                <span class="tool-header-text" th:text="#{sign.header}"></span>
+              </div>
 
               <!-- pdf selector -->
               <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>
diff --git a/src/main/resources/templates/split-by-size-or-count.html b/src/main/resources/templates/split-by-size-or-count.html
index a6bf13e03..286d98086 100644
--- a/src/main/resources/templates/split-by-size-or-count.html
+++ b/src/main/resources/templates/split-by-size-or-count.html
@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{split-by-size-or-count.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">vertical_split</span>
+                <span class="tool-header-text" th:text="#{split-by-size-or-count.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/split-by-size-or-count}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <label for="splitType" th:text="#{split-by-size-or-count.type.label}">Split Type</label>
diff --git a/src/main/resources/templates/split-pdf-by-sections.html b/src/main/resources/templates/split-pdf-by-sections.html
index 9fb0eae47..73fdc74c0 100644
--- a/src/main/resources/templates/split-pdf-by-sections.html
+++ b/src/main/resources/templates/split-pdf-by-sections.html
@@ -13,8 +13,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{split-by-sections.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">grid_on</span>
+                <span class="tool-header-text" th:text="#{split-by-sections.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{/api/v1/general/split-pdf-by-sections}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <label for="horizontalDivisions" th:text="#{split-by-sections.horizontal.label}">Horizontal Divisions</label>
@@ -23,8 +26,10 @@
                 <label for="verticalDivisions" th:text="#{split-by-sections.vertical.label}">Vertical Divisions</label>
                 <input type="number" id="verticalDivisions" name="verticalDivisions" class="form-control" min="0" max="300" required value="1" th:placeholder="#{split-by-sections.vertical.placeholder}">
                 <br>
-                <label for="merge" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
-                <input type="checkbox" id="merge" name="merge">
+                <div class="mb-3 form-check">
+                  <input type="checkbox" id="merge" name="merge">
+                  <label for="merge" th:text="#{split-by-sections.merge}">merge PDFs into one</label>
+                </div>
                 <br>
                 <div id="pdfVisualAid" class="pdf-visual-aid"></div>
                 <script>
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index 7ed934dd3..9d402c65e 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -1,42 +1,59 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{split.title}, header=#{split.header})}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h1 th:text="#{split.header}"></h1>
-              <p th:text="#{split.desc.1}"></p>
-              <p th:text="#{split.desc.2}"></p>
-              <p th:text="#{split.desc.3}"></p>
-              <p th:text="#{split.desc.4}"></p>
-              <p th:text="#{split.desc.5}"></p>
-              <p th:text="#{split.desc.6}"></p>
-              <p th:text="#{split.desc.7}"></p>
-              <p th:text="#{split.desc.8}"></p>
-
-              <form th:action="@{api/v1/general/split-pages}" method="post" enctype="multipart/form-data">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-
-                <div class="mb-3">
-                  <label for="pageNumbers" th:text="#{split.splitPages}"></label>
-                  <input type="text" class="form-control" id="pageNumbers" name="pageNumbers" placeholder="1,3,5-10" required>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{split.submit}"></button>
-              </form>
+<body>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon organize">cut</span>
+              <span class="tool-header-text" th:text="#{split.header}"></span>
             </div>
+            <form th:action="@{api/v1/general/split-pages}" method="post" enctype="multipart/form-data">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+
+              <div class="mb-3">
+                <label for="pageNumbers" th:text="#{split.splitPages}"></label>
+                <input type="text" class="form-control" id="pageNumbers" name="pageNumbers" placeholder="1,3,5-10"
+                  required>
+              </div>
+
+              <p>
+                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
+                  aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
+              </p>
+              <div class="collapse" id="info">
+                <p th:text="#{split.desc.1}"></p>
+                <p th:text="#{split.desc.2}"></p>
+                <p th:text="#{split.desc.3}"></p>
+                <p th:text="#{split.desc.4}"></p>
+                <p th:text="#{split.desc.5}"></p>
+                <p th:text="#{split.desc.6}"></p>
+                <p th:text="#{split.desc.7}"></p>
+                <p th:text="#{split.desc.8}"></p>
+              </div>
+
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{split.submit}"></button>
+            </form>
+
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/view-pdf.html b/src/main/resources/templates/view-pdf.html
index 5d08d5978..e14163bed 100644
--- a/src/main/resources/templates/view-pdf.html
+++ b/src/main/resources/templates/view-pdf.html
@@ -185,11 +185,6 @@ See https://github.com/adobe-type-tools/cmap-resources
         <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
             <div id="secondaryToolbarButtonContainer">
 
-                <a id="secondaryBackToHome" class="secondaryToolbarButton visibleLargeView" title="Back to Main Page"
-                   tabindex="50"
-                   data-l10n-id="back_to_home" th:href="@{/}">
-                    <span data-l10n-id="back_to_home_label">Back to Main Page</span>
-                </a>
                 <button id="secondaryOpenFile" class="secondaryToolbarButton visibleLargeView" title="Open File"
                         tabindex="51"
                         data-l10n-id="open_file">