Enhanced material design 3 implementation

lib/screens/profile/profile_screen.dart

@@ -12,6 +12,7 @@ import '../../services/face_verification.dart' as face;
 import '../../widgets/face_verification_overlay.dart';
 import '../../widgets/multi_select_picker.dart';
 import '../../widgets/qr_verification_dialog.dart';
+import '../../widgets/app_page_header.dart';
 import '../../widgets/responsive_body.dart';
 import '../../utils/snackbar.dart';
 
@@ -74,12 +75,14 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
 
     return ResponsiveBody(
       child: SingleChildScrollView(
-        padding: const EdgeInsets.only(top: 16, bottom: 32),
+        padding: const EdgeInsets.only(bottom: 32),
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            Text('My Profile', style: Theme.of(context).textTheme.titleLarge),
-            const SizedBox(height: 12),
+            const AppPageHeader(
+              title: 'My Profile',
+              subtitle: 'Manage your account and preferences',
+            ),
 
             // ── Avatar Card ──
             _buildAvatarCard(context, profileAsync),
@@ -287,19 +290,22 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
             Center(
               child: Stack(
                 children: [
-                  CircleAvatar(
-                    radius: 56,
-                    backgroundColor: colors.surfaceContainerHighest,
-                    backgroundImage: avatarUrl != null
-                        ? NetworkImage(avatarUrl)
-                        : null,
-                    child: avatarUrl == null
-                        ? Icon(
-                            Icons.person,
-                            size: 48,
-                            color: colors.onSurfaceVariant,
-                          )
-                        : null,
+                  Hero(
+                    tag: 'profile-avatar',
+                    child: CircleAvatar(
+                      radius: 56,
+                      backgroundColor: colors.surfaceContainerHighest,
+                      backgroundImage: avatarUrl != null
+                          ? NetworkImage(avatarUrl)
+                          : null,
+                      child: avatarUrl == null
+                          ? Icon(
+                              Icons.person,
+                              size: 48,
+                              color: colors.onSurfaceVariant,
+                            )
+                          : null,
+                    ),
                   ),
                   if (_uploadingAvatar)
                     const Positioned.fill(
@@ -368,7 +374,7 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
               children: [
                 Icon(
                   hasFace ? Icons.check_circle : Icons.cancel,
-                  color: hasFace ? Colors.green : colors.error,
+                  color: hasFace ? colors.tertiary : colors.error,
                 ),
                 const SizedBox(width: 8),
                 Expanded(