performance improvments

fix artefacts from previous dessign

apps/admin/src/app/api/admin/analytics/route.ts

@@ -0,0 +1,142 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
+import { db as rawDb, sql } from "@fitai/database";
+
+interface UserGrowthPoint {
+  label: string;
+  value: number;
+}
+
+interface MembershipDistributionPoint {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface RevenuePoint {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface AnalyticsData {
+  userGrowth: UserGrowthPoint[];
+  membershipDistribution: MembershipDistributionPoint[];
+  revenue: RevenuePoint[];
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const database = await getDatabase();
+    const user = await ensureUserSynced(userId, database);
+
+    if (!user || (user.role !== "admin" && user.role !== "superAdmin")) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const url = new URL(req.url);
+    const months = parseInt(url.searchParams.get("months") || "6");
+
+    const allUsers = await database.getAllUsers();
+    const allClients = await database.getAllClients();
+
+    const paymentsRaw = await rawDb.all(
+      sql`SELECT * FROM payments WHERE status = 'completed' AND paid_at IS NOT NULL`,
+    );
+    const payments: any[] = paymentsRaw || [];
+
+    const now = new Date();
+    const userGrowth: UserGrowthPoint[] = [];
+
+    for (let i = months - 1; i >= 0; i--) {
+      const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const monthLabel = date.toLocaleDateString("en-US", { month: "short" });
+
+      const usersCreatedByMonth = allUsers.filter((u: any) => {
+        const createdAt = new Date(u.createdAt);
+        return (
+          createdAt.getFullYear() === date.getFullYear() &&
+          createdAt.getMonth() === date.getMonth()
+        );
+      });
+
+      userGrowth.push({
+        label: monthLabel,
+        value: usersCreatedByMonth.length,
+      });
+    }
+
+    let runningTotal = 0;
+    for (const point of userGrowth) {
+      runningTotal += point.value;
+      point.value = runningTotal;
+    }
+
+    const membershipCounts: Record<string, number> = {
+      basic: 0,
+      premium: 0,
+      vip: 0,
+    };
+
+    for (const client of allClients) {
+      const membershipType = (client as any).membershipType || "basic";
+      if (membershipCounts[membershipType] !== undefined) {
+        membershipCounts[membershipType]++;
+      }
+    }
+
+    const membershipDistribution: MembershipDistributionPoint[] = [
+      { label: "Basic", value: membershipCounts.basic, color: "#6b7280" },
+      { label: "Premium", value: membershipCounts.premium, color: "#3b82f6" },
+      { label: "VIP", value: membershipCounts.vip, color: "#f59e0b" },
+    ];
+
+    const revenue: RevenuePoint[] = [];
+
+    for (let i = months - 1; i >= 0; i--) {
+      const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const monthLabel = date.toLocaleDateString("en-US", { month: "short" });
+      const nextMonthDate = new Date(
+        now.getFullYear(),
+        now.getMonth() - i + 1,
+        1,
+      );
+
+      const monthlyRevenue = payments
+        .filter((p: any) => {
+          const paidAt = p.paid_at ? new Date(p.paid_at) : null;
+          if (!paidAt) return false;
+          return paidAt >= date && paidAt < nextMonthDate;
+        })
+        .reduce((sum: number, p: any) => sum + (p.amount || 0), 0);
+
+      revenue.push({
+        label: monthLabel,
+        value: monthlyRevenue,
+        color: "#10b981",
+      });
+    }
+
+    const analyticsData: AnalyticsData = {
+      userGrowth,
+      membershipDistribution,
+      revenue,
+    };
+
+    return successResponse({ analytics: analyticsData });
+  } catch (error) {
+    console.error("Analytics error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}

apps/admin/src/app/api/admin/stats/route.ts

@@ -2,6 +2,7 @@ import { auth } from "@clerk/nextjs/server";
 import { NextResponse } from "next/server";
 import { getDatabase } from "@/lib/database";
 import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
 
 export async function GET(req: Request) {
   try {
@@ -51,7 +52,7 @@ export async function GET(req: Request) {
       revenueGrowth: 0,
     };
 
-    return NextResponse.json(stats);
+    return successResponse({ stats });
   } catch (error) {
     console.error("Dashboard stats error:", error);
     return new NextResponse("Internal Server Error", { status: 500 });

apps/admin/src/app/layout.tsx

@@ -10,6 +10,7 @@ import {
 } from "@clerk/nextjs";
 import { Sidebar } from "@/components/ui/Sidebar";
 import { Toaster } from "sonner";
+import { QueryProvider } from "@/components/providers/QueryProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -25,15 +26,17 @@ export default function RootLayout({
 }) {
   return (
     <ClerkProvider>
-      <html lang="en">
-        <body className={inter.className}>
-          <div className="flex min-h-screen bg-slate-50">
-            <Sidebar />
-            <main className="flex-1 ml-20 p-8">{children}</main>
-          </div>
-          <Toaster richColors position="top-right" />
-        </body>
-      </html>
+      <QueryProvider>
+        <html lang="en">
+          <body className={inter.className}>
+            <div className="flex min-h-screen bg-slate-50">
+              <Sidebar />
+              <main className="flex-1 ml-20 p-8">{children}</main>
+            </div>
+            <Toaster richColors position="top-right" />
+          </body>
+        </html>
+      </QueryProvider>
     </ClerkProvider>
   );
 }

apps/admin/src/app/page.tsx

@@ -1,99 +1,88 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
 import { StatsCard } from "@/components/ui/StatsCard";
+import { StatsCardSkeleton } from "@/components/ui/skeleton";
 import { UserManagement } from "@/components/users/UserManagement";
 import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
-import axios from "axios";
-
-interface DashboardStats {
-  totalUsers: number;
-  activeClients: number;
-  totalRevenue: number;
-  revenueGrowth: number;
-}
+import { useDashboardStats } from "@/hooks/use-api";
 
 export default function Home() {
-  const [stats, setStats] = useState<DashboardStats>({
-    totalUsers: 0,
-    activeClients: 0,
-    totalRevenue: 0,
-    revenueGrowth: 0,
-  });
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchStats = async () => {
-      try {
-        const response = await axios.get("/api/admin/stats");
-        setStats(response.data);
-      } catch (error) {
-        console.error("Failed to fetch dashboard stats:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchStats();
-  }, []);
+  const { data: stats, isLoading } = useDashboardStats();
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-    }).format(value);
+    }).format(value || 0);
   };
 
   return (
     <div className="space-y-8">
       <div>
         <h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
-        <p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
+        <p className="text-slate-500 mt-2">
+          Welcome back, here's what's happening today.
+        </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <StatsCard
-          title="Total Users"
-          value={loading ? "..." : stats.totalUsers}
-          change="+12%" // Placeholder for now as we don't track historical growth yet
-          trend="up"
-          icon={Users}
-          color="blue"
-        />
-        <StatsCard
-          title="Active Clients"
-          value={loading ? "..." : stats.activeClients}
-          change="+5%"
-          trend="up"
-          icon={CalendarCheck}
-          color="green"
-        />
-        <StatsCard
-          title="Revenue"
-          value={loading ? "..." : formatCurrency(stats.totalRevenue)}
-          change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
-          trend={stats.revenueGrowth >= 0 ? "up" : "down"}
-          icon={CreditCard}
-          color="purple"
-        />
-        <StatsCard
-          title="Growth"
-          value="24%" // Placeholder
-          change="-2%"
-          trend="down"
-          icon={TrendingUp}
-          color="orange"
-        />
+        {isLoading ? (
+          <>
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+          </>
+        ) : (
+          <>
+            <StatsCard
+              title="Total Users"
+              value={stats?.totalUsers ?? 0}
+              change="+12%"
+              trend="up"
+              icon={Users}
+              color="blue"
+            />
+            <StatsCard
+              title="Active Clients"
+              value={stats?.activeClients ?? 0}
+              change="+5%"
+              trend="up"
+              icon={CalendarCheck}
+              color="green"
+            />
+            <StatsCard
+              title="Revenue"
+              value={formatCurrency(stats?.totalRevenue ?? 0)}
+              change={`${(stats?.revenueGrowth ?? 0) > 0 ? "+" : ""}${stats?.revenueGrowth ?? 0}%`}
+              trend={(stats?.revenueGrowth ?? 0) >= 0 ? "up" : "down"}
+              icon={CreditCard}
+              color="purple"
+            />
+            <StatsCard
+              title="Growth"
+              value="24%"
+              change="-2%"
+              trend="down"
+              icon={TrendingUp}
+              color="orange"
+            />
+          </>
+        )}
       </div>
 
       <div className="flex flex-col gap-8">
         <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
+          <h3 className="text-xl font-bold text-slate-900 mb-6">
+            Recent Activity
+          </h3>
           <UserManagement />
         </div>
         <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3>
+          <h3 className="text-xl font-bold text-slate-900 mb-6">
+            Quick Analytics
+          </h3>
           <AnalyticsDashboard />
         </div>
       </div>

apps/admin/src/app/recommendations/page.tsx

@@ -1,86 +1,40 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useUser } from "@clerk/nextjs";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
-
-interface User {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-}
-
-interface Recommendation {
-  id: string;
-  userId: string;
-  content: string;
-  recommendationText: string;
-  activityPlan: string;
-  dietPlan: string;
-  status: string;
-  createdAt: Date;
-}
+import {
+  useUsers,
+  useRecommendations,
+  useGenerateRecommendations,
+  useApproveRecommendation,
+  useUpdateRecommendation,
+  type Recommendation,
+} from "@/hooks/use-api";
 
 export default function RecommendationsPage() {
   const { user } = useUser();
-  const [users, setUsers] = useState<User[]>([]);
-  const [pendingRecommendations, setPendingRecommendations] = useState<
-    Recommendation[]
-  >([]);
-  const [loading, setLoading] = useState(true);
-  const [generating, setGenerating] = useState<string | null>(null);
   const [useExternalModel, setUseExternalModel] = useState(false);
 
-  useEffect(() => {
-    fetchData();
-  }, []);
+  const { data: users = [], isLoading: usersLoading } = useUsers();
+  const { data: allRecommendations = [], isLoading: recsLoading } =
+    useRecommendations();
+  const pendingRecommendations = allRecommendations.filter(
+    (r) => r.status === "pending",
+  );
 
-  const fetchData = async () => {
-    try {
-      // Fetch users - API returns { success: true, data: { users: [...] }, meta: {...} }
-      const usersRes = await fetch("/api/users");
-      const usersResult = await usersRes.json();
-      const usersArray = usersResult.data?.users || usersResult.users || [];
-      setUsers(usersArray);
-
-      // Fetch pending recommendations - API returns { success: true, data: { recommendations: [...] }, meta: {...} }
-      const recsRes = await fetch("/api/recommendations");
-      const recsResult = await recsRes.json();
-      const allRecs =
-        recsResult.data?.recommendations || recsResult.recommendations || [];
-      setPendingRecommendations(
-        allRecs.filter((r: Recommendation) => r.status === "pending"),
-      );
-    } catch (error) {
-      log.error("Failed to fetch data", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const generateRec = useGenerateRecommendations();
+  const approveRec = useApproveRecommendation();
+  const updateRec = useUpdateRecommendation();
 
   const handleGenerate = async (userId: string) => {
-    setGenerating(userId);
     try {
-      const res = await fetch("/api/recommendations/generate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ userId, useExternalModel }),
-      });
-
-      if (!res.ok) {
-        const error = await res.json();
-        toast.error(`Error: ${error.error}`);
-      } else {
-        toast.success("Recommendation generated successfully!");
-        fetchData(); // Refresh data
-      }
+      await generateRec.mutateAsync(userId);
+      toast.success("Recommendation generated successfully!");
     } catch (error) {
       log.error("Failed to generate recommendation", error);
       toast.error("Failed to generate recommendation.");
-    } finally {
-      setGenerating(null);
     }
   };
 
@@ -89,25 +43,11 @@ export default function RecommendationsPage() {
     status: "approved" | "rejected",
   ) => {
     try {
-      const res = await fetch("/api/recommendations/approve", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          recommendationId,
-          status,
-          approvedBy: user?.id || "admin",
-        }),
+      await approveRec.mutateAsync({
+        recommendationId,
+        approved: status === "approved",
       });
-
-      if (!res.ok) {
-        const errorData = await res.json();
-        toast.error(
-          `Failed to update status: ${errorData.error || "Unknown error"}`,
-        );
-      } else {
-        toast.success("Recommendation status updated");
-        fetchData(); // Refresh data
-      }
+      toast.success("Recommendation status updated");
     } catch (error) {
       log.error("Failed to approve recommendation", error);
       toast.error("Error processing request");
@@ -124,38 +64,24 @@ export default function RecommendationsPage() {
       newActivityPlan === null ||
       newDietPlan === null
     ) {
-      // User cancelled one of the prompts
       return;
     }
 
     try {
-      const res = await fetch("/api/recommendations", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          id: rec.id,
-          content: newContent,
-          activityPlan: newActivityPlan,
-          dietPlan: newDietPlan,
-        }),
+      await updateRec.mutateAsync({
+        id: rec.id,
+        content: newContent,
+        activityPlan: newActivityPlan,
+        dietPlan: newDietPlan,
       });
-
-      if (!res.ok) {
-        const errorData = await res.json();
-        toast.error(
-          `Failed to update recommendation: ${errorData.error || "Unknown error"}`,
-        );
-      } else {
-        toast.success("Recommendation updated successfully!");
-        fetchData(); // Refresh data
-      }
+      toast.success("Recommendation updated successfully!");
     } catch (error) {
       log.error("Failed to update recommendation", error);
       toast.error("Failed to update recommendation.");
     }
   };
 
-  if (loading) {
+  if (usersLoading || recsLoading) {
     return (
       <div className="flex items-center justify-center h-screen">
         <div className="text-xl">Loading...</div>
@@ -215,10 +141,10 @@ export default function RecommendationsPage() {
                   </div>
                   <button
                     onClick={() => handleGenerate(user.id)}
-                    disabled={generating === user.id}
+                    disabled={generateRec.isPending}
                     className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
                   >
-                    {generating === user.id ? "Generating..." : "Generate"}
+                    {generateRec.isPending ? "Generating..." : "Generate"}
                   </button>
                 </li>
               ))}

apps/admin/src/components/analytics/AnalyticsDashboard.tsx

@@ -1,75 +1,34 @@
-'use client'
+"use client";
 
-import { useState, useEffect } from 'react'
-import { UserGrowthChart } from '@/components/charts/UserGrowthChart'
-import { MembershipDistributionChart } from '@/components/charts/MembershipDistributionChart'
-import { RevenueChart } from '@/components/charts/RevenueChart'
-import { Card, CardHeader, CardContent } from '@/components/ui/card'
-
-interface ChartData {
-  label: string
-  value: number
-  color?: string
-}
+import { UserGrowthChart } from "@/components/charts/UserGrowthChart";
+import { MembershipDistributionChart } from "@/components/charts/MembershipDistributionChart";
+import { RevenueChart } from "@/components/charts/RevenueChart";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { useAnalytics } from "@/hooks/use-api";
 
 export function AnalyticsDashboard() {
-  const [userGrowthData, setUserGrowthData] = useState<ChartData[]>([])
-  const [membershipData, setMembershipData] = useState<ChartData[]>([])
-  const [revenueData, setRevenueData] = useState<ChartData[]>([])
-  const [loading, setLoading] = useState(true)
+  const { data: analytics, isLoading } = useAnalytics(6);
 
-  useEffect(() => {
-    fetchAnalyticsData()
-  }, [])
+  const userGrowthData = analytics?.userGrowth ?? [];
+  const membershipData = analytics?.membershipDistribution ?? [];
+  const revenueData = analytics?.revenue ?? [];
 
-  const fetchAnalyticsData = async () => {
-    setLoading(true)
-    try {
-      // Mock data for demonstration - replace with real API calls
-      const mockUserGrowth = [
-        { label: 'Jan', value: 45 },
-        { label: 'Feb', value: 52 },
-        { label: 'Mar', value: 61 },
-        { label: 'Apr', value: 58 },
-        { label: 'May', value: 67 },
-        { label: 'Jun', value: 74 },
-      ]
+  const totalUsers =
+    userGrowthData.length > 0
+      ? userGrowthData[userGrowthData.length - 1].value
+      : 0;
+  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0);
+  const activeMembers = membershipData.reduce(
+    (sum, item) => sum + item.value,
+    0,
+  );
 
-      const mockMembershipData = [
-        { label: 'Basic', value: 45, color: '#6b7280' },
-        { label: 'Premium', value: 28, color: '#3b82f6' },
-        { label: 'VIP', value: 12, color: '#f59e0b' },
-      ]
-
-      const mockRevenueData = [
-        { label: 'Jan', value: 12500, color: '#10b981' },
-        { label: 'Feb', value: 14200, color: '#10b981' },
-        { label: 'Mar', value: 16800, color: '#10b981' },
-        { label: 'Apr', value: 15900, color: '#10b981' },
-        { label: 'May', value: 18200, color: '#10b981' },
-        { label: 'Jun', value: 19400, color: '#10b981' },
-      ]
-
-      setUserGrowthData(mockUserGrowth)
-      setMembershipData(mockMembershipData)
-      setRevenueData(mockRevenueData)
-    } catch (error) {
-      console.error('Failed to fetch analytics data:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const totalUsers = userGrowthData.length > 0 ? userGrowthData[userGrowthData.length - 1].value : 0
-  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0)
-  const activeMembers = membershipData.reduce((sum, item) => sum + item.value, 0)
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="flex justify-center items-center h-64">
         <div className="text-lg">Loading analytics...</div>
       </div>
-    )
+    );
   }
 
   return (
@@ -81,7 +40,9 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-blue-600">{totalUsers}</div>
+              <div className="text-3xl font-bold text-blue-600">
+                {totalUsers}
+              </div>
               <div className="text-gray-600">Total Users</div>
             </div>
           </CardContent>
@@ -90,7 +51,9 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-green-600">${totalRevenue.toLocaleString()}</div>
+              <div className="text-3xl font-bold text-green-600">
+                ${totalRevenue.toLocaleString()}
+              </div>
               <div className="text-gray-600">Total Revenue</div>
             </div>
           </CardContent>
@@ -99,7 +62,9 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-purple-600">{activeMembers}</div>
+              <div className="text-3xl font-bold text-purple-600">
+                {activeMembers}
+              </div>
               <div className="text-gray-600">Active Members</div>
             </div>
           </CardContent>
@@ -133,14 +98,14 @@ export function AnalyticsDashboard() {
         </CardHeader>
         <CardContent>
           <RevenueChart
-            data={revenueData.map(item => ({
+            data={revenueData.map((item) => ({
               category: item.label,
               value: item.value,
-              color: item.color
+              color: item.color,
             }))}
           />
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }

apps/admin/src/components/providers/QueryProvider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

apps/admin/src/components/ui/Sidebar.tsx

@@ -13,40 +13,18 @@ import {
   Brain,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
-
-interface Recommendation {
-  id: string;
-  status: string;
-}
+import { usePendingRecommendationsCount } from "@/hooks/use-api";
 
 export function Sidebar() {
   const pathname = usePathname();
   const { user } = useUser();
-  const [pendingCount, setPendingCount] = useState(0);
+  const { data: pendingCount = 0 } = usePendingRecommendationsCount();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    const fetchPending = async () => {
-      try {
-        const res = await fetch("/api/recommendations");
-        if (res.ok) {
-          const data = await res.json();
-          const pending = (data.recommendations || []).filter(
-            (r: Recommendation) => r.status === "pending",
-          );
-          setPendingCount(pending.length);
-        }
-      } catch (e) {
-        console.error("Failed to fetch pending recommendations", e);
-      }
-    };
-    fetchPending();
-  }, []);
-
   const menuItems = [
     { icon: LayoutDashboard, label: "Dashboard", href: "/" },
     { icon: Users, label: "Users", href: "/users" },

apps/admin/src/components/ui/skeleton.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-slate-200 dark:bg-slate-700",
+        className,
+      )}
+    />
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-8 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="h-12 flex-1" />
+          <Skeleton className="h-12 w-32" />
+          <Skeleton className="h-12 w-24" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6 space-y-4">
+      <Skeleton className="h-6 w-40" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-5/6" />
+      </div>
+    </div>
+  );
+}

apps/admin/src/components/users/UserGrid.tsx

@@ -9,9 +9,10 @@ import { formatDate } from "@/lib/utils";
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-function getTimeAgo(date: Date): string {
+function getTimeAgo(date: Date | string): string {
   const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
+  const d = typeof date === "string" ? new Date(date) : date;
+  const diffMs = now.getTime() - d.getTime();
   const diffMins = Math.floor(diffMs / 60000);
   const diffHours = Math.floor(diffMins / 60);
   const diffDays = Math.floor(diffHours / 24);
@@ -22,7 +23,7 @@ function getTimeAgo(date: Date): string {
   return `${diffDays}d ago`;
 }
 
-interface User {
+export interface User {
   id: string;
   email: string;
   firstName: string;
@@ -31,15 +32,18 @@ interface User {
   phone?: string;
   gymId?: string;
   gymName?: string | null;
-  createdAt: Date;
+  createdAt?: string | Date;
   isCheckedIn?: boolean;
-  checkInTime?: Date;
+  checkInTime?: string | Date;
+  lastCheckInTime?: string | Date;
+  checkInsThisWeek?: number;
+  checkInsThisMonth?: number;
   client?: {
     id: string;
     membershipType: string;
     membershipStatus: string;
-    joinDate: Date;
-    lastVisit?: Date;
+    joinDate: string | Date;
+    lastVisit?: string | Date;
   };
 }
 

apps/admin/src/components/users/UserManagement.tsx

@@ -1,43 +1,23 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { UserGrid } from "@/components/users/UserGrid";
-// import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { UserGrid, type User } from "@/components/users/UserGrid";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
-import { getGymIdFromUser } from "@/lib/error-helpers";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
 import { CreateUserModal } from "./CreateUserModal";
-
-interface User {
-  id: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-  role: string;
-  phone?: string;
-  gymId?: string;
-  createdAt: Date;
-  isCheckedIn?: boolean;
-  checkInTime?: Date;
-  lastCheckInTime?: Date;
-  checkInsThisWeek?: number;
-  checkInsThisMonth?: number;
-  client?: {
-    id: string;
-    membershipType: string;
-    membershipStatus: string;
-    joinDate: Date;
-    lastVisit?: Date;
-  };
-}
+import {
+  useUsers,
+  useGyms,
+  useUpdateUser,
+  useDeleteUser,
+  useSendInvitation,
+} from "@/hooks/use-api";
 
 export function UserManagement() {
   const { user } = useUser();
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<string>("all");
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isEditing, setIsEditing] = useState(false);
@@ -52,68 +32,17 @@ export function UserManagement() {
     gymId: string;
   } | null>(null);
 
-  // Active gyms for dropdown
-  const [gyms, setGyms] = useState<Array<{ id: string; name: string }>>([]);
-
-  // Load gyms when modal opens or refreshes
-  useEffect(() => {
-    if (isEditing) {
-      (async () => {
-        try {
-          const res = await fetch("/api/gyms");
-          const data = await res.json();
-          if (Array.isArray(data)) {
-            // map down to id and name to avoid extra payload use here
-            setGyms(data.map((g: any) => ({ id: g.id, name: g.name })));
-          } else {
-            setGyms([]);
-          }
-        } catch {
-          setGyms([]);
-        }
-      })();
-    }
-  }, [isEditing]);
-
-  useEffect(() => {
-    fetchUsers();
-  }, [filter]);
-
-  const fetchUsers = async () => {
-    setLoading(true);
-    try {
-      const ts = Date.now();
-      const url =
-        filter === "all"
-          ? `/api/users?ts=${ts}`
-          : `/api/users?role=${filter}&ts=${ts}`;
-
-      log.debug("Fetching users", { url });
-      const response = await fetch(url, { cache: "no-store" });
-      log.debug("Users fetch response", {
-        ok: response.ok,
-        status: response.status,
-      });
-      const responseData = await response.json();
-      const data = responseData.data || responseData; // Handle both old and new API response formats
-      log.debug("Received users data", {
-        count: Array.isArray(data.users) ? data.users.length : 0,
-        sample:
-          data.users && data.users[0]
-            ? {
-                id: data.users[0].id,
-                gymId: data.users[0].gymId,
-                role: data.users[0].role,
-              }
-            : null,
-      });
-      setUsers(data.users || []);
-    } catch (error) {
-      log.error("Failed to fetch users", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const {
+    data: users = [],
+    isLoading,
+    refetch,
+  } = useUsers({
+    role: filter !== "all" ? filter : undefined,
+  });
+  const { data: gyms = [] } = useGyms();
+  const updateUser = useUpdateUser();
+  const deleteUser = useDeleteUser();
+  const sendInvitation = useSendInvitation();
 
   const handleUserSelect = (user: User | null) => {
     setSelectedUser(user);
@@ -144,17 +73,12 @@ export function UserManagement() {
       return;
 
     try {
-      const response = await fetch("/api/users", {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ids: users.map((u) => u.id) }),
-      });
-      if (response.ok) {
-        fetchUsers();
-        toast.success("Users deleted successfully");
-      } else {
-        toast.error("Error deleting users");
-      }
+      const deletePromises = users.map((u) =>
+        fetch(`/api/users?id=${u.id}`, { method: "DELETE" }),
+      );
+      await Promise.all(deletePromises);
+      refetch();
+      toast.success("Users deleted successfully");
     } catch (error) {
       log.error("Failed to delete users", error);
     }
@@ -196,7 +120,7 @@ export function UserManagement() {
   };
 
   const handleRefresh = () => {
-    fetchUsers();
+    refetch();
   };
 
   const handleSaveEdit = async () => {
@@ -204,7 +128,6 @@ export function UserManagement() {
 
     try {
       if (selectedUser) {
-        // Update existing user
         const payload = {
           id: selectedUser.id,
           email: editForm.email,
@@ -214,80 +137,21 @@ export function UserManagement() {
           phone: editForm.phone,
           gymId: editForm.gymId === "" ? null : editForm.gymId,
         };
-        log.debug("Updating user", payload);
-        const response = await fetch("/api/users", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        log.debug("User update response", {
-          ok: response.ok,
-          status: response.status,
-        });
-        if (response.ok) {
-          // Optimistically update local state so grid reflects changes immediately
-          setUsers((prev) =>
-            prev.map((u) =>
-              u.id === selectedUser.id
-                ? {
-                    ...u,
-                    email: editForm.email,
-                    firstName: editForm.firstName,
-                    lastName: editForm.lastName,
-                    role: editForm.role,
-                    phone: editForm.phone || undefined,
-                    gymId: editForm.gymId === "" ? undefined : editForm.gymId,
-                  }
-                : u,
-            ),
-          );
-          setSelectedUser((prev) =>
-            prev
-              ? {
-                  ...prev,
-                  email: editForm.email,
-                  firstName: editForm.firstName,
-                  lastName: editForm.lastName,
-                  role: editForm.role,
-                  phone: editForm.phone || undefined,
-                  gymId: editForm.gymId === "" ? undefined : editForm.gymId,
-                }
-              : prev,
-          );
-          setIsEditing(false);
-          setEditForm(null);
-          // Still re-fetch from server to ensure consistency
-          log.debug("Re-fetching users after successful edit");
-          fetchUsers();
-          toast.success("User updated successfully");
-        } else {
-          const errText = await response.text().catch(() => "");
-          log.error("User update failed", new Error(errText), {
-            status: response.status,
-          });
-          toast.error("Error updating user");
-        }
-      } else {
-        // Create (Invite) new user
-        const response = await fetch("/api/invitations", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            inviteeEmail: editForm.email,
-            roleAssigned: editForm.role,
-            gymId: editForm.gymId || undefined,
-          }),
-        });
 
-        if (response.ok) {
-          setIsEditing(false);
-          setEditForm(null);
-          fetchUsers();
-          toast.success("Invitation sent successfully!");
-        } else {
-          const errorData = await response.json();
-          toast.error(`Error sending invitation: ${errorData.error}`);
-        }
+        await updateUser.mutateAsync(payload);
+        setIsEditing(false);
+        setEditForm(null);
+        refetch();
+        toast.success("User updated successfully");
+      } else {
+        await sendInvitation.mutateAsync({
+          email: editForm.email,
+          role: editForm.role,
+        });
+        setIsEditing(false);
+        setEditForm(null);
+        refetch();
+        toast.success("Invitation sent successfully!");
       }
     } catch (error) {
       console.error(error);
@@ -299,17 +163,11 @@ export function UserManagement() {
     if (!selectedUser) return;
 
     try {
-      const response = await fetch(`/api/users?id=${selectedUser.id}`, {
-        method: "DELETE",
-      });
-      if (response.ok) {
-        setIsDeleting(false);
-        setSelectedUser(null);
-        fetchUsers();
-        toast.success("User deleted successfully");
-      } else {
-        toast.error("Error deleting user");
-      }
+      await deleteUser.mutateAsync(selectedUser.id);
+      setIsDeleting(false);
+      setSelectedUser(null);
+      refetch();
+      toast.success("User deleted successfully");
     } catch (error) {
       log.error("Failed to delete user", error);
     }
@@ -397,7 +255,7 @@ export function UserManagement() {
             onEditUser={handleEditUser}
             onDeleteUser={handleDeleteUser}
             onBulkDelete={handleBulkDelete}
-            loading={loading}
+            loading={isLoading}
           />
         </CardContent>
       </Card>
@@ -591,7 +449,9 @@ export function UserManagement() {
                   </p>
                   <p>
                     <span className="font-medium">Joined:</span>{" "}
-                    {new Date(selectedUser.createdAt).toLocaleDateString()}
+                    {selectedUser.createdAt
+                      ? new Date(selectedUser.createdAt).toLocaleDateString()
+                      : "N/A"}
                   </p>
                 </div>
               </div>
@@ -653,7 +513,7 @@ export function UserManagement() {
       <CreateUserModal
         open={createModalOpen}
         onOpenChange={setCreateModalOpen}
-        onSuccess={() => fetchUsers()}
+        onSuccess={() => refetch()}
       />
     </div>
   );

apps/admin/src/hooks/use-api.ts

@@ -0,0 +1,380 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+export interface DashboardStats {
+  totalUsers: number;
+  activeClients: number;
+  totalRevenue: number;
+  revenueGrowth: number;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  phone?: string;
+  gymId?: string;
+  gymName?: string | null;
+  createdAt?: string;
+  isCheckedIn?: boolean;
+  checkInTime?: string;
+  lastCheckInTime?: string;
+  checkInsThisWeek?: number;
+  checkInsThisMonth?: number;
+  client?: {
+    id: string;
+    membershipType: string;
+    membershipStatus: string;
+    joinDate: string;
+    lastVisit?: string;
+  };
+}
+
+export interface Recommendation {
+  id: string;
+  userId: string;
+  type: string;
+  title: string;
+  description: string;
+  content?: string;
+  recommendationText?: string;
+  activityPlan?: string;
+  dietPlan?: string;
+  status: "pending" | "approved" | "rejected";
+  createdAt: string;
+  user?: User;
+}
+
+export interface Gym {
+  id: string;
+  name: string;
+  address?: string;
+}
+
+export interface AttendanceRecord {
+  id: string;
+  userId: string;
+  checkIn: string;
+  checkOut?: string;
+  date: string;
+}
+
+async function fetchApi<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response
+      .json()
+      .catch(() => ({ error: "Request failed" }));
+    throw new Error(error.error || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export function useDashboardStats(gymId?: string) {
+  return useQuery({
+    queryKey: ["dashboard-stats", gymId],
+    queryFn: () => {
+      const url = gymId
+        ? `/api/admin/stats?gymId=${gymId}`
+        : "/api/admin/stats";
+      return fetchApi<{ data: { stats: DashboardStats } }>(url).then(
+        (res) => res.data?.stats,
+      );
+    },
+  });
+}
+
+export function useUsers(filters?: {
+  role?: string;
+  gymId?: string;
+  search?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters?.role) params.set("role", filters.role);
+  if (filters?.gymId) params.set("gymId", filters.gymId);
+  if (filters?.search) params.set("search", filters.search);
+
+  const queryString = params.toString();
+  const url = queryString ? `/api/users?${queryString}` : "/api/users";
+
+  return useQuery({
+    queryKey: ["users", filters],
+    queryFn: () =>
+      fetchApi<{ data: { users: User[] } }>(url).then(
+        (res) => res.data?.users ?? [],
+      ),
+  });
+}
+
+export function useUser(userId: string) {
+  return useQuery({
+    queryKey: ["user", userId],
+    queryFn: () =>
+      fetchApi<{ data: { user: User } }>(`/api/users?id=${userId}`).then(
+        (res) => res.data?.user,
+      ),
+    enabled: !!userId,
+  });
+}
+
+export function useRecommendations(filters?: {
+  userId?: string;
+  status?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters?.userId) params.set("userId", filters.userId);
+  if (filters?.status) params.set("status", filters.status);
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/api/recommendations?${queryString}`
+    : "/api/recommendations";
+
+  return useQuery({
+    queryKey: ["recommendations", filters],
+    queryFn: () =>
+      fetchApi<{ data: { recommendations: Recommendation[] } }>(url).then(
+        (res) => res.data?.recommendations ?? [],
+      ),
+  });
+}
+
+export function usePendingRecommendationsCount() {
+  return useQuery({
+    queryKey: ["pending-recommendations-count"],
+    queryFn: () =>
+      fetchApi<{ data: { recommendations: Recommendation[] } }>(
+        "/api/recommendations",
+      ).then(
+        (res) =>
+          (res.data?.recommendations ?? []).filter(
+            (r) => r.status === "pending",
+          ).length,
+      ),
+    refetchInterval: 30000,
+  });
+}
+
+export function useGyms() {
+  return useQuery({
+    queryKey: ["gyms"],
+    queryFn: () =>
+      fetchApi<{ data: { gyms: Gym[] } }>("/api/gyms").then(
+        (res) => res.data?.gyms ?? [],
+      ),
+  });
+}
+
+export function useAttendance(filters?: { userId?: string; date?: string }) {
+  const params = new URLSearchParams();
+  if (filters?.userId) params.set("userId", filters.userId);
+  if (filters?.date) params.set("date", filters.date);
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/api/admin/attendance?${queryString}`
+    : "/api/admin/attendance";
+
+  return useQuery({
+    queryKey: ["attendance", filters],
+    queryFn: () =>
+      fetchApi<{ data: { records: AttendanceRecord[] } }>(url).then(
+        (res) => res.data?.records ?? [],
+      ),
+  });
+}
+
+export function useCreateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: {
+      email: string;
+      firstName: string;
+      lastName: string;
+      role: string;
+      phone?: string;
+      gymId?: string;
+    }) =>
+      fetchApi<{ data: { userId: string } }>("/api/users/create", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }).then((res) => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    },
+  });
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { id: string; [key: string]: unknown }) =>
+      fetchApi<{ data: { success: boolean } }>(`/api/users?id=${data.id}`, {
+        method: "PUT",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["user", variables.id] });
+    },
+  });
+}
+
+export function useDeleteUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean } }>(`/api/users?id=${userId}`, {
+        method: "DELETE",
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    },
+  });
+}
+
+export function useGenerateRecommendations() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId?: string) =>
+      fetchApi<{
+        data: { success: boolean; recommendations?: Recommendation[] };
+      }>("/api/recommendations/generate", {
+        method: "POST",
+        body: userId ? JSON.stringify({ userId }) : undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+      queryClient.invalidateQueries({
+        queryKey: ["pending-recommendations-count"],
+      });
+    },
+  });
+}
+
+export function useApproveRecommendation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { recommendationId: string; approved: boolean }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/recommendations/approve", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+      queryClient.invalidateQueries({
+        queryKey: ["pending-recommendations-count"],
+      });
+    },
+  });
+}
+
+export function useUpdateRecommendation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: {
+      id: string;
+      content?: string;
+      activityPlan?: string;
+      dietPlan?: string;
+    }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/recommendations", {
+        method: "PUT",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+    },
+  });
+}
+
+export function useCheckIn() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean; record: AttendanceRecord } }>(
+        "/api/attendance/check-in",
+        {
+          method: "POST",
+          body: JSON.stringify({ userId }),
+        },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["attendance"] });
+    },
+  });
+}
+
+export function useCheckOut() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean } }>("/api/attendance/check-out", {
+        method: "POST",
+        body: JSON.stringify({ userId }),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["attendance"] });
+    },
+  });
+}
+
+export function useInvitations() {
+  return useQuery({
+    queryKey: ["invitations"],
+    queryFn: () =>
+      fetchApi<{ data: { invitations: unknown[] } }>("/api/invitations").then(
+        (res) => res.data?.invitations ?? [],
+      ),
+  });
+}
+
+export function useSendInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { email: string; role: string }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/invitations", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invitations"] });
+    },
+  });
+}
+
+export interface AnalyticsData {
+  userGrowth: { label: string; value: number }[];
+  membershipDistribution: { label: string; value: number; color: string }[];
+  revenue: { label: string; value: number; color: string }[];
+}
+
+export function useAnalytics(months: number = 6) {
+  return useQuery({
+    queryKey: ["analytics", months],
+    queryFn: () =>
+      fetchApi<{ data: { analytics: AnalyticsData } }>(
+        `/api/admin/analytics?months=${months}`,
+      ).then((res) => res.data?.analytics),
+  });
+}

apps/mobile/src/app/(auth)/onboarding.tsx

@@ -96,9 +96,13 @@ export default function OnboardingScreen() {
 
       const fitnessData = {
         userId: user.id,
-        height: parseFloat(fitnessProfile.height),
-        weight: parseFloat(fitnessProfile.weight),
-        age: parseInt(fitnessProfile.age),
+        height: fitnessProfile.height
+          ? parseFloat(fitnessProfile.height)
+          : undefined,
+        weight: fitnessProfile.weight
+          ? parseFloat(fitnessProfile.weight)
+          : undefined,
+        age: fitnessProfile.age ? parseInt(fitnessProfile.age, 10) : undefined,
         fitnessGoals: fitnessProfile.goals ? [fitnessProfile.goals] : [],
         medicalConditions: fitnessProfile.medicalConditions || undefined,
         allergies: fitnessProfile.dietaryRestrictions || undefined,

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

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

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

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

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

@@ -19,6 +19,7 @@ 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() {
@@ -35,6 +36,11 @@ 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 =
@@ -49,8 +55,23 @@ 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);
@@ -115,8 +136,12 @@ export default function ProfileScreen() {
   const handleApplyGym = async () => {
     try {
       const token = await getToken();
-      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS}/gym`;
-      log.debug("Updating gym selection", { url, gymId: selectedGymId });
+      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS.GYM}`;
+      log.debug("Updating gym selection", {
+        url,
+        gymId: selectedGymId,
+        token: token ? "present" : "missing",
+      });
       const res = await fetch(url, {
         method: "PATCH",
         headers: {
@@ -213,7 +238,10 @@ export default function ProfileScreen() {
       contentContainerStyle={styles.content}
     >
       {/* Header Card */}
-      <MinimalCard variant="elevated" style={styles.profileCard}>
+      <MinimalCard
+        variant="elevated"
+        style={[styles.profileCard, { backgroundColor: colors.primary }]}
+      >
         <View style={styles.avatarContainer}>
           {user?.imageUrl ? (
             <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
@@ -221,29 +249,36 @@ 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.white} />
+              <Ionicons name="person" size={40} color={colors.primary} />
             </View>
           )}
         </View>
         <Text
-          style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
+          style={[
+            typography.h1,
+            { color: colors.white, marginTop: 16, fontSize: 28 },
+          ]}
         >
           {user?.fullName || "User"}
         </Text>
         <Text
           style={[
             typography.body,
-            { color: colors.textSecondary, marginTop: 4 },
+            { color: "rgba(255,255,255,0.8)", marginTop: 4 },
           ]}
         >
           {user?.primaryEmailAddress?.emailAddress}
         </Text>
         <Badge
           label="Premium Member"
-          variant="primary"
+          variant="success"
           style={{ marginTop: 12 }}
         />
       </MinimalCard>
@@ -321,29 +356,145 @@ export default function ProfileScreen() {
             onPress={() => router.push("/personal-details")}
           />
           <View style={[styles.divider, { backgroundColor: colors.border }]} />
-          <ListItem
-            title="Fitness Profile"
-            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}
-              />
-            }
+
+          {/* Fitness Profile Card */}
+          <TouchableOpacity
             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"
@@ -372,65 +523,71 @@ export default function ProfileScreen() {
 
       {/* Gym Selection */}
       <View style={styles.section}>
-        <View style={styles.sectionHeader}>
-          <Text style={[typography.h3, { color: colors.textPrimary }]}>
-            Gym Selection
-          </Text>
-          <TouchableOpacity onPress={loadGyms}>
-            <Text
-              style={[
-                typography.body,
-                { color: colors.primary, fontWeight: "600" },
-              ]}
-            >
-              Refresh
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <MinimalCard variant="default">
-          {currentGymName && (
-            <View style={styles.currentGym}>
-              <Text
-                style={[typography.caption, { color: colors.textTertiary }]}
-              >
-                Current Gym
-              </Text>
-              <Text
+        <Text
+          style={[
+            typography.h3,
+            { color: colors.textPrimary, marginBottom: 12 },
+          ]}
+        >
+          Gym Selection
+        </Text>
+
+        <TouchableOpacity
+          onPress={() => setShowGymDropdown(!showGymDropdown)}
+          activeOpacity={0.85}
+        >
+          <MinimalCard variant="bordered" style={styles.dropdownCard}>
+            <View style={styles.dropdownHeader}>
+              <View>
+                <Text
+                  style={[typography.caption, { color: colors.textTertiary }]}
+                >
+                  Current Gym
+                </Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    { color: colors.textPrimary, marginTop: 2 },
+                  ]}
+                >
+                  {currentGymName || "No gym selected"}
+                </Text>
+              </View>
+              <View
                 style={[
-                  typography.h3,
-                  { color: colors.textPrimary, marginTop: 4 },
+                  styles.dropdownIcon,
+                  { backgroundColor: colors.surfaceElevated },
                 ]}
               >
-                {currentGymName}
-              </Text>
+                <Ionicons
+                  name={showGymDropdown ? "chevron-up" : "chevron-down"}
+                  size={20}
+                  color={colors.textSecondary}
+                />
+              </View>
             </View>
-          )}
+          </MinimalCard>
+        </TouchableOpacity>
 
-          {gymsLoading ? (
-            <View style={styles.loadingContainer}>
-              <ActivityIndicator color={colors.primary} />
-            </View>
-          ) : (
-            <>
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={styles.gymScroll}
-                contentContainerStyle={styles.gymScrollContent}
-              >
+        {showGymDropdown && (
+          <MinimalCard variant="elevated" style={styles.dropdownOptions}>
+            {gymsLoading ? (
+              <View style={styles.loadingContainer}>
+                <ActivityIndicator color={colors.primary} />
+              </View>
+            ) : (
+              <>
                 <TouchableOpacity
                   style={[
-                    styles.gymChip,
-                    {
-                      backgroundColor:
-                        selectedGymId === null
-                          ? `${colors.primary}20`
-                          : colors.surfaceElevated,
-                      borderColor:
-                        selectedGymId === null ? colors.primary : colors.border,
+                    styles.dropdownOption,
+                    selectedGymId === null && {
+                      backgroundColor: `${colors.primary}15`,
                     },
                   ]}
-                  onPress={() => setSelectedGymId(null)}
+                  onPress={() => {
+                    setSelectedGymId(null);
+                    setShowGymDropdown(false);
+                  }}
                 >
                   <Text
                     style={[
@@ -446,51 +603,78 @@ 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.gymChip,
-                      {
-                        backgroundColor:
-                          selectedGymId === gym.id
-                            ? `${colors.primary}20`
-                            : colors.surfaceElevated,
-                        borderColor:
-                          selectedGymId === gym.id
-                            ? colors.primary
-                            : colors.border,
+                      styles.dropdownOption,
+                      selectedGymId === gym.id && {
+                        backgroundColor: `${colors.primary}15`,
                       },
                     ]}
-                    onPress={() => setSelectedGymId(gym.id)}
+                    onPress={() => {
+                      setSelectedGymId(gym.id);
+                      setShowGymDropdown(false);
+                    }}
                   >
-                    <Text
-                      style={[
-                        typography.body,
-                        {
-                          color:
-                            selectedGymId === gym.id
-                              ? colors.primary
-                              : colors.textSecondary,
-                          fontWeight: selectedGymId === gym.id ? "600" : "400",
-                        },
-                      ]}
-                    >
-                      {gym.name}
-                    </Text>
+                    <View style={{ flex: 1 }}>
+                      <Text
+                        style={[
+                          typography.body,
+                          {
+                            color:
+                              selectedGymId === gym.id
+                                ? colors.primary
+                                : colors.textSecondary,
+                            fontWeight:
+                              selectedGymId === gym.id ? "600" : "400",
+                          },
+                        ]}
+                      >
+                        {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>
                 ))}
-              </ScrollView>
-              <MinimalButton
-                title="Apply Selection"
-                onPress={handleApplyGym}
-                variant="primary"
-                style={{ marginTop: 16 }}
-              />
-            </>
-          )}
-        </MinimalCard>
+                {selectedGymId !== currentGymId && (
+                  <MinimalButton
+                    title="Apply Selection"
+                    onPress={handleApplyGym}
+                    variant="primary"
+                    size="lg"
+                    fullWidth
+                    style={{ marginTop: 12 }}
+                  />
+                )}
+              </>
+            )}
+          </MinimalCard>
+        )}
       </View>
 
       {/* Support */}
@@ -580,8 +764,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    padding: 24,
+    padding: 20,
     paddingTop: 60,
+    paddingBottom: 100,
   },
   profileCard: {
     alignItems: "center",
@@ -640,4 +825,78 @@ 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,19 +130,24 @@ export default function RecommendationsScreen() {
       >
         {/* Header */}
         <View style={styles.header}>
-          <View>
-            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              ✨ AI Recommendations
+          <View style={{ flex: 1 }}>
+            <Text
+              style={[
+                typography.h1,
+                { color: colors.textPrimary, fontSize: 32 },
+              ]}
+            >
+              Recommendations
             </Text>
             <Text
               style={[
                 typography.body,
-                { color: colors.textSecondary, marginTop: 4 },
+                { color: colors.textSecondary, marginTop: 8 },
               ]}
             >
               {recommendations.length === 0
-                ? "Let's create your perfect plan! 🚀"
-                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`}
+                ? "Let's create your perfect plan!"
+                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
             </Text>
           </View>
           <TouchableOpacity
@@ -152,9 +157,10 @@ export default function RecommendationsScreen() {
           >
             <IconContainer
               variant="colored"
-              backgroundColor={`${colors.accent}20`}
+              backgroundColor={colors.accent}
+              size="lg"
             >
-              <Ionicons name="sparkles" size={24} color={colors.accent} />
+              <Ionicons name="sparkles" size={24} color={colors.white} />
               {unreadCount > 0 && (
                 <View
                   style={[
@@ -174,10 +180,11 @@ 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/app/fitness-profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import {
   View,
   Text,
@@ -9,13 +9,15 @@ import {
   Alert,
   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';
+} from "react-native";
+import { useRouter, Stack } from "expo-router";
+import { useAuth } from "@clerk/clerk-expo";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalCard } from "../components/MinimalCard";
+import { MinimalButton } from "../components/MinimalButton";
+import { IconContainer } from "../components/IconContainer";
+import { API_BASE_URL } from "../config/api";
 
 interface FitnessProfileData {
   height?: number;
@@ -30,29 +32,71 @@ interface FitnessProfileData {
 }
 
 const GENDER_OPTIONS = [
-  { label: 'Male', value: 'male', icon: 'male' },
-  { label: 'Female', value: 'female', icon: 'female' },
-  { label: 'Other', value: 'other', icon: 'transgender' },
+  { label: "Male", value: "male", icon: "male-outline" },
+  { label: "Female", value: "female", icon: "female-outline" },
+  { label: "Other", value: "other", icon: "transgender-outline" },
+  {
+    label: "Prefer not to say",
+    value: "prefer_not_to_say",
+    icon: "help-circle-outline",
+  },
 ];
 
 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 },
+  {
+    label: "Weight Loss",
+    value: "weight_loss",
+    icon: "trending-down",
+    color: "#FF3B3B",
+  },
+  {
+    label: "Muscle Gain",
+    value: "muscle_gain",
+    icon: "barbell",
+    color: "#0066FF",
+  },
+  { label: "Endurance", value: "endurance", icon: "bicycle", color: "#00D26A" },
+  {
+    label: "Flexibility",
+    value: "flexibility",
+    icon: "body",
+    color: "#7B2CBF",
+  },
+  {
+    label: "General Fitness",
+    value: "general_fitness",
+    icon: "fitness",
+    color: "#FFB800",
+  },
 ];
 
 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' },
+  {
+    label: "Sedentary",
+    value: "sedentary",
+    description: "Little to no exercise",
+  },
+  {
+    label: "Lightly Active",
+    value: "lightly_active",
+    description: "1-3 days/week",
+  },
+  {
+    label: "Moderately Active",
+    value: "moderately_active",
+    description: "3-5 days/week",
+  },
+  { label: "Very Active", value: "very_active", description: "6-7 days/week" },
+  {
+    label: "Extremely Active",
+    value: "extremely_active",
+    description: "Intense daily training",
+  },
 ];
 
 export default function FitnessProfileScreen() {
   const router = useRouter();
+  const { colors, typography } = useTheme();
   const { userId, getToken } = useAuth();
   const [loading, setLoading] = useState(false);
   const [fetchingProfile, setFetchingProfile] = useState(true);
@@ -66,34 +110,42 @@ export default function FitnessProfileScreen() {
     try {
       setFetchingProfile(true);
       const token = await getToken();
-      const response = await fetch(`${API_BASE_URL}/api/profile/fitness?userId=${userId}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
+      const response = await fetch(
+        `${API_BASE_URL}/api/profile/fitness?userId=${userId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
         },
-      });
+      );
 
       if (response.ok) {
         const data = await response.json();
         if (data.profile) {
+          let activityLevel = data.profile.activityLevel || "";
+          if (activityLevel === "light") activityLevel = "lightly_active";
+          if (activityLevel === "moderate") activityLevel = "moderately_active";
+          if (activityLevel === "active") activityLevel = "very_active";
+
           setProfileData({
             height: data.profile.height,
             weight: data.profile.weight,
             age: data.profile.age,
-            gender: data.profile.gender || '',
+            gender: data.profile.gender || "",
             fitnessGoal: Array.isArray(data.profile.fitnessGoals)
               ? data.profile.fitnessGoals[0]
-              : (typeof data.profile.fitnessGoals === 'string'
+              : 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 || '',
+                : "",
+            activityLevel: 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);
     }
@@ -104,40 +156,39 @@ export default function FitnessProfileScreen() {
       setLoading(true);
       const token = await getToken();
 
-      // 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,
+        gender: profileData.gender || undefined,
         fitnessGoals: profileData.fitnessGoal ? [profileData.fitnessGoal] : [],
-        activityLevel: profileData.activityLevel,
+        activityLevel: profileData.activityLevel || undefined,
         medicalConditions: profileData.medicalConditions,
         allergies: profileData.allergies,
         injuries: profileData.injuries,
       };
 
       const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
         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.error || '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);
     }
@@ -149,8 +200,13 @@ export default function FitnessProfileScreen() {
 
   if (fetchingProfile) {
     return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+      <View
+        style={[
+          styles.loadingContainer,
+          { backgroundColor: colors.background },
+        ]}
+      >
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     );
   }
@@ -158,15 +214,28 @@ export default function FitnessProfileScreen() {
   return (
     <>
       <Stack.Screen options={{ headerShown: false }} />
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
         {/* Header */}
-        <LinearGradient colors={theme.gradients.primary} style={styles.header}>
-          <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.primary,
+              paddingTop: Platform.OS === "ios" ? 60 : 40,
+            },
+          ]}
+        >
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => router.back()}
+          >
             <Ionicons name="arrow-back" size={24} color="#fff" />
           </TouchableOpacity>
-          <Text style={styles.headerTitle}>Fitness Profile</Text>
+          <Text style={[typography.h2, { color: "#fff" }]}>
+            Fitness Profile
+          </Text>
           <View style={{ width: 40 }} />
-        </LinearGradient>
+        </View>
 
         <ScrollView
           style={styles.scrollView}
@@ -175,87 +244,181 @@ export default function FitnessProfileScreen() {
         >
           {/* Basic Information */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Basic Information</Text>
-            <View style={styles.card}>
-              <View style={styles.row}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Basic Information
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
+              <View style={styles.inputRow}>
                 <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} />
+                  <Text
+                    style={[
+                      typography.label,
+                      { color: colors.textSecondary, marginBottom: 8 },
+                    ]}
+                  >
+                    HEIGHT (CM)
+                  </Text>
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      {
+                        backgroundColor: colors.surfaceElevated,
+                        borderColor: colors.border,
+                      },
+                    ]}
+                  >
+                    <Ionicons
+                      name="resize"
+                      size={20}
+                      color={colors.textTertiary}
+                    />
                     <TextInput
-                      style={styles.input}
-                      value={profileData.height?.toString() || ''}
+                      style={[styles.input, { color: colors.textPrimary }]}
+                      value={profileData.height?.toString() || ""}
                       onChangeText={(text) =>
-                        updateField('height', text ? parseFloat(text) : undefined)
+                        updateField(
+                          "height",
+                          text ? parseFloat(text) : undefined,
+                        )
                       }
                       keyboardType="decimal-pad"
                       placeholder="175"
-                      placeholderTextColor={theme.colors.gray400}
+                      placeholderTextColor={colors.textTertiary}
                     />
                   </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} />
+                  <Text
+                    style={[
+                      typography.label,
+                      { color: colors.textSecondary, marginBottom: 8 },
+                    ]}
+                  >
+                    WEIGHT (KG)
+                  </Text>
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      {
+                        backgroundColor: colors.surfaceElevated,
+                        borderColor: colors.border,
+                      },
+                    ]}
+                  >
+                    <Ionicons
+                      name="scale"
+                      size={20}
+                      color={colors.textTertiary}
+                    />
                     <TextInput
-                      style={styles.input}
-                      value={profileData.weight?.toString() || ''}
+                      style={[styles.input, { color: colors.textPrimary }]}
+                      value={profileData.weight?.toString() || ""}
                       onChangeText={(text) =>
-                        updateField('weight', text ? parseFloat(text) : undefined)
+                        updateField(
+                          "weight",
+                          text ? parseFloat(text) : undefined,
+                        )
                       }
                       keyboardType="decimal-pad"
                       placeholder="70"
-                      placeholderTextColor={theme.colors.gray400}
+                      placeholderTextColor={colors.textTertiary}
                     />
                   </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} />
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  AGE
+                </Text>
+                <View
+                  style={[
+                    styles.inputContainer,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                    },
+                  ]}
+                >
+                  <Ionicons
+                    name="calendar"
+                    size={20}
+                    color={colors.textTertiary}
+                  />
                   <TextInput
-                    style={styles.input}
-                    value={profileData.age?.toString() || ''}
+                    style={[styles.input, { color: colors.textPrimary }]}
+                    value={profileData.age?.toString() || ""}
                     onChangeText={(text) =>
-                      updateField('age', text ? parseInt(text, 10) : undefined)
+                      updateField("age", text ? parseInt(text, 10) : undefined)
                     }
                     keyboardType="number-pad"
                     placeholder="25"
-                    placeholderTextColor={theme.colors.gray400}
+                    placeholderTextColor={colors.textTertiary}
                   />
                 </View>
               </View>
-            </View>
+            </MinimalCard>
           </View>
 
           {/* Gender Selection */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Gender</Text>
-            <View style={styles.optionsRow}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Gender
+            </Text>
+            <View style={styles.genderRow}>
               {GENDER_OPTIONS.map((option) => (
                 <TouchableOpacity
                   key={option.value}
                   style={[
-                    styles.optionCard,
-                    profileData.gender === option.value && styles.optionCardActive,
+                    styles.genderCard,
+                    {
+                      backgroundColor:
+                        profileData.gender === option.value
+                          ? colors.primary
+                          : colors.surfaceElevated,
+                      borderColor:
+                        profileData.gender === option.value
+                          ? colors.primary
+                          : colors.border,
+                    },
                   ]}
-                  onPress={() => updateField('gender', option.value)}
+                  onPress={() => updateField("gender", option.value)}
                 >
                   <Ionicons
                     name={option.icon as any}
                     size={24}
                     color={
                       profileData.gender === option.value
-                        ? theme.colors.primary
-                        : theme.colors.gray400
+                        ? "#fff"
+                        : colors.textTertiary
                     }
                   />
                   <Text
                     style={[
-                      styles.optionLabel,
-                      profileData.gender === option.value && styles.optionLabelActive,
+                      typography.caption,
+                      {
+                        color:
+                          profileData.gender === option.value
+                            ? "#fff"
+                            : colors.textSecondary,
+                        fontWeight:
+                          profileData.gender === option.value ? "700" : "500",
+                        marginTop: 6,
+                      },
                     ]}
                   >
                     {option.label}
@@ -267,117 +430,236 @@ export default function FitnessProfileScreen() {
 
           {/* Fitness Goal */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Primary Fitness Goal</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Primary Fitness Goal
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
               {FITNESS_GOAL_OPTIONS.map((option, index) => (
                 <React.Fragment key={option.value}>
                   <TouchableOpacity
                     style={styles.listItem}
-                    onPress={() => updateField('fitnessGoal', option.value)}
+                    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
+                      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>
+                    <Text
+                      style={[
+                        typography.bodyEmphasis,
+                        { color: colors.textPrimary, flex: 1 },
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
                     {profileData.fitnessGoal === option.value && (
-                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={24}
+                        color={colors.primary}
+                      />
                     )}
                   </TouchableOpacity>
-                  {index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                  {index < FITNESS_GOAL_OPTIONS.length - 1 && (
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  )}
                 </React.Fragment>
               ))}
-            </View>
+            </MinimalCard>
           </View>
 
           {/* Activity Level */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Activity Level</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Activity Level
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
               {ACTIVITY_LEVEL_OPTIONS.map((option, index) => (
                 <React.Fragment key={option.value}>
                   <TouchableOpacity
                     style={styles.listItem}
-                    onPress={() => updateField('activityLevel', option.value)}
+                    onPress={() => updateField("activityLevel", option.value)}
                   >
                     <View style={{ flex: 1 }}>
-                      <Text style={styles.listItemText}>{option.label}</Text>
-                      <Text style={styles.listItemDescription}>{option.description}</Text>
+                      <Text
+                        style={[
+                          typography.bodyEmphasis,
+                          { color: colors.textPrimary },
+                        ]}
+                      >
+                        {option.label}
+                      </Text>
+                      <Text
+                        style={[
+                          typography.caption,
+                          { color: colors.textTertiary, marginTop: 2 },
+                        ]}
+                      >
+                        {option.description}
+                      </Text>
                     </View>
                     {profileData.activityLevel === option.value && (
-                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={24}
+                        color={colors.primary}
+                      />
                     )}
                   </TouchableOpacity>
-                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && (
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  )}
                 </React.Fragment>
               ))}
-            </View>
+            </MinimalCard>
           </View>
 
           {/* Health Information */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Health Information (Optional)</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Health Information
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Medical Conditions</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  MEDICAL CONDITIONS
+                </Text>
                 <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.medicalConditions || ''}
-                  onChangeText={(text) => updateField('medicalConditions', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.medicalConditions || ""}
+                  onChangeText={(text) =>
+                    updateField("medicalConditions", text)
+                  }
                   placeholder="e.g., Asthma, diabetes..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                   multiline
                   numberOfLines={3}
                   textAlignVertical="top"
                 />
               </View>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Allergies</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  ALLERGIES
+                </Text>
                 <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.allergies || ''}
-                  onChangeText={(text) => updateField('allergies', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.allergies || ""}
+                  onChangeText={(text) => updateField("allergies", text)}
                   placeholder="e.g., Peanuts, latex..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                   multiline
                   numberOfLines={3}
                   textAlignVertical="top"
                 />
               </View>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Injuries</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  INJURIES
+                </Text>
                 <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.injuries || ''}
-                  onChangeText={(text) => updateField('injuries', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.injuries || ""}
+                  onChangeText={(text) => updateField("injuries", text)}
                   placeholder="e.g., Previous knee injury..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                   multiline
                   numberOfLines={3}
                   textAlignVertical="top"
                 />
               </View>
-            </View>
+            </MinimalCard>
           </View>
+
+          <View style={{ height: 120 }} />
         </ScrollView>
 
         {/* Save Button */}
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={[styles.saveButton, loading && styles.saveButtonDisabled]}
+        <View
+          style={[
+            styles.footer,
+            {
+              backgroundColor: colors.background,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            title="Save Profile"
             onPress={handleSave}
-            disabled={loading}
-          >
-            <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>
+            variant="primary"
+            size="xl"
+            fullWidth
+            loading={loading}
+          />
         </View>
       </View>
     </>
@@ -387,34 +669,26 @@ export default function FitnessProfileScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   loadingContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: theme.colors.background,
+    justifyContent: "center",
+    alignItems: "center",
   },
   header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingTop: Platform.OS === 'ios' ? 60 : 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     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',
+    borderRadius: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    justifyContent: "center",
+    alignItems: "center",
   },
   scrollView: {
     flex: 1,
@@ -424,148 +698,77 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray900,
-    marginBottom: 12,
+    marginBottom: 28,
   },
   card: {
-    backgroundColor: '#fff',
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    ...theme.shadows.subtle,
-    borderWidth: 1,
-    borderColor: theme.colors.gray100,
+    padding: 4,
   },
-  row: {
-    flexDirection: 'row',
+  inputRow: {
+    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,
+    marginBottom: 4,
   },
   inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: theme.colors.gray50,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.gray200,
-    paddingHorizontal: 12,
-    gap: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 14,
+    borderWidth: 1.5,
+    paddingHorizontal: 14,
+    gap: 10,
   },
   input: {
     flex: 1,
-    paddingVertical: 12,
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray900,
+    paddingVertical: 14,
+    fontSize: 16,
+    fontWeight: "600",
   },
   textArea: {
-    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,
+    borderRadius: 14,
+    borderWidth: 1.5,
+    padding: 14,
+    fontSize: 16,
+    minHeight: 90,
   },
-  optionsRow: {
-    flexDirection: 'row',
-    gap: 12,
+  genderRow: {
+    flexDirection: "row",
+    gap: 10,
   },
-  optionCard: {
+  genderCard: {
     flex: 1,
-    backgroundColor: '#fff',
-    borderRadius: theme.borderRadius.lg,
-    padding: 16,
-    alignItems: 'center',
-    gap: 8,
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderRadius: 14,
     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,
+    alignItems: "center",
   },
   listItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    gap: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 12,
+    gap: 14,
   },
   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,
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
   },
   divider: {
     height: 1,
-    backgroundColor: theme.colors.gray100,
+    marginLeft: 58,
   },
   footer: {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     padding: 20,
-    paddingBottom: Platform.OS === 'ios' ? 40 : 20,
-    backgroundColor: '#fff',
+    paddingBottom: 34,
     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',
   },
 });

apps/mobile/src/components/ActivityRing.tsx

@@ -0,0 +1,128 @@
+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,49 +10,41 @@ type BadgeVariant =
   | "danger"
   | "info"
   | "primary";
-type BadgeSize = "sm" | "md";
+type BadgeSize = "sm" | "md" | "lg";
 
 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: 5,
-      paddingHorizontal: 10,
+      paddingVertical: 6,
+      paddingHorizontal: 12,
       fontSize: fontSize.xs,
     },
     md: {
-      paddingVertical: 6,
-      paddingHorizontal: 12,
+      paddingVertical: 8,
+      paddingHorizontal: 14,
       fontSize: fontSize.sm,
     },
+    lg: {
+      paddingVertical: 10,
+      paddingHorizontal: 18,
+      fontSize: fontSize.base,
+    },
   };
 
   const variantStyles: Record<
@@ -64,24 +56,24 @@ export function Badge({
       color: colors.textSecondary,
     },
     success: {
-      backgroundColor: `${colors.success}20`, // 20% opacity
-      color: colors.success,
+      backgroundColor: colors.success,
+      color: colors.white,
     },
     warning: {
-      backgroundColor: `${colors.warning}20`,
-      color: colors.warning,
+      backgroundColor: colors.warning,
+      color: colors.black,
     },
     danger: {
-      backgroundColor: `${colors.danger}20`,
-      color: colors.danger,
+      backgroundColor: colors.danger,
+      color: colors.white,
     },
     info: {
-      backgroundColor: `${colors.info}20`,
-      color: colors.info,
+      backgroundColor: colors.info,
+      color: colors.white,
     },
     primary: {
-      backgroundColor: `${colors.primary}20`,
-      color: colors.primary,
+      backgroundColor: colors.primary,
+      color: colors.white,
     },
   };
 
@@ -103,10 +95,11 @@ export function Badge({
           {
             color: variantStyles[variant].color,
             fontSize: sizeStyles[size].fontSize,
-            fontWeight: fontWeight.medium,
+            fontWeight: fontWeight.bold,
           },
         ]}
       >
+        {emoji && `${emoji} `}
         {label}
       </Text>
     </View>
@@ -115,7 +108,7 @@ export function Badge({
 
 const styles = StyleSheet.create({
   badge: {
-    borderRadius: 999, // Full pill shape
+    borderRadius: 12,
     alignSelf: "flex-start",
   },
   label: {

apps/mobile/src/components/CustomTabBar.tsx

@@ -1,21 +1,10 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity, Text } 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,
@@ -71,6 +60,23 @@ 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}
@@ -85,7 +91,7 @@ export function CustomTabBar({
             <View style={styles.iconWrapper}>
               <Ionicons
                 name={getIconName(route.name, isFocused)}
-                size={24}
+                size={26}
                 color={isFocused ? colors.primary : colors.textTertiary}
               />
               {isFocused && (
@@ -97,6 +103,17 @@ export function CustomTabBar({
                 />
               )}
             </View>
+            <Text
+              style={[
+                styles.label,
+                {
+                  color: isFocused ? colors.primary : colors.textTertiary,
+                  fontWeight: isFocused ? "700" : "500",
+                },
+              ]}
+            >
+              {getLabel(route.name)}
+            </Text>
           </TouchableOpacity>
         );
       })}
@@ -107,8 +124,9 @@ export function CustomTabBar({
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    height: 56,
+    height: 70,
     borderTopWidth: 1,
+    paddingTop: 8,
   },
   tabItem: {
     flex: 1,
@@ -121,9 +139,13 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   indicator: {
-    width: 24,
-    height: 3,
-    borderRadius: 999,
+    width: 20,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 4,
+  },
+  label: {
+    fontSize: 11,
     marginTop: 4,
   },
 });

apps/mobile/src/components/GoalProgressCard.tsx

@@ -122,15 +122,17 @@ export function GoalProgressCard({
 
   return (
     <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
         <MinimalCard
-          variant="bordered"
+          variant="elevated"
           style={[
             styles.card,
             isCompleted && {
-              backgroundColor: colors.overlayLight,
+              backgroundColor: colors.surfaceElevated,
+              opacity: 0.8,
             },
           ]}
+          padding={20}
         >
           {/* Header */}
           <View style={styles.header}>
@@ -289,13 +291,14 @@ export function GoalProgressCard({
 
 const styles = StyleSheet.create({
   card: {
-    marginBottom: 12,
+    marginBottom: 16,
+    borderRadius: 20,
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "flex-start",
-    marginBottom: 12,
+    marginBottom: 16,
   },
   titleRow: {
     flexDirection: "row",
@@ -304,23 +307,23 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
-    marginLeft: 12,
+    marginLeft: 14,
   },
   actions: {
     flexDirection: "row",
-    gap: 8,
+    gap: 12,
   },
   actionButton: {
-    padding: 4,
+    padding: 6,
   },
   progressSection: {
-    marginBottom: 12,
+    marginBottom: 16,
   },
   progressInfo: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 8,
+    marginBottom: 10,
   },
   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 { theme } from "../styles/theme";
+import { useTheme } from "../contexts/ThemeContext";
 
 interface GoalTypeData {
   goalType: string;
@@ -17,37 +17,40 @@ export function GoalTypeBreakdownChart({
   data,
   title = "Goals by Type",
 }: GoalTypeBreakdownChartProps) {
+  const { colors, typography } = useTheme();
   const screenWidth = Dimensions.get("window").width;
 
-  // Color palette for different goal types
-  const colors = [
-    "#3b82f6", // Blue
-    "#10b981", // Green
-    "#f59e0b", // Orange
-    "#8b5cf6", // Purple
-    "#ec4899", // Pink
-    "#06b6d4", // Cyan
+  const chartColors = [
+    colors.primary,
+    colors.success,
+    colors.warning,
+    colors.accent,
+    colors.secondary,
+    colors.info,
   ];
 
-  // 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: colors[index % colors.length],
-    legendFontColor: theme.colors.gray600,
+    color: chartColors[index % chartColors.length],
+    legendFontColor: colors.textSecondary,
     legendFontSize: 12,
   }));
 
-  const chartConfig = {
-    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  };
+  const totalGoals = data.reduce((sum, item) => sum + item.count, 0);
 
   if (data.length === 0) {
     return (
       <View style={styles.container}>
-        <Text style={styles.title}>{title}</Text>
+        <Text style={[typography.h4, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
         <View style={styles.emptyState}>
-          <Text style={styles.emptyText}>No goals yet</Text>
+          <Text style={[typography.body, { color: colors.textTertiary }]}>
+            No goals yet
+          </Text>
         </View>
       </View>
     );
@@ -55,46 +58,123 @@ export function GoalTypeBreakdownChart({
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
+      <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 - 60}
-          height={200}
-          chartConfig={chartConfig}
+          width={screenWidth - 80}
+          height={160}
+          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: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 16,
-    ...theme.shadows.medium,
+    borderRadius: 16,
+    padding: 4,
   },
-  title: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginBottom: 12,
+  summaryRow: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    marginBottom: 16,
+    paddingVertical: 12,
+  },
+  summaryItem: {
+    alignItems: "center",
   },
   chartContainer: {
     alignItems: "center",
+    marginBottom: 16,
+  },
+  legendGrid: {
+    gap: 10,
+  },
+  legendItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  legendDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
   },
   emptyState: {
-    paddingVertical: 40,
+    paddingVertical: 32,
     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";
+type IconContainerSize = "sm" | "md" | "lg" | "xl";
 
 interface IconContainerProps {
   children: React.ReactNode;
@@ -13,19 +13,6 @@ 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",
@@ -37,19 +24,24 @@ export function IconContainer({
 
   const sizeStyles: Record<IconContainerSize, ViewStyle> = {
     sm: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
+      width: 36,
+      height: 36,
+      borderRadius: 10,
     },
     md: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-    },
-    lg: {
       width: 48,
       height: 48,
-      borderRadius: 24,
+      borderRadius: 14,
+    },
+    lg: {
+      width: 56,
+      height: 56,
+      borderRadius: 16,
+    },
+    xl: {
+      width: 64,
+      height: 64,
+      borderRadius: 18,
     },
   };
 

apps/mobile/src/components/MinimalButton.tsx

@@ -11,8 +11,13 @@ import {
 import { useTheme } from "../contexts/ThemeContext";
 import { fontSize, fontWeight } from "../styles/typography";
 
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "danger"
+  | "success";
+type ButtonSize = "sm" | "md" | "lg" | "xl";
 
 interface MinimalButtonProps {
   title: string;
@@ -23,22 +28,9 @@ 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,
@@ -48,37 +40,42 @@ 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: 10,
+      borderRadius: 14,
       alignItems: "center",
       justifyContent: "center",
       opacity: isDisabled ? 0.5 : 1,
     };
 
-    // Size-specific padding
     const sizeStyles: Record<
       ButtonSize,
       { paddingVertical: number; paddingHorizontal: number }
     > = {
-      sm: { paddingVertical: 12, paddingHorizontal: 16 },
-      md: { paddingVertical: 14, paddingHorizontal: 24 },
-      lg: { paddingVertical: 16, paddingHorizontal: 32 },
+      sm: { paddingVertical: 12, paddingHorizontal: 20 },
+      md: { paddingVertical: 16, paddingHorizontal: 28 },
+      lg: { paddingVertical: 18, paddingHorizontal: 36 },
+      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: 1.5,
+        borderWidth: 2,
         borderColor: colors.primary,
       },
       tertiary: {
@@ -86,6 +83,19 @@ 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,
       },
     };
 
@@ -93,29 +103,23 @@ export function MinimalButton({
       ...baseStyle,
       ...sizeStyles[size],
       ...variantStyles[variant],
+      ...(fullWidth && { width: "100%" }),
     };
   };
 
-  // Get text styles based on variant
   const getTextStyle = (): TextStyle => {
     const baseTextStyle: TextStyle = {
-      fontSize: fontSize.base,
-      fontWeight: fontWeight.semibold,
+      fontSize: size === "sm" ? fontSize.sm : fontSize.md,
+      fontWeight: fontWeight.bold,
+      letterSpacing: 0.5,
     };
 
     const variantTextStyles: Record<ButtonVariant, TextStyle> = {
-      primary: {
-        color: colors.white,
-      },
-      secondary: {
-        color: colors.primary,
-      },
-      tertiary: {
-        color: colors.primary,
-      },
-      danger: {
-        color: colors.white,
-      },
+      primary: { color: colors.white },
+      secondary: { color: colors.primary },
+      tertiary: { color: colors.primary },
+      danger: { color: colors.white },
+      success: { color: colors.white },
     };
 
     return {
@@ -129,7 +133,7 @@ export function MinimalButton({
       style={[getButtonStyle(), style]}
       onPress={onPress}
       disabled={isDisabled}
-      activeOpacity={0.7}
+      activeOpacity={0.85}
     >
       {loading ? (
         <ActivityIndicator
@@ -146,7 +150,3 @@ export function MinimalButton({
     </TouchableOpacity>
   );
 }
-
-const styles = StyleSheet.create({
-  // No static styles needed - all dynamic based on theme
-});

apps/mobile/src/components/MinimalCard.tsx

@@ -8,28 +8,22 @@ import {
 } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
-type CardVariant = "default" | "elevated" | "bordered";
+type CardVariant = "default" | "elevated" | "bordered" | "gradient";
 
 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();
 
@@ -37,13 +31,20 @@ export function MinimalCard({
     styles.base,
     {
       backgroundColor: colors.surface,
+      padding: padding,
     },
     variant === "default" && styles.default,
-    variant === "elevated" && styles.elevated,
+    variant === "elevated" && {
+      ...styles.elevated,
+      backgroundColor: colors.surfaceElevated,
+    },
     variant === "bordered" && {
       borderWidth: 1,
       borderColor: colors.border,
     },
+    variant === "gradient" && {
+      backgroundColor: colors.surfaceElevated,
+    },
     style,
   ];
 
@@ -52,7 +53,7 @@ export function MinimalCard({
       <TouchableOpacity
         style={cardStyles}
         onPress={onPress}
-        activeOpacity={0.7}
+        activeOpacity={0.85}
       >
         {children}
       </TouchableOpacity>
@@ -64,21 +65,20 @@ export function MinimalCard({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 12,
-    padding: 16,
+    borderRadius: 20,
   },
   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: 2,
+    elevation: 3,
+  },
+  elevated: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 6,
   },
 });

apps/mobile/src/components/ProgressBar.tsx

@@ -3,43 +3,28 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
 interface ProgressBarProps {
-  progress: number; // 0-1 (e.g., 0.75 for 75%)
+  progress: number;
   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 = 8,
+  height = 10,
   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.border;
+  const trackColor = backgroundColor || colors.surfaceElevated;
   const fillColor = color || colors.primary;
 
   return (

apps/mobile/src/components/SectionHeader.tsx

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

apps/mobile/src/config/api.ts

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

apps/mobile/src/styles/typography.ts

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