diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index f3f9f8d..10c2a0d 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -10,6 +10,7 @@ import { currency } from '../lib/format';
 import { RootStackParamList } from '../navigation/types';
 import { supabase } from '../lib/supabase';
 import { colors, radius, shadows } from '../lib/theme';
+import { Ionicons } from '@expo/vector-icons';
 
 const statusColor: Record<string, string> = {
   pendente: colors.primary,
@@ -25,8 +26,12 @@ const statusLabel: Record<string, string> = {
   cancelado: 'Cancelado',
 };
 
-type ClientTab = 'favoritos' | 'agenda' | 'pedidos';
-type BarberTab = 'reviews' | 'agenda_pessoal' | 'estatisticas';
+const statusIconName: Record<string, any> = {
+  pendente: 'hourglass-outline',
+  confirmado: 'checkmark-circle-outline',
+  concluido: 'checkbox-outline',
+  cancelado: 'close-circle-outline',
+};
 
 export default function Profile() {
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -115,22 +120,29 @@ export default function Profile() {
   };
 
   return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Header Perfil */}
+    <SafeAreaView style={styles.container} edges={['top']}>
+      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+        
+        {/* Profile Card Header - Premium Styling */}
         <View style={styles.profileHeader}>
-          <View style={styles.avatarBox}>
+          <View style={styles.avatarGradient}>
             <Text style={styles.avatarText}>{user.name.charAt(0).toUpperCase()}</Text>
           </View>
           <View style={styles.profileInfo}>
-            <Text style={styles.profileName}>{user.name}</Text>
-            <Text style={styles.profileEmail}>{user.email}</Text>
+            <Text style={styles.profileName} numberOfLines={1}>{user.name}</Text>
+            <Text style={styles.profileEmail} numberOfLines={1}>{user.email}</Text>
             <View style={styles.roleBadge}>
+              <Ionicons 
+                name={isBarber ? "shield-checkmark-outline" : "person-outline"} 
+                size={11} 
+                color={colors.primaryDark} 
+              />
               <Text style={styles.roleText}>{isBarber ? 'Gestor de Espaço' : 'Cliente'}</Text>
             </View>
           </View>
         </View>
 
+        {/* Stats Strip */}
         <View style={styles.statsStrip}>
           <View style={styles.profileStat}>
             <Text style={styles.profileStatValue}>{activeAppointmentsCount}</Text>
@@ -141,20 +153,30 @@ export default function Profile() {
             <Text style={styles.profileStatLabel}>{isBarber ? 'Reviews' : 'Favoritos'}</Text>
           </View>
           <View style={styles.profileStat}>
-            <Text style={styles.profileStatValue}>{isBarber ? myShop?.rating.toFixed(1) || '0.0' : currency(totalOrdersValue)}</Text>
-            <Text style={styles.profileStatLabel}>{isBarber ? 'Rating' : 'Compras'}</Text>
+            <Text style={styles.profileStatValue}>
+              {isBarber ? (myShop?.rating || 0).toFixed(1) : currency(totalOrdersValue)}
+            </Text>
+            <Text style={styles.profileStatLabel}>{isBarber ? 'Rating ★' : 'Compras'}</Text>
           </View>
         </View>
 
+        {/* Notifications Section */}
         {myNotifications.length > 0 && (
           <View style={styles.notifSection}>
-            <Text style={styles.sectionTitle}>Notificações</Text>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.notifScroll}>
+            <View style={styles.sectionHeaderRow}>
+              <Ionicons name="notifications-outline" size={18} color={colors.primary} />
+              <Text style={styles.sectionTitle}>Notificações Recentes</Text>
+            </View>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.notifScroll} contentContainerStyle={{ paddingRight: 20 }}>
               {myNotifications.map((n) => (
                 <View key={n.id} style={[styles.notifCard, !n.read && styles.notifUnread]}>
+                  <View style={styles.notifHeader}>
+                    <Ionicons name="chatbubble-ellipses-outline" size={16} color={!n.read ? colors.primaryDark : colors.textMuted} />
+                    {!n.read && <View style={styles.unreadDot} />}
+                  </View>
                   <Text style={styles.notifMsg} numberOfLines={2}>{n.message}</Text>
                   {!n.read && (
-                    <TouchableOpacity onPress={() => markNotificationRead(n.id)}>
+                    <TouchableOpacity onPress={() => markNotificationRead(n.id)} style={styles.markReadBtn} activeOpacity={0.7}>
                       <Text style={styles.markRead}>Marcar lida</Text>
                     </TouchableOpacity>
                   )}
@@ -164,28 +186,33 @@ export default function Profile() {
           </View>
         )}
 
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabBar}>
-          {(isBarber ? [
-            ['agenda_pessoal', 'Agenda Global'],
-            ['reviews', 'Avaliações'],
-            ['estatisticas', 'Resumo'],
-          ] : [
-            ['agenda', 'Minha Agenda'],
-            ['favoritos', 'Favoritos'],
-            ['pedidos', 'Compras'],
-          ]).map(([id, label]) => (
-            <TouchableOpacity
-              key={id}
-              onPress={() => setActiveTab(id)}
-              style={[styles.tabItem, activeTab === id && styles.tabActive]}
-            >
-              <Text style={[styles.tabText, activeTab === id && styles.tabTextActive]}>{label}</Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
+        {/* Dynamic Tab Bar */}
+        <View style={styles.tabBarContainer}>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabBar}>
+            {(isBarber ? [
+              ['agenda_pessoal', 'Agenda Global'],
+              ['reviews', 'Avaliações'],
+              ['estatisticas', 'Resumo'],
+            ] : [
+              ['agenda', 'Minha Agenda'],
+              ['favoritos', 'Favoritos'],
+              ['pedidos', 'Compras'],
+            ]).map(([id, label]) => (
+              <TouchableOpacity
+                key={id}
+                onPress={() => setActiveTab(id)}
+                style={[styles.tabItem, activeTab === id && styles.tabActive]}
+                activeOpacity={0.8}
+              >
+                <Text style={[styles.tabText, activeTab === id && styles.tabTextActive]}>{label}</Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
 
-        {/* Conteúdo das Tabs */}
+        {/* Tab Content Area */}
         <View style={styles.tabContent}>
+          
           {/* CLIENTE TABS */}
           {activeTab === 'agenda' && (
             <View style={styles.listContainer}>
@@ -194,115 +221,236 @@ export default function Profile() {
                   const shop = shops.find((s) => s.id === appt.shopId);
                   const canReview = appt.status === 'concluido' && !reviewedAppointments.has(appt.id);
                   const dateParts = appt.date.split(' ');
+                  const day = dateParts[0].split('-')[2];
+                  const month = new Date(dateParts[0]).toLocaleString('pt-PT', { month: 'short' }).toUpperCase();
+                  
                   return (
                     <Card key={appt.id} style={styles.agendaCard}>
                       <View style={styles.agendaTop}>
-                        <View style={styles.dateBox}>
-                          <Text style={styles.dateDay}>{dateParts[0].split('-')[2]}</Text>
-                          <Text style={styles.dateMonth}>{new Date(dateParts[0]).toLocaleString('pt-PT', { month: 'short' }).toUpperCase()}</Text>
+                        {/* tear-off style calendar block */}
+                        <View style={styles.calendarBlock}>
+                          <View style={styles.calendarHeader} />
+                          <Text style={styles.dateDay}>{day}</Text>
+                          <Text style={styles.dateMonth}>{month}</Text>
                         </View>
+                        
                         <View style={styles.agendaMain}>
                           <Text style={styles.agendaShop} numberOfLines={1}>{shop?.name || 'Barbearia'}</Text>
-                          <Text style={styles.agendaTime}>{dateParts[1]} · {currency(appt.total)}</Text>
+                          <View style={styles.agendaMetaRow}>
+                            <Ionicons name="time-outline" size={13} color={colors.textMuted} />
+                            <Text style={styles.agendaTime}>{dateParts[1]} • {currency(appt.total)}</Text>
+                          </View>
                         </View>
-                        <View style={[styles.statusTag, { backgroundColor: statusColor[appt.status] + '20' }]}>
+                        
+                        <View style={[styles.statusTag, { backgroundColor: statusColor[appt.status] + '14' }]}>
+                          <Ionicons 
+                            name={statusIconName[appt.status]} 
+                            size={11} 
+                            color={statusColor[appt.status]} 
+                          />
                           <Text style={[styles.statusText, { color: statusColor[appt.status] }]}>{statusLabel[appt.status]}</Text>
                         </View>
                       </View>
+                      
                       {canReview && (
-                        <Button variant="outline" size="sm" style={styles.reviewBtn} onPress={() => setReviewTarget({ appointmentId: appt.id, shopId: appt.shopId, shopName: shop?.name || 'Barbearia' })}>
-                          Avaliar Serviço
+                        <Button 
+                          variant="outline" 
+                          size="sm" 
+                          style={styles.reviewBtn} 
+                          onPress={() => setReviewTarget({ appointmentId: appt.id, shopId: appt.shopId, shopName: shop?.name || 'Barbearia' })}
+                        >
+                          Avaliar Serviço ⭐
                         </Button>
                       )}
                     </Card>
                   );
                 })
-              ) : <Text style={styles.emptyTxt}>Sem marcações agendadas.</Text>}
+              ) : (
+                <View style={styles.emptyBlock}>
+                  <Ionicons name="calendar-outline" size={36} color={colors.textSubtle} />
+                  <Text style={styles.emptyTxt}>Sem marcações agendadas.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {activeTab === 'favoritos' && (
             <View style={styles.listContainer}>
-              {favoriteShops.length > 0 ? favoriteShops.map(s => (
-                <TouchableOpacity key={s.id} onPress={() => navigation.navigate('ShopDetails', { shopId: s.id })}>
-                  <Card style={styles.shopCard}>
-                    <View style={styles.shopIcon}><Text style={styles.shopIconText}>{s.name.charAt(0)}</Text></View>
-                    <View style={{ flex: 1 }}><Text style={styles.shopName}>{s.name}</Text><Text style={styles.shopAddr} numberOfLines={1}>{s.address}</Text></View>
-                    <Text style={styles.shopRating}>★ {s.rating.toFixed(1)}</Text>
-                  </Card>
-                </TouchableOpacity>
-              )) : <Text style={styles.emptyTxt}>Ainda não tens favoritos.</Text>}
+              {favoriteShops.length > 0 ? (
+                favoriteShops.map((s) => (
+                  <TouchableOpacity 
+                    key={s.id} 
+                    onPress={() => navigation.navigate('ShopDetails', { shopId: s.id })}
+                    activeOpacity={0.9}
+                  >
+                    <Card style={styles.shopCard}>
+                      <View style={styles.shopIcon}>
+                        <Text style={styles.shopIconText}>{s.name.charAt(0).toUpperCase()}</Text>
+                      </View>
+                      <View style={styles.shopCardBody}>
+                        <Text style={styles.shopName} numberOfLines={1}>{s.name}</Text>
+                        <View style={styles.shopLocationRow}>
+                          <Ionicons name="location-outline" size={12} color={colors.textMuted} />
+                          <Text style={styles.shopAddr} numberOfLines={1}>
+                            {s.address && s.address !== 'Endereço a definir' ? s.address : 'Morada por definir'}
+                          </Text>
+                        </View>
+                      </View>
+                      <View style={styles.shopRatingBadge}>
+                        <Ionicons name="star" size={12} color={colors.star} />
+                        <Text style={styles.shopRatingText}>{(s.rating || 0).toFixed(1)}</Text>
+                      </View>
+                    </Card>
+                  </TouchableOpacity>
+                ))
+              ) : (
+                <View style={styles.emptyBlock}>
+                  <Ionicons name="heart-outline" size={36} color={colors.textSubtle} />
+                  <Text style={styles.emptyTxt}>Ainda não tens favoritos.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {activeTab === 'pedidos' && (
             <View style={styles.listContainer}>
-              {myOrders.length > 0 ? myOrders.map(order => {
-                const shop = shops.find((s) => s.id === order.shopId);
-                return (
-                  <Card key={order.id} style={styles.orderCard}>
-                    <View style={styles.orderTop}>
-                      <View>
-                        <Text style={styles.orderShop}>{shop?.name || 'Barbearia'}</Text>
-                        <Text style={styles.orderMeta}>{new Date(order.createdAt).toLocaleDateString('pt-PT')} · {order.items.length} item(s)</Text>
+              {myOrders.length > 0 ? (
+                myOrders.map((order) => {
+                  const shop = shops.find((s) => s.id === order.shopId);
+                  return (
+                    <Card key={order.id} style={styles.orderCard}>
+                      <View style={styles.orderTop}>
+                        <View style={{ flex: 1, gap: 2 }}>
+                          <Text style={styles.orderShop} numberOfLines={1}>{shop?.name || 'Barbearia'}</Text>
+                          <View style={styles.orderMetaRow}>
+                            <Ionicons name="calendar-outline" size={12} color={colors.textSubtle} />
+                            <Text style={styles.orderMeta}>
+                              {new Date(order.createdAt).toLocaleDateString('pt-PT')} • {order.items.length} item(s)
+                            </Text>
+                          </View>
+                        </View>
+                        <Text style={styles.orderTotal}>{currency(order.total)}</Text>
                       </View>
-                      <Text style={styles.orderTotal}>{currency(order.total)}</Text>
-                    </View>
-                    <View style={[styles.statusTag, { backgroundColor: statusColor[order.status] + '20', alignSelf: 'flex-start' }]}>
-                      <Text style={[styles.statusText, { color: statusColor[order.status] }]}>{statusLabel[order.status]}</Text>
-                    </View>
-                  </Card>
-                );
-              }) : <Text style={styles.emptyTxt}>Ainda não tens compras.</Text>}
+                      <View style={[styles.statusTag, { backgroundColor: statusColor[order.status] + '14', alignSelf: 'flex-start' }]}>
+                        <Ionicons 
+                          name={statusIconName[order.status]} 
+                          size={11} 
+                          color={statusColor[order.status]} 
+                        />
+                        <Text style={[styles.statusText, { color: statusColor[order.status] }]}>{statusLabel[order.status]}</Text>
+                      </View>
+                    </Card>
+                  );
+                })
+              ) : (
+                <View style={styles.emptyBlock}>
+                  <Ionicons name="basket-outline" size={36} color={colors.textSubtle} />
+                  <Text style={styles.emptyTxt}>Ainda não tens compras.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {/* BARBER TABS */}
           {activeTab === 'agenda_pessoal' && (
             <View style={styles.listContainer}>
-              <Text style={styles.subTitle}>Todas as marcações do espaço</Text>
-              {myAppointments.map(appt => (
-                <Card key={appt.id} style={styles.agendaCard}>
-                   <View style={styles.agendaTop}>
-                    <View style={styles.dateBox}>
-                      <Text style={styles.dateDay}>{appt.date.split(' ')[0].split('-')[2]}</Text>
-                      <Text style={styles.dateMonth}>{new Date(appt.date.split(' ')[0]).toLocaleString('pt-PT', { month: 'short' }).toUpperCase()}</Text>
-                    </View>
-                    <View style={styles.agendaMain}>
-                      <Text style={styles.agendaShop}>{appt.date.split(' ')[1]}</Text>
-                      <Text style={styles.agendaTime}>Status: {statusLabel[appt.status]}</Text>
-                    </View>
-                  </View>
-                </Card>
-              ))}
+              <View style={styles.subTitleRow}>
+                <Ionicons name="list-outline" size={16} color={colors.primary} />
+                <Text style={styles.subTitle}>Todas as marcações do espaço</Text>
+              </View>
+              
+              {myAppointments.length > 0 ? (
+                myAppointments.map((appt) => {
+                  const dateParts = appt.date.split(' ');
+                  const day = dateParts[0].split('-')[2];
+                  const month = new Date(dateParts[0]).toLocaleString('pt-PT', { month: 'short' }).toUpperCase();
+                  
+                  return (
+                    <Card key={appt.id} style={styles.agendaCard}>
+                       <View style={styles.agendaTop}>
+                        <View style={styles.calendarBlock}>
+                          <View style={styles.calendarHeader} />
+                          <Text style={styles.dateDay}>{day}</Text>
+                          <Text style={styles.dateMonth}>{month}</Text>
+                        </View>
+                        <View style={styles.agendaMain}>
+                          <Text style={styles.agendaShop}>{dateParts[1]}</Text>
+                          <View style={styles.agendaMetaRow}>
+                            <Ionicons name="people-outline" size={13} color={colors.textMuted} />
+                            <Text style={styles.agendaTime}>Total: {currency(appt.total)}</Text>
+                          </View>
+                        </View>
+                        <View style={[styles.statusTag, { backgroundColor: statusColor[appt.status] + '14' }]}>
+                          <Ionicons 
+                            name={statusIconName[appt.status]} 
+                            size={11} 
+                            color={statusColor[appt.status]} 
+                          />
+                          <Text style={[styles.statusText, { color: statusColor[appt.status] }]}>{statusLabel[appt.status]}</Text>
+                        </View>
+                      </View>
+                    </Card>
+                  );
+                })
+              ) : (
+                <View style={styles.emptyBlock}>
+                  <Ionicons name="calendar-outline" size={36} color={colors.textSubtle} />
+                  <Text style={styles.emptyTxt}>Sem marcações registadas.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {activeTab === 'reviews' && (
             <View style={styles.listContainer}>
-              {shopReviews.map(r => (
-                <Card key={r.id} style={styles.reviewCard}>
-                  <View style={styles.reviewHeader}>
-                    <Text style={styles.reviewStars}>{'★'.repeat(r.rating)}</Text>
-                    <Text style={styles.reviewDate}>{new Date(r.created_at).toLocaleDateString()}</Text>
-                  </View>
-                  <Text style={styles.reviewComment}>{r.comment || 'Sem comentário.'}</Text>
-                </Card>
-              ))}
+              {shopReviews.length > 0 ? (
+                shopReviews.map((r) => (
+                  <Card key={r.id} style={styles.reviewCard}>
+                    <View style={styles.reviewHeader}>
+                      <View style={styles.reviewStarsRow}>
+                        {[1, 2, 3, 4, 5].map((star) => (
+                          <Ionicons 
+                            key={star} 
+                            name={star <= r.rating ? "star" : "star-outline"} 
+                            size={14} 
+                            color={colors.star} 
+                          />
+                        ))}
+                      </View>
+                      <Text style={styles.reviewDate}>{new Date(r.created_at).toLocaleDateString()}</Text>
+                    </View>
+                    <Text style={styles.reviewComment}>{r.comment || 'Sem comentário escrito.'}</Text>
+                  </Card>
+                ))
+              ) : (
+                <View style={styles.emptyBlock}>
+                  <Ionicons name="star-outline" size={36} color={colors.textSubtle} />
+                  <Text style={styles.emptyTxt}>Ainda não há avaliações neste espaço.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {activeTab === 'estatisticas' && (
              <View style={styles.listContainer}>
                 <Card style={styles.statCard}>
+                   <View style={styles.statIconContainer}>
+                     <Ionicons name="calendar" size={24} color={colors.primary} />
+                   </View>
                    <Text style={styles.statLabel}>Total de Marcações</Text>
                    <Text style={styles.statValue}>{myAppointments.length}</Text>
                 </Card>
                 <Card style={styles.statCard}>
+                   <View style={styles.statIconContainer}>
+                     <Ionicons name="star" size={24} color={colors.accent} />
+                   </View>
                    <Text style={styles.statLabel}>Rating Médio</Text>
-                   <Text style={styles.statValue}>{myShop?.rating.toFixed(1)} ★</Text>
+                   <Text style={styles.statValue}>{(myShop?.rating || 0).toFixed(1)} ★</Text>
                 </Card>
                 <Card style={styles.statCard}>
+                   <View style={styles.statIconContainer}>
+                     <Ionicons name="wallet" size={24} color={colors.success} />
+                   </View>
                    <Text style={styles.statLabel}>Vendas em Produtos</Text>
                    <Text style={styles.statValue}>{currency(myOrders.reduce((sum, o) => sum + o.total, 0))}</Text>
                 </Card>
@@ -310,31 +458,44 @@ export default function Profile() {
           )}
         </View>
 
-        {/* Review Modal for Clients */}
+        {/* Review Modal Dialog */}
         {reviewTarget && (
           <Card style={styles.reviewModal}>
             <Text style={styles.reviewTitle}>Avaliar {reviewTarget.shopName}</Text>
             <View style={styles.stars}>
-              {[1,2,3,4,5].map(s => (
-                <TouchableOpacity key={s} onPress={() => setRating(s)}>
-                  <Text style={[styles.star, rating >= s && styles.starActive]}>★</Text>
+              {[1, 2, 3, 4, 5].map((s) => (
+                <TouchableOpacity key={s} onPress={() => setRating(s)} activeOpacity={0.7}>
+                  <Ionicons 
+                    name={rating >= s ? "star" : "star-outline"} 
+                    size={36} 
+                    color={colors.star} 
+                    style={styles.starIconSpacing} 
+                  />
                 </TouchableOpacity>
               ))}
             </View>
-            <TextInput style={styles.reviewInput} placeholder="Diz-nos o que achaste..." placeholderTextColor={colors.placeholder} multiline value={comment} onChangeText={setComment} />
+            <TextInput 
+              style={styles.reviewInput} 
+              placeholder="Partilha a tua opinião sobre o serviço..." 
+              placeholderTextColor={colors.placeholder} 
+              multiline 
+              value={comment} 
+              onChangeText={setComment} 
+            />
             <View style={styles.reviewActions}>
               <Button variant="ghost" onPress={() => setReviewTarget(null)} style={{ flex: 1 }}>Cancelar</Button>
-              <Button onPress={handleReviewSubmit} loading={submittingReview} disabled={rating === 0} style={{ flex: 2 }}>Enviar</Button>
+              <Button onPress={handleReviewSubmit} loading={submittingReview} disabled={rating === 0} style={{ flex: 2 }}>Enviar Avaliação</Button>
             </View>
           </Card>
         )}
 
+        {/* Logout Section with Premium Styling */}
         <View style={styles.logoutSection}>
-          <TouchableOpacity style={styles.logoutButtonPremium} onPress={logout}>
+          <TouchableOpacity style={styles.logoutButtonPremium} onPress={logout} activeOpacity={0.85}>
             <Text style={styles.logoutButtonText}>Sair da Conta</Text>
-            <Text style={styles.logoutButtonIcon}>⎗</Text>
+            <Ionicons name="log-out-outline" size={20} color={colors.danger} />
           </TouchableOpacity>
-          <Text style={styles.versionText}>Smart Agenda v1.0.4</Text>
+          <Text style={styles.versionText}>Smart Agenda v1.0.5</Text>
         </View>
       </ScrollView>
     </SafeAreaView>
@@ -342,78 +503,521 @@ export default function Profile() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  content: { padding: 20, paddingBottom: 100 },
-  profileHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12, gap: 16, backgroundColor: colors.surfaceDark, borderRadius: radius.sm, padding: 18, ...shadows.card },
-  avatarBox: { width: 64, height: 64, borderRadius: radius.lg, backgroundColor: colors.accentSoft, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: 'rgba(255,255,255,0.16)' },
-  avatarText: { color: '#7a4310', fontSize: 24, fontWeight: '900' },
-  profileInfo: { flex: 1, gap: 2 },
-  profileName: { color: colors.textInverse, fontSize: 22, fontWeight: '900' },
-  profileEmail: { color: '#b7c4bf', fontSize: 14, fontWeight: '500' },
-  roleBadge: { alignSelf: 'flex-start', backgroundColor: colors.primarySoft, borderRadius: radius.pill, paddingHorizontal: 10, paddingVertical: 4, marginTop: 6 },
-  roleText: { color: colors.primaryDark, fontSize: 10, fontWeight: '800', textTransform: 'uppercase' },
-  statsStrip: { flexDirection: 'row', gap: 10, marginBottom: 28 },
-  profileStat: { flex: 1, backgroundColor: colors.surface, borderRadius: radius.sm, padding: 12, borderWidth: 1, borderColor: colors.border, ...shadows.soft },
-  profileStatValue: { color: colors.text, fontSize: 18, fontWeight: '900' },
-  profileStatLabel: { color: colors.textMuted, fontSize: 11, fontWeight: '800', textTransform: 'uppercase', marginTop: 2 },
-  reviewActions: { flexDirection: 'row', gap: 14 },
-  sectionTitle: { color: colors.text, fontSize: 18, fontWeight: '800', marginBottom: 12 },
-  notifSection: { marginBottom: 32 },
-  notifScroll: { marginHorizontal: -20, paddingHorizontal: 20 },
-  notifCard: { backgroundColor: colors.surface, width: 240, borderRadius: radius.sm, padding: 16, marginRight: 12, borderWidth: 1, borderColor: colors.border, gap: 8, ...shadows.soft },
-  notifUnread: { borderColor: colors.primary, backgroundColor: colors.primarySoft },
-  notifMsg: { color: colors.textMuted, fontSize: 13, lineHeight: 18, fontWeight: '500' },
-  markRead: { color: colors.primaryDark, fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0 },
-  tabBar: { flexDirection: 'row', gap: 8, paddingBottom: 18 },
-  tabItem: { paddingVertical: 10, paddingHorizontal: 14, borderRadius: radius.pill, backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border },
-  tabActive: { backgroundColor: colors.primary, borderColor: colors.primary },
-  tabText: { color: colors.textMuted, fontSize: 15, fontWeight: '700' },
-  tabTextActive: { color: colors.textInverse },
-  tabContent: { minHeight: 200 },
-  listContainer: { gap: 16 },
-  emptyTxt: { color: colors.textMuted, textAlign: 'center', marginTop: 20, fontWeight: '600' },
-  subTitle: { color: colors.textMuted, fontSize: 13, fontWeight: '700', textTransform: 'uppercase', marginBottom: 8, letterSpacing: 0 },
-  agendaCard: { padding: 16, gap: 12, backgroundColor: colors.surface, borderRadius: radius.sm, borderWidth: 1, borderColor: colors.border },
-  agendaTop: { flexDirection: 'row', alignItems: 'center', gap: 14 },
-  dateBox: { backgroundColor: colors.primarySoft, padding: 10, borderRadius: radius.md, alignItems: 'center', minWidth: 55, borderWidth: 1, borderColor: colors.border },
-  dateDay: { color: colors.primaryDark, fontSize: 20, fontWeight: '900' },
-  dateMonth: { color: colors.primary, fontSize: 10, fontWeight: '800', textTransform: 'uppercase' },
-  agendaMain: { flex: 1, gap: 3 },
-  agendaShop: { color: colors.text, fontSize: 17, fontWeight: '800' },
-  agendaTime: { color: colors.textMuted, fontSize: 13, fontWeight: '500' },
-  statusTag: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: radius.pill },
-  statusText: { fontSize: 10, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0 },
-  reviewBtn: { marginTop: 8, borderRadius: radius.md },
-  shopCard: { flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16, backgroundColor: colors.surface, borderRadius: radius.sm, marginBottom: 4 },
-  shopIcon: { width: 48, height: 48, borderRadius: radius.md, backgroundColor: colors.primarySoft, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: colors.border },
-  shopIconText: { color: colors.primary, fontSize: 20, fontWeight: '900' },
-  shopName: { color: colors.text, fontSize: 16, fontWeight: '800' },
-  shopAddr: { color: colors.textMuted, fontSize: 12, fontWeight: '500' },
-  shopRating: { color: colors.star, fontWeight: '900', fontSize: 14 },
-  orderCard: { padding: 16, gap: 12, backgroundColor: colors.surface, borderRadius: radius.sm, borderWidth: 1, borderColor: colors.border },
-  orderTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },
-  orderShop: { color: colors.text, fontSize: 16, fontWeight: '900' },
-  orderMeta: { color: colors.textMuted, fontSize: 12, fontWeight: '600', marginTop: 4 },
-  orderTotal: { color: colors.primary, fontSize: 18, fontWeight: '900' },
-  reviewCard: { padding: 18, gap: 10, backgroundColor: colors.surface, borderRadius: radius.sm },
-  reviewHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-  reviewStars: { color: colors.star, fontSize: 15 },
-  reviewDate: { color: colors.textSubtle, fontSize: 12, fontWeight: '600' },
-  reviewComment: { color: colors.text, fontSize: 14, lineHeight: 20, fontWeight: '400' },
-  statCard: { padding: 24, alignItems: 'center', gap: 6, backgroundColor: colors.surface, borderRadius: radius.sm, borderWidth: 1, borderColor: colors.border },
-  statLabel: { color: colors.textMuted, fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0 },
-  statValue: { color: colors.text, fontSize: 28, fontWeight: '900' },
-  reviewModal: { marginTop: 24, padding: 24, gap: 16, borderColor: colors.primary, borderRadius: radius.sm },
-  reviewTitle: { color: colors.text, fontSize: 18, fontWeight: '800', textAlign: 'center' },
-  stars: { flexDirection: 'row', justifyContent: 'center', gap: 12 },
-  star: { fontSize: 36, color: colors.borderStrong },
-  starActive: { color: colors.star },
-  reviewInput: { backgroundColor: colors.surfaceMuted, borderRadius: radius.md, padding: 16, color: colors.text, height: 100, textAlignVertical: 'top', borderWidth: 1, borderColor: colors.border },
+  container: { 
+    flex: 1, 
+    backgroundColor: colors.background, 
+  },
+  content: { 
+    padding: 20, 
+    paddingBottom: 40,
+    gap: 20,
+  },
+  profileHeader: { 
+    flexDirection: 'row', 
+    alignItems: 'center', 
+    gap: 16, 
+    backgroundColor: colors.surfaceDark, 
+    borderRadius: radius.lg, 
+    padding: 20, 
+    shadowColor: colors.primaryDark,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.04)',
+    marginTop: 6,
+  },
+  avatarGradient: { 
+    width: 62, 
+    height: 62, 
+    borderRadius: 31, 
+    backgroundColor: colors.primary, 
+    alignItems: 'center', 
+    justifyContent: 'center', 
+    borderWidth: 2, 
+    borderColor: 'rgba(255,255,255,0.18)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  avatarText: { 
+    color: colors.textInverse, 
+    fontSize: 22, 
+    fontWeight: '900',
+  },
+  profileInfo: { 
+    flex: 1, 
+    gap: 4, 
+  },
+  profileName: { 
+    color: colors.textInverse, 
+    fontSize: 20, 
+    fontWeight: '900',
+    letterSpacing: -0.4,
+  },
+  profileEmail: { 
+    color: 'rgba(248,251,248,0.72)', 
+    fontSize: 14, 
+    fontWeight: '500',
+  },
+  roleBadge: { 
+    alignSelf: 'flex-start', 
+    backgroundColor: colors.primarySoft, 
+    borderRadius: radius.pill, 
+    paddingHorizontal: 10, 
+    paddingVertical: 4, 
+    marginTop: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  roleText: { 
+    color: colors.primaryDark, 
+    fontSize: 10, 
+    fontWeight: '800', 
+    textTransform: 'uppercase',
+  },
+  statsStrip: { 
+    flexDirection: 'row', 
+    gap: 10, 
+  },
+  profileStat: { 
+    flex: 1, 
+    backgroundColor: colors.surface, 
+    borderRadius: radius.lg, 
+    padding: 14, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)', 
+    alignItems: 'center',
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  profileStatValue: { 
+    color: colors.text, 
+    fontSize: 18, 
+    fontWeight: '900',
+  },
+  profileStatLabel: { 
+    color: colors.textMuted, 
+    fontSize: 10, 
+    fontWeight: '700', 
+    textTransform: 'uppercase', 
+    marginTop: 2,
+  },
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 10,
+  },
+  sectionTitle: { 
+    color: colors.text, 
+    fontSize: 16, 
+    fontWeight: '800', 
+  },
+  notifSection: { 
+    marginTop: 4,
+  },
+  notifScroll: { 
+    marginHorizontal: -20, 
+    paddingHorizontal: 20,
+  },
+  notifCard: { 
+    backgroundColor: colors.surface, 
+    width: 240, 
+    borderRadius: radius.md, 
+    padding: 14, 
+    marginRight: 12, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)', 
+    gap: 6, 
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.02,
+    shadowRadius: 6,
+    elevation: 1,
+  },
+  notifUnread: { 
+    borderColor: 'rgba(15,118,110,0.2)', 
+    backgroundColor: colors.primarySoft, 
+  },
+  notifHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  unreadDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: colors.primary,
+  },
+  notifMsg: { 
+    color: colors.textMuted, 
+    fontSize: 13, 
+    lineHeight: 18, 
+    fontWeight: '500', 
+  },
+  markReadBtn: {
+    alignSelf: 'flex-start',
+    marginTop: 2,
+  },
+  markRead: { 
+    color: colors.primaryDark, 
+    fontSize: 10, 
+    fontWeight: '800', 
+    textTransform: 'uppercase', 
+    letterSpacing: 0.3,
+  },
+  tabBarContainer: {
+    marginVertical: 4,
+  },
+  tabBar: { 
+    flexDirection: 'row', 
+    gap: 8, 
+  },
+  tabItem: { 
+    paddingVertical: 10, 
+    paddingHorizontal: 16, 
+    borderRadius: radius.pill, 
+    backgroundColor: colors.surface, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)', 
+  },
+  tabActive: { 
+    backgroundColor: colors.primary, 
+    borderColor: colors.primary, 
+  },
+  tabText: { 
+    color: colors.textMuted, 
+    fontSize: 14, 
+    fontWeight: '700', 
+  },
+  tabTextActive: { 
+    color: colors.textInverse, 
+  },
+  tabContent: { 
+    minHeight: 200, 
+  },
+  listContainer: { 
+    gap: 12, 
+  },
+  emptyBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+    gap: 10,
+  },
+  emptyTxt: { 
+    color: colors.textMuted, 
+    textAlign: 'center', 
+    fontWeight: '600', 
+    fontSize: 14,
+  },
+  subTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 4,
+  },
+  subTitle: { 
+    color: colors.text, 
+    fontSize: 14, 
+    fontWeight: '800', 
+  },
+  agendaCard: { 
+    padding: 14, 
+    backgroundColor: colors.surface, 
+    borderRadius: radius.lg, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)',
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  agendaTop: { 
+    flexDirection: 'row', 
+    alignItems: 'center', 
+    gap: 14, 
+  },
+  calendarBlock: { 
+    backgroundColor: colors.surfaceMuted, 
+    borderRadius: radius.md, 
+    alignItems: 'center', 
+    minWidth: 52, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)',
+    overflow: 'hidden',
+  },
+  calendarHeader: {
+    height: 4,
+    backgroundColor: colors.primary,
+    width: '100%',
+  },
+  dateDay: { 
+    color: colors.text, 
+    fontSize: 18, 
+    fontWeight: '900',
+    marginTop: 4,
+  },
+  dateMonth: { 
+    color: colors.primary, 
+    fontSize: 9, 
+    fontWeight: '800', 
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  agendaMain: { 
+    flex: 1, 
+    gap: 3, 
+  },
+  agendaShop: { 
+    color: colors.text, 
+    fontSize: 16, 
+    fontWeight: '800', 
+  },
+  agendaMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  agendaTime: { 
+    color: colors.textMuted, 
+    fontSize: 13, 
+    fontWeight: '500', 
+  },
+  statusTag: { 
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8, 
+    paddingVertical: 4, 
+    borderRadius: radius.pill, 
+  },
+  statusText: { 
+    fontSize: 9, 
+    fontWeight: '800', 
+    textTransform: 'uppercase', 
+    letterSpacing: 0.2,
+  },
+  reviewBtn: { 
+    marginTop: 10, 
+    borderRadius: radius.md, 
+  },
+  shopCard: { 
+    flexDirection: 'row', 
+    alignItems: 'center', 
+    gap: 12, 
+    padding: 12, 
+    backgroundColor: colors.surface, 
+    borderRadius: radius.lg, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)',
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  shopIcon: { 
+    width: 44, 
+    height: 44, 
+    borderRadius: radius.md, 
+    backgroundColor: colors.primarySoft, 
+    alignItems: 'center', 
+    justifyContent: 'center', 
+    borderWidth: 0.5, 
+    borderColor: 'rgba(15,118,110,0.1)', 
+  },
+  shopIconText: { 
+    color: colors.primary, 
+    fontSize: 18, 
+    fontWeight: '900', 
+  },
+  shopCardBody: {
+    flex: 1,
+    gap: 2,
+  },
+  shopName: { 
+    color: colors.text, 
+    fontSize: 15, 
+    fontWeight: '800', 
+  },
+  shopLocationRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  shopAddr: { 
+    color: colors.textMuted, 
+    fontSize: 12, 
+    fontWeight: '500', 
+    flex: 1,
+  },
+  shopRatingBadge: { 
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.accentSoft,
+    borderRadius: radius.pill,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    gap: 3,
+  },
+  shopRatingText: {
+    color: '#7a4310',
+    fontWeight: '800', 
+    fontSize: 11, 
+  },
+  orderCard: { 
+    padding: 14, 
+    gap: 10, 
+    backgroundColor: colors.surface, 
+    borderRadius: radius.lg, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)',
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  orderTop: { 
+    flexDirection: 'row', 
+    justifyContent: 'space-between', 
+    alignItems: 'flex-start', 
+    gap: 12, 
+  },
+  orderShop: { 
+    color: colors.text, 
+    fontSize: 16, 
+    fontWeight: '800', 
+  },
+  orderMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  orderMeta: { 
+    color: colors.textMuted, 
+    fontSize: 12, 
+    fontWeight: '500', 
+  },
+  orderTotal: { 
+    color: colors.primary, 
+    fontSize: 16, 
+    fontWeight: '900', 
+  },
+  reviewCard: { 
+    padding: 16, 
+    gap: 8, 
+    backgroundColor: colors.surface, 
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.06)',
+  },
+  reviewHeader: { 
+    flexDirection: 'row', 
+    justifyContent: 'space-between', 
+    alignItems: 'center', 
+  },
+  reviewStarsRow: { 
+    flexDirection: 'row',
+    gap: 2,
+  },
+  reviewDate: { 
+    color: colors.textSubtle, 
+    fontSize: 12, 
+    fontWeight: '500', 
+  },
+  reviewComment: { 
+    color: colors.text, 
+    fontSize: 14, 
+    lineHeight: 18, 
+    fontWeight: '400', 
+  },
+  statCard: { 
+    padding: 20, 
+    alignItems: 'center', 
+    gap: 6, 
+    backgroundColor: colors.surface, 
+    borderRadius: radius.lg, 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.06)',
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  statIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: colors.surfaceMuted,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 4,
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.04)',
+  },
+  statLabel: { 
+    color: colors.textMuted, 
+    fontSize: 12, 
+    fontWeight: '700', 
+    textTransform: 'uppercase', 
+  },
+  statValue: { 
+    color: colors.text, 
+    fontSize: 24, 
+    fontWeight: '900', 
+  },
+  reviewModal: { 
+    marginTop: 10, 
+    padding: 20, 
+    gap: 14, 
+    borderColor: colors.primary, 
+    borderRadius: radius.lg, 
+  },
+  reviewTitle: { 
+    color: colors.text, 
+    fontSize: 16, 
+    fontWeight: '800', 
+    textAlign: 'center', 
+  },
+  stars: { 
+    flexDirection: 'row', 
+    justifyContent: 'center', 
+    gap: 10, 
+  },
+  starIconSpacing: {
+    paddingHorizontal: 2,
+  },
+  reviewInput: { 
+    backgroundColor: colors.surfaceMuted, 
+    borderRadius: radius.md, 
+    padding: 12, 
+    color: colors.text, 
+    height: 90, 
+    textAlignVertical: 'top', 
+    borderWidth: 1, 
+    borderColor: 'rgba(15,118,110,0.08)', 
+  },
+  reviewActions: { 
+    flexDirection: 'row', 
+    gap: 12, 
+  },
   logoutSection: {
-    marginTop: 60,
-    paddingTop: 30,
+    marginTop: 20,
+    paddingTop: 20,
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: 'rgba(15,118,110,0.08)',
     alignItems: 'center',
   },
   logoutButtonPremium: {
@@ -421,27 +1025,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: colors.dangerSoft,
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    borderRadius: radius.sm,
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+    borderRadius: radius.md,
     width: '100%',
     borderWidth: 1,
-    borderColor: '#fecaca',
-    gap: 12,
+    borderColor: 'rgba(239,68,68,0.18)',
+    gap: 10,
+    shadowColor: colors.danger,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.02,
+    shadowRadius: 6,
   },
   logoutButtonText: {
     color: colors.danger,
-    fontSize: 16,
+    fontSize: 15,
     fontWeight: '800',
   },
-  logoutButtonIcon: {
-    color: colors.danger,
-    fontSize: 20,
-  },
   versionText: {
     color: colors.textSubtle,
-    fontSize: 12,
-    marginTop: 16,
+    fontSize: 11,
+    marginTop: 12,
     fontWeight: '600',
   },
 });
diff --git a/src/pages/ShopDetails.tsx b/src/pages/ShopDetails.tsx
index 0612190..8080fb3 100644
--- a/src/pages/ShopDetails.tsx
+++ b/src/pages/ShopDetails.tsx
@@ -9,6 +9,7 @@ import { Button } from '../components/ui/Button';
 import { currency } from '../lib/format';
 import { RootStackParamList } from '../navigation/types';
 import { colors, radius, shadows } from '../lib/theme';
+import { Ionicons } from '@expo/vector-icons';
 
 type Tab = 'servicos' | 'barbeiros' | 'produtos' | 'detalhes';
 
@@ -34,6 +35,7 @@ export default function ShopDetails() {
     return (
       <SafeAreaView style={styles.container}>
         <View style={styles.centerState}>
+          <Ionicons name="sync-outline" size={40} color={colors.primary} style={styles.loadingSpinner} />
           <Text style={styles.centerTitle}>Carregando...</Text>
         </View>
       </SafeAreaView>
@@ -44,6 +46,7 @@ export default function ShopDetails() {
     return (
       <SafeAreaView style={styles.container}>
         <View style={styles.centerState}>
+          <Ionicons name="alert-circle-outline" size={48} color={colors.danger} />
           <Text style={styles.centerTitle}>Não encontrado</Text>
           <Button onPress={() => navigation.navigate('Explore')}>Voltar</Button>
         </View>
@@ -69,62 +72,97 @@ export default function ShopDetails() {
 
   const schedule = shop.schedule || defaultSchedule;
   const currentDayIndex = new Date().getDay() === 0 ? 6 : new Date().getDay() - 1;
+  const isFav = isFavorite(shop.id);
 
   return (
     <View style={styles.container}>
-      <ScrollView bounces={false} contentContainerStyle={styles.scrollContent}>
+      <ScrollView bounces={false} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        
+        {/* Cover Hero Banner */}
         <View style={styles.hero}>
           {shop.imageUrl ? (
             <Image source={{ uri: shop.imageUrl }} style={styles.heroImage} />
           ) : (
-            <View style={styles.heroPlaceholder}><Text style={styles.heroPlaceholderText}>💈</Text></View>
+            <View style={styles.heroPlaceholder}>
+              <Ionicons name="storefront-outline" size={64} color={colors.primary} style={{ opacity: 0.6 }} />
+            </View>
           )}
           <View style={styles.heroOverlay} />
           
-          <SafeAreaView style={styles.heroHeader}>
-            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn}>
-              <Text style={styles.backIcon}>←</Text>
+          <SafeAreaView style={styles.heroHeader} edges={['top']}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn} activeOpacity={0.8}>
+              <Ionicons name="chevron-back" size={24} color={colors.textInverse} />
             </TouchableOpacity>
-            <TouchableOpacity onPress={() => toggleFavorite(shop.id)} style={styles.favBtn}>
-              <Text style={[styles.favIcon, isFavorite(shop.id) && styles.favActive]}>
-                {isFavorite(shop.id) ? '♥' : '♡'}
-              </Text>
+            <TouchableOpacity onPress={() => toggleFavorite(shop.id)} style={styles.favBtn} activeOpacity={0.8}>
+              <Ionicons 
+                name={isFav ? "heart" : "heart-outline"} 
+                size={24} 
+                color={isFav ? colors.danger : colors.textInverse} 
+              />
             </TouchableOpacity>
           </SafeAreaView>
         </View>
 
+        {/* Overlapping Info Summary Sheet */}
         <View style={styles.summaryWrap}>
           <View style={styles.summaryCard}>
             <View style={styles.summaryTop}>
-              <View style={styles.ratingBox}>
-                <Text style={styles.ratingValue}>★ {shop.rating.toFixed(1)}</Text>
+              <View style={styles.ratingBadge}>
+                <Ionicons name="star" size={14} color={colors.star} />
+                <Text style={styles.ratingValue}>{(shop.rating || 0).toFixed(1)}</Text>
+              </View>
+              <View style={styles.servicesCountBadge}>
+                <Text style={styles.summaryMeta}>{shop.services.length} serviços</Text>
               </View>
-              <Text style={styles.summaryMeta}>{shop.services.length} serviços</Text>
             </View>
+
             <Text style={styles.shopName}>{shop.name}</Text>
-            <TouchableOpacity onPress={openMap} style={styles.addrBox}>
-              <Text style={styles.shopAddr} numberOfLines={2}>📍 {shop.address}</Text>
+            
+            <TouchableOpacity onPress={openMap} style={styles.addrBox} activeOpacity={0.7}>
+              <Ionicons name="location-outline" size={16} color={colors.primary} />
+              <Text style={styles.shopAddr} numberOfLines={2}>
+                {shop.address && shop.address !== 'Endereço a definir' ? shop.address : 'Endereço por definir'}
+              </Text>
             </TouchableOpacity>
+
+            {/* Quick Stats Grid */}
             <View style={styles.quickStats}>
               <View style={styles.quickStat}>
-                <Text style={styles.quickValue}>{shop.barbers.length}</Text>
-                <Text style={styles.quickLabel}>Equipa</Text>
+                <Ionicons name="people-outline" size={18} color={colors.primary} />
+                <View>
+                  <Text style={styles.quickValue}>{shop.barbers.length}</Text>
+                  <Text style={styles.quickLabel}>Equipa</Text>
+                </View>
               </View>
               <View style={styles.quickStat}>
-                <Text style={styles.quickValue}>{shop.products.length}</Text>
-                <Text style={styles.quickLabel}>Produtos</Text>
+                <Ionicons name="basket-outline" size={18} color={colors.primary} />
+                <View>
+                  <Text style={styles.quickValue}>{shop.products.length}</Text>
+                  <Text style={styles.quickLabel}>Produtos</Text>
+                </View>
               </View>
               <View style={styles.quickStat}>
-                <Text style={styles.quickValue}>{schedule[currentDayIndex]?.closed ? 'Fechado' : 'Aberto'}</Text>
-                <Text style={styles.quickLabel}>Hoje</Text>
+                <Ionicons name="time-outline" size={18} color={colors.primary} />
+                <View>
+                  <Text style={[styles.quickValue, schedule[currentDayIndex]?.closed && styles.closedText]}>
+                    {schedule[currentDayIndex]?.closed ? 'Fechado' : 'Aberto'}
+                  </Text>
+                  <Text style={styles.quickLabel}>Hoje</Text>
+                </View>
               </View>
             </View>
-            <Button onPress={() => reserveService(shop.services[0]?.id)} disabled={shop.services.length === 0}>
-              Agendar agora
+
+            <Button 
+              onPress={() => reserveService(shop.services[0]?.id)} 
+              disabled={shop.services.length === 0}
+              style={styles.reserveBtn}
+            >
+              Agendar agora ⚡
             </Button>
           </View>
         </View>
 
+        {/* Tab Selector section */}
         <View style={styles.tabSection}>
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabsScroll}>
             {[
@@ -137,6 +175,7 @@ export default function ShopDetails() {
                 key={id}
                 onPress={() => setTab(id as Tab)}
                 style={[styles.tabItem, tab === id && styles.tabItemActive]}
+                activeOpacity={0.8}
               >
                 <Text style={[styles.tabText, tab === id && styles.tabTextActive]}>{label}</Text>
               </TouchableOpacity>
@@ -144,71 +183,135 @@ export default function ShopDetails() {
           </ScrollView>
         </View>
 
-        {/* Listagem de Conteúdo */}
+        {/* Content Tabs Area */}
         <View style={styles.contentArea}>
           {tab === 'servicos' && (
             <View style={styles.grid}>
-              {shop.services.map((s) => (
-                <Card key={s.id} style={styles.serviceCard}>
-                  <View style={styles.svcInfo}>
-                    <Text style={styles.svcName}>{s.name}</Text>
-                    <Text style={styles.svcMeta}>{s.duration} min · {currency(s.price)}</Text>
-                  </View>
-                  <Button size="sm" onPress={() => reserveService(s.id)}>Agendar</Button>
-                </Card>
-              ))}
+              {shop.services.length > 0 ? (
+                shop.services.map((s) => (
+                  <Card key={s.id} style={styles.serviceCard}>
+                    <View style={styles.svcInfo}>
+                      <Text style={styles.svcName}>{s.name}</Text>
+                      <View style={styles.svcMetaRow}>
+                        <Ionicons name="time-outline" size={13} color={colors.textMuted} />
+                        <Text style={styles.svcMeta}>{s.duration} min</Text>
+                        <Text style={styles.bulletSeparator}>•</Text>
+                        <Text style={styles.svcPrice}>{currency(s.price)}</Text>
+                      </View>
+                    </View>
+                    <Button size="sm" onPress={() => reserveService(s.id)} style={styles.svcBookBtn}>
+                      Agendar
+                    </Button>
+                  </Card>
+                ))
+              ) : (
+                <View style={styles.emptyContentBlock}>
+                  <Ionicons name="cut-outline" size={32} color={colors.textSubtle} />
+                  <Text style={styles.emptyContentText}>Sem serviços disponíveis de momento.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {tab === 'barbeiros' && (
             <View style={styles.barberList}>
-              {shop.barbers.map((b) => (
-                <Card key={b.id} style={styles.barberCard}>
-                  <View style={styles.barberAvatar}>
-                    <Text style={styles.avatarTxt}>{b.name.charAt(0)}</Text>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <Text style={styles.barberName}>{b.name}</Text>
-                    <Text style={styles.barberSpecs}>{b.specialties.join(', ')}</Text>
-                  </View>
-                </Card>
-              ))}
+              {shop.barbers.length > 0 ? (
+                shop.barbers.map((b) => (
+                  <Card key={b.id} style={styles.barberCard}>
+                    <View style={styles.barberAvatar}>
+                      <Text style={styles.avatarTxt}>{b.name.charAt(0).toUpperCase()}</Text>
+                    </View>
+                    <View style={styles.barberInfo}>
+                      <Text style={styles.barberName}>{b.name}</Text>
+                      <Text style={styles.barberSpecs} numberOfLines={1}>
+                        {b.specialties.length > 0 ? b.specialties.join(', ') : 'Barbeiro especialista'}
+                      </Text>
+                    </View>
+                    <View style={styles.barberBadge}>
+                      <Ionicons name="shield-checkmark" size={14} color={colors.primary} />
+                    </View>
+                  </Card>
+                ))
+              ) : (
+                <View style={styles.emptyContentBlock}>
+                  <Ionicons name="people-outline" size={32} color={colors.textSubtle} />
+                  <Text style={styles.emptyContentText}>Sem profissionais disponíveis de momento.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {tab === 'produtos' && (
             <View style={styles.grid}>
-              {shop.products.map((p) => (
-                <Card key={p.id} style={styles.productCard}>
-                  <View style={styles.prodHeader}>
-                    <Text style={styles.prodName}>{p.name}</Text>
-                    <Text style={styles.prodPrice}>{currency(p.price)}</Text>
-                  </View>
-                  <Text style={styles.prodStock}>{p.stock} em stock</Text>
-                  <Button size="sm" variant="outline" onPress={() => addProduct(p.id)} disabled={p.stock <= 0}>
-                    {p.stock > 0 ? 'Adicionar' : 'Esgotado'}
-                  </Button>
-                </Card>
-              ))}
+              {shop.products.length > 0 ? (
+                shop.products.map((p) => (
+                  <Card key={p.id} style={styles.productCard}>
+                    <View style={styles.prodHeader}>
+                      <Text style={styles.prodName} numberOfLines={1}>{p.name}</Text>
+                      <Text style={styles.prodPrice}>{currency(p.price)}</Text>
+                    </View>
+                    <View style={styles.productMetaRow}>
+                      <View style={[styles.stockBadge, p.stock <= 0 && styles.outOfStockBadge]}>
+                        <Text style={[styles.stockText, p.stock <= 0 && styles.outOfStockText]}>
+                          {p.stock > 0 ? `${p.stock} em stock` : 'Esgotado'}
+                        </Text>
+                      </View>
+                    </View>
+                    <Button 
+                      size="sm" 
+                      variant={p.stock > 0 ? "outline" : "ghost"}
+                      onPress={() => addProduct(p.id)} 
+                      disabled={p.stock <= 0}
+                      style={styles.productBtn}
+                    >
+                      {p.stock > 0 ? 'Adicionar 🛒' : 'Indisponível'}
+                    </Button>
+                  </Card>
+                ))
+              ) : (
+                <View style={styles.emptyContentBlock}>
+                  <Ionicons name="basket-outline" size={32} color={colors.textSubtle} />
+                  <Text style={styles.emptyContentText}>Sem produtos disponíveis de momento.</Text>
+                </View>
+              )}
             </View>
           )}
 
           {tab === 'detalhes' && (
             <Card style={styles.detailsBox}>
-              <Text style={styles.detailTitle}>Horário</Text>
-              {schedule.map((s, idx) => (
-                <View key={s.day} style={styles.schedRow}>
-                  <Text style={[styles.schedDay, idx === currentDayIndex && styles.today]}>{s.day}</Text>
-                  <Text style={[styles.schedTime, idx === currentDayIndex && styles.today]}>
-                    {s.closed ? 'Fechado' : `${s.open} - ${s.close}`}
-                  </Text>
-                </View>
-              ))}
+              <View style={styles.detailTitleRow}>
+                <Ionicons name="calendar-outline" size={18} color={colors.primary} />
+                <Text style={styles.detailTitle}>Horário de Funcionamento</Text>
+              </View>
+              
+              <View style={styles.scheduleList}>
+                {schedule.map((s, idx) => (
+                  <View key={s.day} style={[styles.schedRow, idx === currentDayIndex && styles.schedRowToday]}>
+                    <Text style={[styles.schedDay, idx === currentDayIndex && styles.today]}>
+                      {s.day} {idx === currentDayIndex && '• Hoje'}
+                    </Text>
+                    <Text style={[styles.schedTime, idx === currentDayIndex && styles.today]}>
+                      {s.closed ? 'Fechado' : `${s.open} - ${s.close}`}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+              
               <View style={styles.divider} />
-              <Text style={styles.detailTitle}>Contacto</Text>
-              <TouchableOpacity onPress={() => Linking.openURL(`tel:${shop.contacts?.phone1}`)}>
-                <Text style={styles.contactLink}>{shop.contacts?.phone1 || 'Não disponível'}</Text>
-              </TouchableOpacity>
+              
+              <View style={styles.detailTitleRow}>
+                <Ionicons name="call-outline" size={18} color={colors.primary} />
+                <Text style={styles.detailTitle}>Contacto Telefónico</Text>
+              </View>
+              
+              {shop.contacts?.phone1 ? (
+                <TouchableOpacity onPress={() => Linking.openURL(`tel:${shop.contacts?.phone1}`)} style={styles.phoneLinkBox} activeOpacity={0.7}>
+                  <Ionicons name="phone-portrait-outline" size={18} color={colors.primaryDark} />
+                  <Text style={styles.contactLink}>{shop.contacts?.phone1}</Text>
+                </TouchableOpacity>
+              ) : (
+                <Text style={styles.noContactText}>Contacto telefónico não disponível.</Text>
+              )}
             </Card>
           )}
         </View>
@@ -226,7 +329,7 @@ const styles = StyleSheet.create({
     paddingBottom: 40,
   },
   hero: {
-    height: 230,
+    height: 250,
     position: 'relative',
   },
   heroImage: {
@@ -240,12 +343,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  heroPlaceholderText: {
-    fontSize: 64,
-  },
   heroOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.overlay,
+    backgroundColor: 'rgba(12,20,17,0.3)',
   },
   heroHeader: {
     position: 'absolute',
@@ -258,116 +358,135 @@ const styles = StyleSheet.create({
     paddingTop: 10,
   },
   backBtn: {
-    width: 44,
-    height: 44,
-    borderRadius: radius.pill,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
     backgroundColor: 'rgba(20,33,29,0.72)',
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: 0.5,
     borderColor: 'rgba(255,255,255,0.16)',
   },
-  backIcon: {
-    color: colors.textInverse,
-    fontSize: 20,
-    fontWeight: '700',
-  },
   favBtn: {
-    width: 44,
-    height: 44,
-    borderRadius: radius.pill,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
     backgroundColor: 'rgba(20,33,29,0.72)',
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: 0.5,
     borderColor: 'rgba(255,255,255,0.16)',
   },
-  favIcon: {
-    color: colors.textInverse,
-    fontSize: 22,
-  },
-  favActive: {
-    color: colors.danger,
-  },
   summaryWrap: {
     paddingHorizontal: 20,
-    marginTop: -36,
+    marginTop: -46,
     zIndex: 2,
   },
   summaryCard: {
     backgroundColor: colors.surface,
-    borderRadius: radius.sm,
-    padding: 18,
-    gap: 12,
+    borderRadius: radius.lg,
+    padding: 20,
+    gap: 14,
     borderWidth: 1,
-    borderColor: colors.border,
-    ...shadows.card,
+    borderColor: 'rgba(15,118,110,0.06)',
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    elevation: 4,
   },
   summaryTop: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  summaryMeta: {
-    color: colors.textMuted,
-    fontSize: 12,
-    fontWeight: '800',
-    textTransform: 'uppercase',
-  },
-  ratingBox: {
-    alignSelf: 'flex-start',
-    backgroundColor: colors.accent,
+  ratingBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.accentSoft,
     borderRadius: radius.pill,
     paddingHorizontal: 10,
     paddingVertical: 4,
+    gap: 4,
   },
   ratingValue: {
-    color: colors.textInverse,
+    color: '#7a4310',
     fontSize: 12,
     fontWeight: '900',
   },
+  servicesCountBadge: {
+    backgroundColor: colors.primarySoft,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: radius.pill,
+  },
+  summaryMeta: {
+    color: colors.primaryDark,
+    fontSize: 11,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
   shopName: {
     color: colors.text,
-    fontSize: 28,
-    lineHeight: 32,
+    fontSize: 26,
     fontWeight: '900',
+    letterSpacing: -0.5,
   },
   addrBox: {
-    opacity: 0.8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
   },
   shopAddr: {
+    flex: 1,
     color: colors.textMuted,
     fontSize: 14,
     fontWeight: '500',
   },
   quickStats: {
     flexDirection: 'row',
-    gap: 10,
+    gap: 8,
+    marginTop: 2,
   },
   quickStat: {
     flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
     backgroundColor: colors.surfaceMuted,
-    borderRadius: radius.sm,
+    borderRadius: radius.md,
     padding: 10,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: 'rgba(15,118,110,0.05)',
   },
   quickValue: {
     color: colors.text,
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: '900',
   },
+  closedText: {
+    color: colors.danger,
+  },
   quickLabel: {
     color: colors.textMuted,
-    fontSize: 11,
+    fontSize: 10,
     fontWeight: '700',
-    marginTop: 2,
     textTransform: 'uppercase',
+    marginTop: 1,
+  },
+  reserveBtn: {
+    marginTop: 4,
+    borderRadius: radius.md,
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
   },
   tabSection: {
     backgroundColor: colors.background,
-    paddingVertical: 10,
-    marginTop: 6,
+    paddingVertical: 12,
+    marginTop: 8,
   },
   tabsScroll: {
     paddingHorizontal: 20,
@@ -375,11 +494,11 @@ const styles = StyleSheet.create({
   },
   tabItem: {
     paddingVertical: 10,
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
     borderRadius: radius.pill,
-    backgroundColor: colors.surfaceMuted,
+    backgroundColor: colors.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: 'rgba(15,118,110,0.05)',
   },
   tabItemActive: {
     backgroundColor: colors.primary,
@@ -394,7 +513,7 @@ const styles = StyleSheet.create({
     color: colors.textInverse,
   },
   contentArea: {
-    padding: 20,
+    paddingHorizontal: 20,
   },
   grid: {
     gap: 12,
@@ -404,19 +523,48 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 16,
     gap: 12,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.06)',
+    backgroundColor: colors.surface,
+    shadowColor: '#102018',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.02,
+    shadowRadius: 6,
+    elevation: 1,
   },
   svcInfo: {
     flex: 1,
-    gap: 4,
+    gap: 6,
   },
   svcName: {
     color: colors.text,
     fontSize: 16,
     fontWeight: '800',
   },
+  svcMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
   svcMeta: {
     color: colors.textMuted,
     fontSize: 13,
+    fontWeight: '500',
+  },
+  bulletSeparator: {
+    color: colors.borderStrong,
+    fontSize: 12,
+    marginHorizontal: 2,
+  },
+  svcPrice: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800',
+  },
+  svcBookBtn: {
+    borderRadius: radius.md,
+    paddingHorizontal: 14,
   },
   barberList: {
     gap: 12,
@@ -426,20 +574,30 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 14,
     gap: 14,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.06)',
+    backgroundColor: colors.surface,
   },
   barberAvatar: {
-    width: 50,
-    height: 50,
-    borderRadius: radius.md,
+    width: 48,
+    height: 48,
+    borderRadius: 24,
     backgroundColor: colors.primarySoft,
     alignItems: 'center',
     justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.1)',
   },
   avatarTxt: {
     color: colors.primary,
-    fontSize: 20,
+    fontSize: 18,
     fontWeight: '900',
   },
+  barberInfo: {
+    flex: 1,
+    gap: 2,
+  },
   barberName: {
     color: colors.text,
     fontSize: 16,
@@ -448,15 +606,29 @@ const styles = StyleSheet.create({
   barberSpecs: {
     color: colors.textMuted,
     fontSize: 12,
+    fontWeight: '500',
+  },
+  barberBadge: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: colors.primarySoft,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   productCard: {
     padding: 16,
-    gap: 8,
+    gap: 10,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.06)',
+    backgroundColor: colors.surface,
   },
   prodHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'flex-start',
+    gap: 12,
   },
   prodName: {
     color: colors.text,
@@ -469,28 +641,69 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '900',
   },
-  prodStock: {
-    color: colors.textMuted,
-    fontSize: 12,
-    marginBottom: 4,
+  productMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  stockBadge: {
+    backgroundColor: colors.successSoft,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: radius.xs,
+  },
+  outOfStockBadge: {
+    backgroundColor: colors.dangerSoft,
+  },
+  stockText: {
+    color: colors.success,
+    fontSize: 10,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+  outOfStockText: {
+    color: colors.danger,
+  },
+  productBtn: {
+    borderRadius: radius.md,
+    marginTop: 2,
   },
   detailsBox: {
     padding: 20,
-    gap: 12,
+    gap: 14,
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    borderColor: 'rgba(15,118,110,0.06)',
+    backgroundColor: colors.surface,
+  },
+  detailTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 4,
   },
   detailTitle: {
     color: colors.text,
-    fontSize: 18,
+    fontSize: 16,
     fontWeight: '800',
-    marginBottom: 8,
+  },
+  scheduleList: {
+    gap: 8,
   },
   schedRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  schedRowToday: {
+    backgroundColor: colors.primarySoft,
+    borderRadius: radius.sm,
+    paddingVertical: 6,
   },
   schedDay: {
     color: colors.textMuted,
     fontSize: 14,
+    fontWeight: '500',
   },
   schedTime: {
     color: colors.text,
@@ -498,28 +711,61 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   today: {
-    color: colors.primary,
+    color: colors.primaryDark,
     fontWeight: '800',
   },
   divider: {
     height: 1,
-    backgroundColor: colors.border,
-    marginVertical: 12,
+    backgroundColor: 'rgba(15,118,110,0.08)',
+    marginVertical: 6,
+  },
+  phoneLinkBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: colors.primarySoft,
+    alignSelf: 'flex-start',
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: radius.sm,
+    borderWidth: 0.5,
+    borderColor: 'rgba(15,118,110,0.1)',
   },
   contactLink: {
     color: colors.primaryDark,
-    fontSize: 16,
-    fontWeight: '700',
+    fontSize: 15,
+    fontWeight: '800',
+  },
+  noContactText: {
+    color: colors.textSubtle,
+    fontSize: 14,
+    fontWeight: '500',
   },
   centerState: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 40,
+    gap: 12,
   },
   centerTitle: {
     color: colors.text,
-    fontSize: 18,
+    fontSize: 16,
     fontWeight: '800',
   },
+  loadingSpinner: {
+    marginBottom: 4,
+  },
+  emptyContentBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+    gap: 10,
+  },
+  emptyContentText: {
+    color: colors.textMuted,
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
 });