diff --git a/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart
index 82f2e1c3b2..ca5a9c9b32 100644
--- a/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart
+++ b/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart
@@ -78,25 +78,21 @@ class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet>
           child: CustomScrollView(
             controller: scrollController,
             slivers: [
-              SliverToBoxAdapter(
-                child: Column(
-                  children: [
-                    const SizedBox(height: 10),
-                    const _DragHandle(),
-                    const SizedBox(height: 14),
-                    if (widget.actions.isNotEmpty)
+              const SliverPersistentHeader(delegate: _DragHandleDelegate(), pinned: true),
+              if (widget.actions.isNotEmpty)
+                SliverToBoxAdapter(
+                  child: Column(
+                    children: [
                       SizedBox(
                         height: 115,
                         child: ListView(shrinkWrap: true, scrollDirection: Axis.horizontal, children: widget.actions),
                       ),
-                    if (widget.actions.isNotEmpty) ...[
                       const Divider(indent: 16, endIndent: 16),
                       const SizedBox(height: 16),
                     ],
-                  ],
+                  ),
                 ),
-              ),
-              ...(widget.slivers ?? []),
+              if (widget.slivers != null) ...widget.slivers!,
             ],
           ),
         );
@@ -105,17 +101,42 @@ class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet>
   }
 }
 
+class _DragHandleDelegate extends SliverPersistentHeaderDelegate {
+  const _DragHandleDelegate();
+
+  @override
+  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return const _DragHandle();
+  }
+
+  @override
+  bool shouldRebuild(_DragHandleDelegate oldDelegate) => false;
+
+  @override
+  double get minExtent => 50.0;
+
+  @override
+  double get maxExtent => 50.0;
+}
+
 class _DragHandle extends StatelessWidget {
   const _DragHandle();
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      height: 6,
-      width: 32,
-      decoration: BoxDecoration(
-        color: context.themeData.dividerColor.lighten(amount: 0.6),
-        borderRadius: const BorderRadius.all(Radius.circular(20)),
+    return SizedBox(
+      height: 50,
+      child: Center(
+        child: SizedBox(
+          width: 32,
+          height: 6,
+          child: DecoratedBox(
+          decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(20)),
+              color: context.themeData.dividerColor.lighten(amount: 0.6),
+          ),
+        ),
+        ),
       ),
     );
   }
diff --git a/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart
index f6d66b7f12..17d742ae19 100644
--- a/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart
+++ b/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
@@ -16,9 +17,13 @@ class MapBottomSheet extends ConsumerWidget {
     return BaseBottomSheet(
       initialChildSize: 0.25,
       shouldCloseOnMinExtent: false,
+      resizeOnScroll: false,
       actions: const [],
+      backgroundColor: context.themeData.colorScheme.surface,
       slivers: [
         SliverFillRemaining(
+          hasScrollBody: false,
+          // TODO: rebuilding the entire timeline from scratch on bounds change is very inefficient
           child: ProviderScope(
             key: ObjectKey(bounds),
             overrides: [
@@ -28,7 +33,7 @@ class MapBottomSheet extends ConsumerWidget {
                 return timelineService;
               }),
             ],
-            child: const Timeline(),
+            child: const Timeline(appBar: null, bottomSheet: null),
           ),
         ),
       ],