diff --git a/src/common/ui/layout/svg/Trophy.tsx b/src/common/ui/layout/svg/Trophy.tsx
new file mode 100644
index 00000000..480a537a
--- /dev/null
+++ b/src/common/ui/layout/svg/Trophy.tsx
@@ -0,0 +1,14 @@
+// TODO!: Delete this file and use an icon library package component instead!
+
+const Trophy = (props: any) => {
+  return (
+    <svg {...props} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.66797 18V16H8.66797V12.9C7.8513 12.7167 7.12214 12.3708 6.48047 11.8625C5.8388 11.3542 5.36797 10.7167 5.06797 9.95C3.81797 9.8 2.77214 9.25417 1.93047 8.3125C1.0888 7.37083 0.667969 6.26667 0.667969 5V4C0.667969 3.45 0.863802 2.97917 1.25547 2.5875C1.64714 2.19583 2.11797 2 2.66797 2H4.66797V0H14.668V2H16.668C17.218 2 17.6888 2.19583 18.0805 2.5875C18.4721 2.97917 18.668 3.45 18.668 4V5C18.668 6.26667 18.2471 7.37083 17.4055 8.3125C16.5638 9.25417 15.518 9.8 14.268 9.95C13.968 10.7167 13.4971 11.3542 12.8555 11.8625C12.2138 12.3708 11.4846 12.7167 10.668 12.9V16H14.668V18H4.66797ZM4.66797 7.8V4H2.66797V5C2.66797 5.63333 2.8513 6.20417 3.21797 6.7125C3.58464 7.22083 4.06797 7.58333 4.66797 7.8ZM14.668 7.8C15.268 7.58333 15.7513 7.22083 16.118 6.7125C16.4846 6.20417 16.668 5.63333 16.668 5V4H14.668V7.8Z"
+        fill={props.fill || "#91321B`"}
+      />
+    </svg>
+  );
+};
+
+export default Trophy;
diff --git a/src/features/donation/components/DonationLeaderboardEntry.tsx b/src/features/donation/components/DonationLeaderboardEntry.tsx
new file mode 100644
index 00000000..7752b291
--- /dev/null
+++ b/src/features/donation/components/DonationLeaderboardEntry.tsx
@@ -0,0 +1,57 @@
+import Image from "next/image";
+
+import Trophy from "@/common/ui/layout/svg/Trophy";
+
+export type DonationLeaderboardEntryProps = {
+  rank: number;
+  image: string;
+  name: string;
+  amount: number;
+  type: "donor" | "sponsor";
+};
+
+export const DonationLeaderboardEntry: React.FC<DonationLeaderboardEntryProps> = ({
+  rank,
+  image,
+  name,
+  amount,
+  type,
+}) => {
+  const bgClass =
+    rank === 1
+      ? "bg-gradient-to-r from-orange-400 to-red-500 text-white"
+      : rank === 2
+        ? "bg-gradient-to-r from-#F7F7F7 to-#DBDBDB"
+        : "bg-gradient-to-r from-#FCE9D5 to-#F8D3B0";
+
+  const rankText = ["1st", "2nd", "3rd"][rank - 1];
+
+  const iconClass = rank === 1 ? "fill-yellow-400" : rank === 2 ? "fill-gray-400" : "fill-red-800";
+
+  return (
+    <div className={`w-288px overflow-hidden rounded-2xl border border-gray-200 pb-4`}>
+      <div className={`flex items-center justify-between p-4 ${bgClass}`}>
+        <div>
+          <Trophy className={`h-6 w-6 ${iconClass}`} />
+        </div>
+        <span className="text-lg font-bold">{rankText}</span>
+      </div>
+      <div className="p-20px flex flex-col items-center">
+        <Image
+          src={image ?? ""}
+          alt={name}
+          className="mb-12px h-20 w-20 rounded-full"
+          width={80}
+          height={80}
+        />
+        <p className="font-500 text-#292929 font-14px mb-2 text-center">{name}</p>
+        <p className="font-600 text-center text-2xl">
+          {amount}{" "}
+          <span className="text-#292929 font-600 text-sm">
+            NEAR {type === "donor" ? "Donated" : "Sponsored"}
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/features/donation/index.ts b/src/features/donation/index.ts
index 6e533be2..607bc1e3 100644
--- a/src/features/donation/index.ts
+++ b/src/features/donation/index.ts
@@ -1,4 +1,5 @@
 export * from "./constants";
+export * from "./components/DonationLeaderboardEntry";
 export * from "./components/summary";
 export * from "./components/human-verification-alert";
 export * from "./components/user-entrypoints";
diff --git a/src/layout/components/app-bar.tsx b/src/layout/components/app-bar.tsx
index 9ddb190a..02cf390c 100644
--- a/src/layout/components/app-bar.tsx
+++ b/src/layout/components/app-bar.tsx
@@ -24,7 +24,7 @@ const links = [
   },
 
   { label: "Feed", url: rootPathnames.FEED, disabled: false },
-  // { label: "Donors", url: rootPathnames.DONORS, disabled: false },
+  { label: "Donors", url: rootPathnames.DONORS, disabled: false },
 
   {
     label: "Lists",
diff --git a/src/pages/donors/index.tsx b/src/pages/donors/index.tsx
new file mode 100644
index 00000000..e9b991a8
--- /dev/null
+++ b/src/pages/donors/index.tsx
@@ -0,0 +1,622 @@
+import { useState } from "react";
+
+import { Lora } from "next/font/google";
+import Image from "next/image";
+
+import { coingeckoHooks } from "@/common/api/coingecko";
+import { Account, indexer } from "@/common/api/indexer";
+import { daysAgo, parseNumber } from "@/common/lib";
+import { FilterChip, SearchBar, ToggleGroup } from "@/common/ui/layout/components";
+import { NearIcon } from "@/common/ui/layout/svg";
+import { AccountListItem } from "@/entities/_shared/account";
+import { DonationLeaderboardEntry } from "@/features/donation";
+
+const lora = Lora({
+  subsets: ["latin"],
+  variable: "--font-lora",
+  weight: ["400", "500", "600", "700"],
+});
+
+interface Participant {
+  rank: number;
+  image: string;
+  name: string;
+  amount: number;
+  amountUsd: number;
+}
+
+interface Activity {
+  sender: string;
+  senderImage: string;
+  amount: number;
+  amountUsd: number;
+  currency: string;
+  receiver: string;
+  receiverImage: string;
+  timestamp: number;
+}
+
+const topDonors: Participant[] = [
+  {
+    rank: 1,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "nearcollective.near",
+    amount: 731.25,
+    amountUsd: 0,
+  },
+  {
+    rank: 2,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "nf-payments.near",
+    amount: 731.25,
+    amountUsd: 0,
+  },
+  {
+    rank: 3,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "creatives.potlock.near",
+    amount: 731.25,
+    amountUsd: 0,
+  },
+];
+
+const otherDonors: Participant[] = [
+  {
+    rank: 4,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "creativesportfolio.near",
+    amount: 2000,
+    amountUsd: 2000,
+  },
+  {
+    rank: 5,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "mike.near",
+    amount: 2000,
+    amountUsd: 2000,
+  },
+  {
+    rank: 6,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "mike.near",
+    amount: 2000,
+    amountUsd: 2000,
+  },
+];
+
+const topSponsors: Participant[] = [
+  {
+    rank: 1,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor1.near",
+    amount: 1000,
+    amountUsd: 1000,
+  },
+  {
+    rank: 2,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor2.near",
+    amount: 900,
+    amountUsd: 900,
+  },
+  {
+    rank: 3,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor3.near",
+    amount: 800,
+    amountUsd: 800,
+  },
+  {
+    rank: 4,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor4.near",
+    amount: 800,
+    amountUsd: 800,
+  },
+  {
+    rank: 5,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor5.near",
+    amount: 100,
+    amountUsd: 200,
+  },
+  {
+    rank: 6,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor6.near",
+    amount: 10,
+    amountUsd: 10,
+  },
+  {
+    rank: 7,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor7.near",
+    amount: 30,
+    amountUsd: 800,
+  },
+  {
+    rank: 8,
+    image: "https://picsum.photos/200/200/?blur",
+    name: "sponsor8.near",
+    amount: 800,
+    amountUsd: 800,
+  },
+];
+
+const ACTIVITY: Activity[] = [
+  {
+    sender: "nearcollective.near",
+    senderImage: "https://picsum.photos/200/200/?blur",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "creativesportfolio.near",
+    receiverImage: "https://picsum.photos/200/200/?blur",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "nf-payments.near",
+    senderImage: "https://picsum.photos/200/200/?blur",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "mike.near",
+    receiverImage: "https://picsum.photos/200/200/?blur",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "creatives.potlock.near",
+    senderImage: "https://picsum.photos/200/200/?blur",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "mike.near",
+    receiverImage: "https://picsum.photos/200/200/?blur",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "nearcollective.near",
+    senderImage: "https://picsum.photos/200/200/?blur",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "creativesportfolio.near",
+    receiverImage: "https://picsum.photos/200/200/?blur",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+  {
+    sender: "nf-payments.near",
+    senderImage: "https://picsum.photos/200/200/?blur",
+    amount: 1000,
+    amountUsd: 1000,
+    currency: "NEAR",
+    receiver: "mike.near",
+    receiverImage: "https://picsum.photos/200/200/?blur",
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 2,
+  },
+];
+
+// Define a type guard to check if an object is of type Account
+function isAccount(obj: any): obj is Account {
+  return "total_donations_out_usd" in obj;
+}
+
+export default function LeaderboardPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchActivity, setSearchActivity] = useState("");
+  const [timeFilter, setTimeFilter] = useState("All time");
+
+  const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors" | "activities">(
+    "activities",
+  );
+
+  const toggleTab = (tab: "donors" | "sponsors" | "activities") => {
+    setSelectedTab(tab);
+  };
+
+  const { data: donors } = { data: [] }; // indexer.useDonors({});
+
+  const sponsors: Participant[] = [];
+  const { data: priceOfOneNear } = coingeckoHooks.useNativeTokenUsdPrice();
+  const price = priceOfOneNear ? parseNumber(priceOfOneNear) : 0;
+
+  console.log({ donors, priceOfOneNear });
+
+  const handleSearch = (participant: any) => {
+    if (!participant) return false;
+
+    const searchLower = searchTerm.toLowerCase();
+
+    const idMatches = isAccount(participant)
+      ? participant.id?.toLowerCase().includes(searchLower)
+      : participant.name.includes(searchLower);
+
+    const nameMatches = participant.near_social_profile_data?.name
+      ?.toLowerCase()
+      .includes(searchLower);
+
+    return idMatches || nameMatches;
+  };
+
+  const renderLeaderboard = (participants: Participant[], type: "donor" | "sponsor") => {
+    const data = type === "donor" ? [...(donors || [])] : [...participants];
+
+    console.log("data now", data);
+
+    return (
+      <>
+        <div className="mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10 md:flex-row">
+          <SearchBar
+            className="text-gray-400 md:w-40"
+            placeholder={`Search projects`}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <div className="flex w-fit gap-3">
+            {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
+              <FilterChip
+                key={filter}
+                variant={timeFilter === filter ? "brand-filled" : "brand-outline"}
+                onClick={() => setTimeFilter(filter)}
+                className="text-sm"
+              >
+                {filter}
+              </FilterChip>
+            ))}
+          </div>
+        </div>
+        <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px] w-full  md:w-full">
+          <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
+            {data
+              ?.sort((a, b) => {
+                const aAmount = isAccount(a) ? a.total_donations_out_usd : a.amountUsd;
+
+                const bAmount = isAccount(b) ? b.total_donations_out_usd : b.amountUsd;
+
+                return bAmount - aAmount;
+              })
+              .slice(0, 3)
+              .map((participant, index) => {
+                const name = isAccount(participant)
+                  ? (participant.near_social_profile_data?.name ??
+                    (participant.id?.length <= 20
+                      ? participant.id
+                      : `${participant.id.substring(0, 16)}...${participant.id.substring(participant.id.length - 4)}`))
+                  : participant.name;
+
+                return (
+                  <DonationLeaderboardEntry
+                    key={index}
+                    rank={isAccount(participant) ? index + 1 : participant.rank}
+                    image={
+                      isAccount(participant)
+                        ? (participant.near_social_profile_data?.image?.ipfs_cid
+                            ? `https://ipfs.io/ipfs/${participant.near_social_profile_data?.image.ipfs_cid}`
+                            : participant.near_social_profile_data?.image?.nft
+                              ? participant.near_social_profile_data?.image?.nft?.media
+                              : "https://picsum.photos/200/200/?blur") ||
+                          "https://picsum.photos/200/200/?blur"
+                        : participant.image
+                    }
+                    name={name}
+                    amount={Number(
+                      (isAccount(participant)
+                        ? participant.total_donations_out_usd / price
+                        : participant.amount
+                      ).toFixed(2),
+                    )}
+                    type={type}
+                  />
+                );
+              })}
+          </div>
+        </div>
+
+        <div className="hidden rounded-2xl border border-gray-200 bg-white  md:block">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                  Rank
+                </th>
+                <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                  Projects
+                </th>
+                <th className="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                  Amount
+                </th>
+                <th className="w-150px p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">
+                  AMT (USD)
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 bg-white">
+              {data
+                ?.sort((a, b) => {
+                  const aAmount = isAccount(a) ? a.total_donations_out_usd : 0;
+                  const bAmount = isAccount(b) ? b.total_donations_out_usd : 0;
+                  return bAmount - aAmount;
+                })
+                .slice(3)
+                .filter(handleSearch)
+                .map((donor, index) => (
+                  <tr key={index}>
+                    <td className="w-10px whitespace-nowrap p-4">
+                      <div className="flex items-center">
+                        <span className="text-sm text-gray-900">
+                          #{isAccount(donor) ? index + 1 : donor.rank}
+                        </span>
+                        {(isAccount(donor) ? index + 1 : donor.rank) === 4 ? (
+                          <div className="ml-1 text-green-500" />
+                        ) : (
+                          <div className="ml-1 text-red-500" />
+                        )}
+                      </div>
+                    </td>
+                    <td className="ml-[-20px] whitespace-nowrap p-4">
+                      <AccountListItem
+                        accountId={isAccount(donor) ? donor?.id : donor.name}
+                        highlightOnHover={true}
+                        isRounded={true}
+                      />
+                      {/* <div className="ml-4">
+                        <div className="font-500 text-sm text-gray-900">
+                          {participant.near_social_profile_data?.name ??
+                            participant.id}
+                        </div>
+                      </div> */}
+                    </td>
+                    <td className="w-100px whitespace-nowrap p-4">
+                      <div className="gap-8px flex items-center text-sm text-gray-900">
+                        <NearIcon className="w-18px h-18px pb-[-4]" />
+                        <span className="font-600 m-0 pt-[2px]">
+                          {isAccount(donor)
+                            ? (donor.total_donations_out_usd / price).toFixed(2)
+                            : donor.amount}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="fw-600 w-100px whitespace-nowrap p-4 text-right text-sm text-gray-950">
+                      $ {isAccount(donor) ? donor.total_donations_out_usd : donor.amountUsd}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="p-16px flex flex-col items-start gap-4 md:hidden">
+          {data?.map((participant, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 self-stretch rounded-2xl border border-solid border-[color:var(--Neutral-100,#EBEBEB)] p-4"
+            >
+              <div className="whitespace-nowrap">
+                <div className="h-40px w-40px flex items-center">
+                  <Image
+                    className="h-40px w-40px rounded-full"
+                    src={
+                      isAccount(participant)
+                        ? participant?.near_social_profile_data?.image?.ipfs_cid
+                          ? `https://ipfs.near.social/ipfs/${participant.near_social_profile_data?.image?.ipfs_cid}`
+                          : participant.near_social_profile_data?.image?.url || ""
+                        : participant.image
+                    }
+                    width={10}
+                    height={10}
+                    alt="profile picture"
+                  />
+                </div>
+              </div>
+              <div className="w-full">
+                <div className="flex justify-between whitespace-nowrap">
+                  <div className="ml-1">
+                    <div className="font-500 text-sm text-gray-900">
+                      {isAccount(participant)
+                        ? (participant?.near_social_profile_data?.name ?? participant.id)
+                        : participant.name}
+                    </div>
+                  </div>
+                  <div className="whitespace-nowrap">
+                    <div className="flex items-center">
+                      <span className="fw-50 text-sm text-gray-900">#{index + 1}</span>
+                      {index === 4 ? (
+                        <div className="ml-1 text-green-500" />
+                      ) : (
+                        <div className="ml-1 text-red-500" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="gap-8px flex items-center">
+                  <div className="gap-8px flex items-center text-sm text-gray-900">
+                    <NearIcon className="w-18px h-18px" />
+                    <span className="font-600 m-0 pt-[2px]">
+                      {isAccount(participant)
+                        ? participant.total_donations_out_usd / price
+                        : participant.amount}
+                    </span>
+                  </div>
+                  <div className="fw-600 w-fit whitespace-nowrap text-right text-sm text-gray-500">
+                    ~${" "}
+                    {isAccount(participant)
+                      ? participant.total_donations_out_usd
+                      : participant.amountUsd}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  };
+
+  const TABs = [
+    {
+      name: "activities",
+      label: "All Activities",
+      count: 20000,
+    },
+    {
+      name: "donors",
+      label: "Donor Leaderboard",
+      count: donors?.length || 0,
+    },
+    {
+      name: "sponsors",
+      label: "Sponsor Leaderboard",
+      count: 68,
+    },
+  ];
+
+  return (
+    <div className="flex w-full flex-col">
+      <ToggleGroup defaultValue="donors" type="single" className="mt-40px relative w-full">
+        <div className="mb-40px md:mb-64px absolute w-full overflow-x-scroll border-b border-t border-gray-200 md:overflow-x-auto">
+          <div className="ml-20px md:ml-30px pt-16px grid grid-flow-col content-center items-center gap-x-4 px-4 md:w-fit">
+            {TABs.map((tab) => (
+              <div
+                key={tab.name}
+                className={`py-10px px-16px text-#7B7B7B w-fit cursor-pointer text-center text-lg font-semibold ${
+                  selectedTab === tab.name ? "border-b-2 border-black" : null
+                }`}
+                onClick={() => toggleTab(tab.name as "donors" | "sponsors" | "activities")}
+              >
+                <span
+                  className={`inline whitespace-nowrap text-sm ${
+                    selectedTab === tab.name ? "font-500 text-black" : null
+                  }`}
+                >
+                  {tab.label}
+                </span>
+                <span
+                  className={`border-#DBDBDB px-6px py-4px rounded-16px ml-2 border bg-gray-200 text-sm text-gray-700 ${
+                    selectedTab === tab.name ? "font-600 text-black" : null
+                  }`}
+                >
+                  {tab.count}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </ToggleGroup>
+      <div className="max-w-912px mx-auto flex w-full flex-col py-8">
+        <div className="mx-auto w-full flex-nowrap px-5 py-9 md:px-0 md:py-16">
+          <div className="mx-auto w-full">
+            {selectedTab === "activities" ? (
+              <div className="w-full">
+                <h1
+                  className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+                >
+                  All Activities
+                </h1>
+                <>
+                  <div className="mx-auto flex w-full flex-col flex-wrap justify-between gap-x-14 gap-y-4 pb-4 pt-10 md:flex-row">
+                    <SearchBar
+                      className="text-gray-400 md:w-40"
+                      placeholder={`Search projects`}
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                    <div className="flex w-fit gap-3">
+                      {["All time", "1Y", "30D", "1W", "1D"].map((filter) => (
+                        <FilterChip
+                          key={filter}
+                          variant={timeFilter === filter ? "brand-filled" : "brand-outline"}
+                          onClick={() => setTimeFilter(filter)}
+                          className="text-sm"
+                        >
+                          {filter}
+                        </FilterChip>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="overflow-x-auto bg-white">
+                    {ACTIVITY.map((activity, index) => (
+                      <div
+                        key={index}
+                        className="border-gray-#ebebeb gap-8px my-4 flex flex-wrap items-center justify-between rounded-xl border p-4"
+                      >
+                        <div className="flex w-full items-center justify-between gap-2 text-sm font-medium text-gray-900">
+                          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                            <Image
+                              src={activity.senderImage}
+                              className="h-24px w-24px rounded-full"
+                              alt="sender image"
+                              width={10}
+                              height={10}
+                            />
+                            <h1
+                              className="w-100px truncate md:w-fit md:overflow-visible"
+                              title={activity.sender}
+                            >
+                              {activity.sender}
+                            </h1>
+                          </div>
+                          <div className="flex items-center">
+                            <div className="flex gap-2 px-4 align-middle text-sm text-gray-600">
+                              Donated
+                            </div>
+                            <div>
+                              <div className="gap-8px flex items-center text-sm text-gray-900">
+                                <NearIcon className="w-18px h-18px" />{" "}
+                                <span className="font-600 m-0 pt-[2px]">{activity.amount}</span>
+                              </div>
+                            </div>
+                            <div className="ml-4 text-sm text-gray-600">to</div>
+                          </div>
+                        </div>
+                        <div className="flex items-center">
+                          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                            <Image
+                              src={activity.receiverImage}
+                              className="h-24px w-24px rounded-full"
+                              alt="receiver image"
+                              width={10}
+                              height={10}
+                            />
+                            <h1
+                              className="w-100px truncate md:w-fit md:overflow-visible"
+                              title={activity.receiver}
+                            >
+                              {activity.receiver}
+                            </h1>
+                          </div>
+                          <div className="flex items-center gap-2 whitespace-nowrap pl-3 text-sm text-gray-600">
+                            <span className="h-4px w-4px rounded-full bg-gray-600"></span>{" "}
+                            {daysAgo(activity.timestamp)}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              </div>
+            ) : null}
+            {selectedTab === "donors" ? (
+              <div className="w-full">
+                <h1
+                  className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+                >
+                  Donor Leaderboard
+                </h1>
+                {renderLeaderboard([...topDonors, ...otherDonors], "donor")}
+              </div>
+            ) : null}
+            {selectedTab === "sponsors" ? (
+              <div className="w-full">
+                <h1
+                  className={`font-lora text-3xl font-semibold tracking-[-1.12px] md:text-5xl md:leading-[40px] md:tracking-[-1.68px] ${lora.variable}`}
+                >
+                  Sponsor Leaderboard
+                </h1>
+                {renderLeaderboard(topSponsors, "sponsor")}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}