diff --git a/packages/smooth_app/lib/pages/product/common/product_list_page.dart b/packages/smooth_app/lib/pages/product/common/product_list_page.dart
index 2336258b8a8..5a183073e83 100644
--- a/packages/smooth_app/lib/pages/product/common/product_list_page.dart
+++ b/packages/smooth_app/lib/pages/product/common/product_list_page.dart
@@ -30,6 +30,8 @@ import 'package:smooth_app/pages/product/common/product_refresher.dart';
 import 'package:smooth_app/pages/product_list_user_dialog_helper.dart';
 import 'package:smooth_app/pages/scan/carousel/scan_carousel_manager.dart';
 import 'package:smooth_app/query/product_query.dart';
+import 'package:smooth_app/resources/app_icons.dart' as icons;
+import 'package:smooth_app/themes/theme_provider.dart';
 import 'package:smooth_app/widgets/smooth_app_bar.dart';
 import 'package:smooth_app/widgets/smooth_menu_button.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
@@ -146,42 +148,6 @@ class _ProductListPageState extends State<ProductListPage>
       appBar: SmoothAppBar(
         centerTitle: false,
         actions: <Widget>[
-          if (widget.allowToSwitchBetweenLists)
-            IconButton(
-              icon: const Icon(CupertinoIcons.square_list),
-              tooltip: appLocalizations.action_change_list,
-              onPressed: () async {
-                final ProductList? selected =
-                    await showSmoothDraggableModalSheet<ProductList>(
-                  context: context,
-                  header: SmoothModalSheetHeader(
-                    title: appLocalizations.product_list_select,
-                    suffix: SmoothModalSheetHeaderButton(
-                      label: appLocalizations.product_list_create,
-                      prefix: const Icon(Icons.add_circle_outline_sharp),
-                      tooltip: appLocalizations.product_list_create_tooltip,
-                      onTap: () async =>
-                          ProductListUserDialogHelper(daoProductList)
-                              .showCreateUserListDialog(context),
-                    ),
-                  ),
-                  bodyBuilder: (BuildContext context) => AllProductListModal(
-                    currentList: productList,
-                  ),
-                  initHeight: _computeModalInitHeight(context),
-                );
-
-                if (selected == null) {
-                  return;
-                }
-                if (context.mounted) {
-                  await daoProductList.get(selected);
-                  if (context.mounted) {
-                    setState(() => productList = selected);
-                  }
-                }
-              },
-            ),
           SmoothPopupMenuButton<ProductListPopupItem>(
             onSelected: (final ProductListPopupItem action) async {
               final ProductList? differentProductList =
@@ -202,13 +168,12 @@ class _ProductListPageState extends State<ProductListPage>
             ],
           ),
         ],
-        title: AutoSizeText(
-          ProductQueryPageHelper.getProductListLabel(
-            productList,
-            appLocalizations,
-          ),
-          maxLines: 2,
+        title: _ProductListAppBarTitle(
+          productList: productList,
+          onTap: () => _onChangeList(appLocalizations, daoProductList),
+          enabled: widget.allowToSwitchBetweenLists,
         ),
+        titleSpacing: 0.0,
         actionMode: _selectionMode,
         onLeaveActionMode: () {
           setState(() => _selectionMode = false);
@@ -502,4 +467,107 @@ class _ProductListPageState extends State<ProductListPage>
     }
     return false;
   }
+
+  Future<void> _onChangeList(
+    AppLocalizations appLocalizations,
+    DaoProductList daoProductList,
+  ) async {
+    final ProductList? selected =
+        await showSmoothDraggableModalSheet<ProductList>(
+      context: context,
+      header: SmoothModalSheetHeader(
+        title: appLocalizations.product_list_select,
+        suffix: SmoothModalSheetHeaderButton(
+          label: appLocalizations.product_list_create,
+          prefix: const Icon(Icons.add_circle_outline_sharp),
+          tooltip: appLocalizations.product_list_create_tooltip,
+          onTap: () async => ProductListUserDialogHelper(daoProductList)
+              .showCreateUserListDialog(context),
+        ),
+      ),
+      bodyBuilder: (BuildContext context) => AllProductListModal(
+        currentList: productList,
+      ),
+      initHeight: _computeModalInitHeight(context),
+    );
+
+    if (selected == null) {
+      return;
+    }
+    if (context.mounted) {
+      await daoProductList.get(selected);
+      if (context.mounted) {
+        setState(() => productList = selected);
+      }
+    }
+  }
+}
+
+class _ProductListAppBarTitle extends StatelessWidget {
+  const _ProductListAppBarTitle({
+    required this.productList,
+    required this.onTap,
+    required this.enabled,
+  });
+
+  final ProductList productList;
+  final VoidCallback onTap;
+  final bool enabled;
+
+  @override
+  Widget build(BuildContext context) {
+    final AppLocalizations appLocalizations = AppLocalizations.of(context);
+    final String title = ProductQueryPageHelper.getProductListLabel(
+      productList,
+      appLocalizations,
+    );
+
+    return Semantics(
+      label: enabled ? appLocalizations.action_change_list : null,
+      value: title,
+      button: enabled,
+      excludeSemantics: true,
+      child: SizedBox(
+        height: kToolbarHeight,
+        child: InkWell(
+          borderRadius: context.read<ThemeProvider>().isAmoledTheme
+              ? ANGULAR_BORDER_RADIUS
+              : null,
+          onTap: enabled ? onTap : null,
+          child: Padding(
+            padding: const EdgeInsetsDirectional.symmetric(
+              horizontal: NavigationToolbar.kMiddleSpacing,
+            ),
+            child: LayoutBuilder(
+              builder: (_, BoxConstraints constraints) {
+                return Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: <Widget>[
+                    ConstrainedBox(
+                      constraints: BoxConstraints(
+                        maxWidth: constraints.maxWidth * 0.9 -
+                            (enabled ? (MEDIUM_SPACE - 15.0) : 0),
+                      ),
+                      child: AutoSizeText(
+                        title,
+                        maxLines: 2,
+                      ),
+                    ),
+                    if (enabled) ...<Widget>[
+                      const SizedBox(width: MEDIUM_SPACE),
+                      icons.AppIconTheme(
+                        semanticLabel: appLocalizations.action_change_list,
+                        size: 15.0,
+                        child: const icons.Chevron.down(),
+                      )
+                    ]
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }
diff --git a/packages/smooth_app/lib/resources/app_icons.dart b/packages/smooth_app/lib/resources/app_icons.dart
index 2d6dc46fdaa..0f9306227df 100644
--- a/packages/smooth_app/lib/resources/app_icons.dart
+++ b/packages/smooth_app/lib/resources/app_icons.dart
@@ -695,6 +695,7 @@ abstract class AppIcon extends StatelessWidget {
     this.color,
     this.shadow,
     this.size,
+    this.semanticLabel,
     super.key,
   }) : assert(size == null || size >= 0);
 
@@ -702,6 +703,7 @@ abstract class AppIcon extends StatelessWidget {
   final Color? color;
   final double? size;
   final Shadow? shadow;
+  final String? semanticLabel;
 
   @override
   @mustCallSuper
@@ -719,14 +721,17 @@ abstract class AppIcon extends StatelessWidget {
           Theme.of(context).iconTheme.color,
     };
 
-    return Icon(icon,
-        color: color,
-        size: size ?? iconTheme?.size,
-        shadows: shadow != null
-            ? <Shadow>[shadow!]
-            : iconTheme?.shadow != null
-                ? <Shadow>[iconTheme!.shadow!]
-                : null);
+    return Icon(
+      icon,
+      color: color,
+      size: size ?? iconTheme?.size,
+      semanticLabel: iconTheme?.semanticLabel ?? semanticLabel,
+      shadows: shadow != null
+          ? <Shadow>[shadow!]
+          : iconTheme?.shadow != null
+              ? <Shadow>[iconTheme!.shadow!]
+              : null,
+    );
   }
 }
 
@@ -739,11 +744,13 @@ class AppIconTheme extends InheritedWidget {
     this.color,
     this.size,
     this.shadow,
+    this.semanticLabel,
   });
 
   final Color? color;
   final double? size;
   final Shadow? shadow;
+  final String? semanticLabel;
 
   static AppIconTheme of(BuildContext context) {
     final AppIconTheme? result = maybeOf(context);
@@ -758,7 +765,8 @@ class AppIconTheme extends InheritedWidget {
   @override
   bool updateShouldNotify(AppIconTheme oldWidget) {
     return color != oldWidget.color ||
-        size != oldWidget.size ||
+        semanticLabel != oldWidget.semanticLabel ||
+        shadow != oldWidget.shadow ||
         shadow != oldWidget.shadow;
   }
 }