feat: Implement agent search functionality and update the home screen to dynamically display professional data.

assets/icons/calendar_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 4H18V2H16V4H8V2H6V4H5C3.89 4 3 4.9 3 6V20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V10H19V20ZM19 8H5V6H19V8Z" fill="currentColor"/>
+</svg>

assets/icons/cities_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 21V7L9 3L15 7V9H21V21H3ZM5 19H7V17H5V19ZM5 15H7V13H5V15ZM5 11H7V9H5V11ZM9 19H11V17H9V19ZM9 15H11V13H9V15ZM9 11H11V9H9V11ZM9 7H11V5.85L9 4.7V7ZM13 19H19V11H13V19ZM15 17V15H17V17H15ZM15 13V11H17V13H15Z" fill="currentColor"/>
+</svg>

assets/icons/properties_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 20V14H14V20H19V12H22L12 3L2 12H5V20H10Z" fill="currentColor"/>
+</svg>

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

ios/Podfile.lock

@@ -2,6 +2,9 @@ PODS:
   - Flutter (1.0.0)
   - flutter_secure_storage (6.0.0):
     - Flutter
+  - path_provider_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
   - shared_preferences_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
@@ -12,6 +15,7 @@ PODS:
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_secure_storage (from `.symlinks/plugins/flutter_secure_storage/ios`)
+  - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - sqflite_darwin (from `.symlinks/plugins/sqflite_darwin/darwin`)
 
@@ -20,6 +24,8 @@ EXTERNAL SOURCES:
     :path: Flutter
   flutter_secure_storage:
     :path: ".symlinks/plugins/flutter_secure_storage/ios"
+  path_provider_foundation:
+    :path: ".symlinks/plugins/path_provider_foundation/darwin"
   shared_preferences_foundation:
     :path: ".symlinks/plugins/shared_preferences_foundation/darwin"
   sqflite_darwin:
@@ -28,6 +34,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Flutter: cabc95a1d2626b1b06e7179b784ebcf0c0cde467
   flutter_secure_storage: d33dac7ae2ea08509be337e775f6b59f1ff45f12
+  path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
   shared_preferences_foundation: 5086985c1d43c5ba4d5e69a4e8083a389e2909e6
   sqflite_darwin: 5a7236e3b501866c1c9befc6771dfd73ffb8702d
 

lib/features/agents/data/agents_repository.dart

@@ -44,6 +44,7 @@ class AgentsRepository {
   /// Response: { success, data: { data: [...], meta: {...} } }
   Future<SearchAgentsResponse> searchAgents({
     String? agentTypeId,
+    String? search,
     int page = 1,
     int limit = 10,
     String? sortBy,
@@ -56,6 +57,7 @@ class AgentsRepository {
       };
 
       if (agentTypeId != null) queryParams['agentTypeId'] = agentTypeId;
+      if (search != null && search.isNotEmpty) queryParams['search'] = search;
       if (sortBy != null) queryParams['sortBy'] = sortBy;
       if (sortOrder != null) queryParams['sortOrder'] = sortOrder;
 

lib/features/agents/data/models/agent_profile.dart

@@ -53,12 +53,45 @@ class AgentProfile {
   String? get avatarUrl => avatar ?? user?.avatar;
 
   String get location {
+    // Direct fields first
     if (city != null && state != null) return '$city, $state';
     if (city != null) return city!;
     if (state != null) return state!;
+
+    // Fallback: extract from fieldValues (matches web getLocationString)
+    String? fvCity;
+    String? fvState;
+    for (final fv in fieldValues) {
+      final slug = fv.fieldSlug.toLowerCase();
+      if (slug == 'city' || slug == 'city_name') {
+        fvCity = _extractFieldString(fv);
+      } else if (slug == 'state' || slug == 'state_name') {
+        fvState = _extractFieldString(fv);
+      }
+    }
+    final parts = [fvCity, fvState].where((s) => s != null && s.isNotEmpty);
+    if (parts.isNotEmpty) return parts.join(', ');
+
     return '';
   }
 
+  /// Extract a display string from a field value (handles jsonValue arrays).
+  static String? _extractFieldString(AgentFieldValue fv) {
+    if (fv.jsonValue is List && (fv.jsonValue as List).isNotEmpty) {
+      final val = (fv.jsonValue as List).first;
+      if (val is String && val.isNotEmpty) {
+        return val
+            .split('_')
+            .map((w) => w.isNotEmpty
+                ? '${w[0].toUpperCase()}${w.substring(1).toLowerCase()}'
+                : '')
+            .join(' ');
+      }
+    }
+    if (fv.textValue != null && fv.textValue!.isNotEmpty) return fv.textValue;
+    return null;
+  }
+
   /// Get experience from field values
   String get experienceText {
     for (final fv in fieldValues) {
@@ -66,29 +99,50 @@ class AgentProfile {
           fv.fieldName.toLowerCase().contains('experience')) {
         if (fv.textValue != null) return fv.textValue!;
         if (fv.numberValue != null) {
-          return '${fv.numberValue!.toInt()}+ years in the real estate industry.';
+          return '${fv.numberValue!.toInt()}+ years in real estate.';
         }
       }
     }
     return '';
   }
 
-  /// Get specializations from field values
+  /// Get specializations / expertise from field values.
+  /// Matches web's getExpertiseTags slugs.
   List<String> get specializations {
+    final tags = <String>[];
+    const expertiseSlugs = [
+      'about_me_expertise',
+      'expertise_areas',
+      'specializations',
+      'areas_of_expertise',
+      'expertise',
+      'specialization',
+      'property_type',
+      'loan_type',
+    ];
+
     for (final fv in fieldValues) {
       final slug = fv.fieldSlug.toLowerCase();
-      if (slug.contains('specialization') ||
+      if (!expertiseSlugs.any((s) => slug.contains(s))) continue;
-          slug.contains('property_type') ||
+
-          slug.contains('loan_type')) {
       if (fv.jsonValue is List) {
-          return (fv.jsonValue as List).map((e) => e.toString()).toList();
+        for (final v in (fv.jsonValue as List)) {
+          final s = v.toString().trim();
+          if (s.isEmpty) continue;
+          final display = s
+              .split('_')
+              .map((w) => w.isNotEmpty
+                  ? '${w[0].toUpperCase()}${w.substring(1).toLowerCase()}'
+                  : '')
+              .join(' ');
+          if (!tags.contains(display)) tags.add(display);
         }
-        if (fv.textValue != null) {
+      } else if (fv.textValue != null && fv.textValue!.trim().isNotEmpty) {
-          return fv.textValue!.split(',').map((s) => s.trim()).toList();
+        final display = fv.textValue!.trim();
+        if (!tags.contains(display)) tags.add(display);
       }
     }
-    }
+    return tags;
-    return [];
   }
 
   factory AgentProfile.fromJson(Map<String, dynamic> json) {

lib/features/agents/presentation/providers/search_agents_provider.dart

@@ -0,0 +1,139 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:real_estate_mobile/features/agents/data/agents_repository.dart';
+import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart';
+import 'package:real_estate_mobile/features/agents/data/models/agent_type.dart';
+import 'package:real_estate_mobile/features/agents/presentation/providers/agents_provider.dart';
+
+class SearchAgentsState {
+  final List<AgentProfile> agents;
+  final List<AgentType> agentTypes;
+  final bool isLoading;
+  final bool isLoadingMore;
+  final String? error;
+  final String searchQuery;
+  final String? selectedAgentTypeId;
+  final int currentPage;
+  final int totalPages;
+
+  const SearchAgentsState({
+    this.agents = const [],
+    this.agentTypes = const [],
+    this.isLoading = false,
+    this.isLoadingMore = false,
+    this.error,
+    this.searchQuery = '',
+    this.selectedAgentTypeId,
+    this.currentPage = 1,
+    this.totalPages = 1,
+  });
+
+  bool get hasMore => currentPage < totalPages;
+
+  SearchAgentsState copyWith({
+    List<AgentProfile>? agents,
+    List<AgentType>? agentTypes,
+    bool? isLoading,
+    bool? isLoadingMore,
+    String? error,
+    String? searchQuery,
+    String? selectedAgentTypeId,
+    bool clearAgentTypeId = false,
+    int? currentPage,
+    int? totalPages,
+  }) {
+    return SearchAgentsState(
+      agents: agents ?? this.agents,
+      agentTypes: agentTypes ?? this.agentTypes,
+      isLoading: isLoading ?? this.isLoading,
+      isLoadingMore: isLoadingMore ?? this.isLoadingMore,
+      error: error,
+      searchQuery: searchQuery ?? this.searchQuery,
+      selectedAgentTypeId: clearAgentTypeId
+          ? null
+          : (selectedAgentTypeId ?? this.selectedAgentTypeId),
+      currentPage: currentPage ?? this.currentPage,
+      totalPages: totalPages ?? this.totalPages,
+    );
+  }
+}
+
+class SearchAgentsNotifier extends StateNotifier<SearchAgentsState> {
+  final AgentsRepository _repository;
+
+  SearchAgentsNotifier(this._repository)
+      : super(const SearchAgentsState(isLoading: true)) {
+    _init();
+  }
+
+  Future<void> _init() async {
+    try {
+      final agentTypes = await _repository.getAgentTypes();
+      state = state.copyWith(agentTypes: agentTypes);
+      await _fetchAgents(page: 1);
+    } catch (e) {
+      state = state.copyWith(isLoading: false, error: e.toString());
+    }
+  }
+
+  Future<void> _fetchAgents({required int page, bool append = false}) async {
+    try {
+      final response = await _repository.searchAgents(
+        search: state.searchQuery.isNotEmpty ? state.searchQuery : null,
+        agentTypeId: state.selectedAgentTypeId,
+        page: page,
+        limit: 10,
+      );
+
+      state = state.copyWith(
+        agents: append ? [...state.agents, ...response.data] : response.data,
+        currentPage: response.page,
+        totalPages: response.totalPages,
+        isLoading: false,
+        isLoadingMore: false,
+      );
+    } catch (e) {
+      state = state.copyWith(
+        isLoading: false,
+        isLoadingMore: false,
+        error: e.toString(),
+      );
+    }
+  }
+
+  void search(String query) {
+    state = state.copyWith(
+      searchQuery: query,
+      isLoading: true,
+      currentPage: 1,
+    );
+    _fetchAgents(page: 1);
+  }
+
+  void filterByAgentType(String? agentTypeId) {
+    state = state.copyWith(
+      selectedAgentTypeId: agentTypeId,
+      clearAgentTypeId: agentTypeId == null,
+      isLoading: true,
+      currentPage: 1,
+    );
+    _fetchAgents(page: 1);
+  }
+
+  void loadMore() {
+    if (state.isLoadingMore || !state.hasMore) return;
+    state = state.copyWith(isLoadingMore: true);
+    _fetchAgents(page: state.currentPage + 1, append: true);
+  }
+
+  Future<void> refresh() async {
+    state = state.copyWith(isLoading: true, currentPage: 1);
+    await _fetchAgents(page: 1);
+  }
+}
+
+final searchAgentsProvider =
+    StateNotifierProvider.autoDispose<SearchAgentsNotifier, SearchAgentsState>(
+        (ref) {
+  final repository = ref.watch(agentsRepositoryProvider);
+  return SearchAgentsNotifier(repository);
+});

lib/features/agents/presentation/screens/agent_search_screen.dart

@@ -0,0 +1,699 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:go_router/go_router.dart';
+import 'package:real_estate_mobile/config/app_config.dart';
+import 'package:real_estate_mobile/core/constants/app_colors.dart';
+import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart';
+import 'package:real_estate_mobile/features/agents/data/models/agent_type.dart';
+import 'package:real_estate_mobile/features/agents/presentation/providers/search_agents_provider.dart';
+import 'package:real_estate_mobile/features/home/presentation/widgets/home_header.dart';
+
+class AgentSearchScreen extends ConsumerStatefulWidget {
+  final String? initialQuery;
+
+  const AgentSearchScreen({super.key, this.initialQuery});
+
+  @override
+  ConsumerState<AgentSearchScreen> createState() => _AgentSearchScreenState();
+}
+
+class _AgentSearchScreenState extends ConsumerState<AgentSearchScreen> {
+  late TextEditingController _searchController;
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    _searchController = TextEditingController(text: widget.initialQuery ?? '');
+    _scrollController.addListener(_onScroll);
+
+    // Trigger initial search if query provided
+    if (widget.initialQuery != null && widget.initialQuery!.isNotEmpty) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        ref
+            .read(searchAgentsProvider.notifier)
+            .search(widget.initialQuery!);
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >=
+        _scrollController.position.maxScrollExtent - 200) {
+      ref.read(searchAgentsProvider.notifier).loadMore();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final state = ref.watch(searchAgentsProvider);
+
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Column(
+        children: [
+          // Shared header
+          SafeArea(
+            bottom: false,
+            child: const HomeHeader(),
+          ),
+          _buildSearchBar(),
+          const SizedBox(height: 12),
+          _buildFilterChips(state.agentTypes, state.selectedAgentTypeId),
+          const SizedBox(height: 12),
+          Expanded(child: _buildAgentList(state)),
+        ],
+      ),
+      bottomNavigationBar: _buildBottomNavBar(),
+    );
+  }
+
+  Widget _buildSearchBar() {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(24, 16, 24, 0),
+      child: SizedBox(
+        height: 42,
+        child: Row(
+          children: [
+            Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                  border: Border.all(
+                    color: AppColors.primaryDark,
+                    width: 0.1,
+                  ),
+                  borderRadius: BorderRadius.circular(7),
+                ),
+                child: TextField(
+                  controller: _searchController,
+                  style: const TextStyle(
+                    fontFamily: 'Fractul',
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                    color: AppColors.primaryDark,
+                  ),
+                  decoration: InputDecoration(
+                    hintText: 'Search Agents',
+                    hintStyle: TextStyle(
+                      fontFamily: 'Fractul',
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                      color: Colors.black.withValues(alpha: 0.5),
+                    ),
+                    border: InputBorder.none,
+                    contentPadding: const EdgeInsets.symmetric(
+                      horizontal: 14,
+                      vertical: 10,
+                    ),
+                  ),
+                  onSubmitted: (value) {
+                    ref.read(searchAgentsProvider.notifier).search(value);
+                  },
+                ),
+              ),
+            ),
+            const SizedBox(width: 0),
+            GestureDetector(
+              onTap: () {
+                ref
+                    .read(searchAgentsProvider.notifier)
+                    .search(_searchController.text);
+              },
+              child: Container(
+                width: 62,
+                height: 42,
+                decoration: BoxDecoration(
+                  color: AppColors.accentOrange,
+                  border: Border.all(
+                    color: AppColors.primaryDark,
+                    width: 0.1,
+                  ),
+                  borderRadius: BorderRadius.circular(7),
+                ),
+                child: const Icon(Icons.search, color: Colors.white, size: 24),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFilterChips(
+      List<AgentType> agentTypes, String? selectedTypeId) {
+    return SizedBox(
+      height: 32,
+      child: Padding(
+        padding: const EdgeInsets.only(left: 24),
+        child: Row(
+          children: [
+            Expanded(
+              child: ListView.separated(
+                scrollDirection: Axis.horizontal,
+                itemCount: agentTypes.length,
+                separatorBuilder: (_, __) => const SizedBox(width: 4),
+                itemBuilder: (context, index) {
+                  final type = agentTypes[index];
+                  final isSelected = type.id == selectedTypeId;
+                  return GestureDetector(
+                    onTap: () {
+                      ref
+                          .read(searchAgentsProvider.notifier)
+                          .filterByAgentType(
+                              isSelected ? null : type.id);
+                    },
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 12, vertical: 4),
+                      decoration: BoxDecoration(
+                        color: isSelected
+                            ? AppColors.accentOrange
+                            : Colors.transparent,
+                        borderRadius: BorderRadius.circular(15),
+                        border: Border.all(
+                          color: AppColors.primaryDark,
+                          width: 0.1,
+                        ),
+                      ),
+                      child: Center(
+                        child: Text(
+                          type.name,
+                          style: TextStyle(
+                            fontFamily: 'SourceSerif4',
+                            fontSize: 14,
+                            fontWeight: FontWeight.w400,
+                            color: isSelected
+                                ? Colors.white
+                                : AppColors.primaryDark,
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
+            ),
+            const SizedBox(width: 8),
+            Padding(
+              padding: const EdgeInsets.only(right: 24),
+              child: Container(
+                width: 39,
+                height: 27,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(15),
+                  border: Border.all(
+                    color: AppColors.primaryDark,
+                    width: 0.1,
+                  ),
+                ),
+                child: const Icon(
+                  Icons.tune,
+                  color: AppColors.primaryDark,
+                  size: 20,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAgentList(SearchAgentsState state) {
+    if (state.isLoading) {
+      return const Center(
+        child: CircularProgressIndicator(color: AppColors.accentOrange),
+      );
+    }
+
+    if (state.error != null) {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const Icon(Icons.error_outline,
+                color: AppColors.accentOrange, size: 48),
+            const SizedBox(height: 12),
+            Text(
+              state.error!,
+              style: const TextStyle(
+                fontFamily: 'Fractul',
+                fontSize: 14,
+                color: AppColors.primaryDark,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            TextButton(
+              onPressed: () =>
+                  ref.read(searchAgentsProvider.notifier).refresh(),
+              child: const Text(
+                'Retry',
+                style: TextStyle(
+                  fontFamily: 'Fractul',
+                  fontSize: 14,
+                  fontWeight: FontWeight.w600,
+                  color: AppColors.accentOrange,
+                ),
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    if (state.agents.isEmpty) {
+      return const Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(Icons.people_outline, color: AppColors.hintText, size: 48),
+            SizedBox(height: 12),
+            Text(
+              'No agents found',
+              style: TextStyle(
+                fontFamily: 'Fractul',
+                fontSize: 14,
+                color: AppColors.hintText,
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    return ListView.builder(
+      controller: _scrollController,
+      padding: const EdgeInsets.symmetric(horizontal: 24),
+      itemCount: state.agents.length + (state.isLoadingMore ? 1 : 0),
+      itemBuilder: (context, index) {
+        if (index == state.agents.length) {
+          return const Padding(
+            padding: EdgeInsets.symmetric(vertical: 20),
+            child: Center(
+              child:
+                  CircularProgressIndicator(color: AppColors.accentOrange),
+            ),
+          );
+        }
+        return Padding(
+          padding: const EdgeInsets.only(bottom: 16),
+          child: _AgentCard(agent: state.agents[index]),
+        );
+      },
+    );
+  }
+
+  // ── Bottom Navigation Bar (shared style matching HomeScreen) ──
+  Widget _buildBottomNavBar() {
+    return Container(
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        border: Border(
+          top: BorderSide(color: Color(0xFFE8E8E8), width: 1),
+        ),
+      ),
+      child: SafeArea(
+        top: false,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              _buildNavItem(
+                index: 0,
+                svgPath: 'assets/icons/nav_home_icon.svg',
+                fallbackIcon: Icons.home,
+                isSelected: false,
+                onTap: () => context.go('/home'),
+              ),
+              _buildNavItem(
+                index: 1,
+                svgPath: 'assets/icons/nav_list_icon.svg',
+                fallbackIcon: Icons.list,
+                isSelected: true,
+                onTap: () {},
+              ),
+              _buildNavItem(
+                index: 2,
+                svgPath: 'assets/icons/nav_messages_icon.svg',
+                fallbackIcon: Icons.chat_bubble,
+                isSelected: false,
+                onTap: () {},
+              ),
+              _buildNavItem(
+                index: 3,
+                svgPath: 'assets/icons/nav_profile_icon.svg',
+                fallbackIcon: Icons.person_outline,
+                isSelected: false,
+                onTap: () {},
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildNavItem({
+    required int index,
+    required String svgPath,
+    required IconData fallbackIcon,
+    required bool isSelected,
+    required VoidCallback onTap,
+  }) {
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        child: SvgPicture.asset(
+          svgPath,
+          width: 24,
+          height: 24,
+          colorFilter: isSelected
+              ? const ColorFilter.mode(AppColors.primaryDark, BlendMode.srcIn)
+              : const ColorFilter.mode(AppColors.accentOrange, BlendMode.srcIn),
+          placeholderBuilder: (_) => Icon(
+            fallbackIcon,
+            size: 24,
+            color: isSelected ? AppColors.primaryDark : AppColors.accentOrange,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// --- Agent Card Widget matching Figma design ---
+
+class _AgentCard extends StatefulWidget {
+  final AgentProfile agent;
+
+  const _AgentCard({required this.agent});
+
+  @override
+  State<_AgentCard> createState() => _AgentCardState();
+}
+
+class _AgentCardState extends State<_AgentCard> {
+  bool _bioExpanded = false;
+
+  String? _resolveImageUrl(String? imageUrl) {
+    if (imageUrl == null || imageUrl.isEmpty) return null;
+    if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
+      return imageUrl;
+    }
+    final baseUrl = AppConfig.apiBaseUrl;
+    if (baseUrl.isNotEmpty) return '$baseUrl$imageUrl';
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final agent = widget.agent;
+    final specializations = agent.specializations;
+    final bio = agent.bio ?? '';
+    final matchPercent = agent.averageRating != null
+        ? '${(agent.averageRating! * 20).round()}%'
+        : null;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(20),
+        border: Border.all(color: AppColors.primaryDark.withValues(alpha: 0.1)),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Cover image with match badge
+          Stack(
+            children: [
+              _buildCoverImage(agent),
+              if (matchPercent != null)
+                Positioned(
+                  top: 0,
+                  right: 0,
+                  child: Container(
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
+                    decoration: const BoxDecoration(
+                      color: Color(0xFF638559),
+                      borderRadius: BorderRadius.only(
+                        bottomLeft: Radius.circular(20),
+                        topRight: Radius.circular(20),
+                      ),
+                    ),
+                    child: Text(
+                      matchPercent,
+                      style: const TextStyle(
+                        fontFamily: 'SourceSerif4',
+                        fontSize: 14,
+                        fontWeight: FontWeight.w400,
+                        color: Color(0xFFF0F5FC),
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+
+          // Card content
+          Padding(
+            padding: const EdgeInsets.fromLTRB(34, 16, 20, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Name row with verified badge
+                Row(
+                  children: [
+                    Flexible(
+                      child: Text.rich(
+                        TextSpan(
+                          children: [
+                            TextSpan(
+                              text: agent.firstName,
+                              style: const TextStyle(
+                                fontFamily: 'Fractul',
+                                fontSize: 15,
+                                fontWeight: FontWeight.w700,
+                                color: AppColors.primaryDark,
+                              ),
+                            ),
+                            TextSpan(
+                              text: ' ${agent.lastName}',
+                              style: const TextStyle(
+                                fontFamily: 'Fractul',
+                                fontSize: 15,
+                                fontWeight: FontWeight.w400,
+                                color: AppColors.primaryDark,
+                              ),
+                            ),
+                          ],
+                        ),
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                    if (agent.isVerified) ...[
+                      const SizedBox(width: 6),
+                      SvgPicture.asset(
+                        'assets/icons/verified_badge_icon.svg',
+                        width: 16,
+                        height: 16,
+                        placeholderBuilder: (_) => const Icon(
+                          Icons.verified,
+                          color: Color(0xFF5D8B5A),
+                          size: 16,
+                        ),
+                      ),
+                      const SizedBox(width: 4),
+                      const Text(
+                        '(Verified Expert)',
+                        style: TextStyle(
+                          fontFamily: 'SourceSerif4',
+                          fontSize: 14,
+                          fontWeight: FontWeight.w500,
+                          color: Color(0xFF5D8B5A),
+                        ),
+                      ),
+                    ],
+                  ],
+                ),
+                const SizedBox(height: 4),
+
+                // Headline / title
+                Text(
+                  agent.headline ?? agent.agentType?.name ?? 'Licensed Real Estate Agent',
+                  style: const TextStyle(
+                    fontFamily: 'Fractul',
+                    fontSize: 15,
+                    fontWeight: FontWeight.w400,
+                    color: AppColors.primaryDark,
+                  ),
+                ),
+                const SizedBox(height: 10),
+
+                // Location + Member Since row
+                Row(
+                  children: [
+                    if (agent.location.isNotEmpty) ...[
+                      SvgPicture.asset(
+                        'assets/icons/location_pin_icon.svg',
+                        width: 14,
+                        height: 14,
+                        placeholderBuilder: (_) => const Icon(
+                          Icons.location_on,
+                          color: AppColors.accentOrange,
+                          size: 14,
+                        ),
+                      ),
+                      const SizedBox(width: 4),
+                      Text(
+                        agent.location,
+                        style: const TextStyle(
+                          fontFamily: 'SourceSerif4',
+                          fontSize: 14,
+                          fontWeight: FontWeight.w500,
+                          color: AppColors.primaryDark,
+                        ),
+                      ),
+                      const SizedBox(width: 16),
+                    ],
+                    SvgPicture.asset(
+                      'assets/icons/calendar_icon.svg',
+                      width: 14,
+                      height: 14,
+                      placeholderBuilder: (_) => const Icon(
+                        Icons.calendar_today,
+                        color: AppColors.accentOrange,
+                        size: 14,
+                      ),
+                    ),
+                    const SizedBox(width: 4),
+                    const Text(
+                      'Member Since 2024',
+                      style: TextStyle(
+                        fontFamily: 'SourceSerif4',
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: AppColors.primaryDark,
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 12),
+
+                // Specialization tags
+                if (specializations.isNotEmpty) ...[
+                  Wrap(
+                    spacing: 8,
+                    runSpacing: 8,
+                    children: specializations
+                        .take(8)
+                        .map((tag) => _buildTag(tag))
+                        .toList(),
+                  ),
+                  const SizedBox(height: 14),
+                ],
+
+                // Bio
+                if (bio.isNotEmpty) ...[
+                  Text.rich(
+                    TextSpan(
+                      children: [
+                        TextSpan(
+                          text: _bioExpanded || bio.length <= 150
+                              ? bio
+                              : '${bio.substring(0, 150)}... ',
+                          style: const TextStyle(
+                            fontFamily: 'SourceSerif4',
+                            fontSize: 10,
+                            fontWeight: FontWeight.w400,
+                            color: AppColors.primaryDark,
+                          ),
+                        ),
+                        if (bio.length > 150)
+                          WidgetSpan(
+                            child: GestureDetector(
+                              onTap: () =>
+                                  setState(() => _bioExpanded = !_bioExpanded),
+                              child: Text(
+                                _bioExpanded ? 'Show Less.' : 'Show More.',
+                                style: const TextStyle(
+                                  fontFamily: 'Fractul',
+                                  fontSize: 10,
+                                  fontWeight: FontWeight.w600,
+                                  color: AppColors.primaryDark,
+                                  decoration: TextDecoration.underline,
+                                ),
+                              ),
+                            ),
+                          ),
+                      ],
+                    ),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCoverImage(AgentProfile agent) {
+    final resolvedUrl = _resolveImageUrl(agent.avatarUrl);
+
+    if (resolvedUrl != null) {
+      return CachedNetworkImage(
+        imageUrl: resolvedUrl,
+        width: double.infinity,
+        height: 265,
+        fit: BoxFit.cover,
+        placeholder: (_, __) => _buildPlaceholder(),
+        errorWidget: (_, __, ___) => _buildPlaceholder(),
+      );
+    }
+    return _buildPlaceholder();
+  }
+
+  Widget _buildPlaceholder() {
+    return Container(
+      width: double.infinity,
+      height: 265,
+      color: AppColors.gradientStart,
+      child:
+          const Icon(Icons.person, size: 80, color: AppColors.primaryDark),
+    );
+  }
+
+  Widget _buildTag(String label) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(15),
+        border: Border.all(color: AppColors.primaryDark, width: 0.7),
+      ),
+      child: Text(
+        label,
+        style: const TextStyle(
+          fontFamily: 'SourceSerif4',
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+          color: AppColors.primaryDark,
+        ),
+      ),
+    );
+  }
+}

lib/features/home/presentation/screens/home_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:go_router/go_router.dart';
 import 'package:real_estate_mobile/core/constants/app_colors.dart';
 import 'package:real_estate_mobile/features/home/presentation/widgets/featured_professionals_section.dart';
 import 'package:real_estate_mobile/features/home/presentation/widgets/features_section.dart';
@@ -143,6 +144,10 @@ class _HomeScreenState extends State<HomeScreen> {
 
     return GestureDetector(
       onTap: () {
+        if (index == 1) {
+          context.push('/agents/search');
+          return;
+        }
         setState(() => _selectedIndex = index);
       },
       behavior: HitTestBehavior.opaque,

lib/features/home/presentation/widgets/featured_professionals_section.dart

@@ -4,8 +4,8 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:real_estate_mobile/config/app_config.dart';
 import 'package:real_estate_mobile/core/constants/app_colors.dart';
-import 'package:real_estate_mobile/features/home/data/models/landing_page_content.dart';
+import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart';
-import 'package:real_estate_mobile/features/home/presentation/providers/home_provider.dart';
+import 'package:real_estate_mobile/features/agents/presentation/providers/agents_provider.dart';
 
 /// Local fallback images for professionals.
 const _fallbackImages = [
@@ -14,39 +14,9 @@ const _fallbackImages = [
   'assets/images/professional-3.jpg',
 ];
 
-/// Default agent data — matches web's hardcoded agentsData fallback.
-/// Used when CMS returns no data from admin.
-const _defaultAgents = [
-  ProfessionalItem(
-    name: 'Arjun Mehta',
-    subtitle: 'Residential Property Expert',
-    location: 'San Francisco, CA',
-    experience: '10+ years in the real estate industry.',
-    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
-  ),
-  ProfessionalItem(
-    name: 'Anderson',
-    subtitle: 'Rental & Investment Consultant',
-    location: 'New York',
-    experience: '7+ years in the real estate industry.',
-    expertise: ['Residential', 'Rental', 'Commercial'],
-  ),
-  ProfessionalItem(
-    name: 'Sarah Johnson',
-    subtitle: 'Luxury Real Estate Specialist',
-    location: 'Los Angeles, CA',
-    experience: '12+ years in the real estate industry.',
-    expertise: ['Luxury', 'Residential', 'Investment'],
-  ),
-];
-
 /// Featured professionals carousel shown above the agents/lenders tab section.
-/// Matches Figma node 49:6248 — compact card with image, name, subtitle,
+/// Now fetches REAL agent data from GET /agents API (like web does)
-/// verified+rating row, location, and experience.
+/// instead of using CMS/hardcoded fallback data.
-///
-/// Data flow (same as web pattern):
-///   CMS admin → GET /cms/page/landing → topProfessionals.agents
-///   Fallback → _defaultAgents (hardcoded, like web's agentsData)
 class FeaturedProfessionalsSection extends ConsumerStatefulWidget {
   const FeaturedProfessionalsSection({super.key});
 
@@ -58,28 +28,50 @@ class FeaturedProfessionalsSection extends ConsumerStatefulWidget {
 class _FeaturedProfessionalsSectionState
     extends ConsumerState<FeaturedProfessionalsSection> {
   int _currentPage = 0;
-  late PageController _pageController;
+  late ScrollController _scrollController;
 
   @override
   void initState() {
     super.initState();
-    _pageController = PageController();
+    _scrollController = ScrollController();
+    _scrollController.addListener(_onScroll);
   }
 
   @override
   void dispose() {
-    _pageController.dispose();
+    _scrollController.removeListener(_onScroll);
+    _scrollController.dispose();
     super.dispose();
   }
 
+  void _onScroll() {
+    if (!_scrollController.hasClients) return;
+    final cardWidth = MediaQuery.of(context).size.width - 80;
+    if (cardWidth <= 0) return;
+    final page = (_scrollController.offset / cardWidth).round();
+    if (page != _currentPage) {
+      setState(() => _currentPage = page);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    final homeState = ref.watch(homeProvider);
+    // Real agent data from GET /agents API
-    final topProfessionals = homeState.content?.topProfessionals;
+    final topProState = ref.watch(topProfessionalsProvider);
+    final professionals = topProState.agents;
 
-    // Use CMS agents if available, otherwise fallback to defaults (same as web)
+    if (topProState.isLoading) {
-    final cmsAgents = topProfessionals?.agents ?? [];
+      return const Padding(
-    final professionals = cmsAgents.isNotEmpty ? cmsAgents : _defaultAgents;
+        padding: EdgeInsets.symmetric(vertical: 40),
+        child: Center(
+          child: CircularProgressIndicator(color: AppColors.accentOrange),
+        ),
+      );
+    }
+
+    if (professionals.isEmpty) {
+      return const SizedBox.shrink();
+    }
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 40),
@@ -88,14 +80,23 @@ class _FeaturedProfessionalsSectionState
           // Card carousel
           SizedBox(
             height: 370,
-            child: PageView.builder(
+            child: ListView.builder(
-              controller: _pageController,
+              controller: _scrollController,
+              scrollDirection: Axis.horizontal,
+              physics: const BouncingScrollPhysics(),
               itemCount: professionals.length,
-              onPageChanged: (index) {
-                setState(() => _currentPage = index);
-              },
               itemBuilder: (context, index) {
-                return _buildFeaturedCard(professionals[index], index);
+                final cardWidth = MediaQuery.of(context).size.width - 80;
+                return SizedBox(
+                  width: cardWidth,
+                  child: Padding(
+                    padding: EdgeInsets.only(
+                      left: index == 0 ? 0 : 8,
+                      right: index == professionals.length - 1 ? 0 : 8,
+                    ),
+                    child: _buildFeaturedCard(professionals[index], index),
+                  ),
+                );
               },
             ),
           ),
@@ -108,7 +109,12 @@ class _FeaturedProfessionalsSectionState
     );
   }
 
-  Widget _buildFeaturedCard(ProfessionalItem professional, int index) {
+  Widget _buildFeaturedCard(AgentProfile agent, int index) {
+    final rating = agent.averageRating ?? 0.0;
+    final ratingText = rating > 0 ? '${rating.toStringAsFixed(1)} Rating' : '';
+    final subtitle = agent.agentType?.name ?? agent.headline ?? '';
+    final experience = agent.experienceText;
+
     return Container(
       decoration: BoxDecoration(
         color: Colors.white,
@@ -117,24 +123,24 @@ class _FeaturedProfessionalsSectionState
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
         children: [
           // Image
           ClipRRect(
             borderRadius:
                 const BorderRadius.vertical(top: Radius.circular(15)),
-            child: _buildCardImage(professional, index),
+            child: _buildCardImage(agent, index),
           ),
 
           // Content
-          Expanded(
+          Padding(
-            child: Padding(
             padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                  // Name (Fractul Bold 16px)
+                // Name
                 Text(
-                    professional.name,
+                  agent.fullName,
                   style: const TextStyle(
                     fontFamily: 'Fractul',
                     fontSize: 16,
@@ -145,10 +151,10 @@ class _FeaturedProfessionalsSectionState
                 ),
                 const SizedBox(height: 2),
 
-                  // Subtitle (e.g. "Rental & Investment Consultant")
+                // Subtitle/headline
-                  if (professional.subtitle.isNotEmpty)
+                if (subtitle.isNotEmpty)
                   Text(
-                      professional.subtitle,
+                    subtitle,
                     style: const TextStyle(
                       fontFamily: 'Fractul',
                       fontSize: 14,
@@ -163,41 +169,44 @@ class _FeaturedProfessionalsSectionState
                 // Verified + Rating row
                 Row(
                   children: [
+                    if (agent.isVerified) ...[
                       SvgPicture.asset(
                         'assets/icons/verified_badge_icon.svg',
-                        width: 19,
+                        width: 16,
-                        height: 19,
+                        height: 16,
                         placeholderBuilder: (_) => const Icon(
                           Icons.verified,
-                          color: Color(0xFF1DA1F2),
+                          color: Color(0xFF638559),
-                          size: 19,
+                          size: 16,
                         ),
                       ),
                       const SizedBox(width: 6),
                       const Text(
-                        'Verified Agent',
+                        '\u201CVerified local agent\u201D',
                         style: TextStyle(
                           fontFamily: 'SourceSerif4',
                           fontSize: 14,
                           fontWeight: FontWeight.w500,
-                          color: AppColors.primaryDark,
+                          color: Color(0xFF638559),
                         ),
                       ),
                       const SizedBox(width: 16),
+                    ],
+                    if (ratingText.isNotEmpty) ...[
                       SvgPicture.asset(
                         'assets/icons/star_rating_icon.svg',
-                        width: 19,
+                        width: 16,
-                        height: 19,
+                        height: 16,
                         placeholderBuilder: (_) => const Icon(
                           Icons.star,
                           color: Color(0xFFFFDE21),
-                          size: 19,
+                          size: 16,
                         ),
                       ),
                       const SizedBox(width: 4),
-                      const Text(
+                      Text(
-                        '4.9 Rating',
+                        ratingText,
-                        style: TextStyle(
+                        style: const TextStyle(
                           fontFamily: 'SourceSerif4',
                           fontSize: 14,
                           fontWeight: FontWeight.w400,
@@ -205,11 +214,12 @@ class _FeaturedProfessionalsSectionState
                         ),
                       ),
                     ],
+                  ],
                 ),
                 const SizedBox(height: 6),
 
-                  // Location row with filled icon
+                // Location row
-                  if (professional.location.isNotEmpty)
+                if (agent.location.isNotEmpty)
                   Row(
                     children: [
                       SvgPicture.asset(
@@ -225,7 +235,7 @@ class _FeaturedProfessionalsSectionState
                       const SizedBox(width: 6),
                       Expanded(
                         child: Text(
-                            professional.location,
+                          agent.location,
                           style: const TextStyle(
                             fontFamily: 'SourceSerif4',
                             fontSize: 14,
@@ -237,10 +247,10 @@ class _FeaturedProfessionalsSectionState
                       ),
                     ],
                   ),
-                  const Spacer(),
+                const SizedBox(height: 8),
 
                 // Experience
-                  if (professional.experience.isNotEmpty)
+                if (experience.isNotEmpty)
                   RichText(
                     text: TextSpan(
                       children: [
@@ -254,7 +264,7 @@ class _FeaturedProfessionalsSectionState
                           ),
                         ),
                         TextSpan(
-                            text: professional.experience,
+                          text: experience,
                           style: const TextStyle(
                             fontFamily: 'SourceSerif4',
                             fontSize: 14,
@@ -270,16 +280,15 @@ class _FeaturedProfessionalsSectionState
               ],
             ),
           ),
-          ),
         ],
       ),
     );
   }
 
-  // ── Image helpers ──
+  // -- Image helpers --
 
-  Widget _buildCardImage(ProfessionalItem professional, int index) {
+  Widget _buildCardImage(AgentProfile agent, int index) {
-    final resolvedUrl = _resolveImageUrl(professional.imageUrl);
+    final resolvedUrl = _resolveImageUrl(agent.avatarUrl);
     if (resolvedUrl != null) {
       return CachedNetworkImage(
         imageUrl: resolvedUrl,
@@ -293,8 +302,8 @@ class _FeaturedProfessionalsSectionState
     return _buildImagePlaceholder(index);
   }
 
-  String? _resolveImageUrl(String imageUrl) {
+  String? _resolveImageUrl(String? imageUrl) {
-    if (imageUrl.isEmpty) return null;
+    if (imageUrl == null || imageUrl.isEmpty) return null;
     if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
       return imageUrl;
     }
@@ -319,7 +328,7 @@ class _FeaturedProfessionalsSectionState
     );
   }
 
-  // ── Dot indicators ──
+  // -- Dot indicators --
 
   Widget _buildDotIndicators(int count) {
     return Row(

lib/features/home/presentation/widgets/hero_section.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:real_estate_mobile/core/constants/app_colors.dart';
 import 'package:real_estate_mobile/features/home/data/models/landing_page_content.dart';
 import 'package:real_estate_mobile/features/home/presentation/providers/home_provider.dart';
@@ -14,15 +15,36 @@ const _defaultHero = HeroContent(
       'Connect with trusted local agents to explore homes, compare options, and make smarter decisions.',
 );
 
-class HeroSection extends ConsumerWidget {
+class HeroSection extends ConsumerStatefulWidget {
   const HeroSection({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<HeroSection> createState() => _HeroSectionState();
+}
+
+class _HeroSectionState extends ConsumerState<HeroSection> {
+  final _searchController = TextEditingController();
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  void _navigateToSearch() {
+    final query = _searchController.text.trim();
+    if (query.isNotEmpty) {
+      context.push('/agents/search?q=${Uri.encodeComponent(query)}');
+    } else {
+      context.push('/agents/search');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final homeState = ref.watch(homeProvider);
     final hero = homeState.content?.hero ?? _defaultHero;
 
-    // Use CMS headline if available, otherwise fallback
     final headline = hero.headline.isNotEmpty
         ? hero.headline
         : _defaultHero.headline;
@@ -32,7 +54,6 @@ class HeroSection extends ConsumerWidget {
 
     return Stack(
       children: [
-        // Background image
         ClipRRect(
           borderRadius: BorderRadius.circular(0),
           child: Image.asset(
@@ -42,7 +63,6 @@ class HeroSection extends ConsumerWidget {
             fit: BoxFit.cover,
           ),
         ),
-        // Content overlay
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 32),
           child: Column(
@@ -60,7 +80,6 @@ class HeroSection extends ConsumerWidget {
                 ),
               ),
               const SizedBox(height: 30),
-              // Search Agents Card
               _buildSearchCard(ctaButtonText),
             ],
           ),
@@ -93,17 +112,44 @@ class HeroSection extends ConsumerWidget {
           const SizedBox(height: 16),
           _buildSearchField('Types'),
           const SizedBox(height: 12),
-          _buildSearchField('Name or Keyword'),
+          // Name or Keyword — actual text input
+          Container(
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: TextField(
+              controller: _searchController,
+              style: const TextStyle(
+                fontFamily: 'SourceSerif4',
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+                color: AppColors.primaryDark,
+              ),
+              decoration: const InputDecoration(
+                hintText: 'Name or Keyword',
+                hintStyle: TextStyle(
+                  fontFamily: 'SourceSerif4',
+                  fontSize: 14,
+                  fontWeight: FontWeight.w400,
+                  color: AppColors.primaryDark,
+                ),
+                border: InputBorder.none,
+                contentPadding:
+                    EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+              ),
+              onSubmitted: (_) => _navigateToSearch(),
+            ),
+          ),
           const SizedBox(height: 12),
           _buildSearchField('Location'),
           const SizedBox(height: 12),
           _buildSearchField('Categories'),
           const SizedBox(height: 12),
-          // CTA button
           SizedBox(
             width: double.infinity,
             child: ElevatedButton(
-              onPressed: () {},
+              onPressed: _navigateToSearch,
               style: ElevatedButton.styleFrom(
                 backgroundColor: AppColors.primaryDark,
                 foregroundColor: Colors.white,
@@ -128,7 +174,14 @@ class HeroSection extends ConsumerWidget {
   }
 
   Widget _buildSearchField(String hint) {
-    return Container(
+    return GestureDetector(
+      onTap: () {
+        // Tapping Types/Location/Categories navigates to search screen
+        if (hint == 'Types' || hint == 'Categories' || hint == 'Location') {
+          context.push('/agents/search');
+        }
+      },
+      child: Container(
         padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
         decoration: BoxDecoration(
           color: Colors.white,
@@ -155,6 +208,7 @@ class HeroSection extends ConsumerWidget {
               ),
           ],
         ),
+      ),
     );
   }
 }

lib/features/home/presentation/widgets/top_professionals_section.dart

@@ -2,75 +2,28 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:go_router/go_router.dart';
 import 'package:real_estate_mobile/config/app_config.dart';
 import 'package:real_estate_mobile/core/constants/app_colors.dart';
+import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart';
+import 'package:real_estate_mobile/features/agents/presentation/providers/agents_provider.dart';
 import 'package:real_estate_mobile/features/home/data/models/landing_page_content.dart';
 import 'package:real_estate_mobile/features/home/presentation/providers/home_provider.dart';
 
-/// Local fallback images for professionals when CMS returns no image.
+/// Local fallback images for professionals when API returns no avatar.
 const _fallbackImages = [
   'assets/images/professional-1.jpg',
   'assets/images/professional-2.jpg',
   'assets/images/professional-3.jpg',
 ];
 
-/// Default agents data — matches web's hardcoded agentsData fallback.
+/// Default CMS content for title/CTA text only.
-const _defaultAgents = [
+const _defaultCmsContent = TopProfessionalsContent(
-  ProfessionalItem(
-    name: 'Arjun Mehta',
-    subtitle: 'Residential Property Expert',
-    location: 'San Francisco, CA',
-    experience: '10+ years in the real estate industry.',
-    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
-  ),
-  ProfessionalItem(
-    name: 'Anderson',
-    subtitle: 'Rental & Investment Consultant',
-    location: 'New York',
-    experience: '7+ years in the real estate industry.',
-    expertise: ['Residential', 'Rental', 'Commercial'],
-  ),
-  ProfessionalItem(
-    name: 'Sarah Johnson',
-    subtitle: 'Luxury Real Estate Specialist',
-    location: 'Los Angeles, CA',
-    experience: '12+ years in the real estate industry.',
-    expertise: ['Luxury', 'Residential', 'Investment'],
-  ),
-];
-
-/// Default lenders data — matches web's hardcoded lendersData fallback.
-const _defaultLenders = [
-  ProfessionalItem(
-    name: 'Sarah Johnson',
-    subtitle: 'Mortgage Specialist',
-    location: 'Los Angeles, CA',
-    experience: '10+ years in mortgage lending.',
-    expertise: ['FHA Loans', 'Conventional', 'VA Loans', 'Refinancing', 'Jumbo'],
-  ),
-  ProfessionalItem(
-    name: 'Michael Chen',
-    subtitle: 'Senior Loan Officer',
-    location: 'Seattle, WA',
-    experience: '7+ years in lending.',
-    expertise: ['Jumbo Loans', 'Refinancing', 'Investment', 'First-time', 'USDA'],
-  ),
-  ProfessionalItem(
-    name: 'Emily Davis',
-    subtitle: 'Home Loan Advisor',
-    location: 'Austin, TX',
-    experience: '5+ years in mortgage industry.',
-    expertise: ['First-time Buyers', 'FHA', 'USDA Loans', 'VA Loans', 'Conventional'],
-  ),
-];
-
-/// Default content — matches web's defaultContent pattern.
-const _defaultContent = TopProfessionalsContent(
   title: '"Meet top real estate professionals"',
   ctaText: 'Discover 5,000+ Top Real Estate Agents in Our Network.',
   ctaButtonText: 'See All Agents',
-  agents: _defaultAgents,
+  agents: [],
-  lenders: _defaultLenders,
+  lenders: [],
 );
 
 class TopProfessionalsSection extends ConsumerStatefulWidget {
@@ -83,37 +36,51 @@ class TopProfessionalsSection extends ConsumerStatefulWidget {
 
 class _TopProfessionalsSectionState
     extends ConsumerState<TopProfessionalsSection> {
-  String _activeTab = 'agents';
   int _currentPage = 0;
-  late PageController _pageController;
+  late ScrollController _scrollController;
 
   @override
   void initState() {
     super.initState();
-    _pageController = PageController();
+    _scrollController = ScrollController();
+    _scrollController.addListener(_onScroll);
   }
 
   @override
   void dispose() {
-    _pageController.dispose();
+    _scrollController.removeListener(_onScroll);
+    _scrollController.dispose();
     super.dispose();
   }
 
+  void _onScroll() {
+    if (!_scrollController.hasClients) return;
+    final cardWidth = MediaQuery.of(context).size.width - 48;
+    if (cardWidth <= 0) return;
+    final page = (_scrollController.offset / cardWidth).round();
+    if (page != _currentPage) {
+      setState(() => _currentPage = page);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
+    // CMS data for title/CTA text only
     final homeState = ref.watch(homeProvider);
+    final cmsContent = homeState.content?.topProfessionals ?? _defaultCmsContent;
 
-    // Use CMS data if available, otherwise fallback to defaults (same as web)
+    // Real agent data from GET /agents API (like web does)
-    final data = homeState.content?.topProfessionals ?? _defaultContent;
+    final topProState = ref.watch(topProfessionalsProvider);
-
+    final activeList = topProState.activeList;
-    final activeList = _activeTab == 'agents' ? data.agents : data.lenders;
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 24),
       child: Column(
         children: [
           Text(
-            data.title,
+            cmsContent.title.isNotEmpty
+                ? cmsContent.title
+                : _defaultCmsContent.title,
             textAlign: TextAlign.center,
             style: const TextStyle(
               fontFamily: 'Fractul',
@@ -125,33 +92,42 @@ class _TopProfessionalsSectionState
           const SizedBox(height: 24),
 
           // Agents / Lenders Tab
-          _buildCategoryTab(),
+          _buildCategoryTab(topProState.activeTab),
           const SizedBox(height: 24),
 
           // Content
-          if (homeState.isLoading)
+          if (topProState.isLoading)
             const Padding(
               padding: EdgeInsets.symmetric(vertical: 40),
               child: CircularProgressIndicator(
                 color: AppColors.accentOrange,
               ),
             )
-          else if (homeState.error != null)
+          else if (topProState.error != null)
-            _buildErrorState(homeState.error!)
+            _buildErrorState(topProState.error!)
           else if (activeList.isEmpty)
-            _buildEmptyState()
+            _buildEmptyState(topProState.activeTab)
           else ...[
             // Professional Cards - horizontal scroll
             SizedBox(
-              height: 500,
+              height: 480,
-              child: PageView.builder(
+              child: ListView.builder(
-                controller: _pageController,
+                controller: _scrollController,
+                scrollDirection: Axis.horizontal,
+                physics: const BouncingScrollPhysics(),
                 itemCount: activeList.length,
-                onPageChanged: (index) {
-                  setState(() => _currentPage = index);
-                },
                 itemBuilder: (context, index) {
-                  return _buildProfessionalCard(activeList[index], index: index);
+                  final cardWidth = MediaQuery.of(context).size.width - 48;
+                  return SizedBox(
+                    width: cardWidth,
+                    child: Padding(
+                      padding: EdgeInsets.only(
+                        left: index == 0 ? 0 : 8,
+                        right: index == activeList.length - 1 ? 0 : 8,
+                      ),
+                      child: _buildProfessionalCard(activeList[index], index: index),
+                    ),
+                  );
                 },
               ),
             ),
@@ -163,13 +139,13 @@ class _TopProfessionalsSectionState
           const SizedBox(height: 32),
 
           // See All Agents CTA
-          _buildSeeAllAgentsCta(data),
+          _buildSeeAllAgentsCta(cmsContent),
         ],
       ),
     );
   }
 
-  Widget _buildCategoryTab() {
+  Widget _buildCategoryTab(String activeTab) {
     return Container(
       height: 45,
       decoration: BoxDecoration(
@@ -182,18 +158,16 @@ class _TopProfessionalsSectionState
           Expanded(
             child: GestureDetector(
               onTap: () {
-                setState(() {
+                ref.read(topProfessionalsProvider.notifier).setActiveTab('agents');
-                  _activeTab = 'agents';
+                setState(() => _currentPage = 0);
-                  _currentPage = 0;
+                if (_scrollController.hasClients) {
-                });
+                  _scrollController.jumpTo(0);
-                if (_pageController.hasClients) {
-                  _pageController.jumpToPage(0);
                 }
               },
               child: Container(
                 padding: const EdgeInsets.symmetric(vertical: 12),
                 decoration: BoxDecoration(
-                  color: _activeTab == 'agents'
+                  color: activeTab == 'agents'
                       ? AppColors.accentOrange
                       : Colors.transparent,
                   borderRadius: BorderRadius.circular(15),
@@ -206,14 +180,14 @@ class _TopProfessionalsSectionState
                       width: 24,
                       height: 24,
                       colorFilter: ColorFilter.mode(
-                        _activeTab == 'agents'
+                        activeTab == 'agents'
                             ? Colors.white
                             : AppColors.primaryDark,
                         BlendMode.srcIn,
                       ),
                       placeholderBuilder: (_) => Icon(
                         Icons.people,
-                        color: _activeTab == 'agents'
+                        color: activeTab == 'agents'
                             ? Colors.white
                             : AppColors.primaryDark,
                         size: 24,
@@ -226,7 +200,7 @@ class _TopProfessionalsSectionState
                         fontFamily: 'SourceSerif4',
                         fontSize: 17,
                         fontWeight: FontWeight.w600,
-                        color: _activeTab == 'agents'
+                        color: activeTab == 'agents'
                             ? Colors.white
                             : AppColors.primaryDark,
                       ),
@@ -240,18 +214,16 @@ class _TopProfessionalsSectionState
           Expanded(
             child: GestureDetector(
               onTap: () {
-                setState(() {
+                ref.read(topProfessionalsProvider.notifier).setActiveTab('lenders');
-                  _activeTab = 'lenders';
+                setState(() => _currentPage = 0);
-                  _currentPage = 0;
+                if (_scrollController.hasClients) {
-                });
+                  _scrollController.jumpTo(0);
-                if (_pageController.hasClients) {
-                  _pageController.jumpToPage(0);
                 }
               },
               child: Container(
                 padding: const EdgeInsets.symmetric(vertical: 12),
                 decoration: BoxDecoration(
-                  color: _activeTab == 'lenders'
+                  color: activeTab == 'lenders'
                       ? AppColors.accentOrange
                       : Colors.transparent,
                   borderRadius: BorderRadius.circular(15),
@@ -264,14 +236,14 @@ class _TopProfessionalsSectionState
                       width: 24,
                       height: 24,
                       colorFilter: ColorFilter.mode(
-                        _activeTab == 'lenders'
+                        activeTab == 'lenders'
                             ? Colors.white
                             : AppColors.primaryDark,
                         BlendMode.srcIn,
                       ),
                       placeholderBuilder: (_) => Icon(
                         Icons.calendar_today,
-                        color: _activeTab == 'lenders'
+                        color: activeTab == 'lenders'
                             ? Colors.white
                             : AppColors.primaryDark,
                         size: 24,
@@ -284,7 +256,7 @@ class _TopProfessionalsSectionState
                         fontFamily: 'SourceSerif4',
                         fontSize: 17,
                         fontWeight: FontWeight.w600,
-                        color: _activeTab == 'lenders'
+                        color: activeTab == 'lenders'
                             ? Colors.white
                             : AppColors.primaryDark,
                       ),
@@ -299,9 +271,9 @@ class _TopProfessionalsSectionState
     );
   }
 
-  /// Resolves an image URL: full URL → use as-is, relative → prepend base URL.
+  /// Resolves an image URL: full URL as-is, relative prepend base URL.
-  String? _resolveImageUrl(String imageUrl) {
+  String? _resolveImageUrl(String? imageUrl) {
-    if (imageUrl.isEmpty) return null;
+    if (imageUrl == null || imageUrl.isEmpty) return null;
     if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
       return imageUrl;
     }
@@ -312,9 +284,9 @@ class _TopProfessionalsSectionState
     return null;
   }
 
-  /// Builds the card image: CachedNetworkImage for valid URLs, local asset fallback otherwise.
+  /// Builds the card image from AgentProfile avatar.
-  Widget _buildCardImage(ProfessionalItem professional, int index) {
+  Widget _buildCardImage(AgentProfile agent, int index) {
-    final resolvedUrl = _resolveImageUrl(professional.imageUrl);
+    final resolvedUrl = _resolveImageUrl(agent.avatarUrl);
 
     if (resolvedUrl != null) {
       return CachedNetworkImage(
@@ -329,7 +301,6 @@ class _TopProfessionalsSectionState
     return _buildImagePlaceholder(index);
   }
 
-  /// Shows a local fallback professional image (cycles through 3 images).
   Widget _buildImagePlaceholder(int index) {
     final assetPath = _fallbackImages[index % _fallbackImages.length];
     return Image.asset(
@@ -341,8 +312,13 @@ class _TopProfessionalsSectionState
     );
   }
 
-  // ── Unified Professional Card (matches Figma design for both tabs) ──
+  // -- Professional Card using real AgentProfile data --
-  Widget _buildProfessionalCard(ProfessionalItem professional, {int index = 0}) {
+  Widget _buildProfessionalCard(AgentProfile agent, {int index = 0}) {
+    final rating = agent.averageRating ?? 0.0;
+    final expertise = agent.specializations;
+    final experience = agent.experienceText;
+    final subtitle = agent.agentType?.name ?? agent.headline ?? '';
+
     return Container(
       decoration: BoxDecoration(
         color: Colors.white,
@@ -351,30 +327,24 @@ class _TopProfessionalsSectionState
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
         children: [
           // Image
           ClipRRect(
             borderRadius:
                 const BorderRadius.vertical(top: Radius.circular(15)),
-            child: _buildCardImage(professional, index),
+            child: _buildCardImage(agent, index),
           ),
 
           // Content
-          Expanded(
+          Padding(
-            child: Padding(
             padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                  // Row 1: Name + verified badge + star Rating
+                // Row 1: Name only (matches Figma 49:6310)
-                  Row(
+                Text(
-                    children: [
+                  agent.fullName,
-                      Expanded(
-                        child: Row(
-                          children: [
-                            Flexible(
-                              child: Text(
-                                professional.name,
                   style: const TextStyle(
                     fontFamily: 'Fractul',
                     fontSize: 14,
@@ -383,49 +353,12 @@ class _TopProfessionalsSectionState
                   ),
                   overflow: TextOverflow.ellipsis,
                 ),
-                            ),
-                            const SizedBox(width: 6),
-                            SvgPicture.asset(
-                              'assets/icons/verified_badge_icon.svg',
-                              width: 16,
-                              height: 16,
-                              placeholderBuilder: (_) => const Icon(
-                                Icons.verified,
-                                color: Color(0xFF1DA1F2),
-                                size: 16,
-                              ),
-                            ),
-                          ],
-                        ),
-                      ),
-                      SvgPicture.asset(
-                        'assets/icons/star_rating_icon.svg',
-                        width: 16,
-                        height: 16,
-                        placeholderBuilder: (_) => const Icon(
-                          Icons.star,
-                          color: Color(0xFFFFDE21),
-                          size: 16,
-                        ),
-                      ),
-                      const SizedBox(width: 4),
-                      const Text(
-                        'Rating',
-                        style: TextStyle(
-                          fontFamily: 'SourceSerif4',
-                          fontSize: 14,
-                          fontWeight: FontWeight.w400,
-                          color: AppColors.primaryDark,
-                        ),
-                      ),
-                    ],
-                  ),
                 const SizedBox(height: 4),
 
-                  // Row 2: (Subtitle) in parentheses
+                // Row 2: Subtitle/headline
-                  if (professional.subtitle.isNotEmpty)
+                if (subtitle.isNotEmpty)
                   Text(
-                      '(${professional.subtitle})',
+                    '($subtitle)',
                     style: const TextStyle(
                       fontFamily: 'SourceSerif4',
                       fontSize: 10,
@@ -437,26 +370,27 @@ class _TopProfessionalsSectionState
                   ),
                 const SizedBox(height: 4),
 
-                  // Row 3: Verified badge + "Verified local agent" in green
+                // Row 3: Verified badge + "Verified local agent" in green (Figma 49:6319)
+                if (agent.isVerified)
                   Row(
                     children: [
                       SvgPicture.asset(
                         'assets/icons/verified_badge_icon.svg',
-                        width: 14,
+                        width: 16,
-                        height: 14,
+                        height: 16,
                         placeholderBuilder: (_) => const Icon(
                           Icons.verified,
                           color: Color(0xFF638559),
-                          size: 14,
+                          size: 16,
                         ),
                       ),
-                      const SizedBox(width: 4),
+                      const SizedBox(width: 6),
                       const Text(
-                        '"Verified local agent"',
+                        '\u201CVerified local agent\u201D',
                         style: TextStyle(
                           fontFamily: 'SourceSerif4',
-                          fontSize: 10,
+                          fontSize: 14,
-                          fontWeight: FontWeight.w400,
+                          fontWeight: FontWeight.w500,
                           color: Color(0xFF638559),
                         ),
                       ),
@@ -464,8 +398,8 @@ class _TopProfessionalsSectionState
                   ),
                 const SizedBox(height: 8),
 
-                  // Row 4: Location: label
+                // Row 4: Location
-                  if (professional.location.isNotEmpty) ...[
+                if (agent.location.isNotEmpty) ...[
                   const Text(
                     'Location:',
                     style: TextStyle(
@@ -476,7 +410,6 @@ class _TopProfessionalsSectionState
                     ),
                   ),
                   const SizedBox(height: 2),
-                    // Pin icon + location text
                   Row(
                     children: [
                       SvgPicture.asset(
@@ -492,7 +425,7 @@ class _TopProfessionalsSectionState
                       const SizedBox(width: 4),
                       Expanded(
                         child: Text(
-                            professional.location,
+                          agent.location,
                           style: const TextStyle(
                             fontFamily: 'SourceSerif4',
                             fontSize: 10,
@@ -507,8 +440,8 @@ class _TopProfessionalsSectionState
                   const SizedBox(height: 8),
                 ],
 
-                  // Row 5: Expertise: label + tags
+                // Row 5: Expertise tags
-                  if (professional.expertise.isNotEmpty) ...[
+                if (expertise.isNotEmpty) ...[
                   const Text(
                     'Expertise:',
                     style: TextStyle(
@@ -519,20 +452,19 @@ class _TopProfessionalsSectionState
                     ),
                   ),
                   const SizedBox(height: 6),
-                    // Tags as bordered pills
                   Wrap(
                     spacing: 8,
                     runSpacing: 6,
-                      children: professional.expertise
+                    children: expertise
                         .take(6)
                         .map((tag) => _buildTag(tag))
                         .toList(),
                   ),
+                  const SizedBox(height: 12),
                 ],
-                  const Spacer(),
 
                 // Experience text
-                  if (professional.experience.isNotEmpty)
+                if (experience.isNotEmpty) ...[
                   RichText(
                     text: TextSpan(
                       children: [
@@ -546,7 +478,7 @@ class _TopProfessionalsSectionState
                           ),
                         ),
                         TextSpan(
-                            text: professional.experience,
+                          text: experience,
                           style: const TextStyle(
                             fontFamily: 'SourceSerif4',
                             fontSize: 14,
@@ -560,12 +492,26 @@ class _TopProfessionalsSectionState
                     overflow: TextOverflow.ellipsis,
                   ),
                   const SizedBox(height: 8),
+                ],
 
-                  // 5 star rating icons row at bottom
+                // Star rating row at bottom
-                  Row(
+                _buildStarRating(rating),
-                    children: List.generate(
+              ],
-                      5,
+            ),
-                      (index) => Padding(
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildStarRating(double rating) {
+    final fullStars = rating.floor();
+    final hasHalfStar = (rating - fullStars) >= 0.3;
+
+    return Row(
+      children: List.generate(5, (index) {
+        if (index < fullStars) {
+          return Padding(
             padding: const EdgeInsets.only(right: 4),
             child: SvgPicture.asset(
               'assets/icons/star_rating_icon.svg',
@@ -577,15 +523,27 @@ class _TopProfessionalsSectionState
                 size: 18,
               ),
             ),
+          );
+        } else if (index == fullStars && hasHalfStar) {
+          return const Padding(
+            padding: EdgeInsets.only(right: 4),
+            child: Icon(
+              Icons.star_half,
+              color: Color(0xFFFFDE21),
+              size: 18,
             ),
+          );
+        } else {
+          return const Padding(
+            padding: EdgeInsets.only(right: 4),
+            child: Icon(
+              Icons.star_border,
+              color: Color(0xFFFFDE21),
+              size: 18,
             ),
-                  ),
+          );
-                ],
+        }
-              ),
+      }),
-            ),
-          ),
-        ],
-      ),
     );
   }
 
@@ -675,7 +633,8 @@ class _TopProfessionalsSectionState
           ),
           const SizedBox(height: 16),
           TextButton(
-            onPressed: () => ref.read(homeProvider.notifier).loadContent(),
+            onPressed: () =>
+                ref.read(topProfessionalsProvider.notifier).refresh(),
             child: const Text(
               'Retry',
               style: TextStyle(
@@ -691,13 +650,13 @@ class _TopProfessionalsSectionState
     );
   }
 
-  Widget _buildEmptyState() {
+  Widget _buildEmptyState(String activeTab) {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 40),
       child: Column(
         children: [
           Icon(
-            _activeTab == 'agents'
+            activeTab == 'agents'
                 ? Icons.people_outline
                 : Icons.account_balance_outlined,
             color: AppColors.hintText,
@@ -705,7 +664,7 @@ class _TopProfessionalsSectionState
           ),
           const SizedBox(height: 12),
           Text(
-            'No ${_activeTab == 'agents' ? 'agents' : 'lenders'} found',
+            'No ${activeTab == 'agents' ? 'agents' : 'lenders'} found',
             style: const TextStyle(
               fontFamily: 'Fractul',
               fontSize: 14,
@@ -719,6 +678,13 @@ class _TopProfessionalsSectionState
   }
 
   Widget _buildSeeAllAgentsCta(TopProfessionalsContent content) {
+    final ctaText = content.ctaText.isNotEmpty
+        ? content.ctaText
+        : _defaultCmsContent.ctaText;
+    final ctaButtonText = content.ctaButtonText.isNotEmpty
+        ? content.ctaButtonText
+        : _defaultCmsContent.ctaButtonText;
+
     return Container(
       width: double.infinity,
       padding: const EdgeInsets.all(24),
@@ -752,7 +718,7 @@ class _TopProfessionalsSectionState
           ),
           const SizedBox(height: 12),
           Text(
-            content.ctaText,
+            ctaText,
             textAlign: TextAlign.center,
             style: const TextStyle(
               fontFamily: 'SourceSerif4',
@@ -765,17 +731,17 @@ class _TopProfessionalsSectionState
           SizedBox(
             width: double.infinity,
             child: ElevatedButton(
-              onPressed: () {},
+              onPressed: () => context.push('/agents/search'),
               style: ElevatedButton.styleFrom(
-                backgroundColor: AppColors.primaryDark,
+                backgroundColor: AppColors.accentOrange,
-                foregroundColor: Colors.white,
+                foregroundColor: AppColors.primaryDark,
                 padding: const EdgeInsets.symmetric(vertical: 14),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(10),
                 ),
               ),
               child: Text(
-                content.ctaButtonText,
+                ctaButtonText,
                 style: const TextStyle(
                   fontFamily: 'Fractul',
                   fontSize: 16,

lib/features/home/presentation/widgets/trust_stats_section.dart

@@ -1,19 +1,69 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:real_estate_mobile/core/constants/app_colors.dart';
+import 'package:real_estate_mobile/features/home/data/models/landing_page_content.dart';
+import 'package:real_estate_mobile/features/home/presentation/providers/home_provider.dart';
 
-class TrustStatsSection extends StatelessWidget {
+/// Default content — matches web's hardcoded defaultContent fallback.
+const _defaultContent = TestimonialsContent(
+  title: "Our Clients' Trust Is Our Foundation",
+  subtitle:
+      'We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.',
+  ratingInfo:
+      'Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.',
+  stats: [
+    StatItem(
+      iconPath: 'cities',
+      boldText: '25+ Cities &',
+      normalText: 'neighborhoods served',
+    ),
+    StatItem(
+      iconPath: 'properties',
+      boldText: '1,000+ Properties',
+      normalText: 'bought and sold for our clients.',
+    ),
+  ],
+  testimonials: [],
+);
+
+/// Map of stat icon keys to local SVG asset paths and Material fallback icons.
+const _statIconMap = {
+  'cities': ('assets/icons/cities_icon.svg', Icons.location_city),
+  'properties': ('assets/icons/properties_icon.svg', Icons.home_work),
+};
+
+class TrustStatsSection extends ConsumerWidget {
   const TrustStatsSection({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final homeState = ref.watch(homeProvider);
+    final cmsTestimonials = homeState.content?.testimonials;
+
+    // Use CMS data if available, otherwise fallback (same pattern as web)
+    final data = cmsTestimonials ?? _defaultContent;
+
+    final title = data.title.isNotEmpty ? data.title : _defaultContent.title;
+    final subtitle =
+        data.subtitle.isNotEmpty ? data.subtitle : _defaultContent.subtitle;
+    final ratingInfo = data.ratingInfo.isNotEmpty
+        ? data.ratingInfo
+        : _defaultContent.ratingInfo;
+    final stats =
+        data.stats.isNotEmpty ? data.stats : _defaultContent.stats;
+
+    // Extract rating number from ratingInfo string (e.g. "4.9" from "...4.9 out of 5...")
+    final ratingValue = _extractRating(ratingInfo);
+
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 24),
       child: Column(
         children: [
-          const Text(
+          Text(
-            "Our Clients' Trust Is Our Foundation",
+            title,
             textAlign: TextAlign.center,
-            style: TextStyle(
+            style: const TextStyle(
               fontFamily: 'Fractul',
               fontSize: 25,
               fontWeight: FontWeight.w700,
@@ -21,10 +71,10 @@ class TrustStatsSection extends StatelessWidget {
             ),
           ),
           const SizedBox(height: 16),
-          const Text(
+          Text(
-            'We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.',
+            subtitle,
             textAlign: TextAlign.center,
-            style: TextStyle(
+            style: const TextStyle(
               fontFamily: 'Fractul',
               fontSize: 14,
               fontWeight: FontWeight.w500,
@@ -32,10 +82,10 @@ class TrustStatsSection extends StatelessWidget {
             ),
           ),
           const SizedBox(height: 8),
-          const Text(
+          Text(
-            'Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.',
+            ratingInfo,
             textAlign: TextAlign.center,
-            style: TextStyle(
+            style: const TextStyle(
               fontFamily: 'Fractul',
               fontSize: 14,
               fontWeight: FontWeight.w500,
@@ -49,70 +99,99 @@ class TrustStatsSection extends StatelessWidget {
           Row(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              // Cities stat
+              // Dynamic stats from CMS
               Expanded(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
+                  children: stats
-                    RichText(
+                      .map((stat) => Padding(
-                      text: const TextSpan(
+                            padding: const EdgeInsets.only(bottom: 12),
-                        children: [
+                            child: _buildStatItem(stat),
-                          TextSpan(
+                          ))
-                            text: '25+ Cities &\n',
+                      .toList(),
-                            style: TextStyle(
-                              fontFamily: 'SourceSerif4',
-                              fontSize: 14,
-                              fontWeight: FontWeight.w700,
-                              color: AppColors.primaryDark,
-                            ),
-                          ),
-                          TextSpan(
-                            text: 'neighborhoods served',
-                            style: TextStyle(
-                              fontFamily: 'SourceSerif4',
-                              fontSize: 14,
-                              fontWeight: FontWeight.w400,
-                              color: AppColors.primaryDark,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                    const SizedBox(height: 12),
-                    RichText(
-                      text: const TextSpan(
-                        children: [
-                          TextSpan(
-                            text: '1,000+ Properties\n',
-                            style: TextStyle(
-                              fontFamily: 'SourceSerif4',
-                              fontSize: 14,
-                              fontWeight: FontWeight.w700,
-                              color: AppColors.primaryDark,
-                            ),
-                          ),
-                          TextSpan(
-                            text: 'bought and sold for our clients.',
-                            style: TextStyle(
-                              fontFamily: 'SourceSerif4',
-                              fontSize: 14,
-                              fontWeight: FontWeight.w400,
-                              color: AppColors.primaryDark,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ],
                 ),
               ),
               // Rating visual
               const SizedBox(width: 16),
-              Column(
+              _buildRatingVisual(ratingValue),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildStatItem(StatItem stat) {
+    final iconEntry = _statIconMap[stat.iconPath];
+    final svgPath = iconEntry?.$1;
+    final fallbackIcon = iconEntry?.$2 ?? Icons.info_outline;
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-                  const Text(
+        if (svgPath != null)
-                    '4.9',
+          Padding(
-                    style: TextStyle(
+            padding: const EdgeInsets.only(right: 8, top: 2),
+            child: SvgPicture.asset(
+              svgPath,
+              width: 27,
+              height: 27,
+              placeholderBuilder: (_) => Icon(
+                fallbackIcon,
+                size: 27,
+                color: AppColors.accentOrange,
+              ),
+            ),
+          )
+        else
+          Padding(
+            padding: const EdgeInsets.only(right: 8, top: 2),
+            child: Icon(
+              fallbackIcon,
+              size: 27,
+              color: AppColors.accentOrange,
+            ),
+          ),
+        Expanded(
+          child: RichText(
+            text: TextSpan(
+              children: [
+                TextSpan(
+                  text: '${stat.boldText}\n',
+                  style: const TextStyle(
+                    fontFamily: 'SourceSerif4',
+                    fontSize: 14,
+                    fontWeight: FontWeight.w700,
+                    color: AppColors.primaryDark,
+                  ),
+                ),
+                TextSpan(
+                  text: stat.normalText,
+                  style: const TextStyle(
+                    fontFamily: 'SourceSerif4',
+                    fontSize: 14,
+                    fontWeight: FontWeight.w400,
+                    color: AppColors.primaryDark,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildRatingVisual(double rating) {
+    final fullStars = rating.floor();
+    final hasHalfStar = (rating - fullStars) >= 0.3;
+    final totalStars = 5;
+
+    return Column(
+      children: [
+        Text(
+          rating.toStringAsFixed(1),
+          style: const TextStyle(
             fontFamily: 'Fractul',
             fontSize: 32,
             fontWeight: FontWeight.w700,
@@ -121,20 +200,41 @@ class TrustStatsSection extends StatelessWidget {
         ),
         Row(
           children: List.generate(
-                      5,
+            totalStars,
-                      (index) => Icon(
+            (index) {
-                        index < 4 ? Icons.star : Icons.star_half,
+              if (index < fullStars) {
+                return const Icon(
+                  Icons.star,
+                  color: AppColors.accentOrange,
+                  size: 18,
+                );
+              } else if (index == fullStars && hasHalfStar) {
+                return const Icon(
+                  Icons.star_half,
+                  color: AppColors.accentOrange,
+                  size: 18,
+                );
+              } else {
+                return const Icon(
+                  Icons.star_border,
                   color: AppColors.accentOrange,
                   size: 18,
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ],
-          ),
-        ],
-      ),
                 );
               }
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Extract numeric rating from ratingInfo string.
+  /// e.g. "Clients rate our real estate services 4.9 out of 5..." → 4.9
+  double _extractRating(String ratingInfo) {
+    final match = RegExp(r'(\d+\.?\d*)\s*out\s*of\s*\d+').firstMatch(ratingInfo);
+    if (match != null) {
+      return double.tryParse(match.group(1)!) ?? 4.9;
+    }
+    return 4.9;
+  }
 }

lib/routing/app_router.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
 import 'package:real_estate_mobile/features/auth/presentation/screens/login_screen.dart';
 import 'package:real_estate_mobile/features/auth/presentation/screens/signup_screen.dart';
+import 'package:real_estate_mobile/features/agents/presentation/screens/agent_search_screen.dart';
 import 'package:real_estate_mobile/features/home/presentation/screens/home_screen.dart';
 
 final routerProvider = Provider<GoRouter>((ref) {
@@ -52,6 +53,13 @@ final routerProvider = Provider<GoRouter>((ref) {
         path: '/home',
         builder: (context, state) => const HomeScreen(),
       ),
+      GoRoute(
+        path: '/agents/search',
+        builder: (context, state) {
+          final query = state.uri.queryParameters['q'];
+          return AgentSearchScreen(initialQuery: query);
+        },
+      ),
     ],
   );
 });

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,11 +6,13 @@ import FlutterMacOS
 import Foundation
 
 import flutter_secure_storage_macos
+import path_provider_foundation
 import shared_preferences_foundation
 import sqflite_darwin
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   FlutterSecureStoragePlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStoragePlugin"))
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
   SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
 }

pubspec.lock

@@ -169,14 +169,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.2"
-  code_assets:
-    dependency: transitive
-    description:
-      name: code_assets
-      sha256: "83ccdaa064c980b5596c35dd64a8d3ecc68620174ab9b90b6343b753aa721687"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.0"
   code_builder:
     dependency: transitive
     description:
@@ -448,14 +440,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.2"
-  hooks:
-    dependency: transitive
-    description:
-      name: hooks
-      sha256: "7a08a0d684cb3b8fb604b78455d5d352f502b68079f7b80b831c62220ab0a4f6"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.1"
   http:
     dependency: transitive
     description:
@@ -616,22 +600,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
-  native_toolchain_c:
-    dependency: transitive
-    description:
-      name: native_toolchain_c
-      sha256: "89e83885ba09da5fdf2cdacc8002a712ca238c28b7f717910b34bcd27b0d03ac"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.17.4"
-  objective_c:
-    dependency: transitive
-    description:
-      name: objective_c
-      sha256: "100a1c87616ab6ed41ec263b083c0ef3261ee6cd1dc3b0f35f8ddfa4f996fe52"
-      url: "https://pub.dev"
-    source: hosted
-    version: "9.3.0"
   octo_image:
     dependency: transitive
     description:
@@ -681,13 +649,13 @@ packages:
     source: hosted
     version: "2.2.22"
   path_provider_foundation:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: path_provider_foundation
-      sha256: "2a376b7d6392d80cd3705782d2caa734ca4727776db0b6ec36ef3f1855197699"
+      sha256: f234384a3fdd67f989b4d54a5d73ca2a6c422fa55ae694381ae0f4375cd1ea16
       url: "https://pub.dev"
     source: hosted
-    version: "2.6.0"
+    version: "2.4.0"
   path_provider_linux:
     dependency: transitive
     description:
@@ -1158,5 +1126,5 @@ packages:
     source: hosted
     version: "3.1.3"
 sdks:
-  dart: ">=3.10.3 <4.0.0"
+  dart: ">=3.10.1 <4.0.0"
-  flutter: ">=3.38.4"
+  flutter: ">=3.35.0"

pubspec.yaml

@@ -36,6 +36,9 @@ dependencies:
   cached_network_image: ^3.4.1
   shimmer: ^3.0.0
 
+  # Pin to avoid objective_c crash on iOS 26 simulator
+  path_provider_foundation: 2.4.0
+
   # Utils
   intl: ^0.20.2
   logger: ^2.5.0