diff --git a/__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.test.tsx b/__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.test.tsx
index a7e08a5d5b..60f7d7eebc 100644
--- a/__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.test.tsx
+++ b/__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.test.tsx
@@ -1,29 +1,53 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { WaveSmallLeaderboardItemOutcomes } from '@/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes';
-import { ApiWaveOutcomeCredit } from '@/generated/models/ApiWaveOutcomeCredit';
-import { ApiWaveOutcomeType } from '@/generated/models/ApiWaveOutcomeType';
 
+const mockUseWaveRankReward = jest.fn();
+
+jest.mock('@/hooks/waves/useWaveRankReward', () => ({
+  useWaveRankReward: (args: any) => mockUseWaveRankReward(args),
+}));
 
 describe('WaveSmallLeaderboardItemOutcomes', () => {
-  const drop: any = { rank: 1 };
-  const wave: any = {
-    outcomes: [
-      { credit: ApiWaveOutcomeCredit.Cic, distribution: [{ amount: 1 }] },
-      { credit: ApiWaveOutcomeCredit.Rep, distribution: [{ amount: 2 }] },
-      { type: ApiWaveOutcomeType.Manual, distribution: [{ amount: 1, description: 'Award' }] },
-    ],
-  };
+  const drop: any = { rank: 1, wave: { id: 'w1' } };
+
+  beforeEach(() => {
+    mockUseWaveRankReward.mockReset();
+  });
 
   it('renders button when outcomes exist', () => {
-    render(<WaveSmallLeaderboardItemOutcomes drop={drop} wave={wave} />);
+    mockUseWaveRankReward.mockReturnValue({
+      nicTotal: 10,
+      repTotal: 20,
+      manualOutcomes: ['Award'],
+      isLoading: false
+    });
+
+    render(<WaveSmallLeaderboardItemOutcomes drop={drop} />);
     expect(screen.getByRole('button')).toBeInTheDocument();
     expect(screen.getByText('Outcome:')).toBeInTheDocument();
   });
 
-  it('hides when no outcomes', () => {
-    const waveEmpty = { outcomes: [] } as any;
-    const { container } = render(<WaveSmallLeaderboardItemOutcomes drop={drop} wave={waveEmpty} />);
+  it('hides when no outcomes and not loading', () => {
+    mockUseWaveRankReward.mockReturnValue({
+      nicTotal: 0,
+      repTotal: 0,
+      manualOutcomes: [],
+      isLoading: false
+    });
+
+    const { container } = render(<WaveSmallLeaderboardItemOutcomes drop={drop} />);
     expect(container.firstChild).toBeNull();
   });
+
+  it('shows loading state', () => {
+    mockUseWaveRankReward.mockReturnValue({
+      nicTotal: 0,
+      repTotal: 0,
+      manualOutcomes: [],
+      isLoading: true
+    });
+    const { container } = render(<WaveSmallLeaderboardItemOutcomes drop={drop} />);
+    expect(container.querySelector('.tw-animate-pulse')).toBeInTheDocument();
+  });
 });
diff --git a/components/react-query-wrapper/ReactQueryWrapper.tsx b/components/react-query-wrapper/ReactQueryWrapper.tsx
index c7c774b11f..9028dde3e5 100644
--- a/components/react-query-wrapper/ReactQueryWrapper.tsx
+++ b/components/react-query-wrapper/ReactQueryWrapper.tsx
@@ -95,6 +95,7 @@ export enum QueryKey {
   WAVE_DECISIONS = "WAVE_DECISIONS",
   WAVE_OUTCOMES = "WAVE_OUTCOMES",
   WAVE_OUTCOME_DISTRIBUTION = "WAVE_OUTCOME_DISTRIBUTION",
+  WAVE_OUTCOME_DISTRIBUTION_PAGE = "WAVE_OUTCOME_DISTRIBUTION_PAGE",
 }
 
 interface InitProfileRatersParamsAndData {
diff --git a/components/waves/drop/SingleWaveDropInfoAuthorSection.tsx b/components/waves/drop/SingleWaveDropInfoAuthorSection.tsx
index 5d9f11674d..4321bfd862 100644
--- a/components/waves/drop/SingleWaveDropInfoAuthorSection.tsx
+++ b/components/waves/drop/SingleWaveDropInfoAuthorSection.tsx
@@ -23,7 +23,7 @@ export const SingleWaveDropInfoAuthorSection: React.FC<
         </div>
       </div>
       {wave && drop && (
-        <WaveSmallLeaderboardItemOutcomes drop={drop} wave={wave} />
+        <WaveSmallLeaderboardItemOutcomes drop={drop} />
       )}
     </div>
   );
diff --git a/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx b/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
index 942da3a16d..fde6908bee 100644
--- a/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
+++ b/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
@@ -7,7 +7,6 @@ import WaveDropActionsOpen from "@/components/waves/drops/WaveDropActionsOpen";
 import WaveDropActionsOptions from "@/components/waves/drops/WaveDropActionsOptions";
 import WaveDropMobileMenuDelete from "@/components/waves/drops/WaveDropMobileMenuDelete";
 import WaveDropMobileMenuOpen from "@/components/waves/drops/WaveDropMobileMenuOpen";
-import { ApiWave } from "@/generated/models/ObjectSerializer";
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import { useDropInteractionRules } from "@/hooks/drops/useDropInteractionRules";
 import useIsMobileScreen from "@/hooks/isMobileScreen";
@@ -22,13 +21,12 @@ import { WaveLeaderboardDropRaters } from "./header/WaveleaderboardDropRaters";
 
 interface DefaultWaveLeaderboardDropProps {
   readonly drop: ExtendedDrop;
-  readonly wave: ApiWave;
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
 export const DefaultWaveLeaderboardDrop: React.FC<
   DefaultWaveLeaderboardDropProps
-> = ({ drop, wave, onDropClick }) => {
+> = ({ drop, onDropClick }) => {
   const { canShowVote, canDelete } = useDropInteractionRules(drop);
   const [isVotingModalOpen, setIsVotingModalOpen] = useState(false);
   const { hasTouchScreen } = useDeviceInfo();
@@ -87,7 +85,7 @@ export const DefaultWaveLeaderboardDrop: React.FC<
           <div className="tw-mt-3 tw-inline-flex tw-flex-col @[700px]:tw-flex-row tw-justify-between @[700px]:tw-items-center sm:tw-ml-[3.5rem] tw-space-y-3 @[700px]:tw-space-y-0 tw-gap-x-2">
             <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-y-2 tw-gap-x-4">
               <WaveLeaderboardDropRaters drop={drop} />
-              <WaveLeaderboardDropFooter drop={drop} wave={wave} />
+              <WaveLeaderboardDropFooter drop={drop} />
             </div>
             {canShowVote && (
               <div
diff --git a/components/waves/leaderboard/drops/WaveLeaderboardDrop.tsx b/components/waves/leaderboard/drops/WaveLeaderboardDrop.tsx
index e85f05ce17..d8d4322a66 100644
--- a/components/waves/leaderboard/drops/WaveLeaderboardDrop.tsx
+++ b/components/waves/leaderboard/drops/WaveLeaderboardDrop.tsx
@@ -23,7 +23,6 @@ export const WaveLeaderboardDrop: React.FC<WaveLeaderboardDropProps> = ({
   return (
     <DefaultWaveLeaderboardDrop
       drop={drop}
-      wave={wave}
       onDropClick={onDropClick}
     />
   );
diff --git a/components/waves/leaderboard/drops/footer/WaveLeaderboardDropFooter.tsx b/components/waves/leaderboard/drops/footer/WaveLeaderboardDropFooter.tsx
index fde40edf7c..46e4f75ac8 100644
--- a/components/waves/leaderboard/drops/footer/WaveLeaderboardDropFooter.tsx
+++ b/components/waves/leaderboard/drops/footer/WaveLeaderboardDropFooter.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
-import { ApiWave } from "@/generated/models/ApiWave";
 import { WaveSmallLeaderboardItemOutcomes } from "@/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes";
 
 interface WaveLeaderboardDropFooterProps {
   readonly drop: ExtendedDrop;
-  readonly wave: ApiWave;
 }
 
 export const WaveLeaderboardDropFooter: React.FC<
   WaveLeaderboardDropFooterProps
-> = ({ drop, wave }) => {
-  return <WaveSmallLeaderboardItemOutcomes drop={drop} wave={wave} />;
+> = ({ drop }) => {
+  return <WaveSmallLeaderboardItemOutcomes drop={drop} />;
 };
diff --git a/components/waves/small-leaderboard/DefaultWaveSmallLeaderboardDrop.tsx b/components/waves/small-leaderboard/DefaultWaveSmallLeaderboardDrop.tsx
index d80e9e8c47..d12e9c68ef 100644
--- a/components/waves/small-leaderboard/DefaultWaveSmallLeaderboardDrop.tsx
+++ b/components/waves/small-leaderboard/DefaultWaveSmallLeaderboardDrop.tsx
@@ -2,29 +2,25 @@ import React from "react";
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import { WaveSmallLeaderboardTopThreeDrop } from "./WaveSmallLeaderboardTopThreeDrop";
 import { WaveSmallLeaderboardDefaultDrop } from "./WaveSmallLeaderboardDefaultDrop";
-import { ApiWave } from "@/generated/models/ApiWave";
 
 interface DefaultWaveSmallLeaderboardDropProps {
   readonly drop: ExtendedDrop;
-  readonly wave: ApiWave;
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
 export const DefaultWaveSmallLeaderboardDrop: React.FC<
   DefaultWaveSmallLeaderboardDropProps
-> = ({ drop, wave, onDropClick }) => {
+> = ({ drop, onDropClick }) => {
   return (
     <div className="tw-cursor-pointer" onClick={() => onDropClick(drop)}>
       {drop.rank && drop.rank <= 3 ? (
         <WaveSmallLeaderboardTopThreeDrop
           drop={drop}
-          wave={wave}
           onDropClick={onDropClick}
         />
       ) : (
         <WaveSmallLeaderboardDefaultDrop
           drop={drop}
-          wave={wave}
           onDropClick={onDropClick}
         />
       )}
diff --git a/components/waves/small-leaderboard/MemesWaveSmallLeaderboardDrop.tsx b/components/waves/small-leaderboard/MemesWaveSmallLeaderboardDrop.tsx
index b9338f4d94..5a33fa1ea5 100644
--- a/components/waves/small-leaderboard/MemesWaveSmallLeaderboardDrop.tsx
+++ b/components/waves/small-leaderboard/MemesWaveSmallLeaderboardDrop.tsx
@@ -2,27 +2,23 @@ import React from "react";
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import { WaveSmallLeaderboardTopThreeDrop } from "./WaveSmallLeaderboardTopThreeDrop";
 import { WaveSmallLeaderboardDefaultDrop } from "./WaveSmallLeaderboardDefaultDrop";
-import { ApiWave } from "@/generated/models/ApiWave";
 
 interface MemesWaveSmallLeaderboardDropProps {
   readonly drop: ExtendedDrop;
-  readonly wave: ApiWave;
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
-export const MemesWaveSmallLeaderboardDrop: React.FC<MemesWaveSmallLeaderboardDropProps> = ({ drop, wave, onDropClick }) => {
+export const MemesWaveSmallLeaderboardDrop: React.FC<MemesWaveSmallLeaderboardDropProps> = ({ drop, onDropClick }) => {
   return (
     <div className="tw-cursor-pointer" onClick={() => onDropClick(drop)}>
       {drop.rank && drop.rank <= 3 ? (
         <WaveSmallLeaderboardTopThreeDrop
           drop={drop}
-          wave={wave}
           onDropClick={onDropClick}
         />
       ) : (
         <WaveSmallLeaderboardDefaultDrop
           drop={drop}
-          wave={wave}
           onDropClick={onDropClick}
         />
       )}
diff --git a/components/waves/small-leaderboard/WaveSmallLeaderboardDefaultDrop.tsx b/components/waves/small-leaderboard/WaveSmallLeaderboardDefaultDrop.tsx
index a582b421aa..745c4ff0c7 100644
--- a/components/waves/small-leaderboard/WaveSmallLeaderboardDefaultDrop.tsx
+++ b/components/waves/small-leaderboard/WaveSmallLeaderboardDefaultDrop.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
-import { ApiWave } from "@/generated/models/ApiWave";
 import Link from "next/link";
 import { CICType } from "@/entities/IProfile";
 import { cicToType, formatNumberWithCommas } from "@/helpers/Helpers";
@@ -14,13 +13,12 @@ import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileToo
 
 interface WaveSmallLeaderboardDefaultDropProps {
   readonly drop: ExtendedDrop;
-  readonly wave: ApiWave;
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
 export const WaveSmallLeaderboardDefaultDrop: React.FC<
   WaveSmallLeaderboardDefaultDropProps
-> = ({ drop, wave, onDropClick }) => {
+> = ({ drop, onDropClick }) => {
   const getCICColor = (cic: number): string => {
     const cicType = cicToType(cic);
     switch (cicType) {
@@ -129,7 +127,7 @@ export const WaveSmallLeaderboardDefaultDrop: React.FC<
                 />
               </div>
               <div className="tw-mt-3">
-                <WaveSmallLeaderboardItemOutcomes drop={drop} wave={wave} />
+                <WaveSmallLeaderboardItemOutcomes drop={drop} />
               </div>
             </div>
           </div>
diff --git a/components/waves/small-leaderboard/WaveSmallLeaderboardDrop.tsx b/components/waves/small-leaderboard/WaveSmallLeaderboardDrop.tsx
index a970e9b5d5..c7a3efdcbc 100644
--- a/components/waves/small-leaderboard/WaveSmallLeaderboardDrop.tsx
+++ b/components/waves/small-leaderboard/WaveSmallLeaderboardDrop.tsx
@@ -19,7 +19,6 @@ export const WaveSmallLeaderboardDrop: React.FC<
     return (
       <MemesWaveSmallLeaderboardDrop
         drop={drop}
-        wave={wave}
         onDropClick={onDropClick}
       />
     );
@@ -27,7 +26,6 @@ export const WaveSmallLeaderboardDrop: React.FC<
     return (
       <DefaultWaveSmallLeaderboardDrop
         drop={drop}
-        wave={wave}
         onDropClick={onDropClick}
       />
     );
diff --git a/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.tsx b/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.tsx
index 54faf804fc..2c712abdef 100644
--- a/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.tsx
+++ b/components/waves/small-leaderboard/WaveSmallLeaderboardItemOutcomes.tsx
@@ -5,97 +5,17 @@ import { Tooltip } from "react-tooltip";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAddressCard, faStar } from "@fortawesome/free-regular-svg-icons";
 import { faAward } from "@fortawesome/free-solid-svg-icons";
-
-import { ApiWave } from "@/generated/models/ApiWave";
-import { ApiWaveOutcomeCredit } from "@/generated/models/ApiWaveOutcomeCredit";
-import { ApiWaveOutcomeType } from "@/generated/models/ApiWaveOutcomeType";
 import { ApiDrop } from "@/generated/models/ApiDrop";
+import { useWaveRankReward } from "@/hooks/waves/useWaveRankReward";
 
 interface WaveSmallLeaderboardItemOutcomesProps {
   readonly drop: ApiDrop;
-  readonly wave: ApiWave;
   readonly isMobile?: boolean;
 }
 
-interface OutcomeSummary {
-  nicTotal: number;
-  repTotal: number;
-  manualOutcomes: string[];
-}
-
-const calculateNIC = ({
-  drop,
-  wave,
-}: {
-  drop: ApiDrop;
-  wave: ApiWave;
-}): number => {
-  const rank = drop.rank;
-  if (!rank) return 0;
-  const outcomes = wave.outcomes;
-  const nicOutcomes = outcomes.filter(
-    (outcome) => outcome.credit === ApiWaveOutcomeCredit.Cic
-  );
-  const nic = nicOutcomes.reduce((acc, outcome) => {
-    return acc + (outcome.distribution?.[rank - 1]?.amount ?? 0);
-  }, 0);
-  return nic;
-};
-
-const calculateRep = ({
-  drop,
-  wave,
-}: {
-  drop: ApiDrop;
-  wave: ApiWave;
-}): number => {
-  const rank = drop.rank;
-  if (!rank) return 0;
-  const outcomes = wave.outcomes;
-  const repOutcomes = outcomes.filter(
-    (outcome) => outcome.credit === ApiWaveOutcomeCredit.Rep
-  );
-  const rep = repOutcomes.reduce((acc, outcome) => {
-    return acc + (outcome.distribution?.[rank - 1]?.amount ?? 0);
-  }, 0);
-  return rep;
-};
-
-const calculateManualOutcomes = ({
-  drop,
-  wave,
-}: {
-  drop: ApiDrop;
-  wave: ApiWave;
-}): string[] => {
-  const rank = drop.rank;
-  if (!rank) return [];
-  const outcomes = wave.outcomes;
-  const manualOutcomes = outcomes.filter(
-    (outcome) => outcome.type === ApiWaveOutcomeType.Manual
-  );
-  return manualOutcomes
-    .filter((outcome) => !!outcome.distribution?.[rank - 1]?.amount)
-    .map((outcome) => outcome.distribution?.[rank - 1]?.description ?? "");
-};
-
-const calculateOutcomeSummary = ({
-  drop,
-  wave,
-}: {
-  drop: ApiDrop;
-  wave: ApiWave;
-}): OutcomeSummary => {
-  return {
-    nicTotal: calculateNIC({ drop, wave }),
-    repTotal: calculateRep({ drop, wave }),
-    manualOutcomes: calculateManualOutcomes({ drop, wave }),
-  };
-};
-
 export const WaveSmallLeaderboardItemOutcomes: React.FC<
   WaveSmallLeaderboardItemOutcomesProps
-> = ({ drop, wave, isMobile = false }) => {
+> = ({ drop, isMobile = false }) => {
   const [isTouch, setIsTouch] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -110,17 +30,24 @@ export const WaveSmallLeaderboardItemOutcomes: React.FC<
     }
   };
 
-  const { nicTotal, repTotal, manualOutcomes } = calculateOutcomeSummary({
-    drop,
-    wave,
+  const { nicTotal, repTotal, manualOutcomes, isLoading } = useWaveRankReward({
+    waveId: drop.wave.id,
+    rank: drop.rank,
   });
+
   const totalOutcomes =
     (nicTotal ? 1 : 0) + (repTotal ? 1 : 0) + manualOutcomes.length;
 
-  if (totalOutcomes === 0) {
+  if (totalOutcomes === 0 && !isLoading) {
     return null;
   }
 
+  if (isLoading) {
+    return (
+      <div className={`tw-animate-pulse tw-h-6 tw-w-16 tw-bg-iron-800 tw-rounded-lg`} />
+    )
+  }
+
   const tooltipContent = (
     <div className="tw-p-3 tw-space-y-3 tw-min-w-[200px]">
       <div className="tw-space-y-2">
@@ -184,11 +111,9 @@ export const WaveSmallLeaderboardItemOutcomes: React.FC<
     <>
       <button
         onClick={handleClick}
-        className={`tw-border-0 tw-rounded-lg tw-flex tw-items-center ${
-          isMobile ? "tw-gap-4" : "tw-gap-2"
-        } tw-min-w-6 tw-py-1.5 tw-px-2 tw-bg-iron-800 tw-ring-1 tw-ring-iron-700 ${
-          isTouch ? "tw-cursor-pointer" : ""
-        }`}
+        className={`tw-border-0 tw-rounded-lg tw-flex tw-items-center ${isMobile ? "tw-gap-4" : "tw-gap-2"
+          } tw-min-w-6 tw-py-1.5 tw-px-2 tw-bg-iron-800 tw-ring-1 tw-ring-iron-700 ${isTouch ? "tw-cursor-pointer" : ""
+          }`}
         data-tooltip-id={`wave-outcomes-${drop.id}`}>
         <span className="tw-text-xs tw-font-medium tw-text-iron-200">
           Outcome:
diff --git a/components/waves/small-leaderboard/WaveSmallLeaderboardTopThreeDrop.tsx b/components/waves/small-leaderboard/WaveSmallLeaderboardTopThreeDrop.tsx
index 7572ff3b60..046d6ece55 100644
--- a/components/waves/small-leaderboard/WaveSmallLeaderboardTopThreeDrop.tsx
+++ b/components/waves/small-leaderboard/WaveSmallLeaderboardTopThreeDrop.tsx
@@ -6,23 +6,18 @@ import { CICType } from "@/entities/IProfile";
 import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
 import { WaveSmallLeaderboardItemContent } from "./WaveSmallLeaderboardItemContent";
 import { WaveSmallLeaderboardItemOutcomes } from "./WaveSmallLeaderboardItemOutcomes";
-import { ApiWave } from "@/generated/models/ApiWave";
 import WinnerDropBadge from "../drops/winner/WinnerDropBadge";
 import DropVoteProgressing from "@/components/drops/view/utils/DropVoteProgressing";
 import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileTooltipWrapper";
 
 interface WaveSmallLeaderboardTopThreeDropProps {
   readonly drop: ExtendedDrop;
-  readonly wave: ApiWave;
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
 export const WaveSmallLeaderboardTopThreeDrop: React.FC<
   WaveSmallLeaderboardTopThreeDropProps
-> = ({ drop, wave, onDropClick }) => {
-  const getPFPColor = (rank: number | null): string | null => {
-    return null;
-  };
+> = ({ drop, onDropClick }) => {
 
   const getRankTextColor = (rank: number | null): string | null => {
     if (rank === 1) return "tw-text-[#E8D48A]";
@@ -67,32 +62,28 @@ export const WaveSmallLeaderboardTopThreeDrop: React.FC<
             className="tw-@container tw-rounded-xl tw-bg-iron-900 tw-p-4 tw-relative desktop-hover:hover:tw-bg-iron-800/80 tw-transition-all tw-duration-300 tw-ease-out"
             style={{
               border: "1px solid transparent",
-              boxShadow: `inset 2px 0 0 ${
-                drop.rank && drop.rank <= 3
-                  ? getRankTextColor(drop.rank)?.replace("tw-text-", "").trim()
+              boxShadow: `inset 2px 0 0 ${drop.rank && drop.rank <= 3
+                ? getRankTextColor(drop.rank)?.replace("tw-text-", "").trim()
+                : "#60606C"
+                }, 
+                         inset 0 1px 0 ${drop.rank && drop.rank <= 3
+                  ? getRankTextColor(drop.rank)
+                    ?.replace("tw-text-", "")
+                    .trim()
+                  : "#60606C"
+                }20, 
+                         inset -1px 0 0 ${drop.rank && drop.rank <= 3
+                  ? getRankTextColor(drop.rank)
+                    ?.replace("tw-text-", "")
+                    .trim()
+                  : "#60606C"
+                }20, 
+                         inset 0 -1px 0 ${drop.rank && drop.rank <= 3
+                  ? getRankTextColor(drop.rank)
+                    ?.replace("tw-text-", "")
+                    .trim()
                   : "#60606C"
-              }, 
-                         inset 0 1px 0 ${
-                           drop.rank && drop.rank <= 3
-                             ? getRankTextColor(drop.rank)
-                                 ?.replace("tw-text-", "")
-                                 .trim()
-                             : "#60606C"
-                         }20, 
-                         inset -1px 0 0 ${
-                           drop.rank && drop.rank <= 3
-                             ? getRankTextColor(drop.rank)
-                                 ?.replace("tw-text-", "")
-                                 .trim()
-                             : "#60606C"
-                         }20, 
-                         inset 0 -1px 0 ${
-                           drop.rank && drop.rank <= 3
-                             ? getRankTextColor(drop.rank)
-                                 ?.replace("tw-text-", "")
-                                 .trim()
-                             : "#60606C"
-                         }20`,
+                }20`,
               transition: "box-shadow 0.2s ease, background-color 0.2s ease",
             }}
           >
@@ -168,7 +159,7 @@ export const WaveSmallLeaderboardTopThreeDrop: React.FC<
                   />
                 </div>
                 <div className="tw-mt-3">
-                  <WaveSmallLeaderboardItemOutcomes drop={drop} wave={wave} />
+                  <WaveSmallLeaderboardItemOutcomes drop={drop} />
                 </div>
               </div>
             </div>
diff --git a/hooks/waves/useWaveRankReward.ts b/hooks/waves/useWaveRankReward.ts
new file mode 100644
index 0000000000..d14cf63c57
--- /dev/null
+++ b/hooks/waves/useWaveRankReward.ts
@@ -0,0 +1,96 @@
+import { useQueries } from "@tanstack/react-query";
+import { useWaveOutcomesQuery } from "./useWaveOutcomesQuery";
+import { ApiWaveOutcomeCredit } from "@/generated/models/ApiWaveOutcomeCredit";
+import { ApiWaveOutcomeType } from "@/generated/models/ApiWaveOutcomeType";
+import { commonApiFetch } from "@/services/api/common-api";
+import { ApiWaveOutcomeDistributionItemsPage } from "@/generated/models/ApiWaveOutcomeDistributionItemsPage";
+import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+
+const DISTRIBUTION_PAGE_SIZE = 100;
+
+export interface WaveRankRewards {
+  readonly nicTotal: number;
+  readonly repTotal: number;
+  readonly manualOutcomes: string[];
+  readonly isLoading: boolean;
+}
+
+export function useWaveRankReward({
+  waveId,
+  rank,
+  enabled = true,
+}: {
+  waveId: string;
+  rank: number | null;
+  enabled?: boolean;
+}): WaveRankRewards {
+  const { outcomes, isEnabled: isOutcomesEnabled } = useWaveOutcomesQuery({
+    waveId,
+    enabled: enabled && !!rank,
+  });
+
+  const targetIndex = rank ? rank - 1 : 0;
+  const page = Math.floor(targetIndex / DISTRIBUTION_PAGE_SIZE) + 1;
+
+  const distributionQueries = useQueries({
+    queries: outcomes.map((outcome) => ({
+      queryKey: [
+        QueryKey.WAVE_OUTCOME_DISTRIBUTION_PAGE,
+        waveId,
+        outcome.index,
+        page,
+        DISTRIBUTION_PAGE_SIZE,
+      ],
+      queryFn: () =>
+        commonApiFetch<ApiWaveOutcomeDistributionItemsPage>({
+          endpoint: `waves/${waveId}/outcomes/${outcome.index}/distribution`,
+          params: {
+            page: page.toString(),
+            page_size: DISTRIBUTION_PAGE_SIZE.toString(),
+          },
+        }),
+      enabled: isOutcomesEnabled && !!rank && enabled,
+      staleTime: 60000, // Cache for a minute
+    })),
+  });
+
+  const isLoading = distributionQueries.some((q) => q.isLoading);
+
+  if (!rank || !enabled) {
+    return {
+      nicTotal: 0,
+      repTotal: 0,
+      manualOutcomes: [],
+      isLoading: false
+    }
+  }
+
+  let nicTotal = 0;
+  let repTotal = 0;
+  const manualOutcomes: string[] = [];
+
+  outcomes.forEach((outcome, i) => {
+    const query = distributionQueries[i];
+    if (query.data?.data) {
+      const item = query.data.data.find((d) => d.index === targetIndex);
+      if (item?.amount) {
+        if (outcome.credit === ApiWaveOutcomeCredit.Cic) {
+          nicTotal += item.amount;
+        } else if (outcome.credit === ApiWaveOutcomeCredit.Rep) {
+          repTotal += item.amount;
+        } else if (outcome.type === ApiWaveOutcomeType.Manual) {
+          if (item.description) {
+            manualOutcomes.push(item.description);
+          }
+        }
+      }
+    }
+  });
+
+  return {
+    nicTotal,
+    repTotal,
+    manualOutcomes,
+    isLoading,
+  };
+}