diff --git a/app/lib/widget/home_app_bar.dart b/app/lib/widget/home_app_bar.dart
index 49cf549f..be705374 100644
--- a/app/lib/widget/home_app_bar.dart
+++ b/app/lib/widget/home_app_bar.dart
@@ -20,6 +20,7 @@ class HomeSliverAppBar extends StatelessWidget {
     this.menuActions,
     this.onSelectedMenuActions,
     this.isShowProgressIcon = false,
+    this.bottom,
   });
 
   @override
@@ -39,6 +40,7 @@ class HomeSliverAppBar extends StatelessWidget {
       blurFilter: Theme.of(context).appBarBlurFilter,
       floating: true,
       automaticallyImplyLeading: false,
+      bottom: bottom,
       actions: [
         ...actions ?? [],
         if (menuActions?.isNotEmpty == true)
@@ -70,6 +72,7 @@ class HomeSliverAppBar extends StatelessWidget {
 
   /// Screen specific action buttons
   final List<Widget>? actions;
+  final PreferredSizeWidget? bottom;
 
   /// Screen specific actions under the overflow menu. The value of each item
   /// much >= 0
diff --git a/app/lib/widget/home_collections.dart b/app/lib/widget/home_collections.dart
index 7d8276f6..4f884165 100644
--- a/app/lib/widget/home_collections.dart
+++ b/app/lib/widget/home_collections.dart
@@ -142,7 +142,6 @@ class _WrappedHomeCollectionsState extends State<_WrappedHomeCollections>
                       ? const _AppBar()
                       : const _SelectionAppBar(),
                 ),
-                const _NavigationBar(),
                 const SliverToBoxAdapter(
                   child: SizedBox(height: 8),
                 ),
diff --git a/app/lib/widget/home_collections/app_bar.dart b/app/lib/widget/home_collections/app_bar.dart
index 5b87307f..ba63eda0 100644
--- a/app/lib/widget/home_collections/app_bar.dart
+++ b/app/lib/widget/home_collections/app_bar.dart
@@ -31,6 +31,10 @@ class _AppBar extends StatelessWidget {
               break;
           }
         },
+        bottom: const PreferredSize(
+          preferredSize: Size.fromHeight(48),
+          child: _NavigationBar(),
+        ),
       ),
     );
   }
diff --git a/app/lib/widget/home_collections/nav_bar_buttons.dart b/app/lib/widget/home_collections/nav_bar_buttons.dart
index 324c65cd..fb6ee7cb 100644
--- a/app/lib/widget/home_collections/nav_bar_buttons.dart
+++ b/app/lib/widget/home_collections/nav_bar_buttons.dart
@@ -44,19 +44,22 @@ class HomeCollectionsNavBarButton extends StatelessWidget {
         ),
       );
     } else {
-      return ActionChip(
-        avatar: icon,
-        label: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(label),
-            if (isShowIndicator) ...const [
-              SizedBox(width: 4),
-              _NavBarButtonIndicator(),
+      return Theme(
+        data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
+        child: ActionChip(
+          avatar: icon,
+          label: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(label),
+              if (isShowIndicator) ...const [
+                SizedBox(width: 4),
+                _NavBarButtonIndicator(),
+              ],
             ],
-          ],
+          ),
+          onPressed: isEnabled ? onPressed : null,
         ),
-        onPressed: isEnabled ? onPressed : null,
       );
     }
   }
diff --git a/app/lib/widget/home_collections/navigation_bar.dart b/app/lib/widget/home_collections/navigation_bar.dart
index 999ee7b1..591ba87d 100644
--- a/app/lib/widget/home_collections/navigation_bar.dart
+++ b/app/lib/widget/home_collections/navigation_bar.dart
@@ -37,88 +37,62 @@ class _NavigationBarState extends State<_NavigationBar> {
 
   @override
   Widget build(BuildContext context) {
-    return SliverToBoxAdapter(
-      child: SizedBox(
-        height: 48,
-        child: Row(
-          children: [
-            Expanded(
-              child: Stack(
-                children: [
-                  _BlocSelector(
-                    selector: (state) => state.navBarButtons,
-                    builder: (context, navBarButtons) {
-                      final buttons = navBarButtons
-                          .map((e) => _buildButton(context, e))
-                          .nonNulls
-                          .toList();
-                      return ListView.separated(
-                        controller: _scrollController,
-                        scrollDirection: Axis.horizontal,
-                        padding: const EdgeInsets.only(left: 16),
-                        itemCount: buttons.length,
-                        itemBuilder: (context, i) => Center(
-                          child: buttons[i],
-                        ),
-                        separatorBuilder: (context, _) =>
-                            const SizedBox(width: 12),
-                      );
-                    },
-                  ),
-                  if (_hasLeftContent)
-                    Positioned(
-                      left: 0,
-                      top: 0,
-                      bottom: 0,
-                      child: IgnorePointer(
-                        ignoring: true,
-                        child: Container(
-                          width: 32,
-                          decoration: BoxDecoration(
-                            gradient: LinearGradient(
-                              colors: [
-                                Theme.of(context).colorScheme.background,
-                                Theme.of(context)
-                                    .colorScheme
-                                    .background
-                                    .withOpacity(0),
-                              ],
-                            ),
-                          ),
-                        ),
-                      ),
+    return SizedBox(
+      height: 48,
+      child: Row(
+        children: [
+          Expanded(
+            child: ShaderMask(
+              shaderCallback: (rect) {
+                final colors = <Color>[];
+                final stops = <double>[];
+                if (_hasLeftContent) {
+                  colors.addAll([Colors.white, Colors.transparent]);
+                  stops.addAll([0, .1]);
+                } else {
+                  colors.add(Colors.transparent);
+                  stops.add(0);
+                }
+                if (_hasRightContent) {
+                  colors.addAll([Colors.transparent, Colors.white]);
+                  stops.addAll([.9, 1]);
+                } else {
+                  colors.add(Colors.transparent);
+                  stops.add(1);
+                }
+                return LinearGradient(
+                  begin: Alignment.centerLeft,
+                  end: Alignment.centerRight,
+                  colors: colors,
+                  stops: stops,
+                ).createShader(rect);
+              },
+              blendMode: BlendMode.dstOut,
+              child: _BlocSelector(
+                selector: (state) => state.navBarButtons,
+                builder: (context, navBarButtons) {
+                  final buttons = navBarButtons
+                      .map((e) => _buildButton(context, e))
+                      .nonNulls
+                      .toList();
+                  return ListView.separated(
+                    controller: _scrollController,
+                    scrollDirection: Axis.horizontal,
+                    padding: const EdgeInsets.only(left: 16),
+                    itemCount: buttons.length,
+                    itemBuilder: (context, i) => Center(
+                      child: buttons[i],
                     ),
-                  if (_hasRightContent)
-                    Positioned(
-                      right: 0,
-                      top: 0,
-                      bottom: 0,
-                      child: IgnorePointer(
-                        ignoring: true,
-                        child: Container(
-                          width: 32,
-                          decoration: BoxDecoration(
-                            gradient: LinearGradient(
-                              colors: [
-                                Theme.of(context)
-                                    .colorScheme
-                                    .background
-                                    .withOpacity(0),
-                                Theme.of(context).colorScheme.background,
-                              ],
-                            ),
-                          ),
-                        ),
-                      ),
-                    ),
-                ],
+                    separatorBuilder: (context, _) => const SizedBox(width: 12),
+                  );
+                },
               ),
             ),
-            const SizedBox(width: 8),
-            const _NavBarNewButton(),
-            const SizedBox(width: 16),
-          ],
-        ),
+          ),
+          const SizedBox(width: 8),
+          const _NavBarNewButton(),
+          const SizedBox(width: 16),
+        ],
       ),
     );
   }