fix with stackview

fix

apps/mobile/src/app/(tabs)/profile.tsx

@@ -1,5 +1,6 @@
 import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from "react-native";
 import { useUser, useClerk } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import { theme } from "../../styles/theme";
@@ -9,6 +10,7 @@ import { GradientBackground } from "../../components/GradientBackground";
 export default function ProfileScreen() {
   const { user } = useUser();
   const { signOut } = useClerk();
+  const router = useRouter();
 
   const handleSignOut = async () => {
     try {
@@ -57,7 +59,7 @@ export default function ProfileScreen() {
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Account</Text>
           <View style={[styles.infoCard, theme.shadows.subtle]}>
-            <TouchableOpacity style={styles.infoRow}>
+            <TouchableOpacity style={styles.infoRow} onPress={() => router.push('/personal-details')}>
               <LinearGradient
                 colors={['rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.05)']}
                 style={styles.iconContainer}
@@ -68,7 +70,7 @@ export default function ProfileScreen() {
               <Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
             </TouchableOpacity>
             <View style={styles.divider} />
-            <TouchableOpacity style={styles.infoRow}>
+            <TouchableOpacity style={styles.infoRow} onPress={() => router.push('/fitness-profile')}>
               <LinearGradient
                 colors={['rgba(16, 185, 129, 0.1)', 'rgba(16, 185, 129, 0.05)']}
                 style={styles.iconContainer}

apps/mobile/src/app/fitness-profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
@@ -7,13 +7,15 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   Alert,
-} from "react-native";
-import { useRouter } from "expo-router";
-import { useAuth } from "@clerk/clerk-expo";
-import { Ionicons } from "@expo/vector-icons";
-import { Input } from "../components/Input";
-import { Picker } from "../components/Picker";
-import { API_BASE_URL } from "../config/api";
+  TextInput,
+  Platform,
+} from 'react-native';
+import { useRouter, Stack } from 'expo-router';
+import { useAuth } from '@clerk/clerk-expo';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { theme } from '../styles/theme';
+import { API_BASE_URL } from '../config/api';
 
 interface FitnessProfileData {
   height?: number;
@@ -27,6 +29,28 @@ interface FitnessProfileData {
   injuries?: string;
 }
 
+const GENDER_OPTIONS = [
+  { label: 'Male', value: 'male', icon: 'male' },
+  { label: 'Female', value: 'female', icon: 'female' },
+  { label: 'Other', value: 'other', icon: 'transgender' },
+];
+
+const FITNESS_GOAL_OPTIONS = [
+  { label: 'Weight Loss', value: 'weight_loss', icon: 'trending-down', color: theme.colors.danger },
+  { label: 'Muscle Gain', value: 'muscle_gain', icon: 'barbell', color: theme.colors.primary },
+  { label: 'Endurance', value: 'endurance', icon: 'bicycle', color: theme.colors.success },
+  { label: 'Flexibility', value: 'flexibility', icon: 'body', color: theme.colors.purple },
+  { label: 'General Fitness', value: 'general_fitness', icon: 'fitness', color: theme.colors.warning },
+];
+
+const ACTIVITY_LEVEL_OPTIONS = [
+  { label: 'Sedentary', value: 'sedentary', description: 'Little to no exercise' },
+  { label: 'Light', value: 'light', description: '1-3 days/week' },
+  { label: 'Moderate', value: 'moderate', description: '3-5 days/week' },
+  { label: 'Active', value: 'active', description: '6-7 days/week' },
+  { label: 'Very Active', value: 'very_active', description: 'Intense daily training' },
+];
+
 export default function FitnessProfileScreen() {
   const router = useRouter();
   const { userId, getToken } = useAuth();
@@ -34,29 +58,6 @@ export default function FitnessProfileScreen() {
   const [fetchingProfile, setFetchingProfile] = useState(true);
   const [profileData, setProfileData] = useState<FitnessProfileData>({});
 
-  const genderOptions = [
-    { label: "Male", value: "male" },
-    { label: "Female", value: "female" },
-    { label: "Other", value: "other" },
-    { label: "Prefer not to say", value: "prefer_not_to_say" },
-  ];
-
-  const fitnessGoalOptions = [
-    { label: "Weight Loss", value: "weight_loss" },
-    { label: "Muscle Gain", value: "muscle_gain" },
-    { label: "Endurance", value: "endurance" },
-    { label: "Flexibility", value: "flexibility" },
-    { label: "General Fitness", value: "general_fitness" },
-  ];
-
-  const activityLevelOptions = [
-    { label: "Sedentary", value: "sedentary" },
-    { label: "Lightly Active", value: "lightly_active" },
-    { label: "Moderately Active", value: "moderately_active" },
-    { label: "Very Active", value: "very_active" },
-    { label: "Extremely Active", value: "extremely_active" },
-  ];
-
   useEffect(() => {
     fetchProfile();
   }, []);
@@ -65,8 +66,7 @@ export default function FitnessProfileScreen() {
     try {
       setFetchingProfile(true);
       const token = await getToken();
-      const apiUrl = `${API_BASE_URL}` || "http://localhost:3000";
-      const response = await fetch(`${apiUrl}/api/fitness-profile`, {
+      const response = await fetch(`${API_BASE_URL}/api/profile/fitness?userId=${userId}`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
@@ -79,17 +79,21 @@ export default function FitnessProfileScreen() {
             height: data.profile.height,
             weight: data.profile.weight,
             age: data.profile.age,
-            gender: data.profile.gender || "",
-            fitnessGoal: data.profile.fitnessGoal || "",
-            activityLevel: data.profile.activityLevel || "",
-            medicalConditions: data.profile.medicalConditions || "",
-            allergies: data.profile.allergies || "",
-            injuries: data.profile.injuries || "",
+            gender: data.profile.gender || '',
+            fitnessGoal: Array.isArray(data.profile.fitnessGoals)
+              ? data.profile.fitnessGoals[0]
+              : (typeof data.profile.fitnessGoals === 'string'
+                ? JSON.parse(data.profile.fitnessGoals)[0]
+                : ''),
+            activityLevel: data.profile.activityLevel || '',
+            medicalConditions: data.profile.medicalConditions || '',
+            allergies: data.profile.allergies || '',
+            injuries: data.profile.injuries || '',
           });
         }
       }
     } catch (error) {
-      console.error("Error fetching profile:", error);
+      console.error('Error fetching profile:', error);
     } finally {
       setFetchingProfile(false);
     }
@@ -99,28 +103,41 @@ export default function FitnessProfileScreen() {
     try {
       setLoading(true);
       const token = await getToken();
-      const apiUrl = `${API_BASE_URL}/api/fitness-profile` || "http://localhost:3000";
 
-      const response = await fetch(`${apiUrl}`, {
-        method: "POST",
+      // Prepare data with userId and convert fitnessGoal to fitnessGoals array
+      const dataToSave = {
+        userId: userId,
+        height: profileData.height,
+        weight: profileData.weight,
+        age: profileData.age,
+        gender: profileData.gender,
+        fitnessGoals: profileData.fitnessGoal ? [profileData.fitnessGoal] : [],
+        activityLevel: profileData.activityLevel,
+        medicalConditions: profileData.medicalConditions,
+        allergies: profileData.allergies,
+        injuries: profileData.injuries,
+      };
+
+      const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
           Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify(profileData),
+        body: JSON.stringify(dataToSave),
       });
 
       if (response.ok) {
-        Alert.alert("Success", "Fitness profile saved successfully!", [
-          { text: "OK", onPress: () => router.back() },
+        Alert.alert('Success', 'Fitness profile saved successfully!', [
+          { text: 'OK', onPress: () => router.back() },
         ]);
       } else {
         const error = await response.json();
-        Alert.alert("Error", error.message || "Failed to save profile");
+        Alert.alert('Error', error.error || 'Failed to save profile');
       }
     } catch (error) {
-      console.error("Error saving profile:", error);
-      Alert.alert("Error", "Failed to save fitness profile");
+      console.error('Error saving profile:', error);
+      Alert.alert('Error', 'Failed to save fitness profile');
     } finally {
       setLoading(false);
     }
@@ -133,216 +150,422 @@ export default function FitnessProfileScreen() {
   if (fetchingProfile) {
     return (
       <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color="#2563eb" />
+        <ActivityIndicator size="large" color={theme.colors.primary} />
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          onPress={() => router.back()}
-          style={styles.backButton}
-        >
-          <Ionicons name="arrow-back" size={24} color="#1f2937" />
-        </TouchableOpacity>
-        <Text style={styles.headerTitle}>Fitness Profile</Text>
-        <View style={styles.headerSpacer} />
-      </View>
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <View style={styles.container}>
+        {/* Header */}
+        <LinearGradient colors={theme.gradients.primary} style={styles.header}>
+          <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+            <Ionicons name="arrow-back" size={24} color="#fff" />
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>Fitness Profile</Text>
+          <View style={{ width: 40 }} />
+        </LinearGradient>
 
-      <ScrollView
-        style={styles.scrollView}
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.content}>
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Basic Information */}
           <View style={styles.section}>
             <Text style={styles.sectionTitle}>Basic Information</Text>
-
-            <Input
-              label="Height (cm)"
-              value={profileData.height?.toString() || ""}
-              onChangeText={(text) =>
-                updateField("height", text ? parseFloat(text) : undefined)
-              }
-              keyboardType="decimal-pad"
-              placeholder="e.g., 175"
-            />
-
-            <Input
-              label="Weight (kg)"
-              value={profileData.weight?.toString() || ""}
-              onChangeText={(text) =>
-                updateField("weight", text ? parseFloat(text) : undefined)
-              }
-              keyboardType="decimal-pad"
-              placeholder="e.g., 70"
-            />
-
-            <Input
-              label="Age"
-              value={profileData.age?.toString() || ""}
-              onChangeText={(text) =>
-                updateField("age", text ? parseInt(text, 10) : undefined)
-              }
-              keyboardType="number-pad"
-              placeholder="e.g., 25"
-            />
-
-            <Picker
-              label="Gender"
-              value={profileData.gender || ""}
-              onValueChange={(value) => updateField("gender", value)}
-              items={genderOptions}
-            />
+            <View style={styles.card}>
+              <View style={styles.row}>
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Height (cm)</Text>
+                  <View style={styles.inputContainer}>
+                    <Ionicons name="resize-outline" size={20} color={theme.colors.gray400} />
+                    <TextInput
+                      style={styles.input}
+                      value={profileData.height?.toString() || ''}
+                      onChangeText={(text) =>
+                        updateField('height', text ? parseFloat(text) : undefined)
+                      }
+                      keyboardType="decimal-pad"
+                      placeholder="175"
+                      placeholderTextColor={theme.colors.gray400}
+                    />
+                  </View>
+                </View>
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Weight (kg)</Text>
+                  <View style={styles.inputContainer}>
+                    <Ionicons name="scale-outline" size={20} color={theme.colors.gray400} />
+                    <TextInput
+                      style={styles.input}
+                      value={profileData.weight?.toString() || ''}
+                      onChangeText={(text) =>
+                        updateField('weight', text ? parseFloat(text) : undefined)
+                      }
+                      keyboardType="decimal-pad"
+                      placeholder="70"
+                      placeholderTextColor={theme.colors.gray400}
+                    />
+                  </View>
+                </View>
+              </View>
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Age</Text>
+                <View style={styles.inputContainer}>
+                  <Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} />
+                  <TextInput
+                    style={styles.input}
+                    value={profileData.age?.toString() || ''}
+                    onChangeText={(text) =>
+                      updateField('age', text ? parseInt(text, 10) : undefined)
+                    }
+                    keyboardType="number-pad"
+                    placeholder="25"
+                    placeholderTextColor={theme.colors.gray400}
+                  />
+                </View>
+              </View>
+            </View>
           </View>
 
+          {/* Gender Selection */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Fitness Goals</Text>
-
-            <Picker
-              label="Primary Goal"
-              value={profileData.fitnessGoal || ""}
-              onValueChange={(value) => updateField("fitnessGoal", value)}
-              items={fitnessGoalOptions}
-            />
-
-            <Picker
-              label="Activity Level"
-              value={profileData.activityLevel || ""}
-              onValueChange={(value) => updateField("activityLevel", value)}
-              items={activityLevelOptions}
-            />
+            <Text style={styles.sectionTitle}>Gender</Text>
+            <View style={styles.optionsRow}>
+              {GENDER_OPTIONS.map((option) => (
+                <TouchableOpacity
+                  key={option.value}
+                  style={[
+                    styles.optionCard,
+                    profileData.gender === option.value && styles.optionCardActive,
+                  ]}
+                  onPress={() => updateField('gender', option.value)}
+                >
+                  <Ionicons
+                    name={option.icon as any}
+                    size={24}
+                    color={
+                      profileData.gender === option.value
+                        ? theme.colors.primary
+                        : theme.colors.gray400
+                    }
+                  />
+                  <Text
+                    style={[
+                      styles.optionLabel,
+                      profileData.gender === option.value && styles.optionLabelActive,
+                    ]}
+                  >
+                    {option.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
           </View>
 
+          {/* Fitness Goal */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Health Information</Text>
-
-            <Input
-              label="Medical Conditions (optional)"
-              value={profileData.medicalConditions || ""}
-              onChangeText={(text) => updateField("medicalConditions", text)}
-              placeholder="e.g., Asthma, diabetes..."
-              multiline
-              numberOfLines={3}
-              style={styles.textArea}
-            />
-
-            <Input
-              label="Allergies (optional)"
-              value={profileData.allergies || ""}
-              onChangeText={(text) => updateField("allergies", text)}
-              placeholder="e.g., Peanuts, latex..."
-              multiline
-              numberOfLines={3}
-              style={styles.textArea}
-            />
-
-            <Input
-              label="Injuries (optional)"
-              value={profileData.injuries || ""}
-              onChangeText={(text) => updateField("injuries", text)}
-              placeholder="e.g., Previous knee injury..."
-              multiline
-              numberOfLines={3}
-              style={styles.textArea}
-            />
+            <Text style={styles.sectionTitle}>Primary Fitness Goal</Text>
+            <View style={styles.card}>
+              {FITNESS_GOAL_OPTIONS.map((option, index) => (
+                <React.Fragment key={option.value}>
+                  <TouchableOpacity
+                    style={styles.listItem}
+                    onPress={() => updateField('fitnessGoal', option.value)}
+                  >
+                    <View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}>
+                      <Ionicons name={option.icon as any} size={20} color={option.color} />
+                    </View>
+                    <Text style={styles.listItemText}>{option.label}</Text>
+                    {profileData.fitnessGoal === option.value && (
+                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                    )}
+                  </TouchableOpacity>
+                  {index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                </React.Fragment>
+              ))}
+            </View>
           </View>
 
+          {/* Activity Level */}
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Activity Level</Text>
+            <View style={styles.card}>
+              {ACTIVITY_LEVEL_OPTIONS.map((option, index) => (
+                <React.Fragment key={option.value}>
+                  <TouchableOpacity
+                    style={styles.listItem}
+                    onPress={() => updateField('activityLevel', option.value)}
+                  >
+                    <View style={{ flex: 1 }}>
+                      <Text style={styles.listItemText}>{option.label}</Text>
+                      <Text style={styles.listItemDescription}>{option.description}</Text>
+                    </View>
+                    {profileData.activityLevel === option.value && (
+                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                    )}
+                  </TouchableOpacity>
+                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                </React.Fragment>
+              ))}
+            </View>
+          </View>
+
+          {/* Health Information */}
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Health Information (Optional)</Text>
+            <View style={styles.card}>
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Medical Conditions</Text>
+                <TextInput
+                  style={[styles.textArea]}
+                  value={profileData.medicalConditions || ''}
+                  onChangeText={(text) => updateField('medicalConditions', text)}
+                  placeholder="e.g., Asthma, diabetes..."
+                  placeholderTextColor={theme.colors.gray400}
+                  multiline
+                  numberOfLines={3}
+                  textAlignVertical="top"
+                />
+              </View>
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Allergies</Text>
+                <TextInput
+                  style={[styles.textArea]}
+                  value={profileData.allergies || ''}
+                  onChangeText={(text) => updateField('allergies', text)}
+                  placeholder="e.g., Peanuts, latex..."
+                  placeholderTextColor={theme.colors.gray400}
+                  multiline
+                  numberOfLines={3}
+                  textAlignVertical="top"
+                />
+              </View>
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Injuries</Text>
+                <TextInput
+                  style={[styles.textArea]}
+                  value={profileData.injuries || ''}
+                  onChangeText={(text) => updateField('injuries', text)}
+                  placeholder="e.g., Previous knee injury..."
+                  placeholderTextColor={theme.colors.gray400}
+                  multiline
+                  numberOfLines={3}
+                  textAlignVertical="top"
+                />
+              </View>
+            </View>
+          </View>
+        </ScrollView>
+
+        {/* Save Button */}
+        <View style={styles.footer}>
           <TouchableOpacity
             style={[styles.saveButton, loading && styles.saveButtonDisabled]}
             onPress={handleSave}
             disabled={loading}
           >
-            {loading ? (
-              <ActivityIndicator color="white" />
-            ) : (
-              <>
-                <Ionicons
-                  name="checkmark-circle-outline"
-                  size={20}
-                  color="white"
-                />
-                <Text style={styles.saveButtonText}>Save Profile</Text>
-              </>
-            )}
+            <LinearGradient colors={theme.gradients.primary} style={styles.saveButtonGradient}>
+              {loading ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <>
+                  <Ionicons name="checkmark-circle" size={20} color="#fff" />
+                  <Text style={styles.saveButtonText}>Save Profile</Text>
+                </>
+              )}
+            </LinearGradient>
           </TouchableOpacity>
         </View>
-      </ScrollView>
-    </View>
+      </View>
+    </>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#f9fafb",
+    backgroundColor: theme.colors.background,
   },
   loadingContainer: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#f9fafb",
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.background,
   },
   header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingTop: 60,
-    paddingBottom: 16,
-    backgroundColor: "white",
-    borderBottomWidth: 1,
-    borderBottomColor: "#e5e7eb",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: Platform.OS === 'ios' ? 60 : 40,
+    paddingBottom: 20,
+    paddingHorizontal: 20,
   },
   backButton: {
-    padding: 4,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   headerTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#1f2937",
-  },
-  headerSpacer: {
-    width: 32,
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: theme.typography.fontWeight.bold,
+    color: '#fff',
   },
   scrollView: {
     flex: 1,
   },
-  content: {
+  scrollContent: {
     padding: 20,
+    paddingBottom: 100,
   },
   section: {
     marginBottom: 24,
   },
   sectionTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#1f2937",
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.gray900,
+    marginBottom: 12,
+  },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: theme.borderRadius.xl,
+    padding: 16,
+    ...theme.shadows.subtle,
+    borderWidth: 1,
+    borderColor: theme.colors.gray100,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 12,
     marginBottom: 16,
   },
+  inputGroup: {
+    flex: 1,
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.gray700,
+    marginBottom: 8,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: theme.colors.gray50,
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.gray200,
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 12,
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.gray900,
+  },
   textArea: {
-    height: 80,
-    textAlignVertical: "top",
-    paddingTop: 12,
+    backgroundColor: theme.colors.gray50,
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.gray200,
+    padding: 12,
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.gray900,
+    minHeight: 80,
+  },
+  optionsRow: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  optionCard: {
+    flex: 1,
+    backgroundColor: '#fff',
+    borderRadius: theme.borderRadius.lg,
+    padding: 16,
+    alignItems: 'center',
+    gap: 8,
+    borderWidth: 2,
+    borderColor: theme.colors.gray200,
+    ...theme.shadows.subtle,
+  },
+  optionCardActive: {
+    borderColor: theme.colors.primary,
+    backgroundColor: `${theme.colors.primary}10`,
+  },
+  optionLabel: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium,
+    color: theme.colors.gray600,
+  },
+  optionLabelActive: {
+    color: theme.colors.primary,
+    fontWeight: theme.typography.fontWeight.bold,
+  },
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    gap: 12,
+  },
+  iconCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  listItemText: {
+    flex: 1,
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: theme.typography.fontWeight.medium,
+    color: theme.colors.gray900,
+  },
+  listItemDescription: {
+    fontSize: theme.typography.fontSize.xs,
+    color: theme.colors.gray500,
+    marginTop: 2,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: theme.colors.gray100,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 20,
+    paddingBottom: Platform.OS === 'ios' ? 40 : 20,
+    backgroundColor: '#fff',
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.gray100,
+    ...theme.shadows.medium,
   },
   saveButton: {
-    backgroundColor: "#2563eb",
-    borderRadius: 8,
-    padding: 16,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 8,
-    marginBottom: 40,
+    borderRadius: theme.borderRadius.lg,
+    overflow: 'hidden',
+  },
+  saveButtonGradient: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 16,
+    gap: 8,
   },
   saveButtonDisabled: {
     opacity: 0.6,
   },
   saveButtonText: {
-    color: "white",
-    fontSize: 16,
-    fontWeight: "600",
-    marginLeft: 8,
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: '#fff',
   },
 });

apps/mobile/src/app/personal-details.tsx

@@ -0,0 +1,269 @@
+import React, { useState } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    ScrollView,
+    TouchableOpacity,
+    TextInput,
+    Alert,
+    Platform,
+} from 'react-native';
+import { useRouter, Stack } from 'expo-router';
+import { useUser } from '@clerk/clerk-expo';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { theme } from '../styles/theme';
+
+export default function PersonalDetailsScreen() {
+    const router = useRouter();
+    const { user } = useUser();
+    const [loading, setLoading] = useState(false);
+
+    // Initialize with current user data
+    const [formData, setFormData] = useState({
+        firstName: user?.firstName || '',
+        lastName: user?.lastName || '',
+        email: user?.primaryEmailAddress?.emailAddress || '',
+        phone: user?.primaryPhoneNumber?.phoneNumber || '',
+    });
+
+    const handleSave = async () => {
+        setLoading(true);
+        try {
+            // Update user profile via Clerk
+            await user?.update({
+                firstName: formData.firstName,
+                lastName: formData.lastName,
+            });
+
+            Alert.alert('Success', 'Personal details updated successfully', [
+                { text: 'OK', onPress: () => router.back() },
+            ]);
+        } catch (error) {
+            console.error('Error updating personal details:', error);
+            Alert.alert('Error', 'Failed to update personal details. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const updateField = (field: string, value: string) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+
+    return (
+        <>
+            <Stack.Screen options={{ headerShown: false }} />
+            <View style={styles.container}>
+                {/* Header */}
+                <LinearGradient
+                    colors={theme.gradients.primary}
+                    style={styles.header}
+                >
+                    <TouchableOpacity
+                        style={styles.backButton}
+                        onPress={() => router.back()}
+                    >
+                        <Ionicons name="arrow-back" size={24} color="#fff" />
+                    </TouchableOpacity>
+                    <Text style={styles.headerTitle}>Personal Details</Text>
+                    <View style={{ width: 40 }} />
+                </LinearGradient>
+
+                <ScrollView
+                    style={styles.content}
+                    contentContainerStyle={styles.scrollContent}
+                    showsVerticalScrollIndicator={false}
+                >
+                    {/* First Name */}
+                    <View style={styles.field}>
+                        <Text style={styles.label}>First Name *</Text>
+                        <View style={styles.inputContainer}>
+                            <Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
+                            <TextInput
+                                style={styles.input}
+                                value={formData.firstName}
+                                onChangeText={(value) => updateField('firstName', value)}
+                                placeholder="Enter first name"
+                                placeholderTextColor={theme.colors.gray400}
+                            />
+                        </View>
+                    </View>
+
+                    {/* Last Name */}
+                    <View style={styles.field}>
+                        <Text style={styles.label}>Last Name *</Text>
+                        <View style={styles.inputContainer}>
+                            <Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
+                            <TextInput
+                                style={styles.input}
+                                value={formData.lastName}
+                                onChangeText={(value) => updateField('lastName', value)}
+                                placeholder="Enter last name"
+                                placeholderTextColor={theme.colors.gray400}
+                            />
+                        </View>
+                    </View>
+
+                    {/* Email (Read-only) */}
+                    <View style={styles.field}>
+                        <Text style={styles.label}>Email</Text>
+                        <View style={[styles.inputContainer, styles.disabledInput]}>
+                            <Ionicons name="mail-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
+                            <TextInput
+                                style={[styles.input, styles.disabledText]}
+                                value={formData.email}
+                                editable={false}
+                                placeholderTextColor={theme.colors.gray400}
+                            />
+                            <Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
+                        </View>
+                        <Text style={styles.helperText}>Email cannot be changed here</Text>
+                    </View>
+
+                    {/* Phone (Read-only for now) */}
+                    <View style={styles.field}>
+                        <Text style={styles.label}>Phone Number</Text>
+                        <View style={[styles.inputContainer, styles.disabledInput]}>
+                            <Ionicons name="call-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
+                            <TextInput
+                                style={[styles.input, styles.disabledText]}
+                                value={formData.phone || 'Not set'}
+                                editable={false}
+                                placeholderTextColor={theme.colors.gray400}
+                            />
+                            <Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
+                        </View>
+                        <Text style={styles.helperText}>Phone number cannot be changed here</Text>
+                    </View>
+                </ScrollView>
+
+                {/* Save Button */}
+                <View style={styles.footer}>
+                    <TouchableOpacity
+                        style={[styles.saveButton, loading && styles.saveButtonDisabled]}
+                        onPress={handleSave}
+                        disabled={loading}
+                    >
+                        <LinearGradient
+                            colors={theme.gradients.primary}
+                            style={styles.saveButtonGradient}
+                        >
+                            <Ionicons name="checkmark-circle" size={20} color="#fff" />
+                            <Text style={styles.saveButtonText}>
+                                {loading ? 'Saving...' : 'Save Changes'}
+                            </Text>
+                        </LinearGradient>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: Platform.OS === 'ios' ? 60 : 40,
+        paddingBottom: 20,
+        paddingHorizontal: 20,
+    },
+    backButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    headerTitle: {
+        fontSize: theme.typography.fontSize['2xl'],
+        fontWeight: theme.typography.fontWeight.bold,
+        color: '#fff',
+    },
+    content: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 20,
+        paddingBottom: 100,
+    },
+    field: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.semibold,
+        color: theme.colors.gray700,
+        marginBottom: 8,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        borderRadius: theme.borderRadius.lg,
+        borderWidth: 1,
+        borderColor: theme.colors.gray200,
+        paddingHorizontal: 16,
+        ...theme.shadows.subtle,
+    },
+    inputIcon: {
+        marginRight: 12,
+    },
+    input: {
+        flex: 1,
+        paddingVertical: 16,
+        fontSize: theme.typography.fontSize.base,
+        color: theme.colors.gray900,
+    },
+    disabledInput: {
+        backgroundColor: theme.colors.gray50,
+    },
+    disabledText: {
+        color: theme.colors.gray500,
+    },
+    helperText: {
+        fontSize: theme.typography.fontSize.xs,
+        color: theme.colors.gray500,
+        marginTop: 6,
+        marginLeft: 4,
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: 20,
+        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
+        backgroundColor: '#fff',
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.gray100,
+        ...theme.shadows.medium,
+    },
+    saveButton: {
+        borderRadius: theme.borderRadius.lg,
+        overflow: 'hidden',
+    },
+    saveButtonGradient: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 16,
+        gap: 8,
+    },
+    saveButtonDisabled: {
+        opacity: 0.6,
+    },
+    saveButtonText: {
+        fontSize: theme.typography.fontSize.base,
+        fontWeight: theme.typography.fontWeight.bold,
+        color: '#fff',
+    },
+});