diff --git a/app/profile/[userId]/page.tsx b/app/profile/[userId]/page.tsx
index 743a525..9cdef84 100644
--- a/app/profile/[userId]/page.tsx
+++ b/app/profile/[userId]/page.tsx
@@ -5,6 +5,10 @@ import { useBounties } from "@/hooks/use-bounties";
 import { ReputationCard } from "@/components/reputation/reputation-card";
 import { CompletionHistory } from "@/components/reputation/completion-history";
 import { MyClaims, type MyClaim } from "@/components/reputation/my-claims";
+import {
+  EarningsSummary,
+  type EarningsSummary as EarningsSummaryType,
+} from "@/components/reputation/earnings-summary";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -13,185 +17,264 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useMemo } from "react";
 
+function deriveBountyStatus(bounty: {
+  status: string;
+  claimExpiresAt?: string | null;
+}): "completed" | "in-review" | "active" {
+  if (bounty.status === "closed") return "completed";
+  if (bounty.status === "claimed" && bounty.claimExpiresAt) {
+    const expiry = new Date(bounty.claimExpiresAt);
+    if (!Number.isNaN(expiry.getTime()) && expiry < new Date()) {
+      return "in-review";
+    }
+  }
+  return "active";
+}
+
 export default function ProfilePage() {
-    const params = useParams();
-    const userId = params.userId as string;
-    const { data: reputation, isLoading, error } = useContributorReputation(userId);
-    const { data: bountyResponse } = useBounties();
-
-    const MAX_MOCK_HISTORY = 50;
-
-    const mockHistory = useMemo(() => {
-        if (!reputation) return [];
-        const count = Math.min(reputation.stats.totalCompleted ?? 0, MAX_MOCK_HISTORY);
-        return Array(count).fill(null).map((_, i) => ({
-            id: `bounty-${i}`,
-            bountyId: `b-${i}`,
-            bountyTitle: `Implemented feature #${100 + i}`,
-            projectName: "Drips Protocol",
-            projectLogoUrl: null,
-            difficulty: ["BEGINNER", "INTERMEDIATE", "ADVANCED"][i % 3] as "BEGINNER" | "INTERMEDIATE" | "ADVANCED",
-            rewardAmount: 500,
-            rewardCurrency: "USDC",
-            claimedAt: "2023-01-01T00:00:00Z",
-            completedAt: "2024-01-15T12:00:00Z",
-            completionTimeHours: 48,
-            maintainerRating: 5,
-            maintainerFeedback: "Great work!",
-            pointsEarned: 150
-        }));
-    }, [reputation]);
-
-    const myClaims = useMemo<MyClaim[]>(() => {
-        const bounties = bountyResponse?.data ?? [];
-
-        return bounties
-            .filter((bounty) => bounty.claimedBy === userId)
-            .map((bounty) => {
-                let status = "active";
-
-                if (bounty.status === "closed") {
-                    status = "completed";
-                } else if (bounty.status === "claimed" && bounty.claimExpiresAt) {
-                    const claimExpiry = new Date(bounty.claimExpiresAt);
-                    if (!Number.isNaN(claimExpiry.getTime()) && claimExpiry < new Date()) {
-                        status = "in-review";
-                    }
-                }
-
-                return {
-                    bountyId: bounty.id,
-                    title: bounty.issueTitle,
-                    status,
-                    rewardAmount: bounty.rewardAmount ?? undefined,
-                };
-            });
-    }, [bountyResponse?.data, userId]);
-
-    if (isLoading) {
-        return (
-            <div className="container mx-auto py-8">
-                <Skeleton className="h-10 w-32 mb-8" />
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <Skeleton className="h-100 md:col-span-1" />
-                    <Skeleton className="h-100 md:col-span-2" />
-                </div>
-            </div>
-        );
+  const params = useParams();
+  const userId = params.userId as string;
+  const {
+    data: reputation,
+    isLoading,
+    error,
+  } = useContributorReputation(userId);
+  const {
+    data: bountyResponse,
+    isLoading: isBountiesLoading,
+    error: bountiesError,
+  } = useBounties();
+
+  const completionHistory = useMemo(() => {
+    const bounties = bountyResponse?.data ?? [];
+    return bounties
+      .filter((b) => b.claimedBy === userId && b.status === "closed")
+      .map((b) => ({
+        id: b.id,
+        bountyId: b.id,
+        bountyTitle: b.issueTitle,
+        projectName: b.projectName,
+        projectLogoUrl: b.projectLogoUrl,
+        difficulty: (b.difficulty?.toUpperCase() ?? "BEGINNER") as
+          | "BEGINNER"
+          | "INTERMEDIATE"
+          | "ADVANCED",
+        rewardAmount: b.rewardAmount ?? 0,
+        rewardCurrency: b.rewardCurrency,
+        claimedAt: b.claimedAt ?? b.createdAt,
+        completedAt: b.updatedAt,
+        completionTimeHours: 0,
+        maintainerRating: null,
+        maintainerFeedback: null,
+        pointsEarned: 0,
+      }));
+  }, [bountyResponse?.data, userId]);
+
+  const earningsSummary = useMemo<EarningsSummaryType>(() => {
+    const currency = reputation?.stats.earningsCurrency ?? "USDC";
+    const allBounties = bountyResponse?.data ?? [];
+    const userBounties = allBounties.filter((b) => b.claimedBy === userId);
+
+    let totalEarned = 0;
+    let pendingAmount = 0;
+    const payoutHistory: EarningsSummaryType["payoutHistory"] = [];
+
+    for (const bounty of userBounties) {
+      const amount = bounty.rewardAmount ?? 0;
+      const status = deriveBountyStatus(bounty);
+
+      if (status === "completed") {
+        totalEarned += amount;
+        // Use claimExpiresAt as a proxy for payout date, fall back to createdAt.
+        const payoutDate = bounty.claimExpiresAt ?? bounty.createdAt;
+        payoutHistory.push({ amount, date: payoutDate, status: "completed" });
+      } else if (status === "in-review") {
+        pendingAmount += amount;
+        // claimExpiresAt is guaranteed when status is "in-review"
+        payoutHistory.push({
+          amount,
+          date: bounty.claimExpiresAt!,
+          status: "processing",
+        });
+      } else {
+        pendingAmount += amount;
+        payoutHistory.push({
+          amount,
+          date: bounty.claimExpiresAt ?? bounty.createdAt,
+          status: "processing",
+        });
+      }
     }
 
-    if (error) {
-        // Check if it's a 404 (Not Found)
-        const apiError = error as { status?: number; message?: string };
-        const isNotFound = apiError?.status === 404 || apiError?.message?.includes("404");
-
-        if (isNotFound) {
-            return (
-                <div className="container mx-auto py-16 text-center">
-                    <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
-                    <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
-                    <p className="text-muted-foreground mb-6">
-                        We could not find a reputation profile for this user.
-                    </p>
-                    <Button asChild variant="outline">
-                        <Link href="/">Return Home</Link>
-                    </Button>
-                </div>
-            );
-        }
-
-        // Generic Error
-        return (
-            <div className="container mx-auto py-16 text-center">
-                <AlertCircle className="w-12 h-12 mx-auto text-destructive mb-4" />
-                <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
-                <p className="text-muted-foreground mb-6">
-                    We encountered an error while loading the profile.
-                </p>
-                <Button variant="outline" onClick={() => window.location.reload()}>
-                    Try Again
-                </Button>
-            </div>
-        );
+    // If no real claim data, fall back to reputation stats
+    if (userBounties.length === 0 && reputation) {
+      totalEarned = reputation.stats.totalEarnings;
+      // pendingAmount has no reputation-stats equivalent; intentionally left as 0
     }
 
-    if (!reputation) {
-        return (
-            <div className="container mx-auto py-16 text-center">
-                <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
-                <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
-                <p className="text-muted-foreground mb-6">
-                    We could not find a reputation profile for this user.
-                </p>
-                <Button asChild variant="outline">
-                    <Link href="/">Return Home</Link>
-                </Button>
-            </div>
-        );
+    return { totalEarned, pendingAmount, currency, payoutHistory };
+  }, [bountyResponse?.data, userId, reputation]);
+
+  const myClaims = useMemo<MyClaim[]>(() => {
+    const bounties = bountyResponse?.data ?? [];
+
+    return bounties
+      .filter((bounty) => bounty.claimedBy === userId)
+      .map((bounty) => ({
+        bountyId: bounty.id,
+        title: bounty.issueTitle,
+        status: deriveBountyStatus(bounty),
+        rewardAmount: bounty.rewardAmount ?? undefined,
+      }));
+  }, [bountyResponse?.data, userId]);
+
+  if (isLoading || isBountiesLoading) {
+    return (
+      <div className="container mx-auto py-8">
+        <Skeleton className="h-10 w-32 mb-8" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <Skeleton className="h-100 md:col-span-1" />
+          <Skeleton className="h-100 md:col-span-2" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    // Check if it's a 404 (Not Found)
+    const apiError = error as { status?: number; message?: string };
+    const isNotFound =
+      apiError?.status === 404 || apiError?.message?.includes("404");
+
+    if (isNotFound) {
+      return (
+        <div className="container mx-auto py-16 text-center">
+          <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+          <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
+          <p className="text-muted-foreground mb-6">
+            We could not find a reputation profile for this user.
+          </p>
+          <Button asChild variant="outline">
+            <Link href="/">Return Home</Link>
+          </Button>
+        </div>
+      );
     }
 
+    // Generic Error
+    return (
+      <div className="container mx-auto py-16 text-center">
+        <AlertCircle className="w-12 h-12 mx-auto text-destructive mb-4" />
+        <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
+        <p className="text-muted-foreground mb-6">
+          We encountered an error while loading the profile.
+        </p>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  if (!reputation) {
     return (
-        <div className="container max-w-6xl mx-auto py-8 px-4">
-            <Button asChild variant="ghost" size="sm" className="mb-6 -ml-2 text-muted-foreground">
-                <Link href="/">
-                    <ChevronLeft className="w-4 h-4 mr-1" />
-                    Back to Home
-                </Link>
-            </Button>
-
-            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-                {/* Left Sidebar: Reputation Card */}
-                <div className="lg:col-span-4 space-y-6">
-                    <ReputationCard reputation={reputation} />
-
-                    {/* Additional Sidebar Info could go here */}
+      <div className="container mx-auto py-16 text-center">
+        <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+        <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
+        <p className="text-muted-foreground mb-6">
+          We could not find a reputation profile for this user.
+        </p>
+        <Button asChild variant="outline">
+          <Link href="/">Return Home</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-6xl mx-auto py-8 px-4">
+      <Button
+        asChild
+        variant="ghost"
+        size="sm"
+        className="mb-6 -ml-2 text-muted-foreground"
+      >
+        <Link href="/">
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          Back to Home
+        </Link>
+      </Button>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+        {/* Left Sidebar: Reputation Card */}
+        <div className="lg:col-span-4 space-y-6">
+          <ReputationCard reputation={reputation} />
+
+          {/* Additional Sidebar Info could go here */}
+        </div>
+
+        {/* Main Content: Activity & History */}
+        <div className="lg:col-span-8">
+          <Tabs defaultValue="history" className="w-full">
+            <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
+              <TabsTrigger
+                value="history"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
+              >
+                Bounty History
+              </TabsTrigger>
+              <TabsTrigger
+                value="analytics"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
+              >
+                Analytics
+              </TabsTrigger>
+              <TabsTrigger
+                value="claims"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
+              >
+                My Claims
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="history" className="mt-6">
+              <h2 className="text-xl font-bold mb-4">Activity History</h2>
+              {bountiesError ? (
+                <div className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  Failed to load bounty history. Please try again.
                 </div>
+              ) : (
+                <CompletionHistory
+                  records={completionHistory}
+                  description={`Showing ${completionHistory.length} completed bounti${completionHistory.length === 1 ? "y" : "es"}.`}
+                />
+              )}
+            </TabsContent>
+
+            <TabsContent value="analytics" className="mt-6">
+              <div className="p-8 border rounded-lg text-center text-muted-foreground bg-secondary/5">
+                Detailed analytics coming soon.
+              </div>
+            </TabsContent>
 
-                {/* Main Content: Activity & History */}
-                <div className="lg:col-span-8">
-                    <Tabs defaultValue="history" className="w-full">
-                        <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
-                            <TabsTrigger
-                                value="history"
-                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
-                            >
-                                Bounty History
-                            </TabsTrigger>
-                            <TabsTrigger
-                                value="analytics"
-                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
-                            >
-                                Analytics
-                            </TabsTrigger>
-                            <TabsTrigger
-                                value="claims"
-                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
-                            >
-                                My Claims
-                            </TabsTrigger>
-                        </TabsList>
-
-                        <TabsContent value="history" className="mt-6">
-                            <h2 className="text-xl font-bold mb-4">Activity History</h2>
-                            <CompletionHistory
-                                records={mockHistory}
-                                description={`Showing the last ${mockHistory.length} completed bounties.`}
-                            />
-                        </TabsContent>
-
-                        <TabsContent value="analytics" className="mt-6">
-                            <div className="p-8 border rounded-lg text-center text-muted-foreground bg-secondary/5">
-                                Detailed analytics coming soon.
-                            </div>
-                        </TabsContent>
-
-                        <TabsContent value="claims" className="mt-6">
-                            <h2 className="text-xl font-bold mb-4">My Claims</h2>
-                            <MyClaims claims={myClaims} />
-                        </TabsContent>
-                    </Tabs>
+            <TabsContent value="claims" className="mt-6">
+              <h2 className="text-xl font-bold mb-4">My Claims</h2>
+              {bountiesError ? (
+                <div className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  Failed to load claims and earnings. Please try again.
                 </div>
-            </div>
+              ) : (
+                <div className="space-y-6">
+                  <EarningsSummary earnings={earningsSummary} />
+                  <MyClaims claims={myClaims} />
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/components/reputation/earnings-summary.tsx b/components/reputation/earnings-summary.tsx
new file mode 100644
index 0000000..c6028c6
--- /dev/null
+++ b/components/reputation/earnings-summary.tsx
@@ -0,0 +1,97 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatCurrency, formatDate } from "@/helpers/format.helper";
+import { TrendingUp, Clock } from "lucide-react";
+
+export type EarningsSummary = {
+  totalEarned: number;
+  pendingAmount: number;
+  currency: string;
+  payoutHistory: Array<{
+    amount: number;
+    date: string;
+    status: "processing" | "completed";
+  }>;
+};
+
+interface EarningsSummaryProps {
+  earnings: EarningsSummary;
+}
+
+export function EarningsSummary({ earnings }: EarningsSummaryProps) {
+  const currencySymbol =
+    earnings.currency === "USDC" ? "USDC" : earnings.currency;
+
+  return (
+    <div className="space-y-4">
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Card>
+          <CardHeader className="pb-2 pt-4 px-4">
+            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+              <TrendingUp className="w-4 h-4" />
+              Total Earned
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-4 pb-4">
+            <p className="text-2xl font-bold">
+              {formatCurrency(earnings.totalEarned, currencySymbol)}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2 pt-4 px-4">
+            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+              <Clock className="w-4 h-4" />
+              Pending
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-4 pb-4">
+            <p className="text-2xl font-bold">
+              {formatCurrency(earnings.pendingAmount, currencySymbol)}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Payout History */}
+      <Card>
+        <CardHeader className="px-5 pt-5 pb-3">
+          <CardTitle className="text-base">Payout History</CardTitle>
+        </CardHeader>
+        <CardContent className="px-5 pb-5">
+          {earnings.payoutHistory.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No payouts yet.</p>
+          ) : (
+            <div className="space-y-2">
+              {earnings.payoutHistory.map((payout, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between rounded-lg border border-border/60 bg-secondary/5 px-4 py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <Badge
+                      variant={
+                        payout.status === "completed" ? "default" : "secondary"
+                      }
+                      className="capitalize"
+                    >
+                      {payout.status}
+                    </Badge>
+                    <span className="text-sm text-muted-foreground">
+                      {formatDate(payout.date, "long")}
+                    </span>
+                  </div>
+                  <span className="text-sm font-semibold">
+                    {formatCurrency(payout.amount, currencySymbol)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}