diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 5c9724c0a..f6c6cd73a 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -27,6 +27,40 @@
 
 // ─── Shared Components ────────────────────────────────────────────────────────
 
+// Always-visible themed scrollbar. Apply to scroll containers that should
+// reserve gutter and not rely on macOS overlay scrollbars (which auto-fade).
+.app-scrollbar {
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: color-mix(
+            in srgb,
+            var(--app-muted-color) 55%,
+            transparent
+        );
+        border-radius: 999px;
+        border: 2px solid transparent;
+        background-clip: content-box;
+
+        &:hover {
+            background-color: var(--app-muted-color);
+            background-clip: content-box;
+        }
+    }
+}
+
 app-root.macos-platform .current-playlist {
     padding-top: 30px;
 }
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
index 91c49a695..71820f84e 100644
--- a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
@@ -12,7 +12,7 @@
     } @else {
         <cdk-virtual-scroll-viewport
             [itemSize]="itemSize()"
-            class="scroll-viewport"
+            class="scroll-viewport app-scrollbar"
         >
             <app-channel-list-item
                 *cdkVirtualFor="
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
index ea0971fad..f3a820742 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
@@ -206,7 +206,7 @@
 
                 <cdk-virtual-scroll-viewport
                     [itemSize]="itemSize()"
-                    class="groups-channels-viewport"
+                    class="groups-channels-viewport app-scrollbar"
                 >
                     <app-channel-list-item
                         *cdkVirtualFor="
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.html b/libs/ui/epg/src/lib/epg-list/epg-list.component.html
index 00d6cee08..c076bddbe 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.html
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.html
@@ -33,7 +33,7 @@
 
 @if (timeshiftLimit) {
     <!-- program list -->
-    <div id="program-list" #programList>
+    <div id="program-list" class="app-scrollbar" #programList>
         @if (items.length > 0) {
             @for (program of items; track $index) {
                 @if (!canActivateProgram(program)) {
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
index 25a9efde1..35ed5805c 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
@@ -53,35 +53,6 @@
     display: flex;
     flex-direction: column;
     gap: 0;
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
-        transparent;
-
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: color-mix(
-            in srgb,
-            var(--app-muted-color) 55%,
-            transparent
-        );
-        border-radius: 999px;
-        border: 2px solid transparent;
-        background-clip: content-box;
-
-        &:hover {
-            background-color: var(--app-muted-color);
-            background-clip: content-box;
-        }
-    }
 }
 
 .program-item {