diff --git a/styles/less/dialog/level-up/sheet.less b/styles/less/dialog/level-up/sheet.less
index 9ebd9331..c663f304 100644
--- a/styles/less/dialog/level-up/sheet.less
+++ b/styles/less/dialog/level-up/sheet.less
@@ -14,7 +14,8 @@
     .tab.active {
         flex: 1;
         overflow: auto;
-        .with-scroll-shadows();
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
     }
 
     div[data-application-part='form'] {
diff --git a/styles/less/dialog/level-up/summary-container.less b/styles/less/dialog/level-up/summary-container.less
index de7c9f4a..97353ba7 100644
--- a/styles/less/dialog/level-up/summary-container.less
+++ b/styles/less/dialog/level-up/summary-container.less
@@ -18,7 +18,7 @@
         overflow: auto;
         padding: 10px 0;
         max-height: 700px;
-        .with-scroll-shadows();
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
 
         .level-achievements-container,
         .level-advancements-container {
diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index e57ba50d..7af8becd 100755
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@@ -283,7 +283,7 @@
         }
 
         &.fit-height {
-            flex: 1;
+            height: 95%;
         }
 
         &.flex {
diff --git a/styles/less/sheets/actors/actor-sheet-shared.less b/styles/less/sheets/actors/actor-sheet-shared.less
index b3eb0469..470067ca 100644
--- a/styles/less/sheets/actors/actor-sheet-shared.less
+++ b/styles/less/sheets/actors/actor-sheet-shared.less
@@ -38,23 +38,11 @@
     }
 
     .tab.inventory {
-        .gold-section {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
+        .search-section {
+            display: flex;
             gap: 10px;
-            padding: 10px 10px 0;
-
-            .input {
-                color: light-dark(@dark, @beige);
-            }
+            align-items: center;
         }
-    }
-
-    .search-section {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        justify-content: space-between;
         .search-bar {
             position: relative;
             color: light-dark(@dark-blue-50, @beige-50);
@@ -84,11 +72,22 @@
                 height: 32px;
                 position: absolute;
                 right: 20px;
-                font-size: var(--font-size-16);
+                font-size: 16px;
                 z-index: 1;
                 color: light-dark(@dark-blue-50, @beige-50);
             }
         }
+
+        .gold-section {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            gap: 10px;
+            padding: 10px 10px 0;
+
+            .input {
+                color: light-dark(@dark, @beige);
+            }
+        }
     }
 
     &.limited {
diff --git a/styles/less/sheets/actors/adversary/effects.less b/styles/less/sheets/actors/adversary/effects.less
index 4aa44e51..fbf74249 100644
--- a/styles/less/sheets/actors/adversary/effects.less
+++ b/styles/less/sheets/actors/adversary/effects.less
@@ -1,5 +1,4 @@
 @import '../../../utils/colors.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
     .tab.effects {
@@ -8,8 +7,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
             padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }
diff --git a/styles/less/sheets/actors/adversary/features.less b/styles/less/sheets/actors/adversary/features.less
index 447d050e..af870d9b 100644
--- a/styles/less/sheets/actors/adversary/features.less
+++ b/styles/less/sheets/actors/adversary/features.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
     .tab.features {
@@ -9,8 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
             padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }
diff --git a/styles/less/sheets/actors/adversary/index.less b/styles/less/sheets/actors/adversary/index.less
index 28ff9d22..a1ab41c7 100644
--- a/styles/less/sheets/actors/adversary/index.less
+++ b/styles/less/sheets/actors/adversary/index.less
@@ -3,5 +3,3 @@
 @import './sheet.less';
 @import './sidebar.less';
 @import './effects.less';
-@import './notes.less';
-
diff --git a/styles/less/sheets/actors/adversary/notes.less b/styles/less/sheets/actors/adversary/notes.less
deleted file mode 100644
index a95d070e..00000000
--- a/styles/less/sheets/actors/adversary/notes.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active {
-    padding-bottom: 20px;
-}
diff --git a/styles/less/sheets/actors/adversary/sidebar.less b/styles/less/sheets/actors/adversary/sidebar.less
index 5db9f5e9..b1bb51db 100644
--- a/styles/less/sheets/actors/adversary/sidebar.less
+++ b/styles/less/sheets/actors/adversary/sidebar.less
@@ -286,8 +286,9 @@
             overflow-y: hidden;
             padding-top: 10px;
             padding-bottom: 20px;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            
             scrollbar-gutter: stable;
-            .with-scroll-shadows();
 
             &:hover {
                 overflow-y: auto;
diff --git a/styles/less/sheets/actors/character/biography.less b/styles/less/sheets/actors/character/biography.less
index 8548a2fb..f8d56735 100644
--- a/styles/less/sheets/actors/character/biography.less
+++ b/styles/less/sheets/actors/character/biography.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.biography {
@@ -10,10 +9,10 @@
             gap: 10px;
             height: 100%;
             overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 98%, transparent 100%);
             padding-top: 8px;
             padding-bottom: 20px;
             height: 100%;
-            .with-scroll-shadows();
         }
 
         .characteristics-section {
diff --git a/styles/less/sheets/actors/character/effects.less b/styles/less/sheets/actors/character/effects.less
index 0ab1007d..ae49fa2d 100644
--- a/styles/less/sheets/actors/character/effects.less
+++ b/styles/less/sheets/actors/character/effects.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.effects {
@@ -9,8 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
             padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }
diff --git a/styles/less/sheets/actors/character/features.less b/styles/less/sheets/actors/character/features.less
index 52b41826..017254a3 100644
--- a/styles/less/sheets/actors/character/features.less
+++ b/styles/less/sheets/actors/character/features.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.features {
@@ -9,8 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
             padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }
diff --git a/styles/less/sheets/actors/character/inventory.less b/styles/less/sheets/actors/character/inventory.less
index fcfbbee9..c8d2b584 100644
--- a/styles/less/sheets/actors/character/inventory.less
+++ b/styles/less/sheets/actors/character/inventory.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.inventory {
@@ -9,9 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            padding: 20px 0;
         }
     }
 }
diff --git a/styles/less/sheets/actors/character/loadout.less b/styles/less/sheets/actors/character/loadout.less
index fa3e0176..a896b92e 100644
--- a/styles/less/sheets/actors/character/loadout.less
+++ b/styles/less/sheets/actors/character/loadout.less
@@ -1,10 +1,48 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.loadout {
         .search-section {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .search-bar {
+                position: relative;
+                color: light-dark(@dark-blue-50, @beige-50);
+                width: 80%;
+                padding-top: 5px;
+
+                input {
+                    border-radius: 50px;
+                    background: light-dark(@dark-blue-10, @golden-10);
+                    border: none;
+                    outline: 2px solid transparent;
+                    transition: all 0.3s ease;
+                    padding: 0 20px;
+
+                    &:hover {
+                        outline: 2px solid light-dark(@dark, @golden);
+                    }
+
+                    &::-webkit-search-cancel-button {
+                        -webkit-appearance: none;
+                        display: none;
+                    }
+                }
+
+                .icon {
+                    align-content: center;
+                    height: 32px;
+                    position: absolute;
+                    right: 20px;
+                    font-size: var(--font-size-16);
+                    z-index: 1;
+                    color: light-dark(@dark-blue-50, @beige-50);
+                }
+            }
+
             .btn-toggle-view {
                 background: light-dark(@dark-blue-10, @dark-blue);
                 border: 1px solid @color-border;
@@ -52,9 +90,8 @@
             gap: 10px;
             height: 100%;
             overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
+            padding: 20px 0;
         }
     }
 }
diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less
index c76ee9ff..3c358d8f 100644
--- a/styles/less/sheets/actors/character/sidebar.less
+++ b/styles/less/sheets/actors/character/sidebar.less
@@ -549,8 +549,8 @@
         overflow-y: hidden;
         padding-top: 10px;
         padding-bottom: 20px;
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%);
         scrollbar-gutter: stable;
-        .with-scroll-shadows();
         
         &:hover {
             overflow-y: auto;
diff --git a/styles/less/sheets/actors/companion/effects.less b/styles/less/sheets/actors/companion/effects.less
index c0cac669..6d7fe061 100644
--- a/styles/less/sheets/actors/companion/effects.less
+++ b/styles/less/sheets/actors/companion/effects.less
@@ -7,8 +7,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
             padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }
diff --git a/styles/less/sheets/actors/companion/sheet.less b/styles/less/sheets/actors/companion/sheet.less
index 8bf8a0b9..f31679ba 100644
--- a/styles/less/sheets/actors/companion/sheet.less
+++ b/styles/less/sheets/actors/companion/sheet.less
@@ -10,16 +10,3 @@
         background: url('../assets/parchments/dh-parchment-light.png');
     }
 });
-
-.application.sheet.daggerheart.actor.dh-style.companion {
-    .window-content {
-        display: flex;
-    }
-
-    .tab.active {
-        flex: 1;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-    }
-}
diff --git a/styles/less/sheets/actors/environment/features.less b/styles/less/sheets/actors/environment/features.less
index 84cf26f8..cc8a345a 100644
--- a/styles/less/sheets/actors/environment/features.less
+++ b/styles/less/sheets/actors/environment/features.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.environment {
     .tab.features {
@@ -9,8 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
         }
     }
 }
diff --git a/styles/less/sheets/actors/environment/potentialAdversaries.less b/styles/less/sheets/actors/environment/potentialAdversaries.less
index f112c0d2..f3c5776a 100644
--- a/styles/less/sheets/actors/environment/potentialAdversaries.less
+++ b/styles/less/sheets/actors/environment/potentialAdversaries.less
@@ -7,8 +7,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
         }
     }
 }
diff --git a/styles/less/sheets/actors/npc/features.less b/styles/less/sheets/actors/npc/features.less
index a579d9f8..107b5a06 100644
--- a/styles/less/sheets/actors/npc/features.less
+++ b/styles/less/sheets/actors/npc/features.less
@@ -11,8 +11,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
         }
     }
 }
diff --git a/styles/less/sheets/actors/party/inventory.less b/styles/less/sheets/actors/party/inventory.less
index 444c6a57..8af37a79 100644
--- a/styles/less/sheets/actors/party/inventory.less
+++ b/styles/less/sheets/actors/party/inventory.less
@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.party {
     .tab.inventory {
@@ -9,9 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            padding: 20px 0;
         }
     }
 }
diff --git a/styles/less/ui/item-browser/item-browser.less b/styles/less/ui/item-browser/item-browser.less
index aac63d7a..1387f444 100644
--- a/styles/less/ui/item-browser/item-browser.less
+++ b/styles/less/ui/item-browser/item-browser.less
@@ -1,6 +1,5 @@
 @import '../../utils/colors.less';
 @import '../../utils/fonts.less';
-@import '../../utils/mixin.less';
 
 .application.daggerheart.dh-style.compendium-browser {
     border: initial;
@@ -243,7 +242,6 @@
         .compendium-sidebar > .folder-list {
             overflow-y: auto;
             scrollbar-gutter: stable;
-            .with-scroll-shadows();
         }
 
         .item-list-header,
diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less
index 18b1f9a6..237a5acb 100644
--- a/styles/less/utils/mixin.less
+++ b/styles/less/utils/mixin.less
@@ -160,47 +160,3 @@
         @destination @length
     );
 }
-
-// Scroll shadows, but only if the browser supports. At the time of writing, this doesn't work on firefox
-@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
-    @property --fade-start {
-        syntax: "<length>";
-        inherits: false;
-        initial-value: 0;
-    }
-
-    @property --fade-end {
-        syntax: "<length>";
-        inherits: false;
-        initial-value: 0;
-    }
-
-    @keyframes scrollfade {
-        0% {
-            --fade-start: 0;
-        }
-        10%, 100% {
-            --fade-start: 12px;
-        }
-        0%, 90% {
-            --fade-end: 12px;
-        }
-        100% {
-            --fade-end: 0;
-        }
-    }
-}
-
-.with-scroll-shadows() {
-    animation: scrollfade;
-    animation-timeline: --scrollfade;
-    animation-range: entry 0% exit 100%;
-    scroll-timeline: --scrollfade y;
-    mask-image: linear-gradient(
-        0deg, 
-        transparent 0%, 
-        black var(--fade-end), 
-        black calc(100% - var(--fade-start)), 
-        transparent 100%
-    );
-}