diff --git a/UI/Web/src/_card-item-common.scss b/UI/Web/src/_card-item-common.scss
index 1c6f916f3..8bc010398 100644
--- a/UI/Web/src/_card-item-common.scss
+++ b/UI/Web/src/_card-item-common.scss
@@ -1,27 +1,26 @@
-$image-height: 232.91px;
-$image-width: 160px;
+$image-height: 14.556875rem;
+$image-width: 10rem;
 
 .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 +29,15 @@ $image-width: 160px;
 }
 
 .download {
-  width: 80px;
-  height: 80px;
+  width: 5rem;
+  height: 5rem;
   position: absolute;
   top: 25%;
   right: 30%;
 }
 
 .badge-container {
-  border-radius: 4px;
+  border-radius: 0.25rem;
   display: block;
   height: $image-height;
   left: 0;
@@ -46,13 +45,13 @@ $image-width: 160px;
   pointer-events: none;
   position: absolute;
   top: 0;
-  width: 160px;
+  width: 10rem;
 }
 
 .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,9 +61,10 @@ $image-width: 160px;
 
 .bulk-mode {
   position: absolute;
-  top: 5px;
-  left: 5px;
+  top: 0;
+  left: 0;
   visibility: hidden;
+  transition: all ease-in-out 300ms;
 
   &.always-show {
     visibility: visible !important;
@@ -73,9 +73,39 @@ $image-width: 160px;
   }
 
   input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
     color: var(--checkbox-bg-color);
+    border-radius: 50%;
+    border: 0.125rem solid #f0f0f0;
+    background-color: var(--elevation-layer11-dark);
+    transform: scale(0.85);
+    transition: all ease-in-out 300ms;
+    left: 0.4375rem;
+    position: relative;
+    top: 0.3125rem;
+    box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
+    
+    &:hover {
+      cursor: pointer;
+    }
+    
+    &:checked {
+      border: unset;
+      transform: scale(1);
+      background-color: var(--primary-color);
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+    }
+    
+    &:focus {
+      box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
+    }
+  }
+  
+  &:hover {
+    ~ .card-overlay {
+      background-color: var(--card-overlay-hover-bg-color);
+    }
   }
 }
 
@@ -113,10 +143,10 @@ $image-width: 160px;
       top: 0;
       left: 0;
       width: 100%;
-      height: 232.91px;
-      transition: all 0.2s;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      height: 14.556875rem;
+      transition: 300ms ease-in-out all;
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
 
       &:hover {
         background-color: var(--card-overlay-hover-bg-color);
@@ -126,7 +156,7 @@ $image-width: 160px;
       .overlay-information--centered {
         position: absolute;
         background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 50px;
+        border-radius: 0.9375rem;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -141,8 +171,8 @@ $image-width: 160px;
   }
 
   .count {
-    top: 5px;
-    right: 10px;
+    top: 0.3125rem;
+    right: 0.625rem;
     position: absolute;
   }
 }
@@ -152,26 +182,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 +211,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 +231,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 +242,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 +255,7 @@ $image-width: 160px;
   visibility: hidden;
   display: none;
     .card-title {
-      padding: 10px;
+      padding: 0.625rem;
     }
 }
 
@@ -235,11 +265,11 @@ $image-width: 160px;
 .expected {
   .overlay-information--centered {
     div {
-      height: 32px;
-      width: 32px;
+      height: 2rem;
+      width: 2rem;
       i {
         font-size: 1.4rem;
-        line-height: 32px;
+        line-height: 2rem;
       }
     }
   }
diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
index 34ae3aec2..35c1c5930 100644
--- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
+++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
@@ -1,16 +1,16 @@
 <ng-container *transloco="let t; read: 'bulk-operations'">
   @if (bulkSelectionService.selections$ | async; as selectionCount) {
     @if (selectionCount > 0) {
-      <div class="bulk-select-container" [ngStyle]="{'margin-left': marginLeft + 'px', 'margin-right': marginRight + 'px'}">
+      <div class="bulk-select-container">
         <div class="bulk-select">
-          <div class="d-flex justify-content-around align-items-center">
+          <div class="d-flex align-items-center">
 
           <span class="highlight">
               <i class="fa fa-check me-1" aria-hidden="true"></i>
             {{t('items-selected',{num: selectionCount | number})}}
           </span>
 
-            <span>
+            <span class="selection-actions">
             @if (hasMarkAsUnread) {
               <button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom">
                   <i class="fa-regular fa-circle-check" aria-hidden="true"></i>
@@ -23,12 +23,12 @@
                   <span class="visually-hidden">{{t('mark-as-read')}}</span>
               </button>
               }
-              <app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" />
+              <app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" class="actionables"/>
           </span>
 
             <span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span>
 
-            <button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
+            <button class="btn btn-icon deselect" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
           </div>
         </div>
       </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..7e39f1bc4 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
@@ -2,18 +2,111 @@
     z-index: 1;
     top: 0;
     position: sticky;
+    margin-right: 1.8125rem;
 
     .bulk-select {
         background-color: var(--bulk-selection-bg-color);
-        border-bottom: 2px solid var(--primary-color);
-        color: var(--bulk-selection-text-color) !important;
+        border: 0.125rem solid var(--primary-color);
+        box-shadow: 0 0.25rem 1.875rem rgba(0,0,0,0.1);
+        padding: 0.125rem;
+        
+        div {
+            justify-content: space-between;
+            margin: 0 0.75rem;
+            
+            .highlight {
+                color: var(--primary-color);
+                font-size: 0.8125rem;
+            }
+            
+            .selection-actions {
+                display:  flex;
+                align-items: center;
 
-        .btn-icon {
-            color: var(--bulk-selection-text-color);
+                .btn-icon {
+                    color: var(--bulk-selection-text-color);
+                    padding: 0 1rem;
+                    margin-right: 0.375rem;
+                    font-size: 1.125rem;
+                    display: flex;
+                    min-height: 2.5rem;
+                    align-items:  center;
+                    
+                    &:hover {
+                        background-color: #ffffff2e;
+                    }
+                }
+            }
+            
+            .btn.deselect {
+                font-size: 0.75rem;
+                color: var(--text-light-muted-color);
+                transition: 300ms ease-in-out all;
+                i {
+                    color: var(--text-light-muted-color);
+                    transition: 300ms ease-in-out all;
+                }
+                &:hover {
+                    color: var(--bulk-selection-text-color);
+                    i {
+                        color: var(--bulk-selection-text-color);
+                    }
+                }
+            }
+        }
+
+        > button.btn {
+            font-size: 0.75rem;
         }
     }
 }
 
-.highlight {
-    color: var(--bulk-selection-highlight-text-color) !important;
+:host ::ng-deep .bulk-select-container {
+    .bulk-select {
+        div {
+            .selection-actions {
+                .actionables {
+                    .btn {
+                        padding: 0 1rem;
+                        font-size: 1.3125rem;
+                        display: flex;
+                        min-height: 2.5rem;
+                        align-items:  center;
+                        border-radius: 0.375rem;
+
+                        &:hover {
+                            background-color: #ffffff2e;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
+
+@media (max-width: 687px) {
+    .bulk-select-container {
+        margin: unset;
+    }
+}
+
+@media (max-width: 428px) {
+    .bulk-select-container {
+        .bulk-select {
+            div {
+                .highlight {
+                    font-size: 0.6875rem;
+                }
+                .selection-actions {
+                    .btn {
+                        font-size: 1.0625rem;
+                        padding: 0.625rem;
+                    }
+                }
+                .btn.deselect {
+                    font-size: 0.6875rem;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
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 19a2ef5c4..a4b5eaffd 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
@@ -126,6 +126,17 @@
 
 /* small devices (phones, 650px and down) */
 @media only screen and (max-width:650px) {
+  :host ::ng-deep {
+    .navbar-nav {
+      .nav-item.search {
+        .ng-autocomplete {
+          input {
+            font-size: 1rem !important;
+          }
+        }
+      }
+    }
+  }
   .navbar-nav {
     width: 0;
   }
diff --git a/UI/Web/src/app/registration/user-login/user-login.component.scss b/UI/Web/src/app/registration/user-login/user-login.component.scss
index d1d755d33..d7085d9a0 100644
--- a/UI/Web/src/app/registration/user-login/user-login.component.scss
+++ b/UI/Web/src/app/registration/user-login/user-login.component.scss
@@ -15,6 +15,7 @@ a {
     color: #fff !important;
     border-color: var(--login-input-border-color);
     font-family: var(--login-input-font-family);
+    font-size: 1rem;
 
     &:focus {
         border-color: var(--login-input-border-color-focus);
diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss
index 7ec33d613..cb0013e5b 100644
--- a/UI/Web/src/theme/themes/dark.scss
+++ b/UI/Web/src/theme/themes/dark.scss
@@ -51,6 +51,7 @@
     --primary-color-scrollbar: rgba(255,255,255,0.3);
     --default-state-scrollbar: transparent;
     --text-muted-color: hsla(0,0%,100%,.45);
+    --text-light-muted-color: hsla(0,0%,100%,.7);
 
     /* Override bootstrap css variables */
     --bs-body-bg: #1f2020;