diff --git a/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java b/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java
index ddc99a82b..402c17286 100644
--- a/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java
+++ b/src/main/java/stirling/software/SPDF/controller/web/HomeWebController.java
@@ -74,6 +74,12 @@ public class HomeWebController {
         return "redirect:/";
     }
 
+    @GetMapping("/home-legacy")
+    public String homeLegacy(Model model) {
+        model.addAttribute("currentPage", "home-legacy");
+        return "home-legacy";
+    }
+
     @GetMapping(value = "/robots.txt", produces = MediaType.TEXT_PLAIN_VALUE)
     @ResponseBody
     @Hidden
diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties
index 4d56530ef..1e3076db9 100644
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@@ -138,6 +138,7 @@ analytics.settings=You can change the settings for analytics in the config/setti
 #  NAVBAR   #
 #############
 navbar.favorite=Favorites
+navbar.recent=New and recently updated
 navbar.darkmode=Dark Mode
 navbar.language=Languages
 navbar.settings=Settings
@@ -265,6 +266,14 @@ home.viewPdf.title=View PDF
 home.viewPdf.desc=View, annotate, add text or images
 viewPdf.tags=view,read,annotate,text,image
 
+home.setFavorites=Set Favourites
+home.hideFavorites=Hide Favourites
+home.showFavorites=Show Favourites
+home.legacyHomepage=Old homepage
+home.newHomePage=Try our new homepage!
+home.alphabetical=Alphabetical
+home.globalPopularity=Global Popularity
+
 home.multiTool.title=PDF Multi Tool
 home.multiTool.desc=Merge, Rotate, Rearrange, Split, and Remove pages
 multiTool.tags=Multi Tool,Multi operation,UI,click drag,front end,client side,interactive,intractable,move,delete,migrate,divide
@@ -1007,8 +1016,8 @@ multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
 multiTool.dragDropMessage=Page(s) Selected
-multiTool.undo=Undo
-multiTool.redo=Redo
+multiTool.undo=Undo (CTRL + Z)
+multiTool.redo=Redo (CTRL + Y)
 
 #decrypt
 decrypt.passwordPrompt=This file is password-protected. Please enter the password:
diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css
index 4b9d04013..b49bfb7ee 100644
--- a/src/main/resources/static/css/general.css
+++ b/src/main/resources/static/css/general.css
@@ -12,10 +12,14 @@
   bottom: 0;
   width: 100%;
 }
+
 .navbar {
-  height: auto; /* Adjusts height automatically based on content */
-  white-space: nowrap; /* Prevents wrapping of navbar contents */
+  height: auto;
+  /* Adjusts height automatically based on content */
+  white-space: nowrap;
+  /* Prevents wrapping of navbar contents */
 }
+
 /* TODO enable later
 .navbar .container {
 
@@ -28,10 +32,12 @@
 html[dir="ltr"] * {
   direction: ltr;
 }
+
 html[dir="rtl"] * {
   direction: rtl;
   text-align: right;
 }
+
 .ignore-rtl {
   direction: ltr !important;
   text-align: left !important;
@@ -41,6 +47,7 @@ html[dir="rtl"] * {
   position: absolute;
   top: 0;
 }
+
 .align-center-right {
   position: absolute;
   right: 0;
@@ -58,7 +65,7 @@ html[dir="rtl"] * {
   bottom: 0;
 }
 
-.btn-group > label:first-of-type {
+.btn-group>label:first-of-type {
   border-top-left-radius: 0.25rem !important;
   border-bottom-left-radius: 0.25rem !important;
 }
@@ -67,6 +74,7 @@ html[dir="rtl"] input.form-check-input {
   position: relative;
   margin-left: 0px;
 }
+
 html[dir="rtl"] label.form-check-label {
   display: inline;
 }
@@ -75,70 +83,58 @@ html[dir="rtl"] label.form-check-label {
   width: 100%;
   display: flex;
 }
+
 .margin-center {
   margin: 0 auto;
 }
+
 #pdf-canvas {
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
   width: 100%;
 }
+
 .fixed-shadow-canvas {
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
   width: 100%;
 }
+
 .shadow-canvas {
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
 }
+
 .hidden {
   display: none;
 }
 
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
-    transition: background-color 600000s 0s, color 600000s 0s;
+  transition: background-color 600000s 0s, color 600000s 0s;
 }
+
 input[data-autocompleted] {
-    background-color: transparent !important;
+  background-color: transparent !important;
 }
+
 .btn-tooltip {
-  position: absolute;
+  position: absolute !important;
   display: none;
-  bottom: 3.2rem;
-  white-space: nowrap;
-  flex-wrap: nowrap;
-  width: fit-content;
   padding: 7px;
   background-color: rgba(0, 29, 41, 0.9);
   border-radius: 3px;
   font-size: 12px;
   color: whitesmoke;
   animation: fadeup 0.15s linear;
+  z-index: 10000;
 }
+
 @keyframes fadeup {
   0% {
     transform: translateY(10px);
     opacity: 0;
   }
+
   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }
-.btn:hover .btn-tooltip {
-  display: block;
-}
-.btn-primary:hover .btn-tooltip {
-    display: block;
-}
-.btn-success:hover .btn-tooltip {
-    display: block;
-}
-.btn-secondary:hover .btn-tooltip {
-    display: block;
-}
-.btn-toolbarButton:hover .btn-tooltip {
-    display: block;
-}
-.toolbarButton:hover .btn-tooltip {
-  display: block;
-}
diff --git a/src/main/resources/static/css/home-legacy.css b/src/main/resources/static/css/home-legacy.css
new file mode 100644
index 000000000..b25fafc17
--- /dev/null
+++ b/src/main/resources/static/css/home-legacy.css
@@ -0,0 +1,229 @@
+#searchBar {
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface-container-low);
+    width: 100%;
+    font-size: 16px;
+    margin-bottom: 2rem;
+    padding: 0.75rem 3.5rem;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 3rem;
+    outline-color: var(--md-sys-color-outline-variant);
+  }
+
+  #filtersContainer {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .filter-button {
+    color: var(--md-sys-color-secondary);
+    user-select: none;
+    cursor: pointer;
+    transition: transform 0.3s;
+    transform-origin: center center;
+  }
+
+  .filter-button:hover {
+    transform: scale(1.08);
+  }
+
+  .search-icon {
+    position: absolute;
+    margin: 0.75rem 1rem;
+    border: 0.1rem solid transparent;
+  }
+
+  .features-container {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .feature-group-legacy {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .feature-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--md-sys-color-on-surface);
+    margin-bottom: 15px;
+    user-select: none;
+    cursor: pointer;
+    gap: 10px;
+  }
+
+  .feature-group-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
+    gap: 30px 30px;
+    overflow: hidden;
+    margin: -20px;
+    padding: 20px;
+    box-sizing:content-box;
+  }
+
+  .feature-group-container.animated-group {
+    transition: 0.5s all;
+  }
+
+  .feature-group-legacy.collapsed>.feature-group-container {
+    max-height: 0 !important;
+    margin: 0;
+    padding: 0;
+  }
+
+  .header-expand-button {
+    transition: 0.5s all;
+    transform: rotate(90deg);
+  }
+
+  .header-expand-button.collapsed {
+    transform: rotate(0deg);
+  }
+
+  .feature-card {
+    border: 1px solid var(--md-sys-color-surface-5);
+    border-radius: 1.75rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: var(--md-sys-color-surface-5);
+    transition:
+      transform 0.3s,
+      border 0.3s;
+    transform-origin: center center;
+    outline: 0px solid transparent;
+    position:relative;
+  }
+
+  .feature-card a {
+    text-decoration: none;
+    color: var(--md-sys-color-on-surface);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .feature-card .card-text {
+    font-size: .875rem;
+  }
+
+  .feature-card:hover {
+    cursor: pointer;
+    transform: scale(1.08);
+    box-shadow: var(--md-sys-elevation-2);
+  }
+
+  .card-title.text-primary {
+    color: #000;
+  }
+
+  .home-card-icon {
+    width: 3rem;
+    height: 3rem;
+    transform: translateY(-5px);
+  }
+
+  .favorite-icon {
+    display: none !important;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: var(--md-sys-color-secondary);
+  }
+
+  #tool-icon {
+    height: 100%;
+  }
+
+  #tool-text {
+    margin: 0.0rem 0 0 1.25rem;
+  }
+
+  .card-title {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+  }
+
+  /* Only show the favorite icons when the parent card is being hovered over */
+  .feature-card:hover .favorite-icon {
+    display: block  !important;
+  }
+
+  .favorite-icon img {
+    filter: brightness(0) invert(var(--md-theme-filter-color));
+  }
+
+  .favorite-icon:hover .material-symbols-rounded {
+    transform: scale(1.2);
+  }
+
+  .favorite-icon .material-symbols-rounded.fill{
+    color: #f5c000;
+  }
+
+  .jumbotron {
+    padding: 3rem 3rem;
+    /* Reduce vertical padding */
+  }
+
+  .lookatme {
+    opacity: 1;
+    position: relative;
+    display: inline-block;
+  }
+
+  .lookatme::after {
+    color: #e33100;
+    text-shadow: 0 0 5px #e33100;
+    /* in the html, the data-lookatme-text attribute must */
+    /* contain the same text as the .lookatme element */
+    content: attr(data-lookatme-text);
+    padding: inherit;
+    position: absolute;
+    inset: 0 0 0 0;
+    z-index: 1;
+    /* 20 steps / 2 seconds = 10fps */
+    -webkit-animation: 2s infinite Pulse steps(20);
+    animation: 2s infinite Pulse steps(20);
+  }
+
+  @keyframes Pulse {
+    from {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  .update-notice {
+    animation: scale 1s infinite alternate;
+  }
+
+  @keyframes scale {
+    0% {
+      transform: scale(0.96);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 301abe81b..c36a1eb95 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -36,101 +36,6 @@
   border: 0.1rem solid transparent;
 }
 
-.features-container {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.feature-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.feature-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--md-sys-color-on-surface);
-  margin-bottom: 15px;
-  user-select: none;
-  cursor: pointer;
-  gap: 10px;
-}
-
-.feature-group-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
-  gap: 30px 30px;
-  overflow: hidden;
-  margin: -20px;
-  padding: 20px;
-  box-sizing:content-box;
-}
-
-.feature-group-container.animated-group {
-  transition: 0.5s all;
-}
-
-.feature-group.collapsed>.feature-group-container {
-  max-height: 0 !important;
-  margin: 0;
-  padding: 0;
-}
-
-.header-expand-button {
-  transition: 0.5s all;
-  transform: rotate(90deg);
-}
-
-.header-expand-button.collapsed {
-  transform: rotate(0deg);
-}
-
-.feature-card {
-  border: 1px solid var(--md-sys-color-surface-5);
-  border-radius: 1.75rem;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background: var(--md-sys-color-surface-5);
-  transition:
-    transform 0.3s,
-    border 0.3s;
-  transform-origin: center center;
-  outline: 0px solid transparent;
-}
-
-.feature-card a {
-  text-decoration: none;
-  color: var(--md-sys-color-on-surface);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.feature-card .card-text {
-  font-size: .875rem;
-}
-
-.feature-card:hover {
-  cursor: pointer;
-  transform: scale(1.08);
-  box-shadow: var(--md-sys-elevation-2);
-}
-
-.card-title.text-primary {
-  color: #000;
-}
-
-.home-card-icon {
-  width: 3rem;
-  height: 3rem;
-  transform: translateY(-5px);
-}
-
 .favorite-icon {
   display: none;
   position: absolute;
@@ -147,16 +52,6 @@
   margin: 0.0rem 0 0 1.25rem;
 }
 
-.card-title {
-  margin-bottom: 1rem;
-  font-size: 1.1rem;
-}
-
-/* Only show the favorite icons when the parent card is being hovered over */
-.feature-card:hover .favorite-icon {
-  display: block;
-}
-
 .favorite-icon img {
   filter: brightness(0) invert(var(--md-theme-filter-color));
 }
@@ -195,34 +90,21 @@
   animation: 2s infinite Pulse steps(20);
 }
 
-@keyframes Pulse {
-  from {
-    opacity: 0;
-  }
+.newfeature{
+  min-width:12rem;
+}
+.recent-features{
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  overflow: hidden;
+  justify-content: center;
 
-  50% {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
 }
 
-.update-notice {
-  animation: scale 1s infinite alternate;
+ .close-icon {
+  color: var(--favourite-remove) !important;
 }
-
-@keyframes scale {
-  0% {
-    transform: scale(0.96);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.hidden {
-  visibility: hidden;
+ .add-icon {
+  color: var(--favourite-add) !important;
 }
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index 71c573986..a985fa1a9 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -231,6 +231,13 @@ span.icon-text::after {
   background-color: var(--md-nav-section-color-convert);
 }
 
+.dropdown-item:focus.convertto,
+.dropdown-item:hover.convertto,
+.dropdown-item.active.convertto {
+  color: var(--md-nav-on-section-color-convertto);
+  background-color: var(--md-nav-section-color-convertto);
+}
+
 .dropdown-item:focus.image,
 .dropdown-item:hover.image,
 .dropdown-item.active.image {
@@ -302,7 +309,7 @@ span.icon-text::after {
   padding: 1.5rem 0;
   border-radius: 1rem;
   color: var(--md-sys-color-on-surface);
-  background-color: var(--md-sys-color-surface-container);
+  background-color: var(--md-sys-color-surface);
   border: 1px solid var(--md-sys-color-surface-5);
   box-shadow: var(--md-sys-elevation-2);
 }
@@ -342,12 +349,12 @@ span.icon-text::after {
 }
 
 .go-pro-link {
-   position: relative;
-   padding: 0.5rem 1rem;
-   transition: all 0.3s ease;
-   z-index: 1;
-   display: inline-block;
-   width: auto;
+  position: relative;
+  padding: 0.5rem 1rem;
+  transition: all 0.3s ease;
+  z-index: 1;
+  display: inline-block;
+  width: auto;
 }
 
 .go-pro-badge {
@@ -371,6 +378,114 @@ span.icon-text::after {
   gap: 1rem;
 }
 
-#stacked > .navbar-item {
+#stacked>.navbar-item {
   margin: 0;
 }
+
+.features-container {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+}
+
+.feature-group {
+  display: flex;
+  flex-direction: column;
+  min-width: 14rem;
+  max-width: 18rem;
+  flex: 1 1 min(14rem, 100%);
+  box-sizing: border-box;
+}
+
+.feature-rows {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 1rem;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.feature-rows.single-column {
+  justify-content: center;
+  /* Center-align a single column */
+}
+
+.feature-group-header {
+  display: flex;
+  justify-content: flex-start;
+  color: var(--md-sys-color-on-surface);
+  margin-top: 15px;
+  user-select: none;
+  cursor: pointer;
+  gap: 10px;
+}
+
+.nav-group-container {
+  padding: 10px;
+}
+
+
+
+.card-title.text-primary {
+  color: #000;
+}
+
+.home-card-icon {
+  width: 3rem;
+  height: 3rem;
+  transform: translateY(-5px);
+}
+
+.favorite-icon {
+  display: none;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--md-sys-color-secondary);
+}
+
+.favorite-icon img {
+  filter: brightness(0) invert(var(--md-theme-filter-color));
+}
+
+.favorite-icon:hover .material-symbols-rounded {
+  transform: scale(1.2);
+}
+
+.favorite-icon .material-symbols-rounded.fill {
+  color: #f5c000;
+}
+
+
+@keyframes Pulse {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.update-notice {
+  animation: scale 1s infinite alternate;
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(0.96);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
diff --git a/src/main/resources/static/css/redact.css b/src/main/resources/static/css/redact.css
index 05a796783..5eaf12eb7 100644
--- a/src/main/resources/static/css/redact.css
+++ b/src/main/resources/static/css/redact.css
@@ -187,7 +187,7 @@ html {
 #apply-redaction:is(:hover):not([disabled=true], :disabled:not([disabled=false])) {
   cursor: pointer;
   background-color: rgba(6, 114, 197, 0.82);
-  color: rgb(255 255 255);
+  color: rgb(14, 12, 12);
   outline:rgba(6, 114, 197, 0.82) !important;
   border-color: rgba(6, 114, 197, 0.82) !important;
 }
@@ -230,8 +230,14 @@ html {
 .splitToolbarButton > .btn-primary, .splitToolbarButton > .btn-secondary, .splitToolbarButton > .toolbarButton {
   margin-left: 3px;
   margin-right: 3px;
+  border:none
 }
 
+.splitToolbarButton > .btn-success, .splitToolbarButton > .btn-secondary, .splitToolbarButton > .toolbarButton {
+  border:none
+}
+
+
 .spin-animation {
   -webkit-animation: spin 2s linear infinite; /* Safari */
   -moz-animation: spin 2s linear infinite;
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index d2c700cea..22e868912 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -128,6 +128,13 @@ td {
   background-color: var(--md-nav-section-color-convert);
 }
 
+.convertto .nav-icon,
+.convertto.tool-header-icon {
+  color: var(--md-nav-on-section-color-convertto);
+  background-color: var(--md-nav-section-color-convertto);
+}
+
+
 .security .nav-icon,
 .security.tool-header-icon {
   color: var(--md-nav-on-section-color-security);
@@ -213,6 +220,11 @@ td {
   background-color: var(--md-nav-section-color-convert);
 }
 
+.feature-card .convertto .nav-icon {
+  color: var(--md-nav-on-section-color-convertto);
+  background-color: var(--md-nav-section-color-convertto);
+}
+
 .feature-card .security .nav-icon {
   color: var(--md-nav-on-section-color-security);
   background-color: var(--md-nav-section-color-security);
@@ -874,6 +886,8 @@ textarea.form-control {
 .dropdown-item {
   color: var(--md-sys-color-on-surface);
   padding: 0.25rem 1rem;
+  border-radius: 3rem;
+
 }
 
 .dropdown-item:focus,
@@ -881,9 +895,15 @@ textarea.form-control {
   color: var(--md-sys-color-on-surface);
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
-  font-weight: 500;
   font-variation-settings: var(--md-sys-icon-fill-1);
 }
+.dropdown-item.no-hover:hover,
+.dropdown-item.no-hover:focus {
+  color: var(--md-sys-color-on-surface) !important;
+  background-color: transparent !important;
+  border-radius: 3rem !important;
+  font-variation-settings: initial !important;
+}
 
 .dropdown-item.active,
 .dropdown-item:active {
diff --git a/src/main/resources/static/css/theme/theme.css b/src/main/resources/static/css/theme/theme.css
index 2e736ede7..e1ef98c83 100644
--- a/src/main/resources/static/css/theme/theme.css
+++ b/src/main/resources/static/css/theme/theme.css
@@ -2,11 +2,11 @@
 .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%);
+  --md-sys-color-surface-1: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 100, 0.05) 5%);
+  --md-sys-color-surface-2: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.08) 5%);
+  --md-sys-color-surface-3: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.11) 5%);
+  --md-sys-color-surface-4: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.12) 5%);
+  --md-sys-color-surface-5: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.14) 5%);
   /* Icon fill */
   --md-sys-icon-fill-0: 'FILL' 0, 'wght' 500;
   --md-sys-icon-fill-1: 'FILL' 1, 'wght' 500;
diff --git a/src/main/resources/static/css/theme/theme.dark.css b/src/main/resources/static/css/theme/theme.dark.css
index ad6657881..be1a1431e 100644
--- a/src/main/resources/static/css/theme/theme.dark.css
+++ b/src/main/resources/static/css/theme/theme.dark.css
@@ -58,6 +58,8 @@
     --md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-convertto: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
@@ -70,4 +72,8 @@
     --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
+    --md-nav-color-on-seperator: rgb(24 28 34);
+    --md-nav-background: rgb(15 20 26);
+    --favourite-add: #9ed18c;
+    --favourite-remove: palevioletred;
+}
diff --git a/src/main/resources/static/css/theme/theme.light.css b/src/main/resources/static/css/theme/theme.light.css
index 74101fe28..269ccd68b 100644
--- a/src/main/resources/static/css/theme/theme.light.css
+++ b/src/main/resources/static/css/theme/theme.light.css
@@ -19,8 +19,8 @@
     --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: rgb(237, 240, 245);
+    --md-sys-color-on-surface: rgb(0, 1, 1);
     --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);
@@ -58,6 +58,8 @@
     --md-nav-on-section-color-organize: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-convert: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
+    --md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity));
+    --md-nav-on-section-color-convertto: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
     --md-nav-on-section-color-security: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
     --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
@@ -70,4 +72,8 @@
     --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
+    --md-nav-color-on-seperator: rgb(174, 178, 179);
+    --md-nav-background: rgb(248 249 255);
+    --favourite-add: #25ab6c;
+    --favourite-remove: rgb(222, 94, 137);
+}
diff --git a/src/main/resources/static/files/popularity.txt b/src/main/resources/static/files/popularity.txt
new file mode 100644
index 000000000..4c4f07adb
--- /dev/null
+++ b/src/main/resources/static/files/popularity.txt
@@ -0,0 +1,66 @@
+{
+  "/login": 1,
+  "/multi-tool": 2,
+  "/merge-pdfs": 3,
+  "/pdf-to-word": 4,
+  "/compress-pdf": 5,
+  "/pdf-to-img": 6,
+  "/pipeline": 7,
+  "/split-pdfs": 8,
+  "/img-to-pdf": 9,
+  "/file-to-pdf": 10,
+  "/ocr-pdf": 11,
+  "/sign": 12,
+  "/remove-password": 13,
+  "/adjust-contrast": 14,
+  "/pdf-to-text": 15,
+  "/extract-page": 16,
+  "/add-watermark": 17,
+  "/remove-pages": 18,
+  "/crop": 19,
+  "/url-to-pdf": 20,
+  "/pdf-to-presentation": 21,
+  "/pdf-to-csv": 22,
+  "/html-to-pdf": 23,
+  "/cert-sign": 24,
+  "/rotate-pdf": 25,
+  "/console/": 26,
+  "/geoserver": 27,
+  "/pdf-to-xml": 28,
+  "/markdown-to-pdf": 29,
+  "/pdf-organizer": 30,
+  "/add-image": 31,
+  "/stamp": 32,
+  "/auto-redact": 33,
+  "/scale-pages": 34,
+  "/extract-images": 35,
+  "/change-metadata": 36,
+  "/pdf-to-html": 37,
+  "/get-info-on-pdf": 38,
+  "/replace-and-invert-color-pdf": 39,
+  "/pdf-to-pdfa": 40,
+  "/change-permissions": 41,
+  "/compare": 42,
+  "/add-password": 43,
+  "/multi-page-layout": 44,
+"/add-page-numbers": 45,
+"/auto-rename": 46,
+"/auto-split-pdf": 47,
+"/extract-image-scans": 48,
+"/flatten": 49,
+"/overlay-pdf": 50,
+"/pdf-to-markdown": 51,
+"/pdf-to-single-page": 52,
+"/redact": 53,
+"/remove-annotations": 54,
+"/remove-blanks": 55,
+"/remove-cert-sign": 56,
+"/remove-image-pdf": 57,
+"/repair": 58,
+"/sanitize-pdf": 59,
+"/show-javascript": 60,
+"/split-by-size-or-count": 61,
+"/split-pdf-by-chapters": 62,
+"/split-pdf-by-sections": 63,
+"/validate-signature": 64
+}
diff --git a/src/main/resources/static/images/redact-auto.svg b/src/main/resources/static/images/redact-auto.svg
new file mode 100644
index 000000000..e7d1cfcc7
--- /dev/null
+++ b/src/main/resources/static/images/redact-auto.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <symbol id="icon-redact-auto" viewBox="0 0 24 24">  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <rect width="24" height="24" style="fill: none"/>
+      <g>
+        <path d="M17.541,15.64258a.91793.91793,0,0,1,.55469-.18555h1.1084a.91586.91586,0,0,1,.55469.18555,1.30889,1.30889,0,0,1,.40429.499,1.57206,1.57206,0,0,1,.15039.68457v5.47754H19.2041V20.21094H18.0957v2.09277H16.9873V16.82617a1.55843,1.55843,0,0,1,.15039-.68457A1.2979,1.2979,0,0,1,17.541,15.64258Zm1.66309,1.10547H18.0957v2.17187h1.1084Z" style="fill: currentColor"/>
+        <path d="M5.68653,22.30351a2.00588,2.00588,0,0,1-2-2v-16A1.92585,1.92585,0,0,1,4.274,2.891a1.92585,1.92585,0,0,1,1.4125-.5875h8l6,6v5.66931h-2V9.30351h-5v-5h-7v16h9.74021v2Z" style="fill: currentColor"/>
+        <rect x="7.69809" y="10.43189" width="4.33778" height="0.79501" style="fill: currentColor"/>
+        <rect x="7.69809" y="12.16889" width="7.31192" height="1.21288" style="fill: currentColor"/>
+        <rect x="7.69809" y="17.14555" width="7.31192" height="1.21288" style="fill: currentColor"/>
+        <rect x="7.69809" y="14.32375" width="7.31192" height="0.57517" style="fill: currentColor"/>
+        <rect x="7.69809" y="15.79848" width="5.25578" height="0.4475" style="fill: currentColor"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/main/resources/static/images/redact-manual.svg b/src/main/resources/static/images/redact-manual.svg
new file mode 100644
index 000000000..2b6322661
--- /dev/null
+++ b/src/main/resources/static/images/redact-manual.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <symbol id="icon-redact-manual" viewBox="-2 0 24 24">
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <rect width="24" height="24" style="fill: none"/>
+      <g>
+        <rect x="6.23853" y="10.43189" width="4.33778" height="0.79501" style="fill: currentColor"/>
+        <rect x="6.23853" y="12.16889" width="7.31192" height="1.21288" style="fill: currentColor"/>
+        <rect x="6.23853" y="17.14555" width="6.03324" height="1.21288" style="fill: currentColor"/>
+        <rect x="6.23853" y="14.32375" width="7.31192" height="0.57517" style="fill: currentColor"/>
+        <rect x="6.23853" y="15.79848" width="5.25578" height="0.4475" style="fill: currentColor"/>
+        <path d="M12.5,22.30351v-3.075l5.525-5.5a1.36232,1.36232,0,0,1,.5-.325,1.59994,1.59994,0,0,1,.55-.1,1.49441,1.49441,0,0,1,1.075.45l.925.925a1.73875,1.73875,0,0,1,.3125.5,1.44287,1.44287,0,0,1,.1125.55,1.70613,1.70613,0,0,1-.1.5625,1.34171,1.34171,0,0,1-.325.5125l-5.5,5.5Zm7.5-6.575-.925-.925Zm-6,5.075h.95l3.025-3.05-.45-.475-.475-.45L14,19.85351Zm-9.5,1.5a1.9259,1.9259,0,0,1-1.4125-.5875A1.92586,1.92586,0,0,1,2.5,20.30351v-16A1.92585,1.92585,0,0,1,3.0875,2.891,1.92586,1.92586,0,0,1,4.5,2.30351h8l6,6v3h-2v-2h-5v-5h-7v16h6v2Zm13.025-5.025-.475-.45.925.925Z" style="fill: currentColor"/>
+      </g>
+    </g>
+  </g>
+  </symbol>
+</svg>
diff --git a/src/main/resources/static/images/split-auto.svg b/src/main/resources/static/images/split-auto.svg
new file mode 100644
index 000000000..46a2bd306
--- /dev/null
+++ b/src/main/resources/static/images/split-auto.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <symbol id="icon-split-auto" viewBox="0 0 24 24">  <g id="Layer_2" data-name="Layer 2">  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <g>
+        <path d="M18.42466,20.16555,12,13.74089,9.84315,15.89774a2.45776,2.45776,0,0,1,.2524.73425,4.481,4.481,0,0,1,.06883.78013A3.53515,3.53515,0,0,1,9.086,20.00493a3.53516,3.53516,0,0,1-2.59281,1.07843,3.53516,3.53516,0,0,1-2.59281-1.07843,3.6561,3.6561,0,0,1,0-5.18561,3.53516,3.53516,0,0,1,2.59281-1.07843,4.48117,4.48117,0,0,1,.78014.06884,2.45778,2.45778,0,0,1,.73424.25239l2.15685-2.15685L8.00753,9.74842a2.45752,2.45752,0,0,1-.73424.2524,4.48117,4.48117,0,0,1-.78014.06884A3.53516,3.53516,0,0,1,3.90034,8.99123,3.53515,3.53515,0,0,1,2.82192,6.39842,3.53515,3.53515,0,0,1,3.90034,3.80561,3.53515,3.53515,0,0,1,6.49315,2.72719,3.53515,3.53515,0,0,1,9.086,3.80561a3.53515,3.53515,0,0,1,1.07842,2.59281,4.48107,4.48107,0,0,1-.06883.78014,2.45786,2.45786,0,0,1-.2524.73425L21.17808,19.24774v.91781Zm-3.67123-9.17809L12.91781,9.15185,18.42466,3.645h2.75342v.91781ZM6.49315,8.234A1.841,1.841,0,0,0,8.32877,6.39842,1.841,1.841,0,0,0,6.49315,4.56281,1.841,1.841,0,0,0,4.65753,6.39842,1.841,1.841,0,0,0,6.49315,8.234ZM12,12.36418a.47051.47051,0,1,0-.32123-.13767A.44026.44026,0,0,0,12,12.36418ZM6.49315,19.24774a1.83562,1.83562,0,1,0-1.29641-3.132,1.83562,1.83562,0,0,0,1.29641,3.132Z" style="fill: currentColor"/>
+        <path d="M18.0708,9.373a.73373.73373,0,0,1,.44434-.14942h.88867a.73372.73372,0,0,1,.44433.14942,1.04878,1.04878,0,0,1,.32374.40039,1.24521,1.24521,0,0,1,.1206.54883v4.3916h-.88867V13.03613h-.88867v1.67774h-.88868v-4.3916a1.24508,1.24508,0,0,1,.12061-.54883A1.04885,1.04885,0,0,1,18.0708,9.373Zm1.333.88672h-.88867V12h.88867Z" style="fill: currentColor"  transform="translate(-5 -4) scale(1.3) "/>
+      </g>
+      <rect width="24" height="24" style="fill: none"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/main/resources/static/images/split-chapters.svg b/src/main/resources/static/images/split-chapters.svg
new file mode 100644
index 000000000..e8b098423
--- /dev/null
+++ b/src/main/resources/static/images/split-chapters.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <symbol id="icon-split-chapters" viewBox="0 0 24 24">  <g id="Layer_2" data-name="Layer 2">  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <g>
+        <path d="M17.632,9.18527v5.44l1.94-1.16,1.94,1.16v-5.44Z" style="fill: currentColor"/>
+        <path d="M18.09072,20.16555l-6.42466-6.42466L9.50921,15.89774a2.45775,2.45775,0,0,1,.25239.73425,4.481,4.481,0,0,1,.06884.78013A3.53516,3.53516,0,0,1,8.752,20.00493a3.53516,3.53516,0,0,1-2.5928,1.07843A3.53516,3.53516,0,0,1,3.5664,20.00493a3.65608,3.65608,0,0,1,0-5.18561,3.53516,3.53516,0,0,1,2.59281-1.07843,4.481,4.481,0,0,1,.78013.06884,2.45775,2.45775,0,0,1,.73425.25239l2.15685-2.15685L7.67359,9.74842a2.45749,2.45749,0,0,1-.73425.2524,4.481,4.481,0,0,1-.78013.06884A3.53516,3.53516,0,0,1,3.5664,8.99123,3.53516,3.53516,0,0,1,2.488,6.39842,3.53516,3.53516,0,0,1,3.5664,3.80561,3.53515,3.53515,0,0,1,6.15921,2.72719,3.53515,3.53515,0,0,1,8.752,3.80561,3.53516,3.53516,0,0,1,9.83044,6.39842a4.48109,4.48109,0,0,1-.06884.78014,2.45784,2.45784,0,0,1-.25239.73425L20.84414,19.24774v.91781Zm-3.67124-9.17809L12.58386,9.15185,18.09072,3.645h2.75342v.91781ZM6.15921,8.234A1.841,1.841,0,0,0,7.99482,6.39842,1.841,1.841,0,0,0,6.15921,4.56281,1.841,1.841,0,0,0,4.32359,6.39842,1.841,1.841,0,0,0,6.15921,8.234Zm5.50685,4.13014a.47051.47051,0,1,0-.32124-.13767A.44026.44026,0,0,0,11.66606,12.36418ZM6.15921,19.24774a1.83562,1.83562,0,1,0-1.29641-3.132,1.83562,1.83562,0,0,0,1.29641,3.132Z" style="fill: currentColor"/>
+      </g>
+      <rect width="24" height="24" style="fill: none"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/main/resources/static/images/split-size.svg b/src/main/resources/static/images/split-size.svg
new file mode 100644
index 000000000..f05aaaf4c
--- /dev/null
+++ b/src/main/resources/static/images/split-size.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="padding-left: 20px; margin-right: -20px;">
+        <symbol id="icon-split-size" viewBox="0 0 24 24">  <g id="Layer_2" data-name="Layer 2">  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <g>
+        <path d="M17.90313,20.16555l-6.42466-6.42466L9.32162,15.89774a2.45776,2.45776,0,0,1,.2524.73425,4.481,4.481,0,0,1,.06883.78013,3.53515,3.53515,0,0,1-1.07842,2.59281,3.53516,3.53516,0,0,1-2.59281,1.07843,3.53516,3.53516,0,0,1-2.59281-1.07843,3.6561,3.6561,0,0,1,0-5.18561,3.53516,3.53516,0,0,1,2.59281-1.07843,4.48117,4.48117,0,0,1,.78014.06884,2.45778,2.45778,0,0,1,.73424.25239l2.15685-2.15685L7.486,9.74842a2.45752,2.45752,0,0,1-.73424.2524,4.48117,4.48117,0,0,1-.78014.06884A3.53516,3.53516,0,0,1,3.37881,8.99123,3.53515,3.53515,0,0,1,2.30039,6.39842,3.53515,3.53515,0,0,1,3.37881,3.80561,3.53515,3.53515,0,0,1,5.97162,2.72719,3.53515,3.53515,0,0,1,8.56443,3.80561,3.53515,3.53515,0,0,1,9.64285,6.39842a4.48107,4.48107,0,0,1-.06883.78014,2.45786,2.45786,0,0,1-.2524.73425L20.65655,19.24774v.91781Zm-3.67124-9.17809L12.39628,9.15185,17.90313,3.645h2.75342v.91781ZM5.97162,8.234A1.841,1.841,0,0,0,7.80724,6.39842,1.841,1.841,0,0,0,5.97162,4.56281,1.841,1.841,0,0,0,4.136,6.39842,1.841,1.841,0,0,0,5.97162,8.234Zm5.50685,4.13014a.47051.47051,0,1,0-.32123-.13767A.44026.44026,0,0,0,11.47847,12.36418ZM5.97162,19.24774a1.83562,1.83562,0,1,0-1.29641-3.132,1.83562,1.83562,0,0,0,1.29641,3.132Z" style="fill: currentColor"/>
+        <g>
+          <rect x="18.32071" y="7.9834" width="3.37891" height="2" style="fill: currentColor"/>
+          <rect x="18.32071" y="10.90527" width="3.37891" height="2" style="fill: currentColor"/>
+          <rect x="18.32071" y="13.82715" width="3.37891" height="2" style="fill: currentColor"/>
+        </g>
+      </g>
+      <rect width="24" height="24" style="fill: none"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js
index 16e219f77..913c656b2 100644
--- a/src/main/resources/static/js/favourites.js
+++ b/src/main/resources/static/js/favourites.js
@@ -1,53 +1,65 @@
 function updateFavoritesDropdown() {
-  var dropdown = document.querySelector("#favoritesDropdown");
-
-  if (!dropdown) {
-    console.error('Dropdown element with ID "favoritesDropdown" not found!');
-    return;
-  }
-  dropdown.innerHTML = "";
-
-  var hasFavorites = false;
-  var addedFeatures = new Set();
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
 
   for (var i = 0; i < localStorage.length; i++) {
     var key = localStorage.key(i);
     var value = localStorage.getItem(key);
 
-    if (value === "favorite") {
-      var navbarEntry = document.querySelector(`a[href='${key}']`);
+    if (value === 'favorite') {
+      const index = favoritesList.indexOf(key);
+      if (index === -1) {
+        favoritesList.push(key);
+        localStorage.removeItem(key);
+        console.log(`Added to favorites: ${key}`);
+      }
+    }
+  }
+
+  var dropdown = document.querySelector('#favoritesDropdown');
+
+  if (!dropdown) {
+    console.error('Dropdown element with ID "favoritesDropdown" not found!');
+    return;
+  }
+  dropdown.innerHTML = '';
+
+  var hasFavorites = false;
+  var addedFeatures = new Set();
+
+  for (var i = 0; i < favoritesList.length; i++) {
+    var value = favoritesList[i];
+    if (value) {
+      var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
       if (navbarEntry) {
         var featureName = navbarEntry.textContent.trim();
 
         if (!addedFeatures.has(featureName)) {
-          var dropdownItem = document.createElement("div");
-          dropdownItem.className = "dropdown-item d-flex justify-content-between align-items-center";
+          var dropdownItem = document.createElement('div');
+          dropdownItem.className = 'dropdown-item d-flex justify-content-between align-items-center';
 
           // Create a wrapper for the original content
-          var contentWrapper = document.createElement("div");
-          contentWrapper.className = "d-flex align-items-center flex-grow-1";
-          contentWrapper.style.textDecoration = "none";
-          contentWrapper.style.color = "inherit";
+          var contentWrapper = document.createElement('div');
+          contentWrapper.className = 'd-flex align-items-center flex-grow-1';
+          contentWrapper.style.textDecoration = 'none';
+          contentWrapper.style.color = 'inherit';
 
           // Clone the original content
           var originalContent = navbarEntry.querySelector('div').cloneNode(true);
           contentWrapper.appendChild(originalContent);
 
           // Create the remove button
-          var removeButton = document.createElement("button");
-          removeButton.className = "btn btn-sm btn-link p-0 ml-2";
+          var removeButton = document.createElement('button');
+          removeButton.className = 'btn btn-sm btn-link p-0 ml-2';
           removeButton.innerHTML = '<i class="material-symbols-rounded close-icon" style="font-size: 18px;">close</i>';
-          removeButton.onclick = function(itemKey, event) {
+          removeButton.onclick = function (itemKey, event) {
             event.preventDefault();
             event.stopPropagation();
-            localStorage.removeItem(itemKey);
-            updateFavoritesSection();
+            addToFavorites(itemKey);
             updateFavoritesDropdown();
-            filterCards();
-          }.bind(null, key);
+          }.bind(null, value);
 
           // Add click event to the content wrapper
-          contentWrapper.onclick = function(itemHref, event) {
+          contentWrapper.onclick = function (itemHref, event) {
             event.preventDefault();
             window.location.href = itemHref;
           }.bind(null, navbarEntry.href);
@@ -58,16 +70,67 @@ function updateFavoritesDropdown() {
           hasFavorites = true;
           addedFeatures.add(featureName);
         }
-      } else {
-        console.warn(`Navbar entry not found for key: ${key}`);
       }
+    } else {
+      console.warn(`Navbar entry not found for : ${value}`);
     }
   }
 
   if (!hasFavorites) {
-    var defaultItem = document.createElement("a");
-    defaultItem.className = "dropdown-item";
-    defaultItem.textContent = noFavourites || "No favorites added";
+    var defaultItem = document.createElement('a');
+    defaultItem.className = 'dropdown-item';
+    defaultItem.textContent = noFavourites || 'No favorites added';
     dropdown.appendChild(defaultItem);
   }
 }
+
+function updateFavoriteIcons() {
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+
+  // Select all favorite icons
+  document.querySelectorAll('.favorite-icon').forEach((icon) => {
+    const endpoint = icon.getAttribute('data-endpoint');
+    const parent = icon.closest('.dropdown-item');
+
+    // Determine if the icon belongs to groupRecent or groupFavorites
+    const isInGroupRecent = parent?.closest('#groupRecent') !== null;
+    const isInGroupFavorites = parent?.closest('#groupFavorites') !== null;
+
+    if (isInGroupRecent) {
+      icon.style.display = 'none';
+    } else if (isInGroupFavorites) {
+      icon.textContent = 'close_small';
+      icon.style.color = 'palevioletred';
+    } else {
+      icon.textContent = favoritesList.includes(endpoint) ? 'close_small' : 'add';
+      icon.className = favoritesList.includes(endpoint)
+        ? 'material-symbols-rounded favorite-icon close-icon'
+        : 'material-symbols-rounded favorite-icon add-icon';
+    }
+  });
+}
+
+function addToFavorites(entryId) {
+  if (entryId) {
+    const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+    const index = favoritesList.indexOf(entryId);
+
+    if (index === -1) {
+      favoritesList.push(entryId);
+      console.log(`Added to favorites: ${entryId}`);
+    } else {
+      favoritesList.splice(index, 1);
+      console.log(`Removed from favorites: ${entryId}`);
+    }
+
+    localStorage.setItem('favoritesList', JSON.stringify(favoritesList));
+    updateFavoritesDropdown();
+    updateFavoriteIcons();
+    const currentPath = window.location.pathname;
+    if (currentPath.includes('home-legacy')) {
+      syncFavoritesLegacy();
+    } else {
+      initializeCards();
+    }
+  }
+}
diff --git a/src/main/resources/static/js/homecard-legacy.js b/src/main/resources/static/js/homecard-legacy.js
new file mode 100644
index 000000000..02789efd6
--- /dev/null
+++ b/src/main/resources/static/js/homecard-legacy.js
@@ -0,0 +1,259 @@
+function filterCardsLegacy() {
+  var input = document.getElementById('searchBar');
+  var filter = input.value.toUpperCase();
+
+  let featureGroups = document.querySelectorAll('.feature-group-legacy');
+  const collapsedGroups = getCollapsedGroups();
+
+  for (const featureGroup of featureGroups) {
+    var cards = featureGroup.querySelectorAll('.feature-card');
+
+    let groupMatchesFilter = false;
+    for (var i = 0; i < cards.length; i++) {
+      var card = cards[i];
+      var title = card.querySelector('h5.card-title').innerText;
+      var text = card.querySelector('p.card-text').innerText;
+
+      // Get the navbar tags associated with the card
+      var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
+      var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
+
+      var content = title + ' ' + text + ' ' + navbarTags;
+
+      if (content.toUpperCase().indexOf(filter) > -1) {
+        card.style.display = '';
+        groupMatchesFilter = true;
+      } else {
+        card.style.display = 'none';
+      }
+    }
+
+    if (!groupMatchesFilter) {
+      featureGroup.style.display = 'none';
+    } else {
+      featureGroup.style.display = '';
+      resetOrTemporarilyExpandGroup(featureGroup, filter, collapsedGroups);
+    }
+  }
+}
+
+function getCollapsedGroups() {
+  return localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+}
+
+function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = '', collapsedGroups = []) {
+  const shouldResetCollapse = filterKeywords.trim() === '';
+  if (shouldResetCollapse) {
+    // Resetting the group's expand/collapse to its original state (as in collapsed groups)
+    const isCollapsed = collapsedGroups.indexOf(featureGroup.id) != -1;
+    expandCollapseToggle(featureGroup, !isCollapsed);
+  } else {
+    // Temporarily expands feature group without affecting the actual/stored collapsed groups
+    featureGroup.classList.remove('collapsed');
+    featureGroup.querySelector('.header-expand-button').classList.remove('collapsed');
+  }
+}
+
+function updateFavoritesSectionLegacy() {
+  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.feature-group-container');
+  favoritesContainer.innerHTML = '';
+  const cards = Array.from(document.querySelectorAll('.feature-card:not(.duplicate)'));
+  const addedCardIds = new Set();
+  let favoritesAmount = 0;
+
+  cards.forEach((card) => {
+    const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
+
+    if (favouritesList.includes(card.id) && !addedCardIds.has(card.id)) {
+      const duplicate = card.cloneNode(true);
+      duplicate.classList.add('duplicate');
+      favoritesContainer.appendChild(duplicate);
+      addedCardIds.add(card.id);
+      favoritesAmount++;
+    }
+  });
+
+  if (favoritesAmount === 0) {
+    document.getElementById('groupFavorites').style.display = 'none';
+  } else {
+    document.getElementById('groupFavorites').style.display = 'flex';
+  }
+  reorderCards(favoritesContainer);
+}
+
+function syncFavoritesLegacy() {
+  const cards = Array.from(document.querySelectorAll('.feature-card'));
+  cards.forEach((card) => {
+    const isFavorite = localStorage.getItem(card.id) === 'favorite';
+    const starIcon = card.querySelector('.favorite-icon span.material-symbols-rounded');
+    if (starIcon) {
+      if (isFavorite) {
+        starIcon.classList.remove('no-fill');
+        starIcon.classList.add('fill');
+        card.classList.add('favorite');
+      } else {
+        starIcon.classList.remove('fill');
+        starIcon.classList.add('no-fill');
+        card.classList.remove('favorite');
+      }
+    }
+  });
+  updateFavoritesSectionLegacy();
+  updateFavoritesDropdown();
+  filterCardsLegacy();
+}
+
+function reorderCards(container) {
+  var cards = Array.from(container.querySelectorAll('.feature-card'));
+  cards.forEach(function (card) {
+    container.removeChild(card);
+  });
+  cards.sort(function (a, b) {
+    var aIsFavorite = localStorage.getItem(a.id) === 'favorite';
+    var bIsFavorite = localStorage.getItem(b.id) === 'favorite';
+    if (a.id === 'update-link') {
+      return -1;
+    }
+    if (b.id === 'update-link') {
+      return 1;
+    }
+
+    if (aIsFavorite && !bIsFavorite) {
+      return -1;
+    } else if (!aIsFavorite && bIsFavorite) {
+      return 1;
+    } else {
+      return a.id > b.id;
+    }
+  });
+  cards.forEach(function (card) {
+    container.appendChild(card);
+  });
+}
+
+function reorderAllCards() {
+  const containers = Array.from(document.querySelectorAll('.feature-group-container'));
+  containers.forEach(function (container) {
+    reorderCards(container);
+  });
+}
+
+function initializeCardsLegacy() {
+  reorderAllCards();
+  updateFavoritesSectionLegacy();
+  updateFavoritesDropdown();
+  filterCardsLegacy();
+}
+
+function showFavoritesOnly() {
+  const groups = Array.from(document.querySelectorAll('.feature-group-legacy'));
+  if (localStorage.getItem('favoritesOnly') === 'true') {
+    groups.forEach((group) => {
+      if (group.id !== 'groupFavorites') {
+        group.style.display = 'none';
+      }
+    });
+  } else {
+    groups.forEach((group) => {
+      if (group.id !== 'groupFavorites') {
+        group.style.display = 'flex';
+      }
+    });
+  }
+}
+
+function toggleFavoritesOnly() {
+  if (localStorage.getItem('favoritesOnly') === 'true') {
+    localStorage.setItem('favoritesOnly', 'false');
+  } else {
+    localStorage.setItem('favoritesOnly', 'true');
+  }
+  showFavoritesOnly();
+}
+
+// Expands a feature group on true, collapses it on false and toggles state on null.
+function expandCollapseToggle(group, expand = null) {
+  if (expand === null) {
+    group.classList.toggle('collapsed');
+    group.querySelector('.header-expand-button').classList.toggle('collapsed');
+  } else if (expand) {
+    group.classList.remove('collapsed');
+    group.querySelector('.header-expand-button').classList.remove('collapsed');
+  } else {
+    group.classList.add('collapsed');
+    group.querySelector('.header-expand-button').classList.add('collapsed');
+  }
+
+  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+  const groupIndex = collapsed.indexOf(group.id);
+
+  if (group.classList.contains('collapsed')) {
+    if (groupIndex === -1) {
+      collapsed.push(group.id);
+    }
+  } else {
+    if (groupIndex !== -1) {
+      collapsed.splice(groupIndex, 1);
+    }
+  }
+
+  localStorage.setItem('collapsedGroups', JSON.stringify(collapsed));
+}
+
+function expandCollapseAll(expandAll) {
+  const groups = Array.from(document.querySelectorAll('.feature-group-legacy'));
+  groups.forEach((group) => {
+    expandCollapseToggle(group, expandAll);
+  });
+}
+
+window.onload = function () {
+  initializeCardsLegacy();
+  syncFavoritesLegacy(); // Ensure everything is in sync on page load
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  const materialIcons = new FontFaceObserver('Material Symbols Rounded');
+
+  materialIcons
+    .load()
+    .then(() => {
+      document.querySelectorAll('.feature-card.hidden').forEach((el) => {
+        el.classList.remove('hidden');
+      });
+    })
+    .catch(() => {
+      console.error('Material Symbols Rounded font failed to load.');
+    });
+
+  Array.from(document.querySelectorAll('.feature-group-header-legacy')).forEach((header) => {
+    const parent = header.parentNode;
+    const container = header.parentNode.querySelector('.feature-group-container');
+    if (parent.id !== 'groupFavorites') {
+      // container.style.maxHeight = container.scrollHeight + 'px';
+    }
+    header.onclick = () => {
+      expandCollapseToggle(parent);
+    };
+  });
+
+  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
+  const groupsArray = Array.from(document.querySelectorAll('.feature-group-legacy'));
+
+  groupsArray.forEach((group) => {
+    if (collapsed.indexOf(group.id) !== -1) {
+      expandCollapseToggle(group, false);
+    }
+  });
+
+  // Necessary in order to not fire the transition animation on page load, which looks wrong.
+  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
+  setTimeout(() => {
+    groupsArray.forEach((group) => {
+      const container = group.querySelector('.feature-group-container');
+      container.classList.add('animated-group');
+    });
+  }, 500);
+
+  showFavoritesOnly();
+});
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 9b5297f3c..6534104c7 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -1,159 +1,90 @@
 function filterCards() {
-  var input = document.getElementById("searchBar");
-  var filter = input.value.toUpperCase();
+  var input = document.getElementById('searchBar');
+  var filter = input.value.toUpperCase().trim();
 
-  let featureGroups = document.querySelectorAll(".feature-group");
-  const collapsedGroups = getCollapsedGroups();
+  // Split the input filter into individual words for multi-word matching
+  var filterWords = filter.split(/[\s,;.\-]+/);
 
+  let featureGroups = document.querySelectorAll('.feature-group');
   for (const featureGroup of featureGroups) {
-    var cards = featureGroup.querySelectorAll(".feature-card");
+    var cards = featureGroup.querySelectorAll('.dropdown-item');
 
     let groupMatchesFilter = false;
     for (var i = 0; i < cards.length; i++) {
       var card = cards[i];
-      var title = card.querySelector("h5.card-title").innerText;
-      var text = card.querySelector("p.card-text").innerText;
+      var title = card.getAttribute('title') || '';
 
       // Get the navbar tags associated with the card
       var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
-      var navbarTags = navbarItem ? navbarItem.getAttribute("data-bs-tags") : "";
+      var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
+      var navbarTags = navbarItem ? navbarTags + ',' + navbarItem.getAttribute('data-bs-title') : '';
 
-      var content = title + " " + text + " " + navbarTags;
+      var content = (title + ' ' + navbarTags).toUpperCase();
 
-      if (content.toUpperCase().indexOf(filter) > -1) {
-        card.style.display = "";
+      // Check if all words in the filter match the content
+      var matches = filterWords.every((word) => content.includes(word));
+
+      if (matches) {
+        card.style.display = '';
         groupMatchesFilter = true;
       } else {
-        card.style.display = "none";
+        card.style.display = 'none';
       }
     }
 
     if (!groupMatchesFilter) {
-      featureGroup.style.display = "none";
+      featureGroup.style.display = 'none';
     } else {
-      featureGroup.style.display = "";
-      resetOrTemporarilyExpandGroup(featureGroup, filter, collapsedGroups);
+      featureGroup.style.display = '';
     }
   }
 }
 
-function getCollapsedGroups() {
-  return localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
-}
-
-function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = "", collapsedGroups = []) {
-  const shouldResetCollapse = filterKeywords.trim() === "";
-  if (shouldResetCollapse) {
-    // Resetting the group's expand/collapse to its original state (as in collapsed groups)
-    const isCollapsed = collapsedGroups.indexOf(featureGroup.id) != -1;
-    expandCollapseToggle(featureGroup, !isCollapsed);
-  } else {
-    // Temporarily expands feature group without affecting the actual/stored collapsed groups
-    featureGroup.classList.remove("collapsed");
-    featureGroup.querySelector(".header-expand-button").classList.remove("collapsed");
-  }
-}
-
 function updateFavoritesSection() {
-  const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container");
-  favoritesContainer.style.maxHeight = "none";
-  favoritesContainer.innerHTML = ""; // Clear the container first
-  const cards = Array.from(document.querySelectorAll(".feature-card:not(.duplicate)"));
-  const addedCardIds = new Set(); // To keep track of added card IDs
+  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.nav-group-container');
+  favoritesContainer.innerHTML = '';
   let favoritesAmount = 0;
+  const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
 
-  cards.forEach(card => {
-    if (localStorage.getItem(card.id) === "favorite" && !addedCardIds.has(card.id)) {
-      const duplicate = card.cloneNode(true);
-      duplicate.classList.add("duplicate");
+  favouritesList.forEach((value) => {
+    var navbarEntry = document.querySelector(`a[data-bs-link='${value}']`);
+    if (navbarEntry) {
+      const duplicate = navbarEntry.cloneNode(true);
       favoritesContainer.appendChild(duplicate);
-      addedCardIds.add(card.id); // Mark this card as added
-      favoritesAmount++;
     }
+    favoritesAmount++;
   });
 
-  if (favoritesAmount === 0) {
-    document.getElementById("groupFavorites").style.display = "none";
+  if (favoritesAmount === 0 || !isFavoritesView) {
+    document.getElementById('groupFavorites').style.display = 'none';
   } else {
-    document.getElementById("groupFavorites").style.display = "flex";
+    document.getElementById('groupFavorites').style.display = 'flex';
   }
   reorderCards(favoritesContainer);
-  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + "px";
-}
-
-function toggleFavorite(element) {
-  var span = element.querySelector("span.material-symbols-rounded");
-  var card = element.closest(".feature-card");
-  var cardId = card.id;
-
-  // Prevent the event from bubbling up to parent elements
-  event.stopPropagation();
-
-  if (span.classList.contains("no-fill")) {
-    span.classList.remove("no-fill");
-    span.classList.add("fill");
-    card.classList.add("favorite");
-    localStorage.setItem(cardId, "favorite");
-  } else {
-    span.classList.remove("fill");
-    span.classList.add("no-fill");
-    card.classList.remove("favorite");
-    localStorage.removeItem(cardId);
-  }
-
-  // Use setTimeout to ensure this runs after the current call stack is clear
-  setTimeout(() => {
-    reorderCards(card.parentNode);
-    updateFavoritesSection();
-    updateFavoritesDropdown();
-    filterCards();
-  }, 0);
-}
-
-function syncFavorites() {
-  const cards = Array.from(document.querySelectorAll(".feature-card"));
-  cards.forEach(card => {
-    const isFavorite = localStorage.getItem(card.id) === "favorite";
-    const starIcon = card.querySelector(".favorite-icon span.material-symbols-rounded");
-    if (starIcon) {
-      if (isFavorite) {
-        starIcon.classList.remove("no-fill");
-        starIcon.classList.add("fill");
-        card.classList.add("favorite");
-      } else {
-        starIcon.classList.remove("fill");
-        starIcon.classList.add("no-fill");
-        card.classList.remove("favorite");
-      }
-    }
-  });
-  updateFavoritesSection();
-  updateFavoritesDropdown();
-  filterCards();
+  //favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + 'px';
 }
 
 function reorderCards(container) {
-  var cards = Array.from(container.querySelectorAll(".feature-card"));
+  var cards = Array.from(container.querySelectorAll('.dropdown-item'));
   cards.forEach(function (card) {
     container.removeChild(card);
   });
   cards.sort(function (a, b) {
-    var aIsFavorite = localStorage.getItem(a.id) === "favorite";
-    var bIsFavorite = localStorage.getItem(b.id) === "favorite";
-    if (a.id === "update-link") {
+    var aIsFavorite = localStorage.getItem(a.id) === 'favorite';
+    var bIsFavorite = localStorage.getItem(b.id) === 'favorite';
+    if (a.id === 'update-link') {
       return -1;
     }
-    if (b.id === "update-link") {
+    if (b.id === 'update-link') {
       return 1;
     }
 
     if (aIsFavorite && !bIsFavorite) {
       return -1;
-    }
-    else if (!aIsFavorite && bIsFavorite) {
+    } else if (!aIsFavorite && bIsFavorite) {
       return 1;
-    }
-    else {
+    } else {
       return a.id > b.id;
     }
   });
@@ -162,136 +93,165 @@ function reorderCards(container) {
   });
 }
 
-function reorderAllCards() {
-  const containers = Array.from(document.querySelectorAll(".feature-group-container"));
-  containers.forEach(function (container) {
-    reorderCards(container);
-  })
-}
-
 function initializeCards() {
-  var cards = document.querySelectorAll(".feature-card");
-  cards.forEach(function (card) {
-    var cardId = card.id;
-    var span = card.querySelector(".favorite-icon span.material-symbols-rounded");
-    if (localStorage.getItem(cardId) === "favorite") {
-      span.classList.remove("no-fill");
-      span.classList.add("fill");
-      card.classList.add("favorite");
-    }
-  });
-  reorderAllCards();
   updateFavoritesSection();
   updateFavoritesDropdown();
   filterCards();
 }
 
-function showFavoritesOnly() {
-  const groups = Array.from(document.querySelectorAll(".feature-group"));
-  if (localStorage.getItem("favoritesOnly") === "true") {
-    groups.forEach((group) => {
-      if (group.id !== "groupFavorites") {
-        group.style.display = "none";
-      };
-    })
-  } else {
-    groups.forEach((group) => {
-      if (group.id !== "groupFavorites") {
-        group.style.display = "flex";
-      };
-    })
-  };
-}
+function updateFavoritesView() {
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+  const textElement = document.getElementById('toggle-favourites-text');
+  const iconElement = document.getElementById('toggle-favourites-icon');
+  const favoritesGroup = document.querySelector('#groupFavorites');
+  const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+  document.getElementById('favouritesVisibility').style.display = 'flex';
 
-function toggleFavoritesOnly() {
-  if (localStorage.getItem("favoritesOnly") === "true") {
-    localStorage.setItem("favoritesOnly", "false");
+  if (isFavoritesView && favoritesList.length > 0) {
+    iconElement.textContent = 'visibility_off';
+    favoritesGroup.style.display = 'flex';
   } else {
-    localStorage.setItem("favoritesOnly", "true");
-  }
-  showFavoritesOnly();
-}
-
-// Expands a feature group on true, collapses it on false and toggles state on null.
-function expandCollapseToggle(group, expand = null) {
-  if (expand === null) {
-    group.classList.toggle("collapsed");
-    group.querySelector(".header-expand-button").classList.toggle("collapsed");
-  } else if (expand) {
-    group.classList.remove("collapsed");
-    group.querySelector(".header-expand-button").classList.remove("collapsed");
-  } else {
-    group.classList.add("collapsed");
-    group.querySelector(".header-expand-button").classList.add("collapsed");
-  }
-
-  const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
-  const groupIndex = collapsed.indexOf(group.id);
-
-  if (group.classList.contains("collapsed")) {
-    if (groupIndex === -1) {
-      collapsed.push(group.id);
-    }
-  } else {
-    if (groupIndex !== -1) {
-      collapsed.splice(groupIndex, 1);
+    if (favoritesList.length > 0) {
+      iconElement.textContent = 'visibility';
+      favoritesGroup.style.display = 'none';
+    } else {
+      document.getElementById('favouritesVisibility').style.display = 'none';
     }
   }
-
-  localStorage.setItem("collapsedGroups", JSON.stringify(collapsed));
 }
 
-function expandCollapseAll(expandAll) {
-  const groups = Array.from(document.querySelectorAll(".feature-group"));
-  groups.forEach((group) => {
-    expandCollapseToggle(group, expandAll);
-  })
-}
+function toggleFavoritesMode() {
+  const favoritesMode = !document.querySelector('.toggle-favourites').classList.contains('active');
+  document.querySelector('.toggle-favourites').classList.toggle('active', favoritesMode);
 
-window.onload = function() {
-  initializeCards();
-  syncFavorites(); // Ensure everything is in sync on page load
-};
+  document.querySelectorAll('.favorite-icon').forEach((icon) => {
+    const endpoint = icon.getAttribute('data-endpoint');
+    const parent = icon.closest('.dropdown-item');
+    const isInGroupRecent = parent.closest('#groupRecent') !== null;
+    const isInGroupFavorites = parent.closest('#groupFavorites') !== null;
 
-document.addEventListener("DOMContentLoaded", function () {
-  const materialIcons = new FontFaceObserver('Material Symbols Rounded');
+    if (isInGroupRecent) {
+      icon.style.display = 'none';
+    } else if (isInGroupFavorites) {
+      icon.style.display = favoritesMode ? 'inline-block' : 'none';
+      icon.textContent = 'close_small';
+    } else {
+      icon.style.display = favoritesMode ? 'inline-block' : 'none';
 
-  materialIcons.load().then(() => {
-    document.querySelectorAll('.feature-card.hidden').forEach(el => {
-      el.classList.remove('hidden');
-    });
-  }).catch(() => {
-    console.error('Material Symbols Rounded font failed to load.');
+      const favoritesList = JSON.parse(localStorage.getItem('favoritesList')) || [];
+      icon.textContent = favoritesList.includes(endpoint) ? 'close_small' : 'add';
+    }
   });
 
-  Array.from(document.querySelectorAll(".feature-group-header")).forEach(header => {
-    const parent = header.parentNode;
-    const container = header.parentNode.querySelector(".feature-group-container");
-    if (parent.id !== "groupFavorites") {
-      container.style.maxHeight = container.scrollHeight + "px";
+  document.querySelectorAll('.dropdown-item').forEach((link) => {
+    if (favoritesMode) {
+      link.dataset.originalHref = link.getAttribute('href');
+      link.setAttribute('href', '#');
+      link.classList.add('no-hover');
+    } else {
+      link.setAttribute('href', link.dataset.originalHref || '#');
+      link.classList.remove('no-hover');
     }
+  });
+
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+  if (favoritesMode && !isFavoritesView) {
+    toggleFavoritesView();
+  }
+}
+
+function toggleFavoritesView() {
+  const isFavoritesView = JSON.parse(localStorage.getItem('favoritesView') || 'false');
+  localStorage.setItem('favoritesView', !isFavoritesView);
+  updateFavoritesView();
+}
+window.onload = function () {
+  initializeCards();
+};
+
+function sortNavElements(criteria) {
+  document.querySelectorAll('.nav-group-container').forEach((container) => {
+    const items = Array.from(container.children);
+
+    items.sort((a, b) => {
+      if (criteria === 'alphabetical') {
+        const titleA = a.querySelector('.icon-text')?.textContent.trim().toLowerCase() || '';
+        const titleB = b.querySelector('.icon-text')?.textContent.trim().toLowerCase() || '';
+        return titleA.localeCompare(titleB);
+      } else if (criteria === 'global') {
+        const popularityA = parseInt(a.dataset.popularity, 10) || 1000;
+        const popularityB = parseInt(b.dataset.popularity, 10) || 1000;
+        return popularityA - popularityB;
+      }
+      return 0;
+    });
+    container.innerHTML = '';
+    items.forEach((item) => container.appendChild(item));
+  });
+}
+
+async function fetchPopularityData(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.text();
+}
+
+function applyPopularityData(popularityData) {
+  document.querySelectorAll('.dropdown-item').forEach((item) => {
+    const endpoint = item.getAttribute('data-bs-link');
+    const popularity = popularityData['/' + endpoint];
+    if (endpoint && popularity !== undefined) {
+      item.setAttribute('data-popularity', popularity);
+    }
+  });
+  const currentSort = localStorage.getItem('homepageSort') || 'alphabetical';
+  const sortDropdown = document.getElementById('sort-options');
+  if (sortDropdown) {
+    sortDropdown.value = currentSort;
+    ``;
+  }
+  sortNavElements(currentSort);
+}
+document.addEventListener('DOMContentLoaded', async function () {
+  const sortDropdown = document.getElementById('sort-options');
+  if (sortDropdown) {
+    sortDropdown.addEventListener('change', (event) => {
+      const selectedOption = event.target.value;
+      localStorage.setItem('homepageSort', selectedOption);
+
+      sortNavElements(selectedOption);
+    });
+  }
+  try {
+    const response = await fetch('files/popularity.txt');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const popularityData = await response.json();
+    applyPopularityData(popularityData);
+  } catch (error) {
+    console.error('Error loading popularity data:', error);
+  }
+
+  const materialIcons = new FontFaceObserver('Material Symbols Rounded');
+
+  materialIcons
+    .load()
+    .then(() => {
+      document.querySelectorAll('.dropdown-item.hidden').forEach((el) => {
+        el.classList.remove('hidden');
+      });
+    })
+    .catch(() => {
+      console.error('Material Symbols Rounded font failed to load.');
+    });
+
+  Array.from(document.querySelectorAll('.feature-group-header')).forEach((header) => {
+    const parent = header.parentNode;
     header.onclick = () => {
       expandCollapseToggle(parent);
     };
-  })
-
-  const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
-  const groupsArray = Array.from(document.querySelectorAll(".feature-group"));
-
-  groupsArray.forEach(group => {
-    if (collapsed.indexOf(group.id) !== -1) {
-      expandCollapseToggle(group, false);
-    }
-  })
-
-  // Necessary in order to not fire the transition animation on page load, which looks wrong.
-  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
-  setTimeout(() => {
-    groupsArray.forEach(group => {
-      const container = group.querySelector(".feature-group-container");
-      container.classList.add("animated-group");
-    })
-  }, 500);
-
-  showFavoritesOnly();
+  });
 });
diff --git a/src/main/resources/static/js/multitool/DragDropManager.js b/src/main/resources/static/js/multitool/DragDropManager.js
index 747a7a3db..11536e891 100644
--- a/src/main/resources/static/js/multitool/DragDropManager.js
+++ b/src/main/resources/static/js/multitool/DragDropManager.js
@@ -81,7 +81,7 @@ class DragDropManager {
   }
 
   onDragEl(mouseEvent) {
-    const {clientX, clientY} = mouseEvent;
+    const { clientX, clientY } = mouseEvent;
     if (this.draggedImageEl) {
       this.draggedImageEl.style.visibility = 'visible';
       this.draggedImageEl.style.left = `${clientX}px`;
@@ -174,7 +174,7 @@ class DragDropManager {
     this.elementTimeouts.set(element, timeoutId);
   }
 
-  setActions({movePageTo}) {
+  setActions({ movePageTo }) {
     this.movePageTo = movePageTo;
   }
 
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 17386fd79..834247940 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -129,32 +129,37 @@ class PdfActionsManager {
 
     const moveUp = document.createElement("button");
     moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary");
-    moveUp.innerHTML = `<span class="material-symbols-rounded">arrow_${leftDirection}_alt</span><span class="btn-tooltip">${window.translations.moveLeft}</span>`;
+    moveUp.setAttribute('title', window.translations.moveLeft);
+    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 = `<span class="material-symbols-rounded">arrow_${rightDirection}_alt</span><span class="btn-tooltip">${window.translations.moveRight}</span>`;
+    moveDown.setAttribute('title', window.translations.moveRight);
+    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 = `<span class="material-symbols-rounded">rotate_left</span><span class="btn-tooltip">${window.translations.rotateLeft}</span>`;
+    rotateCCW.setAttribute('title', window.translations.rotateLeft);
+    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 = `<span class="material-symbols-rounded">rotate_right</span><span class="btn-tooltip">${window.translations.rotateRight}</span>`;
+    rotateCW.setAttribute('title', window.translations.rotateRight);
+    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 = `<span class="material-symbols-rounded">delete</span><span class="btn-tooltip"></span><span class="btn-tooltip">${window.translations.delete}</span>`;
+    deletePage.setAttribute('title', window.translations.delete);
+    deletePage.innerHTML = `<span class="material-symbols-rounded">delete</span>`;
     deletePage.onclick = this.deletePageButtonCallback;
     buttonContainer.appendChild(deletePage);
 
@@ -194,19 +199,22 @@ class PdfActionsManager {
 
     const insertFileButton = document.createElement("button");
     insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
-    insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span></span><span class="btn-tooltip">${window.translations.addFile}</span>`;
+    moveUp.setAttribute('title', window.translations.addFile);
+    insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
     insertFileButton.onclick = this.insertFileButtonCallback;
     insertFileButtonContainer.appendChild(insertFileButton);
 
     const splitFileButton = document.createElement("button");
     splitFileButton.classList.add("btn", "btn-primary", "pdf-actions_split-file-button");
-    splitFileButton.innerHTML = `<span class="material-symbols-rounded">cut</span></span><span class="btn-tooltip">${window.translations.split}</span>`;
+    splitFileButton.setAttribute('title', window.translations.split);
+    splitFileButton.innerHTML = `<span class="material-symbols-rounded">cut</span>`;
     splitFileButton.onclick = this.splitFileButtonCallback;
     insertFileButtonContainer.appendChild(splitFileButton);
 
     const insertFileBlankButton = document.createElement("button");
     insertFileBlankButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-blank-button");
-    insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span></span><span class="btn-tooltip">${window.translations.insertPageBreak}</span>`;
+    insertFileBlankButton.setAttribute('title', window.translations.insertPageBreak);
+    insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span>`;
     insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
     insertFileButtonContainer.appendChild(insertFileBlankButton);
 
@@ -261,10 +269,8 @@ class PdfActionsManager {
     document.addEventListener("selectedPagesUpdated", () => {
       window.updateSelectedPagesDisplay();
     });
-
     return div;
   }
-
 }
 
 export default PdfActionsManager;
diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 615482000..86bdb55f4 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -1,11 +1,11 @@
-import {MovePageUpCommand, MovePageDownCommand} from './commands/move-page.js';
-import {RemoveSelectedCommand} from './commands/remove.js';
-import {RotateAllCommand, RotateElementCommand} from './commands/rotate.js';
-import {SplitAllCommand} from './commands/split.js';
-import {UndoManager} from './UndoManager.js';
-import {PageBreakCommand} from './commands/page-break.js';
-import {AddFilesCommand} from './commands/add-page.js';
-import {DecryptFile} from '../DecryptFiles.js';
+import { MovePageUpCommand, MovePageDownCommand } from './commands/move-page.js';
+import { RemoveSelectedCommand } from './commands/remove.js';
+import { RotateAllCommand, RotateElementCommand } from './commands/rotate.js';
+import { SplitAllCommand } from './commands/split.js';
+import { UndoManager } from './UndoManager.js';
+import { PageBreakCommand } from './commands/page-break.js';
+import { AddFilesCommand } from './commands/add-page.js';
+import { DecryptFile } from '../DecryptFiles.js';
 
 class PdfContainer {
   fileName;
@@ -144,6 +144,8 @@ class PdfContainer {
     await addFilesCommand.execute();
 
     this.undoManager.pushUndoClearRedo(addFilesCommand);
+    window.tooltipSetup();
+
   }
 
   async addFilesAction(nextSiblingElement) {
@@ -212,7 +214,7 @@ class PdfContainer {
         }
 
         if (decryptedFile.type === 'application/pdf') {
-          const {renderer, pdfDocument} = await this.loadFile(decryptedFile);
+          const { renderer, pdfDocument } = await this.loadFile(decryptedFile);
           pageCount = renderer.pageCount || 0;
           pages = await this.addPdfFile(renderer, pdfDocument, nextSiblingElement, pages);
         } else if (decryptedFile.type.startsWith('image/')) {
@@ -247,14 +249,14 @@ class PdfContainer {
           pdf_pages: pageCount,
         });
       }
-    } catch {}
+    } catch { }
   }
 
   async addFilesBlank(nextSiblingElement, pages) {
     let doc = await PDFLib.PDFDocument.create();
     let docBytes = await doc.save();
 
-    const url = URL.createObjectURL(new Blob([docBytes], {type: 'application/pdf'}));
+    const url = URL.createObjectURL(new Blob([docBytes], { type: 'application/pdf' }));
 
     const renderer = await this.toRenderer(url);
     pages = await this.addPdfFile(renderer, doc, nextSiblingElement, pages);
@@ -324,7 +326,7 @@ class PdfContainer {
     var objectUrl = URL.createObjectURL(file);
     var pdfDocument = await this.toPdfLib(objectUrl);
     var renderer = await this.toRenderer(objectUrl);
-    return {renderer, pdfDocument};
+    return { renderer, pdfDocument };
   }
 
   async toRenderer(objectUrl) {
@@ -350,7 +352,7 @@ class PdfContainer {
         // render the page onto the canvas
         var renderContext = {
           canvasContext: canvas.getContext('2d'),
-          viewport: page.getViewport({scale: 1}),
+          viewport: page.getViewport({ scale: 1 }),
         };
 
         await page.render(renderContext).promise;
@@ -604,7 +606,7 @@ class PdfContainer {
 
       let firstPage = splitterIndex === 0 ? 0 : splitters[splitterIndex - 1];
 
-      const pageIndices = Array.from({length: splitterPosition - firstPage}, (value, key) => firstPage + key);
+      const pageIndices = Array.from({ length: splitterPosition - firstPage }, (value, key) => firstPage + key);
 
       const copiedPages = await subDocument.copyPages(baseDocument, pageIndices);
 
@@ -687,7 +689,7 @@ class PdfContainer {
     pdfDoc.setProducer(stirlingPDFLabel);
 
     const pdfBytes = await pdfDoc.save();
-    const pdfBlob = new Blob([pdfBytes], {type: 'application/pdf'});
+    const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
 
     const filenameInput = document.getElementById('filename-input');
 
@@ -722,7 +724,7 @@ class PdfContainer {
       const archivedDocuments = await this.nameAndArchiveFiles(splitDocuments, baseName);
 
       const self = this;
-      archivedDocuments.generateAsync({type: 'base64'}).then(function (base64) {
+      archivedDocuments.generateAsync({ type: 'base64' }).then(function (base64) {
         const url = 'data:application/zip;base64,' + base64;
         self.downloadLink = document.createElement('a');
         self.downloadLink.href = url;
diff --git a/src/main/resources/static/js/navbar.js b/src/main/resources/static/js/navbar.js
index 97272a5b0..669e264f0 100644
--- a/src/main/resources/static/js/navbar.js
+++ b/src/main/resources/static/js/navbar.js
@@ -1,46 +1,79 @@
 function toolsManager() {
-  document.addEventListener('DOMContentLoaded', function () {
-    const stackedContainer = document.getElementById('stacked');
+  const convertToPDF = document.querySelector('#groupConvertTo');
+  const convertFromPDF = document.querySelector('#groupConvertFrom');
 
-    if (stackedContainer) {
-      const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
-      const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');
+  if (convertToPDF && convertFromPDF) {
+    const itemsTo = Array.from(convertToPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
+    const itemsFrom = Array.from(convertFromPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
 
-      if (convertToPDF && convertFromPDF) {
-        const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
-        const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item');
+    const totalItems = itemsTo.length + itemsFrom.length;
 
-        const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider'));
-        const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider'));
+    if (totalItems > 12) {
+      document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'none'));
+      document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'flex'));
+    } else {
+      document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'none'));
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'none'));
+    }
+  }
 
-        const totalItems = itemsTo.length + itemsFrom.length;
+  document.querySelectorAll('.navbar-item').forEach((element) => {
+    if (!element.closest('#stacked')) {
+      const dropdownItems = element.querySelectorAll('.dropdown-item');
+      const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
 
-        if (totalItems > 12) {
-          stackedContainer.style.flexDirection = 'row';
-          stackedContainer.classList.remove('col-lg-2');
-          stackedContainer.classList.add('col-lg-4');
-          convertToPDF.style.flex = '1 1 50%';
-          convertFromPDF.style.flex = '1 1 50%';
+      if (items.length === 0) {
+        if (
+          element.previousElementSibling &&
+          element.previousElementSibling.classList.contains('navbar-item') &&
+          element.previousElementSibling.classList.contains('nav-item-separator')
+        ) {
+          element.previousElementSibling.remove();
         }
+        element.remove();
       }
     }
+  });
+}
 
-    document.querySelectorAll('.navbar-item').forEach((element) => {
-      if (!element.closest('#stacked')) {
-        const dropdownItems = element.querySelectorAll('.dropdown-item');
-        const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
+window.tooltipSetup = () => {
+  const tooltipElements = document.querySelectorAll("[title]");
 
-        if (items.length === 0) {
-          if (
-            element.previousElementSibling &&
-            element.previousElementSibling.classList.contains('navbar-item') &&
-            element.previousElementSibling.classList.contains('nav-item-separator')
-          ) {
-            element.previousElementSibling.remove();
-          }
-          element.remove();
-        }
-      }
+  tooltipElements.forEach((element) => {
+    const tooltipText = element.getAttribute("title");
+    element.removeAttribute("title");
+
+    const customTooltip = document.createElement("div");
+    customTooltip.className = "btn-tooltip";
+    customTooltip.textContent = tooltipText;
+
+    document.body.appendChild(customTooltip);
+
+    element.addEventListener("mouseenter", (event) => {
+      customTooltip.style.display = "block";
+      customTooltip.style.left = `${event.pageX + 10}px`; // Position tooltip slightly away from the cursor
+      customTooltip.style.top = `${event.pageY + 10}px`;
+    });
+
+    // Update the position of the tooltip as the user moves the mouse
+    element.addEventListener("mousemove", (event) => {
+      customTooltip.style.left = `${event.pageX + 10}px`;
+      customTooltip.style.top = `${event.pageY + 10}px`;
+    });
+
+
+    // Hide the tooltip when the mouse leaves
+    element.addEventListener("mouseleave", () => {
+      customTooltip.style.display = "none";
     });
   });
 }
+document.addEventListener("DOMContentLoaded", () => {
+  tooltipSetup();
+});
diff --git a/src/main/resources/static/js/pages/home.js b/src/main/resources/static/js/pages/home.js
new file mode 100644
index 000000000..1be5e7969
--- /dev/null
+++ b/src/main/resources/static/js/pages/home.js
@@ -0,0 +1,182 @@
+/*<![CDATA[*/
+
+document.addEventListener('DOMContentLoaded', function () {
+  if (window.analyticsPromptBoolean) {
+    const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
+    analyticsModal.show();
+  }
+});
+/*]]>*/
+function setAnalytics(enabled) {
+  fetchWithCsrf('api/v1/settings/update-enable-analytics', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(enabled),
+  })
+    .then((response) => {
+      if (response.status === 200) {
+        console.log('Analytics setting updated successfully');
+        bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
+      } else if (response.status === 208) {
+        console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
+        alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
+      } else {
+        throw new Error('Unexpected response status: ' + response.status);
+      }
+    })
+    .catch((error) => {
+      console.error('Error updating analytics setting:', error);
+      alert('An error occurred while updating the analytics setting. Please try again.');
+    });
+}
+
+updateFavoriteIcons();
+
+const defaultView = localStorage.getItem('defaultView') || 'home'; // Default to "home"
+if (defaultView === 'home-legacy') {
+  window.location.href = '/home-legacy'; // Redirect to legacy view
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const surveyVersion = '2.0';
+  const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
+  const dontShowAgain = document.getElementById('dontShowAgain');
+  const takeSurveyButton = document.getElementById('takeSurvey');
+
+  const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
+
+  // Check if survey version changed and reset page views if it did
+  const storedVersion = localStorage.getItem('surveyVersion');
+  if (storedVersion && storedVersion !== surveyVersion) {
+    localStorage.setItem('pageViews', '0');
+  }
+
+  let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
+
+  pageViews++;
+  localStorage.setItem('pageViews', pageViews.toString());
+
+  function shouldShowSurvey() {
+    if (localStorage.getItem('dontShowSurvey') === 'true' || localStorage.getItem('surveyTaken') === 'true') {
+      return false;
+    }
+
+    // If survey version changed and we hit a threshold, show the survey
+    if (localStorage.getItem('surveyVersion') !== surveyVersion && viewThresholds.includes(pageViews)) {
+      return true;
+    }
+
+    return viewThresholds.includes(pageViews);
+  }
+
+  if (shouldShowSurvey()) {
+    modal.show();
+  }
+
+  dontShowAgain.addEventListener('change', function () {
+    if (this.checked) {
+      localStorage.setItem('dontShowSurvey', 'true');
+      localStorage.setItem('surveyVersion', surveyVersion);
+    } else {
+      localStorage.removeItem('dontShowSurvey');
+      localStorage.removeItem('surveyVersion');
+    }
+  });
+
+  takeSurveyButton.addEventListener('click', function () {
+    localStorage.setItem('surveyTaken', 'true');
+    localStorage.setItem('surveyVersion', surveyVersion);
+    modal.hide();
+  });
+
+  if (localStorage.getItem('dontShowSurvey')) {
+    modal.hide();
+  }
+
+  if (window.location.pathname === '/') {
+    const navItem = document.getElementById('navItemToHide');
+    if (navItem) {
+      navItem.style.display = 'none';
+    }
+  }
+  updateFavoritesDropdown();
+});
+function setAsDefault(value) {
+  localStorage.setItem('defaultView', value);
+  console.log(`Default view set to: ${value}`);
+}
+
+function adjustVisibleElements() {
+  const container = document.querySelector('.recent-features');
+  const subElements = Array.from(container.children);
+
+  let totalWidth = 0;
+  const containerWidth = container.offsetWidth;
+
+  subElements.forEach((element) => {
+    totalWidth += 12 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+    if (totalWidth > window.innerWidth) {
+      element.style.display = 'none';
+    } else {
+      element.style.display = 'block';
+    }
+  });
+}
+
+function adjustContainerAlignment() {
+  console.log('Adjusting container alignment');
+
+  document.querySelectorAll('.features-container').forEach((parent) => {
+    parent.querySelectorAll('.feature-rows').forEach((container) => {
+      const childElements = Array.from(container.children);
+
+      const containerWidth = parent.offsetWidth;
+      console.log(containerWidth < 32 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+      if (containerWidth < 32 * parseFloat(getComputedStyle(document.documentElement).fontSize)) {
+        container.classList.add('single-column');
+      } else {
+        container.classList.remove('single-column');
+      }
+    });
+  });
+}
+function toolsManager() {
+  const convertToPDF = document.querySelector('#groupConvertTo');
+  const convertFromPDF = document.querySelector('#groupConvertFrom');
+
+  if (convertToPDF && convertFromPDF) {
+    const itemsTo = Array.from(convertToPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
+    const itemsFrom = Array.from(convertFromPDF.querySelectorAll('.dropdown-item')).filter(
+      (item) => !item.querySelector('hr.dropdown-divider')
+    );
+
+    const totalItems = itemsTo.length + itemsFrom.length;
+
+    if (totalItems > 12) {
+      document.querySelectorAll('#convertGroup').forEach((element) => element.remove());
+      document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'flex'));
+    } else {
+      document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'flex'));
+      document.querySelectorAll('#groupConvertTo').forEach((element) => element.remove());
+      document.querySelectorAll('#groupConvertFrom').forEach((element) => element.remove());
+    }
+  }
+}
+document.addEventListener('DOMContentLoaded', function () {
+  toolsManager();
+});
+
+window.addEventListener('load', () => {
+  adjustContainerAlignment();
+  adjustVisibleElements();
+});
+window.addEventListener('resize', () => {
+  adjustContainerAlignment();
+  adjustVisibleElements();
+});
diff --git a/src/main/resources/static/js/redact.js b/src/main/resources/static/js/redact.js
index 3fdc4c3fc..5a09a1a58 100644
--- a/src/main/resources/static/js/redact.js
+++ b/src/main/resources/static/js/redact.js
@@ -1,5 +1,5 @@
-import { PDFViewerApplication } from "../pdfjs-legacy/js/viewer.mjs";
-import UUID from "./uuid.js";
+import {PDFViewerApplication} from '../pdfjs-legacy/js/viewer.mjs';
+import UUID from './uuid.js';
 
 let zoomScaleValue = 1.0;
 
@@ -10,38 +10,30 @@ const doNothing = () => {};
 
 function addRedactedPagePreview(pagesSelector) {
   document.querySelectorAll(pagesSelector).forEach((page) => {
-    let textLayer = page.querySelector(".textLayer");
-    if (textLayer) textLayer.classList.add("redacted-page-preview");
+    let textLayer = page.querySelector('.textLayer');
+    if (textLayer) textLayer.classList.add('redacted-page-preview');
   });
 }
 
 function addRedactedThumbnailPreview(sidebarPagesSelector) {
   document.querySelectorAll(sidebarPagesSelector).forEach((thumbnail) => {
-    thumbnail.classList.add("redacted-thumbnail-preview");
-    let thumbnailImage = thumbnail.querySelector(".thumbnailImage");
-    if (thumbnailImage)
-      thumbnailImage.classList.add("redacted-thumbnail-image-preview");
+    thumbnail.classList.add('redacted-thumbnail-preview');
+    let thumbnailImage = thumbnail.querySelector('.thumbnailImage');
+    if (thumbnailImage) thumbnailImage.classList.add('redacted-thumbnail-image-preview');
   });
 }
 
 function removeRedactedPagePreview() {
-  document
-    .querySelectorAll(".textLayer")
-    .forEach((textLayer) =>
-      textLayer.classList.remove("redacted-page-preview")
-    );
-  document
-    .querySelectorAll("#thumbnailView > a > div.thumbnail")
-    .forEach((thumbnail) => {
-      thumbnail.classList.remove("redacted-thumbnail-preview");
-      let thumbnailImage = thumbnail.querySelector(".thumbnailImage");
-      if (thumbnailImage)
-        thumbnailImage.classList.remove("redacted-thumbnail-image-preview");
-    });
+  document.querySelectorAll('.textLayer').forEach((textLayer) => textLayer.classList.remove('redacted-page-preview'));
+  document.querySelectorAll('#thumbnailView > a > div.thumbnail').forEach((thumbnail) => {
+    thumbnail.classList.remove('redacted-thumbnail-preview');
+    let thumbnailImage = thumbnail.querySelector('.thumbnailImage');
+    if (thumbnailImage) thumbnailImage.classList.remove('redacted-thumbnail-image-preview');
+  });
 }
 
 function extractPagesDetailed(pagesInput, totalPageCount) {
-  let parts = pagesInput.split(",").filter((s) => s);
+  let parts = pagesInput.split(',').filter((s) => s);
   let pagesDetailed = {
     numbers: new Set(),
     functions: new Set(),
@@ -50,30 +42,23 @@ function extractPagesDetailed(pagesInput, totalPageCount) {
   };
   for (let part of parts) {
     let trimmedPart = part.trim();
-    if ("all" == trimmedPart) {
+    if ('all' == trimmedPart) {
       pagesDetailed.all = true;
       return pagesDetailed;
     } else if (isValidFunction(trimmedPart)) {
       pagesDetailed.functions.add(formatNFunction(trimmedPart));
-    } else if (trimmedPart.includes("-")) {
+    } else if (trimmedPart.includes('-')) {
       let range = trimmedPart
-        .replaceAll(" ", "")
-        .split("-")
+        .replaceAll(' ', '')
+        .split('-')
         .filter((s) => s);
-      if (
-        range &&
-        range.length == 2 &&
-        range[0].trim() > 0 &&
-        range[1].trim() > 0
-      )
+      if (range && range.length == 2 && range[0].trim() > 0 && range[1].trim() > 0)
         pagesDetailed.ranges.add({
           low: range[0].trim(),
           high: range[1].trim(),
         });
     } else if (isPageNumber(trimmedPart)) {
-      pagesDetailed.numbers.add(
-        trimmedPart <= totalPageCount ? trimmedPart : totalPageCount
-      );
+      pagesDetailed.numbers.add(trimmedPart <= totalPageCount ? trimmedPart : totalPageCount);
     }
   }
 
@@ -81,52 +66,44 @@ function extractPagesDetailed(pagesInput, totalPageCount) {
 }
 
 function formatNFunction(expression) {
-  let result = insertMultiplicationBeforeN(expression.replaceAll(" ", ""));
+  let result = insertMultiplicationBeforeN(expression.replaceAll(' ', ''));
   let multiplyByOpeningRoundBracketPattern = /([0-9n)])\(/g; // example: n(n-1), 9(n-1), (n-1)(n-2)
-  result = result.replaceAll(multiplyByOpeningRoundBracketPattern, "$1*(");
+  result = result.replaceAll(multiplyByOpeningRoundBracketPattern, '$1*(');
 
   let multiplyByClosingRoundBracketPattern = /\)([0-9n)])/g; // example: (n-1)n, (n-1)9, (n-1)(n-2)
-  result = result.replaceAll(multiplyByClosingRoundBracketPattern, ")*$1");
+  result = result.replaceAll(multiplyByClosingRoundBracketPattern, ')*$1');
   return result;
 }
 
 function insertMultiplicationBeforeN(expression) {
-  let result = expression.replaceAll(/(\d)n/g, "$1*n");
+  let result = expression.replaceAll(/(\d)n/g, '$1*n');
   while (result.match(/nn/)) {
-    result = result.replaceAll(/nn/g, "n*n"); // From nn -> n*n
+    result = result.replaceAll(/nn/g, 'n*n'); // From nn -> n*n
   }
   return result;
 }
 
 function validatePages(pages) {
-  let parts = pages.split(",").filter((s) => s);
+  let parts = pages.split(',').filter((s) => s);
   let errors = [];
   for (let part of parts) {
     let trimmedPart = part.trim();
-    if ("all" == trimmedPart) continue;
-    else if (trimmedPart.includes("n")) {
+    if ('all' == trimmedPart) continue;
+    else if (trimmedPart.includes('n')) {
       if (!isValidFunction(trimmedPart))
-        errors.push(
-          `${trimmedPart} is an invalid function, it should consist of digits 0-9, n, *, -, /, (, ), \\.`
-        );
-    } else if (trimmedPart.includes("-")) {
-      let range = trimmedPart.split("-").filter((s) => s);
+        errors.push(`${trimmedPart} is an invalid function, it should consist of digits 0-9, n, *, -, /, (, ), \\.`);
+    } else if (trimmedPart.includes('-')) {
+      let range = trimmedPart.split('-').filter((s) => s);
       if (!range || range.length != 2)
-        errors.push(
-          `${trimmedPart} is an invalid range, it should consist of from-to, example: 1-5`
-        );
+        errors.push(`${trimmedPart} is an invalid range, it should consist of from-to, example: 1-5`);
       else if (range[0].trim() <= 0 || range[1].trim() <= 0)
-        errors.push(
-          `${trimmedPart} has invalid range(s), page numbers should be positive.`
-        );
+        errors.push(`${trimmedPart} has invalid range(s), page numbers should be positive.`);
     } else if (!isPageNumber(trimmedPart)) {
-      errors.push(
-        `${trimmedPart} is invalid, it should either be a function, page number or a range.`
-      );
+      errors.push(`${trimmedPart} is invalid, it should either be a function, page number or a range.`);
     }
   }
 
-  return { errors };
+  return {errors};
 }
 
 function isPageNumber(page) {
@@ -134,108 +111,102 @@ function isPageNumber(page) {
 }
 
 function isValidFunction(part) {
-  return part.includes("n") && /[0-9n+\-*/() ]+$/.test(part);
+  return part.includes('n') && /[0-9n+\-*/() ]+$/.test(part);
 }
 
 function hideContainer(container) {
-  container?.classList.add("d-none");
+  container?.classList.add('d-none');
 }
 
 const RedactionModes = Object.freeze({
-  DRAWING: Symbol("drawing"),
-  TEXT: Symbol("text"),
-  NONE: Symbol("none"),
+  DRAWING: Symbol('drawing'),
+  TEXT: Symbol('text'),
+  NONE: Symbol('none'),
 });
 
 function removePDFJSButtons() {
-  document.getElementById("print")?.remove();
-  document.getElementById("download")?.remove();
-  document.getElementById("editorStamp")?.remove();
-  document.getElementById("editorFreeText")?.remove();
-  document.getElementById("editorInk")?.remove();
-  document.getElementById("secondaryToolbarToggle")?.remove();
-  document.getElementById("openFile")?.remove();
+  document.getElementById('print')?.remove();
+  document.getElementById('download')?.remove();
+  document.getElementById('editorStamp')?.remove();
+  document.getElementById('editorFreeText')?.remove();
+  document.getElementById('editorInk')?.remove();
+  document.getElementById('secondaryToolbarToggle')?.remove();
+  document.getElementById('openFile')?.remove();
 }
 
 function hideInitialPage() {
-  document.body.style.overflowY = "hidden";
-  let redactionsFormContainer = document.getElementById(
-    "redactionFormContainer"
-  );
+  document.body.style.overflowY = 'hidden';
+  let redactionsFormContainer = document.getElementById('redactionFormContainer');
   for (
     let el = redactionsFormContainer.previousElementSibling;
     el && el instanceof HTMLBRElement;
     el = el.previousElementSibling
   ) {
-    el.classList.add("d-none");
+    el.classList.add('d-none');
+  }
+  redactionsFormContainer.classList.add('d-none');
+  const footer = document.getElementsByTagName('footer')[0];
+
+  // Check if the parent of the footer has the id "viewerContainer"
+  if (footer.parentElement && footer.parentElement.id !== 'viewerContainer') {
+    footer.classList.add('d-none');
   }
-  redactionsFormContainer.classList.add("d-none");
-  document.getElementsByTagName("footer")[0].classList.add("d-none");
 }
 
-window.addEventListener("load", (e) => {
+window.addEventListener('load', (e) => {
   let isChromium =
     !!window.chrome ||
-    (!!navigator.userAgentData &&
-      navigator.userAgentData.brands.some((data) => data.brand == "Chromium"));
+    (!!navigator.userAgentData && navigator.userAgentData.brands.some((data) => data.brand == 'Chromium'));
 
   let isSafari =
     /constructor/i.test(window.HTMLElement) ||
     (function (p) {
-      return p.toString() === "[object SafariRemoteNotification]";
-    })(
-      !window["safari"] ||
-        (typeof safari !== "undefined" && window["safari"].pushNotification)
-    );
+      return p.toString() === '[object SafariRemoteNotification]';
+    })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
   let isWebkit = navigator.userAgent.search(/webkit/i) > 0;
   let isGecko = navigator.userAgent.search(/gecko/i) > 0;
-  let isFirefox = typeof InstallTrigger !== "undefined";
+  let isFirefox = typeof InstallTrigger !== 'undefined';
 
-  let hiddenInput = document.getElementById("fileInput");
-  let outerContainer = document.getElementById("outerContainer");
-  let printContainer = document.getElementById("printContainer");
+  let hiddenInput = document.getElementById('fileInput');
+  let outerContainer = document.getElementById('outerContainer');
+  let printContainer = document.getElementById('printContainer');
 
-  let toolbarViewerRight = document.getElementById("toolbarViewerRight");
-  let showMoreBtn = document.getElementById("showMoreBtn");
+  let toolbarViewerRight = document.getElementById('toolbarViewerRight');
+  let showMoreBtn = document.getElementById('showMoreBtn');
 
   window.onresize = (e) => {
-    if (window.innerWidth > 1125 && showMoreBtn.classList.contains("toggled")) {
+    if (window.innerWidth > 1125 && showMoreBtn.classList.contains('toggled')) {
       showMoreBtn.click();
-    } else if (
-      window.innerWidth > 1125 &&
-      toolbarViewerRight.hasAttribute("style")
-    ) {
-      toolbarViewerRight.style.removeProperty("display");
+    } else if (window.innerWidth > 1125 && toolbarViewerRight.hasAttribute('style')) {
+      toolbarViewerRight.style.removeProperty('display');
     }
   };
 
   showMoreBtn.onclick = (e) => {
-    if (showMoreBtn.classList.contains("toggled")) {
-      toolbarViewerRight.style.display = "none";
-      showMoreBtn.classList.remove("toggled");
+    if (showMoreBtn.classList.contains('toggled')) {
+      toolbarViewerRight.style.display = 'none';
+      showMoreBtn.classList.remove('toggled');
     } else {
-      toolbarViewerRight.style.display = "flex";
-      showMoreBtn.classList.add("toggled");
+      toolbarViewerRight.style.display = 'flex';
+      showMoreBtn.classList.add('toggled');
     }
   };
 
-  let viewer = document.getElementById("viewer");
+  let viewer = document.getElementById('viewer');
 
   hiddenInput.files = undefined;
   let redactionMode = RedactionModes.NONE;
 
   let redactions = [];
 
-  let redactionsInput = document.getElementById("redactions-input");
+  let redactionsInput = document.getElementById('redactions-input');
 
-  let redactionsPalette = document.getElementById("redactions-palette");
-  let redactionsPaletteInput = redactionsPalette.querySelector("input");
+  let redactionsPalette = document.getElementById('redactions-palette');
+  let redactionsPaletteInput = redactionsPalette.querySelector('input');
 
-  let redactionsPaletteContainer = document.getElementById(
-    "redactionsPaletteContainer"
-  );
+  let redactionsPaletteContainer = document.getElementById('redactionsPaletteContainer');
 
-  let applyRedactionBtn = document.getElementById("apply-redaction");
+  let applyRedactionBtn = document.getElementById('apply-redaction');
 
   let redactedPagesDetails = {
     numbers: new Set(),
@@ -243,38 +214,33 @@ window.addEventListener("load", (e) => {
     functions: new Set(),
     all: false,
   };
-  let pageBasedRedactionBtn = document.getElementById("pageBasedRedactionBtn");
-  let pageBasedRedactionOverlay = document.getElementById(
-    "pageBasedRedactionOverlay"
-  );
-  pageBasedRedactionBtn.onclick = (e) =>
-    pageBasedRedactionOverlay.classList.remove("d-none");
+  let pageBasedRedactionBtn = document.getElementById('pageBasedRedactionBtn');
+  let pageBasedRedactionOverlay = document.getElementById('pageBasedRedactionOverlay');
+  pageBasedRedactionBtn.onclick = (e) => pageBasedRedactionOverlay.classList.remove('d-none');
 
-  pageBasedRedactionOverlay.querySelector("input[type=text]").onchange = (
-    e
-  ) => {
+  pageBasedRedactionOverlay.querySelector('input[type=text]').onchange = (e) => {
     let input = e.target;
     let parentElement = input.parentElement;
 
     resetFieldFeedbackMessages(input, parentElement);
 
     let value = input.value.trim();
-    let { errors } = validatePages(value);
+    let {errors} = validatePages(value);
     if (errors && errors.length > 0) {
-      applyPageRedactionBtn.disabled = "true";
+      applyPageRedactionBtn.disabled = 'true';
       displayFieldErrorMessages(input, errors);
     } else {
-      applyPageRedactionBtn.removeAttribute("disabled");
-      input.classList.add("is-valid");
+      applyPageRedactionBtn.removeAttribute('disabled');
+      input.classList.add('is-valid');
     }
   };
 
-  let applyPageRedactionBtn = document.getElementById("applyPageRedactionBtn");
+  let applyPageRedactionBtn = document.getElementById('applyPageRedactionBtn');
   applyPageRedactionBtn.onclick = (e) => {
-    pageBasedRedactionOverlay.querySelectorAll("input").forEach((input) => {
-      const id = input.getAttribute("data-for");
-      if (id == "pageNumbers") {
-        let { errors } = validatePages(input.value);
+    pageBasedRedactionOverlay.querySelectorAll('input').forEach((input) => {
+      const id = input.getAttribute('data-for');
+      if (id == 'pageNumbers') {
+        let {errors} = validatePages(input.value);
 
         resetFieldFeedbackMessages(input, input.parentElement);
 
@@ -282,30 +248,27 @@ window.addEventListener("load", (e) => {
           applyPageRedactionBtn.disabled = true;
           displayFieldErrorMessages(input, errors);
         } else {
-          pageBasedRedactionOverlay.classList.add("d-none");
-          applyRedactionBtn.removeAttribute("disabled");
-          input.classList.remove("is-valid");
+          pageBasedRedactionOverlay.classList.add('d-none');
+          applyRedactionBtn.removeAttribute('disabled');
+          input.classList.remove('is-valid');
 
           let totalPagesCount = PDFViewerApplication.pdfViewer.pagesCount;
-          let pagesDetailed = extractPagesDetailed(
-            input.value,
-            totalPagesCount
-          );
+          let pagesDetailed = extractPagesDetailed(input.value, totalPagesCount);
           redactedPagesDetails = pagesDetailed;
           addPageRedactionPreviewToPages(pagesDetailed, totalPagesCount);
         }
-      } else if (id == "pageRedactColor") setPageRedactionColor(input.value);
+      } else if (id == 'pageRedactColor') setPageRedactionColor(input.value);
       let formInput = document.getElementById(id);
       if (formInput) formInput.value = input.value;
     });
   };
 
-  let closePageRedactionBtn = document.getElementById("closePageRedactionBtn");
+  let closePageRedactionBtn = document.getElementById('closePageRedactionBtn');
   closePageRedactionBtn.onclick = (e) => {
-    pageBasedRedactionOverlay.classList.add("d-none");
-    pageBasedRedactionOverlay.querySelectorAll("input").forEach((input) => {
-      const id = input.getAttribute("data-for");
-      if (id == "pageNumbers") {
+    pageBasedRedactionOverlay.classList.add('d-none');
+    pageBasedRedactionOverlay.querySelectorAll('input').forEach((input) => {
+      const id = input.getAttribute('data-for');
+      if (id == 'pageNumbers') {
         resetFieldFeedbackMessages(input, input.parentElement);
       }
       let formInput = document.getElementById(id);
@@ -313,32 +276,30 @@ window.addEventListener("load", (e) => {
     });
   };
 
-  let pdfToImageCheckbox = document.getElementById("convertPDFToImage");
+  let pdfToImageCheckbox = document.getElementById('convertPDFToImage');
 
-  let pdfToImageBtn = document.getElementById("pdfToImageBtn");
+  let pdfToImageBtn = document.getElementById('pdfToImageBtn');
   pdfToImageBtn.onclick = (e) => {
-    pdfToImageBtn.classList.toggle("btn-success");
-    pdfToImageBtn.classList.toggle("btn-danger");
+    pdfToImageBtn.classList.toggle('btn-success');
+    pdfToImageBtn.classList.toggle('btn-danger');
     pdfToImageCheckbox.checked = !pdfToImageCheckbox.checked;
   };
 
-  let fileChooser = document.getElementsByClassName("custom-file-chooser")[0];
-  let fileChooserInput = fileChooser.querySelector(
-    `#${fileChooser.getAttribute("data-bs-element-id")}`
-  );
+  let fileChooser = document.getElementsByClassName('custom-file-chooser')[0];
+  let fileChooserInput = fileChooser.querySelector(`#${fileChooser.getAttribute('data-bs-element-id')}`);
 
-  let uploadButton = document.getElementById("uploadBtn");
+  let uploadButton = document.getElementById('uploadBtn');
   uploadButton.onclick = (e) => fileChooserInput.click();
 
-  document.addEventListener("file-input-change", (e) => {
+  document.addEventListener('file-input-change', (e) => {
     redactions = [];
     _setRedactionsInput(redactions);
   });
 
-  let submitBtn = document.getElementById("submitBtn");
+  let submitBtn = document.getElementById('submitBtn');
 
-  let downloadBtn = document.getElementById("downloadBtn");
-  let downloadBtnIcon = document.getElementById("downloadBtnIcon");
+  let downloadBtn = document.getElementById('downloadBtn');
+  let downloadBtnIcon = document.getElementById('downloadBtnIcon');
 
   downloadBtn.onclick = (e) => {
     submitBtn.click();
@@ -347,13 +308,13 @@ window.addEventListener("load", (e) => {
 
   function _showOrHideLoadingSpinner() {
     if (!submitBtn.disabled) {
-      downloadBtnIcon.innerHTML = "download";
-      downloadBtnIcon.classList.remove("spin-animation");
+      downloadBtnIcon.innerHTML = 'download';
+      downloadBtnIcon.classList.remove('spin-animation');
       return;
     }
 
-    downloadBtnIcon.innerHTML = "progress_activity";
-    downloadBtnIcon.classList.add("spin-animation");
+    downloadBtnIcon.innerHTML = 'progress_activity';
+    downloadBtnIcon.classList.add('spin-animation');
     setTimeout(_showOrHideLoadingSpinner, 500);
   }
 
@@ -361,8 +322,7 @@ window.addEventListener("load", (e) => {
 
   viewer.onmouseup = (e) => {
     if (redactionMode !== RedactionModes.TEXT) return;
-    const containsText =
-      window.getSelection() && window.getSelection().toString() != "";
+    const containsText = window.getSelection() && window.getSelection().toString() != '';
     applyRedactionBtn.disabled = !containsText;
   };
 
@@ -377,117 +337,102 @@ window.addEventListener("load", (e) => {
 
   redactionsPaletteInput.onchange = (e) => {
     let color = e.target.value;
-    redactionsPalette.style.setProperty("--palette-color", color);
+    redactionsPalette.style.setProperty('--palette-color', color);
   };
 
-  document.addEventListener("file-input-change", (e) => {
-    let fileChooser = document.getElementsByClassName("custom-file-chooser")[0];
-    let fileChooserInput = fileChooser.querySelector(
-      `#${fileChooser.getAttribute("data-bs-element-id")}`
-    );
+  document.addEventListener('file-input-change', (e) => {
+    let fileChooser = document.getElementsByClassName('custom-file-chooser')[0];
+    let fileChooserInput = fileChooser.querySelector(`#${fileChooser.getAttribute('data-bs-element-id')}`);
 
     hiddenInput.files = fileChooserInput.files;
     if (!hiddenInput.files || hiddenInput.files.length === 0) {
       hideContainer(outerContainer);
       hideContainer(printContainer);
     } else {
-      outerContainer?.classList.remove("d-none");
-      printContainer?.classList.remove("d-none");
+      outerContainer?.classList.remove('d-none');
+      printContainer?.classList.remove('d-none');
       hideInitialPage();
     }
 
-    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+    hiddenInput.dispatchEvent(new Event('change', {bubbles: true}));
   });
 
   PDFViewerApplication.downloadOrSave = doNothing;
   PDFViewerApplication.triggerPrinting = doNothing;
 
   let redactionContainersDivs = {};
-  PDFViewerApplication.eventBus.on("pagerendered", (e) => {
+  PDFViewerApplication.eventBus.on('pagerendered', (e) => {
     removePDFJSButtons();
 
-    let textSelectionRedactionBtn = document.getElementById(
-      "man-text-select-redact"
-    );
-    let drawRedactionBtn = document.getElementById("man-shape-redact");
+    let textSelectionRedactionBtn = document.getElementById('man-text-select-redact');
+    let drawRedactionBtn = document.getElementById('man-shape-redact');
 
     textSelectionRedactionBtn.onclick = _handleTextSelectionRedactionBtnClick;
     drawRedactionBtn.onclick = _handleDrawRedactionBtnClick;
 
     let layer = e.source.textLayer.div;
-    layer.setAttribute("data-page", e.pageNumber);
-    if (
-      redactedPagesDetails.all ||
-      redactedPagesDetails.numbers.has(e.pageNumber)
-    ) {
-      layer.classList.add("redacted-page-preview");
+    layer.setAttribute('data-page', e.pageNumber);
+    if (redactedPagesDetails.all || redactedPagesDetails.numbers.has(e.pageNumber)) {
+      layer.classList.add('redacted-page-preview');
     } else {
-      layer.classList.remove("redacted-page-preview");
+      layer.classList.remove('redacted-page-preview');
     }
 
     zoomScaleValue = e.source.scale ? e.source.scale : e.source.pageScale;
-    document.documentElement.style.setProperty("--zoom-scale", zoomScaleValue);
+    document.documentElement.style.setProperty('--zoom-scale', zoomScaleValue);
 
-    let redactionsContainer = document.getElementById(
-      `redactions-container-${e.pageNumber}`
-    );
+    let redactionsContainer = document.getElementById(`redactions-container-${e.pageNumber}`);
     if (!redactionsContainer && !redactionContainersDivs[`${e.pageNumber}`]) {
-      redactionsContainer = document.createElement("div");
-      redactionsContainer.style.position = "relative";
-      redactionsContainer.style.height = "100%";
-      redactionsContainer.style.width = "100%";
+      redactionsContainer = document.createElement('div');
+      redactionsContainer.style.position = 'relative';
+      redactionsContainer.style.height = '100%';
+      redactionsContainer.style.width = '100%';
       redactionsContainer.id = `redactions-container-${e.pageNumber}`;
-      redactionsContainer.style.setProperty("z-index", "unset");
+      redactionsContainer.style.setProperty('z-index', 'unset');
 
       layer.appendChild(redactionsContainer);
       redactionContainersDivs[`${e.pageNumber}`] = redactionsContainer;
-    } else if (
-      !redactionsContainer &&
-      redactionContainersDivs[`${e.pageNumber}`]
-    ) {
+    } else if (!redactionsContainer && redactionContainersDivs[`${e.pageNumber}`]) {
       redactionsContainer = redactionContainersDivs[`${e.pageNumber}`];
 
       layer.appendChild(redactionsContainer);
       // Dispatch event to update text layer references for elements' events
-      redactionsContainer
-        .querySelectorAll(".selected-wrapper")
-        .forEach((area) =>
-          area.dispatchEvent(
-            new CustomEvent("textLayer-reference-changed", {
-              bubbles: true,
-              detail: { textLayer: layer },
-            })
-          )
-        );
+      redactionsContainer.querySelectorAll('.selected-wrapper').forEach((area) =>
+        area.dispatchEvent(
+          new CustomEvent('textLayer-reference-changed', {
+            bubbles: true,
+            detail: {textLayer: layer},
+          })
+        )
+      );
     }
 
     document.onpointerup = (e) => {
       if (drawingLayer && e.target != drawingLayer && e.button == 0)
-        drawingLayer.dispatchEvent(new Event("external-pointerup"));
+        drawingLayer.dispatchEvent(new Event('external-pointerup'));
     };
 
     initDraw(layer, redactionsContainer);
 
     function _handleTextSelectionRedactionBtnClick(e) {
-      if (textSelectionRedactionBtn.classList.contains("toggled")) {
+      if (textSelectionRedactionBtn.classList.contains('toggled')) {
         resetTextSelection();
       } else {
         resetDrawRedactions();
-        textSelectionRedactionBtn.classList.add("toggled");
+        textSelectionRedactionBtn.classList.add('toggled');
         redactionMode = RedactionModes.TEXT;
-        const containsText =
-          window.getSelection() && window.getSelection().toString() != "";
+        const containsText = window.getSelection() && window.getSelection().toString() != '';
         applyRedactionBtn.disabled = !containsText;
-        applyRedactionBtn.classList.remove("d-none");
+        applyRedactionBtn.classList.remove('d-none');
       }
     }
 
     function resetTextSelection() {
-      textSelectionRedactionBtn.classList.remove("toggled");
+      textSelectionRedactionBtn.classList.remove('toggled');
       redactionMode = RedactionModes.NONE;
       clearSelection();
       applyRedactionBtn.disabled = true;
-      applyRedactionBtn.classList.add("d-none");
+      applyRedactionBtn.classList.add('d-none');
     }
 
     function clearSelection() {
@@ -506,35 +451,23 @@ window.addEventListener("load", (e) => {
     }
 
     function _handleDrawRedactionBtnClick(e) {
-      if (drawRedactionBtn.classList.contains("toggled")) {
+      if (drawRedactionBtn.classList.contains('toggled')) {
         resetDrawRedactions();
       } else {
         resetTextSelection();
-        drawRedactionBtn.classList.add("toggled");
-        document.documentElement.style.setProperty(
-          "--textLayer-pointer-events",
-          "none"
-        );
-        document.documentElement.style.setProperty(
-          "--textLayer-user-select",
-          "none"
-        );
+        drawRedactionBtn.classList.add('toggled');
+        document.documentElement.style.setProperty('--textLayer-pointer-events', 'none');
+        document.documentElement.style.setProperty('--textLayer-user-select', 'none');
         redactionMode = RedactionModes.DRAWING;
       }
     }
 
     function resetDrawRedactions() {
       redactionMode = RedactionModes.NONE;
-      drawRedactionBtn.classList.remove("toggled");
-      document.documentElement.style.setProperty(
-        "--textLayer-pointer-events",
-        "auto"
-      );
-      document.documentElement.style.setProperty(
-        "--textLayer-user-select",
-        "auto"
-      );
-      window.dispatchEvent(new CustomEvent("reset-drawing", { bubbles: true }));
+      drawRedactionBtn.classList.remove('toggled');
+      document.documentElement.style.setProperty('--textLayer-pointer-events', 'auto');
+      document.documentElement.style.setProperty('--textLayer-user-select', 'auto');
+      window.dispatchEvent(new CustomEvent('reset-drawing', {bubbles: true}));
     }
 
     function initDraw(canvas, redactionsContainer) {
@@ -547,28 +480,22 @@ window.addEventListener("load", (e) => {
       let element = null;
       let drawnRedaction = null;
 
-      window.addEventListener("reset-drawing", (e) => {
+      window.addEventListener('reset-drawing', (e) => {
         _clearDrawing();
-        canvas.style.cursor = "default";
-        document.documentElement.style.setProperty(
-          "--textLayer-pointer-events",
-          "auto"
-        );
-        document.documentElement.style.setProperty(
-          "--textLayer-user-select",
-          "auto"
-        );
+        canvas.style.cursor = 'default';
+        document.documentElement.style.setProperty('--textLayer-pointer-events', 'auto');
+        document.documentElement.style.setProperty('--textLayer-user-select', 'auto');
       });
 
-      window.addEventListener("drawing-entered", (e) => {
+      window.addEventListener('drawing-entered', (e) => {
         let target = e.detail?.target;
         if (canvas === target) return;
         _clearDrawing();
       });
 
-      window.addEventListener("cancel-drawing", (e) => {
+      window.addEventListener('cancel-drawing', (e) => {
         _clearDrawing();
-        canvas.style.cursor = "default";
+        canvas.style.cursor = 'default';
       });
 
       function setMousePosition(e) {
@@ -586,18 +513,16 @@ window.addEventListener("load", (e) => {
       }
 
       window.onkeydown = (e) => {
-        if (e.key === "Escape" && redactionMode === RedactionModes.DRAWING) {
-          window.dispatchEvent(
-            new CustomEvent("cancel-drawing", { bubbles: true })
-          );
+        if (e.key === 'Escape' && redactionMode === RedactionModes.DRAWING) {
+          window.dispatchEvent(new CustomEvent('cancel-drawing', {bubbles: true}));
         }
       };
 
       canvas.onpointerenter = (e) => {
         window.dispatchEvent(
-          new CustomEvent("drawing-entered", {
+          new CustomEvent('drawing-entered', {
             bubbles: true,
-            detail: { target: canvas },
+            detail: {target: canvas},
           })
         );
       };
@@ -608,19 +533,19 @@ window.addEventListener("load", (e) => {
 
         if (element !== null) {
           _saveAndResetDrawnRedaction();
-          console.log("finished.");
+          console.log('finished.');
         }
       };
 
-      canvas.addEventListener("external-pointerup", (e) => {
+      canvas.addEventListener('external-pointerup', (e) => {
         if (element != null) {
           _saveAndResetDrawnRedaction();
         }
       });
 
       canvas.onpointerleave = (e) => {
-        let ev = copyEvent(e, "pointerleave");
-        let { left, top } = calculateMouseCoordinateToRotatedBox(canvas, e);
+        let ev = copyEvent(e, 'pointerleave');
+        let {left, top} = calculateMouseCoordinateToRotatedBox(canvas, e);
 
         ev.layerX = left;
         ev.offsetX = left;
@@ -640,13 +565,10 @@ window.addEventListener("load", (e) => {
 
         if (element == null) {
           if (redactionMode !== RedactionModes.DRAWING) {
-            console.warn(
-              "Drawing attempt when redaction mode is",
-              redactionMode.description
-            );
+            console.warn('Drawing attempt when redaction mode is', redactionMode.description);
             return;
           }
-          console.log("begun.");
+          console.log('begun.');
           _captureAndDrawStartingPointOfDrawnRedaction();
         }
       };
@@ -692,14 +614,14 @@ window.addEventListener("load", (e) => {
         if (!element) return;
         if (
           !element.style.height ||
-          element.style.height.includes("(0px * var") ||
+          element.style.height.includes('(0px * var') ||
           !element.style.width ||
-          element.style.width.includes("(0px * var")
+          element.style.width.includes('(0px * var')
         ) {
           element.remove();
         } else {
-          element.classList.add("selected-wrapper");
-          element.classList.remove("rectangle");
+          element.classList.add('selected-wrapper');
+          element.classList.remove('rectangle');
 
           addRedactionOverlay(element, drawnRedaction, canvas);
           redactions.push(drawnRedaction);
@@ -708,15 +630,15 @@ window.addEventListener("load", (e) => {
         drawingLayer = null;
         element = null;
         drawnRedaction = null;
-        canvas.style.cursor = "default";
+        canvas.style.cursor = 'default';
       }
 
       function _captureAndDrawStartingPointOfDrawnRedaction() {
         mouse.startX = mouse.x;
         mouse.startY = mouse.y;
 
-        element = document.createElement("div");
-        element.className = "rectangle";
+        element = document.createElement('div');
+        element.className = 'rectangle';
         drawingLayer = canvas;
 
         let left = mouse.x;
@@ -726,9 +648,9 @@ window.addEventListener("load", (e) => {
         element.style.top = _toCalcZoomPx(_scaleToDisplay(top));
 
         let scaleFactor = _getScaleFactor();
-        let color = redactionsPalette.style.getPropertyValue("--palette-color");
+        let color = redactionsPalette.style.getPropertyValue('--palette-color');
 
-        element.style.setProperty("--palette-color", color);
+        element.style.setProperty('--palette-color', color);
 
         drawnRedaction = {
           left: _scaleToPDF(left, scaleFactor),
@@ -736,34 +658,30 @@ window.addEventListener("load", (e) => {
           width: 0.0,
           height: 0.0,
           color: color,
-          pageNumber: parseInt(canvas.getAttribute("data-page")),
+          pageNumber: parseInt(canvas.getAttribute('data-page')),
           element: element,
           id: UUID.uuidv4(),
         };
 
         redactionsContainer.appendChild(element);
-        canvas.style.cursor = "crosshair";
+        canvas.style.cursor = 'crosshair';
       }
     }
   });
 
-  PDFViewerApplication.eventBus.on("rotationchanging", (e) => {
+  PDFViewerApplication.eventBus.on('rotationchanging', (e) => {
     if (!activeOverlay) return;
     hideOverlay();
   });
 
   function _getScaleFactor() {
-    return parseFloat(viewer.style.getPropertyValue("--scale-factor"));
+    return parseFloat(viewer.style.getPropertyValue('--scale-factor'));
   }
 
   function getTextLayer(element) {
     let current = element;
     while (current) {
-      if (
-        current instanceof HTMLDivElement &&
-        current.classList.contains("textLayer")
-      )
-        return current;
+      if (current instanceof HTMLDivElement && current.classList.contains('textLayer')) return current;
       current = current.parentElement;
     }
 
@@ -772,24 +690,19 @@ window.addEventListener("load", (e) => {
 
   document.onclick = (e) => {
     if (
-      (e.target &&
-        e.target.classList.contains("selected-wrapper") &&
-        e.target.firstChild == activeOverlay) ||
+      (e.target && e.target.classList.contains('selected-wrapper') && e.target.firstChild == activeOverlay) ||
       e.target == activeOverlay
     )
       return;
     if (activeOverlay) hideOverlay();
   };
 
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Delete" && activeOverlay) {
-      activeOverlay
-        .querySelector(".delete-icon")
-        ?.dispatchEvent(new Event("click", { bubbles: true }));
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Delete' && activeOverlay) {
+      activeOverlay.querySelector('.delete-icon')?.dispatchEvent(new Event('click', {bubbles: true}));
       return;
     }
-    const isRedactionShortcut =
-      e.ctrlKey && (e.key == "s" || e.key == "S" || e.code == "KeyS");
+    const isRedactionShortcut = e.ctrlKey && (e.key == 's' || e.key == 'S' || e.code == 'KeyS');
     if (!isRedactionShortcut || redactionMode !== RedactionModes.TEXT) return;
 
     redactTextSelection();
@@ -819,7 +732,7 @@ window.addEventListener("load", (e) => {
       height = rect.width;
     }
 
-    return { left, top, width, height };
+    return {left, top, width, height};
   }
 
   function redactTextSelection() {
@@ -830,28 +743,22 @@ window.addEventListener("load", (e) => {
     let textLayer = getTextLayer(range.startContainer);
     if (!textLayer) return;
 
-    const pageNumber = textLayer.getAttribute("data-page");
-    let redactionsArea = textLayer.querySelector(
-      `#redactions-container-${pageNumber}`
-    );
+    const pageNumber = textLayer.getAttribute('data-page');
+    let redactionsArea = textLayer.querySelector(`#redactions-container-${pageNumber}`);
     let textLayerRect = textLayer.getBoundingClientRect();
 
     let rects = range.getClientRects();
     let scaleFactor = _getScaleFactor();
 
-    let color = redactionsPalette.style.getPropertyValue("--palette-color");
+    let color = redactionsPalette.style.getPropertyValue('--palette-color');
 
-    let angle = textLayer.getAttribute("data-main-rotation");
+    let angle = textLayer.getAttribute('data-main-rotation');
     for (const rect of rects) {
       if (!rect || !rect.width || !rect.height) continue;
-      let redactionElement = document.createElement("div");
-      redactionElement.classList.add("selected-wrapper");
+      let redactionElement = document.createElement('div');
+      redactionElement.classList.add('selected-wrapper');
 
-      let { left, top, width, height } = rotateTextBox(
-        rect,
-        textLayerRect,
-        angle
-      );
+      let {left, top, width, height} = rotateTextBox(rect, textLayerRect, angle);
 
       let leftDisplayScaled = _scaleToDisplay(left);
       let topDisplayScaled = _scaleToDisplay(top);
@@ -876,7 +783,7 @@ window.addEventListener("load", (e) => {
 
       redactionElement.style.width = _toCalcZoomPx(widthDisplayScaled);
       redactionElement.style.height = _toCalcZoomPx(heightDisplayScaled);
-      redactionElement.style.setProperty("--palette-color", color);
+      redactionElement.style.setProperty('--palette-color', color);
 
       redactionsArea.appendChild(redactionElement);
 
@@ -892,8 +799,7 @@ window.addEventListener("load", (e) => {
   }
 
   function _scaleToPDF(value, scaleFactor) {
-    if (!scaleFactor)
-      scaleFactor = document.documentElement.getPropertyValue("--scale-factor");
+    if (!scaleFactor) scaleFactor = document.documentElement.getPropertyValue('--scale-factor');
     return value / scaleFactor;
   }
 
@@ -916,7 +822,7 @@ window.addEventListener("load", (e) => {
   }
 
   function addRedactionOverlay(redactionElement, redactionInfo, textLayer) {
-    let redactionOverlay = document.createElement("div");
+    let redactionOverlay = document.createElement('div');
 
     let deleteBtn = $(
       `<svg class="delete-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#e8eaed"><path d="M312-144q-29.7 0-50.85-21.15Q240-186.3 240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186 698.85-165T648-144H312Zm336-552H312v480h336v-480ZM384-288h72v-336h-72v336Zm120 0h72v-336h-72v336ZM312-696v480-480Z"/></svg>`
@@ -949,10 +855,8 @@ window.addEventListener("load", (e) => {
 
     colorPaletteInput.onchange = (e) => {
       let color = e.target.value;
-      redactionElement.style.setProperty("--palette-color", color);
-      let redactionIdx = redactions.findIndex(
-        (red) => redactionInfo.id === red.id
-      );
+      redactionElement.style.setProperty('--palette-color', color);
+      let redactionIdx = redactions.findIndex((red) => redactionInfo.id === red.id);
       if (redactionIdx < 0) return;
       redactions[redactionIdx].color = color;
       _setRedactionsInput(redactions);
@@ -961,17 +865,17 @@ window.addEventListener("load", (e) => {
     redactionOverlay.appendChild(deleteBtn);
     redactionOverlay.appendChild(colorPaletteLabel);
 
-    redactionOverlay.classList.add("redaction-overlay");
-    redactionOverlay.style.display = "none";
+    redactionOverlay.classList.add('redaction-overlay');
+    redactionOverlay.style.display = 'none';
 
-    redactionElement.addEventListener("textLayer-reference-changed", (e) => {
+    redactionElement.addEventListener('textLayer-reference-changed', (e) => {
       textLayer = e.detail.textLayer;
     });
 
     redactionElement.onclick = (e) => {
       if (e.target != redactionElement) return;
       if (activeOverlay) hideOverlay();
-      redactionElement.classList.add("active-redaction");
+      redactionElement.classList.add('active-redaction');
       activeOverlay = redactionOverlay;
       _adjustActiveOverlayCoordinates();
     };
@@ -980,15 +884,14 @@ window.addEventListener("load", (e) => {
 
     // Adjust active overlay coordinates to avoid placing the overlay out of page bounds
     function _adjustActiveOverlayCoordinates() {
-      activeOverlay.style.visibility = "hidden";
-      activeOverlay.style.display = "flex";
+      activeOverlay.style.visibility = 'hidden';
+      activeOverlay.style.display = 'flex';
       textLayer = textLayer || getTextLayer(redactionElement);
-      let angle = parseInt(textLayer.getAttribute("data-main-rotation"));
-      if (textLayer)
-        redactionOverlay.style.transform = `rotate(${angle * -1}deg)`;
+      let angle = parseInt(textLayer.getAttribute('data-main-rotation'));
+      if (textLayer) redactionOverlay.style.transform = `rotate(${angle * -1}deg)`;
 
-      activeOverlay.style.removeProperty("left");
-      activeOverlay.style.removeProperty("top");
+      activeOverlay.style.removeProperty('left');
+      activeOverlay.style.removeProperty('top');
 
       let textRect = textLayer.getBoundingClientRect();
       let overlayRect = redactionOverlay.getBoundingClientRect();
@@ -1019,11 +922,9 @@ window.addEventListener("load", (e) => {
           break;
       }
 
-      if (leftOffset != 0)
-        activeOverlay.style.left = `calc(50% + ${leftOffset}px`;
-      if (topOffset != 0)
-        activeOverlay.style.top = `calc(100% + ${topOffset}px`;
-      activeOverlay.style.visibility = "unset";
+      if (leftOffset != 0) activeOverlay.style.left = `calc(50% + ${leftOffset}px`;
+      if (topOffset != 0) activeOverlay.style.top = `calc(100% + ${topOffset}px`;
+      activeOverlay.style.visibility = 'unset';
     }
   }
 });
@@ -1032,7 +933,7 @@ function calculateMouseCoordinateToRotatedBox(canvas, e) {
   let textRect = canvas.getBoundingClientRect();
   let left,
     top = 0;
-  let angle = parseInt(canvas.getAttribute("data-main-rotation"));
+  let angle = parseInt(canvas.getAttribute('data-main-rotation'));
   switch (angle) {
     case 0:
       left = clamp(e.pageX - textRect.left, 0, textRect.width);
@@ -1052,7 +953,7 @@ function calculateMouseCoordinateToRotatedBox(canvas, e) {
       top = clamp(e.pageX - textRect.left, 0, textRect.width);
       break;
   }
-  return { left, top };
+  return {left, top};
 }
 
 function clamp(value, min, max) {
@@ -1061,8 +962,8 @@ function clamp(value, min, max) {
 
 function addPageRedactionPreviewToPages(pagesDetailed, totalPagesCount) {
   if (pagesDetailed.all) {
-    addRedactedPagePreview("#viewer > .page");
-    addRedactedThumbnailPreview("#thumbnailView > a > div.thumbnail");
+    addRedactedPagePreview('#viewer > .page');
+    addRedactedThumbnailPreview('#thumbnailView > a > div.thumbnail');
   } else {
     removeRedactedPagePreview();
 
@@ -1071,45 +972,37 @@ function addPageRedactionPreviewToPages(pagesDetailed, totalPagesCount) {
 
     let pageNumbers = Array.from(pagesDetailed.numbers);
     if (pageNumbers?.length > 0) {
-      let pagesSelector = pageNumbers
-        .map((number) => `#viewer > .page[data-page-number="${number}"]`)
-        .join(",");
+      let pagesSelector = pageNumbers.map((number) => `#viewer > .page[data-page-number="${number}"]`).join(',');
       addRedactedPagePreview(pagesSelector);
       let thumbnailSelector = pageNumbers
-        .map(
-          (number) =>
-            `#thumbnailView > a > div.thumbnail[data-page-number="${number}"]`
-        )
-        .join(",");
+        .map((number) => `#thumbnailView > a > div.thumbnail[data-page-number="${number}"]`)
+        .join(',');
       addRedactedThumbnailPreview(thumbnailSelector);
     }
   }
 }
 
 function resetFieldFeedbackMessages(input, parentElement) {
-  if (parentElement)
-    parentElement
-      .querySelectorAll(".invalid-feedback")
-      .forEach((feedback) => feedback.remove());
+  if (parentElement) parentElement.querySelectorAll('.invalid-feedback').forEach((feedback) => feedback.remove());
   if (input) {
-    input.classList.remove("is-invalid");
-    input.classList.remove("is-valid");
+    input.classList.remove('is-invalid');
+    input.classList.remove('is-valid');
   }
 }
 
 function displayFieldErrorMessages(input, errors) {
-  input.classList.add("is-invalid");
+  input.classList.add('is-invalid');
   errors.forEach((error) => {
-    let element = document.createElement("div");
-    element.classList.add("invalid-feedback");
-    element.classList.add("list-styling");
+    let element = document.createElement('div');
+    element.classList.add('invalid-feedback');
+    element.classList.add('list-styling');
     element.textContent = error;
     input.parentElement.appendChild(element);
   });
 }
 
 function setPageRedactionColor(color) {
-  document.documentElement.style.setProperty("--page-redaction-color", color);
+  document.documentElement.style.setProperty('--page-redaction-color', color);
 }
 
 function setPageNumbersFromNFunctions(pagesDetailed, totalPagesCount) {
@@ -1117,8 +1010,7 @@ function setPageNumbersFromNFunctions(pagesDetailed, totalPagesCount) {
     if (!isValidFunction(fun)) return;
     for (let n = 1; n <= totalPagesCount; n++) {
       let pageNumber = eval(fun);
-      if (!pageNumber || pageNumber <= 0 || pageNumber > totalPagesCount)
-        continue;
+      if (!pageNumber || pageNumber <= 0 || pageNumber > totalPagesCount) continue;
       pagesDetailed.numbers.add(pageNumber);
     }
   });
@@ -1133,8 +1025,8 @@ function setPageNumbersFromRange(pagesDetailed, totalPagesCount) {
 }
 
 function hideOverlay() {
-  activeOverlay.style.display = "none";
-  activeOverlay.parentElement.classList.remove("active-redaction");
+  activeOverlay.style.display = 'none';
+  activeOverlay.parentElement.classList.remove('active-redaction');
   activeOverlay = null;
 }
 
@@ -1153,7 +1045,7 @@ function _nonEmptyRedaction(redaction) {
 }
 
 function copyEvent(e, type) {
-  if (type == "pointerleave")
+  if (type == 'pointerleave')
     return {
       layerX: e.layerX,
       layerY: e.layerY,
diff --git a/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css b/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
index dfe969bb2..a5de6cecb 100644
--- a/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
+++ b/src/main/resources/static/pdfjs-legacy/css/viewer-redact.css
@@ -143,14 +143,14 @@
   gap: 4px;
 }
 
-.dialog .mainContainer .radio > .radioButton {
+.dialog .mainContainer .radio>.radioButton {
   display: flex;
   gap: 8px;
   align-self: stretch;
   align-items: center;
 }
 
-.dialog .mainContainer .radio > .radioButton input {
+.dialog .mainContainer .radio>.radioButton input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -162,16 +162,16 @@
   border: 1px solid var(--radio-border-color);
 }
 
-.dialog .mainContainer .radio > .radioButton input:hover {
+.dialog .mainContainer .radio>.radioButton input:hover {
   filter: var(--hover-filter);
 }
 
-.dialog .mainContainer .radio > .radioButton input:checked {
+.dialog .mainContainer .radio>.radioButton input:checked {
   background-color: var(--radio-checked-bg-color);
   border: 4px solid var(--radio-checked-border-color);
 }
 
-.dialog .mainContainer .radio > .radioLabel {
+.dialog .mainContainer .radio>.radioLabel {
   display: flex;
   padding-inline-start: 24px;
   align-items: flex-start;
@@ -179,7 +179,7 @@
   align-self: stretch;
 }
 
-.dialog .mainContainer .radio > .radioLabel > span {
+.dialog .mainContainer .radio>.radioLabel>span {
   flex: 1 0 0;
   font-size: 11px;
   color: var(--text-secondary-color);
@@ -275,7 +275,7 @@
   transform-origin: 0% 0%;
 }
 
-.textLayer > :not(.markedContent),
+.textLayer> :not(.markedContent),
 .textLayer .markedContent span:not(.markedContent) {
   z-index: 1;
 }
@@ -390,9 +390,7 @@
 
   .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
   .annotationLayer .choiceWidgetAnnotation select:required,
-  .annotationLayer
-    .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-    input:required {
+  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
     outline: 1.5px solid selectedItem;
   }
 
@@ -405,7 +403,7 @@
     backdrop-filter: var(--hcm-highlight-filter);
   }
 
-  .annotationLayer .linkAnnotation > a:hover {
+  .annotationLayer .linkAnnotation>a:hover {
     opacity: 0 !important;
     background: none !important;
     box-shadow: none;
@@ -483,7 +481,7 @@
   display: none;
 }
 
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton)>a {
   position: absolute;
   font-size: 1em;
   top: 0;
@@ -492,9 +490,7 @@
   height: 100%;
 }
 
-.annotationLayer
-  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
-  > a:hover {
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)>a:hover {
   opacity: 0.2;
   background-color: rgb(255 255 0);
   box-shadow: 0 2px 10px rgb(255 255 0);
@@ -532,9 +528,7 @@
 
 .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
 .annotationLayer .choiceWidgetAnnotation select:required,
-.annotationLayer
-  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-  input:required {
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
   outline: 1.5px solid red;
 }
 
@@ -552,9 +546,7 @@
 
 .annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea),
 .annotationLayer .choiceWidgetAnnotation select[disabled],
-.annotationLayer
-  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-  input[disabled] {
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
   background: none;
   border: 2px solid var(--input-disabled-border-color);
   cursor: not-allowed;
@@ -562,9 +554,7 @@
 
 .annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
 .annotationLayer .choiceWidgetAnnotation select:hover,
-.annotationLayer
-  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-  input:hover {
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
   border: 2px solid var(--input-hover-border-color);
 }
 
@@ -663,8 +653,7 @@
 
 .annotationLayer .popup {
   background-color: rgb(255 255 153);
-  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
-    rgb(136 136 136);
+  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
   border-radius: calc(2px * var(--scale-factor));
   outline: 1.5px solid rgb(255 255 74);
   padding: calc(6px * var(--scale-factor));
@@ -683,15 +672,15 @@
   font-size: calc(9px * var(--scale-factor));
 }
 
-.annotationLayer .popup > .header {
+.annotationLayer .popup>.header {
   display: inline-block;
 }
 
-.annotationLayer .popup > .header h1 {
+.annotationLayer .popup>.header h1 {
   display: inline;
 }
 
-.annotationLayer .popup > .header .popupDate {
+.annotationLayer .popup>.header .popupDate {
   display: inline-block;
   margin-left: calc(5px * var(--scale-factor));
   width: -moz-fit-content;
@@ -704,7 +693,7 @@
   padding-top: calc(2px * var(--scale-factor));
 }
 
-.annotationLayer .richText > * {
+.annotationLayer .richText>* {
   white-space: pre-wrap;
   font-size: calc(9px * var(--scale-factor));
 }
@@ -757,6 +746,7 @@
   :root {
     --xfa-focus-outline: 2px solid CanvasText;
   }
+
   .xfaLayer *:required {
     outline: 1.5px solid selectedItem;
   }
@@ -888,7 +878,7 @@
   align-items: center;
 }
 
-:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
+:is(.xfaLeft, .xfaRight)> :is(.xfaCaption, .xfaCaptionForCheckButton) {
   max-height: 100%;
 }
 
@@ -904,7 +894,7 @@
   align-items: flex-start;
 }
 
-:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
+:is(.xfaTop, .xfaBottom)> :is(.xfaCaption, .xfaCaptionForCheckButton) {
   width: 100%;
 }
 
@@ -944,7 +934,7 @@
   padding-inline: 2px;
 }
 
-:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) {
+:is(.xfaTop, .xfaBottom)> :is(.xfaTextfield, .xfaSelect) {
   flex: 0 1 auto;
 }
 
@@ -1007,7 +997,7 @@
   align-items: stretch;
 }
 
-.xfaTb > div {
+.xfaTb>div {
   justify-content: left;
 }
 
@@ -1043,7 +1033,7 @@
   flex: 1;
 }
 
-.xfaTable .xfaRlRow > div {
+.xfaTable .xfaRlRow>div {
   flex: 1;
 }
 
@@ -1052,6 +1042,7 @@
 }
 
 @media print {
+
   .xfaTextfield,
   .xfaSelect {
     background: transparent;
@@ -1171,14 +1162,9 @@
   --toggle-dot-background-color-active: var(--toggle-dot-background-color);
   --toggle-dot-background-color-on-pressed: var(--color-canvas);
   --toggle-dot-margin: 1px;
-  --toggle-dot-height: calc(
-    var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
-      var(--toggle-border-width)
-  );
+  --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width));
   --toggle-dot-width: var(--toggle-dot-height);
-  --toggle-dot-transform-x: calc(
-    var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
-  );
+  --toggle-dot-transform-x: calc(var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width));
 
   -webkit-appearance: none;
 
@@ -1199,16 +1185,12 @@
 @media (prefers-color-scheme: dark) {
   :where(html:not(.is-light)) .toggle-button {
     --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
-    --button-background-color-hover: color-mix(
-      in srgb,
-      currentColor 14%,
-      transparent
-    );
-    --button-background-color-active: color-mix(
-      in srgb,
-      currentColor 21%,
-      transparent
-    );
+    --button-background-color-hover: color-mix(in srgb,
+        currentColor 14%,
+        transparent);
+    --button-background-color-active: color-mix(in srgb,
+        currentColor 21%,
+        transparent);
     --color-accent-primary: #0df;
     --color-accent-primary-hover: #80ebff;
     --color-accent-primary-active: #aaf2ff;
@@ -1219,16 +1201,12 @@
 
 :where(html.is-dark) .toggle-button {
   --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
-  --button-background-color-hover: color-mix(
-    in srgb,
-    currentColor 14%,
-    transparent
-  );
-  --button-background-color-active: color-mix(
-    in srgb,
-    currentColor 21%,
-    transparent
-  );
+  --button-background-color-hover: color-mix(in srgb,
+      currentColor 14%,
+      transparent);
+  --button-background-color-active: color-mix(in srgb,
+      currentColor 21%,
+      transparent);
   --color-accent-primary: #0df;
   --color-accent-primary-hover: #80ebff;
   --color-accent-primary-active: #aaf2ff;
@@ -1378,29 +1356,23 @@
   --hover-outline-around-color: var(--outline-around-color);
   --focus-outline: solid var(--outline-width) var(--outline-color);
   --unfocus-outline: solid var(--outline-width) transparent;
-  --focus-outline-around: solid var(--outline-around-width)
-    var(--outline-around-color);
+  --focus-outline-around: solid var(--outline-around-width) var(--outline-around-color);
   --hover-outline-color: #8f8f9d;
   --hover-outline: solid var(--outline-width) var(--hover-outline-color);
-  --hover-outline-around: solid var(--outline-around-width)
-    var(--hover-outline-around-color);
+  --hover-outline-around: solid var(--outline-around-width) var(--hover-outline-around-color);
   --freetext-line-height: 1.35;
   --freetext-padding: 2px;
   --resizer-bg-color: var(--outline-color);
   --resizer-size: 6px;
-  --resizer-shift: calc(
-    0px - (var(--outline-width) + var(--resizer-size)) / 2 -
-      var(--outline-around-width)
-  );
+  --resizer-shift: calc(0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width));
   --editorFreeText-editing-cursor: text;
   --editorInk-editing-cursor: url(../images/cursor-editorInk.svg) 0 16, pointer;
-  --editorHighlight-editing-cursor: url(../images/cursor-editorTextHighlight.svg)
-      24 24,
+  --editorHighlight-editing-cursor: url(../images/cursor-editorTextHighlight.svg) 24 24,
     text;
-  --editorFreeHighlight-editing-cursor: url(../images/cursor-editorFreeHighlight.svg)
-      1 18,
+  --editorFreeHighlight-editing-cursor: url(../images/cursor-editorFreeHighlight.svg) 1 18,
     pointer;
 }
+
 .visuallyHidden {
   position: absolute;
   top: 0;
@@ -1429,8 +1401,7 @@
 
 @media (min-resolution: 1.1dppx) {
   :root {
-    --editorFreeText-editing-cursor: url(../images/cursor-editorFreeText.svg) 0
-        16,
+    --editorFreeText-editing-cursor: url(../images/cursor-editorFreeText.svg) 0 16,
       text;
   }
 }
@@ -1498,8 +1469,7 @@
   border: var(--unfocus-outline);
 }
 
-.annotationEditorLayer
-  .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
+.annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
   cursor: move;
 }
 
@@ -1507,14 +1477,12 @@
   touch-action: none;
 }
 
-.annotationEditorLayer
-  .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
+.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
   border: var(--focus-outline);
   outline: var(--focus-outline-around);
 }
 
-.annotationEditorLayer
-  .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before {
+.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -1522,28 +1490,20 @@
   pointer-events: none;
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor) {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor) {
   border: var(--hover-outline);
   outline: var(--hover-outline-around);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(
-    .selectedEditor
-  )::before {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before {
   content: "";
   position: absolute;
   inset: 0;
   border: var(--focus-outline-around);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar {
   --editor-toolbar-delete-image: url(../images/editor-toolbar-delete.svg);
   --editor-toolbar-bg-color: #f0f0f4;
   --editor-toolbar-highlight-image: url(../images/toolbarButton-editorHighlight.svg);
@@ -1582,13 +1542,9 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :where(html:not(.is-light))
-    :is(
-      .annotationEditorLayer
-        :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-      .textLayer
-    )
-    .editToolbar {
+
+  :where(html:not(.is-light)) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+    .textLayer) .editToolbar {
     --editor-toolbar-bg-color: #2b2a33;
     --editor-toolbar-fg-color: #fbfbfe;
     --editor-toolbar-hover-bg-color: #52525e;
@@ -1596,13 +1552,8 @@
   }
 }
 
-:where(html.is-dark)
-  :is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar {
+:where(html.is-dark) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar {
   --editor-toolbar-bg-color: #2b2a33;
   --editor-toolbar-fg-color: #fbfbfe;
   --editor-toolbar-hover-bg-color: #52525e;
@@ -1610,70 +1561,43 @@
 }
 
 @media screen and (forced-colors: active) {
-  :is(
-      .annotationEditorLayer
-        :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-      .textLayer
-    )
-    .editToolbar {
+
+  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+    .textLayer) .editToolbar {
     --editor-toolbar-bg-color: ButtonFace;
     --editor-toolbar-fg-color: ButtonText;
     --editor-toolbar-border-color: ButtonText;
     --editor-toolbar-hover-border-color: AccentColor;
     --editor-toolbar-hover-bg-color: ButtonFace;
     --editor-toolbar-hover-fg-color: AccentColor;
-    --editor-toolbar-hover-outline: 2px solid
-      var(--editor-toolbar-hover-border-color);
+    --editor-toolbar-hover-outline: 2px solid var(--editor-toolbar-hover-border-color);
     --editor-toolbar-focus-outline-color: ButtonBorder;
     --editor-toolbar-shadow: none;
   }
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar.hidden {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar.hidden {
   display: none;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar:has(:focus-visible) {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar:has(:focus-visible) {
   border-color: transparent;
 }
 
-[dir="ltr"]
-  :is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar {
+[dir="ltr"] :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar {
   transform-origin: 100% 0;
 }
 
-[dir="rtl"]
-  :is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar {
+[dir="rtl"] :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar {
   transform-origin: 0 0;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1681,42 +1605,22 @@
   height: 100%;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .divider {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .divider {
   width: 1px;
-  height: calc(
-    2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
-  );
+  height: calc(2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height));
   background-color: var(--editor-toolbar-border-color);
   display: inline-block;
   margin-inline: 2px;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .highlightButton {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .highlightButton {
   width: var(--editor-toolbar-height);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .highlightButton::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .highlightButton::before {
   content: "";
   -webkit-mask-image: var(--editor-toolbar-highlight-image);
   mask-image: var(--editor-toolbar-highlight-image);
@@ -1730,36 +1634,18 @@
   height: 100%;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .highlightButton:hover::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .highlightButton:hover::before {
   background-color: var(--editor-toolbar-hover-fg-color);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .delete {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .delete {
   width: var(--editor-toolbar-height);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .delete::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .delete::before {
   content: "";
   -webkit-mask-image: var(--editor-toolbar-delete-image);
   mask-image: var(--editor-toolbar-delete-image);
@@ -1773,49 +1659,25 @@
   height: 100%;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .delete:hover::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .delete:hover::before {
   background-color: var(--editor-toolbar-hover-fg-color);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  > * {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons>* {
   height: var(--editor-toolbar-height);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  > :not(.divider) {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons> :not(.divider) {
   border: none;
   background-color: transparent;
   cursor: pointer;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  > :not(.divider):hover {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons> :not(.divider):hover {
   border-radius: 2px;
   background-color: var(--editor-toolbar-hover-bg-color);
   color: var(--editor-toolbar-hover-fg-color);
@@ -1823,37 +1685,19 @@
   outline-offset: 1px;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  > :not(.divider):hover:active {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons> :not(.divider):hover:active {
   outline: none;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  > :not(.divider):focus-visible {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons> :not(.divider):focus-visible {
   border-radius: 2px;
   outline: 2px solid var(--editor-toolbar-focus-outline-color);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText {
   --alt-text-add-image: url(../images/altText_add.svg);
   --alt-text-done-image: url(../images/altText_done.svg);
 
@@ -1870,25 +1714,13 @@
   color: var(--editor-toolbar-fg-color);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText:disabled {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText:disabled {
   pointer-events: none;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText::before {
   content: "";
   -webkit-mask-image: var(--alt-text-add-image);
   mask-image: var(--alt-text-add-image);
@@ -1903,50 +1735,24 @@
   margin-inline-end: 4px;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText:hover::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText:hover::before {
   background-color: var(--editor-toolbar-hover-fg-color);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText.done::before {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText.done::before {
   -webkit-mask-image: var(--alt-text-done-image);
   mask-image: var(--alt-text-done-image);
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText
-  .tooltip {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText .tooltip {
   display: none;
 }
 
-:is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText
-  .tooltip.show {
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText .tooltip.show {
   --alt-text-tooltip-bg: #f0f0f4;
   --alt-text-tooltip-fg: #15141a;
   --alt-text-tooltip-border: #8f8f9d;
@@ -1976,47 +1782,26 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :where(html:not(.is-light))
-    :is(
-      .annotationEditorLayer
-        :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-      .textLayer
-    )
-    .editToolbar
-    .buttons
-    .altText
-    .tooltip.show {
+
+  :where(html:not(.is-light)) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+    .textLayer) .editToolbar .buttons .altText .tooltip.show {
     --alt-text-tooltip-bg: #1c1b22;
     --alt-text-tooltip-fg: #fbfbfe;
     --alt-text-tooltip-shadow: 0px 2px 6px 0px #15141a;
   }
 }
 
-:where(html.is-dark)
-  :is(
-    .annotationEditorLayer
-      :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-    .textLayer
-  )
-  .editToolbar
-  .buttons
-  .altText
-  .tooltip.show {
+:where(html.is-dark) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+  .textLayer) .editToolbar .buttons .altText .tooltip.show {
   --alt-text-tooltip-bg: #1c1b22;
   --alt-text-tooltip-fg: #fbfbfe;
   --alt-text-tooltip-shadow: 0px 2px 6px 0px #15141a;
 }
 
 @media screen and (forced-colors: active) {
-  :is(
-      .annotationEditorLayer
-        :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
-      .textLayer
-    )
-    .editToolbar
-    .buttons
-    .altText
-    .tooltip.show {
+
+  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+    .textLayer) .editToolbar .buttons .altText .tooltip.show {
     --alt-text-tooltip-bg: Canvas;
     --alt-text-tooltip-fg: CanvasText;
     --alt-text-tooltip-border: CanvasText;
@@ -2098,23 +1883,16 @@
   margin: 0;
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers {
   position: absolute;
   inset: 0;
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers.hidden {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers.hidden {
   display: none;
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer {
   width: var(--resizer-size);
   height: var(--resizer-size);
   background: content-box var(--resizer-bg-color);
@@ -2123,433 +1901,185 @@
   position: absolute;
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.topLeft {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.topLeft {
   top: var(--resizer-shift);
   left: var(--resizer-shift);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.topMiddle {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.topMiddle {
   top: var(--resizer-shift);
   left: calc(50% + var(--resizer-shift));
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.topRight {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.topRight {
   top: var(--resizer-shift);
   right: var(--resizer-shift);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.middleRight {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.middleRight {
   top: calc(50% + var(--resizer-shift));
   right: var(--resizer-shift);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.bottomRight {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.bottomRight {
   bottom: var(--resizer-shift);
   right: var(--resizer-shift);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.bottomMiddle {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.bottomMiddle {
   bottom: var(--resizer-shift);
   left: calc(50% + var(--resizer-shift));
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.bottomLeft {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.bottomLeft {
   bottom: var(--resizer-shift);
   left: var(--resizer-shift);
 }
 
-.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor)
-  > .resizers
-  > .resizer.middleLeft {
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.middleLeft {
   top: calc(50% + var(--resizer-shift));
   left: var(--resizer-shift);
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.bottomRight,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.bottomRight,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.bottomRight,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.bottomRight {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomRight {
   cursor: nwse-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.bottomMiddle,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.bottomMiddle,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.bottomMiddle,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.bottomMiddle {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomMiddle {
   cursor: ns-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.bottomLeft,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.bottomLeft,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.bottomLeft,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.bottomLeft {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomLeft {
   cursor: nesw-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.middleLeft,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.middleLeft,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.middleLeft,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.middleLeft {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleLeft {
   cursor: ew-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.topLeft,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.bottomRight,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.bottomRight,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.bottomRight,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.bottomRight {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomRight {
   cursor: nesw-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.topMiddle,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.bottomMiddle,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.bottomMiddle,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.bottomMiddle,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.bottomMiddle {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomMiddle {
   cursor: ew-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.topRight,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.bottomLeft,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.bottomLeft,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.bottomLeft,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.bottomLeft {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomLeft {
   cursor: nwse-resize;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.middleRight,
-.annotationEditorLayer[data-main-rotation="0"]
-  :is([data-editor-rotation="90"], [data-editor-rotation="270"])
-  > .resizers
-  > .resizer.middleLeft,
-.annotationEditorLayer[data-main-rotation="90"]
-  :is([data-editor-rotation="0"], [data-editor-rotation="180"])
-  > .resizers
-  > .resizer.middleLeft,
-.annotationEditorLayer[data-main-rotation="180"]
-  :is([data-editor-rotation="270"], [data-editor-rotation="90"])
-  > .resizers
-  > .resizer.middleLeft,
-.annotationEditorLayer[data-main-rotation="270"]
-  :is([data-editor-rotation="180"], [data-editor-rotation="0"])
-  > .resizers
-  > .resizer.middleLeft {
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleLeft {
   cursor: ns-resize;
 }
 
-.annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="90"],
-    [data-main-rotation="90"] [data-editor-rotation="0"],
-    [data-main-rotation="180"] [data-editor-rotation="270"],
-    [data-main-rotation="270"] [data-editor-rotation="180"]
-  )
-  .editToolbar {
+.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],
+  [data-main-rotation="90"] [data-editor-rotation="0"],
+  [data-main-rotation="180"] [data-editor-rotation="270"],
+  [data-main-rotation="270"] [data-editor-rotation="180"]) .editToolbar {
   rotate: 270deg;
 }
 
-[dir="ltr"]
-  .annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="90"],
-    [data-main-rotation="90"] [data-editor-rotation="0"],
-    [data-main-rotation="180"] [data-editor-rotation="270"],
-    [data-main-rotation="270"] [data-editor-rotation="180"]
-  )
-  .editToolbar {
+[dir="ltr"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],
+  [data-main-rotation="90"] [data-editor-rotation="0"],
+  [data-main-rotation="180"] [data-editor-rotation="270"],
+  [data-main-rotation="270"] [data-editor-rotation="180"]) .editToolbar {
   inset-inline-end: calc(0px - var(--editor-toolbar-vert-offset));
   inset-block-start: 0;
 }
 
-[dir="rtl"]
-  .annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="90"],
-    [data-main-rotation="90"] [data-editor-rotation="0"],
-    [data-main-rotation="180"] [data-editor-rotation="270"],
-    [data-main-rotation="270"] [data-editor-rotation="180"]
-  )
-  .editToolbar {
+[dir="rtl"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],
+  [data-main-rotation="90"] [data-editor-rotation="0"],
+  [data-main-rotation="180"] [data-editor-rotation="270"],
+  [data-main-rotation="270"] [data-editor-rotation="180"]) .editToolbar {
   inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
   inset-block-start: 0;
 }
 
-.annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="180"],
-    [data-main-rotation="90"] [data-editor-rotation="90"],
-    [data-main-rotation="180"] [data-editor-rotation="0"],
-    [data-main-rotation="270"] [data-editor-rotation="270"]
-  )
-  .editToolbar {
+.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],
+  [data-main-rotation="90"] [data-editor-rotation="90"],
+  [data-main-rotation="180"] [data-editor-rotation="0"],
+  [data-main-rotation="270"] [data-editor-rotation="270"]) .editToolbar {
   rotate: 180deg;
   inset-inline-end: 100%;
   inset-block-start: calc(0pc - var(--editor-toolbar-vert-offset));
 }
 
-.annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="270"],
-    [data-main-rotation="90"] [data-editor-rotation="180"],
-    [data-main-rotation="180"] [data-editor-rotation="90"],
-    [data-main-rotation="270"] [data-editor-rotation="0"]
-  )
-  .editToolbar {
+.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],
+  [data-main-rotation="90"] [data-editor-rotation="180"],
+  [data-main-rotation="180"] [data-editor-rotation="90"],
+  [data-main-rotation="270"] [data-editor-rotation="0"]) .editToolbar {
   rotate: 90deg;
 }
 
-[dir="ltr"]
-  .annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="270"],
-    [data-main-rotation="90"] [data-editor-rotation="180"],
-    [data-main-rotation="180"] [data-editor-rotation="90"],
-    [data-main-rotation="270"] [data-editor-rotation="0"]
-  )
-  .editToolbar {
+[dir="ltr"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],
+  [data-main-rotation="90"] [data-editor-rotation="180"],
+  [data-main-rotation="180"] [data-editor-rotation="90"],
+  [data-main-rotation="270"] [data-editor-rotation="0"]) .editToolbar {
   inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
   inset-block-start: 100%;
 }
 
-[dir="rtl"]
-  .annotationEditorLayer
-  :is(
-    [data-main-rotation="0"] [data-editor-rotation="270"],
-    [data-main-rotation="90"] [data-editor-rotation="180"],
-    [data-main-rotation="180"] [data-editor-rotation="90"],
-    [data-main-rotation="270"] [data-editor-rotation="0"]
-  )
-  .editToolbar {
+[dir="rtl"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],
+  [data-main-rotation="90"] [data-editor-rotation="180"],
+  [data-main-rotation="180"] [data-editor-rotation="90"],
+  [data-main-rotation="270"] [data-editor-rotation="0"]) .editToolbar {
   inset-inline-start: calc(0px - var(--editor-toolbar-vert-offset));
   inset-block-start: 0;
 }
@@ -2654,31 +2184,23 @@
   forced-color-adjust: none;
 }
 
-.colorPicker button:is(:hover, .selected) > .swatch {
+.colorPicker button:is(:hover, .selected)>.swatch {
   border: none;
 }
 
-.annotationEditorLayer[data-main-rotation="0"]
-  .highlightEditor:not(.free)
-  > .editToolbar {
+.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free)>.editToolbar {
   rotate: 0deg;
 }
 
-.annotationEditorLayer[data-main-rotation="90"]
-  .highlightEditor:not(.free)
-  > .editToolbar {
+.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free)>.editToolbar {
   rotate: 270deg;
 }
 
-.annotationEditorLayer[data-main-rotation="180"]
-  .highlightEditor:not(.free)
-  > .editToolbar {
+.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free)>.editToolbar {
   rotate: 180deg;
 }
 
-.annotationEditorLayer[data-main-rotation="270"]
-  .highlightEditor:not(.free)
-  > .editToolbar {
+.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free)>.editToolbar {
   rotate: 90deg;
 }
 
@@ -2732,11 +2254,7 @@
   padding: 4px;
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker::after {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker::after {
   content: "";
   -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image);
   mask-image: var(--editor-toolbar-colorpicker-arrow-image);
@@ -2750,36 +2268,19 @@
   height: 12px;
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker:hover::after {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover::after {
   background-color: var(--editor-toolbar-hover-fg-color);
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker:has(.dropdown:not(.hidden)) {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)) {
   background-color: var(--editor-toolbar-hover-bg-color);
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker:has(.dropdown:not(.hidden))::after {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden))::after {
   scale: -1;
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker
-  .dropdown {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown {
   position: absolute;
   display: flex;
   justify-content: center;
@@ -2795,13 +2296,7 @@
   width: calc(100% + 2 * var(--editor-toolbar-padding));
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker
-  .dropdown
-  button {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button {
   width: 100%;
   height: auto;
   border: none;
@@ -2812,46 +2307,19 @@
   background: none;
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker
-  .dropdown
-  button:is(:active, :focus-visible) {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible) {
   outline: none;
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker
-  .dropdown
-  button
-  > .swatch {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button>.swatch {
   outline-offset: 2px;
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker
-  .dropdown
-  button[aria-selected="true"]
-  > .swatch {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"]>.swatch {
   outline: 2px solid var(--selected-outline-color);
 }
 
-.annotationEditorLayer
-  .highlightEditor
-  .editToolbar
-  .buttons
-  .colorPicker
-  .dropdown
-  button:is(:hover, :active, :focus-visible)
-  > .swatch {
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible)>.swatch {
   outline: 2px solid var(--hover-outline-color);
 }
 
@@ -2906,26 +2374,15 @@
   height: 24px;
 }
 
-#highlightParamsToolbarContainer
-  .colorPicker
-  .dropdown
-  button:is(:active, :focus-visible) {
+#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible) {
   outline: none;
 }
 
-#highlightParamsToolbarContainer
-  .colorPicker
-  .dropdown
-  button[aria-selected="true"]
-  > .swatch {
+#highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"]>.swatch {
   outline: 2px solid var(--selected-outline-color);
 }
 
-#highlightParamsToolbarContainer
-  .colorPicker
-  .dropdown
-  button:is(:hover, :active, :focus-visible)
-  > .swatch {
+#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible)>.swatch {
   outline: 2px solid var(--hover-outline-color);
 }
 
@@ -2953,18 +2410,12 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :where(html:not(.is-light))
-    #highlightParamsToolbarContainer
-    #editorHighlightThickness
-    .thicknessPicker {
+  :where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
     --example-color: #80808e;
   }
 }
 
-:where(html.is-dark)
-  #highlightParamsToolbarContainer
-  #editorHighlightThickness
-  .thicknessPicker {
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
   --example-color: #80808e;
 }
 
@@ -2974,21 +2425,12 @@
   }
 }
 
-:is(
-    #highlightParamsToolbarContainer
-      #editorHighlightThickness
-      .thicknessPicker
-      > .editorParamsSlider[disabled]
-  ) {
+:is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]) {
   opacity: 0.4;
 }
 
-#highlightParamsToolbarContainer
-  #editorHighlightThickness
-  .thicknessPicker::before,
-#highlightParamsToolbarContainer
-  #editorHighlightThickness
-  .thicknessPicker::after {
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::before,
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after {
   content: "";
   width: 8px;
   aspect-ratio: 1;
@@ -2997,16 +2439,11 @@
   background-color: var(--example-color);
 }
 
-#highlightParamsToolbarContainer
-  #editorHighlightThickness
-  .thicknessPicker::after {
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after {
   width: 24px;
 }
 
-#highlightParamsToolbarContainer
-  #editorHighlightThickness
-  .thicknessPicker
-  .editorParamsSlider {
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider {
   width: unset;
   height: 14px;
 }
@@ -3029,18 +2466,12 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :where(html:not(.is-light))
-    #highlightParamsToolbarContainer
-    #editorHighlightVisibility
-    .divider {
+  :where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
     --divider-color: #8f8f9d;
   }
 }
 
-:where(html.is-dark)
-  #highlightParamsToolbarContainer
-  #editorHighlightVisibility
-  .divider {
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
   --divider-color: #8f8f9d;
 }
 
@@ -3078,9 +2509,11 @@
 [data-main-rotation="90"] {
   transform: rotate(90deg) translateY(-100%);
 }
+
 [data-main-rotation="180"] {
   transform: rotate(180deg) translate(-100%, -100%);
 }
+
 [data-main-rotation="270"] {
   transform: rotate(270deg) translateX(-100%);
 }
@@ -3274,8 +2707,7 @@ html[data-toolbar-density="touch"] {
   --toolbar-border-color: rgb(184 184 184);
   --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
   --toolbar-border-bottom: none;
-  --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0
-      rgb(0 0 0 / 0.25),
+  --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25),
     0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
   --toolbarSidebar-border-bottom: none;
   --button-hover-color: rgb(221 222 223);
@@ -3510,7 +2942,7 @@ body {
   cursor: none;
 }
 
-.pdfPresentationMode.pdfPresentationModeControls > *,
+.pdfPresentationMode.pdfPresentationModeControls>*,
 .pdfPresentationMode.pdfPresentationModeControls .textLayer span {
   cursor: default;
 }
@@ -3539,6 +2971,7 @@ body {
 #outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer {
   visibility: visible;
 }
+
 #outerContainer.sidebarOpen #sidebarContainer {
   inset-inline-start: 0;
 }
@@ -3564,6 +2997,7 @@ body {
   inset: var(--toolbar-height) 0 0;
   outline: none;
 }
+
 #viewerContainer:not(.pdfPresentationMode) {
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
@@ -3582,8 +3016,7 @@ body {
   font: message-box;
 }
 
-:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
-  :is(input, button, select),
+:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer) :is(input, button, select),
 .secondaryToolbar :is(input, button, a, select) {
   outline: none;
   font: message-box;
@@ -3665,6 +3098,7 @@ body {
   0% {
     transform: translateX(calc(-142px * var(--dir-factor)));
   }
+
   100% {
     transform: translateX(0);
   }
@@ -3682,20 +3116,17 @@ body {
   inset-inline-start: 0;
   height: 100%;
   width: calc(100% + 150px);
-  background: repeating-linear-gradient(
-    135deg,
-    var(--progressBar-blend-color) 0,
-    var(--progressBar-bg-color) 5px,
-    var(--progressBar-bg-color) 45px,
-    var(--progressBar-color) 55px,
-    var(--progressBar-color) 95px,
-    var(--progressBar-blend-color) 100px
-  );
+  background: repeating-linear-gradient(135deg,
+      var(--progressBar-blend-color) 0,
+      var(--progressBar-bg-color) 5px,
+      var(--progressBar-bg-color) 45px,
+      var(--progressBar-color) 55px,
+      var(--progressBar-color) 95px,
+      var(--progressBar-blend-color) 100px);
   animation: progressIndeterminate 1s linear infinite;
 }
 
-#outerContainer.sidebarResizing
-  :is(#sidebarContainer, #viewerContainer, #loadingBar) {
+#outerContainer.sidebarResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) {
   transition-duration: 0s;
 }
 
@@ -3720,18 +3151,22 @@ body {
   min-width: 300px;
   background-color: var(--toolbar-bg-color);
 }
-.findbar > div {
+
+.findbar>div {
   /* height:32px; */
   height: var(--toolbar-height);
 }
-.findbar > div#findbarInputContainer {
+
+.findbar>div#findbarInputContainer {
   margin-inline-end: 4px;
 }
-.findbar.wrapContainers > div,
-.findbar.wrapContainers > div#findbarMessageContainer > * {
+
+.findbar.wrapContainers>div,
+.findbar.wrapContainers>div#findbarMessageContainer>* {
   clear: both;
 }
-.findbar.wrapContainers > div#findbarMessageContainer {
+
+.findbar.wrapContainers>div#findbarMessageContainer {
   height: auto;
 }
 
@@ -3746,12 +3181,12 @@ body {
 }
 
 .findbar label:hover,
-.findbar input:focus-visible + label {
+.findbar input:focus-visible+label {
   color: var(--toggled-btn-color);
   background-color: var(--button-hover-color);
 }
 
-.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
+.findbar .toolbarField[type="checkbox"]:checked+.toolbarLabel {
   background-color: var(--toggled-btn-bg-color) !important;
   color: var(--toggled-btn-color);
 }
@@ -3790,7 +3225,7 @@ body {
   margin-bottom: -4px;
 }
 
-.editorParamsToolbarContainer > .editorParamsSetter {
+.editorParamsToolbarContainer>.editorParamsSetter {
   min-height: 26px;
   display: flex;
   align-items: center;
@@ -3825,8 +3260,7 @@ body {
   background-color: black;
 }
 
-.editorParamsToolbarContainer
-  .editorParamsSlider::-webkit-slider-runnable-track,
+.editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-runnable-track,
 .editorParamsToolbarContainer .editorParamsSlider::-moz-range-track {
   background-color: black;
 }
@@ -3872,6 +3306,7 @@ body {
     0 0 0 1px var(--doorhanger-border-color);
   border: var(--doorhanger-border-color-whcm);
 }
+
 :is(.doorHanger, .doorHangerRight)::after,
 :is(.doorHanger, .doorHangerRight)::before {
   bottom: 100%;
@@ -3883,24 +3318,29 @@ body {
   pointer-events: none;
   opacity: var(--doorhanger-triangle-opacity-whcm);
 }
+
 .doorHanger::after {
   inset-inline-start: 10px;
   margin-inline-start: -8px;
   border-bottom-color: var(--toolbar-bg-color);
 }
+
 .doorHangerRight::after {
   inset-inline-end: 10px;
   margin-inline-end: -8px;
   border-bottom-color: var(--doorhanger-bg-color);
 }
+
 :is(.doorHanger, .doorHangerRight)::before {
   border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
+
 .doorHanger::before {
   inset-inline-start: 10px;
   margin-inline-start: -9px;
 }
+
 .doorHangerRight::before {
   inset-inline-end: 10px;
   margin-inline-end: -9px;
@@ -3932,14 +3372,15 @@ body {
 #toolbarSidebarLeft {
   float: var(--inline-start);
 }
+
 #toolbarViewerRight,
 #toolbarSidebarRight {
   float: var(--inline-end);
 }
 
-#toolbarViewerLeft > *,
-#toolbarViewerMiddle > *,
-#toolbarViewerRight > *,
+#toolbarViewerLeft>*,
+#toolbarViewerMiddle>*,
+#toolbarViewerRight>*,
 #toolbarSidebarLeft *,
 #toolbarSidebarRight *,
 .findbar * {
@@ -3957,6 +3398,7 @@ body {
   margin-right: auto;
   padding-inline-start: 1px;
 }
+
 #toolbarViewerRight {
   display: flex;
   margin-left: auto;
@@ -3964,6 +3406,7 @@ body {
   order: 4;
   padding-inline-end: 1px;
 }
+
 #toolbarSidebarRight {
   padding-inline-end: 2px;
 }
@@ -3973,7 +3416,8 @@ body {
   display: inline-block;
   padding-top: 5px;
 }
-.splitToolbarButton > .toolbarButton {
+
+.splitToolbarButton>.toolbarButton {
   float: var(--inline-start);
 }
 
@@ -4002,24 +3446,27 @@ body {
   background-color: var(--dialog-button-hover-bg-color);
 }
 
-.dialogButton:is(:hover, :focus-visible) > span {
+.dialogButton:is(:hover, :focus-visible)>span {
   color: var(--dialog-button-hover-color);
 }
 
 :is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] {
- background-color : rgba(169, 201, 246, 0.5);}
+  background-color: rgba(169, 201, 246, 0.5);
+}
 
-.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
+.splitToolbarButton>.toolbarButton:is(:hover, :focus-visible),
 .dropdownToolbarButton:hover {
   background-color: var(--button-hover-color);
 }
-.splitToolbarButton > .toolbarButton {
+
+.splitToolbarButton>.toolbarButton {
   position: relative;
   margin: 0;
   height: var(--toolButton-height);
   width: var(--toolButton-width);
 }
-#toolbarSidebar .splitToolbarButton > .toolbarButton {
+
+#toolbarSidebar .splitToolbarButton>.toolbarButton {
   margin-inline-end: 2px;
 }
 
@@ -4071,19 +3518,20 @@ body {
 .toolbarButton:is(:hover, :focus-visible) {
   background-color: var(--button-hover-color);
 }
+
 .secondaryToolbarButton:is(:hover, :focus-visible) {
   background-color: var(--doorhanger-hover-bg-color);
   color: var(--doorhanger-hover-color);
 }
 
 :is(.toolbarButton, .secondaryToolbarButton).toggled,
-.splitToolbarButton.toggled > .toolbarButton.toggled {
+.splitToolbarButton.toggled>.toolbarButton.toggled {
   background-color: var(--toggled-btn-bg-color);
   color: var(--toggled-btn-color);
 }
 
 :is(.toolbarButton, .secondaryToolbarButton).toggled:hover,
-.splitToolbarButton.toggled > .toolbarButton.toggled:hover {
+.splitToolbarButton.toggled>.toolbarButton.toggled:hover {
   outline: var(--toggled-hover-btn-outline) !important;
 }
 
@@ -4092,7 +3540,7 @@ body {
 }
 
 :is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active,
-.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active {
+.splitToolbarButton.toggled>.toolbarButton.toggled:hover:active {
   background-color: var(--toggled-hover-active-btn-color);
 }
 
@@ -4105,6 +3553,7 @@ body {
   background-color: var(--dropdown-btn-bg-color);
   border: var(--dropdown-btn-border);
 }
+
 .dropdownToolbarButton::after {
   top: 10px;
   inset-inline-end: 6px;
@@ -4113,7 +3562,7 @@ body {
   mask-image: var(--toolbarButton-menuArrow-icon);
 }
 
-.dropdownToolbarButton > select {
+.dropdownToolbarButton>select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -4128,11 +3577,13 @@ body {
   border: none;
   background-color: var(--dropdown-btn-bg-color);
 }
-.dropdownToolbarButton > select:is(:hover, :focus-visible) {
+
+.dropdownToolbarButton>select:is(:hover, :focus-visible) {
   background-color: var(--button-hover-color);
   color: var(--toggled-btn-color);
 }
-.dropdownToolbarButton > select > option {
+
+.dropdownToolbarButton>select>option {
   background: var(--doorhanger-bg-color);
   color: var(--main-color);
 }
@@ -4281,6 +3732,7 @@ a.secondaryToolbarButton {
   padding-top: 5px;
   text-decoration: none;
 }
+
 a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   opacity: 0.5;
   pointer-events: none;
@@ -4350,7 +3802,8 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   box-sizing: border-box;
   display: inline-block;
 }
-.secondaryToolbarButton > span {
+
+.secondaryToolbarButton>span {
   padding-inline-end: 4px;
 }
 
@@ -4431,6 +3884,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   height: 22px;
   background-color: var(--separator-color);
 }
+
 .horizontalToolbarSeparator {
   display: block;
   margin: 6px 0;
@@ -4555,12 +4009,13 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   -moz-user-select: none;
   user-select: none;
 }
+
 #thumbnailView {
   width: calc(100% - 60px);
   padding: 10px 30px 0;
 }
 
-#thumbnailView > a:is(:active, :focus) {
+#thumbnailView>a:is(:active, :focus) {
   outline: 0;
 }
 
@@ -4577,14 +4032,15 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   border-radius: 2px;
 }
 
-#thumbnailView > a:last-of-type > .thumbnail {
+#thumbnailView>a:last-of-type>.thumbnail {
   margin-bottom: 10px;
 }
 
-a:focus > .thumbnail,
+a:focus>.thumbnail,
 .thumbnail:hover {
   border-color: var(--thumbnail-hover-color);
 }
+
 .thumbnail.selected {
   border-color: var(--thumbnail-selected-color) !important;
 }
@@ -4594,26 +4050,28 @@ a:focus > .thumbnail,
   height: var(--thumbnail-height);
   opacity: 0.9;
 }
-a:focus > .thumbnail > .thumbnailImage,
-.thumbnail:hover > .thumbnailImage {
+
+a:focus>.thumbnail>.thumbnailImage,
+.thumbnail:hover>.thumbnailImage {
   opacity: 0.95;
 }
-.thumbnail.selected > .thumbnailImage {
+
+.thumbnail.selected>.thumbnailImage {
   opacity: 1 !important;
 }
 
-.thumbnail:not([data-loaded]) > .thumbnailImage {
+.thumbnail:not([data-loaded])>.thumbnailImage {
   width: calc(var(--thumbnail-width) - 2px);
   height: calc(var(--thumbnail-height) - 2px);
   border: 1px dashed rgb(132 132 132);
 }
 
-.treeWithDeepNesting > .treeItem,
-.treeItem > .treeItems {
+.treeWithDeepNesting>.treeItem,
+.treeItem>.treeItems {
   margin-inline-start: 20px;
 }
 
-.treeItem > a {
+.treeItem>a {
   text-decoration: none;
   display: inline-block;
   min-width: calc(100% - 4px);
@@ -4632,13 +4090,15 @@ a:focus > .thumbnail > .thumbnailImage,
   cursor: pointer;
 }
 
-#layersView .treeItem > a * {
+#layersView .treeItem>a * {
   cursor: pointer;
 }
-#layersView .treeItem > a > label {
+
+#layersView .treeItem>a>label {
   padding-inline-start: 4px;
 }
-#layersView .treeItem > a > label > input {
+
+#layersView .treeItem>a>label>input {
   float: var(--inline-start);
   margin-top: 1px;
 }
@@ -4650,29 +4110,32 @@ a:focus > .thumbnail > .thumbnailImage,
   width: 0;
   color: rgb(255 255 255 / 0.5);
 }
+
 .treeItemToggler::before {
   inset-inline-end: 4px;
   -webkit-mask-image: var(--treeitem-expanded-icon);
   mask-image: var(--treeitem-expanded-icon);
 }
+
 .treeItemToggler.treeItemsHidden::before {
   -webkit-mask-image: var(--treeitem-collapsed-icon);
   mask-image: var(--treeitem-collapsed-icon);
   transform: scaleX(var(--dir-factor));
 }
-.treeItemToggler.treeItemsHidden ~ .treeItems {
+
+.treeItemToggler.treeItemsHidden~.treeItems {
   display: none;
 }
 
-.treeItem.selected > a {
+.treeItem.selected>a {
   background-color: var(--treeitem-selected-bg-color);
   color: var(--treeitem-selected-color);
 }
 
 .treeItemToggler:hover,
-.treeItemToggler:hover + a,
-.treeItemToggler:hover ~ .treeItems,
-.treeItem > a:hover {
+.treeItemToggler:hover+a,
+.treeItemToggler:hover~.treeItems,
+.treeItem>a:hover {
   background-color: var(--treeitem-bg-color);
   background-clip: padding-box;
   border-radius: 2px;
@@ -4709,15 +4172,16 @@ dialog {
   border-radius: 4px;
   box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
 }
+
 dialog::backdrop {
   background-color: rgb(0 0 0 / 0.2);
 }
 
-dialog > .row {
+dialog>.row {
   display: table-row;
 }
 
-dialog > .row > * {
+dialog>.row>* {
   display: table-cell;
 }
 
@@ -4745,6 +4209,7 @@ dialog :link {
 #passwordDialog {
   text-align: center;
 }
+
 #passwordDialog .toolbarField {
   width: 200px;
 }
@@ -4752,18 +4217,22 @@ dialog :link {
 #documentPropertiesDialog {
   text-align: left;
 }
-#documentPropertiesDialog .row > * {
+
+#documentPropertiesDialog .row>* {
   min-width: 100px;
   text-align: start;
 }
-#documentPropertiesDialog .row > span {
+
+#documentPropertiesDialog .row>span {
   width: 125px;
   word-wrap: break-word;
 }
-#documentPropertiesDialog .row > p {
+
+#documentPropertiesDialog .row>p {
   max-width: 225px;
   word-wrap: break-word;
 }
+
 #documentPropertiesDialog .buttonRow {
   margin-top: 10px;
 }
@@ -4771,14 +4240,16 @@ dialog :link {
 .grab-to-pan-grab {
   cursor: grab !important;
 }
-.grab-to-pan-grab
-  *:not(input):not(textarea):not(button):not(select):not(:link) {
+
+.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
   cursor: inherit !important;
 }
+
 .grab-to-pan-grab:active,
 .grab-to-pan-grabbing {
   cursor: grabbing !important;
 }
+
 .grab-to-pan-grabbing {
   position: fixed;
   background: rgb(0 0 0 / 0);
@@ -4800,16 +4271,20 @@ dialog :link {
   body {
     background: rgb(0 0 0 / 0) none;
   }
+
   body[data-pdfjsprinting] #outerContainer {
     display: none;
   }
+
   body[data-pdfjsprinting] #printContainer {
     display: block;
   }
+
   #printContainer {
     height: 100%;
   }
-  #printContainer > .printedPage {
+
+  #printContainer>.printedPage {
     page-break-after: always;
     page-break-inside: avoid;
     height: 100%;
@@ -4821,11 +4296,11 @@ dialog :link {
     align-items: center;
   }
 
-  #printContainer > .xfaPrintedPage .xfaPage {
+  #printContainer>.xfaPrintedPage .xfaPage {
     position: absolute;
   }
 
-  #printContainer > .xfaPrintedPage {
+  #printContainer>.xfaPrintedPage {
     page-break-after: always;
     page-break-inside: avoid;
     width: 100%;
@@ -4833,7 +4308,7 @@ dialog :link {
     position: relative;
   }
 
-  #printContainer > .printedPage :is(canvas, img) {
+  #printContainer>.printedPage :is(canvas, img) {
     max-width: 100%;
     max-height: 100%;
 
@@ -4850,6 +4325,7 @@ dialog :link {
   #sidebarContainer {
     background-color: var(--sidebar-narrow-bg-color);
   }
+
   #outerContainer.sidebarOpen #viewerContainer {
     inset-inline-start: 0 !important;
   }
@@ -4859,26 +4335,32 @@ dialog :link {
   :root {
     --editor-toolbar-base-offset: 40px;
   }
+
   #outerContainer .hiddenMediumView {
     display: none;
   }
+
   #outerContainer .visibleMediumView {
     display: inherit;
   }
 }
 
 @media all and (max-width: 690px) {
+
   .hiddenSmallView,
   .hiddenSmallView * {
     display: none;
   }
+
   .toolbarButtonSpacer {
     width: 0;
   }
+
   .findbar {
     inset-inline-start: 34px;
   }
 }
+
 /*
 @media all and (max-width: 560px){
   #scaleSelectContainer{
@@ -4889,6 +4371,7 @@ dialog :link {
 #showMoreBtnContainer {
   display: none;
 }
+
 .toolbar img.main-icon {
   height: 3.375rem;
   width: 3.375rem;
@@ -4900,7 +4383,7 @@ dialog :link {
     display: flex;
   }
 
-  #toolbarViewerMiddle > .splitToolbarButton {
+  #toolbarViewerMiddle>.splitToolbarButton {
     display: flex;
   }
 
@@ -4909,7 +4392,7 @@ dialog :link {
     margin-left: 0;
   }
 
-  #toolbarViewerRight > div.splitToolbarButton {
+  #toolbarViewerRight>div.splitToolbarButton {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -4961,16 +4444,16 @@ dialog :link {
   }
 
 
-  #pageBasedRedactionOverlay > .bg-card {
+  #pageBasedRedactionOverlay>.bg-card {
     padding: 1.5rem;
   }
 
-  #pageBasedRedactionOverlay > .bg-card > div.tool-header {
+  #pageBasedRedactionOverlay>.bg-card>div.tool-header {
     display: flex;
     column-gap: 10px;
   }
 
-  #pageBasedRedactionOverlay > .bg-card > div.tool-header > span:nth-child(1) {
+  #pageBasedRedactionOverlay>.bg-card>div.tool-header>span:nth-child(1) {
     margin: auto;
     height: 3.5rem;
     width: 3.5rem;
@@ -4978,16 +4461,16 @@ dialog :link {
     font-size: 2.5rem;
   }
 
-  #pageBasedRedactionOverlay > .bg-card > div.tool-header > span:nth-child(2) {
+  #pageBasedRedactionOverlay>.bg-card>div.tool-header>span:nth-child(2) {
     font-size: 1.5rem;
   }
 
-  #pageBasedRedactionOverlay > .bg-card > div:nth-child(3) {
+  #pageBasedRedactionOverlay>.bg-card>div:nth-child(3) {
     flex-direction: column;
     row-gap: 3px;
   }
 
-  #pageBasedRedactionOverlay > .bg-card > div:nth-child(3) > input {
+  #pageBasedRedactionOverlay>.bg-card>div:nth-child(3)>input {
     width: 100%;
     height: 30px;
     margin-left: 0 !important;
diff --git a/src/main/resources/static/pdfjs-legacy/css/viewer.css b/src/main/resources/static/pdfjs-legacy/css/viewer.css
index 5d78334f9..e431a4ad2 100644
--- a/src/main/resources/static/pdfjs-legacy/css/viewer.css
+++ b/src/main/resources/static/pdfjs-legacy/css/viewer.css
@@ -732,6 +732,7 @@
   }
 
 :root{
+  --navbar-height: 64px;
   --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
   --xfa-focus-outline:auto;
 }
@@ -3043,8 +3044,9 @@ body{
 
 #outerContainer{
   width:100%;
-  height:100%;
+  height: calc(100% - var(--navbar-height));
   position:relative;
+
 }
 
 #sidebarContainer{
diff --git a/src/main/resources/static/pdfjs/css/viewer.css b/src/main/resources/static/pdfjs/css/viewer.css
index 5d78334f9..26de2a044 100644
--- a/src/main/resources/static/pdfjs/css/viewer.css
+++ b/src/main/resources/static/pdfjs/css/viewer.css
@@ -13,3663 +13,3559 @@
  * limitations under the License.
  */
 
-.dialog{
-  --dialog-bg-color:white;
-  --dialog-border-color:white;
-  --dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
-  --text-primary-color:#15141a;
-  --text-secondary-color:#5b5b66;
-  --hover-filter:brightness(0.9);
-  --focus-ring-color:#0060df;
-  --focus-ring-outline:2px solid var(--focus-ring-color);
+.dialog {
+  --dialog-bg-color: white;
+  --dialog-border-color: white;
+  --dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
+  --text-primary-color: #15141a;
+  --text-secondary-color: #5b5b66;
+  --hover-filter: brightness(0.9);
+  --focus-ring-color: #0060df;
+  --focus-ring-outline: 2px solid var(--focus-ring-color);
 
-  --textarea-border-color:#8f8f9d;
-  --textarea-bg-color:white;
-  --textarea-fg-color:var(--text-secondary-color);
+  --textarea-border-color: #8f8f9d;
+  --textarea-bg-color: white;
+  --textarea-fg-color: var(--text-secondary-color);
 
-  --radio-bg-color:#f0f0f4;
-  --radio-checked-bg-color:#fbfbfe;
-  --radio-border-color:#8f8f9d;
-  --radio-checked-border-color:#0060df;
+  --radio-bg-color: #f0f0f4;
+  --radio-checked-bg-color: #fbfbfe;
+  --radio-border-color: #8f8f9d;
+  --radio-checked-border-color: #0060df;
 
-  --button-secondary-bg-color:#f0f0f4;
-  --button-secondary-fg-color:var(--text-primary-color);
-  --button-secondary-border-color:var(--button-secondary-bg-color);
-  --button-secondary-hover-bg-color:var(--button-secondary-bg-color);
-  --button-secondary-hover-fg-color:var(--button-secondary-fg-color);
-  --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color);
+  --button-secondary-bg-color: #f0f0f4;
+  --button-secondary-fg-color: var(--text-primary-color);
+  --button-secondary-border-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-bg-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
+  --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
 
-  --button-primary-bg-color:#0060df;
-  --button-primary-fg-color:#fbfbfe;
-  --button-primary-hover-bg-color:var(--button-primary-bg-color);
-  --button-primary-hover-fg-color:var(--button-primary-fg-color);
-  --button-primary-hover-border-color:var(--button-primary-hover-bg-color);
+  --button-primary-bg-color: #0060df;
+  --button-primary-fg-color: #fbfbfe;
+  --button-primary-hover-bg-color: var(--button-primary-bg-color);
+  --button-primary-hover-fg-color: var(--button-primary-fg-color);
+  --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
 
-  font:message-box;
-  font-size:13px;
-  font-weight:400;
-  line-height:150%;
-  border-radius:4px;
-  padding:12px 16px;
-  border:1px solid var(--dialog-border-color);
-  background:var(--dialog-bg-color);
-  color:var(--text-primary-color);
-  box-shadow:var(--dialog-shadow);
+  font: message-box;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 150%;
+  border-radius: 4px;
+  padding: 12px 16px;
+  border: 1px solid var(--dialog-border-color);
+  background: var(--dialog-bg-color);
+  color: var(--text-primary-color);
+  box-shadow: var(--dialog-shadow);
 }
 
-@media (prefers-color-scheme: dark){
+@media (prefers-color-scheme: dark) {
 
-:where(html:not(.is-light)) .dialog{
-    --dialog-bg-color:#1c1b22;
-    --dialog-border-color:#1c1b22;
-    --dialog-shadow:0 2px 14px 0 #15141a;
-    --text-primary-color:#fbfbfe;
-    --text-secondary-color:#cfcfd8;
-    --focus-ring-color:#0df;
-    --hover-filter:brightness(1.4);
+  :where(html:not(.is-light)) .dialog {
+    --dialog-bg-color: #1c1b22;
+    --dialog-border-color: #1c1b22;
+    --dialog-shadow: 0 2px 14px 0 #15141a;
+    --text-primary-color: #fbfbfe;
+    --text-secondary-color: #cfcfd8;
+    --focus-ring-color: #0df;
+    --hover-filter: brightness(1.4);
 
-    --textarea-bg-color:#42414d;
+    --textarea-bg-color: #42414d;
 
-    --radio-bg-color:#2b2a33;
-    --radio-checked-bg-color:#15141a;
-    --radio-checked-border-color:#0df;
+    --radio-bg-color: #2b2a33;
+    --radio-checked-bg-color: #15141a;
+    --radio-checked-border-color: #0df;
 
-    --button-secondary-bg-color:#2b2a33;
-    --button-primary-bg-color:#0df;
-    --button-primary-fg-color:#15141a;
-}
+    --button-secondary-bg-color: #2b2a33;
+    --button-primary-bg-color: #0df;
+    --button-primary-fg-color: #15141a;
   }
-
-:where(html.is-dark) .dialog{
-    --dialog-bg-color:#1c1b22;
-    --dialog-border-color:#1c1b22;
-    --dialog-shadow:0 2px 14px 0 #15141a;
-    --text-primary-color:#fbfbfe;
-    --text-secondary-color:#cfcfd8;
-    --focus-ring-color:#0df;
-    --hover-filter:brightness(1.4);
-
-    --textarea-bg-color:#42414d;
-
-    --radio-bg-color:#2b2a33;
-    --radio-checked-bg-color:#15141a;
-    --radio-checked-border-color:#0df;
-
-    --button-secondary-bg-color:#2b2a33;
-    --button-primary-bg-color:#0df;
-    --button-primary-fg-color:#15141a;
 }
 
-@media screen and (forced-colors: active){
+:where(html.is-dark) .dialog {
+  --dialog-bg-color: #1c1b22;
+  --dialog-border-color: #1c1b22;
+  --dialog-shadow: 0 2px 14px 0 #15141a;
+  --text-primary-color: #fbfbfe;
+  --text-secondary-color: #cfcfd8;
+  --focus-ring-color: #0df;
+  --hover-filter: brightness(1.4);
 
-.dialog{
-    --dialog-bg-color:Canvas;
-    --dialog-border-color:CanvasText;
-    --dialog-shadow:none;
-    --text-primary-color:CanvasText;
-    --text-secondary-color:CanvasText;
-    --hover-filter:none;
-    --focus-ring-color:ButtonBorder;
+  --textarea-bg-color: #42414d;
 
-    --textarea-border-color:ButtonBorder;
-    --textarea-bg-color:Field;
-    --textarea-fg-color:ButtonText;
+  --radio-bg-color: #2b2a33;
+  --radio-checked-bg-color: #15141a;
+  --radio-checked-border-color: #0df;
 
-    --radio-bg-color:ButtonFace;
-    --radio-checked-bg-color:ButtonFace;
-    --radio-border-color:ButtonText;
-    --radio-checked-border-color:ButtonText;
-
-    --button-secondary-bg-color:ButtonFace;
-    --button-secondary-fg-color:ButtonText;
-    --button-secondary-border-color:ButtonText;
-    --button-secondary-hover-bg-color:AccentColor;
-    --button-secondary-hover-fg-color:AccentColorText;
-
-    --button-primary-bg-color:ButtonText;
-    --button-primary-fg-color:ButtonFace;
-    --button-primary-hover-bg-color:AccentColor;
-    --button-primary-hover-fg-color:AccentColorText;
-}
-  }
-
-.dialog .mainContainer *:focus-visible{
-      outline:var(--focus-ring-outline);
-      outline-offset:2px;
-    }
-
-.dialog .mainContainer .radio{
-      display:flex;
-      flex-direction:column;
-      align-items:flex-start;
-      gap:4px;
-    }
-
-.dialog .mainContainer .radio > .radioButton{
-        display:flex;
-        gap:8px;
-        align-self:stretch;
-        align-items:center;
-      }
-
-.dialog .mainContainer .radio > .radioButton input{
-          -webkit-appearance:none;
-             -moz-appearance:none;
-                  appearance:none;
-          box-sizing:border-box;
-          width:16px;
-          height:16px;
-          border-radius:50%;
-          background-color:var(--radio-bg-color);
-          border:1px solid var(--radio-border-color);
-        }
-
-.dialog .mainContainer .radio > .radioButton input:hover{
-            filter:var(--hover-filter);
-          }
-
-.dialog .mainContainer .radio > .radioButton input:checked{
-            background-color:var(--radio-checked-bg-color);
-            border:4px solid var(--radio-checked-border-color);
-          }
-
-.dialog .mainContainer .radio > .radioLabel{
-        display:flex;
-        padding-inline-start:24px;
-        align-items:flex-start;
-        gap:10px;
-        align-self:stretch;
-      }
-
-.dialog .mainContainer .radio > .radioLabel > span{
-          flex:1 0 0;
-          font-size:11px;
-          color:var(--text-secondary-color);
-        }
-
-.dialog .mainContainer button{
-      border-radius:4px;
-      border:1px solid;
-      font:menu;
-      font-weight:600;
-      padding:4px 16px;
-      width:auto;
-      height:32px;
-    }
-
-.dialog .mainContainer button:hover{
-        cursor:pointer;
-        filter:var(--hover-filter);
-      }
-
-.dialog .mainContainer button.secondaryButton{
-        color:var(--button-secondary-fg-color);
-        background-color:var(--button-secondary-bg-color);
-        border-color:var(--button-secondary-border-color);
-      }
-
-.dialog .mainContainer button.secondaryButton:hover{
-          color:var(--button-secondary-hover-fg-color);
-          background-color:var(--button-secondary-hover-bg-color);
-          border-color:var(--button-secondary-hover-border-color);
-        }
-
-.dialog .mainContainer button.primaryButton{
-        color:var(--button-primary-hover-fg-color);
-        background-color:var(--button-primary-hover-bg-color);
-        border-color:var(--button-primary-hover-border-color);
-        opacity:1;
-      }
-
-.dialog .mainContainer button.primaryButton:hover{
-          color:var(--button-primary-hover-fg-color);
-          background-color:var(--button-primary-hover-bg-color);
-          border-color:var(--button-primary-hover-border-color);
-        }
-
-.dialog .mainContainer textarea{
-      font:inherit;
-      padding:8px;
-      resize:none;
-      margin:0;
-      box-sizing:border-box;
-      border-radius:4px;
-      border:1px solid var(--textarea-border-color);
-      background:var(--textarea-bg-color);
-      color:var(--textarea-fg-color);
-    }
-
-.dialog .mainContainer textarea:focus{
-        outline-offset:0;
-        border-color:transparent;
-      }
-
-.dialog .mainContainer textarea:disabled{
-        pointer-events:none;
-        opacity:0.4;
-      }
-
-.textLayer{
-  position:absolute;
-  text-align:initial;
-  inset:0;
-  overflow:clip;
-  opacity:1;
-  line-height:1;
-  -webkit-text-size-adjust:none;
-     -moz-text-size-adjust:none;
-          text-size-adjust:none;
-  forced-color-adjust:none;
-  transform-origin:0 0;
-  caret-color:CanvasText;
-  z-index:0;
+  --button-secondary-bg-color: #2b2a33;
+  --button-primary-bg-color: #0df;
+  --button-primary-fg-color: #15141a;
 }
 
-.textLayer.highlighting{
-    touch-action:none;
+@media screen and (forced-colors: active) {
+
+  .dialog {
+    --dialog-bg-color: Canvas;
+    --dialog-border-color: CanvasText;
+    --dialog-shadow: none;
+    --text-primary-color: CanvasText;
+    --text-secondary-color: CanvasText;
+    --hover-filter: none;
+    --focus-ring-color: ButtonBorder;
+
+    --textarea-border-color: ButtonBorder;
+    --textarea-bg-color: Field;
+    --textarea-fg-color: ButtonText;
+
+    --radio-bg-color: ButtonFace;
+    --radio-checked-bg-color: ButtonFace;
+    --radio-border-color: ButtonText;
+    --radio-checked-border-color: ButtonText;
+
+    --button-secondary-bg-color: ButtonFace;
+    --button-secondary-fg-color: ButtonText;
+    --button-secondary-border-color: ButtonText;
+    --button-secondary-hover-bg-color: AccentColor;
+    --button-secondary-hover-fg-color: AccentColorText;
+
+    --button-primary-bg-color: ButtonText;
+    --button-primary-fg-color: ButtonFace;
+    --button-primary-hover-bg-color: AccentColor;
+    --button-primary-hover-fg-color: AccentColorText;
   }
-
-.textLayer :is(span, br){
-    color:transparent;
-    position:absolute;
-    white-space:pre;
-    cursor:text;
-    transform-origin:0% 0%;
-  }
-
-.textLayer > :not(.markedContent),
-  .textLayer .markedContent span:not(.markedContent){
-    z-index:1;
-  }
-
-.textLayer span.markedContent{
-    top:0;
-    height:0;
-  }
-
-.textLayer .highlight{
-    --highlight-bg-color:rgb(180 0 170 / 0.25);
-    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
-    --highlight-backdrop-filter:none;
-    --highlight-selected-backdrop-filter:none;
-
-    margin:-1px;
-    padding:1px;
-    background-color:var(--highlight-bg-color);
-    -webkit-backdrop-filter:var(--highlight-backdrop-filter);
-            backdrop-filter:var(--highlight-backdrop-filter);
-    border-radius:4px;
-  }
-
-@media screen and (forced-colors: active){
-
-.textLayer .highlight{
-      --highlight-bg-color:transparent;
-      --highlight-selected-bg-color:transparent;
-      --highlight-backdrop-filter:var(--hcm-highlight-filter);
-      --highlight-selected-backdrop-filter:var(
-        --hcm-highlight-selected-filter
-      );
-  }
-    }
-
-.textLayer .highlight.appended{
-      position:initial;
-    }
-
-.textLayer .highlight.begin{
-      border-radius:4px 0 0 4px;
-    }
-
-.textLayer .highlight.end{
-      border-radius:0 4px 4px 0;
-    }
-
-.textLayer .highlight.middle{
-      border-radius:0;
-    }
-
-.textLayer .highlight.selected{
-      background-color:var(--highlight-selected-bg-color);
-      -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter);
-              backdrop-filter:var(--highlight-selected-backdrop-filter);
-    }
-
-.textLayer ::-moz-selection{
-    background:rgba(0 0 255 / 0.25);
-    background:color-mix(in srgb, AccentColor, transparent 75%);
-  }
-
-.textLayer ::selection{
-    background:rgba(0 0 255 / 0.25);
-    background:color-mix(in srgb, AccentColor, transparent 75%);
-  }
-
-.textLayer br::-moz-selection{
-    background:transparent;
-  }
-
-.textLayer br::selection{
-    background:transparent;
-  }
-
-.textLayer .endOfContent{
-    display:block;
-    position:absolute;
-    inset:100% 0 0;
-    z-index:0;
-    cursor:default;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-            user-select:none;
-  }
-
-.textLayer .endOfContent.active{
-      top:0;
-    }
-
-.annotationLayer{
-  --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
-  --input-focus-border-color:Highlight;
-  --input-focus-outline:1px solid Canvas;
-  --input-unfocused-border-color:transparent;
-  --input-disabled-border-color:transparent;
-  --input-hover-border-color:black;
-  --link-outline:none;
-
-  position:absolute;
-  top:0;
-  left:0;
-  pointer-events:none;
-  transform-origin:0 0;
 }
 
-@media screen and (forced-colors: active){
-
-.annotationLayer{
-    --input-focus-border-color:CanvasText;
-    --input-unfocused-border-color:ActiveText;
-    --input-disabled-border-color:GrayText;
-    --input-hover-border-color:Highlight;
-    --link-outline:1.5px solid LinkText;
+.dialog .mainContainer *:focus-visible {
+  outline: var(--focus-ring-outline);
+  outline-offset: 2px;
 }
 
-    .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
-      outline:1.5px solid selectedItem;
-    }
+.dialog .mainContainer .radio {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
 
-    .annotationLayer .linkAnnotation{
-      outline:var(--link-outline);
-    }
+.dialog .mainContainer .radio>.radioButton {
+  display: flex;
+  gap: 8px;
+  align-self: stretch;
+  align-items: center;
+}
 
-      .annotationLayer .linkAnnotation:hover{
-        -webkit-backdrop-filter:var(--hcm-highlight-filter);
-                backdrop-filter:var(--hcm-highlight-filter);
-      }
+.dialog .mainContainer .radio>.radioButton input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--radio-bg-color);
+  border: 1px solid var(--radio-border-color);
+}
 
-      .annotationLayer .linkAnnotation > a:hover{
-        opacity:0 !important;
-        background:none !important;
-        box-shadow:none;
-      }
+.dialog .mainContainer .radio>.radioButton input:hover {
+  filter: var(--hover-filter);
+}
 
-    .annotationLayer .popupAnnotation .popup{
-      outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
-      background-color:ButtonFace !important;
-      color:ButtonText !important;
-    }
+.dialog .mainContainer .radio>.radioButton input:checked {
+  background-color: var(--radio-checked-bg-color);
+  border: 4px solid var(--radio-checked-border-color);
+}
 
-    .annotationLayer .highlightArea:hover::after{
-      position:absolute;
-      top:0;
-      left:0;
-      width:100%;
-      height:100%;
-      -webkit-backdrop-filter:var(--hcm-highlight-filter);
-              backdrop-filter:var(--hcm-highlight-filter);
-      content:"";
-      pointer-events:none;
-    }
+.dialog .mainContainer .radio>.radioLabel {
+  display: flex;
+  padding-inline-start: 24px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
 
-    .annotationLayer .popupAnnotation.focused .popup{
-      outline:calc(3px * var(--scale-factor)) solid Highlight !important;
-    }
+.dialog .mainContainer .radio>.radioLabel>span {
+  flex: 1 0 0;
+  font-size: 11px;
+  color: var(--text-secondary-color);
+}
+
+.dialog .mainContainer button {
+  border-radius: 4px;
+  border: 1px solid;
+  font: menu;
+  font-weight: 600;
+  padding: 4px 16px;
+  width: auto;
+  height: 32px;
+}
+
+.dialog .mainContainer button:hover {
+  cursor: pointer;
+  filter: var(--hover-filter);
+}
+
+.dialog .mainContainer button.secondaryButton {
+  color: var(--button-secondary-fg-color);
+  background-color: var(--button-secondary-bg-color);
+  border-color: var(--button-secondary-border-color);
+}
+
+.dialog .mainContainer button.secondaryButton:hover {
+  color: var(--button-secondary-hover-fg-color);
+  background-color: var(--button-secondary-hover-bg-color);
+  border-color: var(--button-secondary-hover-border-color);
+}
+
+.dialog .mainContainer button.primaryButton {
+  color: var(--button-primary-hover-fg-color);
+  background-color: var(--button-primary-hover-bg-color);
+  border-color: var(--button-primary-hover-border-color);
+  opacity: 1;
+}
+
+.dialog .mainContainer button.primaryButton:hover {
+  color: var(--button-primary-hover-fg-color);
+  background-color: var(--button-primary-hover-bg-color);
+  border-color: var(--button-primary-hover-border-color);
+}
+
+.dialog .mainContainer textarea {
+  font: inherit;
+  padding: 8px;
+  resize: none;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid var(--textarea-border-color);
+  background: var(--textarea-bg-color);
+  color: var(--textarea-fg-color);
+}
+
+.dialog .mainContainer textarea:focus {
+  outline-offset: 0;
+  border-color: transparent;
+}
+
+.dialog .mainContainer textarea:disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.textLayer {
+  position: absolute;
+  text-align: initial;
+  inset: 0;
+  overflow: clip;
+  opacity: 1;
+  line-height: 1;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  text-size-adjust: none;
+  forced-color-adjust: none;
+  transform-origin: 0 0;
+  caret-color: CanvasText;
+  z-index: 0;
+}
+
+.textLayer.highlighting {
+  touch-action: none;
+}
+
+.textLayer :is(span, br) {
+  color: transparent;
+  position: absolute;
+  white-space: pre;
+  cursor: text;
+  transform-origin: 0% 0%;
+}
+
+.textLayer> :not(.markedContent),
+.textLayer .markedContent span:not(.markedContent) {
+  z-index: 1;
+}
+
+.textLayer span.markedContent {
+  top: 0;
+  height: 0;
+}
+
+.textLayer .highlight {
+  --highlight-bg-color: rgb(180 0 170 / 0.25);
+  --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
+  --highlight-backdrop-filter: none;
+  --highlight-selected-backdrop-filter: none;
+
+  margin: -1px;
+  padding: 1px;
+  background-color: var(--highlight-bg-color);
+  -webkit-backdrop-filter: var(--highlight-backdrop-filter);
+  backdrop-filter: var(--highlight-backdrop-filter);
+  border-radius: 4px;
+}
+
+@media screen and (forced-colors: active) {
+
+  .textLayer .highlight {
+    --highlight-bg-color: transparent;
+    --highlight-selected-bg-color: transparent;
+    --highlight-backdrop-filter: var(--hcm-highlight-filter);
+    --highlight-selected-backdrop-filter: var(--hcm-highlight-selected-filter);
+  }
+}
+
+.textLayer .highlight.appended {
+  position: initial;
+}
+
+.textLayer .highlight.begin {
+  border-radius: 4px 0 0 4px;
+}
+
+.textLayer .highlight.end {
+  border-radius: 0 4px 4px 0;
+}
+
+.textLayer .highlight.middle {
+  border-radius: 0;
+}
+
+.textLayer .highlight.selected {
+  background-color: var(--highlight-selected-bg-color);
+  -webkit-backdrop-filter: var(--highlight-selected-backdrop-filter);
+  backdrop-filter: var(--highlight-selected-backdrop-filter);
+}
+
+.textLayer ::-moz-selection {
+  background: rgba(0 0 255 / 0.25);
+  background: color-mix(in srgb, AccentColor, transparent 75%);
+}
+
+.textLayer ::selection {
+  background: rgba(0 0 255 / 0.25);
+  background: color-mix(in srgb, AccentColor, transparent 75%);
+}
+
+.textLayer br::-moz-selection {
+  background: transparent;
+}
+
+.textLayer br::selection {
+  background: transparent;
+}
+
+.textLayer .endOfContent {
+  display: block;
+  position: absolute;
+  inset: 100% 0 0;
+  z-index: 0;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.textLayer .endOfContent.active {
+  top: 0;
+}
+
+.annotationLayer {
+  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --input-focus-border-color: Highlight;
+  --input-focus-outline: 1px solid Canvas;
+  --input-unfocused-border-color: transparent;
+  --input-disabled-border-color: transparent;
+  --input-hover-border-color: black;
+  --link-outline: none;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+@media screen and (forced-colors: active) {
+
+  .annotationLayer {
+    --input-focus-border-color: CanvasText;
+    --input-unfocused-border-color: ActiveText;
+    --input-disabled-border-color: GrayText;
+    --input-hover-border-color: Highlight;
+    --link-outline: 1.5px solid LinkText;
   }
 
-.annotationLayer[data-main-rotation="90"] .norotate{
-    transform:rotate(270deg) translateX(-100%);
+  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
+  .annotationLayer .choiceWidgetAnnotation select:required,
+  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
+    outline: 1.5px solid selectedItem;
   }
 
-.annotationLayer[data-main-rotation="180"] .norotate{
-    transform:rotate(180deg) translate(-100%, -100%);
+  .annotationLayer .linkAnnotation {
+    outline: var(--link-outline);
   }
 
-.annotationLayer[data-main-rotation="270"] .norotate{
-    transform:rotate(90deg) translateY(-100%);
+  .annotationLayer .linkAnnotation:hover {
+    -webkit-backdrop-filter: var(--hcm-highlight-filter);
+    backdrop-filter: var(--hcm-highlight-filter);
   }
 
+  .annotationLayer .linkAnnotation>a:hover {
+    opacity: 0 !important;
+    background: none !important;
+    box-shadow: none;
+  }
+
+  .annotationLayer .popupAnnotation .popup {
+    outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+  }
+
+  .annotationLayer .highlightArea:hover::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-backdrop-filter: var(--hcm-highlight-filter);
+    backdrop-filter: var(--hcm-highlight-filter);
+    content: "";
+    pointer-events: none;
+  }
+
+  .annotationLayer .popupAnnotation.focused .popup {
+    outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+  }
+}
+
+.annotationLayer[data-main-rotation="90"] .norotate {
+  transform: rotate(270deg) translateX(-100%);
+}
+
+.annotationLayer[data-main-rotation="180"] .norotate {
+  transform: rotate(180deg) translate(-100%, -100%);
+}
+
+.annotationLayer[data-main-rotation="270"] .norotate {
+  transform: rotate(90deg) translateY(-100%);
+}
+
 .annotationLayer.disabled section,
-    .annotationLayer.disabled .popup{
-      pointer-events:none;
-    }
+.annotationLayer.disabled .popup {
+  pointer-events: none;
+}
 
-.annotationLayer .annotationContent{
-    position:absolute;
-    width:100%;
-    height:100%;
-    pointer-events:none;
-  }
+.annotationLayer .annotationContent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
 
-.annotationLayer .annotationContent.freetext{
-      background:transparent;
-      border:none;
-      inset:0;
-      overflow:visible;
-      white-space:nowrap;
-      font:10px sans-serif;
-      line-height:1.35;
-      -webkit-user-select:none;
-         -moz-user-select:none;
-              user-select:none;
-    }
+.annotationLayer .annotationContent.freetext {
+  background: transparent;
+  border: none;
+  inset: 0;
+  overflow: visible;
+  white-space: nowrap;
+  font: 10px sans-serif;
+  line-height: 1.35;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
-.annotationLayer section{
-    position:absolute;
-    text-align:initial;
-    pointer-events:auto;
-    box-sizing:border-box;
-    transform-origin:0 0;
-  }
+.annotationLayer section {
+  position: absolute;
+  text-align: initial;
+  pointer-events: auto;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+}
 
-.annotationLayer section:has(div.annotationContent) canvas.annotationContent{
-        display:none;
-      }
+.annotationLayer section:has(div.annotationContent) canvas.annotationContent {
+  display: none;
+}
 
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
-    position:absolute;
-    font-size:1em;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
-  }
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton)>a {
+  position: absolute;
+  font-size: 1em;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
-    > a:hover{
-    opacity:0.2;
-    background-color:rgb(255 255 0);
-    box-shadow:0 2px 10px rgb(255 255 0);
-  }
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)>a:hover {
+  opacity: 0.2;
+  background-color: rgb(255 255 0);
+  box-shadow: 0 2px 10px rgb(255 255 0);
+}
 
-.annotationLayer .linkAnnotation.hasBorder:hover{
-    background-color:rgb(255 255 0 / 0.2);
-  }
+.annotationLayer .linkAnnotation.hasBorder:hover {
+  background-color: rgb(255 255 0 / 0.2);
+}
 
-.annotationLayer .hasBorder{
-    background-size:100% 100%;
-  }
+.annotationLayer .hasBorder {
+  background-size: 100% 100%;
+}
 
-.annotationLayer .textAnnotation img{
-    position:absolute;
-    cursor:pointer;
-    width:100%;
-    height:100%;
-    top:0;
-    left:0;
-  }
+.annotationLayer .textAnnotation img {
+  position: absolute;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
-    background-image:var(--annotation-unfocused-field-background);
-    border:2px solid var(--input-unfocused-border-color);
-    box-sizing:border-box;
-    font:calc(9px * var(--scale-factor)) sans-serif;
-    height:100%;
-    margin:0;
-    vertical-align:top;
-    width:100%;
-  }
+.annotationLayer .textWidgetAnnotation :is(input, textarea),
+.annotationLayer .choiceWidgetAnnotation select,
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+  background-image: var(--annotation-unfocused-field-background);
+  border: 2px solid var(--input-unfocused-border-color);
+  box-sizing: border-box;
+  font: calc(9px * var(--scale-factor)) sans-serif;
+  height: 100%;
+  margin: 0;
+  vertical-align: top;
+  width: 100%;
+}
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
-    outline:1.5px solid red;
-  }
+.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
+.annotationLayer .choiceWidgetAnnotation select:required,
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
+  outline: 1.5px solid red;
+}
 
-.annotationLayer .choiceWidgetAnnotation select option{
-    padding:0;
-  }
+.annotationLayer .choiceWidgetAnnotation select option {
+  padding: 0;
+}
 
-.annotationLayer .buttonWidgetAnnotation.radioButton input{
-    border-radius:50%;
-  }
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+  border-radius: 50%;
+}
 
-.annotationLayer .textWidgetAnnotation textarea{
-    resize:none;
-  }
+.annotationLayer .textWidgetAnnotation textarea {
+  resize: none;
+}
 
-.annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea), .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
-    background:none;
-    border:2px solid var(--input-disabled-border-color);
-    cursor:not-allowed;
-  }
+.annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea),
+.annotationLayer .choiceWidgetAnnotation select[disabled],
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
+  background: none;
+  border: 2px solid var(--input-disabled-border-color);
+  cursor: not-allowed;
+}
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
-    border:2px solid var(--input-hover-border-color);
-  }
+.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
+  border: 2px solid var(--input-hover-border-color);
+}
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover{
-    border-radius:2px;
-  }
+.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
+  border-radius: 2px;
+}
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus{
-    background:none;
-    border:2px solid var(--input-focus-border-color);
-    border-radius:2px;
-    outline:var(--input-focus-outline);
-  }
+.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
+.annotationLayer .choiceWidgetAnnotation select:focus {
+  background: none;
+  border: 2px solid var(--input-focus-border-color);
+  border-radius: 2px;
+  outline: var(--input-focus-outline);
+}
 
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
-    background-image:none;
-    background-color:transparent;
-  }
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
+  background-image: none;
+  background-color: transparent;
+}
 
-.annotationLayer .buttonWidgetAnnotation.checkBox :focus{
-    border:2px solid var(--input-focus-border-color);
-    border-radius:2px;
-    outline:var(--input-focus-outline);
-  }
+.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
+  border: 2px solid var(--input-focus-border-color);
+  border-radius: 2px;
+  outline: var(--input-focus-outline);
+}
 
-.annotationLayer .buttonWidgetAnnotation.radioButton :focus{
-    border:2px solid var(--input-focus-border-color);
-    outline:var(--input-focus-outline);
-  }
+.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
+  border: 2px solid var(--input-focus-border-color);
+  outline: var(--input-focus-outline);
+}
 
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
-  .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
-  .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
-    background-color:CanvasText;
-    content:"";
-    display:block;
-    position:absolute;
-  }
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
+  background-color: CanvasText;
+  content: "";
+  display: block;
+  position: absolute;
+}
 
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
-  .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
-    height:80%;
-    left:45%;
-    width:1px;
-  }
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{
-    transform:rotate(45deg);
-  }
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
-    transform:rotate(-45deg);
-  }
-
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
-    border-radius:50%;
-    height:50%;
-    left:25%;
-    top:25%;
-    width:50%;
-  }
-
-.annotationLayer .textWidgetAnnotation input.comb{
-    font-family:monospace;
-    padding-left:2px;
-    padding-right:0;
-  }
-
-.annotationLayer .textWidgetAnnotation input.comb:focus{
-    width:103%;
-  }
-
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-  }
-
-.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{
-    height:100%;
-    width:100%;
-  }
-
-.annotationLayer .popupAnnotation{
-    position:absolute;
-    font-size:calc(9px * var(--scale-factor));
-    pointer-events:none;
-    width:-moz-max-content;
-    width:max-content;
-    max-width:45%;
-    height:auto;
-  }
-
-.annotationLayer .popup{
-    background-color:rgb(255 255 153);
-    box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
-    border-radius:calc(2px * var(--scale-factor));
-    outline:1.5px solid rgb(255 255 74);
-    padding:calc(6px * var(--scale-factor));
-    cursor:pointer;
-    font:message-box;
-    white-space:normal;
-    word-wrap:break-word;
-    pointer-events:auto;
-  }
-
-.annotationLayer .popupAnnotation.focused .popup{
-    outline-width:3px;
-  }
-
-.annotationLayer .popup *{
-    font-size:calc(9px * var(--scale-factor));
-  }
-
-.annotationLayer .popup > .header{
-    display:inline-block;
-  }
-
-.annotationLayer .popup > .header h1{
-    display:inline;
-  }
-
-.annotationLayer .popup > .header .popupDate{
-    display:inline-block;
-    margin-left:calc(5px * var(--scale-factor));
-    width:-moz-fit-content;
-    width:fit-content;
-  }
-
-.annotationLayer .popupContent{
-    border-top:1px solid rgb(51 51 51);
-    margin-top:calc(2px * var(--scale-factor));
-    padding-top:calc(2px * var(--scale-factor));
-  }
-
-.annotationLayer .richText > *{
-    white-space:pre-wrap;
-    font-size:calc(9px * var(--scale-factor));
-  }
-
-.annotationLayer .popupTriggerArea{
-    cursor:pointer;
-  }
-
-.annotationLayer section svg{
-    position:absolute;
-    width:100%;
-    height:100%;
-    top:0;
-    left:0;
-  }
-
-.annotationLayer .annotationTextContent{
-    position:absolute;
-    width:100%;
-    height:100%;
-    opacity:0;
-    color:transparent;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-            user-select:none;
-    pointer-events:none;
-  }
-
-.annotationLayer .annotationTextContent span{
-      width:100%;
-      display:inline-block;
-    }
-
-.annotationLayer svg.quadrilateralsContainer{
-    contain:strict;
-    width:0;
-    height:0;
-    position:absolute;
-    top:0;
-    left:0;
-    z-index:-1;
-  }
-
-:root{
-  --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
-  --xfa-focus-outline:auto;
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
+  height: 80%;
+  left: 45%;
+  width: 1px;
 }
 
-@media screen and (forced-colors: active){
-  :root{
-    --xfa-focus-outline:2px solid CanvasText;
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
+  transform: rotate(45deg);
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
+  transform: rotate(-45deg);
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
+  border-radius: 50%;
+  height: 50%;
+  left: 25%;
+  top: 25%;
+  width: 50%;
+}
+
+.annotationLayer .textWidgetAnnotation input.comb {
+  font-family: monospace;
+  padding-left: 2px;
+  padding-right: 0;
+}
+
+.annotationLayer .textWidgetAnnotation input.comb:focus {
+  width: 103%;
+}
+
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
+  height: 100%;
+  width: 100%;
+}
+
+.annotationLayer .popupAnnotation {
+  position: absolute;
+  font-size: calc(9px * var(--scale-factor));
+  pointer-events: none;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 45%;
+  height: auto;
+}
+
+.annotationLayer .popup {
+  background-color: rgb(255 255 153);
+  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
+  border-radius: calc(2px * var(--scale-factor));
+  outline: 1.5px solid rgb(255 255 74);
+  padding: calc(6px * var(--scale-factor));
+  cursor: pointer;
+  font: message-box;
+  white-space: normal;
+  word-wrap: break-word;
+  pointer-events: auto;
+}
+
+.annotationLayer .popupAnnotation.focused .popup {
+  outline-width: 3px;
+}
+
+.annotationLayer .popup * {
+  font-size: calc(9px * var(--scale-factor));
+}
+
+.annotationLayer .popup>.header {
+  display: inline-block;
+}
+
+.annotationLayer .popup>.header h1 {
+  display: inline;
+}
+
+.annotationLayer .popup>.header .popupDate {
+  display: inline-block;
+  margin-left: calc(5px * var(--scale-factor));
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.annotationLayer .popupContent {
+  border-top: 1px solid rgb(51 51 51);
+  margin-top: calc(2px * var(--scale-factor));
+  padding-top: calc(2px * var(--scale-factor));
+}
+
+.annotationLayer .richText>* {
+  white-space: pre-wrap;
+  font-size: calc(9px * var(--scale-factor));
+}
+
+.annotationLayer .popupTriggerArea {
+  cursor: pointer;
+}
+
+.annotationLayer section svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.annotationLayer .annotationTextContent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  color: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.annotationLayer .annotationTextContent span {
+  width: 100%;
+  display: inline-block;
+}
+
+.annotationLayer svg.quadrilateralsContainer {
+  contain: strict;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+:root {
+  --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --xfa-focus-outline: auto;
+}
+
+@media screen and (forced-colors: active) {
+  :root {
+    --xfa-focus-outline: 2px solid CanvasText;
   }
-  .xfaLayer *:required{
-    outline:1.5px solid selectedItem;
+
+  .xfaLayer *:required {
+    outline: 1.5px solid selectedItem;
   }
 }
 
-.xfaLayer{
-  background-color:transparent;
+.xfaLayer {
+  background-color: transparent;
 }
 
-.xfaLayer .highlight{
-  margin:-1px;
-  padding:1px;
-  background-color:rgb(239 203 237);
-  border-radius:4px;
+.xfaLayer .highlight {
+  margin: -1px;
+  padding: 1px;
+  background-color: rgb(239 203 237);
+  border-radius: 4px;
 }
 
-.xfaLayer .highlight.appended{
-  position:initial;
+.xfaLayer .highlight.appended {
+  position: initial;
 }
 
-.xfaLayer .highlight.begin{
-  border-radius:4px 0 0 4px;
+.xfaLayer .highlight.begin {
+  border-radius: 4px 0 0 4px;
 }
 
-.xfaLayer .highlight.end{
-  border-radius:0 4px 4px 0;
+.xfaLayer .highlight.end {
+  border-radius: 0 4px 4px 0;
 }
 
-.xfaLayer .highlight.middle{
-  border-radius:0;
+.xfaLayer .highlight.middle {
+  border-radius: 0;
 }
 
-.xfaLayer .highlight.selected{
-  background-color:rgb(203 223 203);
+.xfaLayer .highlight.selected {
+  background-color: rgb(203 223 203);
 }
 
-.xfaPage{
-  overflow:hidden;
-  position:relative;
+.xfaPage {
+  overflow: hidden;
+  position: relative;
 }
 
-.xfaContentarea{
-  position:absolute;
+.xfaContentarea {
+  position: absolute;
 }
 
-.xfaPrintOnly{
-  display:none;
+.xfaPrintOnly {
+  display: none;
 }
 
-.xfaLayer{
-  position:absolute;
-  text-align:initial;
-  top:0;
-  left:0;
-  transform-origin:0 0;
-  line-height:1.2;
+.xfaLayer {
+  position: absolute;
+  text-align: initial;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  line-height: 1.2;
 }
 
-.xfaLayer *{
-  color:inherit;
-  font:inherit;
-  font-style:inherit;
-  font-weight:inherit;
-  font-kerning:inherit;
-  letter-spacing:-0.01px;
-  text-align:inherit;
-  text-decoration:inherit;
-  box-sizing:border-box;
-  background-color:transparent;
-  padding:0;
-  margin:0;
-  pointer-events:auto;
-  line-height:inherit;
+.xfaLayer * {
+  color: inherit;
+  font: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-kerning: inherit;
+  letter-spacing: -0.01px;
+  text-align: inherit;
+  text-decoration: inherit;
+  box-sizing: border-box;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  pointer-events: auto;
+  line-height: inherit;
 }
 
-.xfaLayer *:required{
-  outline:1.5px solid red;
+.xfaLayer *:required {
+  outline: 1.5px solid red;
 }
 
 .xfaLayer div,
 .xfaLayer svg,
-.xfaLayer svg *{
-  pointer-events:none;
+.xfaLayer svg * {
+  pointer-events: none;
 }
 
-.xfaLayer a{
-  color:blue;
+.xfaLayer a {
+  color: blue;
 }
 
-.xfaRich li{
-  margin-left:3em;
+.xfaRich li {
+  margin-left: 3em;
 }
 
-.xfaFont{
-  color:black;
-  font-weight:normal;
-  font-kerning:none;
-  font-size:10px;
-  font-style:normal;
-  letter-spacing:0;
-  text-decoration:none;
-  vertical-align:0;
+.xfaFont {
+  color: black;
+  font-weight: normal;
+  font-kerning: none;
+  font-size: 10px;
+  font-style: normal;
+  letter-spacing: 0;
+  text-decoration: none;
+  vertical-align: 0;
 }
 
-.xfaCaption{
-  overflow:hidden;
-  flex:0 0 auto;
+.xfaCaption {
+  overflow: hidden;
+  flex: 0 0 auto;
 }
 
-.xfaCaptionForCheckButton{
-  overflow:hidden;
-  flex:1 1 auto;
+.xfaCaptionForCheckButton {
+  overflow: hidden;
+  flex: 1 1 auto;
 }
 
-.xfaLabel{
-  height:100%;
-  width:100%;
+.xfaLabel {
+  height: 100%;
+  width: 100%;
 }
 
-.xfaLeft{
-  display:flex;
-  flex-direction:row;
-  align-items:center;
+.xfaLeft {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
-.xfaRight{
-  display:flex;
-  flex-direction:row-reverse;
-  align-items:center;
+.xfaRight {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
 }
 
-:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
-  max-height:100%;
+:is(.xfaLeft, .xfaRight)> :is(.xfaCaption, .xfaCaptionForCheckButton) {
+  max-height: 100%;
 }
 
-.xfaTop{
-  display:flex;
-  flex-direction:column;
-  align-items:flex-start;
+.xfaTop {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-.xfaBottom{
-  display:flex;
-  flex-direction:column-reverse;
-  align-items:flex-start;
+.xfaBottom {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-start;
 }
 
-:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
-  width:100%;
+:is(.xfaTop, .xfaBottom)> :is(.xfaCaption, .xfaCaptionForCheckButton) {
+  width: 100%;
 }
 
-.xfaBorder{
-  background-color:transparent;
-  position:absolute;
-  pointer-events:none;
+.xfaBorder {
+  background-color: transparent;
+  position: absolute;
+  pointer-events: none;
 }
 
-.xfaWrapped{
-  width:100%;
-  height:100%;
+.xfaWrapped {
+  width: 100%;
+  height: 100%;
 }
 
-:is(.xfaTextfield, .xfaSelect):focus{
-  background-image:none;
-  background-color:transparent;
-  outline:var(--xfa-focus-outline);
-  outline-offset:-1px;
+:is(.xfaTextfield, .xfaSelect):focus {
+  background-image: none;
+  background-color: transparent;
+  outline: var(--xfa-focus-outline);
+  outline-offset: -1px;
 }
 
-:is(.xfaCheckbox, .xfaRadio):focus{
-  outline:var(--xfa-focus-outline);
+:is(.xfaCheckbox, .xfaRadio):focus {
+  outline: var(--xfa-focus-outline);
 }
 
 .xfaTextfield,
-.xfaSelect{
-  height:100%;
-  width:100%;
-  flex:1 1 auto;
-  border:none;
-  resize:none;
-  background-image:var(--xfa-unfocused-field-background);
+.xfaSelect {
+  height: 100%;
+  width: 100%;
+  flex: 1 1 auto;
+  border: none;
+  resize: none;
+  background-image: var(--xfa-unfocused-field-background);
 }
 
-.xfaSelect{
-  padding-inline:2px;
+.xfaSelect {
+  padding-inline: 2px;
 }
 
-:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
-  flex:0 1 auto;
+:is(.xfaTop, .xfaBottom)> :is(.xfaTextfield, .xfaSelect) {
+  flex: 0 1 auto;
 }
 
-.xfaButton{
-  cursor:pointer;
-  width:100%;
-  height:100%;
-  border:none;
-  text-align:center;
+.xfaButton {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border: none;
+  text-align: center;
 }
 
-.xfaLink{
-  width:100%;
-  height:100%;
-  position:absolute;
-  top:0;
-  left:0;
+.xfaLink {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .xfaCheckbox,
-.xfaRadio{
-  width:100%;
-  height:100%;
-  flex:0 0 auto;
-  border:none;
+.xfaRadio {
+  width: 100%;
+  height: 100%;
+  flex: 0 0 auto;
+  border: none;
 }
 
-.xfaRich{
-  white-space:pre-wrap;
-  width:100%;
-  height:100%;
+.xfaRich {
+  white-space: pre-wrap;
+  width: 100%;
+  height: 100%;
 }
 
-.xfaImage{
-  -o-object-position:left top;
-     object-position:left top;
-  -o-object-fit:contain;
-     object-fit:contain;
-  width:100%;
-  height:100%;
+.xfaImage {
+  -o-object-position: left top;
+  object-position: left top;
+  -o-object-fit: contain;
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
 }
 
 .xfaLrTb,
 .xfaRlTb,
-.xfaTb{
-  display:flex;
-  flex-direction:column;
-  align-items:stretch;
+.xfaTb {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
 
-.xfaLr{
-  display:flex;
-  flex-direction:row;
-  align-items:stretch;
+.xfaLr {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 }
 
-.xfaRl{
-  display:flex;
-  flex-direction:row-reverse;
-  align-items:stretch;
+.xfaRl {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: stretch;
 }
 
-.xfaTb > div{
-  justify-content:left;
+.xfaTb>div {
+  justify-content: left;
 }
 
-.xfaPosition{
-  position:relative;
+.xfaPosition {
+  position: relative;
 }
 
-.xfaArea{
-  position:relative;
+.xfaArea {
+  position: relative;
 }
 
-.xfaValignMiddle{
-  display:flex;
-  align-items:center;
+.xfaValignMiddle {
+  display: flex;
+  align-items: center;
 }
 
-.xfaTable{
-  display:flex;
-  flex-direction:column;
-  align-items:stretch;
+.xfaTable {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
 
-.xfaTable .xfaRow{
-  display:flex;
-  flex-direction:row;
-  align-items:stretch;
+.xfaTable .xfaRow {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 }
 
-.xfaTable .xfaRlRow{
-  display:flex;
-  flex-direction:row-reverse;
-  align-items:stretch;
-  flex:1;
+.xfaTable .xfaRlRow {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: stretch;
+  flex: 1;
 }
 
-.xfaTable .xfaRlRow > div{
-  flex:1;
+.xfaTable .xfaRlRow>div {
+  flex: 1;
 }
 
-:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
-  background:initial;
+:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) {
+  background: initial;
 }
 
-@media print{
+@media print {
+
   .xfaTextfield,
-  .xfaSelect{
-    background:transparent;
+  .xfaSelect {
+    background: transparent;
   }
 
-  .xfaSelect{
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-    text-indent:1px;
-    text-overflow:"";
+  .xfaSelect {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    text-indent: 1px;
+    text-overflow: "";
   }
 }
 
-.canvasWrapper svg{
-    transform:none;
-  }
+.canvasWrapper svg {
+  transform: none;
+}
 
 .canvasWrapper svg[data-main-rotation="90"] mask,
-      .canvasWrapper svg[data-main-rotation="90"] use:not(.clip, .mask){
-        transform:matrix(0, 1, -1, 0, 1, 0);
-      }
+.canvasWrapper svg[data-main-rotation="90"] use:not(.clip, .mask) {
+  transform: matrix(0, 1, -1, 0, 1, 0);
+}
 
 .canvasWrapper svg[data-main-rotation="180"] mask,
-      .canvasWrapper svg[data-main-rotation="180"] use:not(.clip, .mask){
-        transform:matrix(-1, 0, 0, -1, 1, 1);
-      }
+.canvasWrapper svg[data-main-rotation="180"] use:not(.clip, .mask) {
+  transform: matrix(-1, 0, 0, -1, 1, 1);
+}
 
 .canvasWrapper svg[data-main-rotation="270"] mask,
-      .canvasWrapper svg[data-main-rotation="270"] use:not(.clip, .mask){
-        transform:matrix(0, -1, 1, 0, 0, 1);
-      }
-
-.canvasWrapper svg.highlight{
-      --blend-mode:multiply;
-
-      position:absolute;
-      mix-blend-mode:var(--blend-mode);
-    }
-
-@media screen and (forced-colors: active){
-
-.canvasWrapper svg.highlight{
-        --blend-mode:difference;
-    }
-      }
-
-.canvasWrapper svg.highlight:not(.free){
-        fill-rule:evenodd;
-      }
-
-.canvasWrapper svg.highlightOutline{
-      position:absolute;
-      mix-blend-mode:normal;
-      fill-rule:evenodd;
-      fill:none;
-    }
-
-.canvasWrapper svg.highlightOutline.hovered:not(.free):not(.selected){
-          stroke:var(--hover-outline-color);
-          stroke-width:var(--outline-width);
-        }
-
-.canvasWrapper svg.highlightOutline.selected:not(.free) .mainOutline{
-            stroke:var(--outline-around-color);
-            stroke-width:calc(
-              var(--outline-width) + 2 * var(--outline-around-width)
-            );
-          }
-
-.canvasWrapper svg.highlightOutline.selected:not(.free) .secondaryOutline{
-            stroke:var(--outline-color);
-            stroke-width:var(--outline-width);
-          }
-
-.canvasWrapper svg.highlightOutline.free.hovered:not(.selected){
-          stroke:var(--hover-outline-color);
-          stroke-width:calc(2 * var(--outline-width));
-        }
-
-.canvasWrapper svg.highlightOutline.free.selected .mainOutline{
-            stroke:var(--outline-around-color);
-            stroke-width:calc(
-              2 * (var(--outline-width) + var(--outline-around-width))
-            );
-          }
-
-.canvasWrapper svg.highlightOutline.free.selected .secondaryOutline{
-            stroke:var(--outline-color);
-            stroke-width:calc(2 * var(--outline-width));
-          }
-
-.toggle-button{
-  --button-background-color:#f0f0f4;
-  --button-background-color-hover:#e0e0e6;
-  --button-background-color-active:#cfcfd8;
-  --color-accent-primary:#0060df;
-  --color-accent-primary-hover:#0250bb;
-  --color-accent-primary-active:#054096;
-  --border-interactive-color:#8f8f9d;
-  --border-radius-circle:9999px;
-  --border-width:1px;
-  --size-item-small:16px;
-  --size-item-large:32px;
-  --color-canvas:white;
-
-  --toggle-background-color:var(--button-background-color);
-  --toggle-background-color-hover:var(--button-background-color-hover);
-  --toggle-background-color-active:var(--button-background-color-active);
-  --toggle-background-color-pressed:var(--color-accent-primary);
-  --toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
-  --toggle-background-color-pressed-active:var(--color-accent-primary-active);
-  --toggle-border-color:var(--border-interactive-color);
-  --toggle-border-color-hover:var(--toggle-border-color);
-  --toggle-border-color-active:var(--toggle-border-color);
-  --toggle-border-radius:var(--border-radius-circle);
-  --toggle-border-width:var(--border-width);
-  --toggle-height:var(--size-item-small);
-  --toggle-width:var(--size-item-large);
-  --toggle-dot-background-color:var(--toggle-border-color);
-  --toggle-dot-background-color-hover:var(--toggle-dot-background-color);
-  --toggle-dot-background-color-active:var(--toggle-dot-background-color);
-  --toggle-dot-background-color-on-pressed:var(--color-canvas);
-  --toggle-dot-margin:1px;
-  --toggle-dot-height:calc(
-    var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
-      var(--toggle-border-width)
-  );
-  --toggle-dot-width:var(--toggle-dot-height);
-  --toggle-dot-transform-x:calc(
-    var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
-  );
-
-  -webkit-appearance:none;
-
-     -moz-appearance:none;
-
-          appearance:none;
-  padding:0;
-  margin:0;
-  border:var(--toggle-border-width) solid var(--toggle-border-color);
-  height:var(--toggle-height);
-  width:var(--toggle-width);
-  border-radius:var(--toggle-border-radius);
-  background:var(--toggle-background-color);
-  box-sizing:border-box;
-  flex-shrink:0;
+.canvasWrapper svg[data-main-rotation="270"] use:not(.clip, .mask) {
+  transform: matrix(0, -1, 1, 0, 0, 1);
 }
 
-@media (prefers-color-scheme: dark){
+.canvasWrapper svg.highlight {
+  --blend-mode: multiply;
 
-:where(html:not(.is-light)) .toggle-button{
-    --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
-    --button-background-color-hover:color-mix(
-      in srgb,
+  position: absolute;
+  mix-blend-mode: var(--blend-mode);
+}
+
+@media screen and (forced-colors: active) {
+
+  .canvasWrapper svg.highlight {
+    --blend-mode: difference;
+  }
+}
+
+.canvasWrapper svg.highlight:not(.free) {
+  fill-rule: evenodd;
+}
+
+.canvasWrapper svg.highlightOutline {
+  position: absolute;
+  mix-blend-mode: normal;
+  fill-rule: evenodd;
+  fill: none;
+}
+
+.canvasWrapper svg.highlightOutline.hovered:not(.free):not(.selected) {
+  stroke: var(--hover-outline-color);
+  stroke-width: var(--outline-width);
+}
+
+.canvasWrapper svg.highlightOutline.selected:not(.free) .mainOutline {
+  stroke: var(--outline-around-color);
+  stroke-width: calc(var(--outline-width) + 2 * var(--outline-around-width));
+}
+
+.canvasWrapper svg.highlightOutline.selected:not(.free) .secondaryOutline {
+  stroke: var(--outline-color);
+  stroke-width: var(--outline-width);
+}
+
+.canvasWrapper svg.highlightOutline.free.hovered:not(.selected) {
+  stroke: var(--hover-outline-color);
+  stroke-width: calc(2 * var(--outline-width));
+}
+
+.canvasWrapper svg.highlightOutline.free.selected .mainOutline {
+  stroke: var(--outline-around-color);
+  stroke-width: calc(2 * (var(--outline-width) + var(--outline-around-width)));
+}
+
+.canvasWrapper svg.highlightOutline.free.selected .secondaryOutline {
+  stroke: var(--outline-color);
+  stroke-width: calc(2 * var(--outline-width));
+}
+
+.toggle-button {
+  --button-background-color: #f0f0f4;
+  --button-background-color-hover: #e0e0e6;
+  --button-background-color-active: #cfcfd8;
+  --color-accent-primary: #0060df;
+  --color-accent-primary-hover: #0250bb;
+  --color-accent-primary-active: #054096;
+  --border-interactive-color: #8f8f9d;
+  --border-radius-circle: 9999px;
+  --border-width: 1px;
+  --size-item-small: 16px;
+  --size-item-large: 32px;
+  --color-canvas: white;
+
+  --toggle-background-color: var(--button-background-color);
+  --toggle-background-color-hover: var(--button-background-color-hover);
+  --toggle-background-color-active: var(--button-background-color-active);
+  --toggle-background-color-pressed: var(--color-accent-primary);
+  --toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
+  --toggle-background-color-pressed-active: var(--color-accent-primary-active);
+  --toggle-border-color: var(--border-interactive-color);
+  --toggle-border-color-hover: var(--toggle-border-color);
+  --toggle-border-color-active: var(--toggle-border-color);
+  --toggle-border-radius: var(--border-radius-circle);
+  --toggle-border-width: var(--border-width);
+  --toggle-height: var(--size-item-small);
+  --toggle-width: var(--size-item-large);
+  --toggle-dot-background-color: var(--toggle-border-color);
+  --toggle-dot-background-color-hover: var(--toggle-dot-background-color);
+  --toggle-dot-background-color-active: var(--toggle-dot-background-color);
+  --toggle-dot-background-color-on-pressed: var(--color-canvas);
+  --toggle-dot-margin: 1px;
+  --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width));
+  --toggle-dot-width: var(--toggle-dot-height);
+  --toggle-dot-transform-x: calc(var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width));
+
+  -webkit-appearance: none;
+
+  -moz-appearance: none;
+
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  border: var(--toggle-border-width) solid var(--toggle-border-color);
+  height: var(--toggle-height);
+  width: var(--toggle-width);
+  border-radius: var(--toggle-border-radius);
+  background: var(--toggle-background-color);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :where(html:not(.is-light)) .toggle-button {
+    --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+    --button-background-color-hover: color-mix(in srgb,
+        currentColor 14%,
+        transparent);
+    --button-background-color-active: color-mix(in srgb,
+        currentColor 21%,
+        transparent);
+    --color-accent-primary: #0df;
+    --color-accent-primary-hover: #80ebff;
+    --color-accent-primary-active: #aaf2ff;
+    --border-interactive-color: #bfbfc9;
+    --color-canvas: #1c1b22;
+  }
+}
+
+:where(html.is-dark) .toggle-button {
+  --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+  --button-background-color-hover: color-mix(in srgb,
       currentColor 14%,
-      transparent
-    );
-    --button-background-color-active:color-mix(
-      in srgb,
+      transparent);
+  --button-background-color-active: color-mix(in srgb,
       currentColor 21%,
-      transparent
-    );
-    --color-accent-primary:#0df;
-    --color-accent-primary-hover:#80ebff;
-    --color-accent-primary-active:#aaf2ff;
-    --border-interactive-color:#bfbfc9;
-    --color-canvas:#1c1b22;
-}
-  }
-
-:where(html.is-dark) .toggle-button{
-    --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
-    --button-background-color-hover:color-mix(
-      in srgb,
-      currentColor 14%,
-      transparent
-    );
-    --button-background-color-active:color-mix(
-      in srgb,
-      currentColor 21%,
-      transparent
-    );
-    --color-accent-primary:#0df;
-    --color-accent-primary-hover:#80ebff;
-    --color-accent-primary-active:#aaf2ff;
-    --border-interactive-color:#bfbfc9;
-    --color-canvas:#1c1b22;
+      transparent);
+  --color-accent-primary: #0df;
+  --color-accent-primary-hover: #80ebff;
+  --color-accent-primary-active: #aaf2ff;
+  --border-interactive-color: #bfbfc9;
+  --color-canvas: #1c1b22;
 }
 
-@media (forced-colors: active){
+@media (forced-colors: active) {
 
-.toggle-button{
-    --color-accent-primary:ButtonText;
-    --color-accent-primary-hover:SelectedItem;
-    --color-accent-primary-active:SelectedItem;
-    --border-interactive-color:ButtonText;
-    --button-background-color:ButtonFace;
-    --border-interactive-color-hover:SelectedItem;
-    --border-interactive-color-active:SelectedItem;
-    --border-interactive-color-disabled:GrayText;
-    --color-canvas:ButtonText;
+  .toggle-button {
+    --color-accent-primary: ButtonText;
+    --color-accent-primary-hover: SelectedItem;
+    --color-accent-primary-active: SelectedItem;
+    --border-interactive-color: ButtonText;
+    --button-background-color: ButtonFace;
+    --border-interactive-color-hover: SelectedItem;
+    --border-interactive-color-active: SelectedItem;
+    --border-interactive-color-disabled: GrayText;
+    --color-canvas: ButtonText;
+  }
 }
-  }
 
-.toggle-button:focus-visible{
-    outline:var(--focus-outline);
-    outline-offset:var(--focus-outline-offset);
-  }
+.toggle-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
 
-.toggle-button:enabled:hover{
-    background:var(--toggle-background-color-hover);
-    border-color:var(--toggle-border-color);
-  }
+.toggle-button:enabled:hover {
+  background: var(--toggle-background-color-hover);
+  border-color: var(--toggle-border-color);
+}
 
-.toggle-button:enabled:active{
-    background:var(--toggle-background-color-active);
-    border-color:var(--toggle-border-color);
-  }
+.toggle-button:enabled:active {
+  background: var(--toggle-background-color-active);
+  border-color: var(--toggle-border-color);
+}
 
-.toggle-button[aria-pressed="true"]{
-    background:var(--toggle-background-color-pressed);
-    border-color:transparent;
-  }
+.toggle-button[aria-pressed="true"] {
+  background: var(--toggle-background-color-pressed);
+  border-color: transparent;
+}
 
-.toggle-button[aria-pressed="true"]:enabled:hover{
-    background:var(--toggle-background-color-pressed-hover);
-    border-color:transparent;
-  }
+.toggle-button[aria-pressed="true"]:enabled:hover {
+  background: var(--toggle-background-color-pressed-hover);
+  border-color: transparent;
+}
 
-.toggle-button[aria-pressed="true"]:enabled:active{
-    background:var(--toggle-background-color-pressed-active);
-    border-color:transparent;
-  }
+.toggle-button[aria-pressed="true"]:enabled:active {
+  background: var(--toggle-background-color-pressed-active);
+  border-color: transparent;
+}
 
-.toggle-button::before{
-    display:block;
-    content:"";
-    background-color:var(--toggle-dot-background-color);
-    height:var(--toggle-dot-height);
-    width:var(--toggle-dot-width);
-    margin:var(--toggle-dot-margin);
-    border-radius:var(--toggle-border-radius);
-    translate:0;
-  }
+.toggle-button::before {
+  display: block;
+  content: "";
+  background-color: var(--toggle-dot-background-color);
+  height: var(--toggle-dot-height);
+  width: var(--toggle-dot-width);
+  margin: var(--toggle-dot-margin);
+  border-radius: var(--toggle-border-radius);
+  translate: 0;
+}
 
-.toggle-button[aria-pressed="true"]::before{
-    translate:var(--toggle-dot-transform-x);
-    background-color:var(--toggle-dot-background-color-on-pressed);
-  }
+.toggle-button[aria-pressed="true"]::before {
+  translate: var(--toggle-dot-transform-x);
+  background-color: var(--toggle-dot-background-color-on-pressed);
+}
 
 .toggle-button[aria-pressed="true"]:enabled:hover::before,
-  .toggle-button[aria-pressed="true"]:enabled:active::before{
-    background-color:var(--toggle-dot-background-color-on-pressed);
-  }
-
-[dir="rtl"] .toggle-button[aria-pressed="true"]::before{
-    translate:calc(-1 * var(--toggle-dot-transform-x));
-  }
-
-@media (prefers-reduced-motion: no-preference){
-    .toggle-button::before{
-      transition:translate 100ms;
-    }
-  }
-
-@media (prefers-contrast){
-    .toggle-button:enabled:hover{
-      border-color:var(--toggle-border-color-hover);
-    }
-
-    .toggle-button:enabled:active{
-      border-color:var(--toggle-border-color-active);
-    }
-
-    .toggle-button[aria-pressed="true"]:enabled{
-      border-color:var(--toggle-border-color);
-      position:relative;
-    }
-
-    .toggle-button[aria-pressed="true"]:enabled:hover,
-    .toggle-button[aria-pressed="true"]:enabled:hover:active{
-      border-color:var(--toggle-border-color-hover);
-    }
-
-    .toggle-button[aria-pressed="true"]:enabled:active{
-      background-color:var(--toggle-dot-background-color-active);
-      border-color:var(--toggle-dot-background-color-hover);
-    }
-
-    .toggle-button:hover::before,
-    .toggle-button:active::before{
-      background-color:var(--toggle-dot-background-color-hover);
-    }
-  }
-
-@media (forced-colors){
-
-.toggle-button{
-    --toggle-dot-background-color:var(--color-accent-primary);
-    --toggle-dot-background-color-hover:var(--color-accent-primary-hover);
-    --toggle-dot-background-color-active:var(--color-accent-primary-active);
-    --toggle-dot-background-color-on-pressed:var(--button-background-color);
-    --toggle-background-color-disabled:var(--button-background-color-disabled);
-    --toggle-border-color-hover:var(--border-interactive-color-hover);
-    --toggle-border-color-active:var(--border-interactive-color-active);
-    --toggle-border-color-disabled:var(--border-interactive-color-disabled);
+.toggle-button[aria-pressed="true"]:enabled:active::before {
+  background-color: var(--toggle-dot-background-color-on-pressed);
 }
 
-    .toggle-button[aria-pressed="true"]:enabled::after{
-      border:1px solid var(--button-background-color);
-      content:"";
-      position:absolute;
-      height:var(--toggle-height);
-      width:var(--toggle-width);
-      display:block;
-      border-radius:var(--toggle-border-radius);
-      inset:-2px;
-    }
-
-    .toggle-button[aria-pressed="true"]:enabled:active::after{
-      border-color:var(--toggle-border-color-active);
-    }
-  }
-
-:root{
-  --outline-width:2px;
-  --outline-color:#0060df;
-  --outline-around-width:1px;
-  --outline-around-color:#f0f0f4;
-  --hover-outline-around-color:var(--outline-around-color);
-  --focus-outline:solid var(--outline-width) var(--outline-color);
-  --unfocus-outline:solid var(--outline-width) transparent;
-  --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
-  --hover-outline-color:#8f8f9d;
-  --hover-outline:solid var(--outline-width) var(--hover-outline-color);
-  --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
-  --freetext-line-height:1.35;
-  --freetext-padding:2px;
-  --resizer-bg-color:var(--outline-color);
-  --resizer-size:6px;
-  --resizer-shift:calc(
-    0px - (var(--outline-width) + var(--resizer-size)) / 2 -
-      var(--outline-around-width)
-  );
-  --editorFreeText-editing-cursor:text;
-  --editorInk-editing-cursor:url(../images/cursor-editorInk.svg) 0 16, pointer;
-  --editorHighlight-editing-cursor:url(../images/cursor-editorTextHighlight.svg) 24 24, text;
-  --editorFreeHighlight-editing-cursor:url(../images/cursor-editorFreeHighlight.svg) 1 18, pointer;
-}
-.visuallyHidden{
-  position:absolute;
-  top:0;
-  left:0;
-  border:0;
-  margin:0;
-  padding:0;
-  width:0;
-  height:0;
-  overflow:hidden;
-  white-space:nowrap;
-  font-size:0;
+[dir="rtl"] .toggle-button[aria-pressed="true"]::before {
+  translate: calc(-1 * var(--toggle-dot-transform-x));
 }
 
-.textLayer.highlighting{
-  cursor:var(--editorFreeHighlight-editing-cursor);
-}
-
-.textLayer.highlighting:not(.free) span{
-    cursor:var(--editorHighlight-editing-cursor);
-  }
-
-.textLayer.highlighting.free span{
-    cursor:var(--editorFreeHighlight-editing-cursor);
-  }
-
-@media (min-resolution: 1.1dppx){
-  :root{
-    --editorFreeText-editing-cursor:url(../images/cursor-editorFreeText.svg) 0 16, text;
+@media (prefers-reduced-motion: no-preference) {
+  .toggle-button::before {
+    transition: translate 100ms;
   }
 }
 
-@media screen and (forced-colors: active){
-  :root{
-    --outline-color:CanvasText;
-    --outline-around-color:ButtonFace;
-    --resizer-bg-color:ButtonText;
-    --hover-outline-color:Highlight;
-    --hover-outline-around-color:SelectedItemText;
+@media (prefers-contrast) {
+  .toggle-button:enabled:hover {
+    border-color: var(--toggle-border-color-hover);
+  }
+
+  .toggle-button:enabled:active {
+    border-color: var(--toggle-border-color-active);
+  }
+
+  .toggle-button[aria-pressed="true"]:enabled {
+    border-color: var(--toggle-border-color);
+    position: relative;
+  }
+
+  .toggle-button[aria-pressed="true"]:enabled:hover,
+  .toggle-button[aria-pressed="true"]:enabled:hover:active {
+    border-color: var(--toggle-border-color-hover);
+  }
+
+  .toggle-button[aria-pressed="true"]:enabled:active {
+    background-color: var(--toggle-dot-background-color-active);
+    border-color: var(--toggle-dot-background-color-hover);
+  }
+
+  .toggle-button:hover::before,
+  .toggle-button:active::before {
+    background-color: var(--toggle-dot-background-color-hover);
   }
 }
 
-[data-editor-rotation="90"]{
-  transform:rotate(90deg);
-}
+@media (forced-colors) {
 
-[data-editor-rotation="180"]{
-  transform:rotate(180deg);
-}
-
-[data-editor-rotation="270"]{
-  transform:rotate(270deg);
-}
-
-.annotationEditorLayer{
-  background:transparent;
-  position:absolute;
-  inset:0;
-  font-size:calc(100px * var(--scale-factor));
-  transform-origin:0 0;
-  cursor:auto;
-}
-
-.annotationEditorLayer.waiting{
-  content:"";
-  cursor:wait;
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-}
-
-.annotationEditorLayer.disabled{
-  pointer-events:none;
-}
-
-.annotationEditorLayer.freetextEditing{
-  cursor:var(--editorFreeText-editing-cursor);
-}
-
-.annotationEditorLayer.inkEditing{
-  cursor:var(--editorInk-editing-cursor);
-}
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
-  position:absolute;
-  background:transparent;
-  z-index:1;
-  transform-origin:0 0;
-  cursor:auto;
-  max-width:100%;
-  max-height:100%;
-  border:var(--unfocus-outline);
-}
-
-.annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
-    cursor:move;
+  .toggle-button {
+    --toggle-dot-background-color: var(--color-accent-primary);
+    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
+    --toggle-dot-background-color-active: var(--color-accent-primary-active);
+    --toggle-dot-background-color-on-pressed: var(--button-background-color);
+    --toggle-background-color-disabled: var(--button-background-color-disabled);
+    --toggle-border-color-hover: var(--border-interactive-color-hover);
+    --toggle-border-color-active: var(--border-interactive-color-active);
+    --toggle-border-color-disabled: var(--border-interactive-color-disabled);
   }
 
-.annotationEditorLayer .moving:is(.freeTextEditor, .inkEditor, .stampEditor){
-    touch-action:none;
+  .toggle-button[aria-pressed="true"]:enabled::after {
+    border: 1px solid var(--button-background-color);
+    content: "";
+    position: absolute;
+    height: var(--toggle-height);
+    width: var(--toggle-width);
+    display: block;
+    border-radius: var(--toggle-border-radius);
+    inset: -2px;
   }
 
-.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
-    border:var(--focus-outline);
-    outline:var(--focus-outline-around);
+  .toggle-button[aria-pressed="true"]:enabled:active::after {
+    border-color: var(--toggle-border-color-active);
   }
-
-.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before{
-      content:"";
-      position:absolute;
-      inset:0;
-      border:var(--focus-outline-around);
-      pointer-events:none;
-    }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor){
-    border:var(--hover-outline);
-    outline:var(--hover-outline-around);
-  }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before{
-      content:"";
-      position:absolute;
-      inset:0;
-      border:var(--focus-outline-around);
-    }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
-    --editor-toolbar-delete-image:url(../images/editor-toolbar-delete.svg);
-    --editor-toolbar-bg-color:#f0f0f4;
-    --editor-toolbar-highlight-image:url(../images/toolbarButton-editorHighlight.svg);
-    --editor-toolbar-fg-color:#2e2e56;
-    --editor-toolbar-border-color:#8f8f9d;
-    --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
-    --editor-toolbar-hover-bg-color:#e0e0e6;
-    --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
-    --editor-toolbar-hover-outline:none;
-    --editor-toolbar-focus-outline-color:#0060df;
-    --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
-    --editor-toolbar-vert-offset:6px;
-    --editor-toolbar-height:28px;
-    --editor-toolbar-padding:2px;
-
-    display:flex;
-    width:-moz-fit-content;
-    width:fit-content;
-    height:var(--editor-toolbar-height);
-    flex-direction:column;
-    justify-content:center;
-    align-items:center;
-    cursor:default;
-    pointer-events:auto;
-    box-sizing:content-box;
-    padding:var(--editor-toolbar-padding);
-
-    position:absolute;
-    inset-inline-end:0;
-    inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
-
-    border-radius:6px;
-    background-color:var(--editor-toolbar-bg-color);
-    border:1px solid var(--editor-toolbar-border-color);
-    box-shadow:var(--editor-toolbar-shadow);
-  }
-
-@media (prefers-color-scheme: dark){
-
-:where(html:not(.is-light)) :is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
-      --editor-toolbar-bg-color:#2b2a33;
-      --editor-toolbar-fg-color:#fbfbfe;
-      --editor-toolbar-hover-bg-color:#52525e;
-      --editor-toolbar-focus-outline-color:#0df;
-  }
-    }
-
-:where(html.is-dark) :is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
-      --editor-toolbar-bg-color:#2b2a33;
-      --editor-toolbar-fg-color:#fbfbfe;
-      --editor-toolbar-hover-bg-color:#52525e;
-      --editor-toolbar-focus-outline-color:#0df;
-  }
-
-@media screen and (forced-colors: active){
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
-      --editor-toolbar-bg-color:ButtonFace;
-      --editor-toolbar-fg-color:ButtonText;
-      --editor-toolbar-border-color:ButtonText;
-      --editor-toolbar-hover-border-color:AccentColor;
-      --editor-toolbar-hover-bg-color:ButtonFace;
-      --editor-toolbar-hover-fg-color:AccentColor;
-      --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color);
-      --editor-toolbar-focus-outline-color:ButtonBorder;
-      --editor-toolbar-shadow:none;
-  }
-    }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar.hidden{
-      display:none;
-    }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar:has(:focus-visible){
-      border-color:transparent;
-    }
-
-[dir="ltr"] :is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
-      transform-origin:100% 0;
-    }
-
-[dir="rtl"] :is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
-      transform-origin:0 0;
-    }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons{
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      gap:0;
-      height:100%;
-    }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .divider{
-        width:1px;
-        height:calc(
-          2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
-        );
-        background-color:var(--editor-toolbar-border-color);
-        display:inline-block;
-        margin-inline:2px;
-      }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton{
-        width:var(--editor-toolbar-height);
-      }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton::before{
-          content:"";
-          -webkit-mask-image:var(--editor-toolbar-highlight-image);
-                  mask-image:var(--editor-toolbar-highlight-image);
-          -webkit-mask-repeat:no-repeat;
-                  mask-repeat:no-repeat;
-          -webkit-mask-position:center;
-                  mask-position:center;
-          display:inline-block;
-          background-color:var(--editor-toolbar-fg-color);
-          width:100%;
-          height:100%;
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton:hover::before{
-          background-color:var(--editor-toolbar-hover-fg-color);
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete{
-        width:var(--editor-toolbar-height);
-      }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete::before{
-          content:"";
-          -webkit-mask-image:var(--editor-toolbar-delete-image);
-                  mask-image:var(--editor-toolbar-delete-image);
-          -webkit-mask-repeat:no-repeat;
-                  mask-repeat:no-repeat;
-          -webkit-mask-position:center;
-                  mask-position:center;
-          display:inline-block;
-          background-color:var(--editor-toolbar-fg-color);
-          width:100%;
-          height:100%;
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete:hover::before{
-          background-color:var(--editor-toolbar-hover-fg-color);
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > *{
-        height:var(--editor-toolbar-height);
-      }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider){
-        border:none;
-        background-color:transparent;
-        cursor:pointer;
-      }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):hover{
-          border-radius:2px;
-          background-color:var(--editor-toolbar-hover-bg-color);
-          color:var(--editor-toolbar-hover-fg-color);
-          outline:var(--editor-toolbar-hover-outline);
-          outline-offset:1px;
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):hover:active{
-            outline:none;
-          }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):focus-visible{
-          border-radius:2px;
-          outline:2px solid var(--editor-toolbar-focus-outline-color);
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText{
-        --alt-text-add-image:url(../images/altText_add.svg);
-        --alt-text-done-image:url(../images/altText_done.svg);
-
-        display:flex;
-        align-items:center;
-        justify-content:center;
-        width:-moz-max-content;
-        width:max-content;
-        padding-inline:8px;
-        pointer-events:all;
-        font:menu;
-        font-weight:590;
-        font-size:12px;
-        color:var(--editor-toolbar-fg-color);
-      }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText:disabled{
-          pointer-events:none;
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText::before{
-          content:"";
-          -webkit-mask-image:var(--alt-text-add-image);
-                  mask-image:var(--alt-text-add-image);
-          -webkit-mask-repeat:no-repeat;
-                  mask-repeat:no-repeat;
-          -webkit-mask-position:center;
-                  mask-position:center;
-          display:inline-block;
-          width:12px;
-          height:13px;
-          background-color:var(--editor-toolbar-fg-color);
-          margin-inline-end:4px;
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText:hover::before{
-          background-color:var(--editor-toolbar-hover-fg-color);
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText.done::before{
-          -webkit-mask-image:var(--alt-text-done-image);
-                  mask-image:var(--alt-text-done-image);
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip{
-          display:none;
-        }
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
-            --alt-text-tooltip-bg:#f0f0f4;
-            --alt-text-tooltip-fg:#15141a;
-            --alt-text-tooltip-border:#8f8f9d;
-            --alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
-
-            display:inline-flex;
-            flex-direction:column;
-            align-items:center;
-            justify-content:center;
-            position:absolute;
-            top:calc(100% + 2px);
-            inset-inline-start:0;
-            padding-block:2px 3px;
-            padding-inline:3px;
-            max-width:300px;
-            width:-moz-max-content;
-            width:max-content;
-            height:auto;
-            font-size:12px;
-
-            border:0.5px solid var(--alt-text-tooltip-border);
-            background:var(--alt-text-tooltip-bg);
-            box-shadow:var(--alt-text-tooltip-shadow);
-            color:var(--alt-text-tooltip-fg);
-
-            pointer-events:none;
-          }
-
-@media (prefers-color-scheme: dark){
-
-:where(html:not(.is-light)) :is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
-              --alt-text-tooltip-bg:#1c1b22;
-              --alt-text-tooltip-fg:#fbfbfe;
-              --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
-          }
-            }
-
-:where(html.is-dark) :is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
-              --alt-text-tooltip-bg:#1c1b22;
-              --alt-text-tooltip-fg:#fbfbfe;
-              --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
-          }
-
-@media screen and (forced-colors: active){
-
-:is(.annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
-              --alt-text-tooltip-bg:Canvas;
-              --alt-text-tooltip-fg:CanvasText;
-              --alt-text-tooltip-border:CanvasText;
-              --alt-text-tooltip-shadow:none;
-          }
-            }
-
-.annotationEditorLayer .freeTextEditor{
-  padding:calc(var(--freetext-padding) * var(--scale-factor));
-  width:auto;
-  height:auto;
-  touch-action:none;
 }
 
-.annotationEditorLayer .freeTextEditor .internal{
-  background:transparent;
-  border:none;
-  inset:0;
-  overflow:visible;
-  white-space:nowrap;
-  font:10px sans-serif;
-  line-height:var(--freetext-line-height);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
+:root {
+  --outline-width: 2px;
+  --outline-color: #0060df;
+  --outline-around-width: 1px;
+  --outline-around-color: #f0f0f4;
+  --hover-outline-around-color: var(--outline-around-color);
+  --focus-outline: solid var(--outline-width) var(--outline-color);
+  --unfocus-outline: solid var(--outline-width) transparent;
+  --focus-outline-around: solid var(--outline-around-width) var(--outline-around-color);
+  --hover-outline-color: #8f8f9d;
+  --hover-outline: solid var(--outline-width) var(--hover-outline-color);
+  --hover-outline-around: solid var(--outline-around-width) var(--hover-outline-around-color);
+  --freetext-line-height: 1.35;
+  --freetext-padding: 2px;
+  --resizer-bg-color: var(--outline-color);
+  --resizer-size: 6px;
+  --resizer-shift: calc(0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width));
+  --editorFreeText-editing-cursor: text;
+  --editorInk-editing-cursor: url(../images/cursor-editorInk.svg) 0 16, pointer;
+  --editorHighlight-editing-cursor: url(../images/cursor-editorTextHighlight.svg) 24 24, text;
+  --editorFreeHighlight-editing-cursor: url(../images/cursor-editorFreeHighlight.svg) 1 18, pointer;
 }
 
-.annotationEditorLayer .freeTextEditor .overlay{
-  position:absolute;
-  display:none;
-  background:transparent;
-  inset:0;
-  width:100%;
-  height:100%;
+.visuallyHidden {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 0;
 }
 
-.annotationEditorLayer freeTextEditor .overlay.enabled{
-  display:block;
+.textLayer.highlighting {
+  cursor: var(--editorFreeHighlight-editing-cursor);
 }
 
-.annotationEditorLayer .freeTextEditor .internal:empty::before{
-  content:attr(default-content);
-  color:gray;
+.textLayer.highlighting:not(.free) span {
+  cursor: var(--editorHighlight-editing-cursor);
 }
 
-.annotationEditorLayer .freeTextEditor .internal:focus{
-  outline:none;
-  -webkit-user-select:auto;
-     -moz-user-select:auto;
-          user-select:auto;
+.textLayer.highlighting.free span {
+  cursor: var(--editorFreeHighlight-editing-cursor);
 }
 
-.annotationEditorLayer .inkEditor{
-  width:100%;
-  height:100%;
-}
-
-.annotationEditorLayer .inkEditor.editing{
-  cursor:inherit;
-}
-
-.annotationEditorLayer .inkEditor .inkEditorCanvas{
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-  touch-action:none;
-}
-
-.annotationEditorLayer .stampEditor{
-  width:auto;
-  height:auto;
-}
-
-.annotationEditorLayer .stampEditor canvas{
-    position:absolute;
-    width:100%;
-    height:100%;
-    margin:0;
+@media (min-resolution: 1.1dppx) {
+  :root {
+    --editorFreeText-editing-cursor: url(../images/cursor-editorFreeText.svg) 0 16, text;
   }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers{
-      position:absolute;
-      inset:0;
-    }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden{
-        display:none;
-      }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer{
-        width:var(--resizer-size);
-        height:var(--resizer-size);
-        background:content-box var(--resizer-bg-color);
-        border:var(--focus-outline-around);
-        border-radius:2px;
-        position:absolute;
-      }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topLeft{
-          top:var(--resizer-shift);
-          left:var(--resizer-shift);
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topMiddle{
-          top:var(--resizer-shift);
-          left:calc(50% + var(--resizer-shift));
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topRight{
-          top:var(--resizer-shift);
-          right:var(--resizer-shift);
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleRight{
-          top:calc(50% + var(--resizer-shift));
-          right:var(--resizer-shift);
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomRight{
-          bottom:var(--resizer-shift);
-          right:var(--resizer-shift);
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomMiddle{
-          bottom:var(--resizer-shift);
-          left:calc(50% + var(--resizer-shift));
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomLeft{
-          bottom:var(--resizer-shift);
-          left:var(--resizer-shift);
-        }
-
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleLeft{
-          top:calc(50% + var(--resizer-shift));
-          left:var(--resizer-shift);
-        }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight{
-        cursor:nwse-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle{
-        cursor:ns-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft{
-        cursor:nesw-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft{
-        cursor:ew-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight{
-        cursor:nesw-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle{
-        cursor:ew-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft{
-        cursor:nwse-resize;
-      }
-
-.annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
-      .annotationEditorLayer[data-main-rotation="0"]
-    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft,
-      .annotationEditorLayer[data-main-rotation="90"]
-    :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
-      .annotationEditorLayer[data-main-rotation="180"]
-    :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
-      .annotationEditorLayer[data-main-rotation="270"]
-    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft{
-        cursor:ns-resize;
-      }
-
-.annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="90"],
-      [data-main-rotation="90"] [data-editor-rotation="0"],
-      [data-main-rotation="180"] [data-editor-rotation="270"],
-      [data-main-rotation="270"] [data-editor-rotation="180"]
-    ) .editToolbar{
-      rotate:270deg;
-    }
-
-[dir="ltr"] .annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="90"],
-      [data-main-rotation="90"] [data-editor-rotation="0"],
-      [data-main-rotation="180"] [data-editor-rotation="270"],
-      [data-main-rotation="270"] [data-editor-rotation="180"]
-    ) .editToolbar{
-        inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
-        inset-block-start:0;
-      }
-
-[dir="rtl"] .annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="90"],
-      [data-main-rotation="90"] [data-editor-rotation="0"],
-      [data-main-rotation="180"] [data-editor-rotation="270"],
-      [data-main-rotation="270"] [data-editor-rotation="180"]
-    ) .editToolbar{
-        inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
-        inset-block-start:0;
-      }
-
-.annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="180"],
-      [data-main-rotation="90"] [data-editor-rotation="90"],
-      [data-main-rotation="180"] [data-editor-rotation="0"],
-      [data-main-rotation="270"] [data-editor-rotation="270"]
-    ) .editToolbar{
-      rotate:180deg;
-      inset-inline-end:100%;
-      inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
-    }
-
-.annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="270"],
-      [data-main-rotation="90"] [data-editor-rotation="180"],
-      [data-main-rotation="180"] [data-editor-rotation="90"],
-      [data-main-rotation="270"] [data-editor-rotation="0"]
-    ) .editToolbar{
-      rotate:90deg;
-    }
-
-[dir="ltr"] .annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="270"],
-      [data-main-rotation="90"] [data-editor-rotation="180"],
-      [data-main-rotation="180"] [data-editor-rotation="90"],
-      [data-main-rotation="270"] [data-editor-rotation="0"]
-    ) .editToolbar{
-        inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
-        inset-block-start:100%;
-      }
-
-[dir="rtl"] .annotationEditorLayer
-    :is(
-      [data-main-rotation="0"] [data-editor-rotation="270"],
-      [data-main-rotation="90"] [data-editor-rotation="180"],
-      [data-main-rotation="180"] [data-editor-rotation="90"],
-      [data-main-rotation="270"] [data-editor-rotation="0"]
-    ) .editToolbar{
-        inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
-        inset-block-start:0;
-      }
-
-.dialog.altText::backdrop{
-    -webkit-mask:url(#alttext-manager-mask);
-            mask:url(#alttext-manager-mask);
-  }
-
-.dialog.altText.positioned{
-    margin:0;
-  }
-
-.dialog.altText #altTextContainer{
-    width:300px;
-    height:-moz-fit-content;
-    height:fit-content;
-    display:inline-flex;
-    flex-direction:column;
-    align-items:flex-start;
-    gap:16px;
-  }
-
-.dialog.altText #altTextContainer #overallDescription{
-      display:flex;
-      flex-direction:column;
-      align-items:flex-start;
-      gap:4px;
-      align-self:stretch;
-    }
-
-.dialog.altText #altTextContainer #overallDescription span{
-        align-self:stretch;
-      }
-
-.dialog.altText #altTextContainer #overallDescription .title{
-        font-size:13px;
-        font-style:normal;
-        font-weight:590;
-      }
-
-.dialog.altText #altTextContainer #addDescription{
-      display:flex;
-      flex-direction:column;
-      align-items:stretch;
-      gap:8px;
-    }
-
-.dialog.altText #altTextContainer #addDescription .descriptionArea{
-        flex:1;
-        padding-inline:24px 10px;
-      }
-
-.dialog.altText #altTextContainer #addDescription .descriptionArea textarea{
-          width:100%;
-          min-height:75px;
-        }
-
-.dialog.altText #altTextContainer #buttons{
-      display:flex;
-      justify-content:flex-end;
-      align-items:flex-start;
-      gap:8px;
-      align-self:stretch;
-    }
-
-.colorPicker{
-  --hover-outline-color:#0250bb;
-  --selected-outline-color:#0060df;
-  --swatch-border-color:#cfcfd8;
 }
 
-@media (prefers-color-scheme: dark){
-
-:where(html:not(.is-light)) .colorPicker{
-    --hover-outline-color:#80ebff;
-    --selected-outline-color:#aaf2ff;
-    --swatch-border-color:#52525e;
-}
+@media screen and (forced-colors: active) {
+  :root {
+    --outline-color: CanvasText;
+    --outline-around-color: ButtonFace;
+    --resizer-bg-color: ButtonText;
+    --hover-outline-color: Highlight;
+    --hover-outline-around-color: SelectedItemText;
   }
-
-:where(html.is-dark) .colorPicker{
-    --hover-outline-color:#80ebff;
-    --selected-outline-color:#aaf2ff;
-    --swatch-border-color:#52525e;
 }
 
-@media screen and (forced-colors: active){
-
-.colorPicker{
-    --hover-outline-color:Highlight;
-    --selected-outline-color:var(--hover-outline-color);
-    --swatch-border-color:ButtonText;
-}
-  }
-
-.colorPicker .swatch{
-    width:16px;
-    height:16px;
-    border:1px solid var(--swatch-border-color);
-    border-radius:100%;
-    outline-offset:2px;
-    box-sizing:border-box;
-    forced-color-adjust:none;
-  }
-
-.colorPicker button:is(:hover, .selected) > .swatch{
-    border:none;
-  }
-
-.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{
-      rotate:0deg;
-    }
-
-.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{
-      rotate:270deg;
-    }
-
-.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{
-      rotate:180deg;
-    }
-
-.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{
-      rotate:90deg;
-    }
-
-.annotationEditorLayer .highlightEditor{
-    position:absolute;
-    background:transparent;
-    z-index:1;
-    cursor:auto;
-    max-width:100%;
-    max-height:100%;
-    border:none;
-    outline:none;
-    pointer-events:none;
-    transform-origin:0 0;
-  }
-
-.annotationEditorLayer .highlightEditor:not(.free){
-      transform:none;
-    }
-
-.annotationEditorLayer .highlightEditor .internal{
-      position:absolute;
-      top:0;
-      left:0;
-      width:100%;
-      height:100%;
-      pointer-events:auto;
-    }
-
-.annotationEditorLayer .highlightEditor.disabled .internal{
-      pointer-events:none;
-    }
-
-.annotationEditorLayer .highlightEditor.selectedEditor .internal{
-        cursor:pointer;
-      }
-
-.annotationEditorLayer .highlightEditor .editToolbar{
-      --editor-toolbar-colorpicker-arrow-image:url(../images/toolbarButton-menuArrow.svg);
-
-      transform-origin:center !important;
-    }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker{
-          position:relative;
-          width:auto;
-          display:flex;
-          justify-content:center;
-          align-items:center;
-          gap:4px;
-          padding:4px;
-        }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker::after{
-            content:"";
-            -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image);
-                    mask-image:var(--editor-toolbar-colorpicker-arrow-image);
-            -webkit-mask-repeat:no-repeat;
-                    mask-repeat:no-repeat;
-            -webkit-mask-position:center;
-                    mask-position:center;
-            display:inline-block;
-            background-color:var(--editor-toolbar-fg-color);
-            width:12px;
-            height:12px;
-          }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover::after{
-            background-color:var(--editor-toolbar-hover-fg-color);
-          }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)){
-            background-color:var(--editor-toolbar-hover-bg-color);
-          }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden))::after{
-              scale:-1;
-            }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown{
-            position:absolute;
-            display:flex;
-            justify-content:center;
-            align-items:center;
-            flex-direction:column;
-            gap:11px;
-            padding-block:8px;
-            border-radius:6px;
-            background-color:var(--editor-toolbar-bg-color);
-            border:1px solid var(--editor-toolbar-border-color);
-            box-shadow:var(--editor-toolbar-shadow);
-            inset-block-start:calc(100% + 4px);
-            width:calc(100% + 2 * var(--editor-toolbar-padding));
-          }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button{
-              width:100%;
-              height:auto;
-              border:none;
-              cursor:pointer;
-              display:flex;
-              justify-content:center;
-              align-items:center;
-              background:none;
-            }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible){
-                outline:none;
-              }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button > .swatch{
-                outline-offset:2px;
-              }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"] > .swatch{
-                outline:2px solid var(--selected-outline-color);
-              }
-
-.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
-                outline:2px solid var(--hover-outline-color);
-              }
-
-.editorParamsToolbar:has(#highlightParamsToolbarContainer){
-  padding:unset;
+[data-editor-rotation="90"] {
+  transform: rotate(90deg);
 }
 
-#highlightParamsToolbarContainer{
-  height:auto;
-  padding-inline:10px;
-  padding-block:10px 16px;
-  gap:16px;
-  display:flex;
-  flex-direction:column;
-  box-sizing:border-box;
+[data-editor-rotation="180"] {
+  transform: rotate(180deg);
 }
 
-#highlightParamsToolbarContainer .editorParamsLabel{
-    width:-moz-fit-content;
-    width:fit-content;
-    inset-inline-start:0;
+[data-editor-rotation="270"] {
+  transform: rotate(270deg);
+}
+
+.annotationEditorLayer {
+  background: transparent;
+  position: absolute;
+  inset: 0;
+  font-size: calc(100px * var(--scale-factor));
+  transform-origin: 0 0;
+  cursor: auto;
+}
+
+.annotationEditorLayer.waiting {
+  content: "";
+  cursor: wait;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.annotationEditorLayer.disabled {
+  pointer-events: none;
+}
+
+.annotationEditorLayer.freetextEditing {
+  cursor: var(--editorFreeText-editing-cursor);
+}
+
+.annotationEditorLayer.inkEditing {
+  cursor: var(--editorInk-editing-cursor);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {
+  position: absolute;
+  background: transparent;
+  z-index: 1;
+  transform-origin: 0 0;
+  cursor: auto;
+  max-width: 100%;
+  max-height: 100%;
+  border: var(--unfocus-outline);
+}
+
+.annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
+  cursor: move;
+}
+
+.annotationEditorLayer .moving:is(.freeTextEditor, .inkEditor, .stampEditor) {
+  touch-action: none;
+}
+
+.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
+  border: var(--focus-outline);
+  outline: var(--focus-outline-around);
+}
+
+.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--focus-outline-around);
+  pointer-events: none;
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor) {
+  border: var(--hover-outline);
+  outline: var(--hover-outline-around);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--focus-outline-around);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar {
+  --editor-toolbar-delete-image: url(../images/editor-toolbar-delete.svg);
+  --editor-toolbar-bg-color: #f0f0f4;
+  --editor-toolbar-highlight-image: url(../images/toolbarButton-editorHighlight.svg);
+  --editor-toolbar-fg-color: #2e2e56;
+  --editor-toolbar-border-color: #8f8f9d;
+  --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
+  --editor-toolbar-hover-bg-color: #e0e0e6;
+  --editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
+  --editor-toolbar-hover-outline: none;
+  --editor-toolbar-focus-outline-color: #0060df;
+  --editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2);
+  --editor-toolbar-vert-offset: 6px;
+  --editor-toolbar-height: 28px;
+  --editor-toolbar-padding: 2px;
+
+  display: flex;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: var(--editor-toolbar-height);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+  pointer-events: auto;
+  box-sizing: content-box;
+  padding: var(--editor-toolbar-padding);
+
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: calc(100% + var(--editor-toolbar-vert-offset));
+
+  border-radius: 6px;
+  background-color: var(--editor-toolbar-bg-color);
+  border: 1px solid var(--editor-toolbar-border-color);
+  box-shadow: var(--editor-toolbar-shadow);
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :where(html:not(.is-light)) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar {
+    --editor-toolbar-bg-color: #2b2a33;
+    --editor-toolbar-fg-color: #fbfbfe;
+    --editor-toolbar-hover-bg-color: #52525e;
+    --editor-toolbar-focus-outline-color: #0df;
   }
+}
 
-#highlightParamsToolbarContainer .colorPicker{
-    display:flex;
-    flex-direction:column;
-    gap:8px;
+:where(html.is-dark) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar {
+  --editor-toolbar-bg-color: #2b2a33;
+  --editor-toolbar-fg-color: #fbfbfe;
+  --editor-toolbar-hover-bg-color: #52525e;
+  --editor-toolbar-focus-outline-color: #0df;
+}
+
+@media screen and (forced-colors: active) {
+
+  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar {
+    --editor-toolbar-bg-color: ButtonFace;
+    --editor-toolbar-fg-color: ButtonText;
+    --editor-toolbar-border-color: ButtonText;
+    --editor-toolbar-hover-border-color: AccentColor;
+    --editor-toolbar-hover-bg-color: ButtonFace;
+    --editor-toolbar-hover-fg-color: AccentColor;
+    --editor-toolbar-hover-outline: 2px solid var(--editor-toolbar-hover-border-color);
+    --editor-toolbar-focus-outline-color: ButtonBorder;
+    --editor-toolbar-shadow: none;
   }
+}
 
-#highlightParamsToolbarContainer .colorPicker .dropdown{
-      display:flex;
-      justify-content:space-between;
-      align-items:center;
-      flex-direction:row;
-      height:auto;
-    }
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar.hidden {
+  display: none;
+}
 
-#highlightParamsToolbarContainer .colorPicker .dropdown button{
-        width:auto;
-        height:auto;
-        border:none;
-        cursor:pointer;
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        background:none;
-        flex:0 0 auto;
-      }
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar:has(:focus-visible) {
+  border-color: transparent;
+}
 
-#highlightParamsToolbarContainer .colorPicker .dropdown button .swatch{
-          width:24px;
-          height:24px;
-        }
+[dir="ltr"] :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar {
+  transform-origin: 100% 0;
+}
 
-#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible){
-          outline:none;
-        }
+[dir="rtl"] :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar {
+  transform-origin: 0 0;
+}
 
-#highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"] > .swatch{
-          outline:2px solid var(--selected-outline-color);
-        }
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  height: 100%;
+}
 
-#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
-          outline:2px solid var(--hover-outline-color);
-        }
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .divider {
+  width: 1px;
+  height: calc(2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height));
+  background-color: var(--editor-toolbar-border-color);
+  display: inline-block;
+  margin-inline: 2px;
+}
 
-#highlightParamsToolbarContainer #editorHighlightThickness{
-    display:flex;
-    flex-direction:column;
-    align-items:center;
-    gap:4px;
-    align-self:stretch;
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .highlightButton {
+  width: var(--editor-toolbar-height);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .highlightButton::before {
+  content: "";
+  -webkit-mask-image: var(--editor-toolbar-highlight-image);
+  mask-image: var(--editor-toolbar-highlight-image);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  display: inline-block;
+  background-color: var(--editor-toolbar-fg-color);
+  width: 100%;
+  height: 100%;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .highlightButton:hover::before {
+  background-color: var(--editor-toolbar-hover-fg-color);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .delete {
+  width: var(--editor-toolbar-height);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .delete::before {
+  content: "";
+  -webkit-mask-image: var(--editor-toolbar-delete-image);
+  mask-image: var(--editor-toolbar-delete-image);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  display: inline-block;
+  background-color: var(--editor-toolbar-fg-color);
+  width: 100%;
+  height: 100%;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .delete:hover::before {
+  background-color: var(--editor-toolbar-hover-fg-color);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons>* {
+  height: var(--editor-toolbar-height);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons> :not(.divider) {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons> :not(.divider):hover {
+  border-radius: 2px;
+  background-color: var(--editor-toolbar-hover-bg-color);
+  color: var(--editor-toolbar-hover-fg-color);
+  outline: var(--editor-toolbar-hover-outline);
+  outline-offset: 1px;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons> :not(.divider):hover:active {
+  outline: none;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons> :not(.divider):focus-visible {
+  border-radius: 2px;
+  outline: 2px solid var(--editor-toolbar-focus-outline-color);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText {
+  --alt-text-add-image: url(../images/altText_add.svg);
+  --alt-text-done-image: url(../images/altText_done.svg);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: -moz-max-content;
+  width: max-content;
+  padding-inline: 8px;
+  pointer-events: all;
+  font: menu;
+  font-weight: 590;
+  font-size: 12px;
+  color: var(--editor-toolbar-fg-color);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText:disabled {
+  pointer-events: none;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText::before {
+  content: "";
+  -webkit-mask-image: var(--alt-text-add-image);
+  mask-image: var(--alt-text-add-image);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  display: inline-block;
+  width: 12px;
+  height: 13px;
+  background-color: var(--editor-toolbar-fg-color);
+  margin-inline-end: 4px;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText:hover::before {
+  background-color: var(--editor-toolbar-hover-fg-color);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText.done::before {
+  -webkit-mask-image: var(--alt-text-done-image);
+  mask-image: var(--alt-text-done-image);
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText .tooltip {
+  display: none;
+}
+
+:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
+  --alt-text-tooltip-bg: #f0f0f4;
+  --alt-text-tooltip-fg: #15141a;
+  --alt-text-tooltip-border: #8f8f9d;
+  --alt-text-tooltip-shadow: 0px 2px 6px 0px rgb(58 57 68 / 0.2);
+
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: calc(100% + 2px);
+  inset-inline-start: 0;
+  padding-block: 2px 3px;
+  padding-inline: 3px;
+  max-width: 300px;
+  width: -moz-max-content;
+  width: max-content;
+  height: auto;
+  font-size: 12px;
+
+  border: 0.5px solid var(--alt-text-tooltip-border);
+  background: var(--alt-text-tooltip-bg);
+  box-shadow: var(--alt-text-tooltip-shadow);
+  color: var(--alt-text-tooltip-fg);
+
+  pointer-events: none;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :where(html:not(.is-light)) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
+    --alt-text-tooltip-bg: #1c1b22;
+    --alt-text-tooltip-fg: #fbfbfe;
+    --alt-text-tooltip-shadow: 0px 2px 6px 0px #15141a;
   }
+}
 
-#highlightParamsToolbarContainer #editorHighlightThickness .editorParamsLabel{
-      width:100%;
-      height:auto;
-      align-self:stretch;
-    }
+:where(html.is-dark) :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
+  --alt-text-tooltip-bg: #1c1b22;
+  --alt-text-tooltip-fg: #fbfbfe;
+  --alt-text-tooltip-shadow: 0px 2px 6px 0px #15141a;
+}
 
-#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
-      display:flex;
-      justify-content:space-between;
-      align-items:center;
-      align-self:stretch;
+@media screen and (forced-colors: active) {
 
-      --example-color:#bfbfc9;
-    }
+  :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar .buttons .altText .tooltip.show {
+    --alt-text-tooltip-bg: Canvas;
+    --alt-text-tooltip-fg: CanvasText;
+    --alt-text-tooltip-border: CanvasText;
+    --alt-text-tooltip-shadow: none;
+  }
+}
 
-@media (prefers-color-scheme: dark){
+.annotationEditorLayer .freeTextEditor {
+  padding: calc(var(--freetext-padding) * var(--scale-factor));
+  width: auto;
+  height: auto;
+  touch-action: none;
+}
 
-:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
-        --example-color:#80808e;
-    }
-      }
+.annotationEditorLayer .freeTextEditor .internal {
+  background: transparent;
+  border: none;
+  inset: 0;
+  overflow: visible;
+  white-space: nowrap;
+  font: 10px sans-serif;
+  line-height: var(--freetext-line-height);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
-:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
-        --example-color:#80808e;
-    }
+.annotationEditorLayer .freeTextEditor .overlay {
+  position: absolute;
+  display: none;
+  background: transparent;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
 
-@media screen and (forced-colors: active){
+.annotationEditorLayer freeTextEditor .overlay.enabled {
+  display: block;
+}
 
-#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
-        --example-color:CanvasText;
-    }
-      }
+.annotationEditorLayer .freeTextEditor .internal:empty::before {
+  content: attr(default-content);
+  color: gray;
+}
 
-:is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]){
-        opacity:0.4;
-      }
+.annotationEditorLayer .freeTextEditor .internal:focus {
+  outline: none;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  user-select: auto;
+}
+
+.annotationEditorLayer .inkEditor {
+  width: 100%;
+  height: 100%;
+}
+
+.annotationEditorLayer .inkEditor.editing {
+  cursor: inherit;
+}
+
+.annotationEditorLayer .inkEditor .inkEditorCanvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+}
+
+.annotationEditorLayer .stampEditor {
+  width: auto;
+  height: auto;
+}
+
+.annotationEditorLayer .stampEditor canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers {
+  position: absolute;
+  inset: 0;
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers.hidden {
+  display: none;
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer {
+  width: var(--resizer-size);
+  height: var(--resizer-size);
+  background: content-box var(--resizer-bg-color);
+  border: var(--focus-outline-around);
+  border-radius: 2px;
+  position: absolute;
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.topLeft {
+  top: var(--resizer-shift);
+  left: var(--resizer-shift);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.topMiddle {
+  top: var(--resizer-shift);
+  left: calc(50% + var(--resizer-shift));
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.topRight {
+  top: var(--resizer-shift);
+  right: var(--resizer-shift);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.middleRight {
+  top: calc(50% + var(--resizer-shift));
+  right: var(--resizer-shift);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.bottomRight {
+  bottom: var(--resizer-shift);
+  right: var(--resizer-shift);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.bottomMiddle {
+  bottom: var(--resizer-shift);
+  left: calc(50% + var(--resizer-shift));
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.bottomLeft {
+  bottom: var(--resizer-shift);
+  left: var(--resizer-shift);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor)>.resizers>.resizer.middleLeft {
+  top: calc(50% + var(--resizer-shift));
+  left: var(--resizer-shift);
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomRight {
+  cursor: nwse-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomMiddle {
+  cursor: ns-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomLeft {
+  cursor: nesw-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleLeft {
+  cursor: ew-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topLeft,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomRight {
+  cursor: nesw-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topMiddle,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomMiddle,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomMiddle {
+  cursor: ew-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.topRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.bottomLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.bottomLeft {
+  cursor: nwse-resize;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleRight,
+.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"])>.resizers>.resizer.middleLeft,
+.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])>.resizers>.resizer.middleLeft {
+  cursor: ns-resize;
+}
+
+.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],
+  [data-main-rotation="90"] [data-editor-rotation="0"],
+  [data-main-rotation="180"] [data-editor-rotation="270"],
+  [data-main-rotation="270"] [data-editor-rotation="180"]) .editToolbar {
+  rotate: 270deg;
+}
+
+[dir="ltr"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],
+  [data-main-rotation="90"] [data-editor-rotation="0"],
+  [data-main-rotation="180"] [data-editor-rotation="270"],
+  [data-main-rotation="270"] [data-editor-rotation="180"]) .editToolbar {
+  inset-inline-end: calc(0px - var(--editor-toolbar-vert-offset));
+  inset-block-start: 0;
+}
+
+[dir="rtl"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],
+  [data-main-rotation="90"] [data-editor-rotation="0"],
+  [data-main-rotation="180"] [data-editor-rotation="270"],
+  [data-main-rotation="270"] [data-editor-rotation="180"]) .editToolbar {
+  inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
+  inset-block-start: 0;
+}
+
+.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],
+  [data-main-rotation="90"] [data-editor-rotation="90"],
+  [data-main-rotation="180"] [data-editor-rotation="0"],
+  [data-main-rotation="270"] [data-editor-rotation="270"]) .editToolbar {
+  rotate: 180deg;
+  inset-inline-end: 100%;
+  inset-block-start: calc(0pc - var(--editor-toolbar-vert-offset));
+}
+
+.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],
+  [data-main-rotation="90"] [data-editor-rotation="180"],
+  [data-main-rotation="180"] [data-editor-rotation="90"],
+  [data-main-rotation="270"] [data-editor-rotation="0"]) .editToolbar {
+  rotate: 90deg;
+}
+
+[dir="ltr"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],
+  [data-main-rotation="90"] [data-editor-rotation="180"],
+  [data-main-rotation="180"] [data-editor-rotation="90"],
+  [data-main-rotation="270"] [data-editor-rotation="0"]) .editToolbar {
+  inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
+  inset-block-start: 100%;
+}
+
+[dir="rtl"] .annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],
+  [data-main-rotation="90"] [data-editor-rotation="180"],
+  [data-main-rotation="180"] [data-editor-rotation="90"],
+  [data-main-rotation="270"] [data-editor-rotation="0"]) .editToolbar {
+  inset-inline-start: calc(0px - var(--editor-toolbar-vert-offset));
+  inset-block-start: 0;
+}
+
+.dialog.altText::backdrop {
+  -webkit-mask: url(#alttext-manager-mask);
+  mask: url(#alttext-manager-mask);
+}
+
+.dialog.altText.positioned {
+  margin: 0;
+}
+
+.dialog.altText #altTextContainer {
+  width: 300px;
+  height: -moz-fit-content;
+  height: fit-content;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.dialog.altText #altTextContainer #overallDescription {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+}
+
+.dialog.altText #altTextContainer #overallDescription span {
+  align-self: stretch;
+}
+
+.dialog.altText #altTextContainer #overallDescription .title {
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 590;
+}
+
+.dialog.altText #altTextContainer #addDescription {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.dialog.altText #altTextContainer #addDescription .descriptionArea {
+  flex: 1;
+  padding-inline: 24px 10px;
+}
+
+.dialog.altText #altTextContainer #addDescription .descriptionArea textarea {
+  width: 100%;
+  min-height: 75px;
+}
+
+.dialog.altText #altTextContainer #buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.colorPicker {
+  --hover-outline-color: #0250bb;
+  --selected-outline-color: #0060df;
+  --swatch-border-color: #cfcfd8;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :where(html:not(.is-light)) .colorPicker {
+    --hover-outline-color: #80ebff;
+    --selected-outline-color: #aaf2ff;
+    --swatch-border-color: #52525e;
+  }
+}
+
+:where(html.is-dark) .colorPicker {
+  --hover-outline-color: #80ebff;
+  --selected-outline-color: #aaf2ff;
+  --swatch-border-color: #52525e;
+}
+
+@media screen and (forced-colors: active) {
+
+  .colorPicker {
+    --hover-outline-color: Highlight;
+    --selected-outline-color: var(--hover-outline-color);
+    --swatch-border-color: ButtonText;
+  }
+}
+
+.colorPicker .swatch {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--swatch-border-color);
+  border-radius: 100%;
+  outline-offset: 2px;
+  box-sizing: border-box;
+  forced-color-adjust: none;
+}
+
+.colorPicker button:is(:hover, .selected)>.swatch {
+  border: none;
+}
+
+.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free)>.editToolbar {
+  rotate: 0deg;
+}
+
+.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free)>.editToolbar {
+  rotate: 270deg;
+}
+
+.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free)>.editToolbar {
+  rotate: 180deg;
+}
+
+.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free)>.editToolbar {
+  rotate: 90deg;
+}
+
+.annotationEditorLayer .highlightEditor {
+  position: absolute;
+  background: transparent;
+  z-index: 1;
+  cursor: auto;
+  max-width: 100%;
+  max-height: 100%;
+  border: none;
+  outline: none;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.annotationEditorLayer .highlightEditor:not(.free) {
+  transform: none;
+}
+
+.annotationEditorLayer .highlightEditor .internal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+
+.annotationEditorLayer .highlightEditor.disabled .internal {
+  pointer-events: none;
+}
+
+.annotationEditorLayer .highlightEditor.selectedEditor .internal {
+  cursor: pointer;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar {
+  --editor-toolbar-colorpicker-arrow-image: url(../images/toolbarButton-menuArrow.svg);
+
+  transform-origin: center !important;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker {
+  position: relative;
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker::after {
+  content: "";
+  -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image);
+  mask-image: var(--editor-toolbar-colorpicker-arrow-image);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  display: inline-block;
+  background-color: var(--editor-toolbar-fg-color);
+  width: 12px;
+  height: 12px;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover::after {
+  background-color: var(--editor-toolbar-hover-fg-color);
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)) {
+  background-color: var(--editor-toolbar-hover-bg-color);
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden))::after {
+  scale: -1;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 11px;
+  padding-block: 8px;
+  border-radius: 6px;
+  background-color: var(--editor-toolbar-bg-color);
+  border: 1px solid var(--editor-toolbar-border-color);
+  box-shadow: var(--editor-toolbar-shadow);
+  inset-block-start: calc(100% + 4px);
+  width: calc(100% + 2 * var(--editor-toolbar-padding));
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button {
+  width: 100%;
+  height: auto;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible) {
+  outline: none;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button>.swatch {
+  outline-offset: 2px;
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"]>.swatch {
+  outline: 2px solid var(--selected-outline-color);
+}
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible)>.swatch {
+  outline: 2px solid var(--hover-outline-color);
+}
+
+.editorParamsToolbar:has(#highlightParamsToolbarContainer) {
+  padding: unset;
+}
+
+#highlightParamsToolbarContainer {
+  height: auto;
+  padding-inline: 10px;
+  padding-block: 10px 16px;
+  gap: 16px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+#highlightParamsToolbarContainer .editorParamsLabel {
+  width: -moz-fit-content;
+  width: fit-content;
+  inset-inline-start: 0;
+}
+
+#highlightParamsToolbarContainer .colorPicker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#highlightParamsToolbarContainer .colorPicker .dropdown {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  height: auto;
+}
+
+#highlightParamsToolbarContainer .colorPicker .dropdown button {
+  width: auto;
+  height: auto;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  flex: 0 0 auto;
+}
+
+#highlightParamsToolbarContainer .colorPicker .dropdown button .swatch {
+  width: 24px;
+  height: 24px;
+}
+
+#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible) {
+  outline: none;
+}
+
+#highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"]>.swatch {
+  outline: 2px solid var(--selected-outline-color);
+}
+
+#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible)>.swatch {
+  outline: 2px solid var(--hover-outline-color);
+}
+
+#highlightParamsToolbarContainer #editorHighlightThickness {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+#highlightParamsToolbarContainer #editorHighlightThickness .editorParamsLabel {
+  width: 100%;
+  height: auto;
+  align-self: stretch;
+}
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+
+  --example-color: #bfbfc9;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
+    --example-color: #80808e;
+  }
+}
+
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
+  --example-color: #80808e;
+}
+
+@media screen and (forced-colors: active) {
+
+  #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker {
+    --example-color: CanvasText;
+  }
+}
+
+:is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]) {
+  opacity: 0.4;
+}
 
 #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::before,
-      #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
-        content:"";
-        width:8px;
-        aspect-ratio:1;
-        display:block;
-        border-radius:100%;
-        background-color:var(--example-color);
-      }
-
-#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
-        width:24px;
-      }
-
-#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider{
-        width:unset;
-        height:14px;
-      }
-
-#highlightParamsToolbarContainer #editorHighlightVisibility{
-    display:flex;
-    flex-direction:column;
-    align-items:flex-start;
-    gap:8px;
-    align-self:stretch;
-  }
-
-#highlightParamsToolbarContainer #editorHighlightVisibility .divider{
-      --divider-color:#d7d7db;
-
-      margin-block:4px;
-      width:100%;
-      height:1px;
-      background-color:var(--divider-color);
-    }
-
-@media (prefers-color-scheme: dark){
-
-:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
-        --divider-color:#8f8f9d;
-    }
-      }
-
-:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
-        --divider-color:#8f8f9d;
-    }
-
-@media screen and (forced-colors: active){
-
-#highlightParamsToolbarContainer #editorHighlightVisibility .divider{
-        --divider-color:CanvasText;
-    }
-      }
-
-#highlightParamsToolbarContainer #editorHighlightVisibility .toggler{
-      display:flex;
-      justify-content:space-between;
-      align-items:center;
-      align-self:stretch;
-    }
-
-:root{
-  --viewer-container-height:0;
-  --pdfViewer-padding-bottom:0;
-  --page-margin:1px auto -8px;
-  --page-border:9px solid transparent;
-  --spreadHorizontalWrapped-margin-LR:-3.5px;
-  --loading-icon-delay:400ms;
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after {
+  content: "";
+  width: 8px;
+  aspect-ratio: 1;
+  display: block;
+  border-radius: 100%;
+  background-color: var(--example-color);
 }
 
-@media screen and (forced-colors: active){
-  :root{
-    --pdfViewer-padding-bottom:9px;
-    --page-margin:8px auto -1px;
-    --page-border:1px solid CanvasText;
-    --spreadHorizontalWrapped-margin-LR:3.5px;
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after {
+  width: 24px;
+}
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider {
+  width: unset;
+  height: 14px;
+}
+
+#highlightParamsToolbarContainer #editorHighlightVisibility {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+#highlightParamsToolbarContainer #editorHighlightVisibility .divider {
+  --divider-color: #d7d7db;
+
+  margin-block: 4px;
+  width: 100%;
+  height: 1px;
+  background-color: var(--divider-color);
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
+    --divider-color: #8f8f9d;
   }
 }
 
-[data-main-rotation="90"]{
-  transform:rotate(90deg) translateY(-100%);
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
+  --divider-color: #8f8f9d;
 }
-[data-main-rotation="180"]{
-  transform:rotate(180deg) translate(-100%, -100%);
+
+@media screen and (forced-colors: active) {
+
+  #highlightParamsToolbarContainer #editorHighlightVisibility .divider {
+    --divider-color: CanvasText;
+  }
 }
-[data-main-rotation="270"]{
-  transform:rotate(270deg) translateX(-100%);
+
+#highlightParamsToolbarContainer #editorHighlightVisibility .toggler {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+:root {
+  --viewer-container-height: 0;
+  --pdfViewer-padding-bottom: 0;
+  --page-margin: 1px auto -8px;
+  --page-border: 9px solid transparent;
+  --spreadHorizontalWrapped-margin-LR: -3.5px;
+  --loading-icon-delay: 400ms;
+}
+
+@media screen and (forced-colors: active) {
+  :root {
+    --pdfViewer-padding-bottom: 9px;
+    --page-margin: 8px auto -1px;
+    --page-border: 1px solid CanvasText;
+    --spreadHorizontalWrapped-margin-LR: 3.5px;
+  }
+}
+
+[data-main-rotation="90"] {
+  transform: rotate(90deg) translateY(-100%);
+}
+
+[data-main-rotation="180"] {
+  transform: rotate(180deg) translate(-100%, -100%);
+}
+
+[data-main-rotation="270"] {
+  transform: rotate(270deg) translateX(-100%);
 }
 
 #hiddenCopyElement,
-.hiddenCanvasElement{
-  position:absolute;
-  top:0;
-  left:0;
-  width:0;
-  height:0;
-  display:none;
+.hiddenCanvasElement {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  display: none;
 }
 
-.pdfViewer{
-  --scale-factor:1;
+.pdfViewer {
+  --scale-factor: 1;
 
-  padding-bottom:var(--pdfViewer-padding-bottom);
+  padding-bottom: var(--pdfViewer-padding-bottom);
 
-  --hcm-highlight-filter:none;
-  --hcm-highlight-selected-filter:none;
+  --hcm-highlight-filter: none;
+  --hcm-highlight-selected-filter: none;
 }
 
-@media screen and (forced-colors: active){
+@media screen and (forced-colors: active) {
 
-.pdfViewer{
-    --hcm-highlight-filter:invert(100%);
-}
+  .pdfViewer {
+    --hcm-highlight-filter: invert(100%);
   }
-
-.pdfViewer .canvasWrapper{
-    overflow:hidden;
-    width:100%;
-    height:100%;
-  }
-
-.pdfViewer .canvasWrapper canvas{
-      margin:0;
-      display:block;
-    }
-
-.pdfViewer .canvasWrapper canvas[hidden]{
-        display:none;
-      }
-
-.pdfViewer .canvasWrapper canvas[zooming]{
-        width:100%;
-        height:100%;
-      }
-
-.pdfViewer .canvasWrapper canvas .structTree{
-        contain:strict;
-      }
-
-.pdfViewer .page{
-  direction:ltr;
-  width:816px;
-  height:1056px;
-  margin:var(--page-margin);
-  position:relative;
-  overflow:visible;
-  border:var(--page-border);
-  background-clip:content-box;
-  background-color:rgb(255 255 255);
 }
 
-.pdfViewer .dummyPage{
-  position:relative;
-  width:0;
-  height:var(--viewer-container-height);
+.pdfViewer .canvasWrapper {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
-.pdfViewer.noUserSelect{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
+.pdfViewer .canvasWrapper canvas {
+  margin: 0;
+  display: block;
 }
 
-.pdfViewer.removePageBorders .page{
-  margin:0 auto 10px;
-  border:none;
+.pdfViewer .canvasWrapper canvas[hidden] {
+  display: none;
+}
+
+.pdfViewer .canvasWrapper canvas[zooming] {
+  width: 100%;
+  height: 100%;
+}
+
+.pdfViewer .canvasWrapper canvas .structTree {
+  contain: strict;
+}
+
+.pdfViewer .page {
+  direction: ltr;
+  width: 816px;
+  height: 1056px;
+  margin: var(--page-margin);
+  position: relative;
+  overflow: visible;
+  border: var(--page-border);
+  background-clip: content-box;
+  background-color: rgb(255 255 255);
+}
+
+.pdfViewer .dummyPage {
+  position: relative;
+  width: 0;
+  height: var(--viewer-container-height);
+}
+
+.pdfViewer.noUserSelect {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pdfViewer.removePageBorders .page {
+  margin: 0 auto 10px;
+  border: none;
 }
 
 .pdfViewer:is(.scrollHorizontal, .scrollWrapped),
-.spread{
-  margin-inline:3.5px;
-  text-align:center;
+.spread {
+  margin-inline: 3.5px;
+  text-align: center;
 }
 
 .pdfViewer.scrollHorizontal,
-.spread{
-  white-space:nowrap;
+.spread {
+  white-space: nowrap;
 }
 
 .pdfViewer.removePageBorders,
-.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
-  margin-inline:0;
+.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
+  margin-inline: 0;
 }
 
 .spread :is(.page, .dummyPage),
-.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
-  display:inline-block;
-  vertical-align:middle;
+.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) {
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .spread .page,
-.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
-  margin-inline:var(--spreadHorizontalWrapped-margin-LR);
+.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page {
+  margin-inline: var(--spreadHorizontalWrapped-margin-LR);
 }
 
 .pdfViewer.removePageBorders .spread .page,
-.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{
-  margin-inline:5px;
+.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
+  margin-inline: 5px;
 }
 
-.pdfViewer .page.loadingIcon::after{
-  position:absolute;
-  top:0;
-  left:0;
-  content:"";
-  width:100%;
-  height:100%;
-  background:url("../images/loading-icon.gif") center no-repeat;
-  display:none;
-  transition-property:display;
-  transition-delay:var(--loading-icon-delay);
-  z-index:5;
-  contain:strict;
+.pdfViewer .page.loadingIcon::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: url("../images/loading-icon.gif") center no-repeat;
+  display: none;
+  transition-property: display;
+  transition-delay: var(--loading-icon-delay);
+  z-index: 5;
+  contain: strict;
 }
 
-.pdfViewer .page.loading::after{
-  display:block;
+.pdfViewer .page.loading::after {
+  display: block;
 }
 
-.pdfViewer .page:not(.loading)::after{
-  transition-property:none;
-  display:none;
+.pdfViewer .page:not(.loading)::after {
+  transition-property: none;
+  display: none;
 }
 
-.pdfPresentationMode .pdfViewer{
-  padding-bottom:0;
+.pdfPresentationMode .pdfViewer {
+  padding-bottom: 0;
 }
 
-.pdfPresentationMode .spread{
-  margin:0;
+.pdfPresentationMode .spread {
+  margin: 0;
 }
 
-.pdfPresentationMode .pdfViewer .page{
-  margin:0 auto;
-  border:2px solid transparent;
+.pdfPresentationMode .pdfViewer .page {
+  margin: 0 auto;
+  border: 2px solid transparent;
 }
 
-:root{
-  --dir-factor:1;
-  --inline-start:left;
-  --inline-end:right;
+:root {
+  --dir-factor: 1;
+  --inline-start: left;
+  --inline-end: right;
 
-  --sidebar-width:200px;
-  --sidebar-transition-duration:200ms;
-  --sidebar-transition-timing-function:ease;
+  --sidebar-width: 200px;
+  --sidebar-transition-duration: 200ms;
+  --sidebar-transition-timing-function: ease;
 
-  --toolbar-icon-opacity:0.7;
-  --doorhanger-icon-opacity:0.9;
-  --editor-toolbar-base-offset:105px;
+  --toolbar-icon-opacity: 0.7;
+  --doorhanger-icon-opacity: 0.9;
+  --editor-toolbar-base-offset: 105px;
 
-  --main-color:rgb(12 12 13);
-  --body-bg-color:rgb(212 212 215);
-  --progressBar-color:rgb(10 132 255);
-  --progressBar-bg-color:rgb(221 221 222);
-  --progressBar-blend-color:rgb(116 177 239);
-  --scrollbar-color:auto;
-  --scrollbar-bg-color:auto;
-  --toolbar-icon-bg-color:rgb(0 0 0);
-  --toolbar-icon-hover-bg-color:rgb(0 0 0);
+  --main-color: rgb(12 12 13);
+  --body-bg-color: rgb(212 212 215);
+  --progressBar-color: rgb(10 132 255);
+  --progressBar-bg-color: rgb(221 221 222);
+  --progressBar-blend-color: rgb(116 177 239);
+  --scrollbar-color: auto;
+  --scrollbar-bg-color: auto;
+  --toolbar-icon-bg-color: rgb(0 0 0);
+  --toolbar-icon-hover-bg-color: rgb(0 0 0);
 
-  --sidebar-narrow-bg-color:rgb(212 212 215 / 0.9);
-  --sidebar-toolbar-bg-color:rgb(245 246 247);
-  --toolbar-bg-color:rgb(249 249 250);
-  --toolbar-border-color:rgb(184 184 184);
-  --toolbar-box-shadow:0 1px 0 var(--toolbar-border-color);
-  --toolbar-border-bottom:none;
-  --toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
-  --toolbarSidebar-border-bottom:none;
-  --button-hover-color:rgb(221 222 223);
-  --toggled-btn-color:rgb(0 0 0);
-  --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
-  --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
-  --toggled-hover-btn-outline:none;
-  --dropdown-btn-bg-color:rgb(215 215 219);
-  --dropdown-btn-border:none;
-  --separator-color:rgb(0 0 0 / 0.3);
-  --field-color:rgb(6 6 6);
-  --field-bg-color:rgb(255 255 255);
-  --field-border-color:rgb(187 187 188);
-  --treeitem-color:rgb(0 0 0 / 0.8);
-  --treeitem-bg-color:rgb(0 0 0 / 0.15);
-  --treeitem-hover-color:rgb(0 0 0 / 0.9);
-  --treeitem-selected-color:rgb(0 0 0 / 0.9);
-  --treeitem-selected-bg-color:rgb(0 0 0 / 0.25);
-  --thumbnail-hover-color:rgb(0 0 0 / 0.1);
-  --thumbnail-selected-color:rgb(0 0 0 / 0.2);
-  --doorhanger-bg-color:rgb(255 255 255);
-  --doorhanger-border-color:rgb(12 12 13 / 0.2);
-  --doorhanger-hover-color:rgb(12 12 13);
-  --doorhanger-hover-bg-color:rgb(237 237 237);
-  --doorhanger-separator-color:rgb(222 222 222);
-  --dialog-button-border:none;
-  --dialog-button-bg-color:rgb(12 12 13 / 0.1);
-  --dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
+  --sidebar-narrow-bg-color: rgb(212 212 215 / 0.9);
+  --sidebar-toolbar-bg-color: rgb(245 246 247);
+  --toolbar-bg-color: rgb(249 249 250);
+  --toolbar-border-color: rgb(184 184 184);
+  --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
+  --toolbar-border-bottom: none;
+  --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
+  --toolbarSidebar-border-bottom: none;
+  --button-hover-color: rgb(221 222 223);
+  --toggled-btn-color: rgb(0 0 0);
+  --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
+  --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
+  --toggled-hover-btn-outline: none;
+  --dropdown-btn-bg-color: rgb(215 215 219);
+  --dropdown-btn-border: none;
+  --separator-color: rgb(0 0 0 / 0.3);
+  --field-color: rgb(6 6 6);
+  --field-bg-color: rgb(255 255 255);
+  --field-border-color: rgb(187 187 188);
+  --treeitem-color: rgb(0 0 0 / 0.8);
+  --treeitem-bg-color: rgb(0 0 0 / 0.15);
+  --treeitem-hover-color: rgb(0 0 0 / 0.9);
+  --treeitem-selected-color: rgb(0 0 0 / 0.9);
+  --treeitem-selected-bg-color: rgb(0 0 0 / 0.25);
+  --thumbnail-hover-color: rgb(0 0 0 / 0.1);
+  --thumbnail-selected-color: rgb(0 0 0 / 0.2);
+  --doorhanger-bg-color: rgb(255 255 255);
+  --doorhanger-border-color: rgb(12 12 13 / 0.2);
+  --doorhanger-hover-color: rgb(12 12 13);
+  --doorhanger-hover-bg-color: rgb(237 237 237);
+  --doorhanger-separator-color: rgb(222 222 222);
+  --dialog-button-border: none;
+  --dialog-button-bg-color: rgb(12 12 13 / 0.1);
+  --dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
 
-  --loading-icon:url(../images/loading.svg);
-  --treeitem-expanded-icon:url(../images/treeitem-expanded.svg);
-  --treeitem-collapsed-icon:url(../images/treeitem-collapsed.svg);
-  --toolbarButton-editorFreeText-icon:url(../images/toolbarButton-editorFreeText.svg);
-  --toolbarButton-editorHighlight-icon:url(../images/toolbarButton-editorHighlight.svg);
-  --toolbarButton-editorInk-icon:url(../images/toolbarButton-editorInk.svg);
-  --toolbarButton-editorStamp-icon:url(../images/toolbarButton-editorStamp.svg);
-  --toolbarButton-menuArrow-icon:url(../images/toolbarButton-menuArrow.svg);
-  --toolbarButton-sidebarToggle-icon:url(../images/toolbarButton-sidebarToggle.svg);
-  --toolbarButton-secondaryToolbarToggle-icon:url(../images/toolbarButton-secondaryToolbarToggle.svg);
-  --toolbarButton-pageUp-icon:url(../images/toolbarButton-pageUp.svg);
-  --toolbarButton-pageDown-icon:url(../images/toolbarButton-pageDown.svg);
-  --toolbarButton-zoomOut-icon:url(../images/toolbarButton-zoomOut.svg);
-  --toolbarButton-zoomIn-icon:url(../images/toolbarButton-zoomIn.svg);
-  --toolbarButton-presentationMode-icon:url(../images/toolbarButton-presentationMode.svg);
-  --toolbarButton-print-icon:url(../images/toolbarButton-print.svg);
-  --toolbarButton-openFile-icon:url(../images/toolbarButton-openFile.svg);
-  --toolbarButton-download-icon:url(../images/toolbarButton-download.svg);
-  --toolbarButton-bookmark-icon:url(../images/toolbarButton-bookmark.svg);
-  --toolbarButton-viewThumbnail-icon:url(../images/toolbarButton-viewThumbnail.svg);
-  --toolbarButton-viewOutline-icon:url(../images/toolbarButton-viewOutline.svg);
-  --toolbarButton-viewAttachments-icon:url(../images/toolbarButton-viewAttachments.svg);
-  --toolbarButton-viewLayers-icon:url(../images/toolbarButton-viewLayers.svg);
-  --toolbarButton-currentOutlineItem-icon:url(../images/toolbarButton-currentOutlineItem.svg);
-  --toolbarButton-search-icon:url(../images/toolbarButton-search.svg);
-  --toolbarButton-backToHome-icon:url(../images/toolbarButton-home.svg);
-  --findbarButton-previous-icon:url(../images/findbarButton-previous.svg);
-  --findbarButton-next-icon:url(../images/findbarButton-next.svg);
-  --secondaryToolbarButton-firstPage-icon:url(../images/secondaryToolbarButton-firstPage.svg);
-  --secondaryToolbarButton-lastPage-icon:url(../images/secondaryToolbarButton-lastPage.svg);
-  --secondaryToolbarButton-rotateCcw-icon:url(../images/secondaryToolbarButton-rotateCcw.svg);
-  --secondaryToolbarButton-rotateCw-icon:url(../images/secondaryToolbarButton-rotateCw.svg);
-  --secondaryToolbarButton-selectTool-icon:url(../images/secondaryToolbarButton-selectTool.svg);
-  --secondaryToolbarButton-handTool-icon:url(../images/secondaryToolbarButton-handTool.svg);
-  --secondaryToolbarButton-scrollPage-icon:url(../images/secondaryToolbarButton-scrollPage.svg);
-  --secondaryToolbarButton-scrollVertical-icon:url(../images/secondaryToolbarButton-scrollVertical.svg);
-  --secondaryToolbarButton-scrollHorizontal-icon:url(../images/secondaryToolbarButton-scrollHorizontal.svg);
-  --secondaryToolbarButton-scrollWrapped-icon:url(../images/secondaryToolbarButton-scrollWrapped.svg);
-  --secondaryToolbarButton-spreadNone-icon:url(../images/secondaryToolbarButton-spreadNone.svg);
-  --secondaryToolbarButton-spreadOdd-icon:url(../images/secondaryToolbarButton-spreadOdd.svg);
-  --secondaryToolbarButton-spreadEven-icon:url(../images/secondaryToolbarButton-spreadEven.svg);
-  --secondaryToolbarButton-documentProperties-icon:url(../images/secondaryToolbarButton-documentProperties.svg);
-  --editorParams-stampAddImage-icon:url(../images/toolbarButton-zoomIn.svg);
+  --loading-icon: url(../images/loading.svg);
+  --treeitem-expanded-icon: url(../images/treeitem-expanded.svg);
+  --treeitem-collapsed-icon: url(../images/treeitem-collapsed.svg);
+  --toolbarButton-editorFreeText-icon: url(../images/toolbarButton-editorFreeText.svg);
+  --toolbarButton-editorHighlight-icon: url(../images/toolbarButton-editorHighlight.svg);
+  --toolbarButton-editorInk-icon: url(../images/toolbarButton-editorInk.svg);
+  --toolbarButton-editorStamp-icon: url(../images/toolbarButton-editorStamp.svg);
+  --toolbarButton-menuArrow-icon: url(../images/toolbarButton-menuArrow.svg);
+  --toolbarButton-sidebarToggle-icon: url(../images/toolbarButton-sidebarToggle.svg);
+  --toolbarButton-secondaryToolbarToggle-icon: url(../images/toolbarButton-secondaryToolbarToggle.svg);
+  --toolbarButton-pageUp-icon: url(../images/toolbarButton-pageUp.svg);
+  --toolbarButton-pageDown-icon: url(../images/toolbarButton-pageDown.svg);
+  --toolbarButton-zoomOut-icon: url(../images/toolbarButton-zoomOut.svg);
+  --toolbarButton-zoomIn-icon: url(../images/toolbarButton-zoomIn.svg);
+  --toolbarButton-presentationMode-icon: url(../images/toolbarButton-presentationMode.svg);
+  --toolbarButton-print-icon: url(../images/toolbarButton-print.svg);
+  --toolbarButton-openFile-icon: url(../images/toolbarButton-openFile.svg);
+  --toolbarButton-download-icon: url(../images/toolbarButton-download.svg);
+  --toolbarButton-bookmark-icon: url(../images/toolbarButton-bookmark.svg);
+  --toolbarButton-viewThumbnail-icon: url(../images/toolbarButton-viewThumbnail.svg);
+  --toolbarButton-viewOutline-icon: url(../images/toolbarButton-viewOutline.svg);
+  --toolbarButton-viewAttachments-icon: url(../images/toolbarButton-viewAttachments.svg);
+  --toolbarButton-viewLayers-icon: url(../images/toolbarButton-viewLayers.svg);
+  --toolbarButton-currentOutlineItem-icon: url(../images/toolbarButton-currentOutlineItem.svg);
+  --toolbarButton-search-icon: url(../images/toolbarButton-search.svg);
+  --toolbarButton-backToHome-icon: url(../images/toolbarButton-home.svg);
+  --findbarButton-previous-icon: url(../images/findbarButton-previous.svg);
+  --findbarButton-next-icon: url(../images/findbarButton-next.svg);
+  --secondaryToolbarButton-firstPage-icon: url(../images/secondaryToolbarButton-firstPage.svg);
+  --secondaryToolbarButton-lastPage-icon: url(../images/secondaryToolbarButton-lastPage.svg);
+  --secondaryToolbarButton-rotateCcw-icon: url(../images/secondaryToolbarButton-rotateCcw.svg);
+  --secondaryToolbarButton-rotateCw-icon: url(../images/secondaryToolbarButton-rotateCw.svg);
+  --secondaryToolbarButton-selectTool-icon: url(../images/secondaryToolbarButton-selectTool.svg);
+  --secondaryToolbarButton-handTool-icon: url(../images/secondaryToolbarButton-handTool.svg);
+  --secondaryToolbarButton-scrollPage-icon: url(../images/secondaryToolbarButton-scrollPage.svg);
+  --secondaryToolbarButton-scrollVertical-icon: url(../images/secondaryToolbarButton-scrollVertical.svg);
+  --secondaryToolbarButton-scrollHorizontal-icon: url(../images/secondaryToolbarButton-scrollHorizontal.svg);
+  --secondaryToolbarButton-scrollWrapped-icon: url(../images/secondaryToolbarButton-scrollWrapped.svg);
+  --secondaryToolbarButton-spreadNone-icon: url(../images/secondaryToolbarButton-spreadNone.svg);
+  --secondaryToolbarButton-spreadOdd-icon: url(../images/secondaryToolbarButton-spreadOdd.svg);
+  --secondaryToolbarButton-spreadEven-icon: url(../images/secondaryToolbarButton-spreadEven.svg);
+  --secondaryToolbarButton-documentProperties-icon: url(../images/secondaryToolbarButton-documentProperties.svg);
+  --editorParams-stampAddImage-icon: url(../images/toolbarButton-zoomIn.svg);
 }
 
-[dir="rtl"]:root{
-  --dir-factor:-1;
-  --inline-start:right;
-  --inline-end:left;
+[dir="rtl"]:root {
+  --dir-factor: -1;
+  --inline-start: right;
+  --inline-end: left;
 }
 
-@media (prefers-color-scheme: dark){
-  :root:where(:not(.is-light)){
-    --main-color:rgb(249 249 250);
-    --body-bg-color:rgb(42 42 46);
-    --progressBar-color:rgb(0 96 223);
-    --progressBar-bg-color:rgb(40 40 43);
-    --progressBar-blend-color:rgb(20 68 133);
-    --scrollbar-color:rgb(121 121 123);
-    --scrollbar-bg-color:rgb(35 35 39);
-    --toolbar-icon-bg-color:rgb(255 255 255);
-    --toolbar-icon-hover-bg-color:rgb(255 255 255);
+@media (prefers-color-scheme: dark) {
+  :root:where(:not(.is-light)) {
+    --main-color: rgb(249 249 250);
+    --body-bg-color: rgb(42 42 46);
+    --progressBar-color: rgb(0 96 223);
+    --progressBar-bg-color: rgb(40 40 43);
+    --progressBar-blend-color: rgb(20 68 133);
+    --scrollbar-color: rgb(121 121 123);
+    --scrollbar-bg-color: rgb(35 35 39);
+    --toolbar-icon-bg-color: rgb(255 255 255);
+    --toolbar-icon-hover-bg-color: rgb(255 255 255);
 
-    --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
-    --sidebar-toolbar-bg-color:rgb(50 50 52);
-    --toolbar-bg-color:rgb(56 56 61);
-    --toolbar-border-color:rgb(12 12 13);
-    --button-hover-color:rgb(102 102 103);
-    --toggled-btn-color:rgb(255 255 255);
-    --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
-    --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
-    --dropdown-btn-bg-color:rgb(74 74 79);
-    --separator-color:rgb(0 0 0 / 0.3);
-    --field-color:rgb(250 250 250);
-    --field-bg-color:rgb(64 64 68);
-    --field-border-color:rgb(115 115 115);
-    --treeitem-color:rgb(255 255 255 / 0.8);
-    --treeitem-bg-color:rgb(255 255 255 / 0.15);
-    --treeitem-hover-color:rgb(255 255 255 / 0.9);
-    --treeitem-selected-color:rgb(255 255 255 / 0.9);
-    --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
-    --thumbnail-hover-color:rgb(255 255 255 / 0.1);
-    --thumbnail-selected-color:rgb(255 255 255 / 0.2);
-    --doorhanger-bg-color:rgb(74 74 79);
-    --doorhanger-border-color:rgb(39 39 43);
-    --doorhanger-hover-color:rgb(249 249 250);
-    --doorhanger-hover-bg-color:rgb(93 94 98);
-    --doorhanger-separator-color:rgb(92 92 97);
-    --dialog-button-bg-color:rgb(92 92 97);
-    --dialog-button-hover-bg-color:rgb(115 115 115);
+    --sidebar-narrow-bg-color: rgb(42 42 46 / 0.9);
+    --sidebar-toolbar-bg-color: rgb(50 50 52);
+    --toolbar-bg-color: rgb(56 56 61);
+    --toolbar-border-color: rgb(12 12 13);
+    --button-hover-color: rgb(102 102 103);
+    --toggled-btn-color: rgb(255 255 255);
+    --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
+    --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
+    --dropdown-btn-bg-color: rgb(74 74 79);
+    --separator-color: rgb(0 0 0 / 0.3);
+    --field-color: rgb(250 250 250);
+    --field-bg-color: rgb(64 64 68);
+    --field-border-color: rgb(115 115 115);
+    --treeitem-color: rgb(255 255 255 / 0.8);
+    --treeitem-bg-color: rgb(255 255 255 / 0.15);
+    --treeitem-hover-color: rgb(255 255 255 / 0.9);
+    --treeitem-selected-color: rgb(255 255 255 / 0.9);
+    --treeitem-selected-bg-color: rgb(255 255 255 / 0.25);
+    --thumbnail-hover-color: rgb(255 255 255 / 0.1);
+    --thumbnail-selected-color: rgb(255 255 255 / 0.2);
+    --doorhanger-bg-color: rgb(74 74 79);
+    --doorhanger-border-color: rgb(39 39 43);
+    --doorhanger-hover-color: rgb(249 249 250);
+    --doorhanger-hover-bg-color: rgb(93 94 98);
+    --doorhanger-separator-color: rgb(92 92 97);
+    --dialog-button-bg-color: rgb(92 92 97);
+    --dialog-button-hover-bg-color: rgb(115 115 115);
   }
 }
 
-:root:where(.is-dark){
-    --main-color:rgb(249 249 250);
-    --body-bg-color:rgb(42 42 46);
-    --progressBar-color:rgb(0 96 223);
-    --progressBar-bg-color:rgb(40 40 43);
-    --progressBar-blend-color:rgb(20 68 133);
-    --scrollbar-color:rgb(121 121 123);
-    --scrollbar-bg-color:rgb(35 35 39);
-    --toolbar-icon-bg-color:rgb(255 255 255);
-    --toolbar-icon-hover-bg-color:rgb(255 255 255);
+:root:where(.is-dark) {
+  --main-color: rgb(249 249 250);
+  --body-bg-color: rgb(42 42 46);
+  --progressBar-color: rgb(0 96 223);
+  --progressBar-bg-color: rgb(40 40 43);
+  --progressBar-blend-color: rgb(20 68 133);
+  --scrollbar-color: rgb(121 121 123);
+  --scrollbar-bg-color: rgb(35 35 39);
+  --toolbar-icon-bg-color: rgb(255 255 255);
+  --toolbar-icon-hover-bg-color: rgb(255 255 255);
 
-    --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
-    --sidebar-toolbar-bg-color:rgb(50 50 52);
-    --toolbar-bg-color:rgb(56 56 61);
-    --toolbar-border-color:rgb(12 12 13);
-    --button-hover-color:rgb(102 102 103);
-    --toggled-btn-color:rgb(255 255 255);
-    --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
-    --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
-    --dropdown-btn-bg-color:rgb(74 74 79);
-    --separator-color:rgb(0 0 0 / 0.3);
-    --field-color:rgb(250 250 250);
-    --field-bg-color:rgb(64 64 68);
-    --field-border-color:rgb(115 115 115);
-    --treeitem-color:rgb(255 255 255 / 0.8);
-    --treeitem-bg-color:rgb(255 255 255 / 0.15);
-    --treeitem-hover-color:rgb(255 255 255 / 0.9);
-    --treeitem-selected-color:rgb(255 255 255 / 0.9);
-    --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
-    --thumbnail-hover-color:rgb(255 255 255 / 0.1);
-    --thumbnail-selected-color:rgb(255 255 255 / 0.2);
-    --doorhanger-bg-color:rgb(74 74 79);
-    --doorhanger-border-color:rgb(39 39 43);
-    --doorhanger-hover-color:rgb(249 249 250);
-    --doorhanger-hover-bg-color:rgb(93 94 98);
-    --doorhanger-separator-color:rgb(92 92 97);
-    --dialog-button-bg-color:rgb(92 92 97);
-    --dialog-button-hover-bg-color:rgb(115 115 115);
-  }
+  --sidebar-narrow-bg-color: rgb(42 42 46 / 0.9);
+  --sidebar-toolbar-bg-color: rgb(50 50 52);
+  --toolbar-bg-color: rgb(56 56 61);
+  --toolbar-border-color: rgb(12 12 13);
+  --button-hover-color: rgb(102 102 103);
+  --toggled-btn-color: rgb(255 255 255);
+  --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
+  --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
+  --dropdown-btn-bg-color: rgb(74 74 79);
+  --separator-color: rgb(0 0 0 / 0.3);
+  --field-color: rgb(250 250 250);
+  --field-bg-color: rgb(64 64 68);
+  --field-border-color: rgb(115 115 115);
+  --treeitem-color: rgb(255 255 255 / 0.8);
+  --treeitem-bg-color: rgb(255 255 255 / 0.15);
+  --treeitem-hover-color: rgb(255 255 255 / 0.9);
+  --treeitem-selected-color: rgb(255 255 255 / 0.9);
+  --treeitem-selected-bg-color: rgb(255 255 255 / 0.25);
+  --thumbnail-hover-color: rgb(255 255 255 / 0.1);
+  --thumbnail-selected-color: rgb(255 255 255 / 0.2);
+  --doorhanger-bg-color: rgb(74 74 79);
+  --doorhanger-border-color: rgb(39 39 43);
+  --doorhanger-hover-color: rgb(249 249 250);
+  --doorhanger-hover-bg-color: rgb(93 94 98);
+  --doorhanger-separator-color: rgb(92 92 97);
+  --dialog-button-bg-color: rgb(92 92 97);
+  --dialog-button-hover-bg-color: rgb(115 115 115);
+}
 
-@media screen and (forced-colors: active){
-  :root{
-    --button-hover-color:Highlight;
-    --doorhanger-hover-bg-color:Highlight;
-    --toolbar-icon-opacity:1;
-    --toolbar-icon-bg-color:ButtonText;
-    --toolbar-icon-hover-bg-color:ButtonFace;
-    --toggled-hover-active-btn-color:ButtonText;
-    --toggled-hover-btn-outline:2px solid ButtonBorder;
-    --toolbar-border-color:CanvasText;
-    --toolbar-border-bottom:1px solid var(--toolbar-border-color);
-    --toolbar-box-shadow:none;
-    --toggled-btn-color:HighlightText;
-    --toggled-btn-bg-color:LinkText;
-    --doorhanger-hover-color:ButtonFace;
-    --doorhanger-border-color-whcm:1px solid ButtonText;
-    --doorhanger-triangle-opacity-whcm:0;
-    --dialog-button-border:1px solid Highlight;
-    --dialog-button-hover-bg-color:Highlight;
-    --dialog-button-hover-color:ButtonFace;
-    --dropdown-btn-border:1px solid ButtonText;
-    --field-border-color:ButtonText;
-    --main-color:CanvasText;
-    --separator-color:GrayText;
-    --doorhanger-separator-color:GrayText;
-    --toolbarSidebar-box-shadow:none;
-    --toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color);
+@media screen and (forced-colors: active) {
+  :root {
+    --button-hover-color: Highlight;
+    --doorhanger-hover-bg-color: Highlight;
+    --toolbar-icon-opacity: 1;
+    --toolbar-icon-bg-color: ButtonText;
+    --toolbar-icon-hover-bg-color: ButtonFace;
+    --toggled-hover-active-btn-color: ButtonText;
+    --toggled-hover-btn-outline: 2px solid ButtonBorder;
+    --toolbar-border-color: CanvasText;
+    --toolbar-border-bottom: 1px solid var(--toolbar-border-color);
+    --toolbar-box-shadow: none;
+    --toggled-btn-color: HighlightText;
+    --toggled-btn-bg-color: LinkText;
+    --doorhanger-hover-color: ButtonFace;
+    --doorhanger-border-color-whcm: 1px solid ButtonText;
+    --doorhanger-triangle-opacity-whcm: 0;
+    --dialog-button-border: 1px solid Highlight;
+    --dialog-button-hover-bg-color: Highlight;
+    --dialog-button-hover-color: ButtonFace;
+    --dropdown-btn-border: 1px solid ButtonText;
+    --field-border-color: ButtonText;
+    --main-color: CanvasText;
+    --separator-color: GrayText;
+    --doorhanger-separator-color: GrayText;
+    --toolbarSidebar-box-shadow: none;
+    --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color);
   }
 }
 
-@media screen and (prefers-reduced-motion: reduce){
-  :root{
-    --sidebar-transition-duration:0;
+@media screen and (prefers-reduced-motion: reduce) {
+  :root {
+    --sidebar-transition-duration: 0;
   }
 }
 
-*{
-  padding:0;
-  margin:0;
+* {
+  padding: 0;
+  margin: 0;
 }
 
 html,
-body{
-  height:100%;
-  width:100%;
+body {
+  height: 100%;
+  width: 100%;
 }
 
-body{
-  background-color:var(--body-bg-color);
-  scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
+body {
+  background-color: var(--body-bg-color);
+  scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
 }
 
 .hidden,
-[hidden]{
-  display:none !important;
+[hidden] {
+  display: none !important;
 }
 
-#viewerContainer.pdfPresentationMode:fullscreen{
-  top:0;
-  background-color:rgb(0 0 0);
-  width:100%;
-  height:100%;
-  overflow:hidden;
-  cursor:none;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
+#viewerContainer.pdfPresentationMode:fullscreen {
+  top: 0;
+  background-color: rgb(0 0 0);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
-.pdfPresentationMode:fullscreen section:not([data-internal-link]){
-  pointer-events:none;
+.pdfPresentationMode:fullscreen section:not([data-internal-link]) {
+  pointer-events: none;
 }
 
-.pdfPresentationMode:fullscreen .textLayer span{
-  cursor:none;
+.pdfPresentationMode:fullscreen .textLayer span {
+  cursor: none;
 }
 
-.pdfPresentationMode.pdfPresentationModeControls > *,
-.pdfPresentationMode.pdfPresentationModeControls .textLayer span{
-  cursor:default;
+.pdfPresentationMode.pdfPresentationModeControls>*,
+.pdfPresentationMode.pdfPresentationModeControls .textLayer span {
+  cursor: default;
 }
 
-#outerContainer{
-  width:100%;
-  height:100%;
-  position:relative;
+#outerContainer {
+  width: 100%;
+  height: calc(100% - var(--navbar-height));
+  position: relative;
 }
 
-#sidebarContainer{
-  position:absolute;
-  inset-block:32px 0;
-  inset-inline-start:calc(-1 * var(--sidebar-width));
-  width:var(--sidebar-width);
-  visibility:hidden;
-  z-index:100;
-  font:message-box;
-  border-top:1px solid rgb(51 51 51);
-  border-inline-end:var(--doorhanger-border-color-whcm);
-  transition-property:inset-inline-start;
-  transition-duration:var(--sidebar-transition-duration);
-  transition-timing-function:var(--sidebar-transition-timing-function);
+#sidebarContainer {
+  position: absolute;
+  inset-block: 32px 0;
+  inset-inline-start: calc(-1 * var(--sidebar-width));
+  width: var(--sidebar-width);
+  visibility: hidden;
+  z-index: 100;
+  font: message-box;
+  border-top: 1px solid rgb(51 51 51);
+  border-inline-end: var(--doorhanger-border-color-whcm);
+  transition-property: inset-inline-start;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
-#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{
-  visibility:visible;
-}
-#outerContainer.sidebarOpen #sidebarContainer{
-  inset-inline-start:0;
+#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer {
+  visibility: visible;
 }
 
-#mainContainer{
-  position:absolute;
-  inset:0;
-  min-width:350px;
+#outerContainer.sidebarOpen #sidebarContainer {
+  inset-inline-start: 0;
 }
 
-#sidebarContent{
-  inset-block:32px 0;
-  inset-inline-start:0;
-  overflow:auto;
-  position:absolute;
-  width:100%;
-  box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
+#mainContainer {
+  position: absolute;
+  inset: 0;
+  min-width: 350px;
 }
 
-#viewerContainer{
-  overflow:auto;
-  position:absolute;
-  inset:32px 0 0;
-  outline:none;
-}
-#viewerContainer:not(.pdfPresentationMode){
-  transition-duration:var(--sidebar-transition-duration);
-  transition-timing-function:var(--sidebar-transition-timing-function);
+#sidebarContent {
+  inset-block: 32px 0;
+  inset-inline-start: 0;
+  overflow: auto;
+  position: absolute;
+  width: 100%;
+  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
 }
 
-#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){
-  inset-inline-start:var(--sidebar-width);
-  transition-property:inset-inline-start;
+#viewerContainer {
+  overflow: auto;
+  position: absolute;
+  inset: 32px 0 0;
+  outline: none;
 }
 
-.toolbar{
-  position:relative;
-  inset-inline:0;
-  z-index:9999;
-  cursor:default;
-  font:message-box;
+#viewerContainer:not(.pdfPresentationMode) {
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
-:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
-  :is(input, button, select),
-.secondaryToolbar :is(input, button, a, select){
-  outline:none;
-  font:message-box;
+#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+  inset-inline-start: var(--sidebar-width);
+  transition-property: inset-inline-start;
 }
 
-#toolbarContainer{
-  width:100%;
+.toolbar {
+  position: relative;
+  inset-inline: 0;
+  z-index: 9999;
+  cursor: default;
+  font: message-box;
 }
 
-#toolbarSidebar{
-  width:100%;
-  height:32px;
-  background-color:var(--sidebar-toolbar-bg-color);
-  box-shadow:var(--toolbarSidebar-box-shadow);
-  border-bottom:var(--toolbarSidebar-border-bottom);
+:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer) :is(input, button, select),
+.secondaryToolbar :is(input, button, a, select) {
+  outline: none;
+  font: message-box;
 }
 
-#sidebarResizer{
-  position:absolute;
-  inset-block:0;
-  inset-inline-end:-6px;
-  width:6px;
-  z-index:200;
-  cursor:ew-resize;
+#toolbarContainer {
+  width: 100%;
+}
+
+#toolbarSidebar {
+  width: 100%;
+  height: 32px;
+  background-color: var(--sidebar-toolbar-bg-color);
+  box-shadow: var(--toolbarSidebar-box-shadow);
+  border-bottom: var(--toolbarSidebar-border-bottom);
+}
+
+#sidebarResizer {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: -6px;
+  width: 6px;
+  z-index: 200;
+  cursor: ew-resize;
 }
 
 #toolbarContainer,
 .findbar,
 .secondaryToolbar,
-.editorParamsToolbar{
-  position:relative;
-  height:32px;
-  background-color:var(--toolbar-bg-color);
-  box-shadow:var(--toolbar-box-shadow);
-  border-bottom:var(--toolbar-border-bottom);
+.editorParamsToolbar {
+  position: relative;
+  height: 32px;
+  background-color: var(--toolbar-bg-color);
+  box-shadow: var(--toolbar-box-shadow);
+  border-bottom: var(--toolbar-border-bottom);
 }
 
-#toolbarViewer{
-  height:32px;
+#toolbarViewer {
+  height: 32px;
 }
 
-#loadingBar{
-  --progressBar-percent:0%;
-  --progressBar-end-offset:0;
+#loadingBar {
+  --progressBar-percent: 0%;
+  --progressBar-end-offset: 0;
 
-  position:absolute;
-  inset-inline:0 var(--progressBar-end-offset);
-  height:4px;
-  background-color:var(--progressBar-bg-color);
-  border-bottom:1px solid var(--toolbar-border-color);
-  transition-property:inset-inline-start;
-  transition-duration:var(--sidebar-transition-duration);
-  transition-timing-function:var(--sidebar-transition-timing-function);
+  position: absolute;
+  inset-inline: 0 var(--progressBar-end-offset);
+  height: 4px;
+  background-color: var(--progressBar-bg-color);
+  border-bottom: 1px solid var(--toolbar-border-color);
+  transition-property: inset-inline-start;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
-#outerContainer.sidebarOpen #loadingBar{
-  inset-inline-start:var(--sidebar-width);
+#outerContainer.sidebarOpen #loadingBar {
+  inset-inline-start: var(--sidebar-width);
 }
 
-#loadingBar .progress{
-  position:absolute;
-  top:0;
-  inset-inline-start:0;
-  width:100%;
-  transform:scaleX(var(--progressBar-percent));
-  transform-origin:calc(50% - 50% * var(--dir-factor)) 0;
-  height:100%;
-  background-color:var(--progressBar-color);
-  overflow:hidden;
-  transition:transform 200ms;
+#loadingBar .progress {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  transform: scaleX(var(--progressBar-percent));
+  transform-origin: calc(50% - 50% * var(--dir-factor)) 0;
+  height: 100%;
+  background-color: var(--progressBar-color);
+  overflow: hidden;
+  transition: transform 200ms;
 }
 
-@keyframes progressIndeterminate{
-  0%{
-    transform:translateX(calc(-142px * var(--dir-factor)));
+@keyframes progressIndeterminate {
+  0% {
+    transform: translateX(calc(-142px * var(--dir-factor)));
   }
-  100%{
-    transform:translateX(0);
+
+  100% {
+    transform: translateX(0);
   }
 }
 
-#loadingBar.indeterminate .progress{
-  transform:none;
-  background-color:var(--progressBar-bg-color);
-  transition:none;
+#loadingBar.indeterminate .progress {
+  transform: none;
+  background-color: var(--progressBar-bg-color);
+  transition: none;
 }
 
-#loadingBar.indeterminate .progress .glimmer{
-  position:absolute;
-  top:0;
-  inset-inline-start:0;
-  height:100%;
-  width:calc(100% + 150px);
-  background:repeating-linear-gradient(
-    135deg,
-    var(--progressBar-blend-color) 0,
-    var(--progressBar-bg-color) 5px,
-    var(--progressBar-bg-color) 45px,
-    var(--progressBar-color) 55px,
-    var(--progressBar-color) 95px,
-    var(--progressBar-blend-color) 100px
-  );
-  animation:progressIndeterminate 1s linear infinite;
+#loadingBar.indeterminate .progress .glimmer {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: calc(100% + 150px);
+  background: repeating-linear-gradient(135deg,
+      var(--progressBar-blend-color) 0,
+      var(--progressBar-bg-color) 5px,
+      var(--progressBar-bg-color) 45px,
+      var(--progressBar-color) 55px,
+      var(--progressBar-color) 95px,
+      var(--progressBar-blend-color) 100px);
+  animation: progressIndeterminate 1s linear infinite;
 }
 
-#outerContainer.sidebarResizing
-  :is(#sidebarContainer, #viewerContainer, #loadingBar){
-  transition-duration:0s;
+#outerContainer.sidebarResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) {
+  transition-duration: 0s;
 }
 
 .findbar,
 .secondaryToolbar,
-.editorParamsToolbar{
-  top:32px;
-  position:absolute;
-  z-index:30000;
-  height:auto;
-  padding:0 4px;
-  margin:4px 2px;
-  font:message-box;
-  font-size:12px;
-  line-height:14px;
-  text-align:left;
-  cursor:default;
+.editorParamsToolbar {
+  top: 32px;
+  position: absolute;
+  z-index: 30000;
+  height: auto;
+  padding: 0 4px;
+  margin: 4px 2px;
+  font: message-box;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: left;
+  cursor: default;
 }
 
-.findbar{
-  inset-inline-start:64px;
-  min-width:300px;
-  background-color:var(--toolbar-bg-color);
-}
-.findbar > div{
-  height:32px;
-}
-.findbar > div#findbarInputContainer{
-  margin-inline-end:4px;
-}
-.findbar.wrapContainers > div,
-.findbar.wrapContainers > div#findbarMessageContainer > *{
-  clear:both;
-}
-.findbar.wrapContainers > div#findbarMessageContainer{
-  height:auto;
+.findbar {
+  inset-inline-start: 64px;
+  min-width: 300px;
+  background-color: var(--toolbar-bg-color);
 }
 
-.findbar input[type="checkbox"]{
-  pointer-events:none;
+.findbar>div {
+  height: 32px;
 }
 
-.findbar label{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
+.findbar>div#findbarInputContainer {
+  margin-inline-end: 4px;
+}
+
+.findbar.wrapContainers>div,
+.findbar.wrapContainers>div#findbarMessageContainer>* {
+  clear: both;
+}
+
+.findbar.wrapContainers>div#findbarMessageContainer {
+  height: auto;
+}
+
+.findbar input[type="checkbox"] {
+  pointer-events: none;
+}
+
+.findbar label {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
 .findbar label:hover,
-.findbar input:focus-visible + label{
-  color:var(--toggled-btn-color);
-  background-color:var(--button-hover-color);
+.findbar input:focus-visible+label {
+  color: var(--toggled-btn-color);
+  background-color: var(--button-hover-color);
 }
 
-.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel{
-  background-color:var(--toggled-btn-bg-color) !important;
-  color:var(--toggled-btn-color);
+.findbar .toolbarField[type="checkbox"]:checked+.toolbarLabel {
+  background-color: var(--toggled-btn-bg-color) !important;
+  color: var(--toggled-btn-color);
 }
 
-#findInput{
-  width:200px;
+#findInput {
+  width: 200px;
 }
 
-#findInput::-moz-placeholder{
-    font-style:normal;
-  }
+#findInput::-moz-placeholder {
+  font-style: normal;
+}
 
-#findInput::placeholder{
-    font-style:normal;
-  }
+#findInput::placeholder {
+  font-style: normal;
+}
 
-.loadingInput:has(> #findInput[data-status="pending"])::after{
-    display:block;
-    visibility:visible;
-  }
+.loadingInput:has(> #findInput[data-status="pending"])::after {
+  display: block;
+  visibility: visible;
+}
 
-#findInput[data-status="notFound"]{
-    background-color:rgb(255 102 102);
-  }
+#findInput[data-status="notFound"] {
+  background-color: rgb(255 102 102);
+}
 
 .secondaryToolbar,
-.editorParamsToolbar{
-  padding:6px 0 10px;
-  inset-inline-end:4px;
-  height:auto;
-  background-color:var(--doorhanger-bg-color);
+.editorParamsToolbar {
+  padding: 6px 0 10px;
+  inset-inline-end: 4px;
+  height: auto;
+  background-color: var(--doorhanger-bg-color);
 }
 
-.editorParamsToolbarContainer{
-  width:220px;
-  margin-bottom:-4px;
+.editorParamsToolbarContainer {
+  width: 220px;
+  margin-bottom: -4px;
 }
 
-.editorParamsToolbarContainer > .editorParamsSetter{
-  min-height:26px;
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  padding-inline:10px;
+.editorParamsToolbarContainer>.editorParamsSetter {
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 10px;
 }
 
-.editorParamsToolbarContainer .editorParamsLabel{
-  padding-inline-end:10px;
-  flex:none;
-  font:menu;
-  font-size:13px;
-  font-style:normal;
-  font-weight:400;
-  line-height:150%;
-  color:var(--main-color);
+.editorParamsToolbarContainer .editorParamsLabel {
+  padding-inline-end: 10px;
+  flex: none;
+  font: menu;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  color: var(--main-color);
 }
 
-.editorParamsToolbarContainer .editorParamsColor{
-  width:32px;
-  height:32px;
-  flex:none;
+.editorParamsToolbarContainer .editorParamsColor {
+  width: 32px;
+  height: 32px;
+  flex: none;
 }
 
-.editorParamsToolbarContainer .editorParamsSlider{
-  background-color:transparent;
-  width:90px;
-  flex:0 1 0;
+.editorParamsToolbarContainer .editorParamsSlider {
+  background-color: transparent;
+  width: 90px;
+  flex: 0 1 0;
 }
 
-.editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress{
-  background-color:black;
+.editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress {
+  background-color: black;
 }
 
 .editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-runnable-track,
-.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track{
-  background-color:black;
+.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track {
+  background-color: black;
 }
 
 .editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-thumb,
-.editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb{
-  background-color:white;
+.editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb {
+  background-color: white;
 }
 
-#secondaryToolbarButtonContainer{
-  max-width:220px;
-  min-height:26px;
-  max-height:calc(var(--viewer-container-height) - 40px);
-  overflow-y:auto;
-  margin-bottom:-4px;
+#secondaryToolbarButtonContainer {
+  max-width: 220px;
+  min-height: 26px;
+  max-height: calc(var(--viewer-container-height) - 40px);
+  overflow-y: auto;
+  margin-bottom: -4px;
 }
 
-#editorStampParamsToolbar{
-  inset-inline-end:calc(var(--editor-toolbar-base-offset) + 0px);
+#editorStampParamsToolbar {
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px);
 }
 
-#editorInkParamsToolbar{
-  inset-inline-end:calc(var(--editor-toolbar-base-offset) + 28px);
+#editorInkParamsToolbar {
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 28px);
 }
 
-#editorFreeTextParamsToolbar{
-  inset-inline-end:calc(var(--editor-toolbar-base-offset) + 56px);
+#editorFreeTextParamsToolbar {
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 56px);
 }
 
-#editorHighlightParamsToolbar{
-  inset-inline-end:calc(var(--editor-toolbar-base-offset) + 84px);
+#editorHighlightParamsToolbar {
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 84px);
 }
 
-#editorStampAddImage::before{
-  -webkit-mask-image:var(--editorParams-stampAddImage-icon);
-          mask-image:var(--editorParams-stampAddImage-icon);
+#editorStampAddImage::before {
+  -webkit-mask-image: var(--editorParams-stampAddImage-icon);
+  mask-image: var(--editorParams-stampAddImage-icon);
 }
 
 .doorHanger,
-.doorHangerRight{
-  border-radius:2px;
-  box-shadow:0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
-  border:var(--doorhanger-border-color-whcm);
+.doorHangerRight {
+  border-radius: 2px;
+  box-shadow: 0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
+  border: var(--doorhanger-border-color-whcm);
 }
+
 :is(.doorHanger, .doorHangerRight)::after,
-:is(.doorHanger, .doorHangerRight)::before{
-  bottom:100%;
-  border:8px solid rgb(0 0 0 / 0);
-  content:" ";
-  height:0;
-  width:0;
-  position:absolute;
-  pointer-events:none;
-  opacity:var(--doorhanger-triangle-opacity-whcm);
-}
-.doorHanger::after{
-  inset-inline-start:10px;
-  margin-inline-start:-8px;
-  border-bottom-color:var(--toolbar-bg-color);
-}
-.doorHangerRight::after{
-  inset-inline-end:10px;
-  margin-inline-end:-8px;
-  border-bottom-color:var(--doorhanger-bg-color);
-}
-:is(.doorHanger, .doorHangerRight)::before{
-  border-bottom-color:var(--doorhanger-border-color);
-  border-width:9px;
-}
-.doorHanger::before{
-  inset-inline-start:10px;
-  margin-inline-start:-9px;
-}
-.doorHangerRight::before{
-  inset-inline-end:10px;
-  margin-inline-end:-9px;
+:is(.doorHanger, .doorHangerRight)::before {
+  bottom: 100%;
+  border: 8px solid rgb(0 0 0 / 0);
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  opacity: var(--doorhanger-triangle-opacity-whcm);
 }
 
-#findResultsCount{
-  background-color:rgb(217 217 217);
-  color:rgb(82 82 82);
-  text-align:center;
-  padding:4px 5px;
-  margin:5px;
+.doorHanger::after {
+  inset-inline-start: 10px;
+  margin-inline-start: -8px;
+  border-bottom-color: var(--toolbar-bg-color);
 }
 
-#findMsg[data-status="notFound"]{
-  font-weight:bold;
+.doorHangerRight::after {
+  inset-inline-end: 10px;
+  margin-inline-end: -8px;
+  border-bottom-color: var(--doorhanger-bg-color);
 }
 
-:is(#findResultsCount, #findMsg):empty{
-  display:none;
+:is(.doorHanger, .doorHangerRight)::before {
+  border-bottom-color: var(--doorhanger-border-color);
+  border-width: 9px;
 }
 
-#toolbarViewerMiddle{
-  position:absolute;
-  left:50%;
-  transform:translateX(-50%);
+.doorHanger::before {
+  inset-inline-start: 10px;
+  margin-inline-start: -9px;
+}
+
+.doorHangerRight::before {
+  inset-inline-end: 10px;
+  margin-inline-end: -9px;
+}
+
+#findResultsCount {
+  background-color: rgb(217 217 217);
+  color: rgb(82 82 82);
+  text-align: center;
+  padding: 4px 5px;
+  margin: 5px;
+}
+
+#findMsg[data-status="notFound"] {
+  font-weight: bold;
+}
+
+:is(#findResultsCount, #findMsg):empty {
+  display: none;
+}
+
+#toolbarViewerMiddle {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 #toolbarViewerLeft,
-#toolbarSidebarLeft{
-  float:var(--inline-start);
-}
-#toolbarViewerRight,
-#toolbarSidebarRight{
-  float:var(--inline-end);
+#toolbarSidebarLeft {
+  float: var(--inline-start);
 }
 
-#toolbarViewerLeft > *,
-#toolbarViewerMiddle > *,
-#toolbarViewerRight > *,
+#toolbarViewerRight,
+#toolbarSidebarRight {
+  float: var(--inline-end);
+}
+
+#toolbarViewerLeft>*,
+#toolbarViewerMiddle>*,
+#toolbarViewerRight>*,
 #toolbarSidebarLeft *,
 #toolbarSidebarRight *,
-.findbar *{
-  position:relative;
-  float:var(--inline-start);
+.findbar * {
+  position: relative;
+  float: var(--inline-start);
 }
 
-#toolbarViewerLeft{
-  padding-inline-start:1px;
-}
-#toolbarViewerRight{
-  padding-inline-end:1px;
-}
-#toolbarSidebarRight{
-  padding-inline-end:2px;
+#toolbarViewerLeft {
+  padding-inline-start: 1px;
 }
 
-.splitToolbarButton{
-  margin:2px;
-  display:inline-block;
+#toolbarViewerRight {
+  padding-inline-end: 1px;
 }
-.splitToolbarButton > .toolbarButton{
-  float:var(--inline-start);
+
+#toolbarSidebarRight {
+  padding-inline-end: 2px;
+}
+
+.splitToolbarButton {
+  margin: 2px;
+  display: inline-block;
+}
+
+.splitToolbarButton>.toolbarButton {
+  float: var(--inline-start);
 }
 
 .toolbarButton,
 .secondaryToolbarButton,
-.dialogButton{
-  border:none;
-  background:none;
-  width:28px;
-  height:28px;
-  outline:none;
+.dialogButton {
+  border: none;
+  background: none;
+  width: 28px;
+  height: 28px;
+  outline: none;
 }
 
-.dialogButton:is(:hover, :focus-visible){
-  background-color:var(--dialog-button-hover-bg-color);
+.dialogButton:is(:hover, :focus-visible) {
+  background-color: var(--dialog-button-hover-bg-color);
 }
 
-.dialogButton:is(:hover, :focus-visible) > span{
-  color:var(--dialog-button-hover-color);
+.dialogButton:is(:hover, :focus-visible)>span {
+  color: var(--dialog-button-hover-color);
 }
 
-.toolbarButton > span{
-  display:inline-block;
-  width:0;
-  height:0;
-  overflow:hidden;
+.toolbarButton>span {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 }
 
-:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled]{
-  opacity:0.5;
+:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] {
+  opacity: 0.5;
 }
 
-.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
-.dropdownToolbarButton:hover{
-  background-color:var(--button-hover-color);
-}
-.splitToolbarButton > .toolbarButton{
-  position:relative;
-  margin:0;
-}
-#toolbarSidebar .splitToolbarButton > .toolbarButton{
-  margin-inline-end:2px;
+.splitToolbarButton>.toolbarButton:is(:hover, :focus-visible),
+.dropdownToolbarButton:hover {
+  background-color: var(--button-hover-color);
 }
 
-.splitToolbarButtonSeparator{
-  float:var(--inline-start);
-  margin:4px 0;
-  width:1px;
-  height:20px;
-  background-color:var(--separator-color);
+.splitToolbarButton>.toolbarButton {
+  position: relative;
+  margin: 0;
+}
+
+#toolbarSidebar .splitToolbarButton>.toolbarButton {
+  margin-inline-end: 2px;
+}
+
+.splitToolbarButtonSeparator {
+  float: var(--inline-start);
+  margin: 4px 0;
+  width: 1px;
+  height: 20px;
+  background-color: var(--separator-color);
 }
 
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
-.dialogButton{
-  min-width:16px;
-  margin:2px 1px;
-  padding:2px 6px 0;
-  border:none;
-  border-radius:2px;
-  color:var(--main-color);
-  font-size:12px;
-  line-height:14px;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-  cursor:default;
-  box-sizing:border-box;
+.dialogButton {
+  min-width: 16px;
+  margin: 2px 1px;
+  padding: 2px 6px 0;
+  border: none;
+  border-radius: 2px;
+  color: var(--main-color);
+  font-size: 12px;
+  line-height: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: default;
+  box-sizing: border-box;
 }
 
-.toolbarButton:is(:hover, :focus-visible){
-  background-color:var(--button-hover-color);
+.toolbarButton:is(:hover, :focus-visible) {
+  background-color: var(--button-hover-color);
 }
-.secondaryToolbarButton:is(:hover, :focus-visible){
-  background-color:var(--doorhanger-hover-bg-color);
-  color:var(--doorhanger-hover-color);
+
+.secondaryToolbarButton:is(:hover, :focus-visible) {
+  background-color: var(--doorhanger-hover-bg-color);
+  color: var(--doorhanger-hover-color);
 }
 
 :is(.toolbarButton, .secondaryToolbarButton).toggled,
-.splitToolbarButton.toggled > .toolbarButton.toggled{
-  background-color:var(--toggled-btn-bg-color);
-  color:var(--toggled-btn-color);
+.splitToolbarButton.toggled>.toolbarButton.toggled {
+  background-color: var(--toggled-btn-bg-color);
+  color: var(--toggled-btn-color);
 }
 
 :is(.toolbarButton, .secondaryToolbarButton).toggled:hover,
-.splitToolbarButton.toggled > .toolbarButton.toggled:hover{
-  outline:var(--toggled-hover-btn-outline) !important;
+.splitToolbarButton.toggled>.toolbarButton.toggled:hover {
+  outline: var(--toggled-hover-btn-outline) !important;
 }
 
-:is(.toolbarButton, .secondaryToolbarButton).toggled::before{
-  background-color:var(--toggled-btn-color);
+:is(.toolbarButton, .secondaryToolbarButton).toggled::before {
+  background-color: var(--toggled-btn-color);
 }
 
 :is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active,
-.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active{
-  background-color:var(--toggled-hover-active-btn-color);
+.splitToolbarButton.toggled>.toolbarButton.toggled:hover:active {
+  background-color: var(--toggled-hover-active-btn-color);
 }
 
-.dropdownToolbarButton{
-  display:flex;
-  width:-moz-fit-content;
-  width:fit-content;
-  min-width:140px;
-  padding:0;
-  background-color:var(--dropdown-btn-bg-color);
-  border:var(--dropdown-btn-border);
-}
-.dropdownToolbarButton::after{
-  top:6px;
-  inset-inline-end:6px;
-  pointer-events:none;
-  -webkit-mask-image:var(--toolbarButton-menuArrow-icon);
-          mask-image:var(--toolbarButton-menuArrow-icon);
+.dropdownToolbarButton {
+  display: flex;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 140px;
+  padding: 0;
+  background-color: var(--dropdown-btn-bg-color);
+  border: var(--dropdown-btn-border);
 }
 
-.dropdownToolbarButton > select{
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  width:inherit;
-  min-width:inherit;
-  height:28px;
-  font-size:12px;
-  color:var(--main-color);
-  margin:0;
-  padding-block:1px 2px;
-  padding-inline:6px 38px;
-  border:none;
-  background-color:var(--dropdown-btn-bg-color);
-}
-.dropdownToolbarButton > select:is(:hover, :focus-visible){
-  background-color:var(--button-hover-color);
-  color:var(--toggled-btn-color);
-}
-.dropdownToolbarButton > select > option{
-  background:var(--doorhanger-bg-color);
-  color:var(--main-color);
+.dropdownToolbarButton::after {
+  top: 6px;
+  inset-inline-end: 6px;
+  pointer-events: none;
+  -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
+  mask-image: var(--toolbarButton-menuArrow-icon);
 }
 
-.toolbarButtonSpacer{
-  width:30px;
-  display:inline-block;
-  height:1px;
+.dropdownToolbarButton>select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: inherit;
+  min-width: inherit;
+  height: 28px;
+  font-size: 12px;
+  color: var(--main-color);
+  margin: 0;
+  padding-block: 1px 2px;
+  padding-inline: 6px 38px;
+  border: none;
+  background-color: var(--dropdown-btn-bg-color);
+}
+
+.dropdownToolbarButton>select:is(:hover, :focus-visible) {
+  background-color: var(--button-hover-color);
+  color: var(--toggled-btn-color);
+}
+
+.dropdownToolbarButton>select>option {
+  background: var(--doorhanger-bg-color);
+  color: var(--main-color);
+}
+
+.toolbarButtonSpacer {
+  width: 30px;
+  display: inline-block;
+  height: 1px;
 }
 
 :is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before,
-.dropdownToolbarButton::after{
-  position:absolute;
-  display:inline-block;
-  width:16px;
-  height:16px;
+.dropdownToolbarButton::after {
+  position: absolute;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
 
-  content:"";
-  background-color:var(--toolbar-icon-bg-color);
-  -webkit-mask-size:cover;
-          mask-size:cover;
+  content: "";
+  background-color: var(--toolbar-icon-bg-color);
+  -webkit-mask-size: cover;
+  mask-size: cover;
 }
 
-.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after{
-  background-color:var(--toolbar-icon-hover-bg-color);
+.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after {
+  background-color: var(--toolbar-icon-hover-bg-color);
 }
 
-.toolbarButton::before{
-  opacity:var(--toolbar-icon-opacity);
-  top:6px;
-  left:6px;
+.toolbarButton::before {
+  opacity: var(--toolbar-icon-opacity);
+  top: 6px;
+  left: 6px;
 }
 
 .toolbarButton:is(:hover, :focus-visible)::before,
-.secondaryToolbarButton:is(:hover, :focus-visible)::before{
-  background-color:var(--toolbar-icon-hover-bg-color);
+.secondaryToolbarButton:is(:hover, :focus-visible)::before {
+  background-color: var(--toolbar-icon-hover-bg-color);
 }
 
-.secondaryToolbarButton::before{
-  opacity:var(--doorhanger-icon-opacity);
-  top:5px;
-  inset-inline-start:12px;
+.secondaryToolbarButton::before {
+  opacity: var(--doorhanger-icon-opacity);
+  top: 5px;
+  inset-inline-start: 12px;
 }
 
-#sidebarToggle::before{
-  -webkit-mask-image:var(--toolbarButton-sidebarToggle-icon);
-          mask-image:var(--toolbarButton-sidebarToggle-icon);
-  transform:scaleX(var(--dir-factor));
+#sidebarToggle::before {
+  -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
+  mask-image: var(--toolbarButton-sidebarToggle-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-#secondaryToolbarToggle::before{
-  -webkit-mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
-          mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
-  transform:scaleX(var(--dir-factor));
+#secondaryToolbarToggle::before {
+  -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
+  mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
 #backToHome::before {
@@ -3678,677 +3574,708 @@ body{
   transform: scaleX(var(--dir-factor));
 }
 
-#findPrevious::before{
-  -webkit-mask-image:var(--findbarButton-previous-icon);
-          mask-image:var(--findbarButton-previous-icon);
+#findPrevious::before {
+  -webkit-mask-image: var(--findbarButton-previous-icon);
+  mask-image: var(--findbarButton-previous-icon);
 }
 
-#findNext::before{
-  -webkit-mask-image:var(--findbarButton-next-icon);
-          mask-image:var(--findbarButton-next-icon);
+#findNext::before {
+  -webkit-mask-image: var(--findbarButton-next-icon);
+  mask-image: var(--findbarButton-next-icon);
 }
 
-#previous::before{
-  -webkit-mask-image:var(--toolbarButton-pageUp-icon);
-          mask-image:var(--toolbarButton-pageUp-icon);
+#previous::before {
+  -webkit-mask-image: var(--toolbarButton-pageUp-icon);
+  mask-image: var(--toolbarButton-pageUp-icon);
 }
 
-#next::before{
-  -webkit-mask-image:var(--toolbarButton-pageDown-icon);
-          mask-image:var(--toolbarButton-pageDown-icon);
+#next::before {
+  -webkit-mask-image: var(--toolbarButton-pageDown-icon);
+  mask-image: var(--toolbarButton-pageDown-icon);
 }
 
-#zoomOut::before{
-  -webkit-mask-image:var(--toolbarButton-zoomOut-icon);
-          mask-image:var(--toolbarButton-zoomOut-icon);
+#zoomOut::before {
+  -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
+  mask-image: var(--toolbarButton-zoomOut-icon);
 }
 
-#zoomIn::before{
-  -webkit-mask-image:var(--toolbarButton-zoomIn-icon);
-          mask-image:var(--toolbarButton-zoomIn-icon);
+#zoomIn::before {
+  -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
+  mask-image: var(--toolbarButton-zoomIn-icon);
 }
 
-#presentationMode::before{
-  -webkit-mask-image:var(--toolbarButton-presentationMode-icon);
-          mask-image:var(--toolbarButton-presentationMode-icon);
+#presentationMode::before {
+  -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
+  mask-image: var(--toolbarButton-presentationMode-icon);
 }
 
-#editorFreeText::before{
-  -webkit-mask-image:var(--toolbarButton-editorFreeText-icon);
-          mask-image:var(--toolbarButton-editorFreeText-icon);
+#editorFreeText::before {
+  -webkit-mask-image: var(--toolbarButton-editorFreeText-icon);
+  mask-image: var(--toolbarButton-editorFreeText-icon);
 }
 
-#editorHighlight::before{
-  -webkit-mask-image:var(--toolbarButton-editorHighlight-icon);
-          mask-image:var(--toolbarButton-editorHighlight-icon);
+#editorHighlight::before {
+  -webkit-mask-image: var(--toolbarButton-editorHighlight-icon);
+  mask-image: var(--toolbarButton-editorHighlight-icon);
 }
 
-#editorInk::before{
-  -webkit-mask-image:var(--toolbarButton-editorInk-icon);
-          mask-image:var(--toolbarButton-editorInk-icon);
+#editorInk::before {
+  -webkit-mask-image: var(--toolbarButton-editorInk-icon);
+  mask-image: var(--toolbarButton-editorInk-icon);
 }
 
-#editorStamp::before{
-  -webkit-mask-image:var(--toolbarButton-editorStamp-icon);
-          mask-image:var(--toolbarButton-editorStamp-icon);
+#editorStamp::before {
+  -webkit-mask-image: var(--toolbarButton-editorStamp-icon);
+  mask-image: var(--toolbarButton-editorStamp-icon);
 }
 
-:is(#print, #secondaryPrint)::before{
-  -webkit-mask-image:var(--toolbarButton-print-icon);
-          mask-image:var(--toolbarButton-print-icon);
+:is(#print, #secondaryPrint)::before {
+  -webkit-mask-image: var(--toolbarButton-print-icon);
+  mask-image: var(--toolbarButton-print-icon);
 }
 
-#secondaryOpenFile::before, #openFile::before{
-  -webkit-mask-image:var(--toolbarButton-openFile-icon);
-          mask-image:var(--toolbarButton-openFile-icon);
+#secondaryOpenFile::before,
+#openFile::before {
+  -webkit-mask-image: var(--toolbarButton-openFile-icon);
+  mask-image: var(--toolbarButton-openFile-icon);
 }
 
-:is(#download, #secondaryDownload)::before{
-  -webkit-mask-image:var(--toolbarButton-download-icon);
-          mask-image:var(--toolbarButton-download-icon);
+:is(#download, #secondaryDownload)::before {
+  -webkit-mask-image: var(--toolbarButton-download-icon);
+  mask-image: var(--toolbarButton-download-icon);
 }
 
-a.secondaryToolbarButton{
-  padding-top:5px;
-  text-decoration:none;
-}
-a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
-  opacity:0.5;
-  pointer-events:none;
+a.secondaryToolbarButton {
+  padding-top: 5px;
+  text-decoration: none;
 }
 
-#viewBookmark::before{
-  -webkit-mask-image:var(--toolbarButton-bookmark-icon);
-          mask-image:var(--toolbarButton-bookmark-icon);
+a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-#viewThumbnail::before{
-  -webkit-mask-image:var(--toolbarButton-viewThumbnail-icon);
-          mask-image:var(--toolbarButton-viewThumbnail-icon);
+#viewBookmark::before {
+  -webkit-mask-image: var(--toolbarButton-bookmark-icon);
+  mask-image: var(--toolbarButton-bookmark-icon);
 }
 
-#viewOutline::before{
-  -webkit-mask-image:var(--toolbarButton-viewOutline-icon);
-          mask-image:var(--toolbarButton-viewOutline-icon);
-  transform:scaleX(var(--dir-factor));
+#viewThumbnail::before {
+  -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
+  mask-image: var(--toolbarButton-viewThumbnail-icon);
 }
 
-#viewAttachments::before{
-  -webkit-mask-image:var(--toolbarButton-viewAttachments-icon);
-          mask-image:var(--toolbarButton-viewAttachments-icon);
+#viewOutline::before {
+  -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
+  mask-image: var(--toolbarButton-viewOutline-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-#viewLayers::before{
-  -webkit-mask-image:var(--toolbarButton-viewLayers-icon);
-          mask-image:var(--toolbarButton-viewLayers-icon);
+#viewAttachments::before {
+  -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
+  mask-image: var(--toolbarButton-viewAttachments-icon);
 }
 
-#currentOutlineItem::before{
-  -webkit-mask-image:var(--toolbarButton-currentOutlineItem-icon);
-          mask-image:var(--toolbarButton-currentOutlineItem-icon);
-  transform:scaleX(var(--dir-factor));
+#viewLayers::before {
+  -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
+  mask-image: var(--toolbarButton-viewLayers-icon);
 }
 
-#viewFind::before{
-  -webkit-mask-image:var(--toolbarButton-search-icon);
-          mask-image:var(--toolbarButton-search-icon);
+#currentOutlineItem::before {
+  -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
+  mask-image: var(--toolbarButton-currentOutlineItem-icon);
+  transform: scaleX(var(--dir-factor));
 }
 
-.pdfSidebarNotification::after{
-  position:absolute;
-  display:inline-block;
-  top:2px;
-  inset-inline-end:2px;
-  content:"";
-  background-color:rgb(112 219 85);
-  height:9px;
-  width:9px;
-  border-radius:50%;
+#viewFind::before {
+  -webkit-mask-image: var(--toolbarButton-search-icon);
+  mask-image: var(--toolbarButton-search-icon);
 }
 
-.secondaryToolbarButton{
-  position:relative;
-  margin:0;
-  padding:0 0 1px;
-  padding-inline-start:36px;
-  height:auto;
-  min-height:26px;
-  width:auto;
-  min-width:100%;
-  text-align:start;
-  white-space:normal;
-  border-radius:0;
-  box-sizing:border-box;
-  display:inline-block;
-}
-.secondaryToolbarButton > span{
-  padding-inline-end:4px;
+.pdfSidebarNotification::after {
+  position: absolute;
+  display: inline-block;
+  top: 2px;
+  inset-inline-end: 2px;
+  content: "";
+  background-color: rgb(112 219 85);
+  height: 9px;
+  width: 9px;
+  border-radius: 50%;
 }
 
-#firstPage::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-firstPage-icon);
-          mask-image:var(--secondaryToolbarButton-firstPage-icon);
+.secondaryToolbarButton {
+  position: relative;
+  margin: 0;
+  padding: 0 0 1px;
+  padding-inline-start: 36px;
+  height: auto;
+  min-height: 26px;
+  width: auto;
+  min-width: 100%;
+  text-align: start;
+  white-space: normal;
+  border-radius: 0;
+  box-sizing: border-box;
+  display: inline-block;
 }
 
-#lastPage::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-lastPage-icon);
-          mask-image:var(--secondaryToolbarButton-lastPage-icon);
+.secondaryToolbarButton>span {
+  padding-inline-end: 4px;
 }
 
-#pageRotateCcw::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
-          mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
+#firstPage::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
+  mask-image: var(--secondaryToolbarButton-firstPage-icon);
 }
 
-#pageRotateCw::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-rotateCw-icon);
-          mask-image:var(--secondaryToolbarButton-rotateCw-icon);
+#lastPage::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
+  mask-image: var(--secondaryToolbarButton-lastPage-icon);
 }
 
-#cursorSelectTool::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-selectTool-icon);
-          mask-image:var(--secondaryToolbarButton-selectTool-icon);
+#pageRotateCcw::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
+  mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
 }
 
-#cursorHandTool::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-handTool-icon);
-          mask-image:var(--secondaryToolbarButton-handTool-icon);
+#pageRotateCw::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
+  mask-image: var(--secondaryToolbarButton-rotateCw-icon);
 }
 
-#scrollPage::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-scrollPage-icon);
-          mask-image:var(--secondaryToolbarButton-scrollPage-icon);
+#cursorSelectTool::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
+  mask-image: var(--secondaryToolbarButton-selectTool-icon);
 }
 
-#scrollVertical::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
-          mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
+#cursorHandTool::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
+  mask-image: var(--secondaryToolbarButton-handTool-icon);
 }
 
-#scrollHorizontal::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
-          mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
+#scrollPage::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon);
+  mask-image: var(--secondaryToolbarButton-scrollPage-icon);
 }
 
-#scrollWrapped::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
-          mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
+#scrollVertical::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
+  mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
 }
 
-#spreadNone::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon);
-          mask-image:var(--secondaryToolbarButton-spreadNone-icon);
+#scrollHorizontal::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
+  mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
 }
 
-#spreadOdd::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
-          mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
+#scrollWrapped::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
+  mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
 }
 
-#spreadEven::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-spreadEven-icon);
-          mask-image:var(--secondaryToolbarButton-spreadEven-icon);
+#spreadNone::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
+  mask-image: var(--secondaryToolbarButton-spreadNone-icon);
 }
 
-#documentProperties::before{
-  -webkit-mask-image:var(--secondaryToolbarButton-documentProperties-icon);
-          mask-image:var(--secondaryToolbarButton-documentProperties-icon);
+#spreadOdd::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
+  mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
 }
 
-.verticalToolbarSeparator{
-  display:block;
-  margin:5px 2px;
-  width:1px;
-  height:22px;
-  background-color:var(--separator-color);
-}
-.horizontalToolbarSeparator{
-  display:block;
-  margin:6px 0;
-  height:1px;
-  width:100%;
-  background-color:var(--doorhanger-separator-color);
+#spreadEven::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
+  mask-image: var(--secondaryToolbarButton-spreadEven-icon);
 }
 
-.toolbarField{
-  padding:4px 7px;
-  margin:3px 0;
-  border-radius:2px;
-  background-color:var(--field-bg-color);
-  background-clip:padding-box;
-  border:1px solid var(--field-border-color);
-  box-shadow:none;
-  color:var(--field-color);
-  font-size:12px;
-  line-height:16px;
-  outline:none;
+#documentProperties::before {
+  -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
+  mask-image: var(--secondaryToolbarButton-documentProperties-icon);
 }
 
-.toolbarField[type="checkbox"]{
-  opacity:0;
-  position:absolute !important;
-  left:0;
-  margin:10px 0 3px;
-  margin-inline-start:7px;
+.verticalToolbarSeparator {
+  display: block;
+  margin: 5px 2px;
+  width: 1px;
+  height: 22px;
+  background-color: var(--separator-color);
 }
 
-#pageNumber{
-  -moz-appearance:textfield;
-  text-align:end;
-  width:40px;
-  background-size:0 0;
-  transition-property:none;
+.horizontalToolbarSeparator {
+  display: block;
+  margin: 6px 0;
+  height: 1px;
+  width: 100%;
+  background-color: var(--doorhanger-separator-color);
 }
 
-#pageNumber::-webkit-inner-spin-button{
-    -webkit-appearance:none;
-  }
-
-.loadingInput:has(> #pageNumber.loading)::after{
-    display:block;
-    visibility:visible;
-
-    transition-property:visibility;
-    transition-delay:var(--loading-icon-delay);
-  }
-
-.loadingInput::after{
-    position:absolute;
-    visibility:hidden;
-    display:none;
-    top:calc(50% - 8px);
-    width:16px;
-    height:16px;
-
-    content:"";
-    background-color:var(--toolbar-icon-bg-color);
-    -webkit-mask-size:cover;
-            mask-size:cover;
-    -webkit-mask-image:var(--loading-icon);
-            mask-image:var(--loading-icon);
-  }
-
-.loadingInput.start::after{
-    inset-inline-start:4px;
-  }
-
-.loadingInput.end::after{
-    inset-inline-end:4px;
-  }
-
-.toolbarField:focus{
-  border-color:#0a84ff;
+.toolbarField {
+  padding: 4px 7px;
+  margin: 3px 0;
+  border-radius: 2px;
+  background-color: var(--field-bg-color);
+  background-clip: padding-box;
+  border: 1px solid var(--field-border-color);
+  box-shadow: none;
+  color: var(--field-color);
+  font-size: 12px;
+  line-height: 16px;
+  outline: none;
 }
 
-.toolbarLabel{
-  min-width:16px;
-  padding:7px;
-  margin:2px;
-  border-radius:2px;
-  color:var(--main-color);
-  font-size:12px;
-  line-height:14px;
-  text-align:left;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-  cursor:default;
+.toolbarField[type="checkbox"] {
+  opacity: 0;
+  position: absolute !important;
+  left: 0;
+  margin: 10px 0 3px;
+  margin-inline-start: 7px;
 }
 
-#numPages.toolbarLabel{
-  padding-inline-start:3px;
+#pageNumber {
+  -moz-appearance: textfield;
+  text-align: end;
+  width: 40px;
+  background-size: 0 0;
+  transition-property: none;
+}
+
+#pageNumber::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.loadingInput:has(> #pageNumber.loading)::after {
+  display: block;
+  visibility: visible;
+
+  transition-property: visibility;
+  transition-delay: var(--loading-icon-delay);
+}
+
+.loadingInput::after {
+  position: absolute;
+  visibility: hidden;
+  display: none;
+  top: calc(50% - 8px);
+  width: 16px;
+  height: 16px;
+
+  content: "";
+  background-color: var(--toolbar-icon-bg-color);
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  -webkit-mask-image: var(--loading-icon);
+  mask-image: var(--loading-icon);
+}
+
+.loadingInput.start::after {
+  inset-inline-start: 4px;
+}
+
+.loadingInput.end::after {
+  inset-inline-end: 4px;
+}
+
+.toolbarField:focus {
+  border-color: #0a84ff;
+}
+
+.toolbarLabel {
+  min-width: 16px;
+  padding: 7px;
+  margin: 2px;
+  border-radius: 2px;
+  color: var(--main-color);
+  font-size: 12px;
+  line-height: 14px;
+  text-align: left;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+#numPages.toolbarLabel {
+  padding-inline-start: 3px;
 }
 
 #thumbnailView,
 #outlineView,
 #attachmentsView,
-#layersView{
-  position:absolute;
-  width:calc(100% - 8px);
-  inset-block:0;
-  padding:4px 4px 0;
-  overflow:auto;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-}
-#thumbnailView{
-  width:calc(100% - 60px);
-  padding:10px 30px 0;
+#layersView {
+  position: absolute;
+  width: calc(100% - 8px);
+  inset-block: 0;
+  padding: 4px 4px 0;
+  overflow: auto;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
-#thumbnailView > a:is(:active, :focus){
-  outline:0;
+#thumbnailView {
+  width: calc(100% - 60px);
+  padding: 10px 30px 0;
 }
 
-.thumbnail{
-  --thumbnail-width:0;
-  --thumbnail-height:0;
-
-  float:var(--inline-start);
-  width:var(--thumbnail-width);
-  height:var(--thumbnail-height);
-  margin:0 10px 5px;
-  padding:1px;
-  border:7px solid transparent;
-  border-radius:2px;
+#thumbnailView>a:is(:active, :focus) {
+  outline: 0;
 }
 
-#thumbnailView > a:last-of-type > .thumbnail{
-  margin-bottom:10px;
+.thumbnail {
+  --thumbnail-width: 0;
+  --thumbnail-height: 0;
+
+  float: var(--inline-start);
+  width: var(--thumbnail-width);
+  height: var(--thumbnail-height);
+  margin: 0 10px 5px;
+  padding: 1px;
+  border: 7px solid transparent;
+  border-radius: 2px;
 }
 
-a:focus > .thumbnail,
-.thumbnail:hover{
-  border-color:var(--thumbnail-hover-color);
-}
-.thumbnail.selected{
-  border-color:var(--thumbnail-selected-color) !important;
+#thumbnailView>a:last-of-type>.thumbnail {
+  margin-bottom: 10px;
 }
 
-.thumbnailImage{
-  width:var(--thumbnail-width);
-  height:var(--thumbnail-height);
-  opacity:0.9;
-}
-a:focus > .thumbnail > .thumbnailImage,
-.thumbnail:hover > .thumbnailImage{
-  opacity:0.95;
-}
-.thumbnail.selected > .thumbnailImage{
-  opacity:1 !important;
+a:focus>.thumbnail,
+.thumbnail:hover {
+  border-color: var(--thumbnail-hover-color);
 }
 
-.thumbnail:not([data-loaded]) > .thumbnailImage{
-  width:calc(var(--thumbnail-width) - 2px);
-  height:calc(var(--thumbnail-height) - 2px);
-  border:1px dashed rgb(132 132 132);
+.thumbnail.selected {
+  border-color: var(--thumbnail-selected-color) !important;
 }
 
-.treeWithDeepNesting > .treeItem,
-.treeItem > .treeItems{
-  margin-inline-start:20px;
+.thumbnailImage {
+  width: var(--thumbnail-width);
+  height: var(--thumbnail-height);
+  opacity: 0.9;
 }
 
-.treeItem > a{
-  text-decoration:none;
-  display:inline-block;
-  min-width:calc(100% - 4px);
-  height:auto;
-  margin-bottom:1px;
-  padding:2px 0 5px;
-  padding-inline-start:4px;
-  border-radius:2px;
-  color:var(--treeitem-color);
-  font-size:13px;
-  line-height:15px;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-  white-space:normal;
-  cursor:pointer;
+a:focus>.thumbnail>.thumbnailImage,
+.thumbnail:hover>.thumbnailImage {
+  opacity: 0.95;
 }
 
-#layersView .treeItem > a *{
-  cursor:pointer;
-}
-#layersView .treeItem > a > label{
-  padding-inline-start:4px;
-}
-#layersView .treeItem > a > label > input{
-  float:var(--inline-start);
-  margin-top:1px;
+.thumbnail.selected>.thumbnailImage {
+  opacity: 1 !important;
 }
 
-.treeItemToggler{
-  position:relative;
-  float:var(--inline-start);
-  height:0;
-  width:0;
-  color:rgb(255 255 255 / 0.5);
-}
-.treeItemToggler::before{
-  inset-inline-end:4px;
-  -webkit-mask-image:var(--treeitem-expanded-icon);
-          mask-image:var(--treeitem-expanded-icon);
-}
-.treeItemToggler.treeItemsHidden::before{
-  -webkit-mask-image:var(--treeitem-collapsed-icon);
-          mask-image:var(--treeitem-collapsed-icon);
-  transform:scaleX(var(--dir-factor));
-}
-.treeItemToggler.treeItemsHidden ~ .treeItems{
-  display:none;
+.thumbnail:not([data-loaded])>.thumbnailImage {
+  width: calc(var(--thumbnail-width) - 2px);
+  height: calc(var(--thumbnail-height) - 2px);
+  border: 1px dashed rgb(132 132 132);
 }
 
-.treeItem.selected > a{
-  background-color:var(--treeitem-selected-bg-color);
-  color:var(--treeitem-selected-color);
+.treeWithDeepNesting>.treeItem,
+.treeItem>.treeItems {
+  margin-inline-start: 20px;
+}
+
+.treeItem>a {
+  text-decoration: none;
+  display: inline-block;
+  min-width: calc(100% - 4px);
+  height: auto;
+  margin-bottom: 1px;
+  padding: 2px 0 5px;
+  padding-inline-start: 4px;
+  border-radius: 2px;
+  color: var(--treeitem-color);
+  font-size: 13px;
+  line-height: 15px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  white-space: normal;
+  cursor: pointer;
+}
+
+#layersView .treeItem>a * {
+  cursor: pointer;
+}
+
+#layersView .treeItem>a>label {
+  padding-inline-start: 4px;
+}
+
+#layersView .treeItem>a>label>input {
+  float: var(--inline-start);
+  margin-top: 1px;
+}
+
+.treeItemToggler {
+  position: relative;
+  float: var(--inline-start);
+  height: 0;
+  width: 0;
+  color: rgb(255 255 255 / 0.5);
+}
+
+.treeItemToggler::before {
+  inset-inline-end: 4px;
+  -webkit-mask-image: var(--treeitem-expanded-icon);
+  mask-image: var(--treeitem-expanded-icon);
+}
+
+.treeItemToggler.treeItemsHidden::before {
+  -webkit-mask-image: var(--treeitem-collapsed-icon);
+  mask-image: var(--treeitem-collapsed-icon);
+  transform: scaleX(var(--dir-factor));
+}
+
+.treeItemToggler.treeItemsHidden~.treeItems {
+  display: none;
+}
+
+.treeItem.selected>a {
+  background-color: var(--treeitem-selected-bg-color);
+  color: var(--treeitem-selected-color);
 }
 
 .treeItemToggler:hover,
-.treeItemToggler:hover + a,
-.treeItemToggler:hover ~ .treeItems,
-.treeItem > a:hover{
-  background-color:var(--treeitem-bg-color);
-  background-clip:padding-box;
-  border-radius:2px;
-  color:var(--treeitem-hover-color);
+.treeItemToggler:hover+a,
+.treeItemToggler:hover~.treeItems,
+.treeItem>a:hover {
+  background-color: var(--treeitem-bg-color);
+  background-clip: padding-box;
+  border-radius: 2px;
+  color: var(--treeitem-hover-color);
 }
 
-#outlineOptionsContainer{
-  display:none;
+#outlineOptionsContainer {
+  display: none;
 }
 
-#sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer{
-    display:inherit;
-  }
-
-.dialogButton{
-  width:auto;
-  margin:3px 4px 2px !important;
-  padding:2px 11px;
-  color:var(--main-color);
-  background-color:var(--dialog-button-bg-color);
-  border:var(--dialog-button-border) !important;
+#sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer {
+  display: inherit;
 }
 
-dialog{
-  margin:auto;
-  padding:15px;
-  border-spacing:4px;
-  color:var(--main-color);
-  font:message-box;
-  font-size:12px;
-  line-height:14px;
-  background-color:var(--doorhanger-bg-color);
-  border:1px solid rgb(0 0 0 / 0.5);
-  border-radius:4px;
-  box-shadow:0 1px 4px rgb(0 0 0 / 0.3);
-}
-dialog::backdrop{
-  background-color:rgb(0 0 0 / 0.2);
+.dialogButton {
+  width: auto;
+  margin: 3px 4px 2px !important;
+  padding: 2px 11px;
+  color: var(--main-color);
+  background-color: var(--dialog-button-bg-color);
+  border: var(--dialog-button-border) !important;
 }
 
-dialog > .row{
-  display:table-row;
+dialog {
+  margin: auto;
+  padding: 15px;
+  border-spacing: 4px;
+  color: var(--main-color);
+  font: message-box;
+  font-size: 12px;
+  line-height: 14px;
+  background-color: var(--doorhanger-bg-color);
+  border: 1px solid rgb(0 0 0 / 0.5);
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
 }
 
-dialog > .row > *{
-  display:table-cell;
+dialog::backdrop {
+  background-color: rgb(0 0 0 / 0.2);
 }
 
-dialog .toolbarField{
-  margin:5px 0;
+dialog>.row {
+  display: table-row;
 }
 
-dialog .separator{
-  display:block;
-  margin:4px 0;
-  height:1px;
-  width:100%;
-  background-color:var(--separator-color);
+dialog>.row>* {
+  display: table-cell;
 }
 
-dialog .buttonRow{
-  text-align:center;
-  vertical-align:middle;
+dialog .toolbarField {
+  margin: 5px 0;
 }
 
-dialog :link{
-  color:rgb(255 255 255);
+dialog .separator {
+  display: block;
+  margin: 4px 0;
+  height: 1px;
+  width: 100%;
+  background-color: var(--separator-color);
 }
 
-#passwordDialog{
-  text-align:center;
-}
-#passwordDialog .toolbarField{
-  width:200px;
+dialog .buttonRow {
+  text-align: center;
+  vertical-align: middle;
 }
 
-#documentPropertiesDialog{
-  text-align:left;
-}
-#documentPropertiesDialog .row > *{
-  min-width:100px;
-  text-align:start;
-}
-#documentPropertiesDialog .row > span{
-  width:125px;
-  word-wrap:break-word;
-}
-#documentPropertiesDialog .row > p{
-  max-width:225px;
-  word-wrap:break-word;
-}
-#documentPropertiesDialog .buttonRow{
-  margin-top:10px;
+dialog :link {
+  color: rgb(255 255 255);
 }
 
-.grab-to-pan-grab{
-  cursor:grab !important;
+#passwordDialog {
+  text-align: center;
 }
-.grab-to-pan-grab
-  *:not(input):not(textarea):not(button):not(select):not(:link){
-  cursor:inherit !important;
+
+#passwordDialog .toolbarField {
+  width: 200px;
 }
+
+#documentPropertiesDialog {
+  text-align: left;
+}
+
+#documentPropertiesDialog .row>* {
+  min-width: 100px;
+  text-align: start;
+}
+
+#documentPropertiesDialog .row>span {
+  width: 125px;
+  word-wrap: break-word;
+}
+
+#documentPropertiesDialog .row>p {
+  max-width: 225px;
+  word-wrap: break-word;
+}
+
+#documentPropertiesDialog .buttonRow {
+  margin-top: 10px;
+}
+
+.grab-to-pan-grab {
+  cursor: grab !important;
+}
+
+.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
+  cursor: inherit !important;
+}
+
 .grab-to-pan-grab:active,
-.grab-to-pan-grabbing{
-  cursor:grabbing !important;
-}
-.grab-to-pan-grabbing{
-  position:fixed;
-  background:rgb(0 0 0 / 0);
-  display:block;
-  inset:0;
-  overflow:hidden;
-  z-index:50000;
+.grab-to-pan-grabbing {
+  cursor: grabbing !important;
 }
 
-@page{
-  margin:0;
+.grab-to-pan-grabbing {
+  position: fixed;
+  background: rgb(0 0 0 / 0);
+  display: block;
+  inset: 0;
+  overflow: hidden;
+  z-index: 50000;
 }
 
-#printContainer{
-  display:none;
+@page {
+  margin: 0;
 }
 
-@media print{
-  body{
-    background:rgb(0 0 0 / 0) none;
-  }
-  body[data-pdfjsprinting] #outerContainer{
-    display:none;
-  }
-  body[data-pdfjsprinting] #printContainer{
-    display:block;
-  }
-  #printContainer{
-    height:100%;
-  }
-  #printContainer > .printedPage{
-    page-break-after:always;
-    page-break-inside:avoid;
-    height:100%;
-    width:100%;
+#printContainer {
+  display: none;
+}
 
-    display:flex;
-    flex-direction:column;
-    justify-content:center;
-    align-items:center;
+@media print {
+  body {
+    background: rgb(0 0 0 / 0) none;
   }
 
-  #printContainer > .xfaPrintedPage .xfaPage{
-    position:absolute;
+  body[data-pdfjsprinting] #outerContainer {
+    display: none;
   }
 
-  #printContainer > .xfaPrintedPage{
-    page-break-after:always;
-    page-break-inside:avoid;
-    width:100%;
-    height:100%;
-    position:relative;
+  body[data-pdfjsprinting] #printContainer {
+    display: block;
   }
 
-  #printContainer > .printedPage :is(canvas, img){
-    max-width:100%;
-    max-height:100%;
+  #printContainer {
+    height: 100%;
+  }
 
-    direction:ltr;
-    display:block;
+  #printContainer>.printedPage {
+    page-break-after: always;
+    page-break-inside: avoid;
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #printContainer>.xfaPrintedPage .xfaPage {
+    position: absolute;
+  }
+
+  #printContainer>.xfaPrintedPage {
+    page-break-after: always;
+    page-break-inside: avoid;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  #printContainer>.printedPage :is(canvas, img) {
+    max-width: 100%;
+    max-height: 100%;
+
+    direction: ltr;
+    display: block;
   }
 }
 
-.visibleMediumView{
-  display:none;
+.visibleMediumView {
+  display: none;
 }
 
-@media all and (max-width: 900px){
-  #toolbarViewerMiddle{
-    display:table;
-    margin:auto;
-    left:auto;
-    position:inherit;
-    transform:none;
+@media all and (max-width: 900px) {
+  #toolbarViewerMiddle {
+    display: table;
+    margin: auto;
+    left: auto;
+    position: inherit;
+    transform: none;
   }
 }
 
-@media all and (max-width: 840px){
-  #sidebarContainer{
-    background-color:var(--sidebar-narrow-bg-color);
+@media all and (max-width: 840px) {
+  #sidebarContainer {
+    background-color: var(--sidebar-narrow-bg-color);
   }
-  #outerContainer.sidebarOpen #viewerContainer{
-    inset-inline-start:0 !important;
+
+  #outerContainer.sidebarOpen #viewerContainer {
+    inset-inline-start: 0 !important;
   }
 }
 
-@media all and (max-width: 750px){
-  :root{
-    --editor-toolbar-base-offset:40px;
+@media all and (max-width: 750px) {
+  :root {
+    --editor-toolbar-base-offset: 40px;
   }
-  #outerContainer .hiddenMediumView{
-    display:none;
+
+  #outerContainer .hiddenMediumView {
+    display: none;
   }
-  #outerContainer .visibleMediumView{
-    display:inherit;
+
+  #outerContainer .visibleMediumView {
+    display: inherit;
   }
 }
 
-@media all and (max-width: 690px){
+@media all and (max-width: 690px) {
+
   .hiddenSmallView,
-  .hiddenSmallView *{
-    display:none;
+  .hiddenSmallView * {
+    display: none;
   }
-  .toolbarButtonSpacer{
-    width:0;
+
+  .toolbarButtonSpacer {
+    width: 0;
   }
-  .findbar{
-    inset-inline-start:34px;
+
+  .findbar {
+    inset-inline-start: 34px;
   }
 }
 
-@media all and (max-width: 560px){
-  #scaleSelectContainer{
-    display:none;
+@media all and (max-width: 560px) {
+  #scaleSelectContainer {
+    display: none;
   }
 }
diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html
index 062abda3a..4fbc8ead5 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -16,12 +16,14 @@
         <div class="row justify-content-center">
           <div class="col-md-6 bg-card">
             <div class="tool-header">
-              <span class="material-symbols-rounded tool-header-icon convert">draft</span>
+              <span class="material-symbols-rounded tool-header-icon convertto">draft</span>
               <span class="tool-header-text" th:text="#{fileToPDF.header}"></span>
             </div>
             <p th:text="#{processTimeWarning}"></p>
             <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/file/pdf'}">
-              <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false)}"></div>
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false)}">
+              </div>
               <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
                 aria-expanded="false" aria-controls="info" th:text="#{fileToPDF.supportedFileTypesInfo}"></a>
               <div class="collapse" id="info">
@@ -42,7 +44,7 @@
                   href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
               </div>
               <div>
-                <br/>
+                <br />
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
               </div>
             </form>
diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html
index 9ed186be5..25f75b0f0 100644
--- a/src/main/resources/templates/convert/html-to-pdf.html
+++ b/src/main/resources/templates/convert/html-to-pdf.html
@@ -1,38 +1,43 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{HTMLToPDF.title}, header=#{HTMLToPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon convert">html</span>
-                <span class="tool-header-text" th:text="#{HTMLToPDF.header}"></span>
-              </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/html/pdf'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='text/html,application/zip' )}"></div>
-                <div class="mb-3">
-                  <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
-                  <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{HTMLToPDF.help}"></p>
-              <p class="mt-3" th:text="#{HTMLToPDF.credit}"></p>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{HTMLToPDF.title}, header=#{HTMLToPDF.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">html</span>
+              <span class="tool-header-text" th:text="#{HTMLToPDF.header}"></span>
             </div>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/html/pdf'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='text/html,application/zip' )}">
+              </div>
+              <div class="mb-3">
+                <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
+                <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{HTMLToPDF.help}"></p>
+            <p class="mt-3" th:text="#{HTMLToPDF.credit}"></p>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index fa0fc74f2..6c37e6473 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -1,60 +1,67 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{imageToPDF.title}, header=#{imageToPDF.header})}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon image">image</span>
-                <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">picture_as_pdf</span>
+              <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
+            </div>
+            <form id="imageToPDFForm" method="post" enctype="multipart/form-data"
+              th:action="@{'/api/v1/convert/img/pdf'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='image/*', inputText=#{imgPrompt})}">
+              </div>
+              <div class="mb-3">
+                <label for="fitOption" th:text="#{imageToPDF.selectLabel}">Fit Options</label>
+                <select class="form-control" id="fitOption" name="fitOption">
+                  <option value="fillPage" th:text="#{imageToPDF.fillPage}">Fill Page</option>
+                  <option value="fitDocumentToImage" th:text="#{imageToPDF.fitDocumentToImage}">Fit Document to Image
+                  </option>
+                  <option value="maintainAspectRatio" th:text="#{imageToPDF.maintainAspectRatio}">Maintain Aspect Ratio
+                  </option>
+                </select>
               </div>
-              <form  id="imageToPDFForm" method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/img/pdf'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='image/*', inputText=#{imgPrompt})}"></div>
-                <div class="mb-3">
-                  <label for="fitOption" th:text="#{imageToPDF.selectLabel}">Fit Options</label>
-                  <select class="form-control" id="fitOption" name="fitOption">
-                    <option value="fillPage" th:text="#{imageToPDF.fillPage}">Fill Page</option>
-                    <option value="fitDocumentToImage" th:text="#{imageToPDF.fitDocumentToImage}">Fit Document to Image</option>
-                    <option value="maintainAspectRatio" th:text="#{imageToPDF.maintainAspectRatio}">Maintain Aspect Ratio</option>
-                  </select>
-                </div>
 
-                <div class="form-check ms-3">
-                  <input type="checkbox" name="autoRotate" id="autoRotate">
-                  <label for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
-                </div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.colorType}"></label>
-                  <select class="form-control" id="colorType" name="colorType">
-                    <option value="color" th:text="#{pdfToImage.color}"></option>
-                    <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
-                    <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
-                  </select>
-                </div>
-                <input type="hidden" id="override" name="override" value="multi">
-                <div class="mb-3">
-                  <label th:text=#{imageToPDF.selectText.3}></label>
-                  <select class="form-control" id="conversionType" name="conversionType" disabled>
-                    <option value="merge" th:text=#{imageToPDF.selectText.4}></option>
-                    <option value="convert" th:text=#{imageToPDF.selectText.5} selected></option>
-                  </select>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
-                <script>
-                  $('#fileInput-input').on('change', function(e) {
-                    const fileInput = e.target;
-                    fileInput.addEventListener('file-input-change', async (e) => {
-                    const {allFiles} = e.detail;
+              <div class="form-check ms-3">
+                <input type="checkbox" name="autoRotate" id="autoRotate">
+                <label for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.colorType}"></label>
+                <select class="form-control" id="colorType" name="colorType">
+                  <option value="color" th:text="#{pdfToImage.color}"></option>
+                  <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
+                  <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
+                </select>
+              </div>
+              <input type="hidden" id="override" name="override" value="multi">
+              <div class="mb-3">
+                <label th:text=#{imageToPDF.selectText.3}></label>
+                <select class="form-control" id="conversionType" name="conversionType" disabled>
+                  <option value="merge" th:text=#{imageToPDF.selectText.4}></option>
+                  <option value="convert" th:text=#{imageToPDF.selectText.5} selected></option>
+                </select>
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
+              <script>
+                $('#fileInput-input').on('change', function (e) {
+                  const fileInput = e.target;
+                  fileInput.addEventListener('file-input-change', async (e) => {
+                    const { allFiles } = e.detail;
                     var conversionType = document.getElementById("conversionType");
                     console.log("files.length=" + allFiles.length)
                     if (allFiles.length > 1) {
@@ -62,58 +69,59 @@
                     } else {
                       conversionType.disabled = true;
                     }
+                  });
+                });
+
+                $('#conversionType').change(function () {
+                  var selectedValue = $(this).val();
+                  var override = document.getElementById("override");
+                  console.log("selectedValue=" + selectedValue)
+                  if (selectedValue === 'merge') {
+                    override.value = "single";
+                  } else if (selectedValue === 'convert') {
+                    override.value = "multi";
+                  }
+                });
+                document.getElementById("imageToPDFForm").addEventListener("submit", async function (e) {
+                  e.preventDefault();
+
+                  const form = e.target;
+                  const formData = new FormData(form);
+
+                  const fitOptionSelect = document.getElementById("fitOption");
+                  const fitOptionValue = fitOptionSelect ? fitOptionSelect.value : "fit-to-page"; // Default value
+                  formData.append("fitOption", fitOptionValue);
+
+                  const overrideInput = document.getElementById("override");
+                  console.log("Override value before submission:", overrideInput.value);
+
+                  for (let [key, value] of formData.entries()) {
+                    console.log(`${key}:`, value);
+                  }
+
+                  try {
+                    const response = await fetch(form.action, {
+                      method: "POST",
+                      body: formData
                     });
-                  });
 
-                  $('#conversionType').change(function() {
-                    var selectedValue = $(this).val();
-                    var override = document.getElementById("override");
-                    console.log("selectedValue=" + selectedValue)
-                    if (selectedValue === 'merge') {
-                      override.value = "single";
-                    } else if (selectedValue === 'convert') {
-                      override.value = "multi";
+                    if (response.ok) {
+                      console.log("Form successfully submitted");
+                    } else {
+                      console.error("Failed to submit the form");
                     }
-                  });
-                  document.getElementById("imageToPDFForm").addEventListener("submit", async function (e) {
-    e.preventDefault();
-
-    const form = e.target;
-    const formData = new FormData(form);
-
-    const fitOptionSelect = document.getElementById("fitOption");
-    const fitOptionValue = fitOptionSelect ? fitOptionSelect.value : "fit-to-page"; // Default value
-    formData.append("fitOption", fitOptionValue);
-
-    const overrideInput = document.getElementById("override");
-    console.log("Override value before submission:", overrideInput.value);
-
-    for (let [key, value] of formData.entries()) {
-        console.log(`${key}:`, value);
-    }
-
-    try {
-        const response = await fetch(form.action, {
-            method: "POST",
-            body: formData
-        });
-
-        if (response.ok) {
-            console.log("Form successfully submitted");
-        } else {
-            console.error("Failed to submit the form");
-        }
-    } catch (error) {
-        console.error("Error submitting the form:", error);
-    }
-});
-                </script>
-              </form>
-            </div>
+                  } catch (error) {
+                    console.error("Error submitting the form:", error);
+                  }
+                });
+              </script>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html
index 9f9c52e23..f40a0781e 100644
--- a/src/main/resources/templates/convert/markdown-to-pdf.html
+++ b/src/main/resources/templates/convert/markdown-to-pdf.html
@@ -1,33 +1,39 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{MarkdownToPDF.title}, header=#{MarkdownToPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon convert">markdown</span>
-                <span class="tool-header-text" th:text="#{MarkdownToPDF.header}"></span>
-              </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/markdown/pdf'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='.md')}"></div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{MarkdownToPDF.help}"></p>
-              <p class="mt-3" th:text="#{MarkdownToPDF.credit}"></p>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{MarkdownToPDF.title}, header=#{MarkdownToPDF.header})}">
+  </th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">markdown</span>
+              <span class="tool-header-text" th:text="#{MarkdownToPDF.header}"></span>
             </div>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/markdown/pdf'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='.md')}">
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{MarkdownToPDF.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{MarkdownToPDF.help}"></p>
+            <p class="mt-3" th:text="#{MarkdownToPDF.credit}"></p>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index d83ef4e99..b4f2b0657 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -1,70 +1,76 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
   <th:block th:insert="~{fragments/common :: head(title=#{pdfToImage.title}, header=#{pdfToImage.header})}"></th:block>
-  </head>
+</head>
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon image">image</span>
-                <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
-              </div>
-              <p th:text="#{processTimeWarning}"></p>
-              <p th:if="${!isPython}" th:text="#{pdfToImage.info}">Python is not installed. Required for WebP conversion.</p>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/img'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.selectText}"></label>
-                  <select class="form-control" name="imageFormat">
-                    <option value="png">PNG</option>
-                    <option value="jpg">JPG</option>
-                    <option value="gif">GIF</option>
-                    <option value="tiff">TIFF</option>
-                    <option value="bmp">BMP</option>
-                    <option th:if="${isPython}" value="webp">WEBP</option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.singleOrMultiple}"></label>
-                  <select class="form-control" name="singleOrMultiple">
-                    <option value="multiple" th:text="#{pdfToImage.multi}"></option>
-                    <option value="single" th:text="#{pdfToImage.single}"></option>
-                  </select>
-                </div>
-
-                <div class="mb-3" id="singleOptionSection" >
-                  <label for="pageNumbers" th:text="#{pageSelectionPrompt}"></label>
-                  <input type="text" name="pageNumbers" class="form-control" id="pageNumbers" value="all"
-                         th:placeholder="#{pdfToImage.placeholder}" required>
-                </div>
-                <div class="mb-3">
-                  <label th:text="#{pdfToImage.colorType}"></label>
-                  <select class="form-control" name="colorType">
-                    <option value="color" th:text="#{pdfToImage.color}"></option>
-                    <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
-                    <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label for="dpi">DPI:</label>
-                  <input type="number" name="dpi" class="form-control" id="dpi" min="1" step="1" value="300" required>
-                </div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToImage.submit}"></button>
-              </form>
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">photo_library</span>
+              <span class="tool-header-text" th:text="#{pdfToImage.header}"></span>
             </div>
+            <p th:text="#{processTimeWarning}"></p>
+            <p th:if="${!isPython}" th:text="#{pdfToImage.info}">Python is not installed. Required for WebP conversion.
+            </p>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/img'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.selectText}"></label>
+                <select class="form-control" name="imageFormat">
+                  <option value="png">PNG</option>
+                  <option value="jpg">JPG</option>
+                  <option value="gif">GIF</option>
+                  <option value="tiff">TIFF</option>
+                  <option value="bmp">BMP</option>
+                  <option th:if="${isPython}" value="webp">WEBP</option>
+                </select>
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.singleOrMultiple}"></label>
+                <select class="form-control" name="singleOrMultiple">
+                  <option value="multiple" th:text="#{pdfToImage.multi}"></option>
+                  <option value="single" th:text="#{pdfToImage.single}"></option>
+                </select>
+              </div>
+
+              <div class="mb-3" id="singleOptionSection">
+                <label for="pageNumbers" th:text="#{pageSelectionPrompt}"></label>
+                <input type="text" name="pageNumbers" class="form-control" id="pageNumbers" value="all"
+                  th:placeholder="#{pdfToImage.placeholder}" required>
+              </div>
+              <div class="mb-3">
+                <label th:text="#{pdfToImage.colorType}"></label>
+                <select class="form-control" name="colorType">
+                  <option value="color" th:text="#{pdfToImage.color}"></option>
+                  <option value="greyscale" th:text="#{pdfToImage.grey}"></option>
+                  <option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
+                </select>
+              </div>
+              <div class="mb-3">
+                <label for="dpi">DPI:</label>
+                <input type="number" name="dpi" class="form-control" id="dpi" min="1" step="1" value="300" required>
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToImage.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+
+</body>
 
-  </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index c52419f30..56f22db56 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -1,41 +1,49 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{PDFToPresentation.title}, header=#{PDFToPresentation.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon ppt">slideshow</span>
-                <span class="tool-header-text" th:text="#{PDFToPresentation.header}"></span>
-              </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/presentation'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
-                <div class="mb-3">
-                  <label th:text="#{PDFToPresentation.selectText.1}"></label>
-                  <select class="form-control" name="outputFormat">
-                    <option value="pptx">PPTX</option>
-                    <option value="ppt">PPT</option>
-                    <option value="odp">ODP</option>
-                  </select>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{PDFToPresentation.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{PDFToPresentation.credit}"></p>
+<head>
+  <th:block
+    th:insert="~{fragments/common :: head(title=#{PDFToPresentation.title}, header=#{PDFToPresentation.header})}">
+  </th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">slideshow</span>
+              <span class="tool-header-text" th:text="#{PDFToPresentation.header}"></span>
             </div>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/presentation'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
+              <div class="mb-3">
+                <label th:text="#{PDFToPresentation.selectText.1}"></label>
+                <select class="form-control" name="outputFormat">
+                  <option value="pptx">PPTX</option>
+                  <option value="ppt">PPT</option>
+                  <option value="odp">ODP</option>
+                </select>
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary"
+                th:text="#{PDFToPresentation.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{PDFToPresentation.credit}"></p>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index 1b3f7f588..0b500cbb6 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -1,41 +1,46 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{PDFToWord.title}, header=#{PDFToWord.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon word">description</span>
-                <span class="tool-header-text" th:text="#{PDFToWord.header}"></span>
-              </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/word'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
-                <div class="mb-3">
-                  <label th:text="#{PDFToWord.selectText.1}"></label>
-                  <select class="form-control" name="outputFormat">
-                    <option value="docx">DocX</option>
-                    <option value="doc">Doc</option>
-                    <option value="odt">Odt</option>
-                  </select>
-                </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{PDFToWord.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{PDFToWord.credit}"></p>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{PDFToWord.title}, header=#{PDFToWord.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convert">description</span>
+              <span class="tool-header-text" th:text="#{PDFToWord.header}"></span>
             </div>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/word'}">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
+              </div>
+              <div class="mb-3">
+                <label th:text="#{PDFToWord.selectText.1}"></label>
+                <select class="form-control" name="outputFormat">
+                  <option value="docx">DocX</option>
+                  <option value="doc">Doc</option>
+                  <option value="odt">Odt</option>
+                </select>
+              </div>
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{PDFToWord.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{PDFToWord.credit}"></p>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html
index 671672586..67e89c101 100644
--- a/src/main/resources/templates/convert/url-to-pdf.html
+++ b/src/main/resources/templates/convert/url-to-pdf.html
@@ -1,33 +1,36 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{URLToPDF.title}, header=#{URLToPDF.header})}"></th:block>
-  </head>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon convert">link</span>
-                <span class="tool-header-text" th:text="#{URLToPDF.header}"></span>
-              </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/url/pdf'}">
-                <input type="text" class="form-control" id="urlInput" name="urlInput" placeholder="http://">
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{URLToPDF.submit}"></button>
-              </form>
-              <p class="mt-3" th:text="#{URLToPDF.credit}"></p>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{URLToPDF.title}, header=#{URLToPDF.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6 bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon convertto">link</span>
+              <span class="tool-header-text" th:text="#{URLToPDF.header}"></span>
             </div>
+            <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/url/pdf'}">
+              <input type="text" class="form-control" id="urlInput" name="urlInput" placeholder="http://">
+              <br>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{URLToPDF.submit}"></button>
+            </form>
+            <p class="mt-3" th:text="#{URLToPDF.credit}"></p>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index e4f5e9130..b2ab67eec 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,5 +1,6 @@
-<div th:fragment="card" class="feature-card hidden" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
-  th:data-bs-tags="${tags}">
+<div th:fragment="card" class="feature-card hidden" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)} "
+  th:data-bs-tags="${tags}"
+  th:data-bs-link="@{${endpoint}}">
   <a th:href="${cardLink}">
     <div class="d-flex align-items-center">
 
@@ -14,10 +15,7 @@
 
     </div>
   </a>
-  <div class="favorite-icon" onclick="toggleFavorite(this)">
-    <span class="material-symbols-rounded">
+    <span class="material-symbols-rounded favorite-icon" th:data-endpoint="@{${endpoint}}" th:onclick="'addToFavorites(\'' + @{${cardLink}} + '\')'">
       star
     </span>
-  </div>
-</div>
 </div>
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index a6099f5a1..f8e241149 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -1,242 +1,249 @@
 <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" th:href="@{'/apple-touch-icon.png'}">
-    <link rel="icon" type="image/png" sizes="32x32" th:href="@{'/favicon-32x32.png'}">
-    <link rel="icon" type="image/png" sizes="16x16" th:href="@{'/favicon-16x16.png'}">
-    <link rel="manifest" th:href="@{'/site.webmanifest'}" crossorigin="use-credentials">
-    <link rel="mask-icon" th:href="@{'/safari-pinned-tab.svg'}" color="#ca2b2a">
-    <link rel="shortcut icon" th:href="@{'/favicon.ico'}">
-    <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" th:href="@{'/apple-touch-icon.png'}">
+  <link rel="icon" type="image/png" sizes="32x32" th:href="@{'/favicon-32x32.png'}">
+  <link rel="icon" type="image/png" sizes="16x16" th:href="@{'/favicon-16x16.png'}">
+  <link rel="manifest" th:href="@{'/site.webmanifest'}" crossorigin="use-credentials">
+  <link rel="mask-icon" th:href="@{'/safari-pinned-tab.svg'}" color="#ca2b2a">
+  <link rel="shortcut icon" th:href="@{'/favicon.ico'}">
+  <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">
 
-    <script>
-      window.stirlingPDF = window.stirlingPDF || {};
-    </script>
-    <script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
-    <script th:src="@{'/js/fetch-utils.js'}"></script>
-    <!-- jQuery -->
-    <script th:src="@{'/js/thirdParty/jquery.min.js'}"></script>
-    <script th:src="@{'/js/thirdParty/jquery.validate.min.js'}"></script>
-    <script th:src="@{'/js/thirdParty/jszip.min.js'}" th:if="${currentPage != 'home'}"></script>
+  <script>
+    window.stirlingPDF = window.stirlingPDF || {};
+  </script>
+  <script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
+  <script th:src="@{'/js/fetch-utils.js'}"></script>
+  <!-- jQuery -->
+  <script th:src="@{'/js/thirdParty/jquery.min.js'}"></script>
+  <script th:src="@{'/js/thirdParty/jquery.validate.min.js'}"></script>
+  <script th:src="@{'/js/thirdParty/jszip.min.js'}" th:if="${currentPage != 'home'}"></script>
 
-    <!-- Bootstrap -->
-    <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
-    <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
-    <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
+  <!-- Bootstrap -->
+  <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
+  <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
+  <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
 
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" th:href="@{'/css/bootstrap-icons.min.css'}">
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" th:href="@{'/css/bootstrap-icons.min.css'}">
 
-    <!-- Custom -->
-    <link rel="stylesheet" th: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" th:href="@{'/css/tab-container.css'}">
-    <link rel="stylesheet" th:href="@{'/css/navbar.css'}">
+  <!-- Custom -->
+  <link rel="stylesheet" th: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" th:href="@{'/css/tab-container.css'}">
+  <link rel="stylesheet" th: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" th:href="@{'/css/home.css'}" th:if="${currentPage == 'home'}">
-    <link rel="stylesheet" th:href="@{'/css/account.css'}" th:if="${currentPage == 'account'}">
-    <link rel="stylesheet" th:href="@{'/css/licenses.css'}" th:if="${currentPage == 'licenses'}">
-    <link rel="stylesheet" th:href="@{'/css/multi-tool.css'}" th:if="${currentPage == 'multi-tool'}">
-    <link rel="stylesheet" th:href="@{'/css/rotate-pdf.css'}" th:if="${currentPage == 'rotate-pdf'}">
-    <link rel="stylesheet" th:href="@{'/css/stamp.css'}" th:if="${currentPage == 'stamp'}">
-    <link rel="stylesheet" th:href="@{'/css/fileSelect.css'}"  th:if="${currentPage != 'home'}">
-    <link rel="stylesheet" th:href="@{'/css/footer.css'}">
+  <link rel="stylesheet" th:href="@{'/css/home.css'}" th:if="${currentPage == 'home'}">
+  <link rel="stylesheet" th:href="@{'/css/home-legacy.css'}" th:if="${currentPage == 'home-legacy'}">
+  <link rel="stylesheet" th:href="@{'/css/account.css'}" th:if="${currentPage == 'account'}">
+  <link rel="stylesheet" th:href="@{'/css/licenses.css'}" th:if="${currentPage == 'licenses'}">
+  <link rel="stylesheet" th:href="@{'/css/multi-tool.css'}" th:if="${currentPage == 'multi-tool'}">
+  <link rel="stylesheet" th:href="@{'/css/rotate-pdf.css'}" th:if="${currentPage == 'rotate-pdf'}">
+  <link rel="stylesheet" th:href="@{'/css/stamp.css'}" th:if="${currentPage == 'stamp'}">
+  <link rel="stylesheet" th:href="@{'/css/fileSelect.css'}" th:if="${currentPage != 'home'}">
+  <link rel="stylesheet" th:href="@{'/css/footer.css'}">
 
-    <link rel="preload" th:href="@{'/fonts/google-symbol.woff2'}" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" th:href="@{'/fonts/google-symbol.woff2'}" as="font" type="font/woff2" crossorigin="anonymous">
 
-    <script th:src="@{'/js/thirdParty/fontfaceobserver.standalone.js'}"></script>
+  <script th:src="@{'/js/thirdParty/fontfaceobserver.standalone.js'}"></script>
 
-    <!-- Google MD Icons -->
-    <link rel="stylesheet" th:href="@{'/css/theme/font.css'}">
+  <!-- Google MD Icons -->
+  <link rel="stylesheet" th:href="@{'/css/theme/font.css'}">
 
-    <!-- Help Modal -->
-    <link rel="stylesheet" th:href="@{'/css/errorBanner.css'}"  th:if="${currentPage != 'home'}">
+  <!-- Help Modal -->
+  <link rel="stylesheet" th:href="@{'/css/errorBanner.css'}" th:if="${currentPage != 'home'}">
 
-    <script th:src="@{'/js/cacheFormInputs.js'}"  th:if="${currentPage != 'home'}"></script>
-    <script th:src="@{'/js/tab-container.js'}"></script>
-    <script th:src="@{'/js/darkmode.js'}"></script>
-    <script th:src="@{'/js/csrf.js'}"></script>
-    <script th:inline="javascript">
-        const stirlingPDFLabel = /*[[${@StirlingPDFLabel}]]*/ '';
-        const analyticsEnabled = /*[[${@analyticsEnabled}]]*/ false;
+  <script th:src="@{'/js/cacheFormInputs.js'}" th:if="${currentPage != 'home'}"></script>
+  <script th:src="@{'/js/tab-container.js'}"></script>
+  <script th:src="@{'/js/darkmode.js'}"></script>
+  <script th:src="@{'/js/csrf.js'}"></script>
+  <script th:inline="javascript">
+    const stirlingPDFLabel = /*[[${@StirlingPDFLabel}]]*/ '';
+    const analyticsEnabled = /*[[${@analyticsEnabled}]]*/ false;
 
-        if (analyticsEnabled) {
-            !function (t, e) {
-                var o, n, p, r;
-                e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) {
-                    function g(t, e) {
-                        var o = e.split(".");
-                        2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () {
-                            t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
-                        }
-                    }
+    if (analyticsEnabled) {
+      !function (t, e) {
+        var o, n, p, r;
+        e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) {
+          function g(t, e) {
+            var o = e.split(".");
+            2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () {
+              t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
+            }
+          }
 
-                    (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r);
-                    var u = e;
-                    for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) {
-                        var e = "posthog";
-                        return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e
-                    }, u.people.toString = function () {
-                        return u.toString(1) + ".people (stub)"
-                    }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "), n = 0; n < o.length; n++) g(u, o[n]);
-                    e._i.push([i, s, a])
-                }, e.__SV = 1)
-            }(document, window.posthog || []);
-            posthog.init('phc_fiR65u5j6qmXTYL56MNrLZSWqLaDW74OrZH0Insd2xq', {
-                api_host: 'https://eu.i.posthog.com',
-                persistence: 'localStorage',
-                person_profiles: 'always',
-                mask_all_text: true,
-                mask_all_element_attributes: true
-            })
-            const baseUrl = window.location.hostname;
-            posthog.register_once({
-                'hostname': baseUrl,
-                'UUID': /*[[${@UUID}]]*/ ''
-            })
-        }
-    </script>
+          (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r);
+          var u = e;
+          for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) {
+            var e = "posthog";
+            return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e
+          }, u.people.toString = function () {
+            return u.toString(1) + ".people (stub)"
+          }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "), n = 0; n < o.length; n++) g(u, o[n]);
+          e._i.push([i, s, a])
+        }, e.__SV = 1)
+      }(document, window.posthog || []);
+      posthog.init('phc_fiR65u5j6qmXTYL56MNrLZSWqLaDW74OrZH0Insd2xq', {
+        api_host: 'https://eu.i.posthog.com',
+        persistence: 'localStorage',
+        person_profiles: 'always',
+        mask_all_text: true,
+        mask_all_element_attributes: true
+      })
+      const baseUrl = window.location.hostname;
+      posthog.register_once({
+        'hostname': baseUrl,
+        'UUID': /*[[${@UUID}]]*/ ''
+      })
+    }
+  </script>
 
 
 
-  </th:block>
+</th:block>
 
 <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() {
+  <dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
+    <script th:inline="javascript">
+      console.log("loaded game");
+      $(document).ready(function () {
 
-           // Find the file input within the form
-          var fileInput = $('input[type="file"]');
+        // Find the 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 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"]');
+        // 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>');
+        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>');
 
-          // Insert the 'show-game-btn' just above the submit button
-          submitButton.before(gameButton);
+        // 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);
+        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();
           }
-          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 th:src="@{'/favicon.svg'}" class="player" id="player" alt="favicon">
+      })
+    </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 th:src="@{'/favicon.svg'}" class="player" id="player" alt="favicon">
+    </div>
+    <link rel="stylesheet" th:href="@{'/css/game.css'}">
+  </dialog>
+</th:block>
+
+<th:block th:fragment="fileSelector(name, multipleInputsForSingleRequest)"
+  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, disableMultipleFiles=${disableMultipleFiles} ?: false, notRequired=${notRequired} ?: false">
+  <script th:inline="javascript">
+      (function () {
+        window.stirlingPDF.pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
+        window.stirlingPDF.multipleInputsForSingleRequest = /*[[${multipleInputsForSingleRequest}]]*/ false;
+        window.stirlingPDF.disableMultipleFiles = /*[[${disableMultipleFiles}]]*/ false;
+        window.stirlingPDF.remoteCall = /*[[${remoteCall}]]*/ true;
+        window.stirlingPDF.sessionExpired = /*[[#{session.expired}]]*/ '';
+        window.stirlingPDF.refreshPage = /*[[#{session.refreshPage}]]*/ 'Refresh Page';
+        window.stirlingPDF.error = /*[[#{error}]]*/ "Error";
+      })();
+  </script>
+  <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
+  <script th:src="@{'/js/downloader.js'}"></script>
+  <script>
+    window.decrypt = {
+      passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
+      cancelled: '[[#{decrypt.cancelled}]]',
+      noPassword: '[[#{decrypt.noPassword}]]',
+      invalidPassword: '[[#{decrypt.invalidPassword}]]',
+      invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
+      unexpectedError: '[[#{decrypt.unexpectedError}]]',
+      serverError: '[[#{decrypt.serverError}]]',
+      success: '[[#{decrypt.success}]]',
+    };
+    window.fileInput = {
+      dragAndDropPDF: '[[#{fileChooser.dragAndDropPDF}]]',
+      dragAndDropImage: '[[#{fileChooser.dragAndDropImage}]]'
+    };</script>
+  <div class="custom-file-chooser mb-3"
+    th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
+    <div class="mb-3 d-flex flex-row justify-content-center align-items-center flex-wrap input-container"
+      th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
+      <label class="file-input-btn d-none">
+        <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}"
+          th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'">
+        Browse
+      </label>
+      <div th:text="#{fileChooser.click}"></div>
+      <div th:text="#{fileChooser.or}"></div>
+      <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
+    </div>
+    <div class="selected-files flex-wrap"></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>
-      <link rel="stylesheet" th:href="@{'/css/game.css'}">
-    </dialog>
-</th:block>
-
-<th:block th:fragment="fileSelector(name, multipleInputsForSingleRequest)" th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, disableMultipleFiles=${disableMultipleFiles} ?: false, notRequired=${notRequired} ?: false">
-                <script th:inline="javascript">
-                  (function() {
-                    window.stirlingPDF.pdfPasswordPrompt = /*[[#{error.pdfPassword}]]*/ '';
-                    window.stirlingPDF.multipleInputsForSingleRequest = /*[[${multipleInputsForSingleRequest}]]*/ false;
-                    window.stirlingPDF.disableMultipleFiles = /*[[${disableMultipleFiles}]]*/ false;
-                    window.stirlingPDF.remoteCall = /*[[${remoteCall}]]*/ true;
-                    window.stirlingPDF.sessionExpired = /*[[#{session.expired}]]*/ '';
-                    window.stirlingPDF.refreshPage = /*[[#{session.refreshPage}]]*/ 'Refresh Page';
-                    window.stirlingPDF.error = /*[[#{error}]]*/ "Error";
-                  })();
-                </script>
-                <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
-                <script th:src="@{'/js/downloader.js'}"></script>
-                <script>
-                  window.decrypt = {
-                    passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
-                    cancelled: '[[#{decrypt.cancelled}]]',
-                    noPassword: '[[#{decrypt.noPassword}]]',
-                    invalidPassword: '[[#{decrypt.invalidPassword}]]',
-                    invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
-                    unexpectedError: '[[#{decrypt.unexpectedError}]]',
-                    serverError: '[[#{decrypt.serverError}]]',
-                    success: '[[#{decrypt.success}]]',
-              };
-              window.fileInput = {
-                dragAndDropPDF : '[[#{fileChooser.dragAndDropPDF}]]',
-                dragAndDropImage : '[[#{fileChooser.dragAndDropImage}]]'};</script>
-                <div class="custom-file-chooser mb-3" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
-                  <div class="mb-3 d-flex flex-row justify-content-center align-items-center flex-wrap input-container" th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
-                      <label class="file-input-btn d-none">
-                        <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'">
-                        Browse
-                      </label>
-                      <div th:text="#{fileChooser.click}"></div>
-                      <div th:text="#{fileChooser.or}"></div>
-                      <div  th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
-                  </div>
-                    <div class="selected-files flex-wrap"></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 th:src="@{'/js/fileInput.js'}" type="module"></script>
-</th:block>
+    </div>
+  </div>
+  <script th:src="@{'/js/fileInput.js'}" type="module"></script>
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/featureGroupHeader.html b/src/main/resources/templates/fragments/featureGroupHeader.html
index 0a8f7e9b1..7cdcb8339 100644
--- a/src/main/resources/templates/fragments/featureGroupHeader.html
+++ b/src/main/resources/templates/fragments/featureGroupHeader.html
@@ -1,6 +1,3 @@
 <div th:fragment="featureGroupHeader" class="feature-group-header">
-  <h3 class="menu-title" th:text="${groupTitle}"></h3>
-  <span class="material-symbols-rounded header-expand-button">
-    chevron_right
-  </span>
+  <h6 class="menu-title" th:text="${groupTitle}"></h6>
 </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/featureGroupHeaderLegacy.html b/src/main/resources/templates/fragments/featureGroupHeaderLegacy.html
new file mode 100644
index 000000000..0a8f7e9b1
--- /dev/null
+++ b/src/main/resources/templates/fragments/featureGroupHeaderLegacy.html
@@ -0,0 +1,6 @@
+<div th:fragment="featureGroupHeader" class="feature-group-header">
+  <h3 class="menu-title" th:text="${groupTitle}"></h3>
+  <span class="material-symbols-rounded header-expand-button">
+    chevron_right
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navElements.html b/src/main/resources/templates/fragments/navElements.html
new file mode 100644
index 000000000..42fb34e64
--- /dev/null
+++ b/src/main/resources/templates/fragments/navElements.html
@@ -0,0 +1,296 @@
+<th:block th:fragment="navElements">
+    <div id="groupOrganize" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+        </div>
+
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'add_to_photos', 'home.merge.title', 'home.merge.desc', 'merge.tags', 'organize')}">
+        </div>
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', 'organize')}"></div>
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('rotate-pdf', 'rotate_right', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-organizer', 'format_list_bulleted', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('multi-page-layout', 'dashboard', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('scale-pages', 'fullscreen', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('extract-page', 'upload', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags', 'organize')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
+      </div>
+      </div>
+    </div>
+
+    <div id="groupConvertTo"  class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convertto')}">
+      </div>
+      </div>
+    </div>
+    <div id="groupConvertFrom" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-text', 'text_fields', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-html', 'html', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-xml', 'code', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'tableExtraxt.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
+      </div>
+      <div
+      th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-markdown', 'markdown_copy', 'home.PDFToMarkdown.title', 'home.PDFToMarkdown.desc', 'PDFToMarkdown.tags', 'convert')}">
+         </div>
+
+    </div>
+    </div>
+    <div id="convertGroup"  class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convertto')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convertto')}">
+      </div>
+      </div>
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-text', 'text_fields', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-html', 'html', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-xml', 'code', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'tableExtraxt.tags', 'convert')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
+      </div>
+    </div>
+    </div>
+    <div id="groupSecurity" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('add-password', 'lock', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-password', 'lock_open_right', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('change-permissions', 'encrypted', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('cert-sign', 'workspace_premium', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags', 'security')}">
+      </div>
+
+      <div
+      th:replace="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+    </div>
+  <div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('sanitize-pdf', 'sanitizer', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntryCustom :: navbarEntry('auto-redact', '/images/redact-auto.svg#icon-redact-auto', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
+</div>
+<div
+th:replace="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
+</div>
+<div
+  th:replace="~{fragments/navbarEntry :: navbarEntry('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
+</div>
+      </div>
+    </div>
+
+    <div id="groupView" class="feature-group">
+      <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('view-pdf', 'menu_book', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('add-page-numbers', '123', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('add-image', 'text_fields', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('change-metadata', 'assignment', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('extract-images', 'photo_library', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('flatten', 'layers_clear', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-annotations', 'thread_unread', 'home.removeAnnotations.title', 'home.removeAnnotations.desc', 'removeAnnotations.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('get-info-on-pdf', 'info', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-image-pdf', 'remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('replace-color-pdf', 'format_color_fill', 'home.replaceColorPdf.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
+      </div>
+      </div>
+    </div>
+    <div id="groupAdvanced" class="feature-group">
+      <div
+        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
+      </div>
+      <div class="nav-group-container">
+        <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('pipeline', 'family_history', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('repair', 'build', 'home.repair.title', 'home.repair.desc', 'repair.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntryCustom :: navbarEntry('auto-rename', '/images/rename.svg#icon-rename', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntryCustom :: navbarEntry('auto-split-pdf', '/images/split-auto.svg#icon-split-auto', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntryCustom :: navbarEntry('split-by-size-or-count', '/images/split-size.svg#icon-split-size', 'home.autoSizeSplitPDF.title', 'home.autoSizeSplitPDF.desc', 'autoSizeSplitPDF.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('split-pdf-by-sections', 'grid_on', 'home.split-by-sections.title', 'home.split-by-sections.desc', 'split-by-sections.tags', 'advance')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntryCustom :: navbarEntry('split-pdf-by-chapters', '/images/split-chapters.svg#icon-split-chapters', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
+      </div>
+      </div>
+  </div>
+  </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 1847a1e46..403a8df35 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,11 +1,13 @@
-<div th:fragment="navbar" class="mx-auto">
+<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000">
   <script th:src="@{'/js/languageSelection.js'}"></script>
   <script th:src="@{'/js/navbar.js'}"></script>
   <script th:src="@{'/js/additionalLanguageCode.js'}"></script>
   <script th:inline="javascript">
     // Initializing the scripts
     initLanguageSettings();
-    toolsManager();
+    document.addEventListener('DOMContentLoaded', function () {
+      toolsManager();
+    });
   </script>
   <script th:inline="javascript">
     const currentVersion = /*[[${@appVersion}]]*/ '';
@@ -16,7 +18,11 @@
   <script th:src="@{'/js/homecard.js'}"></script>
   <script th:src="@{'/js/githubVersion.js'}"></script>
   <form th:action="@{'/dummyFormToPopulateCSRF'}" method="post" enctype="multipart/form-data"></form>
-  <nav class="navbar navbar-expand-xl">
+  <nav class="navbar navbar-expand-xl" style="
+  background: var(--md-nav-background);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: var(--md-nav-color-on-seperator)">
     <div class="container ">
       <a class="navbar-brand" th:href="@{'/'}" style="display: flex;">
         <img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon">
@@ -32,7 +38,7 @@
         <ul class="navbar-nav me-auto flex-nowrap">
 
           <!-- All Tools -->
-          <li class="nav-item dropdown dropdown-mega position-static">
+          <li id="navItemToHide" class="nav-item dropdown dropdown-mega position-static">
             <a class="nav-link" id="navbarDropdown-1" href="#" role="button" data-bs-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">
               <span class="material-symbols-rounded">
@@ -41,231 +47,10 @@
               <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="navbar-item col-lg-2 col-sm-6 py px-xl-1">
-                        <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'add_to_photos', 'home.merge.title', 'home.merge.desc', 'merge.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('rotate-pdf', 'rotate_right', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-pages', 'delete', 'home.removePages.title', 'home.removePages.desc', 'removePages.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-organizer', 'format_list_bulleted', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc', 'pdfOrganiser.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-page-layout', 'dashboard', 'home.pageLayout.title', 'home.pageLayout.desc', 'pageLayout.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('scale-pages', 'fullscreen', 'home.scalePages.title', 'home.scalePages.desc', 'scalePages.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('crop', 'crop', 'home.crop.title', 'home.crop.desc', 'crop.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-page', 'upload', 'home.extractPage.title', 'home.extractPage.desc', 'extractPage.tags', 'organize')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
-                        </div>
-                      </div>
-                      <div id="stacked" class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"
-                        style="display:flex; flex-direction: column;">
-                        <!-- Convert to PDF menu items -->
-                        <div class="navbar-item py px-xl-1 px-2" style="margin-bottom: 1rem;">
-                          <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'draft', 'home.fileToPDF.title', 'home.fileToPDF.desc', 'fileToPDF.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('url-to-pdf', 'link', 'home.URLToPDF.title', 'home.URLToPDF.desc', 'URLToPDF.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('html-to-pdf', 'html', 'home.HTMLToPDF.title', 'home.HTMLToPDF.desc', 'HTMLToPDF.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
-                          </div>
-                        </div>
-                        <!-- Convert from PDF menu items -->
-                        <div class="navbar-item py px-xl-1">
-                          <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'description', 'home.PDFToWord.title', 'home.PDFToWord.desc', 'PDFToWord.tags', 'word')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'slideshow', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc', 'PDFToPresentation.tags', 'ppt')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'text_fields', 'home.PDFToText.title', 'home.PDFToText.desc', 'PDFToText.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'html', 'home.PDFToHTML.title', 'home.PDFToHTML.desc', 'PDFToHTML.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'code', 'home.PDFToXML.title', 'home.PDFToXML.desc', 'PDFToXML.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'picture_as_pdf', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc', 'pdfToPDFA.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-csv', 'csv', 'home.tableExtraxt.title', 'home.tableExtraxt.desc', 'pdfToPDFA.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
-                          </div>
-                          <div
-                            th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-markdown', 'markdown_copy', 'home.PDFToMarkdown.title', 'home.PDFToMarkdown.desc', 'PDFToMarkdown.tags', 'convert')}">
-                          </div>
-                        </div>
-                      </div>
-                      <!-- Security menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
-                        <h6 class="menu-title" th:text="#{navbar.sections.security}"></h6>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'signature', 'home.sign.title', 'home.sign.desc', 'sign.tags', 'sign')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'lock', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'lock_open_right', 'home.removePassword.title', 'home.removePassword.desc', 'removePassword.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'encrypted', 'home.permissions.title', 'home.permissions.desc', 'permissions.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'workspace_premium', 'home.certSign.title', 'home.certSign.desc', 'certSign.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry('validate-signature','verified','home.validateSignature.title','home.validateSignature.desc','validateSignature.tags','security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('sanitize-pdf', 'sanitizer', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-redact', 'contract_delete', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('redact', 'playlist_remove', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
-                        </div>
-                      </div>
-                      <!-- View & Edit menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
-                        <h6 class="menu-title" th:text="#{navbar.sections.edit}"></h6>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('view-pdf', 'menu_book', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'quick_reference_all', 'home.ocr.title', 'home.ocr.desc', 'ocr.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', '123', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'add_photo_alternate', 'home.addImage.title', 'home.addImage.desc', 'addImage.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'wallpaper', 'home.extractImages.title', 'home.extractImages.desc', 'extractImages.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'layers_clear', 'home.flatten.title', 'home.flatten.desc', 'flatten.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-annotations', 'thread_unread', 'home.removeAnnotations.title', 'home.removeAnnotations.desc', 'removeAnnotations.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'scan_delete', 'home.removeBlanks.title', 'home.removeBlanks.desc', 'removeBlanks.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'compare', 'home.compare.title', 'home.compare.desc', 'compare.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'assignment', 'home.changeMetadata.title', 'home.changeMetadata.desc', 'changeMetadata.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'info', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-image-pdf','remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('replace-and-invert-color-pdf','format_color_fill', 'replace-color.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
-                        </div>
-                      </div>
-                      <!-- Advance menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
-                        <h6 class="menu-title" th:text="#{navbar.sections.advance}"></h6>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPdfs.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('pipeline', 'family_history', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntryCustom :: navbarEntry ('auto-rename', '/images/rename.svg#icon-rename', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'build', 'home.repair.title', 'home.repair.desc', 'repair.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('adjust-contrast', 'palette', 'home.adjust-contrast.title', 'home.adjust-contrast.desc', 'adjust-contrast.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('overlay-pdf', 'layers', 'home.overlay-pdfs.title', 'home.overlay-pdfs.desc', 'overlay-pdfs.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-split-pdf', 'cut', 'home.autoSplitPDF.title', 'home.autoSplitPDF.desc', 'autoSplitPDF.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdf-by-sections', 'grid_on', 'home.split-by-sections.title', 'home.split-by-sections.desc', 'split-by-sections.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdf-by-chapters', 'book', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('split-by-size-or-count', 'vertical_split', 'home.autoSizeSplitPDF.title', 'home.autoSizeSplitPDF.desc', 'autoSizeSplitPDF.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'scanner', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc', 'ScannerImageSplit.tags', 'advance')}">
-                        </div>
-                        <div
-                          th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'javascript', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags', 'advance')}">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+              <div class="dropdown-menu-wrapper" style="justify-content: center; display:flex">
+                <div class="feature-rows">
+
+                  <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
                 </div>
               </div>
             </div>
@@ -480,4 +265,18 @@
     </div>
   </div>
   <script th:src="@{'/js/settings.js'}"></script>
+  <script>
+    window.onload = function () {
+      updateFavoritesDropdown();
+
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+      const navbarLink = document.querySelector(".navbar-brand");
+      if (localStorage.getItem("defaultView") === "home-legacy") {
+        navbarLink.setAttribute("href", "/home-legacy");
+      } else {
+        navbarLink.setAttribute("href", "/");
+      }
+    });
+  </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 ad117ed6f..75166d622 100644
--- a/src/main/resources/templates/fragments/navbarEntry.html
+++ b/src/main/resources/templates/fragments/navbarEntry.html
@@ -1,11 +1,18 @@
 <th:block th:fragment="navbarEntry(endpoint, toolIcon, titleKey, descKey, tagKey, toolGroup)"
-  th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
-  <a class="dropdown-item" href="#" th:href="@{${endpoint}}"
-    th: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>
+th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
+  <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative" th:href="@{${endpoint}}"
+    th:data-bs-link="@{${endpoint}}"
+    th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
+    th:data-bs-tags="#{${tagKey}}" th:data-bs-title='#{${titleKey}}'>
+    <div style="height:2.7rem; align-items: center;display: flex;" th:title="#{${descKey}}" class="icon" alt="icon"
+      th:class="@{${toolGroup}}">
+      <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}" style=" align-items:center; display: flex; justify-content: center; height:2.7rem; width:2.7rem"></span>
       <span class="icon-text" th:text="#{${titleKey}}"></span>
     </div>
+    <span class="material-symbols-rounded favorite-icon" style="display: none;" th:data-endpoint="@{${endpoint}}"
+      th:onclick="'addToFavorites(\'' + @{${endpoint}} + '\')'">
+      add
+    </span>
   </a>
+
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbarEntryCustom.html b/src/main/resources/templates/fragments/navbarEntryCustom.html
index c918e32f1..71c2fd411 100644
--- a/src/main/resources/templates/fragments/navbarEntryCustom.html
+++ b/src/main/resources/templates/fragments/navbarEntryCustom.html
@@ -1,13 +1,20 @@
 <th:block th:fragment="navbarEntry(endpoint, toolIcon, titleKey, descKey, tagKey, toolGroup)"
-  th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
-  <a class="dropdown-item" href="#" th:href="@{${endpoint}}"
+th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
+  <a th:id="@{${endpoint}}" class="dropdown-item" style="position:relative" th:href="@{${endpoint}}"
+    th:data-bs-link="@{${endpoint}}"
     th:classappend="${endpoint.equals(currentPage)} ?  ${toolGroup} + ' active' : '' + ${toolGroup}"
-    th:title="#{${descKey}}" th:data-bs-tags="#{${tagKey}}">
-    <div class="icon" alt="icon" th:class="@{${toolGroup}}">
-      <svg class="nav-icon" style="height: 2.5rem; width:2.5rem">
-        <use th:xlink:href="@{${toolIcon}}"></use>
+    th:data-bs-tags="#{${tagKey}}" th:data-bs-title='#{${titleKey}}'>
+    <div style="height:2.5rem;align-items: center;display: flex" th:title="#{${descKey}}" class="icon" alt="icon"
+      th:class="@{${toolGroup}}">
+      <svg class="nav-icon" style="height: 2.7rem; width:2.7rem; align-items:center; display: flex; justify-content: center;">
+        <use th:href="@{${toolIcon}}"></use>
       </svg>
       <span class="icon-text" th:text="#{${titleKey}}"></span>
     </div>
+    <span class="material-symbols-rounded favorite-icon" style="display: none;" th:data-endpoint="@{${endpoint}}"
+      th:onclick="'addToFavorites(\'' + @{${endpoint}} + '\')'">
+      star
+    </span>
   </a>
+
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/home-legacy.html b/src/main/resources/templates/home-legacy.html
new file mode 100644
index 000000000..c30701e29
--- /dev/null
+++ b/src/main/resources/templates/home-legacy.html
@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
+
+<head>
+  <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
+</head>
+
+<body>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <!-- Jumbotron -->
+      <div class="p-5 rounded d-none d-md-block" id="jumbotron">
+        <div class="container">
+          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
+          <p class="lead fs-4"
+            th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
+          </p>
+        </div>
+      </div>
+      <br class="d-md-none">
+      <!-- Features -->
+      <script th:src="@{'/js/homecard-legacy.js'}"></script>
+      <div class=" container">
+        <br>
+        <span class="material-symbols-rounded search-icon">
+          search
+        </span>
+        <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+        <div style="display: flex; align-items: center;">
+        <a href="home" onclick="setAsDefault('home')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
+          <span th:text="#{home.newHomePage}">
+          </span>
+        <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
+          home
+        </span>
+        </a>
+        </div>
+        <div id="filtersContainer">
+          <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
+            star
+          </span>
+          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(true)">
+            expand_all
+          </span>
+          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(false)">
+            collapse_all
+          </span>
+          <span class="material-symbols-rounded filter-button hidden" onclick="switchViewMode()">
+            dashboard
+          </span>
+        </div>
+
+        <div class="features-container">
+
+          <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
+            style="display: none;">
+            <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
+              <div class="d-flex align-items-center">
+                <div id="tool-icon" class="advance" alt="icon">
+                  <span class="material-symbols-rounded nav-icon">update</span>
+                </div>
+                <div id="tool-text">
+                  <h5 class="card-title" th:text="#{settings.update}"></h5>
+                  <p class="card-text" id="app-update"></p>
+                </div>
+              </div>
+            </a>
+          </div>
+
+          <div id="groupFavorites" class="feature-group-legacy">
+            <div th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
+            </div>
+            <div class="feature-group-container">
+            </div>
+          </div>
+
+
+          <div id="popularTools" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
+              </div>
+
+              <div
+                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+              </div>
+            </div>
+          </div>
+
+
+
+
+          <div id="groupOrganize" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', toolIcon='add_to_photos', tags=#{merge.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', toolIcon='cut', tags=#{split.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', toolIcon='rotate_right', tags=#{rotate.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', toolIcon='crop', tags=#{crop.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', toolIcon='format_list_bulleted', tags=#{pdfOrganiser.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', toolIcon='delete', tags=#{removePages.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupConvertTo" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='picture_as_pdf', toolIcon='picture_as_pdf', tags=#{imageToPdf.tags}, toolGroup='image')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='book', tags=#{BookToPDF.tags}, toolGroup='convert')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupConvertFrom" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='photo_library', tags=#{pdfToImage.tags}, toolGroup='image')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', toolIcon='picture_as_pdf', tags=#{pdfToPDFA.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', toolIcon='description', tags=#{PDFToWord.tags}, toolGroup='word')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', toolIcon='slideshow', tags=#{PDFToPresentation.tags}, toolGroup='ppt')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', toolIcon='text_fields', tags=#{PDFToText.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', toolIcon='html', tags=#{PDFToHTML.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', toolIcon='code', tags=#{PDFToXML.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='book', tags=#{PDFToBook.tags}, toolGroup='convert')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupSecurity" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', toolIcon='signature', tags=#{sign.tags}, toolGroup='sign')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='validate-signature', cardTitle=#{home.validateSignature.title}, cardText=#{home.validateSignature.desc}, cardLink='validate-signature', toolIcon='verified', tags=#{validateSignature.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='redact', cardTitle=#{home.redact.title}, cardText=#{home.redact.desc}, cardLink='redact', toolIcon='playlist_remove', tags=#{redact.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupView" class="feature-group-legacy">
+            <div th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='add_photo_alternate', tags=#{addImage.tags}, toolGroup='other')}">
+              </div>
+
+              <div
+                th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='wallpaper', tags=#{extractImages.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', toolIcon='scan_delete', tags=#{removeBlanks.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', toolIcon='thread_unread', tags=#{removeAnnotations.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', toolIcon='compare', tags=#{compare.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-image-pdf', cardTitle=#{home.removeImagePdf.title}, cardText=#{home.removeImagePdf.desc}, cardLink='remove-image-pdf', toolIcon='remove_selection', tags=#{removeImagePdf.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='replace-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
+              </div>
+
+            </div>
+          </div>
+          <div id="groupAdvanced" class="feature-group-legacy">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', toolIcon='text_fields_alt', tags=#{auto-rename.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', toolIcon='cut', tags=#{autoSplitPDF.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', toolIcon='javascript', tags=#{showJS.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', toolIcon='vertical_split', tags=#{autoSizeSplitPDF.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', toolIcon='layers', tags=#{overlay-pdfs.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', toolIcon='grid_on', tags=#{split-by-sections.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='split-pdf-by-chapters', cardTitle=#{home.splitPdfByChapters.title}, cardText=#{home.splitPdfByChapters.desc}, cardLink='split-pdf-by-chapters', toolIcon='book', tags=#{splitPdfByChapters.tags}, toolGroup='advance')}">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+
+
+  <!-- Survey Modal -->
+  <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="surveyModalLabel" th:text="#{survey.title}">Stirling-PDF Survey</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p><span th:text="#{survey.changes}">Stirling-PDF has changed since the last survey! To find out more please
+              check our blog post here: </span><a href="https://www.stirlingpdf.com/blog/stirling-pdf-future"
+              target="_blank"> Stirling PDF</a></p>
+
+          <p th:text="#{survey.changes2}">With these changes we are getting paid business support and funding</p>
+          <p th:text="#{survey.please}">Please consider taking our survey!</p>
+          <p th:text="#{survey.disabled}">Survey popup will be disabled in following updates but available at foot of
+            page)</p>
+          <a href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" target="_blank" class="btn btn-primary"
+            id="takeSurvey" th:text="#{survey.button}">Take Survey</a>
+        </div>
+        <div class="modal-footer">
+          <div class="form-check mb-3">
+            <input type="checkbox" id="dontShowAgain">
+            <label for="dontShowAgain" th:text="#{survey.dontShowAgain}">Don't show again</label>
+          </div>
+
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}">Close</button>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <!-- Analytics Modal -->
+  <div class="modal fade" id="analyticsModal" tabindex="-1" role="dialog" aria-labelledby="analyticsModalLabel"
+    aria-hidden="true" th:if="${@analyticsPrompt}">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do you want make Stirling PDF
+            better?</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p th:text="#{analytics.paragraph1}">Stirling PDF has opt in analytics to help us improve the product. We do
+            not track any personal information or file contents.</p>
+          <p th:text="#{analytics.paragraph2}">Please consider enabling analytics to help Stirling-PDF grow and to allow
+            us to understand our users better.</p>
+          <p th:text="#{analytics.settings}">You can change the settings for analytics in the config/settings.yml file
+          </p>
+        </div>
+        <div class="modal-footer justify-content-between">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="setAnalytics(false)"
+            th:text="#{analytics.disable}">Disable analytics</button>
+          <button type="button" class="btn btn-primary" th:text="#{analytics.enable}"
+            onclick="setAnalytics(true)">Enable analytics</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+  <script th:src="@{'/js/fetch-utils.js'}"></script>
+  <script th:inline="javascript">
+
+    /*<![CDATA[*/
+    const analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
+
+    document.addEventListener('DOMContentLoaded', function () {
+      if (analyticsPromptBoolean) {
+        const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
+        analyticsModal.show();
+      }
+    });
+    /*]]>*/
+    function setAnalytics(enabled) {
+      fetchWithCsrf('api/v1/settings/update-enable-analytics', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(enabled)
+      })
+        .then(response => {
+          if (response.status === 200) {
+            console.log('Analytics setting updated successfully');
+            bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
+          } else if (response.status === 208) {
+            console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
+            alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
+          } else {
+            throw new Error('Unexpected response status: ' + response.status);
+          }
+        })
+        .catch(error => {
+          console.error('Error updating analytics setting:', error);
+          alert('An error occurred while updating the analytics setting. Please try again.');
+        });
+    }
+
+
+
+
+
+    document.addEventListener("DOMContentLoaded", function () {
+      const surveyVersion = "2.0";
+      const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
+      const dontShowAgain = document.getElementById('dontShowAgain');
+      const takeSurveyButton = document.getElementById('takeSurvey');
+
+      const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
+
+      // Check if survey version changed and reset page views if it did
+      const storedVersion = localStorage.getItem('surveyVersion');
+      if (storedVersion && storedVersion !== surveyVersion) {
+        localStorage.setItem('pageViews', '0');
+      }
+
+      let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
+
+      pageViews++;
+      localStorage.setItem('pageViews', pageViews.toString());
+
+      function shouldShowSurvey() {
+        if (localStorage.getItem('dontShowSurvey') === 'true' ||
+          localStorage.getItem('surveyTaken') === 'true') {
+          return false;
+        }
+
+        // If survey version changed and we hit a threshold, show the survey
+        if (localStorage.getItem('surveyVersion') !== surveyVersion &&
+          viewThresholds.includes(pageViews)) {
+          return true;
+        }
+
+        return viewThresholds.includes(pageViews);
+      }
+
+      if (shouldShowSurvey()) {
+        modal.show();
+      }
+
+      dontShowAgain.addEventListener('change', function () {
+        if (this.checked) {
+          localStorage.setItem('dontShowSurvey', 'true');
+          localStorage.setItem('surveyVersion', surveyVersion);
+        } else {
+          localStorage.removeItem('dontShowSurvey');
+          localStorage.removeItem('surveyVersion');
+        }
+      });
+
+      takeSurveyButton.addEventListener('click', function () {
+        localStorage.setItem('surveyTaken', 'true');
+        localStorage.setItem('surveyVersion', surveyVersion);
+        modal.hide();
+      });
+
+      if (localStorage.getItem('dontShowSurvey')) {
+        modal.hide();
+      }
+    });
+
+    function setAsDefault(value) {
+      localStorage.setItem('defaultView', value);
+      console.log(`Default view set to: ${value}`);
+      }
+  </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 5849da94f..c5ed2e313 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -10,42 +10,99 @@
   <div id="page-container">
     <div id="content-wrap">
       <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-      <!-- Jumbotron -->
-      <div class="p-5 rounded d-none d-md-block" id="jumbotron">
-        <div class="container">
-          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
-          <p class="lead fs-4"
-            th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
-          </p>
-        </div>
-      </div>
+
+
+
       <br class="d-md-none">
       <!-- Features -->
       <script th:src="@{'/js/homecard.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 style="
+      width: 100%;
+      display: flex;
+      flex-direction: column;">
 
-        <div id="filtersContainer">
-          <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
-            star
-          </span>
-          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(true)">
-            expand_all
-          </span>
-          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(false)">
-            collapse_all
-          </span>
-          <span class="material-symbols-rounded filter-button hidden" onclick="switchViewMode()">
-            dashboard
-          </span>
+        <div>
+          <br>
+          <div style="justify-content: center; display: flex;">
+            <div style="margin:0 3rem">
+              <div>
+                <div style="display:flex; flex-direction: column; justify-content: center; width:100%; margin-bottom:1rem">
+                  <div style="width:fit-content; margin: 0 auto; padding: 0 3rem">
+                    <p class="lead fs-4"
+                      th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
+                    </p>
+                  </div>
+                  <div id="groupRecent" style="width: fit-content; margin: 0 auto">
+                    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
+                    </div>
+                    <div class="recent-features">
+                      <div class="newfeature"
+                        th:include="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+                      </div>
+                      <div class="newfeature"
+                        th:include="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+                      </div>
+                      <div class="newfeature"
+                        th:include="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+              <span class="material-symbols-rounded search-icon">
+                search
+              </span>
+              <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+
+              <div style="display: flex;">
+                <div
+                style="height:2.5rem;  display: flex; align-items: center; cursor: pointer; justify-content: center;">
+                <label for="sort-options">Sort by:</label>
+                <select id="sort-options" style="border:none;">
+                  <option value="alphabetical" th:text="#{home.alphabetical}"> </option>
+                  <!-- <option value="personal">Your most used</option> -->
+                  <option value="global" th:text="#{home.globalPopularity}"></option>
+                  <!-- <option value="server">Popularity in organisation</option> -->
+                </select>
+              </div>
+                <div
+                  style="display: flex; margin-left:2rem;align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:3rem;  justify-content: center;">
+                  <div th:title="#{home.setFavorites}" style="display: flex; align-items: center; cursor: pointer;" onclick="toggleFavoritesMode()">
+                    <span class="material-symbols-rounded toggle-favourites"
+                      style="font-size: 2rem;  margin-left: 0.2rem;">
+                      star
+                    </span>
+                  </div>
+                  <div onclick="toggleFavoritesView()" th:title="#{home.hideFavorites}" id="favouritesVisibility"
+                    style="display: flex; align-items: center; cursor: pointer;">
+                    <span id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites"
+                      style="font-size: 2rem;  margin-left: 0.2rem;">
+                      visibility
+                    </span>
+                  </div>
+                  <a href="home" onclick="setAsDefault('home-legacy')" th:title="#{home.legacyHomepage}"
+                    style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
+                    </span>
+                    <span class="material-symbols-rounded toggle-favourites"
+                      style="font-size: 2rem; margin-left: 0.2rem;">
+                      home
+                    </span>
+                  </a>
+
+                </div>
+
+              </div>
+            </div>
+          </div>
         </div>
-
-        <div class="features-container">
-
+        <div>
+        </div>
+        <div class="features-container" style="  border-top: 1px;
+        border-top-style: solid;
+        border-color: var(--md-nav-color-on-seperator);
+        margin-top: 1rem;
+      ">
           <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
             style="display: none;">
             <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
@@ -60,278 +117,16 @@
               </div>
             </a>
           </div>
-
-          <div id="groupFavorites" class="feature-group">
-            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
-            </div>
-            <div class="feature-group-container">
+          <div class="feature-rows">
+            <div id="groupFavorites" class="feature-group">
+              <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
+              </div>
+              <div class="nav-group-container">
+              </div>
             </div>
+            <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
           </div>
 
-
-          <div id="popularTools" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
-              </div>
-
-              <div
-                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
-              </div>
-            </div>
-          </div>
-
-
-
-
-          <div id="groupOrganize" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', toolIcon='add_to_photos', tags=#{merge.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', toolIcon='cut', tags=#{split.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', toolIcon='rotate_right', tags=#{rotate.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', toolIcon='crop', tags=#{crop.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', toolIcon='format_list_bulleted', tags=#{pdfOrganiser.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', toolIcon='delete', tags=#{removePages.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
-              </div>
-            </div>
-          </div>
-
-          <div id="groupConvertTo" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', toolIcon='picture_as_pdf', tags=#{imageToPdf.tags}, toolGroup='image')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='book', tags=#{BookToPDF.tags}, toolGroup='convert')}">
-              </div>
-            </div>
-          </div>
-
-          <div id="groupConvertFrom" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='photo_library', tags=#{pdfToImage.tags}, toolGroup='image')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', toolIcon='picture_as_pdf', tags=#{pdfToPDFA.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', toolIcon='description', tags=#{PDFToWord.tags}, toolGroup='word')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', toolIcon='slideshow', tags=#{PDFToPresentation.tags}, toolGroup='ppt')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', toolIcon='text_fields', tags=#{PDFToText.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', toolIcon='html', tags=#{PDFToHTML.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', toolIcon='code', tags=#{PDFToXML.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='book', tags=#{PDFToBook.tags}, toolGroup='convert')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='pdf-to-markdown', cardTitle=#{home.PDFToMarkdown.title}, cardText=#{home.PDFToMarkdown.desc}, cardLink='pdf-to-markdown', toolIcon='markdown_copy', tags=#{PDFToMarkdown.tags}, toolGroup='convert')}">
-              </div>
-            </div>
-          </div>
-
-          <div id="groupSecurity" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', toolIcon='signature', tags=#{sign.tags}, toolGroup='sign')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='validate-signature', cardTitle=#{home.validateSignature.title}, cardText=#{home.validateSignature.desc}, cardLink='validate-signature', toolIcon='verified', tags=#{validateSignature.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='redact', cardTitle=#{home.redact.title}, cardText=#{home.redact.desc}, cardLink='redact', toolIcon='playlist_remove', tags=#{redact.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
-              </div>
-            </div>
-          </div>
-
-          <div id="groupView" class="feature-group">
-            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='add_photo_alternate', tags=#{addImage.tags}, toolGroup='other')}">
-              </div>
-
-              <div
-                th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='wallpaper', tags=#{extractImages.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', toolIcon='scan_delete', tags=#{removeBlanks.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', toolIcon='thread_unread', tags=#{removeAnnotations.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', toolIcon='compare', tags=#{compare.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='remove-image-pdf', cardTitle=#{home.removeImagePdf.title}, cardText=#{home.removeImagePdf.desc}, cardLink='remove-image-pdf', toolIcon='remove_selection', tags=#{removeImagePdf.tags}, toolGroup='other')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='replace-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
-              </div>
-
-            </div>
-          </div>
-          <div id="groupAdvanced" class="feature-group">
-            <div
-              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
-            </div>
-            <div class="feature-group-container">
-              <div
-                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', toolIcon='text_fields_alt', tags=#{auto-rename.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', toolIcon='cut', tags=#{autoSplitPDF.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', toolIcon='javascript', tags=#{showJS.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', toolIcon='vertical_split', tags=#{autoSizeSplitPDF.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', toolIcon='layers', tags=#{overlay-pdfs.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', toolIcon='grid_on', tags=#{split-by-sections.tags}, toolGroup='advance')}">
-              </div>
-              <div
-                th:replace="~{fragments/card :: card(id='split-pdf-by-chapters', cardTitle=#{home.splitPdfByChapters.title}, cardText=#{home.splitPdfByChapters.desc}, cardLink='split-pdf-by-chapters', toolIcon='book', tags=#{splitPdfByChapters.tags}, toolGroup='advance')}">
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -403,108 +198,25 @@
   </div>
 
 
-
-  <script th:src="@{'/js/fetch-utils.js'}"></script>
-  <script th:inline="javascript">
-
-    /*<![CDATA[*/
-    const analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
-
-    document.addEventListener('DOMContentLoaded', function () {
-      if (analyticsPromptBoolean) {
-        const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
-        analyticsModal.show();
-      }
-    });
-    /*]]>*/
-    function setAnalytics(enabled) {
-      fetchWithCsrf('api/v1/settings/update-enable-analytics', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(enabled)
-      })
-        .then(response => {
-          if (response.status === 200) {
-            console.log('Analytics setting updated successfully');
-            bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
-          } else if (response.status === 208) {
-            console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
-            alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
-          } else {
-            throw new Error('Unexpected response status: ' + response.status);
-          }
-        })
-        .catch(error => {
-          console.error('Error updating analytics setting:', error);
-          alert('An error occurred while updating the analytics setting. Please try again.');
-        });
+  <style>
+    .favorite-icon {
+      cursor: pointer;
+      width: 0rem;
+      font-size: 2rem;
     }
 
+    .toggle-favourites {
+      cursor: pointer;
+    }
 
-
-
-
-    document.addEventListener("DOMContentLoaded", function () {
-      const surveyVersion = "2.0";
-      const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
-      const dontShowAgain = document.getElementById('dontShowAgain');
-      const takeSurveyButton = document.getElementById('takeSurvey');
-
-      const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
-
-      // Check if survey version changed and reset page views if it did
-      const storedVersion = localStorage.getItem('surveyVersion');
-      if (storedVersion && storedVersion !== surveyVersion) {
-        localStorage.setItem('pageViews', '0');
-      }
-
-      let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
-
-      pageViews++;
-      localStorage.setItem('pageViews', pageViews.toString());
-
-      function shouldShowSurvey() {
-        if (localStorage.getItem('dontShowSurvey') === 'true' ||
-          localStorage.getItem('surveyTaken') === 'true') {
-          return false;
-        }
-
-        // If survey version changed and we hit a threshold, show the survey
-        if (localStorage.getItem('surveyVersion') !== surveyVersion &&
-          viewThresholds.includes(pageViews)) {
-          return true;
-        }
-
-        return viewThresholds.includes(pageViews);
-      }
-
-      if (shouldShowSurvey()) {
-        modal.show();
-      }
-
-      dontShowAgain.addEventListener('change', function () {
-        if (this.checked) {
-          localStorage.setItem('dontShowSurvey', 'true');
-          localStorage.setItem('surveyVersion', surveyVersion);
-        } else {
-          localStorage.removeItem('dontShowSurvey');
-          localStorage.removeItem('surveyVersion');
-        }
-      });
-
-      takeSurveyButton.addEventListener('click', function () {
-        localStorage.setItem('surveyTaken', 'true');
-        localStorage.setItem('surveyVersion', surveyVersion);
-        modal.hide();
-      });
-
-      if (localStorage.getItem('dontShowSurvey')) {
-        modal.hide();
-      }
-    });
+    .toggle-favourites.active {
+      color: gold;
+    }
+  </style>
+  <script th:src="@{'/js/fetch-utils.js'}">
+    window.analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
   </script>
+  <script th:src="@{'/js/pages/home.js'}"></script>
 
 
 </body>
diff --git a/src/main/resources/templates/misc/add-image.html b/src/main/resources/templates/misc/add-image.html
index 51fbc94ef..b93747447 100644
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -34,7 +34,7 @@
             </div>
 
             <div class="draggable-buttons-box ignore-rtl">
-              <button class="btn btn-outline-secondary"
+              <button class="btn btn-outline-secondary" th:title="#{sign.delete}"
                 onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())"
                 style="color: #C02223; border-color: #C02223; background-color: rgba(255, 0, 0, 0.1);">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
@@ -44,14 +44,12 @@
                   <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>
-                <span class="btn-tooltip" th:text="#{sign.delete}"></span>
               </button>
-              <button class="btn btn-outline-secondary"
+              <button class="btn btn-outline-secondary" th:title="#{sign.addToAll}"
                 onclick="DraggableUtils.addAllPagesDraggableCanvas(DraggableUtils.getLastInteracted())">
                 <span class="material-symbols-rounded">
                   content_copy
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.addToAll}"></span>
               </button>
               <div id="rotation-controls" class="align-items-center" style="display: none;">
                 <div class="input-with-icon">
@@ -62,49 +60,44 @@
                     style="width: 6rem" />
                 </div>
               </div>
-              <button id="ratioToggleBtn" class="btn btn-outline-secondary"
+              <button id="ratioToggleBtn" th:title="#{sign.maintainRatio}" class="btn btn-outline-secondary"
                 onclick="DraggableUtils.toggleMaintainRatio()">
                 <span class="material-symbols-rounded">
                   Aspect_Ratio
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.maintainRatio}"></span>
               </button>
-              <button class="btn btn-outline-secondary" onclick="goToFirstOrLastPage(false)" style="margin-left:auto">
+              <button class="btn btn-outline-secondary" th:title="#{sign.first}" onclick="goToFirstOrLastPage(false)"
+                style="margin-left:auto">
                 <span class="material-symbols-rounded">
                   keyboard_double_arrow_left
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.first}"></span>
               </button>
-              <button class="btn btn-outline-secondary" id="incrementPage"
+              <button class="btn btn-outline-secondary" th:title="#{sign.previous}" id="incrementPage"
                 onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-chevron-left" viewBox="0 0 16 16">
                   <path fill-rule="evenodd"
                     d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                 </svg>
-                <span class="btn-tooltip" th:text="#{sign.previous}"></span>
               </button>
-              <button class="btn btn-outline-secondary" id="decrementPage"
+              <button class="btn btn-outline-secondary" th:title="#{sign.next}" id="decrementPage"
                 onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-chevron-right" viewBox="0 0 16 16">
                   <path fill-rule="evenodd"
                     d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                 </svg>
-                <span class="btn-tooltip" th:text="#{sign.next}"></span>
               </button>
-              <button class="btn btn-outline-secondary" onclick="goToFirstOrLastPage(true)">
+              <button class="btn btn-outline-secondary" th:title="#{sign.last}" onclick="goToFirstOrLastPage(true)">
                 <span class="material-symbols-rounded">
                   keyboard_double_arrow_right
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.last}"></span>
               </button>
-              <button id="download-pdf" class="btn btn-outline-secondary"
+              <button id="download-pdf" th:title="#{downloadPdf}" class="btn btn-outline-secondary"
                 style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)">
                 <span class="material-symbols-rounded">
                   download
                 </span>
-                <span class="btn-tooltip" th:text="#{downloadPdf}"></span>
               </button>
             </div>
             <!-- draggables box -->
diff --git a/src/main/resources/templates/misc/auto-rename.html b/src/main/resources/templates/misc/auto-rename.html
index 0e4442015..884b68985 100644
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -3,7 +3,6 @@
   <head>
   <th:block th:insert="~{fragments/common :: head(title=#{auto-rename.title}, header=#{auto-rename.header})}"></th:block>
   </head>
-
   <body>
     <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
@@ -14,7 +13,11 @@
           <div class="row justify-content-center">
             <div class="col-md-6 bg-card">
               <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon advance">text_fields_alt</span>
+                <span >
+                    <svg class="tool-header-icon advance">
+                      <use xlink:href="/images/rename.svg#icon-rename"></use>
+                    </svg>
+                </span>
                 <span class="tool-header-text" th:text="#{auto-rename.header}"></span>
               </div>
               <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/misc/auto-rename'}">
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 3e64fda51..19ced3d84 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -27,96 +27,84 @@
                     th:placeholder="#{multiTool.uploadPrompts}">
                 </div>
                 <div class="mt-action-btn">
-                  <button class="btn btn-primary" onclick="addFiles()">
+                  <button class="btn btn-primary" th:title="#{multiTool.addFile}" onclick="addFiles()">
                     <span class="material-symbols-rounded">
                       add
                     </span>
-                    <span class="btn-tooltip" th:text="#{multiTool.addFile}"></span>
                   </button>
-                  <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
+                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateLeft}"
+                    onclick="rotateAll(-90)" disabled>
                     <span class="material-symbols-rounded">
                       rotate_left
                     </span>
-                    <span class="btn-tooltip" th:text="#{multiTool.rotateLeft}"></span>
                   </button>
-                  <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
+                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateRight}"
+                    onclick="rotateAll(90)" disabled>
                     <span class="material-symbols-rounded">
                       rotate_right
                     </span>
-                    <span class="btn-tooltip" th:text="#{multiTool.rotateRight}"></span>
                   </button>
-                  <button class="btn btn-secondary enable-on-file" onclick="splitAll()" disabled>
+                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.split}" onclick="splitAll()"
+                    disabled>
                     <span class="material-symbols-rounded">
                       cut
                     </span>
-                    <span class="btn-tooltip" th:text="#{multiTool.split}"></span>
                   </button>
-                  <button class="btn btn-secondary enable-on-file" onclick="addFilesBlankAll()" disabled>
+                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.insertPageBreak}"
+                    onclick="addFilesBlankAll()" disabled>
                     <span class="material-symbols-rounded">
                       insert_page_break
                     </span>
-                    <span class="btn-tooltip" th:text="#{multiTool.insertPageBreak}"></span>
                   </button>
-                  <button id="undo-btn" class="btn btn-secondary" onclick="undo()" disabled>
+                  <button id="undo-btn" th:title="#{multiTool.undo}" class="btn btn-secondary" onclick="undo()"
+                    disabled>
                     <span class="material-symbols-rounded">
                       undo
                     </span>
-                    <span class="btn-tooltip">
-                      <div th:text="#{multiTool.undo}"></div>
-                      <div class="text-uppercase" th:text="'(CTRL + Z)'"></div>
-                    </span>
                   </button>
 
-                  <button id="redo-btn" class="btn btn-secondary" onclick="redo()" disabled>
+                  <button id="redo-btn" class="btn btn-secondary" th:title="#{multiTool.redo}" onclick="redo()"
+                    disabled>
                     <span class="material-symbols-rounded">
                       redo
                     </span>
-                    <span class="btn-tooltip">
-                      <div th:text="#{multiTool.redo}"></div>
-                      <div class="text-uppercase" th:text="'(CTRL + Y)'"></div>
-                    </span>
                   </button>
                   </button>
 
-                  <button id="select-pages-container" class="btn btn-secondary enable-on-file"
-                    onclick="toggleSelectPageVisibility()" disabled>
+                  <button id="select-pages-container" th:title="#{multiTool.selectPages}"
+                    class="btn btn-secondary enable-on-file" onclick="toggleSelectPageVisibility()" disabled>
                     <span id="select-pages-button" class="material-symbols-rounded">
                       event_list
                     </span>
-                    <span class="btn-tooltip" th:text="#{multiTool.selectPages}"></span>
-
                   </button>
-                  <button id="deselect-All-Container" class="btn btn-secondary enable-on-file hidden"
-                    onclick="toggleSelectAll()" disabled>
+                  <button id="deselect-All-Container" th:title="#{multiTool.deselectAll}"
+                    class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
                     <span class="material-symbols-rounded" id="deselect-icon">deselect</span>
-                    <span class="btn-tooltip" th:text="#{multiTool.deselectAll}"></span>
                   </button>
-                  <button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
-                    onclick="toggleSelectAll()" disabled>
+                  <button id="select-All-Container" th:title="#{multiTool.selectAll}"
+                    class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
                     <span class="material-symbols-rounded" id="select-icon">select_all</span>
-                    <span class="btn-tooltip" th:text="#{multiTool.selectAll}"></span>
                   </button>
                   <div class="button-container">
-                    <button id="delete-button" class="btn btn-danger delete hidden" onclick="deleteSelected()">
+                    <button id="delete-button" th:title="#{multiTool.deleteSelected}"
+                      class="btn btn-danger delete hidden" onclick="deleteSelected()">
                       <span class="material-symbols-rounded">delete</span>
-                      <span class="btn-tooltip" th:text="#{multiTool.deleteSelected}"></span>
                     </button>
                   </div>
                   <div style="margin-left:auto">
-                    <button id="export-selected-button"
+                    <button id="export-selected-button" th:title="#{multiTool.downloadSelected}"
                       style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
                       class="btn btn-primary enable-on-file hidden" onclick="exportPdf(true)" disabled>
-                      <span class="btn-tooltip" th:text="#{multiTool.downloadSelected}"></span>
                       <span class="material-symbols-rounded">
                         file_save
                       </span>
                     </button>
                     <button style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
-                      id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)" disabled>
+                      th:title="#{multiTool.downloadAll}" id="export-button" class="btn btn-primary enable-on-file"
+                      onclick="exportPdf(false)" disabled>
                       <span class="material-symbols-rounded">
                         download
                       </span>
-                      <span class="btn-tooltip" th:text="#{multiTool.downloadAll}"></span>
                     </button>
                   </div>
                 </div>
diff --git a/src/main/resources/templates/security/auto-redact.html b/src/main/resources/templates/security/auto-redact.html
index 7a4bcc5dd..26bfb39eb 100644
--- a/src/main/resources/templates/security/auto-redact.html
+++ b/src/main/resources/templates/security/auto-redact.html
@@ -13,7 +13,7 @@
           <div class="row justify-content-center">
             <div class="col-md-6 bg-card">
               <div class="tool-header">
-                <span class="material-symbols-rounded tool-header-icon security">ink_eraser</span>
+                <span class="material-symbols-rounded tool-header-icon security">playlist_remove</span>
                 <span class="tool-header-text" th:text="#{autoRedact.header}"></span>
               </div>
               <form th:action="@{'api/v1/security/auto-redact'}" method="post" enctype="multipart/form-data">
diff --git a/src/main/resources/templates/security/redact.html b/src/main/resources/templates/security/redact.html
index 2088ce4a9..961b4b135 100644
--- a/src/main/resources/templates/security/redact.html
+++ b/src/main/resources/templates/security/redact.html
@@ -31,7 +31,7 @@
     <div class="row justify-content-center">
       <div class="col-md-6 bg-card">
         <div class="tool-header">
-          <span class="material-symbols-rounded tool-header-icon security">ink_eraser</span>
+          <span class="material-symbols-rounded tool-header-icon security">playlist_remove</span>
           <span class="tool-header-text" th:text="#{redact.header}"></span>
         </div>
         <form th:action="@{'api/v1/security/redact'}" method="post" enctype="multipart/form-data">
@@ -56,7 +56,7 @@
         </form>
       </div>
     </div>
-    </div>
+  </div>
 
   <div id="pageBasedRedactionOverlay" class="d-none col-md-4 row justify-content-center align-content-center">
     <div class="bg-card">
@@ -86,25 +86,19 @@
       <div id="toolbarSidebar">
         <div id="toolbarSidebarLeft">
           <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
-            <button id="viewThumbnail" class="toolbarButton toggled toolbar-btn-hover" tabindex="2"
+            <button id="viewThumbnail" th:title="#{redact.showThumbnails}" class="toolbarButton toggled" tabindex="2"
               data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
-              <span class="btn-tooltip" th:text="#{redact.showThumbnails}"></span>
             </button>
-            <button id="viewOutline" class="toolbarButton toolbar-btn-hover"
-              tabindex="3"
+            <button id="viewOutline" th:title="#{redact.showDocumentOutline}" class="toolbarButton" tabindex="3"
               data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false"
               aria-controls="outlineView">
-              <span class="btn-tooltip" th:text="#{redact.showDocumentOutline}"></span>
             </button>
-            <button id="viewAttachments" class="d-none toolbarButton" tabindex="4"
+            <button id="viewAttachments" th:title="#{redact.showAttachments}" class="d-none toolbarButton" tabindex="4"
               data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
-              <span class="btn-tooltip" th:text="#{redact.showAttachments}"></span>
               <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
             </button>
-            <button id="viewLayers" class="d-none toolbarButton"
-              tabindex="5"
+            <button id="viewLayers" th:title="#{redact.showLayers}" class="d-none toolbarButton" tabindex="5"
               data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
-              <span class="btn-tooltip" th:text="#{redact.showLayers}"></span>
               <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
             </button>
           </div>
@@ -114,9 +108,8 @@
           <div id="outlineOptionsContainer">
             <div class="verticalToolbarSeparator"></div>
 
-            <button id="currentOutlineItem" class="toolbarButton" disabled="disabled"
-              tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
-              <span class="btn-tooltip" th:text="#{redact.findCurrentOutlineItem}"></span>
+            <button id="currentOutlineItem" th:title="#{redact.findCurrentOutlineItem}" class="toolbarButton"
+              disabled="disabled" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
             </button>
           </div>
         </div>
@@ -375,8 +368,8 @@
                 </button>
               </div>
               <button id="sidebarToggle" class="toolbarButton mt-2" tabindex="11"
-                data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
-                <span class="btn-tooltip" th:text="#{redact.toggleSidebar}"></span>
+                data-l10n-id="pdfjs-toggle-sidebar-button" th:title="#{redact.toggleSidebar}" aria-expanded="false"
+                aria-controls="sidebarContainer">
               </button>
               <div class="toolbarButtonSpacer d-none"></div>
               <button id="viewFind" class="d-none toolbarButton" title="Find in Document" tabindex="12"
@@ -384,14 +377,12 @@
                 <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
               </button>
               <div class="splitToolbarButton hiddenSmallView">
-                <button class="toolbarButton btn-secondary toolbar-btn-hover" id="previous" tabindex="13"
-                  data-l10n-id="pdfjs-previous-button">
-                  <span class="btn-tooltip" th:text="#{redact.previousPage}"></span>
+                <button class="toolbarButton btn-secondary" th:title="#{redact.previousPage}" id="previous"
+                  tabindex="13" data-l10n-id="pdfjs-previous-button">
                 </button>
                 <div class="splitToolbarButtonSeparator d-none"></div>
-                <button class="toolbarButton btn-secondary toolbar-btn-hover" id="next" tabindex="14"
+                <button class="toolbarButton btn-secondary" th:title="#{redact.nextPage}" id="next" tabindex="14"
                   data-l10n-id="pdfjs-next-button">
-                  <span class="btn-tooltip" th:text="#{redact.nextPage}"></span>
                 </button>
               </div>
               <span class="loadingInput start">
@@ -400,100 +391,91 @@
               </span>
               <span id="numPages" class="toolbarLabel"></span>
               <img class="main-icon user-select-none" th:src="@{'/favicon.svg'}" alt="icon">
+            </div>
+            <div id="toolbarViewerMiddle">
+              <div class="splitToolbarButton">
+                <button id="zoomOut" th:title="#{redact.zoomOut}" class="toolbarButton btn-primary" tabindex="21"
+                  data-l10n-id="pdfjs-zoom-out-button">
+                </button>
+                <div class="splitToolbarButtonSeparator"></div>
+                <button id="zoomIn" th:title="#{redact.zoomIn}" class="toolbarButton btn-primary" tabindex="22"
+                  data-l10n-id="pdfjs-zoom-in-button">
+                </button>
               </div>
-              <div id="toolbarViewerMiddle">
-                <div class="splitToolbarButton">
-                  <button id="zoomOut" class="toolbarButton btn-primary toolbar-btn-hover" tabindex="21"
-                    data-l10n-id="pdfjs-zoom-out-button">
-                    <span class="btn-tooltip" th:text="#{redact.zoomOut}"></span>
-                  </button>
-                  <div class="splitToolbarButtonSeparator"></div>
-                  <button id="zoomIn" class="toolbarButton btn-primary toolbar-btn-hover" tabindex="22"
-                    data-l10n-id="pdfjs-zoom-in-button">
-                    <span class="btn-tooltip" th:text="#{redact.zoomIn}"></span>
-                  </button>
-                </div>
-                <span id="scaleSelectContainer" class="dropdownToolbarButton">
-                  <select id="scaleSelect" tabindex="23" data-l10n-id="pdfjs-zoom-select">
-                    <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">
-                      Automatic Zoom</option>
-                    <option id="pageActualOption" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">
-                      Actual Size</option>
-                    <option id="pageFitOption" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page
-                      Fit
-                    </option>
-                    <option id="pageWidthOption" value="page-width" data-l10n-id="pdfjs-page-scale-width">
-                      Page Width</option>
-                    <option id="customScaleOption" value="custom" disabled="disabled" hidden="true"
-                      data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
-                    <option value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>
-                      50%</option>
-                    <option value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%
-                    </option>
-                    <option value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>
-                      100%</option>
-                    <option value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%
-                    </option>
-                    <option value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%
-                    </option>
-                    <option value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>
-                      200%</option>
-                    <option value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>
-                      300%</option>
-                    <option value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>
-                      400%</option>
-                  </select>
+              <span id="scaleSelectContainer" class="dropdownToolbarButton">
+                <select id="scaleSelect" tabindex="23" data-l10n-id="pdfjs-zoom-select">
+                  <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">
+                    Automatic Zoom</option>
+                  <option id="pageActualOption" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">
+                    Actual Size</option>
+                  <option id="pageFitOption" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page
+                    Fit
+                  </option>
+                  <option id="pageWidthOption" value="page-width" data-l10n-id="pdfjs-page-scale-width">
+                    Page Width</option>
+                  <option id="customScaleOption" value="custom" disabled="disabled" hidden="true"
+                    data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
+                  <option value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>
+                    50%</option>
+                  <option value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%
+                  </option>
+                  <option value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>
+                    100%</option>
+                  <option value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%
+                  </option>
+                  <option value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%
+                  </option>
+                  <option value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>
+                    200%</option>
+                  <option value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>
+                    300%</option>
+                  <option value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>
+                    400%</option>
+                </select>
+              </span>
+            </div>
+            <div id="redactionsToolbarViewer" class="splitToolbarButton d-flex">
+              <button id="man-text-select-redact" th:title="#{redact.textBasedRedaction}" class="btn-primary"
+                tabindex="22">
+                <span id="text-selection" class="material-symbols-rounded user-select-none pe-none">text_select_start
                 </span>
-              </div>
-              <div id="redactionsToolbarViewer" class="splitToolbarButton d-flex">
-                <button id="man-text-select-redact" class="btn-primary"  tabindex="22">
-                  <span class="btn-tooltip" th:text="#{redact.textBasedRedaction}"></span>
-                  <span id="text-selection" class="material-symbols-rounded user-select-none pe-none">text_select_start
-                  </span>
-                </button>
-                <button id="man-shape-redact" class="btn-primary" tabindex="22">
-                  <span class="btn-tooltip" th:text="#{redact.boxRedaction}"></span>
-                  <span id="shape-selection" class="material-symbols-rounded user-select-none pe-none">pageless
-                  </span>
-                </button>
-                <button id="redactionsPaletteContainer" class="btn-primary">
-                  <span class="btn-tooltip" th:text="#{redact.colourPicker}"></span>
-                  <label id="redactions-palette" class="material-symbols-rounded palette-color text-center"
-                    style="--palette-color: #000000;">
-                    palette
-                    <input type="color" name="color-picker">
-                  </label>
-                </button>
-                <button id="apply-redaction" class="btn-success d-none" disabled>
-                  <span class="btn-tooltip" th:text="#{redact.applyChanges}"></span>
-                  <span id="apply-redaction-icon" class="material-symbols-rounded">
-                    check
-                  </span>
-                </button>
+              </button>
+              <button id="man-shape-redact" th:title="#{redact.boxRedaction}" class="btn-primary" tabindex="22">
+                <span id="shape-selection" class="material-symbols-rounded user-select-none pe-none">pageless
+                </span>
+              </button>
+              <button id="redactionsPaletteContainer" th:title="#{redact.colourPicker}" class="btn-primary">
+                <label id="redactions-palette" class="material-symbols-rounded palette-color text-center"
+                  style="--palette-color: #000000;">
+                  palette
+                  <input type="color" name="color-picker">
+                </label>
+              </button>
+              <button id="apply-redaction" th:title="#{redact.applyChanges}" class="btn-success d-none" disabled>
+                <span id="apply-redaction-icon" class="material-symbols-rounded">
+                  check
+                </span>
+              </button>
             </div>
             <div id="toolbarViewerRight">
               <div class="splitToolbarButton">
                 <button id="pdfToImageBtn" class="btn-success">
-                  <span class="btn-tooltip" th:text="#{redact.convertPDFToImageLabel}"></span>
-                  <span id="pdfToImageBtnIcon" class="material-symbols-rounded">
+                  <span id="pdfToImageBtnIcon" th:title="#{redact.convertPDFToImageLabel}"
+                    class="material-symbols-rounded">
                     image
                   </span>
                 </button>
                 <button id="pageBasedRedactionBtn" class="btn-primary">
-                  <span class="btn-tooltip" th:text="#{redact.pageBasedRedaction}"></span>
-                  <span id="pageBasedRedactionBtnIcon" class="material-symbols-rounded">
+                  <span id="pageBasedRedactionBtnIcon" th:title="#{redact.pageBasedRedaction}"
+                    class="material-symbols-rounded">
                     document_scanner
                   </span>
                 </button>
                 <button id="uploadBtn" class="btn-primary">
-                  <span class="btn-tooltip" th:text="#{redact.upload}"></span>
-                  <span id="uploadBtnIcon" class="material-symbols-rounded">
-                    upload
-                  </span>
+                  <span id="uploadBtnIcon" class="material-symbols-rounded" th:title="#{redact.upload}"> upload </span>
                 </button>
-                <button id="downloadBtn"  class="btn-primary">
-                  <span class="btn-tooltip" th:text="#{redact.export}"></span>
-                  <span id="downloadBtnIcon" class="material-symbols-rounded">
+                <button id="downloadBtn" class="btn-primary">
+                  <span id="downloadBtnIcon" th:title="#{redact.export}" class="material-symbols-rounded">
                     download
                   </span>
                 </button>
@@ -554,6 +536,7 @@
 
       <div id="viewerContainer" tabindex="0">
         <div id="viewer" class="pdfViewer"></div>
+        <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
       </div>
     </div> <!-- mainContainer -->
 
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 46a1588fb..7d8b8b66c 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -149,7 +149,7 @@
             <script th:src="@{'/js/sign/signature-canvas.js'}"></script>
             <!-- draggables box -->
             <div class="draggable-buttons-box ignore-rtl">
-              <button class="btn btn-outline-secondary"
+              <button class="btn btn-outline-secondary" th:title="#{sign.delete}"
                 onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())"
                 style="border-color: #C02223; color: #C02223; background: rgba(255, 0, 0, 0.1)">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
@@ -159,14 +159,12 @@
                   <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>
-                <span class="btn-tooltip" th:text="#{sign.delete}"></span>
               </button>
-              <button class="btn btn-outline-secondary"
+              <button class="btn btn-outline-secondary" th:title="#{sign.addToAll}"
                 onclick="DraggableUtils.addAllPagesDraggableCanvas(DraggableUtils.getLastInteracted())">
                 <span class="material-symbols-rounded">
                   content_copy
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.addToAll}"></span>
               </button>
               <div id="rotation-controls" class="align-items-center" style="display: none;">
                 <div class="input-with-icon">
@@ -177,49 +175,44 @@
                     style="width: 6rem" />
                 </div>
               </div>
-              <button id="ratioToggleBtn" class="btn btn-outline-secondary"
+              <button id="ratioToggleBtn" th:title="#{sign.maintainRatio}" class="btn btn-outline-secondary"
                 onclick="DraggableUtils.toggleMaintainRatio()">
                 <span class="material-symbols-rounded">
                   Aspect_Ratio
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.maintainRatio}"></span>
               </button>
-              <button class="btn btn-outline-secondary" onclick="goToFirstOrLastPage(false)" style="margin-left:auto">
+              <button class="btn btn-outline-secondary" th:title="#{sign.first}" onclick="goToFirstOrLastPage(false)"
+                style="margin-left:auto">
                 <span class="material-symbols-rounded">
                   keyboard_double_arrow_left
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.first}"></span>
               </button>
-              <button class="btn btn-outline-secondary" id="incrementPage"
+              <button class="btn btn-outline-secondary" th:title="#{sign.previous}" id="incrementPage"
                 onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-chevron-left" viewBox="0 0 16 16">
                   <path fill-rule="evenodd"
                     d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                 </svg>
-                <span class="btn-tooltip" th:text="#{sign.previous}"></span>
               </button>
-              <button class="btn btn-outline-secondary" id="decrementPage"
+              <button class="btn btn-outline-secondary" id="decrementPage" th:title="#{sign.next}"
                 onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-chevron-right" viewBox="0 0 16 16">
                   <path fill-rule="evenodd"
                     d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                 </svg>
-                <span class="btn-tooltip" th:text="#{sign.next}"></span>
               </button>
-              <button class="btn btn-outline-secondary" onclick="goToFirstOrLastPage(true)">
+              <button class="btn btn-outline-secondary" th:title="#{sign.last}" onclick="goToFirstOrLastPage(true)">
                 <span class="material-symbols-rounded">
                   keyboard_double_arrow_right
                 </span>
-                <span class="btn-tooltip" th:text="#{sign.last}"></span>
               </button>
-              <button id="download-pdf" class="btn btn-outline-secondary"
+              <button id="download-pdf" th:title="#{downloadPdf}" class="btn btn-outline-secondary"
                 style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)">
                 <span class="material-symbols-rounded">
                   download
                 </span>
-                <span class="btn-tooltip" th:text="#{downloadPdf}"></span>
               </button>
             </div>
             <div id="box-drag-container" class="show-on-file-selected">
diff --git a/src/main/resources/templates/view-pdf.html b/src/main/resources/templates/view-pdf.html
index c00f816b8..c9146fc70 100644
--- a/src/main/resources/templates/view-pdf.html
+++ b/src/main/resources/templates/view-pdf.html
@@ -20,505 +20,611 @@ Adobe CMap resources are covered by their own copyright but the same license:
 
 See https://github.com/adobe-type-tools/cmap-resources
 -->
-<html dir="ltr" mozdisallowselectionprint th:lang="${#locale.language}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <meta name="google" content="notranslate">
-    <title>PDF.js viewer</title>
+<html dir="ltr" mozdisallowselectionprint th:lang="${#locale.language}" th:data-language="${#locale.toString()}"
+  xmlns:th="https://www.thymeleaf.org">
 
-    <!-- Bootstrap -->
-    <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
-    <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{redact.title}, header=#{redact.header})}"></th:block>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <meta name="google" content="notranslate">
+  <title>PDF.js viewer</title>
 
-    <link rel="stylesheet" th:href="@{'/css/theme/componentes.css'}">
-    <link rel="stylesheet" th:href="@{'/css/navbar.css'}">
+  <!-- Bootstrap -->
+  <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
+  <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
 
-    <!-- This snippet is used in production (included from view-pdf.html) -->
-    <link rel="resource" type="application/l10n" th:href="@{'/pdfjs-legacy/locale/locale.json'}">
-    <script th:src="@{'/pdfjs-legacy/pdf.mjs'}" type="module"></script>
+  <link rel="stylesheet" th:href="@{'/css/theme/componentes.css'}">
+  <link rel="stylesheet" th:href="@{'/css/navbar.css'}">
 
-    <link rel="stylesheet" th:href="@{'/pdfjs-legacy/css/viewer.css'}">
-    <script th:src="@{'/pdfjs-legacy/js/viewer.mjs'}" type="module"></script>
-  </head>
+  <!-- This snippet is used in production (included from view-pdf.html) -->
+  <link rel="resource" type="application/l10n" th:href="@{'/pdfjs-legacy/locale/locale.json'}">
+  <script th:src="@{'/pdfjs-legacy/pdf.mjs'}" type="module"></script>
 
-  <body tabindex="1">
-    <div id="outerContainer">
+  <link rel="stylesheet" th:href="@{'/pdfjs-legacy/css/viewer.css'}">
+  <script th:src="@{'/pdfjs-legacy/js/viewer.mjs'}" type="module"></script>
+</head>
 
-      <div id="sidebarContainer">
-        <div id="toolbarSidebar">
-          <div id="toolbarSidebarLeft">
-            <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
-              <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
-                 <span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
-              </button>
-              <button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false" aria-controls="outlineView">
-                 <span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span>
-              </button>
-              <button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
-                 <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
-              </button>
-              <button id="viewLayers" class="toolbarButton" title="Show Layers (double-click to reset all layers to the default state)" tabindex="5" data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
-                 <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
-              </button>
-            </div>
-          </div>
-
-          <div id="toolbarSidebarRight">
-            <div id="outlineOptionsContainer">
-              <div class="verticalToolbarSeparator"></div>
-
-              <button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
-                <span data-l10n-id="pdfjs-current-outline-item-button-label">Current Outline Item</span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div id="sidebarContent">
-          <div id="thumbnailView">
-          </div>
-          <div id="outlineView" class="hidden">
-          </div>
-          <div id="attachmentsView" class="hidden">
-          </div>
-          <div id="layersView" class="hidden">
-          </div>
-        </div>
-        <div id="sidebarResizer"></div>
-      </div>  <!-- sidebarContainer -->
-
-      <div id="mainContainer">
-        <div class="findbar hidden doorHanger" id="findbar">
-          <div id="findbarInputContainer">
-            <span class="loadingInput end">
-              <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
-            </span>
-            <div class="splitToolbarButton">
-              <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="pdfjs-find-previous-button">
-                <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
-              </button>
-              <div class="splitToolbarButtonSeparator"></div>
-              <button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="pdfjs-find-next-button">
-                <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
-              </button>
-            </div>
-          </div>
-
-          <div id="findbarOptionsOneContainer">
-            <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
-            <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight All</label>
-            <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
-            <label for="findMatchCase" class="toolbarLabel" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match Case</label>
-          </div>
-          <div id="findbarOptionsTwoContainer">
-            <input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96">
-            <label for="findMatchDiacritics" class="toolbarLabel" data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match Diacritics</label>
-            <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97">
-            <label for="findEntireWord" class="toolbarLabel" data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole Words</label>
-          </div>
-
-          <div id="findbarMessageContainer" aria-live="polite">
-            <span id="findResultsCount" class="toolbarLabel"></span>
-            <span id="findMsg" class="toolbarLabel"></span>
-          </div>
-        </div>  <!-- findbar -->
-
-        <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
-          <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
-            <div id="editorHighlightColorPicker" class="colorPicker">
-              <span id="highlightColorPickerLabel" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
-            </div>
-            <div id="editorHighlightThickness">
-              <label for="editorFreeHighlightThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
-              <div class="thicknessPicker">
-                <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider" data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1" tabindex="101">
-              </div>
-            </div>
-            <div id="editorHighlightVisibility">
-              <div class="divider"></div>
-              <div class="toggler">
-                <label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
-                <button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
-          <div class="editorParamsToolbarContainer">
-            <div class="editorParamsSetter">
-              <label for="editorFreeTextColor" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
-              <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="103">
-            </div>
-            <div class="editorParamsSetter">
-              <label for="editorFreeTextFontSize" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
-              <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100" step="1" tabindex="104">
-            </div>
-          </div>
-        </div>
-
-        <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
-          <div class="editorParamsToolbarContainer">
-            <div class="editorParamsSetter">
-              <label for="editorInkColor" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
-              <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="105">
-            </div>
-            <div class="editorParamsSetter">
-              <label for="editorInkThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
-              <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1" tabindex="106">
-            </div>
-            <div class="editorParamsSetter">
-              <label for="editorInkOpacity" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
-              <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1" tabindex="107">
-            </div>
-          </div>
-        </div>
-
-        <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
-          <div class="editorParamsToolbarContainer">
-            <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="108" data-l10n-id="pdfjs-editor-stamp-add-image-button">
-              <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add image</span>
+<body tabindex="1" style="overflow: hidden;">
+  <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+  <div id="outerContainer">
+    <div id="sidebarContainer">
+      <div id="toolbarSidebar">
+        <div id="toolbarSidebarLeft">
+          <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
+            <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2"
+              data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
+              <span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
+            </button>
+            <button id="viewOutline" class="toolbarButton"
+              title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3"
+              data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false"
+              aria-controls="outlineView">
+              <span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span>
+            </button>
+            <button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4"
+              data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
+              <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
+            </button>
+            <button id="viewLayers" class="toolbarButton"
+              title="Show Layers (double-click to reset all layers to the default state)" tabindex="5"
+              data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
+              <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
             </button>
           </div>
         </div>
 
-        <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
-          <div id="secondaryToolbarButtonContainer">
-            <button id="secondaryOpenFile" class="secondaryToolbarButton visibleMediumView" title="Open File" tabindex="51" data-l10n-id="pdfjs-open-file-button">
-              <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
-            </button>
+        <div id="toolbarSidebarRight">
+          <div id="outlineOptionsContainer">
+            <div class="verticalToolbarSeparator"></div>
 
-            <button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="52" data-l10n-id="pdfjs-print-button">
-              <span data-l10n-id="pdfjs-print-button-label">Print</span>
-            </button>
-
-            <button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Save" tabindex="53" data-l10n-id="pdfjs-save-button">
-              <span data-l10n-id="pdfjs-save-button-label">Save</span>
-            </button>
-
-            <div class="horizontalToolbarSeparator"></div>
-
-            <button id="presentationMode" class="secondaryToolbarButton" title="Switch to Presentation Mode" tabindex="54" data-l10n-id="pdfjs-presentation-mode-button">
-              <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation Mode</span>
-            </button>
-
-            <a href="#" id="viewBookmark" class="secondaryToolbarButton" title="Current Page (View URL from Current Page)" tabindex="55" data-l10n-id="pdfjs-bookmark-button">
-              <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
-            </a>
-
-            <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>
-
-            <button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56" data-l10n-id="pdfjs-first-page-button">
-              <span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
-            </button>
-            <button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57" data-l10n-id="pdfjs-last-page-button">
-              <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
-            </button>
-
-            <div class="horizontalToolbarSeparator"></div>
-
-            <button id="pageRotateCw" class="secondaryToolbarButton" title="Rotate Clockwise" tabindex="58" data-l10n-id="pdfjs-page-rotate-cw-button">
-              <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate Clockwise</span>
-            </button>
-            <button id="pageRotateCcw" class="secondaryToolbarButton" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="pdfjs-page-rotate-ccw-button">
-              <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate Counterclockwise</span>
-            </button>
-
-            <div class="horizontalToolbarSeparator"></div>
-
-            <div id="cursorToolButtons" role="radiogroup">
-              <button id="cursorSelectTool" class="secondaryToolbarButton toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio" aria-checked="true">
-                <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text Selection Tool</span>
-              </button>
-              <button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61" data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio" aria-checked="false">
-                <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand Tool</span>
-              </button>
-            </div>
-
-            <div class="horizontalToolbarSeparator"></div>
-
-            <div id="scrollModeButtons" role="radiogroup">
-              <button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62" data-l10n-id="pdfjs-scroll-page-button" role="radio" aria-checked="false">
-                <span data-l10n-id="pdfjs-scroll-page-button-label">Page Scrolling</span>
-              </button>
-              <button id="scrollVertical" class="secondaryToolbarButton toggled" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="pdfjs-scroll-vertical-button" role="radio" aria-checked="true">
-                <span data-l10n-id="pdfjs-scroll-vertical-button-label" >Vertical Scrolling</span>
-              </button>
-              <button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="pdfjs-scroll-horizontal-button" role="radio" aria-checked="false">
-                <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal Scrolling</span>
-              </button>
-              <button id="scrollWrapped" class="secondaryToolbarButton" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="pdfjs-scroll-wrapped-button" role="radio" aria-checked="false">
-                <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped Scrolling</span>
-              </button>
-            </div>
-
-            <div class="horizontalToolbarSeparator"></div>
-
-            <div id="spreadModeButtons" role="radiogroup">
-              <button id="spreadNone" class="secondaryToolbarButton toggled" title="Do not join page spreads" tabindex="66" data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true">
-                <span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
-              </button>
-              <button id="spreadOdd" class="secondaryToolbarButton" title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false">
-                <span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
-              </button>
-              <button id="spreadEven" class="secondaryToolbarButton" title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false">
-                <span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
-              </button>
-            </div>
-
-            <div class="horizontalToolbarSeparator"></div>
-
-            <button id="documentProperties" class="secondaryToolbarButton" title="Document Properties…" tabindex="69" data-l10n-id="pdfjs-document-properties-button" aria-controls="documentPropertiesDialog">
-              <span data-l10n-id="pdfjs-document-properties-button-label">Document Properties…</span>
+            <button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item"
+              tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
+              <span data-l10n-id="pdfjs-current-outline-item-button-label">Current Outline Item</span>
             </button>
           </div>
-        </div>  <!-- secondaryToolbar -->
+        </div>
+      </div>
+      <div id="sidebarContent">
+        <div id="thumbnailView">
+        </div>
+        <div id="outlineView" class="hidden">
+        </div>
+        <div id="attachmentsView" class="hidden">
+        </div>
+        <div id="layersView" class="hidden">
+        </div>
+      </div>
+      <div id="sidebarResizer"></div>
+    </div> <!-- sidebarContainer -->
 
-        <div class="toolbar">
-          <div id="toolbarContainer">
-            <div id="toolbarViewer">
-              <div id="toolbarViewerLeft">
-                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
-                  <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
+    <div id="mainContainer">
+      <div class="findbar hidden doorHanger" id="findbar">
+        <div id="findbarInputContainer">
+          <span class="loadingInput end">
+            <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91"
+              data-l10n-id="pdfjs-find-input" aria-invalid="false">
+          </span>
+          <div class="splitToolbarButton">
+            <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase"
+              tabindex="92" data-l10n-id="pdfjs-find-previous-button">
+              <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
+            </button>
+            <div class="splitToolbarButtonSeparator"></div>
+            <button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93"
+              data-l10n-id="pdfjs-find-next-button">
+              <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
+            </button>
+          </div>
+        </div>
+
+        <div id="findbarOptionsOneContainer">
+          <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
+          <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight
+            All</label>
+          <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
+          <label for="findMatchCase" class="toolbarLabel" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match
+            Case</label>
+        </div>
+        <div id="findbarOptionsTwoContainer">
+          <input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96">
+          <label for="findMatchDiacritics" class="toolbarLabel"
+            data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match Diacritics</label>
+          <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97">
+          <label for="findEntireWord" class="toolbarLabel" data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole
+            Words</label>
+        </div>
+
+        <div id="findbarMessageContainer" aria-live="polite">
+          <span id="findResultsCount" class="toolbarLabel"></span>
+          <span id="findMsg" class="toolbarLabel"></span>
+        </div>
+      </div> <!-- findbar -->
+
+      <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
+        <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
+          <div id="editorHighlightColorPicker" class="colorPicker">
+            <span id="highlightColorPickerLabel" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
+          </div>
+          <div id="editorHighlightThickness">
+            <label for="editorFreeHighlightThickness" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
+            <div class="thicknessPicker">
+              <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider"
+                data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1"
+                tabindex="101">
+            </div>
+          </div>
+          <div id="editorHighlightVisibility">
+            <div class="divider"></div>
+            <div class="toggler">
+              <label for="editorHighlightShowAll" class="editorParamsLabel"
+                data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
+              <button id="editorHighlightShowAll" class="toggle-button"
+                data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
+        <div class="editorParamsToolbarContainer">
+          <div class="editorParamsSetter">
+            <label for="editorFreeTextColor" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
+            <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="103">
+          </div>
+          <div class="editorParamsSetter">
+            <label for="editorFreeTextFontSize" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
+            <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100"
+              step="1" tabindex="104">
+          </div>
+        </div>
+      </div>
+
+      <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
+        <div class="editorParamsToolbarContainer">
+          <div class="editorParamsSetter">
+            <label for="editorInkColor" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
+            <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="105">
+          </div>
+          <div class="editorParamsSetter">
+            <label for="editorInkThickness" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
+            <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1"
+              tabindex="106">
+          </div>
+          <div class="editorParamsSetter">
+            <label for="editorInkOpacity" class="editorParamsLabel"
+              data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
+            <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1"
+              tabindex="107">
+          </div>
+        </div>
+      </div>
+
+      <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
+        <div class="editorParamsToolbarContainer">
+          <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="108"
+            data-l10n-id="pdfjs-editor-stamp-add-image-button">
+            <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add image</span>
+          </button>
+        </div>
+      </div>
+
+      <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
+        <div id="secondaryToolbarButtonContainer">
+          <button id="secondaryOpenFile" class="secondaryToolbarButton visibleMediumView" title="Open File"
+            tabindex="51" data-l10n-id="pdfjs-open-file-button">
+            <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
+          </button>
+
+          <button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="52"
+            data-l10n-id="pdfjs-print-button">
+            <span data-l10n-id="pdfjs-print-button-label">Print</span>
+          </button>
+
+          <button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Save" tabindex="53"
+            data-l10n-id="pdfjs-save-button">
+            <span data-l10n-id="pdfjs-save-button-label">Save</span>
+          </button>
+
+          <div class="horizontalToolbarSeparator"></div>
+
+          <button id="presentationMode" class="secondaryToolbarButton" title="Switch to Presentation Mode" tabindex="54"
+            data-l10n-id="pdfjs-presentation-mode-button">
+            <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation Mode</span>
+          </button>
+
+          <a href="#" id="viewBookmark" class="secondaryToolbarButton" title="Current Page (View URL from Current Page)"
+            tabindex="55" data-l10n-id="pdfjs-bookmark-button">
+            <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
+          </a>
+
+          <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>
+
+          <button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56"
+            data-l10n-id="pdfjs-first-page-button">
+            <span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
+          </button>
+          <button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57"
+            data-l10n-id="pdfjs-last-page-button">
+            <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
+          </button>
+
+          <div class="horizontalToolbarSeparator"></div>
+
+          <button id="pageRotateCw" class="secondaryToolbarButton" title="Rotate Clockwise" tabindex="58"
+            data-l10n-id="pdfjs-page-rotate-cw-button">
+            <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate Clockwise</span>
+          </button>
+          <button id="pageRotateCcw" class="secondaryToolbarButton" title="Rotate Counterclockwise" tabindex="59"
+            data-l10n-id="pdfjs-page-rotate-ccw-button">
+            <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate Counterclockwise</span>
+          </button>
+
+          <div class="horizontalToolbarSeparator"></div>
+
+          <div id="cursorToolButtons" role="radiogroup">
+            <button id="cursorSelectTool" class="secondaryToolbarButton toggled" title="Enable Text Selection Tool"
+              tabindex="60" data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio" aria-checked="true">
+              <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text Selection Tool</span>
+            </button>
+            <button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61"
+              data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio" aria-checked="false">
+              <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand Tool</span>
+            </button>
+          </div>
+
+          <div class="horizontalToolbarSeparator"></div>
+
+          <div id="scrollModeButtons" role="radiogroup">
+            <button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62"
+              data-l10n-id="pdfjs-scroll-page-button" role="radio" aria-checked="false">
+              <span data-l10n-id="pdfjs-scroll-page-button-label">Page Scrolling</span>
+            </button>
+            <button id="scrollVertical" class="secondaryToolbarButton toggled" title="Use Vertical Scrolling"
+              tabindex="63" data-l10n-id="pdfjs-scroll-vertical-button" role="radio" aria-checked="true">
+              <span data-l10n-id="pdfjs-scroll-vertical-button-label">Vertical Scrolling</span>
+            </button>
+            <button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64"
+              data-l10n-id="pdfjs-scroll-horizontal-button" role="radio" aria-checked="false">
+              <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal Scrolling</span>
+            </button>
+            <button id="scrollWrapped" class="secondaryToolbarButton" title="Use Wrapped Scrolling" tabindex="65"
+              data-l10n-id="pdfjs-scroll-wrapped-button" role="radio" aria-checked="false">
+              <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped Scrolling</span>
+            </button>
+          </div>
+
+          <div class="horizontalToolbarSeparator"></div>
+
+          <div id="spreadModeButtons" role="radiogroup">
+            <button id="spreadNone" class="secondaryToolbarButton toggled" title="Do not join page spreads"
+              tabindex="66" data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true">
+              <span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
+            </button>
+            <button id="spreadOdd" class="secondaryToolbarButton"
+              title="Join page spreads starting with odd-numbered pages" tabindex="67"
+              data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false">
+              <span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
+            </button>
+            <button id="spreadEven" class="secondaryToolbarButton"
+              title="Join page spreads starting with even-numbered pages" tabindex="68"
+              data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false">
+              <span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
+            </button>
+          </div>
+
+          <div class="horizontalToolbarSeparator"></div>
+
+          <button id="documentProperties" class="secondaryToolbarButton" title="Document Properties…" tabindex="69"
+            data-l10n-id="pdfjs-document-properties-button" aria-controls="documentPropertiesDialog">
+            <span data-l10n-id="pdfjs-document-properties-button-label">Document Properties…</span>
+          </button>
+        </div>
+      </div> <!-- secondaryToolbar -->
+
+      <div class="toolbar">
+        <div id="toolbarContainer">
+          <div id="toolbarViewer">
+            <div id="toolbarViewerLeft">
+              <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11"
+                data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
+                <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
+              </button>
+              <div class="toolbarButtonSpacer"></div>
+              <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12"
+                data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
+                <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
+              </button>
+              <div class="splitToolbarButton hiddenSmallView">
+                <button class="toolbarButton" title="Previous Page" id="previous" tabindex="13"
+                  data-l10n-id="pdfjs-previous-button">
+                  <span data-l10n-id="pdfjs-previous-button-label">Previous</span>
                 </button>
-                <div class="toolbarButtonSpacer"></div>
-                <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
-                  <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
+                <div class="splitToolbarButtonSeparator"></div>
+                <button class="toolbarButton" title="Next Page" id="next" tabindex="14"
+                  data-l10n-id="pdfjs-next-button">
+                  <span data-l10n-id="pdfjs-next-button-label">Next</span>
                 </button>
-                <div class="splitToolbarButton hiddenSmallView">
-                  <button class="toolbarButton" title="Previous Page" id="previous" tabindex="13" data-l10n-id="pdfjs-previous-button">
-                    <span data-l10n-id="pdfjs-previous-button-label">Previous</span>
-                  </button>
-                  <div class="splitToolbarButtonSeparator"></div>
-                  <button class="toolbarButton" title="Next Page" id="next" tabindex="14" data-l10n-id="pdfjs-next-button">
-                    <span data-l10n-id="pdfjs-next-button-label">Next</span>
-                  </button>
-                </div>
-                <span class="loadingInput start">
-                  <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
-                </span>
-                <span id="numPages" class="toolbarLabel"></span>
-                <a class="navbar-brand hiddenMediumView" th:href="@{'/'}" tabindex="16" >
-                  <img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon" style="max-height: 1.6rem; width: auto;">
-                  <span class="icon-text" th:text="${@appName}">Stirling PDF</span>
+              </div>
+              <span class="loadingInput start">
+                <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15"
+                  data-l10n-id="pdfjs-page-input" autocomplete="off">
+              </span>
+              <span id="numPages" class="toolbarLabel"></span>
+              <a class="navbar-brand hiddenMediumView" th:href="@{'/'}" tabindex="16">
+                <img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon" style="max-height: 1.6rem; width: auto;">
+                <span class="icon-text" th:text="${@appName}">Stirling PDF</span>
+              </a>
+            </div>
+            <div id="toolbarViewerRight">
+              <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
+                <button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight"
+                  role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31"
+                  data-l10n-id="pdfjs-editor-highlight-button">
+                  <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
+                </button>
+                <a id="backToHome" class="toolbarButton hiddenMediumView" title="Back to Main Page" role="radio"
+                  aria-checked="false" tabindex="32" th:href="@{'/'}">
+                  <span data-l10n-id="pdfjs-open-file-button-label">Back to Main Page</span>
                 </a>
-              </div>
-              <div id="toolbarViewerRight">
-                <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
-                  <button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
-                    <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
-                  </button>
-                  <a id="backToHome" class="toolbarButton hiddenMediumView" title="Back to Main Page" role="radio" aria-checked="false" tabindex="32" th:href="@{'/'}">
-                    <span data-l10n-id="pdfjs-open-file-button-label">Back to Main Page</span>
-                  </a>
-                  <button id="openFile" class="toolbarButton hiddenMediumView" title="Open File" role="radio" aria-checked="false" tabindex="33" data-l10n-id="pdfjs-open-file-button">
-                    <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
-                  </button>
-                  <button id="print" class="toolbarButton hiddenMediumView" title="Print" role="radio" aria-checked="false" tabindex="34" data-l10n-id="pdfjs-print-button">
-                    <span data-l10n-id="pdfjs-print-button-label">Print</span>
-                  </button>
-                  <button id="download" class="toolbarButton hiddenMediumView" title="Save" role="radio" aria-checked="false" tabindex="35" data-l10n-id="pdfjs-save-button">
-                    <span data-l10n-id="pdfjs-save-button-label">Save</span>
-                  </button>
-                  <button id="editorStamp" class="toolbarButton hiddenMediumView" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="36" data-l10n-id="pdfjs-editor-stamp-button">
-                    <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
-                  </button>
-                </div>
-
-                <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
-
-                <button id="editorFreeText" class="toolbarButton hiddenMediumView" title="Text" tabindex="41" data-l10n-id="pdfjs-editor-free-text-button">
-                  <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
+                <button id="openFile" class="toolbarButton hiddenMediumView" title="Open File" role="radio"
+                  aria-checked="false" tabindex="33" data-l10n-id="pdfjs-open-file-button">
+                  <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
                 </button>
-
-                <button id="editorInk" class="toolbarButton hiddenMediumView" title="Draw" tabindex="42" data-l10n-id="pdfjs-editor-ink-button">
-                  <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
+                <button id="print" class="toolbarButton hiddenMediumView" title="Print" role="radio"
+                  aria-checked="false" tabindex="34" data-l10n-id="pdfjs-print-button">
+                  <span data-l10n-id="pdfjs-print-button-label">Print</span>
                 </button>
-
-                <div class="verticalToolbarSeparator hiddenMediumView"></div>
-
-                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button">
-                  <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
+                <button id="download" class="toolbarButton hiddenMediumView" title="Save" role="radio"
+                  aria-checked="false" tabindex="35" data-l10n-id="pdfjs-save-button">
+                  <span data-l10n-id="pdfjs-save-button-label">Save</span>
+                </button>
+                <button id="editorStamp" class="toolbarButton hiddenMediumView" title="Add or edit images" role="radio"
+                  aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="36"
+                  data-l10n-id="pdfjs-editor-stamp-button">
+                  <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
                 </button>
               </div>
-              <div id="toolbarViewerMiddle">
-                <div class="splitToolbarButton">
-                  <button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21" data-l10n-id="pdfjs-zoom-out-button">
-                    <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
-                  </button>
-                  <div class="splitToolbarButtonSeparator"></div>
-                  <button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22" data-l10n-id="pdfjs-zoom-in-button">
-                    <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
-                   </button>
-                </div>
-                <span id="scaleSelectContainer" class="dropdownToolbarButton">
-                  <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="pdfjs-zoom-select">
-                    <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">Automatic Zoom</option>
-                    <option id="pageActualOption" title="" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">Actual Size</option>
-                    <option id="pageFitOption" title="" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page Fit</option>
-                    <option id="pageWidthOption" title="" value="page-width" data-l10n-id="pdfjs-page-scale-width">Page Width</option>
-                    <option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
-                    <option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>50%</option>
-                    <option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%</option>
-                    <option title="" value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>100%</option>
-                    <option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%</option>
-                    <option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%</option>
-                    <option title="" value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>200%</option>
-                    <option title="" value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>300%</option>
-                    <option title="" value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>400%</option>
-                  </select>
-                </span>
-              </div>
+
+              <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
+
+              <button id="editorFreeText" class="toolbarButton hiddenMediumView" title="Text" tabindex="41"
+                data-l10n-id="pdfjs-editor-free-text-button">
+                <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
+              </button>
+
+              <button id="editorInk" class="toolbarButton hiddenMediumView" title="Draw" tabindex="42"
+                data-l10n-id="pdfjs-editor-ink-button">
+                <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
+              </button>
+
+              <div class="verticalToolbarSeparator hiddenMediumView"></div>
+
+              <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="43"
+                data-l10n-id="pdfjs-tools-button">
+                <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
+              </button>
             </div>
-            <div id="loadingBar">
-              <div class="progress">
-                <div class="glimmer">
-                </div>
+            <div id="toolbarViewerMiddle">
+              <div class="splitToolbarButton">
+                <button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21"
+                  data-l10n-id="pdfjs-zoom-out-button">
+                  <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
+                </button>
+                <div class="splitToolbarButtonSeparator"></div>
+                <button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22"
+                  data-l10n-id="pdfjs-zoom-in-button">
+                  <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
+                </button>
               </div>
-            </div>
-          </div>
-        </div>
-
-        <div id="viewerContainer" tabindex="0">
-          <div id="viewer" class="pdfViewer"></div>
-        </div>
-      </div> <!-- mainContainer -->
-
-      <div id="dialogContainer">
-        <dialog id="passwordDialog">
-          <div class="row">
-            <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password to open this PDF file:</label>
-          </div>
-          <div class="row">
-            <input type="password" id="password" class="toolbarField">
-          </div>
-          <div class="buttonRow">
-            <button id="passwordCancel" class="dialogButton"><span data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
-            <button id="passwordSubmit" class="dialogButton"><span data-l10n-id="pdfjs-password-ok-button">OK</span></button>
-          </div>
-        </dialog>
-        <dialog id="documentPropertiesDialog">
-          <div class="row">
-            <span id="fileNameLabel" data-l10n-id="pdfjs-document-properties-file-name">File name:</span>
-            <p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="fileSizeLabel" data-l10n-id="pdfjs-document-properties-file-size">File size:</span>
-            <p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
-          </div>
-          <div class="separator"></div>
-          <div class="row">
-            <span id="titleLabel" data-l10n-id="pdfjs-document-properties-title">Title:</span>
-            <p id="titleField" aria-labelledby="titleLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="authorLabel" data-l10n-id="pdfjs-document-properties-author">Author:</span>
-            <p id="authorField" aria-labelledby="authorLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="subjectLabel" data-l10n-id="pdfjs-document-properties-subject">Subject:</span>
-            <p id="subjectField" aria-labelledby="subjectLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="keywordsLabel" data-l10n-id="pdfjs-document-properties-keywords">Keywords:</span>
-            <p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="creationDateLabel" data-l10n-id="pdfjs-document-properties-creation-date">Creation Date:</span>
-            <p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="modificationDateLabel" data-l10n-id="pdfjs-document-properties-modification-date">Modification Date:</span>
-            <p id="modificationDateField" aria-labelledby="modificationDateLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="creatorLabel" data-l10n-id="pdfjs-document-properties-creator">Creator:</span>
-            <p id="creatorField" aria-labelledby="creatorLabel">-</p>
-          </div>
-          <div class="separator"></div>
-          <div class="row">
-            <span id="producerLabel" data-l10n-id="pdfjs-document-properties-producer">PDF Producer:</span>
-            <p id="producerField" aria-labelledby="producerLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="versionLabel" data-l10n-id="pdfjs-document-properties-version">PDF Version:</span>
-            <p id="versionField" aria-labelledby="versionLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="pageCountLabel" data-l10n-id="pdfjs-document-properties-page-count">Page Count:</span>
-            <p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
-          </div>
-          <div class="row">
-            <span id="pageSizeLabel" data-l10n-id="pdfjs-document-properties-page-size">Page Size:</span>
-            <p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
-          </div>
-          <div class="separator"></div>
-          <div class="row">
-            <span id="linearizedLabel" data-l10n-id="pdfjs-document-properties-linearized">Fast Web View:</span>
-            <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
-          </div>
-          <div class="buttonRow">
-            <button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
-          </div>
-        </dialog>
-        <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
-          <div id="altTextContainer" class="mainContainer">
-            <div id="overallDescription">
-              <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an option</span>
-              <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
-                Alt text (alternative text) helps when people can’t see the image or when it doesn’t load.
+              <span id="scaleSelectContainer" class="dropdownToolbarButton">
+                <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="pdfjs-zoom-select">
+                  <option id="pageAutoOption" title="" value="auto" selected="selected"
+                    data-l10n-id="pdfjs-page-scale-auto">Automatic Zoom</option>
+                  <option id="pageActualOption" title="" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">
+                    Actual Size</option>
+                  <option id="pageFitOption" title="" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page Fit
+                  </option>
+                  <option id="pageWidthOption" title="" value="page-width" data-l10n-id="pdfjs-page-scale-width">Page
+                    Width</option>
+                  <option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"
+                    data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
+                  <option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>
+                    50%</option>
+                  <option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent"
+                    data-l10n-args='{ "scale": 75 }'>75%</option>
+                  <option title="" value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>
+                    100%</option>
+                  <option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent"
+                    data-l10n-args='{ "scale": 125 }'>125%</option>
+                  <option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent"
+                    data-l10n-args='{ "scale": 150 }'>150%</option>
+                  <option title="" value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>
+                    200%</option>
+                  <option title="" value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>
+                    300%</option>
+                  <option title="" value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>
+                    400%</option>
+                </select>
               </span>
             </div>
-            <div id="addDescription">
-              <div class="radio">
-                <div class="radioButton">
-                  <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0" aria-describedby="descriptionAreaLabel" checked>
-                  <label for="descriptionButton" data-l10n-id="pdfjs-editor-alt-text-add-description-label">Add a description</label>
-                </div>
-                <div class="radioLabel">
-                  <span id="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-add-description-description">
-                    Aim for 1-2 sentences that describe the subject, setting, or actions.
-                  </span>
-                </div>
-              </div>
-              <div class="descriptionArea">
-                <textarea id="descriptionTextarea" placeholder="For example, “A young man sits down at a table to eat a meal”" aria-labelledby="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-textarea" tabindex="0"></textarea>
+          </div>
+          <div id="loadingBar">
+            <div class="progress">
+              <div class="glimmer">
               </div>
             </div>
-            <div id="markAsDecorative">
-              <div class="radio">
-                <div class="radioButton">
-                  <input type="radio" id="decorativeButton" name="altTextOption" aria-describedby="decorativeLabel">
-                  <label for="decorativeButton" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-label">Mark as decorative</label>
-                </div>
-                <div class="radioLabel">
-                  <span id="decorativeLabel" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-description">
-                    This is used for ornamental images, like borders or watermarks.
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div id="buttons">
-              <button id="altTextCancel" class="secondaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
-              <button id="altTextSave" class="primaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
-            </div>
           </div>
-        </dialog>
-        <dialog id="printServiceDialog" style="min-width: 200px;">
-          <div class="row">
-            <span data-l10n-id="pdfjs-print-progress-message">Preparing document for printing…</span>
-          </div>
-          <div class="row">
-            <progress value="0" max="100"></progress>
-            <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
-          </div>
-          <div class="buttonRow">
-            <button id="printCancel" class="dialogButton"><span data-l10n-id="pdfjs-print-progress-close-button">Cancel</span></button>
-          </div>
-        </dialog>
-      </div>  <!-- dialogContainer -->
+        </div>
+      </div>
 
-    </div> <!-- outerContainer -->
-    <div id="printContainer"></div>
-  </body>
-</html>
+      <div id="viewerContainer" tabindex="0">
+        <div id="viewer" class="pdfViewer">
+        </div>
+        <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+
+      </div>
+    </div> <!-- mainContainer -->
+
+    <div id="dialogContainer">
+      <dialog id="passwordDialog">
+        <div class="row">
+          <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password to open this
+            PDF file:</label>
+        </div>
+        <div class="row">
+          <input type="password" id="password" class="toolbarField">
+        </div>
+        <div class="buttonRow">
+          <button id="passwordCancel" class="dialogButton"><span
+              data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
+          <button id="passwordSubmit" class="dialogButton"><span
+              data-l10n-id="pdfjs-password-ok-button">OK</span></button>
+        </div>
+      </dialog>
+      <dialog id="documentPropertiesDialog">
+        <div class="row">
+          <span id="fileNameLabel" data-l10n-id="pdfjs-document-properties-file-name">File name:</span>
+          <p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="fileSizeLabel" data-l10n-id="pdfjs-document-properties-file-size">File size:</span>
+          <p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
+        </div>
+        <div class="separator"></div>
+        <div class="row">
+          <span id="titleLabel" data-l10n-id="pdfjs-document-properties-title">Title:</span>
+          <p id="titleField" aria-labelledby="titleLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="authorLabel" data-l10n-id="pdfjs-document-properties-author">Author:</span>
+          <p id="authorField" aria-labelledby="authorLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="subjectLabel" data-l10n-id="pdfjs-document-properties-subject">Subject:</span>
+          <p id="subjectField" aria-labelledby="subjectLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="keywordsLabel" data-l10n-id="pdfjs-document-properties-keywords">Keywords:</span>
+          <p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="creationDateLabel" data-l10n-id="pdfjs-document-properties-creation-date">Creation Date:</span>
+          <p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="modificationDateLabel" data-l10n-id="pdfjs-document-properties-modification-date">Modification
+            Date:</span>
+          <p id="modificationDateField" aria-labelledby="modificationDateLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="creatorLabel" data-l10n-id="pdfjs-document-properties-creator">Creator:</span>
+          <p id="creatorField" aria-labelledby="creatorLabel">-</p>
+        </div>
+        <div class="separator"></div>
+        <div class="row">
+          <span id="producerLabel" data-l10n-id="pdfjs-document-properties-producer">PDF Producer:</span>
+          <p id="producerField" aria-labelledby="producerLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="versionLabel" data-l10n-id="pdfjs-document-properties-version">PDF Version:</span>
+          <p id="versionField" aria-labelledby="versionLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="pageCountLabel" data-l10n-id="pdfjs-document-properties-page-count">Page Count:</span>
+          <p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
+        </div>
+        <div class="row">
+          <span id="pageSizeLabel" data-l10n-id="pdfjs-document-properties-page-size">Page Size:</span>
+          <p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
+        </div>
+        <div class="separator"></div>
+        <div class="row">
+          <span id="linearizedLabel" data-l10n-id="pdfjs-document-properties-linearized">Fast Web View:</span>
+          <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
+        </div>
+        <div class="buttonRow">
+          <button id="documentPropertiesClose" class="dialogButton"><span
+              data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
+        </div>
+      </dialog>
+      <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel"
+        aria-describedby="dialogDescription">
+        <div id="altTextContainer" class="mainContainer">
+          <div id="overallDescription">
+            <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an
+              option</span>
+            <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
+              Alt text (alternative text) helps when people can’t see the image or when it doesn’t load.
+            </span>
+          </div>
+          <div id="addDescription">
+            <div class="radio">
+              <div class="radioButton">
+                <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0"
+                  aria-describedby="descriptionAreaLabel" checked>
+                <label for="descriptionButton" data-l10n-id="pdfjs-editor-alt-text-add-description-label">Add a
+                  description</label>
+              </div>
+              <div class="radioLabel">
+                <span id="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-add-description-description">
+                  Aim for 1-2 sentences that describe the subject, setting, or actions.
+                </span>
+              </div>
+            </div>
+            <div class="descriptionArea">
+              <textarea id="descriptionTextarea"
+                placeholder="For example, “A young man sits down at a table to eat a meal”"
+                aria-labelledby="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-textarea"
+                tabindex="0"></textarea>
+            </div>
+          </div>
+          <div id="markAsDecorative">
+            <div class="radio">
+              <div class="radioButton">
+                <input type="radio" id="decorativeButton" name="altTextOption" aria-describedby="decorativeLabel">
+                <label for="decorativeButton" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-label">Mark as
+                  decorative</label>
+              </div>
+              <div class="radioLabel">
+                <span id="decorativeLabel" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-description">
+                  This is used for ornamental images, like borders or watermarks.
+                </span>
+              </div>
+            </div>
+          </div>
+          <div id="buttons">
+            <button id="altTextCancel" class="secondaryButton" tabindex="0"><span
+                data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
+            <button id="altTextSave" class="primaryButton" tabindex="0"><span
+                data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
+          </div>
+        </div>
+      </dialog>
+      <dialog id="printServiceDialog" style="min-width: 200px;">
+        <div class="row">
+          <span data-l10n-id="pdfjs-print-progress-message">Preparing document for printing…</span>
+        </div>
+        <div class="row">
+          <progress value="0" max="100"></progress>
+          <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }'
+            class="relative-progress">0%</span>
+        </div>
+        <div class="buttonRow">
+          <button id="printCancel" class="dialogButton"><span
+              data-l10n-id="pdfjs-print-progress-close-button">Cancel</span></button>
+        </div>
+      </dialog>
+    </div> <!-- dialogContainer -->
+
+  </div> <!-- outerContainer -->
+  <div id="printContainer"></div>
+</body>
+
+</html>
\ No newline at end of file