diff --git a/lib/ui/mazaya/widgets/mazaya_city_selector.dart b/lib/ui/mazaya/widgets/mazaya_city_selector.dart
new file mode 100644
index 00000000..80b53a8c
--- /dev/null
+++ b/lib/ui/mazaya/widgets/mazaya_city_selector.dart
@@ -0,0 +1,105 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:mohem_flutter_app/app_state/app_state.dart';
+import 'package:mohem_flutter_app/extensions/string_extensions.dart';
+import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
+
+// Shared by MazayaDiscoverScreen and RetailersListScreen so both city pickers stay
+// visually/behaviorally identical - change the list or the sheet design here only.
+List<String> mazayaCitiesList(BuildContext context) {
+  bool isAr = AppState().isArabic(context);
+  return <String>[
+    LocaleKeys.allCitiesOption.tr(),
+    LocaleKeys.riyadh.tr(),
+    isAr ? "جدة" : "Jeddah",
+    isAr ? "الدمام" : "Dammam",
+    isAr ? "الخبر" : "Khobar",
+    isAr ? "مكة المكرمة" : "Mecca",
+    isAr ? "المدينة المنورة" : "Medina",
+  ];
+}
+
+void showMazayaCitySelectionBottomSheet(
+  BuildContext context, {
+  required String selectedCity,
+  required ValueChanged<String> onCitySelected,
+}) {
+  List<String> cities = mazayaCitiesList(context);
+
+  showModalBottomSheet<void>(
+    context: context,
+    backgroundColor: Colors.transparent,
+    builder: (BuildContext sheetContext) {
+      return Container(
+        padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
+        decoration: const BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+        ),
+        child: SafeArea(
+          top: false,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                width: 40,
+                height: 4,
+                margin: const EdgeInsets.only(bottom: 12),
+                decoration: BoxDecoration(
+                  color: const Color(0xFFCBD5E1),
+                  borderRadius: BorderRadius.circular(2),
+                ),
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  LocaleKeys.selectCity.tr().toText16(
+                    isBold: true,
+                    color: const Color(0xFF1E293B),
+                  ),
+                  InkWell(
+                    onTap: () => Navigator.pop(sheetContext),
+                    borderRadius: BorderRadius.circular(16),
+                    child: const Padding(
+                      padding: EdgeInsets.all(4),
+                      child: Icon(
+                        Icons.close_rounded,
+                        size: 20,
+                        color: Color(0xFF64748B),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 12),
+              ...cities.map((city) {
+                bool isSelected = selectedCity == city;
+                return ListTile(
+                  title: city.toText14(
+                    isBold: isSelected,
+                    color:
+                        isSelected
+                            ? const Color(0xFF0D9488)
+                            : const Color(0xFF1E293B),
+                  ),
+                  trailing:
+                      isSelected
+                          ? const Icon(
+                            Icons.check_rounded,
+                            color: Color(0xFF0D9488),
+                            size: 20,
+                          )
+                          : null,
+                  onTap: () {
+                    onCitySelected(city);
+                    Navigator.pop(sheetContext);
+                  },
+                );
+              }),
+            ],
+          ),
+        ),
+      );
+    },
+  );
+}