From cc8e7e159bba6786cc6d3217f1abca05a0efe788 Mon Sep 17 00:00:00 2001
From: Christopher <39032787+MrRobotjs@users.noreply.github.com>
Date: Thu, 1 May 2025 21:31:30 -0600
Subject: [PATCH] Converted majority PX values to REM

Everything but dark.scss and values inside calc() have been converted from px to rem
---
 UI/Web/src/_card-item-common.scss             | 76 +++++++++----------
 UI/Web/src/_manga-reader-common.scss          | 24 +++---
 UI/Web/src/_series-detail-common.scss         | 48 ++++++------
 .../card-actionables.component.scss           |  2 +-
 .../cover-image/cover-image.component.scss    | 44 +++++------
 .../edit-chapter-modal.component.html         |  2 +-
 .../edit-volume-modal.component.html          |  2 +-
 .../match-series-result-item.component.scss   |  6 +-
 .../publisher-flipper.component.scss          | 20 ++---
 .../review-card-modal.component.scss          |  4 +-
 .../review-card/review-card.component.scss    | 30 ++++----
 .../series-preview-drawer.component.html      | 10 +--
 .../series-preview-drawer.component.scss      |  4 +-
 .../smart-collection-drawer.component.html    |  2 +-
 .../user-scrobble-history.component.scss      |  4 +-
 .../directory-picker.component.html           |  2 +-
 .../directory-picker.component.scss           |  4 +-
 .../invite-user/invite-user.component.scss    |  2 +-
 .../app/admin/license/license.component.scss  |  8 +-
 .../manage-email-settings.component.scss      |  4 +-
 .../manage-library.component.scss             | 14 ++--
 .../manage-matched-metadata.component.scss    |  4 +-
 .../manage-media-issues.component.scss        |  2 +-
 .../manage-settings.component.scss            |  4 +-
 .../manage-users/manage-users.component.scss  | 14 ++--
 .../all-filters/all-filters.component.scss    |  4 +-
 .../all-series/all-series.component.scss      |  4 +-
 .../announcements.component.scss              |  4 +-
 UI/Web/src/app/app.component.scss             |  8 +-
 .../book-line-overlay.component.scss          |  4 +-
 .../book-reader/book-reader.component.html    |  2 +-
 .../book-reader/book-reader.component.scss    | 62 +++++++--------
 .../reader-settings.component.html            |  4 +-
 .../reader-settings.component.scss            |  6 +-
 .../bookmarks/bookmarks.component.scss        |  4 +-
 .../browse-authors.component.html             |  4 +-
 .../browse-authors.component.scss             |  4 +-
 .../bulk-add-to-collection.component.scss     |  4 +-
 .../edit-collection-tags.component.html       |  2 +-
 .../edit-series-modal.component.html          |  4 +-
 .../bulk-operations.component.scss            |  2 +-
 .../card-detail-layout.component.html         |  2 +-
 .../card-detail-layout.component.scss         | 32 ++++----
 .../chapter-card/chapter-card.component.html  |  4 +-
 .../cover-image-chooser.component.html        |  4 +-
 .../cover-image-chooser.component.scss        | 16 ++--
 .../download-indicator.component.scss         |  4 +-
 .../external-series-card.component.scss       |  2 +-
 .../next-expected-card.component.scss         |  2 +-
 .../person-card/person-card.component.scss    |  6 +-
 .../series-card/series-card.component.html    |  2 +-
 .../volume-card/volume-card.component.html    |  4 +-
 .../carousel-reel.component.scss              |  4 +-
 .../chapter-detail.component.html             |  2 +-
 .../all-collections.component.scss            |  2 +-
 .../collection-detail.component.scss          | 16 ++--
 .../_components/dashboard.component.scss      |  4 +-
 .../library-detail.component.scss             |  4 +-
 .../infinite-scroller.component.scss          |  8 +-
 .../manga-reader/manga-reader.component.html  |  2 +-
 .../manga-reader/manga-reader.component.scss  | 74 +++++++++---------
 .../metadata-filter-row.component.scss        |  4 +-
 .../metadata-filter.component.html            |  4 +-
 .../events-widget.component.html              |  6 +-
 .../events-widget.component.scss              | 24 +++---
 .../grouped-typeahead.component.html          |  2 +-
 .../grouped-typeahead.component.scss          | 42 +++++-----
 .../nav-header/nav-header.component.html      | 28 +++----
 .../nav-header/nav-header.component.scss      |  6 +-
 .../pdf-reader/pdf-reader.component.html      | 20 ++---
 .../pdf-reader/pdf-reader.component.scss      | 22 +++---
 .../edit-person-modal.component.html          |  2 +-
 .../person-detail.component.scss              | 14 ++--
 .../draggable-ordered-list.component.scss     | 36 ++++-----
 .../import-cbl/import-cbl.component.html      |  6 +-
 .../import-cbl/import-cbl.component.scss      |  4 +-
 .../reading-list-detail.component.html        |  4 +-
 .../reading-list-detail.component.scss        | 16 ++--
 .../reading-list-item.component.html          |  2 +-
 .../reading-list-item.component.scss          | 26 +++----
 .../reading-lists.component.scss              |  4 +-
 .../step-tracker/step-tracker.component.scss  | 24 +++---
 .../add-to-list-modal.component.scss          |  2 +-
 .../edit-reading-list-modal.component.html    |  2 +-
 .../confirm-email-change.component.scss       |  2 +-
 .../splash-container.component.scss           | 10 +--
 .../external-rating.component.html            |  4 +-
 .../external-rating.component.scss            | 16 ++--
 .../metadata-detail-row.component.html        |  2 +-
 .../metadata-detail-row.component.scss        |  8 +-
 .../series-detail.component.html              |  2 +-
 .../series-detail.component.scss              | 14 ++--
 .../setting-item/setting-item.component.scss  |  2 +-
 .../setting-switch.component.scss             |  2 +-
 .../settings/settings.component.scss          |  6 +-
 .../badge-expander.component.scss             |  2 +-
 .../circular-loader.component.scss            |  4 +-
 .../icon-and-title.component.scss             | 10 +--
 .../person-badge/person-badge.component.scss  | 18 ++---
 .../shared/read-more/read-more.component.scss |  2 +-
 .../series-format.component.scss              |  2 +-
 .../shared/tag-badge/tag-badge.component.scss | 12 +--
 ...customize-dashboard-streams.component.scss |  6 +-
 .../customize-sidenav-streams.component.html  |  2 +-
 .../customize-sidenav-streams.component.scss  |  4 +-
 .../dashboard-stream-list-item.component.scss |  4 +-
 .../manage-customization.component.html       |  2 +-
 .../manage-external-sources.component.html    |  2 +-
 .../manage-external-sources.component.scss    |  4 +-
 .../manage-smart-filters.component.scss       |  4 +-
 .../side-nav-companion-bar.component.scss     | 12 +--
 .../side-nav-item.component.scss              |  8 +-
 .../sidenav-stream-list-item.component.scss   |  4 +-
 .../library-settings-modal.component.html     |  2 +-
 .../preference-nav.component.scss             |  4 +-
 .../day-breakdown.component.scss              |  4 +-
 .../file-breakdown-stats.component.html       |  2 +-
 .../file-breakdown-stats.component.scss       |  2 +-
 .../publication-status-stats.component.html   |  2 +-
 .../publication-status-stats.component.scss   |  2 +-
 .../reading-activity.component.scss           |  2 +-
 .../server-stats/server-stats.component.scss  |  2 +-
 .../top-readers/top-readers.component.scss    |  2 +-
 .../_components/typeahead.component.scss      | 48 ++++++------
 .../change-email/change-email.component.scss  |  2 +-
 .../manage-devices.component.scss             |  6 +-
 .../manage-user-preferences.component.scss    | 12 +--
 .../theme-manager.component.html              |  6 +-
 .../theme-manager.component.scss              | 18 ++---
 .../volume-detail.component.html              |  2 +-
 .../volume-detail.component.scss              |  6 +-
 .../want-to-read/want-to-read.component.scss  |  4 +-
 UI/Web/src/styles.scss                        | 10 +--
 UI/Web/src/theme/_toastr.scss                 | 52 ++++++-------
 UI/Web/src/theme/_variables.scss              |  8 +-
 UI/Web/src/theme/components/_breadcrumb.scss  |  4 +-
 UI/Web/src/theme/components/_buttons.scss     |  4 +-
 UI/Web/src/theme/components/_card.scss        | 30 ++++----
 UI/Web/src/theme/components/_modal.scss       |  2 +-
 UI/Web/src/theme/components/_nav.scss         |  4 +-
 UI/Web/src/theme/components/_navbar.scss      |  2 +-
 UI/Web/src/theme/components/_slider.scss      | 20 ++---
 UI/Web/src/theme/components/_table.scss       | 12 +--
 UI/Web/src/theme/components/_typeahead.scss   |  8 +-
 UI/Web/src/theme/utilities/_animations.scss   |  6 +-
 UI/Web/src/theme/utilities/_global.scss       |  8 +-
 UI/Web/src/theme/utilities/_utilities.scss    |  4 +-
 147 files changed, 712 insertions(+), 712 deletions(-)

diff --git a/UI/Web/src/_card-item-common.scss b/UI/Web/src/_card-item-common.scss
index 1c6f916f3..885f8b7ac 100644
--- a/UI/Web/src/_card-item-common.scss
+++ b/UI/Web/src/_card-item-common.scss
@@ -1,27 +1,27 @@
-$image-height: 232.91px;
-$image-width: 160px;
+$image-height: 14.556875rem;
+$image-width: 10.0rem;
 
 .error-banner {
   width: $image-width;
-  height: 18px;
+  height: 1.125rem;
   background-color: var(--toast-error-bg-color);
-  font-size: 12px;
+  font-size: 0.75rem;
   color: white;
   text-transform: uppercase;
   text-align: center;
 
   position: absolute;
-  top: 0px;
-  right: 0px;
+  top: 0.0rem;
+  right: 0.0rem;
 }
 
 .selected-highlight {
-  outline: 2px solid var(--primary-color);
+  outline: 0.125rem solid var(--primary-color);
 }
 
 .progress-banner {
   width: $image-width;
-  height: 5px;
+  height: 0.3125rem;
 
   .progress {
     color: var(--card-progress-bar-color);
@@ -30,15 +30,15 @@ $image-width: 160px;
 }
 
 .download {
-  width: 80px;
-  height: 80px;
+  width: 5.0rem;
+  height: 5.0rem;
   position: absolute;
   top: 25%;
   right: 30%;
 }
 
 .badge-container {
-  border-radius: 4px;
+  border-radius: 0.25rem;
   display: block;
   height: $image-height;
   left: 0;
@@ -46,13 +46,13 @@ $image-width: 160px;
   pointer-events: none;
   position: absolute;
   top: 0;
-  width: 160px;
+  width: 10.0rem;
 }
 
 .not-read-badge {
   position: absolute;
   top: calc(-1 * (var(--card-progress-triangle-size) / 2));
-  right: -14px;
+  right: -0.875rem;
   z-index: 1000;
   height: var(--card-progress-triangle-size);
   width: var(--card-progress-triangle-size);
@@ -62,8 +62,8 @@ $image-width: 160px;
 
 .bulk-mode {
   position: absolute;
-  top: 5px;
-  left: 5px;
+  top: 0.3125rem;
+  left: 0.3125rem;
   visibility: hidden;
 
   &.always-show {
@@ -73,8 +73,8 @@ $image-width: 160px;
   }
 
   input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
     color: var(--checkbox-bg-color);
   }
 }
@@ -113,10 +113,10 @@ $image-width: 160px;
       top: 0;
       left: 0;
       width: 100%;
-      height: 232.91px;
+      height: 14.556875rem;
       transition: all 0.2s;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
 
       &:hover {
         background-color: var(--card-overlay-hover-bg-color);
@@ -126,7 +126,7 @@ $image-width: 160px;
       .overlay-information--centered {
         position: absolute;
         background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 50px;
+        border-radius: 3.125rem;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -141,8 +141,8 @@ $image-width: 160px;
   }
 
   .count {
-    top: 5px;
-    right: 10px;
+    top: 0.3125rem;
+    right: 0.625rem;
     position: absolute;
   }
 }
@@ -152,26 +152,26 @@ $image-width: 160px;
 }
 
 .library {
-  font-size: 13px;
+  font-size: 0.8125rem;
   text-decoration: none;
-  margin-top: 0px;
+  margin-top: 0.0rem;
 }
 
 .card-title-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 5px;
+    padding: 0 0.3125rem;
 
     :first-child {
-      min-width: 22px;
+      min-width: 1.375rem;
     } 
 
     .card-title {
       font-size: 0.8rem;
       margin: 0;
       text-align: center;
-      max-width: 90px;
+      max-width: 5.625rem;
 
       a {
         overflow: hidden;
@@ -181,15 +181,15 @@ $image-width: 160px;
 }
 
 .card-actions {
-  min-width: 15.82px;
+  min-width: 0.98875rem;
 }
 
 .card-format {
-  min-width: 22px;
+  min-width: 1.375rem;
 }
 
 ::ng-deep app-card-actionables .dropdown .dropdown-toggle {
-  padding: 0 5px;
+  padding: 0 0.3125rem;
 }
 
 .meta-title {
@@ -201,9 +201,9 @@ $image-width: 160px;
 .card-title {
   font-size: 0.8rem;
   margin: 0;
-  padding: 10px 0;
+  padding: 0.625rem 0;
   text-align: center;
-  max-width: 120px;
+  max-width: 7.5rem;
 
   a {
     overflow: hidden;
@@ -212,7 +212,7 @@ $image-width: 160px;
 }
 
 .card-body > div:nth-child(2) {
-  height: 40px;
+  height: 2.5rem;
   overflow: hidden;
   -webkit-line-clamp: 2;
   display: -webkit-box;
@@ -225,7 +225,7 @@ $image-width: 160px;
   visibility: hidden;
   display: none;
     .card-title {
-      padding: 10px;
+      padding: 0.625rem;
     }
 }
 
@@ -235,11 +235,11 @@ $image-width: 160px;
 .expected {
   .overlay-information--centered {
     div {
-      height: 32px;
-      width: 32px;
+      height: 2.0rem;
+      width: 2.0rem;
       i {
         font-size: 1.4rem;
-        line-height: 32px;
+        line-height: 2.0rem;
       }
     }
   }
diff --git a/UI/Web/src/_manga-reader-common.scss b/UI/Web/src/_manga-reader-common.scss
index 9b54a5fad..e92831c4d 100644
--- a/UI/Web/src/_manga-reader-common.scss
+++ b/UI/Web/src/_manga-reader-common.scss
@@ -1,4 +1,4 @@
-$scrollbarHeight: 35px;
+$scrollbarHeight: 2.1875rem;
 
 img {
   user-select: none;
@@ -67,12 +67,12 @@ img {
 .highlight {
   background-color: var(--manga-reader-next-highlight-bg-color) !important;
   animation: fadein .5s both;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(0.625rem);
 }
 .highlight-2 {
   background-color: var(--manga-reader-prev-highlight-bg-color) !important;
   animation: fadein .5s both;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(0.625rem);
 }
 
 
@@ -83,19 +83,19 @@ img {
   left: 50%;
   height: 100%;
   box-shadow:
-      0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
-      0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
-      0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
-      0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%);
+      0.0rem 0.0rem calc(17px*3.14) 1.5625rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(2px*3.14) 0.125rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(5px*3.14) 0.25rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(0.5px*3.14) 0.01875rem rgb(0 0 0 / 43%);
 }
 
 @supports (-moz-appearance:none) {
   ::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
     box-shadow:
-      0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
-      0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
-      0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
-      0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%),
-      0px 0px 1px 0.5px rgb(0 0 0 / 43%);
+      0.0rem 0.0rem calc(17px*3.14) 1.5625rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(2px*3.14) 0.125rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(5px*3.14) 0.25rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(0.5px*3.14) 0.01875rem rgb(0 0 0 / 43%),
+      0.0rem 0.0rem 0.0625rem 0.03125rem rgb(0 0 0 / 43%);
   }
 }
diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss
index f043dec17..0fb35b13d 100644
--- a/UI/Web/src/_series-detail-common.scss
+++ b/UI/Web/src/_series-detail-common.scss
@@ -8,8 +8,8 @@
 
 .image-container {
   align-self: flex-start;
-  max-height: 400px;
-  max-width: 280px;
+  max-height: 25.0rem;
+  max-width: 17.5rem;
 }
 
 .subtitle {
@@ -20,7 +20,7 @@
 
 .main-container {
   overflow: unset !important;
-  margin-top: 15px;
+  margin-top: 0.9375rem;
 }
 
 ::ng-deep .badge-expander .content a {
@@ -30,15 +30,15 @@
 .btn-group > .btn.dropdown-toggle-split:not(first-child){
   border-top-right-radius: var(--bs-border-radius) !important;
   border-bottom-right-radius: var(--bs-border-radius) !important;
-  border-width: 1px 1px 1px 0 !important;
+  border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important;
 }
 
 .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
-  border-width: 1px 0 1px 1px !important;
+  border-width: 0.0625rem 0 0.0625rem 0.0625rem !important;
 }
 
 .card-body > div:nth-child(2) {
-  height: 50px;
+  height: 3.125rem;
   overflow: hidden;
   -webkit-line-clamp: 2;
   display: -webkit-box;
@@ -47,17 +47,17 @@
 }
 
 .under-image  ~ .overlay-information {
-  top: -404px;
-  height: 364px;
+  top: -25.25rem;
+  height: 22.75rem;
 }
 
 .overlay-information {
   position: relative;
-  top: -364px;
-  height: 364px;
+  top: -22.75rem;
+  height: 22.75rem;
   transition: all 0.2s;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 
   &:hover {
     cursor: pointer;
@@ -70,9 +70,9 @@
 
   .overlay-information--centered {
     position: absolute;
-    border-radius: 15px;
+    border-radius: 0.9375rem;
     background-color: rgba(0, 0, 0, .7);
-    border-radius: 50px;
+    border-radius: 3.125rem;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -85,11 +85,11 @@
     }
 
     div {
-      width: 60px;
-      height: 60px;
+      width: 3.75rem;
+      height: 3.75rem;
       i {
         font-size: 1.6rem;
-        line-height: 60px;
+        line-height: 3.75rem;
         width: 100%;
       }
     }
@@ -118,7 +118,7 @@
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   scrollbar-width: none;
-  box-shadow: inset -1px -2px 0px -1px var(--elevation-layer9);
+  box-shadow: inset -0.0625rem -0.125rem 0.0rem -0.0625rem var(--elevation-layer9);
 }
 .carousel-tabs-container::-webkit-scrollbar {
   display: none;
@@ -132,11 +132,11 @@
 }
 
 ::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{
-  border-width: 1px;
+  border-width: 0.0625rem;
   border-style: solid;
-  border-radius: 5px;
+  border-radius: 0.3125rem;
   border-color: var(--primary-color);
-  padding: 5px;
+  padding: 0.3125rem;
   vertical-align: middle;
 
   &:hover {
@@ -145,7 +145,7 @@
 }
 
 ::ng-deep .image-container.mobile-bg app-image img {
-  max-height: 400px;
+  max-height: 25.0rem;
   object-fit: contain;
 }
 
@@ -165,7 +165,7 @@
 @media (max-width: theme.$grid-breakpoints-lg) {
   .image-container.mobile-bg{
     width: 100vw;
-    top: calc(var(--nav-offset) - 20px);
+    top: calc(var(--nav-offset) - 1.25rem);
     left: 0;
     pointer-events: none;
     position: fixed !important;
@@ -178,7 +178,7 @@
   ::ng-deep .image-container.mobile-bg app-image img {
     max-height: unset !important;
     opacity: 0.05 !important;
-    filter: blur(5px) !important;
+    filter: blur(0.3125rem) !important;
     max-width: 100dvw;
     height: 100dvh !important;
     overflow: hidden;
diff --git a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss
index 6f1d105e0..d987d0468 100644
--- a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss
+++ b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss
@@ -28,7 +28,7 @@
 }
 
 .btn {
-    padding: 5px;
+    padding: 0.3125rem;
 }
 
 // Robbie added this but it broke most of the uses
diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss b/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss
index 0c9c9d032..f161bdd2c 100644
--- a/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss
+++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss
@@ -1,10 +1,10 @@
 .overlay-information {
     position: relative;
-    top: -364px;
-    height: 364px;
+    top: -22.75rem;
+    height: 22.75rem;
     transition: all 0.2s;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
 
     &:hover {
         cursor: pointer;
@@ -17,9 +17,9 @@
 
     .overlay-information--centered {
         position: absolute;
-        border-radius: 15px;
+        border-radius: 0.9375rem;
         background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 50px;
+        border-radius: 3.125rem;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -32,11 +32,11 @@
         }
 
         div {
-            width: 60px;
-            height: 60px;
+            width: 3.75rem;
+            height: 3.75rem;
             i {
                 font-size: 1.6rem;
-                line-height: 60px;
+                line-height: 3.75rem;
                 width: 100%;
             }
         }
@@ -46,12 +46,12 @@
 .overlay-information {
     position: absolute;
     top: 0;
-    left: 12px;
+    left: 0.75rem;
     width: calc(100% - 24px);
     height: 100%;
     transition: all 0.2s;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
 
     &:hover {
         background-color: var(--card-overlay-hover-bg-color);
@@ -60,9 +60,9 @@
 
     .overlay-information--centered {
         position: absolute;
-        border-radius: 15px;
+        border-radius: 0.9375rem;
         background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 50px;
+        border-radius: 3.125rem;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -78,18 +78,18 @@
 .series {
     .overlay-information--centered {
         div {
-            height: 32px;
-            width: 32px;
+            height: 2.0rem;
+            width: 2.0rem;
             i {
                 font-size: 1.4rem;
-                line-height: 32px;
+                line-height: 2.0rem;
             }
         }
     }
 }
 
 ::ng-deep .image-container app-image img {
-    border-radius: 4px 4px 0 0;
+    border-radius: 0.25rem 0.25rem 0 0;
 }
 
 .progress {
@@ -114,8 +114,8 @@
     .continue-from {
         background-color: var(--breadcrumb-bg-color);
         color: white;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: 0.3125rem;
+        border-bottom-right-radius: 0.3125rem;
         text-align: center;
         position: absolute;
         width: 100%;
@@ -125,11 +125,11 @@
         overflow: hidden;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-        padding: 0 10px 0 0;
+        padding: 0 0.625rem 0 0;
     }
 }
 
-@media screen and (max-width: 991px) {
+@media screen and (max-width: 61.9375rem) {
     .overlay-information {
         visibility: hidden;
         .overlay-information--centered {
diff --git a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html
index 979794d20..e2cd10260 100644
--- a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html
+++ b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html
@@ -9,7 +9,7 @@
       <form [formGroup]="editForm">
         <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills"
             [destroyOnHide]="false"
-            orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+            orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
 
           <!-- General Tab -->
           @if (user && accountService.hasAdminRole(user))
diff --git a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html
index b0f331b51..464b99e33 100644
--- a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html
+++ b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html
@@ -6,7 +6,7 @@
     </div>
     <div class="modal-body scrollable-modal" [ngClass]="{'d-flex': utilityService.getActiveBreakpoint() !== Breakpoint.Mobile}">
       <form [formGroup]="editForm">
-        <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
 
           <!-- Info Tab -->
           <li [ngbNavItem]="TabID.Info">
diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss
index 5df806397..a6360d9c6 100644
--- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss
+++ b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss
@@ -1,7 +1,7 @@
 .search-result {
     img {
-        max-width: 100px;
-        min-width: 100px;
+        max-width: 6.25rem;
+        min-width: 6.25rem;
     }
 }
 .title {
@@ -19,7 +19,7 @@
     &.light {
         background-color: var(--elevation-layer6);
     }
-    border-radius: 15px;
+    border-radius: 0.9375rem;
 
     &:hover {
         &.dark {
diff --git a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
index 9f4486d16..f8b8a7a04 100644
--- a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
+++ b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
@@ -1,32 +1,32 @@
 //
 //.publisher-img-container {
 //  background-color: var(--card-bg-color);
-//  border-radius: 3px;
-//  padding: 2px 5px;
+//  border-radius: 0.1875rem;
+//  padding: 0.125rem 0.3125rem;
 //  font-size: 0.8rem;
 //  vertical-align: middle;
 //
 //  div {
-//    min-height: 32px;
-//    line-height: 32px;
+//    min-height: 2.0rem;
+//    line-height: 2.0rem;
 //  }
 //}
 
 // Animation code
 
 .publisher-wrapper {
-  perspective: 1000px;
-  height: 32px;
+  perspective: 62.5rem;
+  height: 2.0rem;
 
   background-color: var(--card-bg-color);
-  border-radius: 3px;
-  padding: 2px 5px;
+  border-radius: 0.1875rem;
+  padding: 0.125rem 0.3125rem;
   font-size: 0.8rem;
   vertical-align: middle;
 
   div {
-    min-height: 32px;
-    line-height: 32px;
+    min-height: 2.0rem;
+    line-height: 2.0rem;
   }
 }
 
diff --git a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss
index eedc6041c..226f96b19 100644
--- a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss
+++ b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss
@@ -1,11 +1,11 @@
 .img-max-width {
     hr {
-        border: solid 2px rgba(var(--primary-color), 0.5) !important;
+        border: solid 0.125rem rgba(var(--primary-color), 0.5) !important;
     }
 
     img {
         max-width: 100%;
-        max-height: 800px;
+        max-height: 50.0rem;
     }
 
     h1 {
diff --git a/UI/Web/src/app/_single-module/review-card/review-card.component.scss b/UI/Web/src/app/_single-module/review-card/review-card.component.scss
index 7859ba11c..b56c72e86 100644
--- a/UI/Web/src/app/_single-module/review-card/review-card.component.scss
+++ b/UI/Web/src/app/_single-module/review-card/review-card.component.scss
@@ -1,20 +1,20 @@
 .review-card {
-  max-width: 320px;
-  max-height: 130px;
-  height: 130px;
-  width: 320px;
+  max-width: 20.0rem;
+  max-height: 8.125rem;
+  height: 8.125rem;
+  width: 20.0rem;
 }
 
 .profile-image {
     font-size: 1.2rem;
-    padding: 20px;
+    padding: 1.25rem;
 }
 
 .my-review {
     position: absolute;
     z-index: 20;
-    top: 38px;
-    left: 38px;
+    top: 2.375rem;
+    left: 2.375rem;
 }
 
 .fa-star {
@@ -22,14 +22,14 @@
 }
 
 .card-text {
-    font-size: 14px;
+    font-size: 0.875rem;
 }
 
 .card-title {
     overflow: hidden;
-    width: 235px;
+    width: 14.6875rem;
     word-break: break-all;
-    height: 20px;
+    height: 1.25rem;
 }
 
 .card-text.no-images {
@@ -42,14 +42,14 @@
 }
 
 .card-footer {
-    font-size: 13px;
+    font-size: 0.8125rem;
     display: flex;
-    max-width: 319px;
+    max-width: 19.9375rem;
     justify-content: space-between;
     margin: 0 auto;
 
     & > * {
-        margin: 0 5px;
+        margin: 0 0.3125rem;
         display: inline-flex;
     }
 }
@@ -57,6 +57,6 @@
 .card-body {
     display: block;
     visibility: visible;
-    min-height: 93.5px;
-    max-height: 93.5px;
+    min-height: 5.84375rem;
+    max-height: 5.84375rem;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html
index e9be86cce..7add09ef0 100644
--- a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html
+++ b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html
@@ -8,7 +8,7 @@
 
   <div class="offcanvas-body">
     @if (CoverUrl; as coverUrl) {
-      <div style="width: 160px" class="mx-auto mb-3">
+      <div style="width: 10.0rem" class="mx-auto mb-3">
         @if (coverUrl) {
           <app-image height="232.91px" width="160px" [styles]="{'object-fit': 'contain', 'max-height': '232.91px'}" [imageUrl]="coverUrl"></app-image>
         }
@@ -64,13 +64,13 @@
                   @if (item.imageUrl && !item.imageUrl.endsWith('default.jpg')) {
                     <app-image height="24px" width="24px" [styles]="{'object-fit': 'contain'}" [imageUrl]="item.imageUrl" classes="person-img"></app-image>
                   } @else {
-                    <i class="fa fa-user-circle align-self-center person-img" style="font-size: 28px;" aria-hidden="true"></i>
+                    <i class="fa fa-user-circle align-self-center person-img" style="font-size: 1.75rem;" aria-hidden="true"></i>
                   }
                 </div>
                 <div class="col-md-9">
                   <div class="card-body">
                     <h6 class="card-title">{{item.name}}</h6>
-                    <p class="card-text" style="font-size: 14px"><small class="text-muted">{{item.role}}</small></p>
+                    <p class="card-text" style="font-size: 0.875rem"><small class="text-muted">{{item.role}}</small></p>
                   </div>
                 </div>
               </div>
@@ -113,12 +113,12 @@
             <div class="card mb-3">
               <div class="row g-0">
                 <div class="col-md-4">
-                  <i class="fa fa-user-circle align-self-center" style="font-size: 28px; margin-top: 24px; margin-left: 24px" aria-hidden="true"></i>
+                  <i class="fa fa-user-circle align-self-center" style="font-size: 1.75rem; margin-top: 1.5rem; margin-left: 1.5rem" aria-hidden="true"></i>
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
                     <h6 class="card-title">{{item.name}}</h6>
-                    <p class="card-text" style="font-size: 14px"><small class="text-muted">{{item.role}}</small></p>
+                    <p class="card-text" style="font-size: 0.875rem"><small class="text-muted">{{item.role}}</small></p>
                   </div>
                 </div>
               </div>
diff --git a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss
index d3c04eff2..56bc3994d 100644
--- a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss
+++ b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss
@@ -6,11 +6,11 @@
 }
 
 ::ng-deep .person-img {
-  margin-top: 24px; margin-left: 24px;
+  margin-top: 1.5rem; margin-left: 1.5rem;
 }
 
 .muted {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 a.read-more-link {
diff --git a/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html b/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html
index 525155e6a..c51c5a847 100644
--- a/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html
+++ b/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html
@@ -21,7 +21,7 @@
     <div class="mb-3">
       <app-setting-item [title]="t('edit-collection-tags.series-tab')" [showEdit]="false" [canEdit]="false">
         <ng-template #titleExtra>
-          <span class="badge rounded-pill text-bg-primary ms-1" style="font-size: 11px">{{collection.totalSourceCount - series.length}} / {{collection.totalSourceCount | number}}</span>
+          <span class="badge rounded-pill text-bg-primary ms-1" style="font-size: 0.6875rem">{{collection.totalSourceCount - series.length}} / {{collection.totalSourceCount | number}}</span>
         </ng-template>
 
         <ng-template #view>
diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss
index bf691441b..7a943d681 100644
--- a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss
+++ b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss
@@ -7,6 +7,6 @@
 }
 
 .custom-position {
-  right: 15px;
-  top: -42px;
+  right: 0.9375rem;
+  top: -2.625rem;
 }
diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html
index d4ec401e3..a25c6446f 100644
--- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html
+++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html
@@ -39,7 +39,7 @@
     <table class="table table-striped scrollable">
       <thead>
       <tr>
-        <th scope="col" style="width: 40px;">{{t('type-header')}}</th>
+        <th scope="col" style="width: 2.5rem;">{{t('type-header')}}</th>
         <th scope="col">{{t('name-header')}}</th>
       </tr>
       </thead>
diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss
index a086f4ecf..fba7922cc 100644
--- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss
+++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss
@@ -7,11 +7,11 @@ $breadcrumb-divider: quote(">");
 
 .scrollable {
     overflow-y: auto;
-    max-height: 400px;
+    max-height: 25.0rem;
 }
 
 .btn-outline-secondary {
-    border: 1px solid #ced4da;
+    border: 0.0625rem solid #ced4da;
 }
 
 .disabled {
diff --git a/UI/Web/src/app/admin/invite-user/invite-user.component.scss b/UI/Web/src/app/admin/invite-user/invite-user.component.scss
index 8d2460659..de10e5413 100644
--- a/UI/Web/src/app/admin/invite-user/invite-user.component.scss
+++ b/UI/Web/src/app/admin/invite-user/invite-user.component.scss
@@ -1,5 +1,5 @@
 .email-link {
     word-break: break-all;
-    margin-bottom: 15px;
+    margin-bottom: 0.9375rem;
     display: block;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/admin/license/license.component.scss b/UI/Web/src/app/admin/license/license.component.scss
index 1608c1062..863237cfe 100644
--- a/UI/Web/src/app/admin/license/license.component.scss
+++ b/UI/Web/src/app/admin/license/license.component.scss
@@ -7,11 +7,11 @@
 }
 
 .custom-position {
-  right: 15px;
-  top: -42px;
+  right: 0.9375rem;
+  top: -2.625rem;
 }
 
 .custom-position-2 {
-  right: 160px;
-  top: -42px;
+  right: 10.0rem;
+  top: -2.625rem;
 }
diff --git a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss
index 4b988b958..82c15f632 100644
--- a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss
+++ b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss
@@ -1,4 +1,4 @@
 .custom-position {
-  right: 15px;
-  top: -42px;
+  right: 0.9375rem;
+  top: -2.625rem;
 }
diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.scss b/UI/Web/src/app/admin/manage-library/manage-library.component.scss
index 2fe7d3bcc..ecb5602b0 100644
--- a/UI/Web/src/app/admin/manage-library/manage-library.component.scss
+++ b/UI/Web/src/app/admin/manage-library/manage-library.component.scss
@@ -1,18 +1,18 @@
 @use "../../../theme/variables" as theme;
 
 .custom-position {
-    right: 15px;
-    top: -42px;
+    right: 0.9375rem;
+    top: -2.625rem;
 }
 
 .custom-position-2 {
-  right: 160px;
-  top: -42px;
+  right: 10.0rem;
+  top: -2.625rem;
 }
 
-@media(max-width: 576px) {
+@media(max-width: 36.0rem) {
   .custom-position-2 {
-    right: 65px;
+    right: 4.0625rem;
   }
 }
 
@@ -42,7 +42,7 @@
             justify-content: center;
         }
         .btn {
-            width: 32px;
+            width: 2.0rem;
         }
     }
 }
diff --git a/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss b/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss
index 1e6162074..cab162a93 100644
--- a/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss
+++ b/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss
@@ -1,9 +1,9 @@
 .table {
-  min-height: 60px;
+  min-height: 3.75rem;
   width: 100%;
 
 }
 
 .tr {
-  height: 60px;
+  height: 3.75rem;
 }
diff --git a/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss b/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss
index 3929527f9..c11061575 100644
--- a/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss
+++ b/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss
@@ -15,7 +15,7 @@
             justify-content: center;
         }
         .btn {
-            width: 32px;
+            width: 2.0rem;
         }
     }
 }
diff --git a/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss b/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss
index 2d2d758c2..99d57e175 100644
--- a/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss
+++ b/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss
@@ -2,6 +2,6 @@
     display: inherit;
 }
 .custom-position {
-  right: 5px;
-  top: -42px;
+  right: 0.3125rem;
+  top: -2.625rem;
 }
diff --git a/UI/Web/src/app/admin/manage-users/manage-users.component.scss b/UI/Web/src/app/admin/manage-users/manage-users.component.scss
index 070521edf..af02bc930 100644
--- a/UI/Web/src/app/admin/manage-users/manage-users.component.scss
+++ b/UI/Web/src/app/admin/manage-users/manage-users.component.scss
@@ -1,12 +1,12 @@
 @use '../../../theme/variables' as theme;
 
 .presence {
-    font-size: 12px;
+    font-size: 0.75rem;
     color: var(--primary-color);
 }
 
 .user-info > div {
-    margin-top: 3px;
+    margin-top: 0.1875rem;
 }
 
 .highlight {
@@ -14,12 +14,12 @@
 }
 
 .pending-badge {
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .custom-position {
-  right: 15px;
-  top: -42px;
+  right: 0.9375rem;
+  top: -2.625rem;
 }
 
 .member-name {
@@ -28,7 +28,7 @@
 }
 
 .actions {
-  min-width: 152px;
+  min-width: 9.5rem;
 }
 
 .list-group-item:nth-child(even) {
@@ -50,7 +50,7 @@
       justify-content: center;
     }
     .btn {
-      width: 32px;
+      width: 2.0rem;
     }
   }
 }
diff --git a/UI/Web/src/app/all-filters/all-filters.component.scss b/UI/Web/src/app/all-filters/all-filters.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/all-filters/all-filters.component.scss
+++ b/UI/Web/src/app/all-filters/all-filters.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/app/all-series/_components/all-series/all-series.component.scss b/UI/Web/src/app/all-series/_components/all-series/all-series.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/all-series/_components/all-series/all-series.component.scss
+++ b/UI/Web/src/app/all-series/_components/all-series/all-series.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/app/announcements/_components/announcements/announcements.component.scss b/UI/Web/src/app/announcements/_components/announcements/announcements.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/announcements/_components/announcements/announcements.component.scss
+++ b/UI/Web/src/app/announcements/_components/announcements/announcements.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/app/app.component.scss b/UI/Web/src/app/app.component.scss
index f5b3cfda3..d34af3501 100644
--- a/UI/Web/src/app/app.component.scss
+++ b/UI/Web/src/app/app.component.scss
@@ -1,13 +1,13 @@
 @use '../theme/variables' as theme;
 
 .content-wrapper {
-    padding: 0 0 0 10px;
+    padding: 0 0 0 0.625rem;
     height: calc(var(--vh)* 100 - var(--nav-offset));
 }
 
 .companion-bar {
     transition: all var(--side-nav-companion-bar-transistion);
-    margin-left: 45px;
+    margin-left: 2.8125rem;
     overflow-y: hidden;
     overflow-x: hidden;
     height: calc(var(--vh)* 100 - var(--nav-mobile-offset));
@@ -86,7 +86,7 @@
         height: calc(var(--vh) * 100 - var(--nav-mobile-offset));
         scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0.1);
         scrollbar-width: thin;
-        margin-bottom: 20px;
+        margin-bottom: 1.25rem;
         overflow-y: auto;
     }
 
@@ -120,7 +120,7 @@
   z-index: -1;
   pointer-events: none;
   background-color: var(--bs-body-bg);
-  filter: blur(20px);
+  filter: blur(1.25rem);
   object-fit: contain;
   transform: scale(1.1);
   mix-blend-mode: color;
diff --git a/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.scss b/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.scss
index 434de65b5..f22c7f37f 100644
--- a/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.scss
+++ b/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.scss
@@ -1,8 +1,8 @@
 .overlay {
   background-color: var(--br-actionbar-bg-color);
   color: var(--bs-body-bg);
-  padding: 5px;
-  border-radius: 4px;
+  padding: 0.3125rem;
+  border-radius: 0.25rem;
   z-index: 9999;
   width: 100vw;
 }
diff --git a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
index cc61b8e5c..0528c167b 100644
--- a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
+++ b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
@@ -16,7 +16,7 @@
       <app-drawer #commentDrawer="drawer" [(isOpen)]="drawerOpen" [options]="{topOffset: topOffset}">
         <div header>
           <h5 class="mb-0">{{t('title')}}</h5>
-          <span style="font-size: 14px; color: var(--primary-color)" tabindex="0" role="button" (click)="closeReader()">{{t('close-reader')}}</span>
+          <span style="font-size: 0.875rem; color: var(--primary-color)" tabindex="0" role="button" (click)="closeReader()">{{t('close-reader')}}</span>
         </div>
         <div subheader>
           <div class="pagination-cont">
diff --git a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss
index dcfa9ddcd..e2794141e 100644
--- a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss
+++ b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss
@@ -64,7 +64,7 @@
 
 $dark-form-background-no-opacity: rgb(1, 4, 9);
 $primary-color: #0062cc;
-$action-bar-height: 38px;
+$action-bar-height: 2.375rem;
 
 .reader-container {
   &::-webkit-scrollbar {
@@ -85,13 +85,13 @@ $action-bar-height: 38px;
 
 // Drawer
 .control-container {
-    padding-bottom: 5px;
+    padding-bottom: 0.3125rem;
 }
 
 .page-stub {
-    margin-top: 6px;
-    padding-left: 2px;
-    padding-right: 2px;
+    margin-top: 0.375rem;
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
 }
 
 .drawer-body {
@@ -102,7 +102,7 @@ $action-bar-height: 38px;
         margin: 0 0.25rem;
 
         li a {
-            border: 1px solid var(--primary-color);
+            border: 0.0625rem solid var(--primary-color);
             margin: 0 0.25rem;
 
             .active {
@@ -127,7 +127,7 @@ $action-bar-height: 38px;
 .action-bar {
     background-color: var(--br-actionbar-bg-color);
     overflow: hidden;
-    box-shadow: 0 0 6px 0 rgb(0 0 0 / 70%);
+    box-shadow: 0 0 0.375rem 0 rgb(0 0 0 / 70%);
     max-height: $action-bar-height;
     height: $action-bar-height;
 
@@ -140,14 +140,14 @@ $action-bar-height: 38px;
         overflow: hidden;
     }
 
-    @media(max-width: 875px) {
+    @media(max-width: 54.6875rem) {
         .book-title {
             display: none;
         }
     }
 
     .book-title {
-        margin-top: 10px;
+        margin-top: 0.625rem;
         text-align: center;
         text-transform: capitalize;
         max-height: inherit;
@@ -199,8 +199,8 @@ $action-bar-height: 38px;
 
     &.immersive {
         height: calc((var(--vh, 1vh) * 100));
-        //padding-top: 0px;
-        //padding-bottom: 0px;
+        //padding-top: 0.0rem;
+        //padding-bottom: 0.0rem;
     }
 
     &.writing-style-vertical {
@@ -232,14 +232,14 @@ $action-bar-height: 38px;
 .book-content {
   position: relative;
   margin: 0 0;
-  padding: 20px 0px;
+  padding: 1.25rem 0.0rem;
 
   &.column-layout-1 {
       height: calc((var(--vh) * 100) - calc($action-bar-height)); //  * 2
 
       &.writing-style-vertical {
-          padding: 0 10px 0 0;
-          margin: 20px 0;
+          padding: 0 0.625rem 0 0;
+          margin: 1.25rem 0;
       }
     }
 
@@ -247,8 +247,8 @@ $action-bar-height: 38px;
         height: calc((var(--vh) * 100) - calc($action-bar-height)); //  * 2
 
         &.writing-style-vertical {
-            padding: 0 10px 0 0;
-            margin: 20px 0;
+            padding: 0 0.625rem 0 0;
+            margin: 1.25rem 0;
         }
     }
 
@@ -270,23 +270,23 @@ $action-bar-height: 38px;
 
 .pagination-cont {
     background: var(--br-actionbar-bg-color);
-    border-radius: 5px;
-    padding: 5px 15px;
-    margin: 0 0 5px;
+    border-radius: 0.3125rem;
+    padding: 0.3125rem 0.9375rem;
+    margin: 0 0 0.3125rem;
     border: var(--drawer-pagination-border);
 }
 
 .virt-pagination-cont {
-    padding-bottom: 5px;
-    margin-bottom: 5px;
+    padding-bottom: 0.3125rem;
+    margin-bottom: 0.3125rem;
     box-shadow: var(--drawer-pagination-horizontal-rule);
 }
 
 .bottom-bar {
     position: fixed;
     width: 100%;
-    bottom: 0px;
-    left: 0px;
+    bottom: 0.0rem;
+    left: 0.0rem;
     writing-mode: horizontal-tb;
 }
 
@@ -296,7 +296,7 @@ $action-bar-height: 38px;
 .column-layout-1 {
     .book-content {
         column-count: 1;
-        column-gap: 20px;
+        column-gap: 1.25rem;
         overflow: hidden;
         word-break: break-word;
         overflow-wrap: break-word;
@@ -306,7 +306,7 @@ $action-bar-height: 38px;
 .column-layout-2 {
     .book-content {
         column-count: 2;
-        column-gap: 20px;
+        column-gap: 1.25rem;
         overflow: hidden;
         word-break: break-word;
         overflow-wrap: break-word;
@@ -358,7 +358,7 @@ $pagination-opacity: 0;
 
 .right {
     position: absolute;
-    right: 0px;
+    right: 0.0rem;
     top: $action-bar-height;
     width: 20vw;
     z-index: 3;
@@ -369,7 +369,7 @@ $pagination-opacity: 0;
     outline: none;
 
     &.immersive {
-        top: 0px;
+        top: 0.0rem;
     }
 
     &.no-pointer-events {
@@ -380,7 +380,7 @@ $pagination-opacity: 0;
 // This class pushes the click area to the left a bit to let users click the scrollbar
 .right-with-scrollbar {
     position: absolute;
-    right: 17px;
+    right: 1.0625rem;
     top: $action-bar-height;
     width: 18%;
     z-index: 3;
@@ -392,13 +392,13 @@ $pagination-opacity: 0;
     cursor: pointer;
 
     &.immersive {
-        top: 0px;
+        top: 0.0rem;
     }
 }
 
 .left {
     position: absolute;
-    left: 0px;
+    left: 0.0rem;
     top: $action-bar-height;
     width: 20vw;
     background: $pagination-color;
@@ -411,7 +411,7 @@ $pagination-opacity: 0;
     cursor: pointer;
 
     &.immersive {
-        top: 0px;
+        top: 0.0rem;
     }
 }
 
diff --git a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html
index e2edb6a11..cb7907093 100644
--- a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html
+++ b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html
@@ -23,9 +23,9 @@
                 <div class="row g-0 controls">
                   <label for="fontsize" class="form-label col-6">{{t('font-size-label')}}</label>
                   <span class="col-6 float-end" style="display: inline-flex;">
-                            <i class="fa-solid fa-font"  style="font-size: 12px;"></i>
+                            <i class="fa-solid fa-font"  style="font-size: 0.75rem;"></i>
                             <input type="range" class="form-range ms-2 me-2" id="fontsize" min="50" max="300" step="10" formControlName="bookReaderFontSize" [ngbTooltip]="settingsForm.get('bookReaderFontSize')?.value + '%'">
-                            <i class="fa-solid fa-font" style="font-size: 24px;"></i>
+                            <i class="fa-solid fa-font" style="font-size: 1.5rem;"></i>
                         </span>
                 </div>
 
diff --git a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.scss b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.scss
index f379f66c3..69cf21803 100644
--- a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.scss
+++ b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.scss
@@ -21,8 +21,8 @@
             width: auto;
 
             .dot {
-                height: 25px;
-                width: 25px;
+                height: 1.5625rem;
+                width: 1.5625rem;
                 border-radius: 50%;
                 margin: 0 auto;
             }
@@ -41,7 +41,7 @@
 }
 
 .active {
-    border: 1px solid var(--primary-color);
+    border: 0.0625rem solid var(--primary-color);
 }
 
 ::ng-deep .accordion-body {
diff --git a/UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.scss b/UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.scss
+++ b/UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/app/browse-people/browse-authors.component.html b/UI/Web/src/app/browse-people/browse-authors.component.html
index 600f7c71c..6dd861ba1 100644
--- a/UI/Web/src/app/browse-people/browse-authors.component.html
+++ b/UI/Web/src/app/browse-people/browse-authors.component.html
@@ -21,8 +21,8 @@
         <app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
           <ng-template #subtitle>
             <div class="d-flex justify-content-evenly">
-                <div style="font-size: 12px">{{item.seriesCount | compactNumber}} series</div>
-                <div style="font-size: 12px">{{item.issueCount | compactNumber}} issues</div>
+                <div style="font-size: 0.75rem">{{item.seriesCount | compactNumber}} series</div>
+                <div style="font-size: 0.75rem">{{item.issueCount | compactNumber}} issues</div>
             </div>
           </ng-template>
         </app-person-card>
diff --git a/UI/Web/src/app/browse-people/browse-authors.component.scss b/UI/Web/src/app/browse-people/browse-authors.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/browse-people/browse-authors.component.scss
+++ b/UI/Web/src/app/browse-people/browse-authors.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss
index 17e5bc30a..1af154789 100644
--- a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss
+++ b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss
@@ -6,11 +6,11 @@
     overflow: auto;
     .modal-body {
     max-height: calc(100vh - 235px);
-    min-height: 150px;
+    min-height: 9.375rem;
         .list-group {
             overflow: auto;
             max-height: calc(100vh - 355px);
-            min-height: 32px;
+            min-height: 2.0rem;
         }
     }
 }
diff --git a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
index e16cdff78..d928a3cdd 100644
--- a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
+++ b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
@@ -6,7 +6,7 @@
   </div>
   <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
     <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
-        orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+        orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
       <li [ngbNavItem]="TabID.General">
         <a ngbNavLink>{{t(TabID.General)}}</a>
         <ng-template ngbNavContent>
diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
index 710f99819..0923829b4 100644
--- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
+++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
@@ -9,7 +9,7 @@
       <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
         <form [formGroup]="editSeriesForm">
           <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" [destroyOnHide]="false"
-              orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+              orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
 
             <li [ngbNavItem]="tabs[TabID.General]">
               <a ngbNavLink>{{t(tabs[TabID.General])}}</a>
@@ -689,7 +689,7 @@
                   <ul class="list-unstyled">
                     @for (volume of seriesVolumes; track volume.id) {
                       <li class="d-flex my-4">
-                        <app-image class="me-3" style="width: 74px;" width="74px" [imageUrl]="imageService.getVolumeCoverImage(volume.id)"></app-image>
+                        <app-image class="me-3" style="width: 4.625rem;" width="74px" [imageUrl]="imageService.getVolumeCoverImage(volume.id)"></app-image>
                         <div class="flex-grow-1">
                           <h5 class="mt-0 mb-1">{{formatVolumeName(volume)}}</h5>
                           <div>
diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss
index 608b891e9..82e38b8a6 100644
--- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss
+++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss
@@ -5,7 +5,7 @@
 
     .bulk-select {
         background-color: var(--bulk-selection-bg-color);
-        border-bottom: 2px solid var(--primary-color);
+        border-bottom: 0.125rem solid var(--primary-color);
         color: var(--bulk-selection-text-color) !important;
 
         .btn-icon {
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
index 6d2f0bc6a..121096f5e 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
@@ -61,7 +61,7 @@
     </virtual-scroller>
 
     @if (items.length === 0 && !isLoading) {
-      <div class="mx-auto" style="width: 200px;">
+      <div class="mx-auto" style="width: 12.5rem;">
         <p>
           @if (noDataTemplate) {
             <ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
index c4aacb7b8..dd5417b76 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
@@ -2,8 +2,8 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-    height: calc((var(--vh) *100) - 157px);
-    margin-bottom: 10px;
+    height: calc((var(--vh) *100) - 9.8125rem);
+    margin-bottom: 0.625rem;
 
     &.empty {
         height: auto;
@@ -15,7 +15,7 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
 }
 
 .card-container {
@@ -25,7 +25,7 @@
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 160px);
+    grid-template-columns: repeat(auto-fill, 10.0rem);
     grid-gap: 0.5rem;
     justify-content: space-between;
     width: 100%;
@@ -36,7 +36,7 @@
 
 }
 
-@media (max-width: 576px) {
+@media (max-width: 36.0rem) {
     .grid {
         grid-gap: 0.3rem;
     }
@@ -46,22 +46,22 @@
     display: flex;
     flex-flow: column;
     flex-shrink: 0;
-    font-size: 13px;
+    font-size: 0.8125rem;
     overflow: hidden;
-    padding: 0 5px;
+    padding: 0 0.3125rem;
     align-items: center;
     justify-content: space-around;
 
-    @media (max-width: 576px) {
-        padding: 0 5px 0 5px;
+    @media (max-width: 36.0rem) {
+        padding: 0 0.3125rem 0 0.3125rem;
     }
 
     .btn {
       text-decoration: none;
       color: hsla(0,0%,100%,.7);
-      height: 25px;
+      height: 1.5625rem;
       text-align: center;
-      padding: 0px 5px;
+      padding: 0.0rem 0.3125rem;
       -webkit-tap-highlight-color: transparent;
       background: none;
       border: 0;
@@ -94,7 +94,7 @@
 
 .virtual-scroller, virtual-scroller {
   width: 100%;
-  height: calc(var(--vh) * 100 - 155px);
+  height: calc(var(--vh) * 100 - 9.6875rem);
   mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%);
   -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%);
   overflow: auto;
@@ -133,8 +133,8 @@ h2 {
   cursor: pointer;
   padding: 0;
   margin: 0;
-  width: 25px;
-  height: 25px;
+  width: 1.5625rem;
+  height: 1.5625rem;
   position: relative;
   overflow: hidden;
 }
@@ -163,8 +163,8 @@ h2 {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  border-radius: 4px;
+  font-size: 1.125rem;
+  border-radius: 0.25rem;
   transform-style: preserve-3d;
 }
 
diff --git a/UI/Web/src/app/cards/chapter-card/chapter-card.component.html b/UI/Web/src/app/cards/chapter-card/chapter-card.component.html
index 9c0009860..8d9a50ace 100644
--- a/UI/Web/src/app/cards/chapter-card/chapter-card.component.html
+++ b/UI/Web/src/app/cards/chapter-card/chapter-card.component.html
@@ -61,14 +61,14 @@
 
     @if (chapter.isSpecial) {
       <div class="card-body meta-title" [ngbTooltip]="chapter.title.length > 34 ? chapter.title : null">
-        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
           {{chapter.title || chapter.range}}
         </div>
       </div>
 
     } @else if (chapter.titleName) {
       <div class="card-body meta-title" [ngbTooltip]="chapter.titleName.length > 34 ? chapter.titleName : null">
-        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+        <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
           {{chapter.titleName}}
         </div>
       </div>
diff --git a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html
index ea55a9af7..57cb68680 100644
--- a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html
+++ b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html
@@ -9,7 +9,7 @@
             <div class="row g-0 mt-3 pb-3">
               <div class="mx-auto">
                 <div class="row g-0 mb-3">
-                  <i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
+                  <i class="fa fa-file-upload mx-auto" style="font-size: 1.5rem; width: 1.25rem;" aria-hidden="true"></i>
                 </div>
 
                 <div class="d-flex justify-content-center">
@@ -50,7 +50,7 @@
       </ng-template>
     </form>
 
-    <div class="row g-0 chooser" style="padding-top: 10px">
+    <div class="row g-0 chooser" style="padding-top: 0.625rem">
       @if (showReset) {
         <div class="clickable col-auto" tabindex="0" (click)="reset()"
              [ngClass]="{'selected': !showApplyButton && selectedIndex === -1}">
diff --git a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss
index 3dad5235c..d8ad64cb7 100644
--- a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss
+++ b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss
@@ -1,5 +1,5 @@
-$image-height: 232.91px;
-$image-width: 160px;
+$image-height: 14.556875rem;
+$image-width: 10.0rem;
 
 .card-img-top {
     width: $image-width;
@@ -9,14 +9,14 @@ $image-width: 160px;
 
 
 .selected {
-    outline: 5px solid var(--primary-color);
+    outline: 0.3125rem solid var(--primary-color);
     outline-width: medium;
-    outline-offset: -1px;
+    outline-offset: -0.0625rem;
 }
 
 .chooser {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 160px);
+    grid-template-columns: repeat(auto-fill, 10.0rem);
     grid-gap: 0.5rem;
     justify-content: space-around;
 }
@@ -24,9 +24,9 @@ $image-width: 160px;
 ngx-file-drop ::ng-deep > div {
     // styling for the outer drop box
     width: 100%;
-    border: 2px solid var(--primary-color);
-    border-radius: 5px;
-    height: 100px;
+    border: 0.125rem solid var(--primary-color);
+    border-radius: 0.3125rem;
+    height: 6.25rem;
     margin: auto;
 
     > div {
diff --git a/UI/Web/src/app/cards/download-indicator/download-indicator.component.scss b/UI/Web/src/app/cards/download-indicator/download-indicator.component.scss
index 705938b9e..4a83b679b 100644
--- a/UI/Web/src/app/cards/download-indicator/download-indicator.component.scss
+++ b/UI/Web/src/app/cards/download-indicator/download-indicator.component.scss
@@ -1,4 +1,4 @@
 .download {
-    width: 80px;
-    height: 80px;
+    width: 5.0rem;
+    height: 5.0rem;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/cards/external-series-card/external-series-card.component.scss b/UI/Web/src/app/cards/external-series-card/external-series-card.component.scss
index 40de98a3a..7c87ac13d 100644
--- a/UI/Web/src/app/cards/external-series-card/external-series-card.component.scss
+++ b/UI/Web/src/app/cards/external-series-card/external-series-card.component.scss
@@ -9,6 +9,6 @@ a {
 }
 
 .card-title {
-    padding: 5px 0;
+    padding: 0.3125rem 0;
     max-width: unset;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss b/UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss
index 2745d7977..a34d044ae 100644
--- a/UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss
+++ b/UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss
@@ -1,7 +1,7 @@
 @use '../../../card-item-common';
 
 :host ::ng-deep .extreme-blur {
-  filter: brightness(50%) blur(4px);
+  filter: brightness(50%) blur(0.25rem);
 }
 
 .card-title-container {
diff --git a/UI/Web/src/app/cards/person-card/person-card.component.scss b/UI/Web/src/app/cards/person-card/person-card.component.scss
index 26724b2c0..f3b9943b0 100644
--- a/UI/Web/src/app/cards/person-card/person-card.component.scss
+++ b/UI/Web/src/app/cards/person-card/person-card.component.scss
@@ -1,4 +1,4 @@
-$image-height: 160px;
+$image-height: 10.0rem;
 @use '../../../card-item-common';
 
 // Override so we can have square cards
@@ -11,7 +11,7 @@ $image-height: 160px;
 
 .card-item-container {
   background-color: unset;
-  border: 1px solid transparent;
+  border: 0.0625rem solid transparent;
   transition: all ease-in-out 300ms;
 
   .overlay {
@@ -34,7 +34,7 @@ $image-height: 160px;
     bottom: 0;
     background-color: transparent;
     position: unset !important;
-    margin-bottom: 5px;
+    margin-bottom: 0.3125rem;
     display: flex;
     flex-direction: column;
 
diff --git a/UI/Web/src/app/cards/series-card/series-card.component.html b/UI/Web/src/app/cards/series-card/series-card.component.html
index 4b3a61599..47a693a97 100644
--- a/UI/Web/src/app/cards/series-card/series-card.component.html
+++ b/UI/Web/src/app/cards/series-card/series-card.component.html
@@ -59,7 +59,7 @@
 
     </div>
     <div class="card-body meta-title" [ngbTooltip]="series.localizedName.length > 34 ? series.localizedName : null">
-      <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+      <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
         {{relation ? (relation | relationship) : (series.localizedName | defaultValue)}}
       </div>
     </div>
diff --git a/UI/Web/src/app/cards/volume-card/volume-card.component.html b/UI/Web/src/app/cards/volume-card/volume-card.component.html
index 0a6e6d24e..e95a46fd8 100644
--- a/UI/Web/src/app/cards/volume-card/volume-card.component.html
+++ b/UI/Web/src/app/cards/volume-card/volume-card.component.html
@@ -56,14 +56,14 @@
       @if ((libraryType === LibraryType.LightNovel || libraryType === LibraryType.Book)) {
         @if (volume.name) {
           <div class="card-body meta-title">
-            <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+            <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
               {{volume.name}}
             </div>
           </div>
         }
       } @else if (volume.chapters[0].titleName) {
         <div class="card-body meta-title">
-          <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
+          <div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
             {{volume.chapters[0].titleName}}
           </div>
         </div>
diff --git a/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss b/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss
index cad8e95bc..9f2d03e03 100644
--- a/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss
+++ b/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss
@@ -11,7 +11,7 @@
 .carousel-container {
     .section-title {
         font-weight: 400;
-        margin-left: 5px;
+        margin-left: 0.3125rem;
         color: var(--carousel-header-text-color);
         text-decoration: var(--carousel-header-text-decoration);
 
@@ -34,7 +34,7 @@
 }
 
 ::ng-deep .swiper-wrapper {
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
 }
 
 ::ng-deep .last-carousel {
diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
index 6e9c68eb7..f117b650e 100644
--- a/UI/Web/src/app/chapter-detail/chapter-detail.component.html
+++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
@@ -207,7 +207,7 @@
 
 
 
-    <app-loading [loading]="isLoading" style="min-height: 300px"></app-loading>
+    <app-loading [loading]="isLoading" style="min-height: 18.75rem"></app-loading>
   </div>
 
 </ng-container>
diff --git a/UI/Web/src/app/collections/_components/all-collections/all-collections.component.scss b/UI/Web/src/app/collections/_components/all-collections/all-collections.component.scss
index b310ff108..6dc0e3155 100644
--- a/UI/Web/src/app/collections/_components/all-collections/all-collections.component.scss
+++ b/UI/Web/src/app/collections/_components/all-collections/all-collections.component.scss
@@ -1,3 +1,3 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
diff --git a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.scss b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.scss
index 4ac45a62a..52d2902a4 100644
--- a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.scss
+++ b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.scss
@@ -1,12 +1,12 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
 
 
 .poster {
   width: 100%;
-  max-width: 300px;
+  max-width: 18.75rem;
 }
 
 @media(max-width: var(--grid-breakpoints-sm)) {
@@ -23,17 +23,17 @@
 
 .card-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
+  grid-template-columns: repeat(auto-fill, 10.0rem);
   grid-gap: 0.5rem;
   justify-content: space-around;
-  padding-bottom: 20px;
+  padding-bottom: 1.25rem;
 }
 
 
 .virtual-scroller, virtual-scroller {
   width: 100%;
   height: calc(100vh - 85px);
-  max-height: calc(var(--vh)*100 - 170px);
+  max-height: calc(var(--vh)*100 - 10.625rem);
 }
 
 h2 {
@@ -44,7 +44,7 @@ h2 {
 .under-image {
   background-color: var(--breadcrumb-bg-color);
   color: white;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 0.3125rem;
+  border-bottom-right-radius: 0.3125rem;
   text-align: center;
 }
diff --git a/UI/Web/src/app/dashboard/_components/dashboard.component.scss b/UI/Web/src/app/dashboard/_components/dashboard.component.scss
index 8e2c02603..74c4a03cc 100644
--- a/UI/Web/src/app/dashboard/_components/dashboard.component.scss
+++ b/UI/Web/src/app/dashboard/_components/dashboard.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-    margin-top: 10px;
-    padding: 0 0 0 10px;
+    margin-top: 0.625rem;
+    padding: 0 0 0 0.625rem;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/library-detail/library-detail.component.scss b/UI/Web/src/app/library-detail/library-detail.component.scss
index 308fd24f6..d31c59cbc 100644
--- a/UI/Web/src/app/library-detail/library-detail.component.scss
+++ b/UI/Web/src/app/library-detail/library-detail.component.scss
@@ -4,12 +4,12 @@
 }
 
 .viewport {
-    width: 600px;
+    width: 37.5rem;
     height: 100%;
     overflow-y: auto;
 }
 
 
 .main-container {
-    margin-top: 10px;
+    margin-top: 0.625rem;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
index b627c84e2..f710eb964 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
@@ -3,7 +3,7 @@
     background-color: rgba(0,0,0,0.5);
 }
 .active {
-    border: 2px solid red;
+    border: 0.125rem solid red;
 }
 
 .full-opacity {
@@ -12,7 +12,7 @@
 
 .spacer {
     width: 100%;
-    height: 300px;
+    height: 18.75rem;
     cursor: pointer;
 
     .animate {
@@ -25,7 +25,7 @@
     }
 
   .empty-space {
-    height: 200px;
+    height: 12.5rem;
   }
 }
 
@@ -47,7 +47,7 @@ img, .full-width {
       transform: translateY(0);
     }
     50% {
-      transform: translateY(-10px);
+      transform: translateY(-0.625rem);
     }
 }
 
diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html
index 195b66b2b..e9c96df0b 100644
--- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html
+++ b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html
@@ -11,7 +11,7 @@
     }
     @if (menuOpen) {
       <div class="fixed-top overlay" [@slideFromTop]="menuOpen">
-        <div style="display: flex; margin-top: 5px;">
+        <div style="display: flex; margin-top: 0.3125rem;">
           <button class="btn btn-icon" style="height: 100%" [title]="t('back')" (click)="closeReader()">
             <i class="fa fa-arrow-left" aria-hidden="true"></i>
             <span class="visually-hidden">{{t('back')}}</span>
diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss
index cd4de992e..6c8c68ef8 100644
--- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss
+++ b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss
@@ -1,8 +1,8 @@
 $center-width: 50%;
 $side-width: 25%;
 
-$dash-width: 3px;
-$pointer-offset: 5px;
+$dash-width: 0.1875rem;
+$pointer-offset: 0.3125rem;
 
 @use '../../.././../manga-reader-common';
 
@@ -54,7 +54,7 @@ $pointer-offset: 5px;
 }
 
 .bottom-menu {
-    padding: 20px 20px;
+    padding: 1.25rem 1.25rem;
 }
 
 
@@ -66,23 +66,23 @@ $pointer-offset: 5px;
   color: var(--manga-reader-overlay-text-color);
 }
 
-@media(min-width: 600px) {
+@media(min-width: 37.5rem) {
   .overlay .left .i {
-      left: 20px;
+      left: 1.25rem;
   }
   .overlay .right .i {
-      right: 20px;
+      right: 1.25rem;
   }
 }
 
 // Splitting Icon
 .split {
-    height: 20px;
-    width: 40px;
+    height: 1.25rem;
+    width: 2.5rem;
     z-index: 1;
     top: 0;
     overflow: hidden;
-    border: 2px solid #ccc;
+    border: 0.125rem solid #ccc;
     vertical-align: sub;
     display: inline-block;
 
@@ -92,19 +92,19 @@ $pointer-offset: 5px;
 
     /* Control the left side */
     .left-side {
-        height: 20px;
-        width: 20px;
+        height: 1.25rem;
+        width: 1.25rem;
         background-color: rgba(255, 255, 255, 0.6);
-        margin-top: -16px;
+        margin-top: -1.0rem;
     }
 
     /* Control the right side */
     .right-side {
-        height: 20px;
-        margin-left: 20px;
-        width: 20px;
+        height: 1.25rem;
+        margin-left: 1.25rem;
+        width: 1.25rem;
         background-color: rgba(255, 255, 255, 0.6);
-        margin-top: -16px;
+        margin-top: -1.0rem;
     }
 
     .none {
@@ -116,32 +116,32 @@ $pointer-offset: 5px;
   }
 
   .split-double {
-    height: 20px;
+    height: 1.25rem;
     display: inline-block;
     font-size: .7em;
 
     .right {
-      left: -7px;
+      left: -0.4375rem;
     }
   }
 
   ::ng-deep {
     .custom-slider .ngx-slider .ngx-slider-bar {
       background: #e9ffe2;
-      height: 2px;
+      height: 0.125rem;
     }
     .custom-slider .ngx-slider .ngx-slider-selection {
       background: var(--primary-color);
     }
 
     .custom-slider .ngx-slider .ngx-slider-pointer {
-      width: 8px;
-      height: 16px;
+      width: 0.5rem;
+      height: 1.0rem;
       top: auto; /* to remove the default positioning */
       bottom: 0;
       background-color: var(--primary-color); // #333;
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
+      border-top-left-radius: 0.1875rem;
+      border-top-right-radius: 0.1875rem;
     }
 
     .custom-slider .ngx-slider .ngx-slider-pointer:after {
@@ -149,7 +149,7 @@ $pointer-offset: 5px;
     }
 
     .custom-slider .ngx-slider .ngx-slider-bubble {
-      bottom: 14px;
+      bottom: 0.875rem;
       font-weight: bold;
     }
 
@@ -161,12 +161,12 @@ $pointer-offset: 5px;
 
 
     .custom-slider .ngx-slider .ngx-slider-tick {
-      width: 1px;
-      height: 10px;
-      margin-left: 4px;
+      width: 0.0625rem;
+      height: 0.625rem;
+      margin-left: 0.25rem;
       border-radius: 0;
       background: #ffe4d1;
-      top: -1px;
+      top: -0.0625rem;
     }
 
     .custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
@@ -188,13 +188,13 @@ $pointer-offset: 5px;
 
     i {
         color: white;
-        font-size: 42px;
+        font-size: 2.625rem;
     }
 
     .right {
       position: absolute;
-      right: 0px;
-      top: 0px;
+      right: 0.0rem;
+      top: 0.0rem;
       width: $side-width;
       background: $pagination-bg;
       max-height: calc(var(--vh)*100);
@@ -203,8 +203,8 @@ $pointer-offset: 5px;
 
     .top {
         position: absolute;
-        right: 0px;
-        top: 0px;
+        right: 0.0rem;
+        top: 0.0rem;
         width: 100%;
         background: $pagination-bg;
         z-index: 100;
@@ -212,8 +212,8 @@ $pointer-offset: 5px;
 
     .left {
         position: absolute;
-        left: 0px;
-        top: 0px;
+        left: 0.0rem;
+        top: 0.0rem;
         width: $side-width;
         background: $pagination-bg;
         max-height: calc(var(--vh)*100);
@@ -222,8 +222,8 @@ $pointer-offset: 5px;
 
     .bottom {
         position: fixed; // I couldn't figure out how to do this with abs, so only the bottom bar will not be scrollable
-        left: 0px;
-        bottom: 0px;
+        left: 0.0rem;
+        bottom: 0.0rem;
         width: 100%;
         background: $pagination-bg;
         z-index: 100;
diff --git a/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.scss b/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.scss
index f4bb793e7..4c5f23cce 100644
--- a/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.scss
+++ b/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.scss
@@ -1,5 +1,5 @@
 ::ng-deep .select2-selection__rendered {
-  padding-top: 4px !important;
+  padding-top: 0.25rem !important;
 }
 
 
@@ -19,5 +19,5 @@
 
 ::ng-deep [ngbDatepickerDayView]:hover:not(.bg-primary), [ngbDatepickerDayView].active:not(.bg-primary) {
   background: var(--primary-color-dark-shade) !important;
-  outline: 1px solid var(--primary-color-dark-shade) !important;
+  outline: 0.0625rem solid var(--primary-color-dark-shade) !important;
 }
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.html b/UI/Web/src/app/metadata-filter/metadata-filter.component.html
index 3ec9dbde1..0ea55d06c 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.html
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.html
@@ -41,14 +41,14 @@
             </div>
             <div class="col-md-3 col-sm-9">
               <label for="sort-options" class="form-label">{{t('sort-by-label')}}</label>
-              <button class="btn btn-sm btn-icon" (click)="updateSortOrder()" style="height: 25px; padding-bottom: 0;" [disabled]="filterSettings.sortDisabled">
+              <button class="btn btn-sm btn-icon" (click)="updateSortOrder()" style="height: 1.5625rem; padding-bottom: 0;" [disabled]="filterSettings.sortDisabled">
                 @if (isAscendingSort) {
                   <i class="fa fa-arrow-up" [title]="t('ascending-alt')"></i>
                 } @else {
                   <i class="fa fa-arrow-down" [title]="t('descending-alt')"></i>
                 }
               </button>
-              <select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
+              <select id="sort-options" class="form-select" formControlName="sortField" style="height: 2.375rem;">
                 @for(field of allSortFields; track field.value) {
                   <option [value]="field.value">{{field.title}}</option>
                 }
diff --git a/UI/Web/src/app/nav/_components/events-widget/events-widget.component.html b/UI/Web/src/app/nav/_components/events-widget/events-widget.component.html
index 15428d371..d01d69e5e 100644
--- a/UI/Web/src/app/nav/_components/events-widget/events-widget.component.html
+++ b/UI/Web/src/app/nav/_components/events-widget/events-widget.component.html
@@ -60,7 +60,7 @@
                 }
                 <div class="progress-container row g-0 align-items-center">
                   @if(message.progress === 'indeterminate') {
-                    <div class="progress" role="progressbar" style="height: 5px;">
+                    <div class="progress" role="progressbar" style="height: 0.3125rem;">
                       <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%" [attr.aria-valuenow]="100" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                   }
@@ -74,7 +74,7 @@
                 }
                 <div class="progress-container row g-0 align-items-center">
                   <div class="col-2">{{prettyPrintProgress(message.body.progress) + '%'}}</div>
-                  <div class="col-10 progress" role="progressbar" style="height: 5px;">
+                  <div class="col-10 progress" role="progressbar" style="height: 0.3125rem;">
                     <div class="progress-bar"
                          [ngStyle]="{'width': message.body.progress * 100 + '%'}"
                          [attr.aria-valuenow]="message.body.progress * 100"
@@ -116,7 +116,7 @@
 
               <div class="progress-container row g-0 align-items-center">
                 <div class="col-2">{{download.progress}}%</div>
-                <div class="col-10 progress" role="progressbar" style="height: 5px;">
+                <div class="col-10 progress" role="progressbar" style="height: 0.3125rem;">
                   <div class="progress-bar" [ngStyle]="{'width': download.progress + '%'}" [attr.aria-valuenow]="download.progress" aria-valuemin="0" aria-valuemax="100"></div>
                 </div>
               </div>
diff --git a/UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss b/UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss
index 003cd4bd4..2ac956df1 100644
--- a/UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss
+++ b/UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss
@@ -20,7 +20,7 @@
 
 .widget-button--indicator {
   position: absolute;
-  top: 24px;
+  top: 1.5rem;
   color: var(--event-widget-activity-bg-color);
 
   &.error {
@@ -37,16 +37,16 @@
 ::ng-deep .nav-events {
 
     .popover-body {
-        min-width: 300px;
-        max-width: 300px;
-        padding: 0px;
-        box-shadow: 0px 0px 12px rgb(0 0 0 / 75%);
+        min-width: 18.75rem;
+        max-width: 18.75rem;
+        padding: 0.0rem;
+        box-shadow: 0.0rem 0.0rem 0.75rem rgb(0 0 0 / 75%);
         max-height: calc(100vh - 60px);
         overflow-y: auto;
     }
 
     .popover {
-        min-width: 300px;
+        min-width: 18.75rem;
     }
 }
 
@@ -99,9 +99,9 @@
     }
 
     .btn-close {
-      top: 5px;
-      right: 10px;
-      font-size: 11px;
+      top: 0.3125rem;
+      right: 0.625rem;
+      font-size: 0.6875rem;
       position: absolute;
     }
   }
@@ -118,9 +118,9 @@
     }
 
     .btn-close {
-      top: 35px;
-      right: 10px;
-      font-size: 11px;
+      top: 2.1875rem;
+      right: 0.625rem;
+      font-size: 0.6875rem;
       position: absolute;
     }
   }
diff --git a/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html b/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html
index bb8838839..f8b8f1c4f 100644
--- a/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html
+++ b/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html
@@ -156,7 +156,7 @@
             }
 
             @if (searchTerm.length > 0 && !isLoading) {
-              <li class="list-group-item" style="min-height: 34px" (click)="$event.stopPropagation()">
+              <li class="list-group-item" style="min-height: 2.125rem" (click)="$event.stopPropagation()">
                 <ng-container [ngTemplateOutlet]="extraTemplate"></ng-container>
                 <form [formGroup]="searchSettingsForm">
                   <div class="form-check form-switch">
diff --git a/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.scss b/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.scss
index e0a4eb61d..9bdfea295 100644
--- a/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.scss
+++ b/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.scss
@@ -3,16 +3,16 @@
 }
 
 .btn-close {
-    margin-top: 8px;
+    margin-top: 0.5rem;
     font-size: 0.8rem;
     position: absolute;
-    right: 5px;
+    right: 0.3125rem;
 }
 
 
 .typeahead-input {
-  border: 1px solid transparent;
-  border-radius: 4px;
+  border: 0.0625rem solid transparent;
+  border-radius: 0.25rem;
   overflow: hidden;
   position: relative;
   z-index: 1;
@@ -21,7 +21,7 @@
   cursor: text;
   background-color: var(--searchbar-bg-color);
   color: var(--body-text-color);
-  min-height: 32px;
+  min-height: 2.0rem;
   transition-property: all;
   transition-duration: 0.3s;
   display: block;
@@ -30,23 +30,23 @@
   .search {
     display: flex;
     position: relative;
-    min-height: 32px;
+    min-height: 2.0rem;
 
     .btn-close {
       position: unset;
       margin-top: unset;
       align-self: center;
-      margin: 0 8px;
+      margin: 0 0.5rem;
     }
   }
 
 
   input {
     width: 100%;
-    padding: 0px 6px;
+    padding: 0.0rem 0.375rem;
     outline: 0 !important;
     border-radius: .28571429rem;
-    margin: 0px !important;
+    margin: 0.0rem !important;
     text-indent: 0 !important;
     line-height: inherit !important;
     box-shadow: none !important;
@@ -55,7 +55,7 @@
     display: block;
     opacity: 1;
     position: relative;
-    left: 4px;
+    left: 0.25rem;
     border: none;
     background-color: transparent;
 
@@ -75,7 +75,7 @@
 }
 
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 61.25rem) {
   .typeahead-input {
     width: 65%;
   }
@@ -83,14 +83,14 @@
 
 
 /* small devices (phones, 650px and down) */
-@media only screen and (max-width:650px) {
+@media only screen and (max-width:40.625rem) {
     .typeahead-input {
         width: 75%;
         margin: 0 auto;
     }
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 31.25rem) {
   .typeahead-input {
     width: 100%;
   }
@@ -113,18 +113,18 @@
 
 .dropdown {
     width: 100vw;
-    top: 55px; //header offset
+    top: 3.4375rem; //header offset
     position: fixed;
     justify-content: center;
     left: 0;
     overflow-y: auto;
     display: flex;
     flex-wrap: wrap;
-    margin-top: 9px;
+    margin-top: 0.5625rem;
 }
 
 .list-group {
-    max-width: 600px;
+    max-width: 37.5rem;
     z-index:1000;
     overflow-y: auto;
     overflow-x: hidden;
@@ -138,31 +138,31 @@
     max-height: unset;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 37.5rem) {
     .list-group {
         max-width: unset;
     }
 }
 
 .list-group-item {
-    padding: 5px 10px;
+    padding: 0.3125rem 0.625rem;
 }
 
 
 li {
     list-style: none;
-    border-radius: 0px !important;
+    border-radius: 0.0rem !important;
     margin: 0 !important;
 }
 
 ul ul {
-    border-radius: 0px !important;
+    border-radius: 0.0rem !important;
 }
 
 
 .spinner-border {
     position: absolute;
-    right: 10px;
+    right: 0.625rem;
     margin: auto;
     cursor: pointer;
     top: 30%;
diff --git a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html
index 7c49b2934..ee64b9dfd 100644
--- a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html
+++ b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html
@@ -33,7 +33,7 @@
                 >
 
                   <ng-template #libraryTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="clickLibraryResult(item)">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickLibraryResult(item)">
                       <div class="ms-1">
                         <span>{{item.name}}</span>
                       </div>
@@ -41,8 +41,8 @@
                   </ng-template>
 
                   <ng-template #seriesTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="clickSeriesSearchResult(item)">
-                      <div style="width: 24px" class="me-1">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickSeriesSearchResult(item)">
+                      <div style="width: 1.5rem" class="me-1">
                         <app-image class="me-3 search-result" width="24px" [imageUrl]="imageService.getSeriesCoverImage(item.seriesId)"></app-image>
                       </div>
                       <div class="ms-1">
@@ -60,8 +60,8 @@
                   </ng-template>
 
                   <ng-template #bookmarkTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="clickBookmarkSearchResult(item)">
-                      <div style="width: 24px" class="me-1">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickBookmarkSearchResult(item)">
+                      <div style="width: 1.5rem" class="me-1">
                         <app-image class="me-3 search-result" width="24px" [imageUrl]="imageService.getSeriesCoverImage(item.seriesId)"></app-image>
                       </div>
                       <div class="ms-1">
@@ -79,8 +79,8 @@
                   </ng-template>
 
                   <ng-template #collectionTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="clickCollectionSearchResult(item)">
-                      <div style="width: 24px" class="me-1">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickCollectionSearchResult(item)">
+                      <div style="width: 1.5rem" class="me-1">
                         <app-image class="me-3 search-result" width="24px" [imageUrl]="imageService.getCollectionCoverImage(item.id)"></app-image>
                       </div>
                       <div class="ms-1">
@@ -94,7 +94,7 @@
                   </ng-template>
 
                   <ng-template #readingListTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="clickReadingListSearchResult(item)">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickReadingListSearchResult(item)">
                       <div class="ms-1">
                         <span>{{item.title}}</span>
                         <app-promoted-icon [promoted]="item.promoted"></app-promoted-icon>
@@ -103,7 +103,7 @@
                   </ng-template>
 
                   <ng-template #tagTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="goToOther(FilterField.Tags, item.id)">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="goToOther(FilterField.Tags, item.id)">
                       <div class="ms-1">
                         <span>{{item.title}}</span>
                       </div>
@@ -111,8 +111,8 @@
                   </ng-template>
 
               <ng-template #personTemplate let-item>
-                <div style="display: flex;padding: 5px;" class="clickable" (click)="goToPerson(item)">
-                  <div style="width: 24px" class="me-1">
+                <div style="display: flex;padding: 0.3125rem;" class="clickable" (click)="goToPerson(item)">
+                  <div style="width: 1.5rem" class="me-1">
                     <app-image class="me-3 search-result"
                                [styles]="{'background': 'none', 'max-height': '24px', 'height': '24px', 'width': '24px', 'border-radius': '50%'}"
                                width="24px" [imageUrl]="imageService.getPersonImage(item.id)" [errorImage]="imageService.noPersonImage"></app-image>
@@ -124,7 +124,7 @@
               </ng-template>
 
                   <ng-template #genreTemplate let-item>
-                    <div style="display: flex;padding: 5px;" class="clickable" (click)="goToOther(FilterField.Genres, item.id)">
+                    <div style="display: flex;padding: 0.3125rem;" class="clickable" (click)="goToOther(FilterField.Genres, item.id)">
                       <div class="ms-1">
                         <div [innerHTML]="item.title"></div>
                       </div>
@@ -134,7 +134,7 @@
 
 
                   <ng-template #chapterTemplate let-item>
-                    <div style="display: flex;padding: 5px;" class="clickable" (click)="clickChapterSearchResult(item)">
+                    <div style="display: flex;padding: 0.3125rem;" class="clickable" (click)="clickChapterSearchResult(item)">
                       <div class="ms-1">
                         @if (item.files.length > 0) {
                           <app-series-format [format]="item.files?.[0].format"></app-series-format>
@@ -146,7 +146,7 @@
                   </ng-template>
 
                   <ng-template #fileTemplate let-item>
-                    <div class="clickable" style="display: flex;padding: 5px;" (click)="clickFileSearchResult(item)">
+                    <div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickFileSearchResult(item)">
                       <div class="ms-1">
                         <app-series-format [format]="item.format"></app-series-format>
                         <span>{{item.filePath}}</span>
diff --git a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss
index 296e9de45..5735d7e18 100644
--- a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss
+++ b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss
@@ -50,7 +50,7 @@
     display: inherit;
   }
 
-  @media only screen and (max-width:300px) {
+  @media only screen and (max-width:18.75rem) {
     .xs-only {
       display: inherit;
     }
@@ -103,7 +103,7 @@
   }
 
   .ng-autocomplete {
-    margin-bottom: 0px;
+    margin-bottom: 0.0rem;
   }
 
   .primary-text {
@@ -125,7 +125,7 @@
   }
 
 /* small devices (phones, 650px and down) */
-@media only screen and (max-width:650px) {
+@media only screen and (max-width:40.625rem) {
   .navbar-nav {
     width: 0;
   }
diff --git a/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html b/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html
index 7e75e541c..252f54b53 100644
--- a/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html
+++ b/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html
@@ -3,12 +3,12 @@
     <div class="{{theme}}" #container>
 
       @if (isLoading) {
-        <div class="loading mx-auto" style="min-width: 200px; width: 600px;">
+        <div class="loading mx-auto" style="min-width: 12.5rem; width: 37.5rem;">
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
           {{t('loading-message')}}
         </div>
         <div class="progress-container row g-0 align-items-center">
-          <div class="progress" style="height: 5px;">
+          <div class="progress" style="height: 0.3125rem;">
             <div class="progress-bar" role="progressbar" [ngStyle]="{'width': loadPercent + '%'}" [attr.aria-valuenow]="loadPercent" aria-valuemin="0" aria-valuemax="100"></div>
           </div>
         </div>
@@ -58,7 +58,7 @@
       }
 
       <ng-template #multiToolbar>
-        <div style="min-height: 36px" id="toolbarViewer" [ngStyle]="{'background-color': backgroundColor, 'color': fontColor}">
+        <div style="min-height: 2.25rem" id="toolbarViewer" [ngStyle]="{'background-color': backgroundColor, 'color': fontColor}">
           <div id="toolbarViewerLeft">
             <pdf-toggle-sidebar></pdf-toggle-sidebar>
             <pdf-find-button [textLayer]='true'></pdf-find-button>
@@ -105,16 +105,16 @@
             <button (click)="toggleScrollMode()" class="btn-icon toolbarButton" [ngbTooltip]="scrollMode | pdfScrollModeType" [disabled]="this.pageLayoutMode === 'book'">
               @switch (scrollMode) {
                 @case (ScrollModeType.vertical) {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM11 0v.5c0 1-.5 1.5-1.5 1.5h-3C5.5 2 5 1.5 5 .5V0h6zM11 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6z"></path></svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM11 0v.5c0 1-.5 1.5-1.5 1.5h-3C5.5 2 5 1.5 5 .5V0h6zM11 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6z"></path></svg>
                 }
                 @case (ScrollModeType.page) {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,7V9H12V17H14V7H10Z"></path></svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M10,7V9H12V17H14V7H10Z"></path></svg>
                 }
                 @case (ScrollModeType.horizontal) {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px"> <path fill="currentColor" d="M0 4h1.5c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5H0zM9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM16 4h-1.5c-1 0-1.5.5-1.5 1.5v5c0 1 .5 1.5 1.5 1.5H16z"></path> </svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem"> <path fill="currentColor" d="M0 4h1.5c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5H0zM9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM16 4h-1.5c-1 0-1.5.5-1.5 1.5v5c0 1 .5 1.5 1.5 1.5H16z"></path> </svg>
                 }
                 @case (ScrollModeType.wrapped) {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C1 4.5 1.5 4 2.5 4zM7 0v.5C7 1.5 6.5 2 5.5 2h-3C1.5 2 1 1.5 1 .5V0h6zM7 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6zM13.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5c0-1 .5-1.5 1.5-1.5zM15 0v.5c0 1-.5 1.5-1.5 1.5h-3C9.5 2 9 1.5 9 .5V0h6zM15 16v-.507c0-1-.5-1.5-1.5-1.5h-3C9.5 14 9 14.5 9 15.5v.5h6z"></path></svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C1 4.5 1.5 4 2.5 4zM7 0v.5C7 1.5 6.5 2 5.5 2h-3C1.5 2 1 1.5 1 .5V0h6zM7 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6zM13.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5c0-1 .5-1.5 1.5-1.5zM15 0v.5c0 1-.5 1.5-1.5 1.5h-3C9.5 2 9 1.5 9 .5V0h6zM15 16v-.507c0-1-.5-1.5-1.5-1.5h-3C9.5 14 9 14.5 9 15.5v.5h6z"></path></svg>
                 }
               }
 
@@ -125,13 +125,13 @@
 
               @switch (spreadMode) {
                 @case ('off') {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M6 3c-1 0-1.5.5-1.5 1.5v7c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5z"></path></svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 3c-1 0-1.5.5-1.5 1.5v7c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5z"></path></svg>
                 }
                 @case ('odd') {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M10.56 3.5C9.56 3.5 9 4 9 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.93 1.2c.8 0 1.4.2 1.8.64.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.44-.2.3-.6.6-1 .93l-.6.4c-.4.3-.6.4-.7.55-.1.1-.2.2-.3.4h3.2v1.27h-5c0-.5.1-1 .3-1.43.2-.49.7-1 1.5-1.54.7-.5 1.1-.8 1.3-1.02.3-.3.4-.7.4-1.05 0-.3-.1-.6-.3-.77-.2-.2-.4-.3-.7-.3-.4 0-.7.2-.9.5-.1.2-.1.5-.2.9h-1.4c0-.6.2-1.1.3-1.5.4-.7 1.1-1.1 2-1.1zM1.54 3.5C.54 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.54 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.8 1.125H4.5V12H3V6.9H1.3v-1c.5 0 .8 0 .97-.03.33-.07.53-.17.73-.37.1-.2.2-.3.25-.5.05-.2.05-.3.05-.3z"></path></svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M10.56 3.5C9.56 3.5 9 4 9 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.93 1.2c.8 0 1.4.2 1.8.64.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.44-.2.3-.6.6-1 .93l-.6.4c-.4.3-.6.4-.7.55-.1.1-.2.2-.3.4h3.2v1.27h-5c0-.5.1-1 .3-1.43.2-.49.7-1 1.5-1.54.7-.5 1.1-.8 1.3-1.02.3-.3.4-.7.4-1.05 0-.3-.1-.6-.3-.77-.2-.2-.4-.3-.7-.3-.4 0-.7.2-.9.5-.1.2-.1.5-.2.9h-1.4c0-.6.2-1.1.3-1.5.4-.7 1.1-1.1 2-1.1zM1.54 3.5C.54 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.54 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.8 1.125H4.5V12H3V6.9H1.3v-1c.5 0 .8 0 .97-.03.33-.07.53-.17.73-.37.1-.2.2-.3.25-.5.05-.2.05-.3.05-.3z"></path></svg>
                 }
                 @case ('even') {
-                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px"><path fill="currentColor" d="M1.5 3.5C.5 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm2 1.2c.8 0 1.4.2 1.8.6.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.4-.2.3-.5.7-1 1l-.6.4c-.4.3-.6.4-.75.56-.15.14-.25.24-.35.44H6v1.3H1c0-.6.1-1.1.3-1.5.3-.6.7-1 1.5-1.6.7-.4 1.1-.8 1.28-1 .32-.3.42-.6.42-1 0-.3-.1-.6-.23-.8-.17-.2-.37-.3-.77-.3s-.7.1-.9.5c-.04.2-.1.5-.1.9H1.1c0-.6.1-1.1.3-1.5.4-.7 1.1-1.1 2.1-1.1zM10.54 3.54C9.5 3.54 9 4 9 5v6.5c0 1 .5 1.5 1.54 1.5h4c.96 0 1.46-.5 1.46-1.5V5c0-1-.5-1.46-1.5-1.46zm1.9.95c.7 0 1.3.2 1.7.5.4.4.6.8.6 1.4 0 .4-.1.8-.4 1.1-.2.2-.3.3-.5.4.1 0 .3.1.6.3.4.3.5.8.5 1.4 0 .6-.2 1.2-.6 1.6-.4.5-1.1.7-1.9.7-1 0-1.8-.3-2.2-1-.14-.29-.24-.69-.24-1.29h1.4c0 .3 0 .5.1.7.2.4.5.5 1 .5.3 0 .5-.1.7-.3.2-.2.3-.5.3-.8 0-.5-.2-.8-.6-.95-.2-.05-.5-.15-1-.15v-1c.5 0 .8-.1 1-.14.3-.1.5-.4.5-.9 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.7-.3-.3 0-.6.1-.75.3-.2.2-.2.5-.2.86h-1.34c0-.4.1-.7.19-1.1 0-.12.2-.32.4-.62.2-.2.4-.3.7-.4.3-.1.6-.1 1-.1z"></path></svg>
+                  <svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem"><path fill="currentColor" d="M1.5 3.5C.5 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm2 1.2c.8 0 1.4.2 1.8.6.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.4-.2.3-.5.7-1 1l-.6.4c-.4.3-.6.4-.75.56-.15.14-.25.24-.35.44H6v1.3H1c0-.6.1-1.1.3-1.5.3-.6.7-1 1.5-1.6.7-.4 1.1-.8 1.28-1 .32-.3.42-.6.42-1 0-.3-.1-.6-.23-.8-.17-.2-.37-.3-.77-.3s-.7.1-.9.5c-.04.2-.1.5-.1.9H1.1c0-.6.1-1.1.3-1.5.4-.7 1.1-1.1 2.1-1.1zM10.54 3.54C9.5 3.54 9 4 9 5v6.5c0 1 .5 1.5 1.54 1.5h4c.96 0 1.46-.5 1.46-1.5V5c0-1-.5-1.46-1.5-1.46zm1.9.95c.7 0 1.3.2 1.7.5.4.4.6.8.6 1.4 0 .4-.1.8-.4 1.1-.2.2-.3.3-.5.4.1 0 .3.1.6.3.4.3.5.8.5 1.4 0 .6-.2 1.2-.6 1.6-.4.5-1.1.7-1.9.7-1 0-1.8-.3-2.2-1-.14-.29-.24-.69-.24-1.29h1.4c0 .3 0 .5.1.7.2.4.5.5 1 .5.3 0 .5-.1.7-.3.2-.2.3-.5.3-.8 0-.5-.2-.8-.6-.95-.2-.05-.5-.15-1-.15v-1c.5 0 .8-.1 1-.14.3-.1.5-.4.5-.9 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.7-.3-.3 0-.6.1-.75.3-.2.2-.2.5-.2.86h-1.34c0-.4.1-.7.19-1.1 0-.12.2-.32.4-.62.2-.2.4-.3.7-.4.3-.1.6-.1 1-.1z"></path></svg>
                 }
               }
 
diff --git a/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.scss b/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.scss
index edf307f5b..204347010 100644
--- a/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.scss
+++ b/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.scss
@@ -1,5 +1,5 @@
 .toolbar-icon {
-    font-size: 19px;
+    font-size: 1.1875rem;
 }
 
 .btn-icon {
@@ -7,12 +7,12 @@
 }
 
 .book-title {
-    margin: 8px 0 4px !important;
+    margin: 0.5rem 0 0.25rem !important;
 }
 
 // Override since it's not coming from library
 ::ng-deep #presentationMode {
-    margin: 3px 0 4px !important;
+    margin: 0.1875rem 0 0.25rem !important;
 }
 
 ::ng-deep .dark > ngx-extended-pdf-viewer .treeItem>a {
@@ -33,15 +33,15 @@ $pagination-opacity: 0;
 
 //$pagination-color: red;
 //$pagination-opacity: 0.7;
-$action-bar-height: 36px;
-$loading-bar-height: 24px;
+$action-bar-height: 2.25rem;
+$loading-bar-height: 1.5rem;
 
 // Tap to Paginate
 
 
 .right {
   position: absolute;
-  right: 0px;
+  right: 0.0rem;
   top: $action-bar-height;
   width: 20vw;
   z-index: 3;
@@ -53,7 +53,7 @@ $loading-bar-height: 24px;
   height: 100%;
 
   &.immersive {
-    top: 0px;
+    top: 0.0rem;
   }
 
   &.no-pointer-events {
@@ -66,7 +66,7 @@ $loading-bar-height: 24px;
 // This class pushes the click area to the left a bit to let users click the scrollbar
 .right-with-scrollbar {
   position: absolute;
-  right: 17px;
+  right: 1.0625rem;
   top: $action-bar-height;
   width: 18vw;
   z-index: 3;
@@ -79,13 +79,13 @@ $loading-bar-height: 24px;
   cursor: pointer;
 
   &.immersive {
-    top: 0px;
+    top: 0.0rem;
   }
 }
 
 .left {
   position: absolute;
-  left: 0px;
+  left: 0.0rem;
   top: $action-bar-height;
   width: 20vw;
   background: $pagination-color;
@@ -98,7 +98,7 @@ $loading-bar-height: 24px;
   cursor: pointer;
 
   &.immersive {
-    top: 0px;
+    top: 0.0rem;
   }
 }
 
diff --git a/UI/Web/src/app/person-detail/_modal/edit-person-modal/edit-person-modal.component.html b/UI/Web/src/app/person-detail/_modal/edit-person-modal/edit-person-modal.component.html
index 4782529b3..57c66562e 100644
--- a/UI/Web/src/app/person-detail/_modal/edit-person-modal/edit-person-modal.component.html
+++ b/UI/Web/src/app/person-detail/_modal/edit-person-modal/edit-person-modal.component.html
@@ -8,7 +8,7 @@
       </div>
       <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
         <form [formGroup]="editForm">
-          <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+          <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
 
             <li [ngbNavItem]="TabID.General">
               <a ngbNavLink>{{t(TabID.General)}}</a>
diff --git a/UI/Web/src/app/person-detail/person-detail.component.scss b/UI/Web/src/app/person-detail/person-detail.component.scss
index c33cafd4b..0d1b9aed1 100644
--- a/UI/Web/src/app/person-detail/person-detail.component.scss
+++ b/UI/Web/src/app/person-detail/person-detail.component.scss
@@ -1,18 +1,18 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 
   .person-badge {
     background: var(--card-bg-color);
-    max-height: 200px;
-    height: 200px;
-    width: 200px;
+    max-height: 12.5rem;
+    height: 12.5rem;
+    width: 12.5rem;
     border-radius: 50%;
     overflow: hidden;
 
     i {
-      max-height: 128px;
-      height: 128px;
+      max-height: 8.0rem;
+      height: 8.0rem;
       font-size: 8rem;
     }
   }
diff --git a/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss b/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
index 5ffa69d41..03691a5bb 100644
--- a/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
+++ b/UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
@@ -1,22 +1,22 @@
 .example-list {
     width: 100%;
     max-width: 100%;
-    min-height: 60px;
+    min-height: 3.75rem;
     display: block;
-    border-radius: 4px;
+    border-radius: 0.25rem;
     overflow: hidden;
 }
 
 .example-box {
-  margin: 5px 0;
+  margin: 0.3125rem 0;
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 0.875rem;
 
   .drag-handle {
     cursor: move;
-    font-size: 24px;
+    font-size: 1.5rem;
     // TODO: This needs to be calculation based
     margin-top: 215%;
   }
@@ -24,10 +24,10 @@
 
 .cdk-drag-preview {
   box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
+              0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
+              0 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
@@ -40,7 +40,7 @@
 
 .example-box:last-child {
   border: none;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
@@ -49,29 +49,29 @@
 
 .example-custom-placeholder {
   background: #ccc;
-  border: dotted 3px #999;
-  min-height: 60px;
+  border: dotted 0.1875rem #999;
+  min-height: 3.75rem;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .list-container {
   background: var(--card-bg-color);
-  padding: 10px;
-  border-radius: 5px;
+  padding: 0.625rem;
+  border-radius: 0.3125rem;
   width: 100%;
 }
 
 .accessibility-padding {
-  padding-top: 12px;
+  padding-top: 0.75rem;
 }
 .bulk-padding {
-  padding-top: 20px;
+  padding-top: 1.25rem;
 }
 
 
 .virtual-scroller, virtual-scroller {
   width: 100%;
-  height: calc(var(--vh) * 100 - 173px);
+  height: calc(var(--vh) * 100 - 10.8125rem);
 }
 
 virtual-scroller.empty {
@@ -79,5 +79,5 @@ virtual-scroller.empty {
 }
 
 .manual-input {
-  width: 83px;
+  width: 5.1875rem;
 }
diff --git a/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.html b/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.html
index bc3e9320c..7905d4403 100644
--- a/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.html
+++ b/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.html
@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'import-cbl-modal'">
 
-  <div class="row g-0" style="min-width: 135px;">
+  <div class="row g-0" style="min-width: 8.4375rem;">
     <app-step-tracker [steps]="steps" [currentStep]="currentStepIndex"></app-step-tracker>
   </div>
 
@@ -93,7 +93,7 @@
       <div class="justify-content-center col">
         <div class="d-flex align-items-center">
           <div class="flex-shrink-0">
-            <i class="fa-solid fa-triangle-exclamation" style="font-size: 24px" aria-hidden="true"></i>
+            <i class="fa-solid fa-triangle-exclamation" style="font-size: 1.5rem" aria-hidden="true"></i>
           </div>
           <div class="flex-grow-1 ms-3">
             {{t('validate-warning')}}
@@ -114,7 +114,7 @@
       <div class="justify-content-center col">
         <div class="d-flex align-items-center">
           <div class="flex-shrink-0">
-            <i class="fa-solid fa-circle-check" style="font-size: 24px" aria-hidden="true"></i>
+            <i class="fa-solid fa-circle-check" style="font-size: 1.5rem" aria-hidden="true"></i>
           </div>
           <div class="flex-grow-1 ms-3">
             {{t('validate-no-issue-description')}}
diff --git a/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.scss b/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.scss
index a608f1369..246544ad0 100644
--- a/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.scss
+++ b/UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.scss
@@ -30,10 +30,10 @@ file-upload {
 
 ::ng-deep .remove-btn {
   background: #C0392B;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
   color: var(--input-text-color) !important;
   font-weight: bold;
-  padding: 3px 5px;
+  padding: 0.1875rem 0.3125rem;
 }
 
 ::ng-deep .reading-list-success--item {
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
index e03368df3..bfc0dde2e 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
+++ b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
@@ -218,7 +218,7 @@
                   @defer (when activeTabId === TabID.Storyline; prefetch on idle) {
                     <div class="row mb-1 scroll-container" #scrollingBlock>
                       @if (items.length === 0 && !isLoading) {
-                        <div class="mx-auto" style="width: 200px;">
+                        <div class="mx-auto" style="width: 12.5rem;">
                           {{t('no-data')}}
                         </div>
                       } @else if(isLoading) {
@@ -266,7 +266,7 @@
 
           </ul>
         </div>
-        <div [ngbNavOutlet]="nav" style="min-height: 300px"></div>
+        <div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>
       </div>
     }
     </form>
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.scss b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.scss
index 50b52eed0..e8193e246 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.scss
+++ b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.scss
@@ -2,8 +2,8 @@
 
 
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
 
 
@@ -17,10 +17,10 @@
 }
 
 .dropdown-toggle-split {
-    border-top-right-radius: 6px !important;
-    border-bottom-right-radius: 6px !important;
-    border-top-left-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
+    border-top-right-radius: 0.375rem !important;
+    border-bottom-right-radius: 0.375rem !important;
+    border-top-left-radius: 0.0rem !important;
+    border-bottom-left-radius: 0.0rem !important;
 }
 
 .reading-list-years {
@@ -30,8 +30,8 @@
 .scroll-container {
     display: flex;
     flex-direction: row;
-    height: calc((var(--vh) *100) - 173px);
-    margin-bottom: 10px;
+    height: calc((var(--vh) *100) - 10.8125rem);
+    margin-bottom: 0.625rem;
 
     &.empty {
         height: auto;
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
index 901ee270a..f8f672ed9 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
+++ b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; read: 'reading-list-item'">
   <div class="d-flex flex-row g-0reading-list-item">
     <div class="d-none d-md-block pe-2">
-      <app-image width="106px" [styles]="{'max-height': '125px'}" class="img-top me-3" [imageUrl]="imageService.getChapterCoverImage(item.chapterId)"></app-image>
+      <app-image width="6.625rem" [styles]="{'max-height': '7.8125rem'}" class="img-top me-3" [imageUrl]="imageService.getChapterCoverImage(item.chapterId)"></app-image>
       @if (item.pagesRead === 0 && item.pagesTotal > 0) {
         <div class="not-read-badge" ></div>
       }
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
index ed625a434..9fea0d965 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
+++ b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
@@ -1,13 +1,13 @@
-$image-height: 125px;
+$image-height: 7.8125rem;
 $clamp-lines: 3;
 
 .reading-list-item {
-  max-height: 140px;
-  height: 140px;
+  max-height: 8.75rem;
+  height: 8.75rem;
 }
 
 .progress-banner {
-    height: 5px;
+    height: 0.3125rem;
 
     .progress {
         color: var(--card-progress-bar-color);
@@ -16,19 +16,19 @@ $clamp-lines: 3;
 }
 
 .badge-container {
-    border-radius: 4px;
+    border-radius: 0.25rem;
     display: block;
     height: $image-height;
     overflow: hidden;
     pointer-events: none;
     position: absolute;
-    width: 106px;
+    width: 6.625rem;
 }
 
 .not-read-badge {
     position: relative;
-    top: -125px;
-    left: 78px;
+    top: -7.8125rem;
+    left: 4.875rem;
     width: 0;
     height: 0;
     border-style: solid;
@@ -44,7 +44,7 @@ $clamp-lines: 3;
     ;
 }
 
-@media (max-width: 576px) {
+@media (max-width: 36.0rem) {
     ::ng-deep .read-more-cont div {
         -webkit-line-clamp: $clamp-lines;
         -webkit-box-orient: vertical;
@@ -54,7 +54,7 @@ $clamp-lines: 3;
     }
 }
 
-@media (max-width: 800px) {
+@media (max-width: 50.0rem) {
     ::ng-deep .read-more-cont div {
         -webkit-line-clamp: $clamp-lines;
         -webkit-box-orient: vertical;
@@ -64,14 +64,14 @@ $clamp-lines: 3;
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48.0rem) {
     .actions {
         display:flex;
         flex-direction: column-reverse;
-        margin-left: 10px;
+        margin-left: 0.625rem;
 
         .btn-primary {
-            margin-bottom: 10px;
+            margin-bottom: 0.625rem;
             margin-left: 0 !important;
         }
     }
diff --git a/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.scss b/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.scss
+++ b/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/app/reading-list/_components/step-tracker/step-tracker.component.scss b/UI/Web/src/app/reading-list/_components/step-tracker/step-tracker.component.scss
index 6849760a6..4e8e33346 100644
--- a/UI/Web/src/app/reading-list/_components/step-tracker/step-tracker.component.scss
+++ b/UI/Web/src/app/reading-list/_components/step-tracker/step-tracker.component.scss
@@ -2,13 +2,13 @@
 .bs4-order-tracking {
     overflow: hidden;
     color: #878788;
-    padding-left: 0px;
-    margin-top: 30px
+    padding-left: 0.0rem;
+    margin-top: 1.875rem
   }
   
   .bs4-order-tracking li {
     list-style-type: none;
-    font-size: 17px;
+    font-size: 1.0625rem;
     width: 25%;
     float: left;
     position: relative;
@@ -18,24 +18,24 @@
   }
   
   .bs4-order-tracking li:first-child:before {
-    margin-left: 15px !important;
-    padding-left: 11px !important;
+    margin-left: 0.9375rem !important;
+    padding-left: 0.6875rem !important;
     text-align: left !important
   }
   
   .bs4-order-tracking li:last-child:before {
-    margin-right: 5px !important;
-    padding-right: 11px !important;
+    margin-right: 0.3125rem !important;
+    padding-right: 0.6875rem !important;
     text-align: right !important
   }
   
   .bs4-order-tracking li>div {
     color: #fff;
-    width: 50px;
+    width: 3.125rem;
     text-align: center;
-    line-height: 50px;
+    line-height: 3.125rem;
     display: block;
-    font-size: 20px;
+    font-size: 1.25rem;
     background: #878788;
     border-radius: 50%;
     margin: auto
@@ -44,12 +44,12 @@
   .bs4-order-tracking li:after {
     content: '';
     width: 150%;
-    height: 2px;
+    height: 0.125rem;
     background: #878788;
     position: absolute;
     left: 0%;
     right: 0%;
-    top: 25px;
+    top: 1.5625rem;
     z-index: -1
   }
   
diff --git a/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss b/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss
index b7ec206b9..7c9dff9e3 100644
--- a/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss
+++ b/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss
@@ -4,6 +4,6 @@
 }
 
 .scrollable-modal {
-    max-height: calc(var(--vh) * 100 - 198px);
+    max-height: calc(var(--vh) * 100 - 12.375rem);
     overflow: auto;
 }
diff --git a/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html b/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
index 01e119428..07b973bd5 100644
--- a/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
+++ b/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
@@ -6,7 +6,7 @@
   </div>
   <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
     <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
-        orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+        orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
       <li [ngbNavItem]="TabID.General">
         <a ngbNavLink>{{t(TabID.General)}}</a>
         <ng-template ngbNavContent>
diff --git a/UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.scss b/UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.scss
index b0edfa8e5..fa521fab6 100644
--- a/UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.scss
+++ b/UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.scss
@@ -1,5 +1,5 @@
 .card-body {
-    padding: 0px 0px;
+    padding: 0.0rem 0.0rem;
 }
 
 .card {
diff --git a/UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss b/UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss
index 06ff802f5..b7eac6ddd 100644
--- a/UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss
+++ b/UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss
@@ -7,8 +7,8 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    height: calc(var(--vh, 1vh) * 100 - 57px);
-    min-height: 289px;
+    height: calc(var(--vh, 1vh) * 100 - 3.5625rem);
+    min-height: 18.0625rem;
     position: relative;
     width: 100vw;
     max-width: 100vw;
@@ -32,7 +32,7 @@
         margin-bottom: 0;
         font-weight: bold;
         display: inline-block;
-        margin-left: 5px;
+        margin-left: 0.3125rem;
         vertical-align: middle;
     }
 
@@ -56,13 +56,13 @@
     .card {
         background-color: var(--login-card-bg-color);
         color: #fff;
-        max-width: 300px;
+        max-width: 18.75rem;
         border-width: var(--login-card-border-width);
         border-style: var(--login-card-border-style);
         border-color: var(--login-card-border-color);
 
         &:focus {
-            border: 2px solid white;
+            border: 0.125rem solid white;
 
         }
 
diff --git a/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.html b/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.html
index 99f310f1c..c0550b021 100644
--- a/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.html
+++ b/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.html
@@ -25,11 +25,11 @@
       </div>
     }
 
-    <div class="col-auto" style="padding-top: 8px">
+    <div class="col-auto" style="padding-top: 0.5rem">
       <app-loading [loading]="isLoading" size="spinner-border-sm"></app-loading>
     </div>
 
-    <div class="col-auto ms-2"  style="padding-top: 4px">
+    <div class="col-auto ms-2"  style="padding-top: 0.25rem">
       @for(link of webLinks; track link) {
         <a class="me-1" [href]="link | safeHtml"  target="_blank" rel="noopener noreferrer" [title]="link">
           <app-image height="24px" width="24px" aria-hidden="true" [imageUrl]="imageService.getWebLinkImage(link)"
diff --git a/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.scss b/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.scss
index 26d3cf6eb..02031a81c 100644
--- a/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.scss
+++ b/UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.scss
@@ -1,6 +1,6 @@
 .custom-col {
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-left: 0.0rem;
+    padding-right: 0.0rem;
 }
 
 .badge {
@@ -8,26 +8,26 @@
 }
 
 .sm-popover {
-  width: 150px;
+  width: 9.375rem;
 
   > .popover-body {
-    padding-top: 10px;
+    padding-top: 0.625rem;
   }
 }
 
 .md-popover {
-  width: 214px;
+  width: 13.375rem;
 
   > .popover-body {
-    padding-top: 10px;
+    padding-top: 0.625rem;
   }
 }
 
 .lg-popover {
-  width: 320px;
+  width: 20.0rem;
 
   > .popover-body {
-    padding-top: 10px;
+    padding-top: 0.625rem;
   }
 }
 
diff --git a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html
index 51a046214..193388a4c 100644
--- a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html
+++ b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html
@@ -2,7 +2,7 @@
   <div class="mt-2 mb-2">
     @if (entity.publishers.length > 0) {
       <div class="publisher-img-container d-inline-flex align-items-center me-2 position-relative">
-        <app-image [imageUrl]="imageService.getPublisherImage(entity.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="32px" height="32px"
+        <app-image [imageUrl]="imageService.getPublisherImage(entity.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="2.0rem" height="2.0rem"
                   aria-hidden="true"></app-image>
         <div class="position-relative d-inline-block" (click)="openGeneric(FilterField.Publisher, entity.publishers[0].id)">{{entity.publishers[0].name}}</div>
 <!--        <app-publisher-flipper [publishers]="entity.publishers"></app-publisher-flipper>-->
diff --git a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss
index 42eb06de9..771357945 100644
--- a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss
+++ b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss
@@ -1,13 +1,13 @@
 .publisher-img-container {
     background-color: var(--card-bg-color);
-    border-radius: 3px;
-    padding: 2px 5px;
+    border-radius: 0.1875rem;
+    padding: 0.125rem 0.3125rem;
     font-size: 0.8rem;
     vertical-align: middle;
 
     div {
-        min-height: 32px;
-        line-height: 32px;
+        min-height: 2.0rem;
+        line-height: 2.0rem;
     }
 }
 
diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
index ea08f2262..465cbb19e 100644
--- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
+++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
@@ -340,7 +340,7 @@
 
         </ul>
       </div>
-      <div [ngbNavOutlet]="nav" style="min-height: 300px"></div>
+      <div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>
     </div>
 
 
diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss
index 26ef0aabc..c4459ebef 100644
--- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss
+++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss
@@ -2,24 +2,24 @@
 
 .to-read-counter {
   position: absolute;
-  top: 15px;
-  left: 20px;
+  top: 0.9375rem;
+  left: 1.25rem;
 }
 
 .card-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
+  grid-template-columns: repeat(auto-fill, 10.0rem);
   grid-gap: 0.5rem;
   justify-content: space-around;
-  padding-bottom: 20px;
+  padding-bottom: 1.25rem;
 }
 
 ::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen {
-  border-width: 1px;
+  border-width: 0.0625rem;
   border-style: solid;
-  border-radius: 5px;
+  border-radius: 0.3125rem;
   border-color: var(--primary-color);
-  padding: 5px;
+  padding: 0.3125rem;
   vertical-align: middle;
 
   &:hover {
diff --git a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss
index 26dc4391d..7b2544dbf 100644
--- a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss
+++ b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss
@@ -7,7 +7,7 @@
 }
 
 .view-value {
-  font-size: 18px;
+  font-size: 1.125rem;
   color: var(--primary-color);
   cursor: pointer;
 }
diff --git a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss
index 06ba1fc2c..2f0669984 100644
--- a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss
+++ b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss
@@ -1,5 +1,5 @@
 .text-muted {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 
diff --git a/UI/Web/src/app/settings/_components/settings/settings.component.scss b/UI/Web/src/app/settings/_components/settings/settings.component.scss
index 909eae7a1..8bbfbdff9 100644
--- a/UI/Web/src/app/settings/_components/settings/settings.component.scss
+++ b/UI/Web/src/app/settings/_components/settings/settings.component.scss
@@ -6,9 +6,9 @@ h2 {
 }
 
 .main-container {
-  margin-top: 10px;
-  max-width: 1920px;
-  padding: 0 20px;
+  margin-top: 0.625rem;
+  max-width: 120.0rem;
+  padding: 0 1.25rem;
 }
 
 ::ng-deep .content-wrapper:not(.closed) {
diff --git a/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss b/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss
index cf2445645..9f6cb5d65 100644
--- a/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss
+++ b/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss
@@ -3,6 +3,6 @@
 }
 
 .collapsed {
-    height: 35px;
+    height: 2.1875rem;
     overflow: hidden;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss b/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss
index 98817f4f2..618d16efa 100644
--- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss
+++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss
@@ -2,12 +2,12 @@
   position: absolute;
   top: 50%; 
   left: 46%;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 .indicator {
   font-weight: 500;
-  margin-left: 2px;
+  margin-left: 0.125rem;
   z-index: 10;
   color: var(--primary-color);
   animation: MoveUpDown 1s linear infinite;
diff --git a/UI/Web/src/app/shared/icon-and-title/icon-and-title.component.scss b/UI/Web/src/app/shared/icon-and-title/icon-and-title.component.scss
index 3c5193f1d..a8230d585 100644
--- a/UI/Web/src/app/shared/icon-and-title/icon-and-title.component.scss
+++ b/UI/Web/src/app/shared/icon-and-title/icon-and-title.component.scss
@@ -1,21 +1,21 @@
 .icon-and-title {
     flex-direction: column;
-    min-width: 60px;
+    min-width: 3.75rem;
 }
 
 .icon {
-    width: 20px;
-    height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
     text-align: center;
 }
 
 .text {
-    padding-top: 5px;
+    padding-top: 0.3125rem;
     text-align: center;
 }
 
 .label {
-    padding-bottom: 5px;
+    padding-bottom: 0.3125rem;
     text-align: center;
     font-weight: bold;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/shared/person-badge/person-badge.component.scss b/UI/Web/src/app/shared/person-badge/person-badge.component.scss
index 3e0fa08d5..8ad1ab43c 100644
--- a/UI/Web/src/app/shared/person-badge/person-badge.component.scss
+++ b/UI/Web/src/app/shared/person-badge/person-badge.component.scss
@@ -1,18 +1,18 @@
 .tagbadge {
     background-color: var(--tagbadge-bg-color);
     transition: all .3s ease-out;
-    margin: 3px 10px 3px 0px;
-    border-radius: 6px;
+    margin: 0.1875rem 0.625rem 0.1875rem 0.0rem;
+    border-radius: 0.375rem;
     font-size: .8rem;
     display: inline-block;
     cursor: pointer;
-    width: 96px;
+    width: 6.0rem;
     word-break: break-word;
 
     i {
-        max-height: 48px;
-        height: 48px;
-        width: 48px;
+        max-height: 3.0rem;
+        height: 3.0rem;
+        width: 3.0rem;
         font-size: 2.96rem;
         font-weight: bold;
         cursor: pointer;
@@ -20,9 +20,9 @@
 
     .image-container {
         background: var(--card-bg-color);
-        max-height: 96px;
-        height: 96px;
-        width: 96px;
+        max-height: 6.0rem;
+        height: 6.0rem;
+        width: 6.0rem;
         border-radius: 50%;
         overflow: hidden;
     }
diff --git a/UI/Web/src/app/shared/read-more/read-more.component.scss b/UI/Web/src/app/shared/read-more/read-more.component.scss
index eb1e57168..dcbb7628b 100644
--- a/UI/Web/src/app/shared/read-more/read-more.component.scss
+++ b/UI/Web/src/app/shared/read-more/read-more.component.scss
@@ -2,7 +2,7 @@
 
 .blur-text {
   color: transparent;
-  text-shadow: 0 0 5px var(--body-text-color);
+  text-shadow: 0 0 0.3125rem var(--body-text-color);
 }
 
 .read-more-cont {
diff --git a/UI/Web/src/app/shared/series-format/series-format.component.scss b/UI/Web/src/app/shared/series-format/series-format.component.scss
index 5ff9b39bb..3255b2d93 100644
--- a/UI/Web/src/app/shared/series-format/series-format.component.scss
+++ b/UI/Web/src/app/shared/series-format/series-format.component.scss
@@ -1,3 +1,3 @@
 i {
-    padding: 0 5px;
+    padding: 0 0.3125rem;
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss b/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss
index 6e6099e89..e02e8d414 100644
--- a/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss
+++ b/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss
@@ -1,8 +1,8 @@
 .tagbadge {
     transition: all .3s ease-out;
-    margin: 3px 5px 3px 0px;
-    padding: 2px 10px;
-    border-radius: 6px;
+    margin: 0.1875rem 0.3125rem 0.1875rem 0.0rem;
+    padding: 0.125rem 0.625rem;
+    border-radius: 0.375rem;
     font-size: 0.9rem;
     display: inline-block;
     cursor: default;
@@ -11,7 +11,7 @@
     i {
         font-size: 0.9rem;
         font-weight: bold;
-        margin-right: 0px;
+        margin-right: 0.0rem;
         cursor: pointer;
     }
 }
@@ -41,13 +41,13 @@
 }
 
 .filled {
-    border: 1px solid var(--tagbadge-filled-border-color);
+    border: 0.0625rem solid var(--tagbadge-filled-border-color);
     color: var(--tagbadge-filled-text-color);
     background-color: var(--tagbadge-filled-bg-color);
 }
 
 .outline {
-    border: 1px solid var(--tagbadge-border-color);
+    border: 0.0625rem solid var(--tagbadge-border-color);
     color: var(--tagbadge-text-color);
     background-color: var(--tagbadge-bg-color);
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.scss b/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.scss
index 6c4f625c0..9e2c8c036 100644
--- a/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.scss
+++ b/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.scss
@@ -16,8 +16,8 @@ app-dashboard-stream-list-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-radius: 5px;
-    margin: 5px 0;
+    border-radius: 0.3125rem;
+    margin: 0.3125rem 0;
     color: var(--list-group-hover-text-color);
     background-color: var(--list-group-hover-bg-color);
   }
@@ -26,6 +26,6 @@ app-dashboard-stream-list-item {
 .virtual-scroller, virtual-scroller {
   width: 100%;
   height: calc(100vh - 85px);
-  max-height: calc(var(--vh)*100 - 170px);
+  max-height: calc(var(--vh)*100 - 10.625rem);
 }
 
diff --git a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html
index 57d09419b..747b056bf 100644
--- a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html
+++ b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html
@@ -29,7 +29,7 @@
     </div>
 
 
-    <div style="max-height: 500px; overflow-y: auto">
+    <div style="max-height: 31.25rem; overflow-y: auto">
       <app-draggable-ordered-list [items]="items | filter: filterSideNavStreams" (orderUpdated)="orderUpdated($event)"
                                   [accessibilityMode]="pageOperationsForm.get('accessibilityMode')!.value"
                                   [showRemoveButton]="false" [disabled]="listForm.get('filterSideNavStream')!.value"
diff --git a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.scss b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.scss
index a0eaf86ed..ca5cb38eb 100644
--- a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.scss
+++ b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.scss
@@ -16,8 +16,8 @@ app-sidenav-stream-list-item {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-radius: 5px;
-    margin: 5px 0;
+    border-radius: 0.3125rem;
+    margin: 0.3125rem 0;
     color: var(--list-group-hover-text-color);
     background-color: var(--list-group-hover-bg-color);
   }
diff --git a/UI/Web/src/app/sidenav/_components/dashboard-stream-list-item/dashboard-stream-list-item.component.scss b/UI/Web/src/app/sidenav/_components/dashboard-stream-list-item/dashboard-stream-list-item.component.scss
index 5eab74531..7747cab5b 100644
--- a/UI/Web/src/app/sidenav/_components/dashboard-stream-list-item/dashboard-stream-list-item.component.scss
+++ b/UI/Web/src/app/sidenav/_components/dashboard-stream-list-item/dashboard-stream-list-item.component.scss
@@ -1,8 +1,8 @@
 @use "../../../../theme/variables" as theme;
 
 .list-item {
-  height: 60px;
-  max-height: 60px;
+  height: 3.75rem;
+  max-height: 3.75rem;
 }
 
 .meta {
diff --git a/UI/Web/src/app/sidenav/_components/manage-customization/manage-customization.component.html b/UI/Web/src/app/sidenav/_components/manage-customization/manage-customization.component.html
index 3e6df0473..ba754c1de 100644
--- a/UI/Web/src/app/sidenav/_components/manage-customization/manage-customization.component.html
+++ b/UI/Web/src/app/sidenav/_components/manage-customization/manage-customization.component.html
@@ -1,6 +1,6 @@
 <ng-container *transloco="let t; read: 'customize-dashboard-modal'">
   <p>{{t('description')}}</p>
-  <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-pills" orientation="horizontal" style="min-width: 154px;">
+  <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-pills" orientation="horizontal" style="min-width: 9.625rem;">
     <li [ngbNavItem]="TabID.Dashboard">
       <a ngbNavLink>{{t(TabID.Dashboard)}}</a>
       <ng-template ngbNavContent>
diff --git a/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html b/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html
index 5afd0f273..de73effcd 100644
--- a/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html
+++ b/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html
@@ -14,7 +14,7 @@
       </div>
     </div>
     <div class="col-auto ms-2 float-end">
-      <button class="btn btn-primary" style="margin-top: 30px" (click)="addNewExternalSource()">{{t('add-source')}}</button>
+      <button class="btn btn-primary" style="margin-top: 1.875rem" (click)="addNewExternalSource()">{{t('add-source')}}</button>
     </div>
   </form>
 
diff --git a/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.scss b/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.scss
index c96c86b09..241d84e09 100644
--- a/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.scss
+++ b/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.scss
@@ -8,8 +8,8 @@ ul {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-radius: 5px;
-    margin: 5px 0;
+    border-radius: 0.3125rem;
+    margin: 0.3125rem 0;
     color: var(--list-group-hover-text-color);
     background-color: var(--card-bg-color);
 
diff --git a/UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.scss b/UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.scss
index 2624cf753..089a76e90 100644
--- a/UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.scss
+++ b/UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.scss
@@ -9,8 +9,8 @@ ul {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        border-radius: 5px;
-        margin: 5px 0;
+        border-radius: 0.3125rem;
+        margin: 0.3125rem 0;
         color: var(--list-group-hover-text-color);
         background-color: var(--card-bg-color);
 
diff --git a/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.scss b/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.scss
index cda6616fe..b9f87d1bb 100644
--- a/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.scss
+++ b/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.scss
@@ -8,8 +8,8 @@
 
 .icon-position {
   position: absolute;
-  top: -2px;
-  right: -2px;
+  top: -0.125rem;
+  right: -0.125rem;
   font-size: 0.8em;
   color: var(--primary-color);
 }
@@ -30,10 +30,10 @@
 .icon-container::after {
   content: '';
   position: absolute;
-  left: 10px;
-  bottom: -4px;
-  width: 23px;
-  height: 2px;
+  left: 0.625rem;
+  bottom: -0.25rem;
+  width: 1.4375rem;
+  height: 0.125rem;
   background-color: var(--primary-color);
   transition: width 0.3s ease, left 0.3s ease;
 }
diff --git a/UI/Web/src/app/sidenav/_components/side-nav-item/side-nav-item.component.scss b/UI/Web/src/app/sidenav/_components/side-nav-item/side-nav-item.component.scss
index db2257df5..83596f337 100644
--- a/UI/Web/src/app/sidenav/_components/side-nav-item/side-nav-item.component.scss
+++ b/UI/Web/src/app/sidenav/_components/side-nav-item/side-nav-item.component.scss
@@ -2,26 +2,26 @@
 
 ::ng-deep .side-nav app-side-nav-item:first-child {
     .active-highlight {
-        border-top-left-radius: 3px;
+        border-top-left-radius: 0.1875rem;
     }
 }
 
 ::ng-deep .side-nav app-side-nav-item:first-child {
     .side-nav-item {
-        border-top-left-radius: 3px;
+        border-top-left-radius: 0.1875rem;
     }
 }
 
 @media (max-width: theme.$grid-breakpoints-lg) {
     ::ng-deep .side-nav app-side-nav-item:first-child {
         .side-nav-item {
-            border-top-left-radius: 0px;
+            border-top-left-radius: 0.0rem;
         }
     }
 
     ::ng-deep .side-nav app-side-nav-item:last-child {
         .side-nav-item {
-            border-bottom-left-radius: 0px;
+            border-bottom-left-radius: 0.0rem;
         }
     }
 }
diff --git a/UI/Web/src/app/sidenav/_components/sidenav-stream-list-item/sidenav-stream-list-item.component.scss b/UI/Web/src/app/sidenav/_components/sidenav-stream-list-item/sidenav-stream-list-item.component.scss
index 27e2360d0..bc65338e6 100644
--- a/UI/Web/src/app/sidenav/_components/sidenav-stream-list-item/sidenav-stream-list-item.component.scss
+++ b/UI/Web/src/app/sidenav/_components/sidenav-stream-list-item/sidenav-stream-list-item.component.scss
@@ -1,6 +1,6 @@
 .list-item {
-  height: 60px;
-  max-height: 60px;
+  height: 3.75rem;
+  max-height: 3.75rem;
 }
 
 .meta {
diff --git a/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html b/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
index 8cbac271a..7d1c1fd31 100644
--- a/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
+++ b/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
@@ -12,7 +12,7 @@
   <form [formGroup]="libraryForm">
     <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
       <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
-          orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
+          orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
 
         <li [ngbNavItem]="TabID.General">
           <a ngbNavLink>{{t(TabID.General)}}</a>
diff --git a/UI/Web/src/app/sidenav/preference-nav/preference-nav.component.scss b/UI/Web/src/app/sidenav/preference-nav/preference-nav.component.scss
index 8a07145ec..5bc9b4497 100644
--- a/UI/Web/src/app/sidenav/preference-nav/preference-nav.component.scss
+++ b/UI/Web/src/app/sidenav/preference-nav/preference-nav.component.scss
@@ -37,7 +37,7 @@
 
 @media (max-width: theme.$grid-breakpoints-lg) {
   .side-nav {
-    padding: 10px 0;
+    padding: 0.625rem 0;
     width: 55vw;
     background-color: var(--side-nav-mobile-bg-color);
     height: 100dvh;
@@ -70,5 +70,5 @@
 .side-nav-header {
   color: #d5d5d5;
   font-weight: bold;
-  margin-left: 5px;
+  margin-left: 0.3125rem;
 }
diff --git a/UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.scss b/UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.scss
index 7e0f11c49..9515a4c55 100644
--- a/UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.scss
+++ b/UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.scss
@@ -1,5 +1,5 @@
 .dashboard-card-content {
-  max-width: 700px;
+  max-width: 43.75rem;
   height: auto;
   box-sizing:border-box;
 }
@@ -7,5 +7,5 @@
 .day-breakdown-chart {
   width: 100%;
   margin: 0 auto;
-  max-width: 700px;
+  max-width: 43.75rem;
 }
diff --git a/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.html b/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.html
index 99dea4d79..c9432bcaf 100644
--- a/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.html
+++ b/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.html
@@ -23,7 +23,7 @@
     @if (formControl.value) {
       <ngx-charts-advanced-pie-chart [results]="vizData2$ | async" />
     } @else {
-      <div style="height: 242px; overflow-y: auto;">
+      <div style="height: 15.125rem; overflow-y: auto;">
         <table class="table table-striped table-striped table-sm scrollable">
           <thead>
             <tr>
diff --git a/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.scss b/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.scss
index 12b3e18ed..97c4849fa 100644
--- a/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.scss
+++ b/UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.scss
@@ -5,7 +5,7 @@
 
 .dashboard-card-content {
     width: 100%;
-    height: 242px;
+    height: 15.125rem;
     display: flex;
     flex-flow: column;
     box-sizing: border-box;
diff --git a/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.html b/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.html
index 46f6cd21f..62279fec9 100644
--- a/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.html
+++ b/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.html
@@ -21,7 +21,7 @@
     @if (formControl.value) {
       <ngx-charts-advanced-pie-chart [results]="statuses" />
     } @else {
-      <div style="height: 242px; overflow-y: auto;">
+      <div style="height: 15.125rem; overflow-y: auto;">
         <table class="table table-striped table-striped table-sm scrollable">
           <thead>
           <tr>
diff --git a/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.scss b/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.scss
index 4237557be..a1a20b3c6 100644
--- a/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.scss
+++ b/UI/Web/src/app/statistics/_components/publication-status-stats/publication-status-stats.component.scss
@@ -4,7 +4,7 @@
 
 .dashboard-card-content {
     width: 100%;
-    height: 242px;
+    height: 15.125rem;
     display: flex;
     flex-flow: column;
     box-sizing: border-box;
diff --git a/UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.scss b/UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.scss
index 9b0e796ab..4ad5745fc 100644
--- a/UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.scss
+++ b/UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.scss
@@ -10,5 +10,5 @@
 .stat-chart {
     width: 100%;
     margin: 0 auto;
-    max-width: 700px;
+    max-width: 43.75rem;
 }
diff --git a/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.scss b/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.scss
index f98cc003d..ccebd08d8 100644
--- a/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.scss
+++ b/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.scss
@@ -1,6 +1,6 @@
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 280px);
+    grid-template-columns: repeat(auto-fill, 17.5rem);
     grid-gap: 0.5rem;
     justify-content: space-evenly;
     width: 100%;
diff --git a/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.scss b/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.scss
index e6edf50cf..27080c4e6 100644
--- a/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.scss
+++ b/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.scss
@@ -1,6 +1,6 @@
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 280px);
+    grid-template-columns: repeat(auto-fill, 17.5rem);
     grid-gap: 0.5rem;
     justify-content: space-evenly;
     width: 100%;
diff --git a/UI/Web/src/app/typeahead/_components/typeahead.component.scss b/UI/Web/src/app/typeahead/_components/typeahead.component.scss
index d473c6e15..e2019571b 100644
--- a/UI/Web/src/app/typeahead/_components/typeahead.component.scss
+++ b/UI/Web/src/app/typeahead/_components/typeahead.component.scss
@@ -7,10 +7,10 @@ form {
 }
 
 input {
-    width: 15px;
-    opacity: 1px;
+    width: 0.9375rem;
+    opacity: 0.0625rem;
     position: relative;
-    left: 4px;
+    left: 0.25rem;
     border: none;
 }
 
@@ -22,12 +22,12 @@ input {
 }
 
 .close-offset {
-    right: 29px !important;
+    right: 1.8125rem !important;
     top: 29% !important;
 }
 
 .typeahead-input {
-    padding: 0px 6px;
+    padding: 0.0rem 0.375rem;
     display: inline-block;
     width: 100%;
     overflow: hidden;
@@ -35,12 +35,12 @@ input {
     z-index: 1;
     box-sizing: border-box;
     box-shadow: none;
-    border-radius: 4px;
+    border-radius: 0.25rem;
     cursor: text;
-    min-height: 38px;
+    min-height: 2.375rem;
 
     background-color: var(--input-bg-color);
-    border: 1px solid var(--input-border-color);
+    border: 0.0625rem solid var(--input-border-color);
     color: var(--body-text-color);
 
     &.disabled {
@@ -51,26 +51,26 @@ input {
         outline: 0 !important;
         border-radius: .28571429rem;
         display: inline-block !important;
-        padding: 0px !important;
-        min-height: 0px !important;
+        padding: 0.0rem !important;
+        min-height: 0.0rem !important;
         max-width: 100% !important;
-        margin: 0px !important;
+        margin: 0.0rem !important;
         text-indent: 0 !important;
         line-height: inherit !important;
         box-shadow: none !important;
     }
     input:empty {
-        padding-top: 6px !important;
+        padding-top: 0.375rem !important;
     }
 }
 
 .open .input-group-text {
-    border-bottom-left-radius: 0px;
+    border-bottom-left-radius: 0.0rem;
 }
 
 .open .typeahead-input {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0.0rem;
+    border-bottom-right-radius: 0.0rem;
 }
 
 .dropdown {
@@ -78,22 +78,22 @@ input {
     min-width: 10rem;
     background: var(--input-bg-color);
     z-index: 1000;
-    border-radius: 4px;
-    margin-top: -1px;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
+    border-radius: 0.25rem;
+    margin-top: -0.0625rem;
+    border-top-left-radius: 0.0rem;
+    border-top-right-radius: 0.0rem;
     position: absolute;
-    max-height: 400px;
+    max-height: 25.0rem;
     overflow-y: auto;
     overflow-x: hidden;
 
     .list-group {
-        border-top-left-radius: 0px;
-        border-top-right-radius: 0px;
+        border-top-left-radius: 0.0rem;
+        border-top-right-radius: 0.0rem;
     }
 
     .list-group-item {
-        padding: 5px 10px;
+        padding: 0.3125rem 0.625rem;
         width: 100%;
     }
 
@@ -106,7 +106,7 @@ input {
 
 .spinner-border {
     position: absolute;
-    right: 10px;
+    right: 0.625rem;
     margin: auto;
     cursor: pointer;
     top: 30%;
diff --git a/UI/Web/src/app/user-settings/change-email/change-email.component.scss b/UI/Web/src/app/user-settings/change-email/change-email.component.scss
index 4eb8f9a6a..a0646bed0 100644
--- a/UI/Web/src/app/user-settings/change-email/change-email.component.scss
+++ b/UI/Web/src/app/user-settings/change-email/change-email.component.scss
@@ -1,6 +1,6 @@
 .confirm-icon {
     color: var(--primary-color);
-    font-size: 16px;
+    font-size: 1.0rem;
     //vertical-align: top;
 }
 
diff --git a/UI/Web/src/app/user-settings/manage-devices/manage-devices.component.scss b/UI/Web/src/app/user-settings/manage-devices/manage-devices.component.scss
index 5ca0fc8c1..4f0dc9724 100644
--- a/UI/Web/src/app/user-settings/manage-devices/manage-devices.component.scss
+++ b/UI/Web/src/app/user-settings/manage-devices/manage-devices.component.scss
@@ -1,8 +1,8 @@
 @use '../../../theme/variables' as theme;
 
 .custom-position {
-  right: 15px;
-  top: -42px;
+  right: 0.9375rem;
+  top: -2.625rem;
 }
 
 .table {
@@ -20,7 +20,7 @@
       justify-content: center;
     }
     .btn {
-      width: 32px;
+      width: 2.0rem;
     }
   }
 }
diff --git a/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.scss b/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.scss
index d5d4a484a..b6d1f5c05 100644
--- a/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.scss
+++ b/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.scss
@@ -2,17 +2,17 @@
 .color-box-container {
   display: flex;
   align-items: center;
-  margin: 10px 0;
+  margin: 0.625rem 0;
 }
 
 .color-box {
-  width: 20px;
-  height: 20px;
-  border: 1px solid #000;
-  margin-right: 10px;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0.0625rem solid #000;
+  margin-right: 0.625rem;
 }
 
 .hex-code {
-  font-size: 16px;
+  font-size: 1.0rem;
   color: var(--primary-color);
 }
\ No newline at end of file
diff --git a/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html b/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
index 9332e126c..9cfa8fc57 100644
--- a/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
+++ b/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
@@ -16,7 +16,7 @@
       <div class="pe-2">
         <ul style="height: 100%" class="list-group list-group-flush">
 
-          <li class="list-group-item d-flex justify-content-between align-items-start" style="height: 40px" aria-hidden="true">
+          <li class="list-group-item d-flex justify-content-between align-items-start" style="height: 2.5rem" aria-hidden="true">
             <div class="fw-bold section-header">{{t('downloaded')}}</div>
           </li>
 
@@ -24,7 +24,7 @@
             <ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme, downloaded: true}"></ng-container>
           }
 
-          <li class="list-group-item d-flex justify-content-between align-items-start" style="height: 40px" aria-hidden="true">
+          <li class="list-group-item d-flex justify-content-between align-items-start" style="height: 2.5rem" aria-hidden="true">
             <div class="fw-bold section-header">{{t('downloadable')}}</div>
           </li>
 
@@ -64,7 +64,7 @@
                 <div class="row g-0 mt-3 pb-3">
                   <div class="mx-auto">
                     <div class="row g-0 mb-3">
-                      <i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
+                      <i class="fa fa-file-upload mx-auto" style="font-size: 1.5rem; width: 1.25rem;" aria-hidden="true"></i>
                     </div>
 
                     <div class="d-flex justify-content-center">
diff --git a/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.scss b/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.scss
index 3c84d930a..0b8522131 100644
--- a/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.scss
+++ b/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.scss
@@ -1,6 +1,6 @@
 .chooser {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
+  grid-template-columns: repeat(auto-fill, 10.0rem);
   grid-gap: 0.5rem;
   justify-content: space-around;
 }
@@ -9,7 +9,7 @@
   max-height: calc(100dvh - 180px);
   overflow-y: auto;
 
-  @media (max-width: 576px) {
+  @media (max-width: 36.0rem) {
     max-height: calc(100dvh - 480px);
   }
 }
@@ -30,12 +30,12 @@
 
   &:hover {
     background-color: var(--card-bg-color);
-    border-radius: 5px;
+    border-radius: 0.3125rem;
   }
 
   &:active, &.active {
     background-color: var(--card-bg-color);
-    border-radius: 5px;
+    border-radius: 0.3125rem;
   }
 
 
@@ -55,9 +55,9 @@
 ngx-file-drop ::ng-deep > div {
   // styling for the outer drop box
   width: 100%;
-  border: 2px solid var(--primary-color);
-  border-radius: 5px;
-  height: 100px;
+  border: 0.125rem solid var(--primary-color);
+  border-radius: 0.3125rem;
+  height: 6.25rem;
   margin: auto;
 
   > div {
@@ -69,8 +69,8 @@ ngx-file-drop ::ng-deep > div {
 }
 
 .custom-position {
-  right: 15px;
-  top: -42px;
+  right: 0.9375rem;
+  top: -2.625rem;
 }
 
 .section-header {
diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.html b/UI/Web/src/app/volume-detail/volume-detail.component.html
index 3e00f89aa..de14da74d 100644
--- a/UI/Web/src/app/volume-detail/volume-detail.component.html
+++ b/UI/Web/src/app/volume-detail/volume-detail.component.html
@@ -222,7 +222,7 @@
         </ul>
       </div>
       <!-- Min height helps with scroll jerking when switching from chapter -> related/details -->
-      <div [ngbNavOutlet]="nav" style="min-height: 300px"></div>
+      <div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>
 
     }
 
diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.scss b/UI/Web/src/app/volume-detail/volume-detail.component.scss
index 48a035b18..3bc2797bd 100644
--- a/UI/Web/src/app/volume-detail/volume-detail.component.scss
+++ b/UI/Web/src/app/volume-detail/volume-detail.component.scss
@@ -2,7 +2,7 @@
 
 .virtual-scroller, virtual-scroller {
   width: 100%;
-  max-height: calc(var(--vh)*100 - 170px);
+  max-height: calc(var(--vh)*100 - 10.625rem);
 }
 
 // This is responsible for ensuring we scroll down and only tabs and companion bar is visible
@@ -14,10 +14,10 @@
 }
 .card-container{
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
+  grid-template-columns: repeat(auto-fill, 10.0rem);
   grid-gap: 0.5rem;
   justify-content: space-around;
-  padding-bottom: 20px;
+  padding-bottom: 1.25rem;
 }
 
 
diff --git a/UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.scss b/UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.scss
index dc52bc49c..af08efa3c 100644
--- a/UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.scss
+++ b/UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.scss
@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
-  padding: 0 0 0 10px;
+  margin-top: 0.625rem;
+  padding: 0 0 0 0.625rem;
 }
diff --git a/UI/Web/src/styles.scss b/UI/Web/src/styles.scss
index c79a27fa3..670e518ba 100644
--- a/UI/Web/src/styles.scss
+++ b/UI/Web/src/styles.scss
@@ -97,9 +97,9 @@ app-root {
 
 ::-webkit-scrollbar-thumb {
   background-clip: padding-box;
-  border: 3px solid transparent;
-  border-radius: 8px;
-  min-height: 50px;
+  border: 0.1875rem solid transparent;
+  border-radius: 0.5rem;
+  min-height: 3.125rem;
 }
 
 body {
@@ -119,7 +119,7 @@ body {
 }
 
 .setting-section-break {
-  height: 1px;
+  height: 0.0625rem;
   background-color: var(--setting-break-color);
-  margin: 30px 0;
+  margin: 1.875rem 0;
 }
diff --git a/UI/Web/src/theme/_toastr.scss b/UI/Web/src/theme/_toastr.scss
index d29590aa5..f45ea0348 100644
--- a/UI/Web/src/theme/_toastr.scss
+++ b/UI/Web/src/theme/_toastr.scss
@@ -27,20 +27,20 @@
     width: 100%;
   }
   .toast-top-left {
-    top: 12px;
-    left: 12px;
+    top: 0.75rem;
+    left: 0.75rem;
   }
   .toast-top-right {
-    top: 12px;
-    right: 12px;
+    top: 0.75rem;
+    right: 0.75rem;
   }
   .toast-bottom-right {
-    right: 12px;
-    bottom: 12px;
+    right: 0.75rem;
+    bottom: 0.75rem;
   }
   .toast-bottom-left {
-    bottom: 12px;
-    left: 12px;
+    bottom: 0.75rem;
+    left: 0.75rem;
   }
   
   /* toast styles */
@@ -63,10 +63,10 @@
     right: -0.3em;
     top: -0.3em;
     float: right;
-    font-size: 20px;
+    font-size: 1.25rem;
     font-weight: bold;
     color: #FFFFFF;
-    text-shadow: 0 1px 0 #ffffff;
+    text-shadow: 0 0.0625rem 0 #ffffff;
     /* opacity: 0.8; */
   }
   .toast-close-button:hover,
@@ -96,18 +96,18 @@
   .toast-container .ngx-toastr {
     position: relative;
     overflow: hidden;
-    margin: 0 0 6px;
-    padding: 15px 15px 15px 50px;
-    width: 300px;
-    border-radius: 3px 3px 3px 3px;
-    background-position: 15px center;
+    margin: 0 0 0.375rem;
+    padding: 0.9375rem 0.9375rem 0.9375rem 3.125rem;
+    width: 18.75rem;
+    border-radius: 0.1875rem 0.1875rem 0.1875rem 0.1875rem;
+    background-position: 0.9375rem center;
     background-repeat: no-repeat;
-    background-size: 24px;
-    //box-shadow: 0 0 12px #999999;
+    background-size: 1.5rem;
+    //box-shadow: 0 0 0.75rem #999999;
     color: #FFFFFF;
   }
   .toast-container .ngx-toastr:hover {
-    box-shadow: 0 0 12px #000000;
+    box-shadow: 0 0 0.75rem #000000;
     opacity: 1;
     cursor: pointer;
   }
@@ -133,7 +133,7 @@
   }
   .toast-container.toast-top-center .ngx-toastr,
   .toast-container.toast-bottom-center .ngx-toastr {
-    width: 300px;
+    width: 18.75rem;
     margin-left: auto;
     margin-right: auto;
   }
@@ -150,14 +150,14 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    height: 4px;
+    height: 0.25rem;
     background-color: #000000;
     opacity: 0.4;
   }
   /* Responsive Design */
-  @media all and (max-width: 240px) {
+  @media all and (max-width: 15.0rem) {
     .toast-container .ngx-toastr.div {
-      padding: 8px 8px 8px 50px;
+      padding: 0.5rem 0.5rem 0.5rem 3.125rem;
       width: 11em;
     }
     .toast-container .toast-close-button {
@@ -165,9 +165,9 @@
       top: -0.2em;
     }
   }
-  @media all and (min-width: 241px) and (max-width: 480px) {
+  @media all and (min-width: 15.0625rem) and (max-width: 30.0rem) {
     .toast-container .ngx-toastr.div {
-      padding: 8px 8px 8px 50px;
+      padding: 0.5rem 0.5rem 0.5rem 3.125rem;
       width: 18em;
     }
     .toast-container .toast-close-button {
@@ -175,9 +175,9 @@
       top: -0.2em;
     }
   }
-  @media all and (min-width: 481px) and (max-width: 768px) {
+  @media all and (min-width: 30.0625rem) and (max-width: 48.0rem) {
     .toast-container .ngx-toastr.div {
-      padding: 15px 15px 15px 50px;
+      padding: 0.9375rem 0.9375rem 0.9375rem 3.125rem;
       width: 25em;
     }
   }
\ No newline at end of file
diff --git a/UI/Web/src/theme/_variables.scss b/UI/Web/src/theme/_variables.scss
index 1ffbdeb54..28d835d56 100644
--- a/UI/Web/src/theme/_variables.scss
+++ b/UI/Web/src/theme/_variables.scss
@@ -16,9 +16,9 @@ $accordion-icon-active-color: #cecece;
 
 
 $grid-breakpoints-xs: 0;
-$grid-breakpoints-sm: 576px;
-$grid-breakpoints-md: 768px;
-$grid-breakpoints-lg: 992px;
-$grid-breakpoints-xl: 1200px;
+$grid-breakpoints-sm: 36.0rem;
+$grid-breakpoints-md: 48.0rem;
+$grid-breakpoints-lg: 62.0rem;
+$grid-breakpoints-xl: 75.0rem;
 
 $grid-breakpoints: (xs: $grid-breakpoints-xs, sm: $grid-breakpoints-sm, md: $grid-breakpoints-md, lg: $grid-breakpoints-lg, xl: $grid-breakpoints-xl);
diff --git a/UI/Web/src/theme/components/_breadcrumb.scss b/UI/Web/src/theme/components/_breadcrumb.scss
index 14a0d6530..2d9586f5f 100644
--- a/UI/Web/src/theme/components/_breadcrumb.scss
+++ b/UI/Web/src/theme/components/_breadcrumb.scss
@@ -1,7 +1,7 @@
 .breadcrumb {
     background-color: var(--breadcrumb-bg-color);
-    padding: 5px 10px;
-    border-radius: 5px;
+    padding: 0.3125rem 0.625rem;
+    border-radius: 0.3125rem;
 
     .breadcrumb-item {
       color: var(--breadcrumb-item-text-color);
diff --git a/UI/Web/src/theme/components/_buttons.scss b/UI/Web/src/theme/components/_buttons.scss
index 09ce4157b..fe6a622a2 100644
--- a/UI/Web/src/theme/components/_buttons.scss
+++ b/UI/Web/src/theme/components/_buttons.scss
@@ -63,7 +63,7 @@
       --bs-btn-active-color: #fff;
       --bs-btn-active-bg: #6c757d;
       --bs-btn-active-border-color: #6c757d;
-      --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+      --bs-btn-active-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
       --bs-btn-disabled-color: #6c757d;
       --bs-btn-disabled-bg: transparent;
       --bs-btn-disabled-border-color: #6c757d;
@@ -91,7 +91,7 @@
     color: var(--btn-secondary-outline-hover-text-color);
     background-color: var(--btn-secondary-outline-hover-bg-color);
     border-color: var(--btn-secondary-outline-hover-border-color);
-    box-shadow: inset 0px -2px 0px 0px var(--btn-secondary-outline-text-color);
+    box-shadow: inset 0.0rem -0.125rem 0.0rem 0.0rem var(--btn-secondary-outline-text-color);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
diff --git a/UI/Web/src/theme/components/_card.scss b/UI/Web/src/theme/components/_card.scss
index 5ec224564..495437501 100644
--- a/UI/Web/src/theme/components/_card.scss
+++ b/UI/Web/src/theme/components/_card.scss
@@ -34,20 +34,20 @@
     }
 }
 
-$image-height: 232.91px;
-$image-filter-height: 160px;
-$image-width: 160px;
+$image-height: 14.556875rem;
+$image-filter-height: 10.0rem;
+$image-width: 10.0rem;
 
 .card-item-container {
     .card {
         max-width: $image-width;
         cursor: pointer;
-        padding-left: 0px;
-        padding-right: 0px;
+        padding-left: 0.0rem;
+        padding-right: 0.0rem;
         box-sizing: border-box;
         position: relative;
         color: var(--card-text-color);
-        border: 1px var(--card-border-color);
+        border: 0.0625rem var(--card-border-color);
         box-sizing: border-box;
     }
 
@@ -60,13 +60,13 @@ $image-width: 160px;
         margin-top: 0;
         margin-bottom: 0;
         text-align: center;
-        padding: 10px;
+        padding: 0.625rem;
     }
 
     .overlay {
         height: $image-height;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
         z-index: 10;
 
         &.filter {
@@ -80,7 +80,7 @@ $image-width: 160px;
 
 
     .card-body {
-        padding: 0 5px !important;
+        padding: 0 0.3125rem !important;
         background-color: rgba(0,0,0,0.7);
         border-width: var(--card-border-width);
         border-style: var(--card-border-style);
@@ -89,18 +89,18 @@ $image-width: 160px;
         bottom: 0;
         z-index: 115;
         width: 100%;
-        bottom: 39px;
+        bottom: 2.4375rem;
         font-size: 0.8rem;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 3;
         line-clamp: 3;
-        max-height: 58px;
+        max-height: 3.625rem;
         overflow: hidden;
     }
 
     .card-title {
         width: 100%;
-        max-width: 130px;
+        max-width: 8.125rem;
         overflow: hidden;
         text-overflow: ellipsis;
         margin: 0 auto;
@@ -114,7 +114,7 @@ $image-width: 160px;
         height: $image-height;
         z-index: 10;
         transition: all 0.2s;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
     }
 }
diff --git a/UI/Web/src/theme/components/_modal.scss b/UI/Web/src/theme/components/_modal.scss
index 8c58ffd73..3beb91308 100644
--- a/UI/Web/src/theme/components/_modal.scss
+++ b/UI/Web/src/theme/components/_modal.scss
@@ -10,7 +10,7 @@
 }
 
 .scrollable-modal {
-    max-height: calc(var(--vh) * 100 - 198px);
+    max-height: calc(var(--vh) * 100 - 12.375rem);
     overflow: auto;
 }
 
diff --git a/UI/Web/src/theme/components/_nav.scss b/UI/Web/src/theme/components/_nav.scss
index b99d6a08f..cfe863a70 100644
--- a/UI/Web/src/theme/components/_nav.scss
+++ b/UI/Web/src/theme/components/_nav.scss
@@ -25,7 +25,7 @@
     border-color: transparent;
     .nav-item {
         border-color: transparent;
-        border-width: 0 0 1px 0;
+        border-width: 0 0 0.0625rem 0;
     }
     .nav-link {
         color: var(--nav-link-text-color);
@@ -33,7 +33,7 @@
         border-width: var(--nav-tab-border-width);
         border-radius: 0;
         text-align: center;
-        padding: 8px 20px;
+        padding: 0.5rem 1.25rem;
 
         &.active, &:focus {
             color: var(--nav-tab-active-text-color);
diff --git a/UI/Web/src/theme/components/_navbar.scss b/UI/Web/src/theme/components/_navbar.scss
index d1650bd08..5ea870a52 100644
--- a/UI/Web/src/theme/components/_navbar.scss
+++ b/UI/Web/src/theme/components/_navbar.scss
@@ -5,7 +5,7 @@
   color: var(--navbar-text-color);
   z-index: 1040;
   border-radius: var(--navbar-border-radius);
-  left: 0px;
+  left: 0.0rem;
   margin: var(--navbar-header-margin);
   padding: 0;
   height: 3rem;
diff --git a/UI/Web/src/theme/components/_slider.scss b/UI/Web/src/theme/components/_slider.scss
index 2ddd73035..2738af065 100644
--- a/UI/Web/src/theme/components/_slider.scss
+++ b/UI/Web/src/theme/components/_slider.scss
@@ -5,20 +5,20 @@
 // This is going to be removed soon
 .custom-slider .ngx-slider .ngx-slider-bar {
       background: #545a52;
-      height: 2px;
+      height: 0.125rem;
     }
     .custom-slider .ngx-slider .ngx-slider-selection {
       background: var(--primary-color);
     }
   
     .custom-slider .ngx-slider .ngx-slider-pointer {
-      width: 8px;
-      height: 16px;
+      width: 0.5rem;
+      height: 1.0rem;
       top: auto; /* to remove the default positioning */
       bottom: 0;
       background-color: var(--primary-color);
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
+      border-top-left-radius: 0.1875rem;
+      border-top-right-radius: 0.1875rem;
     }
   
     .custom-slider .ngx-slider .ngx-slider-pointer:after {
@@ -26,7 +26,7 @@
     }
   
     .custom-slider .ngx-slider .ngx-slider-bubble {
-      bottom: 14px;
+      bottom: 0.875rem;
       font-weight: bold;
     }
   
@@ -38,12 +38,12 @@
   
   
     .custom-slider .ngx-slider .ngx-slider-tick {
-      width: 1px;
-      height: 10px;
-      margin-left: 4px;
+      width: 0.0625rem;
+      height: 0.625rem;
+      margin-left: 0.25rem;
       border-radius: 0;
       background: #ffe4d1;
-      top: -1px;
+      top: -0.0625rem;
     }
   
     .custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
diff --git a/UI/Web/src/theme/components/_table.scss b/UI/Web/src/theme/components/_table.scss
index 201f9f43d..ffda4c504 100644
--- a/UI/Web/src/theme/components/_table.scss
+++ b/UI/Web/src/theme/components/_table.scss
@@ -6,9 +6,9 @@ th[sortable].asc:after {
     content: "";
     display: block;
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC) no-repeat;
-    background-size: 22px;
-    width: 22px;
-    height: 22px;
+    background-size: 1.375rem;
+    width: 1.375rem;
+    height: 1.375rem;
     float: right;
     filter: invert(1);
 }
@@ -17,9 +17,9 @@ th[sortable].desc:after {
   content: "";
   display: block;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC) no-repeat;
-  background-size: 22px;
-  width: 22px;
-  height: 22px;
+  background-size: 1.375rem;
+  width: 1.375rem;
+  height: 1.375rem;
   float: right;
   transform: rotate(180deg);
   filter: invert(1);
diff --git a/UI/Web/src/theme/components/_typeahead.scss b/UI/Web/src/theme/components/_typeahead.scss
index e81d2e798..cd4efe09b 100644
--- a/UI/Web/src/theme/components/_typeahead.scss
+++ b/UI/Web/src/theme/components/_typeahead.scss
@@ -1,14 +1,14 @@
 :root {
   /* size */
-  --select2-single-height: 36px;
-  --select2-multiple-height: 36px;
+  --select2-single-height: 2.25rem;
+  --select2-multiple-height: 2.25rem;
 
   /* label */
   --select2-label-text-color: #000;
   --select2-required-color: red;
 
   /* selection */
-  --select2-selection-border-radius: 4px;
+  --select2-selection-border-radius: 0.25rem;
   --select2-selection-background: var(--input-bg-readonly-color);
   --select2-selection-disabled-background: #eee;
   --select2-selection-border-color: var(--input-border-color);
@@ -50,7 +50,7 @@
   /* search field */
   --select2-search-border-color: var(--input-border-color);
   --select2-search-background: var(--input-bg-readonly-color);
-  --select2-search-border-radius: 0px;
+  --select2-search-border-radius: 0.0rem;
 
   /* dropdown option */
   --select2-option-text-color: var(--body-text-color);
diff --git a/UI/Web/src/theme/utilities/_animations.scss b/UI/Web/src/theme/utilities/_animations.scss
index 158ddb36b..50b4c1656 100644
--- a/UI/Web/src/theme/utilities/_animations.scss
+++ b/UI/Web/src/theme/utilities/_animations.scss
@@ -8,15 +8,15 @@
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-10px);
+    transform: translateY(-0.625rem);
   }
 }
 
 @keyframes bookmark {
   0%, 100% {
-      border: 0px;
+      border: 0.0rem;
   }
   50% {
-      border: 5px solid var(--primary-color);
+      border: 0.3125rem solid var(--primary-color);
   }
 }
\ No newline at end of file
diff --git a/UI/Web/src/theme/utilities/_global.scss b/UI/Web/src/theme/utilities/_global.scss
index f08705dcd..49067d3e9 100644
--- a/UI/Web/src/theme/utilities/_global.scss
+++ b/UI/Web/src/theme/utilities/_global.scss
@@ -27,11 +27,11 @@ hr {
 .accent {
     background-color: var(--accent-bg-color) !important;
     color: var(--accent-text-color) !important;
-    box-shadow: inset 0 0 8px 1px var(--accent-bg-color) !important;
+    box-shadow: inset 0 0 0.5rem 0.0625rem var(--accent-bg-color) !important;
     font-size: var(--accent-text-size) !important;
     font-style: italic;
-    padding: 10px;
-    border-radius: 6px;
+    padding: 0.625rem;
+    border-radius: 0.375rem;
 }
 
 .text-muted {
@@ -49,6 +49,6 @@ hr {
 }
 
 .navbar-offset {
-  margin-top: 75px;
+  margin-top: 4.6875rem;
 }
 
diff --git a/UI/Web/src/theme/utilities/_utilities.scss b/UI/Web/src/theme/utilities/_utilities.scss
index a61d5e230..6c313ba60 100644
--- a/UI/Web/src/theme/utilities/_utilities.scss
+++ b/UI/Web/src/theme/utilities/_utilities.scss
@@ -13,6 +13,6 @@
 }
 
 .redlines * {
-    outline: 1px solid red;
-    outline-offset: -1px;
+    outline: 0.0625rem solid red;
+    outline-offset: -0.0625rem;
 }