diff --git a/packages/smooth_app/lib/pages/product/common/product_query_page.dart b/packages/smooth_app/lib/pages/product/common/product_query_page.dart
index e78cc3fe2e9..c7a8bdf3ee6 100644
--- a/packages/smooth_app/lib/pages/product/common/product_query_page.dart
+++ b/packages/smooth_app/lib/pages/product/common/product_query_page.dart
@@ -43,27 +43,12 @@ class _ProductQueryPageState extends State<ProductQueryPage> {
 
   late ProductQueryModel _model;
   int? _lastUpdate;
-  final ScrollController _scrollController = ScrollController();
-  bool _showTitle = true;
 
   @override
   void initState() {
     super.initState();
     _lastUpdate = widget.lastUpdate;
     _model = ProductQueryModel(widget.productListSupplier);
-    _scrollController.addListener(() {
-      if (_scrollController.offset <=
-              _scrollController.position.minScrollExtent &&
-          !_scrollController.position.outOfRange) {
-        if (!_showTitle) {
-          setState(() => _showTitle = true);
-        }
-      } else {
-        if (_showTitle) {
-          setState(() => _showTitle = false);
-        }
-      }
-    });
   }
 
   @override
@@ -136,16 +121,33 @@ class _ProductQueryPageState extends State<ProductQueryPage> {
             children: <Widget>[
               _getHero(screenSize, themeData),
               Center(child: emptiness),
-              AnimatedOpacity(
-                opacity: _showTitle ? 1.0 : 0.0,
-                duration: const Duration(milliseconds: 250),
-                child: Row(
-                  mainAxisSize: MainAxisSize.max,
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: <Widget>[
-                    getBackArrow(context, widget.mainColor),
-                  ],
-                ),
+              CustomScrollView(
+                slivers: <Widget>[
+                  SliverAppBar(
+                      backgroundColor: themeData.scaffoldBackgroundColor,
+                      expandedHeight: screenSize.height * 0.15,
+                      collapsedHeight: screenSize.height * 0.09,
+                      pinned: true,
+                      elevation: 0,
+                      automaticallyImplyLeading: false,
+                      title: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: <Widget>[
+                            getBackArrow(context, widget.mainColor),
+                          ]),
+                      flexibleSpace: LayoutBuilder(builder:
+                          (BuildContext context, BoxConstraints constraints) {
+                        return FlexibleSpaceBar(
+                            centerTitle: true,
+                            title: Text(
+                              widget.name,
+                              textAlign: TextAlign.center,
+                              style: themeData.textTheme.headline1!
+                                  .copyWith(color: widget.mainColor),
+                            ),
+                            background: _getHero(screenSize, themeData));
+                      })),
+                ],
               ),
             ],
           ),
@@ -174,68 +176,87 @@ class _ProductQueryPageState extends State<ProductQueryPage> {
           body: Stack(
             children: <Widget>[
               _getHero(screenSize, themeData),
-              ListView.builder(
-                itemCount: _model.displayProducts!.length,
-                itemBuilder: (BuildContext context, int index) {
-                  return Padding(
-                    padding: const EdgeInsets.symmetric(
-                        horizontal: 12.0, vertical: 8.0),
-                    child: SmoothProductCardFound(
-                      heroTag: _model.displayProducts![index].barcode!,
-                      product: _model.displayProducts![index],
-                      elevation:
-                          Theme.of(context).brightness == Brightness.light
-                              ? 0.0
-                              : 4.0,
-                    ).build(context),
-                  );
-                },
-                padding: EdgeInsets.only(
-                    top: screenSize.height * 0.25, bottom: 80.0),
-                controller: _scrollController,
-              ),
-              AnimatedOpacity(
-                opacity: _showTitle ? 1.0 : 0.0,
-                duration: const Duration(milliseconds: 250),
-                child: Row(
-                  mainAxisSize: MainAxisSize.max,
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: <Widget>[
-                    getBackArrow(context, widget.mainColor),
-                    Padding(
-                      padding: const EdgeInsets.only(top: 24.0),
-                      child: TextButton.icon(
-                        icon: Icon(
-                          Icons.filter_list,
-                          color: widget.mainColor,
-                        ),
-                        label: Text(AppLocalizations.of(context)!.filter),
-                        style: TextButton.styleFrom(
-                          textStyle: TextStyle(
-                            color: widget.mainColor,
-                          ),
-                        ),
-                        onPressed: () {
-                          showCupertinoModalBottomSheet<Widget>(
-                            expand: false,
-                            context: context,
-                            backgroundColor: Colors.transparent,
-                            bounce: true,
-                            builder: (BuildContext context) =>
-                                GroupQueryFilterView(
-                              categories: _model.categories,
-                              categoriesList: _model.sortedCategories,
-                              callback: (String category) {
-                                _model.selectCategory(category);
-                                setState(() {});
-                              },
+              CustomScrollView(
+                slivers: <Widget>[
+                  SliverAppBar(
+                      backgroundColor: themeData.scaffoldBackgroundColor,
+                      expandedHeight: screenSize.height * 0.15,
+                      collapsedHeight: screenSize.height * 0.09,
+                      pinned: true,
+                      elevation: 0,
+                      automaticallyImplyLeading: false,
+                      title: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: <Widget>[
+                            getBackArrow(context, widget.mainColor),
+                            Padding(
+                              padding: const EdgeInsets.only(top: 24.0),
+                              child: TextButton.icon(
+                                icon: Icon(
+                                  Icons.filter_list,
+                                  color: widget.mainColor,
+                                ),
+                                label: Text(
+                                    AppLocalizations.of(context)!.filter,
+                                    style: themeData.textTheme.subtitle1!
+                                        .copyWith(color: widget.mainColor)),
+                                style: TextButton.styleFrom(
+                                  textStyle: TextStyle(
+                                    color: widget.mainColor,
+                                  ),
+                                ),
+                                onPressed: () {
+                                  showCupertinoModalBottomSheet<Widget>(
+                                    expand: false,
+                                    context: context,
+                                    backgroundColor: Colors.transparent,
+                                    bounce: true,
+                                    builder: (BuildContext context) =>
+                                        GroupQueryFilterView(
+                                      categories: _model.categories,
+                                      categoriesList: _model.sortedCategories,
+                                      callback: (String category) {
+                                        _model.selectCategory(category);
+                                        setState(() {});
+                                      },
+                                    ),
+                                  );
+                                },
+                              ),
+                            )
+                          ]),
+                      flexibleSpace: LayoutBuilder(builder:
+                          (BuildContext context, BoxConstraints constraints) {
+                        return FlexibleSpaceBar(
+                            centerTitle: true,
+                            title: Text(
+                              widget.name,
+                              textAlign: TextAlign.center,
+                              style: themeData.textTheme.headline1!
+                                  .copyWith(color: widget.mainColor),
                             ),
-                          );
-                        },
-                      ),
+                            background: _getHero(screenSize, themeData));
+                      })),
+                  SliverList(
+                    delegate: SliverChildBuilderDelegate(
+                      (_, int index) {
+                        return Padding(
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 12.0, vertical: 8.0),
+                          child: SmoothProductCardFound(
+                            heroTag: _model.displayProducts![index].barcode!,
+                            product: _model.displayProducts![index],
+                            elevation:
+                                Theme.of(context).brightness == Brightness.light
+                                    ? 0.0
+                                    : 4.0,
+                          ).build(context),
+                        );
+                      },
+                      childCount: _model.displayProducts!.length,
                     ),
-                  ],
-                ),
+                  )
+                ],
               ),
             ],
           ),
@@ -243,43 +264,15 @@ class _ProductQueryPageState extends State<ProductQueryPage> {
       );
 
   Widget _getHero(final Size screenSize, final ThemeData themeData) => Hero(
-        tag: widget.heroTag,
-        child: Container(
-            width: screenSize.width,
-            height: screenSize.height,
-            decoration: BoxDecoration(
-              color: widget.mainColor.withAlpha(32),
-              borderRadius: const BorderRadius.only(
-                  bottomLeft: Radius.circular(20.0),
-                  bottomRight: Radius.circular(20.0)),
-            ),
-            padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 96.0),
-            child: Column(
-              children: <Widget>[
-                SizedBox(
-                  height: 80.0,
-                  child: Row(
-                    mainAxisSize: MainAxisSize.max,
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: <Widget>[
-                      Flexible(
-                        child: AnimatedOpacity(
-                            opacity: _showTitle ? 1.0 : 0.0,
-                            duration: const Duration(milliseconds: 250),
-                            child: Text(
-                              widget.name,
-                              textAlign: TextAlign.center,
-                              style: themeData.textTheme.headline1!
-                                  .copyWith(color: widget.mainColor),
-                            )),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-            )),
-      );
+      tag: widget.heroTag,
+      child: Container(
+        width: screenSize.width,
+        height: screenSize.height,
+        decoration: BoxDecoration(
+          color: widget.mainColor.withAlpha(32),
+        ),
+        padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 96.0),
+      ));
 
   Widget _getEmptyText(
     final ThemeData themeData,