diff --git a/lib/widgets/collection/collection_grid.dart b/lib/widgets/collection/collection_grid.dart
index 9665ea7ef..11fa56112 100644
--- a/lib/widgets/collection/collection_grid.dart
+++ b/lib/widgets/collection/collection_grid.dart
@@ -450,13 +450,14 @@ class _CollectionScrollViewState extends State<_CollectionScrollView> {
     final crumbs = <double, String>{};
     if (sectionLayouts.length <= 1) return crumbs;
 
+    final maxOffset = sectionLayouts.last.maxOffset;
     void addAlbums(CollectionLens collection, List<SectionLayout> sectionLayouts, Map<double, String> crumbs) {
       final source = collection.source;
       sectionLayouts.forEach((section) {
         final directory = (section.sectionKey as EntryAlbumSectionKey).directory;
         if (directory != null) {
           final label = source.getAlbumDisplayName(context, directory);
-          crumbs[section.minOffset] = label;
+          crumbs[section.minOffset / maxOffset] = label;
         }
       });
     }
@@ -484,7 +485,7 @@ class _CollectionScrollViewState extends State<_CollectionScrollView> {
                   if (date != null) {
                     final label = dateFormat.format(date);
                     if (label != lastLabel) {
-                      crumbs[section.minOffset] = label;
+                      crumbs[section.minOffset / maxOffset] = label;
                       lastLabel = label;
                     }
                   }
diff --git a/lib/widgets/common/basic/draggable_scrollbar.dart b/lib/widgets/common/basic/draggable_scrollbar.dart
index e1fe56dc7..2230cd0a8 100644
--- a/lib/widgets/common/basic/draggable_scrollbar.dart
+++ b/lib/widgets/common/basic/draggable_scrollbar.dart
@@ -149,11 +149,11 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
   late AnimationController _labelAnimationController;
   late Animation<double> _labelAnimation;
   Timer? _fadeoutTimer;
-  Map<double, String>? _modelCrumbs;
-  final List<_Crumb> _viewportCrumbs = [];
+  Map<double, String>? _percentCrumbs;
+  final Map<double, String> _viewportCrumbs = {};
 
-  static const crumbPadding = 30.0;
-  static const crumbOffsetRatioThreshold = 10;
+  static const double crumbPadding = 30;
+  static const double crumbMinViewportRatio = 4;
 
   @override
   void initState() {
@@ -185,7 +185,7 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
     super.didUpdateWidget(oldWidget);
 
     if (oldWidget.crumbsBuilder != widget.crumbsBuilder) {
-      _modelCrumbs = null;
+      _percentCrumbs = null;
     }
   }
 
@@ -218,10 +218,12 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
             child: widget.child,
           ),
           if (_isDragInProcess)
-            ..._viewportCrumbs.map((crumb) {
+            ..._viewportCrumbs.entries.map((kv) {
+              final offset = kv.key;
+              final label = kv.value;
               return Positioned.directional(
                 textDirection: Directionality.of(context),
-                top: crumb.labelOffset,
+                top: offset,
                 end: DraggableScrollbar.labelThumbPadding + widget.scrollThumbSize.width,
                 child: Padding(
                   padding: widget.padding,
@@ -231,7 +233,7 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
                       child: ScrollLabel(
                         animation: kAlwaysCompleteAnimation,
                         backgroundColor: widget.backgroundColor,
-                        child: widget.crumbTextBuilder(crumb.label),
+                        child: widget.crumbTextBuilder(label),
                       ),
                     ),
                   ),
@@ -349,24 +351,18 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
     _viewportCrumbs.clear();
     final crumbsBuilder = widget.crumbsBuilder;
     if (crumbsBuilder != null) {
+      final maxOffset = thumbMaxScrollExtent;
       final position = controller.position;
-      final contentHeight = position.maxScrollExtent + thumbMaxScrollExtent + position.viewportDimension;
-      final ratio = contentHeight / scrollBarHeight;
-      if (ratio > crumbOffsetRatioThreshold) {
-        final maxLabelOffset = scrollBarHeight - widget.scrollThumbSize.height;
+      if (position.maxScrollExtent / position.viewportDimension > crumbMinViewportRatio) {
         double lastLabelOffset = -crumbPadding;
-        _modelCrumbs ??= crumbsBuilder();
-        _modelCrumbs!.entries.forEach((kv) {
-          final viewOffset = kv.key;
+        _percentCrumbs ??= crumbsBuilder();
+        _percentCrumbs!.entries.forEach((kv) {
+          final percent = kv.key;
           final label = kv.value;
-          final labelOffset = (viewOffset / ratio).roundToDouble();
-          if (labelOffset >= lastLabelOffset + crumbPadding && labelOffset < maxLabelOffset) {
+          final labelOffset = percent * maxOffset;
+          if (labelOffset >= lastLabelOffset + crumbPadding) {
             lastLabelOffset = labelOffset;
-            _viewportCrumbs.add(_Crumb(
-              viewOffset: viewOffset,
-              labelOffset: labelOffset,
-              label: label,
-            ));
+            _viewportCrumbs[labelOffset] = label;
           }
         });
         // hide lonesome crumb, whether it is because of a single section,
@@ -379,17 +375,6 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
   }
 }
 
-class _Crumb {
-  final double viewOffset, labelOffset;
-  final String label;
-
-  const _Crumb({
-    required this.viewOffset,
-    required this.labelOffset,
-    required this.label,
-  });
-}
-
 ///This cut 2 lines in arrow shape
 class ArrowClipper extends CustomClipper<Path> {
   @override
diff --git a/lib/widgets/navigation/nav_bar/nav_bar.dart b/lib/widgets/navigation/nav_bar/nav_bar.dart
index 66b936104..0c98b61a0 100644
--- a/lib/widgets/navigation/nav_bar/nav_bar.dart
+++ b/lib/widgets/navigation/nav_bar/nav_bar.dart
@@ -16,6 +16,7 @@ import 'package:provider/provider.dart';
 
 class AppBottomNavBar extends StatelessWidget {
   final Stream<DraggableScrollBarEvent> events;
+
   // collection loaded in the `CollectionPage`, if any
   final CollectionLens? currentCollection;
 
@@ -35,6 +36,7 @@ class AppBottomNavBar extends StatelessWidget {
 
     final blurred = context.select<Settings, bool>((s) => s.enableOverlayBlurEffect);
     final showVideo = context.select<Settings, bool>((s) => !s.hiddenFilters.contains(MimeFilter.video));
+    final backgroundColor = Theme.of(context).canvasColor;
 
     final items = [
       const AvesBottomNavItem(route: CollectionPage.routeName),
@@ -58,7 +60,7 @@ class AppBottomNavBar extends StatelessWidget {
           onTap: (index) => _goTo(context, items, index),
           currentIndex: _getCurrentIndex(context, items),
           type: BottomNavigationBarType.fixed,
-          backgroundColor: Theme.of(context).canvasColor.withOpacity(.85),
+          backgroundColor: blurred ? backgroundColor.withOpacity(.85) : backgroundColor,
           showSelectedLabels: false,
           showUnselectedLabels: false,
         ),