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

@@ -103,22 +103,20 @@ export default function AttendanceScreen() {
     >
       {/* Header */}
       <View style={styles.header}>
-        <Text
+        <Text style={[typography.h1, { color: colors.textPrimary }]}>
-          style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
+          📍 Attendance
-        >
-          Attendance
         </Text>
         <Text
           style={[
             typography.body,
-            { color: colors.textSecondary, marginTop: 8 },
+            { color: colors.textSecondary, marginTop: 4 },
           ]}
         >
           {activeCheckIn
-            ? "You're crushing it today!"
+            ? "You're crushing it today! 💪"
             : history.length === 0
-              ? "Ready to start your fitness journey?"
+              ? "Ready to start your fitness journey? 🚀"
-              : "Track your gym visits and build streaks!"}
+              : "Track your gym visits and build streaks! 🔥"}
         </Text>
       </View>
 

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

@@ -150,26 +150,21 @@ export default function GoalsScreen() {
       >
         {/* Header */}
         <View style={styles.header}>
-          <View style={{ flex: 1 }}>
+          <View>
-            <Text
+            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              style={[
+              🎯 Fitness Goals
-                typography.h1,
-                { color: colors.textPrimary, fontSize: 32 },
-              ]}
-            >
-              Goals
             </Text>
             <Text
               style={[
                 typography.body,
-                { color: colors.textSecondary, marginTop: 8 },
+                { color: colors.textSecondary, marginTop: 4 },
               ]}
             >
               {activeGoals.length === 0
-                ? "Ready to crush some goals?"
+                ? "Ready to crush some goals? 💪"
                 : activeGoals.length === 1
-                  ? "You're on a mission! Keep it up!"
+                  ? "You're on a mission! Keep it up! 🚀"
-                  : `${activeGoals.length} goals in progress. Let's go!`}
+                  : `${activeGoals.length} goals in progress. Legend! ⭐`}
             </Text>
           </View>
           <TouchableOpacity
@@ -188,69 +183,45 @@ export default function GoalsScreen() {
         {goals && goals.length > 0 && (
           <View style={styles.section}>
             <View style={styles.statsRow}>
-              <MinimalCard
+              <MinimalCard variant="bordered" style={styles.statCard}>
-                variant="elevated"
+                <Text style={[typography.stat, { color: colors.primary }]}>
-                style={[styles.statCard, { backgroundColor: colors.primary }]}
-              >
-                <Text
-                  style={[
-                    typography.statLarge,
-                    { color: colors.white, fontSize: 36 },
-                  ]}
-                >
                   {activeGoals.length}
                 </Text>
                 <Text
                   style={[
-                    typography.label,
+                    typography.caption,
-                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+                    { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  ACTIVE
+                  🎯 Active
                 </Text>
               </MinimalCard>
 
-              <MinimalCard
+              <MinimalCard variant="bordered" style={styles.statCard}>
-                variant="elevated"
+                <Text style={[typography.stat, { color: colors.success }]}>
-                style={[styles.statCard, { backgroundColor: colors.success }]}
-              >
-                <Text
-                  style={[
-                    typography.statLarge,
-                    { color: colors.white, fontSize: 36 },
-                  ]}
-                >
                   {completedGoals.length}
                 </Text>
                 <Text
                   style={[
-                    typography.label,
+                    typography.caption,
-                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+                    { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  COMPLETED
+                  {completedGoals.length >= 5 ? "🏆" : "✅"} Completed
                 </Text>
               </MinimalCard>
 
-              <MinimalCard
+              <MinimalCard variant="bordered" style={styles.statCard}>
-                variant="elevated"
+                <Text style={[typography.stat, { color: colors.textPrimary }]}>
-                style={[styles.statCard, { backgroundColor: colors.accent }]}
-              >
-                <Text
-                  style={[
-                    typography.statLarge,
-                    { color: colors.white, fontSize: 36 },
-                  ]}
-                >
                   {avgProgress}%
                 </Text>
                 <Text
                   style={[
-                    typography.label,
+                    typography.caption,
-                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+                    { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  PROGRESS
+                  {avgProgress >= 75 ? "🔥" : "📊"} Progress
                 </Text>
               </MinimalCard>
             </View>
@@ -258,104 +229,66 @@ export default function GoalsScreen() {
         )}
 
         {/* Analytics Section */}
-        {statistics &&
+        {statistics && (
-          (statistics.weeklyTrend.length > 0 ||
+          <View style={styles.section}>
-            statistics.goals.goalsByType.length > 0) && (
+            <MinimalCard variant="default">
-            <View style={styles.section}>
               <TouchableOpacity
+                style={styles.analyticsHeader}
                 onPress={() => setShowAnalytics(!showAnalytics)}
-                activeOpacity={0.85}
+                activeOpacity={0.7}
               >
-                <MinimalCard variant="elevated" style={styles.analyticsCard}>
+                <View style={styles.analyticsHeaderLeft}>
-                  <View style={styles.analyticsHeader}>
+                  <Ionicons
-                    <View style={styles.analyticsHeaderLeft}>
+                    name="bar-chart-outline"
-                      <View
+                    size={20}
-                        style={[
+                    color={colors.primary}
-                          styles.analyticsIcon,
+                  />
-                          { backgroundColor: `${colors.primary}15` },
+                  <Text
-                        ]}
+                    style={[
-                      >
+                      typography.h3,
-                        <Ionicons
+                      { color: colors.textPrimary, marginLeft: 8 },
-                          name="bar-chart"
+                    ]}
-                          size={24}
+                  >
-                          color={colors.primary}
+                    📈 Progress Analytics
-                        />
+                  </Text>
-                      </View>
+                </View>
-                      <View>
+                <Ionicons
-                        <Text
+                  name={showAnalytics ? "chevron-up" : "chevron-down"}
-                          style={[typography.h3, { color: colors.textPrimary }]}
+                  size={20}
-                        >
+                  color={colors.textTertiary}
-                          Progress Analytics
+                />
-                        </Text>
-                        <Text
-                          style={[
-                            typography.caption,
-                            { color: colors.textTertiary, marginTop: 2 },
-                          ]}
-                        >
-                          {showAnalytics ? "Tap to collapse" : "Tap to expand"}
-                        </Text>
-                      </View>
-                    </View>
-                    <View
-                      style={[
-                        styles.analyticsToggle,
-                        { backgroundColor: colors.surfaceElevated },
-                      ]}
-                    >
-                      <Ionicons
-                        name={showAnalytics ? "chevron-up" : "chevron-down"}
-                        size={20}
-                        color={colors.textSecondary}
-                      />
-                    </View>
-                  </View>
-
-                  {showAnalytics && (
-                    <View style={styles.analyticsContent}>
-                      {statistics.weeklyTrend.length > 0 && (
-                        <View style={styles.chartSection}>
-                          <Text
-                            style={[
-                              typography.h4,
-                              { color: colors.textPrimary, marginBottom: 16 },
-                            ]}
-                          >
-                            Weekly Trend
-                          </Text>
-                          <WeeklyProgressChart
-                            weeklyData={statistics.weeklyTrend}
-                          />
-                        </View>
-                      )}
-                      {statistics.goals.goalsByType.length > 0 && (
-                        <View style={styles.chartSection}>
-                          <Text
-                            style={[
-                              typography.h4,
-                              { color: colors.textPrimary, marginBottom: 16 },
-                            ]}
-                          >
-                            Goals by Type
-                          </Text>
-                          <GoalTypeBreakdownChart
-                            data={statistics.goals.goalsByType}
-                          />
-                        </View>
-                      )}
-                    </View>
-                  )}
-                </MinimalCard>
               </TouchableOpacity>
-            </View>
+
-          )}
+              {showAnalytics && (
+                <View
+                  style={[
+                    styles.analyticsContent,
+                    { borderTopColor: colors.border },
+                  ]}
+                >
+                  {statistics.weeklyTrend.length > 0 && (
+                    <WeeklyProgressChart
+                      weeklyData={statistics.weeklyTrend}
+                      title="8-Week Trend"
+                    />
+                  )}
+                  {statistics.goals.goalsByType.length > 0 && (
+                    <GoalTypeBreakdownChart
+                      data={statistics.goals.goalsByType}
+                      title="Goals by Type"
+                    />
+                  )}
+                </View>
+              )}
+            </MinimalCard>
+          </View>
+        )}
 
         {/* Active Goals */}
         <View style={styles.section}>
           <SectionHeader
-            title={`Active Goals (${activeGoals.length})`}
+            title={`🚀 Active Goals (${activeGoals.length})`}
-            subtitle="Keep pushing forward!"
+            actionLabel="Add New"
-            actionLabel="+ Add New"
             onActionPress={() => setIsModalVisible(true)}
           />
           {activeGoals.length === 0 ? (
@@ -398,8 +331,7 @@ export default function GoalsScreen() {
         {completedGoals.length > 0 && (
           <View style={styles.section}>
             <SectionHeader
-              title={`Completed (${completedGoals.length})`}
+              title={`✨ Completed Goals (${completedGoals.length})`}
-              subtitle="Great work!"
             />
             <View style={styles.goalsList}>
               {completedGoals.map((goal) => (
@@ -454,15 +386,15 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "flex-start",
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
     paddingTop: 60,
-    paddingBottom: 20,
+    paddingBottom: 24,
   },
   debugButton: {
     padding: 8,
   },
   section: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
     marginBottom: 24,
   },
   statsRow: {
@@ -473,12 +405,8 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     paddingVertical: 20,
-    paddingHorizontal: 12,
     borderRadius: 20,
   },
-  analyticsCard: {
-    padding: 20,
-  },
   analyticsHeader: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -488,32 +416,13 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  analyticsIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 14,
-    justifyContent: "center",
-    alignItems: "center",
-    marginRight: 14,
-  },
-  analyticsToggle: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
   analyticsContent: {
-    paddingTop: 24,
+    paddingTop: 16,
-    marginTop: 20,
+    marginTop: 16,
     borderTopWidth: 1,
-    borderTopColor: "rgba(0,0,0,0.05)",
-  },
-  chartSection: {
-    marginBottom: 20,
   },
   goalsList: {
-    gap: 16,
+    gap: 12,
   },
   emptyState: {
     alignItems: "center",
@@ -524,18 +433,18 @@ const styles = StyleSheet.create({
   },
   fabContainer: {
     position: "absolute",
-    right: 20,
+    right: 24,
     bottom: 90,
   },
   fab: {
-    width: 64,
+    width: 56,
-    height: 64,
+    height: 56,
-    borderRadius: 22,
+    borderRadius: 28,
     justifyContent: "center",
     alignItems: "center",
-    shadowOffset: { width: 0, height: 6 },
+    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.35,
+    shadowOpacity: 0.2,
-    shadowRadius: 12,
+    shadowRadius: 8,
-    elevation: 8,
+    elevation: 4,
   },
 });

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

@@ -19,7 +19,6 @@ import { MinimalButton } from "../../components/MinimalButton";
 import { Badge } from "../../components/Badge";
 import { IconContainer } from "../../components/IconContainer";
 import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
-import { fitnessProfileApi, FitnessProfile } from "../../api/fitnessProfile";
 import log from "../../utils/logger";
 
 export default function ProfileScreen() {
@@ -36,11 +35,6 @@ export default function ProfileScreen() {
   const [selectedGymId, setSelectedGymId] = useState<string | null>(null);
   const [currentGymId, setCurrentGymId] = useState<string | null>(null);
   const [currentGymName, setCurrentGymName] = useState<string | null>(null);
-  const [showGymDropdown, setShowGymDropdown] = useState(false);
-  const [fitnessProfile, setFitnessProfile] = useState<FitnessProfile | null>(
-    null,
-  );
-  const [profileLoading, setProfileLoading] = useState(false);
 
   useEffect(() => {
     const gid =
@@ -55,23 +49,8 @@ export default function ProfileScreen() {
 
   useEffect(() => {
     loadGyms();
-    loadFitnessProfile();
   }, []);
 
-  const loadFitnessProfile = async () => {
-    try {
-      setProfileLoading(true);
-      const token = await getToken();
-      if (!token) return;
-      const profile = await fitnessProfileApi.getFitnessProfile(token);
-      setFitnessProfile(profile);
-    } catch (error) {
-      log.error("Failed to load fitness profile", error);
-    } finally {
-      setProfileLoading(false);
-    }
-  };
-
   const loadGyms = async () => {
     try {
       setGymsLoading(true);
@@ -136,12 +115,8 @@ export default function ProfileScreen() {
   const handleApplyGym = async () => {
     try {
       const token = await getToken();
-      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS.GYM}`;
+      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS}/gym`;
-      log.debug("Updating gym selection", {
+      log.debug("Updating gym selection", { url, gymId: selectedGymId });
-        url,
-        gymId: selectedGymId,
-        token: token ? "present" : "missing",
-      });
       const res = await fetch(url, {
         method: "PATCH",
         headers: {
@@ -238,10 +213,7 @@ export default function ProfileScreen() {
       contentContainerStyle={styles.content}
     >
       {/* Header Card */}
-      <MinimalCard
+      <MinimalCard variant="elevated" style={styles.profileCard}>
-        variant="elevated"
-        style={[styles.profileCard, { backgroundColor: colors.primary }]}
-      >
         <View style={styles.avatarContainer}>
           {user?.imageUrl ? (
             <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
@@ -249,36 +221,29 @@ export default function ProfileScreen() {
             <View
               style={[
                 styles.placeholderAvatar,
-                {
+                { backgroundColor: colors.primary },
-                  backgroundColor: colors.white,
-                  borderWidth: 3,
-                  borderColor: colors.white,
-                },
               ]}
             >
-              <Ionicons name="person" size={40} color={colors.primary} />
+              <Ionicons name="person" size={40} color={colors.white} />
             </View>
           )}
         </View>
         <Text
-          style={[
+          style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
-            typography.h1,
-            { color: colors.white, marginTop: 16, fontSize: 28 },
-          ]}
         >
           {user?.fullName || "User"}
         </Text>
         <Text
           style={[
             typography.body,
-            { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+            { color: colors.textSecondary, marginTop: 4 },
           ]}
         >
           {user?.primaryEmailAddress?.emailAddress}
         </Text>
         <Badge
           label="Premium Member"
-          variant="success"
+          variant="primary"
           style={{ marginTop: 12 }}
         />
       </MinimalCard>
@@ -356,145 +321,29 @@ export default function ProfileScreen() {
             onPress={() => router.push("/personal-details")}
           />
           <View style={[styles.divider, { backgroundColor: colors.border }]} />
-
+          <ListItem
-          {/* Fitness Profile Card */}
+            title="Fitness Profile"
-          <TouchableOpacity
+            leftIcon={
+              <IconContainer
+                variant="colored"
+                backgroundColor={`${colors.success}20`}
+              >
+                <Ionicons
+                  name="fitness-outline"
+                  size={20}
+                  color={colors.success}
+                />
+              </IconContainer>
+            }
+            rightElement={
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={colors.textTertiary}
+              />
+            }
             onPress={() => router.push("/fitness-profile")}
-            activeOpacity={0.85}
+          />
-          >
-            <MinimalCard variant="elevated" style={styles.fitnessProfileCard}>
-              <View style={styles.fitnessProfileHeader}>
-                <View
-                  style={[
-                    styles.fitnessProfileIcon,
-                    { backgroundColor: colors.success },
-                  ]}
-                >
-                  <Ionicons name="fitness" size={24} color={colors.white} />
-                </View>
-                <View style={{ flex: 1, marginLeft: 14 }}>
-                  <Text style={[typography.h4, { color: colors.textPrimary }]}>
-                    Fitness Profile
-                  </Text>
-                  <Text
-                    style={[
-                      typography.caption,
-                      { color: colors.textTertiary, marginTop: 2 },
-                    ]}
-                  >
-                    {fitnessProfile ? "Tap to edit" : "Set up your profile"}
-                  </Text>
-                </View>
-                <View
-                  style={[
-                    styles.editButton,
-                    { backgroundColor: colors.primary },
-                  ]}
-                >
-                  <Ionicons name="pencil" size={16} color={colors.white} />
-                </View>
-              </View>
-
-              {profileLoading ? (
-                <View style={styles.profileLoading}>
-                  <ActivityIndicator color={colors.primary} />
-                </View>
-              ) : fitnessProfile ? (
-                <View
-                  style={[
-                    styles.fitnessProfileStats,
-                    { borderTopColor: colors.border },
-                  ]}
-                >
-                  <View style={styles.profileStat}>
-                    <Text
-                      style={[
-                        typography.statLarge,
-                        { color: colors.primary, fontSize: 28 },
-                      ]}
-                    >
-                      {fitnessProfile.height || "-"}
-                    </Text>
-                    <Text
-                      style={[
-                        typography.caption,
-                        { color: colors.textTertiary },
-                      ]}
-                    >
-                      Height (cm)
-                    </Text>
-                  </View>
-                  <View
-                    style={[
-                      styles.profileStatDivider,
-                      { backgroundColor: colors.border },
-                    ]}
-                  />
-                  <View style={styles.profileStat}>
-                    <Text
-                      style={[
-                        typography.statLarge,
-                        { color: colors.success, fontSize: 28 },
-                      ]}
-                    >
-                      {fitnessProfile.weight || "-"}
-                    </Text>
-                    <Text
-                      style={[
-                        typography.caption,
-                        { color: colors.textTertiary },
-                      ]}
-                    >
-                      Weight (kg)
-                    </Text>
-                  </View>
-                  <View
-                    style={[
-                      styles.profileStatDivider,
-                      { backgroundColor: colors.border },
-                    ]}
-                  />
-                  <View style={styles.profileStat}>
-                    <Text
-                      style={[
-                        typography.statLarge,
-                        { color: colors.warning, fontSize: 28 },
-                      ]}
-                    >
-                      {fitnessProfile.age || "-"}
-                    </Text>
-                    <Text
-                      style={[
-                        typography.caption,
-                        { color: colors.textTertiary },
-                      ]}
-                    >
-                      Age
-                    </Text>
-                  </View>
-                </View>
-              ) : (
-                <View
-                  style={[styles.noProfile, { borderTopColor: colors.border }]}
-                >
-                  <Text
-                    style={[typography.body, { color: colors.textSecondary }]}
-                  >
-                    Complete your fitness profile to get personalized
-                    recommendations
-                  </Text>
-                  <MinimalButton
-                    title="Set Up Profile"
-                    variant="primary"
-                    size="sm"
-                    style={{ marginTop: 12 }}
-                    onPress={() => router.push("/fitness-profile")}
-                  />
-                </View>
-              )}
-            </MinimalCard>
-          </TouchableOpacity>
-
           <View style={[styles.divider, { backgroundColor: colors.border }]} />
           <ListItem
             title="Notifications"
@@ -523,71 +372,65 @@ export default function ProfileScreen() {
 
       {/* Gym Selection */}
       <View style={styles.section}>
-        <Text
+        <View style={styles.sectionHeader}>
-          style={[
+          <Text style={[typography.h3, { color: colors.textPrimary }]}>
-            typography.h3,
+            Gym Selection
-            { color: colors.textPrimary, marginBottom: 12 },
+          </Text>
-          ]}
+          <TouchableOpacity onPress={loadGyms}>
-        >
+            <Text
-          Gym Selection
+              style={[
-        </Text>
+                typography.body,
-
+                { color: colors.primary, fontWeight: "600" },
-        <TouchableOpacity
+              ]}
-          onPress={() => setShowGymDropdown(!showGymDropdown)}
+            >
-          activeOpacity={0.85}
+              Refresh
-        >
+            </Text>
-          <MinimalCard variant="bordered" style={styles.dropdownCard}>
+          </TouchableOpacity>
-            <View style={styles.dropdownHeader}>
+        </View>
-              <View>
+        <MinimalCard variant="default">
-                <Text
+          {currentGymName && (
-                  style={[typography.caption, { color: colors.textTertiary }]}
+            <View style={styles.currentGym}>
-                >
+              <Text
-                  Current Gym
+                style={[typography.caption, { color: colors.textTertiary }]}
-                </Text>
+              >
-                <Text
+                Current Gym
-                  style={[
+              </Text>
-                    typography.bodyEmphasis,
+              <Text
-                    { color: colors.textPrimary, marginTop: 2 },
-                  ]}
-                >
-                  {currentGymName || "No gym selected"}
-                </Text>
-              </View>
-              <View
                 style={[
-                  styles.dropdownIcon,
+                  typography.h3,
-                  { backgroundColor: colors.surfaceElevated },
+                  { color: colors.textPrimary, marginTop: 4 },
                 ]}
               >
-                <Ionicons
+                {currentGymName}
-                  name={showGymDropdown ? "chevron-up" : "chevron-down"}
+              </Text>
-                  size={20}
-                  color={colors.textSecondary}
-                />
-              </View>
             </View>
-          </MinimalCard>
+          )}
-        </TouchableOpacity>
 
-        {showGymDropdown && (
+          {gymsLoading ? (
-          <MinimalCard variant="elevated" style={styles.dropdownOptions}>
+            <View style={styles.loadingContainer}>
-            {gymsLoading ? (
+              <ActivityIndicator color={colors.primary} />
-              <View style={styles.loadingContainer}>
+            </View>
-                <ActivityIndicator color={colors.primary} />
+          ) : (
-              </View>
+            <>
-            ) : (
+              <ScrollView
-              <>
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                style={styles.gymScroll}
+                contentContainerStyle={styles.gymScrollContent}
+              >
                 <TouchableOpacity
                   style={[
-                    styles.dropdownOption,
+                    styles.gymChip,
-                    selectedGymId === null && {
+                    {
-                      backgroundColor: `${colors.primary}15`,
+                      backgroundColor:
+                        selectedGymId === null
+                          ? `${colors.primary}20`
+                          : colors.surfaceElevated,
+                      borderColor:
+                        selectedGymId === null ? colors.primary : colors.border,
                     },
                   ]}
-                  onPress={() => {
+                  onPress={() => setSelectedGymId(null)}
-                    setSelectedGymId(null);
-                    setShowGymDropdown(false);
-                  }}
                 >
                   <Text
                     style={[
@@ -603,78 +446,51 @@ export default function ProfileScreen() {
                   >
                     No Gym
                   </Text>
-                  {selectedGymId === null && (
-                    <Ionicons
-                      name="checkmark"
-                      size={20}
-                      color={colors.primary}
-                    />
-                  )}
                 </TouchableOpacity>
                 {gyms.map((gym) => (
                   <TouchableOpacity
                     key={gym.id}
                     style={[
-                      styles.dropdownOption,
+                      styles.gymChip,
-                      selectedGymId === gym.id && {
+                      {
-                        backgroundColor: `${colors.primary}15`,
+                        backgroundColor:
+                          selectedGymId === gym.id
+                            ? `${colors.primary}20`
+                            : colors.surfaceElevated,
+                        borderColor:
+                          selectedGymId === gym.id
+                            ? colors.primary
+                            : colors.border,
                       },
                     ]}
-                    onPress={() => {
+                    onPress={() => setSelectedGymId(gym.id)}
-                      setSelectedGymId(gym.id);
-                      setShowGymDropdown(false);
-                    }}
                   >
-                    <View style={{ flex: 1 }}>
+                    <Text
-                      <Text
+                      style={[
-                        style={[
+                        typography.body,
-                          typography.body,
+                        {
-                          {
+                          color:
-                            color:
+                            selectedGymId === gym.id
-                              selectedGymId === gym.id
+                              ? colors.primary
-                                ? colors.primary
+                              : colors.textSecondary,
-                                : colors.textSecondary,
+                          fontWeight: selectedGymId === gym.id ? "600" : "400",
-                            fontWeight:
+                        },
-                              selectedGymId === gym.id ? "600" : "400",
+                      ]}
-                          },
+                    >
-                        ]}
+                      {gym.name}
-                      >
+                    </Text>
-                        {gym.name}
-                      </Text>
-                      {gym.location && (
-                        <Text
-                          style={[
-                            typography.caption,
-                            { color: colors.textTertiary, marginTop: 2 },
-                          ]}
-                        >
-                          {gym.location}
-                        </Text>
-                      )}
-                    </View>
-                    {selectedGymId === gym.id && (
-                      <Ionicons
-                        name="checkmark"
-                        size={20}
-                        color={colors.primary}
-                      />
-                    )}
                   </TouchableOpacity>
                 ))}
-                {selectedGymId !== currentGymId && (
+              </ScrollView>
-                  <MinimalButton
+              <MinimalButton
-                    title="Apply Selection"
+                title="Apply Selection"
-                    onPress={handleApplyGym}
+                onPress={handleApplyGym}
-                    variant="primary"
+                variant="primary"
-                    size="lg"
+                style={{ marginTop: 16 }}
-                    fullWidth
+              />
-                    style={{ marginTop: 12 }}
+            </>
-                  />
+          )}
-                )}
+        </MinimalCard>
-              </>
-            )}
-          </MinimalCard>
-        )}
       </View>
 
       {/* Support */}
@@ -764,9 +580,8 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    padding: 20,
+    padding: 24,
     paddingTop: 60,
-    paddingBottom: 100,
   },
   profileCard: {
     alignItems: "center",
@@ -825,78 +640,4 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     marginRight: 8,
   },
-  dropdownCard: {
-    padding: 16,
-  },
-  dropdownHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  dropdownIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  dropdownOptions: {
-    marginTop: 8,
-    padding: 8,
-  },
-  dropdownOption: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 14,
-    paddingHorizontal: 16,
-    borderRadius: 12,
-    marginBottom: 4,
-  },
-  fitnessProfileCard: {
-    padding: 16,
-  },
-  fitnessProfileHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  fitnessProfileIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 14,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  editButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  profileLoading: {
-    paddingVertical: 20,
-    alignItems: "center",
-  },
-  fitnessProfileStats: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    marginTop: 20,
-    paddingTop: 16,
-    borderTopWidth: 1,
-  },
-  profileStat: {
-    alignItems: "center",
-    flex: 1,
-  },
-  profileStatDivider: {
-    width: 1,
-    height: 40,
-  },
-  noProfile: {
-    marginTop: 16,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    alignItems: "center",
-  },
 });

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

@@ -130,24 +130,19 @@ export default function RecommendationsScreen() {
       >
         {/* Header */}
         <View style={styles.header}>
-          <View style={{ flex: 1 }}>
+          <View>
-            <Text
+            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              style={[
+              ✨ AI Recommendations
-                typography.h1,
-                { color: colors.textPrimary, fontSize: 32 },
-              ]}
-            >
-              Recommendations
             </Text>
             <Text
               style={[
                 typography.body,
-                { color: colors.textSecondary, marginTop: 8 },
+                { color: colors.textSecondary, marginTop: 4 },
               ]}
             >
               {recommendations.length === 0
-                ? "Let's create your perfect plan!"
+                ? "Let's create your perfect plan! 🚀"
-                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
+                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`}
             </Text>
           </View>
           <TouchableOpacity
@@ -157,10 +152,9 @@ export default function RecommendationsScreen() {
           >
             <IconContainer
               variant="colored"
-              backgroundColor={colors.accent}
+              backgroundColor={`${colors.accent}20`}
-              size="lg"
             >
-              <Ionicons name="sparkles" size={24} color={colors.white} />
+              <Ionicons name="sparkles" size={24} color={colors.accent} />
               {unreadCount > 0 && (
                 <View
                   style={[
@@ -180,11 +174,10 @@ export default function RecommendationsScreen() {
         {/* Generate Button */}
         <View style={styles.section}>
           <MinimalButton
-            title="Generate New Plan"
+            title="🎯 Generate New Plan"
             onPress={handleGenerateRecommendation}
             variant="primary"
             size="lg"
-            fullWidth
             loading={generating}
             disabled={generating}
             textStyle={{ fontSize: 16 }}

apps/mobile/src/components/ActivityRing.tsx

@@ -1,128 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { View, Animated, StyleSheet, Text } from "react-native";
-import Svg, { Circle } from "react-native-svg";
-import { useTheme } from "../contexts/ThemeContext";
-
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-
-interface ActivityRingProps {
-  size?: number;
-  strokeWidth?: number;
-  progress: number;
-  current: number;
-  goal: number;
-  label: string;
-  color: string;
-  icon?: React.ReactNode;
-}
-
-export function ActivityRing({
-  size = 100,
-  strokeWidth = 10,
-  progress,
-  current,
-  goal,
-  label,
-  color,
-  icon,
-}: ActivityRingProps) {
-  const { colors, typography } = useTheme();
-  const animatedValue = useRef(new Animated.Value(0)).current;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = radius * 2 * Math.PI;
-
-  useEffect(() => {
-    Animated.timing(animatedValue, {
-      toValue: Math.min(progress, 100),
-      duration: 1200,
-      useNativeDriver: true,
-    }).start();
-  }, [progress]);
-
-  const strokeDashoffset = animatedValue.interpolate({
-    inputRange: [0, 100],
-    outputRange: [circumference, 0],
-  });
-
-  return (
-    <View style={styles.container}>
-      <View
-        style={{
-          width: size,
-          height: size,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-          <Circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            stroke={colors.surfaceElevated}
-            strokeWidth={strokeWidth}
-            fill="transparent"
-          />
-          <AnimatedCircle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            stroke={color}
-            strokeWidth={strokeWidth}
-            fill="transparent"
-            strokeDasharray={circumference}
-            strokeDashoffset={strokeDashoffset}
-            strokeLinecap="round"
-            rotation="-90"
-            origin={`${size / 2}, ${size / 2}`}
-          />
-        </Svg>
-        <View
-          style={[
-            StyleSheet.absoluteFillObject,
-            { justifyContent: "center", alignItems: "center" },
-          ]}
-        >
-          {icon ? (
-            <View style={styles.iconContainer}>{icon}</View>
-          ) : (
-            <Text
-              style={[
-                typography.statLarge,
-                { color: colors.textPrimary, fontSize: size * 0.28 },
-              ]}
-            >
-              {Math.round(current)}
-            </Text>
-          )}
-        </View>
-      </View>
-      <Text
-        style={[
-          typography.label,
-          { color: colors.textTertiary, marginTop: 8, textAlign: "center" },
-        ]}
-      >
-        {label}
-      </Text>
-      <Text
-        style={[
-          typography.caption,
-          { color: colors.textSecondary, marginTop: 2 },
-        ]}
-      >
-        / {goal.toLocaleString()}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-  },
-  iconContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});

apps/mobile/src/components/Badge.tsx

@@ -10,41 +10,49 @@ type BadgeVariant =
   | "danger"
   | "info"
   | "primary";
-type BadgeSize = "sm" | "md" | "lg";
+type BadgeSize = "sm" | "md";
 
 interface BadgeProps {
   label: string;
   variant?: BadgeVariant;
   size?: BadgeSize;
   style?: StyleProp<ViewStyle>;
-  emoji?: string;
 }
 
+/**
+ * Badge - Pill-shaped status indicator
+ *
+ * Variants:
+ * - neutral: Gray badge for general labels
+ * - success: Green badge for positive status
+ * - warning: Orange/yellow badge for warnings
+ * - danger: Red badge for errors or critical status
+ * - info: Blue badge for informational status
+ * - primary: Primary color badge
+ *
+ * Sizes:
+ * - sm: 5px vertical, 10px horizontal, 11px font
+ * - md: 6px vertical, 12px horizontal, 13px font (default)
+ */
 export function Badge({
   label,
   variant = "neutral",
   size = "md",
   style,
-  emoji,
 }: BadgeProps) {
   const { colors } = useTheme();
 
   const sizeStyles = {
     sm: {
-      paddingVertical: 6,
+      paddingVertical: 5,
-      paddingHorizontal: 12,
+      paddingHorizontal: 10,
       fontSize: fontSize.xs,
     },
     md: {
-      paddingVertical: 8,
+      paddingVertical: 6,
-      paddingHorizontal: 14,
+      paddingHorizontal: 12,
       fontSize: fontSize.sm,
     },
-    lg: {
-      paddingVertical: 10,
-      paddingHorizontal: 18,
-      fontSize: fontSize.base,
-    },
   };
 
   const variantStyles: Record<
@@ -56,24 +64,24 @@ export function Badge({
       color: colors.textSecondary,
     },
     success: {
-      backgroundColor: colors.success,
+      backgroundColor: `${colors.success}20`, // 20% opacity
-      color: colors.white,
+      color: colors.success,
     },
     warning: {
-      backgroundColor: colors.warning,
+      backgroundColor: `${colors.warning}20`,
-      color: colors.black,
+      color: colors.warning,
     },
     danger: {
-      backgroundColor: colors.danger,
+      backgroundColor: `${colors.danger}20`,
-      color: colors.white,
+      color: colors.danger,
     },
     info: {
-      backgroundColor: colors.info,
+      backgroundColor: `${colors.info}20`,
-      color: colors.white,
+      color: colors.info,
     },
     primary: {
-      backgroundColor: colors.primary,
+      backgroundColor: `${colors.primary}20`,
-      color: colors.white,
+      color: colors.primary,
     },
   };
 
@@ -95,11 +103,10 @@ export function Badge({
           {
             color: variantStyles[variant].color,
             fontSize: sizeStyles[size].fontSize,
-            fontWeight: fontWeight.bold,
+            fontWeight: fontWeight.medium,
           },
         ]}
       >
-        {emoji && `${emoji} `}
         {label}
       </Text>
     </View>
@@ -108,7 +115,7 @@ export function Badge({
 
 const styles = StyleSheet.create({
   badge: {
-    borderRadius: 12,
+    borderRadius: 999, // Full pill shape
     alignSelf: "flex-start",
   },
   label: {

apps/mobile/src/components/CustomTabBar.tsx

@@ -1,10 +1,21 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../contexts/ThemeContext";
 
+/**
+ * CustomTabBar - Minimal bottom navigation with pill indicator
+ *
+ * Design:
+ * - Simple flat design (no floating, no glassmorphism)
+ * - Clean icons with outline/filled states
+ * - Small pill indicator below active tab
+ * - 56px height (reduced from 70px)
+ * - No animations (just opacity fade on press)
+ * - Theme-aware colors
+ */
 export function CustomTabBar({
   state,
   descriptors,
@@ -60,23 +71,6 @@ export function CustomTabBar({
           }
         };
 
-        const getLabel = (routeName: string) => {
-          switch (routeName) {
-            case "index":
-              return "Home";
-            case "goals":
-              return "Goals";
-            case "attendance":
-              return "Attendance";
-            case "recommendations":
-              return "Plans";
-            case "profile":
-              return "Profile";
-            default:
-              return "";
-          }
-        };
-
         return (
           <TouchableOpacity
             key={index}
@@ -91,7 +85,7 @@ export function CustomTabBar({
             <View style={styles.iconWrapper}>
               <Ionicons
                 name={getIconName(route.name, isFocused)}
-                size={26}
+                size={24}
                 color={isFocused ? colors.primary : colors.textTertiary}
               />
               {isFocused && (
@@ -103,17 +97,6 @@ export function CustomTabBar({
                 />
               )}
             </View>
-            <Text
-              style={[
-                styles.label,
-                {
-                  color: isFocused ? colors.primary : colors.textTertiary,
-                  fontWeight: isFocused ? "700" : "500",
-                },
-              ]}
-            >
-              {getLabel(route.name)}
-            </Text>
           </TouchableOpacity>
         );
       })}
@@ -124,9 +107,8 @@ export function CustomTabBar({
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    height: 70,
+    height: 56,
     borderTopWidth: 1,
-    paddingTop: 8,
   },
   tabItem: {
     flex: 1,
@@ -139,13 +121,9 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   indicator: {
-    width: 20,
+    width: 24,
-    height: 4,
+    height: 3,
-    borderRadius: 2,
+    borderRadius: 999,
-    marginTop: 4,
-  },
-  label: {
-    fontSize: 11,
     marginTop: 4,
   },
 });

apps/mobile/src/components/GoalProgressCard.tsx

@@ -122,17 +122,15 @@ export function GoalProgressCard({
 
   return (
     <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-      <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
         <MinimalCard
-          variant="elevated"
+          variant="bordered"
           style={[
             styles.card,
             isCompleted && {
-              backgroundColor: colors.surfaceElevated,
+              backgroundColor: colors.overlayLight,
-              opacity: 0.8,
             },
           ]}
-          padding={20}
         >
           {/* Header */}
           <View style={styles.header}>
@@ -291,14 +289,13 @@ export function GoalProgressCard({
 
 const styles = StyleSheet.create({
   card: {
-    marginBottom: 16,
+    marginBottom: 12,
-    borderRadius: 20,
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "flex-start",
-    marginBottom: 16,
+    marginBottom: 12,
   },
   titleRow: {
     flexDirection: "row",
@@ -307,23 +304,23 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
-    marginLeft: 14,
+    marginLeft: 12,
   },
   actions: {
     flexDirection: "row",
-    gap: 12,
+    gap: 8,
   },
   actionButton: {
-    padding: 6,
+    padding: 4,
   },
   progressSection: {
-    marginBottom: 16,
+    marginBottom: 12,
   },
   progressInfo: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 10,
+    marginBottom: 8,
   },
   footer: {
     flexDirection: "row",

apps/mobile/src/components/GoalTypeBreakdownChart.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet, Dimensions } from "react-native";
 import { PieChart } from "react-native-chart-kit";
-import { useTheme } from "../contexts/ThemeContext";
+import { theme } from "../styles/theme";
 
 interface GoalTypeData {
   goalType: string;
@@ -17,40 +17,37 @@ export function GoalTypeBreakdownChart({
   data,
   title = "Goals by Type",
 }: GoalTypeBreakdownChartProps) {
-  const { colors, typography } = useTheme();
   const screenWidth = Dimensions.get("window").width;
 
-  const chartColors = [
+  // Color palette for different goal types
-    colors.primary,
+  const colors = [
-    colors.success,
+    "#3b82f6", // Blue
-    colors.warning,
+    "#10b981", // Green
-    colors.accent,
+    "#f59e0b", // Orange
-    colors.secondary,
+    "#8b5cf6", // Purple
-    colors.info,
+    "#ec4899", // Pink
+    "#06b6d4", // Cyan
   ];
 
+  // Prepare chart data
   const chartData = data.map((item, index) => ({
-    name: item.goalType
+    name: item.goalType,
-      .replace(/_/g, " ")
-      .replace(/\b\w/g, (l) => l.toUpperCase()),
     count: item.count,
-    color: chartColors[index % chartColors.length],
+    color: colors[index % colors.length],
-    legendFontColor: colors.textSecondary,
+    legendFontColor: theme.colors.gray600,
     legendFontSize: 12,
   }));
 
-  const totalGoals = data.reduce((sum, item) => sum + item.count, 0);
+  const chartConfig = {
+    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
+  };
 
   if (data.length === 0) {
     return (
       <View style={styles.container}>
-        <Text style={[typography.h4, { color: colors.textPrimary }]}>
+        <Text style={styles.title}>{title}</Text>
-          {title}
-        </Text>
         <View style={styles.emptyState}>
-          <Text style={[typography.body, { color: colors.textTertiary }]}>
+          <Text style={styles.emptyText}>No goals yet</Text>
-            No goals yet
-          </Text>
         </View>
       </View>
     );
@@ -58,123 +55,46 @@ export function GoalTypeBreakdownChart({
 
   return (
     <View style={styles.container}>
-      <Text
+      <Text style={styles.title}>{title}</Text>
-        style={[typography.h4, { color: colors.textPrimary, marginBottom: 16 }]}
-      >
-        {title}
-      </Text>
-
-      {/* Summary Stats */}
-      <View style={styles.summaryRow}>
-        <View style={styles.summaryItem}>
-          <Text
-            style={[
-              typography.statLarge,
-              { color: colors.primary, fontSize: 32 },
-            ]}
-          >
-            {totalGoals}
-          </Text>
-          <Text style={[typography.caption, { color: colors.textTertiary }]}>
-            Total Goals
-          </Text>
-        </View>
-        <View style={styles.summaryItem}>
-          <Text
-            style={[
-              typography.statLarge,
-              { color: colors.success, fontSize: 32 },
-            ]}
-          >
-            {data.length}
-          </Text>
-          <Text style={[typography.caption, { color: colors.textTertiary }]}>
-            Types
-          </Text>
-        </View>
-      </View>
-
       <View style={styles.chartContainer}>
         <PieChart
           data={chartData}
-          width={screenWidth - 80}
+          width={screenWidth - 60}
-          height={160}
+          height={200}
-          chartConfig={{
+          chartConfig={chartConfig}
-            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
-          }}
           accessor="count"
           backgroundColor="transparent"
           paddingLeft="15"
           absolute
         />
       </View>
-
-      {/* Legend */}
-      <View style={styles.legendGrid}>
-        {data.map((item, index) => (
-          <View key={item.goalType} style={styles.legendItem}>
-            <View
-              style={[
-                styles.legendDot,
-                { backgroundColor: chartColors[index % chartColors.length] },
-              ]}
-            />
-            <Text
-              style={[
-                typography.caption,
-                { color: colors.textSecondary, flex: 1 },
-              ]}
-              numberOfLines={1}
-            >
-              {item.goalType
-                .replace(/_/g, " ")
-                .replace(/\b\w/g, (l) => l.toUpperCase())}
-            </Text>
-            <Text
-              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
-            >
-              {item.count}
-            </Text>
-          </View>
-        ))}
-      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 16,
+    backgroundColor: theme.colors.white,
-    padding: 4,
+    borderRadius: theme.borderRadius.xl,
-  },
+    padding: 16,
-  summaryRow: {
-    flexDirection: "row",
-    justifyContent: "space-around",
     marginBottom: 16,
-    paddingVertical: 12,
+    ...theme.shadows.medium,
   },
-  summaryItem: {
+  title: {
-    alignItems: "center",
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.gray700,
+    marginBottom: 12,
   },
   chartContainer: {
     alignItems: "center",
-    marginBottom: 16,
-  },
-  legendGrid: {
-    gap: 10,
-  },
-  legendItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-  },
-  legendDot: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
   },
   emptyState: {
-    paddingVertical: 32,
+    paddingVertical: 40,
     alignItems: "center",
   },
+  emptyText: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.gray400,
+  },
 });

apps/mobile/src/components/IconContainer.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
 type IconContainerVariant = "plain" | "subtle" | "colored";
-type IconContainerSize = "sm" | "md" | "lg" | "xl";
+type IconContainerSize = "sm" | "md" | "lg";
 
 interface IconContainerProps {
   children: React.ReactNode;
@@ -13,6 +13,19 @@ interface IconContainerProps {
   style?: StyleProp<ViewStyle>;
 }
 
+/**
+ * IconContainer - Clean container for icons with subtle backgrounds
+ *
+ * Variants:
+ * - plain: No background, just the icon
+ * - subtle: Light background (surfaceSecondary)
+ * - colored: Custom background color (pass backgroundColor prop)
+ *
+ * Sizes:
+ * - sm: 32px circle
+ * - md: 40px circle (default)
+ * - lg: 48px circle
+ */
 export function IconContainer({
   children,
   variant = "subtle",
@@ -24,24 +37,19 @@ export function IconContainer({
 
   const sizeStyles: Record<IconContainerSize, ViewStyle> = {
     sm: {
-      width: 36,
+      width: 32,
-      height: 36,
+      height: 32,
-      borderRadius: 10,
-    },
-    md: {
-      width: 48,
-      height: 48,
-      borderRadius: 14,
-    },
-    lg: {
-      width: 56,
-      height: 56,
       borderRadius: 16,
     },
-    xl: {
+    md: {
-      width: 64,
+      width: 40,
-      height: 64,
+      height: 40,
-      borderRadius: 18,
+      borderRadius: 20,
+    },
+    lg: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
     },
   };
 

apps/mobile/src/components/MinimalButton.tsx

@@ -11,13 +11,8 @@ import {
 import { useTheme } from "../contexts/ThemeContext";
 import { fontSize, fontWeight } from "../styles/typography";
 
-type ButtonVariant =
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
-  | "primary"
+type ButtonSize = "sm" | "md" | "lg";
-  | "secondary"
-  | "tertiary"
-  | "danger"
-  | "success";
-type ButtonSize = "sm" | "md" | "lg" | "xl";
 
 interface MinimalButtonProps {
   title: string;
@@ -28,9 +23,22 @@ interface MinimalButtonProps {
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
-  fullWidth?: boolean;
 }
 
+/**
+ * MinimalButton - Clean button component with solid colors
+ *
+ * Variants:
+ * - primary: Solid primary background
+ * - secondary: Outlined with primary color
+ * - tertiary: Text only, no background
+ * - danger: Solid danger background
+ *
+ * Sizes:
+ * - sm: 12px vertical padding, 16px horizontal
+ * - md: 14px vertical padding, 24px horizontal (default)
+ * - lg: 16px vertical padding, 32px horizontal
+ */
 export function MinimalButton({
   title,
   onPress,
@@ -40,42 +48,37 @@ export function MinimalButton({
   disabled = false,
   style,
   textStyle,
-  fullWidth = false,
 }: MinimalButtonProps) {
   const { colors } = useTheme();
 
   const isDisabled = disabled || loading;
 
+  // Get button styles based on variant
   const getButtonStyle = (): ViewStyle => {
     const baseStyle: ViewStyle = {
-      borderRadius: 14,
+      borderRadius: 10,
       alignItems: "center",
       justifyContent: "center",
       opacity: isDisabled ? 0.5 : 1,
     };
 
+    // Size-specific padding
     const sizeStyles: Record<
       ButtonSize,
       { paddingVertical: number; paddingHorizontal: number }
     > = {
-      sm: { paddingVertical: 12, paddingHorizontal: 20 },
+      sm: { paddingVertical: 12, paddingHorizontal: 16 },
-      md: { paddingVertical: 16, paddingHorizontal: 28 },
+      md: { paddingVertical: 14, paddingHorizontal: 24 },
-      lg: { paddingVertical: 18, paddingHorizontal: 36 },
+      lg: { paddingVertical: 16, paddingHorizontal: 32 },
-      xl: { paddingVertical: 20, paddingHorizontal: 44 },
     };
 
     const variantStyles: Record<ButtonVariant, ViewStyle> = {
       primary: {
         backgroundColor: colors.primary,
-        shadowColor: colors.primary,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
       },
       secondary: {
         backgroundColor: "transparent",
-        borderWidth: 2,
+        borderWidth: 1.5,
         borderColor: colors.primary,
       },
       tertiary: {
@@ -83,19 +86,6 @@ export function MinimalButton({
       },
       danger: {
         backgroundColor: colors.danger,
-        shadowColor: colors.danger,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
-      },
-      success: {
-        backgroundColor: colors.success,
-        shadowColor: colors.success,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
       },
     };
 
@@ -103,23 +93,29 @@ export function MinimalButton({
       ...baseStyle,
       ...sizeStyles[size],
       ...variantStyles[variant],
-      ...(fullWidth && { width: "100%" }),
     };
   };
 
+  // Get text styles based on variant
   const getTextStyle = (): TextStyle => {
     const baseTextStyle: TextStyle = {
-      fontSize: size === "sm" ? fontSize.sm : fontSize.md,
+      fontSize: fontSize.base,
-      fontWeight: fontWeight.bold,
+      fontWeight: fontWeight.semibold,
-      letterSpacing: 0.5,
     };
 
     const variantTextStyles: Record<ButtonVariant, TextStyle> = {
-      primary: { color: colors.white },
+      primary: {
-      secondary: { color: colors.primary },
+        color: colors.white,
-      tertiary: { color: colors.primary },
+      },
-      danger: { color: colors.white },
+      secondary: {
-      success: { color: colors.white },
+        color: colors.primary,
+      },
+      tertiary: {
+        color: colors.primary,
+      },
+      danger: {
+        color: colors.white,
+      },
     };
 
     return {
@@ -133,7 +129,7 @@ export function MinimalButton({
       style={[getButtonStyle(), style]}
       onPress={onPress}
       disabled={isDisabled}
-      activeOpacity={0.85}
+      activeOpacity={0.7}
     >
       {loading ? (
         <ActivityIndicator
@@ -150,3 +146,7 @@ export function MinimalButton({
     </TouchableOpacity>
   );
 }
+
+const styles = StyleSheet.create({
+  // No static styles needed - all dynamic based on theme
+});

apps/mobile/src/components/MinimalCard.tsx

@@ -8,22 +8,28 @@ import {
 } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
-type CardVariant = "default" | "elevated" | "bordered" | "gradient";
+type CardVariant = "default" | "elevated" | "bordered";
 
 interface MinimalCardProps {
   children: React.ReactNode;
   variant?: CardVariant;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
-  padding?: number;
 }
 
+/**
+ * MinimalCard - Clean card component without gradients
+ *
+ * Variants:
+ * - default: Subtle shadow on surface background
+ * - elevated: More prominent shadow
+ * - bordered: Border instead of shadow
+ */
 export function MinimalCard({
   children,
   variant = "default",
   onPress,
   style,
-  padding = 20,
 }: MinimalCardProps) {
   const { colors } = useTheme();
 
@@ -31,20 +37,13 @@ export function MinimalCard({
     styles.base,
     {
       backgroundColor: colors.surface,
-      padding: padding,
     },
     variant === "default" && styles.default,
-    variant === "elevated" && {
+    variant === "elevated" && styles.elevated,
-      ...styles.elevated,
-      backgroundColor: colors.surfaceElevated,
-    },
     variant === "bordered" && {
       borderWidth: 1,
       borderColor: colors.border,
     },
-    variant === "gradient" && {
-      backgroundColor: colors.surfaceElevated,
-    },
     style,
   ];
 
@@ -53,7 +52,7 @@ export function MinimalCard({
       <TouchableOpacity
         style={cardStyles}
         onPress={onPress}
-        activeOpacity={0.85}
+        activeOpacity={0.7}
       >
         {children}
       </TouchableOpacity>
@@ -65,20 +64,21 @@ export function MinimalCard({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 20,
+    borderRadius: 12,
+    padding: 16,
   },
   default: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 1,
+  },
+  elevated: {
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.08,
     shadowRadius: 8,
-    elevation: 3,
+    elevation: 2,
-  },
-  elevated: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.12,
-    shadowRadius: 16,
-    elevation: 6,
   },
 });

apps/mobile/src/components/ProgressBar.tsx

@@ -3,28 +3,43 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
 interface ProgressBarProps {
-  progress: number;
+  progress: number; // 0-1 (e.g., 0.75 for 75%)
   color?: string;
   backgroundColor?: string;
   height?: number;
   borderRadius?: number;
   style?: StyleProp<ViewStyle>;
-  animated?: boolean;
 }
 
+/**
+ * ProgressBar - Simple linear progress indicator
+ *
+ * Usage:
+ * - Goal progress tracking
+ * - Loading states
+ * - Completion indicators
+ *
+ * Props:
+ * - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
+ * - color: Custom fill color (defaults to theme primary)
+ * - backgroundColor: Custom track color (defaults to theme border)
+ * - height: Bar height in pixels (defaults to 8)
+ * - borderRadius: Corner radius (defaults to 999 for full pill shape)
+ */
 export function ProgressBar({
   progress,
   color,
   backgroundColor,
-  height = 10,
+  height = 8,
   borderRadius = 999,
   style,
 }: ProgressBarProps) {
   const { colors } = useTheme();
 
+  // Clamp progress between 0 and 1
   const clampedProgress = Math.min(Math.max(progress, 0), 1);
 
-  const trackColor = backgroundColor || colors.surfaceElevated;
+  const trackColor = backgroundColor || colors.border;
   const fillColor = color || colors.primary;
 
   return (

apps/mobile/src/components/SectionHeader.tsx

@@ -17,6 +17,14 @@ interface SectionHeaderProps {
   style?: StyleProp<ViewStyle>;
 }
 
+/**
+ * SectionHeader - Clean section header with optional action button
+ *
+ * Usage:
+ * - Divides content into logical sections
+ * - Optional subtitle for additional context
+ * - Optional action button (e.g., "See All", "Add New")
+ */
 export function SectionHeader({
   title,
   subtitle,
@@ -36,7 +44,7 @@ export function SectionHeader({
           <Text
             style={[
               typography.caption,
-              { color: colors.textTertiary, marginTop: 4 },
+              { color: colors.textTertiary, marginTop: 2 },
             ]}
           >
             {subtitle}
@@ -45,7 +53,12 @@ export function SectionHeader({
       </View>
       {actionLabel && onActionPress && (
         <TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
-          <Text style={[typography.bodyEmphasis, { color: colors.primary }]}>
+          <Text
+            style={[
+              typography.body,
+              { color: colors.primary, fontWeight: "600" },
+            ]}
+          >
             {actionLabel}
           </Text>
         </TouchableOpacity>
@@ -59,7 +72,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
+    marginBottom: 12,
   },
   textContainer: {
     flex: 1,

apps/mobile/src/components/WeeklyProgressChart.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet, Dimensions } from "react-native";
 import { LineChart } from "react-native-chart-kit";
-import { useTheme } from "../contexts/ThemeContext";
+import { theme } from "../styles/theme";
 import type { WeeklyTrendData } from "../api/types";
 
 interface WeeklyProgressChartProps {
@@ -13,26 +13,28 @@ export function WeeklyProgressChart({
   weeklyData,
   title = "Weekly Progress",
 }: WeeklyProgressChartProps) {
-  const { colors, typography } = useTheme();
   const screenWidth = Dimensions.get("window").width;
 
-  const labels = weeklyData.map((week: WeeklyTrendData) => week.weekLabel);
+  // Prepare chart data
-  const checkInsData = weeklyData.map((week: WeeklyTrendData) => week.checkIns);
+  const labels = weeklyData.map((week) => week.weekLabel);
-  const goalsCompletedData = weeklyData.map(
+  const checkInsData = weeklyData.map((week) => week.checkIns);
-    (week: WeeklyTrendData) => week.goalsCompleted,
+  const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
-  );
+  const avgProgressData = weeklyData.map((week) => week.averageProgress);
 
   const chartConfig = {
-    backgroundColor: colors.surface,
+    backgroundColor: theme.colors.white,
-    backgroundGradientFrom: colors.surface,
+    backgroundGradientFrom: theme.colors.white,
-    backgroundGradientTo: colors.surface,
+    backgroundGradientTo: theme.colors.white,
     decimalPlaces: 0,
-    color: (opacity = 1) => `rgba(0, 102, 255, ${opacity})`,
+    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-    labelColor: (opacity = 1) => colors.textTertiary,
+    labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+    style: {
+      borderRadius: theme.borderRadius.lg,
+    },
     propsForDots: {
-      r: "5",
+      r: "4",
       strokeWidth: "2",
-      stroke: colors.primary,
+      stroke: theme.colors.primary,
     },
   };
 
@@ -41,40 +43,31 @@ export function WeeklyProgressChart({
     datasets: [
       {
         data: checkInsData,
-        color: () => colors.primary,
+        color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
-        strokeWidth: 3,
+        strokeWidth: 2,
       },
       {
         data: goalsCompletedData,
-        color: () => colors.success,
+        color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
-        strokeWidth: 3,
+        strokeWidth: 2,
       },
     ],
-    legend: ["Check-ins", "Goals"],
+    legend: ["Check-ins", "Goals Completed"],
   };
 
   return (
     <View style={styles.container}>
-      {title && (
+      <Text style={styles.title}>{title}</Text>
-        <Text
-          style={[
-            typography.h4,
-            { color: colors.textPrimary, marginBottom: 16 },
-          ]}
-        >
-          {title}
-        </Text>
-      )}
       <View style={styles.chartContainer}>
         <LineChart
           data={data}
-          width={screenWidth - 80}
+          width={screenWidth - 60}
-          height={180}
+          height={220}
           chartConfig={chartConfig}
           bezier
           style={styles.chart}
           withInnerLines={true}
-          withOuterLines={false}
+          withOuterLines={true}
           withVerticalLabels={true}
           withHorizontalLabels={true}
           fromZero={true}
@@ -82,20 +75,12 @@ export function WeeklyProgressChart({
       </View>
       <View style={styles.legend}>
         <View style={styles.legendItem}>
-          <View
+          <View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
-            style={[styles.legendDot, { backgroundColor: colors.primary }]}
+          <Text style={styles.legendText}>Check-ins</Text>
-          />
-          <Text style={[typography.caption, { color: colors.textSecondary }]}>
-            Check-ins
-          </Text>
         </View>
         <View style={styles.legendItem}>
-          <View
+          <View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
-            style={[styles.legendDot, { backgroundColor: colors.success }]}
+          <Text style={styles.legendText}>Goals Completed</Text>
-          />
-          <Text style={[typography.caption, { color: colors.textSecondary }]}>
-            Goals
-          </Text>
         </View>
       </View>
     </View>
@@ -104,8 +89,17 @@ export function WeeklyProgressChart({
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 16,
+    backgroundColor: theme.colors.white,
-    padding: 4,
+    borderRadius: theme.borderRadius.xl,
+    padding: 16,
+    marginBottom: 16,
+    ...theme.shadows.medium,
+  },
+  title: {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.gray700,
+    marginBottom: 12,
   },
   chartContainer: {
     alignItems: "center",
@@ -113,22 +107,26 @@ const styles = StyleSheet.create({
   },
   chart: {
     marginVertical: 8,
-    borderRadius: 12,
+    borderRadius: theme.borderRadius.lg,
   },
   legend: {
     flexDirection: "row",
     justifyContent: "center",
-    gap: 24,
+    gap: 20,
     paddingTop: 8,
   },
   legendItem: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    gap: 6,
   },
   legendDot: {
     width: 10,
     height: 10,
     borderRadius: 5,
   },
+  legendText: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.gray500,
+  },
 });

apps/mobile/src/config/api.ts

@@ -35,7 +35,6 @@ export const API_ENDPOINTS = {
   USERS: {
     LIST: "/api/users",
     STATISTICS: "/api/users/statistics",
-    GYM: "/api/users/gym",
   },
   GYMS: "/api/gyms",
   ATTENDANCE: {

apps/mobile/src/styles/colors.ts

@@ -1,6 +1,7 @@
 /**
- * FitAI Color System - BOLD MODERN
+ * FitAI Color System
- * Electric Blue palette with high-energy fitness app aesthetics
+ * Nord Color Palette - A minimal, arctic-inspired palette
+ * https://www.nordtheme.com/
  */
 
 export interface ColorScheme {
@@ -11,7 +12,6 @@ export interface ColorScheme {
 
   // Accent Colors
   accent: string;
-  secondary: string;
   terracotta: string;
   sand: string;
 
@@ -21,11 +21,6 @@ export interface ColorScheme {
   danger: string;
   info: string;
 
-  // Activity Ring Colors
-  calories: string;
-  water: string;
-  workouts: string;
-
   // Neutrals
   background: string;
   surface: string;
@@ -44,119 +39,97 @@ export interface ColorScheme {
   overlay: string;
   overlayLight: string;
 
-  // Gradients (as arrays)
+  // Legacy compatibility (will be phased out)
-  primaryGradient: string[];
-  cardGradient: string[];
-
-  // Legacy compatibility
   white: string;
   black: string;
 }
 
 /**
- * Light Mode - Bold & Energetic
+ * Light Mode Color Palette
+ * Nord Snow Storm (light backgrounds) with Polar Night (dark text)
  */
 export const lightColors: ColorScheme = {
-  // Primary Colors - Electric Blue
+  // Primary Colors (Nord Frost - Aurora blue-green)
-  primary: "#0066FF",
+  primary: "#88C0D0", // Nord Frost 8 (main actions, cyan)
-  primaryDark: "#0052CC",
+  primaryDark: "#5E81AC", // Nord Frost 10 (dark blue)
-  primaryLight: "#3385FF",
+  primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan)
 
   // Accent Colors
-  accent: "#7B2CBF", // Purple
+  accent: "#81A1C1", // Nord Frost 9 (blue-gray)
-  secondary: "#FF3B7A", // Hot Pink
+  terracotta: "#D08770", // Nord Aurora 12 (orange - replaces terracotta)
-  terracotta: "#FF6B35", // Neon Orange
+  sand: "#EBCB8B", // Nord Aurora 13 (yellow - warm accent)
-  sand: "#FFD60A", // Electric Yellow
 
-  // Status Colors - Vibrant
+  // Status Colors
-  success: "#00D26A",
+  success: "#A3BE8C", // Nord Aurora 14 (green)
-  warning: "#FFB800",
+  warning: "#EBCB8B", // Nord Aurora 13 (yellow)
-  danger: "#FF3B3B",
+  danger: "#BF616A", // Nord Aurora 11 (red)
-  info: "#00B8D9",
+  info: "#81A1C1", // Nord Frost 9 (blue)
 
-  // Activity Ring Colors
+  // Neutrals (Snow Storm palette)
-  calories: "#FF6B35", // Orange for calories
+  background: "#ECEFF4", // Nord Snow Storm 3 (lightest)
-  water: "#00B8D9", // Cyan for water
+  surface: "#E5E9F0", // Nord Snow Storm 2 (medium)
-  workouts: "#0066FF", // Blue for workouts
+  surfaceElevated: "#D8DEE9", // Nord Snow Storm 1 (slightly darker)
 
-  // Neutrals - Bold dark on light
+  // Text (Polar Night palette)
-  background: "#F5F5F7",
+  textPrimary: "#2E3440", // Nord Polar Night 0 (darkest)
-  surface: "#FFFFFF",
+  textSecondary: "#3B4252", // Nord Polar Night 1
-  surfaceElevated: "#FFFFFF",
+  textTertiary: "#4C566A", // Nord Polar Night 3
-
-  // Text - High contrast dark
-  textPrimary: "#1A1A1A",
-  textSecondary: "#4A4A4A",
-  textTertiary: "#8E8E93",
 
   // Borders
-  border: "#E5E5EA",
+  border: "#D8DEE9", // Nord Snow Storm 1
-  borderLight: "#F0F0F5",
+  borderLight: "#E5E9F0", // Nord Snow Storm 2
 
   // Overlays
-  overlay: "rgba(0, 0, 0, 0.5)",
+  overlay: "rgba(46, 52, 64, 0.5)", // Polar Night 0
-  overlayLight: "rgba(0, 0, 0, 0.03)",
+  overlayLight: "rgba(46, 52, 64, 0.05)",
-
-  // Gradients
-  primaryGradient: ["#0066FF", "#0052CC"],
-  cardGradient: ["#FFFFFF", "#F8F8FA"],
 
   // Legacy
-  white: "#FFFFFF",
+  white: "#ECEFF4",
-  black: "#1A1A1A",
+  black: "#2E3440",
 };
 
 /**
- * Dark Mode - Premium & Immersive
+ * Dark Mode Color Palette
+ * Nord Polar Night (dark backgrounds) with Snow Storm (light text)
  */
 export const darkColors: ColorScheme = {
-  // Primary Colors - Electric Blue (brighter on dark)
+  // Primary Colors (Nord Frost - adjusted for dark mode)
-  primary: "#0A84FF",
+  primary: "#88C0D0", // Nord Frost 8 (cyan - brighter on dark)
-  primaryDark: "#0066FF",
+  primaryDark: "#5E81AC", // Nord Frost 10 (dark blue)
-  primaryLight: "#5AC8FA",
+  primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan)
 
   // Accent Colors
-  accent: "#BF5AF2", // Purple
+  accent: "#81A1C1", // Nord Frost 9 (blue-gray)
-  secondary: "#FF375F", // Hot Pink
+  terracotta: "#D08770", // Nord Aurora 12 (orange)
-  terracotta: "#FF9500", // Orange
+  sand: "#EBCB8B", // Nord Aurora 13 (yellow)
-  sand: "#FFD60A", // Yellow
 
   // Status Colors
-  success: "#30D158",
+  success: "#A3BE8C", // Nord Aurora 14 (green)
-  warning: "#FFD60A",
+  warning: "#EBCB8B", // Nord Aurora 13 (yellow)
-  danger: "#FF453A",
+  danger: "#BF616A", // Nord Aurora 11 (red)
-  info: "#64D2FF",
+  info: "#81A1C1", // Nord Frost 9 (blue)
 
-  // Activity Ring Colors (even brighter for dark mode)
+  // Neutrals (Polar Night palette)
-  calories: "#FF9500",
+  background: "#2E3440", // Nord Polar Night 0 (darkest)
-  water: "#64D2FF",
+  surface: "#3B4252", // Nord Polar Night 1 (medium dark)
-  workouts: "#0A84FF",
+  surfaceElevated: "#434C5E", // Nord Polar Night 2 (lighter)
 
-  // Neutrals - Dark backgrounds
+  // Text (Snow Storm palette)
-  background: "#000000",
+  textPrimary: "#ECEFF4", // Nord Snow Storm 3 (lightest)
-  surface: "#1C1C1E",
+  textSecondary: "#E5E9F0", // Nord Snow Storm 2
-  surfaceElevated: "#2C2C2E",
+  textTertiary: "#D8DEE9", // Nord Snow Storm 1
-
-  // Text - Bright on dark
-  textPrimary: "#FFFFFF",
-  textSecondary: "#EBEBF5",
-  textTertiary: "#8E8E93",
 
   // Borders
-  border: "#38383A",
+  border: "#434C5E", // Nord Polar Night 2
-  borderLight: "#48484A",
+  borderLight: "#3B4252", // Nord Polar Night 1
 
   // Overlays
   overlay: "rgba(0, 0, 0, 0.6)",
-  overlayLight: "rgba(255, 255, 255, 0.05)",
+  overlayLight: "rgba(236, 239, 244, 0.05)", // Snow Storm 3
-
-  // Gradients
-  primaryGradient: ["#0A84FF", "#0066FF"],
-  cardGradient: ["#1C1C1E", "#2C2C2E"],
 
   // Legacy
-  white: "#FFFFFF",
+  white: "#ECEFF4",
-  black: "#000000",
+  black: "#2E3440",
 };
 
 /**

apps/mobile/src/styles/typography.ts

@@ -1,54 +1,53 @@
 /**
- * FitAI Typography System - BOLD MODERN
+ * FitAI Typography System
- * High-impact typography with clear hierarchy using system fonts
+ * Minimalist typography with clear hierarchy using system fonts
  */
 
 import { TextStyle } from "react-native";
 
 /**
- * Font Sizes - Larger for bold impact
+ * Font Sizes
+ * Refined scale with fewer sizes for clearer hierarchy
  */
 export const fontSize = {
-  xs: 12,
+  xs: 11,
-  sm: 14,
+  sm: 13,
-  base: 16,
+  base: 15,
-  md: 18, // Body emphasis
+  md: 17, // Body emphasis
-  lg: 22,
+  lg: 20,
-  xl: 26,
+  xl: 24,
-  "2xl": 32,
+  "2xl": 28,
-  "3xl": 40,
+  "3xl": 34,
-  "4xl": 52,
+  "4xl": 40,
-  "5xl": 64,
 } as const;
 
 /**
- * Font Weights - Emphasize bold
+ * Font Weights
  */
 export const fontWeight = {
   regular: "400" as TextStyle["fontWeight"],
   medium: "500" as TextStyle["fontWeight"],
   semibold: "600" as TextStyle["fontWeight"],
   bold: "700" as TextStyle["fontWeight"],
-  extrabold: "800" as TextStyle["fontWeight"],
 } as const;
 
 /**
  * Line Heights
  */
 export const lineHeight = {
-  tight: 1.15,
+  tight: 1.2,
-  normal: 1.4,
+  normal: 1.5,
-  relaxed: 1.6,
+  relaxed: 1.7,
 } as const;
 
 /**
  * Letter Spacing
  */
 export const letterSpacing = {
-  tight: -1,
+  tight: -0.5,
   normal: 0,
   wide: 0.5,
-  wider: 1.5,
+  wider: 1,
 } as const;
 
 /**
@@ -59,14 +58,11 @@ export interface TypographyPresets {
   h1: TextStyle;
   h2: TextStyle;
   h3: TextStyle;
-  h4: TextStyle;
   body: TextStyle;
   bodyEmphasis: TextStyle;
   label: TextStyle;
   stat: TextStyle;
-  statLarge: TextStyle;
   caption: TextStyle;
-  button: TextStyle;
 }
 
 export const createTypographyPresets = (
@@ -74,33 +70,25 @@ export const createTypographyPresets = (
   textSecondary: string,
   textTertiary: string,
 ): TypographyPresets => ({
-  // Display Text (Screen Titles) - Extra Bold
+  // Display Text (Screen Titles)
   h1: {
-    fontSize: fontSize["4xl"],
+    fontSize: fontSize["3xl"],
-    fontWeight: fontWeight.extrabold,
-    letterSpacing: letterSpacing.tight,
-    lineHeight: fontSize["4xl"] * lineHeight.tight,
-    color: textPrimary,
-  },
-
-  // Section Headers - Bold
-  h2: {
-    fontSize: fontSize["2xl"],
     fontWeight: fontWeight.bold,
-    letterSpacing: -0.5,
+    letterSpacing: letterSpacing.tight,
+    lineHeight: fontSize["3xl"] * lineHeight.tight,
     color: textPrimary,
   },
 
-  // Card Titles - Semibold
+  // Section Headers
-  h3: {
+  h2: {
-    fontSize: fontSize.lg,
+    fontSize: fontSize.xl,
     fontWeight: fontWeight.semibold,
     letterSpacing: -0.3,
     color: textPrimary,
   },
 
-  // Small Headers
+  // Card Titles
-  h4: {
+  h3: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.semibold,
     color: textPrimary,
@@ -124,27 +112,17 @@ export const createTypographyPresets = (
 
   // Labels (uppercase, spaced)
   label: {
-    fontSize: fontSize.xs,
+    fontSize: fontSize.sm,
-    fontWeight: fontWeight.semibold,
+    fontWeight: fontWeight.medium,
-    letterSpacing: letterSpacing.wider,
+    letterSpacing: letterSpacing.wide,
     textTransform: "uppercase",
     color: textTertiary,
   },
 
-  // Stats/Numbers - Bold Large
+  // Stats/Numbers
   stat: {
-    fontSize: fontSize["3xl"],
+    fontSize: fontSize["2xl"],
     fontWeight: fontWeight.bold,
-    letterSpacing: -1,
-    color: textPrimary,
-  },
-
-  // Large Stats (Hero numbers)
-  statLarge: {
-    fontSize: fontSize["5xl"],
-    fontWeight: fontWeight.extrabold,
-    letterSpacing: -2,
-    lineHeight: fontSize["5xl"] * lineHeight.tight,
     color: textPrimary,
   },
 
@@ -154,13 +132,6 @@ export const createTypographyPresets = (
     fontWeight: fontWeight.regular,
     color: textTertiary,
   },
-
-  // Button Text
-  button: {
-    fontSize: fontSize.base,
-    fontWeight: fontWeight.bold,
-    letterSpacing: 0.5,
-  },
 });
 
 /**