diff --git a/src/app/collective-rewards/leaderboard/BuildersLeaderBoardTable.tsx b/src/app/collective-rewards/leaderboard/BuildersLeaderBoardTable.tsx
new file mode 100644
index 00000000..18679746
--- /dev/null
+++ b/src/app/collective-rewards/leaderboard/BuildersLeaderBoardTable.tsx
@@ -0,0 +1,419 @@
+import { CycleContextProvider } from '@/app/collective-rewards/metrics'
+import { BuilderRewardPercentage, useGetBuildersRewards } from '@/app/collective-rewards/rewards'
+import { BuilderContextProviderWithPrices } from '@/app/collective-rewards/user'
+import { useHandleErrors } from '@/app/collective-rewards/utils'
+import { AddressOrAliasWithCopy } from '@/components/Address'
+import { Button } from '@/components/Button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/Collapsible'
+import { Jdenticon } from '@/components/Header/Jdenticon'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Popover } from '@/components/Popover'
+import { ProgressBar } from '@/components/ProgressBar/ProgressBar'
+import { TableBody, TableCell, TableCore, TableHead, TableRow } from '@/components/Table'
+import { HeaderTitle, Label, Typography } from '@/components/Typography'
+import { RBTC, RIF } from '@/lib/constants'
+import { cn, formatCurrency, shortAddress, toFixed } from '@/lib/utils'
+import { useBasicPaginationUi } from '@/shared/hooks/usePaginationUi'
+import { rbtcIconSrc } from '@/shared/rbtcIconSrc'
+import Image from 'next/image'
+import { FC, memo, useMemo, useState } from 'react'
+import { FaRegQuestionCircle } from 'react-icons/fa'
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa6'
+import { LiaSortUpSolid } from 'react-icons/lia'
+import { RiArrowUpSFill } from 'react-icons/ri'
+import { Address, isAddress } from 'viem'
+
+type Currency = {
+  value: number
+  symbol: string
+}
+
+export type Reward = {
+  crypto: Currency
+  fiat: Currency
+}
+
+type RewardCellProps = {
+  rewards: Reward[]
+}
+
+export function getFormattedCurrency(value: number, symbol: string) {
+  const formattedCurrency = formatCurrency(value, symbol)
+  return `${formattedCurrency.substring(0, 1)}${symbol} ${formattedCurrency.substring(1)}`
+}
+
+export const rbtcIcon = (
+  <Image src={`data:image/svg+xml;base64,${rbtcIconSrc}`} alt="rBTC Logo" width={16} height={16} />
+)
+export const rifIcon = <Image src={'/images/rif-logo.png'} alt="RIF Logo" width={16} height={16} />
+
+export const RewardCell: FC<RewardCellProps> = ({ rewards }) => (
+  <div className="flex flex-nowrap flex-row gap-2 whitespace-nowrap">
+    {rewards &&
+      rewards.map(({ crypto: { value, symbol }, fiat: { value: fiatValue, symbol: fiatSymbol } }) => (
+        <div key={value + symbol} className="flex-1">
+          {/* TODO: if the value is very small, should we show it in Gwei/wei? */}
+
+          <Label className="flex items-center gap-1 font-normal text-sm leading-none text-text-primary font-rootstock-sans">
+            {toFixed(value)}
+            {symbol === RBTC && rbtcIcon}
+            {symbol === RIF && rifIcon}
+          </Label>
+          <Label className="font-normal text-sm leading-none text-disabled-primary font-rootstock-sans">
+            {`= ${getFormattedCurrency(fiatValue, fiatSymbol)}`}
+          </Label>
+        </div>
+      ))}
+  </div>
+)
+
+export const LazyRewardCell = memo(RewardCell, ({ rewards: prevReward }, { rewards: nextReward }) =>
+  prevReward.every((reward, key) => reward.fiat.value === nextReward[key].fiat.value),
+)
+
+export const BuilderNameCell = ({ builderName, address }: { builderName: string; address: string }) => {
+  const shortenAddress = shortAddress(address as Address)
+  return (
+    <TableCell className={cn(tableHeaders[0].className, 'border-solid')}>
+      <div className="flex flex-row gap-x-1">
+        <Jdenticon className="rounded-md bg-white" value={builderName} size="24" />
+        <Popover
+          content={
+            <div className="text-[12px] font-bold mb-1">
+              <p data-testid="builderAddressTooltip">{shortenAddress}</p>
+            </div>
+          }
+          size="small"
+          trigger="hover"
+          disabled={!builderName || isAddress(builderName)}
+        >
+          <Typography tagVariant="label" className="font-semibold line-clamp-1 text-wrap">
+            <AddressOrAliasWithCopy
+              addressOrAlias={builderName || address}
+              clipboard={address}
+              clipboardAnimationText={shortenAddress}
+              className="text-sm"
+            />
+          </Typography>
+        </Popover>
+      </div>
+    </TableCell>
+  )
+}
+
+export const BackerRewardsPercentage = ({
+  rewardPercentage,
+}: {
+  rewardPercentage: BuilderRewardPercentage | null
+}) => {
+  const renderDelta = useMemo(() => {
+    if (!rewardPercentage) return null
+
+    const deltaPercentage = rewardPercentage.next - rewardPercentage.current
+    if (deltaPercentage > 0) {
+      const colorGreen = '#1bc47d'
+      return (
+        <div className="flex flex-row items-center">
+          <FaArrowUp style={{ color: colorGreen }} />
+          <div className={cn(`text-[${colorGreen}] text-sm`)}>+{deltaPercentage}</div>
+        </div>
+      )
+    }
+    if (deltaPercentage < 0) {
+      const colorRed = '#f14722'
+      return (
+        <div className="flex flex-row items-center">
+          <FaArrowDown style={{ color: colorRed }} />
+          <div className={cn(`text-[${colorRed}] text-sm`)}>{deltaPercentage}</div>
+        </div>
+      )
+    }
+    return null
+  }, [rewardPercentage])
+  return (
+    <TableCell className={cn(tableHeaders[1].className, 'border-b-0')}>
+      <div className="flex flex-row gap-x-1 font-rootstock-sans justify-center gap-2 ">
+        <div>{rewardPercentage?.current}</div>
+        {renderDelta}
+      </div>
+    </TableCell>
+  )
+}
+
+export const LastCycleRewardCell = ({ rewards }: { rewards: Reward[] }) => {
+  return (
+    <TableCell className={cn(tableHeaders[2].className, 'border-solid')}>
+      <LazyRewardCell rewards={rewards} />
+    </TableCell>
+  )
+}
+
+const EstimatedRewardCell = ({ rewards }: { rewards: Reward[] }) => {
+  return (
+    <TableCell className={cn(tableHeaders[3].className, 'border-solid')}>
+      <LazyRewardCell rewards={rewards} />
+    </TableCell>
+  )
+}
+
+type TotalAllocationCellProps = {
+  // a percentage without decimals
+  totalAllocationPercentage: bigint
+}
+
+const TotalAllocationCell = ({ totalAllocationPercentage }: TotalAllocationCellProps) => {
+  return (
+    <TableCell className={cn(tableHeaders[4].className, 'border-solid text-center border-b-0 items-center')}>
+      <div className="flex flex-row gap-2 items-center">
+        <ProgressBar progress={Number(totalAllocationPercentage)} color="#1bc47d" />
+        <Label>{totalAllocationPercentage.toString()}%</Label>
+      </div>
+    </TableCell>
+  )
+}
+const ActionCell = () => {
+  /* TODO: manage the button status 
+    - disabled when the backer cannot vote on the Builder
+    - variant=primary when the builder is selected and text changed to "Selected"
+    - variant=secondary by default and text is "Select"
+  */
+  /* TODO: add the onClick event
+   *  - it needs to interact with the allocation context to add the builder to the selected builders
+   */
+  return (
+    <TableCell className={cn(tableHeaders[5].className, 'border-solid align-center')}>
+      <Button variant="secondary" /* disabled={true} */>Select</Button>
+    </TableCell>
+  )
+}
+
+enum RewardsColumnKeyEnum {
+  builder = 'builder',
+  lastCycleRewards = 'lastCycleRewards',
+  estimatedRewards = 'estimatedRewards',
+  rewardPercentage = 'rewardPercentage',
+  totalAllocationPercentage = 'totalAllocationPercentage',
+}
+const tableHeaders = [
+  { label: 'Builder', className: 'w-[14%]', key: RewardsColumnKeyEnum.builder },
+  { label: 'Backer Rewards %', className: 'w-[10%]', key: RewardsColumnKeyEnum.rewardPercentage },
+  { label: 'Last Cycle Rewards', className: 'w-[22%]', key: RewardsColumnKeyEnum.lastCycleRewards },
+  { label: 'Est. Backers Rewards', className: 'w-[22%]', key: RewardsColumnKeyEnum.estimatedRewards },
+  {
+    label: 'Total Allocations',
+    className: 'w-[18%]',
+    // eslint-disable-next-line quotes
+    tooltip: "The Builder's share of the total allocations",
+    key: RewardsColumnKeyEnum.totalAllocationPercentage,
+  },
+  // TODO: text-center isn't applied
+  { label: 'Actions', className: 'w-[14%]' },
+]
+
+type ISortConfig = {
+  key: RewardsColumnKeyEnum
+  direction: 'asc' | 'desc'
+}
+
+const BuildersLeaderBoardTable = () => {
+  const { data: rewardsData, isLoading, error: rewardsError } = useGetBuildersRewards()
+  const [sortConfig, setSortConfig] = useState<ISortConfig>({
+    key: RewardsColumnKeyEnum.totalAllocationPercentage,
+    direction: 'asc',
+  })
+
+  // pagination
+  const buildersPerPage = 10
+  const tableDataLength = useMemo(() => Object.keys(rewardsData).length, [rewardsData])
+  const maxPages = useMemo(() => Math.ceil(tableDataLength / buildersPerPage), [tableDataLength])
+  const { paginationUi, currentPage } = useBasicPaginationUi(maxPages)
+
+  useHandleErrors({ error: rewardsError, title: 'Error loading builder rewards' })
+
+  type IRewardData = (typeof rewardsData)[number]
+  const sortedRewardsData = useMemo(
+    () =>
+      Object.values(rewardsData).toSorted((a: IRewardData, b: IRewardData) => {
+        const { key, direction } = sortConfig
+        if (!key) return 0
+
+        let aValue: number | string
+        let bValue: number | string
+        switch (key) {
+          case RewardsColumnKeyEnum.builder:
+            aValue = a.builderName || a.address
+            bValue = b.builderName || b.address
+            break
+          case RewardsColumnKeyEnum.totalAllocationPercentage:
+            aValue = Number(a.totalAllocationPercentage)
+            bValue = Number(b.totalAllocationPercentage)
+            break
+          case RewardsColumnKeyEnum.rewardPercentage:
+            if (!a.rewardPercentage || !b.rewardPercentage) return 0
+            aValue = a.rewardPercentage.current
+            bValue = b.rewardPercentage.current
+            break
+          case RewardsColumnKeyEnum.lastCycleRewards:
+            aValue = a.lastCycleReward.RIF.crypto.value + a.lastCycleReward.RBTC.crypto.value
+            bValue = b.lastCycleReward.RIF.crypto.value + b.lastCycleReward.RBTC.crypto.value
+            break
+          case RewardsColumnKeyEnum.estimatedRewards:
+            aValue = a.estimatedReward.RIF.crypto.value + a.estimatedReward.RBTC.crypto.value
+            bValue = b.estimatedReward.RIF.crypto.value + b.estimatedReward.RBTC.crypto.value
+            break
+          default:
+            return 0
+        }
+
+        if (typeof aValue === 'string' && typeof bValue === 'string') {
+          return direction === 'asc'
+            ? a.builderName.localeCompare(b.builderName)
+            : b.builderName.localeCompare(a.builderName)
+        }
+
+        if (typeof aValue === 'number' && typeof bValue === 'number') {
+          return direction === 'asc' ? aValue - bValue : bValue - aValue
+        }
+
+        return 0
+      }),
+    [rewardsData, sortConfig],
+  )
+
+  const paginatedRewardsData = useMemo(
+    () => sortedRewardsData.slice(currentPage * buildersPerPage, (currentPage + 1) * buildersPerPage),
+    [currentPage, sortedRewardsData],
+  )
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  if (!tableDataLength) {
+    return <EmptyLeaderboard />
+  }
+
+  const handleSort = (key: RewardsColumnKeyEnum) => {
+    setSortConfig(prevSortConfig => {
+      if (prevSortConfig?.key === key) {
+        // Toggle direction if the same column is clicked
+        return {
+          key,
+          direction: prevSortConfig.direction === 'asc' ? 'desc' : 'asc',
+        }
+      }
+      // Set initial sort direction to ascending
+      return { key, direction: 'asc' }
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      <TableCore className="table-fixed">
+        <TableHead>
+          <TableRow>
+            {tableHeaders.map(header => (
+              <TableCell
+                key={header.label}
+                className={cn(
+                  'font-rootstock-sans font-bold text-base leading-none border-b border-solid border-[#2D2D2D]',
+                  header.className,
+                )}
+              >
+                <div className="flex flex-row">
+                  {header.tooltip && (
+                    <Popover
+                      content={header.tooltip}
+                      className="font-normal text-sm flex items-center"
+                      size="small"
+                      trigger="hover"
+                    >
+                      <FaRegQuestionCircle className="mr-1 self-center" />
+                    </Popover>
+                  )}
+                  {header.label}
+                  {header.key && (
+                    <button
+                      className={`text-xs text-white flex items-center ml-1 transition-transform duration-300 ${sortConfig?.key === header.key && sortConfig?.direction === 'asc' ? 'rotate-0' : 'rotate-180'}`}
+                      onClick={() => handleSort(header.key)}
+                    >
+                      {sortConfig?.key === header.key ? (
+                        <RiArrowUpSFill className="stroke-2" />
+                      ) : (
+                        <LiaSortUpSolid />
+                      )}
+                    </button>
+                  )}
+                </div>
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.values(paginatedRewardsData).map(
+            ({
+              address,
+              builderName,
+              lastCycleReward,
+              estimatedReward,
+              totalAllocationPercentage,
+              rewardPercentage,
+            }) => (
+              <TableRow key={address} className="text-[14px] border-hidden">
+                <BuilderNameCell builderName={builderName} address={address} />
+                <BackerRewardsPercentage rewardPercentage={rewardPercentage} />
+                <LastCycleRewardCell rewards={[lastCycleReward.RBTC, lastCycleReward.RIF]} />
+                <EstimatedRewardCell rewards={[estimatedReward.RBTC, estimatedReward.RIF]} />
+                <TotalAllocationCell totalAllocationPercentage={totalAllocationPercentage} />
+                <ActionCell />
+              </TableRow>
+            ),
+          )}
+        </TableBody>
+      </TableCore>
+      <div className="flex justify-center">{paginationUi}</div>
+    </div>
+  )
+}
+
+export const BuildersLeaderBoard = () => {
+  const onManageAllocations = () => {
+    // TODO: fill the allocation context if necessary and change the route
+    console.log('Manage allocations')
+  }
+  return (
+    <>
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger>
+          <div className="flex items-center justify-between w-full">
+            <HeaderTitle className="">Rewards leaderboard</HeaderTitle>
+            <Button variant="primary" onClick={onManageAllocations}>
+              Manage Allocations
+            </Button>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <CycleContextProvider>
+            <BuilderContextProviderWithPrices>
+              <div className="pt-6">
+                <BuildersLeaderBoardTable />
+              </div>
+            </BuilderContextProviderWithPrices>
+          </CycleContextProvider>
+        </CollapsibleContent>
+      </Collapsible>
+    </>
+  )
+}
+
+const EmptyLeaderboard = () => (
+  <div className="relative w-full">
+    <img className="w-full h-fll object-cover" alt="no builders yet" src="/images/joining-without-text.png" />
+    <Typography
+      tagVariant="h1"
+      className="uppercase font-kk-topo text-[48px] leading-tight font-normal absolute inset-0 flex items-center justify-center tracking-[-0.96px]"
+    >
+      Builders are joining soon...
+    </Typography>
+  </div>
+)
diff --git a/src/app/collective-rewards/leaderboard/LeaderBoard.tsx b/src/app/collective-rewards/leaderboard/LeaderBoard.tsx
deleted file mode 100644
index abc1d6c0..00000000
--- a/src/app/collective-rewards/leaderboard/LeaderBoard.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { useGetBuildersRewards } from './hooks'
-import { useAlertContext } from '@/app/providers'
-import { AddressOrAliasWithCopy } from '@/components/Address'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { TableBody, TableCell, TableCore, TableHead, TableRow } from '@/components/Table'
-import { HeaderTitle, Label, Typography } from '@/components/Typography'
-import { tokenContracts } from '@/lib/contracts'
-import { cn, formatCurrency, shortAddress, toFixed } from '@/lib/utils'
-import { FC, memo, useEffect } from 'react'
-import { Jdenticon } from '@/components/Header/Jdenticon'
-import { BuilderContextProviderWithPrices } from '@/app/collective-rewards/user'
-import { Address, isAddress } from 'viem'
-import { Popover } from '@/components/Popover'
-
-type Currency = {
-  value: number
-  symbol: string
-}
-
-export type Reward = {
-  crypto: Currency
-  fiat: Currency
-}
-
-type TableData = {
-  [address: string]: {
-    builderName: string
-    lastCycleReward: Reward[]
-    projectedReward: Reward[]
-    share: bigint
-  }
-}
-
-type RewardCellProps = {
-  rewards: Reward[]
-}
-
-export const RewardCell: FC<RewardCellProps> = ({ rewards }) => (
-  <div className="flex flex-nowrap flex-row gap-1">
-    {rewards &&
-      rewards.map(({ crypto: { value, symbol }, fiat: { value: fiatValue, symbol: fiatSymbol } }) => (
-        <div key={value + symbol} className="flex-1">
-          {/* TODO: if the value is very small, should we show it in Gwei/wei? */}
-          <Label className="font-normal text-sm leading-none text-text-primary font-rootstock-sans">
-            {toFixed(value)} {symbol}
-          </Label>
-          <br />
-          <Label className="font-normal text-sm leading-none text-disabled-primary font-rootstock-sans">
-            {`= ${fiatSymbol} ${formatCurrency(fiatValue, fiatSymbol)}`}
-          </Label>
-        </div>
-      ))}
-  </div>
-)
-
-export const LazyRewardCell = memo(RewardCell, ({ rewards: prevReward }, { rewards: nextReward }) =>
-  prevReward.every((reward, key) => reward.fiat.value === nextReward[key].fiat.value),
-)
-
-export const BuilderNameCell = ({ builderName, address }: { builderName: string; address: string }) => {
-  const shortenAddress = shortAddress(address as Address)
-  return (
-    <TableCell className={cn(tableHeaders[0], 'border-solid')}>
-      <div className="flex flex-row gap-x-1">
-        <Jdenticon className="rounded-md bg-white" value={builderName} size="24" />
-        <Popover
-          content={
-            <div className="text-[12px] font-bold mb-1">
-              <p data-testid="builderAddressTooltip">{shortenAddress}</p>
-            </div>
-          }
-          size="small"
-          trigger="hover"
-          disabled={!builderName || isAddress(builderName)}
-        >
-          <Typography tagVariant="label" className="font-semibold line-clamp-1 text-wrap min-w-28">
-            <AddressOrAliasWithCopy
-              addressOrAlias={builderName || address}
-              clipboard={address}
-              clipboardAnimationText={shortenAddress}
-              className="text-sm"
-            />
-          </Typography>
-        </Popover>
-      </div>
-    </TableCell>
-  )
-}
-
-export const LastCycleRewardCell = ({ rewards }: { rewards: Reward[] }) => {
-  return (
-    <TableCell className={cn(tableHeaders[1], 'border-solid')}>
-      <LazyRewardCell rewards={rewards} />
-    </TableCell>
-  )
-}
-
-const ProjectedRewardCell = ({ rewards }: { rewards: Reward[] }) => {
-  return (
-    <TableCell className={cn(tableHeaders[2], 'border-solid')}>
-      <LazyRewardCell rewards={rewards} />
-    </TableCell>
-  )
-}
-
-const ShareCell = ({ share }: { share: bigint }) => {
-  return (
-    <TableCell className={cn(tableHeaders[3], 'border-solid text-center')}>
-      <Label className={cn(tableBodyCellClasses, getShareTextColour(share))}>{share.toString()}%</Label>
-    </TableCell>
-  )
-}
-
-const getShareTextColour = (share: bigint) => {
-  if (share >= 50n) return 'text-[#1BC47D]'
-  if (share >= 20n) return 'text-[#E56B1A]'
-  return 'text-[#F24822]'
-}
-
-const tableHeaders = [
-  { label: 'Builder', width: 'w-[38%]' },
-  { label: 'Last cycle Rewards', width: 'w-[24%]' },
-  { label: 'Projected Rewards', width: 'w-[24%]' },
-  { label: 'Share %', width: 'w-[14%]', text_position: 'text-center' },
-]
-
-const tableBodyCellClasses = 'font-normal text-base leading-none text-text-primary font-rootstock-sans'
-
-const LeaderBoardTable = () => {
-  const {
-    data: rbtcData,
-    isLoading: rbtcLoading,
-    error: rbtcRewardsError,
-  } = useGetBuildersRewards(tokenContracts.RBTC, 'RBTC')
-  const {
-    data: rifData,
-    isLoading: rifLoading,
-    error: rifRewardsError,
-  } = useGetBuildersRewards(tokenContracts.RIF, 'RIF')
-  const { setMessage: setErrorMessage } = useAlertContext()
-
-  const data = [...rbtcData, ...rifData]
-  const tableData = data.reduce<TableData>(
-    (acc, { address, builderName, lastCycleReward, projectedReward, share }) => {
-      const currentShare = acc[address]?.share ?? 0n
-      acc[address] = {
-        builderName,
-        lastCycleReward: [...(acc[address]?.lastCycleReward ?? []), lastCycleReward],
-        projectedReward: [...(acc[address]?.projectedReward ?? []), projectedReward],
-        share: share > currentShare ? share : currentShare,
-      }
-
-      return acc
-    },
-    {},
-  )
-  const tableDataLength = Object.keys(tableData).length
-
-  const isLoading = rbtcLoading || rifLoading
-
-  useEffect(() => {
-    if (rbtcRewardsError) {
-      setErrorMessage({
-        severity: 'error',
-        title: 'Error loading RBTC rewards',
-        content: rbtcRewardsError.message,
-      })
-      console.error('🐛 rbtcRewardsError:', rbtcRewardsError)
-    }
-  }, [rbtcRewardsError, setErrorMessage])
-
-  useEffect(() => {
-    if (rifRewardsError) {
-      setErrorMessage({
-        severity: 'error',
-        title: 'Error loading RIF rewards',
-        content: rifRewardsError.message,
-      })
-      console.error('🐛 rifRewardsError:', rifRewardsError)
-    }
-  }, [rifRewardsError, setErrorMessage])
-
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  if (!tableDataLength) {
-    return <EmptyLeaderboard />
-  }
-
-  return (
-    <TableCore>
-      <TableHead>
-        <TableRow>
-          {tableHeaders.map(header => (
-            <TableCell
-              key={header.label}
-              className={cn(
-                'font-rootstock-sans font-bold text-base leading-none border-b border-solid border-[#2D2D2D]',
-                header.width,
-                header.text_position,
-              )}
-            >
-              {header.label}
-            </TableCell>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {Object.entries(tableData).map(
-          ([address, { builderName, lastCycleReward, projectedReward, share }]) => (
-            <TableRow key={address + share} className="text-[14px] border-hidden">
-              <BuilderNameCell builderName={builderName} address={address} />
-              <LastCycleRewardCell rewards={lastCycleReward} />
-              <ProjectedRewardCell rewards={projectedReward} />
-              <ShareCell share={share} />
-            </TableRow>
-          ),
-        )}
-      </TableBody>
-    </TableCore>
-  )
-}
-
-export const LeaderBoard = () => {
-  return (
-    <>
-      <HeaderTitle>Rewards leaderboard</HeaderTitle>
-      <BuilderContextProviderWithPrices>
-        <LeaderBoardTable />
-      </BuilderContextProviderWithPrices>
-    </>
-  )
-}
-
-const EmptyLeaderboard = () => (
-  <div className="relative w-full">
-    <img className="w-full h-fll object-cover" alt="no builders yet" src="/images/joining-without-text.png" />
-    <Typography
-      tagVariant="h1"
-      className="uppercase font-kk-topo text-[48px] leading-tight font-normal absolute inset-0 flex items-center justify-center tracking-[-0.96px]"
-    >
-      Builders are joining soon...
-    </Typography>
-  </div>
-)
diff --git a/src/app/collective-rewards/leaderboard/hooks/index.ts b/src/app/collective-rewards/leaderboard/hooks/index.ts
deleted file mode 100644
index f2eac8c8..00000000
--- a/src/app/collective-rewards/leaderboard/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useGetBuildersRewards'
diff --git a/src/app/collective-rewards/leaderboard/hooks/useGetBuildersRewards.ts b/src/app/collective-rewards/leaderboard/hooks/useGetBuildersRewards.ts
deleted file mode 100644
index 0d45dead..00000000
--- a/src/app/collective-rewards/leaderboard/hooks/useGetBuildersRewards.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
-import { usePricesContext } from '@/shared/context/PricesContext'
-import { useGetTokenProjectedReward, useGetRewardDistributedLogs } from '@/app/collective-rewards/rewards'
-import { Address, isAddressEqual } from 'viem'
-import { getLastCycleRewards } from '@/app/collective-rewards/utils/getLastCycleRewards'
-import { useBuilderContext } from '@/app/collective-rewards/user'
-import { BuilderStatusActive } from '@/app/collective-rewards/types'
-
-export const useGetBuildersRewards = (rewardToken: Address, rewardTokenSymbol?: string, currency = 'USD') => {
-  const { data: builders, isLoading: buildersLoading, error: buildersError } = useBuilderContext()
-
-  const {
-    data: rewardDistributedLogs,
-    isLoading: logsLoading,
-    error: logsError,
-  } = useGetRewardDistributedLogs(rewardToken)
-  const {
-    data: { share, projectedReward },
-    isLoading: tokenLoading,
-    error: tokenError,
-  } = useGetTokenProjectedReward(rewardToken)
-  const tokenSymbol = rewardTokenSymbol ?? ''
-
-  const projectedRewardInHuman = Number(formatBalanceToHuman(projectedReward))
-
-  const isLoading = buildersLoading || logsLoading || tokenLoading
-  const error = buildersError ?? logsError ?? tokenError
-  const whitelistedBuilders = builders.filter(builder => builder.status === BuilderStatusActive)
-
-  const { prices } = usePricesContext()
-
-  return {
-    data: whitelistedBuilders.map(({ address, builderName }) => {
-      const builderEvents = rewardDistributedLogs.filter(event =>
-        isAddressEqual(event.args.builder_, address),
-      )
-      const lastCycleRewards = getLastCycleRewards(builderEvents)
-      const lastCycleRewardsInHuman = Number(formatBalanceToHuman(lastCycleRewards))
-
-      const price = prices[tokenSymbol]?.price ?? 0
-
-      return {
-        address,
-        builderName,
-        lastCycleReward: {
-          crypto: {
-            value: lastCycleRewardsInHuman,
-            symbol: tokenSymbol,
-          },
-          fiat: {
-            value: price * lastCycleRewardsInHuman,
-            symbol: currency,
-          },
-        },
-        projectedReward: {
-          crypto: {
-            value: projectedRewardInHuman,
-            symbol: tokenSymbol,
-          },
-          fiat: {
-            value: price * projectedRewardInHuman,
-            symbol: currency,
-          },
-        },
-        share,
-      }
-    }),
-    isLoading,
-    error,
-  }
-}
diff --git a/src/app/collective-rewards/leaderboard/index.ts b/src/app/collective-rewards/leaderboard/index.ts
index 39ca9caf..c3119541 100644
--- a/src/app/collective-rewards/leaderboard/index.ts
+++ b/src/app/collective-rewards/leaderboard/index.ts
@@ -1,2 +1 @@
-export * from './hooks'
-export * from './LeaderBoard'
+export * from './BuildersLeaderBoardTable'
diff --git a/src/app/collective-rewards/page.tsx b/src/app/collective-rewards/page.tsx
index 5dc477bd..eccdbd8f 100644
--- a/src/app/collective-rewards/page.tsx
+++ b/src/app/collective-rewards/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { LeaderBoard } from '@/app/collective-rewards/leaderboard'
+import { BuildersLeaderBoard } from '@/app/collective-rewards/leaderboard'
 import { Metrics } from '@/app/collective-rewards/metrics'
 import { WhitelistContextProviderWithBuilders, WhitelistSection } from '@/app/collective-rewards/whitelist'
 import { MainContainer } from '@/components/MainContainer/MainContainer'
@@ -13,7 +13,7 @@ export default function BuildersIncentiveMarket() {
         <WhitelistContextProviderWithBuilders>
           <WhitelistSection />
         </WhitelistContextProviderWithBuilders>
-        <LeaderBoard />
+        <BuildersLeaderBoard />
       </div>
     </MainContainer>
   )
diff --git a/src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx b/src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx
index 1de5d886..89bf36c5 100644
--- a/src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx
+++ b/src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx
@@ -65,6 +65,8 @@ const TokenRewards: FC<TokenRewardsProps> = ({ builder, gauge, token: { id, symb
 
   const rewardsAmount = rewardPercentage ? applyPrecision(rewards * rewardPercentage) : 0n
 
+  // rewardsAmountGauge = rewardsAmount * rewardShares / totalPotentialRewards
+  // rewardsAmountBuilder = rewardsAmount * (1 - rewardPercentage) / totalPotentialRewards
   const estimatedRewards =
     rewardShares && totalPotentialRewards ? (rewardShares * rewardsAmount) / totalPotentialRewards : 0n
   const estimatedRewardsInHuman = Number(formatBalanceToHuman(estimatedRewards))
diff --git a/src/app/collective-rewards/rewards/builders/hooks/index.ts b/src/app/collective-rewards/rewards/builders/hooks/index.ts
index 4e0ddd0c..3f108204 100644
--- a/src/app/collective-rewards/rewards/builders/hooks/index.ts
+++ b/src/app/collective-rewards/rewards/builders/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useClaimBuilderRewards'
 export * from './useGetBuilderRewards'
 export * from './useGetBuilderRewardsClaimedLogs'
 export * from './useGetRewardPercentageToApply'
+export * from './useGetBuildersRewards'
diff --git a/src/app/collective-rewards/rewards/builders/hooks/useGetBuildersRewards.ts b/src/app/collective-rewards/rewards/builders/hooks/useGetBuildersRewards.ts
new file mode 100644
index 00000000..1dc4698b
--- /dev/null
+++ b/src/app/collective-rewards/rewards/builders/hooks/useGetBuildersRewards.ts
@@ -0,0 +1,175 @@
+import { useCycleContext } from '@/app/collective-rewards/metrics'
+import {
+  getNotifyRewardAmount,
+  useGetBuildersRewardPercentage,
+  useGetGaugesNotifyReward,
+  useGetGaugesRewardShares,
+  useGetRewardsCoinbase,
+  useGetRewardsERC20,
+  useGetTotalAllocations,
+  useGetTotalPotentialReward,
+} from '@/app/collective-rewards/rewards'
+import { useGetFilteredBuilders } from '@/app/collective-rewards/whitelist'
+import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
+import { RBTC, RIF, USD } from '@/lib/constants'
+import { usePricesContext } from '@/shared/context/PricesContext'
+
+export const useGetBuildersRewards = () => {
+  const {
+    data: activeBuilders,
+    isLoading: activeBuildersLoading,
+    error: activeBuildersError,
+  } = useGetFilteredBuilders({ builderName: '', status: 'Active' })
+
+  const {
+    data: totalPotentialRewards,
+    isLoading: totalPotentialRewardsLoading,
+    error: totalPotentialRewardsError,
+  } = useGetTotalPotentialReward()
+
+  const buildersAddress = activeBuilders?.map(({ address }) => address)
+  const {
+    data: buildersRewardsPercentage,
+    isLoading: rewardsPercentageLoading,
+    error: rewardsPercentageError,
+  } = useGetBuildersRewardPercentage(buildersAddress)
+
+  const gauges = activeBuilders?.map(({ gauge }) => gauge)
+  const {
+    data: { allocationsPercentage },
+    isLoading: allocationsLoading,
+    error: allocationsError,
+  } = useGetTotalAllocations(gauges)
+
+  const {
+    data: rewardShares,
+    isLoading: rewardSharesLoading,
+    error: rewardSharesError,
+  } = useGetGaugesRewardShares(gauges)
+
+  const {
+    data: rewardsERC20,
+    isLoading: rewardsERC20Loading,
+    error: rewardsERC20Error,
+  } = useGetRewardsERC20()
+
+  const {
+    data: rewardsCoinbase,
+    isLoading: rewardsCoinbaseLoading,
+    error: rewardsCoinbaseError,
+  } = useGetRewardsCoinbase()
+
+  const { data: cycle, isLoading: cycleLoading, error: cycleError } = useCycleContext()
+  const { cycleDuration, cycleStart, endDistributionWindow } = cycle
+  const distributionWindow = endDistributionWindow.diff(cycleStart)
+  const lastCycleStart = cycleStart.minus({ millisecond: cycleDuration.as('millisecond') })
+  const lastCycleAfterDistribution = lastCycleStart.plus({ millisecond: +distributionWindow })
+
+  const {
+    data: notifyRewardEventLastCycle,
+    isLoading: logsLoading,
+    error: logsError,
+  } = useGetGaugesNotifyReward(
+    gauges,
+    undefined,
+    lastCycleAfterDistribution.toSeconds(),
+    endDistributionWindow.toSeconds(),
+  )
+
+  const buildersRewardsAmount = getNotifyRewardAmount(gauges, notifyRewardEventLastCycle)
+
+  const isLoading =
+    rewardSharesLoading ||
+    activeBuildersLoading ||
+    allocationsLoading ||
+    logsLoading ||
+    rewardsPercentageLoading ||
+    rewardsERC20Loading ||
+    rewardsCoinbaseLoading ||
+    cycleLoading ||
+    totalPotentialRewardsLoading
+
+  const error =
+    rewardSharesError ??
+    activeBuildersError ??
+    allocationsError ??
+    logsError ??
+    rewardsPercentageError ??
+    rewardsERC20Error ??
+    rewardsCoinbaseError ??
+    cycleError ??
+    totalPotentialRewardsError
+
+  const { prices } = usePricesContext()
+
+  const priceRif = prices[RIF]?.price ?? 0
+  const priceRbtc = prices[RBTC]?.price ?? 0
+
+  return {
+    data: activeBuilders.map(({ address, builderName }, i) => {
+      const builderRewardShares = rewardShares ? rewardShares[i] : 0n
+      const rewardPercentage = buildersRewardsPercentage?.[i] ?? null
+      const currentRewardPercentage = rewardPercentage?.current ?? 0
+
+      // calculate rif estimated rewards
+      const rewardRif = rewardsERC20 ?? 0n
+      const rewardsAmountRif = totalPotentialRewards
+        ? rewardRif * (builderRewardShares / totalPotentialRewards)
+        : 0n
+      const estimatedRifInHuman =
+        Number(formatBalanceToHuman(rewardsAmountRif)) * (currentRewardPercentage / 100)
+
+      // calculate rbtc estimated rewards
+      const rewardRbtc = rewardsCoinbase ?? 0n
+      const rewardsAmountRbtc = totalPotentialRewards
+        ? rewardRbtc * (builderRewardShares / totalPotentialRewards)
+        : 0n
+      const estimatedRbtcInHuman =
+        Number(formatBalanceToHuman(rewardsAmountRbtc)) * (currentRewardPercentage / 100)
+
+      const totalAllocationPercentage = allocationsPercentage?.[i] ?? 0n
+      const builderRewardsAmount = buildersRewardsAmount[gauges[i]]
+
+      return {
+        address,
+        builderName,
+        totalAllocationPercentage,
+        rewardPercentage,
+        lastCycleReward: {
+          RIF: {
+            crypto: { value: builderRewardsAmount.RIF, symbol: RIF },
+            fiat: {
+              value: priceRif * builderRewardsAmount.RIF,
+              symbol: USD,
+            },
+          },
+          RBTC: {
+            crypto: { value: builderRewardsAmount.RBTC, symbol: RBTC },
+            fiat: {
+              value: priceRbtc * builderRewardsAmount.RBTC,
+              symbol: USD,
+            },
+          },
+        },
+        estimatedReward: {
+          RIF: {
+            crypto: { value: estimatedRifInHuman, symbol: RIF },
+            fiat: {
+              value: priceRif * estimatedRifInHuman,
+              symbol: USD,
+            },
+          },
+          RBTC: {
+            crypto: { value: estimatedRbtcInHuman, symbol: RBTC },
+            fiat: {
+              value: priceRbtc * estimatedRbtcInHuman,
+              symbol: USD,
+            },
+          },
+        },
+      }
+    }),
+    isLoading,
+    error,
+  }
+}
diff --git a/src/app/collective-rewards/rewards/hooks/index.ts b/src/app/collective-rewards/rewards/hooks/index.ts
index 28203926..4e8b9bc4 100644
--- a/src/app/collective-rewards/rewards/hooks/index.ts
+++ b/src/app/collective-rewards/rewards/hooks/index.ts
@@ -8,3 +8,7 @@ export * from './useGetRewardsERC20'
 export * from './useGetPerTokenRewards'
 export * from './useGetGaugesEvents'
 export * from './useGetGaugesNotifyReward'
+export * from './useGetBuilderRewardPercentage'
+export * from './useGetBuildersRewardPercentage'
+export * from './useGetGaugesRewardShares'
+export * from './useGetTotalAllocations'
diff --git a/src/app/collective-rewards/rewards/hooks/useGetBuilderRewardPercentage.ts b/src/app/collective-rewards/rewards/hooks/useGetBuilderRewardPercentage.ts
new file mode 100644
index 00000000..19ee080a
--- /dev/null
+++ b/src/app/collective-rewards/rewards/hooks/useGetBuilderRewardPercentage.ts
@@ -0,0 +1,36 @@
+import { BuilderRewardPercentage, getPercentageData } from '@/app/collective-rewards/rewards/utils'
+import { BackersManagerAbi } from '@/lib/abis/v2/BackersManagerAbi'
+import { AVERAGE_BLOCKTIME } from '@/lib/constants'
+import { BackersManagerAddress } from '@/lib/contracts'
+import { useEffect, useState } from 'react'
+import { Address } from 'viem'
+import { useReadContract } from 'wagmi'
+
+export const useGetBuilderRewardPercentage = (builder: Address) => {
+  const [rewardPercentageData, setRewardPercentageData] = useState<BuilderRewardPercentage>()
+  const { data, isLoading, error } = useReadContract({
+    address: BackersManagerAddress,
+    abi: BackersManagerAbi,
+    functionName: 'builderRewardPercentage',
+    args: [builder],
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+    },
+  })
+
+  useEffect(() => {
+    if (!data) return
+
+    const [previous, next, cooldownEndTime] = data
+
+    const percentageData = getPercentageData(previous, next, cooldownEndTime)
+
+    setRewardPercentageData(percentageData)
+  }, [data])
+
+  return {
+    rewardPercentageData,
+    isLoading,
+    error,
+  }
+}
diff --git a/src/app/collective-rewards/rewards/hooks/useGetBuildersRewardPercentage.ts b/src/app/collective-rewards/rewards/hooks/useGetBuildersRewardPercentage.ts
new file mode 100644
index 00000000..a102a2ae
--- /dev/null
+++ b/src/app/collective-rewards/rewards/hooks/useGetBuildersRewardPercentage.ts
@@ -0,0 +1,46 @@
+import { getPercentageData } from '@/app/collective-rewards/rewards/utils'
+import { BackersManagerAbi } from '@/lib/abis/v2/BackersManagerAbi'
+import { AVERAGE_BLOCKTIME } from '@/lib/constants'
+import { BackersManagerAddress } from '@/lib/contracts'
+import { useMemo } from 'react'
+import { Address } from 'viem'
+import { useReadContracts } from 'wagmi'
+
+export const useGetBuildersRewardPercentage = (builders: Address[]) => {
+  const rewardPercentageCalls = useMemo(
+    () =>
+      builders?.map(
+        builder =>
+          ({
+            address: BackersManagerAddress,
+            abi: BackersManagerAbi,
+            functionName: 'builderRewardPercentage',
+            args: [builder],
+          }) as const,
+      ),
+    [builders],
+  )
+  const {
+    data: rewardSharesResult,
+    isLoading,
+    error,
+  } = useReadContracts<[bigint, bigint, bigint][]>({
+    contracts: rewardPercentageCalls,
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+    },
+  })
+  const rewardPercentage = useMemo(
+    () =>
+      rewardSharesResult
+        ?.map(share => share.result as [bigint, bigint, bigint])
+        .map(([previous, next, cooldownEndTime]) => getPercentageData(previous, next, cooldownEndTime)),
+    [rewardSharesResult],
+  )
+
+  return {
+    data: rewardPercentage,
+    isLoading,
+    error,
+  }
+}
diff --git a/src/app/collective-rewards/rewards/hooks/useGetGaugesNotifyReward.ts b/src/app/collective-rewards/rewards/hooks/useGetGaugesNotifyReward.ts
index 2d7463c3..11d96534 100644
--- a/src/app/collective-rewards/rewards/hooks/useGetGaugesNotifyReward.ts
+++ b/src/app/collective-rewards/rewards/hooks/useGetGaugesNotifyReward.ts
@@ -2,7 +2,12 @@ import { Address, isAddressEqual } from 'viem'
 import { useMemo } from 'react'
 import { useGetGaugesEvents } from '@/app/collective-rewards/rewards'
 
-export const useGetGaugesNotifyReward = (gauges: Address[], rewardToken?: Address) => {
+export const useGetGaugesNotifyReward = (
+  gauges: Address[],
+  rewardToken?: Address,
+  fromTimestamp?: number,
+  toTimestamp?: number,
+) => {
   const { data: eventsData, isLoading, error } = useGetGaugesEvents(gauges, 'NotifyReward')
 
   const data = useMemo(() => {
@@ -11,13 +16,25 @@ export const useGetGaugesNotifyReward = (gauges: Address[], rewardToken?: Addres
       if (rewardToken) {
         events = events.filter(event => isAddressEqual(event.args.rewardToken_, rewardToken))
       }
+      if (fromTimestamp) {
+        events = events.filter(event => {
+          // @ts-ignore
+          return event.timeStamp >= fromTimestamp
+        })
+      }
+      if (toTimestamp) {
+        events = events.filter(event => {
+          // @ts-ignore
+          return event.timeStamp <= toTimestamp
+        })
+      }
 
       if (events.length > 0) {
         acc[key] = events
       }
       return acc
     }, {})
-  }, [eventsData, rewardToken])
+  }, [eventsData, rewardToken, fromTimestamp, toTimestamp])
 
   return {
     data,
diff --git a/src/app/collective-rewards/rewards/hooks/useGetGaugesRewardShares.ts b/src/app/collective-rewards/rewards/hooks/useGetGaugesRewardShares.ts
new file mode 100644
index 00000000..921e4aa5
--- /dev/null
+++ b/src/app/collective-rewards/rewards/hooks/useGetGaugesRewardShares.ts
@@ -0,0 +1,42 @@
+import { GaugeAbi } from '@/lib/abis/v2/GaugeAbi'
+import { AVERAGE_BLOCKTIME } from '@/lib/constants'
+import { useEffect, useMemo } from 'react'
+import { Address } from 'viem'
+import { useReadContracts } from 'wagmi'
+
+export const useGetGaugesRewardShares = (gauges: Address[]) => {
+  const rewardSharesCalls = useMemo(
+    () =>
+      gauges?.map(
+        gauge =>
+          ({
+            address: gauge,
+            abi: GaugeAbi,
+            functionName: 'rewardShares',
+            args: [],
+          }) as const,
+      ),
+    [gauges],
+  )
+  const {
+    data: rewardSharesResult,
+    isLoading,
+    error,
+  } = useReadContracts<Address[]>({
+    contracts: rewardSharesCalls,
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+    },
+  })
+
+  const rewardShares = useMemo(
+    () => rewardSharesResult?.map(share => share.result as bigint),
+    [rewardSharesResult],
+  )
+
+  return {
+    data: rewardShares,
+    isLoading,
+    error,
+  }
+}
diff --git a/src/app/collective-rewards/rewards/hooks/useGetTotalAllocations.ts b/src/app/collective-rewards/rewards/hooks/useGetTotalAllocations.ts
new file mode 100644
index 00000000..210d81bd
--- /dev/null
+++ b/src/app/collective-rewards/rewards/hooks/useGetTotalAllocations.ts
@@ -0,0 +1,43 @@
+import { GaugeAbi } from '@/lib/abis/v2/GaugeAbi'
+import { AVERAGE_BLOCKTIME } from '@/lib/constants'
+import { useMemo } from 'react'
+import { Address } from 'viem'
+import { useReadContracts } from 'wagmi'
+
+export const useGetTotalAllocations = (gauges: Address[]) => {
+  const totalAllocationCalls = useMemo(
+    () =>
+      gauges?.map(
+        gauge =>
+          ({
+            address: gauge,
+            abi: GaugeAbi,
+            functionName: 'totalAllocation',
+            args: [],
+          }) as const,
+      ),
+    [gauges],
+  )
+  const {
+    data: allocationsResult,
+    isLoading,
+    error,
+  } = useReadContracts<Address[]>({
+    contracts: totalAllocationCalls,
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+    },
+  })
+  const allocations = allocationsResult?.map(allocation => allocation.result as bigint)
+  const sum = useMemo(() => allocations?.reduce((acc, allocation) => acc + allocation, 0n), [allocations])
+  const allocationsPercentage = useMemo(
+    () => (allocations && sum ? allocations?.map(allocation => (allocation / sum) * 100n) : []),
+    [allocations, sum],
+  )
+
+  return {
+    data: { allocations, allocationsPercentage, sum },
+    isLoading,
+    error,
+  }
+}
diff --git a/src/app/collective-rewards/rewards/utils/getNotifyRewardAmount.ts b/src/app/collective-rewards/rewards/utils/getNotifyRewardAmount.ts
new file mode 100644
index 00000000..012fdcb1
--- /dev/null
+++ b/src/app/collective-rewards/rewards/utils/getNotifyRewardAmount.ts
@@ -0,0 +1,44 @@
+import {
+  BackerRewardsClaimedEventLog,
+  GaugeNotifyRewardEventLog,
+  NotifyRewardEventLog,
+} from '@/app/collective-rewards/rewards'
+import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
+import { RBTC, RIF } from '@/lib/constants'
+import { tokenContracts } from '@/lib/contracts'
+import { Address, getAddress, isAddressEqual } from 'viem'
+
+interface BuilderClaimedRewards {
+  [RIF]: number
+  [RBTC]: number
+}
+export const getNotifyRewardAmount = (
+  gauges: Address[],
+  notifyRewardEvents: Record<Address, GaugeNotifyRewardEventLog>,
+) => {
+  const buildersClaimedRifLastCycle: Record<Address, BuilderClaimedRewards> = {}
+  for (const gauge of gauges) {
+    const gaugeClaimedEvents = notifyRewardEvents[gauge] ?? []
+    // Calculate total amount of RIF claimed by the backer
+    const gaugeRifClaimedTotal: bigint = gaugeClaimedEvents.reduce(
+      (acc, value) =>
+        isAddressEqual(value.args.rewardToken_, getAddress(tokenContracts.RIF))
+          ? acc + value.args.builderAmount_
+          : acc,
+      0n,
+    )
+    // Calculate total amount of RBTC claimed by the backer
+    const gaugeRbtcClaimedTotal: bigint = gaugeClaimedEvents.reduce(
+      (acc, value) =>
+        isAddressEqual(value.args.rewardToken_, getAddress(tokenContracts.RBTC))
+          ? acc + value.args.builderAmount_
+          : acc,
+      0n,
+    )
+    buildersClaimedRifLastCycle[gauge] = {
+      RIF: Number(formatBalanceToHuman(gaugeRifClaimedTotal)),
+      RBTC: Number(formatBalanceToHuman(gaugeRbtcClaimedTotal)),
+    }
+  }
+  return buildersClaimedRifLastCycle
+}
diff --git a/src/app/collective-rewards/rewards/utils/getPercentageData.ts b/src/app/collective-rewards/rewards/utils/getPercentageData.ts
new file mode 100644
index 00000000..2a3e49a8
--- /dev/null
+++ b/src/app/collective-rewards/rewards/utils/getPercentageData.ts
@@ -0,0 +1,22 @@
+import { toPercentage } from './toPercentage'
+
+export interface BuilderRewardPercentage {
+  current: number
+  next: number
+  cooldownEndTime: bigint
+}
+
+export const getPercentageData = (previous: bigint, next: bigint, cooldownEndTime: bigint) => {
+  const currentTimestamp = Math.floor(Date.now() / 1000)
+  const previousPercentage = toPercentage(previous)
+  const nextPercentage = toPercentage(next)
+  let currentPercentage = currentTimestamp < cooldownEndTime ? previousPercentage : nextPercentage
+  currentPercentage = Math.round(currentPercentage * 100) / 100
+
+  const percentageData: BuilderRewardPercentage = {
+    current: currentPercentage,
+    next: nextPercentage,
+    cooldownEndTime,
+  }
+  return percentageData
+}
diff --git a/src/app/collective-rewards/rewards/utils/index.ts b/src/app/collective-rewards/rewards/utils/index.ts
index 52526a99..15bf22f2 100644
--- a/src/app/collective-rewards/rewards/utils/index.ts
+++ b/src/app/collective-rewards/rewards/utils/index.ts
@@ -1,2 +1,4 @@
 export * from './formatMetrics'
 export * from './getLastCycleRewards'
+export * from './getNotifyRewardAmount'
+export * from './getPercentageData'
diff --git a/src/app/collective-rewards/rewards/utils/toPercentage.ts b/src/app/collective-rewards/rewards/utils/toPercentage.ts
new file mode 100644
index 00000000..1f316dac
--- /dev/null
+++ b/src/app/collective-rewards/rewards/utils/toPercentage.ts
@@ -0,0 +1,3 @@
+import { parseEther } from 'viem'
+
+export const toPercentage = (value: bigint) => Number((value * 100n) / parseEther('1'))
diff --git a/src/app/collective-rewards/types.ts b/src/app/collective-rewards/types.ts
index fe435078..24d879cd 100644
--- a/src/app/collective-rewards/types.ts
+++ b/src/app/collective-rewards/types.ts
@@ -18,6 +18,7 @@ export type BuilderInfo = {
   address: Address
   status: BuilderStatus
   proposals: CreateBuilderProposalEventLog[]
+  gauge: Address
 }
 
 export type ProposalsToState = Record<string, ProposalState>
diff --git a/src/app/collective-rewards/user/components/Button/BecomeABuilderButton.test.tsx b/src/app/collective-rewards/user/components/Button/BecomeABuilderButton.test.tsx
index d6541d99..cafd2927 100644
--- a/src/app/collective-rewards/user/components/Button/BecomeABuilderButton.test.tsx
+++ b/src/app/collective-rewards/user/components/Button/BecomeABuilderButton.test.tsx
@@ -44,6 +44,7 @@ describe('BecomeABuilderButton', () => {
         timeStamp: 1723309061,
       },
     ] as CreateBuilderProposalEventLog[],
+    gauge: '0x01',
   }
   const buildersData = [builderData]
   const proposalsToStates = {
diff --git a/src/app/collective-rewards/user/context/BuilderContext.tsx b/src/app/collective-rewards/user/context/BuilderContext.tsx
index f29c6392..50a7a845 100644
--- a/src/app/collective-rewards/user/context/BuilderContext.tsx
+++ b/src/app/collective-rewards/user/context/BuilderContext.tsx
@@ -20,6 +20,7 @@ export type BuilderProposal = {
   proposalName: string
   proposalDescription: string
   joiningDate: string
+  gauge: Address
 }
 
 type ProposalByBuilder = Record<Address, BuilderProposal>
@@ -58,7 +59,7 @@ export const BuilderContextProvider: FC<BuilderProviderProps> = ({ children }) =
 
   const filteredBuilders = useMemo(() => {
     return builders.reduce<ProposalByBuilder>((acc, builder) => {
-      const { status, address } = builder
+      const { status, address, gauge } = builder
       const proposal = getMostAdvancedProposal(builder, proposalsStateMap)
 
       if (proposal) {
@@ -77,6 +78,7 @@ export const BuilderContextProvider: FC<BuilderProviderProps> = ({ children }) =
           proposalName,
           proposalDescription,
           joiningDate,
+          gauge,
         }
       }
 
diff --git a/src/app/collective-rewards/user/hooks/useGetBuilders.ts b/src/app/collective-rewards/user/hooks/useGetBuilders.ts
index fd791b8e..7ddbdea9 100644
--- a/src/app/collective-rewards/user/hooks/useGetBuilders.ts
+++ b/src/app/collective-rewards/user/hooks/useGetBuilders.ts
@@ -61,6 +61,7 @@ export const useGetBuilders = (): BuildersLoader => {
    */
   // get the gauges
   const { data: gauges, isLoading: gaugesLoading, error: gaugesError } = useGetGaugesArray('active')
+
   // get the builders for each gauge
   const gaugeToBuilderCalls = gauges?.map(
     gauge =>
@@ -83,6 +84,14 @@ export const useGetBuilders = (): BuildersLoader => {
   })
   const builders = buildersResult?.map(builder => builder.result) as Address[]
 
+  const builderToGauge = builders?.reduce(
+    (acc, builder, index) => {
+      acc[builder] = gauges![index]
+      return acc
+    },
+    {} as Record<Address, Address>,
+  )
+
   // get the builder state for each builder
   const builderStatesCalls = builders?.map(
     builder =>
@@ -124,8 +133,9 @@ export const useGetBuilders = (): BuildersLoader => {
           ? builderStatusMap[builder as Address] // V2
           : BuilderStatusProposalCreatedMVP, // MVP
       proposals: Object.values(proposals),
+      gauge: builderToGauge?.[builder as Address],
     }))
-  }, [builderStatusMap, buildersProposalsMap])
+  }, [builderStatusMap, buildersProposalsMap, builderToGauge])
 
   const isLoading = builderProposalsMapLoading || builderStatesLoading || buildersLoading || gaugesLoading
   const error = builderProposalsMapError ?? builderStatesError ?? buildersError ?? gaugesError
diff --git a/src/app/collective-rewards/utils/getMostAdvancedProposal.test.tsx b/src/app/collective-rewards/utils/getMostAdvancedProposal.test.tsx
index 2435d4f3..8f5ea79d 100644
--- a/src/app/collective-rewards/utils/getMostAdvancedProposal.test.tsx
+++ b/src/app/collective-rewards/utils/getMostAdvancedProposal.test.tsx
@@ -24,6 +24,7 @@ describe('getValidProposal', () => {
               },
             },
           ] as CreateBuilderProposalEventLog[],
+          gauge: '0x01',
         },
         {
           1: ProposalState.Executed,
@@ -48,6 +49,7 @@ describe('getValidProposal', () => {
               },
             },
           ] as CreateBuilderProposalEventLog[],
+          gauge: '0x01',
         },
         {
           1: ProposalState.Active,
@@ -78,6 +80,7 @@ describe('getValidProposal', () => {
               },
             },
           ] as CreateBuilderProposalEventLog[],
+          gauge: '0x01',
         },
         {
           1: ProposalState.Active,
@@ -108,6 +111,7 @@ describe('getValidProposal', () => {
               },
             },
           ] as CreateBuilderProposalEventLog[],
+          gauge: '0x01',
         },
         {
           1: ProposalState.Canceled,
diff --git a/src/app/collective-rewards/whitelist/hooks/useGetFilteredBuilders.ts b/src/app/collective-rewards/whitelist/hooks/useGetFilteredBuilders.ts
index eff84149..f70b0ffe 100644
--- a/src/app/collective-rewards/whitelist/hooks/useGetFilteredBuilders.ts
+++ b/src/app/collective-rewards/whitelist/hooks/useGetFilteredBuilders.ts
@@ -31,6 +31,7 @@ export const useGetFilteredBuilders = ({
     if (filterStatus !== 'all') {
       filteredBuilders = filteredBuilders.filter(builder => builder.status === filterStatus)
     }
+
     setData(filteredBuilders)
   }, [builders, filterBuilderName, filterStatus])
 
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
index 113a03ab..8e67fb2c 100644
--- a/src/components/Collapsible/Collapsible.tsx
+++ b/src/components/Collapsible/Collapsible.tsx
@@ -13,7 +13,7 @@ const CollapsibleTrigger = React.forwardRef<
   const iconBaseCn = 'h-6 w-6 shrink-0'
   return (
     <div className="flex">
-      <div className="flex items-center justify-center gap-[10px]">
+      <div className="flex gap-[10px] w-full">
         <CollapsiblePrimitive.Trigger ref={ref} className={cn('transition-all group', className)} {...props}>
           <SlArrowUp className={cn(iconBaseCn, 'group-data-[state=open]:hidden')} />
           <SlArrowDown className={cn(iconBaseCn, 'group-data-[state=closed]:hidden')} />
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
new file mode 100644
index 00000000..f77f9c82
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+type Props = {
+  progress: number // A number between 0 and 100
+  color?: string
+}
+
+export const ProgressBar: React.FC<Props> = ({ progress, color }) => {
+  return (
+    <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
+      <div
+        className="h-2 rounded-full bg-neutral-600"
+        style={{ width: `${progress}%`, backgroundColor: `${color}` }}
+      ></div>
+    </div>
+  )
+}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 727e9f55..48005315 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -34,4 +34,5 @@ export const AVERAGE_BLOCKTIME = 30_000
 
 export const RIF = 'RIF'
 export const USD = 'USD'
+export const RBTC = 'RBTC'
 export const USD_SYMBOL = '$'
diff --git a/src/shared/hooks/usePagination.ts b/src/shared/hooks/usePagination.ts
index df8d3876..fd9ce9a4 100644
--- a/src/shared/hooks/usePagination.ts
+++ b/src/shared/hooks/usePagination.ts
@@ -1,7 +1,7 @@
 import { InfiniteData, useInfiniteQuery, UseInfiniteQueryResult } from '@tanstack/react-query'
 import { useState, useCallback, useMemo, useEffect } from 'react'
 
-interface PaginatedResponse<T> {
+export interface PaginatedResponse<T> {
   items: T[]
   [key: string]: any
 }
diff --git a/src/shared/hooks/usePaginationUi.tsx b/src/shared/hooks/usePaginationUi.tsx
index 627aaf6b..c0a1a8a5 100644
--- a/src/shared/hooks/usePaginationUi.tsx
+++ b/src/shared/hooks/usePaginationUi.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useMemo } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { UsePaginatedQueryResult } from '@/shared/hooks/usePagination'
 import { Button } from '@/components/Button'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
@@ -22,8 +22,8 @@ export function usePaginationUi<T>(
   } = paginationResult
 
   const paginationElement = useMemo(() => {
+    const maxVisiblePages = 5
     const getPageNumbers = () => {
-      const maxVisiblePages = 5
       const pages = []
       const start = Math.max(0, Math.min(tablePage - 2, totalPages - maxVisiblePages))
       const end = Math.min(start + maxVisiblePages, totalPages)
@@ -66,6 +66,53 @@ export function usePaginationUi<T>(
   }
 }
 
+export function useBasicPaginationUi(totalPages: number) {
+  const [currentPage, setCurrentPage] = useState(0)
+  const maxVisiblePages = 5
+
+  const setPage = (nextPage: number) => {
+    if (nextPage < 0 || nextPage >= totalPages) return
+    if (nextPage === currentPage) return
+    setCurrentPage(nextPage)
+  }
+
+  const getPageNumbers = () => {
+    const pages = []
+    const start = Math.max(0, Math.min(currentPage - 2, totalPages - maxVisiblePages))
+    const end = Math.min(start + maxVisiblePages, totalPages)
+
+    for (let i = start; i < end; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
+
+  const paginationUi = (
+    <div className="flex gap-x-1 items-center justify-center">
+      <PaginationButton
+        text={<ChevronLeft />}
+        onClick={() => setPage(currentPage - 1)}
+        disabled={currentPage === 0}
+      />
+      {getPageNumbers().map(pageNumber => (
+        <PaginationButton
+          key={pageNumber}
+          onClick={() => setPage(pageNumber)}
+          text={pageNumber + 1}
+          isActive={pageNumber === currentPage}
+        />
+      ))}
+      <PaginationButton
+        text={<ChevronRight />}
+        onClick={() => setPage(currentPage + 1)}
+        disabled={currentPage === totalPages - 1}
+      />
+    </div>
+  )
+
+  return { paginationUi, currentPage }
+}
+
 const PaginationButton = ({
   text,
   onClick,